/* ============================================================
   MusiUP — landing cinematográfica · Brandbook v1.0
   Paleta canônica (única fonte de cor permitida)
   ============================================================ */
:root{
  --musiup-noite:#02040A;
  --musiup-azul-profundo:#07172E;
  --musiup-ciano:#00E5FF;
  --musiup-azul:#126CFF;
  --musiup-violeta:#6E3BFF;
  --musiup-magenta:#FF2BFF;
  --musiup-branco:#F7FBFF;
  --grad-principal:linear-gradient(90deg,#00E5FF 0%,#126CFF 34%,#6E3BFF 67%,#FF2BFF 100%);
  --grad-azul:linear-gradient(90deg,#00E5FF,#126CFF);
  --grad-vm:linear-gradient(90deg,#6E3BFF,#FF2BFF);
  --texto-suave:rgba(247,251,255,.78);
  --texto-apagado:rgba(247,251,255,.62);
  /* escala tipográfica única — 6 tamanhos no máximo por viewport */
  --t-legenda:.875rem;                                   /* 14px */
  --t-corpo:clamp(1.0625rem,1vw + .8rem,1.125rem);       /* 17→18px */
  --t-medio:clamp(1.1875rem,1.4vw + .8rem,1.3125rem);    /* 19→21px */
  --t-grande:clamp(1.375rem,2vw + .6rem,1.625rem);       /* 22→26px */
  --t-titulo:clamp(1.75rem,3.8vw,2.9rem);                /* 28→46px */
  --t-display:clamp(2.1rem,5.4vw,4.1rem);                /* 34→66px */
  --borda:rgba(247,251,255,.10);
  --card:rgba(7,23,46,.55);
  --font-display:"Poppins",Arial,sans-serif;
  --font-body:"Inter",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--musiup-noite);
  color:var(--musiup-branco);
  font-family:var(--font-body);
  font-size:var(--t-corpo);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--musiup-violeta);color:var(--musiup-branco)}

h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;font-weight:700}
.eyebrow{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--t-legenda);letter-spacing:.22em;text-transform:uppercase;
  color:var(--musiup-ciano);
  display:inline-block;margin-bottom:14px;
}
.grad-text{
  background:var(--grad-principal);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- preloader ---------- */
#preloader{
  position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;
  background:var(--musiup-noite);
  transition:opacity .7s ease,visibility .7s ease;
}
#preloader.done{opacity:0;visibility:hidden}
#preloader .barra{width:min(280px,60vw);height:2px;background:rgba(247,251,255,.08);border-radius:2px;overflow:hidden}
#preloader .barra i{display:block;height:100%;width:0;background:var(--grad-principal);transition:width .25s ease}
#preloader p{font-size:var(--t-legenda);letter-spacing:.28em;text-transform:uppercase;color:var(--texto-apagado)}

/* ---------- navegação ---------- */
#topo{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(16px,4vw,48px);
  transition:background .4s ease,backdrop-filter .4s ease,box-shadow .4s ease;
}
#topo.solido{
  background:rgba(2,4,10,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--borda);
}
#topo .logo img{height:44px;width:auto}
#topo nav{display:flex;align-items:center;gap:clamp(12px,2.4vw,30px)}
#topo nav a{
  font-size:var(--t-legenda);font-weight:500;text-decoration:none;color:var(--texto-suave);
  transition:color .25s ease;
}
#topo nav a:hover,#topo nav a:focus-visible{color:var(--musiup-ciano)}
#topo .nav-cta{
  padding:9px 18px;border-radius:999px;color:var(--musiup-noite)!important;
  background:var(--musiup-ciano);font-weight:700;
  box-shadow:0 0 18px rgba(0,229,255,.30);
}
#topo .nav-cta:hover{box-shadow:0 0 26px rgba(0,229,255,.5)}
#menu-btn{display:none;background:none;border:0;cursor:pointer;padding:8px}
#menu-btn span{display:block;width:22px;height:2px;background:var(--musiup-branco);margin:5px 0;border-radius:2px}

/* ---------- palco cinematográfico ---------- */
#cinema{position:relative}
#palco{
  position:relative;height:100vh;height:100svh;width:100%;
  overflow:hidden;background:var(--musiup-noite);
}
#tela{position:absolute;inset:0;width:100%;height:100%;display:block}
#palco .veu{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,4,10,.55) 0%,rgba(2,4,10,.25) 30%,rgba(2,4,10,.25) 62%,rgba(2,4,10,.72) 100%);
}
.cap{
  position:absolute;inset:0;display:flex;align-items:center;
  padding:0 clamp(20px,6vw,90px) 110px;
  opacity:0;visibility:hidden;pointer-events:none;
}
.cap.ativa{pointer-events:auto}
.cap-inner{
  max-width:640px;
  /* véu translúcido: deixa o bar aparecer por trás sem perder a leitura */
  background:radial-gradient(120% 100% at 50% 50%,rgba(2,4,10,.62) 0%,rgba(2,4,10,.55) 55%,rgba(2,4,10,.42) 100%);
  border:1px solid rgba(247,251,255,.10);
  border-radius:22px;
  padding:clamp(24px,4vw,40px);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
}
/* sobre o vídeo, gradiente não alcança 7:1 (magenta = 6,9:1 até sobre preto
   puro) — acentos viram ciano sólido; o gradiente segue nas seções */
.cap .eyebrow,.cap .grad-text{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--musiup-ciano);-webkit-text-fill-color:var(--musiup-ciano)}
.cap--centro{justify-content:center;text-align:center}
.cap--centro .cap-inner{max-width:820px}
.cap--dir{justify-content:flex-end}
.cap--dir .cap-inner{text-align:right}
.cap h1{font-size:var(--t-display);font-weight:800;letter-spacing:-.015em}
.cap h2{font-size:var(--t-titulo);font-weight:800;letter-spacing:-.015em}
.cap p.chamada{margin-top:18px;font-size:var(--t-medio);color:rgba(247,251,255,.9);max-width:56ch}
/* legibilidade sobre quadros claros do vídeo: sombra escura, não é glow */
.cap .eyebrow,.cap h1,.cap h2,.cap p.chamada,.cap .selo{
  text-shadow:0 1px 2px rgba(2,4,10,.85),0 4px 26px rgba(2,4,10,.6);
}
/* texto em gradiente é transparente: text-shadow vazaria por dentro das
   letras — usar drop-shadow, que segue o contorno dos glifos */
.cap .grad-text{filter:none}
.cap--dir p.chamada{margin-left:auto}
.cap--centro p.chamada{margin-left:auto;margin-right:auto}
.cap .logo-hero{height:clamp(100px,14.4vw,158px);width:auto;margin:0 auto 26px}
.selos{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;justify-content:inherit}
.cap--centro .selos{justify-content:center}
.selo{
  font-size:var(--t-legenda);font-weight:600;letter-spacing:.06em;
  padding:8px 15px;border-radius:999px;border:1px solid var(--borda);
  background:rgba(2,4,10,.5);color:var(--musiup-branco);
}
.selo b{color:var(--musiup-ciano);font-weight:600}
.acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;justify-content:inherit}
.cap--centro .acoes{justify-content:center}
.botao{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:var(--t-medio);
  padding:13px 26px;border-radius:999px;text-decoration:none;cursor:pointer;border:0;
  transition:transform .25s ease,box-shadow .25s ease;
}
.botao:active{transform:scale(.97)}
.botao--neon{
  color:var(--musiup-noite);background:var(--grad-principal);
  box-shadow:0 0 22px rgba(18,108,255,.35),0 0 44px rgba(255,43,255,.18);
}
.botao--neon:hover{box-shadow:0 0 30px rgba(0,229,255,.4),0 0 60px rgba(255,43,255,.3)}
.botao--vazado{
  color:var(--musiup-branco);background:rgba(2,4,10,.35);
  border:1px solid rgba(247,251,255,.22);
}
.botao--vazado:hover{border-color:var(--musiup-ciano);color:var(--musiup-ciano)}
.botao svg{width:18px;height:18px;flex:0 0 auto}
.passo-num{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--t-display);line-height:1;
  color:var(--musiup-ciano);
  display:block;margin-bottom:6px;
}
.passo-num--card{font-size:var(--t-grande)}
.rolar-dica{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:var(--t-legenda);letter-spacing:.3em;text-transform:uppercase;color:var(--musiup-branco);
}
.rolar-dica span{background:rgba(2,4,10,.78);padding:9px 16px;border-radius:999px}
.rolar-dica i{position:relative;display:block;width:12px;height:42px}
.rolar-dica i::before{
  content:"";position:absolute;left:50%;top:0;
  width:1px;height:30px;
  background:linear-gradient(180deg,transparent,var(--musiup-ciano));
  animation:desce 1.8s ease-in-out infinite;
}
/* ponta em chevron: sugere a seta sem virar ícone pesado */
.rolar-dica i::after{
  content:"";position:absolute;left:50%;bottom:2px;
  width:8px;height:8px;
  border-right:1.5px solid var(--musiup-ciano);
  border-bottom:1.5px solid var(--musiup-ciano);
  transform:translate(-50%,0) rotate(45deg);
  opacity:.8;
}
@keyframes desce{0%{transform:translateX(-50%) scaleY(0);transform-origin:top}45%{transform:translateX(-50%) scaleY(1);transform-origin:top}55%{transform:translateX(-50%) scaleY(1);transform-origin:bottom}100%{transform:translateX(-50%) scaleY(0);transform-origin:bottom}}

/* barra de progresso da jornada */
#trilha{
  position:absolute;right:clamp(14px,3vw,34px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:14px;z-index:5;
}
#trilha button{
  width:8px;height:8px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(247,251,255,.18);transition:background .3s,box-shadow .3s;
  padding:0;
}
#trilha button.on{background:var(--musiup-ciano);box-shadow:0 0 10px var(--musiup-ciano)}

/* ---------- seções pós-cinema ---------- */
.secao{position:relative;padding:clamp(72px,10vw,130px) clamp(20px,6vw,90px)}
.miolo{max-width:1180px;margin:0 auto}
.secao h2{font-size:var(--t-titulo);font-weight:800;letter-spacing:-.015em;max-width:22ch}
.secao .sub{margin-top:14px;color:var(--texto-suave);max-width:52ch;font-size:var(--t-medio)}
.centro{text-align:center}
.centro h2,.centro .sub{margin-left:auto;margin-right:auto}

.grade{display:grid;gap:22px;margin-top:48px}
.grade--2{grid-template-columns:repeat(2,1fr)}
.grade--3{grid-template-columns:1fr;max-width:820px;margin-left:auto;margin-right:auto}
.grade--3 .cartao{display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:start}
.grade--3 .cartao .passo-num--card{grid-row:1/3;margin-bottom:0}
.grade--3 .cartao p{grid-column:2;max-width:56ch}
.grade--4{grid-template-columns:repeat(2,1fr)}

.cartao{
  position:relative;border:1px solid var(--borda);border-radius:18px;
  background:var(--card);padding:26px;overflow:hidden;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.cartao::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:var(--grad-principal);opacity:0;transition:opacity .35s ease;
}
.cartao:hover{transform:translateY(-4px);border-color:rgba(0,229,255,.35);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.cartao:hover::before{opacity:1}
.cartao h3{font-size:var(--t-medio);margin-bottom:8px}
.cartao h4{font-size:var(--t-medio);margin-bottom:6px}
.cartao p{color:var(--texto-suave);font-size:var(--t-corpo)}
.cartao .mini{font-size:var(--t-legenda);letter-spacing:.18em;text-transform:uppercase;color:var(--texto-apagado);display:block;margin-bottom:10px}
.icone{
  width:42px;height:42px;border-radius:12px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.22);
}
.icone svg{width:20px;height:20px;stroke:var(--musiup-ciano)}

/* antes vs depois */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px}
.versus .col{border-radius:20px;padding:30px;border:1px solid var(--borda)}
.versus .col.antes{background:rgba(2,4,10,.6)}
.versus .col.depois{
  background:linear-gradient(160deg,rgba(7,23,46,.9),rgba(2,4,10,.9));
  border-color:rgba(110,59,255,.4);
  box-shadow:0 0 44px rgba(110,59,255,.14) inset,0 0 32px rgba(0,229,255,.06);
}
.versus .rotulo{font-family:var(--font-display);font-weight:700;font-size:var(--t-legenda);letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px;display:block}
.versus .col.antes .rotulo{color:var(--texto-apagado)}
.versus .col.depois .rotulo{color:var(--musiup-ciano)}
.versus li{list-style:none;padding:14px 0;border-top:1px solid var(--borda)}
.versus li b{display:block;font-family:var(--font-display);font-weight:600;margin-bottom:4px}
.versus .col.antes li b{color:var(--texto-suave)}
.versus li p{color:var(--texto-suave);font-size:var(--t-corpo)}

/* mock do telão */
.telao-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;margin-top:48px;align-items:center}
.telao{
  border-radius:18px;border:1px solid rgba(0,229,255,.25);
  background:linear-gradient(170deg,var(--musiup-azul-profundo),var(--musiup-noite) 70%);
  padding:22px;box-shadow:0 0 60px rgba(18,108,255,.14);
}
.telao .ao-vivo{display:flex;align-items:center;gap:8px;font-size:var(--t-legenda);letter-spacing:.2em;text-transform:uppercase;color:var(--texto-apagado);margin-bottom:16px}
.telao .ao-vivo i{width:7px;height:7px;border-radius:50%;background:var(--musiup-magenta);box-shadow:0 0 8px var(--musiup-magenta);animation:pulsa 1.6s infinite}
@keyframes pulsa{50%{opacity:.35}}
.faixa{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:12px}
.faixa+.faixa{margin-top:6px}
.faixa.tocando{background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.25)}
.faixa .pos{font-family:var(--font-display);font-weight:700;color:var(--texto-apagado);width:20px;text-align:center}
.faixa .eq{display:flex;gap:2px;align-items:flex-end;height:16px;width:20px}
.faixa .eq i{width:3px;background:var(--musiup-ciano);animation:eq 1s ease-in-out infinite}
.faixa .eq i:nth-child(2){animation-delay:.2s;background:var(--musiup-azul)}
.faixa .eq i:nth-child(3){animation-delay:.4s;background:var(--musiup-magenta)}
@keyframes eq{0%,100%{height:4px}50%{height:15px}}
.faixa .tit{font-size:var(--t-corpo);font-weight:600}
.faixa .art{font-size:var(--t-legenda);color:var(--texto-apagado)}
.telao .promo{
  margin-top:14px;border-radius:12px;padding:14px 16px;
  background:var(--musiup-magenta);color:var(--musiup-noite);font-family:var(--font-display);
}
.telao .promo b{display:block;font-size:var(--t-corpo);line-height:1.3}
.telao .promo span{font-size:var(--t-legenda)}

/* onde brilha */
.vibes{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:48px}
.vibe{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--borda);min-height:340px;display:flex;align-items:flex-end}
.vibe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.7);transition:transform .6s ease,filter .6s ease}
.vibe:hover img{transform:scale(1.06);filter:saturate(1.05) brightness(.85)}
.vibe .info{position:relative;padding:22px;background:linear-gradient(180deg,transparent,rgba(2,4,10,.92) 45%);width:100%}
.vibe h3{font-size:var(--t-medio);margin-bottom:6px}
.vibe p{font-size:var(--t-corpo);color:var(--texto-suave)}

/* implantação */
.implantacao{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:48px;align-items:center}
.check li{list-style:none;display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--borda);color:var(--texto-suave);max-width:56ch}
.check li b{color:var(--musiup-branco);font-weight:600}
.check .tique{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;margin-top:2px;
  background:rgba(0,229,255,.1);border:1px solid rgba(0,229,255,.4);
  display:flex;align-items:center;justify-content:center;
}
.check .tique svg{width:11px;height:11px;stroke:var(--musiup-ciano)}
.aviso{
  margin-top:26px;padding:16px 18px;border-radius:14px;font-size:var(--t-corpo);color:var(--texto-suave);max-width:56ch;
  border:1px solid rgba(110,59,255,.35);background:rgba(110,59,255,.07);
}
.moldura{border-radius:20px;overflow:hidden;border:1px solid var(--borda);box-shadow:0 24px 70px rgba(0,0,0,.5)}
.moldura img{width:100%;height:100%;object-fit:cover}

/* FAQ */
.faq{max-width:820px;margin:48px auto 0;text-align:left}
.faq details{border-bottom:1px solid var(--borda)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;
  padding:22px 4px;font-family:var(--font-display);font-weight:600;font-size:var(--t-medio);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-weight:400;font-size:1.4rem;line-height:1;color:var(--musiup-ciano);
  transition:transform .3s ease;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 4px 22px;color:var(--texto-suave);max-width:54ch}
.faq-mais{text-align:center;margin-top:34px;color:var(--texto-suave);font-size:var(--t-corpo);max-width:46ch;margin-left:auto;margin-right:auto}
.faq-mais a{color:var(--musiup-ciano);text-decoration:none;border-bottom:1px solid rgba(0,229,255,.4)}
.faq-mais a:hover{border-bottom-color:var(--musiup-ciano)}

/* CTA final */
#contato{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(90px,12vw,160px) clamp(20px,6vw,90px);
}
#contato .fundo-final{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.4;
}
#contato::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(2,4,10,.25) 0%,rgba(2,4,10,.92) 78%);
}
#contato .miolo{position:relative}
#contato h2{font-size:var(--t-titulo)}
#contato .sub{font-size:var(--t-medio);color:var(--texto-suave);max-width:52ch;margin-left:auto;margin-right:auto}
.demo-passos{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,26px);margin:44px 0 40px;flex-wrap:wrap}
.demo-passos .p{
  display:flex;flex-direction:column;gap:6px;min-width:130px;
  font-size:var(--t-corpo);color:var(--texto-suave);
}
.demo-passos .p b{
  font-family:var(--font-display);font-size:var(--t-grande);font-weight:800;
  color:var(--musiup-ciano);
}
.demo-passos .tra{color:var(--texto-suave)}
.cta-alt{margin-top:22px;font-size:var(--t-corpo);color:var(--texto-suave);max-width:46ch;margin-left:auto;margin-right:auto}
.cta-alt a{color:var(--musiup-ciano);text-decoration:none;border-bottom:1px solid rgba(0,229,255,.4)}

/* rodapé */
footer{
  border-top:1px solid var(--borda);
  padding:34px clamp(20px,6vw,90px);text-align:center;
  color:var(--texto-apagado);font-size:var(--t-corpo);
}
footer .linha-grad{height:1px;background:var(--grad-principal);opacity:.5;margin:-35px auto 34px;max-width:280px}
footer a{color:var(--texto-suave);text-decoration:none}
footer a:hover{color:var(--musiup-ciano)}
footer .nota-ia{margin-top:14px;font-size:var(--t-legenda);color:var(--texto-apagado)}

/* reveals: visíveis por padrão; o JS define o estado inicial ao animar */

/* whatsapp flutuante */
#zap-flutuante{
  position:fixed;right:22px;bottom:22px;z-index:80;
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  background:var(--grad-vm);box-shadow:0 8px 26px rgba(255,43,255,.35);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .4s,visibility .4s,transform .4s;
}
#zap-flutuante.on{opacity:1;visibility:visible;transform:none}
#zap-flutuante svg{width:26px;height:26px;fill:var(--musiup-branco)}

/* ---------- responsivo ---------- */
@media (max-width:1020px){
  .grade--4,.versus{grid-template-columns:1fr}
  .vibes{grid-template-columns:1fr}
  .telao-wrap,.implantacao{grid-template-columns:1fr}
}
@media (max-width:760px){
  #topo nav{
    position:fixed;inset:0;flex-direction:column;justify-content:center;gap:30px;
    background:rgba(2,4,10,.96);backdrop-filter:blur(16px);
    opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
  }
  #topo nav.aberto{opacity:1;visibility:visible}
  #topo nav a{font-size:var(--t-medio)}
  #menu-btn{display:block;z-index:95;position:relative}
  .grade--2,.grade--3{grid-template-columns:1fr}
  .vibes{grid-template-columns:1fr}
  .vibe{min-height:260px}
  #trilha{display:none}
  .cap-inner{max-width:100%}
  .cap--dir .cap-inner{text-align:left}
  .cap--dir{justify-content:flex-start}
}

/* ---------- modo leve (reduced motion / sem canvas) ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}
html.modo-leve #palco{height:auto}
html.modo-leve #tela,html.modo-leve #trilha,html.modo-leve .rolar-dica{display:none}
html.modo-leve .cap{
  position:relative;inset:auto;opacity:1;visibility:visible;pointer-events:auto;
  min-height:88vh;background-size:cover;background-position:center;
}
html.modo-leve .cap::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(2,4,10,.72),rgba(2,4,10,.5) 45%,rgba(2,4,10,.85));
}
html.modo-leve .cap-inner{position:relative;padding:90px 0}

/* área clicável mínima de 44px (padrão do projeto): o alvo cresce por
   padding com margem negativa compensando — o visual não muda */
#topo nav a{padding:11px 6px}
#topo .nav-cta{padding:11px 18px!important}
footer a,.faq-mais a,.cta-alt a{display:inline-block;padding:11px 6px;margin:-11px -2px}
footer p{max-width:56ch;margin-left:auto;margin-right:auto}