/* ============================================================
   C-MOVA — v5 · vidro só onde faz sentido
   Nav cápsula, botões, molduras dos mockups, plano em destaque
   (border-beam) e modal. Fallback sem backdrop-filter no fim.
   ============================================================ */
@property --beam{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ── nav cápsula de vidro ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;padding:.8rem 0;transition:transform .5s var(--ease)}
.nav.hide{transform:translateY(-120%)}
.nav__inner{position:relative;margin-inline:auto;max-width:calc(var(--maxw) - 2*var(--pad));width:calc(100% - 2*var(--pad));display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.4rem .4rem .4rem 1.2rem;border-radius:99px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(6,5,11,.55);
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.07),0 18px 40px -24px rgba(0,0,0,.8);transition:background .4s}
body[data-tone="light"] .nav__inner{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),rgba(21,8,29,.82)}
.nav__logo img{height:22px;width:auto}
.nav__links{display:flex;gap:.1rem}
.nav__links a{display:inline-block;padding:.5rem .85rem;border-radius:99px;font-size:.92rem;font-weight:500;color:var(--ink-2);transition:color .2s,background .2s;font-variant-numeric:tabular-nums}
.nav__links a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav__actions{display:flex;align-items:center;gap:.5rem}
.burger{display:none;width:42px;height:42px;border-radius:50%;place-items:center;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.burger svg{width:20px;height:20px}
.burger__close{display:none!important}
.nav.menu-open .burger__open{display:none!important}
.nav.menu-open .burger__close{display:inline-block!important}
.nav__mobile{position:fixed;inset:0;z-index:800;display:flex;flex-direction:column;justify-content:center;gap:.2rem;padding:var(--pad);
  background:rgba(3,2,7,.78);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.nav__mobile.open{opacity:1;visibility:visible}
.nav__mobile a:not(.btn){display:flex;align-items:center;gap:.8rem;font-family:var(--f-display);font-weight:600;font-size:2.1rem;letter-spacing:-.03em;padding:.35rem 0;border-bottom:1px solid var(--line)}
.nav__mobile a:not(.btn) svg{width:24px;height:24px;color:var(--accent-hi)}
.nav__mobile .btn{margin-top:1.4rem;align-self:flex-start}
@media (max-width:1000px){.burger{display:grid}.nav__inner .nav__links,.nav__actions .nav__pdf{display:none}}

/* ── botões ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-weight:700;border-radius:99px;padding:.85rem 1.4rem;font-size:.97rem;letter-spacing:-.01em;transition:transform .4s var(--ease),background .3s,box-shadow .3s,color .3s;position:relative;overflow:hidden;isolation:isolate}
.btn svg{width:17px;height:17px}
.btn--sm{padding:.55rem 1rem;font-size:.88rem}
.btn--lg{padding:1rem 1.7rem;font-size:1.03rem}
.btn--primary{background:linear-gradient(180deg,#d374f5,#c851f0 55%,#b23ee0);color:#14041c;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 30px -12px rgba(200,81,240,.8)}
.btn--primary:hover{background:linear-gradient(180deg,#e3a0fb,#d374f5 55%,#c04ae8)}
.btn--ghost{color:var(--ink);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.12)}
.btn--ghost:hover{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05))}
.btn--dark{background:var(--light-ink);color:#f6f0fa}
.btn--dark:hover{background:#2d1040}
/* ícone que desliza (sai pelo canto, entra pelo lado oposto) */
.btn__ico{position:relative;display:inline-block;width:17px;height:17px;overflow:hidden}
.btn__ico>*{position:absolute;inset:0;transition:transform .45s var(--ease)}
.btn__ico>*:last-child{transform:translate(-120%,120%)}
.btn:hover .btn__ico>*:first-child{transform:translate(120%,-120%)}
.btn:hover .btn__ico>*:last-child{transform:none}

/* ── molduras de mockup (vidro fino) ── */
.frame{position:relative;border-radius:22px;padding:8px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 80px -40px rgba(0,0,0,.9)}

/* ── border-beam: luz que percorre a borda ── */
.beam{isolation:isolate}
.beam::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--beam),transparent 0deg,transparent 250deg,rgba(233,165,255,.95) 310deg,#c851f0 335deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:beam 7s linear infinite}
@keyframes beam{to{--beam:360deg}}
.plan--feat.beam{position:relative}

/* ── modal ── */
.modal__bd{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.modal__box{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),rgba(10,8,16,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 120px -40px rgba(0,0,0,.9)}
.modal__x{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}

/* ── fallback: sem backdrop-filter ── */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav__inner{background:rgba(10,8,16,.96)}
  .nav__mobile{background:rgba(3,2,7,.98)}
  .frame{background:#0a0910}
  .btn--ghost{background:#1b1724}
}
@media (prefers-reduced-motion:reduce){
  .beam::before{animation:none;background:linear-gradient(135deg,rgba(233,165,255,.7),transparent 40%,transparent 60%,rgba(200,81,240,.6))}
}
@media (max-width:640px){
  .nav{padding:.6rem 0}
  .nav__inner{width:calc(100% - 1.5rem);padding:.35rem .35rem .35rem .9rem}
  .nav__logo img{height:19px}
}


/* ── rodada 5: header estilo Sterling + compactação no scroll estilo Onefin ── */
.nav{padding:0 var(--pad);border-bottom:1px solid rgba(255,255,255,.09);transition:padding .6s var(--ease),border-color .5s,transform .5s var(--ease)}
.nav__inner{width:100%;max-width:1240px;padding:1.05rem 0;border-radius:99px;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
  transition:max-width .7s var(--ease),padding .6s var(--ease),background .5s,box-shadow .5s,gap .6s var(--ease)}
.nav__logo{display:block;width:158px;overflow:hidden;flex:none;transition:width .6s var(--ease)}
.nav__logo img{height:23px;width:auto;max-width:none}
.nav__links{gap:.3rem;padding:.25rem;border-radius:99px;transition:background .5s,box-shadow .5s}
.nav.scrolled{padding-top:.7rem;border-bottom-color:transparent}
.nav.scrolled .nav__inner{max-width:900px;padding:.4rem .4rem .4rem .55rem;gap:.7rem;justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(8,6,14,.58);
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.08),0 18px 40px -24px rgba(0,0,0,.8)}
.nav.scrolled .nav__logo{width:30px}
.nav.scrolled .nav__links{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.nav.scrolled .nav__pdf{display:none}
@media (min-width:1001px){.nav.scrolled .nav__inner{justify-content:center;gap:1.3rem;padding-left:1.1rem}}
@media (max-width:1000px){.nav__logo{width:140px}.nav.scrolled .nav__logo{width:140px}.nav.scrolled .nav__inner{justify-content:space-between;max-width:none}}
body[data-tone="light"] .nav{border-bottom-color:rgba(21,8,29,.1)}
body[data-tone="light"] .nav:not(.scrolled) .nav__links a{color:var(--light-ink-2)}
body[data-tone="light"] .nav:not(.scrolled) .nav__logo img{filter:brightness(0)}
@media (max-width:1000px){.nav__logo,.nav.scrolled .nav__logo{width:130px}.nav__logo img{height:19.3px}}

/* ── rodada 6: menu colapsado estilo Onefin (3 peças soltas: ícone redondo, pílula de links, botão) ── */
@media (min-width:1001px){
  .nav.scrolled .nav__inner{width:max-content;max-width:none;padding:0;gap:.7rem;justify-content:center;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav.scrolled .nav__logo,
  .nav.scrolled .nav__links{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),rgba(10,8,16,.6);
    -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.09),0 18px 40px -24px rgba(0,0,0,.8)}
  .nav.scrolled .nav__logo{width:54px;height:54px;border-radius:50%;padding-left:13.5px;display:flex;align-items:center}
  .nav.scrolled .nav__logo img{height:23px;clip-path:inset(0 128px 0 0)}
  .nav.scrolled .nav__links{padding:.3rem;gap:.15rem}
  .nav.scrolled .nav__actions .btn--primary{box-shadow:0 12px 34px -12px rgba(200,81,240,.8)}
  .nav__logo{height:auto}
}

/* ── rodada 8: menu no topo também em peças soltas (logo | pílula de vidro | botão), como o Onefin ── */
@media (min-width:1001px){
  .nav{border-bottom-color:transparent}
  .nav:not(.scrolled) .nav__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
  .nav:not(.scrolled) .nav__actions{justify-self:end}
  .nav:not(.scrolled) .nav__links{padding:.3rem;gap:.15rem;
    background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02)),rgba(10,8,16,.55);
    -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.09),0 18px 40px -24px rgba(0,0,0,.8)}
  body[data-tone="light"] .nav:not(.scrolled) .nav__links a{color:var(--ink-2)}
  body[data-tone="light"] .nav:not(.scrolled) .nav__links a:hover{color:#fff}
}

/* ── rodada 9: transições do colapso (largura, altura, recorte do logo e vidro suaves) ── */
@media (min-width:1001px){
  .nav__logo{height:54px;display:flex;align-items:center;border-radius:99px;
    transition:width .76s var(--ease),padding .76s var(--ease),border-radius .76s var(--ease),background .6s,box-shadow .6s}
  .nav__logo img{clip-path:inset(0 0 0 0);transition:clip-path .76s var(--ease)}
  .nav__links{transition:padding .76s var(--ease),background .6s,box-shadow .6s,-webkit-backdrop-filter .6s,backdrop-filter .6s}
  .nav__links a{transition:color .2s,background .2s,padding .5s var(--ease)}
  .nav.scrolled .nav__logo img{clip-path:inset(0 128px 0 0)}
  .nav__pdf{transition:opacity .35s,transform .5s var(--ease)}
  .nav.scrolled .nav__pdf{opacity:0;transform:scale(.9)}
}