/* ============================================================
   Tianguis Cultural GDL — hoja de estilo única
   Mobile-first. Estética fanzine / cartel de concierto:
   fondo negro concreto, papel fotocopiado, neón y magenta.
   ============================================================ */

:root{
  --tinta:#0d0c0f;
  --tinta-2:#16151a;
  --tinta-3:#1f1e25;
  --papel:#f4f1e8;
  --humo:#a5a1ae;
  --neon:#d7ff3e;
  --magenta:#ff2e88;
  --linea:#2e2c36;

  --titular:"Impact","Haettenschweiler","Franklin Gothic Bold","Arial Narrow Bold",system-ui,sans-serif;
  --texto:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --ancho:1100px;
  --gutter:1.1rem;
}

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

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--tinta);
  color:var(--papel);
  font-family:var(--texto);
  font-size:16px;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
  /* trama de fotocopia */
  background-image:
    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:4px 4px;
}

img{max-width:100%;display:block}

.oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.saltar{
  position:absolute;left:-999px;top:0;z-index:99;
  background:var(--neon);color:#000;padding:.6rem 1rem;font-weight:700;
}
.saltar:focus{left:0}

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

/* ─────────────── barra superior ─────────────── */
.barra{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.6rem var(--gutter);
  background:rgba(13,12,15,.92);
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--linea);
}
.barra__logo{
  display:flex;flex-direction:column;line-height:.92;
  text-decoration:none;font-family:var(--titular);letter-spacing:.04em;
}
.barra__logo-1{color:var(--papel);font-size:1.05rem}
.barra__logo-2{color:var(--magenta);font-size:.72rem;letter-spacing:.16em}
.barra__nav{display:flex;gap:.9rem}
.barra__nav a{
  color:var(--humo);text-decoration:none;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.09em;font-weight:700;
  padding:.25rem 0;border-bottom:2px solid transparent;
}
.barra__nav a:hover,.barra__nav a:focus{color:var(--neon);border-color:var(--neon)}
.barra__nav-alta{color:var(--neon)!important}

/* ─────────────── hero ─────────────── */
.hero{
  max-width:var(--ancho);margin:0 auto;
  padding:2.6rem var(--gutter) 1.8rem;
}
.hero__kicker{
  margin:0 0 .7rem;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--neon);font-weight:700;
}
.hero__titulo{
  margin:0 0 .8rem;
  font-family:var(--titular);
  font-size:clamp(2.9rem,15vw,6rem);
  line-height:.86;letter-spacing:.01em;text-transform:uppercase;
  text-shadow:3px 3px 0 var(--magenta);
}
.hero__titulo em{font-style:normal;color:var(--neon);text-shadow:3px 3px 0 #000}
.hero__bajada{margin:0 0 1.4rem;max-width:46ch;color:var(--humo)}
.hero__acciones{display:flex;flex-wrap:wrap;gap:.6rem}

.btn{
  display:inline-block;padding:.7rem 1.15rem;
  border:2px solid var(--papel);border-radius:2px;
  color:var(--papel);text-decoration:none;background:transparent;
  font:700 .82rem/1 var(--texto);text-transform:uppercase;letter-spacing:.09em;
  cursor:pointer;
}
.btn:hover,.btn:focus{background:var(--papel);color:var(--tinta)}
.btn--fuerte{background:var(--neon);border-color:var(--neon);color:#000}
.btn--fuerte:hover,.btn--fuerte:focus{background:var(--magenta);border-color:var(--magenta);color:#fff}
.btn--limpio{border-color:var(--linea);color:var(--humo);padding:.45rem .8rem;font-size:.72rem}

/* ─────────────── datos esenciales ─────────────── */
.datos{
  max-width:var(--ancho);margin:0 auto;
  padding:0 var(--gutter) 2.4rem;
  display:grid;gap:.7rem;
}
.dato{
  border:2px solid var(--linea);border-left:6px solid var(--magenta);
  background:var(--tinta-2);padding:.85rem 1rem;
}
.dato__et{
  display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--neon);font-weight:700;margin-bottom:.25rem;
}
.dato__val{font-size:1.05rem;font-weight:700;line-height:1.3}
.dato__val small{display:block;font-weight:400;font-size:.82rem;color:var(--humo);margin-top:.15rem}

/* ─────────────── secciones ─────────────── */
.seccion{max-width:var(--ancho);margin:0 auto;padding:2.4rem var(--gutter) 3rem}
.seccion--alt{
  max-width:none;
  background:var(--tinta-2);
  border-top:2px solid var(--linea);border-bottom:2px solid var(--linea);
}
.seccion--alt > *{max-width:var(--ancho);margin-left:auto;margin-right:auto}

.seccion__head{margin-bottom:1.6rem}
.seccion__num{
  margin:0;font-family:var(--titular);font-size:2.4rem;line-height:1;
  color:transparent;-webkit-text-stroke:2px var(--linea);
}
.seccion__titulo{
  margin:.1rem 0 .5rem;
  font-family:var(--titular);text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.9rem,8vw,3rem);line-height:.95;
}
.seccion__sub{margin:0;max-width:52ch;color:var(--humo);font-size:.95rem}

/* ─────────────── croquis de la plaza ─────────────── */
/* Solo dibuja lo documentado de Plaza Juárez. Ya no reparte zonas inventadas:
   el filtro por zona son los botones de abajo, que no fingen ser un mapa. */
.plano{margin-bottom:1.4rem}
.plano__intro{
  margin:0 0 .6rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--humo);font-weight:700;
}
.plano__svg{
  width:100%;height:auto;max-width:26rem;display:block;
  border:2px solid var(--linea);background:var(--tinta);
}

/* lo de alrededor */
.calle{fill:#0a090c}
.calle__t{fill:#4b4854;font:400 8.5px var(--texto);letter-spacing:.18em}
.parque{fill:#12180f}
.parque__t{fill:#4a6340;font:400 9px var(--texto);letter-spacing:.18em}
.parada__t{fill:var(--neon);font:400 8px var(--texto);letter-spacing:.12em}
.camion{fill:#101016;stroke:var(--neon);stroke-width:1.5}
.camion__vent{fill:var(--neon)}
.camion__rueda{fill:#101016;stroke:var(--neon);stroke-width:1.4}

/* la plaza */
.plaza{fill:#17161c;stroke:#2b2933;stroke-width:2}
.vestibulo{fill:#1c1b22;stroke:#2b2933;stroke-width:1.5}
.jardin{fill:#18230f}
.arbol{fill:#25361f;stroke:#3a5230;stroke-width:1.2}
.arbol--parque{fill:#1d2a17;stroke:#33482a}
.banca{fill:#2e2c36}

.fuente{fill:#141b24;stroke:#3a5a78;stroke-width:1.8}
.fuente__agua{fill:#1b2c3d;stroke:#4a7ba3;stroke-width:1.2}

.pieza{fill:var(--humo);font:400 7.5px var(--texto);letter-spacing:.14em}
.pieza--baja{fill:#6f6b7a}

/* el remate de la plaza */
.asta{stroke:#4b4854;stroke-width:1.4}
.bandera{fill:var(--magenta)}
.estela{fill:#d8d4c8;stroke:#f4f1e8;stroke-width:1}
.pedestal{fill:#0a090c;stroke:#4b4854;stroke-width:1.2}
.estatua{fill:#8a6a2f;stroke:#c9a24a;stroke-width:1.2}

/* las lonas del tianguis */
.lona{fill:#22212a;stroke:#3e3c48;stroke-width:1.4}
.lona--clara{fill:#2c2a35}

/* la chapa de la explanada */
.chapa__fondo{fill:#0a090c;stroke:var(--linea);stroke-width:1.5}
.chapa__filo{fill:var(--magenta)}
.chapa__txt{fill:var(--papel);font:400 11px var(--titular);letter-spacing:.08em}
.chapa__n2{fill:var(--neon);font:700 9px var(--texto)}

.plano__aviso{
  margin:.6rem 0 0;font-size:.75rem;color:#5d5967;max-width:52ch;line-height:1.5;
}
.plano__aviso strong{color:var(--humo)}

/* ─────────────── cartelera ─────────────── */
.cartel{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;counter-reset:acto}
.acto{
  display:flex;gap:.9rem;align-items:baseline;
  border:2px solid var(--linea);background:var(--tinta);padding:.75rem .9rem;
}
.acto:hover{border-color:var(--neon)}
.acto__hora{
  font-family:var(--titular);font-size:1.25rem;line-height:1;color:var(--neon);
  flex:0 0 auto;min-width:3.4rem;letter-spacing:.02em;
}
.acto__cuerpo{display:flex;flex-direction:column;gap:.15rem}
.acto__nom{font-size:1rem;line-height:1.2}
.acto__tipo{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--magenta);font-weight:700;
}
.acto__nota{font-size:.82rem;color:var(--humo)}

/* ─────────────── filtros ─────────────── */
.filtros{
  border:2px solid var(--linea);background:var(--tinta-3);
  padding:1rem;margin-bottom:1.6rem;
}
.buscador input{
  width:100%;padding:.8rem .9rem;
  background:var(--tinta);color:var(--papel);
  border:2px solid var(--linea);border-radius:2px;
  font-size:1rem;font-family:var(--texto);
}
.buscador input::placeholder{color:#6e6a78}
.buscador input:focus{border-color:var(--neon);outline:none}

.chips{border:0;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.chips__titulo{
  width:100%;padding:0;margin:0 0 .5rem;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--humo);font-weight:700;
}
.chip{
  border:2px solid var(--linea);background:var(--tinta);color:var(--papel);
  padding:.35rem .7rem;border-radius:999px;cursor:pointer;
  font:700 .78rem/1.2 var(--texto);
}
.chip:hover{border-color:var(--papel)}
.chip[aria-pressed="true"]{background:var(--neon);border-color:var(--neon);color:#000}
.chip__n{
  display:inline-block;margin-left:.25rem;padding:0 .3rem;border-radius:999px;
  background:var(--linea);color:var(--humo);font-size:.68rem;
}
.chip[aria-pressed="true"] .chip__n{background:rgba(0,0,0,.25);color:#000}

.selects{display:grid;gap:.6rem;margin-top:1rem}
.select span{
  display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--humo);font-weight:700;margin-bottom:.3rem;
}
.select select{
  width:100%;padding:.6rem .7rem;
  background:var(--tinta);color:var(--papel);
  border:2px solid var(--linea);border-radius:2px;
  font-size:.92rem;font-family:var(--texto);
}
.select select:focus{border-color:var(--neon);outline:none}

.filtros__pie{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  margin-top:1rem;padding-top:.8rem;border-top:2px dashed var(--linea);
}
.conteo{margin:0;font-size:.82rem;color:var(--humo)}
.conteo strong{color:var(--neon)}

/* ─────────────── fichas ─────────────── */
.rejilla{display:grid;gap:1rem}

.ficha{
  border:2px solid var(--linea);background:var(--tinta-2);
  display:flex;flex-direction:column;
}
.ficha:hover{border-color:var(--magenta)}

.ficha__foto{
  aspect-ratio:4/3;position:relative;overflow:hidden;
  background:
    repeating-linear-gradient(45deg,#1c1b22 0 10px,#191820 10px 20px);
  display:grid;place-items:center;
  border-bottom:2px solid var(--linea);
}
.ficha__foto img{width:100%;height:100%;object-fit:cover}
.ficha__inicial{
  font-family:var(--titular);font-size:3.2rem;line-height:1;
  color:transparent;-webkit-text-stroke:2px var(--humo);
}
.ficha__sinfoto{
  position:absolute;bottom:.4rem;right:.5rem;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#5d5967;
}

.ficha__cuerpo{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.ficha__nombre{
  margin:0;font-family:var(--titular);text-transform:uppercase;
  font-size:1.35rem;line-height:1;letter-spacing:.02em;
}
.ficha__cat{
  margin:0;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--magenta);font-weight:700;
}
.ficha__desc{margin:0;font-size:.9rem;color:var(--humo)}

.ficha__tribus{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;margin:0;padding:0}
.tribu{
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--neon);color:#000;padding:.15rem .45rem;
  transform:rotate(-1.5deg);
}
.ficha__tribus li:nth-child(even) .tribu{transform:rotate(1.5deg);background:var(--papel)}

.ficha__pie{
  margin-top:auto;padding-top:.6rem;border-top:2px dashed var(--linea);
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;
}
.ficha__zona{font-size:.72rem;color:var(--humo)}
.ficha__zona b{color:var(--papel);font-weight:700}
.ficha__redes{display:flex;gap:.4rem}
.red{
  font:700 .7rem/1 var(--texto);text-transform:uppercase;letter-spacing:.08em;
  text-decoration:none;padding:.4rem .6rem;border:2px solid var(--linea);color:var(--papel);
}
.red:hover{background:var(--papel);color:var(--tinta)}
.ficha__sinredes{font-size:.68rem;color:#5d5967;font-style:italic}

.vacio{
  border:2px dashed var(--linea);padding:1.6rem;text-align:center;
  color:var(--humo);margin:0;
}

.nota-demo{
  margin:1.6rem 0 0;padding:.8rem 1rem;
  border-left:4px solid var(--magenta);background:rgba(255,46,136,.08);
  font-size:.82rem;color:var(--humo);
}
.nota-demo strong{color:var(--papel)}

/* ─────────────── notas del blog ─────────────── */
.notas{display:grid;gap:1rem}
.nota{
  border:2px solid var(--linea);background:var(--tinta);
  padding:1rem;display:flex;flex-direction:column;gap:.5rem;
}
.nota:hover{border-color:var(--neon)}
.nota__seccion{
  margin:0;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--neon);font-weight:700;
}
.nota__titulo{
  margin:0;font-family:var(--titular);text-transform:uppercase;
  font-size:1.3rem;line-height:1.02;letter-spacing:.01em;
}
.nota__titulo a{color:var(--papel);text-decoration:none}
.nota__titulo a:hover{color:var(--neon)}
.nota__resumen{margin:0;font-size:.9rem;color:var(--humo)}
.nota__pie{margin:0;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#5d5967}

/* ─────────────── enlace a la tienda desde la ficha ─────────────── */
.ficha__tienda{
  display:block;text-align:center;text-decoration:none;
  border:2px solid var(--neon);color:var(--neon);
  padding:.55rem .7rem;
  font:700 .78rem/1.2 var(--texto);text-transform:uppercase;letter-spacing:.08em;
}
.ficha__tienda:hover,.ficha__tienda:focus{background:var(--neon);color:#000}
.ficha__nprod{display:block;font-size:.66rem;letter-spacing:.1em;opacity:.8;margin-top:.15rem}
.ficha__nombre a{color:inherit;text-decoration:none}
.ficha__nombre a:hover{color:var(--neon)}

/* ─────────────── tienda de un expositor ─────────────── */
.puesto{
  max-width:var(--ancho);margin:0 auto;
  padding:1.6rem var(--gutter) 1rem;
  display:grid;gap:1.1rem;
}
.puesto__foto{
  aspect-ratio:16/9;overflow:hidden;
  border:2px solid var(--linea);background:
    repeating-linear-gradient(45deg,#1c1b22 0 10px,#191820 10px 20px);
  display:grid;place-items:center;
}
.puesto__foto img{width:100%;height:100%;object-fit:cover}
.puesto__cat{
  margin:0 0 .3rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--magenta);font-weight:700;
}
.puesto__nombre{
  margin:0 0 .6rem;font-family:var(--titular);text-transform:uppercase;
  font-size:clamp(2rem,9vw,3.4rem);line-height:.9;
}
.puesto__desc{margin:0 0 .8rem;color:var(--humo);max-width:52ch}
.puesto__zona{margin:.7rem 0;font-size:.85rem;color:var(--humo)}
.puesto__zona b{color:var(--papel)}

.prod{border:2px solid var(--linea);background:var(--tinta-2);display:flex;flex-direction:column}
.prod--agotado{opacity:.55}
.prod__foto{
  aspect-ratio:1;overflow:hidden;border-bottom:2px solid var(--linea);
  background:var(--tinta);display:grid;place-items:center;
}
.prod__foto img{width:100%;height:100%;object-fit:cover}
.prod__cuerpo{padding:.8rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.prod__nombre{margin:0;font-size:1rem;line-height:1.25;overflow-wrap:anywhere}
.prod__desc{margin:0;font-size:.85rem;color:var(--humo)}
.prod__precio{
  margin:0 0 .2rem;font-family:var(--titular);font-size:1.35rem;
  color:var(--neon);letter-spacing:.02em;margin-top:auto;
}

.cantidad{display:flex;align-items:center;gap:.6rem;justify-content:center;
  border:2px solid var(--neon);padding:.3rem}
.cantidad__b{
  background:var(--neon);color:#000;border:0;cursor:pointer;
  width:2.1rem;height:2.1rem;font-size:1.3rem;line-height:1;font-weight:700;
}
.cantidad__b:hover{background:var(--magenta);color:#fff}
.cantidad__n{font-weight:700;min-width:1.5rem;text-align:center}

/* ─────────────── carrito ─────────────── */
.carrito{position:fixed;left:0;right:0;bottom:0;z-index:50}
.carrito__barra{
  width:100%;border:0;border-top:2px solid var(--neon);
  background:var(--neon);color:#000;cursor:pointer;
  padding:.9rem 1rem;
  font:700 .95rem/1 var(--texto);text-transform:uppercase;letter-spacing:.06em;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.carrito__total{font-family:var(--titular);font-size:1.2rem;letter-spacing:.02em}
.carrito__panel{
  background:var(--tinta-2);border-top:2px solid var(--linea);
  padding:1rem var(--gutter) 1.4rem;max-height:70vh;overflow-y:auto;
}
.carrito__titulo{
  margin:0 0 .7rem;font-family:var(--titular);text-transform:uppercase;font-size:1.2rem;
}
.carrito__lista{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.4rem}
.linea{display:flex;align-items:baseline;gap:.5rem;font-size:.9rem;
  border-bottom:1px dashed var(--linea);padding-bottom:.35rem}
.linea__n{color:var(--neon);font-weight:700}
.linea__nom{flex:1;overflow-wrap:anywhere}
.linea__quitar{
  background:none;border:0;color:var(--humo);cursor:pointer;font-size:1rem;padding:0 .3rem;
}
.linea__quitar:hover{color:var(--magenta)}
.carrito__form{max-width:32rem}
.carrito__acciones{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.carrito__listo{padding:.5rem 0}
.carrito__listo-txt{margin:0 0 1rem;font-size:.95rem;line-height:1.55}

@media (min-width:700px){
  .puesto{grid-template-columns:1fr 1fr;align-items:center}
  .carrito{left:auto;right:1.5rem;bottom:1.5rem;width:min(26rem,calc(100vw - 3rem))}
  .carrito__barra{border:2px solid #000}
  .carrito__panel{border:2px solid var(--linea)}
}

/* ─────────────── página de nota (blog/) ─────────────── */
.articulo{max-width:44rem;margin:0 auto;padding:2.2rem var(--gutter) 3rem}
.articulo__volver{
  display:inline-block;margin-bottom:1.4rem;color:var(--humo);text-decoration:none;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
}
.articulo__volver:hover{color:var(--neon)}
.articulo__seccion{
  margin:0 0 .4rem;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--neon);font-weight:700;
}
.articulo__titulo{
  margin:0 0 .6rem;font-family:var(--titular);text-transform:uppercase;
  font-size:clamp(2rem,9vw,3.2rem);line-height:.93;letter-spacing:.01em;
}
.articulo__meta{
  margin:0 0 1.8rem;padding-bottom:1.2rem;border-bottom:2px solid var(--linea);
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#5d5967;
}
.articulo p{margin:0 0 1.05rem;font-size:1.02rem;line-height:1.7}
.articulo h2{
  margin:2rem 0 .7rem;font-family:var(--titular);text-transform:uppercase;
  font-size:1.5rem;line-height:1.05;letter-spacing:.02em;color:var(--papel);
}
.articulo ul{margin:0 0 1.05rem;padding-left:1.1rem;color:var(--papel)}
.articulo li{margin-bottom:.4rem;line-height:1.6}
.articulo blockquote{
  margin:1.4rem 0;padding:.9rem 1.1rem;
  border-left:4px solid var(--neon);background:var(--tinta-2);
  font-size:1.05rem;font-style:italic;color:var(--papel);
}
.articulo blockquote footer{
  margin-top:.5rem;font-size:.75rem;font-style:normal;letter-spacing:.12em;
  text-transform:uppercase;color:var(--humo);
}
.pendiente{
  border:2px dashed var(--magenta);background:rgba(255,46,136,.08);
  padding:.7rem .9rem;margin:1.2rem 0;font-size:.85rem;color:var(--humo);
}
.pendiente strong{color:var(--magenta)}

/* ─────────────── pie ─────────────── */
.pie{
  border-top:2px solid var(--linea);
  padding:2.2rem var(--gutter) 2.6rem;text-align:center;
}
.pie__marca{
  margin:0 0 .4rem;font-family:var(--titular);text-transform:uppercase;
  font-size:1.4rem;letter-spacing:.06em;color:var(--papel);
}
.pie__txt{margin:.2rem 0;font-size:.85rem;color:var(--humo)}
.pie__txt--chico{font-size:.75rem;color:#5d5967;margin-top:.9rem}

/* ─────────────── tablet / escritorio ─────────────── */
@media (min-width:600px){
  .datos{grid-template-columns:repeat(3,1fr)}
  .selects{grid-template-columns:1fr 1fr}
  .rejilla{grid-template-columns:repeat(2,1fr)}
  .notas{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  :root{--gutter:2rem}
  .rejilla{grid-template-columns:repeat(3,1fr)}
  .hero{padding-top:4rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}