/* Landing TESREN — reglas de página sobre el design system "Industry".
   Todo valor sale de los tokens de industry.css. */

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  text-wrap: pretty;
}

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-800); }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* Cada <img> lleva width/height con sus pixeles intrinsecos para que el
   navegador reserve la caja antes de descargar la imagen (sin layout shift).
   Esos atributos son "presentational hints": ademas del aspect-ratio fijan
   `height` en CSS, y ahi rompen el layout porque los style= inline solo
   declaran `width: 100%`. `height: auto` los devuelve al comportamiento de
   siempre y conserva el aspect-ratio, que es lo que reserva la caja.
   Especificidad 0-0-1: no pisa a `.l-fig-cover { height: 100%; }`. */
img { height: auto; }

/* ── Ticker ───────────────────────────────────────────────── */
/* El contenido está duplicado en el HTML; -50% cierra el loop sin salto. */
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  /* will-change conserva la capa de composición que la animación creaba:
     sin ella el texto de la página cambia de antialiasing subpíxel a escala
     de grises y el render deja de ser idéntico al original. */
  .ticker-track { animation: none !important; will-change: transform; }
}

/* ── Hovers (reemplazan los 28 atributos style-hover) ─────── */
/* Los 28 disparan. `box-shadow` y `background` no los declara nadie mas sobre
   estos elementos, asi que la clase suelta basta (22 casos). Los 6 que tocan
   `color` si compiten y llevan calificador; ver la nota de abajo. */
.h-elev:hover  { box-shadow: var(--shadow-md); }
.h-tint8:hover { background: color-mix(in srgb, var(--color-accent-500) 8%, transparent); }
.h-tint6:hover { background: color-mix(in srgb, var(--color-accent-500) 6%, transparent); }
.h-a700:hover  { color: var(--color-accent-700); }
.h-a800:hover  { color: var(--color-accent-800); }

/* Los 6 hovers de `color` viven todos en el `<nav>`, y ahi el color de reposo
   lo fija `.nav a.l-nav-link` / `.nav a.l-nav-em` (0-2-1), mas especificas que
   una clase suelta (0-2-0): sin calificador el hover no se veia. `.nav a` los
   sube a 0-3-1 y ganan por especificidad, sin depender del orden ni de
   `!important`. El calificador es tan estrecho como el problema: solo el nav. */
.nav a.h-a700:hover { color: var(--color-accent-700); }
.nav a.h-a800:hover { color: var(--color-accent-800); }

/* Foco de teclado: NO se declara aqui a proposito. El design system ya trae
   `:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }`
   (industry.css) y llega vivo a esta pagina: recorrido real con Tab, cada
   parada computa `outline: rgb(89, 128, 166) solid 2px`. Repetir la regla aqui
   solo crearia dos sitios que mantener para el mismo pixel. */

/* == Patrones extraidos de los style= inline ================ */
/* Cada regla reproduce, valor por valor, un style="..." que se repetia
   3 o mas veces en site/index.html. La sustitucion vive en tools/convert.py
   (STYLE_CLASSES), de modo que regenerar el HTML la reproduce.
   Prefijo `l-` para no colisionar con el design system. */

/* Layout de pagina */
.l-section { max-width: 1280px; margin: 0 auto; padding: clamp(56px, 8vh, 96px) clamp(20px, 5vw, 72px); }
.l-rule-b { border-bottom: 1px solid var(--color-divider); }
.l-col { display: flex; flex-direction: column; }
.l-m0 { margin: 0; }
.l-pad-22 { padding: 22px; }
.l-js-start { justify-self: start; }
.l-card-stack { padding: 24px; display: flex; flex-direction: column; gap: 12px; }

/* Titulos, kickers y etiquetas */
.l-kicker { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 12px; }
.l-kicker-xs { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--color-accent-700); }
.l-card-title { font-family: var(--font-heading); font-weight: 600; font-size: 26px; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; }
.l-h-23 { font-family: var(--font-heading); font-weight: 600; font-size: 23px; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; }
.l-h-22 { font-family: var(--font-heading); font-weight: 600; font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase; margin: 12px 0 0; }
.l-item-title { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 19px; text-transform: uppercase; letter-spacing: 0.02em; margin-top: 4px; }
.l-summary { font-family: var(--font-heading); font-weight: 600; font-size: 21px; letter-spacing: 0.02em; text-transform: uppercase; display: flex; justify-content: space-between; gap: 16px; }
.l-accent-txt { color: var(--color-accent-700); }

/* Texto de cuerpo */
.l-lead-p { font-size: 15px; line-height: 24px; margin: 12px 0 4px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.l-card-p { font-size: 15px; line-height: 24px; margin: 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.l-card-p-fill { font-size: 14px; line-height: 22px; margin: 0; flex: 1; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.l-body-sm { font-size: 14px; line-height: 22px; margin: 10px 0 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.l-note-p { font-size: 14px; line-height: 22px; margin: 8px 0 0; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.l-card-foot { font-size: 13px; line-height: 20px; margin: 0; padding-top: 12px; border-top: 1px solid var(--color-divider); color: var(--color-accent-800); }

/* Figuras */
.l-fig-cover { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.l-fig-caption { position: absolute; left: 0; bottom: 0; right: 0; background: color-mix(in srgb, var(--color-accent-900) 82%, transparent); color: var(--color-bg); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 14px; }

/* Datos: specs, cifras y tabla */
.l-spec-num { font-family: var(--font-heading); font-weight: 600; font-size: 28px; color: var(--color-accent-700); }
.l-spec-row { display: grid; grid-template-columns: 72px minmax(200px, 3fr) minmax(280px, 5fr) minmax(120px, 2fr); gap: 0 24px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--color-divider); }
.l-stat-big { display: block; font-family: var(--font-heading); font-weight: 600; font-size: clamp(56px, 5vw, 80px); line-height: 1; color: var(--color-accent-700); }
.l-stat-label { display: block; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 10px; font-weight: 600; }
.l-stat-note { display: block; font-size: 13px; line-height: 20px; margin-top: 4px; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.l-cell { font-size: 15px; }
.l-cell-muted { font-size: 15px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }

/* Enlaces y acordeon */
/* Calificado con `.nav a` a proposito: el DS trae `.nav a { font-size: 14px;
   color: inherit; }` y `.nav a:hover { color: var(--color-accent); }`, ambas
   mas especificas que una clase suelta. El style inline les ganaba; sin el
   calificador la clase pierde y los enlaces subirian a 14px. */
.nav a.l-nav-link { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--color-text); }
/* El enlace destacado del nav (Teltonika). Aparece una sola vez, asi que por la
   regla de las 3 apariciones se habria quedado inline; se extrae igual porque
   su `color` inline le ganaba a cualquier selector y dejaba muerto el
   `.h-a800:hover` de ese mismo enlace. Ya en clase, el hover lo pisa por
   especificidad. Mismos valores que traia el style=, en el mismo orden. */
.nav a.l-nav-em { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--color-accent-700); font-weight: 600; }
/* `a.` no es decorativo: estas clases fijan `color` sobre enlaces y el
   `a:hover { color: var(--color-accent-800); }` de arriba es mas especifico
   que una clase suelta. El style inline le ganaba; el calificador de tipo
   empata en especificidad y gana por orden, conservando el hover original. */
a.l-strip-link { padding: 18px 20px; border-right: 1px solid var(--color-divider); color: var(--color-text); }
a.l-tile-link { padding: 22px; color: var(--color-text); background: var(--color-bg); }
.l-acc-item { border-top: 1px solid var(--color-divider); padding: 16px 0; }

/* Bloques sobre fondo oscuro */
/* Se aplica a 5 <span class="tag"> y a 1 <a class="btn btn-secondary">. El
   selector doble da a cada uno el peso justo: los span con la clase suelta, el
   enlace calificado con `a` para no perder el color contra `a:hover`. */
.l-on-dark, a.l-on-dark { color: var(--color-bg); border-color: color-mix(in srgb, #ffffff 40%, transparent); }
.l-on-dark-dim { color: color-mix(in srgb, #ffffff 60%, transparent); }
/* Calificado con `label` para empatar en especificidad con el
   `.field > label { color: ... }` del DS y ganarle por orden de fuente. */
label.l-on-dark-label { color: color-mix(in srgb, #ffffff 70%, transparent); }
.l-dark-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 16px; font-size: 14px; border-bottom: 1px solid color-mix(in srgb, #ffffff 18%, transparent); }