y NO en por dos razones concretas: * · La cabecera es `position: fixed` y vive FUERA de

, así que no puede * verse afectada por este recorte. * · Se usa `clip` y no `hidden`: `overflow: hidden` convierte al elemento en * un contenedor de scroll y eso ROMPE cualquier `position: sticky` que haya * dentro (los filtros del directorio, sin ir más lejos). `clip` recorta sin * crear contenedor de scroll, así que sticky sigue funcionando. * En navegadores sin soporte de `clip` la regla se ignora y lo peor que pasa es * que reaparece esa barra horizontal de 15px: se degrada, no se rompe. */ .lt-principal { overflow-x: clip; } /* ========================================================================== * 3 · CAPAS SOBRE FOTOGRAFÍA * ========================================================================== */ /* * `.lt-capa` es el contenedor de una pieza con «foto + degradado + contenido * encima». El degradado lo pinta un ::after y no un

, para no obligar a * las plantillas a imprimir marcado que solo existe para pintar. * * Es OBLIGATORIO en cualquier texto que caiga sobre una imagen: la foto la sube * el dueño del negocio desde su móvil y puede ser un cielo blanco o un cartel * saturado. Sin capa, el titular se lee «si hay suerte». * * `isolation: isolate` crea un contexto de apilamiento propio, así que los * z-index de dentro no compiten con la cabecera fija ni con el menú. */ .lt-capa { position: relative; isolation: isolate; overflow: hidden; /* recorta el zoom de la foto al radio de la pieza */ border-radius: var(--radio-grande); background-color: var(--noche); /* color de espera mientras la foto carga: así el degradado nunca se ve sobre blanco */ } /* La imagen llena la pieza sin deformarse, venga vertical u horizontal. */ .lt-capa > img, .lt-capa__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .lt-capa::after { content: ''; position: absolute; inset: 0; background: var(--velo-foto); /* Sin esto, el degradado se traga los clics del enlace que hay debajo. */ pointer-events: none; z-index: 1; } /* Variantes de intensidad y dirección. El nombre dice cuánto texto aguanta encima, que es la decisión que de verdad se toma al elegir. */ .lt-capa--corto::after { background: var(--velo-corto); } .lt-capa--lateral::after { background: var(--velo-lateral); } .lt-capa--tenue::after { background: linear-gradient(to top, rgba(7, 19, 36, var(--capa-media)) 0%, rgba(7, 19, 36, var(--capa-tenue)) 60%, rgba(7, 19, 36, 0) 100%); } .lt-capa--densa::after { background: linear-gradient(to top, rgba(7, 19, 36, var(--capa-solida)) 0%, rgba(7, 19, 36, var(--capa-densa)) 55%, rgba(7, 19, 36, .22) 100%); } /* El relleno de las fichas SIN foto: nunca un hueco gris. */ .lt-capa--sin-foto { background-image: var(--degradado-marca); } .lt-capa--sin-foto::after { /* El degradado de marca ya da contraste de sobra: encima solo va un velo mínimo, para que la inicial no compita con el texto. */ background: linear-gradient(to top, rgba(7, 19, 36, var(--capa-media)) 0%, rgba(7, 19, 36, 0) 70%); } /* * El contenido va por encima del velo. El color se fija aquí y no se hereda: * una pieza sobre foto siempre es «superficie oscura», aunque la sección que la * rodea sea clara, y el texto tiene que cambiar de color con ella. */ .lt-capa__texto { position: relative; z-index: 2; color: var(--hueso); } /* Sobre foto, el texto secundario y los enlaces cambian de token: --apagado y --marca no llegan al contraste mínimo sobre un fondo oscuro. */ .lt-capa__texto .lt-apagado { color: var(--niebla); } .lt-capa__texto a { color: var(--cielo); } .lt-capa__texto a:hover { color: var(--cielo-claro); } /* ========================================================================== * 4 · MARQUESINA * ========================================================================== */ /* * Cinta de contenido en movimiento continuo (categorías, ciudades, titulares). * * EL MARCADO TIENE QUE DUPLICAR EL CONTENIDO: dentro de `.lt-cinta` va una * `.lt-cinta__pista` con la lista DOS veces, y la segunda copia con * `aria-hidden="true"` para que un lector de pantalla no lea todo dos veces. La * animación desplaza la pista un -50% exacto, que es justo donde la segunda * copia queda en la posición que ocupaba la primera: por eso el salto del final * al principio es invisible. */ .lt-cinta { overflow: hidden; /* La cinta llega hasta los bordes de la ventana; recortar aquí evita que su contenido genere scroll horizontal. */ -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } .lt-cinta__pista { display: flex; align-items: center; gap: var(--e-4); width: max-content; /* imprescindible: sin esto los elementos se comprimen para caber y el -50% deja de coincidir */ animation: lt-cinta-desliza var(--cinta-duracion) linear infinite; } @keyframes lt-cinta-desliza { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* * PAUSA. La WCAG (criterio 2.2.2) exige poder detener cualquier movimiento * automático que dure más de cinco segundos, y esta cinta no para nunca. * * La plantilla DEBE imprimir un botón de pausa real que alterne * `data-animacion="pausada"` sobre `.lt-cinta`. Sin ese botón, la cinta * incumple. Los tres sitios que usan esta utilidad —los logotipos de la * portada, el carril del directorio y la cinta de anuncios— lo tienen. * * --------------------------------------------------------------------------- * YA NO SE PARA AL PASAR EL RATÓN NI EL DEDO. LO PIDIÓ EL DUEÑO. * --------------------------------------------------------------------------- * Aquí había un `:hover` que congelaba la cinta. El argumento era razonable * —perseguir un logotipo en movimiento para pulsarlo es hostil— pero en la * práctica molestaba más de lo que ayudaba, y en táctil era directamente un * fallo: un móvil no tiene «pasar por encima», así que el navegador lo EMULA al * tocar. Bastaba rozar la cinta al desplazar la página para dejarla congelada * hasta tocar en otro sitio. Parecía rota. * * Es exactamente la misma conclusión a la que se llegó en cintas.css con la * otra cinta, y ahora las dos se comportan igual en vez de cada una a su modo. * * Quedan las dos paradas que sí funcionan en todos los dispositivos: el botón * y el foco del teclado. */ /* * CON EL TECLADO SÍ SE PARA. No es una excepción caprichosa: quien tabula hacia * un logotipo enlazado necesita que siga donde estaba al pulsar Intro. Y aquí no * hay emulación que valga — el foco solo llega si alguien lo manda. */ .lt-cinta:focus-within .lt-cinta__pista, .lt-cinta[data-animacion='pausada'] .lt-cinta__pista { animation-play-state: paused; } /* ========================================================================== * 5 · ELEVACIÓN Y ZOOM * ========================================================================== */ /* * El hover de las piezas grandes: la tarjeta se levanta y su fotografía hace un * zoom LENTO. Las dos cosas por separado se notan poco; juntas dan la sensación * de que la pieza responde. * * Se aplica solo en dispositivos con puntero fino: en una pantalla táctil el * «hover» se queda pegado después de tocar y la tarjeta se queda levantada y * ampliada hasta que el visitante toca otra cosa. */ @media (hover: hover) and (pointer: fine) { .lt-eleva { transition: transform var(--transicion), box-shadow var(--transicion); } .lt-eleva:hover, .lt-eleva:focus-within { transform: translateY(var(--eleva-hover)); box-shadow: var(--sombra-2); } /* El zoom vive en la imagen; el recorte lo pone el contenedor con overflow. */ .lt-zoom img, .lt-zoom .lt-capa__foto { transition: transform var(--transicion-lenta); } .lt-zoom:hover img, .lt-zoom:focus-within img, .lt-zoom:hover .lt-capa__foto, .lt-zoom:focus-within .lt-capa__foto { transform: scale(var(--zoom-hover)); } } /* ========================================================================== * 6 · MENOS MOVIMIENTO * ========================================================================== * * tokens.css ya deja a cero las duraciones Y las magnitudes (desplazamiento, * escalón, elevación y zoom), así que la mayoría de lo de arriba se neutraliza * solo. Aquí queda lo que un token no puede apagar: las animaciones por * fotogramas y el estado inicial oculto. */ @media (prefers-reduced-motion: reduce) { /* * El contenido se ve YA, sin esperar al observador. Se anula la transición * además de la opacidad: si el elemento sigue naciendo oculto y solo se * acelera la transición, el resultado es un parpadeo brusco — exactamente lo * que esta preferencia pide evitar. */ .lt-anima .lt-aparece, .lt-anima [data-lt-aparece] { opacity: 1; transform: none; transition: none; } .lt-anima .lt-escalona > * { transition-delay: 0ms; } /* * La cinta deja de moverse y pasa a ser una tira que se desplaza a mano. No * se oculta: el contenido —categorías, ciudades— sigue haciendo falta. Con la * animación parada, la mitad quedaría fuera de la pantalla sin forma de * alcanzarla, así que aquí SÍ se permite el scroll horizontal. */ .lt-cinta { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .lt-cinta__pista { animation: none; transform: none; } .lt-eleva:hover, .lt-eleva:focus-within { transform: none; } } /* ================================================================== */ /* COSTURAS ENTRE SECCIONES — ESCRITO PERO SIN USAR */ /* ================================================================== */ /* * RETIRADO EL 2026-08-13, el mismo dia. Se monto a peticion del dueno —«que se * mezclen las lineas entre secciones»— se vio en pantalla, y decidio lo * contrario: «me gusta mas sin el difuminado». * * No se borra: funciona, esta probado, y volver a ponerlo es anadir la clase * `lt-fundido` a una seccion y declarar sus dos colores. Borrarlo obligaria a * escribirlo otra vez si cambia de opinion. */ /* * Lo pidio el dueno: «quiero que se mezclen las lineas entre secciones para * que no se vean separadas». * * COMO FUNCIONA: cada seccion que quiera fundirse con la de arriba se marca con * `lt-fundido` y declara de que color viene en `--lt-desde`. Se pinta entonces * una banda de 150 px que va de ese color al fondo de la propia seccion. * * POR QUE ARRIBA Y NO ABAJO: si el degradado lo pusiera la seccion de arriba, * cada vez que se reordena la portada habria que cambiar DOS secciones. Asi solo * cambia la de abajo, que es la que se mueve. * * Las paradas intermedias no son adorno: un degradado de dos colores deja una * banda dura visible justo en el medio, que es peor que el filo que se queria * quitar. */ .lt-fundido { position: relative; } .lt-fundido::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--lt-fundido-alto, 150px); pointer-events: none; z-index: 0; background: linear-gradient( to bottom, var(--lt-desde) 0%, color-mix(in srgb, var(--lt-desde) 55%, var(--lt-hasta)) 42%, color-mix(in srgb, var(--lt-desde) 18%, var(--lt-hasta)) 74%, var(--lt-hasta) 100% ); } /* El contenido va por encima del degradado, o el titular quedaria debajo. */ .lt-fundido > * { position: relative; z-index: 1; } /* Aire extra arriba: sin el, el eyebrow cae dentro del degradado y se lee sobre un fondo a medio camino entre las dos secciones. */ .lt-fundido { padding-top: calc( var(--seccion-y) + 70px ); } /* * LAS TRES COSTURAS DE LA PORTADA, en orden. Cada una declara de que color * viene y a cual va; el degradado sale solo de la regla de arriba. * * hero (noche) -> vitrina (hueso) ...... en vitrina.css, ya estaba * vitrina (hueso) -> reciente (noche) * reciente (noche) -> quienes somos (blanco) * quienes somos (blanco) -> ayudas (noche) */ .lt-reciente.lt-fundido { --lt-desde: var(--hueso); --lt-hasta: var(--noche); } .lt-somos.lt-fundido { --lt-desde: var(--noche); --lt-hasta: var(--blanco); } .lt-cercanas.lt-fundido { --lt-desde: var(--blanco); --lt-hasta: var(--noche); } /* ==================================================================== */ /* LOGOTIPOS DE NEGOCIO: SIN LAS ESQUINAS NEGRAS — 2026-08-14 */ /* ==================================================================== */ /* * EL NEGRO NO ES CSS, VIENE DENTRO DEL ARCHIVO. * * Varios logotipos —«Mi Gente», «La Zulianita»— son JPG CUADRADOS con el * logo circular pintado encima de un fondo negro. El JPG no admite * transparencia, asi que ese negro es parte de la imagen: no hay propiedad * que lo pueda «quitar». * * Lo que si se puede es RECORTAR el cuadrado a un circulo, y con eso las * cuatro esquinas negras dejan de existir. Funciona porque el logo ya viene * disenado en circulo dentro del cuadro: se corta fondo, no marca. * * `clip-path` ademas de `border-radius` porque algunos de estos logos van * dentro de contenedores con transform —las cintas que se desplazan— y ahi * `overflow: hidden` no recorta, como ya paso con el mapa de Leaflet. */ .lt-negocio__logo:not(.lt-negocio__logo--inicial), .lt-negocio__logo:not(.lt-negocio__logo--inicial) img, .lt-cinta__logo, .lt-cinta__logo img, .lt-activos__logo, .lt-activos__logo img, .lt-completar__logo, .lt-completar__logo img { border-radius: 50%; clip-path: circle(50%); background: transparent; object-fit: cover; } /* * Un pelo de margen por dentro para que el recorte no muerda el borde del * logo: estos archivos suelen traer el circulo pegado al canto del cuadro. */ .lt-negocio__logo:not(.lt-negocio__logo--inicial) img, .lt-cinta__logo img, .lt-activos__logo img, .lt-completar__logo img { width: 100%; height: 100%; } /* * PAUSA PARA LO QUE ESTA FUERA DE PANTALLA. * * La clase la pone y la quita assets/js/animaciones-fuera.js, que explica en su * cabecera por que hacia falta. Aqui solo esta la regla, y es una sola linea de * verdad: si el elemento no se ve, su animacion no corre. * * NO EXISTE LA REGLA CONTRARIA a proposito. Nada en esta hoja escribe * `animation-play-state: running`, asi que esta pausa no puede encender lo que * el boton de pausa de la cinta —el que exige la WCAG 2.2.2— haya apagado. */ .lt-anim-fuera, .lt-anim-fuera::before, .lt-anim-fuera::after { animation-play-state: paused; } /* ==================================================================== */ /* CATALOGO: SIDEBAR A LA IZQUIERDA, SCROLL NORMAL — 2026-08-18 */ /* ==================================================================== */ /* * El duenno pidio primero una maqueta de catalogo con el sidebar quieto y el * scroll DENTRO de la lista. Se monto, se probo, y al verlo dijo: «la verdad * siento que queda mejor con el scroll completo, porque asi se ve como * extrano». * * Asi que queda solo la mitad buena: los filtros en una columna a la izquierda * y las tarjetas a la derecha, con el scroll de pagina de toda la vida. * * QUE SE QUITO Y POR QUE, para que nadie lo vuelva a intentar sin saberlo: * el alto fijo con scroll interno. Ademas de verse raro, chocaba de frente con * la estructura —se midio: el contenedor y su padre median lo mismo (774 px), * asi que `position: sticky` no tenia ni un pixel donde agarrarse, y encima * `main` y `body` llevan `overflow-x: clip`, que desactiva sticky en todo lo * que hay debajo—. Para que aquello funcionara habia que meter el pie de * pagina dentro de la columna de resultados. No compensaba. * * SOLO EN PANTALLA ANCHA. Por debajo de 1024 px no hay sitio para dos columnas * y queda como siempre: filtros arriba, tarjetas debajo. */ /* * AIRE ANTES DEL PIE — 2026-08-18. * * El duenno: «separa esta parte de abajo con el footer porque esta muy * pegado». La paginacion terminaba justo contra el pie negro, sin un pixel de * respiro, y en una pantalla de resultados eso se lee como que la pagina se * corto de golpe. * * `--seccion-y` y no un numero suelto: es el UNICO padding vertical de seccion * del tema (tokens.css). Asi este bloque respira lo mismo que cualquier otra * seccion del sitio y no se convierte en una excepcion que haya que recordar. * * FUERA DE LA CONSULTA DE 1024px A PROPOSITO: en el telefono el pie queda igual * de pegado, y alli hace la misma falta. */ .lt-listado-cuerpo { padding-block-end: var(--seccion-y); } @media (min-width: 1024px) { .lt-listado-cuerpo > .lt-contenedor { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: var(--e-4, 28px); align-items: start; } /* * EL SIDEBAR ES UNA COLUMNA, NO UNA TARJETA. * * El duenno: «ese cuadro esta muy ahi flotante». Fuera el fondo blanco, el * borde redondeado y la sombra; lo unico que lo separa del contenido es una * linea fina, que es lo que hace un sidebar de catalogo. * * `sticky` para que acompane mientras se rueda la lista. Se queda al llegar * a la cabecera y ya no se mueve mas. */ .lt-listado-cuerpo > .lt-contenedor > .lt-filtros, .lt-listado-cuerpo > .lt-contenedor > .lt-dir-filtros { position: sticky; top: calc(var(--alto-cabecera, 96px) + var(--desplazamiento-barra, 0px) + var(--e-2, 12px)); margin: 0; padding: 0 var(--e-3, 18px) 0 0; background: transparent; border: 0; border-right: 1px solid var(--linea); border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } /* * LOS CAMPOS SE APILAN, Y SE SALE DE LA REJILLA PARA CONSEGUIRLO. * * Poner `grid-template-columns: 1fr` NO bastaba, y se vio midiendo: el * navegador calculaba «48px 186px», que no es ese valor NI el de la regla * rival de empleos-noticias.css. O sea que habia una tercera regla de rejilla * metiendo mano, y pelearse con ella a base de especificidad es una carrera * que se pierde en cuanto alguien anada otra. * * `display: block` sale del juego entero: sin rejilla no hay columnas que * repartir, ni flujo automatico, ni celdas que abarcar. */ .lt-listado-cuerpo > .lt-contenedor > .lt-filtros .lt-filtros__campos { display: block; } .lt-listado-cuerpo > .lt-contenedor > .lt-filtros .lt-filtros__campo { display: block; width: 100%; margin: 0 0 var(--e-2, 12px); } .lt-listado-cuerpo > .lt-contenedor > .lt-filtros .lt-filtros__campo:last-child { margin-bottom: 0; } .lt-listado-cuerpo > .lt-contenedor > .lt-filtros .lt-filtros__control { width: 100%; max-width: 100%; } /* * EL DIRECTORIO TRAE SU PROPIA BARRA, Y HAY QUE APILARLA IGUAL. * * `.lt-dir-filtros` no es `.lt-filtros`: es otra rejilla, de cuatro celdas * —cinco cuando hay filtro de calificacion, que se la anade resenas.css— * pensada para cruzar la pantalla de lado a lado. Metida en una columna de * 300px, cada celda se queda en unos 60px y los nombres de categoria se * parten. * * `display: block` por el mismo motivo que arriba y con la misma leccion * detras: hay TRES hojas declarando columnas sobre esta barra, y ganarles a * base de `grid-template-columns` es una carrera que se pierde en cuanto * alguien anada una cuarta. Sin rejilla no hay columnas que repartir, y los * `grid-column` de la casilla de «atienden en espanol» dejan de existir * solos, sin tener que anularlos uno a uno. * * Los huecos entre campos los daba el `gap` de la rejilla. Al salir de ella * hay que devolverlos como margen o los campos se pegan unos a otros. */ .lt-listado-cuerpo > .lt-contenedor > .lt-dir-filtros { display: block; } .lt-listado-cuerpo > .lt-contenedor > .lt-dir-filtros > .lt-dir-filtros__campo { margin-bottom: var(--e-2, 12px); } .lt-listado-cuerpo > .lt-contenedor > .lt-dir-filtros > .lt-dir-filtros__campo:last-child { margin-bottom: 0; } /* La cabecera del listado, mas baja: en una pantalla de busqueda el titulo no tiene por que comerse un tercio de la pantalla. */ .lt-cabecera-listado { padding-top: var(--e-3, 18px); padding-bottom: var(--e-2, 12px); } .lt-cabecera-listado h1 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin-bottom: 2px; } .lt-cabecera-listado__bajada { margin: 0; max-width: 62ch; font-size: var(--fs-chico, .9rem); } }