/* =========================================================================
   AKROS — ATMOSFERA (o chão de cada faixa)
   Carrega depois de futuro.css. Não encosta na hero nem no menu.

   O problema: seis faixas claras eram branco ou tinta CHAPADOS — certas no
   contraste, mortas na vista. O remédio não é enfeite, é profundidade, e ela
   vem de quatro camadas finas que se repetem em toda faixa (é a repetição
   que lê como sistema):

     1. LUZ      lavagens radiais no próprio `background` (azul de marca, ciano)
     2. GRADE    fios de 1px a cada 72px, que somem nas bordas (blueprint)
     3. AURORA   duas manchas de luz que derivam devagar (só transform: custa
                 pouco, e pausa quando a faixa sai da tela — ver futuro.js)
     4. GRÃO     ruído de 3–5%: tira o degrau de cor dos degradês escuros
                 (banding) e dá a textura de papel/filme que o chapado não tem

   E a EMENDA: cada faixa abre com um fio de luz de 1px que some nas pontas —
   no lugar do fio chapado que existia — para a troca de fundo ler como
   decisão, não como corte.

   Branco e tinta se alternam como antes (bandas.css manda no RITMO; aqui só
   muda a TEXTURA). A faixa do comparativo continua quase branca de propósito:
   a tabela é feita de fios de cabelo e precisa do branco para existir.
   ========================================================================= */

:root{
  --atm-luz:70,182,255;
  --atm-marca:10,128,226;

  /* grão: tijolo de 240px, ruído fractal tingido; o alfa vive no SVG (CSS não
     põe opacidade por camada de fundo). Claro = azul-tinta; escuro = branco. */
  --atm-grao-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .2 0 0 0 0 .4 .16 0 0 0 -.065'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --atm-grao-e:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .2 0 0 0 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* fio de emenda (1px, some nas pontas) */
  --atm-fio-c:linear-gradient(90deg,transparent 0%,rgba(10,128,226,.34) 50%,transparent 100%) top/100% 1px no-repeat;
  --atm-fio-e:linear-gradient(90deg,transparent 0%,rgba(120,200,255,.46) 50%,transparent 100%) top/100% 1px no-repeat;
}

/* ---------------------------------------------------------------------------
   AS DUAS CAMADAS ANIMÁVEIS (grade e aurora) — comuns a toda faixa
   `.pipeline`, `.bloco` e `.fim` já são contexto de empilhamento (z-index:5),
   então o z-index:-1 fica ACIMA do chão da própria seção e ABAIXO do texto.
   --------------------------------------------------------------------------- */
.pipeline::before,.bloco::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(var(--atm-fio,rgba(10,60,120,.055)) 1px,transparent 1px),
    linear-gradient(90deg,var(--atm-fio,rgba(10,60,120,.055)) 1px,transparent 1px);
  background-size:72px 72px;background-position:center top;
  -webkit-mask-image:radial-gradient(82% 72% at 50% 36%,#000 0%,transparent 82%);
          mask-image:radial-gradient(82% 72% at 50% 36%,#000 0%,transparent 82%);
}
.pipeline::after,.bloco::after,.fim::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--atm-aurora);
  animation:atm-deriva 38s ease-in-out infinite alternate;
}
@keyframes atm-deriva{
  from{transform:translate3d(-2.5%,1.6%,0)}
  to  {transform:translate3d(2.5%,-1.6%,0)}
}
/* futuro.js marca a faixa que saiu da tela: a aurora para de gastar quadro */
.atm-fora::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .pipeline::after,.bloco::after,.fim::after{animation:none}
}

/* ---------------------------------------------------------------------------
   FAIXAS CLARAS — branco (2, 4, 8, 10) e tinta (3, 7)
   --------------------------------------------------------------------------- */
.pipeline,#estudio,#dossie,#capacidades,#comparativo,#faq{
  --atm-fio:rgba(10,60,120,.055);
  --atm-aurora:
    radial-gradient(34% 40% at 24% 30%,rgba(var(--atm-marca),.065),transparent 70%),
    radial-gradient(30% 36% at 78% 70%,rgba(var(--atm-luz),.08),transparent 70%);
}

/* 2 · pipeline — branco; a cortina (box-shadow) segue em pipeline.css */
.pipeline{
  background:
    var(--atm-grao-c),
    radial-gradient(70% 55% at 88% 4%,rgba(var(--atm-marca),.075),transparent 64%),
    radial-gradient(60% 50% at 4% 100%,rgba(var(--atm-luz),.09),transparent 66%),
    linear-gradient(180deg,#FFFFFF 0%,#F8FBFE 100%);
}

/* 3 · estúdio — tinta; o fio chapado de emenda vira fio de luz */
#estudio{
  background:
    var(--atm-fio-c),
    var(--atm-grao-c),
    radial-gradient(76% 60% at 92% -6%,rgba(var(--atm-marca),.12),transparent 62%),
    radial-gradient(56% 50% at 0% 100%,rgba(255,255,255,.92),transparent 64%),
    radial-gradient(42% 42% at 100% 100%,rgba(var(--atm-luz),.11),transparent 70%),
    linear-gradient(180deg,#F3F8FC 0%,#E6EFF7 100%);
  box-shadow:none;
}

/* 4 · dossiê — branco; a janela de Leads é a peça, o chão só a emoldura */
#dossie{
  background:
    var(--atm-fio-c),
    var(--atm-grao-c),
    radial-gradient(64% 52% at 6% 2%,rgba(var(--atm-marca),.07),transparent 64%),
    radial-gradient(58% 50% at 96% 100%,rgba(var(--atm-luz),.09),transparent 66%),
    linear-gradient(180deg,#FFFFFF 0%,#F9FBFE 100%);
  box-shadow:none;
}

/* 7 · capacidades — tinta, espelhada na 3 (luz entra pela esquerda) */
#capacidades{
  background:
    var(--atm-fio-c),
    var(--atm-grao-c),
    radial-gradient(76% 60% at 8% -6%,rgba(var(--atm-marca),.12),transparent 62%),
    radial-gradient(56% 50% at 100% 100%,rgba(255,255,255,.92),transparent 64%),
    radial-gradient(42% 42% at 0% 100%,rgba(var(--atm-luz),.11),transparent 70%),
    linear-gradient(180deg,#F3F8FC 0%,#E6EFF7 100%);
  box-shadow:none;
}

/* 8 · comparativo — o mais calado: só as quinas tomam cor, o miolo é branco */
#comparativo{
  --atm-fio:rgba(10,60,120,.04);
  background:
    var(--atm-fio-c),
    var(--atm-grao-c),
    radial-gradient(50% 42% at 100% 0%,rgba(var(--atm-marca),.055),transparent 66%),
    radial-gradient(50% 42% at 0% 100%,rgba(var(--atm-luz),.06),transparent 66%),
    #FFFFFF;
  box-shadow:none;
}

/* 10 · dúvidas — branco, sem fio de emenda (a de cima é escura) */
#faq{
  --atm-fio:rgba(10,60,120,.04);
  background:
    var(--atm-grao-c),
    radial-gradient(56% 46% at 92% 100%,rgba(var(--atm-marca),.06),transparent 66%),
    radial-gradient(50% 40% at 4% 0%,rgba(var(--atm-luz),.06),transparent 66%),
    #FFFFFF;
}

/* ---------------------------------------------------------------------------
   FAIXAS ESCURAS — 5 perdas, 6 implantação, 9 planos, 11 fechamento
   Cada uma mantém o tom que já tinha; muda a profundidade.
   --------------------------------------------------------------------------- */
#perdas,#implanta,#planos,.fim{
  --atm-fio:rgba(150,200,255,.05);
}

/* 5 · perdas — as cinco camadas de perdas.css, agora sob o grão e o fio */
#perdas{
  --atm-aurora:
    radial-gradient(36% 42% at 18% 28%,rgba(var(--atm-luz),.13),transparent 70%),
    radial-gradient(32% 38% at 84% 72%,rgba(var(--atm-marca),.2),transparent 70%);
  background:
    var(--atm-fio-e),
    var(--atm-grao-e),
    radial-gradient(78% 58% at 44% 112%,rgba(56,140,206,.55) 0%,rgba(56,140,206,0) 64%),
    radial-gradient(54% 48% at 2% 86%,rgba(30,96,158,.42) 0%,rgba(30,96,158,0) 62%),
    radial-gradient(46% 42% at 98% 96%,rgba(28,88,146,.34) 0%,rgba(28,88,146,0) 60%),
    radial-gradient(72% 54% at 50% -8%,rgba(5,17,31,.86) 0%,rgba(5,17,31,0) 64%),
    linear-gradient(168deg,#0C2540 0%,#0A1C31 44%,#0C2439 100%);
}

/* 6 · implantação — o verde da jornada, com palco: a luz fica ATRÁS dos
   aparelhos, o teto fecha para o texto branco ler, os cantos escurecem */
#implanta{
  --atm-aurora:
    radial-gradient(34% 42% at 20% 30%,rgba(52,211,153,.11),transparent 70%),
    radial-gradient(30% 38% at 82% 74%,rgba(45,212,191,.12),transparent 70%);
  background:
    linear-gradient(90deg,transparent 0%,rgba(140,255,205,.4) 50%,transparent 100%) top/100% 1px no-repeat,
    var(--atm-grao-e),
    radial-gradient(52% 62% at 64% 56%,rgba(38,160,112,.34) 0%,rgba(38,160,112,0) 68%),
    radial-gradient(60% 52% at 0% 100%,rgba(5,60,46,.78) 0%,rgba(5,60,46,0) 66%),
    radial-gradient(60% 48% at 100% 100%,rgba(4,52,40,.6) 0%,rgba(4,52,40,0) 66%),
    radial-gradient(70% 54% at 50% -10%,rgba(2,20,15,.76) 0%,rgba(2,20,15,0) 64%),
    linear-gradient(170deg,#0D4333 0%,#0B3B2E 46%,#09322A 100%);
  box-shadow:none;
}
/* a jornada (jornada.css) pintava o próprio chão, opaco, por cima da seção
   inteira — o fundo acima nunca aparecia. Ela passa a ser transparente, e a
   faixa de leitura do topo (que também levava o chão opaco) acompanha. */
#journey,#journey .reading-bridge{background:transparent}

/* 9 · planos — vitrine: luz do meio, teto fechado; a aurora corre por trás */
#planos{
  --atm-aurora:
    radial-gradient(34% 40% at 14% 34%,rgba(var(--atm-luz),.11),transparent 70%),
    radial-gradient(32% 38% at 88% 66%,rgba(var(--atm-marca),.18),transparent 70%);
  background:
    var(--atm-fio-e),
    var(--atm-grao-e),
    radial-gradient(46% 52% at 50% 62%,rgba(10,128,226,.20) 0%,rgba(10,128,226,0) 70%),
    radial-gradient(70% 52% at 50% -8%,rgba(3,12,24,.82) 0%,rgba(3,12,24,0) 64%),
    linear-gradient(178deg,#0A1F3A 0%,#08182C 54%,#071A31 100%);
  box-shadow:none;
}

/* 11 · fechamento — o halo da manchete é ::before (fechamento.css); aqui só
   a aurora, o grão e o fio. Sem grade: o título é a única peça. */
.fim{
  --atm-aurora:
    radial-gradient(34% 44% at 16% 40%,rgba(var(--atm-luz),.1),transparent 70%),
    radial-gradient(34% 44% at 86% 60%,rgba(var(--atm-marca),.16),transparent 70%);
  background:
    var(--atm-fio-e),
    var(--atm-grao-e),
    radial-gradient(64% 70% at 50% 112%,rgba(10,128,226,.20) 0%,rgba(10,128,226,0) 66%),
    linear-gradient(180deg,#071A31 0%,#061527 58%,#05111F 100%);
}