/* Segtelco — landings por línea de negocio (/videoseguridad/, y las que sigan).
   Carga SOLO en esas páginas, encima de site.css + pagina.css.

   Una landing por línea, todas con la misma estructura para poder compararlas
   con publicidad segmentada: hero de 5 segundos → por qué nadie se entera →
   el mecanismo → prueba → cómo se contrata → formulario. Lo que es de la
   página (el panel de demostración de cada mecanismo) va en el HTML; acá va
   el envase común. Cero valores de color: todo sale de tokens.css. */

/* ══ HERO ════════════════════════════════════════════════ */
.lhero {
  position: relative; overflow: hidden;
  background: var(--ink-bg); color: var(--ink-fg);
  min-height: 640px; display: flex; align-items: center;
}
.lhero__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 68% 40%;
}
/* Velo: el texto vive a la izquierda y el panel a la derecha; la foto se ve
   entre los dos. Sin el tramo izquierdo el blanco no llega a AA. */
.lhero::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(0,0,0,.82) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.30) 100%),
    linear-gradient(to top, var(--ink-bg) 0%, transparent 34%);
}
.lhero__in {
  position: relative; z-index: 1; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 48px; align-items: center;
  padding-block: 72px 52px; /* el lateral lo pone .container */
}
.lhero .eyebrow { color: var(--rojo-300); }
.lhero__t {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1.02; letter-spacing: -.026em;
  color: var(--ink-fg); max-width: 18ch; margin: 14px 0 0;
}
.lhero__lead {
  margin: 20px 0 0; max-width: 56ch;
  font-size: clamp(16px, 1.45vw, 19px); line-height: 1.55; color: var(--ink-fg-mut);
}
.lhero__lead b { color: var(--ink-fg); font-weight: 650; }
.lhero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.lhero .btn--ghost { color: var(--ink-fg); border-color: rgba(255,255,255,.28); }
.lhero .btn--ghost:hover { border-color: var(--ink-fg); background: transparent; }

.lkpis {
  display: flex; flex-wrap: wrap; gap: 26px 40px;
  margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--ink-border);
}
.lkpi__n {
  font-family: var(--font-display); font-size: 30px; font-weight: 800;
  color: var(--ink-fg); line-height: 1; letter-spacing: -.02em;
}
.lkpi__n small { font-size: 15px; font-weight: 600; color: var(--ink-fg-mut); margin-left: 4px; }
.lkpi__l {
  margin-top: 7px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-fg-mut);
}

/* El panel del hero reutiliza .consola/.fila de site.css. En móvil no se
   muestra: medido en la portada, el panel eran 1.066 px de adorno antes del
   contenido — y acá los primeros 5 segundos son sólo titular, bajada y botón. */
.lhero__panel { justify-self: end; width: 100%; max-width: 440px; }

/* ══ SECCIONES ═══════════════════════════════════════════ */
.lsec { padding: var(--section-py) 0; }
.lsec--soft { background: var(--bg-soft); }
.lsec--ink { background: var(--ink-bg); color: var(--ink-fg); }
.lsec h2 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.022em;
  font-size: clamp(27px, 3.1vw, 40px); line-height: 1.08; margin: 10px 0 0;
  max-width: 24ch; color: var(--fg-strong);
}
.lsec .regla { margin: 16px 0 0; max-width: 62ch; font-size: 17px; line-height: 1.55; color: var(--fg-muted); }
/* Van después de las reglas genéricas: misma especificidad, gana el orden. */
.lsec--ink h2, .lsec--ink h3 { color: var(--ink-fg); }
.lsec--ink .regla, .lsec--ink p { color: var(--ink-fg-mut); }
.lsec--ink .eyebrow { color: var(--rojo-300); }

/* ══ POR QUÉ NADIE SE ENTERA — tres fallas ═══════════════ */
/* Escalonadas: la del medio baja en escritorio. Tres cajas idénticas en fila
   es exactamente la grilla de "servicios" que la Regla 0 prohíbe. */
.fallas {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; margin-top: 40px; align-items: start;
}
.falla {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sombra-sutil);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
.falla:hover { transform: translateY(-5px); box-shadow: var(--sombra); border-color: var(--accion); }
.falla:nth-child(2) { margin-top: 44px; }
.falla__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.falla__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 900ms var(--ease-out);
}
.falla:hover .falla__media img { transform: scale(1.06); }
/* La captura de demostración va entera, no recortada: es un panel, no una foto. */
.falla__media--panel { aspect-ratio: auto; padding: 18px 18px 0; background: var(--grafito-900); }
.falla__media--panel img { object-fit: contain; height: auto; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.falla__rot {
  position: absolute; left: 14px; top: 14px; z-index: 1;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--n-0);
  background: var(--rojo-600); padding: 7px 11px; border-radius: 6px;
}
.falla__rot::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--n-0); margin-right: 8px; vertical-align: 1px;
  animation: parpadeo 1.4s ease-in-out infinite;
}
@keyframes parpadeo { 50% { opacity: .25; } }
.falla__cuerpo { padding: 22px 24px 26px; }
.falla h3 { font-size: 21px; margin: 0 0 8px; letter-spacing: -.015em; color: var(--fg-strong); }
.falla p { margin: 0; font-size: 15.5px; line-height: 1.58; color: var(--fg-muted); }

.golpe {
  margin: 48px 0 0; padding-top: 30px; border-top: 1px solid var(--border);
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.024em;
  font-size: clamp(24px, 2.8vw, 36px); line-height: 1.1; color: var(--fg-strong);
  max-width: 24ch;
}
.golpe em { font-style: normal; color: var(--accion-text); }

/* ══ EL MECANISMO — panel de verificación + tres verificaciones ═ */
.mec {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 48px; align-items: start; margin-top: 44px;
}
.verifica {
  border: 1px solid var(--ink-border); border-radius: var(--r-lg);
  background: var(--ink-bg-2); font-family: var(--font-mono); overflow: hidden;
  position: sticky; top: calc(var(--header-h) + 20px);
}
.verifica__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);
}
.verifica__top b { color: var(--ink-fg); font-weight: 700; }
.verifica__pct { color: var(--verde-300); }
.verifica__grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; padding: 18px 20px 6px;
}
.verifica__grid i {
  display: block; aspect-ratio: 1; border-radius: 6px;
  border: 1px solid var(--ink-border); background: var(--ink-surface);
  position: relative; transition: background 260ms var(--ease), border-color 260ms var(--ease);
}
.verifica__grid i::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.14);
}
.verifica__grid i.ok { border-color: var(--estado-borde); background: var(--estado-wash); }
.verifica__grid i.ok::after { background: var(--verde-500); }
/* El panel es oscuro en los dos temas: el lavado rojo se mezcla acá y no sale
   de --accion-wash, que en tema claro es rosado sólido. */
.verifica__grid i.mal { border-color: var(--rojo-500); background: color-mix(in srgb, var(--rojo-500) 18%, transparent); }
.verifica__grid i.mal::after { background: var(--rojo-500); animation: parpadeo 1.1s ease-in-out infinite; }
.verifica__grid i.mirada::after { animation: chequeo 700ms var(--ease) 1; }
.verifica__log { padding: 8px 20px 14px; height: 160px; overflow: hidden; }
.verifica__log div {
  display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: baseline;
  padding: 8px 0; border-top: 1px solid var(--ink-border);
  font-size: 12px; line-height: 1.45; color: var(--ink-fg-mut);
  opacity: 0; transform: translateY(6px);
  animation: linea-entra 380ms var(--ease-out) forwards;
}
.verifica__log div:first-child { border-top: none; }
.verifica__log u { text-decoration: none; color: var(--ink-fg-mut); }
.verifica__log b { color: var(--ink-fg); font-weight: 600; }
.verifica__log div.mal b { color: var(--rojo-300); }
.verifica__log div.ok b { color: var(--verde-300); }
@keyframes linea-entra { to { opacity: 1; transform: none; } }
.verifica__pie {
  padding: 13px 20px; border-top: 1px solid var(--ink-border);
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-fg-mut);
  display: flex; justify-content: space-between; gap: 12px;
}
.verifica__pie b { color: var(--rojo-300); font-weight: 700; }

.ver { display: grid; gap: 8px; counter-reset: ver; }
.ver__i {
  display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: start;
  padding: 24px 0; border-top: 1px solid var(--ink-border);
}
.ver__i:first-child { border-top: none; padding-top: 0; }
.ver__n {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em;
  color: var(--rojo-300); padding-top: 6px;
}
.ver__i h3 { font-size: 22px; margin: 0 0 8px; letter-spacing: -.015em; color: var(--ink-fg); }
.ver__i p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-fg-mut); }
.ver__i p b { color: var(--ink-fg); font-weight: 650; }

/* Las voces: la voz se escucha, no se describe. Chips en mono sobre la banda
   oscura; el play es un triángulo CSS que pasa a dos barras al sonar, y la
   barra de abajo (<b>) avanza con --p desde linea.js. */
.voces { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--ink-border); }
.voces__cab h3 { font-size: 22px; margin: 0 0 8px; letter-spacing: -.015em; color: var(--ink-fg); }
.voces__cab p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-fg-mut); max-width: 62ch; }
.voces__lista { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.voz {
  position: relative; display: inline-flex; align-items: center; gap: 10px; overflow: hidden;
  padding: 10px 16px 12px 14px; border: 1px solid var(--ink-border); border-radius: 999px;
  color: var(--ink-fg); text-decoration: none; font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em;
  background: rgba(255,255,255,.03); transition: border-color .2s, background .2s;
}
.voz:hover, .voz:focus-visible { border-color: var(--rojo-300); background: rgba(255,255,255,.06); outline: none; text-decoration: none; }
.voz.on { border-color: var(--rojo-300); }
.voz i { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--rojo-300); }
.voz.on i { width: 9px; height: 12px; border: 0; border-left: 3px solid var(--rojo-300); border-right: 3px solid var(--rojo-300); box-sizing: border-box; }
.voz u { text-decoration: none; color: var(--ink-fg-mut); font-size: 11px; }
.voz b { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--rojo-300); transform: scaleX(var(--p, 0)); transform-origin: left; }
.voces__frase { margin: 20px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-fg); max-width: 62ch; }
.voces__frase q { quotes: "«" "»"; color: var(--ink-fg-mut); }
.voces__nota { margin: 8px 0 0; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; color: var(--ink-fg-mut); max-width: 70ch; }

.voces__llame { margin: 22px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-fg); }
.voces__llame a { color: var(--ink-fg); text-decoration: none; font-family: var(--font-mono); font-size: 20px; letter-spacing: .02em; border-bottom: 2px solid var(--rojo-300); }
.voces__llame a b { font-family: var(--font-body); font-weight: 650; font-size: 17px; border: 0; }
.voces__llame a:hover { color: var(--rojo-300); }
.voces__llame span { display: block; margin-top: 6px; font-size: 15px; color: var(--ink-fg-mut); }

/* Cita técnica: es la prueba, así que va en mono y con la regla roja. */
.cita {
  margin: 44px 0 0; padding: 26px 30px;
  border-left: 3px solid var(--rojo-500); background: var(--ink-surface);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--font-mono); font-size: 14px; line-height: 1.7; color: var(--ink-fg-mut);
  max-width: 78ch;
}
.cita b { color: var(--ink-fg); font-weight: 700; }
.cita__etq {
  display: block; margin-bottom: 10px; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rojo-300);
}

.capturas { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; }
.capturas figure {
  margin: 0; border: 1px solid var(--ink-border); border-radius: var(--r-md);
  overflow: hidden; background: var(--ink-bg-2);
}
.capturas img { display: block; width: 100%; height: auto; }
.capturas figcaption {
  padding: 12px 16px; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .04em; color: var(--ink-fg-mut); border-top: 1px solid var(--ink-border);
}

/* ══ INSTALACIÓN — texto + foto ═══════════════════════════ */
.dos {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px; align-items: center;
}
.dos__foto { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--sombra); }
.dos__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dos .lista li { font-size: 16px; }

/* ══ PRUEBA — la franja de cifras ═════════════════════════ */
.prueba {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  margin-top: 40px; border-top: 1px solid var(--border);
}
.prueba__i { padding: 30px 26px 30px 0; border-left: 1px solid var(--border); padding-left: 26px; }
.prueba__i:first-child { border-left: none; padding-left: 0; }
.prueba__n {
  font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 48px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1; color: var(--fg-strong);
}
.prueba__n small { font-size: .42em; font-weight: 600; color: var(--fg-muted); margin-left: 6px; }
.prueba__l { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--fg-muted); max-width: 22ch; }
.prueba__l a { color: inherit; }
.lsectores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.lsectores span {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 13px; border: 1px solid var(--border); border-radius: 999px; color: var(--fg);
}
.lsectores__nota { margin: 14px 0 0; font-size: 14px; color: var(--fg-muted); }

/* ══ LEY — el único bloque con fecha ══════════════════════ */
.ley {
  margin-top: 56px; padding: 30px 32px;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start;
}
.ley__fecha {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--n-0); background: var(--rojo-600);
  padding: 9px 13px; border-radius: 6px; white-space: nowrap;
}
.ley h3 { margin: 2px 0 8px; font-size: 22px; letter-spacing: -.015em; color: var(--fg-strong); }
.ley p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--fg-muted); max-width: 70ch; }
.ley p b { color: var(--fg); font-weight: 650; }

/* ══ CÓMO SE CONTRATA ═════════════════════════════════════ */
.datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 36px; }
.dato {
  padding: 24px 24px 26px; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); position: relative;
  transition: transform 300ms var(--ease-out), border-color 300ms var(--ease);
}
.dato:hover { transform: translateY(-4px); border-color: var(--accion); }
.dato__n {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  color: var(--accion-text); margin-bottom: 12px;
}
.dato h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.012em; color: var(--fg-strong); }
.dato p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-muted); }
.datos__pie { margin: 28px 0 0; font-size: 16.5px; line-height: 1.6; max-width: 62ch; color: var(--fg); }
.datos__pie b { font-weight: 700; color: var(--fg-strong); }

/* ══ CIERRE + FORMULARIO ══════════════════════════════════ */
.lcierre { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.lcierre__canales { display: grid; gap: 10px; margin-top: 26px; }
.lcierre__canales a {
  display: flex; align-items: center; gap: 12px;
  font-size: 17px; font-weight: 600; color: var(--fg-strong); text-decoration: none;
}
.lcierre__canales a:hover { color: var(--accion-text); }
.lcierre__canales small { font-weight: 500; color: var(--fg-muted); font-size: 14px; }
.lcierre .form { margin: 0; }

/* ══ RESPONSIVE ═══════════════════════════════════════════ */
@media (max-width: 1080px) {
  .lhero__in { grid-template-columns: 1fr; }
  .lhero__panel { display: none; }
  .mec { grid-template-columns: 1fr; }
  .verifica { position: static; }
  .prueba { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prueba__i:nth-child(3) { border-left: none; padding-left: 0; }
}
@media (max-width: 820px) {
  .lhero { min-height: 0; }
  .lhero__in { padding-block: 56px 40px; }
  .fallas { grid-template-columns: 1fr; }
  .falla:nth-child(2) { margin-top: 0; }
  .capturas { grid-template-columns: 1fr; }
  .dos { grid-template-columns: 1fr; gap: 28px; }
  .datos { grid-template-columns: 1fr; }
  .lcierre { grid-template-columns: 1fr; gap: 34px; }
  .ley { grid-template-columns: 1fr; gap: 14px; }
  .lsec { padding: 64px 0; }
}
@media (max-width: 520px) {
  .lkpis { gap: 18px 26px; }
  .lkpi__n { font-size: 26px; }
  .prueba { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .prueba__i { padding: 22px 0; }
  .prueba__i:nth-child(even) { padding-left: 18px; }
  .verifica__grid { grid-template-columns: repeat(8, 1fr); gap: 6px; padding: 14px 14px 4px; }
  .verifica__log { padding: 6px 14px 12px; }
  .cita { padding: 20px 18px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .falla__rot::before, .verifica__grid i.mal::after { animation: none; }
  .verifica__log div { animation: none; opacity: 1; transform: none; }
  .falla, .dato, .falla__media img { transition: none; }
}

/* ══ EL REGISTRO DE ACCESOS (control de acceso) ══════════ */
/* Comparte el envase de .verifica; cambia el cuerpo: una lista de eventos. */
/* Altura FIJA: si la lista crece con cada fila, el panel cambia de tamaño y la
   fracción visible cruza el umbral del observador ida y vuelta — medido el
   14-sep, el motor se apagaba solo con el panel medio a la vista. */
.registro__lista { padding: 10px 20px 14px; height: 340px; overflow: hidden; }
.registro__lista div {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--ink-border);
  font-size: 12px; line-height: 1.45; color: var(--ink-fg-mut);
  opacity: 0; transform: translateY(6px);
  animation: linea-entra 380ms var(--ease-out) forwards;
}
.registro__lista div:first-child { border-top: none; }
.registro__lista u { text-decoration: none; color: var(--ink-fg-mut); }
.registro__lista s { text-decoration: none; }
.registro__lista b { color: var(--ink-fg); font-weight: 600; }
.registro__lista em {
  font-style: normal; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--verde-300); white-space: nowrap;
}
.registro__lista em::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--verde-500); margin-right: 7px; vertical-align: 1px;
}
.registro__lista div.mal em { color: var(--rojo-300); }
.registro__lista div.mal em::before { background: var(--rojo-500); animation: parpadeo 1.1s ease-in-out infinite; }
@media (max-width: 520px) {
  .registro__lista { height: 400px; }
  .registro__lista div { grid-template-columns: 44px 1fr; }
  .registro__lista em { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .registro__lista div { animation: none; opacity: 1; transform: none; }
  .registro__lista div.mal em::before { animation: none; }
}

/* ══ QUÉ INCLUYE (opcional) ══════════════════════════════ */
/* Para las líneas con producto propio (telefonía, wifi, monitoreo): lo que la
   ficha anterior contaba en diez secciones, acá en columnas de una línea por
   capacidad. Se lee de una pasada y no compite con el mecanismo. */
.incluye { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.incluye__c {
  padding: 24px 24px 22px; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
}
.incluye__c h3 { margin: 0 0 12px; font-size: 18px; letter-spacing: -.012em; color: var(--fg-strong); }
.incluye__c ul { list-style: none; margin: 0; padding: 0; }
.incluye__c li {
  position: relative; padding: 7px 0 7px 18px; font-size: 14.5px; line-height: 1.5;
  color: var(--fg-muted); border-top: 1px solid var(--hairline);
}
.incluye__c li:first-child { border-top: none; }
.incluye__c li::before { content: '—'; position: absolute; left: 0; color: var(--accion-text); }
.incluye__c li b { color: var(--fg); font-weight: 600; }
/* Una captura de producto en el hueco de la foto: entera, sobre grafito. */
.dos__foto--panel { aspect-ratio: auto; background: var(--grafito-900); padding: 14px; }
.dos__foto--panel img { height: auto; object-fit: contain; border-radius: var(--r-sm); }
@media (max-width: 1080px) { .incluye { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .incluye { grid-template-columns: 1fr; } }

/* ══ MOVIMIENTO EN LAS LANDINGS (15-sep-2026) ════════════ */
/* Lo mismo que recibió el home: video en el hero con la foto como LCP, foco
   que sigue al mouse, el titular que entra por palabras, tilt en las fallas,
   la pieza vertical del mecanismo, el marquee y la línea de pasos que se
   enciende con el log. Cero valores de color. */
.lhero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: inherit;
  opacity: 0; transition: opacity 1100ms var(--ease); pointer-events: none;
}
.lhero__video.listo { opacity: 1; }
.lhero.con-foco::after {
  background:
    radial-gradient(420px circle at var(--mx, 70%) var(--my, 40%), transparent 0%, rgba(0,0,0,.26) 100%),
    linear-gradient(to right, rgba(0,0,0,.82) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.30) 100%),
    linear-gradient(to top, var(--ink-bg) 0%, transparent 34%);
}
/* Titular por palabras (GsapTextReveal, sin GSAP): cada palabra sube con su
   retardo. Sin JS no hay clase .js y el titular está quieto y visible. */
html.js .lhero__t .pal { display: inline-block; opacity: 0; transform: translateY(.45em); animation: pal-entra 640ms var(--ease-out) forwards; animation-delay: calc(120ms + var(--i) * 55ms); }
@keyframes pal-entra { to { opacity: 1; transform: none; } }

.falla, .dato, .combo { transform-style: preserve-3d; will-change: transform; }

/* La línea de pasos: el paso que el log está escribiendo se enciende. */
.ver__i { transition: opacity 320ms var(--ease); }
/* Sin atenuar los pasos inactivos: bajarles la opacidad rompía el contraste
   (Lighthouse 96 en accesibilidad). El activo se marca por suma, no por resta. */
.ver.sincro .ver__i { border-radius: var(--r-md); transition: background 320ms var(--ease), box-shadow 320ms var(--ease); }
.ver.sincro .ver__i.on { background: var(--ink-surface); box-shadow: inset 3px 0 0 var(--rojo-500); padding-left: 14px; margin-left: -14px; }
.ver.sincro .ver__i.on .ver__n { color: var(--rojo-500); }

/* La pieza vertical: 9:16 en una columna angosta, donde se lee. */
.pieza { background: var(--bg-soft); }
.pieza__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.pieza__vids { display: flex; gap: 22px; justify-content: center; }
.pieza__f { margin: 0; max-width: 340px; flex: 1 1 0; }
.pieza__vid {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16;
  border-radius: var(--r-lg); background: var(--grafito-900); object-fit: cover;
  box-shadow: var(--sombra); border: 1px solid var(--border);
}
.pieza__marco { position: relative; }
/* El botón de sonido: sobre el video, abajo, para que se vea sin tapar el texto del reel. */
.pieza__son {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font: 600 14px/1 var(--font-sans, inherit); color: var(--n-0);
  background: var(--boton); border: 0; border-radius: 999px; padding: 11px 18px 11px 14px;
  box-shadow: var(--sombra); cursor: pointer; transition: background 200ms var(--ease);
}
.pieza__son::before { content: '🔊'; font-size: 15px; }
.pieza__son[aria-pressed="true"] { background: var(--grafito-900); }
.pieza__son[aria-pressed="true"]::before { content: '🔇'; }
.pieza__son:hover { background: var(--rojo-700); }
.pieza__son[aria-pressed="true"]:hover { background: var(--grafito-950); }
.pieza__son:focus-visible { outline: 3px solid var(--rojo-300); outline-offset: 3px; }
.pieza__f figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--fg-muted); }
.pieza__f figcaption b { display: block; color: var(--fg-strong); font-weight: 700; margin-bottom: 2px; }
.pieza--dos .pieza__in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); }

/* Marquee de lo que se supervisa. */
.marquee {
  overflow: hidden; margin-top: 40px; padding: 16px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee__pista { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee__pista span {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-muted); padding: 0 26px; white-space: nowrap;
}
.marquee__pista span::before { content: '●'; color: var(--verde-500); font-size: 8px; margin-right: 14px; vertical-align: 2px; }
.marquee:hover .marquee__pista { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Las capturas reaccionan al mouse (ImageHoverZoom). */
.capturas figure { overflow: hidden; }
.capturas img { transition: transform 900ms var(--ease-out); }
.capturas figure:hover img { transform: scale(1.04); }

@media (max-width: 1080px) {
  .pieza__in, .pieza--dos .pieza__in { grid-template-columns: 1fr; gap: 28px; }
  .pieza__vids { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .pieza__vids { flex-direction: column; align-items: center; }
  .pieza__f { max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .lhero__t .pal { animation: none; opacity: 1; transform: none; }
  .marquee__pista { animation: none; }
  .falla, .dato, .combo { transform: none !important; }
}

/* ══ LAS SEIS TARJETAS (15-sep-2026) ══════════════════════ */
/* Reemplazan a «qué incluye». Una idea por tarjeta y un rótulo mono que se
   ESCRIBE al entrar en pantalla, como una línea de consola. La tarjeta cuyo
   paso coincide con lo que el log está escribiendo se enciende. */
.tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.tarjeta {
  position: relative; padding: 24px 24px 20px; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); display: flex; flex-direction: column; gap: 8px; box-shadow: var(--sombra-sutil);
  transform-style: preserve-3d; will-change: transform;
  transition: transform 320ms var(--ease-out), border-color 320ms var(--ease), box-shadow 320ms var(--ease);
}
.tarjeta:hover, .tarjeta.on { transform: translateY(-4px); border-color: var(--accion); box-shadow: var(--sombra); }
.tarjeta__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--accion-text); }
.tarjeta h3 { margin: 2px 0 0; font-size: 20px; letter-spacing: -.014em; line-height: 1.2; color: var(--fg-strong); }
.tarjeta p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-muted); flex: 1; }
.tarjeta__rot {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg); min-height: 2.2em;
}
.tarjeta__rot i { width: 7px; height: 7px; border-radius: 50%; background: var(--verde-500); flex: none; }
.tarjeta.on .tarjeta__rot i { background: var(--rojo-500); animation: parpadeo 1.1s ease-in-out infinite; }
/* el cursor de escritura mientras se escribe el rótulo */
.tarjeta__rot span.escribiendo::after { content: '▍'; color: var(--accion-text); animation: parpadeo .7s steps(1) infinite; margin-left: 1px; }

/* el estado «denegada» de la consola del hero, en rojo */
.fila__e.fila__e--mal, .fila__e.fila__e--mal i { color: var(--rojo-300); }
.fila__e.fila__e--mal i { background: var(--rojo-500); }

@media (max-width: 1080px) { .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tarjetas { grid-template-columns: 1fr; gap: 14px; } .tarjeta { padding: 20px 20px 16px; } }
@media (prefers-reduced-motion: reduce) { .tarjeta { transform: none !important; } .tarjeta__rot span.escribiendo::after { animation: none; } }

/* ══ LA CÁMARA DE PATENTES (control de acceso, 15-sep) ═══ */
/* La captura del LPR dibujada en HTML: foto de demostración con la placa en
   blanco, recuadro sobre la placa, la patente que se escribe y el veredicto.
   Va también en el teléfono (lhero__panel--movil), debajo del CTA. */
.lpr {
  border: 1px solid var(--ink-border); border-radius: var(--r-lg); overflow: hidden;
  background: rgba(10,13,18,.72); 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); color: var(--ink-fg);
}
.lpr__top, .lpr__pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-fg-mut);
}
.lpr__top { border-bottom: 1px solid var(--ink-border); }
.lpr__top b { color: var(--ink-fg); font-weight: 700; }
.lpr__estado { color: var(--verde-300); white-space: nowrap; }
.lpr__estado.mal { color: var(--rojo-300); }
.lpr__marco { position: relative; aspect-ratio: 16 / 9.4; overflow: hidden; background: var(--grafito-950); }
.lpr__foto { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--ease); }
.lpr__foto.on { opacity: 1; }
.lpr__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* esquinas del visor */
.lpr__esq { position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.7); pointer-events: none; }
.lpr__esq--a { left: 10px; top: 10px; border-right: 0; border-bottom: 0; }
.lpr__esq--b { right: 10px; top: 10px; border-left: 0; border-bottom: 0; }
.lpr__esq--c { left: 10px; bottom: 10px; border-right: 0; border-top: 0; }
.lpr__esq--d { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }
/* el recuadro sobre la placa: posición por vehículo (--l --t --w --h de la foto activa) */
.lpr__caja {
  position: absolute; left: var(--l, 45%); top: var(--t, 64%); width: var(--w, 12%); height: var(--h, 9%);
  border: 2px solid var(--verde-500); border-radius: 3px; box-shadow: 0 0 0 999px rgba(0,0,0,0);
  opacity: 0; transform: scale(1.35); transition: opacity 260ms var(--ease), transform 420ms var(--ease-out), border-color 300ms var(--ease), box-shadow 600ms var(--ease);
}
.lpr__caja.on { opacity: 1; transform: scale(1); }
.lpr__caja.foco { box-shadow: 0 0 0 999px rgba(0,0,0,.42); }
.lpr__caja.mal { border-color: var(--rojo-500); }
.lpr__placa {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  font-family: var(--font-mono); font-weight: 800; font-size: 24px; letter-spacing: .12em; white-space: nowrap;
  padding: 4px 12px; border-radius: 6px; background: var(--n-0); color: var(--grafito-950);
  border: 2px solid var(--grafito-900); min-width: 3ch; min-height: 1.4em; opacity: 0; transition: opacity 220ms var(--ease);
}
.lpr__placa.on { opacity: 1; }
.lpr__placa.escribiendo::after { content: '▍'; color: var(--rojo-600); animation: parpadeo .6s steps(1) infinite; }
.lpr__hud {
  position: absolute; left: 14px; bottom: 12px; font-size: 10.5px; letter-spacing: .08em;
  color: rgba(255,255,255,.85); background: rgba(10,13,18,.55); padding: 4px 8px; border-radius: 4px;
}
.lpr__hud::before { content: '●'; color: var(--rojo-500); margin-right: 8px; animation: parpadeo 1.2s ease-in-out infinite; }
.lpr__pie { border-top: 1px solid var(--ink-border); flex-wrap: wrap; }
.lpr__chip { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-fg); font-weight: 700; }
.lpr__chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-fg-mut); flex: none; }
.lpr__chip.ok i { background: var(--verde-500); }
.lpr__chip.ok { color: var(--verde-300); }
.lpr__chip.mal i { background: var(--rojo-500); animation: parpadeo 1s ease-in-out infinite; }
.lpr__chip.mal { color: var(--rojo-300); }
.lpr__det { color: var(--ink-fg-mut); text-transform: none; letter-spacing: .04em; }

/* en el teléfono el panel sí se muestra, debajo del CTA */
@media (max-width: 1080px) {
  .lhero__panel--movil { display: block; justify-self: stretch; max-width: none; margin-top: 12px; }
  .lpr__placa { font-size: 18px; padding: 3px 9px; }
  .lpr__pie { font-size: 10px; padding: 11px 14px; gap: 6px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lpr__hud::before, .lpr__chip.mal i, .lpr__placa.escribiendo::after { animation: none; }
  .lpr__caja, .lpr__foto, .lpr__placa { transition: none; }
}