/* ═══ INTER · LA TIPOGRAFÍA DE LA MARCA ══════════════════════════════════════
   Fuente de verdad: frontend/src/shared/styles/theme.ts del repo de la app —
   «Inter everywhere, single violet #5B4DBE».

   🔴 VA AUTO-HOSPEDADA, NO DESDE GOOGLE FONTS, Y NO ES UN CAPRICHO.
   El sitio no hace UN SOLO pedido a un tercero, y la Política de Privacidad lo
   dice por escrito: «no usamos cookies de sesión, ni publicitarias, ni de
   analítica, ni de terceros». Cargarla desde fonts.googleapis.com mandaría la
   IP de cada visitante a Google en cada carga — dato personal, a un tercero,
   sin consentimiento y sin declararlo.

   `font-display:swap` y no `block`: `block` esconde el titular hasta que llegue
   el archivo. El <link rel="preload" ... crossorigin> de la latin va en el HTML
   de las 27 páginas; sin el `crossorigin` el preload se descarta y el archivo
   se baja dos veces.

   ⚠️ NO SE CARGA LA ITÁLICA: en todo el sitio hay tres <i> (los tres en
   /privacidad) y el navegador las inclina solo.

   🔴 EL EJE ES 100..900, NO 400..700, y el descriptor de abajo lo declara así.
   Los rótulos de bloque y los titulares piden 800, y con el descriptor viejo
   (`400 700`) el navegador clampeaba todo 800 a 700.
   ⚠️ NO HAY NINGÚN ENTREGABLE PENDIENTE ACÁ: los dos .woff2 del repo YA son
   Inter variable de rango completo — verificado leyendo la tabla `fvar` con
   fontTools: `wght 100.0 / 400.0 / 900.0` en los dos. Lo único que estaba mal
   era el descriptor de `@font-face`, y ya está arreglado.
   Un comentario anterior pedía «regenerar los .woff2 desde Inter v4»: era
   falso, y peligroso, porque el camino más corto para conseguir eso es Google
   Fonts — que es exactamente lo que el encabezado de este archivo prohíbe, y
   lo prohíbe porque la Política de Privacidad declara cero pedidos a terceros.
   Un comentario equivocado acá crea la tarea que rompe una promesa legal. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;          /* variable: un archivo, todos los pesos */
  font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Lisa AI — sistema visual de las páginas de documento.

   🔴 ESTA HOJA ES CLARA. Fondo blanco, tinta #14141A, acento violeta #5B4DBE.
   (El comentario que había acá describía un sistema oscuro —#0b0916 / #efedfa,
   «la portada vive en styles-dark.css», «--brand-ink es el lila más claro»—
   que NO existe y nunca coincidió con el código. styles-dark.css no existe: la
   portada es home.css. Quien reescriba leyendo aquel texto «restaura» una
   paleta oscura y rompe las 27 páginas. El bloque :root de abajo es la única
   fuente de verdad.)

   La cargan 27 archivos: 7 en la raíz (404, arrepentimiento, baja, contacto,
   eliminar-cuenta, privacidad, terminos) + 20 en /ayuda (index + 19 artículos).
   index.html NO la carga: la portada es home.css.

   👉 UNIFICACIÓN CON LA PORTADA · la regla que resuelve todo empate: donde la
   portada y el contraste chocan, GANA EL CONTRASTE. La coherencia se compra con
   tipografía, radios, espaciado, sombra y acento — nunca bajando un ratio.

   ⚠️ LAS 20 PÁGINAS DE /ayuda TRAEN UN <style> EMBEBIDO QUE SE CARGA DESPUÉS DE
   ESTA HOJA. A igual especificidad gana el de la página. Por eso todo lo que
   acá tiene que pisarlo va prefijado con `.cats ` o `.wrap ` —(0,2,x) contra
   (0,1,x)—. Si se le saca el prefijo, el diseño se aplica A MEDIAS: entra lo
   que el inline no declara y se pierde lo que sí.
   Lo mismo, al revés, con /baja y /arrepentimiento: sus <style> por página
   pisan a propósito h1, .wrap y .cual a (promesa contractual de la 26.4). Si
   acá se sube la especificidad de una regla global —`.wrap h1` en vez de `h1`—
   esas sobreescrituras mueren en silencio.
   ───────────────────────────────────────────────────────────────────────────── */
:root{
  /* ── Fondo y superficies ──────────────────────────────────────────────────
     --soft se declara SÓLIDO a propósito: una superficie semitransparente
     apilada dentro de otra da un contraste distinto en cada anidamiento y deja
     de poder medirse de memoria. */
  --bg:#FFFFFF;
  --soft:#F2F2F7;
  /* 1,28:1 — divisor: separa, no se lee. Está bien que no cumpla; por eso el
     borde de campo es OTRO token. Se descarta el --hair:#ECECEC (1,18:1) de la
     portada: un solo hilo para todo el sitio vale más que 0,6% de luz. */
  --line:#E3E3EA;
  /* El hilo de la barra de arriba va aparte de `--line`: es el mismo
     que la portada (`--hair` en home.css) y tiene que seguir sien-
     dolo. `--line` lo usan otras 16 reglas (fichas, tablas, separa-
     dores) y no hay motivo para arrastrarlas. */
  --hair:#ECECEC;

  /* ── Tinta ────────────────────────────────────────────────────────────────
     Se mantiene #14141A y NO se adopta el #040404 de la portada: #14141A es el
     `textPrimary` de theme.ts y la diferencia de ratio es invisible. */
  --ink:#14141A;        /* 18,4:1 sobre --bg · 16,4:1 sobre --soft */

  /* 🔴 DIVERGENCIA DELIBERADA CON LA PORTADA. La home usa --muted:#6E6E6E
     (5,10:1). Acá se queda #5C5C66 (6,61:1) porque este token pinta texto
     informativo de documentos con revisión legal: el nav, la letra chica del
     pie, la Ventanilla Única y los hints de /baja y /arrepentimiento. Bajar de
     6,6 a 5,1 sigue pasando AA, pero es una degradación real y gratuita.
     ⚠️ NUNCA el textTertiary #8A8A94 (3,42:1) como texto. El propio sistema de
     la app lo dice: «textTertiary is only for timestamps/disabled». */
  --muted:#5C5C66;      /* 6,61:1 sobre --bg · 5,92:1 sobre --soft */

  /* Un borde de campo no es decoración: es lo único que dice dónde se escribe,
     y WCAG 2.2 · 1.4.11 le pide 3:1. --line da 1,28 y no alcanza. La portada NO
     tiene este token (su único input estilado se queda sin contorno medible). */
  --borde-campo:#8A8A94; /* 3,42:1 sobre --bg · 3,06:1 sobre --soft — CONTORNO, jamás texto */

  /* ── Acento · UN SOLO VIOLETA EN TODO EL DOMINIO ───────────────────────────
     Gana #5B4DBE sobre el #6E3AED de la portada, en este orden: (1) contraste
     6,46 vs 6,02; (2) es el `accent` de theme.ts, el mismo violeta que pinta el
     Play del reproductor dentro de la app; (3) acá la familia derivada ya está
     medida y en home.css no hay ninguna. */
  --brand:#5B4DBE;      /* 6,46:1 · enlaces, bordes, foco, botón primario */
  --brand-ink:#5B2FD1;  /* 7,58:1 sobre --bg · 6,45:1 sobre --brand-soft.
                           ⚠️ el :root viejo decía 8,1:1 y el comentario de la
                           franja 11,07:1 — los dos estaban mal (ese 11,07 se
                           midió sobre el DOM oscuro que ya no existe). */
  /* 🔴 4,35:1 — NO LLEGA A 4,5 (el :root viejo decía 4,9 y estaba mal). Queda
     SOLO como extremo decorativo de degradé donde no se apoya texto.
     PROHIBIDO como fondo de texto blanco. Hoy no lo usa nadie. */
  --brand-2:#7C5CFF;
  --brand-soft:#EFEAFF; /* violetTint · pastilla */
  --sobre-brand:#FFFFFF;

  /* ── Estados · 🔴 EL COLOR VA EN EL HILO, NO EN LA TINTA ───────────────────
     Sobre su propio tinte el texto de color no llega: ámbar 3,90 · azul 4,05 ·
     verde 3,12. El estado lo dice el hilo de 3px (decoración, sin mínimo) y el
     texto va en tinta principal: 16,9 / 16,6 / 16,7:1. Pintar el texto del
     color del estado rompe los tres callouts a la vez. */
  --warn-bg:#FFF4E5;  --warn-line:#B26A00;  --warn-ink:#14141A;
  --box-bg:#EEF4FD;   --box-line:#2F74E0;   --box-ink:#14141A;
  --ok-bg:#ECF7F3;    --ok-line:#109E6E;    --ok-ink:#14141A;
  --ok-txt:#0E7A55;   /* 5,34:1 · el verde para TEXTO (el :root viejo decía 4,9) */

  /* ── Medida · UN SOLO EJE para .site-inner, .franja-in y .wrap ─────────────
     Antes la barra medía 840 y el contenido 780, así que el logo arrancaba 30px
     a la izquierda del título: dos ejes verticales en la misma pantalla. */
  --medida:780px;
  --gutter:20px;
  --barra-h:64px;     /* el mismo --mast-h de la portada */

  /* ── Radios · la portada no los tokeniza; se extraen de su patrón real ─────
     999px = control · 20px = tarjeta/panel · 12px = bloque y fila de lista ·
     10px = campo · 11px = ficha de icono. */
  --r-pill:999px; --r-card:20px; --r-bloque:12px; --r-ctl:10px; --r-ficha:11px;

  /* ── Sombras · elevación neutra sobre la tinta del sitio ──────────────────
     🔴 Reemplazan al `0 6px 22px rgba(11,9,22,.5)` del hover de las tarjetas de
     /ayuda, que era resto del sistema oscuro: un manchón negro al 50% sobre
     página blanca. */
  --sombra-1:0 8px 26px rgba(20,20,26,.08);   /* reposo */
  --sombra-2:0 16px 42px rgba(20,20,26,.14);  /* hover */
  --halo-brand:0 8px 24px rgba(91,77,190,.26);/* solo el CTA primario */

  /* ── Espacio · múltiplos de 4, que ya era la escala del sitio ────────────── */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px;

  /* La curva de la portada: es su firma de interacción. */
  --spring:cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box}
/* El atributo [hidden] tiene que ganarle a cualquier `display` de clase. Sin
   esto, un elemento con display:flex/grid/inline-block ignora el hidden y se
   muestra igual — nos pasó con el "Un segundo…" de /cuenta. */
[hidden]{display:none!important}

/* El halo violeta de arriba es el MISMO de la portada, y es lo que hace que el
   clic de «BOTÓN DE BAJA DE SERVICIO» no se sienta como un salto a otro sitio.
   Va en el body y como background-image —no como capas <div> ni pseudo-
   elementos— por dos razones: son documentos de hasta 121 KB y no hace falta
   pagar dos capas fijas más en cada scroll, y el medidor de contraste de
   _audit.html compone el fondo REAL caminando por los padres, así que un fondo
   de body con degradado no apaga la medición (la resuelve contra el color de
   base). Si se mueve a un <div> con opacidad, se ciega la auditoría entera.
   `fixed` y no `scroll`: sin eso el halo se repite cada 800px y en /privacidad
   —que mide 8 pantallas— se ve como una guarda.

   🔴 17px/1,7 y NO los 16,5/1,62 del lector de la portada: abajo de este body
   cuelgan 121 KB de /privacidad y 78 KB de /terminos, y ahí medio punto de
   cuerpo son varias pantallas de diferencia leyendo. */
body{
  margin:0;color:var(--ink);
  background:var(--bg);
  background-image:
    radial-gradient(62% 38% at 50% -8%, rgba(91,77,190,.07), transparent 72%),
    radial-gradient(38% 30% at 92% 4%, rgba(91,77,190,.05), transparent 72%);
  background-attachment:fixed;background-repeat:no-repeat;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
}

/* ══ CHROME · la barra, la franja legal y la marca ═══════════════════════════
   Alto real medido: 65px (marca + nav) + 53px (franja) = 118px. La portada mide
   64 porque no tiene franja; la franja es obligación legal y no negociable, así
   que la divergencia es de un renglón y queda documentada acá. */

/* El mismo vidrio del masthead de la portada, con SUS números exactos: .84 de
   blanco, saturate 180%, blur 16 (antes .82/160/14). El -webkit- va ANTES.
   El hilo va como border-bottom y no como box-shadow a propósito: tiene que
   caer ENTRE los dos renglones de la barra y tiene que sobrevivir al papel. */
header.site{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--hair);
}
.site-inner{
  max-width:var(--medida);margin:0 auto;
  /* `--barra-h` es el alto TOTAL de la barra, el mismo `--mast-h` de la
     portada. El hilo de abajo es un `border` y suma al alto, así que se
     le descuenta acá: sin esto la barra medía 65 contra los 64 de la
     portada y la marca saltaba un pixel al navegar entre las dos. */
  min-height:calc(var(--barra-h) - 1px);padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.brand{
  display:inline-flex;align-items:center;gap:8px;
  font-size:17px;font-weight:800;letter-spacing:-.025em;color:var(--ink);text-decoration:none;
}
.brand svg{display:block}
/* UNA SOLA MARCA EN TODO EL SITIO: `/assets/logo-lisa-68.png`, la de la
   portada, a 34×34 con `object-fit:contain`, sin sombra y SIN RADIO.

   Hasta acá había dos archivos distintos —la portada con
   `img/logo-lisa.png` y las 32 páginas con `/assets/lisa-orb.png`— y leían
   como dos marcas: un orbe pálido sobre blanco de un lado, el ícono violeta
   de la app del otro. El radio de 8px existía para tapar las cuatro puntas
   duras que dejaba `lisa-orb.png`, cuyas esquinas eran violeta casi opaco
   (α≈220, medido). Sin ese archivo, el radio no tiene qué tapar.

   ⚠️ Las esquinas del asset nuevo son BLANCO OPACO, no transparentes. Se
   apoya sobre una barra de `rgba(255,255,255,.84)` con `backdrop-filter`, o
   sea que sobre fondo claro es invisible —pero si algún día la barra se
   oscurece o se le pone color, el cuadrado blanco va a aparecer. Ahí la
   solución es un PNG con alfa, no volver a poner un radio.

   🔴 El original de 1024×1024 (`img/logo-lisa.png`, 320 KB) NO va en una
   barra: se queda para el kit de prensa, que es una descarga. Acá va el
   derivado de 68×68 (4,6 KB), que es 2× el tamaño de dibujo. */
.brand .mark{
  width:34px;height:34px;flex:0 0 auto;object-fit:contain;display:block;
  border-radius:0;box-shadow:none;
}

/* El nav en píldoras, como los chips de la portada. Los 44px de alto no son
   estéticos: con el padding anterior medían 34 y en el celular se fallaba. */
nav.legal{display:flex;gap:4px;flex-wrap:wrap}
nav.legal a{
  font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--muted);
  text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;padding:5px 12px;
  border-radius:var(--r-pill);          /* 8px → 999px: es un control */
  transition:background .15s ease,color .15s ease;
}
nav.legal a:hover{background:var(--soft);color:var(--ink)}
nav.legal a[aria-current="page"]{
  color:var(--brand-ink);background:var(--brand-soft);font-weight:600;  /* 6,45:1 */
}

/* ── Los rótulos del consumidor, en la misma barra que el nav ────────────────
   Existe porque la cláusula 26.4 de los Términos, inciso (b), declara por
   escrito que en estas páginas los rótulos van «arriba del contenido,
   inmediatamente debajo del encabezado y sin desplazar la página». Hasta que se
   construyó esta franja estaban solo en la portada: en /terminos había que
   scrollear 33.493px para encontrarlos. Una cláusula que promete un tratamiento
   que la página no da es una infracción al art. 4 de la Ley 24.240 por sí
   misma, aparte de la Disposición 954/2025.
   (El inciso (a) es la franja de la portada, en home.css; el (c) es el
   .consumer-block del pie, más abajo en esta hoja.)

   🔴 VA DESPUÉS DEL <header>, COMO HERMANO, y no adentro de la barra:
     · el HTML lo escriben los generadores y ahí <div class="franja-rotulos"> es
       hermano del <header>, no hijo;
     · aunque se pudiera, no entra: el nav de cinco enlaces más la marca son
       ~564px y los dos rótulos piden ~423 más = 987 contra los 740 útiles de
       --medida. No entra ni en un monitor.
   Son dos renglones pero UNA barra: la franja no tiene fondo propio y los
   rótulos no son pastillas. Los DOS hilos de 1px son necesarios: el de
   header.site cae entre los dos renglones (el header es pegajoso y tiene que
   cerrarse al despegarse) y el de .franja-rotulos cierra la barra contra el
   contenido — sin él, el primer párrafo arranca pegado al rótulo.

   🔴 UNA SOLA DEFINICIÓN PARA TODOS LOS ANCHOS, sin @media propias. Con
   `justify-content:start` las columnas `auto` valen su max-content y el 0 del
   minmax las deja encoger: ahí el rótulo envuelve DENTRO de su columna, que no
   cuesta alto (dos renglones de 14px entran en los 44px del área táctil). Meter
   una @media para «arreglarlo» en celular rompe la promesa de «sin desplazar la
   página».

   🔴 EL PESO 700, Y POR QUÉ NO PUEDE SER 600. La 26.4 declara que los rótulos
   van «con mayor peso tipográfico que los demás enlaces de su misma franja».
   `nav.legal a[aria-current="page"]` ya usa 600 Y una pastilla de fondo: con
   600 había empate en peso y desventaja visual, justo en /terminos, que es la
   página donde el lector lo va a verificar.
   👉 Si alguien vuelve a bajarlo a 600, que sepa que pierde la jerarquía.

   ⚠️ OJO CON DE DÓNDE SALEN ESTOS PISOS. La cláusula 26.4 promete UBICACIÓN y
   ACCESO —texto literal y completo, en mayúsculas, a simple vista, en lugar
   destacado, en el primer acceso, sin registración previa, sin ingresar a
   ninguna cuenta y sin quedar escondidos en un desplegable— y NO especifica
   tipografía. Los cinco pisos de abajo se sostienen solos por WCAG (2.5.8 para
   el tap, 1.4.3 para el contraste) y por criterio de diseño; no los pide el
   contrato. Un comentario anterior los presentaba como «los cinco chequeos de
   la 26.4», y en un repo con revisión legal eso es deuda: o se agrega esa
   redacción a los Términos, o el CSS deja de citarla. Lo que la cláusula SÍ
   exige está cumplido y es otra cosa — ver el comentario de más arriba.

   LOS CINCO PISOS, RE-MEDIDOS SOBRE ESTA PALETA (los que había acá
   —11,07 / 9,59 / 7,45— eran del DOM oscuro):
     · contraste: rótulos --brand-ink 7,58:1 > nav --muted 6,61:1 ✔
       y > enlace activo (--brand-ink sobre --brand-soft) 6,45:1 ✔
     · peso: 700 > 600 del activo > 500 del resto ✔
     · cuerpo: 14px = los 14px del nav, nunca menor ✔
     · área táctil: 44px, en términos absolutos ✔
     · mayúsculas: salen del texto literal del HTML, jamás de text-transform ✔ */
/* La barra es sticky y mide --barra-h: sin esto, /baja y /arrepentimiento
   enlazan a /privacidad#c3 y la cláusula destino cae DEBAJO de la barra. Ahora
   que la altura es un token, sale gratis. */
:target{scroll-margin-top:calc(var(--barra-h) + 8px)}
.franja-rotulos{background:transparent;border-bottom:1px solid var(--line)}
.franja-in{
  width:100%;max-width:var(--medida);margin:0 auto;
  padding-left:var(--gutter);padding-right:var(--gutter);
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,auto);
  justify-content:start;column-gap:16px;padding-block:4px;
}
.franja-in a{
  display:flex;align-items:center;min-height:44px;
  color:var(--brand-ink);text-decoration:none;
  font-size:14px;font-weight:700;letter-spacing:.02em;line-height:1.2;
  transition:color .15s ease;
}
.franja-in a:hover{color:var(--brand-ink);text-decoration:underline}
.franja-in a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ══ LAYOUT ═════════════════════════════════════════════════════════════════ */
.wrap{max-width:var(--medida);margin:0 auto;padding:40px var(--gutter) 88px}

/* ══ TIPOGRAFÍA DE DOCUMENTO ════════════════════════════════════════════════
   Tracking, la regla de la portada: cuanto más grande, más negativo (≥30px →
   −.032em; 21px → −.028em; 17px → −.01em; prosa → normal). Cuanto más chico y
   en mayúsculas, más positivo (12px → +.08em; 11px → +.12em).
   Pesos permitidos: 400 · 500 · 600 · 700 · 800. Nada de 650 ni 750 (el
   font-matching los redondea igual) ni 900 (no se usa en ningún lado). */

/* 🔴 `color:var(--brand)` NO es decorativo: es lo que se ve en un motor sin
   -webkit-text-fill-color. Sin él el h1 queda INVISIBLE. Y el degradé arranca
   en --ink 20% para que el principio del título esté en tinta plena.
   Sigue siendo `h1` y no `.wrap h1`: los <style> de /baja y /arrepentimiento lo
   bajan a 27/22px con la misma especificidad y ganan por orden. */
h1{
  font-size:34px;line-height:1.1;letter-spacing:-.032em;margin:0 0 var(--e2);font-weight:800;
  background:linear-gradient(120deg,var(--ink) 20%,var(--brand));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--brand);
}
/* La fecha de última actualización: pastilla, tinta que le gana a un enlace
   común (6,45:1 sobre --brand-soft) y numerales de ancho fijo. */
.upd{
  display:inline-block;color:var(--brand-ink);background:var(--brand-soft);
  font-size:12.5px;font-weight:600;line-height:1;letter-spacing:.01em;
  padding:6px 13px;border-radius:var(--r-pill);margin:0 0 26px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 20%,transparent);
  font-variant-numeric:tabular-nums;
}
/* La bajada. /baja y /arrepentimiento la pisan a 17,5px desde su <style>. */
.lede{font-size:18px;line-height:1.52;font-weight:400;color:var(--ink);max-width:58ch;margin:0 0 10px}
h2{
  font-size:21px;line-height:1.25;letter-spacing:-.028em;font-weight:800;
  margin:var(--e6) 0 var(--e2);padding-left:13px;border-left:3px solid var(--brand);
}
h3{font-size:17px;line-height:1.35;letter-spacing:-.01em;font-weight:700;margin:var(--e5) 0 var(--e1)}
p,li{margin:var(--e3) 0}
ul{padding-left:22px}
b,strong{font-weight:700}

/* ── Enlaces · hubo que inventarlos, la portada no los tiene ─────────────────
   🔴 Medido: --brand (#5B4DBE) contra --ink (#14141A) da 2,8:1, por debajo del
   3:1 que WCAG 1.4.1 exige para distinguir un enlace SOLO por color. Con el
   `a{text-decoration:none}` que había, cada enlace dentro de un párrafo legal
   era un fallo de 1.4.1. Ahora el subrayado es el estado de reposo.
   NO copiar el reset `a{color:inherit;text-decoration:none}` de la portada. */
a{
  color:var(--brand);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--brand) 45%,transparent);
}
a:hover{text-decoration-thickness:2px;text-decoration-color:currentColor}
/* El chrome no es prosa: se distingue por forma y posición, no por subrayado. */
header a,nav.legal a,.franja-in a,.consumer-block a,.pie-nav a,
.btn,.btn--ghost,.back,.miga a,.btn-copiar,.tienda,.badge-plan,
.cats .cat a,#resultados .cat a,.hermanos a,.rows a.row{text-decoration:none}
.franja-in a:hover,.consumer-block a:hover,.miga a:hover{text-decoration:underline}

/* ⚖️ Las dos leyendas de la Disposición DNPDP N° 10/2008. La norma pide que
   vayan «en forma expresa y destacada»: filete de 3px y tinta de cuerpo, NUNCA
   --muted; si cae a gris queda como una línea más entre la letra chica.
   🔴 EL !important NO ES PEREZA. En /baja y /arrepentimiento estos dos párrafos
   llevan además class="hint" y son hijos directos del formulario, así que el
   `.form>.hint{color:var(--muted)}` del <style> de la página —(0,2,0) y en una
   hoja posterior— le ganaba a `.leyenda-dnpdp` (0,1,0) y las pintaba en gris.
   Es la única forma de garantizar la tinta desde acá sin tocar el HTML. El
   cuerpo sí se lo deja a la página: los 13px de ese .hint están medidos para
   que el campo del trámite entre en la primera pantalla de un celular. */
.leyenda-dnpdp{
  border-left:3px solid var(--brand);
  padding-left:12px;
  color:var(--ink)!important;
}

/* ══ TABLAS ═════════════════════════════════════════════════════════════════
   El overflow:hidden es lo único que hace valer el radio sobre una tabla
   colapsada.
   🔴 EL <th> NO LLEVA text-transform:uppercase NI BAJA DE CUERPO. Son los
   encabezados de la tabla del art. 4 (Ley 24.240) en /contacto y de las tres
   del art. 6 (Ley 25.326) en /privacidad: las mayúsculas de este sitio salen
   del texto literal del HTML, jamás de una regla de presentación. */
table{
  width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px;line-height:1.5;
  border:1px solid var(--line);border-radius:var(--r-bloque);overflow:hidden;
}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--soft);color:var(--ink);font-weight:700;line-height:1.5}
tr:last-child td{border-bottom:0}

/* ══ CALLOUTS ═══════════════════════════════════════════════════════════════
   El color lo lleva el hilo de 3px; el texto va en --ink. Ver el :root. */
.warn{
  background:var(--warn-bg);border-left:3px solid var(--warn-line);
  border-radius:0 var(--r-bloque) var(--r-bloque) 0;
  padding:12px 16px;margin:16px 0;font-size:15px;line-height:1.6;color:var(--warn-ink);
}
.box{
  background:var(--box-bg);border-left:3px solid var(--box-line);
  border-radius:0 var(--r-bloque) var(--r-bloque) 0;
  padding:12px 16px;margin:16px 0;font-size:15px;line-height:1.6;color:var(--box-ink);
}
.msg{font-size:14.5px;border-radius:var(--r-ctl);padding:10px 14px;margin:14px 0}
.msg--err{background:var(--warn-bg);border-left:3px solid var(--warn-line);color:var(--warn-ink)}
.msg--ok{background:var(--ok-bg);border-left:3px solid var(--ok-line);color:var(--ok-ink)}

/* ══ COMPONENTES ════════════════════════════════════════════════════════════ */

/* ── Formularios (login, baja, arrepentimiento) ──────────────────────────────
   🔴 ERA `max-width:440px` SUELTO DENTRO DE UN .wrap DE 780. En la misma página
   convivían dos anchos de lectura: los párrafos a 780 y el formulario a 440,
   pegado a la izquierda, con la mitad derecha vacía justo al lado de lo ÚNICO
   que hay que hacer en esa página. Ahora es una tarjeta que toma la columna
   entera: el fondo --soft la despega del texto y dice «esto es lo que hay que
   completar» sin necesidad de un título que lo diga. */
.form{
  max-width:none;margin:22px 0 0;
  background:var(--soft);border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px 20px 22px;box-shadow:var(--sombra-1);
}
.field{margin:0 0 var(--e4)}
.field label{display:block;font-size:14px;font-weight:700;line-height:1.3;letter-spacing:-.01em;margin-bottom:5px}
.field .hint{display:block;font-size:13px;line-height:1.6;color:var(--muted);margin-bottom:6px;font-weight:400}
/* 🔴 16px es un PISO: por debajo, iOS Safari hace zoom al enfocar y deja la
   página desalineada. Y el borde va con --borde-campo (3,42:1), nunca con
   --line (1,28:1): es el límite de un control, WCAG 1.4.11 le pide 3:1. */
.field input,.field textarea{
  width:100%;font:inherit;font-size:16px;line-height:1.4;color:var(--ink);background:var(--bg);
  border:1px solid var(--borde-campo);border-radius:var(--r-ctl);padding:11px 13px;
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.field textarea{min-height:90px;resize:vertical}   /* `both` rompe la caja a lo ancho */
.field input.code{font-size:24px;font-weight:700;line-height:1.2;letter-spacing:.32em;
  text-align:center;font-variant-numeric:tabular-nums}

/* ── El botón primario ───────────────────────────────────────────────────────
   El degradé y el halo son los de la portada, pero 🔴 el degradé va
   --brand → --brand-ink y NO hacia --brand-2: así todo punto del degradé queda
   entre 6,46 y 7,58:1 con el blanco. Con --brand-2 (#7C5CFF) el extremo claro
   da 4,35:1 y el botón principal de un trámite de baja fallaría AA.
   🔴 `font:inherit` es obligatorio: un <button> no hereda la tipografía y sin
   esto sale en Arial en medio de una página en Inter. */
.btn{
  display:inline-block;font:inherit;font-size:16px;font-weight:700;letter-spacing:-.01em;
  line-height:1;cursor:pointer;
  padding:12px 24px;border-radius:var(--r-pill);border:1px solid var(--brand);
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-ink) 100%);
  color:var(--sobre-brand);text-decoration:none;box-shadow:var(--halo-brand);
}
.btn:hover{background:var(--brand-ink);box-shadow:0 12px 30px rgba(91,77,190,.34);text-decoration:none}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn--ghost{background:transparent;color:var(--brand);box-shadow:none}
.btn--ghost:hover{background:var(--soft);color:var(--brand-ink);box-shadow:none}
/* min-height:44px y no solo en .fila-link: «Cerrar sesión» y los dos «Volver a
   ingresar» son .btn--link sueltos y medían 21px de alto. Son botones reales,
   no texto de párrafo; la auditoría no los veía porque viven en estados que
   arrancan con [hidden]. */
.btn--link{background:none;border:none;color:var(--brand);padding:0;
  font:inherit;font-size:15px;line-height:1.4;text-decoration:underline;cursor:pointer;
  display:inline-flex;align-items:center;min-height:44px}
.btn--link:hover{color:var(--brand-ink)}

/* ── El pliegue ─────────────────────────────────────────────────────────────
   <details> nativo, sin una línea de JavaScript: se abre sin script, el
   buscador lo indexa y el Ctrl+F del navegador encuentra lo que hay adentro —
   que es lo que separa plegar de esconder. Si se reimplementa con JS +
   display:none, se pasa a esconder contenido legal.
   🔴 Lo que NUNCA va adentro de un pliegue: los dos rótulos de consumidor, la
   línea corta del art. 6 de la Ley 25.326 y la salida por escrito. Eso la ley
   lo pide A LA VISTA.
   El summary llega a 44px porque es el control que abre el bloque. */
.pliegue{
  border:1px solid var(--line);border-radius:var(--r-bloque);background:var(--soft);
  margin:var(--e4) 0 0;
}
/* El modificador existe en el HTML de /baja y /arrepentimiento (las seis
   preguntas) y no estaba definido en ningún lado: acá se le da el ritmo de una
   pila de preguntas, para que el modificador signifique algo. */
.pliegue--faq{margin-top:var(--e2)}
.pliegue>summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 14px;
  font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--brand-ink);line-height:1.35;
}
.pliegue>summary::-webkit-details-marker{display:none}   /* Safari; el list-style es para el resto */
/* La flecha se dibuja con dos bordes y no con un glifo: un ▸ cae en la fuente
   de emoji en Android, no hereda currentColor y el lector de pantalla lo
   anuncia. `flex:none` para que no la aplaste un título largo. */
.pliegue>summary::after{
  content:"";flex:none;width:8px;height:8px;margin-left:auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease;
}
.pliegue[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.pliegue>summary:hover{color:var(--ink)}
.pliegue-in{padding:0 15px 14px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.pliegue-in p{margin:0 0 10px}
.pliegue-in p:last-child{margin:0}
.pliegue-in b{color:var(--ink)}

/* 🪤 La trampa anti-bots de /baja y /arrepentimiento.
   Se saca de la pantalla con posición absoluta, NO con `display:none` ni con el
   atributo `hidden`: los bots que valen algo saltean los campos ocultos de esa
   forma, y justamente lo que queremos es que lo completen. Para una persona el
   campo no existe: recortado a 1px, fuera del orden de tabulación
   (`tabindex="-1"`) y fuera del árbol de accesibilidad (`aria-hidden`).

   🔴 16-AGO · ACÁ HABÍA UN CIERRE DE COMENTARIO DE MÁS, JUSTO EN ESTA LÍNEA, Y
   ROMPÍA TODO. Cerraba el comentario a la mitad, los seis renglones de abajo
   pasaban a leerse como CSS, el navegador se comía el `.trampa{...}` y
   descartaba la regla entera. Resultado: la trampa se veía en pantalla —302×54
   px, con su etiqueta «No completes este campo»— en las dos páginas que la
   Disposición 954/2025 obliga a tener. El comentario cierra UNA sola vez.

   🔴 Y NO se esconde con `left:-9999px`, que era el primer intento: eso lo saca
   del viewport de verdad y _audit.html lo reporta —con razón— como «SE VA» en
   los dos anchos. Un chequeo que grita en cada corrida por algo que está bien
   deja de leerse, y así se pasan por alto los errores reales. */
.trampa{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* La línea corta del art. 6 de la Ley 25.326, justo arriba del botón. Se
   despega del último campo y del botón para leerse como un aviso y no como una
   tercera etiqueta del formulario. */
.dato-corto{margin:2px 0 14px}

/* El código de identificación que devuelven /baja y /arrepentimiento.
   🔴 NO SE ACHICA NI CAMBIA DE COLOR: es el número de trámite que el usuario
   tiene que copiar y guardar (Disp. 954/2025). 20px, +.06em y --brand-ink. */
.code-box{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:20px;font-weight:700;
  line-height:1.4;letter-spacing:.06em;background:var(--soft);border:1px dashed var(--brand);
  border-radius:var(--r-bloque);padding:16px 18px;margin:16px 0;text-align:center;
  color:var(--brand-ink);word-break:break-all;font-variant-numeric:tabular-nums;
}

/* ── Volver, al pie de cada artículo ────────────────────────────────────────
   Píldora gris, como el .rd-back de la portada. El inline-flex es lo que hace
   que el min-height valga: como inline-block medía 24px. */
.back{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:var(--e5);
  padding:0 14px;border-radius:var(--r-pill);background:var(--soft);
  font-size:13.5px;font-weight:700;letter-spacing:-.015em;
  /* 🔴 EN --brand, NO en --ink. Con la tinta del cuerpo quedaba indistinguible
     de una negrita del parrafo: la pildora da 1,12:1 contra la pagina y el
     hover 1,11:1, o sea que no habia NADA que dijera que es un enlace. Se ve
     peor en baja.html:306 y arrepentimiento.html:306, donde «Volver al inicio»
     es la UNICA navegacion de la pantalla de confirmacion del tramite y va sin
     icono, justo despues de un <b>team@lisaaiapp.com</b> del mismo color. */
  color:var(--brand);
  transition:background .15s ease;
}
/* Y subrayado al pasar, como cualquier otro enlace del sitio: el cambio de
   fondo solo da 1,11:1 y no alcanza como unica senal. */
.back:hover{background:#E8E6F0;text-decoration:underline}
.back svg{flex:none}

/* ── Las tarjetas del centro de ayuda ────────────────────────────────────────
   🔴 OJO CON EL DOBLE SELECTOR `.cats .cat, #resultados .cat`. El buscador de
   /ayuda inyecta su tarjeta de resultados en `<div id="resultados">`, que es
   HERMANO de `.cats`, no hijo (ayuda/index.html:110-111).
   Corrección de un comentario anterior, que exageraba el síntoma: los
   resultados NUNCA quedaron sin tarjeta ni con los enlaces subrayados — eso lo
   sostenía el <style> de la página, que define `.cat` sin prefijo. Lo que
   pasaba es más sutil y por eso más fácil de que se escape: los resultados
   conservaban el tratamiento VIEJO (relleno gris, radio 16, sin sombra)
   mientras la grilla de al lado ya tenía el nuevo. Se ve sólo al escribir en el
   buscador, que es justo lo que ninguna captura estática muestra.
   El gemelo `#resultados` va SÓLO en las reglas que la tarjeta inyectada usa
   de verdad —contenedor, hover, enlaces—. El JS arma
   `<div class="cat"><ul><li><a><span>` y nada más: sin h2, sin ficha de icono
   y sin flecha, así que esos gemelos serían selectores que no matchean nunca.
   Y el prefijo hace falta porque el <style> de las
   20 PÁGINAS DE /ayuda SE CARGA DESPUÉS DE ESTA HOJA y a igual especificidad
   gana el de la página. Sin el prefijo, el diseño entra a medias.
   El hover reemplaza al `box-shadow:0 6px 22px rgba(11,9,22,.5)` del inline,
   que era resto del sistema oscuro: un manchón negro al 50% sobre blanco. */
.cats .cat,#resultados .cat{
  /* El `border` va declarado ACA aunque el <style> de /ayuda tambien lo traiga:
     era la unica regla del bloque que se apoyaba en el inline en vez de pisarlo,
     y el plan declarado es borrar esos <style>. El dia que pase, las tarjetas se
     quedaban sin borde Y el `border-color` del hover dejaba de pintar nada. */
  border:1px solid var(--line);
  border-radius:var(--r-card);padding:18px 19px;background:var(--bg);
  box-shadow:var(--sombra-1);
  transition:border-color .18s ease,box-shadow .18s ease,transform .16s var(--spring);
}
.cats .cat:hover,#resultados .cat:hover{border-color:var(--brand);box-shadow:var(--sombra-2);transform:translateY(-2px)}
.cats .cat-ico{border-radius:var(--r-ficha)}
/* El título de cada tarjeta es un h2 porque el orden de encabezados de /ayuda
   tiene que ser H1 → H2. `padding:0;border:0` no es decorativo: el h2 global
   trae padding-left:13px y border-left:3px, y sin resetearlos la tarjeta queda
   con la barrita violeta al costado.
   🔴 El display:flex es obligatorio: el <span class="cuenta"> va ADENTRO del h2
   y sin esto queda pegado al título. */
.cats .cat h2{
  display:flex;align-items:center;gap:8px;
  margin:0;padding:0;border:0;
  font-size:16.5px;font-weight:700;line-height:1.25;letter-spacing:-.02em;
}
/* 🔴 `opacity:1` EXPLÍCITO. El inline pone .55, que sobre el trazo daba ~2,4:1,
   y en táctil no hay hover que lo rescate. En reposo la flecha va en
   --borde-campo a opacidad plena: 3,42:1, arriba del 3:1 que WCAG 1.4.11 pide
   para lo no textual. */
.cats .cat li a svg{color:var(--borde-campo);opacity:1}
.cats .cat li a:hover svg{color:var(--brand-ink);opacity:1}
/* Donde hay puntero de verdad, la flecha se revela: es el comportamiento que ya
   tenía el inline y se conserva tal cual — pero prefijado, porque si no la
   regla de arriba (0,2,1) le ganaría y la flecha quedaría siempre visible. */
@media(hover:hover){
  .cats .cat li a svg{opacity:0;transform:translateX(-4px)}
  .cats .cat li a:hover svg{opacity:1;transform:none}
}
/* El radio de las dos superficies grandes de /ayuda. El `.wrap ` existe solo
   para pasar por encima del <style> de la página, que las declara a 16 y 18. */
.wrap .hermanos,.wrap .tarjeta-contacto{border-radius:var(--r-card)}

/* ── Filas de datos en /cuenta ──────────────────────────────────────────────
   /cuenta y /nueva-contrasena no están en este repo, pero son el flujo de login
   y esta hoja es la que los viste. No borrar sin confirmar que no vuelven. */
.rows{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin:16px 0}
.row{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:13px 16px;border-bottom:1px solid var(--line);font-size:15px}
.row:last-child{border-bottom:0}
.row .k{color:var(--muted);font-size:14px}
.row .v{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.row a{font-weight:700}
.badge-plan{display:inline-block;font-size:13px;font-weight:700;padding:3px 11px;
  border-radius:var(--r-pill);background:var(--brand-soft);color:var(--brand-ink)}
.badge-plan.pro{background:var(--brand);color:var(--sobre-brand)}

/* La tarjeta centrada de /cuenta. El `auto` del margen es lo que la mantiene
   centrada de verdad: sin él, .form quedaba pegado a la izquierda. */
.auth{max-width:436px;margin:0 auto;padding:6px 0 0}
.auth h1,.auth .auth-sub{text-align:center}
.auth .auth-sub{color:var(--muted);font-size:15.5px;margin:0 auto 26px;max-width:380px;line-height:1.6}
/* .auth ya es tarjeta: acá el .form vuelve a ser transparente para no anidar
   dos cajas. */
.auth .form{max-width:none;margin:0;background:none;border:0;padding:0;box-shadow:none}
.auth-marca{display:flex;justify-content:center;margin:0 0 18px}
.auth-marca img{border-radius:14px;box-shadow:0 6px 20px rgba(91,75,214,.22)}
.auth .btn{width:100%;text-align:center}

/* Ingresar con Google. Hace falta de verdad: quien creó la cuenta con Google en
   la app no tiene contraseña y sin esto no podría entrar nunca.
   🔴 El borde es --borde-campo, no --line. Este botón no tiene fondo propio (es
   blanco sobre blanco): el borde es LO ÚNICO que dibuja la caja, así que es un
   límite de control y WCAG 1.4.11 le pide 3:1. Con --line daba 1,28:1 y el
   botón flotaba sin caja. Se reusa el token que ya existe y ya está medido
   (3,42:1 sobre --bg, 3,06 sobre --soft); no se crea otro para lo mismo. */
.btn--google{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  font:inherit;font-size:16px;font-weight:700;cursor:pointer;min-height:48px;
  padding:12px 22px;border-radius:var(--r-pill);border:1px solid var(--borde-campo);
  background:var(--bg);color:var(--ink);text-decoration:none;
  transition:background .15s ease,border-color .15s ease;
}
/* 🔴 El hover tiene que SEPARAR el borde del fondo, no acercarlo: el #d8d6ea
   anterior daba 1,53:1 contra el --soft del propio hover, o sea que el borde se
   DESVANECÍA justo cuando el puntero está encima. --muted da 5,92:1 sobre
   --soft. */
.btn--google:hover{background:var(--soft);border-color:var(--muted);text-decoration:none}
.btn--google svg{flex:none}

/* Separador "o" */
.sep{display:flex;align-items:center;gap:14px;margin:20px 0;
  color:var(--muted);font-size:13px;font-weight:600;text-transform:lowercase}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}

/* Contraseña, con el ojito para ver/ocultar.
   🔴 El ancla del ojito es el INPUT (.pw), no el .field. Con position:relative
   en el .field y top:0;height:100% en el botón, el área tocable arrancaba
   encima de la etiqueta «Tu contraseña» y medía 48×80: tocar la etiqueta
   apretaba el ojito.
   top/bottom en vez de altura fija: 46px contra los 51,2 reales del campo
   dejaban el icono 2,6px bajo el centro óptico y la esquina sin coincidir.
   El outline-offset NEGATIVO es para que el contorno no lo recorte el campo. */
.pw{position:relative}
.pw input{padding-right:52px}
.pw .ojo{position:absolute;right:1px;top:auto;bottom:1px;height:auto;width:48px;
  min-height:44px;
  display:grid;place-items:center;
  background:none;border:0;padding:0;cursor:pointer;color:var(--muted);
  border-radius:0 var(--r-ctl) var(--r-ctl) 0}
.pw .ojo:hover{color:var(--ink)}
.pw .ojo:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

/* «¿Olvidaste tu contraseña?». Sin el min-height el área tocable es la altura
   del texto —16px— y en un celular se le erra. */
.fila-link{display:flex;justify-content:flex-end;margin:-14px 0 14px}
.fila-link .btn--link{font-size:14px;display:inline-flex;align-items:center;
  min-height:44px;padding:0 2px}

.auth-pie{margin:var(--e5) 0 0;padding-top:20px;border-top:1px solid var(--line);
  text-align:center;font-size:14.5px;color:var(--muted);line-height:1.65}
.auth-pie b{color:var(--ink)}

/* Texto que solo tiene que leer el lector de pantalla. Ni display:none ni
   visibility:hidden: los dos lo esconden TAMBIÉN del lector. Lleva `clip`
   legacy Y `clip-path`; el primero es el respaldo.
   (En /baja y /arrepentimiento hay una copia inline llamada .solo-lector, que
   es byte por byte esta misma regla. Cuando se pueda tocar el HTML, se unifica
   en .vh y se borra la copia.) */
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* Los cuatro requisitos de la contraseña, iguales a los de la app.
   🔴 El tilde sin cumplir iba en var(--line): 1,28:1, o sea que no se veía que
   el requisito existiera. Con --borde-campo (3,42:1; el mínimo de WCAG para lo
   no textual es 3:1) se ve, y sigue leyéndose como «todavía no» frente al verde
   del cumplido (--ok-txt, 5,34:1). */
.reqs{list-style:none;padding:0;margin:12px 0 18px;display:grid;gap:7px}
.reqs li{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--muted);
  margin:0;transition:color .2s ease}
.reqs li svg{flex:none;color:var(--borde-campo);transition:color .2s ease}
.reqs li.ok{color:var(--ok-txt)}
/* El pop es un pulso, no un tamaño nuevo: vuelve a scale(1) y no mueve el renglón. */
.reqs li.ok svg{color:var(--ok-line);animation:tilde-pop .26s ease-out}
@keyframes tilde-pop{0%{transform:scale(.72)}55%{transform:scale(1.18)}100%{transform:scale(1)}}

/* Las dos tiendas, en chico, para "todavía no tengo la app" */
.tiendas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0 0}
.tienda{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;min-height:44px;
  border:1px solid var(--line);border-radius:var(--r-bloque);background:var(--soft);
  font-size:13.5px;font-weight:700;color:var(--ink);text-decoration:none}
.tienda:hover{background:var(--brand-soft);border-color:var(--brand);text-decoration:none}

/* ══ RESPUESTA AL DEDO Y AL TECLADO ══════════════════════════════════════════
   Había CINCO reglas de foco en todo el sitio, y .btn —Ingresar, Enviar el
   pedido, Guardar la contraseña— no tenía ni transition, ni :active, ni
   :focus-visible. En un sitio donde el 95% del tráfico usa el dedo, el :active
   es lo único que confirma que el toque llegó. --brand da 6,46:1: muy arriba
   del 3:1 que pide WCAG 2.2 para un indicador de foco.

   🔴 SIN border-radius ACÁ. El outline ya sigue el radio propio del elemento en
   los tres motores, así que declararlo no cambia el contorno: cambia la FORMA.
   Y `a:focus-visible` (0,1,1) le gana a `.btn` (0,1,0), así que al tabular TODA
   pastilla del sitio se convertía en un rectángulo y saltaba de forma.
   🔴 CONTRATO DE ORDEN DE CASCADA: este bloque va DESPUÉS de .btn,
   .btn--google, .rows y nav.legal, para que .btn:focus-visible (3px
   --brand-ink) le siga ganando al genérico. No reagrupar por componente. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn{transition:background .15s ease,box-shadow .18s ease,transform .12s var(--spring)}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:focus-visible{outline:3px solid var(--brand-ink);outline-offset:2px}
.btn--google:active{transform:scale(.985)}
.rows a.row,.rows button.row{transition:background .15s ease}
.rows a.row:active,.rows button.row:active{background:var(--brand-soft)}
/* offset negativo: el contenedor tiene overflow:hidden y recortaría el contorno. */
.rows a.row:focus-visible,.rows button.row:focus-visible{outline-offset:-2px;background:var(--soft)}
nav.legal a:active,.tienda:active{background:var(--brand-soft)}
.btn-copiar{transition:background .18s ease,color .18s ease,transform .12s var(--spring)}
.btn-copiar:active{transform:scale(.96)}

/* ══ EL BLOQUE DE CONSUMIDOR DEL PIE · Disp. 954/2025, inciso (c) de la 26.4 ══
   Tiene que verse «a simple vista y en lugar destacado». Eran TRES filas de
   44px (187,6px de alto) porque cada enlace ocupaba una fila entera; ahora los
   dos rótulos comparten UNA fila en dos columnas y envuelven adentro de su
   columna, que no cuesta alto. Es grilla y no bloque a propósito: así no hay
   que tocar el HTML de las 27 páginas ni los generadores que las escriben.
   🔴 NO SE SACA. La redundancia con la franja de arriba no cuesta nada y cubre
   el caso de que la franja no pinte. Si algún día hay que dejar uno solo de los
   dos lugares, se saca EL DEL PIE, nunca la franja. */
.consumer-block{
  margin:18px 0 0;
  padding-top:11px;padding-bottom:11px;padding-left:15px;padding-right:15px;
  background:var(--soft);
  border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:0 var(--r-bloque) var(--r-bloque) 0;
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,auto);
  justify-content:start;column-gap:24px;
}
.consumer-block .ct{grid-column:1/-1;
  font-size:11px;font-weight:800;letter-spacing:.12em;line-height:1.2;text-transform:uppercase;
  color:var(--muted);margin-bottom:2px}
/* 44px de alto: son los dos links que la ley obliga a poner «a simple vista»,
   así que además de verse tienen que poder tocarse sin errarle.
   14,5/700 acá contra 14/700 arriba NO es una inconsistencia: arriba conviven
   con el nav y tienen que pesar como el nav; acá conviven con texto corrido de
   12,5px, así que este es el bloque donde «destacado» se paga con tamaño. El
   color es el mismo (--brand-ink) en los dos lugares, y eso es lo que los hace
   leer como la misma cosa. */
.consumer-block a{display:flex;align-items:center;min-height:44px;
  font-size:14.5px;font-weight:700;letter-spacing:.02em;line-height:1.2;
  color:var(--brand-ink)}
/* 🔴 El TERCER enlace es la Ventanilla Única (Res. 1033/2021), un requisito
   DISTINTO y aparte de la Disposición 954/2025. Heredaba el font-weight:700, o
   sea que quedaba más pesado que los dos rótulos que la 954 sí manda destacar.
   Baja a peso normal, cuerpo 12,5 y fila propia con línea separadora.
   ⚠️ ES POSICIONAL: no se pueden reordenar los <a> del bloque. */
.consumer-block a:nth-of-type(3){
  grid-column:1/-1;margin-top:10px;border-top:1px solid var(--line);
  font-size:12.5px;font-weight:400;letter-spacing:0;color:var(--muted)}

/* ══ EL PIE DE SITIO ═════════════════════════════════════════════════════════
   En el celular la barra de arriba se convierte en un riel y este pie es la
   única navegación completa que queda.
   👉 REGLA DEL PIE: si alguien saca un enlace de acá, primero lo tiene que
   devolver a la barra del celular. Si no, deja de haber forma de llegar.
   Orden, igual que en la portada: navegación → Ventanilla Única → quién opera
   el Servicio. Los DOS RÓTULOS no van acá: van en .consumer-block. */
footer{
  margin-top:var(--e7);padding-top:20px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);           /* la geometría del .foot de la portada */
}
.pie-sitio{margin-top:14px}
/* 🔴 EL DESPLAZAMIENTO VA EN EL CONTENEDOR, NO EN a:first-child. Los enlaces
   llevan 9px de relleno lateral para su área táctil y hay que descontarlos para
   que el texto arranque en el mismo eje que el párrafo de abajo; puesto en
   `a:first-child` solo alineaba el primer renglón. Medido sobre el DOM a 390px:
   primer renglón en x=9, segundo en x=18.
   Y `gap:4px`, no `gap:0 4px`: con row-gap 0, al partirse en dos líneas los
   enlaces quedaban pegados sin un píxel entre medio. */
.pie-nav{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 4px -9px}
.pie-nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 9px;
  border-radius:var(--r-pill);
  color:var(--muted);text-decoration:none;font-size:13px;font-weight:400;
  transition:background .15s ease,color .15s ease;
}
.pie-nav a:hover{color:var(--ink);background:var(--brand-soft);text-decoration:none}
/* El pie no marcaba nunca en qué página estás, y en el celular es la única
   navegación visible. Regla espejo de la barra, con los mismos dos tokens. */
.pie-nav a[aria-current="page"]{color:var(--brand-ink);background:var(--brand-soft);font-weight:600}
/* La geometría es la del .foot-bot de la portada; el color NO: allá es #8A8794
   = 3,52:1. Acá va --muted (6,61:1).
   ⚠️ Corrección de un comentario que estaba mal: este párrafo NO identifica a
   los operadores del Servicio (eso está en el art. 4 y vive en /contacto). Son
   «Lisa AI · <documento> · Última actualización» y el ©.
   🔴 line-height SIN UNIDAD. Con `18px` el valor absoluto se hereda tal cual a
   los <a> de adentro, que son más chicos, y les queda un interlineado ajeno. */
.pie-sitio p{margin:0 0 var(--e2);font-size:12.5px;line-height:1.5;color:var(--muted);max-width:62ch}
.pie-sitio p:last-child{margin:0}
/* ⚠️ HOY NO MATCHEAN NADA: recorridos los 27 pies, no hay ningún <a> dentro de
   un <p> de .pie-sitio (son «Lisa AI · <doc> · Última actualización…» y el ©).
   Se dejan porque el <p id="fiscal"> de la portada sí lleva el mail como enlace
   y este pie va a converger ahí, pero que quede dicho que hoy son preventivas.
   `.pie-sitio p a` y NO `.pie-sitio a`: el .pie-nav vive ADENTRO del
   <footer class="pie-sitio">, así que un `.pie-sitio a{text-decoration:
   underline}` —misma especificidad (0,1,1) y más abajo en el archivo— le gana
   al `.pie-nav a{text-decoration:none}` y subraya las cinco píldoras de la
   navegación. Acá el subrayado es solo para los enlaces en prosa del bloque
   fiscal. */
.pie-sitio p a{text-decoration:underline;text-underline-offset:2px}
.pie-sitio p a:hover{color:var(--ink)}

/* ══ ENTRADA DE LAS PANTALLAS Y DE LOS MENSAJES ══════════════════════════════
   `ir()` prende y apaga el [hidden] en un mismo frame, así que los .msg--err
   aparecen de golpe arriba del botón y es facilísimo no ver que apareció y
   creer que ya estaba. Estos 260ms son lo que dice «esto es nuevo».
   🔴 El selector es :not([hidden]) a propósito: NO toca el
   [hidden]{display:none!important} de más arriba, que sigue ganándole a todo. */
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.auth:not([hidden]),#e-panel:not([hidden]),#zona-ok:not([hidden]),.msg:not([hidden]){
  animation:entra .26s ease-out both;
}

/* Control de viudas: el navegador que no lo soporta lo ignora sin romper nada. */
h1,h2{text-wrap:balance}
p,li{text-wrap:pretty}

/* ══ EL RITMO DEL FORMULARIO DE /baja Y /arrepentimiento ═════════════════════
   Medido antes: campo →16px→ «Contanos por qué» →0px→ BOTÓN →2px→ aviso legal.
   El único botón de la página estaba pegado arriba y abajo. La causa: .btn no
   declara margen y el <details> tampoco.
   ⚠️ Corrección de un comentario que estaba mal: el .form NO es flex —computa
   display:block—. Los márgenes no colapsan porque el .btn es inline-flex/
   inline-block, no por el contenedor. El efecto es el mismo: el <details> va a
   margin:0 y el aire lo pone el botón.
   👉 El botón NO se hace ancho completo en escritorio a propósito: en un
   trámite de baja, un botón que ocupa todo el ancho invita a apretarlo sin
   leer. Se le da aire, no tamaño. */
.form .pliegue{margin:0}
.form .btn{margin:28px 0 28px}
.form .vale{margin-top:0}

/* ══ LOS DOS CORTES ══════════════════════════════════════════════════════════
   🔴 POR QUÉ 700 Y NO 560. Medido: a 561px —justo arriba del corte viejo— los
   cinco enlaces envolvían a dos filas y la barra saltaba a 111px, más alta que
   en un teléfono (85) y que en un monitor (67). Había una franja de anchos
   donde la barra era lo más grande de la pantalla. El corte va donde el
   contenido deja de entrar de verdad, no donde estaba el corte de otra cosa.
   Los cinco enlaces suman ~378px de texto y el conjunto pide ~570.

   👉 EL SCROLL HORIZONTAL ACÁ SÍ VA: la prohibición de overflow-x es para los
   DOS RÓTULOS DE CONSUMIDOR —que la 954/2025 exige «a simple vista»— y esos
   viven en la franja y en el pie, no en el nav. Estos son enlaces de navegación
   común. `scrollbar-width:none` esconde la barra pero NO el desplazamiento: se
   sigue arrastrando con el dedo y se llega con el teclado.

   🔴 PROHIBIDO volver a introducir `nav.legal a:not([href="/ayuda"]){display:none}`.
   Escondía cuatro de los cinco enlaces abajo de 560px: en un teléfono, para ir
   de Términos a Privacidad había que scrollear 128 cláusulas hasta el pie. */
@media(max-width:700px){
  /* 🔴 min-height:0 es obligatorio: sin esto los 64px del eje fijan la fila y el
     riel del nav queda fuera de la barra. */
  .site-inner{min-height:0;flex-wrap:wrap;gap:2px 10px;padding:6px var(--gutter)}
  .brand{flex:none;white-space:nowrap}
  nav.legal{
    flex-wrap:nowrap;
    width:100%;                          /* fila propia, debajo de la marca */
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    /* el aire lateral lo pone el contenedor: acá se compensa para que el primer
       enlace arranque alineado con la marca y el último respire al final */
    margin:0 calc(var(--gutter) * -1);
    padding:0 var(--gutter);
  }
  nav.legal::-webkit-scrollbar{display:none}
  /* ⚠️ 40 y no 44: EXCEPCIÓN CONSCIENTE dentro de la fila con scroll. Si se
     «unifica» a 44 la barra crece; si se baja el resto a 40 se rompen siete
     promesas. No unificar. */
  nav.legal a{white-space:nowrap;flex:none;min-height:40px;padding:4px 11px}
}

@media(max-width:560px){
  :root{--gutter:18px}
  body{font-size:16px}
  h1{font-size:27px}
  .wrap{padding:30px var(--gutter) 72px}
  .form{padding:16px 15px 18px;border-radius:16px}
  /* Sin esto la marca se queda con 71px de ancho y «Lisa AI» se parte en dos
     líneas: 61px de alto para un logo, y la barra se va a 74px. */
  .brand{flex:none;white-space:nowrap}
  /* Una tabla de tres columnas no entra en 390px, así que el navegador la hacía
     más ancha que la pantalla y empujaba TODA la página: 390 de viewport contra
     402 de contenido, con scroll horizontal en las páginas legales. */
  table{display:block;overflow-x:auto;overscroll-behavior-x:contain}
  th,td{padding:9px 11px}
}

/* En un celular el botón sí ocupa el ancho: ahí el problema no es apretarlo sin
   leer sino errarle, y a 360px un botón de 240px deja de tener área cómoda. */
@media(max-width:520px){
  .form .btn{display:block;width:100%;text-align:center;margin:24px 0 24px}
}

/* ══ RELATO · LAS PÁGINAS LARGAS, CON EL LENGUAJE DE PARTICLE ══════════════════
   Sólo aplica a <body class="relato">: /sobre-lisa, /prensa, /contacto y las
   tres de tema. Las legales no lo llevan y no cambian en nada.
   El movimiento lo maneja /relato.js (ver su encabezado: qué se copió de
   particle.news y cómo se relevó). Acá va la forma.

   🔴 LA PALETA DE LISA NO CAMBIA. Particle es negro; esto sigue siendo claro,
   con los mismos tokens y los mismos ratios. De Particle se toma el
   movimiento, el peso de los títulos y el tinte por sección — y el tinte
   NUNCA pinta texto: va en el halo, en el hilo del <h2> y en el punto de las
   píldoras, que son decoración. */
@property --tinte{syntax:'<color>';inherits:true;initial-value:#5B4DBE}
:root{--tinte:#5B4DBE}

/* El halo: la luz de color de arriba a la izquierda que en Particle cambia
   con el tema. Es una capa fija DETRÁS del contenido (z-index:-1 sobre el
   lienzo), así que no tapa nada ni recibe clics. El `@property` de arriba es
   lo que hace que el color se funda en vez de saltar. */
body.relato::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 62rem 40rem at -6rem -8rem,color-mix(in srgb,var(--tinte) 17%,transparent),transparent 70%),
    radial-gradient(ellipse 34rem 24rem at 104% -4rem,color-mix(in srgb,var(--tinte) 8%,transparent),transparent 72%);
  transition:--tinte .6s ease-out;
}

/* El rótulo de arriba del título: «GUÍA · 6 MIN DE LECTURA». El de Particle
   es 12px, 700, +2px de tracking y en mayúsculas; acá en --muted (6,61:1) y
   no en blanco al 80%. El tiempo de lectura lo escribe relato.js y entra con
   el fundido de .25 s de Particle cuando termina de escribirse el título. */
body.relato .rotulo{
  display:flex;align-items:center;gap:8px;margin:4px 0 14px;
  font-size:12px;line-height:1;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
body.relato .rotulo::before{
  content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--tinte);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--tinte) 18%,transparent);
  transition:--tinte .6s ease-out;
}
body.relato .rotulo-resto{opacity:0;transition:opacity .25s ease-in .25s}
body.relato.rotulo-listo .rotulo-resto{opacity:1}

/* El título: el `calc(80% + 3vw)` de las notas de Particle, con techo. El
   peso queda en 800 (el máximo del sistema, ver TIPOGRAFÍA DE DOCUMENTO). */
body.relato h1{
  font-size:clamp(34px,calc(80% + 3vw),58px);line-height:1.04;letter-spacing:-.042em;
  margin:0 0 var(--e5);
}
body.relato .wrap > h2{
  font-size:25px;letter-spacing:-.032em;
  border-left-color:var(--tinte-h,var(--brand));
}
/* El salto desde el índice deja el título abajo de la barra y del riel, que
   relato.js mide en vivo (en el celular la barra puede ocupar dos renglones). */
body.relato .wrap > h2{scroll-margin-top:calc(var(--alto-barra,64px) + var(--alto-riel,0px) + 20px)}

/* La sección en la que estás, en grande arriba de la columna del índice: el
   título de Particle que cambia al scrollear. Los <span> se apilan y
   relato.js hace el fundido cruzado: entra el nuevo, sale el viejo. Sólo
   existe en el modo columna (ver abajo); en el riel la píldora ya lo dice. */
.seccion-viva{display:none}
@media(min-width:1360px){
  .seccion-viva{display:block;position:relative;flex:none;height:62px;margin:0 12px 10px}
  .seccion-viva span{
    position:absolute;left:0;right:0;bottom:0;
    font-size:24px;line-height:1.05;font-weight:800;letter-spacing:-.035em;color:var(--ink);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    transition:opacity .5s linear;
  }
}

/* ── El índice ──────────────────────────────────────────────────────────────
   Hasta 1359px es un riel de píldoras pegado bajo la barra, con el mismo
   vidrio y el mismo snap horizontal que el de temas de Particle en el celular.
   Desde 1360px es la columna de la izquierda (el `.sidebar` de Particle, con
   el fundido de abajo). 1360 sale de la cuenta: la columna mide 232 y va 40px
   a la izquierda de los 780 de `.wrap`, o sea 1312 + dos márgenes de 24. */
.indice{
  position:sticky;top:var(--alto-barra,64px);z-index:19;
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--hair);
}
.indice ul{
  display:flex;gap:6px;margin:0 auto;max-width:var(--medida);list-style:none;
  padding:10px var(--gutter);overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - 28px),transparent);
}
.indice ul::-webkit-scrollbar{display:none}
.indice li{flex:none;margin:0;scroll-snap-align:start}
.indice a{
  display:flex;align-items:center;gap:8px;min-height:34px;box-sizing:border-box;
  padding:6px 14px;border-radius:var(--r-pill);
  font-size:13.5px;line-height:1.25;font-weight:600;letter-spacing:-.005em;
  color:var(--muted);text-decoration:none;white-space:nowrap;
  transition:color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .15s var(--spring);
}
.indice a::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--tinte-p);opacity:.45;transition:opacity .15s ease,transform .15s var(--spring);
}
.indice a:hover{color:var(--ink);background:color-mix(in srgb,var(--tinte-p) 9%,transparent);text-decoration:none}
.indice a:hover::before{opacity:1}
.indice a:active{transform:scale(.95)}
.indice a[aria-current="true"]{
  color:var(--ink);background:color-mix(in srgb,var(--tinte-p) 14%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tinte-p) 32%,transparent);
}
.indice a[aria-current="true"]::before{opacity:1;transform:scale(1.15)}
.indice a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

@media(min-width:1360px){
  .indice{
    position:fixed;z-index:5;top:calc(var(--alto-barra,64px) + 76px);bottom:24px;
    left:calc(50% - 662px);width:232px;display:flex;flex-direction:column;
    background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;
  }
  .indice ul{
    flex-direction:column;gap:2px;flex:0 1 auto;min-height:0;max-width:none;box-sizing:border-box;
    padding:0 0 3rem;overflow-x:visible;overflow-y:auto;scroll-snap-type:none;
    -webkit-mask-image:linear-gradient(#000 calc(100% - 3rem),transparent);
    mask-image:linear-gradient(#000 calc(100% - 3rem),transparent);
  }
  .indice a{white-space:normal;padding:7px 12px;font-size:14px;align-items:baseline}
  .indice a::before{transform:translateY(-1px)}
  .indice a[aria-current="true"]::before{transform:translateY(-1px) scale(1.15)}
}

/* ── La entrada de los bloques ──────────────────────────────────────────────
   El `clipsFadeIn` de Particle: 8px de subida y fundido. La clase `.aparece`
   la pone relato.js SÓLO en lo que está abajo de la pantalla al cargar, y la
   saca cuando termina la entrada para devolverle a cada bloque su propia
   transición (si no, el hover de una ficha heredaría el retraso). */
body.relato .aparece{
  opacity:0;transform:translateY(8px);
  transition:opacity .5s ease-out,transform .6s cubic-bezier(.2,.7,.2,1);
}
body.relato .aparece.visto{opacity:1;transform:none}

/* ── El resorte de Particle en lo que se toca ───────────────────────────────
   Su card: `scale(1.025)` con `cubic-bezier(.34,1.56,.64,1)` en .15 s, y al
   apretar vuelve a 1. En un bloque de 780px ese 2,5% son 20px de golpe, así
   que la tarjeta de contacto crece la mitad. */
@media(hover:hover){
  body.relato .kit > a,body.relato .cifras li{transition:transform .15s var(--spring),border-color .15s ease,box-shadow .2s ease-out}
  body.relato .kit > a:hover{transform:scale(1.025);box-shadow:var(--sombra-2)}
  body.relato .cifras li:hover{transform:scale(1.04)}
  body.relato .tarjeta-contacto{transition:transform .15s var(--spring),box-shadow .2s ease-out}
  body.relato .tarjeta-contacto:hover{transform:scale(1.012);box-shadow:var(--sombra-2)}
  body.relato .kit > a:active,body.relato .tarjeta-contacto:active{transform:scale(1)}
}

@media(prefers-reduced-motion:reduce){
  body.relato::before,body.relato .rotulo::before,.seccion-viva,.seccion-viva span,
  .indice a,.indice a::before,body.relato .aparece{transition:none}
  body.relato .aparece{opacity:1;transform:none}
  body.relato .kit > a:hover,body.relato .cifras li:hover,body.relato .tarjeta-contacto:hover{transform:none}
}
@media print{
  .indice,.seccion-viva,body.relato::before{display:none}
  body.relato .aparece{opacity:1!important;transform:none!important}
  body.relato .rotulo-resto{opacity:1}
}

/* ══ MOVIMIENTO REDUCIDO ═════════════════════════════════════════════════════
   Ninguna entrada es redundante: cada una apaga una animación distinta.
   🔴 El scroll suave queda como OPT-IN (no-preference), no como opt-out: el
   scroll también es movimiento y quien pidió reducirlo no lo quiere. No
   invertirlo a `reduce → scroll-behavior:auto`. */
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media(prefers-reduced-motion:reduce){
  nav.legal a,.pie-nav a,.franja-in a,.pliegue>summary::after,
  .btn,.btn--google,.btn-copiar,.back,.cats .cat,#resultados .cat,.cats .cat li a svg,
  .rows a.row,.rows button.row,.reqs li,.reqs li svg{transition:none}
  .btn:active:not(:disabled),.btn--google:active,.btn-copiar:active,
  .cats .cat:hover,#resultados .cat:hover{transform:none}
  .reqs li.ok svg{animation:none}
  .auth:not([hidden]),#e-panel:not([hidden]),#zona-ok:not([hidden]),.msg:not([hidden]){
    animation:none;
  }
}

/* 🔴 SE PROBÓ JUSTIFICAR Y SE VOLVIÓ ATRÁS. NO REINTENTAR. Justificar sin
   partir palabras solo puede estirar los espacios: con el espacio normal en
   4,4px, en /terminos a 390px la mediana subía a 8,2px y el peor caso a 27,7 —
   SEIS VECES el normal. Y no se puede mitigar: `hyphens:auto` no cambia ni un
   renglón acá, probado con lang="es" en Chromium 148.
   Lo que SÍ se queda, porque mejora sin costo: text-wrap:pretty. */
.wrap p,
.wrap li{text-wrap:pretty}

/* ══ IMPRESIÓN ═══════════════════════════════════════════════════════════════
   Un documento legal se imprime, y hasta hoy no había una sola regla de print
   en todo el repo. Al imprimir /terminos (78 KB) o /privacidad (121 KB) el
   header pegajoso y el backdrop-filter se llevaban la primera página, los
   fondos de los callouts se descartaban por defecto —dejando solo el hilo, que
   es justo el elemento que carga el significado del estado—, los <details>
   salían CERRADOS y los enlaces salían sin URL. */
@media print{
  body{background:#fff;background-image:none;color:#000;font-size:11pt;line-height:1.5}
  header.site{position:static;background:#fff;
    -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-bottom:1px solid #000}
  .franja-rotulos{border-bottom:1px solid #000}
  /* 🔴 Sin esto el h1 imprime EN BLANCO: el navegador descarta el degradé y
     queda el -webkit-text-fill-color:transparent. */
  h1{background:none;-webkit-text-fill-color:currentColor;color:#000}
  .wrap{max-width:none;padding:0}
  nav.legal,.buscar,.back,.btn,.btn-copiar,.hermanos,.pw .ojo{display:none}
  /* 🔴 El «Escribinos» de las 20 paginas de /ayuda es un <a class="btn"> dentro
     de .tarjeta-contacto: si se oculta, el articulo impreso queda SIN ningun
     puntero a /contacto, y al estar en display:none el ::after tampoco lo
     rescata con la URL. Se muestra, en plano y con su direccion al lado. */
  .tarjeta-contacto .btn{
    display:inline;background:none;color:#000;border:0;padding:0;
    font-weight:700;text-decoration:underline}
  .tarjeta-contacto .btn::after{content:" (lisaaiapp.com" attr(href) ")";font-weight:400;font-size:9pt}
  /* Aparte, y no dentro de la lista de arriba: el
     `@media(max-width:520px){.form .btn}` es (0,2,0) y le gana al `.btn`
     (0,1,0) si el papel computa angosto. */
  .form .btn{display:none!important}

  /* 🔴 LOS <details> NO SE ABREN CON UN display SOBRE EL HIJO: Chrome esconde el
     contenido en el pseudo-elemento ::details-content, y ahí un display no
     llega. Hacen falta las dos técnicas —::details-content para Chromium y el
     display sobre los hijos para Firefox/Safari—. Sin esto desaparecen del
     papel «qué guardamos» y las seis preguntas de /baja y /arrepentimiento. */
  details{display:block}
  details>*{display:block!important}
  ::details-content{content-visibility:visible!important;block-size:auto!important}
  .pliegue>summary::after{display:none}

  /* Los fondos se descartan por defecto y quedaría solo el hilo de 3px, que es
     justo el elemento que carga el significado del estado. */
  .warn,.box,.msg,.consumer-block,.form,.vale,.plazo,.leyenda-dnpdp,.pliegue,.code-box{
    background:#fff!important;color:#000;border:1px solid #000;border-left:3px solid #000;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* 🔴 Estas pisan al <style> de la página, que se carga después: un @media NO
     agrega especificidad, así que sin !important no las pisa nadie. */
  .cats .cat,#resultados .cat{background:#fff!important;box-shadow:none!important;
    border:1px solid #000!important;transform:none!important}
  .miga,.miga a{color:#000!important}
  .vale,.plazo{color:#000!important}

  a{color:#000;text-decoration:underline}
  /* 🔴 EL ::after VA PARTIDO POR TIPO DE href. Con un solo
     `content:" (lisaaiapp.com" attr(href) ")"` para todos, el enlace de la
     Ventanilla Única salía como «(lisaaiapp.comhttps://autogestion…)». */
  .wrap p a[href^="http"]::after,.wrap li a[href^="http"]::after,
  .franja-in a[href^="http"]::after,.consumer-block a[href^="http"]::after{
    content:" (" attr(href) ")";font-weight:400;font-size:9pt;letter-spacing:0;word-break:break-all}
  .franja-in a[href^="/"]::after,.consumer-block a[href^="/"]::after{
    content:" (lisaaiapp.com" attr(href) ")";font-weight:400;font-size:9pt;letter-spacing:0}
  /* 🔴 Los dos contenedores son grid y sus <a> son flex: sin volverlos block, el
     ::after sale como un ítem aparte en vez de seguir al texto del rótulo. */
  .franja-in,.consumer-block{display:block}
  .franja-in a,.consumer-block a{display:block;min-height:0;color:#000}

  h1,h2,h3{break-after:avoid}
  table,.warn,.box,.pliegue,.consumer-block,.franja-in{break-inside:avoid}
}