/* --- LIMPIEZA Y REGLAS FUERTES DE ANCHO Y CENTRADO --- */

body, html {
    width: 100% !important;
    overflow-x: hidden !important; 
    margin: 0 !important;
    padding: 0 !important;
}

/* 1. CONTENEDOR MÁS EXTERNO (#home): Full-width para que haya espacio para centrar */


/* 2. CONTENEDOR DEL CARRUSEL (.slider): Define el ancho máximo y Centra */
.slider {
    width: 100% !important; /* Ocupa el 100% del padre */
    
    /* DEFINIMOS EL ANCHO MÁXIMO deseado */
    max-width: 1125px; 
    
    /* CRÍTICO: Aplica el centrado al bloque de 1125px */
    margin: 0 auto !important; 
    
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 3. Contenedores internos: Aseguran que el carrusel y los slides tomen el 100% del .slider */
#home #carousel-slider,
#home #carousel-slider .carousel-inner,
.carousel-inner { /* Aseguramos al carousel-inner */
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    width: 95% !important;
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
}

/* 4. Todos los slides (items): Necesitan ser 100% del carousel-inner */
.carousel-inner > .item {
    /* Mantenemos tus reglas de transición y opacidad */
    transition: opacity 0.6s ease-in-out;
    opacity: 0;
    
    /* Posicionamiento para superposición (fade) */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    
    /* ANCHO CORRECTO */
    width: 90% !important; 
    height: 90% !important; 
    display: block !important;
    margin: 0 !important;
    /* 💥 CRÍTICO: Activar Flexbox para centrar el contenido */
    display: flex !important;
    justify-content: center !important; /* Centrado Horizontal */
    align-items: center !important;   /* Centrado Vertical */
    
    /* Reglas de Altura (que ya tienes, solo confirmación) */
    max-height: 1200px !important; 
    min-height: 1200px !important;
    
}

/* 5. Slide ACTIVO: Define la altura del carrusel */
.carousel-inner > .active {
    opacity: 1 !important;
    position: relative !important; /* Necesario para que .carousel-inner tome la altura */
    height: auto !important;
}
/* --- NUEVA CORRECCIÓN DE IMÁGENES DEL CARRUSEL (Centrado y Proporción Natural) --- */
#carousel-slider .carousel-inner .item img {
    /* 1. Mantiene la proporción original (elimina el estiramiento y el recorte) */
    object-fit: cover !important; 
    object-position: center center !important; 
    
    width: 90% !important; 
    height: auto !important;
    /* Usamos 'contain' para ver la imagen completa si no es 100% cuadrada, 
       o 'cover' si prefieres cortar los bordes para llenar el espacio. 
       Probaremos con 'contain' primero para ver la imagen entera. */
object-fit: contain !important; 
object-position: center center !important;
    
    /* Asegúrate de anular cualquier margen que la esté empujando */
    margin: 0 auto !important; 
    display: block !important;
}

/* --- AUMENTO DE ALTURA Y AJUSTE DE ANCHO PARA PROPORCIÓN --- */

/* --- AJUSTE DE ALTURA PARA IMÁGENES DE 700PX --- */
#carousel-slider .carousel-inner .item {
    /* Altura MÁXIMA de 700px para evitar estiramiento. */
    max-height: 700px !important; 
    
    /* Altura automática: CRÍTICO. Deja que la imagen dicte la altura. */
 height: auto !important; 
    
    /* Altura mínima establecida a 700px para asegurar el espacio. */
 min-height: 700px !important; 
 overflow: hidden !important;
}

/* --- REGLAS PARA DESVANECIMIENTO (Fade) Y POSICIONAMIENTO --- */

/* 4. Todos los slides (items): ÚNICA REGLA, CON POSICIONAMIENTO Y ANCHO CORRECTO */
.carousel-inner > .item {
    transition: opacity 0.6s ease-in-out;
    -webkit-transition: opacity 0.6s ease-in-out;
    opacity: 0; 
    
    /* Posicionamiento para superposición (anti-apilamiento) */
    position: absolute !important; 
    top: 0 !important;
    left: 0 !important;
    
    /* 💥 ESTO CORRIGE EL DESPLAZAMIENTO A LA IZQUIERDA */
    width: 100% !important; 
    height: auto !important; 
    display: block !important;
    /* Quitamos el margin: auto de aquí, ya que position: absolute lo anula */
    margin: 0 !important; 
    /* Regla para limitar la altura total */
    max-height: 600px !important;
    min-height: 600px !important;
}

/* 5. Slide ACTIVO: Se muestra y define la altura del carrusel */
.carousel-inner > .active {
    opacity: 1 !important; 
    position: relative !important; 
    height: auto !important; 
}

/* 6. Evitar conflictos de Bootstrap durante el cambio de slide */
.carousel-inner > .item.next,
.carousel-inner > .item.prev,
.carousel-inner > .active.left, 
.carousel-inner > .active.right {
    position: absolute !important;
    left: 0 !important;
    transform: none !important;
}

/* --- REGLAS PARA EL EFECTO ZOOM SUTIL --- */

/* 7. Contenedor de Zoom (Aísla la animación) */
.zoom-container {
    width: 100%;
    height: 100%;
    overflow: hidden; 
    /* Asegúrate de que no haya un margin: auto que podría interferir */
    margin: 0 !important;
}

/* 8. Imagen: CLAVE para el Zoom y el Centrado */
.zoom-container img {
    /* 💥 ESTO FUERZA EL CENTRADO Y LLENA EL ESPACIO */
    object-fit: cover !important; 
    
    width: 100% !important;
    height: 100% !important; /* Necesario para que 'cover' funcione */
    margin: 0 !important;
    transform-origin: center center;
    transition: transform 6s ease-out; 
    transform: scale(1.3); 
}

/* 9. Aplicar Zoom en la imagen del slide ACTIVO */
.item.active .zoom-container img {
    transform: scale(0.9); 
}

/* --- AJUSTES EN MÓVIL --- */
@media (max-width: 767px) {
    /* La imagen debe ser la que dicta la altura */
    #carousel-slider .carousel-inner .item img,
    #carousel-slider .carousel-inner .item .img-responsive {
        width: 100% !important;
        height: 500px !important;
        min-height: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        /* Permitimos que object-fit: cover se aplique para móvil */
        object-fit: cover !important; 
    }
}
/* AJUSTES PARA EL MINI-CARRUSEL EN LA SECCIÓN #ABOUT (#carousel-somos) */
/* Opción 1: Altura Fija para Transiciones Suaves */
#carousel-somos .carousel-inner,
#carousel-somos .item {
    height: 350px !important; /* <--- AJUSTA ESTE VALOR (ej. 400px, 350px) */
    max-height: 350px !important; 
    overflow: hidden !important; 
}

#carousel-somos .item img {
    width: 90% !important;
    height: 90% !important;
    object-fit: cover !important; /* Esencial para evitar distorsión y llenar el espacio */
}

/* Estilos para los controles (opcional, para que se vean bien) */
#carousel-somos .carousel-control i {
    font-size: 24px;
    height: 90px;
    width: 90px;
    padding: 6px;
    top: 50%;
    margin-top: auto;
}
/* --- ESTILO PARA BOTÓN FLOTANTE DE WHATSAPP --- */
.whatsapp-float-btn {
    /* Posicionamiento: CLAVE para que flote y se quede fijo */
    position: fixed; 
    bottom: 20px; /* Separación del borde inferior */
    right: 20px; /* Separación del borde derecho */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */

    /* Apariencia del Botón */
    background: #25D366; /* Color oficial de WhatsApp */
    color: #fff !important; 
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 16px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Sombra para resaltar */

    /* Transición de estilo al pasar el ratón */
    transition: background 0.3s ease, transform 0.3s ease;
}

/* Estilo del ícono (si usas Font Awesome) */
.whatsapp-float-btn .fa-whatsapp {
    margin-right: 8px;
    font-size: 1.2em;
}

/* Efecto al pasar el ratón */
.whatsapp-float-btn:hover {
    background: #128C7E; /* Tonalidad más oscura al hacer hover */
    transform: scale(1.05); /* Ligeramente más grande */
}

/* Opcional: Ocultar en dispositivos muy pequeños si es necesario */
@media (max-width: 480px) {
    .whatsapp-float-btn {
        font-size: 14px;
        padding: 8px 12px;
        bottom: 15px;
        right: 15px;
    }
}
/* --- CORRECCIÓN DE ANCHO Y CENTRADO PARA LA SECCIÓN DE SERVICIOS --- */

#features .container {
    /* Deshace cualquier posible anulación de full-width */
    max-width: 1170px !important; /* Valor estándar de Bootstrap para desktop */
    width: 100% !important; /* Asegura un ancho responsivo hasta el máximo */
    
    /* Fuerza el centrado */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* Asegura que no tenga padding que lo empuje */
    padding-left: 15px !important; 
    padding-right: 15px !important; 
}

/* En dispositivos más pequeños (tablets), usa el ancho estándar */
@media (max-width: 991px) {
    #features .container {
        max-width: 750px !important; /* Valor estándar de Bootstrap para tablets */
    }
}
/* --- REGLA DE EMERGENCIA PARA CENTRAR CONTENEDORES (EXCLUYE EL CARRUSEL) --- */

/* Asegura que todos los contenedores tomen su ancho estándar y se centren */
/* Usamos el :not(#home) para excluir la sección del carrusel principal */
section:not(#home) .container,
section:not(#home) .row {
    max-width: 1170px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
}
html {
    scroll-behavior: smooth;
}
/* --- CORRECCIÓN DE ANCLAJE PARA MENÚ FIJO --- */

/* Aplica un padding superior a todas las secciones importantes */
#about, 
#features, 
#historia,
/*#portfolio,*/ 
#contact-page {
    /* El valor de padding debe ser igual o ligeramente mayor a la altura del menú */
    padding-top: 140px; /* 70px (altura del menú) + 10px (margen extra) */
    margin-top: -130px; /* Sube la sección 70px para que el ID quede "oculto" */
}
/* --- ESTILOS PARA LA SECCIÓN NUESTRA HISTORIA (#historia) --- */

.timeline-section {
    padding: 80px 0;
    position: relative;
}

.timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
}

/* Línea vertical central */
.timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 3px;
    background-color: #eeeeee;
    left: 50%; /* Centra la línea */
    margin-left: -1.5px;
}

/* Asegura que los ítems se alternen a los lados */
.timeline-item {
    margin-bottom: 20px;
    position: relative;
}

.timeline-item:before,
.timeline-item:after {
    content: " ";
    display: table;
}

.timeline-item:after {
    clear: both;
}

/* El círculo/badge del año */
.timeline-badge {
    color: #fff;
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 16px;
    text-align: center;
    position: absolute;
    top: 16px;
    left: 50%;
    margin-left: -40px;
    background-color: #2487cd; /* Tu color primario */
    border-radius: 50%;
    z-index: 100;
    font-weight: bold;
}

/* El panel de contenido */
.timeline-panel {
    width: 46%; /* 46% a cada lado, deja 8% para el centro */
    float: left;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    text-align: right; /* Por defecto, el texto está a la derecha */
    box-sizing: border-box; /* Añade esto */
}

/* Flecha del panel */
.timeline-panel:before {
    content: " ";
    display: inline-block;
    position: absolute;
    top: 26px;
    right: -14px; /* Apunta hacia el centro */
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 14px solid #ddd;
}

.timeline-panel:after {
    content: " ";
    display: inline-block;
    position: absolute;
    top: 27px;
    right: -13px;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 13px solid #fff;
}

/* ------------------------------------- */
/* ESTILO PARA PANELES DE LA DERECHA (pares) */
/* ------------------------------------- */
.timeline-item:nth-child(even) .timeline-panel {
    float: right;
    text-align: left; /* El texto se alinea a la izquierda */
}

/* Flecha para paneles de la derecha */
.timeline-item:nth-child(even) .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
}

.timeline-item:nth-child(even) .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 13px;
    left: -13px;
    right: auto;
}

/* ------------------------------------- */
/* AJUSTES EN MÓVILES (Una sola columna) */
/* ------------------------------------- */
@media (max-width: 767px) {
    .timeline:before {
        left: 20px; /* Mueve la línea vertical a la izquierda */
    }
    
    .timeline-badge {
        /* ... estilos del círculo ... */
    /* Se mueve de left: 50% a una posición fija a la izquierda */
        left: 20px; 
        /* Anula el margin-left: -40px que tenía para centrarse */
        margin-left: -40px; 
        
        /* Aseguramos que la posición vertical sea la correcta */
        top: 0;    
    }

    /* 🟢 ¡CLAVE! HACE QUE EL PANEL OCUPE TODO EL ANCHO DISPONIBLE 🟢 */
    .timeline-panel {
        width: 88%; /* El panel ya no es 46%, sino 100% del espacio restante */
        float: none;
        margin-left: 50px; /* Deja espacio para la línea y el badge */
        text-align: left;
    }

    /* Oculta las flechas y asegura que todo el texto fluya */
    .timeline-panel:before,
    .timeline-panel:after {
        display: none;
    }

    .timeline-item:nth-child(even) .timeline-panel {
        float: none;
        text-align: left;
    }
}
/* --- ÚNICA REGLA: CUADRO DE TEXTO (Caption) CON FONDO FLOTANTE Y CENTRADO --- */
#carousel-slider .carousel-caption {
    /* Fondo Turquesa y Sombra (Diseño Interactivo) */
    background: rgba(0, 150, 136, 0.8) !important; /* Turquesa oscuro con 80% de opacidad */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); /* Sombra suave para darle profundidad */
    
    /* Espacio y Borde */
    padding: 2.5px 5px; /* Aumentamos el padding para hacerlo más visible */
    border-radius: 8px; /* Bordes ligeramente redondeados */
    
    /* Color de Texto y Visibilidad */
    color: #fff !important; /* Texto blanco */
    opacity: 1 !important; /* Aseguramos la visibilidad total */
    z-index: 100 !important; /* Lo colocamos al frente de todo */
    
    /* 🔑 CLAVE: Posicionamiento y Centrado Absoluto para que aparezca */
    position: absolute !important; 
    top: auto !important;
    bottom: 1px !important; /* Distancia desde el borde inferior */
    left: auto !important;
    right: 50px !important; /* Distancia desde el borde derecho */
    transform: translate(0, 0) !important; /* Resetea el centrado que movía la caja */
    
    /* Dimensiones y Ajuste al Contenido */
    display: block !important; 
    max-width: 90%; 
    width: auto; /* La caja se ajusta al ancho del texto */
}
/* --- INDICADOR BLANCO (Capa Frontal) --- */
#carousel-slider .carousel-caption::after {
    background: #fff !important; 
    
    content: ''; 
    position: absolute; 
    
    /* Ubicación: ESQUINA INFERIOR IZQUIERDA (2px menos que la base) */
    bottom: -10px; /* Mueve el diamante 10px fuera del borde inferior */
    left: 10px; 
    
    width: 20px; 
    height: 20px; 
    transform: rotate(45deg); 
    z-index: -1; 
    
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* Ajuste de sombra */
}
/* --- NUEVA CAPA AZUL (BASE DEL EFECTO 3D) --- */
#carousel-slider .carousel-caption::before {
    /* 🔑 CLAVE: Color Azul de Contraste 🔑 */
    background: #2487cd !important; 
    
    content: ''; 
    position: absolute; 
    
    /* Ubicación: ESQUINA INFERIOR IZQUIERDA */
    bottom: -12px; /* Mueve la base 12px fuera del borde inferior */
    left: 8px; 
    
    width: 24px; 
    height: 24px; 
    transform: rotate(45deg); 
    z-index: -2; 
    
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* Ajuste de sombra para la parte inferior */
}