/* ==========================================================
   PERKIN — LAYOUT COMPARTIDO (cabecera + footer)
   Fuente única para TODA la web. Se carga en cada página junto
   con js/layout.js, que inyecta el <header> y el <footer>.
   Para cambiar el menú o el footer del sitio entero, edita
   este archivo y js/layout.js. No hace falta tocar cada página.
   ========================================================== */

:root{
  --paper:#f6f8fa;
  --card:#ffffff;
  --ink:#0e1a26;
  --muted:#54677a;
  --line:#dce4ec;
  --line-soft:#e8eef4;
  --brand:#005a9c;
  --brand-strong:#00426f;
  --cyan:#00a9ce;
  --cyan-ink:#007e9b;
  --night:#0b1626;
  --night-2:#12233b;
  --gold:#ffd9a0;
  --shadow:0 1px 2px rgba(14,26,38,.06), 0 8px 24px rgba(14,26,38,.07);
  --shadow-lift:0 2px 4px rgba(14,26,38,.08), 0 14px 34px rgba(14,26,38,.13);
  /* colores por categoría */
  --c-salud:#0a6e8f;
  --c-ia:#3b5bd6;
  --c-energia:#c96a00;
  --c-ciencia:#7c3aad;
  --c-uni:#1c7a4b;
  --c-espacio:#28457e;
  --c-innov:#b3232e;
}

/* contenedor común de la cabecera/footer */
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* Evita desbordamiento horizontal en todo el sitio */
html{ overflow-x:clip; -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* ---- barra superior utilitaria ---- */
.topbar{
  background:var(--night); color:#bcd0e2; font-size:.76rem;
  font-family:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing:normal;
}
.topbar .wrap{
  display:flex; justify-content:space-between; align-items:center;
  min-height:34px; gap:16px;
}
.topbar .live{
  display:inline-flex; align-items:center; gap:7px;
  color:#e8f4fa; letter-spacing:.02em;
}
.topbar .live i{
  width:7px; height:7px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,169,206,.25);
}
.topbar .themes{ white-space:nowrap; opacity:.85; }

/* ---- cabecera / masthead ---- */
.masthead{
  position:sticky; top:0; z-index:40;
  background:var(--card);
  border-bottom:1px solid var(--line);
  font-family:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing:normal;
}
.masthead .wrap{ display:flex; align-items:center; gap:28px; min-height:64px; }
.masthead a{ text-decoration:none; }
.masthead .logo{ display:flex; flex-direction:column; line-height:1.05; }
.masthead .logo .word{ font-size:1.55rem; font-weight:800; letter-spacing:-.03em; color:var(--ink); }
.masthead .logo .word em{ font-style:normal; color:var(--cyan); }
.masthead .logo .claim{
  font-size:.62rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted); margin-top:2px;
}
.mainnav{ display:flex; gap:2px; flex:1; }
.mainnav a{
  padding:22px 12px 19px; font-size:.86rem; font-weight:600; color:var(--muted);
  border-bottom:3px solid transparent;
}
.mainnav a:hover, .mainnav a:focus-visible{ color:var(--ink); border-bottom-color:var(--cyan); }
.mainnav a.active{ color:var(--ink); border-bottom-color:var(--brand); }
.head-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.burger{
  display:none; border:1px solid var(--line); background:transparent;
  border-radius:10px; width:40px; height:40px; cursor:pointer; color:var(--ink);
  align-items:center; justify-content:center;
}

/* menú móvil desplegable */
.mobile-menu{
  display:none; border-top:1px solid var(--line-soft);
  background:var(--card);
}
.mobile-menu.open{ display:block; }
.mobile-menu a{
  display:block; padding:13px 20px; font-size:.92rem; font-weight:600;
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--line-soft);
}
.mobile-menu a:last-child{ border-bottom:0; }

/* chips móviles de sección */
.chipbar{ display:none; border-top:1px solid var(--line-soft); }
.chipbar-inner{
  display:flex; gap:8px; overflow-x:auto; padding:10px 16px;
  scrollbar-width:none; overscroll-behavior-x:contain;
}
.chipbar-inner::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; font-size:.78rem; font-weight:600; color:var(--ink);
  border:1px solid var(--line); border-radius:999px; padding:6px 13px;
  background:var(--card); text-decoration:none;
}
.chip.on{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* En páginas interiores el antiguo .site-header queda como
   simple envoltorio del hero de la página (su gradiente propio
   ya aporta el color). Neutralizamos su fondo/borde heredado. */
.site-header{ background:none; border-bottom:0; box-shadow:none; }

/* ---- footer ---- */
footer.site{
  margin-top:44px; padding:0; border-top:0; box-shadow:none;
  background:var(--night); color:#a9bdd2; font-size:.84rem;
  font-family:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing:normal; line-height:1.55;
}
footer.site .wrap{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:32px; padding-top:40px; padding-bottom:28px;
}
footer.site a{ color:inherit; text-decoration:none; }
footer.site .flogo{ height:42px; width:auto; display:block; }
footer.site p{ margin:10px 0 0; max-width:34ch; line-height:1.6; color:#a9bdd2; }
footer.site h3{
  margin:2px 0 12px; font-size:.68rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.14em; color:#7e95ab;
}
footer.site ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
footer.site ul a:hover{ color:#fff; }
footer.site .foot-bottom{ border-top:1px solid rgba(255,255,255,.09); }
footer.site .foot-bottom .wrap{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:16px 24px; font-size:.74rem; color:#6f8298;
}
footer.site .foot-bottom a:hover{ color:#fff; }

/* ==========================================================
   RESPONSIVE (cabecera + footer)
   ========================================================== */
@media (max-width: 1020px){
  .mainnav a{ padding:22px 9px 19px; font-size:.82rem; }
}
@media (max-width: 760px){
  .wrap{ padding:0 16px; }
  .topbar .themes{ display:none; }
  .mainnav{ display:none; }
  .masthead .wrap{ min-height:56px; justify-content:space-between; }
  .burger{ display:inline-flex; }
  .chipbar{ display:block; }
  footer.site .wrap{ grid-template-columns:1fr 1fr; padding-top:30px; }
}
@media (max-width: 380px){
  footer.site .wrap{ grid-template-columns:1fr; }
}