@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-wdth.woff2") format("woff2-variations"),url("../fonts/bricolage-wdth.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("../fonts/atkinson-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:optional}
@font-face{font-family:"Atkinson Hyperlegible";src:url("../fonts/atkinson-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("../fonts/atkinson-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/plexmono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/plexmono-400.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
/* Layout: una ciudad nocturna fija detrás de todo; paneles opacos de lectura se deslizan por encima
   y, en los interludios transparentes, la ciudad crece, se ilumina y amanece a medida que avanzas. */
:root{
  --bg:#f2f4f9; --surface:#ffffff; --surface-2:#e6ebf4; --fg:#121a2b; --muted:#465270; --line:#cdd5e5;
  --accent:#8a5900; --accent-fill:#f0ad2e; --on-accent:#1c1505;
  --azul:#28589f; --azul-fill:#5288d6; --verde:#1b7049; --verde-fill:#3fae7c; --rojo:#a8402d; --rojo-fill:#d9634c; --gris-fill:#8a97b3;
  --head:rgba(242,244,249,.86); --text-shadow:0 1px 18px rgba(242,244,249,.9);
  --shadow:0 18px 50px -24px rgba(18,26,43,.35);
  --sky-a1:#9cb3d8; --sky-a2:#e8edf6; --sky-b1:#78a9e4; --sky-b2:#fde2b4;
  --bld-1:#bdc9de; --bld-2:#8e9ebd; --bld-3:#55657f; --win-off:#6f7f9d; --win-on:#ffcc4d; --star:0;
  --grain:.035; --ess:14%;
  --f-display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0b1221; --surface:#121b2f; --surface-2:#19243e; --fg:#eef1f8; --muted:#a9b4cb; --line:#28345a;
  --accent:#f6bf4c; --accent-fill:#f6bf4c; --on-accent:#1c1505;
  --azul:#8ab4f0; --azul-fill:#4f86d6; --verde:#79d4a8; --verde-fill:#3aa874; --rojo:#f0907c; --rojo-fill:#e0705a; --gris-fill:#5f6e8e;
  --head:rgba(11,18,33,.82); --text-shadow:0 2px 22px rgba(0,0,0,.85);
  --shadow:0 22px 60px -26px rgba(0,0,0,.7);
  --sky-a1:#040811; --sky-a2:#15213c; --sky-b1:#1c2e55; --sky-b2:#d98a58;
  --bld-1:#1d2945; --bld-2:#121c33; --bld-3:#080e1c; --win-off:#1c2844; --win-on:#ffc54f; --star:1;
  --grain:.06; --ess:7%; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b1221; --surface:#121b2f; --surface-2:#19243e; --fg:#eef1f8; --muted:#a9b4cb; --line:#28345a;
  --accent:#f6bf4c; --accent-fill:#f6bf4c; --on-accent:#1c1505;
  --azul:#8ab4f0; --azul-fill:#4f86d6; --verde:#79d4a8; --verde-fill:#3aa874; --rojo:#f0907c; --rojo-fill:#e0705a; --gris-fill:#5f6e8e;
  --head:rgba(11,18,33,.82); --text-shadow:0 2px 22px rgba(0,0,0,.85);
  --shadow:0 22px 60px -26px rgba(0,0,0,.7);
  --sky-a1:#040811; --sky-a2:#15213c; --sky-b1:#1c2e55; --sky-b2:#d98a58;
  --bld-1:#1d2945; --bld-2:#121c33; --bld-3:#080e1c; --win-off:#1c2844; --win-on:#ffc54f; --star:1;
  --grain:.06; --ess:7%; color-scheme:dark}

[hidden]{display:none!important}
img,svg,canvas{max-width:100%}
html{scroll-behavior:smooth;font-size:100%}
html[data-size="1"]{font-size:112.5%}
html[data-size="2"]{font-size:125%}
html.nomotion{scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:1.125rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
*{box-sizing:border-box}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.05;text-wrap:balance;margin:0;font-weight:750;font-variation-settings:"wdth" 88}
/* sin ancho máximo en ch: con «65ch» los párrafos y, sobre todo, las etiquetas con espaciado entre letras
   saltaban de línea con hueco libre; el ancho de lectura ya lo limitan los contenedores (52rem, 58rem) */
p{margin:0}
a{color:var(--azul)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent-fill);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--accent-fill);color:var(--on-accent);padding:.6rem 1rem;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:1rem}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.wrap{max-width:72rem;margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ciudad + grano */
#city{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--grain);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.nomotion .grain{animation:none}

/* barra superior */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--head);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;gap:.75rem;min-height:3.5rem}
.brand{display:flex;align-items:baseline;gap:.5rem;white-space:nowrap;flex:none;text-decoration:none;color:var(--fg);font-family:var(--f-display);font-weight:800;font-size:1.25rem;letter-spacing:.02em}
.brand i{width:.8rem;height:1.05rem;border:3px solid var(--accent-fill);border-bottom:0;border-radius:.5rem .5rem 0 0;display:inline-block;position:relative;box-shadow:0 0 14px -2px var(--accent-fill)}
.brand i::after{content:"";position:absolute;left:-.4rem;right:-.4rem;bottom:-3px;height:3px;border-radius:2px;background:var(--accent-fill)}
#openMenu{margin-left:auto;white-space:nowrap;flex:none}
@media (max-width:440px){.now{display:none!important}.btn-more{display:none}}
.now{flex:1;min-width:0;color:var(--muted);font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now b{color:var(--fg);font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;padding:.55rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none;transition:transform .2s,background .2s,border-color .2s}
.btn:hover{border-color:var(--accent-fill);transform:translateY(-1px)}
.btn.main{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.btn svg{width:1.15em;height:1.15em}
.progress{position:absolute;left:0;bottom:-1px;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--accent-fill);box-shadow:0 0 12px var(--accent-fill)}

/* menú */
dialog.menu{border:none;padding:0;margin:0 0 0 auto;height:100%;max-height:100%;width:min(26rem,100%);background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}
dialog.menu::backdrop{background:rgba(5,9,18,.55);backdrop-filter:blur(3px)}
.menu-in{display:flex;flex-direction:column;gap:1.5rem;padding:calc(1.25rem + env(safe-area-inset-top,0px)) 1.25rem calc(1.5rem + env(safe-area-inset-bottom,0px))}
.menu-top{display:flex;justify-content:space-between;align-items:center}
.menu h2{font-size:1.5rem}
.menu ol{list-style:none;margin:0;padding:0;display:grid;gap:.25rem;counter-reset:m}
.menu ol a{display:flex;gap:.75rem;align-items:baseline;padding:.6rem .75rem;border-radius:10px;color:var(--fg);text-decoration:none;font-weight:700}
.menu ol a:hover,.menu ol a[aria-current="true"]{background:var(--surface-2)}
.menu ol a span{color:var(--muted);font-family:var(--f-mono);font-size:.8rem;min-width:3.4rem;white-space:nowrap;flex:none}
.set{display:grid;gap:.9rem;border-top:1px solid var(--line);padding-top:1.25rem}
.set h3{font-size:1.1rem;font-family:var(--f-body);font-weight:700}
.row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{border:0;background:transparent;padding:.45rem .9rem;min-height:2.75rem;cursor:pointer;font-weight:700}
.seg button[aria-pressed="true"]{background:var(--accent-fill);color:var(--on-accent)}
.switch{position:relative;width:3.4rem;height:2rem;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);cursor:pointer;flex:none}
.switch::after{content:"";position:absolute;top:.2rem;left:.2rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
.switch[aria-checked="true"]{background:var(--accent-fill);border-color:var(--accent-fill)}
.switch[aria-checked="true"]::after{transform:translateX(1.4rem);background:var(--on-accent)}
.hint{font-size:.9rem;color:var(--muted)}

main{position:relative;z-index:2}

/* HERO */
/* velo de la portada en dos capas. Desde que el párrafo de entrada ocupa todo el ancho, con solo el velo lateral
   las ventanas encendidas bajaban su contraste a 1,5:1; un velo lateral más fuerte lo arreglaba pero apagaba
   la luna. La capa de abajo arriba refuerza solo la zona de los párrafos: medido píxel a píxel entre 1024 y
   1920 px, en claro y en oscuro, todo el texto queda en 4,5:1 o más y el cielo no cambia */
.hero{position:relative;min-height:calc(100svh - 3.5rem);display:flex;align-items:flex-end;padding-block:clamp(4rem,10vh,7rem) clamp(3rem,8vh,5rem);background:linear-gradient(0deg,color-mix(in srgb,var(--bg) 72%,transparent) 0%,color-mix(in srgb,var(--bg) 60%,transparent) 45%,transparent 78%),linear-gradient(100deg,color-mix(in srgb,var(--bg) 78%,transparent) 0%,color-mix(in srgb,var(--bg) 45%,transparent) 55%,transparent 85%)}
/* la etiqueta vertical «Desplázate» es decorativa: por debajo de 1200 px pisaba el párrafo de entrada */
@media (max-width:1199px){.scrollcue{display:none}}
.hero-in{display:grid;gap:1.6rem;max-width:58rem}
.eyebrow{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--accent);font-weight:600}
.hero .eyebrow{color:var(--accent);text-shadow:var(--text-shadow)}
.hero h1{font-size:clamp(2.7rem,8.6vw,7rem);font-weight:800;font-variation-settings:"wdth" 80;letter-spacing:-.02em;text-shadow:var(--text-shadow)}
.hero h1 span{display:block}
.hero h1 .glow{color:var(--accent);}
.focuspull{animation:focus 1s cubic-bezier(.2,.7,.2,1) both}
.focuspull:nth-child(2){animation-delay:.12s}.focuspull:nth-child(3){animation-delay:.24s}
@keyframes focus{from{filter:blur(10px)}to{filter:blur(0)}}
.nomotion .focuspull{animation:none}
.lead{font-size:clamp(1.15rem,2.2vw,1.45rem);text-shadow:var(--text-shadow)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem}
.hero-meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.hero-meta li{padding:.35rem .8rem;border-radius:999px;background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid var(--line);font-size:.92rem}
.hero-meta b{color:var(--accent)}
.viab{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:640px){.viab{grid-template-columns:repeat(6,minmax(0,1fr))}.viab article{grid-column:span 2}.viab article:nth-child(n+4){grid-column:span 3}}
@media (min-width:1080px){.viab{grid-template-columns:repeat(5,minmax(0,1fr))}.viab article,.viab article:nth-child(n+4){grid-column:auto}}
.viab article{display:grid;gap:.5rem;align-content:start;padding:1.25rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.viab h3{font-size:1.3rem}
.viab p{font-size:1rem;color:var(--muted)}
.st{justify-self:start;display:inline-flex;align-items:center;gap:.45rem;padding:.25rem .7rem;border-radius:999px;font-size:.85rem;font-weight:700;border:1px solid currentColor}
.st::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:currentColor}
.st-ok{color:var(--verde)}.st-warn{color:var(--accent)}.st-crit{color:var(--rojo)}.st-mid{color:var(--azul)}
.sub{font-size:clamp(1.5rem,3.4vw,2.2rem);margin:3rem 0 1.25rem}
.risks{display:grid;grid-template-columns:1fr;gap:.75rem}
@media (min-width:760px){.risks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.risks > div{display:grid;gap:.35rem;align-content:start;padding:1.1rem 1.2rem;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.risks b{font-size:1.08rem}
.risks p{font-size:.98rem;color:var(--muted)}
.risks .fix{color:var(--fg);padding-top:.4rem;border-top:1px dashed var(--line)}
.risks .fix::before{content:"Cómo se cubre: ";font-weight:700;color:var(--verde)}
.road{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.road li{position:relative;display:grid;gap:.35rem;padding:0 0 2rem 2.5rem}
.road li::before{content:"";position:absolute;left:.45rem;top:.35rem;width:1rem;height:1rem;border-radius:50%;background:var(--accent-fill);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-fill) 25%,transparent)}
.road li::after{content:"";position:absolute;left:.92rem;top:1.6rem;bottom:0;width:2px;background:var(--line)}
.road li:last-child::after{display:none}
.road .when{font-family:var(--f-mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.road h3{font-size:1.45rem}
.road p{color:var(--muted)}
@media (min-width:980px){.road{grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}.road li{padding:2.4rem 0 0}.road li::before{left:0;top:0}.road li::after{left:1.4rem;right:-1rem;top:.45rem;bottom:auto;width:auto;height:2px}.road .when{min-height:2.7em}}
.gov{margin-top:1rem;display:grid;gap:1rem;padding:clamp(1.1rem,3vw,1.75rem);border-radius:var(--r);background:var(--surface-2)}
.gov h3{font-size:1.3rem}
.gov-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:.75rem}
.gov-row div{display:grid;gap:.25rem;padding:1rem;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.gov-row span{font-size:.98rem;color:var(--muted)}
.gov .note{font-size:.92rem;color:var(--muted)}
.kpis{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.kpis li{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.75rem;font-size:1rem;color:var(--muted);padding-bottom:.6rem;border-bottom:1px dashed var(--line)}
.kpis b{color:var(--fg)}
@media (max-width:520px){.kpis li{grid-template-columns:1fr;gap:.1rem}}
.hero-for{font-size:1.08rem;text-shadow:var(--text-shadow)}
.pname{display:flex;flex-direction:column;gap:.15rem;font-family:var(--f-mono);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;max-width:none}
.pname span{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-weight:400;font-size:.98rem;color:var(--muted)}
.why{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem 1.5rem;align-items:center;padding:clamp(1.25rem,3vw,1.75rem);border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.why svg{width:4.5rem;height:4.5rem}
.why h3{font-size:1.5rem;margin-bottom:.4rem}
.why p{color:var(--muted)}
@media (max-width:520px){.why{grid-template-columns:1fr}}
.cmp{display:grid;gap:1rem}
.cmp article{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr) minmax(0,1fr);gap:1rem 1.5rem;padding:1.25rem 1.4rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);align-items:start}
.cmp h3{font-size:1.25rem}
.cmp .lbl{display:block;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.cmp .add .lbl{color:var(--verde)}
.cmp p{font-size:1rem}
.cmp .add p{font-weight:700}
@media (max-width:820px){.cmp article{grid-template-columns:1fr}}
.hero-note{color:var(--fg);font-size:.95rem;text-shadow:var(--text-shadow)}
.hero-note kbd{font-family:var(--f-body);font-weight:700;border-bottom:2px dotted var(--accent-fill)}
/* aviso breve de la portada: azul porque es información, no acción; fondo propio para leerse sobre la ciudad */
.hero-aviso{justify-self:start;padding:.6rem .9rem;border-radius:12px;background:color-mix(in srgb,var(--surface) 86%,transparent);border:1px solid var(--line);border-left:4px solid var(--azul-fill);font-size:.92rem;line-height:1.5}
.hero-aviso a{font-weight:700;white-space:nowrap}
.scrollcue{position:absolute;right:clamp(1rem,4vw,2.5rem);bottom:2rem;writing-mode:vertical-rl;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.8rem}
.scrollcue::after{content:"";width:1px;height:4rem;background:linear-gradient(var(--accent-fill),transparent);animation:cue 2s 1.5s 4 both}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.nomotion .scrollcue::after{animation:none}
@media (max-width:640px){.scrollcue{display:none}}

/* paneles */
.panel{position:relative;background:var(--bg);padding-block:clamp(4rem,9vw,7.5rem);content-visibility:auto;contain-intrinsic-size:auto 1400px}
.panel.alt{background:var(--surface-2)}
.panel + .panel{border-top:1px solid var(--line)}
.sec-head{display:grid;gap:1rem;margin-bottom:clamp(2rem,5vw,3.5rem);max-width:52rem}
.sec-head h2{font-size:clamp(2rem,5.2vw,3.6rem)}
.sec-head p{font-size:1.2rem;color:var(--muted)}
.chap{font-family:var(--f-mono);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:.75rem}
.chap::before{content:"";width:2.5rem;height:2px;background:var(--accent-fill)}

/* interludios: ventana a la ciudad */
.interlude{position:relative;min-height:78vh;display:flex;align-items:center;padding-block:6rem;overflow:hidden;background:linear-gradient(var(--bg),transparent 16%,transparent 84%,var(--bg))}
.interlude blockquote{margin:0;position:relative;z-index:2;max-width:48rem;padding:clamp(1.1rem,3vw,2rem);border-radius:var(--r);background:color-mix(in srgb,var(--bg) 62%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.interlude blockquote p{font-family:var(--f-display);font-size:clamp(1.9rem,5vw,3.8rem);font-weight:750;line-height:1.08;font-variation-settings:"wdth" 82;text-shadow:var(--text-shadow);max-width:none;text-wrap:balance}
.interlude blockquote p em{font-style:normal;color:var(--accent)}
.interlude cite{display:block;margin-top:1.25rem;font-style:normal;font-family:var(--f-mono);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg);text-shadow:var(--text-shadow)}
.ghost{position:absolute;z-index:1;font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(6rem,24vw,20rem);line-height:.8;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--fg) 28%,transparent);white-space:nowrap;pointer-events:none;user-select:none}

/* reveal (desde estado visible) */
.js .rv{transform:translateY(26px);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{transform:none}
.nomotion .rv{transform:none!important;transition:none!important}

/* resumen 1 minuto */
.minute{display:grid;grid-template-columns:1fr;gap:1rem;counter-reset:s;list-style:none;margin:0;padding:0}
.minute li{display:grid;gap:.6rem;align-content:start;padding:1.4rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);position:relative}
.minute li::before{counter-increment:s;content:counter(s);font-family:var(--f-mono);font-weight:600;color:var(--on-accent);background:var(--accent-fill);width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font-size:.95rem}
.minute h3{font-size:1.35rem}
@media (min-width:640px){.minute{grid-template-columns:repeat(6,minmax(0,1fr))}.minute li{grid-column:span 2}.minute li:nth-child(n+4){grid-column:span 3}}
@media (min-width:1080px){.minute{grid-template-columns:repeat(5,minmax(0,1fr))}.minute li,.minute li:nth-child(n+4){grid-column:auto}}
.minute p{color:var(--muted);font-size:1.02rem}
.howto{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;padding:1.25rem 1.5rem;border-radius:var(--r);border:1px dashed var(--line);color:var(--muted);font-size:1rem}
.howto b{color:var(--fg)}

/* problema */
.big-stat{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:center}
@media (max-width:820px){.big-stat{grid-template-columns:1fr}}
.stat-num{font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(4.5rem,15vw,11rem);line-height:.85;color:var(--accent);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat-cap{font-size:1.25rem;margin-top:1rem;max-width:30ch}
.stat-src{font-size:.9rem;color:var(--muted);margin-top:.5rem}
.compare-bars{display:grid;gap:1.25rem}
.cb{display:grid;gap:.4rem}
.cb-l{display:flex;justify-content:space-between;font-weight:700;gap:1rem}
.cb-t{height:2.6rem;border-radius:8px;background:var(--surface-2);overflow:hidden;position:relative}
.cb-f{position:absolute;inset:0 auto 0 0;border-radius:8px}
.cb-gap{position:absolute;top:0;bottom:0;border:2px dashed var(--rojo);border-left:none;border-radius:0 8px 8px 0;display:grid;place-items:center;color:var(--rojo);font-weight:700;font-size:.85rem}

/* idea central */
.idea{display:grid;gap:2rem}
.idea-quote{font-family:var(--f-display);font-size:clamp(1.8rem,4.4vw,3.2rem);font-weight:700;line-height:1.12;font-variation-settings:"wdth" 85;max-width:28ch}
.idea-quote mark{-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--accent-fill) 55%,transparent) 62%);color:inherit;padding:0 .1em}
.trade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1rem}
.trade div{padding:1.5rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);display:grid;gap:.6rem}
.trade h3{font-size:1.3rem}
.trade ul{margin:0;padding-left:1.1rem;color:var(--muted)}

/* plan y objetivos */
.tree{display:grid;gap:0;justify-items:center}
.t-root{padding:1.2rem 1.8rem;border-radius:var(--r);background:var(--accent-fill);color:var(--on-accent);font-family:var(--f-display);font-weight:800;font-size:clamp(1.2rem,2.6vw,1.7rem);text-align:center;font-variation-settings:"wdth" 85;box-shadow:0 0 40px -6px var(--accent-fill)}
.t-stem{width:2px;height:2.2rem;background:var(--line)}
.t-branches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;width:100%;position:relative;padding-top:2.2rem}
.t-branches::before{content:"";position:absolute;top:0;left:12.5%;right:12.5%;height:2px;background:var(--line)}
.t-br{display:grid;gap:.75rem;align-content:start;position:relative}
.t-br::before{content:"";position:absolute;top:-2.2rem;left:50%;width:2px;height:2.2rem;background:var(--line)}
.t-br h3{text-align:center;font-size:1.15rem;padding:.9rem;border-radius:12px;border:2px solid var(--c);color:var(--fg);background:var(--surface)}
.t-leaf{display:grid;gap:.2rem;text-align:left;padding:.9rem 1rem;border-radius:12px;background:var(--surface);border:1px solid var(--line);cursor:pointer;text-decoration:none;color:var(--fg);transition:transform .2s,border-color .2s}
.t-leaf:hover{transform:translateX(4px);border-color:var(--c)}
.t-leaf b{font-size:1.05rem}
.t-leaf span{font-size:.92rem;color:var(--muted)}
.t-leaf::after{content:"Ver pieza →";font-size:.8rem;font-family:var(--f-mono);color:var(--accent)}
.t-out{margin-top:2.5rem;display:grid;gap:.75rem;justify-items:center;text-align:center}
.t-out .pill-row{justify-content:center}
@media (max-width:1000px){.t-branches{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:1rem}.t-branches::before,.t-br::before{display:none}}
@media (max-width:560px){.t-branches{grid-template-columns:1fr}}

/* piezas */
.piece{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line)}
.piece:first-of-type{border-top:none}
.p-num{font-family:var(--f-display);font-weight:800;font-size:3.6rem;line-height:.85;color:var(--accent);font-variation-settings:"wdth" 75;position:sticky;top:5rem;align-self:start}
.p-num small{display:block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:.4rem}
.p-body{display:grid;gap:1.5rem;min-width:0}
.p-body h3{font-size:clamp(1.6rem,3.6vw,2.4rem)}
.essence{display:grid;gap:.4rem;padding:1.2rem 1.4rem;border-radius:var(--r);background:color-mix(in srgb,var(--accent-fill) var(--ess),var(--surface));border:1px solid color-mix(in srgb,var(--accent-fill) 45%,var(--line))}
.essence .lbl{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600}
.essence p{font-size:1.2rem;line-height:1.55;max-width:60ch}
.detail{display:grid;gap:1.25rem}
.essential .detail{display:none}
.wins{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.wins .lbl{font-size:.9rem;color:var(--muted);margin-right:.25rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:.92rem;font-weight:700}
.chip::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--verde-fill)}
.pill-row{display:flex;flex-wrap:wrap;gap:.5rem}
.slogan{font-family:var(--f-display);font-size:clamp(1.3rem,2.8vw,1.75rem);font-weight:700;font-variation-settings:"wdth" 85;line-height:1.2;padding-left:1.25rem;border-left:4px solid var(--accent-fill);max-width:36ch}
@media (max-width:640px){.piece{grid-template-columns:1fr}.p-num{position:static;font-size:2.8rem;display:flex;align-items:baseline;gap:.75rem}.p-num small{margin:0}}

/* cajas de widget */
.box{padding:clamp(1.1rem,3vw,1.75rem);border-radius:var(--r);background:var(--surface);border:1px solid var(--line);display:grid;gap:1.1rem;min-width:0}
.box h4,.box > h3{font-family:var(--f-body);font-size:1.1rem;font-weight:700;font-variation-settings:normal;line-height:1.3}
.box .note{font-size:.88rem;color:var(--muted)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem}
.opt{padding:1.2rem;border-radius:12px;border:1px solid var(--line);display:grid;gap:.4rem;align-content:start;background:var(--surface)}
.opt.win{border:2px solid var(--verde-fill);background:color-mix(in srgb,var(--verde-fill) 10%,var(--surface))}
.opt .tag{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.opt.win .tag{color:var(--verde)}
.opt b{font-size:1.1rem}
.opt p{font-size:.98rem;color:var(--muted)}

/* waffle */
.waffle{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:3px}
.waffle i{aspect-ratio:1;border-radius:2px;display:block;max-width:100%;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.waffle.popin i{animation:pop .6s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i) * 3ms)}
@keyframes pop{from{transform:scale(.3)}to{transform:scale(1)}}
.nomotion .waffle i{animation:none!important}
@media (max-width:560px){.waffle{grid-template-columns:repeat(20,minmax(0,1fr))}}
.legend{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-size:.98rem}
.legend span{display:inline-flex;align-items:center;gap:.5rem}
.legend i{width:.9rem;height:.9rem;border-radius:3px;display:inline-block}
.legend b{font-family:var(--f-mono)}

.criteria{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.criteria span{padding:.5rem .9rem;border-radius:10px;background:var(--surface-2);font-weight:700;font-size:.98rem}
.criteria em{font-style:normal;color:var(--accent);font-weight:800;font-size:1.2rem}

.timeline{position:relative;height:3.2rem;border-radius:10px;background:linear-gradient(90deg,var(--azul-fill),var(--verde-fill));color:var(--on-accent);display:flex;align-items:center;justify-content:space-between;padding-inline:1rem;font-weight:700;font-size:.95rem}
.timeline span{background:var(--surface);color:var(--fg);padding:.2rem .6rem;border-radius:6px;font-size:.85rem}

/* precio */
.price-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem}
.price-big{font-family:var(--f-display);font-weight:800;font-size:clamp(2.6rem,7vw,4rem);line-height:1;font-variation-settings:"wdth" 80;font-variant-numeric:tabular-nums}
.price-sub{color:var(--muted);font-size:.95rem}
.pbar{position:relative;height:3rem;border-radius:10px;background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--verde-fill) 30%,transparent) 0 8px,transparent 8px 16px),var(--surface-2);overflow:hidden}
.pbar-f{position:absolute;inset:0 auto 0 0;width:100%;background:var(--accent-fill);border-radius:10px;transition:width 1.4s cubic-bezier(.6,0,.2,1);display:flex;align-items:center;padding-left:1rem;color:var(--on-accent);font-weight:700;white-space:nowrap}
.pbar-save{position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-weight:700;color:var(--verde);opacity:0;transition:opacity .4s .9s}
.applied .pbar-save{opacity:1}
.factors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:.5rem}
.factor{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.65rem .9rem;border-radius:10px;border:1px solid var(--line);transition:background .4s,border-color .4s}
.factor .chev{display:flex;gap:2px;color:var(--line);transition:color .4s}
.factor .chev svg{width:.9rem;height:.9rem}
.applied .factor{border-color:color-mix(in srgb,var(--verde-fill) 50%,var(--line));background:color-mix(in srgb,var(--verde-fill) 10%,var(--surface))}
.applied .factor .chev{color:var(--verde)}

/* industrial */
.range{position:relative;height:2.6rem;border-radius:10px;background:var(--surface-2)}
.range-f{position:absolute;top:0;bottom:0;left:20%;width:40%;border-radius:10px;background:linear-gradient(90deg,var(--azul-fill),var(--verde-fill))}
.range-l{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}

/* flujos */
.flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:.5rem}
.flow > div{flex:1 1 9rem;padding:1rem;border-radius:12px;background:var(--surface-2);display:grid;gap:.3rem;align-content:start;position:relative}
.flow > div b{font-size:1rem}
.flow > div span{font-size:.9rem;color:var(--muted)}
.flow > div.end{background:color-mix(in srgb,var(--verde-fill) 18%,var(--surface));border:1px solid var(--verde-fill)}
.flow .arrow{flex:0 0 auto;align-self:center;color:var(--accent);font-weight:800;font-size:1.3rem;padding:0;background:none}
@media (max-width:640px){.flow{flex-direction:column}.flow > div{flex:0 0 auto}.flow .arrow{transform:rotate(90deg);align-self:center}}
.checks{display:flex;flex-wrap:wrap;gap:.4rem}
.checks span{font-size:.85rem;padding:.2rem .55rem;border-radius:6px;background:var(--surface);border:1px solid var(--line)}
.checks span::before{content:"✓ ";color:var(--verde);font-weight:800}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1rem}
.fact{display:grid;gap:.2rem}
.fact .n{font-family:var(--f-display);font-weight:800;font-size:2.4rem;line-height:1;color:var(--azul);font-variation-settings:"wdth" 80}
.fact span{font-size:.95rem;color:var(--muted)}

/* sliders / calculadoras */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem}
@media (max-width:760px){.calc{grid-template-columns:1fr}}
.ctrl{display:grid;gap:1.1rem;align-content:start}
.field{display:grid;gap:.35rem}
.field label{display:flex;justify-content:space-between;gap:1rem;font-weight:700;font-size:1rem}
.field label output{font-family:var(--f-mono);color:var(--accent);font-weight:600;white-space:nowrap;flex:none}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2.2rem;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.6rem;height:1.6rem;margin-top:-.45rem;border-radius:50%;background:var(--accent-fill);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--accent-fill)}
input[type=range]::-moz-range-thumb{width:1.3rem;height:1.3rem;border-radius:50%;background:var(--accent-fill);border:3px solid var(--surface)}
.result{display:grid;gap:1rem;align-content:start;padding:1.25rem;border-radius:12px;background:var(--surface-2)}
.result .big{font-family:var(--f-display);font-weight:800;font-size:clamp(2.2rem,6vw,3.2rem);line-height:1;font-variation-settings:"wdth" 80;color:var(--verde);font-variant-numeric:tabular-nums}
.result .cap{font-size:.95rem;color:var(--muted)}
.stack{display:flex;height:2.6rem;border-radius:10px;overflow:hidden;background:var(--surface)}
.stack i{display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:.85rem;color:var(--on-accent);transition:flex-grow .5s cubic-bezier(.2,.7,.2,1);min-width:0;overflow:hidden;white-space:nowrap}
.kv{display:grid;gap:.4rem}
.kv div{display:flex;justify-content:space-between;gap:1rem;font-size:1rem;border-bottom:1px dashed var(--line);padding-bottom:.35rem}
.kv div b{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.kv .sw{display:inline-block;width:.8rem;height:.8rem;border-radius:3px;margin-right:.45rem;vertical-align:-1px}

/* garantía */
.guard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:1.5rem;align-items:start}
@media (max-width:760px){.guard{grid-template-columns:1fr}}
.chain{display:grid;gap:.5rem;justify-items:stretch}
.chain .node{padding:1rem;border-radius:12px;text-align:center;font-weight:800;font-family:var(--f-display);font-size:1.25rem;font-variation-settings:"wdth" 85}
.chain .estado{background:var(--azul-fill);color:var(--on-accent)}
.chain .prop{background:var(--accent-fill);color:var(--on-accent)}
.chain .inq{background:var(--verde-fill);color:var(--on-accent)}
.chain ul{margin:0;padding:.75rem 1rem .75rem 2rem;border-left:3px solid var(--azul-fill);font-size:.98rem;color:var(--muted)}
.chain .down{text-align:center;color:var(--muted);font-size:.9rem}
.fork{display:grid;gap:.75rem}
.fork .q{font-weight:800;font-size:1.15rem}
.fork .ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:.75rem}
.fork .way{padding:1rem;border-radius:12px;border:1px solid var(--line);display:grid;gap:.3rem}
.fork .way b{font-size:1rem}
.fork .way span{font-size:.95rem;color:var(--muted)}

.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem}
.case{padding:1.25rem;border-radius:12px;border-top:5px solid var(--c);background:var(--surface);border-left:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:.5rem;align-content:start}
.case h4{font-family:var(--f-display);font-size:1.3rem;font-weight:750}
.case p{font-size:.98rem;color:var(--muted)}
.case .then{font-weight:700;color:var(--fg);font-size:.98rem}

.offer{font-family:var(--f-display);font-size:clamp(1.6rem,4vw,2.6rem);font-weight:750;line-height:1.1;font-variation-settings:"wdth" 82;max-width:24ch}
.offer::before{content:"“";color:var(--accent)}.offer::after{content:"”";color:var(--accent)}
.ticks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:.5rem}
.ticks li{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem .9rem;border-radius:10px;background:var(--surface-2);font-weight:700;font-size:1rem}
.ticks li::before{content:"✓";color:var(--verde);font-weight:800}

.receipt{font-family:var(--f-mono);font-variant-numeric:tabular-nums;display:grid;gap:.5rem;max-width:30rem;padding:1.25rem 1.5rem;border-radius:4px;background:var(--surface);border:1px dashed var(--line);font-size:1rem}
.receipt div{display:flex;justify-content:space-between;gap:1rem}
.receipt .tot{border-top:2px solid var(--fg);padding-top:.5rem;font-weight:600}
.receipt .x{color:var(--accent)}

/* euro multiplicador */
.multi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem}
.coins{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;min-height:3rem}
.coin{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.95rem}
.coin.pub{background:var(--accent-fill);color:var(--on-accent)}
.coin.priv{background:var(--surface-2);border:2px solid var(--azul-fill);color:var(--azul)}

/* anillo */
.ringwrap{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,4vw,2.5rem);align-items:center}
#ring{width:100%;max-width:36rem;height:auto;display:block;margin-inline:auto;overflow:visible}
#ring .rn{cursor:pointer}
#ring .rn circle{fill:var(--surface);stroke:var(--line);stroke-width:2;transition:fill .3s,stroke .3s}
#ring .rn text{fill:var(--fg);font-family:var(--f-body);font-size:15px;font-weight:700;text-anchor:middle}
#ring .rn .rnum{font-family:var(--f-mono);font-size:22px;fill:var(--accent)}
@media (max-width:600px){#ring .rn .rlbl{display:none}#ring .rn .rnum{font-size:36px;transform:translateY(14px);transform-box:fill-box}#ring .ctr{font-size:20px}#ring .ctrbig{font-size:44px}}
#ring .rn.on circle{fill:var(--accent-fill);stroke:var(--accent-fill)}
#ring .rn.on text{fill:var(--on-accent)}
#ring .rn:focus{outline:none}
#ring .rn:focus-visible circle{stroke:var(--azul);stroke-width:4}
#ring .track{fill:none;stroke:var(--line);stroke-width:3;stroke-dasharray:2 10;stroke-linecap:round}
#ring .flowline{fill:none;stroke:var(--accent-fill);stroke-width:3;stroke-dasharray:30 1478;stroke-linecap:round;opacity:.85}
#ring .ctr{fill:var(--muted);font-family:var(--f-mono);font-size:13px;text-anchor:middle;letter-spacing:.1em}
#ring .ctrbig{fill:var(--fg);font-family:var(--f-display);font-size:34px;font-weight:800;text-anchor:middle}
.ring-side{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));align-items:start}
.ring-side > div:first-child,.ring-side > .ring-ctrl{grid-column:1/-1}
.ring-now{padding:1.4rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);display:grid;gap:.5rem;min-height:9rem}
.ring-now .n{font-family:var(--f-mono);color:var(--accent);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
.ring-now h3{font-size:1.6rem}
.ring-now p{color:var(--muted)}
.ring-list{list-style:none;margin:0;padding:0;display:grid;gap:.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));grid-column:1/-1}
.ring-list button{width:100%;text-align:left;display:flex;gap:.75rem;align-items:center;padding:.5rem .75rem;border-radius:10px;border:1px solid transparent;background:transparent;cursor:pointer;font-weight:700;font-size:1rem}
.ring-list button span{font-family:var(--f-mono);color:var(--muted);font-size:.85rem;width:1.6rem}
.ring-list button[aria-current="true"]{background:var(--surface);border-color:var(--accent-fill)}
.ring-ctrl{display:flex;gap:.5rem;flex-wrap:wrap}

/* quién gana */
.who-pick{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.who-pick button{padding:.6rem 1.1rem;min-height:2.75rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:700;font-size:1rem;transition:background .2s,border-color .2s}
.who-pick button:hover{border-color:var(--accent-fill)}
.who-pick button[aria-pressed="true"]{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.who-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;padding:clamp(1.25rem,3vw,2rem);border-radius:var(--r);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
@media (max-width:700px){.who-card{grid-template-columns:1fr}}
.who-card h3{grid-column:1/-1;font-size:clamp(1.6rem,3.6vw,2.3rem)}
.who-card .col{display:grid;gap:.4rem;align-content:start;padding:1rem;border-radius:12px;background:var(--surface-2)}
.who-card .col .lbl{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.who-card .col.get{background:color-mix(in srgb,var(--verde-fill) 14%,var(--surface))}
.who-card .col.get .lbl{color:var(--verde)}
.who-card .col p{font-size:1.15rem;font-weight:700}
.who-card .more{grid-column:1/-1;color:var(--muted)}
.who-card .more a{font-weight:700}
.tablebox{overflow-x:auto;margin-top:1.5rem;border-radius:var(--r);border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:38rem;background:var(--surface);font-size:1rem}
th,td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--surface-2)}
td:first-child{font-weight:700}
details.more-t summary{cursor:pointer;font-weight:700;margin-top:1.5rem;color:var(--azul);min-height:2.75rem;display:flex;align-items:center}

/* regla */
.rule{display:grid;gap:2.5rem}
.rule-q{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,5.4vw,4rem);line-height:1.05;font-variation-settings:"wdth" 78;max-width:22ch}
.rule-q em{font-style:normal;color:var(--accent)}
.ifthen{display:grid;gap:.5rem}
.ifthen div{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1rem;align-items:center;padding:1rem 1.25rem;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.ifthen div span:first-child{font-weight:700}
.ifthen div span:nth-child(2){color:var(--accent);font-weight:800;font-size:1.3rem}
.ifthen div span:last-child{color:var(--verde);font-weight:700}
@media (max-width:600px){.ifthen div{grid-template-columns:1fr;gap:.2rem}.ifthen div span:nth-child(2){transform:rotate(90deg);width:max-content}}
.motto{display:flex;flex-wrap:wrap;gap:.75rem 2rem;font-family:var(--f-display);font-weight:800;font-size:clamp(1.4rem,3vw,2rem);font-variation-settings:"wdth" 85}
.motto span:nth-child(2){color:var(--azul)}.motto span:nth-child(3){color:var(--verde)}

/* cuentas claras */
.honest{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem}
@media (max-width:760px){.honest{grid-template-columns:1fr}}
.honest .box p{color:var(--muted)}
.tax-list{display:flex;flex-wrap:wrap;gap:.4rem}
.tax-list span{font-family:var(--f-mono);font-size:.85rem;padding:.25rem .6rem;border-radius:6px;background:var(--surface-2)}
.open-q{margin:0;padding-left:1.2rem;display:grid;gap:.4rem;color:var(--muted)}

/* futuro */
.future{display:grid;gap:.75rem;justify-items:center;text-align:center}
.future .lvl{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;width:100%}
.future .lvl > div{flex:1 1 11rem;max-width:16rem;padding:1.1rem;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-weight:800;font-family:var(--f-display);font-size:1.2rem;font-variation-settings:"wdth" 85}
.future .lvl > div small{display:block;font-family:var(--f-body);font-weight:400;font-size:.9rem;color:var(--muted);margin-top:.25rem}
.future .one{padding:1rem 1.6rem;border-radius:999px;font-weight:800;font-family:var(--f-display);font-size:1.3rem;font-variation-settings:"wdth" 85}
.future .one.c{background:var(--surface-2)}
.future .one.a{background:var(--accent-fill);color:var(--on-accent)}
.future .one.g{background:var(--verde-fill);color:var(--on-accent)}
.future .dn{color:var(--muted);font-size:1.4rem;line-height:1}

/* glosario */
.gl-search{display:flex;gap:.75rem;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap}
.gl-search input{flex:1 1 16rem;min-height:3rem;padding:.6rem 1rem;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit}
.gl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:.75rem;margin:0}
.gl div{padding:1rem 1.2rem;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.gl dt{font-weight:800;font-family:var(--f-display);font-size:1.2rem;font-variation-settings:"wdth" 85;margin-bottom:.25rem}
.gl dd{margin:0;color:var(--muted);font-size:1rem}
.gl-empty{color:var(--muted)}

/* términos + popover */
.t{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:help;border-bottom:2px dotted var(--accent-fill);line-height:inherit}
.t:hover{background:color-mix(in srgb,var(--accent-fill) 18%,transparent)}
/* el botón del glosario con su signo detrás: el navegador puede partir línea justo después de un botón
   y dejaba «:» o «,» solos al principio de la línea siguiente; dentro del botón el texto sí puede partirse */
.tw{white-space:nowrap}
.tw .t{white-space:normal}
.pop{position:absolute;z-index:50;width:min(22rem,calc(100vw - 2rem));padding:1rem 1.1rem 1.1rem;border-radius:12px;background:var(--surface);color:var(--fg);border:1px solid var(--accent-fill);box-shadow:var(--shadow);display:grid;gap:.35rem}
.pop strong{font-family:var(--f-display);font-size:1.2rem;font-variation-settings:"wdth" 85;padding-right:2rem}
.pop p{font-size:1rem;color:var(--muted)}
.pop .x{position:absolute;top:.4rem;right:.4rem;width:2.5rem;height:2.5rem;border-radius:50%;border:0;background:transparent;cursor:pointer;font-size:1.3rem;color:var(--muted)}
@media (max-width:600px){.pop{position:fixed;left:1rem!important;right:1rem;top:auto!important;bottom:calc(1rem + env(safe-area-inset-bottom,0px));width:auto}}

/* final */
.final{position:relative;min-height:90vh;display:flex;align-items:center;padding-block:7rem;background:linear-gradient(var(--bg),transparent 22%)}
.final-in{display:grid;gap:1.75rem;max-width:56rem}
.final-txt{padding:clamp(1.1rem,3vw,1.75rem);border-radius:var(--r);background:color-mix(in srgb,var(--bg) 62%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.final h2{font-size:clamp(2.2rem,6.4vw,5rem);font-weight:800;font-variation-settings:"wdth" 78;text-shadow:var(--text-shadow)}
.final h2 em{font-style:normal;color:var(--accent)}
.final p{font-size:1.2rem;text-shadow:var(--text-shadow)}
.next{padding:1.4rem;border-radius:var(--r);background:var(--head);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);display:grid;gap:.6rem}
.next p{text-shadow:none;font-size:1.02rem;color:var(--muted)}
.next h3{font-size:1.3rem}
footer{position:relative;z-index:2;background:var(--bg);border-top:1px solid var(--line);padding-block:2rem;font-size:.92rem;color:var(--muted)}
footer .wrap{display:grid;gap:.75rem}
footer ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* =====================================================================
   v4 · navegación, escena, escala de color, interacciones, modo informe
   ===================================================================== */

/* --- anclas: el encabezado fijo nunca tapa el título --- */
[id]{scroll-margin-top:calc(4.75rem + env(safe-area-inset-top,0px))}

/* --- barra: capítulo + % leído + siguiente bloque --- */
.now{display:flex;align-items:baseline;gap:.6rem}
.now b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pct{flex:none;font-family:var(--f-mono);font-size:.8rem;color:var(--azul);white-space:nowrap}
.btn.nb{flex:none;min-width:2.75rem;padding-inline:.8rem;white-space:nowrap}
.btn.nb svg{width:1.1em;height:1.1em}
#openMenu{margin-left:0}
@media (max-width:440px){.now{display:flex!important;flex:0 0 auto;margin-left:auto;overflow:visible}.now b{display:none}.nb-txt{display:none}.btn.nb{padding-inline:0;width:2.75rem}}
@media (max-width:370px){.now{display:none!important}.bar-in{gap:.5rem}#nextBlock{margin-left:auto}}

/* --- índice agrupado --- */
#toc{display:grid;gap:.5rem}
.tg{border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.tg summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3rem;padding:.6rem 1rem;cursor:pointer;font-weight:700;list-style:none}
.tg summary::-webkit-details-marker{display:none}
.tg summary::after{content:"";width:.6rem;height:.6rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:.5rem;transition:transform .2s}
.tg[open] summary::after{transform:rotate(225deg)}
.tg-n{margin-left:auto;font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
.tg ol{list-style:none;margin:0;padding:0 .4rem .5rem;display:grid;gap:.1rem}
.menu ol a{min-height:2.75rem;align-items:center}
.menu ol a[aria-current="location"]{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--azul-fill)}

/* --- leyenda --- */
.legend-box{display:grid;gap:.5rem}
.lg-t{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lg{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:.95rem}
.lg li{display:flex;align-items:center;gap:.6rem}
.lg-c{width:.9rem;height:.9rem;border-radius:3px;flex:none}
.kind{display:inline-flex;align-items:center;padding:.05rem .45rem;border-radius:5px;font-family:var(--f-mono);font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;vertical-align:.12em;border:1px solid;white-space:nowrap;line-height:1.5}
.kd{color:var(--azul);border-color:color-mix(in srgb,var(--azul) 45%,transparent);background:color-mix(in srgb,var(--azul-fill) 10%,transparent)}
.ke{color:var(--muted);border-color:var(--line);background:var(--surface-2)}
.ks{color:var(--verde);border-color:color-mix(in srgb,var(--verde) 45%,transparent);background:color-mix(in srgb,var(--verde-fill) 10%,transparent)}
.legend-dock{position:fixed;left:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:25;max-width:17rem;border-radius:12px;background:var(--head);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);box-shadow:var(--shadow);font-size:.92rem}
.legend-dock summary{cursor:pointer;min-height:2.75rem;display:flex;align-items:center;padding:.4rem 1rem;font-weight:700}
.legend-dock[open] summary{border-bottom:1px solid var(--line)}
.legend-dock .legend-box{padding:.8rem 1rem 1rem}
@media (max-width:1199px){.legend-dock{display:none}}

/* --- minimapa --- */
.minimap{position:fixed;right:1rem;top:50%;transform:translateY(-50%);z-index:25;display:grid;gap:.15rem;opacity:0;pointer-events:none;transition:opacity .4s}
.minimap.on{opacity:1;pointer-events:auto}
.minimap a{position:relative;display:flex;align-items:center;justify-content:flex-end;width:2.75rem;height:1.6rem;text-decoration:none}
.minimap a i{width:.55rem;height:.55rem;border-radius:50%;background:var(--line);border:1px solid var(--muted);transition:transform .2s,background .2s}
.minimap a.ch i{width:.75rem;height:.75rem}
.minimap a[aria-current="location"] i{background:var(--azul-fill);border-color:var(--azul-fill);transform:scale(1.35)}
.minimap a span{position:absolute;right:2.6rem;white-space:nowrap;padding:.2rem .55rem;border-radius:6px;background:var(--surface);border:1px solid var(--line);color:var(--fg);font-size:.82rem;opacity:0;transform:translateX(6px);transition:opacity .2s,transform .2s;pointer-events:none}
.minimap a:hover span,.minimap a:focus-visible span{opacity:1;transform:none}
@media (max-width:1199px){.minimap{display:none}}

/* --- pantallas de tesis --- */
.thesis-num{display:grid;gap:.3rem;font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(3rem,10vw,6.5rem);line-height:.9;color:var(--azul);margin-bottom:1rem;font-variant-numeric:tabular-nums}
.thesis-num small{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-family:var(--f-body);font-weight:700;font-size:1rem;line-height:1.3;color:var(--fg);font-variation-settings:normal}
#problema ~ .interlude .thesis-num,.interlude:first-of-type .thesis-num{color:var(--azul)}
.interlude[aria-label="Idea clave: El problema"] .thesis-num{color:var(--rojo)}
@supports (animation-timeline: view()){
  html:not(.nomotion) .ghost{animation:ghostdrift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes ghostdrift{from{transform:translate3d(0,18vh,0)}to{transform:translate3d(0,-18vh,0)}}
}

/* --- salidas de capítulo --- */
.next-ch{position:relative;display:grid;gap:.2rem;margin-top:clamp(2.5rem,6vw,4rem);padding:1.25rem 3.5rem 1.25rem 1.4rem;border-radius:var(--r);border:1px solid var(--line);background:var(--surface-2);color:var(--fg);text-decoration:none;transition:border-color .2s,transform .2s}
.next-ch:hover{border-color:var(--accent-fill);transform:translateY(-2px)}
.nc-l{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--azul)}
.next-ch b{font-family:var(--f-display);font-size:clamp(1.3rem,3vw,1.7rem);font-variation-settings:"wdth" 85}
.nc-a{color:var(--muted);font-size:1rem}
.nc-i{position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);width:2.75rem;height:2.75rem;border-radius:50%;display:grid;place-items:center;background:var(--accent-fill);color:var(--on-accent);font-weight:800;font-size:1.2rem}

/* --- calculadoras --- */
.p-body,.box,#quien .wrap{container-type:inline-size}
.calc{grid-template-columns:1fr}
@container (min-width:40rem){.calc{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.calc-foot{display:flex;flex-wrap:wrap;gap:.5rem}
.btn.sm{min-height:2.75rem;padding:.4rem .9rem;font-size:.92rem}
.btn.ghost-btn{background:transparent;border-color:var(--azul);color:var(--azul)}
.how{border-top:1px dashed var(--line);padding-top:.6rem}
.how summary{cursor:pointer;min-height:2.75rem;display:flex;align-items:center;font-weight:700;color:var(--azul)}
.how .formula{font-family:var(--f-mono);font-size:.92rem;line-height:1.7;padding:.75rem 1rem;border-radius:10px;background:var(--surface-2);max-width:none;overflow-wrap:anywhere}
.how .not{font-size:.95rem;color:var(--muted);margin-top:.5rem}
input[type=range]{height:2.75rem}
input[type=range]::-webkit-slider-thumb{width:1.75rem;height:1.75rem;margin-top:-.55rem}
.switch{min-height:2.75rem;height:2.75rem;width:4rem;background-clip:content-box;padding:.375rem 0}
.switch::after{top:.575rem;left:.25rem}
.switch[aria-checked="true"]::after{transform:translateX(1.9rem)}
.pop .x{width:2.75rem;height:2.75rem}
.ring-list button{min-height:2.75rem}
.peek{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;display:flex;align-items:baseline;gap:.6rem;padding:.7rem 1.1rem;border-radius:999px;background:var(--fg);color:var(--bg);box-shadow:var(--shadow);font-weight:700;max-width:calc(100% - 2rem);white-space:nowrap}
.peek b{font-family:var(--f-display);font-size:1.4rem;font-variation-settings:"wdth" 85;color:inherit}
.toast{position:fixed;left:50%;top:calc(4.5rem + env(safe-area-inset-top,0px));transform:translate(-50%,-1rem);z-index:45;padding:.75rem 1.1rem;border-radius:12px;background:var(--fg);color:var(--bg);font-weight:700;font-size:.98rem;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;max-width:calc(100% - 2rem);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* --- comparativas con container queries --- */
.cols{grid-template-columns:1fr}
@container (min-width:36rem){.cols{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}}
.cmp article{grid-template-columns:1fr}
@container (min-width:46rem){.cmp article{grid-template-columns:minmax(0,13rem) minmax(0,1fr) minmax(0,1fr)}}
.guard{grid-template-columns:1fr}
@container (min-width:40rem){.guard{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
.cmp{container-type:inline-size}

/* --- anillo: tarjetas en móvil --- */
.ring-cards{display:none;list-style:none;margin:0;padding:0;gap:.6rem;counter-reset:rc}
.ring-cards li{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.2rem .8rem;padding:1rem;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.ring-cards li::before{counter-increment:rc;content:counter(rc);grid-row:span 2;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;background:var(--azul-fill);color:var(--on-accent);font-family:var(--f-mono);font-weight:600}
.ring-cards b{font-size:1.08rem}
.ring-cards span{color:var(--muted);font-size:.98rem}
.ring-cards li:last-child{border-color:var(--verde-fill)}
.ring-cards li:last-child::after{content:"↻ Y vuelve a empezar";grid-column:2;color:var(--verde);font-weight:700;font-size:.95rem}
@media (max-width:700px){.ring-cards{display:grid}.ringwrap{display:none}}

/* --- tabla: aviso de desplazamiento --- */
.swipe-hint{display:none;font-size:.9rem;color:var(--azul);margin-top:.75rem;font-weight:700}
@media (max-width:640px){.swipe-hint{display:block}}
.tablebox:focus-visible{outline:3px solid var(--accent-fill)}

/* --- ruta ¿Qué gano yo? --- */
.route{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
.route-step{display:grid;gap:.75rem}
.rs-h{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.15rem}
.rs-h span{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:var(--azul-fill);color:var(--on-accent);font-family:var(--f-mono);font-size:.95rem}
.route-step .who-pick{margin:0}
.who-card .pieces{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.6rem}
.who-card .pieces a{display:grid;gap:.2rem;padding:1rem;border-radius:12px;border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--fg);transition:border-color .2s}
.who-card .pieces a:hover{border-color:var(--accent-fill)}
.who-card .pieces small{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--azul)}
.who-card .pieces b{font-size:1.05rem}
.who-card .pieces span{color:var(--muted);font-size:.95rem}

/* --- menos cajas: paneles de lectura limpia --- */
.trade div{background:none;border:0;border-top:3px solid var(--azul-fill);border-radius:0;padding:1rem 0 0}
.risks{gap:0 2rem}
.risks > div{background:none;border:0;border-radius:0;border-bottom:1px solid var(--line);padding:1.1rem 0}
.gov-row div{background:none;border:0;border-left:3px solid var(--azul-fill);border-radius:0;padding:.3rem 0 .3rem 1rem}
.minute li{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:1.2rem 0 0}

/* --- escala de color estricta: amarillo acción, azul información, verde favorable, rojo riesgo --- */
.eyebrow,.hero .eyebrow,.chap,.pname,.p-num,.essence .lbl,.road .when,.hero-meta b,.ring-now .n,.criteria em,.fact .n,.receipt .x{color:var(--azul)}
.chap::before{background:var(--azul-fill)}
.hero h1 .glow{color:var(--verde)}
.stat-num{color:var(--rojo)}
.essence{background:color-mix(in srgb,var(--azul-fill) var(--ess),var(--surface));border-color:color-mix(in srgb,var(--azul-fill) 40%,var(--line))}
.slogan{border-left-color:var(--azul-fill)}
.idea-quote mark{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--azul-fill) 35%,transparent) 62%)}
.interlude blockquote p em,.rule-q em,.final h2 em{color:var(--verde)}
.ifthen div span:nth-child(2){color:var(--azul)}
.t-root{background:var(--azul-fill);color:var(--on-accent);box-shadow:0 0 40px -10px var(--azul-fill)}
.t-br{--c:var(--azul-fill)!important}
.t-leaf::after{color:var(--azul)}
.future .one.a{background:var(--azul-fill)}
.coin.pub{background:var(--azul-fill)}
.chain .prop{background:var(--azul-fill)}
.chain .estado{background:var(--surface-2);color:var(--fg);border:2px solid var(--azul-fill)}
#ring .rn.on circle{fill:var(--azul-fill);stroke:var(--azul-fill)}
#ring .rn .rnum{fill:var(--azul)}
#ring .flowline{stroke:var(--verde-fill)}
.progress{background:var(--azul-fill);box-shadow:0 0 12px var(--azul-fill)}
.pbar-f{background:var(--rojo-fill);color:var(--on-accent)}
.applied .pbar-f{background:var(--verde-fill)}
.case[style*="accent-fill"]{--c:var(--gris-fill)!important}

/* --- modo informe y vista de impresión --- */
.report #city,.report .grain,.report .minimap,.report .legend-dock,.report .scrollcue,.report .ghost,.report .hero-cta,.report .hero-note,.report .calc-foot,.report .ring-ctrl,.report .howto,.report #nextBlock,.report .next-ch .nc-i{display:none!important}
.report .interlude{min-height:0;padding-block:3rem;background:var(--surface-2)}
.report .interlude blockquote{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}
.report .hero{min-height:0;background:var(--bg)}
.report .final{min-height:0;background:var(--bg)}
.report .final-txt,.report .next{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
.report *{animation:none!important;transition:none!important}
.report .rv{transform:none!important}
.report .panel{content-visibility:visible}
@media print{
  #city,.grain,.minimap,.legend-dock,.scrollcue,.ghost,.bar,.skip,.hero-cta,.hero-note,.calc-foot,.ring-ctrl,.howto,.next-ch .nc-i,.toast,.peek,.pop,.who-pick,dialog{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .panel{content-visibility:visible;padding-block:1.5rem;break-inside:auto}
  .interlude,.hero,.final{min-height:0;padding-block:1.5rem;background:none}
  .interlude blockquote,.final-txt,.next{background:none;backdrop-filter:none;box-shadow:none;padding:0}
  .piece,.box,.risks > div,.cmp article,.viab article{break-inside:avoid}
  .detail{display:grid!important}
  details.how,details.more-t{display:block}
  *{animation:none!important;transition:none!important;text-shadow:none!important}
  .rv{transform:none!important}
  a{color:inherit}
  footer a::after{content:" (" attr(href) ")";font-size:.8em}
}

@media (max-width:440px){.pct-w{display:none}}
.box{align-content:start}
.flow .arrow{color:var(--azul)}
.road li::before{background:var(--azul-fill);box-shadow:0 0 0 4px color-mix(in srgb,var(--azul-fill) 25%,transparent)}
.minute li::before{background:var(--azul-fill);color:var(--on-accent)}

.cv-off .panel{content-visibility:visible}
@media (max-width:370px){.brand{font-size:1.1rem}#openMenu{width:2.75rem;padding:0}#openMenu > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:700px){.panel{contain-intrinsic-size:auto 3200px}}
@media (min-width:701px){.panel{contain-intrinsic-size:auto 1900px}}

/* pasos numerados (Licencia Vía 90) */
.steps{list-style:none;margin:0;padding:0;counter-reset:st;display:grid;gap:0}
.steps li{position:relative;display:grid;gap:.25rem;padding:0 0 1.4rem 3.4rem;min-width:0}
.steps li::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:-.1rem;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;background:var(--azul-fill);color:var(--on-accent);font-family:var(--f-mono);font-weight:600}
.steps li::after{content:"";position:absolute;left:1.15rem;top:2.5rem;bottom:.2rem;width:2px;background:var(--line)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps li.ok::before{background:var(--verde-fill)}
.steps b{font-size:1.1rem}
.steps span{color:var(--muted);font-size:1rem}
.steps .checks{margin-top:.2rem}
.steps-note{padding:1rem 1.2rem;border-radius:12px;background:var(--surface-2);border-left:4px solid var(--azul-fill);font-size:1rem;max-width:none}
/* el trato (Fiscalidad Espejo) */
.deal{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1rem;align-items:stretch}
.deal-col{display:grid;gap:.75rem;align-content:start;padding:1.25rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.deal-col.get{border-color:var(--verde-fill);background:color-mix(in srgb,var(--verde-fill) 9%,var(--surface))}
.deal-h{font-weight:800;font-size:1.1rem}
.deal ol,.deal ul{margin:0;padding:0;list-style:none;display:grid;gap:.7rem;counter-reset:dl}
.deal li{display:grid;gap:.1rem;padding-left:2.2rem;position:relative}
.deal ol li::before{counter-increment:dl;content:counter(dl);position:absolute;left:0;top:0;width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;background:var(--azul-fill);color:var(--on-accent);font-size:.85rem;font-weight:700}
.deal ul li::before{content:"✓";position:absolute;left:.3rem;top:0;color:var(--verde);font-weight:800}
.deal li span{color:var(--muted);font-size:.95rem}
.deal-mid{display:grid;place-items:center}
.deal-mid span{padding:.4rem .8rem;border-radius:999px;background:var(--azul-fill);color:var(--on-accent);font-weight:700;font-size:.9rem;white-space:nowrap}
@media (max-width:760px){.deal{grid-template-columns:1fr}.deal-mid{padding:0}}
.vat{display:grid;gap:.9rem}
.vat > div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem;align-items:center}
.vat-l{grid-column:1/-1;font-size:.98rem;color:var(--muted)}
.vat-bar{height:1.6rem;border-radius:8px;background:var(--surface-2);overflow:hidden}
.vat-bar i{display:block;height:100%;border-radius:8px}
.vat b{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:1.05rem}
.vat-save{font-size:1.1rem}
.vat-save b{color:var(--verde)}

/* garantía: dos meses */
.months{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem}
.month{display:grid;gap:1rem;align-content:start;padding:1.25rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.month.bad{border-color:color-mix(in srgb,var(--rojo-fill) 55%,var(--line))}
.month-h{font-weight:800;font-size:1.1rem}
.month.bad .month-h{color:var(--rojo)}

/* Alquiler Hucha: menos controles, una meta clara */
.calc-ctx{font-size:1rem;color:var(--muted);max-width:none}
.seg-radio{border:0;margin:0;padding:0;display:grid;gap:.5rem;min-width:0}
.seg-radio legend{font-weight:700;font-size:1rem;padding:0;margin-bottom:.5rem}
.seg-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;overflow:hidden}
.seg-opts input{position:absolute;opacity:0;width:1px;height:1px}
.seg-opts label{display:grid;place-items:center;min-height:2.9rem;font-weight:700;cursor:pointer;background:var(--surface);border-left:1px solid var(--line);font-family:var(--f-mono)}
.seg-opts label:first-of-type{border-left:0}
.seg-opts input:checked + label{background:var(--accent-fill);color:var(--on-accent)}
.seg-opts input:focus-visible + label{outline:3px solid var(--azul-fill);outline-offset:-3px}
.pay-line{display:grid;gap:.5rem}
.pay-line p{font-size:1rem}
.goal{display:grid;gap:.4rem;padding-right:2.2rem}
.goal-track{position:relative;height:1.1rem;border-radius:999px;background:var(--surface)}
.goal-track i{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--verde-fill);transition:width .5s}
.goal-mk{position:absolute;top:-.3rem;bottom:-.3rem;width:3px;margin-left:-1.5px;background:var(--fg);border-radius:2px}
.goal-lbl{position:relative;height:2.6rem;font-size:.8rem;color:var(--muted)}
.goal-lbl span{position:absolute;top:0;transform:translateX(-50%);text-align:center;white-space:nowrap;line-height:1.25}
.goal-lbl span:last-child{transform:translateX(-85%)}
.goal-lbl b{color:var(--fg);font-family:var(--f-mono)}
.goal-txt{font-size:1.02rem;max-width:none}
.range-ends{display:flex;justify-content:space-between;gap:1rem;font-size:.8rem;color:var(--muted);line-height:1.3;margin-top:-.4rem}
.range-ends span:last-child{text-align:right}

/* mismo dinero, dos usos */
.lever-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem}
.lever-col{display:grid;gap:.6rem;align-content:start;padding:1.1rem 1.2rem;border-radius:12px;background:var(--surface-2)}
.lever-col.good{background:color-mix(in srgb,var(--verde-fill) 12%,var(--surface));border:1px solid var(--verde-fill)}
.lever-h{font-weight:800;font-size:1.05rem}
.lever-calc{margin:0;padding-left:1.3rem;display:grid;gap:.45rem;font-size:1rem}
.lever-calc li::marker{color:var(--azul);font-weight:700}
.lever-bars{display:grid;gap:.6rem}
.lever-bars > div{display:grid;grid-template-columns:7.5rem minmax(0,1fr) 3.5rem;gap:.75rem;align-items:center}
.lever-bars span{font-weight:700;font-size:.95rem}
.lb{height:1.4rem;border-radius:6px;background:var(--surface-2);overflow:hidden}
.lb i{display:block;height:100%;border-radius:6px;min-width:4px}
.lever-bars b{font-family:var(--f-mono);text-align:right}
@media (max-width:420px){.lever-bars > div{grid-template-columns:1fr 3.5rem}.lever-bars .lb{grid-column:1/-1;grid-row:2}}
.kv div b{white-space:nowrap}
.t-br h3 small{display:block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--azul);font-weight:600;margin-bottom:.2rem}
.t-root{max-width:40rem}
.t-leaf::after{content:"Ver cómo funciona →"}

.t-base{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem;width:100%;max-width:52rem;--c:var(--azul-fill)}
.t-out{width:100%}
/* columna acotada: con tres hojas en la base, la rejilla automática calculaba su ancho mínimo para tres columnas
   aunque solo cupiera una, y a 320 px con letra grande el árbol entero se salía de la pantalla */
.tree,.t-out{grid-template-columns:minmax(0,1fr)}
.share{display:flex;flex-wrap:wrap;gap:.6rem}
.share .btn{min-width:7.5rem;justify-content:center}
.share-url{margin-top:1rem;font-size:.95rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:baseline;max-width:none}
.share-url code{font-family:var(--f-mono);font-size:.9rem;color:var(--fg);background:var(--surface);border:1px solid var(--line);padding:.2rem .5rem;border-radius:6px;overflow-wrap:anywhere;user-select:all}
.report .share{display:flex}
@media print{#compartir,#clearPrefs{display:none}footer a[href^="#"]::after{content:none}}
.priv{margin-top:1.5rem}
.priv h3{font-size:1.3rem}

/* =====================================================================
   v6 · tipografía: líneas llenas y párrafos justificados
   ===================================================================== */
/* «pretty» llena cada línea y solo evita dejar una palabra sola al final. Con «balance» las líneas salían
   iguales pero cortas, y los títulos parecían saltar de línea teniendo hueco libre. */
h1,h2,h3,h4,.interlude blockquote p,.rule-q,.chap,p{text-wrap:pretty}
.rule-q{max-width:none}
/* Justificado con guiones solo donde la línea es larga. En móvil y con «Letra muy grande» la línea es corta,
   y justificar abre huecos entre palabras que cuestan de leer, sobre todo con dislexia o baja visión:
   ahí el texto sigue alineado a la izquierda. */
@media (min-width:900px){
  html:not([data-size="2"]) :is(.lead,.hero-for,.sec-head > p:not(.chap),.essence p,.detail > p:not(.slogan),.box > p:not(.note):not(.vat-save),.why p,.free-note,.steps-note,.final-txt,.next > p,footer p){text-align:justify;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:7 3 3}
}
.free-note{margin-top:1.25rem;padding:1rem 1.25rem;border-radius:12px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--verde-fill);font-size:1.02rem;max-width:none}

/* =====================================================================
   v5 · maquetación: una sola columna de lectura, bloques alineados
   ===================================================================== */
/* Columna de lectura de cada medida: 52rem, igual que la cabecera de sección.
   Las medidas se desplazan a la izquierda en pantallas anchas para que el texto
   quede alineado con la cabecera y el número ocupe el margen. */
.piece{grid-template-columns:5.5rem minmax(0,52rem);gap:2.5rem;border-top:0;position:relative}
.piece + .piece::before{content:"";position:absolute;top:0;left:8rem;right:0;height:1px;background:var(--line)}
.p-body{max-width:52rem}
@media (min-width:1340px){.piece{margin-left:-8rem}}
@media (max-width:640px){.piece{grid-template-columns:1fr;gap:1rem}.piece + .piece::before{left:0}}
/* Los párrafos ocupan toda la anchura de su bloque */
.p-body p,.box p,.detail p,.essence p,.result p,.sec-head p,.who-card p,.cmp p,.risks p,.viab p,.gov p,.month p,.lever p,.steps-note,.free-note,.calc-ctx,.goal-txt,.vat-save,.stat-cap,.pay-line p,.idea p,.trade p,.why p,.next-ch,.honest p{max-width:none}
.sec-head{max-width:52rem}
/* Tarjetas en fila: misma altura y última línea alineada abajo */
.case{align-content:stretch;grid-template-rows:auto 1fr auto}
.opt{align-content:stretch;grid-template-rows:auto auto 1fr}
.opt p{align-self:start}
.viab article{align-content:stretch;grid-template-rows:auto auto 1fr}
.risks > div{align-content:stretch;grid-template-rows:auto 1fr auto}
.minute li{align-content:stretch;grid-template-rows:auto auto 1fr}
.who-card .pieces a{align-content:stretch;grid-template-rows:auto auto 1fr}
.t-leaf{align-content:stretch;grid-template-rows:auto 1fr auto}
.cmp article > div{display:grid;grid-template-rows:auto 1fr}
.month{grid-template-rows:auto 1fr}
.lever-col{grid-template-rows:auto 1fr}
.deal-col{grid-template-rows:auto 1fr}
.gov-row div{align-content:start}
/* Objetivos: las filas se alinean entre columnas (subgrid) */
@supports (grid-template-rows: subgrid){
  @media (min-width:561px){
    .t-branches{grid-auto-rows:auto}
    .t-br{grid-row:span 5;grid-template-rows:subgrid;align-content:start}
    .t-br h3{align-self:stretch;display:grid;align-content:center}
  }
}
.t-base .t-leaf{min-height:100%}
/* Chips y etiquetas: misma altura */
.chip{min-height:2rem;align-items:center}
.wins{align-items:center;row-gap:.5rem}
.pill-row{row-gap:.5rem}

/* =====================================================================
   v5 · cinematografía: revelados guiados por el scroll, barra de tres actos
   ===================================================================== */
/* Barra de progreso: noche (azul) → construcción (ámbar) → amanecer (verde) */
.progress{transform:none;clip-path:inset(0 100% 0 0);background:linear-gradient(90deg,var(--azul-fill) 0%,var(--azul-fill) 30%,var(--accent-fill) 55%,var(--verde-fill) 100%);box-shadow:none}
/* Secuencia de entrada de la portada (solo transform y desenfoque; el texto es legible en todo momento) */
.hero .eyebrow,.hero-meta,.lead,.hero-cta,.hero-for,.hero-note,.hero-aviso{animation:intro .9s cubic-bezier(.2,.7,.2,1) both}
.hero .eyebrow{animation-delay:.05s}.hero-meta{animation-delay:.18s}.lead{animation-delay:.5s}.hero-cta{animation-delay:.64s}.hero-for{animation-delay:.76s}.hero-note{animation-delay:.88s}.hero-aviso{animation-delay:.94s}
@keyframes intro{from{transform:translateY(16px);filter:blur(5px)}to{transform:none;filter:blur(0)}}
.nomotion .hero .eyebrow,.nomotion .hero-meta,.nomotion .lead,.nomotion .hero-cta,.nomotion .hero-for,.nomotion .hero-note,.nomotion .hero-aviso{animation:none}
/* Revelados ligados a la posición de scroll, sin JavaScript, donde el navegador lo admite */
@keyframes rise{from{transform:translateY(28px)}to{transform:none}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
@keyframes grow{from{transform:scaleX(.6);transform-origin:0 50%}to{transform:none;transform-origin:0 50%}}
@supports (animation-timeline: view()){
  .js .rv{transform:none;transition:none}
  html:not(.nomotion) .sec-head{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  html:not(.nomotion) .interlude blockquote p{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  html:not(.nomotion) .thesis-num{animation:wipe linear both;animation-timeline:view();animation-range:entry 5% entry 55%}
  html:not(.nomotion) .next-ch{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  html:not(.nomotion) .range-f,html:not(.nomotion) .lb i,html:not(.nomotion) .vat-bar i,html:not(.nomotion) .cb-f{animation:grow linear both;animation-timeline:view();animation-range:entry 20% entry 70%}
  html:not(.nomotion) .t-root{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
}
.interlude{background:linear-gradient(var(--bg),transparent 16%,transparent 84%,var(--bg)),radial-gradient(120% 90% at 50% 50%,transparent 55%,color-mix(in srgb,var(--bg) 55%,transparent) 100%)}
.steps,.steps li,.month .steps{align-content:start}
.month{align-content:start}

/* =====================================================================
   v6 · bloque de control y antifraude
   ===================================================================== */
.shield{display:grid;gap:1rem;padding:clamp(1.1rem,3vw,1.6rem);border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line);border-left:4px solid var(--azul-fill)}
.shield-h{display:flex;align-items:center;gap:.6rem;font-family:var(--f-mono);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--azul);font-weight:600;max-width:none}
.shield-h svg{width:1.3rem;height:1.3rem;flex:none}
.shield-grid{display:grid;gap:.9rem}
.shield-grid > div{display:grid;gap:.25rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.shield-grid > div:last-child{padding-bottom:0;border-bottom:0}
.g-risk{font-weight:700;font-size:1.02rem;max-width:none}
.g-risk::before{content:"Riesgo: ";color:var(--rojo);font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.g-fix{color:var(--muted);font-size:1rem;max-width:none}
.g-fix::before{content:"Control: ";color:var(--verde);font-weight:700;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
@supports (grid-template-rows: subgrid){
  @container (min-width:44rem){
    .shield-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.75rem;grid-auto-rows:auto}
    .shield-grid > div{grid-row:span 2;grid-template-rows:subgrid;padding:0 0 .9rem;border-bottom:1px solid var(--line)}
    .shield-grid > div:nth-last-child(-n+2){padding-bottom:0}
    .shield-grid > div:nth-last-child(-n+2):nth-child(odd),
    .shield-grid > div:nth-last-child(-n+2):nth-child(odd) + div{border-bottom:0}
    .shield-grid > div{padding-top:.9rem}
    .shield-grid > div:nth-child(-n+2){padding-top:0}
  }
}
@supports not (grid-template-rows: subgrid){
  @container (min-width:44rem){.shield-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.75rem}}
}
.essential .shield{display:none}
/* sección «Cómo se controla» */
.ctrl-list{list-style:none;margin:0;padding:0;counter-reset:cl;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem}
.ctrl-list li{display:grid;gap:.4rem;align-content:start;grid-template-rows:auto auto 1fr;padding:1.3rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.ctrl-list li::before{counter-increment:cl;content:counter(cl);width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;background:var(--azul-fill);color:var(--on-accent);font-family:var(--f-mono);font-weight:600}
.ctrl-list h3{font-size:1.2rem}
.ctrl-list p{color:var(--muted);font-size:1rem;max-width:none}
#control .steps-note{margin-top:1.25rem}
b.tag{color:var(--accent);white-space:nowrap}

/* Revisión editorial: anchuras, sangrías y alineación entre tarjetas. */
.road p,.final-txt,.next p,footer p{max-width:none}
.g-risk,.g-fix{display:grid;grid-template-columns:4.7rem minmax(0,1fr);column-gap:.55rem;align-items:baseline}
.g-risk::before,.g-fix::before{content:none}
.g-label{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:400}
.g-risk .g-label{color:var(--rojo)}
.g-fix .g-label{color:var(--verde)}
.g-copy{min-width:0}
.shield{container-type:inline-size}
.shield-grid > div{align-content:start;row-gap:.45rem}
.chap::before,.chip::before,.rs-h > span,.btn svg,.tg summary::after{flex-shrink:0}
.btn{text-align:center;line-height:1.35}
.field label,.kv div{align-items:baseline}
.field label{flex-wrap:wrap;row-gap:.25rem}
.field label output{margin-inline-start:auto}
input[type=range]{margin-inline:0;min-width:0}
.lg li{align-items:baseline}
.lg .kind{flex-shrink:0}
.gl-search input{min-width:0}
.peek{white-space:normal;flex-wrap:wrap;justify-content:center;text-align:center;border-radius:14px}
.peek b{white-space:nowrap}
.toast,.peek{width:max-content}
.nomotion .pbar-save{transition:none}
.share-url code{min-width:0;max-width:100%}
@container (max-width:28rem){
  /* Las cifras ya figuran en el resultado: las franjas conservan la proporción. */
  .stack{height:.85rem!important}
  .stack i{font-size:0}
  .pbar{height:5.2rem;background:none;overflow:visible}
  .pbar::before{content:"";position:absolute;inset:0 0 auto;height:3rem;border-radius:10px;background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--verde-fill) 30%,transparent) 0 8px,transparent 8px 16px),var(--surface-2)}
  .pbar-f{bottom:auto;height:3rem}
  .pbar-save{top:3.5rem;right:0;transform:none;font-size:.95rem}
}
@container (max-width:20rem){
  .g-risk,.g-fix{grid-template-columns:minmax(0,1fr);row-gap:.1rem}
}
@supports (grid-template-rows:subgrid){
  .ctrl-list li{grid-row:span 3;grid-template-rows:subgrid}
  .trade > div{grid-row:span 2;grid-template-rows:subgrid}
  @media (min-width:640px){
    .minute li,.viab article{grid-row:span 3;grid-template-rows:subgrid}
  }
  @media (min-width:980px){
    .road li{grid-row:span 3;grid-template-rows:subgrid}
  }
}
@media (max-width:440px){
  .g-risk,.g-fix{column-gap:.4rem}
  .g-label{font-size:.72rem;letter-spacing:.04em}
  .bar-in{flex-wrap:wrap;padding-block:.35rem}
  #openMenu{margin-inline-start:auto}
  .shield-h{letter-spacing:.08em}
}