/* ===========================================================================
   LA BARRA DE VECTOR SPACE — lo que comparten todas las páginas
   ---------------------------------------------------------------------------
   POR QUÉ EXISTE ESTE ARCHIVO, y son dos motivos, uno de ellos grave:

   1. NO SE PODÍA VOLVER. Hasta el 16 de agosto de 2026, ninguna página de
      unidad —ni Lince, ni Píxel, ni Guardián, ni ninguna— tenía un enlace a la
      portada. Quien llegaba a `lince.html` desde un enlace compartido se
      quedaba allí: podía leer la unidad y no tenía forma de ver quiénes somos,
      qué más hay, ni cómo se paga. Un callejón sin salida en la página que
      tiene que vender.

   2. CADA PÁGINA IBA POR SU CUENTA. Los colores ya eran los mismos, pero el
      gesto no: cada una empezaba de una forma distinta. Esto pone la misma
      cabecera en todas, con la misma tipografía y la misma raya de color, para
      que se note que son la misma casa sin que ninguna pierda su acento.

   LA RAYA DE COLOR ES EL DETALLE QUE LAS HERMANA. Coge el `--u` de cada página
   —el ámbar de Lince, el violeta de Píxel, el verde de Folio— y lo pasea por
   debajo de la barra. Es un guiño al campo de vectores de la portada, hecho con
   dos líneas de CSS en vez de con un `<canvas>`: en una página de unidad, que
   suele abrirse desde el móvil, la portada entera sería un lujo caro.

   NO HACE FALTA JAVASCRIPT PARA VOLVER A CASA. El enlace es un `<a href="/">`
   normal y corriente. `vs.js` solo añade el interruptor de tema; si ese archivo
   no carga, la página se queda en claro —que es el modo por defecto— y todo lo
   demás sigue funcionando.
   =========================================================================== */

.vsbar{
  /* Colores propios y con valor de reserva. NO se apoya en `--ink` de la
     página: en `lince.html` esa variable significa el fondo y en todas las
     demás significa la tinta, así que usarla aquí pintaría letras casi blancas
     sobre blanco en una sola página y en ninguna otra. Un nombre que significa
     dos cosas opuestas es una trampa; aquí se rodea. */
  --vsb-fondo:#FFFFFF;
  --vsb-linea:#D1D8E4;
  --vsb-texto:#0D0F14;
  --vsb-suave:#434A59;
  --vsb-tenue:#767E90;
  --vsb-acento:var(--u, #0B34E0);

  position:sticky; top:0; z-index:70;
  background:color-mix(in srgb, var(--vsb-fondo) 88%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--vsb-linea);
  font-family:var(--fb, "Segoe UI", system-ui, -apple-system, sans-serif);
}
:root[data-theme="dark"] .vsbar{
  --vsb-fondo:#0B0D12;
  --vsb-linea:#272D3A;
  --vsb-texto:#EEF1F7;
  --vsb-suave:#B4BBC9;
  --vsb-tenue:#828A9B;
}

.vsbar-in{
  max-width:1180px; margin-inline:auto;
  padding-inline:clamp(1.15rem,4vw,2.5rem);
  height:58px; display:flex; align-items:center; gap:1rem;
}

/* ---------- la marca, que es el camino de vuelta ---------- */
.vsbar-m{ display:flex; align-items:center; gap:.5rem; text-decoration:none;
  color:var(--vsb-texto); min-width:0; }
/* ---------------------------------------------------------------------------
   LA MARCA: UNA V QUE ES UN VECTOR.
   Samuel la quería «con fondo como si fuera un espacio, y la V como un haz de
   luz, que se note profesional y novedosa». Esto es eso, y sin una sola imagen:
   todo es SVG y CSS, así que pesa cero, se ve nítido en cualquier pantalla y
   pasa el CSP —que no deja traer nada de fuera—.

   TRES CAPAS, y cada una hace una cosa:
     · El campo. Un cuadrado oscuro con dos destellos, que es el «espacio».
       Oscuro SIEMPRE, en tema claro y en oscuro, igual que la portada: es lo
       que hace que la V brille en vez de estar simplemente dibujada.
     · La V, trazada con punta redonda. Es la marca y no se mueve.
     · El haz. Un trazo corto de luz que RECORRE la propia V, de la punta
       izquierda al vértice y de ahí a la derecha. No es un brillo que va y
       viene: es un vector recorriendo su trayectoria, que es de donde sale el
       nombre.

   NO SE ANIMA EL COLOR NI LA OPACIDAD DEL CONJUNTO, solo el desfase del
   trazado (`stroke-dashoffset`). Es lo que el navegador puede mover en la
   tarjeta gráfica sin repintar nada, así que no cuesta batería en un móvil —
   y esta barra sale en las once páginas.
   --------------------------------------------------------------------------- */
.vsbar-m svg{ width:26px; height:26px; flex:0 0 auto; }
.vsb-campo{ fill:#0B0D12; }
/* EL CIELO. Siete estrellas y ni una mas: a 26 px en la barra, la novena deja
   de ser una estrella y empieza a ser suciedad en la pantalla. Estan colocadas
   a mano por fuera del recorrido de la V —de 22,26 a 50,76 a 78,26— porque una
   encima del trazo no se ve: se la come el brillo del haz.

   TRES PARPADEAN Y CUATRO NO, con periodos que no son multiplos entre si
   (3,7 / 5,3 / 4,1 segundos). Si parpadearan todas y a la vez, el logo latiria
   como un aviso de error; asi respira. Es el mismo criterio que en los iconos
   de las unidades, que llevan periodos de 5,2 y 7,4 s a proposito. */
.vsb-astro{ fill:#8FB4FF; opacity:.45; }
.vsb-astro.a1{ animation:vsb-brilla 3.7s ease-in-out infinite; }
.vsb-astro.a2{ animation:vsb-brilla 5.3s ease-in-out infinite .8s; }
.vsb-astro.a3{ animation:vsb-brilla 4.1s ease-in-out infinite 2.1s; }
@keyframes vsb-brilla{
  0%, 100% { opacity:.25; }
  50%      { opacity:.9; }
}
/* LA V SIEMPRE SE LEE. El primer intento la dejaba al 30 % y el haz encima;
   pero el haz descansa casi la mitad del ciclo, así que durante dos segundos de
   cada cuatro y medio la marca quedaba medio apagada. Un logo que se desvanece
   no es un logo. Ahora la V está encendida siempre y el haz es lo que pasa por
   encima: se lee igual de bien en la esquina de un móvil que en una captura. */
.vsb-v{ fill:none; stroke:#6D8BFF; stroke-width:11; stroke-linecap:round;
  stroke-linejoin:round; opacity:.85; }
.vsb-haz{ fill:none; stroke:#CFE0FF; stroke-width:11; stroke-linecap:round;
  stroke-linejoin:round;
  /* El trazo mide 34 de los ~150 del recorrido: un haz corto, no media V
     encendida. El resto del patrón es hueco, y moviendo el desfase el haz
     recorre el camino entero. */
  stroke-dasharray:34 300;
  stroke-dashoffset:34;
  /* Casi lineal a propósito. Con una curva marcada el haz sale disparado por el
     medio y lo que se ve es un destello; un vector que recorre su trayectoria
     tiene que ir a velocidad pareja. */
  animation:vsb-haz 5s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes vsb-haz{
  /* LOS NÚMEROS SALEN DEL DIBUJO, no de probar a ojo: la V mide 115 de largo
     (medido con `getTotalLength()` en el navegador) y el haz 34. Así que entra
     en +34 —justo antes del primer punto— y sale en -149, que es 115+34, justo
     después del último. Con el -190 del primer intento, un tercio del recorrido
     pasaba fuera del dibujo y la animación parecía tener un tirón. */
  0%   { stroke-dashoffset:34; }
  50%  { stroke-dashoffset:-149; }
  /* Y descansa la otra mitad: un haz continuo en la esquina de la pantalla
     cansa y acaba distrayendo de lo que la persona está leyendo. */
  100% { stroke-dashoffset:-149; }
}
/* Al pasar por encima, el haz da una pasada seguida: responde al dedo y al
   ratón sin que haya que pulsar nada. */
.vsbar-m:hover .vsb-haz{ animation-duration:1.5s; }
.vsbar-m:hover .vsb-v{ opacity:.5; }

/* Quien ha pedido menos movimiento se queda con la V encendida y quieta. Sigue
   siendo la marca, y no se mueve nada. */
@media (prefers-reduced-motion:reduce){
  .vsb-haz{ animation:none; stroke-dasharray:none; stroke-dashoffset:0; opacity:.9; }
  /* Las estrellas se quedan, quietas. Quitarlas dejaria un cuadro vacio a
     quien pidio menos movimiento, no menos marca. */
  .vsb-astro{ animation:none; opacity:.5; }
  .vsb-v{ opacity:.35; }
}
.vsbar-m b{ font-family:var(--fd, "Arial Black", Arial, sans-serif);
  font-size:1rem; letter-spacing:.02em; text-transform:uppercase; display:block;
  white-space:nowrap; }
.vsbar-m i{ font-style:normal; font-family:var(--fm, Consolas, monospace);
  font-size:.55rem; letter-spacing:.14em; color:var(--vsb-tenue);
  text-transform:uppercase; display:block; margin-top:-2px; white-space:nowrap; }
.vsbar-m:hover b{ color:var(--vsb-acento); }

/* ---------- los cuatro sitios a los que se puede ir ---------- */
.vsbar-n{ display:flex; gap:1.3rem; margin-left:auto; }
.vsbar-n a{ font-size:.87rem; font-weight:600; color:var(--vsb-suave);
  text-decoration:none; white-space:nowrap; }
.vsbar-n a:hover{ color:var(--vsb-texto); }

/* ---------- el interruptor de tema ---------- */
.vsbar-t{ width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center;
  cursor:pointer; background:transparent; color:var(--vsb-suave);
  border:1px solid var(--vsb-linea); border-radius:3px; padding:0; }
.vsbar-t:hover{ color:var(--vsb-texto); border-color:var(--vsb-texto); }
.vsbar-t svg{ width:15px; height:15px; }
.vsbar-t .vsb-luna{ display:none; }
:root[data-theme="dark"] .vsbar-t .vsb-sol{ display:none; }
:root[data-theme="dark"] .vsbar-t .vsb-luna{ display:block; }
/* Sin JavaScript no hay a dónde cambiar, así que el botón no se enseña. Un
   interruptor que no hace nada es peor que no tener interruptor. */
.vsbar-t[hidden]{ display:none; }

/* ---------- la raya que hermana las páginas ---------- */
.vsbar-r{ height:2px; background:var(--vsb-linea); position:relative; overflow:hidden; }
.vsbar-r::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, var(--vsb-acento) 45%,
             var(--vsb-acento) 55%, transparent 100%);
  transform:translateX(-100%);
  animation:vsb-pasa 9s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes vsb-pasa{
  0%   { transform:translateX(-100%); }
  55%  { transform:translateX(100%); }
  100% { transform:translateX(100%); }
}
/* Quien ha pedido menos movimiento se queda con la raya quieta, del color de la
   unidad. Sigue hermanando las páginas y no se mueve nada. */
@media (prefers-reduced-motion:reduce){
  .vsbar-r::after{ animation:none; transform:none; opacity:.5; }
}

/* ---------- en papel, esto no existe ----------
   La barra y la caja de «entra con tu correo» son cosas de pantalla. Se
   esconden AQUÍ y no en cada página porque las dos las pone código compartido
   —`vs.css` y `acceso.js`— y aparecen en las once: el día que alguien imprima
   la ficha de una unidad, o guarde en PDF su informe, no tiene por qué salirle
   un botón de entrar en medio del papel. Pasó en la primera prueba del PDF de
   Lince, con la caja de acceso colada encima del informe. */
@media print{
  .vsbar, .vsbar-r, .vs-acceso{ display:none !important; }
}

@media (max-width:760px){
  .vsbar-in{ gap:.6rem; }
  .vsbar-m i{ display:none; }
  .vsbar-m b{ font-size:.9rem; }

  /* EN EL MÓVIL LOS ENLACES BAJAN A UNA SEGUNDA FILA. NO SE ESCONDEN.

     Hasta el 18 de agosto de 2026 aquí había un `display:none` para todo lo que
     no fuera «Tu cuenta», con el argumento de que «están a un toque desde la
     portada». Es cierto en la portada —tiene botones grandes— y MENTIRA en las
     otras once páginas, que no los tienen: quien abría `lince.html` en el
     teléfono no podía ir a las unidades, ni a las tarifas, ni a Brújula. Y la
     mitad de la gente entra desde el móvil.

     Segunda fila y no un menú de hamburguesa: los cuatro enlaces caben, y un
     menú que hay que abrir es un menú que la mayoría no abre. Si algún día no
     cupieran, la fila se desliza de lado en vez de recortarse. */
  .vsbar-in{ flex-wrap:wrap; height:auto; padding-top:.45rem; padding-bottom:.1rem; }
  .vsbar-n{
    order:3; width:100%; margin-left:0; gap:1.15rem;
    padding:.4rem .1rem .5rem;
    overflow-x:auto; scrollbar-width:none;
  }
  .vsbar-n::-webkit-scrollbar{ display:none; }
  .vsbar-n a{ font-size:.8rem; white-space:nowrap; }
}

/* QUE SE VEA QUE HAS SALTADO.
   Pulsar «Unidades» movía la página 459 píxeles dentro de una sección de 8.000:
   parecía que no había pasado nada, así que la gente volvía a pulsar y cada
   pulsación dejaba una entrada en el historial. Al retroceder había que
   deshacerlas todas y se acababa saliendo a Google. El desplazamiento suave se
   ve, y `scroll-margin-top` evita que el título quede debajo de la barra fija. */
html{ scroll-behavior:smooth; }
[id]{ scroll-margin-top:5rem; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* ===========================================================================
   QUIÉN ESTÁ DENTRO, EN LA BARRA DE TODAS LAS PÁGINAS.

   Hasta ahora, un cliente que entraba en su cuenta y volvía a la portada no
   tenía ni una señal de que seguía dentro: la barra decía «Tu cuenta» igual que
   a un desconocido. Y sí seguía dentro — la sesión dura 30 días—, pero no había
   forma de saberlo sin volver a la página de la cuenta.

   Se pinta con lo que hay en el propio navegador, SIN preguntar al servidor: si
   cada página tuviera que hacer una llamada solo para saber si enseñar una
   letra, la web entera cargaría más lenta para todo el mundo. Ver `vs.js`.
   =========================================================================== */
.vsbar-yo{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.25rem .7rem .25rem .25rem;
  border:1px solid var(--vsb-linea); border-radius:999px;
  color:var(--vsb-texto); text-decoration:none;
  transition:border-color .15s, background .15s;
}
.vsbar-yo:hover{ border-color:var(--vsb-acento); background:var(--vsb-suave); }

/* La inicial. Redonda, con el azul de la marca y la letra bien centrada. */
.vsbar-ini{
  width:26px; height:26px; flex-shrink:0;
  display:grid; place-items:center;
  border-radius:50%;
  /* CON RESERVA, y hace falta: `--vsb-acento` está declarada en `.vsbar`, y la
     portada usa su propia barra `.bar`, donde esa variable no llega. Sin este
     respaldo el círculo salía transparente justo en la página más vista. */
  background:var(--vsb-acento, var(--u, #0B34E0)); color:#fff;
  font-family:var(--fm,"Cascadia Code",Consolas,monospace);
  font-size:.78rem; font-weight:700; line-height:1;
  text-transform:uppercase;
}
.vsbar-yo span{ font-size:.82rem; font-weight:600; max-width:11ch;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* En el móvil se queda solo el círculo: el nombre no cabe y la inicial ya dice
   lo que hay que decir — que estás dentro y quién eres. */
@media (max-width:760px){
  .vsbar-yo{ padding:.2rem; border-color:transparent; }
  .vsbar-yo span{ display:none; }
}

/* ===========================================================================
   AVISO DE UNIDAD EN ACTUALIZACIÓN — lo pinta `vs.js`, mirando su lista
   `EN_OBRAS`. Para quitarlo se borra la unidad de esa lista; esto se puede
   quedar aquí sin molestar a nadie.

   NO ES UN AVISO DE ERROR, y por eso no va en rojo: la unidad funciona. Va en
   el color de su propia unidad —cada una tiene el suyo en `--u`—, con una barra
   a la izquierda, para que se lea como una nota y no como una alarma.
   =========================================================================== */
/* La ficha de precio y contratación al final de cada página de unidad.
   Va antes del pie y con el precio primero: quien llega desde un buscador lo
   que quiere saber es cuánto cuesta, y hasta hoy no lo decíamos en cuatro de
   las cinco páginas. */
.ficha-u{
  max-width:46rem; margin:3.5rem auto 0; padding:1.6rem 1.5rem;
  border:1px solid var(--line, #d5d5cb); border-radius:3px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.2rem;
}
.ficha-u-p{ display:flex; flex-direction:column; gap:.15rem; }
.ficha-u-p b{ font-size:1.75rem; font-weight:700; letter-spacing:-.02em; line-height:1; }
.ficha-u-p span{ font-size:.85rem; opacity:.72; }
.ficha-u-b{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.ficha-u-c{
  font:inherit; font-size:.72rem; font-weight:700; letter-spacing:.09em;
  padding:.85rem 1.4rem; cursor:pointer; border:0; border-radius:3px;
  background:var(--ink, #13151B); color:var(--bg, #fff);
  /* 44 px de alto minimo: en movil esto se pulsa con el dedo. */
  min-height:44px;
}
.ficha-u-c:disabled{ opacity:.5; cursor:not-allowed; }
.ficha-u-b a{ font-size:.86rem; opacity:.8; min-height:44px; display:flex; align-items:center; }
.ficha-u-n{ flex:1 1 100%; margin:0; font-size:.86rem; min-height:1.2em; opacity:.8; }
.ficha-u-n.mal{ color:#9c3d24; opacity:1; }
@media (max-width:620px){
  .ficha-u{ flex-direction:column; align-items:stretch; }
  .ficha-u-b{ flex-direction:column; align-items:stretch; }
  .ficha-u-c{ width:100%; }
  .ficha-u-b a{ justify-content:center; }
}

.en-obras{
  margin:0 0 1.4rem; padding:.85rem 1.1rem;
  border-left:3px solid var(--u, currentColor);
  background:color-mix(in srgb, var(--u, var(--ink-3)) 8%, transparent);
  border-radius:0 8px 8px 0;
  font-size:.92rem; line-height:1.55; color:var(--ink-2, inherit);
}
.en-obras strong{ color:var(--ink, inherit); }