/*
 * DIRECTORIO DE NEGOCIOS — Latinos en Texas
 *
 * Estilos del listado (archive-lt_negocio.php, taxonomy-lt_cat_negocio.php) y de
 * la ficha (single-lt_negocio.php).
 *
 * Aquí NO hay ni un color, ni un tamaño, ni un radio literal: todo sale de
 * tokens.css. El listado antiguo generaba 148 KB de CSS con `font-size:25px`
 * repetido una vez por negocio; este archivo describe el patrón una sola vez y
 * sirve para 46 fichas o para 4.600.
 *
 * Las clases propias del módulo van con prefijo (lt-dir-, lt-negocio-, lt-cupon)
 * porque otros módulos —ayudas, empleos, eventos— tendrán sus propias barras de
 * filtros: sin prefijo, dos hojas cargadas a la vez se pisarían. Si el patrón se
 * repite en tres módulos, entonces sí se promueve a base.css.
 *
 * ---------------------------------------------------------------------------
 * ESTE ES EL PRODUCTO QUE SE COBRA
 * ---------------------------------------------------------------------------
 * Un negocio paga por estar aquí y por estar destacado. Eso impone tres cosas
 * que no son estética, son el trato:
 *
 *   · TIENE QUE VERSE CARO. Si la ficha por la que cobras parece una entrada de
 *     listín telefónico, no se renueva al año siguiente. De ahí la portada a
 *     sangre, la fotografía en todas las tarjetas y la ficha con imagen grande.
 *   · LO PAGADO SE IDENTIFICA SIEMPRE. El ámbar es exclusivo de «Destacado» y
 *     el sello va sobre la foto, en el mismo sitio en todas las tarjetas, con
 *     su velo debajo para que se lea también sobre una foto blanca.
 *   · LO ÚTIL POR ENCIMA DE LO BONITO. Llamar, escribir por WhatsApp y llegar
 *     son las tres acciones que justifican el directorio. En el teléfono viven
 *     en una barra fija abajo, siempre alcanzables con el pulgar.
 */

/* ================================================================== */
/* LISTADO — portada a sangre                                          */
/* ================================================================== */

/*
 * La cabecera del directorio ocupa el ancho completo de la pantalla y se apoya
 * sobre el fondo nocturno. Es la primera pieza que ve quien llega desde Google
 * buscando «panadería mexicana en Houston», y antes era una banda azul pálido
 * con un H1 dentro: correcta y olvidable.
 *
 * La composición es ASIMÉTRICA a propósito: el texto ocupa la izquierda y el
 * mosaico de fotografías reales entra por la derecha, desbordando el borde
 * inferior. Nada de dos columnas iguales.
 */
.lt-dir-portada {
  position: relative;
  overflow: hidden;
  /* Bajo la cabecera translúcida, el primer bloque necesita aire extra o el
     menú se apoya sobre el titular. */
  padding-top: calc(var(--seccion-y) * .75);
}

/* Halo de marca en la esquina: rompe el plano del fondo oscuro sin cargar ni
   un byte de imagen. */
.lt-dir-portada::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -10%;
  width: 780px;
  height: 780px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--marca) 62%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

.lt-dir-portada > .lt-contenedor {
  position: relative;
  display: grid;
  gap: var(--e-5);
  align-items: center;
}

@media (min-width: 900px) {
  .lt-dir-portada > .lt-contenedor {
    /* 1.15fr / 1fr y no 1fr / 1fr: la asimetría es la decisión de diseño.
       Dos columnas iguales es exactamente el aspecto de plantilla que se
       estaba corrigiendo. */
    grid-template-columns: 1.15fr 1fr;
    gap: var(--e-6);
  }
}

/*
 * Sin mosaico —menos de cuatro negocios con foto— el texto ocupa las dos
 * columnas en vez de dejar media cabecera vacía. La plantilla ya decide no
 * pintar el mosaico; esto evita el hueco que quedaría si no.
 */
.lt-dir-portada__texto-bloque:only-child { grid-column: 1 / -1; }
.lt-dir-portada__texto-bloque:only-child .lt-dir-portada__texto { max-width: 62ch; }

.lt-dir-portada__titulo {
  margin-bottom: var(--e-3);
  /* El titular del directorio es lo más grande de la pantalla después del
     hero de la portada. Fraunces a este tamaño es lo que le da el aire
     editorial que pedía la dirección de arte. */
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  letter-spacing: var(--tracking-display);
}

.lt-dir-portada__texto {
  /* Medida de línea corta: un párrafo de 1.240 px de ancho no se lee, se
     escanea y se abandona. */
  max-width: 52ch;
  color: var(--niebla);
  font-size: 1.08rem;
  margin: 0;
}

/* Mosaico de fotografías reales -------------------------------------- */

/*
 * Cuatro fotos de negocios del directorio, escalonadas. Son DECORATIVAS
 * (aria-hidden y alt vacío en el marcado): la información no está aquí, está
 * en las tarjetas. Por eso tampoco es deshonesto que sean de negocios
 * concretos — se leen como un montaje del directorio, no como una afirmación
 * sobre ninguno de ellos.
 */
.lt-dir-portada__mosaico {
  display: none;   /* en móvil manda el texto: ver la consulta de abajo */
  position: relative;
  gap: var(--e-2);
}

@media (min-width: 900px) {
  .lt-dir-portada__mosaico {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

.lt-dir-portada__foto {
  border-radius: var(--radio-grande);
  overflow: hidden;
  /*
   * 16:9 Y NO 4:5 — 2026-08-18. El duenno: «quiero que sean 16.9 esas tarjetas
   * y no 9.16 porque no se ven bien».
   *
   * Y ademas encaja con el material: los flyers y las fotos de los negocios se
   * estan produciendo en 16:9, asi que un marco vertical recortaba por los
   * lados justo lo que la pieza tiene que ensenar. El recorte lo hace
   * `object-fit: cover` de aqui abajo, y cuanto menos tenga que recortar,
   * mejor sale la foto.
   */
  aspect-ratio: 16 / 9;
  background: var(--degradado-marca);
  box-shadow: var(--sombra-3);
}

.lt-dir-portada__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El escalonado: la segunda columna baja, y las piezas se solapan con el
   borde inferior de la sección. Es lo que convierte cuatro fotos en una
   composición. */
/*
 * EL DESNIVEL SE ACORTO AL PASAR A 16:9, y no es un retoque de gusto: es
 * aritmetica. Con el marco vertical la foto medía 318px de alto y bajar 48px
 * era un 15% de la pieza. Con 16:9 mide 143px —medido en produccion— y esos
 * mismos 48px son un tercio: las dos fotos de la columna izquierda se comian
 * el hueco entre ellas y quedaban pegadas.
 *
 * 24 / -16 / 8 mantiene la misma proporcion que tenia antes, y con ella la
 * composicion escalonada que hace que cuatro fotos no parezcan una tabla.
 */
.lt-dir-portada__foto:nth-child(2) { transform: translateY(var(--e-3)); }
.lt-dir-portada__foto:nth-child(3) { transform: translateY(calc(var(--e-2) * -1)); }
.lt-dir-portada__foto:nth-child(4) { transform: translateY(var(--e-1)); }

/* ================================================================== */
/* LISTADO — barra de filtros PEGAJOSA                                 */
/* ================================================================== */

/*
 * La barra se queda pegada bajo la cabecera mientras se recorren los
 * resultados. En un directorio de cientos de negocios, tener que volver arriba
 * para cambiar de ciudad es la razón número uno por la que alguien se rinde y
 * se va a Google.
 *
 * `top` suma el alto de la cabecera Y el desplazamiento de la barra de
 * administración de WordPress (declarado en estructura.css): sin ese segundo
 * sumando, al operador conectado se le queda el filtro medio tapado.
 *
 * OJO: esto depende de que ningún ancestro sea contenedor de scroll. Por eso
 * base.css usa `overflow-x: clip` en el body y no `hidden` — con `hidden` esta
 * barra deja de pegarse y no hay ningún aviso de que ha pasado.
 */
.lt-dir-filtros {
  position: sticky;
  top: calc(var(--alto-cabecera) + var(--desplazamiento-barra, 0px));
  z-index: 40;

  display: grid;
  /* Móvil primero: un campo por fila, a lo ancho, con la mano en el pulgar. */
  grid-template-columns: 1fr;
  gap: var(--e-2);
  padding: var(--e-3);
  margin-bottom: var(--e-4);

  /* Translúcida con desenfoque, como la cabecera: los resultados se ven pasar
     por debajo y la barra no parte la página en dos. */
  background: color-mix(in srgb, var(--blanco) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-1);
}

/* Sin desenfoque, opaca: si no, el texto de las tarjetas se leería a través
   de la barra. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lt-dir-filtros { background: var(--blanco); }
}

/*
 * En móvil NO se pega. Un formulario de cuatro campos apilados ocupa media
 * pantalla de teléfono: pegado, se comería el listado que está filtrando.
 * Es el caso clásico en que la misma decisión es acertada en escritorio y
 * absurda en el móvil.
 */
@media (max-width: 767px) {
  .lt-dir-filtros { position: static; }
}

.lt-dir-filtros__campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0; /* sin esto, un <select> con nombres largos desborda la rejilla */
}

.lt-dir-filtros__etiqueta {
  /* Etiquetas visibles, no placeholders: un placeholder desaparece al escribir
     y quien vuelve al formulario ya no sabe qué campo está rellenando. */
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--apagado);
}

.lt-dir-filtros__control {
  width: 100%;
  min-height: 48px;                 /* objetivo táctil cómodo */
  padding: 12px 14px;
  border: 1px solid var(--marca-borde);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-weight: var(--peso-texto);
  /* 16px exactos y no --fs-texto en rem: por debajo de 16px, Safari en iPhone
     hace zoom automático al enfocar el campo y descoloca toda la página. */
  font-size: 16px;
  line-height: 1.4;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.lt-dir-filtros__control:hover { border-color: var(--marca); }
.lt-dir-filtros__control:focus {
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-claro);
}

/* Se conserva la apariencia nativa del <select>: el selector de rueda de iOS y
   el de Android son mejores que cualquier menú que dibujemos, y no necesitan JS. */
select.lt-dir-filtros__control { cursor: pointer; }

.lt-dir-filtros__campo--accion { justify-content: flex-end; }

@media (min-width: 768px) {
  /* El buscador pesa el doble que cada filtro: es la acción principal. */
  .lt-dir-filtros { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; }
  .lt-dir-filtros__campo--accion .lt-btn { width: auto; }
}

@media (max-width: 767px) {
  /* En móvil el botón ocupa todo el ancho y cierra el formulario. */
  .lt-dir-filtros__campo--accion .lt-btn { width: 100%; }
}

/* ================================================================== */
/* LISTADO — la casilla «atienden en español»                          */
/* ================================================================== */

/*
 * ESTA CASILLA NO EXISTE TODAVÍA EN LA PÁGINA.
 *
 * La plantilla solo la pinta cuando hay AL MENOS un negocio marcado
 * (hay_en_espanol(), en inc/negocios-campos.php). Un filtro que hoy devolvería
 * cero resultados siempre es peor que no tener filtro: el vecino cree que no hay
 * nadie que le atienda en su idioma, cuando lo que pasa es que falta el dato.
 *
 * Por eso todo lo de aquí abajo está escrito para APARECER sin descolocar la
 * barra que ya estaba: ocupa una fila entera menos la última columna, y el botón
 * «Filtrar» cae solo a su derecha.
 *
 * `grid-column: 1 / -2` y NO un número fijo de columnas. La barra tiene cuatro
 * celdas normalmente y cinco cuando hay filtro de calificación (lo cambia
 * resenas.css con `--con-nota`, que hoy está activo). Con un número fijo, la
 * casilla se montaría encima del botón en cuanto cambiara el número de filtros.
 * Contando desde el final eso no puede pasar.
 */
.lt-dir-filtros__campo--espanol {
  flex-direction: row;
  align-items: center;
}

.lt-dir-espanol {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* La ETIQUETA ENTERA es la zona pulsable, no el cuadrito de 16 px que dibuja
     el sistema: apuntar a ese cuadrito con el pulgar es la primera razón por la
     que un filtro de casilla no se usa nunca en el móvil. 44 px es el mínimo. */
  min-height: 44px;
  padding-block: 4px;
  cursor: pointer;
  color: var(--tinta);
  font-size: var(--fs-chico);
  font-weight: var(--peso-medio);
  line-height: 1.3;
}

.lt-dir-espanol input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--marca);
  cursor: pointer;
}

.lt-dir-espanol:hover { color: var(--marca); }

/* El anillo va en la etiqueta y no en el cuadrito: lo que se recorre con el
   tabulador tiene que verse entero, no marcado por una esquina. */
.lt-dir-espanol:focus-within {
  outline: 2px solid var(--marca);
  outline-offset: 3px;
  border-radius: var(--radio-chico);
}

@media (min-width: 768px) {
  .lt-dir-filtros__campo--espanol { grid-column: 1 / -2; }
}

/*
 * El sello de la tarjeta. Neutro a propósito: el azul ya significa «Verificado»
 * y el ámbar significa «Destacado» (posición pagada). Un tercer color
 * convertiría la fila de sellos en un semáforo y ninguno de los tres se leería.
 */
.lt-sello--espanol {
  background: rgba(11, 18, 32, .06);
  color: var(--tinta);
}

/* ================================================================== */
/* LISTADO — el mapa                                                   */
/* ================================================================== */

/*
 * EL LIENZO NACE OCULTO. Solo aparece cuando assets/js/mapa-negocios.js ha
 * terminado de dibujar y pone `is-listo` en la sección. Sin JavaScript, con mala
 * cobertura o si Leaflet no carga, aquí no queda un rectángulo gris: no queda
 * nada, y debajo sigue el directorio completo. Un mapa vacío parece un sitio
 * roto; su ausencia, no.
 */
.lt-neg-mapa {
  /*
   * `position: relative` + `z-index: 0` NO son decorativos: crean un contexto de
   * apilamiento propio. Leaflet pinta sus capas y sus controles con z-index de
   * hasta 1000, y la barra de filtros de arriba es pegajosa con z-index 40. Sin
   * esta caja, al bajar por la página el mapa se dibujaría POR ENCIMA de la
   * barra que lo está filtrando.
   */
  position: relative;
  z-index: 0;
  margin-bottom: var(--e-4);
}

.lt-neg-mapa__titulo {
  margin: 0 0 var(--e-2);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
}

.lt-neg-mapa__lienzo { display: none; }

.lt-neg-mapa.is-listo .lt-neg-mapa__lienzo {
  display: block;
  /* Alto suficiente para leer un barrio sin comerse la pantalla del teléfono:
     a 320 px de ancho, 300 px de alto siguen dejando ver que abajo hay lista. */
  height: clamp(300px, 46vh, 480px);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  background: var(--hueso);
}

.lt-neg-mapa .leaflet-container {
  font-family: var(--fuente-texto);
  font-size: var(--fs-chico);
  background: var(--hueso);
}

/*
 * EL ANILLO DE FOCO DEL LIENZO.
 *
 * Leaflet pone `tabindex="0"` en el contenedor cuando el manejador de teclado
 * está encendido (lo está), así que el mapa entra en el recorrido del tabulador.
 * Y desde que recibir el foco ya NO activa nada —antes lo hacía, y así le robaba
 * la rueda a quien pasaba tabulando; ver assets/js/mapa-negocios.js— este anillo
 * es la única señal de que el mapa está ahí esperando las flechas.
 *
 * Se pinta a mano porque leaflet.css solo declara `outline-offset`: el anillo
 * fino que dibuja el navegador por su cuenta se pierde en un rectángulo de 480px
 * de alto lleno de teselas.
 */
.lt-neg-mapa .leaflet-container:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
}

/* El punto: azul de marca con un aro blanco para que se vea igual sobre un
   parque y sobre una autopista. Sin ninguna imagen — ver mapa-negocios.js. */
.lt-neg-mapa__pin { background: none; border: 0; }

.lt-neg-mapa__pin-punto {
  display: block;
  width: 18px;
  height: 18px;
  margin: 3px;
  border-radius: 50%;
  background: var(--marca);
  border: 3px solid var(--blanco);
  box-shadow: 0 1px 6px rgba(7, 19, 36, .45);
}

.lt-neg-mapa__pin:focus-visible { outline: none; }
.lt-neg-mapa__pin:focus-visible .lt-neg-mapa__pin-punto {
  outline: 3px solid var(--tinta);
  outline-offset: 2px;
}

/* La ficha que sale al pulsar un punto. */
.lt-neg-mapa__ficha-nombre {
  display: block;
  color: var(--marca);
  font-weight: var(--peso-fuerte);
}

.lt-neg-mapa__ficha-detalle {
  margin: 4px 0 0;
  color: var(--apagado);
}

/*
 * La pista de uso. Existe porque el mapa NO responde a la rueda hasta que se
 * pulsa dentro, y un control que no responde sin explicación se lee como
 * averiado. El guion la esconde en cuanto el mapa queda activado.
 */
.lt-neg-mapa__pista {
  display: none;
  margin: var(--e-2) 0 0;
  font-size: var(--fs-chico);
  color: var(--apagado);
}

.lt-neg-mapa.is-listo .lt-neg-mapa__pista { display: block; }
.lt-neg-mapa.is-activo .lt-neg-mapa__pista { display: none; }

/*
 * La lista equivalente. Va en un <details> —que abre y cierra sin una línea de
 * JavaScript— para no repetir cuarenta nombres justo encima de la rejilla que
 * los repite. Sin JavaScript sigue estando ahí, y es entonces la ÚNICA forma de
 * ver las ubicaciones: por eso no puede depender del guion.
 */
.lt-neg-mapa__lista-caja {
  margin-top: var(--e-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--blanco);
}

.lt-neg-mapa__lista-boton {
  /* 44 px de alto y el cursor de un botón: es un control, no un adorno. */
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px var(--e-2);
  cursor: pointer;
  color: var(--marca);
  font-size: var(--fs-chico);
  font-weight: var(--peso-medio);
}

.lt-neg-mapa__lista-boton:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: -2px;
  border-radius: var(--radio-chico);
}

.lt-neg-mapa__lista {
  margin: 0;
  padding: 0 var(--e-2) var(--e-2);
  list-style: none;
  display: grid;
  gap: var(--e-1);
}

@media (min-width: 700px) {
  .lt-neg-mapa__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .lt-neg-mapa__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.lt-neg-mapa__item {
  min-width: 0;   /* sin esto, un nombre largo desborda la columna */
  padding-top: var(--e-1);
  border-top: 1px solid var(--linea);
}

.lt-neg-mapa__enlace {
  display: inline-block;
  min-height: 32px;
  font-weight: var(--peso-medio);
  overflow-wrap: anywhere;
}

.lt-neg-mapa__detalle { display: block; }

.lt-neg-mapa__aviso { margin: var(--e-2) 0 0; }

/*
 * LA LÍNEA HONESTA DE MIENTRAS TANTO.
 *
 * Es el bloque de «Próximamente» de estructura.css, pero en una línea: el
 * directorio SÍ tiene contenido —45 negocios—, y plantarle encima el cartelón
 * grande de una sección vacía diría justo lo contrario de lo que pasa. Lo único
 * que falta aquí es el mapa.
 */
.lt-proximamente--linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1) var(--e-3);
  max-width: none;
  margin-bottom: var(--e-4);
  padding: var(--e-3);
  text-align: left;
  border-radius: var(--radio-tarjeta);
}

.lt-proximamente--linea .lt-proximamente__sello { margin: 0; }

.lt-proximamente--linea .lt-proximamente__promesa {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  color: var(--apagado);
}

/* ================================================================== */
/* LISTADO — «cerca de mí»                                             */
/* ================================================================== */

/*
 * El control de ubicación (inc/distancia.php). Va entre el mapa y el conteo, y
 * se lee como una barra de una sola línea en escritorio y como una pila en el
 * teléfono.
 *
 * ATENCIÓN AL `hidden`: la caja sale del servidor con el atributo `hidden`
 * puesto en el HTML y solo lo quita el guion cuando confirma que el navegador
 * tiene geolocalización. Aquí NO hay ninguna regla que la esconda, y es a
 * propósito: si el CSS la escondiera, sería el CSS quien decide, y entonces
 * `hidden` dejaría de ser verdad para quien lee el HTML. Que nadie añada un
 * `display:none` a `.lt-dir-cerca` — rompería la degradación sin JavaScript.
 */
.lt-dir-cerca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  margin-bottom: var(--e-4);
  padding: var(--e-3);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
}

/* El navegador ya aplica `display:none` a [hidden], pero `display:flex` de la
   regla de arriba lo GANA por especificidad de propiedad —la hoja de usuario no
   compite con la del autor—. Sin esto, el bloque se vería con el guion apagado:
   exactamente lo que se está evitando. */
.lt-dir-cerca[hidden] { display: none; }

.lt-dir-cerca__forma {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1) var(--e-3);
  /* Que la forma crezca y empuje: el botón a la izquierda y su explicación al
     lado, sin que la nota se pegue debajo cuando hay sitio de sobra. */
  flex: 1 1 auto;
  margin: 0;
}

/* El botón hereda .lt-btn (46 px de alto): no se le toca el tamaño. Solo se le
   impide encogerse cuando la nota de al lado es larga en inglés. */
.lt-dir-cerca__boton { flex: 0 0 auto; }

.lt-dir-cerca__nota {
  flex: 1 1 220px;
  margin: 0;
}

.lt-dir-cerca__estado {
  flex: 1 1 260px;
  margin: 0;
  font-weight: var(--peso-medio);
}

.lt-dir-cerca__estado .lt-chico {
  display: block;
  font-weight: var(--peso-texto);
}

/*
 * QUITAR LA UBICACIÓN ES UN ENLACE, Y TIENE QUE PODERSE PULSAR CON EL PULGAR.
 *
 * 44 px de alto reales —no un enlace de texto de 20— porque es la salida: quien
 * quiere dejar de compartir su ubicación no debe tener que apuntar. El subrayado
 * se queda: sin él, un texto azul dentro de una caja llena de texto no se
 * distingue de un rótulo.
 */
.lt-dir-cerca__quitar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: 0 0 auto;
  color: var(--marca);
  font-size: var(--fs-chico);
  font-weight: var(--peso-fuerte);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lt-dir-cerca__quitar:hover { color: var(--marca-oscuro); }

.lt-dir-cerca__quitar:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 3px;
  border-radius: var(--radio-chico);
}

/*
 * El aviso de «no pudimos obtener tu ubicación». Ocupa la fila entera: es una
 * frase que hay que leer entera, no una etiqueta al lado de un botón.
 *
 * NO VA EN ROJO, y se probó en rojo antes de decidirlo. Dos razones:
 *   · La paleta de este sitio es azul, blanco y negro. El rojo de --alerta está
 *     reservado a las alertas urgentes de noticias —una redada, un cierre—, y
 *     gastarlo aquí le quita fuerza justo donde hace falta de verdad.
 *   · Tampoco es una alarma. Que el teléfono no dé la ubicación no es culpa de
 *     nadie ni rompe nada: el directorio sigue entero y el selector de ciudad
 *     hace el mismo trabajo. Pintarlo de rojo sería asustar por una cosa que se
 *     arregla con el desplegable de arriba.
 *
 * Tinta sobre la superficie tintada de marca: 16:1 medido, muy por encima de AA.
 */
.lt-dir-cerca__aviso {
  flex: 1 1 100%;
  margin: 0;
  padding: var(--e-1) var(--e-2);
  background: var(--marca-claro);
  color: var(--tinta);
  border-radius: var(--radio-chico);
  font-size: var(--fs-chico);
}

.lt-dir-cerca__aviso[hidden] { display: none; }

/* En el teléfono, todo en pila y el botón a lo ancho: es la única forma de que
   el pulgar lo acierte sin mirar. */
@media (max-width: 640px) {
  .lt-dir-cerca { padding: var(--e-2); }
  .lt-dir-cerca__forma { flex-direction: column; align-items: stretch; }
  .lt-dir-cerca__boton { width: 100%; }
}

/* ================================================================== */
/* LISTADO — resumen de resultados                                     */
/* ================================================================== */

.lt-dir-resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-1) var(--e-3);
  margin-bottom: var(--e-4);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--linea);
}

.lt-dir-conteo { margin: 0; }

/* El número de resultados en Fraunces: un dato editorial, no un contador de
   sistema. Es el detalle que separa «46 negocios» de «46 resultados». */
.lt-dir-conteo strong {
  font-family: var(--fuente-titulo);
  font-optical-sizing: auto;
  font-size: 1.35rem;
  font-weight: var(--peso-titulo);
  letter-spacing: var(--tracking-titulo);
}

.lt-dir-limpiar {
  font-weight: var(--peso-medio);
  white-space: nowrap;
}

/* ================================================================== */
/* LISTADO — tarjetas                                                  */
/* ================================================================== */

/*
 * El grueso de la tarjeta vive en base.css: foto obligatoria, zoom lento,
 * velo, categoría flotante y respaldo con inicial. Aquí solo va lo que es
 * específico del directorio.
 */

.lt-dir-rejilla { align-items: stretch; }

.lt-dir-tarjeta__media { position: relative; }

/* El sello de pagado va SOBRE la imagen y siempre en el mismo sitio: es el
   compromiso del proyecto de identificar toda posición patrocinada. Si se
   escondiera en el cuerpo de la tarjeta, se perdería al recortar el texto.
   z-index 2 para quedar por encima del velo. */
.lt-dir-tarjeta__sello {
  position: absolute;
  top: var(--e-2);
  left: var(--e-2);
  z-index: 2;
  box-shadow: var(--sombra-1);
}

/*
 * LA TARJETA DESTACADA — lo que se paga.
 *
 * Ya no es «la misma tarjeta con el borde de otro color». Ocupa el doble de
 * ancho y coloca la fotografía a la izquierda, así que abre la rejilla y es lo
 * primero que ve el ojo. Eso es exactamente lo que compra el negocio que paga,
 * y de paso rompe la monotonía de las tres columnas iguales.
 *
 * El filete ámbar se mantiene: refuerza el sello sin necesitar un segundo
 * texto, y sigue siendo la señal de «esto está patrocinado».
 */
.lt-dir-tarjeta--destacada {
  box-shadow: var(--sombra-1), 0 0 0 2px var(--acento);
}
.lt-dir-tarjeta--destacada:hover {
  box-shadow: var(--sombra-2), 0 0 0 2px var(--acento);
}

/*
 * LA DESTACADA MIDE LO MISMO QUE TODAS — 2026-08-18.
 *
 * HISTORIA CORTA, PORQUE CAMBIO DOS VECES EN UN DIA:
 *   1. Era doble ancho con la foto A LA IZQUIERDA, estirada al alto de la
 *      tarjeta (medido: 282x551). Una pieza de 16:9 ahi perdia mas de la mitad.
 *   2. Paso a doble ancho con la foto ARRIBA en 16:9.
 *   3. Y de ahi a esto: el MISMO tamano que cualquier otra.
 *
 * El paso 3 lo pidio el duenno con el motivo puesto: «no quiero que queden asi,
 * quiero que todas queden del mismo tamano, porque si no luego van a pensar que
 * le estamos dando prioridad a un negocio».
 *
 * Y es coherente con lo que ya hacia el sitio: el doble ancho GRITABA prioridad
 * sin decir por que. El sello «DESTACADO» la dice, y con letras.
 *
 * LO QUE NO SE TOCA, y es importante:
 *   · el SELLO sobre la foto — es el compromiso de identificar toda posicion
 *     pagada; sin el, el orden se convertiria en una prioridad secreta;
 *   · el FILETE de color;
 *   · el ORDEN: los destacados siguen primero, y la nota bajo el conteo lo
 *     sigue diciendo en voz alta.
 *
 * Ya no hace falta ninguna consulta de ancho aqui: sin `grid-column: span 2`
 * tampoco hay que devolverlo a `auto` en el telefono.
 */

/*
 * Marca de agua con la inicial cuando el negocio no subió foto.
 *
 * Se conserva la clase histórica (la plantilla la imprime) y se rehace por
 * dentro: ya no es un cuadro azul pálido con una letra, es la pieza diseñada
 * del respaldo —degradado de marca, inicial gigante en Fraunces— que describe
 * base.css. Tiene que verse como una decisión, no como una foto que falta.
 */
.lt-dir-inicial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--degradado-marca);
  color: var(--blanco);
  font-family: var(--fuente-titulo);
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: clamp(3.5rem, 9vw, 5rem);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  opacity: .92;
  /* La mayúscula se pone aquí y no en PHP: mb_strtoupper no existe en todos los
     servidores y una función que puede no existir no debe decidir el diseño. */
  text-transform: uppercase;
  user-select: none;
}

/* Separadores entre categoría y ciudad sin pintar puntos en el HTML: el
   contenido es del dato, no de la decoración. */
.lt-dir-tarjeta__cat + .lt-dir-tarjeta__cat::before,
.lt-dir-tarjeta__ciudad::before {
  content: '·';
  margin-right: var(--e-1);
  color: var(--linea);
}

/* La categoría en el cuerpo va en terracota OSCURECIDA: la terracota pura
   sobre blanco se queda en 3.3:1 y no pasa AA para texto de 14px. */
.lt-dir-tarjeta__cat {
  color: var(--brasa-texto);
  font-weight: var(--peso-medio);
}

.lt-dir-tarjeta__ciudad { font-weight: var(--peso-medio); }

/*
 * LA DISTANCIA EN LA TARJETA («a 3,2 millas»).
 *
 * Es una PÍLDORA y no una palabra más de la línea, porque no es del mismo tipo
 * que la categoría o la ciudad: aquello describe al negocio, esto describe la
 * relación entre el negocio y quien mira. Sale solo cuando el visitante ha
 * compartido su ubicación, así que cuando aparece es lo que estaba buscando.
 *
 * Azul de marca sobre la superficie tintada: #295091 sobre #E8EEF7 = 6,8:1,
 * por encima de AA para texto pequeño. Sin borde propio ni sombra: es una
 * etiqueta, no un botón, y no se pulsa.
 *
 * No lleva el separador «·» de sus vecinas porque va la PRIMERA de la línea:
 * un punto antes del primer elemento se lee como un error de maquetación.
 */
.lt-dir-tarjeta__distancia {
  display: inline-block;
  margin-right: var(--e-1);
  padding: 2px 10px;
  background: var(--marca-claro);
  color: var(--marca);
  border-radius: var(--radio-pildora);
  font-weight: var(--peso-fuerte);
  /* Sin partirse nunca: «a 3,2 millas» cortado en dos líneas dentro de una
     píldora se ve como un fallo, y en el móvil la línea va justa. */
  white-space: nowrap;
}

/* La tarjeta entera es un enlace (::after de .lt-tarjeta__enlace-total). Los
   botones de llamar y WhatsApp tienen que quedar POR ENCIMA de esa capa o el
   dedo abriría la ficha en vez de marcar el teléfono: ese fallo convierte la
   función más útil del directorio en un botón muerto. */
.lt-dir-acciones {
  position: relative;
  z-index: 2;
}

/* ================================================================== */
/* LOS DATOS DEL NEGOCIO EN LA TARJETA                                 */
/* Dirección, teléfono y redes. Lo pidió el dueño (punto 1).           */
/* ================================================================== */

.lt-dir-tarjeta__datos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--e-1) 0 0;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--apagado);
}

/* Cada dato lleva delante un símbolo que lo identifica sin necesidad de
   rótulo: en una tarjeta de directorio, «Dirección:» escrito delante de
   cada línea gasta la mitad del ancho en repetir lo evidente. El rótulo de
   verdad sigue ahí para el lector de pantalla (.lt-solo-lector). */
.lt-dir-tarjeta__dato {
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.lt-dir-tarjeta__dato::before {
  flex: 0 0 auto;
  opacity: .75;
  font-size: .9em;
}

.lt-dir-tarjeta__dato--donde::before  { content: "\1F4CD"; }  /* alfiler */
.lt-dir-tarjeta__dato--tel::before    { content: "\260E\FE0E"; }  /* teléfono */
.lt-dir-tarjeta__dato--redes::before  { content: "\1F517"; }  /* eslabón */

/* La dirección puede ser larga: dos líneas como mucho, y con puntos
   suspensivos. Una tarjeta que crece hasta seis líneas rompe la rejilla y
   deja las de al lado con un hueco debajo. */
.lt-dir-tarjeta__dato--donde {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lt-dir-tarjeta__dato--donde::before { display: inline; margin-right: 6px; }

/* El número, con cifras de ancho fijo: en una columna de tarjetas los
   teléfonos quedan alineados y se leen de un vistazo. */
.lt-dir-tarjeta__dato--tel { font-variant-numeric: tabular-nums; }

.lt-dir-tarjeta__dato--redes { flex-wrap: wrap; }

/* Igual que los botones: por encima del enlace que cubre la tarjeta, o el
   dedo abriría la ficha en vez de ir a Instagram. */
.lt-dir-tarjeta__red {
  position: relative;
  z-index: 2;
  color: var(--marca);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.lt-dir-tarjeta__red:hover,
.lt-dir-tarjeta__red:focus-visible {
  border-bottom-color: currentColor;
}

/* ================================================================== */
/* LISTADO — paginación y vacío                                        */
/* ================================================================== */

.lt-dir-paginacion { margin-top: var(--e-5); }

.lt-dir-paginacion ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.lt-dir-paginacion a,
.lt-dir-paginacion span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;    /* objetivo táctil: nadie acierta un número de 14 px */
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  text-decoration: none;
  color: var(--tinta);
  font-size: var(--fs-chico);
  font-weight: var(--peso-medio);
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}

.lt-dir-paginacion a:hover {
  border-color: var(--marca);
  background: var(--marca-claro);
  color: var(--marca);
}

.lt-dir-paginacion .current {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--blanco);
}

.lt-dir-paginacion .dots { border-color: transparent; }

.lt-dir-vacio {
  padding: var(--e-6) var(--e-3);
  text-align: center;
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
}

.lt-dir-vacio__titulo {
  font-family: var(--fuente-titulo);
  font-optical-sizing: auto;
  font-size: var(--fs-h3);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--tracking-titulo);
  margin-bottom: var(--e-1);
}

/* ================================================================== */
/* LISTADO — cierre comercial                                          */
/* ================================================================== */

.lt-dir-cta p {
  max-width: 56ch;
  margin-bottom: var(--e-3);
}

/* ================================================================== */
/* FICHA — portada con imagen grande                                   */
/* ================================================================== */

/*
 * La ficha abre con la fotografía del negocio a lo ancho y el nombre encima,
 * sobre el velo. Antes abría con una banda gris, un logo de 104px y un H1: la
 * ficha por la que se cobra parecía la menos importante del sitio.
 *
 * La portada es OSCURA siempre, haya foto o no: así el nombre del negocio se
 * lee en blanco en los dos casos y no hay dos maquetaciones que mantener.
 */
.lt-negocio-portada {
  position: relative;
  overflow: hidden;
  background: var(--noche);
  color: var(--blanco);
  --linea: var(--linea-honda);
  padding-top: calc(var(--seccion-y) * .7);
}

/* La fotografía de fondo, a sangre. Va como <img> y no como background-image
   porque un background no se puede describir, no entra en el srcset de
   WordPress y se descarga entero aunque el móvil solo necesite 400px. */
.lt-negocio-portada__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.lt-negocio-portada__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El velo. Sobre la foto de una taquería a mediodía, un titular blanco sin
   velo es invisible: --capa-solida deja la foto como textura y el nombre como
   asunto, que es la jerarquía correcta en una ficha. */
.lt-negocio-portada__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--velo-foto);
  opacity: var(--capa-solida);
}

.lt-negocio-portada > .lt-contenedor { position: relative; z-index: 1; }

.lt-miga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1);
  margin-bottom: var(--e-4);
  color: var(--niebla);
}

.lt-miga a { text-decoration: none; color: var(--cielo); }
.lt-miga a:hover { text-decoration: underline; color: var(--cielo-claro); }

.lt-negocio-encabezado {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
}

.lt-negocio__logo {
  flex: none;
  width: 116px;
  height: 116px;
  padding: 10px;
  background: var(--blanco);
  border: 0;
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-2);
  /* contain y no cover: casi todos suben su logotipo, y recortarlo por el
     centro le corta el nombre a la marca del cliente que paga la ficha. */
  object-fit: contain;
}

/*
 * El medallón con la inicial, para los negocios que todavía no han subido su
 * logotipo. Hereda el tamaño, el radio y la sombra del logo real: cuando el
 * dueño suba el logotipo, la pieza cambia de contenido pero no de sitio ni de
 * tamaño, así que la ficha no se recoloca delante del visitante.
 */
.lt-negocio__logo--inicial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--degradado-marca);
  color: var(--blanco);
  font-family: var(--fuente-display, inherit);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  /* La inicial es una letra suelta y grande: sin este ajuste óptico se lee
     desplazada hacia la izquierda dentro del cuadrado. */
  letter-spacing: .02em;
  text-indent: .02em;
  user-select: none;
}

.lt-negocio-encabezado__texto { min-width: 0; flex: 1 1 260px; }

.lt-negocio-sellos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin-bottom: var(--e-2);
}

.lt-negocio__nombre {
  margin-bottom: var(--e-3);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: var(--tracking-display);
  /* Un nombre largo sin espacios no puede desbordar la pantalla. */
  overflow-wrap: anywhere;
}

.lt-negocio-taxonomias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin: 0;
}

.lt-negocio-pildora {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 6px 16px;
  border-radius: var(--radio-pildora);
  /* Sobre la portada oscura las píldoras son de cristal: fondo translúcido y
     filete claro. Un fondo blanco sólido aquí se vería como un parche. */
  background: color-mix(in srgb, var(--blanco) 12%, transparent);
  border: 1px solid var(--noche-borde);
  color: var(--blanco);
  font-size: var(--fs-chico);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion);
}

.lt-negocio-pildora:hover {
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--noche);
}

/* La ciudad se distingue del resto de píldoras: es el filtro transversal del
   proyecto y conviene que el ojo lo reconozca igual en toda la plataforma. */
.lt-negocio-pildora--ciudad {
  background: var(--brasa);
  border-color: var(--brasa);
  color: var(--brasa-tinta);
  font-weight: var(--peso-fuerte);
}
.lt-negocio-pildora--ciudad:hover {
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--noche);
}

/* ================================================================== */
/* FICHA — dos columnas                                                */
/* ================================================================== */

.lt-negocio-columnas {
  display: grid;
  gap: var(--e-5);
}

@media (min-width: 900px) {
  .lt-negocio-columnas {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: var(--e-6);
  }
  /* En el HTML el panel de contacto va PRIMERO —en el móvil los botones de
     llamar tienen que estar antes que la descripción—; en pantalla grande el
     orden visual se invierte y el panel acompaña al texto desde la derecha. */
  .lt-negocio-panel  { order: 2; position: sticky; top: calc(var(--alto-cabecera) + var(--desplazamiento-barra, 0px) + var(--e-3)); }
  .lt-negocio-cuerpo { order: 1; }
}

.lt-negocio-panel {
  padding: var(--e-4);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-2);
}

.lt-negocio-panel__titulo {
  font-size: var(--fs-h4);
  margin-bottom: var(--e-3);
}

/* Botones grandes, apilados y a ancho completo: la acción más frecuente del
   directorio es llamar desde el teléfono con una sola mano. */
.lt-negocio-acciones {
  display: grid;
  gap: var(--e-1);
  margin-bottom: var(--e-3);
}

.lt-negocio-acciones .lt-btn { min-height: 52px; }

.lt-negocio-datos { margin: 0; }

.lt-negocio-datos dt {
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--apagado);
  margin-top: var(--e-3);
}

.lt-negocio-datos dd {
  margin: 4px 0 0;
  /* Direcciones y correos largos parten en vez de desbordar la columna. */
  overflow-wrap: anywhere;
}

/* Los horarios se guardan como texto libre con saltos de línea; pre-line los
   respeta sin tener que permitir HTML en el campo. */
.lt-negocio-horario { white-space: pre-line; }

.lt-negocio-bloque + .lt-negocio-bloque { margin-top: var(--e-6); }

/* Los títulos de bloque llevan el filete de terracota: el mismo recurso
   editorial que las etiquetas de sección, para que la ficha se lea como una
   pieza de la misma revista. */
.lt-negocio-bloque > h2 {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--fs-h3);
}
.lt-negocio-bloque > h2::before {
  content: '';
  width: 24px;
  height: 3px;
  flex: none;
  border-radius: 2px;
  background: var(--brasa);
}

.lt-negocio-texto {
  /* Medida de lectura: la descripción de un negocio a 900px de ancho no se lee. */
  max-width: var(--contenedor-texto);
  font-size: 1.05rem;
}
.lt-negocio-texto > :last-child { margin-bottom: 0; }

/* ================================================================== */
/* FICHA — barra de acciones fija en móvil                             */
/* ================================================================== */

/*
 * Llamar · WhatsApp · Cómo llegar, clavadas abajo mientras se lee la ficha.
 *
 * POR QUÉ: el 80% del tráfico llega desde el teléfono y desde WhatsApp, y en
 * una pantalla de móvil el panel de contacto queda al final de la descripción,
 * los horarios y los cupones. Quien busca un cerrajero a las once de la noche
 * no baja tres pantallas para encontrar el botón de llamar: se va.
 *
 * En escritorio NO se pinta: ahí el panel lateral es sticky y ya acompaña al
 * texto: repetir los botones abajo sería un doble botón compitiendo consigo
 * mismo.
 */
.lt-negocio-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  gap: var(--e-1);
  padding: var(--e-1) var(--canal);
  /* El respaldo sin `env()` es el mismo relleno: en un iPhone con barra de
     gestos, sin esto los botones quedan medio tapados por el indicador. */
  padding-bottom: var(--e-1);
  padding-bottom: calc(var(--e-1) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--blanco) 94%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -8px 30px rgba(7, 19, 36, .12);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lt-negocio-barra { background: var(--blanco); }
}

.lt-negocio-barra .lt-btn {
  flex: 1 1 0;
  min-width: 0;
  /* 48px de alto: es un objetivo táctil que se acierta con el pulgar en
     movimiento, que es como se usa esta barra. */
  min-height: 48px;
  padding-inline: var(--e-2);
  /* Tres botones en 360px de pantalla: la etiqueta no puede partirse en dos
     líneas ni empujar a los vecinos. */
  white-space: nowrap;
  font-size: 12px;
}

/* Hueco al final de la ficha para que la barra no tape la última línea ni el
   pie: sin esto, el último bloque queda debajo de los botones. */
.lt-negocio--con-barra { padding-bottom: 84px; }

@media (min-width: 900px) {
  .lt-negocio-barra { display: none; }
  .lt-negocio--con-barra { padding-bottom: 0; }
}

/* ================================================================== */
/* FICHA — cupones                                                     */
/* ================================================================== */

.lt-negocio-cupones {
  display: grid;
  gap: var(--e-2);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .lt-negocio-cupones { grid-template-columns: repeat(2, 1fr); }
}

.lt-cupon {
  padding: var(--e-3);
  /* Borde discontinuo: la forma de un cupón recortable, reconocible de un
     vistazo sin añadir una imagen que habría que descargar. */
  border: 2px dashed var(--acento);
  border-radius: var(--radio-tarjeta);
  background: var(--hueso);
}

.lt-cupon__titulo {
  font-size: var(--fs-h4);
  margin-bottom: var(--e-1);
}

.lt-cupon__titulo a { color: inherit; text-decoration: none; }
.lt-cupon__titulo a:hover { color: var(--marca); }

.lt-cupon__codigo {
  display: inline-block;
  margin-bottom: var(--e-1);
  padding: 6px 12px;
  border-radius: var(--radio-chico);
  background: var(--acento);
  color: var(--acento-tinta);
  font-weight: var(--peso-fuerte);
  letter-spacing: .12em;
  /* Monoespaciada del sistema (sin descarga): en un código de cupón hay que
     distinguir el cero de la O y el uno de la ele antes de dictarlo en caja. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.lt-cupon__vigencia {
  margin-bottom: 0;
  color: var(--apagado);
}

/* ================================================================== */
/* FICHA — cierre                                                      */
/* ================================================================== */

.lt-negocio-cierre__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-3);
}

/* ================================================================== */
/* Impresión                                                           */
/* ================================================================== */

@media print {
  /* Una ficha impresa la lleva alguien a un negocio que no tiene datos en el
     teléfono: el filtro, la barra fija y el cierre comercial no aportan nada
     en papel — y la barra fija se imprimiría encima del texto en cada hoja. */
  .lt-dir-filtros,
  .lt-dir-paginacion,
  .lt-dir-cta,
  .lt-negocio-barra,
  /* El mapa en papel es un rectángulo de teselas que no se imprime bien y come
     media hoja; los nombres que contiene están igualmente en la rejilla. */
  .lt-neg-mapa,
  .lt-negocio-cierre { display: none; }

  .lt-negocio--con-barra { padding-bottom: 0; }

  .lt-negocio-panel { box-shadow: none; border: 1px solid #999; }

  /* La portada en papel: fondo blanco y tinta negra. Un fondo nocturno a
     sangre gasta un cartucho por ficha. */
  .lt-negocio-portada { background: none; color: #000; }
  .lt-negocio-portada__foto { display: none; }
  .lt-negocio-portada h1,
  .lt-negocio-pildora { color: #000; }
  .lt-negocio-pildora { border-color: #999; background: none; }
}

/* ================================================================== */
/* LOS ENCABEZADOS DE FAMILIA — punto 3 del documento                  */
/* ================================================================== */

/*
 * Separan el directorio en «Comida», «Legal e inmigracion», «Autos»… Van con
 * un filete corto encima y no con una linea a todo lo ancho: el ancho completo
 * corta la pagina en trozos y aqui lo que se quiere es que se siga leyendo de
 * arriba abajo, con descansos.
 *
 * El primero no lleva margen superior: ya viene el aire de la barra de filtros.
 */
.lt-dir-familia {
  position: relative;
  margin: var(--e-6) 0 var(--e-3);
  padding-top: var(--e-3);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  scroll-margin-top: calc( var(--alto-cabecera) + 24px );
}

.lt-dir-familia::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 3px;
  border-radius: 999px;
  background: var(--marca);
}

.lt-dir-familia:first-of-type { margin-top: var(--e-3); }


/* Las redes del negocio, en fila y separadas: son varios enlaces en un mismo
   dato, no un parrafo. 2026-08-15. */
.lt-negocio-redes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

/* ==================================================================== */
/* LA VENTANA DE REDES DE LA FICHA — 2026-08-18                          */
/* ==================================================================== */

/*
 * El duenno pidio «un boton para las redes que abra un pop-up con las redes».
 * El boton vive en la columna de acciones con los demas y no necesita estilo
 * propio: es un `.lt-btn--fantasma` como el de «Como llegar».
 *
 * Lo que si necesita estilo es la ventana, porque un <dialog> sin CSS sale
 * pegado arriba, con borde de sistema y del ancho del texto.
 */
.lt-negocio-redes-ventana {
  width: min(92vw, 420px);
  padding: 0;
  border: 0;
  border-radius: var(--radio-grande, 16px);
  background: var(--blanco);
  color: var(--tinta);
  box-shadow: 0 24px 60px rgba(11, 18, 32, .30);
}

/* El fondo oscuro. Va aqui y no en el elemento: es una capa del navegador. */
.lt-negocio-redes-ventana::backdrop {
  background: rgba(7, 19, 36, .62);
}

.lt-negocio-redes-ventana__caja {
  position: relative;
  padding: var(--e-4, 28px);
}

/*
 * La equis, arriba a la derecha y por encima del titulo. 44px de lado: es el
 * minimo que se puede acertar con el dedo sin apuntar.
 */
.lt-negocio-redes-ventana__cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--apagado, #5A6472);
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.lt-negocio-redes-ventana__cerrar:hover,
.lt-negocio-redes-ventana__cerrar:focus-visible {
  background: color-mix(in srgb, var(--tinta) 8%, transparent);
  color: var(--tinta);
}

.lt-negocio-redes-ventana__titulo {
  /* Sitio para la equis: sin esto, un nombre largo se le mete debajo. */
  padding-right: 44px;
  margin: 0 0 var(--e-3, 18px);
  font-size: var(--fs-h4, 1.15rem);
}

.lt-negocio-redes-ventana__lista {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Que la ventana entre en vez de aparecer de golpe. Solo con `@starting-style`,
 * que es lo unico que anima un <dialog> al abrirse sin tocar JavaScript; los
 * navegadores que no lo entienden lo ignoran y la ventana sale directa, que es
 * el comportamiento de siempre y tampoco esta mal.
 */
@media (prefers-reduced-motion: no-preference) {
  .lt-negocio-redes-ventana[open] {
    animation: lt-redes-entra .18s ease-out;
  }

  @keyframes lt-redes-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/*
 * LOS BOTONES DE LA TARJETA, EN VARIAS FILAS — 2026-08-19.
 *
 * Pasaron de dos a seis (WhatsApp, Llamar, Como llegar, Sitio web y una por
 * cada red). Lo pidio el dueno: «tienen que aparecer los botones de cada una de
 * las cosas, no importa si son 6 botones».
 *
 * `flex-wrap` para que bajen de linea en vez de encogerse: seis botones en una
 * fila de 271px dejarian cada uno en 40px, que no se lee ni se acierta.
 *
 * `margin-top: auto` los pega al fondo de la tarjeta, asi que en una fila de
 * tres tarjetas los botones quedan alineados aunque los textos midan distinto.
 */
.lt-dir-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: var(--e-2);
}

/*
 * Los botones no se estiran a todo el ancho ni se encogen por debajo de lo
 * legible. 44px de alto real: es el objetivo tactil que no falla con el pulgar,
 * y estos son los botones que se pulsan desde la calle.
 */
.lt-dir-acciones .lt-btn {
	flex: 0 1 auto;
	min-height: 40px;
	padding-inline: 14px;
}

/* En el telefono la tarjeta mide 169px: dos botones por fila como mucho. */
@media (max-width: 639px) {
	.lt-dir-acciones { gap: 6px; }
	.lt-dir-acciones .lt-btn {
		padding-inline: 10px;
		font-size: var(--fs-etiqueta);
	}
}

/* ==================================================================== */
/* LOS BOTONES DE LA TARJETA, TODOS IGUALES — 2026-08-19                 */
/*                                                                      */
/* Mismo criterio que en la Vitrina (assets/css/vitrina.css): son los    */
/* mismos botones y no tienen por que verse distinto en cada sitio.      */
/* ==================================================================== */

.lt-dir-acciones {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 8px;
	/*
	 * `start` Y NO `stretch` — 2026-08-19.
	 *
	 * `stretch` es el valor por defecto de la rejilla y estira cada boton
	 * al alto de SU FILA. En el telefono «VISITAR ESTE NEGOCIO» ocupa dos
	 * lineas, asi que su fila mide el doble, y el boton de al lado se
	 * estiraba hasta ahi. Con las pildoras del tema (radio 999px) un boton
	 * el doble de alto que ancho no parece estirado: parece un CIRCULO. El
	 * duenno lo vio: «este boton aparece gigante».
	 *
	 * El ancho sigue siendo igual para todos —eso lo hace la rejilla— pero
	 * el alto lo marca cada boton y no su vecino mas alto.
	 */
	align-items: start;
}

.lt-dir-acciones .lt-btn {
	width: 100%;
	min-height: 42px;
	padding-inline: 8px;
	text-align: center;
}

.lt-dir-acciones > :last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* La tarjeta del telefono mide 169px: una sola columna, o no se lee nada. */
@media (max-width: 639px) {
	.lt-dir-acciones { grid-template-columns: 1fr; }
	.lt-dir-acciones > :last-child:nth-child(odd) { grid-column: auto; }
}

/* ====================================================================
 * CANALES CON DOS OPCIONES  (2026-09-04)
 * --------------------------------------------------------------------
 * PHP: single-lt_negocio.php (lt_negocio_canal) · JS: negocio-redes.js
 *
 * Cuando un negocio da dos telefonos, dos WhatsApp o dos webs, el boton
 * lleva una cuenta y abre la misma ventana que ya usaban las redes.
 * ==================================================================== */

/* La cuenta: una pastilla pequena dentro del boton. `currentColor` con
   transparencia para que funcione igual sobre el boton principal, el
   verde de WhatsApp y el fantasma, sin una variante por cada uno. */
.lt-canal__cuenta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  height: 1.35em;
  margin-left: .5em;
  padding: 0 .35em;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  font-size: .78em;
  font-weight: 700;
  line-height: 1;
}

/*
 * LA CURA DEL [hidden] SOBRE UN BOTON.
 *
 * `.lt-btn` es `display: inline-flex` (base.css) y le GANA al
 * `display: none` que el navegador da a [hidden]: un boton escondido
 * por JavaScript se quedaba visible y muerto. Ya habia tres casos asi
 * en el tema; este es el de la ficha de negocio, y con los canales
 * dobles pasan mas botones por ese camino.
 *
 * Misma clase + el atributo, en una regla posterior. Nunca !important.
 */
.lt-negocio-acciones .lt-btn[hidden],
.lt-negocio-barra .lt-btn[hidden],
.lt-negocio__abre-redes[hidden] {
  display: none;
}

/* Los dos correos, uno debajo del otro y no pegados en una linea. */
.lt-negocio-correos {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}