/* Cabecera de marca compartida — Barrio Verso
   Usada por index.html, gencine.html y cualquier página futura (p.ej. Promptypedia).
   Un único sitio para tocar logo/menú: este archivo + site-header.js.
   Las páginas que la incluyen deben definir en su propio :root al menos:
   --ink, --ink-soft, --font-nav, --line-dark */

#siteHeader{
  border-bottom:1px solid var(--line-dark);
  padding:28px 0 20px;
  margin-bottom:32px;
}
#siteHeader .app-topbar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
  max-width:1040px; margin:0 auto; padding:0 20px;
}
#siteHeader .brand{
  display:flex; align-items:center; gap:18px; justify-self:start;
  text-decoration:none; color:inherit;
}
#siteHeader .logo-mark{ height:64px; width:auto; display:block; }
#siteHeader .brand-text{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
#siteHeader .brand-title{
  font-family:'Inter', var(--font-nav); font-weight:200; font-size:25px; letter-spacing:0.1px;
  color:var(--ink);
}
#siteHeader .wordmark{
  font-family:var(--font-nav); font-weight:200; font-size:25px; letter-spacing:0.1px;
  color:var(--ink-soft); margin:0;
}
#siteHeader .header-category{
  font-family:var(--font-nav); font-weight:500; font-size:13px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--ink); justify-self:center;
}
#siteHeader nav{ justify-self:end; }
#siteHeader .cat-movil{ display:none; }
#siteHeader nav a{
  font-family:var(--font-nav); font-weight:500;
  color:var(--ink-soft); text-decoration:none; font-size:14px; letter-spacing:0;
  margin-left:26px;
  border-bottom:1px solid transparent; padding-bottom:2px;
}
#siteHeader nav a:hover,
#siteHeader nav a.activo{ color:var(--ink); border-bottom-color:var(--ink); }

@media(max-width:640px){
  #siteHeader .app-topbar{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:12px; }
  #siteHeader .brand, #siteHeader .header-category, #siteHeader nav{ justify-self:center; }
  /* En el móvil: el logo arriba y centrado, «Barrio Verso IA» debajo, y «Producción Film». */
  #siteHeader .brand{ flex-direction:column; gap:10px; }
  #siteHeader .brand-text{ justify-content:center; }
  #siteHeader .cat-movil{ display:inline; }
  #siteHeader nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 0; }
  #siteHeader nav a{ margin:0 9px; white-space:nowrap; }
}