/* 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 */

/* ---------- 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 ---------- */
.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)}

/* ---------- 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)}
.cat-grid{display:grid;grid-template-columns:repeat(4,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(4n){border-right:0}
.cat h3{font-size:18px}
.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)}
.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)}
  .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(4n){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. */
.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}

.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}
}