/* Emprende Valledupar · mundo «Afiche de caseta».
   Tres tintas sobre papel: amarillo fluorescente, negro, fucsia; papel periódico crudo para campos y panel.
   Tipo de madera (Anton) para titulares y precios; condensada (Oswald) para datos; sans del sistema para leer. */

@font-face { font-family: "Anton"; src: url("/static/fonts/Anton-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("/static/fonts/Oswald-wght.ttf") format("truetype"); font-weight: 200 700; font-display: swap; }

:root {
  /* Tintas y papeles: el juego cerrado. */
  --amarillo: #fff200;
  --tinta: #141414;
  --fucsia: #ff1f8e;
  --fucsia-texto: #c8005f;        /* fucsia para texto sobre amarillo o crudo (≥4.5:1) */
  --crudo: #f2efe6;
  --crudo-hondo: #e4dfd0;
  --tinta-suave: #3d3a33;         /* texto secundario sobre crudo y amarillo */
  --crudo-suave: #cfc9b8;         /* texto secundario sobre negro */

  --f-madera: "Anton", "Oswald", "Arial Narrow", sans-serif;
  --f-datos: "Oswald", "Arial Narrow", sans-serif;
  --f-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --regla: 3px solid var(--tinta);
  --regla-gruesa: 6px solid var(--tinta);
  --punteado: 2px dashed var(--tinta);
  --registro: .08em;              /* desplazamiento de la segunda tinta: proporcional al texto */
  --salida: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--tinta) var(--crudo); }
body {
  margin: 0; font-family: var(--f-texto); font-size: 1.0625rem; line-height: 1.55;
  color: var(--tinta); background: var(--crudo); caret-color: var(--fucsia);
}
::selection { background: var(--fucsia); color: var(--tinta); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Solo los enlaces de texto cambian de color. Los componentes (tarjetas, filas, botones) conservan su tinta
   y marcan el hover con la sobreimpresión: fucsia sobre fucsia no se lee. */
a:not([class]):hover { color: var(--fucsia-texto); }
h1, h2, h3 { font-family: var(--f-madera); font-weight: 400; text-transform: uppercase; line-height: 1.04; letter-spacing: .005em; margin: 0 0 .4em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 7vw, 4.5rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--fucsia); outline-offset: 3px; }

.contenedor { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 760px) { .contenedor { padding: 0 32px; } }
.oculto, .oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--amarillo); padding: 8px 12px; z-index: 50; font-family: var(--f-datos); }
.saltar:focus { left: 8px; }
.en-linea { display: inline; }
.icono { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.icono--grande { width: 2.25rem; height: 2.25rem; }
.datos { font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Cabecera: franja negra */
.cabecera { background: var(--tinta); color: var(--crudo); position: sticky; top: 0; z-index: 20; }
.cabecera__fila { display: flex; align-items: center; gap: 12px 20px; min-height: 64px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.marca { display: inline-flex; align-items: stretch; font-family: var(--f-madera); font-size: 1.45rem; line-height: 1; text-transform: uppercase; text-decoration: none; letter-spacing: .01em; }
.marca span { padding: 6px 8px 5px; }
.marca__a { background: var(--amarillo); color: var(--tinta); }
.marca__b { background: var(--fucsia); color: var(--tinta); }
.marca:hover { color: inherit; }
.cabecera__nav { display: flex; align-items: center; gap: 18px; margin-left: auto; font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; }
.cabecera__nav a { text-decoration: none; color: var(--crudo); }
.cabecera__nav a:hover { color: var(--amarillo); }
.cabecera__nav .boton { background: var(--amarillo); color: var(--tinta); border-color: var(--amarillo); }
.cabecera__nav .boton:hover { background: var(--fucsia); border-color: var(--fucsia); color: var(--tinta); }
.cabecera .enlace { color: var(--crudo); font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; text-decoration: none; }
.cabecera .enlace:hover { color: var(--amarillo); }
.buscador { display: flex; }
.buscador input { flex: 1; min-width: 0; }
.buscador--mini { order: 3; flex-basis: 100%; border: 3px solid var(--crudo); }
.buscador--mini input { border: 0; padding: 8px 12px; background: var(--crudo); }
.buscador--mini button { border: 0; background: var(--amarillo); color: var(--tinta); padding: 0 14px; cursor: pointer; }
.buscador--mini button:hover { background: var(--fucsia); }
@media (min-width: 820px) { .buscador--mini { order: 0; flex: 1; flex-basis: auto; max-width: 440px; } }

/* ---------- Formularios y botones */
input, select, textarea {
  font: inherit; color: inherit; width: 100%; padding: 11px 12px; border: var(--regla); border-radius: 0;
  background: #fffdf6; font-size: max(16px, 1rem); /* evita el zoom de iOS */
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinta) 50%), linear-gradient(135deg, var(--tinta) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
textarea { resize: vertical; min-height: 120px; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--fucsia); outline-offset: 0; }
input::placeholder, textarea::placeholder { color: #6b675c; }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; accent-color: var(--tinta); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px;
  padding: 10px 20px; border: var(--regla); border-radius: 0; background: var(--tinta); color: var(--amarillo);
  font-family: var(--f-madera); font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--salida), color .18s var(--salida), transform .18s var(--salida);
}
.boton:hover { background: var(--fucsia); color: var(--tinta); }
.boton:active { transform: translateY(2px); }
.boton[disabled] { background: var(--crudo-hondo); color: #6b675c; border-color: #8a8577; cursor: not-allowed; }
.boton--secundario { background: transparent; color: var(--tinta); border-style: dashed; border-width: 2px; }
.boton--secundario:hover { background: var(--tinta); color: var(--amarillo); border-style: solid; }
.boton--chico { min-height: 38px; padding: 6px 12px; font-size: 1rem; }
.boton--grande { min-height: 58px; padding: 12px 26px; font-size: 1.45rem; }
.boton--ancho { width: 100%; }
.boton--whatsapp { background: var(--fucsia); color: var(--tinta); }
.boton--whatsapp:hover { background: var(--tinta); color: var(--amarillo); }
.boton--peligro { background: var(--tinta); color: var(--fucsia); }
.boton--peligro:hover { background: var(--fucsia); color: var(--tinta); }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.enlace:hover { color: var(--fucsia-texto); }
.enlace--peligro { color: var(--fucsia-texto); }
.botones { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }

.campo { margin-bottom: 20px; }
.campo label, .filtros__campo label { display: block; font-family: var(--f-datos); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; margin-bottom: 6px; }
.opcional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--tinta-suave); font-family: var(--f-texto); font-size: .9rem; }
.campo__ayuda { color: var(--tinta-suave); font-size: .92rem; margin: 6px 0 0; }
.campo__error { color: var(--fucsia-texto); font-size: .95rem; font-weight: 700; margin: 6px 0 0; }
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--fucsia); }
.casilla { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 6px 0; }
.casilla input { margin-top: .25em; flex: none; }
.casilla small { display: block; color: var(--tinta-suave); }
.grupo-casillas { display: grid; gap: 2px; }
fieldset { border: 0; padding: 0; margin: 0 0 28px; min-width: 0; }
legend { font-family: var(--f-madera); text-transform: uppercase; font-size: 1.5rem; margin-bottom: 14px; padding: 0; }
.formulario { max-width: 760px; }
.formulario > fieldset { border-top: var(--regla-gruesa); padding-top: 18px; }
.formulario fieldset legend { float: left; width: 100%; }
.formulario fieldset legend + * { clear: both; }
.formulario-corto { max-width: 480px; padding-top: 40px; padding-bottom: 56px; }
.fila-campos { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .fila-campos { grid-template-columns: 1fr 1fr; } }
.acciones { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.segmentado { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.segmentado legend { width: 100%; }
.segmentado label { cursor: pointer; }
.segmentado input { position: absolute; opacity: 0; }
.segmentado span { display: inline-block; padding: 8px 14px; border: var(--punteado); font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; }
.segmentado input:checked + span { background: var(--tinta); color: var(--amarillo); border-style: solid; }
.segmentado input:focus-visible + span { outline: 3px solid var(--fucsia); outline-offset: 2px; }
.input-corto { width: 76px; padding: 4px 6px; }
.intro { color: var(--tinta-suave); max-width: 62ch; }
.pie-form { margin-top: 22px; color: var(--tinta-suave); }

/* ---------- Avisos y estados: sellos de tinta */
.avisos { padding-top: 16px; }
.aviso { padding: 12px 16px; border: var(--regla); margin: 0 0 12px; background: #fffdf6; }
.aviso p:last-child, .aviso ul:last-child { margin-bottom: 0; }
.aviso--ok { background: var(--amarillo); }
.aviso--error { border-color: var(--fucsia); border-width: 3px; }
.aviso--error strong:first-child { color: var(--fucsia-texto); }
.aviso--info { border-style: dashed; border-width: 2px; word-break: break-word; }
.aviso--pendiente { background: var(--amarillo); border-style: dashed; }
.aviso--accion { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.aviso--accion p { margin: 0; }
.estado {
  display: inline-block; padding: 3px 9px 2px; font-family: var(--f-datos); font-size: .82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; border: 2px dashed var(--tinta); color: var(--tinta);
}
.estado--publicado { background: var(--tinta); color: var(--amarillo); border-style: solid; }
.estado--pendiente { background: var(--amarillo); border-style: solid; }
.estado--rechazado, .estado--suspendido { background: var(--fucsia); border-style: solid; }
.sello {
  display: inline-flex; align-items: center; gap: 6px; border: 3px solid currentColor; padding: 5px 10px 4px;
  font-family: var(--f-datos); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem;
  transform: rotate(-3deg);
}

/* Segunda tinta: al pasar o enfocar, el fucsia se imprime fuera de registro. */
.sobreimpresion { transition: text-shadow .25s var(--salida); }
a:hover .sobreimpresion, a:focus-visible .sobreimpresion { text-shadow: var(--registro) var(--registro) 0 var(--fucsia); }

/* ---------- Portada: el afiche */
.afiche { background: var(--amarillo); border-bottom: var(--regla-gruesa); }
.afiche__rejilla { display: grid; }
.afiche__principal { padding: 36px 16px 32px; }
.afiche__titulo { font-size: clamp(3.6rem, 15vw, 6rem); line-height: 1.02; padding-top: .1em; margin: 0 0 22px; letter-spacing: -0.005em; }
.afiche__titulo em { font-style: normal; color: var(--tinta); text-shadow: .06em .05em 0 var(--fucsia); animation: registro 900ms var(--salida) 200ms both; }
/* La segunda tinta entra a registro: arranca corrida y se asienta en su desfase de impresión. */
@keyframes registro { from { text-shadow: .22em .16em 0 var(--fucsia); } to { text-shadow: .06em .05em 0 var(--fucsia); } }
.afiche__bajada { font-size: 1.1rem; max-width: 46ch; margin-bottom: 22px; }
.buscador--afiche { border: var(--regla-gruesa); background: #fffdf6; max-width: 720px; }
.buscador--afiche input { border: 0; font-size: 1.2rem; padding: 16px 18px; background: transparent; }
.buscador--afiche input:focus { outline: none; }
.buscador--afiche:focus-within { outline: 3px solid var(--fucsia); outline-offset: 3px; }
.buscador--afiche .boton { border: 0; border-left: var(--regla-gruesa); background: var(--fucsia); color: var(--tinta); font-size: 1.6rem; padding: 0 22px; min-height: 64px; }
.buscador--afiche .boton:hover { background: var(--tinta); color: var(--amarillo); }
.buscador--afiche .boton span { display: none; }
@media (min-width: 520px) { .buscador--afiche .boton span { display: inline; } }
.atajos-cat { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding: 0; list-style: none; }
.atajos-cat a { display: inline-block; border: var(--punteado); padding: 7px 12px 6px; font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; text-decoration: none; font-size: .95rem; }
.atajos-cat a:hover, .atajos-cat a:focus-visible { background: var(--tinta); color: var(--amarillo); border-style: solid; }

.cartelera { background: var(--tinta); color: var(--crudo); padding: 28px 16px 30px; }
.cartelera__titulo { color: var(--amarillo); font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 10px; }
.cartelera__lista { list-style: none; margin: 0 0 22px; padding: 0; }
.cartelera__fila a { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 0 12px; border-top: 3px solid var(--crudo); text-decoration: none; color: inherit; }
.cartelera__fila:last-child a { border-bottom: 3px solid var(--crudo); }
.cartelera__nombre { font-family: var(--f-madera); font-size: clamp(1.7rem, 3.3vw, 2.8rem); line-height: 1; text-transform: uppercase; color: var(--amarillo); overflow-wrap: anywhere; }
.cartelera__precio { font-family: var(--f-madera); font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1; color: var(--fucsia); text-align: right; white-space: nowrap; }
.cartelera__dato { grid-column: 1 / -1; font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; color: var(--crudo-suave); }
.cartelera__fila a:hover .cartelera__nombre, .cartelera__fila a:focus-visible .cartelera__nombre { text-shadow: var(--registro) var(--registro) 0 var(--fucsia); }
.cartelera__vacia { font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; color: var(--crudo-suave); border-top: 3px solid var(--crudo); border-bottom: 3px solid var(--crudo); padding: 18px 0; }
.cartelera__vacia strong { display: block; font-family: var(--f-madera); font-size: 2rem; font-weight: 400; color: var(--amarillo); line-height: 1; margin-bottom: 8px; }
.cartelera .sello { color: var(--amarillo); }
@media (min-width: 900px) {
  /* La rejilla va a sangre; cada columna calcula su margen exterior para alinear con .contenedor. */
  /* Cuatro pistas: margen | afiche | cartelera | margen. Las dos centrales suman el ancho útil del
     .contenedor (1176 px), así el contenido se alinea con el resto de secciones en cualquier pantalla;
     los márgenes crecen a los lados y se pintan del color de su columna. */
  .afiche__rejilla { grid-template-columns: minmax(32px, 1fr) minmax(0, 720px) minmax(0, 456px) minmax(32px, 1fr);
    min-height: min(calc(100svh - 64px), 820px); }
  .afiche__rejilla::after { content: ""; grid-column: 4; grid-row: 1; background: var(--tinta); }
  .afiche__titulo { font-size: clamp(5.5rem, 8.6vw, 7.75rem); }
  .afiche__principal { grid-column: 2; grid-row: 1; padding: 56px 44px 48px 0; border-right: var(--regla-gruesa); display: flex; flex-direction: column; justify-content: center; }
  .cartelera { grid-column: 3; grid-row: 1; padding: 48px 0 40px 36px; display: flex; flex-direction: column; justify-content: center; }
}

.seccion { padding-block: 56px 24px; }
.seccion__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: var(--regla-gruesa); margin-bottom: 20px; }
.seccion__cabeza h2 { margin-bottom: 8px; }
.seccion__cabeza a { font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }

/* Índice de categorías: cartel tipográfico, no tarjetas */
.indice { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: 32px; }
@media (min-width: 640px) { .indice { columns: 2; } }
@media (min-width: 1000px) { .indice { columns: 3; } }
.indice > li { break-inside: avoid; border-top: var(--regla); padding: 12px 0 16px; }
.indice__raiz { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--f-madera); font-size: 1.6rem; line-height: 1; text-transform: uppercase; text-decoration: none; }
.indice__conteo { font-family: var(--f-datos); font-size: .9rem; letter-spacing: .05em; color: var(--fucsia-texto); white-space: nowrap; }
.indice__hijas { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.indice__hijas a { font-size: .95rem; color: var(--tinta-suave); text-decoration: none; }
.indice__hijas a:hover { color: var(--fucsia-texto); text-decoration: underline; }

.invitacion { background: var(--fucsia); border-top: var(--regla-gruesa); border-bottom: var(--regla-gruesa); margin-top: 56px; }
.invitacion__fila { display: grid; gap: 24px; padding-top: 44px; padding-bottom: 44px; }
@media (min-width: 900px) { .invitacion__fila { grid-template-columns: 1.3fr 1fr; align-items: end; } }
.invitacion h2 { font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 1.22; margin: 0; padding-top: .12em; }
.pasos { list-style: none; margin: 0 0 20px; padding: 0; counter-reset: paso; }
.pasos li { counter-increment: paso; display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 3px solid var(--tinta); font-weight: 600; }
.pasos li::before { content: counter(paso); font-family: var(--f-madera); font-size: 1.6rem; line-height: 1; }
.invitacion .boton { background: var(--tinta); color: var(--amarillo); }
.invitacion .boton:hover { background: var(--amarillo); color: var(--tinta); }

/* ---------- Tarjetas de resultado: recortes del afiche */
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
@media (min-width: 720px) { .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; } }
@media (min-width: 1040px) { .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tarjeta { min-width: 0; }
.tarjeta__enlace { display: block; color: inherit; text-decoration: none; height: 100%; }
.tarjeta__foto { position: relative; aspect-ratio: 1 / 1; background: var(--crudo-hondo); border: var(--regla); overflow: hidden; }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--salida); }
.tarjeta__enlace:hover .tarjeta__foto img { transform: scale(1.04); }
.tarjeta__sin-foto { display: grid; place-items: center; height: 100%; color: #8a8577; }
.tarjeta__sin-foto .icono { width: 42px; height: 42px; }
.tarjeta__tipo { position: absolute; left: 0; top: 0; background: var(--tinta); color: var(--amarillo); padding: 3px 8px 2px; font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }
.tarjeta__cuerpo { padding: 10px 0 0; }
.tarjeta__titulo { font-family: var(--f-madera); font-size: 1.3rem; line-height: 1; margin: 0 0 4px; overflow-wrap: anywhere; transition: text-shadow .25s var(--salida); }
.tarjeta__enlace:hover .tarjeta__titulo, .tarjeta__enlace:focus-visible .tarjeta__titulo { text-shadow: var(--registro) var(--registro) 0 var(--fucsia); }
.tarjeta__precio { font-family: var(--f-madera); font-size: 1.25rem; line-height: 1; color: var(--fucsia-texto); margin: 0 0 4px; }
.tarjeta__sub { font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .04em; font-size: .88rem; color: var(--tinta-suave); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta__dato { display: inline-flex; gap: 4px; align-items: center; font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; margin: 6px 0 0; }
.tarjeta__dato .icono { width: 1em; height: 1em; }

/* ---------- Búsqueda y categoría */
.cabeza-amarilla { background: var(--amarillo); border-bottom: var(--regla-gruesa); padding: 26px 0 22px; }
.cabeza-amarilla h1 { margin-bottom: 6px; }
.busqueda { padding-top: 22px; padding-bottom: 56px; }
.busqueda__total { font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.miga { margin: 0 0 8px; font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; font-size: .92rem; }
.miga a { text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 6px; margin: 10px 0 0; }
.chip { white-space: nowrap; border: var(--punteado); padding: 7px 13px 6px; text-decoration: none; font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; font-size: .92rem; }
.chip:hover { background: var(--tinta); color: var(--amarillo); border-style: solid; }
.chip[aria-current="true"] { background: var(--tinta); color: var(--amarillo); border-style: solid; }
.filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; padding: 16px 0 20px; border-bottom: var(--regla); margin-bottom: 26px; }
.filtros__campo--texto { grid-column: 1 / -1; }
.filtros__casilla { align-self: center; font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; }
.filtros .boton { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .filtros { grid-template-columns: 2fr 1.4fr 1.2fr auto auto; }
  .filtros__campo--texto { grid-column: auto; }
  .filtros .boton { grid-column: auto; }
}
.paginas { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 36px; flex-wrap: wrap; font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Ficha del negocio y producto */
.ficha-cabeza { background: var(--amarillo); border-bottom: var(--regla-gruesa); }
.ficha { padding-top: 26px; padding-bottom: 104px; }
.ficha-cabeza .ficha { padding-bottom: 32px; }
.ficha__cabeza { display: grid; gap: 26px; }
@media (min-width: 900px) { .ficha__cabeza { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 40px; } }
.ficha__portada { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--regla-gruesa); background: var(--crudo-hondo); }
.ficha__portada--vacia { display: grid; place-items: center; color: #8a8577; }
.ficha__portada--vacia .icono { width: 64px; height: 64px; }
.ficha__miniaturas { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ficha__miniaturas img { aspect-ratio: 1; object-fit: cover; width: 100%; border: var(--regla); }
.ficha__categoria { margin: 0 0 10px; font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .06em; font-size: .95rem; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.ficha__categoria a { text-decoration: none; border-bottom: 2px solid; }
.ficha__nombre { font-size: clamp(2.8rem, 9vw, 5.6rem); line-height: 1.02; padding-top: .08em; margin-bottom: 10px; overflow-wrap: anywhere; }
.ficha__eslogan { font-size: 1.2rem; font-weight: 600; max-width: 40ch; }
.ficha__precio { font-family: var(--f-madera); font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1; color: var(--fucsia-texto); margin: 0 0 14px; }
.ficha__datos { list-style: none; padding: 0; margin: 14px 0 20px; display: grid; gap: 0; border-top: var(--regla); }
.ficha__datos li { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: var(--regla); font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .04em; }
.ficha__datos .abierto { font-weight: 700; }
.ficha__datos .abierto .icono { color: var(--fucsia-texto); }
.ficha__redes { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .04em; }
.ficha__redes a { display: inline-flex; gap: 6px; align-items: center; text-decoration: none; border-bottom: 2px solid; }
.ficha__vendedor { margin-top: 16px; }
.ficha__sello { margin-top: 18px; }
.ficha__seccion { margin-top: 48px; }
.ficha__seccion > h2 { border-bottom: var(--regla-gruesa); padding-bottom: 8px; }
.texto-largo { overflow-wrap: anywhere; max-width: 68ch; }
.catalogo { list-style: none; margin: 0 0 24px; padding: 0; border-top: var(--regla); }
.catalogo__seccion { font-family: var(--f-datos); font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; margin: 28px 0 10px; }
.producto a { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: var(--regla); text-decoration: none; color: inherit; }
@media (min-width: 640px) { .producto a { grid-template-columns: 112px minmax(0, 1fr) auto; gap: 20px; } }
.producto img, .producto__sin-foto { width: 100%; aspect-ratio: 1; object-fit: cover; border: var(--regla); background: var(--crudo-hondo); }
.producto__sin-foto { display: grid; place-items: center; color: #8a8577; }
.producto__texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.producto__texto strong { font-family: var(--f-madera); font-weight: 400; font-size: 1.4rem; line-height: 1; text-transform: uppercase; transition: text-shadow .25s var(--salida); }
.producto a:hover strong, .producto a:focus-visible strong { text-shadow: var(--registro) var(--registro) 0 var(--fucsia); }
.producto__desc { color: var(--tinta-suave); font-size: .95rem; }
.producto__precio { font-family: var(--f-madera); font-size: 1.35rem; color: var(--fucsia-texto); text-align: right; white-space: nowrap; }
.producto__precio small { display: block; font-family: var(--f-datos); font-size: .8rem; color: var(--tinta-suave); letter-spacing: .04em; text-transform: uppercase; }
.producto--agotado img, .producto--agotado .producto__sin-foto { opacity: .45; filter: grayscale(1); }
.horario { display: grid; gap: 0; max-width: 420px; margin: 0; border-top: var(--regla); }
.horario div { display: flex; justify-content: space-between; border-bottom: var(--regla); padding: 8px 0; font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .04em; }
.horario dd { margin: 0; font-variant-numeric: tabular-nums; }
.barra-contacto { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--tinta); z-index: 15; }
.barra-contacto .boton { width: 100%; }
@media (min-width: 900px) { .barra-contacto { display: none; } .ficha { padding-bottom: 56px; } }

/* ---------- Panel del emprendedor: la versión sobria (crudo + negro, el amarillo marca lo que pide acción) */
.panel { padding-top: 28px; padding-bottom: 64px; }
.panel__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.panel__cabeza h1 { margin: 0; }
.panel-cabeza { margin-bottom: 22px; }
.panel-cabeza__fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-cabeza__fila h1 { margin: 0; overflow-wrap: anywhere; }
.pestanas { display: flex; flex-wrap: wrap; gap: 0; border-bottom: var(--regla-gruesa); margin-top: 16px; }
.pestanas a { padding: 10px 14px 8px; text-decoration: none; white-space: nowrap; font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; }
.pestanas a:hover { background: var(--crudo-hondo); color: var(--tinta); }
.pestanas a[aria-current="page"] { background: var(--tinta); color: var(--amarillo); }
.pestanas a:last-child { margin-left: auto; }
.tarjeta-panel { border: var(--regla); padding: 20px; margin-bottom: 18px; background: #fffdf6; }
.tarjeta-panel h2 { font-size: 1.7rem; }
.tarjeta-panel--accion { background: var(--amarillo); border-width: 6px; }
.lista-pendientes { padding-left: 20px; }
.lista-pendientes li { margin-bottom: 4px; }
.lista-lista { display: flex; gap: 8px; align-items: center; font-weight: 700; }
.medidor { color: var(--tinta-suave); }
.atajos { list-style: none; margin: 18px 0 32px; padding: 0; border-top: var(--regla); }
.atajos a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: var(--regla); text-decoration: none; font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .04em; }
.atajos a:hover { background: var(--amarillo); color: var(--tinta); }
.atajos a span:last-child { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.lista-negocios, .lista-items { list-style: none; margin: 0 0 22px; padding: 0; border-top: var(--regla); }
.fila-negocio, .fila-item { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: var(--regla); text-decoration: none; color: var(--tinta); }
.fila-negocio:hover { background: var(--amarillo); color: var(--tinta); }
.fila-negocio img, .fila-negocio__sin-foto { width: 64px; height: 64px; object-fit: cover; flex: none; border: var(--regla); }
.fila-item img, .fila-item__sin-foto { width: 56px; height: 56px; object-fit: cover; flex: none; border: var(--regla); }
.fila-negocio__sin-foto, .fila-item__sin-foto { display: grid; place-items: center; background: var(--crudo-hondo); color: #8a8577; }
.fila-negocio__texto, .fila-item__texto { display: flex; flex-direction: column; flex: 1; min-width: 0; text-decoration: none; color: var(--tinta); }
.fila-negocio__texto strong, .fila-item__texto strong { font-family: var(--f-madera); font-weight: 400; font-size: 1.3rem; line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; }
.fila-negocio__texto span, .fila-item__texto span { color: var(--tinta-suave); font-size: .92rem; }
.fila-item__texto:hover strong { text-shadow: var(--registro) var(--registro) 0 var(--fucsia); }
.fila-item--revision { align-items: flex-start; flex-wrap: wrap; }
.fila-item__acciones { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.motivo { color: var(--fucsia-texto) !important; font-weight: 700; }
.vacio { text-align: center; padding: 56px 16px; max-width: 600px; margin: 0 auto; }
.vacio h2 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
.vacio--panel { border: 3px dashed var(--tinta); background: #fffdf6; }
.vacio__codigo { font-family: var(--f-madera); font-size: clamp(5rem, 20vw, 9rem); line-height: .9; color: var(--tinta); margin: 0; text-shadow: var(--registro) var(--registro) 0 var(--fucsia); }
.vacio .buscador { margin: 22px 0; border: var(--regla); }
.vacio .buscador input { border: 0; }
.vacio .buscador .boton { border-width: 0 0 0 3px; }
.zona-peligro { margin-top: 36px; border-top: var(--punteado); padding-top: 16px; }
.zona-peligro summary { cursor: pointer; color: var(--fucsia-texto); font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; }
.zona-peligro form { margin-top: 12px; max-width: 480px; display: grid; gap: 10px; }

/* Fotos */
.galeria-editable { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.galeria-editable li { position: relative; border: var(--regla); background: #fffdf6; }
.galeria-editable img { aspect-ratio: 1; width: 100%; object-fit: cover; }
.foto--rechazada img { opacity: .35; }
.foto__etiqueta { position: absolute; top: 0; left: 0; background: var(--tinta); color: var(--amarillo); padding: 3px 8px 2px; font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; }
.foto__etiqueta--error { background: var(--fucsia); color: var(--tinta); top: auto; bottom: 42px; }
.foto__acciones { display: flex; justify-content: space-between; gap: 6px; padding: 8px 10px; font-size: .9rem; border-top: var(--regla); }
.subida { display: grid; gap: 10px; max-width: 540px; }
.subida__zona { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 30px 16px; border: 3px dashed var(--tinta); background: #fffdf6; cursor: pointer; color: var(--tinta-suave); }
.subida__zona:hover, .subida:focus-within .subida__zona { background: var(--amarillo); color: var(--tinta); border-style: solid; }
.subida__zona strong { font-family: var(--f-madera); font-weight: 400; font-size: 1.5rem; text-transform: uppercase; color: var(--tinta); }
.subida__estado { margin: 0; color: var(--tinta-suave); }
.tabla-horario { border-collapse: collapse; width: 100%; max-width: 540px; margin-bottom: 8px; }
.tabla-horario th, .tabla-horario td { padding: 8px; border-bottom: var(--regla); text-align: left; }
.tabla-horario thead th { font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; }

/* ---------- Moderación (misma versión sobria) */
.tabla { width: 100%; border-collapse: collapse; border: var(--regla); margin-bottom: 26px; display: block; overflow-x: auto; background: #fffdf6; }
.tabla th, .tabla td { padding: 10px 12px; border-bottom: 2px solid var(--tinta); text-align: left; vertical-align: top; }
.tabla thead th { font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; background: var(--tinta); color: var(--amarillo); }
.fila--urgente td { background: #ffe1ef; }
.fila--urgente td:first-child { font-weight: 700; }
.tabla--comparar td { width: 42%; }
.conteo { background: var(--fucsia); color: var(--tinta); padding: 0 8px; font-family: var(--f-datos); font-size: .9rem; vertical-align: middle; }
.nivel { font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; }
.revision__rejilla { display: grid; gap: 18px; margin: 22px 0; }
@media (min-width: 900px) { .revision__rejilla { grid-template-columns: 1fr 1fr; } }
.rechazo summary { list-style: none; }
.rechazo summary::-webkit-details-marker { display: none; }
.rechazo[open] summary { margin-bottom: 8px; }
.rechazo__cuerpo { display: grid; gap: 8px; min-width: min(420px, 80vw); }
.historial { padding-left: 18px; color: var(--tinta-suave); font-size: .95rem; }
.historial li { margin-bottom: 4px; }
.texto-legal { max-width: 760px; padding-top: 28px; padding-bottom: 56px; }
.texto-legal h2 { margin-top: 1.4em; }

/* ---------- Páginas públicas: el papel amarillo es el suelo; el crudo queda para campos y panel */
body.publico { background: var(--amarillo); }
.publico .cabeza-amarilla, .publico .ficha-cabeza { border-bottom: var(--regla-gruesa); }
.publico .tarjeta__foto, .publico .producto img, .publico .producto__sin-foto { background: #fffdf6; }
.banda-negra { background: var(--tinta); color: var(--crudo); border-top: var(--regla-gruesa); }
.banda-negra .seccion__cabeza { border-bottom-color: var(--amarillo); }
.banda-negra h2 { color: var(--amarillo); }
.banda-negra .indice > li { border-top-color: var(--crudo); }
.banda-negra .indice__raiz { color: var(--amarillo); }
.banda-negra .indice__conteo { color: var(--fucsia); }
.banda-negra .indice__hijas a { color: var(--crudo-suave); }
.banda-negra .indice__hijas a:hover { color: var(--fucsia); }
.banda-negra .seccion { padding-bottom: 48px; }
.publico .invitacion { margin-top: 0; }

/* ---------- Pie: franja negra */
.pie { background: var(--tinta); color: var(--crudo); padding: 28px 0 96px; font-size: .95rem; }
.pie__fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: center; }
.pie p { margin: 0; }
.pie nav { display: flex; gap: 18px; font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; }
.pie a { color: var(--crudo); text-decoration: none; }
.pie a:hover { color: var(--amarillo); }
@media (min-width: 900px) { .pie { padding-bottom: 28px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Fase 2: descubrimiento y estadísticas (mismo juego de tintas) */
.tarjeta__datos { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 0; }
.tarjeta__datos .tarjeta__dato { margin: 0; }
.tarjeta__dato--abierto { font-weight: 700; }
.tarjeta__dato--abierto .icono { color: var(--fucsia-texto); }
.cerca-nota { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 10px 0 0; font-size: .95rem; }
.ubicacion { border: var(--punteado); padding: 14px 16px; background: #fffdf6; }
.ubicacion__titulo { font-family: var(--f-datos); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; margin: 0 0 4px; }
.ubicacion__estado { display: flex; gap: 6px; align-items: center; font-weight: 600; margin: 10px 0; }

.cifras { display: grid; margin: 8px 0 32px; border-top: var(--regla-gruesa); }
@media (min-width: 760px) { .cifras { grid-template-columns: repeat(3, 1fr); } }
.cifras > div { padding: 14px 16px 16px 0; border-bottom: var(--regla); }
@media (min-width: 760px) { .cifras > div + div { padding-left: 16px; border-left: var(--regla); } }
.cifras dt { font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; }
.cifras dd { margin: 0; }
.cifras dd:not(.cifras__nota) { font-family: var(--f-datos); font-weight: 600; font-size: 2.6rem; line-height: 1.1; }
.cifras__nota { color: var(--tinta-suave); font-size: .92rem; }

.graficos { display: grid; gap: 28px; margin-bottom: 8px; }
@media (min-width: 900px) { .graficos { grid-template-columns: 1fr 1fr; } }
.grafico { margin: 0; position: relative; }
.grafico__titulo { font-family: var(--f-madera); text-transform: uppercase; font-size: 1.4rem; line-height: 1.1; }
.grafico__escala { margin: 2px 0 4px; font-family: var(--f-datos); font-size: .82rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.grafico__svg { display: block; width: 100%; height: 150px; overflow: visible; }
.grafico--tinta .grafico__barra { fill: var(--tinta); }
.grafico--fucsia .grafico__barra { fill: var(--fucsia); }
.grafico__zona { fill: transparent; cursor: crosshair; }
.grafico__zona:hover, .grafico__zona.activa { fill: rgb(20 20 20 / 7%); }
.grafico__base { stroke: var(--tinta); stroke-width: 1; vector-effect: non-scaling-stroke; }
.grafico__eje { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--f-datos); font-size: .82rem; color: var(--tinta-suave); }
.tip { position: fixed; z-index: 30; pointer-events: none; background: var(--tinta); color: var(--amarillo); padding: 5px 9px 4px; font-family: var(--f-datos); font-size: .9rem; letter-spacing: .03em; transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap; }

.barras-h { list-style: none; margin: 0; padding: 0; border-top: var(--regla); }
.barras-h li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 3ch; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 2px solid var(--tinta); }
.barras-h__etiqueta { font-size: .95rem; }
.barras-h__pista svg { display: block; width: 100%; height: 12px; }
.barras-h__pista rect { fill: var(--tinta); }
.barras-h__valor, .num { font-family: var(--f-datos); font-variant-numeric: tabular-nums; text-align: right; }
.tabla-datos { margin-top: 24px; }
.tabla-datos summary { cursor: pointer; font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
button.chip { background: transparent; color: inherit; font-size: .92rem; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.campo .casilla { font-family: var(--f-texto); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1rem; }
.graficos { margin-bottom: 36px; }
.subtitulo { font-size: 1.4rem; }

.reportar { margin-top: 28px; font-size: .92rem; }
.reportar a { color: var(--tinta-suave); }
.lista-reportes { list-style: none; margin: 0 0 16px; padding: 0; border-top: var(--regla); }
.lista-reportes li { padding: 10px 0; border-bottom: 2px solid var(--tinta); }
.lista-reportes p { margin: 4px 0 0; }
.pasos-importar { padding-left: 22px; max-width: 70ch; }
.pasos-importar li { margin-bottom: 8px; }
.fila--error td { background: #ffe1ef; }
.nota-correo { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0 0 18px; padding-bottom: 12px; border-bottom: var(--punteado); font-size: .95rem; color: var(--tinta-suave); }

/* Documentos verificados: tinta sólida (más fuerte que el sello «Revisado», que va en contorno). */
.insignia-doc { display: inline-flex; align-items: center; gap: 6px; background: var(--tinta); color: var(--amarillo);
  padding: 6px 12px 5px; font-family: var(--f-datos); font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  font-size: .95rem; line-height: 1; white-space: nowrap; }
.insignia-doc .icono { color: var(--fucsia); width: 1.2em; height: 1.2em; }
.insignia-doc--compacta { padding: 2px 7px 1px; font-size: .78rem; gap: 4px; }
.insignia-doc--compacta .icono { width: 1em; height: 1em; }
.ficha__insignia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 0 14px; font-size: .95rem; }
.ficha__vendedor .insignia-doc { margin-left: 6px; vertical-align: middle; }

/* ---------- Conecta y crece */
.seccion__nota { margin: -10px 0 18px; color: var(--tinta-suave); font-size: .95rem; }
.destacados-cat { margin-bottom: 8px; }
.destacados-cat__todos { margin-top: 36px; border-top: var(--regla); padding-top: 16px; }
.sello--comunidad { color: var(--tinta); transform: rotate(-2deg); }
.ficha__comunidad { margin: 0 0 12px; }
.conecta { display: grid; gap: 40px; }
@media (min-width: 960px) { .conecta { grid-template-columns: 1.15fr 1fr; } }
.conecta h2 { font-size: 1.7rem; }
.enlace-invitacion { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin-bottom: 14px; }
.enlace-invitacion label { grid-column: 1 / -1; font-family: var(--f-datos); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; }
.enlace-invitacion input { font-family: var(--f-datos); letter-spacing: .02em; }
.cifras--conecta { margin-top: 28px; }
.escalera { list-style: none; margin: 0 0 16px; padding: 0; border-top: var(--regla); }
.escalera li { padding: 10px 0; border-bottom: 2px solid var(--tinta); color: var(--tinta-suave); }
.escalera li strong { display: inline-block; min-width: 6.5em; font-family: var(--f-datos); text-transform: uppercase; color: var(--tinta); }
.escalera li.logrado { color: var(--tinta); font-weight: 600; }
.escalera li.logrado strong { background: var(--tinta); color: var(--amarillo); padding: 0 6px; }
.demanda { list-style: none; margin: 0 0 28px; padding: 0; border-top: var(--regla); }
.demanda li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 10px 0; border-bottom: 2px solid var(--tinta); }
.conecta h3.subtitulo { margin-top: 28px; }
.producto a:hover, .producto a:focus-visible { color: var(--tinta); }
.cartelera__fila a:hover, .cartelera__fila a:focus-visible { color: inherit; }
.cartelera__etiqueta { display: inline-block; border: 2px solid var(--amarillo); color: var(--amarillo); padding: 1px 6px 0; margin-right: 6px; font-weight: 600; letter-spacing: .08em; }
.cartelera__fila--destacada a { border-top-style: dashed; }

/* ---------- SEO local: texto de la categoría y enlaces por barrio */
.intro-categoria { max-width: 70ch; margin: 0 0 24px; }
.barrios-categoria { margin-top: 40px; border-top: var(--regla); padding-top: 16px; }
.barrios-categoria ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.barrios-categoria li span { font-family: var(--f-datos); color: var(--tinta-suave); font-size: .85rem; }