/* ============================================================
   Página de cada Útil gratis (/es/utiles/<útil>/, /en/tools/<tool>/ y
   los otros 18 idiomas). La genera scripts/seo-utiles.mjs, que solo enlaza
   esta hoja en las páginas de un útil (no en el índice ni en los hubs).

   Dueño, 4-oct-2026: «los útiles gratuitos con iconos en cada paso, todo
   súper cómodo de leer». Aquí:
   - franja «1 → 2 → 3» con los pasos encima de la herramienta;
   - un icono en cada paso, en cada ventaja (chips) y en cada tarjeta;
   - lectura cómoda: líneas de 60–70 caracteres, interlineado amplio,
     contraste suficiente y aire entre bloques.

   Reglas (las de seo-estudio.css):
   - Colores y medidas SOLO con var(): tokens.css y los --f-* de familia.css.
     La lima no aparece aquí: queda para la acción principal y el foco.
   - Iconos: los del sprite común con la clase .icono de familia.css (trazo
     fino, currentColor). Son decorativos (aria-hidden) en el HTML.
   - Propiedades lógicas (inline/block): árabe y urdu (dir="rtl") invierten
     solos la franja, las tarjetas y las ventajas.
   - Móvil primero; con «reducir movimiento» no hay transiciones.
   ============================================================ */

/* ---------- Héroe: icono propio, título fuerte, entrada y ventajas ----------
   Dueño, 8-oct-2026 (estilo Higgsfield): el icono del útil (Nano Banana,
   assets/media/utiles/iconos/<id>.webp) a la altura de la etiqueta y el
   título en mayúsculas, más compacto, para que la herramienta suba. */
.utl-hero{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:var(--f-e-4)}
.utl-hero>*{grid-column:1/-1}
.utl-hero>.utl-hero-ico{grid-column:1;grid-row:1}
.utl-hero>.utl-hero-ico+.eyebrow{grid-column:2;grid-row:1;margin:0}
.utl-hero-ico{display:block;inline-size:64px;block-size:64px;border-radius:18px;overflow:hidden;background:var(--negro-abismo);box-shadow:0 0 0 1px var(--f-linea-fuerte)}
.utl-hero-ico img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.utl-hero h1{max-width:22ch;margin-block:var(--f-e-5) var(--f-e-4);font-size:clamp(2rem,1.35rem + 2.3vw,3.25rem);font-weight:760;line-height:1;letter-spacing:-.035em;text-transform:uppercase}
.utl-hero .lead{max-width:62ch;line-height:1.6}
/* Ordenador: el título a la izquierda y la entrada con las ventajas a su
   derecha, para que la herramienta empiece antes. Desde 1200 px, los útiles
   de «una sola pantalla» ponen el héroe en su columna
   (utiles-una-pantalla.css). */
@media (min-width:1024px){
  .utl-hero{padding-block:clamp(20px,.5rem + 1.6vw,40px) var(--f-e-6)}
  .utl-hero{grid-template-columns:auto minmax(0,1.2fr) minmax(0,1fr);align-items:start;max-width:none}
  .utl-hero>.utl-hero-ico+.eyebrow{grid-column:2/-1;align-self:center}
  .utl-hero>h1{grid-column:1/3;grid-row:2/4;max-width:none;margin-block-end:0}
  .utl-hero>.lead{grid-column:3;grid-row:2;margin-block:var(--f-e-5) 0;padding-inline-start:var(--f-e-10);font-size:1rem}
  .utl-hero>.utl-chips{grid-column:3;grid-row:3;align-self:start;margin-block-start:var(--f-e-4);padding-inline-start:var(--f-e-10)}
}
.utl-chips{gap:var(--f-e-2);margin-block-start:var(--f-e-6);font-size:var(--f-t-sm);line-height:1.35;color:var(--f-texto-2)}
.utl-chips li{gap:var(--f-e-2);min-height:34px;padding-block:6px;padding-inline:10px 14px;border-radius:var(--f-r-pill);background:var(--f-sup-1);box-shadow:inset 0 0 0 1px var(--f-linea)}
.utl-chips li::before{content:none;display:none}
.utl-chips .icono{color:var(--f-texto-3);stroke-width:1.75}
/* Teléfono (la idea de «un útil en una sola pantalla»): héroe corto para que
   la herramienta suba: icono y título más pequeños y las ventajas en una
   fila que se desliza. La entrada se lee entera (es el texto principal de
   la ficha y lo que Google indexa primero en el móvil): nada de cortarla
   con puntos suspensivos. */
@media (max-width:767px){
  .utl-hero{padding-block:var(--f-e-4) var(--f-e-5)}
  .utl-hero-ico{inline-size:48px;block-size:48px;border-radius:14px}
  .utl-hero h1{margin-block:var(--f-e-4) var(--f-e-3);font-size:clamp(1.625rem,1.1rem + 2.6vw,2rem);line-height:1.04}
  .utl-hero .lead{margin-block-end:0;font-size:.9375rem;line-height:1.5}
  .utl-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-block-start:var(--f-e-4);margin-inline:calc(var(--f-gutter) * -1);padding-inline:var(--f-gutter)}
  .utl-chips::-webkit-scrollbar{display:none}
  .utl-chips li{flex:none;white-space:nowrap}
}

/* ---------- Franja «1 → 2 → 3» (arriba de la herramienta) ----------
   Tres columnas en todos los anchos: el icono con su número y, debajo, el
   título corto del paso. Una línea fina une cada icono con el siguiente y
   termina en un pequeño ángulo que apunta al paso que sigue. */
.utl-flujo{
  --flujo-ico:36px;
  --flujo-hueco:var(--f-e-3);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--flujo-hueco);
  margin:0 0 var(--f-e-5);padding:0 0 var(--f-e-5);list-style:none;
  box-shadow:0 1px 0 var(--f-linea)
}
.utl-flujo li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--f-e-2);min-width:0}
.utl-flujo-ico{position:relative;display:grid;place-items:center;flex:none;width:var(--flujo-ico);height:var(--flujo-ico);border-radius:var(--f-r-control);background:var(--f-sup-2);color:var(--f-texto)}
.utl-flujo-ico .icono{width:18px;height:18px}
/* Número del paso, en la esquina del icono (lado final de la línea). */
.utl-flujo-n{position:absolute;inset-block-start:-6px;inset-inline-end:-8px;display:grid;place-items:center;min-width:18px;height:18px;padding-inline:4px;border-radius:var(--f-r-pill);background:var(--f-sup-3);color:var(--f-texto);font-family:var(--fuente-mono);font-size:.6875rem;font-weight:var(--f-peso-ui);line-height:1;font-variant-numeric:tabular-nums}
.utl-flujo-t{font-size:.8125rem;font-weight:var(--f-peso-ui);line-height:1.35;color:var(--f-texto-2);overflow-wrap:break-word;hyphens:auto;text-wrap:pretty}
/* Línea entre pasos: del icono al siguiente (por encima del hueco). */
.utl-flujo li:not(:last-child)::after{
  content:"";position:absolute;inset-block-start:calc(var(--flujo-ico) / 2);
  inset-inline-start:calc(var(--flujo-ico) + 14px);inset-inline-end:calc(var(--flujo-hueco) * -1 + 8px);
  height:1px;background:var(--f-linea-fuerte)
}
/* Ángulo al final de la línea: «>» (o «<» en árabe y urdu). */
.utl-flujo li:not(:last-child)::before{
  content:"";position:absolute;inset-block-start:calc(var(--flujo-ico) / 2 - 3px);inset-inline-end:calc(var(--flujo-hueco) * -1 + 8px);
  width:6px;height:6px;border-block-start:1px solid var(--f-texto-3);border-inline-end:1px solid var(--f-texto-3);transform:rotate(45deg)
}
[dir="rtl"] .utl-flujo li:not(:last-child)::before{transform:rotate(-45deg)}
@media (min-width:480px){.utl-flujo{--flujo-ico:40px;--flujo-hueco:var(--f-e-4)}.utl-flujo-t{font-size:.875rem}}
@media (min-width:900px){.utl-flujo{--flujo-ico:44px;--flujo-hueco:var(--f-e-6);margin-block-end:var(--f-e-6);padding-block-end:var(--f-e-6)}.utl-flujo-ico .icono{width:20px;height:20px}.utl-flujo-t{font-size:.9375rem}}

/* ---------- La herramienta ---------- */
/* Menos aire hasta «Cómo se usa»: la sección siguiente ya trae el suyo. */
.utl-herramienta{margin-block-end:var(--f-e-8)}
/* Enlace a la herramienta completa o a un útil hermano, bajo la herramienta. */
.utl-herramienta>.utl-alias{margin-block:var(--f-e-4) 0;font-size:.875rem;line-height:1.5}

/* ---------- «Cómo se usa»: tres pasos con icono ---------- */
.utl-pasos li{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:var(--f-e-4);row-gap:var(--f-e-5)}
.utl-pasos li>div{grid-column:1/-1}
.utl-pasos .number{justify-self:end;font-size:.8125rem}
.utl-paso-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--f-r-tarjeta);background:var(--f-sup-2);color:var(--f-texto)}
.utl-pasos li h3{margin-block-end:var(--f-e-2);line-height:1.35}
.utl-pasos li p{max-width:60ch;font-size:1rem;line-height:1.6;color:var(--f-texto-2);text-wrap:pretty}

/* ---------- Texto corrido ---------- */
.utl-hero~.section .section-lead{max-width:68ch;line-height:1.65;color:var(--f-texto-2)}

/* ---------- Preguntas: fáciles de recorrer ----------
   Todo el texto sigue en el HTML (<details>), visible para buscadores. */
.utl-faq summary{min-height:56px;padding-block:var(--f-e-4);font-size:1rem;line-height:1.45;text-wrap:pretty}
.utl-faq details p{max-width:68ch;font-size:1rem;line-height:1.65;color:var(--f-texto-2);text-wrap:pretty}
.utl-faq details[open]>summary{color:var(--f-texto)}

/* ---------- Tarjetas de otros útiles, con su icono ---------- */
.utl-otros{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:var(--f-e-3)}
.utl-otros a{grid-template-columns:auto minmax(0,1fr);align-content:start;column-gap:var(--f-e-3);row-gap:2px;padding:var(--f-e-4);border:0;border-radius:var(--f-r-tarjeta);background:var(--f-sup-1);box-shadow:inset 0 0 0 1px var(--f-linea);transition:background var(--f-rapido),box-shadow var(--f-rapido)}
.utl-otros a:hover{border-color:transparent;background:var(--f-sup-2);box-shadow:inset 0 0 0 1px var(--f-linea-fuerte)}
.utl-otros a>.utl-otros-ico{grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--f-r-control);background:var(--f-sup-2);color:var(--f-texto-2);transition:color var(--f-rapido)}
.utl-otros a:hover>.utl-otros-ico{color:var(--f-texto)}
.utl-otros a>strong{align-self:end;font-size:.9375rem;font-weight:var(--f-peso-titulo);line-height:1.35;color:var(--f-texto)}
.utl-otros a>span:last-child{font-size:var(--f-t-sm);line-height:1.5;color:var(--f-texto-3)}

@media (prefers-reduced-motion:reduce){
  .utl-otros a,.utl-otros a>.utl-otros-ico{transition:none}
}