/* Shared primary navigation used by Inicio and Ejemplos.
   Values and responsive behavior come from the live local Inicio implementation. */
@font-face{font-family:PG;src:url("media/fonts/inter-latin.woff2") format("woff2");font-display:swap}
.site-header{height:var(--header);position:fixed;z-index:100;inset:0 0 auto;display:grid;grid-template-columns:minmax(190px,1fr) auto minmax(190px,1fr);align-items:center;padding:0 var(--pad);border-bottom:1px solid rgba(255,255,255,.14);background:rgba(10,11,12,.76);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);font-family:PG,"Helvetica Neue",sans-serif;transition:transform .45s cubic-bezier(.2,.75,.2,1),background .3s}
.site-header.is-hidden{transform:translateY(-100%)}
.brand{display:flex;align-items:center;justify-self:start;overflow:hidden}
.nav{display:flex;align-items:center;gap:clamp(20px,2.4vw,40px);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.nav>a{position:relative;padding:31px 0;color:rgba(240,238,232,.78);transition:color .25s}
.nav>a::after{content:"";position:absolute;left:0;bottom:24px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.75,.2,1)}
.nav>a:hover,.nav>a:focus-visible{color:#fff}
.nav>a:hover::after,.nav>a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.menu-toggle{display:none;justify-self:end;width:48px;height:48px;border:1px solid rgba(255,255,255,.14);background:none;color:#fff;position:relative}
.menu-toggle span{position:absolute;left:13px;width:20px;height:1px;background:currentColor}
.menu-toggle span:first-child{top:19px}
.menu-toggle span:nth-child(2){top:27px}
.menu-toggle b{position:absolute;clip:rect(0 0 0 0)}
.hero-light .site-header{background:rgba(211,217,229,.72);border-color:rgba(10,11,12,.14);color:#111318;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.hero-light .nav>a{color:rgba(10,11,12,.72)}
.hero-light .menu-toggle{color:#111318;border-color:rgba(10,11,12,.2)}

@media(max-width:900px){
  :root{--header:70px}
  .site-header{grid-template-columns:1fr auto;backdrop-filter:none;-webkit-backdrop-filter:none}
  .menu-toggle{display:block}
  .nav{position:fixed;top:var(--header);right:0;bottom:auto;left:0;height:calc(100svh - var(--header));display:flex;flex-direction:column;align-items:stretch;gap:0;padding:25px var(--pad);background:rgba(10,11,12,.98);transform:translateX(100%);transition:transform .5s cubic-bezier(.2,.75,.2,1);overflow:auto}
  .nav.is-open{transform:none}
  .nav>a{display:block;width:100%;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.14);text-align:left;font-size:17px}
  .hero-light .nav.is-open{color:#fff}
  .hero-light .nav.is-open>a{color:rgba(255,255,255,.8)}
}