@font-face{font-family:'IBM Plex Sans';src:url("IBMPlexSans.woff2") format("woff2");font-weight:200 500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url("IBMPlexMono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url("IBMPlexMono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ======================================================================
   Sectora · Holder rewards
   Misma hoja que la web principal: negro con la rejilla de 54px y sus
   celdas azules, hojas claras de papel con cruces de registro, el lomo
   y la regla en los margenes, IBM Plex Sans ligera para los titulares y
   Plex Mono en mayusculas para los rotulos. Los valores salen de
   index.html de la portada; aqui solo lo que usa esta pagina.
   ====================================================================== */
:root{
  --bg:#000;
  --ink:#fff;
  --ink-2:#c6ccd8;
  --ink-3:#7c8496;
  --ink-4:#4a5164;
  --blue:#1569ff;
  --blue-deep:#0d4fd8;
  --hair:rgba(255,255,255,.10);
  --hair-soft:rgba(255,255,255,.05);
  --live:#3ecf8e;
  --pad:clamp(20px,4.4vw,72px);
  --ease:cubic-bezier(.22,.72,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* papel de las hojas claras */
  --p-ink:#07080a;--p-ink-2:#3c414c;--p-ink-3:#6b7280;--p-ink-4:#9aa0ab;
  --p-line:rgba(0,0,0,.11);--p-live:#0f8f52;
}
section[id]{scroll-margin-top:18px}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#000;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
@supports not (overflow-x: clip){body{overflow-x:hidden}}
a{color:inherit}
button{font:inherit;color:inherit}
.mono{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:140;background:var(--blue);color:#fff;padding:12px 18px;font-size:12px}
.skip:focus{left:var(--pad);top:10px}

/* cifra de APY que staking.js cambia por la del contrato: solo texto */
.apy-n{display:inline !important;font:inherit !important;letter-spacing:inherit !important;
  text-transform:inherit !important;color:inherit !important}
[hidden]{display:none!important}

/* ============ grano y barra de progreso ============ */
.grain{position:fixed;inset:-50%;z-index:40;pointer-events:none;opacity:.05;
  background-image:url("4af60b8d49f95ce627893362a0ae2df1e794ecfd.svg");
  animation:grain 7s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}16%{transform:translate(-3%,-2%)}33%{transform:translate(2%,-3%)}
  50%{transform:translate(-2%,3%)}66%{transform:translate(3%,2%)}83%{transform:translate(-3%,1%)}}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:130;background:var(--blue);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* ============ cursor de coordenadas ============ */
.reticle{position:fixed;z-index:44;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
.reticle.on{opacity:1}
.reticle .rx,.reticle .ry{position:fixed;background:var(--blue);opacity:.22;transition:background .3s var(--ease),opacity .3s var(--ease)}
.reticle.on-light .rx,.reticle.on-light .ry{background:#0d4fd8;opacity:.3}
.reticle .rx{left:0;right:0;height:1px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.reticle .ry{top:0;bottom:0;width:1px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.readout{position:fixed;z-index:45;pointer-events:none;transform:translate3d(-200px,-200px,0);
  color:var(--ink-3);font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.14em;padding:12px 0 0 16px;
  will-change:transform;opacity:0;transition:opacity .35s var(--ease),color .3s var(--ease)}
.readout.on{opacity:1}
.readout::before{content:'';position:absolute;left:0;top:0;width:9px;height:9px;
  border-left:1px solid var(--blue);border-top:1px solid var(--blue);opacity:.9;transition:border-color .3s var(--ease)}
.readout.on-light{color:#6b7280}
.readout.on-light::before{border-left-color:#0d4fd8;border-top-color:#0d4fd8}
@media (pointer:coarse){.reticle,.readout{display:none}}

/* ============ cabecera ============ */
.top{position:absolute;top:0;left:0;right:0;z-index:50}
.top nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--pad)}
.brand{display:inline-flex;align-items:center;line-height:0}
.brand a{display:block;line-height:0;border-radius:3.4px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.brand svg{display:block;width:38px;height:38px;border-radius:3.4px}
.brand a:hover,.brand a:focus-visible{transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(21,105,255,.5),0 6px 22px -8px rgba(21,105,255,.9)}
.brand .ring{transform-origin:50% 50%;transition:transform .5s var(--ease)}
.brand a:hover .ring{transform:rotate(90deg) scale(1.04)}
.topnav{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px);flex:1 1 auto;min-width:0;margin-left:clamp(14px,2.4vw,38px)}
.tn-a{position:relative;display:inline-flex;align-items:center;gap:7px;color:var(--ink-2);text-decoration:none;white-space:nowrap;
  padding:7px 0;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  transition:color .28s var(--ease)}
.tn-a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--blue);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .32s var(--ease)}
.tn-a:hover,.tn-a:focus-visible{color:#fff}
.tn-a:hover::after,.tn-a:focus-visible::after{transform:scaleX(1)}
.nav-end{display:flex;align-items:center;gap:10px;flex:none}
.docs{position:relative;overflow:hidden;color:var(--ink);text-decoration:none;border:1px solid var(--hair);
  padding:10px 17px;white-space:nowrap;transition:border-color .3s var(--ease),color .3s var(--ease)}
.docs span{position:relative;z-index:1}
.docs::before{content:'';position:absolute;inset:0;background:var(--blue);transform:translateY(101%);transition:transform .42s var(--ease)}
.docs:hover,.docs:focus-visible{border-color:var(--blue)}
.docs:hover::before,.docs:focus-visible::before{transform:translateY(0)}
@media (max-width:900px){.topnav{display:none}}
@media (max-width:520px){.brand svg{width:32px;height:32px}}

/* ============ portada ============ */
.stage{position:relative;display:flex;flex-direction:column;background:#000;overflow:hidden;
  transform-origin:50% 50%}
#grid{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(118% 88% at 38% 46%,transparent 46%,rgba(0,0,0,.7) 100%)}
.layer{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;
  padding-top:calc(var(--head-h,76px) + clamp(6px,1.6vh,18px))}
/* el bloque arranca pegado a la cabecera y las dos columnas miden lo mismo:
   la ficha empieza a la altura del rotulo Live y termina con los botones */
.hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,.8fr);gap:clamp(30px,4vw,76px);
  align-items:stretch;padding:clamp(18px,3vh,36px) var(--pad) clamp(80px,12vh,130px)}
.hero-l{position:relative}
.hero-new{position:relative;margin-bottom:22px;white-space:nowrap;display:inline-flex;align-items:center;gap:12px;
  padding:9px 14px 9px 12px;border:1px solid rgba(62,207,142,.32);background:rgba(62,207,142,.06);color:var(--ink-2);
  font-size:10.5px;text-decoration:none;transition:border-color .3s var(--ease),color .3s var(--ease)}
.hero-new b{color:#3ecf8e;font-weight:500}
.hero-new i{font-style:normal;color:var(--ink-3)}
.hero-new:hover{border-color:#3ecf8e;color:#fff}
.led{position:relative;display:inline-block;width:6px;height:6px;border-radius:50%;flex:none;background:#25d366;
  box-shadow:0 0 10px 1px rgba(37,211,102,.65)}
.led::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid #25d366;animation:ping 2.6s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.9}70%,100%{transform:scale(1.9);opacity:0}}

.eyebrow{color:var(--ink-3);display:flex;align-items:center;gap:14px;margin-bottom:30px}
.eyebrow i{display:block;width:0;height:1px;background:var(--blue);flex:none}
h1{font-size:clamp(34px,5.2vw,66px);font-weight:200;line-height:1.1;letter-spacing:-.024em;max-width:17ch}
h1 .b{font-weight:400}
h1 .ln{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
h1 .ln > span{display:block;transform:translateY(112%)}
.played h1 .ln > span{transform:none;transition:transform 1.05s var(--ease-out) calc(var(--i,0) * .085s + .2s)}
.rule{width:0;height:1px;background:var(--hair);margin:34px 0 28px}
.lede{max-width:56ch;font-size:clamp(15px,1.2vw,17px);line-height:1.7;color:var(--ink-2)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:42px}

.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:11px;text-decoration:none;
  padding:15px 26px;border:1px solid transparent;cursor:pointer;background:none;
  transition:border-color .3s var(--ease),color .3s var(--ease),opacity .3s var(--ease)}
.btn span{position:relative;z-index:1}
.btn .arrow{position:relative;z-index:1;transition:transform .38s var(--ease)}
.btn:hover .arrow{transform:translateY(4px)}
.btn-ghost:hover .arrow{transform:translate(4px,-4px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary::before{content:'';position:absolute;inset:0;background:var(--blue-deep);transform:translateY(101%);transition:transform .42s var(--ease)}
.btn-primary:hover::before,.btn-primary:focus-visible::before{transform:translateY(0)}
.btn-ghost{color:var(--ink);border-color:var(--hair)}
.btn-ghost::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.07);transform:translateY(101%);transition:transform .42s var(--ease)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--ink-3)}
.btn-ghost:hover::before,.btn-ghost:focus-visible::before{transform:translateY(0)}
.btn.wide{width:100%;padding:17px 22px}
/* el boton de cobrar lo crea staking-chain.js con la clase "primary" */
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-deep)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled::before{display:none}
.btn.addr{text-transform:none;letter-spacing:.08em}

/* ficha del programa */
.sheet{color:var(--ink-3);border-left:1px solid var(--hair);padding-left:clamp(18px,2vw,30px);min-width:190px;display:flex;flex-direction:column}
.sheet h2{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-4);display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;margin-bottom:4px;
  border-bottom:1px solid var(--hair)}
.sheet h2 em{font-style:normal;color:var(--ink-4)}
.sheet dl{flex:1;display:grid;grid-template-columns:1fr auto;gap:0 18px;align-items:baseline;align-content:space-between}
.sheet dt,.sheet dd{padding:12px 0;border-bottom:1px solid var(--hair-soft)}
.sheet dt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4)}
.sheet dd{color:var(--ink-2);font-size:13.5px;font-weight:400;text-align:right;font-variant-numeric:tabular-nums}
.sheet dl > *:nth-last-child(-n+2){border-bottom:0}
.sheet dd b{color:var(--ink);font-weight:400}
.sheet dd.ok{color:#fff;display:inline-flex;align-items:center;gap:7px;justify-content:flex-end}
.sheet dd.ok::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--blue);flex:none;box-shadow:0 0 0 3px rgba(21,105,255,.18)}
.sheet dd.flash{color:var(--live)}
.sheet a.sheet-addr{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.02em;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink-4);white-space:nowrap;
  transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
.sheet a.sheet-addr i{font-style:normal}
.sheet a.sheet-addr:hover{color:#fff;text-decoration-color:var(--blue)}
.sheet .note{padding-top:14px;margin-top:2px;border-top:1px solid var(--hair);font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);line-height:1.7}

/* entrada de la portada */
.lift{opacity:0;transform:translateY(16px)}
.played .lift{opacity:1;transform:none;transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.played .eyebrow i{width:30px;transition:width .7s var(--ease) .15s}
.played .rule{width:74px;transition:width .9s var(--ease) .55s}
html:not(.js) .lift{opacity:1;transform:none}
html:not(.js) h1 .ln > span{transform:none}
html:not(.js) .eyebrow i{width:30px}
html:not(.js) .rule{width:74px}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:44px;align-items:start}
  h1{max-width:none}
  .sheet{border-left:0;border-top:1px solid var(--hair);padding:24px 0 0;min-width:0}
  .sheet h2{padding-bottom:12px}
}

/* ============ hojas claras ============ */
.paper{position:relative;isolation:isolate;overflow:clip;color:var(--p-ink);
  padding:clamp(80px,12vh,140px) var(--pad) clamp(70px,11vh,130px);
  background:linear-gradient(180deg,#f2f2ef 0%,#f6f6f4 46%,#f6f6f4 84%,#f2f2ef 100%)}
.paper::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("0028dd9a6362721c993766c427457feb769bbc73.svg"),
                   linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(88% 62% at 50% 50%,#000,transparent 78%);
  mask-image:radial-gradient(88% 62% at 50% 50%,#000,transparent 78%)}
.paper .eyebrow{color:var(--p-ink-3);margin-bottom:clamp(18px,2.6vh,28px)}
.paper .eyebrow i{width:30px;background:var(--p-ink)}

/* lomo, regla y luz del margen: los de la portada */
.spine,.gauge{position:absolute;top:0;bottom:0;z-index:1;pointer-events:none;display:block;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:#9aa0ab}
.spine{left:calc(var(--pad) * .34);width:1px;background:rgba(0,0,0,.10)}
.spine em{position:sticky;top:120px;display:block;height:0;font-style:normal}
.spine b{position:absolute;top:0;left:50%;transform:translateX(-50%);width:19px;height:25px;display:grid;place-items:center;
  background:#f4f4f1;font-weight:500;color:#3c414c;letter-spacing:0}
.spine span{position:absolute;top:38px;left:7px;writing-mode:vertical-rl;white-space:nowrap}
.spine i{position:absolute;bottom:30px;left:50%;width:5px;height:5px;transform:translateX(-50%);background:var(--blue-deep)}
.gauge{right:calc(var(--pad) * .34);width:12px}
.gauge::before{content:'';position:absolute;inset:0;
  background-image:repeating-linear-gradient(180deg,rgba(0,0,0,.10) 0 1px,transparent 1px 270px),
                   repeating-linear-gradient(180deg,rgba(0,0,0,.10) 0 1px,transparent 1px 54px);
  background-size:12px 100%,5px 100%;background-position:0 0,7px 0;background-repeat:repeat-y}
.gauge u{position:absolute;left:5px;right:-6px;height:1px;top:0;background:var(--blue);text-decoration:none;
  opacity:0;transition:opacity .6s var(--ease-out);will-change:transform}
.gauge.on u{opacity:1}
.lux{position:absolute;top:0;left:0;z-index:0;pointer-events:none;width:900px;height:900px;margin:-450px 0 0 -450px;
  background:radial-gradient(circle,rgba(21,105,255,.13) 0,rgba(21,105,255,.05) 38%,transparent 66%);
  opacity:0;transition:opacity 1s var(--ease-out);will-change:transform}
.lux.on{opacity:1}
@media (hover:none),(prefers-reduced-motion:reduce){.lux{display:none}}
@media (max-width:895px){.paper{--pad:clamp(36px,9.5vw,46px)}.spine{z-index:4}}

/* titular de seccion que sube desde su propia caja, como en la portada */
.hw{overflow:hidden;padding-bottom:.16em}
.hw h2{transform:translateY(110%);transition:transform 1.25s var(--ease-out) .06s}
.on .hw h2{transform:none}
html:not(.js) .hw h2{transform:none}

/* ---- 01 · stake ---- */
.pp-in{position:relative;z-index:1;max-width:1280px}
.pp-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:30px}
.live-tag{display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid rgba(15,143,82,.38);
  background:rgba(15,143,82,.07);color:var(--p-live);font-size:11px}
.pp-ser{color:var(--p-ink-3);font-size:11px}
.pp-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,90px);align-items:end;
  margin-bottom:clamp(40px,5vw,72px)}
.pp-head h2{font-size:clamp(34px,4.6vw,68px);font-weight:300;line-height:1.02;letter-spacing:-.03em;max-width:13ch;
  text-wrap:balance;color:var(--p-ink)}
.pp-head p{color:var(--p-ink-2);font-size:clamp(15px,1.15vw,18px);line-height:1.65;font-weight:300;max-width:50ch}
.pp-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,3.4vw,56px);align-items:start}

/* el marco de la consola: el mismo del video del Hash Market */
.frame{position:relative;margin:0;padding:clamp(14px,1.4vw,20px);border:1px solid var(--p-line);background:rgba(255,255,255,.35)}
.frame-plus{position:absolute;inset:-7px;pointer-events:none}
.frame-plus i{position:absolute;width:13px;height:13px}
.frame-plus i::before,.frame-plus i::after{content:'';position:absolute;background:var(--blue)}
.frame-plus i::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px)}
.frame-plus i::after{top:50%;left:0;right:0;height:1px;transform:translateY(-.5px)}
.frame-plus i:nth-child(1){left:0;top:0}
.frame-plus i:nth-child(2){right:0;top:0}
.frame-plus i:nth-child(3){left:0;bottom:0}
.frame-plus i:nth-child(4){right:0;bottom:0}
.band{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;font-size:10.5px}
.band span{color:var(--p-ink-3)}
.band b{color:var(--blue);font-weight:500}

/* la consola: tarjeta blanca dentro del marco, en el papel de la seccion */
.console{position:relative;background:#fff;color:var(--p-ink);padding:clamp(20px,2.4vw,32px);border:1px solid rgba(0,0,0,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 24px 60px -36px rgba(7,8,10,.28)}
.console::after{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--blue)}
.con-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:22px;
  border-bottom:1px solid var(--p-line);font-size:9.5px;color:var(--p-ink-4)}
.con-net{display:inline-flex;align-items:center;gap:9px;color:var(--p-live)}
.con-lbl{display:block;font-size:10px;color:var(--p-ink-3);margin-bottom:10px}
.input-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid rgba(0,0,0,.14);
  background:#f7f7f5;padding:14px 16px;transition:border-color .3s var(--ease),background .3s var(--ease)}
.input-wrap:focus-within{border-color:var(--blue);background:#fff}
.input-wrap input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--p-ink);
  font-family:'IBM Plex Sans',sans-serif;font-weight:200;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.input-wrap input::-webkit-outer-spin-button,.input-wrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.input-wrap input::placeholder{color:#b4b9c2}
.input-suffix{font-size:10.5px;color:var(--p-ink-3);flex:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips button{cursor:pointer;background:none;border:1px solid var(--p-line);color:var(--p-ink-3);padding:7px 11px;font-size:9.5px;
  letter-spacing:.12em;transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.chips button:hover{color:var(--p-ink);border-color:var(--p-ink-3)}
.chips button.on{color:var(--blue-deep);border-color:var(--blue);background:rgba(21,105,255,.08)}

.out{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:20px 0 16px;border-top:1px solid var(--p-line);border-bottom:1px solid var(--p-line)}
.out > div{padding:14px 14px 14px 0;min-width:0}
.out > div + div{padding-left:14px;border-left:1px solid rgba(0,0,0,.06)}
.out dt{font-size:9px;color:var(--p-ink-4);margin-bottom:8px}
.out dd{font-size:clamp(14px,1.2vw,16px);font-weight:300;color:var(--p-ink-2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.out .out-key dd{color:var(--p-ink);font-weight:400}
.out .out-key dt{color:var(--blue)}

.chart-wrap{border:1px solid rgba(0,0,0,.07);background:#fbfbfa;padding:14px 14px 6px;margin-bottom:18px}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;font-size:9.5px;color:var(--p-ink-4)}
.chart-head b{font-weight:400;font-size:11px;color:var(--p-ink);letter-spacing:.06em}
#growthChart{display:block;width:100%;height:150px}

/* lo que staking-chain.js cuelga junto al boton, en un orden fijo */
.con-actions{display:flex;flex-direction:column}
/* aviso fijo bajo las acciones: las recompensas del staking se cobran siempre, aparte del airdrop */
.stk-msg{display:flex;flex-direction:column;justify-content:center;margin-top:18px;padding:16px 18px 18px;border:1px solid rgba(15,143,82,.28);
  background:linear-gradient(180deg,rgba(15,143,82,.085),rgba(15,143,82,.03))}
.stk-msg-k{display:flex;align-items:center;gap:8px;margin:0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#0b7a45}
.stk-msg-k svg{flex:none;width:16px;height:16px;fill:none;stroke:#0f8f52;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.stk-msg-t{margin:10px 0 0;font-size:17px;line-height:1.3;font-weight:500;color:var(--p-ink)}
.stk-msg-p{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--p-ink-2)}
.stk-msg-f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:16px 0 0;border-top:1px solid rgba(15,143,82,.22)}
.stk-msg-f div{min-width:0;padding:10px 10px 0 0;overflow-wrap:break-word}
.stk-msg-f div+div{padding-left:12px;border-left:1px solid rgba(15,143,82,.22)}
.stk-msg-f dt{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--p-ink-4)}
.stk-msg-f dd{margin:4px 0 0;font-size:12px;letter-spacing:.04em;color:var(--p-ink)}
html[lang=ar] .stk-msg :is(.stk-msg-k,dt,dd){letter-spacing:0;font-family:'IBM Plex Mono',system-ui,sans-serif}
@media (max-width:560px){
  .stk-msg-f{grid-template-columns:minmax(0,1fr)}
  .stk-msg-f div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0 0}
  .stk-msg-f div+div{margin-top:9px;padding-left:0;border-left:0;border-top:1px solid rgba(15,143,82,.16)}
  .stk-msg-f dd{margin:0;text-align:end}
}
#earnLive{order:0}
#connectBtn{order:1}
/* el boton de conectar lleva su texto suelto (la direccion conectada): el relleno del hover va por debajo
   del texto, no encima. En el movil el toque deja el hover puesto y el texto desaparecia */
#connectBtn{z-index:0}
#connectBtn::before{z-index:-1}
#chainActions{order:2}
#chainMsg{order:3}
#stakeAddr{order:4}
#chainActions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px!important;margin-top:8px!important}
#chainActions button{border-radius:0!important;padding:13px 8px!important;border:1px solid rgba(0,0,0,.16)!important;
  background:#fff!important;font-size:9.5px!important;color:var(--p-ink)!important;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
#chainActions button:hover:not(:disabled){border-color:var(--p-ink)!important;background:#f4f4f1!important}
#chainActions button:disabled{opacity:.4;cursor:not-allowed}
/* los avisos los pinta staking-chain.js con un gris y un rojo pensados para
   fondo oscuro: aqui se oscurecen para que se lean sobre blanco */
#chainMsg{text-align:center;color:var(--p-ink-3)!important}
#chainMsg[style*="255, 110, 124"]{color:#d4283a!important}
.stake-note{margin-top:14px;font-size:11px;color:var(--p-ink-3);text-align:center;line-height:1.6}
.stake-addr{overflow-wrap:anywhere}
.stake-addr a{color:var(--blue-deep);font-family:'IBM Plex Mono',monospace;font-size:.95em;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(13,79,216,.35)}
.stake-addr a:hover{color:var(--blue)}

/* selector de wallet (staking-wallet.js): va justo debajo del boton */
#walletPick{order:1}
#wcFirma{order:3;margin-top:8px;color:var(--p-ink);border-color:rgba(0,0,0,.16);font-size:11px;letter-spacing:.14em}
#wcFirma[hidden]{display:none}
#wcFirma:not([href]){cursor:default}
.wpick{position:relative;z-index:6;margin-top:8px;border:1px solid rgba(0,0,0,.14);background:#fff;text-align:left;
  animation:wpickIn .38s var(--ease-out) both}
.wpick[hidden]{display:none}
@keyframes wpickIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.wpick-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;
  border-bottom:1px solid var(--p-line);font-size:11px;color:var(--p-ink-2)}
.wpick-x{background:none;border:0;padding:4px 0;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--p-ink-3);
  transition:color .25s var(--ease)}
.wpick-x:hover{color:var(--p-ink)}
.wpick-state{padding:11px 14px;border-bottom:1px solid var(--p-line);font-size:13.5px;line-height:1.6;color:var(--p-ink);background:#fbfbfa}
.wpick-state:empty{display:none}
.wpick-state i{display:inline-block;width:6px;height:6px;margin:0 9px 1px 0;border-radius:50%;vertical-align:middle;background:var(--blue);
  animation:introBlink 1.2s steps(1) infinite}
.wpick-state.err{color:#d4283a}
.wpick-retry{display:inline-block;margin-left:10px;background:none;border:1px solid rgba(0,0,0,.16);padding:5px 10px;cursor:pointer;font-size:9px;color:var(--p-ink)}
.wpick-list{display:grid}
.wpick-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:11px 14px;
  border:0;border-bottom:1px solid var(--p-line);background:none;color:var(--p-ink);text-align:left;text-decoration:none;cursor:pointer;
  font:inherit;-webkit-tap-highlight-color:transparent;transition:background .25s var(--ease)}
.wpick-row:hover,.wpick-row:focus-visible{background:#f4f4f1}
.wpick-row[aria-disabled="true"]{opacity:.45;cursor:progress}
.wpick-ico{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;object-fit:contain;background:#eceef1;
  font:500 12px 'IBM Plex Mono',monospace;color:var(--p-ink-3)}
img.wpick-ico{background:none}
.wpick-txt{display:grid;gap:2px;min-width:0}
.wpick-name{font-size:15px;font-weight:400;letter-spacing:-.005em}
.wpick-sub{font-size:10.5px;letter-spacing:.06em;line-height:1.5;color:var(--p-ink-3)}
.wpick-sec{padding:14px 14px 7px;border-bottom:1px solid var(--p-line);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--p-ink-3)}
.wpick-go{color:var(--blue);font-size:15px;transition:transform .3s var(--ease)}
.wpick-row:hover .wpick-go{transform:translateX(3px)}
.wpick-qr:empty{display:none}
.wpick-qr{display:grid;justify-items:center;gap:12px;padding:18px 14px;border-bottom:1px solid var(--p-line)}
.wpick-qrbox{display:grid;place-items:center;width:208px;height:208px;border:1px solid var(--p-line);background:#fff}
.wpick-qrbox:empty::before{content:'';width:22px;height:22px;border:2px solid rgba(21,105,255,.25);border-top-color:var(--blue);
  border-radius:50%;animation:wpickSpin .9s linear infinite}
@keyframes wpickSpin{to{transform:rotate(360deg)}}
.wpick-qrbox svg{display:block;width:200px;height:200px}
.wpick-copybtn{justify-self:start;margin-top:6px;padding:7px 10px;border:1px solid var(--blue);color:var(--blue);font-size:10px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.wpick-wcx{justify-self:end;background:none;border:1px solid rgba(0,0,0,.16);padding:7px 11px;cursor:pointer;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--p-ink-2)}
.wpick-wcx:hover{border-color:var(--p-ink);color:var(--p-ink)}
.wpick-qr .wpick-state{max-width:44ch;width:100%;border:1px solid var(--p-line)}
.wpick-warn{max-width:44ch;margin:0;padding:10px 12px;border:1px solid rgba(196,128,20,.35);background:#fff8ec;color:#6b4206;font-size:12.5px;line-height:1.6}
.wpick-qrtxt{max-width:34ch;text-align:center;font-size:12px;line-height:1.6;color:var(--p-ink-3)}
.wpick-foot{display:grid;gap:10px;padding:12px 14px}
.wpick-copy{justify-self:start;background:none;border:1px solid rgba(0,0,0,.16);padding:8px 12px;cursor:pointer;font-size:9.5px;color:var(--p-ink);
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.wpick-copy:hover:not(:disabled){border-color:var(--p-ink);background:#f4f4f1}
.wpick-copy:disabled{opacity:.4;cursor:not-allowed}
.wpick-qr .wpick-copy{justify-self:center}
.wpick-unibox{display:grid;gap:8px;padding:12px 14px 14px;border-bottom:1px solid var(--p-line)}
.wpick-unibox[hidden]{display:none}
.wpick-uni{margin:0;padding:10px 12px;border:1px solid rgba(255,0,122,.3);background:#fff2f8;color:#5c1236;font-size:12.5px;line-height:1.6}
.wpick-ubtn{display:block;text-align:center;text-decoration:none;background:none;border:1px solid rgba(0,0,0,.16);padding:9px 12px;cursor:pointer;
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--p-ink)}
.wpick-ubtn:hover{border-color:var(--p-ink);background:#f4f4f1}
.wpick-alt{font-size:12.5px;line-height:1.65;color:var(--p-ink-2)}
/* con la ventana de conectar abierta, el cursor de coordenadas no se pinta encima de los textos */
body:has(.wpick:not([hidden])) .reticle,body:has(.wpick:not([hidden])) .readout{opacity:0!important}
.wpick-alt a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(13,79,216,.35)}
@media (prefers-reduced-motion:reduce){.wpick{animation:none}.wpick-state i,.wpick-qrbox:empty::before{animation:none}}

/* contador en vivo (lo monta staking-chain.js con la wallet conectada) */
.earn-live{margin:0 0 12px;padding:16px;border:1px solid rgba(15,143,82,.32);background:rgba(15,143,82,.06)}
.earn-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--p-ink-3)}
.earn-head i{position:relative;width:6px;height:6px;border-radius:50%;flex:none;background:#25d366;box-shadow:0 0 8px 1px rgba(37,211,102,.65)}
.earn-head i::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid #25d366;animation:ping 2.6s var(--ease) infinite}
.earn-n{display:block;margin-top:10px;font-size:clamp(26px,3vw,36px);font-weight:200;color:var(--p-ink);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;overflow-wrap:anywhere}
.earn-n small{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--p-ink-3)}
.earn-sub{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;margin-top:6px;font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:.06em;color:var(--p-ink-3)}
.earn-sub b{color:var(--blue-deep);font-weight:400;font-variant-numeric:tabular-nums}
.earn-claim{margin-top:12px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase}

/* los pasos: los del Hash Market */
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--p-line)}
.step{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:16px;padding:clamp(18px,2vw,26px) 0;
  border-bottom:1px solid var(--p-line)}
.step::before{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--blue);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease)}
.step:hover::before{transform:scaleX(1)}
.step-n{grid-row:1/span 3;color:var(--blue);font-size:11px;padding-top:7px}
.step h3{font-size:clamp(20px,1.7vw,25px);font-weight:400;letter-spacing:-.016em;line-height:1.2;color:var(--p-ink)}
.step p{margin-top:8px;color:var(--p-ink-3);font-size:14.5px;line-height:1.65;max-width:46ch}
.fact{justify-self:start;margin-top:14px;padding:6px 10px;border:1px solid var(--p-line);color:var(--p-ink);font-size:10px}
@media (max-width:980px){
  .pp-head{grid-template-columns:1fr;align-items:start}
  .pp-body{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .con-head .cx{display:none}
  .frame{padding:10px}
  .console{padding:18px 16px}
  .out{grid-template-columns:repeat(2,minmax(0,1fr))}
  .out > div:nth-child(3){padding-left:0;border-left:0}
  .out > div:nth-child(n+3){border-top:1px solid var(--hair-soft)}
  #chainActions{grid-template-columns:minmax(0,1fr)}
}

/* ============ noche: rejilla y luz azul, como el roadmap ============ */
.night{position:relative;background:#000;padding:clamp(80px,13vh,150px) var(--pad) clamp(90px,14vh,160px)}
.night::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(85% 70% at 50% 25%,#000,transparent 88%);mask-image:radial-gradient(85% 70% at 50% 25%,#000,transparent 88%)}
.night-glow{position:absolute;top:0;left:0;right:0;height:46vh;z-index:0;pointer-events:none;
  background:radial-gradient(58% 62% at 50% 46%,rgba(21,105,255,.34),transparent 74%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 46%,#000 70%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 46%,#000 70%,transparent 100%)}
/* el paso entre una hoja clara y la noche: un degradado de color fijo, sin
   animacion, del papel (#f2f2ef, el color con que acaban y empiezan las
   hojas) al negro. Va en el fondo de la seccion oscura, que crece lo que
   mide el degradado para que el texto empiece ya sobre negro. Las paradas
   siguen una curva suave para que el centro no quede gris plano */
.night{--nf:clamp(180px,30vh,320px);
  --nf-arriba:#f2f2ef 0px,#ebebe8 calc(var(--nf) * 0.06),#d8d8d5 calc(var(--nf) * 0.14),#b9bab8 calc(var(--nf) * 0.24),#8f908f calc(var(--nf) * 0.36),#626363 calc(var(--nf) * 0.49),#3a3b3b calc(var(--nf) * 0.62),#1b1c1c calc(var(--nf) * 0.76),#070708 calc(var(--nf) * 0.89),#000 var(--nf);
  --nf-abajo:#000 calc(100% - var(--nf)),#070708 calc(100% - var(--nf) * 0.89),#1b1c1c calc(100% - var(--nf) * 0.76),#3a3b3b calc(100% - var(--nf) * 0.62),#626363 calc(100% - var(--nf) * 0.49),#8f908f calc(100% - var(--nf) * 0.36),#b9bab8 calc(100% - var(--nf) * 0.24),#d8d8d5 calc(100% - var(--nf) * 0.14),#ebebe8 calc(100% - var(--nf) * 0.06),#f2f2ef 100%}
/* un solo degradado a todo el alto, con las paradas medidas desde cada borde:
   con un mosaico de alto fraccionario quedaba una raya negra de 1 px */
.night.nf-top{padding-top:calc(var(--nf) + clamp(40px,6vh,80px));background:linear-gradient(180deg,var(--nf-arriba))}
.night.nf-bot{padding-bottom:calc(var(--nf) + clamp(50px,7vh,90px));background:linear-gradient(180deg,var(--nf-abajo))}
.night.nf-top.nf-bot{background:linear-gradient(180deg,var(--nf-arriba),var(--nf-abajo))}
.nf-top .night-glow{top:var(--nf)}
/* y al cruzar la costura, la seccion de arriba tambien cambia de color: un
   velo del color de la de abajo, mas fuerte junto a la costura, cuya
   opacidad sube con el scroll (staking-fx.js). Va dentro de la seccion
   oscura; el de una costura de arriba asoma por encima de su borde y tapa
   el final de la hoja clara */
.night{--nf-sube:85vh}
.nf-velo{position:absolute;left:0;right:0;z-index:2;pointer-events:none;opacity:0;will-change:opacity}
.nf-velo.arriba{top:calc(var(--nf-sube) * -1);height:calc(var(--nf-sube) + var(--nf));background:#000;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.22) calc(var(--nf-sube) * .45),rgba(0,0,0,.62) calc(var(--nf-sube) * .78),#000 var(--nf-sube));
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.22) calc(var(--nf-sube) * .45),rgba(0,0,0,.62) calc(var(--nf-sube) * .78),#000 var(--nf-sube))}
.nf-velo.abajo{bottom:0;height:calc(var(--nf-sube) + var(--nf));background:#f2f2ef;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.22) 45%,rgba(0,0,0,.62) 78%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.22) 45%,rgba(0,0,0,.62) 78%,#000 100%)}
/* la ultima seccion y el pie son oscuros los dos: el paso es la luz azul del
   pie, que cruza la costura en vez de cortarse en ella. La misma luz del pie
   (.ft-glow) se repite al final de la seccion, que el pie tapa por debajo,
   y el velo que sube con el scroll es un halo azul centrado en la costura */
.nf-luz{position:absolute;left:0;right:0;bottom:-20vh;height:36vh;z-index:0;pointer-events:none;
  background:radial-gradient(56% 62% at 50% 46%,rgba(21,105,255,.30),transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,#000 66%,transparent);mask-image:linear-gradient(180deg,transparent,#000 40%,#000 66%,transparent)}
.nf-velo.pie{top:calc(100% - var(--nf-sube));height:calc(var(--nf-sube) + 44vh);
  background:radial-gradient(78% 42vh at 50% var(--nf-sube),rgba(21,105,255,.24),rgba(21,105,255,.08) 52%,transparent 80%)}
@media (prefers-reduced-motion:reduce){.nf-velo{display:none}}
.nt-in{position:relative;z-index:1;max-width:1280px;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(36px,5vw,104px);align-items:start}
.nt-sticky{position:sticky;top:clamp(30px,7vh,72px);align-self:start;height:fit-content}
.night .eyebrow i{width:30px}
.night h2{font-size:clamp(28px,4.4vw,58px);font-weight:200;line-height:1.06;letter-spacing:-.03em;max-width:14ch;text-wrap:balance}
.nt-lede{margin-top:24px;max-width:34ch;font-size:14.5px;line-height:1.75;color:var(--ink-3)}
.nt-count{margin-top:32px;padding-top:18px;border-top:1px solid var(--hair);color:var(--ink-4)}
.nt-fine{grid-column:2;margin-top:6px;font-size:10px;letter-spacing:.06em;line-height:1.9;color:var(--ink-4);text-transform:none;max-width:72ch}

/* libro de cifras, en su version de noche */
.ledger{border-top:1px solid rgba(255,255,255,.16)}
.lg-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:baseline;padding:clamp(18px,2.6vh,26px) 0;
  border-bottom:1px solid var(--hair)}
.lg-row dt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.lg-row dd{font-size:clamp(19px,2.1vw,28px);font-weight:200;letter-spacing:-.02em;text-align:right;font-variant-numeric:tabular-nums}
.lg-row dd small{display:block;margin-top:6px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-4)}
.lg-row.key dd{color:#4d8dff}

/* preguntas: filas numeradas, como Developments */
.faq{border-top:1px solid var(--hair)}
.q{border-bottom:1px solid var(--hair)}
.q summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:56px minmax(0,1fr) 28px;align-items:center;gap:10px;
  padding:clamp(20px,2.6vh,28px) 0;transition:color .3s var(--ease)}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:'';width:28px;height:28px;border:1px solid var(--hair);
  background:linear-gradient(var(--ink-2),var(--ink-2)) center/10px 1px no-repeat,linear-gradient(var(--ink-2),var(--ink-2)) center/1px 10px no-repeat;
  transition:border-color .35s var(--ease),background-color .35s var(--ease)}
.q[open] summary::after{border-color:var(--blue);background:linear-gradient(#fff,#fff) center/10px 1px no-repeat rgba(21,105,255,.18)}
.q-n{color:var(--ink-4);font-size:10.5px;transition:color .3s var(--ease)}
.q-t{font-size:clamp(18px,1.7vw,24px);font-weight:300;letter-spacing:-.012em;color:var(--ink-2);transition:color .3s var(--ease)}
.q summary:hover .q-t,.q[open] .q-t{color:#fff}
.q[open] .q-n,.q summary:hover .q-n{color:var(--blue)}
.q-a{overflow:hidden}
.q-a p{padding:0 38px 26px 66px;font-size:14.5px;line-height:1.75;color:var(--ink-3);max-width:68ch}

@media (max-width:980px){
  .nt-in{grid-template-columns:1fr;gap:0}
  .nt-lede,.nt-count{display:none}
  .nt-sticky{position:static;margin-bottom:26px}
  .nt-fine{grid-column:1;margin-top:20px}
  .q summary{grid-template-columns:40px minmax(0,1fr) 28px}
  .q-a p{padding:0 0 22px 50px}
}

/* ============ curva: transicion de la portada a la guia ============
   La recompensa de un ejemplo de 1.000 #SECT se dibuja al bajar. Azul de
   Sectora para el area, un verde sutil (--live) solo para lo que se gana:
   el punto vivo, las cifras con "+" y el piloto. El lienzo lo pinta
   staking-curva.js; aqui va lo que es texto. */
.curva{position:relative;height:420vh;background:#000}
/* sin rejilla de fondo: solo la luz azul. Los ejes van en su propio lienzo,
   que solo se repinta al cambiar de mes; el lienzo de la linea mide lo que
   la grafica. Al subir la guia por encima, el bloque se encoge un poco y se
   oscurece con una capa: las dos cosas, en el compositor. Va siempre en su
   propia capa (will-change): si se crea y se destruye al empezar a encogerse,
   Safari vuelve a rasterizar los lienzos y se ve un parpadeo */
.curva-pin{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;isolation:isolate;will-change:transform;
  background:radial-gradient(80% 60% at 70% 80%,rgba(21,105,255,.12),transparent 64%),radial-gradient(50% 40% at 85% 30%,rgba(62,207,142,.05),transparent 70%),#000}
.curva-ejes{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.curva-cv{position:absolute;left:0;top:0;z-index:1}
.curva-sombra{position:absolute;inset:0;z-index:4;background:#000;opacity:0;pointer-events:none}

/* titular y cifras en flujo normal, uno junto al otro (o uno bajo el otro en
   el movil): asi no se pisan nunca, con la barra del navegador o sin ella */
.curva-top{position:absolute;left:var(--pad);right:var(--pad);top:clamp(84px,13vh,128px);z-index:2;display:flex;justify-content:space-between;
  align-items:flex-start;gap:32px}
.curva-head{position:relative;max-width:min(620px,52vw)}
.curva .eyebrow{margin-bottom:22px;color:rgba(255,255,255,.66)}
.curva .eyebrow i{width:30px}
.curva-head h2{font-size:clamp(34px,5vw,74px);font-weight:200;line-height:1.02;letter-spacing:-.03em}
.curva-head h2 .ln{display:block;overflow:hidden;padding-bottom:.08em}
.curva-head h2 .ln > span{display:inline-block}
.curva-head h2 b{font-weight:400}
.curva-sub{margin-top:18px;max-width:44ch;font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.7;color:var(--ink-3)}
.curva-sub b{font-weight:400;color:var(--ink-2)}
/* entrada al llegar: las dos lineas suben desde su renglon */
html.js .curva-head h2 .ln > span{transform:translateY(110%);transition:transform 1.2s var(--ease-out)}
html.js .curva-head h2 .ln + .ln > span{transition-delay:.12s}
html.js .curva-head .eyebrow,html.js .curva-sub,html.js .curva-stats{opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
html.js .curva-sub{transition-delay:.25s}
html.js .curva-stats{transition-delay:.4s}
html.js .curva.on .curva-head h2 .ln > span{transform:none}
html.js .curva.on .curva-head .eyebrow,html.js .curva.on .curva-sub,html.js .curva.on .curva-stats{opacity:1;transform:none}

.curva-stats{position:relative;flex:none;margin-top:8px;display:grid;grid-template-columns:repeat(3,minmax(0,auto));
  gap:1px;background:var(--hair);border:1px solid var(--hair)}
.curva-stats > div{padding:14px 18px 15px;background:rgba(0,0,0,.82);min-width:128px}
.curva-stats dt{font-size:9.5px;color:var(--ink-4);margin-bottom:8px}
.curva-stats dd{font-size:clamp(18px,1.6vw,24px);font-weight:200;letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums}
.curva-stats .key{grid-column:1 / -1}
.curva-stats .key dt{color:var(--live)}
.curva-stats .key dd{font-size:clamp(28px,2.6vw,40px);color:var(--live)}
.curva-stats small{font-size:10px;letter-spacing:.12em;color:var(--ink-3)}

/* la etiqueta que acompana al punto vivo */
.curva-tip{position:absolute;left:0;top:0;z-index:3;display:grid;gap:5px;padding:9px 12px;pointer-events:none;
  font-size:9.5px;color:var(--ink-3);background:rgba(4,10,22,.86);border:1px solid rgba(62,207,142,.35);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.8);opacity:0;will-change:transform}
.curva-tip b{font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--live)}

.curva-hud{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(22px,4vh,38px);z-index:3;display:flex;align-items:center;gap:18px;
  font-size:9.5px;color:var(--ink-3)}
.curva-st{display:inline-flex;align-items:center;gap:9px;color:#fff}
.curva-st i{width:6px;height:6px;border-radius:50%;background:var(--live);box-shadow:0 0 8px 1px rgba(62,207,142,.8)}
.curva-st b{font-weight:400}
.curva-rail{position:relative;flex:1;height:1px;background:rgba(255,255,255,.16)}
.curva-rail i{position:absolute;left:0;top:-1px;height:3px;width:0;background:#fff}
.curva-pc{color:#fff;min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}
.curva-paso{max-width:40ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* el negro con que abre la guia: se funde al final, sin costura */
/* aviso de seguir bajando: al empezar, en el centro de la grafica vacia; al
   terminar, en el centro de la pantalla. Lo coloca staking-curva.js */
.curva-cue{position:absolute;left:0;top:0;z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;
  color:rgba(255,255,255,.75);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  opacity:0;transition:opacity .5s ease;will-change:transform}
.curva-cue.on{opacity:1}
.curva-cue small{font-size:9px;letter-spacing:.16em;color:rgba(255,255,255,.66)}
.curva-cue svg{width:18px;height:18px;margin-top:4px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  animation:curvaCue 1.9s ease-in-out infinite}
@keyframes curvaCue{0%,100%{transform:translateY(-3px);opacity:.5}50%{transform:translateY(5px);opacity:1}}

@media (max-width:760px){
  .curva{height:380vh}
  .curva-top{top:clamp(64px,9vh,90px);flex-direction:column;gap:18px}
  .curva-head{max-width:none}
  .curva-sub{display:none}
  .curva-stats{align-self:stretch;margin-top:0;grid-template-columns:repeat(3,minmax(0,1fr))}
  .curva-pin.bajo .curva-stats > div:not(.key){display:none}
  .curva-stats > div{min-width:0;padding:10px 12px 11px}
  .curva-stats .key{grid-column:1 / -1}
  .curva-stats dd{font-size:16px}
  .curva-stats .key dd{font-size:26px}
  .curva-paso{display:none}
}
@media (prefers-reduced-motion:reduce){
  .curva{height:auto}
  .curva-pin{position:relative;height:100vh}
  .curva-cue{display:none}
  html.js .curva-head h2 .ln > span,html.js .curva-head .eyebrow,html.js .curva-sub,html.js .curva-stats{transition:none;transform:none;opacity:1}
}

/* ============ 01 · guide: hoja clara, como el Hash Market y el Why hold ============
   Sube como una hoja por encima de la grafica fijada: el margen negativo la
   monta sobre la ultima pantalla de .curva, que sigue fija debajo mientras
   esta la tapa. Sombra hacia arriba y el filo azul de Sectora. */
.pp-guide{display:table;margin-top:14px;color:var(--blue-deep);font-weight:400;text-decoration:none;
  border-bottom:1px solid rgba(13,79,216,.32);padding-bottom:2px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.pp-guide i{display:inline-block;font-style:normal;transition:transform .38s var(--ease)}
.pp-guide:hover{color:var(--blue);border-color:var(--blue)}
.pp-guide:hover i{transform:translateY(-3px)}
.guia{z-index:3;margin-top:-100vh;margin-top:-100dvh;border-top:2px solid var(--blue);
  box-shadow:0 -40px 90px -30px rgba(0,0,0,.85)}

/* el titular se queda fijo arriba con el paso en curso; staking-guia.js mide
   su alto y lo pasa a --gd-top, el tope donde se pegan las tarjetas */
.gd-head{position:sticky;top:0;z-index:6;display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(20px,4vw,64px);
  padding:clamp(16px,2.6vh,28px) 0 clamp(14px,2vh,20px);border-bottom:1px solid var(--p-line);
  background:rgba(246,246,244,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gd-head .hw{padding-bottom:.08em}
.gd-head h2{font-size:clamp(30px,3.6vw,54px);font-weight:300;line-height:1.04;letter-spacing:-.03em;color:var(--p-ink)}
.gd-head h2 b{font-weight:400}
.gd-trk{flex:0 1 400px;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:14px;
  grid-template-areas:"n w" "s s" "t t"}
.gd-trk-n{grid-area:n;font-size:10px;color:var(--p-ink-4)}
.gd-trk-n b{font-weight:500;color:var(--blue)}
.gd-trk-w{grid-area:w;justify-self:end;font-size:9.5px;color:var(--p-live);white-space:nowrap}
.gd-segs{grid-area:s;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin:11px 0 10px}
.gd-segs i{height:3px;background:rgba(0,0,0,.09);transition:background .4s var(--ease)}
.gd-segs i.on{background:var(--blue)}
.gd-segs i.now{background:var(--p-live);box-shadow:0 0 8px rgba(15,143,82,.5)}
.gd-tt{grid-area:t;font-size:15px;font-weight:400;letter-spacing:-.005em;color:var(--p-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-lede{margin:clamp(20px,3vh,30px) 0 clamp(26px,4.4vh,44px);max-width:56ch;color:var(--p-ink-2);
  font-size:clamp(15px,1.15vw,18px);line-height:1.65;font-weight:300}

/* las tarjetas: cada una se pega un poco mas abajo que la anterior y la
   siguiente sube por encima; el script iguala su borde de abajo para que
   al final el mazo salga entero, y hunde (escala y vela) las de debajo */
.gd-deck{list-style:none;margin:0;padding:0}
.gd-card{position:sticky;top:calc(var(--gd-top,150px) + var(--i,0) * 12px)}
.gd-card + .gd-card{margin-top:clamp(90px,17vh,180px)}
.gd-sp{height:34vh}
.gd-c{position:relative;display:flex;flex-direction:column;min-height:100%;padding:clamp(18px,2vw,28px) clamp(18px,2.4vw,34px) clamp(20px,2.4vw,32px);
  background:#fff;border:1px solid rgba(0,0,0,.09);transform-origin:50% 0;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 -8px 22px -16px rgba(7,8,10,.22),0 28px 60px -40px rgba(7,8,10,.3)}
.gd-c::before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:rgba(0,0,0,.14);
  transition:background .4s var(--ease)}
.gd-c.act::before{background:var(--blue)}
/* las cruces de registro solo en la tarjeta en curso: en el mazo serian ruido */
.gd-c .frame-plus{inset:-7px;opacity:0;transition:opacity .4s var(--ease)}
.gd-c.act .frame-plus{opacity:1}
.gd-velo{position:absolute;inset:-1px;z-index:3;pointer-events:none;background:#eceef1;opacity:0}
.gd-band{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:clamp(14px,2vh,22px);
  border-bottom:1px solid var(--p-line);font-size:10px;color:var(--p-ink-3)}
.gd-band b{color:var(--blue);font-weight:500;white-space:nowrap}
.gd-cin{flex:1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(22px,3vw,52px);align-items:start}
.gd-main{display:grid;justify-items:start}
.gd-num{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;font-size:clamp(40px,4.2vw,64px);font-weight:200;line-height:1;
  letter-spacing:-.04em;color:var(--p-ink-4);font-family:'IBM Plex Sans',sans-serif;font-variant-numeric:tabular-nums;text-transform:none}
.gd-num small{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--p-ink-4)}
.gd-c.act .gd-num{color:var(--p-ink)}
.gd-card.key .gd-num{color:var(--blue)}
.gd-main h3{font-size:clamp(21px,1.9vw,28px);font-weight:400;letter-spacing:-.018em;line-height:1.18;color:var(--p-ink)}
.gd-main p{margin-top:10px;color:var(--p-ink-3);font-size:14.5px;line-height:1.65;max-width:48ch}
.gd-main p b{font-weight:500;color:var(--p-ink)}
.gd-side{padding:clamp(14px,1.4vw,18px);border:1px solid var(--p-line);background:#fafaf8}
.gd-side.key{border-color:rgba(21,105,255,.4);background:rgba(21,105,255,.035)}
.gd-k{font-size:9.5px;color:var(--p-ink-4);margin-bottom:10px}
.gd-side.key .gd-k{color:var(--blue-deep)}
.gd-see > div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--p-line)}
.gd-see dt{font-size:9.5px;color:var(--p-ink-4)}
.gd-see dd{font-size:11px;letter-spacing:.04em;text-transform:none;color:var(--p-ink);overflow-wrap:anywhere}
.gd-wal{display:inline-flex;align-items:center;gap:9px;color:var(--blue-deep)}
.gd-wal::before{content:'';width:6px;height:6px;border-radius:50%;background:#25d366;box-shadow:0 0 8px 1px rgba(37,211,102,.6)}
.gd-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding-bottom:4px;font-size:10.5px;color:var(--p-ink);
  text-decoration:none;border-bottom:1px solid var(--blue);transition:color .3s var(--ease)}
.gd-link i{font-style:normal;transition:transform .38s var(--ease)}
.gd-link:hover{color:var(--blue)}
.gd-link:hover i{transform:translate(3px,-3px)}
.gd-end{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:clamp(34px,5vh,56px);padding-top:clamp(22px,3vh,30px);
  border-top:1px solid var(--p-line)}
.gd-note{flex:1;min-width:260px;max-width:70ch;font-size:12.5px;line-height:1.7;color:var(--p-ink-3)}
@media (max-width:860px){
  .gd-head{flex-direction:column;align-items:stretch;gap:12px}
  .gd-trk{flex:none;grid-template-areas:"n t" "s s";column-gap:12px}
  .gd-trk-w{display:none}
  .gd-segs{margin:8px 0 0}
  .gd-tt{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--p-ink-2)}
  .gd-cin{grid-template-columns:minmax(0,1fr);gap:16px}
  .gd-end .btn{flex:1 1 100%}
}
@media (max-width:760px){
  .gd-head h2{font-size:clamp(25px,7vw,30px)}
  .gd-head .hw h2 b{display:block}
  .gd-card{top:calc(var(--gd-top,130px) + var(--i,0) * 7px)}
  .gd-card + .gd-card{margin-top:clamp(70px,13vh,120px)}
  .gd-c{padding:14px 16px 16px}
  .gd-band{padding-bottom:10px;margin-bottom:12px;font-size:9.5px}
  .gd-num{font-size:34px;margin-bottom:6px}
  .gd-main h3{font-size:20px}
  .gd-main p{margin-top:6px;font-size:13.5px;line-height:1.58}
  .fact,.gd-link{margin-top:10px}
  .gd-side{padding:10px 12px}
  .gd-k{margin-bottom:6px}
  .gd-see > div{grid-template-columns:76px minmax(0,1fr);gap:10px;padding:7px 0}
  .gd-see dd{font-size:10.5px}
}
@media (max-width:420px){
  .gd-card.key .gd-band b{display:none}
}
/* telefonos bajos: titular en una linea y sin el numero grande, para que
   la tarjeta mas alta quepa entera bajo el titular */
@media (max-width:760px) and (max-height:640px){
  .gd-head{gap:8px;padding:10px 0 9px}
  .gd-head h2{font-size:clamp(19px,5.6vw,23px)}
  .gd-head .hw h2 b{display:inline}
  .gd-segs{margin-top:6px}
  .gd-num{display:none}
  .gd-band{margin-bottom:10px}
  .gd-main p{font-size:13px;line-height:1.52}
}
@media (prefers-reduced-motion:reduce){
  .gd-velo{display:none}
}

/* ============ 04 · security: tarjetas de cristal claro ============ */
.mc-in{position:relative;z-index:1;max-width:1280px;color:var(--p-ink);display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(36px,5vw,104px);align-items:start}
.mc-sticky{position:sticky;top:clamp(30px,7vh,72px);align-self:start;height:fit-content}
.mc-sticky h2{font-size:clamp(28px,4.4vw,62px);font-weight:200;line-height:1.06;letter-spacing:-.03em;max-width:16ch;text-wrap:balance;color:var(--p-ink)}
.mc-lede{margin-top:20px;max-width:38ch;font-size:14.5px;line-height:1.75;color:var(--p-ink-2)}
.mc-count{margin-top:24px;padding-top:14px;border-top:1px solid rgba(0,0,0,.10);color:var(--p-ink-4)}
.mc-list{display:flex;flex-direction:column;gap:18px}
.m-card{position:relative;padding:clamp(24px,2.7vw,34px) clamp(26px,3vw,40px) clamp(26px,2.8vw,34px);min-height:clamp(228px,29vh,286px);
  display:flex;flex-direction:column;background:rgba(255,255,255,.58);border:1px solid rgba(0,0,0,.10);border-radius:3px;
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .5s var(--ease),border-color .5s var(--ease)}
.m-card:hover{transform:translateY(-3px);border-color:rgba(21,105,255,.5)}
.m-card > span{display:block;color:var(--p-ink-4);margin-bottom:16px}
.m-card h3{font-size:clamp(19px,1.7vw,24px);font-weight:400;margin-bottom:14px;letter-spacing:-.012em;color:var(--p-ink)}
.m-card p{font-size:14.5px;line-height:1.75;color:var(--p-ink-2);max-width:44ch}
.m-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;border-top:1px solid rgba(0,0,0,.10);width:100%;
  color:var(--p-ink);text-decoration:none;transition:color .3s var(--ease)}
.m-card p + .m-link{margin-top:26px}
.m-link i{font-style:normal;transition:transform .38s var(--ease)}
.m-link:hover{color:var(--blue)}
.m-link:hover i{transform:translate(3px,-3px)}
@media (max-width:980px){
  .mc-in{grid-template-columns:1fr;gap:28px}
  .mc-sticky{position:static}
  .mc-count{display:none}
}

/* ============ pie: el de la portada ============ */
.ft{position:relative;color:var(--ink);overflow:hidden;
  background:linear-gradient(180deg,#000,rgba(0,0,0,0) 18vh),
    radial-gradient(120% 70% at 50% 0%,rgba(21,105,255,.07),transparent 62%),linear-gradient(180deg,#05070c 0%,#000 46%);
  padding:clamp(64px,10vh,110px) var(--pad) clamp(26px,4vh,44px)}
/* el pie arranca en el mismo negro que la seccion de encima y su rejilla y
   sus puntos entran poco a poco: lo unico que cruza la costura es la luz
   azul (.ft-glow y su gemela .nf-luz al final de la seccion) */
.ft::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22vh),radial-gradient(90% 78% at 50% 8%,#000,transparent 88%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent,#000 22vh),radial-gradient(90% 78% at 50% 8%,#000,transparent 88%);mask-composite:intersect}
.ft-dots{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.10) 1px,transparent 1px);background-size:54px 54px;background-position:27px 27px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22vh),radial-gradient(88% 74% at 50% 14%,#000,transparent 86%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent,#000 22vh),radial-gradient(88% 74% at 50% 14%,#000,transparent 86%);mask-composite:intersect}
.ft-glow{position:absolute;top:-16vh;left:0;right:0;height:36vh;z-index:0;pointer-events:none;
  background:radial-gradient(56% 62% at 50% 46%,rgba(21,105,255,.30),transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,#000 66%,transparent);mask-image:linear-gradient(180deg,transparent,#000 40%,#000 66%,transparent)}
.ft-rail{position:absolute;top:0;left:0;right:0;height:1px;z-index:1;overflow:hidden;display:none}
.ft-rail i{position:absolute;top:0;left:0;width:34%;height:1px;background:linear-gradient(90deg,transparent,#1569ff,transparent);
  animation:ftRail 9s linear infinite}
@keyframes ftRail{from{transform:translateX(-100%)}to{transform:translateX(394%)}}
.ft-marks{position:absolute;inset:clamp(16px,2.2vw,30px);z-index:1;pointer-events:none}
.ft-marks i{position:absolute;width:10px;height:10px;opacity:.5}
.ft-marks i::before,.ft-marks i::after{content:'';position:absolute;background:#7c8496}
.ft-marks i::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px)}
.ft-marks i::after{top:50%;left:0;right:0;height:1px;transform:translateY(-.5px)}
.ft-marks i:nth-child(1){left:0;top:0}
.ft-marks i:nth-child(2){right:0;top:0}
.ft-marks i:nth-child(3){left:0;bottom:0}
.ft-marks i:nth-child(4){right:0;bottom:0}
.ft-inner{position:relative;z-index:2;max-width:1320px;margin:0 auto}
.ft-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.4vw,26px);align-items:start;
  padding-bottom:clamp(34px,5vh,58px);border-bottom:1px solid var(--hair)}
.ft-mark{display:block;line-height:0;border-radius:4px;flex:none;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.ft-mark svg{display:block;width:54px;height:54px;border-radius:4px}
.ft-mark .ring{transform-origin:50% 50%;transition:transform .6s var(--ease)}
.ft-mark:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(21,105,255,.5),0 10px 30px -10px rgba(21,105,255,.9)}
.ft-mark:hover .ring{transform:rotate(180deg)}
.ft-name{font-size:17px;font-weight:400;letter-spacing:.02em}
.ft-sub{margin-top:8px;max-width:52ch;font-size:14px;line-height:1.7;color:var(--ink-3)}
.ft-status{margin-top:14px;display:inline-flex;align-items:center;gap:9px;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4)}
.ft-status b{color:var(--ink-3);font-weight:500;font-variant-numeric:tabular-nums}
.ft-status .led{width:5px;height:5px;background:var(--blue);box-shadow:0 0 9px 1px rgba(21,105,255,.8)}
.ft-status .led::after{border-color:var(--blue)}
.ft-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:clamp(26px,3vw,44px);
  padding:clamp(34px,5vh,58px) 0;border-bottom:1px solid var(--hair)}
.ft-col h4{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);
  font-weight:500;margin-bottom:18px}
.ft-col a{position:relative;display:flex;align-items:baseline;gap:7px;padding:7px 0;color:#aab2c2;text-decoration:none;font-size:14px;
  width:fit-content;transition:color .3s var(--ease),transform .3s var(--ease)}
.ft-col a::after{content:'';position:absolute;left:0;bottom:2px;height:1px;width:100%;background:var(--blue);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .42s var(--ease)}
.ft-col a:hover{color:var(--ink);transform:translateX(3px)}
.ft-col a:hover::after{transform:scaleX(1)}
.ft-col a em{font-style:normal;font-size:11px;color:var(--ink-4)}
.ft-mails{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px clamp(26px,3vw,44px);
  padding:clamp(30px,4.4vh,50px) 0;border-bottom:1px solid var(--hair)}
.ft-mail{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 16px;border:1px solid var(--hair);
  border-radius:2px;max-width:520px;transition:border-color .35s var(--ease),background .35s var(--ease)}
.ft-mail:hover{border-color:rgba(21,105,255,.5);background:rgba(21,105,255,.06)}
.ft-mail a{color:#fff;text-decoration:none;font-size:15px}
.ft-mail small{display:block;margin-bottom:5px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-4)}
.ft-copy{appearance:none;border:1px solid var(--hair);background:transparent;cursor:pointer;color:var(--ink-3);padding:7px 11px;border-radius:2px;flex:none;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.ft-copy:hover{color:var(--ink);border-color:var(--ink-3)}
.ft-copy.ok{color:#25d366;border-color:rgba(37,211,102,.6)}
.ft-apps{display:grid;align-content:start;gap:10px}
.ft-apps > small{display:flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-4)}
.ft-apps > small b{font-weight:500;color:var(--blue);padding:3px 8px;border:1px solid rgba(21,105,255,.45);background:rgba(21,105,255,.1);
  border-radius:999px;letter-spacing:.14em}
.ft-stores{display:flex;flex-wrap:wrap;gap:10px}
.ft-store{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border:1px solid rgba(255,255,255,.2);border-radius:9px;
  background:#000;cursor:default;user-select:none;transition:border-color .35s var(--ease)}
.ft-store:hover{border-color:rgba(255,255,255,.38)}
.ft-store-i{width:24px;height:24px;flex:none}
.ft-store span{display:grid;line-height:1.1}
.ft-store i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ft-store b{margin-top:2px;font-size:17px;font-weight:500;letter-spacing:-.01em;color:#fff}
.ft-end{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 30px;align-items:end;padding-top:clamp(26px,4vh,44px)}
.ft-legal{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ft-up{appearance:none;border:1px solid var(--hair);background:transparent;cursor:pointer;color:var(--ink-3);padding:11px 16px;border-radius:2px;
  white-space:nowrap;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.ft-up em{font-style:normal;display:inline-block;transition:transform .38s var(--ease)}
.ft-up:hover{color:var(--ink);border-color:var(--blue)}
.ft-up:hover em{transform:translateY(-3px)}
.ft-disc{margin-top:22px;padding-bottom:8vw;font-size:11.5px;line-height:1.65;color:var(--ink-4);max-width:80ch}
.ft-word{position:absolute;left:50%;bottom:-2.2vw;z-index:1;pointer-events:none;user-select:none;transform:translateX(-50%);
  white-space:nowrap;font-size:19vw;font-weight:200;letter-spacing:-.045em;line-height:.8;color:#fff;opacity:.038}
/* el bloque de las tiendas, centrado en su fila: en el escritorio a media
   altura del correo; en el movil con el mismo aire arriba (hasta el correo)
   que abajo (hasta la raya), y las dos insignias repartiendose el ancho */
.ft-mails{align-items:center}
@media (max-width:760px){
  .ft-mails{row-gap:clamp(30px,4.4vh,50px)}
  .ft-stores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-store{justify-content:center;gap:8px;padding:9px 10px}
  .ft-store-i{width:22px;height:22px}
  .ft-store i{font-size:7.5px;letter-spacing:.06em}
  .ft-store b{font-size:16px}
}
@media (max-width:340px){
  .ft-stores{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .ft-top,.ft-end{grid-template-columns:1fr}
  .ft-word{font-size:26vw;bottom:-3vw}
}


/* ============ intro: la de la portada ============ */
.intro{display:none;position:fixed;inset:0;z-index:200;overflow:hidden;place-items:center;background:#1569ff}
html.js .intro{display:grid}
#intro-grid{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.intro-frame{position:absolute;inset:clamp(16px,2.4vw,30px);z-index:3;border:1px solid rgba(255,255,255,.16);pointer-events:none}
.intro-frame i{position:absolute;width:11px;height:11px}
.intro-frame i::before,.intro-frame i::after{content:'';position:absolute;background:#34e7ff;opacity:.9;box-shadow:0 0 8px rgba(52,231,255,.9)}
.intro-frame i::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px)}
.intro-frame i::after{top:50%;left:0;right:0;height:1px;transform:translateY(-.5px)}
.intro-frame i:nth-child(1){left:-6px;top:-6px}
.intro-frame i:nth-child(2){right:-6px;top:-6px}
.intro-frame i:nth-child(3){left:-6px;bottom:-6px}
.intro-frame i:nth-child(4){right:-6px;bottom:-6px}
.intro-hud{position:absolute;inset:clamp(30px,4vw,48px);z-index:4;pointer-events:none;font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.intro-hud > span{position:absolute;white-space:nowrap}
.intro-hud .tl{left:0;top:0}
.intro-hud .tr{right:0;top:0}
.intro-hud .bl{left:0;bottom:0;display:inline-flex;align-items:center;gap:9px}
.intro-hud .br{right:0;bottom:0;font-variant-numeric:tabular-nums}
.intro-hud .br b{font-weight:400}
.intro-log{position:absolute;left:0;bottom:26px;z-index:4;pointer-events:none;font-size:9.5px;letter-spacing:.14em;line-height:1.85}
.intro-log span{display:block;opacity:0;color:rgba(255,255,255,.55);transform:translateY(4px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.intro-log span.on{opacity:1;transform:none}
.intro-log span.hi{color:rgba(52,231,255,.95)}
.intro-hud .led{width:5px;height:5px;border-radius:50%;background:#34e7ff;box-shadow:0 0 9px rgba(52,231,255,.95);animation:introBlink 1s steps(2) infinite}
.intro-hud .led::after{display:none}
@keyframes introBlink{0%,49%{opacity:1}50%,100%{opacity:.2}}
.intro-hud .ok .led{animation:none}
.intro-bar{position:absolute;left:0;right:0;bottom:-9px;height:1px;background:rgba(255,255,255,.22);z-index:4}
.intro-bar i{position:absolute;left:0;top:-1px;height:3px;width:100%;background:#34e7ff;box-shadow:0 0 10px rgba(52,231,255,.9);
  transform:scaleX(0);transform-origin:0 50%}
.intro-stack{position:absolute;inset:0;z-index:5;display:grid;place-items:center}
.intro-apy{display:flex;align-items:flex-start;justify-content:center;color:#fff;opacity:0;font-variant-numeric:tabular-nums;
  line-height:.9;letter-spacing:-.04em;will-change:opacity,transform}
.intro-apy b{font-weight:200;font-size:clamp(46px,11vmin,120px)}
.intro-apy span{font-weight:200;font-size:clamp(22px,5vmin,54px);margin:.12em 0 0 .06em}
.intro-apy small{position:absolute;left:50%;top:calc(50% + clamp(34px,7.4vmin,80px));transform:translateX(-50%);
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.32em;text-indent:.32em;color:rgba(255,255,255,.8)}
.intro-word{position:absolute;left:50%;top:calc(50% + 34vmin);transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.42em;text-transform:uppercase;color:rgba(255,255,255,.92);text-indent:.42em;opacity:0;white-space:nowrap}
.intro-lock{overflow:hidden!important}
@media (max-width:680px){
  .intro-hud{font-size:8.5px;letter-spacing:.14em}
  .intro-hud .tr{display:none}
}
/* red de seguridad: si el JS de la intro no llega a correr, la capa se va sola */
html.js:not(.intro-lock) .intro{animation:introRescue 1ms linear 8s forwards}
@keyframes introRescue{to{opacity:0;visibility:hidden;pointer-events:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .intro{display:none!important}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .lift{opacity:1;transform:none}
  h1 .ln > span,.hw h2{transform:none}
  .eyebrow i{width:30px}
  .rule{width:74px}
}