/* ==========================================================================
   Boki Finanzas — styles.css
   Sistema de diseño del sitio público. Fuente de verdad: PROMPT-WEB §3.
   Regla: ningún color hexadecimal fuera de los tokens de :root. Todo lo demás
   se deriva de esas variables (opacidades y color-mix sobre los mismos tonos).
   ========================================================================== */

/* Respaldo de Manrope con sus mismas proporciones, para que el texto no salte cuando llega la
   fuente de Google (CLS). Medido el 23 sep 2026: Manrope (2000 upm, ascendente 2132, descendente
   600) frente a Arial con el mismo texto en español: 102,84 % en peso 500, 99,59 % en 700 y
   101,28 % en 800. ascent/descent = métrica de Manrope ÷ size-adjust. */
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica");
  font-weight: 100 600;
  size-adjust: 102.84%;
  ascent-override: 103.66%;
  descent-override: 29.17%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Helvetica Bold");
  font-weight: 700;
  size-adjust: 99.59%;
  ascent-override: 107.04%;
  descent-override: 30.12%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Helvetica Bold");
  font-weight: 800 900;
  size-adjust: 101.28%;
  ascent-override: 105.25%;
  descent-override: 29.62%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Marca (fijos, no cambian con el tema) */
  --brand-graphite: #28292E;
  --brand-graphite-deep: #1C1E23;
  --brand-silver: #BEBEC1;
  --brand-silver-light: #EFEFF1;

  /* Semánticos de dinero (solo en maquetas y cifras de ejemplo).
     Los valores «-on-dark» son fijos: los usan el tema oscuro y las zonas grafito. */
  --income-on-dark: #2E7DFF;
  --income-text-on-dark: #5AA9FF;
  --expense-on-dark: #FF5A52;
  --expense-text-on-dark: #FF6B62;
  --income: var(--income-on-dark);
  --income-text: var(--income-text-on-dark);
  --expense: var(--expense-on-dark);
  --expense-text: var(--expense-text-on-dark);
  --warning: #F5B942;
  --gold: #FFB020;

  /* Acentos de Espacios (chips, anillos, píldoras; nunca cifras) */
  --coral: #FF7A59;
  --amber: #F5B942;
  --cyan: #35C4E8;
  --violet: #8B7CF6;
  --magenta: #F2559B;
  --mint: #3FD68C;
  --slate: #9AA6B8;
  --azure: #7FC4FF;

  /* Superficies y texto — tema oscuro (valor de reserva) */
  --canvas: #080A0F;
  --text-primary: #F2F4F8;
  --text-secondary: rgba(242, 244, 248, 0.62);
  --text-tertiary: rgba(242, 244, 248, 0.42);
  --surface: rgba(255, 255, 255, 0.05);
  --surface-strong: rgba(255, 255, 255, 0.08);
  --surface-faint: rgba(255, 255, 255, 0.035);
  --hairline: rgba(255, 255, 255, 0.06);
  --stroke: rgba(255, 255, 255, 0.07);
  --stroke-strong: rgba(255, 255, 255, 0.14);
  --stroke-input: rgba(255, 255, 255, 0.40);

  /* Vidrio (solo barra de navegación y una tarjeta destacada) */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-highlight: rgba(255, 255, 255, 0.26);
  --glass-blur: 24px;

  /* Sombras */
  --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.40);
  --shadow-hero: 0 22px 46px rgba(0, 0, 0, 0.50);

  /* Botón primario: oscuro en claro, claro en oscuro (acromático a propósito) */
  --btn-bg: var(--text-primary);
  --btn-fg: var(--canvas);

  /* Radios (grandes y continuos) */
  --r-chip: 12px;
  --r-control: 16px;
  --r-row: 18px;
  --r-card: 22px;
  --r-hero: 26px;
  --r-capsule: 30px;

  /* Tipografía */
  --font: "Manrope", "Manrope Fallback", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --fs-h1: clamp(2.5rem, 1.6rem + 2.6vw, 4rem);          /* 40 → 64 */
  --fs-h2: clamp(2rem, 1.2rem + 1.9vw, 2.75rem);         /* 32 → 44 (tope hacia 1.300 px) */
  --fs-h3: clamp(1.375rem, 1rem + 0.95vw, 1.75rem);      /* 22 → 28 (tope hacia 1.280 px) */
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);     /* 16 → 18 */
  --fs-caption: 0.8125rem;                               /* 13 */
  --fs-eyebrow: 0.75rem;                                 /* 12 */
  --lh-body: 1.55;

  /* Espaciado (base 4 px) y contenedor */
  --gutter: 20px;
  --container: 1120px;
  --nav-h: 64px;
  --section-y: clamp(44px, 2.5vw + 28px, 72px);

  /* Movimiento */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 200ms;
  --t-base: 280ms;
}

/* Tema claro: por preferencia del sistema (si no hay forzado) o por selector manual */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --income: #1257D6;
    --income-text: #0F4FC4;
    --expense: #D8342B;
    --expense-text: #C22E25;
    --warning: #B77B00;
    --canvas: #F4F6FA;
    --text-primary: #0B0E14;
    --text-secondary: rgba(11, 14, 20, 0.62);
    --text-tertiary: rgba(11, 14, 20, 0.45);
    --surface: rgba(255, 255, 255, 0.94);
    --surface-strong: rgba(255, 255, 255, 1);
    --surface-faint: rgba(11, 14, 20, 0.035);
    --hairline: rgba(11, 14, 20, 0.08);
    --stroke: rgba(11, 14, 20, 0.09);
    --stroke-strong: rgba(11, 14, 20, 0.16);
    --stroke-input: rgba(11, 14, 20, 0.48);
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(11, 14, 20, 0.08);
    --glass-highlight: rgba(255, 255, 255, 0.26);
    --shadow-card: 0 12px 30px rgba(11, 20, 40, 0.12);
    --shadow-hero: 0 22px 46px rgba(11, 20, 40, 0.16);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --income: #1257D6;
  --income-text: #0F4FC4;
  --expense: #D8342B;
  --expense-text: #C22E25;
  --warning: #B77B00;
  --canvas: #F4F6FA;
  --text-primary: #0B0E14;
  --text-secondary: rgba(11, 14, 20, 0.62);
  --text-tertiary: rgba(11, 14, 20, 0.45);
  --surface: rgba(255, 255, 255, 0.94);
  --surface-strong: rgba(255, 255, 255, 1);
  --surface-faint: rgba(11, 14, 20, 0.035);
  --hairline: rgba(11, 14, 20, 0.08);
  --stroke: rgba(11, 14, 20, 0.09);
  --stroke-strong: rgba(11, 14, 20, 0.16);
  --stroke-input: rgba(11, 14, 20, 0.48);
  --glass-bg: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(11, 14, 20, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.26);
  --shadow-card: 0 12px 30px rgba(11, 20, 40, 0.12);
  --shadow-hero: 0 22px 46px rgba(11, 20, 40, 0.16);
}

/* Zonas de marca: grafito en los dos temas (hero, privacidad, descarga, pie).
   Dentro, el texto es plata y las superficies son blanco a baja opacidad. */
.on-graphite,
.on-graphite-deep {
  color-scheme: dark;
  --text-primary: var(--brand-silver-light);
  --text-secondary: rgba(239, 239, 241, 0.72);
  --text-tertiary: rgba(239, 239, 241, 0.52);
  --surface: rgba(255, 255, 255, 0.06);
  --surface-strong: rgba(255, 255, 255, 0.10);
  --surface-faint: rgba(255, 255, 255, 0.04);
  --hairline: rgba(255, 255, 255, 0.08);
  --stroke: rgba(255, 255, 255, 0.10);
  --stroke-strong: rgba(255, 255, 255, 0.18);
  --stroke-input: rgba(255, 255, 255, 0.45);
  --btn-bg: var(--brand-silver-light);
  --btn-fg: var(--brand-graphite-deep);
  --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.40);
  --shadow-hero: 0 22px 46px rgba(0, 0, 0, 0.55);
  --income: var(--income-on-dark);
  --income-text: var(--income-text-on-dark);
  --expense: var(--expense-on-dark);
  --expense-text: var(--expense-text-on-dark);
  --warning: var(--amber);
  background: var(--brand-graphite);
  color: var(--text-primary);
}
.on-graphite-deep {
  background: var(--brand-graphite-deep);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--canvas);
  color: var(--text-primary);
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

img,
svg,
picture,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--brand-silver);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: text-decoration-color var(--t-fast) var(--ease);
}
a:hover {
  text-decoration-color: currentColor;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--brand-silver);
  color: var(--brand-graphite-deep);
}

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 10px 14px;
  border-radius: var(--r-chip);
  background: var(--text-primary);
  color: var(--canvas);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus {
  transform: none;
}

/* --------------------------------------------------------------------------
   3. Tipografía
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1,
.h1 {
  font-size: var(--fs-h1);
  letter-spacing: -0.04em;
  line-height: 1.02;
}
h2,
.h2 {
  font-size: var(--fs-h2);
}
h3,
.h3 {
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h4,
.h4 {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

p {
  margin: 0;
}
p + p {
  margin-top: 1em;
}

.lead {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.45;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.muted {
  color: var(--text-secondary);
}

.caption {
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--text-secondary);
}

/* Etiqueta en versalitas: Manrope 700, 11–12 px, tracking 0.12em */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.2;
}
.eyebrow--accent {
  color: var(--text-primary);
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.income {
  color: var(--income-text);
}
.expense {
  color: var(--expense-text);
}
.draw {
  color: var(--gold);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .draw {
    color: color-mix(in srgb, var(--gold) 52%, var(--text-primary));
  }
}
:root[data-theme="light"] .draw {
  color: color-mix(in srgb, var(--gold) 52%, var(--text-primary));
}
.on-graphite .draw,
.on-graphite-deep .draw {
  color: var(--gold);
}

.small-caps {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow {
  max-width: calc(760px + var(--gutter) * 2);
}

.section {
  padding-block: var(--section-y);
}
.section--tight {
  padding-block: clamp(40px, 2vw + 24px, 56px);
}

.section__head {
  max-width: 720px;
  margin-bottom: clamp(24px, 2vw + 12px, 40px);
}
.section__head > * + * {
  margin-top: 16px;
}
.section__head .eyebrow {
  margin-bottom: 4px;
}

.stack > * + * {
  margin-top: var(--stack-gap, 16px);
}

.grid {
  display: grid;
  gap: 16px;
}
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
@media (min-width: 900px) {
  .grid {
    gap: 20px;
  }
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   5. Componentes
   -------------------------------------------------------------------------- */

/* Botones ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: var(--r-control);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: center;
  text-wrap: balance;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.btn:active {
  transform: translateY(1px);
}
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}
.btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.btn--primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
}
.btn--primary:hover {
  opacity: 0.9;
}

/* Borde de control (--stroke-input): ≥ 3:1 sobre canvas, tarjeta y grafito */
.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--stroke-input);
}
.btn--secondary:hover {
  background: var(--surface);
  border-color: var(--text-secondary);
}

.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  padding-inline: 12px;
}
.btn--ghost:hover {
  background: var(--surface);
}

.btn--lg {
  min-height: 56px;
  padding-inline: 28px;
  font-size: 1.0625rem;
  border-radius: var(--r-row);
}
.btn--block {
  width: 100%;
}

/* Tarjetas --------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.card--flat {
  box-shadow: none;
}
.card--hero {
  border-radius: var(--r-hero);
  padding: 28px;
}
.card > .eyebrow {
  margin-bottom: 12px;
}
.card h3 + p,
.card h4 + p {
  margin-top: 10px;
  color: var(--text-secondary);
}
@media (min-width: 900px) {
  .card {
    padding: 24px;
  }
  .card--hero {
    padding: 32px;
  }
}

/* Vidrio: solo barra fija y una tarjeta destacada (máximo dos capas) */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

/* Chips y píldoras --------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--r-chip);
  background: var(--surface);
  border: 1px solid var(--stroke);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

/* Píldora de Espacio: el acento tiñe fondo, borde y punto; nunca la cifra */
.pill {
  --accent: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 13px 0 11px;
  border-radius: var(--r-control);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.pill svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
}
.pill--icon::before {
  display: none;
}
.pill--coral { --accent: var(--coral); }
.pill--amber { --accent: var(--amber); }
.pill--cyan { --accent: var(--cyan); }
.pill--violet { --accent: var(--violet); }
.pill--magenta { --accent: var(--magenta); }
.pill--mint { --accent: var(--mint); }
.pill--azure { --accent: var(--azure); }
.pill--gold { --accent: var(--gold); }

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: calc(var(--r-chip) - 4px);
  background: var(--text-primary);
  color: var(--canvas);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.badge--outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--stroke-strong);
}

/* Marca: monograma + "Boki" en Manrope 800 + FINANZAS en versalitas ------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px; /* objetivo táctil; el logo mide 36 / 46 px */
  color: inherit;
  text-decoration: none;
}
/* Logo cromado sobre una placa grafito: el cromado solo va sobre grafito (brief §3.1), y en tema
   claro la barra es clara. La placa es la misma en los dos temas. */
.brand__mark {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--brand-graphite);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-silver) 22%, transparent);
}
.brand__mark picture {
  height: 72%;
}
.brand__mark img {
  width: auto;
  height: 100%;
}
.brand__text {
  display: flex;
  align-items: baseline;
  gap: 7px;
  line-height: 1;
}
.brand__name {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}
.brand__sub {
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.brand--lg .brand__mark {
  width: 46px;
  height: 46px;
  border-radius: 12px;
}
.brand--lg .brand__name {
  font-size: 1.625rem;
}
.brand--lg .brand__sub {
  font-size: 0.75rem;
}

/* Navegación fija con vidrio --------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
}
.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav__links {
  display: none;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--r-chip);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--text-primary);
  background: var(--surface);
}
/* La página actual no se marca solo con color: lleva subrayado */
.nav__links a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
/* En móvil la navegación principal está en el menú: el landmark vacío no se anuncia */
.nav__inner > nav {
  display: none;
}
.nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav__cta {
  display: none;
}
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-chip);
  color: var(--text-primary);
}
.nav__toggle svg {
  width: 22px;
  height: 22px;
}
.nav__toggle .icon-close {
  display: none;
}
.nav__toggle[aria-expanded="true"] .icon-menu {
  display: none;
}
.nav__toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* Menú móvil: panel bajo la barra, mismo vidrio (segunda y última capa) */
.nav__menu {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 99;
  padding: 12px var(--gutter) 20px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0 0 var(--r-card) var(--r-card);
  background: color-mix(in srgb, var(--canvas) 96%, transparent);
}
.nav__menu[data-open="true"] {
  display: block;
}
.nav__menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.nav__menu a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  border-radius: var(--r-chip);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
}
.nav__menu a:hover {
  background: var(--surface);
}
.nav__menu .btn {
  margin-top: 12px;
}
.nav__menu .theme-toggle {
  margin-top: 16px;
}

/* Barra completa desde 1.100 px: por debajo, marca + menú (que trae el selector de tema).
   Enlaces + selector compacto + botón suman ~970 px (~1.025 con «Descargar en el App Store»). */
@media (min-width: 1100px) {
  .nav__inner > nav {
    display: block;
  }
  .nav__links {
    display: flex;
  }
  .nav__cta {
    display: inline-flex;
    white-space: nowrap;
  }
  .nav__toggle,
  .nav__menu {
    display: none !important;
  }
}

/* Selector de tema (Automático / Claro / Oscuro) ---------------------------- */
.theme-toggle {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border-radius: var(--r-chip);
  background: var(--surface);
  border: 1px solid var(--stroke);
}
.theme-toggle button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: calc(var(--r-chip) - 3px);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-secondary);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.theme-toggle button svg {
  width: 16px;
  height: 16px;
}
.theme-toggle button[aria-pressed="true"] {
  background: var(--text-primary);
  color: var(--canvas);
}
.on-graphite .theme-toggle button[aria-pressed="true"],
.on-graphite-deep .theme-toggle button[aria-pressed="true"] {
  background: var(--brand-silver-light);
  color: var(--brand-graphite-deep);
}
/* Selector compacto de la barra: solo con la barra completa (en móvil está el del menú).
   Iconos de 44 × 44; el texto queda oculto a la vista pero es el nombre del botón. */
.theme-toggle--compact {
  display: none;
}
@media (min-width: 1100px) {
  .theme-toggle--compact {
    display: inline-flex;
  }
}
.theme-toggle--compact button {
  padding: 0;
}
.theme-toggle--compact button span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Marco de iPhone para capturas reales ------------------------------------ */
.phone {
  position: relative;
  width: min(100%, 320px);
  margin-inline: auto;
  padding: 10px;
  border-radius: 52px;
  background: var(--brand-graphite-deep);
  box-shadow: var(--shadow-hero), inset 0 0 0 1px color-mix(in srgb, var(--brand-silver) 28%, transparent);
}
.phone::after {
  /* isla dinámica */
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 34%;
  height: 24px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--brand-graphite-deep);
}
.phone img,
.phone picture {
  width: 100%;
  border-radius: 42px;
  aspect-ratio: 1206 / 2622;
  object-fit: cover;
  background: var(--brand-graphite);
}
.phone--sm {
  width: min(100%, 260px);
  padding: 8px;
  border-radius: 44px;
}
.phone--sm img,
.phone--sm picture {
  border-radius: 36px;
}
.phone--sm::after {
  top: 16px;
  height: 20px;
}

/* Acordeón (preguntas frecuentes) ---------------------------------------- */
.faq {
  border-top: 1px solid var(--hairline);
}
.faq__item {
  border-bottom: 1px solid var(--hairline);
}
.faq__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 16px 4px;
  text-align: left;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  transition: color var(--t-fast) var(--ease);
}
.faq__button:hover {
  color: var(--text-secondary);
}
.faq__button svg {
  width: 20px;
  height: 20px;
  flex: none;
  transition: transform var(--t-base) var(--ease);
}
.faq__button[aria-expanded="true"] svg {
  transform: rotate(45deg);
}
.faq__panel {
  padding: 0 4px 20px;
  color: var(--text-secondary);
  max-width: 68ch;
}
.faq__panel[hidden] {
  display: none;
}

/* Tarjetas de precio ------------------------------------------------------ */
.price {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}
.price__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.price__amount {
  font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.price__amount small {
  font-size: 0.4em;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-secondary);
  margin-left: 4px;
}
.price__equiv {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  margin-top: 6px;
}
.price__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}
.price__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.price__list li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--brand-silver);
}
.price .btn {
  margin-top: auto;
}
.price--featured {
  border-color: var(--text-primary);
}

/* Filas de datos (maquetas de la app) ------------------------------------- */
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 12px;
  border-radius: var(--r-row);
  background: var(--surface-faint);
  border: 1px solid var(--stroke);
}
.row__icon {
  --accent: var(--slate);
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-chip);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.row__icon svg {
  width: 18px;
  height: 18px;
}
.row__body {
  flex: 1;
  min-width: 0;
}
.row__title {
  font-weight: 700;
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row__meta {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.row__amount {
  font-weight: 800;
  font-size: 0.9375rem;
  white-space: nowrap;
}

/* Formulario de lista de espera ------------------------------------------ */
.field {
  display: grid;
  gap: 8px;
}
.field label {
  font-weight: 700;
  font-size: 0.9375rem;
}
.input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border-radius: var(--r-control);
  background: var(--surface-strong);
  border: 1px solid var(--stroke-input);
  color: var(--text-primary);
  transition: border-color var(--t-fast) var(--ease);
}
/* Pista con contraste AA (5,7:1 sobre el campo en grafito); opacity evita que el navegador la atenúe */
.input::placeholder {
  color: var(--text-secondary);
  opacity: 1;
}
/* Foco: el borde se aclara y además lleva el anillo de 2 px del resto del sitio */
.input:focus {
  border-color: var(--text-primary);
}
.input:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
}
.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--text-primary);
}
.on-graphite .check input {
  accent-color: var(--brand-silver-light);
}
.form__row {
  display: grid;
  gap: 12px;
}
@media (min-width: 640px) {
  .form__row {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}
.waitlist .btn {
  min-height: 52px;
}
/* Región viva: siempre en el árbol de accesibilidad (nunca display:none), con su alto reservado */
.form__status {
  min-height: 1.5em;
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Pie de página ------------------------------------------------------------ */
.footer {
  padding-block: 56px 32px;
}
.footer__grid {
  display: grid;
  gap: 32px;
}
.footer__made {
  margin-top: 12px;
  color: var(--brand-silver);
}
.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--brand-silver);
  transition: color var(--t-fast) var(--ease);
}
.footer__links a:hover {
  color: var(--brand-silver-light);
}
.footer__legal {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: var(--fs-caption);
  color: var(--brand-silver);
}
@media (min-width: 900px) {
  .footer__grid {
    grid-template-columns: 1.2fr 2fr;
    align-items: start;
  }
}

/* Páginas legales: columna de lectura de 68 ch ---------------------------- */
.legal {
  padding-block: calc(var(--nav-h) + 48px) 80px;
}
.legal__inner {
  max-width: 68ch;
  margin-inline: auto;
}
.legal h1 {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  letter-spacing: -0.03em;
}
.legal__inner > .eyebrow + h1 {
  margin-top: 12px;
}
.legal__meta {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}
.legal__intro {
  margin-top: 24px;
  color: var(--text-secondary);
}
.legal h2 {
  font-size: 1.5rem;
  margin-top: 48px;
  margin-bottom: 12px;
}
.legal h3 {
  font-size: 1.125rem;
  margin-top: 28px;
  margin-bottom: 8px;
}
.legal p,
.legal li {
  color: var(--text-secondary);
  text-wrap: pretty;
}
.legal p + p,
.legal ul + p,
.legal ol + p,
.legal table + p,
.legal .callout + p {
  margin-top: 0.9em;
}
.legal strong {
  color: var(--text-primary);
  font-weight: 700;
}
.legal ul,
.legal ol {
  margin: 12px 0 0;
  padding-left: 1.3em;
}
.legal li + li {
  margin-top: 8px;
}
.legal table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 0.9375rem;
}
.legal th,
.legal td {
  text-align: left;
  vertical-align: top;
  padding: 10px 8px;
  border-bottom: 1px solid var(--hairline);
  color: var(--text-secondary);
}
.legal th {
  color: var(--text-primary);
  font-weight: 700;
}
/* Desde 480 px: todas las tablas con la misma grilla (primera columna al 26 %, las otras se
   reparten el resto) y el texto alineado con la columna de lectura, sin sangría a los lados. */
@media (min-width: 480px) {
  .legal table {
    table-layout: fixed;
  }
  .legal thead th:first-child {
    width: 26%;
  }
  .legal th:first-child,
  .legal td:first-child {
    padding-left: 0;
  }
  .legal th:last-child,
  .legal td:last-child {
    padding-right: 0;
  }
}
/* Teléfono (hasta 479 px): tres columnas no caben sin partir palabras. Cada fila pasa a ser un
   bloque: el encabezado de fila arriba y cada dato con su etiqueta (data-label). Los role= del HTML
   conservan la semántica de tabla en Safari, que la pierde con display:block. */
@media (max-width: 479px) {
  .legal table,
  .legal tbody,
  .legal tr,
  .legal th,
  .legal td {
    display: block;
  }
  .legal table {
    border-top: 1px solid var(--hairline);
  }
  .legal thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .legal tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--hairline);
  }
  .legal th,
  .legal td {
    padding: 0;
    border: 0;
    hyphens: manual;
  }
  .legal td {
    margin-top: 4px;
  }
  .legal td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    color: var(--text-primary);
  }
}
.legal .callout {
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: var(--r-row);
  background: var(--surface);
  border: 1px solid var(--stroke);
}
.legal .callout p {
  color: var(--text-primary);
}
.legal a {
  color: var(--text-primary);
}
.legal__more {
  margin-top: 56px;
}
/* Anexo del sitio en /privacidad: una línea marca dónde termina el texto de la app. */
.legal__annex {
  margin-top: 56px;
  border-top: 1px solid var(--stroke-strong);
}
.legal__annex > h2:first-child {
  margin-top: 32px;
}
.legal h2 + .legal__more {
  margin-top: 0;
}

/* Aviso / nota ------------------------------------------------------------- */
.note {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-row);
  background: var(--surface-faint);
  border: 1px solid var(--stroke);
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

/* Modo de publicación: beta (lista de espera) o tienda (App Store) --------- */
body[data-release="beta"] .only-store {
  display: none !important;
}
body[data-release="store"] .only-beta {
  display: none !important;
}

/* --------------------------------------------------------------------------
   6. Movimiento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* === Página de inicio === */

/* Hero: texto a la izquierda y la captura real a la derecha; la captura sale del hero y entra al canvas. */
.hero,
.section--overlap {
  --phone-overlap: clamp(72px, 9vw, 120px);
}
.hero {
  position: relative;
  z-index: 2;
  overflow: visible;
  padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 64px));
  padding-bottom: clamp(32px, 4vw, 56px);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "phone";
  gap: 24px;
  align-items: center;
}
.hero__copy {
  grid-area: copy;
  max-width: 620px;
}
.hero__copy > * + * {
  margin-top: 24px;
}
.hero__copy h1 {
  color: var(--brand-silver-light);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.hero__facts {
  list-style: none;
  margin: 20px 0 0; /* aire entre los botones y los tres datos */
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  font-weight: 700;
}
.hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}
.hero__facts svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--brand-silver);
}
.hero__phone {
  grid-area: phone;
  position: relative;
  z-index: 2;
  justify-self: center;
  width: 100%;
  margin-top: 16px;
  margin-bottom: calc(-1 * var(--phone-overlap));
}
/* La captura del hero se recorta justo bajo la hoja Espacios (1.655 de sus 1.696 px de alto):
   así no asoma media fila del Inicio bajo la hoja. Solo recorte, sin retoque. */
.hero__phone .phone img,
.hero__phone .phone picture {
  aspect-ratio: 780 / 1655;
  object-position: top;
}
/* La sección que sigue al hero deja sitio al teléfono que baja */
.section--overlap {
  padding-top: calc(var(--phone-overlap) + clamp(32px, 2vw + 16px, 48px));
}
@media (min-width: 900px) {
  .hero {
    padding-top: calc(var(--nav-h) + 40px);
  }
  .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "copy phone";
    column-gap: 48px;
    align-items: start;
  }
  .hero__copy {
    align-self: center;
    padding-top: 0;
    padding-bottom: clamp(24px, 4vw, 64px);
  }
  .hero__facts {
    flex-direction: column;
    gap: 6px;
  }
  /* Pegado al borde inferior: con el margen negativo, el teléfono sale del grafito y entra al canvas. */
  .hero__phone {
    justify-self: center;
    margin-top: 0;
    align-self: end;
  }
}
@media (min-width: 1100px) {
  .hero__grid {
    column-gap: 64px;
  }
  /* Tope de la escala (§3.3): 64 px en escritorio */
  .hero__copy h1 {
    font-size: 4rem;
  }
}

@media (max-width: 479px) {
  .hero__actions .btn,
  .legal__more .btn {
    flex: 1 1 100%;
  }
}

/* Composición alterna: texto a un lado, captura o maqueta al otro */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
.split__media {
  order: 2;
}
.split__copy {
  order: 1;
}
.split__copy > * + * {
  margin-top: 20px;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
  }
  .split__media,
  .split__copy {
    order: 0;
  }
  .split--media-right {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .split--media-right .split__media {
    order: 2;
  }
}

/* El problema */
.problem .card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
}
.problem__index {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-secondary); /* 12 px: necesita 4,5:1 (6,87 oscuro / 5,44 claro sobre la tarjeta) */
}
.problem h3 {
  font-size: 1.375rem;
  text-wrap: pretty;
}
.problem__quote {
  margin: 4px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--brand-silver);
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Espacios: filas con píldoras */
.spaces__blocks {
  display: grid;
  gap: 12px;
}
.space-block.row {
  align-items: flex-start;
  padding: 20px 20px 22px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.space-block .row__body > * + * {
  margin-top: 10px;
}
.space-block .row__title {
  white-space: normal;
  overflow: visible;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.space-block .row__meta {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.space-block .cluster {
  gap: 8px;
}
.spaces__chips {
  margin-top: 28px;
}
.spaces__chips .eyebrow {
  display: block;
  margin-bottom: 12px;
}

/* Maqueta: retiro de socio en tres pasos (sale del café, entra a Personal, el margen no cambia) */
.spaces__flow {
  margin-top: clamp(32px, 2.5vw + 12px, 48px);
}
.spaces__flow > h3 {
  font-size: var(--fs-h3);
}
.spaces__flow > .muted {
  margin-top: 10px;
  max-width: 60ch;
  text-wrap: pretty;
}
.flow {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}
.flow__step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.flow__step .eyebrow {
  margin-bottom: 2px;
}
.flow__label {
  font-weight: 700;
  color: var(--text-secondary);
}
.flow__amount {
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
/* Cifra grande (≥ 28 px): en claro basta 3:1, así que el dorado del retiro puede ser más dorado (3,46:1 sobre la tarjeta) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .flow__amount.draw {
    color: color-mix(in srgb, var(--gold) 70%, var(--text-primary));
  }
}
:root[data-theme="light"] .flow__amount.draw {
  color: color-mix(in srgb, var(--gold) 70%, var(--text-primary));
}
.flow__arrow {
  display: grid;
  place-items: center;
  color: var(--text-secondary);
}
.flow__arrow svg {
  width: 28px;
  height: 28px;
  transform: rotate(90deg);
}
@media (min-width: 900px) {
  .flow {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 12px;
    align-items: stretch;
  }
  .flow__arrow svg {
    transform: none;
  }
}

/* Funciones */
.feature {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
.feature__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-chip);
  display: grid;
  place-items: center;
  background: var(--surface-faint);
  border: 1px solid var(--stroke);
  color: var(--text-primary);
}
.feature__icon svg {
  width: 24px;
  height: 24px;
}
.feature h3 {
  font-size: 1.125rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.feature p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  margin: 0;
}
@media (max-width: 599px) {
  .feature {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 14px;
    row-gap: 6px;
    padding: 20px;
  }
  .feature__icon {
    grid-row: span 2;
  }
}

/* Boki Negocios */
.biz {
  margin-top: clamp(32px, 2.5vw + 12px, 56px);
}
.biz__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.biz__list .row {
  background: var(--surface);
}
.biz__list .row__title {
  white-space: normal;
  overflow: visible;
}
.biz__list .row__amount {
  font-size: 0.9375rem;
}
@media (max-width: 479px) {
  .biz .card--hero {
    padding: 20px;
  }
  .biz__list .row {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .biz__list .row__body {
    flex: 1 1 100%;
  }
  .biz__list .row__amount {
    font-size: 1.0625rem;
  }
}

/* Privacidad */
.claims .card {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.claims h3 {
  font-size: 1.125rem;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.claim__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-chip);
  display: grid;
  place-items: center;
  background: var(--surface-strong);
  border: 1px solid var(--stroke);
  color: var(--brand-silver-light);
}
.claim__icon svg {
  width: 22px;
  height: 22px;
}
.privacy__foot {
  margin-top: clamp(28px, 3vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  color: var(--text-secondary);
}

/* Precios */
.h-line {
  display: block;
}
.price__note {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}
.price__note b {
  color: var(--text-primary);
}
.pricing__foot {
  margin-top: 24px;
  text-align: center;
}

/* Descarga */
.download {
  text-align: center;
}
.download__inner {
  max-width: 640px;
  margin-inline: auto;
}
.download__inner > * + * {
  margin-top: 20px;
}
.appicon {
  width: 144px;
  height: 144px;
  margin-inline: auto;
  border-radius: 22.37%;
  box-shadow: var(--shadow-hero), 0 0 0 1px color-mix(in srgb, var(--brand-silver) 30%, transparent);
}
.appicon img {
  width: 100%;
  height: 100%;
  border-radius: 22.37%;
}
.waitlist {
  margin-top: 28px;
  text-align: left;
  display: grid;
  gap: 16px;
}
.waitlist .form__status {
  text-align: center;
}
.waitlist__note {
  text-align: center;
  color: var(--brand-silver);
}
.waitlist__note a {
  color: var(--brand-silver-light);
}
.store-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
}
.store-cta__qr {
  width: 132px;
  height: 132px;
  padding: 10px;
  border-radius: var(--r-control);
  background: var(--brand-silver-light);
}
.store-cta__qr img {
  width: 100%;
  height: 100%;
}

/* Sobre Boki */
.about p + p {
  margin-top: 14px;
}
.about__facts {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Precios: cuatro columnas solo con espacio de sobra; cifras que no se parten */
.pricing .grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.price__head {
  flex-wrap: nowrap;
}
.price__head h3 {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: normal;
  white-space: nowrap;
}
.price__head .badge {
  flex: none;
  white-space: nowrap;
}
.price__amount {
  font-size: 2rem;
  white-space: nowrap;
}
.price__amount small {
  display: block;
  margin: 6px 0 0;
  font-size: var(--fs-caption);
  white-space: normal;
}
@media (min-width: 1100px) {
  .pricing .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .price__amount {
    font-size: 1.75rem;
  }
  .price__head h3 {
    font-size: 1.5rem;
  }
}