/* ============================================================================
   Parceiro — tema oscuro. Ley de marca: el fondo es SIEMPRE marino. La web y
   la app son el mismo mundo, así que comparten paleta: marino de fondo, coral
   como único acento, y lo blanco reservado a una sola cosa — el recuadro del
   QR, que lo necesita por física para poder escanearse.
   ========================================================================== */

/* Inter, served from here. It used to be injected by the framework's font
   loader; the file is the same subset it generated. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter.woff2') format('woff2');
}

:root {
  --font-inter: 'Inter';
  /* Superficies: del marino más hondo (página) al elevado (tarjetas) */
  --canvas: #16243b;
  --canvas-2: #1b2c45;
  --canvas-3: #223753;
  --paper: #22374f;

  /* Tinta clara sobre marino */
  --ink: #ecf2fc;
  --ink-2: #b7c2d5;
  --ink-3: #8fa0ba;
  --title: #f4f8ff;

  /* Líneas: marino aclarado, nunca gris */
  --line: #33507a;
  --line-2: #3f5f8d;

  /* Coral: relleno vivo + su versión CLARA para texto sobre oscuro
     (en claro la tinta de marca se oscurecía; aquí se aclara) */
  --brand: #ff6f61;
  --brand-ink: #ffb199;
  --brand-wash: rgba(255, 111, 97, 0.13);
  --brand-line: rgba(255, 111, 97, 0.34);
  --brand-glow: rgba(255, 111, 97, 0.22);
  --brand-glow-strong: rgba(255, 111, 97, 0.38);
  /* Sobre coral va marino, no blanco: el blanco sobre coral casi no contrasta */
  --on-brand: #1b2437;

  --header-bg: rgba(22, 36, 59, 0.86);

  /* La franja que antes hacía de puente al mundo oscuro ahora ACLARA,
     porque el mundo entero ya es oscuro */
  --strip-1: #294266;
  --strip-2: #33517b;

  /* Señal de "hecho / seguro" */
  --ok: #4ade80;
  --ok-wash: rgba(74, 222, 128, 0.14);

  /* Pantalla del teléfono: más honda que la tarjeta, para que lea como pantalla */
  --app-1: #1a2b44;
  --app-2: #22385a;
  --app-3: #2d4a73;
  --app-coral: #ff7a5c;
  --app-ink: #eef3fb;
  --app-soft: #a9b8d1;

  /* Sombras: sobre marino tienen que ser hondas o no existen */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-2: 0 4px 14px rgba(0, 0, 0, 0.34);
  --sh-3: 0 20px 44px rgba(0, 0, 0, 0.42);
  --sh-4: 0 40px 90px rgba(0, 0, 0, 0.5);

  --font-body: var(--font-inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --radius: 16px;
  --radius-lg: 24px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* `hidden` tiene que poder esconder CUALQUIER COSA.
   El atributo trae un `display: none` del navegador, y ese pierde contra
   cualquier clase que ponga su propio `display`. Por eso el gratis seguia
   viendose al elegir anual: el guion ponia `fila.hidden = true` y
   `.plan-row { display: flex }` lo pisaba sin que nada avisara. */
[hidden] { display: none !important; }

html {
  min-height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--canvas);
  background-image:
    radial-gradient(circle at 18% 8%, rgba(255, 111, 97, 0.06), transparent 28rem),
    radial-gradient(circle at 88% 0%, rgba(2, 132, 199, 0.05), transparent 24rem);
  background-attachment: fixed;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--brand);
  color: var(--on-brand);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3 {
  color: var(--title);
  font-weight: 780;
  letter-spacing: -0.021em;
  line-height: 1.06;
}

.wrap {
  width: min(100%, 72rem);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Tipografía compartida ─────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--brand-ink);
  font-size: 0.78rem;
  font-weight: 720;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: 1.4rem;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}

.lead {
  color: var(--ink-2);
  font-size: 1.16rem;
  line-height: 1.62;
}

/* La promesa en negrita dentro de un lead — en coral, nunca tímida. */
.lead strong,
.section-lead strong,
.step p strong {
  color: var(--brand-ink);
  font-weight: 720;
}

/* ── Página legal ─────────────────────────────────────────────────────── */
.privacy-page {
  padding: 4.5rem 0 5rem;
}

.privacy-wrap {
  max-width: 52rem;
}

.privacy-wrap h1 {
  margin-top: 0.8rem;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
}

.privacy-meta {
  margin: 1.5rem 0 2.25rem;
  color: var(--ink-3);
  font-size: 0.95rem;
}

.privacy-section {
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
}

.privacy-section h2 {
  margin-bottom: 0.75rem;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.privacy-section p + p {
  margin-top: 0.85rem;
}

.privacy-section a {
  color: var(--brand-ink);
  font-weight: 720;
}

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 640;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    transform 150ms ease,
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--brand-ink);
  color: var(--on-brand);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 14px 30px var(--brand-glow);
}

.btn-primary:hover {
  background: var(--brand);
  box-shadow: 0 16px 32px var(--brand-glow-strong);
}

.btn-ghost {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line-2);
  box-shadow: var(--sh-1);
}

.btn-ghost:hover {
  border-color: var(--ink-3);
}

.btn-lg {
  min-height: 3.3rem;
  padding: 0 1.7rem;
  font-size: 1.05rem;
}

/* ── Header ────────────────────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 4.2rem;
}

/* Logo estilo autofact: iconito + palabra, dos tonos de una familia.
   Ícono coral (la marca), palabra en el azul de los títulos. Nada más. */
.brand {
  display: inline-flex;
  align-items: center;
  margin-top: 7px;
  /* Proporciones oficiales del lockup, 44:7:34 (símbolo:aire:texto):
     con la palabra a 20px, el símbolo mide 26px y el aire 4px. */
  gap: 4px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--title);
}

/* Ícono y letra del mismo tamaño, pegados. Y ya. */
.brand-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--brand);
}

.brand-mark svg {
  display: block;
  width: 26px;
  height: 26px;
}

.brand-word {
  position: relative;
  display: inline-block;
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* "Para desafíos" vive en el header en desktop; en mobile baja a la franja. */
.header-creator-link {
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 650;
  transition: background 150ms ease, color 150ms ease;
}

.header-creator-link:hover {
  color: var(--ink);
  background: var(--canvas-2);
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  height: 30px;
  padding: 0 0.64rem;
  border-radius: 999px;
  background: var(--canvas-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 680;
  line-height: 1;
  letter-spacing: 0;
  transition: background 150ms ease, color 150ms ease;
}

.lang-toggle:hover {
  color: var(--ink);
  background: var(--canvas-3);
}

.lang-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

/* ── Hero (desafío + recompensa comparten estructura) ──────────────────── */
.site-main {
  flex: 1 0 auto;
  overflow: clip;
}

.hero {
  position: relative;
  padding: 4.75rem 0 5rem;
}

/* Fondo claro con estructura sutil: puntitos + un lavado coral tenue */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 82% 12%, var(--brand-wash), transparent 70%),
    radial-gradient(50% 50% at 5% 0%, rgba(2, 132, 199, 0.06), transparent 60%);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(51, 65, 85, 0.07) 1px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
  opacity: 0.6;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(19rem, 0.95fr);
  gap: 3.5rem;
  align-items: center;
}

.hero-copy h1 {
  margin-top: 0.85rem;
  font-size: clamp(2.6rem, 5.2vw, 3.85rem);
  max-width: 15ch;
}

.client-page .hero-copy h1 {
  font-size: clamp(2.25rem, 4.55vw, 3.35rem);
  max-width: min(100%, 18ch);
}

.client-page .lead strong,
.client-page .section-lead strong,
.client-page .step p strong {
  color: var(--brand-ink);
}

.hero-copy .lead {
  margin-top: 1.35rem;
  max-width: 34rem;
  font-size: 1.22rem;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* Pequeña y sutil, pero legible: acompaña, no compite. */
.hero-note.hero-soon {
  margin-top: 0.2rem;
  color: var(--ink-3);
  font-size: 0.8rem;
}

.hero-note {
  margin-top: 1.1rem;
  color: var(--ink-2);
  font-size: 0.88rem;
  font-weight: 500;
}

.hero-art {
  display: grid;
  place-items: center;
}

/* ── El desafío vivo del hero (progreso que se completa solo) ───────────────
   Ciclo de 9.5s: marca 1→10 en orden y rapidito, la última casilla es la
   ★ de recompensa, y al completarse el desafío CELEBRA (salta, brilla y suelta
   confeti) antes de empezar de nuevo. */
.hero-punch-card {
  position: relative;
  overflow: hidden;
  width: min(100%, 22rem);
  padding: 1rem;
  border-radius: 22px;
  background:
    radial-gradient(80% 95% at 90% 0%, var(--brand-wash), transparent 60%),
    linear-gradient(135deg, var(--paper) 0%, var(--canvas-2) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--sh-4);
  animation: heroCardGlow 9.5s linear infinite;
}

@keyframes heroCardGlow {
  0%,
  52%,
  82%,
  100% {
    box-shadow: var(--sh-4);
    transform: none;
  }
  /* ¡desafío completo! — el wow */
  55%,
  58% {
    box-shadow:
      0 40px 90px rgba(51, 65, 85, 0.2),
      0 0 0 6px var(--brand-glow);
    transform: translateY(-7px) scale(1.02);
  }
  62%,
  76% {
    box-shadow:
      0 40px 90px rgba(51, 65, 85, 0.16),
      0 0 0 4px var(--brand-glow);
    transform: translateY(-4px) scale(1.01);
  }
}

.hero-punch-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 0.72rem;
}

.hero-punch-top strong {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.hero-punch {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.48rem;
}

.hero-slot {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  color: transparent;
  font-size: 1rem;
  font-weight: 820;
  box-shadow: var(--sh-1);
  animation-duration: 9.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* La casilla del premio: la estrella se ve siempre, en coral. */
.hero-slot.reward {
  border-style: dashed;
  border-color: var(--brand-line);
  color: var(--brand);
  font-size: 1.15rem;
}

.hero-slot:nth-child(1) { animation-name: heroSlot1; }
.hero-slot:nth-child(2) { animation-name: heroSlot2; }
.hero-slot:nth-child(3) { animation-name: heroSlot3; }
.hero-slot:nth-child(4) { animation-name: heroSlot4; }
.hero-slot:nth-child(5) { animation-name: heroSlot5; }
.hero-slot:nth-child(6) { animation-name: heroSlot6; }
.hero-slot:nth-child(7) { animation-name: heroSlot7; }
.hero-slot:nth-child(8) { animation-name: heroSlot8; }
.hero-slot:nth-child(9) { animation-name: heroSlot9; }
.hero-slot:nth-child(10) { animation-name: heroSlotReward; }


@keyframes heroSlot1 {
  0%,
  5% {
    background: var(--paper);
    border-color: var(--line-2);
    color: transparent;
    transform: scale(1);
  }
  6.5% {
    transform: scale(1.14);
  }
  8%,
  80% {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    transform: scale(1);
  }
  85%,
  100% {
    background: var(--paper);
    border-color: var(--line-2);
    color: transparent;
    transform: scale(1);
  }
}
@keyframes heroSlot2 {
  0%,
  10% {
    background: var(--paper);
    border-color: var(--line-2);
    color: transparent;
    transform: scale(1);
  }
  11.5% {
    transform: scale(1.14);
  }
  13%,
  80% {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    transform: scale(1);
  }
  85%,
  100% {
    background: var(--paper);
    border-color: var(--line-2);
    color: transparent;
    transform: scale(1);
  }
}
@keyframes heroSlot3 {
  0%,
  15% {
    background: var(--paper);
    border-color: var(--line-2);
    color: transparent;
    transform: scale(1);
  }
  16.5% {
    transform: scale(1.14);
  }
  18%,
  80% {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    transform: scale(1);
  }
  85%,
  100% {
    background: var(--paper);
    border-color: var(--line-2);
    color: transparent;
    transform: scale(1);
  }
}
@keyframes heroSlot4 {
  0%,
  20% {
    background: var(--paper);
    border-color: var(--line-2);
    color: transparent;
    transform: scale(1);
  }
  21.5% {
    transform: scale(1.14);
  }
  23%,
  80% {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    transform: scale(1);
  }
  85%,
  100% {
    background: var(--paper);
    border-color: var(--line-2);
    color: transparent;
    transform: scale(1);
  }
}
@keyframes heroSlot5 {
  0%,
  25% {
    background: var(--paper);
    border-color: var(--line-2);
    color: transparent;
    transform: scale(1);
  }
  26.5% {
    transform: scale(1.14);
  }
  28%,
  80% {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    transform: scale(1);
  }
  85%,
  100% {
    background: var(--paper);
    border-color: var(--line-2);
    color: transparent;
    transform: scale(1);
  }
}
@keyframes heroSlot6 {
  0%,
  30% {
    background: var(--paper);
    border-color: var(--line-2);
    color: transparent;
    transform: scale(1);
  }
  31.5% {
    transform: scale(1.14);
  }
  33%,
  80% {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    transform: scale(1);
  }
  85%,
  100% {
    background: var(--paper);
    border-color: var(--line-2);
    color: transparent;
    transform: scale(1);
  }
}
@keyframes heroSlot7 {
  0%,
  35% {
    background: var(--paper);
    border-color: var(--line-2);
    color: transparent;
    transform: scale(1);
  }
  36.5% {
    transform: scale(1.14);
  }
  38%,
  80% {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    transform: scale(1);
  }
  85%,
  100% {
    background: var(--paper);
    border-color: var(--line-2);
    color: transparent;
    transform: scale(1);
  }
}
@keyframes heroSlot8 {
  0%,
  40% {
    background: var(--paper);
    border-color: var(--line-2);
    color: transparent;
    transform: scale(1);
  }
  41.5% {
    transform: scale(1.14);
  }
  43%,
  80% {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    transform: scale(1);
  }
  85%,
  100% {
    background: var(--paper);
    border-color: var(--line-2);
    color: transparent;
    transform: scale(1);
  }
}
@keyframes heroSlot9 {
  0%,
  45% {
    background: var(--paper);
    border-color: var(--line-2);
    color: transparent;
    transform: scale(1);
  }
  46.5% {
    transform: scale(1.14);
  }
  48%,
  80% {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    transform: scale(1);
  }
  85%,
  100% {
    background: var(--paper);
    border-color: var(--line-2);
    color: transparent;
    transform: scale(1);
  }
}

/* La estrella del premio: espera en coral y estalla al final. */
@keyframes heroSlotReward {
  0%,
  50% {
    background: var(--paper);
    border-color: var(--brand-line);
    color: var(--brand);
    transform: scale(1);
  }
  52% {
    transform: scale(1.3);
  }
  54%,
  80% {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    transform: scale(1.06);
  }
  85%,
  100% {
    background: var(--paper);
    border-color: var(--brand-line);
    color: var(--brand);
    transform: scale(1);
  }
}

/* Confeti dentro del desafío, solo en la ventana de celebración. */
.hero-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-confetti span {
  position: absolute;
  top: -8%;
  width: 0.42rem;
  height: 0.68rem;
  border-radius: 2px;
  opacity: 0;
  animation: heroConfetti 9.5s linear infinite;
}

.hero-confetti span:nth-child(1) { left: 8%;  background: #ff6f61; animation-delay: 0s; }
.hero-confetti span:nth-child(2) { left: 22%; background: #0c4a6e; animation-delay: 0.12s; }
.hero-confetti span:nth-child(3) { left: 36%; background: #ffb199; animation-delay: 0.05s; }
.hero-confetti span:nth-child(4) { left: 50%; background: #2f8f5b; animation-delay: 0.18s; }
.hero-confetti span:nth-child(5) { left: 63%; background: #ff6f61; animation-delay: 0.02s; }
.hero-confetti span:nth-child(6) { left: 75%; background: #0284c7; animation-delay: 0.15s; }
.hero-confetti span:nth-child(7) { left: 86%; background: #ffb199; animation-delay: 0.08s; }
.hero-confetti span:nth-child(8) { left: 94%; background: #ff6f61; animation-delay: 0.2s; }

@keyframes heroConfetti {
  0%,
  53% {
    opacity: 0;
    transform: translateY(0) rotate(0deg);
  }
  55% {
    opacity: 1;
  }
  76% {
    opacity: 1;
    transform: translateY(12rem) rotate(340deg);
  }
  77%,
  100% {
    opacity: 0;
    transform: translateY(12.5rem) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slot,
  .hero-punch-card,
  .hero-confetti span {
    animation: none;
  }
}

/* ── La franja puente (única banda oscura: el mundo de la app) ─────────── */
.creator-strip {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 111, 97, 0.16), transparent 24rem),
    linear-gradient(90deg, var(--strip-1), var(--strip-2));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.creator-strip-inner {
  min-height: 4.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  color: #eef3fb;
  text-align: center;
}

.creator-strip strong {
  color: #fff;
  font-size: 1.12rem;
  font-weight: 820;
  letter-spacing: -0.02em;
}

.creator-strip span {
  color: #c3cfe3;
  font-size: 0.98rem;
  font-weight: 650;
}

.creator-strip a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0 0.9rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.9rem;
  font-weight: 750;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

.creator-strip a:hover {
  background: #ff8276;
}

.exit-strip {
  background:
    radial-gradient(circle at 78% 0%, rgba(255, 255, 255, 0.08), transparent 22rem),
    linear-gradient(90deg, #213653, var(--strip-2));
}

.exit-strip a {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: none;
}

.exit-strip a:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ── Teléfono / mockup de la app real (único elemento oscuro) ──────────── */
.device {
  position: relative;
  width: 16.5rem;
  padding: 0.55rem;
  border-radius: 2.6rem;
  background: linear-gradient(160deg, #2c2c33 0%, #16161b 100%);
  box-shadow:
    var(--sh-4),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 2px 3px rgba(255, 255, 255, 0.18) inset;
}

.device::before {
  content: '';
  position: absolute;
  top: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  width: 5.2rem;
  height: 0.42rem;
  border-radius: 999px;
  background: #0c0c10;
  z-index: 3;
}

.device-screen {
  position: relative;
  border-radius: 2.15rem;
  overflow: hidden;
  background: linear-gradient(180deg, var(--app-1) 0%, #1a2a42 100%);
  padding: 2.2rem 1.05rem 1.15rem;
  color: var(--app-ink);
  min-height: 30rem;
}

.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.app-bar .app-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--app-soft);
  letter-spacing: 0.02em;
}

.app-bar .app-code {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
}

.app-live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--app-coral);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.app-live::before {
  content: '';
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--app-coral);
  box-shadow: 0 0 0 3px rgba(255, 122, 92, 0.22);
}

/* Persona: QR + desafíos */
.app-qr {
  display: grid;
  place-items: center;
  gap: 0.55rem;
  padding: 0.9rem;
  border-radius: 16px;
  background: #fff;
  margin-bottom: 0.9rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.app-qr .qr {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 2px;
  width: 6.4rem;
}

.app-qr .qr span {
  aspect-ratio: 1;
  border-radius: 1.5px;
  background: transparent;
}

.app-qr .qr span.on {
  background: var(--app-1);
}

.app-qr .app-qr-cap {
  font-size: 0.72rem;
  font-weight: 640;
  color: var(--app-1);
  letter-spacing: 0.01em;
}

.app-cards {
  display: grid;
  gap: 0.6rem;
}

.app-card {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.7rem 0.8rem;
}

.app-card.is-reward {
  background: rgba(255, 122, 92, 0.14);
  border-color: rgba(255, 122, 92, 0.4);
}

.app-card .ac-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.app-card .ac-name {
  font-size: 0.82rem;
  font-weight: 680;
  color: #fff;
}

.app-card .ac-count {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--app-coral);
}

.app-stamps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.28rem;
}

.app-stamps span {
  aspect-ratio: 1;
  border-radius: 999px;
  border: 1.5px solid rgba(169, 184, 209, 0.4);
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  color: transparent;
}

.app-stamps span.on {
  background: var(--app-coral);
  border-color: var(--app-coral);
  color: var(--on-brand);
}

.app-stamps span.gift {
  border-color: var(--app-coral);
  color: var(--app-coral);
  font-size: 0.7rem;
}

/* Negocio: consola / panel */
.app-figure {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.app-figure .af-num {
  font-size: 2.4rem;
  font-weight: 820;
  letter-spacing: -0.03em;
  color: #fff;
}

.app-figure .af-label {
  font-size: 0.74rem;
  color: var(--app-soft);
}

.app-rows {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.app-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.app-row .ar-avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--app-3);
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
}

.app-row .ar-name {
  font-size: 0.78rem;
  color: var(--app-ink);
}

.app-row .ar-pill {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--app-soft);
}

.app-row .ar-pill.is-ready {
  color: var(--app-coral);
}

.app-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  padding: 0.75rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}

.app-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.28rem;
  height: 3rem;
  flex: 1;
}

.app-bars span {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--app-coral), rgba(255, 122, 92, 0.35));
}

.app-team {
  text-align: right;
}

.app-team strong {
  display: block;
  font-size: 1.4rem;
  font-weight: 820;
  color: #fff;
}

.app-team span {
  font-size: 0.62rem;
  color: var(--app-soft);
}

/* Etiqueta flotante sobre el teléfono (glass claro) */
.device-tag {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--sh-3);
  font-size: 0.82rem;
  font-weight: 620;
  color: var(--ink);
}

.device-tag .dt-dot {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--brand-wash);
  color: var(--brand-ink);
}

.device-tag.tag-tl {
  top: 2.2rem;
  left: -2.6rem;
}

.device-tag.tag-br {
  bottom: 2.6rem;
  right: -2.4rem;
}

/* ── Sección de pasos (franja blanca) ──────────────────────────────────── */
.steps-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 5.5rem 0;
  background:
    radial-gradient(34rem 24rem at 50% 50%, rgba(255, 111, 97, 0.105), transparent 68%),
    radial-gradient(48rem 32rem at 50% 52%, rgba(86, 139, 199, 0.085), transparent 76%),
    var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.steps-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(rgba(255, 177, 153, 0.13) 1px, transparent 1.3px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse at center, #000, rgba(0, 0, 0, 0.42) 56%, transparent 88%);
  opacity: 0.55;
  pointer-events: none;
}

.steps-section > .wrap {
  position: relative;
  z-index: 1;
}

.steps-head {
  max-width: 46rem;
}

.steps-head h2 {
  margin-top: 0.7rem;
  font-size: clamp(2rem, 3.6vw, 2.7rem);
}

.steps-grid {
  margin-top: 2.75rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.steps-grid.cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  max-width: 52rem;
}

.step {
  position: relative;
  padding: 1.6rem;
  border-radius: var(--radius);
  background: var(--canvas);
  border: 1px solid var(--line);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.step:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-3);
  border-color: var(--line-2);
}

.step-n {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: var(--brand-wash);
  color: var(--brand-ink);
  font-size: 1.05rem;
  font-weight: 800;
}

.step h3 {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.client-page .step,
.creator-page .step {
  padding-right: 4.25rem;
}

.client-page .step-n,
.creator-page .step-n {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0;
  border-radius: 999px;
  font-size: 0.82rem;
}

.step p {
  margin-top: 0.5rem;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.55;
}

.steps-cta {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}

.section-lead {
  margin-top: 1rem;
  max-width: 40rem;
  color: var(--ink-2);
  font-size: 1.08rem;
  line-height: 1.6;
}

/* ── Precio simple ─────────────────────────────────────────────────────── */
.plans-section {
  padding: 5.5rem 0;
}

.plans-grid {
  margin-top: 2.5rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  max-width: 52rem;
}

.plan {
  padding: 1.6rem;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--line-2);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.plan:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-3);
}

/* Cada plan con su color: gratis = verde, medio = azul mar, pro = coral. */
.plans-grid .plan:nth-child(1) {
  border-top-color: var(--ok);
  background: linear-gradient(180deg, var(--ok-wash) 0%, var(--paper) 42%);
}

.plans-grid .plan:nth-child(1) .plan-price {
  color: var(--ok);
}

.plans-grid .plan:nth-child(2) {
  border-top-color: #0284c7;
  background: linear-gradient(180deg, #e8f4fb 0%, var(--paper) 42%);
}

.plans-grid .plan:nth-child(2) .plan-price {
  color: #0369a1;
}

.plans-grid .plan:nth-child(3) {
  border-top-color: var(--brand);
  background: linear-gradient(180deg, var(--brand-wash) 0%, var(--paper) 42%);
}

.plans-grid .plan:nth-child(3) .plan-price {
  color: var(--brand-ink);
}

.plan-price {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--title);
}

.plan-name {
  font-size: 0.95rem;
  font-weight: 560;
  color: var(--ink-3);
  letter-spacing: 0;
}

.plan-limit {
  margin-top: 0.4rem;
  color: var(--ink-2);
  font-size: 1rem;
}

.plans-note {
  margin-top: 1.5rem;
  color: var(--ink-3);
  font-size: 0.95rem;
}

/* ── Casos reales ──────────────────────────────────────────────────────── */
.cases-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 5.5rem 0;
  background:
    radial-gradient(32rem 28rem at 0% 32%, rgba(255, 111, 97, 0.1), transparent 72%),
    radial-gradient(32rem 28rem at 100% 68%, rgba(86, 139, 199, 0.085), transparent 74%),
    var(--canvas);
}

.cases-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(rgba(255, 177, 153, 0.12) 1px, transparent 1.3px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.18) 32%, transparent 50%, rgba(0, 0, 0, 0.18) 68%, #000 100%);
  opacity: 0.48;
  pointer-events: none;
}

.cases-section > .wrap {
  position: relative;
  z-index: 1;
}

.cases-list {
  margin-top: 2.25rem;
  border-top: 1px solid var(--line);
}

.case-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(8.5rem, 0.32fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.25rem 0 1.25rem 1rem;
  border-bottom: 1px solid var(--line);
}

.case-row::before {
  content: '';
  position: absolute;
  top: 1.35rem;
  bottom: 1.35rem;
  left: 0;
  width: 0.22rem;
  border-radius: 999px;
  background: var(--brand);
}

.case-row h3 {
  color: var(--brand-ink);
  font-size: 1.05rem;
  letter-spacing: 0;
}

.case-row p {
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.55;
}

.cases-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 2rem;
}

.free-note {
  margin-top: 1.35rem;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
  align-items: baseline;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: var(--brand-wash);
  border: 1px solid var(--brand-line);
  color: var(--ink-2);
  font-size: 0.95rem;
}

.free-note strong {
  color: var(--brand-ink);
  font-weight: 820;
}

/* ── Mini página de desafío (compartible, /n/:id) ──────────────────────── */
.creator-card {
  max-width: 30rem;
  margin: 0 auto;
  text-align: center;
  padding: 3rem 2rem;
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--sh-3);
}

.creator-logo {
  width: 6rem;
  height: 6rem;
  border-radius: 1.4rem;
  object-fit: cover;
  margin: 0 auto 1.2rem;
  display: block;
  box-shadow: var(--sh-2);
}

.creator-logo-fallback {
  display: grid;
  place-items: center;
  background: var(--brand-wash);
  color: var(--brand-ink);
  font-size: 2.4rem;
  font-weight: 800;
}

.creator-name {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  margin-bottom: 0.6rem;
}

.creator-card .lead {
  margin: 0 auto;
  max-width: 26rem;
}

.creator-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  margin-top: 1.1rem;
  color: var(--ink-2);
  font-size: 0.98rem;
}

.creator-card .hero-cta {
  margin-top: 1.8rem;
}

/* ── Suscripción (sandbox) ─────────────────────────────────────────────── */
.sub-badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--canvas-3);
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.sub-amount {
  margin-top: 1rem;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--title);
}

.sub-amount span {
  font-size: 1rem;
  font-weight: 560;
  color: var(--ink-3);
}

.sub-result {
  width: 3.6rem;
  height: 3.6rem;
  margin: 0 auto 1.1rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  font-weight: 800;
}

.sub-result.ok {
  background: var(--ok-wash);
  color: var(--ok);
}

.sub-result.pending {
  background: var(--canvas-2);
  color: var(--ink-2);
}

.sub-result.fail {
  background: var(--brand-wash);
  color: var(--brand-ink);
}

/* ── Cierre ────────────────────────────────────────────────────────────── */
.closing {
  padding: 5.5rem 0;
}

.closing-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 4rem 2rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 120% at 50% 0%, var(--brand-wash), transparent 70%),
    var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--sh-3);
}

.closing-card h2 {
  margin: 0 auto;
  max-width: 100%;
  font-size: clamp(2rem, 3.6vw, 2.7rem);
}

.closing-card .lead {
  margin: 1.1rem auto 0;
  max-width: 40rem;
}

.closing-card .closing-promise {
  margin-top: 0.55rem;
  font-size: 1.15rem;
  color: var(--brand-ink);
  font-weight: 720;
}

.closing-free-note {
  justify-content: center;
  margin-top: 1.25rem;
}

.closing-card .hero-cta {
  justify-content: center;
  margin-top: 1.55rem;
}

/* ── Footer (claro, como todo lo demás) ────────────────────────────────── */
.site-footer {
  flex: none;
  margin-top: auto;
  padding: 2.75rem 0;
  background: var(--canvas-2);
  border-top: 1px solid var(--line);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--ink-3);
  font-size: 0.9rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 1rem;
}

.footer-inner .footer-tag {
  color: var(--ink-2);
  font-weight: 500;
}

/* ── Tracker de scroll (juguetón pero sobrio, en acento) ───────────────── */
.tracker {
  position: fixed;
  bottom: 1.1rem;
  right: 1.1rem;
  z-index: 40;
  display: block;
  padding: 0.7rem 0.85rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh-3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.7rem) scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
}

.tracker.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.tracker-label {
  font-size: 0.68rem;
  font-weight: 680;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0;
}

.tracker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
}

.tracker-close {
  position: relative;
  top: -1px;
  right: -4px;
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--canvas-3);
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.tracker-close:hover { background: var(--line); color: var(--ink); }

.tracker .punch {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.3rem;
}

.tracker .slot {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  border: 1.5px solid var(--line-2);
  display: grid;
  place-items: center;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--ink-3);
}

.tracker .slot.marked {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.tracker .slot.reward {
  border-color: var(--brand);
  color: var(--brand);
}

.tracker .slot.marked.reward {
  background: var(--brand);
  color: #fff;
}

.tracker .slot.pop {
  animation: pop 260ms ease;
}

@keyframes pop {
  0% {
    transform: scale(0.6);
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

.confetti {
  position: fixed;
  top: -5vh;
  width: 0.5rem;
  height: 0.8rem;
  border-radius: 2px;
  z-index: 60;
  animation: fall linear forwards;
  pointer-events: none;
}

@keyframes fall {
  to {
    transform: translateY(110vh) rotate(540deg);
    opacity: 0;
  }
}

/* ── Responsive ────────────────────────────────────────────────────────── */

/* Desktop: la franja "¿Tienes tu desafío?" no existe — el link va en el header. */
@media (min-width: 901px) {
  .site-main .creator-strip:not(.exit-strip) {
    display: none;
  }
}

@media (max-width: 900px) {
  /* En mobile el copy va PRIMERO (el titular es el gancho); el teléfono baja. */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .client-page .hero {
    min-height: auto;
    padding: 3rem 0 3.25rem;
  }

  .client-page .hero-grid {
    gap: 0;
  }

  .client-page .hero-art {
    display: none;
  }

  .device-tag {
    display: none;
  }
  .header-inner {
    gap: 0.75rem;
  }

  /* El link de desafíos se va del header: en mobile vive en la franja. */
  .header-creator-link {
    display: none;
  }

  /* Primer pantallazo = header + banner. Lo demás, con scroll. */
  .hero {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 4.2rem);
    min-height: calc(100svh - 4.2rem);
    padding: 2rem 0 2.5rem;
  }

  .hero > .wrap {
    width: 100%;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }

  .hero {
    padding: 2.75rem 0 3rem;
  }

  .hero-copy h1 {
    margin-top: 0.6rem;
  }

  .creator-strip-inner {
    min-height: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
    flex-direction: column;
    gap: 0.45rem;
  }

  .creator-strip strong {
    font-size: 1.05rem;
  }

  .creator-strip span {
    max-width: 22rem;
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .creator-strip a {
    margin-top: 0.25rem;
  }

  .hero-punch-card {
    width: min(100%, 19rem);
    padding: 0.85rem;
    border-radius: 20px;
  }

  .hero-punch {
    gap: 0.48rem;
  }

  .hero-slot {
    font-size: 0.78rem;
  }

  .steps-section,
  .cases-section,
  .closing {
    padding: 3.75rem 0;
  }

  .case-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding-left: 0.9rem;
  }

  .closing-card {
    padding: 2.75rem 1.25rem;
  }

  /* El progreso flotante, más pegado a la esquina para no tapar el botón. */
  .tracker {
    bottom: 0.8rem;
    right: 0.8rem;
    padding: 0.55rem 0.65rem;
  }

  .tracker .slot {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.58rem;
  }
}

/* ============================================================================
   WOW — capa de atmósfera, escala y movimiento (va al final: gana en cascada)
   La idea: la página no describe el producto, lo HACE. El gesto de Parceiro es
   el sello cayendo, así que el héroe sella delante de tus ojos, en el teléfono
   también, que es donde la gente va a mirar esto.
   ========================================================================== */

/* ── Revelado al bajar ──────────────────────────────────────────────────── */
[data-reveal-ready] [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal-ready] [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal-ready] [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Cielo del héroe: profundidad, no un rectángulo plano ───────────────── */
.hero {
  overflow: hidden;
  isolation: isolate;
}

.hero-sky {
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 130%;
  z-index: -1;
  background:
    radial-gradient(38rem 26rem at 78% 8%, rgba(255, 111, 97, 0.2), transparent 68%),
    radial-gradient(30rem 24rem at 8% 4%, rgba(61, 88, 127, 0.42), transparent 66%),
    radial-gradient(26rem 20rem at 50% 96%, rgba(255, 177, 153, 0.09), transparent 70%);
  filter: blur(2px);
}

/* Trama de puntos: guiño al QR, casi invisible, se disuelve hacia abajo */
.hero::after {
  background-image: radial-gradient(rgba(236, 242, 252, 0.16) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
  opacity: 0.5;
}
.hero::before { display: none; }

/* ── Tipografía del héroe: escala grande y quiebre limpio ───────────────── */
.client-page .hero-copy h1 {
  font-size: clamp(2.5rem, 8.2vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 15ch;
  text-wrap: balance;
}

.client-page .hero-copy .lead {
  font-size: clamp(1.05rem, 4.2vw, 1.28rem);
  color: var(--ink-2);
  max-width: 32ch;
}

.hero-trust {
  margin-top: 1.15rem;
  font-size: calc(0.92rem - 2px);
  color: var(--ink-3);
}
.hero-trust strong {
  color: var(--brand-ink);
  font-weight: 800;
}

/* ── Botón: que se sienta pulsable ──────────────────────────────────────── */
.btn-primary {
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), background 160ms ease, box-shadow 160ms ease;
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }

/* ── Pasos: numeral fantasma y raíl coral, no tres cajas iguales ────────── */
.step {
  position: relative;
  overflow: hidden;
}
.step .step-n {
  position: absolute;
  top: -0.6rem;
  right: 0.4rem;
  width: auto;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  font-size: 5.2rem;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
  opacity: 0.07;
  pointer-events: none;
}
.step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.15rem;
  bottom: 1.15rem;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand), transparent);
  opacity: 0.85;
}

/* ── Casos: se arrastran de lado, como se navega en un teléfono ─────────── */
.cases-rail {
  margin-top: 1.6rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cases-rail::-webkit-scrollbar { display: none; }

.cases-track {
  display: flex;
  gap: 0.9rem;
  padding: 0 max(1.15rem, calc((100vw - 68rem) / 2)) 0.4rem;
}

.case-card {
  scroll-snap-align: start;
  flex: 0 0 min(78vw, 21rem);
  padding: 1.5rem 1.35rem;
  border-radius: 20px;
  background: linear-gradient(160deg, var(--paper), var(--canvas-2));
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
}
.case-card h3 {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: 0.7rem;
}
.case-card p {
  font-size: 1.12rem;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}

.cases-actions { margin-top: 1.9rem; }

/* ── Cierre: una sola declaración grande ────────────────────────────────── */
.closing-card {
  background:
    radial-gradient(34rem 18rem at 50% 0%, rgba(255, 111, 97, 0.14), transparent 70%),
    linear-gradient(170deg, var(--paper), var(--canvas-2));
  border: 1px solid var(--line);
}
.closing-card h2 {
  font-size: clamp(1.9rem, 7vw, 3rem);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* ── El cartón del héroe, ahora protagonista TAMBIÉN en el teléfono ─────── */
@media (max-width: 900px) {
  .client-page .hero-art {
    display: grid;          /* estaba oculto: era esconder lo único que vende */
    margin-top: 2.25rem;
  }
  .client-page .hero-grid {
    gap: 0;
    justify-items: start;
  }
  .hero-punch-card {
    width: min(100%, 24rem);
  }
  /* El cartón flotante estorbaba encima del contenido en pantallas chicas. */
  .tracker { display: none; }
}

@media (max-width: 560px) {
  .steps-grid { gap: 0.85rem; }
  .step { padding: 1.35rem 1.2rem 1.4rem; }
  .step .step-n { font-size: 4.2rem; }
  .closing-card { padding: 2.25rem 1.4rem; }
}

/* ── El desbordamiento horizontal del teléfono ──────────────────────────────
   En móvil el héroe centraba con flex, y un hijo flex trae `min-width: auto`:
   no puede encogerse por debajo del ancho de su contenido, así que la página
   entera se salía por la derecha y cortaba títulos y el botón de idioma.
   Se centra con el layout de siempre y se deja encoger. */
@media (max-width: 900px) {
  .hero {
    display: block;
    padding: 2.5rem 0 3rem;
  }
  .hero > .wrap {
    min-width: 0;
  }
  .hero-grid > * {
    min-width: 0;
  }
}

/* Cinturón de seguridad: nada debe empujar la página de lado nunca. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* El regalo del cartón: aparece al completarse, no antes ni suelto. */
.hero-punch-prize {
  position: absolute;
  inset: auto 0 0.9rem 0;
  display: grid;
  place-items: center;
  font-size: 1.55rem;
  opacity: 0;
  transform: translateY(8px) scale(0.7);
  animation: heroPrize 9.5s linear infinite;
  pointer-events: none;
}
@keyframes heroPrize {
  0%, 86% { opacity: 0; transform: translateY(8px) scale(0.7); }
  90%, 97% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(8px) scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-punch-prize { animation: none; opacity: 1; transform: none; }
}

/* ── El cartón: de adorno a protagonista ────────────────────────────────────
   Es lo único que la página tiene para vender, así que se planta grande, con
   luz propia debajo y una inclinación mínima para que se lea como un objeto
   y no como una caja de CSS. */
.hero-punch-card {
  position: relative;
  width: min(100%, 26rem);
  padding: 1.35rem 1.25rem 1.5rem;
  border-radius: 26px;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255, 111, 97, 0.16), transparent 62%),
    linear-gradient(168deg, var(--canvas-3), var(--canvas));
  border: 1px solid var(--line-2);
  box-shadow:
    0 1px 0 rgba(236, 242, 252, 0.06) inset,
    0 28px 60px -22px rgba(0, 0, 0, 0.75);
  transform: rotate(-1.4deg);
}

/* La luz que lo despega del fondo */
.hero-art {
  position: relative;
}
.hero-art::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(105%, 30rem);
  height: 72%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 111, 97, 0.28), transparent 78%);
  filter: blur(28px);
  z-index: -1;
  pointer-events: none;
}

.hero-punch-top {
  margin-bottom: 0.95rem;
}
.hero-punch-top strong {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hero-punch {
  gap: 0.55rem;
}

/* Casilla vacía: hueco, no botón. Marcada: coral macizo con su sombra. */
.hero-slot {
  aspect-ratio: 1;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--line);
  color: transparent;
  font-size: 1.05rem;
  box-shadow: none;
}
.hero-slot.reward {
  border-style: dashed;
  border-color: var(--brand-line);
}

@media (max-width: 900px) {
  .hero-punch-card {
    width: 100%;
  }
  .client-page .hero-art {
    margin-top: 2.75rem;
  }
}

@media (max-width: 900px) {
  /* El cartón ocupa el ancho: es el argumento, no una miniatura. */
  .client-page .hero-grid {
    justify-items: stretch;
  }
}

/* ── Ajustes finos ──────────────────────────────────────────────────────── */

/* Selector de idioma: que no le compita al logo. Solo el idioma y un chevrón
   mínimo que insinúa "esto se toca". Sin píldora, sin globo. */
.lang-toggle {
  gap: 0.28rem;
  height: auto;
  padding: 0.35rem 0.15rem;
  background: none;
  border: 0;
  color: var(--ink-3);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.lang-toggle:hover {
  background: none;
  color: var(--brand-ink);
}
.lang-chevron {
  width: 11px;
  height: 11px;
  opacity: 0.75;
  transition: transform 160ms ease;
}
.lang-toggle:hover .lang-chevron {
  transform: translateY(1px);
}

/* El numeral fantasma respiraba por arriba con 0: se le da su aire. */
.step {
  padding-top: 1.85rem;
}
.step .step-n {
  top: 0.5rem;
}

/* ── Los casos, como un TODO que se va leyendo ──────────────────────────── */
.cases-list {
  margin: 1.9rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.case-item {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  padding: 1.15rem 1.2rem;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--paper), var(--canvas-2));
  border: 1px solid var(--line);
  transition: border-color 180ms ease, transform 180ms ease,
    opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.case-item:hover {
  border-color: var(--brand-line);
}

/* La casilla marcada: el mismo sello del producto, en pequeño */
.case-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-top: 0.1rem;
  border-radius: 9px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.95rem;
  font-weight: 900;
  box-shadow: 0 6px 14px -6px rgba(255, 111, 97, 0.85);
}

.case-body h3 {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: 0.35rem;
}
.case-body p {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.case-body p strong {
  color: var(--app-coral);
}

/* La sección de casos es ahora el final de la página: cierra con aire. */
.cases-section {
  padding-bottom: 4.5rem;
}
.cases-actions {
  margin-top: 2.1rem;
}

/* ── Pie: una sola línea, y toda ella lleva a privacidad ────────────────── */
.footer-inner {
  justify-content: center;
  text-align: center;
}
.footer-inner a {
  color: var(--ink-3);
  font-size: 0.86rem;
  text-decoration: none;
  transition: color 150ms ease;
}
.footer-inner a:hover {
  color: var(--ink-2);
  text-decoration: underline;
}

.guide-action {
  display: flex;
  justify-content: center;
  padding-top: 2.25rem;
}

/* ── El cartón flotante vuelve al teléfono ──────────────────────────────────
   Aparece cuando el héroe ya salió de vista y se va llenando conforme bajas:
   la página entera es un cartón. Compacto y pegado a la esquina segura para
   no taparle nada a nadie. */
@media (max-width: 900px) {
  .tracker {
    display: block;
    right: 0.85rem;
    bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
    padding: 0.55rem 0.65rem;
    border-radius: 13px;
    background: rgba(34, 55, 79, 0.92);
    backdrop-filter: blur(10px);
  }
  .tracker .slot {
    width: 15px;
    height: 15px;
    font-size: 8px;
    border-radius: 5px;
  }
  .tracker-label {
    font-size: 0.56rem;
    letter-spacing: 0.16em;
  }
}

/* ── El chevrón del idioma apunta al siguiente, no abajo ────────────────── */
.lang-toggle:hover .lang-chevron {
  transform: translateX(1.5px);
}

/* ── Los casos, sin tarjeta ─────────────────────────────────────────────────
   Arriba ya hay tarjetas (los pasos). Repetir el recurso aplana la página:
   aquí basta una línea que cierre cada renglón, como un cuaderno. */
.cases-list {
  gap: 0;
}

.case-item {
  gap: 0.9rem;
  padding: 1.15rem 0.15rem 1.2rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.case-item:last-child {
  border-bottom: 0;
}
.case-item:hover {
  border-color: var(--line);
}

/* La casilla se hace hueca y chica: acompaña el renglón, no lo encabeza. */
.case-check {
  width: 1.45rem;
  height: 1.45rem;
  margin-top: 0.15rem;
  border-radius: 8px;
  background: var(--brand-wash);
  border: 1px solid var(--brand-line);
  color: var(--brand-ink);
  font-size: 0.82rem;
  box-shadow: none;
}

/* La recompensa real del héroe: conserva su proporción, llena bien la columna
   y se integra al fondo sin deformarse ni recortar el gesto principal. */
.hero-banner {
  width: min(100%, 31rem);
}

.hero-banner-image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(236, 242, 252, 0.12);
  border-radius: 26px;
  box-shadow: 0 28px 60px -22px rgba(0, 0, 0, 0.78);
}

/* Su luz: cálida y baja, para que se sienta acogedor y no un banner de banco */
.hero-art::before {
  width: min(90%, 22rem);
  height: 62%;
  background: radial-gradient(closest-side, rgba(255, 111, 97, 0.26), transparent 76%);
  filter: blur(30px);
}

@media (max-width: 900px) {
  .client-page .hero {
    padding-bottom: 0;
  }
  .client-page .hero-art {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 2.25rem;
    justify-items: center;
  }
  .client-page .hero-banner {
    width: 100%;
    max-width: none;
  }
  .client-page .hero-banner-image {
    height: clamp(13rem, 52vw, 20rem);
    object-fit: cover;
    object-position: center 54%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ── Menú de tres rayitas ───────────────────────────────────────────────────
   El idioma se queda visible como etiqueta (sin signo, ya no promete nada) y
   el menú guarda lo demás: idiomas en palabras y los tres temas. */
/* Quien eres, donde antes estaba el selector de idioma suelto.
   Aquel cambiaba al siguiente de tres sin decir a cual, y el idioma ya vive
   en el menu con sus tres nombres escritos. Este sitio lo mira quien quiere
   saber si ha entrado, asi que es lo que tiene que contestar. */
/* Quien ha entrado es un icono y nada mas, con el mismo aspecto que el boton
   de menu que tiene al lado: 38x38, sin fondo y en el mismo gris. Lo que lo
   distingue es que es SU foto, no un color distinto. */
.header-account {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  color: var(--ink-2);
  text-decoration: none;
}
.header-account:hover { color: var(--brand-ink); }
.header-account-dot {
  width: 26px; height: 26px;
  object-fit: cover;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  transition: border-color 160ms ease;
}
.header-account:hover .header-account-dot { border-color: var(--brand-line); }
/* "Entrar" sigue siendo una palabra, y las palabras necesitan sitio. */
.header-account.is-out {
  width: auto;
  color: var(--brand-ink);
  font-size: 0.82rem;
  font-weight: 800;
}

.menu-btn {
  display: grid;
  gap: 4px;
  width: 38px;
  height: 38px;
  padding: 10px 8px;
  align-content: center;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-btn span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-2);
  transition: transform 200ms ease, opacity 160ms ease, background 160ms ease;
}
.menu-btn:hover span { background: var(--brand-ink); }
.menu-btn.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn.is-open span:nth-child(2) { opacity: 0; }
.menu-btn.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  height: calc(100dvh - 4.2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--line);
  background: var(--canvas-2);
  padding: 1.25rem 0 0;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.34);
  animation: menuIn 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-panel-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-panel { animation: none; }
}

.menu-label {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.7rem;
}

.menu-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.35rem;
}
.menu-lang {
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}
.menu-lang.is-current {
  border-color: var(--brand-line);
  background: var(--brand-wash);
  color: var(--brand-ink);
}

.menu-links {
  display: grid;
  border-top: 1px solid var(--line);
}
.menu-links a {
  padding: 0.95rem 0.1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 700;
  text-decoration: none;
}
.menu-links a:last-child { border-bottom: 0; }
.menu-links a:hover { color: var(--brand-ink); }

.menu-art {
  display: grid;
  place-items: end center;
  width: 100%;
  margin-top: auto;
  padding-top: 1.5rem;
  overflow: hidden;
}
.menu-art img {
  display: block;
  width: min(100%, 46rem);
  height: auto;
  max-height: 42dvh;
  object-fit: contain;
  object-position: center bottom;
}

/* ── La guía ────────────────────────────────────────────────────────────── */
.guide-hero {
  padding: 3rem 0 1.25rem;
}
.guide-hero h1 {
  font-size: clamp(1.75rem, 6vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
  max-width: 22ch;
  text-wrap: balance;
  margin-top: 0.6rem;
}
.guide-wrap {
  padding-bottom: 4rem;
}
.guide-block {
  scroll-margin-top: 5rem;
  padding-top: 2.25rem;
}
.guide-block h2 {
  font-size: clamp(1.3rem, 5vw, 1.75rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}

/* ── Tutorial visual: la interfaz real, no una lista que haya que imaginar ─ */
.how-carousel {
  width: min(100%, 50rem);
  margin: 0 auto;
}
.how-stage { position: relative; }
.how-progress {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.8rem;
}
.how-progress > b {
  min-width: 3.6rem;
  color: var(--brand-ink);
  font-size: 0.76rem;
  font-weight: 850;
}
.how-progress > span {
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}
.how-progress > span > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-ink);
  transition: width 240ms ease;
}
.how-track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.how-track::-webkit-scrollbar { display: none; }
.how-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  padding: 1.7rem 1.7rem 1.45rem;
  scroll-snap-align: start;
  text-align: center;
}
.how-slide h2 {
  /* Sin margen arriba: ahora es lo PRIMERO de la pantalla, no el pie de una
     imagen. El tamano sube pero se queda por debajo del H2 de seccion. */
  margin-top: 0;
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  letter-spacing: -0.02em;
}
.how-slide > p {
  max-width: 35rem;
  min-height: 3rem;
  margin: 0.55rem auto 0;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.5;
  text-wrap: balance;
}
.how-slide > p strong { color: var(--brand-ink); font-weight: 850; }
/* Era 2.4rem cuando encima habia un H2. Al quitarlo quedo un agujero. */
.landing-how { margin-top: 0.9rem; }
.how-download {
  align-content: center;
  gap: 1.2rem;
}
.how-app-icon {
  position: relative;
  width: 9rem;
  height: 9rem;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 2.15rem;
  background: linear-gradient(145deg, #29466d, #172840);
  border: 1px solid rgba(255, 177, 153, 0.32);
  box-shadow: 0 28px 50px -22px rgba(0, 0, 0, 0.92);
}
.how-app-icon img { width: 100%; height: 100%; object-fit: cover; }
.how-store-button {
  width: 11rem;
  min-height: 2.8rem;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border-radius: 999px;
  background: var(--brand-ink);
  color: var(--on-brand);
  box-shadow: 0 16px 30px -16px var(--brand-glow-strong);
}
.how-store-button span { font-size: 1.25rem; font-weight: 900; }
.how-store-button i { width: 5rem; height: 4px; border-radius: 4px; background: currentColor; opacity: 0.68; }
.how-visual {
  margin-top: 1.1rem;
  height: 19.5rem;
  display: grid;
  place-items: center;
}
.how-phone {
  position: relative;
  width: 13rem;
  height: 19.3rem;
  padding: 0.45rem;
  border: 2px solid #4a6489;
  border-radius: 30px;
  background: #111c2e;
  box-shadow: 0 25px 45px -18px rgba(0, 0, 0, 0.88);
}
.how-phone.is-small {
  width: 9.3rem;
  height: 15.8rem;
  border-radius: 25px;
}
.how-speaker {
  display: block;
  width: 2rem;
  height: 3px;
  margin: 0.08rem auto 0.28rem;
  border-radius: 3px;
  background: #344968;
}
.how-app-head {
  height: 1.45rem;
  padding: 0 0.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.how-app-head b { color: var(--app-ink); font-size: 0.56rem; font-weight: 900; }
.how-app-head i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--brand-ink); }
.how-app-screen {
  position: relative;
  height: calc(100% - 2.25rem);
  overflow: hidden;
  padding: 0.48rem;
  border-radius: 18px;
  background: #1f314d;
}
.how-homebar { display: block; width: 2.5rem; height: 3px; margin: 0.28rem auto 0; border-radius: 3px; background: #6e809d; }
.how-app-nav {
  position: absolute;
  z-index: 2;
  left: 0.4rem;
  right: 0.4rem;
  bottom: 0.35rem;
  height: 1.75rem;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #1a2b44;
  color: #647795;
  font-size: 0.9rem;
}
.how-app-nav .on { color: var(--brand-ink); }
.how-tabs {
  height: 1.7rem;
  padding: 0.18rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 8px;
  background: var(--app-3);
  color: var(--app-soft);
  font-size: 0.53rem;
}
.how-tabs b {
  min-width: 4.6rem;
  padding: 0.28rem 0.55rem;
  border-radius: 6px;
  background: var(--app-2);
  color: var(--brand-ink);
}
.how-white-qr {
  width: fit-content;
  margin: 0.55rem auto 0;
  padding: 0.65rem;
  display: grid;
  place-items: center;
  gap: 0.3rem;
  border-radius: 12px;
  background: #fff;
  color: #334155;
}
.how-white-qr small { font-size: 0.48rem; font-weight: 900; letter-spacing: 0.12em; }
.how-qr {
  width: 6.1rem;
  height: 6.1rem;
  padding: 0.15rem;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  background: #fff;
}
.how-qr i { border: 1px solid #fff; }
.how-qr i.on { background: #17243a; }
.how-dark-action,
.how-primary-action {
  height: 1.7rem;
  margin-top: 0.48rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 8px;
  color: var(--app-ink);
  background: #101a2c;
}
.how-dark-action i,
.how-primary-action i { display: block; width: 3.5rem; height: 3px; border-radius: 3px; background: currentColor; opacity: 0.65; }
.how-primary-action { color: var(--on-brand); background: var(--brand-ink); }
.how-screen-title {
  min-height: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--app-soft);
  font-size: 0.62rem;
}
.how-screen-title b { flex: 1; color: var(--app-ink); text-align: left; font-size: 0.68rem; }
.how-screen-title em,
.how-live i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--ok); }
.how-field {
  height: 2.7rem;
  margin-bottom: 0.42rem;
  padding: 0.45rem;
  display: grid;
  gap: 0.22rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--app-3);
  text-align: left;
}
.how-field small { color: var(--app-soft); font-size: 0.42rem; font-weight: 800; letter-spacing: 0.08em; }
.how-field b { color: var(--app-ink); font-size: 0.61rem; }
.how-stepper {
  height: 2.1rem;
  margin-bottom: 0.42rem;
  padding: 0 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--app-2);
  color: var(--brand-ink);
}
.how-stepper b { color: var(--app-ink); }
.how-live {
  width: fit-content;
  margin: 0.4rem auto;
  padding: 0.2rem 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.28rem;
  border-radius: 999px;
  background: var(--ok-wash);
  color: var(--ok);
  font-size: 0.48rem;
  font-weight: 850;
}
.how-two-phones {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.how-two-phones .how-app-screen { border-radius: 13px; }
.how-two-phones .how-qr { width: 4rem; height: 4rem; }
.how-center { height: calc(100% - 2rem); display: grid; place-content: center; justify-items: center; gap: 0.35rem; color: var(--app-soft); }
.how-scan-arrow { color: var(--brand-ink); font-size: 1.8rem; font-weight: 900; }
.how-camera {
  position: relative;
  height: 7.5rem;
  border-radius: 10px;
  background: #09111f;
}
.how-camera i { position: absolute; width: 1.8rem; height: 1.8rem; border-color: var(--brand-ink); }
.how-camera i:nth-child(1) { top: 1rem; left: 0.8rem; border-top: 2px solid; border-left: 2px solid; }
.how-camera i:nth-child(2) { top: 1rem; right: 0.8rem; border-top: 2px solid; border-right: 2px solid; }
.how-camera i:nth-child(3) { bottom: 1rem; left: 0.8rem; border-bottom: 2px solid; border-left: 2px solid; }
.how-camera i:nth-child(4) { bottom: 1rem; right: 0.8rem; border-bottom: 2px solid; border-right: 2px solid; }
.how-camera b { position: absolute; left: 0.8rem; right: 0.8rem; top: 50%; height: 2px; background: var(--brand); }
.how-scan-ok { height: 1.65rem; margin-top: 0.35rem; display: flex; align-items: center; justify-content: center; gap: 0.3rem; border-radius: 8px; background: var(--ok-wash); color: var(--ok); font-size: 0.58rem; }
.how-scan-ok strong { color: var(--app-ink); }
.how-people { display: grid; gap: 0.35rem; }
.how-person,
.how-manager {
  min-height: 2.65rem;
  padding: 0.42rem;
  display: flex;
  align-items: center;
  gap: 0.42rem;
  border-radius: 9px;
  background: var(--app-2);
}
.how-person > i,
.how-manager > i {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--app-3);
  color: var(--app-ink);
  font-size: 0.53rem;
  font-style: normal;
  font-weight: 900;
}
.how-person > span,
.how-manager > span { flex: 1; display: grid; gap: 0.25rem; min-width: 0; text-align: left; }
.how-person > span b,
.how-manager > span b { color: var(--app-ink); font-size: 0.56rem; }
.how-person > span em { height: 3px; overflow: hidden; border-radius: 3px; background: var(--line); }
.how-person > span u { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.how-person > small { color: var(--app-soft); font-size: 0.48rem; font-weight: 800; }
.how-reward {
  min-height: 4.3rem;
  margin-top: 0.5rem;
  padding: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-radius: 11px;
  background: var(--ok-wash);
}
.how-reward > i { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--ok); color: var(--on-brand); font-style: normal; }
.how-reward > span { flex: 1; display: grid; gap: 0.12rem; text-align: left; }
.how-reward b { color: var(--app-ink); font-size: 0.68rem; }
.how-reward small { color: var(--app-soft); font-size: 0.5rem; }
.how-reward em { color: var(--app-soft); font-size: 1.1rem; }
.how-completed { margin-top: 0.5rem; padding: 0.62rem; border-radius: 10px; background: var(--app-2); text-align: left; }
.how-completed small { display: block; margin-top: 0.45rem; color: var(--ok); font-size: 0.48rem; }
.how-stamps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; }
.how-stamps i { height: 1.25rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--on-brand); font-size: 0.5rem; font-style: normal; }
.how-stamps i.on { border-color: var(--brand); background: var(--brand); }
.how-share { margin-top: 0.2rem; padding: 0.6rem; display: flex; align-items: center; gap: 0.75rem; border-radius: 10px; background: var(--app-2); }
.how-share .how-white-qr { margin: 0; padding: 0.38rem; }
.how-share .how-qr { width: 3.8rem; height: 3.8rem; }
.how-share > span { flex: 1; display: grid; gap: 0.45rem; }
.how-share > span b,
.how-share > span i { height: 4px; border-radius: 4px; background: var(--app-ink); }
.how-share > span i { width: 65%; background: var(--app-soft); }
.how-manager { margin-top: 0.45rem; }
.how-manager small { color: var(--app-soft); font-size: 0.46rem; }
.how-manager em { color: var(--ok); font-style: normal; }
.how-invite-options { display: grid; gap: 0.4rem; margin-top: 0.5rem; }
.how-invite-options > div {
  min-height: 2.8rem;
  padding: 0.48rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 10px;
  background: var(--app-2);
}
.how-invite-options i {
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 177, 153, 0.12);
  color: var(--brand-ink);
  font-style: normal;
}
.how-invite-options b { width: 55%; height: 4px; border-radius: 4px; background: var(--app-soft); }
.how-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 2.5rem;
  height: 4rem;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--brand-ink);
  font-size: 3.25rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}
.how-arrow-left { left: -3.5rem; }
.how-arrow-right { right: -3.5rem; }
.how-arrow:hover:not(:disabled) { color: var(--ink); }
.how-arrow:disabled { opacity: 0.25; cursor: default; }

@media (max-width: 600px) {
  .how-slide { padding: 1rem 0.85rem 1.2rem; }
  .how-visual { height: 16rem; }
  .how-phone { width: 10.4rem; height: 15.8rem; border-radius: 25px; }
  .how-phone.is-small { width: 7.2rem; height: 13rem; border-radius: 21px; }
  .how-two-phones { gap: 0.5rem; }
  .how-scan-arrow { font-size: 1.2rem; }
  .how-qr { width: 4.5rem; height: 4.5rem; }
  .how-two-phones .how-qr { width: 3rem; height: 3rem; }
  .how-camera { height: 5.6rem; }
  .how-slide > p { min-height: 4.5rem; font-size: 0.9rem; }
}

@media (max-width: 900px) {
  .how-arrow { display: none; }
}

/* ── Tercera sección: una decisión clara, Android o iPhone ────────────── */
.download-section {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 4.2rem;
  background:
    radial-gradient(32rem 22rem at 14% 8%, rgba(255, 177, 153, 0.2), transparent 70%),
    radial-gradient(30rem 22rem at 88% 92%, rgba(86, 139, 199, 0.2), transparent 72%),
    linear-gradient(140deg, #294266 0%, #223753 48%, #1b2c45 100%);
  border-top: 1px solid rgba(255, 177, 153, 0.2);
  border-bottom: 1px solid var(--line);
}
.download-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(236, 242, 252, 0.17) 1px, transparent 1.35px);
  background-size: 26px 26px;
  mask-image: linear-gradient(135deg, #000, rgba(0, 0, 0, 0.45) 58%, transparent 92%);
  opacity: 0.52;
  pointer-events: none;
}
.download-section-inner {
  position: relative;
  z-index: 1;
  min-height: 38rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}
.download-section-inner h2 {
  color: var(--title);
  font-size: clamp(2.5rem, 7vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.download-section-inner > p {
  max-width: 42rem;
  margin: 1rem auto 0;
  color: var(--ink-2);
  font-size: clamp(1.05rem, 3vw, 1.28rem);
  line-height: 1.55;
}
.download-section-inner > p strong { color: var(--brand-ink); font-weight: 950; }
.download-section-art {
  width: min(78vw, 23rem);
  height: auto;
  margin-top: 1.15rem;
  filter: drop-shadow(0 22px 24px rgba(0, 0, 0, 0.3));
}
.download-section .store-buttons { margin-top: 0.55rem; }
.store-buttons {
  display: flex;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.6rem;
}
.store-button {
  min-width: 12rem;
  min-height: 4.1rem;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border: 1px solid rgba(236, 242, 252, 0.2);
  border-radius: 15px;
  background: #080b10;
  color: #fff;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.9);
  transition: transform 160ms ease, border-color 160ms ease;
}
.store-button:hover { transform: translateY(-2px); border-color: var(--brand-ink); }
.store-button svg { flex: none; width: 2rem; height: 2rem; }
.store-button span { min-width: 0; display: grid; gap: 0.05rem; }
.store-button small { color: #b8c0cc; font-size: 0.68rem; font-weight: 650; }
.store-button strong { color: #fff; font-size: 1.03rem; font-weight: 850; }

.download-redirect {
  min-height: 100dvh;
  padding: 2rem;
  display: grid;
  place-items: center;
  background: var(--canvas);
}
.download-redirect-card { max-width: 38rem; text-align: center; }
.download-redirect-card h1 { font-size: clamp(2rem, 7vw, 3.5rem); }
.download-redirect-card p { margin-top: 0.7rem; color: var(--ink-2); }

@media (max-width: 600px) {
  .download-section-inner { min-height: 35rem; padding-top: 3.25rem; padding-bottom: 3.25rem; }
  .store-buttons { width: 100%; gap: 0.55rem; }
  .store-button { flex: 1; min-width: 0; min-height: 3.8rem; padding: 0.6rem 0.7rem; gap: 0.55rem; }
  .store-button svg { width: 1.65rem; height: 1.65rem; }
  .store-button strong { font-size: 0.9rem; }
}

/* ── La vitrina de un desafío ──────────────────────────────────────────────
   Sin marco: el contenido manda y el ancho lo limita el texto, no una caja.
   Una ficha dentro de una tarjeta perdía los lados y se veía apretada. */
.shop {
  padding-bottom: 0;
}

.shop__photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 26rem;
  object-fit: cover;
  border-radius: 1.25rem;
  background: var(--canvas-3);
}

.shop__wrap {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 2.6rem;
}

.shop__name {
  margin: 1.1rem 0 0;
  font-size: 1.875rem;
  line-height: 1.17;
  font-weight: 900;
  color: var(--ink);
  text-wrap: balance;
}

/* ── La ficha, con las medidas de la app ──────────────────────────────────
   Puerto de PresentationScreen. Las cajas, los lavados de naranjo y los
   iconos son los mismos; si allí cambian, aquí también. */
.pres__reward {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.2rem;
  padding: 0.9rem;
  border-radius: 1rem;
  background: var(--brand-wash);
  border: 1px solid var(--brand-line);
}

.pres__reward-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--paper);
  color: var(--brand-ink);
}

.pres__reward-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.pres__reward-title {
  margin: 0.15rem 0 0;
  font-size: 1rem;
  line-height: 1.32;
  font-weight: 900;
  color: var(--ink);
}

.pres__sections {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.15rem;
}

.pres__lead {
  margin: 0;
  font-size: 1rem;
  line-height: 1.56;
  color: var(--ink);
  white-space: pre-line;
}

.pres__card {
  padding: 0.95rem;
  border-radius: 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
}

.pres__card-head {
  display: flex;
  align-items: center;
  gap: 0.56rem;
  margin-bottom: 0.62rem;
}

.pres__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 0.62rem;
  background: var(--brand-wash);
  color: var(--brand-ink);
}

.pres__card-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.pres__line {
  margin: 0.19rem 0 0;
  font-size: 0.94rem;
  line-height: 1.53;
  color: var(--ink);
}

.pres__fact {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.37rem 0;
  border-top: 1px solid var(--line);
}

.pres__fact-label {
  flex: 1;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--ink-2);
}

.pres__fact-value {
  flex: 1;
  font-size: 0.84rem;
  line-height: 1.4;
  font-weight: 800;
  text-align: right;
  color: var(--ink);
}

.pres__empty {
  margin-top: 1.15rem;
  font-size: 0.94rem;
  line-height: 1.47;
  color: var(--ink-2);
}

.pres__deal {
  margin-top: 1.15rem;
  padding: 0.95rem;
  border-radius: 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
}

.shop__steps {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--brand-ink);
}

.shop__fine {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 0.88rem;
  line-height: 1.6;
}

.pres__whats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  margin-top: 1.25rem;
  border-radius: 0.75rem;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.93rem;
  font-weight: 700;
  text-decoration: none;
}

.pres__whats:hover {
  border-color: var(--line-2);
  color: var(--ink);
}

/* El sello: quién somos, los tres pasos en escalera y el pie. Sin código —
   quien llega aquí vino por un enlace, y no se escanea un QR en la pantalla
   que ya tienes en la mano. El código es de las cartas impresas.

   La línea que une los números no es adorno: dice que hay un orden, y que el
   tercero llega después del primero. */
.shop__seal {
  background: var(--canvas);
  border-top: 1px solid var(--line);
}

.shop__seal-inner {
  display: block;
  padding-top: 1.5rem;
  padding-bottom: 1.7rem;
}

.shop__seal-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--brand-ink);
}

.shop__steps-list {
  display: flex;
  flex-direction: column;
  margin: 0.9rem 0 1.15rem;
  padding: 0;
  list-style: none;
  color: var(--ink);
  font-size: 1rem;
}

.shop__steps-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-bottom: 0.88rem;
}

.shop__steps-list li:last-child {
  padding-bottom: 0;
}

.shop__steps-list li::before {
  content: "";
  position: absolute;
  left: 0.74rem;
  top: 1.6rem;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--line), transparent);
}

.shop__steps-list li:last-child::before {
  display: none;
}

.shop__step-n {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid var(--brand);
  background: var(--canvas);
  color: var(--brand-ink);
  font-size: 0.78rem;
  font-weight: 900;
}

.shop__seal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.shop__seal-note {
  font-size: 0.84rem;
  color: var(--ink-3);
}

.shop__seal-btn {
  flex: 0 0 auto;
  padding: 0.72rem 1.3rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.93rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.shop__seal-btn:hover {
  filter: brightness(1.06);
  color: var(--on-brand);
}

.pres__link {
  color: var(--brand-ink);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.pres__link:hover {
  color: var(--ink);
}

/* ── The Pix charge ───────────────────────────────────────────────────────
   These were inline styles inside the component. Leaving React they had
   nowhere to go, and a QR with no size and no centring is a QR nobody scans. */
.pix-qr {
  display: block;
  margin: 0 auto;
  border-radius: 12px;
}

/* ── Los planes y entrar ──────────────────────────────────────────────────
   Franjas, a sangre. Lo que separa una de la siguiente es el tono del fondo y
   un pelo — nunca un marco. La gramatica es la del HomeStripComponent de
   maresia-front-blog. */

/* La franja: a sangre, sin borde propio, separada por el tono y un pelo. */
.maq-strip {
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
  background: var(--canvas);
}
.maq-strip:last-of-type { border-bottom: 1px solid var(--line); }

/* La luz cálida, como en la portada.
   Iba en DOS focos, uno en la cabecera y otro en las tarjetas. Son secciones
   hermanas, así que se veía la costura entre los dos parches. Ahora es una
   sola, anclada a la cabecera y desbordando hacia abajo por encima de las
   dos. */
.maq-plans-head { position: relative; isolation: isolate; }
.maq-plans-head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 460%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(30rem 22rem at 88% 6%, rgba(255, 177, 153, 0.11), transparent 70%),
    radial-gradient(26rem 24rem at 4% 46%, rgba(255, 111, 97, 0.13), transparent 68%);
}

/* La cabecera de la seccion en el home. La franja de planes que va debajo es
   la misma que la pagina de plan y que la pantalla de la app — ver
   `PlanModule`. */
.maq-plans-head { padding: 3.4rem 0 0.4rem; border-top: 1px solid var(--line); }

/* Entrar.
   Una sola columna centrada y con aire: la ilustracion, una linea y los dos
   circulos. Sin cabecera — la pagina entera dice lo que hay que hacer. */
/* La franja ocupa TODO lo que le deja la cabecera, y el contenido se centra
   dentro. Con una altura fija quedaba un hueco muerto debajo de los circulos:
   la pagina terminaba antes que la pantalla. */
.site-main.is-login { display: grid; }
.login-strip {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 30rem;
  padding: 2.6rem 0 3rem;
  background: var(--canvas-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* La misma luz calida que llevan las demas vistas. */
.login-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(30rem 22rem at 86% 8%, rgba(255, 177, 153, 0.12), transparent 70%),
    radial-gradient(26rem 24rem at 6% 86%, rgba(255, 111, 97, 0.13), transparent 68%);
}

.login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
  max-width: 26rem;
  margin-inline: auto;
  text-align: center;
}
.login-art { width: 100%; max-width: 21rem; height: auto; }
.login-lead { margin: 0; color: var(--ink-2); font-size: 1.02rem; }

/* Las dos pestañas de su pagina.
   Subrayadas y no en pastilla: la pastilla ya es mensual/anual, que elige una
   variante de LO MISMO. Estas cambian de que estas mirando, asi que tenian
   que verse distintas o se leen como el mismo mando. */
.mine-tabs {
  display: flex;
  gap: 1.3rem;
  margin-top: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.mine-tab {
  padding: 0 0 0.6rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--ink-3);
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
}
.mine-tab.is-on { color: var(--title); border-bottom-color: var(--brand); }
.mine-tab:hover { color: var(--ink); }

/* ── Sus cartones, igual que en el telefono ───────────────────────────────
   Las medidas salen de `OwnedChallengeRow.styles.ts` de la app, no de aqui:
   la miniatura mide 78 y es 16/10, el nombre 16 a 800, y el que esta fuera
   de plan se apaga al 55%. Lo unico distinto es la accion: alli escanea y
   aqui comparte, porque escanear necesita el aparato. */
.cards-section { padding: 1.5rem 0 2.2rem; background: var(--canvas-2); }
.cards-module { max-width: 30rem; margin-inline: auto; }
.cards-list { display: flex; flex-direction: column; gap: 10px; }

.card-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.card-row.is-asleep { opacity: 0.55; }
.card-row-art {
  flex: 0 0 auto;
  width: 78px;
  aspect-ratio: 16 / 10;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.card-row-art.is-empty {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--ink-3);
}
.card-row-art.is-empty svg { width: 26px; height: 26px; }
.card-row-body { min-width: 0; flex: 1; }
.card-row-name {
  margin: 0 0 3px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
}
.card-row-tag {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-3);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}
.card-row-reward { margin: 0; color: var(--ink-2); font-size: 0.84rem; line-height: 1.4; }
.card-row-share {
  display: inline-block;
  margin-top: 8px;
  color: var(--brand-ink);
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
}
.card-row-share::after { content: ' \2192'; position: relative; top: 1px; }
.card-row-note { display: block; margin-top: 6px; color: var(--ink-3); font-size: 0.74rem; line-height: 1.4; }
.cards-empty { margin: 0; color: var(--ink-2); font-size: 0.9rem; }

/* ── El plan, igual que en la app ─────────────────────────────────────────
   Misma pantalla, mismas acciones, mismas palabras. Lo unico distinto es por
   donde se paga: en Brasil se paga por Pix y no por una tienda. Las medidas
   salen de `AccountPlanCard.styles.ts`, no de la vista. */
.plan-section {
  position: relative;
  isolation: isolate;
  padding: 2.2rem 0 3rem;
  background: var(--canvas-2);
  border-bottom: 1px solid var(--line);
}
.plan-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(30rem 22rem at 88% 4%, rgba(255, 177, 153, 0.11), transparent 70%),
    radial-gradient(26rem 24rem at 4% 90%, rgba(255, 111, 97, 0.12), transparent 68%);
}
.plan-module { max-width: 30rem; margin-inline: auto; }

/* En el home la franja no trae luz propia ni borde: ya vive dentro de una
   pagina que tiene los suyos, y dos luces encima una de otra hacen costura. */
.plan-section.is-shop { padding-top: 0.6rem; border-bottom: 0; background: transparent; }
.plan-section.is-shop::after { content: none; }

.plan-heading { display: flex; align-items: center; gap: 0.6rem; }
.plan-heading-icon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--brand-wash);
  color: var(--brand-ink);
}
.plan-heading-icon svg { width: 18px; height: 18px; }
.plan-heading-text { display: flex; flex-direction: column; }
.plan-heading-name { color: var(--title); font-size: 1.06rem; font-weight: 800; }
.plan-heading-now { color: var(--brand-ink); font-size: 0.82rem; font-weight: 700; margin-top: 2px; }

/* El interruptor, no dos filas mas: con cuatro filas la pantalla deja de decir
   "elige tu plan" y pasa a decir "elige una de cuatro cosas". */
.plan-cycles {
  display: flex;
  gap: 6px;
  margin: 0.9rem 0 0.75rem;
  padding: 4px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.plan-cycle {
  flex: 1;
  padding: 0.5rem 0.4rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.81rem;
  font-weight: 600;
  cursor: pointer;
}
.plan-cycle.is-on { background: var(--canvas-3); color: var(--ink); box-shadow: var(--sh-1); }

.plan-list { display: flex; flex-direction: column; gap: 8px; }
.plan-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.plan-row[disabled] { cursor: default; }
.plan-row.is-current { border-color: var(--brand-ink); background: var(--brand-wash); }
.plan-row.is-blocked { opacity: 0.48; }
.plan-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-row-name { color: var(--ink); font-size: 0.91rem; font-weight: 800; }
.plan-price { color: var(--brand-ink); font-size: 0.85rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.plan-blocked { color: var(--ink-3); font-size: 0.78rem; font-weight: 800; }
.plan-pill {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.68rem;
  font-weight: 900;
}
.plan-row-what { color: var(--ink-2); font-size: 0.78rem; line-height: 1.36; margin-top: 5px; }

/* Bajar la app, debajo de lo que da el plan y SIN recuadro.
   Un boton con borde dentro de una fila con borde son dos rayas, una
   encerrada en la otra. Lo que lo hace visible es la negrita y el color. */
.plan-row-get {
  align-self: flex-start;
  margin-top: 8px;
  color: var(--brand-ink);
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
}
/* La flecha es PARTE DEL TEXTO, igual que en "Começar agora": va pegada a la
   palabra, con la misma letra y el mismo peso, y por eso se lee como una sola
   cosa. Colgada de un `inline-flex` con su propio hueco se despegaba y
   parecia de otra fuente. */
.plan-row-get::after {
  content: ' \2192';
  /* Un pixel abajo: la flecha de esta fuente se apoya un pelo por encima de
     la linea de la palabra y, a este tamano, se nota. */
  position: relative;
  top: 1px;
}
.plan-row-get:hover { color: var(--title); }

.plan-failure { margin: 0.7rem 0 0; color: var(--brand); font-size: 0.85rem; font-weight: 650; }
.plan-nopix { margin: 1rem 0 0; color: var(--ink-2); }

.plan-actions { margin-top: 1rem; border-top: 1px solid var(--line); }
.plan-action {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.87rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.plan-action::after {
  content: '';
  margin-left: auto;
  width: 7px; height: 7px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(-45deg);
}
.plan-action:hover { color: var(--brand-ink); }
.plan-action.is-back { justify-content: center; }
.plan-action.is-back::after { content: none; }

.plan-fine {
  margin: 1rem 0 0;
  color: var(--ink-3);
  font-size: 0.74rem;
  line-height: 1.45;
  text-align: center;
}

/* El QR, cuando sustituye a la lista de planes. */
.pix-charge { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; text-align: center; }
.pix-amount { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pix-how { margin: 0; color: var(--ink-2); font-size: 0.92rem; }
.pix-note { margin: 0; color: var(--ink-3); font-size: 0.8rem; line-height: 1.45; }
/* El codigo Pix: una linea cortada, no una caja de texto. Nadie lo lee y
   nadie lo escribe a mano — solo se copia, y para eso esta el boton. */
.pix-code {
  width: 100%;
  max-width: 24rem;
  margin: 0;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--canvas);
  color: var(--ink-3);
  font-size: 0.74rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pix-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }

.login-failed {
  margin: 0;
  color: var(--brand);
  font-size: 0.9rem;
  font-weight: 650;
}

.login-circles { display: flex; align-items: center; gap: 1.15rem; }

/* El hueco del boton de Google.
   Lo pinta su libreria dentro de un iframe de 40px que no se puede estilar
   desde aqui, asi que se escala hasta los 62 del circulo de Apple. Sin esto
   uno de los dos botones se ve la mitad que el otro. */
.login-google {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.login-google > div { transform: scale(1.55); transform-origin: center; }
.login-google.is-busy { opacity: 0.6; pointer-events: none; }
.login-circle {
  width: 62px;
  height: 62px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--brand-ink);
  color: var(--on-brand);
  cursor: pointer;
  box-shadow: var(--sh-2);
  transition: transform 160ms ease;
}
.login-circle:hover { transform: translateY(-2px); }
.login-circle svg { width: 26px; height: 26px; }
/* La manzana se dibuja con mas aire alrededor que la G: al mismo tamano se ve
   mas pequena, y se compensa aqui. */
.login-circle.is-apple svg { width: 29px; height: 29px; }
.login-circle.is-google { background: #ffffff; }
.login-circle.is-google svg { width: 25px; height: 25px; }

/* ── El orden del héroe ───────────────────────────────────────────────────
   En el teléfono: titular, frase, FOTO, y recién entonces el botón. Lo pidió
   así — se lee la promesa, se ve la cosa, y se actúa. El botón va en su propio
   bloque para poder colarse la foto por delante sin tocar el escritorio, donde
   la foto sigue a la derecha y el botón bajo la frase. */
.hero-actions { display: contents; }
@media (min-width: 901px) {
  .hero-grid { grid-template-rows: auto auto; align-items: center; }
  .hero-copy { grid-column: 1; grid-row: 1; align-self: end; }
  .hero-actions { display: block; grid-column: 1; grid-row: 2; align-self: start; }
  .hero-art { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 900px) {
  .hero-actions { display: block; margin-top: 2rem; }
}

/* ── La portada en el teléfono ───────────────────────────────────────────
   REGLA DE MARIO: header + portada = el alto de la pantalla, SIEMPRE. Una
   portada que obliga a bajar para ver el botón no sirve.

   La foto va a su proporción natural (3:2) y a todo el ancho. NO se estira ni
   se recorta para llenar: forzarla con `cover` la ampliaba y se comía los
   bordes de la escena. El hueco que sobra se lo queda el aire entre la foto y
   el texto, que baja pegado abajo.

   El fondo es #0f141e, que es lo que mide el borde de abajo de la propia
   imagen (muestreado con canvas, no a ojo). Por eso no se ve dónde acaba. */
@media (max-width: 900px) {
  .client-page .hero {
    display: block;
    /* 4.2rem de alto MAS su borde de 1px. Sin el pixel del borde, la portada
       acababa uno por debajo del pliegue en todos los telefonos. */
    height: calc(100svh - 4.2rem - 1px);
    min-height: 0;
    padding: 0;
    isolation: isolate;
    /* La luz cálida vive en el fondo del héroe, así que se ve en todo lo que
       la foto no tapa — es decir, exactamente donde está el texto. */
    background:
      radial-gradient(28rem 18rem at 10% 88%, rgba(255, 111, 97, 0.3), transparent 72%),
      radial-gradient(24rem 16rem at 96% 72%, rgba(255, 177, 153, 0.18), transparent 72%),
      radial-gradient(20rem 14rem at 52% 100%, rgba(255, 111, 97, 0.16), transparent 70%),
      #0f141e;
  }

  .client-page .hero .hero-sky { display: none; }
  .client-page .hero::after { display: none; }

  .client-page .hero-grid {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* El heroe de escritorio trae `align-items:center`, y en columna eso
       centra HORIZONTALMENTE: por eso el enlace salia al medio. */
    align-items: stretch;
    gap: 0;
    padding: 0 1rem calc(2.05rem + env(safe-area-inset-bottom, 0px));
  }

  /* La foto, arriba y a sangre, quedándose con todo el hueco libre. */
  .client-page .hero-art {
    display: block;
    order: -1;
    flex: 0 0 auto;
    aspect-ratio: 3 / 2;
    position: relative;
    margin: 0 -1rem;
    background: url('/banner-recompensa.webp') no-repeat 50% 0 / 100% auto;
  }
  .client-page .hero-art .hero-banner { display: none; }

  /* Se disuelve en el mismo color por abajo: así no hay borde que delate
     dónde termina, ni siquiera cuando el recorte deja ver la mesa. */
  .client-page .hero-art::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(15, 20, 30, 0) 0,
      rgba(15, 20, 30, 0) 62%,
      rgba(15, 20, 30, 0.72) 88%,
      #0f141e 100%
    );
  }

  /* El bloque se construye DE ABAJO HACIA ARRIBA: el enlace pegado al pie,
     encima la frase, encima el titular. Todo el hueco que sobra se va arriba,
     contra la foto. Repartido mitad y mitad no se entendia por donde empieza
     a leerse. */
  .client-page .hero-copy { flex: 0 0 auto; margin-top: auto; }
  .client-page .hero-copy h1 { margin-top: 0; }
  .client-page .hero-copy .lead { margin-top: 0.5rem; }
  .client-page .hero-actions { flex: 0 0 auto; margin-top: 0; }
  /* El enlace a la izquierda, como el titular y la frase. Centrado peleaba.
     Y su hueco de arriba son 2rem propios de `.hero-cta`; bajarlo a ~1rem es
     lo que lo acerca a la frase. */
  .client-page .hero-cta { justify-content: flex-start; margin-top: 1.05rem; }

  /* "Começar agora" como enlace: blanco, negrita y subrayado. Lo pidió así, y
     de paso devuelve los 40px de un botón relleno. */
  .client-page .hero-cta .btn {
    width: auto;
    min-height: 0;
    padding: 0.1rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 800;
    text-decoration: none;
  }
  /* La flecha es parte del texto: "Começar agora →" se lee y se subraya como
     una sola cosa. Por eso va DENTRO del span, no colgada del enlace. */
  .client-page .hero-cta .btn-label {
    text-decoration: underline;
    text-underline-offset: 0.28em;
    text-decoration-thickness: 2px;
  }
  .client-page .hero-cta .btn-label::after {
    content: ' \2192';
  }
  .client-page .hero-cta .btn:hover { transform: none; color: var(--brand); }

  /* El cartón vuelve, pero no sobre la portada: quien decide cuándo aparece
     es el script, que ahora espera a que la portada quede atrás. */
}

/* La barrita de "ya voy".
   La pagina de descarga se va sola a la tienda, pero ahora espera a que el
   dibujo acabe de bajar. Esos segundos sin nada parecen una pagina colgada,
   asi que se dice que algo esta pasando. */
.store-wait {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  z-index: 60;
}
.store-wait i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand);
  animation: store-wait var(--store-wait, 2500ms) linear forwards;
}
@keyframes store-wait { from { width: 0; } to { width: 100%; } }

/* ── Las anclas ──────────────────────────────────────────────────────────
   SIN `scroll-margin-top`. El header es `sticky` pero no lleva `top`, asi
   que al desplazar se va: reservarle hueco no tapaba nada — solo descubria
   el final de la seccion anterior, que entraba cortada por arriba. */