/* Cabecera compacta inspirada en Inicio 0, exclusiva de la portada definitiva.
   Tipografías del sitio institucional original: Open Sans + Montserrat. */

/* Anclas del navbar: no reservar 110px del redesign.
   El padding-top de cada sección (~70–100px) ya deja aire; al anclar,
   subimos la sección para que ese padding quede bajo el header sticky
   y el kicker (01/07…) quede cerca del menú. */
html:has(body.page-institucional) {
  scroll-padding-top: 0;
}
body.page-institucional main > section[id] {
  scroll-margin-top: 8px;
}
body.page-institucional {
  --sans:"Open Sans",Arial,sans-serif;
  --serif:"Montserrat",Arial,sans-serif;
  /* Misma banda de hero en inicio y páginas archivo/software. */
  --editorial-hero-min-height:clamp(340px,38vh,460px);
  --editorial-hero-band-height:510px;
  --editorial-hero-pad-y:clamp(28px,3vw,44px) 0 clamp(22px,2.4vw,34px);
  font-family:var(--sans);
}
body.page-institucional :is(h1,h2,h3,h4) {font-family:var(--serif)}

/* Altura unificada del hero (portada + archivo + fichas). */
body.page-institucional :is(.editorial-hero, .archive-hero) {
  min-height:var(--editorial-hero-min-height);
  height:var(--editorial-hero-band-height);
  padding:var(--editorial-hero-pad-y);
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}
body.page-institucional :is(.editorial-hero, .archive-hero) > .shell {
  flex:1 1 auto;
  width:min(1236px,calc(100% - 92px));
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-sizing:border-box;
}
body.page-institucional .archive-hero > .shell {
  justify-content:space-between;
  gap:clamp(14px,1.8vw,22px);
}
body.page-institucional .archive-hero-main {
  margin-top:0;
  flex:1 1 auto;
  align-content:center;
}
body.page-institucional .archive-meta {margin-top:0}
body.page-institucional .hero-grid {
  min-height:0;
  padding:0;
  width:100%;
  align-content:center;
}
@media (min-width:861px) and (max-width:1020px) {
  body.page-institucional {--editorial-hero-band-height:530px}
}
@media (max-width:860px) {
  body.page-institucional {
    --editorial-hero-min-height:0;
    --editorial-hero-band-height:560px;
    --editorial-hero-pad-y:46px 0 36px;
  }
  body.page-institucional .archive-hero > .shell {justify-content:flex-start}
  body.page-institucional .archive-hero-main {flex:0 1 auto}
}
@media (max-width:590px) {
  body.page-institucional {--editorial-hero-band-height:700px;--editorial-hero-pad-y:28px 0 28px}
}
@media(max-width:600px) {
  body.page-institucional {--editorial-hero-band-height:700px}
}
@media(max-width:360px) {
  body.page-institucional {--editorial-hero-band-height:820px}
}
body.page-institucional .site-header {
  height:auto; min-height:68px; position:sticky; top:0; z-index:120;
  background:rgba(255,255,255,.97); border-bottom:1px solid #dce3e8;
  box-shadow:0 4px 18px rgba(10,33,50,.075);
}
body.page-institucional .site-header.is-scrolled {box-shadow:0 8px 24px rgba(10,33,50,.12)}
body.page-institucional .site-header__inner {
  width:min(100% - 48px,1160px); min-height:68px; margin:0 auto; padding:5px 0;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
body.page-institucional .site-header__logo {display:flex;align-items:center;min-width:0;flex:0 1 auto;}
body.page-institucional .site-header__logo img {width:auto;max-width:min(200px,38vw);height:49px;max-height:49px;object-fit:contain;object-position:left}
body.page-institucional .site-nav {margin-left:auto;}
body.page-institucional .site-nav > ul {list-style:none;display:flex;align-items:center;gap:4px;margin:0;padding:0;}
body.page-institucional .site-nav li {position:relative;list-style:none;}
body.page-institucional .site-nav a {
  display:inline-flex;align-items:center;gap:7px;min-height:45px;
  padding:9px 12px;text-decoration:none;color:#203e54;
  font-family:var(--sans);font-weight:650;font-size:.85rem;white-space:nowrap;
}
body.page-institucional .site-nav a:hover,
body.page-institucional .site-nav a:focus-visible {color:#176e87}
/* Indicador solo al pasar el cursor o navegar mediante teclado. */
body.page-institucional .site-nav > ul > li > a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;
  background:#177f9b;transform:scaleX(0);transform-origin:center;
  transition:transform .22s ease;
}
body.page-institucional .site-nav > ul > li > a:hover::after,
body.page-institucional .site-nav > ul > li > a:focus-visible::after{
  transform:scaleX(1);
}
body.page-institucional .site-nav .dropdown > ul {
  display:none;position:absolute;top:100%;right:0;min-width:242px;max-width:320px;
  flex-direction:column;align-items:stretch;padding:7px 0;margin:0;
  background:#fff;border:1px solid #d7e3e7;box-shadow:0 16px 35px #12304421;
}
body.page-institucional .site-nav .dropdown:hover > ul,
body.page-institucional .site-nav .dropdown:focus-within > ul,
body.page-institucional .site-nav .dropdown.is-open > ul {display:flex}
body.page-institucional .site-nav .dropdown > ul a {display:flex;white-space:normal;min-height:44px}
body.page-institucional .site-nav .dropdown > ul a:hover {background:#eff8fa}
body.page-institucional .nav-toggle {
  display:none;background:transparent;border:1px solid #ccdce3;border-radius:6px;
  width:46px;height:46px;align-items:center;justify-content:center;
  cursor:pointer;color:#1c4256;font-size:1.5rem;
}
body.page-institucional .site-header a:focus-visible,
body.page-institucional .site-header button:focus-visible {outline:3px solid #177f9b;outline-offset:3px}
body.page-institucional :is(.editorial-hero h1,.section-introduction h2,.software-showcase-heading h2) {overflow-wrap:normal;text-wrap:balance}
body.page-institucional .software-placeholder {
  display:flex;align-items:center;justify-content:center;min-height:190px;
  background:radial-gradient(circle at 75% 20%,#3c759c33,transparent 52%),linear-gradient(130deg,#102b43,#1b5269);
  color:#fff;text-align:center;padding:28px;
}
body.page-institucional .software-placeholder strong {
  font:600 clamp(1.4rem,2.5vw,2.3rem)/1.1 var(--serif);letter-spacing:-.02em;
}
body.page-institucional .software-card .software-pending {color:#35677a;font-weight:700}
body.page-institucional .software-history {margin-top:38px;border-top:1px solid #d5e1e6;padding:20px 0;color:#415b6e}
body.page-institucional .software-history summary {cursor:pointer;font-weight:650;min-height:44px;display:flex;align-items:center}
body.page-institucional .software-history ul {margin:12px 0 0;padding-left:24px;line-height:2}
body.page-institucional .home-news .news-update-note {margin:24px 0;color:#547080;max-width:62ch}
@media(max-width:1020px) {
  body.page-institucional .site-header__inner {width:calc(100% - 34px)}
  body.page-institucional .nav-toggle {display:inline-flex;flex-shrink:0}
  body.page-institucional .site-nav {display:none;position:absolute;left:0;right:0;top:100%;max-height:calc(100dvh - 70px);overflow-y:auto;
      background:white;border-bottom:1px solid #d8e4e8;box-shadow:0 20px 32px #183e5229}
  body.page-institucional .site-nav.is-open {display:block}
  body.page-institucional .site-nav > ul {display:flex;flex-direction:column;align-items:stretch;padding:12px 20px 18px;gap:0}
  body.page-institucional .site-nav > ul > li > a {width:100%;min-height:48px}
  body.page-institucional .site-nav .dropdown > ul {display:flex;position:static;max-width:none;width:100%;box-shadow:none;border:0;
      border-left:2px solid #2e8299;background:#f7fafb;padding:0 0 0 12px}
  body.page-institucional .site-nav .dropdown:hover > ul {display:flex}
}
@media(max-width:650px){
  body.page-institucional .site-header__inner{min-height:62px}
  body.page-institucional .site-header__logo img{height:42px;max-height:42px;max-width:min(186px,58vw)}
}
@media(prefers-reduced-motion:reduce){
  body.page-institucional .site-header,body.page-institucional .site-nav a {transition:none;scroll-behavior:auto}
}

@media(max-width:1020px){
  body.page-institucional .site-nav > ul > li > a::after{left:0;right:auto;top:9px;bottom:9px;width:3px;height:auto;transform:scaleY(0)}
  body.page-institucional .site-nav > ul > li > a:hover::after,
  body.page-institucional .site-nav > ul > li > a:focus-visible::after{transform:scaleY(1)}
}
@media(prefers-reduced-motion:reduce){
  body.page-institucional .site-nav > ul > li > a::after{transition:none}
}