/* alexgonzalezgo.com — hoja unica para las 10 paginas.
   Compartida a proposito: diez paginas con la misma cabecera y el mismo pie no
   pueden llevar diez copias del CSS. Ademas se cachea entre navegaciones. */

:root{
  --ink:#0A0A0A;
  --ink-2:#1F1F20;
  --text:#636363;
  --line:#E6E4E1;
  --bg:#FFFFFF;
  --bg-2:#F4F3F1;
  --accent:#E4572E;
  --accent-d:#C6431F;
  --accent-soft:#FDEEE8;
  --f:'Inter Tight',system-ui,-apple-system,sans-serif;
  --maxw:1120px;
  --pad:clamp(20px,5vw,48px);
  --r:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--f);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:760px;margin:0 auto}

/* ── NAV ──────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav .in{max-width:var(--maxw);margin:0 auto;padding:14px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;
  letter-spacing:-.03em;white-space:nowrap}
.logo .dot{width:26px;height:26px;border-radius:8px;background:var(--accent);flex-shrink:0;
  display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800}
/* QUIEN CEDE CUANDO NO CABE. La barra tiene cuatro cosas que no caben juntas en
   un movil de 360px: el nombre, el selector de idioma, el CTA y el boton de
   menu. Sin decir cual cede, el reparto lo decide el orden del flex y le toco
   al ultimo: el boton de menu se salio de la pantalla en TODOS los anchos de
   movil (36px fuera a 390px, 122px a 320px) y `overflow-x:hidden` lo recorto en
   silencio. El sitio entero se quedo sin navegacion en el telefono.
   Aqui se declara al reves: las acciones nunca encogen y el nombre siempre.
   `min-width:0` es la mitad que hace falta -- un item de flex no baja de su
   contenido a menos que se le diga, asi que sin esto el `text-overflow` no
   llega a activarse nunca. */
.logo{min-width:0}
.logo .nombre{overflow:hidden;text-overflow:ellipsis;min-width:0}
.nav .acc{flex-shrink:0}
/* 26px de alto es el tamano del monograma, no el de un objetivo tactil. El
   relleno no cambia el alto de la barra: lo sigue mandando el boton naranja. */
.nav .logo{padding:5px 0}
/* El menu absorbe el espacio libre con margin-left:auto, asi que el y el bloque
   de acciones quedan juntos a la derecha, como estaban antes de separarlos. */
.nav .lk{display:flex;gap:22px;align-items:center;margin-left:auto}
.nav .acc{display:flex;gap:16px;align-items:center}
/* Nada del menu se parte en dos lineas. Un item roto a la mitad
   ("Operacion / mensual", "Sobre / mi") no se lee como una linea mas: se lee
   como una pagina rota. Si no cabe, es que sobra un item, no que haya que
   partirlo. */
.nav .lk a,.nav .in>.logo,.nav .acc a{white-space:nowrap}

/* Boton de menu: tres barras dibujadas con bordes, sin SVG ni iconos. */
.ham{display:none;width:40px;height:36px;border:1px solid var(--line);
  border-radius:10px;background:transparent;cursor:pointer;place-items:center;
  padding:0;flex-shrink:0}
.ham:hover{border-color:var(--ink)}
.ham span,.ham span::before,.ham span::after{display:block;width:17px;height:1.8px;
  background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.ham span{position:relative}
.ham span::before,.ham span::after{content:"";position:absolute;left:0}
.ham span::before{top:-5.5px}
.ham span::after{top:5.5px}
.nav.abierto .ham span{background:transparent}
.nav.abierto .ham span::before{transform:translateY(5.5px) rotate(45deg)}
.nav.abierto .ham span::after{transform:translateY(-5.5px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){
  .ham span,.ham span::before,.ham span::after{transition:none}
}

.nav .lk a:not(.btn):not(.lang){font-size:14.5px;font-weight:500;color:var(--text)}
.nav .lk a:not(.btn):not(.lang):hover{color:var(--ink)}
.nav .lk a.on{color:var(--ink) !important;font-weight:600}
.lang{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--text);
  border:1px solid var(--line);border-radius:999px;padding:7px 11px}
.lang:hover{border-color:var(--accent);color:var(--accent)}
/* Reduccion progresiva del menu, de mas ancho a mas estrecho. Con nowrap, un
   menu que no cabe ya no se parte: desborda a lo ancho. Asi que se retiran
   items antes de llegar a ese punto, empezando por los menos comerciales. */
@media(max-width:1150px){ .nav .lk a.sec{display:none} }

/* ── Menu en movil ─────────────────────────────────────────────────
   Por debajo de 900px los enlaces pasan a un panel bajo la barra y aparece el
   boton. El selector de idioma y el CTA se quedan SIEMPRE visibles: son la
   accion que paga el sitio, y esconderla detras de un toque es regalarla.

   El panel solo se esconde si hay JavaScript (`html.js`, marcado en el head
   antes de pintar). Sin JavaScript los enlaces se ven apilados y el sitio se
   navega igual; un menu que depende de un script para EXISTIR deja el sitio
   sin navegacion cuando el script no carga. */
@media(max-width:900px){
  .ham{display:grid}
  .nav .in{flex-wrap:wrap;row-gap:0;gap:12px}
  .nav .lk{order:3;width:100%;margin-left:0;flex-direction:column;
    align-items:stretch;gap:0;border-top:1px solid var(--line);
    padding:4px 0 10px;margin-top:12px}
  .nav .lk a{padding:13px 2px;font-size:16px !important;
    border-bottom:1px solid var(--line)}
  .nav .lk a:last-child{border-bottom:0}
  .nav .lk a.sec{display:block}
  .js .nav .in{flex-wrap:nowrap}
  .js .nav .lk{display:none;position:absolute;top:100%;left:0;right:0;z-index:70;
    background:var(--bg);border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);margin-top:0;
    padding:4px var(--pad) 14px;box-shadow:0 12px 24px rgba(0,0,0,.06)}
  .js .nav.abierto .lk{display:flex}
}
/* Recorte del nombre por pasos, para que el ellipsis sea la red y no el plan.
   El punto naranja YA es la A, asi que esconder el nombre de pila deja "[A]
   González", que se sigue leyendo como la marca y libera unos 110px: los que
   faltaban. Por debajo de 360px no queda ni eso y manda el monograma solo. */
@media(max-width:560px){
  .nav .acc{gap:8px}
  .nav .in{padding-left:18px;padding-right:18px}
  .logo{font-size:15px;gap:8px}
  .logo .nom{display:none}
  /* Solo el boton DE LA BARRA se compacta. Los CTA del cuerpo siguen grandes:
     son el objetivo tactil que paga el sitio. */
  .nav .acc .btn{font-size:14px;padding:9px 14px}
  .lang{padding:7px 9px}
}
@media(max-width:400px){
  .nav .in{padding-left:14px;padding-right:14px}
}
@media(max-width:359px){
  .logo .nombre{display:none}
}

/* ── BOTONES ──────────────────────────────────────────────────────── */
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:600;font-size:15px;
  padding:11px 22px;border-radius:999px;transition:background .15s}
.btn:hover{background:var(--accent-d);color:#fff}
.btn-lg{font-size:16.5px;padding:14px 28px}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink);font-weight:600;
  font-size:15px;padding:9.5px 20px;border-radius:999px;display:inline-block}
.btn-ghost:hover{border-color:var(--ink)}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;align-items:center}

/* ── HERO ─────────────────────────────────────────────────────────── */
.hero{padding:clamp(48px,6.5vw,86px) 0 clamp(34px,4.5vw,56px)}
.hero.sm{padding:clamp(40px,5vw,64px) 0 clamp(26px,3vw,40px)}
.pill{display:inline-flex;align-items:center;gap:9px;background:var(--accent-soft);color:var(--accent-d);
  font-size:13px;font-weight:600;padding:7px 15px;border-radius:999px;margin-bottom:24px}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
h1{font-weight:800;font-size:clamp(34px,5.4vw,58px);line-height:1.03;letter-spacing:-.045em;
  max-width:19ch}
h1 em{font-style:normal;color:var(--accent)}
.hero .lede{font-size:clamp(16.5px,2vw,19px);color:var(--text);margin-top:22px;max-width:56ch}

/* ── SECCIONES ────────────────────────────────────────────────────── */
section.sec{padding:clamp(52px,7vw,88px) 0;scroll-margin-top:72px}
.alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.head{margin-bottom:clamp(26px,3.5vw,42px);max-width:62ch}
/* La cabecera del INDICE del blog llevaba margin-bottom y nada arriba, asi que
   su titular quedaba pegado a la barra, que es sticky. Las demas paginas si
   tenian su respiro: .hero usa 48-86px y .post-head 56px; esta, cero.
   El selector va con `header.` a proposito: los `div.head` de las portadas son
   cabeceras de SECCION y ya reciben el espaciado de `.sec`. Se usa el mismo
   valor que `.hero.sm`, que es la cabecera equivalente del resto del sitio. */
header.head{padding-top:clamp(40px,5vw,64px)}
.kick{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px}
h2{font-weight:800;font-size:clamp(26px,3.9vw,40px);line-height:1.07;letter-spacing:-.04em;max-width:20ch}
h3{font-weight:700;font-size:clamp(19px,2.3vw,23px);letter-spacing:-.03em;line-height:1.2}
.head p{font-size:17px;color:var(--text);margin-top:16px;max-width:58ch}

/* Prosa: el bloque de "el problema" y los relatos. Sin vinetas a proposito. */
.prosa p{font-size:clamp(16.5px,1.9vw,18.5px);color:var(--text);max-width:60ch;margin-bottom:18px;
  line-height:1.62}
.prosa p:last-child{margin-bottom:0}
.prosa p strong,.prosa p b{color:var(--ink);font-weight:600}
.prosa .destacado{font-size:clamp(18px,2.2vw,21px);color:var(--ink);font-weight:600;
  letter-spacing:-.02em;line-height:1.4;max-width:52ch}

/* ── SERVICIOS ────────────────────────────────────────────────────── */
.svcs{display:grid;gap:18px}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3vw,34px);scroll-margin-top:92px;transition:box-shadow .18s,transform .18s}
.svc:hover{box-shadow:0 18px 44px rgba(10,10,10,.08);transform:translateY(-2px)}
.svc .num{font-size:12.5px;font-weight:800;color:var(--accent);letter-spacing:.1em;margin-bottom:12px}
.svc h3{margin-bottom:8px}
.svc .sub{font-size:16px;color:var(--text);font-style:italic;margin-bottom:16px}
.svc .tx{font-size:16.5px;color:var(--text);max-width:62ch}
.svc .tx + .tx{margin-top:12px}
.svc .pz{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.svc .pz .val{font-size:clamp(19px,2.3vw,24px);font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.svc .pz .val small{display:block;font-size:14px;font-weight:500;color:var(--text);
  letter-spacing:-.01em;margin-top:3px}
.svc.destacado{border-color:var(--accent);border-width:1.5px;
  background:linear-gradient(180deg,#FFFAF8 0%,#fff 58%)}

/* ── LISTAS ───────────────────────────────────────────────────────── */
ul.check{list-style:none;display:grid;gap:12px;margin-top:8px}
ul.check li{display:flex;gap:12px;font-size:16.5px;color:var(--text);line-height:1.5;max-width:62ch}
ul.check li::before{content:"";width:16px;height:16px;flex-shrink:0;margin-top:5px;
  background:var(--accent);opacity:.9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat}
ul.check li b{color:var(--ink);font-weight:600}

ol.pasos{list-style:none;counter-reset:n;display:grid;gap:14px;margin-top:8px}
ol.pasos li{counter-increment:n;display:flex;gap:16px;font-size:16.5px;color:var(--text);
  line-height:1.55;max-width:62ch}
ol.pasos li::before{content:counter(n);flex-shrink:0;width:28px;height:28px;border-radius:9px;
  background:var(--accent-soft);color:var(--accent-d);font-size:13px;font-weight:800;
  display:grid;place-items:center;margin-top:2px}
ol.pasos li b{color:var(--ink);font-weight:600}

/* ── PASOS DEL PROCESO (bloques con regla a la izquierda) ─────────── */
.flujo{display:grid;gap:2px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.flujo .p{background:#fff;padding:22px clamp(20px,3vw,28px)}
.flujo .p b{display:block;font-weight:700;font-size:17px;letter-spacing:-.02em;margin-bottom:5px}
.flujo .p span{font-size:16px;color:var(--text);line-height:1.55}
.alt .flujo .p{background:var(--bg-2)}

/* ── PRUEBA / CASOS ───────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:760px){ .cards{grid-template-columns:1fr} }
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px}
.alt .card{background:#fff}
.card b{display:block;font-weight:700;font-size:17.5px;letter-spacing:-.025em;line-height:1.28}
.card p{font-size:15.5px;color:var(--text);margin-top:9px;line-height:1.55}

.caso{border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,34px);
  background:#fff;margin-bottom:18px}
.caso .sector{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px}
.caso h3{margin-bottom:18px}
.caso dl{display:grid;gap:16px}
.caso dt{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);margin-bottom:5px}
.caso dd{font-size:16px;color:var(--text);line-height:1.58;max-width:62ch}

/* ── BANDA OSCURA ─────────────────────────────────────────────────── */
.banda{background:var(--ink);color:#fff}
.banda .in{max-width:var(--maxw);margin:0 auto;padding:clamp(52px,7vw,84px) var(--pad);text-align:center}
.banda h2{color:#fff;max-width:20ch;margin:0 auto}
.banda p{color:#9C9C9C;font-size:17px;max-width:54ch;margin:18px auto 0}
.banda .acts{justify-content:center}
.banda .fine{color:#7A7A7A;font-size:14px;margin-top:18px}

/* ── CITA / NOTA HONESTA ──────────────────────────────────────────── */
.nota-honesta{border-left:3px solid var(--accent);padding:2px 0 2px 22px;margin:26px 0;
  max-width:58ch}
.nota-honesta p{font-size:clamp(17px,2vw,19px);color:var(--ink);font-weight:600;
  letter-spacing:-.02em;line-height:1.42}
.nota-honesta p + p{margin-top:12px;font-weight:400;font-size:16.5px;color:var(--text);
  letter-spacing:0}

/* ── FOOTER ───────────────────────────────────────────────────────── */
footer{background:var(--ink);color:#9C9C9C;margin-top:0}
footer .in{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,5vw,60px) var(--pad) 32px}
.fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
@media(max-width:1000px){ .fg{grid-template-columns:1.6fr 1fr 1fr} }
@media(max-width:760px){ .fg{grid-template-columns:1fr 1fr} }
@media(max-width:460px){ .fg{grid-template-columns:1fr} }
.fg .logo{color:#fff;font-size:18px}
.fg .bio{font-size:15px;margin-top:14px;max-width:34ch;line-height:1.6}
.fc h4{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#6E6E6E;margin-bottom:14px}
/* Los enlaces del pie median 23px de alto en el telefono, por debajo del minimo
   tactil de 24px que mide Lighthouse y muy por debajo de lo que se acierta con
   el pulgar. El alto sale del padding, no del margen: el margen separa cajas,
   pero el area que responde al toque es la caja. */
.fc a,.fc span{display:block;font-size:15px;color:#9C9C9C;margin-bottom:2px;
  padding:6px 0}
.fc a:hover{color:#fff}
.fb{border-top:1px solid #262626;margin-top:36px;padding-top:22px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13.5px;color:#6E6E6E}
.fb a{color:#9C9C9C;display:inline-block;padding:5px 0}

/* ── AVISO DE BORRADOR (solo en preproduccion) ────────────────────── */
.draft{background:#1F1F20;color:#FFD9CC;font-size:13.5px;text-align:center;
  padding:9px 16px;line-height:1.4}
.draft b{color:#fff}

/* ── BANDA DE CIFRAS ──────────────────────────────────────────────── */
/* Va justo despues del hero: promesa -> prueba -> problema. La autoridad
   numerica se habia perdido al cambiar de arquitectura (la home quedo con dos
   cifras donde antes habia seis). */
.cifras{background:var(--ink);color:#fff}
.cifras .in{max-width:var(--maxw);margin:0 auto;padding:clamp(36px,5vw,58px) var(--pad)}
.cifras .k{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#8B8B8B;margin-bottom:30px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,36px)}
@media(max-width:760px){ .grid4{grid-template-columns:repeat(2,1fr);gap:28px} }
.cifra .n{font-size:clamp(28px,4.2vw,44px);font-weight:800;letter-spacing:-.05em;line-height:1}
.cifra .n i{font-style:normal;color:var(--accent)}
.cifra p{font-size:14px;color:#9C9C9C;margin-top:10px;line-height:1.45}

/* ── BLOG ─────────────────────────────────────────────────────────────
   Anadido al montar el blog. Reusa los tokens de arriba a proposito: el
   blog es una seccion del sitio, no otro sitio con el mismo dominio. */
/* `min(320px,100%)` y no `320px` a secas. Con el valor pelado, el MINIMO de la
   pista sigue siendo 320px aunque el contenedor mida menos, asi que en una
   pantalla de 320px (donde el ancho util son 280) cada tarjeta se salia 40px y
   `overflow-x:hidden` le cortaba el borde derecho. El `min()` deja que la pista
   baje hasta el ancho real del contenedor cuando ya no hay sitio. */
.post-grid{display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
  padding-bottom:80px}
.post-card{border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;
  display:flex;flex-direction:column;gap:12px;background:var(--bg);
  transition:border-color .18s ease,transform .18s ease}
.post-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.post-card h2{font-size:20px;letter-spacing:-.02em;line-height:1.25}
.post-card p{color:var(--text);font-size:15px;line-height:1.6}
.post-card .fecha{color:var(--text);font-size:13px;margin-top:auto}
.vacio{color:var(--text);padding:40px 0 80px}

/* `padding-top`/`padding-bottom` y NO el atajo `padding`. La cabecera lleva las
   mismas clases que el cuerpo (`wrap narrow`), pero el atajo reescribia los
   cuatro lados y borraba el `padding:0 var(--pad)` que `.wrap` pone a los
   costados: el titular, la entradilla y la ficha del autor salian PEGADOS al
   borde izquierdo de la pantalla mientras el texto de debajo si respetaba su
   margen. En escritorio no se ve, porque `.narrow` mide 760px y sobra sitio a
   los lados; aparece justo cuando la ventana baja de esos 760px, o sea en todo
   el movil y en buena parte de las tabletas. Era el fallo mas visible del blog
   y ninguna medida de ancho lo delataba: el texto no se SALIA de la pantalla,
   se pegaba a ella. */
.post-head{padding-top:56px;padding-bottom:28px;
  display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.post-head .volver{color:var(--text);font-size:14px;font-weight:500;
  display:inline-block;padding:6px 0}
.post-head .volver:hover{color:var(--accent)}
.post-head h1{font-size:clamp(30px,5vw,46px);letter-spacing:-.035em;line-height:1.1}
.post-head .entradilla{color:var(--text);font-size:19px;line-height:1.55}
.post-head .meta{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--text);font-size:14px;
  border-top:1px solid var(--line);padding-top:14px;width:100%;margin-top:6px}

.post-cuerpo{padding-bottom:16px}
.post-cuerpo h2{font-size:27px;letter-spacing:-.028em;line-height:1.2;margin:44px 0 14px}
.post-cuerpo h3{font-size:19px;letter-spacing:-.02em;margin:30px 0 10px}
/* Una URL sin espacios o un `codigo-con-guiones` largo no tiene donde partirse
   y estira su parrafo hasta sacarlo de la pantalla. Es la forma mas comun de
   romper un movil escribiendo, y llega por el Markdown, no por el CSS: no hay
   revision editorial que la pueda vigilar articulo a articulo. */
.post-cuerpo{overflow-wrap:break-word}
.post-cuerpo p{color:var(--ink-2);font-size:17.5px;line-height:1.72;margin:0 0 18px}
.post-cuerpo ul,.post-cuerpo ol{margin:0 0 20px;padding-left:22px;
  display:flex;flex-direction:column;gap:9px}
.post-cuerpo li{color:var(--ink-2);font-size:17.5px;line-height:1.65}
.post-cuerpo li::marker{color:var(--accent)}
.post-cuerpo a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.post-cuerpo a:hover{color:var(--accent-d)}
.post-cuerpo strong{color:var(--ink);font-weight:650}
.post-cuerpo code{background:var(--bg-2);border-radius:6px;padding:2px 6px;
  font-family:ui-monospace,Consolas,monospace;font-size:.9em}
/* Los bloques de codigo NO tenian ninguna regla, asi que salian con el estilo
   por defecto del navegador: `white-space:pre` sin `overflow`, o sea 248px
   fuera de la pantalla a 390px en `que-es-llms-txt`. Lo tapaba el
   `overflow-x:hidden` del body, que es la misma trampa del 2026-08-13: la
   proteccion contra el sintoma escondiendo la enfermedad. Lo caza `_movil.mjs`
   porque mide `scrollWidth`, que el recorte no puede falsear.

   El scroll horizontal aqui es deliberado y no se cambia por partir lineas: en
   un `llms.txt` o un `robots.txt` el salto de linea es sintaxis, y partirlo
   ensenaria un ejemplo que no funciona si alguien lo copia. */
.post-cuerpo pre{max-width:100%;overflow-x:auto;background:var(--bg-2);
  border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:0 0 24px;
  font-family:ui-monospace,Consolas,monospace;font-size:13.5px;line-height:1.55;
  -webkit-overflow-scrolling:touch}
.post-cuerpo pre code{background:none;padding:0;border-radius:0;font-size:inherit}
.post-cuerpo blockquote{border-left:3px solid var(--accent);padding:4px 0 4px 20px;margin:0 0 20px}
.post-cuerpo blockquote p{margin:0;color:var(--ink)}
.tabla{overflow-x:auto;margin:0 0 24px;border:1px solid var(--line);border-radius:12px;
  -webkit-overflow-scrolling:touch}
.tabla table{border-collapse:collapse;width:100%;font-size:15px}
.tabla th{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);
  font-weight:650;white-space:nowrap;background:var(--bg-2)}
.tabla td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--ink-2);
  vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
/* El `white-space:nowrap` de las cabeceras le pone suelo al ancho de la tabla:
   una de cuatro columnas pedia 451px y en el telefono habia que arrastrarla
   entera. Dejandolas partir, la mayoria cabe sin scroll. El `overflow-x` sigue
   ahi para las que no: es la red, no el modo normal de leerlas. */
@media(max-width:640px){
  .tabla table{font-size:14px}
  .tabla th{white-space:normal;padding:10px 11px}
  .tabla td{padding:10px 11px}
}
@media(max-width:420px){
  .tabla th,.tabla td{padding:9px 8px}
}

.faq{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;margin-top:8px}
.faq .qa{padding:20px 22px;border-bottom:1px solid var(--line)}
.faq .qa:last-child{border-bottom:0}
.faq .qa h3{margin:0 0 8px;font-size:17px}
.faq .qa p{margin:0;color:var(--text);font-size:16px;line-height:1.65}

.cta-post{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  padding:32px 30px;margin:48px 0 0;display:flex;flex-direction:column;gap:12px;
  align-items:flex-start}
.cta-post h2{font-size:22px;letter-spacing:-.025em;line-height:1.25}
.cta-post p{color:var(--text);font-size:16.5px;line-height:1.6}
.cta-post .btn{margin-top:6px}

.rel{margin:44px 0 90px;border-top:1px solid var(--line);padding-top:24px}
.rel h2{font-size:15px;text-transform:uppercase;letter-spacing:.09em;color:var(--text);
  font-weight:600;margin-bottom:14px}
.rel ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.rel li{display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line)}
.rel li:last-child{border-bottom:0}
.rel li a{font-weight:550;font-size:16.5px;letter-spacing:-.015em;padding:5px 0}
.rel li a:hover{color:var(--accent)}
.rel li span{color:var(--text);font-size:13px;white-space:nowrap}
/* La etiqueta del cluster va `nowrap` para no partirse a mitad, y "GEO -
   posicionamiento en IA generativa" mide 221px: en una pantalla de 320 no cabe
   al lado del titulo por mucho que este encoja, y sacaba el documento entero
   31px fuera. En el telefono se apila debajo, que es donde se lee mejor. */
@media(max-width:560px){
  .rel li{flex-direction:column;align-items:flex-start;gap:3px}
  .rel li span{white-space:normal}
}

/* ── Retrato ──────────────────────────────────────────────────────────
   La cara importa en un sitio cuyo argumento es la confianza, y mas cuando
   se le vende desde Colombia a empresas de Nueva Jersey. width y height van
   SIEMPRE en el HTML: sin ellos el navegador no reserva el hueco y la pagina
   salta al cargar la imagen. Eso es CLS, una de las tres metricas que este
   sitio dice saber arreglar. */
.retrato-fila{display:grid;gap:clamp(26px,4vw,54px);align-items:center;
  grid-template-columns:1fr}
.retrato{width:100%;max-width:300px;height:auto;border-radius:var(--r);
  justify-self:start}
@media(min-width:820px){
  .retrato-fila{grid-template-columns:minmax(0,1fr) 300px}
  .retrato-fila.invertida{grid-template-columns:minmax(0,1fr) 260px}
  .retrato-fila.invertida .retrato{max-width:260px;justify-self:end}
}


/* -- Herramientas (llms.txt) --------------------------------------------
   Los dos generadores del sitio son las unicas paginas con formulario, asi
   que hasta ahora no habia ni un estilo de input en todo el CSS. Se anaden
   aqui y no en un archivo aparte porque style.css se versiona por hash: un
   segundo archivo seria un segundo hash que mantener y una peticion mas en
   la cascada, en un sitio cuyo argumento son las Core Web Vitals. */
.herram{display:flex;flex-direction:column;gap:18px}
.herram label{display:flex;flex-direction:column;gap:7px;font-size:14px;
  font-weight:550;color:var(--ink);letter-spacing:-.01em}
.herram input[type=text],.herram textarea{width:100%;padding:11px 13px;
  border:1px solid var(--line);border-radius:calc(var(--r) / 2);
  background:var(--bg);color:var(--ink);font:inherit;font-size:15px;
  font-weight:400;line-height:1.55}
.herram textarea{resize:vertical;min-height:64px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px}
.herram input:focus,.herram textarea:focus{outline:2px solid var(--accent);
  outline-offset:1px;border-color:transparent}
.herram .acts{margin:0;display:flex;flex-wrap:wrap;gap:10px}

.lg-sec{border:1px solid var(--line);border-radius:var(--r);padding:16px;
  display:flex;flex-direction:column;gap:14px}
/* Es el unico control discreto del sitio que seguia por debajo del minimo
   tactil. Los demas enlaces cortos que quedan van dentro de parrafos, y ahi
   agrandar el area rompe el interlineado: se dejan a proposito. */
.lg-quitar{align-self:flex-start;background:none;border:0;padding:7px 0;
  font:inherit;font-size:13px;color:var(--text);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.lg-quitar:hover{color:var(--accent)}

.lt-resumen{margin:4px 0 0;font-size:14.5px;color:var(--text);line-height:1.6}
.lt-lista{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0}
.lt-lista li{font-size:14.5px;line-height:1.55;padding:11px 13px;
  border-radius:calc(var(--r) / 2);border-left:3px solid var(--line);
  background:var(--bg-2)}
.lt-lista .lt-error{border-left-color:#c0392b}
.lt-lista .lt-aviso{border-left-color:#c8891f}
.lt-lista .lt-ok{border-left-color:#2e7d4f}
.lt-n{color:var(--text);font-size:12.5px;white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* -- Tira de categorias ---------------------------------------------------
   La pildora del articulo pasa a ser enlace cuando su categoria tiene pagina,
   asi que hereda .pill y solo anade el estado interactivo. Los chips llevan el
   recuento porque es el dato con el que un lector decide si un tema le da para
   un rato de lectura o es una pieza suelta. */
.cat-nav{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin:0 auto 40px;padding-top:4px}
.cat-nav-t{font-size:13px;font-weight:700;color:var(--ink);
  letter-spacing:.02em;margin-right:4px}
.cat-chip{display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  font-size:13px;font-weight:600;color:var(--text);background:var(--bg);
  text-decoration:none;transition:border-color .18s ease,color .18s ease}
.cat-chip span{font-size:12px;font-weight:600;color:var(--text);opacity:.65}
.cat-chip:hover{border-color:var(--accent);color:var(--ink)}
.cat-chip[aria-current="page"]{background:var(--accent-soft);
  border-color:transparent;color:var(--accent-d)}
.cat-chip[aria-current="page"] span{color:var(--accent-d);opacity:.75}
a.pill{text-decoration:none;transition:background-color .18s ease,color .18s ease}
a.pill:hover{background:var(--accent);color:#fff}

/* ── Pagina 404 ──────────────────────────────────────────────────────────
   El buscador corre entero en el navegador (ver _404.py). El input lleva
   font-size:16px a proposito: por debajo de eso Safari en iOS hace zoom al
   enfocarlo y deja la pagina descuadrada, que en una pagina de error es la
   segunda mala experiencia seguida. */
.err{padding-top:72px;padding-bottom:96px}
.err-num{font-size:clamp(64px,14vw,120px);line-height:1;font-weight:700;
  color:var(--accent-soft);margin:0 0 4px;letter-spacing:-.03em}
.err h1{margin:0 0 14px}
.err-intro{color:var(--text);max-width:60ch;margin:0 0 32px}
.err-buscar{margin:0 0 8px}
.err-buscar label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.err-buscar input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;
  padding:13px 16px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--bg);color:var(--ink);transition:border-color .18s ease}
.err-buscar input:focus{outline:none;border-color:var(--accent)}
.err-res{min-height:8px}
.err-lista{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.err-lista li{display:flex;align-items:baseline;gap:12px;
  padding:11px 2px;border-bottom:1px solid var(--line)}
.err-lista a{flex:1;min-width:0;font-weight:600;color:var(--ink);text-decoration:none}
.err-lista a:hover{color:var(--accent)}
.err-idi{flex-shrink:0;font-size:11px;font-weight:700;letter-spacing:.06em;
  color:var(--text);opacity:.7}
.err-nota{margin:14px 0 0;font-size:14.5px;color:var(--text)}
.err-ir{margin:34px 0 0}
.err-en{margin:18px 0 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--text)}
@media(max-width:600px){
  .err{padding-top:48px;padding-bottom:64px}
  .err-ir,.err-en{margin-top:26px}
}

/* Los tres casos con cifras abiertas, en /es/trabajo/. Lista sin viñeta: cada
   entrada es un titular enlazado y su porqué, que es lo que decide el clic. */
.sec-alt{background:var(--bg-2)}
.casos-abiertos{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:20px}
.casos-abiertos li{border-left:3px solid var(--accent);padding:2px 0 2px 18px}
.casos-abiertos a{font-size:18px;font-weight:650;color:var(--ink);text-decoration:none;
  line-height:1.35;display:inline-block}
.casos-abiertos a:hover{color:var(--accent)}
.casos-nota{margin:34px 0 0;padding-top:20px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--text);max-width:66ch}
.casos-nota a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.casos-abiertos p{margin:7px 0 0;color:var(--text);font-size:15px;max-width:62ch}

/* Graficos del cuerpo, en SVG en linea (ver pipeline/.../grafico.py). El SVG
   escala solo con viewBox, asi que no hace falta ningun escalon de movil: lo
   unico que hay que decirle es que no se salga, que es el fallo que _movil.mjs
   caza en cuanto alguien pone un width fijo. */
.post-cuerpo .grafico{margin:0 0 28px;max-width:100%}
.post-cuerpo .grafico svg{display:block;width:100%;height:auto;overflow:visible}
.post-cuerpo .grafico figcaption{margin-top:12px;font-size:14px;line-height:1.5;
  color:var(--text);border-left:3px solid var(--line);padding-left:14px}

/* Prueba de cohorte fija. La tabla de resultados reutiliza .tabla, que ya lleva
   el overflow-x que _movil.mjs exige por debajo de 400px. */
.ch-salida{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.ch-veredicto{font-size:18px;font-weight:650;line-height:1.4;margin:0 0 16px;
  padding-left:14px;border-left:3px solid var(--line)}
.ch-veredicto.ch-mal{border-left-color:var(--accent);color:var(--ink)}
.ch-veredicto.ch-bien{border-left-color:#2E7D52;color:var(--ink)}
.ch-cifras{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.ch-cifras li{font-size:15px;color:var(--text)}
.ch-cifras strong{color:var(--ink)}
.ch-nota{margin:0 0 18px;font-size:14.5px;color:var(--text);
  background:var(--bg-2);border-radius:10px;padding:12px 14px}
.ch-salida td.ch-mal{color:var(--accent-d);font-weight:600}
.ch-salida td.ch-bien{color:#2E7D52;font-weight:600}
.ch-salida p.ch-mal{color:var(--accent-d)}