@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


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

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

html {
    scroll-behavior: smooth;
    background: #0d0810;
}

body {
    font-family: 'Poppins', sans-serif;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(255, 65, 120, 0.16),
            transparent 35%
        ),

        radial-gradient(
            circle at 85% 85%,
            rgba(180, 30, 90, 0.14),
            transparent 40%
        ),

        linear-gradient(
            145deg,
            #0b070d 0%,
            #180a14 50%,
            #0b070d 100%
        );

    color: #ffffff;

    min-height: 100vh;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
}


/* =========================================
   EFECTOS DEL FONDO
========================================= */

body::before {

    content: "";

    position: fixed;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background: rgba(255, 50, 110, 0.08);

    filter: blur(70px);

    top: 5%;
    left: -100px;

    pointer-events: none;

    z-index: 0;
}


body::after {

    content: "";

    position: fixed;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background: rgba(160, 30, 90, 0.07);

    filter: blur(80px);

    bottom: -120px;
    right: -100px;

    pointer-events: none;

    z-index: 0;
}


/* =========================================
   APP
========================================= */

#app {

    min-height: 100vh;

    position: relative;

    z-index: 1;
}


/* =========================================
   PANTALLAS
========================================= */

.screen {

    display: none;

    width: 100%;

    min-height: 100vh;

    min-height: 100svh;

    padding-top:
        max(
            25px,
            env(safe-area-inset-top)
        );

    padding-right: 18px;

    padding-bottom:
        max(
            30px,
            env(safe-area-inset-bottom)
        );

    padding-left: 18px;

    position: relative;
}


.screen.active {

    display: flex;

    align-items: center;

    justify-content: center;

    animation: screenIn 0.55s ease;
}


@keyframes screenIn {

    from {

        opacity: 0;

        transform:
            translateY(18px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================
   TARJETAS
========================================= */

.card,
.content {

    width: 100%;

    max-width: 650px;

    padding: 38px 24px;

    border-radius: 28px;

    background:
        rgba(255, 255, 255, 0.065);

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

    backdrop-filter:
        blur(20px);

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

    box-shadow:

        0 25px 70px
        rgba(0, 0, 0, 0.45),

        inset 0 1px 0
        rgba(255, 255, 255, 0.05);

    text-align: center;

    position: relative;
}


/* =========================================
   LOGIN
========================================= */

.login-card {

    padding-top: 42px;

    padding-bottom: 32px;
}


/* =========================================
   CORAZÓN
========================================= */

.heart {

    font-size: 58px;

    margin-bottom: 20px;

    display: inline-block;

    filter:
        drop-shadow(
            0 0 18px
            rgba(255, 60, 120, 0.45)
        );

    animation:
        heartbeat 2.2s infinite;
}


@keyframes heartbeat {

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

    10% {
        transform: scale(1.12);
    }

    20% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.07);
    }

    40% {
        transform: scale(1);
    }
}


/* =========================================
   PEQUEÑO TÍTULO
========================================= */

.small-title {

    font-size: 10px;

    letter-spacing: 3px;

    font-weight: 600;

    color:
        rgba(255, 255, 255, 0.45);

    margin-bottom: 13px;
}


/* =========================================
   TÍTULOS
========================================= */

h1 {

    font-size:
        clamp(
            29px,
            8vw,
            45px
        );

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -1px;

    margin-bottom: 22px;
}


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

p {

    font-size: 14px;

    line-height: 1.8;

    color:
        rgba(255, 255, 255, 0.72);

    margin-bottom: 20px;
}


/* =========================================
   NÚMERO DE SECCIÓN
========================================= */

.section-number {

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 3px;

    color:
        rgba(255, 100, 150, 0.8);

    margin-bottom: 18px;
}


/* =========================================
   INPUT
========================================= */

.input-container {

    width: 100%;

    margin-bottom: 14px;
}


input {

    width: 100%;

    height: 54px;

    padding:
        0 17px;

    border-radius: 15px;

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

    background:
        rgba(255, 255, 255, 0.055);

    color: white;

    font-family:
        'Poppins',
        sans-serif;

    font-size: 14px;

    outline: none;

    -webkit-appearance: none;

    transition:
        0.25s ease;
}


input::placeholder {

    color:
        rgba(255, 255, 255, 0.38);
}


input:focus {

    border-color:
        rgba(255, 75, 125, 0.65);

    box-shadow:
        0 0 20px
        rgba(255, 50, 110, 0.1);
}


/* =========================================
   BOTONES
========================================= */

button {

    width: 100%;

    min-height: 54px;

    padding:
        14px 20px;

    border: none;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #ff4d83,
            #e72e69
        );

    color: white;

    font-family:
        'Poppins',
        sans-serif;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.5px;

    cursor: pointer;

    -webkit-tap-highlight-color:
        transparent;

    box-shadow:
        0 10px 25px
        rgba(231, 46, 105, 0.25);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


button span {

    margin-left: 8px;

    font-size: 17px;
}


button:active {

    transform:
        scale(0.97);

    box-shadow:
        0 5px 15px
        rgba(231, 46, 105, 0.2);
}


/* =========================================
   ERROR
========================================= */

#error {

    color:
        #ff668f;

    font-size: 12px;

    min-height: 18px;

    margin-top: 10px;

    margin-bottom: 5px;
}


/* =========================================
   FIRMA
========================================= */

.signature {

    margin-top: 20px;

    font-size: 11px;

    color:
        rgba(255, 255, 255, 0.35);

    letter-spacing: 0.5px;
}


/* =========================================
   PANTALLAS GRANDES
========================================= */

@media (min-width: 700px) {

    .card,
    .content {

        padding:
            50px 45px;
    }

    p {

        font-size: 15px;
    }
}/* =========================================
   CARTA DE INTRODUCCIÓN
========================================= */

#intro {
    padding: 24px 18px;
    align-items: center;
    justify-content: center;
}

.letter {
    position: relative;
    width: 100%;
    max-width: 620px;
    padding: 42px 25px 30px;

    background: #f7f1e7;
    color: #272127;

    border-radius: 5px;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.45),
        0 5px 15px rgba(0, 0, 0, 0.2);

    overflow: hidden;

    animation: letterAppear 0.7s ease;
}

@keyframes letterAppear {
    from {
        opacity: 0;
        transform: translateY(25px) rotate(1deg);
    }

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

.letter h1 {
    font-family: 'Poppins', sans-serif;
    color: #292129;

    font-size: clamp(25px, 7vw, 38px);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.8px;

    margin-bottom: 18px;
    text-align: center;
}

.letter-line {
    width: 55px;
    height: 3px;

    margin: 0 auto 25px;

    border-radius: 10px;
    background: #d94b72;
}

.letter-text {
    text-align: left;
}

.letter-text p {
    font-family: 'Poppins', sans-serif;

    font-size: 13.5px;
    line-height: 1.85;

    color: #403840;

    margin-bottom: 21px;
}

.letter-text strong {
    color: #252025;
    font-weight: 700;
}

.letter-text .greeting {
    margin-bottom: 4px;

    font-size: 13px;
    color: #665c64;
}

.letter-text .birthday {
    margin-bottom: 25px;

    font-size: 15px;
    line-height: 1.6;

    font-weight: 800;
    color: #c93862;
}

.letter-text .goodbye {
    margin-top: 28px;
    padding-top: 20px;

    border-top: 1px solid rgba(80, 50, 60, 0.15);

    text-align: center;

    font-weight: 600;
    color: #493e46;
}

.letter-decoration {
    position: absolute;

    font-family: 'Poppins', sans-serif;

    pointer-events: none;
    user-select: none;

    line-height: 1;
}

.top-left {
    top: 22px;
    left: 17px;

    color: #d43d67;
    font-size: 19px;

    transform: rotate(-18deg);
}

.top-right {
    top: 30px;
    right: 22px;

    color: #e7839e;
    font-size: 22px;

    transform: rotate(14deg);
}

.middle-right {
    right: 13px;
    top: 48%;

    color: #d43d67;
    font-size: 16px;

    transform: rotate(20deg);
}

.bottom-left {
    left: 18px;
    bottom: 110px;

    color: #e7839e;
    font-size: 19px;

    transform: rotate(-15deg);
}

.letter-footer {
    margin-top: 12px;
}

.letter-footer button {
    background:
        linear-gradient(
            135deg,
            #d94870,
            #c8325c
        );

    box-shadow:
        0 8px 20px
        rgba(200, 50, 92, 0.22);
}

@media (max-width: 500px) {

    .letter {
        padding:
            36px 22px
            calc(25px + env(safe-area-inset-bottom));

        max-height: 92svh;
        overflow-y: auto;
    }

    .letter-text p {
        font-size: 13px;
        line-height: 1.8;
    }

    .letter-text .birthday {
        font-size: 14px;
    }
}

.letter .letter-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.8 !important;
    color: #403840 !important;
    text-align: left !important;
    letter-spacing: 0 !important;
    margin-bottom: 8px !important;
}
/* =========================================
   MENÚ DE FOTOS
========================================= */

.photos-menu button {
    margin-bottom: 12px;
}


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

.photos-menu .secondary-button {
    margin-top: 15px;

    background:
        rgba(255, 255, 255, 0.08);

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

    box-shadow: none;
}


/* =========================================
   GALERÍAS
========================================= */

.photo-gallery {

    display: none;

    width: 100%;

    max-width: 650px;

    padding: 38px 24px;

    border-radius: 28px;

    background:
        rgba(255, 255, 255, 0.065);

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

    backdrop-filter: blur(20px);

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

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.45);

    text-align: center;
}


/* =========================================
   MOMENTOS ESPECIALES
========================================= */

.moments-container {
    width: 100%;
    max-width: 650px;
    padding: 38px 24px;

    border-radius: 28px;

    background: rgba(255, 255, 255, 0.065);

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

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

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.45);

    text-align: center;
}

.moments-intro {
    margin-bottom: 25px;
}

.moments-intro p {
    font-size: 13.5px;
    line-height: 1.8;
}


/* TARJETAS DE MOMENTOS */

.moment-card {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    min-height: 75px;

    margin-bottom: 12px;
    padding: 15px 18px;

    background: rgba(255, 255, 255, 0.055);

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

    border-radius: 16px;

    text-align: left;

    box-shadow: none;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.moment-card:active {
    transform: scale(0.97);
}

.moment-number {
    min-width: 42px;

    font-size: 12px;
    font-weight: 700;

    color: rgba(255, 100, 150, 0.85);

    letter-spacing: 1px;
}

.moment-title {
    flex: 1;

    padding-right: 10px;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.5;

    color: rgba(255, 255, 255, 0.88);
}

.moment-arrow {
    font-size: 18px;

    color: rgba(255, 255, 255, 0.45);
}


/* ÚLTIMO MENSAJE */

.final-moment {
    margin-top: 20px;

    border-color: rgba(255, 90, 140, 0.25);

    background: rgba(255, 70, 120, 0.07);
}


/* =========================================
   MOMENTO INDIVIDUAL
========================================= */

.moment-detail {
    display: none;

    width: 100%;
    max-width: 650px;

    padding: 42px 28px;

    border-radius: 28px;

    background: #f7f1e7;

    color: #272127;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.45);

    text-align: center;
}

.moment-detail-number {
    font-size: 12px;

    font-weight: 700;

    letter-spacing: 4px;

    color: #c93862;

    margin-bottom: 15px;
}

.moment-detail h1 {
    color: #292129;

    font-size: clamp(25px, 7vw, 38px);

    margin-bottom: 20px;
}

.moment-line {
    width: 55px;
    height: 3px;

    margin: 0 auto 28px;

    border-radius: 10px;

    background: #d94b72;
}

.moment-detail p {
    color: #403840;

    font-size: 14px;

    line-height: 1.9;

    text-align: left;

    margin-bottom: 30px;
}


/* MÓVIL */

@media (max-width: 500px) {

    .moments-container {
        padding: 30px 18px;
    }

    .moment-detail {
        padding: 36px 22px;
    }

}
/* =========================================
   CARTA DE MOMENTO ESPECIAL
========================================= */

.moment-detail {
    position: relative;

    display: none;

    width: 100%;
    max-width: 620px;

    padding: 55px 38px 45px;

    /* Papel */
    background:
        linear-gradient(
            rgba(255,255,255,0.18),
            rgba(255,255,255,0.18)
        ),
        #f4ecdc;

    color: #30282c;

    border-radius: 2px;

    /* Sombra del papel */
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.45),
        0 5px 12px rgba(0, 0, 0, 0.18);

    text-align: center;

    overflow: hidden;

    /* Pequeña inclinación */
    transform: rotate(-0.4deg);
}


/* Textura muy sutil del papel */

.moment-detail::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.16;

    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(90, 70, 50, 0.035) 4px
        );
}


/* Decoraciones */

.moment-detail::after {
    content: "♡";

    position: absolute;

    top: 20px;
    right: 25px;

    font-size: 27px;

    color: #c96b7d;

    transform: rotate(15deg);

    font-family: serif;
}


/* Número */

.moment-detail-number {
    position: relative;

    font-family: Georgia, serif;

    font-size: 14px;

    letter-spacing: 5px;

    color: #b34d67;

    margin-bottom: 14px;
}


/* TÍTULO */

.moment-detail h1 {
    position: relative;

    font-family: Georgia, "Times New Roman", serif;

    color: #33292d;

    font-size: clamp(25px, 7vw, 36px);

    line-height: 1.2;

    font-weight: 600;

    letter-spacing: 0;

    margin-bottom: 18px;
}


/* Línea */

.moment-line {
    position: relative;

    width: 65px;
    height: 1px;

    margin: 0 auto 30px;

    background: #bd687c;
}


/* TEXTO DE LA CARTA */

.moment-detail p {
    position: relative;

    font-family: Georgia, "Times New Roman", serif;

    color: #40383a;

    font-size: 15px;

    line-height: 1.95;

    text-align: left;

    margin-bottom: 35px;
}


/* FIRMA */

.moment-detail p::after {
    content: "Mo ❤️";

    display: block;

    margin-top: 30px;

    text-align: right;

    font-family: "Brush Script MT", "Segoe Script", cursive;

    font-size: 23px;

    color: #6d4c55;
}


/* BOTÓN VOLVER */

.moment-detail button {
    position: relative;

    background:
        rgba(90, 60, 70, 0.08);

    color: #514348;

    border: 1px solid rgba(80, 50, 60, 0.15);

    box-shadow: none;

    font-size: 12px;
}


/* MÓVIL */

@media (max-width: 500px) {

    .moment-detail {
        width: calc(100% - 6px);

        padding:
            45px 24px
            35px;

        min-height: 80vh;
    }

    .moment-detail p {
        font-size: 14px;

        line-height: 1.9;
    }

    .moment-detail h1 {
        font-size: 27px;
    }
}
/* =========================================
   TEST FINAL
========================================= */

.test-card {
    width: 100%;
    max-width: 650px;
    max-height: 90svh;
    overflow-y: auto;

    padding: 42px 28px;

    border-radius: 28px;

    background:
        rgba(255, 255, 255, 0.065);

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

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

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.45);

    text-align: center;
}


/* INTRO RECOMPENSAS */

.reward-text {
    text-align: left;
    margin-top: 25px;
}

.reward-text > p {
    font-size: 13px;
    line-height: 1.8;
    color: rgba(255,255,255,0.75);
    margin-bottom: 20px;
}

.reward {
    padding: 16px 17px;
    margin-bottom: 11px;
    border-radius: 16px;

    background:
        rgba(255,255,255,0.045);

    border:
        1px solid
        rgba(255,255,255,0.08);
}

.reward strong {
    font-size: 12px;
    letter-spacing: 0.4px;
    color: rgba(255,255,255,0.9);
}

.reward p {
    font-size: 12px;
    line-height: 1.7;
    color: rgba(255,255,255,0.68);
    margin: 8px 0 0;
}

.two-gifts {
    text-align: center;

    margin:
        25px 0;

    padding:
        20px 17px;

    border-radius: 18px;

    background:
        rgba(255, 70, 120, 0.08);

    border:
        1px solid
        rgba(255, 90, 140, 0.22);
}

.two-gifts-icon {
    font-size: 35px;
    margin-bottom: 8px;
}

.two-gifts > strong {
    display: block;

    font-size: 14px;

    color:
        #ff739d;

    margin-bottom: 8px;
}

.two-gifts p {
    font-size: 12px;
    line-height: 1.7;
    margin-bottom: 7px;
}

.reward-final {
    text-align: center !important;
    margin-top: 22px;
}

.final-challenge {
    margin-top: 35px;
    font-size: 20px;
}


/* PROGRESO */

.test-progress {
    margin-bottom: 22px;
}

.test-progress span {
    display: block;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;

    color:
        rgba(255,255,255,0.45);

    margin-bottom: 10px;
}

.progress-bar {
    width: 100%;
    height: 5px;

    border-radius: 10px;

    background:
        rgba(255,255,255,0.08);

    overflow: hidden;
}

#progress-fill {
    width: 5%;
    height: 100%;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #ff4d83,
            #e72e69
        );

    transition:
        width 0.35s ease;
}


/* CONTADOR */

.score-counter {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
}

.score-counter > div {
    padding: 8px 17px;

    border-radius: 30px;

    font-size: 12px;
    font-weight: 700;

    background:
        rgba(255,255,255,0.05);

    border:
        1px solid
        rgba(255,255,255,0.08);
}

.score-good {
    color: #79e29b;
}

.score-bad {
    color: #ff7777;
}


/* DIFICULTAD */

.question-difficulty {
    display: inline-block;

    padding: 5px 12px;

    margin-bottom: 13px;

    border-radius: 30px;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.5px;

    background:
        rgba(255,255,255,0.07);
}

.question-difficulty.facil {
    color: #79e29b;
}

.question-difficulty.medio {
    color: #ffc56b;
}

.question-difficulty.dificil {
    color: #ff7777;
}


/* PREGUNTA */

.question-number {
    font-size: 12px;

    font-weight: 700;

    letter-spacing: 4px;

    color:
        rgba(255,100,150,0.85);

    margin-bottom: 12px;
}

#question-text {
    font-size:
        clamp(
            20px,
            5vw,
            28px
        );

    line-height: 1.4;

    font-weight: 600;

    margin-bottom: 28px;
}


/* RESPUESTAS */

#answers {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.answer-button {
    width: 100%;

    min-height: 58px;

    padding: 13px 18px;

    border-radius: 15px;

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

    background:
        rgba(255,255,255,0.055);

    color:
        rgba(255,255,255,0.85);

    box-shadow: none;

    font-size: 13px;
    font-weight: 500;

    text-align: left;

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border 0.18s ease;
}

.answer-button:active {
    transform: scale(0.97);
}

.answer-button.correct {
    background:
        rgba(70,210,120,0.18);

    border-color:
        rgba(90,230,140,0.65);

    color:
        #8ff0ad;
}

.answer-button.incorrect {
    background:
        rgba(240,70,80,0.18);

    border-color:
        rgba(255,90,100,0.65);

    color:
        #ff9299;
}

.answer-button.disabled {
    cursor: default;
    opacity: 0.5;
}

.answer-button.correct.disabled {
    opacity: 1;
}


/* RESULTADO RESPUESTA */

#answer-result {
    margin-top: 20px;

    padding:
        15px;

    border-radius: 15px;

    background:
        rgba(255,255,255,0.04);
}

#answer-result-icon {
    font-size: 25px;
    margin-bottom: 5px;
}

#answer-result-text {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
}

#correct-answer-text {
    margin-top: 7px;

    font-size: 11px;

    line-height: 1.6;

    color:
        rgba(255,255,255,0.55);
}


/* SIGUIENTE */

.next-question-button {
    margin-top: 20px;
    width: 100%;
}


/* =========================================
   FOTOS — GALERÍA
========================================= */

.photos-container {
    width: 100%;
    margin: 30px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 28px 18px;
}

.old-photo {
    display: block;
    width: 220px;
    min-width: 0;
    margin: 0;
    padding: 9px 9px 38px;
    background: #ffffff;
    box-sizing: border-box;
    border-radius: 1px;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.35),
        0 2px 5px rgba(0, 0, 0, 0.2);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.old-photo img {
    display: block;
    width: 100%;
    height: 220px;
    margin: 0;
    padding: 0;
    object-fit: cover;
    border: none;
    border-radius: 0;
}

.old-photo:nth-child(1) { transform: rotate(-3deg); }
.old-photo:nth-child(2) { transform: rotate(2deg); }
.old-photo:nth-child(3) { transform: rotate(-1.5deg); }
.old-photo:nth-child(4) { transform: rotate(3deg); }
.old-photo:nth-child(5) { transform: rotate(-2deg); }
.old-photo:nth-child(6) { transform: rotate(1.5deg); }
.old-photo:nth-child(7) { transform: rotate(-2.5deg); }
.old-photo:nth-child(8) { transform: rotate(2.5deg); }
.old-photo:nth-child(9) { transform: rotate(-1deg); }
.old-photo:nth-child(10) { transform: rotate(3deg); }

.old-photo:hover {
    transform: rotate(0deg) scale(1.04);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.45);
    z-index: 5;
}

.gallery-message {
    max-width: 850px;
    margin: 0 auto 28px;
    text-align: center;
}

.gallery-message p {
    margin: 0;
    line-height: 1.7;
}

/* =========================================
   RESULTADO FINAL DEL TEST
========================================= */

#test-result {
    text-align: center;
}

#test-result #score {
    font-size: clamp(52px, 14vw, 82px);
    line-height: 1;
    font-weight: 800;
    margin: 25px 0 10px;
}

#test-result #result-message {
    max-width: 560px;
    margin: 20px auto 28px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
}

/* =========================================
   VALES — TICKETS
========================================= */

#unlocked-rewards {
    width: 100%;
    max-width: 600px;
    margin: 20px auto 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#unlocked-rewards h3 {
    margin: 0 0 2px;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.8);
}

.ticket {
    --ticket-delay: 0ms;
    position: relative;
    display: flex;
    width: 100%;
    min-height: 116px;
    overflow: hidden;
    box-sizing: border-box;
    background: #f7f1e7;
    color: #292129;
    border: 2px dashed rgba(41, 33, 41, 0.25);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    text-align: left;
    animation: ticketIn 0.5s ease both;
    animation-delay: var(--ticket-delay);
}

.ticket::before,
.ticket::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #160a13;
    transform: translateY(-50%);
    z-index: 2;
}

.ticket::before { left: -12px; }
.ticket::after { right: -12px; }

.ticket-left {
    flex: 0 0 92px;
    width: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 2px dashed rgba(41, 33, 41, 0.2);
    background: rgba(217, 72, 112, 0.08);
}

.ticket-icon {
    font-size: 30px;
    line-height: 1;
    margin-bottom: 7px;
}

.ticket-small {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #6b5961;
}

.ticket-main {
    flex: 1;
    min-width: 0;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ticket-main strong {
    display: block;
    margin-bottom: 6px;
    color: #292129;
    font-size: 14px;
    line-height: 1.35;
}

.ticket-main p {
    margin: 0;
    color: #554952;
    font-size: 12px;
    line-height: 1.55;
}

.ticket-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 7px;
    border-top: 1px dashed rgba(41, 33, 41, 0.18);
    color: #806c75;
    font-size: 7px;
    letter-spacing: 1px;
}

.ticket-number {
    flex: 0 0 auto;
    font-weight: 800;
}

/* =========================================
   PISTAS DESBLOQUEADAS
========================================= */

.unlocked-clues {
    width: 100%;
    max-width: 600px;
    margin: 26px auto 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.unlocked-clues h3 {
    margin: 0 0 2px;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.8);
}

.clue-card {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 17px 18px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    text-align: left;
}

.clue-card strong {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
}

.clue-card p {
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
}

/* =========================================
   MENSAJE PARA LA CAPTURA
========================================= */

.screenshot-note {
    max-width: 500px;
    margin: 28px auto 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.58) !important;
}

/* =========================================
   TEST BLOQUEADO
========================================= */

.test-locked {
    padding: 35px 10px;
    text-align: center;
}

.locked-icon {
    margin-bottom: 15px;
    font-size: 52px;
}

.test-locked p {
    max-width: 500px;
    margin: 12px auto;
    font-size: 13px;
    line-height: 1.7;
}

#test-intro button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* =========================================
   ANIMACIONES DE FEEDBACK
========================================= */

@keyframes answerPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.025); }
    100% { transform: scale(1); }
}

.answer-pop {
    animation: answerPop 0.35s ease;
}

@keyframes answerShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.answer-shake {
    animation: answerShake 0.32s ease;
}

@keyframes ticketIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

/* =========================================
   MÓVIL
========================================= */

@media (max-width: 600px) {

    .photo-gallery {
        width: 100%;
        box-sizing: border-box;
    }

    .photos-container {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 7px;
        width: 100%;
        margin: 25px 0;
        padding: 0 5px;
        box-sizing: border-box;
    }

    .old-photo {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 5px 5px 16px;
        box-sizing: border-box;
    }

    .old-photo img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
}

@media (max-width: 500px) {

    .ticket {
        min-height: 110px;
    }

    .ticket-left {
        flex-basis: 74px;
        width: 74px;
    }

    .ticket-main {
        padding: 14px 13px;
    }

    .ticket-main strong {
        font-size: 11px;
    }

    .ticket-main p {
        font-size: 10px;
    }

    .ticket-icon {
        font-size: 24px;
    }

    .ticket-small {
        font-size: 7px;
    }

    .ticket-footer {
        font-size: 6px;
        gap: 6px;
    }

    .clue-card {
        padding: 14px;
        gap: 11px;
    }

    .screenshot-note {
        font-size: 11px !important;
    }
}