/* --- 1. IMPORTACIÓN DE FUENTES --- */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,700;1,400&family=Dancing+Script:wght@700&family=Montserrat:wght@400;700&display=swap');



/* --- 2. VARIABLES DE COLOR (¡PALETA NAVIDEÑA!) --- */

:root {

    color-scheme: light;

    --color-primary-dark: #B71C1C; /* Rojo Navidad Oscuro */

    --color-accent: #1B5E20;       /* Verde Navidad Oscuro */

    --color-gold: #D4AF37;         /* Dorado Metálico */

    --color-text: #3a3a3a;

    --color-background: #FFFBF5;   /* Blanco cálido (como nieve) */

    --color-card-bg: #ffffff;

    --color-border: #e9e9e9;

    

    --font-body: 'Montserrat', sans-serif;

    --font-headings: 'Dancing Script', cursive; 

    --font-elegant-serif: 'Cormorant Garamond', serif;

}



/* --- 3. CONFIGURACIÓN GENERAL (CORREGIDO PARA MÓVILES) --- */



/* CAMBIO: Añadido para forzar el no-scroll */

html {

    height: 100%;

    overflow: hidden;

}



body {

    font-family: var(--font-body);

    

    /* CAMBIO: Forzamos el 100% de altura y ocultamos el scroll */

    height: 100%;

    min-height: 100%;

    overflow: hidden; /* ¡Clave! Evita que el body haga scroll */

    

    /* CAMBIO: Centramos la tarjeta vertical y horizontalmente */

    display: flex;

    justify-content: center;

    align-items: center; /* Antes: flex-start */

    

    padding: 0; /* Antes: 3px */

    box-sizing: border-box;

    background-color: var(--color-background); 



    /* ESTILOS PARA EL MARCO DE FONDO (Sin cambios) */

    background-image: url('fondo.png');

    background-size: 100vw 100vh; 

    background-position: center center;

    background-repeat: no-repeat;

    background-attachment: fixed;

}



.invitacion-container {

    max-width: 450px; 

    width: 100%;

    

    /* CAMBIO: Se hace transparente */

    background-color: transparent;

    box-shadow: none;

    

    border-radius: 20px;

    text-align: center;

    padding: 0; 

    

    /* --- CAMBIO: Hacemos que la tarjeta sea scrollable --- */

    

    /* 1. Definimos altura máxima para dejar espacio al marco. */

    max-height: calc(100vh - 10vh); /* (90vh de alto) */



    /* 2. Quitamos el margen anterior */

    margin: 0; /* Antes: 5vh auto */

    

    /* 3. ¡CLAVE! Habilita el scroll INTERNO */

    overflow-y: auto; 

    overflow-x: hidden;

    /* CAMBIO: Ajuste de capa */

    position: relative; /* Esto ya debería estar */

    z-index: 1; /* Capa base (estaba en 500) */

}



/* --- 4. ESTILOS DE TEXTO (Colores actualizados) --- */

h1, h2, .casamos, .final-nombres {

    font-family: var(--font-headings);

    color: var(--color-primary-dark);

    font-weight: 700; 

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); 

}

h1 { 

    font-size: 3em;

    line-height: 1.1;

    margin: 10px 0; 

    position: relative; 

}

h2 { 

    font-size: 2.5em;

    line-height: 1.2;

    margin-top: 10px; 

    margin-bottom: 15px; 

}

p {

    color: var(--color-text);

    line-height: 1.7;

    font-size: 1.05em;

    font-weight: 500;

    margin: 10px 0;

}

.corazon {

    font-size: 2.2em;

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);

    color: var(--color-primary-dark);

    margin-bottom: 10px;

}

.icono {

    font-size: 2.8em;

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);

    margin-bottom: 0;

}



/* --- 5. ANIMACIÓN DE SCROLL (Fundido hacia arriba) --- */

.seccion {

    padding: 25px 20px;

    border-bottom: 1px solid var(--color-border);

    box-sizing: border-box;

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.6s ease-out, transform 0.6s ease-out;

}

.seccion:last-child { border-bottom: none; }

.seccion.visible { opacity: 1; transform: translateY(0); }

.seccion.quote, .seccion .verse { opacity: 1; transform: translateY(0); }



/* --- 6. VIDEO DE PORTADA Y CONTENIDO HERO --- */

.seccion.hero {

    position: relative;

    padding: 0;

    overflow: hidden;

    opacity: 1;

    transform: translateY(0);

    background-color: transparent;

}

.hero-video {

    width: 100%;

    height: auto;

    object-fit: contain;

    background-color: transparent;

    z-index: 1;

    display: block;

}

.hero-content {

    width: 100%;

    text-align: center;

    padding: 30px 20px;

    box-sizing: border-box;

    background-color: transparent;

}



/* --- 7. ESTILOS DE SECCIONES VARIAS --- */

.seccion.quote { 

    background-color: transparent;

}

.frase {

    font-size: 1.1em;

    font-family: var(--font-headings);

    color: var(--color-text);

    line-height: 1.6;

    padding: 0 15px;

    white-space: pre-wrap;

}



.casamos {

    margin-top: 30px;

    font-size: 3.2em;

    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);

}

.divider {

    font-family: var(--font-headings);

    font-size: 2.5em;

    color: var(--color-gold);

    margin: 10px 0;

    line-height: 1;

}



/* Botón (Colores actualizados) */

.btn {

    display: inline-block;

    padding: 12px 30px;

    margin-top: 15px;

    background-color: var(--color-accent);

    color: var(--color-card-bg);

    text-decoration: none;

    font-weight: bold;

    font-family: var(--font-body);

    border-radius: 30px;

    transition: all 0.3s ease;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

}

.btn:hover {

    background-color: var(--color-primary-dark);

    color: var(--color-card-bg);

    transform: scale(1.05) translateY(-2px);

    box-shadow: 0 4px 15px rgba(183, 28, 28, 0.2);

}



/* Banner final (Colores actualizados) */

#album-banner {

    background-color: transparent;

    padding-top: 30px;

    padding-bottom: 30px;

}

#album-banner h2 {

    color: var(--color-primary-dark); /* Color cambiado para legibilidad */

    margin: 0;

}

.seccion.cierre {

    background-color: transparent;

}

.final-nombres {

    font-size: 3.5em;

    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);

    margin-bottom: 0;

}



/* --- 8. ANIMACIÓN DE COPOS DE NIEVE --- */

.snow-container {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 9999;

    pointer-events: none;

    overflow: hidden;

}

.snowflake {

    position: absolute;

    top: -30px;

    color: white;

    font-size: 1.5rem;

    opacity: 0.8;

    text-shadow: 0 0 5px white, 0 0 10px white;

    animation: snow-fall 10s linear infinite;

}



@keyframes snow-fall {

    0% {

        transform: translateY(0) rotate(0deg);

        opacity: 1;

    }

    100% {

        transform: translateY(calc(100vh + 30px)) translateX(5vw) rotate(360deg);

        opacity: 0;

    }

}

/* Variaciones de copos de nieve */

.snow-container .snowflake:nth-child(1) { left: 10%; animation-duration: 10s; animation-delay: -5s; font-size: 1rem; }

.snow-container .snowflake:nth-child(2) { left: 20%; animation-duration: 12s; animation-delay: -3s; }

.snow-container .snowflake:nth-child(3) { left: 30%; animation-duration: 9s; animation-delay: -7s; font-size: 1.2rem; }

.snow-container .snowflake:nth-child(4) { left: 40%; animation-duration: 11s; animation-delay: -2s; }

.snow-container .snowflake:nth-child(5) { left: 50%; animation-duration: 8s; animation-delay: -1s; font-size: 1.5rem; }

.snow-container .snowflake:nth-child(6) { left: 60%; animation-duration: 13s; animation-delay: -4s; }

.snow-container .snowflake:nth-child(7) { left: 70%; animation-duration: 10s; animation-delay: -6s; font-size: 1rem; }

.snow-container .snowflake:nth-child(8) { left: 80%; animation-duration: 9s; animation-delay: -1s; }

.snow-container .snowflake:nth-child(9) { left: 85%; animation-duration: 12s; animation-delay: -8s; }

.snow-container .snowflake:nth-child(10) { left: 45%; animation-duration: 7s; animation-delay: -3s; }





/* --- 9. BOTÓN DE CONTROL DE MÚSICA --- */

#control-musica {

    position: fixed;

    bottom: 20px;

    right: 20px;

    background-color: var(--color-accent);

    color: var(--color-card-bg);

    width: 45px;

    height: 45px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    cursor: pointer;

    z-index: 9998;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

    transition: transform 0.2s ease;

}

#control-musica:hover {

    transform: scale(1.1);

}



/* --- 10. CUENTA REGRESIVA (Colores actualizados) --- */

.countdown-container {

    display: flex;

    justify-content: center;

    

    /* CAMBIO: Forzar una sola línea */

    flex-wrap: nowrap;

    

    /* CAMBIO: Reducir el espacio entre cajas */

    gap: 8px;

    

    margin: 30px 0;

    font-family: var(--font-body);

    

    /* CAMBIO: Reducir padding para más espacio */

    padding: 0 8px; 

    box-sizing: border-box;

}



.countdown-box {

    background: transparent;

    border: 2px solid var(--color-accent);

    border-radius: 12px;

    text-align: center;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

    

    /* --- CAMBIO: Volvemos a un modelo flexible --- */

    

    /* 1. flex: 1 significa: crecer (1), encoger (1), y empezar desde 0 (basis: 0) */

    /* Esto los fuerza a tener el MISMO ANCHO, repartiéndose el espacio. */

    flex: 1; 



    /* 2. Asignamos una altura fija para mantener la forma */

    height: 85px;

    

    /* 3. min-width: 0 es un truco de flexbox. Evita que el contenido 

       (como "SEGUNDOS") impida que la caja se encoja. */

    min-width: 0;

    

    /* 4. Usamos flexbox interno para centrar perfectamente */

    padding: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    

    box-sizing: border-box; 

}



#days, #hours, #minutes, #seconds {

    display: block;

    font-size: clamp(2em, 7vw, 2.3em); 

    font-weight: 800;

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);

    color: var(--color-primary-dark);

    line-height: 1; 

}



.countdown-label {

    display: block;

    font-size: clamp(0.65em, 2.5vw, 0.75em);

    font-weight: 700;

    letter-spacing: 1.5px;

    color: var(--color-text);

    text-transform: uppercase;

    margin-top: 5px;

    

    /* CAMBIO: Evitar que el texto de la etiqueta se parta (como "SEGUN-DOS") */

    white-space: nowrap;

    /* CAMBIO: Si es demasiado largo, ocultarlo (mejor que partirse) */

    overflow: hidden;

    text-overflow: ellipsis;

    /* CAMBIO: Asegurar que la etiqueta no sea más ancha que la caja */

    width: 100%; 

}



/* --- 11. AJUSTES RESPONSIVE (Móviles pequeños) --- */

@media (max-width: 375px) {

    .countdown-container { 

        gap: 5px; /* Reducimos más el gap */

        padding: 0 5px; 

    }



    .countdown-box { 

        /* Hacemos las cajas un poco más pequeñas en móviles */

        height: 75px;

    }

    

    #days, #hours, #minutes, #seconds { 

        font-size: 1.8em; /* Tamaño fijo más pequeño */

    }

    .countdown-label { 

        font-size: 0.6em; /* Tamaño fijo más pequeño */

        letter-spacing: 0.5px; 

        margin-top: 4px;

    }

}



/* --- 11. AJUSTES RESPONSIVE (Móviles pequeños) --- */

@media (max-width: 375px) {

    .countdown-container { 

        gap: 6px; /* Reducimos el gap */

        padding: 0 5px; /* Reducimos el padding del contenedor */

    }



    /* CAMBIO: Hacemos las cajas un poco más pequeñas */

    .countdown-box { 

        width: 78px;

        height: 78px;

    }

    

    #days, #hours, #minutes, #seconds { 

        font-size: 2em; /* Tamaño fijo más pequeño */

    }

    .countdown-label { 

        font-size: 0.65em; /* Tamaño fijo más pequeño */

        letter-spacing: 0.5px; 

        margin-top: 4px;

    }

}



/* --- 12. ESTILOS DEL VERSÍCULO --- */

.verse {

    font-family: var(--font-elegant-serif);

    font-size: 1.2em;

    font-weight: 500;

    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.05);

    font-style: italic;

    color: var(--color-text);

    line-height: 1.7;

    padding: 0 15px;

    margin: 20px 0;

}

.verse-reference {

    display: block;

    font-family: var(--font-elegant-serif);

    font-style: normal;

    font-weight: 700;

    font-size: 1.05em;

    margin-top: 15px;

    color: var(--color-primary-dark);

}



/* --- 14. IMAGEN FINAL PEGADA AL BORDE --- */

.imagen-final {

    width: 100%;

    display: block;

    padding: 0;

    margin-top: -150px;

    position: relative;

    z-index: 1;

}

.seccion.cierre {

    position: relative;

    z-index: 2;

    background-color: transparent;

}



/* --- 15. ESTILO DE MARCA DE AGUA --- */

.marca-de-agua {

    position: relative;

    z-index: 1;

}

.marca-de-agua::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url('https://jimeyker.com/noscamosoff/11.png');

    background-repeat: no-repeat;

    background-position: var(--random-x, 50%) var(--random-y, 50%);

    background-size: 180px;

    opacity: 0.2;

    z-index: -1;

    transform: rotate(var(--random-rotation, 0deg));

}



/* --- 16. EFECTO DE "BRILLO" (Reemplaza fuegos artificiales) --- */

.hero-content h1::before {

    content: '✨';

    position: absolute;

    top: -25px;

    left: 50%;

    transform: translateX(-50%);

    font-size: 1.5em;

    color: var(--color-gold);

    animation: sparkle 2s ease-out infinite;

}



/* Animación de brillo */

@keyframes sparkle {

    0%, 100% {

        opacity: 0.7;

        transform: translateX(-50%) scale(0.9);

    }

    50% {

        opacity: 1;

        transform: translateX(-50%) scale(1.2);

    }

}



/* --- 17. SECCIÓN ITINERARIO (TIMELINE) --- */

.seccion-itinerario {

    background-color: transparent;

}

.subtitulo-itinerario {

    font-family: var(--font-elegant-serif);

    font-size: 1.2em;

    color: var(--color-text);

    margin-top: -10px;

}

.timeline-container {

    position: relative;

    margin-top: 30px;

}

/* Línea vertical */

.timeline-container::before {

    content: '';

    position: absolute;

    top: 0;

    bottom: 0;

    left: 50%;

    width: 2px;

    background-color: var(--color-accent);

    transform: translateX(-50%);

}

.timeline-item {

    padding: 10px 0;

    position: relative;

    width: 50%;

    box-sizing: border-box;

}

/* Punto en la línea */

.timeline-item::after {

    content: '';

    position: absolute;

    top: 20px;

    width: 12px;

    height: 12px;

    background-color: var(--color-accent);

    border: 2px solid transparent; /* Borde transparente */

    border-radius: 50%;

    z-index: 3;

}

/* Lado Izquierdo */

.timeline-left { left: 0; text-align: right; padding-right: 25px; }

.timeline-left::after { right: -8px; }

.timeline-left .timeline-icon-outside { left: calc(100% + 17px); text-align: left; }

/* Lado Derecho */

.timeline-right { left: 50%; text-align: left; padding-left: 25px; }

.timeline-right::after { left: -8px; }

.timeline-right .timeline-icon-outside { right: calc(100% + 17px); text-align: right; }

/* Contenido */

.timeline-content {

    position: relative;

    z-index: 2;

    padding: 15px 0;

    background-color: transparent;

    border-radius: 0;

    border: none;

}

/* Icono */

.timeline-icon-outside {

    position: absolute;

    top: 10px;

    font-size: 2.2em;

    color: var(--color-primary-dark);

    z-index: 4;

    width: 50px;

}

.timeline-content h3 {

    font-family: var(--font-elegant-serif);

    color: var(--color-primary-dark);

    margin: 0 0 5px 0;

    font-size: 1.5em;

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.08);

    font-weight: 700;

}

.timeline-content .timeline-time {

    margin: 0;

    font-weight: bold;

    font-family: var(--font-body);

    font-size: 0.95em;

    color: var(--color-text);

}



/* --- 18. ADORNO DEBAJO DE NOMBRES FINALES --- */

.adorno-debajo-nombres {

    display: block;

    margin: 15px auto;

    max-width: 120px;

    height: auto;

}



/* --- 19. NUEVO DISEÑO DE CIERRE Y BOTÓN TIKTOK --- */



.seccion.cierre {

    padding-bottom: 40px; /* Más espacio inferior para el botón */

}



/* Estilo para el subtítulo "Les desea..." */

.equipo-desea {

    font-family: var(--font-elegant-serif);

    font-size: 1.4em;

    font-weight: 500;

    color: var(--color-text);

    margin-top: 0;

    margin-bottom: 25px;

    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.05);

}



/* Sobrescribimos el .final-nombres para reducir 

  el margen y añadimos el ID para la animación 

*/

.final-nombres {

    margin-bottom: 10px; /* Más cerca del subtítulo */

}



#feliz-navidad-animado {

    /* ¡ANIMACIÓN DE BRILLO! */

    animation: brillo-navidad 2.5s ease-in-out infinite;

}



/* Keyframes para la animación de brillo del H1 */

@keyframes brillo-navidad {

    0% {

        text-shadow: 1px 1px 2px rgba(0,0,0,0.1), 0 0 10px var(--color-gold);

        color: var(--color-primary-dark);

    }

    50% {

        /* El brillo dorado se hace más intenso */

        text-shadow: 1px 1px 2px rgba(0,0,0,0.1), 0 0 30px var(--color-gold);

        color: #cf3333; /* Un rojo un poco más brillante */

    }

    100% {

        text-shadow: 1px 1px 2px rgba(0,0,0,0.1), 0 0 10px var(--color-gold);

        color: var(--color-primary-dark);

    }

}



/* --- 20. LUCES NAVIDEÑAS ALREDEDOR DEL MARCO --- */



.marco-luces {

    position: relative; 

    width: 100%;

    max-width: 460px;

    max-height: calc(100vh - 8vh);

    display: flex;

    justify-content: center;

    align-items: center;

    

    /* CAMBIO: Esta es la capa principal de la "tarjeta" */

    z-index: 500; /* (Estaba en 501) */

    

    padding: 0;

    box-sizing: border-box;

}



/* Esta regla (.invitacion-container) en la sección 20 

   puede que ya no sea necesaria si todos los estilos 

   están en la sección 3. Si la tienes, bórrala 

   para evitar duplicados. */



.marco-luces::before {

    content: '';

    position: absolute;

    top: -20px;

    left: -20px;

    right: -20px;

    bottom: -20px;

    

    background-image: url('lights.png'); 

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    

    border-radius: 25px;

    

    /* ¡IMPORTANTE! Esto evita que las luces (que ahora están 

       por encima) bloqueen los clics en la invitación */

    pointer-events: none; 

    

    /* CAMBIO: Pone las luces POR ENCIMA del container */

    z-index: 2; /* (Estaba en -1) */

    

    animation: christmas-blink 6s infinite linear;

}



/* ... (Los @keyframes de christmas-blink se quedan igual) ... */