/* ══════════════════════════════════════
   TOKENS + RESET
══════════════════════════════════════ */
:root {
  --navy:   #05165E;
  --navy2:  #0A0F2E;
  --blue:   #06177E;
  --red:    #D72327;
  --gold:   #FAC018;
  --gold2:  #FFB600;
  --cream:  #F5F0E8;
  --white:  #FFFFFF;
  --dark:   #0A0F1E;
  --txt:    #0D1B2A;
  --muted:  #5A6A80;
  --border: #E0D8CC;
  --ft: 'Novecento Sans Wide', sans-serif;
  --fb: 'BC Novatica CYR', sans-serif;
  --gap: clamp(1.2rem, 4vw, 2.8rem);
  --max: 1320px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-family:var(--fb);}
body{font-family:var(--fb);background:var(--white);color:var(--txt);overflow-x:hidden;}
img{display:block;width:100%;height:100%;object-fit:cover;}
a{text-decoration:none;color:inherit;font-family:inherit;}
button,input,select,textarea,optgroup{font-family:inherit;}
button{cursor:pointer;border:none;}
h1,h2,h3,h4,h5,h6{font-family:var(--ft);}

/* ── TOPBAR ── */
.topbar{
  background:var(--navy2);padding:.35rem var(--gap);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.topbar-badge{
  display:flex;align-items:center;gap:8px;
  font-family:var(--ft);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
.topbar-badge span{
  width:5px;height:5px;background:var(--gold);border-radius:50%;
  animation:blink 2s infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.topbar-right{display:flex;align-items:center;gap:1.4rem;}
.topbar-right a{font-size:.68rem;color:rgba(255,255,255,.42);transition:color .2s;}
.topbar-right a:hover{color:var(--white);}
.lang-sw{display:flex;gap:2px;border-left:1px solid rgba(255,255,255,.1);padding-left:.9rem;margin-left:.3rem;}
.lang-sw a{font-family:var(--ft);font-size:.6rem;font-weight:600;padding:.15rem .38rem;border-radius:2px;color:rgba(255,255,255,.28);transition:all .2s;}
.lang-sw a.on{background:var(--gold);color:var(--navy2);}

/* ── NAV ──
   Estado inicial (sobre el hero): sticky, transparente, texto blanco.
   Estado .scrolled: fondo blanco sólido, texto navy.
   El hero.css aplica un margin-top negativo para que el video quede
   visualmente debajo del nav transparente, sin dejar huecos. */
.site-nav{
  position:sticky;top:0;z-index:400;
  display:flex;align-items:stretch;justify-content:space-between;
  padding:0 var(--gap);
  background:transparent;
  transition:background .4s,box-shadow .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.site-nav.scrolled{
  background:var(--white);
  border-bottom:1px solid rgba(5,22,94,.08);
  box-shadow:0 4px 20px rgba(5,22,94,.08);
}

/* Logo — dos versiones superpuestas, se alternan según el estado del nav */
.nav-logo{display:flex;align-items:center;gap:12px;padding:.6rem 0;position:relative;}
.logo-img{
  height:68px;width:auto;object-fit:contain;display:block;
  transition:opacity .3s ease;
}
.logo-img-white{position:absolute;left:0;top:.6rem;opacity:1;}
.logo-img-color{opacity:0;}
.site-nav.scrolled .logo-img-color{opacity:1;}
.site-nav.scrolled .logo-img-white{opacity:0;}

.logo-info{border-left:2px solid rgba(255,255,255,.3);padding-left:10px;margin-left:8px;transition:border-color .4s;}
.logo-info strong{display:block;font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--white);line-height:1.3;transition:color .4s;}
.logo-info span{font-size:.53rem;color:rgba(255,255,255,.6);transition:color .4s;}
.site-nav.scrolled .logo-info{border-color:rgba(5,22,94,.12);}
.site-nav.scrolled .logo-info strong{color:var(--navy);}
.site-nav.scrolled .logo-info span{color:var(--muted);}

/* Links — blancos sobre el hero, navy al hacer scroll */
.nav-links{display:flex;align-items:stretch;}
.nav-links a{
  display:flex;align-items:center;padding:0 .8rem;
  font-size:.72rem;font-weight:600;color:var(--white);letter-spacing:.03em;
  border-bottom:2px solid transparent;transition:color .4s,opacity .2s,border-color .2s;white-space:nowrap;opacity:.8;
}
.nav-links a:hover,.nav-links a.active{color:var(--white);border-color:var(--gold);opacity:1;}
.site-nav.scrolled .nav-links a{color:var(--navy);opacity:.65;}
.site-nav.scrolled .nav-links a:hover,
.site-nav.scrolled .nav-links a.active{color:var(--navy);opacity:1;}

.nav-cta{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:.4rem;
  align-self:center;height:32px;
  padding:0 1.05rem;margin:0 .2rem 0 .7rem;
  border-radius:999px;
  background:linear-gradient(115deg,#FAC018 0%,#FFB300 50%,#FF9D00 100%);
  font-family:var(--ft);font-size:.58rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:#0A0F1E;
  box-shadow:0 2px 18px rgba(250,192,24,.38),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .22s,box-shadow .22s;
}
/* specular highlight fijo en borde superior */
.nav-cta::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.28) 0%,transparent 55%);
  pointer-events:none;
}
/* sweep de brillo animado */
.nav-cta::after{
  content:'';position:absolute;
  top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:cta-shine 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes cta-shine{
  0%{left:-80%;opacity:0;}
  15%{opacity:1;}
  100%{left:130%;opacity:0;}
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(250,192,24,.52),inset 0 1px 0 rgba(255,255,255,.4);}
.nav-cta .cta-sep{opacity:.45;font-weight:400;}
.nav-cta .cta-arr{font-size:.9em;opacity:.75;transition:transform .2s;}
.nav-cta:hover .cta-arr{transform:translateX(3px);}
.nav-cta .cta-short{display:none;}

/* ── Mobile: botón nav compacto ── */
@media (max-width: 768px) {
  .nav-cta{
    height:30px;
    padding:0 .7rem;
    font-size:.52rem;
    letter-spacing:.06em;
    margin:0 .1rem 0 .3rem;
  }
  .nav-cta .cta-full{display:none;}
  .nav-cta .cta-short{display:inline;}
  .nav-cta .cta-sep{display:none;}
  .nav-cta .cta-arr{display:none;}
}

/* Hamburger — 3 líneas estilo profesional */
.nav-ham{
  display:none;align-items:center;justify-content:center;
  width:42px;height:42px;background:transparent;border:none;cursor:pointer;
  border-radius:8px;transition:background .2s;padding:0;flex-direction:column;gap:5px;
  margin-left:.4rem;
}
.nav-ham span{
  display:block;width:22px;height:2px;background:var(--white);border-radius:1px;
  transition:background .4s;
}
.site-nav.scrolled .nav-ham span{background:var(--navy);}
.nav-ham:hover{background:rgba(255,255,255,.12);}
.site-nav.scrolled .nav-ham:hover{background:rgba(5,22,94,.06);}