/* LAIKA — la pagina es UNA manta. No hay cajas: hay objetos apoyados sobre la tela. */

:root{
  /* muestreados de los assets reales, no inventados */
  --field:      #1B4675;
  --field-deep: #0E2B4E;
  --cream:      #F3EDE1;
  --suit:       #DCD7CA;
  --slate:      #5F7590;
  --flame:      #ED8D11;   /* relleno: pastillas, botones, subrayados */
  --flame-text: #F2A63C;   /* texto chico sobre azul: 4.75:1 */

  --ink:        #08203C;
  --measure:    62ch;
  --pad:        clamp(20px, 5vw, 72px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{
  margin:0;
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  color:var(--cream);
  background:var(--field) url("assets/blanket.webp") center top / cover no-repeat;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* el pelo de la tela: tile chico, se repite invisible */
.fuzz{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url("assets/fuzz.png") repeat;
  background-size:96px 96px;
  opacity:.34; mix-blend-mode:soft-light;
}
/* segunda escala: mechones, para que la tela no lea como acuarela azul */
.fuzz::after{
  content:""; position:absolute; inset:0;
  background:url("assets/fuzz.png") repeat; background-size:340px 340px;
  opacity:.5; mix-blend-mode:soft-light;
}

/* ---------- el hilo que cose toda la pagina ---------- */
.stitch{
  position:absolute; top:0; left:0; width:100%; z-index:1; pointer-events:none;
  overflow:visible;
}
#thread{
  fill:none; stroke:#EFEDE4; stroke-width:2.4; stroke-linecap:round;
  opacity:.75;
  filter:drop-shadow(0 2px 3px rgba(4,16,38,.55));
}
#beads circle{ fill:#F7F5EE; opacity:0; transition:opacity .25s ease; }
#beads circle.on{ opacity:1; }

main,.nav,.foot{ position:relative; z-index:2; }

/* ---------- nav (no es una fila default: la marca cuelga, los links van al ras) ---------- */
.nav{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; padding:22px var(--pad) 0;
}
.nav__mark{
  font-family:"Bagel Fat One",system-ui; font-size:clamp(18px,2vw,24px);
  letter-spacing:.14em; color:var(--cream);
  text-shadow:0 2px 10px rgba(6,20,44,.5);
}
.nav__links{ display:flex; align-items:center; gap:clamp(12px,2vw,28px); }
.nav__links a{
  color:#CBDCF0; text-decoration:none; font-size:14px; font-weight:500;
  border-bottom:1.5px dashed rgba(203,220,240,.42); padding-bottom:2px;
}
.nav__links a:hover{ color:var(--cream); border-bottom-color:var(--flame); }
.nav__cta{
  border:0 !important; background:var(--flame); color:#20160A !important;
  font-weight:700; padding:9px 18px; border-radius:999px;
}
.nav__cta:hover{ filter:brightness(1.08); }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  align-items:center; gap:clamp(16px,3vw,56px);
  padding:clamp(24px,6vh,80px) var(--pad) clamp(40px,8vh,90px);
}
.wordmark{
  width:min(430px,74%); height:auto; display:block;
  filter:drop-shadow(0 12px 22px rgba(5,18,42,.55));
  margin-bottom:clamp(12px,2vh,22px);
}
.tagline{
  font-family:"Bagel Fat One",system-ui; font-weight:400;
  font-size:clamp(30px,5.4cqi,58px); line-height:1.04; margin:0 0 14px;
  color:var(--cream); text-shadow:0 3px 18px rgba(5,18,42,.5);
}
.hero__text{ container-type:inline-size; max-width:640px; }
.lede{
  font-size:clamp(15px,1.15rem,19px); line-height:1.6; color:#D8E4F2;
  max-width:46ch; margin:0 0 26px;
}
.lede em{ color:var(--cream); font-style:normal; font-weight:700; }

/* chip del contrato: parche de fieltro con puntada, no un input */
.ca{
  display:flex; width:max-content; max-width:100%; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--cream); color:var(--ink);
  border-radius:16px; padding:12px 14px; position:relative;
  box-shadow:0 12px 26px rgba(4,14,34,.42);
}
.ca::after{
  content:""; position:absolute; inset:5px; border-radius:11px;
  border:2px dashed rgba(56,82,126,.42); pointer-events:none;
}
.ca__label{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#5B7196; position:relative; z-index:1;
}
.ca__value{
  font-family:"DM Mono",ui-monospace,monospace; font-size:clamp(12px,1.6vw,15px);
  position:relative; z-index:1; word-break:break-all;
}
.ca__copy{
  position:relative; z-index:1; border:0; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:12px; letter-spacing:.06em;
  background:var(--ink); color:var(--cream); border-radius:999px; padding:7px 14px;
}
.ca__copy[disabled]{ opacity:.35; cursor:not-allowed; }
.ca__warn{ font-size:13px; color:#A9C1DD; margin:10px 0 22px; max-width:44ch; }

.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-weight:700; font-size:16px; padding:14px 26px; border-radius:999px;
}
.btn--primary{ background:var(--flame); color:#20160A; box-shadow:0 10px 24px rgba(160,80,10,.32); }
.btn--primary:hover{ filter:brightness(1.07); }
.btn--primary span{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(32,22,10,.18); padding:3px 8px; border-radius:999px;
}
.btn--primary.is-waiting{ background:#C7D6E6; color:#2A3B50; box-shadow:none; }
.btn--ghost{ color:var(--cream); border:2px solid rgba(243,237,225,.42); }
/* pre-launch: hoy la unica conversion real es entrar al grupo */
.is-prelaunch .btn--ghost{
  background:var(--flame); color:#20160A; border-color:transparent;
  box-shadow:0 10px 24px rgba(160,80,10,.32);
}
.is-prelaunch .btn--ghost:hover{ filter:brightness(1.07); color:#20160A; }
.btn--ghost:hover{ border-color:var(--flame); color:var(--flame); }

/* el peluche se apoya EN el borde inferior del hero: cierra la composicion
   y de paso saca de cuadro el ultimo pixel del recorte */
.hero__toy{ margin:0 0 -24px; justify-self:center; align-self:end; }
.hero__toy img{
  width:min(430px,100%); height:auto; display:block;
  filter:drop-shadow(0 7px 6px rgba(4,14,34,.55)) drop-shadow(0 30px 44px rgba(4,14,34,.42));
}

/* props apoyados sobre la tela */
.prop{ position:absolute; pointer-events:none;
  filter:drop-shadow(0 5px 5px rgba(4,14,34,.5)) drop-shadow(0 16px 26px rgba(4,14,34,.32)); }
.prop--saturno{ width:clamp(90px,13vw,190px); top:6%;  right:2%;  transform:rotate(-8deg); }
.prop--cometa { width:clamp(90px,13vw,200px); top:11%; left:36%;  transform:rotate(-14deg); opacity:.9; }
.prop--tierra { width:clamp(92px,10vw,158px); bottom:4%; right:4%; }
.prop--marte  { width:clamp(56px,6vw,96px);   top:9%;   right:25%; }
.prop--jupiter{ width:clamp(110px,12vw,196px); top:2%;  right:1%;  transform:rotate(6deg); }

/* la foto de la luna se apoya en la banda del lore, girada como una copia sobre la mesa */
.moonshot{
  position:absolute; top:-6%; right:-2%; width:clamp(230px,28vw,400px); margin:0;
  transform:rotate(2.4deg); z-index:1;
}
.moonshot img{
  width:100%; height:auto; display:block;
  border:9px solid var(--cream); border-radius:3px;
  box-shadow:0 10px 12px rgba(4,14,34,.34), 0 30px 52px rgba(4,14,34,.46);
}
.moonshot figcaption{
  font-size:13px; color:#A9C1DD; margin-top:10px; text-align:center;
  font-style:italic;
}

/* ---------- bandas ---------- */
.band{ padding:clamp(56px,8vh,108px) var(--pad); position:relative; }
.band__inner{ max-width:1080px; margin-inline:auto; position:relative; }
.kicker{
  font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--flame-text); margin:0 0 14px;
}
.band h2{
  font-family:"Bagel Fat One",system-ui; font-weight:400;
  font-size:clamp(26px,4.2vw,46px); line-height:1.12; margin:0 0 20px;
  max-width:22ch; color:var(--cream); text-shadow:0 3px 16px rgba(5,18,42,.45);
}
.h2--big{ font-size:clamp(34px,6.4vw,76px); line-height:1.02; max-width:14ch; }
.body{ font-size:clamp(15px,1.05rem,18px); line-height:1.65; color:#D5E2F1; max-width:var(--measure); margin:0 0 16px; }
.body--turn{ color:var(--cream); font-weight:500; }
.fineprint{ font-size:14px; line-height:1.6; color:#A9C1DD; max-width:52ch; margin:16px 0 0; }

/* la fundacion vive sobre una lamina de fieltro crema apoyada en la manta */
.band--fees .band__inner{
  background:var(--cream); color:var(--ink);
  border-radius:26px; padding:clamp(30px,4.6vw,58px);
  transform:rotate(-.5deg);
  box-shadow:0 8px 10px rgba(4,14,34,.30), 0 30px 58px rgba(4,14,34,.40);
}
.band--fees .band__inner::after{
  content:""; position:absolute; inset:12px; border-radius:16px;
  border:2px dashed rgba(56,82,126,.34); pointer-events:none;
}
.band--fees .kicker{ color:#A85D12; }
.band--fees h2{ color:var(--ink); text-shadow:none; }
.band--fees .body{ color:#3B5372; }
.band--fees .fineprint{ color:#5B7196; }
.band--fees .patch{ background:var(--ink); box-shadow:0 12px 24px rgba(4,14,34,.3); }
.band--fees .patch::after{ border-color:rgba(203,220,240,.34); }
.band--fees .patch__k{ color:#9FBBDC; }
.band--fees .patch__v{ color:var(--cream); }
.band--fees .patch:hover .patch__v{ color:var(--flame); }

/* parche de la fundacion */
.patch{
  display:inline-block; text-decoration:none; margin-top:10px;
  background:var(--cream); color:var(--ink); border-radius:18px;
  padding:18px 24px; position:relative; box-shadow:0 14px 30px rgba(4,14,34,.42);
}
.patch::after{ content:""; position:absolute; inset:6px; border-radius:13px; border:2px dashed rgba(56,82,126,.42); }
.patch__k{
  display:block; font-size:11px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:#5B7196; margin-bottom:6px; position:relative; z-index:1;
}
.patch__v{
  display:block; font-family:"DM Mono",monospace; font-size:clamp(13px,1.7vw,19px);
  font-weight:500; position:relative; z-index:1; word-break:break-word;
}
.patch:hover{ transform:translateY(-2px); }
.patch:hover .patch__v{ color:#A2540A; }

/* el contador de lo entregado: dos datos sobre la lamina de fieltro */
.tally{
  display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,54px);
  margin-top:26px; padding-top:22px; border-top:2px dashed rgba(56,82,126,.3);
}
.tally__fig{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.tally__k{
  font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#5B7196;
}
.tally__v{
  font-family:"Bagel Fat One",system-ui; font-weight:400;
  font-size:clamp(30px,4.6vw,50px); line-height:1; color:var(--ink);
}
.tally[data-state="loading"] .tally__v{ opacity:.35; }
.tally__note{ font-size:13px; color:#5B7196; line-height:1.5; }
.tally__note a{ color:#A85D12; font-weight:700; }
.tally__fig--addr{ justify-content:flex-end; }
.tally__addr{
  font-family:"DM Mono",monospace; font-size:15px; color:var(--ink);
  background:rgba(56,82,126,.10); border-radius:8px; padding:6px 10px; width:max-content; max-width:100%;
}
.tally__copy{
  border:0; cursor:pointer; align-self:flex-start; margin-top:2px;
  font-family:inherit; font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--ink); color:var(--cream); border-radius:999px; padding:5px 12px;
}

/* pasos */
.steps{ list-style:none; padding:0; margin:34px 0 0; display:grid; gap:clamp(18px,3vw,34px); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.step img{ width:74px; height:auto; display:block; margin-bottom:14px; filter:drop-shadow(0 10px 14px rgba(4,14,34,.45)); }
.step h3{ font-family:"Bagel Fat One",system-ui; font-weight:400; font-size:20px; margin:0 0 8px; color:var(--cream); }
.step p{ font-size:15px; line-height:1.6; color:#CBDBEC; margin:0; }
.step{ position:relative; }

/* la mesa: fotos apoyadas, no un grid de cards */
.table__grid{
  margin-top:36px; display:grid; gap:clamp(14px,2.4vw,30px);
  grid-template-columns:repeat(6,1fr);
}
.photo{ margin:0; }
.photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  border:9px solid var(--cream); border-radius:3px;
  box-shadow:0 18px 34px rgba(4,14,34,.5);
}
/* dos escenas con el personaje + cuatro macros del material */
.photo--a { grid-column:1 / span 4; grid-row:1; transform:rotate(-1.4deg); }
.photo--d1{ grid-column:5 / span 2; grid-row:1; transform:rotate(2.2deg); margin-top:34px; }
.photo--d2{ grid-column:1 / span 2; grid-row:2; transform:rotate(-1.8deg); margin-top:-10px; }
.photo--d3{ grid-column:3 / span 2; grid-row:2; transform:rotate(1.2deg); margin-top:16px; }
.photo--c { grid-column:5 / span 2; grid-row:2; transform:rotate(-2.4deg); }
.photo--d4{ grid-column:2 / span 4; grid-row:3; transform:rotate(.7deg); margin-top:-6px; }
/* los macros llevan marco mas fino: son recortes, no laminas */
.photo--det img{ border-width:7px; }

/* ---------- pie ---------- */
.foot{ padding:clamp(56px,9vh,110px) var(--pad) clamp(64px,8vh,110px);
  background:linear-gradient(180deg,rgba(10,32,60,0) 0%,rgba(8,26,50,.6) 55%,rgba(7,22,44,.84) 100%); }
.foot__inner{ max-width:1080px; margin-inline:auto; position:relative; }
.foot__toy{ width:clamp(110px,14vw,190px); height:auto; position:absolute; right:0; bottom:-10px; opacity:.9; filter:drop-shadow(0 16px 24px rgba(4,14,34,.55)); }
.foot__links{ display:flex; gap:22px; flex-wrap:wrap; margin-bottom:22px; }
.link{ color:var(--cream); text-decoration:none; font-weight:700; border-bottom:2px solid var(--flame); padding-bottom:2px; }
.link:hover{ color:var(--flame); }
.disclaimer{ font-size:13px; line-height:1.7; color:#9DB6D2; max-width:66ch; margin:0; }

/* captura de QA: el hero deja de depender del viewport */
.qa .hero{ min-height:900px; }
.qa{ scroll-behavior:auto; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  /* carril reservado para el hilo: no lo esquiva, tiene columna propia */
  .nav,.hero,.band,.foot{ padding-left:calc(var(--pad) + 30px); }
  .hero{ grid-template-columns:1fr; min-height:auto; padding-top:8px; }
  .hero__toy{ order:-1; justify-self:center; }
  .hero__toy img{ width:min(300px,72vw); }
  /* en angosto los props se apoyarian ENCIMA del texto: se retiran y el mundo
     de fieltro lo cuenta la galeria */
  .prop--cometa,.prop--tierra,.prop--marte,.prop--jupiter{ display:none; }
  .moonshot{ position:static; width:min(340px,78%); margin:26px auto 0; transform:rotate(1.6deg); }
  .prop--saturno{ width:74px; top:1.5%; right:4%; }
  .table__grid{ grid-template-columns:repeat(2,1fr); }
  .photo{ grid-column:auto !important; grid-row:auto !important; }
  .photo--a,.photo--f{ grid-column:span 2 !important; }
  .foot__toy{ position:static; margin:0 0 18px; }
}
@media (max-width:560px){
  .nav__links a:not(.nav__cta){ display:none; }
  .table__grid{ grid-template-columns:1fr; }
  .photo{ grid-column:auto !important; grid-row:auto !important; }
  .photo{ transform:none !important; }
}