/* ============================================
   BODA REAL - ESTILOS UNIFICADOS
   ============================================ */

/* --- VARIABLES GLOBALES --- */
/* Estilos para la Landing de Bienvenida */
/* --- LANDING: SPLIT SÓLIDO (APERTURA ARRIBA/ABAJO) --- */
/* Agrega esto a tu styles.css para evitar el scroll inicial */
/* Asegura que el fondo se mantenga estético en modo pantalla completa */
:fullscreen body {
    background-color: var(--marfil); /* O el color de fondo de tu invitación */
    width: 100%;
    height: 100%;
}
/* =============================================
   BOTÓN DE MÚSICA FLOTANTE MINIMALISTA Y ELEGANTE
   ============================================= */
.music-control-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(26, 23, 20, 0.75); /* Fondo cristal oscuro */
    border: 1px solid var(--oro-solido); /* Borde de oro fino */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 0 0px rgba(197, 160, 89, 0);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    z-index: 1000; /* Siempre por encima */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0; /* Oculto inicialmente para fade-in */
    visibility: hidden;
}

/* Estado visible (se activa por JS) */
.music-control-btn.fade-in {
    opacity: 1;
    visibility: visible;
}

/* Efecto Hover elegante */
.music-control-btn:hover {
    background-color: rgba(26, 23, 20, 0.9);
    border-color: var(--oro-seda);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 10px rgba(197, 160, 89, 0.4);
}

/* Estilo de los iconos SVG */
.music-control-btn svg {
    width: 22px;
    height: 22px;
    fill: var(--oro-solido); /* Relleno en oro sólido */
    transition: all 0.3s ease;
    position: absolute;
}

/* Lógica de visibilidad de iconos */
.music-control-btn .icon-pause {
    opacity: 0; /* Pause oculto por defecto */
}

.music-control-btn.playing .icon-play {
    opacity: 0; /* Play se oculta al reproducir */
}

.music-control-btn.playing .icon-pause {
    opacity: 1; /* Pause se muestra al reproducir */
}

/* Animación de pulsación cuando se reproduce música */
.music-control-btn.playing {
    animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
    0% {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 0 0px rgba(197, 160, 89, 0.5);
    }
    70% {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 0 10px rgba(197, 160, 89, 0);
    }
    100% {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 0 0px rgba(197, 160, 89, 0);
    }
}
body.no-scroll {
    overflow: hidden;
    height: 100vh;
}
.split-solido-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 10000;
    /* Evita que se vea el fondo blanco al abrir */
    background-color: transparent; 
    pointer-events: none; /* Para que al ocultarse no estorbe */
}

/* Base para ambos paneles */
.panel-solido {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50vh; /* Cada uno ocupa exactamente la mitad */
    pointer-events: auto; /* Reactiva los clics dentro de los paneles */
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 10;
}

/* ========================================= */
/* PANEL SUPERIOR (Color Sólido) */
/* ========================================= */
.panel-arriba {
    top: 0;
    background-color: var(--marfil);
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Empuja el texto hacia el corte central */
    padding-bottom: 20px;
}

.contenido-arriba {
    text-align: center;
    width: 90%;
    max-width: 800px;
}

.tag-bienvenida {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 8px;
    color: var(--oro-solido);
    margin-bottom: 5px;
}

.contenedor-nombre {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px; /* Margen de seguridad para que el nombre no toque los bordes */
    box-sizing: border-box;
}

.nombre-invitado {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    color: var(--texto-dark);
    margin: 0;
    text-transform: uppercase;
    white-space: nowrap; /* Fuerza una sola línea */
    display: inline-block;
    
    /* El mínimo es 0.5rem para que el JS pueda achicarlo lo necesario */
    font-size: clamp(0.5rem, 5vw, 3.5rem); 
    
    letter-spacing: 2px; /* Espaciado elegante pero más compacto */
    transition: font-size 0.2s ease;
}

/* ========================================= */
/* PANEL INFERIOR (Imagen de Fondo) */
/* ========================================= */
.panel-abajo {
    bottom: 0;
    /* Usamos una foto temporal de internet para probar */
    background-image: url('assets/img/tu-imagen-fondo.webp'); 
    
    background-size: cover;
    background-position: center top;
    background-color: var(--bg-oscuro); 
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 30px;
}

.overlay-oscuro {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
  
    z-index: 1;
}

.contenido-abajo {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- BOTÓN SÓLIDO LLAMATIVO --- */
.btn-ingresar-solido {
    background-color: var(--bg-oscuro); 
    color: var(--marfil);
    border: 2px solid var(--oro-solido);
    padding: 16px 50px;
    margin-bottom: 25px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    transition: transform 0.3s;
}

.btn-txt-solido {
    position: relative;
    z-index: 2;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 6px;
    font-weight: 600;
}

/* Efecto barrido de luz */
.btn-ingresar-solido::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 30%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.8), transparent);
    transform: skewX(-20deg);
    animation: luz-barrido 3.5s infinite;
    z-index: 1;
}

@keyframes luz-barrido {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

.btn-ingresar-solido:hover {
    transform: translateY(-3px) scale(1.05);
}

/* --- RECUADRO DE PASES 100% SÓLIDO --- */
.recuadro-pases-solido {
    background-color: var(--marfil); 
    border: 2px solid var(--oro-solido);
    padding: 12px 35px;
    text-align: center;
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}

.pases-titulo {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 4px;
    color: var(--texto-dark);
    margin-bottom: 5px;
}

.pases-numero {
    display: block;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1.8rem;
    color: var(--oro-solido);
    font-weight: bold;
}

/* ========================================= */
/* LA ANIMACIÓN DE CORTE (Sin Opacidad) */
/* ========================================= */
/* El panel de arriba se va al techo */
.split-solido-overlay.is-open .panel-arriba {
    transform: translateY(-100%); 
}
/* El panel de abajo se va al piso */
.split-solido-overlay.is-open .panel-abajo {
    transform: translateY(100%); 
}
:root {
    /* Colores Oro */
    --oro-textura: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    --oro-degradado: linear-gradient(135deg, #bf953f 0%, #fcf6ba 45%, #b38728 70%, #fbf5b7 85%, #aa771c 100%);
    --oro-solido: #c5a059;
    --oro-fino: #c5a059;
    --oro-seda: #d4af37;
    --oro-rosado: #e7c09d;
    --oro-suave: #d4af37;

    /* Fondos */
    --bg-oscuro: #0a0a0a;
    --bg-claro: #fdfbf9;
    --bg-moca: #1a1816;
    --bg-moca-deep: #1a1714;
    --seda: #fcfaf8;
    --marfil: #fdfbf9;

    /* Textos */
    --texto-dark: #3d3a35;
    --texto-oscuro: #3d3a35;
    --texto: #4a443f;
    --blanco-etereo: rgba(255, 255, 255, 0.9);
    --rosa-ceniza: #8d7770;

    /* Fuentes */
    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Montserrat', sans-serif;
    --font-script: 'Monsieur La Doulaise', cursive;
    --font-titulo: 'Tenor Sans', sans-serif;
    --font-alex: 'Alex Brush', cursive;

    /* Transiciones */
    --ease: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-lujo: cubic-bezier(0.23, 1, 0.32, 1);
    --sombra-elegante: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* --- RESET GLOBAL --- */
* {
    box-sizing: border-box;
}

body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: var(--font-serif);
    background: var(--bg-oscuro);
    color: white;
    overflow-x: hidden;
}

/* ============================================
   SECCIÓN 1: PORTADA (HERO)
   ============================================ */
.stage {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    overflow: hidden;
}

.main-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    filter: brightness(0.6) contrast(1.1);
    animation: kenBurns 20s infinite alternate;
}

@media (min-width: 769px) {
    .main-photo {
        background-image: url('assets/img/boda-desktop.webp');
    }
}

@media (max-width: 768px) {
    .main-photo {
        background-image: url('assets/img/boda-mobile.webp');
    }
}

@keyframes kenBurns {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.15) translateY(-2%);
    }
}

.overlay-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    width: 90%;
    overflow: visible;
}

.names-box {
    display: block;
    margin-bottom: 20px;
    overflow: visible;
}

.name {
    font-family: var(--font-script);
    font-size: clamp(4rem, 15vw, 9rem);
    display: block;
    line-height: 1.4;
    padding: 0.1em 0;
    margin: -0.2em 0;
    background: var(--oro-textura);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
    animation: float 4s ease-in-out infinite;
}

.ampersand {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-style: italic;
    color: white;
    display: block;
    margin: 5px 0;
    opacity: 0.8;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.date-badge {
    display: inline-block;
    margin-top: 20px;
    padding: 15px 40px;
    border-top: 1px solid var(--oro-solido);
    border-bottom: 1px solid var(--oro-solido);
    position: relative;
    animation: fadeIn 3s ease-out;
}

.date-badge::before,
.date-badge::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border: 1px solid var(--oro-solido);
    transform: translateY(-50%) rotate(45deg);
}

.date-badge::before {
    left: -5px;
}

.date-badge::after {
    right: -5px;
}

.date-text {
    font-size: 1.4rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-weight: 300;
}

.location-text {
    display: block;
    font-size: 0.9rem;
    letter-spacing: 8px;
    margin-top: 10px;
    color: var(--oro-solido);
    font-style: italic;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 600px) {
    .date-text {
        font-size: 1rem;
        letter-spacing: 3px;
    }

    .location-text {
        font-size: 0.7rem;
        letter-spacing: 4px;
    }

    .name {
        line-height: 1.2;
    }
}

/* Iniciales landing page (Imagen) */
.iniciales-landing-img {
    width: 140px; /* Tamaño recomendado, ajústalo según tu PNG */
    max-width: 80%;
    height: auto;
    margin-bottom: 20px;
    object-fit: contain;
    /* opcional: si tu png es negro y quieres que se vea dorado, puedes usar CSS filter, 
       pero lo ideal es que el PNG ya tenga el color dorado correcto */
}

/* ============================================
   SECCIÓN 2: CONTADOR — Constelación de cristal
   Fondos: cielo nocturno con estrellas animadas
   Tarjetas: rombos glassmorphism flotantes
   ============================================ */
.countdown-dark-section {
    background: radial-gradient(ellipse at 20% 60%, #2a1b12 0%, #140b05 40%, #0a0807 100%);
    padding: 130px 20px 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
    margin-bottom: -60px;
    z-index: 2;
}

/* Estrellas animadas — capa 1 */
.countdown-dark-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.8) 0%, transparent 100%),
        radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 40% 8%, rgba(255,255,255,0.9) 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 22%, rgba(197,160,89,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 75% 50%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(2px 2px at 85% 10%, rgba(255,255,255,0.9) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 70%, rgba(197,160,89,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 15% 75%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 50% 90%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 80%, rgba(197,160,89,0.5) 0%, transparent 100%),
        radial-gradient(2px 2px at 5% 45%, rgba(255,255,255,0.8) 0%, transparent 100%);
    animation: twinkle 6s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

/* Nebulosa dorada central */
.countdown-dark-section::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(197,160,89,0.07) 0%, rgba(145,110,75,0.06) 40%, transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    animation: nebula-pulse 8s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes twinkle {
    0%   { opacity: 0.6; }
    50%  { opacity: 1; }
    100% { opacity: 0.7; }
}
@keyframes nebula-pulse {
    0%   { transform: translate(-50%,-50%) scale(1); }
    100% { transform: translate(-50%,-50%) scale(1.3); }
}

.timer-grid {
    position: relative;
    z-index: 5;
    display: flex;
    gap: 20px;
    text-align: center;
    align-items: center;
}

/* Separador — raya diagonal dorada entre bloques */
.timer-grid .t-sep {
    width: 1px;
    height: 80px;
    background: linear-gradient(to bottom, transparent, var(--oro-solido), transparent);
    opacity: 0.4;
    flex-shrink: 0;
}

.t-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(197,160,89,0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 30px 35px 25px;
    position: relative;
    clip-path: polygon(15px 0%, 100% 0%, calc(100% - 15px) 100%, 0% 100%);
    min-width: 110px;
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.t-block:hover {
    transform: translateY(-8px);
    border-color: rgba(197,160,89,0.4);
}

.t-num {
    font-family: var(--font-sans);
    font-size: clamp(3.5rem, 11vw, 7rem);
    font-weight: 100;
    line-height: 1;
    background: var(--oro-degradado);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: shimmer 5s linear infinite;
    filter: drop-shadow(0 0 15px rgba(197, 160, 89, 0.4));
}

@keyframes shimmer {
    to { background-position: 200% center; }
}

.t-lbl {
    color: rgba(197,160,89,0.7);
    font-family: var(--font-sans);
    font-size: 0.55rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-top: 12px;
    display: block;
}

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

@media (max-width: 768px) {
    .countdown-dark-section {
        clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
        padding: 100px 10px 120px;
    }
    .timer-grid {
        gap: 8px;
    }
    .t-block {
        padding: 20px 18px 16px;
        min-width: 80px;
    }
    .t-num {
        font-size: 3rem;
    }
    .timer-grid .t-sep {
        height: 50px;
    }
}

/* ============================================
   SECCIÓN 3: PADRES — Fondo de papel verjurado
   Forma: ola superior que viene del countdown
   Layout: dos columnas separadas por línea dorada central
   ============================================ */
.parents-section {
    padding: 120px 20px 140px;
    text-align: center;
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c5a059' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(170deg, #fdfbf9 0%, #f8f0e6 50%, #f0e6d8 100%);
    position: relative;
    z-index: 1;
    padding-top: 100px;
}

/* Línea dorada central divisora */
.parents-section::before {
    content: "";
    position: absolute;
    top: 120px;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(197,160,89,0.35), transparent);
    pointer-events: none;
    display: none;
}

/* Ornamento central floral */
.parents-section::after {
    content: "✦";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    color: rgba(197,160,89,0.3);
    pointer-events: none;
    display: none;
}

.parents-grid {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 0;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    align-items: center;
}

/* La columna separadora */
.parents-grid::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    width: 1px;
    height: 80%;
    background: linear-gradient(to bottom, transparent, rgba(197,160,89,0.4), transparent);
    justify-self: center;
}

.parent-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 40px 30px;
}

/* Borde redondeado izquierdo */
.parent-col:first-child {
    border-right: none;
}

.lottie-parents-container {
    width: 150px;
    height: 150px;
    margin-bottom: 25px;
    position: relative;
    border-radius: 50%;
    background: rgba(197,160,89,0.04);
    box-shadow: 0 0 0 1px rgba(197,160,89,0.12), 0 0 0 8px rgba(197,160,89,0.03);
}

.lottie-parents-container::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 110px; height: 110px;
    background: radial-gradient(circle, rgba(197,160,89,0.12) 0%, transparent 70%);
    z-index: 0;
    animation: pulseGlowLight 3s infinite alternate;
    border-radius: 50%;
}

@keyframes pulseGlowLight {
    from { opacity: 0.4; transform: translate(-50%,-50%) scale(0.9); }
    to   { opacity: 1; transform: translate(-50%,-50%) scale(1.1); }
}

.lottie-file {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.parent-role {
    font-family: var(--font-sans);
    font-size: 0.6rem;
    letter-spacing: 7px;
    color: var(--oro-fino);
    text-transform: uppercase;
    margin-bottom: 20px;
    display: block;
}

.parent-names {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    color: var(--texto-oscuro);
    line-height: 1.15;
}

.parent-names b {
    font-weight: 600;
    display: block;
}

.parent-names span {
    font-family: var(--font-script);
    color: var(--oro-fino);
    font-size: 1.1em;
    display: inline;
}

/* ============================================
   HONOR — Fondo oscuro con corte diagonal izquierdo
   Padrinos en tarjetas con borde iluminado al hover
   ============================================ */
.honor-section {
    background: linear-gradient(135deg, #2c1a0e 0%, #3d2510 30%, #1e1008 70%, #130a04 100%);
    padding: 160px 20px;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);
    margin-top: -40px;
    margin-bottom: -40px;
    z-index: 3;
}

/* Textura: patrón de rombos dorados */
.honor-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0 L40 20 L20 40 L0 20 Z' fill='none' stroke='%23c5a059' stroke-width='0.3' stroke-opacity='0.08'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Resplandor rojizo superior */
.honor-section::after {
    content: "";
    position: absolute;
    top: -100px; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 400px;
    background: radial-gradient(ellipse, rgba(180,100,40,0.12) 0%, transparent 70%);
    pointer-events: none;
}

.padrinos-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.padrino-item {
    flex: 1;
    min-width: 260px;
    max-width: 320px;
    transition: transform 0.5s cubic-bezier(0.23,1,0.32,1);
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(197,160,89,0.12);
    padding: 50px 30px 40px;
    position: relative;
    backdrop-filter: blur(4px);
}

/* Esquina superior derecha luminosa */
.padrino-item::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 40px; height: 40px;
    border-top: 1px solid rgba(197,160,89,0.5);
    border-right: 1px solid rgba(197,160,89,0.5);
    transition: all 0.4s ease;
}
.padrino-item::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 40px; height: 40px;
    border-bottom: 1px solid rgba(197,160,89,0.5);
    border-left: 1px solid rgba(197,160,89,0.5);
    transition: all 0.4s ease;
}

.padrino-item:hover {
    transform: translateY(-12px);
    border-color: rgba(197,160,89,0.35);
}
.padrino-item:hover::before, .padrino-item:hover::after {
    width: 60px; height: 60px;
}

.lottie-padrino-container {
    width: 150px;
    height: 150px;
    margin: 0 auto 25px;
    position: relative;
}

.lottie-padrino-container::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 100px; height: 100px;
    background: radial-gradient(circle, rgba(197,160,89,0.15) 0%, transparent 70%);
    z-index: 0;
    animation: pulseGlowDark 3s infinite alternate;
}

@keyframes pulseGlowDark {
    from { opacity: 0.4; }
    to   { opacity: 1; }
}

.padrino-names {
    font-family: var(--font-serif);
    font-size: 1.9rem;
    font-weight: 300;
    color: rgba(255,255,255,0.9);
    line-height: 1.2;
}

.padrino-names i {
    font-family: var(--font-script);
    color: var(--oro-fino);
    display: block;
    margin: 5px 0;
    font-size: 1.4rem;
}

.thanks-note {
    font-family: var(--font-serif);
    font-style: italic;
    color: rgba(255,255,255,0.45);
    margin-top: 15px;
    font-size: 0.95rem;
}

/* ============================================
   CEREMONIA — Arco de catedral
   Fondo oscuro con bóveda dorada superior
   ============================================ */
.ceremonia-section {
    background: linear-gradient(180deg, #0a0806 0%, #111009 60%, #0a0807 100%);
    padding: 180px 20px 160px;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

/* Arco luminoso superior — crea efecto de bóveda */
.ceremonia-section::before {
    content: "";
    position: absolute;
    top: -300px; left: 50%;
    transform: translateX(-50%);
    width: 800px; height: 600px;
    background: radial-gradient(ellipse at 50% 80%, rgba(197,160,89,0.09) 0%, rgba(100,60,20,0.04) 40%, transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

/* Vetillas doradas tipo vitrales */
.ceremonia-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to bottom right, rgba(197,160,89,0.02) 1px, transparent 1px),
        linear-gradient(to bottom left, rgba(197,160,89,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

/* Arco decorativo SVG inline superior */
.ceremonia-arch {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: min(500px, 90%);
    opacity: 0.15;
    pointer-events: none;
}

.church-lottie-box {
    width: 200px;
    height: 200px;
    margin: 0 auto 40px;
    filter: drop-shadow(0 0 25px rgba(197,160,89,0.2));
    position: relative;
    z-index: 2;
}

.church-title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 6vw, 3.5rem);
    margin-bottom: 20px;
    font-style: italic;
    color: white;
    position: relative;
    z-index: 2;
}

.church-info {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    letter-spacing: 4px;
    font-weight: 100;
    color: rgba(197,160,89,0.7);
    line-height: 2.2;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.btn-mapa {
    display: inline-block;
    padding: 18px 55px;
    border: 1px solid rgba(197,160,89,0.35);
    color: rgba(197,160,89,0.9);
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    transition: all 0.5s var(--ease);
    position: relative;
    z-index: 2;
    background: rgba(197,160,89,0.04);
    clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
}

.btn-mapa:hover {
    background: rgba(197,160,89,0.15);
    color: #fff;
    letter-spacing: 7px;
    border-color: rgba(197,160,89,0.7);
}

@media (max-width: 768px) {
    .parents-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .parents-grid::before { display: none; }
    .honor-section {
        clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%);
        margin-top: -20px;
        margin-bottom: -20px;
    }
    .padrinos-grid { gap: 24px; }
    .padrino-item { min-width: 240px; padding: 40px 20px 30px; }
}

/* ============================================
   SECCIÓN 4: RECEPCIÓN — Sello de lujo en relieve
   Forma: panel centrado con esquinas cortadas (octogonal)
   Fondo: marrón oscuro con vetas doradas
   ============================================ */
.section-recepcion {
    padding: 140px 20px 160px;
    text-align: center;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(197,160,89,0.015) 0px,
            rgba(197,160,89,0.015) 1px,
            transparent 1px,
            transparent 12px
        ),
        linear-gradient(160deg, #1e1409 0%, #2e1e0d 40%, #1a1008 70%, #110a04 100%);
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
    margin-top: -30px;
    margin-bottom: -30px;
    z-index: 4;
}

/* Halo superior dorado */
.section-recepcion::before {
    content: "";
    position: absolute;
    top: -200px; left: 50%;
    transform: translateX(-50%);
    width: 700px; height: 500px;
    background: radial-gradient(ellipse at 50% 80%, rgba(197,160,89,0.1) 0%, transparent 65%);
    pointer-events: none;
}

/* Líneas decorativas horizontales */
.section-recepcion::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, transparent 0%, rgba(197,160,89,0.04) 50%, transparent 100%);
    background-size: 100% 80px;
    pointer-events: none;
}

.recepcion-placa {
    max-width: 720px;
    margin: 0 auto;
    border: 1px solid rgba(197,160,89,0.25);
    padding: 70px 40px;
    position: relative;
    background: rgba(10,8,5,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px);
    will-change: transform;
}

/* 4 esquinas luminosas */
.recepcion-placa::before {
    content: "";
    position: absolute;
    top: 12px; left: 12px; right: 12px; bottom: 12px;
    border: 0.5px solid rgba(197,160,89,0.1);
    clip-path: polygon(18px 0%, calc(100% - 18px) 0%, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0% calc(100% - 18px), 0% 18px);
    pointer-events: none;
}

.lottie-recepcion-wrap {
    width: 180px;
    height: 180px;
    margin: 0 auto 30px;
    filter: drop-shadow(0 0 20px rgba(197,160,89,0.25));
}

.tag-gala {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: var(--oro-seda);
    margin-bottom: 20px;
    display: block;
    opacity: 0.8;
}

.salon-title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 300;
    margin-bottom: 20px;
    color: white;
    font-style: italic;
}

.map-btn-luxury {
    display: inline-block;
    margin-top: 40px;
    padding: 18px 60px;
    background: transparent;
    border: 1px solid rgba(197,160,89,0.45);
    color: var(--oro-seda);
    font-family: var(--font-sans);
    font-size: 0.65rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.5s var(--ease-lujo);
    clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}

.map-btn-luxury:hover {
    background: rgba(197,160,89,0.12);
    color: white;
    letter-spacing: 7px;
}

/* ============================================
   CRONOGRAMA — Fondo crema con línea de tiempo
   lateral y tarjetas alternadas con acento diagonal
   ============================================ */
.section-cronograma {
    padding: 120px 20px 180px;
    position: relative;
    background:
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='0.8' fill='%23c5a059' fill-opacity='0.12'/%3E%3C/svg%3E"),
        linear-gradient(170deg, #faf4ec 0%, #f2e6d4 50%, #e8d8c0 100%);
    overflow: hidden;
    z-index: 1;
}

.section-cronograma::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 0% 50%, rgba(197,160,89,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 50%, rgba(197,160,89,0.06) 0%, transparent 50%);
    pointer-events: none;
}

.cronograma-header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}

/* Línea decorativa debajo del título */
.cronograma-header::after {
    content: "— ✦ —";
    display: block;
    margin-top: 15px;
    color: rgba(197,160,89,0.5);
    font-size: 0.9rem;
    letter-spacing: 10px;
}

.cronograma-subtitle {
    font-family: var(--font-sans);
    font-size: 0.6rem;
    letter-spacing: 8px;
    color: var(--oro-fino);
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.cronograma-title {
    font-family: var(--font-alex);
    font-size: clamp(3rem, 10vw, 5rem);
    font-weight: 100;
    margin: 0;
    color: var(--texto-dark);
    line-height: 1;
}

.constelacion-wrapper {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

/* La línea central vertical del timeline */
.hilo-seda {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 0;
    background: linear-gradient(to bottom, transparent, rgba(197,160,89,0.6), transparent);
    transform: translateX(-50%);
    opacity: 0.5;
    z-index: 1;
    transition: height 0.3s ease-out;
}

.constelacion-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 100px;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s var(--ease-lujo);
}

.constelacion-item.active {
    opacity: 1;
    transform: translateY(0);
}

.item-content {
    width: 40%;
    text-align: right;
    padding: 0 40px;
}

/* La tarjeta de contenido tiene borde izquierdo dorado */
.item-content > * {
    position: relative;
}

.item-lottie {
    width: 20%;
    display: flex;
    justify-content: center;
    position: relative;
    flex-direction: column;
    align-items: center;
}

.item-vacio {
    width: 40%;
}

.constelacion-item:nth-child(even) {
    flex-direction: row-reverse;
}

.constelacion-item:nth-child(even) .item-content {
    text-align: left;
}

.lottie-nucleo {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(197,160,89,0.12) 0%, transparent 70%);
    border-radius: 50%;
    animation: floating 6s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}

.time-constelacion {
    font-family: var(--font-script);
    font-size: 2.4rem;
    color: var(--oro-solido);
    display: block;
    line-height: 1;
}

.event-constelacion {
    font-family: var(--font-serif);
    font-size: 1.7rem;
    font-weight: 300;
    color: var(--texto-dark);
    margin: 5px 0 0;
}

.punto-iluminado {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--oro-seda);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(197,160,89,0.15), 0 0 20px rgba(197,160,89,0.5);
    z-index: 3;
}

@media (max-width: 768px) {
    .section-recepcion {
        clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%);
        margin-top: -15px;
        margin-bottom: -15px;
    }
    .recepcion-placa { padding: 40px 20px; }
    .constelacion-wrapper {
        border: 1px solid rgba(197,160,89,0.2);
        padding: 50px 15px 20px;
        margin: 0 10px;
        background: rgba(255,255,255,0.7);
        border-radius: 6px;
    }
    .hilo-seda { display: none !important; }
    .constelacion-item,
    .constelacion-item:nth-child(even) {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 60px;
    }
    .item-lottie { width: 100%; margin-bottom: 15px; }
    .item-content { width: 100%; text-align: center !important; padding: 0; }
    .item-vacio { display: none; }
    .punto-iluminado { display: none !important; }
    .lottie-nucleo { width: 120px; height: 120px; }
    .envelope-img { width: 190px; }
    .lottie-parents-container,
    .lottie-padrino-container { width: 140px; height: 140px; }
    .church-lottie-box { width: 180px; height: 180px; }
    .lottie-recepcion-wrap { width: 150px; height: 150px; }
    .lottie-sphere { width: 140px; height: 140px; }
    .time-constelacion { font-size: 2rem; }
    .event-constelacion { font-size: 1.3rem; }
}

/* ============================================
   SECCIÓN 5: HISTORIA — Galería de película
   Fondo: negro con grano de película
   Carrusel: fotos con borde de carrete fotográfico
   ============================================ */
.history-showroom {
    padding: 100px 0 80px;
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"),
        #0f0d0b;
    text-align: center;
    overflow: hidden;
    position: relative;
    clip-path: polygon(0 0, 100% 4%, 100% 96%, 0 100%);
    margin-top: -30px;
    margin-bottom: -30px;
    z-index: 5;
    padding-top: 130px;
    padding-bottom: 130px;
}

/* Texto gigante de fondo — efecto editorial (Eliminado) */
.history-showroom::before {
    display: none;
}

.history-showroom h2 {
    font-family: var(--font-titulo);
    font-size: clamp(1.2rem, 5vw, 2rem);
    color: rgba(197,160,89,0.9);
    text-transform: uppercase;
    letter-spacing: 14px;
    margin: 0 0 5px;
    font-weight: 400;
    position: relative;
    z-index: 2;
}

.history-showroom h2::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 1px;
    background: rgba(197,160,89,0.5);
    vertical-align: middle;
    margin-right: 15px;
}

.history-showroom h2::after {
    content: "";
    display: inline-block;
    width: 30px;
    height: 1px;
    background: rgba(197,160,89,0.5);
    vertical-align: middle;
    margin-left: 15px;
}

.carousel-wrapper {
    position: relative;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    perspective: 1500px;
    touch-action: pan-y;
    z-index: 2;
}

.carousel-item {
    position: absolute;
    width: 220px;
    height: 320px;
    border-radius: 110px 110px 5px 5px;
    overflow: hidden;
    transition: all 0.8s var(--ease);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.1);
    will-change: transform, opacity;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    filter: sepia(0.1) contrast(1.05);
}

.swipe-hint {
    font-size: 0.55rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-top: 25px;
    color: rgba(197,160,89,0.5);
    opacity: 1;
    position: relative;
    z-index: 2;
}

/* ============================================
   DRESS CODE — Panel editorial negro con letra ENORME de fondo
   Layout: dos columnas lado a lado con barra vertical
   ============================================ */
.dress-code-showroom {
    padding: 0;
    background: #f9f5ef;
    display: flex;
    justify-content: center;
    align-items: stretch;
    min-height: 70vh;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Texto editorial gigante de fondo (Eliminado a petición) */
.dress-code-showroom::before {
    display: none;
}

.editorial-frame {
    position: relative;
    max-width: 580px;
    width: 100%;
    padding: 80px 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* Línea dorada izquierda */
.editorial-frame::before {
    content: "";
    position: absolute;
    left: 0; top: 15%; bottom: 15%;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(197,160,89,0.4), transparent);
}

.editorial-frame::after {
    display: none;
}

.label-sutil {
    font-size: 0.55rem;
    letter-spacing: 8px;
    color: var(--oro-suave);
    text-transform: uppercase;
    margin-bottom: 15px;
    display: block;
}

.dress-title {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 12vw, 5rem);
    font-weight: 300;
    font-style: italic;
    letter-spacing: 4px;
    margin: 0 0 10px;
    color: var(--texto-dark);
    line-height: 1;
}

.dress-icon-sello {
    width: 130px;
    margin: 25px auto;
    position: relative;
    z-index: 2;
    background: transparent;
    padding: 0;
    filter: drop-shadow(0 4px 12px rgba(197,160,89,0.2));
}

.info-minimal-row {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    z-index: 2;
    width: 100%;
}

.info-block {
    background: rgba(197,160,89,0.04);
    border: 1px solid rgba(197,160,89,0.15);
    padding: 25px 30px;
    text-align: left;
    position: relative;
}

.info-block::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 100%;
    background: linear-gradient(to bottom, var(--oro-rosado), var(--oro-solido));
}

.info-block h4 {
    font-size: 0.6rem;
    letter-spacing: 4px;
    color: var(--oro-solido);
    text-transform: uppercase;
    margin: 0 0 10px;
    font-family: var(--font-sans);
}

.info-block p {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    line-height: 1.5;
    margin: 0;
    color: var(--texto);
}

@media (min-width: 768px) {
    .carousel-item {
        width: 260px;
        height: 380px;
        border-radius: 130px 130px 5px 5px;
    }
    .carousel-wrapper { height: 500px; }
    .editorial-frame { padding: 100px 80px; }
    .info-minimal-row { flex-direction: row; gap: 20px; }
    .info-block { text-align: left; }
}

/* ============================================
   SECCIÓN 6: LLUVIA DE SOBRES — Separador en diamante
   Lado claro: fondo papel con sobre flotante animado
   Lado oscuro: fondo color café con QR integrado
   Separador: forma de rombo central
   ============================================ */
.dual-gift-section {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background: transparent;
    z-index: 2;
}

/* ---- LADO CLARO ---- */
.gift-side-light {
    padding: 120px 30px 180px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 2;
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='1' fill='%23c5a059' fill-opacity='0.08'/%3E%3C/svg%3E"),
        #fdfaf6;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}

.envelope-wrapper {
    margin-bottom: 30px;
    position: relative;
}

/* Sombra circular bajo el sobre */
.envelope-wrapper::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 20px;
    background: radial-gradient(ellipse, rgba(145,110,75,0.2) 0%, transparent 70%);
    border-radius: 50%;
    animation: shadowPulse 6s ease-in-out infinite;
}

@keyframes shadowPulse {
    0%, 100% { width: 160px; opacity: 0.8; }
    50%       { width: 120px; opacity: 0.4; }
}

.envelope-img {
    width: 240px;
    filter: drop-shadow(0 20px 40px rgba(145,110,75,0.2));
    animation: floatSlow 7s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

.phrase-classic {
    font-family: var(--font-alex);
    font-size: clamp(1.3rem, 7vw, 3rem);
    color: #7a5535;
    line-height: 1.15;
    margin: 0;
    font-weight: 100;
    max-width: 400px;
}

.salon-tag {
    font-family: var(--font-sans);
    font-size: 0.55rem;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(145,110,75,0.7);
    margin-top: 25px;
    font-weight: 400;
    padding: 10px 20px;
    border: 1px solid rgba(197,160,89,0.2);
    display: inline-block;
}

/* ---- LADO OSCURO — QR ---- */
.gift-side-dark {
    padding: 160px 30px 120px;
    flex: 1;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(197,160,89,0.08) 0%, transparent 60%),
        linear-gradient(160deg, #3d2510 0%, #251507 60%, #1a0e04 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-top: -80px;
    z-index: 3;
    position: relative;
    clip-path: polygon(50% 0%, 100% 5%, 100% 100%, 0 100%, 0 5%);
}

/* Ornamento superior del lado oscuro */
.gift-side-dark::before {
    content: "✦";
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(197,160,89,0.3);
    font-size: 1rem;
    letter-spacing: 20px;
}

.qr-phrase-top {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-style: italic;
    font-weight: 300;
    margin-bottom: 35px;
    color: rgba(197,160,89,0.9);
    letter-spacing: 2px;
}

.qr-container {
    background: rgba(255,255,255,0.04);
    padding: 25px;
    border: 1px solid rgba(197,160,89,0.2);
    position: relative;
    transition: all 0.5s ease;
    clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}

.qr-container::before {
    content: "";
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 0.5px solid rgba(197,160,89,0.1);
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
    pointer-events: none;
}

.qr-container:hover {
    border-color: rgba(197,160,89,0.5);
    box-shadow: 0 0 40px rgba(197,160,89,0.15);
}

.qr-img {
    width: 170px;
    height: 170px;
    display: block;
    filter: invert(0) contrast(1.1);
}

.phrase-qr-bottom {
    font-family: var(--font-alex);
    font-size: clamp(1.2rem, 6vw, 2.4rem);
    margin-top: 30px;
    color: rgba(255,255,255,0.85);
    font-weight: 100;
}

.download-action {
    margin-top: 40px;
    padding: 16px 45px;
    border: 1px solid rgba(197,160,89,0.4);
    color: rgba(197,160,89,0.9);
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 0.6rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    transition: 0.4s cubic-bezier(0.19,1,0.22,1);
    background: rgba(197,160,89,0.05);
}

.download-action:hover {
    background: rgba(197,160,89,0.15);
    color: white;
    transform: translateY(-4px);
    border-color: rgba(197,160,89,0.7);
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%       { transform: translateY(-18px) rotate(1deg); }
}

@media (min-width: 768px) {
    .dual-gift-section {
        flex-direction: row;
        min-height: 85vh;
    }
    .gift-side-light {
        clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
        padding: 80px 80px 80px 60px;
    }
    .gift-side-dark {
        clip-path: polygon(10% 0%, 100% 0, 100% 100%, 0% 100%);
        margin-top: 0;
        margin-left: -80px;
        padding: 80px 80px 80px 120px;
    }
    .gift-side-dark::before { top: 30px; }
}

/* ============================================
   SECCIÓN 7: GALERÍA — Fondo de puntos sobre negro
   Lottie en marco circular con resplandor
   ============================================ */
.gallery-invite {
    padding: 140px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 50%, rgba(197,160,89,0.06) 0%, transparent 40%),
        radial-gradient(circle at 80% 50%, rgba(197,160,89,0.04) 0%, transparent 40%),
        #faf6f0;
    clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
    margin-top: -30px;
    margin-bottom: -30px;
    z-index: 4;
}

/* Patrón de ondas concéntricas */
.gallery-invite::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 600px;
    border-radius: 50%;
    background: transparent;
    box-shadow:
        0 0 0 40px rgba(197,160,89,0.025),
        0 0 0 80px rgba(197,160,89,0.02),
        0 0 0 120px rgba(197,160,89,0.015),
        0 0 0 160px rgba(197,160,89,0.01);
    pointer-events: none;
}

.lottie-sphere {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    background: white;
    border-radius: 50%;
    box-shadow:
        0 20px 60px rgba(145,110,75,0.12),
        0 0 0 1px rgba(197,160,89,0.15),
        0 0 0 8px rgba(197,160,89,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    animation: lottie-float 5s ease-in-out infinite;
}

@keyframes lottie-float {
    0%, 100% { transform: translateY(0); box-shadow: 0 20px 60px rgba(145,110,75,0.12), 0 0 0 1px rgba(197,160,89,0.15), 0 0 0 8px rgba(197,160,89,0.04); }
    50%       { transform: translateY(-10px); box-shadow: 0 30px 80px rgba(145,110,75,0.18), 0 0 0 1px rgba(197,160,89,0.2), 0 0 0 12px rgba(197,160,89,0.06); }
}

.title-gallery {
    font-family: var(--font-alex);
    font-size: clamp(2.5rem, 10vw, 4rem);
    color: #7a5535;
    margin: 30px 0 10px;
    font-weight: 100;
    position: relative;
    z-index: 2;
}

.text-gallery {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(145,110,75,0.7);
    max-width: 300px;
    margin: 0 auto 40px;
    line-height: 2.2;
    position: relative;
    z-index: 2;
}

.btn-luxe {
    display: inline-block;
    padding: 18px 50px;
    background: transparent;
    border: 1px solid rgba(145,110,75,0.4);
    color: #7a5535;
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 0.6rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    z-index: 2;
    clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}

.btn-luxe:hover {
    background: rgba(145,110,75,0.08);
    color: #5a3d1e;
    border-color: rgba(145,110,75,0.7);
    letter-spacing: 7px;
}

/* ============================================
   RSVP — Pergamino cóncavo con doble borde dorado
   Fondo: oscuro casi negro con textura sutil
   Forma: cóncava superior (curva hacia adentro)
   ============================================ */
.rsvp-wrap {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(197,160,89,0.08) 0%, transparent 50%),
        linear-gradient(180deg, #1a1208 0%, #100d06 60%, #0a0804 100%);
    padding: 150px 24px 120px;
    color: var(--marfil);
    position: relative;
    overflow: hidden;
    clip-path: ellipse(120% 100% at 50% 100%);
    margin-top: -40px;
    z-index: 3;
}

/* Patrón de texto de fondo (Eliminado a petición) */
.rsvp-wrap::before {
    display: none;
}

/* Marco dorado doble */
.rsvp-wrap::after {
    content: "";
    position: absolute;
    top: 40px; left: 40px; right: 40px; bottom: 40px;
    border: 1px solid rgba(197,160,89,0.08);
    pointer-events: none;
}

.form-container-luxe {
    max-width: 420px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.rsvp-head {
    font-family: var(--font-alex);
    font-size: clamp(2.5rem, 10vw, 3.8rem);
    margin-bottom: 15px;
    text-align: center;
    color: white;
    font-weight: 100;
}

/* Subtítulo decorativo */
.rsvp-head::after {
    content: "Confirma tu asistencia";
    display: block;
    font-family: var(--font-sans);
    font-size: 0.55rem;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(197,160,89,0.6);
    margin-top: 10px;
    font-style: normal;
}

.field {
    margin-bottom: 35px;
    border-bottom: 1px solid rgba(197,160,89,0.15);
    transition: border-color 0.3s ease;
    padding-bottom: 5px;
}

.field label {
    display: block;
    font-size: 0.5rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: rgba(197,160,89,0.6);
    font-family: var(--font-sans);
}

.field input,
.field select {
    width: 100%;
    background: transparent;
    border: none;
    padding: 10px 0;
    color: var(--marfil);
    font-family: var(--font-serif);
    font-size: 1.1rem;
    outline: none;
}

.field select option {
    background: #1a1208;
    color: white;
}

.field:focus-within {
    border-bottom-color: rgba(197,160,89,0.5);
}

.submit-luxe {
    width: 100%;
    padding: 22px;
    background: transparent;
    color: rgba(197,160,89,0.9);
    border: 1px solid rgba(197,160,89,0.3);
    font-family: var(--font-sans);
    font-size: 0.65rem;
    letter-spacing: 6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.23,1,0.32,1);
    font-weight: 400;
    margin-top: 15px;
    clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
}

.submit-luxe:hover {
    background: rgba(197,160,89,0.1);
    border-color: rgba(197,160,89,0.7);
    color: white;
    letter-spacing: 8px;
}
/* ============================================
   ANIMACIONES ON-SCROLL (NUEVO EFECTO ELEGANTE)
   ============================================ */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* Evitar que las secciones completas se trasladen demasiado para que los clip-paths no revelen fondo blanco,
   pero manteniendo un desplazamiento suave y elegante. */
section.scroll-reveal {
    transform: translateY(25px) !important;
}
section.scroll-reveal.is-visible {
    transform: translateY(0) !important;
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Efecto escalonado (Stagger) para los hijos directos del contenedor que se revela */
.scroll-reveal-stagger > * {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.scroll-reveal-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* Retardos para el escalonado de los hijos */
.scroll-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.1s; }
.scroll-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.22s; }
.scroll-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.34s; }
.scroll-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.46s; }
.scroll-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.58s; }
.scroll-reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.7s; }
.scroll-reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.82s; }

@media (max-width: 768px) {
    /* Restaurar cortes diagonales pero mucho más suaves para móvil */
    .history-showroom {
        clip-path: polygon(0 0, 100% 2%, 100% 98%, 0 100%);
        margin-top: -15px;
        margin-bottom: -15px;
    }
    .gift-side-light {
        clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
        padding-bottom: 120px;
    }
    .gift-side-dark {
        clip-path: polygon(50% 0%, 100% 3%, 100% 100%, 0 100%, 0 3%);
        margin-top: -40px;
        padding-top: 100px;
    }
    .gallery-invite {
        clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%);
        margin-top: -15px;
        margin-bottom: -15px;
    }
    .rsvp-wrap {
        clip-path: ellipse(150% 100% at 50% 100%);
        margin-top: -20px;
    }
}
/* ═══════════════════════════════════════════════
   CORRECCIONES MÓVIL Y LOTTIES (MODELO 1)
   ═══════════════════════════════════════════════ */

/* 1. LOTTIE COLOR UNIFORME CAFÉ/DORADO */
.lottie-file svg *,
.church-lottie-box svg *,
.lottie-recepcion-wrap svg *,
.lottie-nucleo svg *,
lottie-player svg * {
    stroke: #B58E5E !important;
    fill: none !important;
}

/* Excepción: torta sin relleno blanco */
#lottie-torta svg * {
    fill: none !important;
    stroke: #B58E5E !important;
}

/* 2. CONTENCIÓN MÓVIL (EVITAR LANDING DESCENTRADO A 720px) */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

section, .split-panel {
    max-width: 100vw;
    box-sizing: border-box;
}

@media (max-width: 720px) {
    .glass-envelope {
        width: 90%;
        max-width: 340px;
    }
    .timeline-container {
        width: 100%;
        padding: 0 10px;
    }
    .carousel-container {
        max-width: 100%;
        overflow: hidden;
    }
}