/* ------------------ */
/* PALETA GENERAL */
/* ------------------ */

:root {
    /* Día */
    --bg-main: #FFF8EC;
    --blue-main: #2F4FA9;
    --gold-main: #D4A017;
    --rose-red: #B0122C;
    --text-main: #4B3B32;
    --probervio-main: #2F4FA9;
}

/* Noche */
body.theme-dark {
    --bg-main: #0C1230;
    --blue-main: #C7D8FF;
    --gold-main: #E7C36C;
    --rose-red: #F0625F;
    --text-main: #FDF6EC;
    --probervio-main: #F0625F;
}

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

html {
    width: 100%;
    height: 100%;
    /* (¡Quitamos el overflow-x de aquí!) */
}

body {
    width: 100%;
    overflow-x: hidden;
    /* ¡Lo mantenemos solo aquí! */

    background: var(--bg-main);
    font-family: "Poppins", sans-serif;
    color: var(--text-main);
    transition: background 0.4s ease, color 0.4s ease;
}

/* ------------------ */
/* THEME TOGGLE (Antes 'TOP BAR') */
/* ------------------ */

.top-bar {
    position: fixed;
    /* Lo fijamos a la pantalla */
    bottom: 1.5rem;
    /* Abajo */
    right: 1.5rem;
    /* A la derecha */

    /* Lo ocultamos por defecto */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    /* Para que aparezca deslizando */
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;

    /* z-index alto para que esté sobre todo */
    z-index: 1000;
}

/* (NUEVO) Estado visible que añadirá el JS */
.top-bar.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Los estilos del botón en sí están bien, los dejamos igual */
.toggle-btn {
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid var(--gold-main);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
    display: flex;
    gap: 4px;
    font-size: 1.1rem;
    align-items: center;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

body.theme-dark .toggle-btn {
    background: rgba(12, 18, 48, 0.9);
}

.toggle-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
}

/* ------------------ */
/* HERO */
/* ------------------ */

/* Versión escritorio / tablet horizontal */
.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 2.5rem 1.5rem 3.5rem;
    background-image: url("../img/fondo-web.jpg?v=jht4utfk");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Imagen distinta en móvil */
@media (max-width: 768px) {
    .hero {
        align-items: flex-end;
        padding: 2rem 1rem 3rem;
        background-image: url("../img/fondo-movil.jpg?v=jht4utfk");
        background-position: center top;
    }
}

/* Ligero degradado solo para lectura del texto */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.45),
            rgba(0, 0, 0, 0.1),
            transparent);
}

body.theme-dark .hero::before {
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.65),
            rgba(0, 0, 0, 0.2),
            transparent);
}

/* Texto sobre la imagen */
.hero-overlay-text {
    position: relative;
    text-align: center;
    color: #ffffff;
    z-index: 1;
    animation: fadeUp 1.2s ease;
}

/* Etiqueta "Mis XV Años" pequeña */
.hero-label {
    display: block;
    font-family: "Playfair Display", serif;
    font-size: 0.95rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 0.7rem;
    opacity: 0.9;
}

/* Nombre grande */
.hero-name {
    font-family: "Great Vibes", cursive;
    font-size: clamp(3rem, 7vw, 4.2rem);
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.8);
    color: #ffffff;
}

/* Ajuste en móvil: bajar un poco el tamaño si es necesario */
@media (max-width: 480px) {
    .hero-name {
        font-size: 3rem;
    }
}

/* Animación entrada */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Texto sobre la imagen */
.hero-overlay-text {
    position: relative;
    text-align: center;
    color: #ffffff;
    z-index: 1;
    animation: fadeUp 1.2s ease;
}

/* Etiqueta "Mis XV Años" con brillo suave */
.hero-label {
    display: block;
    font-family: "Playfair Display", serif;
    font-size: 0.95rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 0.7rem;
    opacity: 0.95;

    /* Brillo muy sutil */
    text-shadow:
        0 0 4px rgba(255, 255, 255, 0.7),
        0 0 10px rgba(245, 212, 138, 0.7);

    animation: glowSoft 3.2s ease-in-out infinite;
}

/* Nombre grande con resplandor dinámico */
.hero-name {
    font-family: "Great Vibes", cursive;
    font-size: clamp(3rem, 7vw, 4.2rem);
    color: #ffffff;

    /* Glow base */
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.9),
        0 0 18px rgba(176, 18, 44, 0.9),
        0 0 28px rgba(212, 160, 23, 0.85);

    animation: glowWave 4s ease-in-out infinite;
}

/* Ajuste en móvil: bajar un poco el tamaño si es necesario */
@media (max-width: 480px) {
    .hero-name {
        font-size: 3rem;
    }
}

/* Animación de resplandor suave para "Mis XV Años" */
@keyframes glowSoft {
    0% {
        text-shadow:
            0 0 4px rgba(255, 255, 255, 0.4),
            0 0 8px rgba(245, 212, 138, 0.4);
    }

    50% {
        text-shadow:
            0 0 6px rgba(255, 255, 255, 0.9),
            0 0 14px rgba(245, 212, 138, 0.9);
    }

    100% {
        text-shadow:
            0 0 4px rgba(255, 255, 255, 0.4),
            0 0 8px rgba(245, 212, 138, 0.4);
    }
}

/* Animación de resplandor con leve movimiento para "Valentina" */
@keyframes glowWave {
    0% {
        text-shadow:
            0 0 6px rgba(255, 255, 255, 0.7),
            0 0 18px rgba(176, 18, 44, 0.8),
            0 0 26px rgba(212, 160, 23, 0.7);
        transform: translateY(0);
    }

    35% {
        text-shadow:
            0 0 10px rgba(255, 255, 255, 1),
            0 0 26px rgba(176, 18, 44, 1),
            0 0 38px rgba(212, 160, 23, 0.9);
        transform: translateY(-1px);
    }

    70% {
        text-shadow:
            0 0 8px rgba(255, 255, 255, 0.85),
            0 0 20px rgba(176, 18, 44, 0.9),
            0 0 30px rgba(212, 160, 23, 0.8);
        transform: translateY(0);
    }

    100% {
        text-shadow:
            0 0 6px rgba(255, 255, 255, 0.7),
            0 0 18px rgba(176, 18, 44, 0.8),
            0 0 26px rgba(212, 160, 23, 0.7);
        transform: translateY(0);
    }
}

/* ------------------ */
/* HERO - LLUVIA DE PÉTALOS */
/* ------------------ */

#petalos-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    /* Para que no interfiera con el clic */
    z-index: 2;
    /* Detrás del texto, delante del fondo */
}

/* Aseguramos que el texto esté DELANTE de los pétalos.
  Tu .hero-overlay-text ya tiene z-index: 1, 
  así que lo subimos a 3.
*/
.hero-overlay-text {
    z-index: 3;
    position: relative;
    /* Necesario para que z-index funcione */
}

.petalo {
    position: absolute;
    top: -50px;
    /* Inicia fuera de la pantalla */
    width: 20px;
    height: 20px;
    background-color: var(--rose-red);
    /* Usamos tu color de la paleta */
    border-radius: 1px 10px 1px 10px;
    /* Forma de pétalo simple */
    opacity: 0.8;

    /* Animación de caída (10s de base, el JS la hará aleatoria) */
    animation: caer 10s linear infinite;
}

/* Keyframes para la caída y el balanceo */
@keyframes caer {
    0% {
        transform: translateY(0) rotate(0) translateX(0);
        opacity: 0.8;
    }

    100% {
        /* Cae 100vh (toda la pantalla) + 50px (para desaparecer) */
        transform: translateY(calc(100vh + 50px)) rotate(720deg) translateX(calc(var(--movimiento-x) * 100px));
        opacity: 0;
    }
}

/* ------------------ */
/* SECCIÓN 2: LA PRINCESA Y SU PADRINO */
/* ------------------ */

.section-princesa {
    padding: 3.5rem 1.5rem 4rem;
    background: linear-gradient(to bottom,
            rgba(255, 248, 236, 1),
            rgba(255, 241, 221, 1));
}

body.theme-dark .section-princesa {
    background: radial-gradient(circle at top, #151b3a, #0c1230);
}

.section-princesa-inner {
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 2.5rem;
    align-items: center;
}

/* En móvil, se apilan */
@media (max-width: 768px) {
    .section-princesa-inner {
        flex-direction: column;
        gap: 2rem;
    }
}

/* FOTO */
.princesa-photo {
    flex: 1;
    display: flex;
    justify-content: center;
}

.princesa-photo img {
    width: 100%;
    max-width: 340px;
    border-radius: 26px;
    object-fit: cover;
    border: 3px solid var(--gold-main);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* TEXTO */
.princesa-text {
    flex: 1.2;
    color: var(--text-main);
}

.princesa-tagline {
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-family: "Playfair Display", serif;
    color: var(--rose-red);
    margin-bottom: 0.6rem;
}

.princesa-heading {
    font-family: "Playfair Display", serif;
    font-size: 1.7rem;
    margin-bottom: 0.9rem;
    color: var(--blue-main);
}

.princesa-padrino {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--text-main);
}

.princesa-padrino span {
    font-weight: 600;
    color: var(--rose-red);
}

.princesa-copy {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--text-main);
    max-width: 460px;
}

/* Ajustes en móvil */
@media (max-width: 768px) {
    .section-princesa {
        padding: 3rem 1.25rem 3.5rem;
        text-align: center;
    }

    .princesa-text {
        text-align: center;
        align-items: center;
    }

    .princesa-copy {
        margin: 0 auto;
    }
}

/* ------------------ */
/* SECCIÓN FRASE PRINCIPAL (2 Columnas) */
/* ------------------ */

.section-frase {
    padding: 10rem 1.25rem 8rem;
    background: var(--bg-main);
}

body.theme-dark .section-frase {
    background: radial-gradient(circle at top, #151b3a, #0c1230);
}

.frase-inner {
    max-width: 900px;
    /* Ancho ampliado para columnas */
    margin: 0 auto;
    padding: 3rem;
    /* Padding interno para la tarjeta */
    border-radius: 24px;
    background: var(--bg-main);
    border: 1px solid rgba(212, 160, 23, 0.35);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);

    /* === Flexbox para 2 columnas === */
    display: flex;
    align-items: center;
    /* Centra verticalmente */
    gap: 2.5rem;
    /* Espacio entre columnas */
}

body.theme-dark .frase-inner {
    background: rgba(12, 18, 48, 0.96);
    border-color: rgba(231, 195, 108, 0.6);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
}

/* --- Columna 1: Imagen Espejo --- */
.frase-columna-imagen {
    flex: 0 0 280px;
    /* Ancho fijo para la imagen */
    text-align: center;
}

.frase-espejo img {
    max-width: 100%;
    width: 280px;
    /* Ancho de la imagen */
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.15));
}

body.theme-dark .frase-espejo img {
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4));
}

/* --- Columna 2: Texto --- */
.frase-columna-texto {
    flex: 1;
    /* Ocupa el espacio restante */
    text-align: center;
    /* Centramos el texto de esta columna */
}

.frase-pequena {
    /* Renombrado de .frase-pre */
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-family: "Playfair Display", serif;
    color: var(--rose-red);
    margin-bottom: 1rem;
}

.frase-principal {
    /* Renombrado de .frase-main */
    font-family: "Playfair Display", serif;
    font-size: 1.1rem;
    line-height: 1.9;
    color: var(--text-main);
    margin-bottom: 1.4rem;
    font-style: normal;
    /* Quitamos la cursiva si es blockquote */
}

.frase-principal::first-letter {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--blue-main);
}

.frase-final {
    /* Renombrado de .frase-post */
    font-size: 0.95rem;
    color: var(--text-main);
    opacity: 0.9;
}

/* Ajustes responsive */
@media (max-width: 768px) {
    .section-frase {
        padding: 8rem 1.25rem 7rem;
    }

    .frase-inner {
        flex-direction: column;
        /* Apilar columnas en móvil */
        padding: 2.1rem 1.3rem;
        gap: 2rem;
    }

    .frase-columna-imagen {
        flex-basis: auto;
        /* El ancho se ajusta al contenido */
    }

    .frase-espejo img {
        width: 220px;
        /* Imagen más pequeña en móvil */
    }
}

/* ------------------ */
/* FOTO FIJA FESTEJADA (PARALLAX ROBUSTO) */
/* ------------------ */

.section-foto-fixed {
    position: relative;
    /* Altura de la "ventana" que vemos */
    height: 60vh; 
    min-height: 700px;
    overflow: hidden; /* Clave: oculta lo que se sale */
    
    /* Fondo de respaldo por si tarda en cargar la imagen */
    background-color: var(--bg-main);
}

/* Overlay oscuro (se mantiene igual) */
.section-foto-fixed::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.25),
            rgba(0, 0, 0, 0.15));
    z-index: 2; /* Asegura que esté sobre la imagen */
}

/*body.theme-dark .section-foto-fixed::before {
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.4),
            rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0.4));
}*/

/* Contenedor que mueve Rellax */
.rellax-container {
    /* Posición absoluta para salirse del flujo normal */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    
    /* Esto es lo que centra la imagen verticalmente dentro del movimiento */
    display: flex;
    align-items: center;
    
    /* TRUCO IMPORTANTE:
       Le damos una altura MUCHO mayor a la sección. 
       Al tener top:0 y estar alineado al centro, la imagen 
       queda posicionada correctamente para empezar a moverse.
    */
    height: 150vh; 
    margin-top: -25vh; /* Compensa para centrar el inicio del movimiento */
    z-index: 1;
}

/* La imagen real */
.parallax-img {
    width: 100%;
    /*height: 100%;*/
    /* "cover" para que llene el espacio sin deformarse */
    object-fit: cover; 
    object-position: center;
}

/* === Ajustes para Móvil === */
@media (max-width: 768px) {
    .section-foto-fixed {
        /* 1. Aumentamos un poco la "ventana" visible */
        height: 65vh; /* Antes 50vh. Damos más espacio vertical. */
        min-height: 400px;
    }

    .rellax-container {
        /* 2. REDUCIMOS la altura del contenedor que se mueve.
           Al ser menos alto (100vh en vez de 130vh), 'object-fit: cover'
           no necesita hacer tanto zoom, por lo que se verá más imagen (y el marco). */
        height: 100vh; 
        
        /* 3. Recalculamos el margen para centrar el inicio */
        margin-top: -50.5vh; /* La mitad de la diferencia (100 - 65) / 2 */
    }
    
    /* OPCIONAL: Si aún se corta mucho, fuerza a que se vea el marco completo.
       Descomenta la línea de abajo si prefieres que se vea todo el marco, 
       aunque queden espacios vacíos a los lados en celulares anchos. */
    /* .parallax-img { object-fit: contain !important; } */
}

/* ------------------ */
/* SECCIÓN CALENDARIO */
/* ------------------ */

.section-calendario {
    padding: 3.5rem 1.5rem 4rem;
    background: #fff1dd;
}

body.theme-dark .section-calendario {
    background: radial-gradient(circle at top, #151b3a, #0c1230);
}

.section-calendario-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 2.5rem;
    align-items: center;
}

/* En móvil, una sola columna */
@media (max-width: 900px) {
    .section-calendario-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* Texto del calendario */

.calendario-texto {
    color: var(--text-main);
}

.calendario-titulo {
    font-family: "Playfair Display", serif;
    font-size: 1.8rem;
    color: var(--blue-main);
    margin-bottom: 0.6rem;
}

.calendario-sub {
    font-size: 1rem;
    font-weight: 500;
    color: var(--rose-red);
    margin-bottom: 1rem;
}

.calendario-copy {
    font-size: 0.98rem;
    line-height: 1.7;
    max-width: 440px;
}

@media (max-width: 900px) {
    .calendario-copy {
        margin: 0 auto;
    }
}

/* Calendario visual */

.calendario-widget {
    background: var(--bg-main);
    border-radius: 20px;
    border: 1px solid rgba(212, 160, 23, 0.4);
    padding: 1.5rem 1.7rem 1.7rem;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

body.theme-dark .calendario-widget {
    background: rgba(12, 18, 48, 0.96);
    border-color: rgba(231, 195, 108, 0.7);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.7);
}

.calendario-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;
}

.cal-mes {
    font-family: "Playfair Display", serif;
    font-size: 1.4rem;
    color: var(--blue-main);
}

.cal-anio {
    font-size: 0.95rem;
    color: var(--text-main);
    opacity: 0.8;
}

/* Grid de días */

.calendario-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.4rem;
    font-size: 0.85rem;
}

.cal-dia-nombre {
    text-align: center;
    font-weight: 600;
    color: var(--text-main);
    opacity: 0.8;
}


.cal-dia {
    text-align: center;
    padding: 0.5rem 0;
    border-radius: 999px;
    color: var(--text-main);
    background: transparent;
}

/* Día del evento destacado */
.cal-dia-evento {
    background: var(--rose-red);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--gold-main);
    animation: pulse-event 2s ease-in-out infinite;
}

/* (NUEVO) Keyframes para el pulso del calendario */
@keyframes pulse-event {
    0% {
        box-shadow: 0 0 0 2px var(--gold-main);
    }

    50% {
        /* Expande la sombra y la hace semitransparente */
        /* (El color RGBA es tu --gold-main a 40% de opacidad) */
        box-shadow: 0 0 0 7px rgba(212, 160, 23, 0.4);
    }

    100% {
        box-shadow: 0 0 0 2px var(--gold-main);
    }
}

/* ------------------ */
/* SECCIÓN COUNTDOWN */
/* ------------------ */

.section-countdown {
    padding: 5rem 1.5rem 6rem;
    background: var(--bg-main);
    /* Fondo claro principal */
    position: relative;
}

.section-countdown-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.countdown-titulo {
    font-family: "Playfair Display", serif;
    font-size: 1.8rem;
    color: var(--blue-main);
    margin-bottom: 2rem;
}

.countdown-timer {
    display: flex;
    flex-wrap: wrap;
    /* Para que en móvil se ajuste */
    justify-content: center;
    gap: 1.25rem;
    /* Espacio entre cajas */
}

.timer-caja {
    background: var(--bg-main);
    border-radius: 20px;
    border: 2px solid var(--gold-main);
    padding: 1rem;
    min-width: 120px;
    /* Ancho mínimo */
    flex-basis: 120px;
    /* Ancho base */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease;
}

body.theme-dark .timer-caja {
    background: rgba(12, 18, 48, 0.96);
    border-color: rgba(231, 195, 108, 0.7);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.timer-caja:hover {
    transform: translateY(-5px);
}

.timer-caja .numero {
    font-family: "Playfair Display", serif;
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--rose-red);
    /* Números en rojo */
    display: block;
    line-height: 1.1;
}

.timer-caja .etiqueta {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-main);
    margin-top: 0.25rem;
    display: block;
    opacity: 0.9;
}

/* Ajustes en móvil */
@media (max-width: 500px) {
    .timer-caja {
        /* Hacemos que ocupen 2 columnas */
        flex-basis: calc(50% - 1rem);
        min-width: 100px;
        padding: 0.8rem;
    }

    .timer-caja .numero {
        font-size: 2.2rem;
    }
}

/* ------------------ */
/* SECCIÓN FAMILIA (Papás y Padrino) - VERSIÓN TARJETAS */
/* ------------------ */

.section-familia {
    padding: 4.5rem 1.5rem 5rem;
    /* Más padding para que respiren las tarjetas */
    background: var(--bg-main);
}

.familia-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    /* Espacio entre tarjetas */
    text-align: center;
}

/* La nueva tarjeta */
.familia-card {
    flex: 1;
    background: var(--bg-main);
    border: 1px solid rgba(212, 160, 23, 0.35);
    border-radius: 24px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.familia-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.1);
}

/* Estilos del modo oscuro para la tarjeta */
body.theme-dark .familia-card {
    background: rgba(12, 18, 48, 0.96);
    border-color: rgba(231, 195, 108, 0.6);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
}

/* Contenedor de la imagen circular */
.familia-imagen-wrap {
    width: 150px;
    /* Tamaño del círculo */
    height: 150px;
    margin: 0 auto 1.5rem auto;
    /* Centrado y con espacio abajo */
    border-radius: 50%;
    /* Círculo perfecto */
    border: 4px solid var(--gold-main);
    overflow: hidden;
    /* Para que la imagen no se salga */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.familia-imagen-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Para que la imagen llene el círculo */
    object-position: center;
    /* Centra la imagen */
}


.familia-titulo {
    font-family: "Playfair Display", serif;
    font-size: 1.5rem;
    color: var(--blue-main);
    margin-bottom: 1rem;
    font-weight: 600;
}

.familia-nombre {
    font-family: "Poppins", sans-serif;
    font-size: 1.1rem;
    color: var(--text-main);
    line-height: 1.7;
    font-weight: 400;
}

/* Clase específica para el '&' */
.familia-nombre-y {
    font-family: "Great Vibes", cursive;
    font-size: 2rem;
    color: var(--rose-red);
    margin: -0.5rem 0;
    /* Ajuste para que se junte con los nombres */
}

/* Ajustes en móvil */
@media (max-width: 768px) {
    .familia-inner {
        flex-direction: column;
        /* Apilar en móvil */
        gap: 2rem;
    }

    .familia-card {
        padding: 2rem 1.5rem;
    }

    .familia-imagen-wrap {
        width: 130px;
        height: 130px;
    }

    .familia-titulo {
        font-size: 1.3rem;
    }

    .familia-nombre {
        font-size: 1rem;
    }
}

/* ===========================================================
   ESTILOS EXCLUSIVOS PARA LA FOTO FIJA 2 (INDEPENDIENTE)
   =========================================================== */

/* 1. El contenedor principal (la "ventana") */
.section-foto-fixed-2 {
    position: relative;
    /* Altura base en escritorio */
    height: 60vh;
    min-height: 700px;
    /* CLAVE: oculta la parte de la imagen que se sale durante el movimiento */
    overflow: hidden;
    /* Color de fondo de respaldo */
    background-color: var(--bg-main);
}

/* 2. Overlay oscuro específico para esta sección (opcional) */
.section-foto-fixed-2::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Degradado sutil para dar profundidad */
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.25),
            rgba(0, 0, 0, 0.15));
    z-index: 2; /* Por encima de la imagen */
}

/* Ajuste del overlay para modo oscuro */
/*body.theme-dark .section-foto-fixed-2::before {
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.4),
            rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0.4));
}*/

/* 3. El contenedor interno que se mueve (el que usa Rellax) */
.foto-fixed-parallax-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Centra la imagen verticalmente dentro de este contenedor alto */
    display: flex;
    align-items: center;

    /* Altura GIGANTE para escritorio, permite mucho recorrido de parallax */
    height: 160vh;
    /* Margin negativo para centrar el inicio del movimiento */
    margin-top: -70vh;
    z-index: 1;
}

/* 4. La imagen interna específica */
.parallax-img-2 {
    width: 100%;
    /* 'cover' es vital: asegura que la imagen llene todo el espacio sin estirarse */
    object-fit: cover;
    object-position: center;
}

/* ==================================================================
   SOLUCIÓN DEFINITIVA PARA MÓVIL FOTO 2 (Tablets y Celulares)
   Objetivo: Desactivar el movimiento para evitar los parpadeos grises
   y asegurar que la imagen siempre se vea completa y centrada.
   ================================================================== */

/* Usamos 991px para abarcar la mayoría de tablets verticales y celulares */
@media (max-width: 991px) {
    
    /* 1. Definimos una altura fija y cómoda para la ventana en móvil */
    .section-foto-fixed-2 {
        height: 50vh; /* Altura razonable */
        min-height: 350px; /* Que no sea muy pequeña */
    }

    /* 2. FORZAMOS AL CONTENEDOR A QUEDARSE QUIETO (ESTÁTICO) */
    /* El uso de !important es OBLIGATORIO aquí para anular 
       los estilos que JavaScript intenta inyectar */
    .foto-fixed-parallax-2 {
        position: relative !important; /* Ya no absolute */
        top: auto !important;
        left: auto !important;
        
        /* Anulamos los márgenes negativos gigantes */
        margin-top: 0 !important; 
        
        /* Hacemos que mida exactamente lo que mide la sección */
        width: 100% !important;
        height: 180% !important;
        
        /* ESTA LÍNEA MATA EL MOVIMIENTO PARALLAX DE JAVASCRIPT */
        transform: none !important; 
    }
    
    /* 3. Aseguramos que la imagen llene el espacio y esté centrada */
    .parallax-img-2 {
        width: 100%;
        height: 100%;
        /* 'cover' asegura que no queden espacios vacíos */
        object-fit: cover;
        /* Centra la imagen perfectamente */
        object-position: center center;
    }
}


/* El overlay '::before' definido en 'section-foto-fixed' 
  se aplicará automáticamente a esta sección también,
  manteniendo el estilo consistente.
*/

/* ------------------ */
/* SECCIÓN UBICACIONES (¡CORREGIDA PARA 2 COLUMNAS EN ESCRITORIO!) */
/* ------------------ */

.section-ubicaciones {
    padding: 4.5rem 1.5rem 5rem;
    background: var(--bg-main);
}


.ubicaciones-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.ubicaciones-titulo-seccion {
    font-family: "Playfair Display", serif;
    font-size: 1.8rem;
    color: var(--blue-main);
    margin-bottom: 2.5rem;
}

.ubicaciones-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* === ¡ESTO ES CLAVE PARA ESCRITORIO! === */
    gap: 2.5rem;
    /* Espacio entre las tarjetas */
}

.ubicacion-card {
    background: var(--bg-main);
    border: 1px solid rgba(212, 160, 23, 0.35);
    border-radius: 24px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 0;
    overflow: hidden;
}

body.theme-dark .ubicacion-card {
    background: rgba(12, 18, 48, 0.96);
    border-color: rgba(231, 195, 108, 0.6);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
}

.ubicacion-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.map-container {
    position: relative;
    padding-bottom: 75%;
    /* Proporción 4:3 para el mapa */
    height: 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(212, 160, 23, 0.35);
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.ubicacion-info {
    padding: 2rem 1.5rem 2.5rem;
}

.ubicacion-titulo-card {
    font-family: "Playfair Display", serif;
    font-size: 1.5rem;
    color: var(--blue-main);
    margin-bottom: 0.75rem;
}

.ubicacion-lugar {
    font-family: "Poppins", sans-serif;
    font-size: 1.1rem;
    color: var(--text-main);
    margin-bottom: 1.75rem;
    font-weight: 400;
}

.ubicacion-button-group {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.ubicacion-boton {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--rose-red);
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    padding: 0.8rem 1.8rem;
    border-radius: 999px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.ubicacion-boton i {
    margin-right: 8px;
}

.ubicacion-boton:hover {
    background-color: #9c1026;
    transform: scale(1.05);
}

body.theme-dark .ubicacion-boton:hover {
    background-color: #f2807e;
}

/* Ajustes en móvil */
@media (max-width: 768px) {
    .ubicaciones-grid {
        grid-template-columns: 1fr;
        /* === ¡Una sola columna en móvil! === */
        gap: 2rem;
    }

    .ubicaciones-titulo-seccion {
        font-size: 1.6rem;
    }

    .ubicacion-info {
        padding: 1.5rem 1rem 2rem;
    }
}

/* ------------------ */
/* SECCIÓN PROVERBIO */
/* ------------------ */

.section-proverbio {
    padding: 4.5rem 1.5rem 5rem;
    text-align: center;
    position: relative;
    
    /* === FONDO POR DEFECTO (MODO DÍA) === */
    background: var(--bg-main); /* Fondo de día sólido por si la imagen falla */
    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url("../img/pergamino.png?v=jht4utfk");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Efecto parallax */
}

body.theme-dark .section-proverbio {
    /* El background-color ya se establece a --bg-main oscuro por la regla general. */
    /* Quitamos la imagen de fondo para que solo se vea el color sólido del tema */
    background-image: none; 
    border-top: 1px solid rgba(231, 195, 108, 0.2);
}

.proverbio-inner {
    max-width: 700px;
    /* Ancho más angosto para la cita */
    margin: 0 auto;
}

.proverbio-texto {
    font-family: "Playfair Display", serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--probervio-main);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.proverbio-cita {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    color: var(--probervio-main);
    font-style: normal;
    font-weight: 500;
    opacity: 0.8;
}

/* Ajustes en móvil */
@media (max-width: 768px) {
    .section-proverbio {
        padding: 3.5rem 1.25rem 4rem;
    }

    .proverbio-texto {
        font-size: 1.6rem;
    }

    .proverbio-cita {
        font-size: 0.9rem;
    }
}


/* ------------------ */
/* SECCIÓN ITINERARIO */
/* ------------------ */

.section-itinerario {
    padding: 4.5rem 1.5rem 5rem;
    background: var(--bg-main);
    /*border-top: 1px solid rgba(212, 160, 23, 0.2);*/
    /* Separador sutil */
    text-align: center;
}

body.theme-dark .section-itinerario {
    border-top: 1px solid rgba(231, 195, 108, 0.2);
}

.itinerario-inner {
    max-width: 600px;
    /* Más angosto para la línea de tiempo */
    margin: 0 auto;
}

.itinerario-titulo-seccion {
    font-family: "Playfair Display", serif;
    font-size: 1.8rem;
    color: var(--blue-main);
    margin-bottom: 2.5rem;
}

.itinerario-timeline {
    position: relative;
    /* La línea vertical de la timeline */
    border-left: 2px solid var(--gold-main);
    margin: 0 auto 2.5rem auto;
    padding: 1rem 0;
}

body.theme-dark .itinerario-timeline {
    border-left-color: rgba(231, 195, 108, 0.7);
}

.itinerario-evento {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0.75rem 0 0.75rem 3.5rem;
    /* Espacio para el ícono */
}

.itinerario-hora {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-main);
    width: 80px;
    /* Ancho fijo para alinear */
    text-align: right;
    position: absolute;
    left: -100px;
    /* A la izquierda de la línea */
}

.itinerario-icono {
    font-size: 1.5rem;
    line-height: 1;
    position: absolute;
    left: -21px;
    /* Centrado sobre la línea */
    background: var(--bg-main);
    /* Para tapar la línea */
    padding: 0 4px;
}

body.theme-dark .itinerario-icono {
    background: var(--bg-main);
    /* Hereda el fondo oscuro */
}

.itinerario-descripcion {
    font-family: "Playfair Display", serif;
    font-size: 1.3rem;
    color: var(--blue-main);
    font-weight: 600;
    text-align: left;
}

.itinerario-nota {
    font-family: "Poppins", sans-serif;
    font-size: 0.95rem;
    color: var(--text-main);
    line-height: 1.7;
    opacity: 0.9;
    max-width: 400px;
    margin: 0 auto;
}

/* Ajustes en móvil */
@media (max-width: 768px) {
    .itinerario-titulo-seccion {
        font-size: 1.6rem;
    }

    .itinerario-timeline {
        /* En móvil, la línea se pega a la izquierda */
        margin-left: 20px;
    }

    .itinerario-evento {
        padding-left: 3rem;
        /* Menos espacio */
    }

    .itinerario-hora {
        /* La hora se pone encima de la descripción */
        position: static;
        width: auto;
        text-align: left;
        font-size: 0.9rem;
        color: var(--rose-red);
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .itinerario-descripcion {
        font-size: 1.2rem;
    }

    /* En móvil, los eventos se ven como bloque */
    .itinerario-evento {
        flex-direction: column;
        align-items: flex-start;
        /* Alineado a la izquierda */
    }
}

/* ------------------ */
/* SECCIÓN CÓDIGO DE VESTIMENTA (¡ACTUALIZADA!) */
/* ------------------ */

.section-dresscode {
    padding: 4.5rem 1.5rem 5rem;
    background: var(--bg-main);
    text-align: center;
}

/* (El border-top en modo oscuro se quita, ya no es necesario) */
body.theme-dark .section-dresscode {
    border-top: none;
}

.dresscode-inner {
    max-width: 650px;
    margin: 0 auto;
}

.dresscode-titulo {
    font-family: "Playfair Display", serif;
    font-size: 1.8rem;
    color: var(--blue-main);
    margin-bottom: 1rem;
}

.dresscode-subtitulo {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    color: var(--text-main);
    line-height: 1.7;
    opacity: 0.9;
    margin-bottom: 2.5rem;
    /* Más espacio para el nuevo grid */
}

/* (NUEVO) Grid para las columnas */
.dresscode-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2.5rem;
    /* Espacio antes de la nota de reserva */
}

/* (NUEVO) Columna individual */
.dresscode-columna {
    flex: 1;
    min-width: 150px;
    /* Ancho mínimo */
    text-align: center;
}

/* (ACTUALIZADO) Estilo de la IMAGEN */
.dresscode-imagen {
    width: 100px;
    /* Tamaño del círculo */
    height: 100px;
    margin: 0 auto 1rem auto;
    /* Centrado y con espacio abajo */
    border-radius: 50%;
    /* Círculo perfecto */
    overflow: hidden;
    /* Para que la imagen no se salga */
    border: 3px solid var(--gold-main);
    /* Borde dorado */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Estilo para la imagen DENTRO del círculo */
.dresscode-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Para que la imagen rellene el círculo */
}

/* (NUEVO) Título de la columna */
.dresscode-col-titulo {
    font-family: "Playfair Display", serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.25rem;
}

/* (NUEVO) Descripción de la columna */
.dresscode-col-desc {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    color: var(--text-main);
    opacity: 0.8;
}

/* La tarjeta de reserva se mantiene */
.dresscode-reserva {
    font-family: "Playfair Display", serif;
    font-size: 1.3rem;
    color: var(--text-main);
    font-weight: 600;
    line-height: 1.6;
    background: var(--bg-main);
    border: 2px solid var(--gold-main);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

body.theme-dark .dresscode-reserva {
    background: rgba(12, 18, 48, 0.96);
    border-color: rgba(231, 195, 108, 0.7);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* Colores destacados (se mantienen) */
.dresscode-reserva .color-rojo {
    color: var(--rose-red);
    font-weight: 700;
}

.dresscode-reserva .color-dorado {
    color: var(--gold-main);
    font-weight: 700;
}

/* Ajustes en móvil */
@media (max-width: 768px) {
    .section-dresscode {
        padding: 3.5rem 1.25rem 4rem;
    }

    .dresscode-titulo {
        font-size: 1.6rem;
    }

    .dresscode-subtitulo {
        font-size: 0.95rem;
    }

    .dresscode-grid {
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .dresscode-icon {
        font-size: 2.5rem;
    }

    .dresscode-col-titulo {
        font-size: 1.1rem;
    }

    .dresscode-col-desc {
        font-size: 0.9rem;
    }

    .dresscode-reserva {
        font-size: 1.1rem;
        padding: 1.25rem 1.5rem;
    }
}

/* ------------------ */
/* SECCIÓN REGALOS (Lluvia de Sobres) */
/* ------------------ */

.section-regalos {
    padding: 4.5rem 1.5rem 5rem;
    background: var(--bg-main);
    text-align: center;
    position: relative;
    overflow: hidden;
}

body.theme-dark .section-regalos {
    border-top: 1px solid rgba(231, 195, 108, 0.2);
}

.regalos-inner {
    max-width: 650px;
    /* Ancho medio */
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.regalos-titulo {
    font-family: "Playfair Display", serif;
    font-size: 1.8rem;
    color: var(--blue-main);
    margin-bottom: 1rem;
}

.regalos-subtitulo {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    color: var(--text-main);
    line-height: 1.7;
    opacity: 0.9;
    margin-bottom: 2rem;
}

/* Usamos un estilo de tarjeta idéntico al de dresscode */
.regalos-opcion {
    font-family: "Playfair Display", serif;
    /* (Se quitan los estilos de fuente de aquí) */
    line-height: 1.6;
    background: var(--bg-main);
    border: 2px solid var(--gold-main);
    border-radius: 20px;

    /* === ACTUALIZADO === */
    padding: 2rem 2rem 1.5rem;
    /* Más padding arriba */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);

    /* === NUEVO === */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease;
    /* Efecto extra */
}

/* Efecto hover sutil */
.regalos-opcion:hover {
    transform: translateY(-5px);
}

/* === NUEVO: Icono dentro de la tarjeta === */
.regalos-opcion-icono {
    font-size: 2.5rem;
    color: var(--blue-main);
    margin-bottom: 1.25rem;
}

/* === NUEVO: Texto dentro de la tarjeta === */
/* (Movimos los estilos de fuente de .regalos-opcion aquí) */
.regalos-opcion-texto {
    font-size: 1.3rem;
    color: var(--text-main);
    font-weight: 600;
    line-height: 1.6;
    margin: 0;
}

body.theme-dark .regalos-opcion {
    background: rgba(12, 18, 48, 0.96);
    border-color: rgba(231, 195, 108, 0.7);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* === AÑADIR ESTO === */
body.theme-dark .regalos-opcion-icono {
    color: var(--gold-main);
}

/* Destacamos "Lluvia de Sobres" */
.regalos-opcion .lluvia-sobres {
    color: var(--rose-red);
    font-weight: 700;
}

/* === NUEVO: Animación de fondo "Lluvia de Sobres" === */

.regalos-animacion-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ESTILOS DEL <span> (EL CONTENEDOR QUE CAE) */
.sobre {
    position: absolute;
    top: -50px;
    
    /* Estas propiedades las heredará el ícono ::before */
    font-size: 1.1rem;
    color: var(--gold-main);
    opacity: 0; 
    
    /* Estas propiedades animan el <span> completo */
    animation-name: lluvia-caer;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Usamos ::before para DIBUJAR el ícono dentro del <span> */
.sobre::before {
    /* === ¡ESTAS 3 LÍNEAS SE MOVIERON AQUÍ! === */
    content: '\f0e0'; 
    font-family: "Font Awesome 5 Free";
    font-weight: 900; 
    /* ======================================= */
}

/* Keyframes de la caída */
@keyframes lluvia-caer {
    0% {
        transform: translateY(0) rotate(0);
        opacity: 0;
    }

    10% {
        opacity: 0.3;
        /* Aparece sutilmente */
    }

    90% {
        opacity: 0.3;
        /* Sigue visible */
    }

    100% {
        transform: translateY(120vh) rotate(250deg);
        opacity: 0;
        /* Desaparece al final */
    }
}

/* Randomización de cada sobre */
.sobre:nth-child(1) {
    left: 10%;
    animation-duration: 15s;
    animation-delay: 0s;
}

.sobre:nth-child(2) {
    left: 20%;
    animation-duration: 10s;
    animation-delay: 2s;
}

.sobre:nth-child(3) {
    left: 30%;
    animation-duration: 12s;
    animation-delay: 5s;
}

.sobre:nth-child(4) {
    left: 40%;
    animation-duration: 9s;
    animation-delay: 7s;
}

.sobre:nth-child(5) {
    left: 50%;
    animation-duration: 13s;
    animation-delay: 1s;
}

.sobre:nth-child(6) {
    left: 60%;
    animation-duration: 11s;
    animation-delay: 4s;
}

.sobre:nth-child(7) {
    left: 70%;
    animation-duration: 10s;
    animation-delay: 8s;
}

.sobre:nth-child(8) {
    left: 80%;
    animation-duration: 14s;
    animation-delay: 3s;
}

.sobre:nth-child(9) {
    left: 90%;
    animation-duration: 12s;
    animation-delay: 6s;
}

.sobre:nth-child(10) {
    left: 5%;
    animation-duration: 10s;
    animation-delay: 10s;
}

/* Ajustes en móvil */
@media (max-width: 768px) {
    .section-regalos {
        padding: 3.5rem 1.25rem 4rem;
    }

    .regalos-titulo {
        font-size: 1.6rem;
    }

    .regalos-subtitulo {
        font-size: 0.95rem;
    }

    .regalos-opcion {
        font-size: 1.1rem;
        padding: 1.25rem 1.5rem;
    }
}

/* ------------------ */
/* SECCIÓN RSVP (Confirmación) */
/* ------------------ */

.section-rsvp {
    padding: 4.5rem 1.5rem 5rem;
    /* Usamos el azul como fondo para que esta sección destaque */
    background: var(--blue-main);
    color: #ffffff;
    /* Texto blanco sobre fondo azul */
    text-align: center;
    position: relative;
}

/* Cambiamos los colores de las variables para el modo oscuro */
body.theme-dark .section-rsvp {
    background: var(--bg-main);
    /* En modo oscuro, usamos el fondo principal */
    color: var(--text-main);
}

.rsvp-inner {
    max-width: 600px;
    /* Ancho angosto para centrar la atención */
    margin: 0 auto;
}

.rsvp-titulo {
    font-family: "Great Vibes", cursive;
    /* Fuente elegante */
    font-size: 3rem;
    color: #ffffff;
    margin-bottom: 1rem;
    font-weight: 500;
}

body.theme-dark .rsvp-titulo {
    color: var(--gold-main);
    /* Dorado en modo oscuro */
}

.rsvp-subtitulo {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    opacity: 0.95;
    margin-bottom: 2.5rem;
}

.rsvp-boton {
    display: inline-block;
    background-color: #ffffff;
    /* Botón blanco */
    color: var(--blue-main);
    /* Texto azul */
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    padding: 1rem 2.5rem;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* Ajustes de botón para modo oscuro */
body.theme-dark .rsvp-boton {
    background-color: var(--rose-red);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(176, 18, 44, 0.4);
}

.rsvp-boton:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

body.theme-dark .rsvp-boton:hover {
    background-color: #f0625e;
    box-shadow: 0 12px 30px rgba(176, 18, 44, 0.5);
}

.rsvp-contacto {
    font-family: "Poppins", sans-serif;
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 1.5rem;
}

/* Ajustes en móvil */
@media (max-width: 768px) {
    .section-rsvp {
        padding: 4rem 1.25rem;
    }

    .rsvp-titulo {
        font-size: 2.5rem;
    }

    .rsvp-subtitulo {
        font-size: 0.95rem;
    }

    .rsvp-boton {
        padding: 0.9rem 2rem;
        font-size: 0.95rem;
    }
}

/* ------------------ */
/* SECCIÓN RSVP - NUEVO FORMULARIO */
/* ------------------ */

.rsvp-form {
    width: 100%;
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Espacio entre los campos del formulario */
}

.rsvp-form-group {
    text-align: left;
}

.rsvp-label {
    font-family: "Poppins", sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    display: block;
    color: #ffffff; /* Color de etiqueta en modo día */
}

body.theme-dark .rsvp-label {
    color: var(--text-main); /* Color de etiqueta en modo oscuro */
}

/* Estilo del campo de texto */
.rsvp-input {
    width: 100%;
    padding: 0.9rem 1.25rem;
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    color: var(--blue-main);
    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.rsvp-input:focus {
    outline: none;
    border-color: var(--gold-main);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.4);
}

body.theme-dark .rsvp-input {
    background: var(--bg-main);
    color: var(--text-main);
    border: 2px solid rgba(231, 195, 108, 0.7);
}

body.theme-dark .rsvp-input:focus {
    border-color: var(--gold-main);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.5);
}

/* Estilos para los Radio Buttons personalizados */
.rsvp-radio-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.rsvp-radio-option {
    display: flex;
    align-items: center;
}

/* Ocultamos el radio button real */
.rsvp-radio-option input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

/* Estilo de la etiqueta que simula el botón */
.rsvp-radio-option label {
    font-family: "Poppins", sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    border: 2px solid rgba(255, 255, 255, 0.6);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 999px; /* Píldora */
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Estilo modo oscuro de la etiqueta */
body.theme-dark .rsvp-radio-option label {
    border-color: rgba(231, 195, 108, 0.7);
    color: var(--text-main);
}

/* Estilo cuando el radio está SELECCIONADO */
.rsvp-radio-option input[type="radio"]:checked + label {
    background: #ffffff;
    color: var(--blue-main);
    border-color: #ffffff;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* Estilo seleccionado en modo oscuro */
body.theme-dark .rsvp-radio-option input[type="radio"]:checked + label {
    background: var(--gold-main);
    color: #0C1230;
    border-color: var(--gold-main);
}

/* Estilo del botón de envío (reutilizando rsvp-boton) */
.rsvp-boton {
    border: none;
    cursor: pointer;
    margin-top: 1rem; /* Espacio extra arriba */
}

/* ------------------ */
/* Animación de Confeti */
/* ------------------ */

.confetti {
    position: fixed; /* Se posiciona relativo a la ventana */
    width: 8px;
    height: 8px;
    background-color: var(--gold-main); 
    border-radius: 50%;
    transform-origin: center;
    pointer-events: none; /* Ignorar clics */
    z-index: 9999; /* Por encima de todo */
    opacity: 0; /* Empezar invisible (JS lo activa) */
    
    /* ¡Importante! Quitar cualquier 'animation' de aquí */
}

/* Colores adicionales */
.confetti.red {
    background-color: var(--rose-red); /* Usando tu variable correcta */
}
.confetti.blue {
    background-color: var(--blue-main); 
}
.confetti.square {
    border-radius: 0;
    width: 10px;
    height: 10px;
}

/* ¡NUEVA ANIMACIÓN DE EXPLOSIÓN! */
@keyframes confetti-explode {
    0% {
        /* El 'transform' inicial (escala) lo pone JS */
        opacity: 1;
    }
    100% {
        /* JS define el destino usando estas variables */
        transform: translate(var(--final-x), var(--final-y)) rotate(var(--final-rotate)) scale(0.3);
        opacity: 0;
    }
}

/* ------------------ */
/* Animación de "No" - Emoji Triste */
/* ------------------ */

.sad-emoji {
    position: fixed; /* Posición relativa a la ventana */
    font-size: 2.5rem; /* Tamaño del emoji */
    text-shadow: 0 2px 5px rgba(0,0,0,0.2);
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    /* Animación de 2.5 segundos */
    animation: float-away 2.5s ease-out forwards;
}

@keyframes float-away {
    0% {
        /* Inicia pequeño y transparente */
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }
    20% {
        /* Crece y se hace visible */
        transform: translateY(-20px) scale(1.1);
        opacity: 1;
    }
    100% {
        /* Flota 200px hacia arriba, se encoge y desaparece */
        transform: translateY(-200px) scale(0.5);
        opacity: 0;
    }
}

/* ------------------ */
/* SECCIÓN CIERRE (¡ACTUALIZADA!) */
/* ------------------ */

.section-cierre {
    padding: 6rem 1.5rem 5rem;
    position: relative;
    text-align: center;
    
    /* === CAMBIO: Usamos el fondo principal === */
    background: var(--bg-main); 
}

/* Ajustes para Modo Oscuro */
body.theme-dark .section-cierre {
    background: var(--bg-main);
    border-top: 1px solid rgba(231, 195, 108, 0.2);
}

/* El contenido (texto y firma) */
.cierre-inner {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
    
    /* === CAMBIO: Color de texto principal === */
    color: var(--text-main); 
}

.cierre-texto {
    font-family: "Playfair Display", serif;
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.7;
    margin-bottom: 2rem;
    opacity: 0.95;
    
    /* === CAMBIO: Color heredado (var(--text-main)) === */
}

.cierre-firma {
    font-family: "Great Vibes", cursive;
    font-size: 3.5rem;
    color: var(--gold-main);
    display: block;
    
    /* === CAMBIO: Sombra sutil para fondo claro === */
    text-shadow: 0 2px 8px rgba(212, 160, 23, 0.2);
}

body.theme-dark .cierre-firma {
    text-shadow: 0 0 15px rgba(231, 195, 108, 0.7);
}

/* === NUEVO: Estilos para la imagen de cierre === */
.cierre-imagen {
    margin-top: 3rem; /* Espacio desde la firma */
    text-align: center;
}

.cierre-imagen img {
    max-width: 100%;
    width: 600px; /* Ancho máximo de la imagen */
    height: auto;
    border-radius: 20px;
    border: 3px solid var(--gold-main);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

body.theme-dark .cierre-imagen img {
    border-color: rgba(231, 195, 108, 0.7);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}


/* Ajustes en móvil */
@media (max-width: 768px) {
    .section-cierre {
        padding: 5rem 1.25rem 4rem;
    }

    .cierre-texto {
        font-size: 1.2rem;
    }

    .cierre-firma {
        font-size: 3rem;
    }
    
    .cierre-imagen {
        margin-top: 2.5rem;
    }
}

/* NOTA: El .section-cierre::before (overlay) 
   se ha eliminado ya que no es necesario.
*/

/* ------------------ */
/* FOOTER FESTICLICK */
/* ------------------ */

.festiclick-footer {
    padding: 2.5rem 1.5rem;
    /* Usamos el azul principal como fondo en modo día */
    background: var(--gold-main);
    text-align: center;
}

.festiclick-footer p {
    font-family: "Poppins", sans-serif;
    font-size: 0.9rem;
    color: #ffffff;
    /* Texto blanco en modo día */
    opacity: 0.8;
    margin: 0;
}

.festiclick-footer a {
    color: #ffffff;
    /* Link blanco */
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.festiclick-footer a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Ajustes para Modo Oscuro */
body.theme-dark .festiclick-footer {
    /* Usamos el fondo principal oscuro */
    background: var(--bg-main);
    border-top: 1px solid rgba(231, 195, 108, 0.2);
}

body.theme-dark .festiclick-footer p {
    color: var(--text-main);
    /* Texto claro de la paleta */
    opacity: 0.7;
}

body.theme-dark .festiclick-footer a {
    color: var(--gold-main);
    /* Link dorado en modo oscuro */
}

/* ------------------ */
/* SEPARADOR DE ROSAS (SOLUCIÓN DEFINITIVA) */
/* ------------------ */

.section-separator {
    position: relative;
    z-index: 10;
    /* Aseguramos que esté sobre todo */
    text-align: center;
    overflow: visible;
    /* IMPORTANTE: Para que la imagen pueda sobresalir un poco */
    pointer-events: none;
    /* No clickable */

    /* Lo haremos transparente, su único objetivo es centrar la imagen */
    background: transparent;

    /* El alto de este div ahora solo lo define el 'margin' de la imagen */
    padding: 0;
    height: 0;
    /* No tiene altura propia */
}

/* La imagen de las rosas es la que se posiciona */
.section-separator img {
    max-width: 100%;
    width: 350px;
    height: auto;
    display: block;

    /* === ¡CAMBIO CLAVE AQUÍ! === */
    /* - El margin-top: -60px jala la imagen hacia ARRIBA
       para que se superponga en la sección anterior.
     - El margin-bottom: 0; (o quitándolo) evita
       que el contenido de abajo se suba y se encime.
    */
    margin: -60px auto 0;
    /* Ajustado de -60px auto -60px auto */

    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
}

body.theme-dark .section-separator img {
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3));
}

/* Ajustes en móvil */
@media (max-width: 768px) {
    .section-separator img {
        width: 280px;

        /* === ¡CAMBIO CLAVE AQUÍ TAMBIÉN! === */
        margin: -40px auto 0;
        /* Ajustado de -40px auto -40px auto */
    }
}

/* ------------------ */
/* CALENDARIO - BOTÓN AGENDAR */
/* ------------------ */

.calendario-boton {
    display: inline-block;
    background-color: var(--rose-red);
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    padding: 0.8rem 1.8rem;
    border-radius: 999px;
    margin-top: 2.5rem;
    /* Espacio desde el widget */
    transition: all 0.3s ease;
}

.calendario-boton:hover {
    background-color: #9c1026;
    /* Rojo más oscuro */
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

body.theme-dark .calendario-boton:hover {
    background-color: #f2807e;
    /* Rojo más claro */
}

/* Opcional: Ocultar si la fecha no es válida */
.calendario-boton:disabled,
.calendario-boton[disabled] {
    opacity: 0.5;
    pointer-events: none;

}

/* ------------------ */
/* SOBRE INTERACTIVO - CÓDIGO FINAL: POSICIÓN DE SOLAPA CORREGIDA */
/* ------------------ */

#intro-overlay {
    /* Ocupa y centra el 100% de la ventana */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 1s ease-out, visibility 1s ease-out;

    background-image: url("../img/fondo-m.png?v=jht4utfk");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#intro-overlay.abierto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ------------------------------------------- */
/* === CLASES DE CONTROL Y BASE COMÚN === */
/* ------------------------------------------- */

.sobre-container {
    position: relative; 
    overflow: hidden;
}

/* Estilos comunes para base y tapa */
.sobre-base-clase,
.sobre-tapa-clase {
    position: absolute;
    width: 100%;
}

.sobre-base-clase img,
.sobre-tapa-clase img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill; /* Forzamos a llenar el espacio definido */
    font-size: 0;
}

.sobre-tapa-clase {
    z-index: 100;
    cursor: pointer;
    transition: transform 1s ease-in-out;
}


/* ------------------------------------------- */
/* === MODO MÓVIL (DEFAULT / VERTICAL) === */
/* ------------------------------------------- */

.sobre-version-web {
    display: none; /* Ocultar versión web por defecto */
}

.sobre-version-movil {
    /* Dimensiones para móvil */
    width: 360px; 
    max-width: 90vw; 
    height: 500px; 
    max-height: 90vh;
}

/* Alineación de la tapa vertical */
#sobre-tapa-movil {
    height: 543px; 
    /*transform: translateY(265px); */
}

/* Animación de apertura (Vertical) */
#sobre-tapa-movil.levantar {
    /* CORRECCIÓN: Traslación horizontal hacia la izquierda */
    transform: translateX(-100%); 
    opacity: 0;
    /* Quitamos rotateX(15deg) para que se vea más plano */
}

/* ------------------------------------------- */
/* === MODO WEB (HORIZONTAL) === */
/* ------------------------------------------- */

@media (min-width: 769px) {

    #intro-overlay {
        background-image: url("../img/fondo.png?v=jht4utfk");
    }
    .sobre-version-movil {
        display: none; /* Ocultar versión móvil */
    }

    .sobre-version-web {
        display: block; /* Mostrar versión web */
        
        /* Dimensiones horizontales: 80% de alto y ancho proporcional */
        height: 80vh; 
        width: calc(80vh * (700 / 500)); 
        max-width: 900px;
        max-height: 650px;
    }

    /* Alineación de la tapa horizontal */
    #sobre-tapa-web {
        /* Altura de la solapa */
        height:500px; 
        
        /* TRASLACIÓN CORREGIDA FINAL: Subimos la tapa 
           (valor ajustado de 270px a 200px para la nueva proporción) */
        /*transform: translateY(200px); */
    }

    /* Animación de apertura (Horizontal) */
    #sobre-tapa-web.levantar {
        transform: translateY(-100px) rotateX(15deg);
        opacity: 0;
    }

    /* Forzamos a la imagen a estirarse */
    #sobre-tapa-web img {
        object-fit: fill;
    }
}


/* ------------------------------------------- */
/* === ESTILOS DE CONTENIDO INTERNO === */
/* ------------------------------------------- */

/* Estilos comunes para ocultar/mostrar contenidos al abrir */
.sobre-version-web #texto-intro-web, 
.sobre-version-web #sello-rosa-web,
.sobre-version-web #click-indicator-web,
.sobre-version-movil #texto-intro, 
.sobre-version-movil #sello-rosa,
.sobre-version-movil #click-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    z-index: 50;
}

/* Estilos para texto, rosa e indicador (se mantienen) */

.sobre-version-web #sello-rosa-web,
.sobre-version-movil #sello-rosa {
    opacity: 0;
    animation: fadeIn 1s forwards;
    animation-delay: 1.5s;
}

.sobre-version-web #click-indicator-web,
.sobre-version-movil #click-indicator {
    bottom: 25%;
    opacity: 0;
    animation: pulse-click 1.5s infinite;
    animation-delay: 2s;
}

/* ------------------------------------------- */
/* === ESTILOS DEL SELLO DE APERTURA (ACTUALIZADO CON PULSO) === */
/* ------------------------------------------- */

.sello-apertura-clase {
    position: absolute;
    width: 60px; 
    height: 60px;
    z-index: 120;
    top: 45%;
    left: 55%;
    cursor: pointer; /* Añadimos cursor pointer para indicar interactividad */
    
    /* Añadimos un borde redondeado para que el box-shadow de pulso se vea bien */
    border-radius: 50%; 
    
    /* Aplicamos la animación */
    animation: pulse-sello 2s infinite ease-in-out;
    
    /* Animación de desaparición (se mantiene) */
    transition: opacity 0.3s ease, transform 0.5s ease;
    
    /* Quitamos pointer-events: none, ya que el sello ES el botón de clic. */
    /* Si el clic se asigna a la tapa, esto no es necesario.
       Si el clic se asigna al sello (que es lo ideal), déjalo.
       Como el JS apunta a la tapa, mantendremos el cursor pointer en el sello.
    */
}

.sello-apertura-clase img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 2. Posicionamiento en WEB (Horizontal) - Aumentamos el tamaño y velocidad de pulso */
@media (min-width: 769px) {
    #sello-apertura-web {
        top: 60%;
        left: 45%;
        transform: translate(calc(-50% + 5px), 160px); 
        width: 80px; 
        height: 80px;
        
        /* Hacemos el pulso un poco más notable en desktop */
        animation-duration: 1.8s;
    }
}

/* Animación: Desaparición al abrir el sobre */
#sobre-tapa-movil.levantar ~ #sello-apertura-movil,
#sobre-tapa-web.levantar ~ #sello-apertura-web {
    opacity: 0;
    transform: scale(0.5); /* Se encoge al desaparecer */
}

/* --- Bloque de estilos de la base (.sobre-base-clase) --- */

.sobre-base-clase {
    /* CORRECCIÓN: La transición debe ser claramente de 1s */
    transition: transform 1s ease-in-out, opacity 0.4s ease 0.6s; /* Le damos un ligero retraso al opacity */
}

/* --- Bloque de animación de la tapa (Aseguramos que la opacidad también sea de 1s) --- */

.sobre-tapa-clase {
    z-index: 100;
    cursor: pointer;
    /* CORRECCIÓN: Aseguramos que la transición de 1s maneje *ambos* movimientos */
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

/* --- Bloque de animación de salida (.move-out) --- */

#sobre-base-movil.move-out {
    /* CORRECCIÓN: Traslación horizontal hacia la derecha */
    transform: translateX(100%); 
    opacity: 0;
}

/* 2. WEB: Efecto Cajón (Hacia Abajo) */
@media (min-width: 769px) {
    #sobre-base-web.move-out {
        /* Traslación vertical hacia abajo (sale de la pantalla) */
        transform: translateY(100vh); 
        opacity: 0; 
    }
}

/* --- NUEVA ANIMACIÓN: PULSO PARA EL SELLO --- */
@keyframes pulse-sello {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(176, 18, 44, 0.4); /* rose-red semitransparente */
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(176, 18, 44, 0); /* Sombra transparente expandida */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(176, 18, 44, 0.4);
    }
}