.elementor-2015 .elementor-element.elementor-element-bdc42fe{--display:flex;--background-transition:0.3s;}/* Start custom CSS for html, class: .elementor-element-76a46b5 *//* ... (resto del código anterior) ... */

/* EL DESPLEGABLE (TARJETA) */
.milestone-dropdown {
    max-height: 0;
    overflow: hidden; /* Oculta el contenido cuando está cerrado */
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    width: 45%; 
    margin: 0 auto;
    margin-left: calc(50% + 20px);
    position: relative;
    visibility: hidden;
}

/* Alternar lados */
.milestone:nth-child(even) .milestone-dropdown {
    margin-left: auto;
    margin-right: calc(50% + 20px);
}

/* ESTADO ACTIVO: Limitamos la altura a 450px para forzar el scroll */
.milestone.active .milestone-dropdown {
    max-height: 450px; /* Altura máxima fija de la tarjeta */
    opacity: 1;
    visibility: visible;
    margin-top: 10px;
    margin-bottom: 50px;
}

.dropdown-inner {
    padding: 20px;
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid var(--gold);
    backdrop-filter: blur(10px);
    
    /* CONFIGURACIÓN DE SCROLL INTERNO */
    max-height: 450px; /* Misma altura que el contenedor activo */
    overflow-y: auto;  /* Activa el scroll vertical si el contenido sobresale */
}

/* --- BARRA DE SCROLL DORADA (Estilo Premium) --- */
.dropdown-inner::-webkit-scrollbar {
    width: 6px; /* Barra fina y elegante */
}

.dropdown-inner::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.5); /* Fondo oscuro de la pista */
}

.dropdown-inner::-webkit-scrollbar-thumb {
    background: var(--gold); /* Scroll dorado */
    border-radius: 4px; /* Bordes redondeados */
}

.dropdown-inner::-webkit-scrollbar-thumb:hover {
    background: #FFD700; /* Un oro más brillante al pasar el ratón */
}

/* MARCO DE IMAGEN */
.dropdown-image-frame {
    width: 100%;
    border: 1px solid var(--gold);
    margin-bottom: 15px;
    line-height: 0; 
}

.dropdown-image-frame img {
    width: 100%;
    height: auto;
    display: block;
}

}

/* ESTADO ACTIVO: Aquí subimos el max-height */
.milestone.active .milestone-dropdown {
    max-height: 2000px; /* Valor alto para que quepa la imagen + texto */
    opacity: 1;
    visibility: visible;
    margin-top: 10px;
    margin-bottom: 50px;
}

.dropdown-inner {
    padding: 20px;
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid var(--gold);
    backdrop-filter: blur(10px);
}

/* MARCO DE IMAGEN */
.dropdown-image-frame {
    width: 100%;
    border: 1px solid var(--gold);
    margin-bottom: 15px;
    line-height: 0; /* Quita espacios extraños debajo de la imagen */
}

.dropdown-image-frame img {
    width: 100%;
    height: auto;
    display: block;
}

/* ... (resto del código) ... */

/* --- ENCABEZADO PROFESIONAL --- */
.timeline-header {
    text-align: center;
    padding: 120px 20px 60px;
}

.linea-decorativa-oro {
    width: 60px;
    height: 2px;
    background: var(--gold);
    margin: 0 auto 30px;
}

.titulo-archivo {
    font-family: 'Bodoni Moda', serif;
    font-size: clamp(2.5rem, 8vw, 5rem);
    text-transform: uppercase;
    color: var(--white);
    line-height: 0.9;
    letter-spacing: -1px;
}
/* --- TÍTULO PREMIUM CON FONDO OSCURO --- */
.titulo-container {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    padding: 40px;
    display: inline-block;
    border: 1px solid var(--gold);
    margin: 20px auto;
}

.titulo-premium {
    font-family: 'Bodoni Moda', serif;
    font-size: clamp(3rem, 10vw, 7rem);
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    line-height: 0.9;
    letter-spacing: -2px;
    background: linear-gradient(to bottom, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
    animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1);
    position: relative;
    padding: 20px 0;
}

/* Marco decorativo para la imagen dentro del desplegable */
.dropdown-image-frame {
    border: 1px solid var(--gold); /* Borde dorado a juego */
    padding: 5px; /* Pequeño espacio tipo paspartú */
    margin-bottom: 20px; /* Separación con el título */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro por si la imagen tarda en cargar */
    overflow: hidden; /* Asegura que nada sobresalga */
}

/* Estilos para la imagen en sí */
.dropdown-image-frame img {
    width: 100%; /* Ocupa todo el ancho del marco */
    height: auto; /* Mantiene la proporción */
    display: block; /* Elimina espacios extraños debajo */
    
    /* Opcional: Si quieres limitar la altura máxima para que no sea gigante */
    /* max-height: 300px; */
    /* object-fit: cover; */ /* Si limitas altura, esto la recorta elegantemente */
}
.serif-oro {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: var(--gold);
    text-transform: lowercase;
}

.descripcion-archivo {
    max-width: 650px;
    margin: 30px auto 20px;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    font-family: 'Lato', sans-serif;
}

.instruccion {
    margin-top: 20px;
    letter-spacing: 3px;
    font-size: 0.75rem;
    color: var(--gold);
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
    opacity: 0.9;
}

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,700;1,700&family=Playfair+Display:ital,wght@0,400;1,400&family=Lato:wght@300;400&display=swap');

:root {
    --gold: #D4AF37;
    --black: #000000;
    --white: #ffffff;
    --bg-img: url('https://scontent-mad1-1.cdninstagram.com/v/t51.75761-15/495286949_17908548108109577_3164176107192326707_n.jpg?stp=dst-jpg_e35_tt6&_nc_cat=107&ig_cache_key=MzYyNTgzNDY0MzMzMDI1MTExNw%3D%3D.3-ccb7-5&ccb=7-5&_nc_sid=58cdad&efg=eyJ2ZW5jb2RlX3RhZyI6InhwaWRzLjEwMjR4NzU5LnNkci5DMyJ9&_nc_ohc=j-HWD_XLNccQ7kNvwG5qh8A&_nc_oc=Adqm9mntJ1_0eh8-NjW9a39B-ghNI_YtIF9AeY1AFlg1rvc9SnKiOYJYJi1X3TPBtv0&_nc_ad=z-m&_nc_cid=0&_nc_zt=23&_nc_ht=scontent-mad1-1.cdninstagram.com&_nc_gid=0AKu_jLAFysGZy8pwfoHYA&_nc_ss=7a22e&oh=00_Af6JeRfuYXy3KQchkuv4bAiY1HdhvSAejVb8Eonh_A3Vaw&oe=69FD74A7');
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--black);
    color: var(--white);
    font-family: 'Lato', sans-serif;
    overflow-x: hidden;
}

/* Fondo con imagen fija */
.main-background {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), var(--bg-img);
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.timeline-header {
    text-align: center;
    padding: 80px 20px;
}

.titulo-archivo {
    font-family: 'Bodoni Moda', serif;
    font-size: 4rem;
    text-transform: uppercase;
    line-height: 1;
}

.serif-oro { color: var(--gold); font-style: italic; text-transform: lowercase; }

.instruccion {
    margin-top: 15px;
    letter-spacing: 3px;
    font-size: 0.8rem;
    color: var(--gold);
    text-transform: uppercase;
}

/* CONTENEDOR DE LA LÍNEA */
.timeline-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 0;
}

/* LA LÍNEA VERTICAL CONTINUA */
.timeline-wrapper::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--gold) 5%, var(--gold) 95%, transparent);
    transform: translateX(-50%);
}

.milestone {
    position: relative;
    width: 100%;
    margin-bottom: 40px;
}

/* DISPARADOR (Año + Punto) */
.milestone-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 5;
    padding: 10px 0;
    transition: transform 0.3s ease;
}

.milestone-trigger:hover { transform: scale(1.05); }

.year {
    font-family: 'Bodoni Moda', serif;
    font-size: 2.5rem;
    color: var(--gold);
    font-weight: bold;
    width: 120px;
    text-align: right;
    margin-right: 20px;
}

/* El punto de la línea */
.dot {
    width: 20px;
    height: 20px;
    background: var(--black);
    border: 3px solid var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--gold);
    transition: background 0.3s;
}

.milestone.active .dot {
    background: var(--gold);
}

/* EL DESPLEGABLE (TARJETA) */
.milestone-dropdown {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    width: 45%;
    margin: 0 auto;
    /* Pegamos la tarjeta a la derecha de la línea por defecto */
    margin-left: calc(50% + 20px);
    position: relative;
}

/* Alternar lados para que no choque todo */
.milestone:nth-child(even) .milestone-dropdown {
    margin-left: auto;
    margin-right: calc(50% + 20px);
}

.dropdown-inner {
    padding: 25px;
    background: rgba(15, 15, 15, 0.95);
    border: 1px solid var(--gold);
    backdrop-filter: blur(5px);
}

.milestone.active .milestone-dropdown {
    max-height: 400px;
    opacity: 1;
    margin-top: 10px;
    margin-bottom: 30px;
}

.dropdown-inner h3 {
    font-family: 'Playfair Display', serif;
    color: var(--gold);
    margin-bottom: 10px;
    font-size: 1.4rem;
}

.dropdown-inner p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .timeline-wrapper::before { left: 20px; }
    .milestone-trigger { justify-content: flex-start; padding-left: 10px; }
    .year { width: auto; font-size: 1.8rem; text-align: left; margin-left: 40px; margin-right: 0; }
    .dot { position: absolute; left: 10px; }
    .milestone-dropdown {
        width: calc(100% - 60px);
        margin-left: 50px !important;
        margin-right: 0 !important;
    }
}/* End custom CSS */