/*
 * PORTADA — Latinos en Texas
 *
 * QUÉ HAY AQUÍ Y QUÉ NO. Esta hoja contiene SOLO las composiciones que existen
 * únicamente en la portada. Todo lo demás ya está resuelto antes en la cascada y
 * repetirlo sería crear una segunda versión que se desincroniza:
 *
 *   tokens.css      → color, tipografía, radios, sombras, magnitudes del movimiento
 *   base.css        → .lt-seccion--noche/--hueso/--blanca, .lt-tarjeta y su
 *                     respaldo sin foto, .lt-btn, .lt-sello, .lt-etiqueta
 *   utilidades.css  → .lt-capa (foto + degradado + contenido), .lt-cinta,
 *                     .lt-sangre, .lt-eleva, .lt-zoom, .lt-escalona y la
 *                     aparición al hacer scroll
 *   componentes.css → botones de contacto, estado vacío, código de cupón
 *
 * Se encola como «lt-portada» con dependencia de «lt-componentes», así que se
 * imprime la última y gana los choques de nombres sin un solo !important.
 *
 * LAS CUATRO COMPOSICIONES QUE JUSTIFICAN ESTE ARCHIVO
 *   3 · Ayudas   — una grande a la izquierda + dos apiladas; cinta en móvil.
 *   4 · Negocios — el primero ocupa DOBLE ancho y DOBLE alto (4+2+3 = 9 celdas
 *                  en tres columnas: la rejilla cierra exacta, sin huecos).
 *   6 · Noticias — la principal rompe el contenedor por la izquierda.
 *   7 · Agenda   — filas horizontales con el bloque de día SOLAPANDO la foto.
 *
 * Aquí no hay ni un color, ni un radio, ni una duración literales: todo sale de
 * tokens.css. Es lo que impide que vuelva a pasar lo del sitio anterior —el azul
 * de marca escrito a mano 665 veces y ya con dos tonos conviviendo—.
 */

/* ================================================================== */
/* 0 · PIEZAS COMPARTIDAS POR VARIAS SECCIONES DE LA PORTADA           */
/* ================================================================== */

/*
 * Cabecera editorial. Hereda la caja de .lt-cabeza-seccion (base.css) y le añade
 * la entradilla. `align-items: end` alinea el enlace «ver todo» con la base del
 * titular, no con su centro: es lo que hace que la fila se lea como una línea y
 * no como dos bloques sueltos.
 */
.lt-cabeza-seccion--editorial {
  align-items: end;
}

.lt-cabeza-seccion__texto {
  /* Sin este mínimo, un titular largo empuja el enlace fuera de la caja en vez
     de bajarlo a la línea siguiente. */
  min-width: min(100%, 34ch);
  max-width: 46ch;
}

.lt-bajada {
  margin: var(--e-2) 0 0;
  max-width: 56ch;
  font-size: 1.05rem;
  color: var(--apagado);
}

/* El gris de texto no llega al contraste mínimo sobre la banda oscura. */
.lt-seccion--noche .lt-bajada { color: var(--niebla); }

/*
 * Enlace «ver todo». No es un .lt-btn--fantasma a propósito: esa variante
 * invierte a currentColor al pasar el ratón y sobre las secciones claras deja un
 * relleno casi negro con texto azul (≈2,2:1, por debajo de AA). Un enlace de
 * texto es más honesto y no compite con el CTA real de la sección.
 *
 * Los 44px de alto mínimo no son decorativos: es un objetivo táctil, y este
 * enlace se pulsa con el pulgar. Sobre la banda oscura el color se lo cambia
 * base.css a --cielo (7,1:1) sin que haya que repetir nada aquí.
 */
.lt-mas {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-chico);
  font-weight: var(--peso-fuerte);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--marca);
  border-bottom: 2px solid transparent;
  transition: border-color var(--transicion), color var(--transicion);
}

.lt-mas::after {
  content: '\2192';   /* flecha decorativa: no es texto que haya que traducir */
  margin-inline-start: 8px;
}

.lt-mas:hover { border-bottom-color: currentColor; }

/*
 * RUBRO — la categoría, en terracota. Es el detalle cálido que recorre toda la
 * portada (tipo de ayuda, giro del negocio, tema de la noticia, categoría del
 * evento, formato del episodio).
 *
 * Sobre claro va --brasa-texto (4,9:1). La terracota viva se queda en 3,3:1 y NO
 * pasa AA: solo se usa sobre fondo oscuro, donde da 5,1:1.
 *
 * Nunca es ámbar. El ámbar significa «pagado» en este sitio y solo eso; si se
 * gastara en decorar categorías dejaría de identificar lo patrocinado, que es
 * una promesa explícita del documento del cliente.
 */
.lt-rubro {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: var(--peso-fuerte);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brasa-texto);
}

.lt-seccion--noche .lt-rubro,
.lt-capa__texto .lt-rubro { color: var(--brasa); }

/*
 * EL RESPALDO SIN FOTO de las piezas editoriales.
 *
 * Las tarjetas ya tienen el suyo en base.css. Esto es lo mismo para las piezas
 * que NO son tarjeta (la portada de noticias, la foto de un evento, la
 * miniatura de un episodio), y reutiliza a propósito las clases
 * .lt-tarjeta__inicial y .lt-tarjeta__rotulo-vacio: el hueco sin fotografía
 * tiene que verse IGUAL en toda la portada. Dos respaldos distintos para el
 * mismo problema es justo la deriva que el sistema existe para impedir.
 */
.lt-capa__respaldo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--e-1);
  padding: clamp(16px, 3vw, 32px);
  background: var(--degradado-marca);
  overflow: hidden;
}

/*
 * Textura: un círculo tenue que rompe el plano del degradado. Sin él, el
 * respaldo se ve como un rectángulo de color plano y delata que falta una foto.
 */
.lt-capa__respaldo::before {
  content: '';
  position: absolute;
  top: -45%;
  right: -30%;
  width: 85%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 0 0 26px rgba(255, 255, 255, .04);
  pointer-events: none;
}

.lt-capa__respaldo .lt-tarjeta__inicial,
.lt-capa__respaldo .lt-tarjeta__rotulo-vacio {
  position: relative;
  z-index: 1;
}

/*
 * Sobre el respaldo, el velo denso de .lt-capa sobra: el degradado de marca ya
 * garantiza el contraste y añadirle un 88% de negro apaga el azul y deja la
 * inicial gris. Se aligera solo en las piezas que llevan respaldo.
 * Si el navegador no entiende :has(), lo peor que pasa es que la pieza sin foto
 * se ve algo más oscura — se degrada, no se rompe.
 *
 * EXCEPCIÓN `--densa`, y es de contraste, no de gusto: esa variante la piden las
 * piezas que llevan TITULAR encima (la portada de noticias). Este selector tiene
 * más peso (0,2,0) que `.lt-capa--densa` (0,1,0), así que sin el `:not` le
 * quitaba el velo justo a la única pieza que no puede quedarse sin él. El
 * degradado de marca es oscuro en su esquina inferior derecha pero claro en la
 * superior izquierda, que es por donde entran las dos primeras líneas del
 * titular: se leía «si había suerte».
 */
.lt-capa:not(.lt-capa--densa):has(.lt-capa__respaldo)::after {
  background: linear-gradient(to top, rgba(7, 19, 36, var(--capa-densa)) 0%, rgba(7, 19, 36, 0) 78%);
}

/*
 * CINTA HORIZONTAL EN MÓVIL.
 *
 * Tres tarjetas apiladas a pantalla completa obligan a hacer tres pantallazos
 * solo para descubrir que hay tres. En cinta se ven de un vistazo, y el 82% de
 * ancho deja asomar la siguiente: ese trozo visible ES la señal de que hay más,
 * y funciona mejor que cualquier flecha dibujada.
 *
 * Los márgenes negativos valen exactamente el canal del contenedor, así que la
 * cinta llega a los bordes de la pantalla sin desbordar: el padding del
 * contenedor absorbe el margen.
 */
@media (max-width: 860px) {
  .lt-tira-movil {
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    /* `hidden` en el eje vertical evita una barra de desplazamiento fantasma;
       el padding de arriba deja sitio a la sombra para que no se recorte. */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--canal);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--canal) * -1);
    padding: var(--e-1) var(--canal) var(--e-3);
  }

  .lt-tira-movil > * { scroll-snap-align: start; }
}


/* ================================================================== */
/* 3 · AYUDAS — una grande a la izquierda, dos apiladas a la derecha   */
/* ================================================================== */

.lt-ayudas__rejilla {
  display: grid;
  gap: var(--e-3);
}

@media (min-width: 861px) {
  .lt-ayudas__rejilla {
    grid-template-columns: 1.3fr 1fr;
    /* Filas iguales: sin esto, la pieza alta la marca la tarjeta más larga de
       la derecha y las dos columnas dejan de cuadrar por abajo. */
    grid-auto-rows: 1fr;
    gap: var(--e-4);
  }

  .lt-ayudas__rejilla > :first-child { grid-row: span 2; }

  /*
   * En la pieza alta la fotografía manda: se le quita la proporción fija 16/10
   * y se la deja crecer con la tarjeta. Con la proporción puesta quedaba una
   * franja blanca enorme debajo de la foto.
   */
  .lt-ayudas__rejilla > :first-child .lt-tarjeta__media {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 280px;
  }

  .lt-ayudas__rejilla > :first-child .lt-tarjeta__titulo {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
  }

  .lt-ayudas__rejilla > :first-child .lt-tarjeta__cuerpo {
    padding: var(--e-4);
  }

  /* Una sola ayuda publicada: la pieza alta dejaría media sección en blanco. */
  .lt-ayudas__rejilla > :first-child:last-child {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  /* Dos ayudas: la de la izquierda deja de ser doble de alta o la derecha
     quedaría flotando sobre un hueco. */
  .lt-ayudas__rejilla:has(> :nth-child(2):last-child) > :first-child {
    grid-row: auto;
  }
}


/* ================================================================== */
/* 4 · NEGOCIOS — la pieza principal de la portada                     */
/* ================================================================== */

.lt-negocios__rejilla {
  display: grid;
  gap: var(--e-3);
}

/* Tableta: dos columnas, y el primero a lo ancho. */
@media (min-width: 641px) and (max-width: 1023px) {
  .lt-negocios__rejilla { grid-template-columns: repeat(2, 1fr); }
  .lt-negocios__rejilla > :first-child { grid-column: 1 / -1; }
  /* Una tarjeta impar y sola al final de una fila de dos se ve rota. */
  .lt-negocios__rejilla > :last-child:nth-child(even) { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .lt-negocios__rejilla {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e-4);
  }

  /*
   * LA PIEZA QUE ABRE LA PÁGINA: doble ancho y doble alto.
   * Con seis negocios la rejilla cierra exacta —4 celdas de la grande + 2 a su
   * derecha + 3 abajo = 9 = 3×3— y no queda ni un hueco. Un hueco en una
   * rejilla no se lee como aire: se lee como una tarjeta que no cargó.
   */
  .lt-negocios__rejilla > :first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  .lt-negocios__rejilla > :first-child .lt-tarjeta__media {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 340px;
  }

  .lt-negocios__rejilla > :first-child .lt-tarjeta__titulo {
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  }

  .lt-negocios__rejilla > :first-child .lt-tarjeta__cuerpo {
    padding: var(--e-4) var(--e-5) var(--e-5);
  }

  /*
   * CIERRES POR CANTIDAD. Solo se publican los negocios que han pagado el
   * destacado, así que puede haber menos de seis y la rejilla asimétrica dejaría
   * huecos. El número real viaja como clase desde la plantilla y aquí se
   * recoloca la última pieza para que la composición cierre siempre.
   */
  .lt-negocios__rejilla--n1 > :first-child { grid-column: 1 / -1; grid-row: auto; }
  .lt-negocios__rejilla--n2 > :first-child { grid-row: auto; }
  .lt-negocios__rejilla--n4 > :last-child  { grid-column: span 3; }
  .lt-negocios__rejilla--n5 > :nth-child(4) { grid-column: span 2; }
}


/* ================================================================== */
/* 5 · CUPONES — billetes troquelados sobre la banda noche             */
/* ================================================================== */

.lt-vales__rejilla {
  display: grid;
  /* Los carriles se topan a 380px: un cupón a 600px de ancho deja de parecer un
     billete y pasa a parecer un banner. */
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 380px));
  justify-content: center;
  gap: var(--e-4);
}

/*
 * EL BILLETE. La tarjeta compartida cambia de papel: fondo hueso sobre la banda
 * noche, para que se lea como un cupón de verdad y no como una tarjeta más.
 *
 * OJO — ESTE BLOQUE NO ES COSMÉTICO. `.lt-seccion--noche` pinta de blanco todo
 * el texto que hay dentro, incluidos los enlaces (que pasa a --cielo). Sobre el
 * papel hueso eso da 2,2:1 y el cupón quedaría ilegible. Cada regla de aquí
 * devuelve la tinta oscura con la MISMA especificidad que la de base.css y gana
 * por orden de cascada, que es por lo que esta hoja depende de lt-componentes.
 */
.lt-vales .lt-tarjeta {
  background: var(--hueso);
  color: var(--tinta);
  box-shadow: var(--sombra-3);
}

.lt-vales .lt-tarjeta .lt-tarjeta__titulo,
.lt-vales .lt-tarjeta .lt-tarjeta__titulo a { color: var(--tinta); }
.lt-vales .lt-tarjeta .lt-tarjeta__titulo a:hover { color: var(--marca); }
.lt-vales .lt-tarjeta .lt-tarjeta__meta,
.lt-vales .lt-tarjeta .lt-apagado { color: var(--apagado); }

/* El anillo de foco azul marca sobre el papel hueso sí se ve (7,2:1); es el de
   la banda oscura el que había que devolver. */
.lt-vales .lt-tarjeta :focus-visible { outline-color: var(--marca); }

/*
 * EL TROQUELADO. El código se despega del cuerpo y se convierte en la matriz
 * del billete: se estira hasta los bordes con márgenes negativos que valen
 * exactamente el padding del cuerpo.
 */
.lt-vales .lt-codigo {
  position: relative;
  margin: var(--e-3) calc(var(--e-3) * -1) calc(var(--e-3) * -1);
  /* Empuja la matriz al fondo de la tarjeta: en una fila de tres cupones con
     textos de distinto largo, las tres matrices quedan a la misma altura. */
  margin-block-start: auto;
  padding: var(--e-3);
  border: 0;
  border-radius: 0;
  background: var(--hueso-honda);
  color: var(--tinta);
  text-align: center;
  /* Monoespaciada del sistema (no descarga nada): en un código hay que
     distinguir el 0 de la O y el 1 de la l. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: var(--peso-fuerte);
  letter-spacing: .18em;
  text-transform: uppercase;
}

/*
 * La línea de puntos, separada de los bordes para no cruzar las muescas.
 *
 * NO usa var(--linea): dentro de `.lt-seccion--noche`, base.css reasigna esa
 * variable al filete translúcido blanco de las bandas oscuras, y aquí el papel
 * es claro — la línea desaparecería. Se deriva de la tinta con color-mix y se
 * deja un gris sólido de respaldo delante para el navegador que no la entienda.
 */
.lt-vales .lt-codigo::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 16px;
  right: 16px;
  border-top: 2px dashed var(--apagado);
  border-top-color: color-mix(in srgb, var(--tinta) 28%, transparent);
}

/*
 * LAS MUESCAS. Dos medias circunferencias del color de la banda, mordidas en los
 * lados justo sobre la línea de puntos. Se pintan con degradados radiales dentro
 * del propio elemento —y no con pseudo-elementos que sobresalgan— porque la
 * tarjeta lleva `overflow: hidden` para recortar la foto al radio, y cualquier
 * cosa que salga fuera se recortaría con ella.
 */
.lt-vales .lt-codigo::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 15px;
  background:
    radial-gradient(circle 15px at 0 0, var(--noche) 97%, transparent 100%) left top / 50% 100% no-repeat,
    radial-gradient(circle 15px at 100% 0, var(--noche) 97%, transparent 100%) right top / 50% 100% no-repeat;
  pointer-events: none;
}


/* ================================================================== */
/* 6 · NOTICIAS — el cartel entero y el titular en tinta               */
/* ================================================================== */

/*
 * LO QUE HABIA AQUI Y POR QUE SE SUSTITUYE ENTERO.
 *
 * La pieza mayor era una caja casi cuadrada (839x783 en 1440) con la fotografia
 * de FONDO, un velo del 88 % encima y el titular en blanco sobre la foto.
 * Fallaban tres cosas a la vez y las tres se midieron:
 *
 *  1. NITIDEZ. Con `object-fit: cover`, una caja mas alta que la imagen la
 *     amplia hasta «alto de la caja x 16/9». 783 x 16/9 = 1.392 px de fuente
 *     necesarios, y la deriva de mas abajo los multiplicaba por 1,12: 1.559 en
 *     pantalla normal y 3.118 en densidad 2, con 2.560 como archivo mas grande
 *     que existe. No era mala suerte: era aritmetica.
 *     La caja era tan alta porque el lienzo estiraba las dos columnas Y LA FOTO
 *     ERA LA COLUMNA. Ahora la foto vive dentro de una rejilla interior que va
 *     en `start`, asi que se estira la columna y nunca la imagen.
 *  2. DOBLE LECTURA. Estas fotos no son fotografia: son carteles 16:9 que el
 *     dueno rotula con el titular DENTRO. Recortados a 1,07 la frase se parte
 *     por los cuatro lados, y encima se pintaba el mismo titular otra vez.
 *  3. CONTRASTE PRESTADO. El blanco solo se leia gracias al velo, o sea que la
 *     legibilidad dependia del pixel de una foto que sube el dueno.
 *
 * La correccion es la misma para las tres: SACAR EL TEXTO DE ENCIMA DE LA FOTO.
 * La caja pasa a tener la proporcion del archivo (cero ampliacion), el cartel se
 * ve entero y el titular baja al papel, donde da 16,9:1 contra --hueso pase lo
 * que pase con la imagen.
 *
 * Sustituye a las lineas 433-746 y OBLIGA a retirar las lineas 1878-1935 (la
 * deriva `lt-deriva`): ese scale(1.12) permanente es el tercer factor del
 * emborronamiento y ademas apunta a `.lt-noticias__mayor`, que ya no existe.
 * Se conserva el rotulo de seccion de 1874-1876, que encabeza tambien el hilo
 * de lectura que viene detras.
 */

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

/*
 * El lienzo no tiene canal propio —la foto de apertura tiene que llegar al
 * borde de la pantalla—, asi que cada bloque de TEXTO se pone el suyo. En
 * escritorio estas tres declaraciones se anulan y manda la rejilla.
 */
.lt-noticias__plomo,
.lt-noticias__rail {
  width: 100%;
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--canal);
}

.lt-noticias__apertura {
  position: relative;   /* ancla del ::after de .lt-tarjeta__enlace-total */
  display: grid;
  gap: var(--e-4);
}

.lt-noticias__plomo {
  display: grid;
  gap: var(--e-2);
  justify-items: start;
}

/*
 * El rail va en COLUMNA FLEXIBLE y no en rejilla, y es por una razon concreta:
 * en escritorio necesita empujar el bloque de cierre al fondo (`margin-top:
 * auto`) para que su base quede a la altura de la base de la apertura. Con
 * rejilla habria que declarar las filas, y el numero de piezas cambia cuando el
 * filtro de ciudad devuelve menos de cinco noticias.
 */
.lt-noticias__rail {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}


/* --- LA LAMINA: la caja de la fotografia ---------------------------- */

/*
 * NO LLEVA `.lt-capa`, Y ES A PROPOSITO.
 *
 * `.lt-capa` significa «foto CON velo porque encima va texto» (utilidades.css).
 * Aqui no va texto encima de ninguna foto, asi que el velo solo apagaria el
 * cartel del dueno. Se reimplementan las cuatro lineas que si hacen falta
 * —recorte, radio y color de espera— y a cambio DESAPARECEN tres excepciones
 * que existian solo por esta seccion: el `:not(.lt-capa--densa)` de la linea
 * 180, el respaldo desplazado a flex-start y el rotulo del respaldo oculto.
 *
 * `.lt-capa__foto` y `.lt-capa__respaldo` se siguen usando tal cual: son
 * selectores de clase sueltos, no dependen de `.lt-capa`, y son exactamente lo
 * que imprime `lt_portada_foto()`. Cero marcado nuevo en el ayudante.
 */
.lt-noticias__lamina {
  position: relative;
  isolation: isolate;
  overflow: hidden;                 /* recorta el zoom del hover al radio */
  aspect-ratio: 16 / 9;
  border-radius: var(--radio-grande);
  background-color: var(--noche);   /* color de espera: nunca un hueco blanco */
}

/*
 * LA CAJA PLANA, Y NO ES UN CAPRICHO.
 *
 * Se midieron las 17 noticias del archivo: las proporciones van de 1,50 a 1,778
 * (1,50 · 1,58 · 1,588 · 1,592 · 1,60 · 1,60 · 1,614 · 1,708 · 1,713 · 1,718 ·
 * 1,72 · 1,778 x6). Con UNA sola caja 16:9, la foto de 1,50 pierde el 18,5 % de
 * su alto —9,3 % por arriba y otro tanto por abajo, que es justo donde estos
 * carteles ponen la marca de agua LATINOSENTEXAS—.
 *
 * Con dos cajas y el umbral en la media geometrica de las dos (raiz de
 * 1,6 x 1,778 = 1,686), cada imagen cae en la que menos la recorta. Medido
 * sobre el archivo real: las seis de 16:9 no pierden nada, la peor pierde un
 * 6,2 % (3,1 % por lado) y la media queda en 1,4 %.
 */
.lt-noticias__lamina--plana { aspect-ratio: 8 / 5; }

/* A sangre por la izquierda: esa esquina se cuadra porque toca el borde de la
   pantalla; la de la derecha conserva el radio grande. */
.lt-noticias__lamina--apertura {
  border-radius: 0 var(--radio-grande) var(--radio-grande) 0;
}

/* El respaldo sin fotografia vuelve al diseno compartido: inicial centrada y
   rotulo visible. Las dos excepciones que habia aqui se han retirado. */
.lt-noticias__lamina .lt-tarjeta__inicial { font-size: clamp(2.4rem, 5vw, 4.5rem); }
.lt-noticias__segunda .lt-tarjeta__inicial { font-size: clamp(2rem, 4vw, 3rem); }


/* --- LA APERTURA: firma, titular, entradilla, pista ------------------ */

.lt-noticias__firma {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1) var(--e-2);
  margin: 0;
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--apagado);            /* 6,2:1 sobre --hueso */
}

/*
 * EL TITULAR — la voz del logotipo, pero en TINTA sobre papel.
 *
 * `font-variation-settings: normal` va PRIMERO y es obligatorio: base.css pone
 * ejes crudos ('wdth' 87, 'wght' 700) a TODO h3, y los ejes a pelo mandan sobre
 * font-weight y font-stretch. Sin apagarlos, ni el 800 ni la condensada llegan
 * a verse. Es la misma trampa que ya documentaba el bloque anterior.
 *
 * `font-stretch: 75%` con la propiedad de alto nivel y no con los ejes: si
 * Archivo no carga, el navegador puede tirar de 'Arial Narrow'; con los ejes a
 * pelo se quedaria en la ancha.
 *
 * LA MEDIDA CORTA ES EL RECURSO, no el tamano. Con `max-width` en ch el titular
 * ocupa unos 470 px de los 691 del carril y deja 220 px de papel a su derecha:
 * ese hueco es lo que hace que la pieza parezca compuesta y no rellenada.
 *
 * `break-word` y NUNCA `anywhere`: `anywhere` autoriza a partir DENTRO de una
 * palabra, que es justo lo que el encargo prohibe. `break-word` solo parte una
 * palabra que no cabe ni sola en su linea.
 */
.lt-noticias__titular {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-variation-settings: normal;
  font-weight: var(--peso-titulo);
  font-stretch: 75%;
  font-optical-sizing: auto;
  font-size: clamp(1.55rem, 2.6vw, 2.45rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--tinta);              /* 16,9:1 sobre --hueso */
  max-width: 24ch;
  text-wrap: balance;
  overflow-wrap: break-word;
  transition: color var(--transicion);
}

/*
 * TRES ESCALAS SEGUN LO QUE MIDE EL TITULAR, y las tres se disparan con el
 * contenido real: de las 17 noticias, 9 bajan de 80 caracteres, 6 estan entre
 * 81 y 130 y 2 pasan de 130. La clase la pone el PHP contando el titulo, no un
 * ajuste a ojo.
 *
 * Sin esto pasa una de dos: o el titular de 52 caracteres se ve pequeno, o el
 * de 163 se convierte en ocho lineas de MAYUSCULAS, que es un muro. Con las
 * tres escalas, el peor caso real cae en seis lineas.
 */
.lt-noticias__titular--grande { font-size: clamp(1.95rem, 3.5vw, 3.1rem);  max-width: 18ch; }
.lt-noticias__titular--largo  { font-size: clamp(1.4rem,  2.2vw, 2.05rem); max-width: 28ch; }

.lt-noticias__titular a { color: inherit; text-decoration: none; }

.lt-noticias__entradilla {
  margin: 0;
  max-width: 46ch;
  color: var(--apagado);            /* 6,2:1 sobre --hueso */
}

/* En la pantalla mas estrecha manda el titular. */
@media (max-width: 480px) {
  .lt-noticias__entradilla { -webkit-line-clamp: 2; }
}

/*
 * LA PISTA. No es un <a>: el enlace real es la capa que cubre la pieza entera y
 * dos enlaces al mismo destino se anuncian dos veces. Por eso lleva
 * aria-hidden en el marcado.
 */
.lt-noticias__pista {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  font-size: var(--fs-chico);
  font-weight: var(--peso-fuerte);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--marca);              /* 7,2:1 sobre --hueso */
  border-bottom: 2px solid transparent;
  transition: border-color var(--transicion);
}
.lt-noticias__pista::after { content: '\2192'; }


/* --- LA SEGUNDA ------------------------------------------------------ */

.lt-noticias__segunda {
  position: relative;
  display: grid;
  gap: var(--e-2);
  align-content: start;
}

.lt-noticias__titular-2 {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-variation-settings: normal;
  font-weight: var(--peso-fuerte);
  font-stretch: 87%;
  font-optical-sizing: auto;
  font-size: 1.15rem;
  line-height: 1.26;
  letter-spacing: var(--tracking-titulo);
  color: var(--tinta);              /* 16,9:1 */
  overflow-wrap: break-word;
  transition: color var(--transicion);
}
.lt-noticias__titular-2 a { color: inherit; text-decoration: none; }


/* --- EL INDICE: tres fechas, sin miniatura --------------------------- */

/*
 * POR QUE AQUI NO HAY FOTOGRAFIA Y ES UNA MEJORA, NO UNA PERDIDA.
 *
 * La miniatura anterior media 108x81 px. Estas imagenes son carteles con el
 * titular rotulado dentro ocupando entre un quinto y un tercio del alto: a 81 px
 * de alto esa letra mide 4-5 px. No es «pequena»: es una mancha gris con
 * textura de letra, y ademas repetia una frase que ya estaba escrita al lado.
 *
 * Antes se ensenaban cinco carteles y solo uno era legible. Ahora se ensenan
 * dos, de 815 y 437 px, y los dos son legibles. Se pasa de 1 a 2 carteles que
 * se pueden leer, no de 5 a 2.
 *
 * En su lugar va el unico dato que a ese tamano SI se lee y que ademas sale del
 * contenido real: la fecha, compuesta como cifra de calendario.
 */
.lt-noticias__breves {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--tinta);   /* «aqui empieza otra cosa» */
}

.lt-noticias__breves > li + li { border-top: 1px solid var(--linea); }

/*
 * El margen negativo y el relleno valen lo mismo, asi que la banda de color del
 * hover se sale 16 px por lado sin mover ni el filete (que vive en el <li>) ni
 * el texto.
 */
.lt-noticias__breve {
  position: relative;
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  align-items: start;
  gap: var(--e-3);
  min-height: 44px;
  padding: var(--e-3) var(--e-2);
  margin-inline: calc(var(--e-2) * -1);
  border-radius: var(--radio-chico);
  transition: background-color var(--transicion);
}

.lt-noticias__marca { display: block; }

.lt-noticias__dia {
  display: block;
  font-family: var(--fuente-titulo);
  font-variation-settings: normal;
  font-weight: var(--peso-titulo);
  font-stretch: 75%;
  font-size: 2.1rem;
  line-height: .84;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;   /* las tres cifras miden igual */
  color: var(--marca);                  /* 7,2:1 sobre --hueso */
}

.lt-noticias__mes {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: var(--peso-fuerte);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--apagado);                /* 6,2:1 sobre --hueso */
}

.lt-noticias__titular-3 {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-variation-settings: normal;
  font-weight: var(--peso-fuerte);
  font-stretch: 87%;
  font-optical-sizing: auto;
  font-size: 1.02rem;
  line-height: 1.28;
  letter-spacing: var(--tracking-titulo);
  color: var(--tinta);
  overflow-wrap: break-word;
  transition: color var(--transicion);
}
.lt-noticias__titular-3 a { color: inherit; text-decoration: none; }


/* --- EL CIERRE: la seccion termina en un enlace, no en un hueco ------ */

/*
 * Antes la columna derecha acababa unos 150 px por encima de la izquierda (250
 * en 2560) y dejaba papel muerto justo por donde sale el ojo. Este bloque tapa
 * ese hueco, convierte el desequilibrio en una L compuesta y le da final a la
 * seccion. Es tambien el motivo de que la cabecera ya no lleve el enlace: el
 * mismo destino dos veces en la misma pieza es repeticion.
 */
.lt-noticias__cierre {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e-1);
  min-height: 116px;
  padding: var(--e-3);
  border-radius: var(--radio-tarjeta);
  background: var(--marca);
  color: var(--blanco);                 /* 7,9:1 sobre --marca */
  text-decoration: none;
  transition: background-color var(--transicion);
}

/* base.css:99 pone `a:hover { color: var(--marca-oscuro) }` con especificidad
   (0,1,1), que gana a la clase: hay que repetir el color en el hover o el texto
   se vuelve azul oscuro sobre azul. */
.lt-noticias__cierre:hover { background: var(--marca-oscuro); color: var(--blanco); }

/* El anillo global es --marca y sobre --marca no se ve. */
.lt-noticias__cierre:focus-visible { outline-color: var(--hueso); }

.lt-noticias__cierre-etiqueta {
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--marca-borde);            /* 5,2:1 sobre --marca */
}

.lt-noticias__cierre-texto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  font-family: var(--fuente-titulo);
  font-variation-settings: normal;
  font-weight: var(--peso-titulo);
  font-stretch: 75%;
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  line-height: 1.06;
  text-transform: uppercase;
}

.lt-noticias__cierre-texto::after {
  content: '\2192';
  flex: none;
  font-family: var(--fuente-texto);
  font-stretch: normal;
  transition: transform var(--transicion);
}
.lt-noticias__cierre:hover .lt-noticias__cierre-texto::after { transform: translateX(6px); }


/* --- TABLETA: la segunda y el indice, uno al lado del otro ----------- */

@media (min-width: 768px) and (max-width: 1139.98px) {
  .lt-noticias__rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--e-5);
    align-items: start;
  }
  .lt-noticias__segunda { grid-row: 1 / 3; }
}


/* --- ESCRITORIO: el sangrado por la izquierda ------------------------ */

/*
 * SANGRADO SIN 100vw Y SIN MARGENES NEGATIVOS — la rejilla de cuatro carriles
 * que ya sostenia esta seccion, con dos cambios.
 *
 * El primero: el reparto pasa de .6/.4 a .58/.42 — la columna derecha ahora
 * lleva una fotografia de 437 px y necesita ese respiro.
 *
 * El segundo: la apertura ya no es la foto, es una rejilla que CONTIENE la foto.
 * Ese es el cambio que rompe la cadena del desenfoque, porque el estirado de la
 * columna deja de llegar a la imagen.
 */
@media (min-width: 1140px) {
  .lt-noticias__lienzo {
    grid-template-columns:
      minmax(var(--canal), 1fr)
      minmax(0, calc((var(--contenedor) - var(--canal) * 2) * .58))
      minmax(0, calc((var(--contenedor) - var(--canal) * 2) * .42))
      minmax(var(--canal), 1fr);
    /* Sin column-gap: un hueco entre el carril 1 y el 2 desalinearia el texto
       respecto de la cabecera. El aire entre las dos columnas lo pone el
       relleno del rail. */
    column-gap: 0;
    /*
     * `stretch` Y NO `start`, y esta vez SI es seguro. Era `stretch` lo que
     * estiraba la foto hasta 783 px de alto, pero ahora la foto vive dentro de
     * la rejilla interior de la apertura, que va en `start`: la lamina conserva
     * su proporcion y quien se estira es la COLUMNA, no la imagen. Se
     * comprobo midiendo la caja de la foto en los nueve anchos.
     *
     * Se necesita para que el rail pueda empujar su bloque de cierre al fondo y
     * las dos columnas terminen a la misma altura.
     */
    align-items: stretch;
    /*
     * EL SEGURO CONTRA EL DESBORDAMIENTO POR LA IZQUIERDA (se conserva tal cual
     * del bloque anterior, con su razon). Con el valor por defecto, un sobrante
     * se repartiria entre los dos lados y la pieza empezaria en x negativa: la
     * foto arrancaria antes del borde y el titular saldria cortado.
     */
    justify-content: start;
  }

  /* Un item de rejilla tiene min-width:auto: una palabra larga sin espacios
     podria inflar su carril y empujar la composicion fuera de la ventana. */
  .lt-noticias__apertura,
  .lt-noticias__rail { min-width: 0; }

  /*
   * LA APERTURA REPITE LAS PISTAS 1 Y 2 DE LA REJILLA DE FUERA, y eso es lo que
   * alinea el titular con el resto de la pagina SIN una sola cuenta con `vw`.
   *
   * Antes se hacia con `padding-left: max(96px, calc((100vw - var(--contenedor))
   * / 2))` y fallaba por los dos lados: `100vw` incluye la barra de
   * desplazamiento (7-17 px en Windows), asi que el titular caia siempre unos
   * pixeles a la derecha de la vertical del resto de la pagina; y la formula se
   * olvidaba de sumar `--canal`, asi que caia 24 px a la izquierda. Repitiendo
   * la definicion de pistas, el navegador calcula lo mismo dos veces y coincide
   * al pixel: la caja de la apertura mide carril1 + carril2, y dentro el 1fr se
   * lleva exactamente lo que se lleva el carril 1 de fuera.
   */
  .lt-noticias__apertura {
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns:
      minmax(var(--canal), 1fr)
      minmax(0, calc((var(--contenedor) - var(--canal) * 2) * .58));
    column-gap: 0;
    row-gap: var(--e-4);
    align-items: start;
  }

  .lt-noticias__lamina--apertura {
    grid-column: 1 / -1;   /* la foto sangra hasta el borde de la ventana */
    /*
     * EL TOPE. Sin el, en 2560 la lamina mide 1.375 px de ancho y pide 2.750 px
     * de fuente en densidad 2 — mas de lo que existe (2.560). Con el tope la
     * foto SIGUE tocando el borde izquierdo en todos los anchos (que es el gesto
     * de la pieza) y deja papel a su derecha, que es lo que hace una revista.
     */
    max-width: 1120px;
  }

  .lt-noticias__plomo {
    grid-column: 2 / -1;   /* el texto vuelve a la vertical del contenedor */
    max-width: none;
    margin: 0;
    padding-inline: 0 var(--e-5);
  }

  .lt-noticias__rail {
    grid-column: 3 / 4;
    display: flex;
    flex-direction: column;
    max-width: none;
    margin: 0;
    padding-inline: var(--e-6) 0;
  }

  /*
   * El cierre se va al fondo del rail. Antes la columna derecha acababa entre
   * 150 y 250 px por encima de la izquierda —medido— y dejaba papel muerto
   * justo por donde sale el ojo. Con `margin-top: auto` las dos columnas
   * terminan a la misma altura y el desequilibrio se lee como una L compuesta.
   */
  .lt-noticias__cierre { margin-top: auto; }
}

/*
 * EL BOTON FLOTANTE DEL ASISTENTE. Vive abajo a la izquierda (asistente.css:478)
 * y mide 52 px a 34 px del borde: su lado derecho llega a 86. Por encima de
 * 1.384 px el carril exterior ya mide mas de 96 y no hace falta nada; entre
 * 1.140 y 1.384 mide entre 24 y 96, asi que ahi se reserva el sitio a mano.
 * Es la regla que ya existia, con el numero medido en vez de heredado — y
 * acotada a la franja donde de verdad hace falta, en vez de aplicarse siempre.
 */
@media (min-width: 1140px) and (max-width: 1383.98px) {
  .lt-noticias__apertura { grid-template-columns: 96px minmax(0, 1fr); }
}

@media (max-width: 1139.98px) {
  /* Cuando ocupa el ancho completo, los dos lados tocan el borde. */
  .lt-noticias__lamina--apertura { border-radius: 0; }
}


/* --- ESTADOS --------------------------------------------------------- */

/*
 * El hover solo con puntero fino: en tactil `:hover` se queda pegado despues
 * del toque y la banda azul del indice no se va hasta que tocas otra cosa.
 */
@media (hover: hover) and (pointer: fine) {
  .lt-noticias__apertura:hover .lt-noticias__titular,
  .lt-noticias__segunda:hover  .lt-noticias__titular-2 { color: var(--marca); }
  .lt-noticias__apertura:hover .lt-noticias__pista { border-bottom-color: currentColor; }
  .lt-noticias__breve:hover { background-color: var(--marca-claro); }
  .lt-noticias__breve:hover .lt-noticias__titular-3 { color: var(--marca); }  /* 6,8:1 */
}

/*
 * El anillo de foco va en la PIEZA y no en las dos palabras del titular:
 * base.css:884 apaga el outline de `.lt-tarjeta__enlace-total` porque ahi lo
 * pone `.lt-tarjeta`, y estas piezas no son tarjetas. Sin esto, quien navega
 * con teclado no ve donde esta.
 */
.lt-noticias__apertura:focus-within,
.lt-noticias__segunda:focus-within,
.lt-noticias__breve:focus-within {
  outline: 3px solid var(--marca);
  outline-offset: 4px;
  border-radius: var(--radio-chico);
}

/*
 * NO HACE FALTA BLOQUE DE prefers-reduced-motion. Las unicas transiciones son
 * `color`, `background-color`, `border-color` y `transform`, todas con
 * `var(--transicion)`, que tokens.css deja en 1 ms bajo esa preferencia; y el
 * zoom de la foto usa `--zoom-hover`, que pasa a 1. Nada se queda a medio
 * pintar porque no hay ni un @keyframes propio.
 */

/* ================================================================== */
/* 7 · AGENDA — filas horizontales con el día solapando la foto        */
/* ================================================================== */

.lt-agenda__lista {
  display: grid;
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-evento {
  position: relative;
  display: grid;
  gap: var(--e-3);
  background: var(--blanco);
  border-radius: var(--radio-tarjeta);
  /* Filete finísimo: sobre la banda blanca una tarjeta blanca sin él se pierde. */
  box-shadow: var(--sombra-1), 0 0 0 1px var(--hueso-honda);
  /* NO lleva overflow:hidden a propósito: el bloque de día tiene que poder
     salirse de la fotografía para solaparla. El recorte de la foto lo hace su
     propio contenedor .lt-capa. */
  overflow: visible;
}

.lt-evento__foto {
  aspect-ratio: 16 / 9;
  border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0;
}

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

.lt-evento__titulo {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  font-weight: var(--peso-titulo);
  font-optical-sizing: auto;
  letter-spacing: var(--tracking-titulo);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

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

/*
 * EL BLOQUE DE DÍA. Es el dato que se busca primero en una agenda, así que se
 * lee sin entrar en la ficha, incluso deslizando deprisa con el pulgar.
 * En móvil se apoya en la esquina de la fotografía; en escritorio se sitúa en la
 * costura entre la foto y el texto y monta sobre las dos. Ese solape es el
 * único de la portada y está medido: no es el caos de márgenes negativos
 * (-127px encadenados) que sostenía la maqueta anterior.
 */
.lt-dia {
  position: absolute;
  z-index: 2;
  top: var(--e-3);
  left: var(--e-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 66px;
  padding: 10px 12px;
  border-radius: var(--radio-chico);
  background: var(--noche);
  color: var(--blanco);
  line-height: 1.05;
  box-shadow: var(--sombra-2);
}

.lt-dia__num {
  font-family: var(--fuente-titulo);
  font-size: 1.7rem;
  font-weight: var(--peso-titulo);
  font-optical-sizing: auto;
}

/*
 * El mes va en TERRACOTA y no en ámbar (5,1:1 sobre noche, pasa AA de sobra).
 * El ámbar significa «patrocinado» en este sitio y solo eso: gastarlo aquí, en
 * un detalle decorativo que sale en los cuatro eventos, lo dejaría sin
 * significado justo donde más falta hace —el sello de lo pagado—.
 */
.lt-dia__mes {
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brasa);
}

@media (min-width: 861px) {
  .lt-evento {
    grid-template-columns: 320px 1fr;
    align-items: stretch;
    gap: var(--e-5);
  }

  .lt-evento__foto {
    aspect-ratio: auto;
    height: 100%;
    min-height: 220px;
    border-radius: var(--radio-tarjeta) 0 0 var(--radio-tarjeta);
  }

  .lt-evento__cuerpo {
    justify-content: center;
    padding: var(--e-4) var(--e-5) var(--e-4) 0;
  }

  /* El día se centra en la costura: la mitad sobre la foto, la mitad fuera. */
  .lt-dia {
    top: 50%;
    left: calc(320px - 33px);
    translate: 0 -50%;
  }

  /*
   * ALTERNANCIA DE ALINEACIÓN. Las filas pares llevan la fotografía a la
   * derecha. Cuatro filas idénticas seguidas se leen como una tabla; alternadas
   * se leen como una maqueta.
   */
  .lt-agenda__lista > li:nth-child(even) .lt-evento {
    grid-template-columns: 1fr 320px;
  }

  .lt-agenda__lista > li:nth-child(even) .lt-evento__foto {
    grid-column: 2;
    grid-row: 1;
    border-radius: 0 var(--radio-tarjeta) var(--radio-tarjeta) 0;
  }

  .lt-agenda__lista > li:nth-child(even) .lt-evento__cuerpo {
    grid-column: 1;
    grid-row: 1;
    padding: var(--e-4) 0 var(--e-4) var(--e-5);
  }

  .lt-agenda__lista > li:nth-child(even) .lt-dia {
    left: auto;
    right: calc(320px - 33px);
  }
}


/* ================================================================== */
/* 8 · MURO DE LOGOS                                                   */
/* ================================================================== */

/* Banda más baja que el resto: es una franja de prueba social, no una sección
   de contenido, y con el padding normal parecería que falta algo dentro. */
.lt-logos { padding-block: clamp(40px, 6vw, 72px); }

.lt-logos__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
}

/* El titular de esta banda es un rótulo, no un titular editorial: si compitiera
   con los H2 de las secciones de verdad rompería la jerarquía de la página. */
.lt-logos__titulo {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--fs-chico);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--apagado);
}

.lt-cinta__grupo {
  display: flex;
  align-items: center;
  gap: clamp(28px, 5vw, 56px);
  margin: 0;
  padding-inline: clamp(14px, 2.5vw, 28px);
  list-style: none;
}

.lt-cinta__casilla { flex: none; }

/*
 * EN COLOR, Y NO EN GRIS.
 *
 * Estaban en escala de grises al 58 % de opacidad, con el argumento de que
 * treinta y siete paletas distintas hacen ruido y en gris se leen como un muro.
 * El argumento vale para una cinta de «marcas que confian en nosotros», que es
 * un adorno de credibilidad.
 *
 * Estos no son eso. Son los CLIENTES: gente que paga por estar ahi. Apagarles
 * el logo es apagarles justo lo que compraron, y el dueno lo pidio sin rodeos:
 * «que los logos esten mas grandes y que no esten en blanco y negro».
 *
 * El ruido se controla por otro lado y ya estaba: la cinta va sobre hueso liso,
 * sin nada mas compitiendo, y los logos van todos a la misma altura. Eso es lo
 * que los hace leerse como un conjunto, no la falta de color.
 */
/*
 * LOS LOGOS, MAS GRANDES.
 *
 * Estaban a 34-52px de alto, que es la medida de una cinta de «marcas que
 * confian en nosotros» — un adorno de credibilidad al que nadie mira de cerca.
 * Pero estos son los CLIENTES del sitio, gente que ha pagado por estar ahi, y a
 * ese tamano varios se leian como una mancha: los que llevan el nombre dentro
 * del logo (RubyMed, Lililu Bake Shop, La Zulianita) no se distinguian.
 *
 * El dueno lo dijo mirando el sitio viejo: «la seccion de clientes estan muy
 * pequenos los logos».
 *
 * 56-88px y hasta 230 de ancho: casi el doble de superficie. La cinta sigue
 * cabiendo porque el ancho se reparte solo — es una fila que se desplaza, no una
 * rejilla que tenga que cerrar.
 */
.lt-cinta__logo {
  /* De 56-88 a 76-120: la mitad de los logos llevan el nombre escrito dentro y
     por debajo de ~70px no se leia. */
  height: clamp(76px, 9vw, 120px);
  width: auto;
  max-width: 280px;
  object-fit: contain;
  transition: transform var(--transicion);
}

/* Al pasar por encima crece un poco. Es la unica senal que queda de que la
   cinta reacciona, ahora que ya no hay color que devolver. */
.lt-cinta__logo:hover { transform: scale(1.06); }

/* Con menos de ocho logos la cinta no llena la pantalla y el bucle deja un
   hueco girando en la nada: se queda quieta, centrada y en varias líneas. */
.lt-cinta--quieta .lt-cinta__pista {
  animation: none;
  width: 100%;
  justify-content: center;
}

.lt-cinta--quieta .lt-cinta__grupo {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--e-3);
}

/*
 * BOTÓN DE PAUSA (WCAG 2.2.2). Nace oculto y solo aparece cuando <html> lleva
 * `lt-js`, que la pone tema.js: sin JavaScript el botón no podría parar nada, y
 * un control muerto es peor que no tener control.
 */
.lt-cinta__pausa { display: none; }

.lt-js .lt-cinta__pausa {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* objetivo táctil */
  padding: 8px 20px;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-pildora);
  background: transparent;
  color: var(--apagado);
  font-family: var(--fuente-texto);
  font-size: var(--fs-chico);
  font-weight: var(--peso-medio);
  cursor: pointer;
  transition: border-color var(--transicion), color var(--transicion);
}

.lt-js .lt-cinta__pausa:hover {
  border-color: var(--marca);
  color: var(--marca);
}


/* ================================================================== */
/* 9 · VIDEOS Y PODCASTS                                               */
/* ================================================================== */

.lt-episodios__lista {
  display: grid;
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) and (max-width: 999px) {
  .lt-episodios__lista { grid-template-columns: repeat(2, 1fr); }
  /* Con tres episodios, el tercero se queda solo en la última fila. */
  .lt-episodios__lista > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
  .lt-episodios__lista { grid-template-columns: repeat(3, 1fr); }

  /*
   * El del medio baja. Es un desplazamiento de maqueta, no una animación: rompe
   * la fila perfecta que hacía que esta sección se leyera como las otras dos
   * rejillas. Va en margen y no en `transform` a propósito — el transform ya lo
   * usa la aparición al hacer scroll y se pisarían.
   */
  .lt-episodios__lista > :nth-child(2) { margin-block-start: var(--e-6); }
}

.lt-episodio {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  height: 100%;
}

.lt-episodio__marco {
  aspect-ratio: 16 / 9;
  border-radius: var(--radio-tarjeta);
}

.lt-episodio__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lt-episodio__titulo {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: 1.25rem;
  font-weight: var(--peso-titulo);
  font-optical-sizing: auto;
  letter-spacing: var(--tracking-titulo);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

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

/*
 * EL BOTÓN DE REPRODUCIR es una SEÑAL, no un reproductor: en portada se enlaza
 * al episodio y el reproductor vive en su ficha. Tres iframes de YouTube en la
 * home suman megabytes y bloquean el hilo principal antes de que el visitante
 * decida siquiera ver algo —el problema más caro del sitio anterior—.
 *
 * Va en hueso y NO en ámbar: el ámbar significa «patrocinado» en este sitio y
 * gastarlo en un adorno lo dejaría sin significado.
 */
.lt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(54px, 7vw, 68px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--hueso);
  color: var(--noche);
  box-shadow: var(--sombra-2);
  transition: scale var(--transicion), background-color var(--transicion);
}

.lt-play svg {
  width: 45%;
  height: 45%;
  fill: currentColor;
  /* El triángulo se ve centrado cuando su masa lo está, no su caja. */
  margin-inline-start: 6%;
}

@media (hover: hover) and (pointer: fine) {
  .lt-episodio:hover .lt-play,
  .lt-episodio:focus-within .lt-play { scale: 1.08; }
}

.lt-episodio__duracion {
  position: absolute;
  bottom: var(--e-2);
  right: var(--e-2);
  z-index: 2;
  padding: 4px 10px;
  border-radius: var(--radio-pildora);
  /* Respaldo sólido primero: si el navegador no entiende color-mix, la píldora
     sale opaca en vez de desaparecer. */
  background: var(--noche);
  background: color-mix(in srgb, var(--noche) 82%, transparent);
  color: var(--hueso);
  font-size: 11px;
  font-weight: var(--peso-fuerte);
  letter-spacing: .04em;
}


/* ================================================================== */
/* 10 · BANDA FINAL DE CTA                                             */
/* ================================================================== */

.lt-cierre__interior {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.lt-cierre__titulo {
  margin: var(--e-2) 0 0;
  font-size: var(--fs-h2);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.lt-cierre__texto {
  margin: var(--e-3) auto 0;
  max-width: 54ch;
  color: var(--niebla);
}

.lt-cierre__botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-2);
  margin-top: var(--e-5);
}

@media (max-width: 480px) {
  /* En la pantalla más pequeña el CTA final es lo único que importa: los dos
     botones a ancho completo y apilados. */
  .lt-cierre__botones .lt-btn { width: 100%; }
}

/* ==================================================================== */
/* FONDO FOTOGRAFICO DE SECCION                                         */
/* ==================================================================== */

/*
 * Dos secciones oscuras llevan detras un fotograma del dron sobre Austin
 * (metraje propio, el mismo vuelo que el video del hero). Ver inc/imagenes.php:
 * el PHP solo aporta la URL en la propiedad --lt-foto y aqui se decide como se
 * usa.
 *
 * EL VELO NO ES OPCIONAL. Estas secciones llevan texto blanco sobre fondo
 * oscuro y el contraste esta calculado contra ese oscuro. Una fotografia con
 * cielo al atardecer mete zonas claras justo donde va el texto, asi que el velo
 * garantiza el suelo: lo que se ve de la foto es la silueta y la profundidad,
 * no la imagen.
 *
 * `background-attachment` se queda en `scroll` y NO en `fixed`: el fondo fijo
 * obliga al navegador a repintar la seccion entera en cada fotograma de scroll
 * y en un telefono modesto eso se nota como tirones. El paralaje no vale ese
 * precio.
 */

.lt-seccion--foto {
  position: relative;
  isolation: isolate;
  background-image: var(--lt-foto);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.lt-seccion--foto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Mas oscuro arriba y abajo que en el centro: los titulares y los botones
     caen en los extremos, y el centro es donde la foto puede respirar. */
  background:
    linear-gradient(to bottom,
      rgba(11, 13, 16, .93) 0%,
      rgba(11, 13, 16, .78) 45%,
      rgba(11, 13, 16, .93) 100%);
}

/* Sin la variable no hay foto: la seccion se queda con su fondo solido y el
   pseudoelemento no pinta nada encima de nada. */
.lt-seccion--foto:not([style*='--lt-foto'])::before { display: none; }

/* ==================================================================== */
/* BANDA DE PUBLICIDAD                                                  */
/* ==================================================================== */

/*
 * Cuatro creatividades verticales de anunciantes reales. Ver inc/imagenes.php.
 *
 * SE ANUNCIA COMO PUBLICIDAD Y SE VE COMO PUBLICIDAD: rotulo pequeno en
 * mayusculas arriba, tarjetas separadas del contenido editorial. En un
 * directorio comunitario la confianza es el producto, y un anuncio disfrazado
 * de contenido la gasta entera.
 */

.lt-publi__rotulo {
  margin: 0 0 var(--e-3);
  color: var(--apagado, #6B7280);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/*
 * REJILLA DE CUATRO, Y EN MOVIL UNA TIRA QUE SE ARRASTRA.
 *
 * Las creatividades son verticales (2:3). Cuatro en fila caben en escritorio;
 * en un telefono, cuatro columnas dejarian cada anuncio en 80px de ancho, donde
 * no se lee ni el telefono impreso. Se convierte en una tira horizontal con
 * anclaje, que es como se navega cualquier carrusel en movil.
 */
.lt-publi__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Arriba, no estiradas: las creatividades no miden todas exactamente igual y
     estirarlas para igualarlas las deformaria. */
  align-items: start;
  gap: var(--e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-publi__casilla { min-width: 0; }

.lt-publi__imagen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radio-pieza, 14px);
  border: 1px solid var(--linea);
  /*
   * NI `aspect-ratio` NI `object-fit: cover`. Se probo forzar 2:3 «para que la
   * fila quedara pareja» y el resultado fue recortar los anuncios: se perdian
   * el titular y el telefono del anunciante.
   *
   * Un anuncio se ve ENTERO o no se ve. Que una creatividad sea un pixel mas
   * alta que la de al lado es un problema de maquetacion; cortarle el telefono
   * a quien ha pagado es otra cosa. La fila se empareja por arriba con
   * `align-items: start` y ya esta.
   */
}

.lt-publi__pie {
  margin: var(--e-3) 0 0;
  color: var(--apagado, #6B7280);
  font-size: var(--fs-chico);
}

.lt-publi__pie a { color: var(--marca); }

@media (max-width: 900px) {
  .lt-publi__lista {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* El canal negativo saca la tira hasta los bordes de la pantalla: un
       carrusel que empieza y acaba dentro del margen parece cortado. */
    margin-inline: calc(var(--canal) * -1);
    padding-inline: var(--canal);
    scrollbar-width: none;
  }
  .lt-publi__lista::-webkit-scrollbar { display: none; }
  .lt-publi__casilla { scroll-snap-align: start; }
}

@media (max-width: 520px) {
  .lt-publi__lista { grid-auto-columns: 78%; }
}

/* ==================================================================== */
/* LA CABECERA DE SECCION SE COMPONE                                    */
/* ==================================================================== */

/*
 * Seis secciones de la portada comparten la misma funcion de cabecera
 * (lt_portada_cabeza en front-page.php), asi que este bloque sale SEIS veces al
 * bajar la pagina. Es la firma editorial del sitio.
 *
 * QUE PASA, EN ORDEN:
 *   1. el filete de 28px de la etiqueta se traza de izquierda a derecha
 *   2. el titular sube desde detras de su corte, como una plancha de imprenta
 *   3. la bajada llega medio paso despues
 *   4. y el «Ver todas» cierra
 *
 * CERO JAVASCRIPT. Todo cuelga de la clase `.lt-visible` que el observador ya
 * pone en el bloque; los tiempos son `transition-delay` en los hijos.
 *
 * POR QUE LOS RETARDOS VAN EN LOS HIJOS Y NUNCA EN EL PROPIO BLOQUE: el
 * elemento que lleva `data-lt-aparece` recibe del JS las clases de retardo del
 * escalonado global. Si esta pieza escribiera ahi su propio retardo, las dos
 * reglas competirian por la misma propiedad y ganaria una al azar segun la
 * cascada. Poniendolo un nivel mas abajo, los dos ritmos conviven.
 */

/*
 * EL BLOQUE NO SE DESVANECE: solo se componen sus partes.
 *
 * Por defecto todo lo que lleva `data-lt-aparece` entra con un fundido y un
 * desplazamiento. Aqui se anula a proposito: si el bloque entero apareciera Y
 * ademas sus partes se compusieran, serian dos animaciones sobre lo mismo y el
 * gesto se emborrona. Lo que tiene que verse es la composicion.
 */
.lt-anima [data-lt-aparece].lt-compone {
  opacity: 1;
  transform: none;
}

/* --- 1 · el filete se traza ---------------------------------------- */

.lt-anima .lt-compone .lt-etiqueta--filete::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms cubic-bezier(.22, .61, .36, 1);
}

.lt-anima .lt-compone.lt-visible .lt-etiqueta--filete::before {
  transform: scaleX(1);
}

/* El texto de la etiqueta entra con el filete, un pelo despues. */
.lt-anima .lt-compone .lt-etiqueta--filete {
  opacity: 0;
  transition: opacity 520ms ease 120ms;
}

.lt-anima .lt-compone.lt-visible .lt-etiqueta--filete { opacity: 1; }

/* --- 2 · el titular sube desde su corte ----------------------------- */

/*
 * `.lt-alza` recorta y `.lt-alza__i` se desplaza. Hacen falta los dos: con uno
 * solo, o no hay nada que recorte el texto desplazado, o el recorte se aplica
 * al mismo elemento que se mueve y el navegador lo mueve con el.
 *
 * `display: block` en los dos: son <span> y en linea el `overflow` no recorta.
 *
 * El relleno inferior y el margen negativo que lo compensa NO son un apano:
 * las letras con rasgo descendente —la «g» de «negocios», la «y», la «j»— caen
 * por debajo de la linea base, y un `overflow: hidden` ajustado al renglon se
 * las corta por abajo incluso cuando la animacion ha terminado.
 */
.lt-alza {
  display: block;
  overflow: hidden;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}

.lt-alza__i {
  display: block;
  will-change: transform;
}

.lt-anima .lt-compone .lt-alza__i {
  transform: translateY(105%);
  transition: transform 760ms cubic-bezier(.22, .61, .36, 1) 90ms;
}

.lt-anima .lt-compone.lt-visible .lt-alza__i { transform: none; }

/*
 * `will-change` AQUI SI, y es la excepcion que confirma la regla de la pieza 1.
 * Alli se retiro porque estaba puesto sobre veinte o cuarenta bloques a la vez;
 * aqui son SEIS titulares en toda la pagina, la animacion es de recorrido largo
 * y el elemento es pequeno. Reservar seis capas es barato; reservar cuarenta,
 * no. La diferencia no es la propiedad, es cuantas veces se aplica.
 */

/* --- 3 y 4 · la bajada y el enlace ---------------------------------- */

.lt-anima .lt-compone .lt-bajada,
.lt-anima .lt-compone .lt-mas {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(.22, .61, .36, 1);
}

.lt-anima .lt-compone .lt-bajada { transition-delay: 260ms; }
.lt-anima .lt-compone .lt-mas    { transition-delay: 340ms; }

.lt-anima .lt-compone.lt-visible .lt-bajada,
.lt-anima .lt-compone.lt-visible .lt-mas {
  opacity: 1;
  transform: none;
}

/*
 * EN REPOSO SE VE TODO, QUIETO.
 *
 * No basta con quitar las transiciones: hay que devolver los estados finales a
 * mano. Sin esto, el titular se quedaria desplazado un 105 % fuera de su corte
 * —o sea, invisible— para siempre, que es justo el fallo que la consulta de
 * movimiento reducido existe para evitar.
 */
@media (prefers-reduced-motion: reduce) {
  .lt-anima .lt-compone .lt-etiqueta--filete,
  .lt-anima .lt-compone .lt-bajada,
  .lt-anima .lt-compone .lt-mas,
  .lt-anima .lt-compone .lt-alza__i,
  .lt-anima .lt-compone .lt-etiqueta--filete::before {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .lt-alza__i { will-change: auto; }
}

/* ==================================================================== */
/* EL CARRIL — la tira de negocios bajo el hero                         */
/* ==================================================================== */

/*
 * Ver inc/carril.php. Hereda de `.lt-cinta` (utilidades.css) la animacion, el
 * recorte de los bordes y la pausa por hover y por foco; aqui solo se define
 * como se ven las fichas y cuanto sitio ocupa la tira.
 *
 * FONDO OSCURO A PROPOSITO. El hero termina en negro y la seccion siguiente es
 * hueso: el carril hace de bisagra entre los dos. Si fuera claro, el corte con
 * el hero seria una linea dura justo donde el ojo aterriza al bajar.
 */

/*
 * EL ANTICIPO VA SOBRE NOCHE, CON FICHAS BLANCAS — decision del dueno
 * (2026-08-07).
 *
 * La historia completa, porque este bloque ya dio dos vueltas: primero fue
 * noche con fichas de velo blanco (invisibles), luego hueso con fichas negras
 * para romper el tunel de tres bloques oscuros seguidos. El dueno vio esa
 * version y pidio exactamente lo contrario: «toda esa seccion azul oscuro y
 * las tarjeticas blancas, para que conecte con la de abajo».
 *
 * Y funciona por una razon que la version de hueso no tenia: las fichas
 * BLANCAS son ahora el unico elemento claro dentro de la pieza oscura de
 * entrada (hero → carril → vitrina), asi que el ojo cae directo en los
 * negocios. El tunel deja de ser un problema cuando lo que flota dentro
 * brilla.
 */
.lt-carril {
  position: relative;
  padding-block: var(--e-5) var(--e-4);
  /* La tira llega a los bordes de la ventana; recortar aqui evita que su
     contenido empuje la pagina a lo ancho. */
  overflow: hidden;
}

.lt-carril__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  margin-bottom: var(--e-3);
}

/* Sobre noche, la cabecera es blanca — el titulo y el boton de pausa ya estan
   dibujados para fondo oscuro. */
.lt-carril__cabeza { color: var(--blanco, #FFF); }

.lt-carril__titulo {
  margin: 0;
  color: rgba(255, 255, 255, .62);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* --- Las fichas ------------------------------------------------------ */

.lt-carril__pista {
  gap: 0;
  /* Mas lenta que la cinta de logos: aqui hay NOMBRES que leer de pasada, y a
     la velocidad de la otra las palabras no dan tiempo. */
  animation-duration: 72s;
}

.lt-carril__grupo {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-carril__casilla { flex: none; }

/*
 * LA FICHA. Ancho fijo y NO porcentual: en una tira que se desplaza en bucle,
 * un ancho relativo cambia con el tamano de la ventana y descuadra el -50 % del
 * que depende la costura invisible.
 */
/*
 * LA FICHA ES MAS ELABORADA — mejora pedida por el dueno (2026-08-08).
 *
 * Pasa de una fila (icono + nombre) a una tarjeta con pie: arriba quien es y a
 * que se dedica, abajo la ciudad y si tiene telefono y WhatsApp. Lo que se anade
 * no es adorno, es el dato que hace util un directorio — que se puede llamar.
 */
.lt-carril__ficha {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  width: 300px;
  height: 100%;
  margin-right: 14px;
  padding: 16px 18px 13px;
  /*
   * LA FICHA ES BLANCA SOBRE NOCHE — decision del dueno (2026-08-07).
   *
   * Tercera vuelta de esta pieza: velo blanco sobre negro (invisible), negro
   * sobre hueso, y ahora blanco sobre noche, que es lo que el dueno pidio al
   * ver la anterior. Con la seccion oscura, la ficha blanca es lo unico claro
   * en pantalla y el nombre del negocio se lee al primer golpe de vista.
   */
  border: 1px solid var(--marca-borde, #C3D3E8);
  border-radius: var(--radio-pieza, 14px);
  background: var(--blanco, #FFF);
  color: var(--tinta, #0B1220);
  text-decoration: none;
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}

/*
 * ANULA LA REGLA DE ENLACES SOBRE NOCHE.
 *
 * base.css pinta de cielo todo enlace dentro de una seccion noche —correcto
 * cuando el enlace esta directamente SOBRE el fondo oscuro— pero esta ficha es
 * un enlace que ES una tarjeta blanca: cielo sobre blanco da 2.6:1, ilegible.
 * El selector copia la anatomia del de base.css (tres clases y el elemento)
 * para empatar en especificidad; esta hoja carga despues y gana el empate.
 */
.lt-seccion--noche a.lt-carril__ficha:not(.lt-btn),
.lt-seccion--noche a.lt-carril__ficha:not(.lt-btn):hover {
  color: var(--tinta, #0B1220);
}

/*
 * El hover NO oscurece el fondo: una ficha blanca que se vuelve gris al tocarla
 * parece deshabilitada, que es el mensaje contrario. Sube, y el borde toma el
 * azul de marca.
 */
.lt-carril__ficha:hover,
.lt-carril__ficha:focus-visible {
  border-color: var(--marca, #295091);
  box-shadow: 0 10px 26px rgba(2, 8, 20, .35);
  transform: translateY(-3px);
}

.lt-carril__ficha:focus-visible {
  outline: 2px solid var(--cielo, #4DA3FF);
  outline-offset: 3px;
}

/*
 * LA INICIAL HACE DE FOTOGRAFIA.
 *
 * Ningun negocio tiene imagen —tampoco la tenia en el sitio anterior— asi que
 * la letra ocupa su sitio: es el mismo recurso que usan las tarjetas del
 * directorio y da continuidad. En una tira en movimiento funciona mejor que una
 * foto: se lee de un vistazo y no hay dieciocho imagenes que descargar para
 * algo que pasa de largo.
 */
/*
 * EL PICTOGRAMA DE LA CATEGORIA.
 *
 * Sustituye a la inicial del nombre, que era una letra grande en un circulo.
 * Dieciocho letras sueltas en una tira no dicen nada y varias se repiten; un
 * icono dice a que se dedica cada negocio antes de leer una palabra.
 *
 * Mismo circulo y mismo tamano que tenia la letra: la pieza no cambia de forma,
 * solo de contenido.
 */
.lt-carril__simbolo {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  /* Sobre la ficha blanca, el circulo lleva la superficie tintada de la marca y
     el pictograma el azul de marca — cielo sobre blanco no se ve. */
  background: var(--marca-claro, #E8EEF7);
  color: var(--marca, #295091);
}

.lt-carril__simbolo svg {
  width: 22px;
  height: 22px;
  /* El pictograma se dibuja en absoluto dentro de la tarjeta del directorio,
     blanco al 13 % como marca de agua; en la tira es un icono normal y hay que
     devolverle el flujo Y el color — su regla base (`color: #FFF`) le gana a
     la herencia del circulo porque aplica al propio svg. */
  position: static;
  opacity: 1;
  margin: 0;
  color: inherit;
}

/* La fila de arriba: icono, nombre y categoria, mas la estrella si la lleva. */
.lt-carril__alto {
  display: flex;
  align-items: center;
  gap: 13px;
}

/* La estrella de «Destacado». Es un dato real: el negocio paga por estarlo. */
.lt-carril__estrella {
  flex: none;
  margin-left: auto;
  align-self: flex-start;
  color: var(--marca, #295091);
  line-height: 0;
}

/*
 * EL PIE: ciudad a la izquierda, contacto y flecha a la derecha.
 *
 * Separado por un filete para que se lea como una zona distinta —quien es el
 * negocio arriba, como llegar a el abajo— en vez de como cuatro datos sueltos.
 */
.lt-carril__pie {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--linea, #E4DED4);
  font-size: 12px;
  color: var(--apagado, #5A5A5A);
}

.lt-carril__contacto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  /*
   * VAN EN EL AZUL DE MARCA y no en gris: son la promesa de la seccion —que a
   * estos negocios se les puede escribir— y en gris se leerian como decoracion.
   */
  color: var(--marca, #295091);
}

/*
 * LA FLECHA APARECE AL ACERCARSE.
 *
 * Quieta seria una decimoctava flecha repetida en una tira en movimiento. Al
 * pasar por encima dice «esto se abre» justo cuando hace falta.
 *
 * `@media (hover: hover)` obligatorio: en tactil el navegador EMULA el hover al
 * tocar y la flecha se quedaria encendida en la ficha tocada.
 */
.lt-carril__flecha {
  flex: none;
  color: var(--marca, #295091);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transicion), transform var(--transicion);
  line-height: 0;
}

@media (hover: hover) {
  .lt-carril__ficha:hover .lt-carril__flecha,
  .lt-carril__ficha:focus-visible .lt-carril__flecha {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Sin hover fino —telefono— la flecha se queda visible y tenue: la pista se da
   igual, sin depender de un gesto que ahi no existe. */
@media (hover: none) {
  .lt-carril__flecha { opacity: .45; transform: none; }
}

.lt-carril__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/*
 * Los tres textos se recortan con puntos suspensivos. Un nombre largo —«Yuniel
 * Peraza: Yosami Gonzalez»— partiria la ficha en dos lineas y romperia la
 * altura de toda la tira, que es lo unico que no puede variar en un bucle.
 */
.lt-carril__nombre,
.lt-carril__cat {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La ciudad es flex: el recorte va en su texto, no en la caja. */
.lt-carril__ciudad { white-space: nowrap; overflow: hidden; }

.lt-carril__nombre {
  font-weight: var(--peso-fuerte, 700);
  font-size: 16px;
  line-height: 1.25;
}

/*
 * EL AZUL DE MARCA, NO EL CIELO. Es texto de 12px sobre blanco: el cielo
 * (#4EA8DE) da 2.6:1 de contraste y la WCAG pide 4.5. El azul de marca
 * (#295091) da 7.4:1 — mismo papel, legible.
 */
.lt-carril__cat {
  color: var(--marca, #295091);
  font-size: 12px;
  line-height: 1.2;
}

.lt-carril__ciudad {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--apagado, #5A5A5A);
  font-size: 12px;
  line-height: 1.2;
}

.lt-carril__ciudad svg { flex: none; }

/* --- El boton de pausa ---------------------------------------------- */

.lt-carril__pausa {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: transparent;
  color: #FFF;
  cursor: pointer;
  transition: background-color var(--transicion);
}

.lt-carril__pausa:hover { background: rgba(255, 255, 255, .14); }

.lt-carril__pausa:focus-visible {
  outline: 2px solid var(--cielo, #4DA3FF);
  outline-offset: 2px;
}

/* Area pulsable de 44px sin engordar el boton dibujado. */
.lt-carril__pausa { position: relative; }
.lt-carril__pausa::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.lt-carril__icono-pausa,
.lt-carril__icono-play {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.lt-carril__icono-play { display: none; }
.lt-carril__pausa[aria-pressed='true'] .lt-carril__icono-pausa { display: none; }
.lt-carril__pausa[aria-pressed='true'] .lt-carril__icono-play { display: block; }

/* --- El enlace al directorio ---------------------------------------- */

.lt-carril__todos {
  display: inline-block;
  margin-top: var(--e-3);
  color: var(--cielo, #4DA3FF);
  font-size: var(--fs-chico);
  font-weight: var(--peso-medio, 600);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.lt-carril__todos:hover { color: #FFF; }

/*
 * SIN MOVIMIENTO SI EL SISTEMA LO PIDE.
 *
 * No basta con parar la animacion: la pista mide varias pantallas de ancho, asi
 * que quieta dejaria fuera de alcance todo lo que no cabe. Se convierte en una
 * tira que se arrastra con el dedo, y la copia del bucle se esconde para no
 * repetir el catalogo.
 */
@media (prefers-reduced-motion: reduce) {
  .lt-carril__pista {
    animation: none;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .lt-carril__pista::-webkit-scrollbar { display: none; }
  .lt-carril__grupo[aria-hidden='true'] { display: none; }
  .lt-carril__pausa { display: none; }
  .lt-carril__ficha { transition: none; }
  .lt-carril__ficha:hover { transform: none; }
}

@media (max-width: 640px) {
  .lt-carril { padding-block: var(--e-4) var(--e-3); }
  .lt-carril__ficha { width: 262px; }
}

/* ==================================================================== */
/* MOVIMIENTO LIGADO AL RECORRIDO                                       */
/* ==================================================================== */

/*
 * LA FOTO DERIVA DENTRO DE SU MARCO.
 *
 * Las diecisiete noticias son el unico contenido del sitio CON fotografia, asi
 * que es donde este gesto tiene material. La imagen se amplia un 12 % y se
 * desplaza muy despacio dentro de su recorte mientras la tarjeta cruza la
 * pantalla: la foto respira en vez de estar pegada. Es el recurso mas viejo del
 * diseno editorial digital y sigue funcionando porque no se nota.
 *
 * `view()` ata la animacion al recorrido del PROPIO elemento por la ventana,
 * sin escuchar scroll ni una vez. `cover` hace que el rango vaya desde que
 * asoma por abajo hasta que sale por arriba.
 *
 * EL 12 % DE ESCALA NO ES DECORATIVO: sin el, al desplazar la imagen se veria
 * el borde del marco por un lado. Es lo que paga el recorrido.
 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /*
     * SOLO LA FOTO GRANDE, Y ESO EVITA UNA COLISION.
     *
     * El selector de la primera version apuntaba a `.lt-tarjeta__media img`, que
     * en la seccion de noticias NO EXISTE: ahi el marcado es otro
     * (`.lt-capa__foto` dentro de `.lt-capa`) y la regla no llegaba a aplicarse
     * a nada. Se descubrio midiendo, no leyendo: la comprobacion decia «no hay
     * fotos de noticias» mientras las diecisiete entradas si tenian imagen.
     *
     * Y va SOLO en la pieza mayor. Las tarjetas de noticias llevan ya la
     * utilidad `.lt-zoom`, que amplia la foto al pasar el raton usando
     * `transform`. Una animacion CSS gana siempre a una transicion sobre la
     * misma propiedad, asi que aplicar la deriva a todas habria matado ese zoom
     * en las cinco pequenas sin dar ninguna senal.
     *
     * Limitandola a la foto grande —que es la que ocupa media seccion y donde el
     * gesto se lee— se conserva el zoom donde ya funcionaba y no hay dos
     * efectos peleando por la misma propiedad en ningun elemento.
     */
    .lt-noticias__mayor .lt-capa__foto {
      animation: lt-deriva linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    @keyframes lt-deriva {
      from { transform: scale(1.12) translateY(-2.6%); }
      to   { transform: scale(1.12) translateY(2.6%); }
    }

    /* La foto grande ya no necesita el zoom del hover: la deriva ocupa su sitio
       y las dos se disputarian el mismo `transform`. Se apaga aqui para que no
       quede una transicion declarada que nunca se llega a ver. */
    .lt-noticias__mayor.lt-zoom:hover .lt-capa__foto,
    .lt-noticias__mayor.lt-zoom:focus-within .lt-capa__foto {
      transform: scale(1.12) translateY(0);
    }
  }
}

/*
 * EL HILO DE LECTURA DE LA PORTADA.
 *
 * Una linea finisima de dos pixeles bajo la cabecera que se llena segun cuanto
 * queda por leer. En una portada larga —nueve secciones— es la unica pista de
 * «cuanto falta» que tiene el visitante, y en una cabecera fija no estorba a
 * nada porque vive en su propio borde.
 *
 * `scroll()` mide el documento entero, no un elemento. Se pinta con
 * `transform: scaleX` y no con `width` porque el ancho provoca relayout en cada
 * fotograma y esto se actualiza continuamente durante todo el scroll: es la
 * diferencia entre gratis y caro.
 */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {

    .lt-cabecera::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      transform-origin: left center;
      background: linear-gradient(90deg, var(--marca, #295091), var(--cielo, #4DA3FF));
      animation: lt-hilo linear both;
      animation-timeline: scroll(root block);
    }

    @keyframes lt-hilo {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }
  }
}

/* ==================================================================== */
/* MICROINTERACCION DE LAS TARJETAS                                     */
/* ==================================================================== */

/*
 * SOLO CON PUNTERO FINO.
 *
 * En una pantalla tactil el «hover» se queda pegado despues de tocar: la
 * tarjeta se queda levantada hasta que el visitante toca otra cosa, y eso se
 * lee como que la pagina se ha colgado. La consulta de puntero lo evita, y es
 * la misma que ya usa `.lt-eleva` en utilidades.css.
 *
 * SE ANIMA `transform` Y NADA MAS. Un `box-shadow` animado obliga al navegador
 * a repintar la sombra entera en cada fotograma; con cuarenta y cinco tarjetas
 * en el archivo de negocios eso se nota. La sombra cambia de golpe y el
 * movimiento lo hace el desplazamiento.
 */
@media (hover: hover) and (pointer: fine) {

  .lt-tarjeta {
    transition: transform 320ms cubic-bezier(.22, .61, .36, 1);
  }

  .lt-tarjeta:hover,
  .lt-tarjeta:focus-within {
    transform: translateY(-4px);
  }

  /*
   * LA INICIAL DE LAS FICHAS SIN FOTO SE INCLINA UN GRADO Y MEDIO.
   *
   * Setenta y siete de las noventa y cuatro fichas del sitio no tienen
   * fotografia y nunca la tuvieron: la inicial grande ES su imagen. Darle vida
   * propia al pasar por encima es lo que evita que esas fichas se lean como
   * «la foto no ha cargado».
   *
   * Grado y medio y no mas: pasado ese punto deja de parecer un sello impreso y
   * empieza a parecer un error de maquetacion.
   */
  .lt-tarjeta__media--vacia .lt-tarjeta__inicial {
    transition: transform 420ms cubic-bezier(.22, .61, .36, 1);
  }

  .lt-tarjeta:hover .lt-tarjeta__media--vacia .lt-tarjeta__inicial {
    transform: rotate(-1.5deg) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lt-tarjeta,
  .lt-tarjeta__media--vacia .lt-tarjeta__inicial {
    transition: none;
  }
  .lt-tarjeta:hover,
  .lt-tarjeta:focus-within,
  .lt-tarjeta:hover .lt-tarjeta__media--vacia .lt-tarjeta__inicial {
    transform: none;
  }
}

/* ==================================================================== */
/* BANDA DE CIFRAS                                                      */
/* ==================================================================== */

/*
 * Ver inc/cifras.php. Cuatro numeros grandes que dicen cuanto hay dentro del
 * sitio, contados de la base de datos en cada carga.
 *
 * REUTILIZA `.lt-compone` Y `.lt-alza`, las clases de las cabeceras de seccion.
 * No es ahorro de codigo: es que la pagina entera se mueva con la MISMA
 * gramatica. Un numero que entra distinto a como entran los titulares se lee
 * como una pieza pegada de otro sitio.
 */

/*
 * LA BANDA SE APRIETA.
 *
 * Era una franja oscura a todo el alto de seccion con cuatro numeros flotando
 * en medio y aire por todas partes. El dueno la vio y dijo lo justo: «esto se ve
 * muy insipido».
 *
 * Y no era el contenido —los numeros estan bien y son de verdad— era el
 * ENCUADRE: una seccion con el relleno vertical estandar (120px arriba y abajo)
 * para cuatro lineas de texto deja mas fondo que contenido, y un rectangulo
 * negro medio vacio no se lee como un dato, se lee como algo que no cargo.
 *
 * Se recorta el relleno a la mitad y se le pone un filete de separacion a cada
 * cifra. Mismo contenido, cuatro veces mas denso.
 */
.lt-cifras {
  padding-block: clamp(48px, 7vw, 76px);
}

.lt-cifras__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Un filete vertical antes de cada cifra menos la primera.
 *
 * Es lo que convierte cuatro numeros sueltos en una tabla: sin el, la mirada no
 * sabe donde acaba uno y empieza otro, y con `gap` solo no basta porque el
 * hueco entre «45» y «negocios latinos» es el mismo que entre columnas.
 *
 * `:first-child` fuera: un filete a la izquierda del primero seria un borde
 * suelto contra el margen.
 */
.lt-cifras__casilla + .lt-cifras__casilla {
  padding-left: var(--e-4);
  border-left: 1px solid rgba(255, 255, 255, .14);
}

/* --- El icono y el pie de cada cifra ------------------------------- */

.lt-cifras__icono {
  display: block;
  margin-bottom: 10px;
  color: var(--cielo, #4EA8DE);
  opacity: .85;
}

/*
 * El pie es la linea que convierte el dato en invitacion. Va mas apagado que el
 * rotulo a proposito: la jerarquia es numero, luego que es, luego para que
 * sirve. Si los tres pesaran igual, la cifra dejaria de ser lo primero que se
 * lee, que es lo unico que esta banda tiene que conseguir.
 */
.lt-cifras__pie {
  display: block;
  margin-top: 6px;
  max-width: 22ch;
  color: rgba(255, 255, 255, .52);
  font-size: .8rem;
  line-height: 1.4;
}

.lt-cifras__enlace:hover .lt-cifras__icono { opacity: 1; }
.lt-cifras__enlace:hover .lt-cifras__pie { color: rgba(255, 255, 255, .72); }

@media (max-width: 900px) {
  /* En dos columnas, el filete solo va en la segunda de cada fila. */
  .lt-cifras__casilla + .lt-cifras__casilla { padding-left: 0; border-left: 0; }
  .lt-cifras__casilla:nth-child(even) {
    padding-left: var(--e-3);
    border-left: 1px solid rgba(255, 255, 255, .14);
  }
}

.lt-cifras__casilla { min-width: 0; }

.lt-cifras__enlace {
  display: block;
  color: inherit;
  text-decoration: none;
}

.lt-cifras__numero {
  display: block;
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo, 700);
  /* El eje de ancho de Archivo: condensado para que un numero de tres cifras no
     se coma la columna. Es lo que la fuente variable permite y una estatica no. */
  font-stretch: 88%;
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--blanco, #FFF);
}

.lt-cifras__rotulo {
  display: block;
  margin-top: 6px;
  color: var(--cielo, #4DA3FF);
  font-size: var(--fs-chico);
  font-weight: var(--peso-medio, 600);
  line-height: 1.25;
}

.lt-cifras__enlace:hover .lt-cifras__rotulo { color: #FFF; }

.lt-cifras__enlace:focus-visible {
  outline: 2px solid var(--cielo, #4DA3FF);
  outline-offset: 6px;
  border-radius: 4px;
}

/*
 * EL TURNO DE CADA CIFRA.
 *
 * Entran una detras de otra, de izquierda a derecha, 90 ms de diferencia. El
 * indice lo escribe el PHP en `--lt-turno` y aqui se multiplica: asi el retardo
 * sale de la posicion real y no de un `nth-child` escrito a mano que habria que
 * ampliar el dia que haya una quinta cifra.
 *
 * El retardo va en `.lt-alza__i` —el elemento que se mueve— y NO en la casilla:
 * la regla de la pieza 2 dice que ningun retardo nuevo se escribe sobre el
 * elemento que lleva `data-lt-aparece`, porque ahi lo reparte el JS.
 */
.lt-anima .lt-cifras__lista .lt-alza__i {
  transition-delay: calc(90ms * var(--lt-turno, 0) + 60ms);
}

@media (max-width: 900px) {
  .lt-cifras__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
}

@media (max-width: 420px) {
  .lt-cifras__numero { font-size: clamp(2.2rem, 12vw, 3rem); }
}

/* ==================================================================== */
/* LA CABECERA DE LA AGENDA SE QUEDA                                    */
/* ==================================================================== */

/*
 * Mientras las filas de eventos pasan, su cabecera se queda pegada arriba. Es
 * el gesto editorial de una seccion de calendario: el rotulo acompana a la
 * lectura en vez de perderse por arriba a la primera fila.
 *
 * SOLO EN PANTALLAS ALTAS Y ANCHAS. En un telefono la cabecera fija se come una
 * quinta parte del alto util durante toda la seccion, y la agenda tiene cuatro
 * filas: se pierde mas de lo que se gana.
 *
 * El `top` descuenta la cabecera del sitio, que ya es fija: sin eso el rotulo se
 * quedaria pegado DEBAJO del menu y se veria a medias.
 *
 * `align-self: start` es imprescindible y no es evidente: en una rejilla los
 * elementos se estiran a la altura de la fila por defecto, y un elemento
 * estirado no puede pegarse — `position: sticky` no tiene margen donde moverse.
 */
/*
 * SE RETIRO. NO FUNCIONABA Y ROMPIA LA SECCION.
 *
 * La idea era buena —el rotulo acompanando a la lectura, como en una agenda de
 * papel— y estaba mal ejecutada: la cabecera se quedaba clavada arriba SIN
 * FONDO y con `z-index: 2`, asi que las tarjetas de eventos pasaban por DEBAJO
 * y los dos textos se superponian. En la captura del dueno se lee «COMING UP IN
 * YOUR CITY» encima del nombre del primer evento, ilegibles los dos.
 *
 * El comentario original decia que `align-self: start` era imprescindible
 * «porque en una rejilla los elementos se estiran». Ahi estaba el error de
 * partida: esta seccion NO es una rejilla, es una columna. En una columna, un
 * elemento pegajoso sin fondo solo puede acabar encima de lo que viene detras.
 *
 * Se podria arreglar dandole fondo opaco, pero entonces taparia las tarjetas al
 * pasar, que es peor: en una lista de cuatro eventos, uno estaria oculto la
 * mitad del recorrido. La cabecera se queda quieta, que es lo que hace el resto
 * de secciones del sitio.
 */

/* ==================================================================== */
/* CARRUSEL DE TARJETAS SIN FOTOGRAFIA                                  */
/* ==================================================================== */

/*
 * POR QUE SE CAMBIO EL FORMATO ENTERO.
 *
 * Las secciones de negocios y de ayudas eran rejillas asimetricas: una pieza
 * grande con foto a sangre y varias pequenas alrededor. Ese formato depende de
 * la fotografia — es lo que da la escala y el ritmo.
 *
 * Ninguno de los 45 negocios tiene foto, y ninguno la tuvo nunca: la pagina del
 * directorio anterior no referencia ni una imagen. Se probo rellenar el hueco
 * con un respaldo grafico (se leyo como una tarjeta rota) y con fotografia de
 * categoria (se leyo como la foto DEL NEGOCIO, que ademas es falso). El dueno
 * corto por lo sano: «si no hay fotos, hagamos un slider de tarjetas de manera
 * que no necesiten imagenes».
 *
 * Tiene razon de diseno, no solo de datos: un formato que exige una pieza que
 * no existe se ve incompleto por definicion, y ninguna decoracion lo arregla.
 *
 * QUE HACE EL CARRUSEL BIEN AQUI:
 *   · Todas las tarjetas miden lo mismo, asi que no hay una pieza «principal»
 *     que reclame una foto que no hay.
 *   · Se ve que hay MAS a la derecha, que es justo lo que un directorio quiere
 *     decir: esto no son seis negocios, son seis de muchos.
 *   · Es el mismo gesto que ya usa el carril de bajo el hero y las pastillas en
 *     movil. No es un patron nuevo en el sitio.
 *
 * SE DESPLAZA A MANO, NO SOLO. El carril del hero se mueve solo porque es
 * decorativo; esto es contenido que se lee y se pulsa. Un carrusel que avanza
 * mientras alguien lee un telefono es hostil.
 */

.lt-negocios__rejilla,
.lt-ayudas__rejilla {
  display: grid;
  grid-auto-flow: column;
  /* 300px minimo para que quepan el nombre y dos botones sin apretarse; 34% en
     pantallas grandes para que se vean tres y el borde de la cuarta. */
  grid-auto-columns: minmax(300px, 34%);
  grid-template-columns: none;
  gap: var(--e-3, 20px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* El desplazamiento llega al borde de la pantalla —se ve que hay mas— pero la
     primera tarjeta respeta el margen del contenedor. */
  margin-inline: calc(var(--canal) * -1);
  padding-inline: var(--canal);
  padding-bottom: 6px;
  scrollbar-width: none;
}

.lt-negocios__rejilla::-webkit-scrollbar,
.lt-ayudas__rejilla::-webkit-scrollbar { display: none; }

.lt-negocios__rejilla > *,
.lt-ayudas__rejilla > * {
  scroll-snap-align: start;
  /* Alturas iguales: en una fila horizontal, una tarjeta mas corta que su
     vecina se lee como un fallo de maquetado. */
  height: 100%;
}

@media (min-width: 1025px) {
  .lt-negocios__rejilla,
  .lt-ayudas__rejilla { grid-auto-columns: minmax(300px, 31%); }
}

@media (max-width: 700px) {
  .lt-negocios__rejilla,
  .lt-ayudas__rejilla { grid-auto-columns: 86%; }
}

/*
 * SE ANULAN LAS REGLAS DE LA REJILLA ASIMETRICA.
 *
 * Quedaban arriba en este mismo archivo y daban a la primera pieza el doble de
 * alto y un titular mayor. En una fila de iguales, eso descuadra la primera
 * tarjeta y nada mas. Se anulan aqui en vez de borrarlas por si el dia que
 * haya fotografias reales se quiere volver: el camino sigue escrito.
 */
.lt-ayudas__rejilla > :first-child,
.lt-negocios__rejilla > :first-child {
  grid-row: auto;
  grid-column: auto;
}

/*
 * Y TAMBIEN EL TITULAR. Se anulo la posicion en la rejilla y se olvido el
 * tamano de letra: la primera tarjeta se quedo con el titular de «pieza
 * principal» y en una fila de iguales se leia como un error de maquetado.
 * Medido: 2,4rem contra 1,4rem de sus vecinas.
 */
.lt-ayudas__rejilla > :first-child .lt-tarjeta__titulo,
.lt-negocios__rejilla > :first-child .lt-tarjeta__titulo {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.15;
}

.lt-ayudas__rejilla > :first-child .lt-tarjeta__cuerpo,
.lt-negocios__rejilla > :first-child .lt-tarjeta__cuerpo {
  padding: calc(var(--e-3, 20px) + 4px) var(--e-3, 20px) var(--e-3, 20px);
}

/*
 * SE TIENE QUE VER QUE HAY MAS A LA DERECHA.
 *
 * Un carrusel sin senal se lee como una fila que termina ahi, y la mitad del
 * contenido no se descubre nunca. La tarjeta cortada por el borde ya lo insinua;
 * el degradado lo confirma sin anadir un boton mas.
 *
 * El contenedor envuelve al carrusel: el degradado NO puede ir sobre el
 * elemento que se desplaza, porque se desplazaria con el.
 */
.lt-negocios,
.lt-ayudas { position: relative; }

.lt-negocios .lt-contenedor,
.lt-ayudas .lt-contenedor { position: relative; }

.lt-negocios .lt-contenedor::after,
.lt-ayudas .lt-contenedor::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--canal) * -1);
  width: clamp(28px, 5vw, 64px);
  background: linear-gradient(to right, transparent, var(--fondo-seccion, #FFF));
  pointer-events: none;
}

/* La seccion de ayudas va sobre hueso, no sobre blanco. */
.lt-ayudas .lt-contenedor::after {
  background: linear-gradient(to right, transparent, var(--hueso, #F6F3EE));
}

@media (prefers-reduced-motion: reduce) {
  .lt-negocios__rejilla,
  .lt-ayudas__rejilla { scroll-behavior: auto; }
}

/* ==================================================================== */
/* LA SECCION DOBLE: NEGOCIOS Y AYUDA EN UNA                            */
/* ==================================================================== */

/*
 * Ver front-page.php. Dos listas comparten titular y carrusel; las pestanas
 * eligen cual se ve.
 *
 * SIN JAVASCRIPT SE VEN LAS DOS, una debajo de otra, cada una con su titulo
 * propio. Por eso el titulo existe en el marcado aunque con JS se esconda: es
 * la unica forma de que el panel siga teniendo nombre cuando no hay pestanas.
 */

.lt-doble__pestanas {
  display: flex;
  gap: 8px;
  margin-bottom: var(--e-3, 20px);
  /* Sin JS las pestanas no hacen nada: se esconden y mandan los titulos. */
  display: none;
}

.lt-anima .lt-doble__pestanas { display: flex; }

.lt-doble__pestana {
  padding: 9px 18px;
  border: 1px solid rgba(11, 18, 32, .16);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-suave, #55617A);
  font-size: var(--fs-chico, .875rem);
  font-weight: var(--peso-medio, 600);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.lt-doble__pestana:hover { border-color: var(--cielo, #4EA8DE); color: var(--tinta); }

.lt-doble__pestana[aria-selected="true"] {
  background: var(--marino, #12294F);
  border-color: var(--marino, #12294F);
  color: var(--blanco, #FFF);
}

.lt-doble__pestana:focus-visible {
  outline: 2px solid var(--cielo, #4EA8DE);
  outline-offset: 2px;
}

/*
 * El titulo de cada panel solo manda cuando NO hay pestanas. Con ellas seria
 * decir dos veces lo mismo: la pestana encendida ya dice que se esta viendo.
 */
.lt-anima .lt-doble__titulo-simple { display: none; }

.lt-doble__titulo-simple {
  margin: var(--e-3, 20px) 0 var(--e-2, 12px);
  font-family: var(--fuente-titulo);
  font-size: 1.25rem;
  color: var(--tinta);
}

/* El panel apagado se retira del flujo Y del arbol de accesibilidad: con solo
   `opacity: 0` seguiria tabulandose y el lector de pantalla leeria las dos. */
.lt-doble__panel[hidden] { display: none; }


/*
 * LA BANDA DE PUBLICIDAD PASO A FONDO OSCURO.
 *
 * Estaba sobre blanco y quedaba en medio de seis secciones claras seguidas: la
 * pagina se volvia plana justo donde hay contenido que alguien ha pagado por
 * ensenar. Sobre oscuro, las creatividades —que son a color y muy saturadas—
 * destacan mas, y de paso se rompe la fila de blancos.
 *
 * El rotulo tiene que virar con el fondo o queda tinta oscura sobre oscuro.
 */
.lt-seccion--noche .lt-publi__rotulo { color: rgba(255, 255, 255, .72); }
.lt-seccion--noche .lt-publi__pie,
.lt-seccion--noche .lt-publi__pie a { color: rgba(255, 255, 255, .78); }


/* ==================================================================== */
/* 3 · CERCA DE TI — ayudas y alertas urgentes de la ciudad activa       */
/* ==================================================================== */

/*
 * Ver inc/cercanas.php. Va la tercera de la portada, justo despues del hero,
 * porque es lo unico de esta pagina que resuelve una urgencia.
 *
 * ESTE BLOQUE VA AL FINAL DEL ARCHIVO A PROPOSITO. La seccion reutiliza
 * `.lt-ayudas__rejilla` —el mismo carrusel del directorio, definido mas
 * arriba— y aqui solo se anade lo que es suyo: la banda de alerta y los dos
 * pies. Estando al final gana los choques por orden de cascada, sin un solo
 * !important y sin tocar una regla que usa otra seccion.
 *
 * NI UN COLOR LITERAL. Todo sale de tokens.css, incluido el rojo del filete de
 * alerta, que es --alerta y existe desde antes que esta seccion: es el mismo
 * que ya llevan el sello de /noticias/ y el de los eventos cancelados. Aqui no
 * se estrena ningun color.
 */

/*
 * SIN DEGRADADO EN EL BORDE DERECHO.
 *
 * `.lt-ayudas .lt-contenedor::after` (mas arriba) pinta un difuminado en el
 * borde derecho para avisar de que el carrusel sigue: es correcto donde vive.
 *
 * Aqui ya no. Esta seccion perdio el carrusel de tarjetas —ahora lleva el mapa
 * a todo lo ancho— asi que no hay nada que se corte por la derecha y el
 * difuminado no avisa de nada. Ademas la seccion es OSCURA desde hoy, y el
 * degradado terminaba en blanco: se veia como una mancha vertical clara pegada
 * al borde. El dueno: «quitas el volteo blanco difuminado a la derecha».
 *
 * Se apaga con `content: none` en vez de recolorearlo: el elemento sobra
 * entero, no es que tuviera mal el color.
 */
.lt-cercanas .lt-contenedor::after {
  content: none;
}

/* --- Las alertas urgentes ------------------------------------------- */

/*
 * SE TIENEN QUE DISTINGUIR DE UNA NOTICIA NORMAL (§3 del documento).
 *
 * Por eso no son la tarjeta compartida con un sello encima: son una banda
 * ancha, sin foto y con el filete de alerta a la izquierda. Tres diferencias a
 * la vez —forma, ausencia de imagen y color del filete— para que la distincion
 * sobreviva a la vision del color y a una pantalla al sol.
 */
.lt-cercanas__alertas {
  display: grid;
  gap: var(--e-2);
  margin: 0 0 var(--e-5);
  padding: 0;
  list-style: none;
}

@media (min-width: 861px) {
  /* Dos alertas caben en fila; una sola ocupa el ancho y no queda coja porque
     `auto-fit` colapsa la pista vacia. */
  .lt-cercanas__alertas {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: var(--e-3);
  }
}

.lt-cercanas__alerta {
  padding: var(--e-3);
  /* El filete a la izquierda es la senal principal; el borde suave cierra la
     caja sin convertirla en un cartel. */
  border: 1px solid var(--linea);
  border-inline-start: 4px solid var(--alerta);
  border-radius: var(--radio-tarjeta);
  background: var(--hueso);
}

.lt-cercanas__sellos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1);
  margin: 0 0 var(--e-2);
}

/* La ciudad de la alerta. --apagado da 6,2:1 sobre --hueso. */
.lt-cercanas__donde {
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--apagado);
}

.lt-cercanas__titular {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.2;
}

/*
 * El enlace ocupa toda la linea del titular y llega a 44px de alto por el
 * interlineado: no hace falta agrandarlo con relleno. --tinta da 16,9:1 sobre
 * --hueso, muy por encima del 4,5:1 exigido.
 */
.lt-cercanas__titular a {
  display: inline-block;
  min-height: 44px;
  color: var(--tinta);
  text-decoration: none;
  text-underline-offset: 3px;
}

.lt-cercanas__titular a:hover,
.lt-cercanas__titular a:focus-visible { text-decoration: underline; }

.lt-cercanas__cuando {
  margin: var(--e-1) 0 0;
  font-size: var(--fs-chico);
  color: var(--apagado);
}

/* --- Los dos pies de la seccion ------------------------------------- */

/*
 * La nota de «se ha ampliado a todo Texas». Va ENCIMA del carrusel y no debajo:
 * quien esta filtrando por El Paso tiene que saber de donde son esas ayudas
 * ANTES de leerlas, no despues de anotarse una direccion.
 */
.lt-cercanas__nota {
  margin: 0 0 var(--e-3);
  font-size: var(--fs-chico);
  color: var(--apagado);
}

.lt-cercanas__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1) var(--e-2);
  margin: var(--e-4) 0 0;
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea);
  font-size: var(--fs-chico);
  color: var(--apagado);
}

/* Objetivo tactil de 44px: este enlace se pulsa con el pulgar. --marca da
   7,2:1 sobre blanco. */
.lt-cercanas__elegir {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 2px;
  color: var(--marca);
  font-weight: var(--peso-fuerte);
}

/*
 * LA LINEA DE «PROXIMAMENTE», cuando hay alertas pero todavia no hay ayudas.
 *
 * directorio.css tiene una variante identica (`.lt-proximamente--linea`) para
 * el mapa del directorio, pero esa hoja NO se encola en la portada: sin estas
 * reglas, aqui saldria el cartelon centrado de 88px de relleno debajo de una
 * alerta, diciendo que la seccion esta vacia justo cuando no lo esta. Se
 * repiten las cuatro declaraciones que hacen falta en vez de encolar una hoja
 * entera de otra pantalla.
 */
.lt-cercanas__linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1) var(--e-3);
  max-width: none;
  margin: 0;
  padding: var(--e-3);
  text-align: left;
  border-radius: var(--radio-tarjeta);
}

.lt-cercanas__linea .lt-proximamente__sello { margin: 0; }

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

/* --- El estado vacio: mismo aviso, proporcion de bloque 3 ------------ */

/*
 * MEDIDO ANTES DE TOCAR NADA (Playwright, localhost:8888, sin datos de prueba):
 * con el bloque de «Proximamente» dentro, esta seccion media
 *
 *   1.212 px en 1280 · 1.036 px en 390
 *
 * Era la segunda pieza mas alta de la portada —solo el hero mide mas, 886 px—
 * para decir que la seccion todavia no ha abierto. El aviso es el correcto; la
 * escala no: en /ayudas/ ese bloque ES la pagina entera y ahi su peso esta bien
 * puesto, pero aqui es uno de dieciocho bloques y compite con los que si tienen
 * contenido.
 *
 * NO se toca `.lt-proximamente` en estructura.css: se ajusta SOLO dentro de
 * esta seccion, que es la unica donde el aviso convive con diecisiete bloques
 * mas. El resto del sitio sigue viendolo igual que hasta hoy.
 */
.lt-cercanas--vacia .lt-proximamente {
  /* Del escalon de espaciado de la casa, no de un numero inventado: --e-4 son
     32px y --e-3 son 24px. En /ayudas/ el aviso sigue con su relleno grande,
     porque alli ES la pagina; aqui es uno de dieciocho bloques. */
  padding: var(--e-4) var(--e-3);
}

/*
 * Y el relleno de la seccion baja al suelo de su propio token: --seccion-y vale
 * clamp(64px, 8.5vw, 128px), y --e-6 son exactamente esos 64px. O sea que este
 * bloque usa en escritorio el mismo respiro que la casa ya da en movil, no un
 * valor nuevo. Se recupera el completo en cuanto haya algo que enseñar.
 */
.lt-cercanas--vacia { padding-block: var(--e-6); }

/*
 * OBJETIVO TACTIL EN LA LINEA DE «MIENTRAS TANTO».
 *
 * Medido a 320/360/390/768/1280: los tres enlaces del pie del aviso —«el
 * directorio de negocios», «las noticias», «la bolsa de empleo»— salian de
 * 139x15, 56x15 y 82x15 px. Quince pixeles de alto es la mitad del pulgar de
 * cualquiera, y en el estado vacio son los UNICOS enlaces de la seccion: si
 * fallan, el bloque no lleva a ninguna parte.
 *
 * Se corrige aqui y no en inc/proximamente.php porque ese archivo no es de esta
 * pieza. El mismo aviso sale en seis paginas de archivo con el mismo problema;
 * queda anotado para quien lleve estructura.css.
 */
.lt-cercanas .lt-proximamente__mientras a {
  display: inline-block;
  min-height: 44px;
  padding-block: 11px;
}

/* ==================================================================== */
/* 11 · EL INDICE DEL DIRECTORIO, RECORTADO EN LA PORTADA               */
/*                                                                      */
/* Lo pidio el dueno: «siento que esta muy largo en la parte de abajo    */
/* del Home, quiero cortarlo un poquito y que haya como una parte de ver */
/* todo el directorio entero, pero que no lo muestre todavia porque      */
/* esta muy largo».                                                     */
/*                                                                      */
/* MEDIDO ANTES DE TOCAR NADA (localhost:8888, portada, 2026-08-09):     */
/*                                                                      */
/*   ancho    seccion   columnas   grupos   columnas del CSS             */
/*    390 px   3.134 px  2.769 px    39         2                        */
/*    768 px   2.292 px  1.942 px    39         4                        */
/*   1440 px   1.375 px    938 px    39         4                        */
/*                                                                      */
/* A 390 px la seccion era la MAS ALTA de toda la portada: 3.134 px de   */
/* los 20.249 que medía la pagina entera, un 15 % del alto total en una  */
/* sola pieza, y la ultima antes del cierre. Eso es lo que el dueno       */
/* estaba viendo.                                                       */
/*                                                                      */
/* ---------------------------------------------------------------      */
/* POR QUE SE CORTA DESDE AQUI Y NO EN EL PHP                            */
/* ---------------------------------------------------------------      */
/* El indice lo pinta inc/indice-directorio.php, que NO es de esta       */
/* pieza. Y aunque lo fuera: el archivo hace UNA sola consulta para las  */
/* 39 categorias y la guarda una hora en cache, asi que el coste de      */
/* servidor no cambia por mostrar doce o treinta y nueve. Lo que sobra   */
/* es alto de pantalla, y el alto de pantalla se decide aqui.            */
/*                                                                      */
/* SE PAGA UN PRECIO Y CONVIENE SABERLO: el marcado de los 27 grupos     */
/* que no se ven sigue viajando al navegador (unos 4 KB sin comprimir,   */
/* menos de 1 KB con gzip). A cambio no se duplica ni una linea del      */
/* indice y sigue habiendo UNA sola version de esa pieza en el sitio.    */
/* Si algun dia pesa, se corta en el PHP con un parametro y esta regla   */
/* se borra.                                                            */
/*                                                                      */
/* `display: none` Y NO UN RECORTE CON `max-height`: lo escondido con    */
/* overflow sigue en el recorrido del tabulador y en el arbol de         */
/* accesibilidad — se tabula hacia negocios que no se ven y el foco      */
/* desaparece de la pantalla. Con `display: none` no existen para nadie. */
/*                                                                      */
/* DOCE, Y POR QUE DOCE. El PHP ya ordena los grupos POR TAMANO (las     */
/* categorias con mas negocios primero), asi que los doce primeros son   */
/* justo donde hay donde elegir. Ademas 12 reparte exacto en las dos     */
/* rejillas que existen: 6 por columna con 2 columnas (telefono) y 3 por */
/* columna con 4 (tableta y escritorio). Ninguna columna queda coja.     */
/*                                                                      */
/* Y NO ENGANA: la bajada de la seccion sigue diciendo «45 negocios en   */
/* 39 categorias», que es la verdad, y debajo esta el boton «Abrir el    */
/* directorio con filtros» que lleva a /negocios/ — el «ver todo el      */
/* directorio entero» que pidio el dueno. Ese boton ya existia; aqui     */
/* solo se le da el sitio que ahora le toca.                            */
/* ==================================================================== */

.lt-portada .lt-indice .lt-indice__grupo:nth-child(n+13) {
  display: none;
}

/*
 * UN FILETE DEBAJO DE LO QUE SI SE VE.
 *
 * Sin el, la lista termina en el aire y se lee como si la pagina se hubiera
 * cortado sola. Con la linea, el final es una decision: aqui acaba el anticipo
 * y debajo esta la puerta al directorio entero.
 */
.lt-portada .lt-indice .lt-indice__columnas {
  padding-bottom: var(--e-3, 20px);
  border-bottom: 1px solid var(--linea);
}

.lt-portada .lt-indice .lt-indice__todo {
  margin-top: var(--e-3, 20px);
}

/*
 * EN EL TELEFONO EL BOTON OCUPA EL ANCHO.
 *
 * Es la unica salida de la seccion y el pulgar la busca al final de un barrido
 * largo: un boton de 190px alineado a la izquierda se falla. A lo ancho, no.
 * El estilo del boton no se toca —sigue siendo el fantasma de base.css— porque
 * es un secundario y convertirlo en principal romperia el sistema de botones
 * del sitio.
 */
@media (max-width: 700px) {
  .lt-portada .lt-indice .lt-indice__todo {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ==================================================================== */
/* 12 · EL EQUIPO DE LATINOS EN TEXAS                                   */
/*                                                                      */
/* PHP: inc/equipo.php                                                  */
/*                                                                      */
/* AQUI NO HAY ESTADO VACIO Y ES DELIBERADO: con cero personas dadas de */
/* alta, el PHP no imprime ni la <section>. No hace falta —ni se debe—   */
/* dibujar una fila de siluetas grises esperando a que alguien llegue.   */
/*                                                                      */
/* Fondo blanco (la seccion lleva `--blanca`), asi que todo el contraste */
/* se mide sobre #FFFFFF:                                               */
/*   · nombre en --tinta  #0B1220 ....................... 18,3:1  AAA   */
/*   · cargo  en --apagado #5A5A5A ....................... 6,9:1  AAA   */
/*   · inicial blanca sobre el circulo --marca #295091 ... 7,9:1  AAA   */
/* El gris de los cargos es --apagado, el UNICO gris de texto del sitio: */
/* aclararlo «porque es secundario» es como se cae de AA sin enterarse.  */
/* ==================================================================== */

.lt-equipo__cabeza {
  margin-bottom: var(--e-4, 32px);
  max-width: 46ch;
}

.lt-equipo__titulo {
  margin: 6px 0 0;
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo, 800);
  font-size: var(--fs-h2);
  line-height: var(--interlineado-titulo, 1.08);
  letter-spacing: var(--tracking-titulo, -.02em);
  color: var(--tinta);
}

/*
 * REJILLA QUE SE LLENA SOLA, sin un numero de columnas escrito a mano.
 *
 * `auto-fit` + `minmax` es lo unico que aguanta que el dueno de de alta a una
 * persona, a tres o a nueve sin que nadie toque el CSS.
 *
 * EL TOPE DE 200px DE LA CELDA ES UNA CORRECCION MEDIDA, no un adorno. Con
 * `minmax(150px, 1fr)` las celdas se repartian TODO el ancho disponible: a
 * 1440px, tres personas salian en tres celdas de 381px con la foto de 160
 * flotando en medio de cada una y una persona sola ocupaba una celda de
 * 1.192px. Con el tope, la celda nunca pasa de 200 y `justify-content: center`
 * centra la fila entera: una persona sale centrada, tres salen juntas y nueve
 * llenan el ancho. Ningun caso queda desparramado.
 *
 * 150px de minimo: es lo que necesita un nombre de dos palabras para no
 * partirse en cuatro lineas debajo de la foto.
 */
.lt-equipo__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
  justify-content: center;
  gap: var(--e-4, 32px) var(--e-3, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-equipo__persona {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

/*
 * LA FOTO, EN CIRCULO Y CUADRADA POR LOS DOS LADOS.
 *
 * `aspect-ratio: 1` ademas del ancho: la imagen llega ya recortada a 320x320
 * desde WordPress (tamano `lt-cuadro`), pero si algun dia alguien sube una foto
 * antes de que ese tamano exista, el navegador la recorta igual en vez de
 * pintar un ovalo. `object-fit: cover` es lo que hace el recorte sin deformar la
 * cara — sin el, una foto apaisada sale estirada.
 */
.lt-equipo__foto {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  background: var(--hueso-honda, #EBE5DC);
}

/*
 * EL RESPALDO SIN FOTO. Circulo azul de marca con la inicial del nombre real.
 * La mayuscula la pone el CSS y no el PHP: `mb_strtoupper` no esta garantizada
 * en todas las instalaciones y WordPress no la suple, mientras que
 * `text-transform` funciona en todos los navegadores y respeta las reglas de
 * cada idioma.
 */
.lt-equipo__foto--inicial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--marca, #295091);
  color: var(--blanco, #FFFFFF);
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo, 800);
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
  /* La foto de al lado ocupa el ancho de la celda; el circulo tiene que medir
     exactamente lo mismo o las dos piezas bailan en la misma fila. */
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1;
}

.lt-equipo__nombre {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-fuerte, 700);
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--tinta);
  /* Un apellido largo parte por donde sea antes de desbordar la celda. */
  overflow-wrap: anywhere;
}

.lt-equipo__cargo {
  margin: -4px 0 0;
  font-size: var(--fs-chico, .875rem);
  line-height: 1.4;
  color: var(--apagado);
  overflow-wrap: anywhere;
}

/*
 * TELEFONO. Dos columnas fijas: `auto-fit` con 150px de minimo daria dos
 * columnas a 390px de ancho, pero a 320px daria UNA sola y el equipo se
 * convertiria en una columna de fotos gigantes de pantalla y media. Con dos
 * fijas la seccion se lee de un vistazo en cualquier telefono.
 */
@media (max-width: 560px) {
  .lt-equipo__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-3, 20px) var(--e-2, 16px);
  }

  .lt-equipo__foto,
  .lt-equipo__foto--inicial { max-width: 130px; }

  .lt-equipo__nombre { font-size: .98rem; }
}


/* ==================================================================== */
/* EL MAPA BUSCADOR DE AYUDAS                                            */
/* ==================================================================== */

/*
 * Mas grande y mas ancho, que es lo que se pidio: «quiero que el mapa sea mas
 * ancho, mas grande». Se sale del contenedor de texto tirando de los margenes
 * negativos hasta el ancho de la seccion, sin romper el respiro lateral en
 * movil. La altura sube de 399 px a 60vh: un mapa de ayudas se mira, no se
 * ojea, y con 400 px no se ven dos ciudades a la vez.
 */
.lt-cercanas__mapa {
  /*
   * DENTRO DEL ANCHO DE CAJA. Antes tiraba de margenes negativos para salirse
   * hasta el borde de la seccion y quedaba mas ancho que el boton de debajo y
   * que el texto de arriba: «que no se desborde del ancho de caja de la pagina
   * para que el borde quede alineado con los botones».
   */
  margin: 8px 0 0;

  /*
   * EL MAPA SE ENCIERRA EN SU PROPIO CONTEXTO DE APILADO.
   *
   * Leaflet reparte z-index altos por dentro —las capas van a 400 y los
   * controles de zoom a 1000— contando con ser lo unico de la pantalla. Aqui
   * no lo es: esos 1000 se comparaban contra el resto de la pagina y el mapa
   * se pintaba POR ENCIMA DE LA CABECERA fija al hacer scroll. El dueno:
   * «está apareciendo encima del header».
   *
   * `isolation: isolate` crea un contexto nuevo: los z-index de Leaflet pasan
   * a competir solo entre ellos, dentro de esta caja, y la caja entera se
   * compara con la pagina como un bloque normal en z-index 0. No hace falta
   * tocar ni un z-index de Leaflet, que es lo que rompe sus popups.
   */
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.lt-cercanas__mapa #lt-mapa-lienzo {
  display: block;
  width: 100%;
  height: clamp(420px, 60vh, 640px);
  border-radius: var(--radio-tarjeta, 8px);
  overflow: hidden;
  background: color-mix(in srgb, var(--noche) 82%, var(--blanco));
}

/* Los puntos son datos, no interfaz. */
.lt-cercanas__mapa .lt-mapa__puntos { display: none; }

/*
 * EL PIN. Antes era un <div> de 44x44 SIN COLOR —transparente sobre el mapa—:
 * por eso el dueno decia «no veo las ayudas en el mapa». Ahora es un circulo
 * con borde blanco, que es lo que lo hace legible sobre calles y sobre agua.
 */
.lt-pin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--marca);
  border: 2.5px solid #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / .45);
}

/*
 * El resaltado de «cerca de mi». BLANCO con anillo azul, no un color calido:
 * la paleta del sitio es azul, blanco y negro, y meter un naranja aqui la
 * rompia. El contraste lo da el tamano y la inversion, no un tono nuevo.
 */
.lt-pin--cerca {
  width: 28px;
  height: 28px;
  margin: -5px 0 0 -5px;
  background: #fff;
  border: 5px solid var(--marca);
  box-shadow: 0 2px 10px rgb(0 0 0 / .55);
  z-index: 500;
}

/* Donde esta el visitante. */
.lt-yo {
  fill: #fff;
  fill-opacity: .95;
  stroke: var(--marca);
  stroke-width: 4;
}

/* -------------------------------------------------------------------- */
/* EL BUSCADOR «CERCA DE MI»                                             */
/* -------------------------------------------------------------------- */

.lt-cerca {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/*
 * EL BOTON, CON ESTILO PROPIO.
 * Salia como el boton gris del navegador porque `lt-boton--claro` no existe en
 * este tema: se vio en pantalla, no en el codigo. Se le da la forma de pildora
 * del resto del sitio en vez de inventar una variante nueva.
 */
.lt-cerca__boton {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--marca);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.lt-cerca__boton::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid currentColor;
  flex: none;
}

.lt-cerca__boton:hover:not(:disabled) {
  background: color-mix(in srgb, var(--marca) 82%, #000);
  transform: translateY(-1px);
}

.lt-cerca__boton:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.lt-cerca__boton:disabled {
  opacity: .6;
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  .lt-cerca__boton { transition: none; }
  .lt-cerca__boton:hover:not(:disabled) { transform: none; }
}

.lt-cerca__aviso {
  margin: 0;
  font-size: .95rem;
  color: var(--apagado);
}

/*
 * LAS FICHAS DE RESULTADO — «un poco mas delgadas», textual.
 * Sin foto y sin relleno gordo: lo unico que importa aqui es a que distancia
 * esta y como se llama. Van en rejilla fluida para que en movil sean una
 * columna sin tocar nada.
 */
.lt-cerca__salida {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.lt-cerca__ficha {
  padding: 14px 16px;
  border-radius: var(--radio-tarjeta, 8px);
  background: color-mix(in srgb, var(--blanco) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--blanco) 16%, transparent);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.lt-cerca__ficha:hover,
.lt-cerca__ficha:focus-within {
  background: color-mix(in srgb, var(--blanco) 14%, transparent);
  border-color: color-mix(in srgb, var(--marca) 55%, transparent);
}

.lt-cerca__distancia {
  margin: 0 0 4px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marca);
}

.lt-cerca__titulo {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

.lt-cerca__titulo a {
  color: var(--blanco);
  text-decoration: none;
}

.lt-cerca__titulo a:hover { text-decoration: underline; }

.lt-cerca__ciudad {
  margin: 4px 0 0;
  font-size: .85rem;
  color: var(--apagado);
}

@media (max-width: 768px) {
  .lt-cercanas__mapa #lt-mapa-lienzo {
    height: 400px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lt-cerca__ficha { transition: none; }
}

/* ==================================================================== */
/* «QUIENES SOMOS», MAS COMPACTA — 2026-08-13                            */
/* ==================================================================== */

/*
 * El dueno: «siento que esta seccion esta muy grande, la foto esta muy alta».
 *
 * Medido antes de tocar: la seccion ocupaba 1194px de alto —mas que una
 * pantalla de portatil entera— con 122px de relleno arriba y una foto de
 * 709px. Para un bloque que se lee una vez es demasiado sitio, y empuja el
 * mapa de ayudas tan abajo que casi nadie llega.
 *
 * La foto se recorta con `object-fit: cover` en vez de encogerla: encogerla
 * habria dejado a las dos personas diminutas. Recortada, se mantienen al mismo
 * tamano y lo que se pierde es el fondo blanco de arriba y de abajo, que no
 * aporta nada.
 */
/*
 * 2026-08-17: SE LE QUITA EL RECORTE, Y HAY QUE EXPLICAR POR QUE.
 *
 * Este `overflow: hidden` con su esquina redondeada existia para recortar una
 * foto rectangular alta —ver la nota de arriba, del 13 de agosto—. Desde que la
 * foto es un CIRCULO (`border-radius: 50%` con `object-fit: cover`, en
 * marca.css) se recorta ella sola: la caja ya no tiene que recortar nada.
 *
 * Y ademas estorbaba. El duenno pidio «un borde girando alrededor de la foto,
 * un poquito lejito»; ese anillo vive en el `::after` del marco y sobresale 22
 * pixeles por los cuatro lados. Con el recorte puesto, el anillo se cortaba a
 * ras de la caja: se veia entero por las diagonales y DESAPARECIA en los
 * costados. Se vio en una captura, no leyendo el codigo.
 *
 * `max-height` se queda como red de seguridad —hoy la foto mide 473 px, muy por
 * debajo— y la esquina de 8 px se va porque en un circulo no pinta nada.
 */
.lt-somos .lt-somos__marco {
  max-height: 520px;
  overflow: visible;
}

.lt-somos .lt-somos__foto-img {
  max-height: 520px;
  height: 100%;
  object-fit: cover;
  /* El encuadre sube: las caras estan en la mitad de arriba de la foto. */
  object-position: center 22%;
}

/* El relleno de la seccion, de 122px a 80. */
.lt-somos.lt-seccion {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (max-width: 768px) {
  .lt-somos .lt-somos__marco,
  .lt-somos .lt-somos__foto-img { max-height: 380px; }

  /*
   * SE ACHICA LA FOTO PARA QUE EL ANILLO QUEPA. 2026-08-18.
   *
   * El duenno: «en celular se desborda, achica un poco la foto para que quepa
   * bien».
   *
   * MEDIDO en 360, 375 y 414 px: el anillo se salia SEIS PIXELES por cada lado
   * en los tres. La cuenta es simple y no depende del telefono: el contenedor
   * deja 18 px de aire a cada lado, y el anillo se dibuja 24 px por fuera de la
   * foto. 24 menos 18 son los 6 que sobraban.
   *
   * Se achica la foto 32 px en total —16 por lado— en vez de acercar el anillo:
   * asi el anillo conserva su separacion, que es lo que se pidio cuando se
   * monto («un poquito lejito, que haya un pequeno espacio»), y ademas quedan
   * 10 px de respiro hasta el borde de la pantalla en vez de ir al ras.
   *
   * `margin-inline: auto` porque al fijar el ancho deja de ocupar la columna
   * entera y sin esto se pegaria a la izquierda.
   */
  .lt-somos .lt-somos__marco {
    width: calc(100% - 32px);
    margin-inline: auto;
  }

  .lt-somos.lt-seccion {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/* ==================================================================== */
/* AYUDAS EN DOS COLUMNAS (SOLO EN PANTALLA GRANDE) — 2026-08-13         */
/* ==================================================================== */

/*
 * El dueno: «siento que esto en PC deberia de ser una seccion de 2 columnas,
 * quiero que el mapa este a la izquierda y a la derecha el texto».
 *
 * En una sola columna el mapa mide 600px de alto y empuja el titulo, el boton
 * y los resultados fuera de la pantalla: hay que hacer scroll para descubrir
 * que existe un buscador. En dos columnas se ve todo a la vez, que es lo que
 * convierte la seccion en algo utilizable.
 *
 * EL ORDEN DEL HTML NO SE TOCA. En movil sigue siendo titulo → mapa → boton,
 * que es el orden correcto para leer de arriba abajo y el que oye un lector de
 * pantalla. Aqui solo se COLOCAN las piezas con grid: el mapa salta a la
 * columna izquierda y el resto se apila a la derecha. Cambiar el HTML habria
 * roto el orden de lectura para arreglar un tema visual.
 */
@media (min-width: 1024px) {
  .lt-cercanas .lt-contenedor {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    align-items: start;
    column-gap: 48px;
  }

  /* El mapa: columna izquierda, ocupando todo el alto de la seccion. */
  .lt-cercanas .lt-cercanas__mapa {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: stretch;
    margin: 0;
  }

  .lt-cercanas .lt-cercanas__mapa #lt-mapa-lienzo {
    height: 100%;
    min-height: 480px;
  }

  /* El texto y el buscador: columna derecha, uno debajo del otro. */
  .lt-cercanas .lt-cabeza-seccion { grid-column: 2; grid-row: 1; }
  .lt-cercanas .lt-cerca          { grid-column: 2; grid-row: 2; margin-top: 24px; }
  .lt-cercanas .lt-cercanas__pie  { grid-column: 2; grid-row: 3; align-self: end; }

  /* Los resultados de «cerca de mi» caben en una columna estrecha: una
     debajo de otra, no en rejilla de tarjetas anchas. */
  .lt-cercanas .lt-cerca__salida {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- LAS CUATRO ESQUINAS DEL MAPA, REDONDEADAS ----------------------- */

/*
 * Las de abajo salian en angulo recto. El radio SI estaba puesto en el lienzo,
 * pero Leaflet mete dentro sus propias capas (`.leaflet-container` y los
 * paneles) y esas son rectangulares: se pintan encima de la esquina redondeada
 * y la tapan justo en la parte de abajo, que es donde caen el mapa base y la
 * barra de atribucion.
 *
 * Se redondea la caja de fuera Y el contenedor de Leaflet, y las dos recortan
 * lo que sobresalga. Asi el radio no depende de que ninguna capa interna se
 * porte bien.
 */
.lt-cercanas .lt-cercanas__mapa,
.lt-cercanas .lt-cercanas__mapa #lt-mapa-lienzo,
.lt-cercanas .lt-cercanas__mapa .leaflet-container {
  border-radius: var(--radio-tarjeta, 8px);
  overflow: hidden;
}

/* La barra de «Leaflet | OpenStreetMap» se pega a la esquina y le come el
   redondeo: se le quita el suyo y se deja que la recorte la caja de fuera. */
.lt-cercanas .lt-cercanas__mapa .leaflet-control-attribution {
  border-top-left-radius: 6px;
}

/* --- EL REDONDEO, AHORA CON clip-path -------------------------------- */

/*
 * `border-radius` + `overflow: hidden` NO BASTABA, y el motivo es concreto:
 * Leaflet coloca sus capas con `transform: translate3d(...)`, y un contenedor
 * redondeado NO recorta a los hijos transformados. Es un comportamiento
 * conocido del navegador, no un fallo de la hoja: la propiedad se aplicaba
 * —medido, 18px y overflow hidden en las tres capas— y aun asi la esquina de
 * abajo seguia en angulo recto.
 *
 * `clip-path` si recorta hijos transformados. Se pone en la caja de fuera, que
 * es la que envuelve todo, incluida la barra de atribucion.
 */
.lt-cercanas .lt-cercanas__mapa {
  clip-path: inset(0 round var(--radio-tarjeta, 8px));
}

/* ==================================================================== */
/* LA CINTA ENTRE EL HERO Y LA VITRINA — 2026-08-13                      */
/* ==================================================================== */

/*
 * Franja fina, no una seccion. El hero de arriba es oscuro y la vitrina de
 * abajo es hueso: la cinta hace de junta entre las dos en el azul de marca, y
 * de paso resume lo que hay dentro del sitio antes de que nadie baje.
 *
 * Deliberadamente BAJA (44px): tiene que leerse de pasada, no competir con el
 * buscador que tiene justo encima.
 */
.lt-cinta-hero {
  position: relative;
  overflow: hidden;

  /*
   * AZUL OSCURO, no el azul de marca.
   *
   * Con `--marca` la franja gritaba mas que el buscador que tiene justo
   * encima: un azul medio a todo lo ancho entre dos secciones se lee como un
   * aviso, no como una junta. En `--noche` continua el hero y hace de
   * transicion hacia el hueso de la vitrina, que es su trabajo.
   */
  background: var(--noche);
  color: #fff;
  border-bottom: 1px solid color-mix(in srgb, #fff 12%, transparent);
}

.lt-cinta-hero__pista {
  display: flex;
  width: max-content;
  animation: lt-cinta-hero-anda 46s linear infinite;
}

.lt-cinta-hero__lista {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-cinta-hero__pieza {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  margin-right: 30px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* El separador entre frases: un punto, no una barra. La barra en mayusculas
   se confunde con una letra. */
.lt-cinta-hero__punto {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--marca);
  margin-right: 16px;
  flex: none;
}

@keyframes lt-cinta-hero-anda {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/*
 * Al pasar el raton se para: si algo interesa, hay que poder leerlo.
 *
 * SOLO DONDE HAY RATON DE VERDAD. Acotado el 2026-08-16, y no es un detalle:
 * en un telefono el `:hover` se QUEDA PEGADO al ultimo elemento tocado hasta
 * que tocas otra cosa. Sin esta consulta pasaba lo siguiente, medido en un
 * iPhone simulado: tocabas la cinta y paraba —bien—, tocabas otra vez para
 * soltarla, se quitaba la clase... y seguia parada, porque el `:hover` pegado
 * la mantenia. O sea que se podia parar pero no volver a arrancar.
 */
@media (hover: hover) and (pointer: fine) {
  .lt-cinta-hero:hover .lt-cinta-hero__pista { animation-play-state: paused; }
}

/*
 * Y CON EL DEDO TAMBIEN. Anadido el 2026-08-16: «Noticias no para en celular
 * con el dedo».
 *
 * El `:hover` de arriba no existe en un telefono, asi que la cinta era
 * imposible de leer justo en las pantallas por donde entra casi todo el mundo.
 * La clase la pone assets/js/cinta-hero.js al tocarla.
 */
.lt-cinta-hero--quieta .lt-cinta-hero__pista { animation-play-state: paused; }

/*
 * Se avisa al navegador de que esto se va a mover, y se le prohibe al dedo
 * seleccionar texto sin querer al tocar para pausar. Las dos cosas juntas
 * quitan el tironeo que se veia al desplazar la pagina con la cinta a la vista.
 */
.lt-cinta-hero__pista {
  will-change: transform;
  -webkit-user-select: none;
          user-select: none;
}

.lt-cinta-hero__pausa {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease;
}

.lt-cinta-hero__pausa:hover,
.lt-cinta-hero__pausa:focus-visible { background: rgba(255, 255, 255, .3); }

/* El area que responde al dedo es de 44px aunque el boton se vea de 26. */
.lt-cinta-hero__pausa::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/*
 * La ultima frase no se mete debajo del boton: sin esto, en el momento en que
 * una frase pasa por la derecha queda medio tapada por el circulo.
 */
.lt-cinta-hero { padding-right: 44px; }

@media (prefers-reduced-motion: reduce) {
  .lt-cinta-hero__pista { animation: none; }
  .lt-cinta-hero { overflow-x: auto; }
}

/* ==================================================================== */
/* RESUMEN DE RESENAS — 2026-08-14                                       */
/* ==================================================================== */

.lt-resumen-resenas {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  max-width: 620px;
  margin: 0 auto 40px;
  padding: 26px 30px;
  border: 1px solid var(--borde, #DCD6CC);
  border-radius: 16px;
  background: var(--blanco, #fff);
}

.lt-resumen-resenas__nota { text-align: center; }

.lt-resumen-resenas__cifra {
  margin: 0;
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.lt-resumen-resenas__de5 {
  margin: 2px 0 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--apagado);
}

.lt-resumen-resenas__total {
  margin: 10px 0 0;
  font-size: .84rem;
  color: var(--apagado);
}

/* --- El reparto por estrellas ---------------------------------------- */

.lt-resumen-resenas__reparto {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-resumen-resenas__fila {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  color: var(--apagado);
  font-variant-numeric: tabular-nums;
}

.lt-resumen-resenas__etiqueta { font-weight: 700; color: var(--tinta); }

.lt-resumen-resenas__barra {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tinta) 10%, transparent);
  overflow: hidden;
}

.lt-resumen-resenas__relleno {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--marca);
}

.lt-resumen-resenas__cuenta { text-align: right; }

@media (max-width: 560px) {
  .lt-resumen-resenas {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 22px;
  }
}

/* ==================================================================== */
/* RESENAS: REJILLA QUE SE ADAPTA + FORMULARIO MODERNO — 2026-08-14      */
/* ==================================================================== */

/*
 * 1. LA REJILLA SE ADAPTA AL NUMERO DE RESENAS.
 *
 * El dueno: «si son 2 se expanden al ancho de la caja, si son 3 ocupan la caja
 * normal y si es una tambien que se expanda, para que no se vea extrano».
 *
 * `auto-fit` hace exactamente eso sin una sola condicion: reparte el ancho
 * entre las columnas que HAY. Con una resena, esa columna ocupa todo; con dos,
 * la mitad cada una; con tres, un tercio. No hace falta contar nada ni escribir
 * una regla por caso.
 *
 * `minmax(300px, 1fr)` es lo que impide que con seis resenas salgan columnas
 * de 180px ilegibles: por debajo de 300 baja de fila.
 */
.lt-resenas__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  align-items: start;
}

/* --------------------------------------------------------------------
 * 2. EL FORMULARIO: CAMPOS, NO UN CUADRO BLANCO
 * --------------------------------------------------------------------
 * Estaba dentro de una caja blanca enorme con los campos flotando sueltos,
 * asi que no se leia como un formulario sino como un hueco. Ahora cada campo
 * tiene su propio contorno y su foco, que es lo que le dice a alguien donde
 * tiene que escribir.
 */
/*
 * SIN CAJA. Los campos van DIRECTAMENTE sobre el azul de la seccion.
 *
 * La version anterior lo metia en un rectangulo blanco y se leia como un
 * parche pegado encima. Se intento anular desde otra regla mas abajo y NO
 * funciono: el formulario no cuelga de `.lt-resenas` ni de `.lt-seccion--noche`
 * —se comprobo— asi que aquella especificidad no alcanzaba. Se corrige AQUI,
 * en la regla que pintaba el blanco, que es donde estaba el problema.
 */
.lt-resenas__formulario {
  max-width: 660px;
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.lt-resenas__formulario label {
  display: block;
  margin-bottom: 7px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--apagado);
}

.lt-resenas__formulario input[type="text"],
.lt-resenas__formulario input[type="email"],
.lt-resenas__formulario textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--borde, #DCD6CC);
  border-radius: 11px;
  background: color-mix(in srgb, var(--tinta) 3%, transparent);
  color: var(--tinta);
  font: inherit;
  font-size: .95rem;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.lt-resenas__formulario textarea { min-height: 130px; resize: vertical; }

.lt-resenas__formulario input:focus,
.lt-resenas__formulario textarea:focus {
  outline: none;
  border-color: var(--marca);
  background: var(--blanco, #fff);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 15%, transparent);
}

.lt-resenas__formulario input::placeholder,
.lt-resenas__formulario textarea::placeholder { color: color-mix(in srgb, var(--apagado) 70%, transparent); }

/* Cada bloque campo+etiqueta separado por rejilla, no por margenes sueltos. */
.lt-resenas__formulario > * + * { margin-top: 18px; }

/* --------------------------------------------------------------------
 * 3. LAS ESTRELLAS DEL FORMULARIO
 * --------------------------------------------------------------------
 * Son cinco radios sin JavaScript (ver inc/resenas.php). Toda la animacion se
 * hace con CSS, y por eso funciona incluso si el guion no carga.
 *
 * EL TRUCO DEL RELLENO HACIA ATRAS: los radios estan en orden inverso en el
 * marcado, asi que `~` puede pintar las anteriores. Al pasar por la 4a se
 * encienden la 1, 2, 3 y 4 — que es como se espera que funcione una barra de
 * estrellas y lo que un `:hover` normal no sabe hacer.
 */
.lt-resenas__formulario .lt-estrellas-campo {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 6px;
}

.lt-resenas__formulario .lt-estrellas-campo input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.lt-resenas__formulario .lt-estrellas-campo label,
.lt-resenas__formulario .lt-estrellas-campo .lt-estrella {
  margin: 0;
  font-size: 2.1rem;
  line-height: 1;
  color: color-mix(in srgb, var(--tinta) 18%, transparent);
  cursor: pointer;
  transition: color .14s ease, transform .18s cubic-bezier(.34, 1.56, .64, 1);
}

/* Encendidas: la elegida y todas las de su izquierda. */
.lt-resenas__formulario .lt-estrellas-campo input:checked ~ label,
.lt-resenas__formulario .lt-estrellas-campo label:hover,
.lt-resenas__formulario .lt-estrellas-campo label:hover ~ label {
  color: #F2B01E;
}

/* El rebote al elegir: sube y vuelve. Es el gesto que confirma que quedo
   marcada sin necesidad de un mensaje. */
.lt-resenas__formulario .lt-estrellas-campo label:hover,
.lt-resenas__formulario .lt-estrellas-campo input:checked + label {
  transform: scale(1.22) translateY(-2px);
}

.lt-resenas__formulario .lt-estrellas-campo input:focus-visible + label {
  outline: 2px solid var(--marca);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .lt-resenas__formulario .lt-estrellas-campo label,
  .lt-resenas__formulario input,
  .lt-resenas__formulario textarea { transition: none; }

  .lt-resenas__formulario .lt-estrellas-campo label:hover,
  .lt-resenas__formulario .lt-estrellas-campo input:checked + label { transform: none; }
}

/* ==================================================================== */
/* RESENAS: SOLO LO QUE SI FUNCIONO                                      */
/* ==================================================================== */

/*
 * AQUI HABIA UN INTENTO DE PONER EL FORMULARIO SOBRE EL AZUL Y SE REVIRTIO.
 *
 * Que paso: se pintaron de blanco las etiquetas y los campos dando por hecho
 * que `.lt-resenas__formulario` era el recuadro claro. No lo es —el recuadro
 * es un ELEMENTO PADRE— asi que la caja blanca siguio ahi y encima el
 * contenido quedo blanco sobre blanco: el formulario entero desaparecio.
 *
 * Se deshizo entero en vez de ir parcheando: cuando un cambio deja algo peor
 * que como estaba, lo correcto es volver al punto bueno y volver a atacarlo
 * sabiendo cual es el elemento de verdad, no encadenar correcciones a ciegas.
 *
 * Lo que SI se queda de aquel intento son las dos cosas que funcionaron y se
 * midieron: las tarjetas igualadas y las estrellas en ambar.
 */

/* Todas las tarjetas del mismo alto — medido 262/262. Sin esto, una resena de
   dos lineas al lado de otra de cuatro dejaba un escalon. */
.lt-resenas__rejilla { align-items: stretch; }

.lt-resenas__rejilla > * {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* El pie —nombre y fecha— al fondo, para que quede alineado entre tarjetas. */
.lt-resenas__rejilla .lt-resena__autor { margin-top: auto; }

/* Las estrellas en ambar: es el color que todo el mundo asocia a una
   valoracion. En azul se confundian con el resto del texto de la tarjeta. */
.lt-resenas__rejilla .lt-estrellas__llenas,
.lt-resena__cabeza .lt-estrellas__llenas {
  color: #F2B01E;
}

.lt-resenas__rejilla .lt-estrellas,
.lt-resena__cabeza .lt-estrellas {
  font-size: 1.18rem;
  letter-spacing: .1em;
}

/* ==================================================================== */
/* PENDIENTE: EL FORMULARIO DE RESENA SOBRE EL AZUL                      */
/* ==================================================================== */

/*
 * NO SE INTENTA MAS DESDE AQUI. Tres intentos, los tres dejaron el formulario
 * ilegible, y queda anotado para no repetirlos:
 *
 *   1. Se pinto de blanco el texto creyendo que el fondo lo ponia
 *      `.lt-resenas__formulario`. Ese elemento es TRANSPARENTE: el blanco
 *      venia del padre. Resultado: blanco sobre blanco.
 *   2. Se subio la especificidad con `.lt-resenas` y `.lt-seccion--noche`. No
 *      alcanzo: el formulario no cuelga de ninguna de las dos.
 *   3. Se ataco `.lt-resenas__nueva`, que SI es quien pinta el blanco
 *      —encontrado subiendo por los padres—. Tampoco: sigue en
 *      rgb(255,255,255), asi que hay otra regla con mas peso en otra hoja.
 *      Contraste medido del texto del campo: 1.0:1. Invisible.
 *
 * LO QUE HAY QUE HACER: encontrar QUE hoja pinta ese blanco y cambiarlo ahi,
 * no seguir apilando anulaciones. Cada intento fallido deja CSS muerto que
 * confunde al siguiente que lo lea.
 *
 * El formulario se queda como estaba —caja clara, texto oscuro, legible— hasta
 * entonces. Feo pero funcional es mejor que bonito e invisible.
 */

/* ==================================================================== */
/* LOCALIZADOR DE ICE — 2026-08-14                                       */
/* ==================================================================== */

/*
 * Sobria a proposito. Esta seccion la va a leer alguien que esta buscando a un
 * familiar detenido: no lleva iconos llamativos, ni colores de alarma, ni
 * animacion. Solo lo que hace falta, legible y en orden.
 */

.lt-ice__cabeza { max-width: 62ch; margin-bottom: 38px; }

/*
 * «ICE» EN GRANDE. Pedido del dueno, 2026-08-15.
 *
 * Es un rotulo tipografico, NO un sello ni un logo —el emblema de la agencia
 * esta protegido y ademas implicaria afiliacion, que es lo contrario de lo que
 * es este sitio—. Aqui es la palabra escrita, como el titular de un periodico.
 *
 * POR QUE FUNCIONA Y NO ES SOLO DECORACION: quien entra a esta portada porque
 * acaban de detener a un familiar viene buscando exactamente esas tres letras.
 * En este tamano las encuentra sin leer una sola linea de texto, que es el peor
 * momento de su vida para pedirle que lea.
 *
 * El tamano se calcula con `vw` para que llene el ancho en movil igual que en
 * escritorio; el `line-height` bajo y el tracking negativo son lo que hacen que
 * tres letras sueltas se lean como un rotulo y no como un titulo suelto.
 */
.lt-ice__marca {
  margin: 0 0 2px;
  font-family: var(--fuente-titulo);
  /* El minimo manda en movil (12vw de 390px se quedaba en 47px, y «en grande»
     era literalmente lo que se pidio): en pantalla de telefono sale a 70px. */
  font-size: clamp(4.4rem, 12vw, 7.5rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.045em;
  color: #fff;
  /*
   * La foto de fondo tiene zonas claras y el blanco puro se pierde encima. Una
   * sombra suelta —sin desplazamiento— le da borde sin que parezca un efecto:
   * separa la letra de la foto exactamente igual que hace un rotulo real.
   */
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.55);
}

/*
 * La etiqueta pega debajo del rotulo, no flotando: «ICE · Detenciones» tienen
 * que leerse como una sola unidad, no como dos cosas separadas.
 */
.lt-ice__cabeza .lt-etiqueta { margin-top: 0; }

.lt-ice__titulo {
  margin: 10px 0 14px;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.14;
  text-wrap: balance;
}

.lt-ice__bajada { margin: 0; color: color-mix(in srgb, #fff 74%, transparent); }

.lt-ice__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
}

@media (min-width: 1024px) {
  .lt-ice__cuerpo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 52px; }
}

.lt-ice__sub {
  margin: 0 0 14px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 62%, transparent);
}

.lt-ice__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  color: color-mix(in srgb, #fff 82%, transparent);
  line-height: 1.5;
}

.lt-ice__lista strong { color: #fff; }

/* La lista numerada si lleva numero: es una secuencia de pasos reales. */
.lt-ice__lista--num { list-style: decimal; padding-left: 22px; }
.lt-ice__lista--num li { padding-left: 4px; }

.lt-ice__lista a { color: #fff; text-underline-offset: 3px; }

/* El aviso de lo que el localizador NO cubre. Es lo mas importante de la
   seccion: sin el, un resultado vacio se interpreta como «no esta detenido». */
.lt-ice__nota {
  margin: 22px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--marca);
  background: color-mix(in srgb, #fff 6%, transparent);
  border-radius: 0 10px 10px 0;
  font-size: .92rem;
  line-height: 1.55;
  color: color-mix(in srgb, #fff 80%, transparent);
}

.lt-ice__boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  background: #fff;
  color: var(--noche, #071324);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.lt-ice__boton:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgb(0 0 0 / .3);
}

.lt-ice__boton:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.lt-ice__fuera { font-size: 1rem; }

.lt-ice__aviso {
  margin: 12px 0 30px;
  font-size: .84rem;
  color: color-mix(in srgb, #fff 58%, transparent);
  max-width: 46ch;
}

.lt-ice__sino {
  padding-top: 26px;
  border-top: 1px solid color-mix(in srgb, #fff 14%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .lt-ice__boton { transition: none; }
  .lt-ice__boton:hover { transform: none; }
}

/* --- EL FONDO OPCIONAL DE LA SECCION DE ICE -------------------------- */

/*
 * Sin imagen, la seccion se queda en su azul y funciona igual. Con imagen,
 * esta va MUY atenuada y en escala de grises: la seccion tiene que poder
 * leerse de un tiron, y una foto nitida detras del texto compite con lo unico
 * que importa aqui —el numero A, el pais de nacimiento, el aviso de las 48
 * horas—.
 */
/*
 * LA BANDA DEL ICE ES NEGRA, NO AZUL. Lo pidio el dueno el 2026-08-15: «quiero
 * el overlay negro no azul de la seccion del ICE».
 *
 * NO SE ESCRIBE SOLO EN EL VELO, se escribe TAMBIEN en el fondo de la seccion, y
 * es a proposito: si el negro viviera unicamente en el `::after` —que solo
 * existe cuando hay foto puesta—, el dia que alguien quite la imagen desde el
 * panel la banda volveria al azul en silencio y el encargo quedaria deshecho sin
 * que nadie tocara una linea. Con las dos escritas, la seccion es negra haya
 * foto o no.
 *
 * Y ADEMAS ARREGLA UN CHOQUE DE FONDOS QUE YA EXISTIA. Medido en la portada:
 * resenas e ICE estaban pegadas y las dos eran el mismo azul noche (#071324),
 * o sea dos bandas oscuras seguidas sin corte, que es justo lo que la regla de
 * la casa prohibe. Con el ICE en negro y delante de las resenas, el tramo final
 * queda: preguntas (crema) -> ICE (negro) -> resenas (azul noche). Tres escalones
 * distintos.
 *
 * EL NEGRO NO VIVE AQUI: es `--negro`, un token del sitio (assets/css/tokens.css).
 * Nacio en esta seccion y a las pocas horas el dueno pidio el pie negro tambien,
 * asi que subio a token antes de que hubiera dos negros distintos con el mismo
 * nombre en la cabeza de nadie. Alli esta explicado por que no es #000 puro.
 */
.lt-ice {
  position: relative;
  isolation: isolate;
  background: var(--negro);
}

.lt-ice--con-fondo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--lt-ice-fondo);
  background-size: cover;
  background-position: center 30%;
  filter: grayscale(1) contrast(.9);
  /*
   * .22 ERA INVISIBLE. Medido el 2026-08-15 con la foto puesta: entre el
   * grisado, esta opacidad y el velo de abajo —que en la mitad izquierda es
   * navy casi opaco— la imagen no se distinguia del fondo liso. Si no se ve, no
   * esta; y el dueno pidio que se viera.
   *
   * .58 Y EL VELO MAS ABIERTO — segunda peticion del dueno el mismo dia: «que
   * el overlay sea un poco mas clarito, que se vea mas la foto». Se subio la
   * foto de .42 a .58 y se abrio el velo de 88/62 a 74/42.
   *
   * EL LIMITE NO SE PUSO A OJO. Se compone la pila entera con el pixel mas
   * hostil que trae esta foto —se midio: llega a 240 sobre 255— en el punto
   * donde el velo es mas transparente, que es el borde derecho:
   *
   *   imagen  .58 x 240            sobre negro #06070A  ->  rgb(142,142,143)
   *   velo    .42 de negro encima                       ->  rgb( 82, 82, 83)
   *   blanco del texto contra eso                       ->  7,8:1
   *
   * 7,8:1 no es «pasa por poco»: la WCAG pide 4,5:1 para texto normal y 7:1
   * para su nivel mas exigente. Y ese numero es el del borde derecho, donde no
   * hay texto; sobre la columna de la derecha, que es la que menos velo lleva
   * de las dos, el velo ronda el 60% y el contraste sube por encima de 11:1.
   *
   * AQUI SE ACABA EL MARGEN. Subir mas la foto o abrir mas el velo empieza a
   * comerse el texto de esa columna, asi que el siguiente paso no es tocar
   * estos numeros: es traer una foto mejor.
   *
   * Y LA RESOLUCION YA ES EL CUELLO DE BOTELLA: la foto puesta hoy mide 360x203
   * y la banda la estira a 1440 de ancho, seis veces su tamano. A .42 pasaba
   * como textura; a .58 se ve, y por eso se le nota el desenfoque. Con una
   * imagen de 1600 px de ancho o mas esta misma seccion se veria nitida sin
   * cambiar una linea de CSS.
   */
  opacity: .58;
}

/* Un velo encima para garantizar el contraste del texto pase lo que pase con
   la foto que suban. Sin esto, una imagen clara deja el texto ilegible. */
.lt-ice--con-fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    var(--negro) 0%,
    color-mix(in srgb, var(--negro) 74%, transparent) 55%,
    color-mix(in srgb, var(--negro) 42%, transparent) 100%);
}

@media (max-width: 768px) {
  /* En movil el texto ocupa todo el ancho: el velo se cierra del todo. */
  .lt-ice--con-fondo::after {
    background: color-mix(in srgb, var(--negro) 76%, transparent);
  }
}

/* ==========================================================================
   LA SEMANA, CIUDAD POR CIUDAD
   ==========================================================================
   PHP: inc/estadisticas-ciudad.php · Punto 9 del documento de correcciones.

   Cierra la portada. Se usan los tokens del tema y ni un color suelto: la
   seccion tiene que parecer parte del sitio, no un anadido.
   ========================================================================== */

.lt-semana__titulo {
  margin: 8px 0 10px;
}

.lt-semana__entrada {
  margin: 0 0 var(--e-4, 32px);
  max-width: 62ch;
  color: var(--apagado);
}

/*
 * LA REJILLA DE CIUDADES — 2026-09-01
 * --------------------------------------------------------------------
 * El dueño, viendo Pflugerville sola al final: «si no hay tres, que se
 * alargue la tarjeta hasta el ancho completo».
 *
 * ANTES ERA `auto-fit` Y HUBO QUE RENUNCIAR A EL. `repeat(auto-fit,
 * minmax(300px, 1fr))` reparte solo y es más cómodo de escribir, pero el
 * CSS no puede saber CUANTAS columnas le salieron: `:nth-child(3n + 1)`
 * significa «solo en su fila» con tres columnas y una cosa distinta con
 * dos. Para rellenar el último renglón hay que fijar el número de
 * columnas, y por eso ahora son dos consultas de medios explícitas.
 *
 * Los cortes salen de medir el comportamiento anterior, no de números
 * redondos: con 300 px de mínimo y 24 de hueco, dos columnas necesitan
 * 624 px de contenedor y tres necesitan 948. Puesto en anchos de
 * ventana, eso cae en 660 y 980.
 *
 * A TRES COLUMNAS LA REJILLA TIENE SEIS. Es lo que permite partir el
 * último renglón por la mitad cuando quedan dos tarjetas: con tres
 * columnas de verdad no hay forma de que dos ocupen la fila entera —no
 * se puede repartir 3 entre 2— y quedaría el hueco que se quería evitar.
 * Cada tarjeta ocupa dos de esas seis y se ve exactamente igual que
 * antes.
 */
.lt-semana__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-3, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 660px) and (max-width: 979.98px) {
  .lt-semana__lista { grid-template-columns: repeat(2, 1fr); }

  /* Impar: la última se lleva el renglón. */
  .lt-semana__ciudad:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Y se tumba, por el mismo motivo que a tres columnas: en vertical,
     una tarjeta de 850 px de ancho es casi todo hueco. */
  .lt-semana__ciudad:last-child:nth-child(odd) .lt-semana__tarjeta {
    flex-direction: row;
    align-items: center;
    gap: var(--e-3, 24px);
  }

  .lt-semana__ciudad:last-child:nth-child(odd) .lt-semana__cabeza { flex: none; }

  .lt-semana__ciudad:last-child:nth-child(odd) .lt-semana__cifras {
    flex: 1 1 auto;
    margin-top: 0;
    padding-top: 0;
  }

  .lt-semana__ciudad:last-child:nth-child(odd) .lt-semana__ir {
    margin-left: auto;
    white-space: nowrap;
  }
}

@media (min-width: 980px) {
  .lt-semana__lista { grid-template-columns: repeat(6, 1fr); }
  .lt-semana__ciudad { grid-column: span 2; }

  /* Una sola en el último renglón: se lo queda entero. */
  .lt-semana__ciudad:last-child:nth-child(3n + 1) { grid-column: span 6; }

  /* Dos en el último renglón: media fila cada una. */
  .lt-semana__ciudad:nth-last-child(2):nth-child(3n + 1),
  .lt-semana__ciudad:nth-last-child(2):nth-child(3n + 1) ~ .lt-semana__ciudad {
    grid-column: span 3;
  }

  /*
   * Y LA QUE OCUPA LA FILA ENTERA SE TUMBA.
   *
   * Estirar sin más no bastaba: la tarjeta es una columna —nombre arriba,
   * cifras abajo, enlace al final— y a 1200 px de ancho eso deja un
   * vacío del tamaño de dos tarjetas a la derecha. Se ve peor que la
   * tarjeta estrecha que se quería arreglar.
   *
   * En horizontal las tres partes se reparten el ancho: el nombre a la
   * izquierda, las cifras en medio ocupando lo que sobra, y «Ver la
   * ciudad» pegado a la derecha. La misma información, sin hueco.
   */
  .lt-semana__ciudad:last-child:nth-child(3n + 1) .lt-semana__tarjeta {
    flex-direction: row;
    align-items: center;
    gap: var(--e-4, 32px);
  }

  .lt-semana__ciudad:last-child:nth-child(3n + 1) .lt-semana__cabeza {
    flex: none;
  }

  /* Sin el `margin-top: auto` que en vertical las empujaba al fondo. */
  .lt-semana__ciudad:last-child:nth-child(3n + 1) .lt-semana__cifras {
    flex: 1 1 auto;
    margin-top: 0;
    padding-top: 0;
  }

  .lt-semana__ciudad:last-child:nth-child(3n + 1) .lt-semana__ir {
    margin-left: auto;
    white-space: nowrap;
  }
}

/* La separacion la pone el `gap`; sin esto el margen de lista del tema se
   suma y los huecos salen al doble. */
.lt-semana__ciudad + .lt-semana__ciudad {
  margin-top: 0;
}

.lt-semana__tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--e-2, 12px);
  height: 100%;
  padding: var(--e-3, 20px);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta, 18px);
  background: var(--blanco);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--sombra-1);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.lt-semana__tarjeta:hover,
.lt-semana__tarjeta:focus-visible {
  border-color: var(--marca-borde);
  box-shadow: var(--sombra-2);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .lt-semana__tarjeta { transition: none; }
  .lt-semana__tarjeta:hover,
  .lt-semana__tarjeta:focus-visible { transform: none; }
}

.lt-semana__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2, 12px);
  flex-wrap: wrap;
}

.lt-semana__nombre {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
}

.lt-semana__nuevo {
  font-size: .8rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radio-pildora, 999px);
  background: var(--marca-claro);
  color: var(--marca-oscuro);
  white-space: nowrap;
}

/* Una semana sin altas NO se pinta como una alarma: se apaga y ya. Un rojo
   aqui diria «algo va mal» cuando lo unico que pasa es que fue una semana
   tranquila. */
.lt-semana__nuevo--cero {
  background: transparent;
  border: 1px solid var(--linea);
  color: var(--apagado);
  font-weight: 400;
}

.lt-semana__cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: auto;
  padding-top: var(--e-2, 12px);
}

.lt-semana__cifra {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.lt-semana__numero {
  font-size: 1.05rem;
  font-weight: 700;
  /* Los digitos alineados: en una fila de cifras, el ancho variable del «1»
     hace que las columnas bailen de una tarjeta a otra. */
  font-variant-numeric: tabular-nums;
}

.lt-semana__rotulo {
  font-size: .82rem;
  color: var(--apagado);
}

.lt-semana__mas {
  font-size: .75rem;
  font-weight: 700;
  color: var(--marca);
}

.lt-semana__ir {
  font-size: .85rem;
  font-weight: 700;
  color: var(--marca);
}