/* Hoja de estilo de la web generada de LGM-OS (portada, novedades, instalación y docs).
 *
 * Es EL MISMO lenguaje que el portal (web/app/static/estilo.css): la píldora de cristal
 * flotante, el vidrio con canto degradado, las sombras en capas y un solo azul de acción.
 * Son dos hojas porque son dos cosas distintas —el portal lo sirve Jinja y esto lo genera
 * generar.py como HTML plano—, pero el visitante las ve como una sola web, así que las
 * recetas son las mismas traducidas a los tokens de aquí.
 *
 * Sin librerías a propósito: el panel usa Tailwind, pero una página estática que necesita
 * seis componentes no justifica arrastrar un compilador. Lo que sí se copia son los valores.
 *
 * Orden de la hoja: tokens → lienzo → cristal → barra → héroe → botones → componentes de
 * contenido → documentación → pie → movimiento → quietud. Nada de capas de «refinamiento»
 * que se pisan entre sí: cada cosa está una vez, en su sitio.
 */

/* ================================================================ tokens */

:root {
  color-scheme: light;

  /* Un solo azul para todo lo que es «acción»: botones, foco, enlaces y selección. */
  --acento: #2563eb;
  --acento-fuerte: #1d4ed8;
  /* El acento cuando es TEXTO. En claro coincide con el de relleno; en oscuro NO,
     y de ahí viene esta variable: un azul pensado para rellenar un botón es
     ilegible puesto sobre una tarjeta oscura. */
  --acento-texto: #1d4ed8;
  --acento-suave: rgba(37, 99, 235, 0.14);

  --texto: #1e293b;
  --texto-fuerte: #0f172a;
  --texto-suave: #475569;
  --texto-tenue: #64748b;
  --borde: rgba(15, 23, 42, 0.09);
  --codigo-fondo: #0f172a;

  --cristal: rgba(255, 255, 255, 0.72);
  --cristal-borde: rgba(255, 255, 255, 0.55);

  /* ---------------------------------------------------------- cristal de verdad
     Un `backdrop-filter` a secas no es cristal: es una mancha borrosa. El cristal se
     reconoce por tres cosas más, y son las que van aquí.

     · SATURACIÓN. Detrás del cristal los colores se avivan, no se apagan.
     · BRILLO DE CANTO. Un borde plano parece pegatina. El de verdad se enciende arriba
       —donde le da la luz— y se apaga abajo: un degradado, no un color.
     · LUZ INTERIOR. Una sombra interior clarísima en el borde superior da grosor de
       lámina en vez de recorte. */
  --vidrio-filtro: saturate(180%) blur(22px);
  --vidrio-canto: linear-gradient(150deg,
                    rgba(255, 255, 255, .85), rgba(255, 255, 255, .18) 42%,
                    rgba(255, 255, 255, .06));
  --vidrio-luz: inset 0 1px 0 rgba(255, 255, 255, .75);

  /* Sombras en capas: contacto, cuerpo y ambiente. Una sola sombra grande es una nube
     gris; tres cortas y una larga es como cae la luz de verdad. */
  --sombra-1: 0 1px 2px rgba(15, 23, 42, .06), 0 3px 8px -2px rgba(15, 23, 42, .08);
  --sombra-2: 0 2px 4px rgba(15, 23, 42, .05), 0 8px 20px -6px rgba(15, 23, 42, .12),
              0 24px 48px -20px rgba(15, 23, 42, .18);
  --sombra-3: 0 4px 8px rgba(15, 23, 42, .06), 0 16px 40px -12px rgba(15, 23, 42, .16),
              0 48px 96px -32px rgba(15, 23, 42, .28);
  /* Debajo de un botón azul, una sombra gris ensucia; una azul lo levanta. */
  --sombra-acento: 0 2px 6px rgba(37, 99, 235, .24), 0 12px 28px -8px rgba(37, 99, 235, .38);

  /* Escala tipográfica fluida: el titular crece con la ventana en vez de pegar un tirón
     al cruzar un breakpoint. Los grandes van apretados y con interlineado corto. */
  --t-h1: clamp(2.1rem, 1.1rem + 3.6vw, 3.6rem);
  --t-h2: clamp(1.45rem, 1rem + 1.8vw, 2.1rem);
  --t-h3: clamp(1.08rem, .95rem + .5vw, 1.3rem);
  --t-cuerpo: clamp(1rem, .96rem + .2vw, 1.08rem);

  /* Aire. Lo que más separa una página cara de una barata no es el color: es cuánto
     hueco se atreve a dejar. */
  --aire-seccion: clamp(3.2rem, 7vw, 6rem);
  --radio: 16px;
  --radio-g: 24px;

  /* Movimiento: una curva de salida suave tipo iOS y dos duraciones. Todo lo que se mueve
     en la hoja usa esto, y todo se apaga con una sola regla al final. */
  --curva: cubic-bezier(.22, 1, .36, 1);
  --rapido: .18s;
  --medio: .32s;
}

[data-theme="dark"] {
  color-scheme: dark;
  --acento: #3b82f6;
  --acento-fuerte: #2563eb;
  --acento-texto: #93c5fd;
  --acento-suave: rgba(59, 130, 246, 0.25);

  --texto: #cbd5e1;
  --texto-fuerte: #e2e8f0;
  --texto-suave: #94a3b8;
  --texto-tenue: #7c8aa0;
  --borde: rgba(148, 163, 184, 0.18);
  --codigo-fondo: #060b16;

  --cristal: rgba(30, 41, 59, 0.6);
  --cristal-borde: rgba(148, 163, 184, 0.16);

  /* En oscuro el cristal no se aclara: se ilumina el CANTO. Subir la opacidad del relleno
     da un plástico lechoso; dejarlo oscuro y encender el borde da vidrio ahumado. */
  --vidrio-canto: linear-gradient(150deg,
                    rgba(255, 255, 255, .28), rgba(255, 255, 255, .06) 42%,
                    rgba(255, 255, 255, .02));
  --vidrio-luz: inset 0 1px 0 rgba(255, 255, 255, .10);

  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4), 0 3px 8px -2px rgba(0, 0, 0, .45);
  --sombra-2: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 20px -6px rgba(0, 0, 0, .5),
              0 24px 48px -20px rgba(0, 0, 0, .6);
  --sombra-3: 0 4px 8px rgba(0, 0, 0, .4), 0 16px 40px -12px rgba(0, 0, 0, .55),
              0 48px 96px -32px rgba(0, 0, 0, .7);
  --sombra-acento: 0 2px 6px rgba(37, 99, 235, .35), 0 12px 28px -8px rgba(37, 99, 235, .5);
}

/* Sin JavaScript no hay quien ponga data-theme: que al menos el sistema mande. Son los
   mismos valores de arriba, y es duplicación a sabiendas —CSS no permite reutilizar un
   bloque en dos selectores sin preprocesador, y esta web no carga ninguno—. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --acento: #3b82f6;
    --acento-fuerte: #2563eb;
    --acento-texto: #93c5fd;
    --acento-suave: rgba(59, 130, 246, 0.25);
    --texto: #cbd5e1;
    --texto-fuerte: #e2e8f0;
    --texto-suave: #94a3b8;
    --texto-tenue: #7c8aa0;
    --borde: rgba(148, 163, 184, 0.18);
    --codigo-fondo: #060b16;
    --cristal: rgba(30, 41, 59, 0.6);
    --cristal-borde: rgba(148, 163, 184, 0.16);
    --vidrio-canto: linear-gradient(150deg,
                      rgba(255, 255, 255, .28), rgba(255, 255, 255, .06) 42%,
                      rgba(255, 255, 255, .02));
    --vidrio-luz: inset 0 1px 0 rgba(255, 255, 255, .10);
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .4), 0 3px 8px -2px rgba(0, 0, 0, .45);
    --sombra-2: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 20px -6px rgba(0, 0, 0, .5),
                0 24px 48px -20px rgba(0, 0, 0, .6);
    --sombra-3: 0 4px 8px rgba(0, 0, 0, .4), 0 16px 40px -12px rgba(0, 0, 0, .55),
                0 48px 96px -32px rgba(0, 0, 0, .7);
    --sombra-acento: 0 2px 6px rgba(37, 99, 235, .35), 0 12px 28px -8px rgba(37, 99, 235, .5);
  }
}

/* ================================================================ lienzo */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--texto);
  font-family: "SF Pro Display", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-cuerpo);
  line-height: 1.65;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  /* Solo el color base: el degradado entero vive en el ::before de abajo. */
  background: #e8ecf5;
  position: relative;
}
[data-theme="dark"] body { background: #0d1424; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background: #0d1424; }
}

/* Nada de desbordes laterales, pase lo que pase: una animación que asoma un píxel por el
   borde regala una barra de scroll horizontal en el móvil. `clip` y no `hidden`: `hidden`
   convierte el elemento en contenedor de scroll y ROMPE los position:sticky de dentro. */
html, body { overflow-x: clip; }

/* El lienzo entero —la luz del escritorio del panel— pintado en un pseudo-elemento con
   `position: fixed`, NO con `background-attachment: fixed`: los navegadores del móvil
   implementan `attachment` a medias y el fondo se corta al primer alto de pantalla, con
   toda la página en blanco de ahí para abajo. Un elemento fijo de verdad no tiene ese
   problema en ninguno. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46vw 46vw at 12% 4%, color-mix(in srgb, var(--acento) 11%, transparent), transparent 70%),
    radial-gradient(38vw 38vw at 92% 18%, color-mix(in srgb, #8b5cf6 9%, transparent), transparent 70%),
    radial-gradient(ellipse 90% 70% at 12% 0%, rgba(99, 132, 199, 0.22), transparent 62%),
    radial-gradient(ellipse 80% 60% at 88% 8%, rgba(129, 140, 202, 0.18), transparent 62%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(100, 150, 170, 0.16), transparent 68%),
    linear-gradient(165deg, #eef2f8 0%, #e8ecf5 45%, #e6eef1 100%);
}
[data-theme="dark"] body::before {
  background:
    radial-gradient(46vw 46vw at 12% 4%, color-mix(in srgb, var(--acento) 13%, transparent), transparent 70%),
    radial-gradient(38vw 38vw at 92% 18%, color-mix(in srgb, #8b5cf6 10%, transparent), transparent 70%),
    radial-gradient(ellipse 90% 70% at 12% 0%, rgba(37, 99, 235, 0.18), transparent 62%),
    radial-gradient(ellipse 80% 60% at 88% 8%, rgba(99, 102, 241, 0.14), transparent 62%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(13, 148, 136, 0.12), transparent 68%),
    linear-gradient(165deg, #0b1220 0%, #111827 50%, #0f1a1f 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before {
    background:
      radial-gradient(46vw 46vw at 12% 4%, color-mix(in srgb, var(--acento) 13%, transparent), transparent 70%),
      radial-gradient(38vw 38vw at 92% 18%, color-mix(in srgb, #8b5cf6 10%, transparent), transparent 70%),
      radial-gradient(ellipse 90% 70% at 12% 0%, rgba(37, 99, 235, 0.18), transparent 62%),
      radial-gradient(ellipse 80% 60% at 88% 8%, rgba(99, 102, 241, 0.14), transparent 62%),
      radial-gradient(ellipse 100% 60% at 50% 100%, rgba(13, 148, 136, 0.12), transparent 68%),
      linear-gradient(165deg, #0b1220 0%, #111827 50%, #0f1a1f 100%);
  }
}

h1, h2, h3, h4 { color: var(--texto-fuerte); letter-spacing: -0.018em; }

/* Las cifras, en columna: en un NAS casi todo lo que se lee son tamaños y fechas. */
table, td, th, time, code, .tabular { font-variant-numeric: tabular-nums; }

.envoltorio { max-width: 1040px; margin: 0 auto; padding: 0 20px 72px; }

a { color: var(--acento); text-decoration-color: color-mix(in srgb, var(--acento) 40%, transparent); }
a:hover { color: var(--acento-texto); }

/* La selección, del azul de la casa y translúcida: no toca el color del texto, así que lo
   seleccionado se sigue leyendo igual en claro y en oscuro. */
::selection { background: color-mix(in srgb, var(--acento) 30%, transparent); }

/* El foco NUNCA se quita: es como se navega con teclado. Se dibuja bonito y se acabó.
   El anillo no toca el radio del elemento: sigue la forma que ya tenga. */
a[href]:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* `hidden` en un elemento con `display` propio no esconde nada: la propiedad gana al
   atributo. El filtro de guías se apoya en `hidden`, así que se dice explícitamente. */
[hidden] { display: none !important; }

/* Con la barra pegajosa delante, un enlace a #seccion aterrizaba con el título DEBAJO de
   ella. Todo lo que tiene ancla se frena antes. */
[id] { scroll-margin-top: 5.5rem; }

/* ================================================================ cristal */

.glass {
  background:
    linear-gradient(var(--cristal), var(--cristal)) padding-box,
    var(--vidrio-canto) border-box;
  border: 1px solid transparent;
  border-radius: var(--radio-g);
  -webkit-backdrop-filter: var(--vidrio-filtro);
  backdrop-filter: var(--vidrio-filtro);
  box-shadow: var(--sombra-2), var(--vidrio-luz);
}

.panel { padding: 20px 24px; margin-bottom: 14px; }
/* Los paneles llevan su hueco propio: lo primero y lo último no suman el suyo. */
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

/* ================================================================ la barra
   La misma píldora flotante del portal. Pegada al canto superior parece parte del
   navegador; flotando parece parte del producto. */

.barra-superior {
  position: sticky; top: .75rem; z-index: 50;
  display: flex; align-items: center; gap: .5rem;
  /* Fuera del envoltorio (la abre generar.py antes que él) y con LA MISMA anchura que la
     barra del portal: si midieran distinto, al pasar de la landing a la documentación la
     barra «encogería» y delataría que son dos plantillas. */
  margin: .75rem auto 0; max-width: min(1180px, calc(100% - 1.5rem));
  padding: .55rem clamp(.9rem, 2vw, 1.3rem);
  border-radius: 999px;
  background:
    linear-gradient(var(--cristal), var(--cristal)) padding-box,
    var(--vidrio-canto) border-box;
  border: 1px solid transparent;
  -webkit-backdrop-filter: var(--vidrio-filtro);
  backdrop-filter: var(--vidrio-filtro);
  box-shadow: var(--sombra-2), var(--vidrio-luz);
  transition: padding var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
/* Al bajar, la barra se encoge y gana sombra: la página «arranca». La clase la pone el
   script al pasar de 24 px de scroll. */
html.rodando .barra-superior { padding-block: .3rem; box-shadow: var(--sombra-3), var(--vidrio-luz); }

.marca {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--texto-fuerte); text-decoration: none; white-space: nowrap;
}
.marca:hover { text-decoration: none; }
.marca-icono { width: 26px; height: 26px; border-radius: 8px; box-shadow: var(--sombra-1); }
.marca-nombre { display: inline; }
.marca-os { color: var(--acento); }

/* Tres pesos en la barra, no uno: los enlaces de sección son discretos, «Comprar» es un
   botón sólido y el tema es un icono. Si los siete pesan igual, la acción que paga la web
   se pierde entre «Inicio» y «Documentación». */
nav.menu { display: flex; align-items: center; gap: .15rem; margin-left: auto; }

.nav-enlace {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: .42rem .7rem; border-radius: 9px;
  font-size: .9rem; font-weight: 500;
  color: var(--texto-suave); text-decoration: none;
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.nav-enlace:hover {
  text-decoration: none; color: var(--texto-fuerte);
  background: color-mix(in srgb, var(--texto-fuerte) 7%, transparent);
}
/* Dónde estás. Se cuelga de aria-current, que es el atributo que ya lo dice de verdad. */
.nav-enlace[aria-current="page"] {
  color: var(--texto-fuerte); font-weight: 650;
  background: color-mix(in srgb, var(--acento) 12%, transparent);
}

.nav-fijo { display: flex; align-items: center; gap: .5rem; margin-left: .6rem; }

.portal-cta {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: .45rem .95rem; border-radius: 999px;
  font-size: .9rem; font-weight: 650; color: #fff; text-decoration: none;
  background: linear-gradient(180deg, var(--acento), var(--acento-fuerte));
  box-shadow: 0 1px 2px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva),
              filter var(--rapido) var(--curva);
}
.portal-cta:hover {
  text-decoration: none; color: #fff; filter: brightness(1.06);
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--acento) 55%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .22);
}
.portal-cta:active { transform: translateY(1px); }

/* El interruptor de tema: un icono tranquilo. Cada tema enseña el icono del OTRO, que es
   a lo que se va a cambiar. */
.cambiar-tema {
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border-radius: 10px; border: 0; background: none;
  color: var(--texto-suave); cursor: pointer;
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.cambiar-tema:hover { background: color-mix(in srgb, var(--texto-fuerte) 8%, transparent); color: var(--texto-fuerte); }
.cambiar-tema:active { transform: translateY(1px); }
.cambiar-tema svg { width: 17px; height: 17px; }
.cambiar-tema .luna { display: block; }
.cambiar-tema .sol { display: none; }
[data-theme="dark"] .cambiar-tema .luna { display: none; }
[data-theme="dark"] .cambiar-tema .sol { display: block; }

/* La bandera del idioma, hermana del botón de tema: misma altura, mismo hueco, mismo trato
   al pasar el ratón. Enseña la bandera del idioma AL QUE LLEVA (destino, no actual), que es
   lo que la hace pulsable sin pensarla, con su código de dos letras al lado —una bandera
   sola se lee como un país, no como un idioma—.
   Esta hoja es la de la web generada; la del portal (web/app/static/estilo.css) lleva las
   mismas reglas. Son dos archivos a propósito, así que lo que se toque aquí se toca allí. */
.idioma-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  height: 34px; padding: 0 .5rem; border-radius: 10px;
  border: 0; background: none; color: var(--texto-suave); cursor: pointer;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.idioma-btn:hover { background: color-mix(in srgb, var(--texto-fuerte) 8%, transparent); color: var(--texto-fuerte); }
.idioma-btn:active { transform: translateY(1px); }
/* La bandera con su bordecito: sobre fondo claro, el blanco de la británica se derretía con
   la barra y quedaba media bandera flotando. */
.idioma-bandera {
  width: 20px; height: 14px; border-radius: 3px; display: block; flex: 0 0 auto;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--texto-fuerte) 18%, transparent);
}

/* El botón de menú solo existe en pantallas estrechas. */
.nav-abrir { display: none; }

/* Por debajo de esto los enlaces ya no caben al lado de la marca, así que se pliegan.
   «Comprar» y el tema se quedan a la vista: son la venta y un ajuste de una pulsación. */
@media (max-width: 800px) {
  .barra-superior { flex-wrap: wrap; border-radius: var(--radio-g); }
  /* La bandera sin su «EN» en pantalla estrecha: con las dos letras la fila no cabía y el
     botón de menú se caía a una segunda línea. Misma regla que en el portal. */
  .idioma-btn { padding: 0 .35rem; }
  .idioma-btn span { display: none; }
  .nav-abrir {
    display: inline-flex; align-items: center; justify-content: center;
    order: 3; margin-left: auto;
    width: 38px; height: 38px; padding: 0; border-radius: 10px;
    background: none; border: 1px solid var(--cristal-borde); color: var(--texto-fuerte);
    cursor: pointer;
  }
  .nav-abrir svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
  .nav-fijo { order: 2; margin-left: auto; }
  nav.menu {
    order: 4; display: none; width: 100%;
    flex-direction: column; align-items: stretch; gap: .1rem;
    margin: .35rem 0 .15rem; padding-top: .5rem;
    border-top: 1px solid var(--borde);
  }
  .barra-superior.menu-abierto nav.menu { display: flex; }
  .nav-enlace { width: 100%; justify-content: flex-start; padding: .6rem .7rem; font-size: .95rem; }
}

/* ================================================================ héroe */

.hero {
  text-align: center;
  padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(1.8rem, 4vw, 3rem);
  /* El aire de sección de abajo NO se suma: el héroe ya trae el suyo en el padding, y las
     dos cosas juntas eran nueve rem de página vacía antes del primer contenido. */
  margin-bottom: 0;
}
.hero h1 {
  margin: .9rem 0 .6rem;
  font-size: var(--t-h1); font-weight: 750; line-height: 1.04; letter-spacing: -.035em;
}
.hero .entradilla {
  margin: 0 auto;
  max-width: 62ch;
  font-size: clamp(1.02rem, .95rem + .5vw, 1.2rem);
  line-height: 1.55;
  color: var(--texto-suave);
}
.hero nav.principal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem;
  margin-top: 1.5rem;
}
/* El héroe compacto de las guías: el título lo pone el propio documento. */
.hero.compacta { padding: clamp(1.6rem, 4vw, 2.6rem) 0 1.2rem; }
.hero.compacta .entradilla { font-size: 1.02rem; margin-top: .5rem; }
.hero.compacta nav.principal { margin-top: 1.1rem; }

/* ================================================================ pegatinas (chips) */

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px; padding: 3px 10px;
  font-size: 11.5px; font-weight: 600; line-height: 1.15rem;
  letter-spacing: .01em; white-space: nowrap;
}
.chip-blue  { color: #1d4ed8; background: rgba(37, 99, 235, 0.12); }
.chip-amber { color: #b45309; background: rgba(217, 119, 6, 0.14); }
.chip-slate { color: #475569; background: rgba(71, 85, 105, 0.12); }
[data-theme="dark"] .chip-blue  { color: #93c5fd; background: rgba(59, 130, 246, 0.18); }
[data-theme="dark"] .chip-amber { color: #fcd34d; background: rgba(245, 158, 11, 0.18); }
[data-theme="dark"] .chip-slate { color: #cbd5e1; background: rgba(148, 163, 184, 0.18); }

/* ================================================================ botones
   Un botón se levanta al acercarse y se HUNDE al pulsarlo. Lo segundo es lo que casi nadie
   pone y lo que hace que se sienta físico: sin el hundido, pulsar no confirma nada. */

.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 999px; padding: 10px 20px;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform var(--rapido) var(--curva), box-shadow var(--medio) var(--curva),
              background-color var(--rapido) var(--curva), border-color var(--rapido) var(--curva),
              color var(--rapido) var(--curva);
  will-change: transform;
}
.btn-primary svg, .btn-secondary svg { width: 1.1em; height: 1.1em; }

.btn-primary {
  background: linear-gradient(180deg, var(--acento), var(--acento-fuerte));
  color: #fff;
  box-shadow: var(--sombra-acento), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-primary:hover {
  color: #fff; transform: translateY(-2px);
  box-shadow: var(--sombra-acento), 0 20px 40px -12px rgba(37, 99, 235, .45),
              inset 0 1px 0 rgba(255, 255, 255, .22);
}

.btn-secondary {
  color: var(--texto-suave);
  background: color-mix(in srgb, var(--cristal) 80%, transparent);
  border-color: var(--borde);
  box-shadow: var(--sombra-1);
}
.btn-secondary:hover {
  transform: translateY(-2px);
  color: var(--texto-fuerte); border-color: color-mix(in srgb, var(--texto-fuerte) 16%, transparent);
  box-shadow: var(--sombra-2);
}

.btn-primary:active, .btn-secondary:active {
  transform: translateY(0) scale(.985); transition-duration: .06s;
}
/* Un botón apagado no promete nada: ni sombra, ni salto, ni cursor de acción. */
.btn-primary:disabled, .btn-secondary:disabled,
.btn-primary[aria-disabled="true"], .btn-secondary[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none;
  box-shadow: none; filter: none; pointer-events: none;
}
.btn-primary:focus-visible, .btn-secondary:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 3px;
}

.acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }

/* ================================================================ secciones */

section { margin-bottom: var(--aire-seccion); }

h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 4px; }
h3 { font-size: var(--t-h3); letter-spacing: -.015em; }
h2 + .sub { margin: 0 0 18px; color: var(--texto-tenue); font-size: 15.5px; }
.sub.aparte { margin-top: 1rem; color: var(--texto-tenue); font-size: 15.5px; }

.rejilla { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* «dos» son DOS columnas de verdad, no «las que quepan»: con auto-fit, cuatro tarjetas a
   ancho de escritorio salían 3+1, con la cuarta huérfana junto a un hueco doble. */
.rejilla.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla.tres { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
@media (max-width: 700px) {
  .rejilla.dos { grid-template-columns: minmax(0, 1fr); }
}

.dato { font-size: 15px; margin: 0; }
.dato dt { font-weight: 600; color: var(--texto-fuerte); margin-bottom: 2px; }
.dato dd { margin: 0; color: var(--texto-suave); }

.destacado h3 { margin: 0 0 6px; font-size: 16px; }
.destacado p { margin: 0; color: var(--texto-suave); font-size: 15px; }

/* ================================================================ código */

pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

pre {
  background: var(--codigo-fondo);
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.6;
  margin: 12px 0;
  box-shadow: var(--sombra-1);
}

/* Dentro de un bloque, los saltos de línea son parte de la orden. */
pre code { background: none; padding: 0; color: inherit; font-size: inherit; white-space: pre; }

code {
  background: var(--acento-suave);
  color: var(--acento-texto);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.88em;
  font-variant-ligatures: none;
  /* SE PARTE si no cabe, y antes no.
     La idea de `nowrap` era buena —una orden cortada en dos renglones se lee como dos cosas
     distintas— pero el precio es desproporcionado: un código largo no tiene dónde partirse,
     así que empuja a su contenedor, y a la página entera, fuera de la pantalla. Pasó en las
     novedades con una línea que se comió medio párrafo por unas comillas mal cerradas: el
     texto se salía por la derecha y no había forma de leerlo.
     `anywhere` solo corta cuando no queda otra; mientras quepa, la orden sigue entera. */
  overflow-wrap: anywhere;
  /* Y por si acaso: dentro de su caja y nunca más ancho que ella. */
  max-width: 100%;
}
[data-theme="dark"] code { color: #93c5fd; }

/* ================================================================ avisos */

.aviso, .peligro {
  border-radius: 12px;
  padding: 13px 16px;
  margin: 16px 0;
  font-size: 15px;
  border: 1px solid;
}
.aviso {
  color: #b45309;
  background: rgba(217, 119, 6, 0.1);
  border-color: rgba(217, 119, 6, 0.28);
}
.peligro {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.09);
  border-color: rgba(220, 38, 38, 0.28);
}
[data-theme="dark"] .aviso {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.3);
}
[data-theme="dark"] .peligro {
  color: #fecaca;
  background: rgba(248, 113, 113, 0.14);
  border-color: rgba(248, 113, 113, 0.32);
}

/* ================================================================ novedades */

.version { padding: 18px 22px; margin-bottom: 14px; transition: box-shadow var(--medio) var(--curva); }
.version:hover { box-shadow: var(--sombra-3), var(--vidrio-luz); }

.version h3 {
  display: inline-flex; align-items: baseline; gap: 10px;
  margin: 0; font-size: 18px;
}
.version .num { font-variant-numeric: tabular-nums; }
.version .fecha { font-size: 12px; font-weight: 400; color: var(--texto-tenue); }

.version h4 { margin: 18px 0 6px; font-size: 14px; font-weight: 600; color: var(--acento-texto); }
[data-theme="dark"] .version h4 { color: #93c5fd; }

.version .entradilla-version { margin: 10px 0 4px; color: var(--texto-suave); font-size: 15px; }
.version ul { margin: 0; padding-left: 20px; }
.version li { margin-bottom: 8px; color: var(--texto-suave); }
.version li strong { color: var(--texto-fuerte); font-weight: 600; }

details.version summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px; padding: 2px 0;
}
details.version summary::-webkit-details-marker { display: none; }
/* El signo gira al abrir: la animación más barata que existe y la que más se nota. */
details.version summary::before {
  content: "▸"; color: var(--texto-tenue); font-size: 12px;
  transition: transform var(--rapido) var(--curva);
}
details.version[open] summary::before { transform: rotate(90deg); }
details.version summary:hover { color: var(--acento-texto); }

/* ================================================================ pasos */

ol.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; }

ol.pasos > li {
  counter-increment: paso;
  position: relative;
  padding: 0 0 18px 40px;
  border-left: 2px solid var(--borde);
  margin-left: 13px;
}
ol.pasos > li:last-child { border-left-color: transparent; padding-bottom: 0; }

ol.pasos > li::before {
  content: counter(paso);
  position: absolute; left: -14px; top: -1px;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(160deg, #60a5fa, var(--acento));
  color: #fff; font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), var(--sombra-1);
}

ol.pasos h3 { margin: 0 0 4px; font-size: 16px; }
ol.pasos p { margin: 0 0 8px; color: var(--texto-suave); font-size: 15px; }

/* ================================================================ tablas */

.tabla-envuelta { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 460px; }

th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; }
tr:last-child td { border-bottom: 0; }

th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--texto-tenue); font-weight: 600;
}
td { color: var(--texto-suave); }
td:first-child { font-weight: 600; color: var(--texto-fuerte); white-space: nowrap; }

/* ================================================================ capturas */

.captura { margin: 0 0 16px; padding: 12px; }
.captura img {
  display: block; width: 100%; height: auto;
  border-radius: 12px; border: 1px solid var(--borde);
}
.captura figcaption {
  margin-top: 12px; font-size: 14.5px; color: var(--texto-suave); line-height: 1.6;
}
.captura figcaption strong { color: var(--texto-fuerte); }

/* Dos capturas por app, una por tema: se enseña la del tema puesto. */
[data-theme="light"] .captura .oscuro,
[data-theme="light"] .captura-movil .oscuro,
[data-theme="dark"] .captura .claro,
[data-theme="dark"] .captura-movil .claro { display: none; }

.moviles { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; }

.captura-movil { margin: 0; max-width: 240px; }
.captura-movil img {
  display: block; width: 100%; height: auto;
  /* El radio y el borde bastan para que se lea como un móvil sin dibujar una carcasa. */
  border-radius: 26px;
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-3);
}
.captura-movil figcaption {
  margin-top: 10px; text-align: center; font-size: 13.5px; color: var(--texto-tenue);
}
.pie-movil { margin: 20px 0 0; font-size: 14.5px; color: var(--texto-suave); }

/* ================================================================ áreas (qué sabe hacer) */

.area { padding: 18px 22px; margin-bottom: 14px; }
.area h3 { margin: 0 0 10px; font-size: 17px; }
.area ul { margin: 0; padding-left: 20px; }
.area li { margin-bottom: 7px; color: var(--texto-suave); font-size: 15px; }
.area li strong { color: var(--texto-fuerte); }

/* ================================================================ documentación: portada
   Quien llega a una documentación trae UNA pregunta y necesita saber cuál de las ocho
   guías la responde, sin abrir tres para averiguarlo. De ahí el buscador, los grupos y la
   línea de «cuándo» de cada tarjeta. */

.doc-buscar { margin: 0 0 clamp(2rem, 4.5vw, 2.8rem); }
.doc-buscador {
  display: flex; align-items: center; gap: .7rem;
  max-width: 34rem; margin: 0 auto; padding: .1rem .3rem .1rem 1.1rem;
  border-radius: 999px;
  background:
    linear-gradient(var(--cristal), var(--cristal)) padding-box,
    var(--vidrio-canto) border-box;
  border: 1px solid transparent;
  -webkit-backdrop-filter: var(--vidrio-filtro);
  backdrop-filter: var(--vidrio-filtro);
  box-shadow: var(--sombra-2), var(--vidrio-luz);
  transition: box-shadow var(--rapido) var(--curva);
}
/* El anillo de foco va en el contenedor, no en el campo: si no, salen dos. */
.doc-buscador:focus-within { box-shadow: var(--sombra-3), 0 0 0 3px var(--acento-suave); }
.doc-lupa { width: 17px; height: 17px; flex: 0 0 auto; color: var(--texto-tenue); }
.doc-buscador input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: inherit; font: inherit; padding: .8rem .4rem .8rem 0;
}
.doc-buscador input::placeholder { color: var(--texto-tenue); }
.doc-nada { text-align: center; margin-top: 1.2rem; color: var(--texto-tenue); font-size: .95rem; }

.doc-grupo { margin-bottom: clamp(2rem, 4.5vw, 2.8rem); }
/* Los títulos de grupo son rótulos de un índice, no titulares: a tamaño de titular, cuatro
   grupos gritando convertían la página en una escalera de letras enormes. */
.doc-grupo > h2 { font-size: 1.28rem; letter-spacing: -.015em; margin-bottom: .15rem; }
.doc-grupo > .sub { margin-top: 0; margin-bottom: 12px; font-size: 14.5px; }

/* La guía es una FILA: peana con el icono, texto y un chevrón. Compacta a propósito —esto
   es un índice, y en el móvil ocho bloques verticales eran seis pantallas de scroll—. */
.guia {
  position: relative; display: flex; align-items: flex-start; gap: .95rem;
  padding: 1.05rem 1.1rem;
  border-radius: 18px;
  text-decoration: none;
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
/* Un grupo con una sola guía ocupa el ancho entero: media rejilla vacía parece un fallo. */
.rejilla.dos > .guia:only-child { grid-column: 1 / -1; }

.guia-ico {
  flex: 0 0 auto; width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
}
.guia-ico svg { width: 22px; height: 22px; }
/* El tinte de la peana lo decide el grupo (lo pone generar.py): azul para leer con calma,
   ámbar para los apuros, pizarra para la referencia. */
.t-azul    { background: color-mix(in srgb, var(--acento) 12%, transparent); color: var(--acento); }
.t-ambar   { background: rgba(217, 119, 6, 0.14); color: #b45309; }
.t-pizarra { background: rgba(71, 85, 105, 0.12); color: #475569; }
[data-theme="dark"] .t-azul    { color: #93c5fd; }
[data-theme="dark"] .t-ambar   { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
[data-theme="dark"] .t-pizarra { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }

.guia-cuerpo { flex: 1 1 auto; min-width: 0; }
.guia h3 { margin: 0 0 .15rem; font-size: 1.02rem; letter-spacing: -.012em; color: var(--texto-fuerte); }
.guia p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--texto-suave); }
/* El «cuándo» es la línea que responde «¿esta es la mía?». En texto quieto, no en píldora:
   ocho píldoras azules parecían ocho botones desactivados. */
.guia-cuando {
  display: block; margin-top: .4rem;
  font-size: .8rem; line-height: 1.4; font-weight: 550;
  color: var(--acento);
}
[data-theme="dark"] .guia-cuando { color: #93c5fd; }

/* El chevrón promete que la fila lleva a algún sitio; al acercarse, empuja. */
.guia-flecha {
  flex: 0 0 auto; align-self: center;
  width: 17px; height: 17px;
  color: var(--texto-tenue); opacity: .55;
  transition: transform var(--rapido) var(--curva), opacity var(--rapido) var(--curva),
              color var(--rapido) var(--curva);
}
.guia:hover, .guia:focus-visible { transform: translateY(-2px); box-shadow: var(--sombra-3), var(--vidrio-luz); }
.guia:hover h3 { color: var(--acento-texto); }
.guia:hover .guia-flecha, .guia:focus-visible .guia-flecha {
  color: var(--acento); opacity: 1; transform: translateX(3px);
}

/* ================================================================ documentación: guías */

.con-lateral {
  display: grid; gap: 18px;
  grid-template-columns: 230px minmax(0, 1fr);
  align-items: start;
}

/* El índice se queda a la vista mientras se baja: en un documento de dos mil palabras,
   perder de vista dónde estás es perder el hilo. */
.lateral { position: sticky; top: 5.2rem; align-self: start; max-height: calc(100vh - 6.5rem); overflow-y: auto; }
.lateral h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-tenue); }
.lateral ul { margin: 0; padding: 0; list-style: none; }
.lateral li { margin-bottom: 2px; }
.lateral a {
  display: block; padding: 6px 10px; border-radius: 10px;
  font-size: 14px; text-decoration: none; color: var(--texto-suave);
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.lateral a:hover { background: rgba(37, 99, 235, 0.1); color: var(--acento-texto); }
[data-theme="dark"] .lateral a:hover { background: rgba(59, 130, 246, 0.22); color: #dbeafe; }

/* La guía en sí se lee como un documento, no como una interfaz. La medida de línea es LO
   que decide si se lee o se abandona: por encima de ~75 caracteres el ojo pierde el
   renglón al volver, y en una guía técnica eso es cerrar la pestaña. */
.documento { padding: 26px 30px; --medida: 72ch; }
.documento p, .documento li { max-width: var(--medida); line-height: 1.7; color: var(--texto-suave); }
.documento h1 { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 2.9rem); line-height: 1.06; letter-spacing: -.035em; margin: 0 0 14px; }
.documento h2 {
  font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem); line-height: 1.15; letter-spacing: -.025em;
  margin: 2.4em 0 8px; padding-top: .9em; border-top: 1px solid var(--borde);
}
/* El primer h2 no lleva raya: una línea justo debajo del título no separa nada. */
.documento h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.4em; }
.documento h3 { font-size: 16.5px; margin: 1.9em 0 6px; letter-spacing: -.015em; }
.documento h4 { font-size: 15px; margin: 18px 0 6px; color: var(--acento-texto); }
[data-theme="dark"] .documento h4 { color: #93c5fd; }
.documento li { margin-bottom: 6px; }
.documento li strong, .documento p strong { color: var(--texto-fuerte); }
.documento ul, .documento ol { padding-left: 22px; }
.documento blockquote {
  margin: 14px 0; padding: 10px 16px;
  border-left: 3px solid var(--acento);
  background: var(--acento-suave);
  border-radius: 0 10px 10px 0;
  color: var(--texto-suave);
}
.documento hr { border: 0; border-top: 1px solid var(--borde); margin: 26px 0; }
/* El código no se parte por estética: si no cabe, se desliza él. */
.documento pre { max-width: none; }

/* Los enlaces del cuerpo se subrayan, con el subrayado despegado de las colas de las
   letras: un enlace que solo cambia de color no se distingue si eres daltónico. */
.documento a {
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--acento) 45%, transparent);
  transition: text-decoration-color var(--rapido) var(--curva);
}
.documento a:hover { text-decoration-color: var(--acento); }

/* Ancla junto a cada título: la forma de mandarle a alguien EL punto exacto de la guía.
   Aparece al pasar por encima y no estorba al leer. */
.documento h2, .documento h3 { position: relative; }
.documento h2:hover::after, .documento h3:hover::after {
  content: '#'; position: absolute; left: -.85em; top: 0;
  color: color-mix(in srgb, var(--acento) 55%, transparent); font-weight: 400;
}

/* ================================================================ pie */

footer.principal {
  border-top: 1px solid var(--borde);
  padding-top: 22px;
  text-align: center;
  color: var(--texto-tenue);
  font-size: 14px;
}
.pie-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-bottom: .5rem; }
.pie-enlaces a { color: var(--texto-tenue); text-decoration: none; }
.pie-enlaces a:hover { color: var(--texto-fuerte); text-decoration: underline; }
footer.principal p { margin: 0; }

/* ================================================================ movimiento
   Pocas piezas y bien cronometradas; todas se apagan con `prefers-reduced-motion`. Y NADA
   de esto oculta contenido si el script no corre: la clase que esconde («armada») la pone
   él, nunca el HTML. Ocultar desde el CSS y confiar en JavaScript para revelar es como se
   acaba con una web en blanco. */

/* --- 1. Aparecer al llegar. Solo en vertical y con poco recorrido: los deslizamientos
   laterales asomaban por los bordes de la pantalla del móvil. El ritmo lo pone el
   escalonado (lo cronometra el script), no el recorrido. */
.aparece { transition: opacity .55s var(--curva), transform .55s var(--curva); }
.aparece.armada { opacity: 0; transform: translateY(14px); }
.aparece.armada.visible { opacity: 1; transform: none; }

/* --- 2. El reflejo que sigue al puntero. Es LO que hace que una superficie parezca
   vidrio y no una caja con desenfoque: la luz se mueve con quien mira. Las coordenadas
   las pone el script en --mx/--my; sin él, se queda centrado y no pasa nada. */
.guia, .version {
  --mx: 50%; --my: 0%;
  isolation: isolate;
}
.version { position: relative; }
.guia::before, .version::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  /* En claro, un velo del color de marca: sobre fondo blanco el azul ACLARA y el texto,
     que es oscuro, se sigue leyendo igual de bien. */
  background: radial-gradient(16rem 16rem at var(--mx) var(--my),
              color-mix(in srgb, var(--acento) 13%, transparent), transparent 70%);
  opacity: 0; transition: opacity .35s var(--curva);
}
/* En OSCURO no se tiñe de azul: se ilumina con blanco.
   Estaba al 22 % de azul de marca, y sobre un fondo ya oscuro eso no ilumina, ENSUCIA: la
   tarjeta se volvía azul marino y el texto gris de la descripción se quedaba encima con la
   mitad del contraste. En un cristal, pasar el ratón por encima tiene que hacer que la
   superficie coja luz —como cuando le da un reflejo— y eso es blanco, no color. */
[data-theme="dark"] .guia::before, [data-theme="dark"] .version::before {
  background: radial-gradient(16rem 16rem at var(--mx) var(--my),
              rgba(255, 255, 255, .07), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .guia::before,
  :root:not([data-theme="light"]) .version::before {
    background: radial-gradient(16rem 16rem at var(--mx) var(--my),
                rgba(255, 255, 255, .07), transparent 70%);
  }
}
.guia:hover::before, .version:hover::before { opacity: 1; }

/* ================================================================ estrecho */

@media (max-width: 900px) {
  /* El índice de la guía, de columna pegada a TIRA horizontal: en un teléfono robaba 659
     de los 812 px de pantalla antes de la primera línea de texto. */
  .con-lateral { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    position: static; max-height: none; overflow: visible;
    padding: .8rem .9rem;
  }
  .lateral h4 { margin: 0 0 .55rem; font-size: .72rem; letter-spacing: .06em; opacity: .7; }
  .lateral ul {
    display: flex; gap: .45rem; margin: 0; padding: 0 .2rem .3rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                 /* la barra estorba en una tira de fichas */
    scroll-snap-type: x proximity;
  }
  .lateral ul::-webkit-scrollbar { display: none; }
  .lateral li { flex: 0 0 auto; scroll-snap-align: start; margin: 0; }
  .lateral a {
    white-space: nowrap; padding: .42rem .8rem; border-radius: 999px;
    border: 1px solid var(--borde); font-size: .85rem;
  }
  .documento { padding-left: 1rem; padding-right: 1rem; }
  .documento h2 { margin-top: 1.8em; }
}

@media (max-width: 700px) {
  /* Las tablas de las guías, a lo ancho del teléfono. La alternativa era un scroll lateral
     que nada anunciaba: la columna derecha quedaba cortada a media palabra y parecía un
     fallo, no un gesto.

     `table-layout: fixed` porque con el reparto automático las columnas se las reparte el
     contenido: una ruta larga engordaba la suya, aplastaba la primera a 60 px y las
     palabras salían guillotinadas letra a letra. Fijo, cada columna sabe lo que mide, el
     texto envuelve por palabras y los guiones (`hyphens`, el HTML ya declara lang="es")
     parten con criterio lo que no quepa. */
  table { min-width: 0; width: 100%; table-layout: fixed; }
  td, th { overflow-wrap: break-word; hyphens: auto; }
  td:first-child { white-space: normal; width: 28%; }
}

@media (max-width: 560px) {
  .panel, .version { padding: 16px; }
  .hero { padding-top: 2.2rem; }
  .hero nav.principal .btn-primary, .hero nav.principal .btn-secondary { flex: 1 1 auto; }
  /* El índice de guías, pegado y al grano: en 375 px cada aire de más es medio codo de
     scroll. Las filas se estrechan, la rejilla junta y la peana un punto más pequeña. */
  .rejilla.dos { gap: 12px; }
  .guia { padding: .9rem .95rem; gap: .8rem; }
  .guia-ico { width: 38px; height: 38px; border-radius: 11px; }
  .guia-ico svg { width: 20px; height: 20px; }
  .doc-buscador input { padding-block: .72rem; }
  /* Un `código` EN LÍNEA largo —una ruta, una orden— lleva `white-space: nowrap`, y en una
     pantalla estrecha eso empuja la página fuera. Se parte antes que desbordar; los
     bloques (`pre code`) se quedan: ahí los saltos SÍ importan y el `pre` ya se desliza. */
  code { white-space: normal; overflow-wrap: anywhere; }
  pre code { white-space: pre; overflow-wrap: normal; }
}

/* ================================================================ quietud
   Una sola regla apaga TODO el movimiento de la hoja. Va la última para que nada se le
   escape por especificidad: hay gente a la que una animación de entrada le provoca mareo
   de verdad, y ahí lo correcto es que no exista, no que sea más corta. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .aparece.armada { opacity: 1 !important; transform: none !important; }
  .guia::before, .version::before { display: none; }
  .guia:hover, .btn-primary:hover, .btn-secondary:hover, .portal-cta:active,
  .btn-primary:active, .btn-secondary:active { transform: none !important; }
}