/*
 * Krumbs — hoja de estilos del sitio público.
 *
 * La comparten `/index.html` (español) y `/en/index.html` (inglés): entre las dos
 * páginas SOLO cambia el texto. Si tocas maquetación, la tocas aquí una vez.
 *
 * El mundo visual sale de `web/DESIGN.md` (referencia Copilot Money) con las
 * adaptaciones a Krumbs documentadas al final de ese fichero. Lo que hay que
 * saber sin abrirlo:
 *
 *   · Lienzo NEGRO, el mismo `#0A0C0B` de la app. La profundidad de las
 *     superficies se construye con sombras INSET, nunca con drop shadows.
 *   · El acento es BLANCO, que es el `accent` real de la app oscura
 *     (`src/constants/theme.ts`), con texto negro encima (`onAccent`). No hay
 *     azul en ninguna parte: el azul era prestado de la referencia y además es
 *     el color de todas las apps de dividir gastos que ya existen.
 *   · El papel manda. Lo único blanco con cuerpo de la página, aparte de los
 *     botones, es el ticket: papel cálido, tinta térmica, borde dentado y una
 *     sombra proyectada de verdad, porque es un objeto y no una superficie.
 *   · El ámbar `--accent` (un `GroupColor`) es la mano humana: lo subrayado a
 *     rotulador en el ticket, el número de cada paso, el punto de «llega
 *     pronto». Nunca es dinero y nunca es un botón.
 *   · Los colores caramelo son los `GroupColors` de `src/constants/theme.ts`,
 *     que son los mismos que se ven en los avatares de las capturas.
 *
 * Se carga como fichero externo, no como <style> inline. Eso es lo que permite
 * que `_headers` sirva `script-src 'self'` sin `'unsafe-inline'`.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   Fuentes

   Auto-alojadas: ni una petición a un tercero en la ruta crítica. Dos subconjuntos
   por familia; `latin` cubre el español entero (acentos, ñ, ¿, ¡ y €) y solo se
   descarga `latin-ext` si la página usa algún carácter que caiga fuera.
   ───────────────────────────────────────────────────────────────────────────── */

/*
 * Display: Archivo variable, con eje de ANCHO (`wdth` 62-125).
 *
 * El DESIGN.md describe Jokker como «condensada, verticales apretadas y remates
 * afilados». Los tres sustitutos que nombra son dos de pago y Space Grotesk, que
 * es justo lo contrario: ancha y excéntrica. Archivo sí es una grotesca de
 * titular con remates planos y afilados, y su eje de ancho permite condensarla
 * al 88 %, que es lo que pide la letra descrita. El eje se aplica con
 * `font-stretch` en los titulares.
 */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Tokens
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Superficies: cuatro escalones sobre el lienzo, todos planos. Son los
     valores exactos de `darkColors` en `src/constants/theme.ts`: quien viene
     de la landing y abre la app no cambia de marca. */
  --canvas: #0a0c0b;
  --surface: #14181a;
  --surface-2: #1c2224;
  --surface-3: #232b2d;
  --line: #232b2d;

  /* Texto. `--ink-2` es el `textSecondary` de la app; `--ink-3` se aclaró
     respecto de él lo justo para pasar 4,5:1 sobre el lienzo. */
  --ink: #ffffff;
  --ink-2: #aeb7bb;
  --ink-3: #8b9498;

  /* El único color de acción: blanco, como el `accent` de la app oscura. */
  --action: #ffffff;
  --action-hi: #e7ebed;
  --action-lo: #c8d0d3;
  --on-action: #0a0c0b;

  /* Papel de ticket. No es una superficie de la interfaz: es un material. */
  --paper: #f4f1ea;
  --paper-ink: #15171a;
  --paper-ink-2: #565b60;
  /* El pie del ticket va a 10 px: este gris es lo más apagado que sigue
     pasando 4,5:1 sobre el papel. Un ticket de verdad está más gastado; este no
     puede estarlo, porque hay que poder leerlo. */
  --paper-ink-3: #666b70;
  --paper-rule: rgba(21, 23, 26, 0.28);

  /* La mano humana: lo marcado a rotulador, el número de cada paso, el punto de
     «llega pronto». Es un `GroupColor`, así que identifica; nunca es dinero. */
  --accent: #f5a524;

  /* Dinero. En Krumbs verde = te deben, rojo = debes. Nunca decoran. */
  --money-plus: #34d399;
  --money-minus: #f43f5e;

  /* Caramelo = GroupColors de la app. Identifican cosas, nunca dinero. */
  --c-emerald: #10b981;
  --c-teal: #2dd4bf;
  --c-sky: #38bdf8;
  --c-violet: #8b7cf6;
  --c-amber: #f5a524;
  --c-rose: #fb7185;
  /* Tinta sobre caramelo: los seis son claros, así que el texto va oscuro.
     En blanco, `emerald` y `amber` no llegarían a 4,5:1. */
  --on-candy: #04070c;

  --display: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* El ticket va en monoespaciada porque una impresora térmica imprime en
     monoespaciada: aquí no es un disfraz de «técnico», es el material. Del
     sistema a propósito — un .woff2 más por un facsímil no sale a cuenta. */
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* El ancho de los titulares. Es el eje que hace que la display sea display. */
  --display-width: 88%;

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 40px;

  --pad: clamp(20px, 5vw, 40px);
  --band: clamp(72px, 9vw, 120px);
  --max: 1200px;

  /* Profundidad, siempre por dentro: luz arriba-izquierda, sombra abajo-derecha */
  --inset: inset 1px 1px 0 rgba(255, 255, 255, 0.06),
           inset 4px 4px 16px -6px rgba(255, 255, 255, 0.14),
           inset -4px -4px 16px -8px rgba(0, 0, 0, 0.6);
  /* La ÚNICA sombra proyectada del sitio, y solo la lleva el ticket: un papel
     apoyado en una mesa negra proyecta sombra, una superficie de UI no. */
  --paper-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.92),
                  0 3px 8px -2px rgba(0, 0, 0, 0.55);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Base
   ───────────────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* La nav es fija: sin esto, un ancla deja el titular debajo de ella. Son los
     72 px de la barra más un dedo de aire; en estrecho la barra baja a 64, y el
     margen baja con ella (más abajo, con el resto de la nav estrecha). */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  /* Las etiquetas del héroe cuelgan por fuera del móvil a propósito. `clip`
     recorta ese sobrante sin crear un contenedor de scroll —`hidden` en <html>
     sí lo crearía— y sin romper la nav pegajosa, que `overflow:hidden` mata. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Las superficies que el navegador pinta y que no dibuja nadie. Sin esto, la
   selección y el foco llegan con los colores de fábrica de otro sistema. */
::selection { background: var(--ink); color: var(--canvas); }
:root { color-scheme: dark; accent-color: var(--ink); caret-color: var(--ink); }

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

html { scrollbar-color: #2c3436 var(--canvas); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb {
  background: #2c3436;
  border: 3px solid var(--canvas);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: #3d4749; }

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

h1, h2, h3 {
  font-family: var(--display);
  font-stretch: var(--display-width);
  font-weight: 600;
  line-height: 0.98;
  /* Menos negativo que con una display ancha: al condensar al 88 % las letras ya
     se acercan solas, y apretar más las pega. */
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

/* Los importes son datos tabulares: sin esto bailan al cambiar de cifra. */
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.band { padding-block: var(--band); }
.band--surface { background: var(--surface); }

/* La medida de lectura. El cuerpo va en peso 300 sobre fondo oscuro: pasarse de
   ancho es lo que rompe una línea fina, no el tamaño. */
.lede {
  font-size: clamp(1.06rem, 0.98rem + 0.5vw, 1.28rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 34ch;
}
.prose { max-width: 68ch; color: var(--ink-2); }

.h2 {
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.4rem);
  margin-bottom: 20px;
}

.only-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Iconos

   Sprite <symbol> en línea dentro del HTML: un solo trazo de 1.6, rejilla de 24,
   remates redondos. Nada de emoji haciendo de icono.
   ───────────────────────────────────────────────────────────────────────────── */

.ico {
  width: 22px; height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--lg { width: 26px; height: 26px; }

/* ─────────────────────────────────────────────────────────────────────────────
   Botones
   ───────────────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s cubic-bezier(.2,.7,.3,1),
              border-color .18s cubic-bezier(.2,.7,.3,1),
              color .18s cubic-bezier(.2,.7,.3,1);
}

/* Blanco sobre negro con la tinta negra dentro: es literalmente el patrón
   `accent` / `onAccent` de la app, y de paso el mismo material que el ticket. */
.btn--primary {
  background: var(--action);
  color: var(--on-action);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.14);
}
.btn--primary:hover { background: var(--action-hi); }
.btn--primary:active { background: var(--action-lo); }


/*
 * Botones de tienda: artwork OFICIAL de Apple y de Google, servido tal cual.
 *
 * Las dos marcas prohíben expresamente recrear su lockup —redibujar el logotipo,
 * cambiar la tipografía o reescribir el texto—, así que aquí NO se estiliza un
 * botón: se coloca una imagen y se le reserva el espacio libre que cada guía
 * exige alrededor. Todo lo que hay debajo es maquetación, nunca decoración del
 * badge. Antes esto era un `.btn--store` dibujado a mano con una manzana
 * redibujada en el sprite: era bonito y era una infracción.
 *
 * Van los dos en NEGRO con filete gris (Apple usa `#a6a6a6`; el de Google es el
 * mismo tono) porque sobre el lienzo `#0A0C0B` leen como dos objetos con el
 * canto iluminado, que es exactamente el lenguaje de profundidad del resto del
 * sitio. La variante BLANCA de Apple existe, pero no se usa: no casaría con la
 * de Google, que solo se publica en negro.
 *
 * Manda la ALTURA; el ancho lo pone el artwork. Los dos badges tienen
 * proporción distinta a propósito (Apple 2,99 : 1; Google 3,36 : 1) y así los
 * publican sus dueños: igualarlos deformaría uno de los dos.
 */
.store {
  display: inline-flex;
  /* Solo para que el foco no dibuje un rectángulo mayor que la placa. */
  border-radius: 9px;
}
.store img {
  height: 52px;
  width: auto;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  /* Espacio libre entre badges: Apple exige >= 10% de su altura (5,2 px) y
     Google >= 1/4 de la suya (13 px). Manda la de Google. */
  gap: 16px;
  margin-top: 32px;
}


.cta-note {
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--ink-3);
}
.cta-note b { color: var(--ink-2); font-weight: 500; }

/* ─────────────────────────────────────────────────────────────────────────────
   Navegación
   ───────────────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 12, 11, 0.84);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s linear;
}
.nav__in {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 72px;
}
.nav__logo { display: flex; align-items: center; text-decoration: none; }
.nav__logo svg { height: auto; fill: currentColor; }

/*
 * DOS cortes del logotipo, y el que se ve depende del sitio que haya.
 *
 * `brand/README.md` reparte así las migas: el corte normal —las 22— **de 34 px
 * de alto en adelante**, y el compacto —las 6 grandes— de 16 a 34. Por debajo
 * de 34 las migas pequeñas se empastan y el logotipo parece un fallo de render,
 * que es exactamente lo que pasaba cuando la nav lo pintaba a 26.
 *
 * 210 px sobre un viewBox de 583,7×101,5 son **36,5 px de alto**: dentro del
 * corte grande con margen. Ese es el tamaño para el que está dibujado.
 */
.nav__logo--lg { width: 210px; }
.nav__logo--sm { display: none; width: 138px; }
.nav__links {
  display: flex;
  gap: 28px;
  margin-inline: auto;
  font-size: 14.5px;
  color: var(--ink-2);
}
.nav__links a { text-decoration: none; transition: color .16s linear; }
.nav__links a:hover { color: var(--ink); }
/*
 * El atajo de la barra de arriba. Va en blanco y algo más grande que un `.btn`
 * normal: es lo único de la nav que se pulsa, y la nav es lo único que sigue en
 * pantalla cuando ya has bajado del héroe. No compite con los badges de tienda
 * porque no dice lo mismo —este lleva al bloque de descarga, aquellos eligen
 * tienda— y porque nunca se ven a la vez: cuando el héroe está en pantalla, lo
 * que manda es el par de badges, que ocupa cuatro veces más superficie.
 */
.nav__cta {
  margin-left: auto;
  min-height: 44px;
  padding: 11px 26px;
  font-size: 15.5px;
  font-weight: 600;
  border-radius: 99px;
}
.nav__links + .nav__cta { margin-left: 0; }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__in { height: 64px; }
  /* Sin los enlaces de sección cabría el corte grande, pero no con el botón al
     lado en una pantalla de 390: a 138 px el logotipo baja a 24 de alto, así que
     aquí manda el corte compacto. */
  .nav__logo--lg { display: none; }
  .nav__logo--sm { display: block; }
  /* `.nav__links` sigue en el DOM aunque no se pinte, así que el selector de
     hermano de arriba le quita el `margin-left:auto` al botón y lo deja pegado
     al logotipo. Hay que devolvérselo CON EL MISMO SELECTOR: una media query no
     añade especificidad, así que `.nav__cta` a secas perdía contra él. */
  .nav__links + .nav__cta { margin-left: auto; }
  /* La barra baja de 72 a 64: el ancla tiene que bajar con ella o deja un dedo
     de negro de más entre la barra y el titular al que se acaba de saltar. */
  html { scroll-padding-top: 78px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Héroe

   Una ESCENA, no un lienzo. Es la diferencia entre esto y la cuadrícula de
   siempre —texto a la izquierda, móvil a la derecha— que tenía la página hasta
   el 20 de agosto de 2026: dos mitades que no se hablaban, todo al mismo plano
   Z y un fondo negro plano debajo.

   Ahora el titular está CENTRADO y es el héroe absoluto; el móvil sube desde
   abajo y se corta por el canto inferior; las etiquetas se reparten en tres
   planos de profundidad —dos POR DETRÁS de la tipografía, una nítida al medio y
   una grande delante—; y hay una sola fuente de luz, arriba y centrada, de la
   que salen TODOS los especulares y TODAS las sombras.

   ⚠️ Esta es la única parte del sitio donde hay sombras proyectadas de UI. Está
   justificado porque aquí hay luz: es un espacio con objetos dentro. El resto
   de la página sigue plano, con la profundidad por dentro (`--inset`), y la
   única sombra que se sale de aquí sigue siendo la del ticket de papel.
   ───────────────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  /* Encierra los planos Z del héroe: fuera de aquí nadie compite con ellos. */
  isolation: isolate;
  text-align: center;
  padding-top: clamp(32px, 4vw, 76px);
  /* Cero, y no es un olvido: el canto inferior del héroe es el corte del móvil.
     Con relleno debajo, el teléfono quedaría cortado en mitad del vacío y el
     recorte parecería una avería en vez de una decisión. */
  padding-bottom: 0;
  /* El móvil se hunde por debajo del héroe, y aquí es donde se le corta: justo
     en el borde de la banda de confianza, que es donde el corte se lee como
     intención. `hidden` y no `clip`: con `clip` el teléfono seguía saliéndose
     por debajo y se comía la banda entera. Aquí no cuesta nada —la nav pegajosa
     está FUERA del héroe, así que no hay sticky que romper— pero en `<html>` y
     en `<body>` sigue mandando `overflow-x: clip` por ese mismo motivo. */
  overflow: hidden;
}

/*
 * La fuente de luz. Una sola, arriba y centrada, y BLANCA: el acento de Krumbs
 * es blanco, y el ámbar significa «mano humana», no ambiente. El segundo
 * degradado es el rebote del suelo bajo el móvil: sin él, el teléfono flota
 * sobre la nada.
 */
.hero__light {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(78% 52% at 50% -8%, rgba(255, 255, 255, 0.10), transparent 68%),
    radial-gradient(48% 32% at 50% 92%, rgba(255, 255, 255, 0.055), transparent 72%);
}

/*
 * Viñeta. Va ENCIMA de todo (z-index 6) y sin capturar el ratón: es la caída de
 * la luz hacia los bordes, no una capa de contenido. Empieza a oscurecer al 54 %
 * del radio, así que el bloque de texto centrado no la toca nunca.
 */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(122% 92% at 50% 38%, transparent 54%, rgba(0, 0, 0, 0.58) 100%);
}

/* `relative` sin `z-index`: hace de origen de coordenadas para las etiquetas
   —que cuelgan por fuera de los 1200 px con offsets negativos— pero NO abre un
   contexto de apilamiento, así que los planos de dentro siguen comparándose
   entre ellos y con la luz. */
.hero__in { position: relative; }

.hero__copy {
  position: relative;
  /* Plano 3: por delante de las etiquetas del fondo, por detrás de la de
     delante. La tipografía vive DENTRO de la escena, no encima de ella. */
  z-index: 3;
}

.hero h1 {
  /* 96 px. El titular ES la imagen de esta pantalla y llegó a 112, pero el
     titular de hoy tiene una línea de 21 caracteres —«no dolores de cabeza.»—
     y a 112 no cabía en la medida: se partía sola y dejaba «cabeza.» colgando
     en una cuarta línea. Manda el texto, no el número. */
  font-size: clamp(2.6rem, 0.7rem + 6.4vw, 6rem);
  /* Más estrecha que el resto de titulares (88 %). A este tamaño el ancho de la
     letra es ancho de columna: cada punto que se condensa son píxeles de cuerpo
     que caben en la misma medida. */
  font-stretch: 84%;
  line-height: 0.88;
  letter-spacing: -0.033em;
  /* Reparte las líneas por peso en vez de por dónde cae el corte. Es lo que
     arregla el rag sin un `<br>` a mano por idioma: el español y el inglés
     rompen en sitios distintos y cada uno acierta el suyo. */
  /* Reparte lo que sobre después de los `<br>` a mano. Los cortes de línea van
     en el HTML porque el español y el inglés rompen en sitios distintos y cada
     idioma tiene que poder elegir el suyo: `balance` a secas dejaba «Cada
     artículo, a / quien lo tomó», con la preposición colgando al final. */
  text-wrap: balance;
  /* Da de sí para la línea más larga del titular; los cortes van con `<br>` en
     el HTML de cada idioma y esto solo evita que el navegador los deshaga. */
  max-width: 26ch;
  margin: 0 auto clamp(20px, 1.6vw, 30px);
}
/* Las DOS frases en blanco. El gris se comía justo la que lleva la promesa; la
   masa es el argumento de esta pantalla y se queda entera. Las separan el punto
   y el salto de línea, que es separación de sobra. */
.hero h1 em {
  font-style: normal;
  font-weight: 600;
  color: inherit;
}

.hero .lede {
  max-width: 46ch;
  margin-inline: auto;
  font-size: clamp(1.06rem, 0.94rem + 0.6vw, 1.32rem);
}

/* El CTA del héroe es lo más contrastado de la pantalla, y por eso el de la nav
   bajó a fantasma: dos botones blancos compitiendo dejaban el de arriba
   ganando, que es exactamente al revés de lo que tiene que pasar. */
.hero .cta-row { justify-content: center; }

/* ── El escenario: el móvil ── */

.stage {
  position: relative;
  /* Plano 1: por encima de las etiquetas del fondo, por debajo del texto. */
  z-index: 1;
  width: 100%;
  max-width: clamp(300px, 30vw, 430px);
  margin: clamp(26px, 3.4vw, 60px) auto 0;
}

/*
 * Marco de móvil. El bisel iluminado es ESTRUCTURA, no adorno: el lienzo de la
 * página es `#0A0C0B`, que es exactamente el fondo de la app dentro de la
 * captura, y sin el canto claro el teléfono se disuelve en la página.
 */
.phone {
  position: relative;
  border-radius: 46px;
  padding: 9px;
  background: linear-gradient(150deg, #4a5457 0%, #262c2e 38%, #171b1c 72%, #2b3234 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32),
              inset 0 0 0 1px rgba(255, 255, 255, 0.08),
              0 0 0 1px rgba(255, 255, 255, 0.06);
}
.phone__screen {
  position: relative;
  border-radius: 38px;
  overflow: hidden;
  background: #0a0c0b;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.9);
}
.phone__screen img { width: 100%; height: auto; }

/*
 * El móvil del héroe está DENTRO de la escena, así que se apoya y recibe luz:
 * una sombra larga debajo y un halo tenue de la misma fuente de arriba. Los tres
 * teléfonos de «Cómo funciona» no llevan ninguna de las dos cosas —allí no hay
 * escena, hay una figura al lado de un texto— y por eso esto va scopeado.
 *
 * El corte inferior va en proporción al propio móvil. Se corta por la lista de
 * personas, que es contenido repetido: el corte dice «hay más», que es justo lo
 * que tiene que decir.
 */
.hero .phone {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32),
              inset 0 0 0 1px rgba(255, 255, 255, 0.08),
              0 0 0 1px rgba(255, 255, 255, 0.06),
              0 44px 96px -34px rgba(0, 0, 0, 0.92),
              0 0 130px -24px rgba(255, 255, 255, 0.075);
  margin-bottom: clamp(-190px, -12vw, -100px);
}

/*
 * ACERCARSE A LA INTERACCIÓN.
 *
 * La captura mide 945×2048 y enseñada entera, dentro de un marco de 430 px, es
 * ruido con forma de app: «93,88 €» no lo lee nadie. Lo que vende Krumbs es un
 * gesto concreto —la tarjeta de un artículo abierta y la lista de quién se lo
 * comió— así que el marco se queda con ESA franja y tira el resto.
 *
 * Es recorte en CSS, no una imagen nueva: la misma `repartir.jpg` sirve aquí
 * ampliada y en «Cómo funciona» entera. `object-position` y `scale` están
 * ajustados a ojo sobre esa captura concreta; si se cambia el fichero, hay que
 * volver a ajustarlos.
 */
/* Más corto que un móvil de verdad (9/19,5): el marco es una ventana a la
   pantalla, no una maqueta del teléfono. Cuanto más corta la ventana, menos hay
   que ampliar la captura para llenarla, y menos se come el aumento los cantos
   del contenido. */
.hero .phone__screen { aspect-ratio: 9 / 13; }
.hero .phone__screen img {
  position: absolute;
  /* 108 % es el TECHO, y lo pone el contenido de la captura: en `inicio.jpg`
     (740×1600) las tarjetas de grupo van del 4 % al 96 % del ancho, así que solo
     sobran 8 puntos de recorte lateral. Un punto más y el marco parte una
     tarjeta por el canto, que parece una avería y no un encuadre. Aquí el
     aumento importa poco: en esta pantalla el dato grande ya viene grande. */
  width: 106%;
  /* Sin esto no se amplía nada: la regla base `img { max-width: 100% }` la
     recorta al ancho del marco. */
  max-width: none;
  height: auto;
  left: -3%;
  /*
   * Subida lo justo para tirar la barra de estado del móvil, que no es producto.
   * Lo primero que se ve es el saldo neto —el dato por el que existe la app— y
   * debajo los accesos y las tarjetas de grupo con lo que se debe en cada uno.
   *
   * ⚠️ Las dos cuentas, para cuando haya que rehacerlas:
   *   · fondo — el alto al 106 % son 2,292 anchos de marco y el marco mide
   *     1,444, así que por abajo sobran 0,848 anchos: el LÍMITE es −58 % del
   *     alto del marco. Pasando de ahí aparece una franja negra al pie.
   *   · encuadre — a −14 %, el primer píxel visible de la captura es el 141 de
   *     sus 1600, que es justo debajo de la hora y la batería.
   * Si cambia el aumento, el `aspect-ratio` o el fichero, hay que rehacer las dos.
   */
  top: -14%;
}

/* ── Las etiquetas: tres planos bajo una sola luz ── */

/*
 * El motivo firma de Krumbs. En la referencia son categorías de gasto
 * decorativas; aquí son líneas reales de un ticket con quién se las comió, que
 * es el producto entero en un objeto.
 *
 * Lo que las hacía parecer notificaciones de depuración pegadas con celo no era
 * el color: era que las CUATRO estaban al mismo plano, igual de nítidas, igual
 * de planas y las cuatro cargadas de datos. Una etiqueta con precio y avatares
 * es interfaz; interfaz suelta flotando sobre un titular es un error de
 * maquetación. Aquí solo la del plano medio —la nítida, la que se lee— lleva los
 * datos completos. Las otras tres son decoración y se comportan como tal.
 *
 * `--d` es la profundidad: multiplica la sombra proyectada para que crezca con
 * la cercanía. Es lo único que separa una escena de cuatro pegatinas.
 */
.tags { position: static; }

.tag {
  --d: 1;
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 19px;
  border-radius: 99px;
  background-color: var(--tag, var(--c-sky));
  /* El especular. Es IDÉNTICO en las cuatro, y eso es lo que las convierte en
     objetos del mismo material: la variedad de color se lee entonces como
     intención y no como caos. La luz viene de arriba, como la de la escena. */
  background-image: linear-gradient(180deg,
                    rgba(255, 255, 255, 0.34) 0%,
                    rgba(255, 255, 255, 0) 46%,
                    rgba(0, 0, 0, 0.17) 100%);
  color: var(--on-candy);
  /* 19,5 px arriba. Subió a 23 cuando la etiqueta solo llevaba el nombre; con la
     línea entera dentro —artículo, cantidad, importe y quién— a ese cuerpo mide
     media pantalla y las diez se pisan. El bulto lo pone ahora el contenido, no
     el tamaño de la letra. */
  font-size: clamp(13px, 0.42vw + 8.4px, 19.5px);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow:
    /* Filo de luz arriba, aro de canto y sombra recogida abajo: el volumen. */
    inset 0 1.5px 0 rgba(255, 255, 255, 0.62),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 -16px 22px -14px rgba(0, 0, 0, 0.5),
    /* Y la sombra PROYECTADA, escalada por profundidad. Sin esto no hay
       escena: hay recortes de papel sobre un fondo negro. */
    0 calc(26px * var(--d)) calc(46px * var(--d)) calc(-18px * var(--d)) rgba(0, 0, 0, 0.78);
}
.tag__name { text-transform: uppercase; letter-spacing: 0.035em; }

/*
 * La cantidad va PEGADA al nombre y en pequeño, como la escribe la app
 * («Caña Cerveza ×200»): es un matiz del artículo, no otro dato. El importe, en
 * cambio, es el segundo dato de la línea y va con su aire y en negrita.
 */
.tag__qty {
  margin-left: -8px;
  font-size: 0.72em;
  font-weight: 600;
  opacity: 0.62;
  letter-spacing: 0;
}
.tag .num { font-weight: 700; }

/* Cuando el gasto va entre todos NO se nombra a nadie: sale un «Todos», igual
   que en la app y que en el ticket de papel. Nombrar a siete personas para decir
   «todas» es la clase de dato que ocupa sitio y no informa. */
.tag__all {
  flex: none;
  padding: 3px 11px;
  border: 1.5px solid rgba(4, 7, 12, 0.34);
  border-radius: 99px;
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tag__who { display: flex; }
.tag__who i {
  width: 29px; height: 29px;
  margin-left: -10px;
  border-radius: 99px;
  background: var(--who, #0e1a2c);
  color: #fff;
  border: 2px solid var(--tag, var(--c-sky));
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  line-height: 25px;
  text-align: center;
  letter-spacing: 0;
}
.tag__who i:first-child { margin-left: 0; }

/*
 * PLANO DEL FONDO. Detrás de la tipografía (`z-index: 0`, y el titular va a 3),
 * un punto más pequeñas y con el desenfoque justo de estar un paso por detrás.
 * Van sin precio y sin avatares: lo que está detrás no se lee del todo, y un
 * dato ilegible es peor que ningún dato.
 *
 * ⚠️ Estos tres números se quedaron cortos en el primer intento —0,78 de escala,
 * 3 px de desenfoque y opacidad 0,5— y el resultado era el contrario del que se
 * buscaba: en vez de un plano detrás, cuatro manchas de color al fondo de un
 * agujero negro. Detrás NO quiere decir tenue: en la referencia las de atrás son
 * grandes, saturadas y perfectamente legibles, y lo único que dice que están
 * detrás es que la tipografía les pasa por encima. Eso es lo que hace el
 * `z-index`; el desenfoque solo lo acompaña.
 */
.tag--back {
  z-index: 0;
  --d: 0.7;
  scale: 0.94;
  opacity: 0.92;
  filter: blur(1.4px);
}
/* PLANO MEDIO. La única nítida y la única completa: nombre, precio y quién se lo
   comió. Es la que demuestra el producto, así que es la que se lee. */
.tag--mid { z-index: 2; --d: 1; }
/* PLANO DE DELANTE. Por delante del texto, más grande y con el punto de
   desenfoque de estar demasiado cerca del objetivo. Lleva precio pero no
   avatares: a esta escala tres círculos con iniciales vuelven a leerse como
   interfaz. */
.tag--fore {
  z-index: 4;
  --d: 1.45;
  scale: 1.16;
  filter: blur(0.7px);
}

/*
 * Las posiciones se miden contra el `wrap` de 1200 px, no contra la ventana: con
 * porcentajes de la ventana, a 1900 px las etiquetas se iban a hacer compañía a
 * los bordes y dejaban el centro huérfano.
 *
 * Ninguna pisa una palabra del titular: una etiqueta encima de la promesa no es
 * descaro, es una promesa que no se lee. Las dos del fondo caen en el aire que
 * deja el titular centrado a los lados; la del medio, en el hueco de la izquierda
 * a la altura del CTA; y la de delante muerde el canto derecho del móvil, que es
 * el único sitio donde tapar algo no cuesta nada (la lista de personas se repite
 * entera más abajo).
 */
/*
 * Los seis `GroupColors` de la app, los seis en pantalla. Con cuatro etiquetas
 * sobraban colores; con diez, el reparto es lo que hace que la variedad se lea
 * como una paleta y no como una bolsa de caramelos.
 *
 * La regla que no se salta ninguna: **las cuatro que llevan un importe encima no
 * pueden ir en `emerald`.** `--c-emerald` (#10B981) está pegado a `--money-plus`
 * (#34D399), y un precio sobre verde se leería como «te deben», que es lo único
 * que el verde significa en Krumbs. El verde se queda donde no hay cifras.
 *
 * Las posiciones van en porcentaje del `wrap` de 1200 px, no de la ventana: con
 * porcentajes de ventana, a 1900 px se iban a hacer compañía a los bordes y
 * dejaban el centro huérfano. Y ninguna se corta por el canto de la ventana: un
 * recorte accidental por la derecha se lee como un desbordamiento.
 */
/* Las dos primeras se meten DEBAJO del titular a propósito: que la tipografía
   les pase por encima es lo único que dice que están detrás, y sin ese solape la
   escena se queda en una orla de pastillas alrededor del texto. */
.tag--1  { top: 2%;  left: 17%;  --tag: var(--c-emerald); rotate: -7deg; }
.tag--2  { top: 10%; right: 13%; --tag: var(--c-teal);    rotate: 6deg; }
.tag--3  { top: 22%; left: 1%;   --tag: var(--c-violet);  rotate: 5deg; }
.tag--4  { top: 30%; right: 2%;  --tag: var(--c-amber);   rotate: -6deg; }
.tag--5  { top: 43%; left: 5%;   --tag: var(--c-rose);    rotate: -4deg; }
.tag--6  { top: 50%; right: 6%;  --tag: var(--c-teal);    rotate: 7deg; }
.tag--7  { top: 58%; left: 0%;   --tag: var(--c-sky);     rotate: 4deg; }
.tag--8  { top: 62%; right: 1%;  --tag: var(--c-amber);   rotate: -5deg; }
.tag--9  { top: 71%; left: 2%;   --tag: var(--c-rose);    rotate: 6deg; }
.tag--10 { top: 74%; right: 9%;  --tag: var(--c-violet);  rotate: -4deg; }

/* Según se estrecha la ventana, el titular se come el aire de los lados: las del
   fondo se apartan hacia fuera —siguen detrás, así que pueden— y las que llevan
   datos se pegan al borde, que es el único sitio donde no tapan nada. */
@media (max-width: 1340px) {
  .tag--1  { left: 4%; }
  .tag--2  { right: 2%; }
  .tag--3  { left: -3%; }
  .tag--4  { right: -4%; }
  .tag--5  { left: -1%; }
  .tag--6  { right: -1%; }
  .tag--7  { left: -3%; }
  .tag--8  { right: -2%; }
  .tag--9  { left: -2%; }
  .tag--10 { right: 1%; }
}

/*
 * El único momento animado de la página: las etiquetas caen a su sitio como las
 * pega alguien encima del ticket. Una sola vez, al cargar, y nada más se mueve
 * en toda la página. Caen desde MÁS lejos —más desenfoque y sin sombra— así que
 * el aterrizaje es también el momento en que cada una encuentra su plano.
 */
@media (prefers-reduced-motion: no-preference) {
  .tag { animation: drop .62s cubic-bezier(.16, 1, .3, 1) backwards; }
  /* Caen de arriba abajo, en el orden en que se leen. */
  .tag--1 { animation-delay: .14s; }
  .tag--2 { animation-delay: .20s; }
  .tag--3 { animation-delay: .26s; }
  .tag--4 { animation-delay: .32s; }
  .tag--5 { animation-delay: .38s; }
  .tag--6 { animation-delay: .44s; }
  .tag--7 { animation-delay: .50s; }
  .tag--8 { animation-delay: .56s; }
  .tag--9 { animation-delay: .62s; }
  .tag--10 { animation-delay: .68s; }
  .hero .phone { animation: rise .8s cubic-bezier(.16, 1, .3, 1) backwards; }
}
@keyframes drop {
  from { opacity: 0; translate: 0 -18px; rotate: -14deg; filter: blur(8px); }
}
@keyframes rise {
  from { opacity: 0; translate: 0 26px; }
}

/*
 * EL HÉROE EN ESTRECHO: la misma escena, montada en vertical.
 *
 * Por debajo de 1200 px no hay márgenes donde colgar diez etiquetas, y hasta el
 * 22 de agosto de 2026 la respuesta a eso fue quitarle la escena al héroe: las
 * etiquetas se ordenaban en una tira de cinco, el móvil dejaba de cortarse y la
 * viñeta se apagaba. Cada pieza por separado tenía su motivo; el resultado, no.
 *
 * En un iPhone de 390×844 la tira de caramelo medía 289 px y empujaba el
 * teléfono hasta los 793: fuera de la primera pantalla. Lo que se veía al
 * entrar era un titular, una promesa, dos badges y una orla de colores. El
 * producto no salía, y el producto es el único argumento que tiene una portada.
 *
 * Y el teléfono, ya sin corte, enseñaba el marco ENTERO: una ventana de 9/13
 * con sus cuatro esquinas redondeadas no es un móvil, es un móvil achaparrado.
 * En escritorio eso no se ve porque el canto inferior del héroe se lo come
 * antes de llegar al final; en estrecho se veía, y era lo primero que chirriaba.
 *
 * Ahora en estrecho pasa lo mismo que en ancho, con otra planta:
 *
 *   · el móvil vuelve a cortarse por abajo, y la ventana pasa a 9/17 —la
 *     proporción de un móvil de verdad— para que lo que asome sea un teléfono
 *     y no un ladrillo. Lo que quita el «móvil corto» no es el tamaño: es que
 *     no se le vea el canto de abajo;
 *   · quedan TRES etiquetas, apiladas y solapándose, y la última se mete POR
 *     DETRÁS del teléfono. Esa oclusión es toda la profundidad que hace falta,
 *     y es la única que no cuesta ni un dato de la captura;
 *   · la luz y la viñeta se quedan, porque el héroe vuelve a llegar al borde.
 *
 * El umbral sigue en 1200 px por lo de siempre: cada vez que la etiqueta crece
 * hace falta más hueco negro donde colgarla. 900 px cuando eran de 12,5; 1024
 * al pasar a 15,5; y 1200 con el rótulo a 19 px.
 */
@media (max-width: 1200px) {
  /*
   * Las etiquetas dejan de flotar y se apilan, pero NO se aplanan: se solapan
   * de arriba abajo y cada una está un paso más cerca que la de encima. Una
   * tira de pastillas separadas es una lista; tres que se pisan son objetos.
   */
  .tags {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: none;
    margin: clamp(14px, 2.6vw, 26px) auto 0;
  }
  .tags .tag {
    /* `relative` y no `static`: hace falta para desalinearlas con `left` y para
       que el `z-index` de cada plano siga contando. */
    position: relative;
    inset: auto;
    /* Apiladas pierden el hueco negro que las rodeaba, así que bajan de 19 px:
       tres rótulos a tamaño de héroe, uno encima de otro, son un muro de
       caramelo que manda el teléfono fuera de la pantalla.
       ⚠️ El cuerpo aquí no es una preferencia: es lo que decide el ANCHO de la
       pastilla, y el ancho decide cuánto la levanta el giro por los extremos.
       A 14,5 px la línea entera medía 368 px en una ventana de 390 y las tres
       se cruzaban por las puntas: quedaba «E CERVEZA» donde ponía «CAÑA DE
       CERVEZA», que es justo el dato ilegible que se vino a evitar. */
    /* El suelo baja a 11,5: en una ventana de 320 la línea entera a 13 px mide
       327 px y se salía por los dos cantos, y una etiqueta cortada por el borde
       se lee como un desbordamiento y no como una composición. */
    font-size: clamp(11.5px, 1.9vw + 5.6px, 17.5px);
    padding: 9px 15px;
  }
  /* El avatar en `em` y no en píxeles: es lo que fija la altura de la pastilla,
     y tres pastillas altas empujan el teléfono fuera de la primera pantalla. */
  .tags .tag__who i { width: 1.85em; height: 1.85em; margin-left: -0.62em; font-size: 0.92em; line-height: 1.55; border-width: 1.5px; }

  /* Se quedan TRES, y son las tres que llevan el argumento dentro: un gasto
     entre todos, uno entre cuatro y uno con la línea completa. Las que se van
     son las seis del fondo —decoración sin datos— más la décima, que repetía
     plano sin añadir estructura. */
  .tags .tag--1,
  .tags .tag--2,
  .tags .tag--3,
  .tags .tag--4,
  .tags .tag--5,
  .tags .tag--6,
  .tags .tag--10 { display: none; }

  /*
   * Los tres planos, ahora en vertical. Cada una está un punto más cerca que la
   * de arriba, y la de abajo se mete DEBAJO del teléfono, que es el objeto más
   * cercano de todos. Esa oclusión es la profundidad; el desplazamiento lateral
   * es lo que impide que tres pastillas centradas se lean como una escalera.
   *
   * Los ángulos bajan a ±3°, que en ancho son ±7. No es timidez: una pastilla
   * de 320 px girada 6° levanta la punta 17 px, y con tres apiladas las puntas
   * se cruzan por encima del texto de la de al lado. El giro sigue estando —y
   * los tres son distintos, que es la regla— pero a la escala del hueco que hay.
   */
  /* El desplazamiento va en `vw` acotado: la pastilla crece con la ventana, así
     que si el desvío no creciera con ella, a 320 px se saldría por el canto y a
     430 no se notaría. */
  .tags .tag--7 { z-index: 1; left: clamp(-12px, -2.6vw, -8px); --d: 0.7;  scale: 0.96; opacity: 0.94; filter: blur(0.9px); rotate: -3deg; }
  .tags .tag--8 { z-index: 2; left: clamp(9px, 3.1vw, 15px);    --d: 1;    scale: 1;    opacity: 1;    filter: none; rotate: 3.4deg; margin-top: 7px; }
  .tags .tag--9 { z-index: 3; left: clamp(-9px, -1.6vw, -5px);  --d: 1.35; scale: 1.03; opacity: 1;    filter: none; rotate: -2.4deg; margin-top: 7px; }

  .stage {
    /* Por delante de las tres: el teléfono es lo más cercano de la escena, y es
       lo que le tapa el canto a la última etiqueta. */
    z-index: 4;
    max-width: min(380px, 84vw);
    /*
     * Sube justo por debajo de la última etiqueta: el hombro del teléfono le
     * pilla la punta baja y se la mete detrás. El solape es CORTO a propósito.
     * Con −20 px el marco entraba por la mitad del rótulo y dejaba «GA…ILLO
     * ×2 22,00 €», que es la misma clase de dato ilegible que el desenfoque de
     * más de la cuenta: peor que ningún dato. Aquí lo que pasa por detrás es el
     * canto redondeado de la pastilla, donde no hay ni una letra.
     */
    margin: -2px auto 0;
  }

  /* La ventana pasa a 9/17. La de escritorio es corta (9/13) A PROPÓSITO,
     porque allí el héroe se la corta por abajo y nunca se ve entera; aquí, con
     el marco completo en pantalla, esa misma ventana era el móvil achaparrado
     del que se quejaba la crítica. */
  .hero .phone__screen { aspect-ratio: 9 / 17; }
  /* Y con la ventana larga la captura ya no necesita aumento: entra al 100 % y
     se lee mejor que ampliada. El encuadre es el mismo de siempre —tirar los
     141 px de barra de estado—, rehecho para esta proporción: 141 de los 1600
     son el 8,81 % del alto de la imagen, que a este ancho son el 10,1 % del
     alto del marco. */
  .hero .phone__screen img { width: 100%; left: 0; top: -10%; }
  /* El corte vuelve, y va en proporción al teléfono y no a la ventana: −78 %
     del ancho del escenario deja a la vista 1,06 anchos de marco, que es
     exactamente la porción que se ve en escritorio (440 de 613 px sobre 430 de
     ancho). La misma figura, en otro tamaño. */
  .hero .phone { margin-bottom: -78%; }

  /* La caída se reordena con las que quedan. Los retardos de ancho van del .14
     al .68 repartidos entre diez, y en estrecho las tres que se ven son la
     séptima, la octava y la novena: la escena tardaba medio segundo en
     empezar. */
  .tags .tag--7 { animation-delay: .12s; }
  .tags .tag--8 { animation-delay: .19s; }
  .tags .tag--9 { animation-delay: .26s; }
}

/*
 * APAISADO Y SIN ALTO. Un móvil tumbado tiene 390 px de alto y el héroe montado
 * arriba mide el doble: se entra a una pantalla de texto sin nada que enseñar.
 * Aquí el titular y el teléfono se ponen uno al lado del otro —es el único
 * sitio del sitio donde la cuadrícula de dos columnas es la respuesta correcta,
 * porque es la única forma de que la escena quepa— y las etiquetas se quedan en
 * una, que a esta altura es lo que hay.
 */
@media (max-width: 1200px) and (max-height: 560px) and (orientation: landscape) {
  .hero { padding-top: clamp(16px, 2vw, 28px); }
  .hero__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    align-items: center;
    /* Solo hueco entre columnas: el de filas separaba el rótulo del texto con
       el aire de una banda, y aquí no sobra ni un píxel de alto. */
    column-gap: clamp(20px, 3vw, 44px);
    row-gap: 0;
    text-align: left;
  }
  /* El titular y la promesa bajan de cuerpo lo justo para que el par de badges
     —que es la acción de esta pantalla— entre entero en 390 px de alto. */
  .hero h1 { margin-inline: 0; font-size: clamp(1.9rem, 0.5rem + 3.7vw, 2.9rem); margin-bottom: 14px; }
  .hero .lede { margin-inline: 0; font-size: clamp(1rem, 0.92rem + 0.4vw, 1.15rem); }
  .hero .cta-row { justify-content: flex-start; margin-top: 20px; }
  .hero .cta-note { text-align: left; margin-top: 12px; }

  .tags {
    grid-column: 1;
    align-items: flex-start;
    margin-top: clamp(12px, 2vh, 20px);
  }
  .tags .tag--7, .tags .tag--8 { display: none; }
  .tags .tag--9 { left: 0; margin-top: 0; scale: 1; }

  .stage {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    max-width: min(300px, 34vw);
    align-self: end;
  }
  /* Se corta un punto más que en vertical, y por lo mismo de siempre: lo que se
     ve tiene que seguir pareciendo un teléfono. 0,97 anchos de marco a la vista,
     contra 1,06 en vertical y 1,02 en escritorio. */
  .hero .phone { margin-bottom: -86%; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Barra de confianza

   Ocupa el sitio donde iría la prueba social. Krumbs no tiene ninguna —ni
   descargas, ni valoraciones, ni prensa— así que aquí van hechos comprobables
   en vez de números inventados.
   ───────────────────────────────────────────────────────────────────────────── */

.trust {
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.trust__in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 32px;
  padding-block: 30px;
}
.trust__i {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Sube de 14,5/`--ink-2` a 15,5/`--ink`: aquí es donde iría la prueba social,
     y unos hechos susurrados valen menos que ninguno. */
  font-size: 15.5px;
  font-weight: 400;
  color: var(--ink);
}
/* Blanco al 80 %, no ámbar, y a trazo 2. El ámbar a 1,6 sobre `--surface` era
   lo más flojo de la página justo donde van los únicos hechos comprobables que
   tiene Krumbs. El ámbar se queda donde SIGNIFICA algo —número de paso, check
   de paso, hover del FAQ—; aquí solo decoraba, y decoraba mal. */
.trust__i .ico { color: var(--ink); opacity: 0.8; stroke-width: 2; }
@media (max-width: 860px) {
  .trust__in { grid-template-columns: 1fr 1fr; gap: 18px 24px; }
}
@media (max-width: 460px) {
  .trust__in { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   El problema: el ticket que no se reparte a partes iguales
   ───────────────────────────────────────────────────────────────────────────── */

.problem__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

/*
 * Recreación de un ticket. Es contenido, no adorno: son las cifras exactas del
 * ejemplo que cuenta el texto de al lado.
 *
 * Y es PAPEL, no una tarjeta de interfaz. Esa es la decisión de la que cuelga el
 * mundo visual del sitio: la página es negra y lo único que hay encima son
 * trozos de papel —este ticket y los botones—. Por eso, y solo aquí, se rompen
 * tres reglas de la referencia: fondo claro, monoespaciada y sombra proyectada.
 * Un papel apoyado en una mesa negra proyecta sombra; una superficie de UI no.
 */
.ticket {
  position: relative;
  padding: 30px 24px 24px;
  background: var(--paper);
  /* Papel térmico: se oscurece un pelo por los cantos, donde el rodillo aprieta. */
  background-image: linear-gradient(180deg, rgba(21, 23, 26, 0.07), transparent 9%,
                                    transparent 91%, rgba(21, 23, 26, 0.08));
  color: var(--paper-ink);
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.45;
  /* Nadie deja un ticket perfectamente recto sobre la mesa. */
  rotate: -1.2deg;
  box-shadow: var(--paper-shadow);
}
/* El borde dentado de arriba y de abajo, como el papel térmico cortado. */
.ticket::before,
.ticket::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 9px;
  background:
    linear-gradient(-45deg, transparent 50%, var(--paper) 51%) 0 0 / 14px 9px repeat-x,
    linear-gradient(45deg, transparent 50%, var(--paper) 51%) 0 0 / 14px 9px repeat-x;
}
.ticket::before { top: -9px; transform: scaleY(-1); }
.ticket::after { bottom: -9px; }

.ticket__head {
  text-align: center;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px dashed var(--paper-rule);
}
/* Los comercios imprimen su nombre en mayúsculas y espaciado. No es un titular
   de la página: es lo que dice el papel. */
.ticket__head b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ticket__head span {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--paper-ink-2);
  margin-top: 5px;
}

.ticket__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dotted rgba(21, 23, 26, 0.16);
}
.ticket__row:last-of-type { border-bottom: 0; }
.ticket__row span { position: relative; z-index: 1; }
.ticket__row span:first-child { flex: 1; color: var(--paper-ink-2); }
/* Los importes en columna, como los alinea una impresora. */
.ticket__row .num { flex: none; min-width: 62px; text-align: right; }

/*
 * Quién se comió cada línea. Es la misma lengua que las etiquetas del héroe y
 * que los avatares de la app: círculo del color del grupo con la inicial, y los
 * colores salen de `GroupColors` (`src/constants/theme.ts`).
 *
 * El reparto que enseñan NO es de adorno: cuadra con las dos cifras de al lado.
 * Tuyo = aceite 3,15 + pan 2,40 + un quinto de la fruta (2,84) + un quinto del
 * detergente (1,31) = 9,70 €. Y las ocho líneas suman 97,35 €, que entre cinco
 * salen a 19,47 €. Si alguien toca un importe, hay que rehacer las dos cifras.
 */
.ticket__who { display: flex; flex: none; }
.ticket__who i {
  width: 18px; height: 18px;
  margin-left: -5px;
  border-radius: 99px;
  background: var(--who, var(--c-sky));
  /* Tinta oscura y no blanca: los seis GroupColors son claros, y sobre papel una
     inicial blanca a 9,5 px no se lee. En la app el avatar va en blanco porque
     el fondo es negro; aquí el material es otro. */
  color: var(--on-candy);
  border: 1.5px solid var(--paper);
  font-family: var(--text);
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 15px;
  text-align: center;
}
.ticket__who i:first-child { margin-left: 0; }

/*
 * «Entre todos» no nombra a nadie, igual que en la app: cinco avatares en una
 * línea de ticket serían ruido, y el reparto entre todos no necesita lista.
 */
.ticket__who--all {
  flex: none;
  padding: 2px 9px;
  border: 1px solid var(--paper-rule);
  border-radius: 99px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-ink-2);
}

/*
 * Los artículos que son tuyos van subrayados a rotulador, que es lo que haría
 * cualquiera con un boli encima del papel. Sustituye a la barrita de color de
 * antes: dice lo mismo, pero lo dice una persona y no un componente.
 */
.ticket__row.is-yours span:first-child { color: var(--paper-ink); font-weight: 700; }
.ticket__row.is-yours::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: -7px; right: -7px; top: 5px; bottom: 5px;
  background: rgba(245, 165, 36, 0.46);
  border-radius: 2px 6px 3px 7px;
  rotate: -0.5deg;
}

.ticket__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--paper-rule);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/*
 * El pie del papel: código de barras y la fórmula de cortesía que lleva impresa
 * cualquier ticket. No informa de nada — y ese es justo el motivo de que esté.
 * Es lo que convierte el bloque en un objeto reconocible antes de leerlo.
 */
.ticket__foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--paper-rule);
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-ink-3);
}
.ticket__foot::before {
  content: '';
  display: block;
  height: 32px;
  max-width: 178px;
  margin: 0 auto 11px;
  background: repeating-linear-gradient(90deg,
    var(--paper-ink) 0 2px, transparent 2px 4px,
    var(--paper-ink) 4px 5px, transparent 5px 9px,
    var(--paper-ink) 9px 12px, transparent 12px 14px,
    var(--paper-ink) 14px 15px, transparent 15px 18px);
}

.split-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 34px;
  max-width: 460px;
}
.split-compare > div {
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.split-compare dt { font-size: 13.5px; color: var(--ink-3); margin-bottom: 4px; }
.split-compare dd {
  margin: 0;
  font-family: var(--display);
  font-stretch: var(--display-width);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.split-compare .bad { border-color: rgba(244, 63, 94, 0.34); }
.split-compare .bad dd { color: var(--money-minus); }
.split-compare .good { border-color: rgba(52, 211, 153, 0.34); }
.split-compare .good dd { color: var(--money-plus); }

@media (max-width: 900px) {
  .problem__in { grid-template-columns: 1fr; }
  .ticket { max-width: 380px; margin-inline: auto; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Los tres pasos

   Numerados porque la secuencia importa: escanear va antes que repartir, y
   repartir antes que cobrar. Sin ese orden no se entiende la app.
   ───────────────────────────────────────────────────────────────────────────── */

.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(40px, 4.5vw, 60px);
  border-top: 1px solid var(--line);
}
/*
 * Paso invertido (el móvil a la izquierda). Con `order` a secas no basta: el
 * media pasa a ocupar la PRIMERA pista, que es la ancha, y el texto se queda
 * apretado en los 300 px de la segunda. Hay que intercambiar también las pistas.
 */
.step--flip { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.step--flip > .step__media { order: -1; }

.step__n {
  font-family: var(--display);
  font-stretch: normal;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 14px;
}
.step h3 {
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem);
  margin-bottom: 14px;
}
/* Más pequeño que el del héroe a propósito: aquí la captura acompaña al texto,
   no lo lidera, y a 300 px dejaba una columna de aire muerto al lado. */
.step__media { justify-self: center; width: 100%; max-width: 242px; }
.step__media .phone { border-radius: 36px; padding: 7px; }
.step__media .phone__screen { border-radius: 30px; }

/* ─────────────────────────────────────────────────────────────────────────────
   El visor del paso 01

   Este paso NO lleva captura, y es una decisión. Una captura de la pantalla de
   la cámara es la foto de una foto: un ticket diminuto dentro de un móvil
   diminuto, con la barra de estado de alguien encima, y no se lee nada. Lo que
   el paso tiene que enseñar es EL ACTO —un papel sobre la mesa y la app
   leyéndolo— y eso se dibuja mejor de lo que se captura.

   Tampoco lleva marco de móvil, y también a propósito: los pasos 02 y 03 pasan
   DENTRO de la app y por eso van en un teléfono; este pasa fuera, en el mundo
   físico, y el objeto que manda es el papel. Es el mismo componente `.ticket`
   que la sección del problema; lo único añadido son las esquinas del encuadre y
   la franja de lectura, que son de la cámara y no del papel.
   ───────────────────────────────────────────────────────────────────────────── */

.scan {
  position: relative;
  /* Aire alrededor del papel para que las esquinas del encuadre tengan dónde
     caer sin morderlo, y hueco abajo para la etiqueta de estado, que va FUERA
     del encuadre: es lo que dice la app, no lo que ve la cámara. */
  padding: 30px 20px 44px;
}

/* El papel, en versión de bolsillo. Rota al otro lado que el de la sección del
   problema: son dos tickets distintos sobre dos mesas distintas, no el mismo
   pegado dos veces. */
.ticket--scan {
  rotate: 2.2deg;
  padding: 22px 16px 18px;
  font-size: 11px;
  line-height: 1.4;
}
.ticket--scan .ticket__head { padding-bottom: 10px; }
.ticket--scan .ticket__head b { font-size: 12.5px; letter-spacing: 0.18em; }
.ticket--scan .ticket__head span { font-size: 9.5px; margin-top: 3px; }
.ticket--scan .ticket__row { padding: 6px 0; gap: 8px; }
.ticket--scan .ticket__row .num { min-width: 52px; }
.ticket--scan .ticket__total { margin-top: 10px; padding-top: 10px; font-size: 12.5px; }

/* «y 19 líneas más». Un ticket de una mesa larga tiene más líneas de las que
   caben, y fingir que caben todas sería mentir sobre el producto: lo que Krumbs
   resuelve es justo el ticket que no cabe. */
.ticket--scan .ticket__row--more {
  justify-content: center;
  border-bottom: 0;
  color: var(--paper-ink-3);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.ticket--scan .ticket__row--more span:first-child { flex: none; text-align: center; }

/*
 * Las cuatro esquinas del encuadre. En blanco, que es la luz de la escena y el
 * acento del sitio: en ámbar competirían con el `01` del paso, y el ámbar
 * significa «mano humana», no «cámara».
 */
.scan__frame {
  position: absolute;
  inset: 0 0 44px;
  pointer-events: none;
}
.scan__frame i {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--ink);
  opacity: 0.9;
}
.scan__frame i:nth-child(1) { top: 0; left: 0;  border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.scan__frame i:nth-child(2) { top: 0; right: 0; border-left: 0;  border-bottom: 0; border-radius: 0 8px 0 0; }
.scan__frame i:nth-child(3) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.scan__frame i:nth-child(4) { bottom: 0; left: 0;  border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }

/*
 * La franja de lectura. Parada tiene que leerse igual que en movimiento, así
 * que vive al 54 % y con el filo marcado arriba: aunque nunca se mueva, se ve
 * una banda de luz cruzando el papel a media altura.
 */
.scan__beam {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 52%;
  height: 74px;
  margin-top: -74px;
  pointer-events: none;
  /* Dos capas: el halo que deja detrás y el FILO, que es lo que se lee como
     «está pasando por aquí». Sin el filo la banda es una mancha gris. */
  background:
    linear-gradient(180deg, transparent 0 calc(100% - 2px), rgba(255, 255, 255, 0.95) calc(100% - 2px)),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.30) 100%);
  box-shadow: 0 2px 14px rgba(255, 255, 255, 0.35);
  mix-blend-mode: screen;
}

/* La etiqueta de estado. Cristal oscuro sobre el papel: es interfaz encima del
   mundo, que es exactamente lo que es. */
.scan__chip {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 99px;
  background: rgba(10, 12, 11, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.9);
}
.scan__chip .ico { width: 17px; height: 17px; }

/*
 * El SEGUNDO —y último— momento animado de la página, y el único que no es
 * decorativo: la franja baja recorriendo el papel. Aquí el movimiento no adorna,
 * DICE lo que está pasando, que es lo que este paso tiene que contar. Sin él la
 * composición ya se entiende (la franja está parada a media altura), así que con
 * `prefers-reduced-motion` no se pierde nada.
 */
@media (prefers-reduced-motion: no-preference) {
  .scan__beam { animation: sweep 3.4s cubic-bezier(.5, 0, .5, 1) infinite; }
}
@keyframes sweep {
  0%   { top: 14%; opacity: 0; }
  14%  { opacity: 1; }
  84%  { opacity: 1; }
  100% { top: 90%; opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   El paso 01: dos vías, el mismo tamaño

   Los pasos 02 y 03 son texto + figura, porque enseñan una pantalla. El 01
   enseña DOS, y no se pueden meter en la pista de 300 px de los otros sin que
   una de las dos quede de segunda. Así que este paso rompe la rejilla y ocupa el
   ancho entero: el texto arriba, y debajo las dos vías en dos columnas iguales.

   La simetría no es estética, es el argumento: mismo ancho, mismo peso de
   titulillo y el mismo número de puntos en las dos. Apuntar a mano no es el plan
   B de escanear —es la mitad del uso de una app de gastos compartidos— y en
   cuanto una de las dos columnas es más pequeña, deja de leerse así.
   ───────────────────────────────────────────────────────────────────────────── */

.step--intake { grid-template-columns: minmax(0, 1fr); }
.step__lead { max-width: 62ch; }

.intake {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(30px, 3.5vw, 48px);
}

/*
 * Las dos cajas miden EXACTAMENTE lo mismo y las figuras se apoyan en el mismo
 * suelo. Es lo que alinea los dos titulillos, y esa alineación es el argumento:
 * en cuanto «A mano» empieza medio palmo más abajo que «Con el ticket», se lee
 * como el apartado de las excepciones.
 *
 * Una es un papel y la otra un teléfono, así que la altura la fija la caja y
 * cada figura se ajusta a ella: el ancho del móvil sale de esa altura (206 px de
 * ancho son ~435 de alto con esta captura), y el papel, que es más bajo, se
 * apoya abajo y deja el aire arriba, que es donde tiene que estar.
 */
.intake__media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: clamp(360px, 30vw, 440px);
}
.intake__media .phone { width: 100%; max-width: 206px; border-radius: 34px; padding: 6px; }
.intake__media .phone__screen { border-radius: 28px; }
.intake__media--scan .scan { width: 100%; max-width: 262px; padding-bottom: 40px; }

/* `anadir.jpg` viene de compartir desde WhatsApp y trae «◀ WhatsApp» en la barra
   de estado. Es verdad y no le importa a nadie, pero en una portada se lee como
   un descuido. Se corta por arriba: 118 px de los 2048, que es justo la barra. */
.intake__media .phone__screen { aspect-ratio: 945 / 1930; }
.intake__media .phone__screen img {
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

.intake__t {
  font-family: var(--display);
  font-stretch: var(--display-width);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.1;
  margin: clamp(20px, 2vw, 28px) 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.intake .step__points { margin-top: 14px; }

@media (max-width: 860px) {
  .intake { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  /* Apiladas ya no hay nada que alinear, así que cada figura ocupa lo suyo. */
  .intake__media { height: auto; }
}

.step__points {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
  max-width: 52ch;
}
.step__points li {
  display: flex;
  gap: 11px;
  font-size: 15.5px;
  color: var(--ink-2);
}
/* Ámbar y no verde: el verde es dinero y esto son viñetas, no importes. El
   ámbar es el mismo `--accent` del `01/02/03` de dos líneas más arriba y el del
   subrayado a rotulador del ticket: cose cada punto a su paso y lo deja del lado
   de la mano humana, que es de lo que hablan los tres. */
.step__points .ico { width: 19px; height: 19px; margin-top: 4px; color: var(--accent); }

@media (max-width: 900px) {
  .step { grid-template-columns: 1fr; }
  .step--flip > .step__media { order: 0; }
  .step__media { max-width: 260px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Funciones

   Bento, no rejilla de tarjetas iguales: la primera celda es ancha y lleva una
   captura de verdad; las demás son texto. Ocho cuadrados idénticos con un icono
   arriba serían un folleto.
   ───────────────────────────────────────────────────────────────────────────── */

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.cell {
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid rgba(35, 43, 45, 0.9);
  box-shadow: var(--inset);
}
.cell h3 {
  font-family: var(--text);
  font-stretch: normal;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  margin-bottom: 7px;
}
.cell p { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.cell .ico { color: var(--ink-3); margin-bottom: 16px; }

.cell--feature {
  grid-column: span 2;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 0;
  overflow: hidden;
  background: var(--surface-2);
}
.cell--feature h3 { font-family: var(--display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); font-weight: 600; letter-spacing: -0.03em; }
.cell--feature p { font-size: 15.5px; max-width: 44ch; }

@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .cell--feature,   .cell--feature { grid-row: auto; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .cell--feature { grid-column: span 1; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Comparativa
   ───────────────────────────────────────────────────────────────────────────── */

.cmp-scroll { overflow-x: auto; margin-top: 36px; }
.cmp {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15.5px;
}
.cmp th, .cmp td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.cmp thead th {
  font-family: var(--text);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom-color: rgba(255, 255, 255, 0.16);
}
.cmp tbody th { font-weight: 400; color: var(--ink-2); }
.cmp td { color: var(--ink-3); }
/* La columna de Krumbs se distingue por fondo, no por un borde de color. */
.cmp .col-k { background: rgba(255, 255, 255, 0.055); color: var(--ink); font-weight: 500; }
.cmp thead .col-k { color: var(--ink); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp .mark { display: inline-flex; align-items: center; gap: 9px; }
.cmp .mark .ico { width: 18px; height: 18px; }
/* Ni verde ni rojo: esto no son importes, y pintar de rojo a quien hace las
   cuentas en una hoja de cálculo es señalar, no informar. */
.cmp .yes .ico { color: var(--ink); }
.cmp .no .ico { color: var(--ink-3); }

/*
 * LA COMPARATIVA EN ESTRECHO: cada fila, una ficha.
 *
 * La tabla mide 560 px de mínimo y rodaba dentro de su caja, pero sin decir que
 * rodaba: en una ventana de 390 se veía la pregunta, la columna del chat y
 * media de la hoja de cálculo, y **la de Krumbs —que es el único motivo de que
 * la tabla exista— se quedaba fuera de la pantalla**. Una comparativa donde no
 * se ve la propuesta no compara nada, y un scroll horizontal sin borde
 * degradado ni sombra no lo va a buscar nadie.
 *
 * Sigue siendo una `<table>` con sus `<th scope>` —la semántica no se toca, y
 * el `<thead>` se queda para quien lee con lector de pantalla—; lo que cambia
 * es cómo se pinta. El nombre corto de cada columna lo trae el propio HTML en
 * `data-col`, porque la cabecera deja de verse y sin ella «Una foto» no dice de
 * quién es.
 */
@media (max-width: 720px) {
  .cmp-scroll { overflow-x: visible; margin-top: 28px; }
  .cmp { display: block; min-width: 0; }
  /* Fuera de la vista, dentro del árbol: es la cabecera que asocia cada celda
     con su columna. Es la misma receta que `.only-sr`. */
  .cmp thead {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .cmp tbody, .cmp tr, .cmp tbody th, .cmp td { display: block; }
  .cmp tr {
    padding-block: 26px 6px;
    border-bottom: 1px solid var(--line);
  }
  .cmp tr:first-child { padding-top: 4px; }
  .cmp tr:last-child { border-bottom: 0; }

  /* La pregunta pasa a ser el titular de la ficha: es lo que antes hacía la
     primera columna, y una ficha sin titular es una lista de respuestas. */
  .cmp tbody th {
    font-family: var(--display);
    font-stretch: var(--display-width);
    font-size: 1.18rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.018em;
    color: var(--ink);
    padding: 0 0 16px;
    border-bottom: 0;
  }

  /* Cada respuesta, una línea: a la izquierda de quién es, a la derecha qué
     hace. La columna de la etiqueta está medida para «Hoja de cálculo», que es
     la más larga de las tres en los dos idiomas. */
  .cmp td {
    display: grid;
    grid-template-columns: 8.6em minmax(0, 1fr);
    align-items: baseline;
    gap: 4px 12px;
    padding: 9px 12px;
    border-bottom: 0;
    border-radius: 10px;
  }
  .cmp td::before {
    content: attr(data-col);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.35;
    color: var(--ink-3);
  }
  /* La de Krumbs se distingue por fondo, igual que su columna en ancho: aquí es
     una banda y no una columna, pero es el mismo recurso y el mismo tono. */
  .cmp td.col-k::before { color: var(--ink); }
  .cmp .mark { align-items: flex-start; gap: 8px; }
  .cmp .mark .ico { margin-top: 3px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Privacidad
   ───────────────────────────────────────────────────────────────────────────── */

.privacy__in {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.privacy__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}
.privacy__list li { display: grid; grid-template-columns: 26px 1fr; gap: 16px; }
.privacy__list .ico { color: var(--ink); margin-top: 3px; }
.privacy__list b { display: block; font-weight: 500; margin-bottom: 3px; }
.privacy__list p { font-size: 15px; color: var(--ink-2); }
@media (max-width: 820px) { .privacy__in { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────────────────────
   FAQ — <details>, sin una línea de JavaScript
   ───────────────────────────────────────────────────────────────────────────── */

.faq { max-width: 780px; margin-inline: auto; margin-top: 40px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  transition: color .16s linear;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: '';
  width: 11px; height: 11px;
  margin-left: auto;
  flex: none;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate .22s cubic-bezier(.2,.7,.3,1), translate .22s cubic-bezier(.2,.7,.3,1);
}
.faq details[open] summary::after { rotate: 225deg; translate: 0 2px; }
.faq details p { padding-bottom: 24px; color: var(--ink-2); max-width: 66ch; font-size: 15.5px; }
.faq details p + p { padding-top: 0; margin-top: -10px; }
.faq a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.38);
  text-underline-offset: 3px;
}
.faq a:hover { text-decoration-color: currentColor; }

/* ─────────────────────────────────────────────────────────────────────────────
   Cierre y pie
   ───────────────────────────────────────────────────────────────────────────── */

/*
 * La banda de cierre no empieza con un borde: empieza CORTADA, con los mismos
 * dientes que el ticket. Es el motivo del papel usado como arquitectura de la
 * página y no como decoración de un bloque.
 *
 * Los dientes van del color de la banda ANTERIOR (`--surface`, la del FAQ). Si
 * algún día se reordenan las secciones, hay que revisar esta línea.
 */
.close {
  position: relative;
  text-align: center;
  background: var(--surface-2);
  padding-top: calc(var(--band) + 11px);
}
.close::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 11px;
  background:
    linear-gradient(-45deg, transparent 50%, var(--surface) 51%) 0 0 / 18px 11px repeat-x,
    linear-gradient(45deg, transparent 50%, var(--surface) 51%) 0 0 / 18px 11px repeat-x;
}
.close h2 { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.8rem); margin-bottom: 20px; }
.close .lede { margin-inline: auto; max-width: 44ch; }
.close .cta-row { justify-content: center; }
.close .cta-note { margin-inline: auto; }

.foot { border-top: 1px solid var(--line); padding-block: 48px 40px; font-size: 14px; }
.foot__top {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 28px;
}
.foot__logo svg { width: 104px; height: auto; fill: currentColor; opacity: .9; }
.foot__links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.foot__links a { color: var(--ink-3); text-decoration: none; transition: color .16s linear; }
.foot__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
}
.lang { display: flex; gap: 8px; align-items: center; }
.lang a {
  padding: 5px 11px;
  border-radius: 99px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink-3);
  transition: color .16s linear, border-color .16s linear;
}
.lang a:hover { color: var(--ink); border-color: var(--ink-3); }
.lang a[aria-current='true'] { color: var(--ink); border-color: var(--ink-3); background: rgba(255,255,255,.05); }

/*
 * El pie con el dedo. Los enlaces legales miden 19 px de alto —son texto de
 * 14 px y nada más—, y en una pantalla táctil eso es la mitad de un dedo: cinco
 * puertas juntas de las que se falla una de cada tres. Se les da alto de
 * pulsación sin cambiar ni el tamaño de la letra ni el aire entre columnas, que
 * es lo que hace que el pie siga siendo un pie y no una lista de botones.
 *
 * Va por `pointer: coarse` y no por ancho de ventana: lo que decide esto es el
 * dedo, no los píxeles. Un portátil táctil también lo necesita.
 */
@media (pointer: coarse) {
  .foot__links { gap: 0 22px; }
  .foot__links a { padding-block: 11px; }
  .lang a { padding: 10px 15px; }
  /* Los dos logotipos son enlaces a la portada y miden lo que mide el dibujo:
     24 px arriba y 18 abajo. El área crece por debajo del propio logotipo, que
     no se toca —sus reglas de aire son vinculantes— y el enlace pasa a tener
     alto de dedo. */
  .nav__logo, .foot__logo { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Documentos

   Las 14 páginas secundarias —legales, soporte, eliminar cuenta y el 404— no
   son la portada: no tienen secciones, ni escena, ni figuras. Son TEXTO
   CORRIDO, que es justo lo único que la portada no sabe maquetar: ahí arriba
   `h1,h2,h3` y `p` van a `margin: 0` a propósito, porque cada componente de la
   landing se pone su propio ritmo.

   Por eso todo lo de aquí abajo cuelga de `.doc`, que va en el `<main>` de esas
   páginas y de ninguna otra. Es un límite duro: la nav y el pie viven FUERA del
   `<main>`, así que `.doc a` no puede pisar nunca ni `.foot__links a` ni el
   `.nav__cta`, y la portada no ve una sola de estas reglas.

   Ni un color nuevo: todo sale de los tokens de arriba. Y las tres reglas de
   marca se cumplen igual que en la portada — el verde y el rojo son dinero y
   aquí no hay dinero, así que NO aparecen; el ámbar es la mano humana y solo
   toca en el hover, nunca en un botón; y la única sombra proyectada del sitio
   sigue siendo la del ticket, así que aquí la profundidad va por dentro
   (`--inset`).
   ───────────────────────────────────────────────────────────────────────────── */

.doc {
  /* La medida de lectura, en `ch` como `.prose`. Es variable porque las páginas
     con tablas anchas (privacidad, eliminar cuenta) necesitan un palmo más sin
     merecer una clase propia: se sube con `style="--doc-measure: 78ch"`. */
  --doc-measure: 70ch;
  width: 100%;
  max-width: var(--doc-measure);
  margin-inline: auto;
  padding-inline: var(--pad);
  /* Menos que `--band` (72-120 px): una banda de portada abre una sección; aquí
     solo hay que separar el titular de la nav pegajosa. Abajo sí sobra aire,
     que es lo que evita que el pie parezca pegado al último párrafo. */
  padding-block: clamp(38px, 5vw, 72px) clamp(64px, 8vw, 104px);

  color: var(--ink-2);
  /* El cuerpo del sitio va en peso 300 porque en la portada son frases sueltas
     rodeadas de negro. Una política de privacidad son tres mil palabras
     seguidas: a 300 la línea se deshilacha y el documento cansa. 400 es el peso
     mínimo con el que un texto largo aguanta sobre fondo oscuro, y este es el
     único sitio de la web donde el cuerpo sube de peso. */
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.68;
}

/* El 404 es la única de las 14 que no es un documento: una frase y una salida. */
.doc--center { text-align: center; max-width: 46ch; }

/* Las páginas con tabla (privacidad y eliminar cuenta) piden un palmo más de
   columna. Va como clase y no como `style="--doc-measure:…"` en línea: el sitio
   quiere llegar algún día a una CSP sin `'unsafe-inline'`, y no se empieza
   añadiendo justo lo que hay que quitar. */
.doc--wide { --doc-measure: 78ch; }

/* ── Titulares ─────────────────────────────────────────────────────────────── */

/*
 * Más pequeño que cualquier `h2` de la portada, y no es timidez: en la landing
 * el titular ES la imagen de la pantalla; aquí solo tiene que decir qué
 * documento es y apartarse para que empiece a leerse.
 */
.doc h1 {
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  margin-bottom: 10px;
  color: var(--ink);
}

/*
 * La línea de «Última actualización». Es un dato legal, no un subtítulo: va al
 * gris más apagado y con cuerpo de pie de foto.
 */
.doc .updated {
  margin-bottom: 30px;
  color: var(--ink-3);
  font-size: 14px;
  letter-spacing: 0;
}

/*
 * `.lede` ya existe y el tamaño y el color le sirven tal cual: es la misma
 * entradilla. Lo que NO le sirve es la medida: 34ch es el ancho de un gancho de
 * portada de dos líneas, y aquí la entradilla es un párrafo de verdad. Se
 * suelta al ancho de la columna. Es lo mismo que ya hacen `.hero .lede` y
 * `.close .lede`, así que es el patrón de la casa y no un parche.
 */
.doc .lede {
  max-width: none;
  margin-bottom: 34px;
}

/*
 * El filete sobre cada `h2` es lo único que estructura un documento largo: sin
 * él, veinte apartados seguidos son una sola mancha. Se queda TAMBIÉN en el
 * primero —las páginas viejas se lo quitaban con `h2:first-of-type`—: con la
 * entradilla encima, ese filete separa la introducción del cuerpo, que es
 * exactamente lo que tiene que separar.
 */
.doc h2 {
  margin-top: clamp(44px, 5vw, 64px);
  margin-bottom: 14px;
  padding-top: clamp(22px, 2.4vw, 30px);
  border-top: 1px solid var(--line);
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem);
  color: var(--ink);
}

/*
 * El `h3` deja la display y se pasa a `--text`, igual que `.cell h3` en el
 * bento. Motivo: dentro de un documento un `h3` es una PREGUNTA o un caso
 * —«He olvidado la contraseña»—, y una condensada de titular a 17 px pegada a
 * un párrafo se lee como un cambio de tono, no como una jerarquía.
 */
.doc h3 {
  font-family: var(--text);
  font-stretch: normal;
  margin-top: 30px;
  margin-bottom: 6px;
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--ink);
}
/* Un `h3` pegado a su `h2` no necesita el aire de separación: ya lo puso el
   filete de arriba. */
.doc h2 + h3 { margin-top: 18px; }

/* ── Texto corrido ─────────────────────────────────────────────────────────── */

.doc p { margin-block: 0 1.05em; }
.doc > p:last-child { margin-bottom: 0; }

/* La negrita del cuerpo sube a blanco: sobre `--ink-2` un 600 del mismo gris
   casi no se distingue, y en estos documentos el `<strong>` marca lo que no se
   puede deshacer. Es tinta, no grito. */
.doc strong { color: var(--ink); font-weight: 600; }

.doc ul,
.doc ol {
  margin-block: 0 1.05em;
  /* El sangrado deja el marcador FUERA de la columna de texto: así el bloque de
     la lista se alinea con los párrafos y la página no se escalona. */
  padding-left: 1.35em;
}
.doc li { margin-block: 0.42em; }
.doc li > ul,
.doc li > ol { margin-block: 0.42em 0; }
/* El marcador es puntuación, no contenido: al gris de los datos secundarios. Y
   sin un emoji haciendo de viñeta, aquí como en el resto del sitio. */
.doc :is(ul, ol) > li::marker { color: var(--ink-3); }
.doc ol > li::marker { font-variant-numeric: tabular-nums; font-weight: 600; }

/*
 * `code` va en la monoespaciada del sistema, la misma `--mono` del ticket: un
 * .woff2 más por cuatro identificadores sueltos no sale a cuenta.
 */
.doc code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.88em;
  /* Un identificador largo —un correo, una ruta— no puede empujar la columna y
     sacarle barra horizontal a la página entera. */
  overflow-wrap: anywhere;
}

/* ── Enlaces ───────────────────────────────────────────────────────────────── */

/*
 * BLANCO SUBRAYADO, y el hover en ámbar. No es una preferencia: el verde de
 * enlace que traían estas páginas (#0A7C5A en claro, #34D399 en oscuro) es
 * literalmente `--money-plus`, y en Krumbs el verde significa «te deben». Un
 * enlace verde en una política de privacidad enseña un color de dinero donde no
 * hay ningún importe. El azul tampoco entra: no hay azul en el sitio.
 *
 * Lo que queda es el mismo enlace que ya existe en el FAQ (`.faq a`): blanco,
 * subrayado al 38 % para que no grite, y el subrayado cerrando en hover. El
 * ámbar es el de `.faq summary:hover`, que es el mismo gesto —una mano sobre
 * algo que responde— y por tanto el mismo color.
 */
/* `:not(.btn)` no es una precaución teórica: sin él, `.doc a` (0,1,1) le gana a
   `.btn--primary` (0,1,0) y el botón del 404 sale con la tinta blanca sobre el
   relleno blanco, o sea, vacío. */
.doc a:not(.btn) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.38);
  text-underline-offset: 3px;
  /* Los correos y las URL largas son el enlace típico de estas páginas. */
  overflow-wrap: anywhere;
  transition: color .16s linear, text-decoration-color .16s linear;
}
.doc a:not(.btn):hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

/* ── El aviso destacado ────────────────────────────────────────────────────── */

/*
 * `.box` es una `.cell` con el relleno de un párrafo en vez del de una tarjeta
 * de bento: misma superficie, mismo filete, mismo `--inset` y ninguna sombra
 * hacia fuera. Se conserva el nombre `.box` porque es el que ya está en el HTML
 * de las páginas y porque aquí no es una celda de rejilla: es un párrafo
 * levantado del texto.
 */
.doc .box {
  margin-block: 1.6em;
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid rgba(35, 43, 45, 0.9);
  box-shadow: var(--inset);
}
.doc .box > :first-child { margin-top: 0; }
.doc .box > :last-child { margin-bottom: 0; }

/* ── Tablas ────────────────────────────────────────────────────────────────── */

/*
 * La tabla NO le saca barra horizontal a la página: rueda dentro de su caja. El
 * envoltorio va en el HTML y no en la propia tabla, que es lo que hacían estas
 * páginas con `display: block`: eso convierte la tabla en una caja cualquiera y
 * rompe la alineación de las columnas.
 *
 * El `tabindex="0"` del envoltorio no es adorno: una caja que solo se mueve con
 * el dedo deja fuera a quien navega con teclado. Y `overscroll-behavior-x`
 * impide que al llegar al final de la tabla el gesto siga y arrastre la página
 * —o el historial del navegador— detrás.
 */
.doc__scroll {
  margin-block: 1.4em;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* Sangra hasta el canto de la ventana en móvil: una tabla que rueda se
     entiende mucho antes si se la ve cortada por el borde de la pantalla. El
     margen negativo lo compensa exactamente el relleno, así que la caja nunca
     se sale del contenedor ni pelea con el `overflow-x: clip` del body. */
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
}
.doc__scroll:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 6px;
}

/*
 * Misma lengua que la comparativa de la portada (`.cmp`): filas separadas por
 * un filete, cabecera en versalitas al gris tenue, cero bordes verticales y
 * cero cebra. El `min-width` es lo que hace que el scroll exista: sin él la
 * tabla se comprime hasta que una celda cae a una palabra por línea.
 */
.doc table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 15px;
}
.doc :is(th, td) {
  padding: 13px 16px 13px 0;
  text-align: left;
  /* Filas de dos y tres líneas: alineadas arriba, no al medio como en `.cmp`,
     que compara celdas de una palabra. */
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.doc :is(th, td):last-child { padding-right: 0; }
.doc thead th {
  font-family: var(--text);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: rgba(255, 255, 255, 0.16);
  white-space: nowrap;
}
.doc tbody th { font-weight: 500; color: var(--ink); }
.doc tbody tr:last-child :is(th, td) { border-bottom: 0; }

/* ── El índice de `/legal/` ────────────────────────────────────────────────── */

/*
 * La portada de legales es una LISTA DE PUERTAS, no un texto: cada fila es un
 * documento con su descripción debajo. Se pinta como filas —filete arriba, área
 * de pulsación entera, sin subrayado— porque lo que se pulsa es la fila y no la
 * palabra.
 *
 * El hover tiñe de ámbar, igual que `.faq summary:hover`: es el mismo gesto y
 * por tanto el mismo color.
 */
.doc .links {
  list-style: none;
  margin: 0 0 1.4em;
  padding: 0;
  border-top: 1px solid var(--line);
}
.doc .links li { margin: 0; border-bottom: 1px solid var(--line); }
.doc .links a {
  display: block;
  padding: 16px 0;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  transition: color .16s linear;
}
.doc .links a:hover { color: var(--accent); }
/* La descripción se tiñe con la fila a propósito: la fila entera es un objeto, y
   que la mitad reaccione y la otra mitad no la parte en dos. */
.doc .links a span {
  display: block;
  margin-top: 3px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ink-3);
  transition: color .16s linear;
}
.doc .links a:hover span { color: var(--ink-2); }

/* La lista ya cierra con su propio filete: el que trae el `h2` de después
   pintaría una segunda raya a un dedo de la primera. Se queda el hueco, se va la
   raya. */
.doc .links + h2 { border-top: 0; }

/* ── El logotipo servido como fichero ──────────────────────────────────────── */

/*
 * En la portada el logotipo es un `<symbol>` en línea que hereda
 * `currentColor`. En las páginas de documento es un `<img>` a
 * `/assets/brand/*.svg`: meter el sprite de 40 KB en catorce páginas es pagarlo
 * catorce veces y sin cachear, por una marca que ahí nunca cambia de color.
 * Como un `<img>` NO hereda `currentColor`, el fichero lleva el blanco horneado
 * dentro, y por eso `brand/build.mjs` genera también la variante blanca del
 * corte compacto.
 *
 * `.nav__logo svg` y `.foot__logo svg` son selectores de elemento y no alcanzan
 * a un `<img>`: hacen falta estas dos reglas hermanas. Se añaden en vez de
 * editar aquellas porque la portada funciona y no se toca lo que funciona.
 */
.nav__logo img { height: auto; }
.foot__logo img { width: 104px; height: auto; opacity: .9; }

/*
 * Clase PROPIA y no `.nav__logo--lg`. La portada tiene los dos cortes metidos a
 * la vez en el DOM y los intercambia escondiendo uno (`--lg { display: none }`
 * por debajo de 860 px); aquí solo hay un `<img>`, y el corte lo elige el
 * `<picture>` con su `media`. Si reutilizara aquella clase, el logotipo
 * desaparecería entero en móvil en vez de cambiar de corte.
 */
.nav__logo--file { width: 210px; }

@media (max-width: 860px) {
  /* A 390 px el corte grande no cabe al lado del botón, y el `<picture>` ya ha
     servido el compacto, que está dibujado para 138 px de ancho (24 de alto). */
  .nav__logo--file { width: 138px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Impresión

   Los términos y la política de privacidad son los dos documentos del sitio que
   la gente imprime de verdad, y a veces se los pide un tercero en papel. Sobre
   papel el mundo visual se invierte entero: el negro de la pantalla es un
   cartucho de tinta vacío, y el ámbar del hover no significa nada porque en
   papel no hay hover. Así que aquí no se «adapta» la marca: se imprime un
   documento, negro sobre blanco, y ya está.

   Se reescriben los TOKENS en vez de cada regla: así todo lo de arriba sigue
   valiendo y lo único que cambia es el material.
   ───────────────────────────────────────────────────────────────────────────── */

@media print {
  :root {
    --canvas: #ffffff;
    --surface: #ffffff;
    --surface-2: #f2f2f2;
    --surface-3: #eaeaea;
    --line: #bbbbbb;
    --ink: #000000;
    --ink-2: #1a1a1a;
    --ink-3: #4a4a4a;
    --accent: #000000;
    --inset: none;
    color-scheme: light;
  }

  html, body { background: #fff; color: #000; }

  /* La nav es un atajo de navegación y el `.lang` un conmutador: en papel no se
     pulsa ninguno de los dos. El pie SÍ se queda: lleva el aviso de copyright y
     los enlaces a los demás documentos, que son información del impreso. */
  .nav, .lang { display: none; }

  .doc {
    max-width: none;
    padding: 0;
    font-size: 11pt;
    line-height: 1.45;
    color: #000;
  }
  .doc .lede, .doc p, .doc li, .doc td { color: #000; }
  .doc .updated { color: #333; }

  /* En pantalla el subrayado distingue el enlace del texto; en papel lo único
     que sirve es la URL, así que se imprime detrás. Solo las absolutas y los
     correos: escribir «(/legal/terms.es)» junto a cada enlace interno llenaría
     el documento de ruido que nadie puede teclear. */
  .doc a { color: #000; text-decoration: underline; }
  .doc a[href^="http"]::after,
  .doc a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  /* La caja con scroll no existe en papel: la tabla se imprime entera. */
  .doc__scroll { overflow: visible; margin-inline: 0; padding-inline: 0; }
  .doc table { min-width: 0; font-size: 10pt; }
  .doc thead { display: table-header-group; }
  .doc tr, .doc .box { break-inside: avoid; }

  /* Un apartado que empieza en la última línea de una hoja no es un apartado. */
  .doc :is(h1, h2, h3) { break-after: avoid; color: #000; }
  .doc h2 { border-top-color: #999; }
  .doc p, .doc li { orphans: 3; widows: 3; }

  .doc .box { border: 1px solid #999; box-shadow: none; background: #fff; }
  .foot { border-top: 1px solid #999; color: #000; font-size: 9pt; }
  .foot__logo img { filter: invert(1); }

  /* Un fondo blanco impreso son cero gotas de tinta; uno gris son millones. */
  * { box-shadow: none !important; }
}