/* =========================================================
   CONFIGURACIÓN GENERAL
   ========================================================= */

/*
    Quitamos los márgenes que el navegador agrega
    automáticamente a algunos elementos.

    Esto nos permite controlar nosotros mismos
    el espacio de la pantalla.
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/*
    Configuración general del documento.
*/
body {
    background: #080914;
    color: white;
    font-family: Georgia, "Times New Roman", serif;

    /*
        La invitación funciona como una presentación.

        No queremos que el usuario pueda desplazarse
        manualmente con el dedo o la rueda del mouse.
    */
    overflow: hidden;

    /*
        Evita desplazamientos horizontales accidentales.
    */
    width: 100%;
}


/* =========================================================
   PORTADA
   ========================================================= */

.portada {

    min-height: 100svh;

    /*
        La portada queda fija sobre la pantalla.

        De esta manera NO participa en el scroll
        normal del documento.
    */
    position: fixed;

    inset: 0;

    z-index: 100;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 30px;

    background:
        radial-gradient(
            circle at center,
            #25284d 0%,
            #111326 45%,
            #080914 100%
        );

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;
}


/*
    Cuando agreguemos esta clase mediante JavaScript,
    la portada desaparecerá.
*/
.portada.ocultar {
    opacity: 0;
    transform: scale(1.04);
    pointer-events: none;
    visibility: hidden;
}


.portada-contenido {
    max-width: 700px;
}


/* Pequeño texto superior */

.pre-titulo {
    font-family: Arial, sans-serif;

    font-size: 0.75rem;

    letter-spacing: 4px;

    text-transform: uppercase;

    opacity: 0.7;

    margin-bottom: 20px;
}


/* Nombre de Sofía */

h1 {
    font-size: clamp(4rem, 18vw, 8rem);

    font-weight: 400;

    line-height: 0.9;

    letter-spacing: -3px;

    margin-bottom: 20px;
}


/* Mis XV años */

.subtitulo {

    font-family: Arial, sans-serif;

    font-size: 0.9rem;

    letter-spacing: 5px;

    text-transform: uppercase;

    opacity: 0.85;

    margin-bottom: 50px;
}


/* =========================================================
   BOTÓN
   ========================================================= */

.btn-abrir {

    background: transparent;

    color: white;

    border: 1px solid rgba(255, 255, 255, 0.5);

    padding: 15px 32px;

    border-radius: 50px;

    font-family: Arial, sans-serif;

    font-size: 0.8rem;

    letter-spacing: 2px;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


/*
    :hover solamente afecta cuando pasamos
    el mouse sobre el botón.

    En celulares normalmente no tendrá efecto,
    pero en computadora nos sirve para probar.
*/
.btn-abrir:hover {

    background: white;

    color: #080914;

    transform: translateY(-2px);
}


/* =========================================================
   ESCENA 01
   ========================================================= */

/* =========================================================
   ESCENAS — PANTALLA COMPLETA
   ========================================================= */

.escena {

    /*
        Cada escena ocupa exactamente
        la pantalla disponible.
    */
    width: 100%;
    height: 100svh;

    /*
        La escena será nuestro sistema
        de referencia para la flecha.
    */
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 30px;

    background: #080914;

    /*
        La escena comienza invisible.
    */
    opacity: 0;

    visibility: hidden;

    transition: opacity 1.5s ease;
}


/*
    Cuando JavaScript agrega "mostrar",
    la escena se vuelve visible.
*/

.escena.mostrar {

    opacity: 1;

    visibility: visible;
}


/*
    Cuando JavaScript agregue "mostrar",
    la escena se vuelve visible.
*/
.escena.mostrar {

    opacity: 1;

    visibility: visible;
}


.escena-contenido {
    max-width: 700px;
}


/* Número 15 */

/* =========================================================
   CONTADOR DE LOS XV
   ========================================================= */

.numero {

    display: block;

    font-size: clamp(7rem, 30vw, 15rem);

    font-weight: 300;

    line-height: 0.8;

    letter-spacing: -5px;

    opacity: 0;

    transform: scale(0.8);

    /*
        El blur comienza fuerte.

        JavaScript irá reduciéndolo mientras
        el contador se acerca al 15.
    */

    filter: blur(10px);

    /*
        Sombra inicial muy suave.
    */

    text-shadow:
        0 0 0 rgba(255,255,255,0);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease,
        filter 0.4s ease,
        text-shadow 0.4s ease;
}


/*
    Cuando comienza la escena,
    aparece el número 0.
*/

.numero.mostrar-numero {

    opacity: 1;

    transform:
        scale(1);
}


/* Texto de la narración */

/* =========================================================
   TEXTO ESCENA 01
   ========================================================= */

.texto-escena {

    margin-top: 45px;

    max-width: 420px;

    margin-left: auto;

    margin-right: auto;

    font-size: clamp(1.15rem, 4.5vw, 1.7rem);

    line-height: 1.5;

    font-weight: 400;

    letter-spacing: 0.3px;

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 1.4s ease,
        transform 1.4s ease;
}


.texto-escena.mostrar-texto {

    opacity: 0.85;

    transform: translateY(0);

}

/* =========================================================
   ESCENA 02 — RECUERDOS
   ========================================================= */

/*
    Esta escena funciona como una "página".

    No queremos que tenga scroll.
*/
/* =========================================================
   ESCENA 02 — PANTALLA COMPLETA
   ========================================================= */

.escena02 {

    /*
        La Escena 02 también ocupa exactamente
        una pantalla.
    */
    width: 100%;
    height: 100svh;

    position: fixed;

    inset: 0;

    z-index: 10;

    background: #0c0e1c;

    /*
        Comienza invisible.
    */
    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 1.2s ease,
        visibility 1.2s ease;
}


/*
    Cuando activemos la escena,
    aparece sobre la anterior.
*/

.escena02.activa {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   ESCENARIO DE LAS FOTOGRAFÍAS
   ========================================================= */

/*
    Este contenedor es el punto de referencia
    para las tres Polaroid.

    Las tres fotografías se van a superponer
    dentro de este espacio.
*/

.recuerdos {

    position: relative;

    width: 100%;

    height: 100%;
    z-index: 1;

}


/* =========================================================
   POLAROID
   ========================================================= */

/*
    Las tres fotografías tienen exactamente
    el mismo tamaño.

    Empezamos con 220px para que en móvil
    tengan una presencia elegante sin ocupar
    prácticamente toda la pantalla.
*/

/* =========================================================
   POLAROID — APARIENCIA FÍSICA
   ========================================================= */

/*
    La fotografía deja de parecer una tarjeta digital.

    La idea es simular una fotografía impresa
    colocada físicamente sobre otra.
*/

.recuerdos .polaroid {

    position: absolute;

    top: 50%;

    left: 50%;

    width: min(68vw, 300px);

    /*
        Espacio alrededor de la fotografía.
        La parte inferior es más grande,
        como una Polaroid tradicional.
    */

    padding: 9px 9px 28px;

    box-sizing: border-box;

    /*
        Papel ligeramente cálido.

        No usamos blanco puro porque queremos
        que parezca papel y no una caja HTML.
    */

    background: #f4f0e7;

    background: linear-gradient(rgba (255,255,255,0.18), rgba(255,255,255,0.18), #f4f0e7);

    /*
        Sombra amplia y suave.

        La sombra es importante para dar sensación
        de que la fotografía está separada del fondo.
    */

    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.28),
        0 3px 7px rgba(0, 0, 0, 0.12);

    opacity: 0;
}


/* =========================================================
   FOTOGRAFÍA DENTRO DE LA POLAROID
   ========================================================= */

/* =========================================================
   ÁREA DE LA FOTOGRAFÍA
   ========================================================= */

.polaroid-foto {

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #ddd;

}


.polaroid-foto img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    /*
        Un pequeño contraste ayuda a que la fotografía
        tenga aspecto de impresión.
    */

    filter:
        saturate(0.95)
        contrast(0.97);

}


/* =========================================================
   PIE DE LA POLAROID
   ========================================================= */

.polaroid-pie {

    height: 28px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

}


.polaroid-pie span {

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 0.72rem;

    color: #333;

    opacity: 0.75;

}


/* =========================================================
   FOTO 1
   ENTRA DESDE ABAJO
   ========================================================= */

.recuerdo-1 {

    z-index: 1;

    transform:
        translate(-50%, 80vh)
        rotate(-4deg)
        scale(0.9);

    transition:
        opacity 1.2s ease,
        transform 1.5s cubic-bezier(.2,.8,.2,1);

}


/*
    Cuando aparece la primera fotografía,
    se coloca en el centro.
*/

.recuerdos.foto-1 .recuerdo-1,
.recuerdos.foto-2 .recuerdo-1,
.recuerdos.foto-3 .recuerdo-1 {

    opacity: 1;

    transform:
        translate(-40%, -53%)
        rotate(3deg)
        scale(1);

}


/* =========================================================
   FOTO 2
   ENTRA DESDE LA DERECHA
   ========================================================= */

.recuerdo-2 {

    z-index: 2;

    transform:
        translate(100vw, -50%)
        rotate(5deg)
        scale(0.9);

    transition:
        opacity 1.2s ease,
        transform 1.5s cubic-bezier(.2,.8,.2,1);

}


.recuerdos.foto-2 .recuerdo-2,
.recuerdos.foto-3 .recuerdo-2 {

    opacity: 1;

    transform:
        translate(-34%, -35%)
        rotate(-8deg)
        scale(1);

}


/* =========================================================
   FOTO 3
   ENTRA DESDE LA IZQUIERDA
   ========================================================= */

.recuerdo-3 {

    z-index: 3;

    transform:
        translate(-100vw, -50%)
        rotate(-4deg)
        scale(0.9);

    transition:
        opacity 1.2s ease,
        transform 1.5s cubic-bezier(.2,.8,.2,1);

}


.recuerdos.foto-3 .recuerdo-3 {

    opacity: 1;

    transform:
        translate(-50%, -40%)
        rotate(-9deg)
        scale(1);

}

/* =========================================================
   PRUEBA — OCULTAMOS LAS FOTOS HASTA QUE SEAN ACTIVADAS
   ========================================================= */

.recuerdos .polaroid {
    opacity: 0;
}


/* Foto 1 */

.recuerdos.foto-1 .recuerdo-1,
.recuerdos.foto-2 .recuerdo-1,
.recuerdos.foto-3 .recuerdo-1 {
    opacity: 1;
}


/* Foto 2 */

.recuerdos.foto-2 .recuerdo-2,
.recuerdos.foto-3 .recuerdo-2 {
    opacity: 1;
}


/* Foto 3 */

.recuerdos.foto-3 .recuerdo-3 {
    opacity: 1;
}

/* =========================================================
   FLECHA — PASAR A ESCENA 02
   ========================================================= */

/* =========================================================
   FLECHA ESCENA 01 → ESCENA 02
   ========================================================= */

#flechaEscena02 {

    position: absolute;

    bottom: 25px;
    left: 50%;

   

    z-index: 9999;

    width: 60px;
    height: 60px;

    border: none;
    background: transparent;

    color: white;

    font-family: Arial, sans-serif;

    font-size: 2rem;

    line-height: 1;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateX(-50%);

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}


/* =========================================================
   FLECHA VISIBLE
   ========================================================= */

#flechaEscena02.visible {

    opacity: 0.8;

    visibility: visible;

    pointer-events: auto;

    animation: flechaFlotar 2s ease-in-out infinite;
}


/*
    Movimiento muy sutil.
*/

@keyframes flechaFlotar {

    0%,
    100% {

        transform:
            translateX(-50%)
            translateY(0);
    }

    50% {

        transform:
            translateX(-50%)
            translateY(6px);
    }
}

/* =========================================================
   MOMENTO FINAL DEL 15
   ========================================================= */

/*
    Cuando el contador llega a 15,
    hacemos un pequeño pulso de luz.

    Es muy sutil: la idea es que el 15
    tenga un instante de protagonismo.
*/

.numero.brillo-final {

    animation:
        brilloFinal 0.8s ease-in-out;

}


@keyframes brilloFinal {

    0% {

        text-shadow:
            0 0 18px rgba(255,255,255,0.45);

    }

    50% {

        text-shadow:
            0 0 35px rgba(255,255,255,0.75);

    }

    100% {

        text-shadow:
            0 0 18px rgba(255,255,255,0.45);

    }

}

/* =========================================================
   FLECHA DE LOS RECUERDOS
   ========================================================= */

/* =========================================================
   FLECHA ESCENA 02
   ========================================================= */

.flecha-recuerdos {

    position: absolute;

    bottom: 28px;

    left: 50%;

    z-index: 20;

    border: none;

    background: transparent;

    color: white;

    font-family: Arial, sans-serif;

    font-size: 2rem;

    font-weight: 200;

    line-height: 1;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateX(-50%);

    transition:
        opacity 1s ease,
        visibility 1s ease;
}


/*
    Esta clase se agregará SOLAMENTE
    cuando termine el Audio 02.
*/

.flecha-recuerdos.mostrar-flecha {

    opacity: 0.8;

    visibility: visible;

    pointer-events: auto;

    animation: flechaFlotar 2s ease-in-out infinite;
}

/* =========================================================
   FLECHA — AJUSTE DE CAPA
   ========================================================= */

#flechaEscena02 {

    z-index: 50;

}

/* =========================================================
   SISTEMA DE ESCENAS — SIN SCROLL
   ========================================================= */

html,
body {

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;
}


/* =========================================================
   TODAS LAS ESCENAS
   ========================================================= */

.portada,
.escena,
.escena02,
.escena03 {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100svh;

    overflow: hidden;
}


/* =========================================================
   CAPAS
   ========================================================= */

/*
    La portada está arriba de todo
    hasta que se oculta.
*/

.portada {
    z-index: 100;
}


/*
    Escena 01 queda abajo.
*/

.escena {
    z-index: 10;
}


/*
    Escena 02 se coloca ENCIMA de Escena 01.
*/

.escena02 {
    z-index: 20;
}


/*
    Escena 03 se coloca ENCIMA de Escena 02.

    MUY IMPORTANTE:
    el fondo es TRANSPARENTE.

    De esta manera podemos seguir viendo
    las fotografías de las escenas anteriores.
*/

.escena03 {

    z-index: 30;

    background: transparent;

    pointer-events: none;
}


/* =========================================================
   ESCENA 03 — FOTOGRAFÍAS
   ========================================================= */

.recuerdos-escena03 {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background: transparent;

    pointer-events: none;

    z-index: 5;
}


/* =========================================================
   POLAROIDS ESCENA 03
   ========================================================= */

.recuerdos-escena03 .polaroid {

    position: absolute;

    top: 50%;
    left: 50%;

    width: min(68vw, 300px);

    opacity: 0;

    pointer-events: none;
}


/* =========================================================
   FOTO 4 — SOFÍA ESTUDIANDO
   ========================================================= */

.recuerdo-4 {

    z-index: 4;

    transform:
        translate(-50%, 80vh)
        rotate(-5deg)
        scale(0.88);

    transition:
        opacity 1.8s ease,
        transform 2s cubic-bezier(.2,.8,.2,1);
}


/* =========================================================
   FOTO 5 — SOFÍA CON SUS PADRES
   ========================================================= */

.recuerdo-5 {

    z-index: 5;

    transform:
        translate(-50%, 80vh)
        rotate(5deg)
        scale(0.88);

    transition:
        opacity 1.8s ease,
        transform 2s cubic-bezier(.2,.8,.2,1);
}


/* =========================================================
   APARICIÓN FOTO 4
   ========================================================= */

.recuerdos-escena03.foto-4 .recuerdo-4,
.recuerdos-escena03.foto-5 .recuerdo-4 {

    opacity: 1;

    transform:
        translate(-58%, -30%)
        rotate(11deg)
        scale(1);
}


/* =========================================================
   APARICIÓN FOTO 5
   ========================================================= */

.recuerdos-escena03.foto-5 .recuerdo-5 {

    opacity: 1;

    transform:
        translate(-42%, -59%)
        rotate(-12deg)
        scale(1);
}


/* =========================================================
   MOVIMIENTO INTERNO DE LAS FOTOS
   ========================================================= */

.recuerdos-escena03 .polaroid-foto {

    overflow: hidden;
}


.recuerdos-escena03 .polaroid-foto img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transform: scale(1.06);

    transition:
        transform 7s ease;
}


/*
    Cuando aparece cada foto,
    comienza el zoom suave.
*/

.recuerdos-escena03.foto-4
.recuerdo-4 .polaroid-foto img,

.recuerdos-escena03.foto-5
.recuerdo-5 .polaroid-foto img {

    transform: scale(1);
}


/* =========================================================
   FLECHA ESCENA 03
   ========================================================= */

.flecha-escena03 {

    position: absolute;

    bottom: 32px;
    left: 50%;

    z-index: 20;

    width: 60px;
    height: 60px;

    padding: 0;
    margin: 0;

    border: none;
    outline: none;

    background: transparent;
    background-color: transparent;

    color: white;

    font-family: Arial, sans-serif;
    font-size: 1.8rem;
    font-weight: 200;
    line-height: 1;

    cursor: pointer;

    -webkit-appearance: none;
    appearance: none;

    -webkit-tap-highlight-color: transparent;

    opacity: 0;

    pointer-events: none;

    transform:
        translateX(-50%)
        translateY(-8px);

    transition:
        opacity 1.4s ease,
        transform 1.4s ease;
}


/* =========================================================
   FLECHA VISIBLE
   ========================================================= */

.flecha-escena03.visible {

    opacity: 0.75;

    pointer-events: auto;

    background: transparent;

    transform:
        translateX(-50%)
        translateY(0);

    animation:
        flechaFlotar03 2.8s ease-in-out 1.4s infinite;
}


/* Evita fondo/efecto al tocar en móvil */

.flecha-escena03:focus,
.flecha-escena03:active,
.flecha-escena03:hover {

    background: transparent;

    outline: none;
}


/* =========================================================
   KEYFRAME FLECHA FLOTAR
   ========================================================= */

@keyframes flechaFlotar03 {

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

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

/* =========================================
   ESCENA 04
========================================= */

.escena04 {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100svh;
    z-index: 40;
    pointer-events: none;
    background: transparent;
    opacity: 1;
}


/* CONTENEDOR */

.recuerdos-escena04 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    z-index: 5;
}


/* POLAROIDS */

.recuerdos-escena04 .polaroid {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(68vw, 300px);
    opacity: 0;
    pointer-events: none;
}


/* =========================================
   FOTO 6
   Entra desde la izquierda
========================================= */

.recuerdo-6 {
    z-index: 6;

    transform:
        translate(-100vw, -50%)
        rotate(-6deg)
        scale(.88);

    transition:
        opacity 1.4s ease,
        transform 1.8s cubic-bezier(.2,.8,.2,1);
}

.recuerdos-escena04.foto-6 .recuerdo-6,
.recuerdos-escena04.foto-7 .recuerdo-6,
.recuerdos-escena04.foto-8 .recuerdo-6 {

    opacity: 1;

    transform:
        translate(-72%, -59%)
        rotate(-10deg)
        scale(1);
}


/* =========================================
   FOTO 7
   Entra desde la derecha
========================================= */

.recuerdo-7 {
    z-index: 7;

    transform:
        translate(100vw, -50%)
        rotate(6deg)
        scale(.88);

    transition:
        opacity 1.4s ease,
        transform 1.8s cubic-bezier(.2,.8,.2,1);
}

.recuerdos-escena04.foto-7 .recuerdo-7,
.recuerdos-escena04.foto-8 .recuerdo-7 {

    opacity: 1;

    transform:
        translate(-15%, -30%)
        rotate(10deg)
        scale(1);
}


/* =========================================
   FOTO 8
   Entra desde la izquierda
========================================= */

.recuerdo-8 {
    z-index: 8;

    transform:
        translate(-100vw, -50%)
        rotate(-4deg)
        scale(.88);

    transition:
        opacity 1.4s ease,
        transform 1.8s cubic-bezier(.2,.8,.2,1);
}

.recuerdos-escena04.foto-8 .recuerdo-8 {

    opacity: 1;

    transform:
        translate(-50%, -42%)
        rotate(-2deg)
        scale(1);
}


/* =========================================
   MOVIMIENTO SUAVE DE LAS FOTOS
========================================= */

.recuerdos-escena04 .polaroid-foto img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;

    transform: scale(1.06);

    transition: transform 7s ease;
}

.recuerdos-escena04.foto-6
.recuerdo-6 .polaroid-foto img,

.recuerdos-escena04.foto-7
.recuerdo-7 .polaroid-foto img,

.recuerdos-escena04.foto-8
.recuerdo-8 .polaroid-foto img {

    transform: scale(1);
}


/* =========================================
   FLECHA ESCENA 04
========================================= */

.flecha-escena04 {
    position: absolute;

    bottom: 32px;
    left: 50%;

    z-index: 20;

    /* Quitar completamente el fondo */
    background: transparent !important;
    background-color: transparent !important;

    border: none;
    outline: none;
    box-shadow: none;

    color: white;

    font-family: Arial, sans-serif;
    font-size: 1.8rem;
    font-weight: 200;
    line-height: 1;

    cursor: pointer;

    opacity: 0;
    pointer-events: none;

    transform:
        translateX(-50%)
        translateY(-8px);

    transition:
        opacity 1.4s ease,
        transform 1.4s ease;
}


/* FLECHA VISIBLE */

.flecha-escena04.visible {
    opacity: .75;

    pointer-events: auto;

    background: transparent !important;
    border: none;
    box-shadow: none;

    transform:
        translateX(-50%)
        translateY(0);

    animation:
        flechaFlotar04
        2.8s ease-in-out
        1.4s infinite;
}


/* QUITAR ESTILOS AL PASAR EL MOUSE */

.flecha-escena04:hover,
.flecha-escena04:focus,
.flecha-escena04:active {
    background: transparent !important;
    border: none;
    outline: none;
    box-shadow: none;
    color: white;
}


/* ANIMACIÓN */

@keyframes flechaFlotar04 {

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

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

/* =========================================
   ESCENA 05 — INFORMACIÓN
========================================= */

.escena05 {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100svh;

    z-index: 50;

    background: transparent;

    pointer-events: none;
}

.escena05.activa {
    pointer-events: auto;
}


/* =========================================
   CONTENEDOR
========================================= */

.info-contenedor {
    position: absolute;
    inset: 0;

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

    padding: 0;

    box-sizing: border-box;

    overflow: hidden;
}

/* =========================================
   TRACK
========================================= */

.info-track {
    position: absolute;

    top: 0;
    left: 0;

    width: 300%;
    height: 100%;

    display: flex;
    align-items: center;

    transform: translateX(0);

    transition:
        transform .75s cubic-bezier(.22,.8,.22,1);

    touch-action: pan-y;
}


/* =========================================
   TARJETA GLASS
========================================= */

.info-card {
    flex: 0 0 33.333333%;
    width: 70%;
    max-width: none;
    margin: 0 auto;

    padding: 30px 24px;
    box-sizing: border-box;

    border-radius: 24px;

  

    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.28);

    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.25),
        inset 0 1px 1px rgba(255,255,255,.18);

    color: white;
    text-align: center;

    /* OCULTAS POR DEFECTO */
    opacity: 0;
    transform: scale(.94);

    transition:
        opacity .5s ease,
        transform .6s cubic-bezier(.2,.8,.2,1);
}


/* =========================================
   TARJETA ACTIVA
========================================= */

.escena05.activa .info-card.activa {
    opacity: 1;
    transform: scale(1);
}

/* =========================================
   NAVEGACIÓN
========================================= */

.info-navegacion {
    position: absolute;

    left: 50%;
    bottom: 28px;

    transform: translateX(-50%);

    z-index: 100;

    display: flex;
    align-items: center;
    gap: 28px;

    opacity: 0;

    transition: opacity .8s ease;

    pointer-events: none;
}

.escena05.activa .info-navegacion {
    opacity: 1;
    pointer-events: auto;
}



/* =========================================
   ENCABEZADO
========================================= */

.info-icono {
    font-size: 1.3rem;

    opacity: .8;

    margin-bottom: 10px;
}


.info-etiqueta {
    margin: 0 0 8px;

    font-size: .65rem;

    letter-spacing: .28em;

    opacity: .7;
}


.info-card h2 {
    margin: 0 0 22px;

    font-family: "Cormorant Garamond", serif;

    font-size: 2rem;

    font-weight: 400;
}


/* =========================================
   FECHA
========================================= */

.info-flecha {
    width: 38px;
    height: 38px;

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

    padding: 0;

    border: none;
    outline: none;

    background: transparent;

    color: white;

    font-family: Arial, sans-serif;

    font-size: 2rem;
    font-weight: 200;

    line-height: 1;

    cursor: pointer;

    opacity: .75;

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.info-flecha:hover {
    opacity: 1;
    transform: scale(1.12);
}

.info-flecha:active {
    transform: scale(.95);
}



.info-fecha strong {
    font-size: 3rem;

    font-weight: 300;

    line-height: 1;
}


.info-hora {
    margin-top: 10px;

    font-size: .8rem;

    letter-spacing: .22em;

    opacity: .85;
}


/* =========================================
   SEPARADOR
========================================= */

.info-separador {
    width: 65%;

    height: 1px;

    margin: 20px auto;

    background:
        rgba(255,255,255,.25);
}


/* =========================================
   CONTADOR
========================================= */

.info-contador {
    display: flex;

    justify-content: center;

    gap: 13px;
}


.info-contador div {
    display: flex;

    flex-direction: column;

    align-items: center;
}


.info-contador strong {
    font-size: 1.15rem;

    font-weight: 400;

    line-height: 1.2;
}


.info-contador span {
    margin-top: 3px;

    font-size: .48rem;

    letter-spacing: .1em;

    opacity: .6;
}


/* =========================================
   UBICACIÓN
========================================= */

.info-ubicacion {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    text-align: left;
}


.ubicacion-icono {
    font-size: 1.6rem;

    opacity: .8;
}


.info-ubicacion strong {
    display: block;

    font-size: .85rem;

    font-weight: 400;
}


.info-ubicacion p {
    margin: 3px 0 0;

    font-size: .65rem;

    opacity: .65;
}


/* =========================================
   BOTÓN UBICACIÓN
========================================= */

.btn-ubicacion {
    margin-top: 18px;

    padding: 10px 18px;

    border-radius: 30px;

    border: 1px solid rgba(255,255,255,.35);

    background: rgba(255,255,255,.10);

    color: white;

    font-size: .62rem;

    letter-spacing: .14em;

    cursor: pointer;

    transition:
        background .3s ease,
        transform .3s ease;
}


.btn-ubicacion:hover {
    background: rgba(255,255,255,.2);

    transform: translateY(-2px);
}


/* =========================================
   NAVEGACIÓN
========================================= */

.info-navegacion {
    position: absolute;

    bottom: 28px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 18px;

    opacity: 0;

    transition: opacity 1s ease 1s;
}


.escena05.activa .info-navegacion {
    opacity: 1;

    pointer-events: auto;
}


/* FLECHAS */

.info-flecha {
    width: 32px;
    height: 32px;

    padding: 0;

    border: none;

    background: transparent !important;

    color: white;

    font-size: 2rem;

    font-weight: 200;

    line-height: 1;

    cursor: pointer;

    opacity: .75;
}


/* INDICADORES */

.info-indicadores {
    display: flex;

    gap: 7px;

    align-items: center;
}


.info-indicadores span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: rgba(255,255,255,.4);

    transition:
        transform .3s ease,
        background .3s ease,
        opacity .4s ease;
}


.info-indicadores span.activo {
    transform: scale(1.5);

    background: white;

    opacity: 1;
}

/* =========================================
   TARJETA 2 — DRESS CODE
========================================= */

.info-card-2 {
    display: block;
}


/* ICONO */

.dress-icono {
    font-size: 1.5rem;
    opacity: .8;
    margin-bottom: 10px;
}


/* INTRO */

.dress-intro {
    max-width: 270px;

    margin: 0 auto;

    font-size: .72rem;
    line-height: 1.6;

    opacity: .72;
}


/* LÍNEAS */

.dress-linea {
    width: 65%;
    height: 1px;

    margin: 20px auto;

    background: rgba(255,255,255,.25);
}


/* OPCIONES */

.dress-opciones {
    display: flex;

    flex-direction: column;

    gap: 18px;
}


/* CADA OPCIÓN */

.dress-opcion {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    text-align: left;
}


/* ICONO PEQUEÑO */

.dress-icono-pequeno {
    width: 30px;
    height: 30px;

    display: flex;

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

    border: 1px solid rgba(255,255,255,.25);

    border-radius: 50%;

    font-size: .8rem;

    opacity: .8;
}


/* TÍTULO */

.dress-opcion strong {
    display: block;

    font-size: .65rem;

    letter-spacing: .18em;

    font-weight: 400;
}


/* DESCRIPCIÓN */

.dress-opcion p {
    margin: 4px 0 0;

    font-size: .68rem;

    opacity: .65;
}


/* FRASE FINAL */

.dress-final {
    margin: 0 auto;

    max-width: 250px;

    font-family: "Cormorant Garamond", serif;

    font-size: .95rem;

    font-style: italic;

    line-height: 1.5;

    opacity: .75;
}

/* =========================================
   TARJETA 3 — CONFIRMACIÓN
========================================= */

.info-card-3 {
    display: block;
}


/* ICONO */

.confirmacion-icono {
    font-size: 1.6rem;

    opacity: .8;

    margin-bottom: 10px;
}


/* TEXTO PRINCIPAL */

.confirmacion-texto {
    max-width: 260px;

    margin: 0 auto;

    font-size: .75rem;

    line-height: 1.7;

    opacity: .72;
}


/* SEPARADOR */

.confirmacion-linea {
    width: 65%;

    height: 1px;

    margin: 22px auto;

    background: rgba(255,255,255,.25);
}


/* PREGUNTA */

.confirmacion-pregunta {
    margin: 0 0 16px;

    font-family: "Cormorant Garamond", serif;

    font-size: 1.2rem;

    font-style: italic;

    opacity: .85;
}


/* =========================================
   BOTÓN CONFIRMAR
========================================= */

.btn-confirmar {

    padding: 13px 22px;

    border-radius: 30px;

    border: 1px solid rgba(255,255,255,.45);

    background: rgba(255,255,255,.16);

    color: white;

    font-size: .65rem;

    letter-spacing: .15em;

    cursor: pointer;

    box-shadow:
        0 8px 25px rgba(0,0,0,.15);

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


.btn-confirmar:hover {

    background: rgba(255,255,255,.25);

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.2);
}


/* =========================================
   PLAZO
========================================= */

.confirmacion-plazo {

    margin: 18px 0 0;

    font-size: .55rem;

    line-height: 1.6;

    opacity: .55;
}


.confirmacion-plazo strong {

    font-weight: 400;

    letter-spacing: .1em;
}

/* AJUSTE ANCHO TARJETAS ESCENA 05 */
.escena05 .info-card {
    width: 75%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================
   FOTOS MOVIBLES — TODAS LAS ESCENAS
========================================= */

.recuerdos .polaroid {
    pointer-events: auto !important;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.recuerdos .polaroid.moviendo {
    cursor: grabbing;
    transition: none !important;
}

.recuerdos .polaroid img {
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}