/* =============================================================================
   Las fuentes, servidas desde aquí y no desde Google
   =============================================================================

   La PWA ya autoaloja las suyas con `next/font`; que esta landing dependiera de
   `fonts.googleapis.com` y `fonts.gstatic.com` era una incoherencia que nadie
   decidió: se coló porque el mock las traía de ahí.

   Lo que se ahorra no son bytes —los `.woff2` pesan lo mismo vengan de donde
   vengan— sino **dos orígenes nuevos**, cada uno con su DNS y su TLS antes del
   primer byte de fuente, más la petición del CSS de Google que había que
   descargar y parsear solo para descubrir a qué URL pedir las fuentes.

   `font-display: swap` se mantiene, y no por costumbre: medido, con la fuente
   del sistema el renglón más largo de la página queda en 65 caracteres contra
   los 69 con Source Sans 3 — o sea que la maqueta aguanta el intervalo sin
   pasarse del tope de 72. Lo que no se puede es dejar el texto invisible
   mientras la fuente llega.

   Subconjunto `latin` únicamente: cubre las acentuadas, la ñ, «», · y —, que
   es todo lo que esta página escribe. Licencia y procedencia de los archivos
   en `publico/fuentes/LICENCIA.md`.                                          */

/* Archivo y Source Sans 3 son variables: un archivo cubre todo el rango, así
   que el `font-weight` se declara como rango y el navegador interpola. Pedir
   400, 600 y 700 no cuesta tres descargas. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fuentes/archivo-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fuentes/source-sans-3-latin.woff2") format("woff2");
}

/* IBM Plex Mono no es variable: cada peso es un archivo propio. La página usaba
   dos —400 para los dos párrafos monoespaciados, 500 para los ocho rótulos en
   versalitas— y el segundo costaba 10 060 bytes, el 10 % del peso total.

   Medido comparando las dos versiones píxel a píxel: bajar los rótulos de 500
   a 400 cambia el **0,44 %** de los píxeles de la barra y el **0,07 %** de la
   sección de Costos. A 10-15 px y con el `letter-spacing` que ya llevan, el
   medio peso no se distingue. Un archivo, no dos. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fuentes/ibm-plex-mono-400-latin.woff2") format("woff2");
}

/* =============================================================================
   business.cerca.red — la landing del comerciante
   =============================================================================

   Recreación de `design/Cerca Business.dc.html` (CLAUDE.md §13: se recrea, no
   se copia). El mock está dibujado a 1440 y con los estilos en línea; aquí los
   colores, los tipos y las medidas se declaran una vez, arriba, y todo lo
   demás los consume.

   El orden del archivo: tokens · base · piezas compartidas · barra · portada ·
   secciones · celular de demostración · pie.
   ========================================================================== */

:root {
  /* --- Color -------------------------------------------------------------
     Los seis del mock. Contrastes medidos contra su fondo real (WCAG 2.1):
     gris sobre fondo 4,86:1 · bermellón sobre fondo 4,58:1 · bermellón sobre
     blanco 5,19:1 · claro sobre tinta 11,8:1. Ninguno baja de 4,5.          */
  --fondo: #EFF1F3;
  --blanco: #FFFFFF;
  --tinta: #16110F;
  --bermellon: #D42314;
  --texto: #3A4046;
  --gris: #626A70;
  --borde: #D9DDE1;
  --nota-color: #4E555B;
  /* Sobre el bloque oscuro. */
  --claro: #C9CED2;
  --gris-claro: #9AA1A7;

  /* --- Tipos ------------------------------------------------------------- */
  --tipo-titulo: Archivo, system-ui, sans-serif;
  --tipo-cuerpo: "Source Sans 3", system-ui, sans-serif;
  --tipo-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* --- La medida de lectura ----------------------------------------------
     «Ninguna columna de texto pasa de 72 caracteres» (docs/design/escritorio.md
     §1). El token de la PWA es un `rem` absoluto anclado a 15 px porque allá
     el cuerpo es uno solo; aquí hay siete tamaños de prosa distintos, así que
     el tope va en `em` y se calcula contra el tamaño del propio párrafo.

     `ch` no sirve, y por dos razones distintas (escritorio.md §4): es el ancho
     del glifo «0», más ancho que el carácter medio del español, y se resuelve
     contra la fuente del elemento donde se aplica, no la del texto. El factor
     que sí vale es el ancho medio real por carácter, medido dividiendo el
     ancho pintado de un texto entre su número de caracteres.

     Medido aquí, con `measureText` sobre un párrafo real de la página
     (ancho pintado ÷ número de caracteres ÷ tamaño):
       Source Sans 3 400 → 0,4088 em/carácter → 72 chars = 29,4 em
       Archivo       400 → 0,4333 em/carácter → 72 chars = 31,2 em
       IBM Plex Mono 400 → 0,6000 em/carácter → 72 chars = 43,2 em
     Los tokens quedan por debajo de esos topes: con 28,5 em el renglón más
     largo de la página llegó a 71 caracteres contados uno a uno, o sea que el
     promedio de la muestra subestima los textos de renglón angosto. 27,5 em
     deja el peor caso medido en 68.                                         */
  --medida-prosa: 27.5em;
  --medida-titulo: 32em;
  /* La monoespaciada es mucho más ancha por carácter (0,60 em contra 0,41),
     así que necesita su propio tope. El límite exacto son 72 × 0,60 = 43,2 em;
     este queda en 42, o sea **70 caracteres**.

     Los dos que faltan son margen deliberado, no una corrección: con
     `--medida-prosa` la franja de Costos medía 72 clavados a 768 px, y 72
     **cumple** la regla. Lo que no quiero es que la cumpla por cero. El texto
     de esta franja sale de KV (`costosNota`), así que cambia sin pasar por un
     despliegue ni por esta prueba; con el tope en 72 exactos, la primera
     redacción un poco más larga que escriba alguien desde el panel se pasa sin
     que nadie se entere. Dos caracteres de holgura es lo que cuesta que no
     dependa de eso. */
  --medida-mono: 42em;

  /* --- El alto de lo pegajoso -------------------------------------------
     Declarado UNA vez y consumido tres: el `min-height` de la pieza pegajosa,
     el `scroll-padding-top` que le reserva el hueco al destino de las anclas,
     y el `top` del celular. Si se separaran, el título de la sección volvería
     a quedar debajo de la barra sin que nadie tocara esa regla — por eso hay
     una prueba que mide el alto real y falla si se aparta de este valor.

     En móvil son dos filas y el alto es su suma. Los bordes van dentro de cada
     fila (`border-box`), no en la barra, para que la cuenta cierre exacta.   */
  --alto-cabeza: 3.25rem;  /* 52 px: marca + aviso de registro */
  --alto-anclas: 3rem;     /* 48 px: las tres anclas, con 44 de objetivo */
  --alto-barra: calc(var(--alto-cabeza) + var(--alto-anclas));

  /* El marco del celular se dibuja a tamaño real y se escala para caber.
     La escala es un token, y no el `0.87` suelto que traía el mock, porque hay
     un segundo sitio obligado a conocerla: el botón de adentro.

     `transform: scale()` en un ancestro **no aparece en el CSS del elemento
     escalado ni en ninguna lectura del código**. El botón declara 44 px y en
     pantalla mide 44 × 0,87 = 38,3, que es lo que toca el dedo. Solo sale
     midiendo el rectángulo pintado (`getBoundingClientRect`), nunca leyendo la
     hoja de estilos — por eso el número declarado y el medido no coinciden, y
     por eso `.boton--oscuro` divide su `min-height` por este token en vez de
     llevar 44 px «bien puestos».

     Si alguien vuelve a poner ahí un 44 limpio, la prueba de objetivos táctiles
     lo dice con el número: 38,3. */
  --escala-demo: 0.87;

  --radio-tarjeta: 0.875rem;
  --radio-boton: 0.625rem;
  --toque: 2.75rem; /* 44 px */
}

@media (min-width: 64em) {
  :root {
    /* Desde 1024 lo pegajoso es la barra entera, en una sola fila. */
    --alto-barra: 4.25rem;
  }
}

/* =============================================================================
   Base
   ========================================================================== */

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

html {
  /* WCAG 2.2 SC 2.4.11. El navegador desplaza el elemento enfocado hasta el
     borde del viewport; sin esta reserva queda debajo de la barra pegajosa.
     No se reproduce tabulando hacia adelante ni con la ventana alta: el
     elemento entra por abajo. Aparece con Shift+Tab y con la ventana corta. */
  scroll-padding-top: calc(var(--alto-barra) + 0.5rem);
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--tipo-cuerpo);
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ol, ul { margin: 0; }
ol { padding: 0; list-style: none; }

a { color: var(--tinta); text-decoration: none; }
a:hover { color: var(--bermellon); }

/* El indicador de foco es el mismo en los tres fondos de la página. Contraste
   del bermellón: 5,19:1 contra blanco, 4,58:1 contra el fondo, 3,61:1 contra
   la tinta — sobre el mínimo de 3:1 que pide SC 1.4.11 en los tres. */
:focus-visible {
  outline: 3px solid var(--bermellon);
  outline-offset: 3px;
  border-radius: 4px;
}

img, svg, iframe { max-width: 100%; }

.envoltura {
  max-width: 70rem; /* 1120 px, el contenedor del mock */
  margin-inline: auto;
  padding-inline: 1rem;
  width: 100%;
}

@media (min-width: 48em) {
  .envoltura { padding-inline: 2rem; }
}

/* El salto al contenido: primer elemento enfocable de la página. Va por encima
   de la barra (z-index) para no caer en el mismo defecto que viene a evitar. */
.saltar {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 40;
  transform: translateY(-250%);
  background: var(--tinta);
  color: var(--blanco);
  font: 600 0.9375rem/1 var(--tipo-cuerpo);
  padding: 0 1rem;
  min-height: var(--toque);
  display: inline-flex;
  align-items: center;
  border-radius: var(--radio-boton);
}
.saltar:focus { transform: translateY(0); color: var(--blanco); }

/* =============================================================================
   Piezas compartidas
   ========================================================================== */

/* Rótulo monoespaciado en versalitas. Es un rótulo, no prosa: por eso puede ir
   por debajo de 15 px sin romper el mínimo de cuerpo (escritorio.md §4). */
.rotulo {
  font: 400 0.9375rem/1.3 var(--tipo-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
}
.rotulo--marca { color: var(--bermellon); font-size: 0.75rem; letter-spacing: 0.14em; }
.rotulo--oscuro { color: var(--gris-claro); }
.rotulo--chico { font-size: 0.75rem; letter-spacing: 0.14em; }

/* Todo párrafo de prosa lleva el tope de 72 caracteres. Va en el propio
   párrafo y no en su contenedor: en el contenedor, el `em` se resolvería
   contra otro tamaño de fuente y el tope se movería sin avisar. */
.prosa { max-width: var(--medida-prosa); }

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.tarjeta__titulo { font: 600 1.1875rem/1.3 var(--tipo-titulo); color: var(--tinta); }
.tarjeta__titulo--chico { font-size: 1.125rem; }
.tarjeta__texto { font: 400 1rem/1.6 var(--tipo-cuerpo); color: var(--texto); text-wrap: pretty; }
.tarjeta__fila { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }

.icono { color: var(--tinta); }

.rejilla { display: grid; gap: 1.25rem; }

/* Las cuatro rejillas se resuelven con `auto-fit`, sin un solo breakpoint: el
   corte lo pone el ancho mínimo de la tarjeta, no un ancho de ventana. A 390 px
   el contenido mide 358 y ninguna de las cuatro cabe dos veces, así que todas
   caen a una columna solas. Medido: 1 · 2 · 3 columnas a 390 / 768 / 1440. */
.rejilla--problema     { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.rejilla--herramientas { grid-template-columns: repeat(auto-fit, minmax(14.375rem, 1fr)); }
.rejilla--diferencia   { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.rejilla--costos       { grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr)); }

/* Un enlace de verdad: lleva a alguna parte y por eso sí es interactivo. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0 1.625rem;
  border-radius: var(--radio-boton);
  font: 600 1.0625rem/1.2 var(--tipo-cuerpo);
  background: var(--blanco);
  color: var(--tinta);
  border: 1px solid var(--borde);
  text-align: center;
}
.boton:hover { color: var(--tinta); border-color: var(--tinta); }
.boton--oscuro {
  background: var(--tinta);
  color: var(--blanco);
  border-color: var(--tinta);
  /* Vive dentro del marco escalado, así que 44 px declarados se ven como
     44 × 0,87 = 38,3 y eso es lo que toca el dedo. Se divide por la escala
     para que el objetivo real en pantalla sí sean 44. Medido antes de esta
     línea: 38,3 px de alto. */
  min-height: calc(var(--toque) / var(--escala-demo));
  font-size: 0.9375rem;
  padding: 0 1.125rem;
}
.boton--oscuro:hover { color: var(--blanco); background: #2A211E; }

/* --- El control que todavía no existe --------------------------------------
   La pantalla de registro no está construida. El precedente del proyecto
   (Cerca-PWA/src/app/(consumer)/cuenta/page.tsx) es no dibujar un
   `<button disabled>`: el lector de pantalla lo salta y, para quien ve, la
   única diferencia con un botón vivo es que está más claro. Esto es texto —no
   recibe foco, no tiene rol de botón, no responde al clic— y lleva su estado
   escrito al lado, con la razón completa en el párrafo `.razon` que sigue. */
.aviso {
  display: inline-flex;
  align-items: baseline;
  gap: 0.625rem;
  flex-wrap: wrap;
  border: 1px dashed var(--borde);
  border-radius: var(--radio-boton);
  background: transparent;
  padding: 0.5rem 0.875rem;
}
.aviso__texto { font: 600 0.9375rem/1.4 var(--tipo-cuerpo); color: var(--gris); }
.aviso__estado {
  font: 400 0.6875rem/1.4 var(--tipo-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bermellon);
  white-space: nowrap;
}
.aviso--grande { min-height: 3.5rem; align-items: center; padding: 0.75rem 1.25rem; }
.aviso--grande .aviso__texto { font-size: 1.0625rem; }

.acciones { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: stretch; }
.razon {
  font: 400 0.9375rem/1.6 var(--tipo-cuerpo);
  color: var(--texto);
  text-wrap: pretty;
}

/* =============================================================================
   La barra
   =============================================================================

   Decisión de móvil, con el número que la sostiene.

   A 390 px el contenido mide 358. El lockup de marca ocupa 185,6 px medidos;
   las tres anclas, 309,5 con su relleno táctil. 185,6 + 309,5 = 495 > 358: en
   una fila no caben, y no por poco.

   Lo que se descartó: un menú desplegable (añade estado, JavaScript y un panel
   que hay que probar abierto y cerrado, para ahorrar 48 px) y una tira con
   desplazamiento horizontal (esconde destinos detrás de un gesto que nadie
   anuncia).

   Lo que se hizo: dos filas. Arriba la marca con el aviso de registro, abajo
   las tres anclas, y la barra entera pegada. Cuesta 100 px —el 11,8 % de una
   ventana de 844 y el 14,3 % de una de 700— y ese es el precio de que los
   tres destinos sigan visibles mientras se lee, sin un gesto que aprender.

   Se intentó pegar solo la fila de anclas para que costara 48 px. No funciona,
   y la razón está escrita junto a `.barra` más abajo: no es un ajuste, es cómo
   `position: sticky` delimita su recorrido.

   El corte para volver a una sola fila está en 1024 y no en 768, y también
   por una medida. Los tres grupos en fila necesitan 185,6 + 309,5 + 225,6 del
   aviso, más 48 de separación: 768,7 px. A 768 hay 704 y faltan 65; a 1024
   hay 960 y sobran 191. Cuando no cabía, el aviso envolvía y la barra
   pegajosa medía 76 px con el token diciendo 68 — el hueco reservado para el
   destino de las anclas se quedaba corto 8 px sin que nadie tocara esa regla.

   Es el mismo corte del celular de la derecha, así que la página tiene un
   solo cambio de forma y no dos. */

/* Lo pegajoso es SIEMPRE `.barra`, nunca la fila de anclas por su cuenta.
   Se intentó al revés —cabeza estática arriba y solo las anclas pegadas, para
   que lo fijo midiera 48 px y no 100— y no funciona: `position: sticky` se
   pega dentro de su bloque contenedor, y el contenedor de las anclas es el
   <header>, que mide 100 px y está al principio del documento. Al desplazar
   más allá de esos 100 px la fila se iba con él. Medido: al hacer clic en
   «Costos» a 390 px no había ninguna barra pegada arriba, o sea que la
   navegación permanente en móvil no existía. Se veía bien y no estaba. */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--blanco);
  min-height: var(--alto-barra);
}

/* Los bordes van en las filas y no en la barra: con `border-box`, cada uno
   entra en el `min-height` de su fila y la suma da exactamente el token. */
.barra__cabeza {
  border-bottom: 1px solid var(--borde);
  min-height: var(--alto-cabeza);
  display: flex;
  align-items: center;
}

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

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  min-height: var(--toque);
  color: var(--tinta);
}
.marca:hover { color: var(--tinta); }
.marca__simbolo { flex: 0 0 auto; }
.marca__nombre { font: 700 1.375rem/1 var(--tipo-titulo); }
.marca__superficie {
  font: 400 0.75rem/1 var(--tipo-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
  border-left: 1px solid var(--borde);
  padding-left: 0.5625rem;
}

/* El aviso de registro no cabe en la barra a 390 px, y no por poco: el lockup
   mide 185,6 px medidos y el aviso 225,6; con la separación son 423 contra los
   358 de contenido que hay. Envolvía, y la barra pasaba de 100 px a 135 —el
   16 % de una ventana de 844— por un aviso que dice que algo todavía no se
   puede hacer. Desde 768 sí cabe (704 px disponibles) y vuelve.

   Que no esté aquí no lo esconde: el mismo aviso, con la razón completa en una
   frase y no en dos palabras, está en la portada y en el cierre. */
.barra__aviso { display: none; }

@media (min-width: 48em) {
  .barra__aviso { display: inline-flex; border-color: transparent; padding: 0.25rem 0; }
}

.barra__nav {
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
  min-height: var(--alto-anclas);
  display: flex;
  align-items: center;
}

.barra__anclas {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.barra__anclas a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--toque);
  min-width: var(--toque);
  padding-inline: 0.75rem;
  font: 500 0.9375rem/1.2 var(--tipo-cuerpo);
  color: var(--texto);
}

@media (min-width: 64em) {
  /* Una sola fila. El contenedor de 1120 se centra con `padding-inline` en vez
     de con un envoltorio, porque los tres grupos vienen de ramas distintas del
     HTML y aquí tienen que ser hermanos del mismo flex. */
  .barra {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    border-bottom: 1px solid var(--borde);
    padding-inline: max(2rem, calc((100% - 70rem) / 2));
  }
  /* `display: contents` solo en divs sin semántica: ni el <nav> ni ningún
     elemento con rol pierde su caja, para no arriesgar el árbol de
     accesibilidad. */
  .barra__cabeza, .barra__cabeza > .envoltura, .barra__nav > .envoltura { display: contents; }
  .barra__nav {
    border-bottom: 0;
    min-height: 0;
    order: 2;
    margin-left: auto;
  }
  .marca { order: 1; }
  /* El aviso va visualmente al final, donde el mock pone el botón. No altera
     el orden de tabulación porque no es enfocable: el foco pasa de la marca a
     las tres anclas, que es también el orden en que se ven. */
  .barra__aviso { order: 3; }
  .barra__fila { display: contents; }
}

/* =============================================================================
   Portada
   ========================================================================== */

.principal {
  display: grid;
  gap: 4rem;
  padding-block: 2.5rem 4rem;
}

@media (min-width: 64em) {
  .principal {
    grid-template-columns: minmax(0, 1fr) 21.25rem;
    padding-block: 4.5rem 7.5rem;
  }
}

.columna {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

@media (min-width: 48em) {
  .columna { gap: 5.5rem; }
}

.portada { display: flex; flex-direction: column; gap: 1.25rem; }

.portada__titular {
  /* 60 px es el tamaño del mock a 1440. A 390 el mismo titular ocuparía media
     pantalla, así que crece con el ancho: 34 px a 390, 60 px a 1440. */
  font: 700 clamp(2.125rem, 1.2rem + 4.2vw, 3.75rem)/1.04 var(--tipo-titulo);
  letter-spacing: -0.025em;
  color: var(--tinta);
  text-wrap: balance;
  max-width: var(--medida-titulo);
}

.portada__entrada {
  font: 400 clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem)/1.6 var(--tipo-cuerpo);
  color: var(--texto);
  text-wrap: pretty;
}

/* Monoespaciada pequeña, pero no por debajo de 15 px: son 62 caracteres, o
   sea prosa, no un metadato de una palabra. */
.nota {
  font: 400 0.9375rem/1.6 var(--tipo-mono);
  color: var(--gris);
  max-width: var(--medida-mono);
}

/* =============================================================================
   Secciones
   ========================================================================== */

.bloque { display: flex; flex-direction: column; gap: 1.75rem; }
.bloque__encabezado { display: flex; flex-direction: column; gap: 0.875rem; }
.bloque__entrada {
  font: 400 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)/1.45 var(--tipo-titulo);
  color: var(--tinta);
  text-wrap: pretty;
  max-width: var(--medida-titulo);
}

/* --- Cómo funciona --------------------------------------------------------- */

.pasos { display: flex; flex-direction: column; gap: 2px; }

.paso {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 2px;
  padding: 1.625rem 1.25rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
@media (min-width: 48em) {
  .paso { padding: 1.625rem 1.75rem; gap: 1.375rem; }
}
.paso:first-child { border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 2px 2px; }
.paso:last-child  { border-radius: 2px 2px var(--radio-tarjeta) var(--radio-tarjeta); }

.paso__numero {
  flex: 0 0 auto;
  font: 400 0.8125rem/1 var(--tipo-mono);
  color: var(--blanco);
  background: var(--tinta);
  border-radius: 6px;
  padding: 0.5rem 0.625rem;
}
.paso__numero--final { background: var(--bermellon); }

.paso__cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.paso__titulo { font: 600 1.25rem/1.3 var(--tipo-titulo); color: var(--tinta); }
.paso__texto { font: 400 1rem/1.6 var(--tipo-cuerpo); color: var(--texto); text-wrap: pretty; }

/* --- La diferencia de fondo ------------------------------------------------ */

.diferencia {
  background: var(--tinta);
  border-radius: 1.125rem;
  padding: 1.75rem 1.25rem;
  gap: 1.5rem;
}
@media (min-width: 48em) {
  .diferencia { padding: 2.75rem; }
}
.diferencia__entrada {
  font: 400 clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem)/1.35 var(--tipo-titulo);
  color: var(--blanco);
  text-wrap: pretty;
  max-width: var(--medida-titulo);
}
.rejilla--diferencia { gap: 1.5rem; }
.columna-diferencia { display: flex; flex-direction: column; gap: 0.5rem; }
.columna-diferencia__titulo { font: 600 1.0625rem/1.3 var(--tipo-titulo); color: var(--blanco); }
.columna-diferencia__texto { font: 400 0.9375rem/1.6 var(--tipo-cuerpo); color: var(--claro); text-wrap: pretty; }

/* --- Costos ---------------------------------------------------------------- */

.tarjeta--costo { padding: 1.75rem; gap: 0.875rem; }
.tarjeta--destacada { border-color: var(--tinta); }
.cifra {
  font: 700 clamp(2rem, 1.7rem + 1.2vw, 2.5rem)/1 var(--tipo-titulo);
  letter-spacing: -0.02em;
  color: var(--tinta);
}
.insignia {
  font: 400 0.625rem/1 var(--tipo-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blanco);
  background: var(--bermellon);
  padding: 0.3125rem 0.5rem;
  border-radius: 4px;
}
.franja {
  font: 400 0.9375rem/1.7 var(--tipo-mono);
  color: var(--nota-color);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 0.625rem;
  padding: 1rem 1.125rem;
  text-wrap: pretty;
  max-width: var(--medida-mono);
}

/* --- Cierre ---------------------------------------------------------------- */

.cierre { gap: 1.5rem; }
.cierre__titular {
  font: 700 clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem)/1.1 var(--tipo-titulo);
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-wrap: balance;
  max-width: var(--medida-titulo);
}
.cierre__texto {
  font: 400 1.125rem/1.6 var(--tipo-cuerpo);
  color: var(--texto);
  text-wrap: pretty;
}

/* =============================================================================
   El celular
   =============================================================================

   Decisión de móvil, con el número que la sostiene.

   El marco mide 390 px de pantalla más 12 px de bisel a cada lado: 414 px. A
   390 px de ventana hay 358 px de contenido. No cabe, y escalarlo tampoco
   resuelve nada: sería un celular dibujado dentro de un celular real, con un
   área de desplazamiento de 760 px —el 90 % de una ventana de 844— anidada
   dentro de la de la página. Dos scroll superpuestos en un dispositivo táctil
   no se pueden separar con el dedo.

   Así que por debajo de 1024 px el aside no se muestra, y su función no se
   pierde: el cierre lleva «Ver un negocio de ejemplo», que es un enlace de
   verdad al mismo sitio y abre la app a pantalla completa, que es como se ve
   bien.

   El corte va en 1024 y no en 768 porque a 768 la columna de texto quedaría en
   364 px (768 − 64 de margen − 340 del aside − 64 del espacio): más angosta
   que el propio celular que la acompaña.

   Ocultarlo no basta: un iframe dentro de un `display: none` igual se descarga
   en la mayoría de navegadores, y el comerciante estaría pagando esos datos
   móviles por algo que no puede ver. Por eso el iframe lleva `loading="lazy"`,
   que no dispara mientras el elemento no se acerca al viewport — y uno oculto
   nunca lo hace. Hay una prueba que cuenta peticiones al sitio a 390 y a 1440.
   */

.demo { display: none; }

@media (min-width: 64em) {
  .demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.125rem;
    position: sticky;
    top: calc(var(--alto-barra) + 1.75rem);
    align-self: start;
  }
}

.demo__marco {
  width: 24.375rem; /* 390 px: el ancho lógico que ve la app dentro */
  background: var(--tinta);
  border-radius: 2.75rem;
  padding: 0.75rem;
  box-shadow: 0 24px 60px rgba(22, 17, 15, 0.22);
  position: relative;
  /* El marco es más ancho que la columna (414 > 340). Se escala para que quepa
     sin cambiar el viewport que la app ve adentro; el margen negativo devuelve
     el alto que el escalado deja sobrando (784 × 0,13 = 102 px). */
  transform: scale(var(--escala-demo));
  transform-origin: top center;
  margin-bottom: -6.375rem;
}

.demo__pantalla {
  background: var(--blanco);
  border-radius: 2.125rem;
  overflow: hidden;
  height: 47.5rem;
  position: relative;
}

.demo__reserva {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.875rem;
  padding: 2rem;
  text-align: center;
  background: #F7F8F9;
}
.demo__reserva-titulo { font: 600 1.125rem/1.35 var(--tipo-titulo); color: var(--tinta); }
.demo__reserva-texto { font: 400 0.9375rem/1.6 var(--tipo-cuerpo); color: var(--gris); text-wrap: pretty; }

.demo__iframe {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Sin `src` no hay nada que mostrar: un iframe vacío pinta una hoja en blanco
   encima del mensaje de reserva. Si el Worker no responde, se ve la reserva. */
.demo__iframe:not([src]), .demo__iframe[src=""] { display: none; }

.demo__pie {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-items: center;
  text-align: center;
  max-width: 21.25rem;
}
.demo__leyenda { font: 400 0.9375rem/1.5 var(--tipo-cuerpo); color: var(--gris); text-wrap: pretty; }

/* =============================================================================
   Pie
   ========================================================================== */

.pie {
  background: var(--blanco);
  border-top: 1px solid var(--borde);
  padding-block: 2.25rem;
}
.pie__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  justify-content: space-between;
  align-items: baseline;
}
.pie__identidad { font: 400 0.9375rem/1.5 var(--tipo-cuerpo); color: var(--gris); }
/* Términos, privacidad y soporte no existen como páginas. El mock los dibuja
   como enlaces que apuntan al inicio de la propia landing; eso es un enlace
   que no lleva a donde dice, o sea la misma regla que apaga los botones de
   registro. Aquí van como texto hasta que existan. */
.pie__legal { font: 400 0.9375rem/1.5 var(--tipo-cuerpo); color: var(--gris); text-wrap: pretty; }