/*
 * GENERADO — no editar a mano. Se regenera con scripts/download-fonts.mjs.
 *
 * Archivo (títulos) e Inter (texto), las dos con licencia SIL Open Font License 1.1:
 * se pueden usar, incrustar y servir desde nuestro propio dominio sin pagar ni atribuir en
 * la página. La copia de la licencia va en assets/fonts/LICENCIA.md.
 *
 * Servidas por nosotros a propósito: el sitio no hace UN SOLO pedido a un tercero.
 */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/archivo-500-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/archivo-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/archivo-600-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/archivo-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/archivo-700-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/archivo-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-400-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-500-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-600-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Viper — web comercial.
 *
 * Paleta: son los MISMOS tokens del producto (fondo #0b0f12, superficie #10171c, primario
 * verde azulado #1aa088). No es una decisión de gusto: el producto es oscuro, así que las
 * capturas se integran a la página en vez de recortarse contra un fondo blanco.
 *
 * Estética EPAM (aire, tipografía, ritmo) sobre estructura Cursor (corta, el héroe es la
 * interfaz). Tipografía del sistema a propósito: nada de fuentes externas — el sitio no
 * hace un solo pedido a un tercero.
 */

:root {
  --bg: #0b0f12;
  --bg-alt: #0e1418;
  --surface: #10171c;
  --surface-2: #141d23;
  --line: #22303a;
  --line-soft: #1a252c;
  --text: #e6edf3;
  --muted: #93a3ad;
  --brand: #1aa088;
  --brand-bright: #24b39b;
  --brand-dim: rgba(26, 160, 136, 0.14);
  --warn: #d9a441;

  --wrap: 1120px;
  --gap: 24px;
  --radius: 14px;

  /* Dos familias, servidas por nosotros (assets/fonts/). La del sistema quedaba "de
     oficina": Segoe UI es lo que ve el usuario en el Explorador de Windows todo el día.
     Archivo es de familia editorial y le da peso de autoridad al titular (la eligió el PO el
     2026-08-31, sobre Space Grotesk, que se leía como software y no como televisión); Inter es la más legible que
     hay en tamaños chicos. La pila de reserva es por si la fuente no llega. */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-titulo: "Archivo", "Inter", "Segoe UI", system-ui, sans-serif;

  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  /* El encabezado es fijo: sin esto, un ancla deja el título tapado. */
  scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--brand-bright);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  padding: 12px 18px;
  z-index: 100;
}

.skip:focus {
  left: 12px;
  top: 12px;
}

/* ── Tipografía ─────────────────────────────────────────────────────────── */

h1,
h2,
h3 {
  font-family: var(--font-titulo);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.15rem, 1.2rem + 3.5vw, 4.05rem);
  font-weight: 700;
  /* Un ancho de renglón corto es lo que hace que un titular largo se lea de un saque. */
  max-width: 22ch;
}

h2 {
  font-size: clamp(1.65rem, 1.1rem + 1.9vw, 2.6rem);
  font-weight: 600;
}

h3 {
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

.lead {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 62ch;
  margin-top: 16px;
}

.fineprint {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 20px;
}

/* ── Botones ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 16px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn-lg {
  padding: 13px 26px;
  font-size: 1rem;
}

.btn-primary {
  background: var(--brand);
  color: #04120e;
}

.btn-primary:hover {
  background: var(--brand-bright);
}

.btn-ghost {
  border-color: var(--line);
  color: var(--text);
  background: transparent;
}

.btn-ghost:hover {
  border-color: var(--brand);
  color: var(--brand-bright);
}

/* ── Encabezado ─────────────────────────────────────────────────────────── */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 15, 18, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.head-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 68px;
}

.brand {
  font-family: var(--font-titulo);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
}

.brand:hover {
  text-decoration: none;
}

.brand-word b { color: var(--brand-bright); font-weight: inherit; }

.head-nav {
  display: flex;
  /* Se apretó el 2026-09-01, al entrar "Opiniones": con gap 24 el menú ya no entraba a
     1440 px y los ítems de dos palabras se partían en dos renglones. */
  gap: 18px;
  /* El margen izquierdo separa el menú de la marca: al apretar el gap quedaron pegados
     "Viper" y el primer ítem, y se leía como una sola palabra. */
  margin-left: 26px;
  margin-right: auto;
  font-size: 0.92rem;
}

/* 🔴 Que un ítem NUNCA se parta: "Qué resuelve" en dos renglones desalinea todo el
   encabezado y se lee como un error de maquetación. Si en algún momento no entra, se
   saca un ítem del menú — no se lo deja partir. */
.head-nav a {
  white-space: nowrap;
}

.head-nav a {
  color: var(--muted);
}

.head-nav a:hover {
  color: var(--text);
  text-decoration: none;
}

.head-side {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* (El selector de idioma se rehízo como desplegable: sus reglas están al final.) */

.lang {
  color: var(--muted);
}

.lang.is-current {
  color: var(--text);
  font-weight: 600;
}

.lang-sep {
  opacity: 0.4;
}

/* Dos etiquetas por idioma; se muestra la que entra. Ver `langSwitch` en layout.mjs. */
.lang-short {
  display: none;
}

/* ── Héroe ──────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  /* Mucho más aire arriba que antes: es lo que más separa a la referencia de una página
     apretada. */
  /* 🔴 Apretado el 2026-09-01: con el padding anterior la captura del producto quedaba
     CORTADA POR LA MITAD al abrir la página, que es lo primero que ve una visita. Todo lo
     de arriba se achicó para que entre el titular Y la captura completa en una pantalla de
     1080. Si alguien agranda el titular o el aire de arriba, mirar el corte otra vez. */
  /* 🔴 El relleno de ABAJO es mayor que el de arriba a propósito (2026-09-01): el héroe
     mide una pantalla y centra su contenido, y centrado a ojo queda BAJO — el PO marcó que
     sobraba aire arriba. Un centro óptico se consigue empujando el bloque un poco hacia
     arriba, que es lo que hace esta asimetría. No emparejarlos. */
  padding: clamp(16px, 2vw, 32px) 0 clamp(64px, 8vw, 128px);
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(26, 160, 136, 0.10), transparent 62%),
    linear-gradient(180deg, #10171b, var(--bg));
  /* 🔴 NADA de overflow:hidden acá. Las tres fotos del fondo y el velo son
     `position:absolute; inset:0`, asi que ya quedan dentro de la caja y no lo
     necesitan — pero recortaba el `margin-bottom:-90px` de `.hero .shot`, que es
     justo el gesto de que la captura MUERDA la seccion de abajo. Sintoma: la
     captura del producto aparecia cortada por el borde inferior. */
}

/*
 * El fondo del héroe: TRES fotos que se funden una en otra, y encima los velos.
 *
 * El orden importa. Las fotos van en capas apiladas (.hero-slide) y el velo va ARRIBA de
 * todas (.hero-veil): así el oscurecido y el tinte de marca no cambian cuando cambia la
 * foto, y el titular se lee igual con las tres.
 *
 * Sin JavaScript queda la primera fija — el efecto es un lujo, que se vea es obligatorio.
 */
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
}

.hero-slide:first-child {
  opacity: 1;
}

.js .hero-slide {
  opacity: 0;
  /* 0,4 s, pedido por el PO el 2026-09-01 (el ritmo va en site.js: 15 s por foto). */
  transition: opacity 0.4s ease-in-out;
}

.js .hero-slide.is-on {
  opacity: 1;
}

.hero-slide:nth-child(1) { background-image: url("/assets/img/hero-1-1600.jpg"); }
.hero-slide:nth-child(2) { background-image: url("/assets/img/hero-2-1600.jpg"); }
.hero-slide:nth-child(3) { background-image: url("/assets/img/hero-3-1600.jpg"); }

@media (max-width: 900px) {
  .hero-slide:nth-child(1) { background-image: url("/assets/img/hero-1-900.jpg"); }
  .hero-slide:nth-child(2) { background-image: url("/assets/img/hero-2-900.jpg"); }
  .hero-slide:nth-child(3) { background-image: url("/assets/img/hero-3-900.jpg"); }
}

/* El velo: sin esto la foto grita y el titular no se lee. */
/* 🔴 Velo MUY pesado, a propósito (2026-09-01). El héroe ya NO es una foto con texto
   encima: la protagonista es la captura del producto, y la foto quedó de textura. Con el
   velo anterior —pensado para cuando la foto mandaba— volvían a competir y era justo lo
   que el PO marcó como "horrible" comparando con BirdDog. Si algún día se sube el brillo
   acá, mirar antes cómo queda contra la captura. */
.hero-veil {
  position: absolute;
  inset: 0;
  background:
    /* 🔴 Aflojado el 2026-09-01: con 0.82/0.9 la foto NO SE VEÍA y el PO lo marcó. El
       equilibrio es delicado —tiene que dejar ver la foto sin competir con la captura del
       producto, que va justo encima—, así que si se vuelve a tocar, mirar las dos cosas
       juntas. Más oscuro arriba (donde va el titular) y más claro abajo y a los costados. */
    linear-gradient(180deg, rgba(11, 15, 18, 0.74) 0%, rgba(11, 15, 18, 0.6) 46%, rgba(11, 15, 18, 0.86) 100%),
    linear-gradient(90deg, rgba(11, 15, 18, 0.42) 0%, rgba(11, 15, 18, 0.14) 50%, rgba(11, 15, 18, 0.42) 100%),
    linear-gradient(120deg, rgba(26, 160, 136, 0.16), transparent 62%);
}

@media (max-width: 900px) {
  .hero-veil {
    background:
      linear-gradient(180deg, rgba(11, 15, 18, 0.84) 0%, rgba(11, 15, 18, 0.92) 55%, var(--bg) 100%),
      linear-gradient(120deg, rgba(26, 160, 136, 0.24), transparent 62%);
  }
}

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  /* Centrado y con aire, como la referencia. El titular deja de estar pegado al margen
     izquierdo con medio héroe vacío al lado. */
  text-align: center;
}

.hero-inner h1,
.hero-inner .hero-sub {
  /* `h1` trae max-width: 22ch y margin 0; centrar exige devolverle el margen automático. */
  margin-left: auto;
  margin-right: auto;
}

.hero-inner h1 {
  max-width: 20ch;
  /* Se agrandó el 2026-09-01: al mudar la galería a su propia sección, el héroe dejó de
     tener que hacerle lugar a una captura y quedó espacio de sobra. Sigue entrando en una
     pantalla porque el héroe mide 100svh — si esto crece más, verificar el pliegue. */
  font-size: clamp(2.2rem, 1.1rem + 3.6vw, 4.4rem);
}

.hero-inner .hero-sub {
  margin-top: 16px;
}

/* (La galería del producto se mudó fuera del héroe: sus reglas están al final.) */

.hero-sub {
  color: var(--muted);
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  max-width: 58ch;
  margin-top: 22px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
  /* El héroe es centrado: un flex sin esto deja los botones pegados a la izquierda
     mientras el resto va al medio, y se nota mucho. */
  justify-content: center;
}

/* ── La captura ─────────────────────────────────────────────────────────── */

.shot {
  margin: clamp(40px, 5vw, 72px) 0 0;
}

.shot-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

.shot figcaption {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 14px;
}

.shot-placeholder {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(217, 164, 65, 0.05) 0 12px,
      transparent 12px 24px
    ),
    var(--surface-2);
}

/* Hueco de contenido sin resolver: sólo existe en el build de BORRADOR. */
.tbd {
  display: inline-block;
  border: 1px dashed var(--warn);
  color: var(--warn);
  background: rgba(217, 164, 65, 0.08);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

/* ── Bandas ─────────────────────────────────────────────────────────────── */

.band {
  padding: clamp(72px, 8vw, 128px) 0;
  border-top: 1px solid var(--line-soft);
}

.band-alt {
  background: var(--bg-alt);
}

/* ── Qué resuelve ───────────────────────────────────────────────────────── */

.value-list {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  /* 230px entra cuatro veces en el ancho del contenedor: los cuatro beneficios quedan
     en una sola fila y no 3 + 1 huérfano. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.value-list li {
  border-left: 2px solid var(--brand);
  padding: 4px 0 4px 20px;
}

.value-benefit {
  font-family: var(--font-titulo);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.value-feature {
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 8px;
}

/* ── Características ────────────────────────────────────────────────────── */

.feature-grid {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.feature-grid li {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px;
}

.feature-grid p {
  color: var(--muted);
  font-size: 0.94rem;
  margin-top: 10px;
}

/* ── Cómo funciona ──────────────────────────────────────────────────────── */

.steps {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  counter-reset: step;
}

.steps li {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.step-n {
  font-family: var(--font-titulo);
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-dim);
  color: var(--brand-bright);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.steps p {
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 10px;
}

/* ── Mantenimiento ──────────────────────────────────────────────────────── */

.maintenance-inner {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
}

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ticks li {
  position: relative;
  padding-left: 30px;
  color: var(--muted);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}

/* ── Requisitos ─────────────────────────────────────────────────────────── */

.table-scroll {
  margin-top: 40px;
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.reqs {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 520px;
}

.reqs th,
.reqs td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.reqs thead th {
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.reqs tbody th {
  color: var(--muted);
  font-weight: 500;
  width: 30%;
}

.reqs tbody tr:last-child th,
.reqs tbody tr:last-child td {
  border-bottom: 0;
}

.notes {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 76ch;
}

.notes li {
  padding-left: 18px;
  position: relative;
}

.notes li::before {
  content: "—";
  position: absolute;
  left: 0;
  opacity: 0.6;
}

/* ── Contacto ───────────────────────────────────────────────────────────── */

.contact-inner {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: start;
}

.contact-form {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 26px;
}

.contact-form label {
  display: grid;
  gap: 7px;
  font-size: 0.88rem;
  color: var(--muted);
}

.contact-form .full,
.contact-form .form-foot {
  grid-column: 1 / -1;
}

.contact-form input,
.contact-form textarea {
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px 13px;
  width: 100%;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--brand);
  outline: none;
}

.form-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.form-status {
  font-size: 0.9rem;
  color: var(--muted);
}

.form-status.is-ok {
  color: var(--brand-bright);
}

.form-status.is-err {
  color: #f0806f;
}

/* Trampa de robots: fuera de la vista y fuera del foco, pero NO `display:none`
   (algunos robots ignoran los campos ocultos de esa forma). */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Pie ────────────────────────────────────────────────────────────────── */

.site-foot {
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
  padding: 48px 0 56px;
}

.foot-inner {
  display: grid;
  gap: 18px;
}

.foot-about {
  color: var(--muted);
  max-width: 60ch;
  font-size: 0.95rem;
}

.foot-links {
  display: flex;
  gap: 22px;
  font-size: 0.95rem;
}

.foot-legal {
  color: var(--muted);
  font-size: 0.85rem;
  opacity: 0.75;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .maintenance-inner,
  .contact-inner {
    grid-template-columns: 1fr;
  }

  .head-nav,
  .head-clients {
    display: none;
  }

  .head-inner {
    gap: 14px;
  }

  .lang-switch {
    margin-right: auto;
  }

  /* En el encabezado angosto, "Castellano / English" se le encima a la marca: van las
     etiquetas cortas. En el pie, donde sobra lugar, siguen las largas. */
  .site-head .lang-long {
    display: none;
  }

  .site-head .lang-short {
    display: inline;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }

  .site-head .btn {
    padding: 8px 13px;
    font-size: 0.88rem;
  }

  .brand span {
    font-size: 1rem;
  }

  .contact-form {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .hero-actions .btn {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Vida: foto, contraste y movimiento
   ─────────────────────────────────────────────────────────────────────────
   Pedido del PO (2026-08-30): "algo mas vivo, mas atractivo, mas como la web
   de BirdDog". Lo que se toma de ahi es el RITMO: bandas con foto alternadas
   con bandas sobrias, mucho contraste, y el producto siempre adelante.
   Lo que NO se toma es su estrategia de imagen: ellos fotografian un equipo,
   nosotros no tenemos objeto. La foto es contexto; el heroe es la interfaz.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── El renglon de arriba del titular, con la luz de tally ─────────────────── */

.eyebrow {
  font-family: var(--font-titulo);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-bright);
  background: rgba(26, 160, 136, 0.1);
  border: 1px solid rgba(26, 160, 136, 0.3);
  border-radius: 999px;
  padding: 7px 16px 7px 13px;
  margin-bottom: 26px;
}

/* La luz de tally: es el vocabulario del rubro dicho sin una palabra. */
.tally {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand-bright);
  box-shadow: 0 0 0 3px rgba(36, 179, 155, 0.22);
}

.js .tally {
  animation: tally 2.6s ease-in-out infinite;
}

@keyframes tally {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(36, 179, 155, 0.22); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 6px rgba(36, 179, 155, 0.05); }
}

/* ── La captura, montada sobre la banda siguiente ──────────────────────────── */

/* Que la figura del producto MUERDA la seccion de abajo es el gesto que mas
   levanta una home: rompe la fila de bandas apiladas. */
.hero {
  padding-bottom: 0;
}

.hero .shot {
  margin-bottom: -90px;
  position: relative;
  z-index: 2;
}

.shot-frame {
  border-color: rgba(120, 160, 175, 0.22);
  box-shadow:
    0 50px 110px -35px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 0 90px -30px rgba(26, 160, 136, 0.35);
}

/* El +90px de relleno superior que había acá compensaba el mordisco de la captura del
   héroe. Se quitó el 2026-09-02: la galería vive en su propia sección desde el 2026-09-01 y
   ya no muerde nada, así que ese aire de más quedó huérfano. */
#resuelve {
  border-top: 0;
}

/* ── Bandas con foto de fondo ──────────────────────────────────────────────── */

.band-photo {
  position: relative;
  background-color: #070b0d;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-top: 1px solid var(--line-soft);
}

.band-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  /* El velo es lo que hace que la foto sea fondo y no protagonista. */
  background:
    linear-gradient(180deg, rgba(7, 11, 13, 0.82), rgba(7, 11, 13, 0.62)),
    linear-gradient(90deg, rgba(7, 11, 13, 0.72), transparent 70%),
    linear-gradient(120deg, rgba(26, 160, 136, 0.2), transparent 60%);
}

.band-photo > .wrap {
  position: relative;
}

.band-photo-fiber {
  background-image: url("/assets/img/fiber-1600.jpg");
}

@media (max-width: 900px) {
  .band-photo-fiber {
    background-image: url("/assets/img/fiber-900.jpg");
  }
}

/* El cierre. La foto es la mas luminosa de todas y por eso aguanta el velo sin volverse
   una mancha; el formulario sigue siendo el protagonista, la foto solo evita que la
   ultima seccion de la pagina sea un rectangulo liso. */
/* 🔴 `cables` quedó FUERA DE USO el 2026-08-31: era otra fibra óptica del mismo
   fotógrafo que la de "Cómo funciona", y las dos bandas se leían como la misma foto.
   El archivo queda por si sirve en otra sección; no lo referencia nadie. */

/* "Características": sala de control real — mezclador de video y el multiviewer con
   las cámaras. Es la foto más inequívocamente televisiva de todas. */
.band-photo-control {
  /* Arriba está el multiviewer con las cámaras, que es la parte luminosa y la que se
     reconoce; abajo el mezclador es casi negro. Se encuadra arriba a propósito. */
  background-image: url("/assets/img/control-1600.jpg");
  background-position: center 62%;
}

/* 🔴 Velo MÁS CLARO para estas dos bandas. El velo general es rgba(7,11,13,.82) y está
   calculado para fotos con una zona brillante; sobre estas dos dejaba la banda negra y
   parecía que no tenían fondo. Acá el texto vive dentro de tarjetas con fondo propio,
   así que aguanta un velo más liviano sin perder legibilidad. */
.band-photo-control::before,
.band-photo-equipo::before {
  background:
    linear-gradient(180deg, rgba(7, 11, 13, 0.74), rgba(7, 11, 13, 0.54)),
    linear-gradient(90deg, rgba(7, 11, 13, 0.66), transparent 72%),
    linear-gradient(120deg, rgba(26, 160, 136, 0.18), transparent 60%);
}

/* El cierre: gente trabajando en control, con auriculares. Cierra con personas y no
   con equipos, que para "Pedir una demo" es lo que corresponde. */
.band-photo-equipo {
  background-image: url("/assets/img/equipo-1600.jpg");
  background-position: center 40%;
}

@media (max-width: 900px) {
  .band-photo-control {
    background-image: url("/assets/img/control-900.jpg");
  }
  .band-photo-equipo {
    background-image: url("/assets/img/equipo-900.jpg");
  }
}

/* ── La foto en tarjeta (mantenimiento) ────────────────────────────────────── */

.photo-card {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 34px 70px -40px rgba(0, 0, 0, 0.9);
  position: relative;
}

.photo-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* Bajada de saturacion y brillo: la foto acompania, no compite con el texto. */
  filter: saturate(0.75) brightness(0.78) contrast(1.05);
}

.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(26, 160, 136, 0.16), transparent 55%);
}

.maintenance-inner {
  align-items: center;
}

/* ── Tarjetas con vida ─────────────────────────────────────────────────────── */

.feature-grid li {
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

/* Una linea de color que aparece arriba de la tarjeta: es el detalle que separa
   una grilla viva de una tabla. */
.feature-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}

.feature-grid li:hover {
  transform: translateY(-3px);
  border-color: rgba(26, 160, 136, 0.4);
  background: var(--surface-2);
}

.feature-grid li:hover::before {
  transform: scaleX(1);
}

.feature-grid h3 {
  color: var(--text);
}

.value-list li {
  transition: border-color 0.18s ease;
}

.value-list li:hover {
  border-left-color: var(--brand-bright);
}

/* Los numeros de los pasos, grandes: dan escala y ritmo. */
.steps li {
  border-top-color: rgba(26, 160, 136, 0.45);
}

.step-n {
  width: 38px;
  height: 38px;
  font-size: 1rem;
  background: rgba(26, 160, 136, 0.16);
  border: 1px solid rgba(26, 160, 136, 0.38);
}

/* ── Aparicion al entrar en pantalla ───────────────────────────────────────── */

/* Sin JavaScript no hay clase `js` y NADA de esto aplica: la pagina se ve
   entera igual. Es la unica forma honesta de animar contenido. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .tally {
    animation: none;
  }

  /* 🔴 El héroe NO se apaga acá, a propósito. `prefers-reduced-motion` existe por el
     movimiento espacial —desplazamientos, zooms, parallax—, que es lo que dispara vértigo.
     El carrusel no mueve nada de lugar: son fotos quietas fundiéndose por opacidad, que es
     la acomodación aceptada y no lo que la preferencia quiere frenar. La aparición al hacer
     scroll (`.reveal`) sí se apaga arriba, porque ésa sí desplaza. */
}

/* ── Ajustes finos de contraste ────────────────────────────────────────────── */

.hero h1 {
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}

.btn-primary {
  box-shadow: 0 10px 30px -12px rgba(26, 160, 136, 0.8);
}

.site-foot {
  background: linear-gradient(180deg, var(--bg), #070b0d);
}

@media (max-width: 900px) {
  .hero .shot {
    margin-bottom: -50px;
  }

  #resuelve {
    padding-top: calc(clamp(56px, 6vw, 96px) + 50px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   "Que resuelve" y "Que trae": las dos secciones que quedaban planas
   ─────────────────────────────────────────────────────────────────────────
   El problema no era el color, era que las dos eran la misma cosa —una grilla
   de cajas iguales— una abajo de la otra. Ahora cada una tiene su forma:
   la primera son tarjetas numeradas con el beneficio grande; la segunda es una
   grilla mas apretada, tipo catalogo, con un renglon de color al pasar.
   ═══════════════════════════════════════════════════════════════════════════ */

.value-list {
  gap: 18px;
}

.value-list li {
  position: relative;
  border-left: 0;
  padding: 26px 22px 24px;
  background: linear-gradient(180deg, var(--surface) 0%, rgba(16, 23, 28, 0.55) 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

/* La barra de color a la izquierda: es lo que ata la tarjeta a la marca sin pintarla toda. */
.value-list li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--brand-bright), rgba(26, 160, 136, 0.15));
}

.value-list li:hover {
  transform: translateY(-3px);
  border-color: rgba(26, 160, 136, 0.35);
}

/* El numero grande, apenas visible: da ritmo y jerarquia sin agregar una palabra. */
.value-n {
  position: absolute;
  right: 14px;
  top: 8px;
  font-family: var(--font-titulo);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(230, 237, 243, 0.05);
  letter-spacing: -0.04em;
  pointer-events: none;
}

.value-benefit {
  position: relative;
  line-height: 1.3;
}

.value-feature {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

/* ── "Que trae": catalogo, mas apretado y con mas piezas por fila ─────────── */

/* 🔴 Acá había un `background` con un tinte radial. Se quitó el 2026-08-31, cuando la
   sección pasó a tener foto: era un selector de **ID** (más peso que `.band-photo-control`)
   y encima usaba el atajo `background`, así que reseteaba `background-image` a ese gradiente
   y la foto no aparecía nunca. Síntoma: la banda se veía negra y parecía no tener fondo,
   aunque el archivo cargara bien. Si alguna vez vuelve un tinte acá, que sea sobre el velo
   (`::before`) y NO con el atajo `background` sobre la sección. */

.feature-grid {
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

.feature-grid li {
  padding: 20px 18px;
  background: rgba(16, 23, 28, 0.72);
}

.feature-grid h3 {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Un cuadradito de color adelante del nombre: el detalle mas barato que separa
   una grilla de un listado. */
.feature-grid h3::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand);
  flex: none;
  transition: box-shadow 0.2s ease;
}

.feature-grid li:hover h3::before {
  box-shadow: 0 0 0 4px rgba(26, 160, 136, 0.18);
}

@media (max-width: 560px) {
  .value-n {
    font-size: 2.6rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Segunda vuelta: "las dos secciones siguen sosas"
   ─────────────────────────────────────────────────────────────────────────
   Diagnostico del PO, y era correcto: las dos eran texto sobre fondo plano.
   Dos remedios distintos, uno por seccion, para que no vuelvan a parecerse:
     · "Que resuelve" recibe FOTO de fondo y las tarjetas se vuelven de vidrio
       (se ve la foto a traves), que es el gesto que mas levanta una seccion.
     · "Caracteristicas" recibe ICONOS. En una grilla de ocho cajas de texto,
       un icono por caja cambia mas que cualquier color.
   ═══════════════════════════════════════════════════════════════════════════ */

.band-photo-luz {
  background-image: url("/assets/img/luz-1600.jpg");
  background-position: center 30%;
}

@media (max-width: 900px) {
  .band-photo-luz {
    background-image: url("/assets/img/luz-900.jpg");
  }
}

/* La foto de esta banda es CALIDA, entre dos frias. Ese contraste es a proposito:
   una pagina donde todas las bandas son del mismo color se lee como una sola. */
.band-photo-luz::before {
  background:
    linear-gradient(90deg, rgba(7, 11, 13, 0.92) 0%, rgba(7, 11, 13, 0.66) 55%, rgba(7, 11, 13, 0.4) 100%),
    linear-gradient(180deg, rgba(7, 11, 13, 0.5) 0%, rgba(7, 11, 13, 0.55) 45%, rgba(7, 11, 13, 0.86) 100%),
    linear-gradient(75deg, rgba(26, 160, 136, 0.22), transparent 55%);
}

/* Tarjetas de vidrio: dejan pasar la foto y se despegan del fondo. */
#resuelve .value-list li {
  background: rgba(13, 20, 24, 0.62);
  backdrop-filter: blur(9px);
  border-color: rgba(160, 190, 200, 0.14);
}

#resuelve .value-list li:hover {
  background: rgba(16, 25, 30, 0.82);
  border-color: rgba(26, 160, 136, 0.45);
}

#resuelve .value-n {
  color: rgba(230, 237, 243, 0.09);
}

/* ── Los iconos de las caracteristicas ─────────────────────────────────────── */

.feature-grid h3 {
  gap: 11px;
}

/* Reemplaza al cuadradito de color de la vuelta anterior. */
.feature-grid h3::before {
  content: none;
}

.feat-ico {
  flex: none;
  color: var(--brand-bright);
  padding: 7px;
  width: 36px;
  height: 36px;
  box-sizing: content-box;
  border-radius: 10px;
  background: rgba(26, 160, 136, 0.12);
  border: 1px solid rgba(26, 160, 136, 0.28);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.feature-grid li:hover .feat-ico {
  background: rgba(26, 160, 136, 0.22);
  border-color: rgba(36, 179, 155, 0.55);
  transform: translateY(-1px);
}

.feature-grid li {
  padding: 22px 20px;
}

.feature-grid h3 span {
  min-width: 0;
}

.feature-grid p {
  margin-top: 12px;
}

@media (max-width: 560px) {
  .feat-ico {
    width: 30px;
    height: 30px;
    padding: 6px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Cuarta vuelta: "requisitos y pedi una demo quedaron apagados"
   ─────────────────────────────────────────────────────────────────────────
   Y la observacion de fondo del PO, que es la buena: hay que partir de fotos
   MAS LUMINOSAS, porque al oscurecerlas para que se lea el texto, una foto que
   ya era oscura se convierte en una mancha. Las dos que entran aca son las mas
   claras de la carpeta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Requisitos: el encabezado se parte en dos y entra una foto ────────────── */

.req-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.req-head .lead {
  margin-top: 18px;
}

/* La tabla no se toca: es la seccion donde el jefe tecnico viene a LEER, y una
   foto detras de una tabla de numeros es exactamente lo que no hay que hacer. */
#requisitos .table-scroll {
  margin-top: 44px;
}

/* ── Pedir una demo: sin foto, a proposito ─────────────────────────────────
   Tuvo una foto de fibra detras y la saco el PO: *"no esta oscurecida y no tiene nada
   que ver con la seccion"*. Las dos cosas eran ciertas. Una foto de cables no dice nada
   sobre pedir una demo, y meter imagen donde no aporta es el error opuesto al de tener
   la pagina apagada. El cierre va sobrio: el formulario ES el protagonista. */

@media (max-width: 900px) {
  .req-head {
    grid-template-columns: 1fr;
  }
}

/* ── El carrusel de capturas del héroe ─────────────────────────────────────────
 *
 * La pila (.shot-stack) reserva su alto con `aspect-ratio` para que la página no
 * salte al cambiar de lámina ni mientras carga la segunda. Los puntos y el epígrafe
 * van DEBAJO, en flujo normal: antes el epígrafe vivía dentro de una figura absoluta
 * y los puntos le caían encima al texto. */
.shot-carrusel {
  margin-bottom: -90px;
}

.shot-stack {
  position: relative;
  aspect-ratio: 16 / 9;
}

.shot-carrusel .shot-item {
  margin: 0;
}

/* 🔴 NADA de crossfade acá. Dos capturas densas superpuestas medio segundo se leen como
   un error de la página (lo marcó el PO el 2026-09-01). La que sale baja a cero en 0,22 s
   y la que entra arranca RECIÉN a los 0,22 s: el cruce pasa por el fondo del marco y nunca
   hay dos visibles a la vez. Si algún día esto vuelve a un fundido simultáneo, mirar el
   cambio de lámina cuadro a cuadro antes de darlo por bueno. */
.js .shot-carrusel .shot-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.js .shot-carrusel .shot-item.is-on {
  opacity: 1;
  transition: opacity 0.22s ease 0.22s;
  pointer-events: auto;
}

.shot-carrusel .shot-item:not(:first-child) {
  display: none;
}

.js .shot-carrusel .shot-item:not(:first-child) {
  display: block;
}

.shot-carrusel .shot-frame,
.shot-carrusel .shot-frame img {
  height: 100%;
}

.shot-carrusel .shot-frame img {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* Puntos DE VERDAD: redondos. Antes eran barritas y el PO lo marcó. */
.shot-dots {
  display: none;
}

.js .shot-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0 0;
}

.shot-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(233, 241, 239, 0.26);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.shot-dot:hover {
  background: rgba(233, 241, 239, 0.5);
}

.shot-dot.is-on {
  background: var(--brand);
  transform: scale(1.25);
}

.shot-caption {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-dim);
}

/* ── Textura de fondo, al modo de la referencia ────────────────────────────────
 *
 * BirdDog no deja las bandas lisas: tienen un dibujo de líneas muy tenue que les da
 * cuerpo sin meter una foto. Acá se hace con gradientes —cero pedidos al servidor— y
 * queda apenas por encima del negro: si se nota, está mal puesto. */
.band-textura {
  position: relative;
  background-image:
    radial-gradient(620px 320px at 12% 0%, rgba(26, 160, 136, 0.09), transparent 62%),
    radial-gradient(520px 300px at 88% 100%, rgba(70, 130, 180, 0.07), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.014) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.014) 0 2px, transparent 2px 22px);
}

/* ── Opiniones ────────────────────────────────────────────────────────────────
 * 🔴 Hoy son INVENTADAS y el PO las va a reemplazar. Ver el comentario en content/es.mjs. */
.quote-grid {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.quote-card {
  position: relative;
  padding: 30px 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.022);
}

/* La comilla grande de adorno, como en la referencia. Decorativa: va en ::before y no
   en el texto, así ningún lector de pantalla la lee. */
.quote-card::before {
  content: "\201C";
  position: absolute;
  top: 2px;
  left: 18px;
  font-family: var(--font-titulo);
  font-size: 62px;
  line-height: 1;
  color: rgba(26, 160, 136, 0.32);
}

.quote-card blockquote {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--text);
}

.quote-who {
  margin: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quote-name {
  font-family: var(--font-titulo);
  font-weight: 600;
  color: var(--brand);
  font-size: 0.94rem;
}

.quote-role {
  font-size: 0.86rem;
  color: var(--text-dim);
}

/* ── El selector de idioma: desplegable con banderas ──────────────────────────
 * Ver el comentario de langSwitch() en layout.mjs: es un <details>, así que abre y
 * cierra sin JavaScript. */
.lang-switch {
  position: relative;
  font-size: 0.85rem;
  /* 🔴 <details> es display:block: en el encabezado no se notaba porque está dentro de un
     flex, pero EN EL PIE se estiraba a todo el ancho de la página. */
  display: inline-block;
  width: fit-content;
}

.lang-switch > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

/* La flechita que trae el <details> por defecto: fuera, en los dos motores. */
.lang-switch > summary::-webkit-details-marker {
  display: none;
}

.lang-switch > summary::marker {
  content: "";
}

.lang-switch > summary:hover {
  border-color: var(--line-strong, rgba(233, 241, 239, 0.28));
}

.lang-flecha {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.6;
  transition: transform 0.18s ease;
}

.lang-switch[open] .lang-flecha {
  transform: rotate(180deg);
}

.bandera {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  flex: 0 0 auto;
  /* Un borde tenue: la franja blanca de la bandera argentina se funde con el fondo claro
     de un hover y la bandera parece cortada. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 100%;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface, #10171b);
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.9);
  z-index: 20;
}

.lang-op {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--muted);
  white-space: nowrap;
}

.lang-op:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
 * VARIEDAD ENTRE SECCIONES  (2026-09-01)
 *
 * El PO: *"¿todo igual? ¿no se te ocurre nada mejor que poner o sacar fondo por
 * sección?"*. Tenía razón: todas las bandas eran el mismo rectángulo oscuro con
 * título, bajada y una grilla de tarjetas, y lo único que las diferenciaba era si
 * tenían foto o no. Poner y sacar fondos era mover la misma pieza.
 *
 * Lo que las diferencia ahora NO es el fondo, es la FORMA de cada sección:
 *   · un filete de marca arriba de cada título, que le da comienzo a la sección;
 *   · "Qué resuelve" con numerales enormes, que pasan de marca de agua a estructura;
 *   · "Cómo funciona" como una línea de tiempo de verdad, con los pasos enhebrados;
 *   · dos secciones centradas —Características y Opiniones— entre las demás alineadas
 *     a la izquierda, que es lo que le da respiración a la página al scrollear.
 * ══════════════════════════════════════════════════════════════════════════════ */

/* El filete: un cabo corto de color arriba del título de cada banda. */
.band > .wrap > h2:first-child::before,
.band > .wrap > .reveal:first-child > h2::before {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 3px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, var(--brand-bright), rgba(26, 160, 136, 0.15));
}

/* ── "Qué resuelve": el numeral manda ──────────────────────────────────────── */
#resuelve .value-n {
  position: static;
  display: block;
  font-size: 2.5rem;
  color: rgba(26, 160, 136, 0.55);
  margin-bottom: 10px;
}

#resuelve .value-list li {
  padding-top: 22px;
}

/* Con el numeral adelante, el filete lateral sobra: eran dos marcas para lo mismo. */
#resuelve .value-list li::after {
  display: none;
}

/* ── "Cómo funciona": línea de tiempo ──────────────────────────────────────── */

/* El hilo que enhebra los tres pasos. Va DETRÁS de los numerales y sólo cuando los
   pasos están en una fila: apilados en un teléfono, una línea horizontal no significa
   nada y se apaga. */



/* ── Dos secciones centradas, entre las alineadas a la izquierda ───────────── */
#caracteristicas > .wrap > h2,
#caracteristicas > .wrap > .lead,
#opiniones > .wrap > h2,
#opiniones > .wrap > .lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#caracteristicas > .wrap > .lead,
#opiniones > .wrap > .lead {
  max-width: 54ch;
}

#caracteristicas > .wrap > h2::before,
#opiniones > .wrap > h2::before {
  margin-left: auto;
  margin-right: auto;
}

/* ── La galería del producto, en su propia sección ─────────────────────────────
 *
 * 🔴 Estuvo dentro del héroe y el PO lo marcó DOS VECES: la captura salía cortada
 * por la mitad al abrir la página. Achicar el héroe no alcanzaba —son nueve capturas
 * con contenido distinto y el pliegue caía en cualquier lado de cada una—, así que
 * la galería se mudó acá abajo, donde entra entera siempre.
 *
 * La sección se pega al héroe (sin borde arriba y sin aire) para que se lean como una
 * sola cosa: el titular y, justo debajo, el producto. */
.band-pantallas {
  border-top: 0;
  padding-top: 0;
  padding-bottom: clamp(72px, 8vw, 128px);
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(26, 160, 136, 0.08), transparent 62%),
    var(--bg);
}

/* Ya no muerde la sección de abajo: eso era propio de cuando vivía en el héroe. */
.band-pantallas .shot-carrusel {
  margin-bottom: 0;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Que las dos secciones de dos columnas NO sean la misma plantilla ──────────
 *
 * 🔴 El PO: *"hay 2 con foto, luego 3 secciones sin foto, es como muy de principiante"*.
 * Parte del problema era ése: "El producto se mueve" y "Requisitos" venían casi seguidas
 * y las dos eran texto a la izquierda / foto a la derecha, o sea la misma plantilla dos
 * veces. Ahora Requisitos va **al revés** —foto a la izquierda, texto a la derecha— y la
 * página deja de repetirse.
 *
 * Se hace con `order`, no cambiando el HTML: el orden de lectura queda igual (título
 * primero, foto después), que es lo que importa para un lector de pantalla y para el
 * teléfono, donde las dos se apilan igual. */
@media (min-width: 860px) {
  .req-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  }

  .req-head > .reveal:first-child {
    order: 2;
  }

  .req-head > .photo-card {
    order: 1;
  }
}

/* Y para que las fotos de las dos tarjetas no se lean como la misma pieza, cada una
   apoya en un lado distinto. */
.maintenance .photo-card {
  transform: rotate(0.4deg);
}

.req-head .photo-card {
  transform: rotate(-0.4deg);
}

/* ── "Cómo funciona" deja de ser la sección sin nada ──────────────────────────
 * Los tres pasos son cortos y quedaban flotando en una banda enorme y vacía. Un marco
 * con la textura de la casa los contiene y le da peso a la sección sin agregar una foto
 * de banco ni una palabra de texto. */

/* El hilo arranca dentro del marco, no en el borde de la página. */

/* El numeral tapa el hilo: el halo tiene que ser del color del MARCO, no del fondo de
   la banda, o se ve un aro más claro alrededor de cada número. */

/* ── El héroe ocupa la pantalla ────────────────────────────────────────────────
 *
 * 🔴 EL PROBLEMA, marcado por el PO TRES veces: al entrar a la página se veía el
 * texto y **la mitad de arriba de una captura**, cortada por el borde inferior de la
 * pantalla. Se intentó achicar el héroe y se intentó mudar la galería a su propia
 * sección: las dos veces siguió apareciendo media captura, porque el pliegue caía
 * igual encima de ella.
 *
 * La solución es al revés: el héroe mide **una pantalla exacta**, así el pliegue cae
 * justo donde el héroe termina y la galería empieza LIMPIA del otro lado. Al entrar se
 * ve el titular y nada más; al bajar un paso, la captura entera. Nunca media.
 *
 * `100svh` (small viewport height) y no `100vh`: en un teléfono, `100vh` cuenta la
 * barra de direcciones que después se esconde, y el héroe queda más alto que la
 * pantalla — que es exactamente el corte que se quiere evitar. 68px es el alto del
 * encabezado, que es sticky y come esa franja. */
.hero {
  min-height: calc(100svh - 68px);
  display: flex;
  align-items: center;
}

.hero > .hero-inner {
  width: 100%;
}

/* En una pantalla muy baja (un portátil chico, o el navegador con muchas barras) forzar
   una pantalla entera apretaría el titular contra los bordes. Ahí se deja crecer. */
@media (max-height: 660px) {
  .hero {
    min-height: 0;
  }
}

/* ── Fondo con foto en "Cómo funciona" y en "Opiniones" ───────────────────────
 *
 * Pedido del PO (2026-09-01): estas dos secciones con **un fondo lindo y visible, una
 * foto que tenga que ver con lo que dice**.
 *
 *   · "Cómo funciona" (se instala · se activa · SALE AL AIRE) → la sala de control con
 *     el mezclador y el multiviewer. Es literalmente el final de los tres pasos.
 *   · "Lo que dicen los canales" → gente trabajando en control, con auriculares. Son
 *     opiniones de personas: el fondo tiene que tener personas.
 *
 * 🔴 Velo LIVIANO a propósito: el general (0.82) las dejaba negras y el PO pidió que se
 * VEAN. El texto de las dos secciones vive dentro de tarjetas o de un marco con fondo
 * propio, así que aguanta.
 *
 * 🔴 Y la trampa que ya costó una vuelta: NO poner un `background:` (el atajo) en una
 * regla de `#id` para estas secciones. Gana por especificidad y borra la foto — pasó con
 * `#caracteristicas`. Si hace falta un tinte, va en el `::before`. */
#opiniones.band-photo-opiniones {
  position: relative;
  background-color: #070b0d;
  background-repeat: no-repeat;
  background-size: cover;
}

.band-photo-opiniones {
  background-image: url("/assets/img/equipo-1600.jpg");
  background-position: center 38%;
}

@media (max-width: 900px) {
  .band-photo-opiniones {
    background-image: url("/assets/img/equipo-900.jpg");
  }
}

.band-photo-opiniones::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 11, 13, 0.72), rgba(7, 11, 13, 0.52) 45%, rgba(7, 11, 13, 0.78)),
    linear-gradient(120deg, rgba(26, 160, 136, 0.16), transparent 60%);
}

.band-photo-opiniones > .wrap {
  position: relative;
}

/* El marco de los pasos y las tarjetas de opiniones se vuelven de vidrio: se ve la foto
   a través, que es lo que hace que el fondo se note sin comerse el texto. */
.band-photo-opiniones .quote-card {
  background: rgba(9, 14, 17, 0.72);
  backdrop-filter: blur(3px);
  border-color: rgba(233, 241, 239, 0.14);
}

/* El halo del numeral tiene que seguir al fondo del marco, que ahora es traslúcido. */

/* La galería lleva título, como todas las secciones (faltaba, lo marcó el PO). Va centrado
   para que la captura quede enmarcada por el texto y no colgando de la nada. */
#pantallas {
  padding-top: clamp(56px, 6vw, 88px);
}

#pantallas > .wrap > h2,
#pantallas > .wrap > .lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#pantallas > .wrap > .lead {
  max-width: 56ch;
}

#pantallas > .wrap > h2::before {
  margin-left: auto;
  margin-right: auto;
}

#pantallas .shot-carrusel {
  margin-top: 40px;
}

/* ── "Cómo funciona": la banda partida (opción B) ──────────────────────────────
 *
 * Elegida por el PO el 2026-09-01 sobre una página de maquetas. La foto ocupa media
 * banda A SANGRE —sin margen, tocando el borde de la ventana— y los pasos van del otro
 * lado sobre fondo limpio. El texto nunca cae encima de la foto, que era el problema, y
 * de paso la sección rompe el ritmo de bandas de ancho completo.
 *
 * 📌 La opción A (los tres pasos como capturas del producto) gustó más y quedó pendiente:
 * hace falta una captura del INSTALADOR, que hoy no existe. */
.band-partida {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  align-items: stretch;
  border-top: 1px solid var(--line-soft);
}

.partida-foto {
  position: relative;
  min-height: 520px;
  background-image: url("/assets/img/control-1600.jpg");
  background-size: cover;
  background-position: center 55%;
}

/* El degradado corre HACIA el texto: la foto queda nítida en el borde de la ventana y se
   apaga contra la columna de al lado, así no hay un corte duro entre las dos mitades. */
.partida-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 11, 13, 0.28), rgba(7, 11, 13, 0.88));
}

.partida-texto {
  padding: clamp(56px, 6vw, 104px) clamp(28px, 5vw, 76px);
  background: var(--bg);
}

.partida-texto > h2 {
  max-width: 18ch;
}

/* Los pasos, apilados y separados por una línea: en media banda no entran en fila. */
.band-partida .steps {
  display: block;
  margin: 34px 0 0;
  padding: 0;
  border: 0;
  background: none;
}

/* 🔴 Los hijos del <li> son TRES sueltos —numeral, título y párrafo— sin un div que
   agrupe a los dos últimos. Sin ubicarlos a mano, la grilla manda el párrafo a la
   columna del numeral (46 px) y el texto sale con UNA PALABRA POR RENGLÓN. */
.band-partida .steps li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 8px;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid var(--line-soft);
  text-align: left;
}

.band-partida .steps li > .step-n {
  grid-column: 1;
  grid-row: 1;
}

.band-partida .steps li > h3 {
  grid-column: 2;
  grid-row: 1;
}

.band-partida .steps li > p {
  grid-column: 2;
  grid-row: 2;
}

.band-partida .steps li:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Sin hilo horizontal: acá los pasos van uno debajo del otro. */
.band-partida .steps::before {
  display: none;
}

.band-partida .step-n {
  margin: 0;
  width: 40px;
  height: 40px;
  background: rgba(26, 160, 136, 0.14);
  box-shadow: none;
}

.band-partida .steps h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.band-partida .steps p {
  margin: 0;
}

@media (max-width: 860px) {
  .band-partida {
    grid-template-columns: 1fr;
  }

  .partida-foto {
    min-height: 240px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NIVEL 2 — las paginas interiores (2026-09-02)

   Regla que se respeta acá: NO se inventa una estetica nueva para las paginas
   nuevas. Reusan las bandas, las tarjetas, la tabla y los botones de la home.
   Lo unico propio son el encabezado interior, la tarjeta-enlace de modulo, el
   acordeon de preguntas y la lista de versiones.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Encabezado de pagina interior ──────────────────────────────────────────
   NO es el heroe: no lleva foto ni mide una pantalla. El que entra acá ya sabe
   lo que busca, y hacerlo bajar una pantalla seria castigarlo por saber. */

.page-hero {
  padding: clamp(48px, 6vw, 96px) 0 clamp(36px, 4vw, 64px);
  border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(26, 160, 136, 0.1), transparent 58%),
    var(--bg-alt);
}

.page-hero h1 {
  max-width: 18ch;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem);
  margin: 14px 0 0;
}

.page-hero .hero-sub {
  margin-top: 18px;
}

/* ── Tarjetas de modulo ─────────────────────────────────────────────────────
   El <a> envuelve la tarjeta ENTERA y no un "ver mas" chiquito: en una grilla
   de tarjetas, el que quiere entrar hace clic en cualquier lado. */

.module-grid {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.module-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.module-card:hover,
.module-card:focus-visible {
  border-color: var(--brand);
  background: var(--surface-2);
  transform: translateY(-2px);
}

.module-card h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
}

.module-card p {
  color: var(--muted);
  font-size: 0.94rem;
  margin: 0;
  flex: 1;
}

.module-more {
  color: var(--brand-bright);
  font-size: 0.9rem;
  font-weight: 600;
}

.module-more::after {
  content: " →";
}

/* La animacion del hover no es obligatoria: quien pidio menos movimiento no la recibe. */
@media (prefers-reduced-motion: reduce) {
  .module-card {
    transition: none;
  }

  .module-card:hover,
  .module-card:focus-visible {
    transform: none;
  }
}

/* ── Ficha tecnica ──────────────────────────────────────────────────────────
   Es la tabla de Requisitos con dos columnas en vez de tres. */

.specs {
  min-width: 420px;
}

.specs th[scope="row"] {
  width: 32%;
  color: var(--text);
  font-weight: 600;
}

.specs td {
  color: var(--muted);
}

/* En un telefono, una tabla de DOS columnas entra sin barra de desplazamiento: se le
   saca el ancho minimo y se reparte. La de Requisitos, que tiene tres, sigue
   desplazandose — ahi no hay forma de que entre. */
@media (max-width: 600px) {
  .specs {
    min-width: 0;
  }

  .specs th[scope="row"] {
    width: 40%;
  }

  .specs th,
  .specs td {
    padding: 12px 10px;
  }
}

/* ── Preguntas frecuentes ───────────────────────────────────────────────────
   <details> del navegador, no un acordeon de JavaScript: la respuesta viaja
   dentro del HTML (la indexa el buscador, la ve quien no tiene JS) y abrir y
   cerrar lo hace el navegador solo. */

.faq {
  margin-top: 36px;
  border-top: 1px solid var(--line-soft);
}

.faq-item {
  border-bottom: 1px solid var(--line-soft);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 44px 20px 0;
  position: relative;
  font-family: var(--font-titulo);
  font-size: 1.05rem;
  color: var(--text);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* La cruz que se vuelve un menos al abrir. Dos barras y una rotacion: no hace
   falta un icono ni una fuente para esto. */
.faq-item summary::before,
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--brand-bright);
  transition: transform 0.18s ease;
}

.faq-item summary::after {
  transform: rotate(90deg);
}

.faq-item[open] summary::after {
  transform: rotate(0deg);
}

.faq-item summary:hover,
.faq-item summary:focus-visible {
  color: var(--brand-bright);
}

.faq-a {
  padding: 0 44px 22px 0;
  max-width: 76ch;
}

.faq-a p {
  color: var(--muted);
  font-size: 0.97rem;
}

.faq-a p + p {
  margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::before,
  .faq-item summary::after {
    transition: none;
  }
}

/* ── Novedades ──────────────────────────────────────────────────────────── */

.releases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
}

.release {
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
}

.release-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.release-v {
  font-family: var(--font-titulo);
  font-size: 1.1rem;
  color: var(--brand-bright);
}

.release-date {
  color: var(--muted);
  font-size: 0.9rem;
}

.release h2 {
  margin: 8px 0 0;
  font-size: 1.35rem;
}

.release .ticks {
  margin-top: 16px;
}

/* ── El pie, con las paginas nuevas ─────────────────────────────────────────
   Pasaron de dos enlaces a nueve: sin `wrap` se salen de la pantalla en un
   telefono, y el desborde no se ve en el equipo de desarrollo. */

.foot-links {
  flex-wrap: wrap;
  row-gap: 10px;
}

/* ── La tarjeta de Caracteristica que ADEMAS es un enlace ───────────────────
   Cuatro de las ocho tienen pagina propia. El <a> no envuelve la tarjeta —eso
   metia una caja adentro de otra— sino que se estira sobre ella con un
   pseudo-elemento: la tarjeta entera es clickeable y el HTML sigue siendo una
   lista con un enlace adentro, que es lo que espera un lector de pantalla.

   Las otras cuatro (Ingesta, As-Run, Multi-puesto, sin internet) todavia no
   tienen pagina y quedan como tarjeta suelta, a proposito: prometer un enlace
   que no lleva a ningun lado es peor que no tenerlo. */

.feat-conpagina {
  position: relative;
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

.feat-conpagina p {
  flex: 1;
}

.feat-link {
  margin-top: 14px;
  color: var(--brand-bright);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.feat-link::after {
  content: " →";
}

/* Lo que estira el enlace sobre toda la tarjeta. */
.feat-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.feat-conpagina:hover,
.feat-conpagina:focus-within {
  border-color: var(--brand);
  background: var(--surface-2);
}

/* ── Los graficos ───────────────────────────────────────────────────────────
   Multi-puesto y "sigue al aire sin internet" no son pantallas: no hay nada
   que capturar. Van dibujados (src/diagramas.mjs).

   Los colores salen de las variables de la marca, no del SVG: si cambia la
   paleta, cambian solos. Y el texto es texto de verdad —se selecciona, lo lee
   un lector de pantalla y lo indexa el buscador—, no un trazado. */

.diagrama {
  margin: 44px 0 0;
  padding: 30px 24px 22px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.diagrama svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.diagrama figcaption {
  margin-top: 20px;
  color: var(--muted);
  font-size: 0.94rem;
  text-align: center;
}

/* Las cajas */
.dg-caja rect {
  fill: var(--surface-2);
  stroke: var(--line);
  stroke-width: 1;
}

.dg-nube rect {
  fill: var(--brand-dim);
  stroke: var(--brand);
}

.dg-estacion rect {
  stroke: var(--brand);
  stroke-width: 1.5;
}

.dg-aire rect {
  fill: rgba(217, 76, 76, 0.12);
  stroke: #c9534f;
}

.dg-puesto-mas rect {
  stroke-dasharray: 5 5;
  fill: none;
}

/* El punto rojo de ON AIR: el mismo gesto que en la pantalla del operador. */
.dg-onair {
  fill: #e05a55;
}

/* Los textos. `text-anchor` centrado porque las cajas se dibujan por su centro;
   las variantes izq/der son para la linea de tiempo, que ancla en los extremos. */
.dg-t,
.dg-s,
.dg-r {
  text-anchor: middle;
  font-family: var(--font);
}

.dg-t {
  fill: var(--text);
  font-size: 15px;
  font-weight: 600;
}

.dg-s {
  fill: var(--muted);
  font-size: 12.5px;
}

.dg-r {
  fill: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dg-izq {
  text-anchor: start;
}

.dg-der {
  text-anchor: end;
}

/* Las lineas */
.dg-linea {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5;
}

.dg-punteada {
  stroke-dasharray: 4 5;
}

.dg-flecha {
  marker-end: none;
  stroke: var(--brand);
}

/* La linea de tiempo de la gracia offline */
.dg-tramo {
  stroke-width: 5;
  stroke-linecap: round;
}

.dg-ok {
  stroke: var(--brand);
}

.dg-gracia {
  stroke: var(--warn);
}

.dg-fin {
  stroke: var(--line);
  stroke-dasharray: 6 7;
}

.dg-hito {
  fill: var(--bg);
  stroke: var(--warn);
  stroke-width: 2.5;
}

/* En un telefono el grafico se achica hasta ser ilegible: se lo deja
   desplazarse a lo ancho, como las tablas, en vez de encogerlo. */
@media (max-width: 700px) {
  .diagrama {
    padding: 22px 0 18px;
    overflow-x: auto;
  }

  .diagrama svg {
    width: 680px;
    max-width: none;
  }

  .diagrama figcaption {
    padding: 0 18px;
  }
}

/* ── Enlaces sueltos dentro de una banda ────────────────────────────────────
   Las puertas de entrada a Novedades, Soporte y Preguntas frecuentes. Van
   dentro de la banda que ya habla de ese tema y no en el menu de arriba, que
   tiene cinco anclas de la home y con dos entradas mas se desborda en
   pantallas medianas. */

.band-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 22px;
  font-size: 0.95rem;
}

.band-links a {
  color: var(--brand-bright);
  font-weight: 600;
  text-decoration: none;
}

.band-links a::after {
  content: " →";
}

.band-links a:hover,
.band-links a:focus-visible {
  text-decoration: underline;
}

.contact-copy .band-links {
  margin-bottom: 6px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   NIVEL 3 — Soluciones, Casos y Material técnico (2026-09-04)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── El índice de segmentos, arriba de Soluciones ───────────────────────────
   Cuatro anclas a las cuatro secciones. El visitante llega sabiendo cuál es el
   suyo: obligarlo a bajar leyendo los otros tres es castigarlo por saber. */

.seg-nav {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.seg-nav a {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.seg-nav a:hover,
.seg-nav a:focus-visible {
  border-color: var(--brand);
  color: var(--brand-bright);
}

/* ── Las dos columnas de cada segmento: lo que duele / lo que hace Viper ────
   Se leen enfrentadas a propósito. El dolor a la izquierda es lo que hace que
   alguien se reconozca; la respuesta al lado es la que lo retiene. */

.seg-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  margin-top: 40px;
}

@media (max-width: 760px) {
  .seg-cols {
    grid-template-columns: 1fr;
  }
}

.seg-col h3 {
  font-size: 1.05rem;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.seg-pain h3 {
  color: var(--muted);
}

.seg-does h3 {
  color: var(--brand-bright);
}

.seg-mods-title {
  font-size: 1.05rem;
  margin: 48px 0 20px;
}

/* La lista de dolores. Es `.ticks` al revés: una cruz apagada en vez de una
   tilde de marca — marcar con el color de la marca lo que el canal sufre HOY
   sería exactamente el mensaje contrario. */

.crosses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.crosses li {
  position: relative;
  padding-left: 30px;
  color: var(--muted);
}

.crosses li::before,
.crosses li::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--line);
}

.crosses li::before {
  transform: rotate(45deg);
}

.crosses li::after {
  transform: rotate(-45deg);
}

/* ── Casos ──────────────────────────────────────────────────────────────── */

.caso-head h2 {
  margin: 0 0 6px;
}

.caso-meta {
  color: var(--muted);
  margin: 0;
  font-size: 0.95rem;
}

/* La marca de "esto es un ejemplo". Chica, al lado del nombre del canal, y
   con el mismo amarillo de `.tbd` — es el color que en este sitio significa
   "no está resuelto", y conviene que signifique siempre lo mismo. */

.caso-marca {
  font-size: 0.7rem;
  padding: 2px 8px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.caso-quote {
  margin: 32px 0 0;
  padding: 0 0 0 clamp(20px, 3vw, 32px);
  border-left: 3px solid var(--brand);
}

.caso-quote p {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  margin: 0;
}

.caso-quote footer {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.95rem;
}

.caso .table-scroll {
  margin-top: 32px;
}

.caso caption {
  text-align: left;
  padding: 16px 20px 0;
  color: var(--muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Material técnico: la página que se imprime ─────────────────────────────
   🔑 El que evalúa el producto NO DECIDE SOLO: necesita llevarle algo a
   alguien. Por eso esta página está pensada para salir en papel, y por eso
   se imprime en claro aunque el sitio sea oscuro — una página oscura se
   imprime como un rectángulo negro y gasta un cartucho. */

@media print {
  .no-print,
  .site-head,
  .site-foot,
  #contacto,
  .lang-switch {
    display: none !important;
  }

  :root {
    --bg: #fff;
    --bg-alt: #fff;
    --fg: #000;
    --muted: #333;
    --line: #999;
    --line-soft: #ccc;
  }

  body {
    background: #fff;
    color: #000;
  }

  .band {
    padding: 18px 0;
    border-top: none;
    break-inside: avoid;
  }

  .page-hero {
    padding: 0 0 12px;
  }

  /* Que la tabla no se parta entre dos hojas: media tabla de requisitos en la
     hoja siguiente es justo lo que hace que nadie la lea. */
  .table-scroll,
  table {
    break-inside: avoid;
    overflow: visible;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  /* `.reveal` entra con una animación al hacer scroll. En papel no hay scroll:
     sin esto, la página se imprime en blanco. */
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}