/* =========================================================================
   1. REGISTRO DE FUENTES LOCALES (Rutas y Extensiones Corregidas)
   ========================================================================= */
@font-face {
    font-family: 'Athena';
    src: url('assets/fuentes/athena-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Against';
    src: url('assets/fuentes/against-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'High-Spirited'; /* 👈 Este es el nombre "oficial" que registrará el navegador */
    src: url('assets/fuentes/High-Spirited.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir';
    src: url('assets/fuentes/avenirLTstd.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sloop Script';
    src: url('assets/fuentes/sloop-script.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Photograph';
    src: url('assets/fuentes/photograph.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roseritta';
    src: local('Roseritta'),
         url('assets/fuentes/Roseritta.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* =========================================================================
   2. REESTRUCTURACIÓN DE VARIABLES COLORES TIPOGRAFIAS ETC.
   ========================================================================= */
:root {
    --white: #FFFFFF;
    --creme-light: #F4F1EA;
    --creme: #E6DAC8; /* Fondo crema base */
    --creme-dark: #CBB9A4; /* Contraste para textos sobre crema/blanco */
    --text-dark: #554434; /* Negro absoluto para títulos de alto impacto */
    --text-muted: #A48D78;
    --font-premium-title: 'Athena', serif;
    --font-premium-accent: 'Against', sans-serif;
    --font-premium-hand: 'High-Spirited', cursive;
    --font-premium-body: 'Avenir', sans-serif;
}

/* RESET REFINADO */
body {
    font-family: var(--font-premium-body);
    color: var(--text-muted);
    background-color: var(--white);
    margin: 0;
    padding: 0;
}


/* =========================================================================
   SECCIÓN PADRES Y PADRINOS PREMIUM
   ========================================================================= */
.family-section-premium {
    padding: 90px 20px 80px; /* 🔥 Bajamos el padding para eliminar el vacío tosco */
    background-color: var(--creme-light);
    background-image: url('assets/imagenes/paper-texture.jpg') !important;
    background-size: cover;
    background-blend-mode: multiply; /* Mezcla el color con la imagen */
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin-top: -50px; 
    margin-bottom: -40px; 
    z-index: 10;
    box-shadow: 0 15px 35px rgba(85, 25, 25, 0.26) !important;
    
    clip-path: polygon(
    0 28px,        /* Esquina superior izquierda */
    50% 0,         /* Punta superior centrada (cambiado de 38% a 50%) */
    100% 40px,     /* Esquina superior derecha */
    100% calc(100% - 40px), /* Esquina inferior derecha */
    50% 100%,      /* Punta inferior centrada (cambiado de 38% a 50%) */
    0 calc(100% - 28px)    /* Esquina inferior izquierda */
    
);
}

/* --- TÍTULO EDITORIAL EN 3 LÍNEAS --- */
.parents-section-title-container {
    text-align: center;
    /* Reducimos los márgenes al mínimo para destruir el espacio en blanco */
    margin-top: 5px; 
    margin-bottom: 5px; 
}

.parents-editorial-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px; 
    font-weight: normal !important;
    margin: 0;
    
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
    font-feature-settings: "liga" 1, "dlig" 1, "clig" 1, "calt" 1;
}

/* Línea 1: Nuestros (Un toque más pequeña) */
.title-line-first {
    font-family: 'Roseritta', serif !important;
    font-size: 2.1rem; /* Bajó de 2.5rem */
    color: var(--text-dark);
    line-height: 0.85;
    letter-spacing: 1px;
    display: block;
}

/* Línea 2: Padres (Ajustada para que no sea un bloque gigante) */
.title-line-second {
    font-family: 'Roseritta', serif !important;
    font-size: 3.6rem; /* Bajó de 4.2rem -> Sigue siendo imponente pero más controlada */
    color: var(--text-dark);
    line-height: 0.85;
    letter-spacing: 1px;
    display: block;
}

/* Línea 3: & Padrinos */
.title-line-third {
    font-family: 'High-Spirited', cursive !important;
    font-size: 3.2rem; /* Bajó de 3.8rem para amoldarse al nuevo tamaño */
    color: #A39274; 
    line-height: 0.75; 
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px; 
    margin-top: -14px; /* Ajustamos el acople al nuevo tamaño */
    padding-top: 0; 
}

/* La & pequeña adaptada */
.title-line-third .editorial-ampersand-small {
    font-family: 'Roseritta', serif !important;
    font-size: 1.8rem;
    color: #A39274;
    transform: translateY(-2px); 
    opacity: 0.9;
}

.family-thankyou-text-premium {
    font-family: 'Baskerville', 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif !important;
    font-size: 1.05rem; 
    color: var(--text-muted);
    text-align: center; 
    max-width: 340px;
    
    /* 🔥 SOLUCIÓN: Margen superior negativo. Esto "jala" este texto hacia arriba, 
       pegándolo al título y haciendo que las tarjetas suban en bloque de forma compacta */
    margin: 20px auto 30px; 
    
    line-height: 1.3; 
    letter-spacing: 0.3px; 
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Contenedor compacto centrado */
.family-cards-premium {
    display: flex;
    flex-direction: row; 
    overflow-x: auto;    /* Activa el scroll horizontal */
    scroll-snap-type: x mandatory; 
    gap: 20px;
    padding: 20px 20px 40px 20px;
    width: 100%;
    scrollbar-width: none; 
}

.family-cards-premium::-webkit-scrollbar { display: none; }
/* =========================================================================
   NUEVA CONFIGURACIÓN ULTRA-MINIMALISTA (CORRECCIÓN DE SELECTORES NATIVOS)
   ========================================================================= */

/* Contenedor táctil invisible para las flechas */
.family-swiper-container .swiper-button-prev, 
.family-swiper-container .swiper-button-next {
    color: #554434 !important;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;   /* Área de clic cómoda para el dedo */
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.35; /* Súper sutiles por defecto */
    transition: opacity 0.3s ease;
}

/* ¡AQUÍ ESTABA EL DETALLE! 
   Apagamos por completo la fuente de iconos gigante de Swiper e imponemos nuestro micro-vector
*/
.family-swiper-container .swiper-button-prev::after, 
.family-swiper-container .swiper-button-next::after {
    content: '' !important;              /* Borra el icono gigante nativo */
    font-family: sans-serif !important;  /* Desactiva la fuente 'Swiper-icons' */
    
    /* Dibujamos una micro-flecha real de 5px x 5px */
    width: 5px !important;   
    height: 5px !important;  
    border-top: 1px solid #554434 !important;  /* Línea ultra fina de 1px */
    border-left: 1px solid #554434 !important; /* Línea ultra fina de 1px */
    
    background: none !important;
}

/* Rotamos los micro-vectores para que apunten a los lados (< y >) */
.family-swiper-container .swiper-button-prev::after {
    transform: rotate(-45deg) !important; /* Apunta a la izquierda */
    margin-left: 4px;
}

.family-swiper-container .swiper-button-next::after {
    transform: rotate(135deg) !important; /* Apunta a la derecha */
    margin-right: 4px;
}

/* Posición exacta en los bordes para que floten elegantemente */
.family-swiper-container .swiper-button-prev { left: 10px; }
.family-swiper-container .swiper-button-next { right: 10px; }

/* Efecto interactivo al pasar el dedo o mouse */
.family-swiper-container .swiper-button-prev:hover, 
.family-swiper-container .swiper-button-next:hover {
    opacity: 0.8;
}


/* Tarjeta Angosta con Bordes Asimétricos */
.card-premium-asymmetric-marked {
    scroll-snap-align: center;
    flex: 0 0 280px; /* Ancho fijo original */
    position: relative; 
    
    background: var(--creme) !important;
    
    /* 140px abajo genera el semicírculo perfecto basado en los 280px de ancho */
    border-radius: 0px 0px 140px 140px !important; 
    
    /* Corta la textura de papel sobre la curva circular */
    overflow: hidden !important;
    
    padding: 40px 25px 60px !important; /* Espacio inferior para el texto */
    border: none !important;
    box-sizing: border-box;
    text-align: center;
    
    /* Textura de fondo */
    background-image: url('assets/imagenes/paper-texture.jpg') !important;
    background-size: cover;
    background-position: center;
}

/* Le damos el aire necesario al carrusel sin alterar tamaños de la tarjeta */
.family-swiper-container .swiper-slide {
    padding: 30px 0; /* Subimos a 30px para que la sombra tenga espacio de sobra abajo */
    display: flex;
    justify-content: center;
    
    /* 👇 Esta línea genera una sombra suave y profunda que sí se nota en el fondo */
    filter: drop-shadow(0px 7px 20px rgba(85, 40, 25, 0.22)) !important;
}
/* Contenedor para tus SVGs locales */
.icon-minimalist-container {
    width: 45px;
    height: 45px;
    margin: 0 auto 20px; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.svg-premium-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Bloque para separar los nombres */
.name-block {
    margin-bottom: 18px; 
}

/* Títulos Sr./Sra. arriba */
.title-honorific {
    display: block;
    font-family: 'Baskerville', serif;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #A39274;
    margin-bottom: 2px;
}

/* Nombre de pila en primera línea */
.name-text-hand {
    font-family: 'Against', serif !important;
    color: var(--text-dark);
    font-size: 1.5rem; /* Tamaño protagonista */
    line-height: 1.0; /* Ajustado para que el apellido no se aleje demasiado */
    margin: 0;
}

/* Apellidos en segunda línea (pequeños y finos) */
.last-name-small {
    font-size: 0.65em; 
    letter-spacing: 1.5px; 
    
    /* 🔥 Cambia 'uppercase' por 'none' para que no fuercen las mayúsculas */
    text-transform: none; 
    
    opacity: 0.8;
    font-family: 'Against', serif !important;
}

/* El subtítulo del rol abajo */
.subtitle-card-against {
    font-family: 'High-Spirited', cursive !important; 
    color: #A39274;             
    font-size: 3.1rem;          
    font-weight: normal !important; 
    
    text-transform: none;       
    letter-spacing: 0px;        
    line-height: 1.1;           
    
    margin-top: 15px;           
    margin-bottom: 0;
    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Soporte en paralelo para pantallas escritorio */
@media (min-width: 768px) {
    .family-cards-premium {
        justify-content: center; /* Centra las 3 tarjetas si hay espacio */
        overflow-x: hidden;      /* Desactiva el scroll si ya caben todas */
    }
}
  /* BOTÓN FLOTANTE MÚSICA */
.music-floating-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--creme-dark);
    border-radius: 50%;
    color: var(--text-dark);
    font-size: 1.1rem;
    z-index: 100;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.music-floating-btn.playing {
    background-color: var(--text-dark);
    color: var(--white);
    border-color: var(--text-dark);
}

/* =========================================================================
   BLOQUE 4: UBICACIONES EDITORIALES ASIMÉTRICAS
   ========================================================================= */
.locations-section-premium {
    padding: 80px 20px;
    background-color: var(--white);
    text-align: center;
}

/* El rectángulo con textura de papel */
.location-card-texture {
    background-image: url('assets/imagenes/paper-texture.jpg');
    background-size: cover;
    padding: 75px 30px 45px 30px; 
    border-radius: 250px 250px 0 0; 
    box-shadow: 4px 10px 35px rgba(203, 185, 163, 0.65);
    min-height: 200px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

/* 🔥 NUEVO CONTENEDOR PARA TUS SVGS LOCALES */
.loc-icon-container {
    width: 100px;
    height: 100px;
    margin: 0 auto 22px auto; 
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
}

.loc-svg-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: none !important; 
}

.loc-svg-icon.icon-templo {
    object-fit: cover !important; 
    transform: scale(1.65); 
}

/* 🔥 TÍTULOS DIVIDIDOS EN 2 LÍNEAS (Roseritta) */
.loc-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0 0 15px 0;
}

.loc-title-first {
    font-family: 'Roseritta', serif !important;
    font-size: 2.1rem;
    color: var(--text-dark);
    line-height: 1;
    font-weight: normal !important;
    text-transform: none;
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
    font-feature-settings: "liga" 1, "dlig" 1, "clig" 1, "calt" 1;
}

.loc-title-second {
    font-family: 'Roseritta', serif !important;
    font-size: 1.5rem; 
    color: var(--text-dark);
    line-height: 1;
    font-weight: normal !important;
    text-transform: none;
    opacity: 0.9;
}

/* 🔥 SUBTÍTULO Y DIRECCIÓN EN BASKERVILLE */
.loc-subtitle {
    font-family: 'Baskerville', 'Baskerville Old Face', 'Hoefler Text', Garamond, serif !important;
    font-size: 1.2rem;
    color: var(--text-dark);
    font-weight: bold;
    margin: 5px 0;
    letter-spacing: 0.3px;
}

.loc-address {
    font-family: 'Baskerville', 'Baskerville Old Face', 'Hoefler Text', Garamond, serif !important;
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0 0 20px 0;
    line-height: 1.3;
    letter-spacing: 0.3px;
}

.loc-time {
    font-family: var(--font-premium-title);
    font-size: 2rem;
    margin-bottom: 25px;
    display: block;
    color: var(--text-dark);
}

.btn-minimal-location {
    display: inline-block; 
    padding: 10px 30px; 
    border: 1px solid var(--text-dark);
    border-radius: 50px;
    font-family: var(--font-premium-body);
    font-size: 0.8rem;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-dark);
    transition: all 0.3s;
    width: auto; 
    margin: 5px auto;
}

.btn-minimal-location:hover {
    background: var(--text-dark);
    color: var(--white);
}

.location-photo-preview {
    width: 100%;
    max-width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 0 0 150px 0; 
    margin-bottom: 50px;
    box-shadow: 4px 10px 45px rgba(203, 185, 163, 0.95);
}

/* =========================================================================
   NUEVO: CLASES DE ANIMACIÓN PARA UBICACIONES (SCROLL REVEAL)
   ========================================================================= */
.reveal {
    opacity: 0;
    transition: all 1s ease-out; /* Duración de la animación */
}

.reveal-left {
    transform: translateX(-100px); /* Entra desde la izquierda */
}

.reveal-right {
    transform: translateX(100px); /* Entra desde la derecha */
}

.reveal.active {
    opacity: 1;
    transform: translateX(0); /* Posición final */
}
/* AJUSTE PREMIUM EN PORTADA (Formato 9:16 Real en móviles) */
/* AJUSTE PREMIUM EN PORTADA */
.hero-section.premium-9-16 {
    height: 100vh;
    width: 100%;
    background-image: url('assets/imagenes/foto_portada.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 8vh;
}

.logo-container-top {
    position: relative;
    z-index: 5;
    width: 100%;
    text-align: center;
}

/* Estilo base compartido */
.main-logo-premium {
    width: 100%; 
    height: auto;
    display: block !important;
    margin: 0 auto !important;
}

/* Configuración exclusiva para Portada */
.logo-ajustable-top {
    width: 350px !important;      /* Controola tamaño */
    max-width: 90% !important;
    margin-top: 280px !important;  /* arriba o abajo */
    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.72)) !important;
}


/* Flecha de scroll con animación sutil */
.scroll-arrow-indicator {
    position: absolute;
    bottom: 4vh;
    z-index: 5;
    color: var(--white);
    font-size: 1.5rem;
    opacity: 0.8;
}

.animate-bounce {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* =========================================================================
   BLOQUE: SAVE THE DATE EDITORIAL (LIMPIO Y OPTIMIZADO)
   ========================================================================= */

.save-the-date-section-premium {
    padding: 130px 20px 140px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('assets/imagenes/fondo_savethedate.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin-top: -40px;
    margin-bottom: -40px;
    z-index: 10;
    
    /* POLÍGONO DE DOBLE CORTE */
    clip-path: polygon(
        0 28px, 
        38% 0, 
        100% 40px, 
        100% calc(100% - 40px), 
        38% 100%, 
        0 calc(100% - 28px)
    );
}

/* Contenedor de la imagen - Sin rotación */
.std-title-container { 
    display: flex;
    justify-content: center;
    margin-bottom: 30px; 
    padding: 10px; 
}

/* Animación para el efecto de entrada */
@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilo y animación de la imagen */
.std-image-asset {
    width: 100%;
    /* Reducimos el max-width para que se vea más pequeña */
    max-width: 180px; 
    height: auto;
    display: block;
    margin: 0 auto;
    animation: slideUpFade 1.2s ease-out forwards;
    
    /* Sombra más ligera y difuminada */
    filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.2));
}
/* Elementos restantes de la sección */
.event-date-premium {
    font-family: 'Roseritta', serif !important;
    font-size: 2.4rem;
    color: var(--white);
    letter-spacing: 2px;
    margin-bottom: 30px;
    font-weight: normal !important;
    text-transform: uppercase;
}

.only-letters-hand {
    font-family: var(--font-premium-hand);
    font-size: 3rem;
    color: var(--white);
    margin-bottom: 10px;
}

/* Contenedor del Botón */
.calendar-btn-container {
    text-align: center;
    margin-top: 40px;
}

.btn-calendar-premium {
    background: transparent;
    border: 1px solid #A39274;
    color: #ffffff;
    padding: 12px 25px;
    font-family: var(--font-premium-body);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 50px;
}

.btn-calendar-premium:hover {
    background: #A39274;
    color: var(--white);
}
/* =========================================================================
   CUENTA REGRESIVA EDITORIAL
   ========================================================================= */

.countdown-elegant-box {
    width: 100%;
    max-width: 380px;
    margin: 0 auto; /* Quitamos el margen inferior porque ya lo compensa el botón */
}

.countdown-container-premium {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.time-card-premium {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background: transparent !important;
    box-shadow: none !important;
}

.time-card-premium:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(255, 255, 255, 0.25);
}

.time-num-premium {
    font-family: 'Roseritta', serif !important; 
    font-size: 2.6rem;
    font-weight: 400;
    color: var(--white);
    line-height: 1;
    margin-bottom: 6px;
}

.time-label-premium {
    font-family: var(--font-premium-body);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1;
}

/* =========================================================================
   MEDIA QUERIES (CONSOLIDADAS)
   ========================================================================= */

@media (max-width: 480px) {
    .std-save { font-size: 5rem !important; }
    .std-date { font-size: 3.5rem !important; }
    .std-title-container {
        margin-left: 10px !important;
        margin-right: 10px !important;
        transform: rotate(-2deg);
    }
}

@media (max-width: 360px) {
    .time-num-premium { font-size: 2.1rem; }
    .time-label-premium { font-size: 0.65rem; }
}
/* =========================================================================
   SECCIÓN PASES PREMIUM - FONDO DE TEXTURA LIENZO ÚNICO
   ========================================================================= */

.pases-section-premium {
    padding: 110px 20px 80px 20px; /* 🔥 Subimos padding superior para dar espacio al sello que vuela */
    
    /* 🌟 TEXTURA DE FLORES COMO LIENZO ÚNICO EXCLUSIVO */
    background-image: url('assets/imagenes/textura_pases.jpg') !important;
    background-repeat: no-repeat !important;      
    background-size: cover !important;             
    background-position: center center !important;   
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    clip-path: polygon(
        0 28px,           /* Inicio: margen izquierdo con altura */
        50% 0,            /* Punta superior centrada */
        100% 40px,        /* Esquina superior derecha con altura */
        100% 100%,        /* Esquina inferior derecha (recta) */
        0 100%            /* Esquina inferior izquierda (recta) */
    );
}

/* 🔥 TU TARJETA BASE: Convertida en Arco con Textura de Papel */
.paper-card.texture-paper {
    background-image: url('assets/imagenes/paper-texture.jpg');
    background-size: cover;
    
    /* 🔥 PADDING SUPERIOR: Da espacio para acomodar perfectamente el sello grande */
    padding: 95px 40px 50px 40px; 
    
    /* CORTE ARQUITECTÓNICO: Curvo arriba y 100% plano abajo */
    border-top-left-radius: 250px !important;
    border-top-right-radius: 250px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-radius: 250px 250px 0 0 !important;
    
    /* OBLIGATORIO: Permite que el sello flote y sobresalga de la tarjeta */
    overflow: visible !important; 
    position: relative;
    
    box-shadow: 4px 10px 35px rgba(203, 185, 163, 0.7);
    max-width: 460px;
    width: 100%;
    min-height: 380px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* 🔥 EFECTO SELLO DE CERA VOLANDO A LA MITAD (BLINDADO) */
.sello-cera-badge {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translate(-50%, -50%) rotate(-4deg) !important; 
    
    /* 🔥 TAMAÑO COMPROBADO: Fijado en 115px para pantallas grandes con anulación de límites */
    width: 335 !important;  
    height: auto !important;
    max-width: none !important;
    z-index: 99 !important; /* Asegura que se dibuje por encima de la tarjeta y el fondo */
    
    /* Sombra optimizada para dar sensación de relieve real */
    filter: drop-shadow(0px 10px 18px rgba(100, 65, 40, 0.38)) !important; 
}

/* 💡 TIP EDITORIAL DE CONTRASTE */
.pases-section-premium .title-premium-black,
.pases-section-premium .name-text-dark {
    color: #2c2c2c !important; 
}

.pases-section-premium .subtitle-card-creme {
    color: #8c7355 !important; 
}

/* 🔥 TÍTULO DINÁMICO (HOLA + NOMBRE) */
.title-pases-premium {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0 15px 0;
    line-height: 1;
    text-align: center;
}

.pases-hola-baskerville {
    font-family: 'Baskerville', 'Baskerville Old Face', 'Hoefler Text', Garamond, serif !important; 
    font-size: 1.4rem;
    color: var(--text-muted);
    font-style: italic; 
    font-weight: normal;
    margin-bottom: 4px;
}

.pases-name-roseritta {
    font-family: 'Roseritta', serif !important; 
    font-size: 2.4rem;
    color: var(--text-dark);
    font-weight: normal !important;
    text-transform: none;
    
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
    font-feature-settings: "liga" 1, "dlig" 1, "clig" 1, "calt" 1;
}

/* 🔥 TEXTOS EN BASKERVILLE */
.subtitle-pases-premium {
    font-family: 'Baskerville', 'Baskerville Old Face', 'Hoefler Text', Garamond, serif !important; 
    color: var(--text-muted);
    font-size: 1.1rem;
    margin: 0 0 15px 0;
}

.desc-pases-premium {
    font-family: 'Baskerville', 'Baskerville Old Face', 'Hoefler Text', Garamond, serif !important; 
    color: var(--text-dark);
    font-size: 1.05rem;
    margin: 0 0 10px 0;
}

.ticket-icon-container {
    margin: 15px 0;
}

.ticket-icon-container i {
    font-size: 2.2rem;
    color: #9e825a; 
}

.pases-counter-premium {
    font-family: var(--font-premium-title);
    font-size: 2.4rem;
    color: var(--text-dark);
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 20px;
    margin-bottom: 15px;
    width: 80%; 
    text-align: center;
}

.footer-pases-text {
    font-family: var(--font-premium-hand);
    font-size: 2.2rem; 
    color: var(--text-dark);
    margin: 15px 0 0 0;
}

/* --- RESPONSIVO AJUSTADO PARA EVITAR CONFLICTOS EN CELULARES --- */
@media (max-width: 480px) {
    .paper-card.texture-paper {
        /* 🔥 Aumentamos a 80px arriba para que el sello móvil no asfixie el Hola */
        padding: 80px 25px 40px 25px; 
        border-radius: 200px 200px 0 0 !important; 
    }
    
.sello-cera-badge {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translate(-50%, -50%) rotate(-4deg) !important; 
    
    /* Forzado estructural */
    width: 135px !important;  
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 99 !important; 
    
    filter: drop-shadow(0px 10px 18px rgba(100, 65, 40, 0.38)) !important; 
}
    
    .pases-name-roseritta { font-size: 2.0rem; }
    .footer-pases-text { font-size: 1.9rem; }
}
/* =========================================================================
   BLOQUE 8: FORMULARIO RSVP PREMIUM (FORMA EN ARCO)
   ========================================================================= */
.rsvp-section-premium {
    padding: 80px 20px;
    
    /* 🔥 OBLIGATORIO: Esto le dice a la greca flotante que el centro se calcula desde aquí */
    position: relative !important;
    z-index: 10;
    
    /* Centrado de seguridad */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    
    /* Tu fondo fade premium */
    background-image: 
        linear-gradient(to bottom, #ffffff 0px, rgba(255, 255, 255, 0.8) 40px, rgba(255, 255, 255, 0) 120px), 
        url('assets/imagenes/textura_flores.jpg') !important;
        
    background-repeat: no-repeat !important;      
    background-size: cover !important;             
    background-position: center center !important;   
}

/* 🔥 TARJETA EVOLUCIONADA EN ARCO CON TEXTURA */
.rsvp-card-premium {
    background-image: url('assets/imagenes/paper-texture.jpg');
    background-size: cover;
    max-width: 460px;
    margin: 0 auto;
    text-align: center;
    
    /* Padding calibrado: le damos buen espacio arriba para balancear el arco */
    padding: 75px 40px 50px 40px;
    box-sizing: border-box;
    
    /* 🔥 CORTE DE ARCO DEFINITIVO: Redondo arriba, plano abajo */
    border-top-left-radius: 250px !important;
    border-top-right-radius: 250px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-radius: 250px 250px 0 0 !important;
    
    overflow: hidden; /* Corta la textura de papel limpiamente en las esquinas */
    box-shadow: 4px 10px 35px rgba(203, 185, 163, 0.7);
}

/* 🔥 MAQUETACIÓN DEL ENCABEZADO EN DOS LÍNEAS */
.title-rsvp-two-lines {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.95;
    margin: 0 0 10px 0;
}

.rsvp-title-small {
    font-family: 'Roseritta', serif !important;
    font-size: 3.6rem; /* Primera línea sutilmente más pequeña */
    color: var(--text-dark);
    font-weight: normal !important;
    text-transform: none;
}

.rsvp-title-large {
    font-family: 'Roseritta', serif !important;
    font-size: 3.5rem; /* Segunda línea grande y dominante */
    color: var(--text-dark);
    font-weight: normal !important;
    text-transform: none;
    
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
    font-feature-settings: "liga" 1, "dlig" 1, "clig" 1, "calt" 1;
}

.rsvp-subtitle-premium {
    font-family: var(--font-premium-body);
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 35px;
    line-height: 1.5;
}

.form-premium {
    text-align: left;
}

.form-group-premium {
    margin-bottom: 25px;
}

.label-premium {
    display: block;
    font-family: var(--font-premium-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.form-premium input[type="text"],
.form-premium textarea,
.form-premium select {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-premium-body);
    font-size: 0.95rem;
    color: var(--text-dark);
    background-color: var(--creme-light);
    border: 1px solid #E5E0DA;
    border-radius: 8px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    outline: none;
}

.form-premium input[type="text"]:focus,
.form-premium textarea:focus,
.form-premium select:focus {
    border-color: var(--creme-dark);
    background-color: var(--white);
}

/* 🔥 EL NUEVO BOTÓN EN DOS LÍNEAS */
.btn-submit-premium.btn-rsvp-two-lines {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: var(--text-dark);
    color: var(--white);
    padding: 14px 20px;
    border: 1px solid var(--text-dark);
    border-radius: 50px;
    cursor: pointer;
    line-height: 1;
    transition: all 0.3s ease;
    margin-top: 10px;
    box-sizing: border-box;
}

.btn-submit-premium.btn-rsvp-two-lines:hover {
    background-color: transparent;
    color: var(--text-dark);
}

.rsvp-btn-small {
    font-family: 'Roseritta', serif !important;
    font-size: 0.9rem; /* Primera línea más pequeña */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 3px;
}

.rsvp-btn-large {
    font-family: 'Roseritta', serif !important;
    font-size: 1.5rem; /* Segunda línea protagónica */
    text-transform: none;
    letter-spacing: 0.5px;
}

/* --- RESPONSIVO PARA PANTALLAS DE CELULARES --- */
@media (max-width: 480px) {
    .rsvp-card-premium {
        padding: 65px 25px 40px 25px;
        border-radius: 200px 200px 0 0 !important; /* Mantiene la proporción estética de arco */
    }
    .rsvp-title-small { font-size: 1.3rem; }
    .rsvp-title-large { font-size: 2.1rem; }
    .rsvp-btn-small { font-size: 0.8rem; }
    .rsvp-btn-large { font-size: 1.3rem; }
}
/* =========================================================================
   FOOTER: FULLSCREEN ARTÍSTICO DE CIERRE
   ========================================================================= */
.footer-fullscreen-section-premium {
    height: 100vh; /* Ocupa la pantalla completa para el impacto final */
    width: 100%;
    background-image: url('assets/imagenes/foto_final.jpg'); /* Tu foto de cierre */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 60px 20px;
    box-sizing: border-box;
}

.footer-overlay-premium {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.5));
    z-index: 1;
}

.footer-content-premium {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.footer-logo-premium {
    max-width: 140px;
    height: auto;
    opacity: 0.9;
}

/* Contenedor del logo en footer */
.footer-logo-container {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    padding-top: 20px; /* Espacio desde el borde superior del footer */
}

/* Ajuste manual del logo en footer */
.logo-ajustable-footer {
    display: block !important;
    height: auto !important;
    
    /* 🔥 AQUÍ AJUSTAS EL TAMAÑO */
    width: 350px !important;  /* Cambia este número para agrandar/achicar */
    max-width: 80% !important;
    
    /* 🔥 AQUÍ AJUSTAS LA POSICIÓN (Margin Top = más abajo / Margin Bottom = más espacio hacia el texto) */
    margin-top: 100px !important;    
    margin-bottom: 20px !important; 
    
    /* Sombra para que destaque */
    filter: drop-shadow(0px 4px 6px rgb(0, 0, 0)) !important;
}

.promo-container-premium {
    width: 100%;
    max-width: 380px;
    text-align: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    /* Manteniendo la asimetría premium pero reduciendo opacidad de fondo si deseas */
    background: rgba(255, 255, 255, 0.95) !important; 
}

.promo-text-premium {
    font-family: var(--font-premium-title);
    font-size: 1.4rem;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.btn-promo-premium {
    display: inline-block;
    background-color: #25D366; /* Verde WhatsApp oficial para conversión */
    color: var(--white);
    font-family: var(--font-premium-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    padding: 12px 25px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-promo-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}

.card-dress-code-premium {
    transition: transform 0.3s ease;
}

.card-dress-code-premium:hover {
    transform: translateY(-5px);
}

.icon-dress-code svg {
    display: block;
    margin: 0 auto;
    opacity: 0.8;
}

/* --- ITINERARIO PREMIUM --- */
.section-wrapper {
    /* Mantenemos tus propiedades de layout */
    margin-top: 40px;
    padding: 60px 20px;
    width: 100%;
    box-sizing: border-box;
    
    /* Importante para el posicionamiento del pseudo-elemento */
    position: relative;
    overflow: hidden; 
    
    /* Mantenemos tu clip-path original */
    clip-path: polygon(
        0 28px,
        50% 0,
        100% 40px,
        100% 100%,
        0 100%
    );
}

/* Creamos el fondo en un pseudo-elemento para iOS */
.section-wrapper::before {
    content: "";
    position: fixed; /* Esto es lo que iOS sí interpreta correctamente */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    
    /* Tu imagen de fondo aquí */
    background-image: url('assets/imagenes/textura_pases.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.title-itinerary-premium {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
    line-height: 0.8; /* Mantiene ambas líneas juntas */
}

.line-top-highspirited {
    font-family: 'High-Spirited', cursive;
    font-size: 3.5rem;
    color: #9e825a; /* Color dorado */
    font-weight: 400 !important; /* Protege ligamentos */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* 1. Títulos de eventos en Roseritta (Clase específica) */
.roseritta-text {
    font-family: 'Roseritta', serif !important;
    font-size: 1.1rem; /* Ajusta este tamaño a tu gusto */
    color: #4a4a4a;
    font-weight: 400 !important;
    margin: 0 0 5px 0;
    line-height: 1.1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* 2. Hora y descripción en Baskerville */
.timeline-bubble p, .timeline-bubble .time {
    font-family: 'Baskerville', 'Georgia', serif !important;
    font-size: 14px;
    color: #666;
    margin: 2px 0;
}

.line-bottom-roseritta {
    font-family: 'Roseritta', serif;
    font-size: 1.8rem;
    color: #4a4a4a; /* Color gris oscuro */
    font-weight: 400 !important; /* Protege ligamentos */
    margin-top: 10px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.timeline-wrapper {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
    padding: 40px;
    background-image: url('assets/imagenes/paper-texture.jpg'); 
    background-size: cover;
    background-position: center;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 4px 10px 35px rgba(203, 185, 163, 0.81);
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
    gap: 20px;
}

.timeline-icon {
    width: 45px;
    height: 45px;
    background: #ffffff; /* Blanco para ocultar la línea detrás */
    border: 1px solid #d4c19c;
    color: #d4c19c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    z-index: 3;
}

.timeline-bubble {
    background: rgba(255, 255, 255, 0.95);
    padding: 15px 20px;
    border-radius: 0 15px 15px 15px;
    box-shadow: 4px 10px 35px rgba(203, 185, 163, 0.75);
    flex: 1;
    min-width: 0;
}

/* La línea empieza debajo del título (160px aprox) */
.line-progress {
    position: absolute;
    left: 62px;
    top: 200px; /* Ajustado para el nuevo tamaño de título */
    bottom: 40px;
    width: 2px;
    background: #e0d8c3;
    z-index: 1;
    overflow: hidden; 
}

.line-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: #A48D78; /* Color de tu línea */
    transition: height 0.5s ease-out; /* ¡Asegúrate de tener esta transición! */
}

/* Este es el estado "activo" que tendrá el icono */
.timeline-icon.active {
    border-color: #E6DAC8; /* Un color más oscuro */
    box-shadow: 0 0 10px rgba(124, 104, 82, 0.5); /* ¡Ese brillo que buscas! */
    transform: scale(1.1); /* Un pequeño aumento de tamaño para resaltar */
    transition: all 0.3s ease;
}

   /* Sección Nosotros (Actualizada) */
.us-section-premium {
    padding: 80px 20px;
    /* Aquí aplicamos la textura de papel que ya usas en el itinerario */
    background-image: url('assets/imagenes/paper-texture.jpg');
    background-size: cover;
    text-align: center;
}



/* Contenedor principal */
.names-container-us-editorial {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px; /* Eliminamos el gap para que el line-height controle todo el ajuste */
    margin-bottom: 25px;
    text-align: center;
    font-weight: normal !important;
    
    /* Mantén las ligaduras activas que ya arreglamos */
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
    font-feature-settings: "liga" 1, "dlig" 1, "clig" 1, "calt" 1;
}

/* Primera línea (Nombre de la Novia) */
.editorial-line-one {
    display: block;
    width: 100%;
    line-height: 0.85; /* 🔥 Interlineado premium ajustado */
}

/* Segunda línea (Conector & + Alejandro) */
.editorial-line-two {
    display: flex;
    align-items: baseline; 
    justify-content: center; 
    gap: 8px; /* Reducimos un poco el espacio horizontal para que vaya acorde a la & más pequeña */
    width: 100%;
    line-height: 0.85; /* 🔥 Mismo interlineado para compactar verticalmente */
}

/* Primer Nombre */
.editorial-name {
    font-family: 'Roseritta', serif !important;
    font-size: 3.5rem;
    color: var(--text-dark);
    letter-spacing: 1px;
}

/* El conector & (Más pequeña y estilizada) */
.editorial-ampersand {
    font-family: 'Roseritta', serif !important;
    font-size: 1.8rem; /* 🔥 Reducida para que se vea fina y minimalista */
    color: var(--text-dark);
    transform: translateY(-2px); /* Ajuste por si al achicarse se sube o baja de la línea base */
    opacity: 0.85; /* Un toque leve de opacidad la hace ver aún más sofisticada */
}

/* Nombre Alejandro */
.editorial-name-alt {
    font-family: 'Roseritta', serif !important;
    font-size: 3.5rem;
    color: var(--text-dark);
    letter-spacing: 1px;
}

.decorative-line {
    margin-bottom: 30px;
}

.greca-decorativa {
    width: 120px; /* Esto controla el tamaño de la greca */
    height: auto;
    display: block;
    margin: 0 auto;
    opacity: 0.8;
}

/* Contenedor Píldora */
.photo-pill-container {
    width: 200px;
    height: 350px; /* Ajusta según la proporción de tu foto */
    margin: 0 auto;
    border-radius: 100px; /* Esto crea la forma de píldora */
    overflow: hidden;
    box-shadow: 4px 10px 35px rgba(203, 185, 163, 0.81);
    border: 3px solid var(--white);
}

.photo-pill {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Sección de Código de Vestimenta */
.dress-code-section-premium {
    padding: 80px 20px;
    text-align: center;
    margin-top: -40px;
    margin-bottom: -40px;
    z-index: 10;
    
    /* NECESARIO para que el pseudo-elemento ::before se posicione respecto a esta sección */
    position: relative; 
    
    /* ELIMINAMOS el background aquí porque irá en el ::before */
    
    /* Mantenemos el polígono */
    clip-path: polygon(
        0 28px, 
        38% 0, 
        100% 40px, 
        100% calc(100% - 40px), 
        38% 100%, 
        0 calc(100% - 28px)
    );
}

/* APLICAMOS EL FONDO AQUÍ */
.dress-code-section-premium::before {
    content: "";
    position: fixed; /* Esto es lo que iPhone necesita */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    
    background-image: url('assets/imagenes/textura_pases.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.dress-code-card {
    background-image: url('assets/imagenes/paper-texture.jpg');
    background-size: cover;
    
    /* Padding equilibrado para la nueva forma de arco */
    padding: 65px 45px 55px 45px; 
    
    /* 🔥 REFUERZO DE CORTE: Curvo arriba, totalmente recto abajo */
    border-radius: 250px 250px 0px 0px !important; 
    
    /* 🔥 CLAVE DE LA SOLUCIÓN: Obliga a la textura de papel a recortarse 
       siguiendo el border-radius, impidiendo que pinte redondo abajo */
    overflow: hidden; 
    
    box-shadow: 4px 10px 35px rgba(203, 185, 163, 0.81);
    max-width: 480px; /* Ancho ideal para balancear la caída recta del arco */
    margin: 0 auto;
    
    min-height: 350px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    box-sizing: border-box;
}

.dress-code-icon {
    width: 85px; /* 🔥 Subido de 60px a 85px para que sea más grande */
    height: auto;
    display: block;
    margin: 0 auto 15px auto; 
    filter: none !important; /* Respeta el color exacto nativo de tu SVG */
}

/* 🔥 TÍTULO RECONFIGURADO EN DOS LÍNEAS */
.dress-code-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 15px 0;
    line-height: 0.9;
}

.dress-line-roseritta {
    font-family: 'Roseritta', serif !important; /* 🔥 Primera línea en Roseritta */
    font-size: 2.5rem;
    color: var(--text-dark);
    font-weight: normal !important;
    text-transform: none;
    
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
    font-feature-settings: "liga" 1, "dlig" 1, "clig" 1, "calt" 1;
}

.dress-line-highspirited {
    font-family: 'High-Spirited', cursive !important; /* 🔥 Segunda línea en High-Spirited */
    font-size: 2.2rem; /* 🚀 Subimos de 8.1rem a 9.5rem para darle un tamaño espectacular */
    color: var(--text-dark);
    font-weight: normal !important;
    text-transform: none;
    
    /* 🔥 Ajustamos el entrelazado: al ser más grande la letra, 
       un -8px o -10px hará que se apoye mágicamente sobre el piso anterior sin encimarse feo */
    margin-top: -8px; 
    line-height: 0.7; /* Blindaje de interlineado para que el contenedor no deje aire de más abajo */
}

/* 🔥 SUBTÍTULO CON ROSERITTA */
.dress-code-subtitle {
    font-family: 'Roseritta', serif !important; /* 🔥 Formal va en Roseritta */
    font-size: 1.6rem;                          /* Ajustado para el nuevo equilibrio */
    text-transform: none;                       /* Quitamos el uppercase estricto */
    letter-spacing: 1px;
    margin: 0 0 15px 0;
    color: var(--text-dark);
    font-weight: normal !important;
}

/* 🔥 DESCRIPCIÓN CON BASKERVILLE */
.dress-code-desc {
    font-family: 'Baskerville', 'Baskerville Old Face', 'Hoefler Text', Garamond, serif !important; /* 🔥 Cambiado a Baskerville */
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.4;
    max-width: 290px; /* Limita el ancho del texto para que encaje estéticamente en la píldora */
    margin: 0 0 25px 0;
}

/* 🔥 NUEVO BOTÓN SUTIL 'VER IDEAS' */
.btn-pinterest-dress {
    display: inline-block;
    padding: 10px 30px;
    border: 1px solid var(--text-dark);
    border-radius: 50px;
    font-family: var(--font-premium-body);
    font-size: 0.78rem;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-dark);
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
    background: transparent;
}

.btn-pinterest-dress:hover {
    background: var(--text-dark);
    color: var(--white);
}

/* --- OPTIMIZACIÓN RESPONSIVA CELULARES --- */
@media (max-width: 480px) {
    .dress-code-card {
        padding: 55px 30px 45px 30px;
        border-radius: 350px; /* Sigue manteniendo el óvalo perfecto en pantallas chicas */
    }
    .dress-line-roseritta { font-size: 2.1rem; }
.dress-line-highspirited {
    font-family: 'High-Spirited', cursive !important;
    font-size: 4.5rem !important; /* 🔥 Asegúrate de dejarle el !important */
    display: inline-block !important; /* Forzamos a que respete el nuevo tamaño físico */
    color: var(--text-dark);
    font-weight: normal !important;
    text-transform: none;
    margin-top: -8px; 
    line-height: 0.7;
}    .dress-code-subtitle { font-size: 1.3rem; }
    .dress-code-icon { width: 70px; }
    .paper-card.texture-paper {
        padding: 85px 25px 40px 25px; 
        border-radius: 200px 200px 0 0 !important; 
    }
    
    .sello-cera-badge {
        /* 🔥 Si en el HTML pusiste 135px, aquí en celulares lo calibramos a 105px */
        width: 105px !important; 
    }
}
/* =========================================================================
   SECCIÓN VIDEO CON TEXTOS FLOTANTES
   ========================================================================= */

.video-section-fullscreen {
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
    position: relative; /* Crucial para poder flotar los textos adentro */
    
    /* ACOPLE DE SECCIONES: Sube para que el clip-path del código de vestimenta quede encima */
    margin-top: -55px; 
    margin-bottom: 0 !important; /* Reseteamos para que conecte directo con el collage */
    z-index: 10;
    
    /* 🌟 TU CLIP-PATH CENTRADO: Muesca en V hacia abajo que recibe a la sección anterior */
    clip-path: polygon(
        0 0, 
        50% 40px, 
        100% 0, 
        100% 100%, 
        0 100%
    );
}

.video-container-fullscreen {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    position: relative;

    /* EL FADE PERFECTO INFERIOR: El video se vuelve transparente al final */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.responsive-video-fullscreen {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Ajuste de tiempo para que la galería aparezca más pausada */
.video-section-fullscreen .title-reveal {
    transition-duration: 1.5s; 
}

/* 🌟 CONTENEDOR DE TÍTULOS FLOTANTES */
.gallery-titles-over-video {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%); /* Este se encarga de centrar el bloque */
    width: 100%;
    text-align: center;
    z-index: 20; 
    pointer-events: none; 
    
    /* 🔥 IMPORTANTE: Evitamos que los elementos hijos se "salgan" de su lugar */
    display: flex;
    flex-direction: column;
    align-items: center; 
}

/* Letra manuscrita / script premium (HIGH-SPIRITED) */
.gallery-title-script {
    font-family: 'High-Spirited', sans-serif !important;
    font-size: 8.5rem; /* 🔥 Aumentado de 4rem a 5.5rem para mayor impacto */
    color: var(--text-dark);
    margin: 0;
    font-weight: normal !important;
    line-height: 0.8; /* Ajuste sutil para que no se vea tan pegado al subtítulo */
    text-shadow: 0 0 10px rgba(247, 244, 239, 0.9), 0 2px 4px rgba(0,0,0,0.05);
}

/* 2. Aumentamos el espaciado (interlineado) del subtítulo */
.gallery-subtitle-script {
    font-family: 'Baskerville', 'Baskerville Old Face', serif !important;
    font-size: 1.2rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 4px; /* Un poco más de aire entre letras */
    
    /* 🔥 AJUSTES CLAVE */
    margin-top: 15px; /* Separamos más el subtítulo del título principal */
    line-height: 1.8;   /* 🔥 Esto da el interlineado/aire que pediste */
    
    font-weight: normal !important;
    text-shadow: 0 0 8px rgba(247, 244, 239, 0.9);
}
/* =========================================================================
   COLAGE - ESTRUCTURA Y ESTILOS DEFINITIVOS (ENMARCADO CON MÁRGENES)
   ========================================================================= */
/* --- CORRECCIÓN DEFINITIVA DE COLLAGE Y LIGHTBOX --- */

/* 1. Contenedor principal: Rejilla rígida enmarcada */
.collage-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 8px !important;
    padding: 0 8px !important; 
    width: 100% !important;
    max-width: 450px !important;
    
    /* CORRECCIÓN: 70px arriba para separarlo del video, 'auto' al centro, 
       y agregamos 40px ABAJO para proteger la última hilera de fotos */
    margin: 50px auto 50px !important; 
    
    box-sizing: border-box !important;
    position: relative;
    z-index: 5; /* Le da una capa base estable */
}

/* 2. El "marco" que mantiene todo en su lugar */
.collage-item {
    width: 100%;
    overflow: hidden;
    border-radius: 6px; /* Ajustado ligeramente para un look más pulido */
    line-height: 0;
    display: block;
}

/* 3. Las imágenes se adaptan a su marco */
.collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* 4. Clases de proporción */
.vert { aspect-ratio: 3/4; }
.horiz { aspect-ratio: 16/9; grid-column: span 2; }

/* 5. Efecto de zoom controlado */
.collage-item:hover img {
    transform: scale(1.05);
}

/* 6. Lightbox: Ajuste de opacidad de fondo (Más oscuro) */
.goverlay {
    background: rgba(0, 0, 0, 0.83) !important;
}

/* 7. Forzar visibilidad de flechas */
.glightbox-prev, .glightbox-next {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 50%;
    padding: 15px;
    z-index: 9999 !important;
}

.glightbox-prev::before, .glightbox-next::before {
    color: white !important;
    font-size: 20px !important;
}

/* --- SECCIÓN HASHTAG - ETIQUETA --- */
.hashtag-section-label {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: transparent; 
    padding: 0;
    margin-top: -5px; 
    z-index: 5;
}

.paper-card-label {
    width: 100%;
    max-width: 450px; 
    background-color: #ffffff;
    padding: 50px 25px 70px 25px; /* Más padding para dejar respirar el contenido */
    text-align: center;
    box-sizing: border-box;
    /* Recto arriba (borde con borde), redondo abajo */
    border-radius: 0 0 200px 200px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* 🔥 ICONO INSTAGRAM MÁS GRANDE */
.instagram-icon {
    font-size: 60px !important; /* Aumentado significativamente */
    color: #9e825a;
    margin: 25px 0; /* Mayor separación para dar aire */
    display: block;
}

/* Ajustes de títulos con interlineado estrecho */
.title-hashtag-premium {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.7; /* Mantienen la cercanía que pediste */
    margin-bottom: 10px;
}

.line-share-roseritta {
    font-family: 'Roseritta', serif;
    font-size: 2.8rem;
    color: #4a4a4a;
    font-weight: 400 !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.line-thelove-highspirited {
    font-family: 'High-Spirited', cursive;
    font-size: 3.5rem;
    color: #9e825a;
    font-weight: 400 !important;
    margin-top: 10px; 
}

/* Hashtag con Roseritta */
.hashtag-big-roseritta {
    font-family: 'Roseritta', serif !important;
    font-size: 3.8rem; /* Un poco más grande para destacar */
    color: #2c2c2c;
    font-weight: 400 !important;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.1);
    line-height: 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
.hashtag-long {
    font-size: 2.5rem !important; /* Un tamaño más pequeño y seguro */
}

/* --- SECCIÓN REGALOS --- */
.gifts-section {
    padding: 100px 20px;
    background-color: var(--creme-light); /* Mantenemos el color de fondo base */
    
    /* Eliminamos las propiedades de imagen de aquí */
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: -50px;
    margin-bottom: -40px;
    z-index: 10;
    
    /* IMPORTANTE: Mantener relativo para el ::before */
    position: relative; 
    
    clip-path: polygon(0 28px, 38% 0, 100% 40px, 100% 100%, 0 100%);
}

/* Aplicamos el fondo y el blend-mode al pseudo-elemento */
.gifts-section::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    
    background-image: url('assets/imagenes/textura_flores.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* El modo de mezcla ahora se aplica correctamente aquí */
    background-blend-mode: multiply;
    /* Aseguramos que el color de fondo también afecte la mezcla */
    background-color: var(--creme-light); 
}
/* Título Premium con icono grande */
.title-gifts-premium {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    line-height: 0.4; /* 🚀 Ajuste: reduce drásticamente el espacio entre líneas */
    margin-top: 10px;
}

.gift-title-icon-large {
    width: 80px; /* Icono grande como solicitaste */
    height: 80px;
    margin-bottom: 20px;
    object-fit: contain;
}

.line-roseritta {
    font-family: 'Roseritta', serif;
    font-size: 2.6rem;
    color: #4a4a4a;
    font-weight: 400 !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.line-highspirited {
    font-family: 'High-Spirited', cursive;
    font-size: 5.2rem;
    color: #9e825a;
    font-weight: 400 !important;
    margin-top: 5px;
}

/* Tipografía Baskerville para todo el texto de apoyo */
.gift-text-baskerville, 
.gift-desc-baskerville {
    text-decoration: none !important;
    color: #555 !important; /* Mantiene tu color gris definido */
    border-bottom: none !important;
    pointer-events: none; /* Desactiva la capacidad de hacer clic en el número */
}


.desc-gifts-baskerville {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
    text-align: center;
}

.gifts-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.gift-item {
    flex: 1;
    min-width: 250px;
    text-align: center;
    padding: 20px;
}

.gift-icon {
    width: 200px;
    height: 60px;
    margin-bottom: 20px;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.gift-text-baskerville {
    margin-bottom: 5px;
}

.btn-gift {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    background-color: transparent;
    color: #9e825a;
    text-decoration: none;
    border: 1px solid #9e825a;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.btn-gift:hover {
    background-color: #9e825a;
    color: #ffffff;
    cursor: pointer;
}
/* --- SECCIÓN DE CIERRE (OVERLAY PROFESIONAL FINAL) --- */
.footer-section {
    position: relative;
    width: 100%;
    min-height: 100vh; /* Fuerza a que mida toda la pantalla del iPhone */
    background-image: url('assets/imagenes/foto-cierre.jpg'); /* Tu ruta de imagen */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* Evita bugs en Safari de iOS */
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
            /* ACOPLE DE SECCIONES */
    margin-top: -50px; /* Sube para solapar la portada */
    margin-bottom: -40px; /* Absorbe el espacio para que el bloque crema se meta debajo perfectamente */
    z-index: 10;
    
clip-path: polygon(
    0 0, 
  38% 45px, 
    100% 12px, 
    100% 100%, 
    0 100%
);}

.footer-photo {
    position: relative;
    width: 100%;
    min-height: 100vh; /* Cambiado de height a min-height para mejor responsividad */
    overflow: hidden;
}

.footer-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.footer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Sigue dinámicamente el tamaño exacto del padre */
    background: rgba(0, 0, 0, 0.65); /* Tu capa oscura elegante */
    
    /* Pasamos el comportamiento de alineación aquí adentro */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 60px 20px; /* El espacio seguro para tus textos y logos */
    box-sizing: border-box;
    text-align: center;
    color: #ffffff;
    z-index: 2; /* Asegura que el contenido quede por encima del fondo */
}

.footer-logo-novios {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.footer-logo-novios img {
    max-width: 250px;
    width: 100%;
    height: auto !important;
    object-fit: contain;
}

.branding-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.brand-logo {
    max-width: 250px;
    width: 100%;
    height: auto !important;
    object-fit: contain;
    margin-bottom: 15px;
}

.copyright, .brand-url, .whatsapp-cta p {
    color: #ffffff !important;
    margin: 4px 0;
    font-size: 13px;
}

.brand-url {
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 15px;
    font-size: 16px;
}

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 25px;
    background-color: #9e825a;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    transition: transform 0.3s ease;
}

.btn-whatsapp:hover {
    transform: scale(1.05);
}

.greca-transicional-flotante {
    position: absolute !important;
    top: 0 !important; 
    left: 50% !important;
    transform: translate(-50%, -50%) !important; 
    
width: 100% !important;
    max-width: 240px !important; /* 🚀 Subimos de 180px a 240px para darle más presencia */
    margin: 0 auto !important;
    
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 99 !important; 
    pointer-events: none; 
}

/* Ajuste móvil */
@media (max-width: 480px) {
    .footer-logo-novios img { max-width: 180px; }
    .brand-logo { max-width: 150px; }
    .gallery-titles-over-video {
        bottom: 15px; /* Lo bajamos un poquito en cel para que no tape el centro del video */
    }
   .gallery-title-script {
    font-family: 'High-Spirited', sans-serif !important;
    font-size: 5.5rem !important; /* Añade !important aquí para forzar */
    display: block;              /* Asegura que tome todo el ancho */
    white-space: nowrap;         /* Evita que se encoja para caber */
    color: var(--text-dark);
    margin: 0;
    line-height: 0.8;
}
    .gallery-subtitle-script {
        font-size: 0.95rem;
        letter-spacing: 2px;
        margin: -2px 0 0 0;
    }
    
    .footer-overlay {
        height: 100% !important;
    }
    
    /* 🔥 NUEVO: La greca se encoge aquí para que no se vea gigante en pantallas de celulares */
    .greca-transicional-flotante {
        max-width: 170px; 
    }

    /* Clase base para títulos con animación */
.title-reveal {
    opacity: 0;
    /* Usamos translate3d para mantener el X siempre en 0 y solo mover el Y */
    transform: translate3d(0, 20px, 0); 
    transition: all 0.8s ease-out;
}


/* Estado activo (cuando el título llega a la pantalla) */
.title-reveal.active {
    opacity: 1;
    transform: translate3d(0, 0, 0); /* El X se queda en 0, respetando el centrado del padre */
}
.main-logo-premium {
    /* Animación que ocurre al cargar la página */
    animation: fadeInDown 1.5s ease-out forwards;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* 'clip' previene el scroll lateral sin los efectos secundarios de 'hidden' */
    overflow-x: clip; 
    -webkit-overflow-scrolling: touch; /* Mejora la suavidad en iOS */
}

* {
    box-sizing: border-box;
}

.family-section-premium {
    width: 100%;
    overflow-x: clip;
}
}

/* 1. Lógica de visibilidad por paquete */
.paquete-small #rsvp-form {
    display: none !important;
}

.paquete-small #contenedor-btn-whatsapp {
    display: block !important;
}

/* 2. Estilo del botón de WhatsApp */
.btn-submit-whatsapp-custom {
    background-color: #25D366 !important;
    color: #ffffff !important;
    padding: 15px 30px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 16px !important;
    display: inline-block !important;
    transition: background 0.3s ease !important;
    text-align: center;
}

.btn-submit-whatsapp-custom:hover {
    background-color: #128C7E !important;
}
/* --- LÓGICA DE PAQUETES (Sistema de Ventas) --- */

/* --- 1. PAQUETE ESENCIAL (Antes era Small) --- */
.paquete-esencial .family-section-premium,
.paquete-esencial .dress-code-section-premium,
.paquete-esencial .video-section-fullscreen,
.paquete-esencial .collage-grid,
.paquete-esencial .hashtag-section-label,
.paquete-esencial .section-wrapper,
.paquete-esencial .pases-section-premium {
    display: none !important;
}

/* Ocultar formulario y mostrar botón */
.paquete-esencial #rsvp-form {
    display: none !important;
}

.paquete-esencial #contenedor-btn-whatsapp {
    display: block !important;
}

/* --- 2. PAQUETE MEDIUM (Equilibrio visual) --- */
.paquete-medium .family-section-premium, /* Oculta carrusel familia */
.paquete-medium .video-section-fullscreen,
.paquete-medium .hashtag-section-label,
.paquete-medium .pases-section-premium {
    display: none !important;
}