/* =========================================================================
   CockpitDial — landing comercial (borrador W1)
   Paleta cockpit: negros profundos, blanco instrumental, ámbar/rojo de acento.
   Móvil primero; sin JS; sin dependencias externas (cero CDNs).

   Wordmark: «Cockpit» en peso ligero + «Dial» en peso fuerte.
     · .wordmark  → lockup (cabecera, pie, tabla): «Dial» en ámbar.
     · .brand     → marca en texto corrido: mismo contraste de peso pero SIN
                    ámbar, porque el ámbar es el color de los enlaces.
   ========================================================================= */

:root {
  --bg: #0a0a0e;
  --bg-alt: #0e0e14;
  --surface: #14141b;
  --surface-2: #191922;
  --line: #24242e;
  --line-soft: #1c1c24;
  --text: #f2f2f4;
  --text-muted: #9a9aa5;
  --text-faint: #6f6f7a;
  --amber: #ffae42;
  --amber-soft: rgba(255, 174, 66, 0.12);
  --red: #e0342c;
  --green: #3ddc84;
  --radius: 14px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* ---------- reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.6em; }
h1 { font-size: clamp(1.9rem, 5.5vw, 3.1rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); letter-spacing: -0.01em; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }

.container { width: min(1080px, 100% - 2.5rem); margin-inline: auto; }
.container-narrow { width: min(720px, 100% - 2.5rem); }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--amber); color: #000; padding: 0.5rem 1rem;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 14, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.8rem 0;
}
/* ---------- wordmark / marca ---------- */
.wordmark {
  font-weight: 400; letter-spacing: 0.26em; text-transform: uppercase;
  font-size: 0.9rem; color: var(--text); white-space: nowrap;
}
.wordmark .dial { font-weight: 750; color: var(--amber); }
a.wordmark:hover { text-decoration: none; color: var(--amber); }
@media (min-width: 480px) {
  .wordmark { font-size: 0.95rem; letter-spacing: 0.3em; }
}
/* lockup completo (isotipo + wordmark) — solo en la cabecera.
   Proporciones de brand/svg/logo-horizontal-color.svg: el símbolo mide ~1,9
   veces la altura de mayúscula y su eje se alinea con el centro de la caja alta.
   El isotipo NO cambia de color al pasar el ratón: es marca, no texto. */
.wordmark-lockup { display: inline-flex; align-items: center; gap: 0.42em; }
.wordmark-mark { height: 1.38em; width: 1.38em; flex: none; }

/* variante sin tracking propio: hereda la tipografía del contexto (thead) */
.wordmark-flat {
  font-size: inherit; letter-spacing: inherit;
  text-transform: inherit; color: inherit;
}
.wordmark-flat .dial { color: inherit; }

/* marca dentro de un párrafo: solo contraste de peso */
.brand { white-space: nowrap; }
.brand .dial { font-weight: 700; color: var(--text); }
.site-nav { display: none; gap: 1rem; }
.site-nav a { color: var(--text-muted); font-size: 0.88rem; }
.site-nav a:hover { color: var(--text); text-decoration: none; }
/* El menú aparece SOLO cuando la fila entera cabe de verdad. Medido en
   navegador con el menú visible, ancho que necesita la cabecera:
   inglés 856 px · castellano 941 px · alemán 956 px. Con el corte anterior en
   820 px la página desbordaba en horizontal en los tres idiomas.
   Un único corte a 1000 px, no uno por idioma: se probó a afinarlo por idioma
   y se falló al suponer que el castellano medía como el inglés (mide 85 px
   más). Un solo número, con margen para el idioma más ancho, aguanta también
   los cambios de copy. Si se añade un enlace al menú, hay que volver a medir. */
@media (min-width: 1000px) { .site-nav { display: flex; } }

/* ---------- botones ---------- */
.btn {
  display: inline-block; padding: 0.75rem 1.4rem; border-radius: 999px;
  font-weight: 600; font-size: 0.95rem; border: 1px solid transparent;
  cursor: pointer; text-align: center; transition: transform 0.15s, box-shadow 0.15s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary {
  background: var(--amber); color: #17110a;
  box-shadow: 0 0 24px rgba(255, 174, 66, 0.25);
}
.btn-primary:hover { box-shadow: 0 0 34px rgba(255, 174, 66, 0.4); }
.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--text-muted); }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; }
.btn-block { width: 100%; }

/* ---------- hero ---------- */
.hero {
  padding: clamp(2.5rem, 7vw, 5rem) 0 0;
  background:
    radial-gradient(60% 50% at 70% 10%, rgba(255, 174, 66, 0.07), transparent 70%),
    linear-gradient(var(--bg) 60%, var(--bg-alt));
  overflow: hidden;
}
.hero-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 3rem; }
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: var(--text-muted);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.3rem 0.9rem; margin-bottom: 1.2rem;
}
.hero-badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
}
.hero-sub { color: var(--text-muted); font-size: 1.08rem; max-width: 34em; }
.hero-sub strong { color: var(--text); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.6rem 0; }
.trustbar {
  list-style: none; padding: 0; margin: 0 0 1rem;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
  color: var(--text-faint); font-size: 0.85rem;
}
.trustbar li { display: flex; align-items: center; gap: 0.45rem; }
.trustbar li::before { content: "◆"; color: var(--amber); font-size: 0.55rem; }

.hero-scene { position: relative; margin-inline: auto; width: min(640px, 100%); }
.hero-scene svg { width: 100%; height: auto; display: block; }
.pod-face {
  position: absolute; left: 44.7%; top: 25.4%; width: 35.1%;
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(255, 174, 66, 0.14);
}

/* ---------- secciones ---------- */
.section { padding: clamp(3rem, 8vw, 5.5rem) 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line-soft); }
.section-lead { color: var(--text-muted); max-width: 46em; margin-bottom: 2rem; }
.mt-xl { margin-top: 3.5rem; }
.muted { color: var(--text-faint); font-size: 0.86em; }
.finetext { color: var(--text-faint); font-size: 0.8rem; margin-top: 1rem; max-width: 60em; }

/* ---------- cards ---------- */
.cards { display: grid; gap: 1rem; }
@media (min-width: 640px) { .cards.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cards.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.3rem 1.4rem;
}
.card h3 { margin-top: 0.5rem; }
.card p { margin-bottom: 0; color: var(--text-muted); font-size: 0.94rem; }
.card p strong { color: var(--text); }
.soon-note { display: block; margin-top: 0.5rem; color: var(--text-faint); font-size: 0.85em; }

.badge {
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; padding: 0.2rem 0.7rem;
}
.badge-done { background: rgba(61, 220, 132, 0.12); color: var(--green); }
.badge-soon { background: var(--amber-soft); color: var(--amber); }
.badge-early { background: var(--amber); color: #17110a; margin-right: 0.5rem; }
.roadmap-strip { margin-top: 1.5rem; color: var(--text-muted); font-size: 0.95rem; }

/* ---------- caras (carrusel CSS en móvil, rejilla en escritorio) ---------- */
.faces-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(68%, 300px);
  gap: 1rem; overflow-x: auto; padding-bottom: 0.8rem;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.faces-strip::-webkit-scrollbar { height: 6px; }
.faces-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.face { margin: 0; scroll-snap-align: center; }
.face img {
  width: 100%; border-radius: 50%;
  background: #050508; border: 1px solid var(--line);
}
.face figcaption {
  text-align: center; margin-top: 0.7rem;
  color: var(--text-muted); font-size: 0.85rem;
}
.face figcaption strong { color: var(--text); }
@media (min-width: 900px) {
  .faces-strip { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; }
}

/* ---------- tablas ---------- */
.table-scroll {
  overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
}
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 0.9rem; }
th, td { padding: 0.85rem 1rem; text-align: left; vertical-align: top; }
thead th {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); border-bottom: 1px solid var(--line);
}
tbody th { font-weight: 600; color: var(--text); }
tbody tr + tr th, tbody tr + tr td { border-top: 1px solid var(--line-soft); }
tbody th[scope="row"] { max-width: 240px; }
.col-us { background: var(--amber-soft); }
thead .col-us { color: var(--amber); }
sup a { color: var(--text-faint); }

/* ---------- notas ---------- */
.notes { margin: 1.5rem 0 0; padding-left: 1.2rem; color: var(--text-muted); font-size: 0.9rem; }
.notes li { margin-bottom: 0.6rem; }
.notes strong { color: var(--text); }

/* ---------- precio: ver «dos niveles de precio» al final de la hoja ---------- */

/* ---------- FAQ ---------- */
details {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); margin-bottom: 0.8rem;
  padding: 0 1.2rem;
}
summary {
  cursor: pointer; font-weight: 600; padding: 1rem 0;
  list-style: none; position: relative; padding-right: 2rem;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; position: absolute; right: 0.2rem; top: 50%;
  transform: translateY(-50%); color: var(--amber);
  font-size: 1.3rem; font-weight: 400; transition: transform 0.2s;
}
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details p { color: var(--text-muted); margin: 0 0 1.1rem; font-size: 0.94rem; }
details p strong { color: var(--text); }

/* ---------- lista de espera ---------- */
.section-cta {
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(255, 174, 66, 0.08), transparent 70%),
    var(--bg-alt);
  border-top: 1px solid var(--line-soft);
}
.waitlist {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem;
  display: grid; gap: 1.1rem;
}
.form-row { display: grid; gap: 0.4rem; }
.form-row label { font-size: 0.85rem; color: var(--text-muted); }
.field-note { margin: 0; color: var(--text-faint); font-size: 0.78rem; line-height: 1.45; }
.waitlist input[type="email"], .waitlist select {
  width: 100%; padding: 0.75rem 0.9rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg);
  color: var(--text); font-size: 1rem; font-family: inherit;
}
.waitlist input:focus, .waitlist select:focus {
  outline: 2px solid var(--amber); outline-offset: 1px; border-color: transparent;
}
.form-consent { grid-template-columns: auto 1fr; align-items: start; gap: 0.6rem; }
.form-consent input { margin-top: 0.25rem; accent-color: var(--amber); }
.form-consent label { font-size: 0.82rem; }
.waitlist .finetext { margin: 0; text-align: center; }

/* Dos selects cortos (caja de cambios + país) caben en una fila en cuanto hay
   sitio; en móvil se apilan solos porque .form-grid-2 es un grid de 1 columna. */
.form-grid-2 { display: grid; gap: 1.1rem; }
@media (min-width: 520px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }

/* Honeypot antispam: NO usar display:none — los bots que interpretan CSS lo
   detectan. Se saca de la pantalla, del orden de tabulación (tabindex="-1") y
   del árbol de accesibilidad (aria-hidden en el envoltorio del HTML). */
.hp {
  position: absolute !important; left: -9999px !important; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Mensaje de error del formulario. Sin JS: el backend redirige a
   …/index.html#waitlist-error y :target lo hace visible, además de llevarle el
   foco (el bloque tiene tabindex="-1"). Oculto mientras no sea el target. */
.form-alert { display: none; }
.form-alert:target {
  display: block;
  background: rgba(224, 52, 44, 0.1);
  border: 1px solid var(--red); border-left-width: 3px;
  border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.2rem;
  scroll-margin-top: 5rem;
}
.form-alert:focus { outline: 2px solid var(--red); outline-offset: 3px; }
.form-alert p { margin: 0; font-size: 0.9rem; color: var(--text); }
.form-alert p + p { margin-top: 0.5rem; color: var(--text-muted); font-size: 0.85rem; }
.form-alert strong { color: var(--red); }

/* ---------- páginas de estado de la lista (gracias / confirmado) ---------- */
.status-head {
  padding: clamp(2.5rem, 7vw, 4.5rem) 0 0;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(255, 174, 66, 0.09), transparent 70%),
    var(--bg);
}
.status-head h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin-bottom: 0.5rem; }
.status-kicker {
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--amber); font-weight: 700; margin-bottom: 0.8rem;
}
.status-lead { color: var(--text-muted); font-size: 1.05rem; max-width: 40em; margin: 0; }
.status-lead strong { color: var(--text); }
.status-ok .status-kicker { color: var(--green); }
.status-ok { background:
  radial-gradient(60% 70% at 50% 0%, rgba(61, 220, 132, 0.09), transparent 70%),
  var(--bg); }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line-soft);
  padding: 3rem 0 2rem; text-align: center;
  background: var(--bg);
}
.footer-mark { font-size: 1rem; margin-bottom: 0.3rem; }
.footer-tag { color: var(--text-faint); font-size: 0.85rem; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin: 1.4rem 0; }
.footer-links a { color: var(--text-muted); font-size: 0.85rem; }
.footer-links a:hover { color: var(--text); }
.disclaimer {
  max-width: 760px; margin: 1.5rem auto; padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
}
.disclaimer p { color: var(--text-faint); font-size: 0.75rem; line-height: 1.55; }
.copyright { color: var(--text-faint); font-size: 0.78rem; margin: 0; }

/* ---------- selector de idioma (EN/DE/ES) ----------
   Control segmentado de tres idiomas: la lengua activa va en ámbar. Las tres
   páginas (índice y legales) llevan el MISMO grupo, enlazando cada una a su
   equivalente en los otros dos idiomas. Compacto a propósito: en 375 px comparte
   fila con el lockup y el CTA (ver .header-row / nota del .btn-sm). */
.lang-switch {
  display: inline-flex; align-items: center; flex: none;
  border: 1px solid var(--line); border-radius: 999px;
  overflow: hidden; white-space: nowrap;
}
.lang-switch a {
  color: var(--text-faint); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.28rem 0.52rem; line-height: 1;
}
.lang-switch a + a { border-left: 1px solid var(--line); }
.lang-switch a:hover { color: var(--text); text-decoration: none; }
.lang-switch a[aria-current="true"] {
  background: var(--amber); color: #17110a; font-weight: 700;
}
.lang-switch a[aria-current="true"]:hover { color: #17110a; }
/* móvil: el lockup + selector de 3 idiomas + CTA comparten una sola línea. Con
   el selector de tres (más ancho que el de un idioma), se recorta el tracking del
   wordmark y el padding del selector/botón para que quepa hasta el CTA más largo
   («Warteliste» en alemán) sin tocar el borde. */
@media (max-width: 479px) {
  .header-row { gap: 0.45rem; }
  .wordmark { letter-spacing: 0.15em; }
  .btn-sm { padding: 0.42rem 0.72rem; font-size: 0.78rem; }
  .lang-switch a { padding: 0.26rem 0.34rem; letter-spacing: 0.02em; }
}
/* muy estrecho (≤359 px): ni con eso caben los tres; el CTA de cabecera es
   redundante con el del hero, así que se oculta y deja sitio al selector. */
@media (max-width: 359px) {
  .site-header .btn-sm { display: none; }
}

/* ---------- «hazla tuya»: esferas de smartwatch importables ----------
   El pod es un panel redondo de 466×466, el MISMO formato que un smartwatch:
   además de nuestras esferas, se puede cargar cualquier watchface redonda. Los
   ejemplos son SVG propios (cero imágenes externas) dentro de un marco tipo pod. */
.section-makeyours {
  background:
    radial-gradient(65% 55% at 15% 0%, rgba(255, 174, 66, 0.06), transparent 70%),
    var(--bg-alt);
  border-block: 1px solid var(--line-soft);
}
.watchfaces {
  display: grid; gap: 1.6rem 1.2rem; margin-top: 0.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 680px) { .watchfaces { grid-template-columns: repeat(3, 1fr); } }
.watchface { margin: 0; }
.watchface img {
  width: min(280px, 100%); margin-inline: auto;
  border-radius: 50%; background: #050508;
  border: 1px solid var(--line);
  box-shadow: 0 0 55px rgba(255, 174, 66, 0.10);
}
.watchface figcaption {
  text-align: center; margin-top: 0.8rem;
  color: var(--text-muted); font-size: 0.85rem;
}
.watchface figcaption strong { color: var(--text); }

/* ---------- páginas legales ---------- */
.legal-head { padding: clamp(2rem, 6vw, 3.5rem) 0 0; }
.legal-head h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); }
.legal-updated { color: var(--text-faint); font-size: 0.82rem; margin: 0; }
.legal { padding: 2rem 0 clamp(3rem, 8vw, 5rem); }
.legal h2 {
  font-size: 1.15rem; margin-top: 2.4rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
}
.legal h2:first-of-type { margin-top: 1.6rem; }
.legal h3 { font-size: 1rem; margin-top: 1.6rem; }
.legal p, .legal li { color: var(--text-muted); font-size: 0.95rem; }
.legal strong { color: var(--text); }
.legal ul, .legal ol { padding-left: 1.2rem; margin: 0 0 1em; }
.legal li { margin-bottom: 0.5rem; }
.legal .table-scroll { margin: 1.2rem 0; }
.legal table { min-width: 520px; }
.legal-toc {
  list-style: none; padding: 1rem 1.2rem; margin: 1.5rem 0 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid; gap: 0.35rem;
}
.legal-toc li { margin: 0; font-size: 0.9rem; }
.callout {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 1.5rem 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout-title {
  font-weight: 700; color: var(--text); font-size: 0.82rem;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem;
}
/* placeholder que el titular debe rellenar antes de publicar */
.ph {
  background: var(--amber-soft); color: var(--amber);
  border: 1px dashed rgba(255, 174, 66, 0.45); border-radius: 6px;
  padding: 0 0.35rem; font-weight: 600; font-size: 0.92em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.legal code, .legal kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 0.05em 0.4em;
  color: var(--text);
}
/* el CTA de la cabecera no debe partirse en dos líneas: en 375 px el lockup +
   selector de idioma + botón van justos (ver .header-row) */
.btn-sm { white-space: nowrap; }

/* ---------- esferas por nivel (segmentación de producto) ----------
   Dos bloques visuales: «Con la unidad base» (10, fuente = CAN del pod) y
   «Desbloqueas con el pack OBD» (3, fuente = adaptador BLE). El bloque OBD va
   teñido de ámbar para que a un vistazo se vea qué esferas trae cada nivel. */
.section-esferas {
  background:
    radial-gradient(70% 55% at 82% 0%, rgba(255, 174, 66, 0.06), transparent 70%),
    var(--bg);
  border-block: 1px solid var(--line-soft);
}
.esferas-split { display: grid; gap: 1.4rem; margin-top: 2rem; }
@media (min-width: 900px) {
  .esferas-split { grid-template-columns: 1.75fr 1fr; align-items: start; }
}
.tier-block {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.3rem 1.3rem 1.4rem;
}
.tier-block-obd {
  background:
    radial-gradient(95% 75% at 50% 0%, rgba(255, 174, 66, 0.09), transparent 72%),
    var(--surface);
  border-color: rgba(255, 174, 66, 0.38);
}
.tier-head {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.5rem 0.7rem; margin-bottom: 0.25rem;
}
.tier-head h3 { margin: 0; font-size: 1.05rem; }
.tier-count {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; border-radius: 999px; padding: 0.2rem 0.6rem;
}
.tier-count-base { background: rgba(61, 220, 132, 0.13); color: var(--green); }
.tier-count-obd { background: var(--amber); color: #17110a; }
.tier-source { color: var(--text-faint); font-size: 0.85rem; margin: 0 0 1.1rem; }
.tier-source strong { color: var(--text-muted); font-weight: 600; }
.esfera-grid { display: grid; gap: 0.7rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .esfera-grid-base { grid-template-columns: 1fr 1fr; } }
.esfera {
  display: flex; gap: 0.7rem; align-items: flex-start;
  background: var(--bg); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 0.6rem 0.72rem;
}
.tier-block-obd .esfera { background: rgba(10, 10, 14, 0.55); }
.esfera-ic {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: #050508; border: 1px solid var(--line);
  display: grid; place-items: center; overflow: hidden;
}
.esfera-ic img { width: 100%; height: 100%; border-radius: 50%; }
.esfera-ic svg { width: 22px; height: 22px; color: var(--amber); }
.esfera-txt { min-width: 0; }
.esfera h4 { margin: 0.1rem 0 0.2rem; font-size: 0.9rem; line-height: 1.25; }
.esfera p { margin: 0; color: var(--text-muted); font-size: 0.8rem; line-height: 1.4; }
.esfera-obd-note {
  display: block; margin-top: 0.3rem;
  color: var(--amber); font-size: 0.75rem; line-height: 1.35;
}
.esferas-foot { color: var(--text-faint); font-size: 0.82rem; margin-top: 1.5rem; }

/* ---------- precio: UN producto + el adaptador que compra el cliente ----------
   Ya no hay dos niveles comprables (decisión 2026-08-16: el adaptador OBD deja
   de venderse). La rejilla sigue siendo de dos columnas, pero la segunda NO es
   una tarifa: es una ficha informativa del adaptador que el cliente compra por
   su cuenta. Se distingue con borde discontinuo, sin realce ámbar y sin botón. */
.tiers { display: grid; gap: 1.2rem; }
@media (min-width: 820px) { .tiers { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.tier {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.7rem 1.5rem 1.6rem;
  display: flex; flex-direction: column; position: relative;
}
.tier-featured {
  border-color: rgba(255, 174, 66, 0.42);
  background:
    radial-gradient(85% 60% at 50% 0%, rgba(255, 174, 66, 0.1), transparent 72%),
    var(--surface);
}
.tier-flag {
  position: absolute; top: -0.7rem; right: 1.3rem;
  background: var(--amber); color: #17110a;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: 999px; padding: 0.25rem 0.7rem;
}
.tier-name {
  font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text); margin: 0 0 0.7rem; font-weight: 400;
}
.tier-name .dial { font-weight: 750; color: var(--amber); }
.tier-price { font-size: clamp(2rem, 5.5vw, 2.7rem); font-weight: 750; margin: 0; letter-spacing: -0.02em; }
.tier-price .from {
  font-size: 0.32em; font-weight: 500; color: var(--text-muted);
  vertical-align: 0.55em; margin-right: 0.3em;
}
.tier-price-sub { color: var(--text-muted); font-size: 0.9rem; margin: 0.25rem 0 0.5rem; }
.tier-early { color: var(--text); font-size: 0.9rem; margin: 0; }
.tier-early .badge-early { margin-right: 0.4rem; }
.tier-chip {
  align-self: flex-start; margin: 1rem 0 1.1rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; border-radius: 999px; padding: 0.3rem 0.75rem;
}
.tier-chip-base { background: rgba(61, 220, 132, 0.13); color: var(--green); }
.tier-chip-obd { background: var(--amber-soft); color: var(--amber); }
.tier-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.tier-list li {
  position: relative; padding-left: 1.5rem; margin-bottom: 0.55rem;
  color: var(--text-muted); font-size: 0.9rem; line-height: 1.45;
}
.tier-list li strong { color: var(--text); }
.tier-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 700; }
.tier-list li.li-plus::before { content: "+"; color: var(--amber); font-size: 1.1em; line-height: 1.2; }
.tier .btn { margin-top: auto; }

/* varios chips en fila (11 esferas del pod + 3 que abre el adaptador) */
.tier-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1rem 0 1.1rem; }
.tier-chips .tier-chip { margin: 0; }

/* ficha del adaptador: NO es una tarifa, y se nota */
.tier-byo { background: var(--bg-alt); border-style: dashed; }
.tier-flag-alt {
  background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--line); top: -0.8rem;
}
.tier-byo-price {
  font-size: clamp(1.5rem, 3.6vw, 1.95rem); font-weight: 750;
  margin: 0; letter-spacing: -0.02em;
}
.tier-byo-price .byo-unit {
  font-size: 0.46em; font-weight: 500; color: var(--text-muted);
  letter-spacing: 0; white-space: nowrap;
}
.tier-byo .tier-list { margin-bottom: 1.1rem; }
.tier-byo-why {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 0.85rem 1rem; margin: 0 0 0.9rem;
  color: var(--text-muted); font-size: 0.86rem; line-height: 1.5;
}
.tier-byo-why strong { color: var(--text); }
.tier-byo-where {
  color: var(--text-faint); font-size: 0.82rem; line-height: 1.5;
  margin: auto 0 0;
}
.tier-byo-where strong { color: var(--text-muted); }

/* =========================================================================
   LA APP — flow visual (vista previa navegable de la app móvil) · sección #app
   Carrusel scroll-snap (sin JS, sin imágenes externas). Reutiliza el vocabulario
   de componentes de docs/mockups/app.html (phone/screen/tiles/rows/…) COPIADO
   aquí y ENCERRADO bajo `.appflow` para no colisionar con .card/.badge/.btn de la
   landing (el selector .appflow .x gana en especificidad y va al final del CSS).
   Los tokens del mockup que la landing nombra distinto (--muted, --faint) o no
   define (--red-soft, --green-soft) se aliasan en `.appflow`.
   ========================================================================= */
.section-app {
  background:
    radial-gradient(65% 55% at 15% 0%, rgba(255, 174, 66, 0.06), transparent 70%),
    var(--bg-alt);
  border-block: 1px solid var(--line-soft);
}
.appflow-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.3rem 0.85rem; margin: 0 0 1.8rem;
}
.appflow-tag .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 8px rgba(255, 174, 66, 0.6);
}

/* ---- carrusel ---- */
.appflow {
  --muted: var(--text-muted);
  --faint: var(--text-faint);
  --red-soft: rgba(224, 52, 44, 0.14);
  --green-soft: rgba(61, 220, 132, 0.13);
}
.appflow-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 286px;
  gap: 1.4rem; overflow-x: auto; padding: 0.4rem 0.2rem 1.3rem;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--line) transparent;
  overscroll-behavior-x: contain;
}
.appflow-strip::-webkit-scrollbar { height: 8px; }
.appflow-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.appflow-strip::-webkit-scrollbar-track { background: transparent; }
.appscreen {
  margin: 0; scroll-snap-align: center;
  display: flex; flex-direction: column; gap: 0.8rem;
}
.appscreen figcaption {
  font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; padding: 0 0.2rem;
}
.appscreen figcaption b { color: var(--text); display: block; font-weight: 650; margin-bottom: 0.15rem; }

/* ---- el teléfono (scoped) ---- */
.appflow .phone {
  width: 100%; margin: 0;
  background: #050508; border: 1px solid #2b2b36; border-radius: 34px; padding: 9px;
  box-shadow: 0 0 0 1px #000 inset, 0 14px 34px rgba(0, 0, 0, 0.5);
}
.appflow .screen {
  border-radius: 26px; overflow: hidden; background: var(--bg);
  min-height: 600px; display: flex; flex-direction: column;
  font-size: 12px; line-height: 1.4; position: relative;
}
.appflow .screen * { font-variant-numeric: tabular-nums; }
.appflow .sb { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 2px; font-size: 11px; font-weight: 650; }
.appflow .sb .glyphs { display: flex; align-items: center; gap: 4px; color: var(--text); }
.appflow .notch { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 74px; height: 19px; border-radius: 12px; background: #050508; }
.appflow .nav { padding: 6px 16px 8px; }
.appflow .nav .back { color: var(--amber); font-size: 12px; display: flex; align-items: center; gap: 3px; margin-bottom: 2px; }
.appflow .nav h3 { margin: 0; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
.appflow .nav .sub { color: var(--muted); font-size: 11px; margin-top: 2px; }
.appflow .body { flex: 1; padding: 6px 14px 14px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.appflow .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); background: var(--bg-alt); padding: 6px 2px 9px; }
.appflow .tab { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--faint); font-size: 9.5px; }
.appflow .tab svg { width: 19px; height: 19px; }
.appflow .tab.on { color: var(--amber); }

/* ---- piezas de UI (scoped) ---- */
.appflow .card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 11px; }
.appflow .card.flat { background: var(--bg-alt); }
.appflow .card h4 { margin: 0 0 6px; font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.appflow .card.alert { background: var(--red-soft); border-color: rgba(224, 52, 44, 0.4); }
.appflow .card.ok { background: var(--green-soft); border-color: rgba(61, 220, 132, 0.32); }
.appflow .card.amber { background: var(--amber-soft); border-color: rgba(255, 174, 66, 0.35); }
.appflow .statusline { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.appflow .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--green); box-shadow: none; }
.appflow .dot.grey { background: #4e4e5c; }
.appflow .dot.amber { background: var(--amber); }
.appflow .dot.red { background: var(--red); }
.appflow .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.appflow .tile { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 11px; padding: 8px 9px; }
.appflow .tile .lbl { font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
.appflow .tile .val { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-top: 1px; }
.appflow .tile .val small { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.appflow .tile .meta { font-size: 9px; color: var(--faint); margin-top: 2px; display: flex; gap: 5px; align-items: center; }
.appflow .tile.warn .val { color: var(--amber); }
.appflow .tile.stale .val { color: #5c5c68; }
.appflow .src { border: 1px solid var(--line); border-radius: 4px; padding: 0 3px; font-size: 8px; letter-spacing: 0.04em; color: var(--muted); }
.appflow .rows { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
.appflow .row { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-top: 1px solid var(--line-soft); }
.appflow .row:first-child { border-top: 0; }
.appflow .row .grow { flex: 1; min-width: 0; }
.appflow .row .t { font-size: 12px; font-weight: 560; }
.appflow .row .s { font-size: 10px; color: var(--muted); margin-top: 1px; }
.appflow .row .v { font-size: 12px; color: var(--muted); white-space: nowrap; }
.appflow .chev { color: var(--faint); font-size: 13px; }
.appflow .handle { color: #42424f; letter-spacing: 1px; font-size: 11px; line-height: 1; }
.appflow .sw { width: 32px; height: 19px; border-radius: 11px; background: #2d2d38; flex: none; position: relative; }
.appflow .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #8a8a95; }
.appflow .sw.on { background: var(--amber); }
.appflow .sw.on::after { left: 15px; background: #100d06; }
.appflow .btn { display: block; text-align: center; border-radius: 10px; padding: 9px; font-size: 12.5px; font-weight: 650; border: 1px solid transparent; cursor: default; box-shadow: none; }
.appflow .btn:hover { transform: none; box-shadow: none; }
.appflow .btn.primary { background: var(--amber); color: #14100a; }
.appflow .btn.ghost { background: transparent; border-color: var(--line); color: var(--text); }
.appflow .btn.danger { background: var(--red); color: #fff; }
.appflow .btn.disabled { background: var(--surface-2); color: #5c5c68; border-color: var(--line); }
.appflow .badge { font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 5px; padding: 1px 5px; font-weight: 700; }
.appflow .badge.amber { background: var(--amber-soft); color: var(--amber); }
.appflow .badge.red { background: var(--red-soft); color: #ff6a63; }
.appflow .badge.green { background: var(--green-soft); color: var(--green); }
.appflow .badge.grey { background: var(--surface-2); color: var(--muted); }
.appflow .meter { height: 6px; border-radius: 3px; background: #22222b; overflow: hidden; }
.appflow .meter > i { display: block; height: 100%; border-radius: 3px; background: var(--amber); }
.appflow .meter.red > i { background: var(--red); }
.appflow .meter.green > i { background: var(--green); }
.appflow .hint { font-size: 10px; color: var(--faint); line-height: 1.45; }
.appflow .hint.amber { color: var(--amber); }
.appflow .empty { text-align: center; padding: 2px 8px; }
.appflow .empty .t { font-size: 14px; font-weight: 650; margin-top: 8px; }
.appflow .empty .s { font-size: 11px; color: var(--muted); margin-top: 4px; }
.appflow .seg { display: flex; background: var(--surface-2); border-radius: 9px; padding: 2px; font-size: 11px; }
.appflow .seg > span { flex: 1; text-align: center; padding: 4px 0; border-radius: 7px; color: var(--muted); }
.appflow .seg > span.on { background: #33333f; color: var(--text); font-weight: 650; }
.appflow .kv { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; padding: 3px 0; }
.appflow .kv .k { color: var(--muted); }
.appflow .bandrow { display: grid; grid-template-columns: 64px 1fr 20px; align-items: center; gap: 7px; font-size: 10px; padding: 2.5px 0; }
.appflow .bandrow .rng { color: var(--muted); }
.appflow .bandrow .n { text-align: right; font-weight: 700; }
.appflow .bandrow .n.zero { color: #4e4e5c; font-weight: 500; }
.appflow .bandbar { height: 7px; border-radius: 3px; background: #1d1d25; }
.appflow .bandbar > i { display: block; height: 100%; border-radius: 3px; background: var(--amber); }
/* slider de brillo (propio del flow) */
.appflow .af-slider { position: relative; height: 6px; border-radius: 3px; background: #22222b; margin: 12px 6px 14px; }
.appflow .af-slider > i { display: block; height: 100%; border-radius: 3px; background: var(--amber); }
.appflow .af-slider .knob { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--amber); border: 2px solid #14100a; transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }

/* ---- capturas reales de la app (bloque .appshots de la sección #app) ----
   Las DOS apps ya corren contra el coche virtual de desarrollo: aquí van
   capturas PNG reales (assets/app/*.png, copiadas de apps/{ios,android}/
   capturas/) dentro del mismo marco de teléfono que el flow de mockups, con un
   chip verde «captura real» para distinguirlas de las recreaciones. */
.appshots-title { margin-top: 2.6rem; }
.appshots {
  display: grid; gap: 1.6rem; margin-top: 1.4rem;
  grid-template-columns: 1fr; justify-items: center;
}
@media (min-width: 640px) {
  .appshots { grid-template-columns: repeat(2, minmax(0, 286px)); justify-content: start; justify-items: stretch; }
}
.appshot { margin: 0; width: min(286px, 100%); display: flex; flex-direction: column; gap: 0.7rem; }
.appshot-chip {
  align-self: flex-start;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: 999px; padding: 0.22rem 0.65rem;
  background: rgba(61, 220, 132, 0.12); color: var(--green);
}
.appshot .phone-shot {
  background: #050508; border: 1px solid #2b2b36; border-radius: 34px; padding: 9px;
  box-shadow: 0 0 0 1px #000 inset, 0 14px 34px rgba(0, 0, 0, 0.5);
}
.appshot .phone-shot img { width: 100%; height: auto; border-radius: 26px; display: block; }
.appshot figcaption { font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; padding: 0 0.2rem; }
.appshot figcaption b { color: var(--text); display: block; font-weight: 650; margin-bottom: 0.15rem; }

/* ---- badges de tienda (propios, sin logos oficiales protegidos) ---- */
.store-badges { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.9rem 0 0.9rem; }
.store-badge {
  display: inline-flex; align-items: center; gap: 0.7rem;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 0.6rem 1.15rem 0.6rem 0.9rem; background: var(--surface);
  color: var(--text); min-width: 190px;
}
.store-badge .store-ic { width: 26px; height: 26px; flex: none; color: var(--text); }
.store-badge-txt { display: flex; flex-direction: column; line-height: 1.15; }
.store-badge-txt small { font-size: 0.68rem; color: var(--text-muted); letter-spacing: 0.02em; }
.store-badge-txt b { font-size: 1.02rem; font-weight: 650; letter-spacing: 0.01em; }

/* ---------- sección de demo en vídeo ----------
   El vídeo lo generan las herramientas de tools/demo_video/ a partir del
   framebuffer REAL del firmware (ver monta.sh); aquí solo se enmarca. Sin JS
   y sin CDNs, como el resto de la web: <video> nativo con sus dos fuentes
   (WebM primero, MP4 de reserva) y el póster ya generado. */
.section-demo {
  background:
    radial-gradient(58% 60% at 50% 0%, rgba(255, 174, 66, 0.06), transparent 70%),
    var(--bg-alt);
  border-block: 1px solid var(--line-soft);
}
.demo-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: 999px; padding: 0.26rem 0.7rem;
  background: rgba(61, 220, 132, 0.12); color: var(--green);
  margin: 0 0 0.9rem;
}
.demo-player {
  margin: 1.6rem 0 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #000; overflow: hidden;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55), 0 0 60px rgba(255, 174, 66, 0.06);
}
.demo-player video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  background: #000;
}
/* Reserva para navegadores que no reproduzcan ninguna de las dos fuentes:
   el póster como imagen normal, con el enlace de descarga debajo. */
.demo-fallback { padding: 1.2rem; color: var(--text-muted); font-size: 0.9rem; }
.demo-fallback img { width: 100%; height: auto; border-radius: 8px; margin-bottom: 0.8rem; }

/* ---- el pod del mock-up del hero, en movimiento ----
   El <video> ocupa exactamente el sitio del <img class="pod-face"> (mismas
   coordenadas y mismo círculo); el <img> se queda como reserva y es el que se
   ve si el visitante pide menos movimiento. */
video.pod-face { height: auto; object-fit: cover; background: #050508; }
.pod-face-still { display: none; }
@media (prefers-reduced-motion: reduce) {
  video.pod-face { display: none; }
  .pod-face-still { display: block; }
}

/* =========================================================================
   APARTADO DE DOCUMENTACIÓN (manuales)
   Páginas generadas por tools/manuales_web/build.mjs a partir de
   manuales/*.md. Reutilizan .legal, .callout, .table-scroll y .card: aquí solo
   está lo que un manual largo necesita y una página legal no tenía —el índice
   lateral pegajoso, las capturas redondas del pod y los huecos de foto.
   Sin tema propio: mismos tokens de :root, mismo modo oscuro, mismos cortes.
   ========================================================================= */

.manual-kicker { font-size: 0.85rem; margin-bottom: 0.6rem; }
.manual-lead { color: var(--text-muted); max-width: 46em; margin-bottom: 0.4rem; }

/* Índice + texto. En móvil, uno encima de otro; a partir de 1000 px (el mismo
   corte que usa la cabecera para enseñar su menú) el índice se va al lado y se
   queda pegado al hacer scroll. */
.manual-layout { display: grid; gap: 1.5rem; align-items: start; padding-top: 1.5rem; }
@media (min-width: 1000px) {
  .manual-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem; }
}

.manual-toc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.2rem;
  /* En móvil el índice va ARRIBA, y un manual de 15 secciones lo convertiría
     en una pantalla entera de enlaces antes de la primera frase: se le pone
     tope y se desplaza dentro de su tarjeta. */
  max-height: 45vh; overflow-y: auto;
}
@media (min-width: 1000px) {
  /* 4,5rem = alto de la cabecera pegajosa + aire */
  .manual-toc {
    position: sticky; top: 4.5rem;
    max-height: calc(100vh - 6.5rem); overflow-y: auto;
  }
}
.manual-toc-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.7rem;
}
/* minmax(0, 1fr) y no un `auto` a secas: una rejilla de columna automática se
   dimensiona a max-content, o sea al renglón MÁS LARGO SIN PARTIR, y los
   títulos largos («Paso 5 — Conectar y probar ANTES de cerrar») se salían de
   la tarjeta. Medido en 375 px. */
.manual-toc ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem;
}
.manual-toc a { color: var(--text-muted); font-size: 0.88rem; }
.manual-toc a:hover { color: var(--amber); text-decoration: none; }
/* Los sub-apartados (las 15 caras, las pestañas de la app) solo en pantalla
   ancha: en un móvil convierten el índice en un muro que hay que sortear.
   Doble clase a propósito: `.manual-toc-sub` a secas pierde por especificidad
   contra `.manual-toc ul`, y el índice se enseñaba entero en el móvil. */
.manual-toc .manual-toc-sub { display: none; }
@media (min-width: 1000px) {
  .manual-toc .manual-toc-sub {
    display: grid; margin: 0.45rem 0 0.2rem; padding-left: 0.8rem;
    border-left: 1px solid var(--line);
  }
  .manual-toc-sub a { font-size: 0.82rem; color: var(--text-faint); }
}
.manual-toc-foot {
  margin: 1rem 0 0; padding-top: 0.8rem; font-size: 0.85rem;
  border-top: 1px solid var(--line-soft);
}

/* El cuerpo hereda .legal (tipografía, tablas, código, listas). */
.manual-body { padding-top: 0; max-width: 46rem; }
.manual-body > :first-child { margin-top: 0; }
/* Los anclajes del índice no deben quedar bajo la cabecera pegajosa. */
.manual-body :is(h2, h3) { scroll-margin-top: 5rem; }
.manual-body h3 {
  margin-top: 2rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft); color: var(--text);
}
.manual-body h2 + h3 { border-top: 0; padding-top: 0; margin-top: 1.2rem; }
.manual-body .table-scroll table { min-width: 480px; }
/* Lista de comprobación («la comprobación final»): la casilla ya hace de
   viñeta. Si el navegador no entiende :has(), lo peor que pasa es que salga
   también el punto de la lista. */
.manual-body input[type="checkbox"] { margin-right: 0.5rem; accent-color: var(--amber); }
.manual-body ul:has(> li > input[type="checkbox"]) { list-style: none; padding-left: 0; }
.manual-rule { border: 0; border-top: 1px solid var(--line-soft); margin: 2rem 0; }
.manual-foot {
  margin-top: 2.5rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
  color: var(--text-faint); font-size: 0.88rem;
}

/* Capturas: son renders del firmware sobre un panel REDONDO, así que se
   presentan redondas, igual que en la sección «Las caras» de la portada. */
.manual-shot { margin: 1.5rem 0; text-align: center; }
.manual-shot img {
  width: min(280px, 80%); margin-inline: auto;
  border-radius: 50%; background: #050508; border: 1px solid var(--line);
}

/* Hueco de foto declarado: ni imagen rota ni desaparición en silencio. Se ve
   que falta, se lee qué irá ahí, y no grita más que el texto del manual. */
.shot-todo {
  margin: 1.5rem 0; padding: 1rem 1.2rem;
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--bg-alt);
}
.shot-todo p { margin: 0; color: var(--text-faint); font-size: 0.86rem; }
.shot-todo-tag {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.4rem !important;
}

/* Índice del apartado */
.doc-cards { margin-bottom: 2rem; }
@media (min-width: 760px) { .doc-cards { grid-template-columns: repeat(2, 1fr); } }
.doc-card h3 { margin: 0.7rem 0 0.6rem; font-size: 1.15rem; }
.doc-card h3 a { color: var(--text); }
.doc-card h3 a:hover { color: var(--amber); text-decoration: none; }
.doc-card-meta { margin-top: 0.8rem; font-size: 0.88rem; }
.doc-card .btn { margin-top: 0.4rem; }