/* ===========================================================================
   ContaXML — hoja de estilos única del sitio
   Dirección visual: "Técnico limpio" (mockup B, aprobado)

   Cómo está organizado este archivo:
     1.  Fuentes            8.  Sección principal (inicio)
     2.  Tokens de color    9.  Pasos, capacidades y lupa
     3.  Base               10. Bloque de privacidad
     4.  Utilidades         11. Precios
     5.  Botones            12. Descarga
     6.  Encabezado         13. Páginas legales
     7.  Cabecera interior  14. Pie
                            15. Movimiento
                            16. Impresión
                            17. Manual

   Sin dependencias, sin CDN, sin peticiones a internet. Las fuentes viven en
   assets/fonts/ como archivos locales.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Fuentes — Geist, la misma tipografía que usa el programa
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/geist-mono-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   2. Tokens — tomados del sistema de diseño real del producto
   --------------------------------------------------------------------------- */
:root {
  /* Marca */
  --acento:         #0b7d72;   /* verde teal — color de la marca */
  --acento-hover:   #0c6359;
  --acento-press:   #0d4f48;
  --acento-profundo:#0c3f3a;
  --acento-tenue:   rgba(14, 147, 132, 0.12);
  --acento-apenas:  rgba(14, 147, 132, 0.06);
  /* Verde un punto más oscuro, solo para TEXTO puesto encima del tinte verde:
     el acento normal se queda en 4.36 de contraste ahí y no llega a AA. */
  --acento-texto:   #0b7268;

  /* Tintas */
  --tinta:          #0a0e14;
  --texto:          #0e141b;
  --texto-apagado:  #515d6c;
  --texto-suave:    #66707d;   /* AA sobre el fondo del sitio (4.76) */

  /* Superficies */
  --fondo:          #f7f9fb;
  --superficie:     #ffffff;
  --superficie-hundida: #eef2f6;

  /* Semánticos — solo para avisos, nunca decorativos */
  --atencion:       #9c5508;   /* AA sobre su propio fondo (5.27) */
  --atencion-fondo: #fdf6ec;
  --atencion-borde: rgba(156, 85, 8, 0.30);

  --borde:          rgba(20, 33, 48, 0.10);
  --borde-fuerte:   rgba(20, 33, 48, 0.16);

  --sombra-sm: 0 1px 2px rgba(16, 28, 42, 0.06), 0 1px 1px rgba(16, 28, 42, 0.04);
  --sombra-md: 0 4px 12px rgba(16, 28, 42, 0.08), 0 1px 3px rgba(16, 28, 42, 0.05);
  --sombra-lg: 0 16px 40px rgba(16, 28, 42, 0.14), 0 4px 12px rgba(16, 28, 42, 0.08);

  --radio:      12px;
  --radio-sm:   8px;
  --radio-lg:   16px;

  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --seccion: clamp(3.75rem, 7vw, 6.5rem);
  --ancho:   72rem;
}

/* ---------------------------------------------------------------------------
   3. Base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 0.9688rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;   /* cifras de ancho fijo: las columnas cuadran */
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--tinta);
  font-weight: 620;
  letter-spacing: -0.021em;
  line-height: 1.15;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--acento); text-underline-offset: 3px; }
a:hover { color: var(--acento-hover); }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

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

/* ---------------------------------------------------------------------------
   4. Utilidades
   --------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1.125rem, 4vw, 2rem);
}
.contenedor--angosto { max-width: 54rem; }

/* Texto solo para lectores de pantalla */
.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Salto directo al contenido, para quien navega con teclado */
.saltar {
  position: absolute; left: 0.5rem; top: -3rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--tinta); color: #fff;
  border-radius: var(--radio-sm);
  text-decoration: none; font-weight: 600;
  transition: top 140ms ease;
}
.saltar:focus { top: 0.5rem; color: #fff; }

/* Micro-etiqueta en monoespaciada — el recurso tipográfico de esta dirección */
.etiqueta {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 0.875rem;
}
.etiqueta--neutra { color: var(--texto-suave); }

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  background: var(--acento-tenue);
  color: var(--acento-texto);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
}

/* ---------------------------------------------------------------------------
   5. Botones
   --------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.8rem 1.5rem;
  background: var(--acento);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.9688rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-sm);
  cursor: pointer;
  transition: background-color 130ms ease, box-shadow 130ms ease, transform 130ms ease;
}
.boton:hover { background: var(--acento-hover); color: #fff; box-shadow: var(--sombra-md); }
.boton:active { background: var(--acento-press); transform: translateY(1px); box-shadow: var(--sombra-sm); }

.boton--fantasma {
  background: var(--superficie);
  color: var(--texto);
  border-color: var(--borde-fuerte);
}
.boton--fantasma:hover { background: var(--superficie); color: var(--acento); border-color: var(--acento); }

/* Botón grande — el de descarga, que debe ser imposible de no ver */
.boton--grande {
  min-height: 3.75rem;
  padding: 1rem 2.25rem;
  font-size: 1.0625rem;
}

/* Grupo de botones que van juntos (correo + WhatsApp) */
.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.acciones--izquierda { justify-content: flex-start; }

/* El glifo de WhatsApp se pinta con el color del texto del botón: la marca
   de ContaXML manda sobre el verde de WhatsApp, que aquí desentonaría. */
.icono-wa { width: 1.125rem; height: 1.125rem; fill: currentColor; flex: none; }

/* ---------------------------------------------------------------------------
   6. Encabezado
   --------------------------------------------------------------------------- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 10;
  /* Opaco a propósito: la marca no usa desenfoque, y un fondo translúcido
     deja ver el texto pasando por detrás al hacer scroll. */
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
}

.encabezado__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 4rem;
}

.marca { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--tinta); }
.marca__nombre { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.025em; }
/* "XML" en verde, como en el logotipo del producto */
.marca__xml { color: var(--acento); }

.navegacion { display: flex; align-items: center; gap: 0.35rem; }
.navegacion a {
  color: var(--texto-apagado);
  text-decoration: none;
  font-size: 0.9063rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radio-sm);
  transition: background-color 120ms ease, color 120ms ease;
}
.navegacion a:hover { background: var(--acento-apenas); color: var(--acento); }
/* Página en la que estás */
.navegacion a[aria-current="page"] { color: var(--acento); background: var(--acento-apenas); }

@media (max-width: 42rem) {
  .encabezado__fila { flex-direction: column; align-items: stretch; gap: 0.5rem; padding-block: 0.75rem; }
  .navegacion {
    justify-content: space-between;
    /* Red de seguridad: con cinco enlaces (desde que existe /manual) la barra
       se pasa a dos líneas antes que desbordar la página. */
    flex-wrap: wrap;
    gap: 0;
    padding: 0.25rem;
    background: var(--superficie-hundida);
    border-radius: var(--radio-sm);
  }
  .navegacion a { font-size: 0.8438rem; padding: 0.5rem; }
}

/* A 320 px —el ancho más estrecho que se mide— los cinco enlaces no caben con
   el tamaño de arriba. Se aprietan un poco en vez de partirse en dos líneas:
   una barra de dos renglones en la pantalla más chica se come el poco alto que
   hay. Comprobado a 320, 375 y 430 px. */
@media (max-width: 23rem) {
  .navegacion a { font-size: 0.75rem; padding: 0.5rem 0.3125rem; }
}

/* ---------------------------------------------------------------------------
   7. Cabecera de páginas interiores (precios, descargar, legales)
   --------------------------------------------------------------------------- */
.cabecera {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
}
.cabecera__titulo {
  font-size: clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);
  letter-spacing: -0.028em;
  max-width: 22ch;
  margin-bottom: 0.875rem;
}
.cabecera__entrada {
  font-size: clamp(1.0313rem, 1rem + 0.3vw, 1.125rem);
  color: var(--texto-apagado);
  max-width: 56ch;
}

/* ---------------------------------------------------------------------------
   8. Sección principal del inicio
   --------------------------------------------------------------------------- */
.principal { padding-block: clamp(2.75rem, 6vw, 5rem) var(--seccion); }

.principal__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.principal__titulo {
  font-size: clamp(2.125rem, 1.5rem + 2.9vw, 3.375rem);
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
  max-width: 17ch;
}

.principal__entrada {
  font-size: clamp(1.0313rem, 1rem + 0.3vw, 1.125rem);
  color: var(--texto-apagado);
  max-width: 46ch;
  margin-bottom: 2rem;
}

.principal__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.principal__nota { font-family: var(--mono); font-size: 0.75rem; color: var(--texto-suave); letter-spacing: 0.02em; }

/* Ficha de "de un vistazo" */
.ficha { padding: 1.5rem; }
.ficha__titulo {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 1.125rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--borde);
}
.ficha__lista { list-style: none; margin: 0; padding: 0; }
.ficha__renglon {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.6875rem;
  border-bottom: 1px solid var(--borde);
}
.ficha__renglon:last-child { border-bottom: none; padding-bottom: 0; }
.ficha__clave { color: var(--texto-apagado); font-size: 0.9063rem; }
.ficha__valor { font-weight: 600; color: var(--tinta); font-size: 0.9063rem; text-align: right; }
.ficha__valor--acento { color: var(--acento); }

@media (max-width: 56rem) {
  .principal__rejilla { grid-template-columns: 1fr; gap: 2.5rem; }
  .principal__titulo { max-width: 20ch; }
}

/* ---------------------------------------------------------------------------
   9. Pasos y capacidades

   Media sección arriba y abajo: estas secciones se apilan sobre el mismo fondo
   y sin línea que las separe, así que el espacio completo dejaba un hueco muerto.
   --------------------------------------------------------------------------- */
.pasos { padding-block: calc(var(--seccion) * 0.5); }
.pasos__encabezado { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.pasos__titulo { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem); max-width: 22ch; }

.pasos__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.paso { padding: 1.5rem; }
.paso__numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  background: var(--acento-tenue); color: var(--acento-texto);
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 700;
  border-radius: var(--radio-sm); margin-bottom: 1rem;
}
.paso__titulo { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.paso__texto { color: var(--texto-apagado); font-size: 0.9063rem; }

@media (max-width: 56rem) { .pasos__lista { grid-template-columns: 1fr; } }

.capacidades { padding-block: calc(var(--seccion) * 0.5); }
.capacidades__encabezado { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.capacidades__titulo { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem); max-width: 24ch; }

/* CADA CAPACIDAD ES UNA FILA: la captura a un lado y su explicación al otro,
   alternando el lado en cada fila. Antes eran seis tarjetas de texto en
   rejilla de tres; se cambió el 28-ago porque las capturas en tres columnas
   salían tan chicas que no se leía nada dentro de ellas.

   Las filas impares llevan la captura a la izquierda; las pares la mandan a la
   derecha con `order`, y eso es todo el zigzag. Las dos columnas miden igual
   para que la captura ocupe media pantalla, que es lo que la hace legible. */
.capacidades__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
}
.capacidad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.capacidad__vista { order: 1; }
.capacidad__dicho { order: 2; max-width: 38ch; }
.capacidad:nth-child(even) .capacidad__vista { order: 2; }
.capacidad:nth-child(even) .capacidad__dicho { order: 1; justify-self: end; }

/* La captura es un enlace a su propia lupa: el cursor y el realce al pasar
   por encima avisan de que se puede agrandar. */
.capacidad__vista {
  display: block;
  border-radius: var(--radio);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.capacidad__vista img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
}
.capacidad__vista:hover { transform: translateY(-2px); }
.capacidad__vista:hover img { box-shadow: var(--sombra-md); border-color: var(--borde-fuerte); }

.capacidad__marca {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  background: var(--acento-apenas);
  border: 1px solid var(--acento-tenue);
  border-radius: var(--radio-sm);
  margin-bottom: 1rem;
}
.capacidad__marca svg { width: 1.125rem; height: 1.125rem; stroke: var(--acento); }
.capacidad__titulo { font-size: 1.1875rem; margin-bottom: 0.5rem; }
.capacidad__texto { color: var(--texto-apagado); font-size: 0.9688rem; }

/* En pantalla angosta se apila y la captura va SIEMPRE arriba: es lo que
   engancha, y así el orden no baila entre filas pares e impares. */
@media (max-width: 56rem) {
  .capacidad { grid-template-columns: 1fr; gap: 1rem; }
  .capacidad__vista,
  .capacidad:nth-child(even) .capacidad__vista { order: 1; }
  .capacidad__dicho,
  .capacidad:nth-child(even) .capacidad__dicho { order: 2; max-width: none; justify-self: stretch; }
}

/* ---------------------------------------------------------------------------
   9b. LUPA — ver una captura a tamaño grande sin salir de la página

   Sin JavaScript: es el selector :target. Cada captura enlaza a #captura-N;
   el navegador marca ese bloque como "objetivo" y el CSS lo muestra. Se cierra
   con la ✕, haciendo clic en cualquier parte del fondo, o con el botón Atrás
   del navegador. La tecla Escape la atiende el script de index.html, que ya
   existía para otra cosa — no se agregó ningún <script> nuevo.
   --------------------------------------------------------------------------- */
.lupa {
  position: fixed; inset: 0; z-index: 60;
  display: none;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  background: rgba(10, 14, 20, 0.85);
}
.lupa:target { display: grid; }

/* Enlace invisible que cubre todo el fondo: hace que un clic fuera cierre. */
.lupa__fondo { position: absolute; inset: 0; }

.lupa img {
  position: relative;
  max-width: 100%; max-height: 88vh;
  width: auto; height: auto;
  border-radius: var(--radio);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.lupa__cerrar {
  position: absolute;
  top: clamp(0.5rem, 2vw, 1.25rem);
  right: clamp(0.5rem, 2vw, 1.25rem);
  width: 2.75rem; height: 2.75rem;      /* 44 px: zona táctil mínima */
  display: grid; place-items: center;
  background: var(--superficie);
  color: var(--texto);
  border-radius: var(--radio-sm);
  font-size: 1.125rem; line-height: 1;
  text-decoration: none;
}
.lupa__cerrar:hover { background: var(--superficie-hundida); }

/* ---------------------------------------------------------------------------
   10. Bloque de privacidad — la objeción que más frena la venta
   --------------------------------------------------------------------------- */
.privacidad { padding-block: calc(var(--seccion) * 0.5); }

.privacidad__caja {
  padding: clamp(1.75rem, 4vw, 3rem);
  background:
    linear-gradient(180deg, var(--acento-apenas) 0%, rgba(255,255,255,0) 55%),
    var(--superficie);
  border-radius: var(--radio-lg);
}
.privacidad__titulo { font-size: clamp(1.625rem, 1.35rem + 1.4vw, 2.375rem); margin-bottom: 1.25rem; max-width: 20ch; }
.privacidad__cuerpo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2.5rem; max-width: 62rem;
}
.privacidad__texto { color: var(--texto-apagado); font-size: 1rem; }
.privacidad__texto strong { color: var(--tinta); font-weight: 600; }

@media (max-width: 46rem) { .privacidad__cuerpo { grid-template-columns: 1fr; } }

/* Cierre con llamado a la acción */
.cierre { padding-block: calc(var(--seccion) * 0.5) var(--seccion); }
.cierre__caja { padding: clamp(2rem, 5vw, 3.25rem); text-align: center; border-radius: var(--radio-lg); box-shadow: var(--sombra-md); }
.cierre__titulo { font-size: clamp(1.625rem, 1.35rem + 1.4vw, 2.25rem); margin-bottom: 0.875rem; max-width: 20ch; margin-inline: auto; }
.cierre__texto { color: var(--texto-apagado); max-width: 44ch; margin: 0 auto 1.75rem; }
.cierre__nota { margin-top: 1rem; font-family: var(--mono); font-size: 0.75rem; color: var(--texto-suave); letter-spacing: 0.02em; }

/* ---------------------------------------------------------------------------
   11. Precios
   --------------------------------------------------------------------------- */
.precios { padding-block: clamp(2.5rem, 5vw, 4rem) var(--seccion); }

.precios__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

/* La tarjeta del plan */
.plan { padding: clamp(1.75rem, 4vw, 2.5rem); box-shadow: var(--sombra-md); }
.plan__nombre { font-size: 1.25rem; margin-bottom: 0.35rem; }
.plan__para { color: var(--texto-apagado); font-size: 0.9375rem; margin-bottom: 1.75rem; }

.plan__cifra {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
}
.plan__monto {
  font-size: clamp(2.75rem, 2.2rem + 2.4vw, 3.75rem);
  font-weight: 660;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--tinta);
}
.plan__moneda { font-family: var(--mono); font-size: 0.875rem; color: var(--texto-suave); font-weight: 600; }
.plan__iva {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--acento);
  margin-bottom: 0.35rem;
}
.plan__periodo { color: var(--texto-apagado); font-size: 0.9375rem; margin-bottom: 1.75rem; }

.plan__incluye { list-style: none; margin: 0 0 1.75rem; padding: 1.5rem 0 0; border-top: 1px solid var(--borde); }
.plan__incluye li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.75rem;
  align-items: start;
  padding-block: 0.55rem;
  font-size: 0.9688rem;
}
.plan__incluye svg { width: 1.125rem; height: 1.125rem; stroke: var(--acento); margin-top: 0.15rem; }
.plan__incluye strong { font-weight: 620; color: var(--tinta); }

.plan__nota-pago {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--texto-apagado);
  text-align: center;
}

/* Columna de al lado: condiciones que hay que decir con todas sus letras */
.condiciones { display: grid; gap: 1rem; }
.condicion { padding: 1.5rem; }
.condicion__titulo { font-size: 1.0313rem; margin-bottom: 0.5rem; }
.condicion__texto { color: var(--texto-apagado); font-size: 0.9375rem; }
.condicion__texto + .condicion__texto { margin-top: 0.75rem; }
.condicion__texto strong { color: var(--tinta); font-weight: 620; }

@media (max-width: 56rem) { .precios__rejilla { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   12. Página de descarga
   --------------------------------------------------------------------------- */
.descarga { padding-block: clamp(2.5rem, 5vw, 4rem) calc(var(--seccion) * 0.5); }

.descarga__caja {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--sombra-md);
  text-align: center;
}
.descarga__archivo {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--texto-suave);
  margin-top: 1rem;
  word-break: break-word;
}

/* Lo que incluye la prueba. Va ARRIBA y en tamaño de lectura normal:
   nadie debe pagar creyendo que probó lo mismo que compró. */
.prueba {
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--acento-apenas);
  border: 1px solid var(--acento-tenue);
  border-radius: var(--radio);
  text-align: left;
}
.prueba__titulo {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.prueba__texto { color: var(--texto-apagado); font-size: 0.9375rem; }
.prueba__texto strong { color: var(--tinta); font-weight: 650; }
.prueba__texto + .prueba__texto { margin-top: 0.6rem; }

/* Aviso de atención — el de "editor desconocido" de Windows */
.aviso {
  margin-block: clamp(1.75rem, 4vw, 2.5rem);
  padding: clamp(1.5rem, 3.5vw, 2rem);
  background: var(--atencion-fondo);
  border: 1px solid var(--atencion-borde);
  border-left: 3px solid var(--atencion);
  border-radius: var(--radio);
}
.aviso__titulo {
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.aviso__titulo svg { width: 1.25rem; height: 1.25rem; stroke: var(--atencion); flex: none; }
.aviso__texto { color: var(--texto-apagado); font-size: 0.9688rem; max-width: 68ch; }
.aviso__texto + .aviso__texto { margin-top: 0.75rem; }
.aviso__texto strong { color: var(--tinta); font-weight: 620; }

.aviso__pasos { margin: 1.25rem 0 0; padding: 0; list-style: none; counter-reset: paso; }
.aviso__pasos li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.75rem;
  align-items: start;
  padding-block: 0.5rem;
  font-size: 0.9688rem;
}
.aviso__pasos li::before {
  content: counter(paso);
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  background: var(--atencion); color: #fff;
  font-family: var(--mono); font-size: 0.75rem; font-weight: 700;
  border-radius: 50%;
}
/* Los nombres de botón que verá en Windows, tal cual aparecen */
.tecla {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
}

/* Requisitos */
.requisitos { padding-block: calc(var(--seccion) * 0.5); }
.requisitos__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.requisito { padding: 1.25rem 1.5rem; }
.requisito__clave {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--texto-suave); margin-bottom: 0.4rem;
}
.requisito__valor { font-size: 1.0313rem; font-weight: 620; color: var(--tinta); }

@media (max-width: 46rem) { .requisitos__lista { grid-template-columns: 1fr; } }

/* Galería de capturas y video */
/* Bloque del video, arriba del inicio. Reaprovecha el hueco 16:9 y el pie de
   la galería; cuando exista demo.mp4 el hueco se cambia por un <video>. */
.video { padding-block: calc(var(--seccion) * 0.5) 0; }

.galeria { padding-block: calc(var(--seccion) * 0.5); }
.galeria__encabezado { margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem); }
.galeria__titulo { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem); max-width: 22ch; }

.galeria__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
@media (max-width: 62rem) { .galeria__lista { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 42rem) { .galeria__lista { grid-template-columns: 1fr; } }

/* HUECO DE CAPTURA — se sustituye por <img> cuando existan las imágenes.
   Mantiene la proporción 16:10 para que el diseño no salte al reemplazarlo. */
.hueco {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-content: center;
  gap: 0.4rem;
  padding: 1rem;
  text-align: center;
  background:
    repeating-linear-gradient(
      45deg,
      var(--superficie-hundida) 0 10px,
      var(--superficie) 10px 20px
    );
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio);
  overflow: hidden;
}
.hueco__que { font-size: 0.9375rem; font-weight: 620; color: var(--texto-apagado); }
.hueco__medida { font-family: var(--mono); font-size: 0.6875rem; color: var(--texto-suave); letter-spacing: 0.04em; }

/* Hueco del video, más ancho */
/* El video real (1600×1000) sustituyó a su hueco el 28-ago; la regla
   .hueco--video se retiró por quedarse sin uso. El <video> se dimensiona con
   sus atributos width/height más la regla global de más arriba
   (`img, svg, video { max-width: 100%; height: auto; }`), que le reserva su
   sitio antes de cargar y evita que el diseño salte. */
.video video { border-radius: var(--radio); box-shadow: var(--sombra-sm); }

.galeria__pie { margin-top: 0.6rem; font-size: 0.875rem; color: var(--texto-apagado); }

/* Las capturas, cuando existan, se estilan con esto */
.galeria__lista img,
.galeria img {
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
}

/* ---------------------------------------------------------------------------
   13. Páginas legales

   Medida de lectura corta, interlineado amplio y tablas legibles. El texto
   jurídico va íntegro: aquí solo se le da formato.
   --------------------------------------------------------------------------- */
.legal { padding-block: clamp(2rem, 4vw, 3rem) var(--seccion); }

.legal__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
/* Los dos hijos deben poder encogerse por debajo de su contenido: si no, la
   tabla más ancha del documento (34rem) estira la columna y saca scroll
   horizontal en el celular. El desplazamiento lo resuelve .tabla-envoltura. */
.legal__rejilla > * { min-width: 0; }

/* Índice de secciones — se queda fijo al hacer scroll en pantallas grandes */
.indice {
  position: sticky;
  top: 5.5rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  padding: 1.25rem;
  font-size: 0.875rem;
}
.indice__titulo {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 0.875rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--borde);
}
.indice__lista { list-style: none; margin: 0; padding: 0; }
.indice__lista a {
  display: block;
  padding: 0.4rem 0.5rem;
  margin-inline: -0.5rem;
  color: var(--texto-apagado);
  text-decoration: none;
  border-radius: 6px;
  line-height: 1.4;
}
.indice__lista a:hover { background: var(--acento-apenas); color: var(--acento); }
.indice__lista--parte > li { margin-top: 0.75rem; }
.indice__parte {
  font-family: var(--mono); font-size: 0.6563rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texto-suave);
  padding: 0.5rem 0 0.25rem;
}

/* En pantallas chicas el índice se pliega arriba del documento */
@media (max-width: 60rem) {
  /* minmax(0, 1fr) y no 1fr a secas: "1fr" equivale a minmax(auto, 1fr), y
     ese "auto" toma como mínimo el ancho del contenido más terco. */
  .legal__rejilla { grid-template-columns: minmax(0, 1fr); }
  .indice { position: static; max-height: none; }
}

/* El cuerpo del documento */
.documento {
  max-width: 72ch;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--texto);
}
.documento > * + * { margin-top: 1.125rem; }

.documento h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--borde);
  scroll-margin-top: 5.5rem;   /* para que el ancla no quede bajo el encabezado */
}
.documento h3 {
  font-size: 1.125rem;
  margin-top: 2.25rem;
  scroll-margin-top: 5.5rem;
}
.documento h4 { font-size: 1.0313rem; margin-top: 1.75rem; }

/* Los títulos de PARTE separan bloques mayores del aviso */
.documento h1 {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  margin-top: 3.5rem;
  padding: 1.25rem 0;
  border-top: 2px solid var(--acento);
  border-bottom: 1px solid var(--borde);
  scroll-margin-top: 5.5rem;
}
.documento > h1:first-child { margin-top: 0; }

.documento strong { font-weight: 650; color: var(--tinta); }

.documento ul, .documento ol { margin: 1.125rem 0; padding-left: 1.5rem; }
.documento li { margin-block: 0.5rem; }
.documento li > ul, .documento li > ol { margin-block: 0.5rem; }

.documento hr { border: none; border-top: 1px solid var(--borde); margin-block: 2rem; }

/* Citas: notas explicativas y casillas de consentimiento del aviso */
.documento blockquote {
  margin: 1.5rem 0;
  padding: 1.125rem 1.375rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  color: var(--texto-apagado);
  font-size: 0.9688rem;
}
.documento blockquote > * + * { margin-top: 0.75rem; }

/* Tablas: se desplazan solas si no caben, sin empujar la página */
.tabla-envoltura {
  margin: 1.5rem 0;
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--superficie);
}
.documento table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9063rem;
  line-height: 1.55;
}
.documento thead th {
  position: sticky; top: 0;
  background: var(--superficie-hundida);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta);
  text-align: left;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--borde-fuerte);
  white-space: nowrap;
}
.documento tbody td {
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}
.documento tbody tr:last-child td { border-bottom: none; }
.documento tbody tr:nth-child(even) { background: rgba(20, 33, 48, 0.018); }

/* MARCADORES PENDIENTES del texto legal.
   Se resaltan a propósito para que no se confundan con articulado y sean
   fáciles de localizar. Cuando llegue la versión final del abogado ya no
   existirán; si quieres ocultarlos antes, borra esta regla. */
.pendiente {
  background: var(--atencion-fondo);
  border-bottom: 2px solid var(--atencion-borde);
  color: var(--atencion);
  font-weight: 600;
  padding: 0.05rem 0.25rem;
  border-radius: 3px;
}

/* Cabecera propia del documento legal */
.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--texto-suave);
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
   14. Pie
   --------------------------------------------------------------------------- */
.pie {
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  font-size: 0.9063rem;
}
.pie__rejilla {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start;
}
/* La marca ocupa el lugar donde antes iban la razón social, el RFC y el
   domicilio (director, 2-sep). Mismo isotipo del encabezado, un poco mayor. */
.pie__marca {
  display: inline-flex; align-items: center; gap: 0.625rem;
  text-decoration: none; margin-bottom: 1rem;
}
.pie__marca-nombre {
  font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; color: var(--tinta);
}
.pie__dato { color: var(--texto-apagado); }
.pie__dato + .pie__dato { margin-top: 0.2rem; }
.pie__dato--mono { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.02em; }

.pie__encabezado {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--texto-suave); margin-bottom: 0.875rem;
}
.pie__lista { list-style: none; margin: 0; padding: 0; }
.pie__lista li + li { margin-top: 0.5rem; }
.pie__lista a { color: var(--texto-apagado); text-decoration: none; display: inline-block; padding-block: 0.15rem; }
.pie__lista a:hover { color: var(--acento); }

.pie__legal {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--borde);
  color: var(--texto-suave);
  font-size: 0.8438rem;
  max-width: 76ch;
}

@media (max-width: 46rem) { .pie__rejilla { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------------------------------------------------------------------------
   15. Movimiento

   Aparición al hacer scroll. Se prefiere `animation-timeline` (CSS puro, sin
   JavaScript); donde no exista, el respaldo del HTML agrega la clase `.visible`.
   Si el navegador no soporta ninguno de los dos, el contenido simplemente se
   ve, sin animación: nunca queda invisible.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .aparece {
      animation: aparecer linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 20%;
    }
  }
  @supports not (animation-timeline: view()) {
    .aparece {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 540ms cubic-bezier(0.22, 1, 0.36, 1),
                  transform 540ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .aparece.visible { opacity: 1; transform: none; }
  }
  @keyframes aparecer {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Quien pidió menos movimiento en su sistema no ve ninguno */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Transición suave entre páginas.
   Solo actúa servido por http(s); abriendo el archivo directo no se aplica. */
@view-transition { navigation: auto; }

/* ---------------------------------------------------------------------------
   16. Impresión — para quien quiera guardar los legales en PDF
   --------------------------------------------------------------------------- */
@media print {
  .encabezado, .pie, .indice, .saltar { display: none; }
  body { background: #fff; font-size: 10.5pt; }
  .legal__rejilla, .manual__rejilla { grid-template-columns: 1fr; }
  .documento { max-width: none; }
  .documento h1, .documento h2, .documento h3 { break-after: avoid; }
  .tabla-envoltura, .documento blockquote { break-inside: avoid; }
  a { color: inherit; text-decoration: underline; }

  /* Un <details> plegado no se imprime. Al mandar el manual al papel se
     abren todos: quien imprime quiere el manual entero, no lo que dejó
     abierto en pantalla. */
  .modulo { display: block; }
  .modulo > .modulo__cuerpo { display: block !important; }
  .modulo__cabeza::after { display: none; }
  .manual__figura { break-inside: avoid; }
}

/* ---------------------------------------------------------------------------
   17. Manual  (contaxml.com/manual)

   La página la GENERA herramientas/generar_manual.py; aquí solo vive su
   aspecto. El cuerpo reutiliza la clase .documento de las páginas legales
   —misma tipografía de contenido, ya probada— y esta sección añade lo suyo:
   la rejilla, los módulos plegables, el buscador y las capturas.
   --------------------------------------------------------------------------- */
.manual { padding-block: clamp(2rem, 4vw, 3rem) var(--seccion); }

.manual__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
/* Igual que en los legales: los hijos deben poder encogerse por debajo de su
   contenido, o la tabla más ancha saca scroll horizontal en el celular. */
.manual__rejilla > * { min-width: 0; }

/* Las capturas del programa son anchas (1600×1000); el manual necesita algo
   más de medida que el texto legal para que se lean sin agrandarlas. */
.manual__cuerpo { max-width: 78ch; }

.manual__portada { color: var(--texto-apagado); }
.manual__portada > * + * { margin-top: 1rem; }

/* --- Un módulo por apartado, plegable ------------------------------------- */
.modulo {
  margin-top: 2rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  overflow: hidden;
  scroll-margin-top: 5.5rem;
}

.modulo__cabeza {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.125rem 1.375rem;
  cursor: pointer;
  background: var(--superficie-hundida);
  border-bottom: 1px solid transparent;
  list-style: none;          /* fuera el triángulo del navegador… */
  user-select: none;
}
.modulo__cabeza::-webkit-details-marker { display: none; }   /* …y en Safari */
.modulo__cabeza:hover { background: var(--acento-apenas); }
.modulo__cabeza:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}
.modulo[open] > .modulo__cabeza { border-bottom-color: var(--borde); }

/* El chevron: gira al abrir. Es un borde girado, no una imagen ni un icono
   de biblioteca — el sitio no carga recursos de fuera. */
.modulo__cabeza::after {
  content: "";
  margin-left: auto;
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave);
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}
.modulo[open] > .modulo__cabeza::after { transform: rotate(45deg); }

/* El h2 del módulo vive dentro del summary: se le quitan el borde superior y
   el espacio que .documento h2 le pone en las páginas legales. */
.modulo__titulo {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
}

.modulo__cuerpo { padding: 1.5rem 1.375rem 1.75rem; }
.modulo__cuerpo > * + * { margin-top: 1.125rem; }

/* El primer título de un módulo no necesita separarse del borde de arriba */
.modulo__cuerpo > .manual__seccion:first-child > :first-child,
.modulo__cuerpo > :first-child { margin-top: 0; }

/* Grupos que arma el buscador para poder esconder una sección entera.
   Sin JavaScript no existen y no hace falta que existan. */
.manual__seccion > * + * { margin-top: 1.125rem; }
.manual__seccion + .manual__seccion { margin-top: 1.75rem; }

/* --- Las capturas ---------------------------------------------------------- */
.manual__figura {
  margin: 1.5rem 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  overflow: hidden;
  background: var(--superficie-hundida);
  box-shadow: var(--sombra-sm);
}
.manual__figura img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Buscador -------------------------------------------------------------- */
.buscador { margin-bottom: 1.25rem; }
.buscador__etiqueta {
  display: block;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 0.5rem;
}
.buscador__campo {
  width: 100%;
  padding: 0.5rem 0.625rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
}
.buscador__campo:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}
.buscador__resultado {
  margin-top: 0.5rem;
  min-height: 1.2em;          /* reserva el hueco: el índice no salta al buscar */
  font-size: 0.8125rem;
  color: var(--texto-suave);
}

/* --- Los títulos de tema, en cuadro ----------------------------------------
   Sin esto un título de sección se distingue del texto solo por el grosor de
   la letra, y en un manual largo hay que leer para saber dónde empieza cada
   tema (director, 2-sep). El cuadro los vuelve puntos de referencia: se ven
   pasando la página rápido. */
.manual__titulo-3 {
  margin-top: 2.5rem !important;
  padding: 0.625rem 0.875rem;
  background: var(--acento-apenas);
  border-left: 3px solid var(--acento);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  color: var(--tinta);
  scroll-margin-top: 5.5rem;
}
.manual__seccion:first-child > .manual__titulo-3,
.modulo__cuerpo > .manual__titulo-3:first-child { margin-top: 0 !important; }

/* El cuarto nivel NO lleva cuadro: si todo destaca, nada destaca. Se marca con
   una línea corta, que basta para saber que cuelga del título de arriba. */
.manual__titulo-4 {
  margin-top: 1.75rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--borde-fuerte);
  scroll-margin-top: 5.5rem;
}

/* --- Índice lateral: un desplegable por tema -------------------------------- */
.indice__grupo { border-bottom: 1px solid var(--borde); }
.indice__lista > li:last-child .indice__grupo { border-bottom: none; }

.indice__tema {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem;
  font-weight: 600;
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.indice__tema::-webkit-details-marker { display: none; }
.indice__tema:hover { color: var(--acento); }
.indice__tema:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

/* Mismo chevron que los módulos del cuerpo, más chico */
.indice__tema::after {
  content: "";
  margin-left: auto;
  width: 0.375rem; height: 0.375rem;
  border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave);
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}
.indice__grupo[open] > .indice__tema::after { transform: rotate(45deg); }
.indice__grupo[open] > .indice__tema { color: var(--acento); }

.indice__sublista { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.indice__sub > a {
  padding-left: 0.75rem;
  font-size: 0.8125rem;
}

@media (max-width: 60rem) {
  .manual__rejilla { grid-template-columns: minmax(0, 1fr); }
  /* El índice del manual tiene 69 entradas —el de los legales, quince—. En el
     celular pasa a estar ARRIBA del texto, así que se le pone techo y scroll
     propio: sin esto habría que pasar el manual entero de enlaces antes de
     leer la primera línea. */
  .manual__indice {
    position: static;
    max-height: 55vh;
    overflow-y: auto;
  }
  .modulo__cuerpo { padding: 1.25rem 1rem 1.5rem; }
}