/* ============================================================ Portada de los Útiles gratis (/es/utiles/, /en/tools/ y los otros 18 idiomas) y sus hubs de categoría (/es/utiles/imagen/, /en/tools/image/…). La enlaza scripts/seo-utiles.mjs solo en esas páginas, que llevan . Estilo Higgsfield /apps (dueño, 8-oct-2026): - título en mayúsculas, compacto, y debajo una barra fija con el buscador y las pestañas (web/assets/js/utiles-portada.js las hace filtrar); - rejillas limpias de tarjetas con el icono propio de cada útil (Nano Banana, assets/media/utiles/iconos/.webp) arriba y grande; - en el móvil, cada categoría de la portada es un carril horizontal y en los hubs una rejilla de dos columnas. Al buscar o elegir una pestaña, los carriles pasan a rejilla para ver todos los resultados. Reglas (las de seo-estudio.css): colores solo con var(); propiedades lógicas (árabe y urdu se leen de derecha a izquierda); la lima solo en el foco; con «reducir movimiento», sin transiciones. ============================================================ */ /* ---------- Héroe ---------- */ .utl-portada main .hero--texto{padding-block:clamp(28px,1rem + 3vw,64px) 0} .utl-portada main .hero--texto h1{max-width:22ch;margin-block-end:var(--f-e-4);font-size:clamp(2.125rem,1.45rem + 2.4vw,3.25rem);font-weight:760;line-height:1;letter-spacing:-.035em;text-transform:uppercase} .utl-portada main .hero--texto .lead{max-width:60ch;margin-block-end:var(--f-e-5);font-size:1rem;line-height:1.55;color:var(--f-texto-3)} .utl-portada main .hero--texto .eyebrow{margin-block-end:var(--f-e-4)} /* ---------- Barra: buscador + pestañas, fija bajo la cabecera ---------- */ .utl-barra{ position:sticky;inset-block-start:calc(var(--f-alto-cabecera) + env(safe-area-inset-top,0px));z-index:6; display:flex;align-items:center;gap:var(--f-e-3); margin-block-start:var(--f-e-8);margin-inline:calc(50% - 50vw);padding-block:10px;padding-inline:calc(50vw - 50%); background:var(--f-fondo);box-shadow:0 1px 0 var(--f-linea) } .utl-buscar{flex:none;display:flex;align-items:center;gap:8px;inline-size:264px;block-size:44px;padding-inline:12px;border-radius:12px;background:var(--f-sup-1);box-shadow:inset 0 0 0 1px var(--f-linea);color:var(--f-texto-3);cursor:text;transition:box-shadow var(--f-rapido)} .utl-buscar:focus-within{box-shadow:inset 0 0 0 1px var(--f-lima)} .utl-buscar .icono{flex:none;inline-size:18px;block-size:18px} .utl-buscar input{flex:1;min-inline-size:0;block-size:100%;margin:0;padding:0;border:0;background:none;color:var(--f-texto);font:inherit;font-size:.9375rem;outline:none;appearance:none;-webkit-appearance:none} .utl-buscar input::placeholder{color:var(--f-texto-3);opacity:1} .utl-buscar input:focus,.utl-buscar input:focus-visible{outline:none;box-shadow:none} .utl-buscar input::-webkit-search-decoration{-webkit-appearance:none} .utl-tabs{flex:1;min-inline-size:0;display:flex;gap:2px;padding:4px;border-radius:12px;background:var(--f-sup-1);overflow-x:auto;scrollbar-width:none;overscroll-behavior-inline:contain} .utl-tabs::-webkit-scrollbar{display:none} .utl-tabs a{flex:none;display:inline-flex;align-items:center;gap:6px;block-size:36px;padding-inline:14px;border-radius:10px;font-size:.875rem;font-weight:var(--f-peso-ui);line-height:1;color:var(--f-texto-3);white-space:nowrap;transition:color var(--f-rapido),background var(--f-rapido)} .utl-tabs a>span{font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--f-texto-3)} .utl-tabs a:hover{color:var(--f-texto)} .utl-tabs a[aria-current]{background:var(--f-sup-3);color:var(--f-texto)} .utl-tabs a:focus-visible{outline:2px solid var(--f-lima);outline-offset:-2px;border-radius:10px} /* Pestañas que no caben (los hubs tienen de 7 a 12 grupos y en el ordenador la barra mide unos 960 px). utiles-portada.js envuelve el