/* =========================================================================
   AKROS — O JOGO DE FUNDOS  (da seção 2 em diante)

   Este arquivo é o antigo `fundo-branco.css`, que só sabia dizer "branco".
   Branco em toda parte resolveu o contraste e criou outro problema: seis
   seções seguidas no mesmo tom leem como UM documento longo, não como seis
   capítulos. Sem emenda entre elas, o leitor não sente que avançou — e a
   página inteira passa a parecer mais curta do que é.

   O insight veio da landing da Falcão: lá o fundo ALTERNA, e é a alternância
   — não a decoração — que dá ritmo. Um bloco escuro no meio serve de âncora,
   e as faixas claras em volta se revezam entre dois tons. Cada troca de
   fundo diz "novo assunto" antes de qualquer título ser lido.

   A tabela, e nada fora dela:

     2 · pipeline       BRANCO     a cortina sobe do hero azul: acender a luz
     3 · estúdio        TINTA      inverte a 2 — chão com tinta, painel branco
     4 · dossiê         BRANCO     a janela de Leads é a peça; branco a solta
     5 · perdas         ESCURA     a âncora (fica exatamente como está)
     6 · implantação    ESCURA     a jornada mora aqui e traz o chão dela
     7 · capacidades    TINTA      seis cartões brancos precisam de chão
     8 · comparativo    BRANCO     o quadro já é fio de cabelo; chão calado
     9 · planos         ESCURA     o preço; e o cartão aceso pede noite
    10 · dúvidas        BRANCO     parede de texto — branco é o chão honesto
    11 · fechamento     ESCURA     corre direto para o rodapé, sem emenda

   Nenhum par vizinho repete tom, e o par mais forte da página (5→6, escuro
   para branco) cai justamente onde a promessa muda de "o problema" para "a
   solução". O escuro não se mexeu: ele já era o ponto alto e continua sendo.

   Carregado por ÚLTIMO de propósito. Aqui mora TODO o chão do site — as
   seções não pintam mais o próprio fundo, e `#perdas` é a única exceção,
   porque lá o fundo é a peça, não o suporte.

   Dois tons e um fio. Mais que isso vira arco-íris; a alternância só lê como
   sistema enquanto os valores se repetem.
   ========================================================================= */

:root{
  --chao:     #FFFFFF;   /* a faixa clara */
  --chao-t1:  #F4F8FC;   /* topo da faixa de tinta */
  --chao-t2:  #EAF2F9;   /* pé da faixa de tinta — desce ao encontro do branco */

  /* O fio da emenda. A tinta está 11 pontos abaixo do branco no topo: é
     pouco o bastante para a troca parecer sujeira de render em vez de
     decisão. Um fio de 1px resolve por 6% de tinta — e some quando o
     contraste já é evidente (a emenda com o escuro não leva fio). */
  --emenda:   rgba(18,46,76,.06);
  --brilho:   rgba(255,255,255,.92);
}

/* =========================================================================
   AS FAIXAS
   ========================================================================= */

/* ---- 2 · pipeline · BRANCO --------------------------------------------
   A cortina continua: a sombra de cima é o que faz esta seção parecer subir
   POR CIMA do hero. Ela fica; só o gradiente azul sai. */
.pipeline{
  background:var(--chao);
  box-shadow:
    0 -30px 80px -30px rgba(12,34,58,calc(.55 * (1 - var(--p,1)))),
    inset 0 1px 0 rgba(255,255,255,.92);
}

/* ---- o padrão de `.bloco`: branco ---- */
.bloco{ background:var(--chao); box-shadow:none; }

/* ---- 3 · estúdio · TINTA ---------------------------------------------- */
#estudio{
  background:linear-gradient(180deg,var(--chao-t1) 0%,var(--chao-t2) 100%);
  box-shadow:inset 0 1px 0 var(--emenda);
}

/* ---- 4 · dossiê · BRANCO ----------------------------------------------
   Vence `.bloco` por especificidade, então precisa da própria linha. E a
   pintura do chão (as manchas, o grão, a vinheta) sai junto: com ela no
   lugar esta seção não ficaria branca, ficaria bege-cinza. */
#dossie{
  background:var(--chao);
  box-shadow:inset 0 1px 0 var(--emenda);
}
#dossie .fundo{ display:none; }

/* ---- 5 · perdas · ESCURA ----------------------------------------------
   Não tem regra aqui. `perdas.css` pinta as cinco camadas dela e este
   arquivo não encosta: é a única seção onde o fundo É o conteúdo. */

/* ---- 6 · implantação · ESCURA -----------------------------------------
   A seção passou a ser a jornada inteira, e a jornada foi desenhada sobre
   este verde: é a cor do palco dela, não um enfeite. Trazê-la para o branco
   obrigaria a repintar a peça toda, e o pedido foi o contrário — que ela
   ficasse exatamente como está.

   Isso custa uma coisa, e é justo dizer qual: a 5 e a 6 ficam escuras em
   sequência, e são escuros DIFERENTES — o azul-noite das perdas e o verde
   da jornada. A alternância deixa de fazer o trabalho nessa emenda, e quem
   passa a fazê-lo é o próprio TOM: a virada de azul para verde é grande o
   bastante para ninguém achar que é a mesma seção continuando. O fio de
   cima existe por isso, e é claro: sobre dois escuros, uma linha escura não
   separa nada. */
#implanta{
  background:#0B3B2E;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

/* ---- 7 · capacidades · TINTA ------------------------------------------ */
#capacidades{
  background:linear-gradient(180deg,var(--chao-t1) 0%,var(--chao-t2) 100%);
  box-shadow:inset 0 1px 0 var(--emenda);
}

/* ---- 8 · comparativo · BRANCO -----------------------------------------
   Vence `.bloco` por especificidade, então precisa da própria linha — mesma
   situação de `#dossie` e de `#faq`.

   E é BRANCO por obrigação dupla. A de rodízio: a 7 é tinta e a 9 é escura,
   sobra o branco. E a da peça: o quadro comparativo não tem moldura nem
   fundo próprio — ele é oito fios de cabelo e uma coluna de tinta lavada.
   Sobre a faixa de tinta, um fio a 12% de tinta some, e com ele some a
   única estrutura que a tabela tem. Branco é o chão que deixa o fio existir.

   Leva fio de emenda: a seção de cima é clara. */
#comparativo{
  background:var(--chao);
  box-shadow:inset 0 1px 0 var(--emenda);
}

/* ---- 9 · planos · ESCURA ----------------------------------------------
   O rodízio sozinho já pedia um tom que não fosse o branco da 8 nem o da
   10. Mas a razão de verdade não é de rodízio: aqui o assunto vira PREÇO,
   e o corte de tom é o que separa "o que ele faz" de "quanto custa" antes de
   qualquer título ser lido.

   Três camadas, e a ordem importa. A luz do MEIO é um refletor de palco:
   ela cai atrás da fileira, mais forte na altura dos cartões, e é o que faz
   o cartão aceso parecer iluminado em vez de pintado. O fechamento do teto
   devolve contraste ao texto branco do cabeçalho. Só então o azul chapado.

   É um escuro DIFERENTE do da 5 — lá o azul é mais claro e a luz vem de
   baixo, como palco de teatro; aqui é mais fechado e a luz vem de trás,
   como vitrine. As duas estão a quatro seções de distância, então ninguém
   as compara lado a lado; o que importa é que nenhuma das duas pareça a outra
   quando a página é rolada de uma vez. */
#planos{
  background:
    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:inset 0 1px 0 rgba(255,255,255,.10);
}

/* ---- 10 · dúvidas · BRANCO --------------------------------------------
   Vence `.bloco` por especificidade, então precisa da própria linha — mesma
   situação de `#dossie`.

   E NÃO leva fio de emenda, ao contrário de todas as outras faixas claras.
   A seção de cima é escura: sobre esse contraste um fio de tinta a 6% não
   separa nada, só suja a primeira linha de pixels. É a mesma regra escrita
   lá em cima — a emenda com o escuro não leva fio. */
#faq{
  background:var(--chao);
  box-shadow:none;
}

/* ---- 11 · fechamento + rodapé · ESCURA --------------------------------
   Não tem regra aqui, e é a segunda exceção do arquivo (a primeira é a 5).
   As duas peças não são `.bloco`: não têm uma tela de altura, não entram no
   rodízio, e o fundo delas É a peça — o halo por trás da manchete e o
   degrau de tom até o rodapé são o desenho, não o suporte. Moram em
   css/fechamento.css, junto do resto. */

/* =========================================================================
   O QUE O CHÃO OBRIGA NOS CONTAINERS

   Toda peça deste site é clara. Trocar o chão de uma seção, portanto, nunca
   é só trocar o chão: a peça que estava certa sobre branco pode dissolver
   sobre tinta, e vice-versa. As regras abaixo são a contrapartida — nenhuma
   está aqui por gosto.
   ========================================================================= */

/* ---- o painel de vidro (seções 2 e 3) ----
   Sobre BRANCO ele desce um degrau e ganha sombra de contato: fundo branco
   em cima de fundo branco não tem borda, e a sombra difusa que existia era
   larga demais para desenhar o contorno. */
.panel{
  background:linear-gradient(166deg,#FBFCFE 0%,#EFF4F9 100%);
  border-color:rgba(18,46,76,.07);
  box-shadow:
    0 70px 120px -44px rgba(18,46,76,.34),
    0 26px 54px -26px rgba(18,46,76,.20),
    0 3px 8px -3px rgba(18,46,76,.12),
    0 0 0 1px rgba(18,46,76,.055),
    inset 0 1px 0 rgba(255,255,255,.96);
}

/* ...e na seção 3 ele INVERTE. O pé do painel (#EFF4F9) e o pé da faixa de
   tinta (#EAF2F9) estão a 5 pontos um do outro: mantido o degradê, o painel
   dissolveria no chão justamente na metade de baixo, onde mora o conteúdo.
   Branco chapado sobre tinta é a mesma relação da seção 2 ao contrário — e é
   isso que faz as duas lerem como par, não como repetição. */
#estudio .panel{
  background:#FFFFFF;
  border-color:rgba(18,46,76,.085);
  box-shadow:
    0 70px 120px -44px rgba(18,46,76,.30),
    0 26px 54px -26px rgba(18,46,76,.17),
    0 3px 8px -3px rgba(18,46,76,.10),
    0 0 0 1px rgba(18,46,76,.06),
    inset 0 1px 0 #FFFFFF;
}

/* ---- as colunas do funil (seção 2) ----
   Cor OPACA de propósito. O degradê no pé da pilha tem de terminar
   exatamente na cor da coluna; com fundo translúcido essa cor muda junto com
   o painel por baixo e o degradê passa a pintar uma faixa cinza sobre o
   nada. Opaco, os dois valores são o mesmo número e a emenda some por
   construção. */
.col{
  background:#E9F0F6;
  border-color:rgba(18,46,76,.075);
  box-shadow:inset 0 1px 3px rgba(18,46,76,.06);
}
.col__list::after{ background:linear-gradient(to top,#E9F0F6 22%,rgba(233,240,246,0)); }

/* ---- os poços da seção 3 ----
   Continuam um degrau abaixo do painel. Como o painel subiu para branco
   chapado, o degrau aqui ficou MAIOR do que era — e é o que se quer: são
   poços, têm de parecer escavados. */
.motor,.ficha{
  background:linear-gradient(168deg,#F7FAFC 0%,#E9F0F6 100%);
  border-color:rgba(18,46,76,.085);
  box-shadow:0 18px 34px -20px rgba(18,46,76,.34),inset 0 1px 0 rgba(255,255,255,.9);
}
.cela{ background:rgba(226,236,245,.55); }
.cela.util{ background:rgba(238,244,250,.9); }