/*
 * ═══════════════════════════════════════════════════════════════════════════
 * TEST VOCACIONAL — MOVIMIENTO, FOTOS Y FICHAS DE ÁREA (1.1.7)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Archivo propio del test, fuera de la compilación de Vite: sólo lo carga la
 * página del test. Todas las clases llevan el prefijo `vt-` para no chocar con
 * Tailwind. Si el visitante pidió «reducir movimiento» en su equipo, las
 * animaciones se apagan (bloque final).
 */

:root {
    /* Los mismos que el tema del sitio (resources/css/app.css). */
    --vt-green: var(--color-vasco-green, #294b2b);
    --vt-header: var(--color-vasco-header, #192d1a);
    --vt-yellow: var(--color-vasco-yellow, #f7a407);
    --vt-cream: #f4f2e9;
    --vt-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ── ENTRADA DE LA PREGUNTA ──────────────────────────────────────────────── */

.vt-enter {
    animation: vt-rise 560ms var(--vt-ease) both;
}

.vt-option {
    animation: vt-rise 520ms var(--vt-ease) both;
    animation-delay: calc(160ms + var(--i, 0) * 70ms);
}

.vt-question-title {
    animation: vt-rise 520ms var(--vt-ease) 80ms both;
}

/* Al elegir: un pulso en la letra y la palomita que aparece. */
.vocational-option:has(input:checked) .vt-letter {
    animation: vt-pop 360ms var(--vt-ease);
}

.vocational-option:has(input:checked) .vt-check {
    animation: vt-pop 360ms var(--vt-ease) 60ms both;
}

.vocational-option {
    transition: transform 220ms var(--vt-ease), box-shadow 220ms var(--vt-ease), border-color 220ms, background-color 220ms;
}

/* Salida: la tarjeta se va hacia la izquierda mientras carga la siguiente. */
.vt-leaving .vt-card {
    animation: vt-leave 260ms ease-in both;
}

/* La barra de progreso crece desde donde se quedó en la pregunta anterior. */
.vt-progress {
    animation: vt-progress 700ms var(--vt-ease) 120ms both;
}

/* Las columnas no crecen con el tamaño natural de la foto (1672 px): sin
   esto, en el teléfono la tarjeta se salía unos píxeles y aparecía
   desplazamiento horizontal. */
.vt-card {
    grid-template-columns: minmax(0, 1fr);
}

/* ── FOTOS COMPLETAS, SIN RECORTAR ───────────────────────────────────────────
 *
 * Las fotos son escenas horizontales (16:9). En 1.1.6 iban en una columna
 * vertical con `object-cover` y se recortaban los lados: se perdían personas.
 * Ahora la foto se ve ENTERA. En el teléfono el marco tiene la proporción de
 * la foto; en computadora es una banda horizontal arriba y lo que sobra a los
 * lados lo llena la misma foto, ampliada y difuminada.
 */
.vt-photo {
    position: relative;
    overflow: hidden;
    background: var(--vt-header);
    aspect-ratio: 16 / 9;
}

@media (min-width: 1024px) {
    .vt-photo {
        aspect-ratio: auto;
        height: clamp(230px, 36vh, 400px);
    }
}

.vt-photo-bg {
    position: absolute;
    inset: -8%;
    width: 116%;
    height: 116%;
    object-fit: cover;
    filter: blur(26px) saturate(1.15) brightness(.72);
    transform: scale(1.05);
    animation: vt-drift 18s ease-in-out infinite alternate;
}

.vt-photo-main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: vt-photo-in 700ms var(--vt-ease) both;
}

@media (min-width: 1024px) {
    .vt-photo-main {
        inset: 1rem;
        width: calc(100% - 2rem);
        height: calc(100% - 2rem);
        filter: drop-shadow(0 18px 40px rgb(0 0 0 / .35));
    }
}

.vt-photo-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(16 43 34 / .55), transparent 45%);
    pointer-events: none;
}

.vt-photo-tag {
    position: absolute;
    left: .9rem;
    bottom: .9rem;
    z-index: 2;
    max-width: calc(100% - 1.8rem);
    font-size: .62rem !important;
    letter-spacing: .14em !important;
    padding: .4rem .8rem !important;
}

@media (min-width: 640px) {
    .vt-photo-tag {
        left: 1.25rem;
        bottom: 1.25rem;
        font-size: .75rem !important;
        letter-spacing: .18em !important;
        padding: .5rem 1rem !important;
    }
}

/* En computadora: la pregunta a la izquierda y las opciones a la derecha,
   debajo de la foto, para que todo quepa sin desplazarse. */
@media (min-width: 1024px) {
    .vt-text {
        display: grid !important;
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
        column-gap: 3rem;
        align-items: start;
    }

    .vt-answers form[data-vocational-answer] {
        margin-top: 0;
    }
}

/* ── RESULTADO ───────────────────────────────────────────────────────────── */

/* Mismo cuidado que en la pregunta: las columnas no se ensanchan hasta la
   palabra más larga («Gastronomía,» cortaba el texto en teléfonos chicos). */
.vt-hero, .vt-result-grid {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
    .vt-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
    .vt-result-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}

.vt-hero h1 {
    overflow-wrap: break-word;
    hyphens: auto;
}

.vt-hero-img {
    animation: vt-zoom-out 2.4s var(--vt-ease) both;
}

.vt-bar {
    height: .5rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgb(41 75 43 / .12);
}

.vt-bar--light {
    background: rgb(255 255 255 / .2);
}

.vt-bar > span {
    display: block;
    height: 100%;
    width: var(--vt-to, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--vt-green), var(--vt-yellow));
    animation: vt-fill 1100ms var(--vt-ease) 300ms both;
}

.vt-bar--light > span {
    background: var(--vt-yellow);
}

/* ── LA FICHA DE CADA ÁREA ───────────────────────────────────────────────────
 *
 * Era un `<dialog>` sin margen automático: el reinicio de estilos se lo quita,
 * y por eso salía pegado a una esquina. Ahora va centrado en computadora y,
 * en el teléfono, sube desde abajo como una hoja. El contenido se desplaza por
 * dentro; la cabecera y los botones quedan siempre a la vista.
 */
.vt-dialog {
    margin: auto;
    padding: 0;
    border: 0;
    width: min(46rem, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100dvh - 2rem);
    border-radius: 1.75rem;
    background: #fff;
    color: #111;
    box-shadow: 0 30px 100px rgb(0 0 0 / .32);
    overflow: hidden;
}

.vt-dialog[open] {
    display: flex;
    flex-direction: column;
    animation: vt-dialog-in 420ms var(--vt-ease) both;
}

.vt-dialog.vt-closing {
    animation: vt-dialog-out 220ms ease-in both;
}

.vt-dialog::backdrop {
    background: rgb(8 27 16 / .72);
    backdrop-filter: blur(6px);
    animation: vt-fade 300ms ease both;
}

.vt-dialog.vt-closing::backdrop {
    animation: vt-fade 220ms ease reverse both;
}

@media (max-width: 639px) {
    .vt-dialog {
        width: 100vw;
        max-height: 92dvh;
        margin: auto 0 0;
        border-radius: 1.75rem 1.75rem 0 0;
    }

    .vt-dialog[open] {
        animation: vt-sheet-in 420ms var(--vt-ease) both;
    }

    .vt-dialog.vt-closing {
        animation: vt-sheet-out 240ms ease-in both;
    }
}

.vt-dialog-head {
    position: relative;
    flex: none;
    padding: 1.75rem 1.75rem 1.5rem;
    color: #fff;
    background:
        radial-gradient(circle at 88% 12%, rgb(247 164 7 / .26), transparent 38%),
        linear-gradient(145deg, #294b2b, #192d1a 75%);
}

@media (min-width: 640px) {
    .vt-dialog-head { padding: 2.25rem 2.5rem 1.75rem; }
}

/* En el teléfono, cabecera y botones más compactos: que el contenido —las
   carreras y dónde trabajar— tenga el espacio. */
@media (max-width: 639px) {
    .vt-dialog-head { padding: 1.25rem 1.25rem 1rem; }
    .vt-dialog-head h2 { font-size: 1.35rem; }
    .vt-dialog-head strong { font-size: 1.9rem; }
    .vt-dialog-head p.mt-4 { margin-top: .6rem; font-size: .8rem; line-height: 1.45; }
    .vt-dialog-body { padding: 1.25rem; }
    .vt-dialog-foot { flex-wrap: nowrap; padding: .75rem 1rem; }
    .vt-dialog-foot .vt-btn { flex: 1 1 0; padding: 0 .75rem; font-size: .8rem; }
}

.vt-dialog-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.5rem 1.75rem 1.75rem;
}

@media (min-width: 640px) {
    .vt-dialog-body { padding: 2rem 2.5rem 2.25rem; }
}

.vt-dialog-foot {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
    padding: 1rem 1.75rem;
    border-top: 1px solid rgb(41 75 43 / .12);
    background: #f8f9f4;
}

.vt-section + .vt-section {
    margin-top: 1.75rem;
}

.vt-section {
    animation: vt-rise 480ms var(--vt-ease) both;
    animation-delay: calc(140ms + var(--i, 0) * 90ms);
}

.vt-kicker {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--vt-green);
}

.vt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.vt-chip {
    padding: .45rem .9rem;
    border-radius: 999px;
    background: #edf5e9;
    color: var(--vt-header);
    font-size: .85rem;
    font-weight: 700;
}

.vt-list {
    display: grid;
    gap: .5rem;
    margin-top: .75rem;
}

@media (min-width: 640px) {
    .vt-list--2 { grid-template-columns: 1fr 1fr; }
}

.vt-list li {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .75rem .9rem;
    border-radius: .9rem;
    background: var(--vt-cream);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.4;
}

.vt-list li::before {
    content: "";
    flex: none;
    width: .55rem;
    height: .55rem;
    margin-top: .35rem;
    border-radius: 999px;
    background: var(--vt-yellow);
}

.vt-career {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    border: 1px solid rgb(41 75 43 / .15);
    border-radius: 1rem;
    background: #fff;
}

.vt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    padding: 0 1.4rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 800;
    transition: transform 180ms var(--vt-ease), background-color 180ms;
}

.vt-btn:hover { transform: translateY(-1px); }

.vt-btn--primary { background: var(--vt-green); color: #fff; }
.vt-btn--primary:hover { background: var(--vt-header); }
.vt-btn--ghost { border: 1px solid var(--vt-green); color: var(--vt-green); background: #fff; }

.vt-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: rgb(255 255 255 / .14);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    transition: background-color 180ms, transform 180ms var(--vt-ease);
}

.vt-close:hover { background: rgb(255 255 255 / .26); transform: rotate(90deg); }

/* ── LAS ANIMACIONES ─────────────────────────────────────────────────────── */

@keyframes vt-rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

@keyframes vt-pop {
    0% { transform: scale(.6); opacity: .2; }
    60% { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1); }
}

@keyframes vt-leave {
    to { opacity: 0; transform: translateX(-28px); }
}

@keyframes vt-progress {
    from { width: var(--vt-from, 0%); }
    to { width: var(--vt-to, 0%); }
}

@keyframes vt-fill {
    from { width: 0; }
    to { width: var(--vt-to, 0%); }
}

@keyframes vt-photo-in {
    from { opacity: 0; transform: scale(.97); }
    to { opacity: 1; transform: none; }
}

@keyframes vt-drift {
    from { transform: scale(1.05) translate3d(0, 0, 0); }
    to { transform: scale(1.12) translate3d(-2%, -1%, 0); }
}

@keyframes vt-zoom-out {
    from { transform: scale(1.12); }
    to { transform: scale(1); }
}

@keyframes vt-dialog-in {
    from { opacity: 0; transform: translateY(18px) scale(.96); }
    to { opacity: 1; transform: none; }
}

@keyframes vt-dialog-out {
    to { opacity: 0; transform: translateY(12px) scale(.97); }
}

@keyframes vt-sheet-in {
    from { transform: translateY(100%); }
    to { transform: none; }
}

@keyframes vt-sheet-out {
    to { transform: translateY(100%); }
}

@keyframes vt-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── SIN MOVIMIENTO PARA QUIEN LO PIDIÓ ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .vt-enter, .vt-option, .vt-question-title, .vt-progress, .vt-photo-main, .vt-photo-bg,
    .vt-hero-img, .vt-section, .vt-dialog[open], .vt-dialog.vt-closing, .vt-dialog::backdrop,
    .vt-leaving .vt-card, .vt-bar > span,
    .vocational-option:has(input:checked) .vt-letter,
    .vocational-option:has(input:checked) .vt-check {
        animation: none !important;
    }
}