/* ==========================================================================
   PÁGINA: HOME
   Carrega por último, depois de 06-responsive.css. As media queries desta
   página moram aqui embaixo, no fim do arquivo.

   Blocos, na ordem do briefing de reestruturação:
   hero · prova · problema · método · posicionamento · cases · avaliações ·
   sobre · blog · fechamento

   Prova e cases são dois blocos, não um. A prova adianta os quatro números
   grandes logo depois da hero, para quem não vai rolar a página inteira; os
   cases mostram o painel do gerenciador que prova cada um, lá embaixo, para
   quem já entendeu o método e quer ver a fonte.

   Preto do começo ao fim. Cheguei a montar uma alternância de faixas, com
   as seções de número em papel claro sobre o preto, e ela funcionava no
   papel. Só que o site é de uma marca preta e dourada, e cada faixa clara
   era uma interrupção nesse mundo. Preto inteiro tem mais força do que
   preto com pausas.

   Sem faixa para marcar a troca de assunto, quem separa uma seção da outra
   é o vazio entre elas e o peso da tipografia. Por isso o respiro vertical
   é generoso e o título de seção é grande: são eles que fazem o trabalho
   que a cor fazia.
   ========================================================================== */

/* ==========================================================================
   RITMO DA PÁGINA

   O compasso padrão mora em 03-layout.css. O que mora aqui é onde a home
   foge dele, e por quê. Dez seções com a mesma distância entre si dão à
   leitura um andamento de metrônomo: nada se agrupa, nada se separa, e o
   vazio deixa de dizer qualquer coisa.

   A regra é: espaço curto significa "isto continua"; espaço longo significa
   "isto vira".

     prova          padrão        abre a prova depois da promessa
     problema       LONGE em cima vira o assunto: sai da REIWA e entra na dor
     método         padrão        a resposta para o problema, encosta nele
     posicionamento PERTO em cima continua o método, é o "como pensamos"
     cases          LONGE em cima segunda virada: sai do discurso, entra a prova
     avaliações     PERTO em cima continua a prova, com outra voz
     sobre          padrão        novo assunto, mas menor
     blog           PERTO em cima rodapé editorial, não merece dobra própria
     fechamento     LONGE nos dois o clímax precisa do maior vazio da página

   Quando duas seções se encostam, só a de cima fica com o respiro entre
   elas: senão os dois paddings somam e a aproximação não acontece.
   ========================================================================== */
#problema      {padding-top:var(--sec-y-longe)}
#metodo        {padding-bottom:var(--sec-y-perto)}
#posicionamento{padding-top:var(--sec-y-perto)}
#resultados    {padding-top:var(--sec-y-longe);padding-bottom:var(--sec-y-perto)}
#avaliacoes    {padding-top:var(--sec-y-perto)}
#sobre         {padding-bottom:var(--sec-y-perto)}
#blog          {padding-top:var(--sec-y-perto)}
.fechamento    {padding:var(--sec-y-longe) 0}


/* ==========================================================================
   1. HERO
   Duas colunas: a promessa à esquerda, a marca à direita, e a prova numérica
   fechando a primeira dobra.

   Saiu a parede de cards que ficava na direita. Ela disputava o olhar com o
   texto, e na primeira dobra só pode haver uma coisa para olhar.
   ========================================================================== */
.hero{position:relative;overflow:hidden;isolation:isolate;
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:140px 0 64px}

/* Preto liso, sem foto e sem glow.

   Saiu o monograma que ficava atrás de tudo, e saiu junto o halo dourado
   que existia para ambientá-lo. Luz difusa espalhada pela tela é o que mais
   rápido faz uma página parecer gerada: brilha em todo lugar e não organiza
   nada.

   Saiu também o fio vertical que separava as duas colunas. Ele existia para
   dar estrutura, mas encostava na logo e virava moldura: a peça precisa
   parecer solta no preto, e qualquer traço ao lado dela desfaz isso. O que
   separa as colunas agora é o vão, que basta. */
/* O width:100% aqui e no .hero-numeros não é enfeite.

   A .hero é flex em coluna, e os dois filhos são .container, que tem
   margin:0 auto. Margem automática no eixo transversal cancela o stretch
   do flex: em vez de ocupar a linha e parar no max-width, o bloco encolhe
   até o conteúdo e a margem auto o centraliza no que sobrou. O resultado é
   que os dois começavam em posições diferentes da mesma página. */
/* A coluna do texto passou de 1,05fr para 2fr.

   A promessa é o que vende, a marca é quem assina: a divisão quase meio a
   meio dava às duas o mesmo peso, e a logo, em 470px, disputava a dobra com
   a manchete. Em 2:1 a manchete tem os ~707px que 76px de corpo pedem (a
   linha mais longa mede 658px) e a marca fica em ~353px, que é tamanho de
   assinatura e não de ilustração. */
/* MODELO CINEMATOGRÁFICO: o texto ocupa uma coluna só; a peça sai do fluxo e
   sangra pela borda direita (regra .hero-marca-col adiante). Sem
   position:relative aqui a peça se posiciona pela .hero, que vai de borda a
   borda da tela, e é isso que a faz alcançar o fim da viewport. */
.hero-grade{display:grid;grid-template-columns:minmax(0,600px);
  gap:var(--e-8);align-items:center;width:100%}

/* O texto fica acima da cena, que agora cresce para dentro do gap. */
.hero-texto{position:relative;z-index:1}

/* Etiqueta sem pílula: um traço curto, caixa alta e entreletras aberto.
   A pílula é enfeite de componente; isto é abertura de matéria. */
.hero-kicker{display:flex;align-items:center;gap:12px;
  font-family:var(--ff-ui);font-size:var(--fs-etiqueta);line-height:1.2;
  color:var(--gold-hi);font-weight:600;letter-spacing:var(--ls-etiqueta);
  text-transform:uppercase;margin-bottom:var(--e-6);opacity:0}
.hero-kicker::before{content:"";width:34px;height:1px;flex-shrink:0;
  background:linear-gradient(90deg,var(--gold),rgba(212,175,55,.2))}
.hero-kicker i{font-style:normal;opacity:.45}

/* h1 em linhas com overflow escondido: o reveal.js sobe cada linha de baixo.

   A manchete é --fs-d1, o degrau mais alto da escala depois do --fs-mega.
   Ela era menor que o título das seções internas, o que fazia a primeira
   dobra ser o momento tipograficamente mais fraco da página: a pessoa
   entrava numa promessa menor do que os subtítulos que viriam depois.

   Entrelinha em 0,96: abaixo de 1 as quatro linhas passam a ler como um
   bloco tipográfico único em vez de quatro frases empilhadas, e é isso que
   dá a massa que a dobra precisa. Só funciona porque as linhas são escritas
   à mão no HTML e nenhuma tem letra descendente encostando na de baixo. */
/* Um degrau abaixo de --fs-d1: a coluna de texto é mais estreita neste
   modelo, e no tamanho cheio cada palavra caía numa linha. O piso é o mesmo
   da escala (o celular não muda); só o teto do desktop desce. */
.hero h1{font-size:clamp(2.25rem, 1.321rem + 3.2vw, 4rem);font-weight:700;
  margin-bottom:var(--e-6);letter-spacing:var(--ls-display);line-height:var(--lh-display)}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line > span{display:block;transform:translateY(110%)}

.hero .lead{font-size:var(--fs-lead);color:var(--silver);
  line-height:1.5;max-width:44ch;margin-bottom:var(--e-6);opacity:0}
/* Segundo parágrafo, em escala menor: o primeiro define o que a REIWA é,
   este desdobra. Dois blocos de texto do mesmo peso na primeira dobra
   competem entre si e a pessoa não lê nenhum dos dois. */
.hero .lead-apoio{font-size:var(--fs-corpo);color:var(--muted);
  line-height:var(--lh-corpo);max-width:46ch;margin-top:-18px}

/* duas ações lado a lado: a principal vende a conversa, a secundária dá
   saída para quem ainda não quer falar com ninguém */
.hero-acao{opacity:0;display:flex;flex-wrap:wrap;gap:14px}


/* ---------- a marca, com a cortina de luz ----------

   A faixa clara atravessa a logo da esquerda para a direita, recortada pela
   silhueta dela com mask-image. Recortar pela própria arte é o que faz a luz
   correr DENTRO das letras e da coroa, em vez de passar por cima como um
   retângulo brilhante.

   mix-blend-mode:screen para a luz somar ao metal que já existe embaixo, em
   vez de cobri-lo com uma chapa branca. */
/* A coluna segura a logo e a assinatura. Existe porque as duas precisam se
   separar no celular: lá a logo sai do fluxo e vira marca d'água, e a frase
   fica onde está, como texto legível. */
/* A peça sai do fluxo e vira plano de fundo cinematográfico: centrada na
   vertical, encostada na borda direita da tela e por baixo do texto
   (z-index 0). pointer-events:none para não capturar clique sobre o vão. */
.hero-marca-col{display:flex;flex-direction:column;align-items:flex-end;
  position:absolute;top:50%;right:0;transform:translateY(-50%);
  width:min(60vw,760px);z-index:0;pointer-events:none}

.hero-marca{position:relative;margin:0;width:100%;
  opacity:0;transform:translateY(30px)}

/* A cena da peça, no lugar da logo. Sem moldura: as bordas dissolvem no
   preto do fundo (a foto já é escura), então ela lê como parte da seção, não
   como um card colado. A máscara mora aqui, que é o elemento que o parallax
   move, para a dissolução acompanhar a peça. */
.hero-cena-flutua{position:relative;
  -webkit-mask-image:radial-gradient(82% 84% at 64% 48%,#000 40%,transparent 100%);
  mask-image:radial-gradient(82% 84% at 64% 48%,#000 40%,transparent 100%)}
.hero-marca img{width:100%;height:auto;display:block}

/* Sem fio em cima e centrada sob a logo. A frase fecha a peça pela
   distância, não por traço.

   Estava alinhada à direita, herança de quando havia uma moldura com fio
   embaixo para ela se apoiar. Sem a moldura, o alinhamento à direita a
   descolava do eixo da logo: a peça é simétrica, e a assinatura pendurada
   numa das pontas fazia o conjunto parecer torto. */
.hero-marca-assinatura{margin-top:var(--e-4);opacity:0;transform:translateY(16px);
  font-family:var(--ff-ui);font-size:var(--fs-corpo);font-weight:500;
  line-height:1.4;color:var(--muted);text-align:right;align-self:flex-end;
  padding-right:4vw}
.hero-marca-assinatura strong{font-weight:700;letter-spacing:.04em}

/* ---------- prova numérica dentro da primeira dobra ----------
   A pergunta que o empresário faz antes de qualquer outra é "esses caras
   sabem o que estão fazendo?". A resposta não pode estar a três roladas. */
/* Sem régua em cima e sem fio entre um número e outro. Quatro colunas de
   largura igual já se leem como quatro colunas; o traço só acrescentava
   grade a uma tira que não é tabela. O que separa é o espaço. */
/* A prova numérica vira uma barra de vidro sobre a peça: fundo translúcido
   com blur, borda fina e os quatro números separados por fios verticais.
   position+z-index para o blur pegar a peça que passa por baixo. */
.hero-numeros{display:grid;grid-template-columns:repeat(4,1fr);width:100%;
  position:relative;z-index:2;margin-top:var(--e-7);
  background:rgba(10,10,13,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--elev-2);
  padding:26px 30px;opacity:0;transform:translateY(24px)}
.hero-num{display:flex;flex-direction:column;gap:5px;padding:0 26px;
  border-left:1px solid var(--line)}
.hero-num:first-child{border-left:none;padding-left:0}
.hero-num b{font-family:var(--ff-display);font-weight:600;
  letter-spacing:var(--ls-titulo);line-height:1.1;
  font-size:var(--fs-titulo);
  background-image:var(--gold-grad-texto);background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-num span{font-family:var(--ff-ui);font-size:var(--fs-corpo-p);
  color:var(--muted);line-height:1.45}


/* ==========================================================================
   2. PROVA DE RESULTADO

   Quatro números grandes e nada em volta deles. Sem card, sem moldura e sem
   fio separando um do outro: numa página preta de ponta a ponta, moldura é
   a primeira coisa que o olho encontra, e aqui quem tem de ser encontrado é
   o número. O que agrupa os quatro é estarem na mesma linha de base.
   ========================================================================== */
#prova{position:relative;overflow:hidden;isolation:isolate}

/* A cena que desce da hero, na coluna direita que o texto (62ch) deixa livre.
   Dissolvida no fundo como na hero, sem moldura. */
.cena-prova{position:absolute;top:8%;right:max(-70px,calc((100% - var(--maxw)) / 2 - 70px));
  width:min(46vw,600px);z-index:0;pointer-events:none;will-change:transform;
  -webkit-mask-image:radial-gradient(72% 74% at 50% 48%,#000 46%,transparent 100%);
  mask-image:radial-gradient(72% 74% at 50% 48%,#000 46%,transparent 100%)}
.cena-prova img{width:100%;height:auto;display:block}
@media(max-width:1080px){.cena-prova{display:none}}

.prova-topo{position:relative;z-index:1;max-width:62ch;margin-bottom:var(--e-8)}
.grade-prova{position:relative;z-index:1}
.prova-topo .h-sec{max-width:18ch}

.grade-prova{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--e-7) var(--e-6)}
.prova-item{display:flex;flex-direction:column;gap:12px}

/* --fs-num é o degrau reservado ao número de manchete: 34px no celular,
   56px no desktop. É o único texto da seção que se lê de longe, e a
   descrição embaixo dele fica em corpo pequeno de propósito, para a
   distância entre os dois fazer o trabalho de hierarquia.

   white-space:nowrap porque "R$ 1,27" tem o dobro de caracteres de "83", e
   quebrar o valor em duas linhas o tira da categoria de manchete. */
.prova-num{font-family:var(--ff-display);font-weight:600;line-height:1;
  font-size:var(--fs-num);letter-spacing:var(--ls-display);white-space:nowrap;
  background-image:var(--gold-grad-texto);background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.prova-desc{font-size:var(--fs-corpo-p);line-height:1.5;color:var(--muted);
  max-width:24ch}

.prova-fecho{margin-top:var(--e-8);padding-top:var(--e-6);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--e-6);
  align-items:center;justify-content:space-between}
.prova-fecho p{font-family:var(--ff-display);font-weight:500;
  font-size:var(--fs-lead);line-height:1.4;letter-spacing:var(--ls-titulo);
  color:var(--muted);max-width:44ch}
.prova-fecho strong{color:var(--ink);font-weight:700}


/* ==========================================================================
   3. O PROBLEMA
   ========================================================================== */
#problema{position:relative;overflow:hidden;isolation:isolate}

/* A mesma cena como ambiente: sangra pela borda direita, apagada e com as
   bordas dissolvidas para não desenhar o retângulo da foto. */
.cena-fundo{position:absolute;top:50%;right:-8%;transform:translateY(-50%);
  width:min(56vw,680px);z-index:0;pointer-events:none;opacity:.14;
  -webkit-mask-image:radial-gradient(60% 60% at 60% 50%,#000 20%,transparent 72%);
  mask-image:radial-gradient(60% 60% at 60% 50%,#000 20%,transparent 72%)}
.cena-fundo img{width:100%;height:auto;display:block}
@media(max-width:760px){.cena-fundo{opacity:.08;right:-24%;width:84vw}}

.problema-grade{position:relative;z-index:1;
  display:grid;grid-template-columns:1fr minmax(0,.95fr);
  gap:var(--e-8);align-items:start}
.problema-texto .h-sec{max-width:15ch}

.problema-virada{margin-top:var(--e-6);padding-left:22px;
  border-left:2px solid var(--gold);
  font-family:var(--ff-display);font-weight:500;font-size:var(--fs-lead);
  line-height:1.4;letter-spacing:var(--ls-titulo);color:var(--silver-hi)}
.problema-virada strong{color:var(--ink);font-weight:700}

/* A cadeia é numerada porque o argumento é de sequência: cada etapa
   funcionou, e mesmo assim o negócio não cresceu. Sem os números, vira
   uma lista de reclamações soltas. */
.problema-cadeia{list-style:none;padding:0;margin:0;counter-reset:passo;
  display:grid;gap:0}
.problema-cadeia li{position:relative;counter-increment:passo;
  padding:22px 0 22px 62px;border-bottom:1px solid var(--line)}
.problema-cadeia li:first-child{border-top:1px solid var(--line)}
.problema-cadeia li::before{content:"0" counter(passo);
  position:absolute;left:0;top:22px;
  font-family:var(--ff-ui);font-size:var(--fs-etiqueta);font-weight:700;
  letter-spacing:.06em;color:var(--gold);opacity:.75}
/* o fio vertical liga um passo ao seguinte e faz a lista virar corrente */
.problema-cadeia li::after{content:"";position:absolute;left:11px;top:44px;
  bottom:-22px;width:1px;background:rgba(212,175,55,.22)}
.problema-cadeia li:last-child::after{content:none}
.problema-cadeia b{display:block;font-family:var(--ff-display);
  font-size:var(--fs-corpo-g);font-weight:600;line-height:var(--lh-titulo);
  letter-spacing:var(--ls-titulo);color:var(--ink);margin-bottom:6px}
.problema-cadeia span{font-size:var(--fs-corpo-p);color:var(--muted);line-height:1.5}


/* ==========================================================================
   4. MÉTODO REIWA
   Três cards lado a lado, um por pilar.

   A seção chegou a virar três faixas empilhadas, em sequência, com o
   número grande na margem. Voltou a ser card a pedido do cliente: a forma
   de card já tinha sido aprovada e lê melhor para quem compara os três
   pilares de relance, que é o que a pessoa faz nesta dobra.
   ========================================================================== */
#metodo .sec-centro{max-width:none}
#metodo .sec-centro .h-sec{max-width:24ch}

.grade-pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-5);
  margin-top:var(--e-8)}

.pilar{position:relative;padding:36px 32px 34px;border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--sup);box-shadow:var(--luz-aresta);
  display:flex;flex-direction:column;overflow:hidden;transition:.4s}
/* fio dourado no topo, que acende inteiro no hover: marca o card como peça
   do mesmo sistema sem precisar de moldura pesada */
.pilar::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--gold-grad);transform:scaleX(.18);transform-origin:0 50%;
  transition:transform .5s cubic-bezier(.4,0,.2,1)}
.pilar:hover{border-color:rgba(212,175,55,.3);transform:translateY(-4px)}
.pilar:hover::before{transform:scaleX(1)}

.pilar-num{font-family:var(--ff-ui);font-size:var(--fs-etiqueta);font-weight:700;
  letter-spacing:.1em;color:var(--gold);opacity:.7;margin-bottom:14px}
.pilar h3{margin-bottom:10px}
.pilar-frase{font-size:var(--fs-corpo);color:var(--silver);line-height:1.5;
  margin-bottom:var(--e-5)}

.pilar ul{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:11px}
.pilar li{position:relative;padding-left:20px;font-size:var(--fs-corpo-p);
  line-height:1.45;color:var(--muted)}
.pilar li::before{content:"";position:absolute;left:0;top:8px;
  width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.6}

/* empurrado para a base com auto: os três cards têm listas de tamanhos
   diferentes, e sem isto as frases de fecho ficariam em alturas diferentes */
.pilar-fecho{margin-top:auto;padding-top:22px;border-top:1px solid var(--line);
  font-size:var(--fs-corpo-p);line-height:1.5;color:var(--muted)}
.pilar-fecho strong{color:var(--gold-hi);font-weight:600}

.metodo-acao{margin-top:var(--e-7);display:flex;justify-content:center}


/* ==========================================================================
   5. NÃO SOMOS AGÊNCIA
   ========================================================================== */
.posic-grade{display:grid;grid-template-columns:1.15fr minmax(0,.85fr);
  gap:var(--e-8);align-items:center}
.posic-texto .h-sec{max-width:14ch}

/* As duas perguntas lado a lado são o argumento inteiro da seção: a delas
   trata o cliente como quem já sabe o que quer, a nossa trata como quem tem
   um problema a resolver. */
.posic-perguntas{display:grid;gap:var(--e-4);margin:32px 0}
.posic-eles,
.posic-nos{padding:20px 24px;border-radius:var(--r-md);font-size:var(--fs-corpo);
  line-height:1.5}
.posic-eles{border:1px solid var(--line);color:var(--muted);
  background:rgba(255,255,255,.02)}
.posic-eles em{color:var(--silver);font-style:italic}
.posic-nos{border:1px solid rgba(212,175,55,.34);color:var(--silver);
  background:rgba(212,175,55,.06)}
.posic-nos strong{display:block;margin-top:4px;font-family:var(--ff-display);
  font-size:var(--fs-lead);font-weight:600;color:var(--ink);
  line-height:1.3;letter-spacing:var(--ls-titulo)}

.posic-final{margin-top:var(--e-5);font-size:var(--fs-corpo);line-height:var(--lh-corpo);
  color:var(--muted)}
.posic-final strong{color:var(--silver-hi);font-weight:600}

/* A assinatura é a única peça da home em --fs-mega. É o bordão da marca, e
   a escala é o argumento: ela não está explicando, está declarando. */
.posic-assinatura{display:flex;flex-direction:column;gap:4px;
  text-align:right;font-family:var(--ff-display)}
.posic-assinatura span{font-size:var(--fs-lead);font-weight:500;
  letter-spacing:var(--ls-titulo);color:var(--muted)}
/* Espaço de palavra maior que o --ws-display padrão, e só aqui.

   Esta é a única linha do site em caixa alta e em corpo de display ao mesmo
   tempo. Caixa alta ocupa mais massa e tem menos variação de altura, então
   precisa de MAIS espaço entre palavras, não menos — e o --ls-mega, que é o
   aperto mais forte da escala, tira espaço justamente dali. Somados, "SOMOS
   REIWA." lia como uma palavra só. */
.posic-assinatura b{font-size:var(--fs-mega);font-weight:700;
  letter-spacing:var(--ls-mega);line-height:.92;word-spacing:.16em}


/* ==========================================================================
   6. CASES
   Os painéis de resultado ficam sobre a faixa clara: eles são prints claros,
   e sobre papel eles param de parecer recortes colados no preto.
   ========================================================================== */
.secao-painel{position:relative}

.cases-acao{margin-top:var(--e-7);display:flex;justify-content:center}


/* ==========================================================================
   7. AVALIAÇÕES DO GOOGLE — carrossel 3D

   As variáveis vêm do JS: --offset é a distância até o card ativo, e o CSS
   traduz em rotação, profundidade e desfoque. Toda a matemática do efeito
   está nestas quatro linhas de transform.

   perspective no palco e não no card: é ela que faz os cards partilharem o
   mesmo ponto de fuga. Aplicada em cada card, cada um teria o seu, e o
   conjunto pareceria recortado em vez de tridimensional.
   ========================================================================== */
/* A seção recorta na horizontal.

   Os cards laterais são absolutos e giram para fora do palco, de propósito:
   é o que dá a profundidade. Só que ninguém recortava essa sobra, e em tela
   estreita ela passava da borda e virava largura de documento.

   overflow-x:clip e não hidden: hidden obrigaria o outro eixo a virar auto,
   e a seção ganharia um contêiner de rolagem próprio, que quebra
   position:sticky de quem estiver dentro. */
#avaliacoes{overflow-x:clip}

.carrossel3d{margin-top:var(--e-8);outline:none}

/* --espalha: quanto o card de trás sai para o lado.

   Era 7rem fixos. Numa tela de 1440 o card lateral ficava quase todo por
   baixo do central: sobrava um metro de preto nas duas pontas e a roda
   parecia estreita dentro da seção. Agora a distância acompanha a largura
   da tela, com piso para o celular e teto para não separar os três a ponto
   de deixarem de ler como um baralho. */
.carrossel3d-palco{position:relative;height:400px;
  --espalha:clamp(7rem,26vw,34rem);
  perspective:1400px;transform-style:preserve-3d;
  display:grid;place-items:center}

.carrossel3d-card{position:absolute;width:min(400px,84vw);
  transform:
    rotateY(calc(var(--offset,0) * 42deg))
    scale(calc(1 - var(--abs-offset,0) * .22))
    translateZ(calc(var(--abs-offset,0) * -16rem))
    translateX(calc(var(--direction,0) * -1 * var(--espalha)));
  filter:blur(calc(var(--abs-offset,0) * 4px));
  transition:transform .55s cubic-bezier(.4,0,.2,1),
             filter .55s ease, opacity .45s ease;
  cursor:pointer}
.carrossel3d-card[style*="pointer-events: auto"]{cursor:default}

/* o card ativo ganha borda e luz; os de trás recuam para o fundo */
.carrossel3d-card .card-avaliacao{
  border-color:rgba(212,175,55,calc(.1 + var(--ativo,0) * .3));
  box-shadow:0 30px 70px rgba(0,0,0,calc(.3 + var(--ativo,0) * .35)), var(--luz-aresta);
  transition:border-color .5s ease, box-shadow .5s ease}
.carrossel3d-card blockquote,
.carrossel3d-card figcaption{
  opacity:calc(.25 + var(--ativo,0) * .75);transition:opacity .5s ease}

/* ---------- o card de avaliação em si ----------
   height:100% para os cinco terem a mesma altura no palco, independentemente
   do tamanho da avaliação, senão a roda gira e o card muda de tamanho. */
.card-avaliacao{padding:30px 28px;border-radius:var(--r-lg);
  border:1px solid var(--line);height:100%;
  display:flex;flex-direction:column;gap:var(--e-4);
  background:var(--sup)}
.card-avaliacao .estrelas{display:flex;gap:3px}
.card-avaliacao .estrelas svg{width:17px;height:17px;color:var(--gold)}
/* flex:1 empurra a assinatura para a base: sem isso, avaliação curta deixa o
   nome flutuando no meio do card */
.card-avaliacao blockquote{font-size:var(--fs-corpo);line-height:var(--lh-corpo);
  color:var(--ink);flex:1}
.card-avaliacao figcaption{display:flex;align-items:center;gap:12px;
  padding-top:var(--e-4);border-top:1px solid var(--line)}
.card-avaliacao .inicial{width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-family:var(--ff-display);font-weight:600;
  font-size:var(--fs-corpo);color:#1a1405;background:var(--gold-grad)}
.card-avaliacao .quem b{display:block;font-family:var(--ff-ui);
  font-size:var(--fs-corpo-p);font-weight:600;line-height:1.3}
.card-avaliacao .quem span{font-family:var(--ff-ui);font-size:var(--fs-etiqueta);
  color:var(--muted)}

.carrossel3d-nav{display:flex;align-items:center;justify-content:center;gap:var(--e-4);
  margin-top:var(--e-7)}
.carrossel3d-medidor{display:flex;flex-direction:column;align-items:center;gap:9px}
.carrossel3d-contador{font-family:var(--ff-ui);font-size:var(--fs-corpo-p);
  letter-spacing:.06em;color:var(--muted);min-width:72px;text-align:center}

/* scaleX e não width: escala é composta na GPU e não repagina a cada quadro */
.carrossel3d-barra{display:block;width:72px;height:2px;border-radius:2px;
  background:rgba(255,255,255,.1);overflow:hidden}
.carrossel3d-barra i{display:block;height:100%;border-radius:2px;
  background:var(--gold-grad);transform:scaleX(0);transform-origin:0 50%}

/* Movimento reduzido: sem rotação, sem profundidade, sem desfoque. */
.carrossel3d.sem-3d .carrossel3d-palco{perspective:none}
.carrossel3d.sem-3d .carrossel3d-card{
  transform:none;filter:none;transition:opacity .2s linear;
  opacity:var(--ativo,0)}

.avaliacoes-apoio{margin-top:var(--e-7);text-align:center;color:var(--muted);
  font-size:var(--fs-corpo-p)}


/* ==========================================================================
   8. SOBRE A REIWA
   ========================================================================== */
.sobre-grade{display:grid;grid-template-columns:1.2fr minmax(0,.8fr);
  gap:var(--e-8);align-items:center}
.sobre-texto .h-sec{max-width:14ch}

/* As cinco palavras em linha própria são o método em miniatura: cada uma é
   uma etapa, e o ponto entre elas dá o compasso da leitura. */
.sobre-ritmo{margin-top:var(--e-5);font-family:var(--ff-display);font-weight:500;
  font-size:var(--fs-lead);line-height:1.5;color:var(--silver-hi);
  letter-spacing:var(--ls-titulo)}

.sobre-acao{margin-top:var(--e-6)}

.sobre-numeros{display:grid;gap:var(--e-5)}
.sobre-num{padding-left:24px;border-left:2px solid rgba(212,175,55,.35)}
.sobre-num b{display:block;font-family:var(--ff-display);font-weight:600;
  font-size:var(--fs-num);letter-spacing:var(--ls-display);line-height:1;
  background-image:var(--gold-grad-texto);background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sobre-num span{display:block;margin-top:8px;font-family:var(--ff-ui);
  font-size:var(--fs-corpo-p);color:var(--muted)}


/* ==========================================================================
   9. FECHAMENTO
   ========================================================================== */
/* O fecho é a única seção da home em medida estreita.

   Ele é texto centralizado, e texto centralizado em 1180px dá linhas de
   quase 90 caracteres no meio da tela: o olho perde o começo da linha
   seguinte e a leitura trava justo onde a pessoa decide. Apertando a
   coluna, a seção também muda de forma em relação a todas as outras, e é
   essa mudança que avisa que a página está terminando. */
.fechamento{text-align:center}
.fechamento .container{max-width:var(--maxw-estreito)}
/* A medida deste título é escolhida pela segunda frase, não pela primeira.

   O título tem um <br> no meio: são duas frases, e a segunda, em ouro, é a
   oferta ("Ou podemos analisar isso juntos."). Medida no navegador, ela
   pede 759px em 50px de corpo, e a coluna estreita oferece 864. Em 20ch a
   frase quebrava e sobrava "juntos." sozinho numa linha inteira, que num
   título centralizado é o defeito que mais salta: a oferta terminava num
   pingo. Em 24ch ela cabe inteira, e a proposta chega de uma vez só.

   text-wrap:balance cuida da primeira frase, que quebra sozinha: ele
   iguala o comprimento das linhas em vez de encher uma e deixar o resto na
   última. Não atravessa o <br>, por isso a medida teve de resolver a
   segunda frase. Navegador sem suporte ignora e volta à quebra normal, que
   é o que já havia. */
.fechamento h2{font-size:var(--fs-d3);font-weight:600;
  line-height:1.1;letter-spacing:var(--ls-display);max-width:24ch;margin:0 auto;
  text-wrap:balance}
.fechamento-texto{margin:var(--e-6) auto 0;max-width:52ch;font-size:var(--fs-corpo-g);
  line-height:var(--lh-corpo);color:var(--muted)}
.fechamento-acao{margin-top:var(--e-7)}

/* Três negações numa linha, a afirmação embaixo.
   A quebra já acontecia sozinha, por falta de largura, e parecia acidente.
   Agora é intenção: o último item ganha a linha inteira porque é o único
   que afirma, e a distância dele para os outros três é o que faz a virada
   de "não é isto" para "é isto" aparecer. */
.fechamento-apoio{list-style:none;padding:0;margin:40px auto 0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px var(--e-6);
  max-width:62ch}
.fechamento-apoio li{position:relative;padding-left:22px;font-size:var(--fs-corpo-p);
  color:var(--muted)}
/* risco em vez de bolinha: a lista é de negações, e o traço lê como "isto
   aqui está cortado da conta" */
.fechamento-apoio li::before{content:"";position:absolute;left:0;top:10px;
  width:12px;height:1px;background:var(--gold);opacity:.6}
.fechamento-apoio li:last-child{flex-basis:100%;display:flex;
  justify-content:center;padding-left:0;margin-top:6px}
.fechamento-apoio li:last-child::before{position:static;align-self:center;
  margin-right:10px;width:18px;opacity:1}
.fechamento-apoio strong{color:var(--gold-hi);font-weight:600}


/* ==========================================================================
   RESPONSIVO DA HOME
   ========================================================================== */
@media(min-width:2300px){
  /* O contêiner sobe para 1680 em 06-responsive.css, e a manchete sobe junto:
     presa no teto de 88px ela parecia miúda com tudo em volta maior.

     Este é o único lugar do site que escapa da escala, e escapa de propósito:
     a escala é calibrada de 390 a 1440, que é onde 99% das visitas estão. De
     2300px para cima é monitor de trabalho, e o teto lá é outro. */
  .hero{padding:170px 0 90px}
  .hero h1{font-size:106px}
  .hero-marca-col{width:min(100%,600px)}
}

@media(max-width:1080px){
  /* quatro colunas com "R$ 1,27" dentro pedem 240px cada; abaixo disso o
     número quebra de linha e deixa de ler como manchete */
  .grade-prova{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-6) var(--e-6)}
  .prova-topo{margin-bottom:var(--e-7)}

  .problema-grade,
  .posic-grade,
  .sobre-grade{grid-template-columns:1fr;gap:var(--e-7)}
  .problema-texto .h-sec,
  .posic-texto .h-sec,
  .sobre-texto .h-sec{max-width:20ch}

  /* A assinatura empilhada vira fecho centrado, não carimbo encostado.

     No desktop ela ocupa uma coluna própria à direita do argumento, e o
     alinhamento à direita é o que a faz ler como carimbo no canto da
     página. Empilhada, essa mesma peça caía colada na margem esquerda logo
     depois de um parágrafo comprido, sem nada separando as duas coisas: em
     vez de fechar o argumento, parecia sobra dele.

     Centrada e com um fio curto em cima, volta a ser o que é: o bordão da
     marca, e o ponto final da seção.

     O corpo também precisou de teto próprio. "SOMOS REIWA." mede 344px em
     46px de corpo, e sobram 335px num celular de 390: quebrava em duas
     linhas por nove pixels, e bordão quebrado ao meio deixa de ser bordão.
     Em 10,5vw com teto de 44px ele cabe inteiro de 360px para cima. */
  .posic-assinatura{text-align:center;align-items:center;
    margin-top:var(--e-6);padding-top:var(--e-6);position:relative}
  .posic-assinatura::before{content:"";position:absolute;top:0;
    left:50%;transform:translateX(-50%);
    width:56px;height:1px;background:var(--gold);opacity:.5}
  .posic-assinatura b{font-size:clamp(30px,10.5vw,44px)}

  .grade-pilares{grid-template-columns:1fr;gap:20px}

  .sobre-numeros{grid-template-columns:repeat(3,1fr);gap:var(--e-5)}
}

/* ---------- celular ---------- */
@media(max-width:900px){
  .hero{min-height:0;padding:104px 0 54px}

  /* A logo vira marca d'água atrás do texto.

     Empilhada, ela era um bloco de 300px entre os botões e os números: a
     dobra virava texto, pausa grande com um desenho no meio, e depois mais
     texto. A marca não estava acompanhando a promessa, estava interrompendo
     ela.

     Atrás, ocupando a dobra inteira, faz o que fazia no desktop: estar
     presente o tempo todo sem disputar a leitura. Continua flutuando e
     continua com a cortina de luz passando por dentro dela; o que muda é a
     opacidade e a camada.

     display:contents na coluna desmancha a caixa que segurava as duas, e
     cada uma vira item da grade por conta própria. É isso que permite a logo
     ir para a camada de trás enquanto a assinatura fica no fluxo.

     minmax(0,1fr) e não 1fr: o mínimo automático de 1fr é o max-content do
     item mais largo, e com o kicker em nowrap isso virava a largura da
     frase inteira. A coluna estourava a tela e levava título, texto e botão
     junto. */
  .hero-grade{grid-template-columns:minmax(0,1fr);gap:var(--e-5);align-items:stretch}
  .hero-marca-col{display:contents}

  .hero-texto{grid-column:1;grid-row:1;position:relative;z-index:1}

  .hero-marca{grid-column:1;grid-row:1;
    align-self:center;justify-self:center;
    width:min(104%,430px);z-index:0;pointer-events:none}
  /* Vira marca d'água atrás do texto. A opacidade fica na peça interna, não
     em .hero-marca, que o reveal.js leva de 0 a 1 na entrada. */
  .hero-cena-flutua{opacity:.14}
  .hero-marca img{border-radius:0;box-shadow:none}

  .hero-marca-assinatura{grid-column:1;grid-row:2;
    text-align:center;align-self:auto;margin-top:4px;padding-right:0}

  /* A barra de vidro vira dois por dois. Em 390px quatro colunas dariam 90px
     por número; e os fios verticais do desktop não cabem num 2x2, então saem:
     aqui quem separa é o espaço. O vidro, a borda e o blur ficam. */
  .hero-numeros{grid-template-columns:repeat(2,1fr);gap:26px 0;margin-top:var(--e-6);
    padding:24px 22px}
  .hero-num{padding:0 12px;border-left:none}
  .hero-num:first-child{padding-left:12px}

  /* Coluna única na prova. Duas colunas em 390px dão 165px por item, e a
     frase embaixo do número quebra em cinco linhas. */
  .grade-prova{grid-template-columns:1fr;gap:var(--e-6)}
  .prova-desc{max-width:none}
  .prova-fecho{flex-direction:column;align-items:flex-start;gap:var(--e-5);
    margin-top:var(--e-7);padding-top:var(--e-6)}
  .prova-fecho .btn{width:100%}

  .problema-grade,
  .posic-grade,
  .sobre-grade{gap:var(--e-6)}
  .sobre-numeros{grid-template-columns:1fr;gap:var(--e-4)}


  .fechamento-apoio{gap:10px var(--e-4)}
}

@media(max-width:760px){
  /* A etiqueta volta a ser texto corrido, com o traço inline na frente.

     Era grid de duas colunas, e ali o separador <i>·</i> conta como item de
     grade: cada ponto caía na coluna do traço e abria uma linha nova. A
     frase virava três linhas com um ponto solto na frente de duas delas.
     Em fluxo inline os pontos voltam a ser pontuação, e a quebra acontece
     onde o texto pede.

     Uma linha só, e por isso o corpo acompanha a largura da tela em vez de
     ser fixo: são 40 caracteres em caixa alta, e num tamanho fixo eles
     cabem em 390px e estouram em 360px. O nowrap é a trava, e o piso de 7px
     é o preço de caber inteira num celular estreito. */
  .hero-kicker{display:block;white-space:nowrap;
    padding:0;border:none;background:none;
    font-size:clamp(7px,2.2vw,10.5px);letter-spacing:.05em;line-height:1.7;
    max-width:none;margin-bottom:var(--e-5)}
  .hero-kicker::before{content:"";display:inline-block;vertical-align:middle;
    width:12px;height:1px;margin-right:6px;
    background:linear-gradient(90deg,var(--gold),transparent)}

  /* Quebra natural em vez das linhas fixas: em 350px cada uma estourava e
     sobrava palavra órfã embaixo.

     O tamanho continua vindo da escala (--fs-d1 vale 38px em 390px de tela);
     o que muda aqui é só a entrelinha, que precisa abrir um pouco quando a
     frase passa a quebrar sozinha e as linhas deixam de ter comprimento
     controlado. */
  .hero h1{max-width:none;line-height:1.08;margin-bottom:var(--e-5);
    text-wrap:balance;opacity:0;transform:translateY(20px)}
  .hero h1 .line{display:inline;overflow:visible}
  .hero h1 .line > span{display:inline;transform:none}

  .hero .lead{margin-bottom:var(--e-5)}
  .hero-acao{flex-direction:column;align-items:stretch}

  /* Uma linha por botão.

     "Quero uma estratégia para minha empresa" tem 38 caracteres e, com o
     ícone e 30px de folga de cada lado, não cabia em 350px: quebrava em
     duas, e botão de duas linhas com o ícone centrado ao lado lê como caixa
     de texto, não como ação. Folga menor e corpo um pouco menor resolvem;
     o nowrap é a trava para telas ainda mais estreitas. */
  .hero-acao .btn{padding:16px;font-size:clamp(10px,3.25vw,13px);gap:8px;
    white-space:nowrap}
  .hero-acao .btn svg{width:16px;height:16px}

  .pilar{padding:30px 26px 28px}
  .problema-cadeia li{padding:18px 0 18px 52px}
}

@media(max-width:700px){
  /* O palco precisa de altura fixa porque os cards são absolutos. Como as
     avaliações são curtas, 440px deixava meia tela de preto em volta. */
  .carrossel3d{margin-top:var(--e-6)}
  .carrossel3d-palco{height:330px}
  .carrossel3d-nav{margin-top:var(--e-5)}
}