/* ═══════════════════════════════════════════════════════════════════════════
   Base común de todo lo público de Ventrax: tokens, reset y el cromo de la
   barra superior.

   Vive aquí y no dentro de cada hoja porque los manuales y el sitio comparten
   marca: con una copia por página, la segunda se queda atrás en cuanto se toca
   el color y las dos caras de la misma empresa dejan de parecerse.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;
  --vx-fondo:#F6F7F9; --vx-superficie:#FFFFFF;
  --vx-borde:rgba(16,21,28,.08); --vx-borde-fuerte:rgba(16,21,28,.14);
  --vx-texto:#1A2230; --vx-texto-suave:#6B7482;
  --vx-acento:#2563EB; --vx-acento-tenue:#EFF4FF; --vx-acento-hondo:#1D4ED8;
  --vx-aviso:#B45309; --vx-aviso-tenue:#FFF8EB; --vx-aviso-borde:rgba(180,83,9,.22);
  --vx-bien:#0F7B4F; --vx-bien-tenue:#EAF7F0;
  --vx-sombra-1:0 1px 2px rgba(16,21,28,.04),0 1px 3px rgba(16,21,28,.05);
  --vx-sombra-2:0 2px 4px -1px rgba(16,21,28,.05),0 6px 16px -4px rgba(16,21,28,.08);
  --vx-sombra-3:0 8px 24px -6px rgba(16,21,28,.12),0 2px 6px -2px rgba(16,21,28,.06);
  --vx-radio:14px; --vx-radio-chico:10px;
  --vx-fuente:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --vx-fuente-mono:'IBM Plex Mono','Cascadia Mono',Consolas,monospace;
  --vx-salida:cubic-bezier(.23,1,.32,1);
  --vx-medida:68ch;
}

/* El tema se decide por atributo, no por media query: así el botón puede imponerse
   sobre la preferencia del sistema. El script del <head> escribe siempre data-tema,
   y lo hace ANTES de pintar, para que no haya destello de claro al abrir en oscuro. */
:root[data-tema="oscuro"]{
  color-scheme:dark;
  --vx-fondo:#10151C; --vx-superficie:#171D26;
  --vx-borde:rgba(255,255,255,.09); --vx-borde-fuerte:rgba(255,255,255,.16);
  --vx-texto:#E7EBF0; --vx-texto-suave:#98A2B0;
  --vx-acento:#6E9BFF; --vx-acento-tenue:rgba(110,155,255,.12); --vx-acento-hondo:#8FB4FF;
  --vx-aviso:#F0B45E; --vx-aviso-tenue:rgba(240,180,94,.10); --vx-aviso-borde:rgba(240,180,94,.28);
  --vx-bien:#5FD6A0; --vx-bien-tenue:rgba(95,214,160,.12);
  --vx-sombra-1:0 1px 2px rgba(0,0,0,.35); --vx-sombra-2:0 6px 20px -6px rgba(0,0,0,.5);
  --vx-sombra-3:0 10px 30px -8px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--vx-fondo); color:var(--vx-texto);
  font-family:var(--vx-fuente); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--vx-acento); text-underline-offset:3px; text-decoration-thickness:1px}
strong{font-weight:600}

/* ── Barra superior ─────────────────────────────────────────────────────── */
.barra{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--vx-fondo) 82%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--vx-borde);
}
.barra-int{
  max-width:1180px; margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; gap:10px;
}
.marca{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; min-width:0}
.marca-glifo{
  width:32px; height:32px; flex:none; border-radius:9px; background:var(--vx-acento);
  color:#fff; display:grid; place-items:center; font-weight:700; font-size:15px;
  box-shadow:var(--vx-sombra-1);
}
.marca-txt{font-weight:600; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.marca-txt span{color:var(--vx-texto-suave); font-weight:400}
.barra-sep{flex:1}
.barra-enl{
  color:var(--vx-texto-suave); text-decoration:none; font-size:.875rem; font-weight:500;
  padding:7px 13px; border-radius:999px; white-space:nowrap;
  transition:background .3s var(--vx-salida), color .3s var(--vx-salida);
}
.barra-enl:hover{background:var(--vx-acento-tenue); color:var(--vx-acento)}

/* En pantalla estrecha se suelta el subtítulo antes que recortar la marca: «HeyyySoft
   Ventra…» se lee como un error, y el nombre del producto es lo que no puede faltar. */
@media (max-width:860px){ .marca-txt span{display:none} }
@media (max-width:640px){ .barra-enl.opcional{display:none} .barra-int{padding:12px 18px} }

.progreso{position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--vx-acento);
  transform:scaleX(0); transform-origin:0 50%; opacity:.9}

/* Botón de tema: el sol y la luna se cruzan en el mismo hueco y se conmutan por opacidad
   y giro; nunca desaparece uno antes de que aparezca el otro, que es lo que hace que un
   conmutador se sienta mecánico. */
.tema{
  width:34px; height:34px; flex:none; display:grid; place-items:center; position:relative;
  border:1px solid var(--vx-borde); border-radius:999px; background:transparent;
  color:var(--vx-texto-suave); cursor:pointer; padding:0;
  transition:background .3s var(--vx-salida), color .3s var(--vx-salida),
             border-color .3s var(--vx-salida), transform .2s var(--vx-salida);
}
.tema:hover{background:var(--vx-superficie); color:var(--vx-texto); border-color:var(--vx-borde-fuerte)}
.tema:active{transform:scale(.94)}
.tema:focus-visible{outline:2px solid var(--vx-acento); outline-offset:2px}
.tema svg{position:absolute; width:17px; height:17px;
  transition:opacity .4s var(--vx-salida), transform .5s var(--vx-salida)}
.tema .luna{opacity:0; transform:rotate(-45deg) scale(.7)}
:root[data-tema="oscuro"] .tema .sol{opacity:0; transform:rotate(45deg) scale(.7)}
:root[data-tema="oscuro"] .tema .luna{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .tema svg{transition:none} .tema:active{transform:none} }

/* ── Entrada en pantalla ────────────────────────────────────────────────── */
/* Ocultar el contenido va condicionado a la clase `js`, que pone el script del <head>.
   Sin ella —JS bloqueado, error de red, un lector que no lo ejecuta— se ve todo. Una
   página que depende de JavaScript para ser legible es una página rota. */
.js .revela{opacity:0; transform:translateY(14px)}
.js .revela.visible{opacity:1; transform:none;
  transition:opacity .7s var(--vx-salida), transform .7s var(--vx-salida)}
@media (prefers-reduced-motion:reduce){ .js .revela{opacity:1; transform:none} }