/*
 * BASE — Latinos en Texas
 *
 * Reset mínimo, tipografía, botones, sellos, LA TARJETA y utilidades de layout.
 * Todo se construye sobre los tokens: aquí no hay ni un color literal.
 *
 * ---------------------------------------------------------------------------
 * QUÉ CAMBIÓ Y POR QUÉ (dirección de arte «el barrio digital»)
 * ---------------------------------------------------------------------------
 * La primera versión de esta hoja era correcta y aburrida: tarjetas blancas de
 * borde fino en rejillas de tres columnas iguales, sin una sola fotografía. El
 * dueño la rechazó con razón — parecía una plantilla comprada.
 *
 * La pieza que arregla eso es la TARJETA, porque el sitio entero son listados:
 * negocios, ayudas, empleos, eventos, cupones, anuncios, vídeos y noticias
 * usan este mismo componente. Cambiarlo aquí cambia nueve pantallas.
 *
 * Las tres decisiones que lo sostienen:
 *   1. FOTOGRAFÍA OBLIGATORIA. Hay 199 imágenes importadas y 77 fichas con
 *      destacada. Ninguna tarjeta se queda sin pieza visual: la que no tiene
 *      foto recibe un degradado de marca con su inicial y su categoría,
 *      diseñado a propósito. Un hueco gris parece un error de carga; esto
 *      parece una decisión.
 *   2. EL VELO SIEMPRE. Cualquier texto que se apoye sobre una fotografía
 *      lleva debajo un degradado. La foto la sube el dueño de una taquería
 *      desde su teléfono y puede ser un cielo blanco de mediodía: sin velo,
 *      el sello «Destacado» —que es lo que se cobra— desaparecería.
 *   3. MOVIMIENTO CON CRITERIO. Aparición al entrar en pantalla y zoom lento
 *      de la foto al pasar por encima. Nada más. Y todo colgando de tokens que
 *      `prefers-reduced-motion` ya deja en cero, así que ninguna regla de esta
 *      hoja necesita repetir la consulta.
 */

/* ---------------------------------------------------------------- */
/* Reset                                                             */
/* ---------------------------------------------------------------- */

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

html {
  /* La cabecera es fija: sin esto, cualquier enlace de anclaje deja el
     título del destino escondido detrás del menú. */
  scroll-padding-top: calc(var(--alto-cabecera) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--fs-texto);
  font-weight: var(--peso-texto);
  line-height: var(--interlineado);
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;

  /*
   * El sitio no hace scroll horizontal NUNCA. Las piezas a sangre (.lt-sangre)
   * miden 100vw, y `vw` INCLUYE la barra de desplazamiento: en un escritorio
   * con barra visible sobresalen ~15px por la derecha.
   *
   * `clip` y NO `hidden`, y esto es la diferencia entre que el sitio funcione o
   * no: `overflow: hidden` convierte al elemento en un contenedor de scroll, y
   * eso ROMPE `position: sticky` en todos sus descendientes. La barra de
   * filtros del directorio y el panel lateral de la ficha son sticky. Con
   * `hidden` se quedarían clavados sin que nada avise en consola.
   *
   * Navegadores sin `clip` (Safari anterior a 16): la declaración se ignora y
   * en el peor caso aparecen unos píxeles de scroll lateral en las secciones a
   * sangre. Es un defecto cosmético; perder el sticky no lo sería.
   */
  overflow-x: clip;
}

img, video { max-width: 100%; height: auto; display: block; }

/*
 * Los SVG en línea llevan viewBox pero no width/height: sin una medida propia
 * se estiran hasta llenar su contenedor, y un icono de 24px acaba ocupando
 * media pantalla. Este tamaño por defecto es la red de seguridad — cada icono
 * puede pedir el suyo con su clase, pero ninguno puede salir gigante por
 * olvido. (Ocurrió: la portada mostraba un pin de mapa de 1.400px de alto.)
 */
svg {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex: none;          /* dentro de un flex, sin esto el icono se deforma */
  vertical-align: middle;
  fill: currentColor;
}

/* Las imágenes de la biblioteca llegan con proporciones muy dispares
   (fotos de negocios subidas desde el móvil). object-fit evita que una
   foto vertical rompa la altura de su tarjeta. */
.lt-img-cubre { width: 100%; height: 100%; object-fit: cover; }

a { color: var(--marca); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--marca-oscuro); }

/* Foco visible en TODO lo interactivo. En el sitio anterior `focus-visible`
   aparecía una sola vez en toda la portada y venía del reset del tema:
   quien navegaba con teclado no veía dónde estaba. */
:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- */
/* Tipografía                                                        */
/* ---------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo);
  line-height: var(--interlineado-titulo);
  letter-spacing: var(--tracking-titulo);
  margin: 0 0 var(--e-3);
  /* Evita que un titular deje una palabra suelta en la última línea. */
  text-wrap: balance;
  /*
   * El eje óptico de Fraunces, que es la razón de haberla elegido: a 4rem la
   * fuente afina los remates sola y a 1.2rem los engorda para que aguanten en
   * pantalla pequeña. Es el ajuste que un tipógrafo haría a mano en cada
   * tamaño. `auto` deja que el navegador lea el font-size y lo aplique.
   */
  font-optical-sizing: auto;
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

/* El titular más grande del sitio aprieta más las letras: el tracking correcto
   depende del tamaño, y lo que a 5rem se ve compuesto, a 2rem se ve roto. */
.lt-display {
  font-size: var(--fs-display);
  letter-spacing: var(--tracking-display);
}

p { margin: 0 0 var(--e-2); }
/* Nada de text-align:justify. Sin partición de palabras abre ríos blancos,
   y en la columna estrecha del móvil deja huecos enormes entre palabras. */

.lt-etiqueta {
  font-family: var(--fuente-texto);
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--brasa-texto);
  display: block;
  margin-bottom: var(--e-2);
}

/* La etiqueta con filete: el detalle editorial que separa una revista de un
   listado. La línea es del ancho de un carácter y va en terracota. */
.lt-etiqueta--filete {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}
.lt-etiqueta--filete::before {
  content: '';
  width: 28px;
  height: 2px;
  flex: none;
  background: currentColor;
}

.lt-chico  { font-size: var(--fs-chico); }
.lt-apagado{ color: var(--apagado); }

/* Recorte por líneas para que las tarjetas de una fila midan igual. */
.lt-lineas-2, .lt-lineas-3 {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.lt-lineas-2 { -webkit-line-clamp: 2; }
.lt-lineas-3 { -webkit-line-clamp: 3; }

/* ---------------------------------------------------------------- */
/* Layout                                                            */
/* ---------------------------------------------------------------- */

.lt-contenedor {
  width: 100%;
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--canal);
}

/* Para piezas editoriales que necesitan respirar más que el texto. */
.lt-contenedor--ancho { max-width: var(--contenedor-ancho); }

.lt-seccion { padding-block: var(--seccion-y); }

/*
 * RITMO DE FONDOS — la alternancia es obligatoria.
 *
 * Orden de la casa: noche → hueso → blanco → noche. Nunca dos secciones con el
 * mismo fondo seguidas: es lo que permite al ojo separar bloques sin recurrir
 * a los márgenes negativos (-127px) que sostenían la maqueta anterior.
 *
 * Los nombres viejos se conservan y ahora apuntan a la paleta nueva, así que
 * las plantillas no se tocan y aun así cambian de aspecto:
 *   .lt-seccion--gris  → papel cálido (era un gris azulado frío)
 *   .lt-seccion--marca → banda OSCURA (era un azul pálido que no separaba nada)
 *   .lt-seccion--honda → banda oscura
 */
.lt-seccion--gris,
.lt-seccion--hueso  { background: var(--hueso); }
.lt-seccion--blanca { background: var(--blanco); }
.lt-seccion--honda,
.lt-seccion--marca,
.lt-seccion--noche  { background: var(--noche); color: var(--blanco); }

/*
 * CONTEXTO OSCURO — se declara UNA vez y vale para las tres clases de arriba
 * y para cualquier pieza que se marque con .lt-oscuro (una tarjeta sobre foto,
 * el pie, una banda de CTA).
 *
 * Esto no es cosmética: es la regla que impide el fallo de contraste más
 * repetido del sitio anterior — texto gris #5A5A5A sobre fondo oscuro, que da
 * 2.7:1 y no lo lee nadie a pleno sol.
 */
.lt-seccion--honda,
.lt-seccion--marca,
.lt-seccion--noche,
.lt-oscuro {
  --linea: var(--linea-honda);   /* los separadores se invierten solos */
}

.lt-seccion--honda h1, .lt-seccion--honda h2, .lt-seccion--honda h3, .lt-seccion--honda h4,
.lt-seccion--marca h1, .lt-seccion--marca h2, .lt-seccion--marca h3, .lt-seccion--marca h4,
.lt-seccion--noche h1, .lt-seccion--noche h2, .lt-seccion--noche h3, .lt-seccion--noche h4,
.lt-oscuro h1, .lt-oscuro h2, .lt-oscuro h3, .lt-oscuro h4 { color: var(--blanco); }

/* El gris de texto NO vale sobre oscuro (2.7:1). --niebla da 10.8:1. */
.lt-seccion--honda .lt-apagado,
.lt-seccion--marca .lt-apagado,
.lt-seccion--noche .lt-apagado,
.lt-oscuro .lt-apagado { color: var(--niebla); }

/* El azul de marca sobre noche da 2.3:1: sobre oscuro los enlaces son --cielo. */
.lt-seccion--honda a:not(.lt-btn):not(.lt-sello),
.lt-seccion--marca a:not(.lt-btn):not(.lt-sello),
.lt-seccion--noche a:not(.lt-btn):not(.lt-sello),
.lt-oscuro a:not(.lt-btn):not(.lt-sello) { color: var(--cielo); }

.lt-seccion--honda a:not(.lt-btn):hover,
.lt-seccion--marca a:not(.lt-btn):hover,
.lt-seccion--noche a:not(.lt-btn):hover,
.lt-oscuro a:not(.lt-btn):hover { color: var(--cielo-claro); }

/* La etiqueta de sección cambia de terracota a ámbar sobre oscuro: la
   terracota sobre noche da 5.1:1 y pasa, pero el ámbar (9.7:1) es el que
   sostiene la identidad en las bandas oscuras. */
.lt-seccion--honda .lt-etiqueta,
.lt-seccion--marca .lt-etiqueta,
.lt-seccion--noche .lt-etiqueta,
.lt-oscuro .lt-etiqueta { color: var(--acento); }

/* El foco también se invierte: un anillo azul marca sobre noche no se ve. */
.lt-seccion--honda :focus-visible,
.lt-seccion--marca :focus-visible,
.lt-seccion--noche :focus-visible,
.lt-oscuro :focus-visible { outline-color: var(--cielo); }

.lt-rejilla { display: grid; gap: var(--e-3); }
.lt-rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.lt-rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.lt-rejilla--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .lt-rejilla--3, .lt-rejilla--4 { grid-template-columns: repeat(2, 1fr); }
}
/*
 * EN CELULAR SIGUEN SIENDO DOS COLUMNAS. 2026-08-18.
 *
 * Antes aqui se colapsaba todo a UNA columna. El duenno lo pidio al reves:
 * «en celular quiero que queden de a dos columnas las noticias, y lo mismo
 * para todas las demas paginas».
 *
 * Y tiene sentido para un catalogo: con una sola columna hay que rodar el
 * doble para ver lo mismo, y en una pantalla de busqueda lo que se quiere es
 * ABARCAR, no leer. Se pierde tamano de foto y de titular, se gana ver el
 * doble de opciones de un vistazo.
 *
 * El hueco se estrecha a proposito: a 390 px de pantalla, dos columnas con el
 * hueco grande dejaban las tarjetas en 150 px y el titular salia en palabras
 * sueltas.
 */
@media (max-width: 640px) {
  .lt-rejilla--2, .lt-rejilla--3, .lt-rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  .lt-rejilla { gap: var(--e-2, 12px); }
}

/* Una tarjeta impar y sola al final de una rejilla de 2 se ve rota:
   que ocupe el ancho completo. */
.lt-rejilla--2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }

.lt-cabeza-seccion {
  display: flex; align-items: end; justify-content: space-between;
  gap: var(--e-3); margin-bottom: var(--e-5); flex-wrap: wrap;
}
.lt-cabeza-seccion h2 { margin: 0; }

/*
 * A SANGRE (full-bleed) — LA DEFINICIÓN VIVE EN utilidades.css, NO AQUÍ.
 *
 * Aquí había una SEGUNDA definición de `.lt-sangre` con `width: 100vw` y
 * `max-width: 100vw` además de los márgenes negativos. Era la mitad rota de un
 * mismo utilitario declarado en dos hojas:
 *
 *   · utilidades.css (que carga DESPUÉS) declara solo `margin-inline` y su
 *     propio comentario avisa de que fijar además `width: 100vw` es «el error
 *     clásico». Pero al no redeclarar `width`, no podía deshacer el de aquí:
 *     la cascada solo pisa las propiedades que se vuelven a escribir.
 *   · Resultado real: la pieza medía 100vw —que INCLUYE la barra de
 *     desplazamiento— mientras el margen negativo la centraba contra un
 *     contenedor que NO la incluye. La pieza sobresalía ~7,5px por CADA lado y
 *     el `overflow-x: clip` se comía esos píxeles: sobre una fotografía no se
 *     nota, pero a un titular le rebana la primera letra de cada línea.
 *
 * Sin `width`, el navegador calcula el ancho como «contenedor menos márgenes»,
 * que da exactamente el ancho de la ventana sin barra. Una sola definición, en
 * la hoja que la documenta.
 */

/* ---------------------------------------------------------------- */
/* Movimiento — aparición al entrar en pantalla                      */
/* ---------------------------------------------------------------- */

/*
 * CÓMO FUNCIONA (y por qué así)
 *
 * animaciones.js SOLO añade clases. No escribe ni un estilo en línea, porque
 * la política de seguridad de contenidos del proyecto prohíbe `style=""` y un
 * `element.style.opacity` sería exactamente eso.
 *
 * El estado inicial (invisible) cuelga de `.lt-anima`, que la pone el propio
 * JS en <html>. Consecuencia buscada: SIN JavaScript —o con un error en el
 * script— la clase nunca aparece, el estado inicial no se aplica y todo el
 * contenido se ve. Nunca puede quedar una página en blanco por culpa de una
 * animación. Es el mismo trato que `.lt-js` le da al menú.
 */
.lt-anima [data-lt-aparece] {
  opacity: 0;
  transform: translateY(var(--aparece-desplazamiento));

  /*
   * AQUI HABIA UN `will-change: opacity, transform` Y SE RETIRO.
   *
   * Sonaba a optimizacion y era lo contrario. `will-change` le pide al
   * navegador que reserve una capa de composicion en memoria de video POR
   * ELEMENTO, y esta regla alcanza a todo lo que aparece al hacer scroll: unos
   * veinte bloques en la portada y cuarenta y cinco en el archivo de negocios.
   * En un telefono modesto —que es desde donde entra esta comunidad— eso es
   * memoria reservada para animaciones que aun no han empezado y que en su
   * mayoria no llegan a verse nunca.
   *
   * utilidades.css ya lo explicaba en su propio comentario y aqui se hacia lo
   * contrario: una regla contradecia a la otra. La transicion de opacidad y
   * transform es de las baratas y el navegador la promueve solo cuando toca.
   *
   * El comentario que habia aqui hablaba de scroll horizontal y no venia a
   * cuento: eso lo resuelve el `overflow` del contenedor, no `will-change`.
   */
}

/*
 * EL REVELADO. La clase la escribe animaciones.js.
 *
 * OJO CON EL NOMBRE: es `lt-visible`. Hubo un momento en que utilidades.css
 * esperaba `lt-aparece--visible` y el JS escribia `lt-visible`, asi que el
 * camino de la CLASE estaba roto mientras el del ATRIBUTO funcionaba. Como
 * ninguna plantilla usa la clase, nadie se entero. Los dos usan ya el mismo
 * nombre; si alguna vez hay que cambiarlo, se cambia en los tres sitios: el JS,
 * este archivo y utilidades.css.
 *
 * AQUI NO SE DECLARA LA TRANSICION, Y ES DELIBERADO. Estaba declarada en esta
 * regla como abreviada (`transition: opacity …, transform …`) y una abreviada
 * reinicia TODAS las subpropiedades que no nombra — incluida
 * `transition-delay`. Resultado: las clases `.lt-retardo-1..4` que reparte el
 * JS para escalonar la entrada quedaban a cero y el escalonado no ocurria.
 *
 * La transicion ya esta puesta en el estado inicial (utilidades.css), que es
 * donde tiene que estar: asi el retardo sobrevive.
 */
.lt-anima [data-lt-aparece].lt-visible {
  opacity: 1;
  transform: none;
}

/*
 * La cascada. Las clases de retardo las reparte el JS entre los elementos que
 * entran JUNTOS en la misma pasada del observador — no por posición en la
 * rejilla. Es la diferencia entre una fila que entra escalonada (bonito) y una
 * tarjeta suelta a mitad de página que se queda 300ms esperando su turno
 * (parece que la página va lenta).
 *
 * El escalón sale de un token que `prefers-reduced-motion` deja en 0ms, así
 * que estas cuatro reglas no necesitan repetir la consulta.
 */
.lt-retardo-1 { transition-delay: calc(var(--aparece-escalon) * 1); }
.lt-retardo-2 { transition-delay: calc(var(--aparece-escalon) * 2); }
.lt-retardo-3 { transition-delay: calc(var(--aparece-escalon) * 3); }
.lt-retardo-4 { transition-delay: calc(var(--aparece-escalon) * 4); }

/* ---------------------------------------------------------------- */
/* Botones — UNA forma, cuatro variantes                             */
/* ---------------------------------------------------------------- */

.lt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e-1);
  /* width:auto SIEMPRE. El botón del hero anterior tenía width:189px fijo,
     así que cualquier etiqueta más larga —o la traducción al inglés— se
     desbordaba o se cortaba. */
  width: auto;
  min-height: 46px;
  padding: 13px 30px;
  border: 1.5px solid transparent;
  border-radius: var(--radio-pildora);
  font-family: var(--fuente-texto);
  font-size: 13px;
  font-weight: var(--peso-fuerte);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;

  /*
   * INTERLINEADO EXPLÍCITO. Añadido el 2026-08-16, y arregla un descuadre que
   * llevaba en todo el sitio sin que nadie lo mirara de cerca.
   *
   * Un `.lt-btn` puede ser un `<a>` o un `<button>`, y los dos NO heredan lo
   * mismo: el enlace toma el interlineado del cuerpo —1.65— y al botón el
   * propio navegador le impone `line-height: normal`, que ronda 1.2. Con el
   * mismo relleno y el mismo tipo, eso son 5 px de diferencia de alto.
   *
   * Se veía en la Vitrina, donde «Visitar este negocio» (un enlace) y «Datos y
   * redes» (un botón) van uno al lado del otro: 49 px contra 44. El dueño lo
   * cazó a ojo. Pero pasaba en cada sitio del tema donde un enlace y un botón
   * comparten fila.
   *
   * 1.65 y no 1.2 porque es lo que ya hacían los enlaces, que son la mayoría:
   * así se igualan los botones hacia arriba y no cambia de tamaño media
   * interfaz de golpe.
   */
  line-height: 1.65;

  transition: background-color var(--transicion), transform var(--transicion),
              color var(--transicion), border-color var(--transicion),
              box-shadow var(--transicion);
}

.lt-btn:hover { transform: translateY(-1px); }
.lt-btn:active { transform: translateY(0); }

.lt-btn--principal {
  background: var(--marca);
  color: var(--blanco);
}
.lt-btn--principal:hover {
  background: var(--marca-oscuro);
  color: var(--blanco);
  box-shadow: var(--sombra-1);
}

/* Sobre fondo oscuro el azul de marca se funde con el fondo: el botón
   principal se vuelve AZUL CIELO con tinta negra (7,1:1), que es el color de
   acción de la marca y el que domina sobre noche sin robarle el sitio a nada.
   El hover ACLARA en lugar de oscurecer: sobre un fondo claro con tinta negra,
   oscurecer el fondo destruye el contraste justo en el instante previo al clic
   (así estaba: 2,36:1). Aclarando sube a 11,3:1. */
.lt-seccion--honda .lt-btn--principal,
.lt-seccion--marca .lt-btn--principal,
.lt-seccion--noche .lt-btn--principal,
.lt-oscuro .lt-btn--principal {
  background: var(--acento);
  color: var(--acento-tinta);
}
.lt-seccion--honda .lt-btn--principal:hover,
.lt-seccion--marca .lt-btn--principal:hover,
.lt-seccion--noche .lt-btn--principal:hover,
.lt-oscuro .lt-btn--principal:hover {
  background: var(--acento-oscuro);
  color: var(--acento-tinta);
}

/*
 * EL FANTASMA VA CON BORDE AZUL. Cambiado el 2026-08-16: «ese boton gris no me
 * gusta, quiero que sea el borde azul y que al pasar por encima el fondo se
 * quede azul y las letras blancas».
 *
 * Tomaba `currentColor`, o sea la tinta del parrafo de alrededor, y sobre fondo
 * claro eso es casi negro: se leia como un boton apagado en vez de como una
 * accion. Con el azul de marca se lee como lo que es.
 *
 * Sobre fondo oscuro sigue heredando la tinta de alrededor —blanca— porque ahi
 * el azul de marca se funde con el fondo. Esa parte esta abajo.
 */
.lt-btn--fantasma {
  background: transparent;
  color: var(--marca);
  border-color: var(--marca);
  opacity: 1;
}

/* Sobre oscuro, blanco: el azul de marca no se ve sobre noche. */
.lt-seccion--honda .lt-btn--fantasma,
.lt-seccion--marca .lt-btn--fantasma,
.lt-seccion--noche .lt-btn--fantasma,
.lt-oscuro .lt-btn--fantasma {
  color: var(--blanco);
  border-color: rgba(255, 255, 255, .55);
}
/*
 * EL RELLENO NO PUEDE SER `currentColor`. Arreglado el 2026-08-16, lo vio el
 * dueño: «el hover de los botones es de azul oscuro y el texto no cambia a
 * blanco, entonces no me deja ver el texto».
 *
 * Estaba escrito así:
 *
 *     background: currentColor;
 *     color: var(--marca);
 *
 * y parece que el fondo toma la tinta de alrededor y el texto se vuelve azul.
 * No es lo que hace. `currentColor` vale el `color` YA CALCULADO DE ESTE MISMO
 * elemento, y dos líneas más abajo ese color se está fijando a `--marca`. Así
 * que al pasar el ratón el fondo salía `--marca` y la letra salía `--marca`:
 * exactamente el mismo azul, texto invisible, 1:1 de contraste.
 *
 * Y pasaba en los dos lados. Sobre oscuro el texto se ponía `--noche` y el
 * fondo, otra vez por `currentColor`, `--noche` también.
 *
 * Se arregla nombrando los dos colores. Es la regla de la casa para el
 * fantasma —«hover = relleno sólido invertido»— y es lo que ya hacía bien el
 * botón del pie, que era el único que nombraba su relleno.
 */
.lt-btn--fantasma:hover,
.lt-btn--fantasma:focus-visible {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--blanco);
  opacity: 1;
}

/* Sobre fondo oscuro se invierte al revés: relleno blanco y tinta noche. */
.lt-seccion--honda .lt-btn--fantasma:hover,
.lt-seccion--marca .lt-btn--fantasma:hover,
.lt-seccion--noche .lt-btn--fantasma:hover,
.lt-oscuro .lt-btn--fantasma:hover,
.lt-seccion--honda .lt-btn--fantasma:focus-visible,
.lt-seccion--marca .lt-btn--fantasma:focus-visible,
.lt-seccion--noche .lt-btn--fantasma:focus-visible,
.lt-oscuro .lt-btn--fantasma:focus-visible {
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--noche);
}

/*
 * WhatsApp EN AZUL, no en verde.
 *
 * La marca no tiene verde («solo azul blanco y negro»), y eso incluye el verde
 * de WhatsApp: el enlace wa.me sigue siendo el mismo, lo que cambia es el
 * color. El botón se reconoce por el icono monocromo y por la palabra, que es
 * como se reconocen todos los demás botones del sitio.
 *
 * Tinta NEGRA sobre el azul cielo: 7,41:1. El blanco daría 2,63:1 y no pasa
 * AA — por eso este botón nunca lleva texto blanco.
 */
.lt-btn--whatsapp { background: var(--cielo); color: var(--tinta); }
/* El hover ACLARA en vez de oscurecer: sobre este azul manda la tinta negra,
   y aclarando el fondo el contraste sube (11:1) en lugar de bajar. */
.lt-btn--whatsapp:hover { background: var(--cielo-claro); color: var(--tinta); }

/*
 * El icono de WhatsApp, monocromo.
 *
 * Va como máscara y no como imagen de color: `background: currentColor` lo
 * pinta con el mismo negro del texto del botón, así que es imposible que se
 * cuele el verde de la marca ajena por aquí. Si algún día el botón cambia de
 * tinta, el icono la sigue solo.
 */
.lt-btn--whatsapp::before {
  content: "";
  width: 1em; height: 1em;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--icono-whatsapp) center / contain no-repeat;
          mask: var(--icono-whatsapp) center / contain no-repeat;
}

.lt-btn--chico { min-height: 38px; padding: 9px 20px; font-size: 12px; }
.lt-btn--ancho { width: 100%; }

/* ---------------------------------------------------------------- */
/* Distintivos                                                       */
/* ---------------------------------------------------------------- */

.lt-sello {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radio-pildora);
  font-family: var(--fuente-texto);
  font-size: 11px; font-weight: var(--peso-fuerte);
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
/*
 * «Verificado» ya no es un sello verde: es el sello de la marca.
 *
 * Lleva la ESTRELLA del logotipo, y el color pasa a ser el azul de marca sobre
 * un relleno del mismo azul al 12% (6,9:1). La estrella no es adorno: es lo que
 * sustituye a la señal cromática que se pierde al quitar el verde, y además
 * funciona para quien no distingue el verde del rojo.
 */
/*
 * EL CHECK DE VERIFICADO, pegado al nombre — 2026-08-20.
 *
 * El duenno lo pidio «como el de Instagram». Sustituye a la pildora «Verificado»
 * que habia antes en la tarjeta: el check dice lo mismo en la decima parte del
 * espacio y sin robarle sitio al nombre.
 *
 * `inline-flex` con `vertical-align` y no `position: absolute`: asi acompana al
 * nombre cuando este parte en dos lineas, en vez de quedarse fijo en la primera.
 */
.lt-check {
  display: inline-flex;
  align-items: center;
  margin-left: .35em;
  /* Se cae un pelo respecto a la linea base para quedar centrado con las
     mayusculas, que es donde el ojo lo espera. */
  vertical-align: -.12em;
}

.lt-check svg {
  width: .82em;
  height: .82em;
  /* Nunca menos de 13 px: por debajo la roseta se convierte en una mancha y el
     check de dentro deja de leerse. */
  min-width: 13px;
  min-height: 13px;
  fill: var(--verificado);
}

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

.lt-sello--verificado { background: rgba(41,80,145,.12); color: var(--verificado); }
.lt-sello--verificado::before {
  content: "";
  width: 11px; height: 11px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--icono-estrella) center / contain no-repeat;
          mask: var(--icono-estrella) center / contain no-repeat;
}
/* Ámbar = pagado. El documento exige que toda posición patrocinada se
   identifique siempre para no perder la confianza del usuario. */
.lt-sello--destacado  { background: var(--acento); color: var(--acento-tinta); }
.lt-sello--alerta     { background: rgba(180,35,24,.12); color: var(--alerta); }
.lt-sello--cerrado    { background: var(--hueso-honda); color: var(--apagado); }
.lt-sello--gratis     { background: rgba(41,80,145,.12); color: var(--exito); }

/*
 * EL SELLO DE EJEMPLO. Tiene que verse MAS que los demas, no menos: avisa de
 * que la ficha lleva datos sin verificar. Va rayado en diagonal para que no se
 * confunda con ningun sello de estado real —«Gratuito», «Verificado»— ni de
 * lejos ni en una captura.
 *
 * Es temporal por definicion: desaparece solo en cuanto las ocho fichas de
 * muestra se sustituyan por contenido real. Ver sellos_de() en
 * inc/componentes.php, donde esta el comando para encontrarlas.
 */
.lt-sello--ejemplo {
  color: var(--tinta);
  background-color: rgba(11, 18, 32, .06);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(11, 18, 32, .10) 0 4px,
    transparent 4px 8px
  );
  border: 1px dashed rgba(11, 18, 32, .38);
}

/* Sobre las bandas oscuras el mismo sello, invertido. */
.lt-seccion--noche .lt-sello--ejemplo,
.lt-seccion--honda .lt-sello--ejemplo {
  color: #FFF;
  background-color: rgba(255, 255, 255, .10);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, .16) 0 4px,
    transparent 4px 8px
  );
  border-color: rgba(255, 255, 255, .45);
}

/*
 * Los sellos translúcidos pierden el contraste sobre fondo oscuro (un 12% de
 * cualquier tinte sobre noche acaba siendo casi negro). Sobre oscuro cambian
 * de piel: fondo MARINO sólido y texto en AZUL CIELO (5,98:1).
 *
 * Aquí NO se pone azul cielo de fondo con texto blanco encima: serían 2,63:1
 * y es exactamente el par prohibido en este tema.
 */
.lt-seccion--honda .lt-sello--verificado,
.lt-seccion--marca .lt-sello--verificado,
.lt-seccion--noche .lt-sello--verificado,
.lt-oscuro .lt-sello--verificado,
.lt-seccion--honda .lt-sello--gratis,
.lt-seccion--marca .lt-sello--gratis,
.lt-seccion--noche .lt-sello--gratis,
.lt-oscuro .lt-sello--gratis {
  background: var(--noche-suave);
  color: var(--cielo);
  box-shadow: inset 0 0 0 1px var(--noche-borde);
}

/*
 * La alerta tenía el mismo problema que tenían los sellos verdes y nadie lo
 * había medido: el rojo al 12% sobre una sección oscura dejaba el texto en
 * 2,3:1. Sobre oscuro se vuelve sólida, con blanco encima (6,4:1).
 */
.lt-seccion--honda .lt-sello--alerta,
.lt-seccion--marca .lt-sello--alerta,
.lt-seccion--noche .lt-sello--alerta,
.lt-oscuro .lt-sello--alerta { background: var(--alerta); color: var(--blanco); }

.lt-seccion--honda .lt-sello--cerrado,
.lt-seccion--marca .lt-sello--cerrado,
.lt-seccion--noche .lt-sello--cerrado,
.lt-oscuro .lt-sello--cerrado { background: var(--noche-borde); color: var(--niebla); }

/* ================================================================== */
/* LA TARJETA — un componente para todo lo listable                    */
/* (negocio, ayuda, empleo, evento, noticia, cupón, anuncio, vídeo)     */
/* ================================================================== */

.lt-tarjeta {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--blanco);
  /* Sin borde. El borde de 1px era lo que hacía que doce tarjetas iguales
     parecieran doce celdas de una hoja de cálculo. Ahora las separa la
     sombra, que es más suave y deja que mande la fotografía. */
  border: 0;
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--transicion), transform var(--transicion);
  height: 100%;
}

.lt-tarjeta:hover {
  box-shadow: var(--sombra-2);
  transform: translateY(var(--eleva-hover));
}

/* Sobre papel cálido una tarjeta blanca sin borde flota bien; sobre fondo
   blanco necesita un filete finísimo o se pierde. */
.lt-seccion--blanca .lt-tarjeta,
.lt-tarjeta--sobre-blanco { box-shadow: var(--sombra-1), 0 0 0 1px var(--hueso-honda); }

/* --- La pieza visual: SIEMPRE hay una ------------------------------ */

.lt-tarjeta__media {
  position: relative;
  /*
   * 16:9 EN TODAS LAS TARJETAS DEL SITIO — 2026-08-18.
   *
   * Era 16:10. El duenno: «quiero que todas las tarjetas tengan la misma forma
   * porque si no algunas imagenes del directorio van a tener que ser de
   * diferente relacion de aspecto, y la idea es que todas sean 16:9 porque ya
   * asi lo cuadramos».
   *
   * Es una decision de PRODUCCION antes que de diseno: el material se esta
   * fabricando en 16:9, y una caja de 16:10 obliga a recortar un 6% de alto de
   * cada pieza —o a producirla dos veces—. Esta linea es la que hace que una
   * sola pieza sirva en el directorio, en noticias, en ayudas, en eventos, en
   * cupones y en el marketplace.
   */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  /* El degradado va en el contenedor y no solo en el respaldo: mientras la
     foto carga se ve el azul de marca, no un rectángulo gris parpadeando. */
  background: var(--degradado-marca);
  flex: none;
}

.lt-tarjeta__media img,
.lt-tarjeta__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* EL ZOOM LENTO. 900ms: por debajo de 600 parece un tic nervioso; por encima
     de 1200 el visitante ya movió el ratón y no lo ve terminar. */
  transition: transform var(--transicion-lenta);
}

.lt-tarjeta:hover .lt-tarjeta__foto,
.lt-tarjeta:hover .lt-tarjeta__media img { transform: scale(var(--zoom-hover)); }

/*
 * IMAGEN DE CATEGORIA: SIN TINTE, Y ESTA ES LA RAZON.
 *
 * Se probo un tinte azul a media fuerza para que las diez imagenes genericas
 * cumplieran la paleta del sitio y se leyeran como una coleccion. Unificaba,
 * pero el dueno lo vio montado y lo rechazo: «se ve desordenado». Con el tinte,
 * las tarjetas con foto propia del negocio —sin tinte— y las de categoria
 * —tenidas— convivian en la misma rejilla con dos tratamientos distintos, y esa
 * mezcla desordena mas de lo que ordenaba el color.
 *
 * Queda anotado para que nadie lo vuelva a proponer sin saber que ya se probo.
 * Si algun dia se retoma, el sitio donde iba es aqui y el filtro era:
 *   grayscale(.60) sepia(.50) hue-rotate(178deg) saturate(1.6) brightness(.94)
 */
/*
 * EL VELO. Va en TODAS las tarjetas con foto, no solo en las que hoy llevan
 * algo encima: el día que se añada un dato flotante ya está garantizado que se
 * lee. Es un elemento propio (<span>) y no un ::after del media porque el
 * ::after lo ocupa el borde interior de la pieza destacada.
 */
.lt-tarjeta__velo {
  position: absolute;
  inset: 0;
  background: var(--velo-corto);
  pointer-events: none;   /* el velo no puede robarle el clic a la tarjeta */
}

/* La categoría flotando sobre la fotografía, en terracota. Tinta oscura
   encima (5.0:1): blanco sobre terracota se queda en 3.7:1 y no pasa AA. */
.lt-tarjeta__categoria {
  position: absolute;
  left: var(--e-2);
  bottom: var(--e-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - var(--e-4));
  padding: 5px 12px;
  border-radius: var(--radio-pildora);
  background: var(--brasa);
  color: var(--brasa-tinta);
  font-size: 11px;
  font-weight: var(--peso-fuerte);
  letter-spacing: .08em;
  text-transform: uppercase;
  /* Una categoría larga («Servicios legales y notariales») no puede empujar
     la tarjeta ni partirse en tres líneas sobre la foto. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- El respaldo: la tarjeta SIN fotografía ------------------------- */

/*
 * Esto es lo contrario de un hueco. Es una pieza compuesta: degradado de
 * marca, la inicial gigante en Fraunces como marca de agua y la categoría
 * abajo. Tiene que verse INTENCIONADO — si parece un fallo de carga, el
 * negocio que no subió foto queda peor que si no estuviera.
 */
.lt-tarjeta__media--vacia {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--e-3);
  background: var(--degradado-marca);
}

/* Textura: dos círculos concéntricos muy tenues que rompen el plano del
   degradado. Sin ellos el respaldo se ve como un rectángulo de color. */
/*
 * EL PICTOGRAMA DE LA CATEGORIA.
 *
 * Grande, al fondo a la derecha, casi transparente. Es lo que convierte el
 * respaldo en una pieza compuesta en vez de un rectangulo con una letra: la
 * inicial identifica al negocio, el simbolo dice a que se dedica.
 *
 * Y ES UN DIBUJO, NO UNA FOTO. Esa es la razon de que exista: se probo poner
 * una fotografia de la categoria y se leia como la foto DEL NEGOCIO, que es una
 * afirmacion falsa sobre el local de otra persona. Un trazo de linea no puede
 * malinterpretarse asi.
 *
 * `overflow: hidden` lo tiene ya el contenedor de la tarjeta, asi que puede
 * sobresalir por el borde: recortado se ve mas grafico y menos como un icono
 * suelto puesto en una esquina.
 */
.lt-tarjeta__simbolo {
  position: absolute;
  right: -14px;
  bottom: -18px;
  width: 46%;
  max-width: 132px;
  height: auto;
  color: #FFF;
  opacity: .13;
  pointer-events: none;
}

@media (max-width: 600px) {
  .lt-tarjeta__simbolo { width: 40%; right: -10px; bottom: -12px; }
}

.lt-tarjeta__media--vacia::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -25%;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 0 0 24px rgba(255, 255, 255, .04);
  pointer-events: none;
}

.lt-tarjeta__inicial {
  font-family: var(--fuente-titulo);
  font-weight: 900;
  font-size: clamp(3.5rem, 9vw, 5rem);
  line-height: .9;
  letter-spacing: var(--tracking-display);
  /* 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;
  color: var(--blanco);
  /* No es texto que se lea: es una marca de agua. Al 88% de opacidad sigue
     siendo blanco sobre azul oscuro, así que aunque un lector la anunciara
     —no lo hace, va con aria-hidden— se vería perfectamente. */
  opacity: .88;
  user-select: none;
  position: relative;
  z-index: 1;
}

.lt-tarjeta__rotulo-vacio {
  position: relative;
  z-index: 1;
  margin-top: var(--e-1);
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  /* Azul claro y no el acento: esta etiqueta se apoya sobre el degradado
     marca→noche, y el acento sobre el extremo AZUL del degradado se queda en
     3,01:1. El claro pasa AA en los dos extremos (4,54:1 y 10,7:1). */
  color: var(--cielo-claro);
}

/* En la pieza sin foto el velo sobra: no hay fotografía impredecible debajo,
   el degradado ya garantiza el contraste y oscurecerlo más apaga el azul. */
.lt-tarjeta__media--vacia .lt-tarjeta__velo { display: none; }

/* --- El cuerpo ----------------------------------------------------- */

.lt-tarjeta__cuerpo {
  display: flex; flex-direction: column; gap: var(--e-1);
  padding: var(--e-3);
  flex: 1;
}

.lt-tarjeta__sellos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--e-1);
}

.lt-tarjeta__titulo {
  font-family: var(--fuente-titulo);
  font-size: 1.35rem;
  font-weight: var(--peso-titulo);
  font-optical-sizing: auto;
  letter-spacing: var(--tracking-titulo);
  /* line-height 1.22, no 17px sobre 16px como antes: los títulos de dos
     líneas se solapaban visualmente. */
  line-height: 1.22;
  margin: 0;
  /* Un nombre largo sin espacios («ElRinconcitoSalvadoreño») desbordaba la
     tarjeta y se salía por el borde redondeado. */
  overflow-wrap: anywhere;
}
.lt-tarjeta__titulo a { color: inherit; text-decoration: none; }
.lt-tarjeta__titulo a:hover { color: var(--marca); }

.lt-tarjeta__meta {
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2);
  font-size: var(--fs-chico); color: var(--apagado);
  margin: 0;
}

.lt-tarjeta__pie {
  margin-top: auto; padding-top: var(--e-2);
  display: flex; gap: var(--e-1); flex-wrap: wrap;
  /* Los botones de contacto van POR ENCIMA del enlace que cubre la tarjeta:
     si no, el dedo abre la ficha en vez de marcar el teléfono, y la función
     más útil del sitio se convierte en un botón muerto. */
  position: relative;
  z-index: 2;
}

/* La tarjeta entera es clicable, pero el enlace real sigue siendo el del
   título: así el lector de pantalla anuncia un solo destino con su texto. */
.lt-tarjeta__enlace-total::after {
  content: ''; position: absolute; inset: 0;
  z-index: 1;
}

/* El anillo de foco tiene que verse en la TARJETA, no en las dos palabras del
   título: el enlace real ocupa toda la pieza y un contorno de 3px alrededor de
   un texto suelto no dice dónde está el usuario. */
.lt-tarjeta:focus-within { box-shadow: var(--sombra-2), 0 0 0 3px var(--marca); }
.lt-tarjeta__enlace-total:focus-visible { outline: none; }

/* --- La variante DESTACADA: mismo tamaño, señalada con el sello ----- */

/*
 * ESTA PIEZA YA NO ROMPE LA REJILLA, Y ES DELIBERADO.
 *
 * Nació como «doble ancho con la imagen a la izquierda» con este argumento:
 * sin ella, un listado son cuatro filas de tres tarjetas idénticas y el ojo no
 * encuentra dónde empezar.
 *
 * El dueño lo cambió el 2026-08-18 y con razón: «quiero que todas queden del
 * mismo tamaño, porque si no luego van a pensar que le estamos dando prioridad
 * a un negocio». En un directorio de la comunidad, una tarjeta más grande sin
 * explicación se lee como favoritismo — y cuando SÍ está pagada, el tamaño la
 * grita en vez de declararla.
 *
 * La señal correcta es el SELLO, que dice con letras lo que el tamaño solo
 * insinuaba. Aquí no queda ninguna regla de tamaño: la variante sobrevive por
 * su sello y su filete, y mide exactamente lo mismo que sus vecinas.
 *
 * SI ALGUIEN QUIERE VOLVER A ROMPER EL RITMO de la rejilla, que NO sea con la
 * tarjeta de un negocio: una pieza editorial —un bloque de sección, una
 * llamada— no se confunde con un anuncio pagado.
 */

/* --- La variante SIN IMAGEN ---------------------------------------- */

/* El título respira más: sin fotografía, la tarjeta tiene que sostenerse con
   la tipografía, y ahí un título apretado se ve pobre. */
.lt-tarjeta--sin-imagen .lt-tarjeta__titulo { font-size: 1.45rem; }

/* ---------------------------------------------------------------- */
/* Accesibilidad                                                     */
/* ---------------------------------------------------------------- */

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

.lt-saltar {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--marca); color: var(--blanco);
  padding: 12px 20px; border-radius: 0 0 var(--radio-chico) 0;
}
.lt-saltar:focus { left: 0; }

/*
 * Red de seguridad del movimiento. Los tokens ya vienen neutralizados por
 * `prefers-reduced-motion`, pero una transición de 1ms sigue siendo una
 * transición: si algún día alguien anima algo sin pasar por los tokens, esto
 * lo apaga igual. La regla va la última para ganar por cascada.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ */
/* TIPOGRAFÍA DE MARCA — el eje de anchura de Archivo                  */
/*                                                                     */
/* El logotipo es condensada pesada en mayúsculas. Eso no se consigue  */
/* con `font-weight` solo: hace falta el eje `wdth` de la variable, y  */
/* se pide con font-variation-settings. Sin esta regla, los titulares  */
/* salen en Archivo de anchura normal y no se parecen a la marca.      */
/*                                                                     */
/* La condensada vive SOLO en titulares, eyebrows y sellos. Nunca en   */
/* párrafos: en español, con nombres de negocio largos y acentuados,   */
/* una condensada en mayúsculas a 16px es ilegible en un teléfono.     */
/* ------------------------------------------------------------------ */

h1, h2, .lt-display {
  font-variation-settings: 'wdth' var(--ancho-titular), 'wght' 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

h3, h4 {
  font-variation-settings: 'wdth' var(--ancho-etiqueta), 'wght' 700;
}

.lt-etiqueta {
  font-variation-settings: 'wdth' var(--ancho-etiqueta), 'wght' 700;
}

/* Los nombres propios (negocios, personas) NO van en mayúsculas: un nombre
   como «La Fórmula AutoSpa» en caja alta pierde su forma y cuesta más leerlo. */
.lt-tarjeta__titulo {
  font-variation-settings: 'wdth' var(--ancho-etiqueta), 'wght' 700;
  text-transform: none;
  letter-spacing: 0;
}

/* Cifras: la anchura tabular alinea contadores y precios en columna. */
.lt-cifra, .lt-precio {
  font-variation-settings: 'wdth' var(--ancho-texto), 'wght' 900;
  font-variant-numeric: tabular-nums;
}

/* ==================================================================== */
/* LA TARJETA SIN FOTOGRAFIA                                            */
/* ==================================================================== */

/*
 * No es una tarjeta a la que le falta la foto: es una tarjeta que no la lleva.
 * La diferencia es todo. Sin marco vacio que llenar, lo que hay —categoria,
 * nombre, ciudad, telefono— ocupa la pieza entera y se ve deliberado.
 *
 * El filete superior de color es lo que le devuelve el peso visual que daba la
 * fotografia. Sin el, una columna de tarjetas blancas es una lista.
 */

.lt-tarjeta--sin-imagen {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanco, #FFF);
  border: 1px solid rgba(11, 18, 32, .10);
  border-radius: var(--radio, 12px);
  overflow: hidden;
}

.lt-tarjeta--sin-imagen::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--degradado-marca);
}

.lt-tarjeta--sin-imagen .lt-tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Hueco arriba para el filete. */
  padding: calc(var(--e-3, 20px) + 4px) var(--e-3, 20px) var(--e-3, 20px);
  height: 100%;
}

/*
 * EL TITULAR MANDA. Con foto competia con ella; sin foto es lo primero que se
 * lee y puede crecer.
 */
.lt-tarjeta--sin-imagen .lt-tarjeta__titulo {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.15;
}

/*
 * LOS BOTONES SE PEGAN ABAJO.
 *
 * En una fila de tarjetas de alturas iguales, las descripciones tienen largos
 * distintos: sin esto, los botones de llamar quedan a alturas distintas y la
 * fila se ve desalineada aunque las cajas midan lo mismo.
 */
.lt-tarjeta--sin-imagen .lt-tarjeta__acciones {
  margin-top: auto;
  padding-top: 4px;
}

/*
 * EL PICTOGRAMA DE LA CATEGORIA, AL FONDO.
 *
 * Muy tenue y recortado por el borde. Es lo unico que queda del intento de
 * ilustrar la ficha, y sobrevive porque un trazo de linea NO se puede confundir
 * con una fotografia del local: no afirma nada sobre el negocio.
 */
.lt-tarjeta--sin-imagen .lt-tarjeta__simbolo {
  position: absolute;
  right: -18px;
  bottom: -20px;
  width: 108px;
  height: auto;
  color: var(--marino, #12294F);
  opacity: .06;
  pointer-events: none;
}


/* ====================================================================
 * LA PASADA DE ZONAS PULSABLES — 2026-08-09
 * --------------------------------------------------------------------
 * Medido con Playwright a 390 px sobre ocho pantallas distintas: DIECIOCHO
 * componentes por debajo de 44x44, repetidos en todas las páginas del
 * sitio. No es una lista de casos raros: son el botón principal, los
 * accesos del hero, los enlaces del pie y las migas. O sea, casi todo lo
 * que se pulsa cuando no se está pulsando una tarjeta.
 *
 * Aparecieron todos juntos porque hasta hoy la comprobación medía la caja
 * del elemento y tres falsos positivos —logotipo, pausa de la cinta y
 * conmutador de idioma, que ya se habían arreglado con un ::after
 * invisible— llenaban el informe y tapaban al resto. Una prueba que grita
 * en todas las páginas deja de leerse.
 *
 * DOS TÉCNICAS, SEGÚN DÓNDE VIVE EL ENLACE:
 *
 *   · EN UNA LISTA O COMO BOTÓN → crece de verdad (min-height). Ahí el
 *     alto extra es aire entre elementos, que además se agradece.
 *   · DENTRO DE UN PÁRRAFO → un ::after absoluto e invisible. Un enlace en
 *     mitad de una frase no puede medir 44 px de alto sin pisar las líneas
 *     de arriba y abajo. Es la misma técnica que el tema ya usaba en el
 *     conmutador de idioma.
 *
 * SOLO POR DEBAJO DE 900 px. En escritorio se apunta con ratón, y engordar
 * el pie y las migas ahí es gastar espacio sin ganar nada.
 * ==================================================================== */

@media (max-width: 900px) {

  /* --- Los que ya casi llegaban: entre 36 y 42 px ------------------- */

  /*
   * EL `body` DE DELANTE NO ES ADORNO, Y ESTO SE DESCUBRIÓ MIDIENDO.
   *
   * base.css carga ANTES que las hojas de módulo (el orden es tokens → base
   * → utilidades → hero → estructura → componentes → …). Con la misma
   * especificidad —una clase contra una clase— gana la que se lee después,
   * o sea la del módulo.
   *
   * Resultado del primer intento: de los dieciocho, quince quedaron
   * arreglados y TRES no se movieron ni un píxel. Los tres estaban
   * redefinidos más tarde: .lt-negocio-pildora en directorio.css,
   * .lt-pie__grupo en estructura.css y .lt-vistas__enlace en
   * ayudas-eventos.css. La regla se escribía, el navegador la leía, y la
   * siguiente hoja la tiraba a la basura.
   *
   * `body` delante sube la especificidad de (0,1,0) a (0,1,1) y basta. Es
   * lo mínimo que gana: subir más sería empezar una guerra de selectores
   * que se gana una vez y se pierde la siguiente.
   */
  body .lt-btn,
  body .lt-hero__acceso,
  body .lt-vistas__enlace,
  body .lt-negocio-pildora,
  body .lt-pie__grupo,
  body .lt-buscador__boton {
    min-height: 44px;
  }

  /* El botón del buscador es cuadrado: sin el ancho se queda en 38. */
  .lt-buscador__boton { min-width: 44px; }

  /*
   * `align-items: center` para que subir el alto no despegue el texto
   * hacia arriba: varios de estos son `inline-block` y el texto se queda
   * pegado al borde superior de la caja nueva.
   */
  .lt-btn,
  .lt-hero__acceso,
  .lt-vistas__enlace,
  .lt-negocio-pildora,
  .lt-pie__grupo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* El acceso del hero lleva icono ENCIMA del texto: ahí la columna es la
     composición, y forzar fila la rompería. */
  .lt-hero__acceso { flex-direction: column; }

  /* --- Enlaces en lista: crecen ------------------------------------- */

  .lt-pie__lista a,
  .lt-pie__legal a,
  .lt-indice__lista a,
  .lt-filtros__limpiar,
  .lt-dir-limpiar,
  .lt-enlace-mas,
  .lt-carril__todos {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /*
   * El título de categoría del índice es un <h3> con un enlace dentro: se
   * estira el enlace, no el titular, o el índice entero se descuadra.
   */
  .lt-indice__cat a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* --- Enlaces dentro de un párrafo: área invisible ----------------- */

  /*
   * Aquí NO se puede crecer. `.lt-vitrina__enlace` va dentro de una frase
   * («¿Tienes un negocio? Publícalo aquí»), el teléfono del pie va dentro
   * de una dirección, y el enlace del aviso de próximamente va en mitad de
   * un párrafo. Un min-height de 44 en cualquiera de los tres solapa las
   * líneas vecinas. El ::after crece solo la zona que el dedo toca.
   */
  .lt-vitrina__enlace,
  .lt-pie__dato a,
  .lt-proximamente__mientras a,
  .lt-miga a {
    position: relative;
  }

  .lt-vitrina__enlace::after,
  .lt-pie__dato a::after,
  .lt-proximamente__mientras a::after,
  .lt-miga a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    min-height: 44px;
    height: 44px;
    transform: translateY(-50%);
  }
}