/* ====================================================================
 * LA VITRINA — los flyers de publicidad, en un carril que se abre
 * PHP: inc/vitrina.php · JS: assets/js/vitrina.js
 * ==================================================================== */

/*
 * QUE ES ESTO
 *
 * La fila de anuncios pagados de la portada. Historia corta, porque explica la
 * forma actual:
 *
 *   1. Un televisor solo. 940px de alto para ensenar UN anuncio: el dueno dijo
 *      tres veces «lo sigo viendo muy vacio».
 *   2. Un MURO de cuatro pantallas verticales pasando carteles. Llenaba la
 *      seccion y seguia teniendo el fallo de fondo: se veia y no se podia hacer
 *      NADA con el. (Su CSS sigue mas abajo, marcado [sin uso].)
 *   3. Lo de ahora, y son sus palabras: «que en vez de que queden dos columnas
 *      y cuatro pantallas, sea una sola y sea como un slider hacia la derecha,
 *      que pase solo y tenga como el flyer mas el texto y el boton de call to
 *      action. Siento que queda un poco mas organizado».
 *
 * MEDIDO A 390px antes de tocar nada: el muro ocupaba 1056px de alto para
 * ensenar cuatro carteles de 160px de ancho, ilegibles, sin nombre y sin
 * ninguna accion posible.
 */

.lt-vitrina {
  /*
   * PADDING SUPERIOR CORTO A PROPOSITO.
   *
   * Encima va el carril del directorio, que TAMBIEN es noche. Con el padding
   * completo en las dos, el empalme era una banda oscura de casi 200px sin nada
   * dentro — el dueno lo vio: «se ve mas vacia aqui cuando se conecta con esta».
   * Dos secciones del mismo color no necesitan separarse: necesitan encadenarse.
   */
  padding-block: clamp(24px, 3vw, 44px) clamp(48px, 7vw, 88px);
  overflow: hidden;
}

/* --- La cabecera ---------------------------------------------------- */

/*
 * LA CABECERA VA CENTRADA — decision del dueno.
 *
 * Su razonamiento: «arriba, en el hero, el titulo ya esta recargado a la
 * izquierda; siento que esto deberia ir en la mitad para mantener un equilibrio
 * y que no todo quede recargado a la izquierda».
 *
 * Una pagina donde TODAS las secciones apoyan el peso en el mismo borde se lee
 * monotona por mucho que cada una este bien resuelta. Y al contenido le va
 * bien: debajo hay cuatro aparatos en fila simetrica, asi que una cabecera
 * centrada los corona en vez de pelearse con ellos.
 */
.lt-vitrina__cabeza {
  text-align: center;
  margin-bottom: clamp(20px, 2.5vw, 34px);
}

/*
 * Los topes de ancho siguen puestos —el titular a 16ch y la bajada a 52ch, que
 * es lo que hace que las lineas se lean— pero con margenes automaticos para que
 * el bloque quede centrado en vez de pegado al borde izquierdo.
 */
.lt-vitrina__cabeza .lt-vitrina__titulo,
.lt-vitrina__cabeza .lt-vitrina__bajada {
  margin-inline: auto;
}

/*
 * TITULAR GRANDE — el techo sube de 3rem a 4.5rem (48px -> 72px).
 *
 * Con el muro ya montado, la cabecera se quedaba corta al lado de cuatro
 * aparatos: el titular pesaba menos que la fila de anuncios que anuncia. A 72px
 * manda, que es lo que tiene que hacer un titular de seccion.
 *
 * El tramo variable es 6vw y no 8vw: con 8, entre 900 y 1200px el titulo crecia
 * mas rapido que el sitio disponible y se comia la columna de la derecha —donde
 * viven la marca de publicidad y el enlace— hasta tirarla a la linea de abajo.
 * Con 6vw las dos piezas caben en la misma fila en todo el recorrido.
 *
 * El suelo sube a 2.5rem (40px) para el telefono, que era la otra peticion.
 */
.lt-vitrina__titulo {
  margin: 6px 0 0;
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo, 700);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.02;
  color: var(--blanco, #FFF);
  /*
   * 22ch — EL TITULAR SE EXPANDE A DOS LINEAS, Y EL NUMERO ESTA MEDIDO.
   *
   * Con 16ch el ingles («THE BEST OF TEXAS IS RIGHT HERE», 31 caracteres) caia
   * en TRES lineas y se veia encogido; el espanol, con 27, entraba en dos. Se
   * probaron seis topes contando las lineas reales en los dos idiomas:
   *
   *      16ch -> es 2 lineas · en 3      (el problema)
   *      20ch -> es 2 · en 2             (el minimo que arregla los dos)
   *      22ch -> es 2 · en 2             (elegido: holgado entre los limites)
   *      26ch -> es 1 · en 2             (el espanol ya se colapsa a una linea)
   *
   * Se elige 22 y no 20 para que quede margen si el titular cambia de texto, y
   * no 24 porque a partir de ahi el espanol empieza a acercarse al colapso.
   */
  max-width: 22ch;
  /*
   * `balance` reparte las palabras entre las dos lineas en vez de llenar la
   * primera y dejar dos palabras huerfanas en la segunda. En un titular
   * CENTRADO eso se nota mucho: sin balance, «RIGHT HERE» quedaba solo debajo
   * de una linea el doble de larga y la simetria se perdia.
   */
  text-wrap: balance;
}

.lt-vitrina__bajada {
  margin: 14px 0 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, .76);
  line-height: 1.6;
}

/*
 * LA MARCA DE «PUBLICIDAD», pequena y en mayusculas espaciadas, como en una
 * revista. Es obligatoria —la FTC exige que un contenido pagado se identifique
 * como tal— y es lo que separa un escaparate honesto de publicidad disfrazada
 * de recomendacion.
 *
 * Lleva ademas la cuenta de negocios, que es un dato REAL sacado de la propia
 * biblioteca: dice de una vez que esto es publicidad y cuantos hay.
 */
/*
 * Va CENTRADA y justo encima del muro que identifica, con un filete a cada lado
 * para que se lea como el rotulo de una vitrina y no como una nota suelta.
 */
/*
 * EL COLOR SUBE A --niebla, Y ES UNA CORRECCION DE CONTRASTE MEDIDA.
 *
 * Estaba en rgba(255,255,255,.42). Sobre --noche (#071324) eso se pinta como
 * #6F7680 y da 4,06:1 — POR DEBAJO del 4,5:1 que exige la casa. Y no es un
 * texto decorativo cualquiera: es la marca de publicidad que obliga la FTC. Una
 * advertencia legal que no se lee no advierte de nada.
 *
 * --niebla (#B9C6D6) es el token de «texto secundario sobre oscuro» del tema y
 * da 10,7:1 sobre noche. Sigue siendo gris azulado y sigue leyendose como una
 * nota pequena, pero ahora se lee.
 */
.lt-vitrina__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 clamp(16px, 2vw, 26px);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--niebla, #B9C6D6);
}

/* Los dos filetes. Se dibujan con pseudoelementos: cero marcado extra. */
.lt-vitrina__marca::before,
.lt-vitrina__marca::after {
  content: '';
  height: 1px;
  /* Acotados para que en una pantalla ancha no se conviertan en dos rayas
     kilometricas que pesan mas que el rotulo. */
  width: min(120px, 14vw);
  background: rgba(255, 255, 255, .18);
}

/* --- El enlace para anunciarse -------------------------------------- */

/*
 * PEQUENO A PROPOSITO. Era un boton de WhatsApp en pildora azul que pesaba
 * tanto como el titular y convertia la seccion en un anuncio de la propia
 * pagina. Ahora la seccion presume del escaparate y la puerta para entrar es un
 * enlace discreto: quien llega hasta el es porque le gusto lo que vio.
 */
/* Debajo del muro y centrado: primero el escaparate, despues la puerta. */
.lt-vitrina__invita {
  margin: clamp(24px, 3vw, 40px) 0 0;
  text-align: center;
}

.lt-vitrina__enlace {
  display: inline-block;
  /* rgba(255,255,255,.62) sobre --noche = 7,5:1. Comprobado. */
  color: rgba(255, 255, 255, .62);
  font-size: .88rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  padding-bottom: 2px;
  transition: color var(--transicion), border-color var(--transicion);
  /* Ancla para la zona pulsable de abajo. */
  position: relative;
}

/*
 * LA ZONA PULSABLE, MEDIDA: el enlace mide 212x26 y 26 no llega a los 44px que
 * pide la casa (y la WCAG 2.5.8). Se estira con un ::after invisible centrado
 * en vertical en vez de con padding, porque el padding separaria el subrayado
 * del texto y el enlace dejaria de parecer un enlace.
 *
 * Es el mismo truco que usan otros controles del tema. AL MEDIR HAY QUE CONTAR
 * ESTE ::after: mirar solo el rectangulo del <a> da un falso positivo.
 */
.lt-vitrina__enlace::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}

.lt-vitrina__enlace:hover,
.lt-vitrina__enlace:focus-visible {
  color: var(--blanco, #FFF);
  border-color: var(--cielo, #4EA8DE);
}

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

/* --- El muro  [SIN USO desde 2026-08-09] ---------------------------- */

/*
 * NADA DE LO QUE VIENE HASTA «El carril» SE PINTA YA.
 *
 * inc/vitrina.php dejo de imprimir el muro: no hay ningun .lt-vitrina__muro en
 * el documento, asi que estas reglas no alcanzan a nada. NO SE BORRAN porque
 * aqui esta escrito por que el muro era como era —el marco como dispositivo, el
 * `contain` que no recorta el telefono del cartel, las unidades de contenedor
 * que hacian que «avanzar un cartel» midiera lo mismo en los cuatro aparatos— y
 * eso sigue siendo cierto el dia que alguien quiera volver a una rejilla.
 */

.lt-vitrina__muro {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

/*
 * EL MARCO ES UN DISPOSITIVO, NO UNA CAJA.
 *
 * Borde grueso oscuro, esquinas muy redondeadas y un reflejo diagonal encima:
 * son las tres senales minimas para que el ojo lea «pantalla» en vez de
 * «rectangulo con fotos». Sin ellas, los anuncios se leen como un banner.
 */
.lt-vitrina__marco {
  position: relative;
  aspect-ratio: 9 / 16;
  border: 8px solid #0A0F1C;
  border-radius: 22px;
  background: #0A0F1C;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .10),
    0 22px 50px rgba(0, 0, 0, .45);
  overflow: hidden;
  /*
   * Contenedor de tamano: las casillas miden `100cqh` —el alto del marco— y los
   * fotogramas que genera PHP avanzan de cqh en cqh. Sin esto, «avanzar un
   * cartel» seria una distancia distinta en cada aparato.
   */
  container-type: size;
}

/* El reflejo. `pointer-events: none` o se traga los clics de lo que hay debajo. */
.lt-vitrina__marco::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
  z-index: 2;
}

.lt-vitrina__cinta {
  display: flex;
  flex-direction: column;
}

.lt-vitrina__pista {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * TODAS LAS CASILLAS MIDEN LA PANTALLA EXACTA.
 *
 * Con la altura natural de cada imagen, «avanzar un cartel» seria una distancia
 * distinta cada vez y los pasos aterrizarian a mitad de flyer.
 */
.lt-vitrina__casilla {
  flex: none;
  height: 100cqh;
  display: grid;
  place-items: center;
}

/*
 * `contain` Y NO `cover`.
 *
 * El flyer ES el anuncio: rotulo, precio, telefono y marca van pintados dentro.
 * Recortarlo para llenar la pantalla corta justo lo que se paga por ensenar —el
 * telefono suele ir abajo del todo.
 */
.lt-vitrina__arte {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- El movimiento --------------------------------------------------- */

/*
 * Los fotogramas y la duracion los escribe PHP (ver inc/vitrina.php): dependen
 * de cuantos carteles lleve cada aparato, y eso cambia si el dueno sube uno mas.
 * Los cuatro arrancan desfasados con un retardo negativo — cuatro pantallas
 * cambiando al unisono parecen un fallo electrico.
 *
 * Aqui solo vive el RESPALDO para navegadores sin unidades de contenedor: una
 * subida continua, que se ve peor pero nunca se rompe.
 */
@keyframes lt-vitrina-subir {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

@supports not (height: 100cqh) {
  @media (prefers-reduced-motion: no-preference) {
    .lt-vitrina__cinta { animation: lt-vitrina-subir 30s linear infinite; }
  }
}

/*
 * SIN MOVIMIENTO, SE VE UN ANUNCIO POR APARATO Y SE PUEDE PASAR A MANO.
 *
 * Con la preferencia de menos movimiento las cintas se quedan quietas y cada
 * pantalla pasa a desplazarse con el dedo o la rueda. La copia del bucle se
 * retira: duplicaria la lista al desplazar.
 */
@media (prefers-reduced-motion: reduce) {
  .lt-vitrina__marco {
    overflow-y: auto;
    scrollbar-width: none;
    scroll-snap-type: y proximity;
  }

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

  .lt-vitrina__pista:nth-child(2) { display: none; }

  .lt-vitrina__casilla { scroll-snap-align: start; }
}

/* --- Pantallas medianas y telefono ----------------------------------- */

/*
 * CUATRO COLUMNAS Y LUEGO DOS. NUNCA TRES.
 *
 * Los aparatos son cuatro, asi que con cuatro o con dos columnas la fila cierra
 * completa. Con tres quedaria uno suelto debajo, y un aparato solo en una fila
 * se lee como que algo falta.
 */
/*
 * LAS CUATRO COLUMNAS AGUANTAN HASTA 700px, y no hasta 900 como estaba.
 *
 * Con dos columnas a 900px de ancho cada aparato se inflaba a 419x745, y dos
 * filas de eso dejaban la seccion en 1945px de alto: una sola pantalla de
 * anuncios ocupando dos pantallas y media de movil. Se midio.
 *
 * A 700px, cuatro columnas dan aparatos de unos 160px de ancho: un cartel
 * vertical ahi se sigue reconociendo, y la seccion se queda en unos 600px.
 */
@media (max-width: 700px) {
  .lt-vitrina__muro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* En pantallas estrechas los filetes del rotulo estorban mas que ayudan. */
  .lt-vitrina__marca::before,
  .lt-vitrina__marca::after { width: min(48px, 8vw); }
}

@media (max-width: 560px) {
  .lt-vitrina__marco { border-width: 6px; border-radius: 16px; }
}

/* ==================================================================== */
/* EL CARRIL — una sola columna, flyer + texto + boton                  */
/* ==================================================================== */

/*
 * ES DESPLAZAMIENTO NATIVO. Sin una linea de JavaScript la fila ya se arrastra
 * con el dedo, con la rueda en horizontal, con la barra y con las flechas del
 * teclado, y cada tarjeta es un enlace de verdad. El guion solo anade la
 * ventana, las dos flechas y el boton de pausa.
 *
 * NO HAY `touch-action: pan-x` EN NINGUNA PARTE, Y ES DELIBERADO. Se midio en
 * este proyecto con eventos tactiles reales: en vez de «aqui solo horizontal»,
 * lo que hace es tragarse el gesto vertical, y la PAGINA deja de bajar cuando
 * el dedo empieza sobre el carril. Lo que si hace falta es
 * `overscroll-behavior-x: contain`, que evita que al llegar al final se arrastre
 * la pagina de atras y deja pasar el gesto vertical intacto.
 */

.lt-vitrina__riel {
  position: relative;
  /*
   * Sangra hasta el borde de la pantalla para que la ultima tarjeta se salga
   * por la derecha: es lo que le dice al ojo «hay mas, sigue». Dentro del
   * contenedor se cortaria en seco y pareceria que ahi se acaban.
   */
  margin-inline: calc(var(--canal, 24px) * -1);
}

.lt-vitrina__tira {
  display: flex;
  gap: var(--e-2, 16px);
  margin: 0;
  /* El padding de arriba deja sitio a la tarjeta cuando se levanta al pasar
     el raton por encima. */
  padding: 4px var(--canal, 24px) var(--e-2, 16px);
  list-style: none;

  overflow-x: auto;
  /* `hidden` en vertical evita una barra fantasma bajo las tarjetas. */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--canal, 24px);
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  /* La barra nativa gris debajo de los anuncios ensucia la seccion, y ya hay
     flechas. El desplazamiento sigue funcionando igual. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

/* Sin el foco visible, quien navega con teclado no sabria que la fila se
   puede recorrer con las flechas. */
.lt-vitrina__tira:focus-visible {
  outline: 3px solid var(--cielo, #4EA8DE);
  outline-offset: 4px;
  border-radius: var(--radio-tarjeta, 18px);
}

/*
 * EL ANCHO DE LA TARJETA, MEDIDO CONTRA EL ALTO DE LA SECCION.
 *
 * A 390px de pantalla, 68vw son 265px de tarjeta: el cartel se lee, queda un
 * tercio de la siguiente asomando —que es lo que dice «esto se desliza»— y la
 * seccion no se dispara de alto.
 */
.lt-vitrina__celda {
  flex: 0 0 clamp(230px, 68vw, 300px);
  min-width: 0;
  scroll-snap-align: start;
}

.lt-vitrina__tarjeta {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  /* Un escalon por encima del fondo de la seccion: sin el, la tarjeta solo se
     distinguiria por el borde. */
  background: var(--noche-suave, #0E2138);
  border: 1px solid var(--noche-borde, #1C3350);
  border-radius: var(--radio-tarjeta, 18px);
  transition: border-color var(--transicion), transform var(--transicion);
}

.lt-vitrina__tarjeta:hover,
.lt-vitrina__tarjeta:focus-within {
  border-color: var(--cielo, #4EA8DE);
  transform: translateY(-3px);
}

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

  /*
   * SIN MOVIMIENTO AUTOMATICO Y SIN DESPLAZAMIENTO SUAVE.
   *
   * El guion ya no arranca el paso automatico cuando se pide menos movimiento
   * (ver assets/js/vitrina.js), y aqui se apaga ademas la animacion del
   * desplazamiento: al pulsar una flecha el carril salta directo en vez de
   * deslizarse. El carril sigue funcionando entero; lo que se quita es el
   * movimiento que nadie pidio.
   */
  .lt-vitrina__tira { scroll-behavior: auto; }
}

/* El cartel se apoya en el fondo mas oscuro: es lo que hace que se lea como
   una pantalla y no como una imagen pegada a la tarjeta. */
.lt-vitrina__lienzo {
  display: block;
  background: var(--noche, #071324);
}

/*
 * `contain` Y NO `cover`.
 *
 * El flyer ES el anuncio: rotulo, precio, telefono y marca van pintados dentro.
 * Recortarlo para llenar la caja corta justo lo que se paga por ensenar — el
 * telefono suele ir abajo del todo.
 *
 * La caja es 4/5 y los carteles rondan 2/3: eso deja unos 20px de franja a cada
 * lado sobre el mismo azul noche, que no se notan. Con 9/16 —la proporcion real
 * de los carteles— la tarjeta crecia 90px de alto por cada anuncio.
 */
.lt-vitrina__cartel {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
}

.lt-vitrina__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 14px;
}

.lt-vitrina__nombre {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.2;
  /* Blanco sobre #0E2138 = 16,2:1. */
  color: var(--blanco, #FFF);
}

.lt-vitrina__datos {
  margin: 0;
  font-size: .8rem;
  line-height: 1.35;
  /* --niebla sobre #0E2138 = 9,4:1. */
  color: var(--niebla, #B9C6D6);
}

/*
 * EL BOTON QUE PIDIO EL DUENO: «un boton para que la gente sepa que hay cierta
 * publicidad y se abre».
 *
 * `margin-top: auto` lo pega al fondo de la tarjeta, asi que todos los botones
 * de la fila quedan a la misma altura aunque un negocio tenga nombre de dos
 * lineas y el de al lado de una. Una fila de botones desalineados se lee como
 * descuido.
 */
.lt-vitrina__accion {
  margin-top: auto;
  align-self: flex-start;
  /*
   * 44px SIEMPRE, tambien con raton. `.lt-btn--chico` mide 38 y base.css solo
   * lo sube a 44 en pantallas estrechas; MEDIDO a 1440 este boton salia 155x40.
   * La regla de la casa es 44x44 reales, sin distinguir de que se pulsa, y este
   * es ademas el unico boton de un anuncio pagado: fallarlo cuesta dinero.
   */
  min-height: 44px;
}

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

/* --- Las flechas ---------------------------------------------------- */

/*
 * NACEN OCULTAS. Las enciende el guion (`is-listo`) y solo cuando hay algo que
 * recorrer: una flecha que no puede mover nada es peor que no tener flecha.
 *
 * Y solo con sitio para ellas. En un telefono se deslizan las tarjetas con el
 * dedo, y dos botones flotando encima taparian justo el cartel que se paga por
 * ensenar.
 */
.lt-vitrina__flecha { display: none; }

@media (min-width: 861px) {
  .lt-vitrina.is-listo .lt-vitrina__flecha {
    position: absolute;
    top: calc(50% - 30px);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 46x46 reales, sin trucos. */
    width: 46px;
    height: 46px;
    padding: 0;
    /*
     * EL BORDE ES CLARO, Y ES CONTRASTE MEDIDO. Con --noche-borde (#1C3350)
     * sobre el fondo de la seccion (#071324) el boton daba 1,45:1 y
     * literalmente no se veia: en la captura a 1280 habia que buscarlo. La
     * WCAG 1.4.11 pide 3:1 para el limite de un control. Este blanco al 55%
     * se pinta como #8F94A0 y da 6,2:1.
     */
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: var(--noche-suave, #0E2138);
    color: var(--blanco, #FFF);
    cursor: pointer;
    transition: background-color var(--transicion), opacity var(--transicion);
  }

  /*
   * 10px Y NO 2px. El riel sangra `--canal` (24px) por cada lado para que la
   * ultima tarjeta se salga; en pantallas anchas el contenedor esta topado a
   * 1240px, asi que a 1280 el riel EMPIEZA en -4px y una flecha a 2px quedaba
   * medio cortada por el `overflow: hidden` de la seccion. Medido en la
   * captura. Con 10px la flecha entra entera en todo el recorrido en el que
   * se enciende (861px en adelante).
   */
  .lt-vitrina.is-listo .lt-vitrina__flecha--antes { left: 10px; }
  .lt-vitrina.is-listo .lt-vitrina__flecha--despues { right: 10px; }

  .lt-vitrina.is-listo .lt-vitrina__flecha:hover {
    background: var(--cielo, #4EA8DE);
    color: var(--tinta, #0B1220);
  }

  .lt-vitrina.is-listo .lt-vitrina__flecha:focus-visible {
    outline: 3px solid var(--cielo, #4EA8DE);
    outline-offset: 3px;
  }

  /* Al final del recorrido la flecha se apaga en vez de desaparecer: si se
     fuera, las tarjetas darian un salto lateral cada vez. */
  .lt-vitrina.is-listo .lt-vitrina__flecha[disabled] {
    opacity: .3;
    cursor: default;
  }
}

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

/*
 * OBLIGATORIO, no decorativo: criterio 2.2.2 de la WCAG. El carril avanza solo
 * cada cinco segundos, y todo movimiento automatico de mas de cinco segundos
 * tiene que poder detenerse.
 *
 * Nace oculto porque sin guion no hay movimiento automatico que parar.
 */
.lt-vitrina__mandos { display: none; }

.lt-vitrina.is-listo .lt-vitrina__mandos {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}

.lt-vitrina__pausa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44x44 reales. */
  width: 44px;
  height: 44px;
  padding: 0;
  /* Mismo motivo que las flechas: con --noche-borde el aro daba 1,45:1 sobre
     el fondo de la seccion. Blanco al 55% = 6,2:1. */
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  background: transparent;
  color: var(--niebla, #B9C6D6);
  cursor: pointer;
  transition: color var(--transicion), border-color var(--transicion);
}

.lt-vitrina__pausa:hover {
  color: var(--blanco, #FFF);
  border-color: var(--cielo, #4EA8DE);
}

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

/* Un icono u otro segun el estado. El estado tambien va escrito en el rotulo
   para lector de pantalla: el icono solo no dice nada. */
.lt-vitrina__icono-play { display: none; }
.lt-vitrina__pausa.is-pausado .lt-vitrina__icono-pausa { display: none; }
.lt-vitrina__pausa.is-pausado .lt-vitrina__icono-play { display: block; }

/* ==================================================================== */
/* LA VENTANA DE CADA ANUNCIO                                           */
/* ==================================================================== */

/*
 * Es un <dialog> nativo. Sin abrir es `display: none` por hoja del navegador,
 * asi que quien no ejecute guiones NO ve un bloque de datos sueltos debajo de
 * cada cartel: ve la tarjeta, pulsa, y va a la ficha del negocio.
 *
 * OJO AL TOCAR ESTO: no se puede poner `display` a `.lt-vitrina__ventana` sin
 * el `[open]`, porque pisaria el `display: none` del navegador y las dieciseis
 * ventanas se pintarian abiertas en mitad de la portada.
 */
.lt-vitrina__ventana {
  width: min(560px, 92vw);
  max-height: 86vh;
  padding: 0;
  overflow-y: auto;
  border: 1px solid var(--noche-borde, #1C3350);
  border-radius: var(--radio-tarjeta, 18px);
  background: var(--noche-suave, #0E2138);
  color: var(--blanco, #FFF);
  box-shadow: var(--sombra-3, 0 30px 70px rgba(7, 19, 36, .22));
}

.lt-vitrina__ventana::backdrop { background: rgba(7, 19, 36, .82); }

.lt-vitrina__ventana-caja { padding-bottom: 20px; }

/*
 * El cerrar se queda pegado arriba mientras se recorre la ventana. En un
 * telefono, con el cartel a media pantalla, un boton que se va con el
 * desplazamiento obliga a subir del todo para poder cerrar.
 */
.lt-vitrina__ventana-cierre {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 8px 8px 4px;
  background: linear-gradient(var(--noche-suave, #0E2138) 62%, transparent);
}

.lt-vitrina__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44x44 reales. */
  width: 44px;
  height: 44px;
  padding: 0;
  /* El fondo de la ventana es --noche-suave y el del boton --noche: entre los
     dos hay 1,15:1, o sea nada. El aro claro (6,2:1 sobre los dos) es lo que
     hace que el cerrar exista como boton y no como una mancha. */
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  background: var(--noche, #071324);
  color: var(--blanco, #FFF);
  cursor: pointer;
  transition: background-color var(--transicion), color var(--transicion);
}

.lt-vitrina__cerrar:hover {
  background: var(--cielo, #4EA8DE);
  color: var(--tinta, #0B1220);
}

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

.lt-vitrina__ventana-cuerpo { padding: 0 18px; }

.lt-vitrina__ventana-arte {
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: var(--radio-chico, 10px);
  background: var(--noche, #071324);
}

/*
 * AQUI EL CARTEL SE VE ENTERO Y GRANDE. Es la mitad del encargo: en el carril
 * mide 265px de ancho y un cartel de 1717x2560 a ese tamano no se lee. El tope
 * en vh es para que el telefono del negocio, que va debajo, no quede siempre
 * fuera de la primera pantalla de la ventana.
 */
.lt-vitrina__ventana-cartel {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 46vh;
  object-fit: contain;
}

.lt-vitrina__ventana-datos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
}

/*
 * LA MARCA DE PAGADO VIAJA CON EL ANUNCIO. Dentro de la ventana el cartel esta
 * SOLO, fuera del rotulo de la seccion que lo identificaba, y la FTC exige que
 * el contenido pagado se identifique alli donde se ve.
 *
 * --niebla sobre #0E2138 = 9,4:1.
 */
.lt-vitrina__ventana-marca {
  margin: 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--niebla, #B9C6D6);
}

.lt-vitrina__ventana-titulo {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--blanco, #FFF);
}

.lt-vitrina__ventana-meta,
.lt-vitrina__ventana-linea {
  margin: 0;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--niebla, #B9C6D6);
}

/* El telefono se lee y se copia desde un ordenador, donde el boton «Llamar»
   no hace nada. Va en cifras grandes por eso mismo. */
.lt-vitrina__ventana-tel {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--blanco, #FFF);
}

.lt-vitrina__ventana-sellos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

/*
 * Los sellos «Verificado» y «Gratuito» sobre oscuro llevan fondo --noche-suave
 * (ver base.css), que es EXACTAMENTE el fondo de esta ventana: dentro de ella
 * se volvian invisibles. Aqui bajan un escalon mas y vuelven a recortarse.
 */
.lt-vitrina__ventana .lt-sello--verificado,
.lt-vitrina__ventana .lt-sello--gratis { background: var(--noche, #071324); }

/* El estado se dice con la PALABRA, no solo con el color: media comunidad mira
   esto en la calle con el sol encima de la pantalla. */
.lt-vitrina__ventana-horario {
  margin: 0;
  font-size: .92rem;
  font-weight: 700;
}

/* --cielo sobre #0E2138 = 6,2:1. */
.lt-vitrina__ventana-horario--abierto { color: var(--cielo, #4EA8DE); }
.lt-vitrina__ventana-horario--cerrado { color: var(--niebla, #B9C6D6); }

.lt-vitrina__ventana-redes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .92rem;
}

/* Zona pulsable: los enlaces de redes van en fila y de uno en uno hay que
   poder acertarles con el pulgar. */
.lt-vitrina__ventana-redes a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.lt-vitrina__ventana-ficha {
  align-self: flex-start;
  /* 44px reales: 21 de linea mas 11 arriba y 11 abajo (medido, no estimado). */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 2px;
  color: var(--blanco, #FFF);
  font-size: .95rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

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

/*
 * EL AVISO QUE SOLO VE QUIEN PUEDE ARREGLARLO. Lo pinta PHP unicamente para
 * quien tiene permiso de subir archivos: el visitante no tiene por que
 * enterarse de un trabajo pendiente de la casa.
 */
.lt-vitrina__ventana-aviso {
  margin: 4px 0 0;
  padding: 10px 12px;
  border: 1px dashed var(--noche-borde, #1C3350);
  border-radius: var(--radio-chico, 10px);
  font-size: .84rem;
  line-height: 1.45;
  color: var(--niebla, #B9C6D6);
}

/* --- Telefono ------------------------------------------------------- */

@media (max-width: 560px) {
  .lt-vitrina__ventana-cuerpo { padding: 0 14px; }
  .lt-vitrina__ventana-cartel { max-height: 38vh; }
}

/* --- El pie de la seccion ------------------------------------------- */

/*
 * LA PAUSA Y EL ENLACE, EN UNA SOLA FILA.
 *
 * Iban en dos y costaba 48px de alto MEDIDOS. Los dos son mandos de la seccion
 * entera, los dos van centrados y ninguno llena una fila: separados dejaban la
 * seccion cerrando con dos bandas casi vacias.
 *
 * `flex-wrap` para que en 320px, si el enlace crece con la traduccion, baje
 * entero en vez de salirse.
 */
.lt-vitrina__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  margin-top: clamp(10px, 1.6vw, 20px);
}

/* Ya lo centra y lo separa el pie. */
.lt-vitrina__pie .lt-vitrina__invita { margin: 0; }
.lt-vitrina__pie .lt-vitrina__mandos { margin-top: 0; }


/* ===================================================================
 * 6 — EL TELEVISOR  (2026-08-09, tarde)
 * ===================================================================
 * Encargo del dueno, palabra por palabra: «que en vez de que salga de
 * cuadrado, salga el flyer que esta como en una pantalla, asi como lo teniamos
 * antes. El flyer ahi y a la derecha el contenido y el boton de visitar. Pero
 * que no tenga un recuadro alrededor, sino que sea la pantalla y a la derecha
 * el contenido. Que la pantalla sea semigrande y que cuando cambie haga la
 * animacion que hacia antes, como que baja o sube. Y cambia el flyer y tambien
 * cambia el texto. Y podemos hacer las flechas algo diferente».
 *
 * TODO LO ANTERIOR SE CONSERVA en este mismo archivo, marcado [sin uso]: el
 * muro de cuatro pantallas, el carril de tarjetas y las pantallas horizontales
 * de esta manana. En este proyecto no se borra nada.
 * ================================================================ */

/* -------------------------------------------------- la seccion, en claro */

/*
 * LA SECCION PASA A FONDO PAPEL, y es la consecuencia de dos cosas que pidio:
 * que «quienes somos» (justo encima) sea azul oscuro, y que aqui el anuncio
 * «sea la pantalla». Con esta tambien en noche quedaban dos oscuros seguidos
 * —la regla de la casa lo prohibe— y, peor, un televisor oscuro sobre fondo
 * oscuro no se lee como un aparato: se lee como un agujero, porque el marco
 * desaparece contra el fondo.
 *
 * Las reglas de arriba de este archivo pintan el titular, la bajada, la marca
 * y el enlace en blanco, porque se escribieron para fondo noche. Aqui se
 * re-declara SOLO EL COLOR, con `.lt-vitrina--tele` delante para ganar por
 * especificidad (0,2,0 contra 0,1,0). Si algun dia vuelve a fondo oscuro,
 * basta con quitar esa clase y `lt-seccion--hueso` del <section>.
 */
.lt-vitrina--tele {
  /* Padding normal arriba: encima ya no hay otra seccion oscura con la que
     encadenarse, hay «quienes somos» en noche y hace falta el corte. */
  padding-block: clamp(48px, 7vw, 88px);
  overflow: hidden;
}

.lt-vitrina--tele .lt-vitrina__titulo { color: var(--tinta); }
.lt-vitrina--tele .lt-vitrina__bajada { color: var(--apagado); }
.lt-vitrina--tele .lt-vitrina__marca  { color: var(--apagado); }

.lt-vitrina--tele .lt-vitrina__marca::before,
.lt-vitrina--tele .lt-vitrina__marca::after { background: var(--linea); }

.lt-vitrina--tele .lt-vitrina__enlace {
  color: var(--apagado);
  border-bottom-color: rgba(41, 80, 145, .3);
}

.lt-vitrina--tele .lt-vitrina__enlace:hover,
.lt-vitrina--tele .lt-vitrina__enlace:focus-visible {
  color: var(--marca);
  border-bottom-color: var(--marca);
}

.lt-vitrina--tele .lt-vitrina__aviso-alta {
  border-color: rgba(41, 80, 145, .4);
  background: rgba(41, 80, 145, .05);
  color: var(--apagado);
}

.lt-vitrina--tele .lt-vitrina__aviso-alta a { color: var(--marca); }

/* -------------------------------------------------------- la composicion */

/*
 * EL APARATO A LA IZQUIERDA Y EL TEXTO A LA DERECHA.
 *
 * 420px de tope para el aparato: es lo que el dueno llamo «semigrande». Con un
 * cartel vertical de 3/4 eso son 420x560, que en un escritorio de 1440 ocupa
 * poco mas de un cuarto del ancho y se lee entero — el nombre del negocio
 * rotulado dentro del flyer se distingue, que era el problema de las tarjetas
 * de 300px de esta manana.
 */
.lt-tele {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 56px);
  align-items: center;
}

@media (min-width: 900px) {
  .lt-tele { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); }
}

/* El aparato y su columna de mandos, pegados. */
.lt-tele__caja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(10px, 1.4vw, 18px);
  align-items: center;
  max-width: 460px;
  margin-inline: auto;
  /* Sitio para el pie del televisor, que sobresale 14px por debajo del marco
     con un pseudoelemento. Sin este margen, en movil el pie se metia por
     detras del rotulo de categoria del anuncio. */
  margin-bottom: 18px;
  width: 100%;
}

/* ------------------------------------------------------------ el aparato */

/*
 * EL MARCO ES EL APARATO. No hay tarjeta alrededor, no hay borde de seccion:
 * el unico rectangulo de esta pieza es el televisor, que es exactamente lo que
 * pidio el dueno.
 *
 * El marco se pinta con `padding` y no con `border` porque el degradado del
 * bisel (mas claro arriba, mas oscuro abajo, como una carcasa real recibiendo
 * luz de arriba) no se puede hacer con un borde de un solo color.
 */
.lt-tele__aparato {
  position: relative;
  padding: clamp(10px, 1.6vw, 16px);
  border-radius: clamp(16px, 2.2vw, 26px);
  background: linear-gradient(170deg, #22304a 0%, #101c30 55%, #060d18 100%);
  box-shadow:
    /* el filo iluminado del borde superior de la carcasa */
    inset 0 1px 0 rgba(255, 255, 255, .16),
    /* la sombra que lo apoya sobre el papel */
    0 24px 60px rgba(11, 18, 32, .3),
    0 4px 14px rgba(11, 18, 32, .16);
}

/*
 * EL PIE DEL TELEVISOR. Un trapecio corto debajo del marco, dibujado con un
 * pseudoelemento: cero marcado extra y cero imagenes. Es lo que termina de
 * decir «esto es un aparato» sin necesidad de escribirlo en ningun sitio.
 */
.lt-tele__aparato::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 22%;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #101c30 0%, #060d18 100%);
  box-shadow: 0 8px 16px rgba(11, 18, 32, .22);
}

/*
 * LA PANTALLA. Aqui vive el recorte: las diapositivas que entran y salen lo
 * hacen DENTRO de esta caja, y por eso el movimiento se lee como un televisor
 * cambiando de canal y no como una pagina desplazandose.
 *
 * 3/4 porque los ocho carteles reales son verticales (rondan 2/3). Con 16/9 el
 * cartel entraria a un tercio del ancho y el resto seria marco.
 */
.lt-tele__pantalla {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: clamp(8px, 1.2vw, 12px);
  background: #04070d;
  /* El filo interior oscuro: es lo que separa el cristal de la carcasa. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 2px 12px rgba(0, 0, 0, .55);
}

/*
 * EL BRILLO DEL CRISTAL. Una diagonal muy tenue por encima de todo. Sube el
 * realismo del aparato y baja cero la legibilidad del cartel: 6 % de blanco.
 * `pointer-events: none` para que no se coma los clics de la diapositiva.
 */
.lt-tele__pantalla::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 42%);
}

/* ------------------------------------------------------- las diapositivas */

/*
 * TODAS APILADAS EN EL MISMO SITIO, Y SOLO UNA VISIBLE.
 *
 * La que manda lleva `is-activa`; la que se va lleva `is-saliendo` mientras
 * dura la transicion; las demas esperan abajo, fuera de cuadro y a opacidad 0.
 *
 * `visibility` ademas de `opacity`: con opacidad 0 a secas, las siete
 * diapositivas ocultas siguen siendo objetivos de raton invisibles encima del
 * cartel visible. Con `visibility: hidden` desaparecen de verdad, y como es una
 * propiedad animable por pasos la transicion sigue viendose.
 */
.lt-tele__cartel {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition:
    transform .85s cubic-bezier(.65, 0, .35, 1),
    opacity .45s ease,
    visibility 0s linear .85s;
}

.lt-tele__cartel.is-activa {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    transform .85s cubic-bezier(.65, 0, .35, 1),
    opacity .45s ease,
    visibility 0s;
}

.lt-tele__cartel.is-saliendo {
  z-index: 1;
  opacity: 0;
  visibility: visible;
  transform: translateY(-100%);
  transition:
    transform .85s cubic-bezier(.65, 0, .35, 1),
    opacity .55s ease .2s,
    visibility 0s linear .85s;
}

/*
 * HACIA ATRAS, AL REVES. Cuando se pulsa la flecha de subir, la que entra
 * viene de arriba y la que sale se va por abajo. Sin esto, ir hacia atras se
 * ve igual que ir hacia delante y el mando no responde a lo que promete.
 */
.lt-tele[data-dir="atras"] .lt-tele__cartel { transform: translateY(-100%); }
.lt-tele[data-dir="atras"] .lt-tele__cartel.is-activa { transform: none; }
.lt-tele[data-dir="atras"] .lt-tele__cartel.is-saliendo { transform: translateY(100%); }

/*
 * EL CARTEL SE VE ENTERO. `contain` y no `cover`: el flyer ES el anuncio —
 * rotulo, precio, telefono y marca van pintados dentro— y recortarlo para
 * llenar la caja corta justo lo que se paga por ensenar. El hueco que sobra a
 * los lados es el negro del cristal, que es lo que hay dentro de una tele.
 */
.lt-tele__imagen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------------------------------------------------------- los mandos */

/*
 * LA COLUMNA DE MANDOS, PEGADA AL APARATO.
 *
 * Antes eran dos circulos flotando sobre los lados del carril: el mando de un
 * carrusel horizontal, y ya no hay carrusel horizontal. Ahora son una columna
 * —subir, la pila de tramos, bajar y la pausa— que apunta en la direccion en
 * la que de verdad se mueve la imagen.
 */
.lt-tele__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.lt-tele__flecha,
.lt-tele__pausa {
  display: grid;
  place-items: center;
  /* 44px: la regla de la casa para cualquier cosa que se pulse. */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: var(--blanco);
  color: var(--tinta);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}

.lt-tele__flecha:hover,
.lt-tele__pausa:hover {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
}

.lt-tele__flecha:focus-visible,
.lt-tele__pausa:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
}

/*
 * LA PAUSA NACE OCULTA y la enciende el guion: sin guion no hay movimiento
 * automatico que parar, y un boton muerto es peor que ninguno. Mismo criterio
 * que las flechas del carril anterior.
 */
.lt-tele__pausa { display: none; }
.lt-vitrina.is-listo .lt-tele__pausa { display: grid; }

.lt-tele__pausa.is-pausado { background: var(--marca); border-color: var(--marca); color: #fff; }

.lt-vitrina__icono-play { display: none; }
.lt-tele__pausa.is-pausado .lt-vitrina__icono-pausa { display: none; }
.lt-tele__pausa.is-pausado .lt-vitrina__icono-play  { display: block; }

/*
 * LA PILA DE TRAMOS HACE DE DIAL.
 *
 * Ocho puntitos iguales no dicen nada util: nadie salta al anuncio numero
 * seis. Una pila de tramos con el activo encendido dice de un vistazo cuantos
 * anuncios hay y por cual va, que es la unica informacion que hace falta.
 *
 * Es decoracion (`aria-hidden` en el marcado) y no ocho botones mas: serian
 * ocho paradas de tabulador para una navegacion que nadie usa. La cuenta en
 * texto, debajo del texto del anuncio, esa si se lee.
 */
.lt-tele__pila {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
}

.lt-tele__tramo {
  display: block;
  width: 3px;
  height: 12px;
  border-radius: 3px;
  background: rgba(41, 80, 145, .22);
  transition: background .3s ease, height .3s ease;
}

.lt-tele__tramo.is-activo {
  height: 22px;
  background: var(--marca);
}

/* ------------------------------------------------------------- el texto */

/*
 * LAS FICHAS SE APILAN IGUAL QUE LAS DIAPOSITIVAS.
 *
 * La caja se dimensiona con la ficha mas alta —`grid` con todas en la misma
 * celda— para que al cambiar de anuncio el bloque no pegue saltos de altura y
 * arrastre a media pagina con el. Es el fallo clasico de los carruseles con
 * texto y se arregla aqui, no con alturas fijas a ojo.
 */
.lt-tele__fichas {
  display: grid;
  min-width: 0;
}

.lt-tele__ficha {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.33, 1, .68, 1), visibility 0s linear .55s;
}

.lt-tele__ficha.is-activa {
  opacity: 1;
  visibility: visible;
  transform: none;
  /* Entra un pelin despues que la imagen: primero cambia el canal y luego se
     lee el rotulo. Al reves el texto llega antes que su propio anuncio. */
  transition: opacity .45s ease .18s, transform .55s cubic-bezier(.33, 1, .68, 1) .18s, visibility 0s;
}

/* El sentido lo lleva el contenedor entero, no la pantalla: asi la imagen y el
   texto se mueven en la misma direccion con un solo atributo. */
.lt-tele[data-dir="atras"] .lt-tele__ficha { transform: translateY(-18px); }
.lt-tele[data-dir="atras"] .lt-tele__ficha.is-activa { transform: none; }

.lt-tele__rubro {
  margin: 0 0 6px;
  font-size: var(--fs-etiqueta, .75rem);
  font-weight: var(--peso-fuerte, 700);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--marca);
}

.lt-tele__nombre {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: var(--peso-titulo, 700);
  line-height: 1.08;
  text-wrap: balance;
  color: var(--tinta);
}

.lt-tele__desc {
  margin: 12px 0 0;
  max-width: 46ch;
  font-size: var(--fs-texto, 1rem);
  line-height: 1.6;
  color: var(--apagado);
}

/*
 * LOS DOS BOTONES, DEL MISMO ANCHO. Cambiado el 2026-08-16: «estos botones no
 * están del mismo grande».
 *
 * Estaban en flex, asi que cada uno media lo que media su texto: «VISITAR ESTE
 * NEGOCIO» es casi el doble de largo que «DATOS Y REDES», y apilados en el
 * telefono la diferencia canta.
 *
 * Con `auto-fit` y `1fr` las columnas se reparten el sitio por igual, asi que
 * los dos miden lo mismo pase lo que pase con el texto —tambien al traducir al
 * ingles, donde los largos cambian—. Y cuando no caben dos de 11rem, la rejilla
 * baja a una columna sola: siguen iguales, ahora a lo ancho.
 */
.lt-tele__acciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 12px;
  margin-top: clamp(18px, 2.4vw, 26px);
  /* Dos botones de accion no deben cruzar media pantalla en un escritorio. */
  max-width: 30rem;
}

/*
 * LA CUENTA VA FUERA DE LAS FICHAS, y tiene que estarlo: las fichas se apilan
 * y se cruzan en la transicion, asi que un numero dentro de ellas parpadearia
 * en cada cambio. Aqui es un solo elemento que el guion reescribe.
 *
 * `tabular-nums` para que el 1 y el 8 ocupen lo mismo y el bloque no baile al
 * pasar de «1 / 8» a «8 / 8».
 */
.lt-tele__cuenta {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  font-size: var(--fs-etiqueta, .75rem);
  font-weight: var(--peso-fuerte, 700);
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--apagado);
}

.lt-tele__cuenta [data-lt-tele-cuenta] { color: var(--tinta); }

/*
 * EL FANTASMA SOBRE PAPEL. El de la casa es borde al 60 % sobre claro, que es
 * justo este caso, asi que solo se ajusta el color a marca para que no se
 * pierda contra el hueso.
 */
.lt-vitrina--tele .lt-vitrina__datos-btn {
  border-color: rgba(41, 80, 145, .45);
  color: var(--marca);
  background: transparent;
}

.lt-vitrina--tele .lt-vitrina__datos-btn:hover,
.lt-vitrina--tele .lt-vitrina__datos-btn:focus-visible {
  border-color: var(--marca);
  background: rgba(41, 80, 145, .08);
  color: var(--marca);
}

/* ---------------------------------------------------------------- movil */

@media (max-width: 899px) {
  /* Apilado: el aparato arriba con sus mandos al lado, el texto debajo. */
  .lt-tele__caja { max-width: 420px; }
  .lt-tele__lado { text-align: center; }
  .lt-tele__desc { margin-inline: auto; }
  .lt-tele__acciones { justify-content: center; }
}

@media (max-width: 420px) {
  /* En el telefono mas estrecho la columna de mandos se come el aparato, asi
     que las flechas bajan a 40px. Siguen por encima del minimo real de 40 y el
     area pulsable la completa el hueco de 10px entre ellas. */
  .lt-tele__flecha,
  .lt-tele__pausa { width: 40px; height: 40px; }
  .lt-tele__caja { gap: 8px; }
}

/* ------------------------------------------------------ menos movimiento */

/*
 * SI SE PIDE MENOS MOVIMIENTO, NO SE DESLIZA NADA.
 *
 * El guion ya no arranca el paso automatico (ver assets/js/vitrina.js) y aqui
 * ademas se quita el deslizamiento: al pulsar una flecha la diapositiva
 * aparece y desaparece sin recorrido. La pieza sigue funcionando entera; lo
 * que se quita es el movimiento que nadie pidio.
 */
@media (prefers-reduced-motion: reduce) {
  .lt-tele__cartel,
  .lt-tele__cartel.is-activa,
  .lt-tele__cartel.is-saliendo,
  .lt-tele__ficha,
  .lt-tele__ficha.is-activa {
    transform: none;
    transition: opacity .2s ease, visibility 0s;
  }

  .lt-tele__tramo { transition: none; }
}

/*
 * LOS BOTONES DE CONTACTO EN LA TARJETA DE LA VITRINA — 2026-08-19.
 *
 * Pasaron de uno («Ver este negocio») a seis o siete: WhatsApp, Llamar, Como
 * llegar y una por cada red. Lo pidio el dueno mirando la portada.
 *
 * `flex-wrap` para que bajen de linea en vez de encogerse. En la Vitrina la
 * columna de texto es ancha, asi que caben tres o cuatro por fila.
 */
.lt-tele__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.lt-tele__acciones .lt-btn {
	flex: 0 1 auto;
	min-height: 44px;
}

/*
 * «Ver este negocio» va el ULTIMO en el codigo pero tiene que leerse como el
 * cierre, no como uno mas. Se le deja su fila.
 */
.lt-tele__acciones .lt-tele__cta.lt-btn--principal:last-child {
	flex-basis: 100%;
	margin-top: 4px;
}

@media (max-width: 640px) {
	.lt-tele__acciones { gap: 8px; }
	.lt-tele__acciones .lt-btn {
		min-height: 40px;
		padding-inline: 12px;
		font-size: var(--fs-etiqueta);
	}
}

/* ==================================================================== */
/* LOS BOTONES, TODOS IGUALES Y LLENANDO LA CAJA — 2026-08-19            */
/*                                                                      */
/* Reemplaza al `flex` de mas arriba, donde cada boton medía lo que su   */
/* texto: «TIKTOK» diminuto al lado de «VISITAR ESTE NEGOCIO» y cada     */
/* fila acabando donde le tocaba. El duenno: «que no quede ese desorden».*/
/* ==================================================================== */

.lt-tele__acciones {
	display: grid;
	/*
	 * `auto-fit` + `1fr`: tantas columnas como quepan, todas iguales, y
	 * siempre llegando al borde. El 150px decide cuantas caben — dos en un
	 * telefono de 375, cuatro en la portada ancha— asi que no hace falta
	 * ninguna consulta de ancho.
	 */
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	/*
	 * VUELVE `stretch`, Y ESTA VEZ SIN GLOBOS — 2026-08-19 (segunda pasada).
	 *
	 * Los dos valores tienen su defecto cuando en una fila conviven un boton
	 * de una linea y otro de dos:
	 *
	 *     stretch -> el corto se estira al alto del largo  = boton globo
	 *     start   -> el corto se queda arriba              = hueco debajo
	 *
	 * Primero puse `start` para matar el globo y aparecio el hueco. El duenno:
	 * «que no quede ese espacio entre los botones, que quede como un cuadro
	 * compacto».
	 *
	 * LA CAUSA NO ERA NINGUNO DE LOS DOS: era que un boton ocupaba dos lineas.
	 * Se resuelve abajo dandole la fila entera a los rotulos largos. Con todos
	 * los de dos columnas en una sola linea, `stretch` ya no puede estirar nada
	 * —no hay dos alturas que reconciliar— y encima deja la fila pareja si algun
	 * dia un rotulo se parte.
	 */
	align-items: stretch;
}

/*
 * LOS DOS ROTULOS LARGOS SE LLEVAN LA FILA ENTERA.
 *
 * «Visitar este negocio» y «Datos y redes» no caben en media fila de telefono y
 * se parten en dos lineas, que es lo que descuadraba todo. A lo ancho caben de
 * sobra, y ademas es lo que son: el cierre de la tarjeta, no un boton mas de la
 * lista.
 *
 * `.lt-tele__cta` y no `.lt-btn--principal` a secas: «Llamar» tambien es
 * principal y ese si tiene que quedarse en su media fila.
 */
.lt-tele__acciones .lt-tele__cta.lt-btn--principal,
.lt-tele__acciones .lt-vitrina__datos-btn {
	grid-column: 1 / -1;
}

.lt-tele__acciones .lt-btn {
	width: 100%;
	min-height: 46px;
	/* Un rotulo largo no puede ensanchar su columna: se parte o se recorta. */
	padding-inline: 10px;
	/*
	 * Y EL MISMO RELLENO VERTICAL PARA TODOS — 2026-08-19.
	 *
	 * `.lt-btn--chico` —los de Llamar / WhatsApp / Como llegar— trae 9 px y el
	 * resto 13. Misma fuente y mismo minimo, pero 42 px de alto contra 48: en la
	 * misma rejilla se ve como dos tamaños de boton. El duenno ya lo habia
	 * pedido: «no quiero que unos queden mas chiquitos que otros».
	 *
	 * Se iguala hacia arriba, al relleno de «Visitar este negocio», que es el
	 * boton que manda en la tarjeta.
	 */
	padding-block: 13px;
	text-align: center;
}

/*
 * AQUI ESTABA la regla del «ultimo impar a fila entera». Sobra desde que los dos
 * rotulos largos se llevan su propia fila: los cortos quedan siempre en pares, y
 * con esta regla puesta el ultimo de ellos se estiraba sin motivo.
 */

@media (max-width: 400px) {
	/* En pantallas muy estrechas, 130px deja dos columnas en vez de una. */
	.lt-tele__acciones { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
	.lt-tele__acciones .lt-btn { font-size: var(--fs-etiqueta); min-height: 42px; }
}

/*
 * LAS FILAS TAMPOCO SE ESTIRAN — 2026-08-19 (tercera pasada).
 *
 * Con los rotulos largos ya en su fila entera seguia saliendo un boton de 142px
 * de alto. No era `align-items` —eso alinea DENTRO de la fila— sino
 * `align-content`, que reparte el espacio SOBRANTE entre las filas.
 *
 * La caja de los botones es mas alta que los botones (la columna de texto de la
 * Vitrina la estira), asi que la rejilla repartia esos pixeles de mas entre sus
 * filas y una se llevaba 142. Es el mismo sintoma con otra causa, y por eso los
 * dos intentos anteriores no lo cazaron: se estaba mirando la propiedad
 * equivocada.
 *
 * `start` deja las filas de su alto y manda el sobrante al final, que es
 * exactamente lo que pidio el dueno: «que el espacio que quede, quede sobrante».
 */
.lt-tele__acciones {
	align-content: start;
}

/*
 * LA CAUSA DE VERDAD DEL BOTON ALTO — 2026-08-19 (y van cuatro).
 *
 * `lt_botones_contacto()` no devuelve tres botones sueltos: devuelve un
 * ENVOLTORIO `.lt-contacto` con los tres dentro. Asi que la rejilla no veia
 * siete hijos, veia cinco — y el primero era una columna de 142px de alto con
 * Llamar, WhatsApp y Como llegar apilados. «Sitio web», que le tocaba al lado,
 * se estiraba a esos 142.
 *
 * Los tres intentos anteriores —`align-items`, la fila entera para los rotulos
 * largos, `align-content`— eran plausibles y ninguno tocaba esto. Se encontro
 * preguntandole al navegador por los hijos reales de la rejilla en vez de
 * deducirlos del PHP.
 *
 * `display: contents` disuelve el envoltorio: sus tres botones pasan a ser
 * hijos directos de la rejilla y se colocan como los demas. Es justo para lo
 * que existe esa propiedad.
 */
.lt-tele__acciones .lt-contacto,
.lt-dir-acciones .lt-contacto {
	display: contents;
}

/*
 * LA CASILLA VACIA QUE SUBE EL HUECO A LA PRIMERA FILA — 2026-08-19.
 *
 * El duenno: «que los botones de la columna de la derecha no aparezcan arriba
 * sino abajo, pegados a los de abajo; que el espacio quede arriba».
 *
 * Con un numero impar de botones de media fila siempre sobra una casilla. Antes
 * caia al final, pegada a «Visitar este negocio», que es donde peor se ve. El
 * guion mete aqui una casilla vacia por cada hueco que falte para que la fila
 * corta sea la primera, y el bloque cierra recto por abajo.
 *
 * No lleva contenido ni borde: solo ocupa su celda. Y `pointer-events: none`
 * porque un hueco no se puede pulsar; el lector de pantalla ni lo ve, va con
 * aria-hidden desde el guion.
 */
.lt-tele__acciones .lt-hueco,
.lt-dir-acciones .lt-hueco {
	pointer-events: none;
}