/* =========================================================
   Jairo Machado · Consultoria em Mídia Paga

   Formato: uma ideia por tela. Você avança, não rola uma
   página comprida. O avanço é do `scroll-snap` do CSS, não de
   JavaScript sequestrando a roda — é por isso que teclado,
   toque, barra de espaço e link direto continuam funcionando.
   Sequestrar a rolagem é o erro clássico desse formato.

   Escuro de sala escura: preto de verdade, muito vazio, e uma
   coisa só acontecendo por vez. Sem brilho radial, sem vidro
   fosco, sem texto em degradê — esse pacote é o que faz escuro
   virar template em vez de virar premium.

   Karrik NÃO TEM NEGRITO. A hierarquia é de corpo, caixa,
   itálico e tom (luz e meia-luz). `font-synthesis` está desligado:
   um font-weight:700 em título simplesmente não faz nada.
   ========================================================= */

@font-face{font-family:'Karrik';src:url('../assets/fonts/Karrik-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Karrik';src:url('../assets/fonts/Karrik-Italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Sligoil';src:url('../assets/fonts/Sligoil-Micro.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Sligoil';src:url('../assets/fonts/Sligoil-MicroBold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';src:url('../assets/fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --breu:#0A0908;            /* preto de sala, levemente quente */
  --breu-2:#171615;          /* um degrau acima do breu, nas telas pares. 1,10 de
                                razão contra o breu: perceptível, mas leve. O #121110
                                anterior (1,05) sumia na maioria das telas */
  --luz:#EDE9E0;             /* branco de projeção */
  --meia-luz:#BAB4A8;        /* cinza de apoio: Lc 62 no APCA sobre o breu. O antigo #948E82
                                dava 6,1 no WCAG 2 mas só Lc 42 — ilegível em corpo pequeno */
  --fio:rgba(237,233,224,.16);

  --display:'Karrik',ui-sans-serif,system-ui,sans-serif;
  --corpo:'Archivo',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --dado:'Sligoil',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gutter:clamp(1.5rem,6vw,6rem);
  --maxw:86rem;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-snap-type:y proximity;   /* proximity, não mandatory: tela densa não pode prender ninguém */
  scroll-behavior:smooth;
  hanging-punctuation:first last;
  background:var(--breu);
}
body{margin:0;background:var(--breu);color:var(--luz);
  font-family:var(--corpo);font-size:clamp(1rem,.95rem + .3vw,1.15rem);line-height:1.55;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:2px solid var(--luz);outline-offset:4px}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pular{position:absolute;left:-9999px;z-index:99}
.pular:focus{left:var(--gutter);top:1rem;background:var(--luz);color:var(--breu);
  padding:.75rem 1.1rem;font-family:var(--dado);font-size:.8rem}

/* ---------- Barra fixa ---------- */
.fixo{position:fixed;inset:0 0 auto 0;z-index:80;display:flex;align-items:center;gap:1rem;
  padding:clamp(1rem,3vh,1.5rem) var(--gutter);pointer-events:none}
.fixo > *,.fixo a,.fixo button{pointer-events:auto}
.assinatura{font-family:var(--display);font-size:1.05rem;letter-spacing:-.02em;
  text-decoration:none;color:var(--luz);transition:opacity .35s ease,visibility 0s}
/* Na abertura o nome sai da barra (ele está em etiqueta acima do título) e
   volta da segunda tela em diante. `visibility` acompanha a opacidade para
   o link escondido não receber foco nem clique. */
.fixo.na-abertura .assinatura{opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility 0s .35s}
/* O que o nome faz, logo depois dele: mesmo tipo e corpo, em meia-luz e
   separado por um fio, para o nome continuar mandando. Só onde cabe sem
   apertar o seletor e o botão; no celular a frase da abertura já diz isso. */
.assinatura-desc{display:none}
@media (min-width:56rem){
  .assinatura{display:flex;align-items:center}
  .assinatura-desc{display:inline;color:var(--meia-luz);margin-left:.9rem;padding-left:.9rem;
    border-left:1px solid var(--fio);line-height:1.1}
}
.fixo-dir{margin-left:auto;display:flex;align-items:center;gap:clamp(.75rem,2vw,1.5rem)}
/* O botão de conversa é um só, no topo e no fecho: mesmo texto, mesma ação
   (abre o WhatsApp numa aba nova), mesma letra mono em caixa alta e o mesmo
   hover vazado. Muda só o tamanho — compacto na barra, maior no fecho. */
.btn{display:inline-block;font-family:var(--dado);font-size:.75rem;line-height:1;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  background:var(--luz);color:var(--breu);border:1px solid var(--luz);padding:.8rem .95rem;
  transition:background-color .15s,color .15s}
.btn:hover{background:transparent;color:var(--luz)}
/* O ícone do WhatsApp diz para onde o botão leva. Vai na cor do texto
   (currentColor), então se inverte junto no hover. */
.btn{display:inline-flex;align-items:center;gap:.6em}
.btn-icone{flex:none;width:1.2em;height:1.2em}
/* Abaixo de 375px o ícone empurra o botão do topo para fora da tela; ali ele
   fica só com o texto. O botão do fecho mantém o ícone em qualquer largura. */
@media (max-width:23.4rem){.btn-topo .btn-icone{display:none}}
@media (max-width:43.99rem){.btn-topo{letter-spacing:.03em;padding:.7rem .7rem}}

/* Idiomas. Mora na barra fixa em qualquer largura: sem contador e sem índice,
   sobra lugar para ele ao lado do botão. A língua atual vai em luz; as outras
   em meia-luz, e acendem no hover. */
.idiomas{display:flex;gap:.7rem;margin:0;font-family:var(--dado);font-size:.75rem;letter-spacing:.1em}
.idiomas a{text-decoration:none;color:var(--meia-luz);padding-bottom:3px;
  border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.idiomas a:hover{color:var(--luz)}
/* a língua atual: luz e um fio de 1px embaixo, o mesmo traço dos links do site */
.idiomas a[aria-current]{color:var(--luz);border-bottom-color:var(--luz);cursor:default}
/* Abaixo de 360px nome, idiomas e botão só cabem com os vãos apertados */
@media (max-width:22.49rem){
  .fixo{gap:.75rem}
  .fixo-dir{gap:.6rem}
  .idiomas{gap:.5rem}
  .btn-topo{letter-spacing:0;padding-inline:.6rem}
}

/* ---------- Fio de progresso ----------
   Um fio de 2px no topo que enche conforme a rolagem: diz quanto falta sem
   pedir atenção. É CSS puro, preso à rolagem da página (scroll(root)); onde
   o navegador não tem animation-timeline, o fio simplesmente não aparece.
   O ::before é o trilho em fio, o ::after é o trecho aceso. */
@supports (animation-timeline:scroll()){
  body::before,body::after{content:'';position:fixed;top:0;left:0;right:0;height:2px;
    z-index:90;pointer-events:none}
  body::before{background:var(--fio)}
  body::after{background:var(--luz);transform-origin:left;transform:scaleX(0);
    animation:enche linear both;animation-timeline:scroll(root)}
}
@keyframes enche{to{transform:scaleX(1)}}

/* ---------- Setas de navegação ----------
   Anterior e próxima tela, fixas na lateral direita. Só a partir de 64rem:
   abaixo disso a margem lateral fica estreita e as setas cobririam as grades
   que vão de ponta a ponta (marcas, números, matriz); no celular quem navega
   é o dedo. A cor é luz com opacidade, para ler igual sobre o breu e sobre o
   degrau de cinza. Na primeira e na última tela, a seta que
   não leva a lugar nenhum apaga. O script tira o `hidden`: sem ele, nada aparece. */
.setas{display:none}
@media (min-width:64rem){
  .setas:not([hidden]){position:fixed;right:clamp(.75rem,1.6vw,1.5rem);top:50%;
    transform:translateY(-50%);z-index:60;display:grid;gap:.35rem}
}
.seta{display:grid;place-items:center;width:2.25rem;height:2.25rem;padding:0;border:0;
  background:none;color:var(--luz);opacity:.55;cursor:pointer;transition:opacity .15s}
.seta:hover{opacity:1}
.seta[aria-disabled="true"]{opacity:.18;cursor:default}

/* ---------- A tela ---------- */
.sequencia{display:block}
.tela{min-height:100dvh;scroll-snap-align:start;display:grid;align-content:center;
  padding-block:clamp(5.5rem,13vh,8rem) clamp(3.5rem,9vh,5.5rem);position:relative;
  border-top:1px solid transparent}
.int{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* A entrada é por rolagem, em CSS nativo — sem Framer Motion, sem GSAP.
   O escalonamento vem de faixas diferentes por filho, não de atraso. */
@keyframes sobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .tela .int > *{animation:sobe linear both;animation-timeline:view()}
    .tela .int > *:nth-child(1){animation-range:entry 4% entry 52%}
    .tela .int > *:nth-child(2){animation-range:entry 11% entry 60%}
    .tela .int > *:nth-child(3){animation-range:entry 18% entry 68%}
    .tela .int > *:nth-child(4){animation-range:entry 25% entry 76%}
  }
}

/* ---------- Tipografia da sequência ---------- */
.etiqueta{font-family:var(--dado);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--meia-luz);margin:0 0 clamp(1.5rem,4vh,2.5rem)}

h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;letter-spacing:-.028em}
.enorme{font-size:clamp(2.6rem,.6rem + 8.4vw,8.4rem);line-height:.9;max-width:15ch}
/* A ênfase é o itálico, sozinho. Cor de acento sobre quase-preto é o
   clichê do neon, e o site não tem cor nenhuma além de luz e breu. */
h1 i,h2 i{font-style:italic}
/* Palavra-chave no texto corrido: o parágrafo fica em meia-luz e o trecho
   que importa acende em luz. Sem negrito (Karrik não tem, e no Archivo ele
   destoaria) e sem cor nova. Regra de uso: no máximo dois por parágrafo —
   mais que isso, nada se destaca. O <strong> também diz a buscadores e
   modelos o que é central em cada trecho. */
strong{font-weight:400;color:var(--luz)}
.apoio{color:var(--meia-luz);max-width:44ch;font-size:clamp(1rem,.95rem + .35vw,1.2rem);
  margin-top:clamp(1.5rem,4vh,2.25rem);hyphens:auto;-webkit-hyphens:auto}

/* 01 · a tese. A headline ganhou "especializada em" e um subtexto embaixo,
   então desce um degrau em relação ao .enorme do fecho e o apoio sobe um,
   para os dois lerem como par e não como título e nota de rodapé. */
/* O nome acima do título: retrato pequeno e redondo e o nome em mono, caixa
   alta e luz. O
   retrato vai em preto e branco, como o de "Quem assina": o site não tem
   cor. Da segunda tela em diante o nome sobe para a barra fixa. */
.nome-abertura{display:flex;align-items:center;gap:clamp(.9rem,1.4vw,1.15rem);
  margin:0 0 clamp(1.25rem,3.5vh,2rem);font-family:var(--dado);
  font-size:clamp(.85rem,.8rem + .25vw,1rem);letter-spacing:.2em;text-transform:uppercase;
  color:var(--luz)}
.nome-abertura .rosto{flex:none;width:clamp(2.75rem,2rem + 2vw,3.75rem);height:auto;aspect-ratio:1;
  border-radius:50%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
#tese .enorme{font-size:clamp(2.3rem,.55rem + 6.6vw,6.6rem);max-width:17ch}
#tese .apoio{font-size:clamp(1.125rem,1rem + .55vw,1.5rem);max-width:46ch;line-height:1.45;
  hyphens:manual;-webkit-hyphens:manual}

/* 02 · em números. A credencial que vivia em letra miúda sob o título virou
   quatro números grandes em tela própria, antes das marcas. Cada item é
   numeral, unidade e texto: a unidade ("milhões", "clientes") vai em corpo de
   display porque é ela que carrega o impacto, e o texto corrido completa a
   frase em duas ou três linhas. No estreito os quatro empilham; no largo são
   quatro colunas iguais separadas por fio vertical. Elas só ficaram iguais
   quando o "+R$" saiu da frente do numeral: em corpo cheio, "+R$ 30" pedia
   uma primeira coluna 1,5 vez mais larga, e o ritmo das quatro se perdia. */
.numeros{list-style:none;margin:0;padding:0;display:grid;gap:0}
.numeros li{display:grid;align-content:start;padding-block:clamp(.8rem,2vh,1.2rem);
  border-top:1px solid var(--fio)}
.numeros li:last-child{border-bottom:1px solid var(--fio)}
.numeros b{font-family:var(--display);font-weight:400;letter-spacing:-.04em;line-height:.9;
  font-size:clamp(2.6rem,1rem + 5vw,6rem);white-space:nowrap}
/* O "+" vem depois do número, pequeno e no alto, como um "mais de". O
   símbolo da moeda saiu do numeral e virou o começo do texto ("de reais
   geridos..."): o numeral fica só com algarismos, e as quatro colunas têm o
   mesmo desenho. */
.numeros b small{display:inline-block;vertical-align:top;font-size:.42em;line-height:1;
  letter-spacing:-.01em;margin-left:.06em;position:relative;top:-.02em}
.numeros em{font-family:var(--display);font-style:normal;letter-spacing:-.03em;line-height:1;
  font-size:clamp(1.5rem,.75rem + 2.5vw,3rem);margin-top:.3rem}
.numeros p{color:var(--meia-luz);font-size:clamp(.9rem,.85rem + .25vw,1rem);line-height:1.45;
  max-width:34ch;margin-top:clamp(.7rem,1.8vh,1rem)}
@media (min-width:58rem){
  .numeros{grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--fio);
    padding-top:clamp(1.5rem,3.5vh,2.25rem)}
  .numeros li{padding:0 clamp(1rem,2vw,1.75rem);border-top:0;border-left:1px solid var(--fio)}
  .numeros li:first-child{border-left:0;padding-left:0}
  .numeros li:last-child{border-bottom:0}
  .numeros p{max-width:24ch}
}

/* 05 · as dores. São fala de cliente, por isso itálico e aspas; cada frase se
   explica sozinha, e embaixo delas vai só a linha que entrega a tela para as
   quatro etapas. Sem JavaScript, a lista fica empilhada como era. */
.sintomas{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sintomas li{font-family:var(--display);font-style:italic;letter-spacing:-.028em;line-height:1.02;
  font-size:clamp(1.45rem,.9rem + 2.5vw,3rem);max-width:26ch;
  padding-block:clamp(1.1rem,3vh,1.9rem);border-top:1px solid var(--fio)}
.sintomas li:last-child{border-bottom:1px solid var(--fio)}

/* O carrossel. Uma frase por vez, maior, todas na mesma célula do grid: a
   altura é a da frase mais longa e nada pula na troca. O tempo de cada frase
   é a animação do fio que se preenche embaixo — quando ela termina, o script
   avança. Por isso pausar é só parar a animação: hover, foco e tela
   fora de vista usam o mesmo `animation-play-state`. Quem pede movimento
   reduzido não tem troca automática; os fios continuam levando a cada frase. */
/* A mecânica vale para qualquer .carrossel-lista (as dores e os depoimentos);
   o que é de cada um — corpo, medida, fio em volta — fica na regra dele. */
.carrossel.ativo .carrossel-lista > li{grid-area:1/1;align-self:center;
  opacity:0;visibility:hidden;transform:translateY(.25em);
  transition:opacity .6s ease,transform .6s ease,visibility 0s .6s}
.carrossel.ativo .carrossel-lista > li.atual{opacity:1;visibility:visible;transform:none;
  transition:opacity .6s ease .15s,transform .6s ease .15s}
.carrossel.ativo .sintomas{border-block:1px solid var(--fio);
  padding-block:clamp(1.5rem,5vh,3rem)}
.carrossel.ativo .sintomas li{border:0;padding:0;
  font-size:clamp(1.9rem,1rem + 4vw,4.4rem);max-width:21ch}
.carrossel-controles[hidden]{display:none}
.carrossel-controles{display:flex;align-items:center;gap:clamp(1rem,3vw,1.75rem);
  margin-top:clamp(1rem,2.5vh,1.5rem)}
.carrossel-fios{list-style:none;margin:0;padding:0;display:flex;gap:.4rem}
.carrossel-fios button{position:relative;display:block;width:clamp(2rem,5vw,3rem);height:1.75rem;
  padding:0;border:0;background:none;cursor:pointer}
.carrossel-fios button::before,.carrossel-fios button::after{content:'';position:absolute;
  left:0;right:0;top:50%;height:1px;background:var(--fio)}
.carrossel-fios button::after{background:var(--luz);transform:scaleX(0);transform-origin:left}
.carrossel-fios button[aria-current="true"]::after{animation:preenche var(--tempo,6s) linear forwards}
@keyframes preenche{to{transform:scaleX(1)}}
/* Foco só de teclado (:focus-visible), e hover só onde há mouse: no toque, o
   foco e o hover ficam presos no fio tocado e o carrossel pararia de vez. */
@media (hover:hover){.carrossel:hover .carrossel-fios button::after{animation-play-state:paused}}
.carrossel:has(:focus-visible) .carrossel-fios button::after,
.carrossel.pausado .carrossel-fios button::after{animation-play-state:paused}
.carrossel-fios button:focus-visible{outline:1px solid var(--luz);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .carrossel.ativo .carrossel-lista > li{transition:none;transform:none}
  .carrossel-fios button[aria-current="true"]::after{animation:none;transform:scaleX(1)}
}

/* 03 · os depoimentos. A fala de quem contratou, um por vez, no mesmo
   carrossel das dores — com tempo maior, porque é parágrafo e não frase. Sem
   itálico: itálico e aspas grandes são a voz da dor; aqui a fala é calma, em
   corpo de leitura grande, e a assinatura embaixo diz quem fala. Nas versões
   em inglês e espanhol o texto vem traduzido, e uma nota diz isso. */
.carrossel-depoimentos{--tempo:11s}
.depoimentos{list-style:none;margin:0;padding:0;display:grid;gap:clamp(2rem,5vh,3rem)}
.depoimentos figure,.depoimentos blockquote{margin:0}
.depoimentos blockquote p{font-family:var(--display);letter-spacing:-.025em;line-height:1.15;
  font-size:clamp(1.45rem,1rem + 2vw,2.75rem);max-width:32ch;color:var(--meia-luz)}
.depoimentos figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem 1rem;
  margin-top:clamp(1.25rem,3vh,2rem)}
.depoimentos figcaption b{font-family:var(--display);font-weight:400;font-size:1.05rem;
  letter-spacing:-.02em;color:var(--luz)}
.depoimentos figcaption span{font-family:var(--dado);font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--meia-luz)}
.nota-traducao{margin-top:clamp(1rem,2.5vh,1.5rem);font-family:var(--dado);font-size:.75rem;
  letter-spacing:.04em;color:var(--meia-luz)}

/* 04 · as marcas. 24 delas: só número de colunas que divide 24 — 2, 3, 4 ou 6 —
   para nunca terminar em linha incompleta. Se a lista mudar, os divisores mudam. */
.marcas-grade{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--fio);border-left:1px solid var(--fio)}
@media (min-width:32rem){.marcas-grade{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:46rem){.marcas-grade{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:64rem){.marcas-grade{grid-template-columns:repeat(6,minmax(0,1fr))}}
.marcas-grade li{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(4rem,9vh,5.5rem);padding:1rem;
  border-bottom:1px solid var(--fio);border-right:1px solid var(--fio)}
.marcas-grade img{max-height:1.5rem;max-width:min(7rem,100%);width:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.5;transition:opacity .2s}
.marcas-grade img.empilhada{max-height:2.3rem}
.marcas-grade li:hover img{opacity:1}
/* A nota fica sempre no DOM e some por opacidade, não por `visibility`:
   o leitor de tela lê nome e descrição junto com a marca. */
.marca-nota{position:absolute;top:calc(100% + 1px);z-index:5;width:max-content;
  max-width:min(18rem,calc(100vw - 3rem));background:var(--luz);color:var(--breu);
  padding:.75rem .9rem;text-align:left;font-size:.8rem;line-height:1.4;
  opacity:0;pointer-events:none;transition:opacity .12s}
.marca-nota b{display:block;font-family:var(--display);font-weight:400;font-size:.98rem;
  letter-spacing:-.015em;margin-bottom:.2rem}
.marca-nota em{display:flex;align-items:center;gap:.4rem;font-style:normal;margin-top:.45rem;
  padding-top:.45rem;border-top:1px solid rgba(10,9,8,.2);font-family:var(--dado);
  font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#5C574C}
.marca-nota em span{font-size:.9rem;letter-spacing:0;line-height:1}
.marcas-grade li:hover{z-index:6}
.marcas-grade li:hover .marca-nota{opacity:1}
/* Ancoragem pela ponta e para cima na última linha. Estes blocos precisam vir
   DEPOIS das regras de duas colunas: a especificidade é igual, vence o último. */
.marcas-grade li:nth-child(2n+1) .marca-nota{left:0}
.marcas-grade li:nth-child(2n) .marca-nota{right:0}
.marcas-grade li:nth-last-child(-n+2) .marca-nota{top:auto;bottom:calc(100% + 1px)}
@media (min-width:32rem){
  .marcas-grade li:nth-child(n) .marca-nota{left:50%;right:auto;transform:translateX(-50%);top:calc(100% + 1px);bottom:auto}
  .marcas-grade li:nth-child(3n+1) .marca-nota{left:0;transform:none}
  .marcas-grade li:nth-child(3n) .marca-nota{left:auto;right:0;transform:none}
  .marcas-grade li:nth-last-child(-n+3) .marca-nota{top:auto;bottom:calc(100% + 1px)}
}
@media (min-width:46rem){
  .marcas-grade li:nth-child(n) .marca-nota{left:50%;right:auto;transform:translateX(-50%);top:calc(100% + 1px);bottom:auto}
  .marcas-grade li:nth-child(4n+1) .marca-nota{left:0;transform:none}
  .marcas-grade li:nth-child(4n) .marca-nota{left:auto;right:0;transform:none}
  .marcas-grade li:nth-last-child(-n+4) .marca-nota{top:auto;bottom:calc(100% + 1px)}
}
@media (min-width:64rem){
  .marcas-grade li:nth-child(n) .marca-nota{left:50%;right:auto;transform:translateX(-50%);top:calc(100% + 1px);bottom:auto}
  .marcas-grade li:nth-child(6n+1) .marca-nota{left:0;transform:none}
  .marcas-grade li:nth-child(6n) .marca-nota{left:auto;right:0;transform:none}
  .marcas-grade li:nth-last-child(-n+6) .marca-nota{top:auto;bottom:calc(100% + 1px)}
}


/* 11 · as plataformas. A mesma linguagem das marcas — fio, célula, nota clara
   no hover —, mas cada célula traz ícone e nome. São 12, que divide por 2, 3,
   4 e 6: todas as linhas fecham. Mesmo assim é flex com crescimento, para que
   uma plataforma a mais ou a menos estique a última linha em vez de deixá-la
   incompleta. No largo são duas linhas: as seis de mídia em cima, mensuração
   e CRM embaixo. Se a lista mudar, revise as regras de "última linha"
   (nth-last-child) de cada largura. */
.plataformas-grade{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;
  border-top:1px solid var(--fio);border-left:1px solid var(--fio)}
.plataformas-grade li{position:relative;flex:1 0 50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.65rem;min-height:clamp(5rem,11vh,6.5rem);
  padding:1rem .75rem;text-align:center;
  border-bottom:1px solid var(--fio);border-right:1px solid var(--fio)}
@media (min-width:32rem){.plataformas-grade li{flex-basis:33.333%}}
@media (min-width:46rem){.plataformas-grade li{flex-basis:25%}}
@media (min-width:64rem){.plataformas-grade li{flex-basis:16.666%}}
.plataformas-grade img{height:1.4rem;width:auto;
  filter:brightness(0) invert(1);opacity:.5;transition:opacity .2s}
.plataforma-nome{font-size:.82rem;line-height:1.25;color:var(--meia-luz);transition:color .2s}
.plataformas-grade li:hover{z-index:6}
.plataformas-grade li:hover img{opacity:1}
.plataformas-grade li:hover .plataforma-nome{color:var(--luz)}
.plataformas-grade li:hover .marca-nota{opacity:1}
.plataformas-grade li:nth-child(2n+1) .marca-nota{left:0}
.plataformas-grade li:nth-child(2n) .marca-nota{right:0}
.plataformas-grade li:nth-last-child(-n+2) .marca-nota{top:auto;bottom:calc(100% + 1px)}
@media (min-width:32rem){
  .plataformas-grade li:nth-child(n) .marca-nota{left:50%;right:auto;transform:translateX(-50%);top:calc(100% + 1px);bottom:auto}
  .plataformas-grade li:nth-child(3n+1) .marca-nota{left:0;transform:none}
  .plataformas-grade li:nth-child(3n) .marca-nota{left:auto;right:0;transform:none}
  .plataformas-grade li:nth-last-child(-n+3) .marca-nota{top:auto;bottom:calc(100% + 1px)}
}
@media (min-width:46rem){
  .plataformas-grade li:nth-child(n) .marca-nota{left:50%;right:auto;transform:translateX(-50%);top:calc(100% + 1px);bottom:auto}
  .plataformas-grade li:nth-child(4n+1) .marca-nota{left:0;transform:none}
  .plataformas-grade li:nth-child(4n) .marca-nota{left:auto;right:0;transform:none}
  .plataformas-grade li:nth-last-child(-n+4) .marca-nota{top:auto;bottom:calc(100% + 1px)}
}
@media (min-width:64rem){
  .plataformas-grade li:nth-child(n) .marca-nota{left:50%;right:auto;transform:translateX(-50%);top:calc(100% + 1px);bottom:auto}
  .plataformas-grade li:nth-child(6n+1) .marca-nota{left:0;transform:none}
  .plataformas-grade li:nth-child(6n) .marca-nota{left:auto;right:0;transform:none}
  .plataformas-grade li:nth-last-child(-n+6) .marca-nota{top:auto;bottom:calc(100% + 1px)}
}

/* A alternância de fundo: as telas pares sobem um degrau, do breu para o
   breu-2. É o que marca a passagem de uma tela para a outra sem fio nem
   sombra — e como vem da posição, e não de uma classe, uma tela nova entra
   já no ritmo. O azul que fazia a batida da sequência (método e fecho) saiu
   em 09/11/2026. */
.sequencia > .tela:nth-child(even){background:var(--breu-2)}

/* 06 · as quatro perguntas numa tela só. É a tese do site: quem ler só esta
   tela já leva o argumento inteiro. Aqui não entra parágrafo nenhum: quem quiser o detalhe rola para as quatro telas
   seguintes, que repetem a mesma pergunta como manchete. */
.metodo-grade{list-style:none;padding:0;margin:clamp(1.5rem,4vh,2.25rem) 0 0;display:grid;gap:0}
.metodo-grade li{padding-block:clamp(1rem,2.6vh,1.6rem);border-top:1px solid var(--fio)}
.metodo-grade li:last-child{border-bottom:1px solid var(--fio)}
.metodo-grade .etapa-selo{margin:0 0 .5rem}
.metodo-pergunta{font-family:var(--display);letter-spacing:-.028em;line-height:1.04;
  font-size:clamp(1.25rem,.95rem + 1.5vw,2.1rem);max-width:34ch}
@media (min-width:58rem){
  .metodo-grade li{display:grid;grid-template-columns:13rem minmax(0,1fr);align-items:baseline;
    column-gap:clamp(2rem,4vw,3.5rem)}
  .metodo-grade .etapa-selo{margin:0}
  .metodo-pergunta{max-width:none}
  /* a linha de fecho entra alinhada com as perguntas: é a conclusão da lista,
     não uma legenda solta na margem */
  .metodo-grade + .apoio{margin-left:calc(13rem + clamp(2rem,4vw,3.5rem));max-width:56ch}
}

/* 06 a 10 · as quatro etapas. O modelo virou a espinha do site: uma tela por
   etapa, na ordem, e a prova da segunda é a conta aberta. O numeral voltou a
   caber porque a antiga tela de decisão — que era o único lugar da página com
   número — deixou de existir: agora o número é o índice do próprio método. */
.passagem{margin-top:clamp(1.75rem,4vh,2.5rem);color:var(--meia-luz);max-width:48ch;
  font-size:clamp(.95rem,.9rem + .25vw,1.05rem)}
.etapa-selo{font-family:var(--dado);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--luz);margin:0 0 clamp(.9rem,2.3vh,1.45rem)}
.etapa-selo i{font-style:normal;color:var(--meia-luz);margin-right:.9rem}
.etapa-selo em{font-style:normal;color:var(--meia-luz);letter-spacing:.12em;margin-left:.6rem}
.pergunta{font-size:clamp(1.75rem,1.05rem + 2.6vw,3rem);line-height:1.02;max-width:30ch}
.etapa-corpo{margin-top:clamp(1.5rem,4vh,2.25rem);display:grid;gap:clamp(1rem,2.6vh,1.5rem);
  align-content:start}
.etapa-corpo > p{color:var(--meia-luz);max-width:58ch}

/* A linha de escopo é a mesma peça em dois usos: o que entra no escopo de cada
   etapa e, na tela dos formatos, o que não entra em nenhum dos três. */
.escopo-linha{margin-top:clamp(1.5rem,4vh,2.25rem);padding-top:1.1rem;
  border-top:1px solid var(--fio);font-family:var(--dado);font-size:.82rem;line-height:1.7;
  letter-spacing:.02em;color:var(--meia-luz);max-width:72ch}
.etapa-corpo > .escopo-linha{margin-top:.4rem}
.escopo-linha b{font-weight:400;color:var(--luz);text-transform:uppercase;letter-spacing:.14em;
  margin-right:.8rem}
/* Solta na tela, e não dentro da coluna de uma etapa, a linha atravessa a
   largura toda: o fio tem de bater com o da tabela e o das colunas acima.
   Quem se segura numa medida legível é o texto, não o elemento. */
.int > .escopo-linha{max-width:none}
@media (min-width:46rem){
  /* 28% é a mesma coluna de rótulo da matriz logo acima: o texto começa onde
     começa a coluna do primeiro formato */
  .int > .escopo-linha{display:grid;grid-template-columns:28% minmax(0,1fr);column-gap:0}
  .int > .escopo-linha b{margin-right:0;padding-right:1.25rem}
  .int > .escopo-linha span{max-width:82ch}
}

/* No largo, a pergunta fica numa coluna e o argumento na outra: é o que segura
   cada etapa dentro de uma tela sem cortar texto. A tela da conta aberta fica
   de fora da regra — a tabela precisa da largura inteira. */
@media (min-width:64rem){
  .tela-etapa .int{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(3rem,7vw,6rem)}
  .tela-etapa .etapa-selo{grid-column:1 / -1}
  .tela-etapa .pergunta{grid-column:1;align-self:start}
  .tela-etapa .etapa-corpo{grid-column:2;margin-top:0}
}

/* 12 · os três formatos. As marcas são a mesma grade de quatro células — as
   quatro etapas — com mais ou menos tinta: contorno para a leitura, marcada
   para a decisão, cheia para a execução. É escala de escopo, não de
   preferência: os três seguem com o mesmo peso e nenhum leva destaque de
   "recomendado". A matriz alinha com as colunas do cabeçalho porque as duas
   usam a mesma proporção — 28% para o rótulo, o resto dividido em três. */
.formatos{display:grid;gap:clamp(1.5rem,3.5vh,2.25rem);grid-template-columns:1fr;
  margin-top:clamp(1.25rem,3vh,1.75rem)}
.formatos article{border-top:1px solid var(--fio);padding-top:1.1rem}
.formato-marca{display:block;color:var(--luz);margin-bottom:clamp(.7rem,1.8vh,1rem)}
.formatos h2{font-size:clamp(1.35rem,1.1rem + 1.1vw,1.9rem);margin:0 0 .6rem;letter-spacing:-.03em}
.formatos p{color:var(--meia-luz);font-size:.93rem;line-height:1.5}
@media (min-width:46rem){
  .formatos{grid-template-columns:28% repeat(3,minmax(0,1fr));column-gap:0;row-gap:0;
    border-top:1px solid var(--fio);padding-top:1.1rem}
  /* no largo o fio é um só e atravessa a coluna vazia junto com a matriz de
     baixo; no estreito ele volta a ser um por formato, que é o que separa os
     três quando eles empilham */
  .formatos article{border-top:0;padding-top:0;padding-right:clamp(1rem,2.5vw,2rem)}
  .formatos article:first-child{grid-column:2}
}

.matriz{width:100%;table-layout:fixed;border-collapse:collapse;text-align:left;
  margin-top:clamp(1rem,2.4vh,1.5rem)}
/* No largo o nome do formato já está no cabeçalho acima, na mesma coluna: a
   linha de rótulos da tabela só aparece no estreito, onde o cabeçalho empilha
   e a coluna fica sem referência. */
.matriz thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.matriz tbody th{width:28%;font-weight:400;font-size:.93rem;line-height:1.4;color:var(--luz);
  padding:clamp(.5rem,1.4vh,.8rem) 1.25rem clamp(.5rem,1.4vh,.8rem) 0;
  border-top:1px solid var(--fio);vertical-align:middle}
/* `tbody` no seletor de propósito: sem ele a célula vazia do canto do cabeçalho
   também ganha fio, e no estreito — onde o cabeçalho aparece — sobra um traço
   solto em cima da tabela. */
.matriz tbody td{border-top:1px solid var(--fio);padding:clamp(.5rem,1.4vh,.8rem) 0;
  vertical-align:middle}
/* O quadrado cheio e o traço são o mesmo par de sinais do antigo painel de
   escopo: cheio é o que entra, traço é o que não entra. Cada célula leva a
   palavra em texto para o leitor de tela — o sinal sozinho não diz nada. */
.matriz i{display:block}
.matriz i.sim{width:.6rem;height:.6rem;background:var(--luz)}
.matriz i.nao{width:.8rem;height:1px;background:var(--meia-luz)}
@media (max-width:45.99rem){
  .matriz thead{position:static;width:auto;height:auto;clip:auto}
  .matriz thead td{width:44%}
  .matriz thead th{font-family:var(--dado);font-size:.75rem;letter-spacing:.12em;
    text-transform:uppercase;color:var(--meia-luz);font-weight:400;
    padding:0 0 .7rem;vertical-align:bottom}
  .matriz tbody th{width:44%;font-size:.85rem}
}

/* 13 · quem assina */
.assina-grade{display:grid;gap:clamp(2rem,5vh,3.5rem);grid-template-columns:1fr;align-items:center}
@media (min-width:58rem){.assina-grade{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  column-gap:clamp(2.5rem,6vw,5rem)}}
/* Meio-tom de ponto: artefato de impressão, não filtro de tela. */
.retrato{position:relative;max-width:20rem}
.retrato img{width:100%;height:auto;filter:grayscale(1) contrast(1.45) brightness(.92)}
.retrato::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%,var(--breu) 42%,transparent 44%);
  background-size:4px 4px;opacity:.55}
/* O resumo profissional: três parágrafos curtos, em terceira pessoa, com o
   nome na primeira frase. É o texto que um buscador ou um modelo de linguagem
   extrai quando alguém pergunta quem é o Jairo — por isso nomes próprios e
   fatos verificáveis, sem adjetivo solto. A medida abre um pouco em relação
   ao .apoio comum, para três parágrafos caberem na tela. */
.bio{max-width:54ch;hyphens:manual;-webkit-hyphens:manual}
/* sem título entre a etiqueta e o resumo, a margem da etiqueta já basta */
.etiqueta + .bio{margin-top:0}
.bio p + p{margin-top:.85em}

/* 14 · perguntas frequentes. <details> nativo: abre e fecha sem script,
   funciona no teclado e no leitor de tela, e o atributo name deixa uma
   aberta por vez onde o navegador suporta. A pergunta vai na letra dos
   títulos, em luz; a resposta em meia-luz, com a palavra-chave em luz. */
.faq{border-bottom:1px solid var(--fio);max-width:58rem}
.faq details{border-top:1px solid var(--fio)}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  list-style:none;cursor:pointer;padding-block:clamp(.9rem,2.2vh,1.3rem);
  font-family:var(--display);font-size:clamp(1.15rem,.95rem + .9vw,1.6rem);
  letter-spacing:-.02em;line-height:1.15;color:var(--luz)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';flex:none;font-family:var(--dado);font-size:1.1rem;
  color:var(--meia-luz);transition:transform .2s ease}
.faq details[open] > summary::after{transform:rotate(45deg)}
.faq summary:hover::after{color:var(--luz)}
.faq details p{color:var(--meia-luz);max-width:64ch;padding-bottom:clamp(1rem,2.6vh,1.6rem)}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* 15 · o fecho */
/* O título do fecho usa o mesmo corpo da tese: a frase "Antes de qualquer
   proposta, uma conversa." é mais longa que a antiga, e no .enorme cheio ela
   ia a três linhas e encostava na barra. Abertura e fecho ficam no mesmo
   tamanho, o que também amarra as duas pontas da sequência. */
#fecho .enorme{font-size:clamp(2.3rem,.55rem + 6.6vw,6.6rem);max-width:17ch}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;
  margin-top:clamp(2rem,5vh,3rem)}
.acoes .btn{font-size:.82rem;padding:1.15rem 1.75rem}
.link{text-decoration:underline;text-underline-offset:.26em;text-decoration-thickness:1px;
  text-decoration-color:rgba(237,233,224,.45);transition:text-decoration-color .15s}
.link:hover{text-decoration-color:var(--luz)}
.canais{list-style:none;padding:0;margin:clamp(3rem,8vh,5rem) 0 0;display:flex;flex-wrap:wrap;
  gap:.5rem 2rem;font-family:var(--dado);font-size:.78rem;letter-spacing:.06em;
  color:var(--meia-luz)}
.canais a{text-decoration:none;border-bottom:1px solid rgba(237,233,224,.4);padding-bottom:2px}