/* =========================================================================
   vv-tour.css · Recorrido de bienvenida (03-10-2026) · pareja de vv-tour.js
   Plan de fuga y Buscador. Foco con aro naranja sobre el elemento real y tarjeta
   con la piel de la casa; en el móvil, hoja inferior (regla 6).
   z-index: por encima de las pantallas completas (#pf-scr, .va-scr: 2147483000)
   y por debajo de los avisos y del menú del carrito.
   Las dos mitades (este .css y el .js) se suben JUNTAS.
   ========================================================================= */

.vvt { position: fixed; inset: 0; z-index: 2147483500; pointer-events: none; }
.vvt[hidden] { display: none !important; }

/* El carrito (#vv-cart, 2147483646) va por encima de todo: durante el recorrido baja por
   debajo del velo para que se oscurezca como el resto (el foco lo sigue señalando). */
html.vvt-on #vv-cart { z-index: 2147483400 !important; }

/* El velo atrapa los clics: durante el recorrido la página se mira, no se toca */
.vvt__veil { position: absolute; inset: 0; pointer-events: auto; background: transparent; }
.vvt.is-free .vvt__veil { background: rgba(6, 8, 11, 0.74); }

/* El foco: un hueco con el resto de la página oscurecida a su alrededor */
.vvt__spot {
    position: absolute; top: 0; left: 0; width: 0; height: 0;
    border-radius: 14px;
    box-shadow: 0 0 0 2px var(--color-primary, #FF5E14), 0 0 22px 4px rgba(255, 94, 20, 0.45), 0 0 0 200vmax rgba(6, 8, 11, 0.74);
    transition: transform 0.25s ease, width 0.25s ease, height 0.25s ease;
    animation: vvt-pulso 2.2s ease-in-out infinite;
}
.vvt.is-free .vvt__spot { display: none; }
@keyframes vvt-pulso {
    0%, 100% { box-shadow: 0 0 0 2px var(--color-primary, #FF5E14), 0 0 22px 4px rgba(255, 94, 20, 0.45), 0 0 0 200vmax rgba(6, 8, 11, 0.74); }
    50%      { box-shadow: 0 0 0 3px var(--color-primary, #FF5E14), 0 0 34px 8px rgba(255, 94, 20, 0.25), 0 0 0 200vmax rgba(6, 8, 11, 0.74); }
}

/* La tarjeta */
.vvt__card {
    position: fixed; top: 0; left: 0;
    width: min(380px, calc(100vw - 24px));
    pointer-events: auto;
    padding: 20px 20px 16px;
    background: var(--color-surface, #262C33);
    color: var(--color-text-primary, #F0F2F5);
    border: 1px solid var(--color-border, #343B42);
    border-top: 3px solid var(--color-primary, #FF5E14);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    opacity: 0; transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, top 0.22s ease, left 0.22s ease;
}
.vvt.is-ready .vvt__card { opacity: 1; transform: none; }

.vvt__kicker {
    display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
    font-family: var(--font-tactical, 'Orbitron', sans-serif);
    font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--color-primary, #FF5E14);
}
.vvt__title {
    margin: 0 0 8px;
    font-family: var(--font-subheading, 'Montserrat', sans-serif);
    font-weight: 800; font-size: 1.12rem; line-height: 1.25;
    color: var(--color-text-primary, #F0F2F5);
}
.vvt__text {
    margin: 0; font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.92rem; line-height: 1.55;
    color: var(--color-text-secondary, #9DA7B0);
}
.vvt__text i { color: var(--color-primary, #FF5E14); }

.vvt__foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.vvt__dots { display: flex; gap: 5px; margin: 0 auto 0 0; padding: 0; list-style: none; }
.vvt__dots li { width: 6px; height: 6px; border-radius: 99px; background: var(--color-border, #343B42); transition: width 0.2s ease, background 0.2s ease; }
.vvt__dots li.is-done { background: rgba(255, 94, 20, 0.45); }
.vvt__dots li.is-on { width: 18px; background: var(--color-primary, #FF5E14); }

.vvt__skip {
    min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
    font: 600 0.82rem var(--font-body, 'Inter', sans-serif);
    color: var(--color-text-secondary, #9DA7B0);
}
.vvt__skip:hover, .vvt__skip:focus-visible { color: var(--color-text-primary, #F0F2F5); text-decoration: underline; }
.vvt__prev { min-width: 40px; min-height: 40px; padding: 0 12px; }
.vvt__next { min-height: 40px; white-space: nowrap; }
.vvt__card button:focus-visible { outline: 2px solid var(--color-primary, #FF5E14); outline-offset: 2px; }
.vvt__card [hidden] { display: none !important; }

/* Tema claro: el velo se suaviza y el naranja como TEXTO se oscurece (AA, producto §5).
   Va aquí y no en el bloque de vv-ui.css para que la pieza viaje entera en dos archivos. */
body.light-theme .vvt__kicker,
body.light-theme .vvt__text i { color: #B53A09; }
body.light-theme .vvt__card { box-shadow: 0 18px 50px rgba(15, 20, 25, 0.28); }

/* ---------- Móvil: hoja inferior de app ---------- */
@media (max-width: 1023px) {
    .vvt__card {
        top: auto !important; left: 12px !important; right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-height: 46vh; overflow-y: auto;
        padding: 18px 18px 14px;
        border-radius: 22px;
        transform: translateY(16px);
    }
    .vvt__card.is-top { bottom: auto; top: calc(12px + env(safe-area-inset-top, 0px)) !important; transform: translateY(-16px); }
    .vvt.is-ready .vvt__card { transform: none; }
    .vvt__skip, .vvt__prev, .vvt__next { min-height: 44px; }
    .vvt__prev { min-width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .vvt__spot { animation: none; transition: none; }
    .vvt__card, .vvt__dots li { transition: none; transform: none !important; }
}

/* Botones para repetir el recorrido (plan: manual de campo; buscador: cabecera) */
.vvt-replay { margin: 14px 0 0; }