/* CAUCE IA · cauce.space
   Mismos tokens que la calculadora de fuga, para que sea una sola marca. */

:root{
  --paper:#FAFBFC; --surface:#FFFFFF; --sunk:#F1F3F6;
  --ink:#111418; --ink-soft:#4D545D; --ink-dim:#7C848E;
  --rule:#E0E4EA; --rule-soft:#EDF0F4;
  --ok:#0F6B58; --ok-soft:#E4F0EC;
  --leak:#A63420; --leak-soft:#FAEAE6;
  --disp:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"Roboto Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0F1216; --surface:#161A20; --sunk:#1D222A;
  --ink:#E9ECF0; --ink-soft:#A0A8B2; --ink-dim:#79818B;
  --rule:#272D36; --rule-soft:#1F242C;
  --ok:#4FC3A5; --ok-soft:#14261F;
  --leak:#E58068; --leak-soft:#2A1815;
}}
:root[data-theme="dark"]{
  --paper:#0F1216; --surface:#161A20; --sunk:#1D222A;
  --ink:#E9ECF0; --ink-soft:#A0A8B2; --ink-dim:#79818B;
  --rule:#272D36; --rule-soft:#1F242C;
  --ok:#4FC3A5; --ok-soft:#14261F;
  --leak:#E58068; --leak-soft:#2A1815;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
a{color:var(--ok)}

.wrap{max-width:900px;margin:0 auto;padding-inline:20px;padding-block:0 64px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--disp);font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.02em}
h1{font-size:clamp(30px,5.4vw,50px);line-height:1.04}
h2{font-size:clamp(21px,2.9vw,28px);line-height:1.15}
h3{font-size:16px;font-weight:700}
p{margin:0 0 14px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 14px}

/* marca */
.brand{display:flex;align-items:baseline;gap:10px;padding-block:26px 0;
  font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.02em}
.brand a{color:var(--ink);text-decoration:none}
.brand span{font-family:var(--body);font-size:12px;font-weight:500;color:var(--ink-dim);
  letter-spacing:0}

header.top{padding-block:40px 32px;border-bottom:1px solid var(--rule)}
.deck{font-size:17.5px;color:var(--ink-soft);max-width:58ch;margin-top:16px}
.deck strong{color:var(--ink)}

section{padding-block:36px;border-bottom:1px solid var(--rule)}
section.nob{border-bottom:0}
.lede{max-width:62ch;color:var(--ink-soft);margin-top:12px}
.lede strong{color:var(--ink)}

/* cifras del problema */
.figs{display:flex;flex-wrap:wrap;gap:0;margin-top:22px;border:1px solid var(--rule);
  background:var(--surface)}
.figs div{flex:1 1 160px;padding:18px 20px;border-right:1px solid var(--rule-soft)}
.figs div:last-child{border-right:0}
.figs b{display:block;font-family:var(--mono);font-size:26px;font-weight:700;line-height:1.05;
  color:var(--leak);letter-spacing:-.02em}
.figs span{display:block;font-size:12.5px;color:var(--ink-dim);margin-top:7px;line-height:1.4}

/* pasos */
.steps{display:grid;gap:0;margin-top:22px;border-top:1px solid var(--rule)}
.step{display:grid;grid-template-columns:70px 1fr;gap:18px;padding-block:17px;
  border-bottom:1px solid var(--rule)}
.step .n{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ok);padding-top:2px}
.step h3{margin-bottom:5px}
.step p{font-size:14px;color:var(--ink-soft);margin:0}

/* precio */
.plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px;margin-top:22px}
.tier{background:var(--surface);border:1px solid var(--rule);padding:22px;display:flex;
  flex-direction:column}
.tier.hi{border-color:var(--ok);border-width:2px}
.tier .tag{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 8px}
.tier.hi .tag{color:var(--ok)}
.tier .price{font-family:var(--mono);font-size:27px;font-weight:700;line-height:1.1;margin:0}
.tier .price .iva{font-family:var(--body);font-size:14px;font-weight:400;color:var(--ink-soft)}
.tier .sub{font-size:12.5px;color:var(--ink-dim);margin:6px 0 0}
.tier .sub b{font-family:var(--mono);color:var(--ink-soft);font-weight:700}

.note{background:var(--sunk);border-left:3px solid var(--ink-dim);padding:14px 16px;
  margin-top:20px;font-size:13.5px;color:var(--ink-soft)}
.note strong{color:var(--ink)}
.note + .note{margin-top:12px}

/* verticales */
.verts{list-style:none;margin:22px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.verts li{background:var(--surface);padding:15px 17px;font-size:14.5px;font-weight:600;
  color:var(--ink)}
.verts li span{display:block;font-size:12px;font-weight:400;color:var(--ink-dim);margin-top:4px}
.verts li.on{background:var(--ok-soft)}
.verts li.on span{color:var(--ok);font-weight:700}
.verts li.on a{color:var(--ok);text-decoration:none}
.verts li.on a:hover{text-decoration:underline}

/* honestidad */
.plain{margin-top:20px;padding-left:0;list-style:none}
.plain li{position:relative;padding-left:26px;margin-bottom:11px;font-size:14.5px;
  color:var(--ink-soft)}
.plain li::before{content:"—";position:absolute;left:0;top:0;color:var(--ok);font-weight:700}
.plain li strong{color:var(--ink)}

/* llamado a la accion */
.cta{margin-top:22px;padding:24px;border:2px solid var(--ink);background:var(--surface)}
.cta h3{font-family:var(--disp);font-size:20px;margin-bottom:8px}
.cta p{font-size:14.5px;color:var(--ink-soft);margin:0}
.wa{display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:13px 22px;
  background:var(--ok);color:#fff;text-decoration:none;font-weight:700;font-size:15px;
  border-radius:4px;transition:opacity .15s}
.wa:hover{opacity:.88}
.wa svg{flex:none}
.whom{font-size:13px;color:var(--ink-dim);margin:14px 0 0}
.whom a{color:var(--ink-soft);text-decoration:none;font-family:var(--mono);font-weight:700}
.whom a:hover{text-decoration:underline}

.ghost{display:inline-block;margin-top:16px;padding:11px 18px;border:1px solid var(--rule);
  background:var(--surface);color:var(--ink);text-decoration:none;font-weight:600;
  font-size:14px;border-radius:4px}
.ghost:hover{border-color:var(--ok);color:var(--ok)}

/* pie */
footer{border-top:1px solid var(--rule);margin-top:8px;padding-block:28px 0;
  font-size:13px;color:var(--ink-dim)}
footer .legal{font-family:var(--mono);font-size:12.5px;line-height:1.7}
footer .legal b{color:var(--ink-soft);font-weight:700}
footer nav{margin-top:14px;display:flex;flex-wrap:wrap;gap:16px}
footer nav a{color:var(--ink-soft);text-decoration:none}
footer nav a:hover{text-decoration:underline}

/* texto legal largo */
.doc{max-width:68ch}
.doc h2{margin-top:32px;margin-bottom:10px;font-size:20px}
.doc h3{margin-top:22px;margin-bottom:6px}
.doc p,.doc li{font-size:14.5px;color:var(--ink-soft)}
.doc li{margin-bottom:8px}
.doc strong{color:var(--ink)}
.doc ol,.doc ul{padding-left:20px}

:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
@media (max-width:640px){
  .step{grid-template-columns:1fr;gap:4px}
  .brand{flex-direction:column;gap:2px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important};html{scroll-behavior:auto}}