/* ==========================================================================
   Sitio público del Portal — directorio y ficha del negocio (spec 71 §6/§8).
   Lenguaje visual: Ácido v4.
   ========================================================================== */

/* ---------- Por qué esta página NO importa design/acido.css ----------
   La fuente canónica del sistema de diseño sigue siendo `design/acido.css`:
   este archivo no la reemplaza ni compite con ella, copia su CAPA DE TOKENS y
   nada más.

   El motivo de no enlazarla es de producto, no de gusto. `acido.css` pesa hoy
   ~138 KB e implementa el shell del ERP entero —riel, tablas ordenables,
   kanban, modales, cajón del asistente, bandeja de WhatsApp—; esta página usa
   ocho componentes. Es la PRIMERA impresión del producto, la abre gente que
   llega de un buscador, y muchas veces desde un teléfono con red mala: cargar
   el CSS de una aplicación que el visitante no va a ver nunca es render
   bloqueado a cambio de nada. Además es una superficie con su propia política
   de contenido y su propio ciclo de vida (spec 71 §7.1): atarla al CSS del ERP
   la haría romperse cada vez que el ERP crece.

   La regla que lo mantiene honesto: acá se copian TOKENS, jamás componentes
   nuevos. Todo componente vive primero en `design/acido.css` (regla de trabajo
   de la v4); lo de abajo son los que esta página realmente usa, con los mismos
   nombres de clase, para que un cambio del sistema se pueda portar leyendo dos
   archivos en paralelo y no adivinando. Si algún valor de token diverge del
   canónico, manda `design/acido.css`.
   ========================================================================== */

/* ---------- Tokens (copia literal de design/acido.css, revisión v4) ----------
   Rampa neutra de 12 pasos: --n-0 es el fondo más alejado del texto y --n-11 el
   texto más fuerte, en los dos temas. Por eso el mapeo semántico de más abajo
   es idéntico para ambos.

   Tema: esta superficie no tiene sesión ni localStorage (spec 71 §18), así que
   no hay conmutador que fije [data-theme] y el tema sale del sistema operativo
   del visitante. Se soportan los dos caminos: `prefers-color-scheme` (el que se
   usa hoy) y un `data-theme` explícito, por si algún día esta página se sirve
   dentro de un contexto que ya eligió tema. */
:root, :root[data-theme="dark"] {
 --n-0: #09090b; --n-1: #0f0f11; --n-2: #161619; --n-3: #1d1d21;
 --n-4: #27272a; --n-5: #33333a; --n-6: #45454d; --n-7: #5c5c66;
 --n-8: #90909b; --n-9: #b5b5bd; --n-10: #d7d7dc; --n-11: #fafafa;

 --acc: #a5b4fc;
 --acc-fill: #4f46e5;
 --acc-soft: rgba(99, 102, 241, .16);
 --acc-ink: #ffffff;

 --ok: #4ade80; --ok-bg: rgba(74, 222, 128, .14);
 --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .14);
 --bad: #fb7185; --bad-bg: rgba(251, 113, 133, .14);
 --info: #22d3ee; --info-bg: rgba(34, 211, 238, .13);

 --chart-track: #27272a;

 /* En oscuro la profundidad la da el tono de superficie más el borde: una
     sombra negra sobre un fondo casi negro no comunica nada, así que la sombra
     es sólo un halo de contención. */
 --elev-1: 0 2px 8px rgba(0, 0, 0, .45);
 --elev-2: 0 8px 28px rgba(0, 0, 0, .6);

 color-scheme: dark;
}

/* Tema claro: papel cálido. Se declara dos veces a propósito —una por elección
   explícita y otra por preferencia del sistema— porque una regla dentro de
   `@media` no se puede agrupar con una de fuera. */
:root[data-theme="light"] {
 --n-0: #f4f4f5; --n-1: #fafafa; --n-2: #fdfdfd; --n-3: #ffffff;
 --n-4: #e4e4e7; --n-5: #d4d4d8; --n-6: #b4b4bb; --n-7: #8f8f99;
 --n-8: #63636d; --n-9: #4a4a52; --n-10: #27272a; --n-11: #09090b;

 --acc: #5b4bd6;
 --acc-fill: #4f46e5;
 --acc-soft: rgba(79, 70, 229, .10);
 --acc-ink: #ffffff;

 --ok: #047857; --ok-bg: rgba(4, 120, 87, .11);
 --warn: #8f5209; --warn-bg: rgba(143, 82, 9, .11);
 --bad: #be123c; --bad-bg: rgba(190, 18, 60, .10);
 --info: #0e7490; --info-bg: rgba(14, 116, 144, .11);

 --chart-track: #e4e4e7;

 --elev-1: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .05);
 --elev-2: 0 4px 12px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .06);

 color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
 --n-0: #f4f4f5; --n-1: #fafafa; --n-2: #fdfdfd; --n-3: #ffffff;
 --n-4: #e4e4e7; --n-5: #d4d4d8; --n-6: #b4b4bb; --n-7: #8f8f99;
 --n-8: #63636d; --n-9: #4a4a52; --n-10: #27272a; --n-11: #09090b;

 --acc: #5b4bd6;
 --acc-fill: #4f46e5;
 --acc-soft: rgba(79, 70, 229, .10);
 --acc-ink: #ffffff;

 --ok: #047857; --ok-bg: rgba(4, 120, 87, .11);
 --warn: #8f5209; --warn-bg: rgba(143, 82, 9, .11);
 --bad: #be123c; --bad-bg: rgba(190, 18, 60, .10);
 --info: #0e7490; --info-bg: rgba(14, 116, 144, .11);

 --chart-track: #e4e4e7;

 --elev-1: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .05);
 --elev-2: 0 4px 12px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .06);

 color-scheme: light;
 }
}

/* Tokens semánticos: derivan de la rampa y son idénticos en los dos temas.
   Ningún selector de abajo usa --n-* directamente. */
:root {
 --bg-chrome: var(--n-0);
 --bg: var(--n-1);
 --surface: var(--n-2);
 --surface-2: var(--n-3);

 --line-soft: var(--n-4);
 --line: var(--n-5);
 --line-strong: var(--n-6);

 --ink-mut: var(--n-7);
 --mut: var(--n-8);
 --ink-2: var(--n-9);
 --ink: var(--n-11);

 --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
 --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

 --fs-1: .6875rem; /* 11px — rótulos en mayúsculas */
 --fs-2: .75rem; /* 12px — meta, notas */
 --fs-3: .8125rem; /* 13px — UI densa */
 --fs-4: .875rem; /* 14px — cuerpo */
 --fs-5: 1rem; /* 16px — prosa de lectura */
 --fs-6: 1.25rem; /* 20px — título de sección */
 --fs-7: 1.5rem; /* 24px — título de página */
 --ls-rotulo: .08em;
 --ls-titulo: -.01em;
 --body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
 "Helvetica Neue", Arial, sans-serif;
 --display: var(--body);
 --h-weight: 600;

 --r-sm: 4px;
 --r: 6px;
 --r-lg: 10px;
 --r-pill: 999px;

 --anillo: 0 0 0 3px var(--acc-soft);

 --t-fast: 160ms ease-out;
 --t-med: 300ms ease-out;
 --t-slow: 500ms ease-out;
}

/* ---------- Tokens propios de esta superficie ----------
   Tres, y cada uno tiene un motivo que sólo aplica acá; el resto sale del
   sistema tal cual. */
:root {
 /* Alzada de control. El eje de densidad de la v4 (compacta 30 / normal 34 /
     cómoda 40) está pensado para quien captura doscientas partidas por día con
     un mouse. Acá es al revés: el visitante toca con el pulgar y viene de un
     buscador o de un WhatsApp, así que se fija en 44px, el objetivo táctil que
     la spec 23 exige en superficie pública. Fija también la alzada de <select>,
     que si no renderiza distinto de un <input> y desalinea la fila entera. */
 --control-h: 44px;

 /* Título de portada. Es lo único de la página que no es "una pantalla del
     ERP" sino una portada, y --fs-7 (24px) se ve tímido a 1180px de ancho. Va
     de --fs-7 en un teléfono a 36px en escritorio, sin escalones ni media
     queries que se contradigan. */
 --fs-portada: clamp(1.5rem, 1.05rem + 2vw, 2.25rem);

 /* Ancho de columna del directorio: más angosto que el .page del ERP (1180px)
     porque acá se lee, no se opera. */
 --ancho-directorio: 940px;

 --logo-h: 24px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 background: var(--bg);
 color: var(--ink);
 font: var(--fs-4)/1.55 var(--body);
 -webkit-text-size-adjust: 100%;
 min-height: 100vh;
 display: flex; flex-direction: column;
}
body > main { flex: 1; }
::selection { background: var(--acc-fill); color: var(--acc-ink); }

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); }

a { color: var(--acc); text-decoration: none; transition: color var(--t-fast); }
a:hover { text-decoration: underline; }

/* Foco visible universal (spec 23). Los controles de formulario lo resuelven
   con borde + anillo, más abajo. */
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: var(--r-sm); }

img { max-width: 100%; }

/* [hidden] tiene que ganarle a cualquier clase que fije `display` (.page fija
   `display: grid`, y sin esto la vista "oculta" se sigue mostrando: exactamente
   el bug de la ficha del negocio apilándose debajo del directorio). */
[hidden] { display: none !important; }

/* ---------- Utilidades ---------- */
.fade-in { animation: fade-in var(--t-med) backwards; }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Saltar al contenido (spec 23 §3): primer elemento del orden de tabulación,
   fuera de pantalla hasta que recibe foco. */
.skip-link {
 position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: 100;
 transform: translateY(-200%);
 background: var(--acc-fill); color: var(--acc-ink);
 padding: var(--sp-2) var(--sp-4); border-radius: var(--r);
 font-size: var(--fs-3); font-weight: 600;
 transition: transform var(--t-fast);
}
.skip-link:focus { transform: none; text-decoration: none; }

/* ---------- Barra del host de un negocio ----------
   Una sola cosa: la puerta al ERP para el personal del negocio (spec 72). Va
   al ras y en tono secundario porque quien más ve esta página es un cliente
   del negocio, para quien este enlace no es — y la página se le vendió al
   negocio para mostrar lo suyo, no para anunciar por dónde entra su personal. */
.barra-tenant {
 display: flex; justify-content: flex-end;
 padding: var(--sp-3) var(--sp-5);
}
.barra-tenant a {
 font-size: var(--fs-3); color: var(--mut); text-decoration: none;
 padding: var(--sp-1) var(--sp-2); border-radius: var(--r);
 transition: color var(--t-fast), background var(--t-fast);
}
.barra-tenant a:hover { color: var(--ink); background: var(--surface-2); }
.barra-tenant a:focus-visible { outline: none; box-shadow: var(--anillo); color: var(--ink); }

/* ---------- Topbar ----------
   El marco de la aplicación va en --bg-chrome, no en relleno de acento: en el
   ERP la barra es cromo y el acento significa "acción", y una banda de acento
   de lado a lado en una portada pública se come al único botón que importa
   (Buscar). El isotipo sí lleva el acento — es la marca. */
.topbar {
 display: flex; align-items: center; gap: var(--sp-4);
 padding: var(--sp-3) var(--sp-5);
 background: var(--bg-chrome); color: var(--ink);
 border-bottom: 1px solid var(--line-soft);
}
.topbar .logo {
 display: inline-flex; align-items: center; gap: var(--sp-2);
 color: var(--ink); font-weight: 700; font-size: var(--fs-5);
 letter-spacing: var(--ls-titulo); min-height: var(--sp-6);
}
.topbar .logo:hover { color: var(--acc); text-decoration: none; }
.topbar .logo svg { height: var(--logo-h); width: auto; flex: none; color: var(--acc); }
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); }
.topbar nav a {
 display: inline-flex; align-items: center; padding: var(--sp-2) var(--sp-3);
 min-height: var(--sp-6); border-radius: var(--r-pill);
 color: var(--ink-2); font-size: var(--fs-3); font-weight: 650;
 transition: color var(--t-fast), background var(--t-fast);
}
.topbar nav a:hover { color: var(--acc); background: var(--acc-soft); text-decoration: none; }

/* ---------- Layout ---------- */
.page {
 padding: var(--sp-5); display: grid; gap: var(--sp-5);
 max-width: var(--ancho-directorio); margin: 0 auto; width: 100%;
}
/* Sin esto, un solo bloque ancho estira la página entera y arrastra con él a
   todo lo demás. */
.page > * { min-width: 0; }

/* ---------- Botones ---------- */
.btn {
 display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
 min-height: var(--control-h); padding: 0 var(--sp-5);
 font: inherit; font-size: var(--fs-3); font-weight: 600; line-height: 1.2;
 border: 1px solid var(--line); background: var(--surface); color: var(--ink);
 border-radius: var(--r); cursor: pointer; white-space: nowrap;
 transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.btn:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.btn.pri { background: var(--acc-fill); border-color: var(--acc-fill); color: var(--acc-ink); }
.btn.pri:hover { filter: brightness(1.08); color: var(--acc-ink); }
.btn:disabled { border-color: var(--line); color: var(--ink-mut); cursor: not-allowed; background: transparent; filter: none; }

/* ---------- Formularios ---------- */
.field { display: grid; gap: var(--sp-2); align-content: start; }
.field label, .field > span:first-child {
 font-size: var(--fs-2);
 color: var(--mut); font-weight: 500;
}
.field input, .field select {
 font: inherit; font-size: var(--fs-4);
 height: var(--control-h);
 background: var(--surface); color: var(--ink);
 border: 1px solid var(--line); border-radius: var(--r);
 padding: 0 var(--sp-3); width: 100%;
 transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input::placeholder { color: var(--mut); }
.field input:hover, .field select:hover { border-color: var(--line-strong); }
/* Foco de control: borde MÁS anillo. El cambio de borde solo, sobre el fondo casi negro, es
   indistinguible en un monitor mediocre (v4 §8). */
.field input:focus-visible, .field select:focus-visible {
 outline: none; border-color: var(--acc); box-shadow: var(--anillo);
}

/* ---------- Pill (categorías y servicios) ---------- */
.pill {
 display: inline-flex; align-items: center; gap: var(--sp-1);
 font-size: var(--fs-2); font-weight: 650; color: var(--ink-2);
 border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3);
 border: 1px solid var(--line); border-left-width: 5px; border-left-color: var(--acc);
 background: transparent;
}

/* ---------- Panel ---------- */
.panel {
 background: var(--surface);
 border: 1px solid var(--line-soft); border-radius: var(--r);
 overflow: clip;
}
.panel > header {
 display: flex; align-items: center; gap: var(--sp-2);
 padding: var(--sp-3) var(--sp-4);
 border-bottom: 1px solid var(--line-soft);
 font-size: var(--fs-2); font-weight: 500; color: var(--mut);
}
.p-pad { padding: var(--sp-4); }

/* ---------- Toast / alerta ---------- */
.toast {
 display: flex; align-items: center; gap: var(--sp-2);
 border: 1px solid; border-radius: var(--r);
 padding: var(--sp-3) var(--sp-4); font-size: var(--fs-4); font-weight: 650;
 margin: 0;
}
.toast.warn { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }
.toast.bad { color: var(--bad); border-color: var(--bad); background: var(--bad-bg); }

/* ---------- Estado vacío ----------
   El titular va en caja normal y no en mayúsculas con tracking, al revés que en
   el ERP: acá las frases son largas ("No encontramos negocios con esos
   filtros") y una oración entera en mayúsculas se lee peor, sobre todo en un
   teléfono. */
.empty {
 border: 1px dashed var(--line); border-radius: var(--r);
 padding: var(--sp-7) var(--sp-4); text-align: center; color: var(--mut);
 background: var(--surface);
}
.empty strong {
 display: block; color: var(--ink); font-size: var(--fs-6);
 font-weight: var(--h-weight); letter-spacing: var(--ls-titulo);
 margin-bottom: var(--sp-2);
}
.empty p { margin: 0; font-size: var(--fs-4); }
.empty strong:focus-visible { outline: 2px solid var(--acc); outline-offset: var(--sp-1); }

.kv { color: var(--mut); font-size: var(--fs-3); margin: 0; }

/* ==========================================================================
   Directorio
   ========================================================================== */

.portada {
 display: grid; gap: var(--sp-4); justify-items: center; text-align: center;
 padding: var(--sp-7) 0 var(--sp-2);
}
.portada h1 {
 font-family: var(--display); font-weight: var(--h-weight);
 font-size: var(--fs-portada); letter-spacing: var(--ls-titulo);
 line-height: 1.15; margin: 0; max-width: 22ch;
}
.portada-sub {
 color: var(--ink-2); margin: 0; max-width: 52ch; font-size: var(--fs-5);
}

/* La caja de búsqueda: buscador y filtros son UNA pieza, no dos bloques
   sueltos flotando sobre el fondo. Superficie, no sombra — la elevación está
   reservada a capas flotantes (v4 §6). */
.buscador-grande,
.filtros-directorio { width: 100%; text-align: left; }

.buscador-grande {
 display: flex; gap: var(--sp-2); align-items: end;
 margin-top: var(--sp-2);
}
.buscador-grande .campo-buscar { flex: 1; }
.buscador-grande input { font-size: var(--fs-5); }
.buscador-grande .btn { padding: 0 var(--sp-6); }

.filtros-directorio {
 display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: var(--sp-3);
 align-items: end;
 padding-top: var(--sp-4); border-top: 1px solid var(--line-soft);
}
.filtros-directorio .btn { width: 100%; }

/* El botón de una fila de campos se alinea con los controles, no con los
   rótulos: es un grid propio que empuja su contenido al fondo de la fila. */
.campo-accion { display: grid; align-content: end; }

/* ---------- Resultados ---------- */
.resultado-meta { color: var(--mut); font-size: var(--fs-3); }

.lista-negocios {
 display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 gap: var(--sp-4);
}
.negocio-card {
 background: var(--surface);
 border: 1px solid var(--line-soft); border-radius: var(--r);
 padding: var(--sp-4); display: grid; gap: var(--sp-2); align-content: start;
 transition: border-color var(--t-fast), background var(--t-fast);
}
.negocio-card:hover { border-color: var(--acc); background: var(--surface-2); }
.negocio-card:focus-within { border-color: var(--acc); box-shadow: var(--anillo); }
.negocio-card h2 {
 margin: 0; font-size: var(--fs-6); font-weight: var(--h-weight);
 letter-spacing: var(--ls-titulo); line-height: 1.25;
}
.negocio-card h2 a { color: var(--ink); }
/* La tarjeta entera es el objetivo táctil del enlace: en un teléfono nadie
   apunta a dos palabras de título. */
.negocio-card h2 a::after { content: ""; position: absolute; inset: 0; }
.negocio-card { position: relative; }
.negocio-card h2 a:hover { color: var(--acc); text-decoration: none; }
.negocio-desc { color: var(--ink-2); font-size: var(--fs-4); margin: 0; }
.negocio-cats { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.negocio-lugar { color: var(--mut); font-size: var(--fs-3); margin: 0; }

.cargando { color: var(--mut); padding: var(--sp-6) 0; margin: 0; }

/* ---------- Paginación ---------- */
.paginacion {
 display: flex; align-items: center; justify-content: center;
 gap: var(--sp-4); padding-bottom: var(--sp-5); flex-wrap: wrap;
}
.pag-info { color: var(--mut); font-size: var(--fs-3); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Ficha del negocio
   ========================================================================== */

.negocio-breadcrumb { margin: 0; font-size: var(--fs-3); color: var(--mut); }
.negocio-header { display: grid; gap: var(--sp-3); }
.negocio-header h1 {
 margin: 0; font-family: var(--display); font-weight: var(--h-weight);
 font-size: var(--fs-portada); letter-spacing: var(--ls-titulo); line-height: 1.15;
}
.negocio-header h1:focus-visible { outline: 2px solid var(--acc); outline-offset: var(--sp-1); }
.negocio-header .negocio-desc { font-size: var(--fs-5); max-width: 60ch; }

.negocio-grid {
 display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
 gap: var(--sp-6); align-items: start;
}
.negocio-principal { display: grid; gap: var(--sp-6); align-content: start; }
/* Los h2 de la ficha son rótulos de bloque: la receta única de .rotulo. */
.negocio-principal h2, .negocio-aside h2 {
 font-size: var(--fs-2); font-weight: 500; color: var(--mut);
 margin: 0 0 var(--sp-2);
}
.negocio-cuerpo {
 white-space: pre-line; line-height: 1.65; margin: 0;
 font-size: var(--fs-5); max-width: 68ch;
}
.negocio-direccion { color: var(--ink-2); margin: 0; }
.seccion-negocio { display: grid; gap: var(--sp-2); }
.seccion-negocio p { margin: 0; }
.seccion-lista { margin: 0; padding-left: var(--sp-4); display: grid; gap: var(--sp-1); }

.galeria {
 display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 gap: var(--sp-2);
}
.galeria img {
 width: 100%; height: 140px; object-fit: cover;
 border-radius: var(--r); border: 1px solid var(--line-soft); display: block;
}
.medio-video {
 display: inline-flex; align-items: center; min-height: var(--control-h);
 font-weight: 650;
}

.negocio-aside { position: sticky; top: var(--sp-4); display: grid; gap: var(--sp-4); }
.contacto-card .p-pad { display: grid; gap: var(--sp-3); }
.contacto-card #btn-mostrar-contacto { width: 100%; }
.contacto-card p { margin: 0; }
#contacto-datos { display: grid; gap: var(--sp-2); }
/* Correo y teléfono son enlaces que se tocan con el pulgar. */
#contacto-datos a, .negocio-redes a {
 display: inline-flex; align-items: center; min-height: var(--sp-6);
 word-break: break-word;
}
.negocio-horario ul {
 margin: 0; padding-left: var(--sp-4); display: grid; gap: var(--sp-1);
 font-size: var(--fs-4);
}
.negocio-redes {
 display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
 margin: 0; padding-left: 0; list-style: none;
}

/* ---------- Error de ruta ----------
   El ".empty" es el estado vacío de una lista; una acción de navegación
   ("volver al directorio") no vive adentro, va como un enlace debajo. */
#vista-error { max-width: 620px; }
.volver-directorio { text-align: center; margin: 0; }
.volver-directorio a { display: inline-flex; align-items: center; min-height: var(--sp-6); }

/* ---------- Pie ---------- */
.footer-publico {
 padding: var(--sp-6) var(--sp-5);
 border-top: 1px solid var(--line-soft);
 text-align: center; color: var(--mut); font-size: var(--fs-3);
}
.footer-publico p { margin: 0 auto; max-width: 60ch; }
/* El enlace no se parte a mitad de frase en un renglón centrado: partido se
   lee como dos cosas distintas y su área de toque queda en dos pedazos. */
.footer-publico a { font-weight: 650; white-space: nowrap; }

/* ==========================================================================
   Responsive — esta página se abre sobre todo desde un teléfono.
   Verificado a 360px de ancho.
   ========================================================================== */
@media (max-width: 900px) {
  .negocio-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .negocio-aside { position: static; }
}

@media (max-width: 760px) {
  .topbar { padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); }
  .topbar .logo { font-size: var(--fs-4); }
  .page { padding: var(--sp-4); gap: var(--sp-4); }

  .portada { padding: var(--sp-5) 0 0; gap: var(--sp-3); }
  .portada-sub { font-size: var(--fs-4); }

  /* En una columna el botón deja de ser un vecino del campo y pasa a ser la
     acción del bloque: ancho completo, que es lo que se toca sin apuntar. */
  .buscador-grande { flex-direction: column; align-items: stretch; }
  .buscador-grande .btn { width: 100%; }

  .filtros-directorio { grid-template-columns: 1fr 1fr; }
  .filtros-directorio .campo-accion { grid-column: 1 / -1; }

  .lista-negocios { grid-template-columns: 1fr; }
  .footer-publico { padding: var(--sp-5) var(--sp-4); }
}

@media (max-width: 480px) {
  .filtros-directorio { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: 1fr 1fr; }
  .galeria img { height: 120px; }
  .paginacion { gap: var(--sp-3); }
  .paginacion .btn { padding: 0 var(--sp-4); }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
 animation-duration: .001ms !important; animation-iteration-count: 1 !important;
 transition-duration: .001ms !important; scroll-behavior: auto !important;
 }
}