/* ============================================================================
   NAOS · Sitio público

   Es la otra mitad de la regla de marca: aquí AFUERA el rojo manda —portada,
   franjas, cierre— porque este es material de venta. Dentro del producto sigue
   siendo tinta neutra, para que el rojo signifique solo «crítico».

   Los colores y espacios salen de naos-tokens.css: un solo sitio decide. Lo que
   se define aquí es la composición, que sí es distinta: la consola se lee de un
   vistazo desde tres metros; una landing se lee de arriba abajo.
   ============================================================================ */

/* --- Accesibilidad de base ---
   Tres cosas que no se ven hasta que alguien las necesita. */

/* El desplazamiento suave hace legible el salto entre secciones; scroll-padding evita que la
   cabecera pegajosa tape el encabezado al que se acaba de llegar. Ambos se apagan solos si la
   persona pidió menos movimiento: un salto instantáneo es preferible a marearse. */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Red de seguridad: si algo se anima por CSS, aquí se detiene. */
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Salta la cabecera para quien navega con teclado. Vive fuera de pantalla hasta que se enfoca. */
.saltar {
  position: absolute; left: var(--space-3); top: -4rem; z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  font-size: var(--text-small); font-weight: var(--weight-semibold);
  transition: top .15s ease;
}
.saltar:focus { top: var(--space-3); text-decoration: none; }

/* Todo lo que se pulsa se pulsa con el dedo: 44 px es el mínimo con guantes en un andén.
   Se aplica a lo que ES un destino de navegación —enlaces del menú, del pie, botones y el
   logotipo—, no a los enlaces sueltos dentro de un párrafo: agrandar esos rompería el renglón,
   y por eso las propias pautas los eximen (WCAG 2.5.8, excepción «inline»). */
.pub-top__links a, .pie__enlaces a, .hero__actions .btn,
.cierre__acciones .btn, a.brandmark, .saltar {
  min-height: 44px; display: inline-flex; align-items: center;
}
button, .btn, a[href] { cursor: pointer; }

/* --- Enlaces ---
   La consola casi no tiene enlaces de texto —se navega con botones y pestañas—, así
   que el estilo por omisión del navegador nunca estorbó ahí. Un sitio público es lo
   contrario: es casi todo texto con enlaces, y el azul subrayado de fábrica rompe la
   paleta. Se define aquí y no en los tokens para no tocar la consola. */
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); }

/* El logotipo es una marca, no un enlace: ni color de enlace ni subrayado, nunca. */
a.brandmark { color: inherit; text-decoration: none; }
a.brandmark:hover { text-decoration: none; }

/* --- Estructura --- */
.publico { max-width: 68rem; margin: 0 auto; padding: 0 var(--space-4); }

.pub-top {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.pub-top__inner {
  max-width: 68rem; margin: 0 auto; padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; gap: var(--space-4);
}
.pub-top__links { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }
/* `:not(.btn)` importa: sin él, este gris pisaba el color de texto del botón de llamada a la
   acción y lo dejaba en gris sobre tinta oscura — por debajo del contraste mínimo. Un botón que
   no se lee es un botón que no se pulsa. */
.pub-top__links a:not(.btn) { color: var(--ink-muted); text-decoration: none; font-size: var(--text-small); }
.pub-top__links a:not(.btn):hover { color: var(--ink); }

/* --- Portada: campo pleno de marca --- */
.hero {
  background: var(--naos-red-600); color: #fff;
  padding: var(--space-7) 0 var(--space-7);
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.4rem + 4.2vw, 4.5rem);
  font-weight: 900; letter-spacing: -.04em; line-height: 1;
  margin: 0 0 var(--space-4); max-width: 18ch;
}
.hero__lede {
  font-size: clamp(1rem, .95rem + .35vw, 1.3rem); line-height: 1.5;
  max-width: 52ch; margin: 0 0 var(--space-5); color: rgba(255, 255, 255, .92);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Botones sobre el campo rojo: el sólido es blanco, no más rojo. */
.btn--onbrand { background: #fff; color: var(--naos-red-700); border-color: #fff; font-weight: var(--weight-semibold); }
.btn--onbrand:hover { background: rgba(255, 255, 255, .9); }
.btn--onbrand-ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.btn--onbrand-ghost:hover { background: rgba(255, 255, 255, .12); }

/* --- Secciones --- */
.seccion { padding: var(--space-7) 0; }
.seccion--hundida { background: var(--surface-2); }
.seccion__titulo {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  letter-spacing: -.03em; line-height: 1.1; margin: 0 0 var(--space-2);
}
.seccion__lede { color: var(--ink-muted); max-width: 60ch; margin: 0 0 var(--space-5); }

.rejilla { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, 1fr); }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }

.pilar { padding: var(--space-4); }
.pilar__k {
  font-size: var(--text-caption); font-weight: var(--weight-bold);
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand);
}
.pilar__t { font-size: var(--text-h2); font-weight: var(--weight-semibold); margin: var(--space-2) 0; }
.pilar__d { color: var(--ink-muted); font-size: var(--text-small); line-height: 1.55; margin: 0; }

.captura { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); border: 1px solid var(--line); }

/* --- Cierre --- */
.cierre { background: var(--naos-red-600); color: #fff; padding: var(--space-7) 0; text-align: center; }
.cierre__t { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem); letter-spacing: -.035em; margin: 0 0 var(--space-3); }
.cierre__d { color: rgba(255, 255, 255, .9); margin: 0 auto var(--space-5); max-width: 46ch; }

/* --- Pie --- */
.pie { border-top: 1px solid var(--line); padding: var(--space-5) 0; color: var(--ink-muted); font-size: var(--text-small); }
.pie__filas { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: space-between; }
.pie a { color: var(--ink-muted); }
.pie a:hover { color: var(--ink); }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* --- Documento legal --- */
.legal { max-width: 46rem; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-7); }
.legal h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; margin: 0 0 var(--space-2); }
.legal .fecha { color: var(--ink-faint); font-size: var(--text-small); margin: 0 0 var(--space-5); }
.legal h2 { font-size: var(--text-h2); margin: var(--space-6) 0 var(--space-2); }
.legal p, .legal li { color: var(--ink-muted); line-height: 1.65; }
.legal li { margin-bottom: var(--space-2); }
.legal strong { color: var(--ink); }
.legal table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: var(--text-small); }
.legal th, .legal td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { color: var(--ink); font-weight: var(--weight-semibold); }

/* --- Página de una sola idea: 404 y gracias --- */
.centrada {
  min-height: 78vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: var(--space-3); padding: var(--space-6) var(--space-4);
}
.centrada__cifra { font-family: var(--font-display); font-size: clamp(4rem, 3rem + 7vw, 8rem); font-weight: 900; line-height: 1; color: var(--brand); letter-spacing: -.05em; }
.centrada__t { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 800; letter-spacing: -.03em; margin: 0; }
.centrada__d { color: var(--ink-muted); max-width: 46ch; margin: 0; }
.centrada__marca { color: var(--sev-ok); }

/* --- Aviso de cookies ---
   Va abajo y no tapa la página: no hay nada que "aceptar" antes de leer, porque
   el sitio no pone cookies de terceros. Ver naos-cookies.js. */
.cookies {
  position: fixed; left: var(--space-3); right: var(--space-3); bottom: var(--space-3);
  z-index: 50; max-width: 46rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.cookies__t { flex: 1 1 22rem; margin: 0; font-size: var(--text-small); color: var(--ink-muted); }
.cookies__acciones { display: flex; gap: var(--space-2); margin-left: auto; }

/* --- Móvil ---
   Los cortes están donde la composición deja de caber, no en tamaños de catálogo.
   La landing se ve en el teléfono de quien recibió el enlace en WhatsApp: ese es
   el caso normal, no la excepción. */
@media (max-width: 60rem) {
  .rejilla { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40rem) {
  .rejilla, .rejilla--2 { grid-template-columns: 1fr; }
  .hero { padding: var(--space-6) 0; }
  .seccion { padding: var(--space-6) 0; }
  /* La barra se queda en UNA fila.
     Antes ocupaba el ancho completo para repartir los enlaces del menú, pero por debajo de 48rem
     esos enlaces están ocultos y solo queda el botón de llamada a la acción. Con el botón de tema
     añadido, ese `width: 100%` empujaba a tres filas apiladas: 172 px de cabecera pegajosa
     comiéndose una quinta parte de la pantalla del teléfono. */
  .pub-top__inner { flex-wrap: nowrap; gap: var(--space-2); }
  .pub-top__links { width: auto; margin-left: auto; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .pie__filas { flex-direction: column; gap: var(--space-3); }
  .cookies { flex-direction: column; align-items: stretch; }
  /* Al pasar a columna, el eje principal es el vertical y ese `flex-basis: 22rem`
     dejaría de ser un ancho mínimo para convertirse en un ALTO de 352 px, que
     empuja el texto fuera de la pantalla. En columna el bloque se mide solo. */
  .cookies__t { flex: 0 0 auto; }
  .cookies__acciones { margin-left: 0; }
  .cookies__acciones .btn { flex: 1; justify-content: center; }
}


/* --- Portada --- */
.hero__inner { display: flex; flex-direction: column; align-items: flex-start; }

/* Antetítulo: dice de qué trata esto antes de que el lema haga su trabajo. El lema solo es
   bueno cuando ya sabes de qué se habla. */
.hero__ojo {
  margin: 0 0 var(--space-3); font-size: var(--text-caption);
  font-weight: var(--weight-bold); letter-spacing: .14em; text-transform: uppercase;
  /* Con .75 daba 4.36:1 sobre el rojo, y a 12 px el mínimo son 4.5. Se ve poco a simple
     vista y sin embargo es justo el renglón que dice de qué trata el producto. */
  color: rgba(255, 255, 255, .88);
}
.hero__nota { margin: var(--space-4) 0 0; font-size: var(--text-small); color: rgba(255, 255, 255, .78); }

/* --- Encabezado de sección --- */
.seccion__head { margin-bottom: var(--space-5); }

/* --- Iconos de los pilares ---
   SVG y no emoji: un emoji cambia de dibujo en cada sistema operativo y no hereda el color. */
.pilar { display: flex; flex-direction: column; align-items: flex-start; }
.pilar__icono {
  display: inline-flex; width: 40px; height: 40px; margin-bottom: var(--space-3);
  align-items: center; justify-content: center;
  border-radius: var(--radius-md); background: var(--brand-surface); color: var(--brand);
}
.pilar__icono svg { width: 22px; height: 22px; }

/* --- Figuras --- */
.figura { margin: 0; }
/* --ink-faint (#8b95a1) da 2.9:1 a 12 px: por debajo del mínimo legible. Está pensado para
   metadatos dentro de la consola, sobre fondos hundidos y en tamaños mayores. Un pie de figura
   es texto que se lee, así que va en --ink-muted, que llega a 5.4:1. */
.figura__pie {
  margin-top: var(--space-2); font-size: var(--text-caption); color: var(--ink-muted);
}

/* --- Hechos técnicos ---
   Cifras que un comité técnico va a querer preguntar, no adjetivos de folleto. */
.hechos { display: grid; gap: var(--space-3); grid-template-columns: repeat(4, 1fr); }
.hecho {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-4); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); border-top: 3px solid var(--brand);
}
.hecho__v {
  font-family: var(--font-display); font-size: var(--text-h1); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.1; color: var(--ink);
}
.hecho__t { font-size: var(--text-small); font-weight: var(--weight-semibold); margin-top: var(--space-2); }
.hecho__d { font-size: var(--text-caption); color: var(--ink-muted); line-height: 1.5; }


.cierre__acciones { display: flex; justify-content: center; }

/* --- Cortes ---
   Los puntos de la lista de verificación: 375, 768, 1024 y 1440. Los tres primeros cambian
   la composición; a 1440 el contenedor ya topó y no hace falta hacer nada. */
@media (max-width: 64rem) {      /* 1024 */
  .hechos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 48rem) {      /* 768 */
  .pub-top__links a:not(.btn) { display: none; }   /* en el teléfono manda la acción, no el índice */
}

@media (max-width: 40rem) {      /* 640 y abajo, incluye 375 */
  .hechos { grid-template-columns: 1fr; }
  }

/* ============================================================================
   Cierre con formulario

   La banda roja se parte en dos: a la izquierda el argumento, a la derecha una
   tarjeta clara con el formulario. La tarjeta vuelve a color de tinta normal
   porque dentro de ella se lee y se escribe — el blanco sobre rojo sirve para
   un titular, no para catorce renglones de campos.
   ============================================================================ */
.contacto {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-6); align-items: start; text-align: left;
}
.contacto__d { margin: 0 0 var(--space-4); max-width: 40ch; }

.contacto__puntos { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.contacto__puntos li {
  position: relative; padding-left: var(--space-5);
  color: rgba(255, 255, 255, .9); font-size: var(--text-small); line-height: 1.5;
}
/* La palomita va como contenido decorativo y no como texto: un lector de
   pantalla leería «marca de verificación» delante de cada renglón. */
.contacto__puntos li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* Dentro de la tarjeta manda la tinta, no el campo rojo que hay detrás. */
.contacto__caja { color: var(--ink); padding: var(--space-5); }
.contacto__caja h2, .contacto__caja label { color: inherit; }
.contacto__dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.contacto__enviar { width: 100%; }

/* El campo trampa se saca de la pantalla en vez de ocultarlo con `display:none`:
   algunos programas de relleno automático saltan lo que está oculto, y entonces
   la trampa no atrapa a nadie. Fuera de la vista pero presente, sí cae. */
.trampa {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

@media (max-width: 60rem) {
  .contacto { grid-template-columns: 1fr; gap: var(--space-5); }
}
@media (max-width: 40rem) {
  .contacto__dos { grid-template-columns: 1fr; }
  .contacto__caja { padding: var(--space-4); }
}

/* Una tabla ancha se desliza DENTRO de su caja; la página nunca se mueve de lado.
   El ancho mínimo evita que las columnas se estrujen hasta partir cada palabra en dos. */
.legal .tabla-caja { margin: var(--space-3) 0; }
.legal .tabla-caja table { margin: 0; min-width: 30rem; }
.legal .tabla-caja:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ============================================================================
   Botón de tema

   Un solo control que alterna claro y oscuro. El dibujo es CSS puro y no un
   icono cargado: son dos formas geométricas, y así no hay una petición más ni
   una fuente de iconos por dos figuras.
   ============================================================================ */
.tema {
  flex: none; margin-left: var(--space-3);
  width: 44px; height: 44px;              /* objetivo táctil, igual que el resto */
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); color: var(--ink-muted); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.tema:hover { background: var(--surface-2); color: var(--ink); }

/* Cambio de idioma.
   Dice el idioma AL QUE LLEVA y lo dice EN ESE IDIOMA —«English» en la versión española y
   «Español» en la inglesa—. Es la convención, y la razón es práctica: quien no entiende la
   página que está viendo tampoco entendería una etiqueta escrita en ese mismo idioma.
   Misma altura que el botón de tema para que la barra no se desalinee. */
.idioma {
  flex: none; margin-left: var(--space-2);
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  color: var(--ink-muted); text-decoration: none; white-space: nowrap;
  font-size: var(--text-small);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.idioma:hover { background: var(--surface-2); color: var(--ink); }

/* Dos etiquetas, no una recortada por CSS: «English» y «Español» empiezan las DOS por E, así que
   quedarse con la primera letra daría lo mismo en los dos idiomas y el botón dejaría de decir
   nada. En pantalla ancha va el nombre; en el teléfono, el código de dos letras. */
.idioma__corto { display: none; }

/* La excepción del teléfono va DETRÁS de la regla base a propósito.
   Estaba más arriba en el archivo, dentro del bloque móvil general, y perdía: misma
   especificidad, y en CSS con eso gana la última. El botón salía vacío en el teléfono —con su
   recuadro y sin una letra dentro— y en pantalla ancha se veía bien, que es la peor forma de
   tener un fallo.

   Ahí la barra ya iba justa, así que el nombre se encoge a las dos letras del código. El nombre
   completo sigue en el `aria-label`, que es de donde lo toma un lector de pantalla. */
@media (max-width: 48rem) {
  .idioma { padding: 0 var(--space-2); font-size: var(--text-caption); }
  .idioma__largo { display: none; }
  .idioma__corto { display: inline; }
  /* Sin los márgenes propios: la barra ya reparte 8 px de separación con `gap`, y sumados a
     estos márgenes la barra medía 377 px en un teléfono de 375 — dos píxeles de desplazamiento
     lateral que no se ven pero se sienten al arrastrar. */
  .idioma, .tema { margin-left: 0; }
}

/* El icono dibuja A DÓNDE VAS, no dónde estás — igual que la etiqueta accesible, que dice
   «Cambiar a tema oscuro». Enseñar el estado actual y anunciar el destino sería contradecirse:
   quien ve el dibujo y quien oye la etiqueta acabarían esperando cosas distintas.

   Así que en tema claro se dibuja una luna, y en oscuro un sol. Ambos son CSS puro: dos figuras
   no justifican una petición más ni una fuente de iconos. */

/* Luna: un disco mordido por una sombra interior. */
.tema__icono {
  width: 16px; height: 16px; border-radius: 50%;
  background: transparent;
  box-shadow: inset -5px -3px 0 0 currentColor;
  transform: rotate(-25deg);
}

/* Sol: el mismo disco, relleno, con ocho puntos alrededor. Los puntos son sombras del propio
   elemento —no hay que añadir nada al HTML— y el `-7px` de cada una los encoge hasta que dejan
   de ser discos y se leen como rayos. */
.tema[data-tema="dark"] .tema__icono {
  width: 10px; height: 10px;
  background: currentColor;
  transform: none;
  box-shadow:
      0   -9px 0 -3px currentColor,
      0    9px 0 -3px currentColor,
     -9px  0   0 -3px currentColor,
      9px  0   0 -3px currentColor,
      6px  6px 0 -3px currentColor,
     -6px -6px 0 -3px currentColor,
      6px -6px 0 -3px currentColor,
     -6px  6px 0 -3px currentColor;
}

/* En el teléfono el botón sigue visible aunque los enlaces del menú se oculten:
   el tema es una preferencia personal, no un índice del sitio. */
@media (max-width: 48rem) {
  /* El menú ya empuja a la derecha; aquí solo hace falta separarlo del botón de acción. */
  .tema { margin-left: var(--space-2); }
}

/* --- Contador de caracteres --- */
.cuenta {
  display: block; margin-top: 2px;
  font-variant-numeric: tabular-nums; color: var(--ink-faint);
}
/* Avisa ANTES de chocar con el tope, no al llegar: quien va escribiendo puede
   ir cerrando la idea en vez de encontrarse el teclado muerto de golpe. */
.cuenta[data-cerca="true"] { color: var(--sev-high); font-weight: var(--weight-semibold); }

/* ============================================================================
   Mapa de flota

   El componente es el MISMO que corre en la consola (naos-mapa.js, copiado tal
   cual del producto). No es una ilustración parecida: es la pieza de verdad, con
   su misma retícula de calles y su misma lógica de desvío. Dos mapas distintos
   acabarían divergiendo, y el de la portada sería justo el que nadie revisa.

   Estos estilos vienen de panorama.css, la pantalla donde vive en el producto.
   ============================================================================ */
.mapa__lienzo {
  /* Las proporciones de la captura del mapa (1400 × 900). El SVG recorta, no deforma. */
  position: relative; width: 100%; aspect-ratio: 1400 / 900;
  background: var(--map-land); overflow: hidden;
}
.mapa__svg { display: block; width: 100%; height: 100%; }

/* El halo late SOLO cuando el dato es fresco. Un camión sin señal no debe
   parecer que se mueve: sería la mentira visual que el producto promete no
   contar — y aquí, además, delante de un cliente. */
@keyframes naos-latido {
  0%, 100% { r: 11; opacity: .22; }
  50%      { r: 17; opacity: .06; }
}
.mapa__latido { animation: naos-latido 2.4s ease-in-out infinite; }

/* El anillo del camión fuera de su corredor: lo único del mapa que crece, para que se
   encuentre sin buscarlo. Más rápido que el latido del dato fresco porque no dicen lo mismo. */
@keyframes naos-alarma {
  0%   { r: 13; opacity: .9; }
  70%  { r: 26; opacity: 0; }
  100% { r: 26; opacity: 0; }
}
.mapa__alarma { animation: naos-alarma 1.6s ease-out infinite; }

.mapa__leyenda {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
}
.leyenda__item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-caption); color: var(--ink-muted);
}
/* La atribución de los datos del mapa. Obligatoria por licencia (ODbL): se puede hacer discreta,
   no se puede quitar. Va al final de la leyenda y ocupa su propio renglón. */
.leyenda__atribucion { flex-basis: 100%; color: var(--ink-faint); }
.leyenda__punto { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.leyenda__punto--ok     { background: var(--sev-ok); }
.leyenda__punto--alta    { background: var(--sev-high); }
.leyenda__punto--critica { background: var(--sev-critical); }
.leyenda__punto--mudo   { background: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  .mapa__latido { animation: none; }
  /* La alarma se queda como anillo fijo. Quitarla dejaría al desviado igual que a los demás. */
  .mapa__alarma { animation: none; opacity: .9; }
}

/* Botones grandes de la portada: es la única llamada a la acción de la página y compite con un
   titular de 72 px. Al tamaño normal se leía como un enlace más del pie. */
.btn--grande {
  /* Más ALTOS y con más letra, no más anchos: el ancho ya lo daba el texto.
     El relleno lateral baja a --space-5 para compensar la letra mayor y que la
     pieza no crezca de largo. */
  min-height: 64px;
  padding: 0 var(--space-5);
  font-size: 1.0625rem;
  font-weight: var(--weight-bold);
  border-radius: var(--radius-lg);
}

/* En el teléfono se apilan, y ahí el orden se invierte: a la derecha es donde termina de leerse
   una línea, pero en una columna lo que se alcanza sin estirar el pulgar es lo de ARRIBA. */
@media (max-width: 40rem) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn--onbrand { order: -1; }
}

.mapa__nota { max-width: 78ch; }

/* --- Respaldo del formulario sin servidor ---
   Sustituye al formulario cuando no hay a dónde enviar. Enseña el mensaje ya
   redactado para copiarlo: nadie se queda sin forma de contactar por no tener
   configurado un programa de correo. */
.respaldo {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-5); color: var(--ink);
}
.respaldo__t { margin: 0; font-size: var(--text-h2); }
.respaldo__texto {
  width: 100%; margin-top: var(--space-4); padding: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-caption); line-height: 1.6;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--surface-2); color: var(--ink); resize: vertical;
}
.respaldo__acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.respaldo__acciones .btn { flex: 1 1 auto; }

/* ============================================================================
   Pieza: la captura sobre el campo de marca

   Dos cosas que la captura sola no daba:

   · El rojo. Es material de venta y aquí AFUERA el rojo manda — dentro del
     producto sigue siendo tinta neutra, para que signifique solo «crítico». Sin
     estas bandas la página perdía su respiración y su marca.

   · El marco de ventana. Una imagen a sangre se lee como ilustración; con la
     barra del navegador encima se lee como lo que es: una pantalla del producto
     corriendo. Es la diferencia entre «así se vería» y «así se ve».
   ============================================================================ */
.pieza {
  margin: 0;
  background: var(--naos-red-600);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  overflow: hidden;
  position: relative;
}

/* El aro difuso de la esquina: el mismo recurso de la portada, para que las
   piezas se lean como parte de la misma familia y no como cajas rojas sueltas. */
.pieza::after {
  content: ""; position: absolute; right: -80px; top: -90px;
  width: 260px; height: 260px; border-radius: 50%;
  border: 46px solid rgba(255, 255, 255, .07); pointer-events: none;
}

.marco {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 26px 60px rgba(60, 4, 12, .38);
  position: relative;
}

/* Barra de ventana: tres puntos y nada más. Con una barra de direcciones habría
   que escribir una URL, y cualquier URL que se ponga ahí sería inventada. */
.marco__barra {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.marco__barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }

.marco .captura,
.marco .mapa__lienzo { border: 0; border-radius: 0; display: block; }

.pieza__pie {
  margin: var(--space-3) 0 0;
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, .9);
}
.pieza .mapa__leyenda { margin-top: var(--space-3); }
.pieza .leyenda__item { color: rgba(255, 255, 255, .82); }

@media (max-width: 40rem) {
  .pieza { padding: var(--space-3); border-radius: var(--radius-md); }
  .pieza::after { display: none; }
}

/* ============================================================================
   La cuadrícula de la portada

   Solo en la banda roja de arriba. No es adorno abstracto: es la retícula de un
   plano —la misma que estructura el mapa del producto— y por eso significa algo
   en esta página y no en otra cualquiera.

   El movimiento es una DERIVA lenta, como un plano que se desplaza debajo. Se
   descartó que siguiera el ratón por dos razones: en un teléfono no hay ratón, y
   ahí es donde se abre la mitad de los enlaces; y un fondo que reacciona a cada
   gesto pide atención justo donde debería estar el titular.

   Un ciclo completo tarda 90 segundos y avanza el ancho exacto de una casilla,
   así que el bucle no tiene costura. Se nota si uno se fija; no distrae si no.
   ============================================================================ */
.hero { position: relative; overflow: hidden; }

.hero::before {
  content: "";
  position: absolute;
  /* Sobra por los cuatro lados: al desplazarse no debe asomar ningún borde. */
  inset: -60px;
  pointer-events: none;

  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .14) 1px, transparent 1px);
  background-size: 56px 56px;

  /* Se apaga hacia abajo y a la derecha: el titular queda sobre rojo limpio y la
     cuadrícula acompaña en vez de competir. */
  -webkit-mask-image: radial-gradient(135% 115% at 8% 0%, #000 30%, transparent 92%);
          mask-image: radial-gradient(135% 115% at 8% 0%, #000 30%, transparent 92%);

  animation: naos-deriva 90s linear infinite;
  will-change: transform;
}

/* Avanza exactamente una casilla: al terminar, el dibujo coincide consigo mismo. */
@keyframes naos-deriva {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-56px, -56px, 0); }
}

/* El contenido, por encima de la cuadrícula. */
.hero__inner { position: relative; z-index: 1; }

/* Si pidieron menos movimiento, la cuadrícula se queda quieta. No desaparece:
   sigue siendo parte del fondo, solo deja de moverse. */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}

/* ============================================================================
   Documentos legales

   Lo que separa un documento que se lee de uno que se firma sin leer: poder
   recorrerlo, poder citarlo y poder distinguir de un vistazo dónde empieza cada
   cláusula. Nada de esto es decoración.
   ============================================================================ */

/* Un poco más de aire y de cuerpo que el resto del sitio: aquí no se ojea, se lee
   seguido, y a veces con el abogado del cliente al lado. */
.legal { max-width: 48rem; font-size: 15.5px; }
.legal h1 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); }

/* Una línea sobre cada cláusula: da el corte que en papel daría el espacio en
   blanco, sin gastar el doble de alto. */
.legal h2 {
  position: relative;
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  scroll-margin-top: 5.5rem;   /* que la cabecera pegajosa no tape el título */
}
.legal h2:first-of-type { border-top: 0; }

/* Enlace permanente por cláusula: aparece al pasar por encima o al enfocarlo con
   el teclado. Permite citar «la cláusula 9» con una dirección en vez de con un
   «busca más abajo». */
.ancla {
  position: absolute; left: -1.1em; top: 50%; transform: translateY(-50%);
  color: var(--ink-faint); text-decoration: none; font-weight: 400;
  opacity: 0; transition: opacity var(--duration-fast) var(--ease-out);
}
.legal h2:hover .ancla, .ancla:focus-visible { opacity: 1; }
@media (max-width: 52rem) { .ancla { display: none; } }

/* --- Aviso de estado del documento --- */
.aviso-legal {
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  border-left: 3px solid var(--sev-medium);
  background: var(--surface-2);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-small);
}
.aviso-legal strong { color: var(--ink); }

/* --- Índice --- */
.indice {
  margin: var(--space-5) 0 var(--space-6);
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.indice__t {
  margin: 0 0 var(--space-3);
  font-size: var(--text-caption); font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--ink-muted);
}
.indice__lista {
  margin: 0; padding-left: 1.4em;
  columns: 2; column-gap: var(--space-5);
  font-size: var(--text-small);
}
.indice__lista li { margin-bottom: var(--space-2); break-inside: avoid; }
.indice__lista a { color: var(--ink-muted); text-decoration: none; }
.indice__lista a:hover { color: var(--brand); text-decoration: underline; }

/* Dónde estás. En un documento de tres mil palabras es la única referencia que
   hay, porque no cabe una barra lateral fija. */
.indice__lista a[data-aqui="true"] {
  color: var(--brand); font-weight: var(--weight-semibold);
}

@media (max-width: 40rem) {
  .indice__lista { columns: 1; }
  .indice { padding: var(--space-4); }
}