/* Adaptaciones para celular y accesibilidad */
@media (max-width: 620px) {
            .portada {
                align-items: flex-start;
                padding-top: 34px;
            }

            .corona {
                font-size: 36px;
            }

            .mis-xv {
                font-size: 15px;
            }

            .nombre {
                font-size: 82px;
            }

            .mensaje-superior {
                margin-top: 8px;
                margin-bottom: 12px;
                font-size: 19px;
            }

            .escena {
                width: min(94vw, 440px);
                height: 555px;
            }

            .sobre {
                bottom: 48px;
                height: 220px;
            }

            .tarjeta {
                width: 90%;
                height: 350px;
                padding: 20px 17px 18px;
            }

            .escena.tarjeta-visible .tarjeta {
                transform:
                    translateX(-50%)
                    translateY(-79%);
            }

            .tarjeta-corona {
                font-size: 26px;
            }

            .tarjeta-titulo {
                margin-top: 7px;
                font-size: 14px;
                letter-spacing: 0.14em;
            }

            .numero {
                margin-top: 12px;
                font-size: 70px;
            }

            .anios {
                margin-top: 12px;
                font-size: 14px;
            }

            .texto-tarjeta {
                margin-top: 15px;
                font-size: 14px;
                line-height: 1.2;
            }

            .firma {
                margin-top: 12px;
                font-size: 39px;
            }

            .instruccion {
                bottom: 24px;
                font-size: 17px;
            }

            .escena::after {
                bottom: 2px;
                font-size: 16px;
            }
        }

@media (max-width: 390px) {
            .nombre {
                font-size: 72px;
            }

            .escena {
                height: 535px;
            }

            .sobre {
                height: 205px;
            }

            .tarjeta {
                height: 335px;
                padding: 18px 15px 16px;
            }

            .escena.tarjeta-visible .tarjeta {
                transform:
                    translateX(-50%)
                    translateY(-78%);
            }

            .numero {
                font-size: 64px;
            }

            .texto-tarjeta {
                font-size: 13px;
            }

            .firma {
                font-size: 36px;
            }
        }

@media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

@media (max-width: 620px) {
            .floral { width: 235px; opacity: .78; }
            .floral-superior { top: -35px; left: -92px; }
            .floral-inferior { right: -98px; bottom: -55px; }
            .mariposa-1 { top: 16%; right: 7%; }
            .mariposa-2 { top: 39%; left: 3%; }
            .mariposa-3 { bottom: 16%; right: 9%; }
            .destello-1 { left: 15%; }
            .destello-2 { right: 16%; }
            .halo-sobre { bottom: 74px; height: 280px; }
        }

@media (max-width: 620px) {
            .preloader-inner { width: 155px; height: 155px; }
            .preloader-monograma { font-size: 70px; }
            .preloader-subtitulo { top: calc(50% + 49px); font-size: 11px; }
            .portada-luz-central { top: 37%; height: 58vh; }
            .cinta-dorada { width: 125vw; top: 46%; }
        }

@media (max-width: 620px) {
    .floral-asset { width: 300px; opacity: .76; }
    .floral-asset-superior { top: -75px; left: -115px; }
    .floral-asset-inferior { right: -125px; bottom: -70px; }
    .mariposa-asset-1 { top: 20%; right: 5%; }
    .mariposa-asset-2 { left: 3%; top: 42%; }
    .mariposa-asset-3 { right: 4%; bottom: 14%; }
    .corona-svg { width: 76px; }
    .tarjeta-corona-svg { width: 47px; }
}

/* Portada premium: composicion vertical para WhatsApp y pantallas pequenas */
@media (max-width: 620px) {
    .portada {
        min-height: 100svh;
        align-items: flex-start;
        padding: 28px 18px 16px;
    }

    .marco { inset: 10px; }
    .corona-svg { width: 62px; }
    .mis-xv { font-size: 13px; letter-spacing: .34em; }
    .nombre { margin-top: -5px; font-size: clamp(68px, 21vw, 84px); }
    .mensaje-superior { margin: 2px 0 2px; font-size: 18px; }

    .escena {
        width: min(92vw, 410px);
        height: clamp(360px, 48svh, 405px);
        margin-top: -28px;
    }

    .sobre {
        bottom: 22px;
        width: 100%;
        height: clamp(205px, 27svh, 225px);
    }

    .tarjeta {
        width: 88%;
        height: 340px;
        padding: 18px 16px 16px;
    }

    .escena.tarjeta-visible .tarjeta {
        transform: translateX(-50%) translateY(-39%);
    }

    .escena.tarjeta-visible .sobre {
        translate: 0 30px;
        filter:
            drop-shadow(0 17px 20px rgba(99,59,62,.14))
            drop-shadow(0 0 18px rgba(255,255,255,.38));
        transition: translate .8s cubic-bezier(.22,.75,.25,1), filter .8s ease;
    }

    .escena.tarjeta-visible::after {
        bottom: -2px;
    }

    .floral-asset { width: 235px; opacity: .67; }
    .floral-asset-superior { top: -58px; left: -96px; }
    .floral-asset-inferior { right: -105px; bottom: -58px; }
    .mariposa-asset-1 { top: 19%; right: 4%; }
    .mariposa-asset-2 { top: 45%; left: 2%; }
    .mariposa-asset-3 { right: 4%; bottom: 12%; }
    .halo-sobre { bottom: 42px; height: 225px; }
}

@media (max-width: 390px) {
    .portada { padding-top: 25px; }
    .corona-svg { width: 56px; }
    .nombre { font-size: 68px; }
    .mensaje-superior { font-size: 17px; }
    .escena { height: 382px; }
    .sobre { bottom: 20px; height: 205px; }
    .tarjeta { height: 330px; }
    .escena.tarjeta-visible .tarjeta {
        transform: translateX(-50%) translateY(-37%);
    }
}

@media (max-height: 730px) and (min-width: 621px) {
    .portada { padding-top: 18px; }
    .corona-svg { width: 62px; }
    .nombre { font-size: 88px; }
    .mensaje-superior { margin-bottom: 3px; }
    .escena { height: 350px; }
    .sobre { bottom: 20px; height: 220px; }
    .tarjeta { height: 350px; }
}

/* Controles táctiles cómodos y visibles en teléfono */
@media (max-width: 620px) {
    .regalos-acciones button,
    .regalos-acciones a,
    .acceso-login > button,
    .decision-asistencia button,
    .registro-acciones button,
    .hotel-acciones a,
    .recuerdos-acciones a,
    .cierre-acciones button {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }

    .hotel-acciones { gap: 10px; }
    .hotel-acciones a { padding: 10px 14px; }
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #b9863d;
    outline-offset: 3px;
}

/* Evita dibujar de inmediato las secciones que todavía están lejos de la pantalla. */
@supports (content-visibility: auto) {
    main > section:not(.portada) {
        content-visibility: auto;
        contain-intrinsic-size: auto 100svh;
    }
}

/* Navegación clara y secciones seguras para navegadores Android. */
html,
body {
    touch-action: pan-y;
    overscroll-behavior-y: auto;
}

.preloader { transition-duration: .45s !important; }

.boton-siguiente {
    min-width: min(310px, 88vw) !important;
    min-height: 58px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 9px 28px 8px !important;
    border: 1px solid rgba(185, 129, 57, .58) !important;
    border-radius: 999px !important;
    color: #875a63 !important;
    background: rgba(255, 252, 248, .9) !important;
    box-shadow: 0 9px 24px rgba(105, 62, 70, .12), inset 0 0 0 3px rgba(255,255,255,.45) !important;
    text-align: center !important;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.boton-siguiente small {
    display: block;
    color: #b17b38;
    font: 500 8px/1.2 "Montserrat", sans-serif;
    font-style: normal;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.boton-siguiente span {
    font: italic 16px/1.15 "Cormorant Garamond", serif !important;
}

.boton-siguiente i {
    color: #b9863d !important;
    font-size: 19px !important;
}

.boton-siguiente:active { transform: scale(.98) !important; }

main > section:not(.portada) {
    height: auto !important;
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: clip !important;
    overflow-y: visible !important;
}

@media (max-width: 620px) {
    main > section:not(.portada) {
        place-items: center;
        padding-top: max(48px, env(safe-area-inset-top)) !important;
        padding-bottom: max(48px, env(safe-area-inset-bottom)) !important;
    }

    .boton-siguiente {
        width: min(310px, 88vw) !important;
        margin: 20px auto 0 !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    .boton-siguiente i {
        position: absolute;
        right: 16px;
    }
}

@media (max-width: 380px), (max-height: 700px) and (max-width: 620px) {
    main > section:not(.portada) {
        padding-top: 42px !important;
        padding-bottom: 42px !important;
    }

    .boton-siguiente {
        width: min(292px, 90vw) !important;
        min-height: 54px !important;
        margin-top: 15px !important;
        padding-inline: 24px !important;
    }
}

/* Vestimenta móvil: contenido en flujo para que nada se recorte o se encime. */
@media (max-width: 620px) {
    .dress-code {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        padding: 52px 14px 42px !important;
    }

    .dress-contenido {
        order: 1;
        width: 100% !important;
        transform: none !important;
    }

    .dress-texto {
        width: min(92%, 520px) !important;
        margin: 0 auto !important;
    }

    .muestrario-gala {
        position: relative !important;
        z-index: 1 !important;
        order: 2;
        left: auto !important;
        top: auto !important;
        width: min(310px, 90vw) !important;
        min-height: 315px !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    .dress-visible .muestrario-gala { transform: none !important; }

    .ir-regalos {
        position: relative !important;
        z-index: 4;
        order: 3;
        left: auto !important;
        bottom: auto !important;
        width: auto;
        min-height: 48px;
        margin: -2px auto 0;
        padding: 7px 24px 3px;
        transform: none !important;
    }
}