/* =========================================================================
   AKROS — A camada orgânica (07/10, 23h30)
   Pedido do dono, depois de aprovar as perdas: «consegue melhorar
   infinitamente as demais abas, menos a hero section? … mais profissional e
   mais orgânico». A linguagem é a que ele aprovou nas perdas (perdas.css):
   canto macio, contorno que acende no canto da luz e some no oposto, luz
   difusa que deriva devagar, pílula no que é botão ou etiqueta, fio que
   esmaece nas pontas em vez de linha dura.

   Carrega por ÚLTIMO. Nada aqui encosta em #scene, #hero ou #nav. As
   réplicas da plataforma (o quadro do pipeline, o catálogo, a ficha de
   Leads, os aparelhos da implantação) ficam com o raio do PRODUTO por
   dentro: só a moldura de fora amacia, senão a «tela real» deixa de ser real.
   ========================================================================= */

/* 1 · os cantos voltam abaixo da hero. `--r` (tokens.css) multiplica TODO
   raio do site e estava em 0 (tudo reto); 1 é o desenho original. A hero e
   o menu continuam em 0, porque herdam de :root. */
.bloco,.pipeline,.fim,.cume,.rodape,.rail{--r:1}

/* 2 · o contorno vivo — o mesmo das perdas: 1 px pintado com degradê
   (máscara), aceso no canto da luz do cartão e quase sumido no oposto. */
#planos .plano:not(.plano--destaque)::after,
#piloto .piloto__c::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(var(--la,150deg),rgba(190,225,255,.22) 0%,rgba(255,255,255,.06) 38%,rgba(255,255,255,.025) 70%,rgba(124,196,255,.09) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}

/* 3 · a luz de trás — uma mancha azul difusa sob a grade, que deriva em
   27 s. Só transform; azul de marca, nada de ciano (o dono recusou a
   aurora e o fundo colorido: a mancha não passa de 12 % de tinta). */
.planos__grade,.piloto__cartoes{position:relative;isolation:isolate}
.planos__grade::before,.piloto__cartoes::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
  left:8%;right:8%;top:-14%;bottom:-14%;
  background:radial-gradient(closest-side,rgba(56,150,236,.12),rgba(56,150,236,0));
  animation:org-deriva 27s ease-in-out infinite alternate;
}
.piloto__cartoes::before{left:-6%;right:-6%;top:-40%;bottom:-40%}
@keyframes org-deriva{
  from{transform:translate3d(-5%,-3%,0) scale(.96)}
  to{transform:translate3d(5%,4%,0) scale(1.05)}
}

/* =========================================================================
   DIFERENCIAIS (claro) — o cartão do Falcão, macio
   ========================================================================= */
/* a faixa tem altura livre (diferenciais.css) e herdava os 12 px de baixo
   do .bloco de 100svh: o último cartão quase encostava no grafite do
   pipeline. O respiro de baixo passa a ecoar o de cima. */
#diferenciais .difc{border-radius:22px;padding:14px 14px 26px}
#diferenciais .difc__midia{border-radius:14px}
#diferenciais.claro .difc{
  border-color:#E3EAF0;
  box-shadow:0 1px 2px rgba(16,40,70,.04),0 26px 52px -36px rgba(16,40,70,.26);
}
#diferenciais.claro .difc:hover{
  border-color:#CFDCE7;
  box-shadow:0 1px 2px rgba(16,40,70,.05),0 34px 60px -34px rgba(16,40,70,.32);
}
/* o número: anel fino em vez do aro de 2 px */
#diferenciais.claro .difc__n{border-width:1px;background:rgba(10,128,226,.07);border-color:rgba(10,128,226,.38)}
/* a luz que segue o cursor (futuro.js) em azul de marca: a base branca
   lavaria o ciano do escuro */
#diferenciais .difc > .spot{background:radial-gradient(320px circle at var(--sx,50%) var(--sy,50%),rgba(10,128,226,.05),transparent 72%)}
#diferenciais .difc > .spot::after{background:radial-gradient(220px circle at var(--sx,50%) var(--sy,50%),rgba(10,128,226,.55),rgba(10,128,226,0) 72%)}
/* as seis faixas (08/10): a mesma luz, num raio maior, que a faixa é grande */
#diferenciais .fx > .spot{background:radial-gradient(520px circle at var(--sx,50%) var(--sy,50%),rgba(10,128,226,.05),transparent 72%)}
#diferenciais .fx > .spot::after{background:radial-gradient(360px circle at var(--sx,50%) var(--sy,50%),rgba(10,128,226,.5),rgba(10,128,226,0) 72%)}

/* =========================================================================
   PIPELINE e ESTÚDIO — a moldura amacia, a réplica fica
   ========================================================================= */
#pipeline .panel,#estudio .panel{border-radius:16px}
#pipeline .panel__head,#estudio .panel__head{border-radius:16px 16px 0 0}

/* as etapas: o trilho de 3 px na borda vira uma pílula solta por dentro e
   o número vira círculo; o passo de agora é um cartão macio com halo */
:is(#pipeline,#estudio) .ps{gap:6px}
:is(#pipeline,#estudio) .ps__i{
  border-radius:14px;
  border-left-width:1px;border-left-color:transparent;
}
:is(#pipeline,#estudio) .ps__i::before{
  content:"";position:absolute;left:4px;top:10px;bottom:10px;width:3px;border-radius:999px;pointer-events:none;
  background:color-mix(in srgb,var(--st) 30%,transparent);
  transition:background .35s var(--ease);
}
:is(#pipeline,#estudio) .ps__i.is-now::before,
:is(#pipeline,#estudio) .ps__i.is-feito::before{background:var(--st)}
:is(#pipeline,#estudio) .ps__i.is-feito{border-left-color:transparent}
:is(#pipeline,#estudio) .ps__b{padding-left:16px}
:is(#pipeline,#estudio) .ps__n{border-radius:50%}
:is(#pipeline,#estudio) .ps__i.is-now{
  border-color:color-mix(in srgb,var(--st) 30%,transparent);
  border-left-color:color-mix(in srgb,var(--st) 30%,transparent);
  box-shadow:0 18px 38px -26px rgba(0,0,0,.9),0 0 0 4px color-mix(in srgb,var(--st) 6%,transparent);
}
@media (max-height:780px){
  :is(#pipeline,#estudio) .ps{gap:4px}
  :is(#pipeline,#estudio) .ps__b{padding-left:15px}
  :is(#pipeline,#estudio) .ps__i::before{top:8px;bottom:8px}
}

/* os capítulos e a faixa de números: trilho em cápsula e fio que esmaece */
.chapter__track,.chapter__fill{border-radius:999px}
.chapter__track{height:3px}
.signals{
  border-top:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--line-soft) 14%,var(--line-soft) 86%,rgba(255,255,255,0)) 0 0 / 100% 1px no-repeat;
}

/* o seletor de ramo (estúdio e implantação) e a lista dele: pílula */
.rbar__bt{border-radius:999px;padding:5px 14px 5px 6px}
.rbar__ic{border-radius:50%}
.rmenu{border-radius:16px;padding:8px}
.rmenu__op{border-radius:10px}
.rmenu__op[aria-selected="true"]{box-shadow:none}

/* =========================================================================
   LEADS (claro) — a janela pousada, mais macia
   ========================================================================= */
#dossie .tela{border-radius:18px}

/* =========================================================================
   IMPLANTAÇÃO — a faixa de leitura (o que a empresa faz × o que o Akros
   faz) perde as réguas duras: os fios esmaecem nas pontas, como nas perdas
   ========================================================================= */
/* o fio de cima é a borda da .reading-bridge; o de baixo, onde corre a
   barra de progresso, é a borda da .reading-rows. O chão segue
   transparente (atmosfera.css): --stage-bg é o verde antigo. */
#implanta #journey .reading-bridge{
  border-top-color:transparent;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.19) 9%,rgba(255,255,255,.19) 91%,rgba(255,255,255,0)) 0 0 / 100% 1px no-repeat transparent;
}
#implanta #journey .reading-rows{
  border-bottom-color:transparent;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.19) 9%,rgba(255,255,255,.19) 91%,rgba(255,255,255,0)) 0 100% / 100% 1px no-repeat;
}
@media (min-width:481px){
  #implanta #journey .reading-part+.reading-part{
    border-left-color:transparent;
    background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.16) 22%,rgba(255,255,255,.16) 78%,rgba(255,255,255,0)) 0 0 / 1px 100% no-repeat;
  }
}

/* =========================================================================
   LADO A LADO (claro) — a coluna Akros vira uma peça só, branca, de canto
   redondo; o resto segue sem moldura (comparativo.css explica por quê)
   ========================================================================= */
#comparativo .vs thead .vs__nos{
  border-radius:14px 14px 0 0;
  background:linear-gradient(180deg,#0A6BD8 0%,#0A56C8 100%);
}
#comparativo.claro .vs .vs__nos{
  background:#FFFFFF;
  border-left-color:rgba(10,128,226,.20);border-right-color:rgba(10,128,226,.20);
}
#comparativo.claro .vs thead .vs__nos{background:linear-gradient(180deg,#0A6BD8 0%,#0A56C8 100%)}
#comparativo.claro .vs tbody .vs__nos{border-top-color:rgba(10,128,226,.09)}
#comparativo.claro .vs tbody tr:last-child .vs__nos{
  border-bottom-color:rgba(10,128,226,.20);
  border-radius:0 0 14px 14px;
  box-shadow:0 22px 30px -26px rgba(16,40,70,.30);
}
#comparativo.claro .vs tbody tr:hover .vs__nos{background:#F7FBFF}
/* o «sim» da coluna Akros ganha um disco de luz */
#comparativo .vs tbody .vs__nos .mk--sim{border-radius:50%;background:rgba(10,128,226,.10);box-shadow:0 0 0 3px rgba(10,128,226,.10)}
/* os fios das linhas nascem do nada à esquerda, em vez de cortar seco */
#comparativo.claro .vs tbody th{border-image:linear-gradient(90deg,rgba(220,229,236,0),#DCE5EC 38%) 1}

/* =========================================================================
   PLANOS — cartão de canto macio com o contorno vivo
   ========================================================================= */
#planos .plano{border-radius:20px}
#planos .plano:not(.plano--destaque){border-color:transparent}
#planos .plano:not(.plano--destaque):hover{border-color:rgba(103,183,255,.42)}
#planos .planos__grade > .plano:nth-child(2){--la:170deg}
#planos .planos__grade > .plano:nth-child(4){--la:190deg}
#planos .planos__grade > .plano:nth-child(5){--la:210deg}
/* os módulos à parte: caixa de canto redondo (o tracejado lia como rascunho)
   e cada módulo em pílula */
#planos .plano__modulos{border-radius:12px;border-style:solid;border-color:rgba(108,184,255,.20)}
#planos .plano__modulos li{border-radius:999px;padding:5px 10px}
#planos .planosob{border-radius:22px}

/* =========================================================================
   PILOTO — três cartões com o contorno vivo, ícone em círculo
   ========================================================================= */
#piloto .piloto__c{
  position:relative;isolation:isolate;border-radius:20px;border-color:transparent;
  background:
    radial-gradient(85% 75% at var(--lx,0%) var(--ly,0%),rgba(103,183,255,.07) 0%,rgba(103,183,255,0) 72%),
    var(--gr-card);
}
#piloto .piloto__c:nth-child(2){--lx:50%;--ly:0%;--la:180deg}
#piloto .piloto__c:nth-child(3){--lx:100%;--ly:0%;--la:210deg}
#piloto .piloto__c:hover{border-color:rgba(10,128,226,.45)}
#piloto .piloto__ic{
  border-radius:50%;
  background:radial-gradient(circle at 30% 25%,rgba(103,183,255,.26),rgba(10,128,226,.12) 70%);
  box-shadow:inset 0 0 0 1px rgba(103,183,255,.22);
}

/* =========================================================================
   DÚVIDAS (claro) — a lista mora num cartão branco; os fios esmaecem nas
   pontas e a pergunta sob o cursor vira uma faixa macia
   ========================================================================= */
#faq .faq{
  border:1px solid #E3EAF0;border-radius:22px;padding:6px;
  background:#FFFFFF;
  box-shadow:0 1px 2px rgba(16,40,70,.04),0 30px 60px -42px rgba(16,40,70,.30);
}
#faq .faq__i{position:relative;border-bottom:0;border-radius:14px}
#faq .faq__i::before{
  content:"";position:absolute;left:16px;right:16px;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(220,229,236,0),#E3EAF0 14%,#E3EAF0 86%,rgba(220,229,236,0));
  transition:opacity .3s var(--ease);
}
#faq .faq__col:first-child .faq__i:first-child::before,
#faq .faq__i:hover::before,#faq .faq__i[open]::before,
#faq .faq__i:hover + .faq__i::before,#faq .faq__i[open] + .faq__i::before{opacity:0}
/* o «+» ganha um disco (sombra de espalhamento: o desenho cresce, a linha
   não — nove perguntas cabem nos 712 px do dono) */
#faq .faq__sinal{
  border-radius:50%;background:rgba(10,31,69,.05);box-shadow:0 0 0 5px rgba(10,31,69,.05);
  transition:transform .42s var(--ease-pop),color .34s var(--ease),background .34s var(--ease),box-shadow .34s var(--ease);
}
#faq .faq__sinal::before,#faq .faq__sinal::after{width:11px}
#faq .faq__i:hover .faq__sinal,#faq .faq__i[open] .faq__sinal{background:rgba(10,128,226,.10);box-shadow:0 0 0 5px rgba(10,128,226,.10)}

/* =========================================================================
   FECHAMENTO — o mosaico se dissolve no rodapé em vez de ser cortado na
   emenda: a máscara radial de escuro.css ganha um degradê vertical que
   apaga os últimos 26 % da faixa (o chão dos dois é o mesmo grafite)
   ========================================================================= */
#fechamento.fim::before{
  -webkit-mask-image:radial-gradient(74% 72% at 50% 50%,transparent 42%,#000 100%),linear-gradient(180deg,#000 74%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(74% 72% at 50% 50%,transparent 42%,#000 100%),linear-gradient(180deg,#000 74%,transparent 100%);
  mask-composite:intersect;
}
/* o piscar (js/mosaico.js) segue a mesma máscara: nenhuma pastilha acende
   onde o mosaico já se apagou */
#fechamento .mos-pisca{
  -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 74%,transparent 100%);
}

/* =========================================================================
   RITMO ENTRE AS FAIXAS (08/10) — um vão só no site inteiro abaixo da hero.
   Antes, de conteúdo a conteúdo, o vão entre duas faixas ia de 81 a 207px
   (1521×712): cada seção tinha o próprio recuo, e as de altura fixa ainda
   centravam o miolo e deixavam sobra. Agora toda faixa tem o mesmo recuo em
   cima (T) e embaixo (B), e o vão entre duas é sempre B + T.
   O dono, 08/10: «a separação entre fundos das seções é a delimitação das
   seções». O vão se mede da troca de fundo e tem de ser IGUAL dos dois
   lados dela, então T = B, um recuo só. Depois, «aumente um pouco a
   distância»: 84px na 712 (era 68), 112 na 1080 (era 91), 88 no celular.
   Depois, «aumente mais»: 100px na 712, 127 na 1080, 100 no celular.
   As de palco (pipeline, estúdio, dossiê, implantação) e a cortina das
   perdas seguem com 100svh: o palco é flex:1 e preenche o miolo. As de
   conteúdo (diferenciais, comparativo, planos, piloto, dúvidas) passam a ter
   a altura do conteúdo, então nada sobra. A faixa da foto (cume) fica fora.
   ========================================================================= */
:root{--sec-b:max(100px,clamp(88px,11.8vh,160px));--sec-t:var(--sec-b)}
#top :is(#perdas,#diferenciais,#pipeline,#estudio,#dossie,#implanta,#comparativo,#planos,#piloto,#faq),
#top #fechamento.fim{padding-top:var(--sec-t);padding-bottom:var(--sec-b)}
/* 20/10, o dono: «aproxime um pouco verticalmente a seção "Do que você vende
   até a hora marcada." da seção anterior». Pipeline e estúdio têm o MESMO
   fundo (rgb 10,11,14), então não há troca de fundo para centrar o vão, e
   B + T dava 204–259px de nada (medido 390–1920). Só o pé do pipeline
   encolhe: o recuo de cima do estúdio segue igual, e o «plataforma» do menu
   para no mesmo lugar. Vale só com o estúdio logo depois e visível; se a aba
   Site esconder ou mover uma das duas, volta o vão B + T. */
#top #pipeline:has(+ #estudio:not([hidden])){padding-bottom:calc(var(--sec-b) * .4)}
@media (min-width:1181px){
  #top :is(#diferenciais,#comparativo,#planos,#piloto,#faq){height:auto;min-height:0}
  /* perdas é a cortina e fica com 100svh: a grade toma a sobra em vez de o
     miolo boiar no centro, e a fonte de cada cartão desce ao pé dele */
  #perdas .perdas__grade{flex:1 1 auto}
  /* no mestre a sobra se divide em cima e embaixo do duelo: numa tela alta
     o cartão cresce ~170px por fileira, e com a sobra toda num lugar só
     abria um buraco entre a frase e as fontes */
  #perdas .perda--mestre .perda__rot{margin-bottom:clamp(12px,2.2vh,24px)}
  #perdas .perda--mestre .duelo{margin-top:auto}
  /* implantação: o chão do palco (o pé, 11,7cqw, folga da câmera) já é o
     recuo de baixo — por isso implanta.css o zerava; continua zerado */
  #top #implanta{padding-bottom:0}
  /* dossiê: a janela media 85% do miolo e boiava no centro dele. Agora ela
     tem essa MESMA altura escrita em svh, e a faixa tem a altura dela.
     O /.88 desfaz o zoom da janela, que escala px e svh (medido: 503px de
     altura pediam 443 sem a divisão, a 1521×712) */
  #top #dossie{height:auto;min-height:0}
  #dossie .faixa{flex:none}
  /* a altura da janela NÃO segue o recuo: ela foi acertada com o dono e
     fica a mesma quando o vão muda (é a conta do recuo de 68/91) */
  #dossie .tela{flex:none;max-height:none;height:min(900px,calc((100svh - 2 * max(68px,clamp(56px,8.4vh,112px))) * .85 / .88))}
}
/* tela baixa (a do dono, 1521×712): com o vão de 84px a coluna do pipeline
   pedia 518px para 493 e encostava no fio dos números. O título fica do
   tamanho do estúdio (que já encolhia assim desde 07/10), os números também,
   e o cabeçalho das duas perde 6px em cada respiro */
@media (min-width:1181px) and (max-height:820px){
  #pipeline .sechead__title{font-size:min(clamp(1.9rem,3.5vw,3.3rem),4.4vh)}
  #pipeline .signals{padding-top:clamp(9px,1.3vh,18px)}
  #pipeline .signal b{font-size:1.5rem}
  :is(#pipeline,#estudio) .sechead__eyebrow{margin-bottom:10px}
  :is(#pipeline,#estudio) .sechead__title{margin-bottom:10px}
  :is(#pipeline,#estudio) .ps{margin-top:4px}
}
@media (min-width:1181px) and (max-width:1366px) and (max-height:820px){
  /* 1280x720: em 4,4vh o titulo do pipeline quebrava em 4 linhas (139px) */
  :is(#pipeline,#estudio) .sechead__title{font-size:min(2.2vw,4.4vh)}
}
/* no celular a jornada empilha, e o herói dela somava 35/34px de recuo
   próprio ao da faixa (106/105 medidos a 390): fica só o da faixa */
@media (max-width:1180px){
  #implanta #journey .hero{padding-top:0;padding-bottom:0}
}

/* =========================================================================
   menos movimento: a luz de trás fica parada
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .planos__grade::before,.piloto__cartoes::before{animation:none}
}