/* ---------------------------------------------------------------
   Nino — página única da lista de espera
   Paleta e regras de contraste vêm do Briefing de Marca e Design.
   Nada aqui depende de servidor: abra o arquivo direto no navegador.
   Para ligar o formulário, edite WAITLIST no <script> lá embaixo.
   --------------------------------------------------------------- */

:root{
  /* marca */
  --navy:#030929;
  --cyan:#04B6F6;
  --blue:#0172F6;
  --blue-deep:#012FDD;
  --white:#FFFFFF;
  /* neutros */
  --paper:#F5F7FC;
  --line:#DCE3F2;
  --ink-soft:#3B4666;
  --muted:#616C89;      /* escurecido em relação ao briefing: ver nota no fim do arquivo */
  /* sobre fundo escuro */
  --on-dark:#FFFFFF;
  --on-dark-soft:#A8B4CE;  /* 9,4:1 sobre navy */
  --line-dark:#1C2547;

  /* Elevacao para fundo CLARO. A moldura da capa ja tinha sombra, mas
     aquela e calibrada contra o navy (preto a 65%) e sobre o papel
     viraria sujeira. Estas sao tingidas de navy, nao de preto: sobre
     #F5F7FC uma sombra neutra fica cinza e briga com o azul do resto. */
  --lift-1:0 1px 2px rgba(3,9,41,.05), 0 6px 16px -10px rgba(3,9,41,.18);
  --lift-2:0 1px 3px rgba(3,9,41,.06), 0 18px 38px -18px rgba(3,9,41,.22);

  --display:'Nunito','Trebuchet MS',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  /* so o slogan do topo. Baloo 2 esta na lista do briefing junto com o
     Nunito, e e a mais arredondada das tres: ao lado do lettering do
     logo ela conversa, sem imitar - que e o que o briefing proibe.
     Nao usar em mais nada, senao vira uma terceira fonte de interface. */
  --slogan:'Baloo 2','Nunito','Trebuchet MS',system-ui,sans-serif;

  --wrap:1080px;
  --gap:clamp(56px,9vw,104px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;
  background:var(--white);
  color:var(--navy);
  font-family:var(--body);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.15;letter-spacing:-.015em;margin:0}
/* h1 entra junto por causa do titulo de perguntas.html, que e h1 da
   pagina e nao tinha regra de tamanho: caia no padrao do navegador,
   32px fixos. .hero h1 tem especificidade maior e continua vencendo
   na capa. */
h1,h2{font-size:clamp(28px,4.2vw,40px)}
h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
p{margin:0}
a{color:var(--blue-deep)}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:var(--gap) 0}
.dark{background:var(--navy);color:var(--on-dark)}
.dark h2,.dark h3{color:var(--on-dark)}
.dark p{color:var(--on-dark-soft)}
.soft{background:var(--paper)}

.lede{font-family:var(--display);font-weight:400;font-size:clamp(19px,2.2vw,22px);line-height:1.55;color:var(--ink-soft);max-width:60ch}
/* A capa nao tem a classe .dark, entao por muito tempo o lede dela caiu
   na cor de texto escuro (#3B4666) sobre o navy: 2,1:1, ilegivel. Precisa
   estar aqui junto. O peso 600 e porque a Nunito tem traco mais fino que a
   Inter e o 400 lava sobre fundo escuro. */
.dark .lede,.hero .lede{color:var(--on-dark-soft);font-weight:600}
.num{font-variant-numeric:tabular-nums}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--white);color:var(--navy);padding:12px 18px;border-radius:8px}

/* ---------- topo ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--navy);border-bottom:1px solid var(--line-dark)}
/* 76px e nao 64: o guia agora e um comprimido de 52px, e ele precisa
   de folga em volta para pousar sobre o navy em vez de ficar entalado. */
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}

/* No topo os botoes sao pilulas inteiras, como o comprimido do guia -
   a mesma linguagem da referencia. No resto da pagina eles continuam
   com o canto de 10px de sempre.                                     */
.top .btn{border-radius:999px}
/* O logo NAO fica ao lado do slogan: ele e a palavra "Nino" dentro
   dele. A frase e montada em tres pedacos - "tenha um" + logo +
   "por perto" - e o alinhamento e do flex, nao da linha de base: um
   <img> inline encostaria a base da imagem na base do texto, e como o
   logo tem o sorriso embaixo das letras, elas subiriam demais.

   Assim ha um logo so no arquivo. Repeti-lo - um solto e outro dentro
   da frase - alem de mostrar a marca duas vezes em 64px de altura,
   custaria outros 21 KB de base64.                                   */
/* 6px, e nao os 14px de antes: com o logo virando palavra da frase, o
   vao ao redor dele tem de ser um espaco de palavra, nao um respiro
   entre marca e texto. O proprio JPEG ja traz folga interna, entao 6
   no CSS chegam a uns 12 no olho.                                    */
.mark{display:flex;align-items:center;gap:6px;text-decoration:none}
.mark img{width:88px;height:auto;flex:none}

/* Baloo 2 no lugar do Nunito, e nao so outro corpo: o slogan e
   assinatura, entao ganha a fonte mais arredondada da lista do
   briefing. Peso 500 porque o Baloo ja e cheio de traco - em 600 ele
   comeca a disputar com o proprio logo, que e o que deve pesar aqui.  */
.mark span{
  font-family:var(--slogan);font-weight:500;font-size:19px;
  color:var(--on-dark-soft);display:none;
}

/* Abaixo de 640px sobra so o logo, como sempre foi - a frase inteira
   nao cabe. O alt continua dando o nome da marca a quem le por audio. */
@media (min-width:640px){.mark span{display:inline}}

/* ---------- guia das secoes ----------
   Serve para nao ter de rolar a pagina inteira procurando o que se
   quer. Cada link e um <a> comum: sem JS ele continua funcionando,
   porque quem leva ate a secao e o proprio navegador.

   O desenho e o comprimido da Papa, que e a referencia internacional
   do projeto, mas em vidro escuro em vez de branco. Sobre as fotos
   claras da Papa o branco pousa de leve; sobre o navy da Nino ele
   virava a coisa mais clara do topo inteiro - mais chamativo que o
   botao "Entrar na lista", que e justamente o que deve gritar ali.

   Branco a 8% sobre o navy da um #171D3A, e o texto claro por cima
   fica em 7,9:1 - medido. O fio de borda a 12% e o que desenha a
   pilula: sem ele o fundo a 8% quase nao se separa do navy.

   min-height de 44px por causa da regra de alvo de toque; o padding
   lateral existe para o realce da secao atual ter onde caber.        */
/* O aperto de 8px para 6 no padding lateral, e de 2px para 1 no gap,
   nao e gosto: com "Seja um Nino" o guia passou de cinco itens para
   seis, e os tres pedacos do topo (logo+slogan 230, guia 625, botao
   146, mais dois gaps de 16) pediam 1081px numa faixa que tem 1032 -
   o .wrap tem teto de 1080 e padding de 24 de cada lado. Passava em 49
   pixels, e como o teto e fixo, alargar a janela nunca resolvia: o
   slogan e o botao eram espremidos em QUALQUER tela.

   Os 12px de cada lado de cada item viram 9: seis itens, doze lados,
   36px. Mais 5 do gap e 4 do padding do comprimido. Da a folga de que
   a linha precisa sem mexer no corpo do texto nem encurtar rotulo. */
.guia{
  display:flex;align-items:center;gap:1px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:4px 6px;
}
.guia a{
  position:relative;
  display:flex;align-items:center;min-height:44px;padding:0 9px;
  border-radius:999px;
  /* 14px, e nao os 15 de antes. Com o sexto item o guia so cabia com
     folga de um digito - e num dos casos nao cabia. Entre encolher o
     guia, encurtar o slogan ou espremer o botao, o guia e quem cede:
     ele e navegacao secundaria, e os outros dois sao a assinatura da
     marca e a acao principal. */
  font-family:var(--display);font-weight:700;font-size:14px;
  color:var(--on-dark-soft);text-decoration:none;white-space:nowrap;
  transition:background-color .2s ease,color .2s ease;
}

/* Passar o mouse e estar na secao sao duas coisas diferentes, e cada
   uma tem seu sinal: o mouse acende um fundo, a secao atual acende um
   fio embaixo. Assim da para ver ao mesmo tempo onde voce esta e para
   onde esta apontando.                                               */
.guia a:hover{background:rgba(255,255,255,.10);color:var(--on-dark)}

/* O fio e a mesma descida ciano->azul do funil e da moldura da foto:
   e o que ja marca "isto e a Nino" no resto da pagina. Cresce da
   esquerda, na direcao da leitura, e recua ate o texto - os 12px de
   cada lado sao o padding do proprio link.                           */
.guia a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:9px;
  height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--blue));
  transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.guia a[aria-current]{color:var(--on-dark)}
.guia a[aria-current]::after{transform:scaleX(1)}

/* Abaixo de 1080px o slogan sai da frente: o logo sozinho ja assina o
   topo, e ali a largura faz falta.

   Era 1150px quando o guia tinha cinco itens e ficava na mesma linha
   ate 1000px. Agora ele desce em 1079 (regra seguinte), e abaixo disso
   a primeira faixa tem so o logo e o botao - sobra espaco de sobra. O
   slogan podia ate ficar mais tempo, mas num celular estreito ele
   disputaria com o botao, entao os dois limites andam juntos.        */
@media (max-width:1080px){.mark span{display:none}}

/* Abaixo de 1080px os seis nao cabem na linha do logo e do botao,
   entao o comprimido desce inteiro para uma segunda faixa. Ele rola de
   lado quando precisa - e o jeito de manter os seis visiveis num
   celular sem inventar um menu sanfona, que seria mais codigo e mais
   coisa para dar errado.

   O limite era 1000px com cinco itens. Com seis ele sobe para 1079,
   que e o ultimo pixel antes de o .wrap parar de crescer: acima disso
   a faixa tem 1032px fixos e o aperto do guia ja faz os tres caberem;
   abaixo, a faixa encolhe junto com a janela e nao adianta apertar
   mais.

   A barra de rolagem fica escondida porque atravessaria o comprimido
   como um risco cinza; o corte do ultimo item ja avisa que ha mais
   coisa para o lado.                                                 */
@media (max-width:1079px){
  /* o gap de 16px do topo vale tambem ENTRE as duas linhas, e ali 10
     bastam: num celular cada pixel de topo fixo e tela que o conteudo
     perde. Mexer no min-height nao adiantaria - com duas linhas quem
     manda na altura e o conteudo, nao o minimo.                      */
  .top .wrap{flex-wrap:wrap;row-gap:10px;padding-bottom:12px}
  .guia{order:3;width:100%;overflow-x:auto;scrollbar-width:none}
  .guia::-webkit-scrollbar{display:none}
}

/* Medido em 13/09, com o guia de quatro itens: o comprimido pede 321px
   e a faixa so oferece 295 num aparelho de 360px. Sobravam 26px, e o
   que sumia era o fim de "Seja um Nino" - a porta de entrada do
   recrutamento, cortada no meio da palavra.

   Nao era caso isolado: 320px escondia 59px, 360 escondia 19 e 375, que
   e o iPhone SE, escondia 4. So a partir de 384 cabia inteiro. Ou seja,
   a maioria dos celulares via o ultimo item picado.

   Quatro pixels de respiro de cada lado resolvem: 4 links x 8px = 32px
   recuperados, e o comprimido passa a pedir 289. O toque nao piora,
   porque quem manda na area tocavel e o min-height:44px do link, e nao
   o respiro lateral. O tipo continua em 14px - encolher a letra seria
   pagar em legibilidade o que aqui se paga em espaco em branco.     */
@media (max-width:400px){
  .guia a{padding:0 5px}
}

/* Com o respiro menor o comprimido cabe inteiro a partir de 356px. De
   355 para baixo - 320px e o iPhone SE de primeira geracao - ele ainda
   pede 289 e recebe 255, entao continua rolando de lado.

   Ate aqui o aviso de que havia mais coisa era o proprio corte do
   ultimo item, e ele nao avisava nada: lia como defeito, ainda mais
   caindo no meio de "Seja um Nino". A mascara troca o corte seco por um
   apagamento de 20px, que e como se le "tem mais para ca" sem gastar
   pixel com seta nem reaparecer a barra cinza que foi escondida ali em
   cima de proposito.

   Ela apaga tambem a ponta da pilula, borda e fundo juntos, e e por
   isso que so entra nas larguras em que a rolagem existe de verdade:
   acima de 355 nao ha o que anunciar, e o esmaecido viraria enfeite
   sem funcao.                                                       */
@media (max-width:355px){
  .guia{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent);
  }
}

/* O topo e fixo, entao um pulo de ancora deixaria o titulo da secao
   escondido atras dele. A altura vem do script, medida do proprio
   topo, porque ela muda quando o guia desce para a segunda faixa. O
   valor de reserva cobre o caso de o script nao rodar.               */
main[id],section[id]{scroll-margin-top:calc(var(--topo-h,72px) + 20px)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 22px;
  font-family:var(--display);font-size:17px;font-weight:700;
  border-radius:10px;border:1px solid transparent;text-decoration:none;cursor:pointer;
}
.btn-primary{background:var(--cyan);color:var(--navy)}
.btn-primary:hover{background:#3BC8F8}
.btn-light{background:var(--blue-deep);color:var(--white)}
.btn-light:hover{background:#0126BA}
.btn-ghost{background:transparent;color:var(--on-dark);border-color:#2C3763}
.btn-ghost:hover{border-color:var(--cyan)}

/* ---------- capa ---------- */
.hero{position:relative;background:var(--navy);color:var(--on-dark);padding:clamp(48px,7vw,84px) 0 clamp(56px,8vw,96px);overflow:hidden}

/* ---------- sorriso da capa ----------
   Um arco grosso atras do conteudo, como o da Papa. A forma nao e
   arbitraria: e o sorriso do proprio logo, ampliado ate virar cenario.
   O briefing proibe imitar o LETTERING do logo em texto; a curva de
   baixo dele e outra coisa, e e o unico gesto de marca que a Nino tem
   para ocupar espaco grande.

   Fica atras de tudo (z-index 0, e o .wrap sobe para 1).

   Os 45% de stroke-opacity NAO sao gosto, sao conta. Em cheio o
   #012FDD deixava o texto de apoio (#A8B4CE, 16px) em 4,1:1 sobre
   ele - abaixo do minimo, e num site cujo publico passa dos 75 isso
   nao passa. A 45% o azul efetivo vira #021A7A e o mesmo texto sobe
   para 7,1:1. A forma continua cheia; o que baixou foi so o quanto
   ela cobre o fundo.

   O pathLength="1" no proprio path e o que deixa o desenho ser
   animado sem ninguem precisar medir a curva: o comprimento vira 1, e
   o dashoffset vai de 1 a 0 seja qual for a geometria.               */
.sorriso{
  position:absolute;z-index:0;pointer-events:none;
  left:-16%;top:2%;width:86%;
  overflow:visible;
}
.sorriso path{
  fill:none;stroke:var(--blue-deep);stroke-opacity:.45;
  stroke-width:96;stroke-linecap:round;
}
@media (max-width:939px){
  /* numa coluna so o arco passaria por tras do texto inteiro em vez
     de por tras da manchete. Encolhe e sobe para ficar so no alto. */
  .sorriso{left:-34%;top:-2%;width:120%}
  .sorriso path{stroke-width:120}
}

/* As outras duas secoes navy ganham o mesmo gesto, em posicoes e
   curvas diferentes - tres arcos iguais em fila leriam como repeticao
   de gabarito, nao como marca.

   Em cada uma o arco desvia do que nao pode perder contraste: na
   verificacao ele fica na metade de baixo, longe do funil, cujos
   numeros ja estao calibrados contra o navy e perderiam forca sobre
   azul. Na lista ele fica no alto, acima do formulario.              */
/* Na verificacao o arco fica na METADE DE BAIXO. Nao e enquadramento,
   e necessidade: com ele mais alto passava por tras do funil, e as
   duas ultimas faixas (#1A8CE8 e #2B7FE2) estao calibradas contra o
   navy - sobre azul elas encolhem. Testado nas duas posicoes.        */
.sorriso.verif{left:auto;right:-15%;top:40%;width:76%}
.sorriso.verif path{stroke-width:104}

/* Na lista ele atravessa inteiro, com as duas pontas sangrando para
   fora. Como o traco e medido no viewBox e escala junto com a
   largura, alargar de 88% para 118% engrossaria de 160 para 204px -
   por isso o stroke cai de 88 para 68 e a espessura na tela fica
   parecida com a das outras duas.                                    */
.sorriso.lista{left:-30%;top:-10%;width:118%}
.sorriso.lista path{stroke-width:68}

/* ---------- elo entre o funil e o cartao ----------
   Liga as duas coisas da secao: sai da esquerda, passa POR TRAS do
   funil e desce ate encostar no cartao do Rafael.

   Passar por tras resolve sozinho o problema que tinha me feito
   desviar o arco grande daqui: as faixas do funil sao poligonos
   solidos, entao ele some atras delas e reaparece nos vaos. Onde ele
   apareceria sobre texto - a coluna dos numeros - ele ja acabou.

   Herda a pintura dos outros arcos: azul chapado (--blue-deep) a 45%,
   sem degrade proprio. Chegou a ser um fio fino de 20 no ciano->azul
   do funil, e o problema era esse - com a cor viva e opaca ele lia
   como um objeto a mais na frente do desenho, competindo com os
   numeros, em vez de ficar no fundo com os outros dois arcos.
   Chapado e a 45% ele volta a ser fundo, e ai a espessura para de
   atrapalhar: pode crescer sem engolir nada.

   Stroke 80, uns 174px na tela - a mesma presenca dos arcos de fundo,
   que dao 172px. Como o viewBox e 700 de largura e o svg ocupa os
   100% da secao, a escala e 2,17: 80 x 2,17 = 174.

   Ficar mais fraco tambem ajuda o que a nota do .verif dizia: as duas
   ultimas faixas do funil (#1A8CE8 e #2B7FE2) estao calibradas contra
   o navy e encolhem sobre azul. A 45% do --blue-deep o fundo efetivo
   quase nao sobe, entao elas aguentam ele por tras.                  */
.sorriso.elo{left:0;top:16%;width:100%}
.sorriso.elo path{stroke-width:80}

/* nao flutua como os arcos de fundo: ele ENCOSTA no cartao, e uma
   ligacao que balanca deixa de ligar */
.anim .sorriso.elo{animation:none}

@media (max-width:939px){
  /* numa coluna o funil e o cartao se afastam e a curva perde os dois
     pontos que ligava. Sem ela ali.                                  */
  .sorriso.elo{display:none}
}

@media (max-width:939px){
  .sorriso.verif{right:-40%;top:44%;width:118%}
  .sorriso.lista{left:-40%;top:-6%;width:150%;}
  .sorriso.lista path{stroke-width:56}
}
/* sobe o conteudo para cima do arco, que fica no z-index 0 */
.hero > .wrap{position:relative;z-index:1}

/* ---------- o que uma secao precisa ter para hospedar um arco ----------
   ISTO E O QUE FALTAVA E O QUE QUEBRAVA. Um .sorriso e position:absolute,
   e .section sozinha tem so padding - sem position, sem overflow, e com
   a .wrap sem z-index. Solto numa secao comum o arco faz tres estragos
   ao mesmo tempo:

     1. sem "position" em quem o contem, ele se ancora no bloco inicial
        da pagina, nao na secao - vai parar longe e dimensionado contra
        a altura do documento inteiro;
     2. sem "overflow", ele sangra para fora e a PAGINA ganha rolagem
        horizontal, porque as posicoes dos arcos sao negativas de
        proposito (left:-16%, width acima de 100%);
     3. sem z-index na .wrap, ele e o unico posicionado da secao e pinta
        POR CIMA do texto.

   .centro ja resolve os tres por conta propria - por isso um arco cai
   certo em #precos e #relatorio e explode em #onde e #visita. Esta
   classe da a uma secao comum o mesmo chao.                          */
.tem-arco{position:relative;overflow:hidden}
.tem-arco > .wrap{position:relative;z-index:1}

/* ---------- os arcos das secoes claras ----------
   As claras nao tinham nenhum: o arco existia nas tres secoes navy e em
   nenhuma das cinco claras. Como o briefing proibe cyan como TEXTO sobre
   branco (2,3:1), a paleta clara desabava para navy, cinza-azulado e
   fios - e o resultado era navy com marca, branco com documento.

   Mas o briefing concede uma coisa que estava sem uso: cyan sobre branco
   vale "como preenchimento de forma grande". E exatamente isto. O arco
   nao e texto, e forma, e e a unica maneira permitida de a cor mais viva
   da marca aparecer no lado claro da pagina.

   Onde ele entra segue a tabela de tom do briefing, que divide a pagina
   em alegre e sobrio. Cyan e alegre, entao ele so vai onde a tabela ja
   diz alegre: a visita e o relatorio. Precos e "para onde vai o seu
   dinheiro" ficam de fora de proposito - ali o briefing pede menos
   curva, nao mais.

   A conta da opacidade, que e o que autoriza o texto a passar por cima:
   #04B6F6 a 25% sobre branco compoe #C0EDFD, de luminancia 0,789. Por
   cima disso o navy da 15,6:1 e o corpo em #3B4666 da 7,4:1 - os dois
   folgados acima do minimo de 4,5:1, e isso importa porque na visita a
   lede passa MESMO por dentro do arco. A forma continua cheia; o que
   baixou foi so o quanto ela cobre o fundo, como nos arcos do navy.   */
.sorriso.claro path{stroke:var(--cyan);stroke-opacity:.25}

/* Na visita ele entra pela direita, ao lado do titulo, e mergulha atras
   da foto de largura cheia - some ali e nao reaparece, como o elo faz
   atras do funil. A ponta esquerda mais baixa e a direita mais alta e
   mais longa e a assimetria do proprio logo, a mesma que a .virada usa. */
.sorriso.visita{left:auto;right:-12%;top:-6%;width:66%}
.sorriso.visita path{stroke-width:112}

/* No relatorio o balao e estreito (600px) e centrado, entao sobram os
   dois flancos. Este atravessa por tras dele e aparece so nas beiradas.
   Mais raso e mais fino que o da visita: sao duas secoes claras
   seguidas, e dois arcos iguais em sequencia leriam como gabarito - a
   mesma razao que ja separa os tres arcos do lado navy.               */
.sorriso.relato{left:-16%;top:8%;width:84%}
.sorriso.relato path{stroke-width:92}

/* ---------- os quatro arcos da seja-um-nino.html ----------
   A pagina tinha dois - capa e candidatura - e seis secoes no meio sem
   nenhum. Ganhou quatro, e as DUAS que ficaram sem sao escolha:

     #caminho   e selecao, antecedentes e treinamento
     #perguntas e custo, margem e limites

   Os dois assuntos caem na coluna "sobrio" da tabela de tom do
   briefing, que pede menos curva e nao mais - a mesma regra que ja
   deixa precos de fora no index. Assim a ausencia do arco vira
   informacao: onde a marca aparece, o assunto e alegre.

   A CONSTANTE DO SISTEMA NAO E O stroke-width, E A ESPESSURA NA TELA.
   O traco escala com a largura do elemento, entao os cinco arcos que ja
   existiam usam de 68 a 112 no viewBox e caem todos entre 162 e 181px
   numa janela de 1536px. Foi essa faixa que os quatro novos miraram, e
   nao o numero do CSS:

     .perfis   96% de largura, 80  ->  168px
     .horas    88%,             91  ->  176px
     .lados    90%,             80  ->  158px   o mais fino, de proposito
     .leva     72%,            115  ->  182px   o mais grosso, no navy

   (o elo do index fica fora da faixa por outro motivo: 44px. Ele e
   ligacao entre dois objetos, nao fundo.)

   A CONTA DE CONTRASTE MUDOU, porque dois destes nascem sobre --paper e
   nao sobre branco - caso que nao existia ate aqui. Cyan a 25% sobre
   #F5F7FC compoe #B9E7FB, de luminancia 0,742: o navy le a 14,7:1 e o
   corpo em --ink-soft a 7,0:1, contra 15,6:1 e 7,4:1 do branco. Cai um
   pouco, continua muito acima do minimo de 4,5:1 - e precisa continuar,
   porque em #dois-lados e #duas-horas o texto passa por dentro do arco.

   O SENTIDO DO PATH alterna. Quem risca e o ponto inicial, entao dois
   arcos seguidos nascendo do mesmo lado leriam como repeticao: a capa
   vem da esquerda, .perfis volta da direita, .horas da esquerda, .leva
   da direita, .lados da esquerda. A profundidade do mergulho tambem
   muda em cada um - 440, 405, 480 e 380 no ponto de controle.        */

/* Embala os tres perfis: o fundo do mergulho corre sob a fileira de
   cartoes, que e o unico lugar da secao onde ha tres coisas lado a
   lado precisando parecer uma so. */
/* Ancorado pela DIREITA, e nao pela esquerda, e a razao e o sentido do
   path. Quem risca e o ponto inicial, este comeca em x=655 - a borda
   direita do desenho -, e com left:-10% essa borda caia a 79,8% da
   secao: o arco nascia no ar, no meio do conteudo, em vez de entrar
   pela beirada. E o mesmo erro que o comentario do arco da #visita no
   index descreve, cometido do outro lado.

   Com right:-16% ele nasce a 110% e cresce para dentro. A ponta oposta
   para a 26% e fica no ar, o que esta certo e tem precedente: a do
   #visita para a 53%. O que nao pode ficar no ar e o NASCIMENTO.     */
.sorriso.claro.perfis{left:auto;right:-16%;top:30%;width:94%}
.sorriso.claro.perfis path{stroke-width:82}

/* Atravessa por tras da foto unica, que para em 860px e e opaca, e
   aparece so nos dois flancos - mesmo mecanismo do arco do relatorio
   no index. Fica na metade de cima: embaixo estao as duas listas de
   tique, e o tique ja e --blue sobre claro. */
.sorriso.claro.horas{left:-14%;top:24%;width:88%}
.sorriso.claro.horas path{stroke-width:91}

/* O mais raso e o mais fino dos quatro. A secao ja tem duas fotos e uma
   diagonal, e o arco entra para aparecer sobretudo NO VAO entre as duas
   colunas - atravessando de um argumento ao outro. */
/* -10% e nao -6%: a 6% o centro da ponta caia a -43px, mas o
   stroke-linecap:round tem raio de meio traco - 79px aqui - e a ponta
   reaparecia 36px DENTRO da tela. Nascimento tem de contar o raio da
   tampa, nao so o centro do path. */
.sorriso.claro.lados{left:-10%;top:34%;width:90%}
.sorriso.claro.lados path{stroke-width:80}

/* Navy, entao --blue-deep a 45% por heranca da .sorriso base: sem
   .claro, sem cyan. O mais fundo e o mais grosso, porque no navy nao ha
   foto nem lista fina disputando a leitura com ele. */
.sorriso.leva{left:auto;right:-18%;top:-6%;width:72%}
.sorriso.leva path{stroke-width:115}

@media (max-width:939px){
  /* Numa coluna nao existe "ao lado": a manchete ocupa a largura toda,
     entao aqui o arco passa POR TRAS dela mesmo - medido, h2 em 126-191
     e arco em 16-255. Isso e escolha, nao descuido, e so se sustenta
     porque a conta de contraste acima vale para o navy da manchete
     tanto quanto para o corpo: 15,6:1. Alargar de 66% para 104% e
     engrossar de 112 para 128 e o que impede o arco de virar um risco
     fino no alto quando a secao estreita.                             */
  .sorriso.visita{right:-30%;top:-3%;width:104%}
  .sorriso.visita path{stroke-width:128}
  .sorriso.relato{left:-34%;top:4%;width:132%}
  .sorriso.relato path{stroke-width:74}

  /* Numa coluna so, cada um alarga e o stroke acompanha para a espessura
     na tela nao virar risco fino - a armadilha de sempre: alargar sem
     mexer no traco muda as duas coisas ao mesmo tempo. Numa janela de
     500px estes quatro caem entre 78 e 95px, que e a faixa em que os
     arcos do index ja vivem no estreito (70 a 103px). */
  .sorriso.claro.perfis{left:auto;right:-30%;top:22%;width:126%}
  .sorriso.claro.perfis path{stroke-width:94}
  .sorriso.claro.horas{left:-30%;top:16%;width:122%}
  .sorriso.claro.horas path{stroke-width:101}
  .sorriso.claro.lados{left:-28%;top:26%;width:124%}
  .sorriso.claro.lados path{stroke-width:88}
  .sorriso.leva{right:-34%;top:-2%;width:118%}
  .sorriso.leva path{stroke-width:113}
}
.hero-grid{display:grid;gap:clamp(40px,5vw,64px)}
/* A esquerda leva um pouco mais que a metade porque os dois botoes da
   capa, lado a lado, precisam de 508px; com 1fr 1fr eles quebravam em
   duas linhas. A foto perde um tico de largura e ganha muito de altura. */
@media (min-width:940px){.hero-grid{grid-template-columns:1.08fr .92fr;align-items:start}}
.hero h1{font-size:clamp(34px,5.4vw,54px);max-width:15ch}
.hero .lede{margin-top:22px}
.hero-cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.hero-note{margin-top:18px;font-size:16px;color:var(--on-dark-soft);max-width:46ch}
/* O link "quanto fica com a Nino" desceu para ca em 10/09, quando o
   painel .reparte saiu da capa. Precisa de regra propria: o a{} global
   e --blue-deep, azul escuro pensado para papel, e sobre o navy da capa
   ele da 1,4:1 - o link existiria no HTML e nao na tela, que e o mesmo
   defeito da .promessa apanhado na passada de 10/09. O ciano da 8,4:1. */
.hero-note a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}

/* ---------- foto da capa ----------
   Ocupou o lugar do calendario. A gradacao e a mesma das outras tres
   (dessaturada, vies frio) para as quatro lerem como um conjunto:
   saturacao 0,200 contra 0,230 da foto do cafe. Original tratado em
   site\fotos\g-capa.jpg; se trocarem a foto, rodar o mesmo grade.ps1
   com -Sat 0.62 -Cool 1.0.                                            */
/* foto e preco moram na mesma coluna do grid da capa: soltos, o preco
   virava um terceiro item e caia na coluna da esquerda. */
.capa-lado{min-width:0}


/* O contorno tem tres camadas, e cada uma resolve um problema:

   1. O fio de 2px e um DEGRADE do ciano ao azul, nao uma cor chapada.
      Uma linha de cor unica muda de leitura conforme o que esta atras
      dela na foto: some sobre a parede clara e salta sobre o escuro.
      O degrade e a mesma descida de cor do funil, entao o contorno fala
      a lingua do resto da pagina. Feito com border transparente mais um
      fundo em border-box: o degrade so aparece na faixa da borda.
   2. O halo largo separa a moldura do navy sem endurecer a aresta.
   3. A sombra baixa e difusa da profundidade: sem ela a foto fica
      colada no fundo, e com moldura isso parece adesivo.

   Na sangria a borda da direita sai, porque daquele lado nao ha aresta. */
.capa-foto{
  margin:0;border-radius:16px;overflow:hidden;
  border:2px solid transparent;
  background:linear-gradient(150deg,rgba(4,182,246,.9),rgba(43,127,226,.5)) border-box;
  box-shadow:
    0 0 0 8px rgba(4,182,246,.06),
    0 24px 52px -26px rgba(0,0,0,.65);
}
.capa-foto img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover}
@media (min-width:940px){
  /* sem proporcao fixa: a largura vem da sangria e a altura acompanha a
     janela ate 520px. Em tela larga o corte fica mais panoramico, que e
     o formato nativo do arquivo, entao sobra mais foto e nao menos. */
  .capa-foto img{aspect-ratio:auto;height:clamp(340px,34vw,520px)}
}
/* A partir de 940px a foto sangra ate a borda direita da tela. E o unico
   jeito de ela crescer de verdade: apertar as colunas esbarra nos dois
   botoes da esquerda, que precisam de 508px lado a lado.

   A conta e a distancia entre o fim do container e a borda da janela:
   metade da largura util do container, menos metade da janela. O min()
   cobre as telas em que o container ainda nao bateu no teto de 1080px.

   Tem de vir DEPOIS de .capa-foto{margin:0}: media query nao aumenta
   especificidade, entao a regra base venceria se viesse por ultimo.

   A margem vai na FIGURA, nao na coluna: numa coluna de grid um "50%"
   de margem se resolve contra a propria coluna, e a conta sai errada.
   Assim tambem o bloco de preco fica onde estava, sem compensacao.

   A capa ganhou overflow hidden porque 100vw as vezes conta a barra de
   rolagem, e sem isso sobraria um fio de rolagem horizontal.           */
@media (min-width:940px){
  .capa-foto{
    margin-right:calc((min(var(--wrap),100vw) - 48px) / 2 - 50vw);
    border-radius:16px 0 0 16px;border-right:0;
  }
}

.price{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-dark)}
.price-value{font-family:var(--display);font-weight:800;font-size:clamp(32px,4.6vw,42px);color:var(--on-dark);font-variant-numeric:tabular-nums;line-height:1.1}
.price-value small{font-family:var(--display);font-size:17px;font-weight:600;color:var(--on-dark-soft);letter-spacing:0}
.price-break{margin-top:10px;font-size:16px;color:var(--on-dark-soft)}

/* ---------- fotografia ----------
   As fotos são decorativas: entram para dar respiro entre blocos de
   texto, não para explicar nada. Por isso alt="" nas duas faixas.
   Todas passaram pela mesma gradação (dessaturada, viés frio) para
   lerem como um conjunto e não como três fotos de banco avulsas.   */
/* A .band saiu. Era uma faixa de foto de 280px na costura entre a capa
   e o problema: decorativa (alt vazio), 118 KB em base64 e desfocada a
   ponto de ninguem saber dizer o que era - luz numa janela. Ocupava a
   primeira coisa que se ve depois da capa, e gastava esse lugar em mood
   de banco de imagem numa pagina que em todo o resto mostra fato.
   No lugar dela entrou a virada 1 de 4. */

/* A foto da secao da visita usava a borda cinza de qualquer caixa, e
   era a unica imagem grande da pagina sem tratamento nenhum - do lado
   da foto da capa, que tem moldura em degrade e halo, ela parecia um
   espaco reservado. Ganha a mesma moldura, em dose menor: o degrade
   cai de .9/.5 para .55/.30 e o halo de 8px para 6px, porque aqui o
   fundo e claro e o mesmo contraste da capa gritaria.                */
.figure{
  margin-top:38px;border-radius:16px;overflow:hidden;
  border:2px solid transparent;
  background:linear-gradient(150deg,rgba(4,182,246,.55),rgba(43,127,226,.30)) border-box;
  box-shadow:0 0 0 6px rgba(4,182,246,.05), 0 20px 44px -24px rgba(3,9,41,.35);
}
.figure img{display:block;width:100%;height:clamp(200px,30vw,340px);object-fit:cover}


/* ---------- dados com fonte ---------- */
.facts{display:grid;gap:36px;margin-top:44px}
@media (min-width:860px){.facts{grid-template-columns:repeat(3,1fr);gap:32px}}
.fact-n{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.8vw,38px);line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fact p{margin-top:12px;color:var(--ink-soft);font-size:17px}
.src{margin-top:14px;padding-left:14px;border-left:2px solid var(--line);font-size:15px;color:var(--muted)}

/* ---------- a virada: o sorriso do logo dividindo a pagina ----------
   Marca onde a primeira metade (o problema) acaba e a segunda (o que a
   Nino faz) comeca. E o sorriso do proprio logo, e nao uma onda
   qualquer: o que o diferencia de enfeite de site sao as PONTAS RETAS,
   cortadas em angulo, e a assimetria - a direita sobe mais alto e vai
   mais longe que a esquerda, igual no logo. Por isso ela e contida em
   vez de sangrar de borda a borda: sangrando, as pontas somem e sobra
   um divisor curvo generico.

   stroke-linecap:butt e o que da o corte reto. Com round ou square a
   forma vira comprimido e deixa de ser a marca.

   Quarta aparicao da forma na pagina, e de proposito com outro
   trabalho: os tres arcos sao cenario ATRAS de texto, em navy a 45%.
   Esta e a unica em fundo claro, a unica em cor cheia e a unica que
   DIVIDE em vez de decorar. Os dois papeis nao se confundem.

   Nao anima. Os arcos riscam porque sao cenario chegando; isto e
   estrutura, e estrutura nao faz numero de entrada.

   As tres sao IGUAIS, e isso contraria de proposito a nota dos arcos
   ("tres curvas iguais em fila leem como gabarito"). Aquilo vale para
   cenario, onde a repeticao denuncia o molde. Aqui e pontuacao: um
   divisor que muda de forma a cada uso deixa de ser um sistema e vira
   tres enfeites diferentes.

   COMO ELA SE ENCAIXA, e por que nao e absoluta dentro da secao:
   .centro tem overflow:hidden (por causa dos arcos e dos ornamentos
   que sangram), e #precos e #perguntas sao .centro. Morando dentro
   deles, a metade de cima da curva seria decepada na borda da secao.
   Entao ela e IRMA das duas secoes, com altura zero no fluxo: o SVG
   transborda da propria caixa e sobe metade da altura, ficando
   montado na costura sem empurrar nada.

   O z-index:2 nao e enfeite: .centro e position:relative, e como a
   secao de baixo vem DEPOIS no documento, sem isto o fundo dela seria
   pintado por cima da metade inferior da curva.                      */
.virada{
  /* a subida que monta a curva na costura. Uma fonte so, porque o valor
     tem de aparecer em todo estado de hover - ver a nota no .virada svg */
  --sobe:calc(-50% - 10px);
  position:relative;z-index:2;
  height:0;
  display:flex;justify-content:center;
  /* flex-start e obrigatorio: o padrao e stretch, que estica o filho
     ate a altura do container - e o container tem altura ZERO de
     proposito. Sem isto o SVG nasce com 430x0 e a curva some.        */
  align-items:flex-start;
  pointer-events:none;
}
/* clamp, e nao min(): o respiro das secoes e clamp(56px,9vw,104px), ou
   seja, encolhe com a janela. Presa so ao teto de 430px, a curva
   mantinha 77px de altura para cada lado enquanto o respiro caia para
   63 - e a metade de cima passava a encostar no texto das fontes.
   Assim ela desce junto: 430px na tela larga, 220 no celular, sempre
   com folga dentro do vao.                                            */
.virada svg{
  width:clamp(220px,40vw,430px);height:auto;display:block;
  /* Sobe metade da propria altura: e o que monta a curva em cima da
     linha onde um fundo acaba e o outro comeca.

     Os 10px a mais nao sao gosto. Centrando so pela metade da CAIXA, a
     costura caia entre as pontas e a barriga - as pontas ficavam acima
     dela e a barriga abaixo. Nas viradas 2 e 3 isso nao aparece, porque
     os dois lados sao claros; nas 1 e 4, com navy em cima, o fundo
     claro da secao de baixo aparecia POR CIMA da curva no meio do vao,
     como uma lasca clara de 8px entre o navy e o azul. Nao era vazamento
     - medido, heroBottom e softTop dao o mesmo 300,2, sem folga - era a
     geometria de um sorriso montado numa linha reta.

     8px fecham exatamente; os 10 deixam 2px de sobreposicao, que e a
     margem contra o arredondamento subpixel (a costura cai em 300,2 e o
     devicePixelRatio nem sempre e 1). Vale para as quatro, porque as
     quatro tem de continuar identicas.

     O valor mora em --sobe, e nao escrito aqui, porque ele precisa ser
     REPETIDO em cada estado de hover: CSS nao soma a um transform
     existente, entao quem escreve so o scale apaga a subida. Com os
     numeros soltos em tres lugares, mudar um e esquecer os outros faz a
     curva pular ao receber o mouse - foi exatamente o que aconteceu
     quando os 10px entraram.                                          */
  transform:translateY(var(--sobe));
}
/* pointer-events volta a valer SO no traco, e nao no container: a
   .virada e uma faixa absoluta de largura inteira, e liberada por
   completo ela viraria uma area invisivel de 150px atravessada na
   pagina, capturando o mouse onde nao ha nada. Com fill:none, o padrao
   do SVG ja deixa so a parte pintada sensivel - o vao de dentro da
   curva nao responde, que e o certo.                                 */
.virada path{
  fill:none;stroke:var(--blue-deep);stroke-width:48;stroke-linecap:butt;
  pointer-events:auto;
}

/* ---------- onde a Nino entra ----------
   A secao que faltava entre o problema e a visita. Ate aqui a pagina
   dizia que a solidao mata e ja passava a descrever duas horas de
   companhia: faltava a frase do meio, que e o vao entre continuar em
   casa e ir para uma instituicao.                                     */
/* ---------- o vao: a figura e a barra ----------
   Duas colunas no desktop. O numero chega antes da barra na leitura
   da esquerda para a direita, e e ele que da a escala com que a
   lasca da barra passa a fazer sentido. Empilhados, o numero fica
   por cima pela mesma razao.                                        */
/* Numero e legenda lado a lado, alinhados pela BASE. O 0,5% tem 72px
   de corpo e a legenda 17: alinhados pelo topo, a legenda flutuaria no
   meio do numero; pela base, os dois pousam na mesma linha e leem como
   uma unica figura, do jeito que numero e didascalia se comportam em
   pagina impressa. */
.vao{margin-top:44px;display:grid;gap:10px 28px}
@media (min-width:720px){
  .vao{grid-template-columns:auto 1fr;align-items:end;column-gap:28px}
}

.vao-n{
  font-family:var(--display);font-weight:800;
  font-size:clamp(44px,7vw,72px);line-height:.95;letter-spacing:-.03em;
  color:var(--blue-deep);font-variant-numeric:tabular-nums;
}
.vao-leg{color:var(--ink-soft);font-size:17px;max-width:46ch}
.vao-leg b{font-family:var(--display);font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}

.vao-txt{color:var(--ink-soft);max-width:62ch}
.meter-rot + .vao-txt{margin-top:24px}

/* A barra e um MEDIDOR, nao um grafico de duas fatias: o que se le e
   "quanto de um todo", e a parte que sobra e um passo claro do mesmo
   azul. O bloco grande fica lavado e a marca pequena fica saturada;
   ao contrario a barra gritaria, e barra que grita numa secao sobre
   idoso sozinho e o tom errado.

   Os 0,5% dao uns 5px numa barra de mil. Por isso ela e ALTA (42px) em
   vez de fina: e o que torna a lasca visivel sem mexer na proporcao.
   Nenhuma largura minima foi aplicada. O que esta ali e meio por cento
   de verdade, e mal enxergar a lasca e exatamente o argumento.        */
.meter{position:relative;height:42px;margin-top:34px}
.meter i{position:absolute;top:0;bottom:0;border-radius:3px}
.meter .parte-ilpi{left:0;width:.5%;background:var(--blue-deep)}
/* o vao de 2px entre as duas partes e feito afastando a segunda, nao
   com borda na primeira: borda em volta de marca engorda o desenho e
   falsearia justamente a proporcao que a barra existe para mostrar.   */
.meter .parte-casa{left:calc(.5% + 2px);right:0;background:#DCE8FD}

/* O unico movimento desta secao, e ele e o argumento acontecendo: a
   barra entra vazia e preenche, entao quem le VE os 99,5% tomarem a
   linha inteira enquanto a lasca escura fica do tamanho que sempre
   foi. Um grafico que ja chega pronto nao mostra isso - afirma.

   Escopado em .anim, que so entra quando o sistema NAO pede menos
   movimento. Sem ela a barra nasce pronta, sem regra extra.

   scaleX e nao width porque as duas partes sao posicionadas por
   left/right: animar width brigaria com o right:0 da parte grande. */
.anim [data-reveal] .meter i{transform:scaleX(0);transform-origin:left}
.anim [data-reveal].vis .meter i{
  transform:scaleX(1);
  transition:transform .85s cubic-bezier(.2,.7,.3,1);
}
/* a lasca sai primeiro: ela e a referencia contra a qual o resto cresce */
.anim [data-reveal].vis .meter .parte-casa{transition-delay:.12s}

/* Nao mais escopado em .vao: a barra e os rotulos sairam de dentro
   dele para poderem ocupar a largura inteira. */
.meter-rot{
  display:flex;justify-content:space-between;gap:16px;
  margin-top:10px;font-size:15px;color:var(--muted);
}
.meter-rot b{font-family:var(--display);font-weight:700;color:var(--ink-soft)}

/* ---------- o que existe hoje: a regua ----------
   Isto eram tres cartoes iguais lado a lado, e o desenho contradizia
   o texto. Tres caixas de mesma largura em fila afirmam "tres opcoes
   equivalentes, escolha uma"; a frase que abre a secao afirma outra
   coisa - que existe um VAO entre dois extremos e que quase todo
   mundo vive dentro dele. O layout estava neutralizando o argumento.

   Agora e uma regua: um eixo unico que vai de "se vira sozinha" a
   "nao se vira mais", e cada servico ocupa o trecho dele. Nao ha o
   que escolher entre eles, porque eles nem estao no mesmo ponto da
   vida de alguem.

   A largura de cada trecho e o argumento:
   - o da Nino e o maior porque o vao "dura anos", como diz o lede, e
     porque os 99,5% que a barra logo acima acabou de mostrar estao
     nele;
   - o da instituicao e o menor pelo mesmo motivo - sao os 0,5%.
   Ou seja, a regua e a mesma conta do .meter continuada em outra
   forma, e nao um segundo desenho com vocabulario proprio.

   O tom desce junto com a distancia ate a Nino: azul cheio, azul
   lavado, quase papel. Cuidador e instituicao nao sao concorrentes
   derrotados - resolvem outra coisa - e recuar de tom diz isso sem
   precisar dizer que sao piores.                                     */
.regua{margin-top:44px}

/* As pontas do eixo. Ficam ACIMA da faixa porque sao a legenda dela:
   lidas antes, a faixa ja chega com significado; lidas depois, ela
   passa alguns segundos sendo so tres barras coloridas.              */
.regua-eixo{
  display:flex;justify-content:space-between;gap:16px;
  font-size:15px;color:var(--muted);margin-bottom:10px;
}

/* Uma grade so, duas fileiras: em cima os tres trechos da faixa, em
   baixo os tres textos. Mesma grade e o que garante que o texto fique
   sob o proprio trecho - dois grids separados com gaps diferentes
   dariam larguras diferentes e o alinhamento se perderia.            */
.regua-grid{display:grid;gap:26px}
@media (min-width:860px){
  /* 1,4 / 1 / 0,8, e nao 1,5 / 1 / 0,7 como saiu da primeira tentativa:
     ali a coluna da instituicao ficava com 215px, uns 25 caracteres por
     linha, e o texto dela quebrava em seis linhas enquanto o titulo
     quebrava em duas. A proporcao continua dizendo a mesma coisa - o
     trecho da Nino e quase o dobro do da instituicao -, so parou de
     dizer as custas da legibilidade de uma das tres.                  */
  .regua-grid{grid-template-columns:1.4fr 1fr .8fr;column-gap:24px;row-gap:18px}
  /* os -12px de cada lado comem exatamente a metade do column-gap de
     24, entao os tres trechos se encostam e a faixa fica CONTINUA,
     enquanto o texto embaixo continua com o respiro do grid. E o que
     faz ler como um eixo unico em vez de tres barras separadas.      */
  .regua-faixa{display:block;height:10px;margin:0 -12px;background:var(--t)}
  .regua-faixa.z-nino{margin-left:0;border-radius:3px 0 0 3px}
  .regua-faixa.z-ilpi{margin-right:0;border-radius:0 3px 3px 0}
}

.z-nino{--t:var(--blue-deep)}
.z-cuidador{--t:#9DB8EE}
.z-ilpi{--t:#DCE8FD}   /* o mesmo azul lavado da parte grande do .meter */

.zona h3{font-size:19px}
/* Dos tres titulos, so "A instituicao resolve moradia" quebra em duas
   linhas, e isso deixava os tres paragrafos comecando em alturas
   diferentes. Reservar duas linhas para todos alinha os paragrafos sem
   mexer na largura das colunas - e a largura aqui e argumento, nao
   diagramacao: o trecho da Nino e o maior porque o vao e onde quase
   todo mundo esta.

   So vale na fileira horizontal. Empilhado no celular nao ha o que
   alinhar, e a reserva viraria um buraco sob os dois titulos curtos. */
@media (min-width:860px){
  .zona h3{min-height:2.3em}
}
.zona p{margin-top:9px;color:var(--ink-soft);font-size:17px}
/* O nome do servico entrou no proprio titulo - "O cuidador resolve
   dependencia" - e com isso o rotulo em caixa alta que ficava por
   cima de cada cartao deixou de ter o que dizer. Era so o nome
   repetido dois centimetros acima da frase que ja o contem.          */
.zona.z-nino h3{color:var(--blue-deep)}

/* Abaixo de 860 a faixa horizontal nao tem como existir: numa coluna
   so, tres trechos empilhados nao formam eixo nenhum. O tom de cada
   um continua, virando um fio a esquerda do proprio texto - a
   informacao de "quanto isto e a Nino" sobrevive, o eixo nao.        */
@media (max-width:859px){
  .regua-faixa{display:none}
  .zona{border-left:4px solid var(--t);padding-left:16px}
}

/* A mesma linguagem de "repare nisto" do aviso do rodape e da
   observacao do relatorio: fio azul a esquerda. A frase ARMA o que a
   secao da verificacao cumpre, e por isso nao repete a linha que ja
   fecha aquela secao - se as duas dissessem a mesma coisa, a segunda
   viraria eco.                                                        */
.promessa{
  margin-top:40px;max-width:62ch;padding:18px 22px;
  background:linear-gradient(90deg,rgba(1,47,221,.06),rgba(1,47,221,.035));
  border-left:3px solid var(--blue-deep);border-radius:0 10px 10px 0;
  font-family:var(--display);font-weight:600;
  font-size:clamp(19px,2.1vw,21px);line-height:1.5;color:var(--navy);
}

/* ---------- duas colunas: faz / não faz ---------- */
/* As duas colunas diziam a mesma coisa em desenho: duas listas iguais,
   e so o texto do titulo separava "faz" de "nao faz". Pior, a coluna
   com caixa era a das NEGATIVAS - ganhava peso justamente a lista que
   deveria pesar menos.

   Agora a diferenca esta na forma. A dos "faz" fica aberta sobre o
   branco, com um tique azul: e a oferta, e ela respira. A dos "nao
   faz" fica num painel recuado cor de papel, com um traco cinza no
   lugar do tique e o titulo em tom mais baixo: continua legivel e
   honesta - a secao existe para dizer isso - mas para de disputar a
   atencao com o que a Nino de fato entrega.                          */
.split{display:grid;gap:40px;margin-top:44px}
@media (min-width:860px){.split{grid-template-columns:1fr 1fr;gap:48px;align-items:start}}

.does li,.doesnt li{position:relative;padding:13px 0 13px 30px;border-bottom:1px solid var(--line);font-size:18px}
.does li:first-child,.doesnt li:first-child{border-top:1px solid var(--line)}
.does li:last-child,.doesnt li:last-child{border-bottom:0}

/* o tique e desenhado com duas bordas de um retangulo vazio, girado:
   sem fonte de icone e sem SVG para seis itens.                      */
.does li::before{
  content:"";position:absolute;left:3px;top:20px;width:11px;height:6px;
  border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);
  transform:rotate(-45deg);
}
.doesnt li::before{
  content:"";position:absolute;left:2px;top:23px;width:13px;height:0;
  border-top:2.5px solid #97A3C0;
}

.doesnt{background:var(--paper);padding:clamp(22px,3vw,28px);border-radius:14px;border:1px solid var(--line)}
.doesnt h3{margin-bottom:8px;color:var(--ink-soft)}
.doesnt li{color:var(--ink-soft);border-color:#E4EAF6}
.doesnt li:first-child{border-top-color:#E4EAF6}

/* ---------- funil ---------- */
/* Um funil solido de verdade, em SVG. Cinco faixas que estreitam ate o
   bico, cortadas por vaos finos para as etapas se lerem separadas.

   O SVG usa preserveAspectRatio="none" de proposito: ele estica na
   vertical para casar exatamente com a altura da coluna de textos ao
   lado, e como as faixas sao poligonos de lados retos, esticar nao
   deforma nada. E o que mantem numero e faixa alinhados sem gambiarra.

   As cores dos numeros acompanham a descida do degrade, e todas ficam
   acima de 4,8:1 sobre o navy: o mais fundo que da para descer sem
   perder legibilidade e #2B7FE2.                                      */
.funil{
  display:grid;
  grid-template-columns:minmax(110px,.8fr) minmax(0,1.2fr);
  gap:clamp(14px,3vw,30px);align-items:stretch;
  max-width:620px;margin:46px auto 0;text-align:left;
}
/* overflow visible porque o SVG corta no proprio quadro por padrao, e a
   faixa de cima ocupa a largura inteira: sem isto ela cresceria no hover
   e as laterais seriam aparadas. Sao 3 ou 4 pixels de cada lado, dentro
   do vao que ja existe ate a coluna de textos.                        */
.funil svg{display:block;width:100%;height:100%;overflow:visible}
.funil-etapas{display:grid;grid-template-rows:repeat(4,1fr)}
.funil-etapas p{
  display:flex;align-items:center;gap:11px;
  color:var(--on-dark-soft);font-size:16px;line-height:1.3;
}
.funil-etapas b{
  font-family:var(--display);font-weight:800;
  font-size:clamp(22px,2.7vw,28px);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;min-width:2.4ch;text-align:right;
}
.funil-etapas p:nth-child(1) b{color:#04B6F6}
.funil-etapas p:nth-child(2) b{color:#11AAEF}
.funil-etapas p:nth-child(3) b{color:#1E9DE9}
.funil-etapas p:nth-child(4) b{color:#2B7FE2}

@media (max-width:440px){
  .funil{grid-template-columns:84px minmax(0,1fr);gap:14px}
  .funil-etapas p{font-size:15px;gap:11px}
  .funil-etapas b{font-size:21px}
}
/* ---------- cartões de fato ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:clamp(22px,3vw,28px)}
.dark .card{background:#080F35;border-color:var(--line-dark)}
.checks li{padding:12px 0;border-bottom:1px solid var(--line-dark);font-size:17px;color:var(--on-dark)}
.checks li:last-child{border-bottom:0}
.checks .when{display:block;color:var(--on-dark-soft);font-size:15px;margin-top:3px;font-variant-numeric:tabular-nums}

/* As materias de cada treinamento. Herdam a cor e o corpo do .when -
   sao a mesma camada de informacao, so que enumeravel - e ganham o
   ponto de lista que o .checks tira de todo mundo: aqui a lista E o
   argumento, entao ela precisa parecer uma.                          */
.checks .materias{margin-top:5px;padding-left:18px;list-style:disc}
.checks .materias li{
  padding:1px 0;border-bottom:0;
  color:var(--on-dark-soft);font-size:15px;
}
.checks .materias li::marker{color:#5B6A94}

/* ---------- relatório: a mensagem que chega ----------
   A secao inteira vende UM artefato - o relato que a familia recebe -
   e antes o artefato era a unica coisa sem corpo: cabecalho, texto e
   linha final soltos no papel, com a foto e a observacao (que sao
   PARTES dele) desenhadas como caixas brancas. As partes liam mais
   solidas que o todo. Aqui o todo virou o objeto e elas voltaram para
   dentro.

   A forma e de mensagem, e nao de folha de documento, porque e isso
   que o titulo promete: "depois, VOCE FICA SABENDO". Documento se
   arquiva; mensagem chega. Por isso o remetente fica FORA do balao,
   como etiqueta, e nao numa faixa de cabecalho dentro dele.          */
.report{margin-top:40px;max-width:600px}

.report-de{display:flex;align-items:center;gap:14px;margin-bottom:14px}
/* O halo de 4px repete o gesto da moldura da capa em dose pequena. E o
   unico lugar da pagina, fora do logo e dos botoes, onde o degrade da
   marca aparece em area cheia - por isso ele e pequeno.              */
.report-avatar{
  flex:none;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--cyan),var(--blue));
  color:var(--white);font-family:var(--display);font-weight:800;font-size:16px;
  box-shadow:0 0 0 4px rgba(4,182,246,.12);
}
.report-quem strong{display:block;font-family:var(--display);font-size:19px;color:var(--navy)}
.report-quem > span{display:block;margin-top:2px;font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}

/* O canto superior esquerdo fecha em 6px e os outros tres em 16px: e o
   que faz o balao apontar para o avatar, sem precisar desenhar bico.  */
.report-msg{
  background:var(--white);border:1px solid var(--line);
  border-radius:6px 16px 16px 16px;
  padding:clamp(20px,3vw,26px);
  box-shadow:var(--lift-2);
}
.report-msg > p{color:var(--ink-soft)}

/* 16 por 10 nao e enquadramento, e limite: a foto original e alta e em
   largura cheia ela empurrava a observacao para fora da tela, virando
   o assunto da secao no lugar do texto.                              */
.report-photo{margin:20px 0 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper)}
.report-photo img{display:block;width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover}
.report-photo figcaption{padding:10px 14px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}

/* A observacao agora mora DENTRO do balao branco, entao ela nao pode
   mais ser branca com borda: precisa de fundo proprio para se separar.
   O fio azul a esquerda e o mesmo do aviso do rodape - a pagina passou
   a ter uma so linguagem de "repare nisto".                          */
.report .obs{
  margin-top:22px;padding:15px 18px;
  /* o degrade cai pouco (.06 -> .035) de proposito: caindo ate quase
     zero, como estava, a direita da nota sumia no branco do balao e o
     canto arredondado daquele lado deixava de existir.               */
  background:linear-gradient(90deg,rgba(1,47,221,.06),rgba(1,47,221,.035));
  border-left:3px solid var(--blue-deep);border-radius:0 10px 10px 0;
  color:var(--navy);font-size:17px;
}
/* Em caixa alta e espacejado, este rotulo era o unico lugar da pagina
   que gritava - e gritava justamente sobre a parte mais delicada do
   relato, que e o Nino avisando a familia de um sinal. O fio azul a
   esquerda ja diz "repare nisto"; ao rotulo cabe so dizer para QUEM a
   observacao e, e isso ele diz melhor em caixa normal e no corpo do
   resto do texto.                                                    */
.report .obs b{display:block;font-family:var(--display);font-size:17px;color:var(--blue-deep);margin-bottom:4px;font-weight:700}

/* Fora do balao, como o "entregue" de um aplicativo de mensagem: e um
   estado da conversa, nao parte do que o Nino escreveu.              */
.report-status{display:flex;gap:9px;align-items:baseline;margin-top:16px;font-size:16px;color:var(--muted)}
.report-status span{color:var(--blue);font-size:15px}

/* ---------- preços ----------
   Eram tres linhas iguais - avulsa, hora adicional, plano - com o mesmo
   corpo de 22px no numero. Sem hierarquia, o olho nao pousava em lugar
   nenhum, e a linha que a pagina inteira arma (a MESMA pessoa toda
   semana, que so o plano entrega) chegava com o mesmo peso do acrescimo
   de hora extra. Pior: a hora adicional nao e um produto. E o que
   acontece se a visita se estender, e listada entre os dois virava uma
   terceira opcao a escolher.

   Agora sao tres degraus: o plano em painel, a avulsa em linha, a hora
   adicional em nota. E o realce vem de TIPOGRAFIA, nao de cor - o
   briefing poe precos na coluna sobria, onde ele pede "mais branco e
   navy, menos curva, tipografia firme". Nenhum cyan entra aqui, e e por
   isso que os arcos claros tambem nao vieram para esta secao.         */
.prices{margin-top:40px;max-width:640px}

/* O painel e cor de papel com fio azulado, nao branco com fio cinza: a
   secao ja e branca, e um painel branco sobre branco precisaria de
   sombra para existir - sombra e o vocabulario do lado alegre da
   pagina, nao deste.                                                  */
.plano{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:22px 24px;
  background:var(--paper);
  border:1px solid #C6D8F7;border-radius:12px;
}
.plano h3{font-size:21px}
.plano-o-que p{margin-top:4px;color:var(--ink-soft);font-size:16px;max-width:34ch}
.plano-quanto{text-align:right;white-space:nowrap}
/* 34 contra os 22 da linha de baixo. E a distancia que faz o plano ser
   lido primeiro sem precisar de etiqueta dizendo que ele e o recomendado
   - o tamanho ja diz.                                                 */
.plano-quanto b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:34px;letter-spacing:-.02em;color:var(--navy);
}
/* 379,90 divididos por 4. O numero por visita existe para a comparacao
   com os 99,90 da linha seguinte acontecer sozinha, sem a pagina ter de
   afirmar que sai mais barato - fato em vez de adjetivo, como o
   briefing pede.                                                      */
.plano-quanto span{display:block;margin-top:2px;font-size:15px;color:var(--muted)}

.prow{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
/* o fio de cima voltou para ca: com o painel ocupando o primeiro lugar,
   o :first-child de antes deixou de casar com linha nenhuma            */
.plano + .prow{margin-top:22px;border-top:1px solid var(--line)}
.prow em{font-style:normal;font-size:16px;color:var(--muted);display:block;margin-top:2px}
.prow b{font-family:var(--display);font-size:22px;white-space:nowrap;font-variant-numeric:tabular-nums}

.pmod{margin-top:14px;font-size:16px;color:var(--muted)}

.pnote{margin-top:30px;max-width:62ch;color:var(--ink-soft)}
.pnote + .pnote{margin-top:16px}

/* Abaixo de 520 o preco nao cabe ao lado da descricao sem espremer as
   duas: ele desce e passa a alinhar pela esquerda, como todo o resto.  */
@media (max-width:520px){
  .plano{flex-direction:column;align-items:flex-start;gap:14px}
  .plano-quanto{text-align:left}
}

/* ---------- preços com foto ----------
   A foto fica a ESQUERDA de proposito: na capa ela esta a direita, e
   alternar o lado evita que as duas secoes com imagem se leiam iguais.

   A figura estica ate a altura da coluna de precos (align-items:stretch
   no grid + object-fit:cover na imagem), entao as duas colunas fecham
   na mesma linha de base por mais que os textos mudem de tamanho.

   Gradacao: esta foto ja vinha menos quente que a da capa, entao a
   receita padrao a jogaria fria demais. Foi tratada com
   -Sat 0.95 -Cool 0.60 -Contrast 1.07, que a deixa em saturacao 0,171 e
   vies +3,4, dentro do conjunto. Original em site\fotos\g-precos.jpg.  */
.preco-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(20px,4vw,44px);align-items:center;
  max-width:940px;margin:40px auto 0;text-align:left;
}
.preco-foto{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
/* 4 por 3 e um recorte suave sobre os 8 por 5 do original: tira uns 8%
   de cada lado e mantem as duas pessoas inteiras. Esticar a foto ate a
   altura da coluna de precos cortava metade do rosto da moca.         */
.preco-foto img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover}

.centro .preco-grid .prices{margin:0;max-width:none}

@media (max-width:820px){
  .preco-grid{grid-template-columns:1fr;max-width:620px;gap:26px}
  .preco-foto img{aspect-ratio:8 / 5}
}
/* ---------- formulário ---------- */
.form{margin-top:40px;max-width:620px}
.field{margin-bottom:22px}
.field label{display:block;font-family:var(--display);font-size:16px;font-weight:700;color:var(--on-dark);margin-bottom:8px}
.field .hint{display:block;font-weight:400;color:var(--on-dark-soft);font-size:15px;margin-top:3px}
input[type=text],input[type=email],select,textarea{
  width:100%;min-height:50px;padding:13px 15px;
  font-family:var(--body);font-size:17px;color:var(--navy);
  background:var(--white);border:1px solid #2C3763;border-radius:10px;
}
textarea{min-height:96px;resize:vertical;line-height:1.55}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);background-position:calc(100% - 21px) 22px,calc(100% - 15px) 22px;background-size:6px 6px;background-repeat:no-repeat}
.form-msg{margin-top:18px;padding:14px 16px;border-radius:10px;font-size:17px;display:none}
.form-msg.ok{display:block;background:#0B2A16;border:1px solid #1F6B3C;color:#8FE3AE}
.form-msg.warn{display:block;background:#2A1B05;border:1px solid #7A5314;color:#F2C879}
.form-msg.info{display:block;background:#0E1B33;border:1px solid #2B4272;color:#A8C0E8}
.legal{margin-top:20px;font-size:15px;color:var(--on-dark-soft);max-width:56ch}

/* ---------- faq ---------- */
.faq{margin-top:36px;max-width:760px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:29px;width:11px;height:11px;border-right:2px solid var(--blue-deep);border-bottom:2px solid var(--blue-deep);transform:rotate(45deg)}
.faq details[open] summary::after{transform:rotate(-135deg);top:33px}
.faq .answer{padding:0 0 22px;color:var(--ink-soft);max-width:64ch}
.faq .answer p + p{margin-top:12px}

/* ---------- composicao centrada ----------
   Da verificacao em diante todo bloco e estreito: o cartao tem 640px, o
   relatorio 660, o formulario 620, o FAQ 760, dentro de um container de
   1080. Alinhados a esquerda isso deixava uma faixa morta na direita em
   cinco secoes seguidas. Centrados, a pagina fecha simetrica.

   Titulo, lede e a posicao do bloco vao para o centro. O texto corrido
   DENTRO do bloco continua a esquerda, que e como se le paragrafo.     */
.centro{position:relative;overflow:hidden}
.centro > .wrap{text-align:center;position:relative;z-index:1}
.centro .lede{margin-left:auto;margin-right:auto}
.centro .card,
.centro .report,
.centro .prices,
.centro .pnote,
.centro .form,
.centro .legal,
.centro .faq{margin-left:auto;margin-right:auto;text-align:left}

/* ---------- rodapé ---------- */
.foot{background:var(--paper);border-top:1px solid var(--line);padding:48px 0 56px}
/* Quando o rodape e quem vem logo abaixo de uma virada, os 48px nao
   bastam: a curva desce METADE da propria altura abaixo da costura, e
   essa altura e a largura vezes 150/420 - ou seja, ate 77px numa tela
   larga. A caixa de aviso encostava no traco.

   Antes isso nao aparecia porque quem morava embaixo da terceira virada
   era a secao de perguntas, com o respiro de --gap. Ela mudou de pagina;
   o vao dela precisa ficar.

   A conta e a mesma do .virada svg, para as duas encolherem juntas: no
   celular a curva tem 220px e pede 39, na tela larga tem 430 e pede 77.
   O resto e o respiro de verdade entre a curva e o texto.             */
.foot.sob-virada{padding-top:calc(clamp(220px,40vw,430px) * 0.179 + 46px)}
.foot p{font-size:16px;color:var(--ink-soft);max-width:70ch}
.foot p + p{margin-top:14px}
/* O aviso e a coisa mais importante do rodape - diz que o servico nao
   existe ainda - e estava desenhado como caixa neutra, igual a
   qualquer outra. Passa a usar a MESMA linguagem da observacao do
   relatorio: fio azul a esquerda e canto reto daquele lado. Duas
   coisas que pedem atencao na pagina, um jeito so de pedir.          */
.foot .disclaimer{
  padding:18px 20px;background:var(--white);
  border:1px solid var(--line);border-left:3px solid var(--blue-deep);
  border-radius:0 12px 12px 0;color:var(--navy);
  box-shadow:var(--lift-1);
}
.foot small{display:block;margin-top:26px;color:var(--muted);font-size:15px}

/* ---------- movimento ----------
   Nada aqui vale sem a classe .anim no <html>, que so entra se o
   navegador tiver IntersectionObserver E a pessoa nao tiver pedido
   menos movimento nas preferencias do sistema. Sem ela a pagina fica
   como sempre foi, com tudo visivel: nenhum conteudo depende de
   animacao para aparecer.
   O script que poe a classe vem logo depois deste bloco.            */

/* A entrada de secao saiu daqui.
   Era uma subida de 14px escalonada de 0,07s em 0,07s, aplicada a
   TODO filho de TODA secao com [data-reveal]. O problema nao era ela
   isolada, era a frequencia: acontecendo em oito secoes seguidas,
   deixou de ser um evento e virou o jeito de a pagina existir - e ai
   as duas animacoes que dizem alguma coisa (o funil enchendo e o arco
   sendo riscado) passaram a chegar no meio de um fundo que ja estava
   se mexendo, em vez de acontecerem contra uma pagina parada.

   O [data-reveal] continua nas secoes: quem usa agora sao o funil e
   os arcos, logo abaixo. O que sumiu foi so o movimento de todo o
   resto.                                                             */

/* capa: a unica secao que nao espera o observador, porque ela ja esta
   na tela quando a pagina abre - a entrada roda no carregamento.
   Ate aqui a capa era a unica parte da pagina que nao se mexia: tudo
   abaixo dela subia ao chegar na tela, e ela simplesmente estava la.

   O fill "backwards" cobre o atraso com o primeiro quadro e devolve o
   elemento ao estado normal no fim - o ultimo quadro e igual a ele,
   entao nao ha salto.                                               */
.anim .hero h1,
.anim .hero .lede,
.anim .hero-cta,
.anim .hero-note,
.anim .capa-foto,
.anim .price{
  animation:capa-entra .6s cubic-bezier(.2,.7,.3,1) var(--ce,0s) backwards;
}
@keyframes capa-entra{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
.anim .hero h1{--ce:.05s}
.anim .hero .lede{--ce:.14s}
.anim .hero-cta{--ce:.24s}
.anim .hero-note{--ce:.32s}
/* a foto chega depois do texto de proposito: ela entra no segundo em
   que o fio encosta nela, e e isso que faz um parecer virar o outro */
.anim .capa-foto{--ce:.55s}
.anim .price{--ce:.70s}

/* o arco se desenha, da esquerda para a direita, como quem risca. E a
   entrada mais lenta da capa de proposito: ele e fundo, entao chega
   depois do texto em vez de disputar com ele.

   O arco em si NAO depende de .anim - ele e elemento de desenho, e
   quem pediu menos movimento continua vendo a forma. O que some e o
   risco e a flutuacao.                                              */
/* o da capa risca no carregamento, porque a capa ja esta na tela */
.anim .hero .sorriso path{
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:sorriso-risca 1.7s cubic-bezier(.3,.7,.25,1) .1s forwards;
}
/* Os das outras duas esperam chegar na tela. E quem espera e o ARCO,
   nao a secao: o da verificacao mora na metade de baixo de uma secao
   de mais de mil pixels, e preso a revelacao da secao ele terminava
   de riscar bem antes de alguem rolar ate ali - a animacao acontecia
   fora do campo de visao. Cada arco tem o proprio gatilho, e a classe
   .risca vem do script no fim do arquivo.

   Antes disso o dashoffset 1 os deixa invisiveis - nao ha arco
   aparecendo do nada.                                               */
.anim [data-reveal] .sorriso path{stroke-dasharray:1;stroke-dashoffset:1}
.anim [data-reveal] .sorriso.risca path{
  animation:sorriso-risca 1.7s cubic-bezier(.3,.7,.25,1) .15s forwards;
}
@keyframes sorriso-risca{ to{stroke-dashoffset:0} }

/* depois de desenhado ele nunca fica completamente parado: uma
   flutuacao muito lenta, de ida e volta, que em 22s percorre 18px.
   E movimento que se percebe sem se notar - se der para acompanhar
   com o olho, esta rapido demais para um fundo.                     */
.anim .sorriso{
  animation:sorriso-flutua 22s ease-in-out 1.9s infinite alternate;
}
@keyframes sorriso-flutua{
  from{transform:translate3d(0,0,0) rotate(0deg)}
  to  {transform:translate3d(18px,-12px,0) rotate(1.4deg)}
}

/* funil: o corte sobe de baixo para cima e o funil se preenche, como
   liquido entrando. Os textos das etapas chegam logo atras, um por um.
   E a unica animacao da pagina que explica alguma coisa: o 100
   afunilando ate o 15 vira gesto em vez de afirmacao.                */
.anim [data-reveal] .funil svg{clip-path:inset(0 0 100% 0)}
/* O estado final e clip-path:none, e nao inset(0 0 0 0): a faixa que
   cresce sob o cursor precisa poder passar da moldura do SVG, e um
   inset(0) continuaria cortando os poucos pixels que ela ganha.
   Por isso virou animacao com fill-mode "backwards", que cobre o
   atraso de 0,25s com o primeiro quadro e, no fim, devolve o elemento
   a regra - o ultimo quadro e visualmente igual a none, sem salto. */
.anim [data-reveal].vis .funil svg{
  clip-path:none;
  animation:funil-enche 1.05s cubic-bezier(.3,.7,.25,1) .25s backwards;
}
@keyframes funil-enche{
  from{clip-path:inset(0 0 100% 0)}
  to{clip-path:inset(0 0 0 0)}
}
.anim [data-reveal] .funil-etapas p{opacity:0}
.anim [data-reveal].vis .funil-etapas p{
  opacity:1;transition:opacity .45s ease var(--fd,0s);
}
.anim .funil-etapas p:nth-child(1){--fd:.40s}
.anim .funil-etapas p:nth-child(2){--fd:.55s}
.anim .funil-etapas p:nth-child(3){--fd:.70s}
.anim .funil-etapas p:nth-child(4){--fd:.85s}
/* faq: a resposta abre com altura animada em vez de saltar.
   O padding entra junto, senao a altura nunca chega a zero.         */
.anim .faq .answer{
  overflow:hidden;
  transition:height .34s cubic-bezier(.3,.7,.3,1),padding-bottom .34s ease;
}

/* ---------- ampliar com o mouse ----------
   Tres alvos, um mesmo gesto: a foto da capa, a foto dos precos e as
   faixas do funil crescem sob o cursor.

   So onde ha cursor de verdade - (hover:hover) e (pointer:fine). No
   celular o navegador emula hover no toque: a foto ficaria ampliada
   depois do toque e sem jeito de desfazer.

   Isto nao depende da classe .anim como o resto do movimento, porque
   .anim tambem exige IntersectionObserver, que nao tem nada a ver com
   hover. A trava de "reduzir movimento" vem no bloco logo abaixo.

   As fotos ampliam POR DENTRO: quem cresce e a <img>, e a moldura tem
   overflow:hidden. Nada empurra o texto ao lado - sem reposicionamento
   de layout, so a imagem se aproximando.                             */
@media (hover:hover) and (pointer:fine){
  .capa-foto img,.preco-foto img{transition:transform .55s cubic-bezier(.2,.7,.3,1)}
  .capa-foto:hover img,.preco-foto:hover img{transform:scale(1.06)}

  /* a moldura da capa responde junto: o halo abre e a sombra desce,
     para a foto parecer vir a frente do navy em vez de so ampliar */
  .capa-foto{transition:box-shadow .55s ease}
  .capa-foto:hover{
    box-shadow:
      0 0 0 12px rgba(4,182,246,.10),
      0 30px 60px -26px rgba(0,0,0,.70);
  }

  /* Funil: a faixa sob o cursor cresce e as outras quatro recuam - e o
     recuo que faz a de cima parecer vir a frente, porque 6% sozinhos
     numa faixa larga e baixa quase nao se leem.

     A faixa e a linha de texto se acendem juntas. O par e feito pelo
     script no fim do arquivo: em CSS um <polygon> nao alcanca o <p>
     correspondente, sao irmaos em ramos diferentes.

     transform-box:fill-box faz o scale girar em torno do centro da
     propria faixa; sem isso a origem seria o canto do SVG e a faixa
     escorregaria para o lado em vez de crescer no lugar.

     O scale e uniforme, entao o preserveAspectRatio="none" do SVG nao
     atrapalha: esticar e ampliar comutam, e 6% no desenho continuam
     6% na tela nos dois eixos.                                       */
  .funil polygon{
    transform-box:fill-box;transform-origin:center;
    transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.3,1);
  }
  .funil-ativo polygon{opacity:.45}
  .funil polygon.destaque{opacity:1;transform:scale(1.06)}

  /* a linha de texto nao muda de opacidade: aquela propriedade e da
     animacao de entrada, e as duas brigariam. Ela clareia e anda um
     passo para a direita.                                            */
  .funil-etapas p{transition:color .3s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
  .funil-etapas p.destaque{color:var(--on-dark);transform:translateX(4px)}

  /* o sorriso da virada abre um pouco sob o cursor. Como ela e
     absoluta, crescer nao empurra nada: o texto das duas secoes fica
     onde estava.

     Escala UNIFORME de proposito. Alargar mais que altear leria melhor
     como "sorriso abrindo", mas escala desigual num SVG deforma o
     proprio traco - ele engrossaria num eixo e nao no outro, e a
     espessura constante e o que faz aquilo ser a faixa do logo.

     Os 7% cabem na folga medida em todas as larguras: no pior caso,
     janela de 700px, a metade da altura vai de 50 para 53,5 e o
     respiro da secao ali e 63.                                       */
     O translateY(-50%) tem de ser repetido no estado de hover: nao ha
     como somar a um transform existente em CSS, e escrever so o scale
     apagaria a subida e a curva pularia meia altura para baixo ao
     receber o mouse.                                                 */
  .virada svg{transition:transform .4s cubic-bezier(.2,.7,.3,1)}
  .virada svg:hover{transform:translateY(var(--sobe)) scale(1.07)}
}

/* Quem pediu menos movimento no sistema perde o crescimento e a
   transicao, mas mantem o realce: o funil ainda destaca a faixa sob o
   cursor, so que sem nada se mexendo.                                */
@media (prefers-reduced-motion:reduce){
  .capa-foto,.capa-foto img,.preco-foto img,.funil polygon,.funil-etapas p,
  .guia a,.guia a::after,.virada svg{transition:none}
  .capa-foto:hover img,.preco-foto:hover img,
  .funil polygon.destaque,.funil-etapas p.destaque{transform:none}
  /* aqui NAO pode ser transform:none: o translateY(-50%) e o que monta
     a curva na costura, nao e animacao. Zerar derrubaria ela meia
     altura no hover de quem pediu menos movimento. O que sai e so o
     scale.                                                            */
  .virada svg:hover{transform:translateY(var(--sobe))}
}

/* ===============================================================
   SEJA UM NINO — componentes exclusivos de seja-um-nino.html

   A pagina fala com o acompanhante, nao com a familia, e reusa quase
   tudo o que ja existe: .split, .does, .doesnt, .card, .promessa,
   .virada, .form. So tres coisas nao tinham como sair do que havia.
   =============================================================== */

/* Texto que so o leitor de tela recebe. Nasceu pela legenda da tabela
   de ganhos - um <caption> visivel repetiria o <h2> logo acima -, e
   desde 10/09 nao ha nenhum elemento usando a classe: a tabela saiu.

   Fica assim mesmo, ao contrario da .ganhos e da .etapas-n, que foram
   removidas quando ficaram orfas. A diferenca e que aquelas eram
   componentes desta pagina e esta e uma primitiva de acessibilidade:
   quem escrever a proxima legenda, resumo ou rotulo so-para-leitor vai
   procurar por ela, e uma classe que nao existe falha em silencio -
   o texto simplesmente aparece na tela.                              */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- a reparticao da visita, na capa ----------
   REMOVIDA em 10/09 a pedido de voces, junto com o painel "A sua
   conta" que era a unica dona de todas estas classes - .reparte,
   .reparte-linha, .reparte-nota, .e-seu e o link dentro dela.

   Foi o segundo passo do mesmo movimento que tirou a .ganhos: a
   tabela de 4, 8 e 12 visitas saiu primeiro e os tres valores dela
   se recolheram para este painel; agora o painel saiu e os tres
   valores se recolheram para a lede da capa, onde viraram uma frase
   e nao um demonstrativo. A nota do repasse, com o link para "quanto
   fica com a Nino", desceu para a .hero-note.

   No lugar do painel entrou a foto dos dados, com .capa-lado e
   .capa-foto emprestados da index.html - ver o comentario no HTML.

   O unico resto vivo e a .valor da lede, logo abaixo: ela existe para
   que o R$ 75,92 continue chegando em corpo grande e em ciano, que
   era o trabalho da .e-seu dd e foi decisao de voces em 10/09.        */

/* o numero que a pagina precisa que seja lido, agora dentro de texto
   corrido em vez de numa linha propria. 1,2em em cima da .lede da
   pelos mesmos ~26px do antigo .e-seu dd no piso do clamp, sem
   estourar a entrelinha de 1,55. O ciano da 8,4:1 sobre o navy.
   nowrap porque "R$ 75,92" partido no meio por uma quebra de linha e
   o pior lugar possivel para a pagina quebrar.                        */
.valor{
  color:var(--cyan);font-weight:800;font-size:1.2em;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ---------- o caminho ate a primeira visita ----------
   Numeracao entra porque isto E uma sequencia: cada etapa so acontece
   depois da anterior. Nos outros blocos do site numerar seria enfeite.

   E o mesmo funil que o index mostra a familia, virado do avesso: la
   ele tranquiliza, aqui ele e o percurso de quem esta lendo.

   DEITADO desde 10/09, e a mudanca nao e de gosto. Em pe, as cinco
   etapas empilhadas com 100, 60, 30, 25 e 15 descendo na margem
   desenhavam exatamente o que o desenho de um funil desenha: perda.
   O candidato lia a propria eliminacao de cima para baixo. De lado,
   os mesmos cinco numeros passam a ler como marcas de um percurso - a
   regua horizontal atravessa as cinco de ponta a ponta e a bolinha de
   cada etapa pousa em cima dela, como estacao em linha de metro.
   Numero nenhum saiu. So parou de cair.

   A secao mudou de fundo junto (era .dark, virou .soft), entao as
   cores aqui trocaram de par: --navy e --ink-soft no lugar de
   --on-dark, --blue-deep no lugar de --cyan. Em 10/09 trocou de fundo
   outra vez, de .soft para branco, ao trocar de posicao com "A mesma
   visita, contada dos dois lados" - dessa vez so o anel das bolinhas
   precisou acompanhar, porque texto sobre branco e sobre --paper le
   igual e o contraste nao muda de faixa.                            */
.etapas{
  margin-top:44px;list-style:none;padding:0;counter-reset:etapa;
  display:grid;gap:30px;
}
/* Quatro colunas so quando cabem quatro. Entre 560 e 899 vao duas, em
   duas linhas cheias - eram cinco ate 13/09, e a quinta sobrava sozinha
   na ultima linha, o que na epoca estava certo porque ela E a que fica
   sozinha. Com a entrevista fora, nao sobra ninguem.                */
@media (min-width:560px){.etapas{grid-template-columns:repeat(2,1fr);gap:28px 26px}}
@media (min-width:900px){.etapas{grid-template-columns:repeat(4,1fr);gap:22px}}
.etapas li{
  counter-increment:etapa;position:relative;
  padding:44px 0 0;
  border-top:2px solid var(--line);
}
.etapas li::before{
  content:counter(etapa);
  position:absolute;left:0;top:-17px;
  width:34px;height:34px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-deep);color:var(--white);
  font-family:var(--display);font-weight:800;font-size:16px;
  font-variant-numeric:tabular-nums;
  /* o anel recorta a regua por tras do numero, senao a linha atravessa
     a bolinha. A cor TEM de ser a do fundo da secao, e ja mudou uma vez
     por isto: em 10/09 o #caminho trocou de lugar com "A mesma visita,
     contada dos dois lados" e herdou o fundo branco dela, entao o anel
     saiu de --paper para --white. Se a secao mudar de fundo de novo,
     este valor muda junto - com --paper aqui o anel viraria um halo
     cinza visivel em volta de cada bolinha.                          */
  box-shadow:0 0 0 6px var(--white);
}
.etapas h3{font-size:18px;color:var(--navy)}
.etapas p{margin-top:6px;font-size:16px;color:var(--ink-soft)}
/* O .etapas-n saiu daqui em 10/09, junto com as contagens que ele
   formatava - 100 se inscrevem, 60 passam, e as outras tres. A regra
   ficaria orfa, e com ela o display:flex da etapa, que existia SO para
   empurrar aquele numero ate a base da celula. Os dois foram embora
   juntos: sem contagem nao ha o que alinhar.                        */

/* ---------- .does e .promessa sobre fundo escuro ----------
   Os dois nasceram para secao clara e agora aparecem no #leva, que e
   .dark. O .does so precisava trocar os fios: o tique ja e --blue, que
   se le sobre o navy. A .promessa estava pior - ela fixa
   color:var(--navy), e dentro de uma secao escura isso era texto navy
   sobre fundo navy. A frase existia no HTML e nao chegava na tela: era
   o caso do #caminho ate esta passada, e ninguem tinha percebido
   porque a linha que sumia era justamente a ultima da secao.         */
.dark .does li{color:var(--on-dark);border-color:var(--line-dark)}
.dark .does li:first-child{border-top-color:var(--line-dark)}
.dark .promessa{
  background:linear-gradient(90deg,rgba(4,182,246,.10),rgba(4,182,246,.04));
  border-left-color:var(--cyan);
  color:var(--on-dark);
}

/* ---------- a foto unica das duas horas ----------
   Era o PAR: duas imagens lado a lado, cada uma um item da lista ao
   lado - o jogo e a ajuda com o banco pelo aplicativo. Em 10/09 a dos
   dados subiu para a capa e sobrou uma so, entao .dupla morreu junto
   e a que ficou passou a ser peca unica de secao.

   Duas contas decidiram o tamanho, e nenhuma e estetica:

   1. A LARGURA para em 860px. O arquivo e 720x450, ou seja 1,6:1. Na
      largura cheia do .wrap com 470px de altura o quadro daria 2,8:1,
      e cortar 1,6 para 2,8 come 200px de altura da imagem - o rabo de
      cavalo dela e a testa dele saem juntos. Em 860 o quadro fica em
      1,83:1 e o corte cai para 57px, que e mesa e nao rosto.

   2. O CORTE sobe para 38% em vez de ficar no centro. Os dois rostos
      moram no terco alto do arquivo e o terco baixo e tampo de mesa e
      teclado; centralizado, o corte tirava o mesmo tanto dos dois
      lados e lascava as cabecas para preservar madeira.

   O x do object-position nao faz nada aqui e esta escrito assim mesmo:
   como o quadro e mais largo que o arquivo, o object-fit escala pela
   largura e so sobra folga na vertical. Se um dia a largura mudar para
   menos de 1,6:1 o corte vira horizontal e o 50% passa a valer.        */
.figure-solo{max-width:860px;margin-left:auto;margin-right:auto}
.figure-solo img{height:clamp(260px,40vw,470px);object-position:50% 38%}
/* ---------- os dois lados da mesma visita ----------
   Duas colunas que se encaram, a mesma visita lancada em dois razoes.

   O jogo esta na DIAGONAL das fotos, e nao num deslocamento de coluna.
   A vaga da esquerda abre o bloco, a da direita fecha o outro: os dois
   quadros ficam em cantos opostos e o olho atravessa na diagonal, em
   vez de comparar linha a linha como quem audita uma tabela - que era
   o risco de duas colunas alinhadas pelo topo.

   Aqui houve um 'margin-top:64px' na segunda coluna, e ele SAIU quando
   a foto 2 desceu para o pe. Os dois deslocamentos brigavam: a coluna
   inteira descia e a foto descia junto com ela, e o vao embaixo da
   esquerda abria demais. Um jogo so por secao.

   O conteudo e prosa, nao lista. A pagina ja tem duas listas de tique
   azul, e uma terceira faria desta secao mais um inventario - so que o
   argumento dela nao e inventariavel.                                */
.mao-dupla{display:grid;gap:44px;margin-top:44px}
@media (min-width:860px){
  .mao-dupla{grid-template-columns:1fr 1fr;gap:48px;align-items:start}
}
.lado h3{margin-top:26px}
/* na coluna da direita o titulo E o primeiro elemento, porque a foto
   dela vai para o pe. Sem isto ele nasceria com os 26px que existem
   para separa-lo da foto de cima - e as duas colunas comecariam em
   alturas diferentes por acidente, nao por desenho.                 */
.lado h3:first-child{margin-top:0}
.lado p{margin-top:14px;font-size:17px;color:var(--ink-soft)}
.lado .src{margin-top:20px}
/* As duas fotos entraram em 10/09 e as vagas sairam. Herdam a .figure,
   que e a moldura do site, mas ela nasceu para peca solta no meio de
   uma secao e traz dois habitos que aqui atrapalham:

   1. margin-top:38px. Na coluna da ESQUERDA a foto e o primeiro
      elemento e precisa encostar no topo, porque e ela que responde ao
      h3 da direita - que tem margin-top:0 pelo mesmo motivo. Com os
      38px as duas colunas comecariam desencontradas por acidente, e o
      desencontro desta secao e o da diagonal, que e outro.

   2. Na coluna da DIREITA a foto fecha o bloco depois de prosa, e ai
      quer 28px e nao 38: mais que isso descola a foto da coluna, menos
      encosta na prosa e ela le como legenda do ultimo paragrafo.

   A altura fica a da .figure, 340px no teto, e nao a menor que o par
   da secao anterior usava. Nesta largura de coluna o corte de 340px e
   HORIZONTAL - a imagem de 1,6:1 sobra nas laterais e perde 34px de
   cada lado, que e parede dos dois lados. Baixando para 260px o corte
   viraria vertical e comecaria a comer as cabecas.                  */
.lado .figure:first-child{margin-top:0}
.lado p + .figure{margin-top:28px}

/* ---------- vaga de foto: REMOVIDA em 10/09 ----------
   Eram os dois quadros tracejados que seguravam o lugar das fotos da
   secao "A mesma visita, contada dos dois lados" - .vaga, .vaga p e
   .vaga b. As duas fotos entraram, entao o bloco ficou orfao e saiu,
   como o proprio comentario dele mandava fazer.

   Fica o registro de uma medicao que custou uma tentativa: o tracejado
   nao podia ser --line. Aquele e o cinza de separar coisas que existem,
   e sobre o --paper do proprio quadro ele sumia a 100% - so aparecia
   com zoom, e a vaga lia como cartao preenchido em vez de buraco. O
   tom que funcionou foi #B4C2DE, entre o --line e o --muted.        */