/* ============================================================
   Páginas SEO de las Apps (/es/apps/, /en/apps/) y de los Útiles
   (/es/utiles/, /en/tools/). Las generan scripts/seo-apps.mjs y
   scripts/seo-utiles.mjs. Se apoyan en seo-estudio.css (héroe, pasos,
   preguntas, banda de créditos y migas) y solo añaden el clip del héroe,
   las tarjetas de App, el índice por categorías y la rejilla de Útiles.

   Familia Cocuyo, acabado ligero: tarjetas como .f-tarjeta (superficie
   sin borde, imagen redondeada dentro), etiquetas de vidrio y la lima
   reservada a la acción principal. Colores solo con var().
   ============================================================ */

/* ---------- Clip del héroe ---------- */
.hero-media.app-clip{aspect-ratio:16/9}
.app-clip video,.app-clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.app-clip video{z-index:1;background:transparent}
.app-clip figcaption{position:absolute;left:14px;bottom:14px;z-index:2;display:flex}
.app-clip figcaption span,.app-card-tag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:var(--f-r-pill);background:var(--f-vidrio);backdrop-filter:var(--vidrio-fino);-webkit-backdrop-filter:var(--vidrio-fino);color:var(--f-texto);font-size:var(--f-t-xs);font-weight:var(--f-peso-ui);line-height:1;white-space:nowrap}
.app-clip figcaption span{letter-spacing:.06em}

/* ---------- Índice de categorías: pastillas fijas bajo la cabecera ---------- */
.apps-indice{position:sticky;top:calc(var(--f-alto-cabecera) + env(safe-area-inset-top));z-index:5;display:flex;gap:4px;width:100vw;margin:var(--f-e-12) 0 0 calc(50% - 50vw);padding:8px calc(50vw - 50%);overflow-x:auto;scrollbar-width:none;background:var(--f-vidrio);backdrop-filter:var(--vidrio);-webkit-backdrop-filter:var(--vidrio);box-shadow:0 1px 0 var(--f-linea)}
.apps-indice::-webkit-scrollbar{display:none}
.apps-indice a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--f-r-pill);font-size:var(--f-t-sm);font-weight:var(--f-peso-ui);color:var(--f-texto-3);white-space:nowrap;transition:color var(--f-rapido),background var(--f-rapido)}
.apps-indice a:hover{color:var(--f-texto);background:var(--f-sup-2)}
.apps-indice a:focus-visible{outline:2px solid var(--f-lima);outline-offset:-2px}
.apps-cat{scroll-margin-top:calc(var(--f-alto-cabecera) + 80px)}
.apps-indice+.apps-cat{padding-top:var(--f-e-16)}

/* ---------- Tarjetas de App ---------- */
.apps-grid{display:grid;gap:var(--f-e-3);grid-template-columns:repeat(2,minmax(0,1fr))}
.app-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:6px 6px var(--f-e-4);border-radius:calc(var(--f-r-tarjeta) + 6px);background:var(--f-sup-1);transition:background var(--f-rapido)}
.app-card:hover{background:var(--f-sup-2)}
.app-card:focus-visible{border-radius:calc(var(--f-r-tarjeta) + 6px)}
.app-card-media{position:relative;display:block;aspect-ratio:16/9;margin-bottom:var(--f-e-2);overflow:hidden;border-radius:var(--f-r-tarjeta);background:var(--f-sup-2)}
.app-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--f-curva)}
.app-card:hover .app-card-media img{transform:scale(1.03)}
.app-card-vacia{position:absolute;inset:0;background:var(--f-sup-2)}
.app-card-tag{position:absolute;left:8px;top:8px;z-index:1}
.app-card strong{padding-inline:8px;font-size:.9375rem;font-weight:var(--f-peso-titulo);line-height:1.3;letter-spacing:-.01em}
.app-card>span:last-child{padding-inline:8px;font-size:var(--f-t-sm);line-height:1.45;color:var(--f-texto-3)}
@media(min-width:720px){
  .apps-grid{gap:var(--f-e-4);grid-template-columns:repeat(3,minmax(0,1fr))}
  .app-card strong{padding-inline:10px;font-size:var(--f-t-4)}
  .app-card>span:last-child{padding-inline:10px}
  .app-card-tag{left:12px;top:12px}
}
@media(min-width:1100px){.apps-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Muy pronto: sin enlace, contorno fino ---------- */
.apps-pronto{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.apps-pronto li{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--f-r-pill);box-shadow:inset 0 0 0 1px var(--f-linea-fuerte);font-size:var(--f-t-sm);color:var(--f-texto-3)}

/* ---------- Volver al índice ---------- */
.apps-volver{margin-top:var(--f-e-12);font-size:.9375rem}
.apps-volver a{display:inline-flex;align-items:center;min-height:44px;color:var(--f-texto-2);transition:color var(--f-rapido)}
.apps-volver a:hover{color:var(--f-texto)}

/* ---------- Índice de Útiles (/es/utiles/, /en/tools/) ---------- */
.seo-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.seo-chips li{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:var(--f-r-pill);background:var(--f-sup-2);font-size:var(--f-t-sm);color:var(--f-texto-2)}
.utiles-rejilla{display:grid;gap:var(--f-e-3);grid-template-columns:minmax(0,1fr)}
.utiles-rejilla a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:4px var(--f-e-4);padding:var(--f-e-6);border-radius:var(--f-r-tarjeta);background:var(--f-sup-1);transition:background var(--f-rapido)}
.utiles-rejilla a:hover{background:var(--f-sup-2)}
.utiles-rejilla strong{font-size:var(--f-t-4);font-weight:var(--f-peso-titulo);line-height:1.3;letter-spacing:-.01em}
.utiles-rejilla span{grid-column:1;font-size:var(--f-t-sm);line-height:1.5;color:var(--f-texto-3)}
.utiles-rejilla .utiles-ir{grid-column:2;grid-row:1;font-size:1rem;color:var(--f-texto-3);transition:color var(--f-rapido),transform var(--f-rapido)}
.utiles-rejilla a:hover .utiles-ir{color:var(--f-texto);transform:translate(2px,-2px)}
@media(min-width:620px){.utiles-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.utiles-rejilla{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media(prefers-reduced-motion:reduce){
  .app-card,.app-card-media img,.apps-indice a,.utiles-rejilla a,.utiles-rejilla .utiles-ir{transition:none}
  .app-card:hover .app-card-media img{transform:none}
}

/* Móvil en árabe y urdu (escritura de derecha a izquierda): el índice de
   categorías ocupa todo el ancho tirando del margen DERECHO. Con el margen
   izquierdo de arriba se salía 16 px por la izquierda, la página se
   ensanchaba y la barra inferior quedaba cortada. Escritorio sin cambios. */
@media (max-width:767px){[dir="rtl"] .apps-indice{margin-left:0;margin-right:calc(50% - 50vw)}}
/* Móvil, catálogo de Apps (/<idioma>/apps/, el que tiene .apps-indice) y
   portada de útiles (/<idioma>/utiles/ o /tools/, la que tiene
   #categorias): hueco de 52 px bajo la cabecera para el campo «Buscar»
   que pone después buscador-global.js. Sin él, la página saltaba hacia
   abajo al aparecer el campo (CLS). Cuando el campo se ve, <html> lleva
   cy-buscar-listo y el hueco se quita (el campo mide lo mismo, ver
   buscador-global.css). Escritorio y demás páginas sin cambios. */
@media (max-width:767px){html:not(.cy-buscar-listo) body:has(> main .apps-indice, > main > #categorias) > .f-cabecera{margin-bottom:52px}}