/* ═══════════════════════════════════════════════════════════════════════════
   DIRECTORIO COMERCIAL DE GUATAPÉ — «la calle comercial»
   Se carga DESPUÉS de guatape.css y formas.css y no redefine sus tokens.

   La idea: en Guatapé el zócalo de cada casa dibujaba el oficio de quien
   vivía en ella. Cada negocio es una FACHADA —muro con nombre y contacto— y
   al pie lleva SU zócalo: el campo del verbo con la figura del oficio.

   La audacia se gasta en UN sitio: el plano del pueblo. Todo lo demás es
   silencioso, a la izquierda, sin sombras, sin radios, sin animación propia.

   ⚠️ SIN RECUADROS NEGROS (CEO, 2026-09-26; ya lo había pedido la Alcaldía
   para el sitio: «sin recuadros de doble línea»). El borde de cada cosa es
   su CAMBIO DE COLOR: fachada blanca sobre calle cruda, zócalo de color al
   pie, botón en campo lleno. La tinta queda para texto, figuras, casillas de
   verificación y el foco del teclado.

   Campos y texto que aguantan (tabla medida en formas.css):
     celeste 8,42 · amarillo 10,32 · verde 7,37 · mortero 11,16 → tinta
     petróleo 11,94 · bermellón hondo 5,01                      → papel
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Los seis campos: un token de campo y uno de texto por verbo ─────────── */
.lugar--celeste,.vz--celeste,.ficha-cab--celeste{--campo:var(--celeste);--sobre:var(--tinta)}
.lugar--amarillo,.vz--amarillo,.ficha-cab--amarillo{--campo:var(--amarillo);--sobre:var(--tinta)}
.lugar--verde,.vz--verde,.ficha-cab--verde{--campo:var(--verde);--sobre:var(--tinta)}
.lugar--crudo,.vz--crudo,.ficha-cab--crudo{--campo:var(--mortero);--sobre:var(--tinta)}
.lugar--petroleo,.vz--petroleo,.ficha-cab--petroleo{--campo:var(--petroleo);--sobre:var(--papel)}
.lugar--bermellon,.vz--bermellon,.ficha-cab--bermellon{--campo:var(--bermellon-txt);--sobre:var(--papel)}
/* Séptimo campo (2026-10-07), para «Llegar y moverse»: azul hondo de la guía,
   papel encima 4,51:1 — pasa AA justo, así que sobre él no va texto de menos de 16 px. */
.lugar--azul,.vz--azul,.ficha-cab--azul{--campo:var(--azul-hondo);--sobre:var(--papel)}


/* ── Portada ─────────────────────────────────────────────────────────────── */
.dir-body{--moldura:3px}

/* El sitio hace entrar cada h2 al bajar. En una herramienta que se filtra y
   se recuenta, un titular que aparece tarde (la cuenta de resultados, por
   ejemplo) es un dato que falta: aquí nada se revela, todo está. */
.dir-body [data-revela],.dir-body [data-revela-hijos] > *{opacity:1!important;transform:none!important;transition:none!important}
.migas{font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--texto-70);
  margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:baseline}
.migas a{color:var(--tinta)}

/* ── Cabeza: título compacto + buscador + verbos | plano ─────────────────── */
/* Es una herramienta: el buscador va en el primer viewport, sin banner encima
   (CEO, 2026-09-26: «muy grande el banner»). El logo ya está en la barra. */
.dir-cabeza{padding:clamp(1.25rem,3vw,2.25rem) 0 clamp(1.5rem,3vw,2.25rem);background:var(--crudo)}
.dir-titulo h1{font-size:clamp(1.9rem,1.3rem + 1.9vw,3.1rem);line-height:1;max-width:none}
.dir-bajada{margin:.5rem 0 0;font-size:1.02rem;color:var(--texto-70);max-width:52ch}
.dir-titulo .migas{margin-bottom:.6rem}
/* En la página de un verbo, la cabecera acaba en SU zócalo: franja del color
   del verbo al pie, como el zócalo al pie de un muro. */
.dir-cabeza--celeste,.dir-cabeza--amarillo,.dir-cabeza--verde,.dir-cabeza--crudo,
.dir-cabeza--petroleo,.dir-cabeza--bermellon,.dir-cabeza--azul{box-shadow:inset 0 -14px 0 var(--campo);
  padding-bottom:calc(clamp(1.5rem,3vw,2.25rem) + 14px)}
.dir-cabeza--celeste{--campo:var(--celeste)} .dir-cabeza--amarillo{--campo:var(--amarillo)}
.dir-cabeza--verde{--campo:var(--verde)} .dir-cabeza--crudo{--campo:var(--mortero)}
.dir-cabeza--petroleo{--campo:var(--petroleo)} .dir-cabeza--bermellon{--campo:var(--bermellon-txt)}
.dir-cabeza--azul{--campo:var(--azul-hondo)}
.dir-cabeza .plano-lienzo{background:var(--papel)}

/* Limpiar filtros: botón de texto con aspa, 44 px de diana. */
.limpiar{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 .35rem;
  background:none;border:0;color:var(--tinta);font-family:var(--display);font-weight:700;font-size:.95rem;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.22em;cursor:pointer}
.limpiar::before{content:"";width:.75rem;height:.75rem;flex:none;
  background:linear-gradient(45deg,transparent 42%,currentColor 42% 58%,transparent 58%),
             linear-gradient(-45deg,transparent 42%,currentColor 42% 58%,transparent 58%)}
.limpiar[hidden]{display:none}
.limpiar:hover{color:var(--bermellon-txt)}
.dir-cabeza-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.dir-cabeza-izq{min-width:0;display:flex;flex-direction:column;gap:1.6rem}

.dir-buscar label{display:block;font-family:var(--display);font-weight:700;
  font-size:1.15rem;color:var(--tinta);margin:0 0 .55rem}
.dir-buscar-campo{position:relative}
.dir-buscar-campo svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);
  fill:none;stroke:var(--tinta);stroke-width:2.4;stroke-linecap:round;pointer-events:none}
.dir-buscar input{width:100%;height:4rem;padding:0 1rem 0 3.4rem;border:0;border-bottom:3px solid var(--tinta);
  border-radius:0;background:var(--papel);color:var(--tinta);font-family:var(--display);
  font-weight:600;font-size:1.25rem;-webkit-appearance:none;appearance:none}
.dir-buscar input::placeholder{color:var(--texto-45);font-weight:400}
.dir-buscar input:focus-visible{outline:3px solid var(--bermellon-txt);outline-offset:3px}

/* Los seis verbos son ZÓCALOS: campo pleno, moldura doble, figura al centro. */
.dir-verbos ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.vz{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.35rem;min-height:8.2rem;padding:1rem .6rem .9rem;text-align:center;text-decoration:none;
  background:var(--campo);color:var(--sobre)}
/* «Servicios del pueblo» es mortero: sobre la cabeza cruda se perdería, va en papel. */
.dir-cabeza .vz--crudo{--campo:var(--papel)}
.vz .zoc-fig{color:var(--sobre)}
.vz-nom{font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.15}
.vz-n{position:absolute;top:.55rem;right:.65rem;font-family:var(--display);font-weight:700;
  font-size:.9rem;font-variant-numeric:tabular-nums}
.vz:hover .vz-nom{text-decoration:underline;text-underline-offset:.2em}
.vz[aria-current="page"]{box-shadow:inset 0 -7px 0 var(--sobre)}

/* ── EL PLANO — la firma ─────────────────────────────────────────────────── */
.plano{margin:0;min-width:0}
.plano-tit{font-size:1.15rem;font-weight:700;letter-spacing:-.01em;margin:0 0 .55rem}
.plano-lienzo{background:var(--papel)}
.plano-svg{display:block;width:100%;height:auto;aspect-ratio:1000/601}
.pl-tierra{fill:var(--crudo)}
.pl-agua{fill:var(--celeste)}
.pl-senda{fill:none;stroke:var(--mortero);stroke-width:1.5;stroke-dasharray:3 3}
.pl-calle-borde{fill:none;stroke:#D9CFBC;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.pl-calle{fill:none;stroke:var(--papel);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.pl-via-borde{fill:none;stroke:var(--tinta);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.pl-via{fill:none;stroke:var(--amarillo);stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round}

.pin{stroke:var(--tinta);stroke-width:3;cursor:pointer;
  transition:opacity .25s ease, r .2s ease}
.pin--celeste{fill:var(--celeste)} .pin--amarillo{fill:var(--amarillo)} .pin--verde{fill:var(--verde)}
.pin--crudo{fill:var(--papel)} .pin--petroleo{fill:var(--petroleo)} .pin--bermellon{fill:var(--bermellon-txt)}
.pin--azul{fill:var(--azul-hondo)}
.pin[data-apagado]{opacity:.12;pointer-events:none}
.pin[data-activo],.pin--foco{r:15px;stroke-width:4}
.pin--foco{stroke:var(--tinta)}
/* En la ficha, el pin del negocio manda y los demás quedan de contexto. */
.plano--ficha .pin{opacity:.28;pointer-events:none}
.plano--ficha .pin--foco{opacity:1;r:16px;stroke-width:5}
.pin-aro{fill:none;stroke:var(--bermellon-txt);stroke-width:4}
@media (prefers-reduced-motion:reduce){.pin{transition:none}}

.plano-fuera{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:.8rem 0 0}
.plano-fuera p{margin:0;font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--texto-70)}
.plano-fuera ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.borde{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:0 .85rem;
  border:0;background:var(--papel);color:var(--tinta);
  font-family:var(--display);font-weight:600;font-size:.95rem}
.borde-n{font-variant-numeric:tabular-nums;font-weight:800}
.borde[aria-pressed="true"]{background:var(--tinta);color:var(--papel)}
.plano figcaption{margin:.6rem 0 0;font-size:.85rem;color:var(--texto-70)}

/* ── Catálogo ────────────────────────────────────────────────────────────── */
.dir-catalogo{padding:clamp(1.5rem,4vw,3rem) 0 clamp(3rem,6vw,5rem);background:var(--crudo)}
.dir-cat-in{display:grid;grid-template-columns:16.5rem minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:start}

/* Facetas: barra lateral fija en escritorio, hoja a pantalla completa en móvil. */
.dir-facetas{min-width:0}
.facetas-cab{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin:0 0 1rem;min-height:44px}
.facetas-cerrar,.facetas-pie{display:none}
.facetas-tit{font-size:1.4rem;margin-right:auto}
.facetas-tit{font-size:1.4rem}
.f-grupo{border:0;margin:0 0 1.5rem;padding:0;min-width:0}
.f-grupo legend{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--tinta);
  padding:0 0 .35rem;margin:0;width:100%}
.f-lista{list-style:none;margin:0;padding:0}
.f-op{display:grid;grid-template-columns:1.35rem minmax(0,1fr) auto;gap:.65rem;align-items:center;
  min-height:44px;padding:.2rem 0;border-bottom:1px solid var(--linea);cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:.98rem;color:var(--tinta)}
.f-op input{position:absolute;opacity:0;width:1px;height:1px}
.f-marca{width:1.35rem;height:1.35rem;border:2px solid var(--tinta);background:var(--papel);position:relative}
.f-marca--celeste{background:var(--celeste)} .f-marca--amarillo{background:var(--amarillo)}
.f-marca--verde{background:var(--verde)} .f-marca--crudo{background:var(--mortero)}
.f-marca--petroleo{background:var(--petroleo)} .f-marca--bermellon{background:var(--bermellon-txt)}
.f-marca--azul{background:var(--azul-hondo)}
.f-op input:checked + .f-marca::after{content:"";position:absolute;inset:2px;background:var(--tinta);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5 6 12.5 14 3.5' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5 6 12.5 14 3.5' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat}
.f-marca--petroleo::after,.f-marca--bermellon::after,.f-marca--azul::after{background:var(--papel)!important}
.f-op input:checked ~ .f-nom{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.f-op input:focus-visible + .f-marca,.f-op input:focus-visible + .f-sw{outline:3px solid var(--bermellon-txt);outline-offset:2px}
.f-n{font-variant-numeric:tabular-nums;color:var(--texto-70);font-weight:600}
.f-op[data-cero]{cursor:not-allowed;color:var(--texto-45)}
.f-op[data-cero] .f-marca{border-color:var(--texto-45)}
.f-op--sw{grid-template-columns:2.4rem minmax(0,1fr) auto}
.f-sw{width:2.4rem;height:1.35rem;border:2px solid var(--tinta);background:var(--papel);position:relative}
.f-sw::after{content:"";position:absolute;top:2px;left:2px;width:.85rem;height:.85rem;background:var(--tinta);transition:transform .15s ease}
.f-op--sw input:checked + .f-sw{background:var(--verde)}
.f-op--sw input:checked + .f-sw::after{transform:translateX(1.05rem)}

/* Barra de resultados */
.res-barra{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin:0 0 .9rem}
.res-cuenta{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);margin:0;font-variant-numeric:tabular-nums}
.res-limpiar{margin-right:auto}
.res-cuenta + .res-limpiar[hidden] + .res-filtros,.res-cuenta + .res-limpiar[hidden] ~ .res-orden{margin-left:auto}
.res-filtros{display:none}
.res-filtros-n[hidden]{display:none!important}
.res-orden{display:flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--texto-70)}
.res-orden select{min-height:44px;border:0;border-radius:0;background:var(--papel);
  color:var(--tinta);font-family:var(--display);font-weight:600;font-size:.95rem;padding:0 2rem 0 .7rem}
.res-vista{display:flex}
.res-vista button,.res-milista,.res-filtros{min-height:44px;padding:0 .9rem;border:0;
  background:var(--papel);color:var(--tinta);font-family:var(--display);font-weight:600;font-size:.95rem}
.res-vista button + button{margin-left:2px}
.res-vista button[aria-pressed="true"]{background:var(--tinta);color:var(--papel)}
.res-milista{display:inline-flex;align-items:center;gap:.5rem}
.res-milista-n{display:inline-grid;place-items:center;min-width:1.6rem;height:1.6rem;padding:0 .3rem;
  background:var(--amarillo);color:var(--tinta);font-weight:800;font-variant-numeric:tabular-nums}

.res-activos{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.res-activos:empty{display:none}
.res-activos button{display:inline-flex;align-items:center;gap:.5rem;min-height:40px;padding:0 .75rem;
  border:0;background:var(--papel);color:var(--tinta);
  font-family:var(--display);font-weight:600;font-size:.92rem}
.res-activos button::after{content:"";width:.7rem;height:.7rem;
  background:linear-gradient(45deg,transparent 43%,currentColor 43% 57%,transparent 57%),
             linear-gradient(-45deg,transparent 43%,currentColor 43% 57%,transparent 57%)}

/* ── La fachada ──────────────────────────────────────────────────────────── */
.res-lista{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1.25rem}
.lugar[hidden]{display:none}
.lugar-fachada{height:100%;display:flex;flex-direction:column;background:var(--papel)}
.lugar-muro{padding:1rem 1rem .95rem;display:flex;flex-direction:column;gap:.15rem;flex:1}
.lugar-nombre{font-size:1.2rem;font-weight:700;letter-spacing:-.015em;line-height:1.15;margin:0 0 .35rem}
.lugar-nombre a{color:var(--tinta);text-decoration:none}
.lugar-nombre a:hover{text-decoration:underline;text-underline-offset:.18em}
.lugar-nombre a::after{content:"";position:absolute;inset:0}  /* toda la fachada lleva a la ficha */
.lugar-fachada{position:relative}
.lugar-tipo{margin:0;font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--tinta)}
.lugar-zona{margin:0;font-size:.95rem;color:var(--texto-70)}
.lugar-rnt,.rnt-sello{display:inline-flex;align-items:center;gap:.4rem;margin:.45rem 0 0;align-self:flex-start;
  font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--tinta)}
.lugar-rnt::before,.rnt-sello::before{content:"";width:.7rem;height:.7rem;background:var(--verde-txt);transform:rotate(45deg)}
.lugar-acciones{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:auto;padding-top:.9rem}
/* Los botones quedan por encima del enlace que cubre la fachada entera. Sin
   posicionar el contenedor: si no, la estrella tomaría la fila como referencia. */
.lugar-acciones > *{position:relative;z-index:1}
/* El zócalo, al pie: campo del verbo, moldura arriba, la figura del oficio. */
.lugar-zocalo{display:grid;place-items:center;height:4.2rem;background:var(--campo);color:var(--sobre);
}
.lugar-zocalo .zoc-fig{color:var(--sobre)}
.lugar:focus-within .lugar-fachada{outline:3px solid var(--bermellon-txt);outline-offset:3px}
.lugar[data-activo] .lugar-fachada{box-shadow:0 0 0 4px var(--amarillo)}

/* Acciones: 44 px de alto — se pulsan con prisa, con una mano. */
.acc{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 .9rem;
  border:0;background:var(--mortero);color:var(--tinta);text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:.95rem;cursor:pointer}
.acc:hover{background:var(--celeste)}
/* La regla de diana mínima del sitio (a[href^="tel:"]) añade padding vertical
   y display inline-block: aquí la diana ya es de 44 px y descuadraba el texto. */
.acc[href^="tel:"],.acc[href^="mailto:"]{display:inline-flex;padding-block:0;min-width:0;min-height:44px}
.acc--wa{background:var(--bermellon-txt);color:var(--papel)}
.acc--wa:hover{background:var(--petroleo)}
.guardar{display:inline-grid;place-items:center;width:44px;height:44px;border:0;
  background:var(--mortero);color:var(--tinta)}
/* En la fachada, la estrella va arriba a la derecha, en la esquina del muro. */
.lugar-muro{position:relative}
.lugar-nombre{padding-right:3rem}
.lugar-muro .guardar{position:absolute;top:.75rem;right:.75rem;z-index:1}
.guardar svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.guardar[aria-pressed="true"]{background:var(--amarillo)}
.guardar[aria-pressed="true"] svg{fill:var(--tinta)}

/* Vista de lista: fila compacta, el zócalo pasa a la izquierda como un sello. */
.res-lista[data-vista="lista"]{grid-template-columns:1fr;gap:.5rem}
.res-lista[data-vista="lista"] .lugar-fachada{flex-direction:row}
.res-lista[data-vista="lista"] .lugar-zocalo{order:-1;width:4.5rem;height:4.5rem;align-self:flex-start;flex:none;
  margin:0}
.res-lista[data-vista="lista"] .lugar-zocalo .zoc-fig{width:32px;height:32px}
.res-lista[data-vista="lista"] .lugar-muro{display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:1rem;align-items:center;padding:.75rem 0 .75rem 1rem}
.res-lista[data-vista="lista"] .lugar-muro > *:not(.lugar-acciones){grid-column:1}
.res-lista[data-vista="lista"] .lugar-acciones{grid-column:2;grid-row:1 / span 4;margin:0;padding:0;flex-wrap:nowrap}
.res-lista[data-vista="lista"] .lugar-nombre{padding-right:0}
.res-lista[data-vista="lista"] .lugar-muro .guardar{position:static}
.res-lista[data-vista="lista"] .lugar-nombre{margin:0 0 .15rem}
.res-lista[data-vista="lista"] .lugar-rnt{margin-top:.25rem}

.res-vacio{padding:1.5rem;background:var(--papel);max-width:40rem}
.res-vacio p{margin:0 0 .75rem}
.res-vacio-t{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--tinta)}

/* ── Banda de registro ───────────────────────────────────────────────────── */
.dir-registro{background:var(--petroleo);color:var(--papel);padding:clamp(2.5rem,6vw,4.5rem) 0}
.dir-registro-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem 2.5rem;align-items:center}
.dir-registro h2{color:var(--papel);font-size:clamp(1.8rem,1.2rem + 2.2vw,3rem);grid-column:1}
.dir-registro p{margin:0;grid-column:1;color:var(--celeste);max-width:56ch;font-size:1.08rem}
.dir-registro .boton{grid-column:2;grid-row:1 / span 2}

/* ── Ficha de un negocio ─────────────────────────────────────────────────── */
/* La cabecera ENTERA es un zócalo: campo del verbo a lo ancho y moldura al pie. */
.ficha-cab{background:var(--campo);color:var(--sobre);padding:clamp(1.6rem,4vw,3rem) 0 clamp(1.8rem,4vw,3rem);
}
.ficha-cab .migas,.ficha-cab .migas a{color:var(--sobre)}
.ficha-cab-in{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(1rem,3vw,2rem);align-items:center}
.ficha-cab .migas{grid-column:1 / -1}
.ficha-zocalo{grid-row:2 / span 2;display:grid;place-items:center;width:clamp(5.5rem,11vw,8.5rem);aspect-ratio:1;
  background:var(--papel)}
.ficha-cab--petroleo .ficha-zocalo,.ficha-cab--bermellon .ficha-zocalo,.ficha-cab--azul .ficha-zocalo{background:transparent}
.ficha-zocalo .zoc-fig{color:var(--tinta);width:60%;height:60%}
.ficha-cab--petroleo .ficha-zocalo .zoc-fig,.ficha-cab--bermellon .ficha-zocalo .zoc-fig,.ficha-cab--azul .ficha-zocalo .zoc-fig{color:var(--papel)}
.ficha-cab h1{color:var(--sobre);font-size:clamp(2.2rem,1.3rem + 4vw,4.6rem);max-width:18ch;margin:0}
.ficha-cat{display:block;margin-top:.5rem;font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);font-weight:600;letter-spacing:0;line-height:1.2}
.ficha-acciones{grid-column:2;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem;align-items:center}
.ficha-acciones .guardar{margin-left:0}
/* Sobre campos oscuros, el botón de WhatsApp lleva filete de papel para no fundirse. */
.ficha-cab .acc:not(.acc--wa){background:var(--papel)}
.ficha-cab--bermellon .acc--wa{background:var(--tinta)}
.ficha-cab--petroleo .acc--wa{background:var(--bermellon-txt)}

.ficha-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(1.5rem,4vw,3.5rem);
  padding-top:clamp(2rem,5vw,3.5rem);padding-bottom:clamp(2rem,5vw,3.5rem);align-items:start}
.ficha-datos{margin:0}
.ficha-datos > div{padding:.85rem 0;border-bottom:1px solid var(--linea)}
.ficha-datos dt{font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--texto-70);margin:0 0 .15rem}
.ficha-datos dd{margin:0;font-size:1.05rem;color:var(--tinta);line-height:1.5}
.ficha-datos .rnt-sello{margin:0 .4rem 0 0}
.ficha-zona{max-width:26rem}
.ficha-otros{padding:clamp(2rem,5vw,3.5rem) 0;background:var(--crudo);margin-bottom:clamp(2rem,5vw,3.5rem)}
.ficha-otros h2{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.3rem);margin:0 0 1rem}
.ficha-tuyo{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.ficha-tuyo > div{background:var(--crudo);padding:1.25rem 1.25rem 1.4rem}
.ficha-tuyo h2{font-size:1.35rem;margin:0 0 .4rem}
.ficha-tuyo p{margin:0 0 1rem;color:var(--texto-70)}

/* ── Mi lista ────────────────────────────────────────────────────────────── */
.milista{width:min(34rem,calc(100vw - 2rem));max-height:min(40rem,calc(100vh - 2rem));padding:0;
  border:0;background:var(--papel);color:var(--tinta)}
.milista::backdrop{background:rgba(8,61,67,.55)}
.milista-cab{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.25rem;
  background:var(--amarillo)}
.milista-cab h2{font-size:1.5rem}
.milista-cerrar{min-height:44px;padding:0 .9rem;border:0;background:var(--papel);
  font-family:var(--display);font-weight:700}
.milista-vacia{margin:1.25rem;color:var(--texto-70)}
.milista-items{list-style:none;margin:0;padding:0 1.25rem}
.milista-items li{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:52px;border-bottom:1px solid var(--linea)}
.milista-items a{font-family:var(--display);font-weight:700;color:var(--tinta)}
.milista-items button{min-height:44px;min-width:44px;padding:0 .7rem;border:0;background:var(--mortero);
  font-family:var(--display);font-weight:600;font-size:.88rem}
.milista-pie{display:flex;flex-wrap:wrap;gap:.6rem;padding:1.1rem 1.25rem 1.3rem}
.milista[data-vacia] .milista-pie,.milista:not([data-vacia]) .milista-vacia{display:none}

/* ── Solo en móvil: barra inferior, cierre del plano, orden en la hoja ─── */
.dir-dock,.plano-cerrar{display:none}
.plano-cab{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.f-radio{width:1.35rem;height:1.35rem;border:2px solid var(--tinta);border-radius:50%;background:var(--papel);position:relative}
.f-op--radio input:checked + .f-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--tinta)}
.f-op--radio input:focus-visible + .f-radio{outline:3px solid var(--bermellon-txt);outline-offset:2px}
.f-op--radio{grid-template-columns:1.35rem minmax(0,1fr)}
@media (min-width:1081px){.f-orden{display:none}}
.lugar{scroll-margin-top:calc(var(--barra-alto,70px) + 1rem)}

/* ═════════════════════════════ RESPONSIVE ═══════════════════════════════
   Bloques al FINAL y sin @media anidadas (una anidada puede tumbar el bloque
   entero sin error — pasó en el menú móvil del sitio). */
@media (max-width:1080px){
  .dir-cabeza-in{grid-template-columns:1fr}
  .dir-cat-in{grid-template-columns:1fr}
  .res-filtros{display:inline-flex;align-items:center;gap:.45rem}
  .res-filtros-n{display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;background:var(--tinta);color:var(--papel);font-size:.85rem}
  .dir-facetas{position:fixed;inset:0;z-index:60;max-height:none;background:var(--papel);padding:0;
    display:flex;flex-direction:column}
  .dir-facetas:not([data-abierta]){display:none}
  .facetas-cab{display:flex;justify-content:space-between;align-items:center;padding:1rem var(--marco);
    background:var(--crudo)}
  .facetas-cerrar{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;border:0;background:var(--papel);font-family:var(--display);font-weight:700}
  .facetas-cab{margin:0}
  .facetas-cab .limpiar{display:none}   /* en la hoja móvil, Limpiar va al pie junto a «Ver N» */
  .facetas-form{flex:1;overflow:auto;padding:1.25rem var(--marco)}
  .facetas-pie{display:flex;gap:.6rem;padding:.9rem var(--marco) calc(.9rem + env(safe-area-inset-bottom));background:var(--crudo)}
  .facetas-ver{flex:1}
  .facetas-limpiar[hidden]{display:none}
  .ficha-cuerpo{grid-template-columns:1fr}
}
@media (max-width:760px){
  .dir-verbos{margin-inline:calc(var(--marco) * -1)}
  /* En móvil los verbos son una CALLE: tira horizontal con scroll-snap; no se apilan. */
  .dir-verbos ul{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.6rem;
    padding:.35rem var(--marco) .6rem;scrollbar-width:none}
  .dir-verbos ul::-webkit-scrollbar{display:none}
  .dir-verbos li{flex:0 0 8.4rem;scroll-snap-align:start}
  .vz{min-height:7.4rem}
  .res-vista{display:none}
  .res-barra{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.5rem}
  .res-cuenta{grid-column:1 / -1}
  .res-orden select{width:100%;min-width:0;padding-right:1.6rem}
  .res-orden{min-width:0}
  .res-lista[data-vista="lista"] .lugar-zocalo{width:3.6rem;height:3.6rem}
  .res-orden span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .res-cuenta{flex-basis:100%}
  .res-lista{grid-template-columns:1fr}
  .res-lista[data-vista="lista"] .lugar-muro{grid-template-columns:1fr}
  .res-lista[data-vista="lista"] .lugar-acciones{grid-column:1;grid-row:auto;padding-top:.6rem;flex-wrap:wrap}
  .dir-registro-in{grid-template-columns:1fr}
  .dir-registro .boton{grid-column:1;grid-row:auto;justify-self:start;margin-top:1rem}
  .ficha-cab-in{grid-template-columns:1fr}
  .ficha-zocalo{grid-row:auto;width:5rem;margin:0 0 1rem}
  .ficha-acciones{grid-column:1}
  .ficha-tuyo{grid-template-columns:1fr}
}
@media (max-width:420px){
  .acc{padding:0 .8rem}
  .res-barra{gap:.6rem}
}

/* La ficha sin punto en el plano usa el zócalo de formas.css: aquí sin su
   moldura doble — el campo de color es el borde. */
.ficha-zona .zoc-marco,.ficha-zona .zoc-campo{border:0;box-shadow:none;outline:0}

/* ═══════════════════════ MÓVIL: FÁCIL DE USAR CON UN PULGAR ═══════════════
   Medido antes del cambio (390×844): el primer negocio aparecía a 1.096 px,
   cada fila ocupaba 158 px y los controles se perdían al bajar. Ahora:
     · cabecera corta (título, buscador y una tira baja de verbos),
     · el plano sale de la página y se abre a pantalla completa,
     · una barra fija abajo con Buscar · Filtros · Plano · Mi lista,
     · filas compactas, y en la ficha, los contactos fijos abajo.
   El flotante de WhatsApp del sitio (el del Punto de Información) se oculta
   aquí: en un directorio lleno de botones de WhatsApp de negocios, un
   segundo verde flotando confunde y tapa la barra. El Punto sigue en la
   banda «Guatapé a mano» y en «Reportar un dato». */
@media (max-width:1080px){
  /* Barra inferior, plano a pantalla completa y contactos fijos: también en
     tableta, que se usa con el dedo (a 820 px el plano empujaba la lista). */
  .dir-body .wa-flota{display:none}
  .dir-body:has(.dir-dock),.dir-body:has(.ficha-acciones){padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .dir-cabeza .plano{display:none}
  .dir-cabeza .plano[data-abierto]{display:flex;flex-direction:column;position:fixed;inset:0;z-index:70;
    background:var(--crudo);padding:.7rem 0 calc(.7rem + env(safe-area-inset-bottom))}
  .plano[data-abierto] .plano-cab{padding:0 var(--marco) .6rem}
  .plano[data-abierto] .plano-cerrar{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;
    border:0;background:var(--papel);color:var(--tinta);font-family:var(--display);font-weight:700;font-size:.95rem}
  .plano[data-abierto] .plano-lienzo{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .plano[data-abierto] .plano-svg{height:100%;width:auto;max-width:none}
  .plano[data-abierto] .pin{r:15px;stroke-width:3.5}
  .plano[data-abierto] .plano-fuera,.plano[data-abierto] figcaption{padding:0 var(--marco)}
  .dir-dock{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--petroleo);padding-bottom:env(safe-area-inset-bottom)}
  .dir-dock button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
    min-height:62px;border:0;background:none;color:var(--papel);font-family:var(--display);font-weight:600;font-size:.8rem}
  .dir-dock svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .dir-dock button:active{background:var(--tinta)}
  .dir-dock .dock-n{position:absolute;top:.45rem;left:calc(50% + .5rem);display:grid;place-items:center;
    min-width:1.3rem;height:1.3rem;padding:0 .25rem;background:var(--amarillo);color:var(--tinta);font-size:.75rem;font-weight:800}
  .dir-dock .dock-n[hidden]{display:none}
  .dir-facetas{z-index:80}
  .ficha-acciones{position:fixed;left:0;right:0;bottom:0;z-index:50;margin:0;display:flex;gap:.4rem;
    padding:.55rem var(--marco) calc(.55rem + env(safe-area-inset-bottom));background:var(--papel);
    box-shadow:0 -4px 0 var(--campo)}
  .ficha-acciones .acc{flex:1;padding:0 .35rem;font-size:.9rem}
  .ficha-cab .ficha-acciones .acc:not(.acc--wa){background:var(--mortero)}
  .ficha-cab--bermellon .ficha-acciones .acc--wa{background:var(--bermellon-txt)}
  .res-barra .res-filtros,.res-barra .res-milista{display:none}
}
@media (max-width:760px){

  .dir-cabeza{padding:.9rem 0 1rem}
  .dir-cabeza-izq{gap:.85rem}
  .dir-titulo h1{font-size:1.6rem;line-height:1.05}
  .dir-bajada{font-size:.92rem;margin-top:.35rem}
  .dir-buscar label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .dir-buscar input{height:3.25rem;font-size:1.1rem;padding-left:3rem}
  .dir-buscar-campo svg{left:.8rem}

  /* Verbos: tira horizontal baja, figura a la izquierda del nombre. */
  .dir-verbos li{flex:0 0 auto}
  .vz{flex-direction:row;justify-content:flex-start;min-height:3.6rem;padding:.55rem 2.3rem .55rem .7rem;gap:.55rem;text-align:left}
  .vz .zoc-fig{width:28px;height:28px;flex:none}
  .vz-nom{font-size:.98rem;white-space:nowrap}
  .vz-n{top:50%;transform:translateY(-50%);right:.6rem;font-size:.85rem}
  .vz[aria-current="page"]{box-shadow:inset 0 -5px 0 var(--sobre)}

  /* El plano sale de la página: se abre desde la barra inferior. */
  /* El lienzo se arrastra con el dedo: el plano es apaisado y el teléfono vertical. */

  /* Catálogo */
  .dir-catalogo{padding:1rem 0 2rem}
  .res-barra{display:flex;flex-wrap:nowrap;align-items:center;gap:.5rem;margin-bottom:.6rem}
  .res-cuenta{font-size:1.35rem;flex:none}
  .res-barra .res-filtros,.res-barra .res-milista,.res-barra .res-orden{display:none}
  .res-limpiar{margin-right:0;margin-left:auto}
  .res-activos{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--marco) * -1);
    padding:0 var(--marco) .2rem}
  .res-activos::-webkit-scrollbar{display:none}
  .res-activos li{flex:none}

  /* Filas compactas: sello del oficio, nombre, tipo y zona en una línea, contacto. */
  .res-lista[data-vista="lista"]{gap:.45rem}
  .res-lista[data-vista="lista"] .lugar-zocalo{width:3.1rem;height:3.1rem;margin:.75rem 0 0 .75rem}
  .res-lista[data-vista="lista"] .lugar-zocalo .zoc-fig{width:24px;height:24px}
  .res-lista[data-vista="lista"] .lugar-muro{display:block;padding:.7rem .75rem .75rem .75rem;position:relative}
  .res-lista[data-vista="lista"] .lugar-nombre{font-size:1.05rem;margin:0 0 .15rem;padding-right:2.9rem}
  .res-lista[data-vista="lista"] .lugar-tipo,.res-lista[data-vista="lista"] .lugar-zona{display:inline;font-size:.88rem}
  .res-lista[data-vista="lista"] .lugar-tipo::after{content:"";display:inline-block;width:.3rem;height:.3rem;
    margin:0 .45rem .15rem;background:var(--texto-45);transform:rotate(45deg)}
  .res-lista[data-vista="lista"] .lugar-rnt{display:flex;margin-top:.3rem}
  .res-lista[data-vista="lista"] .lugar-acciones{display:flex;padding-top:.55rem;gap:.4rem}
  .res-lista[data-vista="lista"] .lugar-acciones .acc{flex:1}
  .res-lista[data-vista="lista"] .lugar-muro .guardar{position:absolute;top:.45rem;right:.45rem}

  /* La barra inferior: cuatro herramientas, icono y palabra. */

  /* La hoja de filtros ocupa la pantalla entera, por encima de la barra. */
  .facetas-cuerpo{flex:1;overflow:auto;padding:1rem var(--marco)}
  .facetas-cuerpo .facetas-form{padding:0;overflow:visible}

  /* Ficha: los contactos, fijos abajo al alcance del pulgar. */
  .ficha-cab{padding-bottom:1.4rem}
  .ficha-cab h1{font-size:2rem}
}
@media (min-width:761px) and (max-width:1080px){
  .facetas-cuerpo{flex:1;overflow:auto;padding:1.25rem var(--marco)}
  .facetas-cuerpo .facetas-form{padding:0;overflow:visible}
}


/* ═══════════════ FORMULARIO DE LA INTRANET (2026-10-07) ════════════════════
   Llegaron fotos, logo, descripción, horario y datos de cada negocio. */

/* La VENTANA de la fachada: la primera foto del negocio. Sin foto, el postigo
   cerrado pintado del color de su categoría —dos hojas con sus lamas—: la
   tarjeta no queda con un hueco gris y el catálogo mantiene un solo ritmo. */
.lugar-ventana{aspect-ratio:4/3;overflow:hidden;background:var(--campo)}
.lugar-ventana img{display:block;width:100%;height:100%;object-fit:cover}
.lugar-ventana--postigo{background:
  linear-gradient(90deg,transparent calc(50% - 2px),var(--papel) calc(50% - 2px) calc(50% + 2px),transparent calc(50% + 2px)),
  repeating-linear-gradient(180deg,transparent 0 14px,rgba(11,50,56,.13) 14px 16px),
  var(--campo);
  box-shadow:inset 0 0 0 10px var(--campo),inset 0 0 0 12px var(--papel)}
.lugar--petroleo .lugar-ventana--postigo,.lugar--bermellon .lugar-ventana--postigo,.lugar--azul .lugar-ventana--postigo{background:
  linear-gradient(90deg,transparent calc(50% - 2px),var(--papel) calc(50% - 2px) calc(50% + 2px),transparent calc(50% + 2px)),
  repeating-linear-gradient(180deg,transparent 0 14px,rgba(255,255,255,.14) 14px 16px),
  var(--campo)}

/* Abierto ahora: campo verde con tinta (7,37:1) y, al lado, cuándo cierra.
   Cerrado: la palabra en tinta y cuándo abre, sin color — no es una alarma. */
.estado{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .55rem;margin:.5rem 0 0;
  font-size:.92rem;line-height:1.35;color:var(--texto-70)}
.estado[hidden]{display:none}
.estado b{font-family:var(--display);font-weight:700;color:var(--tinta)}
.estado .estado-si{background:var(--verde);padding:.1rem .5rem}
/* En la cabecera de la ficha el campo ya es de color: el sello va en papel. */
.estado--ficha{grid-column:2;margin-top:1rem;font-size:1rem;color:var(--sobre)}
.estado--ficha b{color:var(--tinta);background:var(--papel);padding:.15rem .55rem}
.estado--ficha .estado-si{background:var(--papel);box-shadow:inset 6px 0 0 var(--verde-txt);padding-left:.9rem}

/* El logo del negocio ocupa el sello de la cabecera, sobre papel. */
.ficha-zocalo--logo{background:var(--papel)!important}
.ficha-zocalo--logo img{width:82%;height:82%;object-fit:contain}

/* Cuerpo de la ficha: a la izquierda lo que el negocio cuenta y sus datos; a
   la derecha, sus fotos y dónde está. */
.ficha-izq,.ficha-der{min-width:0;display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2.25rem)}
.ficha-sobre h2{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);margin:0 0 .75rem}
.ficha-texto{max-width:62ch}
.ficha-texto p{margin:0 0 .9rem;font-size:1.06rem;line-height:1.65;color:var(--texto)}
.ficha-texto p:last-child{margin-bottom:0}
.dd-lista{list-style:none;margin:0;padding:0}
.dd-lista li + li{margin-top:.2rem}
.ficha-datos dd a{color:var(--tinta);text-underline-offset:.2em;overflow-wrap:anywhere;
  display:inline-flex;align-items:center;min-height:32px}

/* Horario: una fila por franja; la de hoy, con el filete bermellón a la
   izquierda (el recurso del detalle del calendario) y la palabra «Hoy». */
.horario{list-style:none;margin:.15rem 0 0;padding:0}
.horario li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem 1rem;padding:.35rem 0 .35rem .7rem;
  box-shadow:inset 3px 0 0 var(--mortero)}
.horario li + li{margin-top:.25rem}
.hz-horas{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.hz-hoy{display:none}
.horario li[data-hoy]{box-shadow:inset 3px 0 0 var(--bermellon-txt);background:var(--crudo)}
.horario li[data-hoy] .hz-hoy{display:block;grid-column:1 / -1;order:-1;font-family:var(--display);font-weight:700;
  font-size:.85rem;color:var(--bermellon-txt)}
.horario-nota{margin:.5rem 0 0;font-size:.85rem;color:var(--texto-70)}

/* Galería: la primera a lo ancho, las demás en tira. Recorte a proporción
   fija: llegan verticales de teléfono y apaisadas en la misma ficha.
   ⚠ No se llama «.galeria»: esa clase ya es la de la home del sitio (72 px de relleno). */
.ficha-galeria{margin:0;padding:0}
.gal-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.gal-lista li{margin:0;aspect-ratio:1;overflow:hidden;background:var(--crudo)}
.gal-lista .gal-1{grid-column:1 / -1;aspect-ratio:4/3}
.gal-lista--2 li:not(.gal-1){grid-column:1 / -1;aspect-ratio:16/9}
.gal-lista img{display:block;width:100%;height:100%;object-fit:cover}

/* Vista de lista: la foto hace de sello; sin foto, el zócalo como antes. */
.res-lista[data-vista="lista"] .lugar-ventana{display:none}
.res-lista[data-vista="lista"] .lugar--foto .lugar-ventana{display:block;order:-1;flex:none;width:4.5rem;height:4.5rem;aspect-ratio:auto;align-self:flex-start}
.res-lista[data-vista="lista"] .lugar--foto .lugar-zocalo{display:none}
@media (max-width:760px){
  .res-lista[data-vista="lista"] .lugar--foto .lugar-ventana{width:3.1rem;height:3.1rem;margin:.75rem 0 0 .75rem}
  .estado--ficha{grid-column:1}
  .dir-verbos ul{display:flex}
}
/* En móvil y tableta, una sola columna en el orden de quien decide desde el
   teléfono: fotos, qué es, los datos y, al final, dónde queda. */
@media (max-width:1080px){
  .ficha-cuerpo{display:flex;flex-direction:column}
  .ficha-izq,.ficha-der{display:contents}
  .ficha-galeria{order:1} .ficha-sobre{order:2} .ficha-datos{order:3} .ficha-ubic{order:4}
}

/* Instagram en la cabecera de la ficha: botón de papel con el glifo en trazo.
   En la barra fija del móvil queda SOLO el icono (44×44): con WhatsApp, Llamar,
   Cómo llegar y la estrella, una quinta palabra no cabe a 390 px. */
.acc--ig{gap:.45rem}
.acc--ig svg{fill:none;stroke:currentColor;stroke-width:2}
.acc--ig .ig-punto{fill:currentColor;stroke:none}
@media (max-width:1080px){
  .ficha-acciones .acc--ig{flex:0 0 44px;padding:0}
  .ficha-acciones .acc--ig span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
/* Portadas verticales: el recorte 4:3 sube un poco para no cortar cabezas. */
.lugar-ventana img{object-position:50% 35%}
/* Barra fija de la ficha con Instagram: cinco controles. Los textos no se
   parten («Cómo llegar» caía en dos líneas a 390 px). */
@media (max-width:1080px){
  .ficha-acciones .acc{flex:1 1 auto;white-space:nowrap;font-size:.86rem;padding:0 .3rem}
  .ficha-acciones .acc--ig{flex:0 0 44px}
}
@media (max-width:360px){
  .ficha-acciones{gap:.3rem}
  .ficha-acciones .acc{font-size:.8rem;padding:0 .2rem}
}