/* ═══════════════════════════════════════════════════════════════════════════
   SoySocio · portal comercial — hoja compartida por las cuatro páginas.

   La paleta es la del logo: NARANJA y CIAN, y acá se usan como superficie
   grande, no como detalle. La regla del manual de marca sigue mandando y es
   la que decide qué texto va sobre qué fondo:

     · naranja #F18F28 → texto TINTA encima (6,6:1). Nunca texto blanco.
     · cian profundo #12678F → texto BLANCO encima (6,3:1).
     · cian brillante #189CD8 → texto TINTA encima (5,4:1).

   Sobre papel blanco, los colores de marca NO sirven para texto: van sus
   versiones «tinta» (#A8500A y #12678F). El padrón mutual es mayor y esto no
   es una preferencia estética.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  --papel: #fbfaf8;
  --papel-hondo: #f4efe7;
  --superficie: #ffffff;
  --borde: #e7e0d5;
  --tinta: #16202b;
  --tinta-suave: #5d554b;

  --naranja: #f18f28;
  --naranja-claro: #fbb968;
  --naranja-tinta: #a8500a;
  --naranja-velo: #fdf0e0;

  --cian: #189cd8;
  --cian-hondo: #12678f;
  --cian-tinta: #12678f;
  --cian-velo: #e6f4fc;

  --f-marca: "Outfit", "Trebuchet MS", system-ui, sans-serif;
  --f-texto: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --ancho: 1080px;
  --radio: 16px;
  --sombra: 0 2px 4px rgba(22, 32, 43, 0.05), 0 14px 40px -18px rgba(22, 32, 43, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --papel: #101f28;
    --papel-hondo: #0b171e;
    --superficie: #17262f;
    --borde: #2a4150;
    --tinta: #eaf0f3;
    --tinta-suave: #a5b8c3;
    --naranja-tinta: #f8b063;
    --naranja-velo: #2c2013;
    --cian-tinta: #63c4ee;
    --cian-velo: #0e2d3c;
    --sombra: 0 2px 4px rgba(0, 0, 0, 0.35), 0 14px 40px -18px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --papel: #101f28;
  --papel-hondo: #0b171e;
  --superficie: #17262f;
  --borde: #2a4150;
  --tinta: #eaf0f3;
  --tinta-suave: #a5b8c3;
  --naranja-tinta: #f8b063;
  --naranja-velo: #2c2013;
  --cian-tinta: #63c4ee;
  --cian-velo: #0e2d3c;
  --sombra: 0 2px 4px rgba(0, 0, 0, 0.35), 0 14px 40px -18px rgba(0, 0, 0, 0.7);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--f-marca);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.02em;
}
h1 {
  font-size: clamp(2.4rem, 6vw, 4.1rem);
}
h2 {
  font-size: clamp(1.8rem, 4vw, 2.7rem);
}
h3 {
  font-size: 1.2rem;
  line-height: 1.25;
}
p {
  margin: 0;
  max-width: 62ch;
}
img {
  max-width: 100%;
  /* 🔴 `height: auto` NO es opcional acá. Las imágenes llevan `width`/`height` puestos —para que
     el navegador reserve el lugar y la página no salte al cargar— y sin esto la altura se queda
     clavada en la intrínseca: el teléfono de la portada medía 1.482 px de alto y empujaba todo. */
  height: auto;
  display: block;
}
a {
  color: var(--cian-tinta);
  text-underline-offset: 3px;
}
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--cian-tinta);
  outline-offset: 3px;
  border-radius: 5px;
}

.env {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 22px;
}
.banda {
  padding-block: clamp(52px, 7vw, 92px);
}
.banda--hondo {
  background: var(--papel-hondo);
}

.rotulo {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--naranja-tinta);
}
.bajada {
  font-size: 1.15rem;
  color: var(--tinta-suave);
  margin-top: 16px;
}

/* ── barra ─────────────────────────────────────────────────────────────── */
.barra {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--papel) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}
.barra .env {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
}
.marca {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-marca);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--cian-tinta);
  text-decoration: none;
  letter-spacing: -0.03em;
}
.marca img {
  width: 30px;
  height: auto;
}
.barra nav {
  margin-left: auto;
  display: flex;
  gap: 24px;
  align-items: center;
}
.barra nav a {
  color: var(--tinta-suave);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.96rem;
  white-space: nowrap;
}
.barra nav a:hover,
.barra nav a[aria-current="page"] {
  color: var(--naranja-tinta);
}
@media (max-width: 820px) {
  .barra nav {
    gap: 16px;
    font-size: 0.9rem;
  }
  .barra nav a.solo-ancho {
    display: none;
  }
}

/* ── botones ───────────────────────────────────────────────────────────── */
.botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.boton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 27px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1.03rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.14s ease;
}
.boton:hover {
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .boton:hover,
  .puerta:hover {
    transform: none;
  }
}
/* Naranja con texto tinta: es la combinación que el manual permite, y encima
   es la que más se parece al logo. */
.boton--naranja {
  background: var(--naranja);
  color: #16202b;
  box-shadow: var(--sombra);
}
.boton--cian {
  background: var(--cian-hondo);
  color: #ffffff;
  box-shadow: var(--sombra);
}
.boton--linea {
  border-color: var(--borde);
  color: var(--tinta);
  background: var(--superficie);
}
.boton--claro {
  background: #ffffff;
  color: #12678f;
}
/* Los dos de la portada, pensados para ir SOBRE el naranja. */
.boton--tinta {
  background: #16202b;
  color: #ffffff;
}
.boton--blanco {
  background: #ffffff;
  color: #16202b;
  border-color: rgba(22, 32, 43, 0.15);
}

/* Una palabra en cian dentro de un titular, como el «PARANÁ» de las piezas.
   Sólo sobre fondo claro: el cian tinta da 6,3:1 sobre papel. */
.acento {
  color: var(--cian-tinta);
}
.tapa--cian .acento,
.tapa--naranja .acento,
.tapa--celeste .acento {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.16em;
}

/* ── portada ───────────────────────────────────────────────────────────── */
/* La portada va en NARANJA lleno, como las piezas de Instagram: es el color con
   el que la marca se reconoce de lejos.

   🔴 Pero el texto va TINTA, no blanco. Blanco sobre naranja da 2,41:1 y el
   mínimo legible es 4,5 — es exactamente el error que el manual de marca se
   escribió para corregir. Tinta sobre este naranja da 6,6:1. El blanco de las
   piezas funciona porque allá va sobre CIAN, que sí lo aguanta. */
.portada {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 6vw, 84px) clamp(52px, 6vw, 88px);
  background: linear-gradient(135deg, #f8b44e 0%, #f18f28 46%, #e07b12 100%);
  color: #16202b;
}
/* Los círculos sueltos del fondo de las piezas, apenas insinuados. */
.portada::before {
  content: "";
  position: absolute;
  inset: -30% -14% auto auto;
  width: min(680px, 74vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 66%);
  border-radius: 50%;
  pointer-events: none;
}
.portada .bajada {
  color: #4d3006;
}
.portada .telefono {
  box-shadow: 0 30px 70px -20px rgba(70, 40, 5, 0.55);
}
.portada .env {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
@media (max-width: 880px) {
  .portada .env {
    grid-template-columns: 1fr;
  }
}
.sello {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #a8500a;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.84rem;
  font-weight: 600;
  margin-bottom: 20px;
}

/* El teléfono: marco dibujado, captura real adentro. */
.telefono {
  position: relative;
  width: min(310px, 76vw);
  margin-inline: auto;
  border-radius: 34px;
  padding: 10px;
  background: linear-gradient(160deg, #253340, #16202b);
  box-shadow: 0 26px 60px -22px rgba(22, 32, 43, 0.55);
}
.telefono img {
  border-radius: 25px;
  width: 100%;
}
.telefono::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.25);
}

/* ── las tres puertas ──────────────────────────────────────────────────── */
.puertas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 880px) {
  .puertas {
    grid-template-columns: 1fr;
  }
}
.puerta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 30px 26px 26px;
  border-radius: var(--radio);
  text-decoration: none;
  transition: transform 0.16s ease;
  min-height: 100%;
}
.puerta:hover {
  transform: translateY(-4px);
}
.puerta h3 {
  font-size: 1.42rem;
}
.puerta p {
  font-size: 1rem;
  margin: 0;
}
.puerta .flecha {
  margin-top: auto;
  padding-top: 18px;
  font-weight: 600;
  font-size: 0.97rem;
}
/* Cada puerta lleva su color, y ése es el color de su página. */
.puerta--entidad {
  background: var(--cian-hondo);
  color: #ffffff;
}
.puerta--entidad p {
  color: #cfe8f5;
}
.puerta--comercio {
  background: var(--naranja);
  color: #16202b;
}
.puerta--comercio p {
  color: #5b3a10;
}
.puerta--socio {
  background: var(--cian);
  color: #16202b;
}
.puerta--socio p {
  color: #0d4460;
}

/* ── pasos ─────────────────────────────────────────────────────────────── */
.pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 760px) {
  .pasos {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
.paso .n {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--naranja-tinta);
  letter-spacing: 0.1em;
}
.paso h3 {
  margin-top: 6px;
}
.paso p {
  color: var(--tinta-suave);
  font-size: 1rem;
  margin-top: 5px;
}

/* ── cabecera de las páginas internas ──────────────────────────────────── */
.tapa {
  padding-block: clamp(46px, 6vw, 78px);
}
.tapa .rotulo {
  opacity: 0.85;
}
.tapa--cian {
  background: var(--cian-hondo);
  color: #ffffff;
}
.tapa--cian .rotulo,
.tapa--cian .bajada {
  color: #cfe8f5;
}
.tapa--naranja {
  background: var(--naranja);
  color: #16202b;
}
.tapa--naranja .rotulo,
.tapa--naranja .bajada {
  color: #5b3a10;
}
.tapa--celeste {
  background: var(--cian);
  color: #16202b;
}
.tapa--celeste .rotulo,
.tapa--celeste .bajada {
  color: #0d4460;
}
.volver {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 0.93rem;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  opacity: 0.8;
}

/* ── listas y tarjetas ─────────────────────────────────────────────────── */
.lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.lista li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
}
.tilde {
  width: 24px;
  height: 24px;
  margin-top: 2px;
}
.lista b {
  font-weight: 600;
}
.lista span {
  color: var(--tinta-suave);
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 16px;
}
.ficha {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ficha h3 {
  font-size: 1.08rem;
}
.ficha p {
  font-size: 0.95rem;
  color: var(--tinta-suave);
  margin: 0;
}
.ficha .icono {
  width: 30px;
  height: 30px;
  margin-bottom: 6px;
}

.doble {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 880px) {
  .doble {
    grid-template-columns: 1fr;
  }
}

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2px;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.cifra {
  background: var(--superficie);
  padding: 20px 18px;
}
.cifra .dato {
  font-family: var(--f-marca);
  font-weight: 700;
  font-size: 1.95rem;
  line-height: 1;
  color: var(--cian-tinta);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 6px;
}
.cifra p {
  font-size: 0.92rem;
  color: var(--tinta-suave);
}
.fuente {
  font-size: 0.83rem;
  color: var(--tinta-suave);
  margin-top: 14px;
  /* 🔴 **La excepción al `max-width: 62ch` de los párrafos** *(Eztevan, 16-sep-2026)*. Esa medida
     existe para que un texto largo se lea sin que el ojo se pierda al saltar de renglón, y para
     prosa está bien. Pero esto no es prosa: es el pie de las cifras de arriba, y un pie que
     termina antes que el bloque que explica se ve como si fuera de otra cosa. Sus bordes tienen
     que coincidir con los del recuadro que describe. */
  max-width: none;
}

.aparte {
  border-left: 4px solid var(--naranja);
  padding: 6px 0 6px 18px;
  color: var(--tinta-suave);
  font-size: 0.99rem;
  max-width: 68ch;
}
.aparte strong {
  color: var(--tinta);
}

/* ── contacto ──────────────────────────────────────────────────────────── */
/* 🔴 **Cuatro columnas fijas y no `auto-fit`, porque los canales son CINCO.**
   Con `auto-fit` entraban cuatro y el quinto quedaba solo en un renglón, con el
   ancho de los cuatro: una tarjeta huérfana que se lee como un error de
   maquetado. Y no se arregla cambiando el `minmax` — cinco es primo, así que
   con cualquier número de columnas menos 1 o 5 va a sobrar alguno.

   La salida no es de CSS sino de jerarquía: **el WhatsApp sale de la fila y va
   a lo ancho**, que además es el canal que queremos que usen —«la forma más
   rápida» lo dice el propio texto—, y abajo quedan cuatro parejos, en dos y dos.

   ⚠️ **Y son dos columnas y no cuatro**: con cuatro entraban, pero cada tarjeta
   quedaba de 217 px y las direcciones de correo se partían al medio
   —«comercios@soysocio.co / m.ar»—. Una dirección cortada en dos renglones no se
   puede dictar por teléfono ni copiar de un vistazo, y el que la lee tiene
   setenta años. */
.canales {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 640px) {
  .canales {
    grid-template-columns: 1fr;
  }
}
.canal {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 19px;
  border-radius: var(--radio);
  background: var(--superficie);
  border: 1px solid var(--borde);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.16s ease;
}
.canal:hover {
  border-color: var(--naranja);
}

/* El destacado: ocupa el renglón entero y lleva el velo naranja de la marca.
   ⚠️ Va acá abajo y no junto a `.canales`: pesa lo mismo que `.canal` —una clase
   cada una— así que decide el orden, y puesto arriba el fondo y el borde se los
   comía `.canal` sin ningún error a la vista. */
.canal--principal {
  grid-column: 1 / -1;
  background: var(--naranja-velo);
  border-color: var(--naranja);
  align-items: center;
}
.canal--principal svg {
  width: 34px;
  height: 34px;
}
.canal--principal .que {
  font-size: 1.1rem;
}
.canal svg {
  width: 26px;
  height: 26px;
  flex: none;
  margin-top: 1px;
}
.canal .que {
  font-weight: 600;
  display: block;
}
.canal .dir {
  color: var(--tinta-suave);
  font-size: 0.92rem;
  word-break: break-word;
}

/* ── pie ───────────────────────────────────────────────────────────────── */
.pie {
  background: var(--papel-hondo);
  border-top: 1px solid var(--borde);
  padding-block: 40px 34px;
}
.pie-alto {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--borde);
}
.pie-alto img {
  width: 168px;
}
.pie-alto nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.pie-alto nav a {
  color: var(--tinta-suave);
  text-decoration: none;
  font-size: 0.95rem;
}
/* El bloque fiscal: el banner de ARCA a la izquierda y la letra chica al lado. */
.fiscal {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 20px;
}
.fiscal img {
  width: 54px;
  flex: none;
}

/* Los datos fiscales van chicos, como se pidió, pero por encima del piso
   legible: 0,78rem sobre este fondo sigue pasando el contraste. */
.legales {
  margin-top: 20px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--tinta-suave);
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 84ch;
  margin-top: 0;
}
.legales a {
  color: var(--tinta-suave);
}
.legales .cuit {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

.saltar {
  position: absolute;
  left: -9999px;
}
.saltar:focus {
  position: static;
  display: inline-block;
  margin: 10px;
}

/* ── la cinta de comercios adheridos ───────────────────────────────────── */
/* El «muro de logos» que usa cualquier sitio de software para decir «esto ya
   lo usa gente», traducido a un club de comercios de barrio: acá los nombres
   valen más que los logos, porque el que mira reconoce la panadería de su
   cuadra y no reconocería su isotipo.

   🔴 **Sin una línea de JavaScript, y no por purismo.** El portal se sirve con
   `script-src 'none'`; la cinta se mueve con `@keyframes` y se rellena desde el
   servidor con `scripts/cinta_de_comercios.py`. Ver ese archivo.

   Son DOS pistas idénticas, una al lado de la otra. Cada una se corre su ancho
   completo y vuelve a cero: cuando la primera termina de salir por la
   izquierda, la segunda está exactamente donde estaba la primera al empezar, y
   el salto no se ve. La copia va con `aria-hidden` porque para un lector de
   pantalla sería la lista dicha dos veces. */
.franja-cinta {
  padding-block: clamp(30px, 4vw, 44px);
  background: var(--superficie);
  border-block: 1px solid var(--borde);
}
.cinta-alto {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.cinta-alto .rotulo {
  margin: 0;
}
.cinta-alto .cuenta {
  font-size: 0.92rem;
  color: var(--tinta-suave);
}
/* El botón no se encoge y el rótulo sí: si el ancho no alcanza, lo que se parte
   en dos renglones es el texto, y el botón se va entero a la línea de abajo. */
.cinta-alto > div {
  min-width: 0;
  flex: 1 1 16rem;
}
.pausa-cinta-boton {
  flex: none;
  margin-left: auto;
}

.cinta {
  display: flex;
  gap: var(--paso-cinta, 14px);
  /* ⚠️ **El recorte va acá y no en la sección entera.** Lo único que tiene que
     quedar recortado es la cinta; con el `overflow` puesto en `.franja-cinta`,
     cualquier cosa del encabezado que un día se pase de largo —el botón de
     pausa es la candidata— desaparece sin dejar rastro en lugar de reacomodarse.
     Un `overflow` de más recorta lo que nadie quería recortar. */
  overflow: hidden;
  /* El degradado de los bordes: las píldoras entran y salen desvanecidas en vez
     de aparecer cortadas contra el filo de la pantalla. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.cinta-pista {
  display: flex;
  gap: var(--paso-cinta, 14px);
  list-style: none;
  margin: 0;
  padding: 0;
  /* `flex: none` es lo que impide que flexbox comprima la pista para que entre:
     tiene que medir su ancho natural, o el desplazamiento no cierra la vuelta. */
  flex: none;
  /* `linear` y no `ease`: una cinta con aceleración parece rota, no animada. */
  animation: correr-cinta var(--vuelta-cinta, 64s) linear infinite;
  will-change: transform;
}
@keyframes correr-cinta {
  to {
    transform: translateX(calc(-100% - var(--paso-cinta, 14px)));
  }
}

.pastilla {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* El hueco de la izquierda es para el punto, que va posicionado y no ocupa lugar. */
  padding: 13px 22px 13px 30px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--papel);
  white-space: nowrap;
}
.pastilla-nombre {
  font-family: var(--f-marca);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}
.pastilla-pie {
  font-size: 0.79rem;
  color: var(--tinta-suave);
}
/* El punto naranja de la izquierda, que es lo que le da ritmo a la fila.
   ⚠️ Va con `left`/`top` puestos y no con márgenes negativos: un elemento
   absoluto sin coordenadas cae en su «posición estática», que adentro de un
   contenedor flex es la esquina del contenido — quedaba pegado arriba en vez de
   centrado, y con dos renglones de texto la diferencia se ve. */
.pastilla::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--naranja);
}

/* ⚠️ **La pausa no es un adorno: es WCAG 2.2.2.** Cualquier cosa que se mueva
   sola más de cinco segundos tiene que poder detenerse, y acá encima el usuario
   es un socio mayor. Se hace con una casilla escondida y su etiqueta —HTML y
   CSS, sin JavaScript—, que además se opera con el teclado. */
.pausa-cinta {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pausa-cinta-boton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tinta-suave);
  border: 1px solid var(--borde);
  background: var(--papel);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  user-select: none;
}
.pausa-cinta-boton:hover {
  border-color: var(--naranja);
  color: var(--tinta);
}
/* 🔴 **La casilla vive suelta arriba de la sección, y no al lado del botón.**
   Para poder frenar la cinta, el `:checked` tiene que poder ALCANZARLA por CSS,
   y los dos únicos caminos son el hermano (`~`) y el ascendente con `:has()`.
   La casilla adentro del encabezado no es hermana de `.cinta` —está dos niveles
   más adentro—, así que el selector no llegaba y el botón no hacía nada. El
   `label` sí puede estar lejos: lo une el `for`. */
.franja-cinta:has(.pausa-cinta:focus-visible) .pausa-cinta-boton {
  outline: 3px solid var(--cian-tinta);
  outline-offset: 3px;
}
/* El rótulo del botón cambia con el estado: dice lo que va a hacer, no en cuál
   está. «Pausar» mientras corre, «Reanudar» cuando está detenida. */
.pausa-cinta-boton .cuando-anda {
  display: inline;
}
.pausa-cinta-boton .cuando-para {
  display: none;
}
.franja-cinta:has(.pausa-cinta:checked) .pausa-cinta-boton .cuando-anda {
  display: none;
}
.franja-cinta:has(.pausa-cinta:checked) .pausa-cinta-boton .cuando-para {
  display: inline;
}
.pausa-cinta:checked ~ .cinta .cinta-pista {
  animation-play-state: paused;
}
/* Y también se detiene al pasar el mouse o al llegar con el teclado. */
.cinta:hover .cinta-pista,
.cinta:focus-within .cinta-pista {
  animation-play-state: paused;
}

/* 🔴 Con movimiento reducido la cinta **no se ralentiza: se apaga.** El
   desplazamiento horizontal continuo es un disparador documentado de migraña y
   de vértigo. Queda una grilla de píldoras quieta, que dice exactamente lo
   mismo, y la copia sobra. */
@media (prefers-reduced-motion: reduce) {
  .cinta {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .cinta {
    /* Quieta ya no la recorta nada, así que necesita el mismo margen lateral que
       el resto del sitio: corriendo se lo daba el degradado de los bordes. */
    padding-inline: 22px;
    max-width: var(--ancho);
    margin-inline: auto;
  }
  .cinta-pista {
    animation: none;
    flex-wrap: wrap;
    flex: 1 1 auto;
  }
  .cinta-pista[aria-hidden="true"] {
    display: none;
  }
  .pausa-cinta-boton {
    display: none;
  }
}

/* ── señales de confianza, pegadas al botón ────────────────────────────── */
/* Van JUNTO a la llamada a la acción y no en el pie, que es donde suelen
   terminar. Son objeciones —«¿cuánto me sale?», «¿tengo que instalar algo?»,
   «¿quiénes son?»— y una objeción se contesta en el momento en que aparece: si
   está tres pantallas más abajo, el que dudó ya se fue. */
.confianza {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 26px;
  padding: 0;
  list-style: none;
  font-size: 0.93rem;
  font-weight: 500;
}
.confianza li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.confianza svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* El botón de la barra. Que la acción principal esté siempre a mano es lo que
   separa un folleto de un sitio que vende.

   🔴 **El color va repetido acá, y no es por gusto.** `.barra nav a` pinta los
   enlaces de la barra en gris y pesa más que `.boton--cian` —dos clases y un
   tipo contra una clase—, así que el botón nacía con letra cian sobre fondo
   cian: 1,2:1, un botón que se ve pero no se lee. El selector de abajo empata
   en especificidad y gana por venir después. */
.barra nav a.boton {
  padding: 9px 18px;
  font-size: 0.92rem;
  box-shadow: none;
}
.barra nav a.boton--cian,
.barra nav a.boton--cian:hover {
  color: #ffffff;
}
@media (max-width: 640px) {
  .barra .boton {
    display: none;
  }
}

/* ── la banda de cierre ────────────────────────────────────────────────── */
.cierre {
  background: var(--cian-hondo);
  color: #ffffff;
  padding-block: clamp(54px, 7vw, 88px);
}
.cierre h2 {
  max-width: 22ch;
}
.cierre .bajada {
  color: #cfe8f5;
}
.cierre .confianza {
  color: #cfe8f5;
}

/* ── refinamientos del sistema ─────────────────────────────────────────── */
/* Las tarjetas levantan apenas al pasar por encima y marcan el borde en el
   color de su sección. Es el detalle que hace que una grilla se sienta viva sin
   moverse de lugar. */
.ficha {
  transition:
    border-color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}
.ficha:hover {
  border-color: var(--naranja);
  transform: translateY(-3px);
  box-shadow: var(--sombra);
}
@media (prefers-reduced-motion: reduce) {
  .ficha:hover {
    transform: none;
  }
}
.puerta {
  box-shadow: 0 1px 2px rgba(22, 32, 43, 0.06), 0 12px 30px -18px rgba(22, 32, 43, 0.4);
}
/* La flecha de la puerta se corre al pasar por encima: dice «acá se entra». */
.puerta .flecha::after {
  content: "→";
  display: inline-block;
  /* El espacio va de margen y no adentro del `content`: el que va en el texto
     generado se pierde contra el borde de la caja en línea y la flecha queda
     pegada a la última letra. */
  margin-left: 0.4em;
  transition: transform 0.16s ease;
}
.puerta:hover .flecha::after {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .puerta:hover .flecha::after {
    transform: none;
  }
}

/* Los pasos, numerados con una pastilla en vez de un número suelto. */
.paso {
  padding-top: 20px;
  border-top: 2px solid var(--naranja);
}
.paso .n {
  display: inline-block;
  font-weight: 600;
  color: var(--naranja-tinta);
}

/* ── acceso ────────────────────────────────────────────────────────────── */
/* El enlace de la barra que lleva a `/acceso`. Va con marco y no como un
   enlace más: es la puerta de servicio —entra el que YA es cliente— y tiene que
   encontrarse de un vistazo sin competir con la llamada a la acción de al lado,
   que es la que le habla al que todavía no lo es. */
.barra nav a.acceso-barra {
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--tinta);
  font-weight: 600;
}
.barra nav a.acceso-barra:hover,
.barra nav a.acceso-barra[aria-current="page"] {
  border-color: var(--cian-tinta);
  color: var(--cian-tinta);
}
/* En el teléfono la barra ya está apretada: se queda el acceso, que es lo que
   alguien vino a buscar, y se va el saludo. */
@media (max-width: 560px) {
  .barra nav a.acceso-barra {
    padding: 6px 12px;
  }
}

/* Las dos puertas del acceso son dos, no tres: que ocupen la mitad cada una. */
.puertas--dos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 880px) {
  .puertas--dos {
    grid-template-columns: 1fr;
  }
}
.puerta-icono {
  display: block;
  margin-bottom: 6px;
}
.puerta-icono svg {
  width: 30px;
  height: 30px;
}

/* ── la barra en pantallas chicas ──────────────────────────────────────── */
/* 🔴 **Con «Acceso» puesto, en un teléfono la barra ya no entra**: la marca con
   su nombre escrito (140 px) más los tres enlaces de sección y el acceso pasan
   de los 346 px útiles de un teléfono de 390, y lo que se veía era el logotipo
   montado encima de «Entidades».

   Lo que sale es el NOMBRE, no el isotipo: el logo solo alcanza para volver al
   inicio —es lo que hace cualquier sitio—, y el acceso es justamente lo que
   alguien vino a buscar desde el teléfono. El `aria-label` del enlace conserva
   el nombre para quien no ve el ícono. */
@media (max-width: 620px) {
  .marca-nombre {
    display: none;
  }
  .barra .env {
    gap: 12px;
  }
  .barra nav {
    gap: 13px;
    font-size: 0.88rem;
  }
}

/* Y por debajo de los 430 px ya no alcanza ni sin el nombre: en un teléfono de
   360 los cuatro enlaces más el isotipo suman 373 px contra 316 útiles, y lo que
   se pierde es el logo, empujado fuera de la barra.
   ⇒ La barra pasa a dos renglones: el logo arriba y los enlaces repartidos
   abajo. Nada se achica hasta volverse ilegible y nada se esconde. */
@media (max-width: 430px) {
  .barra .env {
    flex-wrap: wrap;
    min-height: 0;
    padding-block: 10px;
    row-gap: 10px;
  }
  .barra nav {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }
}

/* ── resaltar una ciudad de la cinta ───────────────────────────────────── */
/* ⭐ **Resalta, no filtra.** Tocar «Paraná» no esconde el resto: pinta los de
   Paraná y apaga los demás. Esconderlos cambiaría el ancho de la pista y la
   vuelta quedaría con huecos —con seis comercios de una ciudad chica, media
   pantalla vacía—, y el que mira perdería la referencia de cuántos hay.

   🔴 Las reglas de cada ciudad NO están acá: las escribe
   `scripts/cinta_de_comercios.py` adentro de la página, porque hace falta una
   por ciudad y el juego de ciudades sale de la base. Acá está sólo lo que no
   depende de cuáles son. */
.filtro-ciudad {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ciudades {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.ciudad-boton {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--tinta-suave);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 7px 15px;
  cursor: pointer;
  user-select: none;
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease;
}
.ciudad-boton:hover {
  border-color: var(--naranja);
  color: var(--tinta);
}
.franja-cinta:has(.filtro-ciudad:focus-visible) .ciudad-boton {
  outline: none;
}
.filtro-ciudad:focus-visible ~ .env .ciudades .ciudad-boton {
  outline: 2px dashed var(--cian-tinta);
  outline-offset: 2px;
}
/* La píldora apagada no desaparece ni deja de ser tocable: sigue siendo un
   comercio adherido, sólo que no es el que se está mirando. */
.pastilla {
  transition:
    opacity 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

/* ── la píldora como enlace ────────────────────────────────────────────── */
/* Lleva a la vidriera del local: la misma pantalla que abre el QR de la puerta,
   que es pública y no le pide credencial a nadie. */
.pastilla-enlace {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
  color: inherit;
}
.pastilla-enlace:hover .pastilla-nombre {
  text-decoration: underline;
  text-underline-offset: 3px;
}