/* Anyosa POS — "Instrumento": la landing se comporta como panel de
   operación, no como afiche. Papel cálido, tinta casi negra, y el verde
   SOLO donde hay que tocar. Los números y las etiquetas van en
   monoespaciada porque el producto cuenta segundos y soles: eso es lo que
   se vende.

   Tres familias, de la guía de marca: Space Grotesk titula, Manrope se
   lee, IBM Plex Mono cuenta. Sin framework y sin CDN: van self-hosteadas
   porque la CSP es estricta y porque un teléfono en 4G paga cada
   request. */

@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Mono no tiene versión variable: son tres archivos. El de 600
   se declara 600-700 para que un `font-weight: 700` use este corte en vez
   de que el navegador invente una negrita sintética. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f5f4ef;
  --card: #ffffff;
  --line: #e4e2da;
  --ink: #0d0f0e;
  --body: #3f3f39;
  --dim: #73736c;
  --green: #42e883;
  --green-deep: #2f8a3b;
  --green-text: #276f30;
  --green-ink: #0d0f0e;
  /* Texto secundario y rayas sobre fondo negro (Control y cierre).
     #9d9c94 sobre --ink da 7,1:1. */
  --on-ink-dim: #9d9c94;
  --ink-line: rgba(245, 244, 239, 0.14);
  --font-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --container: 1160px;
  --gutter: clamp(20px, 5vw, 72px);
  --section-gap: clamp(56px, 9vw, 104px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sin scroll-snap, a propósito (2026-09-21, decisión del usuario): el
     encaje por sección "acomodaba" la página al soltar el scroll y no
     gustó. Además, medido en Chrome: con `proximity`, 45 toques de rueda
     de 100px no pasaban del hero (cada toque volvía al mismo punto), y
     las estaciones quedaban cortadas a 1280x720. */
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
figure, blockquote { margin: 0; }
p, h1, h2, h3, h4, dl, dd { margin: 0; }
::selection { background: var(--green); color: var(--green-ink); }

:focus-visible {
  outline: 2px solid var(--green-text);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Tipografía ───────────────────────────────────────────────────────
   Tracking negativo crece con el tamaño: a 46px las letras se leen
   demasiado separadas si se deja el default. */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.875rem, 6.2vw, 5.375rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Titulares de dos golpes: frase + remate en gris, en línea propia. */
h1 span, h2 span { display: block; color: var(--dim); }

h2 {
  font-size: clamp(2rem, 3.4vw, 2.875rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

h3 {
  font-size: clamp(1.625rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

h4 {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.lead {
  max-width: 46ch;
  color: var(--body);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.45;
}

/* Etiquetas de dato: mono, versalitas, tracking abierto. */
.label {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.label--green { color: var(--green-text); }
.label--mute { color: var(--dim); }

/* ── Botones ──────────────────────────────────────────────────────────
   Un solo gesto primario en toda la página (WhatsApp), repetido. El
   verde de marca (#42E883) es el fondo del botón, nunca texto sobre
   papel: sobre claro no llega a 3:1 (por eso existe --green-text, el
   Operational Green bajado hasta pasar AA). */

.btn {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 28px;
  border: 0;
  border-radius: var(--radius);
  background: var(--green);
  color: var(--green-ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  transition: transform 100ms var(--ease), background-color 150ms ease, color 150ms ease;
}

.btn svg { flex-shrink: 0; }
.btn:active { transform: scale(0.97); }
.btn--block { width: 100%; }

/* Roles del verde (2026-09-21), porque llegaron a competir cuatro:
   · Anyosa Green (--green): logo, TODOS los CTA y acentos chicos
     (pastillas, la raya de la garantía, la etiqueta "Control").
   · Verde oscuro (--green-text): el hover de los CTA y el texto verde
     sobre papel (etiquetas, checks). Blanco sobre él da 6,2:1.
   · El verde de "LISTO" y demás estados es del PRODUCTO y vive dentro de
     las capturas: no se imita en la página.
   Por eso ya no hay botón negro (.btn--ink) ni banda verde de cierre: un
   CTA de otro color o un bloque verde gigante competían con el botón. */

.btn--sm {
  min-height: 44px;
  padding: 12px 20px;
  font-size: 0.75rem;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--green-text); color: #fff; }
  .btn:hover:not(:active) { transform: translateY(-1px); }
  .masthead__link:hover { color: var(--ink); }
  .module:hover, .frame:hover { border-color: var(--dim); }
}

/* ── Marco de captura ─────────────────────────────────────────────────
   Las capturas son del sistema real: van en un marco con su barra, no en
   una maqueta de teléfono dibujada. La barra solo nombra la pantalla. */

.frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  transition: border-color 200ms var(--ease);
}

.frame__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.frame img { width: 100%; height: auto; }

/* La pantalla de cocina es horizontal de verdad: encogerla al ancho del
   teléfono la vuelve ilegible (126px de alto). Se muestra a escala real y
   se desliza, con aviso. */
.frame__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.frame__scroll img { width: 680px; max-width: none; }

.frame__hint {
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Cabecera ─────────────────────────────────────────────────────── */

.masthead {
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.wordmark {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 9px;
}

.wordmark img {
  height: 30px;
  width: auto;
  display: block;
}

/* El logo horizontal de la guía es ícono + "ANYOSA" + pastilla verde con
   "POS". Se arma en HTML y no en un PNG: así el nombre escala, sigue al
   color del texto y no baja bytes. */
.wordmark__name {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: uppercase;
}

.wordmark__tag {
  padding: 4px 7px 3px;
  border-radius: var(--radius-sm);
  background: var(--green);
  color: var(--green-ink);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.masthead__actions {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
}

/* Medido a 390px: marca (151) + botón con flecha (179) llenan los 350 de
   contenido exactos, y a 360 el botón aplastaba la marca. En el teléfono
   el botón va sin flecha; la flecha vuelve desde 768px. */
.masthead .btn--sm svg { display: none; }

/* Único corte fuera de base/768/1200: bajo 360px (iPhone SE de primera
   generación, Android chicos) marca + botón no entran ni sin flecha y la
   página se desbordaba de costado. Queda solo la "A", igual que en la
   barra flotante. */
@media (max-width: 359px) {
  .wordmark__name, .wordmark__tag { display: none; }
}

/* En el teléfono la cabecera es solo marca + botón: los dos enlaces
   aparecen desde 768px, donde hay ancho para leerlos sin apretar el CTA.
   13px en --body y no 11px en --dim: a 11px gris "prácticamente
   desaparecían" en escritorio. */
.masthead__link {
  display: none;
  color: var(--body);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 150ms ease;
}

/* ── Hero ─────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  gap: clamp(30px, 5vw, 72px);
  padding-block: clamp(36px, 6vw, 96px);
}

.hero h1 { margin-top: 20px; }
.hero__lead { margin-top: 22px; }

.hero__cta { margin-top: 26px; }

/* Entre 768 y 1199 el hero es de una sola columna: sin tope, el teléfono
   se estira al ancho completo y mide 1500px de alto. El tope lo dejaba
   pegado al margen izquierdo en teléfono, que es donde más se nota: en una
   sola columna el aparato va centrado. Desde 1200 su columna mide
   exactamente 360px, así que los márgenes automáticos no hacen nada. */
.hero__visual {
  max-width: 360px;
  margin-inline: auto;
}

/* Única excepción a la regla del marco: el hero muestra el sistema dentro
   de un teléfono porque la promesa es "desde donde estés". El PNG ya trae
   el aparato recortado, así que no lleva borde ni barra. */
.hero__device { width: 100%; height: auto; }

.hero__guarantee {
  display: flex;
  gap: 10px;
  max-width: 52ch;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--body);
  font-size: 0.875rem;
  line-height: 1.45;
}

.hero__guarantee::before {
  flex-shrink: 0;
  width: 3px;
  background: var(--green);
  content: "";
}

.hero__guarantee strong { color: var(--ink); font-weight: 600; }

/* ── Lo que controlas ──────────────────────────────────────────────────
   Antes eran tres cifras (<1s, +10 %, −50 %) sacadas de referencias de la
   industria, no medidas en clientes nuestros. Ahora son tres cosas que el
   sistema hace hoy. Se conserva la forma de tabla (raya en tinta arriba,
   una fila por dato) para no perder el tono de instrumento. */

.stats { padding-bottom: var(--section-gap); }

.stats__grid {
  display: grid;
  border-top: 1px solid var(--ink);
}

.stat {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

/* Mismo patrón que .module__num: la etiqueta de la sección de módulos y
   la de esta tira hablan el mismo idioma. */
.stat__kicker {
  color: var(--green-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stat__title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.stat__label {
  max-width: 34ch;
  margin-top: 8px;
  color: var(--body);
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* ── Cómo funciona · antes / con Anyosa ─────────────────────────────
   El título repite el ritmo del hero (frase + remate en gris) y cada
   columna va igual: remate corto en display, explicación debajo. */

.change { padding-bottom: var(--section-gap); }

.change h2 { max-width: 18ch; }

.change__inner {
  display: grid;
  gap: 28px;
  margin-top: clamp(26px, 4vw, 44px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.change__punch {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.change__col--before .change__punch { color: var(--dim); }

.change__body {
  max-width: 38ch;
  margin-top: 10px;
  color: var(--body);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.45;
}

/* ── Bandas blancas (02 cocina · 04 planes) ───────────────────────── */

.band {
  padding-block: var(--section-gap);
  border-block: 1px solid var(--line);
  background: var(--card);
}

.sec-head { display: grid; gap: 18px; }
.sec-head h2 { max-width: 22ch; }

.sec-head__body {
  max-width: 58ch;
  color: var(--body);
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  line-height: 1.45;
}

.band .frame { margin-top: clamp(26px, 4vw, 44px); }

/* ── Estaciones: Cocina · Barra · Caja ───────────────────────────────
   Tres capturas reales detrás de un selector: se DEMUESTRA qué significa
   "estaciones" en vez de explicarlo. Sin JS no hay selector y las tres
   pantallas van una debajo de otra (.is-tabs lo pone main.js).
   Con selector, el bloque mide lo que el panel ACTIVO: los otros dos
   salen del flujo (absolute, arriba) y quedan invisibles. Antes se
   apilaban en la misma celda del grid y el bloque medía siempre lo del
   más alto (caja): con cocina activa quedaba un hueco blanco de ~200px
   entre la pantalla y el cierre. Se ocultan con visibility y no con
   display:none para que las imágenes con loading="lazy" igual se
   descarguen al acercarse la sección: la primera vez que alguien toca
   "Barra" la captura ya está. */

.stations__tabs {
  display: inline-flex;
  gap: 4px;
  margin-top: clamp(26px, 4vw, 40px);
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
}

.stations__tabs[hidden] { display: none; }

.stations__tabs [role="tab"] {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 150ms ease, color 150ms ease;
}

.stations__tabs [aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
}

.stations__panels {
  display: grid;
  gap: clamp(40px, 6vw, 64px);
  margin-top: clamp(26px, 4vw, 44px);
}

.stations.is-tabs .stations__panels {
  position: relative;
  gap: 0;
  margin-top: 28px;
}

/* Un ítem de grid no se achica por debajo de su contenido (min-width:
   auto): sin esto, la captura de 960px del teléfono ensanchaba el panel
   y la página entera quedaba de 983px, en vez de deslizarse dentro del
   marco. */
.stations__panel { min-width: 0; }

/* El remate va ARRIBA de la pantalla (pestaña → qué ves → la prueba):
   así su lugar no cambia entre pestañas aunque las pantallas midan
   distinto. Sin barra de marco: la pestaña ya nombra la estación y el
   KDS trae su propio encabezado con "EN VIVO". */
.stations .frame { margin-top: 28px; }

.stations.is-tabs .stations__panel {
  transition: opacity 220ms var(--ease), visibility 0s linear 0s;
}

.stations.is-tabs .stations__panel:not([data-active]) {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--ease), visibility 0s linear 220ms;
}

/* En el teléfono la pantalla va a escala legible y se desliza: encogida a
   350px, el texto de un ticket quedaba en 4px. A 960px mide ~11px. */
.stations .frame__scroll img { width: 960px; }

.stations__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.stations__body {
  max-width: 52ch;
  margin-top: 8px;
  color: var(--body);
  font-size: clamp(1rem, 1.3vw, 1.0625rem);
  line-height: 1.45;
}

.stations__close {
  margin-top: clamp(32px, 5vw, 52px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── 03 · En la mesa ──────────────────────────────────────────────── */

.table-sec {
  display: grid;
  gap: clamp(26px, 4vw, 72px);
  padding-block: var(--section-gap);
}

.table-sec h2 { margin-top: 16px; max-width: 18ch; }
.table-sec .sec-head__body { margin-top: 16px; }

.specs {
  margin-top: 26px;
  max-width: 480px;
  border-top: 1px solid var(--line);
}

.specs > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.specs dt { font-size: 0.9375rem; }

.specs dd {
  color: var(--green-text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-align: right;
  white-space: nowrap;
}

/* "No se instala nada" es el argumento que más baja la resistencia a
   probar: se subraya en tinta, no en gris como las otras dos filas. */
.spec--key { border-bottom-color: var(--ink) !important; }
.spec--key dt { font-weight: 600; }

.spec--key dd {
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
}

.specs__note {
  max-width: 44ch;
  margin-top: 14px;
  color: var(--body);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* ── Aparato ──────────────────────────────────────────────────────────
   El hero y esta sección muestran el sistema dentro de un teléfono; el
   resto de las capturas va en `.frame`, con borde y barra. La diferencia
   no es estética: acá el aparato ES el argumento ("desde el celular que
   ya tienes", "sin instalar nada"), mientras que en cocina la estación
   puede ser cualquier pantalla y dibujar un aparato concreto mentiría.
   El PNG ya trae el teléfono recortado, así que no lleva marco. */

.device {
  max-width: 340px;
  margin-inline: auto;
}

.device__tag {
  margin-bottom: 12px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.device__img {
  width: 100%;
  height: auto;
}

/* ── Control: lo que ve el dueño ─────────────────────────────────────
   Fondo negro a propósito: corta el ritmo de papel/blanco justo antes de
   la oferta, y es la sección que le habla a quien paga. La captura es la
   misma del hero hasta que haya una de reportes en computadora. */

.control {
  padding-block: var(--section-gap);
  background: var(--ink);
  color: var(--paper);
}

.control__inner {
  display: grid;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.control__kicker { color: var(--green); }
.control h2 { max-width: 16ch; margin-top: 16px; }
.control h2 span { color: var(--on-ink-dim); }

.control__body {
  max-width: 44ch;
  margin-top: 18px;
  color: var(--on-ink-dim);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.45;
}

.control__list {
  max-width: 500px;
  margin-top: 28px;
  border-top: 1px solid var(--ink-line);
}

.control__list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--ink-line);
}

.control__list dt { font-size: 0.9375rem; font-weight: 600; }

.control__list dd {
  color: var(--on-ink-dim);
  font-size: 0.875rem;
  text-align: right;
}

.control__visual { width: 100%; max-width: 300px; margin-inline: auto; }
.control__visual img { width: 100%; height: auto; }

/* ── Qué incluye: Anyosa POS + lo que se suma ──────────────────────────
   Sin precio a propósito (etapa de conversaciones: el precio se da por
   WhatsApp). Por eso no se llama "Planes": una sección de planes sin
   precio promete algo que no muestra. Los extras son solo lo que se
   puede entregar HOY. */

.build {
  display: grid;
  gap: 20px;
  margin-top: clamp(28px, 4vw, 48px);
}

.plan {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
}

.plan__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  white-space: nowrap;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plan__top em {
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--green-ink);
  font-style: normal;
  font-weight: 700;
}

.plan h3 { margin-top: 16px; }

.plan__claim {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.plan__intro {
  margin-top: 6px;
  max-width: 34ch;
  color: var(--body);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.plan__list {
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.plan__list li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}

/* 20px de lado y no 28: "Ver el sistema por WhatsApp" entra en una línea
   dentro de la tarjeta también en el teléfono. */
.plan__cta { margin-top: 24px; padding-inline: 20px; }

.plan__list li::before {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23276f30' stroke-width='2'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center / contain no-repeat;
  content: "";
}

.modules { display: grid; gap: 14px; }

.modules__head {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.15;
}

.module {
  padding: clamp(20px, 2.6vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 200ms var(--ease);
}

.module__num {
  color: var(--green-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
}

.module h4 { margin-top: 12px; }

.module p:not(.module__num) {
  margin-top: 10px;
  max-width: 40ch;
  color: var(--body);
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* ── 05 · Cierre ──────────────────────────────────────────────────── */

.close {
  padding-block: var(--section-gap);
  background: var(--ink);
  color: var(--paper);
}

.close__inner { display: grid; gap: clamp(26px, 4vw, 72px); }
.close .close h2 { max-width: 14ch; margin-top: 16px; }

.close__body {
  max-width: 46ch;
  margin-top: 18px;
  color: var(--on-ink-dim);
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  line-height: 1.45;
}

/* ── Pie ──────────────────────────────────────────────────────────── */

.footer {
  padding-block: 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.footer__inner {
  display: grid;
  gap: 6px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Barra CTA persistente ────────────────────────────────────────── */

.dock {
  position: fixed;
  z-index: 40;
  right: 0;
  left: 0;
  transform: translateY(110%);
  transition: transform 320ms var(--ease);
}

.dock[data-visible="true"] { transform: translateY(0); }

.dock--bottom {
  bottom: 0;
  padding: 12px var(--gutter) max(12px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: rgba(246, 245, 241, 0.92);
  backdrop-filter: blur(18px);
}

/* ── Revelado ─────────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}

.reveal[data-shown="true"] { opacity: 1; transform: none; }
.stagger-1 { transition-delay: 0ms; }
.stagger-2 { transition-delay: 80ms; }
.stagger-3 { transition-delay: 160ms; }
.stagger-4 { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .stations.is-tabs .stations__panel,
  .stations.is-tabs .stations__panel:not([data-active]) { transition: none; }
  html { scroll-behavior: auto; }
  .reveal { transform: none; transition: opacity 200ms ease; }
  .dock { transition: opacity 200ms ease; transform: none; opacity: 0; pointer-events: none; }
  .dock[data-visible="true"] { opacity: 1; pointer-events: auto; }
  .btn:hover { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .dock, .masthead { background: var(--paper); backdrop-filter: none; }
}

/* ── 768px ────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .stats__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
  }

  .stat {
    padding: 28px 28px 26px 0;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }

  .stat:last-child { padding-right: 0; border-right: 0; }
  .stat + .stat { padding-left: 28px; }

  .stat__label { max-width: 26ch; }


  .masthead__link { display: inline; }
  .masthead .btn--sm svg { display: block; }

  /* La cabecera fija mide 73px: sin este margen, un salto por ancla
     ("Cómo funciona", "Qué incluye") deja el título tapado. */
  section[id] { scroll-margin-top: 88px; }

  .change__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
    align-items: start;
    padding-top: 40px;
  }

  /* Título a la izquierda, bajada a la derecha. Antes había una tercera
     columna de 160px para el número de sección; sin él, dejarla partía el
     título en una palabra por línea. */
  .sec-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: end;
  }

  .sec-head--split { grid-template-columns: minmax(0, 1fr) 320px; }

  .table-sec {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: center;
  }

  .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .modules__head { grid-column: 1 / -1; }
  .control__inner { grid-template-columns: minmax(0, 1fr) 300px; }

  .close__inner { grid-template-columns: minmax(0, 1fr) 340px; align-items: end; }

  .footer__inner {
    grid-template-columns: 1fr auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .frame__scroll { overflow-x: visible; }
  .frame__scroll img { width: 100%; }

  /* La pantalla entera tiene que entrar en la ventana con la pestaña y el
     remate a la vista: pedir scroll para ver la mitad de una comanda
     arruina la demostración. Cocina y barra vienen recortadas hasta donde
     terminan los tickets (2471x959, sin el blanco de abajo) y a lo ancho
     del contenedor ya entran; caja no se puede recortar (el "Cobrar" está
     al fondo), así que la limita el alto de la ventana y el marco se
     ajusta a la imagen. 318px = cabecera fija (73) + pestañas (54) +
     remate (~90) + los tres aires de 28px + un margen abajo. */
  .stations .frame { width: fit-content; max-width: 100%; }

  .stations .frame__scroll img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: max(360px, calc(100svh - 318px));
  }
  .frame__hint { display: none; }

  .dock--bottom { display: none; }

  /* UNA sola cabecera fija, la misma de arriba, con sus enlaces. Antes
     había una segunda barra (solo la "A" + botón) que aparecía al bajar:
     se leía como "el header repetido en cada sección". En el teléfono la
     cabecera no se fija: ahí el CTA va en la barra de abajo, al alcance
     del pulgar. */
  .masthead {
    position: sticky;
    z-index: 40;
    top: 0;
    background: rgba(245, 244, 239, 0.9);
    backdrop-filter: blur(18px);
  }
}

/* ── 1200px ───────────────────────────────────────────────────────── */

@media (min-width: 1200px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: center;
  }

  .hero__cta { display: flex; align-items: center; gap: 20px; }

  /* Plan base y módulos lado a lado solo cuando hay ancho de verdad: a
     820px las tarjetas quedaban de dos palabras por línea. */
  .build { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); align-items: start; }

  .sec-head--split .sec-head__aside { font-size: 0.9375rem; line-height: 1.45; }
}