/* =========================================
   FUENTES Y BASE
   ========================================= */
@font-face { 
    font-family: 'The Seasons'; 
    src: url('fonts/The Seasons.woff2') format('woff2'), 
         url('fonts/The Seasons.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 
    font-display: swap; 
}

@font-face { 
    font-family: 'Sloop Script'; 
    src: url('fonts/Sloop ScriptThree.woff2') format('woff2'), 
         url('fonts/Sloop ScriptThree.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 
    font-display: swap; 
}

:root {
    --bg-color: #fcfcf9;
    --accent-beige: #cbc7b7;
    --text-black: #1a1a1a;
    --text-light-beige: #f9f8f4; 
}

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

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

.music-floating-btn {
    position: fixed; 
    bottom: 20px; 
    left: 20px; /* ANTES ERA right: 20px */
    width: 45px; 
    height: 45px;
    border-radius: 50%; 
    background-color: var(--text-black); 
    color: var(--accent-beige);
    border: none; 
    z-index: 10000; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.enter-floating-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 90px; 
    height: 90px;
    border-radius: 50%;
    background-color: var(--text-black);
    color: #fff;
    border: none;
    z-index: 10001; /* Encima de la música por si acaso */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    transition: transform 0.3s, opacity 0.5s;
}
.enter-floating-btn:active {
    transform: scale(0.95);
}
/* Estado oculto (inicial) */
.hidden-btn {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

/* Animación para que aparezca suave */
.fade-in-btn {
    display: flex !important;
    animation: fadeInBtn 1s forwards;
}

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

/* Estilos de texto dentro del botón */
.btn-small-caps {
    font-family: 'The Seasons', serif;
    font-size: 0.55rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 2px;
}

.btn-script {
    font-family: 'Sloop Script', cursive;
    font-size: 1.4rem;
    font-weight: normal;
    text-transform: none;
    line-height: 0.8;
}

/* =========================================
   INTRO OVERLAY
   ========================================= */
.opening-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-color: var(--bg-color); 
    z-index: 9999;
    overflow-y: scroll;
    transition: opacity 0.8s ease;
}

.vertical-layout {
    width: 100%; 
    max-width: 500px; 
    margin: 0 auto;
    padding: 40px 20px;
    display: flex; 
    flex-direction: column; 
    align-items: center;
    position: relative; 
    min-height: 100vh;
}

/* =========================================
   ESTRUCTURA GENERAL (Overlay)
   ========================================= */
.opening-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f4f4f0; /* Color de fondo base */
    z-index: 9999;
    overflow-y: auto; /* Permite scroll vertical */
    overflow-x: hidden;
}

.vertical-layout {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2; /* Encima del fondo */
}

/* =========================================
   FONDO DECORATIVO FULL SCREEN (FIX)
   ========================================= */
.collage-bg-details {
    position: fixed; /* TRUCO: Fijo a la pantalla, ignora contenedores flacos */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0; /* Al fondo */
    pointer-events: none;
    overflow: hidden;
    opacity: 0; /* Empieza oculto */
    transition: opacity 1.5s ease;
}

/* Esta clase se activa con el JS cuando se abre el sobre */
.visible-content ~ .collage-bg-details, /* Si está al mismo nivel */
.collage-content.visible-content + .collage-bg-details,
.opening-overlay:has(.visible-content) .collage-bg-details {
    opacity: 1 !important;
}

/* Como no cambiamos JS, usamos un selector CSS inteligente:
   Si .collage-content tiene la clase .visible-content, forzamos que el fondo se vea.
   Nota: Si esto no funciona por estructura, el fondo se verá siempre.
   Para que se vea SOLO al abrir, confío en que tu JS agrega 'visible-content' al div collage.
*/

/* FORZAR VISIBILIDAD SI EL COLLAGE ES VISIBLE (CSS TRICK) */
.collage-content.visible-content ~ .collage-bg-details {
   /* Esto dependería de la estructura, pero lo haremos más fácil abajo */
} 
/* REGLA SIMPLE: El JS le pone 'visible-content' a #collage-content.
   Haremos que el fondo sea hijo del overlay pero fijo.
   Agrega esto al JS para mayor seguridad o usa la animación CSS del collage
*/


/* ITEMS DEL FONDO (SPAM) - MÁS PEQUEÑOS Y DISTRIBUIDOS */
.bg-detail-img {
    position: absolute;
    opacity: 0.2; 
    /* CAMBIO CLAVE: Tamaño mucho más pequeño */
    /* Mínimo 100px, ideal 12% del ancho, máximo 180px */
    width: clamp(100px, 12vw, 180px); 
    max-width: none;
    pointer-events: none;
}

/* --- Posiciones Distribuidas (Sin traslape) --- */

/* Fila Superior (0-25% altura) */
.pos-1 { top: 2%; left: 2%; transform: rotate(25deg); }
.pos-2 { top: 5%; right: 3%; transform: rotate(-15deg); }
.pos-3 { top: 18%; left: 30%; transform: rotate(-5deg); }
.pos-4 { top: 12%; right: 28%; transform: rotate(10deg); }

/* Fila Medio-Superior (25-50% altura) */
.pos-5 { top: 35%; left: 5%; transform: rotate(-25deg); }
.pos-6 { top: 32%; right: 10%; transform: rotate(15deg); }
.pos-7 { top: 48%; left: 45%; transform: rotate(45deg); } /* Centro */
.pos-8 { top: 42%; right: 35%; transform: rotate(-10deg); }

/* Fila Medio-Inferior (50-75% altura) */
.pos-9 { top: 65%; left: 8%; transform: rotate(5deg); }
.pos-10 { top: 62%; right: 5%; transform: rotate(-20deg); }

/* Fila Inferior (75-100% altura) */
.pos-11 { top: 88%; left: 25%; transform: rotate(15deg); }
.pos-12 { top: 82%; right: 30%; transform: rotate(-35deg); }


/* =========================================
   ESCENA 1: SOBRE CERRADO
   ========================================= */
#envelope-stage {
    display: flex; 
    flex-direction: column; 
    align-items: center;
    width: 100%; 
    margin-top: 15vh; 
    transition: opacity 0.5s, transform 0.5s;
    position: relative;
    z-index: 10;
}

.pre-open-text { 
    text-align: center; 
    margin-bottom: 40px; 
}

.main-names-intro {
    font-family: 'The Seasons', serif; 
    color: var(--accent-beige); 
    text-transform: uppercase;
    font-size: clamp(2.5rem, 8vw, 3.5rem); 
    margin: 0; 
    letter-spacing: 1px; 
    white-space: nowrap;
}

.ampersand { 
    font-family: 'Sloop Script', cursive; 
    font-size: .9em; 
    margin: 0 5px; 
    text-transform: none;
}

.intro-date { 
    font-family: 'The Seasons', serif; 
    font-size: clamp(1rem, 4vw, 1.2rem); 
    margin-top: 15px; 
}

.envelope-wrapper { 
    position: relative; 
    width: 100%; 
    max-width: 320px; 
    cursor: pointer; 
    transition: transform 0.3s; 
}

.envelope-wrapper:hover { transform: scale(1.02); }

.envelope-img { 
    width: 100%; 
    display: block; 
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.15)); 
}

.wax-seal-btn {
    position: absolute; 
    bottom: -40px; 
    width: 100%; 
    text-align: center;
    font-family: 'Montserrat', sans-serif; 
    font-size: 0.7rem; 
    letter-spacing: 3px; 
    color: #999;
}

.fade-in-loop { animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }


/* =========================================
   ESCENA 2: COLLAGE DESPLEGADO
   ========================================= */
.collage-content {
    width: 100%;
    /* Mantiene el contenido centrado */
    display: flex; 
    flex-direction: column; 
    align-items: center;
    position: relative;
    padding-top: 20px;
    opacity: 0; 
    display: none; 
    z-index: 5; /* Encima del fondo fijo */
}

/* Animación de entrada cuando el JS agrega la clase */
.visible-content { 
    display: flex !important; 
    opacity: 1; 
    transition: opacity 1s; 
}

/* HACK CSS: Cuando .visible-content aparece, hacemos visible el fondo */
/* Esto requiere que el JS ponga la clase .visible-content al div collage-content */
/* Y usaremos animación para mostrar el fondo */

#collage-content.visible-content ~ #global-bg-spam,
.opening-overlay:has(.visible-content) #global-bg-spam {
    opacity: 1; /* Se hace visible el fondo */
}
/* Si el navegador es viejo y no soporta :has, el fondo simplemente no se verá o se verá siempre
   según lo definas. Para seguridad, puedes poner opacity: 1 en .collage-bg-details por defecto 
   si no te importa que se vea detrás del sobre cerrado, o ajustarlo. */


.shadow-hard { filter: drop-shadow(0 10px 25px rgba(0,0,0,0.18)); }

.collage-row {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

/* 1. SOBRE ABIERTO */
.row-envelope { z-index: 1; margin-bottom: -120px; }
.img-envelope { width: 90%; max-width: 380px; }

/* 2. INVITACIÓN */
.row-card { z-index: 2; margin-bottom: 25px; transform: rotate(-1deg); }
.img-card { width: 85%; max-width: 340px; border-radius: 2px; }

/* 3. TICKETS */
.row-tickets {
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Gap más pequeño en celular para que quepan mejor */
    padding: 0 2%;
    margin-top: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap; 
    width: 100%;
}

.ticket-item { 
    /* --- MEDIDAS PARA CELULAR (PEQUEÑAS) --- */
    
    /* Base ideal de 110px */
    flex: 1 1 110px; 
    
    /* Mínimo pequeño para que no se fuercen a una sola columna */
    min-width: 150px; 
    
    /* Máximo controlado para que no se vean gigantes en móvil */
    max-width: 250px; 
}

.ticket-img { 
    width: 100%; 
    border-radius: 2px;
    display: block; 
}

/* Rotaciones (Se mantienen igual) */
.ticket-1 { transform: rotate(-4deg) translateY(5px); z-index: 3;}
.ticket-2 { transform: rotate(2deg) translateY(-8px); z-index: 4; }
.ticket-3 { transform: rotate(-3deg) translateY(3px); z-index: 3; }

/* --- MEDIDAS PARA COMPUTADORA (GRANDES) --- */
@media (min-width: 768px) {
    .row-tickets {
        gap: 20px; /* Regresamos al gap amplio en PC */
    }

    .ticket-item {
        /* Aquí regresamos a los valores grandes que te gustaban en PC */
        flex: 1 1 220px; 
        min-width: 200px; 
        max-width: 350px; 
    }
}

/* 4. POSTALES (Ocultas en tu código) */

/* 5. SELLO */
.row-wax-seal { 
    z-index: 5; 
    justify-content: center; 
    margin-top: 40px; 
}
.img-wax-seal { width: 100px; transform: rotate(-15deg); }

/* 6. POLAROIDS */
.row-polaroids {
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 0 10px;
    margin-top: 20px;
}
.polaroid-frame { 
    width: 200px; 
    background: #fff; 
    padding: 12px 12px 45px 12px; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    position: relative;
}
.polaroid-frame img { 
    width: 100%; 
    display: block; 
    aspect-ratio: 4/5;
    object-fit: cover;
    background: #f0f0f0;
}
.polaroid-frame:nth-child(1) { transform: rotate(-4deg); }
.polaroid-frame:nth-child(2) { transform: rotate(3deg); }
.polaroid-frame:nth-child(3) { transform: rotate(-2deg); }

/* BOTÓN */
.relative-wrapper { position: relative; display: inline-block; }
.circle-btn {
    width: 110px; height: 110px; border-radius: 50%; border: none; 
    cursor: pointer; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3); 
    background-color: var(--text-black); color: #fff;
    transition: transform 0.3s;
    position: absolute; z-index: 100 !important;
}
.circle-btn:active { transform: scale(0.95); }
.btn-small-caps { font-family: 'The Seasons', serif; font-size: 0.6rem; letter-spacing: 1px; text-transform: uppercase; line-height: 1; margin-bottom: 2px; }
.btn-script { font-family: 'Sloop Script', cursive; font-size: 1.8rem; font-weight: normal; text-transform: none; line-height: 0.8; }
.sticker-btn-center { bottom: -40px; left: 50%; transform: translateX(-50%); }

/* ANIMACIONES */
.slide-in { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.visible-content .slide-in { opacity: 1; transform: translateY(0); }
.visible-content .row-card { transform: rotate(-1deg); }
.visible-content .ticket-1 { transform: rotate(-4deg) translateY(5px); }
.visible-content .ticket-2 { transform: rotate(2deg) translateY(-8px); }
.visible-content .ticket-3 { transform: rotate(-3deg) translateY(3px); }
.delay-1 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.8s; }
.delay-4 { transition-delay: 1.1s; }
.delay-5 { transition-delay: 1.4s; }

/* RESPONSIVE: Desktop */
@media (min-width: 768px) {
    .row-tickets { gap: 20px; }
    .ticket-item { max-width: 200px; }
    
    /* Ajuste para que el contenido no se vea tan pequeño en monitores gigantes */
    .collage-content {
        max-width: 1000px;
        margin: 0 auto;
    }
}

/* =========================================
   SITE PRINCIPAL
   ========================================= */
.main-website { 
    display: none; 
    opacity: 0; 
    transition: opacity 1.5s; 
}

.main-website.visible { 
    display: block; 
    opacity: 1; 
}

.hidden-site { 
    display: none; 
}

/* HERO SECTION */
.hero-section { 
    position: relative; 
    height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #fff; 
    text-align: center; 
    overflow: hidden; 
}

.video-container { 
    position: absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    filter: grayscale(100%);
    z-index: -1; 
}

.hero-video { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.overlay { 
    position: absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background: rgba(0,0,0,0.3); 
}

.hero-content { 
    z-index: 2; 
    padding: 20px; 
}

.main-title { 
    font-family: 'The Seasons', serif; 
    font-size: clamp(2.5rem, 8vw, 5rem); 
}

.ampersand-hero { 
    font-family: 'Sloop Script', cursive; 
    font-size: 1.2em; 
    text-transform: none; 
}

.hero-divider { 
    width: 80px; 
    height: 2px; 
    background: #fff; 
    margin: 25px auto; 
    opacity: 0.9; 
}

.hero-date { 
    font-size: 1.1rem; 
    letter-spacing: 2px; 
    opacity: 0.95; 
}

.hero-subtitle { 
    font-size: 3rem; 
    letter-spacing: 2px; 
    margin-bottom: 10px; 
    opacity: 0.95; 
    font-family: 'Sloop Script', cursive; 
    font-weight: normal;
}

.uppercase { 
    text-transform: uppercase; 
}

.fade-in-up { 
    animation: fadeInUp 1.2s ease-out; 
}

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

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-size: 1.5rem;
    color: #fff;
}

/* SECTIONS */
.section { 
    padding: 100px 20px; 
}

.bg-white { 
    background: #fff; 
}

.bg-beige { 
    background: #f4f4f0; 
} 

.bg-black { 
    background: var(--text-black); 
    color: #fff; 
}

.container { 
    max-width: 1200px; 
    margin: 0 auto; 
}

.narrow-container { 
    max-width: 600px; 
    margin: 0 auto; 
}

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

.section-title { 
    font-family: 'The Seasons', serif; 
    font-size: clamp(2rem, 6vw, 3rem); 
    margin-bottom: 40px; 
    color: var(--text-black); 
}

.script-heading { 
    font-family: 'Sloop Script', cursive; 
    font-weight: normal;
}

/* =========================================
   FRAMED COUPLE SECTION (ÚNICOS CAMBIOS)
   ========================================= */

.framed-couple-section { 
    min-height: 90vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background-color: #fff; 
    padding: 60px 20px; 
}

.framed-layout { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    gap: 50px; 
    width: 100%; 
}

.framed-photo-wrapper { 
    position: relative; 
    padding: 20px; 
}

/* 👉 EL TAMAÑO AHORA SE CONTROLA AQUÍ */
.double-border-box { 
    position: relative; 
    padding: 8px; 
    border: 1px solid var(--text-black); 
    display: inline-block; 
    width: 90vw;
    max-width: 420px; /* móvil */
}

.double-border-box::after { 
    content: ''; 
    position: absolute; 
    top: 4px; 
    left: 4px; 
    right: 4px; 
    bottom: 4px; 
    border: 1px solid var(--text-black); 
    pointer-events: none; 
}

/* 👉 LA IMAGEN YA NO LIMITA EL TAMAÑO */
.framed-img { 
    display: block; 
    width: 100%; 
    height: auto; 
    object-fit: cover; 
    filter: grayscale(100%); 
    border: 5px solid #fff; 
}

.framed-text-content { 
    text-align: center; 
    color: var(--text-black); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

.script-date-full { 
    font-family: 'Sloop Script', cursive; 
    font-size: 4rem; 
    line-height: 1; 
    margin-bottom: 10px; 
    font-weight: normal; 
}

.serif-location { 
    font-family: 'The Seasons', serif; 
    font-size: 2.5rem; 
    text-transform: uppercase; 
    letter-spacing: 3px; 
    margin-bottom: 15px; 
}

.small-year { 
    font-family: 'Montserrat', sans-serif; 
    font-size: 1rem; 
    letter-spacing: 5px; 
}

/* =========================================
   STORY SECTION (REDISEÑADO)
   ========================================= */

.story-section {
    background-color: #fcfcf9; /* Fondo limpio para que resalten las fotos */
    padding-bottom: 100px;
}

.big-title {
    font-size: 3.5rem;
    margin-bottom: 60px;
}

.story-timeline {
    display: flex;
    flex-direction: column;
    gap: 60px; /* Espacio entre los bloques principales */
    max-width: 1000px;
    margin: 0 auto;
}

/* Filas de contenido */
.story-row {
    display: flex;
    flex-direction: column; /* Móvil: Foto arriba, texto abajo */
    align-items: center;
    gap: 30px;
}

/* Contenedor de Imagen */
.story-image-container {
    width: 100%;
    max-width: 450px;
    height: 500px; /* Altura fija para uniformidad */
    position: relative;
}

/* Marco doble para las fotos (opcional, se ve elegante) */
.story-image-container::after {
    content: '';
    position: absolute;
    top: 10px; left: 10px; right: -10px; bottom: -10px;
    border: 1px solid var(--accent-beige);
    z-index: 0;
    pointer-events: none;
}

.story-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la foto llene el espacio sin deformarse */
    display: block;
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Contenedor de Texto */
.story-text-container {
    max-width: 450px;
    text-align: center; /* Móvil: Centrado */
    padding: 20px;
}

.story-subtitle {
    font-family: 'The Seasons', serif;
    font-size: 1.8rem;
    margin-bottom: 25px;
    color: var(--text-black);
}

.story-paragraph {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    line-height: 1.9;
    color: #555;
    margin-bottom: 20px;
}

/* Cierre y Firma */
.story-footer {
    margin-top: 80px;
}

.closing-line {
    font-family: 'The Seasons', serif;
    font-size: 1.3rem;
    font-style: italic;
    margin-bottom: 20px;
}

.signature-dark {
    font-family: 'Sloop Script', cursive;
    font-size: 3.5rem;
    color: var(--text-black);
    font-weight: normal;
}

/* --- RESPONSIVO ESCRITORIO --- */
@media (min-width: 900px) {
    .story-row {
        flex-direction: row; /* Lado a lado */
        align-items: center;
        justify-content: space-between;
        gap: 60px;
    }

    .story-text-container {
        text-align: left; /* Texto alineado a la izquierda en PC */
        padding: 0;
    }

    /* Invierte el orden para el segundo bloque */
    .reverse-layout {
        flex-direction: row-reverse;
    }
    
    /* Ajuste para el marco en el layout invertido */
    .reverse-layout .story-image-container::after {
         left: -10px; right: 10px; /* Mueve el marco al otro lado */
    }
}

/* ITINERARY SECTION */
.itinerary-section { 
    text-align: center; 
} 

.itinerary-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 60px 30px; 
    margin-top: 60px; 
    justify-items: center; 
    align-items: flex-start; 
}

.itinerary-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 100%; 
}

.itinerary-icon { 
    width: 80px; 
    height: 80px; 
    object-fit: contain; 
    margin-bottom: 25px; 
    display: block; 
}

.itinerary-name { 
    font-family: 'Sloop Script', cursive; 
    font-size: 2.8rem; 
    line-height: 1; 
    color: var(--text-black); 
    margin-bottom: 10px; 
    font-weight: normal; 
    text-align: center; 
}

.itinerary-time { 
    font-family: 'The Seasons', serif; 
    font-size: 1.1rem; 
    letter-spacing: 1px; 
    color: var(--text-black); 
    text-transform: uppercase; 
    opacity: 0.9; 
    margin: 0; 
    text-align: center; 
}

/* =========================================
   SECCIÓN RSVP (REDISEÑO EDITORIAL)
   ========================================= */

/* Ocultar vistas */
.rsvp-hidden { display: none !important; }

/* Tarjeta Principal (Estilo Papelería) */
.rsvp-editorial-card {
    background-color: #fff;
    padding: 15px; /* Espacio para el borde exterior */
    margin-top: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

/* El marco doble interno */
.rsvp-card-inner {
    border: 1px solid var(--text-black); /* Borde fino negro */
    padding: 50px 30px;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Decoración extra: esquinas internas (opcional, si quieres más detalle) */
.rsvp-card-inner::after {
    content: '';
    position: absolute;
    top: 4px; left: 4px; right: 4px; bottom: 4px;
    border: 1px solid #e5e5e5; /* Borde muy sutil interno */
    pointer-events: none;
}

/* --- ESTILOS VISTA LOGIN --- */
.rsvp-script-title {
    font-family: 'Sloop Script', cursive;
    font-size: 4.5rem;
    line-height: 0.8;
    margin-bottom: 20px;
    font-weight: normal;
    color: var(--text-black);
}

.rsvp-instruction-text {
    font-family: 'The Seasons', serif;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #555;
}

.rsvp-code-style {
    width: 100%;
    max-width: 250px;
    padding: 12px;
    text-align: center;
    border: none;
    border-bottom: 1px solid var(--text-black);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 3px;
    margin-bottom: 30px;
    outline: none;
    text-transform: uppercase;
    background: transparent;
    transition: border-color 0.3s;
}

.rsvp-code-style:focus {
    border-bottom: 2px solid var(--text-black);
}

.input-wrapper-centered {
    display: flex;
    justify-content: center;
}

/* --- ESTILOS VISTA FORMULARIO --- */
.rsvp-script-title-small {
    font-family: 'Sloop Script', cursive;
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 10px;
    font-weight: normal;
}

.rsvp-deadline-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 40px;
    color: #888;
}

/* Bloque de Invitado */
.guest-block {
    text-align: left;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

.guest-block:last-child {
    border-bottom: none;
}

.guest-counter-title {
    font-family: 'Sloop Script', cursive; /* Cambio a cursiva para elegancia */
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--text-black);
    font-weight: normal;
    text-align: center;
    line-height: 0.8;
}

/* Inputs del formulario */
.input-label {
    display: block;
    font-family: 'The Seasons', serif;
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: var(--text-black);
}

.rsvp-input-style,
.rsvp-select-style {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 1px solid #d4d4d4;
    background-color: #fcfcf9; /* Fondo beige muy sutil */
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: var(--text-black);
    outline: none;
}

.rsvp-input-style:focus,
.rsvp-select-style:focus {
    border-color: var(--text-black);
    background-color: #fff;
}

/* Campos Comunes */
.common-fields {
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    text-align: left;
}

.common-field-title {
    font-family: 'The Seasons', serif;
    font-size: 1.1rem;
    margin-bottom: 15px;
    margin-top: 20px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Botón */
.editorial-btn {
    background: var(--text-black);
    color: #fff;
    padding: 16px 40px;
    border: none;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2px;
    font-size: 0.8rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s;
}

.editorial-btn:hover {
    background: #444;
    transform: translateY(-2px);
}

.editorial-btn.full-width {
    width: 100%;
}

/* --- ESTILOS MENSAJE ÉXITO --- */
.flex-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0;
}

.success-script {
    font-family: 'Sloop Script', cursive;
    font-size: 5rem;
    line-height: 0.8;
    margin-bottom: 20px;
    font-weight: normal;
}

.success-text {
    font-family: 'The Seasons', serif;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.success-divider {
    width: 40px;
    height: 1px;
    background: var(--text-black);
    margin-bottom: 20px;
}

.success-subtext {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* MEDIA QUERIES */
@media (min-width: 900px) {
.itinerary-grid {
grid-template-columns: repeat(6, 1fr);
gap: 40px;
}
.itinerary-icon { 
    width: 100px; 
    height: 100px; 
}
}
@media (min-width: 1024px) {
.framed-layout {
flex-direction: row;
gap: 120px;
}
.framed-img { 
    max-width: 450px; 
}


.script-date-full { 
    font-size: 6rem; 
}

.serif-location { 
    font-size: 3.5rem; 
}

.story-vibe-section { 
    padding: 160px 0; 
}

.story-overlay-box { 
    padding: 80px 60px; 
    width: 70%; 
}
}

/* =========================================
   SECCIÓN: INFORMACIÓN PARA INVITADOS (ALINEADA)
   ========================================= */

.info-section {
    background-color: #f4f4f0;
    padding-bottom: 100px;
}

.info-section .section-title {
    text-align: center;
    margin-bottom: 70px;
}

/* GRID PRINCIPAL */
.info-grid {
    display: grid;
    grid-template-columns: 1fr; /* Móvil: 1 columna */
    gap: 40px;
    margin-bottom: 100px;
}

/* TARJETAS */
.info-card {
    background: #fff;
    padding: 40px 30px;
    border: 1px solid #d4d4d4;
    position: relative;
    /* Flex para asegurar alturas iguales si el contenido varía */
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%; 
}

/* Efecto doble borde */
.info-card::after {
    content: '';
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 1px solid #d4d4d4;
    pointer-events: none;
}

.card-header {
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
}

/* --- AQUÍ ESTÁ EL TRUCO DE ALINEACIÓN --- */
.card-icon {
    /* Hacemos la foto más grande como pediste */
    width: 100px; 
    height: 100px; /* ALTO FIJO: Esto evita que se desalineen los textos */
    object-fit: contain; /* Asegura que la imagen no se recorte fea */
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.85;
}

.card-icon-hotel {
    /* Hacemos la foto más grande como pediste */
    width: 200px; 
    height: 100px; /* ALTO FIJO: Esto evita que se desalineen los textos */
    object-fit: contain; /* Asegura que la imagen no se recorte fea */
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.85;
}


.card-header h3 {
    font-family: 'Sloop Script', cursive;
    font-size: 3rem;
    font-weight: normal;
    margin: 0;
    line-height: 1;
    min-height: 3rem; /* Reserva espacio para el título por si alguno es muy largo */
}

.card-body {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-black);
    text-align: center;
}

.card-body p {
    margin-bottom: 15px;
}

/* Estilos de enlaces y listas */
.map-link {
    color: var(--text-black);
    text-decoration: underline;
    font-weight: 500;
}

.highlight-text {
    font-family: 'The Seasons', serif;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    margin-top: 20px;
    text-transform: uppercase;
    line-height: 2;
}

/* =========================================
   SECCIÓN DE DETALLES (STRIPED)
   ========================================= */

.striped-section {
    position: relative;
    background: #fff;
    padding: 80px 30px;
    border: 1px solid #d4d4d4;
    text-align: center;
}

.striped-section::after {
    content: '';
    position: absolute;
    top: 8px; left: 8px; right: 8px; bottom: 8px;
    border: 1px solid #d4d4d4;
    pointer-events: none;
}

.striped-section-title {
    font-family: 'Sloop Script', cursive;
    font-size: 3.5rem;
    margin-bottom: 50px;
    font-weight: normal;
}

.details-flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

.detail-box {
    max-width: 320px;
}

.detail-box h3 {
    font-family: 'The Seasons', serif;
    font-size: 1.4rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.detail-box p {
    font-size: 0.95rem;
    line-height: 1.7;
}

.detail-box .cursive-detail {
    font-family: 'Sloop Script', cursive;
    font-size: 2.5rem; /* Ahora sí cambiará */
    margin: 15px 0;
    line-height: 1.2; /* Recomendado para fuentes script grandes */
}

.center-icon {
    width: 200px;
    opacity: 0.7;
}

/* =========================================
   REGISTRY / MESA DE REGALOS
   ========================================= */

.registry-section {
    background-color: #fff;
    padding-bottom: 120px;
}

/* GRID */
.registry-editorial-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: center; /* Alineación vertical centrada */
}

/* =========================================
   COLUMNA TEXTO
   ========================================= */

.registry-col-text {
    padding: 0 20px;
    text-align: center;
}

.registry-header-group {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.registry-title-main {
    font-family: 'The Seasons', serif;
    font-size: 2.5rem;
    letter-spacing: 2px;
    line-height: 1.2;
    margin-bottom: 14px;
    color: var(--text-black);
}

.icon-gift-large {
    width: 160px;
    opacity: 0.85;
}

.registry-msg-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    line-height: 1.9;
    font-weight: 300;
    color: var(--text-black);
    max-width: 420px;
    margin: 0 auto;
}

/* =========================================
   COLUMNA TARJETA (MIXTA)
   ========================================= */

.registry-col-card {
    display: flex;
    justify-content: center;
}

.zelle-card-frame {
    background-color: #fcfcf9;
    border: 1px solid #d4d4d4;
    padding: 50px 40px;
    text-align: center;
    position: relative;
    max-width: 400px; /* Un poco más ancho para los números */
    width: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.zelle-card-frame::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid #d4d4d4;
    pointer-events: none;
}

/* Títulos (Zelle / Transferencia) */
.zelle-heading {
    font-family: 'Sloop Script', cursive;
    font-size: 3.5rem;
    font-weight: normal;
    margin-bottom: 5px;
    line-height: 1;
    color: var(--text-black);
}

/* Info Gral */
.zelle-info {
    font-family: 'The Seasons', serif;
    font-size: 1.1rem;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: var(--text-black);
}

/* QR Box */
.qr-display-box {
    width: 160px;
    height: 160px;
    margin: 0 auto;
    background: #fff;
    padding: 8px;
    border: 1px solid #eee;
}

.qr-code-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* DIVISOR INTERNO */
.card-internal-divider {
    width: 100%;
    height: 1px;
    background-color: #d4d4d4;
    margin: 40px 0;
    position: relative;
}

/* Detalles Banco */
.bank-name {
    font-family: 'The Seasons', serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    color: var(--text-black);
    font-weight: bold;
}

.bank-number {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 2px;
    color: #555;
    font-weight: 400;
}

/* =========================================
   DESKTOP
   ========================================= */

@media (min-width: 900px) {

    .registry-editorial-grid {
        grid-template-columns: 1fr 1fr;
        gap: 80px;
    }

    .registry-col-text {
        text-align: left;
        padding-left: 40px;
    }

    .registry-header-group {
        align-items: center; /* Mantiene icono centrado al titulo */
    }
    
    /* Alineamos el texto a la izquierda en PC */
    .registry-msg-text {
        margin: 0; 
        text-align: left;
        max-width: 90%;
    }

    .registry-title-main {
        font-size: 3.5rem;
    }

}


/* =========================================
   SECCIÓN: CONTACTO
   ========================================= */

.contact-section {
    background-color: #fff;
    padding-bottom: 120px;
}

.contact-intro {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    margin-bottom: 50px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* --- CUADRO DOBLE BORDE --- */
.contact-box-framed {
    background-color: #fcfcf9; /* Fondo beige claro */
    border: 1px solid #d4d4d4;
    padding: 60px 20px;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

/* El efecto del segundo borde desplazado */
.contact-box-framed::after {
    content: '';
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 1px solid #d4d4d4;
    pointer-events: none;
}

/* Contenedor Flex para los items (Dentro del cuadro) */
.contact-wrapper {
    display: flex;
    flex-direction: column; /* Móvil: Columna */
    align-items: center;
    justify-content: center;
    gap: 50px;
    position: relative;
    z-index: 2; /* Para estar encima del borde */
}

.contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Iconos */
.contact-icon-fa {
    font-size: 1.8rem;
    color: var(--text-black);
    margin-bottom: 15px;
    opacity: 0.7;
}

/* Títulos */
.contact-type {
    font-family: 'Sloop Script', cursive;
    font-size: 2.5rem;
    font-weight: normal;
    margin-bottom: 10px;
    line-height: 1;
}

/* Links */
.contact-link {
    font-family: 'The Seasons', serif;
    font-size: 1.1rem;
    color: var(--text-black);
    text-decoration: none;
    letter-spacing: 1px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
}

.contact-link:hover {
    border-bottom: 1px solid var(--text-black);
}

/* Línea Divisoria */
.contact-vertical-line {
    display: none; 
    width: 1px;
    height: 80px;
    background-color: #d4d4d4;
}

/* =========================================
   FOOTER
   ========================================= */

.site-footer {
    background-color: var(--text-black);
    color: #fff;
    padding: 80px 20px 40px;
    text-align: center;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-names {
    font-family: 'The Seasons', serif;
    font-size: 2rem;
    letter-spacing: 3px;
    margin-bottom: 15px;
    font-weight: normal;
}

.footer-amp {
    font-family: 'Sloop Script', cursive;
    font-size: 1.1em;
    text-transform: none;
    color: #fff; /* Un gris muy claro para el & */
}

.footer-date {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 5px;
    opacity: 0.7;
    margin-bottom: 50px;
}

/* Línea sutil separadora antes del crédito */
.footer-divider {
    width: 30px;
    height: 1px;
    background-color: #333; /* Gris muy oscuro, casi imperceptible */
    margin-bottom: 30px;
}

/* CRÉDITO MADE BY SLIVER */
.footer-credit {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 3px;
    color: #888; /* Plateado sutil */
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.footer-credit:hover {
    color: #fff; /* Se ilumina a blanco al pasar el mouse */
}

/* --- RESPONSIVO ESCRITORIO --- */
@media (min-width: 900px) {
    .contact-wrapper {
        flex-direction: row; /* Lado a lado */
        gap: 80px;
    }

    .contact-vertical-line {
        display: block;
    }
    
    .contact-box-framed {
        padding: 70px 50px; /* Más espacio en PC */
    }
}

/* RESPONSIVO ESCRITORIO */
@media (min-width: 900px) {
    .info-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
        gap: 30px;
        align-items: start; /* Alineación superior */
    }

    .details-flex-container {
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start; /* Alinea los tops de las cajas de detalle */
        padding: 0 40px;
    }
    
    .center-box {
        margin-top: 40px; /* Pequeño ajuste visual para el icono central */
    }
}

/* =========================================
   DESKTOP
   ========================================= */

@media (min-width: 900px) {

.info-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
}

/* 🔧 FIX: TODO EN COLUMNA Y CENTRADO */
.striped-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.striped-section-title {
    margin-bottom: 50px;
}

.detail-box {
    margin: 0;
}

}