:root {
    --azul-50: #eef8fe;
    --azul-100: #d6eefb;
    --azul-200: #b6e0f7;
    --azul-300: #6ecdf5;
    --azul-400: #35a6e0;
    --azul-500: #118fce;
    --azul-600: #0d7ab0;
    --azul-700: #0a5f8c;

    --tinta-900: #0f2430;
    --tinta-700: #33454f;
    --tinta-600: #5b6b74;
    --tinta-400: #93a2ab;

    --blanco: #ffffff;
    --borde: #e3edf3;
    --borde-fuerte: #cfe0ea;

    --verde-wsp: #25d366;
    --verde-wsp-oscuro: #1ebe5b;

    --radio-sm: 12px;
    --radio: 16px;
    --radio-lg: 24px;
    --radio-pill: 999px;

    --sombra-card: 0 30px 60px -24px rgba(8, 60, 92, 0.55), 0 2px 8px rgba(8, 60, 92, 0.08);
    --sombra-btn: 0 10px 22px -10px rgba(17, 143, 206, 0.65);
    --sombra-wsp: 0 10px 22px -10px rgba(30, 190, 91, 0.7);

    --fuente: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --transicion: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: clamp(16px, 4vw, 40px);
    font-family: var(--fuente);
    color: var(--tinta-700);
    background-color: var(--azul-500);
    background-image:
        radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.3), transparent 45%),
        radial-gradient(circle at 88% 96%, rgba(8, 64, 96, 0.42), transparent 52%),
        linear-gradient(135deg, #6ecdf5 0%, #35a6e0 48%, #118fce 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.contenedor-encuesta {
    position: relative;
    margin: auto;
    width: min(100%, 520px);
    overflow: hidden;
    padding: clamp(24px, 5vw, 44px);
    background: var(--blanco);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-card);
    text-align: center;
}

.contenedor-encuesta::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--azul-300), var(--azul-500), var(--azul-700));
}

h1,
h2,
p {
    margin: 0;
}

.contenedor-encuesta h1 {
    font-size: clamp(1.35rem, 1.05rem + 1.5vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--tinta-900);
}

.contenedor-encuesta h2 {
    margin-bottom: clamp(18px, 4vw, 28px);
    font-size: clamp(1.15rem, 1rem + 0.9vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--tinta-900);
}

.contenedor-encuesta p {
    font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
    line-height: 1.6;
    color: var(--tinta-600);
}

#paso1 > p {
    margin: 10px 0 clamp(20px, 4vw, 28px);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--tinta-400);
}

.pantalla {
    display: none;
}

.pantalla.active {
    display: block;
    animation: pantallaEntra 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pantallaEntra {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#preguntas.active > h2,
#preguntas.active > .opciones,
#preguntas.active > .acciones {
    animation: pantallaEntra 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.opciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

#paso1 .opciones button {
    position: relative;
    width: 100%;
    padding: 15px 46px 15px 18px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--tinta-900);
    text-align: left;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: var(--transicion);
}

#paso1 .opciones button::after {
    content: "\203A";
    position: absolute;
    top: 50%;
    right: 18px;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--azul-300);
    transform: translateY(-50%);
    transition: var(--transicion);
}

#paso1 .opciones button:hover {
    color: var(--azul-700);
    background: var(--azul-50);
    border-color: var(--azul-500);
    box-shadow: 0 8px 18px -12px rgba(17, 143, 206, 0.8);
    transform: translateX(3px);
}

#paso1 .opciones button:hover::after {
    right: 14px;
    color: var(--azul-500);
}

#paso1 .opciones button:active {
    transform: translateX(3px) scale(0.99);
}

#preguntas > .opciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}

#preguntas > .opciones button {
    width: 100%;
    padding: 16px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--blanco);
    background: linear-gradient(135deg, var(--azul-400), var(--azul-500));
    border: 1px solid transparent;
    border-radius: var(--radio);
    box-shadow: var(--sombra-btn);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: var(--transicion);
}

#preguntas > .opciones button:last-child {
    color: var(--azul-700);
    background: var(--blanco);
    border-color: var(--borde-fuerte);
    box-shadow: none;
}

#preguntas > .opciones button:hover {
    transform: translateY(-2px);
}

#preguntas > .opciones button:last-child:hover {
    background: var(--azul-50);
    border-color: var(--azul-500);
}

#preguntas > .opciones button:active {
    transform: translateY(0) scale(0.99);
}

.acciones {
    display: flex;
    justify-content: flex-start;
    margin-top: clamp(18px, 4vw, 26px);
}

.btn-volver {
    padding: 9px 16px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--azul-600);
    background: var(--azul-50);
    border: 1px solid var(--azul-100);
    border-radius: var(--radio-pill);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: var(--transicion);
}

.btn-volver:hover {
    color: var(--blanco);
    background: var(--azul-500);
    border-color: var(--azul-500);
}

#diagnostico {
    padding: 14px 16px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--tinta-900);
    background: var(--azul-50);
    border: 1px solid var(--azul-100);
    border-left: 4px solid var(--azul-500);
    border-radius: var(--radio-sm);
}

.codigo {
    margin: 22px 0;
    padding: 18px 16px;
    background: linear-gradient(180deg, #f7fcff, var(--azul-50));
    border: 1px dashed rgba(17, 143, 206, 0.5);
    border-radius: var(--radio);
}

.codigo h1 {
    font-size: clamp(1.5rem, 1.1rem + 2vw, 2.1rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    color: var(--azul-700);
}

.btn-wsp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 22px 0 6px;
    padding: 17px 20px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--blanco);
    text-decoration: none;
    background: linear-gradient(135deg, #2ee27a, var(--verde-wsp-oscuro));
    border-radius: var(--radio);
    box-shadow: var(--sombra-wsp);
    transition: var(--transicion);
}

.btn-wsp:hover {
    transform: translateY(-2px);
    filter: brightness(1.03);
    box-shadow: 0 16px 28px -12px rgba(30, 190, 91, 0.85);
}

.btn-wsp:active {
    transform: translateY(0) scale(0.99);
}

#resultado a:not(.btn-wsp) {
    display: block;
    margin-top: 14px;
    padding: 13px 18px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--azul-700);
    text-align: center;
    text-decoration: none;
    background: var(--blanco);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    transition: var(--transicion);
}

#resultado a:not(.btn-wsp):hover {
    background: var(--azul-50);
    border-color: var(--azul-500);
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(17, 143, 206, 0.45);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    body {
        background-attachment: scroll;
    }
}

@media (max-width: 420px) {
    .contenedor-encuesta {
        border-radius: 20px;
    }

    #paso1 .opciones button {
        padding: 13px 40px 13px 15px;
        font-size: 0.9rem;
    }

    #preguntas > .opciones {
        gap: 10px;
    }
}

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