/* =========================================================
   $DOOMER · BNB Chain
   Spine: "la unica luz del cuarto es el grafico".
   Regla: si algo es amarillo, es porque la pantalla lo ilumina.
   ========================================================= */

@font-face{font-family:"Rubik Mono One";src:url(fonts/rubik-mono-one.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/space-grotesk.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  /* LOCK · paleta BNB Chain (valores reales de Binance) */
  --bnb:#F0B90B;
  --bnb-deep:#B88A00;
  --ink:#0B0E11;
  --panel:#181A20;
  --line:#2B3139;
  --paper:#EAECEF;
  --blood:#F6465D;

  --display:"Rubik Mono One",Impact,sans-serif;
  --body:"Space Grotesk",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  /* ancho del monitor; lo usa el wordmark para llenar el borde */
  --inner:min(80vw,1000px);
  --bezel:14px;
  /* ancho util adentro del bisel: lo usan los titulos que llenan el borde */
  --fill:calc(var(--inner) - (2 * clamp(1rem,3vw,2.4rem)));

  /* la luz. la mueven el scroll y el grafico. */
  --glow:.55;
}

*,*::before,*::after{box-sizing:border-box}
html{background:#050607;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--body);
  color:var(--paper);
  line-height:1.5;
  /* sin overflow-x:hidden a proposito: taparia los desbordes en vez de arreglarlos */
}

/* ---------- EL CUARTO ---------- */
.room{
  position:fixed;inset:0;z-index:0;
  background:#050607 url(img/room-desktop.webp) center/cover no-repeat;
  filter:brightness(calc(.42 + var(--glow) * .85)) contrast(1.05);
  transition:filter .25s linear;
}
.spill{
  position:fixed;top:0;bottom:0;z-index:1;pointer-events:none;
  width:clamp(80px,15vw,300px);
  opacity:var(--glow);
  mix-blend-mode:screen;
  transition:opacity .25s linear;
}
.spill--l{
  right:calc(50% + var(--inner) / 2 + var(--bezel));
  background:linear-gradient(to left,rgba(240,185,11,.62),rgba(240,185,11,.16) 42%,rgba(240,185,11,0) 100%);
}
.spill--r{
  left:calc(50% + var(--inner) / 2 + var(--bezel));
  background:linear-gradient(to right,rgba(240,185,11,.62),rgba(240,185,11,.16) 42%,rgba(240,185,11,0) 100%);
}

/* el bisel: barras fijas al viewport, PEGADAS al borde de la columna.
   existe durante todo el scroll, que es lo que prometia el brief. */
.bezel{
  position:fixed;top:0;bottom:0;z-index:6;pointer-events:none;
  width:var(--bezel);background:#05070a;
}
.bezel--l{right:calc(50% + var(--inner) / 2);box-shadow:inset -1px 0 0 rgba(240,185,11,.10),-14px 0 26px rgba(0,0,0,.75)}
.bezel--r{left:calc(50% + var(--inner) / 2);box-shadow:inset 1px 0 0 rgba(240,185,11,.10),14px 0 26px rgba(0,0,0,.75)}

/* pantalla vertical (telefono y tablet en retrato): el cuarto es el de la cama */
@media (max-aspect-ratio:1/1){
  .room{background-image:url(img/room-mobile.webp)}
}

/* ---------- LA PANTALLA (el bisel) ---------- */
.screen{
  position:relative;z-index:2;
  width:var(--inner);
  margin:0 auto;
  background:var(--ink);
  overflow:hidden;
}

/* ---------- tira superior (marquee, nativo del vertical) ---------- */
.strip{
  border-bottom:1px solid var(--line);
  background:#07090c;
  overflow:hidden;
  padding:.5rem 0;
}
.strip__rail{
  display:flex;gap:.9rem;align-items:center;
  width:max-content;
  font-family:var(--body);font-weight:700;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:#7d848f;white-space:nowrap;
  animation:rail 34s linear infinite;
}
.strip__rail b{color:var(--bnb-deep)}
@keyframes rail{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 1 · HERO ---------- */
.hero{padding:clamp(1rem,3vw,2.2rem) clamp(1rem,3vw,2.4rem) clamp(1.6rem,4vw,3rem)}
.wordmark{
  font-family:var(--display);
  /* llena el ancho interior del monitor: 6 glifos de Rubik Mono One */
  font-size:calc(var(--fill) / 5.16);
  line-height:.82;
  margin:.35em 0 .22em;
  color:var(--bnb);
  letter-spacing:0;
  text-shadow:0 0 38px rgba(240,185,11,.35);
  white-space:nowrap;
}
.hero__say{
  font-size:clamp(1.02rem,2.1vw,1.4rem);
  color:#c3c8d0;max-width:56ch;margin:0 0 clamp(1.4rem,3vw,2.2rem);
}

/* ---------- el grafico arrastrable (wow tier-1) ---------- */
.chart{margin:0 0 1.6rem;position:relative}
#chart{
  display:block;width:100%;height:auto;
  background:transparent;border:0;border-radius:0;
  cursor:grab;touch-action:none;
}
/* el doomer vive DENTRO del cuadro del grafico: mira caer sus propias velas.
   el canvas le deja el margen izquierdo libre, asi no tapa ninguna vela. */
.chart__doomer{
  position:absolute;left:0;bottom:-4%;z-index:2;
  width:auto;height:106%;max-height:none;
  transform:scaleX(-1);              /* generado mirando a la izquierda: se da vuelta */
  pointer-events:none;user-select:none;
}
#chart.is-drag{cursor:grabbing}
.chart__hint{
  font-family:var(--body);font-weight:700;font-size:1rem;letter-spacing:0;
  color:var(--bnb);margin-top:.6rem;text-align:right;
}
.chart__hint.is-done{color:#7d848f;font-weight:400}
/* el asa: un pulso lento sobre la ultima vela, para que se vea que se agarra */
.chart__grab{
  position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;
  border:2px solid var(--bnb);border-radius:50%;pointer-events:none;
  opacity:0;transition:opacity .2s linear;
}
.chart__grab.is-on{opacity:1;animation:grab 2.1s ease-out infinite}
.chart__grab.is-off{opacity:0;animation:none}
@keyframes grab{
  0%{transform:scale(.62);opacity:.95}
  70%{transform:scale(1.45);opacity:0}
  100%{transform:scale(1.45);opacity:0}
}
#chart:focus-visible{outline:3px solid var(--bnb);outline-offset:3px}

.chart__meter{
  position:absolute;top:.6rem;right:.75rem;
  font-family:var(--body);font-weight:700;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:#7d848f;display:flex;gap:.5rem;align-items:baseline;
}
.chart__meter b{font-family:var(--mono);color:var(--bnb);font-weight:700;letter-spacing:0}

/* ---------- la barra del contrato ---------- */
.ca{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  background:none;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:0;padding:.85rem 0;
}
.ca__label{font-family:var(--body);font-weight:700;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#7d848f}
.ca code{
  font-family:var(--mono);font-size:clamp(.72rem,1.6vw,.95rem);
  color:var(--paper);word-break:break-all;flex:1 1 12ch;min-width:0;
}
.ca[data-live="0"] code{color:#7d848f}
.ca__btn{
  font-family:var(--body);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  background:none;color:var(--bnb);border:0;border-bottom:2px solid var(--bnb);
  border-radius:0;padding:.15rem 0;cursor:pointer;font-weight:700;
}
.ca[data-live="0"] .ca__btn{color:#5f6672;border-bottom-color:#3a414b;cursor:not-allowed}
.ca__btn:not([disabled]):hover{color:#ffd23f;border-bottom-color:#ffd23f}
.ca__note{font-size:.85rem;color:#7d848f;margin:.6rem 0 0}
.ca__note code{font-family:var(--mono);color:#8a919c}

/* ---------- titulos ---------- */
.h2{
  font-family:var(--display);
  font-size:clamp(1.7rem,6vw,3.7rem);
  line-height:1;margin:0 0 1.1rem;color:var(--bnb);
}
.h2--ink{color:#120d00}
.buy .h2{font-size:calc(var(--fill) / 8.6);margin-bottom:1.6rem}
@media (min-width:900px){
  .h2--fill[data-len="8"]{font-size:calc(var(--fill) / 6.8)}
  .h2--fill[data-len="9"]{font-size:calc(var(--fill) / 7.65)}
  .h2--fill[data-len="16"]{font-size:calc(var(--fill) / 13.6)}
  .h2--fill[data-len="17"]{font-size:calc(var(--fill) / 14.45)}
}

/* ---------- 2 · COMO COMPRAR (invertido a sangre) ---------- */
.buy{
  background:var(--bnb);color:#120d00;
  padding:clamp(1.6rem,4vw,3rem) clamp(1rem,3vw,2.4rem);
}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.steps li{
  font-size:clamp(1rem,1.55vw,1.18rem);
  border-top:3px solid #120d00;padding-top:1rem;min-width:0;
}
/* tinta negra directa sobre el amarillo: el registro de los bloques invertidos */
.step__ink{
  display:block;width:100%;max-width:210px;height:auto;
  margin:0 0 1rem;mix-blend-mode:multiply;
}
.steps b{font-weight:700}
.steps__foot{margin:2rem 0 0;max-width:58ch;font-size:.95rem;color:#3a2c00}

/* ---------- 3 · QUE ES UN DOOMER ---------- */
.what{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.2rem,3vw,2.4rem);align-items:center;
  padding:clamp(1.8rem,4vw,3.4rem) clamp(1rem,3vw,2.4rem);
  border-bottom:1px solid var(--line);
}
.what__art img{display:block;width:100%;height:auto;border-radius:10px}
.what__text p{font-size:clamp(1rem,1.9vw,1.2rem);color:#c3c8d0;margin:0 0 1rem;max-width:52ch}
.what__text b{color:var(--paper)}

/* ---------- 4 · SADNOMICS (invertida a sangre) ---------- */
.nomics{
  background:var(--bnb);color:#120d00;
  padding:0 0 clamp(1.8rem,4vw,3.4rem);
}
/* la plancha sangra de borde a borde del monitor */
.nomics__plate{margin:0 0 clamp(.4rem,1.5vw,1.2rem);line-height:0}
.nomics__plate img{
  display:block;width:100%;height:clamp(150px,23vw,250px);
  object-fit:cover;object-position:center;mix-blend-mode:multiply;
  /* el recorte cortaba el dibujo con una linea dura: se disuelve en el amarillo */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 66%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 66%,transparent 100%);
}
.nomics>:not(.nomics__plate){
  margin-left:clamp(1rem,3vw,2.4rem);margin-right:clamp(1rem,3vw,2.4rem);
}
.nomics__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:1.4rem;margin:0;
}
.nomics__grid>div{padding:.9rem 0 0;min-width:0;border-top:3px solid #120d00}
@media (min-width:760px){
  .nomics__grid{grid-template-columns:1.45fr 1fr 1.2fr 1.2fr}
}
.nomics dt{
  font-family:var(--body);font-weight:700;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:#4a3800;
}
.nomics dd{
  font-family:var(--mono);font-weight:700;font-size:clamp(1.05rem,2.1vw,1.6rem);
  margin:.45rem 0 0;color:#120d00;min-width:0;overflow-wrap:break-word;
}
.nomics__honest{margin:2rem 0 0;max-width:60ch;color:#3a2c00;font-size:.95rem}

/* ---------- 5 · GALERIA ---------- */
.gallery{padding:clamp(1.8rem,4vw,3.4rem) clamp(1rem,3vw,2.4rem);border-bottom:1px solid var(--line)}
.gallery__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.gallery figure{margin:0;min-width:0}
.gallery img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line)}
.gallery figcaption{
  font-family:var(--body);font-size:.88rem;letter-spacing:0;
  color:#7d848f;margin-top:.6rem;
}

/* ---------- 6 · EL CUARTO (la revelacion) ---------- */
.room-out{padding:0}
.scene{
  position:relative;margin:0;line-height:0;background:#05070a;
  min-height:clamp(380px,74vh,760px);
}
.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* el texto vive DENTRO del cuadro, en la zona oscura de abajo */
.scene__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(2.5rem,9vw,6rem) clamp(1rem,3vw,2.4rem) clamp(1.2rem,3vw,2.2rem);
  line-height:1.5;
  background:linear-gradient(to top,
    rgba(5,7,10,.97) 0%,rgba(5,7,10,.9) 34%,rgba(5,7,10,.55) 66%,rgba(5,7,10,0) 100%);
}
.scene__cap .h2{margin-bottom:.5rem}
.scene__say{margin:0 0 .35rem;max-width:44ch;font-size:clamp(1rem,1.8vw,1.2rem);color:var(--paper)}
.scene__say--dim{color:#9aa1ac;margin-bottom:1.1rem}
/* destinos: tipografia, no pastillas */
.links{list-style:none;display:flex;flex-wrap:wrap;gap:0 1.6rem;margin:0;padding:0}
.links li+li{border-left:1px solid #3a414b;padding-left:1.6rem}
.link{
  display:inline-flex;align-items:baseline;gap:.5rem;
  font-family:var(--body);font-weight:700;font-size:clamp(.85rem,1.6vw,1rem);
  letter-spacing:.14em;text-transform:uppercase;color:#7d848f;
}
.link i{font-style:normal;font-weight:400;letter-spacing:.06em;font-size:.78em;color:#5f6672}
a.link i{color:var(--bnb-deep)}
a.link{color:var(--bnb);text-decoration:none}
a.link:hover{color:#ffd23f;text-decoration:underline;text-underline-offset:.35em}
.disclaimer{
  font-size:.88rem;color:#8a919c;max-width:64ch;margin:0;
  padding:clamp(1.4rem,3vw,2.2rem) clamp(1rem,3vw,2.4rem) clamp(2rem,4vw,3rem);
  line-height:1.5;
}

/* ---------- movil: el cuarto es la cama, el bisel es el telefono ---------- */
/* el personaje se apila hasta 900 px: absoluto ahi abajo se comia el grafico */
@media (max-width:900px){
  .chart{display:flex;flex-direction:column}
  #chart{order:1}
  .chart__doomer{
    order:2;position:static;height:auto;width:52%;max-width:230px;
    margin:.2rem 0 0 auto;display:block;transform:none;
  }
  .chart__hint{order:3;text-align:left}
  .chart__meter{top:.1rem;right:.1rem}
}

@media (max-width:760px){
  :root{--inner:min(94vw,560px);--bezel:10px}

  .what{grid-template-columns:1fr}
  .gallery__grid{grid-template-columns:1fr}
  .links{gap:.7rem 1.4rem}
  .links li+li{border-left:0;padding-left:0}
  .what__art{max-width:320px}
  .hero__say br{display:none}
}

/* ---------- pantallas grandes: la columna acompana al monitor ---------- */
@media (min-width:1800px){ html{font-size:17.5px} }
@media (min-width:2600px){ html{font-size:19px} }
@media (min-width:1800px){ :root{--inner:min(70vw,1240px);--bezel:16px} }
@media (min-width:2400px){ :root{--inner:min(58vw,1460px);--bezel:20px} }
@media (min-width:3200px){ :root{--inner:min(50vw,1700px);--bezel:24px} }

@media (prefers-reduced-motion:reduce){
  .strip__rail{animation:none}
  .room,.spill{transition:none}
}