/* ============================================================
   Tokens — paleta exacta de BRAND.md. No inventar colores.
   ============================================================ */
:root{
  --ink:#080A07; --ink2:#10140e; --panel:#141911; --line:#242c1b;
  --lime:#CCFF00; --violet:#7C4DFF; --violet-lift:#B69DFF; --amber:#FF8A3D;
  --paper:#F1F5E8; --dim:#9aa88f; --faint:#6a7460;
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --max:1080px;
}

/* ============================================================
   La firma de la marca: el estado del candado repinta la página.
   Locked = violeta (pantalla).  Earned = lima (cuerpo).
   El violeta puro NUNCA va en texto (4.0:1). Para texto, --violet-lift.
   ============================================================ */
body{
  --accent:var(--violet);
  --accent-text:var(--violet-lift);
  --accent-ink:#ffffff;          /* texto sobre un relleno de acento */
  --accent-soft:rgba(124,77,255,.12);
  --accent-edge:rgba(124,77,255,.35);
}
body[data-state="earned"]{
  --accent:var(--lime);
  --accent-text:var(--lime);
  --accent-ink:#0a0d07;
  --accent-soft:rgba(204,255,0,.12);
  --accent-edge:rgba(204,255,0,.40);
}

/* La transición de temperatura es la recompensa: lenta y visible. */
body,.eyebrow,.btn--accent,.step .n,.ben .ic,.badge,.hold,.counter__n,.accent,
.price,.demo__count,summary::after,.social-proof{
  transition:background-color .7s ease,color .7s ease,border-color .7s ease,
             fill .7s ease,stroke .7s ease;
}

/* ============================================================
   Base
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--paper);font-family:var(--sf);
  -webkit-font-smoothing:antialiased;line-height:1.5;font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
section{padding:clamp(56px,9vw,104px) 0}
/* El header sticky mide 64px: sin esto, saltar a #pricing tapa el título. */
section[id],[id]{scroll-margin-top:84px}
.band{border-top:1px solid var(--line)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

h1,h2,h3{letter-spacing:-.035em;text-wrap:balance;margin:0}
h1{font-size:clamp(44px,8.5vw,88px);font-weight:800;line-height:.96}
h2{font-size:clamp(30px,5vw,52px);font-weight:800;line-height:1.02}
h3{font-size:20px;font-weight:700;letter-spacing:-.02em}
p{margin:0}
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-text);margin:0 0 16px;
}
.lead{font-size:clamp(18px,2.4vw,24px);color:var(--dim);max-width:52ch;margin-top:18px;line-height:1.5}
.accent{color:var(--accent-text)}

/* Botones: densos, no tiernos (BRAND.md). */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sf);font-weight:800;font-size:17px;letter-spacing:-.01em;
  border:none;border-radius:14px;padding:16px 26px;cursor:pointer;text-decoration:none;
}
.btn--accent{background:var(--accent);color:var(--accent-ink)}
.btn--accent:hover{filter:brightness(1.06)}
.btn--accent:disabled{opacity:.6;cursor:default}
.btn--ghost{background:transparent;color:var(--paper);border:1px solid var(--line)}
.btn--ghost:hover{border-color:var(--accent-edge)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Texto sólo para lectores de pantalla. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================
   Header y footer
   ============================================================ */
header.top{
  position:sticky;top:0;z-index:20;background:rgba(8,10,7,.72);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.top__in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{
  display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em;
  font-size:15px;text-decoration:none;
}
.brand svg{width:26px;height:26px;display:block;flex:none}
.top__nav{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:600;color:var(--dim)}
.top__nav a{text-decoration:none}
.top__nav a:hover{color:var(--paper)}
.top__nav .btn{padding:9px 16px;font-size:14px}
@media(max-width:640px){ .top__nav a:not(.btn){display:none} }

footer{border-top:1px solid var(--line);padding:36px 0;color:var(--faint);font-size:13px}
.foot__in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:center}
.foot__in a{text-decoration:none}
.foot__in a:hover{color:var(--paper)}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;overflow:hidden;padding-top:clamp(40px,6vw,72px)}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%,var(--accent-soft),transparent 70%);
  transition:background .7s ease;
}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;position:relative}
.hero__sub{font-size:clamp(17px,2.2vw,21px);color:var(--dim);margin:22px 0 28px;max-width:38ch}

.badge{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:var(--accent-text);background:var(--accent-soft);border:1px solid var(--accent-edge);
  border-radius:999px;padding:7px 14px;margin-bottom:26px;
}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* El botón de sostener. touch-action:none para que aguantar no scrollee. */
.hold{
  display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;max-width:440px;
  font-family:var(--sf);color:var(--paper);background:var(--panel);
  border:1px solid var(--accent-edge);border-radius:16px;padding:18px 24px;
  cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;
  margin-bottom:24px;position:relative;overflow:hidden;
}
.hold__label{font-weight:800;font-size:17px;letter-spacing:-.01em;text-transform:uppercase}
.hold__hint{font-size:12px;color:var(--faint);letter-spacing:.1em;text-transform:uppercase}
/* Pulso sutil en reposo: sin esto nadie descubre que se puede apretar. */
body[data-state="locked"] .hold{animation:breathe 2.6s ease-in-out infinite}
body[data-state="training"] .hold{border-color:var(--accent);background:var(--ink2)}
body[data-state="earned"] .hold{border-color:var(--accent);color:var(--accent-text);cursor:default}
body[data-state="earned"] .hold__hint{visibility:hidden}
@keyframes breathe{0%,100%{border-color:var(--accent-edge)}50%{border-color:var(--accent)}}

/* Formulario de waitlist */
.cta-slot{max-width:440px}
form.wl{display:flex;gap:10px;flex-wrap:wrap}
form.wl input[type=email]{
  flex:1;min-width:200px;font-family:var(--sf);font-size:16px;color:var(--paper);
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:15px 18px;outline:none;
}
form.wl input[type=email]:focus{border-color:var(--accent)}
form.wl input[type=email]::placeholder{color:var(--faint)}
form.wl .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wl__msg{font-size:14px;margin-top:12px;min-height:20px;color:var(--dim)}
.wl__msg.ok{color:var(--lime)}
.wl__msg.err{color:var(--amber)}
.trust{margin-top:18px;color:var(--faint);font-size:13px;max-width:44ch}
.social-proof{margin-top:10px;font-size:13px;font-weight:600;color:var(--accent-text)}

/* Dispositivo y dial de progreso.
   El dial es el grillete del logo: el tramo de acento es lo ganado. */
.hero__device{position:relative;display:flex;justify-content:center}
.phone{
  max-width:300px;width:100%;border-radius:32px;
  border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.gate{
  position:absolute;left:0;bottom:34px;width:152px;height:152px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(8,10,7,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.gate__ring{position:absolute;inset:8px;transform:rotate(-90deg)}
/* 339.3 = 2·π·54, el perímetro del círculo. --p va de 0 a 1. */
.ring__fill{
  stroke-dasharray:339.3;
  stroke-dashoffset:calc(339.3 - 339.3 * var(--p,0));
  transition:stroke-dashoffset .12s linear,stroke .7s ease;
}
.gate__count{display:flex;flex-direction:column;align-items:center;line-height:1}
.gate__n{font-size:52px;font-weight:800;letter-spacing:-.05em;color:var(--accent-text)}
.gate__of{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-top:6px;
}

@media(max-width:820px){
  .hero__grid{grid-template-columns:1fr;gap:36px}
  .hero__device{order:-1}
  .phone{max-width:250px}
  .gate{width:124px;height:124px;bottom:20px;left:calc(50% - 178px)}
  .gate__n{font-size:42px}
}
@media(max-width:420px){
  .gate{left:0}
}

/* ============================================================
   Secciones de contenido
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.step{background:var(--ink2);border:1px solid var(--line);border-radius:20px;padding:26px}
.step .n{
  font-size:15px;font-weight:800;color:var(--accent-ink);background:var(--accent);
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px;
}
.step p{color:var(--dim);margin-top:8px;font-size:15px}

.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.shots figure{margin:0}
.shots img{width:100%;border-radius:22px;border:1px solid var(--line)}
.shots figcaption{color:var(--faint);font-size:13px;margin-top:12px;text-align:center}

.bens{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px}
.ben{display:flex;gap:14px;background:var(--ink2);border:1px solid var(--line);border-radius:16px;padding:20px}
.ben .ic{
  flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-text);font-size:15px;
}
.ben b{display:block;margin-bottom:3px}
.ben span{color:var(--dim);font-size:14.5px}

/* Precio */
.price{
  max-width:520px;margin:44px auto 0;background:var(--ink2);border:1px solid var(--accent-edge);
  border-radius:24px;padding:clamp(28px,5vw,44px);text-align:center;
}
.price__n{font-size:clamp(48px,9vw,72px);font-weight:800;letter-spacing:-.05em;line-height:1}
.price__per{color:var(--dim);font-size:16px;margin-top:8px}
.price__list{list-style:none;padding:0;margin:26px 0 0;text-align:left;display:grid;gap:12px}
.price__list li{display:flex;gap:11px;color:var(--dim);font-size:15px;line-height:1.45}
.price__list li::before{content:"—";color:var(--accent-text);font-weight:800;flex:none}
.price__deal{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  color:var(--accent-text);font-weight:700;font-size:15px;
}

.founder{
  background:var(--ink2);border:1px solid var(--line);border-radius:24px;
  padding:clamp(28px,5vw,52px);max-width:760px;margin:0 auto;
}
.founder p{color:#d7dfcd;font-size:clamp(16px,2vw,18px);margin-bottom:16px;line-height:1.65}
.founder .sig{display:flex;align-items:center;gap:12px;margin-top:22px;color:var(--dim);font-size:14px}
.founder .sig b{color:var(--paper)}

.faq{max-width:760px;margin:36px auto 0}
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{
  cursor:pointer;font-weight:700;font-size:18px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent-text);font-size:24px;font-weight:400;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--dim);margin-top:12px;font-size:15.5px;line-height:1.6}

.final{text-align:center}
.final .cta-slot{margin:32px auto 0}
.final form.wl{justify-content:center}
.final .social-proof{margin-top:18px}
.share{margin-top:28px}
.share button{
  background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:14px;
  padding:13px 22px;font-family:var(--sf);font-size:14px;font-weight:700;cursor:pointer;
}
.share button:hover{color:var(--paper);border-color:var(--accent-edge)}

/* ============================================================
   Demo de cámara
   ============================================================ */
.demo{max-width:560px;margin:40px auto 0}
.demo__note{color:var(--faint);font-size:13px;margin-top:14px;line-height:1.5}
.demo__stage{margin-top:24px;position:relative}
.demo__video{
  width:100%;border-radius:20px;border:1px solid var(--line);
  background:var(--ink2);transform:scaleX(-1);
}
.demo__count{
  margin-top:16px;font-size:clamp(44px,10vw,72px);font-weight:800;
  letter-spacing:-.05em;line-height:1;color:var(--accent-text);
}
.demo__unit{font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.demo__status{color:var(--dim);font-size:14px;margin-top:10px;min-height:20px}
.demo__fail{color:var(--amber);font-size:14px;margin-top:18px}

/* ============================================================
   Botones de tienda (sólo después del lanzamiento)
   ============================================================ */
.store{display:flex;gap:12px;flex-wrap:wrap}
.final .store{justify-content:center}
.store__btn{
  display:inline-flex;align-items:center;gap:10px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:12px 20px;
  text-decoration:none;font-weight:700;
}
.store__btn:hover{border-color:var(--accent-edge)}
.store__btn svg{width:22px;height:22px;flex:none}
.store__qr{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.store__qr img{background:var(--paper);border-radius:10px;padding:6px}
.store__qr p{color:var(--faint);font-size:13px}
.final .store__qr{justify-content:center}

/* Post-lanzamiento el email baja a secundario, pero NO desaparece. */
body.launched .waitlist-cta{margin-top:20px;opacity:.75}
body.launched .waitlist-cta .btn--accent{background:transparent;color:var(--paper);border:1px solid var(--line)}

@media(max-width:820px){
  .steps,.shots,.bens{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}