/* ==========================================================================
   ESTILOS ESPECÍFICOS - VISTA: NUESTRA HISTORIA (VERSION NATIVA)
   ========================================================================== */

/* Contenedor Principal */
.timeline-clean-wrapper {
    padding: 60px 0 100px 0;
    background-color: #ffffff;
    /* Cambio crítico: Evita romper el contexto de posición de elementos fixed/sticky */
    overflow-x: visible; 
}

.tracking-wider {
    letter-spacing: 2px;
}

.text-gold {
    color: #c5a059;
}

/* Estructura Base de la Línea de Tiempo */
.timeline-intercalated-container {
    position: relative;
    max-width: 1100px;
    margin: 80px auto 0 auto;
    padding: 20px 0;
}

/* Línea Central Dorada */
.timeline-central-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, rgba(197, 160, 89, 0.1), #c5a059 10%, #c5a059 90%, rgba(197, 160, 89, 0.1));
    transform: translateX(-50%);
    z-index: 1;
}

/* Bloque Contenedor de cada Hito (Renderizado estático inmediato) */
.timeline-block {
    position: relative;
    width: 50%;
    margin-bottom: 70px;
    z-index: 2;
    /* Ajuste: Visibilidad directa al 100% desde el inicio sin retrasos por JS */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Alineaciones Intercaladas en Pantallas Grandes */
.timeline-block.left-side {
    left: 0;
    padding-right: 60px;
    text-align: right;
    transform: none !important; /* Eliminamos el desplazamiento de entrada izquierdo */
}

.timeline-block.right-side {
    left: 50%;
    padding-left: 60px;
    text-align: left;
    transform: none !important; /* Eliminamos el desplazamiento de entrada derecho */
}

/* Los Puntos de Unión Dorados sobre la Línea Central */
.timeline-dot {
    position: absolute;
    top: 12px;
    width: 16px;
    height: 16px;
    background-color: #121b25;
    border: 3px solid #c5a059;
    border-radius: 50%;
    z-index: 4;
}

.timeline-block.left-side .timeline-dot {
    right: -8px;
}

.timeline-block.right-side .timeline-dot {
    left: -8px;
}

/* --- LOS NÚMEROS GIGANTES TRASLÚCIDOS --- */
.timeline-huge-number {
    position: absolute;
    font-size: 9rem;
    font-weight: 900;
    /* Ajuste: Mantenemos el color final sutilmente dorado por defecto */
    color: rgba(18, 27, 37, 0.12); 
    font-family: 'Montserrat', 'Arial Black', sans-serif;
    line-height: 1;
    z-index: 1;
    user-select: none;
    top: -35px;
}

/* Ubicación del número según el lado */
.timeline-block.left-side .timeline-huge-number {
    right: 40px;
}

.timeline-block.right-side .timeline-huge-number {
    left: 40px;
}

/* Bloque interno de texto para forzar el z-index superior */
.timeline-content-box {
    position: relative;
    z-index: 3; 
}

/* Tipografías y Detalles Visuales */
.timeline-meta-tag {
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #c5a059;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 6px;
}

.timeline-content-box h2 {
    color: #121b25;
    font-size: 1.65rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.timeline-content-box p {
    color: #3b4252;
    font-size: 0.98rem;
    line-height: 1.75;
}

.border-top-gold {
    border-top: 1px solid rgba(197, 160, 89, 0.2);
}

/* DISEÑO 100% RESPONSIVO (Móviles y Tablets) */
@media (max-width: 991px) {
    .timeline-central-line {
        left: 30px;
        transform: none;
    }

    .timeline-block {
        width: 100%;
        margin-bottom: 50px;
        padding-left: 60px !important;
        padding-right: 0 !important;
        text-align: left !important;
        transform: none !important; /* Estático también en dispositivos móviles */
    }

    .timeline-block.right-side {
        left: 0;
    }

    /* Todos los puntos se van a la izquierda en móvil */
    .timeline-block.left-side .timeline-dot,
    .timeline-block.right-side .timeline-dot {
        left: 22px;
        right: auto;
    }

    /* Reajuste de los números de fondo en celulares */
    .timeline-block.left-side .timeline-huge-number,
    .timeline-block.right-side .timeline-huge-number {
        left: 60px;
        right: auto;
        font-size: 5.5rem;
        top: -25px;
    }
}