/* pacuadrar.com · PACUADRAR.md §7 y §8.
   Los colores salen de tokens.css, generado desde tokens.ts. Aquí no hay hex.

   Dos anchos y no uno. `.marco` es la columna de lectura —640px— y la usan
   mesa.html y los dos documentos legales, que son texto seguido. La portada usa
   `.ancho`, de 1120px, porque tiene una maqueta a dos columnas que a 640 no
   cabe. Cambiar `.marco` para que la portada respirara habría estirado también
   la política de privacidad hasta una medida en la que no se puede leer. */

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

html {
  scroll-behavior: smooth;
  /* La barra es fija: sin esto, un ancla deja el título debajo de ella. */
  scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background: var(--papel);
  color: var(--tinta);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  font-family: 'Space Grotesk', Inter, sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

h1 {
  font-size: 40px;
  font-weight: 700;
}
h2 {
  font-size: 24px;
  font-weight: 600;
  margin-top: var(--espacio-xxl);
}
h3 {
  font-size: 19px;
  font-weight: 600;
  margin-top: var(--espacio-xl);
}

p,
ul,
ol {
  margin-top: var(--espacio-md);
}
ul,
ol {
  padding-left: var(--espacio-xl);
}
li {
  margin-top: var(--espacio-xs);
}

a {
  color: var(--verde-medio);
}

/* El foco se ve siempre y con el mismo verde que la portada (src/portada.css).
   El anillo de serie del navegador cambia de uno a otro, y el azul claro de
   Safari no llega a 3:1 sobre papel. Aquí todo va sobre papel o blanco, así
   que el verde basta: 11:1. */
:focus-visible {
  outline: 2px solid var(--verde-cuadre);
  outline-offset: 3px;
  border-radius: 4px;
}

.marco {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--espacio-xxxl) var(--espacio-lg) var(--espacio-huge);
}

.nota {
  color: var(--gris-nota);
  font-size: 15px;
}

/* Un solo elemento Lima Cierre por pantalla: la acción principal. §8.3 */
.cierre {
  display: block;
  background: var(--lima-cierre);
  color: var(--tinta);
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  padding: var(--espacio-lg);
  border-radius: var(--radio-boton);
  min-height: 44px;
  border: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Las dos clases las llevan a veces un `<a>` y a veces un `<button>` —en
   mesa.html «Copiar el código» es un `<button class="cierre">`—, así que las
   dos necesitan el reinicio. Sin él, el navegador pinta ese botón en Arial de
   13px con su borde nativo, justo en la pantalla que le sale a alguien de pie
   en un restaurante.

   El secundario es `.fantasma`, el mismo de la app (`Boton variante=
   "fantasma"`) y del panel: sin relleno, letra en verde y la línea de
   siempre. Hasta el 26-09-2026 era `.boton`, relleno en verde, y en mesa.html
   quedaba pegado al Lima de «Copiar el código»: dos botones llenos, uno
   encima del otro, y ninguno decía cuál era el que tocaba.

   Ya no hay botón deshabilitado. Sin código en la URL, `enlaces.js` pintaba
   «Pide el código a quien te invitó» dentro de un botón gris que no hacía
   nada: una instrucción con aspecto de control, y a 3,67:1. Desde el
   25-09-2026 esa frase es un párrafo. */
.fantasma {
  display: block;
  background: transparent;
  color: var(--verde-cuadre);
  text-align: center;
  text-decoration: none;
  padding: var(--espacio-lg);
  border-radius: var(--radio-boton);
  min-height: 44px;
  border: 1px solid var(--gris-linea);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.fantasma:hover {
  border-color: var(--verde-cuadre);
}

/* Papel y no blanco, como la `Tarjeta` de la app (color.papel con borde
   grisLinea): el `#fff` era el último hex de la hoja. Lo de dentro baja un
   pelo de contraste —grisNota, de 4,85:1 a 4,57:1— y queda en AA, igual que
   la misma nota fuera de la tarjeta, que ya estaba sobre papel. */
.tarjeta {
  background: var(--papel);
  border: 1px solid var(--gris-linea);
  border-radius: var(--radio-tarjeta);
  padding: var(--espacio-xl);
  margin-top: var(--espacio-xl);
}

/* El código de la mesa: grande y con numerales tabulares, como todo dato que
   alguien va a dictar o copiar. §8.1 */
.codigo {
  font-family: 'Space Grotesk', monospace;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--verde-cuadre);
  margin-top: var(--espacio-sm);
}

.acciones {
  display: grid;
  gap: var(--espacio-sm);
  margin-top: var(--espacio-xl);
}

/* El pie de las páginas de lectura: los cuatro documentos legales y quién está
   detrás. `line-height` de 27px para que, si los enlaces bajan a un segundo
   renglón en un teléfono, cada uno siga teniendo sus 24px sin pisar al de
   arriba (WCAG 2.5.8). */
.pie {
  margin-top: var(--espacio-huge);
  padding-top: var(--espacio-lg);
  border-top: 1px solid var(--gris-linea);
  font-size: 15px;
  line-height: 1.8;
  color: var(--gris-nota);
}
.pie a {
  margin-right: var(--espacio-lg);
}
.pie address {
  margin-top: var(--espacio-md);
  font-style: normal;
}

/* La marca. Lockup horizontal: símbolo y palabra con 1u de separación, según
   docs/design/Pacuadrar Sistema de Logo.dc.html. El símbolo hereda el color por
   `currentColor`, así que sirve igual sobre papel que sobre verde. */
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-sm);
  margin-bottom: var(--espacio-xl);
  color: var(--tinta);
  text-decoration: none;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
}
.marca img {
  display: block;
}

/* Los pasos de «Cómo funciona». Cada uno abre con su frase en negrita, así que
   necesitan más aire entre sí que una lista normal. */
.pasos li {
  margin-top: var(--espacio-lg);
}

/* Todo monto lleva numerales tabulares y dos decimales, también fuera de la
   app: es la misma regla de §8.1 y §8.2, y aquí se ven tres seguidos. */
.monto {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ═════════════════════════════════════════════════════════════════════════
   LA PORTADA

   Todo lo de aquí abajo lo usa solo index.html. Las otras tres páginas se
   quedan con lo de arriba, que es lo que tenían: un documento legal no gana
   nada con una maqueta y pierde si el ancho de lectura se le va.
   ═════════════════════════════════════════════════════════════════════════ */

.ancho {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--espacio-xl);
}

/* ── La barra ──────────────────────────────────────────────────────────── */

/* Fija y translúcida. El desenfoque es un adorno que se cae solo donde no está
   soportado; lo que no se cae es el fondo, que va opaco por debajo para que el
   texto nunca quede ilegible sobre lo que pase por detrás. */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--papel);
  background: color-mix(in srgb, var(--papel) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

/* La línea aparece solo cuando hay algo debajo. Un borde permanente en lo alto
   de una portada parte el hero en dos antes de que nadie haya bajado. */
.barra.pegada {
  border-bottom-color: var(--gris-linea);
}

.barra .ancho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-xl);
  height: 72px;
}

.barra .marca {
  margin-bottom: 0;
}

.enlaces {
  display: flex;
  align-items: center;
  gap: var(--espacio-xl);
}

/* `:not(.botonBarra)` y no `.enlaces a` a secas. El botón vive DENTRO del
   `<nav class="enlaces">`, así que `.enlaces a` (0,1,1) le ganaba por
   especificidad a `.botonBarra` (0,1,0) y su `color: var(--papel)` era letra
   muerta: en reposo salía en gris nota sobre tinta —3.76:1, por debajo del
   mínimo para 15px— y en hover pasaba a tinta sobre tinta, o sea desaparecía
   justo al apuntarlo.

   Es el mismo fallo que `.tarjeta p` contra `.codigo`, y por eso está escrito
   aquí: una regla de esta hoja se escribe pensando en a quién MÁS alcanza. */
.enlaces a:not(.botonBarra) {
  color: var(--gris-nota);
  text-decoration: none;
  font-size: 15px;
}

.enlaces a:not(.botonBarra):hover {
  color: var(--tinta);
}

/* En el móvil la barra se queda con la marca y el botón. Los tres enlaces de
   sección se esconden en vez de apretarse: en 360px de ancho no caben sin
   quedar a 11px, y un menú desplegable para tres anclas de la misma página es
   más maquinaria de la que el problema pide.

   Se llaman `aSeccion` y no `seccion` porque `.seccion` ya era la clase de los
   bloques de la página, con 64px de relleno vertical. Compartiendo nombre, cada
   enlace de la barra arrastraba 64px arriba y abajo: relleno invisible que se
   comía los clics de media barra. Se reprodujo con un clic de verdad. */
.enlaces .aSeccion {
  display: none;
}

@media (min-width: 860px) {
  .enlaces .aSeccion {
    display: inline;
  }
}

.botonBarra {
  background: var(--tinta);
  color: var(--papel);
  border-radius: var(--radio-boton);
  padding: 10px var(--espacio-xl);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ── El hero ───────────────────────────────────────────────────────────── */

.hero {
  padding-top: var(--espacio-huge);
  padding-bottom: var(--espacio-huge);
  display: grid;
  gap: var(--espacio-huge);
  align-items: center;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1fr 390px;
    gap: 80px;
    padding-top: 80px;
  }
}

.hero h1 {
  /* De 38 a 68 según quepa. `clamp` y no tres reglas: el salto de tamaño en un
     punto de corte concreto deja siempre una anchura donde el título parte mal. */
  font-size: clamp(38px, 6.4vw, 68px);
  line-height: 1.04;
}

.hero .entrada {
  font-size: 20px;
  line-height: 1.4;
  color: var(--gris-nota);
  max-width: 52ch;
  margin-top: var(--espacio-xl);
  text-wrap: pretty;
}

/* Los botones de descarga no se estiran y van uno al lado del otro donde
   quepan. La clase la pone `enlaces.js` al pintarlos. */
.conTiendas {
  justify-items: start;
}

@media (min-width: 480px) {
  .conTiendas {
    grid-template-columns: auto auto;
    justify-content: start;
    gap: var(--espacio-md);
  }
}

.hero .aviso {
  margin-top: var(--espacio-lg);
}

/* ── El teléfono ───────────────────────────────────────────────────────── */

/* La maqueta es HTML y no una captura. Una captura de la app envejece en
   silencio: se cambia una pantalla y la portada sigue enseñando la anterior
   durante meses. Esto se ve raro en cuanto los tokens cambian, que es
   justamente cuando quieres enterarte.

   Va `aria-hidden`: para quien usa lector de pantalla es una ilustración, y
   leerle catorce montos sueltos no le cuenta nada que el texto de al lado no
   diga mejor. */
.telefono {
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  border: 1px solid var(--gris-linea);
  border-bottom: none;
  border-radius: 44px 44px 0 0;
  overflow: hidden;
  background: var(--papel);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--tinta) 10%, transparent);
  font-size: 15px;
}

.telefono .cabeza {
  background: var(--verde-cuadre);
  color: var(--papel);
  padding: 40px var(--espacio-xl) var(--espacio-xl);
}

.telefono .cabeza .local {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
}

.telefono .cabeza .mesa {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--papel) 70%, transparent);
  margin-top: var(--espacio-xs);
}

.caras {
  display: flex;
  margin-top: var(--espacio-lg);
  align-items: center;
  gap: var(--espacio-sm);
}

.caras span {
  width: 30px;
  height: 30px;
  border-radius: var(--radio-full);
  background: var(--verde-medio);
  border: 2px solid var(--verde-cuadre);
  display: grid;
  place-content: center;
  font-size: 11px;
  font-weight: 600;
}

.caras span + span {
  margin-left: -8px;
}

.caras .cuantos {
  width: auto;
  height: auto;
  border: none;
  background: none;
  margin-left: var(--espacio-sm);
  font-size: 13px;
  font-weight: 400;
  color: color-mix(in srgb, var(--papel) 70%, transparent);
}

.telefono .cuerpo {
  padding: var(--espacio-xl);
}

.telefono .rotulo {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gris-nota);
}

.items {
  list-style: none;
  padding: 0;
  margin: var(--espacio-md) 0 0;
}

.items li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-md);
  padding: var(--espacio-md) 0;
  border-bottom: 1px solid var(--gris-linea);
  margin-top: 0;
}

.items li:last-child {
  border-bottom: none;
}

/* Lleva numerales tabulares aunque sea texto gris de apoyo: uno de los tres
   dice «te tocan $4.20», y §8.1 no admite excepciones ni siquiera cuando el
   monto va dentro de una frase. Es el argumento entero de la portada: no puede
   presumir de que las cuentas cuadran y pintar un monto con otra métrica. */
.items .quien {
  display: block;
  font-size: 13px;
  color: var(--gris-nota);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* El total de la persona. Es el número por el que existe la app, así que va
   en montoGrande y con el mismo verde del encabezado. §7 */
.miParte {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espacio-md);
  padding-top: var(--espacio-lg);
  margin-top: var(--espacio-sm);
  border-top: 1px solid var(--gris-linea);
}

.miParte .cifra {
  font-size: 34px;
  line-height: 38px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--verde-cuadre);
}

/* El único Lima Cierre de la portada, y va aquí a propósito: el momento de
   cuadre es el acento de la marca, no un botón de marketing. §8.3 */
.telefono .cuadrar {
  margin-top: var(--espacio-xl);
  background: var(--lima-cierre);
  color: var(--tinta);
  border-radius: var(--radio-boton);
  padding: var(--espacio-lg);
  text-align: center;
  font-weight: 600;
}

/* ── Secciones ─────────────────────────────────────────────────────────── */

.seccion {
  padding: var(--espacio-huge) 0;
}

.seccion > h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  margin-top: 0;
}

.seccion > .entrada {
  color: var(--gris-nota);
  font-size: 18px;
  max-width: 60ch;
}

.rejilla {
  display: grid;
  gap: var(--espacio-lg);
  margin-top: var(--espacio-xxl);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Las tarjetas de la portada tienen su propio margen —el de la rejilla— así que
   se les quita el `margin-top` que llevan las de las otras páginas. */
.rejilla .tarjeta {
  margin-top: 0;
}

/* Solo las tarjetas de la portada. Sin acotarlo a `.seccion`, `.tarjeta p`
   ganaba por especificidad a `.codigo` —que también es un `<p>` dentro de una
   tarjeta— y el código de la mesa de mesa.html pasaba de 44px en verde a 16px
   en gris. Una regla de la portada no puede alcanzar a las otras páginas. */
.seccion .tarjeta h3 {
  margin-top: 0;
}

.seccion .tarjeta p {
  color: var(--gris-nota);
  font-size: 16px;
}

/* El número del paso. Grande, en Space Grotesk y en gris línea: se ve la
   secuencia de lejos y no compite con el texto de cerca. */
.paso {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--gris-linea);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--espacio-md);
}

/* ── El centavo ────────────────────────────────────────────────────────── */

/* La cuenta del centavo, escrita como una operación y no como un párrafo. Es el
   argumento entero de la app y en prosa se lee por encima. */
.cuenta {
  background: var(--verde-cuadre);
  color: var(--papel);
  border-radius: var(--radio-tarjeta);
  padding: var(--espacio-xxxl);
  margin-top: var(--espacio-xxl);
  display: grid;
  gap: var(--espacio-lg);
  font-variant-numeric: tabular-nums;
}

.cuenta .linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-lg);
  font-size: clamp(18px, 2.6vw, 24px);
}

.cuenta .linea span:first-child {
  color: color-mix(in srgb, var(--papel) 70%, transparent);
  font-size: 16px;
}

.cuenta .falta {
  border-top: 1px solid color-mix(in srgb, var(--papel) 25%, transparent);
  padding-top: var(--espacio-lg);
}

/* Ámbar y nunca terracota: falta un centavo, no ha fallado nada. §8.4 */
.cuenta .falta strong {
  color: var(--ambar-pendiente);
  font-weight: 700;
}

/* ── La franja de restaurantes ─────────────────────────────────────────── */

/* A sangre completa y en verde. Es el único bloque de la página que le habla a
   alguien distinto —el dueño del local, no quien come—, y separarlo por color
   evita que lea cuatro párrafos que no son para él. */
.franja {
  background: var(--verde-cuadre);
  color: var(--papel);
  margin-top: var(--espacio-huge);
}

.franja .ancho {
  padding-top: var(--espacio-huge);
  padding-bottom: var(--espacio-huge);
  display: grid;
  gap: var(--espacio-xxl);
}

@media (min-width: 900px) {
  .franja .ancho {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
}

.franja h2 {
  margin-top: 0;
  font-size: clamp(26px, 3.4vw, 36px);
}

.franja p {
  color: color-mix(in srgb, var(--papel) 78%, transparent);
}

.franja ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--espacio-md);
}

.franja li {
  display: flex;
  gap: var(--espacio-md);
  align-items: flex-start;
  margin-top: 0;
}

/* La viñeta es el símbolo de la marca reducido a una barra. Un `•` de la fuente
   dentro de un bloque de marca es la clase de detalle que nadie nombra y todo
   el mundo nota. */
.franja li::before {
  content: '';
  flex: none;
  width: 14px;
  height: 6px;
  border-radius: var(--radio-full);
  background: var(--lima-cierre);
  margin-top: 9px;
}

.franja .botonClaro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--papel);
  color: var(--verde-cuadre);
  border-radius: var(--radio-boton);
  padding: var(--espacio-lg) var(--espacio-xxl);
  text-decoration: none;
  font-weight: 600;
  min-height: 44px;
  margin-top: var(--espacio-xl);
}

/* ── Preguntas ─────────────────────────────────────────────────────────── */

.preguntas {
  display: grid;
  gap: 0;
  margin-top: var(--espacio-xxl);
  border-top: 1px solid var(--gris-linea);
}

.preguntas > div {
  padding: var(--espacio-xl) 0;
  border-bottom: 1px solid var(--gris-linea);
  display: grid;
  gap: var(--espacio-sm);
}

@media (min-width: 760px) {
  .preguntas > div {
    grid-template-columns: 280px 1fr;
    gap: var(--espacio-xxl);
  }
}

.preguntas h3 {
  margin-top: 0;
  font-size: 18px;
}

.preguntas p {
  margin-top: 0;
  color: var(--gris-nota);
  font-size: 16px;
}

/* ── El pie de la portada ──────────────────────────────────────────────── */

.pieAncho {
  border-top: 1px solid var(--gris-linea);
  margin-top: var(--espacio-huge);
}

.pieAncho .ancho {
  padding-top: var(--espacio-xxxl);
  padding-bottom: var(--espacio-xxxl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-xl);
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  color: var(--gris-nota);
}

.pieAncho .marca {
  margin-bottom: 0;
}

.pieAncho nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-xl);
}

/* Los enlaces del pie, no su logotipo. `.pieAncho a` alcanzaba también al
   `<a class="marca">`, y le ganaba a `.marca { color: var(--tinta) }` por
   especificidad: la marca del pie salía en gris nota mientras la de la barra
   salía en tinta. La misma palabra en dos colores en la misma página. */
.pieAncho nav a {
  color: var(--gris-nota);
  text-decoration: none;
}

.pieAncho nav a:hover {
  color: var(--tinta);
}

/* ── Los botones de descarga ──────────────────────────────────────────── */

/* Los pinta `enlaces.js` en mesa.html y en publicacion.html, uno por tienda con
   ficha publicada. Son texto nuestro y no las insignias de Apple o de Google,
   que solo se usan tal cual las entregan. En tinta y no en Lima Cierre: en
   estas páginas el acento ya lo tiene la acción principal de arriba. §8.3 */
.botonTienda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tinta);
  color: var(--papel);
  border-radius: var(--radio-boton);
  padding: 12px var(--espacio-lg);
  min-height: 48px;
  font-weight: 600;
  text-decoration: none;
}

/* «Muy pronto en…»: las tiendas que todavía no tienen ficha. Ocupa la fila
   entera, también cuando los botones van en columna. */
.pronto {
  margin: 0;
  grid-column: 1 / -1;
}