/*
 * LO MAS RECIENTE — inc/lo-reciente.php
 *
 * Un carril de tarjetas que se recorre con el dedo y avanza solo cada 3 s.
 *
 * ---------------------------------------------------------------------------
 * SIN CARATULA, CON CIRCULO
 * ---------------------------------------------------------------------------
 * Lo pidio el dueno y ademas es lo unico que funciona aqui: de los ocho tipos
 * que entran en esta tira solo las noticias tienen fotografia. Con caratula, la
 * fila seria una foto y siete rectangulos grises.
 *
 * Con el circulo y su pictograma, las ocho piezas se ven igual de acabadas y
 * ademas se distingue de un vistazo que es cada una — que es justo lo que hace
 * falta en una tira donde se mezcla todo.
 *
 * ---------------------------------------------------------------------------
 * EL CARRIL, SIN JAVASCRIPT DE POR MEDIO
 * ---------------------------------------------------------------------------
 * `overflow-x: auto` + `scroll-snap` dan el arrastre con el dedo, la rueda del
 * raton y el recorrido con el tabulador sin una sola linea de guion. El
 * JavaScript solo anade el avance automatico y las flechas. Si falla, esto
 * sigue siendo un carril usable y no un monton de tarjetas apiladas.
 */

/*
 * ---------------------------------------------------------------------------
 * MARQUESINA, NO CARRUSEL. Lo cambio el dueno al verlo:
 * «que sea una marquesina pasando, no un slider».
 * ---------------------------------------------------------------------------
 * La diferencia no es de estilo: un carrusel salta de tarjeta en tarjeta y se
 * para al final; una marquesina se desliza sin parar y no tiene final. Por eso
 * aqui no hay flechas ni scroll-snap — no hay «siguiente» que pulsar.
 *
 * COMO FUNCIONA: el guion clona la pista y las dos van dentro de la misma caja.
 * La animacion desplaza el conjunto un -50 %, que es exactamente el ancho de la
 * primera copia; cuando termina, la segunda esta justo donde estaba la primera
 * y el reinicio no se ve. Es el mismo truco de la marquesina de logotipos.
 *
 * SIN JAVASCRIPT no hay clon y no hay animacion: queda una fila que se recorre
 * con el dedo. Se ve todo, no se mueve. Aceptable.
 */

.lt-reciente__marquesina {
  position: relative;
  display: flex;
  gap: var(--e-2);
  margin-top: var(--e-4);

  /* Lo que sale de la caja se recorta: es lo que hace que las tarjetas
     aparezcan por un lado y desaparezcan por el otro. */
  overflow: hidden;

  /* Los bordes se desvanecen para que las tarjetas no aparezcan de golpe
     cortadas por el filo de la seccion. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.lt-reciente__pista {
  display: flex;
  flex: 0 0 auto;
  gap: var(--e-2);
  margin: 0;
  padding: 4px 0;
  list-style: none;
}

/*
 * LA TIRA SE DESPLAZA DE VERDAD — 2026-08-19.
 *
 * El duenno: «que se pueda como deslizar... que sea como magnetico, que lo
 * pueda deslizar hacia atras y se devuelva». Un `transform` animado no se puede
 * agarrar; un contenedor que se desplaza, si — y con la inercia del sistema,
 * que es la que se siente «magnetica».
 *
 * Va SIEMPRE, con guion y sin el. Sin guion queda una fila que se recorre con
 * el dedo y no anda sola, que es una degradacion honesta.
 */
.lt-reciente__marquesina {
  overflow-x: auto;
  scrollbar-width: none;
  /* Que arrastrar la tira no dispare el «atras» del navegador, que en iOS y en
     Android se activa deslizando desde el borde. */
  overscroll-behavior-x: contain;
}

.lt-reciente__marquesina::-webkit-scrollbar { display: none; }

/* Con el raton: la mano abierta invita a agarrar, y cerrada confirma que se
   esta arrastrando. En tactil no se ve ninguna de las dos y da igual. */
.lt-reciente__marquesina.lt-reciente--mano { cursor: grab; }
.lt-reciente__marquesina.is-agarrando { cursor: grabbing; }

/* Mientras se arrastra con el raton, nada de seleccionar texto por el camino. */
.lt-reciente__marquesina.is-agarrando,
.lt-reciente__marquesina.is-agarrando * {
  user-select: none;
}

.lt-reciente__pieza {
  /* Ancho fijo: en una marquesina las tarjetas no pueden encoger, o la pista
     mediria menos que su copia y el bucle daria un salto.
     ANGOSTAS, lo pidio el dueno: pasaron de 300 a 244 px. Con la portada
     grande fuera, la tarjeta se acerca al cuadrado y caben mas en pantalla. */
  flex: 0 0 auto;
  width: 244px;
  min-width: 0;
}

@media (max-width: 520px) { .lt-reciente__pieza { width: 216px; } }

/*
 * LA ANIMACION. 60 s para veinticuatro tarjetas es un paso de lectura: se
 * alcanza a leer un titular sin correr detras de el.
 *
 * Solo se mueve con la clase `--anda`, que pone el guion cuando la seccion
 * entra en pantalla. Y se PAUSA al pasar el raton o al entrar el foco con el
 * tabulador: intentar pulsar «Ver completo» en una tarjeta que huye es la
 * forma mas rapida de que alguien deje de intentarlo.
 */
@keyframes lt-reciente-pasa {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/*
 * AQUI ESTABA LA ANIMACION DE CSS, y se apaga cuando el guion toma el mando.
 *
 * Se conserva para el caso raro de que el guion no llegue pero la clase
 * `--lista` si: entonces la tira sigue andando como siempre. En cuanto el guion
 * pone `--mano`, manda el desplazamiento y esto se anula abajo.
 */
.lt-reciente--lista .lt-reciente__pista,
.lt-reciente--lista .lt-reciente__pista + ul {
  animation: lt-reciente-pasa 60s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}

.lt-reciente--mano .lt-reciente__pista,
.lt-reciente--mano .lt-reciente__pista + ul {
  animation: none;
  transform: none;
  will-change: auto;
}

.lt-reciente--anda .lt-reciente__pista,
.lt-reciente--anda .lt-reciente__pista + ul {
  animation-play-state: running;
}

/*
 * PARADA A MANO — 2026-08-19. La pone el boton «Parar» (ver reciente-mandos.js).
 *
 * Va con la clase repetida para ganarle en especificidad a `--anda`, que es
 * quien enciende la animacion. Sin eso, la seccion diria «quieta» y seguiria
 * andando: dos reglas del mismo peso las decide el orden del archivo, y esa
 * carrera se pierde el dia que alguien mueva un bloque.
 */
.lt-reciente.lt-reciente--quieta .lt-reciente__pista,
.lt-reciente.lt-reciente--quieta .lt-reciente__pista + ul {
  animation-play-state: paused;
}

.lt-reciente__marquesina:hover .lt-reciente__pista,
.lt-reciente__marquesina:hover .lt-reciente__pista + ul,
.lt-reciente__marquesina:focus-within .lt-reciente__pista,
.lt-reciente__marquesina:focus-within .lt-reciente__pista + ul {
  animation-play-state: paused;
}

/* ---- La tarjeta ---- */

.lt-reciente__caja {
  position: relative;   /* el ancla de abajo se estira sobre esta caja */
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-width: 0;
  padding: var(--e-3);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  background: var(--blanco);
  transition: border-color .18s ease, transform .18s ease;
}

.lt-reciente__caja:hover,
.lt-reciente__caja:focus-within {
  border-color: var(--marca);
  transform: translateY(-2px);
}

/* ---- El medallon: foto o pictograma, siempre redondo ---- */

/*
 * ---------------------------------------------------------------------------
 * UN CIRCULO, NO UNA PORTADA A LO ANCHO. Lo cambio el dueno al verlo:
 * «quiero que esto tenga un circulo en el icono, que sean como semicuadradas,
 * pero con los bordes redondeados, angostas».
 * ---------------------------------------------------------------------------
 * Antes el pictograma ocupaba un bloque 16:9 del ancho de la tarjeta, para que
 * midiera lo mismo que la foto de una noticia. Funcionaba pero estiraba la
 * tarjeta a lo alto y la dejaba lejos del cuadrado que se pedia.
 *
 * Con el medallon de 56 px las dos clases de tarjeta miden lo mismo IGUAL
 * —porque las dos llevan el mismo medallon— y la tarjeta se acorta lo justo
 * para leerse como una ficha y no como un cartel.
 *
 * LA FOTO TAMBIEN VA REDONDA. Un circulo al lado de un cuadrado en la misma
 * fila se lee como que uno de los dos esta mal; redondos los dos, la fila es
 * una sola cosa. La foto se recorta con object-fit, asi que no se deforma.
 */
/*
 * LA FOTO DE LA NOTICIA, A LO ANCHO. Ultimo ajuste del dueno:
 * «me gustan las tarjetas de los trabajos, esos no los cambies, pero los que
 * son de noticias si coloca la foto que se vea».
 *
 * Dentro del medallon de 56 px la fotografia no se leia: de una noticia sobre
 * un incendio se veia un recorte de humo del tamano de una moneda. Una foto que
 * no se entiende no informa y ademas parece un avatar.
 *
 * CONSECUENCIA ASUMIDA: la tarjeta de noticia es mas alta que la de empleo, y
 * como en una fila todas miden lo que la mas alta, las de empleo ganan un poco
 * de aire abajo. Se acepta: el pictograma del empleo sigue igual —que es lo que
 * se pidio no tocar— y la foto de la noticia por fin se ve.
 */
.lt-reciente__foto {
  display: block;
  width: auto;
  margin: calc( var(--e-3) * -1 ) calc( var(--e-3) * -1 ) 8px;
  border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--niebla);
}

.lt-reciente__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* El medallon del pictograma NO se toca: es el que le gusto al dueno. */
.lt-reciente__circulo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: 56px;
  height: 56px;
  margin: 0 0 2px;
  border-radius: 50%;
  overflow: hidden;

  color: var(--marca);
  background: color-mix(in srgb, var(--marca) 12%, transparent);
}

.lt-reciente__circulo svg { width: 26px; height: 26px; }

/*
 * UN COLOR POR TIPO, y no ocho colores nuevos: son variaciones del azul de la
 * casa salvo dos. El cupon y el evento en ambar porque es el color que el sitio
 * ya usa para lo destacado y lo que caduca. Ocho colores distintos convertirian
 * la tira en un semaforo.
 */
.lt-reciente__caja--empleo .lt-reciente__circulo { color: var(--marca-oscuro, var(--marca)); }

.lt-reciente__caja--cupon  .lt-reciente__circulo,
.lt-reciente__caja--evento .lt-reciente__circulo {
  color: var(--acento, var(--marca));
  background: color-mix(in srgb, var(--acento, var(--marca)) 14%, transparent);
}

.lt-reciente__tipo {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--apagado);
}

.lt-reciente__titulo {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  /* Dos lineas: con la tarjeta angosta, tres titulares seguidos la estiraban
     otra vez a lo alto y volvia a perderse la proporcion cuadrada. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lt-reciente__resumen {
  margin: 0;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--apagado);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lt-reciente__pie {
  margin: auto 0 0;      /* empuja fecha y enlace al fondo de la tarjeta */
  padding-top: var(--e-2);
  font-size: .75rem;
  color: var(--apagado);
}

/*
 * El enlace cubre la tarjeta entera con un ::after estirado, pero el texto «Ver
 * completo» sigue visible: una caja que se pulsa sin decirlo no la pulsa nadie,
 * y un lector de pantalla necesita el texto del enlace de todas formas.
 */
.lt-reciente__enlace {
  align-self: flex-start;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--marca);
  text-decoration: none;
}

.lt-reciente__enlace::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radio-tarjeta);
}

.lt-reciente__enlace:hover { text-decoration: underline; }

.lt-reciente__enlace:focus-visible { outline: none; }
.lt-reciente__caja:focus-within { outline: 2px solid var(--marca); outline-offset: 3px; }

/* ---- Las flechas (las crea el guion) ---- */

.lt-reciente__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;

  display: none;         /* en movil manda el dedo: ver la consulta de abajo */
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;

  border: 1px solid var(--linea);
  border-radius: 50%;
  background: var(--blanco);
  color: var(--tinta);
  cursor: pointer;
  box-shadow: var(--sombra-2, 0 6px 18px rgba(0, 0, 0, .12));
  transition: border-color .18s ease, color .18s ease;
}

.lt-reciente__flecha:hover,
.lt-reciente__flecha:focus-visible { border-color: var(--marca); color: var(--marca); }

.lt-reciente__flecha--antes   { left: calc( var(--e-3) * -1 ); }
.lt-reciente__flecha--despues { right: calc( var(--e-3) * -1 ); }

@media (min-width: 980px) {
  .lt-reciente__flecha { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .lt-reciente__caja { transition: none; }
  .lt-reciente__caja:hover { transform: none; }
  /* Sin el guion no hay animacion, pero la fila sigue siendo desplazable con
     el dedo; que ese desplazamiento tampoco sea suave. */
  .lt-reciente__marquesina { scroll-behavior: auto; }
}

/* ================================================================== */
/* SOBRE FONDO NOCHE                                                   */
/* ================================================================== */

/*
 * La seccion paso a fondo azul oscuro a peticion del dueno. Las tarjetas siguen
 * siendo blancas —es lo que las hace legibles y lo que ya le gustaba— asi que
 * aqui solo hay que arreglar dos cosas: el desvanecido de los bordes y el borde
 * de las propias tarjetas.
 */

/*
 * EL DESVANECIDO ES UNA MASCARA, no un degradado de color, asi que funciona
 * igual sobre cualquier fondo: recorta la opacidad, no pinta encima. No hay
 * nada que cambiar — se anota para que nadie intente «arreglarlo» pintando un
 * degradado azul encima, que es lo que se rompe al cambiar de fondo.
 */

/* Sobre el azul oscuro, el borde gris claro de la tarjeta desaparece y las
   tarjetas se ven flotando sin canto. Se les da un canto propio. */
.lt-seccion--noche .lt-reciente__caja {
  border-color: color-mix(in srgb, var(--blanco) 14%, transparent);
}

.lt-seccion--noche .lt-reciente__caja:hover,
.lt-seccion--noche .lt-reciente__caja:focus-within {
  border-color: color-mix(in srgb, var(--blanco) 42%, transparent);
}

/*
 * ---------------------------------------------------------------------------
 * LOS TITULOS DE LAS TARJETAS, EN TINTA. ESTO ES UN ARREGLO, NO UN ADORNO.
 * ---------------------------------------------------------------------------
 * Al pasar la seccion a fondo noche, los titulares de las tarjetas
 * DESAPARECIERON. El motivo: `.lt-seccion--noche` pinta sus encabezados en
 * blanco —correcto sobre el azul— pero las tarjetas de esta tira siguen siendo
 * BLANCAS. Blanco sobre blanco.
 *
 * Es el mismo fallo que ya costo un disgusto en la aplicacion movil y que esta
 * escrito en CLAUDE.md: color de tema claro sobre superficie oscura, o al
 * reves, deja el texto invisible sin que nada avise.
 *
 * La regla general: TODO lo que va dentro de una tarjeta blanca se pinta con
 * los colores de fondo claro, aunque la seccion que la contiene sea oscura. La
 * tarjeta manda sobre la seccion porque es la superficie que hay detras del
 * texto.
 */
/*
 * ESTAS REGLAS SON PARA CUANDO LA SECCION VA EN OSCURO.
 *
 * Y VUELVE A IR EN OSCURO (2026-08-13, mismo dia). Se probo en hueso y luego
 * en blanco; el dueno lo quiso azul «para que quede un poco mas intercalado».
 * El recorrido queda hueso -> azul -> hueso -> azul, que alterna limpio.
 *
 * ESTAS REGLAS SON LAS QUE HACEN QUE FUNCIONE. Sobre azul, los titulos de las
 * tarjetas se volvian blancos sobre tarjeta blanca: invisibles. Por eso no se
 * borraron cuando la seccion paso a claro, y por eso hoy no hubo que
 * redescubrir nada al volver.
 */
.lt-seccion--noche .lt-reciente__titulo,
.lt-seccion--noche .lt-reciente__titulo a { color: var(--tinta); }

.lt-seccion--noche .lt-reciente__resumen,
.lt-seccion--noche .lt-reciente__tipo,
.lt-seccion--noche .lt-reciente__pie { color: var(--apagado); }

.lt-seccion--noche .lt-reciente__enlace { color: var(--marca); }

/* ================================================================== */
/* LA CABECERA: CENTRADA, MAS PEQUENA, Y LA SECCION MAS CORTA          */
/* ================================================================== */

/*
 * Lo pidio el dueno viendo la pagina entera: «que no sea tan grande tampoco,
 * pero me gustan las tarjetas como estan ahora. Acorta un poco, pon el texto
 * ahi un poco mas chiquito pero centrado».
 *
 * Las TARJETAS no se tocan — es lo que le gusto. Lo que se recorta es el aire y
 * el tamano del titular, que es lo que hacia la seccion desproporcionada: un
 * titular de 4 rem para una tira de fichas pequenas.
 *
 * Y va CENTRADA, mientras que la vitrina que viene justo debajo pasa a estar
 * alineada a la izquierda (ver vitrina.css). Dos cabeceras centradas seguidas
 * cargaban demasiado el centro de la portada, que fue justo lo que el dueno
 * noto al verlas una encima de otra.
 */
.lt-reciente {
  /* Dos tercios del aire de una seccion normal. */
  padding-top: calc( var(--seccion-y) * .62 );
  padding-bottom: calc( var(--seccion-y) * .62 );
}

.lt-reciente .lt-cabeza-seccion {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lt-reciente .lt-cabeza-seccion__texto {
  max-width: 54ch;
  min-width: 0;
}

/* El titular baja de la escala grande de seccion a una intermedia: sigue
   mandando sobre las tarjetas sin competir con el hero de arriba. */
.lt-reciente .lt-cabeza-seccion__texto h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
}

.lt-reciente .lt-bajada {
  margin-left: auto;
  margin-right: auto;
  font-size: .975rem;
}

/* El filete del eyebrow va a un lado cuando el bloque esta centrado; se
   centra con el resto. */
.lt-reciente .lt-cabeza-seccion__ante,
.lt-reciente .lt-etiqueta {
  justify-content: center;
}

/* ==================================================================== */
/* TARJETAS HORIZONTALES, SECCION ANGOSTA, DIFUMINADO CORTO — 2026-08-13 */
/* ==================================================================== */

/*
 * Tres cosas que pidio el dueno viendo la seccion ya en produccion:
 * «las tarjetas no deberian de ser verticales, sino mas horizontales», «la
 * seccion debe ser mucho mas angosta» y «que el difuminado no sea tan grande».
 */

/* --- 1. LA SECCION, MAS ANGOSTA -------------------------------------- */

/*
 * DE BORDE A BORDE, como el carrusel del directorio.
 *
 * Se probo acotada a 1040px centrada y el dueno lo vio: «no quiero que sea tan
 * corto sino que llegue al borde como el preview del directorio». Tenia razon
 * —una marquesina cortada a la mitad de la pantalla parece que se quedo sin
 * contenido, cuando lo que hace es justo lo contrario: seguir—.
 *
 * Se sale del contenedor con margenes negativos hasta el ancho de la ventana.
 * El titulo y el subtitulo NO se mueven: siguen dentro del contenedor, que es
 * lo que mantiene la seccion alineada con el resto de la portada.
 */
.lt-reciente .lt-reciente__marquesina {
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* --- 2. EL DIFUMINADO DE LOS BORDES, CORTO --------------------------- */

/*
 * Era del 4% a cada lado. Sobre 1040px eso son ~42px de tarjeta comiendose,
 * y una tarjeta horizontal es mas ancha: el titulo entraba en la niebla antes
 * de poder leerse. Al 1.5% avisa de que hay mas contenido sin tapar texto.
 */
.lt-reciente .lt-reciente__marquesina {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.2%, #000 98.8%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 1.2%, #000 98.8%, transparent 100%);
}

/* --- 3. LAS TARJETAS, HORIZONTALES ----------------------------------- */

/*
 * Antes: 244px de ancho con la foto arriba y el texto debajo. La tarjeta era
 * una columna alta y la seccion crecia hacia abajo.
 *
 * Ahora: la foto (o el icono) a la IZQUIERDA en columna fija, y el texto a la
 * derecha. La tarjeta se lee en una linea de barrido —imagen, tipo, titular—
 * que es como se lee una fila de resultados, y la seccion baja de altura.
 */
.lt-reciente .lt-reciente__pieza { width: 400px; }

.lt-reciente .lt-reciente__pieza > * {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: start;
  gap: 0 14px;
  padding: 14px;
  height: 100%;
}

/* La imagen y el panel del icono: columna izquierda, alto completo. */
.lt-reciente .lt-reciente__pieza .lt-reciente__foto,
.lt-reciente .lt-reciente__pieza .lt-reciente__circulo {
  grid-column: 1;
  grid-row: 1 / span 5;
  width: 132px;
  height: 100%;
  min-height: 116px;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  align-self: stretch;
}

.lt-reciente .lt-reciente__pieza .lt-reciente__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * SIN FOTO: UN CIRCULO, NO UN CUADRADO.
 *
 * Al pasar las tarjetas a horizontales, el icono heredo la caja de la imagen y
 * quedo dentro de un cuadrado gris del alto entero. El dueno lo vio y lo dijo:
 * «tiene que ser el icono con un circulo como estaba antes, porque esta el
 * cuadrado con el icono».
 *
 * Vuelve a ser un circulo, centrado en la columna izquierda. La columna sigue
 * midiendo lo mismo que la foto —eso es lo que mantiene todas las tarjetas
 * alineadas— pero el circulo ya no la llena: flota en el medio.
 */
.lt-reciente .lt-reciente__pieza .lt-reciente__circulo {
  display: grid;
  place-items: center;
  place-self: center;
  width: 72px;
  height: 72px;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--marca) 13%, var(--hueso, #F6F3EE));
}

.lt-reciente .lt-reciente__pieza .lt-reciente__circulo svg {
  width: 34px;
  height: 34px;
  color: var(--marca);
}

/* Todo el texto, en la columna derecha. */
.lt-reciente .lt-reciente__pieza .lt-reciente__tipo,
.lt-reciente .lt-reciente__pieza .lt-reciente__titulo,
.lt-reciente .lt-reciente__pieza .lt-reciente__resumen,
.lt-reciente .lt-reciente__pieza .lt-reciente__pie,
.lt-reciente .lt-reciente__pieza .lt-reciente__enlace {
  grid-column: 2;
  margin-inline: 0;
}

.lt-reciente .lt-reciente__pieza .lt-reciente__titulo {
  font-size: .98rem;
  line-height: 1.25;
  margin: 4px 0 0;
}

/* El resumen, a dos lineas: mas y la tarjeta vuelve a crecer hacia abajo. */
.lt-reciente .lt-reciente__pieza .lt-reciente__resumen {
  margin: 6px 0 0;
  font-size: .86rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lt-reciente .lt-reciente__pieza .lt-reciente__pie { margin: 8px 0 0; }

/* --- Movil: la tarjeta horizontal no cabe, vuelve a apilarse ---------- */

@media (max-width: 640px) {
  .lt-reciente .lt-reciente__pieza { width: 300px; }

  .lt-reciente .lt-reciente__pieza > * {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 0 12px;
  }

  .lt-reciente .lt-reciente__pieza .lt-reciente__foto,
  .lt-reciente .lt-reciente__pieza .lt-reciente__circulo {
    width: 96px;
    min-height: 96px;
  }
}

/* --- SOLO LAS TARJETAS SIN FOTO: circulo arriba a la izquierda -------- */

/*
 * El dueno, viendo una tarjeta de empleo: «siento que el circulo debe quedar
 * arriba a la izquierda y el texto abajo, o sea que no se acorrale hacia la
 * derecha, pero esto solo para las ofertas de trabajo».
 *
 * Tenia razon y el motivo es real: una foto de 132px paga su columna porque
 * llena el alto entero. Un circulo de 72px no —deja hueco arriba y abajo— y a
 * cambio le roba a la derecha 146px de ancho al texto, que queda apretado en
 * media tarjeta. La foto justifica la columna; el circulo no.
 *
 * Asi que las tarjetas SIN foto pasan a una sola columna: el circulo arriba a
 * la izquierda y el texto debajo, a lo ancho de la tarjeta entera. Las que SI
 * tienen foto no se tocan.
 *
 * `:has()` es lo que permite distinguirlas sin cambiar el PHP. Si un navegador
 * viejo no lo entiende, esa tarjeta se queda con el reparto de dos columnas,
 * que es exactamente como se veia hasta ahora: se pierde el retoque, no la
 * tarjeta.
 */
.lt-reciente .lt-reciente__pieza > *:has(.lt-reciente__circulo) {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

.lt-reciente .lt-reciente__pieza > *:has(.lt-reciente__circulo) .lt-reciente__circulo {
  grid-column: 1;
  grid-row: auto;
  place-self: start;
  width: 56px;
  height: 56px;
  margin-bottom: 10px;
}

.lt-reciente .lt-reciente__pieza > *:has(.lt-reciente__circulo) .lt-reciente__circulo svg {
  width: 26px;
  height: 26px;
}

/* El texto recupera el ancho completo de la tarjeta. */
.lt-reciente .lt-reciente__pieza > *:has(.lt-reciente__circulo) .lt-reciente__tipo,
.lt-reciente .lt-reciente__pieza > *:has(.lt-reciente__circulo) .lt-reciente__titulo,
.lt-reciente .lt-reciente__pieza > *:has(.lt-reciente__circulo) .lt-reciente__resumen,
.lt-reciente .lt-reciente__pieza > *:has(.lt-reciente__circulo) .lt-reciente__pie,
.lt-reciente .lt-reciente__pieza > *:has(.lt-reciente__circulo) .lt-reciente__enlace {
  grid-column: 1;
}

/* --- EL ICONO, SIEMPRE EN AZUL DE MARCA ------------------------------ */

/*
 * SE DIBUJA CON `stroke="currentColor"`, asi que hereda el color del texto.
 * Dentro de la seccion oscura ese color es BLANCO, y el circulo tambien:
 * trazo blanco sobre fondo blanco. El icono estaba en el HTML —comprobado en
 * el codigo servido, con su <svg> y sus <path>— y aun asi no se veia.
 *
 * Es el mismo fallo que ya salio hoy con los titulos de estas tarjetas, y por
 * eso se fija el color aqui en vez de dejarlo heredar: el circulo es una
 * superficie clara SIEMPRE, este la seccion en claro o en oscuro, asi que su
 * contenido no puede depender del tema de alrededor.
 *
 * Se sube la especificidad a proposito: hay reglas de la seccion oscura que
 * pintan de blanco todo lo que hay dentro y ganarian a un selector corto.
 */
.lt-reciente .lt-reciente__pieza .lt-reciente__circulo svg,
.lt-seccion--noche .lt-reciente .lt-reciente__pieza .lt-reciente__circulo svg {
  color: var(--marca);
  stroke: var(--marca);
}

/* --- SIN RESUMEN EN LAS TARJETAS ------------------------------------- */

/*
 * El dueno, viendolas en pantalla: «estaban mejor sin la desc, quita la desc
 * pero pon los iconos».
 *
 * Y se le entiende: en una marquesina que pasa de largo nadie lee dos lineas
 * de resumen. Lo que se alcanza a leer es el tipo, el titular y la fecha. El
 * resumen solo alargaba la tarjeta y empujaba la fecha y el enlace hacia
 * abajo, que es justo lo unico accionable que hay.
 *
 * Se OCULTA, no se borra de la plantilla: el texto sigue en el HTML para los
 * lectores de pantalla y para los buscadores, que si lo aprovechan.
 */
.lt-reciente .lt-reciente__pieza .lt-reciente__resumen {
  display: none;
}

/*
 * EL NEGOCIO ES LA EXCEPCION, Y NO CONTRADICE LA REGLA DE ARRIBA. 2026-08-15.
 *
 * El dueno pidio esto: «quiero que los negocios tengan una breve descripcion,
 * pero muy breve, muy al grano». Y antes habia pedido justo lo contrario para
 * las demas: quitar el resumen de la marquesina.
 *
 * Las dos peticiones son compatibles porque NO ES EL MISMO TEXTO. Lo que se
 * oculto arriba son dos lineas de prosa recortadas a mitad de frase —el arranque
 * de una noticia o de una vacante—, que alargaban la tarjeta y empujaban la
 * fecha y el enlace fuera de la vista. Lo que se ensena aqui es UNA linea de
 * datos: la categoria del negocio y su ciudad («Autolavado & detallado ·
 * Austin»). Lo arma inc/lo-reciente.php, no sale del texto de la ficha, y por
 * construccion no puede crecer ni quedar cortada.
 *
 * De hecho es lo unico que distingue una tarjeta de negocio de otra: el nombre
 * de un negocio no dice a que se dedica, y la fecha de alta no le importa a
 * nadie.
 */
.lt-reciente .lt-reciente__pieza[data-tipo="lt_negocio"] .lt-reciente__resumen {
  display: block;
  margin-top: 2px;
  /* Una linea y basta: si algun dia una categoria fuera larguisima, se recorta
     con puntos suspensivos en vez de partir la tarjeta en dos. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sin el resumen la tarjeta encoge: se le devuelve algo de aire al titular. */
.lt-reciente .lt-reciente__pieza .lt-reciente__titulo {
  margin-top: 6px;
}

.lt-reciente .lt-reciente__pieza .lt-reciente__pie {
  margin-top: 12px;
}

/* ==================================================================== */
/* LOS MANDOS DE LA MARQUESINA — filtro y velocidad                      */
/* ==================================================================== */

.lt-reciente__mandos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin: 0 auto 26px;
  padding: 0 20px;
}

/*
 * TRES COLUMNAS, NO `flex-wrap` — 2026-08-19.
 *
 * El duenno: «que quede equilibrado como tres: todo, noticia y evento, y abajo
 * negocio y empleo».
 *
 * Con `flex-wrap` el corte lo decidia el ancho de cada pildora, asi que la
 * segunda fila caia donde cupiera y se movia segun el rotulo mas largo. Con
 * tres columnas iguales, cinco pildoras dan siempre 3 y 2.
 */
.lt-reciente__filtro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 420px);
}

.lt-reciente__filtro .lt-reciente__chip {
  justify-content: center;
  width: 100%;
}

/*
 * Las dos de la ultima fila, centradas.
 *
 * `:nth-last-child(2)` con `:nth-child(4)` = es la cuarta de cinco, o sea la
 * primera de la fila corta. Se la corre media columna y la que le sigue la
 * acompana. Sin esto quedan pegadas a la izquierda con un hueco a la derecha,
 * que es exactamente el desequilibrio que se venia a corregir.
 */
.lt-reciente__filtro .lt-reciente__chip:nth-child(4):nth-last-child(2) {
  grid-column: 1 / 2;
  transform: translateX(calc(50% + 4px));
}

.lt-reciente__filtro .lt-reciente__chip:nth-child(5):nth-last-child(1) {
  transform: translateX(calc(50% + 4px));
}

.lt-reciente__chip,
.lt-reciente__velocidad {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1.5px solid color-mix(in srgb, var(--blanco) 26%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--blanco);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

/*
 * EL ICONO DEL BOTON DE ACELERAR.
 *
 * Va en `em` y no en pixeles para que crezca y encoja con el texto del boton,
 * que ya es pequeno (.78rem) y cambia de tamano entre movil y escritorio.
 * `currentColor` en el SVG hace el resto: el icono se tine solo cuando el boton
 * cambia de color al pasar el raton o al quedar pulsado.
 */
.lt-reciente__velocidad-icono {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  display: block;
}

.lt-reciente__chip:hover,
.lt-reciente__velocidad:hover {
  border-color: var(--blanco);
  background: color-mix(in srgb, var(--blanco) 10%, transparent);
}

.lt-reciente__chip:focus-visible,
.lt-reciente__velocidad:focus-visible {
  outline: 2px solid var(--blanco);
  outline-offset: 2px;
}

/* El elegido se invierte: blanco solido. Se distingue por FORMA y por color,
   no solo por color — quien no distingue tonos tambien tiene que verlo. */
.lt-reciente__chip.is-activo {
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--noche);
}

.lt-reciente__velocidad[aria-pressed="true"] {
  background: var(--marca);
  border-color: var(--marca);
}

.lt-reciente__velocidad span[aria-hidden="true"] { font-size: .68rem; letter-spacing: -.1em; }

/*
 * LA VELOCIDAD.
 * La tira normal tarda 60s en dar la vuelta. Acelerada, 22s. No se pone mas
 * rapida: por debajo de ~20s los titulares dejan de poder leerse y la tira
 * pasa de ser util a ser un adorno mareante.
 */
.lt-reciente--rapida .lt-reciente__pista,
.lt-reciente--rapida .lt-reciente__pista + ul {
  animation-duration: 22s;
}

/* Una pieza filtrada fuera desaparece de la tira. Se oculta en la copia
   clonada tambien, si no las dos mitades dejan de medir lo mismo y el bucle
   da un salto visible al reiniciar. */
.lt-reciente__pieza[hidden] { display: none; }

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

/* ==================================================================== */
/* LA TARJETA ENTERA ES PULSABLE — 2026-08-14                            */
/* ==================================================================== */

/*
 * EL PROBLEMA, VISTO EN UN TELEFONO
 * Los enlaces estaban bien —apuntan a /empleos/…, /eventos/…, /negocios/…— pero
 * lo unico pulsable era el texto «Ver completo»: unos 90x20 px. Y la tira se
 * mueve. Acertarle con el dedo a un objetivo pequeno y en movimiento es, en la
 * practica, imposible: el dueno concluyo que las tarjetas «no redirigen a
 * ningun lado».
 *
 * LA SOLUCION
 * El enlace que ya existe se estira sobre TODA la tarjeta con un pseudo-
 * elemento. No se anade un segundo enlace —eso obligaria a un lector de
 * pantalla a leer el mismo destino dos veces— sino que se agranda el que hay.
 *
 * Es el patron de «enlace estirado»: el <a> sigue siendo el mismo nodo, con su
 * texto y su destino; solo crece su area de pulsacion.
 */
.lt-reciente__pieza > * { position: relative; }

/*
 * EL ENLACE ESTIRADO POR CSS NO FUNCIONO — se hace en JavaScript.
 *
 * Se probo con `::after` y con `::before` sobre `.lt-reciente__enlace`, los dos
 * con `inset: 0` y el contenedor en `position: relative`. En ninguno de los dos
 * casos el centro de la tarjeta llego a ser pulsable: medido con
 * `elementFromPoint` en tres alturas, siempre «sin enlace».
 *
 * En vez de seguir probando variantes a ciegas, el clic se delega en
 * assets/js/reciente-mandos.js: pulsar en cualquier punto de la tarjeta activa
 * su enlace. Es una linea, es deterministico y no depende de como resuelva la
 * cascada el pseudo-elemento.
 *
 * El <a> real sigue ahi con su texto y su destino, asi que el teclado y los
 * lectores de pantalla funcionan igual que antes: esto solo agranda el area
 * para el dedo.
 */
/* El titulo queda por encima del area estirada para poder seleccionarlo. */
.lt-reciente .lt-reciente__titulo,
.lt-reciente .lt-reciente__tipo,
.lt-reciente .lt-reciente__pie { position: relative; z-index: 2; }

/* Se nota que es pulsable antes de tocarla. */
.lt-reciente .lt-reciente__pieza > *:hover { cursor: pointer; }

/* ==================================================================== */
/* LOS MANDOS EN MOVIL: TODOS A LA VISTA Y CENTRADOS — 2026-08-14        */
/* ==================================================================== */

/*
 * Se probo la fila deslizante y el dueno la descarto: «quiero que los filtros
 * se vean todo de una pero que esten centrados». Y tiene razon — un filtro que
 * hay que deslizar para descubrir es un filtro que la mayoria no ve.
 *
 * Se envuelven en varias lineas, centradas, con las pildoras mas compactas
 * para que quepan en menos filas. En 375px entran los cinco filtros en dos
 * lineas y el boton de acelerar debajo.
 */
@media (max-width: 720px) {
  .lt-reciente__mandos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding-inline: 16px;
    overflow: visible;
  }

  .lt-reciente__filtro {
    gap: 7px;
    width: 100%;
  }

  .lt-reciente__chip,
  .lt-reciente__velocidad {
    flex: none;
    padding: 7px 13px;
    font-size: .7rem;
    letter-spacing: .05em;
  }

  /* El de acelerar en su propia linea: no es un filtro, es otra cosa. */
  .lt-reciente__velocidad {
    flex-basis: 100%;
    justify-content: center;
    margin-top: 2px;
  }
}

/* ==================================================================== */
/* EL CIRCULO DEL ICONO NO SE ESTIRA — 2026-08-14                        */
/* ==================================================================== */

/*
 * En movil salia como un ovalo alto. La causa: la tarjeta es flex en columna y
 * estira a sus hijos para llenar el ancho; el circulo tenia ancho fijo pero el
 * alto se lo comia el estirado.
 *
 * `aspect-ratio: 1` mas `flex: none` lo clavan: ni se estira ni se aplasta,
 * mida lo que mida la tarjeta.
 */
.lt-reciente .lt-reciente__pieza .lt-reciente__circulo {
  flex: none;
  aspect-ratio: 1 / 1;
  align-self: flex-start;
}

@media (max-width: 720px) {
  .lt-reciente .lt-reciente__pieza .lt-reciente__circulo {
    width: 56px;
    height: 56px;
    min-height: 56px;
    max-height: 56px;
  }
}


/* ==========================================================================
 * LA TARJETA DE UN NEGOCIO ENSENA UN LOGO, NO UNA FOTO — 2026-08-15
 *
 * PHP: inc/lo-reciente.php (los negocios con portada entran en la marquesina).
 *
 * EL PROBLEMA, MEDIDO. La columna de la imagen es de 132 px de ancho por el
 * alto entero de la tarjeta —o sea, VERTICAL— y la imagen se recorta al centro
 * con `cover`. Eso esta bien para una foto: cualquier trozo del centro de una
 * foto sigue siendo la foto. Con un logo no: las portadas del directorio son
 * 16:9, asi que del logo de 71 PPF Studio solo se veia «PP / STUD». La marca,
 * que es justo lo unico que la tarjeta tenia que comunicar, quedaba cortada.
 *
 * LA SOLUCION NO ES UN CIRCULO. Fue lo primero que se penso —«ponerlo
 * circularmente para que no se corte»— pero un circulo inscrito en esa caja
 * recorta MAS, no menos: se queda con el cuadrado central y luego le come las
 * esquinas. Con un logo apaisado eso borra la mitad del nombre.
 *
 * Lo que hace falta es lo contrario: que la imagen quepa ENTERA. `contain` la
 * mete completa dentro de la caja y deja franjas arriba y abajo; esas franjas
 * se pintan con el mismo papel de la tarjeta, asi que se leen como aire
 * alrededor del logo y no como un hueco.
 * ========================================================================== */

.lt-reciente .lt-reciente__pieza[data-tipo="lt_negocio"] .lt-reciente__foto {
  background: var(--hueso, #F6F3EE);
}

.lt-reciente .lt-reciente__pieza[data-tipo="lt_negocio"] .lt-reciente__foto img {
  object-fit: contain;
  /*
   * Un respiro para que el logo no toque los bordes de la caja. Sin esto, un
   * logo que llega justo al borde de su lienzo se ve pegado al filete de la
   * tarjeta y parece mal recortado aunque este entero.
   */
  padding: 8px;
}