/* El sitio de heshapo.ai se dibuja como un documento de trabajo: papel y tinta, la letra del método
   (Outfit para encabezar, Barlow para leer), la escala en φ (16 · 26 · 42 · 68) y UNA sola pieza
   naranja por pantalla —el acto, lo que la IA hizo— que nunca es texto ni fondo. La profundidad la
   dan bandas de tinta que alternan con el papel, no sombras. Primero el teléfono: todo es una
   columna hasta que el ancho da para dos. Las fuentes viajan con el sitio (fuentes/) para que la
   página no le pida nada a nadie. */

@font-face { font-family: 'Outfit'; font-weight: 600; font-display: swap; src: url('fuentes/outfit-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('fuentes/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('fuentes/barlow-600.woff2') format('woff2'); }

:root {
  --papel: #f6f2ec;
  --tinta: #2a2622;
  --acto: #e86800;
  --secundario: #5c5651;
  --suave: #8a837c;
  --borde: #e2dcd4;
  --hoja: #fdfbf7;
  --display: 'Outfit', system-ui, sans-serif;
  --texto: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-d: max(20px, env(safe-area-inset-right, 0px));
  /* La proporción áurea, φ = 1,618, como sistema de construcción (la de la marca): la letra sube
     por medios pasos de φ desde 16 px (16 · 20,35 · 25,89 · 32,94 · 41,89 · 53,29 · 67,78) y los
     espacios por pasos enteros (10 · 16 · 26 · 42 · 68 · 110); las columnas se parten 1 : φ. */
  --e1: 10px; --e2: 16px; --e3: 26px; --e4: 42px; --e5: 68px; --e6: 110px;
  --paso: clamp(42px, 10vw, 110px);        /* el aire entre bandas */
  --ancho: 1120px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  /* En oscuro, la página es la tinta de la marca (#2a2622) y las hojas se aclaran desde ella. */
  :root { --papel: #2a2622; --tinta: #f6f2ec; --secundario: #b5ada5; --suave: #8a837c; --borde: #45403a; --hoja: #332e2a; color-scheme: dark; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* Un enlace de ancla («Vea un ejemplo», «Buscar mi actividad») desplaza la página, no la salta;
   con «reducir movimiento», salta. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--texto); font-size: 16px; line-height: 1.618;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
@media (min-width: 760px) { body { font-size: 17px; } }
img, svg { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.ancho { max-width: var(--ancho); margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-d); }
.salto { position: absolute; left: -9999px; top: 0; background: var(--tinta); color: var(--papel); padding: 8px 12px; }
.salto:focus { left: var(--gutter); top: 8px; z-index: 10; }

/* ——— La letra ——— */
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(32.94px, 7vw, 67.78px); line-height: 1.02; }
h2 { font-size: clamp(25.89px, 4.2vw, 41.89px); line-height: 1.08; }
h3 { font-size: clamp(17.99px, 2.4vw, 20.35px); line-height: 1.22; letter-spacing: -0.012em; }
p, li { text-wrap: pretty; }
p { margin: 0; }
.lectura { max-width: 60ch; }
.lectura p + p, .lectura ul + p, .lectura p + ul { margin-top: 1em; }
.lectura ul { padding-left: 1.2em; margin: 0; }
.lectura li + li { margin-top: .5em; }
.grande { font-size: clamp(17.99px, 2vw, 20.35px); line-height: 1.5; }
.secundario { color: var(--secundario); }
.rotulo { font-weight: 600; font-size: 15px; color: var(--secundario); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.rotulo::before { content: ""; width: 26px; height: 1.5px; background: currentColor; flex: none; }
strong { font-weight: 600; }

/* ——— El encabezado: la firma y tres enlaces. No se queda pegado: taparía la única pieza naranja
   de la pantalla siguiente. ——— */
.encabezado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 26px; padding-block: 20px 8px; }
.firma { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; line-height: 1; }
.firma svg { width: 26px; height: 28px; flex: none; }
.firma .palabra { display: inline-block; width: 116px; height: 23px; background: currentColor; -webkit-mask: url('img/palabra.svg') no-repeat left center / contain; mask: url('img/palabra.svg') no-repeat left center / contain; }
.navegacion { display: flex; flex-wrap: wrap; gap: 4px 2px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.navegacion a { display: inline-block; padding: 10px 10px; text-decoration: none; color: var(--secundario); min-height: 44px; line-height: 24px; }
.navegacion a:hover { color: var(--tinta); }
.navegacion a[aria-current="page"] { color: var(--tinta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
/* Cuatro entradas no entran en una línea de teléfono: van en dos filas de dos, parejas. */
@media (max-width: 440px) { .encabezado nav { flex: 1 1 100%; } .navegacion { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-left: -2px; } .navegacion a { padding-inline: 2px; font-size: 14.5px; min-height: 40px; line-height: 20px; } }
@media (min-width: 760px) { .encabezado { padding-block: 26px 10px; } .navegacion { font-size: 16px; gap: 2px 12px; } .firma svg { width: 30px; height: 32px; } .firma .palabra { width: 134px; height: 26.5px; } }

/* ——— Bandas: cada sección es una banda de borde a borde; el color lo pone la banda ——— */
.banda { padding-block: var(--paso); }
.banda + .banda.papel { border-top: 1px solid var(--borde); }
.banda.hoja { background: var(--hoja); }
.banda.tinta { background: var(--tinta); color: var(--papel); --borde: color-mix(in srgb, var(--papel) 22%, transparent); --secundario: color-mix(in srgb, var(--papel) 70%, var(--tinta)); --hoja: color-mix(in srgb, var(--papel) 6%, var(--tinta)); }
.banda.tinta .boton { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.banda.tinta .boton.hueco { background: transparent; color: var(--papel); }

.dos { display: grid; gap: var(--e3); align-items: start; }
@media (min-width: 760px) { .dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e5); } .dos.ancha-izquierda { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); } .dos.editorial { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--e5); } .dos > * { min-width: 0; } }
.tres { display: grid; gap: var(--e3); }
@media (min-width: 760px) { .tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px; } }
.tres > div { min-width: 0; border-top: 1.5px solid currentColor; padding-top: 18px; }
.tres h3 { margin-bottom: 10px; }
/* Pegajoso sólo con dos columnas: en una columna el navegador lo pega contra la rejilla entera y tapa la lista. */
@media (min-width: 760px) { .pegajoso { position: sticky; top: 26px; } }
.cabecera-seccion { margin-bottom: clamp(26px, 5vw, 42px); }

/* ——— La portada ——— */
.portada { padding-block: clamp(26px, 6vw, 68px) var(--paso); }
.portada h1 { max-width: 13ch; }
.portada .grande { margin-top: clamp(16px, 3vw, 26px); max-width: 38ch; }
.portada .accion { margin-top: clamp(26px, 4vw, 42px); }
/* Toda portada lleva su figura a la derecha (1,618 : 1); apilada, la figura sigue al texto con un paso de aire. */
.portada > .ancho > figure { margin-top: clamp(42px, 8vw, 68px); }
@media (min-width: 900px) { .portada > .ancho { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--e5); align-items: center; } .portada > .ancho > figure { margin: 0; } }
/* La portada interior no deja 220 px de vacío antes de la primera banda: cierra con un paso corto y la banda pone el suyo. */
.portada.interior { padding-bottom: clamp(26px, 5vw, 42px); }
.portada.interior h1 { font-size: clamp(32.94px, 5.4vw, 53.29px); max-width: 18ch; }
.portada.interior .grande { max-width: 50ch; }

/* ——— Botones: tinta sobre papel, nunca naranja. 48 px de alto para el dedo. ——— */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 11px 24px; background: var(--tinta); color: var(--papel); font-family: var(--texto); font-weight: 600; font-size: 17px; text-decoration: none; border: 1.5px solid var(--tinta); border-radius: 4px; cursor: pointer; }
.boton:hover { opacity: .9; }
.boton.hueco { background: transparent; color: var(--tinta); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ——— La ficha del acto: una pantalla de verdad, en HTML, con la pieza naranja ——— */
.ficha { background: var(--hoja); border: 1px solid var(--borde); border-radius: 6px; padding: clamp(18px, 3.5vw, 30px); box-shadow: 0 1px 0 var(--borde), 0 24px 48px -36px rgba(42, 38, 34, .45); }
.ficha .titulo { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 2.4vw, 22px); letter-spacing: -0.015em; }
.ficha .meta { font-size: 14px; color: var(--secundario); margin-top: 3px; padding-bottom: 14px; border-bottom: 1px solid var(--borde); }
.ficha dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); column-gap: 14px; }
.ficha dt { font-size: 14.5px; color: var(--secundario); padding-block: 14px 10px; border-bottom: 1px solid var(--borde); }
.ficha dd { margin: 0; font-size: 16.5px; padding-block: 12px 10px; border-bottom: 1px solid var(--borde); position: relative; }
.ficha dd.acto::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 3px; width: 46%; max-width: 110px; background: var(--acto); border-radius: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .ficha dd.acto::after { animation: dejar .7s cubic-bezier(.2, .7, .2, 1) .5s both; }
  @keyframes dejar { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
}
.ficha .pie-ficha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 16px; }
.ficha .pie-ficha p { font-size: 14px; color: var(--secundario); max-width: 28ch; }
.ficha .confirmar { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border: 1.5px solid currentColor; border-radius: 4px; font-weight: 600; font-size: 15px; }
.ficha + figcaption, .leyenda { margin-top: 14px; font-size: 15px; color: var(--secundario); text-wrap: pretty; }

/* ——— Las figuras a una tinta ——— */
figure { margin: 0; }
figure svg { width: 100%; height: auto; display: block; }
figure .trazo { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
figure .fino { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; opacity: .5; }
figure .relleno { fill: currentColor; }
figure .papel { fill: var(--papel); }
figure .hoja { fill: var(--hoja); }
figure .letra { font-family: var(--texto); font-size: 13.5px; fill: currentColor; }
figure .letra.chica { font-size: 12px; opacity: .75; }
figure .letra.media { font-size: 14px; font-weight: 600; }
figcaption { margin-top: 14px; font-size: 15px; color: var(--secundario); text-wrap: pretty; }

/* ——— La fila que leen tres: una tabla de verdad ——— */
.fila { margin-top: clamp(32px, 5vw, 56px); }
.lectores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; font-size: 14px; margin-bottom: 12px; }
.lectores div { position: relative; padding-bottom: 18px; }
.lectores div::after { content: ""; position: absolute; left: 10px; bottom: 0; height: 14px; width: 1px; background: currentColor; opacity: .5; }
.lectores b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(16px, 2.2vw, 20px); letter-spacing: -0.01em; }
.lectores span { color: var(--secundario); display: block; margin-top: 2px; }
.celdas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1.5px solid currentColor; border-radius: 5px; overflow: hidden; background: var(--hoja); }
.celdas div { padding: clamp(12px, 2.4vw, 20px) 6px; text-align: center; font-family: var(--display); font-weight: 600; font-size: clamp(12.5px, 2.4vw, 19px); letter-spacing: -0.01em; border-left: 1px solid var(--borde); overflow-wrap: anywhere; }
.celdas div:first-child { border-left: 0; }
@media (max-width: 599px) {
  .lectores { font-size: 13px; }
  .lectores span { display: none; }
  /* Cinco celdas no entran en un teléfono sin partir palabras: se vuelven fichas que envuelven. */
  .celdas { display: flex; flex-wrap: wrap; }
  .celdas div { flex: 1 1 auto; font-size: 15px; padding: 10px 12px; border-left: 0; border-top: 1px solid var(--borde); margin-top: -1px; }
}

/* ——— La frase ——— */
.frase { text-align: left; }
.frase p { font-family: var(--display); font-weight: 600; font-size: clamp(25.89px, 3.8vw, 41.89px); line-height: 1.1; letter-spacing: -0.025em; max-width: 22ch; text-wrap: balance; }
.frase small { display: block; margin-top: 22px; font-family: var(--texto); font-weight: 400; font-size: 16px; color: var(--secundario); }

/* ——— Principios y etapas ——— */
.principios { list-style: none; margin: 0; padding: 0; }
.principios li { padding-block: 26px; border-top: 1px solid var(--borde); }
.principios li:last-child { border-bottom: 1px solid var(--borde); }
.principios h3 { margin-bottom: 8px; max-width: 24ch; }
.principios p { max-width: 58ch; color: var(--secundario); }
.etapas { list-style: none; margin: 0; padding: 0; }
.etapas li { display: grid; grid-template-columns: minmax(44px, auto) minmax(0, 1fr); gap: var(--e2) var(--e3); padding-block: var(--e3); border-top: 1px solid var(--borde); }
.etapas li:last-child { border-bottom: 1px solid var(--borde); }
.etapas .numero { font-family: var(--display); font-weight: 600; font-size: clamp(25.89px, 4vw, 41.89px); line-height: .9; letter-spacing: -0.03em; color: var(--suave); font-variant-numeric: tabular-nums; }
.etapas h3 { margin-bottom: 8px; }
.etapas p { max-width: 58ch; }
.etapas .deja { margin-top: 12px; font-size: 15.5px; color: var(--secundario); padding-left: 14px; border-left: 2px solid var(--borde); }
.etapas .deja b { font-weight: 600; color: var(--tinta); }
@media (min-width: 760px) { .etapas li { grid-template-columns: 68px minmax(0, 1fr); } }

/* ——— Tablas (qué queda, qué se va) ——— */
.tabla { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: 14px 14px 14px 0; border-top: 1px solid var(--borde); }
.tabla th { font-weight: 600; width: 36%; }
.tabla tr:last-child td, .tabla tr:last-child th { border-bottom: 1px solid var(--borde); }
.desborda { overflow-x: auto; }

/* ——— Las personas ——— */
.personas { display: grid; gap: 26px; }
@media (min-width: 600px) { .personas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px; } }
.persona { min-width: 0; border-top: 1.5px solid currentColor; padding-top: 16px; }
.persona h3 { margin-bottom: 2px; }
.persona .cargo { color: var(--secundario); }
.persona .correo { margin-top: 12px; display: block; overflow-wrap: anywhere; }

/* ——— El formulario ——— */
.formulario { display: grid; gap: 20px; max-width: 560px; }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 600; font-size: 15.5px; }
.campo .ayuda { font-size: 14.5px; color: var(--secundario); }
.campo input, .campo textarea { font: inherit; color: var(--tinta); background: var(--hoja); border: 1px solid var(--borde); border-radius: 4px; padding: 12px 13px; min-height: 50px; width: 100%; }
.campo textarea { min-height: 150px; resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--tinta); outline-offset: 0; border-color: var(--tinta); }
.copia { margin-top: 18px; }
.copia textarea { width: 100%; min-height: 200px; font: inherit; font-size: 15px; color: var(--tinta); background: var(--hoja); border: 1px solid var(--borde); border-radius: 4px; padding: 12px; }
.aviso { font-size: 15px; color: var(--secundario); min-height: 1.5em; }

/* ——— La contraportada: invitación y pie, sobre tinta ——— */
.contraportada { background: var(--tinta); color: var(--papel); --borde: color-mix(in srgb, var(--papel) 22%, transparent); --secundario: color-mix(in srgb, var(--papel) 72%, var(--tinta)); padding-block: var(--paso) 0; }
.contraportada h2 { max-width: 20ch; font-size: clamp(25.89px, 4.4vw, 41.89px); }
.contraportada .grande { margin-top: 18px; max-width: 42ch; color: var(--secundario); }
.contraportada .accion { margin-top: 30px; }
.contraportada .boton { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.contraportada.sola { padding-top: 0; }
.contraportada.sola .pie { margin-top: 0; border-top: 0; }
.pie { margin-top: var(--paso); border-top: 1px solid var(--borde); padding-block: 36px max(36px, env(safe-area-inset-bottom, 0px)); font-size: 15px; color: var(--secundario); display: grid; gap: 22px; }
.pie .firma-pie { display: flex; align-items: center; gap: 12px; color: var(--papel); }
.pie .firma-pie svg { width: 30px; height: 32px; }
.pie .firma-pie .palabra { display: inline-block; width: 134px; height: 26.5px; background: currentColor; -webkit-mask: url('img/palabra.svg') no-repeat left center / contain; mask: url('img/palabra.svg') no-repeat left center / contain; }
.pie .lema { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--papel); letter-spacing: -0.01em; margin-top: 10px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pie a { color: inherit; }
@media (min-width: 760px) { .pie { grid-template-columns: 1fr auto; align-items: end; } .pie .derecha { text-align: right; } }

/* ——— Quién hace qué: la persona a la izquierda, en tinta; la IA a la derecha, con la pieza naranja.
   Es el elemento gráfico del sitio: cada ejemplo se dibuja con las mismas dos columnas del signo. ——— */
.quien { border-top: 1.5px solid currentColor; }
.quien .cabeza { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-block: 14px 12px; font-family: var(--display); font-weight: 600; font-size: clamp(17px, 2.4vw, 22px); letter-spacing: -0.01em; }
.quien .cabeza .ia { display: flex; align-items: center; gap: 10px; }
.quien .cabeza .ia::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--acto); flex: none; }
.quien .solo-ancho { display: none; }
.quien .ejemplo { border-top: 1px solid var(--borde); padding-block: 22px; }
.quien .ejemplo h3 { font-size: clamp(18px, 2.6vw, 22px); margin-bottom: 12px; }
.quien .lados { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quien .lados p { font-size: 15.5px; color: var(--secundario); }
@media (min-width: 760px) {
  .quien .solo-ancho { display: block; }
  .quien .cabeza { grid-template-columns: 240px 1fr 1fr; gap: 26px; }
  .quien .ejemplo { display: grid; grid-template-columns: 240px 1fr; gap: 26px; align-items: start; }
  .quien .ejemplo h3 { margin: 0; }
  .quien .lados { gap: 26px; }
  .quien .lados p { font-size: 16.5px; }
}

/* ——— El teléfono: la gerencia pregunta, el asistente contesta con el número y el gráfico ——— */
.telefono { width: min(100%, 340px); margin-inline: auto; border: 1.5px solid currentColor; border-radius: 30px; padding: 18px 14px 20px; background: var(--hoja); }
.telefono .hora { font-size: 12px; color: var(--secundario); text-align: center; margin-bottom: 14px; }
.burbuja { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 15px; line-height: 1.4; }
.burbuja.persona { margin-left: auto; background: var(--tinta); color: var(--papel); border-bottom-right-radius: 4px; }
.burbuja.ia { margin-top: 10px; background: var(--papel); border: 1px solid var(--borde); border-bottom-left-radius: 4px; position: relative; }
.burbuja.ia::before { content: ""; position: absolute; left: -1.5px; top: 14px; width: 3px; height: 24px; background: var(--acto); border-radius: 2px; }
.barras { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin: 12px 0 4px; }
.barras span { flex: 1; background: var(--tinta); opacity: .85; border-radius: 2px 2px 0 0; }
.barras span.suave { opacity: .3; }
.barras + small { display: flex; justify-content: space-between; font-size: 11px; color: var(--secundario); }
.telefono .escribir { margin-top: 14px; border: 1px solid var(--borde); border-radius: 20px; padding: 9px 14px; font-size: 14px; color: var(--secundario); }

/* ——— Las personas, sin foto todavía: el monograma ——— */
.monograma { width: 72px; height: 72px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; margin-bottom: 14px; }

/* ——— La tabla de las industrias reguladas (certificacion): tres columnas en escritorio; en el
   teléfono cada industria es una ficha apilada y «Quién lo revisa» lleva su rótulo. ——— */
.tabla.normas thead th { width: auto; font-size: 14.5px; color: var(--secundario); border-top: 0; padding-top: 0; }
.tabla.normas th[scope="row"] { width: 20%; padding-right: 18px; }
.tabla.normas td { padding-right: 18px; }
.tabla.normas td:last-child { width: 24%; padding-right: 0; color: var(--secundario); }
.cierre-tabla { margin-top: clamp(28px, 4vw, 42px); }
@media (max-width: 759px) {
  .tabla.normas thead { position: absolute; left: -9999px; }
  .tabla.normas tr { display: block; border-top: 1px solid var(--borde); padding-block: 18px; }
  .tabla.normas tr:last-child { border-bottom: 1px solid var(--borde); }
  .tabla.normas th, .tabla.normas td { display: block; width: auto; border: 0; padding: 0; }
  .tabla.normas th[scope="row"] { width: auto; padding: 0; font-family: var(--display); font-size: 20px; letter-spacing: -0.015em; line-height: 1.2; margin-bottom: 8px; }
  .tabla.normas td:last-child { width: auto; margin-top: 10px; font-size: 15.5px; }
  .tabla.normas td:last-child::before { content: "Lo revisa: "; font-weight: 600; color: var(--tinta); }
}

/* ——— El ojo del signo se abre una vez: las dos figuras llegan desde más cerca y dejan el vacío
   entre ellas. Único gesto animado del sitio; con «menos movimiento», quieto. ——— */
@media (prefers-reduced-motion: no-preference) {
  .ojo .llama { animation: abrir 1.4s cubic-bezier(.2, .7, .2, 1) .3s both; }
  .ojo .llama.ia { --dx: -9px; --dy: 9px; }
  .ojo .llama.persona { --dx: 9px; --dy: -9px; }
  @keyframes abrir { from { transform: translate(var(--dx), var(--dy)); } to { transform: translate(0, 0); } }
}

/* ——— La planilla: una pantalla genérica del sistema, en HTML ——— */
.planilla { background: var(--hoja); border: 1px solid var(--borde); border-radius: 6px; overflow: hidden; box-shadow: 0 1px 0 var(--borde), 0 24px 48px -36px rgba(42, 38, 34, .45); }
.planilla .barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--borde); font-size: 14px; color: var(--secundario); }
.planilla .barra b { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--tinta); letter-spacing: -0.01em; }
.planilla table { width: 100%; border-collapse: collapse; font-size: 14px; }
.planilla th, .planilla td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.planilla th { font-weight: 600; font-size: 12.5px; color: var(--secundario); }
.planilla tr:last-child td { border-bottom: 0; }
.planilla td.num { font-variant-numeric: tabular-nums; }
.planilla td.espera { color: var(--secundario); }
.planilla td.espera.larga { color: var(--tinta); font-weight: 600; }
.planilla .prep { position: relative; }
.planilla .prep::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; background: var(--acto); border-radius: 2px; }
.planilla .desborda { overflow-x: auto; }

/* ——— Las esperas por paso: el gráfico que dice qué paso corregir ——— */
.esperas { display: grid; gap: 10px; }
.esperas .fila-espera { display: grid; grid-template-columns: minmax(90px, 38.2%) 1fr auto; align-items: center; gap: 12px; font-size: 15px; }
.esperas .fila-espera .barra-espera { height: 14px; background: var(--tinta); opacity: .28; border-radius: 2px; }
.esperas .fila-espera.larga .barra-espera { opacity: 1; }
.esperas .fila-espera.larga { font-weight: 600; }
.esperas .valor { font-variant-numeric: tabular-nums; color: var(--secundario); font-size: 14px; }
.esperas .fila-espera.larga .valor { color: var(--tinta); }

/* ——— Los pictogramas a una tinta (img/pictogramas.svg), usados con <use> ——— */
.picto { width: 30px; height: 30px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tabla th .picto { margin-bottom: 8px; width: 34px; height: 34px; }
.etapas .numero { display: grid; gap: 12px; justify-items: start; }
.etapas .numero .picto { width: 30px; height: 30px; color: var(--secundario); }
.fuentes-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fuentes-lista li { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1.5px solid currentColor; border-radius: 6px; font-size: 16px; }
.fuentes { display: grid; gap: 22px; align-items: center; }
.fuentes .destino { border: 1.5px solid currentColor; border-radius: 6px; padding: 26px 18px; text-align: center; font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.fuentes .destino small { display: block; margin-top: 8px; font-family: var(--texto); font-weight: 400; font-size: 14px; color: var(--secundario); }
.fuentes .flecha { text-align: center; font-size: 28px; line-height: 1; }
@media (min-width: 600px) { .fuentes { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 160px); } }

/* ——— Las ilustraciones a una tinta (de Codex, en img/ilustraciones/): la escena de la empresa y
   las tres viñetas de «Quién hace qué». Transparentes: se apoyan en la banda, sin recuadro. ——— */
.escena { margin: 0; }
.escena img { width: 100%; height: auto; display: block; }
.quien .ejemplo .cabecera-ejemplo { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.quien .ejemplo .vineta { width: 84px; height: 84px; flex: none; display: block; }
@media (min-width: 760px) {
  .quien .ejemplo .cabecera-ejemplo { display: grid; gap: 12px; margin: 0; }
  .quien .ejemplo .vineta { width: 132px; height: 132px; }
}

/* ——— Las ilustraciones del encargo 2 (telefono, papeles, relevamiento, una hora, calle, tarjeta):
   apoyadas en la banda sin recuadro; la vertical se centra y no pasa de 360 px. ——— */
.ilustracion { margin: 0; }
.ilustracion img { width: 100%; height: auto; display: block; }
.ilustracion.vertical { max-width: 428px; margin-inline: auto; }
.ilustracion.ancha { max-width: 692px; }  /* 1120 / φ */
.ilustracion figcaption { margin-top: 12px; font-size: 15px; color: var(--secundario); }
.tarjeta-marca { position: relative; }
.tarjeta-marca .isotipo-montado { position: absolute; width: 9%; height: auto; }

/* La pieza naranja dentro de un dibujo: lo que la IA hizo, o el punto al que se llega. */
figure .acto-pieza { fill: var(--acto); }

/* ——— Los íconos ilustrados (grabado a una tinta, de Codex), en la lista por industria y en las
   etapas: reemplazan a los pictogramas de línea. ——— */
.icono { width: 68px; height: 68px; display: block; flex: none; }
.tabla th .icono { margin-bottom: 6px; }
.etapas .icono { width: 68px; height: 68px; margin: -6px 0 10px -6px; }
@media (min-width: 760px) { .icono { width: 68px; height: 68px; } .etapas .icono { width: 68px; height: 68px; } }

.fuentes-lista .icono-fuente { width: 42px; height: 42px; margin: -6px 0; }

[hidden] { display: none !important; }
.menu-toggle { font: inherit; font-size: 14px; color: var(--tinta); border: 1px solid var(--borde); border-radius: 4px; background: transparent; padding: 10px 14px; min-height: 44px; cursor: pointer; }
@media (max-width: 599px) { .encabezado nav { flex: 1 1 100%; } }

/* La portada presenta una promesa y una evidencia; el detalle comercial sigue debajo. */
.portada-nueva .rotulo { font-size: 13px; letter-spacing: .02em; }
.portada-nueva .grande { max-width: 44ch; }
.portada-nueva .acciones { align-items: center; gap: 16px 24px; }
.enlace-accion { font-weight: 600; padding-block: 12px; }
.nota-portada { margin-top: 20px; color: var(--secundario); font-size: 14px; }
.portada.interior.comercial h1 { max-width: 23ch; }
.portada.interior.comercial .grande { max-width: 60ch; }
.resultados .indice { display: block; font-size: 14px; opacity: .65; margin-bottom: 22px; }
.resultados h3 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 14px; }
.resultados p { max-width: 38ch; color: var(--secundario); }
.recorrido { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; border: 1px solid var(--borde); border-radius: 6px; overflow: hidden; }
.recorrido li { padding: 26px; position: relative; }
.recorrido li + li { border-left: 1px solid var(--borde); }
.numero-recorrido { display: block; color: var(--secundario); font-size: 14px; margin-bottom: 22px; }
.recorrido h3 { margin-bottom: 12px; }
.recorrido p { color: var(--secundario); }
.recorrido .preparado::before { content: ''; position: absolute; top: 0; left: 26px; right: 26px; height: 3px; background: var(--acto); }
/* ——— Qué hacemos: el triángulo a la izquierda (1 : 1,618), centrado contra el título y la lectura
   que van a la derecha; en el teléfono el orden es título → triángulo → lectura. ——— */
.dos.enfoque .cabecera { min-width: 0; }
.triangulo-figura { max-width: 428px; }
@media (min-width: 760px) {
  .dos.enfoque { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); grid-template-areas: "fig cab" "fig lec"; gap: var(--e3) var(--e5); align-items: start; }
  .dos.enfoque .cabecera { grid-area: cab; }
  .dos.enfoque .triangulo-figura { grid-area: fig; align-self: center; }
  .dos.enfoque .lectura { grid-area: lec; }
}
/* ——— Así se ve en el trabajo: el título y la lectura a la izquierda, la viñeta a la derecha, y los
   tres momentos debajo a todo el ancho. En el teléfono, la viñeta cierra la sección, chica, al lado
   de su leyenda. ——— */
.ejemplo-grilla { display: grid; gap: var(--e3); }
.ejemplo-grilla .cabecera .lectura { margin-top: clamp(16px, 3vw, 26px); }
.ejemplo-ilustrado { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: center; }
.ejemplo-ilustrado figcaption { margin-top: 0; }
@media (min-width: 760px) {
  .ejemplo-grilla { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); grid-template-areas: "cab fig" "rec rec"; gap: clamp(26px, 5vw, 42px) var(--e5); align-items: center; }
  .ejemplo-grilla .cabecera { grid-area: cab; min-width: 0; }
  .ejemplo-grilla .recorrido { grid-area: rec; }
  .ejemplo-ilustrado { grid-area: fig; display: block; max-width: 346px; justify-self: center; }
  .ejemplo-ilustrado figcaption { margin-top: 12px; }
}
.contacto-directo { padding-bottom: 32px; }
.contacto-directo h2 { font-size: clamp(26px, 3vw, 33px); margin-bottom: 18px; }
.contacto-directo p + p { margin-top: 20px; }
.contacto-asistido { border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); padding-block: 20px; }
.contacto-asistido summary { cursor: pointer; font-weight: 600; padding-block: 8px; }
.contacto-asistido .formulario { margin-top: 26px; }
.sectores { margin-block: 0 32px; }
.sectores summary { cursor: pointer; font-weight: 600; padding-block: 14px; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.sectores details[open] ul { margin-top: 16px; }
.sectores ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.sectores a { display: inline-block; padding: 9px 13px; font-size: 14px; border: 1px solid var(--borde); border-radius: 4px; text-decoration: none; }
.sectores a:hover { border-color: currentColor; }
[id^="sector-"], #ejemplo { scroll-margin-top: 24px; }
@media (min-width: 900px) {
  .portada-nueva > .ancho { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: 42px; }
  .portada-nueva { padding-block: 48px 68px; }
  .portada-nueva h1 { font-size: clamp(48px, 5.1vw, 64px); }
}
@media (max-width: 759px) {
  .recorrido { grid-template-columns: 1fr; }
  .recorrido li + li { border-left: 0; border-top: 1px solid var(--borde); }
  .recorrido li { padding: 22px; }
  .numero-recorrido { margin-bottom: 10px; }
  .portada-nueva > .ancho > figure { margin-top: 26px; }
  .portada-nueva .ficha .meta { display: none; }
  .portada-nueva .nota-portada { font-size: 13px; }
}
@media (max-width: 440px) {
  .encabezado { padding-top: 16px; gap: 8px; }
  .encabezado .firma .palabra { width: 106px; }
  .navegacion { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
  .navegacion a { font-size: 14px; min-height: 36px; padding-block: 8px; }
  .portada-nueva { padding-top: 20px; }
  .portada-nueva .rotulo { font-size: 11px; margin-bottom: 16px; }
  .portada-nueva .acciones { gap: 6px; }
  .portada-nueva .boton { width: 100%; padding-inline: 12px; font-size: 16px; }
}

.portada .beneficio { margin-top: var(--e2); max-width: 46ch; color: var(--secundario); font-size: 16px; }

/* ——— Movimiento atado al desplazamiento: cuatro gestos con sentido, nada más. Sólo donde el
   navegador lo sabe hacer (Chrome, Edge, Safari; Firefox lo ve quieto y completo) y nunca con
   «reducir movimiento». Ningún contenido depende de la animación: el estado final es el de reposo. ——— */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* 1 · La palanca: al bajar, la IA levanta el triángulo; el punto de apoyo son los datos. */
    #enfoque { view-timeline: --enfoque block; }
    #enfoque .palanca { transform-box: view-box; transform-origin: 300px 271px; animation: palanca linear both; animation-timeline: --enfoque; animation-range: entry 10% cover 50%; }
    #enfoque .triangulo { animation: levantar linear both; animation-timeline: --enfoque; animation-range: entry 10% cover 50%; }
    @keyframes palanca { from { transform: rotate(5deg); } to { transform: rotate(-2deg); } }
    @keyframes levantar { from { transform: translateY(14px); } to { transform: translateY(-6px); } }

    /* 2 · El reclamo: cada momento se enciende al llegar, y en el de la IA se dibuja su línea naranja. */
    .recorrido { view-timeline: --recorrido block; }
    .recorrido li { animation: encender linear both; animation-timeline: --recorrido; animation-range: entry 20% cover 45%; }
    .recorrido li:nth-child(2) { animation-range: entry 35% cover 55%; }
    .recorrido li:nth-child(3) { animation-range: entry 50% cover 65%; }
    .recorrido .preparado::before { transform-origin: left; animation: trazar linear both; animation-timeline: --recorrido; animation-range: entry 45% cover 60%; }
    @keyframes encender { from { opacity: .25; } to { opacity: 1; } }
    @keyframes trazar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* 3 · Las etapas: una línea fina las recorre a medida que se leen. */
    .etapas { position: relative; view-timeline: --etapas block; }
    .etapas::before { content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 1.5px; background: var(--tinta); opacity: .55; transform-origin: top; animation: recorrer linear both; animation-timeline: --etapas; animation-range: entry 30% exit 70%; }
    @keyframes recorrer { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}

/* ——— Por dónde empezar: cuatro puertas, cada una abre con la frase de quien llega y nombra el
   servicio debajo. Lo amplio se ve en que hay cuatro, no en una lista de capacidades. ——— */
.puertas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
@media (min-width: 760px) { .puertas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); } }
.puertas a { display: grid; align-content: start; gap: 10px; height: 100%; padding: var(--e3); background: var(--hoja); border: 1px solid var(--borde); border-radius: 6px; text-decoration: none; }
.puertas a:hover, .puertas a:focus-visible { border-color: currentColor; }
.puertas .situacion { font-size: clamp(17px, 2vw, 19px); line-height: 1.45; color: var(--secundario); }
.puertas .servicio { font-family: var(--display); font-weight: 600; font-size: clamp(20.35px, 2.6vw, 25.89px); letter-spacing: -0.015em; margin-top: 6px; }
.puertas .servicio::after { content: " →"; }
.puertas .que { font-size: 15.5px; }

/* ——— Lo que suele venir después: los enlaces a las otras puertas, al pie de cada servicio ——— */
.siguientes { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.siguientes a { display: block; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 4px; text-decoration: none; font-size: 15.5px; }
.siguientes a:hover, .siguientes a:focus-visible { border-color: currentColor; }
.siguientes b { font-weight: 600; }
.lectura ul.siguientes { padding-left: 0; }

/* ——— Gestión documental, en tres pasos que se tocan: sin JavaScript los tres se leen seguidos ——— */
.pestanas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--e3); }
.pestanas button { font: inherit; font-weight: 600; font-size: 15.5px; color: var(--tinta); background: transparent; border: 1.5px solid var(--borde); border-radius: 4px; padding: 10px 16px; min-height: 44px; cursor: pointer; }
.pestanas button[aria-selected="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.pestanas button:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.pasos-doc .panel + .panel { margin-top: var(--e4); }
.pasos-doc .panel:not([hidden]) + .panel[hidden] { margin-top: 0; }
.pasos-doc .panel h3 { margin-bottom: 10px; }
.pasos-doc .planilla table + table { border-top: 1.5px solid var(--borde); }
.pasos-doc .planilla td { white-space: normal; }
@media (prefers-reduced-motion: no-preference) { .pasos-doc .panel:not([hidden]) { animation: aparecer .35s ease-out both; } @keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } }
.quien .ejemplo > h3 { min-width: 0; }

/* ——— Conversemos: el texto para pegar en el asistente de IA de quien nos escribe ——— */
.con-ia { margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--borde); }
.con-ia h3 { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.con-ia h3::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--acto); flex: none; }
.con-ia .prompt { margin: 18px 0 14px; padding: 16px 18px; max-height: 300px; overflow: auto; white-space: pre-wrap; font: 15px/1.55 var(--texto); color: var(--tinta); background: var(--hoja); border: 1px solid var(--borde); border-radius: 4px; }
.con-ia .prompt:focus-visible { outline: 2px solid var(--tinta); outline-offset: 0; }
.con-ia .aviso { margin-top: 10px; }
/* La lista de «lo que suele venir después» adentro de una etapa no es otra etapa: sin la rejilla ni
   los bordes de `.etapas li`, que la partían en una columna de una palabra (medido el 2026-10-22). */
.etapas .siguientes li { display: block; padding: 0; border: 0; }
.etapas .siguientes li:last-child { border-bottom: 0; }

/* ——— El chat de Gestión documental: la persona pregunta, la IA contesta citando el procedimiento.
   Ventana de alto fijo: nada de lo que está alrededor se mueve mientras conversa. La pieza naranja es
   la de la burbuja de la IA; la fuente va en tinta, subrayada como un enlace. ——— */
.chat { background: var(--hoja); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 1px 0 var(--borde), 0 24px 48px -36px rgba(42, 38, 34, .45); overflow: hidden; }
.chat-cabeza { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--borde); font-size: 14px; color: var(--secundario); }
.chat-cabeza b { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--tinta); letter-spacing: -0.01em; }
.chat-cuerpo { height: 330px; padding: 0 18px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 42px); mask-image: linear-gradient(to bottom, transparent 0, #000 42px); }
.chat-carril { display: flex; flex-direction: column; gap: 12px; padding-bottom: 18px; will-change: transform; }
.chat .burbuja { margin: 0; }
.chat .burbuja.ia { margin-top: 0; padding: 12px 14px; }
.chat .burbuja.ia p + p { margin-top: 10px; }
.chat .fuente { font-size: 13.5px; color: var(--secundario); padding-top: 8px; border-top: 1px solid var(--borde); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.chat .fuente::before { content: "Fuente: "; font-weight: 600; color: var(--tinta); }
.chat-escribir { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 14px 14px; padding: 8px 8px 8px 16px; border: 1px solid var(--borde); border-radius: 22px; font-size: 14.5px; color: var(--secundario); white-space: nowrap; overflow: hidden; }
.chat-escribir .enviar { width: 28px; height: 28px; border-radius: 50%; background: var(--tinta); color: var(--papel); display: grid; place-items: center; font-size: 14px; flex: none; }
.chat .puntos { display: inline-flex; gap: 5px; align-self: flex-start; padding: 14px 16px; background: var(--papel); border: 1px solid var(--borde); border-radius: 14px; border-bottom-left-radius: 4px; }
.chat .puntos span { width: 8px; height: 8px; border-radius: 50%; background: var(--suave); animation: punto 1.1s infinite ease-in-out; }
.chat .puntos span:nth-child(2) { animation-delay: .15s; }
.chat .puntos span:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 599px) { .chat-cuerpo { height: 360px; } }

/* ——— En el teléfono (medido el 2026-10-22 a 390 px): los tres pasos en una fila pareja, el dibujo de
   la portada más chico y sin el hueco de abajo, y el texto para la IA más corto a la vista. ——— */
@media (max-width: 599px) {
  .pestanas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pestanas button { padding: 8px 6px; font-size: 13.5px; line-height: 1.25; }
  .portada-nueva > .ancho > figure.ilustracion { max-width: 300px; margin: 26px auto 0; }
  .portada-nueva { padding-bottom: 26px; }
  .con-ia .prompt { max-height: 220px; font-size: 14px; }
  .chat .burbuja { max-width: 92%; font-size: 14.5px; }
  .chat-cuerpo { padding: 0 14px; }
}

/* ——— El menú abierto en el teléfono: una lista a todo el ancho, una entrada por renglón, con aire
   para el dedo, en vez de la grilla de dos columnas que dejaba entradas sueltas (José, 2026-10-22:
   «el menú abierto en móviles no me convence»). ——— */
@media (max-width: 599px) {
  .encabezado { padding-bottom: 8px; }
  .encabezado nav { flex: 1 1 100%; }
  .navegacion { display: flex; flex-direction: column; gap: 0; margin: 8px 0 6px; border-top: 1px solid var(--borde); }
  .navegacion li { border-bottom: 1px solid var(--borde); }
  .navegacion a { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 2px; font-size: 18px; line-height: 1.2; color: var(--tinta); }
  .navegacion a::after { content: "→"; color: var(--suave); font-size: 16px; }
  .navegacion a[aria-current="page"] { font-weight: 600; text-decoration: none; }
  .navegacion a[aria-current="page"]::after { content: "·"; color: var(--tinta); font-size: 22px; }
  .menu-toggle { min-width: 84px; }
}

/* ——— Software y sistemas: los módulos de gestión de la base, en una grilla más liviana que los tres
   de arriba para que la lista de doce se lea de un vistazo. ——— */
.subtitulo { font-size: clamp(20.35px, 2.6vw, 25.89px); line-height: 1.2; }
.areas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--e4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .areas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.areas li { padding-block: 16px; border-top: 1px solid var(--borde); }
.areas h4 { margin: 0 0 4px; font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.areas p { font-size: 15px; color: var(--secundario); }

/* ——— Software y sistemas: el acceso de la IA a los datos, en cuatro reglas que se leen solas ——— */
.lectura ul.gobierno { list-style: none; padding: 0; margin-top: var(--e3); }
.gobierno li { padding: 14px 0 14px 18px; border-top: 1px solid var(--borde); position: relative; }
.gobierno li:last-child { border-bottom: 1px solid var(--borde); }
.gobierno li::before { content: ""; position: absolute; left: 0; top: 22px; width: 6px; height: 6px; border-radius: 50%; background: var(--tinta); }
.lectura .gobierno li + li { margin-top: 0; }
.gobierno b { font-weight: 600; }