/* ══════════════════════════════════════════════════════════════
   Tokens — un solo lugar para cada color. Nada de literales fuera
   de este bloque. Los valores salen de la maqueta aprobada por el
   usuario (sitio-direccion.html); el ícono de marca (--pino/--crema)
   sale de la página de contenido que ya existía.
   ══════════════════════════════════════════════════════════════ */
:root{
  --papel:#f6f8f7; --superficie:#ffffff; --superficie-2:#eef2f1;
  --tinta:#0d1f1c; --tinta-tenue:#4b6360;
  --marca:#0d3b36; --acento:#128276; --acento-suave:#d9ece9;
  --vino:#8e2f3f; --vino-suave:#f6e6e8;
  --borde:#d3dedc; --borde-fuerte:#b3c5c2;
  --pino:#0d3b36; --crema:#f4f1e9;
  --sombra:0 1px 2px rgba(6,20,18,.06), 0 8px 24px -12px rgba(6,20,18,.18);
  --radio:14px;
  --toque-minimo:44px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --papel:#0a1211; --superficie:#101b19; --superficie-2:#16241f;
  --tinta:#e8f0ee; --tinta-tenue:#93aaa6;
  --marca:#25d2bf; --acento:#25d2bf; --acento-suave:#12312d;
  --vino:#e08a97; --vino-suave:#2a1519;
  --borde:#22332f; --borde-fuerte:#2f4540;
  --sombra:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -14px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --papel:#0a1211; --superficie:#101b19; --superficie-2:#16241f;
  --tinta:#e8f0ee; --tinta-tenue:#93aaa6;
  --marca:#25d2bf; --acento:#25d2bf; --acento-suave:#12312d;
  --vino:#e08a97; --vino-suave:#2a1519;
  --borde:#22332f; --borde-fuerte:#2f4540;
  --sombra:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -14px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
body{
  background:var(--papel); color:var(--tinta); margin:0; padding:0 0 90px;
  font:400 17px/1.62 "Source Serif 4", Georgia, serif;
  -webkit-font-smoothing:antialiased;
}
.env{max-width:1120px; margin:0 auto; padding:0 24px}
.angosto{max-width:66ch}

h1,h2,h3,.display{font-family:"Bricolage Grotesque", system-ui, sans-serif; letter-spacing:-.025em}
h1{font-size:clamp(38px,6.6vw,76px); line-height:1.02; font-weight:800; margin:0 0 20px; text-wrap:balance; color:var(--marca)}
h2{font-size:clamp(27px,3.8vw,40px); line-height:1.1; font-weight:700; margin:0 0 14px; text-wrap:balance; color:var(--marca)}
h3{font-size:19px; line-height:1.25; font-weight:600; margin:32px 0 10px; color:var(--tinta)}
.eyebrow{
  font:500 11px/1 "IBM Plex Mono", monospace; letter-spacing:.16em;
  text-transform:uppercase; color:var(--acento); margin:0 0 14px;
}
p{margin:0 0 18px}
.tenue{color:var(--tinta-tenue)}
strong{font-weight:600}
em{font-style:italic; color:var(--tinta-tenue)}
a{color:var(--acento)}
:focus-visible{outline:2px solid var(--acento); outline-offset:3px}
code,.mono{font-family:"IBM Plex Mono", monospace; font-size:.88em; background:var(--superficie-2); border:1px solid var(--borde); border-radius:3px; padding:.08em .34em; overflow-wrap:anywhere}

/* ── atajos del héroe: agrupados por intención ──────────────────
   DP.1: reemplaza las siete cajas de ancho dispar que caían en bloque
   irregular (maqueta con cuatro tratamientos, opción D elegida por el
   usuario — ver /private/tmp/.../menu-atajos.html en el reporte de esa
   pasada). El agrupamiento no es estético: la página tiene dos
   audiencias. Quien llega a CONOCER la aplicación lee las cuatro
   primeras entradas; quien llega a verificar qué se hace con sus datos
   —o Google revisando el complemento para el Marketplace— va directo a
   las tres últimas. Siete opciones planas no dicen eso; dos grupos sí. */
.atajos{display:grid; gap:14px; padding:22px 0 0; margin:0}
.atajos-titulo{
  font:500 10px/1 "IBM Plex Mono", monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta-tenue);
  display:block; margin:0 0 7px;
}
.atajos ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.atajos a{
  display:flex; align-items:center; gap:9px; min-height:var(--toque-minimo);
  padding:9px 12px; border-radius:9px; background:var(--superficie-2);
  text-decoration:none; color:var(--tinta);
  font:600 14.5px/1.25 "Bricolage Grotesque", sans-serif;
}
.atajos-punto{width:5px; height:5px; border-radius:50%; background:var(--acento); flex:none}
.utilidades{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:0 0 34px;font:500 12px/1 "IBM Plex Mono",monospace}.menu-info{position:relative}.menu-info summary,.idioma{display:flex;align-items:center;min-height:var(--toque-minimo);padding:0 12px;border:1px solid var(--borde);border-radius:8px;background:var(--superficie);color:var(--tinta);cursor:pointer;text-decoration:none}.menu-info summary::-webkit-details-marker{display:none}.menu-info summary::after{content:"▾";margin-left:8px}.menu-info-lista{position:absolute;right:0;z-index:10;display:grid;gap:3px;min-width:220px;margin-top:8px;padding:7px;border:1px solid var(--borde);border-radius:9px;background:var(--superficie);box-shadow:0 10px 24px #0002}.menu-info-lista a{padding:10px;border-radius:6px;color:var(--tinta);text-decoration:none}.menu-info-lista a:hover,.menu-info-lista a:focus-visible{background:var(--superficie-2)}.idioma--activo{background:var(--acento);border-color:var(--acento);color:var(--pino)}

/* ── el ícono de marca, heredado de la página que ya existía ── */
.marca-fila{display:flex; align-items:center; gap:14px; margin:0 0 18px}
.marca-icono-mini{width:44px; height:44px; border-radius:24%; background:var(--pino); display:grid; place-items:center; flex:none}

/* ── HÉROE ── */
.heroe{padding:76px 0 64px; border-bottom:1px solid var(--borde)}
.heroe-rejilla{display:grid; gap:48px; align-items:center}
@media (min-width:900px){ .heroe-rejilla{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} }
.bajada{font-size:clamp(18px,2.2vw,22px); line-height:1.5; color:var(--tinta-tenue); max-width:34ch; margin:0 0 20px}
/* DP.1: en fila (pantalla ancha) cada botón mide lo que mide su texto, y
   se ve bien así — no hay que estirarlos a lo ancho de toda la columna.
   Apilados (celular) esa misma lógica dejaba el borde derecho dentado: un
   botón entero angosto y el otro largo, uno debajo del otro. La rejilla
   de una sola columna reparte el ancho disponible por igual entre los
   dos cuando se apilan; desde el punto en que entran en una fila se pasa
   a flex, que respeta el ancho natural de cada texto. */
.acciones{display:grid; grid-template-columns:1fr; gap:11px; margin-bottom:8px}
@media (min-width:600px){
  .acciones{display:flex; flex-wrap:wrap; align-items:center}
}
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
  font:600 15px/1 "Bricolage Grotesque", sans-serif;
  padding:15px 22px; border-radius:99px; min-height:var(--toque-minimo);
  background:var(--marca); color:var(--papel); border:1px solid var(--marca);
}
/* #06110f es el color de TEXTO correcto sobre el RELLENO de acento del
   botón principal — nunca sobre el fondo de la página. Nació apuntando a
   ".boton" a secas ("todos los botones"), cuando el destinatario real era
   "el botón relleno" (DL.2, setiembre 2026). La especificidad de
   ":root:not([data-theme="light"]) .boton" (0,3,0) le ganaba a
   ".boton--linea" (0,1,0) sin importar el orden de aparición en el
   archivo, así que el botón de línea TAMBIÉN quedaba pintado casi negro
   sobre el papel oscuro — invisible, 1.01:1 contra los 4.5:1 que exige
   WCAG. El bug existía SOLO en modo oscuro porque, ahí, la regla de abajo
   es la única con especificidad más alta que ".boton--linea"; en el resto
   de casos que compiten en 0,1,0 gana el orden de aparición, que ya era
   correcto. Corregido acotando estas tres reglas con ":not(.boton--linea)"
   — la causa era el ALCANCE de la regla ("todos"), no su especificidad en
   sí, así que subirle especificidad a ".boton--linea" habría apagado el
   síntoma sin cerrar el agujero para el próximo botón que alguien agregue. */
/* DL.3 (setiembre 2026): la regla de arriba, ANTES de esta pasada, estaba
   ADEMÁS duplicada SUELTA (sin @media ni [data-theme="dark"]) — y esa
   copia suelta se filtraba al modo CLARO, porque ":root:not([data-theme=
   "light"])" coincide también cuando el elemento raíz NO tiene ningún
   data-theme estampado, que es el estado "sistema" por defecto. Con el
   sistema en claro, ese estado también caía bajo la regla, así que el
   botón relleno quedaba con #06110f (casi negro) sobre --marca claro
   (#0d3b36) — 1.55:1 contra los 4.5:1 exigidos, reportado como deuda por
   DL.2 y cerrado acá. Es un error DISTINTO del que corrigió DL.2 arriba
   (aquél era de ESPECIFICIDAD/alcance de SELECTOR; este es de alcance de
   ESTADO): la copia suelta nunca debió existir. Eliminada — quedan las
   dos copias que corresponden a los dos estados reales de "oscuro":
   sistema en oscuro (@media, la línea de abajo) y data-theme="dark"
   estampado (la línea siguiente a esa). REGLA GENERAL para toda esta
   página: una anulación de modo oscuro va DENTRO de su @media, o en un
   bloque [data-theme="dark"], NUNCA suelta — suelta, se aplica también
   al estado por defecto sin estampar. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .boton:not(.boton--linea){color:#06110f}}
:root[data-theme="dark"] .boton:not(.boton--linea){color:#06110f}
.boton--linea{background:transparent; color:var(--tinta); border-color:var(--borde-fuerte)}

/* ── MARCO DE TELÉFONO — el espacio de captura ──────────────────
   Cada marco lleva un <img> (o <video> para registrar.mp4) en
   capa absoluta cubriendo todo el marco. Si el archivo todavía no
   existe, onerror lo saca del documento y queda a la vista el
   marcador de posición que vive detrás, en flujo normal — un
   elemento posicionado siempre se pinta encima de uno en flujo,
   sin importar el orden en el HTML, así que el marcador nunca se
   asoma cuando la imagen sí carga. */
.tel{
  --ancho:250px;
  width:var(--ancho); aspect-ratio:9/19.5; flex:none;
  border-radius:28px; padding:8px; background:var(--superficie-2);
  border:1px solid var(--borde-fuerte); box-shadow:var(--sombra);
  position:relative;
}
.tel--chica{--ancho:190px}
.tel-pantalla{
  width:100%; height:100%; border-radius:21px; overflow:hidden;
  position:relative;
  background:linear-gradient(168deg, var(--superficie) 0%, var(--superficie-2) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; text-align:center; padding:18px;
}
.tel-pantalla img, .tel-pantalla video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.tel-pantalla .que{font:600 13px/1.3 "Bricolage Grotesque",sans-serif; color:var(--tinta)}
.tel-pantalla .icono{
  width:34px;height:34px;border-radius:9px;background:var(--acento-suave);
  border:1px solid var(--borde-fuerte);
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.tel::after{
  content:""; position:absolute; top:15px; left:50%; transform:translateX(-50%);
  width:52px; height:4px; border-radius:99px; background:var(--borde-fuerte); opacity:.7;
}
.tel--video .tel-pantalla{border:1px dashed var(--borde-fuerte)}
.paso-tel-doble{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ── secciones y bento ── */
.seccion{padding:72px 0; border-bottom:1px solid var(--borde)}
.seccion:last-of-type{border-bottom:0}
.bento{display:grid; gap:14px; grid-template-columns:1fr; margin-top:34px}
@media (min-width:700px){ .bento{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .bento{grid-template-columns:repeat(3,1fr)} }
.celda{
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--radio); padding:24px; min-width:0;
}
.celda p{margin:0; font-size:15.5px; line-height:1.55; color:var(--tinta-tenue)}
.celda--ancha{grid-column:span 1}
@media (min-width:700px){ .celda--ancha{grid-column:span 2} }
.celda .sup{
  font:500 10px/1 "IBM Plex Mono",monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--acento); display:block; margin-bottom:11px;
}
.celda--marca{background:var(--marca); border-color:var(--marca)}
.celda--marca .sup{color:var(--papel); opacity:.72}
.celda--marca h3, .celda--marca p{color:var(--papel)}
/* DL.3 (setiembre 2026): estas cuatro reglas estaban SUELTAS (sin @media
   ni [data-theme="dark"]), así que se filtraban al estado "sistema, sin
   estampar" con el sistema en CLARO — la celda destacada perdía el
   relleno de marca (--marca) y tomaba el tratamiento de oscuro también en
   claro. No era un bug de contraste (el texto seguía midiendo bien contra
   el fondo pastel), era el aspecto EQUIVOCADO. A diferencia del botón de
   arriba (que tenía sus TRES copias, y a la suelta se le podía borrar sin
   perder cobertura), esta celda NO tenía copia con [data-theme="dark"] —
   borrar la suelta a ciegas habría roto el conmutador explícito a oscuro
   para esta celda. Por eso estas cuatro se CONVIRTIERON a
   [data-theme="dark"] en vez de borrarse, espejando lo que el botón
   relleno ya hace más arriba. */
:root[data-theme="dark"] .celda--marca{background:var(--acento-suave); border-color:var(--borde-fuerte)}
:root[data-theme="dark"] .celda--marca h3{color:var(--tinta)}
:root[data-theme="dark"] .celda--marca p{color:var(--tinta-tenue)}
:root[data-theme="dark"] .celda--marca .sup{color:var(--acento); opacity:1}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .celda--marca{background:var(--acento-suave); border-color:var(--borde-fuerte)}
  :root:not([data-theme="light"]) .celda--marca h3{color:var(--tinta)}
  :root:not([data-theme="light"]) .celda--marca p{color:var(--tinta-tenue)}
  :root:not([data-theme="light"]) .celda--marca .sup{color:var(--acento); opacity:1}
}
.celda h3{margin-top:0}

/* ── por los números ── */
.cifras{display:grid; gap:14px; margin-top:34px; grid-template-columns:1fr}
@media (min-width:640px){ .cifras{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .cifras{grid-template-columns:repeat(3,1fr)} }
.cifra-caja{
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--radio); padding:26px 24px 24px; min-width:0;
}
/* DP.1: existió acá `.cifra-caja--par` (borde fuerte + fondo
   acento-suave) para que el "9" y el "4" se leyeran como pareja. En el
   teléfono las cifras se apilan, así que la pareja no se lee y quedaba
   una tarjeta especial sin motivo — y peor, el resalte le competía al
   "0 servidores con tus datos", el número que de verdad importa en esta
   banda. Se sacó la clase y su uso; las seis tarjetas quedan iguales.
   Si hace falta volver a agrupar dos cifras, que no sea con un fondo
   tintado acá: eso vuelve a desordenar la jerarquía. */
.cifra-num{
  font:800 clamp(46px,6.4vw,64px)/.95 "Bricolage Grotesque",sans-serif;
  letter-spacing:-.045em; color:var(--acento); margin:0 0 8px;
  font-variant-numeric:tabular-nums;
}
.cifra-rot{
  font:600 15.5px/1.35 "Bricolage Grotesque",sans-serif; letter-spacing:-.012em;
  color:var(--tinta); margin:0 0 8px;
}
.cifra-nota{font-size:14.5px; line-height:1.5; color:var(--tinta-tenue); margin:0}

/* ── lo que NO hace ── */
.no-lista{list-style:none; padding:0; margin:24px 0 0; max-width:none;
  display:grid; gap:11px}
@media (min-width:760px){ .no-lista{grid-template-columns:repeat(2,1fr)} }
.no-lista li{
  display:flex; gap:13px; align-items:flex-start; min-width:0;
  background:var(--superficie); border:1px solid var(--borde);
  border-left:3px solid var(--vino); border-radius:0 var(--radio) var(--radio) 0;
  padding:15px 18px;
}
.no-lista .marca-no{
  font:700 15px/1 "IBM Plex Mono",monospace; color:var(--vino); flex:none; margin-top:3px;
}
.no-lista b{display:block; font-family:"Bricolage Grotesque",sans-serif; font-weight:600;
  font-size:15.5px; margin-bottom:3px; letter-spacing:-.01em}
.no-lista span.d{font-size:14.5px; line-height:1.5; color:var(--tinta-tenue)}

/* ── tres maneras de anotar un movimiento (ya venía así en la página) ── */
.formas{
  display:grid; gap:18px; margin:26px 0;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
}
.forma{
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--radio); padding:24px; box-shadow:var(--sombra);
}
.forma .paso-etiqueta{
  font-family:"IBM Plex Mono", monospace; font-size:10px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-tenue); margin:0 0 10px;
}
.forma h3{margin:0 0 8px; font-size:1.05rem}
.forma p{margin:0; font-size:.95rem; max-width:none; color:var(--tinta-tenue)}

/* ── qué se queda y qué sale (ya venía así en la página) ── */
.datos{ display:grid; gap:18px; margin:26px 0 }
@media (min-width:780px){ .datos{grid-template-columns:1fr 1fr} }
.caja{
  border-radius:var(--radio); padding:26px; box-shadow:var(--sombra);
  border:1px solid var(--borde); background:var(--superficie);
}
.caja.queda{border-color:var(--acento); background:var(--acento-suave)}
.caja h3{margin-top:0}
.caja ul{margin-bottom:0; max-width:none; font-size:.96rem; padding-left:1.25em}
.caja li{margin-bottom:9px}
.caja li::marker{color:var(--acento)}
.caja .remate{
  margin:18px 0 0; padding-top:14px;
  border-top:1px dashed var(--borde-fuerte);
  font-family:"IBM Plex Mono", monospace; font-size:11px;
  line-height:1.6; color:var(--tinta-tenue); max-width:none;
}
.nohay{ list-style:none; padding:0; margin:24px 0; max-width:none;
  display:grid; gap:9px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)) }
.nohay li{
  position:relative; padding:12px 16px 12px 40px; margin:0;
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:3px; font-size:.95rem;
}
.nohay li::before{
  content:"✕"; position:absolute; left:15px; top:12px;
  color:var(--vino); font-family:"IBM Plex Mono", monospace; font-weight:600;
}

/* ── el recorrido: pantalla por pantalla ── */
.paso{
  display:grid; gap:30px; align-items:center; padding:44px 0;
  border-bottom:1px dashed var(--borde);
}
.paso:last-child{border-bottom:0}
@media (min-width:860px){
  .paso{grid-template-columns:250px minmax(0,1fr)}
  .paso--der{grid-template-columns:minmax(0,1fr) 250px}
  .paso--der .paso-tel{order:2}
}
.paso-tel{display:flex; justify-content:center}
.paso-txt{min-width:0}
.paso-ruta{
  display:inline-block; font:500 11px/1 "IBM Plex Mono",monospace;
  letter-spacing:.1em; color:var(--acento); border:1px solid var(--borde-fuerte);
  border-radius:99px; padding:6px 11px; margin-bottom:13px;
}
.paso-txt p{font-size:16.5px; color:var(--tinta-tenue); margin:0 0 12px}
.paso-txt p:last-child{margin:0}
.detalle{
  list-style:none; margin:14px 0 0; padding:0; display:grid; gap:7px;
  font:400 14.5px/1.5 "Source Serif 4",serif; color:var(--tinta-tenue);
}
.detalle li{display:flex; gap:9px}
.detalle li::before{content:"→"; color:var(--acento); flex:none; font-family:"IBM Plex Mono",monospace}

.nota{
  background:var(--superficie); border:1px solid var(--borde);
  border-left:3px solid var(--acento); border-radius:0 var(--radio) var(--radio) 0;
  padding:26px 28px; margin-top:34px;
}
.nota p{color:var(--tinta-tenue); font-size:16px; margin:0}

/* ── documento legal (ya venía así en la página) ── */
.legal{
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--radio); padding:32px; margin:26px 0; box-shadow:var(--sombra);
}
.legal .vigencia{
  font-family:"IBM Plex Mono", monospace; font-size:11px;
  letter-spacing:.08em; color:var(--tinta-tenue);
  margin:0 0 24px; padding-bottom:16px; border-bottom:1px solid var(--borde);
  max-width:none;
}
.legal h3:first-of-type{margin-top:0}
.legal ol{counter-reset:clausula; list-style:none; padding:0; margin:0}
.legal ol > li{
  counter-increment:clausula; position:relative;
  padding-left:38px; margin-bottom:18px; scroll-margin-top:90px;
}
.legal ol > li::before{
  content:counter(clausula); position:absolute; left:0; top:2px;
  font-family:"IBM Plex Mono", monospace; font-size:11px; font-weight:600;
  color:var(--acento); background:var(--acento-suave);
  width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; line-height:1;
}
.legal ol > li b{
  display:block; font-family:"Bricolage Grotesque", sans-serif;
  font-weight:600; font-size:1rem; margin-bottom:4px; color:var(--tinta);
}
.legal h3{scroll-margin-top:90px}
.legal p, .legal ul{max-width:68ch}
.legal ul{padding-left:1.25em}
.legal li::marker{color:var(--acento)}

.indice-legal{
  display:flex; flex-wrap:wrap; gap:7px; list-style:none; padding:0;
  margin:0 0 26px; font-family:"IBM Plex Mono", monospace;
}
.indice-legal a{
  font-size:10.5px; letter-spacing:.06em; color:var(--tinta-tenue);
  text-decoration:none; border:1px solid var(--borde); border-radius:99px;
  padding:6px 12px; display:inline-flex; align-items:center;
  min-height:var(--toque-minimo);
}
.indice-legal a:hover, .indice-legal a:focus-visible{ color:var(--acento); border-color:var(--acento) }

.declaracion{
  background:var(--acento-suave); border-left:3px solid var(--acento);
  border-radius:0 3px 3px 0; padding:16px 20px; margin:0 0 14px;
  font-size:.96rem; max-width:none;
}
.declaracion:last-of-type{margin-bottom:22px}

.aviso-legal{
  background:var(--vino-suave); border:1px solid var(--vino);
  border-radius:var(--radio); padding:24px; margin:26px 0;
}
.aviso-legal .rotulo{
  font-family:"IBM Plex Mono", monospace; font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--vino); margin:0 0 12px;
}
.aviso-legal h3{margin:0 0 10px; color:var(--vino); font-size:1.1rem}
.aviso-legal p:last-child{margin-bottom:0}

.completar{
  background:var(--superficie-2); border:1px dashed var(--borde-fuerte);
  border-radius:3px; padding:3px 9px;
  font-family:"IBM Plex Mono", monospace; font-size:.84em;
  color:var(--tinta-tenue); white-space:nowrap;
}

.pie{
  margin-top:40px; padding-top:26px; border-top:2px solid var(--tinta);
  font-family:"IBM Plex Mono", monospace; font-size:11px;
  letter-spacing:.06em; color:var(--tinta-tenue); max-width:none;
  line-height:1.9;
}

/* ══════════════════════════════════════════════════════════════
   MOVIMIENTO AL HACER SCROLL
   ══════════════════════════════════════════════════════════════
   🔴 Tres reglas que no se negocian:

   1. El estado oculto vive detrás de `html.js`, que SOLO existe si el
      script corrió. Si el JavaScript falla, no se agrega la clase y la
      página se ve completa. Nunca `opacity: 0` en el CSS a secas.

   2. `prefers-reduced-motion: reduce` apaga TODO: cero transform, cero
      transición, y los números salen en su valor final sin contar. El
      movimiento se ve, no se sufre.

   3. Se revela UNA vez, al entrar. No se vuelve a esconder al salir:
      leer hacia arriba y ver todo desaparecer es hostil.
   ══════════════════════════════════════════════════════════════ */
/* ── LA PERILLA DE VELOCIDAD ────────────────────────────────────
   Escala del usuario, de 1 a 10, donde 10 es lo más rápido.
   Se cambia ACÁ y en `ESCALA` del script, los dos al mismo número.

     escala 10  →  --factor: 0.50     un parpadeo
     escala  7  →  --factor: 0.71
     escala  5  →  --factor: 1.00     el punto de partida
     escala  3  →  --factor: 1.67  ←  acá estamos
     escala  1  →  --factor: 5.00     casi ceremonioso

   El factor es 5 / escala. Todas las duraciones se multiplican por él,
   así una sola cifra mueve el ritmo entero sin desbalancearlo. */
html.js{ --factor: 1.67 }

html.js [data-revelar]{
  opacity:0; transform:translateY(14px);
  transition:
    opacity calc(520ms * var(--factor)) cubic-bezier(.22,.61,.36,1),
    transform calc(520ms * var(--factor)) cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--retraso, 0ms);
  will-change:opacity, transform;
}
html.js [data-revelar].visto{opacity:1; transform:none; will-change:auto}

@media (prefers-reduced-motion: reduce){
  html.js [data-revelar]{opacity:1 !important; transform:none !important; transition:none !important}
}

@media (max-width: 420px){ .tel{--ancho:210px} }

/* DQ.1: documento estático legible, sin animación ni JavaScript obligatorio. */
.documento{max-width:850px;padding-top:32px;padding-bottom:48px}.documento h1{margin:32px 0}.documento h2{font-size:clamp(1.3rem,4vw,1.8rem);margin:40px 0 16px}.documento p,.documento li{overflow-wrap:anywhere}.documento .meta{color:var(--tinta-tenue)}.documento nav a,.documento footer a{display:inline-flex;align-items:center;min-height:var(--toque-minimo)}