/* * TOKENS — Latinos en Texas * * Un solo lugar para toda la identidad. El sitio anterior tenía el azul de * marca escrito a mano 665 veces, 31 tamaños de fuente, 23 radios de borde y * 6 estilos de botón: cambiar el azul obligaba a editar cientos de widgets, y * ya se había colado una deriva (#29568F en el formulario de contacto en vez * de #295091). Aquí eso no puede pasar: se cambia una línea y cambia el sitio. * * Los colores se nombran POR ROL, no por tono. «--acento» sobrevive a que un * día el ámbar se vuelva verde; «--amarillo» no. * * --------------------------------------------------------------------------- * DIRECCIÓN DE ARTE — «EL BARRIO DIGITAL» (revisión de agosto de 2026) * --------------------------------------------------------------------------- * La primera versión era correcta y plana: tarjetas blancas en rejilla sobre * fondos lisos, sin una sola fotografía. Correcta no basta — un directorio que * se cobra tiene que parecer una revista cultural, no un listín telefónico. * * De ahí esta ampliación. NO se ha borrado ni un token: los nombres antiguos * siguen existiendo y ahora APUNTAN a la paleta nueva. Por eso una hoja que * todavía pida `--superficie` recibe el hueso cálido sin tener que tocarla, y * el sitio entero cambia de piel con este archivo. * * REGLA DE CONTRASTE (WCAG AA, 4.5:1). Cada color tiene su fondo permitido y * está comprobado. No es burocracia: media comunidad lee esto al sol, en un * teléfono barato y con la pantalla al mínimo para ahorrar batería. * · --cielo como TEXTO, solo sobre --noche (7.1:1) — como texto sobre claro * da 2.4:1 y NO se usa. Como FONDO sí va en cualquier sitio, pero * SIEMPRE con --tinta encima (7.4:1). Blanco sobre --cielo son * 2,6:1: está prohibido en todo el tema, sin excepción. * · --marca SOLO sobre claro (7.2:1) — sobre --noche da 2.3:1: usa --cielo. * · --brasa como FONDO con --brasa-tinta encima (5.0:1). Como texto sobre * claro NO llega (3.3:1): para eso está --brasa-texto (4.9:1). * · --apagado sobre claro (6.3:1). Sobre oscuro NO llega: usa --niebla (10.8:1). */ :root { /* --------------------------------------------------------------- * COLOR — paleta base * El documento del cliente pide azul cielo oscuro, negro y blanco. * Se conserva #295091 como azul de marca porque es el que la * comunidad ya reconoce tras un año de sitio y redes: cambiarlo * costaría reconocimiento sin ganar nada. * ------------------------------------------------------------- */ /* El fondo oscuro dominante: hero, bandas, cabeceras de sección y pie. Es azul, no negro. Un negro puro sobre foto se ve como un apagón; este azul nocturno deja que la fotografía siga teniendo temperatura. */ --noche: #071324; /* Un escalón por encima del noche, para tarjetas y paneles sobre fondo oscuro. Sin él, una caja sobre --noche solo se distingue por el borde. */ --noche-suave: #0E2138; /* Borde visible sobre fondo oscuro. Un rgba(255,255,255,.1) desaparece en cuanto la pieza se apoya sobre una fotografía; un color sólido no. */ --noche-borde: #1C3350; --marca: #295091; /* azul de marca — enlaces y botón principal sobre claro */ --marca-oscuro: #1B3A6B; /* hover: se OSCURECE el mismo azul. El sitio viejo saltaba a un cian ajeno (#00b3c6) con 2,54:1 de contraste, justo en el instante previo al clic. */ --marca-claro: #E8EEF7; /* superficie tintada para bloques destacados */ --marca-borde: #C3D3E8; /* Azul eléctrico. Es el color de los enlaces y los acentos CUANDO el fondo es oscuro, donde el azul de marca se apagaría hasta ser ilegible. */ --cielo: #4EA8DE; --cielo-claro: #8FCCEE; --acento: var(--cielo); /* ámbar — SOLO para «Destacado» y «Patrocinado». El documento exige que todo lo pagado se identifique siempre; darle un color propio y exclusivo lo hace imposible de confundir. */ /* El «paso de hover» del acento. Ahora que el acento es un azul CLARO con tinta negra encima, su hover tiene que ACLARAR, no oscurecer: oscurecerlo dejaba el par en 2,36:1 justo antes del clic. El nombre se conserva porque su rol es ese —el estado hover del acento—, aunque ya no sea «más oscuro». */ --acento-oscuro: var(--cielo-claro); --acento-tinta: var(--tinta); /* la tinta que va ENCIMA del ámbar (10.4:1) */ /* Terracota. El color cálido del proyecto: categorías, numeración, detalles editoriales. Nunca se usa para «destacado» — ese sitio es del ámbar. */ --brasa: var(--cielo); --brasa-tinta: var(--tinta); /* tinta sobre fondo terracota (5.0:1) */ --brasa-texto: var(--marca); /* terracota OSCURECIDA para texto sobre claro (4.9:1) */ /* Superficie clara CÁLIDA. El blanco puro es exactamente lo que hacía que el sitio se viera «a plantilla»: aquí el papel tiene temperatura. */ --hueso: #F6F3EE; --hueso-honda: #EBE5DC; /* segundo escalón del papel: bordes y rellenos */ --tinta: #0B1220; /* texto principal — tinta azulada, no negro puro */ --apagado: #5A5A5A; /* texto secundario sobre claro — ÚNICO gris de texto. El sitio viejo tenía seis grises sin rol (#707070 #848484 #9c9c9c #c1c1c1 #b7b7b7 #5a5a5a), varios por debajo del contraste mínimo. */ --niebla: #B9C6D6; /* texto secundario sobre OSCURO (10.8:1 sobre noche) */ --blanco: #FFFFFF; /* --------------------------------------------------------------- * EL NEGRO. Se añadió el 2026-08-15 y tiene un rol propio, distinto * del azul noche: las bandas que NO son del sitio, sino del mundo de * fuera. Hoy son dos, la del localizador de ICE y el pie, las dos por * pedido del dueño. * * NO ES #000 PURO, y es la única decisión de este token. Un negro * absoluto pegado al azul noche (#071324) se lee como un agujero en la * página en vez de como otra banda, y encima hace vibrar el texto * blanco encima. #06070A es negro a la vista y deja el corte entre las * dos bandas legible. * --------------------------------------------------------------- */ --negro: #06070A; /* Alias de rol conservados: hojas antiguas los siguen pidiendo y ahora reciben la paleta nueva sin tener que editarlas una por una. */ --superficie: var(--hueso); --superficie-honda: var(--noche); --linea: #E4DED4; /* la línea también se entibia: un gris frío sobre papel cálido se ve sucio */ --linea-honda: rgba(255, 255, 255, .14); /* separadores sobre --noche */ /* --------------------------------------------------------------- * CERO VERDE — regla del dueño, literal: * «no metas verde en la página, solo azul blanco y negro». * * La marca sale del logotipo y no tiene verde: negro, marino, azul cielo * (la palabra «TEXAS»), blanco y el plata cromado de la estrella. Ni * siquiera entra el verde de WhatsApp: una marca ajena no puede meter un * sexto tono en una paleta de cinco, y menos el único tono que el dueño * prohibió por su nombre. * * Los tokens verdes NO se borran, se REDIRIGEN al azul: hay hojas que * todavía piden --whatsapp y --exito, y borrarlos las dejaría pintando * `background: ;` (transparente y sin aviso) en vez de azul. * * POR QUÉ EL AZUL CIELO SOLO LLEVA TINTA NEGRA (medido, no opinado): * · negro sobre azul cielo = 7,41:1 ✅ es así como se hacen los botones * · blanco sobre azul cielo = 2,63:1 ❌ PROHIBIDO en todo el tema * · azul cielo sobre marino = 5,98:1 ✅ enlaces y sellos sobre oscuro * De ahí la regla de uso: el azul cielo es FONDO sobre claro (con tinta * negra encima) y es TEXTO sobre oscuro. Nunca al revés. * ------------------------------------------------------------- */ /* Botones de plataforma. Antes llevaban el verde corporativo de WhatsApp y el azul corporativo de Telegram: dos marcas ajenas metidas dentro de nuestra paleta. Ahora los dos son el azul de acción del sitio. El canal se reconoce por el icono monocromo y por el texto del botón, no por robarle el color a otro. (Los valores antiguos se citan sin almohadilla a propósito: así una pasada automática de sustitución de colores no puede reescribir la historia que explica POR QUÉ ya no están — 25D366 y 229ED9.) */ --whatsapp: var(--cielo); --telegram: var(--cielo); /* --------------------------------------------------------------- * ICONOS COMO MÁSCARA * Van aquí y no sueltos en cada hoja porque son identidad. Se pintan con * `background: currentColor` a través de `mask`, nunca con `fill` dentro * del SVG: así el icono NO PUEDE tener color propio, y es imposible que * el verde de WhatsApp vuelva a entrar por la puerta de un icono. * ------------------------------------------------------------- */ /* Estrella de cinco puntas con la punta arriba y radio interior al 0,382 del exterior: la MISMA proporción que dibuja hero-texas.js para la estrella del logotipo. Es el sello de verificación de la marca. */ --icono-estrella: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpolygon%20points='12.00,1.00%2014.47,8.60%2022.46,8.60%2016.00,13.30%2018.47,20.90%2012.00,16.20%205.53,20.90%208.00,13.30%201.54,8.60%209.53,8.60'/%3E%3C/svg%3E"); /* Glifo de WhatsApp, sin color: solo silueta. */ --icono-whatsapp: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347M12.05%2021.785h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%200%201%202.893%206.994c-.003%205.45-4.437%209.885-9.885%209.885M20.52%203.449C18.24%201.245%2015.24%200%2012.045%200%205.463%200%20.104%205.359.101%2011.943c0%202.096.549%204.142%201.595%205.945L0%2024l6.305-1.654a11.882%2011.882%200%200%200%205.683%201.448h.005c6.582%200%2011.941-5.359%2011.944-11.945a11.864%2011.864%200%200%200-3.495-8.404'/%3E%3C/svg%3E"); /* * Estados. * * ANTES: --exito y --verificado eran verde oscuro (14663B, y antes 1B7F4B; * se citan sin almohadilla para que no los reescriba una pasada automática). * AHORA son el azul de marca, que es el azul que SÍ se puede leer sobre * papel claro (7,2:1). No se usa aquí el azul cielo porque como texto sobre * claro da 2,4:1 y no pasa AA: el cielo entra sobre fondo oscuro * (--cielo sobre --noche = 7,1:1), y así lo hacen las hojas que pintan * estos sellos en sección oscura. * * Se pierde la señal cromática «verde = bueno», y se sustituye por una * señal de marca: el sello «Verificado» lleva la ESTRELLA del logotipo. * Es mejor distintivo que el color — funciona también para quien no * distingue verde de rojo, que es 1 de cada 12 hombres. */ --exito: var(--marca); --alerta: #B42318; /* alertas urgentes de noticias */ --verificado: var(--marca); /* distintivo «Verificado el …» de las ayudas */ /* Los mismos dos estados, en su versión para FONDO OSCURO. */ --exito-oscuro: var(--cielo); --verificado-oscuro: var(--cielo); /* --------------------------------------------------------------- * DEGRADADOS * Se declaran una vez porque son identidad, no decoración suelta. * ------------------------------------------------------------- */ /* El relleno de las fichas SIN foto. No es un hueco gris de error: es una pieza diseñada, con la inicial y la categoría, que ocupa su sitio con intención. 77 de las fichas tienen imagen destacada; el resto tiene ESTO. */ --degradado-marca: linear-gradient(135deg, var(--marca) 0%, var(--noche) 78%); --degradado-brasa: linear-gradient(135deg, var(--brasa) 0%, var(--marca-oscuro) 100%); /* El velo que se pone bajo el texto que va SOBRE una fotografía. Sin él, un titular blanco sobre un cielo claro desaparece. Es la diferencia entre «se lee siempre» y «se lee si hay suerte». */ --velo-foto: linear-gradient( to top, rgba(7, 19, 36, .92) 0%, rgba(7, 19, 36, .72) 28%, rgba(7, 19, 36, .18) 62%, rgba(7, 19, 36, 0) 100% ); /* Velo corto, para tarjetas donde solo flota una etiqueta abajo. */ --velo-corto: linear-gradient( to top, rgba(7, 19, 36, .78) 0%, rgba(7, 19, 36, .30) 45%, rgba(7, 19, 36, 0) 100% ); /* Velo lateral: para las piezas donde el texto se apoya a la izquierda de una fotografía apaisada en lugar de en su base. */ --velo-lateral: linear-gradient( to right, rgba(7, 19, 36, .92) 0%, rgba(7, 19, 36, .70) 42%, rgba(7, 19, 36, .10) 100% ); /* ESCALA DE OPACIDADES DE CAPA. La fotografía que sube el dueño de un negocio puede ser un cielo blanco o un cartel negro: no hay un valor de velo que sirva para todas. En vez de que cada hoja invente su rgba(), aquí están los cuatro pasos permitidos y cada pieza elige el suyo por nombre. El nombre dice cuánto texto aguanta encima, no cuánto oscurece — que es la decisión que de verdad se toma. */ --capa-tenue: .28; /* manda la foto; encima no va texto, solo un sello */ --capa-media: .50; /* una etiqueta o una línea corta */ --capa-densa: .72; /* titular + entradilla: es el mínimo que garantiza AA */ --capa-solida: .88; /* la foto pasa a ser textura; el texto es el asunto */ /* --------------------------------------------------------------- * TIPOGRAFÍA * Dos familias y ninguna más. El sitio viejo descargaba cinco * familias con sus 18 pesos (Roboto, Roboto Slab, Archivo, * Montserrat, Poppins) de las que apenas usaba dos, más tres .ttf * comerciales servidos públicamente sin licencia acreditada. * * FRAUNCES para titulares: serif contemporánea con carácter, con eje * óptico variable — a 3rem se afina y a 1rem engorda sola, que es lo * que hace un tipógrafo a mano y aquí lo hace la fuente. * ARCHIVO para texto: grotesca de altísima legibilidad a 14-16px en * pantalla de teléfono barato, que es donde se lee este sitio. * ------------------------------------------------------------- */ /* * UNA SOLA FAMILIA: Archivo variable, con eje de PESO (400-900) y eje de * ANCHURA (62.5-125). * * Antes había aquí una serif editorial (Fraunces). Era un error de dirección: * el logotipo de la marca es tipografía CONDENSADA PESADA EN MAYÚSCULAS con * contornos gruesos —lenguaje de equipo deportivo y de emisora local, no de * revista—. Una serif fina contradecía el único activo visual que la * comunidad ya reconoce. * * Archivo resuelve las dos necesidades con un solo archivo: el eje de anchura * a 75 da la condensada del logotipo para titulares, y a 100 la sans neutra * de buena altura de x para el cuerpo. Menos peso de descarga que dos * familias, y sin salto de marca: el sitio actual ya carga Archivo. */ --fuente-titulo: 'Archivo', 'Arial Narrow', Helvetica, sans-serif; --fuente-texto: 'Archivo', Helvetica, Arial, sans-serif; /* Anchuras del eje variable, nombradas por rol. */ --ancho-titular: 75; /* condensada — H1, H2, sellos */ --ancho-etiqueta: 87; /* semicondensada — eyebrows y nombres de ficha */ --ancho-texto: 100; /* normal — párrafos y listas */ /* Alias de la familia de titulares para las piezas que hablan de «display» (el hero la pide con este nombre). Apunta a --fuente-titulo en lugar de repetir la pila: si algún día se cambia la serif, se cambia en UN sitio. Sin esta línea, hero.css se sostenía sobre el respaldo escrito dentro de su propio var(), que es precisamente la deriva que este archivo evita. */ --fuente-display: var(--fuente-titulo); /* Escala fluida de 7 pasos. Sustituye a los 31 tamaños sueltos: los titulares de sección se pintaban a 85, 75, 65, 60, 50 y 45 px sin criterio, así que cada sección parecía de otro sitio. */ /* El titular del HERO y solo él. Se separa de --fs-hero porque no hacen el mismo trabajo: --fs-hero lo heredan todos los H1 del sitio (la ficha de un negocio, el archivo de empleos), y esos titulares llevan texto largo. El display es la portada, donde el titular es corto y tiene que dominar la pantalla completa. Meterlos en el mismo token obligaba a elegir entre un hero flojo o una ficha con el nombre del negocio ocupando tres renglones. */ --fs-display: clamp(2.75rem, 7vw, 5rem); --fs-hero: clamp(2.6rem, 6.4vw, 4.8rem); --fs-h2: clamp(1.95rem, 4.2vw, 3.1rem); --fs-h3: clamp(1.4rem, 2.4vw, 1.95rem); --fs-h4: 1.22rem; --fs-texto: 1rem; --fs-chico: 0.875rem; --fs-etiqueta:0.75rem; --peso-texto: 400; /* Astra forzaba font-weight:700 en body, botones e inputs: TODO el sitio estaba en negrita y no había jerarquía posible. Este 400 es el cambio de una línea que más sube la percepción de calidad. */ --peso-medio: 500; --peso-fuerte: 700; --peso-titulo: 800; /* Fraunces llega a 900; 800 deja margen para que un titular de portada pese MÁS que un H2 sin cambiar de tamaño. */ --interlineado: 1.65; --interlineado-titulo: 1.08; /* una serif de display aguanta menos aire que una grotesca: a 1.12 los titulares grandes se deshilachaban */ /* El tracking negativo de los titulares. En Fraunces a tamaño grande las letras se separan de más; esto las vuelve a juntar en una palabra. */ --tracking-titulo: -0.02em; /* El display aprieta MÁS que un H2: el tracking correcto depende del tamaño. Lo que a 5rem parece compuesto, a 2rem parece un error de impresión. */ --tracking-display: -0.035em; --tracking-etiqueta: .18em; /* las etiquetas van al revés: abiertas */ /* --------------------------------------------------------------- * RITMO Y LAYOUT * ------------------------------------------------------------- */ --contenedor: 1240px; --contenedor-ancho: 1480px; /* piezas editoriales que respiran más */ --contenedor-texto: 68ch; /* medida de lectura para prosa larga */ --canal: 24px; /* padding lateral */ --seccion-y: clamp(64px, 8.5vw, 128px); /* ÚNICO padding vertical de sección */ --e-1: 8px; --e-2: 16px; --e-3: 24px; --e-4: 32px; --e-5: 48px; --e-6: 64px; --e-7: 96px; /* separación entre los bloques de una composición asimétrica: cuando una pieza grande y sus secundarias tienen que leerse como un conjunto, y no como dos filas seguidas */ /* --------------------------------------------------------------- * FORMAS * Radios generosos en las piezas grandes: es lo que separa una * fotografía «pegada en la página» de una pieza compuesta. * ------------------------------------------------------------- */ --radio-grande: 28px; /* piezas grandes: hero, imágenes a sangre, paneles */ --radio-pieza: var(--radio-grande); /* alias histórico: hay hojas que ya lo piden. Apunta al mismo valor a propósito — dos radios distintos haciendo el mismo trabajo es exactamente la deriva que este archivo existe para impedir. */ --radio-tarjeta: 18px; /* tarjetas de listado */ --radio-chico: 10px; /* controles, avisos, campos */ --radio-pildora: 999px; /* Sombras BAJAS y suaves, teñidas de noche en vez de negras: una sombra negra sobre papel cálido se ve gris sucio. Nunca sombras duras. */ --sombra-1: 0 1px 2px rgba(7, 19, 36, .05), 0 4px 16px rgba(7, 19, 36, .06); --sombra-2: 0 2px 6px rgba(7, 19, 36, .07), 0 18px 40px rgba(7, 19, 36, .12); --sombra-3: 0 30px 70px rgba(7, 19, 36, .22); /* piezas que flotan de verdad */ /* --------------------------------------------------------------- * MOVIMIENTO * Dos duraciones: la de la interfaz (rápida, invisible) y la del * zoom de las fotografías (lenta, que se note que es intencionada). * ------------------------------------------------------------- */ --transicion: 200ms cubic-bezier(.22, .61, .36, 1); --transicion-lenta: 900ms cubic-bezier(.22, .61, .36, 1); --aparicion: 620ms cubic-bezier(.22, .61, .36, 1); /* Las cuatro magnitudes del movimiento. Van como token porque son la diferencia entre «el sitio tiene vida» y «el sitio se mueve solo»: si cada hoja elige su desplazamiento y su zoom, la página entera late a destiempo. */ --aparece-desplazamiento: 16px; /* cuánto sube el bloque al entrar */ --aparece-escalon: 70ms; /* retardo entre hermanos. Por debajo de 60ms la cascada no se percibe; por encima de 120ms el visitante cree que la página va lenta y se va. */ --eleva-hover: -4px; /* cuánto se levanta una tarjeta al pasar por encima */ --zoom-hover: 1.06; /* zoom lento de la foto. Por encima de 1.08 se ve el desenfoque del reescalado y parece una foto mala. */ --cinta-duracion: 38s; /* vuelta completa de la marquesina */ /* * LOS DOS ALTOS DE LA CABECERA, Y POR QUE SON DOS * * --alto-barra la fila del logo, el menu y el conmutador. Es la que * dimensiona el logo y la propia fila. * --alto-cinta la cinta de anuncios que va encima de esa fila. * --alto-cabecera LA SUMA. Es lo que mide de verdad la cabecera fija, y por * tanto lo que tiene que compensar todo lo que se coloca * debajo: el relleno superior del body, el `top` de los * paneles pegajosos de los listados y el scroll-padding que * evita que un ancla quede oculta bajo el menu. * * EL REPARTO ESTA ASI A PROPOSITO. Al anadir la cinta habia dos caminos: * dejar --alto-cabecera como la fila e ir sumandole la cinta en los OCHO * sitios repartidos por seis hojas que se posicionan debajo, o redefinirla * como el total y crear un token nuevo para la fila, que solo se usa en dos. * * Se eligio lo segundo porque el error que evita es peor: olvidarse de sumar * la cinta en uno de esos ocho sitios no rompe nada visible al recargar —solo * deja un panel pegajoso 30px demasiado arriba, o un ancla medio tapada— y es * de los fallos que se descubren semanas despues. */ --alto-barra: 72px; --alto-cinta: 30px; --alto-cabecera: calc(var(--alto-barra) + var(--alto-cinta)); } @media (max-width: 768px) { :root { --canal: 18px; /* En movil se encogen los dos: la fila porque el logo es mas pequeno, y la cinta porque 30px de una pantalla de 640 de alto es casi un 5 % del viewport gastado en algo que no es contenido. */ --alto-barra: 62px; /* * LA CINTA CRECE EN VEZ DE ENCOGER, Y ES UN CAMBIO DE CRITERIO CON MEDIDA * DETRÁS. * * Aquí ponía 28px con el razonamiento de arriba: en una pantalla corta, una * cinta alta gasta viewport en algo que no es contenido. Es cierto, pero se * midió mal el coste del otro lado. La cinta NO es decoración: son 24 * enlaces a ciudades y a categorías, y salen en todas las páginas del sitio. * Con 28px de cinta, cada enlace medía 14 px de alto — el objeto más * pequeño de todo el sitio, repetido 24 veces, y ADEMÁS EN MOVIMIENTO, * porque la cinta se desplaza sola. Acertar un blanco de 14 px que se mueve, * con el pulgar, es de las peores combinaciones que existen. * * A 44px cada enlace cumple la regla de la casa. Cuesta 16 px al principio * de cada página: un 1,9 % de una pantalla de 844. * * SE CAMBIA EL TOKEN Y NO LA ALTURA DEL ELEMENTO a propósito: --alto-cabecera * se calcula a partir de este valor y lo usan el desplazamiento de los * anclajes, el panel pegajoso y media docena de sitios más. Tocar * `.lt-explora { height }` directamente habría dejado todo eso desfasado * 16 px, que es justo el fallo que el comentario de arriba avisa que se * descubre semanas después. */ --alto-cinta: 45px; /* 45 y no 44: la cinta lleva 1px de borde inferior, así que con 44 el enlace se queda en 43 y se cae del mínimo por un píxel. Medido, no calculado. */ /* Los radios grandes se encogen en móvil: 28px en una pieza de 340px de ancho se come la esquina de la fotografía. Se toca --radio-grande y no --radio-pieza porque el segundo es su alias y le sigue solo. */ --radio-grande: 18px; /* En móvil la cascada se acorta: en una pantalla corta entran pocos elementos por pantallazo, y un escalón largo deja de ser un ritmo para convertirse en una espera. */ --aparece-escalon: 45ms; } } /* * Quien pida menos movimiento, recibe menos movimiento. * * Se anulan también las MAGNITUDES, no solo las duraciones. Poner las * duraciones a 1ms deja el movimiento igual de brusco, solo que instantáneo: * el bloque sigue saltando 16px y la foto sigue dando un tirón de escala. Con * el desplazamiento y el zoom a cero, las reglas que los usan no necesitan * saber nada de esta consulta — el token ya viene neutralizado. */ @media (prefers-reduced-motion: reduce) { :root { --transicion: 1ms; --transicion-lenta: 1ms; --aparicion: 1ms; --aparece-desplazamiento: 0px; --aparece-escalon: 0ms; --eleva-hover: 0px; --zoom-hover: 1; } }