@font-face{font-family:'Titillium Web';font-style:normal;font-weight:300;font-display:swap;src:url('../assets/fonts/titillium-300.woff2') format('woff2')}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/titillium-400.woff2') format('woff2')}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/titillium-600.woff2') format('woff2')}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/titillium-700.woff2') format('woff2')}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:900;font-display:swap;src:url('../assets/fonts/titillium-900.woff2') format('woff2')}
@font-face{font-family:'Titillium Web';font-style:italic;font-weight:700;font-display:swap;src:url('../assets/fonts/titillium-700-italic.woff2') format('woff2')}

/* =========================================================
   Tokens — identidade RDG (marinho #05183c + âmbar #F0A93B)
   ========================================================= */
:root{
  --navy-950:#03102a;
  --navy-900:#05183c;
  --navy-800:#0a2454;
  --navy-700:#123068;
  --amber:#F0A93B;
  --amber-2:#FFC873;
  --white:#ffffff;
  --dim:rgba(224,233,248,.76);
  --dim-2:rgba(224,233,248,.54);
  --line:rgba(255,255,255,.13);
  --line-forte:rgba(255,255,255,.24);
  --tela-fundo:#eef1f7;
  --r-lg:24px; --r-md:18px; --r-sm:14px; --r-xs:12px;
  --font:'Titillium Web',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* ---------------------------------------------------------
     Ritmo vertical
     Três degraus, não um valor só: a distância entre duas
     seções conta se o assunto continua ou se virou. Curto para
     quem emenda no anterior, padrão para o corpo da leitura,
     longo para virada de assunto. Tudo fluido com a largura,
     com piso confortável no celular — proposta comercial
     precisa de ar, aperto demais vira panfleto.
     --------------------------------------------------------- */
  --ritmo:clamp(56px,6.4vw,96px);
  --ritmo-curto:clamp(38px,4.2vw,62px);
  --ritmo-longo:clamp(68px,7.4vw,118px);
  /* faixa em que o fundo de uma seção se dissolve na vizinha */
  --dissolve:clamp(60px,7vw,124px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--navy-950); color:var(--white);
  font-family:var(--font); font-weight:400; font-size:17px; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3,h4{margin:0; font-weight:900; line-height:1.06; letter-spacing:-.02em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong{font-weight:700; color:var(--white)}
:focus-visible{outline:3px solid var(--amber); outline-offset:3px; border-radius:4px}

.wrap{width:min(1180px,92vw); margin:0 auto}
.wrap-estreito{width:min(880px,92vw); margin:0 auto}
section{position:relative; padding:var(--ritmo) 0; overflow:clip}

/* ---------------------------------------------------------
   O ritmo da página, seção a seção. Quem continua o assunto
   da anterior encosta nela; quem abre assunto novo respira.
   --------------------------------------------------------- */
#sistema{padding-top:var(--ritmo-longo)}      /* o problema vira solução */
#fluxo{padding-top:var(--ritmo-curto)}        /* o mesmo sistema, agora em movimento */
#telas{padding-top:var(--ritmo-curto)}        /* o fluxo visto por dentro */
#paineis{padding-top:var(--ritmo-curto)}      /* ainda são telas */
#instagram{padding-top:var(--ritmo-longo)}    /* canal novo */
#seguranca{padding-top:var(--ritmo-longo)}    /* assunto novo */
#investimento{padding-top:var(--ritmo-longo)} /* o centro comercial da página */
#depois{padding-top:var(--ritmo-curto)}       /* fecha o assunto do preço */
#proximo-passo{padding-top:var(--ritmo-longo)}/* o fecho */
.kicker{
  display:inline-block; margin:0 0 18px; color:var(--amber);
  font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.26em;
}
h2{font-size:clamp(1.85rem,4.4vw,3.15rem); max-width:20ch}
h2.larga{max-width:24ch}
.sub{color:var(--dim); font-size:clamp(1rem,1.5vw,1.16rem); max-width:62ch; margin-top:18px}
.split-title .w{display:inline-block; overflow:clip; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em}
.split-title .w>span{display:inline-block}
.amarelo{color:var(--amber)}

/* botões */
.btn{
  display:inline-block; padding:15px 30px; border-radius:999px;
  font-weight:700; font-size:.92rem; letter-spacing:.03em; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-amber{background:var(--amber); color:var(--navy-950)}
.btn-amber:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(240,169,59,.32)}
.btn-ghost{border:2px solid var(--line-forte); color:var(--white)}
.btn-ghost:hover{border-color:var(--amber); color:var(--amber); transform:translateY(-3px)}

/* =========================================================
   Barra de progresso e menu
   ========================================================= */
.progresso{
  position:fixed; inset:0 auto auto 0; height:3px; width:100%;
  background:var(--amber); transform-origin:0 50%; transform:scaleX(0); z-index:90;
}
.nav{position:fixed; inset:0 0 auto 0; z-index:60; padding:16px min(3vw,36px); transition:padding .35s ease}
.nav.solid{padding:9px min(3vw,36px)}
.nav-pilula{
  height:64px; display:flex; align-items:center; gap:18px;
  padding:0 12px 0 22px; border:1px solid var(--line);
  border-radius:999px; background:rgba(5,24,60,.5);
  backdrop-filter:blur(14px) saturate(1.25); -webkit-backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:0 12px 40px rgba(0,0,0,.28); transition:height .35s ease, background .35s ease;
}
.nav.solid .nav-pilula{height:56px; background:rgba(5,24,60,.9)}
.nav-brand{display:flex; align-items:center; flex-shrink:0}
.nav-brand img{height:34px; width:auto}
.nav-links{display:flex; align-items:center; gap:clamp(14px,2vw,30px); margin-left:auto}
.nav-links a{font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--dim); transition:color .25s; white-space:nowrap}
.nav-links a:hover{color:var(--amber)}
.nav-cta{
  flex-shrink:0; background:var(--amber); color:var(--navy-950)!important;
  font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  padding:11px 20px; border-radius:999px; white-space:nowrap;
}
.nav-toggle{display:none; width:44px; height:44px; flex:0 0 44px; margin-left:auto; border:0; background:none; cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:5px; z-index:61}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--white); transition:transform .3s, opacity .3s}
.nav.aberto .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.aberto .nav-toggle span:nth-child(2){opacity:0}
.nav.aberto .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   Hero
   ========================================================= */
.hero{min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:120px 0 80px}
.hero-media{position:absolute; inset:-6%; z-index:0; will-change:transform;
  background:
    radial-gradient(1100px 620px at 78% 14%, rgba(240,169,59,.2), transparent 62%),
    radial-gradient(900px 700px at 8% 88%, rgba(18,48,104,.85), transparent 66%),
    linear-gradient(160deg,var(--navy-900) 0%, var(--navy-950) 62%, #020b1d 100%);
}
.hero-grade{position:absolute; inset:0; z-index:1; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(1000px 620px at 50% 34%,#000 0%,transparent 78%);
          mask-image:radial-gradient(1000px 620px at 50% 34%,#000 0%,transparent 78%);
}
.hero-content{position:relative; z-index:2}
.hero-para{display:inline-block; margin-bottom:26px; padding:9px 18px; border:1px solid var(--line-forte); border-radius:999px; font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--dim)}
.hero h1{font-size:clamp(2.35rem,6.2vw,5rem); max-width:17ch}
.hero-sub{margin-top:26px; max-width:56ch; color:var(--dim); font-size:clamp(1.03rem,1.7vw,1.28rem)}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.hero-meta{margin-top:34px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px 26px; color:var(--dim-2); font-size:.82rem; letter-spacing:.04em}
.hero-scroll{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2; color:var(--dim-2); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.24em}
.hero-scroll::after{content:""; display:block; width:1px; height:34px; margin:10px auto 0; background:linear-gradient(var(--amber),transparent)}

/* =========================================================
   Marquee
   ========================================================= */
.marquee-caixa{overflow:clip; position:relative; z-index:3}
.marquee{background:var(--amber); overflow:clip; padding:14px 0; position:relative; z-index:3; transform:rotate(-.9deg) scale(1.03)}
.marquee-track{display:flex; white-space:nowrap; will-change:transform}
.marquee-track span{color:var(--navy-950); font-weight:900; font-size:1rem; letter-spacing:.05em; text-transform:uppercase; padding-right:34px}

/* =========================================================
   Cartões genéricos
   ========================================================= */
.grade{display:grid; gap:20px; margin-top:clamp(30px,3.6vw,50px)}
.grade-3{grid-template-columns:repeat(3,1fr)}
.grade-2{grid-template-columns:repeat(2,1fr)}
.cartao{
  padding:30px 28px; border:1px solid var(--line); border-radius:var(--r-md);
  background:linear-gradient(150deg,rgba(18,48,104,.42),rgba(5,24,60,.28));
}
.cartao h3{font-size:1.1rem; margin-bottom:10px; letter-spacing:-.01em}
.cartao p{color:var(--dim); font-size:.97rem; line-height:1.65}
.cartao-num{display:block; margin-bottom:14px; color:var(--amber); font-size:.72rem; font-weight:700; letter-spacing:.2em}

.citacao{
  margin-top:clamp(30px,3.6vw,46px); padding:26px 30px;
  border-left:3px solid var(--amber); border-radius:0 var(--r-md) var(--r-md) 0;
  background:rgba(240,169,59,.07);
}
.citacao p{font-size:clamp(1.15rem,2.3vw,1.55rem); font-weight:700; line-height:1.4; letter-spacing:-.015em}
.citacao cite{display:block; margin-top:12px; color:var(--dim-2); font-size:.82rem; font-style:normal; letter-spacing:.06em}

/* =========================================================
   Moldura de navegador para as capturas
   ========================================================= */
.janela{
  border-radius:var(--r-md); overflow:hidden; background:var(--tela-fundo);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 70px rgba(0,0,0,.46), 0 2px 0 rgba(255,255,255,.08) inset;
}
.janela-topo{display:flex; align-items:center; gap:7px; padding:11px 15px; background:#dfe4ee; border-bottom:1px solid #cbd2e0}
.janela-topo i{width:10px; height:10px; border-radius:50%; background:#c2c9d8}
.janela-topo i:nth-child(1){background:#f0a93b}
.janela-url{margin-left:12px; padding:4px 14px; border-radius:999px; background:#eef1f7; color:#5b6580; font-size:.68rem; font-weight:600; letter-spacing:.04em}
.janela-corpo{overflow:hidden}
.janela img{width:100%; height:auto}

/* =========================================================
   Telas do CRM: blocos alternados
   ========================================================= */
.tela{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.34fr); gap:clamp(28px,4vw,64px); align-items:center; margin-top:clamp(44px,5.2vw,78px)}
.tela:first-of-type{margin-top:clamp(32px,3.6vw,54px)}
.tela.invertida .tela-texto{order:2}
.tela.invertida .tela-arte{order:1}
.tela-num{display:flex; align-items:center; gap:12px; margin-bottom:16px; color:var(--amber); font-size:.74rem; font-weight:700; letter-spacing:.2em}
.tela-num::after{content:""; flex:1; height:1px; background:var(--line); max-width:70px}
.tela-texto h3{font-size:clamp(1.35rem,2.5vw,1.85rem); margin-bottom:14px}
.tela-texto p{color:var(--dim); font-size:1rem}
.tela-arte{position:relative}
.tela-arte .janela{will-change:transform}

/* destaque escrito ao lado da captura: o ponto de atenção que antes
   virava recorte de zoom agora é frase. Usado na #sistema e na #telas. */
.tela-ponto{
  position:relative; margin-top:clamp(15px,1.8vw,22px);
  padding:14px 0 2px 18px; border-top:1px solid var(--line);
}
.tela-ponto::before{
  content:""; position:absolute; left:0; top:14px; bottom:2px; width:3px;
  border-radius:2px; background:linear-gradient(180deg,var(--amber),rgba(240,169,59,0));
}
.tela-ponto b{
  display:block; margin-bottom:7px; color:var(--amber);
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.2em;
}
.tela-ponto p{margin:0; color:var(--white); font-size:1rem; font-weight:600; line-height:1.5}

/* aviso de dados fictícios */
.aviso-dados{
  display:flex; gap:16px; align-items:flex-start;
  margin-top:28px; padding:20px 24px; border-radius:var(--r-md);
  border:1px solid rgba(240,169,59,.4); background:rgba(240,169,59,.08);
}
.aviso-dados svg{flex-shrink:0; width:24px; height:24px; margin-top:2px; stroke:var(--amber)}
.aviso-dados p{color:var(--dim); font-size:.95rem}
.aviso-dados strong{color:var(--amber)}

/* =========================================================
   Linha do tempo horizontal (fluxo de venda)
   ========================================================= */
.fluxo{padding-bottom:0}
.tl-pin{min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; gap:clamp(18px,3.2vh,36px); padding:92px 0 34px}
.tl-cab{position:relative}
.tl-dica{margin-top:14px; color:var(--dim-2); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.22em}
.tl-track{position:relative; display:flex; gap:clamp(24px,2.6vw,44px); width:max-content; padding:0 8vw; align-items:center; will-change:transform}
.tl-linha{position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--navy-700),var(--amber)); box-shadow:0 0 20px rgba(240,169,59,.28)}
.tl-item{position:relative; width:320px; flex-shrink:0; padding:30px 28px; border:1px solid var(--line); border-radius:var(--r-md);
  background:linear-gradient(150deg,rgba(18,48,104,.72),rgba(5,24,60,.86)); backdrop-filter:blur(2px)}
.tl-passo{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; margin-bottom:16px;
  border-radius:50%; background:var(--amber); color:var(--navy-950); font-weight:900; font-size:1.05rem}
.tl-item h3{font-size:1.12rem; margin-bottom:10px}
.tl-item p{color:var(--dim); font-size:.95rem; line-height:1.6}

/* ---------------------------------------------------------
   A IA do atendimento, personificada (só na seção do fluxo)
   Todas as variações do arco entram por custom properties que
   o JS escreve no .livia; o CSS só as consome. Assim o scroll
   escreve um objeto de estilo por quadro, não N tweens.
   Os valores padrão abaixo são o estado "atuando": é o que
   aparece sem JS e com "reduzir movimento" ligado.
   --------------------------------------------------------- */
.tl-pin{--lv:clamp(200px,36vh,360px); --lv-fig:calc(var(--lv) - 38px); --lv-w:calc(var(--lv-fig) * 0.761)}
.livia{
  --op:1; --sc:1; --tx:0px; --br:1.08; --sat:1; --aura:.62; --fio:0; --eq:0;
  display:none;
}
.livia-palco{position:relative; width:100%; height:var(--lv-fig)}
.livia-fig{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:var(--op); transform:translate3d(var(--tx),0,0) scale(var(--sc));
  transform-origin:64% 62%; filter:brightness(var(--br)) saturate(var(--sat));
  will-change:transform,opacity;
}
/* o brilho de trás é o que diz "ela está atuando agora" */
.livia-aura{
  position:absolute; inset:-16% -20% -4% -20%; border-radius:50%; opacity:var(--aura);
  background:radial-gradient(closest-side,rgba(240,169,59,.30),rgba(240,169,59,.09) 54%,transparent 78%);
}
.livia-passe{
  display:flex; align-items:center; justify-content:flex-end; gap:9px; margin-top:12px;
  font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
}
.livia-no{display:inline-flex; align-items:center; gap:6px; color:var(--dim-2)}
.livia-no i{
  width:15px; height:15px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-forte); border-radius:5px;
}
.livia-no-ia{color:rgba(240,169,59,calc(.45 + .55 * (1 - var(--eq))))}
.livia-no-ia i{border-color:rgba(240,169,59,calc(.30 + .55 * (1 - var(--eq))))}
.livia-no-ia i::before{content:''; width:8px; height:2px; border-radius:2px; background:currentColor}
.livia-no-eq{color:rgba(240,169,59,calc(.26 + .74 * var(--eq)))}
.livia-no-eq i{border-radius:50%; border-color:rgba(255,255,255,calc(.18 + .34 * var(--eq)))}
.livia-no-eq i::before{content:''; width:4px; height:4px; border-radius:50%; transform:translateX(-3px);
  background:currentColor; box-shadow:6px 0 0 currentColor}
/* o bastão: a barra enche e o ponto anda da IA para a equipe */
.livia-fio{position:relative; width:40px; height:2px; flex-shrink:0; background:var(--line-forte); border-radius:2px}
.livia-fio b{position:absolute; inset:0; border-radius:2px; background:var(--amber); transform-origin:0 50%; transform:scaleX(var(--fio))}
.livia-fio em{
  position:absolute; top:50%; left:0; width:7px; height:7px; margin-left:-3px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 9px rgba(240,169,59,.7);
  opacity:calc(var(--fio) * (1 - var(--fio)) * 4);
  transform:translate3d(calc(var(--fio) * 40px),-50%,0);
}

/* desktop: ela mora no canto direito do cabeçalho e o texto abre espaço
   para ela. Nunca desce até a faixa dos cartões. */
@media (min-width:901px){
  .tl-cab{padding-right:calc(var(--lv-w) + 38px)}
  .livia{display:block; position:absolute; right:0; bottom:-4px; z-index:0; width:var(--lv-w)}
  .tl-track{z-index:1}
}

/* =========================================================
   Painéis a construir
   ========================================================= */
.painel{margin-top:clamp(32px,3.8vw,56px)}
.painel-cab{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; margin-bottom:15px}
.painel-cab h3{font-size:clamp(1.3rem,2.4vw,1.75rem)}
.painel-tag{padding:6px 14px; border-radius:999px; border:1px dashed rgba(240,169,59,.55); color:var(--amber); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em}
.painel-grade{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr); gap:clamp(24px,3.4vw,48px); align-items:center}
.painel-lista li{position:relative; padding:0 0 0 26px; margin-bottom:13px; color:var(--dim); font-size:.98rem; line-height:1.6}
.painel-lista li::before{content:""; position:absolute; left:0; top:.62em; width:9px; height:9px; border-radius:50%; background:var(--amber)}
.painel-custo{
  margin-top:18px; padding:14px 18px; border-left:3px solid var(--amber);
  border-radius:0 var(--r-sm) var(--r-sm) 0; background:rgba(240,169,59,.08);
  color:var(--dim); font-size:.94rem; line-height:1.55;
}
.painel-nota{margin-top:18px; color:var(--dim-2); font-size:.84rem}

/* =========================================================
   Investimento
   O centro comercial da página: à esquerda o que a clínica
   recebe, à direita o que ela paga, e embaixo o pacote em dois
   grupos: o que já vem incluso e o que só custa a mais se a
   clínica passar do incluso.
   ========================================================= */
.invest{background:linear-gradient(180deg,var(--navy-950),var(--navy-900) 55%,var(--navy-950))}
.invest-duplo{
  display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(20px,3vw,40px); align-items:start; margin-top:clamp(30px,3.6vw,46px);
}
.invest-entrega{padding:clamp(24px,3vw,34px); border:1px solid var(--line); border-radius:var(--r-lg); background:rgba(3,16,42,.5)}
.invest-entrega h3{font-size:clamp(1.08rem,2vw,1.32rem)}
.invest-entrega .inclui{grid-template-columns:1fr; gap:11px; margin-top:20px}
.invest-entrega .inclui li{font-size:.95rem; line-height:1.45; padding-left:28px}
.invest-entrega .inclui li::before{left:2px}
.invest-numeros{display:grid; gap:16px}
.invest-cartao{padding:26px 28px; border:1px solid var(--line); border-radius:var(--r-lg); background:rgba(3,16,42,.6)}
.invest-cartao .invest-valor{margin-bottom:0; font-size:clamp(2rem,4.4vw,2.85rem)}
.invest-rotulo{display:block; margin-bottom:12px; color:var(--amber); font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.2em}
.invest-valor{font-size:clamp(2.4rem,6vw,3.8rem); font-weight:900; letter-spacing:-.035em; line-height:1}
.invest-valor small{font-size:.3em; font-weight:600; letter-spacing:0; color:var(--dim-2)}
.invest-opcoes{margin-top:20px}
.invest-opcoes li{padding:13px 0; border-top:1px solid var(--line); color:var(--dim); font-size:.97rem}
.invest-opcoes li strong{display:block; color:var(--white); font-size:1.12rem; font-weight:700}

.oferta{
  position:relative; margin-top:clamp(24px,3vw,36px); padding:clamp(30px,4.4vw,56px);
  border-radius:var(--r-lg); overflow:hidden; color:var(--navy-950);
  background:linear-gradient(125deg,var(--amber) 0%,var(--amber-2) 55%,#ffd894 100%);
  box-shadow:0 34px 90px rgba(240,169,59,.24);
}
.oferta-selo{display:inline-block; margin-bottom:20px; padding:8px 18px; border-radius:999px; background:rgba(3,16,42,.85); color:var(--amber); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.2em}
.oferta h3{font-size:clamp(1.85rem,5.2vw,3.6rem); max-width:16ch; letter-spacing:-.03em}
.oferta p{margin-top:20px; max-width:60ch; font-size:clamp(1rem,1.7vw,1.16rem); color:rgba(3,16,42,.82)}
.oferta strong{color:var(--navy-950); font-weight:700}
.meses{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:clamp(22px,2.8vw,34px)}
.mes{padding:20px 18px; border-radius:var(--r-sm); background:rgba(3,16,42,.09); border:1px solid rgba(3,16,42,.14)}
.mes b{display:block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em; opacity:.62}
.mes span{display:block; margin-top:8px; font-size:1.22rem; font-weight:900; letter-spacing:-.02em}
.mes.decisao{background:rgba(3,16,42,.9); color:var(--amber); border-color:rgba(3,16,42,.9)}
.mes.decisao b{opacity:.7; color:var(--white)}

/* a condição dos três meses continua sendo o argumento mais forte,
   só que agora dentro da coluna estreita dos números */
.oferta-min{margin-top:0; padding:clamp(24px,3vw,34px); box-shadow:0 22px 58px rgba(240,169,59,.2)}
.oferta-min .oferta-selo{margin-bottom:14px; padding:7px 15px; font-size:.64rem}
.oferta-min h3{font-size:clamp(1.28rem,2.5vw,1.7rem); max-width:24ch}
.oferta-min p{margin-top:14px; font-size:.97rem}
.oferta-min .meses{grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:10px; margin-top:20px}
.oferta-min .mes{padding:13px 15px}
.oferta-min .mes span{margin-top:5px; font-size:1rem}

/* o que fica abaixo das duas colunas: uma linha e uma faixa */
.invest-msgs{
  margin-top:clamp(20px,2.4vw,30px); padding:14px 19px;
  border-left:3px solid var(--amber); border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:rgba(240,169,59,.08); color:var(--dim); font-size:1rem;
}
/* Dois grupos empilhados: o que já está pago e o que só entra na
   conta se a clínica passar do incluso. O de baixo é condicional,
   então tem borda tracejada, fundo mais apagado e valor em branco.
   Âmbar nesta página é o que a clínica recebe, não o que ela paga. */
.invest-limites{display:grid; gap:clamp(18px,2vw,24px); margin-top:16px}
.pacote{display:grid; gap:11px}
.pacote-rot{font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.2em}
.pacote-incluso .pacote-rot{color:var(--amber)}
.pacote-extra .pacote-rot{color:var(--dim-2)}
.pacote-itens{display:grid; grid-template-columns:repeat(auto-fit,minmax(176px,1fr)); gap:12px}
.lim{padding:15px 17px; border:1px solid var(--line); border-radius:var(--r-sm); background:rgba(18,48,104,.3)}
.lim b{display:block; color:var(--amber); font-size:1.02rem; font-weight:900; letter-spacing:-.01em}
.lim span{display:block; margin-top:6px; color:var(--dim); font-size:.85rem; line-height:1.45}
.pacote-extra{border-top:1px solid var(--line); padding-top:clamp(18px,2vw,24px)}
.pacote-extra .lim{border-style:dashed; border-color:rgba(255,255,255,.2); background:rgba(18,48,104,.14)}
.pacote-extra .lim b{color:var(--white)}
.pacote-extra .lim span{color:var(--dim-2)}
.invest-nota{margin-top:14px; color:var(--dim-2); font-size:.84rem}

/* Prazo: fecha a coluna da esquerda com o único número dela. */
.entrega-prazo{
  display:grid; gap:5px; margin-top:clamp(20px,2.2vw,26px);
  padding:14px 18px; border-left:3px solid var(--amber);
  border-radius:0 var(--r-sm) var(--r-sm) 0; background:rgba(240,169,59,.09);
}
.entrega-prazo-rot{color:var(--dim-2); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.2em}
.entrega-prazo strong{color:var(--amber); font-size:clamp(1.16rem,2.1vw,1.44rem); font-weight:900; letter-spacing:-.02em}

.inclui{margin-top:clamp(24px,3vw,36px); display:grid; grid-template-columns:repeat(2,1fr); gap:12px 34px}
.inclui li{position:relative; padding-left:32px; color:var(--dim); font-size:1rem; line-height:1.55}
.inclui li::before{content:""; position:absolute; left:6px; top:.42em; width:11px; height:6px; border-left:2px solid var(--amber); border-bottom:2px solid var(--amber); transform:rotate(-45deg)}

/* segurança */
.lei{padding:clamp(19px,1.9vw,25px) 0; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:14px 40px; align-items:start}
.lei:last-child{border-bottom:1px solid var(--line)}
.lei h3{font-size:1.1rem}
.lei p{color:var(--dim); font-size:.99rem}

/* fase futura */
.futuro-bloco{margin-top:clamp(27px,3.3vw,41px); padding:clamp(26px,3.4vw,38px); border:1px dashed rgba(240,169,59,.42); border-radius:var(--r-lg); background:rgba(240,169,59,.05)}
.futuro-bloco h3{font-size:clamp(1.25rem,2.6vw,1.7rem); margin-bottom:14px}
.futuro-bloco p{color:var(--dim)}

/* fechamento */
.fim{text-align:center; background:linear-gradient(180deg,var(--navy-950),#020b1d)}
.fim-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:14px}
.fim-logo{height:46px; width:auto; margin:0 auto clamp(24px,3vw,36px)}
.fim-fone{margin:22px 0 0; font-size:clamp(1.5rem,4vw,2.2rem); font-weight:900; letter-spacing:-.02em}
.fim-fone a{color:var(--amber); transition:opacity .25s}
.fim-fone a:hover{opacity:.78}

.rodape{padding:30px 0 38px; border-top:1px solid var(--line); color:var(--dim-2); font-size:.84rem; text-align:center; background:#020b1d}
.rodape p{margin-bottom:.5em}

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width:1080px){
  .grade-3{grid-template-columns:repeat(2,1fr)}
  .tela{grid-template-columns:1fr; gap:26px}
  .tela.invertida .tela-texto,.tela.invertida .tela-arte{order:0}
  .painel-grade{grid-template-columns:1fr}
  .lei{grid-template-columns:1fr; gap:8px}
}
@media (max-width:900px){
  body{font-size:16px}
  .nav-pilula{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(5,24,60,.94); padding:0 10px 0 18px}
  .nav.solid .nav-pilula{background:rgba(5,24,60,.97)}
  .nav-toggle{display:flex}
  .nav-links{
    position:fixed; inset:0; z-index:60; margin:0;
    flex-direction:column; justify-content:center; align-items:center; gap:26px;
    background:rgba(3,16,42,.98);
    opacity:0; pointer-events:none; transform:translateY(-8px);
    transition:opacity .3s ease, transform .3s ease;
  }
  .nav.aberto .nav-links{opacity:1; pointer-events:auto; transform:none}
  .nav-links a{font-size:1.24rem; font-weight:900; letter-spacing:.02em; color:var(--white); text-transform:none}
  .nav-cta{font-size:.66rem; padding:10px 15px}
  .nav.aberto .nav-brand{z-index:61}
  .nav.aberto .nav-cta{z-index:61}

  .hero{min-height:auto; padding:132px 0 72px}
  .hero-scroll{display:none}
  .grade-3,.grade-2,.invest-duplo,.inclui{grid-template-columns:1fr}
  .meses{grid-template-columns:repeat(2,1fr)}
  .cartao{padding:26px 22px}

  /* linha do tempo vira vertical */
  .tl-pin{min-height:0; padding:0 0 20px; justify-content:flex-start; gap:26px}
  .tl-dica{display:none}
  /* deitado em coluna o trilho não anda: o JS só anima o x acima
     de 900px. Manter `will-change:transform` aqui compunha uma
     camada do tamanho da lista à toa e, depois que a #fluxo
     ganhou fundo próprio, ainda promovia a seção inteira por
     sobreposição. Medido em 390: com ele, 25 camadas / 48,2 MB
     e a #fluxo promovida por Overlap; sem ele, 24 / 46,6 MB —
     abaixo das 24 / 46,9 MB de antes deste passe. Playbook §6.7. */
  .tl-track{width:auto; flex-direction:column; align-items:stretch; gap:16px;
    padding:8px 4vw 0 calc(4vw + 26px); will-change:auto}
  .tl-item{width:auto}
  .livia{display:block; width:104px; margin:20px 0 4px}
  .livia-palco{height:auto; aspect-ratio:640/841}
  .livia-fig{opacity:1; transform:none; filter:none; will-change:auto}
  .livia-aura{opacity:.5}
  .livia-passe{display:none}
  .tl-linha{left:calc(4vw + 8px); right:auto; top:0; bottom:0; width:2px; height:auto; margin:0;
    transform-origin:50% 0; transform:scaleY(0);
    background:linear-gradient(180deg,var(--navy-700),var(--amber))}
}
@media (max-width:560px){
  .btn{padding:14px 24px; font-size:.86rem}
  .hero-actions .btn{width:100%; text-align:center}
  .meses{grid-template-columns:1fr}
  .janela-url{display:none}
  .citacao{padding:24px 22px}
  th,td{padding:14px 16px}
}

/* =========================================================
   Reduzir movimento: enfeite desliga, conteúdo continua
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
  .marquee{transform:none}
  .hero-media{inset:0}
}

/* =========================================================
   Seção "hoje" — baralho de falhas em 3D dirigido pelo scroll
   Bloco escopado em #hoje: nenhuma regra compartilhada foi tocada.
   Padrão de leitura: sem JS / celular / reduzir movimento => lista
   vertical legível. O JS acrescenta .is-3d e liga a pilha em
   perspectiva. Sem blur animado (custo de GPU por quadro).
   ========================================================= */
#hoje{
  --hoje-campo:#0b2e7e;
  --hoje-campo-alto:#1a53d6;
  --hoje-papel:#f3f6fc;
  --hoje-tinta:#061a3f;
  --hoje-tinta-2:rgba(6,26,63,.7);
  --hoje-traco:rgba(6,26,63,.3);
  padding:0; background:var(--navy-950);
}

/* campo de cor chapado que atravessa toda a seção (inclusive o
   trecho pinado) e se dissolve nas bordas para não virar emenda */
.hoje-campo{
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg,#03102a 0,rgba(3,16,42,0) clamp(64px,8vw,140px)),
    linear-gradient(0deg,#03102a 0,rgba(3,16,42,0) clamp(64px,8vw,140px)),
    var(--hoje-campo);
}

.hoje-pin{position:relative; z-index:1; padding:clamp(64px,7.4vw,104px) 0 0}

/* halo, malha e vinheta acompanham o trecho pinado */
.hoje-luz{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:clip;
  background:
    radial-gradient(900px 620px at 66% 46%,rgba(26,83,214,.85),rgba(26,83,214,0) 68%),
    radial-gradient(520px 380px at 22% 80%,rgba(240,169,59,.15),rgba(240,169,59,0) 70%);
}
.hoje-luz::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(880px 560px at 62% 46%,#000 0,transparent 76%);
          mask-image:radial-gradient(880px 560px at 62% 46%,#000 0,transparent 76%);
}
.hoje-luz::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(132% 110% at 50% 44%,rgba(3,16,42,0) 34%,rgba(3,16,42,.6) 100%);
}
.hoje-grade{position:relative; z-index:1}

.hoje-palco{margin-top:clamp(24px,3.6vw,40px)}
.hoje-baralho{list-style:none; margin:0; padding:0; display:grid; gap:16px}

/* ---- a carta (mesma peça nos dois modos) ---- */
.hoje-carta{
  --veu:0; --foco:0;
  position:relative; list-style:none;
  padding:clamp(24px,2.5vw,32px);
  border-radius:20px;
  background:var(--hoje-papel); color:var(--hoje-tinta);
  box-shadow:0 34px 70px -26px rgba(1,9,28,.8),0 10px 26px -12px rgba(1,9,28,.5);
  display:grid; grid-template-columns:1fr;
  grid-template-areas:"num" "tit" "txt" "sinal";
  grid-template-rows:auto auto auto 1fr;
}
.hoje-carta::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit; opacity:var(--foco);
  box-shadow:0 0 0 2px var(--amber),0 26px 62px -18px rgba(240,169,59,.5);
}
.hoje-carta::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit; background:#081e48; opacity:var(--veu);
}
.hoje-carta>*{position:relative; z-index:1}
.hoje-carta:nth-child(odd){transform:rotate(-.6deg)}
.hoje-carta:nth-child(even){transform:rotate(.6deg)}

.hoje-num{
  grid-area:num; justify-self:start;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; height:30px; padding:0 13px; border-radius:999px;
  background:var(--amber); color:var(--navy-950);
  font-size:.78rem; font-weight:900; letter-spacing:.16em;
}
.hoje-sinal{grid-area:sinal; justify-self:end; align-self:end; width:clamp(86px,9vw,116px); height:auto; margin-top:clamp(18px,2.2vw,26px)}
.hoje-sinal .t{fill:none; stroke:var(--hoje-traco); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.hoje-sinal .a{fill:none; stroke:var(--amber); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.hoje-sinal .f{fill:var(--amber); stroke:none}
.hoje-sinal .n{fill:var(--hoje-tinta); font-family:var(--font); font-weight:900; font-size:15px}
.hoje-sinal .tracejado{stroke-dasharray:5 5}

.hoje-carta h3{grid-area:tit; margin:clamp(18px,2vw,24px) 0 0; font-size:clamp(1.1rem,1.5vw,1.3rem); line-height:1.16; color:var(--hoje-tinta)}
.hoje-carta p{grid-area:txt; margin:10px 0 0; color:var(--hoje-tinta-2); font-size:clamp(.93rem,1.05vw,1rem); line-height:1.6}

.hoje-passo,.hoje-dica{display:none}
.hoje-fecho{position:relative; z-index:1; padding:clamp(28px,3.4vw,44px) 0 clamp(58px,6.4vw,94px)}
#hoje .citacao{background:rgba(3,16,42,.34)}

/* ---- modo baralho 3D (o JS liga com .is-3d acima de 900px) ---- */
@media (min-width:901px){
  #hoje.is-3d .hoje-pin{
    min-height:100vh; min-height:100svh;
    display:flex; align-items:center; padding:88px 0 44px;
  }
  #hoje.is-3d .hoje-grade{
    display:grid; align-items:center; width:min(1240px,94vw);
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:clamp(28px,4vw,64px);
  }
  #hoje.is-3d h2{font-size:clamp(1.7rem,2.75vw,2.5rem); max-width:15ch}

  #hoje.is-3d .hoje-palco{
    margin:0; min-height:clamp(360px,54vh,540px);
    display:grid; place-items:center;
  }
  /* sem preserve-3d de propósito: a perspectiva vai em cada carta e a
     ordem de pintura é decidida pelo z-index no JS. Com preserve-3d,
     a opacidade nos filhos achata a pilha e o texto de uma carta
     atravessa a da frente. */
  #hoje.is-3d .hoje-baralho{
    gap:0; display:grid; justify-items:center; align-items:stretch;
  }
  #hoje.is-3d .hoje-carta{
    grid-area:1/1;
    width:clamp(300px,31vw,420px);
    min-height:clamp(258px,27vw,300px);
    will-change:transform,opacity;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
  }

  #hoje.is-3d .hoje-passo{display:flex; align-items:center; gap:14px; margin-top:clamp(21px,2.6vw,32px)}
  #hoje.is-3d .hoje-dica{display:block; margin:16px 0 0; color:var(--dim-2); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.22em}
  #hoje.is-3d .hoje-fecho{padding-top:0}
}
.hoje-passo-n{font-size:clamp(2rem,3.4vw,2.9rem); font-weight:900; line-height:1; letter-spacing:-.03em; color:var(--amber); font-variant-numeric:tabular-nums}
.hoje-passo-t{color:var(--dim-2); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.2em}
.hoje-passo-barras{display:flex; gap:6px; margin-left:4px}
.hoje-passo-barras i{display:block; width:22px; height:3px; border-radius:2px; background:rgba(255,255,255,.22)}
.hoje-passo-barras i.on{background:var(--amber)}

/* lista larga (reduzir movimento no computador, ou tablet entre 781 e
   900px): duas colunas para a carta não virar faixa */
@media (min-width:660px){
  #hoje:not(.is-3d) .hoje-baralho{grid-template-columns:repeat(2,1fr); gap:18px}
  #hoje:not(.is-3d) .hoje-carta{min-height:250px}
}
@media (max-width:560px){
  .hoje-carta{padding:22px 20px; border-radius:16px}
  .hoje-sinal{width:78px}
  .hoje-carta h3{margin-top:18px}
}

/* =========================================================
   Seção "telas" — campo de luz e ritmo em três grupos
   Bloco escopado em #telas: nenhuma regra compartilhada foi
   tocada. O clima é o oposto do #hoje de propósito. Lá o azul
   elétrico chapado é o problema; aqui o marinho abre, o âmbar
   entra de leve e a malha é de pontos, não de linhas.
   Doze módulos em três grupos, com três escalas de bloco
   (destaque, padrão e compacto) para o ritmo não repetir.
   ========================================================= */
#telas{background:var(--navy-950)}

/* campo que atravessa a seção inteira e se dissolve nas bordas
   para não virar emenda com as seções vizinhas */
.telas-campo{
  position:absolute; inset:0; z-index:0; overflow:clip; pointer-events:none;
  background:
    linear-gradient(180deg,#03102a 0,rgba(3,16,42,0) clamp(90px,11vw,190px)),
    linear-gradient(0deg,#03102a 0,rgba(3,16,42,0) clamp(90px,11vw,190px)),
    linear-gradient(180deg,#04143a 0%,#07204f 40%,#061c46 72%,#040f2c 100%);
}
/* a luz fica presa à janela e acompanha o leitor pela seção toda.
   sticky (e não fixed) para o efeito começar e acabar dentro do
   campo; overflow:clip no pai não cria scrollport, então funciona */
.telas-luz{position:sticky; top:0; height:100vh; height:100svh; overflow:clip}
.telas-halo,.telas-malha,.telas-vinheta{position:absolute; inset:-14% -8%; display:block}
.telas-halo{
  will-change:transform;
  background:
    radial-gradient(760px 560px at 18% 26%,rgba(240,169,59,.15),rgba(240,169,59,0) 66%),
    radial-gradient(940px 660px at 86% 70%,rgba(31,86,190,.4),rgba(31,86,190,0) 68%),
    radial-gradient(620px 520px at 60% 6%,rgba(255,255,255,.05),rgba(255,255,255,0) 70%);
}
.telas-malha{
  will-change:transform; opacity:.6;
  background-image:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1.4px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(1020px 740px at 50% 46%,#000 0,transparent 74%);
          mask-image:radial-gradient(1020px 740px at 50% 46%,#000 0,transparent 74%);
}
.telas-vinheta{inset:0; background:radial-gradient(128% 108% at 50% 42%,rgba(3,16,42,0) 40%,rgba(3,16,42,.68) 100%)}
.telas-conteudo{position:relative; z-index:1}

/* ---- grupo ---- */
#telas .telas-grupo{display:grid; gap:clamp(28px,3.4vw,48px); margin-top:clamp(40px,4.8vw,72px)}
#telas .telas-grupo-cab{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:clamp(14px,2.4vw,30px); padding:16px 0 18px; border-top:1px solid var(--line-forte);
}
#telas .telas-grupo-n{
  color:var(--amber); font-size:clamp(2.2rem,4.6vw,3.4rem); font-weight:900;
  line-height:.86; letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
#telas .telas-grupo-txt h3{font-size:clamp(1.24rem,2.4vw,1.8rem); max-width:24ch}
#telas .telas-grupo-txt p{margin:9px 0 0; color:var(--dim); font-size:.98rem; max-width:58ch}
#telas .telas-grupo-cont{
  align-self:center; padding:7px 15px; border-radius:999px; border:1px solid var(--line);
  background:rgba(3,16,42,.45); color:var(--dim-2); white-space:nowrap;
  font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em;
}

/* ---- numeração: a mesma peça nas três escalas ---- */
#telas .tela-id{display:flex; align-items:baseline; gap:10px; margin:0 0 12px; font-variant-numeric:tabular-nums}
#telas .tela-id b{color:var(--amber); font-size:1.45rem; font-weight:900; line-height:1; letter-spacing:-.02em}
#telas .tela-id span{color:var(--dim-2); font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.2em}
#telas .tela-id::after{content:""; flex:1; align-self:center; height:1px; max-width:74px; background:var(--line)}

/* ---- escala 1: destaque (abre cada grupo) ---- */
#telas .tela-g{
  --pad:clamp(24px,3vw,40px);
  position:relative; padding:var(--pad);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(158deg,rgba(18,48,104,.4),rgba(3,16,42,.5));
  box-shadow:0 34px 90px -46px rgba(1,9,28,.95);
}
#telas .tela-g::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,var(--amber),rgba(240,169,59,0) 62%);
}
#telas .tela-g-cab{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(18px,3vw,52px); align-items:end; margin-bottom:clamp(19px,2.4vw,30px);
}
#telas .tela-g .tela-id b{font-size:clamp(1.9rem,3.4vw,2.7rem)}
#telas .tela-g h4{font-size:clamp(1.5rem,3.2vw,2.4rem); letter-spacing:-.025em; max-width:15ch}
#telas .tela-g-corpo>p{margin:0; color:var(--dim); font-size:1.02rem}

/* a captura ocupa a coluna inteira: <figure> vem do navegador com
   40px de margem lateral, que aqui só encolhia a tela do CRM */
#telas .janela{margin:0}

/* ---- escala 2: padrão (reaproveita o bloco .tela) ---- */
#telas .tela{margin-top:0}
/* invertido troca a ORDEM dos filhos, não a largura das colunas: sem
   isso a arte cairia na coluna estreita e a tela sairia menor que a
   do bloco anterior. Só acima de 1080px: abaixo disso o bloco .tela
   vira uma coluna e esta regra, mais específica, sequestraria o
   layout de celular */
@media (min-width:1081px){
  #telas .tela.invertida{grid-template-columns:minmax(0,1.34fr) minmax(0,.86fr)}
}
#telas .tela .tela-texto h4{font-size:clamp(1.32rem,2.4vw,1.8rem); margin-bottom:14px}
#telas .tela .tela-texto>p{color:var(--dim); font-size:1rem}

/* ---- escala 3: compacto (dois lado a lado) ---- */
#telas .telas-compacto{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.6vw,34px)}
#telas .tela-c{display:flex; flex-direction:column}
#telas .tela-c h4{font-size:clamp(1.12rem,1.9vw,1.4rem); margin-bottom:12px}
#telas .tela-c>p{color:var(--dim); font-size:.96rem}
#telas .tela-c .tela-ponto{margin-bottom:clamp(16px,2vw,23px)}
/* empurra a captura para o pé do cartão: as duas alinham embaixo
   mesmo com textos de tamanhos diferentes */
#telas .tela-c .janela{margin-top:auto}

@media (max-width:1080px){
  #telas .tela-g-cab{grid-template-columns:1fr; align-items:start; gap:16px}
  /* daqui para baixo o bloco padrão ocupa a largura toda; a captura do
     destaque encosta nas bordas do painel para não ficar menor que a
     dos módulos comuns */
  #telas .tela-g>.janela{margin:0 calc(var(--pad) * -1) calc(var(--pad) * -1); border-radius:0}
}
@media (max-width:900px){
  /* o número acompanha a primeira linha do título em vez de ficar no
     meio de um bloco de duas ou três linhas */
  #telas .telas-grupo-cab{grid-template-columns:auto minmax(0,1fr); row-gap:14px; align-items:start}
  #telas .telas-grupo-n{line-height:1; margin-top:-.06em}
  #telas .telas-grupo-cont{grid-column:1/-1; justify-self:start}
  .telas-malha{opacity:.4}
}
@media (max-width:760px){
  #telas .telas-compacto{grid-template-columns:1fr}
}
@media (max-width:560px){
  #telas .tela-g{--pad:17px; border-radius:var(--r-md)}
  #telas .tela-id b{font-size:1.24rem}
  #telas .tela-g .tela-id b{font-size:1.8rem}
  #telas .telas-grupo-n{font-size:2rem}
  #telas .telas-grupo-txt p{font-size:.94rem}
}

/* =========================================================
   Lupa — a captura abre em tela cheia
   Camada por cima: não muda o layout de nenhuma seção e não
   troca o overflow do documento. Tirar a barra de rolagem
   alargaria o conteúdo e deslocaria os dois pins; a rolagem
   trava no Lenis e nos listeners da própria camada (main.js).
   ========================================================= */

/* a figura clicável: cursor de zoom e um selo discreto.
   position:relative não mexe em fluxo, só ancora o selo. */
figure.ampliavel{position:relative; cursor:zoom-in}
figure.ampliavel::after{
  content:"Ampliar"; position:absolute; right:12px; bottom:12px; z-index:3;
  padding:7px 14px; border-radius:999px;
  background:rgba(5,24,60,.88); border:1px solid rgba(240,169,59,.55); color:var(--amber);
  font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em;
  pointer-events:none; transition:opacity .25s ease;
}
/* no toque o selo fica sempre visível; no mouse aparece no hover */
@media (hover:hover){
  figure.ampliavel::after{opacity:0}
  figure.ampliavel:hover::after,
  figure.ampliavel:focus-visible::after{opacity:1}
}

.lupa{position:fixed; inset:0; z-index:120; display:flex; padding:24px 68px}
.lupa[hidden]{display:none}
.lupa:not(.aberta){pointer-events:none}
.lupa-fundo{
  position:absolute; inset:0; background:rgba(3,16,42,.94);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0;
}
.lupa.aberta .lupa-fundo{opacity:1}

.lupa-palco{
  position:relative; z-index:1; margin:auto;
  display:flex; flex-direction:column; gap:14px;
  width:min(1720px,100%); height:100%;
  opacity:0; transform:scale(.985);
}
.lupa.aberta .lupa-palco{opacity:1; transform:none}

/* a captura ocupa toda a altura que sobrar, sem estourar e sem
   cortar: max-width + max-height + contain guardam a proporção.
   A moldura rola por dentro (overflow:auto) porque no celular em pé
   a captura passa a ser maior que ela; `margin:auto` centraliza sem
   travar a rolagem, coisa que `justify-content:center` faria (as
   pontas ficariam inalcançáveis num contêiner que rola).
   `touch-action` mantém pinça e arraste vivos dentro da moldura. */
.lupa-quadro{
  flex:1 1 auto; min-height:0; display:flex; overflow:auto;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y pinch-zoom;
  scrollbar-width:none;
}
.lupa-quadro::-webkit-scrollbar{width:0; height:0}
.lupa-img{
  margin:auto; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  border-radius:var(--r-sm); background:var(--tela-fundo);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}

.lupa-legenda{flex:0 0 auto; max-width:96ch; margin:0 auto; text-align:center}
.lupa-conta{margin:0 0 6px; color:var(--amber); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.22em}
.lupa-titulo{margin:0; color:var(--white); font-size:clamp(1.05rem,2vw,1.4rem); font-weight:900; letter-spacing:-.01em; line-height:1.2}
.lupa-ponto{margin:8px 0 0; color:var(--dim); font-size:.95rem; line-height:1.45}
.lupa-ponto b{color:var(--amber); font-weight:700; letter-spacing:.14em; font-size:.68rem; text-transform:uppercase; margin-right:9px}

.lupa-btn{
  position:absolute; z-index:2; width:48px; height:48px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-forte); border-radius:50%;
  background:rgba(5,24,60,.82); color:var(--white); cursor:pointer;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.lupa-btn:hover{background:var(--amber); border-color:var(--amber); color:var(--navy-950)}
.lupa-btn svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.lupa-fechar{top:16px; right:16px}
.lupa-ant{left:10px; top:50%; transform:translateY(-50%)}
.lupa-prox{right:10px; top:50%; transform:translateY(-50%)}

/* Abaixo de 1100px as setas descem para o rodapé e a captura fica com
   a largura toda. O corte é aqui, e não em 760px, porque abaixo de
   1080px o site tira o respiro lateral do painel e a captura na página
   passa a ocupar os 92vw inteiros: com as setas nas laterais a lupa
   abria MENOR que a própria página (medido: 0,90x em 768px). Nessa
   faixa a captura é limitada pela largura, então a barra de baixo não
   custa altura nenhuma; acima de 1100px é o contrário, e aí as setas
   voltam para as laterais. */
@media (max-width:1099px){
  .lupa{padding:14px 14px 76px}
  .lupa-btn{width:52px; height:52px}
  .lupa-fechar{top:12px; right:12px}
  .lupa-ant,.lupa-prox{top:auto; bottom:12px; transform:none}
  .lupa-ant{left:14px}
  .lupa-prox{right:14px}
}
@media (max-width:760px){
  .lupa-titulo{font-size:1.02rem}
  .lupa-ponto{font-size:.88rem}
}
/* no toque o selo é a única promessa de que a captura abre maior, e no
   celular a captura reduzida não se lê: ele cresce em vez de encolher */
@media (hover:none){
  figure.ampliavel::after{right:10px; bottom:10px; padding:9px 16px; font-size:.72rem}
}

/* a abertura só ganha animação onde ela é bem-vinda */
@media (prefers-reduced-motion:no-preference){
  .lupa-fundo{transition:opacity .22s ease}
  .lupa-palco{transition:opacity .22s ease, transform .22s ease}
}

/* =========================================================
   Seção "instagram" — glifo do canal e nota de cortesia
   Bloco escopado em #instagram: nenhuma regra compartilhada
   foi tocada. O glifo cresce por clamp, sem media query, e o
   preserveAspectRatio padrão do viewBox garante que ele nunca
   esmaga, mesmo se a caixa herdar largura de outro lugar.
   ========================================================= */
#instagram .ig-cabeca{display:flex; align-items:center; gap:14px; margin:0 0 15px}
#instagram .ig-cabeca .kicker{margin:0}
.ig-glifo{
  flex:0 0 auto; display:block;
  width:clamp(38px,5.4vw,46px); height:clamp(38px,5.4vw,46px);
}
.ig-cortesia{
  margin-top:clamp(24px,3vw,34px); padding:20px 24px;
  border-left:3px solid var(--amber); border-radius:0 var(--r-md) var(--r-md) 0;
  background:rgba(240,169,59,.07);
  color:var(--dim); font-size:1rem; line-height:1.62;
}
@media (max-width:900px){
  .ig-cortesia{padding:20px 20px}
}

/* =========================================================
   Passe de responsivo — tablet e celular
   Bloco único, no fim do arquivo, com o que o site precisava
   depois de ter sido construído mirando a tela larga. Nada
   aqui muda o desktop acima de 900px, exceto o reequilíbrio
   das duas colunas do investimento, que era defeito também lá.
   ========================================================= */

/* ---------------------------------------------------------
   1. Investimento: as duas colunas terminam juntas
   A coluna da esquerda tinha uma lista curta ao lado de três
   blocos de preço, e sobrava um vão de ~550px de fundo puro em
   1440. O cartão passa a ter a altura da linha, então o que era
   buraco vira o próprio painel.
   --------------------------------------------------------- */
@media (min-width:901px){
  .invest-duplo{align-items:stretch}
  /* Os dois cartões têm a altura da linha, então nenhum dos dois abre
     vão de fundo puro embaixo. Quem sobra distribui: a lista de escopo
     cresceu para dezesseis itens e passou a mandar na altura, então a
     pilha de preços é que espaça, e o gap da lista voltou a ser aperto
     de leitura em vez de espaçamento de tabela. */
  .invest-entrega{display:flex; flex-direction:column; justify-content:center}
  .invest-entrega .inclui{gap:clamp(10px,1.05vw,14px)}
  .invest-numeros{align-content:space-between}
}

/* ---------------------------------------------------------
   2. Barra de navegação
   Em 320 o conteúdo da pílula somava mais que a pílula e o
   botão do menu saía 8,7px pela direita da janela. E os alvos
   de toque do topo estavam todos abaixo de 44px.
   --------------------------------------------------------- */
@media (max-width:900px){
  .nav-brand{min-height:44px}
  .nav-cta{display:inline-flex; align-items:center; justify-content:center; min-height:44px}
  .nav-links a{
    display:flex; align-items:center; justify-content:center;
    min-height:44px; padding:0 14px;
  }
}
@media (max-width:400px){
  .nav{padding:14px 10px}
  .nav.solid{padding:8px 10px}
  .nav-pilula{gap:10px; padding:0 8px 0 14px}
  .nav-cta{padding:0 13px; letter-spacing:.07em}
}
/* só nos telefones mais estreitos o rótulo do botão precisa encolher:
   em 320 a pílula não fecha a conta de outro jeito */
@media (max-width:345px){
  .nav-cta{font-size:.64rem; padding:0 11px; letter-spacing:.05em}
}
/* celular deitado: o menu de tela cheia não pode ficar mais alto
   que a janela nem centralizar fora dela */
@media (max-width:900px) and (max-height:520px){
  .nav-links{justify-content:flex-start; gap:8px; padding:74px 16px 18px; overflow-y:auto}
  .nav-links a{font-size:1.05rem}
  .hero{padding:104px 0 56px}
}

/* ---------------------------------------------------------
   3. Alvo de toque nos links de contato
   --------------------------------------------------------- */
@media (max-width:900px){
  .fim-fone a{display:inline-flex; align-items:center; justify-content:center; min-height:44px}
}

/* ---------------------------------------------------------
   4. Tipografia no celular
   Texto de corpo nunca abaixo de 15px; os rótulos em caixa
   alta, que são recurso gráfico e não leitura corrida, sobem
   para 11,5px, que é onde a letra espaçada ainda se lê.
   --------------------------------------------------------- */
@media (max-width:560px){
  /* corpo */
  .hero-meta{font-size:.95rem}
  .citacao cite{font-size:.95rem}
  .painel-nota,.invest-nota{font-size:.95rem}
  .rodape{font-size:.95rem}
  .lim span{font-size:.95rem}
  .hoje-carta p{font-size:.97rem}
  .btn{font-size:.95rem}
  .lupa-ponto{font-size:.95rem}
  .invest-valor small{font-size:15px}
  .tela-id span{font-size:.72rem}

  /* rótulos em caixa alta */
  .oferta-selo,.oferta-min .oferta-selo{font-size:.72rem}
  .painel-tag{font-size:.72rem}
  .tela-ponto b{font-size:.72rem}
  .mes b{font-size:.72rem}
  #telas .telas-grupo-cont{font-size:.72rem}
  #telas .tela-id span{font-size:.72rem}
  .hoje-passo-t{font-size:.76rem}
}

/* ---------------------------------------------------------
   5. Lupa no celular
   A captura reduzida ao vão da tela (332px de 1400) não se lê.
   Em pé ela passa a ocupar toda a altura livre e rola de lado
   dentro da moldura, o que dá ~3,5x de aumento; a pinça segue
   por cima disso, para quem quiser mais.
   --------------------------------------------------------- */
@media (max-width:900px) and (orientation:portrait){
  .lupa-img{max-width:none; width:auto; height:100%; border-radius:0}
}
/* deitado a captura cabe na largura e a altura é o recurso escasso:
   sai só o parágrafo do "o que olhar", que a pessoa lê em pé. A conta
   (2 de 15) e o título ficam — sem eles ninguém sabe onde está. */
@media (max-width:900px) and (orientation:landscape){
  .lupa{padding:10px 10px 62px}
  .lupa-palco{gap:8px}
  .lupa-ponto{display:none}
  .lupa-conta{margin-bottom:2px; font-size:.66rem}
  .lupa-titulo{font-size:.95rem}
  .lupa-btn{width:46px; height:46px}
  .lupa-ant,.lupa-prox{bottom:8px}
  .lupa-fechar{top:8px; right:8px}
}

/* tablet deitado ainda usa o menu de tela larga, e ali o dedo continua
   sendo o ponteiro: os alvos crescem só onde não existe mouse, para o
   desktop aprovado não mudar um pixel */
@media (min-width:901px) and (hover:none){
  .nav-brand{min-height:44px}
  .nav-links a{display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px}
  .nav-cta{display:inline-flex; align-items:center; min-height:44px}
}

/* =========================================================
   Fundos: acabar com o azul chapado
   As sete seções que ainda eram um retângulo de #03102a
   ganham campo próprio. Tudo em CSS: nenhuma imagem baixada,
   nenhuma biblioteca, nenhum `filter:blur` (que num elemento
   desse tamanho custa uma camada composta por quadro) e
   nenhum `background-attachment:fixed`. As camadas são
   estáticas, então o navegador rasteriza uma vez e a rolagem
   não paga nada.

   Mecânica: `::before` é o campo (base + halos + vinheta),
   `::after` é a textura. Os dois em `z-index:-1`, que pinta
   depois do fundo da seção e ANTES do conteúdo em fluxo —
   por isso nenhuma regra de `.wrap` precisou mudar. O
   `overflow:clip` que a seção já tinha segura as duas dentro.

   Sequência, não papel de parede. A página alterna densidade:
     #hoje       malha de linhas 64px   ALTA   (referência)
     #sistema    sem textura            baixa
     #fluxo      listras verticais      média
     #telas      malha de pontos 34px   ALTA   (referência)
     #paineis    hachura diagonal 45°   média
     #instagram  sem textura            MÍNIMA (respiro)
     #seguranca  filetes verticais      média
     #depois     sem textura            MÍNIMA (respiro)
   Duas seções quase limpas de propósito: sem elas o olho
   cansa e o tratamento vira ruído.

   Emenda: toda seção dissolve nas bordas contra #03102a, que
   é a cor do corpo — a passagem de um campo para o outro é
   uma transição, nunca um corte, como a #hoje já fazia.
   ========================================================= */
#sistema::before,#sistema::after,
#fluxo::before,#fluxo::after,
#paineis::before,#paineis::after,
#seguranca::before,#seguranca::after,
#instagram::before,
#depois::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
}

/* ---- #sistema — a calmaria depois do azul elétrico do #hoje.
   Sem textura nenhuma: a seção anterior grita, esta fala. Um
   halo âmbar baixo à esquerda e o marinho subindo para a
   direita, do lado oposto ao halo do #hoje. ---- */
#sistema::before{
  background:
    linear-gradient(180deg,#03102a 0,rgba(3,16,42,0) var(--dissolve)),
    linear-gradient(0deg,#03102a 0,rgba(3,16,42,0) var(--dissolve)),
    radial-gradient(126% 104% at 50% 40%,rgba(3,16,42,0) 46%,rgba(3,16,42,.5) 100%),
    radial-gradient(760px 620px at 10% 88%,rgba(240,169,59,.11),rgba(240,169,59,0) 66%),
    radial-gradient(1120px 780px at 90% 14%,rgba(18,48,104,.66),rgba(18,48,104,0) 68%),
    linear-gradient(168deg,#061a3f 0%,#04143a 54%,#03102a 100%);
}
/* o filete no topo é a costura com a seção anterior: um traço
   de âmbar que morre antes da metade, não uma régua */
#sistema::after{
  background:linear-gradient(90deg,rgba(240,169,59,.46),rgba(240,169,59,0) 44%) top left/100% 1px no-repeat;
}

/* ---- #fluxo — é um palco: a seção prende na tela e o trilho
   anda de lado. O fundo faz o refletor no ponto onde os
   cartões passam, e as listras verticais dão o sentido do
   movimento sem competir com o texto. ---- */
#fluxo::before{
  background:
    linear-gradient(180deg,#03102a 0,rgba(3,16,42,0) var(--dissolve)),
    linear-gradient(0deg,#03102a 0,rgba(3,16,42,0) var(--dissolve)),
    radial-gradient(128% 106% at 46% 46%,rgba(3,16,42,0) 42%,rgba(3,16,42,.56) 100%),
    radial-gradient(1040px 720px at 34% 54%,rgba(23,66,158,.52),rgba(23,66,158,0) 66%),
    radial-gradient(620px 480px at 94% 18%,rgba(240,169,59,.10),rgba(240,169,59,0) 68%),
    linear-gradient(180deg,#04143a 0%,#061c46 46%,#03102a 100%);
}
#fluxo::after{
  background-image:linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:clamp(38px,3.6vw,54px) 100%;
  -webkit-mask-image:radial-gradient(1180px 340px at 44% 56%,#000 0,transparent 74%);
          mask-image:radial-gradient(1180px 340px at 44% 56%,#000 0,transparent 74%);
}

/* ---- #paineis — platô: o marinho clareia no meio da seção e
   volta a fechar nas pontas, então ela se destaca da #telas
   sem mudar de cor. A hachura diagonal é textura de prancheta,
   e os dois painéis ainda são projeto: a marcação de "a
   construir" que já estava no CSS ganha eco no fundo. ---- */
#paineis::before{
  background:
    linear-gradient(180deg,#03102a 0,rgba(3,16,42,0) var(--dissolve)),
    linear-gradient(0deg,#03102a 0,rgba(3,16,42,0) var(--dissolve)),
    radial-gradient(130% 108% at 50% 46%,rgba(3,16,42,0) 44%,rgba(3,16,42,.46) 100%),
    radial-gradient(880px 600px at 80% 78%,rgba(240,169,59,.10),rgba(240,169,59,0) 66%),
    linear-gradient(180deg,#03102a 0%,#0a2350 40%,#0b2657 58%,#04143a 84%,#03102a 100%);
}
#paineis::after{
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.055) 0 1px,transparent 1px 12px);
  -webkit-mask-image:radial-gradient(1000px 640px at 50% 50%,#000 0,transparent 72%);
          mask-image:radial-gradient(1000px 640px at 50% 50%,#000 0,transparent 72%);
}

/* ---- #instagram — o respiro. Uma seção curta, coluna
   estreita, e de propósito a mais limpa da página: só um
   clarão largo atrás do glifo e o marinho fechando embaixo.
   Sem textura, sem vinheta, sem filete. Depois da hachura da
   #paineis, o olho precisa disto. ---- */
#instagram::before{
  background:
    linear-gradient(180deg,#03102a 0,rgba(3,16,42,0) var(--dissolve)),
    linear-gradient(0deg,#03102a 0,rgba(3,16,42,0) var(--dissolve)),
    radial-gradient(940px 660px at 14% 14%,rgba(18,48,104,.74),rgba(18,48,104,0) 68%),
    radial-gradient(560px 420px at 86% 90%,rgba(240,169,59,.08),rgba(240,169,59,0) 70%),
    linear-gradient(176deg,#051839 0%,#03102a 74%);
}

/* ---- #seguranca — colunas. A seção é uma lista de limites,
   linha a linha; o fundo usa só filetes verticais, geometria
   que nenhuma outra seção repete (a #hoje é malha cheia, a
   #telas é ponto, a #paineis é diagonal). Halo azul frio
   embaixo à direita, vinheta funda: clima de documento. ---- */
#seguranca::before{
  background:
    linear-gradient(180deg,#03102a 0,rgba(3,16,42,0) var(--dissolve)),
    linear-gradient(0deg,#03102a 0,rgba(3,16,42,0) var(--dissolve)),
    radial-gradient(124% 106% at 50% 38%,rgba(3,16,42,0) 40%,rgba(3,16,42,.58) 100%),
    radial-gradient(960px 720px at 86% 86%,rgba(20,58,140,.52),rgba(20,58,140,0) 66%),
    radial-gradient(640px 460px at 6% 8%,rgba(240,169,59,.08),rgba(240,169,59,0) 70%),
    linear-gradient(184deg,#03102a 0%,#051a41 46%,#03102a 100%);
}
#seguranca::after{
  background-image:linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:clamp(78px,7.2vw,112px) 100%;
  -webkit-mask-image:radial-gradient(1120px 760px at 50% 50%,#000 0,transparent 76%);
          mask-image:radial-gradient(1120px 760px at 50% 50%,#000 0,transparent 76%);
}

/* ---- #depois — o segundo respiro, e o mais escuro. A seção
   fala do que fica para outra fase, então o fundo baixa a luz
   e entrega a página para o fecho. Um horizonte âmbar de 1px
   no topo costura com o investimento; daí para baixo, nada.
   Termina em #03102a, que é exatamente onde a .fim começa. ---- */
#depois::before{
  background:
    linear-gradient(90deg,rgba(240,169,59,.32),rgba(240,169,59,0) 50%) top left/100% 1px no-repeat,
    linear-gradient(0deg,#03102a 0,rgba(3,16,42,0) var(--dissolve)),
    radial-gradient(780px 540px at 24% 6%,rgba(240,169,59,.085),rgba(240,169,59,0) 68%),
    linear-gradient(180deg,#03102a 0%,#04143a 36%,#020d22 78%,#03102a 100%);
}

/* ---- #abertura — já tinha halo e malha, mas o lado direito
   lia chapado e a base caía seca no marquee. O âmbar do alto
   ganha corpo, entra um azul de chão e a vinheta fecha os
   cantos; a malha some antes da borda em vez de ser cortada. ---- */
.hero-media{
  background:
    radial-gradient(1200px 700px at 80% 8%,rgba(240,169,59,.24),transparent 60%),
    radial-gradient(980px 780px at 4% 92%,rgba(18,48,104,.92),transparent 66%),
    radial-gradient(820px 560px at 54% 112%,rgba(23,66,158,.52),transparent 68%),
    linear-gradient(160deg,var(--navy-900) 0%,var(--navy-950) 58%,#020b1d 100%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(0deg,rgba(3,16,42,.7),rgba(3,16,42,0) clamp(80px,10vw,170px)),
    radial-gradient(122% 100% at 50% 42%,rgba(3,16,42,0) 48%,rgba(3,16,42,.44) 100%);
}

/* celular: as texturas rendem menos numa tela pequena, então
   ficam mais discretas. A discrição vem de baixar o alfa da
   própria cor, e não de `opacity`: opacidade parcial é um dos
   gatilhos de promoção de camada, e aqui o efeito é o mesmo
   sem correr esse risco. */
@media (max-width:560px){
  #fluxo::after{background-image:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px)}
  #paineis::after{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.028) 0 1px,transparent 1px 12px)}
  #seguranca::after{background-image:linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px)}
}