/* =========================================================================
   Mesura — landing "El mes a la vista"
   Dirección visual: libro contable contemporáneo / cartola chilena releída
   en clave editorial. Las reglas (líneas) hacen el trabajo que antes hacían
   las tarjetas: el contenido se separa con filetes, columnas y rieles, no
   con cajas blancas flotando sobre una grilla.
   Ver docs/redesign/ART_DIRECTION.md
   ========================================================================= */

/* ---------- 0. Tipografías auto-alojadas --------------------------------
   Los .woff2 se sirven desde este mismo dominio, no desde Google Fonts. No es
   una decisión de rendimiento (aunque ayuda: un origen menos que resolver):
   una página que promete "no compartimos tus datos con terceros" no puede
   pedirle la tipografía a un tercero y filtrarle la IP de cada visita.
   Subconjunto latino, que cubre el español completo.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 112%;
  font-display: swap;
  src: url("/assets/fonts/archivo-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/jetbrainsmono-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Solo la itálica: la serif aparece una vez en toda la página, y en cursiva. */
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrumentserif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Tinta y papel. El papel es cálido, no blanco: es una hoja de cuaderno. */
  --ink:        #12110e;
  --ink-2:      #3d3a33;
  --muted:      #635f55;
  --paper:      #f1ece0;
  --paper-2:    #e7e0d0;
  --sheet:      #fbf8f1;

  /* Acentos. El verde ácido es la marca; el resto tiene significado. */
  --acid:       #dfff42;
  --on-acid:    #12110e;
  /* Dos naranjas a proposito: el vivo solo para rellenos y marcas graficas, el
     quemado para cualquier naranja que sea TEXTO. El vivo sobre papel da 2,6:1
     y no pasa AA; separarlos evita elegir entre marca y legibilidad. */
  --orange:     #ff5c00;
  --orange-ink: #a83a00;
  --red:        #c02718;
  --blue:       #1f4fd8;

  /* Filetes: la unidad estructural de toda la página. */
  --hair:       rgba(18, 17, 14, .18);
  --hair-soft:  rgba(18, 17, 14, .09);
  --rule:       var(--ink);

  /* Tipografía. Tres familias, cada una con un trabajo distinto:
     Archivo (variable, eje wdth) para voz y etiquetas condensadas,
     Instrument Serif para UNA frase editorial,
     JetBrains Mono para todo lo que sea cifra o dato. */
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(18px, 4vw, 40px);
  --page: 1240px;

  /* Escala vertical. Base de 4px, derivada del ritmo real de la página: el
     bloque de línea del cuerpo es 17px × 1,55 = 26,35px y el de mono 17px.
     Los cinco últimos son fluidos porque separan bloques, no elementos.
     Antes había 31 valores verticales distintos escritos a mano; esta escala
     los reemplaza salvo dentro de filas de datos y controles, que no se tocan. */
  --space-hair:   4px;    /* mínimo: dentro de un mismo objeto */
  --space-tight:  8px;    /* elementos pegados: dt→dd, etiqueta→campo */
  --space-near:   12px;   /* elementos relacionados */
  --space-item:   16px;   /* título→bajada, párrafo→párrafo */
  --space-group:  24px;   /* bloques relacionados dentro de una columna */
  --space-block:  clamp(24px, 2.4vw, 34px);     /* encabezado→contenido */
  --space-moment: clamp(22px, 2.6vw, 32px);     /* fila de registro (.moment) */
  --space-hero:   clamp(28px, 3vw, 44px);       /* respiro superior del hero */
  --space-after-band: clamp(24px, 2.4vw, 34px); /* papel antes y despues del canto de una banda */
  --space-band:   clamp(36px, 3.4vw, 48px);     /* inset interno de una banda */
  --space-section: clamp(40px, 4.4vw, 64px);    /* seccion a seccion */
}
/* Bajo 720px el piso de estos cinco valores era el mismo que en escritorio
   —el clamp() no baja de 24-40px en ningún ancho—, pero en un teléfono el
   aire entre secciones no cumple la misma función que en una pantalla ancha
   (separar columnas de la vista). Es sólo espaciado, ninguna palabra se
   toca: recorte de scroll móvil del 21 de agosto (13,6 → objetivo 7-9
   pantallas), medido en EVALUACION-MOVIL-20260821.md. */
@media (max-width: 719.98px) {
  :root {
    --space-block: 20px;
    --space-after-band: 18px;
    --space-band: 26px;
    --space-section: 28px;
    --space-hero: 20px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Oscuro tibio, nunca negro puro: sigue siendo papel, con menos luz. */
    --ink:       #f0ebdd;
    --ink-2:     #c9c2b0;
    --muted:     #9c9584;
    --paper:     #1b1914;
    --paper-2:   #232019;
    --sheet:     #221f18;
    --red:       #ff7361;
    --blue:      #8bb0ff;
    --orange-ink: #ff7a2e;
    --hair:      rgba(240, 235, 221, .20);
    --hair-soft: rgba(240, 235, 221, .10);
  }
}

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

html {
  scroll-behavior: smooth;
  /* El offset del salto de ancla. El VALOR es el que midió QA_RITMO §12.3 —68px
     en escritorio, 110px bajo 720px— y no se toca: esa pasada lo calibró contra
     la cabecera real y bajó el vacío tras saltar de 108px a 72. Lo único que
     cambia es de dónde sale: antes eran dos números literales, uno acá y otro
     dentro de un @media a 250 líneas de distancia; ahora se compone de
     --masthead-h, declarada junto a las reglas del masthead (§5), donde se
     decide el alto que este número tiene que seguir. Ese desacople ya costó
     caro una vez: quedó en 92px contra una barra de 60 y cada salto regalaba
     32px muertos, hasta que §12.2b lo encontró. */
  scroll-padding-top: calc(var(--masthead-h) + var(--anchor-gap));
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* El atributo hidden tiene que ganarle a cualquier display de esta hoja. La
   regla del agente de usuario es `[hidden] { display: none }`, con especificidad
   de atributo: cualquier regla de clase que declare `display` —y aquí hay
   varias con inline-flex— la anula y devuelve el elemento al orden de foco.
   Es como quedaban visibles «Volver al ejemplo original» y «Limpiar», que se
   ocultan con el atributo desde demo.js y calculator.js, y el botón «Probar
   con un gasto» cuando no hay JavaScript. */
[hidden] { display: none !important; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 1px;
}

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

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--page));
  margin-inline: auto;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* El enlace "Saltar al contenido" es el único .sr-only pensado para que
   alguien lo vea: quien navega con teclado y sin lector de pantalla, al
   presionar Tab, no veía nada — el link se anunciaba a un lector de pantalla
   pero quedaba recortado incluso con foco. Acotado a <a> para no afectar los
   avisos aria-live (#moneda-live, #demo-live), que sí deben seguir invisibles
   cuando reciben foco programático. */
a.sr-only:focus {
  position: static;
  width: auto; height: auto;
  padding: 10px 16px; margin: 0;
  overflow: visible; clip: auto; clip-path: none; white-space: normal;
  display: inline-block;
  background: var(--ink); color: var(--paper);
  z-index: 100;
}

/* El bloque para anotar gastos solo aparece cuando demo.js confirmo que
   arranco (data-ready). Sin JS no se muestra un formulario que no haria nada. */
#estado-mes:not([data-ready]) .jot { display: none; }

/* ---------- 3. Escala tipográfica ---------------------------------------- */
/* Los titulares usan el eje de ancho de Archivo: condensados y apretados,
   como el encabezado de un estado de cuenta. */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.02em;
  font-stretch: 88%;
  text-wrap: balance;
}

.t-display {
  font-size: clamp(40px, 7.4vw, 84px);
  line-height: .96;
  letter-spacing: -.035em;
  font-stretch: 82%;
}
.t-h2 {
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.02;
  letter-spacing: -.028em;
  font-stretch: 84%;
}
.t-h3 { font-size: clamp(19px, 2vw, 23px); letter-spacing: -.02em; }

.lead {
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 52ch;
}

/* La única serif de la página: se reserva para una frase, no para un bloque. */
.editorial {
  font-family: var(--serif);
  font-weight: 400;
  font-stretch: normal;
  letter-spacing: -.01em;
  font-style: italic;
}

/* Etiqueta de sección: número + nombre, como el índice de un libro contable. */
.tag {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.tag b { color: var(--orange-ink); font-weight: 700; }
.tag::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hair);
  transform: translateY(-3px);
}

/* Cifras: siempre monoespaciadas y de ancho tabular, para que una columna de
   montos se alinee como un registro contable de verdad. */
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.02em;
}

/* Resaltador: trazo levemente irregular, no un rectángulo perfecto. */
.mark {
  background: var(--acid);
  color: var(--on-acid);
  padding: .04em .22em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  clip-path: polygon(0 6%, 100% 0, 99.6% 96%, .4% 100%);
}

/* ---------- 4. Botones --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 24px;
  border: 2px solid var(--rule);
  font-size: 15px;
  font-weight: 700;
  font-stretch: 92%;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .12s ease, background-color .12s ease;
}
.btn--primary { background: var(--acid); color: var(--on-acid); border-color: var(--ink); }
.btn--primary:hover { transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--paper-2); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(1px); }

/* El filete de este enlace es un subrayado, no el borde de su caja: así puede
   tener 44px de superficie táctil sin que la línea se despegue del texto. */
.link-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 2px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--hair);
  text-underline-offset: 4px;
}
.link-quiet:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ---------- 5. Masthead -------------------------------------------------- */
/* No es una barra flotante de SaaS: es la cabecera de una cartola, con su
   filete inferior. En móvil se parte en dos líneas antes que colapsar en
   hamburguesa — cuatro destinos caben perfectamente. */

/* Alto real de la cabecera fija, medido: una fila en escritorio (60px) y dos
   bajo 720px, donde aparece .masthead__strip (105px). Es lo que consume el
   destino de cualquier ancla, así que se declara aquí —donde se decide— y no
   en la base de la hoja, lejos de la causa.
   El respiro NO es un valor nuevo: 105 + 5 = 110 y 60 + 8 = 68 son exactamente
   los dos scroll-padding-top que dejó medidos QA_RITMO §12.3, descompuestos en
   sus dos partes. El vacío tras saltar sigue siendo 72px en «Cómo funciona»,
   57 en «Tus datos» y 42 en «Preguntas», que son las cifras de §12.4. Subirlo
   sería volver a inflar justo lo que esa pasada apretó. */
:root {
  --masthead-h: 105px;
  --anchor-gap: 5px;
}
@media (min-width: 720px) {
  :root { --masthead-h: 60px; --anchor-gap: 8px; }
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.masthead__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-block: 6px;
  text-decoration: none;
  font-weight: 700;
  font-stretch: 78%;
  font-size: 21px;
  letter-spacing: .01em;
}
.brand__mark {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--acid);
  color: var(--on-acid);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  border: 1px solid var(--ink);
}
.masthead__right {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
}
.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
}
/* Los enlaces de navegación llevan su superficie táctil en el padding: como
   texto suelto medían 17px de alto y no llegaban ni al mínimo de 24px. */
.masthead__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 13px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  white-space: nowrap;
}
.masthead__nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
/* Sibling de .masthead__nav (no hijo, ver comentario en el HTML): visible en
   todos los anchos, incluido bajo 720px, donde .masthead__nav se oculta
   entero y antes no quedaba ningún CTA de acceso en la cabecera. */
.masthead__cta {
  min-height: 44px;
  padding: 12px 15px;
  border: 1.5px solid var(--rule);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.masthead__cta:hover { background: var(--acid); color: var(--on-acid); }

/* "Mi cuenta": la puerta para quien ya tiene cuenta, ahora que la app vive en
   app.mesuraapp.com. Botón con borde de tinta y fondo transparente: se lee
   como botón (primera versión era un enlace subrayado y se perdía — feedback
   de Matías del 26 de agosto), pero segundo en jerarquía: sin relleno. El
   ácido lleno habría competido con el CTA, que es justo lo que no puede
   pasar; aquí el ácido queda para el hover, como en el propio CTA. */
.masthead__cuenta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 12px 15px;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.masthead__cuenta:hover { background: var(--acid); color: var(--on-acid); }
/* De 780px hacia arriba el botón lleva texto y no necesita el icono. */
.masthead__cuenta .cuenta-ico { display: none; }
/* Entre 720 y 780px el texto no cabe junto al CTA: con las métricas reales de
   las fuentes (marca 112px, nav 238.9px, CTA 156.3px, 4 gaps de 2.4vw), el
   botón con texto (69.3 + 30 + 3 = 102.3px) desborda hasta ~776px. El icono
   (18 + 22 + 3 = 43px) deja 27px de sobra ya a 720px. */
@media (min-width: 720px) and (max-width: 779.98px) {
  .masthead__cuenta { padding: 0 11px; }
  .masthead__cuenta .cuenta-txt { display: none; }
  .masthead__cuenta .cuenta-ico { display: block; }
}
.masthead__strip-cuenta { display: none; }

/* Móvil: la fila de secciones baja a su propia banda con filete. */
.masthead__strip { display: none; }
@media (max-width: 719.98px) {
  .masthead__nav { display: none; }
  /* La fila de arriba no tiene sitio para "Mi cuenta" en móvil (la marca de
     112px y el CTA de 156px la llenan): baja al final de la banda de
     secciones, empujado a la derecha, como botón de icono. Medido con las
     métricas reales de las fuentes: las secciones ocupan 225.1px, el botón
     con texto (84.6px mínimo) desborda a 360px de ancho haga lo que se haga
     con los gaps; el de icono (18 + 22 + 3 = 43px) cabe con 20px de sobra
     bajando el gap de 22 a 12: 225.1 + 3×12 + 43 = 304.1 de los 324 útiles
     (360 − 2×18 de gutter). */
  .masthead__cuenta { display: none; }
  .masthead__strip {
    display: flex;
    gap: 12px;
    border-top: 1px solid var(--hair);
  }
  /* Es el menú principal en móvil: necesita superficie, no solo texto. */
  .masthead__strip a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
  }
  /* Declarado después y con el ancestro en el selector para ganarle a
     ".masthead__strip a": esto es un botón —borde de tinta, como su versión
     de escritorio— no un ancla de sección. El alto no cambia: min-height 44
     con box-sizing border-box absorbe el borde, así que la banda (y con ella
     --masthead-h: 105px) queda igual. */
  .masthead__strip a.masthead__strip-cuenta {
    margin-left: auto;
    justify-content: center;
    padding: 0 11px;
    border: 1.5px solid var(--ink);
    color: var(--ink);
  }
  .masthead__strip a.masthead__strip-cuenta:hover { background: var(--acid); color: var(--on-acid); }
}

/* Bajo 360px los cuatro destinos ya no caben en una línea y partir la banda
   cambiaría el alto calibrado de la cabecera (--masthead-h: 105px). En esos
   anchos "Mi cuenta" se retira de la banda: queda la entrada del pie
   ("Iniciar sesión") y la línea junto al formulario. */
@media (max-width: 359.98px) {
  .masthead__strip { gap: 22px; }
  .masthead__strip a.masthead__strip-cuenta { display: none; }
}

/* ---------- 6. Secciones ------------------------------------------------- */
/* Ritmo entre secciones. Antes cada .section llevaba var(--step) arriba Y
   abajo: entre dos secciones contiguas el hueco visual era el doble — 192px a
   1440 — y el 23% de la altura de la página era aire vacío de sección.
   Ahora la separación vive en UN solo lado: una sección sin fondo no necesita
   padding inferior, porque el superior de la siguiente ya es la separación.
   Una sección con fondo sí lo lleva en ambos, porque ahí el padding no separa:
   es el margen interior de la banda de color.
   Se usa el combinador `+` y no `:has()` a propósito — la hoja no usa `:has()`
   en ninguna parte y Firefox quedó sin probar (QA_REPORT §6). */
.section { padding-block: var(--space-section) 0; }
/* El padding de una banda es su margen interior, no la separación con lo
   anterior: esa la pone el margen, que sí es papel. Sin él, el canto del color
   quedaría pegado al último renglón de la sección previa. */
.section--band {
  background: var(--paper-2);
  padding-block: var(--space-band);
  margin-top: var(--space-after-band);
}

/* Tras una banda, el canto del color ya hace de separador: la sección
   siguiente necesita aire, pero no la suma de los dos paddings. */
.section--band + .section:not(.section--band) { padding-top: var(--space-after-band); }

/* Dos bandas seguidas se leerían como un solo bloque de color: se fusionan a
   propósito y el inset se pone una sola vez. */
.section--band + .section--band { margin-top: 0; padding-top: 0; }

/* La última sección de <main> recupera su inferior: el pie trae su propio
   filete y no debe pegarse al bloque de cierre. */
main > .section:last-child { padding-bottom: var(--space-section); }
main > .section--band:last-child { padding-bottom: var(--space-band); }

.section__head { margin-bottom: var(--space-block); }
.section__head .t-h2 { margin-top: var(--space-item); max-width: 18ch; }

/* Los márgenes que antes iban en style="margin-top:…" dentro del HTML ahora
   salen de la escala: un solo valor para "bloque relacionado dentro de una
   columna", en vez de 34/26/24 escritos a mano en cinco sitios distintos. */
.section__head + * > .lead,
.evidence .lead,
.calc .lead { margin-top: var(--space-item); }
.pact + .fineprint { margin-top: var(--space-group); }

/* ---------- 7. Hero: el estado del mes ----------------------------------- */
/* Sin padding inferior: la sección siguiente pone la separación. */
.hero { padding-block: var(--space-hero) 0; }

/* Titular a la izquierda, bajada y botones alineados al pie de la última
   línea del titular. La asimetría viene de las proporciones, no de meter una
   imagen a la derecha. */
.hero__top {
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .hero__top {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 68px);
    align-items: end;
  }
  .hero__side { padding-bottom: 8px; }
}
.hero__eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero h1 { margin-top: 18px; }
.hero .lead { max-width: 40ch; }
.hero__ctas {
  margin-top: var(--space-group);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* La hoja: el objeto central de la página. Un solo marco grueso en toda la
   landing — este. Todo lo demás se separa con filetes. */
.sheet {
  margin-top: clamp(28px, 3.6vw, 48px);
  background: var(--sheet);
  border: 2px solid var(--rule);
}
.sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sheet__head span { color: var(--muted); font-weight: 500; letter-spacing: .08em; }
.sheet__title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  font-stretch: normal;
  text-transform: uppercase;
}

/* Cabecera de cifras: tres columnas separadas por filetes verticales, como
   el encabezado de una cartola. Nada de tarjetas. */
.figures {
  display: grid;
  grid-template-columns: 1fr;
}
.figures > div {
  padding: 20px 18px;
  border-bottom: 1px solid var(--hair);
}
.figures > div:last-child { border-bottom: 0; }
@media (max-width: 719.98px) {
  .figures > div { padding: 14px 16px; }
}
@media (min-width: 768px) {
  .figures { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.35fr); }
  .figures > div { border-bottom: 0; border-right: 1px solid var(--hair); padding: 22px 24px; }
  .figures > div:last-child { border-right: 0; }
}
.figures dt {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.figures dd { margin-top: 8px; }
.fig-amount {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
}
.fig-amount--negative { color: var(--red); }
.fig-sub {
  margin-top: 7px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.fig-amount--mid { font-size: clamp(22px, 2.8vw, 28px); }

/* Ritmo: un eje, no una barra de progreso. La marca de "esperado a hoy" es
   el dato; el relleno es sólo la lectura. */
.pace { margin-top: 4px; }
.pace__verdict {
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.pace__verdict[data-state="over"] { color: var(--orange-ink); }
.pace__axis {
  position: relative;
  height: 10px;
  margin-top: 16px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.pace__fill {
  height: 100%;
  background: var(--ink);
  transition: width .5s cubic-bezier(.22, .9, .3, 1);
}
.pace__fill[data-state="over"] { background: var(--orange); }
/* La marca de "esperado a hoy" cae encima del relleno, así que lleva un halo
   del color de la hoja para seguir leyéndose sobre naranjo. */
.pace__tick {
  position: absolute;
  top: -9px;
  bottom: -9px;
  width: 2px;
  background: var(--ink);
  box-shadow: 0 0 0 1.5px var(--sheet);
  transition: left .5s cubic-bezier(.22, .9, .3, 1);
}
.pace__tick::after {
  content: "";
  position: absolute;
  top: -5px; left: -4px;
  width: 10px; height: 10px;
  background: var(--acid);
  border: 1.5px solid var(--ink);
}
.pace__scale {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: var(--space-item);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--muted);
}

/* Cuerpo de la hoja: movimientos a la izquierda, categorías al margen.
   Tercera vuelta el 21 de agosto sobre este mismo bloque (ver el comentario
   junto a #demo-cats en index.html) -- esta vez vuelve para quedarse:
   Matías la pidió de nuevo después de que una reversión se la llevara por
   error junto con un arreglo que no hacía falta. */
.sheet__body {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .sheet__body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .sheet__ledger { border-right: 1px solid var(--hair); }
}
.sheet__ledger, .sheet__aside { padding: 20px 18px 24px; }
@media (min-width: 768px) { .sheet__ledger, .sheet__aside { padding: 24px; } }

.block-title {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--rule);
}

/* Movimientos: filas regladas con el monto a la derecha, alineado. */
.entries { list-style: none; }
.entries li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 6px 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair-soft);
}
.entries li:last-child { border-bottom: 0; }
.entries__label { font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.entries__meta {
  grid-column: 1;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
  margin-top: 3px;
}
.entries__amount {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.entries li[data-fresh="true"] { animation: entryIn .45s cubic-bezier(.22, .9, .3, 1); }
@keyframes entryIn {
  from { opacity: 0; transform: translateY(-6px); background: var(--acid); }
  to   { opacity: 1; transform: none; background: transparent; }
}

/* Categorías: filete + barra fina, sin caja. Siempre visible, sin <details>
   -- ver el comentario junto a #demo-cats en index.html. */
.cats { list-style: none; }
.cats li { padding: 12px 0; border-bottom: 1px solid var(--hair-soft); }
.cats li:last-child { border-bottom: 0; }
.cats__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.cats__name { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.cats__dot { width: 9px; height: 9px; flex: none; border: 1px solid var(--ink); }
.cats__amount {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  font-weight: 700;
}
.cats__bar { height: 4px; margin-top: 8px; background: var(--hair-soft); }
.cats__bar span { display: block; height: 100%; transition: width .5s cubic-bezier(.22, .9, .3, 1); }

/* Control de "anotar gasto": la pieza que convierte la hoja en demostración. */
.jot {
  border-top: 1px solid var(--rule);
  padding: 20px 18px 24px;
  background: var(--paper-2);
}
@media (min-width: 768px) { .jot { padding: 22px 24px 26px; } }
.jot__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 768px) {
  .jot__grid { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) auto; gap: 20px; }
}
.field > .field__label,
.jot legend {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.money-input {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--rule);
  background: var(--sheet);
}
.money-input > span {
  padding: 0 4px 0 12px;
  font-family: var(--mono);
  font-size: 17px;
  color: var(--muted);
}
.money-input input {
  flex: 1;
  min-width: 0;
  padding: 12px 12px 12px 4px;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.money-input:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }

.chips { border: 0; }
.chips__set { display: flex; flex-wrap: wrap; gap: 8px; }
.chips__set label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 11px 13px;
  border: 1.5px solid var(--hair);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.chips__set label:hover { border-color: var(--ink); }
/* El radio nativo se esconde pero sigue existiendo: así las flechas del
   teclado recorren el grupo como corresponde y el lector de pantalla anuncia
   "opción 2 de 4" sin que haya que inventar nada con ARIA. */
.chips__set input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.chips__set input:checked + label {
  background: var(--acid);
  color: var(--on-acid);
  border-color: var(--ink);
}
.chips__set input:focus-visible + label {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.chips__set label i { width: 9px; height: 9px; flex: none; border: 1px solid var(--ink); }

.jot__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 12px;
  margin-top: var(--space-near);
  padding-top: var(--space-tight);
  border-top: 1px solid var(--hair);
}
.jot__note { font-family: var(--mono); font-size: 11.5px; color: var(--muted); line-height: 1.6; max-width: 58ch; }
.jot__error { color: var(--red); font-weight: 700; }
.jot__error:empty { display: none; }

/* ---------- 8. "Un mes real": tres momentos como registro, no como grilla - */
.moments { list-style: none; counter-reset: m; }
.moment {
  counter-increment: m;
  display: grid;
  gap: 8px 28px;
  grid-template-columns: 1fr;
  padding-block: var(--space-moment);
  border-top: 1px solid var(--hair);
}
.moment:last-child { border-bottom: 1px solid var(--hair); }
@media (min-width: 900px) {
  /* Asimetría deliberada: número al margen, texto en la columna ancha,
     apunte contable a la derecha — el ojo baja por el riel, no por tres cajas. */
  .moment { grid-template-columns: 84px minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
}
.moment__n {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--orange-ink);
  padding-top: 6px;
}
.moment__n::before { content: "0" counter(m); }
.moment h3 { max-width: 22ch; }
.moment p { margin-top: var(--space-near); color: var(--ink-2); max-width: 46ch; font-size: 16px; }

/* Móvil: el número no se lleva un renglón entero para él solo. Conserva su
   riel —el mismo gesto del escritorio, más angosto— en vez de apilarse encima
   del título, que es lo que hacía la reducción literal del escritorio. */
@media (max-width: 899.98px) {
  /* El riel se estrecha en las pantallas más angostas para no robarle ancho
     de lectura al texto. */
  .moment { grid-template-columns: clamp(26px, 8vw, 34px) minmax(0, 1fr); }
  .moment__n { grid-column: 1; grid-row: 1; padding-top: 4px; }
  .moment > div,
  .moment .jotting { grid-column: 2; }
}

/* El apunte: una fila de cartola que ilustra el momento del que habla. */
.jotting {
  margin-top: 4px;
  max-width: 46ch;
  border-left: 2px solid var(--ink);
  padding: 12px 0 12px 16px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.jotting b {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink);
}
.jotting b + b { margin-top: 4px; }
.jotting em {
  display: block;
  margin-top: 8px;
  font-style: normal;
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.jotting .up { color: var(--orange-ink); }

/* ---------- 9. Evidencia ------------------------------------------------- */
/* El filete de una sección de dos columnas cruza ambas: es lo que hace que se
   lean como un mismo renglón del libro y no como dos bloques que arrancan cada
   uno por su cuenta. Antes vivía solo en .gap-figure (izquierda) y en
   .statement (derecha), y los dos arranques quedaban desalineados. */
.evidence {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  grid-template-columns: 1fr;
  align-items: start;
  border-top: 2px solid var(--rule);
  padding-top: var(--space-block);
}
@media (min-width: 900px) {
  .evidence { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  /* El ancho lo fija la columna del grid, no el límite de 78ch pensado para
     cuando .qa vive solo en una página angosta. */
  .evidence .qa { max-width: none; }
}

/* Dos cifras enfrentadas en la misma escala: la brecha es el mensaje. */
.gap-figure { border-top: 0; }
.gap-figure__row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hair);
}
.gap-figure__pct {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(44px, 7vw, 72px);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: .9;
  min-width: 3.2ch;
}
.gap-figure__row--weak .gap-figure__pct { color: var(--orange-ink); }
.gap-figure__label { font-size: 15.5px; line-height: 1.45; color: var(--ink-2); max-width: 30ch; }
.gap-figure__label b { color: var(--ink); font-weight: 700; }
.gap-figure__meter { grid-column: 1 / -1; height: 6px; background: var(--hair-soft); }
.gap-figure__meter span { display: block; height: 100%; background: var(--ink); }
.gap-figure__row--weak .gap-figure__meter span { background: var(--orange); }
.source {
  margin-top: var(--space-item);
  max-width: 62ch;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--muted);
}
.source a { color: inherit; text-underline-offset: 3px; }
.source a:hover { color: var(--ink); }

/* ---------- 10. Calculadora ----------------------------------------------
   Restaurada el 21 de agosto: se había borrado entera en la pasada de
   minimalismo real ("no demuestra ninguna función real de Mesura"), pero
   Matías pidió recuperarla -- "creo que la calculadora de monto algo
   aportaba ese apartado". Vive colapsada detrás de su propio acordeón, sin
   competir con la demo principal. */
.calc {
  display: grid;
  gap: clamp(26px, 4vw, 44px);
  grid-template-columns: 1fr;
  align-items: start;
  border-top: 2px solid var(--rule);
  padding-top: var(--space-block);
}
@media (min-width: 900px) { .calc { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }

/* La calculadora vive dentro del lenguaje de un estado financiero: filete
   arriba, filas regladas, resultado alineado a la derecha. */
.statement { border-top: 0; }
.statement__row {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  padding: 18px 0;
  border-bottom: 1px solid var(--hair);
  align-items: center;
}
@media (min-width: 640px) {
  .statement__row { grid-template-columns: minmax(0, 1fr) minmax(190px, 240px); gap: 20px; }
}
.statement__label { font-size: 15px; line-height: 1.4; }
.statement__label small {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .03em;
}
.statement__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
}
.field-error {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--red);
  font-weight: 700;
  margin-top: 6px;
}
.field-error:empty { display: none; }

.result { margin-top: var(--space-block); padding-top: var(--space-group); border-top: 2px solid var(--rule); }
.result[hidden] { display: none; }
.result__pct {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(46px, 8vw, 76px);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: .9;
}
.result__pct[data-level="warn"] { color: var(--orange-ink); }
.result__pct[data-level="high"] { color: var(--red); }
.result__caption {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.result__axis {
  position: relative;
  height: 10px;
  margin-top: var(--space-group);
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.result__fill { height: 100%; background: var(--ink); transition: width .5s cubic-bezier(.22,.9,.3,1); }
.result__fill[data-level="warn"] { background: var(--orange); }
.result__fill[data-level="high"] { background: var(--red); }
.result__ref { position: absolute; top: -8px; bottom: -8px; width: 2px; background: var(--ink); }
.result__ref span {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
}
.result__text { margin-top: var(--space-group); font-size: 16px; line-height: 1.6; max-width: 54ch; color: var(--ink-2); }
.result__cta { margin-top: var(--space-group); }

.fineprint {
  margin-top: var(--space-group);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 62ch;
}

/* ---------- 11. Acuerdo de datos ---------------------------------------- */
.pact {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 2px solid var(--rule);
}
@media (min-width: 768px) {
  .pact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pact__col + .pact__col { border-left: 1px solid var(--rule); padding-left: clamp(24px, 3.4vw, 44px); }
  .pact__col:first-child { padding-right: clamp(24px, 3.4vw, 44px); }
}
/* Las dos columnas tienen distinta cantidad de <small>, así que la más corta
   dejaba el filete vertical colgando por debajo de su último renglón. El cierre
   lo pone ahora el contenedor. */
.pact { border-bottom: 1px solid var(--hair); }
.pact__col { padding-block: var(--space-block) 0; }
.pact li:last-child { border-bottom: 0; }
.pact__col + .pact__col { border-top: 1px solid var(--hair); }
@media (min-width: 768px) { .pact__col + .pact__col { border-top: 0; } }
.pact h3 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-stretch: normal;
}
.pact__col:first-child h3 { color: var(--ink); }
.pact__col:last-child h3 { color: var(--muted); }
.pact ul { list-style: none; margin-top: var(--space-item); }
/* El signo va posicionado, no como celda de grilla: si la <li> fuera grid, el
   <small> se convertiría en un ítem más y caería en la columna del signo. */
.pact li {
  position: relative;
  padding: 13px 0 13px 28px;
  border-bottom: 1px solid var(--hair-soft);
  font-size: 15px;
  line-height: 1.5;
}
.pact li::before {
  position: absolute;
  left: 0;
  top: 13px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.pact__col:first-child li::before { content: "+"; color: var(--ink); }
.pact__col:last-child li::before { content: "–"; color: var(--muted); }
.pact li small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }

/* ---------- 12. Cierre: beta fundadora + invitación ---------------------- */
/* Antes eran dos secciones separadas por toda la FAQ, y la de la beta ocupaba
   una sección entera de 619px con el texto confinado al 42% izquierdo. Ahora
   comparten una sola composición: el encuadre a la izquierda, en medida de
   lectura, y el bloque de conversión a la derecha, algo más ancho. */
.closing {
  display: grid;
  gap: clamp(28px, 3.6vw, 44px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .closing { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 3.6vw, 56px); }
}
.beta__intro { max-width: 48ch; }
.beta__intro .t-h2 { margin-top: 22px; max-width: 19ch; }
.beta__intro .lead { margin-top: 16px; }

/* ---------- 13. Preguntas ----------------------------------------------- */
/* Encabezado en una columna y acordeón en la otra. Antes el acordeón vivía
   solo, tapado a 78ch, y dejaba la mitad derecha de la pantalla sin ninguna
   función. La grilla es la misma asimetría editorial del resto de la página,
   no una cuadrícula de tarjetas: las preguntas siguen siendo filas regladas. */
.qa-layout {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  grid-template-columns: 1fr;
}
.qa { max-width: 78ch; border-top: 2px solid var(--rule); }
@media (min-width: 900px) {
  .qa-layout {
    grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
    gap: clamp(32px, 3.6vw, 56px);
    align-items: start;
  }
  /* En dos columnas el encabezado ya no separa nada: el aire lo pone la grilla. */
  .qa-layout .section__head { margin-bottom: 0; }
  /* El ancho lo fija la columna, no una medida arbitraria. */
  .qa-layout .qa { max-width: none; }
}
.qa details { border-bottom: 1px solid var(--hair); }
.qa summary {
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  cursor: pointer;
  font-size: clamp(17px, 1.9vw, 20px);
  font-weight: 700;
  font-stretch: 90%;
  letter-spacing: -.02em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+";
  flex: none;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1;
}
.qa details[open] summary::after { content: "–"; }
.qa__body { padding: 0 0 22px; max-width: 54ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.qa__body p + p { margin-top: 12px; }
.qa__body a { text-underline-offset: 3px; }

/* ---------- 14. Invitación final ---------------------------------------- */
/* El único bloque de alto contraste de la página. Tinta en ambos temas.
   Ya no se parte en dos columnas propias: ahora es la columna derecha del
   cierre, así que fluye en vertical y el ancho lo pone la grilla de .closing. */
.invite {
  background: #12110e;
  color: #f4efe2;
  border: 2px solid #12110e;
  padding: clamp(26px, 3.4vw, 40px);
}
.invite h2 { color: #f4efe2; max-width: 16ch; }
.invite > p { color: #b6b0a1; margin-top: 14px; max-width: 44ch; font-size: 16px; }
.invite .mark { background: var(--acid); color: var(--on-acid); }

.signup { display: grid; gap: 14px; margin-top: clamp(22px, 2.4vw, 30px); }
.signup__label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8f8a7d;
}
.signup input[type="email"] {
  width: 100%;
  padding: 15px 16px;
  border: 1.5px solid #4a463d;
  background: #1c1a15;
  color: #f4efe2;
  font-size: 16px;
  outline: none;
}
.signup input[type="email"]::placeholder { color: #7a7568; }
.signup input[type="email"]:focus-visible { outline: 3px solid var(--acid); outline-offset: 2px; }
.signup input[type="email"][aria-invalid="true"] { border-color: #ff7361; }
.signup button[type="submit"] { justify-self: start; }
.signup__consent { font-family: var(--mono); font-size: 11.5px; line-height: 1.7; color: #8f8a7d; max-width: 56ch; }
.signup__consent a { color: #cfc9b9; text-underline-offset: 3px; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-msg { font-size: 15px; line-height: 1.55; }
.form-msg:empty { display: none; }
.form-msg[data-kind="error"] { color: #ff8f7f; }
.form-msg[data-kind="ok"] {
  color: var(--on-acid);
  background: var(--acid);
  padding: 14px 16px;
  font-weight: 700;
}

/* ---------- 15. Footer --------------------------------------------------- */
.foot { border-top: 1px solid var(--rule); padding-block: 28px 36px; }
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
}
.foot__links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
  text-decoration: none;
}
.foot__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.foot__note {
  width: 100%;
  margin-top: var(--space-item);
  padding-top: var(--space-item);
  border-top: 1px solid var(--hair-soft);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 64ch;
}
/* Diagnóstico, no contenido: por eso va más chico y sin el borde/espaciado
   de los .foot__note reales — pero SIN opacity, que es lo que hizo caer el
   contraste de --muted por debajo de AA (axe lo detectó: 21 de agosto). El
   tamaño ya lo distingue de una nota real, no hace falta bajarle contraste. */
.foot__build {
  width: 100%;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .03em;
  color: var(--muted);
}

/* ---------- 10b. Selector de moneda -------------------------------------
   Pegado al ejemplo, siempre visible: la detección por país puede
   equivocarse y quien lo nota tiene que poder corregirlo sin buscar. Ver
   Mesura-lanzamiento/landing-v3/ESPECIFICACION-MONEDA.md §4. */
.moneda {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  margin-bottom: 14px;
}
.moneda__campo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
}
.moneda select {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  min-height: 44px;
  padding: 8px 10px;
  border: 1.5px solid var(--rule);
  background: var(--sheet);
  color: var(--ink);
}
.moneda select:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.moneda button {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  min-height: 44px;
  padding: 8px 12px;
  border: 1.5px solid var(--rule);
  background: transparent;
  cursor: pointer;
}
/* Con JS el botón "Ver" no hace falta: el cambio se aplica solo. */
.js .moneda button { display: none; }
.moneda-nota {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  max-width: 46ch;
}

/* ---------- 10c. Rótulo del escaparate ------------------------------------
   Antes eran dos párrafos (rótulo + nota de fidelidad del ejemplo): se
   fusionaron en uno solo en el recorte de scroll móvil del 21 de agosto. */
.showcase-label {
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 62ch;
  margin-bottom: var(--space-item);
}

/* ---------- 10d. Avisos de "esto no se guarda" --------------------------
   Mismo cuerpo de letra que el texto normal a propósito: si va en letra
   chica, la corrección de la primera pasada deja de existir. */
.callout {
  padding: 12px 16px;
  border-left: 3px solid var(--ink);
  background: var(--paper-2);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 62ch;
}
.callout--warn { border-left-color: var(--orange-ink); }
.callout + .callout { margin-top: 12px; }

/* ---------- 10e. CTA tras el ejemplo --------------------------------------
   Reemplaza el bloque "cifra diaria" (borde punteado, único de la página —
   señalado como inconsistente con el lenguaje de líneas sólidas del resto
   del sitio) que además citaba una nota ya falsa: la app real sí muestra
   esta división desde el 19-20 de agosto, con esta misma jerarquía. Aquí,
   en su lugar, el CTA en el pico de intención real de la página: justo
   después de que alguien ya probó que el ejemplo funciona. */
.hero__post-demo-cta { margin-top: var(--space-group); }

/* ---------- 10f. Cuatro casos (02b) --------------------------------------
   Bloque con marco propio para que se pueda saltar entero: quien no está en
   ninguno de los casos pasa de largo, quien sí está lo encuentra rápido. */
.casos { border-top: 2px solid var(--rule); padding-top: var(--space-block); }
.casos__list { margin-top: var(--space-group); display: grid; gap: 16px; }
.casos__list li { font-size: 15.5px; line-height: 1.55; max-width: 62ch; }
.casos__cierre { margin-top: var(--space-group); font-size: 15.5px; font-weight: 700; max-width: 60ch; }

/* ---------- 16. Preferencias de movimiento ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- 17. Modo claro forzado por el sistema operativo -------------- */
@media print {
  .masthead, .hero__ctas, .jot, .invite { display: none; }
  /* Con el bloque de conversión oculto, el cierre no tiene dos columnas que
     repartir: el encuadre de la beta ocupa la página entera. */
  .closing, .qa-layout { display: block; }
  body { background: #fff; color: #000; }
}