/* Segtelco — sistema visual del sitio.
   Depende de tokens.css: aca no se define ni un color literal.
   Motivo conductor: la CONSOLA. Segtelco no vende equipos, vende que la
   operacion siga arriba; el lenguaje visual es el de un panel supervisado —
   mono en las etiquetas, reglas finas, puntos de estado, cifras que cuentan. */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3, .display { font-family: var(--font-display); }

/* Transicion de color SOLO mientras se cambia el tema.
   Antes esto estaba declarado sobre `body *` de forma permanente: el navegador
   mantenia el registro de la transicion para cada elemento de la pagina y eso
   se llevaba la mayor parte de los 684 ms de Style & Layout que medimos en
   movil. El JS pone `.cambiando-tema` al pulsar el toggle y la saca al terminar. */
:root.cambiando-tema body,
:root.cambiando-tema body * {
  transition: background-color 240ms var(--ease), border-color 240ms var(--ease),
              color 240ms var(--ease);
}

/* ══ acceso ══════════════════════════════════════════════ */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--boton); color: var(--n-0);
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.saltar:focus { left: 0; }

/* ══ HEADER ══════════════════════════════════════════════ */
.header {
  position: sticky; top: 0; z-index: 80;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline);
  transition: box-shadow 260ms var(--ease), background-color 240ms var(--ease);
}
.header.is-stuck { box-shadow: var(--sombra-sutil); }
.header__in { display: flex; align-items: center; gap: 34px; height: var(--header-h); }

/* El SVG del logo es 205x77. Antes se declaraba 205x30: el navegador lo
   letterboxeaba a 30px de alto dentro de una caja de 205px de ancho — por eso
   se veia diminuto y descolgado. Ahora va con su proporcion real. */
.header__logo { display: flex; align-items: center; flex: 0 0 auto; }
.header__logo img { height: 60px; width: auto; display: block; }
.header__logo img.solo-oscuro { display: none; }
:root[data-theme="dark"] .header__logo img.solo-claro  { display: none; }
:root[data-theme="dark"] .header__logo img.solo-oscuro { display: block; }

.nav { position: relative; display: flex; gap: 26px; margin-left: auto; }
.nav a {
  position: relative;
  font-size: 14.5px; font-weight: 500; color: var(--fg);
  text-decoration: none; padding: 6px 0; letter-spacing: -.005em;
  white-space: nowrap;   /* antes que partirse en dos lineas, que se apriete */
  transition: color 200ms var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accion); transform: scaleX(0); transform-origin: right;
  transition: transform 320ms var(--ease-out);
}
.nav a:hover { color: var(--fg-strong); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav a.is-active { color: var(--fg-strong); font-weight: 600; }

.panel-movil__nav a small { display: block; font-size: 12px; font-weight: 400; opacity: .6; margin-top: 2px; }

/* indicador de scroll-spy: una barra que se desliza entre items */
.nav__ind {
  position: absolute; bottom: 0; left: 0; height: 2px; width: 0;
  background: var(--accion); border-radius: 2px;
  opacity: 0; pointer-events: none;
  transition: transform 420ms var(--ease-out), width 420ms var(--ease-out),
              opacity 260ms var(--ease);
}
.nav__ind.on { opacity: 1; }

.header__acciones { display: flex; align-items: center; gap: 12px; }

/* ══ TOGGLE DIA/NOCHE ════════════════════════════════════ */
.tema {
  position: relative; width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--border);
  background: transparent; color: var(--fg-strong); cursor: pointer;
  transition: border-color 200ms var(--ease), transform 300ms var(--ease-out);
}
.tema:hover { border-color: var(--accion); transform: rotate(-18deg); }
.tema svg { width: 19px; height: 19px; }
.tema .luna { display: none; }
:root[data-theme="dark"] .tema .sol  { display: none; }
:root[data-theme="dark"] .tema .luna { display: block; }

.barrido {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  clip-path: circle(0% at var(--ox, 90%) var(--oy, 50px));
  transition: clip-path 420ms cubic-bezier(.65,0,.35,1), opacity 220ms ease 400ms;
}
.barrido[data-target="dark"]  { background: radial-gradient(circle at 35% 40%, var(--grafito-800), var(--grafito-950) 72%); }
.barrido[data-target="light"] { background: radial-gradient(circle at 35% 40%, var(--n-0), var(--n-100) 72%); }
.barrido.entra { clip-path: circle(165% at var(--ox, 90%) var(--oy, 50px)); }
.barrido.sale  { opacity: 0; }

/* ══ BOTONES ═════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color 200ms var(--ease), color 200ms var(--ease),
              transform 200ms var(--ease), border-color 200ms var(--ease),
              box-shadow 240ms var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn .flecha { transition: transform 260ms var(--ease-out); }
.btn:hover .flecha { transform: translateX(4px); }

.btn--primary { background: var(--boton); color: var(--n-0); }
.btn--primary:hover { background: var(--boton-hover); box-shadow: 0 10px 26px var(--accion-wash); }
.btn--light { background: var(--n-0); color: var(--grafito-950); }
.btn--light:hover { background: var(--n-100); }
.btn--ghost { background: transparent; color: var(--ink-fg); border-color: var(--ink-border); }
.btn--ghost:hover { background: var(--ink-surface); border-color: var(--ink-fg-mut); }
.btn--linea { background: transparent; color: var(--fg-strong); border-color: var(--border); }
.btn--linea:hover { border-color: var(--accion); color: var(--accion-text); }

/* ══ PILL DE ESTADO — el verde solo vive aca ═════════════ */
.estado {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
  background: var(--estado-wash); color: var(--estado);
  border: 1px solid var(--estado-borde);
}
.estado__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--verde-500);
  box-shadow: 0 0 0 0 var(--estado-borde);
  animation: latido 2.4s ease-in-out infinite;
}
@keyframes latido {
  0%,100% { box-shadow: 0 0 0 0 var(--estado-borde); }
  50%     { box-shadow: 0 0 0 8px transparent; }
}

/* ══ HERO ════════════════════════════════════════════════ */
.hero {
  position: relative; isolation: isolate;
  background: var(--ink-bg); color: var(--ink-fg);
  padding: 96px 0 0; overflow: hidden;
}
/* Fondo del hero. Es un div con background y no un <img> a propósito: la
   vitrina se sortea en el <head> y el CSS pinta sólo la foto elegida, así se
   baja una y no dos (con <img> el navegador ya habría pedido la de por defecto
   antes de que el JS la cambiara). Las URLs por variante están más abajo. */
.hero__foto {
  position: absolute; inset: -8% 0 0 0; z-index: -2;
  width: 100%; height: 116%;
  background-size: cover; background-position: 64% 46%; background-repeat: no-repeat;
}
/* El scrim tiene que dejar VER la foto: con .86/.72 la torre desaparecia y el
   hero leia como un gris sucio en vez de una fotografia. Se sostiene opaco solo
   bajo la columna de texto y se abre hacia la derecha. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, var(--grafito-950) 0%, rgba(10,13,18,.80) 36%, rgba(10,13,18,.14) 82%),
    linear-gradient(180deg, rgba(10,13,18,.50), transparent 34%, rgba(10,13,18,.80));
}
.hero__rejilla {
  position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(var(--ink-border) 1px, transparent 1px),
                    linear-gradient(90deg, var(--ink-border) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 70% 60% at 78% 30%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 78% 30%, black, transparent 75%);
}

.hero__grid {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: 56px; align-items: center; padding-bottom: 68px;
}
.hero h1 {
  font-size: clamp(40px, 5.9vw, 72px); font-weight: 800;
  line-height: 1.02; letter-spacing: -.035em; margin: 22px 0 24px;
  color: var(--ink-fg); max-width: 13ch;
}
/* revelado enmascarado por linea */
.ln { display: block; overflow: hidden; }
.ln > span {
  display: block; transform: translateY(105%);
  animation: sube 900ms var(--ease-out) forwards;
}
.ln:nth-child(2) > span { animation-delay: 110ms; }
.ln:nth-child(3) > span { animation-delay: 220ms; }
@keyframes sube { to { transform: translateY(0); } }

.hero__lead {
  font-size: clamp(17px, 1.5vw, 19.5px); color: var(--ink-fg-mut);
  max-width: 52ch; margin: 0 0 34px;
}
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── consola de estado (motivo de marca) ─────────────── */
.consola {
  position: relative; overflow: hidden;
  border: 1px solid var(--ink-border); border-radius: var(--r-lg);
  background: rgba(10,13,18,.58);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 26px 60px rgba(0,0,0,.45);
  font-family: var(--font-mono);
}
.consola__top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 20px; border-bottom: 1px solid var(--ink-border);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-fg-mut);
}
.consola__top b { color: var(--ink-fg); font-weight: 700; letter-spacing: .08em; }
.consola__cuerpo { padding: 6px 20px 18px; }
.fila {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--ink-border);
}
.fila:last-child { border-bottom: none; }
.fila__n { font-size: 13.5px; color: var(--ink-fg); letter-spacing: -.01em; }
.fila__d { font-size: 10.5px; color: var(--ink-fg-mut); letter-spacing: .04em; margin-top: 3px; }
.fila__e {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--verde-300);
}
.fila__e i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--verde-500);
  display: block; opacity: .35;
}
.fila.mirada .fila__e i { animation: chequeo 1.1s var(--ease) 1; }
@keyframes chequeo {
  0%   { opacity: .35; transform: scale(1); }
  40%  { opacity: 1;   transform: scale(1.55); }
  100% { opacity: .35; transform: scale(1); }
}
.consola__barrido {
  position: absolute; left: 0; right: 0; height: 84px; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--estado-wash), transparent);
  animation: rastreo 5.2s linear infinite;
}
@keyframes rastreo { from { top: -84px; } to { top: 100%; } }
.consola__pie {
  padding: 13px 20px; border-top: 1px solid var(--ink-border);
  font-size: 10.5px; letter-spacing: .05em; color: var(--ink-fg-mut);
}

/* ── franja de cifras ─────────────────────────────────── */
.kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink-border);
}
.kpi { padding: 30px 26px 34px; border-left: 1px solid var(--ink-border); }
.kpi:first-child { border-left: none; padding-left: 0; }
.kpi__n {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.2vw, 42px); font-weight: 800; letter-spacing: -.03em;
  color: var(--ink-fg); line-height: 1;
}
.kpi__n .u { font-size: .5em; font-weight: 600; margin-left: 5px; color: var(--ink-fg-mut); }
.kpi__l {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-fg-mut); margin-top: 11px;
}

/* ══ SECCIONES ═══════════════════════════════════════════ */
.sec { padding: var(--section-py) 0; position: relative; }
.sec--soft { background: var(--bg-soft); }
.sec--ink { background: var(--ink-bg); color: var(--ink-fg); }
.sec--ink h2, .sec--ink h3 { color: var(--ink-fg); }
.sec--ink .lead { color: var(--ink-fg-mut); }

/* corte diagonal entre la banda clara y la oscura */
.corte { position: relative; height: 78px; overflow: hidden; }
.corte::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 78px;
  background: var(--ink-bg);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.eyebrow {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accion-text); margin-bottom: 16px;
}
.sec--ink .eyebrow { color: var(--rojo-300); }

h2 {
  font-size: clamp(30px, 4vw, 46px); font-weight: 800;
  letter-spacing: -.032em; line-height: 1.1; margin: 0 0 18px;
  color: var(--fg-strong); max-width: 22ch;
}
h3 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 9px; color: var(--fg-strong); }
.lead { font-size: 18px; color: var(--fg-muted); max-width: 62ch; margin: 0 0 52px; }
p { margin: 0 0 15px; }
a { color: var(--accion-text); }

/* ══ REVELADO AL SCROLL ══════════════════════════════════ */
/* Condicionado a html.js A PROPOSITO. Antes esta regla era incondicional y
   escondia los 70 elementos de la portada hasta que el JS los destapaba: si
   site.js no llegaba o fallaba temprano, quedaba visible el 5% del texto
   —medido el 9-sep-2026— y la pagina se veia en blanco. La clase la pone un
   script del <head>, asi que si ESE script falla no se esconde nada y el sitio
   queda legible, sin animacion. La especificidad de las dos reglas tiene que
   subir junta: si solo sube la primera, .vis deja de ganar y no revela nunca. */
html.js [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.js [data-reveal].vis { opacity: 1; transform: none; }

/* ══ 2 · DIAGNOSTICO (numeros fantasma, escalonado) ══════ */
.diag { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 64px; }
.diag__i {
  position: relative; display: grid; grid-template-columns: auto 1fr;
  gap: 24px; align-items: start;
  padding: 34px 0; border-top: 1px solid var(--border);
}
.diag__i:nth-child(even) { transform: translateY(48px); }
html.js .diag__i:nth-child(even)[data-reveal] { transform: translateY(74px); }
html.js .diag__i:nth-child(even)[data-reveal].vis { transform: translateY(48px); }
.diag__n {
  font-family: var(--font-display); font-size: 54px; font-weight: 800;
  line-height: .85; letter-spacing: -.05em;
  /* --border es casi invisible como contorno; --n-400 se lee en los dos temas */
  color: transparent; -webkit-text-stroke: 1.5px var(--n-400);
  transition: -webkit-text-stroke-color 300ms var(--ease);
}
.diag__i:hover .diag__n { -webkit-text-stroke-color: var(--accion); }
.diag__i p { font-size: 15.5px; color: var(--fg-muted); margin: 0; }

/* ══ 3 · SOLUCIONES (bento asimetrico con foto) ══════════ */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.sol {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); text-decoration: none; color: inherit;
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease),
              border-color 320ms var(--ease), opacity 720ms var(--ease-out);
}
.sol:hover { transform: translateY(-5px); border-color: var(--accion); box-shadow: var(--sombra); }
.sol--ancha { grid-column: span 7; }
.sol--angosta { grid-column: span 5; }
/* Las cuatro pilares van del mismo porte: con un arco corriendo en cada una,
   cuatro cajas de distinto tamano se leen como un error de maquetacion. */
.sol--pilar { grid-column: span 6; }
.sol--full { grid-column: span 12; }
.sol__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface-2); }
.sol__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform 900ms var(--ease-out);
}
.sol:hover .sol__media img { transform: scale(1.07); }
.sol__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, var(--scrim));
}
.sol__etq {
  position: absolute; left: 18px; bottom: 15px; z-index: 2;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--n-0);
}
.sol__cuerpo { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }

.sol__cuerpo p { font-size: 15px; color: var(--fg-muted); }
/* Con que equipamiento se trabaja. Va en mono y apagado: es prueba para
   el que sabe, no un titular. */
.sol__tec {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--fg-muted); margin: -4px 0 10px;
}
.sol__tec b { color: var(--fg); font-weight: 600; }

.sol__res {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 14.5px; color: var(--fg); display: flex; gap: 8px; align-items: baseline;
}
.sol__res b { color: var(--accion-text); font-weight: 700; white-space: nowrap; }

/* ── el monitoreo como CAPA, no como quinta linea ─────── */
.capa {
  margin-top: 22px; padding: 30px 32px;
  background: var(--ink-bg); color: var(--ink-fg);
  border-radius: var(--r-lg); display: grid; gap: 14px;
}
.capa__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.capa__etq {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accion-text);
}
.capa h3 { font-size: 25px; color: var(--ink-fg); margin: 0; }
.capa p { font-size: 16px; color: var(--ink-fg-mut); margin: 0; max-width: 82ch; }
.capa .btn { justify-self: start; margin-top: 4px; }
.capa .btn--linea { border-color: rgba(255,255,255,.28); color: var(--ink-fg); }
.capa .btn--linea:hover { border-color: var(--accion); background: transparent; }
@media (max-width: 640px) { .capa { padding: 24px 20px; } }

/* ══ 4 · SERVICIO ADMINISTRADO (linea que se dibuja) ═════ */
.ciclo { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 12px; }
.ciclo::before {
  content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 1px;
  background: var(--ink-border);
}
.ciclo::after {
  content: ''; position: absolute; left: 0; top: 13px; height: 1px;
  width: 0; background: var(--accion);
  transition: width 1500ms var(--ease-out);
}
.ciclo.activo::after { width: 100%; }
.paso { position: relative; padding-top: 46px; }
.paso__nodo {
  position: absolute; top: 6px; left: 0; width: 15px; height: 15px;
  border-radius: 50%; background: var(--ink-bg); border: 2px solid var(--ink-border);
  transition: border-color 500ms var(--ease), box-shadow 500ms var(--ease);
}
.ciclo.activo .paso:nth-child(1) .paso__nodo { border-color: var(--accion); box-shadow: 0 0 0 5px var(--accion-wash); }
.ciclo.activo .paso:nth-child(2) .paso__nodo { border-color: var(--accion); box-shadow: 0 0 0 5px var(--accion-wash); transition-delay: 420ms; }
.ciclo.activo .paso:nth-child(3) .paso__nodo { border-color: var(--accion); box-shadow: 0 0 0 5px var(--accion-wash); transition-delay: 840ms; }
.paso__c {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rojo-300); margin-bottom: 10px;
}
.paso p { color: var(--ink-fg-mut); font-size: 15px; margin: 0; }

.panel-nota {
  margin-top: 56px; display: grid; grid-template-columns: auto 1fr; gap: 22px;
  align-items: start; padding: 26px 28px;
  border: 1px solid var(--ink-border); border-radius: var(--r-lg);
  background: var(--ink-surface);
}
.panel-nota p { margin: 0; color: var(--ink-fg-mut); max-width: 68ch; }
.panel-nota .marca {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rojo-300); padding-top: 4px;
}

/* ══ 5 · SECTORES (filas, no cajas) ══════════════════════ */
.sectores { border-top: 1px solid var(--border); }
.sector {
  position: relative; display: grid; isolation: isolate;
  grid-template-columns: 76px minmax(0,1fr) minmax(0,1.25fr) auto;
  gap: 26px; align-items: center;
  padding: 30px 18px; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit; overflow: hidden;
}
.sector::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--bg-soft); transform: scaleY(0); transform-origin: bottom;
  transition: transform 380ms var(--ease-out);
}
.sector:hover::before { transform: scaleY(1); transform-origin: top; }
.sector__n { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); letter-spacing: .1em; }
.sector h3 { margin: 0; }
.sector p { margin: 0; font-size: 15px; color: var(--fg-muted); }
.sector__f {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border); color: var(--fg-muted);
  transition: transform 340ms var(--ease-out), border-color 260ms var(--ease), color 260ms var(--ease);
}
.sector:hover .sector__f { transform: translateX(5px); border-color: var(--accion); color: var(--accion-text); }

/* ══ 6 · NOSOTROS ════════════════════════════════════════ */
.nos { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 60px; align-items: start; }
.nos__foto { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sombra); }
.nos__foto img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.nos__sello {
  position: absolute; left: 18px; bottom: 18px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--n-0);
  background: rgba(10,13,18,.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ink-border);
}
.ficha { list-style: none; padding: 0; margin: 30px 0 0; border-top: 1px solid var(--border); }
.ficha li {
  display: grid; grid-template-columns: 190px 1fr; gap: 18px;
  padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 15px;
}
.ficha .k {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--fg-muted); padding-top: 4px;
}
.ficha .v { color: var(--fg-strong); font-weight: 500; }

/* ══ 7 · CIERRE ══════════════════════════════════════════ */
.cierre { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-bg); }
.cierre__foto {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; opacity: .3;
}
.cierre::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg, var(--ink-bg) 26%, rgba(10,13,18,.7));
}
.cierre__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap; padding: 92px 0;
}
.cierre h2 { color: var(--ink-fg); margin-bottom: 12px; }
.cierre p { color: var(--ink-fg-mut); margin: 0; max-width: 54ch; }

/* ══ FOOTER ══════════════════════════════════════════════ */
.footer { background: var(--ink-bg-2); color: var(--ink-fg-mut); padding: 76px 0 34px; }
.footer__grid {
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--ink-border);
}
.footer__logo { height: 76px; width: auto; display: block; margin-bottom: 20px; }
.footer p { font-size: 14.5px; max-width: 30ch; }
.footer h3 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-fg); margin: 0 0 16px;
}
.footer a {
  color: var(--ink-fg-mut); text-decoration: none; display: block;
  margin-bottom: 10px; font-size: 14.5px; width: fit-content;
  transition: color 200ms var(--ease), transform 240ms var(--ease-out);
}
.footer a:hover { color: var(--ink-fg); transform: translateX(3px); }
.footer__bottom {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding-top: 26px; font-size: 12.5px;
}
.footer__bottom a { display: inline; margin: 0; }

/* ══ CONTACTO FLOTANTE ═══════════════════════════════════ */
/* Segtelco atiende por telefono 600 y correo; no hay WhatsApp confirmado, asi
   que el flotante llama al numero real en vez de inventar un canal. */
.flota {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-radius: 999px;
  background: var(--boton); color: var(--n-0);
  font-size: 14.5px; font-weight: 600; text-decoration: none;
  box-shadow: 0 12px 32px rgba(10,13,18,.28);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease-out),
              background-color 200ms var(--ease);
}
.flota.vis { opacity: 1; transform: none; pointer-events: auto; }
.flota:hover { background: var(--boton-hover); }

/* ══ ASISTENTE IA (widget de aipanel) ════════════════════ */
/* El widget inyecta su propio <style> AL FINAL del <head>, asi que por orden de
   cascada le gana a esta hoja. Se corrige con `body .ta-*` —un punto mas de
   especificidad— en vez de ensuciar todo con !important.
   Va abajo a la IZQUIERDA: la derecha es del flotante del telefono, que es el
   canal confirmado, y las dos burbujas caian en el mismo pixel.
   Los colores salen de los tokens para que siga al tema dia/noche. */
body .ta-bubble {
  right: auto; left: 22px; bottom: 22px;
  width: 54px; height: 54px; font-size: 22px;
  background: var(--boton);
  box-shadow: 0 12px 32px rgba(10,13,18,.28);
  transition: background-color 200ms var(--ease), transform 200ms var(--ease-out);
}
body .ta-bubble:hover { background: var(--boton-hover); transform: translateY(-2px); }
body .ta-panel {
  right: auto; left: 22px; bottom: 88px;
  width: 366px; border-radius: 14px;
  font-family: var(--font-sans);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sombra);
}
body .ta-head {
  background: var(--boton);
  font-family: var(--font-display);
  font-size: 15px; letter-spacing: .1px;
}
body .ta-log { background: var(--surface-2); }
body .ta-msg.bot { background: var(--surface); color: var(--fg); border-color: var(--border); }
body .ta-msg.user { background: var(--boton); }
body .ta-msg.sys { color: var(--fg-muted); font-family: var(--font-mono); font-size: 11px; }
body .ta-input { background: var(--surface); border-top-color: var(--border); }
body .ta-input input { background: var(--surface); color: var(--fg-strong); border-color: var(--border); }
body .ta-input input::placeholder { color: var(--fg-muted); }
body .ta-input input:focus { border-color: var(--accion); }
body .ta-input button { background: var(--boton); font-family: var(--font-sans); }
body .ta-input button:hover:not(:disabled) { background: var(--boton-hover); }

@media (max-width: 640px) {
  body .ta-bubble { left: 16px; bottom: 16px; }
  body .ta-panel { left: 16px; right: 16px; bottom: 82px; width: auto; }
}

/* ══ MENU MOVIL ══════════════════════════════════════════ */
.hamb {
  display: none; width: 44px; height: 44px; flex: 0 0 auto;
  background: transparent; border: 1px solid var(--border); border-radius: 50%;
  cursor: pointer; padding: 0; place-items: center;
}
.hamb span {
  display: block; width: 17px; height: 1.5px; background: var(--fg-strong);
  margin: 3.5px auto; transition: transform 320ms var(--ease-out), opacity 200ms var(--ease);
}
.hamb.abierto span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hamb.abierto span:nth-child(2) { opacity: 0; }
.hamb.abierto span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.panel-movil {
  position: fixed; inset: 0; z-index: 90;
  background: var(--ink-bg); color: var(--ink-fg);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--gutter);
  clip-path: circle(0% at calc(100% - 44px) 50px);
  transition: clip-path 520ms var(--ease-out), visibility 0s linear 520ms;
  visibility: hidden;
}
.panel-movil.abierto {
  clip-path: circle(150% at calc(100% - 44px) 50px);
  visibility: visible; transition: clip-path 520ms var(--ease-out), visibility 0s;
}
.panel-movil__logo {
  height: 54px; width: auto; display: block;
  position: absolute; top: 18px; left: var(--gutter);
}
.panel-movil__nav { display: flex; flex-direction: column; }
/* nth-of-type y no nth-child: el primer hijo del panel es el boton cerrar, asi
   que con nth-child la escalera arrancaba corrida y el ultimo link entraba sin
   retardo, antes que los demas. */
.panel-movil__nav a {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700; letter-spacing: -.03em;
  color: var(--ink-fg); text-decoration: none;
  padding: 15px 0; border-bottom: 1px solid var(--ink-border);
  opacity: 0; transform: translateY(18px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease-out);
}
.panel-movil.abierto .panel-movil__nav a { opacity: 1; transform: none; }
.panel-movil.abierto .panel-movil__nav a:nth-of-type(1) { transition-delay: 120ms; }
.panel-movil.abierto .panel-movil__nav a:nth-of-type(2) { transition-delay: 180ms; }
.panel-movil.abierto .panel-movil__nav a:nth-of-type(3) { transition-delay: 240ms; }
.panel-movil.abierto .panel-movil__nav a:nth-of-type(4) { transition-delay: 300ms; }
.panel-movil.abierto .panel-movil__nav a:nth-of-type(5) { transition-delay: 360ms; }

.panel-movil__pie {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 34px;
  opacity: 0; transform: translateY(18px);
  transition: opacity 420ms var(--ease) 420ms, transform 420ms var(--ease-out) 420ms;
}
.panel-movil.abierto .panel-movil__pie { opacity: 1; transform: none; }
.panel-movil__tel {
  font-family: var(--font-mono); font-size: 14px; letter-spacing: .04em;
  color: var(--ink-fg-mut); text-decoration: none;
}
.panel-movil .cerrar {
  position: absolute; top: 22px; right: var(--gutter);
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ink-border);
  background: transparent; color: var(--ink-fg); font-size: 20px; cursor: pointer;
  opacity: 1; transform: none; padding: 0; line-height: 1;
}
body.sin-scroll { overflow: hidden; }

/* ══ RESPONSIVE ══════════════════════════════════════════ */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .consola { max-width: 560px; }
  .nos { grid-template-columns: 1fr; gap: 36px; }
  /* el nav tiene 6 items, uno de ellos en pastilla: sin esto el CTA se sale del
     header cerca de 900px, que es justo donde el nav todavia se muestra */
  .header__in { gap: 18px; }
  .header__logo img { height: 46px; }
  .nav { gap: 12px; }
  .nav a { font-size: 14px; }
}

@media (max-width: 900px) {
  :root { --header-h: 76px; --section-py: 68px; --gutter: 20px; }
  .nav, .header__acciones .btn { display: none; }
  .hamb { display: grid; }
  .header__logo img { height: 46px; }
  .hero { padding-top: 56px; }
  .hero__grid { padding-bottom: 46px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi { padding: 22px 18px; border-left: 1px solid var(--ink-border); }
  .kpi:nth-child(odd) { border-left: none; padding-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--ink-border); }
  .diag { grid-template-columns: 1fr; gap: 0; }
  .diag__i:nth-child(even),
  html.js .diag__i:nth-child(even)[data-reveal].vis { transform: none; }
  html.js .diag__i:nth-child(even)[data-reveal] { transform: translateY(26px); }
  .sol--ancha, .sol--angosta, .sol--full, .sol--pilar { grid-column: span 12; }
  .ciclo { grid-template-columns: 1fr; gap: 12px; }
  .ciclo::before, .ciclo::after { display: none; }
  .paso { padding-top: 0; padding-left: 32px; border-left: 1px solid var(--ink-border); padding-bottom: 26px; }
  .paso__nodo { top: 5px; left: -8px; }
  .sector { grid-template-columns: 44px 1fr; gap: 10px 16px; padding: 22px 12px; }
  .sector p { grid-column: 2; }
  .sector__f { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer__logo { height: 58px; }
  .cierre__in { padding: 62px 0; }
  .corte, .corte::after { height: 44px; }
}

@media (max-width: 640px) {
  .ficha li { grid-template-columns: 1fr; gap: 2px; }
  .hero h1 { max-width: none; }
  .flota { right: 14px; bottom: 14px; padding: 12px 17px; font-size: 14px; }
  .panel-movil a { font-size: 25px; }
}

@media (max-width: 420px) {
  .kpis { grid-template-columns: 1fr; }
  .kpi, .kpi:nth-child(odd) { border-left: none; padding-left: 0; border-top: 1px solid var(--ink-border); }
  .kpi:first-child { border-top: none; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* ══ MOVIMIENTO REDUCIDO ═════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .estado__dot, .consola__barrido, .fila.mirada .fila__e i { animation: none; }
  .consola__barrido { display: none; }
  .ln > span { transform: none; animation: none; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  html.js .diag__i:nth-child(even)[data-reveal] { transform: translateY(48px); }
  .barrido { display: none; }
  .hero__foto { transform: none !important; }
  .sol:hover, .btn:hover, .footer a:hover { transform: none; }
  .sol:hover .sol__media img { transform: none; }
}

/* ══ VITRINA — variantes del hero ════════════════════════ */
/* El hero rota entre cuatro escenarios (terreno, cámaras, automatización
   MikroTik y cobertura). Uno al azar por recarga, igual que aipanel; se fuerza
   cualquiera con ?hero=<nombre> para revisarlas.
   La variante "terreno" va escrita en el HTML y las otras viven en <template>:
   así un agente sin JavaScript ve un hero completo y no cuatro superpuestos. */

/* misma altura en las cuatro, si no el swap salta y se rompe el CLS */
.consola { min-height: 428px; display: flex; flex-direction: column; }
.consola__cuerpo { flex: 1; }

/* video del hero: entra por encima de la foto SOLO cuando puede reproducirse,
   así el LCP lo sigue marcando el poster y no se mueve. */
.hero__video {
  position: absolute; inset: -8% 0 0 0; z-index: -2;
  width: 100%; height: 116%; object-fit: cover; object-position: 64% 46%;
  opacity: 0; transition: opacity 900ms var(--ease);
  pointer-events: none;
}
.hero__video.listo { opacity: 1; }

/* ── escenario D · flujo de automatización ─────────────── */
.flujo { padding: 4px 20px 14px; }
.paso-f {
  position: relative; display: grid; grid-template-columns: 26px 1fr;
  gap: 12px; align-items: start; padding: 11px 0;
}
.paso-f::before {
  content: ''; position: absolute; left: 12px; top: 30px; bottom: -4px;
  width: 1px; background: var(--ink-border);
}
.paso-f:last-child::before { display: none; }
.paso-f__n {
  width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--ink-border); background: var(--ink-bg);
  font-size: 10.5px; color: var(--ink-fg-mut); position: relative; z-index: 2;
  transition: border-color 400ms var(--ease), color 400ms var(--ease);
}
.paso-f.on .paso-f__n { border-color: var(--verde-500); color: var(--verde-300); }
.paso-f__t { font-size: 13px; color: var(--ink-fg); line-height: 1.45; }
.paso-f__d { font-size: 10.5px; color: var(--ink-fg-mut); margin-top: 3px; letter-spacing: .03em; }

/* ── escenario E · mapa de cobertura ───────────────────── */
.mapa { padding: 10px 20px 16px; }
.mapa svg { width: 100%; height: auto; display: block; }
.mapa .costa { fill: none; stroke: var(--ink-border); stroke-width: 1.2; }
.mapa .enlace {
  fill: none; stroke: var(--rojo-500); stroke-width: 1.2; opacity: .55;
  stroke-dasharray: 4 5;
}
.mapa .nodo { fill: var(--verde-500); }
.mapa .halo { fill: none; stroke: var(--verde-500); opacity: .45; }
.mapa .etq {
  fill: var(--ink-fg); font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .06em;
}
.mapa .etq--mut { fill: var(--ink-fg-mut); }
@media (prefers-reduced-motion: no-preference) {
  .mapa .halo { animation: eco 3s ease-out infinite; transform-origin: center; }
  .mapa .halo:nth-of-type(2) { animation-delay: .7s; }
  .mapa .halo:nth-of-type(3) { animation-delay: 1.4s; }
  .mapa .halo:nth-of-type(4) { animation-delay: 2.1s; }
}
@keyframes eco {
  0%   { r: 4;  opacity: .5; }
  100% { r: 15; opacity: 0; }
}

@media (max-width: 1080px) {
  .consola { min-height: 0; }
}

/* ── fondos de cada vitrina ─────────────────────────────── */
/* Base = la versión de 860px (móvil, que es donde el peso duele).
   Desde 901px se pide la de 1344px. */

.hero__foto {
  background-image: url('/assets/img/hero-sitio-860.jpg');
  background-image: image-set(url('/assets/img/hero-sitio-860.webp') type('image/webp'),
                              url('/assets/img/hero-sitio-860.jpg') type('image/jpeg'));
}

:root[data-vitrina="camaras"] .hero__foto {
  background-image: url('/assets/img/hero-camara-860.jpg');
  background-image: image-set(url('/assets/img/hero-camara-860.webp') type('image/webp'),
                              url('/assets/img/hero-camara-860.jpg') type('image/jpeg'));
}

:root[data-vitrina="mikrotik"] .hero__foto {
  background-image: url('/assets/img/hero-red-860.jpg');
  background-image: image-set(url('/assets/img/hero-red-860.webp') type('image/webp'),
                              url('/assets/img/hero-red-860.jpg') type('image/jpeg'));
}

:root[data-vitrina="cobertura"] .hero__foto {
  background-image: url('/assets/img/acceso-amplia-860.jpg');
  background-image: image-set(url('/assets/img/acceso-amplia-860.webp') type('image/webp'),
                              url('/assets/img/acceso-amplia-860.jpg') type('image/jpeg'));
}
:root[data-vitrina="isp"] .hero__foto {
  background-image: url('/assets/img/hero-isp-860.jpg');
  background-image: image-set(url('/assets/img/hero-isp-860.webp') type('image/webp'),
                              url('/assets/img/hero-isp-860.jpg') type('image/jpeg'));
}


@media (min-width: 901px) {
  .hero__foto {
    background-image: url('/assets/img/hero-sitio.jpg');
    background-image: image-set(url('/assets/img/hero-sitio.webp') type('image/webp'),
                                url('/assets/img/hero-sitio.jpg') type('image/jpeg'));
  }
  :root[data-vitrina="camaras"] .hero__foto {
    background-image: url('/assets/img/hero-camara.jpg');
    background-image: image-set(url('/assets/img/hero-camara.webp') type('image/webp'),
                                url('/assets/img/hero-camara.jpg') type('image/jpeg'));
  }
  :root[data-vitrina="mikrotik"] .hero__foto {
    background-image: url('/assets/img/hero-red.jpg');
    background-image: image-set(url('/assets/img/hero-red.webp') type('image/webp'),
                                url('/assets/img/hero-red.jpg') type('image/jpeg'));
  }
  :root[data-vitrina="cobertura"] .hero__foto {
    background-image: url('/assets/img/acceso-amplia.jpg');
    background-image: image-set(url('/assets/img/acceso-amplia.webp') type('image/webp'),
                                url('/assets/img/acceso-amplia.jpg') type('image/jpeg'));
  }
  :root[data-vitrina="isp"] .hero__foto {
    background-image: url('/assets/img/hero-isp.jpg');
    background-image: image-set(url('/assets/img/hero-isp.webp') type('image/webp'),
                                url('/assets/img/hero-isp.jpg') type('image/jpeg'));
  }
}

/* La etiqueta de Iquique va a la IZQUIERDA de su nodo: con Alto Hospicio a 12px
   de distancia, las dos a la derecha se pisaban. */
.mapa .etq--fin { text-anchor: end; }
/* El mapa hacia que el panel quedara ~100px mas alto que los otros escenarios.
   Se acota para que las cuatro vitrinas midan parecido. */
.mapa svg { max-height: 300px; margin: 0 auto; }
.mapa .costa { opacity: .85; }

/* backdrop-filter sobre una foto a pantalla completa es de lo mas caro que hay
   en un telefono, y aparecio en el perfil como Rendering. En movil la consola
   pasa a fondo solido —encima de la foto se ve practicamente igual— y el blur
   queda solo en escritorio. */
@media (max-width: 900px) {
  .consola {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--grafito-950);
  }
  /* sin blur, el header translucido se ve lavado: va solido */
  .header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
  .nos__sello { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ══ EL AGENTE — mapa + consola en vivo ══════════════════ */
/* Los dos paneles los mueve el mismo motor: cuando un recinto cambia de estado
   en el mapa, la consola escribe la linea. Es la demostracion del servicio.
   La consola va oscura en los dos temas, igual que en el producto real. */

.agente__cifras {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 26px;
}
.ac {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 16px 18px;
}
.ac__k {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-muted);
}
.ac__v {
  font-family: var(--font-display); font-size: 26px; font-weight: 800;
  letter-spacing: -.02em; color: var(--fg-strong); margin-top: 6px; line-height: 1.1;
}
.ac__v--ok {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 20px; color: var(--estado);
}

.agente__grid {
  /* La consola necesita ancho: con menos, las lineas se truncan justo donde
     esta el dato. Al mapa le sobraba margen. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 22px; align-items: stretch;
}

/* cabecera y pie compartidos por los dos paneles */
.panel__top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--fg-muted);
}
.panel__top b { color: var(--fg-strong); font-weight: 700; }
.panel__top--oscuro { border-bottom-color: var(--ink-border); color: var(--ink-fg-mut); }
.panel__top--oscuro b { color: var(--ink-fg); }
.panel__demo {
  font-size: 10px; letter-spacing: .1em; padding: 3px 9px; border-radius: 999px;
  background: var(--accion-wash); color: var(--accion-text); border: 1px solid transparent;
}
.panel__top--oscuro .panel__demo { color: var(--rojo-300); }
.panel__pie {
  padding: 12px 18px; border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--fg-muted); display: flex; gap: 18px; flex-wrap: wrap;
}
.panel__pie--oscuro {
  border-top-color: var(--ink-border); color: var(--ink-fg-mut); display: block;
}
.leyenda { display: inline-flex; align-items: center; gap: 7px; }
.lg { width: 8px; height: 8px; border-radius: 50%; display: block; }
.lg--ok     { background: var(--verde-500); }
.lg--alerta { background: var(--ambar-500); }
.lg--caido  { background: var(--rojo-500); }

/* ── mapa de recintos ──────────────────────────────────── */
.mapa-sitios {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
}
.mapa-sitios svg { width: 100%; height: auto; display: block; padding: 8px 10px; flex: 1; }
.enlaces path {
  fill: none; stroke: var(--border); stroke-width: 1.4; stroke-dasharray: 5 6;
}
.sitio .punto { fill: var(--verde-500); transition: fill 420ms var(--ease); }
.sitio .halo {
  fill: none; stroke: var(--verde-500); opacity: 0;
  transition: stroke 420ms var(--ease);
}
.sitio .rot {
  fill: var(--fg-muted); font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .07em; transition: fill 420ms var(--ease);
}
.rot--fin { text-anchor: end; }

.sitio[data-estado="alerta"] .punto { fill: var(--ambar-500); }
.sitio[data-estado="alerta"] .halo  { stroke: var(--ambar-500); }
.sitio[data-estado="alerta"] .rot   { fill: var(--fg-strong); }
.sitio[data-estado="caido"] .punto  { fill: var(--rojo-500); }
.sitio[data-estado="caido"] .halo   { stroke: var(--rojo-500); }
.sitio[data-estado="caido"] .rot    { fill: var(--accion-text); }

@media (prefers-reduced-motion: no-preference) {
  .sitio[data-estado] .halo { animation: eco-sitio 1.8s ease-out infinite; }
}
@keyframes eco-sitio {
  0%   { r: 6;  opacity: .55; }
  100% { r: 20; opacity: 0; }
}

/* ── consola en vivo ───────────────────────────────────── */
.consola-viva {
  background: var(--grafito-950); border: 1px solid var(--ink-border);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
}
.cv__lineas {
  list-style: none; margin: 0; padding: 14px 18px;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.8;
  color: var(--verde-300);
  flex: 1; min-height: 300px;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.cv__l {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: cv-entra 320ms var(--ease-out) both;
}
@keyframes cv-entra { from { opacity: 0; transform: translateY(6px); } }
.cv__h { color: var(--n-400); }
.cv__a { font-weight: 700; }
.cv__a--red { color: var(--verde-300); }
.cv__a--cam { color: var(--n-0); }
.cv__a--alt { color: var(--ambar-500); }
.cv__l--alerta { color: var(--ambar-500); }
.cv__l--caido  { color: var(--rojo-300); }

/* ── responsive ────────────────────────────────────────── */
@media (max-width: 1080px) {
  .agente__grid { grid-template-columns: 1fr; }
  .cv__lineas { min-height: 250px; }
}
@media (max-width: 900px) {
  .agente__cifras { grid-template-columns: repeat(2, 1fr); }
  /* Las etiquetas del mapa son de 9.5px: en un telefono no se leen y el mapa
     pasa a ser una mancha. Se agranda el trazo y se recorta el texto largo. */
  .sitio .rot { font-size: 13px; }
  .cv__lineas { font-size: 11px; padding: 12px 14px; }
}
@media (max-width: 640px) {
  .agente__cifras { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ac { padding: 13px 14px; }
  .ac__v { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .cv__l { animation: none; }
  .sitio[data-estado] .halo { animation: none; opacity: .5; }
}

/* Los enlaces del mapa con --border quedaban casi invisibles sobre la tarjeta. */
.enlaces path { stroke: var(--n-400); opacity: .5; }
:root[data-theme="dark"] .enlaces path { stroke: var(--ink-fg-mut); opacity: .35; }

/* Las etiquetas quedaban cruzadas por los enlaces punteados. `paint-order`
   dibuja primero un contorno del color de la tarjeta, que recorta la linea
   detras del texto sin tapar nada mas. */
.sitio .rot {
  paint-order: stroke;
  stroke: var(--surface); stroke-width: 3.5px; stroke-linejoin: round;
}

/* Pulso de recorrido: mientras el agente pasa por un recinto, ese punto se
   ilumina. Es lo que hace que el mapa se vea trabajando aunque no haya ninguna
   alerta — sin esto, un mapa todo verde parece una imagen fija.
   No se aplica sobre un recinto con alerta: ahi manda el estado. */
.sitio.escaneando .rot { fill: var(--fg-strong); }
.sitio:not([data-estado]).escaneando .punto { fill: var(--verde-300); }
.sitio:not([data-estado]).escaneando .halo {
  stroke: var(--verde-500);
  animation: eco-scan 700ms ease-out 1;
}
@keyframes eco-scan {
  0%   { r: 6;  opacity: .65; }
  100% { r: 19; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sitio.escaneando .halo { animation: none; }
}

/* En escritorio manda el mapa con sus etiquetas; la lista es el respaldo movil. */
.recintos { display: none; }
.cv__corta { display: none; }

@media (max-width: 900px) {
  /* A 375px las etiquetas del SVG se encimaban entre si ("PATIO DE CAR|ESTANQUE"):
     el mapa conserva los puntos y el detalle pasa a una lista legible. */
  .sitio .rot { display: none; }
  .recintos {
    display: block; list-style: none; margin: 0; padding: 4px 16px 14px;
    border-top: 1px solid var(--border);
  }
  .recintos li {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 0; border-bottom: 1px solid var(--border);
    font-size: 14px; color: var(--fg-strong);
  }
  .recintos li:last-child { border-bottom: none; }
  .recintos i {
    width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
    background: var(--verde-500);
  }
  .recintos li[data-estado="alerta"] i { background: var(--ambar-500); }
  .recintos li[data-estado="caido"]  i { background: var(--rojo-500); }
  .recintos b {
    margin-left: auto; font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .07em; text-transform: uppercase;
    font-weight: 600; color: var(--fg-muted);
  }
  .recintos li[data-estado="alerta"] b { color: var(--ambar-500); }
  .recintos li[data-estado="caido"]  b { color: var(--accion-text); }

  /* La consola pierde la marca de hora y usa la etiqueta corta: con ambas,
     el mensaje quedaba cortado justo donde estaba el dato. */
  .cv__h { display: none; }
  .cv__larga { display: none; }
  .cv__corta { display: inline; }
  .cv__lineas { font-size: 10.5px; padding: 12px 14px; }
}

/* ── vitrina de la plataforma ISP: la captura dentro del panel ─────── */
/* El panel de la vitrina es vertical y un dashboard es horizontal. En vez de
   deformarlo o recortarlo hasta que no se entienda, la captura ocupa una banda
   y debajo van tres lineas que dicen que hace. */
.captura {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--ink-border);
  background: var(--n-0);
}
.captura img {
  display: block; width: 100%; height: auto;
  /* recorta la franja util: cabecera de KPI y arranque del grafico */
  aspect-ratio: 1100 / 430; object-fit: cover; object-position: 50% 0;
}
/* La captura es clara y el panel oscuro: sin esto el borde superior corta seco. */
.captura::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
  background: linear-gradient(180deg, transparent, rgba(10,13,18,.35));
  pointer-events: none;
}
.fila--corta { padding: 10px 0; }
.fila--corta .fila__n { font-size: 12.5px; }

@media (max-width: 1080px) {
  .captura img { aspect-ratio: 1100 / 380; }
}

/* ── medidor de velocidad en vivo (vitrina ISP) ──────────────────── */
/* El grafico existe en el producto; acá se dibuja de verdad en vez de mostrar
   una foto. Verde NO se usa para las curvas: en esta marca el verde es estado
   operativo, no decoracion. Bajada en blanco, subida en el rojo de marca. */
.medidor { padding: 2px 18px 14px; border-bottom: 1px solid var(--ink-border); }
.medidor__top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-fg-mut); padding: 10px 0 8px;
}
.medidor__g { width: 100%; height: 118px; display: block; overflow: visible; }
.wan-area { fill: rgba(255,255,255,.10); stroke: none; }
.wan-baja { fill: none; stroke: var(--n-0); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.wan-sube {
  fill: none; stroke: var(--rojo-300); stroke-width: 1.4;
  stroke-dasharray: 4 4; vector-effect: non-scaling-stroke;
}
.medidor__cifras {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  padding-top: 9px; font-size: 11px; color: var(--ink-fg-mut); letter-spacing: .04em;
}
.medidor__cifras b {
  font-size: 16px; font-weight: 700; color: var(--ink-fg);
  font-variant-numeric: tabular-nums;
}
.medidor__cifras em { font-style: normal; color: var(--ink-fg-mut); }
.medidor__cifras span:nth-child(2) b { color: var(--rojo-300); }
.medidor__pico { margin-left: auto; font-size: 10px; }

@media (max-width: 1080px) { .medidor__g { height: 96px; } }

/* ── base del mapa de recintos ───────────────────────────────────── */
/* Era un esquema de puntos unidos por lineas; ahora tiene agua, manzanas y
   vias, que es lo que hace que se lea como un mapa. Todo dibujado: sin tiles
   de terceros (el sitio no hace ni una peticion externa) y nitido en retina. */
.mapa-base  { pointer-events: none; }
.mapa-suelo { fill: var(--n-100); }
.mapa-verde { fill: var(--verde-500); opacity: .16; }
.mapa-agua  { fill: var(--n-400); opacity: .34; }
/* Las calles se trazan ENCIMA del suelo: lo que queda entre ellas es la manzana.
   Dibujar manzanas sueltas daba cuadros flotando, no un mapa. */
.mapa-via   { fill: none; stroke: var(--n-0); stroke-linecap: round; stroke-width: 3; }
.mapa-via--troncal { stroke-width: 6.5; }

:root[data-theme="dark"] .mapa-suelo { fill: rgba(255,255,255,.05); }
:root[data-theme="dark"] .mapa-verde { opacity: .12; }
:root[data-theme="dark"] .mapa-agua  { fill: var(--grafito-700); opacity: .9; }
:root[data-theme="dark"] .mapa-via   { stroke: rgba(10,13,18,.55); }

/* Las lineas rectas entre recintos ya no aplican: encima de un mapa leian como
   calles falsas. El vinculo lo cuenta el estado, no una recta. */
.enlaces path { display: none; }

/* ── tercera pantalla: el aviso al cliente ───────────────────────── */
.correo {
  margin-top: 22px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
}
.correo__in {
  display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  gap: 26px; padding: 20px 22px 4px; align-items: start;
}
.sobre {
  border: 1px solid var(--border); border-left: 3px solid var(--accion);
  border-radius: var(--r-md); padding: 16px 18px; background: var(--bg);
  transition: box-shadow 400ms var(--ease), transform 400ms var(--ease-out);
}
.correo.sale .sobre { transform: translateY(-3px); box-shadow: var(--sombra); }
.sobre__cab {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted);
  letter-spacing: .02em; margin-bottom: 11px;
}
.sobre__flecha { color: var(--accion-text); }
.sobre__asunto {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  letter-spacing: -.02em; color: var(--fg-strong); margin-bottom: 7px;
}
.sobre__cuerpo { font-size: 14.5px; color: var(--fg-muted); margin: 0; }

.pasos-correo { list-style: none; margin: 0; padding: 0; }
.pasos-correo li {
  position: relative; padding: 9px 0 9px 28px; font-size: 14px;
  color: var(--fg-muted); border-bottom: 1px solid var(--border);
  transition: color 300ms var(--ease);
}
.pasos-correo li:last-child { border-bottom: none; }
.pasos-correo li::before {
  content: ''; position: absolute; left: 4px; top: 15px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--border); background: transparent;
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease);
}
.pasos-correo li.ok { color: var(--fg-strong); }
.pasos-correo li.ok::before { background: var(--verde-500); border-color: var(--verde-500); }
.panel__pie--plano { display: block; }

@media (max-width: 900px) {
  .correo__in { grid-template-columns: 1fr; gap: 16px; padding: 16px 16px 2px; }
}


/* La orilla marcada es lo que termina de decir "esto es agua": una linea curva
   contra la rigidez del damero. */
.mapa-orilla { fill: none; stroke: var(--n-500); opacity: .3; stroke-width: 1.2; }
:root[data-theme="dark"] .mapa-orilla { stroke: var(--n-0); opacity: .12; }

/* Tarjeta del bento sin foto (la de cierre de "software propio"): sin la banda
   de imagen necesita su propio aire, si no queda desnivelada frente al resto. */
.sol .sol__cuerpo:only-child { padding: 34px 30px; }

/* ══ DOS RUTAS DE COMPRA ═════════════════════════════════ */
/* Accesos grandes, mismo peso: no son dos marcas, son dos recorridos. */
.rutas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.rutas--3 { grid-template-columns: repeat(3, 1fr); }
/* el monitoreo no es una cuarta tarjeta: es la capa que envuelve a las tres */
.rutas__capa {
  margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--border);
  font-size: 16px; color: var(--fg-muted); max-width: 78ch;
}
.rutas__capa strong { color: var(--fg-strong); }
/* el residencial: visible, pero como pregunta al margen y no como ruta */
.rutas__otro {
  margin: 14px 0 0; font-size: 15px; color: var(--fg-muted); max-width: 78ch;
}
.rutas__otro strong { color: var(--fg); font-weight: 600; }
.ruta {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 34px 32px 30px;
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease),
              border-color 320ms var(--ease), opacity 720ms var(--ease-out);
}
.ruta:hover { transform: translateY(-4px); border-color: var(--accion); box-shadow: var(--sombra); }
.ruta__quien {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accion-text); margin-bottom: 14px;
}
.ruta h3 {
  font-size: clamp(21px, 2.2vw, 26px); line-height: 1.2;
  letter-spacing: -.025em; margin-bottom: 12px;
}
.ruta > p { font-size: 15.5px; color: var(--fg-muted); }
.ruta__lista { list-style: none; padding: 0; margin: 20px 0 26px; }
.ruta__lista li {
  position: relative; padding: 9px 0 9px 22px; font-size: 14.5px;
  border-bottom: 1px solid var(--border); color: var(--fg);
}
.ruta__lista li:last-child { border-bottom: none; }
.ruta__lista li::before {
  content: ''; position: absolute; left: 0; top: 17px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accion);
}
.ruta__ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.ruta__pie {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em;
  color: var(--fg-muted); margin: 14px 0 0;
}

@media (max-width: 900px) {
  .rutas, .rutas--3 { grid-template-columns: 1fr; }
  .ruta { padding: 26px 22px 24px; }
}

/* ══ INSTALACIONES TIPO ══════════════════════════════════ */
/* Ficha técnica, no caso de éxito: lo que convence a un comprador técnico es
   el listado de equipos, no un logo que además no podemos publicar. */
.obras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.obra {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 24px 22px 22px;
  transition: transform 300ms var(--ease-out), border-color 300ms var(--ease),
              box-shadow 300ms var(--ease), opacity 720ms var(--ease-out);
}
.obra:hover { transform: translateY(-4px); border-color: var(--accion); box-shadow: var(--sombra); }
.obra__rubro {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accion-text); margin-bottom: 11px;
}
.obra h3 { font-size: 17px; line-height: 1.28; margin-bottom: 14px; }
.obra__lista { list-style: none; padding: 0; margin: 0 0 16px; }
.obra__lista li {
  position: relative; padding: 7px 0 7px 18px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: -.01em;
  color: var(--fg); border-bottom: 1px solid var(--border);
}
.obra__lista li:last-child { border-bottom: none; }
.obra__lista li::before {
  content: ''; position: absolute; left: 0; top: 14px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accion);
}
.obra__que { font-size: 13.5px; color: var(--fg-muted); margin: auto 0 0; }
.obras__pie {
  margin: 30px 0 0; font-size: 14.5px; color: var(--fg-muted);
  padding-top: 20px; border-top: 1px solid var(--border); max-width: 72ch;
}

@media (max-width: 1080px) { .obras { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .obras { grid-template-columns: 1fr; } }

/* ══ 12 · CONECTIVIDAD POR ARRIENDO (#arriendo) ══════════════
   Bloque comercial, no una linea de servicio mas. Tres piezas:
   .kit    — el mecanismo en cuatro tiempos, con el numero fantasma del mismo
             tratamiento que .diag__n (contorno, no relleno);
   .solar  — la banda oscura del angulo diferenciador. Va en grafito con filete
             rojo de MARCA: el ambar esta tomado por el estado de alerta y el
             verde por el estado operativo, asi que ninguno de los dos puede
             usarse aca sin romper la paleta;
   .cotiza — por que no hay tarifa publicada, en tres columnas. */

.kit {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0 56px; margin-top: 14px;
}
.kit__i {
  position: relative; padding: 32px 0 32px 0;
  border-top: 1px solid var(--border);
}
.kit__n {
  display: block; margin-bottom: 10px;
  font-family: var(--font-display); font-size: 40px; font-weight: 800;
  line-height: .85; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px var(--n-400);
  transition: -webkit-text-stroke-color 300ms var(--ease);
}
.kit__i:hover .kit__n { -webkit-text-stroke-color: var(--accion); }
.kit__i h3,
.pagina .kit__i h3 { font-size: 21px; margin: 0 0 8px; letter-spacing: -.01em; }
.kit__i p  { color: var(--fg-muted); margin: 0; max-width: 46ch; }

.kit__cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ── la banda solar ─────────────────────────────────────── */
/* Dos columnas desde 901px: a una sola, el parrafo corta en 68ch y deja medio
   ancho vacio a la derecha. El titular sostiene la izquierda. */
.solar {
  margin-top: 56px; padding: 40px 44px;
  background: var(--ink-bg); color: var(--ink-fg);
  border-radius: var(--r-lg); border-left: 3px solid var(--accion);
  /* Dos celdas, no cuatro: con la etiqueta y el titular en filas sueltas, la
     columna derecha —mas alta— estiraba esas filas y dejaba el titular
     descolgado del rotulo. Agrupados en .solar__cab el problema desaparece. */
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 8px 48px; align-items: center;
}
.solar h3 { margin-bottom: 0; }
.solar__etq {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rojo-300); margin-bottom: 14px;
}
/* La segunda mitad del selector es para las paginas internas: pagina.css carga
   DESPUES de este archivo y su `.pagina h3 { font-size: 18px }` empata en
   especificidad, asi que ganaba por orden y encogia el titular de la banda. */
.solar h3,
.pagina .solar h3 {
  color: var(--ink-fg); font-size: clamp(22px, 2.6vw, 30px);
  margin: 0 0 14px; letter-spacing: -.02em; line-height: 1.16;
}
.solar p { color: var(--ink-fg-mut); margin: 0; max-width: 68ch; }
.solar__golpe {
  margin-top: 18px !important; padding-top: 18px;
  border-top: 1px solid var(--ink-border);
  color: var(--ink-fg) !important; font-weight: 600;
}

/* ── por que se cotiza ──────────────────────────────────── */
.cotiza { margin-top: 56px; }
.cotiza h3 { font-size: clamp(20px, 2.4vw, 26px); margin: 0 0 26px; letter-spacing: -.02em; }
.cotiza__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.cotiza__g p {
  margin: 0; padding-top: 18px; border-top: 2px solid var(--accion);
  color: var(--fg-muted);
}
.cotiza__g b { color: var(--fg-strong); }
.cotiza__pie {
  margin-top: 26px; font-family: var(--font-mono); font-size: 14px;
  color: var(--fg-strong);
}

@media (max-width: 900px) {
  /* En movil el numero fantasma cuesta ~60px de alto por tarjeta y aporta poco:
     pasa a la misma linea del titulo. Son ~240px menos en la seccion. */
  .kit { grid-template-columns: 1fr; gap: 0; }
  .kit__i {
    padding: 22px 0;
    display: grid; grid-template-columns: auto 1fr; gap: 0 12px;
  }
  .kit__n { grid-row: 1; font-size: 26px; margin: 0; align-self: baseline; }
  .kit__i h3 { grid-column: 2; grid-row: 1; margin-bottom: 6px; }
  .kit__i p  { grid-column: 2; max-width: none; }
  .solar {
    padding: 30px 24px; margin-top: 44px;
    grid-template-columns: 1fr; gap: 0;
  }
  .solar h3 { margin-bottom: 14px; }
  .cotiza { margin-top: 44px; }
  .cotiza__g { grid-template-columns: 1fr; gap: 24px; }
  .kit__cta { margin-top: 32px; }
  .kit__cta { flex-direction: column; }
  .kit__cta .btn { width: 100%; justify-content: center; }
}

/* ── piezas propias de cada mecanismo ───────────────────────
   Cada linea de negocio muestra lo SUYO: un hilo de conversacion sirve para el
   agente telefonico y no dice nada sobre un switch, una camara o una puerta. */

/* estado de un equipo (conectividad) */
.pa__eq {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--verde-600); background: rgba(22, 163, 74, .12);
  border-radius: var(--r-md); padding: 9px 12px;
}
.pa__eq u { display: block; text-decoration: none; color: var(--ink-fg); font-weight: 600;
            font-size: clamp(13px, 1.3vw, 16px); }
.pa__eq s { display: block; text-decoration: none; color: var(--ink-fg-mut);
            font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; }
.pa__eq b { font-size: clamp(12px, 1.2vw, 15px); }

/* lineas de registro: sirve de linea de tiempo y de bitacora */
.pa__log { display: flex; flex-direction: column; gap: 5px; }
.pa__log > div {
  display: flex; align-items: baseline; gap: 9px;
  border-left: 2px solid var(--ink-border); padding: 3px 0 3px 10px;
}
.pa__log u {
  text-decoration: none; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .06em; color: var(--ink-fg-mut); flex: none;
}
.pa__log s {
  text-decoration: none; color: var(--ink-fg); font-size: clamp(12px, 1.2vw, 15px);
  line-height: 1.25;
}
.pa__log b {
  margin-left: auto; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--verde-300); flex: none;
}
.pa__log .pa__mal { border-left-color: var(--rojo-500); }
.pa__log .pa__mal s { color: var(--rojo-300); }
.pa__log .pa__mal b { color: var(--rojo-300); }
.pa__log--ancho s { font-size: clamp(11px, 1.1vw, 14px); }

/* la grilla de camaras: 40 puntos, tres en rojo. Se ve de un vistazo cuantas
   hay y cuantas no estan sirviendo, que es justo el argumento. */
.pa__grid { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; }
.pa__grid i {
  display: block; aspect-ratio: 1; border-radius: 2px;
  background: var(--verde-600); opacity: .55;
}
.pa__grid i.mal { background: var(--rojo-500); opacity: 1; }

@media (max-width: 900px) {
  .pa__grid { grid-template-columns: repeat(10, 1fr); gap: 3px; }
  .pa__eq s { display: none; }
}

/* ── la pieza del monitoreo, en la banda ────────────────────
   El monitoreo no es una quinta linea sino la capa por encima de las cuatro,
   asi que su pieza va en la banda y no en el acordeon. Se descarga y corre solo
   cuando la banda entra en pantalla; en movil y con menos movimiento no se pide. */
/* Vertical y entera, igual que las cuatro: el archivo -web dejaba el contenido
   util en un tercio del cuadro y se leia encogido aunque la caja fuera ancha. */
.capa__pieza { margin: 22px 0 0; grid-column: 1 / -1; max-width: 430px; }
.capa__vid {
  display: block; width: 100%; aspect-ratio: 9 / 16;
  border-radius: var(--r-lg); background: var(--grafito-950);
  opacity: 0; transition: opacity 500ms var(--ease-out);
}
.capa__vid.listo { opacity: 1; }
.capa__pieza figcaption {
  margin-top: 9px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-fg-mut);
}
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .capa__pieza { display: none; }
}

/* ══ 13 · LAS CUATRO PIEZAS ═════════════════════════════════
   La pieza va VERTICAL y entera. Se probaron los archivos -web —el vertical
   montado en un 16:9 con bandas difuminadas— y no sirven en ningun ancho: el
   contenido util ocupa el 31,6% del cuadro, asi que a 1088 px de caja queda en
   344 y no se lee. Se desperdicia el 68%.

   El numero que manda: la pieza esta dibujada sobre un lienzo de 1080 con el
   cuerpo a 30 px. Para leerlo a ~15 px hace falta mostrarla a 540 de ancho, que
   en 9:16 son 960 de alto. Por eso la columna del video es ancha y alta, y al
   lado van las pestanas y el texto.

   En movil no hay problema: a 375 px CSS con pantalla de 3x se rinde a 1125
   fisicos, o sea 1:1 con el diseno. Se ve como un Reel en el telefono. */
.piezas {
  margin-top: 14px;
  display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: 34px; align-items: start;
}
.piezas__ver { margin: 0; grid-column: 1; }
.piezas__vid {
  display: block; width: 100%; aspect-ratio: 9 / 16;
  border-radius: var(--r-lg); background: var(--grafito-950);
  opacity: 0; transition: opacity 420ms var(--ease-out);
}
.piezas__vid.listo { opacity: 1; }
.piezas__ver figcaption {
  margin-top: 9px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted);
}

.piezas__lado { grid-column: 2; }
.piezas__tabs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.pz {
  display: flex; align-items: baseline; gap: 11px; text-align: left; width: 100%;
  font-family: var(--font-sans); font-size: clamp(15px, 1.5vw, 18px); font-weight: 600;
  color: var(--fg-muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 13px 18px; cursor: pointer;
  transition: color 240ms var(--ease), border-color 240ms var(--ease),
              background 240ms var(--ease);
}
.pz__n { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; opacity: .7; flex: none; }
.pz:hover { color: var(--fg-strong); border-color: var(--accion); }
.pz.on { color: var(--accion-text); background: var(--boton); border-color: var(--boton); }
.pz.on .pz__n { opacity: .85; }
.pz:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }

.pzf { display: none; }
.pzf.on { display: block; }
.pzf p { margin: 0 0 14px; color: var(--fg-muted); }

@media (max-width: 900px) {
  /* una columna: la pieza a ancho completo, que en un telefono es 1:1 */
  .piezas { grid-template-columns: 1fr; gap: 20px; }
  .piezas__ver, .piezas__lado { grid-column: 1; }
  .piezas__vid { border-radius: var(--r-md); }
  .pz { font-size: 14.5px; padding: 11px 15px; }
}