/* Alpaca Sourcing — hoja unica del sitio. Consume los tokens v3 de la marca.
   Estructura de navegacion inspirada en HubSpot (nav pegajosa con mega menu, hero con dos CTA,
   banda de prueba, planes, pasos, recursos, footer de columnas) y en el sitio de PSP.
   Reglas de marca que NO se negocian aca: radio 0, cero sombras, cero degradados, cero iconos
   genericos, separadores de 1px con --as-rule. Ver 05_as/config/branding/ai_design_signals.md */

/* TRAMPA MEDIDA EL 2026-08-10, no borrar este comentario sin leerla.
   La huella `?v=<hash>` solo sirve si la URL versionada se pide DESPUES de que el deploy termino.
   Ese dia se corrio la auditoria un minuto despues del push: el borde de Cloudflare recibio
   `as.css?v=173911fd` mientras todavia servia el build anterior y guardo el CSS VIEJO bajo la
   llave NUEVA, con `max-age=14400`. Comprobado: `?v=173911fd` devolvia 0 coincidencias de
   `hero-bg-photo`, `?zzz=1` y la URL pelada devolvian 12. O sea que la portada salia con el
   layout anterior y la foto nueva metida en la columna, exactamente el defecto que se acababa
   de arreglar. Como el token no puede purgar cache, la salida es cambiar el contenido para que
   cambie el hash y la URL sea uno nunca pedido. Regla: esperar a que produccion sirva el HTML
   nuevo ANTES de pedir cualquier asset versionado. */

/* ---------- tokens (copia sincronizada de config/branding/assets/tokens.css) ---------- */
:root{
  --as-brand:#3E2A18; --as-loam:#16150F; --as-brown-700:#6B4526; --as-brown-500:#8C6239;
  --as-grass:#556B2F; --as-grass-400:#7FA33C;
  --as-slate:#2F5D62; --as-amber:#C97A12; --as-alert:#A33A28;
  --as-stone:#A9AC9E; --as-rule:#7E8475; --as-paper:#E4E7DC; --as-paper-2:#D6DACB;
  --as-seq-1:#CEDACC; --as-seq-2:#9AC193; --as-seq-3:#59AA4C; --as-seq-4:#3B8A2F; --as-seq-5:#256B1B; --as-seq-6:#1A4C12;
  --as-cat-1:#556B2F; --as-cat-2:#2F5D62; --as-cat-3:#C97A12; --as-cat-4:#3E2A18; --as-cat-5:#A9AC9E;
  --as-bg:var(--as-paper); --as-bg-inverse:var(--as-loam);
  --as-text:var(--as-loam); --as-text-muted:var(--as-brown-700);
  --as-text-inverse:var(--as-paper); --as-text-inverse-muted:var(--as-stone);
  --as-accent:var(--as-grass); --as-accent-inverse:var(--as-grass-400);
  --as-font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --as-font-body:"Source Serif 4","Source Serif Pro",Georgia,serif;
  --as-font-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --as-s1:8px; --as-s2:16px; --as-s3:24px; --as-s4:40px; --as-s5:64px; --as-s6:104px;
  --as-rule-w:1px; --as-radius:0; --as-radius-ctrl:2px;
  --as-maxw:1180px;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--as-bg);color:var(--as-text);font-family:var(--as-font-body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--as-accent);text-underline-offset:3px}
h1,h2,h3,h4,.display{font-family:var(--as-font-display);color:var(--as-brand);margin:0;letter-spacing:-.015em}
h1{font-size:clamp(38px,5.4vw,64px);line-height:1.04;font-weight:600}
h2{font-size:clamp(26px,3.2vw,40px);line-height:1.1;font-weight:600}
h3{font-size:20px;font-weight:600}
p{margin:0 0 var(--as-s2);max-width:68ch}
.wrap{max-width:var(--as-maxw);margin:0 auto;padding:0 24px}
.mono{font-family:var(--as-font-mono);font-size:13px}
.muted{color:var(--as-text-muted)}
.eyebrow{font-family:var(--as-font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--as-text-muted)}
section{padding:var(--as-s6) 0;border-top:var(--as-rule-w) solid var(--as-rule)}
.lede{font-size:20px;max-width:56ch}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:80;background:var(--as-paper);border-bottom:var(--as-rule-w) solid var(--as-rule)}
.nav-in{max-width:var(--as-maxw);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:var(--as-s4)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{width:150px;height:auto;display:block}  /* 150 > el minimo medido de 130 px del lockup */
.nav-links{display:flex;align-items:center;gap:var(--as-s3);margin-left:auto}
.nav-links a{font-family:var(--as-font-display);font-size:15px;font-weight:500;color:var(--as-brand);text-decoration:none}
.nav-links a:hover{color:var(--as-grass);text-decoration:underline}
/* el boton del nav es un boton, no un enlace de nav: .nav-links a (0,1,1) le ganaba en
   especificidad a .btn-primary (0,1,0) y el texto salia marron sobre marron, invisible */
.nav-links a.btn-primary{color:var(--as-paper)}
.nav-links a.btn-primary:hover{color:var(--as-paper);text-decoration:none}
.nav-links a.btn-ghost{color:var(--as-brand)}
.has-mega{position:relative}
.mega{position:absolute;top:calc(100% + 12px);left:-16px;min-width:340px;background:var(--as-paper);
  border:var(--as-rule-w) solid var(--as-loam);padding:var(--as-s2);opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible}
.mega a{display:block;padding:8px 10px;font-family:var(--as-font-body);font-size:15px}
.mega a:hover{background:var(--as-paper-2);text-decoration:none}
.mega .m-h{font-family:var(--as-font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--as-text-muted);padding:0 10px 6px}
.btn{display:inline-block;font-family:var(--as-font-display);font-weight:600;font-size:15px;
  padding:11px 20px;border:2px solid var(--as-brand);border-radius:var(--as-radius-ctrl);text-decoration:none;cursor:pointer}
.btn-primary{background:var(--as-brand);color:var(--as-paper)}
.btn-primary:hover{background:var(--as-loam);border-color:var(--as-loam)}
.btn-ghost{background:transparent;color:var(--as-brand)}
.btn-ghost:hover{background:var(--as-paper-2)}
.btn-lg{font-size:17px;padding:14px 26px}
.navtoggle{display:none}

/* ---------- hero ----------
   La foto va de borde a borde y el texto encima, que es como se ilustran TODAS las casas de este
   mercado (Michell, Inca Tops, Incalpaca, Kuna, Art Atlas) y tambien la referencia que pidio el
   director (HubSpot). Medido el 2026-08-10, cinco de cinco: cero usan foto chica en columna.
   El velo es un degradado horizontal, no una capa plana: el texto necesita 4.5:1 a la izquierda
   y la foto necesita respirar a la derecha.
   EXCEPCION DECLARADA a la regla de marca "cero degradados" de la cabecera de esta hoja: esa regla
   prohibe el degradado DECORATIVO (botones, tarjetas, fondos de relleno). Un velo sobre foto no es
   decoracion, es el mecanismo de contraste del texto, y sin el no hay 4.5:1 posible. Fechado
   2026-08-10 en config/branding/visual_identity.md, como manda el gate. */
.hero{padding:var(--as-s6) 0 var(--as-s5);border-top:0}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--as-s5);align-items:center}
.hero .cta-row{display:flex;gap:var(--as-s2);flex-wrap:wrap;margin-top:var(--as-s3)}
.hero .fineprint{font-family:var(--as-font-mono);font-size:14px;color:var(--as-text-muted);margin-top:var(--as-s2)}

/* La variante de PORTADA, y solo la portada: foto de fondo a sangre. Las paginas interiores
   siguen con el hero claro de arriba, que es lo correcto: una sola portada manda. */
.hero-bg-photo{position:relative;isolation:isolate;overflow:hidden;background:var(--as-loam);
  padding:calc(var(--as-s6) + 16px) 0}
.hero-bg-photo .hero-bg{position:absolute;inset:0;z-index:-2;display:block}
.hero-bg-photo .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;display:block}
.hero-bg-photo::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(22,21,15,.92) 0%,rgba(22,21,15,.84) 36%,
             rgba(22,21,15,.48) 64%,rgba(22,21,15,.16) 100%)}
.hero-bg-photo .hero-grid{grid-template-columns:minmax(0,660px)}
.hero-bg-photo h1,.hero-bg-photo .lede{color:var(--as-paper)}
.hero-bg-photo .eyebrow,.hero-bg-photo .fineprint{color:var(--as-stone)}
/* sobre la foto el boton fantasma no puede llevar tinta marron: se invierte */
.hero-bg-photo .btn-ghost{color:var(--as-paper);border-color:var(--as-paper)}
.hero-bg-photo .btn-ghost:hover{background:rgba(228,231,220,.14)}
.hero-bg-photo .btn-primary{border-color:var(--as-paper)}

/* Grafico de barras de la seccion "donde esta el valor". Va al 80% del ancho de su columna
   (director 2026-08-10): a tamano completo se lee en dos pasadas en vez de una. Como el viewBox
   no cambia, el texto de dentro se encoge en la misma proporcion que las barras, que es lo que
   mantiene el dibujo coherente. En una sola columna vuelve al 100%, porque ahi el 80% de 390 px
   dejaria los rotulos por debajo de 8 px. */
/* sin `max-width`: el ancho lo pone la columna (el `wrap` ya topa en 1180), y un tope fijo de
   420 px lo encogia un 33% en vez del 20% pedido */
.grafico-escala{width:80%;height:auto;display:block}
@media(max-width:960px){ .grafico-escala{width:100%;max-width:520px} }

/* ---------- banda de dato ---------- */
.band{background:var(--as-bg-inverse);color:var(--as-text-inverse);border-top:0}
.band h2,.band h3{color:var(--as-text-inverse)}
.band .muted{color:var(--as-text-inverse-muted)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--as-s4)}
.stat .n{font-family:var(--as-font-display);font-size:clamp(28px,3.4vw,44px);font-weight:600;color:var(--as-paper);line-height:1}
.stat .l{font-family:var(--as-font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--as-stone);margin-top:6px}

/* ---------- bloques ---------- */
.split{display:grid;grid-template-columns:.42fr .58fr;gap:var(--as-s5);align-items:start}
.split-wide{display:grid;grid-template-columns:1.45fr .55fr;gap:var(--as-s5);align-items:start}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--as-s4)}
/* TRES por fila desde el 2026-08-10, no cuatro. Al partir "Pelts, gifts and decor" en dos, las
   categorias pasaron de 8 a 9: con cuatro columnas la ultima fila quedaba con una sola tarjeta y
   tres huecos, que se lee como error de maqueta. Con tres columnas son 3 filas exactas, las
   tarjetas quedan mas anchas y el nombre de cada categoria entra en una sola linea. */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--as-rule-w) solid var(--as-rule)}
.cat{border-bottom:var(--as-rule-w) solid var(--as-rule);border-right:var(--as-rule-w) solid var(--as-rule);padding:var(--as-s3)}
.cat:nth-child(3n){border-right:0}
.cat h3{font-size:18px}
/* Iconos de categoria: monolinea propia, nunca de libreria. El trazo no se redondea porque la
   marca no tiene radio, y el color sale del texto para que un cambio de token los arrastre. */
/* el sprite se esconde con tamano cero, NO con display:none: display:none rompe el <use> en
   varios motores y los ocho iconos desaparecen sin error en consola */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.cat-ico{display:block;width:38px;height:38px;margin:0 0 14px;color:var(--as-brown-700);
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter}
.cat .hs{font-family:var(--as-font-mono);font-size:11px;color:var(--as-text-muted);margin-top:6px;line-height:1.5}
/* La partida salio de la web y vive en `05_as/config/categorias_as.yaml`. En su lugar va lo que
   la categoria CONTIENE, en palabras del comprador: serif de cuerpo, no mono de dato. */
.cat .cat-what{font-size:15px;color:var(--as-text-muted);margin:6px 0 12px;line-height:1.5}
.cat .fob{font-family:var(--as-font-display);font-weight:600;font-size:20px;margin-top:10px;color:var(--as-slate)}

/* ---------- pasos ---------- */
.steps{counter-reset:s;display:grid;gap:0;border-top:var(--as-rule-w) solid var(--as-rule)}
.step{display:grid;grid-template-columns:70px 1fr;gap:var(--as-s3);padding:var(--as-s3) 0;border-bottom:var(--as-rule-w) solid var(--as-rule)}
.step .k{font-family:var(--as-font-display);font-size:30px;font-weight:600;color:var(--as-stone)}

/* ---------- planes ---------- */
.plans{display:grid;grid-template-columns:1fr 1.18fr 1fr;border:var(--as-rule-w) solid var(--as-loam)}
.plan{padding:var(--as-s4) var(--as-s3);border-right:var(--as-rule-w) solid var(--as-loam);display:flex;flex-direction:column}
.plan:last-child{border-right:0}
.plan--feature{background:var(--as-paper-2)}
.plan .p-name{font-family:var(--as-font-display);font-size:22px;font-weight:600;color:var(--as-brand)}
/* "Starts at" es un matiz, no el dato: va chico y encima, y la cifra manda sola.
   El margen superior se muda a esta linea para que la altura de la tarjeta no cambie. */
.plan .p-lead{font-size:14px;color:var(--as-text-muted);line-height:1.2;margin:var(--as-s2) 0 2px}
.plan .p-lead + .p-price{margin-top:0}
.plan .p-price{font-family:var(--as-font-display);font-size:40px;font-weight:600;line-height:1;margin:var(--as-s2) 0 4px}
.plan .p-unit{font-family:var(--as-font-mono);font-size:12px;color:var(--as-text-muted);text-transform:uppercase;letter-spacing:.08em}
.plan ul{list-style:none;padding:0;margin:var(--as-s3) 0}
.plan li{padding:8px 0 8px 20px;position:relative;border-bottom:var(--as-rule-w) solid var(--as-rule);font-size:15px}
.plan li:before{content:"";position:absolute;left:0;top:16px;width:9px;height:2px;background:var(--as-grass)}
.plan .p-cta{margin-top:auto;padding-top:var(--as-s3)}
.plan .p-cta .btn{width:100%;text-align:center}

/* ---------- tabla ---------- */
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:10px 12px;border-bottom:var(--as-rule-w) solid var(--as-rule);vertical-align:top}
th{font-family:var(--as-font-display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--as-text-muted)}
td.n{font-family:var(--as-font-mono);text-align:right}

/* ---------- insights ---------- */
.icards{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:0;border-top:var(--as-rule-w) solid var(--as-rule)}
.icard{padding:var(--as-s3);border-right:var(--as-rule-w) solid var(--as-rule);border-bottom:var(--as-rule-w) solid var(--as-rule)}
.icard:last-child{border-right:0}
.icard h3{font-size:19px;margin-bottom:8px}
.icard .meta{font-family:var(--as-font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--as-text-muted)}
.soon{background:var(--as-paper-2);border:var(--as-rule-w) solid var(--as-rule);padding:var(--as-s4)}

/* ---------- formularios ---------- */
form.as-form{display:grid;gap:var(--as-s2);max-width:520px}
.as-form label{font-family:var(--as-font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--as-text-muted)}
.as-form input,.as-form select,.as-form textarea{
  width:100%;font-family:var(--as-font-body);font-size:16px;padding:11px 12px;
  border:var(--as-rule-w) solid var(--as-loam);border-radius:var(--as-radius-ctrl);background:#fff;color:var(--as-loam)}
.as-form textarea{min-height:130px;resize:vertical}
.as-form .hp{position:absolute;left:-9999px}
.formnote{font-family:var(--as-font-mono);font-size:12px;color:var(--as-text-muted)}
.formmsg{padding:12px;border:var(--as-rule-w) solid var(--as-grass);background:#fff;display:none}
.formmsg.err{border-color:var(--as-alert)}

/* ---------- footer ---------- */
footer.site{background:var(--as-bg-inverse);color:var(--as-text-inverse);padding:var(--as-s5) 0 var(--as-s4)}
footer.site a{color:var(--as-paper);text-decoration:none}
footer.site a:hover{color:var(--as-grass-400);text-decoration:underline}
/* el pie es fondo oscuro, asi que .muted tiene que invertirse igual que en .band. Sin esta
   linea el gris marron del modo claro caia sobre el loam a contraste 2.18, muy por debajo del
   4.5 que exige el cuerpo de texto. Lo encontro la capa medida de la auditoria visual. */
footer.site .muted{color:var(--as-text-inverse-muted)}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--as-s4)}
.fcols h2{font-family:var(--as-font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--as-stone);margin:0 0 12px}
.fcols ul{list-style:none;padding:0;margin:0}
.fcols li{margin-bottom:8px;font-size:15px}
.fbottom{margin-top:var(--as-s4);padding-top:var(--as-s3);border-top:var(--as-rule-w) solid var(--as-brown-700);
  display:flex;justify-content:space-between;gap:var(--as-s2);flex-wrap:wrap;
  font-family:var(--as-font-mono);font-size:12px;color:var(--as-stone)}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .hero-grid,.split,.split-wide,.cols-2{grid-template-columns:1fr;gap:var(--as-s3)}
  /* en pantalla angosta el degradado horizontal deja el texto sobre el cielo claro: se voltea
     a vertical, que es donde cae la columna unica */
  .hero-bg-photo{padding:var(--as-s5) 0}
  /* en columna unica la caja se vuelve casi cuadrada y `cover` recorta a lo ancho: con el encuadre
     de escritorio (50% 58%) queda solo el cuello del animal. Se sube y se corre a la derecha para
     que la cabeza siga en cuadro. */
  .hero-bg-photo .hero-bg img{object-position:64% 26%}
  .hero-bg-photo::after{background:linear-gradient(180deg,rgba(22,21,15,.90) 0%,rgba(22,21,15,.80) 58%,rgba(22,21,15,.42) 100%)}
  .plans{grid-template-columns:1fr}
  .plan{border-right:0;border-bottom:var(--as-rule-w) solid var(--as-loam)}
  .cat-grid{grid-template-columns:1fr 1fr}
  .cat:nth-child(3n){border-right:var(--as-rule-w) solid var(--as-rule)}
  .cat:nth-child(2n){border-right:0}
  .stats{grid-template-columns:1fr 1fr;gap:var(--as-s3)}
  .icards{grid-template-columns:1fr}
  .icard{border-right:0}
  .fcols{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--as-paper);
    border-bottom:var(--as-rule-w) solid var(--as-loam);flex-direction:column;align-items:flex-start;gap:0;padding:var(--as-s2) 24px}
  .nav-links.open a{padding:10px 0;width:100%}
  .navtoggle{display:inline-flex;align-items:center;margin-left:auto;font-family:var(--as-font-mono);
    font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:none;
    border:var(--as-rule-w) solid var(--as-brand);
    /* 44 px es el minimo tactil del manual, eje 8. Con padding 8px el boton quedaba en 30 px. */
    min-height:44px;padding:0 14px;cursor:pointer;color:var(--as-brand)}
  .btn,button[type=submit]{min-height:44px}
  .nav-links.open a{min-height:44px;display:flex;align-items:center}
  .mega{position:static;opacity:1;visibility:visible;border:0;padding:0 0 0 12px;min-width:0}
}
/* ============================================================================
   FOTOGRAFIA
   Una sola tecnica en todo el sitio: filete de 1 px del mismo gris de las reglas,
   sin sombra y sin radio, porque el resto del sistema no usa ninguna de las dos.
   El manual de revision visual prohibe mezclar tecnicas de profundidad.
   Las fotos van SIEMPRE dentro de una proporcion fija (3x2) con object-fit, para
   que el hueco no salte mientras carga y el diagrama no se mueva de sitio.
   ============================================================================ */
/* Una tabla ancha hace scroll DENTRO de su caja. El manual, eje 8: la pagina nunca se mueve
   de lado. Medido el 2026-08-09: la tabla de 8 categorias empujaba /pricing/ a 431 px en una
   pantalla de 390 y arrastraba con ella los parrafos vecinos. */
/* La linea de "para quien es" va ARRIBA del nombre del plan. Se le fija un alto minimo para que
   los tres nombres queden alineados aunque el texto ocupe una o dos lineas: si no, las tarjetas
   se ven descuadradas y eso es lo primero que delata una plantilla. */
.p-for{font-size:14px;line-height:1.45;color:var(--as-text-muted);margin:0 0 14px;min-height:62px}
.paquetes{border:0;padding:0;margin:18px 0 0}
.paquetes legend{font-family:var(--as-font-mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--as-text-muted);padding:0;margin-bottom:8px}
.paquetes label{display:flex;align-items:center;gap:8px;padding:9px 0;font-size:15px;cursor:pointer}
.paquetes input{width:16px;height:16px;accent-color:var(--as-brand)}

.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tabla-scroll table{min-width:560px}
/* Un hijo de rejilla o de flex vale `min-width:auto` por defecto, o sea que se ESTIRA hasta
   el ancho de su contenido y el `overflow-x` del contenedor no llega a actuar. Sin esta
   linea, envolver la tabla empeoraba el desborde en vez de arreglarlo: de 431 px paso a 584.
   Es la trampa clasica de CSS grid, y solo se ve midiendo la pagina renderizada. */
.split>*,.split-wide>*,.cols-2>*,.hero-grid>*,.fcols>*,.cadena>*,.fotos-2>*,.plan,.icard{min-width:0}

/* `.hero-foto` (foto chica en la columna derecha del hero) se retiro el 2026-08-10: el hero pasó
   a foto de fondo a ancho completo. Motivo y evidencia en config/branding/web_architecture.md. */

.foto{position:relative;display:block;overflow:hidden;background:var(--as-paper-2);
  border:var(--as-rule-w) solid var(--as-rule);aspect-ratio:3/2}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto figcaption{font-family:var(--as-font-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--as-text-muted);padding:8px 0 0}
figure.foto-fig{margin:0}

/* la cadena: cuatro pasos, misma altura, misma proporcion, en el orden en que
   el material sale del pais */
.cadena{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--as-s2)}
.cadena .paso .k{font-family:var(--as-font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--as-text-muted);padding-top:10px}
.cadena .paso h3{font-size:16px;margin:4px 0 0}
.cadena .paso p{font-size:15px;color:var(--as-text-muted);margin:4px 0 0}

/* banda de dos fotos, para las paginas de texto */
.fotos-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--as-s3)}

@media(max-width:900px){
  .cadena{grid-template-columns:1fr 1fr}
  .fotos-2{grid-template-columns:1fr}
}
@media(max-width:560px){
  .cadena{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ============================================================================
   ARTICULO DE INSIGHTS  (alta 2026-08-10, lote de arranque de 7 piezas)
   Por que vive ACA y no dentro de la pagina: la regla dura de marcado del sistema v3
   (`build_v3_page.py`) dice que una pieza se escribe con LAS CLASES QUE EL SITIO YA USA.
   Meter un `<style>` propio en cada articulo es lo que rompio PSP el 2026-08-09: el CSS del
   sitio apunta a las clases del sitio, asi que un marcado inventado hereda solo lo declarado
   sobre etiquetas peladas. AS no tenia paginas de texto largo, asi que la capa se agrega aca,
   una vez, con los tokens de la marca. Reglas de la casa que se respetan: radio 0, cero
   sombras, cero degradados, separadores de 1 px con --as-rule.
   ============================================================================ */
.art-head{padding:var(--as-s5) 0 var(--as-s4);border-top:0}
.crumb{font-family:var(--as-font-mono);font-size:12px;letter-spacing:.06em;
  color:var(--as-text-muted);margin:0 0 var(--as-s2)}
.crumb a{color:var(--as-text-muted)}
.crumb .sep{padding:0 8px;color:var(--as-rule)}
.art-title{font-size:clamp(30px,4.2vw,50px);line-height:1.08;max-width:20ch}
.art-head .lede{margin-top:var(--as-s2)}
.byline{font-family:var(--as-font-mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--as-text-muted);margin:var(--as-s3) 0 0}
.byline .dot{padding:0 8px;color:var(--as-rule)}
/* Columna de lectura. El cuerpo del sitio corre a 68ch por la regla de `p`; un articulo
   largo necesita ademas que titulos, tablas y graficos compartan ese ancho, o el texto
   queda flotando a la izquierda de una pagina de 1180. */
.read{max-width:74ch}
.read h2{font-size:clamp(23px,2.6vw,31px);margin:var(--as-s4) 0 var(--as-s2)}
.read h3{margin:var(--as-s3) 0 var(--as-s1)}
.read p{max-width:none}
.art-body{padding:0 0 var(--as-s5)}
/* La foto de la pieza va a ancho de columna bajo el titular, sin filete arriba: es parte de
   la cabecera, no una seccion nueva. `.foto` ya fija la proporcion 3x2 y el filete de 1 px. */
.art-foto{padding:0 0 var(--as-s4);border-top:0}

/* Lo que el lector se lleva si no lee nada mas. Se lee como una ficha, no como un recuadro
   de aviso: filete arriba y abajo, sin fondo, que es como el sitio separa todo lo demas. */
.takeaways{border-top:var(--as-rule-w) solid var(--as-rule);
  border-bottom:var(--as-rule-w) solid var(--as-rule);padding:var(--as-s3) 0;margin:0 0 var(--as-s4)}
.takeaways h2{font-size:13px;font-family:var(--as-font-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--as-text-muted);margin:0 0 var(--as-s2)}
.takeaways ul{margin:0;padding:0;list-style:none}
.takeaways li{padding:0 0 0 var(--as-s3);margin:0 0 12px;position:relative;font-size:16px}
.takeaways li:last-child{margin-bottom:0}
.takeaways li:before{content:"";position:absolute;left:0;top:11px;width:12px;height:1px;
  background:var(--as-accent)}

.v3-toc{border-bottom:var(--as-rule-w) solid var(--as-rule);padding:0 0 var(--as-s3);
  margin:0 0 var(--as-s4)}
.v3-toc .toc-h{font-family:var(--as-font-mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--as-text-muted);margin-bottom:12px}
.v3-toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:8px var(--as-s3)}
.v3-toc ol li a{color:var(--as-brand);text-decoration:none;
  border-bottom:1px solid var(--as-paper-2);font-size:15px}
.v3-toc ol li a:hover{border-bottom-color:var(--as-accent)}
@media(max-width:720px){.v3-toc ol{grid-template-columns:1fr}}

/* La tabla es lo que una IA cita y lo que un lector escanea. Hereda `table` del sitio y solo
   agrega el scroll propio, con la misma trampa de `min-width:0` ya documentada arriba. */
.v3-table{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
  margin:var(--as-s3) 0 var(--as-s4)}
.v3-table table{min-width:480px}

/* Graficos en SVG en linea, no PNG: pesan menos, no se pixelan y su texto lo lee un buscador. */
.chartblock{margin:var(--as-s4) 0}
.chartblock h3{font-size:18px;line-height:1.35;margin:0 0 12px}
.chartcard{border:var(--as-rule-w) solid var(--as-rule);padding:var(--as-s3) var(--as-s2)}
.chartcard svg{width:100%;height:auto;display:block}
.chart-cap{font-family:var(--as-font-mono);font-size:12px;color:var(--as-text-muted);
  margin:10px 0 0}
.svg-axis{stroke:var(--as-rule)}
.svg-grid{stroke:var(--as-rule);opacity:.5}
.svg-label{fill:var(--as-text-muted);font-family:var(--as-font-mono)}
.svg-value{font-family:var(--as-font-display);font-weight:600}

.faq{border-top:var(--as-rule-w) solid var(--as-rule);padding-top:var(--as-s4);
  margin-top:var(--as-s4)}
.faq-item{padding:0 0 var(--as-s3);margin:0 0 var(--as-s3);
  border-bottom:var(--as-rule-w) solid var(--as-paper-2)}
.faq-item:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.faq-item h3{font-size:18px;margin:0 0 8px}
.faq-item p{margin:0;color:var(--as-text-muted)}

/* Tarjeta del hub y de la portada: fecha de publicacion bajo el titulo. `.meta` ya existe y
   la usaban las tarjetas de "In preparation"; `.idate` es la version con fecha real. */
.icard .idate{font-family:var(--as-font-mono);font-size:12px;letter-spacing:.06em;
  color:var(--as-text-muted);margin:8px 0 0}
.icard h3 a{color:var(--as-brand);text-decoration:none;
  border-bottom:1px solid var(--as-paper-2)}
.icard h3 a:hover{border-bottom-color:var(--as-accent)}