@import url("fonts.css");

/* =====================================================================
   Vision Solutions
   Dirección de diseño: INDUSTRIAL / TÉCNICO con rigor suizo.
   - Tipografía: IBM Plex Sans Condensed (display) + Plex Sans (texto)
     + Plex Mono (etiquetas, identificadores y cifras). Autoalojada.
   - Color: negro cálido y grises neutros. UN acento (naranja señal).
     El verde, el ámbar y el rojo son ESTADOS, no decoración.
   - Layout: rejilla modular visible, alineación a la izquierda,
     filetes de 1px en vez de sombras, esquinas rectas.
   - Movimiento: solo el que significa algo (REC, en línea, reloj).
   ===================================================================== */

:root{
  /* superficies (neutro cálido, no azulado) */
  --ink:      #0b0b0c;
  --ink-2:    #101011;
  --ink-3:    #141416;
  --ink-4:    #1b1b1e;
  --line:     #26262a;   /* filete estructural (separadores, decorativo) */
  --line-2:   #35353b;
  --edge:     #61616a;   /* borde de controles: 3:1 mínimo, exigido por WCAG 1.4.11 */

  /* texto */
  --tx:       #e8e7e3;
  --tx-2:     #9d9d98;
  --tx-3:     #85857f;   /* AA: 5.3:1 sobre el fondo, 4.9:1 sobre las barras */

  /* acento único de marca.
     --signal cambia según el ambiente (texto legible en claro y en oscuro);
     --signal-solid es el naranja de marca y NO cambia: se usa como relleno,
     siempre con texto casi negro encima (6,9:1). */
  --signal:       #ff6a1a;
  --signal-solid: #ff6a1a;
  --signal-d:     #cc4f0b;

  /* estados (significan algo) */
  --ok:    #3fb950;
  --warn:  #e3b341;
  --alarm: #f4503c;

  /* tipografía */
  --sans:  "IBM Plex Sans", system-ui, sans-serif;
  --cond:  "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* escala de espaciado (rítmica, no uniforme) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 96px; --s10: 128px;

  --wrap: 1320px;
  --rail: 190px;
  --header-h: 68px;
  --r: 2px;
}

/* =====================================================================
   DOS AMBIENTES SOBRE EL MISMO SISTEMA
   El cuerpo de la página es claro (papel) y los momentos de "sala de
   control" son oscuros: cabecera, portada, cierre, pie y las consolas.
   Se resuelve redefiniendo las variables por ámbito, así ningún
   componente necesita una variante clara propia.
   ===================================================================== */
main{
  --ink:      #ffffff;
  --ink-2:    #f4f3ef;
  --ink-3:    #edebe5;
  --ink-4:    #e4e1da;
  --line:     #e3e0d9;
  --line-2:   #c9c5bc;
  --edge:     #8d8981;   /* 3:1 sobre blanco, para bordes de controles */

  --tx:       #16161a;
  --tx-2:     #55555b;
  --tx-3:     #6d6d72;

  --signal:   #c24608;   /* naranja para TEXTO sobre claro: 4.9:1 */
  --ok:       #1a7f37;
  --warn:     #8a6100;
  --alarm:    #c22f26;

  background:var(--ink);
  color:var(--tx);
}

/* Franjas que vuelven al ambiente oscuro dentro del cuerpo claro. */
.band--dark{
  --ink:      #0b0b0c;
  --ink-2:    #101011;
  --ink-3:    #141416;
  --ink-4:    #1b1b1e;
  --line:     #26262a;
  --line-2:   #35353b;
  --edge:     #61616a;

  --tx:       #e8e7e3;
  --tx-2:     #9d9d98;
  --tx-3:     #85857f;

  --signal:   #ff6a1a;
  --ok:       #3fb950;
  --warn:     #e3b341;
  --alarm:    #f4503c;

  background:var(--ink);
  color:var(--tx);
}

/* La consola es un aparato: siempre oscura, esté sobre papel o no. */
.console{
  --ink:#0b0b0c; --ink-2:#101011; --ink-3:#141416; --ink-4:#1b1b1e;
  --line:#26262a; --line-2:#35353b;
  --tx:#e8e7e3; --tx-2:#9d9d98; --tx-3:#85857f;
  --signal:#ff6a1a; --ok:#3fb950; --warn:#e3b341; --alarm:#f4503c;
  color:var(--tx);
}

/* Sobre papel, la consola necesita despegarse del fondo. */
main .console{ box-shadow:0 18px 40px -28px rgba(20,18,14,.55); }
.band--dark .console{ box-shadow:none; }

/* Los paneles se distinguen del fondo en las dos alternancias claras. */
main .panel, main .cols > *{ background:#fbfaf8; }
main .band--sunk .panel, main .band--sunk .cols > *{ background:#fff; }
.band--dark .panel, .band--dark .cols > *{ background:var(--ink-2); }

/* En la franja gris el hover no puede pintar del mismo color del fondo. */
main .band--sunk tbody tr:hover,
main .band--sunk .spec:hover{ background:#fff; }

/* ------------------------------ base ------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
/* Raíz a 17px: sube de una vez toda la escala en rem (era 16px y el sitio
   se leía como una consola técnica, no como una página comercial). */
html{ font-size:17px; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 24px); }

body{
  margin:0;
  background:var(--ink);
  color:var(--tx);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.62;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }

img,svg{ max-width:100%; }
a{ color:var(--tx); text-decoration:none; }

h1,h2,h3,h4{ margin:0; font-family:var(--cond); font-weight:700; letter-spacing:-.015em; }
h1{ font-size:clamp(2.5rem,6vw,4.4rem); line-height:.98; letter-spacing:-.028em; }
h2{ font-size:clamp(1.75rem,3.3vw,2.7rem); line-height:1.03; letter-spacing:-.022em; }
h3{ font-family:var(--sans); font-size:1.1rem; font-weight:600; letter-spacing:-.005em; line-height:1.35; }
p{ margin:0 0 var(--s4); }
ul{ margin:0 0 var(--s4); padding-left:1.1rem; }
strong,b{ font-weight:600; color:var(--tx); }

::selection{ background:var(--signal); color:#0b0b0c; }
:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--signal); color:#0b0b0c; padding:12px 20px;
  font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em;
}
.skip-link:focus{ left:0; }

/* --------------------------- estructura --------------------------- */
/* Ningún hijo de grid/flex puede empujar el ancho de la página:
   sin esto, una tabla con min-width o una línea sin cortes desborda. */
.hero__grid > *, .sec > *, .duo > *, .cols > *, .figs > *, .spec > *,
.foot__top > *, .console__body > *, .pairs li > *, .keys li > *, .tw{ min-width:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(16px,4vw,40px); }

/* franja: la unidad base de la página. Cada franja se separa por un filete. */
.band{ border-top:1px solid var(--line); }
.band--flush{ border-top:0; }
.band__in{ padding-block:clamp(48px,7vw,96px); }
.band__in--tight{ padding-block:clamp(28px,3.5vw,44px); }
.band__in--wide{ padding-block:clamp(64px,9vw,128px); }
.band--sunk{ background:var(--ink-2); }

/* rejilla riel + contenido: el riel lleva el índice y la etiqueta */
.sec{ display:grid; grid-template-columns:var(--rail) minmax(0,1fr); gap:clamp(20px,3vw,48px); }
.sec__rail{ position:relative; }
.sec__rail::after{
  content:""; position:absolute; right:0; top:4px; bottom:0; width:1px; background:var(--line);
}
.sec__body{ min-width:0; }
.sec--plain{ grid-template-columns:1fr; }

.idx{
  font-family:var(--mono); font-size:.79rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--tx-3);
  display:block; line-height:1.5;
}
.idx b{ color:var(--signal); font-weight:500; }

.label{
  font-family:var(--mono); font-size:.79rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--signal);
  display:block; margin-bottom:var(--s3);
}
.label--mute{ color:var(--tx-3); }

.lede{ font-size:clamp(1.02rem,1.5vw,1.16rem); line-height:1.55; color:var(--tx-2); max-width:64ch; }
.note{ font-size:.93rem; color:var(--tx-3); }
.max60{ max-width:60ch; }
.max70{ max-width:70ch; }

/* filete horizontal reutilizable */
.rule{ height:1px; background:var(--line); border:0; margin:var(--s6) 0; }

/* ---------------------------- cabecera ---------------------------- */
.header{
  position:sticky; top:0; z-index:100; height:var(--header-h);
  background:var(--ink); border-bottom:1px solid var(--line);
}
.header__in{ height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:var(--s4); }

.brand{ display:inline-flex; align-items:center; gap:10px; height:100%; }
.brand__mark{ width:30px; height:30px; flex:none; }
.brand__tx{ font-family:var(--cond); font-weight:700; font-size:1.2rem; letter-spacing:-.02em; text-transform:uppercase; }
.brand__tx i{ font-style:normal; color:var(--tx-3); }

.nav{ display:flex; align-items:stretch; height:var(--header-h); }
.nav a{
  display:flex; align-items:center; padding:0 var(--s4);
  font-family:var(--mono); font-size:.8rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--tx-2); border-bottom:2px solid transparent;
}
.nav a:hover{ color:var(--tx); background:var(--ink-3); }
.nav a[aria-current="page"]{ color:var(--tx); border-bottom-color:var(--signal); }
.nav .nav__cta{
  margin-left:var(--s3); background:var(--signal); color:#0b0b0c; border-bottom-color:var(--signal);
  font-weight:600;
}
.nav .nav__cta:hover{ background:#ff7f3a; color:#0b0b0c; }

.nav-tg{
  display:none; width:40px; height:40px; padding:0; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:var(--r);
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.nav-tg span{ display:block; width:16px; height:1.5px; background:var(--tx); }
.nav-tg[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav-tg[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-tg[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
.nav-ov{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:90; }

/* ----------------------------- botones ---------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border:1px solid transparent; border-radius:var(--r);
  font-family:var(--mono); font-size:.85rem; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; line-height:1; cursor:pointer;
}
.btn--fill{ background:var(--signal-solid); color:#0b0b0c; font-weight:600; }
.btn--fill:hover{ background:#ff7f3a; }
.btn--line{ border-color:var(--edge); color:var(--tx); background:transparent; }
.btn--line:hover{ border-color:var(--signal); color:var(--signal); }
.btn--sm{ padding:10px 16px; font-size:.79rem; }
.btn--wide{ width:100%; justify-content:center; padding:16px 22px; }
.btn[disabled],.btn.off{ background:var(--ink-4); color:var(--tx-3); border-color:var(--line); cursor:not-allowed; }
.btn svg{ width:19px; height:19px; flex:none; }
.btns{ display:flex; flex-wrap:wrap; gap:10px; }
.btns--mt{ margin-top:var(--s6); }

/* ------------------------- tira de lectura ------------------------ */
/* El detalle firma: una línea de datos como la de un equipo real. */
.readout{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3);
  font-family:var(--mono); font-size:.78rem; letter-spacing:.04em;
  color:var(--tx-3); text-transform:uppercase;
}
.readout span{ white-space:nowrap; }
.readout span + span::before{ content:"·"; margin-right:var(--s3); color:var(--line-2); }
.readout b{ color:var(--tx-2); font-weight:500; }
.readout--band{ padding-block:var(--s3); border-top:1px solid var(--line); }

.dot{ width:6px; height:6px; border-radius:50%; background:var(--tx-3); display:inline-block; flex:none; }
.dot--ok{ background:var(--ok); }
.dot--warn{ background:var(--warn); }
.dot--alarm{ background:var(--alarm); }
.dot--live{ animation:blink 2.6s steps(1,end) infinite; }
@keyframes blink{ 0%,60%{opacity:1} 61%,100%{opacity:.25} }

/* ---------------- franjas de transición con fotografía --------------- */
/* La foto va en una capa aparte que se desplaza con el scroll (paralaje);
   el velo oscuro es estático y pertenece a la franja, para que sus bordes
   coincidan siempre con el corte entre secciones. */
.band--photo{ position:relative; overflow:hidden; isolation:isolate; background:#0b0b0c; }

.band__bg{
  position:absolute; left:0; right:0; top:-14%; bottom:-14%; z-index:0;
  pointer-events:none; will-change:transform;
}
.band__bg picture, .band__bg img{ display:block; width:100%; height:100%; }
.band__bg img{ object-fit:cover; object-position:center; }

/* ------------------------- fondo anclado --------------------------
   La foto se queda quieta contra la pantalla y la franja se desliza por
   encima, como una ventana que pasa sobre una imagen fija.
   Dos detalles que hacen que esto funcione y no son intercambiables:
   · la capa es position:fixed de verdad, no un transform simulado, así
     que la imagen no tiembla en scroll rápido;
   · el recorte lo hace clip-path y no overflow ni contain: overflow no
     recorta elementos fijos, y contain (igual que transform, filter o
     perspective) convertiría a la franja en bloque contenedor, con lo
     que la capa volvería a moverse con la página y no habría efecto.
   Medido en este navegador antes de elegirlo. */
.band--anclada{ clip-path:inset(0); }
.band--anclada .band__bg{
  position:fixed; top:0; left:0; right:auto; bottom:auto;
  width:100%; height:100vh; height:100lvh;   /* lvh: la barra del móvil no lo redimensiona */
  will-change:auto;
}

/* Velo: vertical para fundir con las franjas vecinas + horizontal para
   sostener el texto. Los valores salen de simular el degradado sobre la
   foto real y medir el píxel más claro bajo CADA elemento de texto, en
   todas las posiciones de scroll en que ese elemento está en pantalla.
   Con el fondo anclado la foto ya no recorre solo el alto de la franja
   sino una pantalla completa, así que aparecen recortes más claros que
   antes no se veían: por eso el horizontal subió de .86/.81/.46 a
   .90/.86/.52. Con eso la micro-etiqueta naranja pasa de 3,99:1 a 4,68:1
   y el peor caso de estas franjas queda en 4,68 (AA pide 4,5). */
.band--photo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,11,12,.55) 0%, rgba(11,11,12,0) 30%,
                            rgba(11,11,12,0) 70%, rgba(11,11,12,.55) 100%),
    linear-gradient(90deg,  rgba(11,11,12,.90) 0%, rgba(11,11,12,.86) 45%,
                            rgba(11,11,12,.52) 100%);
}
.band--photo > .wrap{ position:relative; z-index:2; }
/* La marca naranja va encima; a top:0 porque el overflow:hidden de la
   franja recortaría el -1px que usa el resto de las secciones. */
.band.band--photo::before{ top:0; z-index:3; }

.foto{ max-width:60ch; }
.foto h2{ font-size:clamp(1.9rem,3.6vw,3rem); text-wrap:balance; }
.foto .lede{ color:#cfcec9; }

@media (max-width:700px){
  /* Sin paralaje ni anclaje en móvil: la capa calza con la franja y así el
     navegador puede bajar una foto mucho más liviana. Anclada tendría que
     cubrir una pantalla completa de alto y esa foto de 900 px se vería
     ampliada casi al doble. */
  .band__bg{ top:0; bottom:0; will-change:auto; }
  .band--anclada{ clip-path:none; }
  .band--anclada .band__bg{ position:absolute; right:0; bottom:0; width:auto; height:auto; }
}

/* Quien pide menos movimiento ve la foto quieta dentro de su franja. */
@media (prefers-reduced-motion: reduce){
  .band--anclada{ clip-path:none; }
  .band--anclada .band__bg{ position:absolute; right:0; bottom:0; width:auto; height:auto; }
}

@media (max-width:860px){
  /* en pantallas angostas el texto ocupa todo el ancho: el velo se empareja */
  .band--photo::after{
    background:
      linear-gradient(180deg, rgba(11,11,12,.6) 0%, rgba(11,11,12,.35) 35%,
                              rgba(11,11,12,.35) 65%, rgba(11,11,12,.6) 100%),
      linear-gradient(90deg,  rgba(11,11,12,.84) 0%, rgba(11,11,12,.78) 100%);
  }
}

/* ------------------------------ hero ------------------------------ */
.hero{ position:relative; }

/* Portada con fotografía de Santiago detrás. Reutiliza la capa .band__bg
   (y con ella el paralaje), pero lleva su propio velo: la foto es de día
   y bastante más clara que las nocturnas de las transiciones.
   Valores medidos contra el píxel más claro bajo el titular: 9,15:1. */
.hero--foto{ overflow:hidden; isolation:isolate; }
/* El hero es mucho más alto que una franja de transición; con el margen de
   paralaje del 14% la foto había que ampliarla casi al doble. Con 8% calza. */
.hero--foto .band__bg{ top:-8%; bottom:-8%; }

@media (max-width:1100px){
  /* Apilado (texto + formulario) el hero llega a 2.000 px de alto. La foto
     ocupa solo la parte superior y se desvanece hacia el fondo sólido; sin
     esto habría que ampliarla tres veces para cubrir todo. */
  .hero--foto .band__bg{
    top:0; bottom:auto; height:72%; transform:none !important;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  }
}
.hero--foto::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,11,12,.38) 0%,  rgba(11,11,12,.12) 32%,
                            rgba(11,11,12,.12) 70%, rgba(11,11,12,.42) 100%),
    linear-gradient(90deg,  rgba(11,11,12,.80) 0%,  rgba(11,11,12,.74) 50%,
                            rgba(11,11,12,.54) 100%);
}
.hero--foto > .wrap{ position:relative; z-index:2; }

@media (max-width:860px){
  /* apilado: el texto usa todo el ancho, así que el velo se empareja */
  .hero--foto::after{
    background:
      linear-gradient(180deg, rgba(11,11,12,.45) 0%,  rgba(11,11,12,.2) 30%,
                              rgba(11,11,12,.2) 70%, rgba(11,11,12,.5) 100%),
      linear-gradient(90deg,  rgba(11,11,12,.80) 0%,  rgba(11,11,12,.76) 100%);
  }
}
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,64px); align-items:center;
  padding-block:clamp(40px,6vw,80px) clamp(40px,5vw,64px);
}
.hero h1{ margin:var(--s5) 0 var(--s5); }
.hero h1 em{ font-style:normal; color:var(--signal); }
.hero__lede{ max-width:52ch; }

/* lista de puntos: filete arriba, sin iconos decorativos */
.keys{ list-style:none; padding:0; margin:var(--s6) 0 0; border-top:1px solid var(--line); }
.keys li{
  display:grid; grid-template-columns:42px minmax(0,1fr); gap:var(--s3);
  padding:13px 0; border-bottom:1px solid var(--line);
  font-size:1.06rem; color:var(--tx-2);
}
.keys li i{ font-family:var(--mono); font-style:normal; font-size:.78rem; color:var(--signal); padding-top:3px; }
.keys li b{ color:var(--tx); }

/* --------------------- consola / maqueta VMS ---------------------- */
.console{ border:1px solid var(--line-2); background:var(--ink-2); }
.console__top{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px var(--s3); padding:8px 12px;
  border-bottom:1px solid var(--line); background:var(--ink-3);
  font-family:var(--mono); font-size:.74rem; letter-spacing:.05em; color:var(--tx-3);
}
.console__top > span:not(.sp){ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.console__top b{ color:var(--tx-2); font-weight:500; }
.console__top .sp{ flex:1; }
.console__body{ display:grid; grid-template-columns:172px minmax(0,1fr); }

.tree{ border-right:1px solid var(--line); padding:10px 0; background:var(--ink-2); min-width:0; }
.tree h4{
  font-family:var(--mono); font-size:.64rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx-3); padding:0 12px 8px;
}
.tree a, .tree div{
  display:flex; align-items:center; gap:8px; padding:4px 12px;
  font-size:.81rem; color:var(--tx-2); min-width:0;
}
.tree .on{ background:var(--ink-4); color:var(--tx); box-shadow:inset 2px 0 0 var(--signal); }
.tree .sub{ padding-left:24px; color:var(--tx-3); }
.tree span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.mon{ display:flex; flex-direction:column; min-width:0; background:#050506; }
.cams{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); padding:1px; flex:1; }
.cam{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:
    linear-gradient(196deg, #1c1c20 0%, #0e0e11 55%, #17171b 100%);
}
.cam::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
}
/* Luz que recorre la escena: simula imagen viva sin ser un "shimmer".
   Cada celda arranca en un momento distinto (--d) para que no latan juntas. */
.cam::before{
  content:""; position:absolute; inset:-40% -60%; z-index:1;
  background:linear-gradient(74deg, transparent 38%, rgba(255,255,255,.05) 50%, transparent 62%);
  transform:translateX(-30%);
}
.live .cam::before{ animation:pan 9s linear infinite; animation-delay:var(--d, 0s); }
@keyframes pan{ 0%{ transform:translateX(-30%) } 100%{ transform:translateX(30%) } }

.cam{ transition:box-shadow .18s linear; }
.cam--sel{ z-index:3; }
/* sello de hora sobre la cámara enfocada, como el OSD de un grabador */
.cam .osd{
  position:absolute; right:5px; bottom:4px; z-index:3; opacity:0;
  font-family:var(--mono); font-size:.54rem; letter-spacing:.02em; color:rgba(232,231,227,.8);
}
.cam--sel .osd{ opacity:1; }
.cam--rec u{ background:var(--warn); }
.cam i{
  position:absolute; left:5px; top:4px; z-index:2; font-style:normal;
  font-family:var(--mono); font-size:.61rem; letter-spacing:.05em; color:var(--tx-2);
}
.cam b{
  position:absolute; left:5px; bottom:4px; z-index:2; font-weight:400;
  font-size:.63rem; color:rgba(232,231,227,.66);
  max-width:calc(100% - 10px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cam u{
  position:absolute; right:5px; top:5px; z-index:2; width:5px; height:5px; border-radius:50%;
  background:var(--alarm); animation:blink 2.6s steps(1,end) infinite;
}
.cam--sel{ box-shadow:inset 0 0 0 1px var(--signal); }
.cam--nosig{ background:#0a0a0b; display:grid; place-items:center; }
.cam--nosig::before{
  content:"SIN SEÑAL"; z-index:2; font-family:var(--mono); font-size:.55rem;
  letter-spacing:.16em; color:var(--tx-3);
}
.console__bar{
  display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
  padding:7px 10px; border-top:1px solid var(--line); background:var(--ink-3);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; color:var(--tx-3);
}
.key{
  border:1px solid var(--line); padding:3px 8px; border-radius:var(--r);
  color:var(--tx-2); background:var(--ink-2); cursor:default;
}
.key--on{ border-color:var(--signal); color:var(--signal); }
.key[data-grid]{ cursor:pointer; }
.key[data-grid]:hover{ border-color:var(--line-2); color:var(--tx); }
.bar-sp{ flex:1; min-width:40px; }

/* ------------------- línea de tiempo de reproducción ------------------ */
.tl{ border-top:1px solid var(--line); background:var(--ink-3); padding:8px 10px; }
.tl__bar{
  position:relative; height:10px; border:1px solid var(--line); background:var(--ink);
  overflow:hidden;
}
/* tramos con grabación (naranja apagado) y huecos sin grabación (gris) */
.tl__bar i{ position:absolute; top:0; bottom:0; background:var(--signal-d); opacity:.55; }
.tl__bar i.gap{ background:var(--line-2); opacity:1; }
.tl__head{ position:absolute; top:-2px; bottom:-2px; width:1px; background:var(--tx); z-index:2; }
.tl__head::before{
  content:""; position:absolute; top:-2px; left:-2px; width:5px; height:5px; background:var(--tx);
}
.tl__lbl{
  display:flex; justify-content:space-between; margin-top:5px;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; color:var(--tx-3);
}

/* --------------------- demo de descarga reanudable ------------------- */
.dlx__hd{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s3); }
.dlx__pct{ font-family:var(--mono); font-size:.78rem; color:var(--tx); }
.dlx__total{ height:3px; background:var(--ink); border:1px solid var(--line); overflow:hidden; }
.dlx__total i{ display:block; height:100%; width:0; background:var(--signal); transition:width .35s linear; }
.dlx{ list-style:none; padding:0; margin:var(--s4) 0 0; border-top:1px solid var(--line); }
.dlx > li{ padding:9px 0; border-bottom:1px solid var(--line); }
.dlx__row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; color:var(--tx-3);
}
.dlx__row b{ color:var(--tx-2); font-weight:500; }
.dlx__st{ white-space:nowrap; }
.dlx li[data-st="run"]  .dlx__st{ color:var(--signal); }
.dlx li[data-st="wait"] .dlx__st{ color:var(--warn); animation:blink 1.1s steps(1,end) infinite; }
.dlx li[data-st="done"] .dlx__st{ color:var(--ok); }
.dlx__bar{ position:relative; height:2px; background:var(--ink); margin-top:6px; }
.dlx__bar i{ display:block; height:100%; width:0; background:var(--line-2); }
.dlx li[data-st="run"]  .dlx__bar i{ background:var(--signal); }
.dlx li[data-st="wait"] .dlx__bar i{ background:var(--warn); }
.dlx li[data-st="done"] .dlx__bar i{ background:var(--ok); opacity:.55; }
/* Cicatriz del corte. La animación dura nueve segundos y después el panel
   se queda quieto en "todo completo": el argumento entero se perdía en el
   estado final y en cualquier captura de pantalla. Esta marca ámbar queda
   clavada en el minuto donde se cayó el enlace, aunque el tramo termine
   verde, y con el registro de abajo la historia se lee sin animación. */
.dlx__cut{ position:absolute; top:-4px; bottom:-4px; width:1px; background:var(--warn); }
.dlx__cut::after{ content:""; position:absolute; left:-1px; top:-3px; width:3px; height:3px; background:var(--warn); }

.dlx__log{
  margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.03em; color:var(--tx-3);
  min-height:2.6em;
}
.dlx__log b{ color:var(--warn); font-weight:500; }

/* Registro duro: las tres cifras que sostienen la promesa cuando la
   animación ya pasó. Se llenan solas a medida que ocurre la simulación. */
.dlx__sum{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3);
  margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line);
}
.dlx__sum span{
  display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tx-3);
}
.dlx__sum b{
  display:block; margin-top:4px; font-family:var(--mono); font-size:.88rem;
  font-weight:500; color:var(--tx);
}
.dlx__sum b.ok{ color:var(--ok); }

/* --------------------------- barra de avance -------------------------- */
#scan{
  position:fixed; left:0; top:0; height:2px; width:100%; z-index:120;
  background:var(--signal); transform:scaleX(0); transform-origin:0 50%;
}

/* ------------------- filete que se dibuja al entrar ------------------- */
.band{ position:relative; }
/* La marca arranca donde arranca el contenido, no en el borde de la
   ventana: en pantallas anchas quedaba flotando a 300 px de la rejilla. */
.band::before{
  content:""; position:absolute; top:-1px; height:1px; width:64px;
  left:calc(max(0px, (100% - var(--wrap)) / 2) + clamp(16px, 4vw, 40px));
  background:var(--signal); transform:scaleX(0); transform-origin:0 50%;
}
.band.vis::before{ transform:scaleX(1); transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.band--flush::before{ display:none; }

/* el índice de sección acompaña al scroll dentro de su franja */
@media (min-width:1101px){
  .sec__rail .idx{ position:sticky; top:calc(var(--header-h) + 24px); }
}

/* marcas de registro en las esquinas (detalle firma) */
.marks{ position:relative; }
.marks::before,.marks::after{
  content:""; position:absolute; width:9px; height:9px; pointer-events:none;
  border-color:var(--line-2); border-style:solid;
}
.marks::before{ left:-1px; top:-1px; border-width:1px 0 0 1px; border-color:var(--signal); }
.marks::after{ right:-1px; bottom:-1px; border-width:0 1px 1px 0; border-color:var(--signal); }

/* ------------------------ cifras / indicadores -------------------- */
.figs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-left:1px solid var(--line); }
.figs > div{ padding:var(--s5) var(--s5) var(--s5) var(--s5); border-right:1px solid var(--line); }
.figs b{
  display:block; font-family:var(--cond); font-size:clamp(2rem,3.6vw,3rem);
  font-weight:700; line-height:1; letter-spacing:-.03em; color:var(--tx);
}
/* Solo el span hijo directo del bloque es la etiqueta. Los <span> que van
   DENTRO de <b> son el número que se anima y tienen que heredar todo. */
.figs > div > span{ display:block; margin-top:10px; font-size:.93rem; color:var(--tx-2); max-width:26ch; }
.figs b span{ font:inherit; color:inherit; letter-spacing:inherit; }
.figs em{ font-style:normal; color:var(--signal); }

/* ----------------------- filas de especificación ------------------ */
/* Sustituye a las tarjetas con icono: filas densas tipo ficha técnica */
.specs{ border-top:1px solid var(--line); }
.spec{
  display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:var(--s3) clamp(20px,3vw,48px);
  padding:var(--s5) 0; border-bottom:1px solid var(--line);
}
.spec:hover{ background:var(--ink-2); }
.spec__k{ display:flex; gap:var(--s3); align-items:baseline; }
.spec__k i{ font-family:var(--mono); font-style:normal; font-size:.82rem; color:var(--tx-3); }
.spec__k h3{ margin:0; }
/* Glifo de la fila: el mismo trazo de 24x24 del resto del sistema, servido
   a 20 px. No decora, nombra la función: la fila se lee identificador,
   glifo, nombre. Como es un ítem sin texto, la caja se alinea por su borde
   inferior con la línea base del título; el desplazamiento la sube hasta la
   altura de las mayúsculas, que es donde el ojo espera encontrarla. */
.spec__ico{ flex:0 0 20px; color:var(--tx-3); transform:translateY(3px); }
.spec__ico svg{ display:block; width:20px; height:20px; }
.spec:hover .spec__ico{ color:var(--signal); }
.spec__v{ color:var(--tx-2); font-size:1rem; }
.spec__v p{ margin:0; }
.spec__v p + p{ margin-top:var(--s3); }

/* dos columnas de datos densas */
.pairs{ list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
.pairs li{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:var(--s4);
  padding:11px 0; border-bottom:1px solid var(--line); font-size:.97rem; color:var(--tx-2);
}
.pairs li b{ color:var(--tx); font-weight:500; }
.pairs li b.sig{ color:var(--signal); }   /* marca de cuál de los dos somos */
.pairs--mono li b{ font-family:var(--mono); font-size:.78rem; letter-spacing:.03em; }

/* lista de puntos técnica */
.ticks{ list-style:none; padding:0; margin:var(--s4) 0 0; }
.ticks li{
  position:relative; padding-left:22px; margin-bottom:9px;
  font-size:1rem; color:var(--tx-2);
}
.ticks li::before{
  content:"—"; position:absolute; left:0; top:0;
  font-family:var(--mono); font-size:.8rem; color:var(--signal);
}
.ticks li b{ color:var(--tx); }

/* ------------------- dónde corre cada componente ------------------ */
.plat{ list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
.plat > li{
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:var(--s4);
  padding:var(--s4) 0; border-bottom:1px solid var(--line);
}
.plat__ico{ width:34px; height:34px; color:var(--tx-2); }
.plat__ico svg{ width:100%; height:100%; }
/* Tux va en tinta plena, no teñido de naranja: es una marca reconocible
   y se lee mejor así. La fila principal se distingue por el contraste
   (tinta llena) frente al gris de las otras. */
.plat > li.is-main .plat__ico{ color:var(--tx); }
.plat b{
  display:block; font-family:var(--mono); font-size:.8rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--tx); margin-bottom:3px;
}
/* solo el span de texto, no el que envuelve el icono */
.plat > li > div > span{ display:block; font-size:.98rem; color:var(--tx-2); }
.plat em{ font-style:normal; color:var(--signal); }

/* icono junto a un título de sección */
.h-ico{ display:flex; align-items:center; gap:var(--s3); }
.h-ico > svg{ width:38px; height:38px; flex:none; color:var(--tx); }
.readout svg{ width:20px; height:20px; vertical-align:-5px; color:var(--tx-2); }

/* ------------------------------ panel ----------------------------- */
.panel{ border:1px solid var(--line); background:var(--ink-2); padding:var(--s5); }
.panel--flat{ background:transparent; }
.panel h3{ margin:0 0 var(--s3); }
.panel p{ color:var(--tx-2); font-size:1rem; }
.panel p:last-child{ margin-bottom:0; }
.panel__hd{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding-bottom:var(--s3); margin-bottom:var(--s4); border-bottom:1px solid var(--line);
}
.panel__hd .label{ margin:0; }

.cols{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.cols > *{ background:var(--ink-2); padding:var(--s5); }
.cols--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cols--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cols h3{ margin:0 0 var(--s3); }
.cols p{ margin:0; color:var(--tx-2); font-size:1rem; }

.duo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,3.5vw,56px); align-items:start; }
.duo--wide{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
.duo--rev > *:first-child{ order:2; }

/* --------------------------- secuencia ---------------------------- */
.seq{ border-top:1px solid var(--line); }
.seq > li{
  display:grid; grid-template-columns:56px minmax(0,280px) minmax(0,1fr);
  gap:var(--s4); padding:var(--s5) 0; border-bottom:1px solid var(--line);
  list-style:none;
}
.seq{ list-style:none; padding:0; margin:0; counter-reset:paso; }
.seq > li::before{
  counter-increment:paso; content:counter(paso, decimal-leading-zero);
  font-family:var(--mono); font-size:.86rem; color:var(--signal); padding-top:2px;
}
.seq h3{ margin:0; }
.seq p{ margin:0; color:var(--tx-2); font-size:1rem; }

/* ----------------------------- tablas ----------------------------- */
.tw{ overflow-x:auto; border:1px solid var(--line); }
table{ width:100%; border-collapse:collapse; min-width:560px; font-size:.96rem; }
thead th{
  font-family:var(--mono); font-size:.76rem; font-weight:500; letter-spacing:.11em;
  text-transform:uppercase; color:var(--tx-2); background:var(--ink-3); font-size:.76rem;
}
th,td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
td{ color:var(--tx-2); }
td b, th{ color:var(--tx); font-weight:500; }
tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover{ background:var(--ink-2); }
table.k th{ background:transparent; font-family:var(--sans); font-size:.9rem; text-transform:none; letter-spacing:0; color:var(--tx); width:42%; }

/* ------------------------------ avisos ---------------------------- */
.msg{ border:1px solid var(--line); border-left:2px solid var(--tx-3); padding:var(--s4) var(--s5); font-size:1rem; color:var(--tx-2); max-width:84ch; }
.msg strong{ color:var(--tx); }
.msg--ok{ border-left-color:var(--ok); }
.msg--warn{ border-left-color:var(--warn); }
.msg--err{ border-left-color:var(--alarm); }
.msg--info{ border-left-color:var(--signal); }
.msg ul{ margin:var(--s2) 0 0; }

/* ------------------------------ estado ---------------------------- */
.stat{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.77rem; letter-spacing:.09em; text-transform:uppercase;
  border:1px solid var(--line); padding:5px 10px; border-radius:var(--r); color:var(--tx-2);
}
.stat--ok{ color:var(--ok); border-color:color-mix(in srgb, currentColor 45%, transparent); }
.stat--warn{ color:var(--warn); border-color:color-mix(in srgb, currentColor 45%, transparent); }
.stat--sig{ color:var(--signal); border-color:color-mix(in srgb, currentColor 45%, transparent); }

/* ------------------ formulario de captación del hero ---------------- */
.panel--form{ padding:clamp(18px,2.2vw,28px); }
.panel--form .form{ gap:var(--s3); }
.panel--form .panel__hd{ margin-bottom:var(--s3); }
.panel--form .btn--wide{ margin-top:var(--s2); }

.form-ok{ padding:var(--s4) 0 var(--s2); }
.form-ok h3{
  font-family:var(--cond); font-size:1.7rem; font-weight:700;
  letter-spacing:-.02em; margin-bottom:var(--s3);
}
.form-ok h3::before{
  content:"✓"; color:var(--ok); margin-right:.4em; font-family:var(--sans); font-size:.9em;
}
.form-ok p{ color:var(--tx-2); }

/* Que los controles nativos (desplegables, barras) sigan el ambiente. */
.band--dark{ color-scheme:dark; }
main{ color-scheme:light; }

/* --------------------------- formularios -------------------------- */
.form{ display:grid; gap:var(--s4); }
.row2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); }
.f{ display:grid; gap:6px; }
.f > label{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; color:var(--tx-3);
}
.f > label u{ text-decoration:none; color:var(--tx-3); }
.f input,.f select,.f textarea{
  width:100%; padding:13px 14px; font:inherit; font-size:1rem; color:var(--tx);
  background:var(--ink); border:1px solid var(--edge); border-radius:var(--r);
}
.f textarea{ min-height:132px; resize:vertical; }
.f input:hover,.f select:hover,.f textarea:hover{ border-color:var(--tx-2); }
.f input:focus,.f select:focus,.f textarea:focus{ outline:none; border-color:var(--signal); }
.f input::placeholder,.f textarea::placeholder{ color:var(--tx-3); }
.f-check{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start; }
.f-check input{ width:auto; margin-top:4px; accent-color:var(--signal); }
.f-check label{ font-size:.94rem; color:var(--tx-2); font-family:var(--sans); text-transform:none; letter-spacing:0; }
.hp{ position:absolute; left:-9999px; }

/* ---------------------------- descarga ---------------------------- */
.dl{ border:1px solid var(--line-2); background:var(--ink-2); }
.dl__hd{ display:flex; align-items:center; gap:var(--s4); padding:var(--s5); border-bottom:1px solid var(--line); }
.dl__ico{ width:48px; height:48px; flex:none; color:var(--tx-2); }
.dl__ico svg{ width:100%; height:100%; }
.dl__hd h3{ margin:0; font-family:var(--mono); font-size:.94rem; letter-spacing:.02em; }
.dl__hd p{ margin:4px 0 0; font-size:.9rem; color:var(--tx-3); }
.dl__body{ padding:var(--s5); }
.dl__meta{ list-style:none; margin:var(--s5) 0 0; padding:0; border-top:1px solid var(--line); }
.dl__meta li{
  display:flex; justify-content:space-between; gap:var(--s4); padding:9px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.79rem; letter-spacing:.03em; color:var(--tx-3);
  text-transform:uppercase;
}
.dl__meta li b{ color:var(--tx); font-weight:500; }

/* ------------------------------ faq ------------------------------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:var(--s4) 0;
  display:grid; grid-template-columns:minmax(0,1fr) 24px; gap:var(--s4); align-items:center;
  font-weight:500; font-size:1.1rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--mono); color:var(--signal); text-align:right; }
.faq details[open] summary::after{ content:"−"; }
.faq details > div{ padding:0 0 var(--s5); color:var(--tx-2); font-size:1.02rem; max-width:78ch; }
.faq details > div p:last-child{ margin:0; }

/* ------------------------------ cierre ---------------------------- */
.close{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s6); align-items:end; }
.close h2{ max-width:20ch; }
.close p{ color:var(--tx-2); max-width:52ch; margin:var(--s4) 0 0; }

/* ------------------------------ footer ---------------------------- */
.foot{ border-top:1px solid var(--line); background:var(--ink-2); }
.foot__top{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); padding-block:var(--s7); }
.foot__desc{ color:var(--tx-2); font-size:.97rem; max-width:44ch; margin:var(--s4) 0 var(--s5); }
.foot h4{
  font-family:var(--mono); font-size:.76rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tx-3); margin:0 0 var(--s3);
}
.foot__list{ list-style:none; padding:0; margin:0; }
.foot__list li{ padding:5px 0; }
.foot__list a{ color:var(--tx-2); font-size:.95rem; }
.foot__list a:hover{ color:var(--signal); }
.foot__list span{ color:var(--tx-3); font-size:.93rem; }
.foot__end{
  border-top:1px solid var(--line); padding-block:var(--s4);
  display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.05em; color:var(--tx-3); text-transform:uppercase;
}
.foot__end p{ margin:0; max-width:62ch; text-transform:none; letter-spacing:0; font-family:var(--sans); font-size:.78rem; }

/* ------------------------ legibilidad de línea ---------------------- */
/* En monitores anchos el contenedor de 1320px deja líneas de más de 130
   caracteres. Se limita la medida de los bloques de texto corrido: la
   rejilla sigue ocupando el ancho, el párrafo no. */
.plat > li > div > span{ max-width:80ch; }
.seq p{ max-width:84ch; }
.spec__v{ max-width:88ch; }
.ticks li{ max-width:86ch; }
.cols p{ max-width:70ch; }

/* --------------------------- utilidades --------------------------- */
.mt1{ margin-top:var(--s4); } .mt2{ margin-top:var(--s5); }
.mt3{ margin-top:var(--s6); } .mt4{ margin-top:var(--s7); }
.sig{ color:var(--signal); }
.mono{ font-family:var(--mono); }

/* ------------------------------ 404 ------------------------------- */
.p404{ padding-block:clamp(64px,12vw,160px); }
.p404 h1{ font-size:clamp(4rem,14vw,10rem); line-height:.85; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* --------------------------- adaptativo --------------------------- */
@media (max-width:1100px){
  .sec{ grid-template-columns:1fr; gap:var(--s4); }
  .sec__rail::after{ display:none; }
  .sec__rail{ display:flex; align-items:center; gap:var(--s3); padding-bottom:var(--s2); }
  .hero__grid{ grid-template-columns:1fr; align-items:start; }
  .duo,.duo--wide{ grid-template-columns:1fr; }
  .duo--rev > *:first-child{ order:0; }
  .figs{ grid-template-columns:repeat(2,minmax(0,1fr)); border-left:0; }
  .figs > div{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .figs > div:nth-child(2n){ border-right:0; }
  .close{ grid-template-columns:1fr; align-items:start; }
}

@media (max-width:900px){
  .cols--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot__top{ grid-template-columns:1fr 1fr; }
  .spec{ grid-template-columns:1fr; gap:var(--s3); }
  .seq > li{ grid-template-columns:40px minmax(0,1fr); }
  .seq > li h3{ grid-column:2; }
  .seq > li p{ grid-column:2; }
}

@media (max-width:960px){
  .nav-tg{ display:flex; }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0; z-index:95; height:auto;
    flex-direction:column; align-items:stretch;
    background:var(--ink-2); border-bottom:1px solid var(--line);
    transform:translateY(-120%); transition:transform .22s ease;
    padding:var(--s2) clamp(16px,4vw,40px) var(--s5);
  }
  .nav.open{ transform:translateY(0); }
  .nav a{ padding:14px 0; font-size:.82rem; border-bottom:1px solid var(--line); }
  .nav a[aria-current="page"]{ color:var(--signal); border-bottom-color:var(--line); }
  .nav .nav__cta{ margin:var(--s4) 0 0; justify-content:center; padding:14px; border:0; }
}

@media (max-width:700px){
  body{ font-size:15px; }
  .console__top .op{ display:none; }
  .console__body{ grid-template-columns:1fr; }
  .tree{ display:none; }
  .cams{ grid-template-columns:repeat(3,1fr); }
  .cols--2,.cols--3{ grid-template-columns:1fr; }
  .row2{ grid-template-columns:1fr; }
  .foot__top{ grid-template-columns:1fr; gap:var(--s6); }
  .pairs li{ grid-template-columns:1fr; gap:2px; }
  .btns .btn{ width:100%; justify-content:center; }
  .figs{ grid-template-columns:1fr; }
  .figs > div{ border-right:0; }
}

/* =================================================================== */
/* ASISTENTE FLOTANTE                                                   */
/* Reemplaza al boton de WhatsApp. Es un aparato, como las consolas:    */
/* siempre oscuro, esquinas rectas y filetes de 1px. Redefine las       */
/* variables del ambiente oscuro para que los componentes reutilizados  */
/* (.f, .btn, .dot, .label) salgan bien sin variante propia.            */
/* =================================================================== */
.chat{ position:fixed; right:16px; bottom:16px; z-index:90; }

/* El lanzador usa el naranja de señal, el mismo lenguaje que los botones
   de acción principal del sitio: es lo único que debe destacar en la
   esquina. Filete negro de 1px en vez de sombra, como el resto. */
.chat__tg{
  display:inline-flex; align-items:center; gap:11px;
  padding:15px 20px; cursor:pointer;
  background:#ff6a1a; border:1px solid #0b0b0c; color:#0b0b0c;
  /* Menos interletrado que el resto de las etiquetas: en versalitas anchas
     el texto se lee "aireado" y pesa menos. Acá tiene que pesar. */
  font-family:var(--mono); font-size:.94rem; font-weight:600;
  letter-spacing:.03em; text-transform:uppercase; line-height:1;
}
.chat__tg:hover{ background:#ff7f3a; }
.chat__tg:focus-visible{ outline:2px solid #0b0b0c; outline-offset:3px; }
.chat__tg-ico{ display:block; width:24px; height:24px; }
.chat__tg-ico svg{ display:block; width:100%; height:100%; stroke-width:2; }
.chat.is-open .chat__tg{ display:none; }

/* Piloto de "en línea": mismo parpadeo por pasos que usa el sitio para el
   sistema en producción. Es un estado, no un adorno, y en visión
   periférica es lo que engancha el ojo. */
.chat__tg-luz{ width:8px; height:8px; background:#0b0b0c; }

/* Llamada de atención: dos golpes y se acaba. El JS la dispara a los 4
   segundos solo si el visitante todavía no abrió el asistente.
   Anima únicamente transform: si la animación no corre (pestaña oculta,
   webview, ahorro de energía), el botón se ve igual de bien. Nunca la
   visibilidad depende del movimiento. */
.chat__tg--llama{ animation:chat-tg-llama .58s ease-in-out 2; }
@keyframes chat-tg-llama{
  0%,100%{ transform:none; }
  35%    { transform:translateY(-6px); }
  70%    { transform:translateY(0); }
}

.chat__panel{
  --ink:#0b0b0c; --ink-2:#101011; --ink-3:#141416; --ink-4:#1b1b1e;
  --line:#26262a; --line-2:#35353b; --edge:#61616a;
  --tx:#e8e7e3; --tx-2:#9d9d98; --tx-3:#85857f;
  --signal:#ff6a1a; --ok:#3fb950; --warn:#e3b341; --alarm:#f4503c;

  display:flex; flex-direction:column;
  width:min(380px, calc(100vw - 32px)); max-height:min(76vh, 640px);
  background:var(--ink-2); border:1px solid var(--line-2); color:var(--tx);
}
.chat__panel[hidden]{ display:none; }
.chat.is-open .chat__panel{ animation:chat-in .16s ease-out; }
@keyframes chat-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.chat__hd{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:13px 14px; border-bottom:1px solid var(--line); background:var(--ink-3);
}
.chat__hd b{ display:block; font-family:var(--cond); font-size:1.02rem; letter-spacing:.01em; }
.chat__hd span span.dot{ margin-right:5px; }
.chat__hd > div > span{
  display:block; margin-top:3px;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tx-3);
}
.chat__x{
  flex:none; width:30px; height:30px; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid transparent; color:var(--tx-3);
}
.chat__x svg{ width:17px; height:17px; }
.chat__x:hover{ color:var(--tx); border-color:var(--line-2); }

.chat__log{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  padding:var(--s4) 14px; display:flex; flex-direction:column; gap:var(--s4);
}
.chat__m{ font-size:.95rem; line-height:1.5; }
.chat__m p{ margin:0 0 7px; }
.chat__m p:last-child{ margin-bottom:0; }
.chat__m ul{ margin:7px 0 0; padding:0; list-style:none; }
.chat__m li{ position:relative; padding-left:16px; margin-bottom:5px; color:var(--tx-2); }
.chat__m li::before{ content:"—"; position:absolute; left:0; color:var(--signal); font-size:.78rem; }
.chat__m--bot{ border-left:2px solid var(--line-2); padding-left:11px; color:var(--tx-2); }
.chat__m--bot p:first-child{ color:var(--tx); }
.chat__m--yo{
  align-self:flex-end; max-width:86%; padding:9px 12px;
  background:var(--ink-4); border:1px solid var(--line); color:var(--tx);
}
.chat__m--err{ border-left-color:var(--alarm); }

/* Tres puntos mientras el servidor responde: es el unico movimiento
   decorativo del widget y se apaga con "movimiento reducido". */
.chat__esc{ display:flex; gap:4px; padding-left:13px; }
.chat__esc i{ width:4px; height:4px; background:var(--tx-3); animation:chat-pt 1s steps(1,end) infinite; }
.chat__esc i:nth-child(2){ animation-delay:.15s; }
.chat__esc i:nth-child(3){ animation-delay:.3s; }
@keyframes chat-pt{ 0%,60%{ opacity:.25; } 30%{ opacity:1; } }

.chat__chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px var(--s4); }
.chat__chip{
  padding:7px 10px; cursor:pointer;
  background:transparent; border:1px solid var(--edge); color:var(--tx-2);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  text-transform:uppercase; line-height:1;
}
.chat__chip:hover{ border-color:var(--signal); color:var(--signal); }

.chat__in{ display:grid; grid-template-columns:minmax(0,1fr) 46px; border-top:1px solid var(--line); }
.chat__in input{
  padding:14px; font:inherit; font-size:.95rem; color:var(--tx);
  background:var(--ink); border:0; border-radius:0;
}
.chat__in input::placeholder{ color:var(--tx-3); }
.chat__in input:focus{ outline:none; background:var(--ink-3); }
.chat__go{
  display:grid; place-items:center; cursor:pointer;
  background:var(--ink); border:0; border-left:1px solid var(--line); color:var(--tx-2);
}
.chat__go svg{ width:19px; height:19px; }
.chat__go:hover{ color:var(--signal); }

.chat__pie{
  margin:0; padding:9px 14px; border-top:1px solid var(--line); background:var(--ink-3);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--tx-3);
}
.chat__pie a{ color:var(--tx-2); border-bottom:1px solid var(--line-2); }
.chat__pie a:hover{ color:var(--signal); border-color:var(--signal); }

/* Formularios dentro de la conversacion */
.chat__form{ display:grid; gap:var(--s3); margin-top:var(--s3); }
.chat__form .f > label{ font-size:.66rem; letter-spacing:.08em; }
.chat__form .f input,.chat__form .f select,.chat__form .f textarea{ padding:9px 11px; font-size:.92rem; }
.chat__form .f textarea{ min-height:76px; }
.chat__form .row2{ gap:var(--s3); }
.chat__form .btn{ margin-top:2px; }
.chat__dl{ margin-top:var(--s3); }

@media (max-width:520px){
  .chat{ right:10px; bottom:10px; left:10px; }
  .chat__tg{ width:100%; justify-content:center; }
  .chat__panel{ width:100%; max-height:82vh; }
  .chat__form .row2{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .chat.is-open .chat__panel{ animation:none; }
  .chat__esc i{ animation:none; opacity:.6; }
  .chat__tg--llama{ animation:none; }
}