:root {
    --font-display: 'Italiana', 'Cormorant Garamond', serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.oculto {
    display: none !important;
}

/* ---------- Lenis Smooth Scroll Base ---------- */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--olive);
    text-decoration: none;
    transition: opacity .3s var(--ease);
}

a:hover {
    opacity: 0.7;
}

button {
    font-family: inherit;
    cursor: pointer;
}

::selection {
    background: var(--olive);
    color: var(--cream);
}

/* ----- Loader ----- */
#loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--cream);
    display: grid;
    place-content: center;
    transition: opacity .8s var(--ease), visibility .8s var(--ease);
}

#loader.hidden {
    opacity: 0;
    visibility: hidden;
}

/* NUEVO: Contenedor para alinear logo y anillo */
.loader-content {
    position: relative;
    width: 90px;
    /* Ajusta para el tamaño general del círculo */
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#loader .ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--line);
    border-top-color: var(--olive);
    border-radius: 50%;
    animation: spin 1.1s linear infinite;
}

.loader-logo {
    width: 50px;
    height: auto;
    z-index: 2;
    animation: pulse-logo 2s ease-in-out infinite;

    /* === AÑADE ESTAS LÍNEAS PARA AJUSTAR EL CENTRADO === */
    position: relative;
    top: 3.5px;
    /* Modifica este número: valores negativos lo suben, positivos lo bajan */
    left: 3.5px;
    /* Modifica este número: valores negativos lo mueven a la izquierda, positivos a la derecha */
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Opcional: Animación suave para el logo */
@keyframes pulse-logo {

    0%,
    100% {
        transform: scale(0.95);
        opacity: 0.9;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

.player {
    position: fixed;
    bottom: 18px;
    left: 18px;
    z-index: 100;

    width: 46px;
    height: 46px;

    background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 50%, var(--gold-dark) 100%);
    border: 0px solid var(--cream);
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    /* IMPORTANTE */
    color: var(--cream);

    box-shadow: 0 4px 10px rgb(44 47 28 / 50%);
    transition: transform .3s var(--ease);
}

.player svg {
    width: 18px;
    height: 18px;
    fill: currentColor;

    display: block;
    /* evita espacio inline */
    flex-shrink: 0;
}

/* =========================================
   TEXTO CURVO DEL PLAYER
   ========================================= */
.player svg.curved-text {
    position: absolute;
    width: 70px;
    /* Es más grande que tu botón de 46px para orbitar por fuera */
    height: 110px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Lo centra perfectamente sobre el botón dorado */

    fill: none;
    /* Sobrescribe la regla de los 18px */
    pointer-events: none;
    /* IMPORTANTE: Hace que el texto sea "fantasma" y los clics pasen a través de él hacia el botón */
}

/* Estilos de la letra */
.player svg.curved-text text {
    font-family: var(--font-body);
    /* Usamos la misma fuente limpia de tu diseño */
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;

    /* El color de la letra: Te sugiero --gold o --cream dependiendo de qué tan oscuro sea tu fondo */
    fill: var(--gold);
}

/* ----- Tipografía ----- */
h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: .02em;
    color: var(--olive);
    margin: 0;
    line-height: 1.1;
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold-dark);
    font-weight: 500;
    margin-bottom: 18px;
}

.eyebrow::before,
.eyebrow::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--gold);
    vertical-align: middle;
    margin: 0 12px;
}

.script {
    font-family: var(--font-script);
    color: var(--olive);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1;
}

/* ----- LPARALAX ----- */





/* ----- Layout helpers ----- */
.section {
    padding: clamp(20px, 4vw, 60px) 24px;
    position: relative;
}

/* Estilo base para todas las hojas flotantes */
.hoja-flotante {
    position: absolute;
    pointer-events: none;
    /* Vital: evita que bloqueen clics en botones o modales */
    will-change: transform;
}

/* Nivel 1: Muy lejos (Detrás del texto, pero delante del fondo de la sección) */
.hoja-fondo {
    width: 6vh;
    /* En móvil medirá 70px, en PC máximo 100px */
    z-index: 0;
    /* Cambiado de -1 a 1 para que el color de la sección no la tape */
    opacity: 0.65;
    filter: blur(3px);
}

.hoja-regalos {
    /* Usa píxeles (px) o rem, NO uses porcentajes (%) ni 'bottom' */
    top: 150px;
    /* Ajusta este número hasta que quede en la posición que te gusta */
    bottom: auto;
    /* Esto desactiva cualquier anclaje inferior previo */
}

/* Nivel 2: Distancia media */
.hoja-media {
    width: 6vh;
    /* Más pequeñas y manejables */
    z-index: 5;
    opacity: 0.28;
}

/* Nivel 3: Muy cerca (Pasan por encima) */
.hoja-frente {
    width: 5vw;
    /* Reducido drásticamente de 350px a 220px máximo */
    z-index: 50;
    opacity: 0.7;
    filter: blur(1px);
    /* Un poco menos de desenfoque para que no se vea como una mancha gigante */
}

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

.narrow {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 32px auto;
    color: var(--gold);
    background-color: var(--cream);
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    max-width: 80px;
    height: 1px;
    background: var(--gold-soft);
    margin: 0 16px;
}

.divider svg {
    width: 18px;
    height: 18px;
}



/* ================================================================
   1. HERO (Acomodo: texto izq · pareja recortada der)
   ================================================================ */
.hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    padding: 0 !important;
    display: block;
}

/* Fondo beige sólido (degradado suave y cálido) */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(125% 100% at 40% 22%,
            #f7ede4 0%,
            #efddce 52%,
            #e7d2c1 100%);
}

/* Contenedor en 2 columnas: texto | pareja */
.hero-container {
    position: relative;
    z-index: 2;
    max-width: 1080px;
    margin: 0 auto;
    min-height: 100svh;
    display: grid;
    /* grid-template-columns: 0.9fr 1.1fr; */
    align-items: center;
    gap: 0;
    padding: 0 clamp(6px, 2vw, 24px);
}

/* Columna de texto (izquierda) */
.hero-text-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding-left: clamp(14px, 4vw, 44px);
}

.hero .subtitle {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--olive-dark);
    letter-spacing: .04em;
    font-size: clamp(1.15rem, 3.6vw, 2rem);
    margin: 0 0 clamp(18px, 4vw, 34px);
}

/* Nombres apilados a la izquierda (Jesús / & / Liliana) */
.hero .names {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-display);
    color: var(--olive);
    line-height: 1;
    margin: 0;
    font-size: clamp(2.4rem, 11.5vw, 5.8rem);
}

.hero .names span {
    display: block;
    margin: 0;
    padding: 0;
}

.hero .names .ampersand {
    font-family: "Rouge Script", cursive;
    color: #b8a574;
    font-size: clamp(1.9rem, 7vw, 3.6rem);
    line-height: 1;
    margin: clamp(2px, 0.6vw, 8px) 0 clamp(2px, 0.6vw, 8px) clamp(6px, 1.6vw, 16px);
}

.hero .date-top {
    font-family: var(--font-body);
    text-transform: uppercase;
    color: var(--olive-dark);
    font-size: clamp(11px, 2.4vw, 16px);
    letter-spacing: .34em;
    margin-top: clamp(22px, 5vw, 42px);
}

/* Pareja recortada (derecha, anclada abajo) */
.hero-image-content {
    position: relative;
    z-index: 2;
    align-self: stretch;
    width: 100%;
    /* background-image: url(../images/pareja.webp); */
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
}

/* Hojas de acuarela: arriba-derecha y abajo-izquierda */
.hoja-parallax {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    object-fit: contain;
    width: auto;
    height: auto;
    opacity: .95;
}

.hoja-top {
    top: -3%;
    right: -3%;
    left: auto;
    bottom: auto;
    width: min(48vw, 440px);
    transform: rotate(-6deg);
}

.hoja-bottom {
    bottom: -3%;
    left: -5%;
    right: auto;
    top: auto;
    width: min(34vw, 300px);
    transform: rotate(4deg);
    z-index: 11;
}

@media (max-width: 600px) {
    .hero-container {
        padding: 0 14px;
        height: 100vh;
        /* 1. Aseguramos que el contenedor abarque toda la pantalla */
        display: flex;
    }

    .hero-text-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* 2. Esto empuja los elementos hacia los extremos */
        align-items: center;
        height: 100%;
        width: 100%;
        padding-top: 15vh;
        /* 3. Espacio superior para librar las hojas */
        padding-bottom: 15vh;
        /* 4. Espacio inferior para librar las hojas */
        padding-left: 0px;
    }

    .hero .subtitle {
        font-size: clamp(1.5rem, 4.2vw, 1.5rem);
        text-align: center;
        margin: 0;
        /* ¡Adiós position: absolute y tops raros! */
    }

    .hero .names {
        font-size: clamp(4.8rem, 11.5vw, 3.8rem);
        text-align: center;
        margin: auto 0;
        /* Mantiene los nombres perfectamente en el centro */
        display: flex;
        flex-direction: column;
        /* Alinea Jesús, & y Liliana verticalmente si es necesario */
        align-items: center;
    }

    .hero .date-top {
        white-space: nowrap;
        letter-spacing: .24em;
        font-size: clamp(16px, 3vw, 13px);
        text-align: center;
        margin: 0;
        bottom: 5vh;
        position: relative;
    }

    .hero .names .ampersand {
        font-size: clamp(5rem, 7vw, 3.6rem);
        line-height: 0.7;
    }


}

/* ---------- FONDOS Y HOJAS ---------- */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    /*background: linear-gradient(rgb(252 250 245 / 0%) 0%, rgb(252 250 245 / 0%) 5%, rgb(248 245 238 / 0%) 25%, rgb(248 245 238 / 0%) 64%, rgb(248 245 238) 92%, rgb(255, 252, 246) 100%) center center / cover no-repeat, radial-gradient(rgb(255 255 255 / 65%) 0%, rgb(248 245 238 / 71%) 45%), url(../images/hero.webp); */
    background: linear-gradient(rgba(252, 250, 245, 1) 0%, rgb(252 250 245 / 80%) 5%, rgb(248 245 238 / 0%) 25%, rgb(248 245 238 / 0%) 64%, rgb(248 245 238) 92%, rgb(255, 252, 246) 100%) center center / cover no-repeat, radial-gradient(rgb(255 255 255 / 65%) 0%, rgb(248 245 238 / 71%) 45%), url(../images/hero.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 🌿 HOJAS: En la capa 1, entre el fondo y el texto */
.hero-bg::before,
.hero-bg::after {
    content: '';
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    pointer-events: none;
    width: 350px;
    height: 400px;
    max-width: 45vw;
}

/* ================================================================
   ANIMACIÓN DE ENTRADA DEL HERO (FONDO BLANCO)
   ================================================================ */
#hero {
    position: relative;
    /* Asegúrate de que tu hero tenga esto */
}

#hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    /* Color blanco inicial */
    z-index: 1;
    /* Detrás de tus textos, pero encima del fondo */
    animation: desvanecerFondoBlanco 4s ease forwards;
    animation-delay: 0.5s;
    /* Ajusta este tiempo según lo que dure tu preloader */
    pointer-events: none;
    /* Evita que bloquee los clics */
}

@keyframes desvanecerFondoBlanco {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}


/* ================================================================
   EXTRA
   ================================================================ */
.separador {
    background: var(--olive);
    text-align: center;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    /* Ajustamos el relleno: 40px arriba/abajo, 24px lados */
    padding: 20px 24px !important;
    border-top: none !important;
}

/* ================================================================
   2. INVITADO
   ================================================================ */

/* ================================================================
   2. INVITADO
   ================================================================ */

.invitado {
    position: relative;
    /* Obligatorio para que el fondo absoluto se alinee aquí */
    z-index: 10;
    margin-top: -150px;
    /* Sigue jalando la sección sobre el hero */
    padding-top: 180px;
    /* Espacio de protección para el texto */
    padding-bottom: 80px;
    /* Ajusta según tus necesidades */
    text-align: center;
    border-top: none !important;
    overflow: hidden;
    /* IMPORTANTE: Evita que el fondo se salga de los límites al moverse */
}

/* NUEVO: Estilos para el fondo animado */
.invitado-bg-parallax {
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    /* Le damos un 20% más de altura para tener margen de movimiento hacia abajo sin dejar huecos */
    height: 160%;

    background-image: url('../images/Lorena-min.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;

    /* Lo mandamos al fondo de su propia sección, por debajo del texto */
    z-index: -1;
    will-change: transform;
}

.invitado::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    /* Altura del degradado, ajusta si quieres que difumine más suave */

    /* Crea una transición del transparente al color de la SIGUIENTE sección */
    /* Cambia var(--ivory) por la variable de color que use la sección de abajo */
    background: linear-gradient(to bottom, rgba(255, 252, 246, 0) 0%, var(--ivory) 100%);

    z-index: -1;
    /* Lo ponemos por encima de la imagen parallax para que la tape */
    pointer-events: none;

}

.invitado h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin: 16px 0 8px;
}

.invitado .mesa {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--olive-dark);
    font-size: 1.1rem;
}

.pases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    max-width: 480px;
    margin: 48px auto 40px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--cream);
}

.pase-card {
    padding: 28px 16px;
    border-right: 1px solid var(--line);
}

.pase-card:last-child {
    border-right: none;
    background: var(--olive);
    color: var(--cream);
}

.pase-card:last-child .pase-num {
    color: var(--cream);
}

.pase-card:last-child .pase-label {
    color: var(--gold-soft);
}

.pase-num {
    font-family: var(--font-jaguar);
    font-size: 3rem;
    color: var(--olive);
    display: block;
    line-height: 1;
}

.pase-label {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--olive-dark);
    margin-top: 8px;
    display: block;
}

.confirmado-msg {
    text-align: center;
    padding: 60px 24px;
    background: var(--olive);
    color: var(--cream);
    border-radius: 2px;
    max-width: 560px;
    margin: 40px auto 0;
}

.confirmado-msg h2 {
    color: var(--cream);
    font-size: 2.4rem;
    margin-bottom: 12px;
}

.confirmado-msg p {
    color: var(--gold-soft);
    margin: 0;
}

.confirmado-msg .copa {
    font-size: 2.4rem;
    margin-top: 20px;
    font-family: var(--font-script);
    color: var(--gold);
}

.copa {
    font-size: 2.4rem;
    margin-top: 20px;
    font-family: var(--font-script);
    color: var(--gold);
}

/* ================================================================
   Logo Section
   ================================================================ */
.logo {
    background: var(--olive);
    color: var(--cream);
    /* Flexbox es la forma más segura de centrar contenido */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Ajusté un poco tu padding usando clamp para que respire bien en móviles y escritorio */
    padding: 24px;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    /* Centra horizontalmente */
    align-items: center;
    /* Centra verticalmente */
}

.logo .elementor-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.logo img {
    width: 150px;
    max-width: 100%;
    /* Esto evita que el logo se desborde si abren la web en un celular muy pequeño */
    height: auto;
    /* Mantiene la proporción correcta del logo */
    object-fit: contain;
}


/* ================================================================
   3. COUNTDOWN
   ================================================================ */
.countdown-section {
    background: var(--olive);
    color: var(--cream);
    text-align: center;
}

.countdown-section h2 {
    color: var(--cream);
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: 8px;
}

.countdown-section .eyebrow {
    color: var(--gold-soft);
}

.countdown-section .eyebrow::before,
.countdown-section .eyebrow::after {
    background: var(--gold-soft);
}

.countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 640px;
    margin: 30px auto 30px;
}

.countdown-cell {
    padding: 24px 8px;
    border: 1px solid rgba(212, 197, 152, 0.3);
    border-radius: 2px;
}

.countdown-num {
    font-family: var(--font-jaguar);
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: var(--cream);
    display: block;
    line-height: 1;
}

.countdown-lbl {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin-top: 8px;
    display: block;
}

@media (max-width: 600px) {
    .countdown {
        grid-template-columns: repeat(2, 1fr);
    }

    .invitado-bg-parallax {
        background-size: auto 100%;
        height: 120%;
    }
}



/* ================================================================
   Confirmar
   ================================================================ */
/* Contenedor principal de la alerta */
.swal-elegante-popup {
    border-radius: 4px !important;
    padding: 2em 1.5em !important;
}

/* Título */
.swal-elegante-title {
    font-family: var(--font-display, serif) !important;
    color: var(--olive-dark, #333) !important;
    font-size: 1.8rem !important;
    margin-bottom: 10px !important;
}

/* Texto descriptivo */
.swal-elegante-text {
    font-family: var(--font-serif, serif) !important;
    font-style: italic !important;
    color: var(--muted, #666) !important;
    font-size: 1.2rem !important;
    margin-bottom: 30px !important;
}

/* Botón de cancelar (el de confirmar ya usa tu clase .btn-galeria) */
.swal-elegante-cancel {
    display: inline-block;
    margin: 10px;
    padding: 14px 24px;
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--muted);
    font-family: var(--font-body, sans-serif);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all .4s ease;
    border-radius: 2px;
    cursor: pointer;
}

.swal-elegante-cancel:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}


/* ---------- RSVP Pickers ---------- */
.rsvp-pickers {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 25px;
}

.picker-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.picker-group label {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--gold);
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.select-wrapper {
    position: relative;
    width: 80px;
}

.select-wrapper select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: #ffffff;
    border: 1px solid #ffffff;
    color: #000000;
    font-family: var(--font-jaguar);
    font-size: 1.4rem;
    padding: 8px 24px 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    text-align: center;
    text-align-last: center;
    /* Centra el texto del select */
}

/* Flecha personalizada */
.select-wrapper::after {
    content: '▼';
    font-size: 0.6rem;
    color: var(--olive);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* ================================================================
   4. GALERÍA PRINCIPAL (Swiper)
   ================================================================ */

/* Contenedor de los botones */
.calendar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    /* Espacio entre los botones */
    margin-top: 30px;
    padding: 0 20px;
}

/* Estilo de los botones */
.btn-calendar {
    display: inline-block;
    margin-top: 30px;
    padding: 14px 36px;
    background: var(--muted);
    color: var(--cream);
    border: 1px solid var(--olive);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    transition: all .4s var(--ease);
    border-radius: 2px;
}

/* Efecto al pasar el mouse por encima (Hover) */
.btn-calendar:hover {
    background-color: var(--olive-dark);
    color: var(--cream, #fffcf6);
    /* Usa tu color claro aquí */
}


/* ================================================================
    X. GALERÍA (Efecto Arco con Marco Olivo)
    ================================================================ */
.galeria-section {
    background: var(--cream);
    text-align: center;
}

.galeria-section h2 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 40px;
}

.gallery-swiper {
    max-width: 420px;
    /* Cambiamos de 680px a 420px (o ajusta entre 350px y 450px a tu gusto) */

    margin: 40px auto 0;
    /*  aspect-ratio: 3 / 4; */

    /* 1. EL MARCO ARCO */
    border-radius: 600px 600px 4px 4px;

    /* 2. EL BORDE VERDE OLIVO */
    border: 3px solid var(--olive);

    /* 3. MARÍA LUISA */
    padding: 6px;
    background-color: var(--cream);

    /* 4. GUILLOTINA */
    overflow: hidden;

    box-shadow: 0px 6px 16px rgba(44, 47, 28, 0.18);
}

/* Estilos limpios para las imágenes que se deslizan por dentro */
.gallery-swiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Heredamos el radio del arco en las imágenes para que en las esquinas superiores 
        el corte sea perfecto y milimétrico al deslizarse */
    border-radius: 594px 594px 2px 2px;
    /* Unos píxeles menos para encajar perfecto por el padding */
}

/* Contenedor principal */
.destacadas-swiper {
    max-width: 1000px;
    margin: 0 auto;
    /* IMPORTANTE: Padding superior y lateral para darle espacio a la estrella y la sombra 3D */
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

/* Contenedor del slide (Debe permitir que la estrella sobresalga) */
.destacadas-swiper .swiper-slide {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: 20px;
    overflow: visible;
    /* <-- IMPORTANTE: Cambiado a visible para que no corte la estrella */
    width: 75%;
    max-width: 340px;
}

/* El enlace será el marco dorado */
.destacada-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    /* Corta la imagen y gradientes a la forma redondeada */
    border: 2px solid var(--gold);
    box-shadow: 0 0 15px rgba(184, 165, 116, 0.35);
    /* Resplandor dorado elegante */
    transition: box-shadow 0.4s var(--ease);
}

.destacada-link:hover {
    box-shadow: 0 0 25px rgba(184, 165, 116, 0.6);
}

/* Rellenar espacio sin deformar */
.destacadas-swiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 100%;
}

/* La Estrella ⭐ */
.destacada-star {
    position: absolute;
    top: -12px;
    right: -12px;
    font-size: 26px;
    z-index: 20;
    filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.6));
    /* Sombra profunda */
    animation: star-pulse 2.5s infinite ease-in-out;
    /* Latido sutil */
}

/* Animación sutil para que la estrella se vea viva y premium */
@keyframes star-pulse {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.15) rotate(5deg);
    }
}

/* El enlace para las fotos que NO son Top 3 (del 4to lugar en adelante) */
.normal-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    /* Corta la imagen a la forma redondeada */
    border: 2px solid transparent;
    /* Ocupa el mismo espacio que el borde dorado para no desalinearse */
}

.destacada-autor {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: linear-gradient(transparent, rgb(0 0 0 / 50%));
    color: var(--ivory);
    font-size: 13px;
    font-family: var(--font-jaguar);
    font-style: italic;
    z-index: 10;
    /* IMPORTANTE: Para que la sombra 3D no tape el texto */
}

.destacada-like {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(125, 125, 125, 0.5);
    color: var(--ivory);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    z-index: 10;
    /* IMPORTANTE: Para que la sombra 3D no tape el like */
}

/* Forzar paginación (las bolitas) debajo de las fotos */
.destacadas-swiper .swiper-pagination {
    position: relative;
    bottom: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

.swiper-pagination-bullet-active {
    background: var(--gold) !important;
}

/* Botón */
.btn-galeria {
    display: inline-block;
    padding: 14px 36px;
    background: var(--muted);
    color: var(--cream);
    border: 1px solid var(--olive);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    transition: all .4s var(--ease);
    border-radius: 2px;
}

.btn-galeria:hover {
    background: var(--olive-dark);
    color: var(--cream);
    opacity: 1;
}

/* ================================================================
   5. PADRES / PADRINOS
   ================================================================ */
.familia-section {
    position: relative;
    /* Obligatorio para anclar el fondo absoluto */
    background-color: var(--cream);
    /* El color de fondo se queda aquí */
    z-index: 10;
    /* Le damos una capa superior para que esté por encima de la siguiente sección */
    overflow: visible !important;
    /* CRUCIAL: Esto evita que la hoja se corte al llegar al borde */
    /* Agrega aquí tus paddings o márgenes normales de la sección */
    padding: 65px 0px 0px;
}

/* El pseudo-elemento que cargará exclusivamente la textura */
.familia-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Cargamos la imagen aquí */
    background-image: url('../images/papelizado.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    /* CONTROL DE OPACIDAD */
    opacity: 0.25;

    /* Lo mandamos al fondo del contenedor para que no tape los textos */
    z-index: -1;
    pointer-events: none;

    /* MAGIA AQUÍ: Máscara que hace la parte superior transparente (0%) 
       y revela la textura suavemente a partir de los 120px hacia abajo */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 120px);
    mask-image: linear-gradient(to bottom, transparent 0%, black 120px);
}

.familia-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to bottom, rgba(255, 252, 246, 0) 0%, var(--cream) 100%);
    z-index: -1;
    pointer-events: none;
}

.familia-section h2 {
    text-align: center;
    font-size: clamp(2rem, 4.5vw, 3rem);
    margin-bottom: 60px;
}

.familia-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 40px;
    max-width: 720px;
    margin: 0 auto;
}

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

.familia-card .label {
    font-size: 17px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 12px;
}

.familia-card .nombre {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--olive-dark);
    line-height: 1.4;
    letter-spacing: 1px;
}

.familia-card .ornament {
    width: 30px;
    height: 1px;
    background: var(--gold);
    margin: 16px auto;
}

@media (max-width: 600px) {
    .familia-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    body {
        background: rgb(255, 255, 255);
    }

    .confirmado-msg {
        padding: 10px 9px;
    }

    .calendar-actions {
        gap: 0px;
        margin-top: -14px;
        padding: 0 32px;
    }

}

/* ================================================================
   6. ITINERARIO / EVENTOS
   ================================================================ */
.eventos-section {
    background: var(--cream);
}

.eventos-section h2 {
    text-align: center;
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    margin-bottom: 60px;
}

.eventos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 32px;
    max-width: 980px;
    margin: 0 auto;
}

.evento-card {
    background: var(--ivory);
    padding: 40px 28px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 2px;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.evento-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -20px rgba(44, 47, 28, 0.25);
}

.evento-icon {
    width: 56px;
    height: 56px;
    border: 1px solid var(--olive);
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 24px;
    color: var(--cream);
    background: var(--olive);
}

.evento-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.evento-card h3 {
    font-size: 1.6rem;
    margin-bottom: 6px;
}

.evento-time {
    font-family: var(--font-jaguar);
    font-style: italic;
    color: var(--gold);
    font-size: 1.4rem;
    margin-bottom: 16px;
}

.evento-location {
    font-size: 15px;
    color: var(--olive-dark);
    line-height: 1.6;
    margin-bottom: 20px;
}

.evento-card .btn-map {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--olive);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--olive);
}

/* ================================================================
   7. DRESS CODE
   ================================================================ */


.dresscode-section {
    background: var(--olive);
    color: var(--cream);
    text-align: center;
}

.dresscode-section h2 {
    color: var(--cream);
    font-size: clamp(2rem, 5vw, 3rem);
}

.dresscode-section .eyebrow {
    color: var(--gold-soft);
}

.dresscode-section .eyebrow::before,
.dresscode-section .eyebrow::after {
    background: var(--gold-soft);
}

.dresscode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 720px;
    margin: 30px auto 0;
}

.dresscode-card {
    padding: 0px 20px;
}

.dresscode-card svg {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    stroke: var(--gold-soft);
    fill: none;
    stroke-width: 1.2;
}


.dresscode-card h3 {
    color: var(--gold-soft);
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.dresscode-card p {
    color: var(--cream);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.dresscode-note {
    margin-top: 50px;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--gold-soft);
    font-size: 1.18rem;
}

@media (max-width: 600px) {
    .dresscode-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.forbidden-colors {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    color: var(--gold-soft);
    font-style: italic;
    font-weight: bold;
}

.btn-sugerencias {
    background: var(--cream);
    border: 1px solid var(--ink);
    color: var(--olive-dark);
    padding: 8px 20px;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 2px;
    margin-top: 20px;
    cursor: pointer;
    transition: all .3s var(--ease);
}

.btn-sugerencias:hover {
    background: var(--gold);
    color: var(--cream);
}

/* --- Estilos del Modal (Ventana Emergente) --- */
.modal-oculto {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 47, 28, 0.95);
    /* Color olive oscuro con transparencia */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    /* Para que no interfiera cuando está oculto */
    transition: opacity 0.3s var(--ease);
}

.modal-oculto.activo {
    opacity: 1;
    pointer-events: auto;
}

.modal-contenido {
    background: var(--cream);
    padding: 30px 20px;
    width: 90%;
    max-width: 400px;
    /* Tamaño ideal para celular */
    border-radius: 4px;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.3s var(--ease);
}

.modal-oculto.activo .modal-contenido {
    transform: translateY(0);
}

.cerrar-modal {
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 28px;
    color: var(--olive);
    cursor: pointer;
    line-height: 1;
}

.modal-contenido h3 {
    color: var(--olive-dark);
    margin-bottom: 20px;
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-style: italic;
}

/* --- Carrusel Deslizable Horizontal --- */
.carrusel-fotos {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;


    /* 1. SUAVIZA EL DESPLAZAMIENTO (Funciona excelente en móviles) */
    scroll-behavior: smooth;

    gap: 15px;
    padding-bottom: 10px;
    scrollbar-width: none;
}

.carrusel-fotos::-webkit-scrollbar {
    display: none;
}

.carrusel-fotos img {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    /* 3. TRUCO DE DISEÑO (UX): Bajamos el ancho del 100% al 85%. 
       Esto hace que se alcance a ver un "pedacito" de la foto anterior 
       y la siguiente a los lados. Visualmente hace que el cambio se sienta 
       mucho menos brusco porque el usuario ya sabe qué sigue. */
    width: 90%;

    flex-shrink: 0;
    border-radius: 4px;
    /* Un poco más redondo para que parezcan tarjetas */
    object-fit: cover;
    max-height: 450px;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.carrusel-fotos {
    cursor: grab;
}

.carrusel-fotos.activo-arrastre {
    cursor: grabbing;
}

.swipe-hint {
    font-size: 10px;
    color: var(--ink);
    margin-top: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;

}



/* ================================================================
   8. REGALOS
   ================================================================ */
/* Botón principal de Ver Detalles */
.mensaje-regalos {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--olive-dark);
    font-size: 1.3rem;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: center;
}

.main-text {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    /* Una línea sutil para separar el botón */
    text-align: center;
}

.btn-detalles {
    background: var(--olive);
    color: var(--cream);
    border: 1px solid var(--olive);
    padding: 12px 24px;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 2px;
    cursor: pointer;
    width: 100%;
    transition: all .3s var(--ease);
}

.btn-detalles:hover {
    background: var(--olive-dark);
    border-color: var(--olive-dark);
}

/* Estado inicial del contenedor de detalles (oculto) */
.bank-details-hidden {
    display: none;
}

/* Estado visible con una pequeña animación */
.bank-details-visible {
    display: block;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
    animation: fadeIn .4s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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

/* Organización de las filas de datos */
.detail-row {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Texto a la izq, botón a la der */
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 14px;
    font-size: 15px;
}

.detail-row span {
    line-height: 1.4;
}

.mono {
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}

/* Botones de copiar individuales (más pequeños) */
.btn-copy-small {
    background: transparent;
    border: 1px solid var(--olive);
    color: var(--olive);
    padding: 5px 12px;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all .3s var(--ease);
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
    /* Evita que el texto del botón se rompa en dos líneas */
}

.btn-copy-small:hover {
    background: var(--olive);
    color: var(--cream);
}

/* Hereda el color dorado de tu JS cuando se copia exitosamente */
.btn-copy-small.copied {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ivory);
}

.regalos-section {
    background: var(--ivory);
    text-align: center;
}

.regalos-section h2 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 12px;
}

.regalos-section .narrow p {
    color: var(--olive-dark);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.05rem;
}

.regalos-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    max-width: 780px;
    margin: 50px auto 0;
}

.regalo-card {
    background: color-mix(in srgb, var(--cream) 65%, transparent);
    padding: 30px 24px;
    border-radius: 2px;
    text-align: left;
    max-width: 50%;
    margin: 0 auto;
}

.rsvp {
    max-width: 50%;
    margin: 0 auto;
}

.regalo-card .tag {
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 12px;
}

.regalo-card h3 {
    font-size: 1.3rem;
    margin-bottom: 16px;
    color: var(--olive-dark);
}

.regalo-card .info {
    font-family: 'Courier New', monospace;
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 16px;
    word-break: break-all;
    line-height: 1.6;
}

.btn-copy {
    background: var(--gold);
    border: 1px solid var(--olive);
    color: var(--ivory);
    padding: 8px 20px;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all .3s var(--ease);
    border-radius: 2px;
}

.btn-copy:hover {
    background: var(--olive);
    color: var(--cream);
}

.btn-copy.copied {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ivory);
}

/* ================================================================
   9. RSVP
   ================================================================ */
.rsvp-section {
    background-color: var(--olive);
    text-align: center;
}

.rsvp-section h2 {
    color: var(--cream);
    font-size: clamp(2.4rem, 6vw, 3.6rem);
}

.rsvp-section .eyebrow {
    color: var(--gold-soft);
}

.rsvp-section .eyebrow::before,
.rsvp-section .eyebrow::after {
    background: var(--gold-soft);
}

.rsvp-contacto {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    stroke: var(--olive);
    fill: none;
    stroke-width: 1.2;
}

.rsvp-section p {
    color: var(--gold-soft);
    font-family: var(--font-jaguar);
    font-style: italic;
    font-size: 1.1rem;
    max-width: 460px;
    margin: 16px auto 4px;
}

.btn-confirmar {
    display: inline-block;
    padding: 18px 52px;
    background: var(--muted);
    color: var(--cream);
    border: none;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 2px;
    transition: all .4s var(--ease);
    box-shadow: 0 6px 20px rgba(184, 165, 116, 0.3);
}

.btn-confirmar:hover {
    background: var(--olive-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(184, 165, 116, 0.5);
}

.btn-confirmar:disabled {
    opacity: .6;
    cursor: wait;
}

/* ================================================================
   10. FIRMA / FOOTER
   ================================================================ */
.firma-section {
    background: var(--cream);
    text-align: center;
    padding: 50px 24px;
}

.firma-section .mensaje {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.3rem, 2.2vw, 1.4rem);
    color: var(--olive-dark);
    max-width: 560px;
    margin: 0 auto 40px;
    line-height: 1.8;
}

.firma-section .firma {
    font-family: var(--font-script);
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: var(--olive);
}

.firma-section .ornamento {
    margin: 30px auto;
    width: 60px;
    height: 1px;
    background: var(--gold);
}

footer {
    background: var(--olive-dark);
    color: var(--gold-soft);
    text-align: center;
    padding: 40px 24px;
    font-size: 12px;
    letter-spacing: 2px;
}

footer .social {
    margin-bottom: 20px;
}

footer .social a {
    display: inline-block;
    margin: 0 10px;
    width: 45px;
    height: 45px;
    /*border: 1px solid var(--gold-soft);*/
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: var(--gold-soft);
}

footer .social svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ---------- Botón Subir Centrado y Ovalado ---------- */
.btn-subir {
    position: fixed;
    /* 1. Posición: Pegado al borde inferior y centrado */
    bottom: 0;
    /* Totalmente pegado abajo */
    left: 50%;

    /* 2. Forma Ovalada y Tamaño */
    width: 80px;
    /* Más ancho que alto para que sea ovalado */
    height: 40px;
    /* Altura cómoda para el toque */
    border-radius: 20px;
    /* Al menos la mitad del height para forma de píldora */

    /* Estilos estéticos (reutilizando tus colores) */
    background: var(--olive);
    border: 1px solid var(--olive-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 99;

    /* 3. Animación de Visibilidad */
    opacity: 0;
    visibility: hidden;
    /* IMPORTANTE: Mantener translateX(-50%) para que no se descentre al animar */
    transform: translate(-50%, 20px);
    transition: all 0.4s var(--ease, ease);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
    /* Sombra hacia arriba */
}

.btn-subir svg {
    width: 18px;
    /* Icono ligeramente más pequeño para encajar mejor */
    height: 18px;
    fill: var(--cream);
}

/* Estado visible (manejado por JS) */
.btn-subir.mostrar {
    opacity: 1;
    visibility: visible;
    /* Regresa a su posición original abajo-centro */
    transform: translate(-50%, 0);
}

.btn-subir:hover {
    background: var(--olive-dark);
}

.timeline-content {
    font-size: 19px;
}

/* ================================================================
   AOS-like reveal animations y Diseño Cinematográfico Hero
   ================================================================ */

/* ---------- 1. Entry Directions (Puro CSS) ---------- */
/* General transition rule para suavidad */
.reveal,
.reveal-left,
.reveal-right,
.reveal-top,
.reveal-fade {
    transition: opacity 1.5s var(--ease, ease), transform 1.5s var(--ease, ease);
    will-change: transform, opacity;
}

/* De abajo hacia arriba */
.reveal {
    opacity: 0;
    transform: translateY(40px);
}

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

/* Desde la izquierda */
.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
}

.reveal-left.in {
    opacity: 1;
    transform: translateX(0);
}

/* Desde la derecha */
.reveal-right {
    opacity: 0;
    transform: translateX(60px);
}

.reveal-right.in {
    opacity: 1;
    transform: translateX(0);
}

/* Desde arriba */
.reveal-top {
    opacity: 0;
    transform: translateY(-40px);
}

.reveal-top.in {
    opacity: 1;
    transform: translateY(0);
}

/* Solo desvanecimiento suave (fade) para el & */
.reveal-fade {
    opacity: 0;
    transition-property: opacity;
    /* Solo animar opacidad para suavidad */
}

.reveal-fade.in {
    opacity: 1;
}

/* Soporte delays universales (si no usas inline) */
.delay-1 {
    transition-delay: .2s;
}

.delay-2 {
    transition-delay: .6s;
}

.delay-3 {
    transition-delay: 1.2s;
}

/* Accesibilidad: Desactivar animaciones para usuarios sensibles */
@media (prefers-reduced-motion: reduce) {

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-top,
    .reveal-fade {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}



/* ================================================================
   X. RECUADRO DE MENSAJE (Formulario)
   ================================================================ */
.rsvp-mensaje-container {
    margin: 24px 0;
    text-align: left;
}

.rsvp-mensaje-container label {
    display: block;
    margin-bottom: 8px;
    color: var(--gold);
    font-size: 0.95rem;
    font-weight: 600;
}

.rsvp-mensaje-container textarea {
    width: 100%;
    background: var(--ivory);
    border: 1px solid var(--line);
    padding: 16px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    border-radius: 2px;
    resize: none;
    outline: none;
    transition: border-color 0.3s var(--ease);
}

.rsvp-mensaje-container textarea:focus {
    border-color: var(--olive);
}

.contador-caracteres {
    text-align: right;
    font-size: 0.8rem;
    color: var(--gold);
    margin-top: 6px;
}

/* ================================================================
   X. CARRUSEL DE MENSAJES (Debajo de Galería)
   ================================================================ */
.mensajes-section {
    background: var(--olive);
    color: var(--cream);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: 10px;
    height: 70vh;
}

.mensajes-swiper {
    width: 100%;
    max-width: 800px;
    margin: 20px auto 0;
    padding: 0 20px 50px;
}

.mensajes-section h2 {
    color: var(--cream);
    font-size: clamp(2rem, 5vw, 3rem);
}

.mensajes-section .eyebrow {
    color: var(--gold-soft);
}

.mensajes-section .eyebrow::before,
.mensajes-section .eyebrow::after {
    background: var(--gold-soft);
}



.mensaje-card {
    padding: 20px 40px;
}

.quote-icon {
    width: 32px;
    height: 32px;
    fill: var(--gold-soft);
    margin-bottom: 20px;
    opacity: 0.5;
}

/* 1. Aseguramos que el texto no rompa el diseño con palabras largas y ajustamos la fuente */
.texto-mensaje {
    font-family: var(--font-serif);
    font-size: clamp(1.05rem, 2.5vw, 1.45rem);
    /* Un tamaño un poco más estilizado para textos largos */
    font-style: italic;
    line-height: 1.5;
    color: var(--cream);
    margin-bottom: 24px;
    overflow-wrap: break-word;
    /* Evita que enlaces o palabras largas rompan el contenedor */
}

/* 2. Media Query para pantallas pequeñas (Celulares) */
@media (max-width: 576px) {
    .mensajes-swiper {
        margin: 5px auto 0;
        padding: 0 10px 40px;
        /* Reducimos el padding lateral del swiper */
    }

    .mensaje-card {
        padding: 10px 15px;
        /* Reducimos drásticamente el padding lateral del card en móvil */
    }

    .quote-icon {
        margin-bottom: 2px;
        /* Reducimos espacio del icono en móvil */
    }

    .mensajes-section {
        height: 50vh;
    }

    .hoja-parallax {
        width: 200px;
    }

    .rsvp {
        max-width: 100%;
    }

    .regalo-card {
        max-width: 100%;
    }

    .hoja-frente {
        width: 6vh;
    }

}

.autor-mensaje {
    font-size: 0.85rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold-soft);
    font-weight: 600;
}

/* Puntitos de paginación de Swiper */
.swiper-pagination-mensajes {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
}

.swiper-pagination-mensajes .swiper-pagination-bullet {
    background: var(--gold-soft);
    opacity: 0.3;
    width: 8px;
    height: 8px;
    margin: 0 6px !important;
    color: #f8f5ee;
}

.swiper-pagination-mensajes .swiper-pagination-bullet-active {
    opacity: 1;
}

/* ================================================================
   X. ITINERARIO ALTERNADO (Timeline en Zig-Zag)
   ================================================================ */
.eventos-section {
    background: var(--cream);
    text-align: center;
    overflow: hidden;
}

.timeline-container {
    position: relative;
    max-width: 900px;
    /* Más ancho para que quepan ambos lados */
    margin: 50px auto 0;
    padding: 40px 0;
}

/* Línea base estática (CENTRADA) */
.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    /* La línea va al centro */
    width: 2px;
    background: color-mix(in srgb, var(--line) 45%, transparent);
    transform: translateX(-50%);
    z-index: 1;
}

/* Línea animada GSAP (CENTRADA) */
.timeline-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    /* La línea va al centro */
    width: 2px;
    background: var(--gold);
    box-shadow: 0 0 5px var(--gold-soft);
    transform-origin: top;
    transform: translateX(-50%) scaleY(var(--line-progress, 0));
    will-change: transform;
    z-index: 2;
}

/* Cada fila */
.timeline-item {
    position: relative;
    margin-bottom: 60px;
    display: flex;
    flex-direction: row;
    /* Impares: Hora a la izq, Contenido a la der */
    align-items: center;
    /* Alinea los textos perfectamente con el ícono */
    width: 100%;
    z-index: 3;
}

/* Invierte el orden físico de las cajas para elementos pares */
.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

/* Círculo central */
.timeline-icon {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    /* Siempre clavado en el centro */
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--olive-light) 0%, var(--olive) 50%, var(--olive-dark) 100%);
    border: 0px solid var(--cream);
    /* Borde claro para separar de la línea */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    box-shadow: 0 4px 12px rgba(68, 73, 46, 0.08);
    transition: all 0.4s var(--ease);
}


.timeline-icon svg {
    width: 26px;
    height: 26px;
    stroke: var(--ivory);
    stroke-width: 5;
    fill: none;
    transition: stroke 0.4s var(--ease);
}

/* Estado Activo */
.timeline-item.active .timeline-icon {
    background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 50%, var(--gold-dark) 100%);
    border: 0px solid var(--cream);
    /* Borde claro para separar de la línea */
    transform: translateX(-50%) scale(1.15);
    box-shadow: 0 0 18px rgba(184, 165, 116, 0.6);
}

.timeline-item.active .timeline-icon svg {
    stroke: var(--olive);
}

/* Contenedores de Texto */
.timeline-time {
    width: 50%;
    padding-right: 50px;
    text-align: right;
    font-family: var(--font-body);
    font-size: 21px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-dark);
    font-weight: 600;
}

.timeline-content {
    width: 50%;
    padding-left: 50px;
    text-align: left;
}

/* Textos invertidos para elementos pares */
.timeline-item:nth-child(even) .timeline-time {
    padding-right: 0;
    padding-left: 50px;
    text-align: left;
}

.timeline-item:nth-child(even) .timeline-content {
    padding-left: 0;
    padding-right: 50px;
    text-align: right;
}

/* Tipografías dentro del contenido */
.timeline-content h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--olive-dark);
    margin: 0 0 4px 0;
}

/* Descripción con mayor contraste global */
.timeline-desc {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 28px;
    color: var(--olive);
    opacity: 0.85;
    margin: 0 0 12px 0;
    font-weight: 500;
}

/* Estilo base para el botón de mapas (Escritorio y Móvil) */
.timeline-content .btn-maps {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--olive-dark);
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Efecto hover interactivo en PC */
.timeline-content .btn-maps:hover {
    /*background-color: rgba(184, 165, 116, 0.15);*/
    color: var(--olive-dark);
    transform: translateY(-2px);
}

.timeline-item:nth-child(even) .timeline-content .btn-maps {
    /* Alinea el contenido del botón a la derecha en los elementos pares */
    flex-direction: row-reverse;
}

/* ================================================================
   MÓVILES (Zig-Zag conservado, pero ligeramente más grande)
   ================================================================ */
@media (max-width: 768px) {
    .timeline-container {
        padding: 30px 5px;
    }

    .timeline-item {
        margin-bottom: 55px;
    }

    .timeline-icon {
        width: 40px;
        height: 40px;
    }

    .timeline-icon svg {
        width: 20px;
        height: 20px;
    }

    .timeline-time {
        padding-right: 40px;
        font-size: 16px;
    }

    .timeline-content {
        padding-left: 40px;
    }

    .timeline-item:nth-child(even) .timeline-time {
        padding-left: 40px;
        padding-right: 0;
    }

    .timeline-item:nth-child(even) .timeline-content {
        padding-right: 40px;
        padding-left: 0;
    }

    .timeline-content h3 {
        font-size: 1.25rem;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    .timeline-desc {
        font-size: 20px;
        line-height: 1.3;
        margin-bottom: 0px;
        font-weight: 500;
    }

    /* Ajuste de tamaño específico para móviles en el botón */
    .timeline-content .btn-maps {
        font-size: 14px;
        padding: 6px 0px;
        max-width: 100%;
        white-space: normal;
        word-wrap: break-word;
        box-sizing: border-box;
    }

    /* Previene el salto en hover en pantallas táctiles */
    .timeline-content .btn-maps:hover {
        transform: none;
    }


}

/* Asegura que los delays estén definidos en tu wedding.css */
.delay-12 {
    transition-delay: 0.1s;
}

.delay-22 {
    transition-delay: 0.2s;
}

.delay-32 {
    transition-delay: 0.3s;
}

.delay-42 {
    transition-delay: 0.4s;
}

.delay-52 {
    transition-delay: 0.5s;
}

.delay-62 {
    transition-delay: 0.6s;
}

/* El efecto base que ya tienes */
.reveal2 {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

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


/* ================================================================
   X. DECORACIÓN ARCO GALERÍA
   ================================================================ */
/* Contenedor relativo para poder posicionar las hojas por fuera del slider */
.gallery-wrapper {
    position: relative;
    max-width: 420px;
    margin: 40px auto 0;
    z-index: 1;
}

/* Quitamos el margen superior del swiper porque ya lo tiene el wrapper */
.gallery-wrapper .gallery-swiper {
    margin-top: 0;
}

/* Estilos base de las hojas */
.hoja-galeria {
    position: absolute;
    width: clamp(100px, 28vw, 160px);
    /* Responsivo: se achica en celulares */
    z-index: 10;
    pointer-events: none;
    /* Evita que bloqueen clics en las fotos */
    top: -40px;
    /* Sube la hoja por encima del marco */
    opacity: 0.9;
}

/* Hoja superior izquierda */
.hoja-galeria-izq {
    left: -48.75%;
    width: 50%;
    transform: rotate(75deg);
    transform-origin: bottom right;
    /* <-- Punto de pivote en la base */
    top: 2px;
}

.hoja-galeria-der {
    right: 1.2%;
    width: 50%;
    transform: scaleX(-1) rotate(75deg);
    transform-origin: bottom right;
    /* <-- Se mantiene igual porque la imagen está en espejo */
    top: 2px;
}

@media (max-width: 576px) {
    .hoja-galeria-izq {
        left: -48.75%;
    }

    .hoja-galeria-der {
        right: 1.2%;
    }

    .regalo-card {
        max-width: 100%;
    }
}

/* ================================================================
   X. EFECTO PULSE (Latido en Botones)
   ================================================================ */

.btn-pulse {
    /* Mantiene las animaciones existentes del botón (como hover) 
       y añade la pulsación infinita de forma suave */
    animation: btn-pulse-anim 2.5s infinite var(--ease);
    will-change: transform, box-shadow;
    /* Optimiza el rendimiento */
}

/* Pausa la pulsación cuando el usuario pasa el mouse para que no sea molesto */
.btn-pulse:hover {
    animation-play-state: paused;
}

@keyframes btn-pulse-anim {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(184, 165, 116, 0.4);
        /* Usa tu variable --gold */
    }

    50% {
        transform: scale(1.01);
        /* Se hace un 3% más grande */
        box-shadow: 0 0 0 10px rgba(184, 165, 116, 0);
        /* El resplandor se difumina */
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(184, 165, 116, 0);
    }
}