/* One navigation surface for every page, including the home and editor. */
/* Cabecera fija: se oculta al bajar y reaparece al subir (site.js). Solo usa
   transform para no recalcular el layout; la altura no cambia al desplazarse. */
body > .site-header{font-family:Montserrat,Arial,sans-serif;display:flex;align-items:center;gap:12px;width:100%;min-height:84px;margin:0;padding:10px 24px;background:#fff;color:#171a1c;position:sticky;top:0;z-index:40;border-bottom:1px solid #ececef;box-shadow:none;flex-wrap:nowrap;transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-2) ease}
body > .site-header.is-scrolled{box-shadow:0 6px 24px rgb(16 17 19 / 8%)}
body > .site-header.is-hidden{transform:translateY(-100%)}
.site-header .brand{display:flex;align-items:center;gap:12px;flex:none;color:#171a1c;text-decoration:none}
body .site-header .brand img{width:62px;height:62px;margin:0;object-fit:contain}
.site-header .brand span{font:600 .7rem/1.3 Montserrat,Arial,sans-serif;color:#171a1c}
.site-header .brand b{font-size:.9rem}
.site-header nav{display:flex;flex:1;justify-content:center;align-items:center;gap:12px;margin:0;padding:0;background:white}
.site-header nav a{font:600 .8125rem/1.4 Montserrat,Arial,sans-serif;color:#171a1c;text-decoration:none;letter-spacing:0;white-space:nowrap;position:relative;padding:12px 0;border:0;transition:color var(--dur-2) ease}
.site-header nav a:hover,.site-header nav a[aria-current]{color:#91051d}
/* Subrayado que crece desde el centro: señala el enlace sin mover el texto. */
.site-header nav a:after{content:'';position:absolute;bottom:4px;left:0;right:0;height:2px;background:#91051d;transform:scaleX(0);transition:transform var(--dur-2) var(--ease-out)}
.site-header nav a:hover:after,.site-header nav a[aria-current]:after{transform:scaleX(1)}
.site-header nav a[aria-current]:after{bottom:4px;left:0;right:0}
.site-header .search-link,.site-header .quick-link{display:flex;flex:none;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:10px;color:#91051d;border-radius:4px;transition:background var(--dur-2) ease}
.site-header .search-link:hover,.site-header .quick-link:hover{background:#fcf0f3}
.site-header .header-action{display:flex;align-items:center;gap:10px;min-height:46px;padding:12px 14px;border-radius:4px;background:#91051d;color:white;font:600 .8125rem/1.4 Montserrat,Arial,sans-serif;text-decoration:none;white-space:nowrap;transition:background var(--dur-2) ease}
.site-header .header-action:hover{background:#640215;color:white}
/* Página actual: fondo más oscuro y filete inferior, como el subrayado del menú; el
   contorno queda reservado al foco de teclado. */
.site-header .header-action[aria-current]{background:#650315;box-shadow:inset 0 -3px 0 #ffffff8c}
.site-header .mobile-toggle{display:none;border:0;background:transparent;color:#171a1c;min-width:44px;min-height:44px;padding:10px;border-radius:4px}
.site-header nav .mobile-extra{display:none}
/* Icono de menú que se transforma en aspa. */
.burger{position:relative;display:block;width:24px;height:18px}
.burger i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-2) ease}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){top:8px}.burger i:nth-child(3){top:16px}
[aria-expanded="true"] .burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}
[aria-expanded="true"] .burger i:nth-child(2){opacity:0;transform:scaleX(.2)}
[aria-expanded="true"] .burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* Sin banda de cifras, el hero cabe en el primer pantallazo (1440 × 900: 760 px). */
.home-hero{min-height:max(560px,52.8vw)}
@media(max-width:1600px){.site-header .brand span{display:none!important}}
@media(max-width:1439px){.site-header .quick-link{display:none}}
@media(max-width:1259px){
 body > .site-header{gap:10px;padding:10px 24px}
 .site-header .brand span{display:block!important}
 /* Acciones agrupadas a la derecha: buscar, área familias y menú. */
 .site-header .search-link{margin-left:auto;order:2}
 .site-header .header-action{order:2}
 .site-header .mobile-toggle{display:block;margin-left:0;order:3}
 /* Menú superpuesto: no empuja la página y se anima con opacidad y desplazamiento. */
 .site-header nav{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:6px 24px 18px;max-height:calc(100dvh - var(--header-h,84px));overflow:auto;overscroll-behavior:contain;background:white;border-bottom:1px solid #ececef;box-shadow:0 18px 30px rgb(16 17 19 / 12%);visibility:hidden;opacity:0;transform:translateY(-10px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out),visibility 0s linear var(--dur-3)}
 .site-header nav.open{visibility:visible;opacity:1;transform:none;transition-delay:0s}
 .site-header nav a{font-size:1rem;padding:14px 10px;border-bottom:1px solid #ececef;white-space:normal}
 .site-header nav a:after{display:none}
 .site-header nav a[aria-current]{background:#fcf0f3}
 .site-header nav .mobile-extra{display:block}
 /* Entrada escalonada de los enlaces al abrir. */
 .site-header nav a{opacity:0;transform:translateY(-6px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out),background var(--dur-2) ease,color var(--dur-2) ease}
 .site-header nav.open a{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 22ms)}
 .site-header.menu-open:after{content:'';position:fixed;inset:var(--header-h,84px) 0 0;z-index:-1;background:rgb(16 17 19 / 38%);animation:cbn-fade var(--dur-3) var(--ease-out)}
 /* Sin banda de cifras el hero se ajusta a su contenido (antes 800 px fijos). */
 .home-hero{min-height:0}
 .home-hero .hero-copy{padding-bottom:88px}
}
@media(max-width:640px){
 body > .site-header{min-height:76px;padding:10px 16px;gap:4px}
 body .site-header .brand img{width:48px;height:48px}
 .site-header .brand{gap:8px}
 .site-header .brand span{font-size:.6rem}
 .site-header .brand b{font-size:.72rem}
 .site-header nav{padding:4px 16px 16px}
 .site-header .header-action{display:none}
 .home-hero .hero-copy{padding-bottom:56px}
}
@keyframes cbn-fade{from{opacity:0}}