/*
    Theme Name: OnePage
    Theme URL: https://bootstrapmade.com/onepage-multipurpose-bootstrap-template/
    Author: BootstrapMade
    Author URL: https://bootstrapmade.com
*/
/* ==== Google font ==== */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700,900);
@import url('https://fonts.googleapis.com/css?family=Ek+Mukta:400,600,700');

body {
    width: 100%;
    height: 100%;
    font-family: 'Ek Mukta', sans-serif;
	font-weight: 300;
    color: #333;
    background-color: #fff;
	font-size: 16px;
    line-height: 1.7em;
	font-weight: 400;
}

p {
	font-size:16px;

}

.btn-primary {
    padding: 10px 25px; /* Más ancho y alto para que sea prominente */
    background: #2487cd; /* Fondo azul fuerte */
    color: #fff; /* Texto blanco en el botón */
    border: 1px solid #2487cd; 
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    transition: all 0.3s ease;
}

.btn-primary:hover, .btn-primary:focus {
    background: #1e70a8; /* Tonalidad más oscura al pasar el ratón */
    border-color: #1e70a8;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
} 


/* --- logo --- */
.site-logo {	
	margin-top:10px;
	margin-bottom:10px;
    float: left;
}

.site-logo a.brand {
	color: #2487cd;	
	font-size: 30px;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	
}
.site-logo a.brand:hover {
	text-decoration:none;
}

/* ------- Navigation ------------ */

.navbar {
    margin-bottom: 0;
}

.navbar-brand {
    font-weight: 700;
}

.navbar-brand:focus {
    outline: 0;
}

.nav.navbar-nav {
	padding:5px !important;
    margin-top: 5px !important; /* Agregamos un pequeño margen para empujarla hacia abajo */
}

.navbar-fixed-top ul.nav li a {
    /* Agrega estas líneas */
    padding-top: 5px !important; /* Menos relleno en la parte superior */
    padding-bottom: 5px !important; /* Menos relleno en la parte inferior */
    /* Esta es la propiedad clave para el centrado vertical de texto, 
       pero solo es efectiva si no usamos flexbox. La dejamos por si acaso: */
    line-height: 40px !important; /* Ajusta este valor si es necesario, aunque flexbox es mejor */
    /* Fin de las líneas agregadas */
	font-size: 14px;
	letter-spacing: 3px;
    color: #000;
	text-transform: uppercase;
	font-weight: 700;
}

.navbar-fixed-top.top-nav-collapse ul.nav li a {
	    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
	color: #fff;
}

.navbar-fixed-top ul.nav ul.dropdown-menu {
	  border-radius: 0;	
	margin-top: 21px;
	border-top: none;
}

.navbar-fixed-top ul.nav li a:hover ul.dropdown-menu {
	    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.navbar-fixed-top ul.nav ul.dropdown-menu li:last-child{
	border-bottom: none;
}

.navbar-fixed-top ul.nav ul.dropdown-menu li a {
	padding: 10px 20px;
}

.navbar-fixed-top.top-nav-collapse ul.nav ul.dropdown-menu li a {
	color: #666;
}

.navbar-fixed-top .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar-fixed-top .nav li a:hover,
.navbar-fixed-top .nav li a:focus,
.navbar-fixed-top.nav li.active {
    outline: 0;
  
	color:#2487cd ;
}

.navbar-toggle {
    padding: 4px 12px;
    font-size: 18px;
    color: #000;
}

.navbar-toggle:focus,
.navbar-toggle:active {
    outline: 0;
}

.slider {
	padding-top:50px;
}

.slider img {
    width: 100%; 
}

#carousel-slider {
  position: relative;
  height: auto !important;
  /* Asegúrate de que no haya una altura fija. Si la hay, AJUSTA o BÓRRALA: */
    max-height: 700px !important; /* Esto asegura que no crezca más de 600px */
}

#carousel-slider .carousel-indicators {
  bottom: -25px;
}

#carousel-slider .carousel-indicators li {
  border: 1px solid #ffbd20;
}

#carousel-slider a i {
  border: 1px solid #2487cd;;
  border-radius:50%;
  font-size: 30px;
  height: 50px;
  padding: 8px;
  position: absolute;
  top: 50%;
  width: 50px;
  color:#fff;
   background:#2487cd;
}

#carousel-slider a i:hover {
  background:#2487cd;
  color:#fff;
  border: 1px solid #2487cd;
}

#carousel-slider 
.carousel-control {
  width:inherit;
}

#carousel-slider .carousel-control.left i {
  left:70px
}

#carousel-slider .carousel-control.right i {
  right: 70px;
}

#carousel-slider
.carousel-control.left, 
#carousel-slider
.carousel-control.right {
  background: none;
}
/* --- AJUSTE DE TIPOGRAFÍA Y ALINEACIÓN EN EL CUADRO DE TEXTO (ESCRITORIO) --- */

/* Contenedor del Caption: Asegura alineación izquierda */
#carousel-slider .carousel-caption {
    /* Corregir posible desfase: Aseguramos que el texto fluya desde la izquierda del padding */
    text-align: left !important; 
    
    /* Aseguramos que el contenido comience justo después del padding */
    margin: 0 !important;
}

/* Título (h3): Más grande y en negritas */
#carousel-slider .carousel-caption h3 {
    font-size: 1.5em !important; /* Tamaño para escritorio (ajusta si es necesario) */
    font-weight: bold !important; /* Poner el título en negritas */
    font-style: italic !important; /* Poner el texto en cursiva */
    margin-bottom: 5px !important; 
    text-align: left !important; 
}

/* Párrafo (p): Fuente más pequeña y en cursiva */
#carousel-slider .carousel-caption p {
    font-size: 0.7em !important; /* Tamaño base para el cuerpo del texto */
    font-style: italic !important; /* Poner el texto en cursiva */
    font-weight: normal !important; /* Asegurar que no sea negritas */
    text-align: left !important; 
}

/* Ejemplo de cómo modernizar el título en la sección: .center h2 */
.center h2 {
    /* ... reglas existentes ... */
    position: relative;
    margin-bottom: 25px; /* Crea espacio para la línea */
}
.center h2::after {
    content: '';
    display: block;
    width: 50px; /* Línea corta */
    height: 3px;
    background: #2487cd;
    margin: 10px auto 0; /* Centra la línea */
}
/*.center h2{
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 10px;
  text-align:center;
  color:#000;
  text-transform:uppercase;
}*/

#portfolio .lead {
	text-align:center;
	font-size:18px;
	margin-bottom:40px;
}

#portfolio {
	padding-top:40px;
	position:center;
}


.portfolio-items, 
.portfolio-filter {
  list-style: none outside none;
  margin: 0 0 40px 0;
  padding: 0;
}

.portfolio-filter > li {
  display: inline-block;
}

.portfolio-filter > li a {
  background: none repeat scroll 0 0 #FFFFFF;
  font-size: 14px;
  font-weight: 400;
  margin-right: 20px;
  text-transform: uppercase;
  transition: all 0.9s ease 0s;
  -moz-transition: all 0.9s ease 0s;
  -webkit-transition: all 0.9s ease 0s;
  -o-transition: all 0.9s ease 0s;
  border: 1px solid #F2F2F2;
  outline: none;
  border-radius: 0;
}

.portfolio-filter > li a:hover,
.portfolio-filter > li a.active{
  color:#fff;
  background: #2487cd ;
  border: 1px solid #2487cd ;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.portfolio-items > li {
  float: left;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.portfolio-item {
  margin: 0;
  padding:0;
}

/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}

/* End: Recommended Isotope styles */
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}


.recent-work-wrap {
  position: relative;
}

.recent-work-wrap img{
  width: 100%;
}

.recent-work-wrap .recent-work-inner{
  top: 0;
  background: transparent;
  opacity: .8;
  width: 100%;
  border-radius: 0;
  margin-bottom: 0;
}

.recent-work-wrap .recent-work-inner h3{
  margin: 10px 0;
}

.recent-work-wrap .recent-work-inner h3 a{
  font-size: 24px;
  color: #fff;
}

.recent-work-wrap .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 0;
  background: #333;
  color: #fff;
  vertical-align: middle;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;  
  padding: 30px;
}

.recent-work-wrap .overlay .preview {
  bottom: 0;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  border-radius: 0;
  background: transparent;
  text-align: center;
  color: #fff;
}

.recent-work-wrap:hover .overlay {
  opacity: 1;
}

#about  {
	margin-top:80px;
	margin-bottom:40px;
}

#about .lead {
	text-align:center;
	font-size:18px;
	margin-bottom:50px;
}

#about  img {	
	margin-bottom:40px;
}

.panel-default{
  border-color: transparent;
}

.panel-default>.panel-heading,
.panel{
  background-color: #e6e6e6; 
  border:0 none;
  box-shadow:none;
}

.panel-default>.panel-heading+.panel-collapse .panel-body{
  background: #fff;
  color: #858586;
}

.panel-body{
  padding: 20px 20px 10px;
}

.panel-group .panel+.panel{
  margin-top: 20px;
  border-top: 1px solid #fff;
}

.panel-group .panel{
  border-radius: 0;
}

.panel-heading{
	border-radius: 0;
}

.panel-title>a{
  color: #4e4e4e;
}

.accordion-inner img{
  border-radius: 4px;
}


.panel-heading.active{
  background: #1f1f20;
}

.panel-heading.active .panel-title>a{
  color:#fff;
}
/* Modificar en style.css o carousel-fix.css (si aplica) */
a.accordion-toggle i {
    /* background: #2487cd; <-- ELIMINAR O COMENTAR ESTA LÍNEA */
    background: transparent;
    color: #2487cd; /* Asegura que el icono sea azul */
    border: 1px solid #ddd; /* Opcional: añade un borde gris suave */
}
/*a.accordion-toggle  i{
  width: 40px;
  line-height: 38px;
  font-size: 20px;
  margin-top: -10px;
  text-align: center;
  margin-right: -15px;
  background: #2487cd;
  color:#fff;
}*/

.panel-heading.active a.accordion-toggle i{
  background: #2487cd;
  color: #fff;
}

.panel-heading.active a.accordion-toggle.collapsed i{
  background: #2487cd;
  color: #fff;
}

#features {
	margin-top:50px;
	padding:50px;
	text-align:center;
}

#features .lead {
	text-align:center;
	font-size:18px;
	margin-bottom:50px;
}

#features img {
	border-radius:30%;
	margin-top:30px;
	margin-bottom:40px;
}

/* --- Map --- */
.map{
	position:relative;
	padding-top:50px;
	margin-top:50px;
	
}
/* google map */
#google-map{
    position:relative;
    height: 400px;
}

.contact-page{
  padding-top: 80px;
  background:#eee;
  margin-top:-10px;
}

.contact-page .contact-form 
.form-group label {
  color: #4E4E4E;
  font-size: 16px;
  font-weight: 300;
}

/*.form-group .form-control {
  padding: 7px 12px;
  border-color:#f2f2f2;
  box-shadow: none;
  border-radius:0;
} */

.form-group .form-control {
  padding: 10px 12px; /* Aumenta el padding para hacer el campo más alto y fácil de pulsar */
  border-color: #ccc; /* Borde gris visible (no casi blanco) */
  box-shadow: none;
  border-radius: 4px; /* Suaviza las esquinas (CLAVE para un look moderno) */
  transition: all 0.3s ease; /* Añade una transición para animar el foco */
}
/* 🟢 NUEVO: Estilo al hacer Foco (Focus) 🟢 */
/* Esto se activa cuando el usuario hace clic o tabula sobre el campo */
.form-control:focus {
  border-color: #2487cd !important; /* El borde se vuelve azul (tu color primario) */
  box-shadow: 0 0 0 0.2rem rgba(36, 135, 205, 0.25) !important; /* Sombra sutil azul */
  outline: 0;
}

textarea#message{
  resize: none;
  padding: 10px;
  border-radius: 4px; /* Consistencia visual */
}

.contact-page .contact-wrap {
  margin-top: 20px;
}

.validation {
    color: red;
    display:none;
    margin: 0 0 20px;
    font-weight:400;
    font-size:13px;
}

#sendmessage {
    color: green;
    border:1px solid green;
    display:none;
    text-align:center;
    padding:15px;
    font-weight:600;
    margin-bottom:15px;
}

#errormessage {
    color: red;
    display:none;
    border:1px solid red;
    text-align:center;
    padding:15px;
    font-weight:600;
    margin-bottom:15px;
}

#sendmessage.show, #errormessage.show, .show {
	display:block;
}

#footer {
  padding-top: 30px;
  padding-bottom: 30px;
  color: #fff;
  background: #2487cd;
}

#footer a {
  color: #fff;
}

#footer a:hover {
  color: #fff;
}

#footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align:center;
}

#footer ul > li {
	margin-top:20px;
	margin-bottom:30px;
  display: inline-block;
  margin-left: 15px;
  text-align:center;
}
.midnight-blue {
	text-align:center;

}

.text-center {
	margin-bottom:20px;
	font-size:30px;

}

/* --- style.css: Centrado del Contenedor Padre (.slider) --- */

.slider {
    /* Establece el ancho maximo a la proporcion de tu imagen (1125px) */
    max-width: 1125px; 
    /* Centra el contenedor completo en pantallas grandes */
    margin: 0 auto; 
}
/* Añadir a style.css */
.portfolio-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.portfolio-item:hover {
  transform: translateY(-5px); /* Se levanta 5px */
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2); /* Sombra marcada */
}
/* Añadir a style.css */
.navbar-fixed-top ul.nav li a {
    /* ... reglas existentes ... */
    position: relative; /* Base para el underline */
    text-decoration: none;
}
.navbar-fixed-top ul.nav li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2487cd; /* Tu color primario */
    transition: width 0.3s ease-out;
}
.navbar-fixed-top ul.nav li a:hover::after {
    width: 80%; /* El underline se extiende al 80% al hacer hover */
}

/* Asegura que el contenedor CENTRE todo el contenido */
.center {
    /* Agrega esta regla si no está, o confírmala */
    text-align: center !important; 
    /* Esta regla puede ser necesaria para centrar los elementos de bloque */
    margin: 0 auto; 
}

/* Modifica el h2 para que no anule la alineación del texto */
.center h2 {
    /* Mantenemos tus reglas para la línea, pero forzamos la alineación */
    text-align: center !important; 
    position: relative;
    margin-bottom: 25px; 
}
/* Limpia el fondo de los títulos del acordeón */
.panel-default > .panel-heading {
    /* Fondo muy claro o blanco */
    background-color: #f8f8f8; 
    border-color: #ddd; /* Borde sutil para separarlos */
}

/* Asegura que el color del texto sea el que definimos (gris oscuro) */
.panel-default > .panel-heading .panel-title a {
    color: #333; 
}

/* Limpia el botón de la flecha del acordeón */
.panel-default .panel-title a i {
    /* Quita cualquier fondo azul que pueda tener la flecha */
    background: transparent !important; 
    color: #2487cd; /* Mantiene la flecha del color primario (azul) */
}
/* Añadir a style.css - Da vida a las tarjetas del portafolio */
.portfolio-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
}
.portfolio-item:hover {
  transform: translateY(-5px); /* El elemento se eleva */
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2); /* Sombra marcada al levantarse */
}
/* Añade una sombra sutil a las imágenes dentro de la sección de servicios */
#features img {
    border-radius: 8px; /* Opcional: suaviza las esquinas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    transition: transform 0.3s ease; /* Prepara para un posible hover */
}

/* Opcional: efecto de levantamiento al pasar el ratón */
#features img:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 
}
/* Asegura que el texto dentro del acordeón sea ligero y legible */
.accordion-inner p, .accordion-inner h4 {
    font-weight: 400 !important;
    line-height: 1.7em !important;
}
/* Añadir a style.css */
.navbar-fixed-top ul.nav li a {
    position: relative; 
    text-decoration: none;
}
.navbar-fixed-top ul.nav li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2487cd; /* Color primario */
    transition: width 0.3s ease-out;
}
.navbar-fixed-top ul.nav li a:hover::after {
    width: 80%; /* El underline se extiende al 80% al hacer hover */
}
/* Añadir a style.css */
#features img {
    /* 1. SUAVIZA LOS BORDES */
    border-radius: 8px; 
    
    /* 2. AÑADE PROFUNDIDAD CON SOMBRA SUAVE */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    
    /* 3. PERMITE LA ANIMACIÓN FLUIDA */
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    
    /* 4. SEPARA LA IMAGEN DEL TEXTO DE ABAJO */
    margin-bottom: 20px; 
}

/* 5. EFECTO AL PASAR EL RATÓN (Hover) */
#features img:hover {
    transform: translateY(-3px); /* Se levanta 3px */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* La sombra se hace más fuerte */
}
/* --- INICIO: CORRECCIÓN DE FLUIDEZ DEL CARRUSEL EN ESCRITORIO --- */

/* Fuerza la aceleración por hardware en los items para una transición suave */
#carousel-slider .carousel-inner > .item {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Asegura que la transición de opacidad no se corte */
    transition-property: all; 
    height: auto !important;
}

/* Aplica aceleración a los controles para evitar parpadeos en ellos */
#carousel-slider .carousel-control {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* --- FIN: CORRECCIÓN DE FLUIDEZ DEL CARRUSEL EN ESCRITORIO --- */
/* --- INICIO: CORRECCIÓN FINAL DE PARPADEO (Z-INDEX) --- */

/* Asegura que todos los items del carrusel tengan una capa base */
#carousel-slider .carousel-inner > .item {
    z-index: 1; 
}

/* La imagen que entra (next o prev) se eleva sobre la actual */
#carousel-slider .carousel-inner > .next,
#carousel-slider .carousel-inner > .prev {
    z-index: 2; /* Mayor que la capa base */
}

/* El elemento que va a ser el nuevo activo (next.left o prev.right) se asegura de estar arriba */
#carousel-slider .carousel-inner > .active.left,
#carousel-slider .carousel-inner > .active.right {
    left: 0;
    opacity: 0;
    z-index: 0; /* La imagen que se va debe tener una capa inferior */
}

/* El nuevo slide (next/prev) debe estar por encima y visible */
#carousel-slider .carousel-inner > .next.left, 
#carousel-slider .carousel-inner > .prev.right {
    z-index: 2;
    opacity: 1; 
}

/* --- FIN: CORRECCIÓN FINAL DE PARPADEO (Z-INDEX) --- */

/* --- NUEVA REGLA: Reducir tamaño de la imagen del logo --- */
.site-logo img {
    height: 50px !important; /* Forzamos una altura más pequeña */
    width: auto !important;  /* Mantenemos la proporción */
    margin: 0 !important;    /* Aseguramos que no tenga márgenes internos */
}
/* --- AJUSTE DEL CONTENEDOR DE LA BARRA FIJA PARA CENTRADO --- */

/* --- AJUSTE CRÍTICO DE LA IMAGEN DENTRO DEL SLIDER --- */
.carousel-inner .item img {
    /* Altura automática: CRÍTICO para mantener la proporción de 700x700 */
    height: auto !important; 
    
    /* CRÍTICO: Anular el ancho 100% para evitar el estiramiento y pixelado. 
       Forzamos al contenedor a que se ajuste a la imagen. */
    width: auto !important; 
    
    /* Esta propiedad asegura que la imagen se vea ENTERA dentro de su caja */
    object-fit: contain !important; 
    
    /* Centrar la imagen, ya que 'width: auto' la deja flotando */
    display: block;
    margin: 0 auto;
}
/* --- AJUSTES ESPECÍFICOS PARA TELÉFONOS (Hasta 767px) --- */
@media (max-width: 767px) {

    /* 1. Reducir la Altura del Slider Principal */
    #carousel-slider, 
    #carousel-slider .carousel-inner, 
    #carousel-slider .carousel-inner .item {
        /* Altura reducida a 400px en móvil */
        height: 400px !important; 
        max-height: 400px !important; 
        min-height: 400px !important; 
    }

    /* 2. Ajustar el Cuadro de Texto (Caption) */
    #carousel-slider .carousel-caption {
        /* CLAVE: Asegurar que el caption SIEMPRE se muestre */
        display: block !important; 
        visibility: visible !important;
        /* 💥 Aumentar el Z-INDEX para que esté encima de todo */
        z-index: 9999 !important;
        /* Ocupa casi todo el ancho */
        width: 90% !important; 
        max-width: 90% !important;
        
        /* Ajustar padding y margen inferior */
        padding: 15px !important; 
        bottom: 5px !important; 
        
        /* Centrado Horizontal CRÍTICO */
        width: 90% !important; 
        max-width: 90% !important;
        left: 50% !important; 
        right: auto !important; 
        transform: translate(-50%, 0) !important; 
    }

    /* 3. Reducir fuentes del Caption para que quepan */
    #carousel-slider .carousel-caption h2 {
        font-size: 1em !important;
    }
    #carousel-slider .carousel-caption p {
        font-size: 0.7em !important;
    }
    
    /* 4. Asegurar que la imagen ocupe todo el espacio de 400px (opcional, pero seguro) */
    .zoom-container {
        width: 100% !important;
        height: 100% !important;
    }

}
@media (max-width: 767px) {
    /* ... (Reglas del slider principal) ... */

    /* --- AJUSTE PARA EL MINI-CARRUSEL EN SECCIÓN #ABOUT (#carousel-somos) --- */
    #carousel-somos .carousel-inner,
    #carousel-somos .item {
        /* Reducimos la altura en móvil */
        height: 300px !important; 
        max-height: 300px !important; 
    }
}
/* --- ANIMACIÓN KEYFRAMES: LOGO FLOTANTE (Movimiento Suave Arriba/Abajo) --- */
@keyframes floatAnimation {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); } /* Sube 6px */
    100% { transform: translateY(0px); }
}

/* --- ESTILOS Y APLICACIÓN DE LA ANIMACIÓN --- */
.logo-flotante {
    text-align: left !important;
    margin-top: 45px; /* Separación del botón de scrollup */
    /* 💥 PRUEBA CLAVE: Mover el logo hacia la izquierda para liberar espacio 💥 */
   text-align: left !important; 
    margin-top: 45px
}

.logo-flotante img {
    /* 💥 CRÍTICO: Limitar el tamaño para que no se vea gigante en el footer */
    max-width: 120px; 
    height: auto;
    
    /* Aplicar la animación */
    animation: floatAnimation 3.5s ease-in-out infinite; /* 3.5 segundos, suave, infinito */
    display: block;
    margin-top: 5px ; /* Centrar la imagen dentro del div */
}
/* --- FORZAR CENTRADO DEL TEXTO DEL FOOTER EN LA COLUMNA DERECHA --- */
#footer .footer-info {
    text-align: center !important; 
    font-size: 0.9em !important; /* Ajusta este valor (ej. 0.8em o 0.9em) */
    line-height: 1.5 !important;
}

/* Aplicamos al div que contiene el copyright y el enlace de la política */
#footer .footer-info div {
    font-size: 0.9em !important;
    font-weight: normal !important;
}
/* --- REDUCIR TAMAÑO DE FUENTE EN EL FOOTER DERECHO --- */
#footer .col-md-6 .footer-info,
#footer .col-md-6 .footer-info b,
#footer .col-md-6 .footer-info div {
    font-size: 0.9em !important; /* Ajusta este valor (ej. 0.8em o 0.9em) */
    line-height: 1.5 !important;
    font-weight: normal !important; /* Quitar negritas si solo quieres el tamaño */
}
/* --- FORZAR CENTRADO Y ANULAR ALINEACIÓN DERECHA EN EL FOOTER --- */
#footer .col-md-6:last-child {
    /* 💥 CLAVE: Aseguramos que la columna no esté alineada a la derecha */
    text-align: center !important; 
    
    /* Anulamos la flotación (float) si existiera un conflicto */
    float: none !important;
}

/* Aplicamos el centrado al div de texto interno para mayor seguridad */
#footer .footer-info {
    text-align: center !important; 
    
    /* Y centramos los divs internos con margin auto */
    margin-left: auto !important; 
    margin-right: auto !important;
}
/* --- AJUSTES FINOS PARA CENTRADO ABSOLUTO EN COLUMNA DERECHA --- */

/* 1. Limpiar la columna de texto de padding/margin residuales */
#footer .footer-text-col {
    padding: 0 5px !important; /* Reducimos el padding horizontal al mínimo */
}

/* 2. Forzar Flexbox en el contenedor de texto para centrar todo su contenido */
#footer #footer-text-content {
    /* Hacemos este contenedor flexible */
    display: flex !important;
    
    /* Centramos todos los elementos internos horizontalmente */
    justify-content: center !important; 
    
    /* El texto sigue alineado al centro dentro del bloque de texto */
    text-align: center !important; 
    
    /* Eliminamos el ancho completo para que el bloque de texto pueda centrarse mejor */
    width: auto !important; 
    max-width: 100% !important;
    
    /* Centramos el bloque de texto dentro de su columna */
    margin: 0 auto !important; 
}

/* 3. Asegurar que los divs internos también se centren */
#footer #footer-text-content div {
    text-align: center !important;
}