:root{--bg:#06110D;--bg2:#0B1A14;--surface:#10241B;--line:#1F3B2E;--line2:#2F5A46;--acc:#3DDC97;--acc2:#A8F0C6;--amber:#F5B84B;--text:#EAF2EE;--soft:#C5D6CD;--muted:#8FA59B;--ink:#06110D;--neutral:#4A6358;--neutral2:#6E8A7D;--dot:#4A6358;--cat1:#27A871;--cat2:#3F9FD6;--cat3:#C4851E;--asis:#7FD0FF;--shade1:rgba(6,17,13,.94);--shade2:rgba(6,17,13,.72);--shade3:rgba(6,17,13,.25);--hudbg:rgba(6,17,13,.86)}
@font-face{font-family:Outfit;src:url(fonts/outfit-variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-600.woff2) format("woff2");font-weight:600 700;font-display:swap}

/* Todo se mide en rem: 1rem = 10px en un lienzo de 1600×900 y escala con la pantalla */
html{font-size:min(.625vw,1.1111vh);background:var(--bg);color:var(--text);font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-snap-type:y mandatory;-webkit-text-size-adjust:100%}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);overflow-x:hidden;font-size:2.3rem;line-height:1.4}
h1,h2,h3,.big{font-family:Outfit,system-ui,sans-serif;letter-spacing:-.025em}
h1{font-size:15rem;font-weight:700;line-height:.95}
h2{font-size:5.8rem;font-weight:700;line-height:1.06;text-wrap:balance}
h3{font-size:3rem;font-weight:650;line-height:1.15}
p{font-size:2.3rem;line-height:1.4}
b,strong{font-weight:600}
a{color:inherit}
.acc{color:var(--acc)}
.mute{color:var(--muted)}
.nb{white-space:nowrap}
.lead{font-size:3rem;line-height:1.32;color:var(--soft);max-width:112rem}
.eyebrow{font-size:1.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);display:flex;align-items:center;gap:1.4rem}
.eyebrow::before{content:"";width:3.4rem;height:.2rem;background:currentColor;opacity:.8}
.src{position:absolute;left:7rem;right:7rem;bottom:2.1rem;font-size:1.5rem;line-height:1.35;color:var(--muted)}
.small{font-size:2.05rem;line-height:1.35;color:var(--soft);max-width:86rem}
.grid.small{max-width:none}
:focus-visible{outline:.2rem solid var(--acc);outline-offset:.3rem;border-radius:.6rem}

.s{position:relative;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;scroll-snap-align:start;overflow:hidden;background:var(--bg)}
.s.deep{background:var(--bg2)}
.stage{position:relative;width:160rem;height:90rem;padding:7.2rem 7rem 7rem;display:flex;flex-direction:column;gap:2.8rem}
.head{display:flex;flex-direction:column;gap:1.4rem}
.body{flex:1;min-height:0;display:flex;flex-direction:column;gap:2.4rem;justify-content:space-between}

/* Revelado */
.r{opacity:0;transform:translateY(2.4rem);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0)*90ms)}
.s.in .r{opacity:1;transform:none}

/* Fondos de vídeo */
.bgv{position:absolute;inset:0;overflow:hidden;background-size:cover;background-position:center}
.bgv video{width:100%;height:100%;object-fit:cover;display:block}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,var(--shade1) 0,transparent 13rem),linear-gradient(0deg,var(--shade1) 0,transparent 9rem),linear-gradient(90deg,var(--shade1) 0%,var(--shade2) 48%,var(--shade3) 100%)}
.shade.heavy{background:linear-gradient(180deg,var(--shade1) 0,transparent 13rem),linear-gradient(0deg,var(--shade1) 0,transparent 9rem),linear-gradient(90deg,var(--shade1) 0%,var(--shade1) 66%,var(--shade3) 100%)}
.shade.full{background:linear-gradient(180deg,var(--shade2),var(--shade1))}

/* Interfaz fija */
.hud{position:fixed;z-index:50;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:2rem 7rem;pointer-events:none;font-family:Outfit;font-size:1.6rem;text-shadow:0 .1rem 1.2rem rgba(0,0,0,.7)}
.hud .t{font-weight:700;font-size:1.9rem;letter-spacing:-.01em}
.hud .t i{color:var(--acc);font-style:normal}
.hud .n{display:flex;gap:2rem;font-variant-numeric:tabular-nums;color:var(--soft)}
.bar{position:fixed;z-index:51;left:0;bottom:0;height:.3rem;width:100%;background:var(--acc);transform-origin:left;transform:scaleX(0);transition:transform .5s ease}
.dots{display:none}
.dots a{display:block;width:.8rem;height:.8rem;border-radius:50%;background:var(--dot);transition:height .3s,background .3s}
.dots a.on{background:var(--acc);height:2.2rem;border-radius:.5rem}
.keys{position:fixed;z-index:50;right:7rem;bottom:2rem;font-size:1.4rem;color:var(--muted);pointer-events:none;transition:opacity .6s}

/* Tarjetas y rejillas */
.grid{display:grid;gap:2.2rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4.4rem;align-items:stretch;flex:1;min-height:0}
.split.wide{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:1.8rem;padding:2.8rem;display:flex;flex-direction:column;gap:1.2rem}
.card .k{font-size:1.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--acc2)}
.card p{color:var(--soft);font-size:2.25rem;line-height:1.36}
.big{display:block;font-size:9.4rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.big small{font-size:.5em;font-weight:600;margin-left:.1em}
.col{display:flex;flex-direction:column;gap:2rem;min-height:0}
.fill{flex:1}

/* Etiquetas de estado */
.tag{display:inline-flex;align-items:center;align-self:flex-start;font-size:1.6rem;font-weight:600;padding:.4rem 1.2rem;border-radius:99rem;border:1px solid var(--line2);color:var(--acc2);white-space:nowrap}
.tag.hip{color:var(--amber);border-color:var(--amber)}
.tag.dev{color:var(--soft);border-color:var(--muted)}

/* Tablas */
table{width:100%;border-collapse:collapse;font-size:2.2rem;line-height:1.34}
th{font-family:Outfit;font-weight:600;font-size:1.75rem;letter-spacing:.04em;text-align:left;color:var(--muted);padding:0 1.6rem 1.1rem;border-bottom:1px solid var(--line2);vertical-align:bottom}
td{padding:1.35rem 1.6rem;border-bottom:1px solid var(--line);vertical-align:top;color:var(--soft)}
td:first-child,th:first-child{padding-left:0}
td:last-child,th:last-child{padding-right:0}
td b,td strong{color:var(--text)}
tr:last-child td{border-bottom:none}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.hl td{color:var(--text);font-weight:600}
.scroll{overflow-x:auto}

/* Barras horizontales etiquetadas */
.hb{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.2rem 1.8rem;align-items:center;font-size:2.2rem}
.hb .lb{color:var(--soft);white-space:nowrap}
.hb .tr{height:2.6rem;display:flex;align-items:center}
.hb i{display:block;height:100%;border-radius:0 .4rem .4rem 0;background:var(--neutral);width:calc(var(--w)*1%);transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*70ms + 250ms)}
.s.in .hb i{transform:scaleX(1)}
.hb i.on{background:var(--acc)}
.hb .v{font-family:Outfit;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Barra apilada de un euro */
.euro{display:flex;gap:.3rem;height:14rem}
.euro div{flex:var(--f) 1 0;display:flex;align-items:center;justify-content:center;font-family:Outfit;font-weight:700;font-size:4rem;color:var(--ink);background:var(--neutral);transform-origin:left;transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*120ms + 200ms)}
.s.in .euro div{transform:scaleX(1)}
.euro div:first-child{border-radius:.4rem 0 0 .4rem}
.euro div:last-child{border-radius:0 .4rem .4rem 0;background:var(--acc)}
.euro .t2{background:var(--neutral2)}

/* Columnas apiladas por año */
.vb{display:flex;align-items:flex-end;justify-content:space-around;gap:3.2rem;height:34rem;border-bottom:1px solid var(--line2)}
.vb .c{flex:1;max-width:13rem;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:.2rem;height:100%}
.vb .c b{font-family:Outfit;font-size:2.5rem;text-align:center;font-variant-numeric:tabular-nums;margin-bottom:.8rem}
.vb .sg{height:calc(var(--h)*1%);transform-origin:bottom;transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:.25s}
.vb .sg:first-of-type{border-radius:.4rem .4rem 0 0}
.s.in .vb .sg{transform:scaleY(1)}
.vl{display:flex;justify-content:space-around;gap:3.2rem;margin-top:1rem;color:var(--soft);font-size:2.1rem}
.vl span{flex:1;max-width:13rem;text-align:center}
.cat1{background:var(--cat1)}.cat2{background:var(--cat2)}.cat3{background:var(--cat3)}
.leg{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;font-size:2rem;color:var(--soft)}
.leg span{display:flex;align-items:center;gap:.8rem}
.leg i{width:1.4rem;height:1.4rem;border-radius:.3rem;display:block}

/* Flujos */
.flow{display:flex;align-items:stretch;gap:1rem}
.flow .st{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:1.6rem;padding:2.2rem 2.2rem;display:flex;flex-direction:column;gap:.7rem}
.flow .st b{font-family:Outfit;font-size:2.7rem;line-height:1.15}
.flow .st span{font-size:2rem;line-height:1.35;color:var(--soft)}
.flow .ar{align-self:center;color:var(--acc);font-family:Outfit;font-size:2.6rem;flex:none}

/* Calculadoras */
.calc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:4rem;flex:1;min-height:0}
.ctl{display:flex;flex-direction:column;gap:2.4rem}
.ctl label{display:flex;flex-direction:column;gap:.9rem;font-size:2.2rem;color:var(--soft)}
.ctl label span{display:flex;justify-content:space-between;gap:1rem}
.ctl output{font-family:Outfit;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;height:3rem;accent-color:var(--acc);cursor:pointer}
select{font:inherit;font-size:2.2rem;color:var(--text);background:var(--surface);border:1px solid var(--line2);border-radius:1rem;padding:1.1rem 1.4rem;cursor:pointer}
select option{background:var(--bg2);color:var(--text)}
.res{display:flex;flex-direction:column;gap:1.6rem}
.res .big{font-size:12rem}
.statuses{display:flex;flex-direction:column;gap:1.2rem}

@media (max-width:899px),(orientation:portrait){
  html{font-size:8px;scroll-snap-type:none}
  h1{font-size:8rem}
  h2{font-size:3.6rem}
  .s{height:auto;min-height:100svh;align-items:stretch}
  .stage{width:100%;height:auto;padding:7rem 2.2rem 8rem}
  .src{position:static;margin-top:1.6rem}
  .g2,.g3,.g4,.split,.split.wide,.calc{grid-template-columns:minmax(0,1fr)}
  .flow{flex-direction:column}
  .flow .ar{transform:rotate(90deg)}
  .hud{padding:1.4rem 2.2rem;background:var(--hudbg)}
  .dots,.keys{display:none}
  .tag{white-space:normal;max-width:100%}
  .hb .lb{white-space:normal}
  h1{font-size:8rem!important}
  .shade,.shade.heavy{background:linear-gradient(180deg,var(--shade1) 0%,var(--shade2) 100%)}
  .split,.grid{grid-template-columns:minmax(0,1fr)!important}
  table.stack,table.stack tbody,table.stack tr{display:block;width:auto;height:auto;min-width:0!important}
  table.stack tr:has(th){display:none}
  table.stack tr{padding:1.4rem 0;border-bottom:1px solid var(--line)}
  table.stack td{display:grid;grid-template-columns:38% minmax(0,1fr);gap:1.2rem;width:auto!important;height:auto;padding:.3rem 0;border:0;text-align:left!important}
  table.stack td::before{content:attr(data-l);color:var(--muted);font-size:1.9rem}
  table.stack td:first-child{display:block;font-weight:650;color:var(--text);margin-bottom:.4rem}
  table.stack td:first-child::before{content:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .r,.hb i,.euro div,.vb .sg{transition:none;opacity:1;transform:none}
}
@media print{
  @page{size:1600px 900px;margin:0}
  html{font-size:10px;scroll-snap-type:none}
  .s{height:900px;page-break-after:always;break-after:page}
  .hud,.dots,.bar,.keys{display:none}
  .r,.hb i,.euro div,.vb .sg{opacity:1;transform:none;transition:none}
}

/* Imagen de tarjeta */
.pic{display:block;width:100%;height:30rem;object-fit:cover}

/* Tablas que ocupan todo el alto disponible */
.tall{flex:1;min-height:0;display:flex;flex-direction:column}
.tall table{height:100%;font-size:2.4rem}
.tall td{vertical-align:middle}
@media (max-width:899px),(orientation:portrait){.tall{flex:none}.tall table{height:auto}}

/* Calculadoras centradas en el alto; valores sin partir */
.calc{align-content:center}
output{white-space:nowrap}