/* ═══════════════════════════════════════════════════════════════
   Node Cash · sitio público
   Oscuro a propósito: la app se diseñó en oscuro y así es como se
   ve el producto. Colores tomados de la paleta de la app.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --fondo:#0D1321;
  --marea:#1D2D44;
  --marea-alta:#243452;
  --tinta:#F2F5FA;
  --tinta-2:#8FA5C0;
  --teal:#00A896;
  --teal-hondo:#007F71;
  --ambar:#FFA92E;
  --linea-tenue:rgba(116,140,171,.22);

  --c-azul:#52A5EB;
  --c-morado:#BE6EF5;
  --c-coral:#E8735C;
  --c-verde:#7A9D4F;
  --c-neutro:#3E5C76;

  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --ancho:1080px;
  --aire:clamp(84px,11vw,152px);

  color-scheme:dark;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--fondo);
  color:var(--tinta);
  font-family:var(--display);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}

h1,h2,h3{margin:0; font-weight:700; text-wrap:balance}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
svg{display:block}
.defs{position:absolute; width:0; height:0; overflow:hidden}

a{color:var(--teal)}
:focus-visible{outline:2px solid var(--teal); outline-offset:4px; border-radius:6px}

.saltar{
  position:absolute; left:-9999px; top:0; z-index:30;
  background:var(--teal); color:#06231F; padding:12px 18px;
  border-radius:0 0 10px 0; text-decoration:none; font-size:14px; font-weight:600;
}
.saltar:focus{left:0}

/* ── estructura ───────────────────────────────────────────── */

.banda{padding:var(--aire) 0; position:relative}
.contenido{max-width:var(--ancho); margin:0 auto; padding:0 28px}
.contenido--angosto{max-width:720px; text-align:center}

.ceja{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tinta-2); margin-bottom:22px;
}
.ceja--acento{color:var(--teal)}
.ceja--alerta{color:var(--ambar)}

.titular{
  font-size:clamp(31px,4.5vw,58px); line-height:1.06; letter-spacing:-.035em;
  max-width:940px;
}
.titular-eco{color:var(--tinta-2)}
.monto{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.titular-eco .monto{color:var(--teal)}

.titulo{font-size:clamp(27px,3.7vw,45px); line-height:1.1; letter-spacing:-.03em; max-width:20ch}
.titulo--suelto{max-width:24ch}
.subtitulo{font-size:clamp(20px,2.2vw,25px); letter-spacing:-.022em; line-height:1.25; margin-bottom:14px}

.parrafo{margin-top:22px; color:var(--tinta-2); font-size:clamp(16.5px,1.35vw,18.5px); max-width:56ch}
.parrafo--ancho{max-width:64ch}
.parrafo-chico{color:var(--tinta-2); font-size:15px; line-height:1.6}
.parrafo-chico + .parrafo-chico{margin-top:12px}

.boton{
  display:inline-block; background:var(--teal); color:#06231F;
  font-size:16px; font-weight:640; letter-spacing:-.01em;
  padding:14px 26px; border-radius:99px; text-decoration:none;
  border:0; cursor:pointer; font-family:inherit;
  transition:transform .18s ease, background .18s ease;
}
.boton:hover{background:#28C4B2; transform:translateY(-1px)}
.boton--chico{padding:9px 18px; font-size:14px}
.enlace-quieto{color:var(--tinta-2); text-decoration:none; font-size:15.5px; border-bottom:1px solid var(--linea-tenue); padding-bottom:2px}
.enlace-quieto:hover{color:var(--tinta)}

/* ── el símbolo en sus tamaños ────────────────────────────── */

.ficha{
  --linea:#F2F5FA; --nodo:#00A896;
  background:linear-gradient(160deg,#1D2D44,#0D1321);
  border-radius:22.37%; display:block; flex:none; overflow:hidden;
  width:60px; height:60px;
}
.ficha svg{width:100%; height:100%}
.ficha--nav{width:30px; height:30px; border-radius:26%}
.ficha--grande{width:120px; height:120px}
.sombra{box-shadow:0 3px 10px rgba(5,8,14,.5), 0 22px 46px -18px rgba(5,8,14,.8)}

/* ── barra ────────────────────────────────────────────────── */

.barra{
  position:sticky; top:0; z-index:20;
  background:rgba(13,19,33,.78);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid rgba(116,140,171,.12);
}
.barra-in{
  max-width:var(--ancho); margin:0 auto; padding:12px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.barra-marca{
  display:flex; align-items:center; gap:11px;
  color:var(--tinta); text-decoration:none; font-weight:620; letter-spacing:-.02em; font-size:16px;
}

/* ── hero ─────────────────────────────────────────────────── */

.banda--hero{
  padding-top:clamp(56px,8vw,104px);
  overflow:hidden;
}
.banda--hero::before{
  content:""; position:absolute; inset:-40% 0 auto -10%;
  height:900px; pointer-events:none;
  background:radial-gradient(58% 50% at 22% 42%, rgba(0,168,150,.16), transparent 68%);
}
.banda--hero > .contenido{position:relative}

.entrada{margin-top:34px; color:var(--tinta-2); font-size:clamp(16.5px,1.4vw,19px); max-width:58ch}

.acciones{display:flex; align-items:center; gap:26px; margin-top:38px; flex-wrap:wrap}

/* la tira de doce meses — el momento de la página */
.tira{margin-top:clamp(40px,5vw,60px)}
.tira-meses{display:flex; gap:clamp(6px,1.1vw,14px); align-items:flex-end}
.mes{flex:1 1 0; display:flex; flex-direction:column; align-items:stretch; gap:10px; position:relative}
.mes-barra{
  display:block; height:clamp(96px,13vw,146px); border-radius:8px;
  background:linear-gradient(180deg, rgba(36,52,82,.5), rgba(29,45,68,.9));
  border:1px solid rgba(116,140,171,.16);
  position:relative; overflow:hidden;
}
.mes-lleno{
  position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(180deg,var(--teal),var(--teal-hondo));
  transform:scaleY(0); transform-origin:bottom;
  animation:llenar .52s cubic-bezier(.2,.75,.25,1) forwards;
  animation-delay:calc(var(--i) * .065s + .25s);
}
.mes-nombre{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-2); text-align:center;
}
/* El monto va sobre el relleno, no dentro: el relleno se anima con
   scaleY y estiraría el texto. */
.mes-monto{
  position:absolute; left:0; right:0; bottom:9px;
  font-family:var(--mono); font-size:11px; letter-spacing:-.02em;
  color:#06231F; text-align:center; white-space:nowrap;
  opacity:0; animation:aparecer .4s ease forwards; animation-delay:1.05s;
}
.tira-pie{margin-top:18px; font-family:var(--mono); font-size:12.5px; color:var(--tinta-2); letter-spacing:.02em}

@keyframes llenar{from{transform:scaleY(0)} to{transform:scaleY(1)}}
@keyframes aparecer{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

/* ── la curva ─────────────────────────────────────────────── */

.grafica{
  margin:clamp(36px,4.5vw,54px) 0 0;
  background:linear-gradient(170deg,rgba(29,45,68,.72),rgba(13,19,33,.4));
  border:1px solid rgba(116,140,171,.16); border-radius:18px;
  padding:clamp(16px,2.4vw,30px);
}
.grafica svg{width:100%; height:auto}

.g-ingreso{stroke:var(--tinta-2); stroke-width:2; stroke-dasharray:7 9; opacity:.85}
.g-piso{stroke:rgba(116,140,171,.3); stroke-width:1}
.g-nota, .g-meses text, .g-aviso text{font-family:var(--mono); font-size:13px}
.g-nota{fill:var(--tinta-2); letter-spacing:.02em}
.g-meses text{fill:var(--tinta-2); text-anchor:middle; letter-spacing:.12em; text-transform:uppercase}
.g-fijos{fill:var(--c-neutro)}
.g-c1{fill:var(--c-azul)}
.g-c2{fill:var(--c-morado)}
.g-c3{fill:var(--c-coral)}
.g-muro{fill:var(--ambar)}
.g-aviso rect{fill:rgba(255,169,46,.14)}
.g-aviso text{fill:var(--ambar); letter-spacing:.01em}

.g-barras g{
  transform-box:view-box; transform-origin:0 300px; transform:scaleY(0);
  transition:transform .8s cubic-bezier(.2,.75,.25,1);
  transition-delay:calc(var(--i) * .09s);
}
.revelado .g-barras g{transform:scaleY(1)}

.leyenda{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:22px;
  font-family:var(--mono); font-size:12.5px; color:var(--tinta-2);
}
.leyenda li{display:flex; align-items:center; gap:9px}
.punto{width:11px; height:11px; border-radius:3px; display:block}
.punto--fijos{background:var(--c-neutro)}
.punto--c1{background:var(--c-azul)}
.punto--c2{background:var(--c-morado)}
.punto--c3{background:var(--c-coral)}
.punto--muro{background:var(--ambar)}

/* ── el muro ──────────────────────────────────────────────── */

.banda--muro{
  background:linear-gradient(180deg,rgba(255,169,46,.05),transparent 55%);
  border-top:1px solid rgba(116,140,171,.12);
  border-bottom:1px solid rgba(116,140,171,.12);
}
.cifra-muro{
  display:inline-block; color:var(--ambar); font-family:var(--mono);
  font-size:clamp(38px,6.2vw,76px); letter-spacing:-.04em; line-height:1.05; margin-top:6px;
}
.cifra-pie{
  margin-top:6px; font-family:var(--mono); font-size:12.5px;
  letter-spacing:.06em; color:var(--tinta-2);
}
.frase-comunidad{
  margin-top:38px; font-size:clamp(22px,3vw,34px); letter-spacing:-.028em;
  color:var(--tinta); font-weight:640;
}

/* ── el nombre ────────────────────────────────────────────── */

.banda--marca{background:linear-gradient(180deg,transparent,rgba(0,168,150,.045) 50%,transparent)}

.convergencia{
  margin:clamp(30px,4vw,48px) 0 0; padding:clamp(10px,2vw,20px) 0;
}
.convergencia svg{width:100%; height:auto; max-width:820px}
.c-aristas path{fill:none; stroke:rgba(116,140,171,.4); stroke-width:3}
.c-textos text{font-family:var(--mono); font-size:13px; fill:var(--tinta-2)}
.c-final text{font-family:var(--display); font-size:16px; font-weight:620; fill:var(--tinta)}
.c-final .c-final-tenue{font-family:var(--mono); font-size:13px; font-weight:400; fill:var(--tinta-2)}
.c-nodo--azul{fill:var(--c-azul)}
.c-nodo--morado{fill:var(--c-morado)}
.c-nodo--coral{fill:var(--c-coral)}
.c-nodo--verde{fill:var(--c-verde)}
.c-nodo--gris{fill:var(--c-neutro)}
.c-destino{fill:var(--teal)}

.par{
  display:flex; gap:clamp(24px,3.6vw,44px); align-items:flex-start;
  margin-top:clamp(40px,5vw,60px);
}
.par-txt{flex:1 1 auto}
.par-txt .parrafo{margin-top:0}

/* ── el color ─────────────────────────────────────────────── */

.banda--color{background:linear-gradient(180deg,rgba(29,45,68,.42),transparent)}

.paleta{
  display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin-top:clamp(34px,4vw,48px);
}
.tono{margin:0; border-radius:14px; overflow:hidden; border:1px solid rgba(116,140,171,.18)}
.tono::before{content:""; display:block; height:132px}
.tono figcaption{
  padding:14px 16px; background:rgba(13,19,33,.55);
  display:flex; flex-direction:column; gap:3px; font-size:14px;
}
.tono figcaption span{font-family:var(--mono); font-size:12px; color:var(--tinta-2)}
.tono--fondo::before{background:#0D1321}
.tono--marea::before{background:#1D2D44}
.tono--teal::before{background:#00A896}
.tono--tinta::before{background:#F2F5FA}
.tono--ambar::before{background:#FFA92E}

.tarjetas-tira{display:flex; gap:8px; margin-top:20px; flex-wrap:wrap}
.tarjetas-tira span{width:52px; height:22px; border-radius:6px; display:block}
.banda--color .parrafo-chico{margin-top:34px}

/* ── voz ──────────────────────────────────────────────────── */

.voz-par{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-top:clamp(34px,4vw,46px)}
.dice{
  margin:0; padding:26px 28px; border-radius:16px;
  background:rgba(29,45,68,.5); border:1px solid rgba(116,140,171,.16);
}
.dice--si{border-left:3px solid var(--teal)}
.dice--no{border-left:3px solid #FF5A5F}
.dice-frase{font-size:clamp(18px,2vw,22px); font-weight:640; letter-spacing:-.022em; line-height:1.3}
.dice--si .dice-frase{color:var(--tinta)}
.dice--no .dice-frase{color:#FF8A8E}
.dice-nota{margin-top:12px; color:var(--tinta-2); font-size:14.5px}

/* ── muy pronto ────────────────────────────────────────────── */

.banda--pronto{
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(0,168,150,.16), transparent 70%),
    linear-gradient(180deg,rgba(29,45,68,.55),transparent);
  border-top:1px solid rgba(116,140,171,.12);
}
.banda--pronto .ficha{margin:0 auto 26px}
.banda--pronto .titulo{max-width:none}
.banda--pronto .parrafo{margin-left:auto; margin-right:auto}

.promesas{
  display:grid; gap:14px; margin-top:46px; padding-top:30px;
  border-top:1px solid var(--linea-tenue); text-align:left;
}
.promesas li{color:var(--tinta-2); font-size:14.5px; line-height:1.55}
.promesas b{color:var(--tinta); font-weight:620}

/* ── pie ──────────────────────────────────────────────────── */

.pie{padding:44px 0 60px; border-top:1px solid rgba(116,140,171,.12)}
.pie-in{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.pie-marca{display:flex; align-items:center; gap:12px}
.pie-marca div{display:flex; flex-direction:column; line-height:1.35}
.pie-marca b{font-size:15px; letter-spacing:-.015em}
.pie-marca span{font-family:var(--mono); font-size:12px; color:var(--tinta-2)}
.pie-nota{color:var(--tinta-2); font-size:13px; max-width:46ch}
.pie-enlaces{display:flex; gap:20px; flex-wrap:wrap; margin-top:10px; font-size:13.5px}
.pie-enlaces a{color:var(--tinta-2); text-decoration:none; border-bottom:1px solid var(--linea-tenue)}
.pie-enlaces a:hover{color:var(--tinta)}
.pie-enlaces a[aria-current="page"]{color:var(--tinta); border-bottom-color:transparent}

/* ── revelados ────────────────────────────────────────────── */

[data-revelar]{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.75,.25,1)}
[data-revelar].revelado{opacity:1; transform:none}

/* ── adaptaciones ─────────────────────────────────────────── */

@media (max-width:760px){
  body{font-size:16px}
  .mes-nombre{font-size:9.5px; letter-spacing:.04em}
  .tira-meses{gap:5px}
  .par{flex-direction:column}
  .acciones{gap:18px}
  .pie-in{flex-direction:column; align-items:flex-start}
}

/* En columnas angostas el monto ya no cabe dentro de la barra, y
   medio "$1,0…" es peor que nada: el pie de la tira ya lo explica. */
@media (max-width:620px){
  .mes-monto{display:none}
}

@media (max-width:420px){
  .barra-marca > span:not(.ficha){display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mes-lleno{animation:none; transform:scaleY(1)}
  .mes-monto{animation:none; opacity:1}
  .g-barras g{transition:none; transform:scaleY(1)}
  [data-revelar]{opacity:1; transform:none; transition:none}
  .boton{transition:none}
}