/* ==========================================================================
   NEARVISUAL — APP SHELL
   Capa aditiva sobre style.css. No modifica tokens ni componentes existentes.
   Desktop (>=1024px) → panel con barra lateral + área de trabajo a dos columnas
   Mobile  (<1024px)  → una sola columna con barra de secciones arriba
   ========================================================================== */

:root {
    --nv-side-w: 260px;
    /* Alto de la cabecera. De él sale también el alto de la cabecera de marca
       de la barra lateral, para que las dos líneas divisorias caigan a la
       misma altura. Si se toca uno, el otro se ajusta solo. */
    --nv-top-h: 78px;
    /* Separación de la tarjeta lateral respecto a los bordes de la ventana */
    --nv-side-m: 14px;
    /* Cuánto se retiran las líneas divisorias de los cantos de su caja */
    --nv-linea-in: 14px;
    --nv-nav-h: 62px;
    --nv-radius: 22px;
    --nv-radius-sm: 14px;
    --nv-line: rgba(255, 255, 255, 0.11);
    --nv-line-cyan: rgba(255, 255, 255, 0.22);
    --nv-surface: linear-gradient(155deg, #1c1d1f, #141516);
    --nv-surface-flat: #161718;
    /* Superficies «fantasma» (pasos, acordeón, filas de contacto…). Opacas del
       todo: nada del contenido puede dejar ver la imagen de fondo. */
    --nv-surface-soft: #121314;
    /* Opacidad de la imagen de fondo de las secciones. Un solo sitio donde
       tocarla: más bajo = las flores se notan menos y el texto respira más. */
    --nv-bg-op: 0.14;
    /* Sombra de todo el texto que va suelto sobre el fondo. Lo despega sin
       tapar la imagen, que es lo que hacían las pastillas. */
    --nv-text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.9);
    --nv-text-dim: rgba(247, 248, 248, 0.56);
    --nv-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --nv-spring: cubic-bezier(0.22, 1, 0.36, 1);

    /* ── Tinta ────────────────────────────────────────────────────────────────
       Escala de texto por fuerza, de la más marcada a la más apagada. Antes
       cada regla escribía su rgba(255,255,255,·) a mano y por eso no se podía
       cambiar de tema: con el fondo claro quedaba blanco sobre blanco. Ahora un
       tema redefine estos seis y todo el texto le sigue.
       Se pueden redefinir también en un contenedor —así funciona el tema de
       paneles claros: tinta oscura solo dentro de las tarjetas—. */
    --nv-ink: #f7f8f8;
    --nv-ink-90: rgba(247, 248, 248, 0.9);
    --nv-ink-75: rgba(247, 248, 248, 0.75);
    --nv-ink-60: rgba(247, 248, 248, 0.6);
    --nv-ink-45: rgba(247, 248, 248, 0.46);
    --nv-ink-30: rgba(247, 248, 248, 0.32);

    /* Barras translúcidas (superior, lateral, pastillas de móvil) */
    --nv-bar: rgba(38, 39, 41, 0.86);
    --nv-side-bg: linear-gradient(180deg, #171819 0%, #0e0f10 100%);
    --nv-nav-bg: rgba(34, 35, 37, 0.95);

    /* ── Resplandor de los contenedores ───────────────────────────────────────
       Un halo del color de acento alrededor de cada tarjeta, barra y pastilla.
       Es lo que las despega del fondo sin subirles el brillo ni ponerles borde
       grueso. Solo va en el contenedor exterior: repetirlo en las piezas de
       dentro emborrona el conjunto. */
    --nv-glow: rgba(255, 255, 255, 0.14);
    --nv-glow-strong: rgba(255, 255, 255, 0.26);

    /* Tintes de acento: los fondos suaves de iconos, chips y estados. Iban con
       el cian escrito a mano y en el tema de blanco y negro salían turquesa
       sobre una interfaz que no tiene color. */
    --nv-tinte-1: rgba(255, 255, 255, 0.06);
    --nv-tinte-2: rgba(255, 255, 255, 0.11);
    --nv-tinte-3: rgba(255, 255, 255, 0.2);
    --nv-halo: rgba(255, 255, 255, 0.22);
    --nv-halo-fuerte: rgba(255, 255, 255, 0.36);

    /* Fondos y texto del tema base, que style.css declara con otros valores.
       Se repiten aquí porque app.css carga después y es donde vive el tema. */
    --bg-main: #0c0d0e;
    --bg-secondary: #121314;
    --bg-card: #17181a;
    --text-primary: #f7f8f8;
    --text-secondary: rgba(247, 248, 248, 0.66);
    --clay-surface-start: #1c1d1f;
    --clay-surface-end: #141516;
    --clay-shadow-light: rgba(255, 255, 255, 0.05);
    --clay-inner-glow: rgba(255, 255, 255, 0.07);
}

/* ==========================================================================
   1. ESQUELETO
   ========================================================================== */
/* touch-action se resuelve intersectando el valor del elemento tocado con el de
   TODOS sus ancestros, así que para matar el doble-toque en toda la app hay que
   declararlo también en html y en los contenedores intermedios: sólo en body no
   basta cuando el gesto empieza dentro de un carril con scroll propio. */
html:has(body.nv-app) { touch-action: manipulation; }

body.nv-app {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    /* Sin doble-toque para hacer zoom: arruina la navegación por pastillas */
    touch-action: manipulation;
}

.nv-shell, .nv-main, .nv-viewport, .nv-view { touch-action: manipulation; }

.nv-shell {
    display: flex;
    height: 100vh;
    height: 100dvh;
    width: 100%;
}

.nv-main {
    flex: 1;
    min-width: 0;
    /* min-height:0 es obligatorio: sin él, un hijo con scroll dentro de un
       contenedor flex nunca puede encogerse y el área deja de desplazarse. */
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    /* El fondo desenfocado sobresale 24px por cada lado (ver abajo) y, sin
       recorte, ese sobrante ensancha el documento. En móvil no hace falta:
       allí el fondo es fixed y los elementos fijos no cuentan para el scroll. */
    overflow: clip;
}

/* Fondo de las secciones. Va aquí y no en cada .nv-view a propósito: la vista
   activa lleva una animación con transform, y un transform convierte al
   elemento en bloque contenedor de sus hijos fijos — el fondo se estiraría a
   toda la altura desplazable y las flores se saldrían de cuadro.
   .nv-main mide exactamente el alto visible, así que inset:0 encuadra bien. */
.nv-main::before {
    content: '';
    position: absolute;
    /* Negativo, no 0: el desenfoque muestrea fuera del elemento y dejaría los
       cuatro bordes degradados a transparente. Sobresaliendo, el difuminado
       cae fuera de la zona visible. */
    inset: -24px;
    z-index: 0;
    pointer-events: none;
    opacity: var(--nv-bg-op);
    filter: blur(3px);
    background: url('img/fondo-horizontal.webp') center / cover no-repeat;
}

/* El contenido va por encima del fondo */
.nv-topbar, .nv-viewport, .nv-mob-head { z-index: 1; }

/* El texto que va suelto sobre el fondo (rótulos, titulares, entradillas) cae
   a veces justo encima de las flores, que son lo más claro de la imagen. Una
   sombra corta lo despega sin tapar el ornamento. */
.nv-block-title,
.nv-pane-kicker,
.nv-view h2,
.nv-view h3,
.nv-lead,
.nv-eyebrow,
.nv-shots figcaption,
.nv-view-foot,
.nv-inline-note,
.nv-foot-copy {
    text-shadow: var(--nv-text-shadow);
}

.nv-viewport {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* clip y no hidden: con hidden el contenedor sigue siendo desplazable por
       código (scrollIntoView de una pastilla, el foco de un campo) y el panel
       se corre de lado sin que nadie lo haya arrastrado. clip lo impide. */
    overflow-x: clip;
    overscroll-behavior: contain;
    position: relative;
}

.nv-viewport::-webkit-scrollbar,
.nv-side-nav::-webkit-scrollbar { width: 10px; }
.nv-viewport::-webkit-scrollbar-track,
.nv-side-nav::-webkit-scrollbar-track { background: transparent; }
.nv-viewport::-webkit-scrollbar-thumb,
.nv-side-nav::-webkit-scrollbar-thumb {
    background: var(--nv-tinte-3);
    border-radius: 99px;
    border: 3px solid transparent;
    background-clip: content-box;
}

/* ==========================================================================
   2. BARRA LATERAL (escritorio)
   ========================================================================== */
/* La barra lateral es una tarjeta flotante, no un panel pegado al borde: se
   separa de los cantos y se redondea, igual que el resto de superficies del
   sitio. Lo único que cambia es la forma; dentro va todo igual.
   overflow:hidden para que la cabecera de marca y el resaltado del elemento
   activo respeten las esquinas. */
.nv-side {
    width: var(--nv-side-w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--nv-side-bg);
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius);
    /* Margen por los cuatro lados: sin el de la derecha, la tarjeta quedaba
       pegada al contenido y la línea de la cabecera moría contra ella. */
    margin: var(--nv-side-m);
    height: calc(100dvh - var(--nv-side-m) * 2);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), -2px -2px 18px var(--nv-glow);
    z-index: 30;
}

/* [isotipo][palabra], en fila. La palabra se encoge para dejarle sitio al
   isotipo sin que la barra crezca. */
.nv-side-brand {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 12px;
    /* margen de la tarjeta + su borde superior: lo que hay por encima de esta
       caja. Restándolo, su borde inferior cae exactamente en --nv-top-h, que
       es donde está la línea de la cabecera. */
    height: calc(var(--nv-top-h) - var(--nv-side-m) - 1px);
    flex-shrink: 0;
}
/* La línea, retirada de los cantos: pegada a los bordes de la tarjeta parecía
   un corte y no una separación. */
.nv-side-brand::after {
    content: '';
    position: absolute;
    left: var(--nv-linea-in);
    right: var(--nv-linea-in);
    bottom: 0;
    height: 1px;
    background: var(--nv-line);
}

.nv-brand-mark {
    display: block;
    width: 30px;
    height: auto;
    flex-shrink: 0;
    filter: drop-shadow(0 0 10px var(--nv-halo));
}

.nv-brand-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }

/* El logotipo, como imagen. Ocupa el ancho útil de la barra y la altura la
   pone la propia proporción del archivo (720 × 107 → 6.73:1). */
.nv-brand-logo {
    display: block;
    width: 100%;
    /* 168, no 210: los 30px del isotipo y su hueco salen de aquí. */
    max-width: 168px;
    height: auto;
    filter: drop-shadow(0 0 12px var(--nv-tinte-3));
}

/* .nv-brand-role eliminado: la bajada «Diseño · Web · Video» sale de la barra
   lateral y con ella su regla. */

.nv-side-nav {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px 8px;
}

.nv-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    text-align: left;
    padding: 11px 12px;
    margin-bottom: 3px;
    border-radius: var(--nv-radius-sm);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--nv-ink-75);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 500;
    position: relative;
    transition: background 0.2s var(--nv-ease), color 0.2s var(--nv-ease), transform 0.2s var(--nv-ease);
}

.nv-nav-item i {
    width: 18px;
    font-size: 0.95rem;
    text-align: center;
    color: var(--nv-ink-45);
    transition: color 0.2s var(--nv-ease);
}

.nv-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--nv-ink);
    transform: translateX(2px);
}
.nv-nav-item:hover i { color: var(--nv-ink-75); }

.nv-nav-item.active {
    background: var(--nv-tinte-2);
    color: var(--cyan-accent);
    font-weight: 600;
}
.nv-nav-item.active i { color: var(--cyan-accent); }
.nv-nav-item.active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--cyan-accent);
    box-shadow: 0 0 12px var(--cyan-accent);
}

.nv-side-foot {
    position: relative;
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.nv-side-foot::before {
    content: '';
    position: absolute;
    left: var(--nv-linea-in);
    right: var(--nv-linea-in);
    top: 0;
    height: 1px;
    background: var(--nv-line);
}

/* .nv-side-extras / .nv-extras-title / .nv-side-facts eliminados: «Siempre
   incluido» se mudó a la portada (.nv-hero-facts), debajo del logo. */

.nv-side-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px;
    border-radius: var(--nv-radius-sm);
    background: var(--cyan-accent);
    color: var(--bg-main);
    font-weight: 700;
    font-size: 0.87rem;
    box-shadow: 0 6px 18px var(--nv-halo);
    transition: transform 0.25s var(--nv-spring), box-shadow 0.25s var(--nv-ease);
}
.nv-side-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px var(--nv-halo-fuerte); }

/* ==========================================================================
   3. TOPBAR (escritorio)
   ========================================================================== */
/* ÚNICA excepción a «nada translúcido»: esta barra y su equivalente en móvil
   (.nv-topnav) flotan sobre el contenido y se quedan como están a propósito. */
/* Sin fondo propio: con la barra lateral ya convertida en tarjeta, una franja
   de otro color arriba partía la pantalla en tres bloques distintos. Queda
   sólo una línea fina que marca dónde acaba la cabecera y empieza la sección. */
.nv-topbar {
    position: relative;
    height: var(--nv-top-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 32px;
    background: none;
    z-index: 20;
}
/* Empieza y acaba donde el contenido, no en los cantos de la ventana: así la
   línea queda alineada con «Inicio» y con el botón, y no muere contra la
   tarjeta lateral. */
.nv-topbar::after {
    content: '';
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.16);
}

.nv-topbar-title { min-width: 0; }
.nv-topbar-title h1 {
    text-shadow: var(--nv-text-shadow);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nv-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.nv-tbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 99px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--nv-line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-body);
    transition: all 0.22s var(--nv-ease);
}
.nv-tbtn:hover { color: var(--nv-ink); border-color: var(--nv-line-cyan); background: var(--nv-tinte-2); }
.nv-tbtn-primary {
    background: var(--cyan-accent);
    color: var(--bg-main);
    border-color: transparent;
    box-shadow: 0 4px 14px var(--nv-tinte-3);
}
.nv-tbtn-primary:hover { background: var(--cyan-glow); color: var(--bg-main); }

.nv-back {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--nv-line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.22s var(--nv-ease);
}
.nv-back:hover { color: var(--cyan-accent); border-color: var(--nv-line-cyan); }
.nv-shell.has-back .nv-back { display: inline-flex; }

/* ==========================================================================
   4. VISTAS
   ========================================================================== */
.nv-view {
    display: none;
    padding: 30px 32px 70px;
    max-width: 1320px;
    width: 100%;
}
.nv-view.active {
    display: block;
    animation: nv-view-in 0.4s var(--nv-ease) both;
}

@keyframes nv-view-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.nv-view-head { margin-bottom: 24px; }

.nv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cyan-accent);
    margin-bottom: 12px;
}

.nv-view h2 {
    font-size: clamp(1.55rem, 2.6vw, 2.1rem);
    margin-bottom: 12px;
    line-height: 1.15;
}

.nv-lead {
    font-size: 1.02rem;
    color: var(--nv-ink-90);
    max-width: 62ch;
    line-height: 1.65;
}

.nv-view h3 { font-size: 1.2rem; margin-bottom: 10px; }

.nv-block { margin-top: 38px; }
.nv-block-title {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--nv-ink);
    text-shadow: var(--nv-text-shadow);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.nv-block-title::after { content: ''; flex: 1; height: 1px; background: var(--nv-line); }

/* En la portada de escritorio los rótulos van sin la línea: con el fondo
   detrás, la raya cruzaba la imagen y ensuciaba la composición. Al quitarla el
   rótulo queda suelto sobre las flores, que son lo más claro de la imagen, así
   que se le pone su propia pastilla oscura y se ajusta a su texto. */
@media (min-width: 1024px) {
    #v-inicio .nv-block-title::after { display: none; }
}

/* ==========================================================================
   5. PORTADA
   ========================================================================== */
/* Portada a dos columnas.
   Izquierda: el logo pegado al margen del contenido —el mismo que «Dime qué
   necesitas» y las tarjetas—, con los extras debajo. La columna mide lo que
   mide el logo (auto), ni un píxel más.
   Derecha: los accesos por disciplina, que es lo que ocupa el hueco que antes
   quedaba vacío al dejar de centrar el logo. */
.nv-home {
    display: grid;
    grid-template-columns: auto minmax(280px, 1fr);
    /* center, no start: el logo y sus tres ventajas quedan a la misma altura
       que el bloque de accesos de la derecha. Con start el logo se iba arriba
       y las dos columnas no se leían como una sola pieza. */
    align-items: center;
    gap: 30px 48px;
    padding: 18px 0 34px;
}

.nv-home-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
}

/* ── «Siempre incluido», ahora bajo el logo ─────────────────────────────────
   Sólidas, con el mismo fondo y borde que las tarjetas: translúcidas sobre el
   fondo se leían apagadas y no casaban con el resto de la portada. Siguen sin
   ser navegables —son un dato, no un botón—, de ahí el cursor por defecto y
   que no tengan estado :hover. */
.nv-hero-facts {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    cursor: default;
}
.nv-hero-facts li {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 14px 10px 11px;
    border-radius: var(--nv-radius-sm);
    background: var(--nv-surface);
    border: 1px solid var(--nv-line);
}
.nv-hero-facts i {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--nv-tinte-2);
    color: var(--cyan-accent);
    font-size: 0.78rem;
}
.nv-hero-facts span {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    font-size: 0.71rem;
    line-height: 1.3;
    color: var(--text-secondary);
}
.nv-hero-facts b {
    font-family: var(--font-heading);
    font-size: 0.81rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
}

/* ── Accesos por disciplina (columna derecha) ─────────────────────────────── */
.nv-hero-side { min-width: 0; }
.nv-hero-side .nv-block-title { margin-bottom: 12px; }

.nv-hero-svcs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.nv-hero-svc {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 15px;
    text-align: left;
    border-radius: var(--nv-radius-sm);
    background: var(--nv-surface);
    border: 1px solid var(--nv-line);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.24s var(--nv-ease);
}
.nv-hero-svc:hover {
    transform: translateY(-2px);
    border-color: var(--nv-line-cyan);
    background: linear-gradient(155deg, #1f1f1f, #141414);
}
.nv-hero-svc > i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--nv-tinte-2);
    color: var(--cyan-accent);
    font-size: 0.88rem;
}
.nv-hero-svc span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nv-hero-svc b {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
}
.nv-hero-svc small {
    font-size: 0.73rem;
    line-height: 1.35;
    color: var(--nv-text-dim);
}
/* La flecha es <em> con clases de Font Awesome: <i> ya lo usa el icono grande
   de la izquierda y así se distinguen sin un selector frágil por posición. */
.nv-hero-svc em {
    font-size: 0.72rem;
    color: var(--cyan-accent);
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.24s var(--nv-ease);
}
.nv-hero-svc:hover em { opacity: 1; transform: translateX(0); }

.nv-hero-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 2px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--cyan-accent);
    text-shadow: var(--nv-text-shadow);
}
.nv-hero-all i { font-size: 0.72rem; transition: transform 0.24s var(--nv-ease); }
.nv-hero-all:hover i { transform: translateX(4px); }

/* ── Solo escritorio: fuera «Dime qué necesitas» ────────────────────────────
   Las seis puertas repetían lo que ya está al lado del logo (los accesos por
   disciplina) y en la barra lateral (Servicios). En móvil se quedan: allí no
   hay barra lateral a la vista y son la vía principal de entrada. */
@media (min-width: 1024px) {
    .nv-block-doors { display: none; }
}

/* ── Inicio sin foto de fondo ───────────────────────────────────────────────
   Solo esta sección y solo en escritorio: queda el color plano y encima cae la
   sakura. Las demás secciones conservan la imagen tal cual. En móvil no cambia
   nada. Se anima la opacidad para que al entrar y salir de Inicio la foto no
   aparezca de golpe. */
.nv-main::before { transition: opacity 0.45s var(--nv-ease); }

@media (min-width: 1024px) {
    .nv-shell.nv-en-inicio .nv-main::before { opacity: 0; }
}

/* ── Lienzo de la lluvia de sakura ──────────────────────────────────────────
   Detrás del contenido (z-index 0, como el fondo) y sin capturar el ratón.
   Nace invisible: app.js le pone .visible cuando la imagen ya cargó, así no
   hay un parpadeo del lienzo vacío. */
.nv-sakura {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: none;
    opacity: 0;
    transition: opacity 1.1s ease;
}
.nv-sakura.visible { opacity: 1; }

@media (min-width: 1024px) {
    .nv-shell.nv-en-inicio .nv-sakura { display: block; }
}

/* El contenido va por encima del lienzo */
.nv-viewport { z-index: 1; }

/* ── Cuándo caben las dos columnas ──────────────────────────────────────────
   El logo mide 553px exactos y no se puede encoger: es ASCII con celda de 7px.
   El ancho útil es viewport − 260 (barra lateral) − 64 (padding de la vista).
     · 1200px → 876 útiles: 553 + 48 de hueco dejan 275 para la derecha, que da
       para una sola columna de accesos.
     · 1360px → 1036 útiles: quedan 435 y ya entran dos.
   Por debajo de 1200 no caben al lado y el logo se montaba encima del texto,
   así que se apilan como en móvil. */
@media (max-width: 1199px) {
    .nv-home { display: block; }
    .nv-hero-side { margin-top: 26px; }
}

@media (min-width: 1200px) and (max-width: 1359px) {
    .nv-home { gap: 26px 36px; }
    .nv-hero-svcs { grid-template-columns: minmax(0, 1fr); }
}

/* ── Logo ASCII ──────────────────────────────────────────────────────────────
   Medidas reales de Departure Mono (unidades por em = 550):
     · avance por carácter = 350/550 = 0.63636em
     · el glifo de bloque █ va de -150 a 550 → mide 700/550 = 1.27273em de alto
   De ahí salen las dos constantes de abajo. La interlínea TIENE que ser 1.27273:
   con menos, las filas se encabalgan y el logo se ve aplastado («chato»); con
   más, quedan franjas negras entre renglón y renglón.
   text-align:left es obligatorio: la portada centra su texto y el <pre> lo
   heredaría, centrando cada renglón por separado y sacando el logo de eje. */
.nv-hero-ascii {
    position: relative;
    /* 11px es el tamaño más chico en el que la celda cae en píxeles enteros
       (7 × 14). Cualquier otro deja costuras. NEAR (34) + VISUAL (45) = 79
       columnas → 79 × 7 = 553px de ancho, 6 × 14 = 84px de alto.
       Se queda en 11px en cualquier pantalla: el escalón de 22px llegaba a
       1106px de ancho y comía la portada entera. */
    font-size: 11px;
    display: flex;
    /* flex-start, no center: la portada ya no centra el logo, lo alinea al
       margen izquierdo del contenido. */
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0;
    max-width: 100%;
}
.nv-hero-ascii pre {
    font-family: 'Departure Mono', ui-monospace, 'Courier New', monospace;
    font-size: inherit;
    /* 700/550: alto exacto del glifo █. Con menos las filas se encabalgan y el
       logo se ve aplastado; con más quedan franjas entre renglón y renglón. */
    line-height: 1.27273;
    letter-spacing: 0;
    text-align: left;
    white-space: pre;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}
/* ── Reserva por si Departure Mono no carga ──────────────────────────────────
   Sin la fuente real, los bloques salen con el avance de la mono del sistema y
   el logo queda descuadrado (se lee como una tipografía delgada y rota). Es lo
   que pasa, por ejemplo, al abrir el index con doble clic: Chrome bloquea las
   fuentes en file:// y el @font-face falla en silencio.
   app.js marca <html class="nv-nofont"> y aquí se cambia el ASCII por un
   logotipo de texto, que se ve intencionado en vez de averiado.
   Sólo aplica a la portada: la barra lateral ya usa una imagen. */
.nv-ascii-fb { display: none; }
.nv-nofont .nv-ascii-fb { display: block; }
.nv-nofont .nv-hero-ascii { display: none; }

.nv-ascii-fb {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--nv-ink);
    white-space: nowrap;
}
.nv-ascii-fb b { font-weight: 800; color: var(--cyan-accent); }
.nv-ascii-fb-hero {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    letter-spacing: -0.02em;
}

/* NEAR en cian, VISUAL en blanco */
.nv-hero-ascii .nv-ascii-a {
    color: var(--cyan-accent);
    text-shadow: 0 0 18px var(--nv-halo-fuerte);
}
.nv-hero-ascii .nv-ascii-b {
    color: #ffffff;
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.15);
}

/* Accesos: seis tarjetas iguales, 3 por fila — mismo ritmo que «Cómo empezamos» */
.nv-home-doors { min-width: 0; }
.nv-door-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.nv-door-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    height: 100%;
    text-align: left;
    padding: 20px;
    border-radius: var(--nv-radius-sm);
    background: var(--nv-surface);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    font-family: var(--font-body);
    transition: transform 0.24s var(--nv-ease), border-color 0.24s var(--nv-ease), box-shadow 0.24s var(--nv-ease);
}
.nv-door-row:hover {
    transform: translateY(-4px);
    border-color: var(--nv-line-cyan);
    box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.6), -2px -2px 10px var(--nv-tinte-1);
}

.nv-door-row > i {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--nv-tinte-2);
    color: var(--cyan-accent);
    font-size: 1.05rem;
    flex-shrink: 0;
}
.nv-door-row span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nv-door-row b { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--nv-ink); }
.nv-door-row small { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.45; }
/* margin-top:auto alinea el precio abajo en las seis tarjetas, midan lo que midan */
.nv-door-row em {
    margin-top: auto;
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid var(--nv-line);
    font-style: normal;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cyan-accent);
    white-space: nowrap;
}

.nv-door-help {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 14px;
    padding: 14px;
    border-radius: var(--nv-radius-sm);
    border: 1px dashed var(--nv-tinte-3);
    background: var(--nv-surface-soft);
    color: var(--text-secondary);
    font-size: 0.86rem;
    font-weight: 600;
    transition: all 0.22s var(--nv-ease);
}
/* Opaco también al pasar por encima: si el hover sustituye el fondo por uno
   translúcido, la imagen vuelve a asomar justo al apuntar. */
.nv-door-help:hover { color: var(--cyan-accent); border-color: var(--cyan-accent); background: #0e1516; }
.nv-door-help i { color: var(--cyan-accent); }

/* Escritorio angosto: 3 columnas aprietan demasiado; 2×3 sigue siendo parejo */
@media (min-width: 1024px) and (max-width: 1279px) {
    .nv-door-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cómo empezamos */
.nv-start { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.nv-start-step {
    display: grid;
    gap: 6px;
    text-align: left;
    padding: 18px 20px;
    border-radius: var(--nv-radius-sm);
    background: var(--nv-surface-soft);
    border: 1px solid var(--nv-line);
    cursor: pointer;
    font-family: var(--font-body);
    transition: transform 0.24s var(--nv-ease), border-color 0.24s var(--nv-ease);
}
.nv-start-step:hover { transform: translateY(-3px); border-color: var(--nv-line-cyan); }
.nv-start-step b { font-family: var(--font-heading); font-size: 0.98rem; color: var(--nv-ink); }
.nv-start-step small { font-size: 0.83rem; color: var(--text-secondary); line-height: 1.5; }

.nv-route-n {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--nv-tinte-2);
    color: var(--cyan-accent);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

/* ==========================================================================
   6. PASTILLAS Y PANELES A DOS COLUMNAS
   ========================================================================== */
.nv-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 26px;
}

.nv-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border-radius: 99px;
    border: 1px solid var(--nv-line);
    background: var(--nv-surface);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.45);
    transition: transform 0.24s var(--nv-ease), color 0.22s var(--nv-ease),
                border-color 0.22s var(--nv-ease), background 0.22s var(--nv-ease),
                box-shadow 0.24s var(--nv-ease);
}
.nv-pill i { font-size: 0.92rem; color: var(--nv-ink-45); transition: color 0.22s var(--nv-ease); }
.nv-pill:hover { color: var(--nv-ink); border-color: var(--nv-line-cyan); transform: translateY(-2px); }
.nv-pill:hover i { color: var(--cyan-accent); }
.nv-pill.active {
    background: var(--cyan-accent);
    border-color: transparent;
    color: var(--bg-main);
    box-shadow: 0 6px 18px var(--nv-halo);
}
.nv-pill.active i { color: var(--bg-main); }

.nv-pane { display: none; }
.nv-pane.active { display: block; animation: nv-view-in 0.3s var(--nv-ease) both; }

/* Va SIEMPRE fuera de .nv-split: si vive dentro de la columna izquierda,
   empuja esas tarjetas hacia abajo y la ficha de la derecha queda descuadrada. */
.nv-pane-kicker {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--nv-ink);
    text-shadow: var(--nv-text-shadow);
    margin-bottom: 16px;
}

/* Visual a la izquierda, ficha y precios a la derecha */
.nv-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 366px;
    gap: 26px;
    align-items: start;
}
.nv-split-side { position: sticky; top: 0; }

.nv-brief h3 { font-size: 1.15rem; margin-bottom: 8px; }
.nv-brief > p {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 14px;
}
.nv-brief .nv-list { margin-bottom: 16px; }
.nv-brief .nv-list li { padding: 5px 0; font-size: 0.88rem; }
.nv-brief-extra {
    font-size: 0.83rem !important;
    color: var(--nv-text-dim) !important;
    line-height: 1.6;
    margin: 12px 0 16px !important;
}

/* Casos web: tres fichas idénticas apiladas — captura a la izquierda, texto a
   la derecha. Con tres proyectos una rejilla de dos columnas queda coja. */
.nv-caselist { display: grid; gap: 16px; }

.nv-case-row {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    gap: 20px;
    align-items: center;
}
.nv-case-row .nv-browser { margin-bottom: 0; }
.nv-case-row-txt { display: flex; flex-direction: column; min-width: 0; }
.nv-case-row-txt h4 { font-size: 1.08rem; }

/* Express: 9 piezas en 3×3, cada una con su muestra */
.nv-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.nv-svc-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }

.nv-svc-shot {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(160deg, #171717, #0e0e0e);
    border-bottom: 1px solid var(--nv-line);
}
.nv-svc-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.nv-svc-ico {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #0b0d0e;
    border: 1px solid var(--nv-halo);
    color: var(--cyan-accent);
    font-size: 0.9rem;
}

.nv-svc-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.nv-svc-body h4 { font-size: 1rem; margin-bottom: 0; }
/* auto: los precios quedan a la misma altura aunque un título ocupe dos líneas */
.nv-svc-body .nv-card-foot { margin-top: auto; padding-top: 12px; }

/* Tabla de tarifas compacta */
.nv-tarifas {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
    font-size: 0.83rem;
}
.nv-tarifas tr { border-top: 1px solid var(--nv-line); }
.nv-tarifas tr:first-child { border-top: none; }
.nv-tarifas th {
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 8px 0;
}
.nv-tarifas td {
    padding: 8px 0 8px 10px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.nv-tarifas td:first-of-type { color: var(--cyan-accent); font-weight: 700; }
.nv-tarifas td:last-child { color: var(--nv-text-dim); font-size: 0.76rem; width: 1%; }

.nv-inline-note {
    font-size: 0.83rem;
    color: var(--nv-text-dim);
    align-self: center;
    max-width: 42ch;
    line-height: 1.5;
}

.nv-inline-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--cyan-accent);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--nv-halo-fuerte);
}
.nv-inline-link:hover { text-decoration-color: var(--cyan-accent); }

/* ==========================================================================
   7. TARJETAS Y PIEZAS COMUNES
   ========================================================================== */
.nv-card {
    background: var(--nv-surface);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--nv-radius);
    padding: 22px;
    box-shadow: inset 0 1px 1px var(--clay-inner-glow), 6px 6px 18px rgba(0, 0, 0, 0.6), -2px -2px 16px var(--nv-glow);
    transition: transform 0.3s var(--nv-ease), box-shadow 0.3s var(--nv-ease), border-color 0.3s var(--nv-ease);
}
.nv-card-int { cursor: pointer; }
.nv-card-int:hover {
    transform: translateY(-4px);
    border-color: var(--nv-line-cyan);
    box-shadow: inset 0 1px 1px var(--clay-inner-glow), 10px 10px 26px rgba(0, 0, 0, 0.7), -2px -2px 22px var(--nv-glow-strong);
}

.nv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.nv-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.nv-grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Rejilla compacta: icono, título y precio. El pie se empuja abajo para que
   los precios queden a la misma altura aunque un título ocupe dos líneas. */
.nv-grid-compact .nv-card { display: flex; flex-direction: column; padding: 16px; }
.nv-grid-compact .nv-card h4 { font-size: 0.95rem; margin-bottom: 4px; }
.nv-grid-compact .nv-card p:not(.nv-price) { font-size: 0.83rem; }
.nv-grid-compact .nv-card .nv-price { margin-top: 8px; }
.nv-grid-compact .nv-card .nv-card-foot { margin-top: auto; }
.nv-grid-compact .nv-card-ico {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    border-radius: 11px;
    margin-bottom: 12px;
}

.nv-card-ico {
    width: 42px;
    height: 42px;
    border-radius: var(--nv-radius-sm);
    display: grid;
    place-items: center;
    background: var(--nv-tinte-2);
    color: var(--cyan-accent);
    font-size: 1.1rem;
    margin-bottom: 14px;
}

.nv-card h4 { font-size: 1.02rem; margin-bottom: 7px; }
.nv-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; margin-bottom: 0; }

.nv-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--nv-line);
}

.nv-price { font-family: var(--font-heading); font-weight: 700; color: var(--cyan-accent); font-size: 0.92rem; }
.nv-price small {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.71rem;
    color: var(--nv-text-dim);
}

.nv-go {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--cyan-accent);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s var(--nv-ease);
}
.nv-card-int:hover .nv-go, .nv-go:hover { gap: 11px; }

.nv-list { list-style: none; padding: 0; margin: 0; }
.nv-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}
.nv-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--cyan-accent);
    font-size: 0.7rem;
    margin-top: 4px;
    flex-shrink: 0;
}
.nv-list.nv-list-dash li::before { content: '\f0da'; color: var(--nv-halo-fuerte); }

.nv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nv-chip {
    font-size: 0.73rem;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--nv-line);
    color: var(--text-secondary);
    white-space: nowrap;
}
.nv-chip-cyan { background: var(--nv-tinte-2); border-color: var(--nv-line-cyan); color: var(--cyan-accent); }

.nv-note {
    border-left: 2px solid var(--cyan-accent);
    background: #0e1516;
    padding: 15px 18px;
    border-radius: 0 var(--nv-radius-sm) var(--nv-radius-sm) 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-top: 20px;
}
.nv-note strong { color: var(--nv-ink); }

.nv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 99px;
    font-weight: 700;
    font-size: 0.92rem;
    font-family: var(--font-body);
    border: 1px solid var(--nv-line);
    background: var(--nv-surface);
    color: var(--nv-ink);
    cursor: pointer;
    transition: transform 0.26s var(--nv-spring), box-shadow 0.26s var(--nv-ease), background 0.26s var(--nv-ease);
    box-shadow: 5px 5px 14px rgba(0, 0, 0, 0.5);
}
.nv-btn:hover { transform: translateY(-3px); box-shadow: 7px 9px 20px rgba(0, 0, 0, 0.62); }
.nv-btn:active { transform: translateY(1px) scale(0.985); }
.nv-btn-primary {
    background: var(--cyan-accent);
    color: var(--bg-main);
    border-color: transparent;
    box-shadow: 0 8px 22px var(--nv-halo);
}
.nv-btn-primary:hover { background: var(--cyan-glow); box-shadow: 0 12px 30px var(--nv-halo-fuerte); }
.nv-btn-wide { width: 100%; }

.nv-case-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; align-items: center; }

/* ==========================================================================
   8. MARCO DE NAVEGADOR Y MOSAICO
   ========================================================================== */
.nv-browser {
    border-radius: var(--nv-radius-sm);
    overflow: hidden;
    border: 1px solid var(--nv-line);
    background: #0d0d0d;
    margin-bottom: 14px;
}

.nv-browser-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    background: rgba(255, 255, 255, 0.035);
    border-bottom: 1px solid var(--nv-line);
}
.nv-browser-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.nv-browser-url {
    margin-left: 6px;
    font-size: 0.7rem;
    color: var(--nv-text-dim);
    font-family: var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nv-browser-live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cyan-glow);
    white-space: nowrap;
}
.nv-browser-live i { font-size: 0.45rem; animation: nv-pulse 2s ease-in-out infinite; }

@keyframes nv-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* 2:1 = la proporción de las capturas de hero que van dentro del marco.
   Si algún día entra una imagen más alta, cover recorta por abajo. */
.nv-shot {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: top center;
    background: #101010;
}

.nv-shot-fallback {
    aspect-ratio: 2 / 1;
    display: grid;
    place-items: center;
    gap: 8px;
    text-align: center;
    padding: 18px;
    background:
        radial-gradient(120% 90% at 50% 0%, var(--nv-tinte-2), transparent 65%),
        linear-gradient(160deg, #161616, #0d0d0d);
}
.nv-shot-fallback .nv-shot-mark {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--nv-ink-90);
}
.nv-shot-fallback .nv-shot-sub {
    font-size: 0.72rem;
    color: var(--nv-text-dim);
    font-family: var(--font-mono);
}

/* ── Caso: las dos vistas del sitio ──────────────────────────────────────────
   A todo el ancho, la captura 2:1 mide media pantalla de alto y no deja ver
   nada más. Se limita el bloque y se reparte con el marco vertical al lado,
   así entran captura y tarjetas en el mismo golpe de vista. */
.nv-shots {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 216px;
    gap: 26px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}
.nv-shots figure { margin: 0; min-width: 0; }
.nv-shots figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--nv-ink-45);
}
.nv-shots figcaption i { color: var(--cyan-accent); font-size: 0.8rem; }
.nv-shot-desk .nv-browser { margin-bottom: 0; }
.nv-shot-mob { display: flex; flex-direction: column; align-items: center; }

/* Marco de celular. La proporción es la de las capturas reales (1290 de ancho,
   ~2330 de alto → 0.554); con 9/19 el cover recortaba el pie de cada pantalla. */
.nv-phone {
    width: 100%;
    max-width: 216px;
    aspect-ratio: 1290 / 2330;
    padding: 7px;
    border-radius: 30px;
    background: linear-gradient(160deg, #232323, #101010);
    border: 1px solid var(--nv-line);
    box-shadow: 8px 10px 26px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.06);
}
.nv-phone-screen {
    position: relative;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(120% 60% at 50% 0%, var(--nv-tinte-2), transparent 62%),
        linear-gradient(165deg, #171717, #0c0c0c);
}
.nv-phone-screen img {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
/* Sin muesca dibujada: las capturas empiezan en la cabecera del propio sitio,
   así que una muesca falsa taparía su menú en vez de leerse como el marco. */
.nv-phone-keys {
    position: absolute;
    inset: 0;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 22px 14px 22px;
    display: flex;
    flex-direction: column;
    /* Repartidos por toda la pantalla: así el marco no se ve vacío mientras
       no exista la captura vertical. */
    justify-content: space-evenly;
    gap: 8px;
}
.nv-phone-keys li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 9px;
    align-items: center;
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--nv-ink-60);
}
.nv-phone-keys i { color: var(--cyan-accent); font-size: 0.8rem; text-align: center; }

/* ── Caso: tarjetas de beneficio ─────────────────────────────────────────────
   Solo icono y texto corto. No llevan hover ni enlace a propósito: informan,
   no invitan a hacer clic. */
/* Cuatro columnas fijas y no auto-fit: son doce tarjetas, así caen en tres
   filas parejas en vez de dejar una última fila coja. */
.nv-bens {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 1279px) {
    .nv-bens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* El grupo de cuatro (cómo se paga) pasa a 2×2, no a 3+1 */
    .nv-bens-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.nv-ben {
    display: grid;
    grid-template-columns: 38px 1fr;
    grid-template-areas: "ico titulo" "ico texto";
    align-content: center;
    gap: 1px 12px;
    padding: 14px 15px;
    border-radius: var(--nv-radius-sm);
    background: var(--nv-surface-soft);
    border: 1px solid var(--nv-line);
    cursor: default;
}
.nv-ben > i {
    grid-area: ico;
    align-self: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--nv-tinte-2);
    color: var(--cyan-accent);
    font-size: 0.98rem;
}
.nv-ben b {
    grid-area: titulo;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--nv-ink);
    line-height: 1.3;
}
.nv-ben small {
    grid-area: texto;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--nv-text-dim);
}

.nv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
/* Cuatro fijas: con auto-fill la cuarta se cae de fila y el grupo queda 3+1 */
.nv-tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.nv-tile {
    position: relative;
    border-radius: var(--nv-radius-sm);
    overflow: hidden;
    border: 1px solid var(--nv-line);
    background: linear-gradient(160deg, #171717, #0e0e0e);
    aspect-ratio: 4 / 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.3s var(--nv-ease), border-color 0.3s var(--nv-ease);
}
.nv-tile:hover { transform: translateY(-4px); border-color: var(--nv-line-cyan); }
.nv-tile.nv-tile-wide { aspect-ratio: 16 / 9; grid-column: span 2; }
.nv-tile.nv-tile-sq { aspect-ratio: 1 / 1; }

.nv-tile img, .nv-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.nv-tile-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    padding: 14px;
    text-align: center;
    color: var(--nv-ink-30);
}
.nv-tile-empty i { font-size: 1.3rem; color: var(--nv-halo-fuerte); }
.nv-tile-empty span { font-size: 0.7rem; letter-spacing: 0.04em; }

.nv-tile-cap {
    position: relative;
    z-index: 2;
    padding: 11px 13px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88), transparent);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--nv-ink);
    line-height: 1.3;
}
.nv-tile-cap small { display: block; font-weight: 500; font-size: 0.69rem; color: var(--nv-ink-60); }

.nv-format-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.nv-format {
    border: 1px dashed var(--nv-tinte-3);
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--nv-tinte-1);
    color: var(--nv-text-dim);
    font-size: 0.66rem;
    font-family: var(--font-mono);
    text-align: center;
    padding: 6px;
}
.nv-format b { display: block; color: var(--cyan-accent); font-size: 0.76rem; }
.nv-f-916 { width: 72px; height: 128px; }
.nv-f-45 { width: 100px; height: 125px; }
.nv-f-11 { width: 114px; height: 114px; }
.nv-f-169 { width: 182px; height: 102px; }

/* ==========================================================================
   9. PROCESO · PRECIOS · CLASES · ACORDEÓN
   ========================================================================== */
.nv-steps { display: grid; gap: 11px; }
.nv-step {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 15px;
    align-items: start;
    padding: 16px 18px;
    border-radius: var(--nv-radius-sm);
    background: var(--nv-surface-soft);
    border: 1px solid var(--nv-line);
}
.nv-step-n {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--nv-tinte-2);
    color: var(--cyan-accent);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.88rem;
}
.nv-step h4 { font-size: 0.98rem; margin-bottom: 4px; }
.nv-step p { color: var(--text-secondary); font-size: 0.9rem; margin: 0; line-height: 1.55; }
.nv-step-when {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cyan-glow);
    margin-top: 6px;
    display: inline-block;
}

/* Los cuatro planes en 2×2. Con auto-fit caían tres arriba y uno suelto.
   Va dentro de la consulta de escritorio a propósito: en móvil esta misma
   rejilla es un carril horizontal y fijar columnas explícitas lo rompe. */
@media (min-width: 1024px) {
    .nv-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.nv-plan { display: flex; flex-direction: column; }
.nv-plan.featured {
    border-color: var(--nv-line-cyan);
    box-shadow: inset 0 1px 1px var(--clay-inner-glow), 0 0 0 1px var(--nv-tinte-2), 10px 10px 30px rgba(0, 0, 0, 0.65);
}
.nv-plan-tag {
    align-self: flex-start;
    font-size: 0.61rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: 99px;
    background: var(--nv-tinte-2);
    color: var(--cyan-accent);
    margin-bottom: 12px;
}
.nv-plan-price {
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--nv-ink);
    line-height: 1.1;
    margin: 4px 0 2px;
}
.nv-plan-price small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.73rem;
    font-weight: 500;
    color: var(--nv-text-dim);
    margin-top: 4px;
}
/* Qué cubre cada plan, en iconos en vez de un párrafo: el cliente lo lee de un
   vistazo y no hay que redactar la misma lista tres veces. */
.nv-plan-ico {
    list-style: none;
    margin: 14px 0 2px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.nv-plan-ico li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 10px;
    background: var(--nv-tinte-1);
    border: 1px solid var(--nv-tinte-2);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.nv-plan-ico i { color: var(--cyan-accent); font-size: 0.8rem; }

.nv-plan .nv-list { margin: 12px 0 18px; flex: 1; }

.nv-ruta { display: flex; flex-direction: column; }
.nv-ruta-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.nv-ruta-head .nv-card-ico { margin-bottom: 0; flex-shrink: 0; width: 36px; height: 36px; font-size: 0.95rem; }
.nv-ruta-head h4 { font-size: 0.98rem; margin-bottom: 2px; }
.nv-ruta-head small { color: var(--nv-text-dim); font-size: 0.76rem; line-height: 1.4; display: block; }

.nv-course-list { list-style: none; padding: 0; margin: 0; }
.nv-course-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "titulo nivel" "duracion nivel";
    gap: 2px 10px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--nv-line);
}
.nv-course-list li:first-child { border-top: none; }
.nv-course-list b {
    grid-area: titulo;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
}
.nv-course-list small { grid-area: duracion; color: var(--nv-text-dim); font-size: 0.75rem; }
.nv-course-list .nv-chip { grid-area: nivel; font-size: 0.65rem; padding: 4px 9px; }

.nv-acc { display: grid; gap: 9px; }
.nv-acc-item { border-radius: var(--nv-radius-sm); background: var(--nv-surface-soft); border: 1px solid var(--nv-line); overflow: hidden; }
.nv-acc-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--nv-ink);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s var(--nv-ease);
}
.nv-acc-head:hover { color: var(--cyan-accent); }
.nv-acc-head i { color: var(--cyan-accent); font-size: 0.75rem; transition: transform 0.3s var(--nv-ease); flex-shrink: 0; }
.nv-acc-item.open .nv-acc-head i { transform: rotate(180deg); }
.nv-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.34s var(--nv-ease); }
.nv-acc-item.open .nv-acc-body { grid-template-rows: 1fr; }
.nv-acc-body > div { overflow: hidden; }
.nv-acc-body p { padding: 0 18px 16px; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.65; margin: 0; }

/* ==========================================================================
   10. FORMULARIO Y CONTACTO
   ========================================================================== */
.nv-form { display: grid; gap: 13px; }
.nv-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.nv-field { display: flex; flex-direction: column; gap: 6px; }
.nv-field span { font-size: 0.77rem; font-weight: 600; color: var(--text-secondary); }
.nv-field input, .nv-field textarea, .nv-field select {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--nv-line);
    border-radius: 12px;
    padding: 12px 14px;
    color: var(--nv-ink);
    font-family: var(--font-body);
    font-size: 0.93rem;
    outline: none;
    transition: border-color 0.2s var(--nv-ease), box-shadow 0.2s var(--nv-ease);
    width: 100%;
}
.nv-field textarea { resize: vertical; min-height: 92px; }
.nv-field input:focus, .nv-field textarea:focus, .nv-field select:focus {
    border-color: var(--nv-line-cyan);
    box-shadow: 0 0 0 3px var(--nv-tinte-2);
}
.nv-field input::placeholder, .nv-field textarea::placeholder { color: var(--nv-ink-30); }
.nv-field select option { background: #141414; color: var(--nv-ink); }
.nv-form-legal { font-size: 0.75rem; color: var(--nv-text-dim); text-align: center; margin: 0; }

.nv-contact-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 17px;
    border-radius: var(--nv-radius-sm);
    background: var(--nv-surface-soft);
    border: 1px solid var(--nv-line);
    transition: all 0.24s var(--nv-ease);
}
a.nv-contact-row:hover { border-color: var(--nv-line-cyan); transform: translateX(3px); }
.nv-contact-row > i {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--nv-tinte-2);
    color: var(--cyan-accent);
    font-size: 1.02rem;
}
.nv-contact-row div { min-width: 0; }
.nv-contact-row b { display: block; font-size: 0.93rem; }
.nv-contact-row small { color: var(--nv-text-dim); font-size: 0.79rem; }
/* Canales aún sin enlazar. Se apagan bajando el color, no con opacity: la
   opacidad sobre todo el elemento lo vuelve translúcido y dejaba ver el fondo. */
.nv-contact-soon { border-style: dashed; }
.nv-contact-soon > i { background: #1a1a1a; color: var(--nv-ink-30); }
.nv-contact-soon b { color: var(--nv-ink-60); }
.nv-contact-soon small { color: var(--nv-ink-30); }

.nv-view-foot {
    margin-top: 50px;
    padding-top: 22px;
    border-top: 1px solid var(--nv-line);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    align-items: center;
}
.nv-view-foot a { font-size: 0.79rem; color: var(--nv-text-dim); }
.nv-view-foot a:hover { color: var(--cyan-accent); }
.nv-view-foot .nv-foot-copy { width: 100%; font-size: 0.73rem; color: var(--nv-ink-30); margin-top: 4px; }
.nv-social { display: flex; gap: 8px; }
.nv-social a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--nv-surface-flat);
    border: 1px solid var(--nv-line);
    color: var(--text-secondary);
    font-size: 0.82rem;
    transition: all 0.22s var(--nv-ease);
}
.nv-social a:hover { color: var(--cyan-accent); border-color: var(--nv-line-cyan); transform: translateY(-2px); }

/* Siguiente paso */
.nv-next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 48px;
    padding: 20px 24px;
    border-radius: var(--nv-radius);
    background: linear-gradient(120deg, var(--nv-tinte-2), var(--nv-tinte-1)), var(--nv-surface-flat);
    border: 1px solid var(--nv-line-cyan);
}
.nv-next-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nv-next-lbl {
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan-accent);
}
.nv-next-txt b { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; }
.nv-next-txt small { color: var(--text-secondary); font-size: 0.86rem; line-height: 1.5; }
.nv-next .nv-btn { flex-shrink: 0; }

/* ── Pie: solo lo legal ──────────────────────────────────────────────────────
   Los enlaces de sección se quitaron: para navegar ya están la barra lateral en
   escritorio y la de pastillas en móvil, y repetirlos abajo era ruido. Aquí
   queda lo único que sí vive en páginas aparte.
   En móvil se apilan y crecen hasta los 44px de alto táctil recomendado. */
.nv-foot-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    width: 100%;
}
.nv-foot-legal a { font-size: 0.79rem; }

@media (max-width: 640px) {
    .nv-foot-legal {
        gap: 0;
        flex-direction: column;
    }
    .nv-foot-legal a {
        display: block;
        padding: 11px 0;
        border-bottom: 1px solid var(--nv-line);
    }
    .nv-foot-legal a:last-child { border-bottom: none; }
}

/* ── Detalles de un servicio ─────────────────────────────────────────────────
   El segundo botón de la fila de acciones despliega esto. Misma técnica que el
   acordeón: grid-template-rows de 0fr a 1fr, que sí anima sin saber la altura. */
.nv-detail {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.34s var(--nv-ease);
    margin-top: 14px;
}
.nv-detail.open { grid-template-rows: 1fr; }
.nv-detail > div { overflow: hidden; }
.nv-detail-in {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius-sm);
    background: var(--nv-surface-soft);
}
.nv-detail-col h5 {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cyan-accent);
    margin: 0 0 10px;
}
.nv-detail-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.nv-detail-col li {
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-secondary);
    padding-left: 15px;
    position: relative;
}
.nv-detail-col li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cyan-accent);
    opacity: 0.55;
}
.nv-detail-col li b { color: var(--text-primary); font-weight: 600; }
.nv-detail-note {
    grid-column: 1 / -1;
    font-size: 0.78rem;
    color: var(--nv-text-dim);
    border-top: 1px solid var(--nv-line);
    padding-top: 12px;
    margin: 0;
}
.nv-btn[data-detalle] i { transition: transform 0.3s var(--nv-ease); }
.nv-btn[data-detalle].open i { transform: rotate(180deg); }

/* ==========================================================================
   10 bis. PÁGINAS LEGALES
   Privacidad, términos, cookies y exención son las únicas que siguen siendo
   páginas de verdad: son documentos, no secciones, y conviene poder enlazarlas
   e imprimirlas sueltas. Antes traían la cabecera y el pie de un diseño
   anterior y al abrirlas parecía otro sitio. Este bloque las viste con los
   mismos tokens que la app: mismo fondo, mismo pie, mismos enlaces.
   Se activa con body.nv-legal, así que no toca nada de la app.
   ========================================================================== */
body.nv-legal {
    background: var(--bg-main);
    min-height: 100vh;
}

.nv-legal-top {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px clamp(16px, 4vw, 40px);
    background: var(--nv-bar);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--nv-line);
}
.nv-legal-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    flex-shrink: 0;
}
.nv-legal-brand b { color: var(--cyan-accent); font-weight: 800; }
.nv-legal-brand img { display: block; width: 26px; height: 26px; object-fit: contain; }

.nv-legal-nav {
    display: flex;
    gap: 4px;
    margin-left: auto;
    flex-wrap: wrap;
}
.nv-legal-nav a {
    padding: 7px 13px;
    border-radius: 99px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s var(--nv-ease);
}
.nv-legal-nav a:hover { color: var(--cyan-accent); background: var(--nv-tinte-2); }

.nv-legal-cta { flex-shrink: 0; padding: 9px 18px; font-size: 0.85rem; }

.nv-legal-main { padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 40px) 40px; }
.nv-legal-wrap { max-width: 820px; margin: 0 auto; }

.nv-legal-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--nv-text-dim);
    margin-bottom: 14px;
}
.nv-legal-crumb a { color: var(--cyan-accent); text-decoration: none; }
.nv-legal-crumb i { font-size: 0.6rem; opacity: 0.5; }

.nv-legal-wrap h1 {
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 4.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 8px;
}
.nv-legal-updated {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--nv-text-dim);
    margin: 0 0 28px;
}

.nv-legal-body {
    background: var(--nv-surface-flat);
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius);
    padding: clamp(22px, 4vw, 44px);
}
.nv-legal-body h2 {
    font-family: var(--font-heading);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    margin: 34px 0 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--nv-line);
}
.nv-legal-body h2:first-child { margin-top: 0; }
.nv-legal-body p,
.nv-legal-body li {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 14px;
}
.nv-legal-body ul { padding-left: 20px; margin: 0 0 20px; }
.nv-legal-body li { margin-bottom: 9px; }
.nv-legal-body strong { color: var(--text-primary); font-weight: 600; }
.nv-legal-body a { color: var(--cyan-accent); }

/* El pie clonado no tiene el margen superior que le da la vista de la app */
.nv-legal .nv-view-foot { margin-top: 38px; }

@media (max-width: 760px) {
    .nv-legal-top { flex-wrap: wrap; gap: 10px 12px; }
    /* La fila de secciones pasa a segundo renglón y se desplaza en horizontal:
       apilarla empujaría el contenido media pantalla hacia abajo. */
    .nv-legal-nav {
        order: 3;
        width: 100%;
        /* Explícito aunque el overflow-x de abajo ya anula el min-width:auto
           por especificación: si algún día se quita el overflow, sin esto el
           elemento flex no bajaría de la suma de las cinco pastillas y estiraría
           la cabecera, y con ella la página entera. */
        min-width: 0;
        margin-left: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .nv-legal-nav::-webkit-scrollbar { display: none; }
    .nv-legal-nav a { flex-shrink: 0; }
    .nv-legal-cta { margin-left: auto; }
    .nv-legal-cta span { display: none; }
}

/* ==========================================================================
   11. BARRA SUPERIOR DE MÓVIL (header y menú unificados)
   ========================================================================== */
.nv-topnav { display: none; }
.nv-mob-head { display: none; }

@media (max-width: 1023px) {
    /* En móvil se desplaza el documento, no un marco interno */
    html:has(body.nv-app) { overflow-x: clip; }

    body.nv-app {
        overflow-x: clip;
        overflow-y: visible;
        height: auto;
        padding-top: calc(env(safe-area-inset-top, 0px) + var(--nv-nav-h) + 20px);
        padding-bottom: 30px;
    }

    .nv-shell { display: block; height: auto; min-height: 0; }
    .nv-main { display: block; min-height: 0; }

    /* En móvil el documento entero se desplaza y .nv-main mide lo que mida la
       sección: con absolute el fondo se estiraría. Fijo al viewport y con la
       versión vertical, que es la que encuadra en pantalla alta. */
    .nv-main::before {
        position: fixed;
        background-image: url('img/fondo-vertical.webp');
    }
    .nv-viewport { overflow: visible; height: auto; min-height: 0; overscroll-behavior: auto; }
    .nv-side, .nv-topbar { display: none; }
    .nv-desk-only { display: none !important; }

    /* ── La barra de secciones ES el header ── */
    .nv-topnav {
        display: flex;
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        left: 10px;
        right: 10px;
        height: var(--nv-nav-h);
        z-index: 1000;
        padding: 6px;
        gap: 2px;
        border-radius: 20px;
        background: var(--nv-nav-bg);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid var(--nv-tinte-2);
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.72), inset 0 1px 1px rgba(255, 255, 255, 0.05);
        transition: transform 0.34s var(--nv-ease), height 0.34s var(--nv-ease);
        /* Deja de ser una fila fija: ahora es fila + panel plegable, y la
           altura la pone el contenido cuando se abren los ajustes. */
        height: auto;
        min-height: var(--nv-nav-h);
        flex-direction: column;
        overflow: hidden;
    }

    .nv-topnav-fila {
        display: flex;
        gap: 2px;
        width: 100%;
        height: calc(var(--nv-nav-h) - 12px);
        flex-shrink: 0;
    }
    .nv-topnav.hidden { transform: translateY(calc(-100% - 20px)); }

    /* Indicador que se desliza de una sección a otra */
    .nv-topnav-ind {
        position: absolute;
        top: 6px;
        bottom: 6px;
        left: 0;
        width: 0;
        border-radius: 15px;
        background: var(--nv-tinte-2);
        border: 1px solid var(--nv-tinte-3);
        box-shadow: 0 0 18px var(--nv-tinte-2) inset;
        transform: translateX(0);
        transition: transform 0.42s var(--nv-spring), width 0.42s var(--nv-spring), opacity 0.2s ease;
        pointer-events: none;
        z-index: 0;
    }

    .nv-tab {
        position: relative;
        z-index: 1;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--nv-ink-45);
        font-family: var(--font-body);
        font-size: 0.6rem;
        font-weight: 600;
        padding: 4px 2px;
        border-radius: 15px;
        transition: color 0.26s var(--nv-ease);
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        min-width: 0;
    }
    .nv-tab i { font-size: 1.02rem; transition: transform 0.34s var(--nv-spring); }
    .nv-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nv-tab.active { color: var(--cyan-accent); }
    .nv-tab.active i { transform: translateY(-1px) scale(1.08); }
    .nv-tab:active i { transform: scale(0.9); }

    /* La primera pestaña lleva el logo en lugar de icono */
    .nv-tab-brand img {
        width: 20px;
        height: 20px;
        object-fit: contain;
        transition: transform 0.34s var(--nv-spring), filter 0.26s var(--nv-ease);
    }
    .nv-tab-brand.active img {
        transform: translateY(-1px) scale(1.08);
        filter: drop-shadow(0 0 8px var(--nv-halo-fuerte));
    }

    /* Cabecera de detalle: solo aparece dentro de un caso */
    .nv-mob-head {
        display: none;
        align-items: center;
        gap: 10px;
        padding: 4px 18px 10px;
        margin: 0;
    }
    .nv-shell.has-back .nv-mob-head { display: flex; }
    .nv-mob-head h2 {
        font-family: var(--font-heading);
        font-size: 0.95rem;
        font-weight: 700;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .nv-mob-back {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        border-radius: 50%;
        display: grid;
        place-items: center;
        border: 1px solid var(--nv-line);
        background: #171717;
        color: var(--text-secondary);
        cursor: pointer;
    }

    /* ── Piezas en una sola columna ── */
    .nv-view { padding: 14px 16px 28px; }
    .nv-view.active { animation: nv-slide-in 0.32s var(--nv-ease) both; }
    .nv-view.active.from-left { animation-name: nv-slide-in-left; }

    @keyframes nv-slide-in {
        from { opacity: 0; transform: translateX(22px); }
        to { opacity: 1; transform: translateX(0); }
    }
    @keyframes nv-slide-in-left {
        from { opacity: 0; transform: translateX(-22px); }
        to { opacity: 1; transform: translateX(0); }
    }

    /* El apilado lo hace el bloque de max-width:1199px; aquí solo el aire.
       El logo se queda alineado al margen izquierdo, igual que las tarjetas. */
    .nv-home { padding: 6px 0 22px; }

    .nv-hero-facts {
        gap: 10px 18px;
        margin-top: 18px;
    }
    .nv-hero-facts li { grid-template-columns: 28px 1fr; }
    .nv-hero-facts i { width: 28px; height: 28px; }

    .nv-hero-side { margin-top: 26px; }
    /* La flecha del hover no aparece nunca en táctil: fuera, y el ancho que
       ocupaba se lo queda el texto. */
    .nv-hero-svc { grid-template-columns: 34px 1fr; }
    .nv-hero-svc em { display: none; }

    /* Apilado: las dos palabras una encima de otra. En una sola línea harían
       falta 79 columnas (553px) y no caben; apilado la más ancha son 45 →
       45 × 7 = 315px, que entra desde 341px de pantalla. */
    .nv-hero-ascii {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 2px;
        font-size: 11px;
        margin: 0;
    }
    /* Pantallas muy angostas: aquí sí hay que ceder y aceptar la costura,
       antes que dejar el logo cortado. */
    @media (max-width: 344px) {
        .nv-hero-ascii { font-size: calc((100vw - 28px) / 28.64); }
    }


    /* ── Ajustes dentro de la barra (móvil) ──────────────────────────────────
       Pulsar «Ajustes» no lleva a ninguna sección: despliega esta misma barra
       hacia abajo. Mientras está abierta, las tres pestañas de en medio
       desaparecen y los cinco nombres también: quedan sólo la marca y la
       tuerca, que se convierte en una equis para cerrar. Así la barra abierta
       se lee como un panel y no como una navegación a medias. */
    .nv-conf-movil {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.34s var(--nv-ease);
        width: 100%;
    }
    .nv-topnav.conf-abierta .nv-conf-movil { grid-template-rows: 1fr; }
    .nv-conf-movil > div { overflow: hidden; min-height: 0; }

    .nv-topnav.conf-abierta .nv-tab-medio { display: none; }
    .nv-topnav.conf-abierta .nv-tab span { display: none; }
    .nv-topnav.conf-abierta .nv-tab-brand { flex: 0 0 auto; padding-inline: 14px; }
    .nv-topnav.conf-abierta .nv-tab-conf { margin-left: auto; flex: 0 0 auto; padding-inline: 14px; }
    /* La tuerca gira y se convierte en equis */
    .nv-topnav.conf-abierta .nv-tab-conf-ico { transform: rotate(90deg); }
    .nv-tab-conf-ico { transition: transform 0.3s var(--nv-ease); }
    .nv-topnav.conf-abierta .nv-tab-conf-ico::before { content: '\f00d'; }
    /* Con la fila reducida a dos botones, el indicador deslizante sobra */
    .nv-topnav.conf-abierta .nv-topnav-ind { opacity: 0 !important; }

    .nv-cm-in { padding: 12px 8px 8px; }

    .nv-cm-title {
        font-family: var(--font-heading);
        font-size: 0.58rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: var(--nv-text-dim);
        margin: 0 0 8px;
        padding-left: 4px;
    }
    .nv-cm-title:not(:first-child) { margin-top: 16px; }

    .nv-cm-temas,
    .nv-cm-grupo {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .nv-topnav .nv-cm-tema,
    .nv-topnav .nv-cm-op {
        display: flex;
        /* .nv-tema es columna en la barra lateral; aquí van en fila */
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 11px 10px;
        border-radius: 13px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.13);
        cursor: pointer;
        font-family: var(--font-body);
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text-secondary);
        transition: all 0.2s var(--nv-ease);
    }
    .nv-topnav .nv-cm-tema[aria-checked="true"],
    .nv-topnav .nv-cm-op[aria-checked="true"] {
        color: var(--cyan-accent);
        border-color: var(--nv-line-cyan);
        background: var(--nv-tinte-2);
    }

    .nv-cm-enlaces { display: grid; gap: 7px; }
    .nv-topnav .nv-cm-enlace {
        display: flex;
        align-items: center;
        gap: 11px;
        width: 100%;
        padding: 12px 13px;
        border-radius: 13px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.13);
        cursor: pointer;
        text-align: left;
        text-decoration: none;
        font-family: var(--font-body);
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-primary);
    }
    .nv-cm-enlace > i,
    .nv-cm-enlace > .nv-op-flag { width: 17px; text-align: center; color: var(--cyan-accent); font-size: 0.9rem; }
    .nv-cm-enlace > span:not(.nv-op-flag) { flex: 1; }
    .nv-cm-enlace em {
        font-style: normal;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--nv-text-dim);
        padding: 3px 8px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.07);
        white-space: nowrap;
    }

    /* Seis tarjetas cuadradas en dos columnas: se ven las seis casi de una vez,
       en lugar de seis rectángulos que obligaban a bajar toda la pantalla. */
    .nv-door-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .nv-door-row {
        gap: 9px;
        padding: 14px 13px;
        border-radius: 16px;
    }
    .nv-door-row > i { width: 34px; height: 34px; font-size: 0.88rem; border-radius: 11px; }
    .nv-door-row b { font-size: 0.85rem; line-height: 1.25; }
    .nv-door-row small { font-size: 0.72rem; line-height: 1.35; }
    .nv-door-row em { font-size: 0.73rem; padding-top: 9px; }
    .nv-door-row:hover { transform: none; }
    .nv-door-row:active { transform: scale(0.985); }
    .nv-door-help { margin-top: 10px; padding: 12px; font-size: 0.8rem; }

    /* Caso: las dos vistas se apilan. La captura horizontal a todo el ancho y
       el celular centrado y chico — al revés, o una o la otra queda ilegible. */
    .nv-shots { grid-template-columns: 1fr; gap: 20px; max-width: none; }
    /* Ancho completo en las dos: si la figura se encoge a su contenido, el
       width:100% del marco de celular se calcula contra el pie de foto. */
    .nv-shot-desk, .nv-shot-mob { width: 100%; }
    .nv-shots figcaption { margin-top: 8px; font-size: 0.62rem; }
    .nv-phone { max-width: 168px; padding: 6px; border-radius: 24px; }
    .nv-phone-screen { border-radius: 19px; }
    .nv-phone-keys { padding: 26px 11px 14px; gap: 10px; }
    .nv-phone-keys li { grid-template-columns: 16px 1fr; gap: 8px; font-size: 0.65rem; }
    .nv-phone-keys i { font-size: 0.72rem; }

    /* Beneficios: cuadradas de dos en dos, con el icono arriba */
    .nv-bens, .nv-bens-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .nv-ben {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "ico" "titulo" "texto";
        gap: 8px 0;
        padding: 13px 12px 14px;
        border-radius: 15px;
    }
    .nv-ben > i { width: 32px; height: 32px; font-size: 0.85rem; border-radius: 10px; }
    .nv-ben b { font-size: 0.79rem; }
    .nv-ben small { font-size: 0.68rem; }

    .nv-plan-ico { gap: 6px; margin-top: 12px; }
    .nv-plan-ico li { padding: 6px 9px; font-size: 0.72rem; }

    .nv-start { grid-template-columns: 1fr; gap: 10px; }
    .nv-start-step { padding: 14px 16px; }
    .nv-start-step:hover { transform: none; }

    /* Panel a dos columnas → una sola */
    .nv-split { grid-template-columns: 1fr; gap: 18px; }
    .nv-split-side { position: static; }

    /* Dentro del carril móvil la ficha vuelve a ser vertical */
    .nv-case-row { grid-template-columns: 1fr; gap: 0; }
    .nv-case-row .nv-browser { margin-bottom: 14px; }

    .nv-svc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .nv-svc-card { border-radius: 18px; }
    .nv-svc-ico { width: 28px; height: 28px; border-radius: 9px; font-size: 0.78rem; left: 9px; top: 9px; }
    .nv-svc-body { padding: 11px 13px 13px; }
    .nv-svc-body h4 { font-size: 0.86rem; }
    .nv-svc-body .nv-card-foot { padding-top: 9px; }
    .nv-svc-body .nv-price { font-size: 0.82rem; }

    .nv-view h2 { font-size: 1.45rem; }
    .nv-lead { font-size: 0.94rem; }
    .nv-card { padding: 18px; border-radius: 18px; }
    .nv-form-row { grid-template-columns: 1fr; }
    .nv-tiles, .nv-tiles-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .nv-tile.nv-tile-wide { grid-column: span 2; }

    /* Tiras horizontales (pastillas y carriles).
       overscroll-behavior-x:contain evita que, al llegar al final de la tira, el
       arrastre se propague al documento y arrastre la página entera de lado.
       touch-action pan-x pan-y deja pasar los dos desplazamientos pero mata el
       pellizco y el doble-toque dentro de la tira. */
    .nv-pills,
    .nv-rail-mob {
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;
        touch-action: pan-x pan-y;
    }

    /* Pastillas: tira horizontal siempre visible */
    .nv-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        margin: 0 -16px 20px;
        padding: 2px 16px 10px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .nv-pills::-webkit-scrollbar { display: none; }
    .nv-pill {
        flex-shrink: 0;
        scroll-snap-align: center;
        padding: 10px 15px;
        font-size: 0.83rem;
    }
    .nv-pill:hover { transform: none; }
    .nv-pill:active { transform: scale(0.96); }

    /* Carriles horizontales para no alargar la página */
    .nv-rail-mob {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 84%;
        gap: 12px;
        overflow-x: auto;
        /* proximity y no mandatory: con mandatory el carril reengancha solo y da
           la sensación de que el contenido «se mueve» al soltar. */
        scroll-snap-type: x proximity;
        padding: 2px 16px 10px;
        margin: 0 -16px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .nv-rail-mob::-webkit-scrollbar { display: none; }
    .nv-rail-mob > * { scroll-snap-align: center; }

    /* Los planes se estiran a la altura del más largo y dejaban medio metro de
       hueco dentro de las tarjetas cortas. Aquí cada una mide lo suyo. */
    .nv-plans.nv-rail-mob { align-items: start; }
    .nv-plans .nv-plan .nv-list { flex: none; }

    .nv-grid-compact { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .nv-grid-compact .nv-card { padding: 13px; border-radius: 15px; }
    .nv-grid-compact .nv-card h4 { font-size: 0.85rem; margin-bottom: 5px; }
    .nv-grid-compact .nv-card p:not(.nv-price) { font-size: 0.77rem; line-height: 1.45; }
    .nv-grid-compact .nv-card-ico { width: 32px; height: 32px; font-size: 0.85rem; margin-bottom: 9px; border-radius: 10px; }
    .nv-grid-compact .nv-card-foot { margin-top: 9px; padding-top: 9px; }
    .nv-grid-compact .nv-price { font-size: 0.82rem; }

    .nv-next { margin-top: 32px; padding: 16px 18px; gap: 12px; border-radius: 18px; }
    .nv-next-txt b { font-size: 1.02rem; }
    .nv-next .nv-btn { width: 100%; }

    .nv-case-actions .nv-btn { flex: 1; min-width: 150px; }
    .nv-inline-note { font-size: 0.8rem; }

    body.nv-app .cookie-banner { bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important; }
}

@media (min-width: 1024px) {
    .nv-mob-only { display: none !important; }
}

@media (max-width: 400px) {
    .nv-tab span { font-size: 0.55rem; }
    .nv-view { padding: 12px 13px 24px; }
    .nv-rail-mob { grid-auto-columns: 88%; }
}

/* ==========================================================================
   11 bis. AJUSTES Y TEMAS
   En escritorio el panel vive en la barra lateral, siempre visible. En móvil,
   donde la barra de pastillas ya va llena, es un botón flotante abajo a la
   derecha que despliega el mismo contenido hacia arriba.
   ========================================================================== */
.nv-ajustes {
    padding: 12px 12px 13px;
    border-radius: var(--nv-radius-sm);
    background: var(--nv-surface-soft);
    border: 1px solid var(--nv-line);
}

.nv-ajustes-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--nv-text-dim);
    margin: 0 0 10px;
}
.nv-ajustes-title i { color: var(--cyan-accent); font-size: 0.72rem; }

/* ── Cabecera plegable (barra lateral) ───────────────────────────────────────
   Desplegado siempre, el panel se comía media barra y competía con la
   navegación, que es lo que de verdad se usa. Ahora arranca cerrado. */
.nv-ajustes-head {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 3px 2px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--nv-text-dim);
    transition: color 0.2s var(--nv-ease);
}
.nv-ajustes-head:hover { color: var(--text-primary); }
.nv-ajustes-head > i:first-child { color: var(--cyan-accent); font-size: 0.75rem; }
.nv-ajustes-head span { flex: 1; text-align: left; }
.nv-ajustes-flecha {
    font-size: 0.6rem;
    transition: transform 0.3s var(--nv-ease);
}
.nv-ajustes-head[aria-expanded="true"] .nv-ajustes-flecha { transform: rotate(180deg); }

.nv-ajustes-cuerpo {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s var(--nv-ease);
}
.nv-ajustes-head[aria-expanded="true"] + .nv-ajustes-cuerpo { grid-template-rows: 1fr; }
.nv-ajustes-cuerpo > div { overflow: hidden; min-height: 0; }
.nv-ajustes-cuerpo .nv-temas { padding-top: 11px; }

/* La bandera va como emoji y no como icono: Font Awesome no trae banderas de
   país. En móvil se ve la bandera; en Windows el sistema no las dibuja y las
   deja como «MX»/«US», que sigue diciendo lo mismo. */
.nv-op-flag {
    width: 15px;
    text-align: center;
    font-size: 0.72rem;
    line-height: 1;
    flex-shrink: 0;
    letter-spacing: -0.06em;
}
.nv-fab-op .nv-op-flag { width: 20px; font-size: 0.8rem; }
.nv-fab-op em .nv-op-flag,
.nv-op em span { letter-spacing: -0.06em; }

/* ── Selector de tema ─────────────────────────────────────────────────────── */
.nv-temas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

/* Con tres temas ya no caben en fila con etiqueta al lado: la muestra va
   arriba y el nombre debajo. */
.nv-tema {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 3px 7px;
    border-radius: 10px;
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--nv-text-dim);
    transition: all 0.2s var(--nv-ease);
}
.nv-tema span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.nv-tema:hover { color: var(--text-primary); background: var(--nv-surface-flat); }
.nv-tema.active {
    color: var(--cyan-accent);
    border-color: var(--nv-line-cyan);
    background: rgba(255, 255, 255, 0.05);
}

/* La muestra de cada tema. Los colores van fijos a propósito: son una muestra
   del tema que representan, no del que está puesto. Con variables las dos se
   verían iguales. */
.nv-tema-mu {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    flex-shrink: 0;
    display: block;
    position: relative;
    overflow: hidden;
}
.nv-tema-mu::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 7px;
}
/* Misma superficie en las dos: lo que cambia es la franja de acento */
.nv-mu-cian { background: #17181a; }
.nv-mu-cian::after { background: #00E5FF; }
.nv-mu-byn { background: #17181a; }
.nv-mu-byn::after { background: #f2f2f2; }

/* ── Las otras opciones (barra lateral) ─────────────────────────────────────
   Cuatro accesos que sí hacen algo: idioma, animaciones, tamaño de texto y
   WhatsApp. El estado va a la derecha, donde se lee de un vistazo. */
.nv-ops {
    list-style: none;
    margin: 11px 0 0;
    padding: 9px 0 0;
    border-top: 1px solid var(--nv-line);
    display: grid;
    gap: 1px;
}
.nv-op {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 6px;
    border: none;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s var(--nv-ease);
}
.nv-op:hover { background: var(--nv-surface-flat); color: var(--text-primary); }
.nv-op > i { width: 15px; text-align: center; color: var(--cyan-accent); font-size: 0.8rem; }
.nv-op > span { flex: 1; min-width: 0; }
.nv-op em {
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nv-text-dim);
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
}
.nv-op[aria-pressed="true"] em { color: var(--cyan-accent); background: var(--nv-tinte-2); }


/* ── Ajustes de escritorio: dos niveles hacia la derecha ─────────────────────
   El botón vive en la barra; los menús, en posición fija fuera de ella, porque
   la barra recorta su contenido para respetar las esquinas redondeadas. */
.nv-conf-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 11px;
    border-radius: var(--nv-radius-sm);
    background: var(--nv-surface-soft);
    border: 1px solid var(--nv-line);
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.2s var(--nv-ease);
}
.nv-conf-btn > i:first-child { color: var(--cyan-accent); font-size: 0.8rem; }
.nv-conf-btn span { flex: 1; text-align: left; }
.nv-conf-flecha { font-size: 0.62rem; transition: transform 0.26s var(--nv-ease); }
.nv-conf-btn:hover { color: var(--text-primary); border-color: var(--nv-line-cyan); }
.nv-conf-btn[aria-expanded="true"] {
    color: var(--cyan-accent);
    border-color: var(--nv-line-cyan);
    background: var(--nv-tinte-1);
}
.nv-conf-btn[aria-expanded="true"] .nv-conf-flecha { transform: translateX(3px); }

.nv-conf {
    position: fixed;
    /* 14px de margen de la tarjeta + 10px de aire */
    left: calc(var(--nv-side-w) + 38px);
    bottom: 22px;
    z-index: 950;
}
.nv-conf[hidden] { display: none; }

.nv-conf-menu,
.nv-conf-sub {
    background: var(--nv-surface-flat);
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius-sm);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), -2px -2px 20px var(--nv-glow);
    padding: 7px;
    animation: nv-conf-in 0.2s var(--nv-ease) both;
}
.nv-conf-menu { width: 254px; }

@keyframes nv-conf-in {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

.nv-conf-title {
    font-family: var(--font-heading);
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--nv-text-dim);
    margin: 4px 8px 8px;
}

.nv-conf-fila { position: relative; }

.nv-conf-op {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 9px;
    border: none;
    border-radius: 10px;
    background: none;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.79rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.18s var(--nv-ease);
}
.nv-conf-op > i:first-child,
.nv-conf-op > .nv-op-flag { width: 16px; text-align: center; color: var(--cyan-accent); font-size: 0.82rem; }
.nv-conf-op > span:not(.nv-op-flag) { flex: 1; min-width: 0; }
.nv-conf-op:hover,
.nv-conf-op:focus-visible,
.nv-conf-fila.abierta > .nv-conf-op {
    background: var(--nv-tinte-1);
    color: var(--text-primary);
}
.nv-conf-est {
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--cyan-accent);
    white-space: nowrap;
}
.nv-conf-mas { font-size: 0.58rem; color: var(--nv-text-dim); }
.nv-conf-sep { height: 1px; background: var(--nv-line); margin: 6px 8px; }

/* El segundo nivel: sale al lado de su fila, alineado por abajo para que no se
   salga de la pantalla cuando la fila está cerca del borde inferior. */
.nv-conf-sub {
    position: absolute;
    left: calc(100% + 8px);
    bottom: -7px;
    width: 214px;
    display: none;
}
.nv-conf-sub::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12px;
    width: 12px;
}
.nv-conf-fila.abierta > .nv-conf-sub { display: block; }

.nv-conf-sub .nv-tema,
.nv-conf-elige {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px 10px;
    width: 100%;
    padding: 8px 9px;
    border: none;
    border-radius: 10px;
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.18s var(--nv-ease);
}
.nv-conf-elige { grid-template-columns: 1fr; }
.nv-conf-sub .nv-tema small,
.nv-conf-elige small {
    grid-column: 1 / -1;
    font-size: 0.67rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--nv-text-dim);
}
.nv-conf-sub .nv-tema small { grid-column: 2; }
.nv-conf-sub .nv-tema:hover,
.nv-conf-elige:hover { background: var(--nv-tinte-1); color: var(--text-primary); }
.nv-conf-sub .nv-tema[aria-checked="true"],
.nv-conf-elige[aria-checked="true"] {
    background: var(--nv-tinte-2);
    color: var(--cyan-accent);
}
/* La muestra del tema ocupa dos filas de la rejilla, a la izquierda */
.nv-conf-sub .nv-tema .nv-tema-mu { grid-row: 1 / span 2; }

@media (prefers-reduced-motion: reduce) {
    .nv-conf-menu, .nv-conf-sub { animation: none; }
}

/* ── Botón flotante (móvil) ─────────────────────────────────────────────────
   Una sola pieza: el botón y las opciones comparten caja. Cerrada es un
   cuadrado de esquinas redondeadas; al abrirse crece hacia arriba —está
   anclada abajo— y queda como la barra de secciones de la cabecera, pero en
   vertical. De ahí la ilusión de que el cuadrado se estira. */
.nv-fab-shell {
    position: fixed;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    /* Cerrada es un cuadrado; abierta crece hacia arriba Y hacia la izquierda,
       porque está anclada a la esquina. Ensancharla es lo que deja sitio para
       que cada opción diga su nombre y su estado: con 62px sólo cabía una
       palabra suelta y no se entendía qué hacía cada una. */
    width: 62px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 5px;
    border-radius: 17px;
    transition: width 0.34s var(--nv-ease), border-radius 0.34s var(--nv-ease),
                box-shadow 0.34s var(--nv-ease);
    background: var(--nv-nav-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--nv-line-cyan);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), -2px -2px 18px var(--nv-glow);
}
.nv-fab-shell.open {
    width: min(224px, calc(100vw - 28px));
    /* 22px es el radio de .nv-topnav: abierta se lee como esa misma barra */
    border-radius: 22px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), -2px -2px 26px var(--nv-glow-strong);
}

/* 0fr → 1fr: la altura se anima sin tener que saberla de antemano, y la caja
   de fuera crece con ella. */
.nv-fab-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.34s var(--nv-ease);
}
.nv-fab-shell.open .nv-fab-body { grid-template-rows: 1fr; }

/* El recorte va en una capa propia y SIN relleno. Con el padding aquí, cerrado
   medía 5px en vez de 0: asomaba el borde del último icono por encima de la
   tuerca y la pieza quedaba alta en lugar de cuadrada. El relleno vive dentro,
   en .nv-fab-items, donde sí se recorta. */
.nv-fab-clip {
    overflow: hidden;
    min-height: 0;
}

.nv-fab-items {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 5px;
}

/* Cada opción es una fila: icono · qué es · en qué está. Antes era icono más
   una palabra, y «Texto» o «Tema» solos no dicen ni qué cambian ni cómo están.
   El estado va a la derecha, que es donde se busca. */
.nv-fab-op {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 10px 0 8px;
    border: none;
    border-radius: 13px;
    background: none;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.15;
    transition: all 0.2s var(--nv-ease);
}
.nv-fab-op > i { font-size: 0.88rem; text-align: center; color: var(--cyan-accent); }
.nv-fab-nom {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nv-fab-op em {
    font-style: normal;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--nv-text-dim);
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.07);
    white-space: nowrap;
}
.nv-fab-op[aria-pressed="true"] em { color: var(--cyan-accent); background: var(--nv-tinte-2); }
.nv-fab-op:hover,
.nv-fab-op:focus-visible { color: var(--text-primary); background: rgba(255, 255, 255, 0.07); }

.nv-fab {
    width: 50px;
    height: 50px;
    align-self: flex-end;
    flex-shrink: 0;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--nv-bar);
    border: 1px solid var(--nv-line);
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.34s var(--nv-spring);
}
.nv-fab:hover { color: var(--cyan-accent); border-color: var(--nv-line-cyan); }
.nv-fab.open {
    color: var(--cyan-accent);
    border-color: var(--nv-line-cyan);
    background: var(--nv-tinte-2);
    transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
    .nv-fab-shell,
    .nv-fab-body,
    .nv-ajustes-cuerpo,
    .nv-fab { transition: none; }
    .nv-fab.open { transform: none; }
}

/* ==========================================================================
   11 ter. TEMAS
   Dos: «cian», que es el de siempre, y «blanco y negro». Cada uno redefine
   tokens; ninguna regla de componente se toca. Cian vive en :root sin atributo,
   así que si tema.js no carga el sitio se ve exactamente igual que antes.
   Lo único que ningún tema puede cambiar es el color del logotipo ASCII, y por
   eso va blindado al final.
   ========================================================================== *//* ── BLANCO Y NEGRO ──────────────────────────────────────────────────────────
   Sólo hay dos temas y comparten la paleta entera: fondos, superficies, líneas,
   resplandores y halos, todos en blanco. Se separan en una cosa, el acento.

     · cian (el base, sin atributo)  acento #00E5FF
     · byn                           acento blanco

   Por eso este bloque es tan corto: el B/N no redefine la paleta, sólo apaga
   el color. Y por eso tampoco pueden desincronizarse — si mañana se retoca un
   gris, los dos lo heredan de :root.

   La jerarquía de texto (qué sube al acento y qué se queda blanco) está más
   abajo y es común a los dos: en cian se lee como color, en B/N como blanco
   sobre gris, que es lo que ya hacía. */
html[data-tema="byn"] {
    --cyan-accent: #f2f2f2;
    --cyan-dark: #c9cbcd;
    --cyan-glow: #ffffff;
}

/* El botón primario se pinta con el acento, así que su texto va en oscuro en
   los dos: sobre blanco y sobre cian, el texto claro desaparecería. */
.nv-btn-primary,
.nv-tbtn-primary,
.nv-side-cta {
    color: #0c0d0e;
}
.nv-tema-mu { border-color: rgba(255, 255, 255, 0.2); }

/* ── Jerarquía de texto ──────────────────────────────────────────────────────
   Lo que sube al color de acento: lo que se mira antes de leer o donde se
   puede hacer clic. El resto —párrafos, listas, descripciones— se queda
   blanco. Como usa var(--cyan-accent), en el tema cian sale cian y en el de
   blanco y negro sale blanco, sin duplicar una sola regla. */
.nv-view h2,
.nv-view h3,
.nv-view h4,
.nv-card h4,
.nv-block-title,
.nv-pane-kicker,
.nv-detail-col h5,
.nv-step h4,
.nv-acc-head,
.nv-plan-price,
.nv-tile-cap,
.nv-svc-body h4,
.nv-door-row b,
.nv-start-step b,
.nv-hero-svc b,
.nv-hero-facts b,
.nv-ben b,
.nv-next-txt b,
.nv-course-list b,
.nv-ruta-head h4,
.nv-case-row-txt h4,
.nv-contact-row b,
.nv-tarifas th,
.nv-legal-body h2,
.nv-legal-wrap h1 {
    color: var(--cyan-accent);
}

/* Y lo que se queda en blanco. Va después para ganarle a la regla de arriba
   cuando un <small> cuelga de un título. */
.nv-card p,
.nv-lead,
.nv-list li,
.nv-detail-col li,
.nv-acc-body p,
.nv-step p,
.nv-legal-body p,
.nv-legal-body li,
.nv-door-row small,
.nv-start-step small,
.nv-hero-svc small,
.nv-ben small,
.nv-ruta-head small,
.nv-tile-cap small,
.nv-contact-row small {
    color: var(--text-secondary);
}


/* ── Medios de pago ──────────────────────────────────────────────────────────
   Marca reconocible y nombre debajo. Los logotipos son iconos de la tipografía
   de Font Awesome, así que heredan el color del tema y no se despintan. */
.nv-pagos {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.nv-pago {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 84px;
    flex: 1 1 84px;
    padding: 13px 10px 11px;
    border-radius: var(--nv-radius-sm);
    background: var(--nv-surface-soft);
    border: 1px solid var(--nv-line);
    cursor: default;
}
.nv-pago i { font-size: 1.5rem; color: var(--cyan-accent); line-height: 1; }
.nv-pago b {
    font-family: var(--font-body);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--nv-text-dim);
    text-align: center;
    white-space: nowrap;
}
.nv-bens-pago { margin-top: 16px; }

/* La segunda cabecera de la sección unificada: separa «cómo trabajo» de
   «cuánto cuesta» sin que parezcan dos páginas pegadas. */
.nv-view-head-2 {
    margin-top: 46px;
    padding-top: 30px;
    border-top: 1px solid var(--nv-line);
}

@media (max-width: 1023px) {
    .nv-pago { min-width: 72px; flex-basis: 72px; padding: 11px 7px 9px; }
    .nv-pago i { font-size: 1.3rem; }
    .nv-pago b { font-size: 0.58rem; }
    .nv-view-head-2 { margin-top: 34px; padding-top: 22px; }
}

/* ── Resplandor de contenedores ──────────────────────────────────────────────
   Todo lo que es «una superficie sobre el fondo» lleva el mismo halo del color
   de acento: cian en el tema cian, blanco en el de blanco y negro. Es lo que
   las separa del fondo.
   La lista es explícita y no un selector amplio a propósito: así se ve de un
   vistazo qué lo lleva y qué no, y no se cuela en una pieza nueva sin querer.
   .nv-card ya lo trae en su propia sombra, por eso no está aquí. */
.nv-topbar,
.nv-topnav,
.nv-pill,
.nv-step,
.nv-ben,
.nv-door-row,
.nv-door-help,
.nv-start-step,
.nv-acc-item,
.nv-detail-in,
.nv-contact-row,
.nv-note,
.nv-next,
.nv-hero-svc,
.nv-hero-facts li,
.nv-fab-shell,
.nv-legal-top,
.nv-legal-body {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), -2px -2px 16px var(--nv-glow);
}

/* Dentro de una tarjeta, nada de halo: dos resplandores encajados se leen
   como suciedad, no como profundidad. */
.nv-card .nv-step,
.nv-card .nv-ben,
.nv-card .nv-acc-item,
.nv-card .nv-contact-row,
.nv-card .nv-note,
.nv-card .nv-pill,
.nv-detail-in .nv-card,
.nv-card .nv-card {
    box-shadow: none;
}

.nv-pill:hover,
.nv-door-row:hover,
.nv-start-step:hover,
.nv-hero-svc:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), -2px -2px 22px var(--nv-glow-strong);
}

/* ── Preferencias del panel de ajustes ──────────────────────────────────────
   Dos interruptores que sí cambian algo de verdad.

   Animaciones apagadas: mismo efecto que «reducir movimiento» del sistema,
   pero a mano, para quien se marea con la lluvia de flores o navega con un
   equipo justo. La sakura la apaga app.js; aquí se cortan las transiciones y
   las entradas de sección, que es lo que más se nota. */
html[data-movimiento="no"] *,
html[data-movimiento="no"] *::before,
html[data-movimiento="no"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* Texto grande: sube el cuerpo base y todo lo demás va detrás, porque las
   medidas están en rem y em. No se toca el ASCII, que se mide en píxeles
   exactos y a otro tamaño se descuadra. */
html[data-texto="grande"] { font-size: 18px; }
html[data-texto="grande"] .nv-hero-ascii { font-size: 11px; }

/* ── Blindajes: lo que ningún tema toca ──────────────────────────────────────
   El logotipo ASCII conserva su cian y su blanco en los dos temas: es la marca,
   no un elemento de interfaz. Va con el selector completo para ganarle por
   especificidad a cualquier bloque de tema. */
html[data-tema] .nv-hero-ascii .nv-ascii-a {
    color: #00E5FF;
    text-shadow: 0 0 18px rgba(0, 229, 255, 0.4);
}
html[data-tema] .nv-hero-ascii .nv-ascii-b {
    color: #ffffff;
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.15);
}
/* ==========================================================================
   12. ACCESIBILIDAD
   ========================================================================== */
.nv-nav-item:focus-visible,
.nv-tab:focus-visible,
.nv-btn:focus-visible,
.nv-tbtn:focus-visible,
.nv-pill:focus-visible,
.nv-acc-head:focus-visible,
.nv-door-row:focus-visible,
.nv-start-step:focus-visible,
.nv-card-int:focus-visible {
    outline: 2px solid var(--cyan-accent);
    outline-offset: 3px;
}

.nv-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 12px 20px;
    background: var(--cyan-accent);
    color: var(--bg-main);
    font-weight: 700;
    border-radius: 0 0 12px 0;
}
.nv-skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
    .nv-view.active, .nv-pane.active { animation: none !important; }
    .nv-browser-live i { animation: none !important; }
    .nv-topnav-ind { transition: none; }
    .nv-card-int:hover, .nv-tile:hover, .nv-btn:hover,
    .nv-door-row:hover, .nv-start-step:hover, .nv-pill:hover { transform: none; }
}