/* ============================================================
   InversaLabs · sitio corporativo
   Hereda Brandbook v1.0 (assets/marca/inversalabs-tokens.css) y la
   base de il-funnel-v2. Un solo mundo visual: tinta y rojo señal.
   Cambiar un token = cambiar el tema completo.
   ============================================================ */
:root{
  --bg:#0B0B0C;
  --bg-card:#141416;
  --bg-raise:#1E1E21;
  --bone:#F5F3F0;
  --bone-mute:#A8A5A0;
  --accent:#E5342A;
  --accent-solid:#C41E14;
  --accent-velo:rgba(229,52,42,.10);
  --accent-ink:#ffffff;
  --line:#2A2A2E;
  --line-soft:#1C1C20;
  --ok:#2E9E6B;
  --alerta:#D98324;

  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  --s1:8px; --s2:16px; --s3:24px; --s4:48px; --s5:96px; --s6:144px;
  --r0:0px; --r1:4px; --r2:8px;
  --w-content:1180px; --w-text:68ch; --w-narrow:52rem;
  --trans:160ms cubic-bezier(.2,.6,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--bone); font-family:var(--sans);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:var(--w-content); margin:0 auto; padding:0 var(--s3)}
@media(min-width:900px){.wrap{padding:0 var(--s4)}}
.narrow{max-width:var(--w-narrow)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--s3); top:var(--s2); z-index:99; background:var(--accent-solid);
  color:var(--accent-ink); padding:10px 16px; border-radius:var(--r1)}

/* ---------- tipografía ---------- */
h1,h2,h3,.display{font-family:var(--serif); font-weight:400; letter-spacing:-.02em; text-wrap:balance}
h1,.display{font-size:clamp(34px,6vw,64px); line-height:1.08}
h2{font-size:clamp(26px,3.6vw,40px); line-height:1.15}
h3{font-size:clamp(21px,2.2vw,27px); line-height:1.22; letter-spacing:-.01em}
h4{font-family:var(--sans); font-size:1rem; font-weight:600; letter-spacing:.01em}
p{margin-bottom:var(--s2); max-width:var(--w-text)}
p:last-child{margin-bottom:0}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
strong{font-weight:600}
em{font-style:italic}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; color:var(--bone-mute)}
.eyebrow{font-weight:600; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin-bottom:var(--s2)}
.eyebrow-mute{color:var(--bone-mute)}
.lead{font-size:clamp(19px,2vw,23px); line-height:1.5; color:var(--bone)}
.mute{color:var(--bone-mute)}
.small{font-size:.9375rem}
.micro{font-size:.8125rem; line-height:1.5; color:var(--bone-mute)}
.metric{font-family:var(--serif); font-weight:400; font-size:clamp(30px,4.2vw,48px);
  line-height:1.05; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.metric--accent{color:var(--accent)}

/* ---------- cabecera ---------- */
.topbar{border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;
  background:rgba(11,11,12,.92); backdrop-filter:blur(8px)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  min-height:64px; flex-wrap:wrap}
.brand-mark{font-family:var(--serif); font-size:1.35rem; letter-spacing:-.01em;
  text-decoration:none; color:var(--bone); white-space:nowrap}
.brand-mark:hover{color:var(--accent)}
.nav{display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center}
.nav a{font-size:.9375rem; text-decoration:none; color:var(--bone-mute); transition:color var(--trans)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--bone)}
.nav a[aria-current="page"]{box-shadow:0 2px 0 var(--accent)}
@media(max-width:780px){
  .topbar{position:static}
  .topbar .wrap{padding-top:var(--s2); padding-bottom:var(--s2)}
  .nav{gap:var(--s2) var(--s3); font-size:.875rem}
}

/* ---------- secciones ---------- */
.sec{padding:var(--s5) 0}
.sec--tight{padding:var(--s4) 0}
.sec + .sec{border-top:1px solid var(--line-soft)}
.sec-head{margin-bottom:var(--s4); max-width:var(--w-text)}
.sec-head h2{margin-bottom:var(--s2)}
.hero{padding:var(--s5) 0 var(--s4)}
.hero h1{margin-bottom:var(--s3)}
.hero .lead{max-width:60ch}
@media(min-width:900px){.hero{padding:var(--s6) 0 var(--s5)}}

/* ---------- botones ---------- */
.btn-primary{display:inline-block; background:var(--accent-solid); color:var(--accent-ink);
  font-weight:600; font-size:.95rem; text-decoration:none; padding:14px 28px;
  border-radius:var(--r1); border:0; cursor:pointer; transition:background var(--trans)}
.btn-primary:hover{background:var(--accent)}
.btn-ghost{display:inline-block; color:var(--bone); font-weight:500; font-size:.95rem;
  text-decoration:none; padding:14px 0; border-bottom:1px solid var(--line);
  transition:border-color var(--trans),color var(--trans)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.cta-bloque{border-top:1px solid var(--line); padding:var(--s5) 0}
.cta-bloque h2{margin-bottom:var(--s3); max-width:22ch}
.cta-fila{display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; margin-top:var(--s3)}

/* ---------- rejillas ---------- */
.grid{display:grid; gap:var(--s3)}
@media(min-width:700px){.grid--2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r1);
  padding:var(--s3); display:flex; flex-direction:column; gap:var(--s1)}
.card p{max-width:none}
a.card{text-decoration:none; transition:border-color var(--trans),background var(--trans)}
a.card:hover{border-color:var(--accent); background:var(--bg-raise)}
.card-tag{font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-mute); font-weight:600}
.card h3{margin-bottom:var(--s1)}

/* ---------- cifras ---------- */
.cifras{display:grid; gap:var(--s3); grid-template-columns:1fr}
@media(min-width:620px){.cifras{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cifras--4{grid-template-columns:repeat(4,1fr)}}
.cifra{border-top:1px solid var(--line); padding-top:var(--s2)}
.cifra .metric{margin-bottom:var(--s1)}
.cifra p{font-size:.9375rem; color:var(--bone-mute); max-width:34ch}

/* ---------- citas ---------- */
blockquote{border-left:3px solid var(--accent); padding-left:var(--s3); margin:var(--s3) 0;
  max-width:var(--w-text)}
blockquote p{font-family:var(--serif); font-size:clamp(20px,2.4vw,27px); line-height:1.3;
  margin-bottom:var(--s1)}
blockquote cite{font-style:normal; font-size:.8125rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bone-mute)}

/* ---------- listas ---------- */
ul.lista,ol.lista{max-width:var(--w-text); margin-bottom:var(--s2); padding-left:0; list-style:none}
ul.lista li,ol.lista li{position:relative; padding-left:var(--s3); margin-bottom:var(--s2)}
ul.lista li::before{content:"—"; position:absolute; left:0; color:var(--accent)}
ol.lista{counter-reset:l}
ol.lista li{counter-increment:l}
ol.lista li::before{content:counter(l); position:absolute; left:0; color:var(--accent);
  font-size:.8125rem; font-weight:600; top:.35em}
.lista--si li::before{content:"+"; color:var(--ok); font-weight:700}
.lista--no li::before{content:"×"; color:var(--accent); font-weight:700}

/* ---------- tablas de datos ---------- */
.tabla-cont{overflow-x:auto; margin:var(--s3) 0; border-top:1px solid var(--line)}
table{width:100%; border-collapse:collapse; font-size:.9375rem}
th{text-align:left; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bone-mute); font-weight:600; padding:var(--s2) var(--s2) var(--s1) 0;
  border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:14px var(--s2) 14px 0; border-bottom:1px solid var(--line-soft); vertical-align:top}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right; font-variant-numeric:tabular-nums; padding-right:0}
td.dato{font-variant-numeric:tabular-nums; color:var(--bone); font-weight:500; white-space:nowrap}
td.dato--gana{color:var(--ok)}
td.dato--pierde{color:var(--accent)}

/* ---------- avisos ---------- */
.aviso{border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--accent-velo);
  padding:var(--s3); border-radius:var(--r1); margin:var(--s3) 0; max-width:var(--w-text)}
.aviso p{max-width:none}
.aviso--neutro{border-left-color:var(--bone-mute); background:var(--bg-card)}
.fuente{font-size:.8125rem; color:var(--bone-mute); border-top:1px solid var(--line);
  padding-top:var(--s2); margin-top:var(--s3); max-width:var(--w-text)}

/* ---------- artículo largo ---------- */
.prosa{max-width:var(--w-text)}
.prosa h2{margin:var(--s4) 0 var(--s2)}
.prosa h3{margin:var(--s3) 0 var(--s1)}
.prosa > p + p{margin-top:0}

/* ---------- índice de cajas ---------- */
.cajas-lista{list-style:none; border-top:1px solid var(--line)}
.cajas-lista li{border-bottom:1px solid var(--line)}
.cajas-lista a{display:grid; grid-template-columns:2.5rem 1fr; gap:var(--s2); align-items:baseline;
  padding:var(--s3) 0; text-decoration:none; transition:color var(--trans)}
@media(min-width:760px){.cajas-lista a{grid-template-columns:2.5rem 14rem 1fr}}
.cajas-lista a:hover{color:var(--accent)}
.cajas-lista .n{font-size:.8125rem; color:var(--accent); font-weight:600}
.cajas-lista .t{font-family:var(--serif); font-size:1.4rem; letter-spacing:-.01em}
.cajas-lista .q{color:var(--bone-mute); font-size:.9375rem}

/* ---------- navegación entre cajas ---------- */
.paso-nav{display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:var(--s3); margin-top:var(--s4)}
.paso-nav a{text-decoration:none; font-size:.9375rem; color:var(--bone-mute)}
.paso-nav a:hover{color:var(--accent)}
.paso-nav .lbl{display:block; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px}

/* ---------- pie ---------- */
.pie{border-top:1px solid var(--line); padding:var(--s4) 0 var(--s3); margin-top:var(--s5);
  font-size:.9375rem; color:var(--bone-mute)}
.pie-grid{display:grid; gap:var(--s4); grid-template-columns:1fr}
@media(min-width:760px){.pie-grid{grid-template-columns:1.4fr 1fr 1fr}}
.pie h4{margin-bottom:var(--s2); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone-mute)}
/* El nombre de marca NUNCA va en mayúsculas (Brandbook §08): se escribe InversaLabs,
   una sola palabra, L mayúscula interna. Nunca «INVERSALABS» ni «Inversa Labs». */
.pie h4.marca{text-transform:none; letter-spacing:-.01em; font-family:var(--serif);
  font-weight:400; font-size:1.35rem; color:var(--bone)}
.pie ul{list-style:none}
.pie li{margin-bottom:var(--s1)}
.pie a{text-decoration:none; transition:color var(--trans)}
.pie a:hover{color:var(--accent)}
.pie-legal{border-top:1px solid var(--line-soft); margin-top:var(--s4); padding-top:var(--s3);
  display:flex; justify-content:space-between; gap:var(--s2); flex-wrap:wrap; font-size:.8125rem}

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

/* ============================================================
   ACENTOS — el sistema usa los tres colores de la marca.
   El blanco no es "ausencia de fondo": es el tercer color, y
   se usa como fondo de sección completa para dar ritmo.
   Sobre papel el rojo cambia a --accent-ink-red (6.2:1); el
   #E5342A sólo alcanza 3.6:1 sobre claro y no se usa en texto.
   ============================================================ */
:root{
  --papel:#FAF8F5;
  --arena:#E8E3DC;
  --tinta-txt:#0B0B0C;
  --gris-txt:#5A5754;
  --accent-ink-red:#B71C12;
}

/* ---------- sección invertida: fondo papel ---------- */
.sec--papel{
  background:var(--papel); color:var(--tinta-txt);
  border-top:0;
}
.sec--papel h1,.sec--papel h2,.sec--papel h3,.sec--papel h4{color:var(--tinta-txt)}
.sec--papel .mute,.sec--papel .micro,.sec--papel .small.mute,.sec--papel p.mute{color:var(--gris-txt)}
.sec--papel .eyebrow{color:var(--accent-ink-red)}
.sec--papel .eyebrow-mute{color:var(--gris-txt)}
.sec--papel .metric{color:var(--tinta-txt)}
.sec--papel .metric--accent{color:var(--accent-ink-red)}
.sec--papel .cifra{border-top-color:var(--arena)}
.sec--papel .cifra p{color:var(--gris-txt)}
.sec--papel .card{background:#fff; border-color:var(--arena); color:var(--tinta-txt)}
.sec--papel a.card:hover{background:#fff; border-color:var(--accent-ink-red)}
.sec--papel .card-tag{color:var(--gris-txt)}
.sec--papel .card p,.sec--papel .card .small{color:var(--gris-txt)}
.sec--papel blockquote{border-left-color:var(--accent-ink-red)}
.sec--papel blockquote p{color:var(--tinta-txt)}
.sec--papel blockquote cite{color:var(--gris-txt)}
.sec--papel ul.lista li::before,.sec--papel ol.lista li::before{color:var(--accent-ink-red)}
.sec--papel .btn-ghost{color:var(--tinta-txt); border-bottom-color:var(--arena)}
.sec--papel .btn-ghost:hover{color:var(--accent-ink-red); border-bottom-color:var(--accent-ink-red)}
.sec--papel table th{color:var(--gris-txt); border-bottom-color:var(--arena)}
.sec--papel table td{border-bottom-color:var(--arena)}
.sec--papel .tabla-cont{border-top-color:var(--arena)}
.sec--papel td.dato{color:var(--tinta-txt)}
.sec--papel td.dato--pierde{color:var(--accent-ink-red)}
.sec--papel .aviso{border-color:var(--arena); border-left-color:var(--accent-ink-red);
  background:rgba(183,28,18,.05)}
.sec--papel .aviso--neutro{background:#fff; border-left-color:var(--gris-txt)}
.sec--papel .fuente{color:var(--gris-txt); border-top-color:var(--arena)}
.sec--papel .cajas-lista,.sec--papel .cajas-lista li{border-color:var(--arena)}
.sec--papel .cajas-lista .n{color:var(--accent-ink-red)}
.sec--papel .cajas-lista .q{color:var(--gris-txt)}
.sec--papel .cajas-lista a:hover{color:var(--accent-ink-red)}

/* ---------- regla roja: separador con peso ---------- */
.rule-red{width:64px; height:3px; background:var(--accent); border:0; margin:0 0 var(--s3)}
.sec--papel .rule-red{background:var(--accent-ink-red)}

/* ---------- números de caja, en grande ---------- */
.cajas-lista .n{font-family:var(--serif); font-size:1.6rem; letter-spacing:0; line-height:1}
@media(min-width:760px){
  .cajas-lista a{grid-template-columns:4rem 15rem 1fr; align-items:center}
  .cajas-lista .n{font-size:2.4rem}
}

/* ---------- muro de cifras: el patrón se repite ---------- */
.muro{display:grid; gap:var(--s3) var(--s4); grid-template-columns:1fr}
@media(min-width:640px){.muro{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.muro{grid-template-columns:repeat(3,1fr)}}
.muro-item{border-top:2px solid var(--accent); padding-top:var(--s2)}
.sec--papel .muro-item{border-top-color:var(--accent-ink-red)}
.muro-item .metric{font-size:clamp(34px,4vw,50px); margin-bottom:6px}
.muro-item p{font-size:.9375rem; color:var(--bone-mute); max-width:32ch}
.sec--papel .muro-item p{color:var(--gris-txt)}
.muro-item .quien{display:block; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  margin-top:6px; color:var(--accent)}
.sec--papel .muro-item .quien{color:var(--accent-ink-red)}

/* ---------- hero con más peso ---------- */
.hero .rule-red{margin-bottom:var(--s3)}
.hero--papel{background:var(--papel); color:var(--tinta-txt)}

/* ---------- CTA sobre papel ---------- */
.sec--papel .cta-bloque,.cta-bloque.sec--papel{border-top-color:var(--arena)}
.cta-bloque--papel{background:var(--papel); color:var(--tinta-txt); border-top:0}
.cta-bloque--papel h2{color:var(--tinta-txt)}
.cta-bloque--papel .lead.mute{color:var(--gris-txt)}
.cta-bloque--papel .micro{color:var(--gris-txt)}

/* ---------- tarjetas: el hover marca en rojo ---------- */
a.card{border-left:2px solid transparent; transition:border-color var(--trans),background var(--trans)}
a.card:hover{border-left-color:var(--accent)}
.sec--papel a.card:hover{border-left-color:var(--accent-ink-red)}

/* ============================================================
   BLOQUES NUEVOS — resumen extraíble, CTA temprano, compartir
   y barra fija en móvil. Todo sin una línea de JavaScript.
   ============================================================ */

/* ---------- «En resumen»: el bloque que un motor de IA puede aislar ---------- */
.sec--resumen{padding-top:0}
.resumen{max-width:var(--w-text); border-left:3px solid var(--accent);
  padding:var(--s1) 0 var(--s1) var(--s3)}
.resumen h2{font-family:var(--sans); font-size:.75rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin-bottom:var(--s2); line-height:1.4}
.resumen ul{list-style:none; padding-left:0}
.resumen li{position:relative; padding-left:var(--s3); margin-bottom:var(--s2);
  font-size:1.0625rem; line-height:1.6}
.resumen li:last-child{margin-bottom:0}
.resumen li::before{content:"—"; position:absolute; left:0; color:var(--accent)}
.sec--papel .resumen{border-left-color:var(--accent-ink-red)}
.sec--papel .resumen h2,.sec--papel .resumen li::before{color:var(--accent-ink-red)}

/* ---------- CTA temprano: una línea, no un bloque ---------- */
.cta-inline{max-width:var(--w-text); margin-top:var(--s3)}
.cta-inline a{font-weight:600; text-decoration:none; color:var(--accent);
  border-bottom:1px solid transparent; transition:border-color var(--trans)}
.cta-inline a::before{content:"→ "}
.cta-inline a:hover{border-bottom-color:var(--accent)}
.cta-inline .micro{display:block; margin-top:4px}
.sec--papel .cta-inline a{color:var(--accent-ink-red)}
.sec--papel .cta-inline a:hover{border-bottom-color:var(--accent-ink-red)}

/* ---------- compartir: enlaces planos a cada endpoint, cero JS ---------- */
.compartir{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3);
  border-top:1px solid var(--line); margin-top:var(--s4); padding-top:var(--s3);
  max-width:var(--w-text)}
.compartir .lbl{font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone-mute); font-weight:600}
.compartir a{font-size:.9375rem; color:var(--bone-mute); text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:2px; transition:color var(--trans),border-color var(--trans)}
.compartir a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.sec--papel .compartir{border-top-color:var(--arena)}
.sec--papel .compartir .lbl,.sec--papel .compartir a{color:var(--gris-txt)}
.sec--papel .compartir a{border-bottom-color:var(--arena)}
.sec--papel .compartir a:hover{color:var(--accent-ink-red); border-bottom-color:var(--accent-ink-red)}

/* ---------- barra fija de CTA: sólo en móvil ---------- */
/* No es un interstitial: ocupa ~64 px, no tapa contenido (el body compensa con
   padding) y no necesita botón de cerrar — cerrarla exigiría JavaScript. */
.cta-movil{display:none}
@media(max-width:780px){
  .cta-movil{display:block; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:rgba(11,11,12,.96); backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    padding:10px var(--s3) calc(10px + env(safe-area-inset-bottom))}
  .cta-movil .btn-primary{display:block; text-align:center; padding:13px 16px}
  body{padding-bottom:82px}
}
/* En móvil apaisado la pantalla es baja: la barra se llevaría media vista. */
@media(max-width:780px) and (max-height:460px){
  .cta-movil{display:none}
  body{padding-bottom:0}
}
@media print{.cta-movil{display:none} body{padding-bottom:0}}

/* El nombre de la marca NUNCA va en mayúsculas (Brandbook §08). blockquote cite va en
   uppercase por sistema, así que cuando quien firma la cita es la casa se exceptúa —
   mismo mecanismo que .pie h4.marca. Sin esto se lee «INVERSALABS · AGOSTO 2026». */
blockquote cite.marca{text-transform:none; letter-spacing:.01em; font-size:.875rem}