/* ============================================================
   WJR FIXER — sections.css
   Partes repetidas em todas as páginas: menu, rodapé e CTA final.
   O HTML do menu e do rodapé é montado por assets/js/main.js.
   ============================================================ */

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:9002;
  background:rgba(12,12,12,.55);
  backdrop-filter:blur(12px) saturate(1.1);
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
  padding-top:env(safe-area-inset-top);
}
.nav.scrolled{
  background:rgba(20,20,20,.82);
  backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:1480px; margin-inline:auto; padding:1.15rem var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.nav-logo img{ height:26px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:clamp(1.2rem,2.6vw,2.4rem); }
.nav-link{
  font-size:.9rem; font-weight:500; color:var(--off-70);
  letter-spacing:.01em; transition:color .3s; position:relative; padding:.3em 0;
}
.nav-link:hover{ color:var(--off); }
.nav-link.active{ color:var(--off); }
.nav-link.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--sand);
}
.nav-cta{ margin-left:.5rem; padding:.75em 1.3em; font-size:.85rem; }
.nav-burger{ display:none; width:30px; height:20px; position:relative; }
.nav-burger span{
  position:absolute; left:0; height:1.5px; width:100%; background:var(--off);
  transition:.4s var(--ease);
}
.nav-burger span:nth-child(1){ top:2px; }
.nav-burger span:nth-child(2){ top:9px; }
.nav-burger span:nth-child(3){ top:16px; }
body.menu-open .nav-burger span:nth-child(1){ top:9px; transform:rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2){ opacity:0; }
body.menu-open .nav-burger span:nth-child(3){ top:9px; transform:rotate(-45deg); }

/* mobile overlay */
.nav-overlay{
  position:fixed; inset:0; z-index:9001;
  padding-top:clamp(4rem,10vw,5.5rem);
  background:var(--ink);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--gut);
  transform:translateY(-100%); transition:transform .6s var(--ease);
  visibility:hidden;
}
body.menu-open .nav-overlay{ transform:none; visibility:visible; }
.nav-overlay nav{ display:flex; flex-direction:column; }
.nav-overlay a{
  display:block;
  font-size:clamp(2rem,9vw,3.5rem); font-weight:300; letter-spacing:-.02em;
  padding:.28em 0; color:var(--off-70); transition:color .3s, padding-left .4s var(--ease);
  border-bottom:1px solid var(--line);
}
.nav-overlay a:hover, .nav-overlay a.active{ color:var(--off); padding-left:.5rem; }
.nav-overlay a .n{ font-size:.8rem; color:var(--sand); margin-right:1rem; vertical-align:middle; letter-spacing:.1em; }
.nav-overlay .ov-cta{ color:var(--ink); border-bottom:none; padding:.85em 1.6em; font-size:1rem; margin-top:2rem; width:fit-content; }
.nav-overlay .ov-cta:hover{ color:var(--ink); padding-left:1.6em; }
.nav-overlay .ov-foot{ margin-top:2.5rem; color:var(--off-40); font-size:.85rem; letter-spacing:.04em; }

@media(max-width:860px){
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
}

/* ---------- FOOTER ---------- */
.footer{ background:var(--ink); border-top:1px solid var(--line); padding-top:clamp(3.25rem,6.5vw,5.5rem); position:relative; overflow:hidden; }
.footer-ring{ width:340px; height:340px; border:0; opacity:.05; right:-90px; top:40px; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(2rem,5vw,4rem);
  padding-bottom:clamp(2.5rem,5vw,3.25rem);
}
.footer-logo img{ height:30px; margin-bottom:1.5rem; }
.footer-tag{ color:var(--off-55); font-weight:300; max-width:30ch; font-size:1.05rem; }
.footer-socials{
  display:flex; flex-direction:column; gap:.65rem;
  margin-top:1.35rem;
}
.footer-ig{
  display:inline-flex; align-items:center; gap:.5rem;
  width:fit-content;
}
.footer-ig-icon{ flex:none; color:var(--off-55); transition:color .3s var(--ease); }
.footer-ig:hover .footer-ig-icon{ color:var(--sand); }
.footer-col h4{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--off-40); font-weight:600; margin-bottom:.85rem;
}
.footer-col a{
  display:block; color:var(--off-70);
  padding:.22em 0; font-size:.88rem; line-height:1.35;
  transition:color .3s, padding-left .35s var(--ease); width:fit-content;
}
.footer-col a:hover{ color:var(--sand); padding-left:.35rem; }
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  padding-block:1.65rem; border-top:1px solid var(--line); font-size:.82rem; color:var(--off-40);
}
.footer-bottom .sym{ height:20px; opacity:.5; }
.footer-quote{
  font-size:clamp(1.8rem,5vw,3.4rem); font-weight:200; letter-spacing:-.02em;
  padding-block:clamp(2.5rem,5vw,3.5rem); color:var(--off); line-height:1.1; text-wrap:balance;
}
.footer-quote em{ font-style:normal; color:var(--sand); }
@media(max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-logo-col{ grid-column:1/-1; } }
@media(max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- CTA final — Fundo 03 + círculo editorial ---------- */
.section.cta-final{
  padding-block:clamp(2.75rem,5.5vw,4.25rem);
}
.cta-final{
  position:relative; overflow:hidden; background:var(--ink);
}
.cta-final::before{
  content:""; position:absolute; inset:-1%; z-index:0; pointer-events:none;
  background:url("../img/bg-gradient-3.jpg") center center / cover no-repeat;
}
.cta-final::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--wjr-veil);
}
.cta-final > .wjr-grain{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.16;
  mix-blend-mode:soft-light;
  background-image:var(--wjr-grain);
  background-size:180px 180px;
}
.cta-final__in{
  position:relative; z-index:2;
  display:flex; justify-content:center; align-items:center;
  padding-block:clamp(1.35rem,2.8vw,2rem);
}
.cta-final__ring{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(132vw,920px); aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(245,239,232,.22);
  pointer-events:none;
  box-shadow:
    0 0 0 1px rgba(245,239,232,.04) inset,
    0 0 120px rgba(0,0,0,.2) inset;
}
.cta-final__ring::before{
  content:""; position:absolute; inset:clamp(12px,2vw,20px);
  border-radius:50%;
  border:1px solid rgba(245,239,232,.06);
  pointer-events:none;
}
.cta-final__core{
  position:relative; z-index:2;
  text-align:center; max-width:34ch;
  padding-inline:1rem;
}
.cta-final__mark{
  width:clamp(44px,6vw,52px); height:auto;
  margin:0 auto clamp(.85rem,2vw,1.15rem);
  opacity:.92;
}
.cta-final h2{
  font-size:clamp(1.75rem,4.2vw,2.85rem);
  font-weight:200; letter-spacing:-.03em; line-height:1.06;
  color:var(--off); text-wrap:balance;
}
.cta-final__tag{
  margin-top:clamp(.65rem,1.5vw,.9rem);
  font-size:clamp(.95rem,1.8vw,1.1rem);
  font-weight:300; line-height:1.4; color:var(--off-55);
  letter-spacing:.01em; text-wrap:balance;
}
.cta-final .btn-row{
  justify-content:center;
  margin-top:clamp(1.5rem,3vw,2rem);
  gap:clamp(.5rem,1.5vw,.75rem);
  flex-wrap:nowrap;
}
/* Páginas sem subtítulo: reserva o mesmo espaço da Home */
.cta-final h2 + .btn-row{
  margin-top:calc(
    clamp(1.5rem,3vw,2rem)
    + clamp(.65rem,1.5vw,.9rem)
    + clamp(.95rem,1.8vw,1.1rem) * 1.4
  );
}
@media(max-width:560px){
  .cta-final__ring{ width:min(145vw,640px); }
  .cta-final .btn-row .btn{ padding:.72rem 1rem; font-size:.82rem; }
}