/* Portada audiovisual y navegación superpuesta inspiradas en la referencia visual. */
.header,
.header.scrolled{
  background:transparent;
  border-bottom-color:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
.nav-wrap{height:96px;position:relative}
.brand{
  display:flex;
  align-items:center;
  padding:8px 14px;
  background:rgba(255,255,255,.94);
  border-radius:15px;
  box-shadow:0 12px 35px rgba(0,0,0,.2);
  transition:transform .3s ease,box-shadow .3s ease;
}
.brand:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(0,0,0,.27)}
.brand img{width:156px}
.header-actions{display:flex;align-items:center;gap:14px}
.header-socials{display:flex;align-items:center;gap:9px}
.header-socials a{
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(6,15,36,.48);
  border:1px solid rgba(255,255,255,.38);
  border-radius:50%;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  backdrop-filter:blur(10px);
  transition:transform .25s ease,background .25s ease,border-color .25s ease;
}
.header-socials a:hover{transform:translateY(-3px) scale(1.05);background:linear-gradient(135deg,#7547a7,#11a9b5);border-color:transparent}
.header-socials svg{width:19px;height:19px;fill:currentColor}
.menu-toggle{
  display:flex;
  width:52px;
  height:52px;
  padding:0;
  border-radius:50%;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  background:linear-gradient(135deg,#7547a7,#11a9b5);
  box-shadow:0 14px 32px rgba(0,0,0,.3);
  position:relative;
  z-index:104;
  transition:transform .3s ease,box-shadow .3s ease;
}
.menu-toggle:hover{transform:scale(1.07);box-shadow:0 18px 38px rgba(0,0,0,.36)}
.menu-toggle span{width:22px;height:2px;margin:3px;background:#fff;transition:transform .35s ease,opacity .25s ease}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nav{
  position:absolute;
  top:88px;
  right:0;
  left:auto;
  width:min(860px,calc(100vw - 40px));
  padding:28px 30px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px 22px;
  background:rgba(7,17,39,.94);
  border:1px solid rgba(255,255,255,.13);
  border-radius:22px;
  box-shadow:0 28px 75px rgba(0,0,0,.42);
  backdrop-filter:blur(22px);
  transform:translateY(12px) scale(.97);
  transform-origin:top right;
  opacity:0;
  visibility:hidden;
  filter:blur(7px);
  transition:opacity .3s ease,transform .35s cubic-bezier(.16,1,.3,1),filter .3s ease,visibility 0s linear .35s;
}
.nav.open{transform:none;opacity:1;visibility:visible;filter:none;transition-delay:0s}
.nav>a:not(.btn){
  color:#fff;
  padding:12px 14px;
  border-radius:12px;
  position:relative;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.nav>a:not(.btn):hover{color:#64eeea;background:rgba(255,255,255,.07);transform:translateX(4px)}
.nav .btn{grid-column:3;padding:12px 18px}
.hero{
  min-height:100svh;
  padding:150px 0 88px;
  align-items:center;
  margin-top:0;
}
.hero-video-stage{inset:0}
.hero-bg-video.is-active{opacity:1}
.hero-video-overlay{
  background:linear-gradient(90deg,rgba(0,0,0,.73) 0%,rgba(0,0,0,.45) 38%,rgba(0,0,0,.08) 72%,transparent 100%);
}
.hero-copy{animation:heroEntrance .9s cubic-bezier(.16,1,.3,1) both}
.hero .eyebrow{color:#63f0ea}
.hero h1{font-size:clamp(3rem,6vw,5.8rem)}
@keyframes heroEntrance{from{opacity:0;transform:translateY(34px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@media(max-width:950px){
  .nav-wrap{height:84px}
  .brand img{width:135px}
  .nav{top:78px;width:min(520px,calc(100vw - 28px));grid-template-columns:1fr 1fr;padding:22px}
  .nav .btn{grid-column:1/-1;width:100%}
  .hero{padding-top:125px}
}
@media(max-width:640px){
  .container.nav-wrap{width:calc(100% - 24px)}
  .brand{padding:6px 10px;border-radius:12px}
  .brand img{width:112px}
  .header-actions{gap:8px}
  .header-socials{gap:6px}
  .header-socials a{width:34px;height:34px}
  .header-socials svg{width:17px;height:17px}
  .menu-toggle{width:46px;height:46px}
  .nav{right:0;grid-template-columns:1fr;max-height:calc(100vh - 105px);overflow:auto;border-radius:18px}
  .nav .btn{grid-column:1}
  .hero{min-height:100svh;padding-top:118px;padding-bottom:65px}
  .hero-video-overlay{background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.28) 50%,rgba(0,0,0,.65))}
  .hero h1{font-size:clamp(2.65rem,13vw,4.3rem)}
}