/* Landing de BLAB. Mismos tokens que la app: papel crema, tinta, morado de
   marca, borde de 1,4 y sombra dura sin blur. La app es solo modo claro
   (`.preferredColorScheme(.light)`), así que aquí tampoco hay modo oscuro.
   Como en la app, nada va rotado (decisión 2026-08-03): el movimiento sale
   del color por bandas, del escalonado y de las animaciones, no de la
   inclinación. Todo se apaga con `prefers-reduced-motion`. */
:root {
  color-scheme: light;
  --paper: #f7f3eb;
  --ink: #131211;
  --brand: #6c3bff;
  --pink: #ff1f8e;
  --muted: #666;
  --radius: 19px;
  --shadow: 3.5px 3.5px 0 var(--ink);
  --shadow-lg: 6px 6px 0 var(--ink);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, system-ui, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); }

/* Etiquetas técnicas: monoespaciada en mayúsculas, como en la app. */
.mono {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Titulares: condensada, negra, muy apretada. */
h1, h2, h3 {
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.02;
  font-stretch: condensed;
  margin: 0;
}

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }

/* ---------------------------------------------------------------- Navegación */
.nav {
  border-bottom: 1.4px solid var(--ink);
  background: rgba(247, 243, 235, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.nav-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.brand {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -1px;
  text-decoration: none;
  color: var(--ink);
}
.nav a:not(.brand) {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
}
.nav a:not(.brand):hover { color: var(--ink); }
.nav .spacer { margin-left: auto; }
.nav-cta {
  color: #fff !important;
  background: var(--ink);
  border: 1.4px solid var(--ink);
  border-radius: 999px;
  padding: 7px 15px;
  box-shadow: 2px 2px 0 var(--ink);
  transition: background .12s ease, transform .12s ease;
}
.nav-cta:hover { background: var(--brand); transform: translate(-1px, -1px); }

/* -------------------------------------------------------------- Piezas base */
.card {
  background: #fff;
  border: 1.4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.4px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
  background: #fff;
  padding: 9px 16px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.eyebrow { color: var(--muted); display: block; margin-bottom: 10px; }

section { padding: 68px 0; border-top: 1.4px solid var(--ink); }
section h2 { font-size: clamp(32px, 6.4vw, 52px); }
section .lead {
  max-width: 620px;
  font-size: 17px;
  color: #3a3735;
  margin: 12px 0 32px;
}

/* Botones de tienda: los badges oficiales de Apple y Google, sin retocar (sus
   guías de marca no permiten bordes, sombras ni recortes). iOS primero. Los dos
   SVG llenan su caja, así que con el mismo alto se ven del mismo tamaño; el de
   Google sale algo más ancho por su proporción, y su guía pide justo eso: que
   nunca sea menor que el de otra tienda. Mientras no haya fichas publicadas son
   botones, no enlaces: abren el aviso de "muy pronto". */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.store {
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform .12s ease;
}
.store:hover { transform: translateY(-2px); }
.store img { height: 54px; width: auto; }

/* Aviso de "muy pronto": la misma tarjeta que el resto de la web. */
.soon {
  border: 1.4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  background: #fff;
  color: var(--ink);
  padding: 28px;
  max-width: 420px;
  width: calc(100% - 40px);
}
.soon::backdrop { background: rgba(19, 18, 17, 0.55); }
.soon h2 { font-size: clamp(30px, 7vw, 40px); }
.soon p { margin: 14px 0 24px; color: #3a3735; }
.soon button {
  display: block;
  width: 100%;
  background: var(--ink);
  color: #fff;
  border: 1.4px solid var(--ink);
  border-radius: 14px;
  padding: 14px;
  font: inherit;
  font-weight: 900;
  font-size: 18px;
  cursor: pointer;
}
.soon button:hover { background: var(--brand); }

.cta-note { margin: 12px 0 0; color: var(--muted); }

/* ------------------------------------------------------------------ Portada */
.hero {
  position: relative;
  padding: 56px 0 64px;
  border-top: 0;
  overflow: hidden;
  /* Rejilla de puntos: da textura sin competir con el titular. */
  background-image: radial-gradient(circle, rgba(19, 18, 17, 0.10) 1.2px, transparent 1.3px);
  background-size: 24px 24px;
}
/* Mancha de color detrás del logotipo, recortada por el overflow del hero. */
.hero::before {
  content: "";
  position: absolute;
  top: -180px;
  left: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 59, 255, 0.20), transparent 68%);
  pointer-events: none;
}
.hero > .wrap { position: relative; }
.hero-grid { display: grid; gap: 44px; align-items: center; }
.logo {
  font-size: clamp(84px, 19vw, 176px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.84;
  margin: 0;
  font-stretch: condensed;
}
.logo .dot { color: var(--brand); }
.hero .tagline { margin: 16px 0 0; color: var(--muted); }
.hero .claim {
  font-size: clamp(21px, 3.4vw, 28px);
  font-weight: 600;
  line-height: 1.32;
  margin: 22px 0 0;
  max-width: 520px;
}
.hero-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.hero-stats li {
  border: 1.4px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  box-shadow: 2px 2px 0 var(--ink);
  padding: 7px 14px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hero-stats b { color: var(--brand); font-size: 13px; }

/* Columna derecha: la tarjeta del reto y, montadas encima, las reacciones. */
.hero-visual { position: relative; max-width: 480px; width: 100%; justify-self: center; }
.challenge {
  background: var(--pink);
  color: #fff;
  border: 1.4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 24px;
}
.challenge .eyebrow { color: var(--ink); }
.challenge p {
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 18px;
  font-stretch: condensed;
}
/* Los cinco modos: uno se enciende cada dos segundos, como al elegir en la app. */
.mode-strip { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; padding: 0; list-style: none; }
.mode-strip li {
  background: #fff;
  color: var(--ink);
  border: 1.4px solid var(--ink);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.challenge .fake-button {
  display: block;
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  font-weight: 900;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.hero-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -16px 0 0 14px;
  padding: 0;
  list-style: none;
  position: relative;
}
.hero-reactions li {
  background: #fff;
  border: 1.4px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 700;
}

/* ---------------------------------------------- Capturas, sobre banda oscura */
.band-ink { background: var(--ink); color: var(--paper); }
.band-ink .lead { color: rgba(247, 243, 235, 0.72); }
.showcase { padding-bottom: 78px; }
.showcase .shots { display: grid; gap: 30px; grid-template-columns: 1fr; justify-items: center; }
.showcase figure { margin: 0; width: 100%; max-width: 300px; }
.showcase img {
  border: 1.4px solid var(--ink);
  border-radius: 28px;
  box-shadow: 6px 6px 0 var(--paper);
  width: 100%;
  height: auto;
}
.showcase figcaption {
  margin-top: 14px;
  text-align: center;
  color: rgba(247, 243, 235, 0.75);
}

/* --------------------------------------------------------- Cómo funciona */
.steps { display: grid; gap: 18px; grid-template-columns: 1fr; }
.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  border: 1.4px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}
.step h3 { font-size: 22px; margin: 14px 0 6px; }
.step p { margin: 0; color: #3a3735; }

/* ------------------------------------------------------------------- Modos */
.modes { display: grid; gap: 14px; grid-template-columns: 1fr; }
.mode { padding: 18px; border-top: 6px solid var(--accent, var(--brand)); }
.mode .emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: 1.4px solid var(--ink);
  background: var(--accent, var(--brand));
  font-size: 22px;
  line-height: 1;
}
.mode h3 { font-size: 19px; margin: 12px 0 4px; }
.mode p { margin: 0; color: var(--muted); font-size: 15px; }

/* ------------------------------------------------- Mundos: cinta en marcha */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee + .marquee { margin-top: 12px; }
.marquee-track { display: flex; gap: 10px; width: max-content; animation: slide 42s linear infinite; }
.marquee.rev .marquee-track { animation-direction: reverse; animation-duration: 50s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-row { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
@keyframes slide { to { transform: translateX(calc(-50% - 5px)); } }
.world {
  color: #fff;
  border: 1.4px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
  padding: 9px 16px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* ------------------------------------------ Reacciones, sobre banda morada */
.band-brand { background: var(--brand); color: #fff; }
.band-brand .lead { color: rgba(255, 255, 255, 0.92); }
/* Las tarjetas son blancas: su texto no puede heredar el blanco de la banda. */
.band-brand .card, .band-ink .card { color: var(--ink); }
.reactions { display: grid; gap: 14px; grid-template-columns: 1fr; }
.reaction { padding: 16px 18px; }
.reaction strong { display: block; font-size: 17px; margin-bottom: 2px; }
.reaction span { color: var(--muted); font-size: 15px; }

/* --------------------------------------------- Promesas: lo que no hacemos */
.promises { display: grid; gap: 16px; grid-template-columns: 1fr; }
.promise { padding: 22px; }
.promise h3 { font-size: 21px; margin-bottom: 6px; }
.promise p { margin: 0; color: #3a3735; }
.no {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.no p { color: rgba(247, 243, 235, 0.78); }

/* ------------------------------------------------------------- Cierre y pie */
.closing {
  background: var(--pink);
  color: #fff;
  text-align: center;
  padding: 76px 0;
}
.closing h2 { max-width: 760px; margin: 0 auto; }
.closing .stores { justify-content: center; }
.closing .cta-note { color: var(--ink); }

footer {
  border-top: 1.4px solid var(--ink);
  padding: 34px 0 56px;
}
footer .cols { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--ink); }
.badge {
  border: 1.4px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
  padding: 6px 14px;
  font-weight: 700;
}

/* ------------------------------------------------------------------ Anchos */
@media (max-width: 560px) {
  .nav-cta { display: none; }
}
@media (min-width: 720px) {
  .steps, .promises { grid-template-columns: repeat(3, 1fr); }
  .modes { grid-template-columns: repeat(3, 1fr); }
  .reactions { grid-template-columns: repeat(2, 1fr); }
  /* Las capturas no van en línea recta: la del medio sube y crece. */
  .showcase .shots { grid-template-columns: 1fr 1.16fr 1fr; align-items: start; gap: 24px; }
  .showcase figure { max-width: none; }
  .showcase .shots > figure:nth-child(1) { margin-top: 46px; }
  .showcase .shots > figure:nth-child(2) { margin-top: 0; }
  .showcase .shots > figure:nth-child(3) { margin-top: 66px; }
  /* Mismo escalonado en las tarjetas: rompe la rejilla plana. */
  .steps > .card:nth-child(2), .promises > .card:nth-child(2) { margin-top: 22px; }
  .steps > .card:nth-child(3), .promises > .card:nth-child(3) { margin-top: 44px; }
}
@media (min-width: 940px) {
  .modes { grid-template-columns: repeat(5, 1fr); }
  .modes > .card:nth-child(even) { margin-top: 26px; }
  .hero-grid { grid-template-columns: 1.02fr 0.98fr; gap: 60px; }
  .hero { padding: 76px 0 88px; }
}

/* ------------------------------------------------------------- Movimiento */
@media (prefers-reduced-motion: no-preference) {
  /* Entrada de la portada, escalonada. */
  .hero-copy > * { animation: rise .62s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy > *:nth-child(1) { animation-delay: .04s; }
  .hero-copy > *:nth-child(2) { animation-delay: .10s; }
  .hero-copy > *:nth-child(3) { animation-delay: .16s; }
  .hero-copy > *:nth-child(4) { animation-delay: .22s; }
  .hero-copy > *:nth-child(5) { animation-delay: .28s; }
  .hero-copy > *:nth-child(6) { animation-delay: .34s; }
  .hero-visual .challenge { animation: pop .6s cubic-bezier(.2, .9, .25, 1.05) .18s both; }
  .hero-reactions li { animation: pop .45s cubic-bezier(.2, .9, .25, 1.05) both; }
  .hero-reactions li:nth-child(1) { animation-delay: .46s; }
  .hero-reactions li:nth-child(2) { animation-delay: .54s; }
  .hero-reactions li:nth-child(3) { animation-delay: .62s; }
  .hero-reactions li:nth-child(4) { animation-delay: .70s; }

  /* El modo elegido va rotando, dos segundos cada uno. */
  .mode-strip li { animation: pick 10s steps(1, end) infinite; }
  .mode-strip li:nth-child(1) { animation-delay: 0s; }
  .mode-strip li:nth-child(2) { animation-delay: 2s; }
  .mode-strip li:nth-child(3) { animation-delay: 4s; }
  .mode-strip li:nth-child(4) { animation-delay: 6s; }
  .mode-strip li:nth-child(5) { animation-delay: 8s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .soon[open] { animation: pop .28s cubic-bezier(.2, .9, .25, 1.05); }
}
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pick {
  0%, 19% { background: var(--ink); color: #fff; }
  20%, 100% { background: #fff; color: var(--ink); }
}

/* Aparición al entrar en pantalla. El estado oculto solo se aplica si el
   script de la página ha marcado <html class="js">, así que sin JavaScript
   (o si algo falla) el contenido sale visible, nunca en blanco. */
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}
.js .shots > .reveal:nth-child(2), .js .steps > .reveal:nth-child(2),
.js .modes > .reveal:nth-child(2), .js .reactions > .reveal:nth-child(2),
.js .promises > .reveal:nth-child(2) { transition-delay: .08s; }
.js .shots > .reveal:nth-child(3), .js .steps > .reveal:nth-child(3),
.js .modes > .reveal:nth-child(3), .js .reactions > .reveal:nth-child(3),
.js .promises > .reveal:nth-child(3) { transition-delay: .16s; }
.js .modes > .reveal:nth-child(4), .js .reactions > .reveal:nth-child(4) { transition-delay: .24s; }
.js .modes > .reveal:nth-child(5) { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .store, .nav-cta { transition: none; }
  .soon { animation: none; }
  .js .reveal { opacity: 1; transform: none; }
  .marquee {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marquee-track { animation: none; width: auto; flex-wrap: wrap; }
  .marquee-row { flex-wrap: wrap; }
  .marquee .dup { display: none; }
}