:root{
  /* neutros */
  --ink-void:#08080A; --ink-900:#0C0C0F; --ink-800:#141417; --ink-700:#1E1E22;
  --ink-600:#2A2A30; --ash-500:#6B6B73; --ash-300:#9A9AA2; --bone-100:#ECEAE4;
  /* brasa */
  --ember-core:#FF7A33; --ember:#FF4A17; --ember-deep:#C2300A; --ember-ash:#5A1E0C;
  /* crypt frío */
  --crypt-bg:#0A0C12; --crypt-edge:#1A2030; --crypt-lock:#5C6B82;
  /* espaciado */
  --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
  /* forma */
  --radius-sm:2px; --radius-pill:999px;
  /* movimiento */
  --ease-out:cubic-bezier(0.16,1,0.3,1); --dur-fast:140ms; --dur-base:260ms;
  --glow-ember:0 0 24px rgba(255,74,23,0.45), 0 0 60px rgba(255,74,23,0.18);
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
[hidden]{ display:none !important; }
html{scroll-behavior:smooth;}
body{
  font-family:'Archivo',sans-serif; color:var(--bone-100);
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(255,74,23,0.10), transparent 62%),
    #050506;
  min-height:100vh; overflow-x:hidden; position:relative;
}
/* grano sutil */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{ position:relative; z-index:3; width:100%; max-width:620px; margin:0 auto; padding:0 var(--space-6); }

/* ---------- hero ---------- */
.hero .wrap{ padding-top:var(--space-8); padding-bottom:var(--space-16); }
.nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-12); }
.nav .wordmark{ font-size:26px; }
.lang{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px;
  font-family:'IBM Plex Mono'; font-size:13px; letter-spacing:1.5px; color:var(--ash-300); text-decoration:none; }
.lang:hover{ color:var(--ember-core); }
.kicker{ font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ember); margin-bottom:var(--space-4); }
h1{ font-family:'Anton',sans-serif; font-size:clamp(44px,12vw,72px); line-height:0.95; letter-spacing:0.5px;
  text-transform:uppercase; }
.hero .sub{ font-family:'Archivo',sans-serif; font-size:17px; line-height:1.65; color:var(--ash-300);
  margin-top:var(--space-6); max-width:42ch; }
.hero .sub b{ color:var(--bone-100); font-weight:600; }

/* ---------- store badges ---------- */
.badges{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); margin-top:var(--space-8); }
.badges a{ display:block; border-radius:8px; transition:transform var(--dur-fast); }
.badges a:active{ transform:scale(0.98); }
.badges a:focus-visible{ outline:2px solid var(--ember-core); outline-offset:3px; }
.badges img{ display:block; height:48px; width:auto; }
.ios-soon{ font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:0.5px; color:var(--ash-300); padding:0 var(--space-2); }
.microcopy{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--ash-300); margin-top:var(--space-3); }

/* ---------- vídeo de la app ---------- */
.phone{ width:min(280px,72vw); aspect-ratio:444/960; margin:var(--space-12) auto 0;
  border-radius:36px; overflow:hidden; background:#000; border:1px solid var(--ink-700);
  box-shadow:0 0 60px rgba(255,74,23,0.12); }
.phone video{ display:block; width:100%; height:100%; object-fit:cover; }

/* ---------- secciones ---------- */
section.block{ padding:var(--space-16) 0; border-top:1px solid var(--ink-800); }
.eyebrow{ font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ash-300); margin-bottom:var(--space-8); }
.steps{ display:flex; flex-direction:column; gap:var(--space-12); }
.step .n{ font-family:'Anton'; font-size:18px; color:var(--ember); margin-bottom:var(--space-3); }
.step h3{ font-family:'Anton'; font-size:26px; text-transform:uppercase; letter-spacing:0.5px; }
.step p{ font-family:'Archivo',sans-serif; font-size:16px; line-height:1.65; color:var(--ash-300); margin-top:var(--space-3); }
.step p b{ color:var(--bone-100); font-weight:600; }
/* el dato del insight, en mono = "lectura de la app" */
.step .data{ font-family:'IBM Plex Mono'; font-size:14px; color:var(--bone-100); font-weight:500; }
.step.crypt h3{ color:var(--crypt-lock); }

/* capturas: tira horizontal con snap (el scroll es del contenedor, no de la página) */
.shots{ display:flex; gap:var(--space-4); overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--space-6);
  margin:0 calc(-1 * var(--space-6)); padding:0 var(--space-6) var(--space-3);
  scrollbar-width:thin; scrollbar-color:var(--ink-600) transparent; }
.shots:focus-visible{ outline:2px solid var(--ember-core); outline-offset:-2px; }
.shots figure{ flex:0 0 200px; scroll-snap-align:start; }
.shots img{ display:block; width:100%; height:auto; border-radius:20px; border:1px solid var(--ink-700); }
.shots figcaption{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--ash-300); margin-bottom:var(--space-3); }

/* privacidad */
.privacy{ background:var(--crypt-bg); border:1px solid var(--crypt-edge); border-radius:var(--radius-sm);
  padding:var(--space-12) var(--space-8); text-align:center; }
.privacy h2{ font-family:'Anton'; font-size:clamp(30px,8vw,40px); text-transform:uppercase; line-height:1; }
.privacy p{ font-family:'Archivo',sans-serif; font-size:16px; line-height:1.65; color:var(--ash-300);
  margin-top:var(--space-6); max-width:42ch; margin-left:auto; margin-right:auto; }

/* cierre */
.closing{ text-align:center; }
.closing h2{ font-family:'Anton'; font-size:clamp(38px,11vw,64px); text-transform:uppercase; line-height:0.95; text-wrap:balance; }
/* emojis "cozy" en ceniza: lo que esta app NO es (gris, sin romper la paleta negro + brasa) */
.ash{ display:flex; justify-content:center; gap:var(--space-6); margin-top:var(--space-6);
  font-size:56px; line-height:1; filter:grayscale(1); opacity:0.6; }
.closing .sub{ font-family:'Archivo',sans-serif; font-size:16px; line-height:1.65; color:var(--ash-300);
  margin-top:var(--space-6); max-width:42ch; margin-left:auto; margin-right:auto; }
.closing .badges{ justify-content:center; }

/* footer */
footer{ padding:var(--space-16) 0 var(--space-12); text-align:center; border-top:1px solid var(--ink-800); }
footer .wordmark{ font-size:20px; }
footer .links{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--ash-500); margin-top:var(--space-4);
  letter-spacing:0.5px; }
footer .links a{ color:var(--ash-300); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }
footer .links a:hover{ color:var(--ember-core); }
footer .fine{ font-family:'IBM Plex Mono'; font-size:11px; color:var(--ash-500); margin-top:var(--space-4); }

@media (min-width:560px){ .steps{ gap:var(--space-16); } }