/* ========================================================= */
/* 🛠️ Carga de la fuente Callisten.woff (AÑADIDO) */
/* ========================================================= */
@font-face {
    font-family: 'Callisten';
    /* ⚠️ Ajusta la ruta si 'Callisten.woff' no está en el directorio raíz. 
       Ej: url('fonts/Callisten.woff') format('woff'); */
    src: url('font/Callisten.woff') format('woff'); 
    font-weight: normal;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Alice&family=Cinzel:wght@400;600;700&family=Parisienne&family=Monsieur+La+Doulaise&family=Tangerine:wght@400;700&family=Rouge+Script&family=Italianno&family=Sacramento&family=Marck+Script&family=MonteCarlo&family=Allura&family=Pinyon+Script&family=Great+Vibes&family=Alex+Brush&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Dancing+Script:wght@400;700&family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Open+Sans:wght@400&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
    --primary-color: #1b3b6f;
    --primary-color-rgb: 27, 59, 111;
    --primary-color-hover: #112344;

    /* 🧊 ESTILO LIQUID GLASS (CRISTAL LÍQUIDO) PARA BOTONES EN AZUL ALICIA TIM BURTON */
    --liquid-glass-bg: linear-gradient(135deg, rgba(56, 140, 215, 0.90) 0%, rgba(27, 59, 111, 0.92) 50%, rgba(14, 32, 60, 0.96) 100%);
    --liquid-glass-hover: linear-gradient(135deg, rgba(82, 164, 240, 0.96) 0%, rgba(37, 78, 144, 0.96) 50%, rgba(18, 42, 80, 0.98) 100%);
    --liquid-glass-border: 1px solid rgba(255, 255, 255, 0.65);
    --liquid-glass-border-hover: 1px solid rgba(255, 255, 255, 0.9);
    --liquid-glass-inner-shadow: inset 0 1px 2px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 2px 0 rgba(0, 0, 0, 0.08);
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    background-color: #eef2f7;
    background-image: radial-gradient(rgba(27, 59, 111, 0.28) 1px, transparent 1px);
    background-size: 24px 24px;
    overflow-x: hidden;
    color: #333;
    line-height: 1.6;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
}

.mobile-wrapper {
    width: 100%;
    max-width: 500px;
    background-color: #fafafa;
    min-height: 100vh;
    box-shadow: 0 0 40px rgba(27, 59, 111, 0.22);
    position: relative;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* <<<< CAMBIO CLAVE 2: Clase añadida por JS para mostrar cuando el sobre esté listo >>>> */
body.loaded {
    visibility: visible;
    opacity: 1;
}


/* ========================================================= */
/* 🎁 OVERLAY DE APERTURA (PORTADA INTERACTIVA) */
/* ========================================================= */

#overlay-intro {
    /* ⚙️ CONTROLES MANUALES PARA EL NOMBRE DE LOS NOVIOS (intro-couple-name) */
    --couple-top: 25%;               /* Posición vertical en % (25% lo ubica arriba del sello) */
    --couple-offset-y: 0px;          /* Ajuste fino vertical en px (-10px sube, +10px baja) */
    --couple-left: 50%;              /* Posición horizontal (50% centrado) */
    --couple-width: 90%;             /* Ancho del contenedor */
    --couple-color: #1b3b6f;         /* Color del texto de los novios */
    --couple-size: 2.9rem;           /* Tamaño de letra (hazlo más grande o pequeño) */
    --couple-weight: 700;            /* Grosor de letra (600, 700, bold, etc.) */

    /* ========================================================= */
    /* 🎯 CONTROLES MANUALES DEL OBJETO INTRO (intro.png / SELLO) */
    /* Modifica estos valores para ajustar tamaño y posición:    */
    /* ========================================================= */
    --intro-seal-top: 53%;          /* ↕️ ARRIBA / ABAJO (%): 53% centrado armónico */
    --intro-seal-offset-y: 4px;     /* ↕️ AJUSTE FINO (PX): +4px */
    --intro-seal-left: 50%;         /* ↔️ IZQUIERDA / DERECHA: 50% centrado exacto */
    --intro-seal-width: 95%;        /* 📱 ANCHO EN PANTALLA MÓVIL: Aumentado (un poco más grande) */
    --intro-seal-max-width: 460px;  /* 🔍 TAMAÑO MÁXIMO EN PIXELES: Aumentado de 420px a 460px */

    /* ⚙️ CONTROLES MANUALES PARA EL TEXTO DEL INVITADO (intro-guest-info) */
    --guest-top: 80%;               /* Posición vertical en %: Subido de 83% a 80% */
    --guest-offset-y: 5px;          /* Ajuste fino vertical en px: Subido de 20px a 5px */
    --guest-left: 50%;              /* Posición horizontal en % (50% centrado) */
    --guest-width: 90%;             /* Ancho del contenedor de texto */
    --guest-color: #ffffff;         /* Color del texto del invitado (blanco) */
    --guest-name-size: 2.1rem;      /* Tamaño de letra base del nombre / ¡Estás invitado! */
    --guest-text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65), 0 0 18px rgba(0, 0, 0, 0.45); /* Sombra de contraste para texto blanco */
    --guest-line-height: 1.08;      /* Interlineado de 1 enter sin espacios extras */
    --guest-passes-size: 0.67rem;   /* Tamaño de letra de los pases asignados */
    --guest-passes-color: #ffffff;  /* Color del texto de pases */
    --guest-passes-bg: rgba(0, 0, 0, 0.45); /* Fondo elegante de la pastilla de pases */
    --guest-passes-border: 1px solid rgba(255, 255, 255, 0.35); /* Borde de la pastilla */
    --guest-passes-margin-top: 7px; /* Espacio entre el nombre y el texto de pases */

    --o1-top: 50px;
    --o1-right: 0px;
    --o1-width: 95%;
    --o1-max-width: 420px;

    --o2-bottom: 50px;
    --o2-left: 0px;
    --o2-width: 80%;
    --o2-max-width: 390px;

    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    height: 100%;
    z-index: 999999; 
    pointer-events: auto; 
    cursor: pointer;
    background-color: #fafafa;
    background-image: url('elementos/fondo1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    transition: opacity 1s ease-out, filter 1s ease-out, visibility 1s ease-out;
}

/* 🌅 CAPA DE TRANSICIÓN INTERMEDIA (FONDO 2) */
.intro-transition-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('elementos/fondo2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
    z-index: 5;
    overflow: hidden;
    transition: opacity 0.45s ease-out, visibility 0.45s ease-out;
    pointer-events: none;
}

#overlay-intro.transitioning-to-fondo2 .intro-transition-layer {
    opacity: 1;
    visibility: visible;
}

#overlay-intro.transitioning-to-fondo2 .intro-center,
#overlay-intro.transitioning-to-fondo2 .intro-guest-info {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.35s ease, transform 0.35s ease;
    transform: translate(-50%, calc(-50% + var(--intro-seal-offset-y, 4px))) scale(0.92);
}

/* 🐇 ELEMENTOS DEL TÚNEL (CONEJO Y CARTAS ALEJÁNDOSE AL CENTRO) */
.intro-tunnel-object {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 62%;
    max-width: 280px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 6;
    will-change: transform, opacity, filter;
}

.intro-tunnel-object img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
}

#overlay-intro.transitioning-to-fondo2 .intro-conejo {
    visibility: visible;
    animation: diveIntoTunnelConejo 1.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.25s forwards;
}

#overlay-intro.transitioning-to-fondo2 .intro-cartas {
    visibility: visible;
    animation: diveIntoTunnelCartas 1.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.60s forwards;
}

@keyframes diveIntoTunnelConejo {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.15);
        filter: blur(0px);
    }
    14% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0px);
    }
    55% {
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(0.50);
        filter: blur(1.5px);
    }
    85% {
        opacity: 0.30;
        transform: translate(-50%, -50%) scale(0.16);
        filter: blur(5px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.04);
        filter: blur(12px);
        visibility: hidden;
    }
}

@keyframes diveIntoTunnelCartas {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.15) rotate(0deg);
        filter: blur(0px);
    }
    14% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(4deg);
        filter: blur(0px);
    }
    55% {
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(0.50) rotate(-6deg);
        filter: blur(1.5px);
    }
    85% {
        opacity: 0.30;
        transform: translate(-50%, -50%) scale(0.16) rotate(12deg);
        filter: blur(5px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.04) rotate(20deg);
        filter: blur(12px);
        visibility: hidden;
    }
}

/* ✨ CANVAS DE PARTÍCULAS Y BRILLITOS PLATA Y ROSA */
#intro-particles-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* ✨ CANVAS GLOBAL DE ESTRELLAS PLATAS CAYENDO (DESDE SECCIÓN 3 EN ADELANTE) */
.silver-falling-stars-canvas {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    height: 100vh;
    pointer-events: none;
    z-index: 6;
    opacity: 0 !important;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

body.unlocked .silver-falling-stars-canvas,
.silver-falling-stars-canvas.active {
    opacity: 1 !important;
}

/* Ocultar el contenido interno de la invitación hasta que el usuario dé clic en el intro */
.mobile-wrapper > *:not(#overlay-intro) {
    opacity: 0;
    transition: opacity 0.8s ease 0.2s;
}

body.unlocked .mobile-wrapper > *:not(#overlay-intro) {
    opacity: 1;
}

.intro-couple-name {
    position: absolute;
    top: var(--couple-top, 25%);
    left: var(--couple-left, 50%);
    transform: translate(-50%, calc(-50% + var(--couple-offset-y, 0px)));
    width: var(--couple-width, 90%);
    z-index: 3;
    color: var(--couple-color, #1b3b6f);
    font-family: 'Parisienne', 'Dancing Script', 'Great Vibes', 'Allura', cursive;
    font-size: var(--couple-size, 2.9rem);
    font-weight: var(--couple-weight, 700);
    text-align: center;
    pointer-events: none;
    opacity: 1;
    margin: 0;
    line-height: 1.2;
}

.intro-guest-info {
    position: absolute;
    top: var(--guest-top, 80%);
    left: var(--guest-left, 50%);
    transform: translate(-50%, calc(-50% + var(--guest-offset-y, 5px)));
    width: var(--guest-width, 90%);
    z-index: 3;
    color: var(--guest-color, #ffffff);
    text-align: center;
    pointer-events: none;
    opacity: 1;
}

.intro-guest-name {
    font-family: 'Parisienne', 'Dancing Script', 'Great Vibes', 'Allura', cursive;
    font-size: var(--guest-name-size, 2.6rem);
    margin: 0;
    line-height: var(--guest-line-height, 1.08);
    color: var(--guest-color, #ffffff);
    font-weight: normal;
    text-align: center;
    text-shadow: var(--guest-text-shadow, 0 2px 10px rgba(0, 0, 0, 0.65), 0 0 18px rgba(0, 0, 0, 0.45));
}

.intro-guest-name.three-lines {
    font-size: calc(var(--guest-name-size, 2.6rem) * 0.88);
    line-height: 1.05;
}

.intro-guest-passes {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: var(--guest-passes-size, 0.67rem);
    margin: var(--guest-passes-margin-top, 7px) auto 0 auto;
    color: var(--guest-passes-color, #ffffff);
    font-weight: 600;
    letter-spacing: 0.4px;
    text-align: center;
    background-color: var(--guest-passes-bg, rgba(0, 0, 0, 0.45));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 3px 11px;
    border-radius: 12px;
    border: var(--guest-passes-border, 1px solid rgba(255, 255, 255, 0.35));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.intro-o1 {
    position: absolute;
    top: var(--o1-top);
    right: var(--o1-right);
    width: var(--o1-width);
    max-width: var(--o1-max-width);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.intro-o1 img {
    width: 100%;
    height: auto;
    display: block;
}

.intro-o2 {
    position: absolute;
    bottom: var(--o2-bottom);
    left: var(--o2-left);
    width: var(--o2-width);
    max-width: var(--o2-max-width);
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.25s, 
                transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.25s,
                filter 0.3s ease;
}

.intro-o2:hover {
    transform: translateY(0) scale(1.03);
    filter: drop-shadow(0 4px 20px #f0f7ff);
}

.intro-center {
    position: absolute;
    top: var(--intro-seal-top, 53%);
    left: var(--intro-seal-left, 50%);
    transform: translate(-50%, calc(-50% + var(--intro-seal-offset-y, 4px)));
    width: var(--intro-seal-width, 95%);
    max-width: var(--intro-seal-max-width, 460px);
    cursor: pointer;
    z-index: 2;
    opacity: 1;
    transition: filter 0.3s ease, transform 0.3s ease;
}

.intro-center:hover {
    transform: translate(-50%, calc(-50% + var(--intro-seal-offset-y, 4px))) scale(1.04);
    filter: drop-shadow(0 4px 20px #f0f7ff);
}

.intro-center img {
    width: 100%;
    height: auto;
    display: block;
}

body.loaded .intro-o1,
body.loaded .intro-o2 {
    opacity: 1;
}

#overlay-intro.is-hidden {
    opacity: 0;
    filter: blur(12px);
    pointer-events: none;
    visibility: hidden;
}

/* 🖼️ SECCIÓN 1 - O3 */
:root {
    --o3-top: 40%;
    --o3-left: 55%;
    --o3-width: 70%;
    --o3-max-width: 400px;
}

.banner-container {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    display: block;
}

.banner-image {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    display: block !important;
}

.section1-o3 {
    position: absolute;
    top: var(--o3-top);
    left: var(--o3-left);
    width: var(--o3-width);
    max-width: var(--o3-max-width);
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    filter: blur(10px);
    transition: opacity 1.5s ease-out, filter 1.5s ease-out, transform 1.5s ease-out;
}

.section1-o3 img {
    width: 100%;
    height: auto;
    display: block;
}

body.unlocked .section1-o3,
.hero-section.active .section1-o3 {
    opacity: 1;
    filter: blur(0);
}

/* 🖼️ SECCIÓN 2 - CONTADOR, FRASE, RELOJ Y SOMBRERO (XV AÑOS) */
:root {
    /* ⏰ CONTROLES MANUALES PARA OBJETO SUPERIOR (RELOJ.PNG) */
    --sec2-clock-top-width: 130px;       /* ↔️ Tamaño / Ancho (ej: 75px, 90px, 120px) */
    --sec2-clock-top-pos-y: -1%;         /* ↕️ Posición vertical superior (% o px, ej: 2%, 20px) */
    --sec2-clock-top-offset-y: 0px;     /* ↕️ Ajuste fino vertical (+ baja, - sube en px) */
    --sec2-clock-top-opacity: 1;        /* Opacidad del reloj superior (0 a 1) */

    /* 🎩 CONTROLES MANUALES PARA SOMBRERO INFERIOR */
    --sec2-hat-bottom-width: 125px;    /* ↔️ Tamaño / Ancho (ej: 80px, 105px, 130px) */
    --sec2-hat-bottom-pos-y: 5%;       /* ↕️ Posición vertical inferior (% o px) */
    --sec2-hat-bottom-offset-y: 0px;   /* ↕️ Ajuste fino vertical (+ sube, - baja en px) */
    --sec2-hat-bottom-opacity: 1;      /* Opacidad del sombrero inferior (0 a 1) */

    /* ⚙️ CONTROLES MANUALES DEL CONTADOR, TÍTULO Y FRASE */
    --countdown-top: 54%;               /* ↕️ Posición vertical en % (bajado más como se solicitó) */
    --countdown-offset-y: 8px;          /* ↕️ Ajuste fino vertical (+ baja más; - sube) */
    --countdown-left: 50%;
    
    /* 🎨 PALETA: AZUL MARINO ALICIA TIM BURTON CON DEGRADADO Y PLATA */
    --countdown-rose-base: #1b3b6f;     /* Color azul base: #1b3b6f */
    --countdown-title-gradient: linear-gradient(135deg, #1b3b6f 0%, #38bdf8 45%, #1b3b6f 75%, #162e56 100%);
    --countdown-number-gradient: linear-gradient(180deg, #38bdf8 0%, #1b3b6f 40%, #0c192e 100%);
    --countdown-tag-color: #8c6d3b;     /* Dorado envejecido para "CUENTA REGRESIVA" */
    --countdown-label-color: #786444;   /* Dorado tenue para las etiquetas (Días, Horas, Minutos, Segundos) */
    
    --countdown-title-size: 2.35rem;    /* Tamaño de letra "¡Solo Faltan!" */
    --countdown-number-size: 2.35em;    /* Tamaño de los números */
    --countdown-label-size: 0.75em;     /* Tamaño de las etiquetas */

    --countdown-phrase-top: 0px;        /* ↕️ Distancia entre el contador y la frase */
    --countdown-phrase-offset-y: 0px;   /* ↕️ Ajuste fino vertical de la frase */
    --countdown-phrase-color: #1b3b6f;  /* Tono azul marino de la frase #1b3b6f */
    --countdown-phrase-size: 1.05rem;   /* Tamaño de letra de la frase */
    --countdown-phrase-max-width: 370px;/* Ancho máximo ampliado para mejor distribución lateral */
}

/* ✨ CONTENEDOR Y CANVAS DE PARTÍCULAS PLATA EN SECCIÓN 1 (seccion1.jpg) */
.section1-banner-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.section1-particles-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
}

.section2-banner-container {
    position: relative;
    overflow: hidden;
}

/* ⏰ ESTILOS PARA RELOJ SUPERIOR (SECCIÓN 2) */
.sec2-clock-top-wrapper,
.sec2-hat-top-wrapper {
    position: absolute;
    top: var(--sec2-clock-top-pos-y, 2%);
    left: 50%;
    transform: translate(-50%, var(--sec2-clock-top-offset-y, 0px));
    z-index: 6;
    pointer-events: none;
    text-align: center;
    width: auto;
}

.sec2-clock-top-img,
.sec2-hat-top-img {
    width: var(--sec2-clock-top-width, 90px);
    max-width: 90vw;
    height: auto;
    display: block;
    margin: 0 auto;
    opacity: var(--sec2-clock-top-opacity, 1);
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35)) drop-shadow(0 2px 8px rgba(27, 59, 111, 0.28));
    transition: transform 0.3s ease;
}

/* 🎩 ESTILOS PARA SOMBRERO INFERIOR (SECCIÓN 2) */
.sec2-hat-bottom-wrapper {
    position: absolute;
    bottom: var(--sec2-hat-bottom-pos-y, 5%);
    left: 50%;
    transform: translate(-50%, calc(-1 * var(--sec2-hat-bottom-offset-y, 0px)));
    z-index: 6;
    pointer-events: none;
    text-align: center;
    width: auto;
}

.sec2-hat-bottom-img {
    width: var(--sec2-hat-bottom-width, 105px);
    max-width: 90vw;
    height: auto;
    display: block;
    margin: 0 auto;
    opacity: var(--sec2-hat-bottom-opacity, 1);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28)) drop-shadow(0 2px 6px rgba(27, 59, 111, 0.22));
    transition: transform 0.3s ease;
}

.countdown-overlay {
    position: absolute;
    top: var(--countdown-top, 54%);
    left: var(--countdown-left, 50%);
    transform: translate(-50%, calc(-50% + var(--countdown-offset-y, 8px)));
    width: 100%;
    z-index: 5;
    text-align: center;
    pointer-events: none;
    padding: 0 8px;
    box-sizing: border-box;
}

/* 📜 RECUADRO TIPO PERGAMINO ELEGANTE PARA CONTADOR Y FRASE */
.countdown-parchment {
    position: relative;
    width: 95%;
    max-width: 445px;
    margin: 0 auto;
    padding: 26px 22px 36px 22px;
    border-radius: 20px;
    box-sizing: border-box;
    /* Fondo estilo pergamino vintage elegante y sutil */
    background: radial-gradient(
        ellipse at 50% 35%,
        rgba(255, 253, 246, 0.96) 0%,
        rgba(252, 247, 235, 0.94) 50%,
        rgba(245, 236, 218, 0.95) 85%,
        rgba(236, 224, 201, 0.97) 100%
    );
    border: 1.5px solid rgba(197, 160, 89, 0.65);
    box-shadow: 
        0 18px 40px -8px rgba(27, 59, 111, 0.32),
        0 6px 16px rgba(0, 0, 0, 0.08),
        inset 0 0 38px rgba(205, 168, 115, 0.28),
        inset 0 1px 2px rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
}

/* Marco interior punteado/clásico de pergamino */
.countdown-parchment::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1px dashed rgba(184, 143, 72, 0.45);
    border-radius: 15px;
    pointer-events: none;
}

/* Esquinas ornamentadas estilo pergamino / vintage */
.parchment-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: rgba(184, 143, 72, 0.7);
    border-style: solid;
    pointer-events: none;
    z-index: 2;
}

.parchment-corner-tl {
    top: 9px;
    left: 9px;
    border-width: 2px 0 0 2px;
    border-top-left-radius: 4px;
}

.parchment-corner-tr {
    top: 9px;
    right: 9px;
    border-width: 2px 2px 0 0;
    border-top-right-radius: 4px;
}

.parchment-corner-bl {
    bottom: 9px;
    left: 9px;
    border-width: 0 0 2px 2px;
    border-bottom-left-radius: 4px;
}

.parchment-corner-br {
    bottom: 9px;
    right: 9px;
    border-width: 0 2px 2px 0;
    border-bottom-right-radius: 4px;
}

.countdown-header {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.countdown-tag {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--countdown-tag-color, #8c6d3b);
    margin-bottom: 3px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
}

.countdown-title {
    font-family: 'Parisienne', 'Great Vibes', cursive;
    font-size: var(--countdown-title-size, 2.35rem);
    font-weight: 600;
    margin: 0;
    line-height: 1.1;
    background: var(--countdown-title-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--countdown-rose-base, #1b3b6f);
    filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.85));
}

/* Divisor decorativo vintage entre contador y frase */
.parchment-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 16px auto 14px auto;
    max-width: 250px;
    position: relative;
    z-index: 2;
}

.parchment-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184, 143, 72, 0.55), transparent);
}

.parchment-divider-icon {
    color: #b88f48;
    font-size: 0.95rem;
    line-height: 1;
    opacity: 0.85;
}

.countdown-phrase {
    font-family: 'Cormorant Garamond', 'Lora', serif;
    font-style: italic;
    font-weight: 600;
    font-size: var(--countdown-phrase-size, 1.05rem);
    color: var(--countdown-phrase-color, #1b3b6f);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
    margin: 0 auto;
    transform: none;
    padding: 0 8px;
    max-width: var(--countdown-phrase-max-width, 370px);
    text-align: center;
    line-height: 1.55;
    position: relative;
    z-index: 2;
    pointer-events: none;
}

/* 👨‍👩‍👧 SECCIÓN 3 - PADRES, PADRINOS, SOMBRA Y HONGOS (XV AÑOS) */
:root {
    /* 👤 CONTROLES MANUALES PARA OBJETO SUPERIOR (SOMBRA.PNG) */
    --sec3-sombra-width: 160px;          /* ↔️ Tamaño / Ancho (ej: 130px, 160px, 190px) */
    --sec3-sombra-pos-y: 11%;             /* ↕️ Posición vertical superior (% o px, ej: 5%, 40px) */
    --sec3-sombra-offset-y: -2px;         /* ↕️ Ajuste fino vertical (+ baja, - sube en px) */
    --sec3-sombra-opacity: 1;            /* Opacidad de la sombra (0 a 1) */

    /* 🍄 CONTROLES MANUALES PARA OBJETO INFERIOR (HONGOS.PNG) */
    --sec3-hongos-bottom-width: 400px;   /* ↔️ Tamaño / Ancho (ej: 280px, 330px, 380px) */
    --sec3-hongos-bottom-pos-y: -8%;      /* ↕️ Posición vertical inferior (% o px, ej: 0%, 20px) */
    --sec3-hongos-bottom-offset-y: 0px;  /* ↕️ Ajuste fino vertical (+ sube, - baja en px) */
    --sec3-hongos-bottom-opacity: 1;     /* Opacidad de los hongos (0 a 1) */

    /* ⚙️ CONTROLES MANUALES PARA LA SECCIÓN DE PADRES Y PADRINOS */
    --section3-parents-top: 58%;         /* ↕️ Posición vertical del recuadro (% o px) */
    --section3-parents-offset-y: 0px;    /* ↕️ Ajuste fino vertical (+ baja, - sube en px) */
    --section3-parents-left: 50%;        /* ↔️ Posición horizontal (50% centrado) */
    --section3-parents-main-title-size: 1.08rem; /* Tamaño de "Con la Bendición de mis Padres y Padrinos" (más pequeño) */
    --section3-parents-subtitle-size: 0.72rem;   /* Tamaño de "MIS PADRES" / "PADRINOS" */
    --section3-parents-name-size: 0.95rem;       /* Tamaño de los nombres (más pequeño a solicitud) */
    --section3-parents-font-family: 'Alice', 'Cinzel', 'Playfair Display', serif; /* Tipografía no cursiva estilo Alicia */
    --section3-parents-color: #1b3b6f;   /* Color azul marino del texto */
    --section3-parents-gap: 8px;         /* Espacio entre bloques */
    --section3-phrase-top: 14px;         /* Espacio sobre la frase de agradecimiento */
    --section3-phrase-size: 1.02rem;     /* Tamaño de letra de la frase de agradecimiento */
    --section3-phrase-max-width: 380px;  /* Ancho máximo de la frase */
}

/* 👤 ESTILOS PARA SOMBRA SUPERIOR (SECCIÓN 3) */
.sec3-sombra-wrapper {
    position: absolute;
    top: var(--sec3-sombra-pos-y, 6%);
    left: 50%;
    transform: translate(-50%, var(--sec3-sombra-offset-y, 0px));
    z-index: 6;
    pointer-events: none;
    text-align: center;
    width: auto;
}

.sec3-sombra-img {
    width: var(--sec3-sombra-width, 160px);
    max-width: 90vw;
    height: auto;
    display: block;
    margin: 0 auto;
    opacity: var(--sec3-sombra-opacity, 1);
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35)) drop-shadow(0 2px 8px rgba(27, 59, 111, 0.25));
    transition: transform 0.3s ease;
}

/* 🍄 ESTILOS PARA HONGOS INFERIOR (SECCIÓN 3) */
.sec3-hongos-bottom-wrapper {
    position: absolute;
    bottom: var(--sec3-hongos-bottom-pos-y, 0%);
    left: 50%;
    transform: translate(-50%, calc(-1 * var(--sec3-hongos-bottom-offset-y, 0px)));
    z-index: 6;
    pointer-events: none;
    text-align: center;
    width: auto;
}

.sec3-hongos-bottom-img {
    width: var(--sec3-hongos-bottom-width, 330px);
    max-width: 100vw;
    height: auto;
    display: block;
    margin: 0 auto;
    opacity: var(--sec3-hongos-bottom-opacity, 1);
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.32)) drop-shadow(0 2px 8px rgba(27, 59, 111, 0.22));
    transition: transform 0.3s ease;
}

.section3-banner-container {
    position: relative;
    overflow: hidden;
}

.section3-parents-overlay {
    position: absolute;
    top: var(--section3-parents-top, 58%);
    left: var(--section3-parents-left, 50%);
    transform: translate(-50%, calc(-50% + var(--section3-parents-offset-y, 0px)));
    width: 100%;
    z-index: 5;
    text-align: center;
    pointer-events: none;
    padding: 0 8px;
    box-sizing: border-box;
}

/* 📜 RECUADRO TIPO PERGAMINO ELEGANTE PARA PADRES Y PADRINOS (SECCIÓN 3) */
.section3-parchment {
    position: relative;
    width: 95%;
    max-width: 445px;
    margin: 0 auto;
    padding: 24px 20px 24px 20px;
    border-radius: 20px;
    box-sizing: border-box;
    /* Fondo estilo pergamino vintage elegante y sutil idéntico a sección 2 */
    background: radial-gradient(
        ellipse at 50% 35%,
        rgba(255, 253, 246, 0.96) 0%,
        rgba(252, 247, 235, 0.94) 50%,
        rgba(245, 236, 218, 0.95) 85%,
        rgba(236, 224, 201, 0.97) 100%
    );
    border: 1.5px solid rgba(197, 160, 89, 0.65);
    box-shadow: 
        0 18px 40px -8px rgba(27, 59, 111, 0.32),
        0 6px 16px rgba(0, 0, 0, 0.08),
        inset 0 0 38px rgba(205, 168, 115, 0.28),
        inset 0 1px 2px rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
}

.section3-parchment::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1px dashed rgba(184, 143, 72, 0.45);
    border-radius: 15px;
    pointer-events: none;
}

.section3-parchment .parents-header {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.section3-parchment .parents-tag {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #8c6d3b;
    margin-bottom: 3px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
}

.section3-parchment .parents-main-title {
    font-family: 'Alice', 'Cinzel', 'Playfair Display', serif;
    font-size: var(--section3-parents-main-title-size, 1.08rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--section3-parents-color, #1b3b6f);
    margin: 0;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
}

.section3-parchment .parents-block {
    margin-bottom: var(--section3-parents-gap, 8px);
    position: relative;
    z-index: 2;
}

.section3-parchment .parents-block h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--section3-parents-subtitle-size, 0.72rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #8c6d3b;
    line-height: 1.2;
    margin: 0 0 5px 0;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

.section3-parchment .parents-names {
    font-family: var(--section3-parents-font-family, 'Alice', 'Cinzel', serif);
    font-size: var(--section3-parents-name-size, 0.95rem);
    font-weight: 600;
    color: var(--section3-parents-color, #1b3b6f);
    line-height: 1.45;
    margin: 0;
    padding: 0;
    letter-spacing: 0.4px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
}

.section3-parchment .names-amp {
    font-family: 'Alice', 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.98rem;
    color: #8c6d3b;
    display: block;
    margin: 2px 0 3px 0;
}

.section3-parchment .parents-phrase {
    font-family: 'Cormorant Garamond', 'Lora', serif;
    font-style: italic;
    font-weight: 600;
    font-size: var(--section3-phrase-size, 1.02rem);
    color: var(--section3-parents-color, #1b3b6f);
    margin-top: var(--section3-phrase-top, 14px);
    margin-bottom: 0;
    line-height: 1.45;
    max-width: var(--section3-phrase-max-width, 380px);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
}


/* --- Sección Principal (Hero) con Banner, Música, Fecha, etc. --- */
.hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0 0 0;
    width: 100%;
    box-sizing: border-box;
    background-image: url('img/BACK2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #333;
    min-height: 720px;
    margin-top: 0;
}

.banner-container {
    width: 100%;
    max-width: none;
    margin-bottom: 0;
    overflow: hidden;
}

.banner-image {
    display: block;
    width: 100%;
    min-height: 480px;
    height: auto;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    box-shadow: none;
}

/* Estilos para el reproductor de música */
.music-player-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

#weddingSong {
    display: none;
}

/* Estilos para el nuevo botón de imagen (AUMENTADO APROX. 33%) */
.play-image-button {
    width: 80px;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.play-image-button:hover {
    transform: scale(1.1);
}

/* Estilos para las frases del encabezado */
.wedding-phrases-container {
    margin-top: 20px;
    margin-bottom: 15px;
    text-align: center;
    padding: 0 20px;
}

.wedding-headline {
    font-family: 'Great Vibes', 'Allura', 'Parisienne', cursive;
    font-size: 3.2em;
    font-weight: normal;
    color: #1b3b6f;
    margin: 0;
    line-height: 1.1;
}

.wedding-date {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.7em;
    font-weight: 600;
    color: #1b3b6f;
    margin: 0;
    line-height: 1.2;
}

.wedding-location {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1em;
    font-weight: 500;
    color: #1b3b6f;
    margin-top: 5px;
    letter-spacing: 3px;
}

.ring-image-container {
    width: 195px;
    margin-bottom: 25px;
}

.ring-image {
    display: block;
    width: 100%;
    height: auto;
}

/* Frase de amor */
.love-phrase {
    font-family: 'Cormorant Garamond', 'Lora', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.35em;
    color: #1b3b6f;
    line-height: 1.7;
    max-width: 440px;
    margin: 25px auto 35px auto;
    padding: 0 25px;
    box-sizing: border-box;
    text-align: center;
}

.love-phrase b {
    font-weight: 700;
    color: #1b3b6f;
}

/* --- Contenedor de ancho completo para el contador y el banner --- */
.full-width-container {
    width: 100%;
    position: relative;
    left: 0;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* --- Contador Regresivo --- */
.countdown-container {
    margin-top: 0;
    margin-bottom: 0;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
}

#countdown {
    display: flex;
    gap: 22px;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
}

.time-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.number {
    font-family: 'Playfair Display', serif;
    font-size: var(--countdown-number-size, 2.4em);
    font-weight: bold;
    line-height: 1;
    background: var(--countdown-number-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--countdown-rose-base, #1b3b6f);
    filter: drop-shadow(0 2px 4px rgba(27, 59, 111, 0.35)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
}

.label {
    font-family: 'Montserrat', 'Open Sans', sans-serif;
    font-size: var(--countdown-label-size, 0.78em);
    color: var(--countdown-label-color, #64748b);
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
}

/* Nuevo banner de invitación */
.invitation-banner-container {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

/* ⛪ ESTILOS Y VARIABLES DE CONFIGURACIÓN PARA SECCIÓN 4 (MISA, RECEPCIÓN Y GEMELOS) */
:root {
    /* ⛪💒 CONTROLES MANUALES PARA ICONOS DE EVENTO (IGLESIA Y SALÓN) */
    --event-icon-size: 55px;                /* ↔️ Tamaño base para ambos iconos (ej: 45px, 55px, 65px) */
    --event-icon-iglesia-size: var(--event-icon-size, 55px); /* Tamaño iglesia */
    --event-icon-salon-size: var(--event-icon-size, 55px);   /* Tamaño salón */
    --event-icon-margin-bottom: 3px;        /* ↕️ Espacio debajo del icono */
    --event-icon-opacity: 1;                /* Opacidad de los iconos (0 a 1) */

    /* 👬 CONTROLES MANUALES PARA OBJETO INFERIOR (GEMELOS.PNG) */
    --sec4-gemelos-bottom-width: 175px;     /* ↔️ Tamaño / Ancho (ej: 140px, 175px, 210px) */
    --sec4-gemelos-bottom-pos-y: -5%;        /* ↕️ Posición vertical inferior (% o px, ej: 2%, 20px) */
    --sec4-gemelos-bottom-offset-y: 0px;    /* ↕️ Ajuste fino vertical (+ sube, - baja en px) */
    --sec4-gemelos-bottom-opacity: 1;       /* Opacidad de los gemelos (0 a 1) */

    /* 📍 POSICIÓN MANUAL SECCIÓN 4 (ARRIBA / ABAJO / IZQUIERDA / DERECHA) */
    --section4-events-top: 50%;             /* Mover arriba (-) o abajo (+): Ej. 50% (centro), 52% (baja más) */
    --section4-events-offset-y: 0px;        /* Ajuste fino vertical en px (-20px sube, +20px baja) */
    --section4-events-left: 50%;            /* Mover izquierda (-) o derecha (+): Ej. 50% (centro) */

    /* 📏 TAMAÑOS DE TIPOGRAFÍA DE EVENTOS ESTILO ALICE */
    --section4-intro-title-size: 1.25rem;   /* Tamaño del título superior "Ubicación y Horarios" */
    --section4-intro-subtitle-size: 0.98rem;/* Tamaño del subtítulo superior */
    --section4-title-size: 1.45rem;         /* Tamaño títulos "Misa" y "Recepción" */
    --section4-place-size: 0.88rem;         /* Tamaño nombre del lugar */
    --section4-address-size: 0.78rem;       /* Tamaño dirección */
    --section4-time-size: 0.98rem;          /* Tamaño horario */

    /* 🎨 COLORES Y ESPACIADO */
    --section4-title-color: #1b3b6f;        /* Color para los títulos en azul marino Alice */
    --section4-text-color: #1b3b6f;         /* Color para los textos */
    --section4-place-color: #1b3b6f;        /* Color para los nombres de lugar */
    --section4-button-bg: #1b3b6f;          /* Fondo interior del botón en azul */
    --section4-button-color: #ffffff;       /* Texto blanco dentro del botón */
    --section4-gap-between-events: 12px;    /* Espacio entre bloques */
}

.section4-banner-container {
    position: relative;
    overflow: hidden;
}

/* 👬 ESTILOS PARA GEMELOS INFERIOR (SECCIÓN 4) */
.sec4-gemelos-bottom-wrapper {
    position: absolute;
    bottom: var(--sec4-gemelos-bottom-pos-y, 2%);
    left: 50%;
    transform: translate(-50%, calc(-1 * var(--sec4-gemelos-bottom-offset-y, 0px)));
    z-index: 6;
    pointer-events: none;
    text-align: center;
    width: auto;
}

.sec4-gemelos-bottom-img {
    width: var(--sec4-gemelos-bottom-width, 175px);
    max-width: 90vw;
    height: auto;
    display: block;
    margin: 0 auto;
    opacity: var(--sec4-gemelos-bottom-opacity, 1);
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35)) drop-shadow(0 2px 8px rgba(27, 59, 111, 0.25));
    transition: transform 0.3s ease;
}

.section4-events-overlay {
    position: absolute;
    top: var(--section4-events-top, 50%);
    left: var(--section4-events-left, 50%);
    transform: translate(-50%, calc(-50% + var(--section4-events-offset-y, 0px)));
    width: 100%;
    z-index: 5;
    text-align: center;
    pointer-events: none;
    padding: 0 8px;
    box-sizing: border-box;
}

/* 📜 RECUADRO TIPO PERGAMINO ELEGANTE PARA SECCIÓN 4 (UBICACIÓN Y HORARIOS) */
.section4-parchment {
    position: relative;
    width: 95%;
    max-width: 445px;
    margin: 0 auto;
    padding: 24px 20px 24px 20px;
    border-radius: 20px;
    box-sizing: border-box;
    /* Fondo estilo pergamino vintage elegante idéntico a secciones 2 y 3 */
    background: radial-gradient(
        ellipse at 50% 35%,
        rgba(255, 253, 246, 0.96) 0%,
        rgba(252, 247, 235, 0.94) 50%,
        rgba(245, 236, 218, 0.95) 85%,
        rgba(236, 224, 201, 0.97) 100%
    );
    border: 1.5px solid rgba(197, 160, 89, 0.65);
    box-shadow: 
        0 18px 40px -8px rgba(27, 59, 111, 0.32),
        0 6px 16px rgba(0, 0, 0, 0.08),
        inset 0 0 38px rgba(205, 168, 115, 0.28),
        inset 0 1px 2px rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
}

.section4-parchment::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1px dashed rgba(184, 143, 72, 0.45);
    border-radius: 15px;
    pointer-events: none;
}

.section4-parchment .events-header {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.section4-parchment .events-tag {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #8c6d3b;
    margin-bottom: 3px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
}

.section4-parchment .events-intro-title {
    font-family: 'Alice', 'Cinzel', 'Playfair Display', serif;
    font-size: var(--section4-intro-title-size, 1.25rem);
    font-weight: 700;
    color: var(--section4-title-color, #1b3b6f);
    margin: 0 0 2px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
}

.section4-parchment .events-intro-subtitle {
    font-family: 'Cormorant Garamond', 'Lora', serif;
    font-size: var(--section4-intro-subtitle-size, 0.98rem);
    font-style: italic;
    font-weight: 600;
    color: #8c6d3b;
    margin: 0;
    line-height: 1.35;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
}

.section4-parchment .event-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.section4-parchment .event-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--event-icon-margin-bottom, 3px);
    width: 100%;
}

.section4-parchment .event-icon-img {
    width: var(--event-icon-size, 55px);
    max-width: 80px;
    height: auto;
    display: block;
    margin: 0 auto;
    opacity: var(--event-icon-opacity, 1);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18)) drop-shadow(0 2px 4px rgba(27, 59, 111, 0.22));
    transition: transform 0.3s ease;
}

.section4-parchment .event-icon-iglesia {
    width: var(--event-icon-iglesia-size, var(--event-icon-size, 55px));
}

.section4-parchment .event-icon-salon {
    width: var(--event-icon-salon-size, var(--event-icon-size, 55px));
}

.section4-parchment .event-icon-img:hover {
    transform: scale(1.06);
}

.section4-parchment .event-type {
    font-family: 'Alice', 'Cinzel', serif;
    font-size: var(--section4-title-size, 1.45rem);
    color: var(--section4-title-color, #1b3b6f);
    margin: 0 0 2px 0;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
}

.section4-parchment .event-place {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--section4-place-size, 0.88rem);
    font-weight: 700;
    color: var(--section4-place-color, #1b3b6f);
    margin: 3px 0 2px 0;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1.3;
}

.section4-parchment .event-time {
    font-family: 'Alice', 'Cinzel', serif;
    font-size: var(--section4-time-size, 0.98rem);
    font-weight: 700;
    color: #8c6d3b;
    margin: 0 0 3px 0;
    letter-spacing: 1px;
}

.section4-parchment .event-address {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--section4-address-size, 0.78rem);
    color: #556885;
    margin: 0 auto 8px auto;
    line-height: 1.35;
    max-width: 330px;
    letter-spacing: 0.3px;
}

.section4-parchment .map-link {
    display: inline-block;
    background: var(--liquid-glass-bg);
    color: var(--section4-button-color, #ffffff);
    padding: 8px 24px;
    border-radius: 25px;
    border: var(--liquid-glass-border);
    box-shadow: var(--liquid-glass-inner-shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    margin-top: 4px;
}

.section4-parchment .map-link:hover,
.section4-parchment .map-link:focus,
.section4-parchment .map-link:active,
.section4-parchment .map-link:visited {
    color: #ffffff;
    text-decoration: none;
}

.section4-parchment .map-link:hover {
    background: var(--liquid-glass-hover);
    border: var(--liquid-glass-border-hover);
    transform: translateY(-2px);
    box-shadow: var(--liquid-glass-inner-shadow);
}

.section4-parchment .map-link:focus,
.section4-parchment .map-link:active {
    background-color: #112344;
    border-color: #ffffff;
    transform: translateY(0);
    outline: none;
}

/* 💌 ESTILOS Y VARIABLES PARA EL RECUADRO TIPO PERGAMINO SOBRE SECCIÓN 5 (RSVP) */
:root {
    /* 📍 POSICIÓN MANUAL EN SECCIÓN 5 (ARRIBA / ABAJO / IZQUIERDA / DERECHA) */
    --section5-rsvp-top: 50%;               /* Mover arriba (-) o abajo (+): Ej. 50% (centro), 45% (arriba), 55% (abajo) */
    --section5-rsvp-left: 50%;              /* Mover izquierda (-) o derecha (+): Ej. 50% (centro), 45% (izq), 55% (der) */
    --section5-rsvp-max-width: 445px;       /* Ancho máximo del recuadro pergamino */
    --section5-title-size: 1.65rem;         /* Tamaño título "Confirmación" */
    --section5-text-size: 1.05rem;          /* Tamaño texto frase */
}

.section5-banner-container {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 520px;
    padding: 35px 15px;
    box-sizing: border-box;
}

.section5-banner-container .banner-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    z-index: 1;
}

.section5-rsvp-overlay {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 95%;
    max-width: var(--section5-rsvp-max-width, 445px);
    z-index: 5;
    text-align: center;
    pointer-events: auto;
    background: radial-gradient(
        ellipse at 50% 35%,
        rgba(255, 253, 246, 0.97) 0%,
        rgba(252, 247, 235, 0.95) 50%,
        rgba(245, 236, 218, 0.96) 85%,
        rgba(236, 224, 201, 0.98) 100%
    );
    border: 1.5px solid rgba(197, 160, 89, 0.65);
    box-shadow: 
        0 18px 40px -8px rgba(27, 59, 111, 0.32),
        0 6px 16px rgba(0, 0, 0, 0.08),
        inset 0 0 38px rgba(205, 168, 115, 0.28),
        inset 0 1px 2px rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 26px 20px 28px 20px;
    box-sizing: border-box;
    margin: 0 auto;
}

.section5-rsvp-overlay::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1px dashed rgba(184, 143, 72, 0.45);
    border-radius: 15px;
    pointer-events: none;
}

.section5-rsvp-overlay .rsvp-section {
    padding: 0;
    margin: 0;
    background: transparent;
}

.section5-rsvp-overlay .rsvp-header {
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.section5-rsvp-overlay .rsvp-tag {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #8c6d3b;
    margin-bottom: 3px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
}

.section5-rsvp-overlay .rsvp-title-confirmacion {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #8c6d3b;
    margin-bottom: 3px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
}

.section5-rsvp-overlay .rsvp-title-asistencia {
    font-family: 'Alice', 'Cinzel', 'Playfair Display', serif !important;
    font-size: var(--section5-title-size, 1.65rem) !important;
    font-weight: 700 !important;
    color: #1b3b6f !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85) !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
}

.section5-rsvp-overlay .rsvp-text {
    font-family: 'Cormorant Garamond', 'Lora', serif !important;
    font-size: var(--section5-text-size, 1.05rem) !important;
    font-style: italic !important;
    font-weight: 600 !important;
    color: #1b3b6f !important;
    line-height: 1.45 !important;
    margin: 0 0 18px 0 !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
    position: relative;
    z-index: 2;
}

.section5-rsvp-overlay .form-group {
    margin-bottom: 14px;
    text-align: left;
}

.section5-rsvp-overlay .attendance-options {
    text-align: center;
}

.section5-rsvp-overlay .form-group label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--section5-rsvp-title-color, #1b3b6f);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 5px;
    display: block;
}

.section5-rsvp-overlay .attendance-options > label {
    text-align: center;
    width: 100%;
}

.section5-rsvp-overlay input[type="text"],
.section5-rsvp-overlay input[type="tel"],
.section5-rsvp-overlay textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(27, 59, 111, 0.4);
    border-radius: 12px;
    background-color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88em;
    color: #333333;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.section5-rsvp-overlay .locked-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.section5-rsvp-overlay .locked-input {
    background-color: rgba(27, 59, 111, 0.08) !important;
    border: 1px dashed rgba(27, 59, 111, 0.6) !important;
    color: #1b3b6f !important;
    font-weight: 700 !important;
    text-align: center !important;
    cursor: not-allowed !important;
    user-select: none;
    padding-right: 35px !important;
}

.section5-rsvp-overlay .locked-input-wrapper .lock-icon {
    position: absolute;
    right: 14px;
    color: #1b3b6f;
    font-size: 0.85em;
    pointer-events: none;
    opacity: 0.8;
}

.section5-rsvp-overlay input[type="text"]:focus,
.section5-rsvp-overlay input[type="tel"]:focus,
.section5-rsvp-overlay textarea:focus {
    border-color: #1b3b6f;
    box-shadow: 0 0 8px rgba(27, 59, 111, 0.25);
}

.section5-rsvp-overlay .radio-group {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 4px;
}

.section5-rsvp-overlay .radio-group input[type="radio"] {
    display: none;
}

.section5-rsvp-overlay .radio-group label {
    padding: 8px 18px;
    border: 1px solid rgba(27, 59, 111, 0.4);
    border-radius: 20px;
    background: #ffffff;
    color: #1b3b6f;
    font-size: 0.82em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0;
}

.section5-rsvp-overlay .radio-group input[type="radio"]:checked + label {
    background: var(--liquid-glass-bg);
    color: #ffffff;
    border: var(--liquid-glass-border);
    box-shadow: var(--liquid-glass-inner-shadow);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.section5-rsvp-overlay .rsvp-button {
    width: 100%;
    background: var(--liquid-glass-bg);
    color: #ffffff;
    padding: 11px 20px;
    border: var(--liquid-glass-border);
    border-radius: 25px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--liquid-glass-inner-shadow);
    transition: all 0.3s ease;
    margin-top: 10px;
}

.section5-rsvp-overlay .rsvp-button:hover {
    background: var(--liquid-glass-hover);
    border: var(--liquid-glass-border-hover);
    transform: translateY(-1px);
    box-shadow: var(--liquid-glass-inner-shadow);
}

/* --- Sección de Padres y Padrinos con imagen de fondo (diseño simplificado) --- */
.parents-section {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0;
    background-image: url('img/back.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 400px;
}

.parents-text-container {
    max-width: 500px;
    padding: 60px 20px;
    background-color: transparent;
    border-radius: 10px;
}

.parents-text-container h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5em;
    font-weight: 600;
    color: #1b3b6f;
    line-height: 1.4;
    margin: 0;
}

.parents-info {
    font-family: 'Parisienne', 'Pinyon Script', 'Monsieur La Doulaise', cursive;
    font-size: 1.85em;
    font-weight: normal;
    color: #1b3b6f;
    margin-top: 0px;
    padding: 0;
    line-height: 1.4;
}

.parents-info p {
    margin: 0;
    padding: 0;
    margin-bottom: 15px;
}

.parents-info p:last-child {
    margin-bottom: 0;
}

.parents-info b {
    font-weight: bold;
    color: #666;
}

/* --- Estilos para las secciones de contenido individuales --- */
#locationContent {
    background-color: #ffffff;
    padding: 50px 20px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: center;
}

.location-card {
    background-color: transparent;
    border: none;
    border-radius: 16px;
    padding: 30px 20px;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.location-card:hover {
    transform: translateY(-2px);
}

.location-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
}

.location-icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #e0f2fe;
    color: #1b3b6f;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    margin-bottom: 6px;
}

.location-card h2 {
    font-family: 'Allura', 'Pinyon Script', 'Great Vibes', cursive;
    font-size: 3.6em;
    color: #1b3b6f;
    margin: 0;
    font-weight: normal;
    line-height: 1.1;
}

/* --- Animación al hacer Scroll (Reveal on Scroll) --- */
.reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.location-card .detail-info {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35em;
    font-weight: 700;
    color: #1b3b6f;
    margin: 8px 0 2px 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.location-card .detail-subinfo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15em;
    font-style: italic;
    color: #1b3b6f;
    margin: 0 0 8px 0;
}

.location-card .detail-address {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9em;
    color: #555555;
    margin: 5px 0 12px 0;
    line-height: 1.5;
}

.location-time {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85em;
    font-weight: 600;
    color: #1b3b6f;
    background-color: #ffffff;
    border: 1px solid #e0e7ff;
    padding: 4px 14px;
    border-radius: 20px;
    margin: 0 0 16px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.location-card .map-link {
    display: inline-block;
    background: var(--liquid-glass-bg);
    color: #ffffff;
    padding: 10px 25px;
    border-radius: 25px;
    border: var(--liquid-glass-border);
    box-shadow: var(--liquid-glass-inner-shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    margin-top: 0;
}

.location-card .map-link:hover {
    background: var(--liquid-glass-hover);
    border: var(--liquid-glass-border-hover);
    transform: translateY(-1px);
    box-shadow: var(--liquid-glass-inner-shadow);
}

.gift-link, .whatsapp-link, .rsvp-button {
    display: inline-block;
    background: var(--liquid-glass-bg);
    color: #fff;
    padding: 12px 25px;
    border-radius: 25px;
    border: var(--liquid-glass-border);
    box-shadow: var(--liquid-glass-inner-shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-decoration: none;
    font-weight: bold;
    margin-top: 15px;
    transition: all 0.3s ease;
    font-family: 'Open Sans', sans-serif;
}

.gift-link:hover, .whatsapp-link:hover, .rsvp-button:hover {
    background: var(--liquid-glass-hover);
    border: var(--liquid-glass-border-hover);
    box-shadow: var(--liquid-glass-inner-shadow);
}

.whatsapp-link i {
    margin-right: 8px;
}

/* --- Sección de Línea del Tiempo (con imagen) --- */
.timeline-image-section {
    background-color: #ffffff;
    padding: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 900px;
}

.timeline-image-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.timeline-image {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Sección de Itinerario (Línea del Tiempo HTML) --- */
.itinerary-section {
    background-color: #ffffff;
    padding: 50px 20px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.itinerary-title {
    font-family: 'Callisten', 'Dancing Script', cursive;
    font-size: 3.5em;
    color: #1b3b6f;
    margin: 0 0 35px 0;
    font-weight: normal;
}

.timeline-container {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
    padding: 10px 0;
}

.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 0;
    border-left: 2px dashed #1b3b6f;
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    width: 50%;
    padding: 10px 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
}

.timeline-item.left {
    left: 0;
    align-items: center;
    padding-right: 25px;
}

.timeline-item.right {
    left: 50%;
    align-items: center;
    padding-left: 25px;
}

.timeline-item::after {
    content: '';
    position: absolute;
    top: 25px;
    width: 8px;
    height: 8px;
    background-color: #1b3b6f;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 2px #1b3b6f;
    z-index: 2;
}

.timeline-item.left::after {
    right: -5px;
}

.timeline-item.right::after {
    left: -5px;
}

.timeline-icon-box {
    width: 55px;
    height: 55px;
    border: 2px solid #1b3b6f;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    color: #1b3b6f;
    font-size: 22px;
    margin-bottom: 6px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    box-shadow: none;
}

.timeline-item:hover .timeline-icon-box {
    transform: scale(1.08);
    background-color: #f0f4f8;
    box-shadow: none;
}

.timeline-time {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85em;
    font-weight: 600;
    color: #1b3b6f;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

.timeline-label {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-size: 1.25em;
    font-weight: 600;
    color: #1b3b6f;
    margin: 0;
    line-height: 1.2;
}

/* --- Nuevos estilos de la Galería de Fotos --- */
.gallery-title-section {
    text-align: center;
    margin: 40px auto 15px auto;
    padding: 0 15px;
    background-color: transparent;
}

.gallery-title-our {
    font-family: var(--gallery-title-font, 'Alice', 'Cinzel', 'Playfair Display', serif);
    font-size: var(--gallery-title-mi-size, 1.45rem);
    color: var(--gallery-title-mi-color, #f1f5f9);
    letter-spacing: var(--gallery-title-mi-letter-spacing, 3px);
    text-shadow: var(--gallery-title-shadow, 0 2px 10px rgba(0, 0, 0, 0.75), 0 0 18px rgba(255, 255, 255, 0.5));
    margin: 0;
    line-height: 1.2;
    font-style: italic;
    font-weight: 400;
}

.gallery-title-gallery {
    font-family: var(--gallery-title-font, 'Alice', 'Cinzel', 'Playfair Display', serif);
    font-size: var(--gallery-title-main-size, 2.35rem);
    color: var(--gallery-title-main-color, #ffffff);
    margin: 4px 0 0 0;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: var(--gallery-title-main-letter-spacing, 4px);
    text-transform: uppercase;
    text-shadow: var(--gallery-title-shadow, 0 2px 10px rgba(0, 0, 0, 0.75), 0 0 20px rgba(255, 255, 255, 0.6));
}

.gallery-container {
    width: 100%;
    max-width: 460px;
    margin: 0 auto 40px auto;
    position: relative;
    padding: 0 15px;
    box-sizing: border-box;
    background-color: transparent;
}

.carousel-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(27, 59, 111, 0.2);
    background-color: #ffffff;
}

.image-carousel {
    display: flex;
    width: 100%;
    position: relative;
    min-height: 380px;
    align-items: center;
    justify-content: center;
}

.carousel-image {
    width: 100%;
    max-width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 16px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

/* Flechas del carrusel */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    background: var(--liquid-glass-bg);
    border: var(--liquid-glass-border);
    box-shadow: var(--liquid-glass-inner-shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    font-size: 1.1em;
    cursor: pointer;
    z-index: 10;
    opacity: 0.95;
    transition: all 0.25s ease;
}
.carousel-nav:hover {
    opacity: 1;
    background: var(--liquid-glass-hover);
    border: var(--liquid-glass-border-hover);
    transform: translateY(-50%) scale(1.08);
    box-shadow: var(--liquid-glass-inner-shadow);
}
.carousel-nav.prev-nav { left: 10px; }
.carousel-nav.next-nav { right: 10px; }

/* --- Estilos para el Lightbox --- */
.lightbox {
    display: none;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.lightbox-image {
    max-width: 90%;
    max-height: 80%;
    object-fit: contain;
    position: relative;
    z-index: 100;
}

.lightbox .close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 102;
}

.lightbox .close-btn:hover {
    color: #1b3b6f;
}

.lightbox .lightbox-nav {
    color: #ffffff;
    font-size: 2.2em;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    padding: 15px;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    display: flex !important;
    justify-content: center;
    align-items: center;
    z-index: 101;
    background: transparent;
    border: none;
}

.lightbox .lightbox-nav:hover {
    opacity: 1;
}

.lightbox .lightbox-nav.prev-nav { left: 20px; }
.lightbox .lightbox-nav.next-nav { right: 20px; }

/* --- Sección de Video --- */
.video-container {
    width: 100%;
    position: relative;
    left: 0;
    transform: none;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    background-color: #000;
}

.video-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.video-preview .preview-content {
    color: #fff;
    text-align: center;
}

.save-the-date-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3em;
    margin: 0;
    line-height: 1;
    font-weight: 500;
}

.play-button {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 3em;
    cursor: pointer;
    margin-top: 10px;
    padding: 0;
    outline: none;
    transition: transform 0.2s ease;
}

.play-button:hover {
    transform: scale(1.1);
}

.video-player {
    width: 100%;
    height: 100%;
    border: none;
}

/* --- Nuevo banner al final del video --- */
.banner-container-bottom {
    display: none;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.bottom-banner-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
}

/* ========================================================= */
/* 🎁 SECCIÓN DE LLUVIA DE SOBRES CON RECUADRO PERGAMINO */
/* ========================================================= */
:root {
    --gifts-parchment-max-width: 445px;
    --gifts-title-size: 1.6rem;
    --gifts-text-size: 1.05rem;

    /* 🍄 CONTROLES MANUALES PARA OBJETO HONGOS2.PNG (LLUVIA DE SOBRES) */
    --gifts-hongos-width: 460px;               /* ↔️ Tamaño / Ancho (ej: 280px, 360px, 420px) */
    --gifts-hongos-bottom-pos-y: -60px;          /* ↕️ Posición base inferior (+ SUBE, - BAJA: ej: 20px, -30px, -50px) */
    --gifts-hongos-offset-y: 0px;              /* ↕️ Ajuste fino vertical (+ SUBE, - BAJA en px) */
    --gifts-hongos-opacity: 1;                 /* Opacidad (0 a 1) */
    --gifts-hongos-z-index: 6;                 /* Capa (6 = al frente) */
}

.gifts-section {
    position: relative;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 55px 15px 70px 15px;
    background-image: url('img/mesa.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    box-sizing: border-box;
}

/* 🍄 ESTILOS PARA HONGOS2 INFERIOR (LLUVIA DE SOBRES) */
.gifts-hongos-wrapper {
    position: absolute;
    bottom: calc(var(--gifts-hongos-bottom-pos-y, 0px) + var(--gifts-hongos-offset-y, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--gifts-hongos-z-index, 6);
    pointer-events: none;
    text-align: center;
    width: auto;
    transition: bottom 0.2s ease, transform 0.2s ease;
}

.gifts-hongos-img {
    width: var(--gifts-hongos-width, 360px);
    max-width: 100vw;
    height: auto;
    display: block;
    margin: 0 auto;
    opacity: var(--gifts-hongos-opacity, 1);
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45)) drop-shadow(0 2px 8px rgba(27, 59, 111, 0.25));
    transition: width 0.25s ease;
}

.gifts-parchment {
    position: relative;
    width: 95%;
    max-width: var(--gifts-parchment-max-width, 445px);
    margin: 0 auto;
    padding: 26px 22px 28px 22px;
    border-radius: 20px;
    box-sizing: border-box;
    background: radial-gradient(
        ellipse at 50% 35%,
        rgba(255, 253, 246, 0.96) 0%,
        rgba(252, 247, 235, 0.94) 50%,
        rgba(245, 236, 218, 0.95) 85%,
        rgba(236, 224, 201, 0.97) 100%
    );
    border: 1.5px solid rgba(197, 160, 89, 0.65);
    box-shadow: 
        0 18px 40px -8px rgba(27, 59, 111, 0.32),
        0 6px 16px rgba(0, 0, 0, 0.08),
        inset 0 0 38px rgba(205, 168, 115, 0.28),
        inset 0 1px 2px rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
    text-align: center;
}

.gifts-parchment::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1px dashed rgba(184, 143, 72, 0.45);
    border-radius: 15px;
    pointer-events: none;
}

.gifts-parchment .gifts-header {
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.gifts-parchment .gifts-tag {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #8c6d3b;
    margin-bottom: 3px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
}

.gifts-parchment .gifts-title-regalos {
    font-family: 'Alice', 'Cinzel', 'Playfair Display', serif !important;
    font-size: var(--gifts-title-size, 1.6rem) !important;
    font-weight: 700 !important;
    color: #1b3b6f !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85) !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.2 !important;
}

.gifts-parchment .gift-img-icon {
    display: block;
    max-width: 75px;
    width: 100%;
    height: auto;
    margin: 8px auto 14px auto;
    filter: drop-shadow(0 6px 12px rgba(27, 59, 111, 0.18));
    position: relative;
    z-index: 2;
}

.gifts-parchment .gifts-text {
    font-family: 'Cormorant Garamond', 'Lora', serif !important;
    font-size: var(--gifts-text-size, 1.05rem) !important;
    font-style: italic !important;
    font-weight: 600 !important;
    color: #1b3b6f !important;
    line-height: 1.55 !important;
    margin: 10px auto 0 auto !important;
    max-width: 360px !important;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
}

.gifts-parchment .gifts-text b {
    font-family: 'Alice', 'Cinzel', serif;
    font-style: normal;
    font-weight: 700;
    color: #8c6d3b;
}

.gifts-parchment .gifts-highlight {
    display: inline-block;
    margin-top: 6px;
}

/* ========================================================= */
/* 👗 SECCIÓN CÓDIGO DE VESTIMENTA CON RECUADRO PERGAMINO */
/* ========================================================= */
:root {
    --dresscode-parchment-max-width: 445px;
    --dresscode-title-size: 1.6rem;
    --dresscode-type-size: 1.35rem;

    /* 🌹 CONTROLES MANUALES PARA OBJETO ROSAS.PNG (CÓDIGO DE VESTIMENTA) */
    --dresscode-rosas-width: 100%;             /* ↔️ Tamaño / Ancho (ej: 100%, 115%, 550px, 800px) */
    --dresscode-rosas-height: 100%;            /* ↕️ Alto del contenedor de rosas */
    --dresscode-rosas-max-width: none;         /* Límite máximo (none o px) */
    --dresscode-rosas-pos-y: 50%;              /* ↕️ Posición vertical (50% = centro vertical) */
    --dresscode-rosas-offset-y: 0px;           /* ↕️ Ajuste fino vertical (+ baja, - sube en px) */
    --dresscode-rosas-scale: 1;                /* 🔍 Escala general (ej: 1, 1.1, 1.25) */
    --dresscode-rosas-opacity: 1;              /* Opacidad de las rosas (0 a 1) */
    --dresscode-rosas-fit: cover;              /* Ajuste (cover = llena toda la sección, contain = proporcional) */
    --dresscode-rosas-z-index: 10;             /* Capa del elemento (10 = adelante de toda la sección) */

    /* 👗 CONTROLES MANUALES PARA OBJETO VESTIMENTA.PNG */
    --dresscode-icon-width: 220px;              /* ↔️ Tamaño / Ancho (ej: 75px, 90px, 110px, 140px) */
    --dresscode-icon-offset-y: 100px;            /* ↕️ Desplazamiento vertical (+ baja, - sube en px: ej. 10px, -15px) */
    --dresscode-quote-size: 0.82rem;             /* 👑 Tamaño frase Reina de Corazones */
    --dresscode-quote-offset-y: 30px;            /* ↕️ Desplazamiento vertical frase Reina (+ baja, - sube en px) */
}

.dresscode-section {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 65px 15px;
    background-image: url('elementos/codigo.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

/* 🌹 OBJETO DECORATIVO ROSAS.PNG CENTRADO Y DE GRAN TAMAÑO */
.dresscode-rosas-wrapper {
    position: absolute;
    top: calc(var(--dresscode-rosas-pos-y, 50%) + var(--dresscode-rosas-offset-y, 0px));
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--dresscode-rosas-scale, 1));
    width: var(--dresscode-rosas-width, 100%);
    max-width: var(--dresscode-rosas-max-width, none);
    height: var(--dresscode-rosas-height, 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: var(--dresscode-rosas-z-index, 10);
    opacity: var(--dresscode-rosas-opacity, 1);
    transition: transform 0.25s ease;
}

.dresscode-rosas-img {
    width: 100%;
    height: 100%;
    object-fit: var(--dresscode-rosas-fit, cover);
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 8px 25px rgba(0, 0, 0, 0.4));
}

.dresscode-parchment {
    position: relative;
    z-index: 2;
    width: 95%;
    max-width: var(--dresscode-parchment-max-width, 445px);
    margin: 0 auto;
    padding: 26px 22px 28px 22px;
    border-radius: 20px;
    box-sizing: border-box;
    background: radial-gradient(
        ellipse at 50% 35%,
        rgba(255, 253, 246, 0.96) 0%,
        rgba(252, 247, 235, 0.94) 50%,
        rgba(245, 236, 218, 0.95) 85%,
        rgba(236, 224, 201, 0.97) 100%
    );
    border: 1.5px solid rgba(197, 160, 89, 0.65);
    box-shadow: 
        0 18px 40px -8px rgba(27, 59, 111, 0.32),
        0 6px 16px rgba(0, 0, 0, 0.08),
        inset 0 0 38px rgba(205, 168, 115, 0.28),
        inset 0 1px 2px rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
    text-align: center;
}

.dresscode-parchment::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1px dashed rgba(184, 143, 72, 0.45);
    border-radius: 15px;
    pointer-events: none;
}

.dresscode-parchment .dresscode-header {
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.dresscode-parchment .dresscode-tag {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #8c6d3b;
    margin-bottom: 3px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
}

.dresscode-parchment .dresscode-title-vestimenta {
    font-family: 'Alice', 'Cinzel', 'Playfair Display', serif !important;
    font-size: var(--dresscode-title-size, 1.6rem) !important;
    font-weight: 700 !important;
    color: #1b3b6f !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85) !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.2 !important;
}

.dresscode-parchment .dresscode-type {
    font-family: 'Alice', 'Cinzel', serif !important;
    font-size: var(--dresscode-type-size, 1.35rem) !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    color: #8c6d3b !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9) !important;
    margin: 4px 0 14px 0 !important;
    position: relative;
    z-index: 2;
}

.dresscode-parchment .dresscode-rules {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}

.dresscode-parchment .dresscode-rules .rule-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    color: #000000 !important;
    margin: 0 !important;
    text-transform: uppercase;
}

.dresscode-parchment .dresscode-rules .rule-subtext {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    margin-top: 8px !important;
    letter-spacing: 0.8px !important;
    color: #1e3a8a !important;
    text-transform: uppercase;
}

/* 🎨 CÍRCULOS DE PALETA DE COLOR EN CÓDIGO DE VESTIMENTA */
.dresscode-color-palette {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    margin: 16px auto 6px auto;
    position: relative;
    z-index: 2;
}

.dresscode-color-palette .swatch-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.dresscode-color-palette .swatch {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-block;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28), 0 0 10px rgba(197, 160, 89, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: default;
}

.dresscode-color-palette .swatch:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.38), 0 0 14px rgba(197, 160, 89, 0.65);
}

.dresscode-color-palette .swatch-negro {
    background: radial-gradient(circle at 35% 35%, #444444 0%, #1a1a1a 70%, #000000 100%);
}

.dresscode-color-palette .swatch-azul {
    background: radial-gradient(circle at 35% 35%, #3b82f6 0%, #1b3b6f 70%, #0e203c 100%);
}

.dresscode-color-palette .swatch-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #1b3b6f !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

/* 👑 FRASE DE LA REINA DE CORAZONES EN CÓDIGO DE VESTIMENTA */
.dresscode-parchment .dresscode-queen-quote {
    font-family: 'Alice', 'Cinzel', 'Playfair Display', serif !important;
    font-size: var(--dresscode-quote-size, 0.82rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    color: #b91c1c !important;
    text-transform: uppercase !important;
    line-height: 1.35 !important;
    margin: 22px auto 6px auto !important;
    transform: translateY(var(--dresscode-quote-offset-y, 30px));
    max-width: 340px !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85) !important;
    position: relative;
    z-index: 2;
    transition: transform 0.2s ease;
}

.dresscode-parchment .dresscode-img-icon {
    display: block;
    max-width: var(--dresscode-icon-width, 90px);
    width: 100%;
    height: auto;
    margin: 14px auto 6px auto;
    transform: translateY(var(--dresscode-icon-offset-y, 0px));
    filter: drop-shadow(0 6px 12px rgba(27, 59, 111, 0.18));
    position: relative;
    z-index: 2;
    transition: transform 0.2s ease, max-width 0.2s ease;
}

.color-palette-block {
    margin-bottom: 30px;
}

.palette-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05em;
    font-weight: 700;
    color: #1b3b6f;
    letter-spacing: 2px;
    margin: 0 0 4px 0;
    text-transform: uppercase;
}

.palette-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78em;
    font-weight: 500;
    color: #666666;
    letter-spacing: 1px;
    margin: 0 0 16px 0;
    text-transform: uppercase;
}

.color-swatches {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.dresscode-img-icon {
    display: block;
    max-width: var(--dresscode-icon-width, 90px);
    width: 100%;
    height: auto;
    margin: 18px auto 14px auto;
    transform: translateY(var(--dresscode-icon-offset-y, 0px));
}

.color-swatches .swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    border: 2px solid #ffffff;
    transition: transform 0.2s ease;
}

.color-swatches .swatch:hover {
    transform: scale(1.15);
}

.dresscode-verse {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(27, 59, 111, 0.12);
}

.verse-quote {
    font-family: 'Cormorant Garamond', 'Lora', serif;
    font-style: italic;
    font-size: 1.1em;
    color: #1b3b6f;
    margin: 0 0 6px 0;
    line-height: 1.4;
    font-weight: 600;
}

.verse-reference {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82em;
    color: #1b3b6f;
    letter-spacing: 1.5px;
    margin: 0;
    font-weight: 500;
}

.gifts-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88em;
    color: #555555;
    margin: 15px 0 25px 0;
    line-height: 1.5;
}

.gifts-option {
    margin-bottom: 30px;
}
.gifts-option:last-of-type {
    margin-bottom: 0;
}


.gifts-logo-container {
    margin: 20px 0 10px 0;
}

.gifts-logo {
    width: 150px;
    height: auto;
}
.gifts-logo-bbva {
    width: 100px;
    height: auto;
    margin-bottom: 10px;
}

.bbva-info {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9em;
    color: #666;
    line-height: 1.5;
}
.bbva-info p {
    margin: 5px 0;
}

.sobre-info {
    margin-top: 40px;
}
.envelope-icon {
    font-size: 2.2em;
    color: var(--color-maestro, #1b3b6f);
    margin-bottom: 10px;
}
.sobre-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88em;
    color: #555555;
    max-width: 350px;
    margin: 0 auto;
    line-height: 1.5;
}

.gift-link {
    display: inline-block;
    background-color: #1b3b6f;
    color: #fff;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
    transition: background-color 0.3s ease;
    font-family: 'Open Sans', sans-serif;
}
/* --- Sección de Álbum Digital --- */
.album-section {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 50px 20px;
    background-color: #ffffff;
    width: 100%;
    box-sizing: border-box;
}

.album-container-inner {
    background-color: transparent;
    border-radius: 20px;
    padding: 35px 25px;
    max-width: 420px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.album-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05em;
    color: #1b3b6f;
    margin: 0;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.album-title {
    font-family: 'Allura', 'Pinyon Script', 'Great Vibes', cursive;
    font-size: 3.6em;
    color: #1b3b6f;
    margin: 5px 0 12px 0;
    line-height: 1;
    font-weight: normal;
}

.album-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9em;
    color: #555555;
    margin: 0 0 20px 0;
    line-height: 1.5;
    max-width: 320px;
}

.qr-container {
    margin-bottom: 22px;
    display: flex;
    justify-content: center;
}

.qr-frame {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(27, 59, 111, 0.12);
    border: 1px solid #edf2f7;
    display: inline-block;
}

.qr-image {
    width: 170px;
    height: 170px;
    display: block;
    object-fit: contain;
}

.album-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--liquid-glass-bg);
    color: #ffffff;
    padding: 12px 28px;
    border-radius: 25px;
    border: var(--liquid-glass-border);
    box-shadow: var(--liquid-glass-inner-shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82em;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.album-button:hover {
    background: var(--liquid-glass-hover);
    border: var(--liquid-glass-border-hover);
    transform: translateY(-2px);
    box-shadow: var(--liquid-glass-inner-shadow);
}

/* --- Sección de Confirmación de Asistencia (RSVP) --- */
.section5-rsvp-overlay {
    width: 100%;
    max-width: 440px;
    box-sizing: border-box;
}

.rsvp-section {
    text-align: center;
    padding: 15px 15px;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

.rsvp-title-confirmacion {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5em;
    color: #000;
    margin: 0;
    line-height: 1;
    font-weight: 500;
}

.rsvp-title-asistencia {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5em;
    color: #1b3b6f;
    margin: 0;
    line-height: 1;
    font-weight: 600;
}

/* Nuevos estilos para el formulario */
#rsvpForm {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

.form-group {
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
}

.form-group label {
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    color: #666;
    display: block;
    margin-bottom: 5px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    box-sizing: border-box;
}

.rsvp-button {
    background-color: #1b3b6f;
    color: #fff;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 15px;
    transition: background-color 0.3s ease;
    font-family: 'Open Sans', sans-serif;
    cursor: pointer;
}
.rsvp-button:hover {
    background-color: #1b3b6f;
}

/* ========================================================= */
/* 👑 SECCIÓN CIERRE: FONDO FOOTER.JPG Y TEXTOS BLANCOS       */
/* ========================================================= */
:root {
    /* 👑 TAMAÑOS TIPOGRAFÍAS CIERRE */
    --footer-title-size: 1.05rem;              /* Tamaño "¡Los Esperamos!" */
    --footer-name-size: 1.45rem;               /* Tamaño "Estrella" */
    --footer-date-size: 0.82rem;               /* Tamaño fecha */
    --footer-quote-size: 0.76rem;              /* Tamaño frase Reina de Corazones */

    /* 👑 COLORES BLANCOS */
    --footer-title-color: #ffffff;             /* Color "¡Los Esperamos!" */
    --footer-name-color: #ffffff;              /* Color "Estrella" */
    --footer-date-color: #ffffff;              /* Color fecha */
    --footer-quote-color: #ffffff;             /* Color frase Reina de Corazones */
}

/* 🌌 FONDO DE TODA LA SECCIÓN CIERRE CON FOOTER.JPG */
.footer-section-wrapper {
    position: relative;
    width: 100%;
    background-image: url('elementos/footer.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 15px 20px 15px;
    box-sizing: border-box;
    overflow: hidden;
}

/* 🕊️ CONTENEDOR TRANSPARENTE (SIN RECUADRO) */
.respetuosamente {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto 10px auto;
    padding: 10px 15px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center;
    box-sizing: border-box;
}

.respetuosamente::before {
    display: none !important;
}

.rsvp-title-respetuosamente {
    font-family: 'Alice', 'Cinzel', serif;
    font-size: 0.85em;
    color: var(--footer-title-color, #ffffff);
    margin: 0;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.rsvp-title-ninos {
    font-family: 'Alice', 'Cinzel', 'Playfair Display', serif !important;
    font-size: var(--footer-title-size, 1.05rem) !important;
    color: var(--footer-title-color, #ffffff) !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
}

.rsvp-name-quinceanera {
    font-family: 'Alice', 'Cinzel', 'Playfair Display', serif !important;
    font-size: var(--footer-name-size, 1.45rem) !important;
    color: var(--footer-name-color, #ffffff) !important;
    margin: 2px 0 3px 0 !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    line-height: 1.15 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 0 14px rgba(255, 255, 255, 0.4) !important;
}

.rsvp-date-closing {
    font-family: 'Alice', 'Cinzel', serif !important;
    font-size: var(--footer-date-size, 0.82rem) !important;
    font-weight: 600 !important;
    color: var(--footer-date-color, #ffffff) !important;
    letter-spacing: 2.5px !important;
    margin: 2px 0 0 0 !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
}

.queen-quote {
    font-family: 'Alice', 'Cinzel', 'Playfair Display', serif !important;
    font-size: var(--footer-quote-size, 0.76rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    color: var(--footer-quote-color, #ffffff) !important;
    text-transform: uppercase !important;
    line-height: 1.35 !important;
    margin: 8px auto 0 auto !important;
    max-width: 320px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95) !important;
}

/* --- Footer inferior (contrastado con fondo oscuro footer.jpg) --- */
.footer {
    margin-top: 5px;
    font-size: 0.85em;
    color: #ffffff;
    border-top: none;
    background: transparent !important;
    background-color: transparent !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 20px;
    width: 100%;
}

.footer .ring-image-container {
    width: 130px;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}

.footer .back-to-top-link {
    color: #ffffff;
    font-size: 1.4em;
    text-decoration: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.85));
}

.footer .back-to-top-link:hover {
    color: #ffffff;
    transform: translateY(-3px) scale(1.15);
    opacity: 0.9;
}

.footer .back-to-top-text {
    font-family: 'Alice', 'Cinzel', serif;
    font-size: 0.82rem;
    color: #ffffff;
    letter-spacing: 2.5px;
    margin-top: 5px;
    margin-bottom: 10px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

.footer .copyright, .footer .website-url {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85em;
    margin: 4px 0;
    text-align: center;
    color: #ffffff;
}

.footer .copyright a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
    transition: opacity 0.2s ease;
}

.footer .copyright a:hover {
    opacity: 0.85;
    text-decoration: underline !important;
}

/* Redes sociales: solo el icono en blanco sin círculo */
.footer-social-icons {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    align-items: center;
    justify-content: center;
}

.footer-social-icons .social-icon-link {
    width: auto;
    height: auto;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.35rem;
    transition: transform 0.25s ease, opacity 0.25s ease;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.85));
}

.footer-social-icons .social-icon-link:hover {
    background: transparent !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.2);
    opacity: 0.85;
}

/* --- Media Queries para Responsividad --- */
@media (min-width: 769px) {
    /* Mantener carrusel estilo móvil en escritorio */
    .carousel-nav {
        display: block;
    }
}

@media (max-width: 768px) {
    .parents-section {
        flex-direction: column;
        gap: 20px;
        background-position: center;
        margin: 0;
    }

    .parents-text-container {
        max-width: 100%;
        padding: 40px 20px;
    }

    .carousel-wrapper {
        position: relative;
    }
    .carousel-nav {
        display: block;
    }
    .image-carousel {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        gap: 15px;
        overflow-x: hidden;
    }
    .carousel-image {
        flex: 0 0 100%;
        width: 100%;
    }
    .save-the-date-text {
        font-size: 2em;
    }
    .play-button {
        font-size: 3em;
    }
    .play-image-button {
        width: 80px;
        height: auto;
    }

    /* SOLUCIÓN para las flechas del lightbox en móvil */
    .lightbox .lightbox-nav {
        font-size: 1.5em;
        padding: 10px;
        opacity: 0.9;
        display: block !important;
        z-index: 101;
    }
    .lightbox .lightbox-nav.prev-nav { left: 10px; }
    .lightbox .lightbox-nav.next-nav { right: 10px; }

    .lightbox .close-btn {
        z-index: 102;
    }

    .lightbox-image {
        z-index: 100;
    }
}

@media (max-width: 508px) {
    .hero-section {
        min-height: 820px;
    }
    .banner-image {
        min-height: 520px;
        height: 70vh;
        object-fit: cover;
        object-position: center;
    }
    #locationContent {
        padding: 40px 25px;
        margin: 0 auto;
    }
    .rsvp-section {
        padding: 40px 20px;
    }
    .gifts-section {
        padding: 40px 20px;
    }
    .wedding-headline {
        font-size: 2.4em;
        font-weight: normal;
    }
    .wedding-date {
        font-size: 1.8em;
        font-weight: 600;
    }
    .wedding-location {
        font-size: 0.9em;
        font-weight: 400;
        letter-spacing: 2px;
    }
    .ring-image-container {
        width: 160px;
    }
    .love-phrase {
        font-size: 1.15em;
        line-height: 1.6;
        max-width: 380px;
        padding: 0 20px;
    }
    #countdown {
        gap: 15px;
    }
    .number {
        font-size: 2em;
    }
    .label {
        font-size: 0.9em;
    }
    .hero .names {
        font-size: 2.8em;
    }
    .we-get-married {
        font-size: 1.3em;
    }
    h2 {
        font-size: 1.5em;
    }
    .detail-info, .detail-address {
        font-size: 0.9em;
    }
    .map-link, .gift-link, .whatsapp-link, .rsvp-button {
        padding: 8px 15px;
        font-size: 0.8em;
    }
    .banner-image {
        height: 60vh;
        object-fit: cover;
    }
}

/* Nuevo estilo para el botón flotante con Liquid Glass */
.floating-music-button {
    position: fixed;
    bottom: 22px;
    right: max(16px, calc(50vw - 235px));
    background: var(--liquid-glass-bg);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: var(--liquid-glass-border);
    box-shadow: var(--liquid-glass-inner-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 99;
}

.floating-music-button:hover {
    background: var(--liquid-glass-hover);
    border: var(--liquid-glass-border-hover);
    transform: scale(1.1);
    box-shadow: var(--liquid-glass-inner-shadow);
}

.floating-music-button i {
    font-size: 16px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

/* Estilos para el nuevo grupo de radio buttons */
.attendance-options {
    text-align: center;
}

.radio-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.radio-group input[type="radio"] {
    display: none;
}

.radio-group label {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #1b3b6f;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 0.9em;
    font-weight: bold;
    color: #1b3b6f;
}

.radio-group input[type="radio"]:checked + label {
    background-color: #1b3b6f;
    color: #fff;
}

/* ========================================================= */
/* 🎟️ SECCIÓN DE BIENVENIDA PERSONALIZADA DE INVITADO */
/* ========================================================= */
.personalized-guest-section {
    padding: 30px 20px;
    margin: 25px 20px;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: none;
    border: 1px solid #f7e7e9;
    text-align: center;
}

.personalized-guest-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.personalized-icon-wrapper {
    width: 55px;
    height: 55px;
    background-color: #1b3b6f;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(27, 59, 111, 0.25);
}

.personalized-guest-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85em;
    font-weight: 600;
    color: #666666;
    letter-spacing: 2px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.personalized-guest-name {
    font-family: 'Great Vibes', 'Callisten', 'Parisienne', 'Allura', cursive;
    font-size: 2.8em;
    font-weight: normal;
    color: #1b3b6f;
    margin: 4px 0 12px 0;
    line-height: 1.1;
    word-break: break-word;
}

.personalized-passes-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #faf0f1;
    border: 1px solid #f2d6d8;
    color: #1b3b6f;
    padding: 8px 18px;
    border-radius: 25px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9em;
    font-weight: 600;
}

.personalized-passes-badge i {
    font-size: 0.95em;
    color: #1b3b6f;
}

/* Mostrar itinerario (linea del tiempo) */
.timeline-image-section {
    display: block;
    width: 100%;
    margin: 0 auto;
}

/* ========================================================= */
/* 📸 SECCIÓN GALERÍA DE FOTOS Y LIGHTBOX */
/* ========================================================= */

:root {
    /* 📸 CONTROLES DE TIPOGRAFÍA Y COLOR - MI GALERÍA (ESTILO ALICE EN EL PAÍS DE LAS MARAVILLAS) */
    --gallery-title-font: 'Alice', 'Cinzel', 'Playfair Display', serif;
    --gallery-title-mi-color: #f1f5f9;              /* Color plata / blanco suave para "Mi" */
    --gallery-title-mi-size: 1.45rem;               /* Tamaño de "Mi" */
    --gallery-title-mi-letter-spacing: 3px;         /* Espaciado de letras para "Mi" */
    --gallery-title-main-color: #ffffff;            /* Color blanco puro / plata brillante para "Galería" */
    --gallery-title-main-size: 2.35rem;             /* Tamaño de "Galería" */
    --gallery-title-main-letter-spacing: 4px;       /* Espaciado de letras para "Galería" */
    --gallery-title-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.55), 0 0 35px rgba(203, 213, 225, 0.35);

    /* 🪞 CONTROLES MANUALES PARA OBJETO ESPEJO.PNG (MARCO VERTICAL RECTANGULAR) */
    --mirror-gallery-width: 530px;                  /* ↔️ Ancho máximo del marco (ej: 480px, 530px, 580px) */
    --mirror-gallery-scale: 1.15;                   /* 🔍 Escala / Zoom directo del marco (ej: 1.0, 1.15, 1.25) */
    --mirror-gallery-pos-y: 0px;                    /* ↕️ Mover arriba (-) o abajo (+) todo el marco */
    --mirror-glass-width: 41.5%;                    /* ↔️ Ancho del área de foto adaptada al marco rectangular */
    --mirror-glass-height: 57.8%;                   /* ↕️ Alto del área de foto adaptada al marco rectangular */
    --mirror-glass-top: 53.2%;                      /* ↕️ Centro vertical de la foto */
    --mirror-glass-left: 51.7%;                     /* ↔️ Centro horizontal de la foto */
    --mirror-glass-offset-y: 0px;                   /* ↕️ Ajuste fino vertical (+ baja, - sube en px) */
    --mirror-glass-radius: 6px;                     /* 🔲 Bordes rectangulares suaves para las fotos */
}

.gallery-section-wrapper {
    position: relative;
    width: 100%;
    background-image: url('elementos/galeria.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 35px 0 50px 0;
    box-sizing: border-box;
    overflow: hidden;
}

.gallery-title-section {
    display: block !important;
    text-align: center;
    padding: 10px 20px 5px 20px;
    background: transparent !important;
    background-color: transparent !important;
}

.gallery-title-our {
    font-family: var(--gallery-title-font, 'Alice', 'Cinzel', 'Playfair Display', serif) !important;
    font-size: var(--gallery-title-mi-size, 1.45rem) !important;
    color: var(--gallery-title-mi-color, #f1f5f9) !important;
    letter-spacing: var(--gallery-title-mi-letter-spacing, 3px) !important;
    text-shadow: var(--gallery-title-shadow) !important;
    font-style: italic;
    font-weight: 400;
    margin: 0;
    line-height: 1.2;
}

.gallery-title-gallery {
    font-family: var(--gallery-title-font, 'Alice', 'Cinzel', 'Playfair Display', serif) !important;
    font-size: var(--gallery-title-main-size, 2.35rem) !important;
    font-weight: 700 !important;
    letter-spacing: var(--gallery-title-main-letter-spacing, 4px) !important;
    color: var(--gallery-title-main-color, #ffffff) !important;
    text-shadow: var(--gallery-title-shadow) !important;
    margin: 4px 0 15px 0;
    text-transform: uppercase;
    line-height: 1.1;
}

.gallery-container {
    display: block !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 15px 4px 35px 4px;
    overflow: visible !important;
}

/* 🪞 CONTENEDOR PRINCIPAL DEL ESPEJO MÁGICO */
.mirror-carousel-wrapper {
    position: relative;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(var(--mirror-gallery-pos-y, 0px));
    overflow: visible !important;
}

.mirror-carousel-wrapper.reveal {
    opacity: 0;
    transform: translateY(calc(var(--mirror-gallery-pos-y, 0px) + 30px));
}

.mirror-carousel-wrapper.reveal.active {
    opacity: 1;
    transform: translateY(var(--mirror-gallery-pos-y, 0px));
}

/* Escenario con proporción del marco espejo.png */
.mirror-stage {
    position: relative;
    width: 100%;
    max-width: var(--mirror-gallery-width, 530px);
    aspect-ratio: 291 / 357;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(var(--mirror-gallery-scale, 1.15));
    transform-origin: center center;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 25px rgba(147, 197, 253, 0.25));
    transition: transform 0.2s ease, max-width 0.2s ease;
}

/* Área rectangular del vidrio interior donde se proyectan las fotos */
.mirror-glass-area {
    position: absolute;
    top: calc(var(--mirror-glass-top, 53.2%) + var(--mirror-glass-offset-y, 0px));
    left: var(--mirror-glass-left, 51.7%);
    transform: translate(-50%, -50%);
    width: var(--mirror-glass-width, 41.5%);
    height: var(--mirror-glass-height, 57.8%);
    border-radius: var(--mirror-glass-radius, 6px);
    overflow: hidden;
    z-index: 2;
    background-color: #0b1528;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.85);
}

.mirror-stage .image-carousel {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: hidden !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mirror-stage .carousel-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: transform 0.4s ease;
}

.mirror-stage .carousel-image:hover {
    transform: scale(1.05);
}

/* Reflejo mágico sobre el cristal del espejo */
.mirror-glass-sheen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 35%, transparent 55%, rgba(147, 197, 253, 0.15) 100%);
    z-index: 4;
    border-radius: inherit;
}

/* Marco del espejo superpuesto */
.gallery-mirror-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 6;
    pointer-events: none;
    display: block;
}

/* Flechas de navegación del carrusel */
.mirror-carousel-wrapper .carousel-nav {
    position: absolute;
    top: 52%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(17, 35, 68, 0.88);
    color: #ffffff;
    border: 1.5px solid rgba(197, 160, 89, 0.75);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 12px rgba(197, 160, 89, 0.4);
    border-radius: 50%;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    z-index: 25;
    transition: all 0.25s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mirror-carousel-wrapper .carousel-nav:hover {
    background: rgba(27, 59, 111, 0.98);
    border-color: #ffd700;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 215, 0, 0.6);
    transform: translateY(-50%) scale(1.1);
}

.mirror-carousel-wrapper .carousel-nav.prev-nav {
    left: clamp(4px, 2vw, 16px);
}

.mirror-carousel-wrapper .carousel-nav.next-nav {
    right: clamp(4px, 2vw, 16px);
}

/* Modal Lightbox */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.92);
    z-index: 9999999;
    justify-content: center;
    align-items: center;
}

.lightbox-image {
    max-width: 90%;
    max-height: 85vh;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    object-fit: contain;
}

.lightbox .close-btn {
    position: absolute;
    top: 20px;
    right: 25px;
    color: #ffffff;
    font-size: 42px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000000;
    transition: color 0.2s ease, transform 0.2s ease;
    line-height: 1;
}

.lightbox .close-btn:hover {
    color: #e0e0e0;
    transform: scale(1.1);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    z-index: 10000000;
    transition: background 0.3s ease, transform 0.2s ease;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.45);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-nav.prev-nav {
    left: 20px;
}

.lightbox-nav.next-nav {
    right: 20px;
}

/* Estilo compacto para titulos largos de recintos */
.location-title-compact {
    font-size: 1.08em !important;
    line-height: 1.25 !important;
}

/* Iconos sociales en el footer abajo de BY CANÁ */
.footer-social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    margin-bottom: 5px;
}

.footer-social-icons .social-icon-link {
    color: #1b3b6f;
    font-size: 1.15em;
    transition: opacity 0.3s ease, transform 0.2s ease;
    text-decoration: none;
}

.footer-social-icons .social-icon-link:hover {
    opacity: 0.8;
    transform: scale(1.15);
}



/* Tarjeta de Confirmación Exitosa Verde & Llamativa */
.rsvp-success-card {
    background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e9 100%);
    border: 2px solid #a5d6a7;
    border-radius: 16px;
    padding: 16px 14px;
    margin: 10px auto;
    max-width: 390px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 8px 24px rgba(46, 125, 50, 0.16);
    animation: fadeInUp 0.5s ease-out;
    position: relative;
    overflow: hidden;
}

.rsvp-success-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #66bb6a, #2e7d32, #66bb6a);
}

.rsvp-success-card .success-icon-wrapper {
    width: 42px;
    height: 42px;
    background-color: #2e7d32;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 6px auto;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.25);
    animation: pulseCheck 1.8s infinite ease-in-out;
}

.rsvp-success-card .success-icon {
    font-size: 1.35em;
}

.rsvp-success-card .success-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15em;
    font-weight: 700;
    color: #1b5e20;
    margin: 0 0 3px 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.2;
}

.rsvp-success-card .success-divider {
    width: 36px;
    height: 2px;
    background-color: #81c784;
    margin: 4px auto 6px auto;
    border-radius: 2px;
}

.rsvp-success-card .success-message-main {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82em;
    color: #2e7d32;
    line-height: 1.4;
    margin: 0 0 4px 0;
    font-weight: 500;
}

.rsvp-success-card .success-message-sub {
    font-family: 'Parisienne', 'Dancing Script', cursive, sans-serif;
    font-size: 1.15em;
    color: #1b5e20;
    margin: 0 0 4px 0;
    font-weight: 700;
}

@keyframes pulseCheck {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(46, 125, 50, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Pase QR Incrustado en la Confirmación RSVP (Liquid Glass & Rosa) */
.rsvp-confirmation-qr-wrapper {
    margin: 8px auto 6px auto;
    width: 100%;
    max-width: 310px;
    box-sizing: border-box;
}

.rsvp-confirmation-ticket {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(27, 59, 111, 0.4);
    border-radius: 12px;
    padding: 10px 8px;
    box-shadow: 0 6px 18px rgba(27, 59, 111, 0.15);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.rsvp-confirmation-ticket::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1b3b6f 0%, #3b82f6 50%, #1b3b6f 100%);
}

.rsvp-ticket-header {
    margin-bottom: 4px;
}

.rsvp-ticket-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #1b3b6f 0%, #112344 100%);
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(27, 59, 111, 0.3);
    white-space: nowrap !important;
}

.rsvp-ticket-guest-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.18rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 4px 0 2px 0;
    line-height: 1.2;
}

.rsvp-ticket-passes {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: #555555;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rsvp-ticket-qr-box {
    background: #ffffff;
    display: inline-block;
    padding: 6px;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(27, 59, 111, 0.25);
    margin: 2px auto 4px auto;
}

.rsvp-ticket-qr-img {
    width: 125px;
    height: 125px;
    display: block;
    margin: 0 auto;
    border-radius: 6px;
}

.rsvp-ticket-id {
    font-family: monospace;
    font-size: 0.72rem;
    font-weight: 700;
    color: #666666;
    letter-spacing: 1.2px;
    margin: 4px 0 0 0;
}

.rsvp-ticket-hint {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    color: #666666;
    margin: 4px 0 0 0;
    line-height: 1.35;
}

.rsvp-ticket-hint i {
    color: #1b3b6f;
    margin-right: 3px;
}

/* Tarjeta de Invitación No Especificada / Inválida */
.rsvp-invalid-card {
    background-color: transparent;
    border: 1px dashed rgba(27, 59, 111, 0.3);
    border-radius: 14px;
    padding: 22px 18px;
    margin: 15px auto;
    max-width: 420px;
    text-align: center;
    box-shadow: none;
}

.rsvp-invalid-card .invalid-icon {
    font-size: 2.5em;
    color: #1b3b6f;
    margin-bottom: 12px;
}

.rsvp-invalid-card .invalid-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5em;
    font-weight: 700;
    color: #1b3b6f;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
}

.rsvp-invalid-card .invalid-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.92em;
    color: #666666;
    line-height: 1.5;
    margin: 0;
}

/* ========================================================= */
/* ✨ ITINERARIO ESTILIZADO CON RECUADRO PERGAMINO ALICE */
/* ========================================================= */
:root {
    --itinerary-parchment-max-width: 445px;
    --itinerary-title-size: 1.65rem;
    --itinerary-time-size: 0.88rem;
    --itinerary-event-size: 1.25rem;
    --itinerary-sub-size: 0.95rem;
}

.custom-itinerary-wrapper {
    width: 100%;
    padding: 55px 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('elementos/itinerario.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.custom-itinerary-card.itinerary-parchment {
    position: relative;
    width: 95%;
    max-width: var(--itinerary-parchment-max-width, 445px);
    margin: 0 auto;
    padding: 28px 20px 34px 20px;
    border-radius: 20px;
    box-sizing: border-box;
    background: radial-gradient(
        ellipse at 50% 35%,
        rgba(255, 253, 246, 0.96) 0%,
        rgba(252, 247, 235, 0.94) 50%,
        rgba(245, 236, 218, 0.95) 85%,
        rgba(236, 224, 201, 0.97) 100%
    );
    border: 1.5px solid rgba(197, 160, 89, 0.65);
    box-shadow: 
        0 18px 40px -8px rgba(27, 59, 111, 0.32),
        0 6px 16px rgba(0, 0, 0, 0.08),
        inset 0 0 38px rgba(205, 168, 115, 0.28),
        inset 0 1px 2px rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
}

.custom-itinerary-card.itinerary-parchment::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1px dashed rgba(184, 143, 72, 0.45);
    border-radius: 15px;
    pointer-events: none;
}

.itinerary-header {
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.itinerary-tag {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #8c6d3b;
    margin-bottom: 3px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
}

.custom-itinerary-title {
    font-family: 'Alice', 'Cinzel', 'Playfair Display', serif !important;
    font-size: var(--itinerary-title-size, 1.65rem) !important;
    font-weight: 700 !important;
    color: #1b3b6f !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85) !important;
    text-align: center;
    margin: 2px 0 20px 0 !important;
    line-height: 1.2 !important;
    position: relative;
    z-index: 2;
}

.custom-timeline-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    z-index: 2;
}

.custom-timeline-line {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 98px;
    width: 1.5px;
    background: linear-gradient(180deg, rgba(184, 143, 72, 0.2) 0%, rgba(184, 143, 72, 0.65) 50%, rgba(184, 143, 72, 0.2) 100%);
    z-index: 1;
}

.custom-timeline-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    z-index: 2;
}

.custom-timeline-time {
    width: 78px;
    text-align: right;
    font-family: 'Alice', 'Cinzel', serif !important;
    font-size: var(--itinerary-time-size, 0.88rem) !important;
    font-weight: 700 !important;
    color: #8c6d3b !important;
    letter-spacing: 0.5px !important;
    padding-top: 3px;
    flex-shrink: 0;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
}

@keyframes heartBeatPulse {
    0%, 100% {
        transform: scale(1);
        color: #1b3b6f;
        border-color: rgba(197, 160, 89, 0.7);
        box-shadow: 0 2px 6px rgba(27, 59, 111, 0.15);
    }
    50% {
        transform: scale(1.16);
        color: #8c6d3b;
        border-color: #c5a059;
        box-shadow: 0 4px 12px rgba(197, 160, 89, 0.45);
    }
}

@keyframes heartIconBeat {
    0%, 100% {
        transform: scale(1);
    }
    20% {
        transform: scale(1.22);
    }
    35% {
        transform: scale(1.05);
    }
    50% {
        transform: scale(1.18);
    }
}

.custom-timeline-node {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(197, 160, 89, 0.75);
    background: radial-gradient(circle, #ffffff 0%, #fefcf3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1b3b6f;
    font-size: 0.65rem;
    margin: 0 10px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(27, 59, 111, 0.12), 0 0 6px rgba(197, 160, 89, 0.3);
    z-index: 2;
    animation: heartBeatPulse 3s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.custom-timeline-node i {
    display: inline-block;
    animation: heartIconBeat 2.8s ease-in-out infinite;
}

.custom-timeline-row:nth-child(2) .custom-timeline-node,
.custom-timeline-row:nth-child(2) .custom-timeline-node i { animation-delay: 0.2s; }
.custom-timeline-row:nth-child(3) .custom-timeline-node,
.custom-timeline-row:nth-child(3) .custom-timeline-node i { animation-delay: 0.4s; }
.custom-timeline-row:nth-child(4) .custom-timeline-node,
.custom-timeline-row:nth-child(4) .custom-timeline-node i { animation-delay: 0.6s; }
.custom-timeline-row:nth-child(5) .custom-timeline-node,
.custom-timeline-row:nth-child(5) .custom-timeline-node i { animation-delay: 0.8s; }
.custom-timeline-row:nth-child(6) .custom-timeline-node,
.custom-timeline-row:nth-child(6) .custom-timeline-node i { animation-delay: 1.0s; }
.custom-timeline-row:nth-child(7) .custom-timeline-node,
.custom-timeline-row:nth-child(7) .custom-timeline-node i { animation-delay: 1.2s; }
.custom-timeline-row:nth-child(8) .custom-timeline-node,
.custom-timeline-row:nth-child(8) .custom-timeline-node i { animation-delay: 1.4s; }
.custom-timeline-row:nth-child(9) .custom-timeline-node,
.custom-timeline-row:nth-child(9) .custom-timeline-node i { animation-delay: 1.6s; }
.custom-timeline-row:nth-child(10) .custom-timeline-node,
.custom-timeline-row:nth-child(10) .custom-timeline-node i { animation-delay: 1.8s; }

.custom-timeline-info {
    flex: 1;
    text-align: left;
}

.custom-timeline-info .event-title {
    font-family: 'Alice', 'Cinzel', serif !important;
    font-size: var(--itinerary-event-size, 1.25rem) !important;
    font-weight: 700 !important;
    color: #1b3b6f !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.4px !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
}

.custom-timeline-info .event-sub {
    font-family: 'Cormorant Garamond', 'Lora', serif !important;
    font-style: italic !important;
    font-size: var(--itinerary-sub-size, 0.95rem) !important;
    font-weight: 500 !important;
    color: #475569 !important;
    margin: 2px 0 0 0 !important;
    line-height: 1.25 !important;
}

/* ========================================================= */
/* 🎟️ SECCIÓN BOLETO / PASE DIGITAL CON CÓDIGO QR */
/* ========================================================= */
.digital-ticket-section {
    padding: 30px 20px;
    background: #fafafa;
    text-align: center;
}

.digital-ticket-card {
    background: #ffffff;
    border-radius: 16px;
    border: 2px dashed #60a5fa;
    box-shadow: 0 8px 24px rgba(27, 59, 111, 0.12);
    overflow: hidden;
    position: relative;
    max-width: 380px;
    margin: 0 auto;
}

.ticket-header {
    background: linear-gradient(135deg, #1b3b6f 0%, #112344 100%);
    color: #fff;
    padding: 20px 15px;
}

.ticket-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.ticket-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin: 4px 0 2px 0;
    font-weight: 600;
}

.ticket-quinceanera {
    font-family: 'against', 'Callisten', 'Parisienne', cursive;
    font-size: 2.2rem;
    margin: 0;
    line-height: 1;
}

.ticket-divider {
    position: relative;
    height: 20px;
    background: #fff;
    display: flex;
    align-items: center;
}

.ticket-notch {
    width: 20px;
    height: 20px;
    background-color: #fafafa;
    border-radius: 50%;
    position: absolute;
    top: 0;
}

.ticket-notch.left {
    left: -10px;
}

.ticket-notch.right {
    right: -10px;
}

.ticket-line {
    flex: 1;
    border-top: 2px dashed #60a5fa;
    margin: 0 15px;
}

.ticket-body {
    padding: 15px 20px 25px 20px;
}

.ticket-guest-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.45rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 6px;
}

.ticket-passes-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fdf2f4;
    color: #1b3b6f;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 16px;
}

.ticket-qr-wrapper {
    background: #fff;
    display: inline-block;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #f0e6e8;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    margin-bottom: 12px;
}

.ticket-qr-img {
    width: 190px;
    height: 190px;
    display: block;
    margin: 0 auto;
}

.ticket-code-id {
    font-family: monospace;
    font-weight: 700;
    font-size: 0.95rem;
    color: #1b3b6f;
    margin: 8px 0 0 0;
    letter-spacing: 1.5px;
}

.ticket-instructions {
    font-size: 0.78rem;
    color: #777;
    line-height: 1.4;
    margin: 8px 0 0 0;
}

/* ========================================================= */
/* 🏨 SECCIÓN HOTELES / HOSPEDAJE RECOMENDADO (EXPEDIA STYLE) */
/* ========================================================= */
.hotels-section {
    padding: 55px 15px 60px 15px;
    background-image: url('elementos/hotel.jpg') !important;
    background-attachment: fixed !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* Objetos decorativos esquinas superiores */
:root {
    --hotels-superiord-top: -5px;
    --hotels-superiord-right: -18px;
    --hotels-superiord-width: 82px;
    --hotels-superiori-top: -5px;
    --hotels-superiori-left: -5px;
    --hotels-superiori-width: 85px;
}

.hotels-deco-superiord {
    position: absolute;
    top: var(--hotels-superiord-top, -5px);
    right: var(--hotels-superiord-right, -18px);
    width: var(--hotels-superiord-width, 82px);
    max-width: 25%;
    height: auto;
    pointer-events: none;
    z-index: 1;
    display: block;
}

.hotels-deco-superiori {
    position: absolute;
    top: var(--hotels-superiori-top, -5px);
    left: var(--hotels-superiori-left, -5px);
    width: var(--hotels-superiori-width, 85px);
    max-width: 25%;
    height: auto;
    pointer-events: none;
    z-index: 1;
    display: block;
}

.hotels-container-inner {
    max-width: 440px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hotels-title-sub {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1em;
    font-weight: 600;
    color: #1b3b6f;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin: 0;
}

.hotels-title-main {
    font-family: 'Great Vibes', 'Allura', 'Parisienne', cursive;
    font-size: 2.9em;
    color: #1b3b6f;
    font-weight: normal;
    line-height: 1.1;
    margin: 0 0 10px 0;
}

.hotels-intro-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88em;
    color: #4a5568;
    margin: 0 auto 28px auto;
    max-width: 380px;
    line-height: 1.5;
}

.hotel-cards-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 410px;
    margin: 0 auto;
}

/* Expedia-Style Hotel Cards */
.hotel-card-expedia {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(27, 59, 111, 0.18);
    border: 1px solid rgba(27, 59, 111, 0.32);
    text-align: left;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hotel-card-expedia:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(27, 59, 111, 0.26);
}

.hotel-img-wrapper {
    position: relative;
    width: 100%;
    height: 165px;
    overflow: hidden;
    background: #f3f4f6;
}

.hotel-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.hotel-card-expedia:hover .hotel-card-img {
    transform: scale(1.03);
}

.hotel-badge-tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(15, 15, 20, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.3px;
}

.hotel-badge-tag i {
    color: #1b3b6f;
    font-size: 0.78rem;
}

.hotel-card-content {
    padding: 16px 18px 18px 18px;
}

.hotel-card-content .hotel-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #718096;
    margin: 0 0 6px 0;
    line-height: 1.25;
}

.hotel-card-content .hotel-address {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0 0 8px 0;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.hotel-card-content .hotel-address i {
    color: #1b3b6f;
    font-size: 0.88rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.hotel-phone-row {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    color: #4b5563;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.hotel-phone-row i {
    color: #1b3b6f;
    font-size: 0.82rem;
}

.hotel-phone-link {
    color: #374151;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
    cursor: pointer;
}

.hotel-phone-link:hover {
    color: #1b3b6f;
    text-decoration: underline;
}

.hotel-route-wrap {
    margin-top: 6px;
}

.btn-hotel-route {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    background: var(--liquid-glass-bg);
    color: #ffffff !important;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 11px 18px;
    border-radius: 25px;
    border: var(--liquid-glass-border);
    box-shadow: var(--liquid-glass-inner-shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.25s ease;
}

.btn-hotel-route:hover {
    background: var(--liquid-glass-hover);
    border: var(--liquid-glass-border-hover);
    transform: translateY(-2px);
    box-shadow: var(--liquid-glass-inner-shadow);
    color: #ffffff !important;
}

.btn-hotel-route i {
    font-size: 0.88rem;
}

/* ========================================================= */
/* 🌴 SECCIÓN LUGARES PARA CONOCER (TURISMO & RESTAURANTES) */
/* ========================================================= */
.places-section {
    padding: 45px 20px 45px 20px;
    background: transparent;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.places-container-inner {
    max-width: 440px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Objetos decorativos esquinas superiores de lugares/turismo */
:root {
    --places-superiord-top: -5px;
    --places-superiord-right: -18px;
    --places-superiord-width: 82px;
    --places-superiori-top: -5px;
    --places-superiori-left: -5px;
    --places-superiori-width: 85px;
}

.places-deco-superiord {
    position: absolute;
    top: var(--places-superiord-top, -5px);
    right: var(--places-superiord-right, -18px);
    width: var(--places-superiord-width, 82px);
    max-width: 25%;
    height: auto;
    pointer-events: none;
    z-index: 1;
    display: block;
}

.places-deco-superiori {
    position: absolute;
    top: var(--places-superiori-top, -5px);
    left: var(--places-superiori-left, -5px);
    width: var(--places-superiori-width, 85px);
    max-width: 25%;
    height: auto;
    pointer-events: none;
    z-index: 1;
    display: block;
}

.places-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 440px;
    margin: 20px auto 0 auto;
}

.place-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(27, 59, 111, 0.22);
    border-radius: 0;
    padding: 16px 2px;
    box-shadow: none;
    text-align: left;
}

.place-item:last-child {
    border-bottom: none;
}

.place-item-text {
    flex: 1;
    min-width: 0;
}

.place-item-text h4 {
    margin: 0 0 4px 0;
    font-size: 1.25rem;
    color: #718096;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.25;
}

.place-item-text p {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    font-size: 0.82rem;
    color: #555;
    line-height: 1.45;
}

.place-item-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}

.place-item-thumb img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(27, 59, 111, 0.35);
    box-shadow: 0 4px 12px rgba(27, 59, 111, 0.2);
    display: block;
    transition: transform 0.25s ease;
}

.place-item:hover .place-item-thumb img {
    transform: scale(1.05);
}

.place-phone-link {
    font-family: 'Montserrat', sans-serif;
    color: #1b3b6f;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 0.8rem;
}