/* MADRE · landing
   Sistema visual: MADRE UX (public/styles.css del repositorio del producto).
   Composición: la disciplina de una página de producto contemporánea —
   héroe centrado, escala tipográfica amplia en seminegrita, superficies de
   radio grande sin bordes, alternancia tonal entre secciones, una idea por
   bloque— aplicada con los colores, la letra mono y los rótulos de MADRE.

   Dos tokens del producto no pasan WCAG 2.2 AA y aquí se corrigen:
     --text-3  #626a5f → #7c8479   (4.55:1 sobre la tarjeta, el peor fondo)
     CONTROL   blanco sobre rojo 3.45:1 → tinta oscura 5.42:1
   Fuera, a conciencia: resplandores, text-shadow, gradientes decorativos y
   rejillas de tarjetas iguales. La única translucidez es la de la barra,
   y tiene función: deja leer el contenido que pasa por debajo. */

:root {
  color-scheme: dark;

  --bg: #050605;
  --band: #0c0e0c;
  --card: #161a16;
  --card-2: #1f241f;
  --ink-well: #050605;
  --line: rgba(238, 241, 234, .08);
  --line-2: rgba(238, 241, 234, .14);
  --hair: #262b26;                        /* filete opaco entre celdas de una tarjeta */
  --text: #eef1ea;
  --text-2: #9aa197;
  --text-3: #7c8479;

  --phosphor: #9bff66;
  --phosphor-ink: #0a1405;
  --brew: #28fe14;

  --mode-0: #8d978c;
  --mode-1: var(--phosphor);
  --mode-2: #ffb000;
  --mode-3: #ff2a1f;
  --mode-4: #8fd3ff;
  --mode-ink: #050605;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --r-sm: 6px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --pill: 999px;

  --wrap: 78.75rem;                       /* 1260 px */
  --col: 52.5rem;                         /* 840 px: columna de lectura */
  --gut: clamp(1.25rem, 6.25vw, 5.625rem);
  --sec: clamp(5rem, 2.5rem + 8vw, 10rem);
  --head-gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);

  --t-hero: clamp(2.5rem, 1rem + 5.2vw, 5.25rem);
  --t-h2: clamp(2.125rem, 1.2rem + 2.9vw, 3.5rem);
  --t-close: clamp(2.375rem, 1.2rem + 3.8vw, 4.25rem);
  --t-stmt: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  --t-lede: clamp(1.1875rem, 1.05rem + .45vw, 1.3125rem);
  --t-h3: clamp(1.1875rem, 1.05rem + .45vw, 1.3125rem);
  --t-body: 1.0625rem;
  --t-cap: .875rem;

  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 4.25rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--t-body)/1.47 var(--font);
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--text); text-decoration-color: var(--line-2); text-underline-offset: .22em; }
a:hover { text-decoration-color: currentColor; }
code, .mono { font-family: var(--mono); font-size: .9em; letter-spacing: 0; }
p code, li code, h3 code {
  padding: .1em .4em;
  border-radius: var(--r-sm);
  background: var(--card-2);
  color: var(--text);
}
strong { font-weight: 600; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--gut); top: -3rem; z-index: 100;
  padding: .6rem 1rem; border-radius: var(--pill);
  background: var(--phosphor); color: var(--phosphor-ink); font-weight: 600;
}
.skip:focus { top: .6rem; }

.wrap { width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto; }

/* ---------- rótulo: la firma de MADRE UX ---------- */
.label {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0;
  font: 600 .75rem/1.3 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--phosphor); flex: none; }

h1, h2, h3 { margin: 0; font-weight: 600; color: var(--text); text-wrap: balance; }
h1 { font-size: var(--t-hero); line-height: 1.05; letter-spacing: -.028em; }
h2 { font-size: var(--t-h2); line-height: 1.07; letter-spacing: -.022em; }
h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.012em; }

.lede { margin: 0; font-size: var(--t-lede); line-height: 1.4; color: var(--text-2); text-wrap: pretty; }
.lede strong { color: var(--text); }
.muted { color: var(--text-2); }

/* Enlace de acción, con su flecha. La flecha no se lee en voz alta. */
.more {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--phosphor); text-decoration: none;
}
.more::after {
  content: "›";
  content: "›" / "";
  margin-left: .3em; font-size: 1.2em; line-height: 1;
  transition: transform .25s var(--ease);
}
.more:hover { text-decoration: underline; text-decoration-color: currentColor; }
.more:hover::after { transform: translateX(2px); }
/* Política de enlaces: › se queda en MADRE; ↗ sale a GitHub, npm u otro sitio. */
.more[href^="http"]::after { content: "↗"; content: "↗" / ""; font-size: .9em; }
.more[href^="http"]:hover::after { transform: translate(2px, -2px); }
.pill[href^="http"]::after { content: "↗"; content: "↗" / ""; margin-left: .4em; font-size: .9em; color: var(--text-2); }

.pill {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem;
  padding: 0 1.4rem; border-radius: var(--pill);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text); font-weight: 500; text-decoration: none;
  transition: background-color .2s var(--ease);
}
.pill:hover { background: var(--card-2); }

/* ---------- barra ---------- */
.bar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 6, 5, .8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .bar { background: var(--bg); } }
@media (prefers-reduced-transparency: reduce) { .bar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }

.bar__in { display: flex; align-items: center; gap: 1.75rem; min-height: 3.25rem; }
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 700 .8125rem/1 var(--mono); letter-spacing: .2em;
  text-decoration: none; color: var(--text);
  /* WCAG 2.2 · 2.5.8: el enlace medía 97×14 px. */
  min-height: 2.75rem;
}
.brand__pulse { width: 2.6rem; height: auto; flex: none; color: var(--phosphor); }
.bar__nav { display: flex; gap: 1.75rem; margin-left: auto; }
.bar__nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-size: .8125rem; letter-spacing: -.005em; color: var(--text-2); text-decoration: none;
  transition: color .2s var(--ease);
}
.bar__nav a:hover { color: var(--text); }
.foot a[aria-current="page"] { color: var(--text); }
.bar__lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem;
  font: 600 .75rem/1 var(--mono); letter-spacing: .1em; color: var(--text-2); text-decoration: none;
}
.bar__lang:hover { color: var(--text); }
.bar__cta {
  display: inline-flex; align-items: center; min-height: 1.875rem;
  padding: 0 .95rem; border-radius: var(--pill);
  background: var(--phosphor); color: var(--phosphor-ink);
  font-size: .8125rem; font-weight: 600; letter-spacing: -.005em; text-decoration: none;
}
.bar__cta:hover { background: #b3ff8a; }
@media (max-width: 63.99rem) {
  .bar__nav { display: none; }
  .bar__in { gap: .5rem; }
}

/* ---------- menú (debajo de 1024 px) ----------
   Un <details>: se abre y se cierra sin JavaScript. app.js lo cierra con
   Escape, al elegir un enlace y al tocar fuera. */
.menu { order: 2; margin-left: auto; }
.menu + .bar__lang { order: 3; }
.bar__cta { order: 4; }
@media (min-width: 64rem) { .menu { display: none; } .menu + .bar__lang { margin-left: 0; } }
.menu__btn {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: 50%; cursor: pointer; list-style: none; color: var(--text);
}
.menu__btn::-webkit-details-marker { display: none; }
.menu__btn:hover { background: var(--card); }
.menu__bars, .menu__bars::before { display: block; width: 1.1rem; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .3s var(--ease); }
.menu__bars { position: relative; transform: translateY(-3.5px); }
.menu__bars::before { content: ""; position: absolute; left: 0; top: 7px; }
.menu[open] .menu__bars { transform: translateY(0) rotate(45deg); }
.menu[open] .menu__bars::before { top: 0; transform: rotate(-90deg); }
.menu__panel {
  /* Opaco y de alto completo: un desenfoque anidado dentro de la barra, que
     ya tiene el suyo, no ve la página y dejaba leer el texto de detrás. */
  position: absolute; left: 0; right: 0; top: 100%;
  height: calc(100svh - 3.3rem); overflow-y: auto; overscroll-behavior: contain;
  padding: 1.5rem var(--gut) 2.5rem;
  background: var(--bg);
}
.menu__panel ul { margin: 0; padding: 0; list-style: none; }
.menu__main a {
  display: block; padding: .45rem 0;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.75rem); font-weight: 600; letter-spacing: -.02em;
  color: var(--text); text-decoration: none;
}
.menu__h { margin: 1.75rem 0 .5rem; font: 600 .75rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.menu__docs a { display: block; padding: .5rem 0; font-size: 1.0625rem; color: var(--text-2); text-decoration: none; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--phosphor); }

/* ---------- héroe ---------- */
.hero { display: grid; padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0 clamp(3.5rem, 2rem + 4vw, 5.5rem); text-align: center; }
@media (min-width: 48rem) {
  .hero { min-height: min(calc(100svh - 3.3rem), 60rem); align-content: center; }
}
.hero__in { position: relative; z-index: 1; display: grid; justify-items: center; }

/* ---------- video de entrada ----------
   Solo existe si hay archivo (build.mjs). app.js lo reproduce una vez, si no
   hay «reducir movimiento» ni ahorro de datos; si no, muestra el último
   fotograma quieto. El velo garantiza el contraste del titular sobre
   cualquier fotograma y funde el borde inferior con la página. */
.hero { position: relative; isolation: isolate; overflow: hidden; --intro: .1s; }
/* Con video, el texto entra con el latido de la línea (≈1.4 s). */
.hero--video { --intro: 1.4s; }
.hero__media { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__video, .hero__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.6s var(--ease);
}
.hero__media.is-playing .hero__video { opacity: 1; }
/* Tras el latido, el video da un paso atrás: la constelación queda de fondo
   y no compite con las letras. El fotograma fijo ya aparece así. */
.hero__media.is-playing.is-dim .hero__video, .hero__media.is-still .hero__poster, .no-js .hero__poster { opacity: .5; }

/* Al terminar, el último fotograma sigue latiendo: sube, crece apenas y
   vuelve, una vez cada 3,6 s. Solo opacidad y escala, que el navegador anima
   fuera del hilo principal. El botón lo detiene (WCAG 2.2.2), y se congela
   cuando el héroe sale de pantalla. Con «reducir movimiento», no late. */
@keyframes hero-pulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  18% { opacity: .8; transform: scale(1.012); }
  55% { opacity: .56; transform: scale(1.003); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__media.is-pulsing .hero__video { animation: hero-pulse 3.6s cubic-bezier(.45, 0, .55, 1) infinite; }
}
.hero__media.is-held .hero__video, .hero__media.is-away .hero__video { animation-play-state: paused; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 64% 56% at 50% 46%, rgba(5, 6, 5, .8), rgba(5, 6, 5, .45) 62%, rgba(5, 6, 5, 0)),
    linear-gradient(to bottom, rgba(5, 6, 5, 0) 55%, var(--bg));
}
.hero__toggle {
  position: absolute; top: 1.5rem; right: var(--gut); z-index: 2;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(31, 36, 31, .82); color: var(--text);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.hero__toggle[hidden] { display: none; }
.hero__toggle svg { width: 1rem; height: 1rem; }
.hero__icon-play, .hero__toggle[data-state="paused"] .hero__icon-pause { display: none; }
.hero__toggle[data-state="paused"] .hero__icon-play { display: block; }

/* Entrada del héroe: cada pieza sube y aparece en orden. Sin video empieza
   casi de inmediato (el titular es el LCP); con video, tras el primer
   compás. Con «reducir movimiento» no hay animación. */
@keyframes hero-in { from { opacity: 0; transform: translateY(1.25rem); } }
@media (prefers-reduced-motion: no-preference) {
  .hero__in > * { animation: hero-in 1.1s var(--ease-out) both; animation-delay: var(--intro); }
  .hero__in > :nth-child(2) { animation-delay: calc(var(--intro) + .08s); }
  .hero__in > :nth-child(3) { animation-delay: calc(var(--intro) + .16s); }
  .hero__in > :nth-child(4) { animation-delay: calc(var(--intro) + .24s); }
  .hero__in > :nth-child(5) { animation-delay: calc(var(--intro) + .3s); }
  .hero__in > :nth-child(6) { animation-delay: calc(var(--intro) + .36s); }
  .hero__in > :nth-child(7) { animation-delay: calc(var(--intro) + .44s); }
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.5rem;
  font: 600 .8125rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);
}
/* El titular solo puede partir entre frases: nunca dentro de «Una memoria». */
.hero h1 > span { display: block; }
.h1-b > span { white-space: nowrap; }
.hero__lede {
  max-width: 38em; margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  font-size: var(--t-lede); line-height: 1.42; color: var(--text-2); text-wrap: pretty;
}
.hero .cmd { margin-top: clamp(2rem, 4vw, 2.75rem); }
.hero__after { margin: 1rem 0 0; font-size: var(--t-cap); color: var(--text-2); }
.hero__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2rem; margin: .5rem 0 0; font-size: var(--t-body); }

/* Cuatro datos, como la franja de especificaciones de una ficha de producto. */
.specs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem;
  width: min(100%, 60rem); margin: clamp(2.75rem, 5vw, 4.5rem) 0 0; padding: clamp(1.75rem, 3vw, 2.25rem) 0 0;
  list-style: none; border-top: 1px solid var(--line);
}
.specs li { display: grid; gap: .3rem; align-content: start; justify-items: center; }
.specs__icon { width: 2.25rem; height: 2.25rem; margin-bottom: .6rem; color: var(--text); }
.specs strong { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.012em; color: var(--text); }
.specs span { font-size: var(--t-cap); line-height: 1.4; color: var(--text-2); }
@media (min-width: 48rem) { .specs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- comando ---------- */
.cmd {
  display: flex; align-items: center; gap: .9rem;
  width: fit-content; max-width: 100%;
  padding: .4rem .4rem .4rem 1.35rem;
  border-radius: var(--pill);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: left;
}
.cmd__prompt { font: 600 1rem/1 var(--mono); color: var(--brew); user-select: none; }
.cmd__text {
  font-size: clamp(.95rem, .85rem + .4vw, 1.125rem); color: var(--text);
  white-space: nowrap; overflow-x: auto; scrollbar-width: none;
  padding: 0; background: none;
}
.cmd__text::-webkit-scrollbar { display: none; }
.cmd__copy {
  flex: none; min-height: 2.75rem; padding: 0 1.3rem;
  border: 0; border-radius: var(--pill);
  background: var(--phosphor); color: var(--phosphor-ink);
  font: 600 .9375rem/1 var(--font); letter-spacing: -.01em; cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.cmd__copy:hover { background: #b3ff8a; }
.cmd__copy:active { transform: scale(.97); }
.cmd__copy[data-done] { background: var(--text); }
.cmd--center { margin-inline: auto; }

/* En pantalla estrecha el comando no cabe con el botón al lado y se leía
   truncado («npx @jossuealcala/madre»). El botón pasa debajo, a lo ancho. */
@media (max-width: 30rem) {
  .cmd { flex-wrap: wrap; width: 100%; padding: 1rem 1rem .6rem; row-gap: .85rem; border-radius: var(--r-lg); }
  .cmd__text { flex: 1 1 0; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .cmd__copy { flex: 1 0 100%; }
}

/* ---------- secciones ---------- */
.section { padding: var(--sec) 0; }
.band { background: var(--band); }
.head { display: grid; gap: 1rem; max-width: var(--col); margin-bottom: var(--head-gap); }
.head .lede { margin-top: .5rem; }
.head--center { justify-items: center; margin-inline: auto; text-align: center; }

.relay { margin: 0; font: 600 .75rem/1.4 var(--mono); letter-spacing: .12em; color: var(--text-2); text-align: center; }
.relay b { font-weight: 700; color: var(--phosphor); }
.relay b + b { color: #ff9f7a; }
.src { display: block; margin-top: .5rem; font: 500 .75rem/1.45 var(--mono); letter-spacing: .02em; color: var(--text-3); }
.cap { max-width: var(--col); margin-top: 1.5rem; color: var(--text-2); text-wrap: pretty; }
.cap strong { color: var(--text); }

/* ---------- la escena: una captura grande sobre su tarjeta ---------- */
.stage { margin: 0; }
.stage__card {
  display: grid; justify-items: center; gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 3.5rem) 0;
  border-radius: var(--r-xl); background: var(--card); overflow: hidden;
}
.stage__media { width: min(100%, 44rem); }
/* La sala nace del borde inferior de la tarjeta. */
.stage__media img { border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 0 0 1px var(--line-2); background: var(--bg); }
.stage--proof { margin-top: var(--head-gap); }
.stage--proof .stage__card { padding: clamp(.75rem, 2.5vw, 2.5rem); }
.stage--proof img { border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); }

/* ---------- instalar ---------- */
.section--install { padding-top: clamp(1.5rem, 1rem + 4vw, 6rem); }
.os { display: grid; justify-items: center; }
.os__tabs {
  display: inline-flex; gap: .25rem; padding: .25rem;
  border-radius: var(--pill); background: var(--card);
}
.os__tabs [role="tab"] {
  min-height: 2.5rem; min-width: 6.5rem; padding: 0 1.25rem;
  border: 0; border-radius: var(--pill);
  background: transparent; color: var(--text-2);
  font: 500 .9375rem/1 var(--font); letter-spacing: -.01em; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.os__tabs [role="tab"][aria-selected="true"] { background: var(--text); color: var(--bg); }
.os__tabs [role="tab"]:not([aria-selected="true"]):hover { color: var(--text); }
.os__panel { width: min(100%, 61.25rem); margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.os__panel[hidden] { display: none; }
/* Sin JavaScript, los dos paneles se ven uno tras otro. */
.no-js .os__tabs { display: none; }
.no-js .os__panel + .os__panel { margin-top: 3rem; }

/* El número de un paso: instalar y reportar usan el mismo. */
.num {
  display: inline-grid; place-items: center; flex: none;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: rgba(155, 255, 102, .12); color: var(--phosphor);
  font: 600 .8125rem/1 var(--mono); letter-spacing: 0;
}
.num--opt { background: var(--card-2); color: var(--text-2); font: 400 1.125rem/1 var(--font); }

/* Cada paso en tres niveles: número y título, qué hacer, y el comando. */
.steps {
  display: grid; gap: 1px; margin: 0; padding: 0; list-style: none;
  border-radius: var(--r-xl); overflow: hidden; background: var(--hair);
}
@media (min-width: 60rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.steps li { display: flex; flex-direction: column; gap: .8rem; min-width: 0; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--card); }
.step__head { display: flex; align-items: center; gap: .75rem; }
.steps h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.012em; }
.steps p { margin: 0; color: var(--text-2); max-width: 60ch; }
.steps .step__note { font-size: var(--t-cap); }

/* Un bloque de código con su botón de copiar al lado. */
.snippet {
  display: flex; align-items: center; gap: .25rem; min-width: 0;
  padding-right: .4rem; border-radius: var(--r); background: var(--ink-well);
}
.snippet .code { flex: 1 1 auto; min-width: 0; margin: 0; background: none; }
.snippet__copy {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-width: 2.5rem; min-height: 2.25rem; padding: 0 .85rem; border: 0; border-radius: var(--pill);
  background: rgba(238, 241, 234, .08); color: var(--text);
  font: 500 .8125rem/1 var(--font); cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.snippet__copy:hover { background: rgba(238, 241, 234, .15); }
.snippet__copy:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 2px; }
.snippet__copy[data-done] { background: var(--phosphor); color: var(--ink-well); }
.snippet__icon { width: 1rem; height: 1rem; }

.code {
  margin: .75rem 0 0; padding: .9rem 1.1rem;
  border-radius: var(--r); background: var(--ink-well); overflow-x: auto;
  font: 500 .875rem/1.6 var(--mono); letter-spacing: 0; color: var(--text);
}
/* El código en línea lleva chip; dentro de un bloque no, o cada línea
   aparece subrayada por su propio recuadro. */
.code code { font-size: inherit; padding: 0; background: none; border-radius: 0; }

/* Después de instalar: dónde se abre y cómo revisar el equipo. */
.after-install { display: grid; gap: 1rem; width: min(100%, 61.25rem); margin: 1rem auto 0; }
@media (min-width: 48rem) { .after-install { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.after-install__item {
  display: flex; flex-direction: column; gap: .6rem; min-width: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px var(--line-2);
}
.after-install__icon { width: 1.5rem; height: 1.5rem; color: var(--phosphor); }
.after-install h3 { font-size: var(--t-body); line-height: 1.35; letter-spacing: -.01em; }
.after-install p { margin: 0; color: var(--text-2); }
.after-install .snippet { margin-top: .2rem; background: var(--card); }

/* ---------- cómo funciona ---------- */
.flow { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.flow li {
  display: grid; align-content: start; gap: .75rem;
  padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 2.5vw, 2rem) clamp(2rem, 3vw, 2.5rem);
  border-radius: var(--r-xl); background: var(--card);
}
.flow__n { font: 600 .8125rem/1 var(--mono); letter-spacing: .1em; color: var(--phosphor); }
.flow h3 { margin-top: 1.25rem; }
.flow p { margin: 0; color: var(--text-2); }

/* Una frase grande: el remate de la sección. */
.statement {
  max-width: 26em; margin: clamp(4rem, 3rem + 5vw, 8rem) 0 0;
  font-size: var(--t-stmt); font-weight: 600; line-height: 1.22; letter-spacing: -.018em;
  color: var(--text-2); text-wrap: pretty;
}
.statement em { font-style: normal; color: var(--phosphor); }
.statement strong { color: var(--text); }

/* ---------- partido ---------- */
.split { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
@media (min-width: 60rem) { .split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.split__copy { display: grid; gap: 1rem; justify-items: start; }
.split__copy h2 { margin-bottom: .5rem; }
.split__copy p { margin: 0; color: var(--text-2); max-width: 44ch; }
.split__lede { font-size: var(--t-lede); line-height: 1.4; }

.frame { margin: 0; padding: clamp(.75rem, 2.5vw, 2rem); border-radius: var(--r-xl); background: var(--card); }
.frame img { border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); }
.frame .src { margin-top: 1rem; }

.try { display: grid; gap: .85rem; margin: .5rem 0 0; padding: 0; list-style: none; counter-reset: t; }
.try li { counter-increment: t; position: relative; padding-left: 2.25rem; color: var(--text-2); max-width: 46ch; }
.try li::before {
  content: counter(t); position: absolute; left: 0; top: .1em;
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--card-2); font: 600 .75rem/1 var(--mono); color: var(--text);
}

/* ---------- modos ---------- */
.modes-card {
  display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center;
  padding: clamp(1.25rem, 4vw, 3.5rem);
  border-radius: var(--r-xl); background: var(--card);
}
@media (min-width: 60rem) { .modes-card { grid-template-columns: minmax(0, 1fr) 18rem; } }
.modes { display: grid; margin: 0; padding: 0; list-style: none; }
.mode { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.35rem 0; border-top: 1px solid var(--line); }
.mode:first-child { border-top: 0; padding-top: 0; }
.mode:last-child { padding-bottom: 0; }
.mode__id {
  display: grid; place-items: center; align-self: start;
  height: 1.75rem; border-radius: var(--r-sm);
  background: var(--m); color: var(--mode-ink);
  font: 700 .78rem/1 var(--mono);
}
.mode h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font: 700 .875rem/1.3 var(--mono); letter-spacing: .1em; color: var(--m); }
.mode p { margin: .35rem 0 0; color: var(--text-2); }
.mode__tag {
  padding: .2rem .55rem; border-radius: var(--pill); background: var(--card-2);
  font: 500 .6875rem/1.2 var(--font); letter-spacing: 0; color: var(--text-2);
}
.modes-card__shot { margin: 0; justify-self: center; max-width: 18rem; }
.modes-card__shot img { border-radius: var(--r); box-shadow: 0 0 0 1px var(--line-2); }

/* Dos tarjetas lado a lado: la anulación y el UNDO. Las filas se alinean
   entre las dos (subgrid), aunque las capturas tengan otra proporción. */
.duo { display: grid; gap: clamp(3rem, 6vw, 1.5rem); margin-top: clamp(3.5rem, 6vw, 6rem); }
.duo__item { display: grid; gap: 1.75rem; align-content: start; }
@media (min-width: 60rem) {
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
  @supports (grid-template-rows: subgrid) {
    .duo__item { grid-row: span 2; grid-template-rows: subgrid; gap: 0; }
    .duo__copy { padding-top: 1.75rem; }
  }
}
.duo__media {
  display: grid; align-content: center; margin: 0;
  padding: clamp(1rem, 3vw, 2.5rem);
  border-radius: var(--r-xl); background: var(--card);
}
.duo__media img { border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); }
.duo__copy { display: grid; gap: .85rem; align-content: start; max-width: 36rem; }
.duo__copy h3 { font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); letter-spacing: -.018em; }
.duo__copy p { margin: 0; color: var(--text-2); }
.duo__note { font-size: var(--t-cap); }

/* ---------- lo que no es ---------- */
.nots { display: grid; gap: clamp(2.25rem, 4vw, 3.25rem) 2.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .nots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .nots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nots li { display: grid; gap: 1rem; align-content: start; }
.nots__icon { width: 2.25rem; height: 2.25rem; color: var(--text); }
.nots p { margin: 0; color: var(--text-2); max-width: 34ch; }
.nots strong { color: var(--text); }

/* ---------- vitrina: una laptop, seis pantallas ----------
   La laptop está dibujada aquí, con CSS: no es un render ni un recurso de
   ningún fabricante. Todo se mide en cqw (ancho del propio dispositivo), así
   que bisel, cámara, bisagra y base escalan juntos en cualquier ancho. */
.showcase { display: grid; justify-items: center; }
.showcase__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: 48rem; }
.showcase__tabs [role="tab"] {
  min-height: 2.5rem; padding: 0 1.15rem;
  border: 0; border-radius: var(--pill);
  background: var(--card); color: var(--text-2);
  font: 500 .9375rem/1 var(--font); letter-spacing: -.01em; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.showcase__tabs [role="tab"][aria-selected="true"] { background: var(--text); color: var(--bg); }
.showcase__tabs [role="tab"]:not([aria-selected="true"]):hover { background: var(--card-2); color: var(--text); }

.showcase__stage { display: grid; width: 100%; margin-top: clamp(2.25rem, 4vw, 3.75rem); }
.showcase__panel {
  grid-area: 1 / 1; display: grid; justify-items: center; margin: 0;
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
}
/* El panel inactivo conserva su celda: la altura no salta al cambiar de
   pantalla y la captura se funde en vez de parpadear. */
.showcase__panel[hidden] { display: grid; visibility: hidden; opacity: 0; }
.showcase__figure { display: grid; justify-items: center; width: 100%; margin: 0; }
.showcase__panel .cap { max-width: 44rem; margin-top: clamp(1.75rem, 3vw, 2.75rem); text-align: center; }
.no-js .showcase__tabs { display: none; }
.no-js .showcase__stage { gap: 4.5rem; }
.no-js .showcase__panel { grid-area: auto; }

.laptop { container-type: inline-size; width: min(100%, 62rem); }
.laptop__lid {
  position: relative; margin-inline: 5.5cqw;
  padding: 1.35cqw 1.35cqw 1.9cqw;
  border-radius: 2.4cqw 2.4cqw 0 0;
  background: #08090a;
  box-shadow: 0 0 0 .14cqw #2e3136, 0 0 0 .32cqw #111214, inset 0 0 0 .12cqw rgba(255, 255, 255, .05);
}
.laptop__lid::before {                      /* la cámara */
  content: ""; position: absolute; top: .5cqw; left: 50%;
  width: .5cqw; height: .5cqw; border-radius: 50%;
  background: #1b1e23; box-shadow: 0 0 0 .08cqw #2b2f36;
  transform: translateX(-50%);
}
.laptop__screen { aspect-ratio: 16 / 10; overflow: hidden; border-radius: .5cqw .5cqw 0 0; background: var(--bg); }
.laptop__screen picture, .laptop__screen img { width: 100%; height: 100%; }
.laptop__screen img { object-fit: cover; object-position: top center; }
.laptop__base {
  position: relative; height: 2.1cqw;
  border-radius: 0 0 1.6cqw 1.6cqw / 0 0 1.2cqw 1.2cqw;
  background: linear-gradient(to bottom, #6b6f76 0, #484c52 12%, #303338 55%, #1b1c1f 100%);
  box-shadow: 0 2.2cqw 3.2cqw -1.4cqw rgba(0, 0, 0, .85);
}
.laptop__base::before {                     /* la muesca para abrir la tapa */
  content: ""; position: absolute; top: 0; left: 50%;
  width: 15cqw; height: .75cqw; border-radius: 0 0 1cqw 1cqw;
  background: linear-gradient(to bottom, #232528, #3a3d43);
  transform: translateX(-50%);
}
.laptop__base::after {                      /* el filo de la bisagra */
  content: ""; position: absolute; inset: 0 0 auto; height: .12cqw;
  background: rgba(255, 255, 255, .28);
}

/* ---------- novedades de la versión ----------
   Tres destacadas en tarjeta, con el ícono en fósforo (lo nuevo), y seis en
   rejilla con el mismo trazo que «Lo que no es». */
.news__links { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin: 0; }
.news__featured { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 60rem) { .news__featured { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.news__featured li {
  display: grid; align-content: start; gap: .9rem;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.6vw, 2.25rem) clamp(2rem, 3.2vw, 2.75rem);
  border-radius: var(--r-xl); background: var(--card);
}
.news__featured .news__icon { width: 2.5rem; height: 2.5rem; margin-bottom: .6rem; color: var(--phosphor); }
.news__featured h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem); line-height: 1.18; letter-spacing: -.016em; }
.news__featured p { margin: 0; color: var(--text-2); }
.news__grid { display: grid; gap: clamp(2.25rem, 4vw, 3.25rem) 2.5rem; margin: clamp(3.5rem, 6vw, 5rem) 0 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .news__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.news__grid li { display: grid; gap: 1rem; align-content: start; }
.news__grid .news__icon { width: 2.25rem; height: 2.25rem; color: var(--text); }
.news__grid p { margin: 0; color: var(--text-2); max-width: 34ch; }
.news__grid strong { color: var(--text); }
.news__more {
  max-width: var(--col); margin: clamp(3.5rem, 6vw, 5rem) 0 0; padding-top: 2rem;
  border-top: 1px solid var(--line); color: var(--text-2); text-wrap: pretty;
}
.news__more .more { min-height: 0; }

/* ---------- tarjeta centrada: compatibilidad y documentación ---------- */
.panel {
  padding: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(1.25rem, 5vw, 5rem);
  border-radius: var(--r-xl); background: var(--card);
}
.panel--center { display: grid; justify-items: center; text-align: center; }
.panel--center h2 { max-width: 18ch; margin-top: 1rem; }
.panel__lede { max-width: 36em; margin: 1.25rem 0 0; font-size: var(--t-lede); line-height: 1.4; color: var(--text-2); }
.panel .pill { margin-top: 2rem; }
.panel__icon { width: 3.5rem; height: auto; margin-bottom: 1.5rem; color: var(--phosphor); }

.matrix { width: min(100%, 28rem); margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; border-collapse: collapse; font-size: var(--t-body); }
.matrix caption { padding-bottom: 1rem; font: 600 .75rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.matrix th, .matrix td { padding: 1rem .75rem; border-bottom: 1px solid var(--line); text-align: center; }
.matrix tbody tr:last-child > * { border-bottom: 0; }
.matrix thead th { font: 600 .8125rem/1.2 var(--mono); color: var(--text-2); }
.matrix tbody th { text-align: left; font-weight: 600; color: var(--text); }
.ok { color: var(--phosphor); font-weight: 700; }

.panel__cols {
  display: grid; gap: 2rem; width: min(100%, 64rem); margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--line);
  text-align: left; font-size: var(--t-cap); color: var(--text-2);
}
@media (min-width: 52rem) { .panel__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.panel__cols p { margin: 0; }
.panel__cols strong { color: var(--text); }
.panel__cols h3 { font-size: var(--t-cap); line-height: 1.4; letter-spacing: 0; }
.req { display: grid; gap: .35rem; margin: .6rem 0 0; padding-left: 1.1rem; }

/* ---------- preguntas ---------- */
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 4.25rem; padding: 1.1rem 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); letter-spacing: -.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border-radius: 50%; background: var(--card-2);
  font: 400 1.1rem/1 var(--font); color: var(--text);
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.75rem; color: var(--text-2); max-width: 72ch; }

/* ---------- documentación ---------- */
.docs {
  display: grid; gap: 0 2.5rem; width: min(100%, 60rem); margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0;
  list-style: none; text-align: left;
}
@media (min-width: 40rem) { .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .docs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.docs a { display: grid; gap: .2rem; height: 100%; padding: 1.1rem 0; border-top: 1px solid var(--line); text-decoration: none; }
.docs span { font-weight: 600; color: var(--text); }
.docs span::after { content: " ↗"; content: " ↗" / ""; color: var(--text-3); }
.docs .is-page span::after { content: " ›"; content: " ›" / ""; }
.docs a:hover span { color: var(--phosphor); }
.docs small { font-size: var(--t-cap); color: var(--text-2); }

/* ---------- cierre ---------- */
.close { padding: clamp(6rem, 3rem + 10vw, 12rem) 0; text-align: center; }
.close h2 { max-width: 15ch; margin-inline: auto; font-size: var(--t-close); line-height: 1.05; letter-spacing: -.026em; }
.close .cmd { margin-top: clamp(2.25rem, 4vw, 3rem); }
.close__alt { margin: .75rem 0 0; }

/* ---------- pie ---------- */
.foot { padding: 1.5rem 0 2.5rem; background: var(--band); font-size: .75rem; line-height: 1.34; color: var(--text-2); }
.foot a { color: var(--text-2); text-decoration: none; }
.foot a:hover { color: var(--text); text-decoration: underline; }
.foot__note { margin: 0; padding: 1rem 0 1.25rem; border-bottom: 1px solid var(--line); }
.foot__dir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; padding: 1.5rem 0 1.75rem; border-bottom: 1px solid var(--line); }
@media (min-width: 48rem) { .foot__dir { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .foot__dir { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.foot__h { margin: 0 0 .5rem; font-size: .75rem; line-height: 1.34; letter-spacing: 0; color: var(--text); }
.foot__dir ul { margin: 0; padding: 0; list-style: none; }
.foot__dir a { display: inline-block; padding-block: .25rem; min-height: 1.5rem; }
.foot__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; padding-top: 1.1rem; }
.foot__legal p { margin: 0; }
.foot__lang { display: inline-flex; align-items: center; min-height: 1.5rem; }

/* ---------- aviso ---------- */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 90;
  margin: 0; padding: .75rem 1.25rem; border-radius: var(--pill);
  background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text); font-size: .875rem;
  transform: translate(-50%, 150%); opacity: 0; pointer-events: none;
  transition: transform .35s var(--ease-out), opacity .35s var(--ease-out);
}
.toast[data-show] { transform: translate(-50%, 0); opacity: 1; }

/* ---------- aparición al llegar ----------
   Solo con JavaScript, solo sin «reducir movimiento», y solo debajo del
   héroe: el titular y el comando nunca esperan (LCP). app.js pone la clase
   reveal-on cuando el observador existe; sin él, todo está visible. */
.reveal-on [data-reveal] { transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal-on [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(2rem); }
.reveal-on .flow li:nth-child(2), .reveal-on .nots li:nth-child(2), .reveal-on .duo__item:nth-child(2) { transition-delay: .08s; }
.reveal-on .flow li:nth-child(3), .reveal-on .nots li:nth-child(3) { transition-delay: .16s; }
.reveal-on .flow li:nth-child(4), .reveal-on .nots li:nth-child(4) { transition-delay: .24s; }
.reveal-on .nots li:nth-child(5) { transition-delay: .32s; }
.reveal-on .nots li:nth-child(6) { transition-delay: .4s; }
.reveal-on .news__featured li:nth-child(2), .reveal-on .news__grid li:nth-child(2) { transition-delay: .08s; }
.reveal-on .news__featured li:nth-child(3), .reveal-on .news__grid li:nth-child(3) { transition-delay: .16s; }
.reveal-on .news__grid li:nth-child(5) { transition-delay: .08s; }
.reveal-on .news__grid li:nth-child(6) { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Los elementos de rejilla tienen min-width:auto: un <pre> con una línea
   larga los ensancha más allá de su pista, y el overflow:hidden del
   contenedor (que existe por el radio) recorta el texto en vez de dejar
   que el bloque de código haga scroll. min-width:0 lo corrige. */
.steps > li, .modes > li, .docs > li, .flow > li, .nots > li, .specs > li, .news__featured > li, .news__grid > li,
.pipeline > li, .machine > *, .machine__flow > li, .doc-split > *, .anatomy > li, .release > *,
.split > *, .modes-card > *, .duo > *, .duo__item > *, .showcase__stage > *, .stage__card > *, .panel > * { min-width: 0; }

/* El color de cada modo por clase, no por atributo style: la CSP de
   producción (style-src 'self') bloquea los estilos en línea. */
.mode--0 { --m: var(--mode-0); }
.mode--1 { --m: var(--mode-1); }
.mode--2 { --m: var(--mode-2); }
.mode--3 { --m: var(--mode-3); }
.mode--4 { --m: var(--mode-4); }

/* En móvil el comando del paso 3 se veía como «npx @jossuealcala/madre star»:
   el bloque hacía scroll con la barra invisible y parecía cortado. Primero se
   gana espacio para que la línea principal quepa en teléfonos de 360 px o más. */
@media (max-width: 30rem) {
  .steps li { padding: 1.35rem 1rem; }
  .code { padding: .8rem .7rem; font-size: .84rem; }
  /* En teléfonos el botón de copiar baja debajo del código: así el comando
     principal cabe entero en 360 px o más, como antes. */
  .snippet { flex-wrap: wrap; padding: 0 .4rem .4rem 0; }
  .snippet .code { flex-basis: 100%; }
  .snippet__copy { margin-left: auto; min-height: 2.25rem; }
  .stage__card { padding-inline: .75rem; }
}

/* Donde aun así no cabe (curl, o 320 px), el borde derecho se desvanece para
   decir «hay más» en vez de parecer truncado. Tiene función: desaparece al
   llegar al final del renglón. La clase la pone app.js al medir. */
.code.is-scrollable:not(.is-end) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.75rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.75rem), transparent);
}

/* En teléfonos el héroe se compacta: el criterio de cierre exige ver las
   pestañas de macOS y Linux dentro de dos pantallas, también a 320×640. */
@media (max-width: 30rem) {
  .hero { padding: 2.25rem 0 2rem; }
  .hero__eyebrow { margin-bottom: 1rem; font-size: .75rem; }
  .hero__lede { margin-top: 1rem; font-size: 1.0625rem; }
  .hero .cmd { margin-top: 1.5rem; }
  .hero__after { margin-top: .75rem; }
  .hero__links { flex-direction: column; align-items: center; margin-top: .25rem; }
  .hero__links .more { min-height: 2.25rem; }
  .specs { gap: 1rem .75rem; margin-top: 1.5rem; padding-top: 1.25rem; }
  .specs strong { font-size: 1.0625rem; }
  .specs span { font-size: .8125rem; }
  .specs__icon { width: 1.75rem; height: 1.75rem; margin-bottom: .3rem; }
  .hero__toggle { top: .5rem; right: .75rem; width: 2.25rem; height: 2.25rem; }
  .showcase__tabs { gap: .4rem; }
  .showcase__tabs [role="tab"] { min-height: 2.25rem; padding: 0 .85rem; font-size: .875rem; }
  .section--install { padding-top: .75rem; }
  .section--install .head { gap: .6rem; margin-bottom: 1.75rem; }
  .section--install .lede { margin-top: .25rem; font-size: 1.0625rem; }
}

/* Teléfonos de 360 px o menos: la franja de datos gana los íconos sin
   empujar las pestañas de instalación fuera de las dos pantallas. */
@media (max-width: 22.5rem) {
  .hero { padding-top: 1.75rem; }
  .hero__eyebrow { font-size: .6875rem; letter-spacing: .1em; }
  .hero__toggle { right: .4rem; }
  .hero__lede { font-size: 1rem; }
  .specs { gap: .75rem; margin-top: 1.25rem; padding-top: 1rem; }
  .specs__icon { width: 1.5rem; height: 1.5rem; margin-bottom: .2rem; }
  .specs strong { font-size: 1rem; }
}


/* ======================================================================
   Páginas de documentación: cambios, SDK, seguridad, por dentro.
   Los mismos tokens y superficies que la portada.
   ====================================================================== */

.page-hero { padding: clamp(4rem, 2.5rem + 6vw, 8rem) 0 clamp(3rem, 2rem + 4vw, 5.5rem); text-align: center; }
.page-hero__in { display: grid; justify-items: center; }
.page-hero h1 { max-width: 16ch; margin-top: 1.25rem; font-size: var(--t-close); line-height: 1.05; letter-spacing: -.026em; }
.page-hero__lede { max-width: 38em; margin: 1.5rem 0 0; font-size: var(--t-lede); line-height: 1.42; color: var(--text-2); text-wrap: pretty; }
.page-hero__links { margin: .75rem 0 0; }
.page-hero__meta { margin: .25rem 0 0; font: 500 .75rem/1.5 var(--mono); letter-spacing: .02em; color: var(--text-3); }
.page-hero__meta code { padding: 0; background: none; font-size: inherit; color: var(--text-2); }
.page-art { width: min(100% - var(--gut) * 2, var(--wrap)); margin: clamp(2.5rem, 5vw, 4rem) auto 0; }
.page-art img { width: 100%; border-radius: var(--r-xl); }

.crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; padding: 0; list-style: none; font: 600 .75rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.crumbs li + li::before { content: "›"; content: "›" / ""; margin-right: .5rem; color: var(--text-3); }
.crumbs a { display: inline-flex; align-items: center; min-height: 1.5rem; color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current="page"] { color: var(--text); }

.doc .section { padding: clamp(4.5rem, 2.5rem + 6vw, 8rem) 0; }
.doc .section > .wrap > * + * { margin-top: clamp(2.5rem, 5vw, 4rem); }
.doc .section > .wrap > .head + * { margin-top: 0; }

/* rejillas de íconos: el mismo trazo que «Lo que no es» */
@media (min-width: 72rem) { .doc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.doc-grid p { max-width: 36ch; }

/* lista con remate: término a la izquierda, explicación a la derecha */
.doc-list { display: grid; margin: 0; border-top: 1px solid var(--line-2); }
.doc-list > div { display: grid; gap: .4rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 52rem) { .doc-list > div { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 2.5rem; } }
.doc-list dt { font-weight: 600; color: var(--text); }
.doc-list dd { margin: 0; color: var(--text-2); max-width: 64ch; }
.doc-list--mono dt { font: 700 .875rem/1.5 var(--mono); letter-spacing: .06em; color: var(--phosphor); }
.doc-list--stack > div { grid-template-columns: none; gap: .35rem; }
.doc-list--panel { width: min(100%, 52rem); margin-top: clamp(2rem, 4vw, 3rem); text-align: left; }

/* flujo de pasos: horizontal en escritorio, vertical en teléfono */
.pipeline { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 52rem) { .pipeline { grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); } }
.pipeline--4 { --steps: 4; }
.pipeline li {
  position: relative; display: grid; align-content: start; gap: .7rem;
  padding: clamp(1.6rem, 3vw, 2.1rem) clamp(1.4rem, 2.5vw, 1.9rem) clamp(1.8rem, 3vw, 2.3rem);
  border-radius: var(--r-xl); background: var(--card);
}
.band .pipeline li { background: var(--card); }
.pipeline__n { font: 600 .8125rem/1 var(--mono); letter-spacing: .1em; color: var(--phosphor); }
.pipeline h3 { margin-top: .9rem; }
.pipeline p { margin: 0; color: var(--text-2); }
/* la flecha entre un paso y el siguiente */
.pipeline li + li::before {
  content: ""; position: absolute; z-index: 1;
  left: 50%; top: -1rem; width: 1px; height: 1rem; background: var(--line-2);
}
@media (min-width: 52rem) {
  .pipeline li + li::before { left: -1rem; top: 50%; width: 1rem; height: 1px; }
}

/* el mapa de la arquitectura */
.machine { display: grid; gap: 1.25rem; }
@media (min-width: 64rem) { .machine { grid-template-columns: minmax(0, 1fr) 16rem; align-items: stretch; } }
.machine__box, .machine__out {
  position: relative; display: grid; gap: 1rem; align-content: start;
  padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r-xl);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.machine__out { box-shadow: inset 0 0 0 1px var(--line); align-content: center; }
.machine__label { margin: 0; font: 600 .75rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.machine__flow { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 52rem) { .machine__flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.node { position: relative; display: grid; gap: .35rem; align-content: start; padding: 1.25rem 1.3rem; border-radius: var(--r-lg); background: var(--card); }
.node strong { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.012em; color: var(--text); }
.node span { font-size: var(--t-cap); color: var(--text-2); }
.node--core { box-shadow: inset 0 0 0 1px rgba(155, 255, 102, .35); }
.node--core strong { color: var(--phosphor); font-family: var(--mono); letter-spacing: .14em; font-size: 1rem; }
.node--side { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.node--out { background: var(--card); }
.machine__flow li + li::before { content: ""; position: absolute; left: 50%; top: -1rem; width: 1px; height: 1rem; background: var(--line-2); }
@media (min-width: 52rem) { .machine__flow li + li::before { left: -1rem; top: 50%; width: 1rem; height: 1px; } }
.machine__out::before { content: ""; position: absolute; left: 50%; top: -1.25rem; width: 1px; height: 1.25rem; background: var(--line-2); }
@media (min-width: 64rem) { .machine__out::before { left: -1.25rem; top: 50%; width: 1.25rem; height: 1px; } }

/* capturas en las páginas */
.doc-fig { margin: 0; display: grid; justify-items: center; }
.doc-fig .cap { text-align: center; max-width: 44rem; }
.doc-fig--laptop .laptop { width: min(100%, 58rem); }
.doc-fig .frame { width: min(100%, 44rem); }
.doc-split { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .doc-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }

/* ventana de código */
.codewin { margin: 0; }
.codewin > .codewin__bar, .codewin > .codewin__code { width: min(100%, 52rem); margin-inline: auto; }
.codewin__bar {
  display: flex; align-items: center; gap: 1rem; padding: .6rem .6rem .6rem 1.25rem; min-height: 3.1rem;
  border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--card-2);
}
.codewin__dots, .codewin__dots::before, .codewin__dots::after { display: block; width: .6rem; height: .6rem; border-radius: 50%; background: #3a403a; }
.codewin__dots { position: relative; margin-right: 1.9rem; }
.codewin__dots::before, .codewin__dots::after { content: ""; position: absolute; top: 0; }
.codewin__dots::before { left: 1rem; }
.codewin__dots::after { left: 2rem; }
.codewin__file { font: 600 .8125rem/1 var(--mono); color: var(--text-2); }
.codewin__code { display: block; margin-top: 0 !important; padding: 1.5rem 1.6rem 1.75rem; border-radius: 0 0 var(--r-xl) var(--r-xl); background: var(--card); font-size: .875rem; line-height: 1.7; }
.codewin .cap { width: min(100%, 52rem); margin: 1.25rem auto 0; }
.tok-k { color: var(--mode-4); }
.tok-s { color: var(--phosphor); }
.tok-c { color: var(--text-3); }

/* la ficha de un módulo, piso por piso */
.anatomy { width: min(100%, 44rem); margin: 0 auto; padding: .5rem clamp(1.25rem, 3vw, 2rem); list-style: none; border-radius: var(--r-xl); background: var(--card); }
.anatomy li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; padding: 1.35rem 0; border-top: 1px dashed var(--line-2); }
.anatomy li:first-child { border-top: 0; }
.anatomy li:last-child div { padding: .9rem 1rem; border-radius: var(--r); background: var(--ink-well); }
.anatomy__n { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--card-2); font: 700 .875rem/1 var(--mono); color: var(--text); }
.anatomy h3 { font-size: var(--t-body); }
.anatomy p { margin: .25rem 0 0; color: var(--text-2); }

/* modos en la página de seguridad */
.doc-modes { margin-bottom: 0; }

/* avisos centrados: dicho claro, reportar */
.doc-callout h2 { max-width: 20ch; }
.doc-callout__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 2rem 0 0; }
.doc-callout__pills .pill { margin: 0; }
.doc-callout__motto { margin: clamp(2rem, 4vw, 3rem) 0 0; font: 600 .75rem/1.5 var(--mono); letter-spacing: .14em; color: var(--text-3); }

/* ---------- la lista de versiones ---------- */
.section--releases { padding-top: 0; }
.releases { display: grid; margin: 0; padding: 0; list-style: none; }
.release { display: grid; gap: 1.25rem; padding: clamp(3rem, 5vw, 4.5rem) 0; border-top: 1px solid var(--line); }
.release:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 60rem) {
  .release { grid-template-columns: 14rem minmax(0, 1fr); gap: 3rem; }
  .release__meta { position: sticky; top: 5rem; align-self: start; }
}
.release__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
@media (min-width: 60rem) { .release__meta { display: grid; gap: .5rem; justify-items: start; } }
.release__meta p { margin: 0; }
.release__v { font: 700 clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem)/1 var(--mono); letter-spacing: -.01em; color: var(--text); }
.release--latest .release__v { color: var(--phosphor); }
.release__tag { padding: .25rem .6rem; border-radius: var(--pill); background: var(--card-2); font: 600 .6875rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.release__tag--now { background: var(--phosphor); color: var(--phosphor-ink); }
.release__body { display: grid; gap: 1rem; min-width: 0; }
.release__body h2 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.1; }
.release__sum { margin: 0; max-width: 40em; font-size: var(--t-lede); line-height: 1.42; color: var(--text-2); }
.release__items { display: grid; gap: .9rem 2.5rem; margin: .75rem 0 0; padding: 0; list-style: none; }
@media (min-width: 52rem) { .release__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.release__items li { position: relative; padding-left: 1.1rem; color: var(--text-2); }
.release__items li::before { content: ""; position: absolute; left: 0; top: .62em; width: .35rem; height: .35rem; border-radius: 50%; background: var(--text-3); }
.release--latest .release__items li::before { background: var(--phosphor); }
.release__items strong { color: var(--text); }
.release__body .doc-fig { margin-top: 1.5rem; }
.release__src { margin: 0; }

/* ======================================================================
   Reportar: el formulario, el estado y el panel de administración.
   ====================================================================== */

/* ---------- campos ---------- */
.field { display: grid; gap: .45rem; }
.field > label, .field > span, .seg-field legend { font-weight: 600; color: var(--text); }
.field em, .report-form__more summary em { font-style: normal; font-weight: 400; color: var(--text-2); }
.field small { font-size: var(--t-cap); color: var(--text-2); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 3rem; padding: .75rem 1rem;
  border: 0; border-radius: var(--r); background: var(--ink-well);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font: 400 var(--t-body)/1.45 var(--font); color: var(--text);
  transition: box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field select { appearance: none; padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(-45deg, transparent 50%, var(--text-2) 50%); background-position: calc(100% - 1.25rem) 50%, calc(100% - .95rem) 50%; background-size: .35rem .35rem; background-repeat: no-repeat; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--phosphor); }
.field [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--mode-3); }
.field__error { color: #ff8a80 !important; font-weight: 500; }
.check { display: flex; align-items: flex-start; gap: .7rem; color: var(--text-2); cursor: pointer; }
.check input { flex: none; width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--phosphor); }
.check a { color: var(--text); }

/* control segmentado: tres opciones, una elegida */
.form-sec { display: grid; gap: 1.25rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.form-sec + .form-sec { padding-top: 1.75rem; border-top: 1px solid var(--line); }
/* La leyenda es el título de la sección: un nivel por encima de cada campo. */
/* float saca a la leyenda del borde del fieldset: así es un hijo más de la
   rejilla y el filete de arriba no la cruza. */
.form-sec__h {
  float: left; width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; padding: 0; margin: 0;
  font-size: var(--t-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.012em; color: var(--text);
}
.form-sec__h em { font: 400 var(--t-cap)/1.2 var(--font); letter-spacing: 0; color: var(--text-2); }
.form-sec__lede { margin: -.5rem 0 0; color: var(--text-2); }
.report-form .field > label.check { font-size: var(--t-body); font-weight: 400; color: var(--text-2); }
.report-form .field > label { font-size: var(--t-body); }
.seg { display: inline-flex; flex-wrap: wrap; gap: .25rem; width: fit-content; max-width: 100%; padding: .25rem; border-radius: var(--pill); background: var(--ink-well); box-shadow: inset 0 0 0 1px var(--line); }
.seg__opt { position: relative; }
.seg__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg__opt span { display: grid; place-items: center; min-height: 2.5rem; padding: 0 1.15rem; border-radius: var(--pill); color: var(--text-2); font-weight: 500; transition: background-color .25s var(--ease), color .25s var(--ease); }
.seg__opt input:checked + span { background: var(--text); color: var(--bg); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--phosphor); outline-offset: 2px; }

/* la trampa para programas: fuera de la vista y del teclado */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- la página de reportar ---------- */
.section--report { padding-top: 0; }
.report { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 64rem) { .report { grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); } }
.report-form, .report-done {
  display: grid; gap: 1.6rem;
  padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: var(--r-xl); background: var(--card);
}
.report-form[hidden], .report-done[hidden] { display: none; }
/* «Cómo reproducirlo» solo tiene sentido para un error */
.report-form:has([name="kind"][value="bug"]:not(:checked)) .report-form__steps { display: none; }
.report-form__more { border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line-2); padding: 0 1.1rem; }
.report-form__more summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: .7rem 0; cursor: pointer; font-weight: 600; list-style: none; }
.report-form__sum { display: grid; gap: .15rem; }
.report-form__sum small { font-size: var(--t-cap); font-weight: 400; color: var(--text-2); }
.report-form__more summary::-webkit-details-marker { display: none; }
.report-form__more summary::after { content: "+"; content: "+" / ""; font: 400 1.25rem/1 var(--font); color: var(--text-2); transition: transform .3s var(--ease); }
.report-form__more[open] summary::after { transform: rotate(45deg); }
.report-form__grid { display: grid; gap: 1.25rem; padding: .25rem 0 1.5rem; }
@media (min-width: 40rem) { .report-form__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.report-form__error { margin: 0; padding: .85rem 1rem; border-radius: var(--r); background: rgba(255, 42, 31, .12); color: #ffb4ab; font-weight: 500; }
.report-form__error[hidden] { display: none; }
.report-form__foot { display: grid; gap: 1rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.report-form__send { justify-self: start; min-width: 10rem; min-height: 3rem; font-size: 1rem; }
.report-form__fine { margin: 0; font-size: var(--t-cap); color: var(--text-2); }
.report-form__send:disabled { opacity: .6; cursor: progress; }

.report-done:focus { outline: none; }
.report-done h2 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); }
.report-done h2 span { font-family: var(--mono); color: var(--phosphor); letter-spacing: .02em; }
.report-done__keep { margin: 0; color: var(--text-2); }
.report-done__link { width: 100%; border-radius: var(--r-lg); padding: .5rem .5rem .5rem 1.1rem; }
.report-done__link .cmd__text { white-space: normal; overflow-wrap: anywhere; font-size: .875rem; }
.report-done p { margin: 0; }

.report__aside { display: grid; gap: 1.5rem; align-content: start; }
@media (min-width: 64rem) { .report__aside { position: sticky; top: 5rem; } }
.report__h { font-size: var(--t-h3); }
.report__steps { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.report__steps li { display: grid; gap: .35rem; padding-left: 2.75rem; position: relative; }
.report__steps .pipeline__n { position: absolute; left: 0; top: .2rem; }
.report__steps h3 { font-size: var(--t-body); }
.report__steps p { margin: 0; color: var(--text-2); }
.report__sec { display: grid; gap: .6rem; padding: 1.5rem; border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px var(--line-2); }
.report__sec h3 { font-size: var(--t-body); }
.report__sec p { margin: 0; color: var(--text-2); }

/* ---------- el estado ---------- */
.status-card { display: grid; gap: 1.25rem; width: min(100%, 44rem); margin-inline: auto; padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: var(--r-xl); background: var(--card); }
.status-card__msg { margin: 0; color: var(--text-2); }
.status-card__head { display: grid; gap: .6rem; }
.status-card__state { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); }
.status-card__meta { margin: 0; font-size: var(--t-cap); color: var(--text-2); }
.status-card__reply { padding: 1.25rem 1.4rem; border-radius: var(--r-lg); background: var(--ink-well); box-shadow: inset 0 0 0 1px rgba(155, 255, 102, .25); }
.status-card__reply h3 { font-size: var(--t-cap); font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--phosphor); }
.status-card__reply p { margin: .5rem 0 0; white-space: pre-wrap; }
.status-card__h { font-size: var(--t-body); margin-top: .5rem; }
.status-card__log { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line-2); }
.status-card__log li { display: grid; gap: .1rem; padding-left: 1.1rem; position: relative; color: var(--text-2); }
.status-card__log li::before { content: ""; position: absolute; left: -.3rem; top: .45rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--text-3); }
.status-card__log li:last-child::before { box-shadow: inset 0 0 0 2px var(--phosphor); }
.status-card__log time { font: 500 .75rem/1.4 var(--mono); color: var(--text-3); }
.status-more { margin: 2rem 0 0; text-align: center; }

/* ---------- el panel de administración ---------- */
.adm .bar { position: sticky; }
.adm-brand { margin-left: .75rem; padding-left: .75rem; border-left: 1px solid var(--line-2); font-family: var(--font); font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.adm-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; margin-left: auto; }
.adm-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .875rem; color: var(--text-2); text-decoration: none; }
.adm-nav a:hover { color: var(--text); }
.adm-nav form { margin: 0; }
.adm-nav .pill { min-height: 2.25rem; padding: 0 1rem; background: transparent; border: 0; cursor: pointer; font: inherit; font-size: .875rem; }
.adm-main { padding: clamp(2rem, 4vw, 3.5rem) 0 5rem; }
.adm-main h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); }
.adm-head { display: grid; gap: .5rem; margin-bottom: 1.75rem; }
.adm-counts { margin: 0; color: var(--text-2); }
.adm-login { width: min(100%, 26rem); margin: clamp(2rem, 8vw, 6rem) auto 0; display: grid; gap: 1.25rem; }
.adm-login .lede { margin: 0; }
.adm-form { display: grid; gap: 1.1rem; }
.adm-send { justify-self: start; min-height: 2.9rem; min-width: 8rem; }
.adm-hint { margin: 0; font-size: var(--t-cap); color: var(--text-2); }
.adm-alert { margin: 0 0 1.25rem; padding: .85rem 1rem; border-radius: var(--r); background: rgba(255, 42, 31, .12); color: #ffb4ab; }
.adm-alert--ok { background: rgba(155, 255, 102, .1); color: var(--phosphor); }
.adm-filters { display: grid; gap: 1rem; align-items: end; margin-bottom: 1.5rem; }
@media (min-width: 48rem) { .adm-filters { grid-template-columns: 12rem 10rem minmax(0, 1fr) auto; } }
.adm-filters .field > span { font-size: var(--t-cap); color: var(--text-2); font-weight: 500; }
.adm-filters .pill { min-height: 3rem; background: var(--card); border: 0; cursor: pointer; font: inherit; }
.adm-table { overflow-x: auto; border-radius: var(--r-xl); background: var(--card); }
.adm-table table { width: 100%; min-width: 52rem; border-collapse: collapse; font-size: .9375rem; }
.adm-table th, .adm-table td { padding: .9rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.adm-table thead th { font: 600 .75rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.adm-table tbody tr:last-child > * { border-bottom: 0; }
.adm-table tbody th a { font-family: var(--mono); font-weight: 600; color: var(--phosphor); text-decoration: none; }
.adm-msg { max-width: 28rem; color: var(--text-2); }
.adm-empty, .adm-pages { color: var(--text-2); }
.adm-pages { display: flex; gap: 1.5rem; align-items: center; margin-top: 1rem; }
.adm-chip { display: inline-block; padding: .2rem .6rem; border-radius: var(--pill); background: var(--card-2); font: 600 .75rem/1.4 var(--font); color: var(--text-2); white-space: nowrap; }
.adm-chip--status-new { background: var(--phosphor); color: var(--phosphor-ink); }
.adm-chip--status-reviewing { background: var(--mode-2); color: var(--mode-ink); }
.adm-chip--status-resolved { background: var(--mode-4); color: var(--mode-ink); }
.adm-chip--kind-bug { color: #ffb4ab; }
.adm-chip--kind-idea { color: var(--mode-4); }
.adm-chip--vis-public { color: var(--phosphor); }
.adm-grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 56rem) { .adm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adm-card { display: grid; gap: .9rem; align-content: start; padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--r-xl); background: var(--card); }
.adm-card h2 { font-size: var(--t-body); }
.adm-card .pill { justify-self: start; background: var(--card-2); border: 0; cursor: pointer; font: inherit; }
.adm-card .pill:disabled { opacity: .45; cursor: default; }
.adm-pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.adm-dl { display: grid; gap: .5rem; margin: 0; }
.adm-dl > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; }
.adm-dl dt { color: var(--text-2); }
.adm-dl dd { margin: 0; overflow-wrap: anywhere; }
.adm-log { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.adm-log li { display: grid; gap: .25rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.adm-log li:last-child { border-bottom: 0; padding-bottom: 0; }
.adm-log time { font: 500 .75rem/1.4 var(--mono); color: var(--text-3); }
.adm-log__detail { color: var(--text-2); }
.adm-back { min-height: 2.75rem; }
.adm-grid > *, .report > *, .report-form__grid > * { min-width: 0; }
.adm-back::after { content: none; }
.adm-back::before { content: "‹"; content: "‹" / ""; margin-right: .35em; font-size: 1.2em; line-height: 1; }
/* La casilla no es un campo de texto: sin el marco ni la altura de los demás. */
.field .check input { width: 1.25rem; height: 1.25rem; min-height: 0; padding: 0; border-radius: 4px; background: none; box-shadow: none; }
.report-form__more summary { justify-content: flex-start; gap: .4rem; }
.report-form__more summary::after { margin-left: auto; }
/* Un botón con aspecto de píldora no hereda el gris del navegador. */
button.pill { background: transparent; border: 0; font: inherit; color: var(--text); cursor: pointer; }
button.pill:hover { background: var(--card-2); }
/* En teléfono, el tipo es una rejilla de tres partes iguales: «Something else»
   partía la píldora en dos renglones. */
@media (max-width: 30rem) {
  .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-radius: var(--r-lg); }
  .seg__opt span { min-height: 2.75rem; padding: .35rem .4rem; border-radius: var(--r); font-size: .875rem; line-height: 1.2; text-align: center; }
}

/* ---------- la marca: el pulso con su punto ----------
   En la portada, la marca entra como el latido de MADRE: la línea se dibuja,
   el punto late dos veces y aparecen las letras. Dura menos de 2,5 s y no se
   repite; con «reducir movimiento» se ve completa desde el principio. */
.brand__word { display: inline-flex; }
.pulse__dot { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .brand--intro .pulse__line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pulse-draw .9s cubic-bezier(.5, 0, .2, 1) .15s forwards; }
  .brand--intro .pulse__dot { transform: scale(0); animation: pulse-dot 1.1s var(--ease-out) .95s forwards; }
  .brand--intro .brand__word span { opacity: 0; transform: translateY(.3em); animation: brand-letter .5s var(--ease-out) forwards; }
  .brand--intro .brand__word span:nth-child(1) { animation-delay: 1.2s; }
  .brand--intro .brand__word span:nth-child(2) { animation-delay: 1.27s; }
  .brand--intro .brand__word span:nth-child(3) { animation-delay: 1.34s; }
  .brand--intro .brand__word span:nth-child(4) { animation-delay: 1.41s; }
  .brand--intro .brand__word span:nth-child(5) { animation-delay: 1.48s; }
}
@keyframes pulse-draw { to { stroke-dashoffset: 0; } }
@keyframes pulse-dot {
  0% { transform: scale(0); }
  25% { transform: scale(1.45); }
  40% { transform: scale(1); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@keyframes brand-letter { to { opacity: 1; transform: none; } }

/* ---------- 404 ---------- */
.page-hero--404 { min-height: 70svh; }
.docs--404 { margin-inline: auto; }

/* ---------- el aviso de analítica ----------
   No tapa nada importante ni roba el foco; se va con cualquiera de las dos
   respuestas y vuelve desde «Preferencias de analítica», al pie. */
.consent {
  position: fixed; right: clamp(1rem, 3vw, 1.5rem); bottom: clamp(1rem, 3vw, 1.5rem); z-index: 60;
  display: grid; gap: 1rem; width: min(26rem, calc(100vw - 2rem));
  padding: 1.25rem; border-radius: var(--r-xl);
  background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 1.25rem 3rem rgba(0, 0, 0, .5);
}
.consent[hidden] { display: none; }
.consent p { margin: 0; font-size: var(--t-cap); color: var(--text-2); }
.consent a { color: var(--text); }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.consent__accept { min-height: 2.75rem; }
.consent__reject {
  min-height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 var(--t-cap)/1 var(--font); color: var(--text-2); text-decoration: underline; text-underline-offset: .2em;
}
.consent__reject:hover { color: var(--text); }
@media (max-width: 30rem) { .consent { left: 1rem; right: 1rem; width: auto; } }
.foot__prefs {
  min-height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--t-cap); color: var(--text-2); text-decoration: underline; text-underline-offset: .2em;
}
.foot__prefs[hidden] { display: none; }
.foot__prefs:hover { color: var(--text); }

/* lo que mandó MADRE al abrir el formulario */
.report-form__ctx {
  display: flex; align-items: flex-start; gap: .6rem; margin: 0; padding: .8rem 1rem;
  border-radius: var(--r); background: rgba(155, 255, 102, .08); color: var(--text-2); font-size: var(--t-cap);
}
.report-form__ctx[hidden] { display: none; }
.report-form__ctx strong { font: 500 .8125rem/1.5 var(--mono); color: var(--text); overflow-wrap: anywhere; }
.report-form__ctx-icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .05rem; color: var(--phosphor); }