/*
Theme Name: Visor
Theme URI: https://grupovisor.com.br
Author: Grupo Visor
Description: Tema institucional da Visor Consultoria Financeira e Gestao Empresarial. Engenharia economica para PMEs. Codificado a mao, sem page builder.
Version: 0.51.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: visor
*/

/* =========================================================
   TOKENS — identidade real da Visor
   Base monocromatica + 1 cor-assinatura (--accent).
   Troque APENAS --accent quando a cor for definida.
   ========================================================= */
:root{
  /* Cor — base */
  --bg:        #ffffff;
  --surface:   #ffffff;
  --ink:       #0d0d0c;   /* preto oficial Visor */
  --ink-2:     #2c2c2c;   /* cinza oficial Visor */
  --muted:     #6b6b6a;   /* texto secundario */
  --line:      #e7e7e6;   /* fio de secao */

  /* Cinzas de preenchimento dos cards. Neutros puxados de leve para o
     quente, para casarem com o preto #0d0d0c da marca em vez de brigar
     com ele. Sao superficie, nao borda: o card se define pelo
     preenchimento, nao por contorno. */
  --superficie-2:  #ededeb;   /* card em repouso */
  --superficie-3:  #e3e3e0;   /* card sob o cursor */

  /* COR-ASSINATURA — Laranja Queimado.
     Substituiu o Verde Sinal #00c271 (texto #00804a, caixa #006b3f).
     O laranja de referencia era o do Banco Inter, #ff7a00; este e mais
     fechado de proposito, para nao ser a cor de outra marca. */
  --accent:      #f25c05;
  /* Os mesmos canais em numero solto. Existe porque gradiente precisa de
     rgba() com transparencia, e nao da para tirar canal de um hex em
     CSS. Sem este token os gradientes guardavam a cor cravada e trocar
     a marca deixava de ser uma linha. */
  --accent-rgb:  242,92,5;
  --accent-ink:  #0d0d0c; /* texto que vai SOBRE o accent */

  /* A mesma cor escurecida para uso como TEXTO sobre fundo claro.
     O laranja cheio rende 2,8:1 sobre branco — reprova em qualquer
     criterio de legibilidade. Este rende 5,2:1, com folga sobre o
     minimo de 4,5, e continua lendo como a cor da marca. */
  --accent-escuro: #bc4704;

  /* Laranja fechado, para CAIXA sobre a faixa da cor. Rende 5,6:1 com
     texto branco. O --profundo-2 e so o estado de hover dessa caixa. */
  --accent-profundo: #b34404;
  --accent-profundo-2: #9a3a03;

  /* Tipografia — marca
     Satoshi no texto e nos titulos comuns; a letra-assinatura
     (--font-lema) entra so nos titulos de secao e no lema do hero.
     Para trocar a familia, mexa nestas duas linhas, no --ajuste-x e na
     linha do enqueue. */
  --font-display: "Satoshi", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body: "Satoshi", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Peso base do texto corrido. 500 e nao 400: a Satoshi tem traco mais
     fino que a Poppins e em 400 o texto perdia presenca na pagina.
     Subir o peso resolve sem mexer em tamanho nem em cor. */
  --peso-corpo: 500;

  /* AJUSTE OPTICO
     "Mesmo tamanho" entre duas fontes nao e o mesmo numero de pixels: o
     que o olho le como tamanho e a altura das minusculas (x-height).
     Medido: Satoshi 0,495 em; Poppins 0,560 em — 13% maior no mesmo
     corpo, e 12% mais larga na linha.
     Este valor E a altura de minuscula da Satoshi, que agora e a fonte
     do site: para ela o ajuste nao muda nada. Ele continua aqui porque
     segura o tamanho se a fonte nao carregar e cair no Arial, e porque
     normaliza qualquer familia que venha a substitui-la. */
  --ajuste-x: 0.495;
  /* Grotesca condensada do lema. Anton e o substituto disponivel no
     Google Fonts; trocar aqui e na linha do enqueue quando a fonte
     oficial da marca chegar. */
  /* LETRA-ASSINATURA. A Bricolage Grotesque e a voz da marca nos
     titulos, como a nuSansDisplay e a do Nubank. Sempre em caixa
     BAIXA e com entreletra apertada — foi assim que ela foi escolhida,
     e em caixa alta ela perde o maneirismo que a torna reconhecivel. */
  --font-lema: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;

  /* Escala de tipo (~1.25) */
  --step--1: 0.85rem;
  --step-0:  1.0625rem;
  --step-1:  1.35rem;
  --step-2:  1.7rem;
  --step-3:  2.3rem;
  --step-4:  3.1rem;

  /* Layout
     O container abre ate 1480px para aproveitar telas largas. O texto
     corrido nao acompanha: `p` e `.lead` tem limite em ch, entao a
     linha continua no comprimento legivel — quem ganha largura sao o
     cabecalho, as grades e as secoes. */
  --container: 1480px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --pad-secao: clamp(3.5rem, 8vw, 6.5rem);

  /* Altura da barra do topo. Mora aqui porque tres coisas dependem dela:
     a propria barra, o deslocamento da coluna presa do FAQ e o
     scroll-padding que impede as ancoras de pararem embaixo do menu. */
  --altura-cabecalho: 98px;

  /* Onde as colunas presas (produtos e FAQ) travam na tela.
     O `max` tem duas pernas com papeis diferentes: a primeira e o piso
     de seguranca, que impede o texto de parar embaixo da barra do topo;
     a segunda, em vh, e a que manda na pratica e faz o texto prender
     ANTES de o card chegar perto do topo — e a troca entre "rola junto"
     e "fica parado" deixa de ser um solavanco.
     O tempo que a coluna passa presa nao muda com este valor: ele so
     adianta o comeco. A duracao e a altura do bloco menos a do texto. */
  --top-preso: max(calc(var(--altura-cabecalho) + 1.5rem), 22vh);

  /* Arredondamento. Tres degraus, do menor elemento para o maior, para
     que o canto cresca junto com a peca em vez de um raio unico parecer
     apertado no card e exagerado no botao. */
  --radius: 12px;        /* botoes, campos */
  --radius-card: 24px;   /* cards */
  --radius-curva: 40px;  /* a curva que monta sobre o hero */
}

/* =========================================================
   BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  /* A barra do topo e sticky: sem isto, toda ancora (#solucoes, #faq)
     parava com o titulo escondido embaixo do menu. Vale para o salto
     nativo e para o scrollIntoView do main.js. */
  scroll-padding-top:calc(var(--altura-cabecalho) + 1rem);
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--step-0); line-height:1.6;
  font-weight:var(--peso-corpo);
  -webkit-font-smoothing:antialiased;
  /* Ver --ajuste-x nos tokens. Forma de valor unico de propsito: tem o
     mesmo significado que `ex-height <n>` e suporte mais antigo.
     Navegador que nao conhece a propriedade ignora e mostra a fonte no
     tamanho nominal — o texto fica um pouco maior, nada quebra. */
  font-size-adjust: var(--ajuste-x);
}

/* A letra-assinatura tem x-height propria. Normaliza-la pela medida da
   Satoshi encolheria os titulos. Cada regra que usa --font-lema ja
   desliga o ajuste; esta aqui cobre o lema do hero. */
.hero__lema{ font-size-adjust:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.1; margin:0 0 .5em; letter-spacing:-.02em; }
h1{ font-size:var(--step-4); }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-1); }
p{ margin:0 0 1rem; max-width:66ch; }
/* Accent e brilhante demais p/ texto pequeno: links em ink+sublinhado; accent fica p/ preenchimentos */
a{ color:var(--ink); text-underline-offset:.15em; }
a:hover{ color:var(--ink-2); }
img{ max-width:100%; height:auto; display:block; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
/* O `position:relative`, o z-index e o `background` NAO sao decoracao.
   O hero e sticky com z-index 0 e fica preso atras da pagina inteira:
   sem os tres, a foto dele aparece atraves de qualquer secao que nao
   tenha cor de fundo propria. z-index sozinho nao basta — elemento
   transparente deixa ver o que esta atras de qualquer jeito.
   Secoes com fundo proprio (.porque, .faq) sobrescrevem o background. */
.section{
  position:relative; z-index:1;
  background:var(--bg);
  padding-block:var(--pad-secao);
}
/* Sem fio entre secoes. O respiro ja separa, e o risco cinza era
   justamente o tipo de detalhe que tirava o ar limpo da pagina. */

/* A secao monta sobre a dobra escura anterior. A curva do topo revela
   uma faixa do hero nos dois cantos — e o encaixe que a referencia usa
   no lugar de um corte reto.
   O recuo negativo come a propria curva, entao o espaco interno ganha
   os mesmos 40px de volta: sem isso o titulo sobe junto e encosta no
   topo. */
.section--curva{
  position:relative; z-index:1;
  margin-top:calc(var(--radius-curva) * -1);
  padding-top:calc(var(--pad-secao) + var(--radius-curva));
  border-radius:var(--radius-curva) var(--radius-curva) 0 0;
  background:var(--bg);
}
.eyebrow{ font-size:var(--step--1); color:var(--muted); font-weight:700; margin-bottom:.75rem; display:flex; align-items:center; gap:.5rem; }
.eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; } /* eco do ponto do logo */
.lead{ font-size:var(--step-1); color:var(--ink-2); max-width:60ch; }

/* Botoes */
.btn{ display:inline-block; font-family:var(--font-display); font-weight:700; font-size:var(--step-0);
  line-height:1; text-decoration:none; padding:.9em 1.5em; border-radius:var(--radius);
  border:1px solid transparent; transition:filter .18s ease, border-color .18s ease, background-color .18s ease; }
.btn--primary{ background:var(--accent); color:var(--accent-ink); }
.btn--primary:hover{ filter:brightness(.92); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--on-dark{ background:var(--accent); color:var(--accent-ink); }

/* =========================================================
   HEADER
   ========================================================= */
/* No topo da pagina: opaco e sem fio embaixo, no mesmo preto do hero.
   Os dois viram um bloco so, sem emenda. Altura fixa: nao encolhe. */
/* No topo a barra e transparente e a foto do hero passa por baixo dela
   inteira — o hero comeca em y=0. Ao sair do topo ela ganha fundo
   (.is-scrolled). Antes era opaca desde o inicio, o que cortava a foto
   nos primeiros 98px. */
.site-header{
  position:sticky; top:0; z-index:50;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .25s ease, border-color .25s ease;
}

/* Depois de rolar: translucido com desfoque, e o fio reaparece para
   separar a barra do conteudo que passa por baixo. */
.site-header.is-scrolled{
  background:rgba(13,13,12,.88);
  border-bottom-color:rgba(255,255,255,.12);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .site-header.is-scrolled{
    backdrop-filter:blur(16px) saturate(1.4);
    -webkit-backdrop-filter:blur(16px) saturate(1.4);
  }
}
/* Sem backdrop-filter nao da para desfocar: fica opaco, senao o texto
   branco cairia sobre o conteudo da pagina. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .site-header.is-scrolled{ background:rgb(13,13,12); }
}
.site-header .container{
  display:flex; align-items:center;
  gap:2.5rem; min-height:var(--altura-cabecalho);
}
/* A navegacao encosta no logo; os dois botoes vao para a direita.
   O `flex:1` faz .site-nav ocupar o vao, e o margin-left:auto das
   acoes empurra so elas ate a borda. */
.site-nav{ flex:1; }
.header-actions{ margin-left:auto; }

/* Os dois botoes do cabecalho sao menores que os do corpo da pagina:
   ali eles competem com a navegacao, nao sao a acao principal da tela. */
.header-actions .btn{ padding:.72em 1.15em; font-size:var(--step--1); }

/* Só os itens de primeiro nível ficam brancos. Os links do submenu
   moram num painel branco proprio — se entrassem aqui, sumiriam. */
.site-header .brand,
.site-header .nav-primary > ul > li > a,
.site-header .submenu-toggle,
.site-header .nav-toggle{ color:#fff; }

/* Verde Sinal no hover. Sobre o preto da barra o contraste e alto
   (~5.9:1), entao aqui ele funciona bem como cor de texto. */
.site-header .nav-primary > ul > li > a:hover,
.site-header .nav-primary > ul > li > a:focus-visible,
.site-header .submenu-toggle:hover,
.site-header .submenu-toggle:focus-visible{ color:var(--accent); }

.site-header .nav-toggle{ border-color:rgba(255,255,255,.28); }
.site-header .nav-toggle__barras span{ background:#fff; }
.site-header :focus-visible{ outline-color:#fff; }

/* O botao vazado herda texto preto e borda clara: sobre a barra escura
   ficaria ilegivel. O botao verde nao precisa de ajuste. */
.site-header .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.38); }
.site-header .btn--ghost:hover{ border-color:#fff; }

/* Com o drawer aberto o cabecalho vira um painel de tela cheia:
   translucido ali deixaria o menu ilegivel sobre o conteudo. */
.site-header.is-open{ background:rgb(13,13,12); }
.site-header.is-open .site-nav{ border-top-color:rgba(255,255,255,.14); }
.site-header.is-open .nav-primary li + li{ border-top-color:rgba(255,255,255,.14); }
.site-header.is-open .nav-primary .sub-menu a{ color:rgba(255,255,255,.72); }
.brand{ font-family:var(--font-display); font-weight:700; font-size:var(--step-1); color:var(--ink);
  text-decoration:none; letter-spacing:-.03em; display:inline-flex; align-items:center; }
.brand .brand-dot{ width:.42em; height:.42em; border-radius:50%; background:var(--accent); margin-left:.18em; margin-top:-.5em; } /* ponto do logo */
.brand img{ max-height:40px; width:auto; }
.brand__marca{ border-radius:8px; margin-right:.6rem; }

/* O logo de Personalizar sai como <a class="custom-logo-link"><img
   class="custom-logo">, FORA de .brand — a regra acima nunca o
   alcancava, e ele aparecia no tamanho original do arquivo.
   Aqui a altura manda e a largura acompanha: pode enviar o arquivo em
   alta resolucao que o navegador reduz sem perder nitidez. */
.custom-logo-link{ display:inline-flex; align-items:center; flex:none; line-height:0; }
.custom-logo{
  height:70px; width:auto;
  /* object-fit:contain garante que, se um logo muito largo esbarrar no
     max-width, ele encolha proporcionalmente em vez de achatar. */
  max-width:280px; object-fit:contain; display:block;
}
@media (max-width:860px){
  .custom-logo{ height:44px; max-width:190px; }
}
.nav-primary ul{ list-style:none; display:flex; gap:2.6rem; margin:0; padding:0; }
.nav-primary a{ color:var(--ink); text-decoration:none; font-size:var(--step-0); }
.header-actions{ display:flex; align-items:center; gap:1rem; }

/* =========================================================
   HERO
   ========================================================= */
/* Fundo preto opaco da marca. O cabecalho e translucido e fica por
   cima: os dois se encaixam sem emenda visivel. */
/* O HERO FICA PRESO NO TOPO e as secoes seguintes sobem por cima dele.
   E o efeito da referencia: medi o PicPay e la o hero e `fixed` dentro
   de um container que reserva a altura. `sticky` da o mesmo resultado
   sem precisar manter essa altura na mao.
   O z-index baixo e o que faz a dobra seguinte passar por cima; ver a
   nota em `.section`, que precisa subir junto. */
.hero{
  position:sticky; top:0; z-index:0;
  overflow:hidden;
  background:rgb(13,13,12); color:#fff;
  /* O hero sobe por tras do cabecalho e comeca em y=0. Sem isso ele
     comecava abaixo da barra e so grudava depois de rolar a altura
     dela — a foto andava nesse trecho, que e o que voce viu. O espaco
     interno devolve a altura da barra para o conteudo nao ficar
     embaixo dela. */
  margin-top:calc(var(--altura-cabecalho) * -1);
  /* O respiro de baixo e generoso de proposito e faz duas coisas: deixa
     a separacao que o bloco precisa da borda branca, e da curso para a
     entrelinha fechar. Com os 6rem anteriores a compressao acontecia em
     56px de rolagem — rapido demais para ser percebida. */
  padding-block:calc(clamp(4rem, 9vw, 7rem) + var(--altura-cabecalho)) clamp(4.5rem, 10vw, 9.5rem);
  /* Ocupa quase a tela toda, mas nao 100vh: a fatia que sobra mostra
     que ha conteudo abaixo, senao o visitante nao rola. */
  min-height:min(86vh, 880px);
  /* O conteudo desce para a base, como na referencia. */
  display:flex; align-items:flex-end;
}
.hero .container{ position:relative; z-index:2; width:100%; }

/* A foto cobre a dobra inteira. */
.hero__media{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* VEU
   Escurece a foto o bastante para o texto branco ler sobre qualquer
   imagem. Mais fechado embaixo e a esquerda, que e onde o texto fica,
   e quase transparente no alto a direita, para a foto respirar. */
.hero__veu{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(13,13,12,.88) 0%, rgba(13,13,12,.58) 38%, rgba(13,13,12,.20) 72%, rgba(13,13,12,.06) 100%),
    /* A ponta da direita volta a escurecer: e onde o cartao de vidro
       fica, e o vidro so e legivel se o que esta atras dele for escuro. */
    linear-gradient(to right, rgba(13,13,12,.70) 0%, rgba(13,13,12,.22) 45%, rgba(13,13,12,.14) 66%, rgba(13,13,12,.40) 100%);
}

/* =========================================================
   TEXTURA DO CANTO SUPERIOR ESQUERDO
   Dois planos em CSS puro, sem imagem: uma malha de pontos e um
   brilho difuso. Ambos atras do conteudo e sem captura de clique.
   ========================================================= */
/* So aparecem quando NAO ha foto: com foto, a imagem e que faz o fundo
   e as duas camadas ficariam escondidas atras dela de qualquer jeito. */
.hero:not(.hero--com-imagem)::before,
.hero:not(.hero--com-imagem)::after{ content:""; position:absolute; pointer-events:none; z-index:0; }

/* Malha de pontos, esmaecendo na diagonal a partir do canto. */
.hero::before{
  top:0; left:0; width:min(62%, 760px); height:min(72%, 640px);
  background-image:radial-gradient(rgba(255,255,255,.15) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(120% 110% at 0% 0%, #000 0%, rgba(0,0,0,.5) 42%, transparent 74%);
  mask-image:radial-gradient(120% 110% at 0% 0%, #000 0%, rgba(0,0,0,.5) 42%, transparent 74%);
}
/* Brilho no tom da marca, discreto: tira o aspecto chapado sem virar
   um degrade colorido. */
.hero::after{
  top:-18%; left:-12%; width:min(72%, 900px); height:min(96%, 900px);
  background:radial-gradient(circle at 30% 30%,
    rgba(var(--accent-rgb),.16) 0%, rgba(var(--accent-rgb),.05) 38%, transparent 68%);
}

/* =========================================================
   LEMA
   ========================================================= */
/* A ENTRELINHA E ANIMADA PELA ROLAGEM (ver main.js): comeca folgada no
   --lema-lh-solto e fecha ate o --lema-lh-firme conforme a dobra branca
   se aproxima. O valor inicial aqui e o folgado, para a pagina abrir
   certa mesmo antes de o script rodar — e para continuar legivel se ele
   nao rodar nunca. */
/* O CORPO E A ENTRELINHA SAO OS DA REFERENCIA. Medido no Nubank:
   112px de corpo numa janela de 1585 (7,07vw), entrelinha de 105,28px
   — razao 0,94 — e entreletra de -1,4px (-0,0125em). O 0,94 e o estado
   FIRME; o solto abre acima dele para a compressao ter o que fechar. */
/* A ALTURA DA FRASE E RESERVADA NA ENTRELINHA SOLTA — e isso que faz o
   movimento parar de tremer.
   O problema: a caixa do lema encolhia junto com a entrelinha. Em janela
   baixa, onde o conteudo e que manda na altura do hero (e nao o
   `min-height`), fechar a entrelinha encurtava o hero em ~77px no meio da
   rolagem. Mudar a altura da pagina enquanto se rola aciona a ancora de
   rolagem do navegador, que corrige o scroll, que realimenta a animacao:
   o ciclo e o tremor. Reservando a altura, a caixa fica do mesmo tamanho
   nos dois estados, a pagina nao muda de altura e o laco nao existe. */
.hero__lema{
  --lema-lh-solto: 1.30;
  --lema-lh-firme: 1.02;
  /* Palpite de quantas linhas a frase ocupa, usado SO enquanto o JS nao
     mediu (e se ele nunca rodar). O numero real varia com a largura: a
     frase cabe em tres linhas na faixa do meio, mas cai para quatro perto
     de 992px e de novo nas telas largas, onde o container trava em 1480
     e a letra continua crescendo. Por isso o valor bom e o medido. */
  --lema-linhas: 3;
  font-family:var(--font-lema); font-weight:800;
  /* O teto nao e estetico, e geometrico: a coluna do texto e o que sobra
     ao lado do cartao de 23rem, e "Os números da sua" tem de caber nela
     inteiro. Medido em 1440px: a coluna da 794px e a linha pede 8,3px de
     largura por pixel de corpo. 6,5vw deixa 17px de folga; 6,6vw deixa 5,
     que some na primeira variacao de fonte. Para a letra crescer de
     verdade, quem precisa ceder largura e o cartao. */
  font-size:var(--lema-corpo);
  line-height:var(--lema-lh, var(--lema-lh-solto));
  letter-spacing:-.0125em;   /* -1,4px em 112px, como na referencia */
  /* A Bricolage tem metrica propria; ver a nota do --ajuste-x. */
  font-size-adjust:none;
  color:#fff; max-width:15ch;
  margin:0;
  /* Sombra discreta: garante a leitura mesmo se a foto que entrar for
     clara justamente atras do texto. */
  text-shadow:0 2px 24px rgba(13,13,12,.45);
}
.hero__lema-destaque{ color:var(--accent); }

/* A caixa reservada so existe onde as quebras manuais valem e a contagem
   de --lema-linhas e confiavel. Abaixo de 62rem a frase quebra sozinha,
   o numero de linhas varia com a largura, e por isso o JS nao anima a
   entrelinha ali (ver main.js). */
@media (min-width:62rem){
  .hero__lema{
    display:flex; align-items:flex-end;
    /* O valor bom e o --lema-altura, que o JS mede na entrelinha solta e
       reescreve a cada mudanca de janela. O calc e so a rede: vale
       enquanto a medida nao chegou, e para sempre se o script nao rodar. */
    min-height:var(--lema-altura, calc(var(--lema-linhas) * var(--lema-lh-solto) * 1em));
  }
  /* Encosta a BASE DA LETRA na base da caixa, nao a base da linha.
     Com entrelinha solta sobra metade do excesso embaixo do texto
     (o "meio-chumbo"), e era essa sobra que deixava o cartao do
     Diagnostico desalinhado da ultima linha da frase. Desce o texto
     exatamente esse tanto; como e `transform`, nao muda a altura da
     caixa — e o calculo da rolagem continua de pe. */
  .hero__lema-linhas{
    display:block;
    transform:translateY(calc((var(--lema-lh, var(--lema-lh-solto)) - 1) * .5em));
  }
}

/* As quebras manuais so valem onde a frase tem largura para tres linhas
   cheias. Abaixo disso o texto quebra sozinho. */
.hero__quebra{ display:none; }
@media (min-width:62rem){ .hero__quebra{ display:inline; } }

/* Lema e cartao na MESMA linha da grade, alinhados pela base: e isso
   que faz o pe do cartao bater com a ultima linha do lema. As redes
   ficam numa faixa propria embaixo, sem puxar o alinhamento. */
.hero__grid{
  /* O corpo do lema mora aqui, e nao no proprio lema, porque o cartao
     precisa dele: o ajuste que encosta o pe do cartao na linha de base
     da frase e uma fracao desse corpo. Um valor so, dois usos. */
  --lema-corpo: clamp(2.5rem, 6.5vw, 6.6rem);

  /* QUANTO O CARTAO SOBE PARA BATER COM A ULTIMA LINHA.
     A caixa do lema termina no fim da caixa-em da letra, que fica abaixo
     da linha de base pela descida da fonte. Medido na Bricolage 800:
     subida 0,930em + descida 0,267em = 1,197em de caixa de conteudo.
     Sobra entre a base da caixa e a linha de base:
       (1,197 - 1)/2 - 0,267 = -0,1685em
     ou seja, a linha de base fica 0,1685em ACIMA do pe da caixa — e e
     esse tanto que o cartao sobe. Constante da fonte: trocar a familia
     do lema pede medir de novo. */
  --lema-pe: calc(var(--lema-corpo) * .1685);

  display:grid; gap:clamp(1.5rem, 3vw, 2.25rem);
  align-items:end;
  grid-template-areas:"lema" "cartao" "redes";
}
.hero__lema{ grid-area:lema; }
.hero__cartao{ grid-area:cartao; }
.hero .redes{ grid-area:redes; }

@media (min-width:62rem){
  /* A margem da direita mira os ~10,5% da largura da tela que o cartao
     da referencia guarda da borda. Medido la: cartao de 411px comecando
     em 63,9% da janela, com 167px de folga numa tela de 1585. */
  .hero__grid{
    grid-template-columns:minmax(0, 1fr) minmax(0, 23rem);
    grid-template-areas:
      "lema  cartao"
      "redes cartao-vazio";
    column-gap:clamp(2rem, 3.5vw, 3.5rem);
    /* `calc` com a calha dentro: `padding-right` sozinho SUBSTITUI a
       calha que vem do .container, e o cartao acabava mais perto da
       borda do que antes, nao mais longe. */
    padding-right:calc(var(--gutter) + clamp(0px, 6vw, 6rem));
    padding-left:calc(var(--gutter) + clamp(0px, 1vw, 1rem));
  }
  /* So lado a lado o alinhamento faz sentido. Empilhado, no celular,
     isto viraria um vao solto embaixo do cartao. */
  .hero__cartao{ margin-bottom:var(--lema-pe); }
}

/* =========================================================
   CARTAO DO DIAGNOSTICO
   ========================================================= */
/* VIDRO ESCURO
   O cartao claro travava em 50% de opacidade: abaixo disso o texto
   escuro reprovava sobre foto escura. Invertendo — vidro escuro com
   texto branco — da para descer a 28% e ver a imagem de verdade
   atraves dele, que era o pedido.
   A conta do pior caso agora e a oposta: foto ESTOURADA de claridade.
   O veu ja escurece essa regiao em torno de 55%, e os 28% do vidro por
   cima levam o composto a ~84 de cinza — branco por cima rende ~7,7:1.
   Por isso a foto do hero precisa ser escura: esta anotado no PHP. */
.hero__cartao{
  color:#fff;
  background:rgba(13,13,12,.28);
  -webkit-backdrop-filter:blur(30px) saturate(150%);
  backdrop-filter:blur(30px) saturate(150%);
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--radius-card);
  padding:clamp(1.5rem, 2.6vw, 2.1rem);
  box-shadow:0 18px 48px rgba(13,13,12,.34);
}
/* Sem desfoque o vidro viraria so um veu sobre a foto crua, e o texto
   ficaria sobre o detalhe da imagem: fecha a opacidade para garantir. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero__cartao{ background:rgba(13,13,12,.72); }
}

.hero__cartao-titulo{
  margin:0 0 1.1rem; max-width:none; font-weight:700;
  /* Menor que antes porque a frase passou de quatro para onze palavras:
     no corpo anterior ela ocupava o cartao inteiro e empurrava o campo
     para fora do alinhamento com a ultima linha do lema. */
  font-size:clamp(1.15rem, 1.45vw, 1.35rem);
  line-height:1.25; letter-spacing:-.02em; color:#fff;
}

.hero__cartao-form{ display:flex; flex-direction:column; gap:.7rem; }

/* Campo claro sobre o vidro escuro, como na referencia: e o unico jeito
   de o texto digitado ficar legivel sem depender da foto que estiver
   atras. Texto no preto da marca, nao em cinza. */
.hero__cartao-email{
  width:100%; margin:0;
  font-family:inherit; font-size:1rem; font-weight:var(--peso-corpo);
  color:var(--ink);
  background:#fff;
  border:1px solid transparent;
  border-radius:calc(var(--radius-card) - 8px);
  padding:.95rem 1.1rem;
}
/* O cinza do marcador e o mais claro que ainda passa de 4,5:1 no branco
   (#595959 da 7,0:1; #767676 da 4,54:1). Fica em 595959 para sobrar
   margem, porque texto de marcador ja e dificil por si. */
.hero__cartao-email::placeholder{ color:#595959; opacity:1; }
.hero__cartao-email:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
  border-color:var(--accent);
}
.hero__cartao-email[aria-invalid="true"]{ border-color:#ffb4a2; }

/* O aviso de erro vive dentro do cartao escuro: tom claro, nao vermelho
   de formulario branco, que sumiria no vidro. */
.hero__cartao-erro{
  margin:0; max-width:none;
  font-size:var(--step--1); line-height:1.35;
  color:#ffc9b8;
}
.hero__cartao-erro[hidden]{ display:none; }

.hero__cartao-botao{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; width:100%;
  font-size:clamp(1rem, 1.2vw, 1.15rem);
  padding-block:1em;
}
.hero__cartao-botao svg{ width:1.15rem; height:1.15rem; flex:none; }

/* =========================================================
   BOTOES DAS REDES SOCIAIS
   Circulos vazados de contorno branco; Verde Sinal no hover.
   ========================================================= */
/* Em linha, abaixo da frase. Eram uma coluna ao lado do texto no hero
   anterior; com a frase ocupando a base, a coluna vertical passou a
   brigar com ela. */
.redes{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.7rem;
}
.rede{
  display:grid; place-items:center;
  width:2.3rem; height:2.3rem; border-radius:50%;
  border:1px solid rgba(255,255,255,.45);
  color:#fff; background:transparent; text-decoration:none;
  transition:color .18s ease, border-color .18s ease, transform .18s ease;
}
.rede__icone{ width:1.02rem; height:1.02rem; display:block; }
.rede:hover, .rede:focus-visible{
  color:var(--accent); border-color:var(--accent); transform:translateY(-2px);
}
.rede:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

@media (max-width:900px){
  /* Em tela estreita a dobra nao precisa ocupar quase a altura toda:
     o cartao do Diagnostico entra logo abaixo da frase. */
  .hero{ min-height:min(78vh, 680px); }
  .hero__lema{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  .rede:hover, .rede:focus-visible{ transform:none; }
}

/* =========================================================
   SEGUNDA DOBRA — as adversidades
   ========================================================= */
/* Verde da marca como TEXTO sobre fundo claro. Ver a nota do token:
   o Verde Sinal puro reprova em contraste aqui. */
.destaque{ color:var(--accent-escuro); }

/* Abertura alinhada a esquerda, como na referencia. O titulo ancora na
   mesma vertical dos cards abaixo: a coluna unica a esquerda e o que
   da a leitura calma: o olho desce sempre pela mesma linha. */
/* Largura em `rem`, nao em `ch`: `ch` resolve contra o tamanho de fonte
   do proprio elemento, entao um limite posto no cabecalho (17px) sairia
   tres vezes mais estreito do que o titulo (52px) sugere. */
.problemas__abertura{ text-align:left; max-width:min(100%, 50rem); }
.problemas__abertura h2{
  max-width:none; margin:0 0 1.1rem;
  font-size:clamp(1.9rem, 4.2vw, 3.25rem);
  line-height:1.02; letter-spacing:-.03em; font-weight:700;
  text-wrap:balance;
}
.problemas__abertura .lead{ max-width:min(100%, 40rem); margin:0; }

/* Abertura da terceira dobra: coluna da esquerda do carrossel. */
.solucoes__abertura{ text-align:left; }
.solucoes__abertura h2{
  max-width:none; margin:0 0 1.1rem;
  /* Teto menor que o da segunda dobra: aqui o titulo divide a linha
     com o carrossel, nao tem a largura da pagina inteira. */
  font-size:clamp(1.8rem, 3.4vw, 2.9rem);
  line-height:1.04; letter-spacing:-.03em; font-weight:700;
}
.solucoes__abertura .lead{ max-width:none; margin:0; }

/* A marca escrita por extenso no corpo do texto. */
.marca-visor{
  font-family:var(--font-display); font-weight:900;
  letter-spacing:.01em; color:var(--ink);
}

/* Cards de preenchimento, sem contorno e sem sombra. O cinza chapado
   e o que sustenta o ar limpo da referencia: a caixa existe porque tem
   cor propria, nao porque foi desenhada em volta. */
.dores{
  list-style:none; margin:3.25rem 0 0; padding:0;
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.dor{
  display:flex; flex-direction:column; text-align:left;
  background:var(--superficie-2);
  border:0; border-radius:var(--radius-card);
  padding:1.6rem;
  min-height:15.5rem;
  transition:background-color .2s ease;
}
.dor:hover{ background:var(--superficie-3); }

/* Icone solto no topo, sem moldura. O `margin-bottom:auto` empurra
   titulo e texto para a base: o bloco de leitura fica na mesma altura
   em todos os cards, independente do tamanho do texto. */
.dor__icone{
  display:block; color:var(--ink);
  margin:0 0 auto;
  transition:color .2s ease;
}
.dor__svg{ width:1.65rem; height:1.65rem; display:block; }
.dor:hover .dor__icone{ color:var(--accent-escuro); }

.dor__titulo{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--step-1); line-height:1.12; letter-spacing:-.015em;
  color:var(--ink); margin:1.75rem 0 .5rem;
}
.dor__texto{
  color:var(--ink-2); margin:0;
  font-size:var(--step-0); line-height:1.45; max-width:none;
}

/* O fecho e a entrada da Visor na historia: e ele que transforma a
   lista de problemas em convite. */
.problemas__fecho{
  margin:2.75rem 0 0;
  font-size:var(--step-1); line-height:1.35; color:var(--ink-2);
  max-width:48ch; text-align:left;
}
.problemas__marca{
  font-family:var(--font-display); font-weight:900;
  letter-spacing:.01em; color:var(--ink);
}

/* =========================================================
   SOLUCOES
   ========================================================= */
/* O trilho sangra ate a borda direita da tela, entao esta dobra nao usa
   .container: a margem da esquerda e reproduzida aqui com `%`, que
   resolve contra a largura util da pagina. Com `vw` o calculo entraria
   a largura da barra de rolagem junto e a coluna da esquerda sairia
   desalinhada das outras secoes. */
.solucoes__wrap{
  padding-left:max(var(--gutter), calc(50% - var(--container) / 2 + var(--gutter)));
  padding-right:0;
  display:grid; gap:clamp(2rem, 4vw, 3.5rem);
  grid-template-columns:1fr;
}
@media (min-width:64rem){
  /* 32rem para o titulo cair em tres linhas, como na referencia. Com a
     coluna mais estreita ele quebrava em quatro e a mancha ficava alta
     demais ao lado dos cards. */
  .solucoes__wrap{
    grid-template-columns:minmax(0, 32rem) minmax(0, 1fr);
    /* `start` e nao `center`: sem ele a coluna de texto nao teria vao
       para percorrer e o sticky abaixo nao faria efeito nenhum. */
    align-items:start;
  }
  /* A coluna de texto acompanha a rolagem enquanto os cards passam, do
     mesmo jeito que a abertura do FAQ. Ver --top-preso nos tokens. */
  .solucoes__abertura{
    position:sticky;
    top:var(--top-preso);
  }
}

/* =========================================================
   CARROSSEL DE PRODUTOS
   Rolagem nativa com encaixe. Sem biblioteca: o trilho ja
   funciona no toque, no trackpad e no Tab entre os cards.
   ========================================================= */
.carrossel{ min-width:0; }

.carrossel__trilho{
  list-style:none; margin:0; padding:0;
  display:flex; gap:1rem;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  /* O ultimo card nao encosta na borda da tela. */
  padding-right:var(--gutter);
  /* Espaco para a sombra e o levantar do hover nao serem cortados. */
  padding-block:.75rem;
  scrollbar-width:none; -ms-overflow-style:none;
}
.carrossel__trilho::-webkit-scrollbar{ display:none; }

.produto{
  flex:0 0 auto;
  width:clamp(16rem, 70vw, 23rem);
  scroll-snap-align:start;
}

.produto__link{
  position:relative; display:block; overflow:hidden;
  /* Mais alto que largo, e mais alto do que era (era 31/40 = 0,775).
     O retrato mais fechado da mais presenca ao card sem roubar largura
     do trilho, que precisa caber mais de um na tela. */
  aspect-ratio:23 / 34;
  border-radius:var(--radius-card);
  background:var(--ink);
  text-decoration:none; color:#fff;
  transition:transform .22s ease, box-shadow .22s ease;
}
.produto__link:hover,
.produto__link:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(13,13,12,.22);
}

/* Foto do produto, quando a pagina tem imagem destacada. */
.produto__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s ease;
}
.produto__link:hover .produto__img{ transform:scale(1.04); }

/* Sem foto: fundo da marca. O --carta gira o angulo e desloca o
   brilho verde, entao os cinco cards nao saem identicos. */
.produto__fundo{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at calc(18% + var(--carta, 0) * 16%) 12%,
      rgba(var(--accent-rgb),.30) 0%, rgba(var(--accent-rgb),.07) 42%, transparent 70%),
    linear-gradient(calc(145deg + var(--carta, 0) * 14deg), #1c1c1a 0%, #0d0d0c 70%);
}
.produto__fundo::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(100% 80% at 80% 0%, #000 0%, transparent 72%);
  mask-image:radial-gradient(100% 80% at 80% 0%, #000 0%, transparent 72%);
}

/* O veu garante o contraste do texto sobre qualquer foto que entre. */
.produto__veu{
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(13,13,12,.92) 0%, rgba(13,13,12,.72) 32%, rgba(13,13,12,.15) 62%, transparent 85%);
}

.produto__texto{
  position:absolute; inset:auto 0 0 0;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:.45rem; padding:1.4rem;
}
.produto__rotulo{
  font-size:var(--step--1); font-weight:700; line-height:1;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent);
}
.produto__titulo{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--step-1); line-height:1.12; letter-spacing:-.02em;
  color:#fff;
}
.produto__resumo{
  font-size:var(--step--1); line-height:1.4;
  color:rgba(255,255,255,.76);
}
.produto__pilula{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:.6rem; padding:.6em 1.1em;
  border-radius:999px; border:1px solid rgba(255,255,255,.42);
  font-family:var(--font-display); font-weight:700;
  font-size:var(--step--1); line-height:1; color:#fff;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.produto__pilula svg{ width:.8rem; height:.8rem; display:block; }
.produto__link:hover .produto__pilula,
.produto__link:focus-visible .produto__pilula{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
}

/* Setas: atalho de mouse, alinhadas a direita como na referencia. */
.carrossel__nav{
  display:flex; justify-content:flex-end; gap:.6rem;
  margin-top:1.25rem; padding-right:var(--gutter);
}
.carrossel__seta{
  display:grid; place-items:center;
  width:2.9rem; height:2.9rem; border-radius:50%;
  background:transparent; color:var(--ink);
  border:1px solid var(--line); cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.carrossel__seta svg{ width:1.15rem; height:1.15rem; display:block; }
.carrossel__seta:hover:not(:disabled){ border-color:var(--ink); background:var(--superficie-2); }
.carrossel__seta:disabled{ opacity:.3; cursor:default; }

@media (prefers-reduced-motion:reduce){
  .produto__link:hover,
  .produto__link:focus-visible{ transform:none; }
  .produto__link:hover .produto__img{ transform:none; }
  .carrossel__trilho{ scroll-behavior:auto; }
}

/* =========================================================
   QUARTA DOBRA — SETORES
   Faixa de paineis de borda a borda. No hover o painel arredonda
   os cantos, que e onde o logo da Visor entra como gesto.
   ========================================================= */
.setores__abertura{
  display:grid; gap:1rem clamp(2rem, 5vw, 4rem);
  margin-bottom:clamp(1.75rem, 3.5vw, 2.5rem);
}
@media (min-width:62rem){
  /* Titulo a esquerda, linha de apoio alinhada a direita — o arranjo
     de abertura da referencia. */
  .setores__abertura{ grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); align-items:start; }
  .setores__apoio{ text-align:right; justify-self:end; }
}
.setores__abertura h2{
  margin:0; max-width:18ch;
  font-size:clamp(1.9rem, 4.2vw, 3.25rem);
  line-height:1.02; letter-spacing:-.03em; font-weight:700;
}
.setores__apoio{ margin:0; color:var(--ink-2); font-size:var(--step-0); max-width:28ch; }

/* ---------- barra de abas ---------- */
.setores__abas{
  display:flex; flex-wrap:wrap; gap:.25rem;
  padding:.35rem; margin-bottom:clamp(1.5rem, 3vw, 2.25rem);
  background:var(--superficie-2); border-radius:999px;
  width:fit-content; max-width:100%;
}
.setores__aba{
  font:inherit; font-family:var(--font-display); font-weight:700;
  font-size:var(--step--1); line-height:1;
  padding:.85em 1.4em; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--ink-2); border:0;
  transition:background-color .2s ease, color .2s ease;
}
.setores__aba:hover{ color:var(--ink); }
.setores__aba.is-ativa{
  background:var(--surface); color:var(--accent-escuro);
  box-shadow:0 1px 3px rgba(13,13,12,.10);
}
.setores__aba:focus-visible{ outline:2px solid var(--accent-escuro); outline-offset:2px; }

/* ---------- palco ---------- */
/* O espaco de cima abre lugar para a borda do cartao que recuou. */
.setores__palco{ position:relative; padding-top:1.9rem; }

/* PILHA DE CARTOES
   Com o JS ligado os paineis dividem a MESMA celula de grade: ficam um
   sobre o outro e a altura do palco e a do painel mais alto. Nao ha
   posicionamento absoluto nem altura fixa, entao um setor com texto
   maior nao estoura nada.
   Tres estados:
     repouso  — esperando embaixo, invisivel;
     .esta-atras — recuou para o fundo, so a borda de cima aparece;
     .esta-ativo — na frente, no lugar.
   Trocar de aba move o ativo para `atras` e sobe o novo do repouso. */
.setores__palco.is-abas{ display:grid; }
.setores__palco.is-abas .setor-painel{
  grid-area:1 / 1;
  transform:translateY(2.6rem); opacity:0; z-index:1;
  transition:transform .55s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
  will-change:transform;
}
.setores__palco.is-abas .setor-painel.esta-atras{
  transform:translateY(-1.9rem) scale(.955); opacity:1; z-index:2;
}
.setores__palco.is-abas .setor-painel.esta-ativo{
  transform:none; opacity:1; z-index:3;
}

/* A faixa verde da referencia e o cartao de tras aparecendo. Como o
   cartao recuado fica todo coberto pelo da frente menos a borda de
   cima, pintar ele inteiro de verde deixa exatamente essa borda verde
   — e esconde o conteudo que nao deve vazar na fresta. */
.setores__palco.is-abas .setor-painel::after{
  content:""; position:absolute; inset:0; z-index:5;
  background:var(--accent); border-radius:inherit;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
}
.setores__palco.is-abas .setor-painel.esta-atras::after{ opacity:1; }

/* Na montagem os paineis entram direto no estado final, sem deslizar. */
.setores__palco.sem-transicao .setor-painel,
.setores__palco.sem-transicao .setor-painel::after{ transition:none; }

@media (prefers-reduced-motion:reduce){
  .setores__palco.is-abas .setor-painel,
  .setores__palco.is-abas .setor-painel::after{ transition:none; }
}

.setor-painel{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr;
  background:var(--ink); color:#fff;
  border-radius:var(--radius-card); overflow:hidden;
}
/* Sem JS os cinco paineis ficam visiveis, um abaixo do outro.
   Com as abas ligadas so um aparece, e o espaco entre eles some —
   senao o painel ativo herdaria a margem dos escondidos antes dele. */
.setor-painel + .setor-painel{ margin-top:1rem; }
.setores__palco.is-abas .setor-painel + .setor-painel{ margin-top:0; }
.setor-painel:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* A FOTO COBRE O CARTAO INTEIRO e o texto fica por cima dela.
   Antes o cartao era partido ao meio — texto numa metade, foto na
   outra. Agora as duas camadas ocupam a mesma celula da grade, e o
   empilhamento decide o que fica na frente: foto (0), veu (1),
   texto (2). */
.setor-painel{ display:grid; grid-template-columns:1fr; }
.setor-painel > *{ grid-area:1 / 1; }

/* NO CELULAR O CARTAO E 4:5, EM PE. Nao e capricho: e a proporcao das
   fotos de celular. Deixado a cargo do texto, o cartao saia 335x294 —
   deitado — e uma foto em pe entraria cortada em cima e embaixo. Travar
   aqui faz a caixa e o arquivo terem a mesma forma. */
@media (max-width:47.99rem){
  .setor-painel{ aspect-ratio:4 / 5; }
}

.setor-painel__texto{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start;
  justify-content:flex-end; gap:.6rem;
  padding:clamp(1.75rem, 3.5vw, 3rem);
  min-height:clamp(16rem, 34vw, 26rem);
  /* No computador o texto ocupa pouco mais da metade: o resto da foto
     precisa respirar. No celular ele usa a largura toda. */
  max-width:100%;
}
@media (min-width:62rem){
  .setor-painel__texto{ max-width:58%; }
}

/* O VEU. Mais fechado a esquerda e embaixo, que e onde o texto fica, e
   quase transparente no alto a direita. Mesma logica do hero: garante o
   contraste sem depender da foto que entrar. */
.setor-painel__veu{
  position:relative; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(13,13,12,.90) 0%, rgba(13,13,12,.62) 42%, rgba(13,13,12,.22) 74%, rgba(13,13,12,.06) 100%),
    linear-gradient(to right, rgba(13,13,12,.78) 0%, rgba(13,13,12,.40) 46%, rgba(13,13,12,.12) 78%, rgba(13,13,12,.04) 100%);
}
.setor-painel__rotulo{
  margin:0; font-size:var(--step--1); font-weight:700; line-height:1;
  letter-spacing:.07em; text-transform:uppercase; color:var(--accent);
}
.setor-painel__titulo{
  margin:0; color:#fff;
  font-size:clamp(1.6rem, 3vw, 2.4rem); line-height:1.08;
  letter-spacing:-.025em; font-weight:700;
}
.setor-painel__resumo{
  /* .76 bastava sobre o preto chapado de antes. Agora ha uma FOTO
     atras: .88 devolve a margem que o veu sozinho nao garante quando a
     imagem for clara justamente nesse canto. */
  margin:0 0 .6rem; color:rgba(255,255,255,.88);
  font-size:var(--step-0); max-width:34ch;
}

/* A camada da foto: ocupa a celula inteira, atras de tudo. O
   min-height saiu — quem dá altura ao cartao agora e o texto, senao as
   duas camadas brigariam pelo tamanho. */
.setor-painel__midia{ position:relative; z-index:0; }
.setor-painel__midia picture{ display:block; height:100%; }
.setor-painel__img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Sem foto: fundo da marca, variando de painel para painel. */
.setor-painel__fundo{
  position:absolute; inset:0;
  background:
    radial-gradient(110% 80% at calc(24% + var(--carta, 0) * 14%) 14%,
      rgba(var(--accent-rgb),.30) 0%, rgba(var(--accent-rgb),.07) 46%, transparent 74%),
    linear-gradient(calc(155deg + var(--carta, 0) * 12deg),
      hsl(70 6% calc(15% + var(--carta, 0) * 3.5%)) 0%, #0d0d0c 80%);
}

@media (max-width:61.99rem){
  /* A foto vem primeiro na leitura empilhada. */
  .setor-painel__texto{ order:2; min-height:0; }
  .setor-painel__midia{ order:1; }
  .setores__palco::before{ height:4rem; }
}

@media (max-width:48rem){
  /* Em tela estreita a barra correria em duas linhas dentro da pilula,
     o que desmancha a forma. Rola na horizontal e continua uma linha. */
  .setores__abas{
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    width:100%; scrollbar-width:none; -ms-overflow-style:none;
  }
  .setores__abas::-webkit-scrollbar{ display:none; }
  .setores__aba{ flex:0 0 auto; }
}

/* =========================================================
   QUINTA DOBRA — PROVA SOCIAL
   Titulo a esquerda, mapa a direita com os depoimentos
   espalhados por cima.
   ========================================================= */
.prova__grade{ display:grid; gap:clamp(2rem, 4vw, 3.5rem); }
@media (min-width:64rem){
  .prova__grade{ grid-template-columns:minmax(0, 24rem) minmax(0, 1fr); align-items:center; }
}
.prova__abertura h2{
  margin:0 0 1rem; max-width:16ch;
  font-size:clamp(1.9rem, 4vw, 3rem);
  line-height:1.02; letter-spacing:-.03em; font-weight:700;
}
.prova__abertura .lead{ margin:0; max-width:34ch; }

/* O mapa so existe no desktop. No celular os baloes viram lista. */
.prova__mapa{ position:relative; }
.prova__silhueta{ display:none; }

/* Preenchimento na cor do fundo e so o contorno a vista, como na
   referencia. As cores nao estao no arquivo do mapa: ficam aqui, para
   o desenho acompanhar os tokens do tema. */
.mapa-br{ width:100%; height:100%; display:block; }
.mapa-br path{
  fill:var(--bg);
  stroke:var(--line);
  stroke-width:1.6;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.prova__baloes{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1rem;
}

/* ---------- balao ---------- */
.balao__caixa{
  margin:0; padding:1.25rem 1.35rem;
  border-radius:var(--radius-card);
  background:var(--superficie-2); color:var(--ink);
  display:flex; flex-direction:column; gap:.6rem;
}
.balao__aspas{
  font-family:var(--font-display); font-weight:900;
  font-size:2.6rem; line-height:.55; color:var(--accent-escuro);
  font-size-adjust:none;
}
.balao__texto{ margin:0; }
.balao__texto p{ margin:0; font-size:var(--step--1); line-height:1.45; max-width:none; }
.balao__autor{ display:flex; flex-direction:column; gap:.1rem; font-size:var(--step--1); }
.balao__autor strong{ font-weight:700; }
.balao__autor span{ color:var(--muted); }

/* Os dois tons que quebram a repeticao da grade. */
.balao--escuro .balao__caixa{ background:var(--ink); color:#fff; }
.balao--escuro .balao__aspas{ color:var(--accent); }
.balao--escuro .balao__autor span{ color:rgba(255,255,255,.62); }

.balao--marca .balao__caixa{ background:var(--accent); color:var(--accent-ink); }
.balao--marca .balao__aspas{ color:var(--ink); }
.balao--marca .balao__autor span{ color:rgba(13,13,12,.68); }

@media (min-width:64rem){
  /* A proporcao e a do proprio mapa (1000 x 1050). Com ela a area do
     container coincide com o desenho, entao as coordenadas --x e --y
     dos baloes caem sobre o ponto certo do pais. */
  .prova__mapa{ aspect-ratio:1000 / 1050; }
  .prova__silhueta{
    display:block; position:absolute; inset:0;
    pointer-events:none;
  }
  .prova__silhueta-img{
    width:100%; height:100%; object-fit:contain; display:block;
  }

  .prova__baloes{ display:block; position:absolute; inset:0; }
  .balao{
    position:absolute; left:var(--x); top:var(--y);
    width:min(17rem, 42%);
  }
  .balao__caixa{
    box-shadow:0 10px 30px rgba(13,13,12,.10);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .balao:hover .balao__caixa{
    transform:translateY(-4px);
    box-shadow:0 18px 44px rgba(13,13,12,.16);
  }
  /* Quem esta sob o cursor vem para a frente dos vizinhos. */
  .balao:hover,
  .balao:focus-within{ z-index:2; }
}

/* OS DOIS BALOES DE COR SURGEM AO ENTRAR NA TELA.
   Quem esconde e o JS, nunca o servidor: a classe `--anima` e posta
   por script. Sem ele os seis aparecem normalmente, em vez de ficarem
   invisiveis para sempre esperando um observador que nunca rodou. */
.balao--anima{
  opacity:0;
  transform:translateY(1.75rem) scale(.97);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.balao--anima.esta-visivel{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .balao:hover .balao__caixa{ transform:none; }
  .balao--anima{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   SEXTA DOBRA — POR QUE ESCOLHER A VISOR
   Faixa no verde da marca com quatro caixas em verde fechado.
   Estrutura provisoria, aguardando o formato final.
   ========================================================= */
/* Texto preto sobre o verde, nao branco: o Verde Sinal e claro demais
   e branco sobre ele rende 1,9:1, ilegivel. E tambem o que manda o
   manual da marca (--accent-ink). */
.porque{ background:var(--accent); color:var(--accent-ink); }

.porque__abertura{
  display:grid; gap:1.25rem clamp(2rem, 5vw, 4rem);
  margin-bottom:clamp(2.25rem, 5vw, 3.5rem);
}
@media (min-width:62rem){
  .porque__abertura{ grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); align-items:start; }
}
.porque__abertura h2{
  margin:0; max-width:14ch;
  font-size:clamp(2rem, 4.6vw, 3.5rem);
  line-height:1.02; letter-spacing:-.03em; font-weight:700;
}
.porque__apoio{ display:flex; flex-direction:column; align-items:flex-start; gap:1.5rem; }
.porque__apoio p{
  margin:0; max-width:44ch;
  font-size:var(--step-0); line-height:1.5;
  color:rgba(13,13,12,.80);
}

/* Botao vazado para fundo claro: o contorno e o proprio preto da marca. */
.btn--contorno-escuro{
  background:transparent; color:var(--accent-ink);
  border-color:rgba(13,13,12,.45);
}
.btn--contorno-escuro:hover{ border-color:var(--accent-ink); background:rgba(13,13,12,.06); }

.porque__caixas{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.motivo__caixa{
  display:flex; flex-direction:column; gap:.6rem;
  height:100%; min-height:12rem;
  padding:1.5rem;
  background:var(--accent-profundo); color:#fff;
  border-radius:var(--radius-card);
  text-decoration:none;
  transition:background-color .2s ease, transform .2s ease;
}
/* So a caixa que leva a algum lugar reage ao cursor. */
a.motivo__caixa:hover,
a.motivo__caixa:focus-visible{
  background:var(--accent-profundo-2); transform:translateY(-4px);
}
.motivo__titulo{
  margin:0; color:#fff;
  font-size:var(--step-1); line-height:1.12;
  letter-spacing:-.02em; font-weight:700;
}
/* .85 e nao .78: em .78 o contraste caia para 4,69:1, logo acima do
   minimo de 4,5 — margem curta demais para sobreviver a um ajuste de
   cor depois. Em .85 sobe para perto de 5,4:1. */
.motivo__texto{
  margin:0; font-size:var(--step--1); line-height:1.45;
  color:rgba(255,255,255,.85); max-width:none;
}
.motivo__seta{
  margin-top:auto; display:grid; place-items:center;
  width:2.4rem; height:2.4rem; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff;
  transition:background-color .2s ease;
}
.motivo__seta svg{ width:1.05rem; height:1.05rem; display:block; }
a.motivo__caixa:hover .motivo__seta{ background:rgba(255,255,255,.26); }

@media (prefers-reduced-motion:reduce){
  a.motivo__caixa:hover,
  a.motivo__caixa:focus-visible{ transform:none; }
}

/* =========================================================
   SETIMA DOBRA — PERGUNTAS FREQUENTES
   Coluna da esquerda presa, lista passando por ela. O efeito
   da referencia vem do sticky, nao de animacao de entrada.
   ========================================================= */
.faq{ background:var(--superficie-2); }

.faq__grade{ display:grid; gap:clamp(2rem, 4vw, 3.5rem); }
@media (min-width:64rem){
  .faq__grade{ grid-template-columns:minmax(0, 26rem) minmax(0, 1fr); align-items:start; }
  .faq__abertura{
    position:sticky;
    /* Mesmo ponto de fixacao da coluna de produtos. Ver --top-preso. */
    top:var(--top-preso);
  }
}

.faq__abertura h2{
  margin:0 0 1rem;
  font-family:var(--font-lema); font-weight:800;
  font-size:clamp(1.9rem, 3.8vw, 3rem);
  line-height:1.02; letter-spacing:-.035em;
  color:var(--accent-escuro);
  font-size-adjust:none;
}
.faq__apoio{ margin:0 0 1.75rem; color:var(--ink-2); max-width:34ch; }

.faq__lista{ list-style:none; margin:0; padding:0; }
.faq__item + .faq__item{ border-top:1px solid var(--line); }

.faq__pergunta{
  display:flex; align-items:flex-start; gap:1.5rem;
  padding:1.4rem 0; cursor:pointer;
  font-size:var(--step-0); font-weight:500; line-height:1.35;
  /* Tira o triangulo que o navegador poe sozinho. */
  list-style:none;
}
.faq__pergunta::-webkit-details-marker{ display:none; }
.faq__pergunta:hover{ color:var(--accent-escuro); }
.faq__detalhe:focus-within .faq__pergunta{ color:var(--accent-escuro); }
.faq__pergunta:focus-visible{ outline:2px solid var(--accent-escuro); outline-offset:3px; border-radius:4px; }
.faq__texto-pergunta{ flex:1; min-width:0; }

/* O sinal de + desenhado em CSS. Gira 45 graus e vira X ao abrir. */
.faq__sinal{
  position:relative; flex:none;
  width:1.1rem; height:1.1rem; margin-top:.2rem;
  transition:transform .25s ease;
}
.faq__sinal::before,
.faq__sinal::after{
  content:""; position:absolute; inset:0; margin:auto;
  background:currentColor;
}
.faq__sinal::before{ width:100%; height:1.5px; }
.faq__sinal::after{ width:1.5px; height:100%; }
.faq__detalhe[open] .faq__sinal{ transform:rotate(45deg); }

.faq__resposta{ padding:0 0 1.5rem; max-width:62ch; }
.faq__resposta p{ margin:0; color:var(--ink-2); font-size:var(--step-0); line-height:1.55; }

/* A altura do bloco nao anima (o <details> nativo nao faz isso), mas o
   texto entra suave em vez de piscar. */
@keyframes faq-abre{
  from{ opacity:0; transform:translateY(-.35rem); }
  to  { opacity:1; transform:none; }
}
.faq__detalhe[open] .faq__resposta{ animation:faq-abre .25s ease both; }

@media (prefers-reduced-motion:reduce){
  .faq__sinal{ transition:none; }
  .faq__detalhe[open] .faq__resposta{ animation:none; }
}

/* =========================================================
   OITAVA DOBRA — ACERVO DE CONTEUDO
   Esquerda: cursos em pilha + podcast. Direita: ebook,
   artigo e newsletter.
   ========================================================= */
.conteudo__abertura{ margin-bottom:clamp(2rem, 4vw, 3rem); max-width:52rem; }
.conteudo__abertura h2{
  margin:0 0 1rem;
  font-family:var(--font-lema); font-weight:800;
  font-size:clamp(1.9rem, 4.2vw, 3rem);
  line-height:1.02; letter-spacing:-.035em;
  color:var(--accent-escuro);
  font-size-adjust:none;
}
.conteudo__abertura .lead{ margin:0; max-width:52ch; }

.conteudo__grade{ display:grid; gap:1rem; }
@media (min-width:64rem){
  .conteudo__grade{ grid-template-columns:1.15fr 1fr; align-items:stretch; }
}
.conteudo__coluna{ display:grid; gap:1rem; min-width:0; }
@media (min-width:64rem){
  /* Os cursos ficam um pouco mais altos que o podcast. */
  .conteudo__coluna--esq{ grid-template-rows:1.1fr 1fr; }
}

/* ---------- destaque 1: cursos em pilha ---------- */
/* Mesma mecanica da dobra de setores. As classes sao proprias porque o
   componente e outro (tamanho, cor, gatilho), mas a ideia e a mesma:
   tres estados e a borda verde de quem recuou. */
.cursos{ display:flex; flex-direction:column; min-width:0; min-height:17rem; }
.cursos__palco{
  position:relative; flex:1; min-height:0;
  padding-top:1.5rem;   /* lugar para a borda do card de tras */
}
/* Sem JS os tres aparecem empilhados, legiveis. Com JS viram pilha —
   ver a PILHA GENERICA mais abaixo, que vale para cursos e etapas. */
.curso + .curso{ margin-top:1rem; }

.curso{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start;
  background:var(--superficie-2); color:var(--ink);
  border-radius:var(--radius-card); padding:1.5rem;
}

.curso__rotulo{
  margin:0; font-size:var(--step--1); font-weight:700; line-height:1;
  letter-spacing:.07em; text-transform:uppercase; color:var(--accent-escuro);
}
.curso__titulo{
  margin:.5rem 0 0; font-size:var(--step-1); font-weight:700;
  letter-spacing:-.02em; line-height:1.14;
}
.curso__texto{
  margin:.5rem 0 0; font-size:var(--step--1); line-height:1.45;
  color:var(--ink-2); max-width:none;
}

.cursos__nav{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:.85rem; }
.cursos__seta{
  display:grid; place-items:center; cursor:pointer;
  width:2.6rem; height:2.6rem; border-radius:50%;
  background:transparent; color:var(--ink); border:1px solid var(--line);
  transition:background-color .18s ease, border-color .18s ease;
}
.cursos__seta:hover{ background:var(--superficie-2); border-color:var(--ink); }
.cursos__seta svg{ width:1.05rem; height:1.05rem; display:block; }

/* ---------- destaque 2: podcast ---------- */
.podcast{
  position:relative; overflow:hidden; min-width:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:13rem; padding:1.6rem;
  border-radius:var(--radius-card); color:#fff;
  background:
    radial-gradient(90% 75% at 78% 16%, rgba(var(--accent-rgb),.26) 0%, rgba(var(--accent-rgb),.06) 46%, transparent 74%),
    linear-gradient(155deg, #262620 0%, #0d0d0c 78%);
  transition:transform .2s ease;
}
.podcast:hover{ transform:translateY(-4px); }
.podcast__play{
  position:absolute; top:1.6rem; left:1.6rem;
  width:3rem; height:3rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink);
}
.podcast__play svg{ width:1.1rem; height:1.1rem; margin-left:2px; display:block; }
.podcast__rotulo{
  margin:0 0 .5rem; font-size:var(--step--1); font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--accent);
}
.podcast__titulo{
  margin:0; color:#fff; font-size:clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight:700; letter-spacing:-.025em; line-height:1.1;
}
.podcast__texto{
  margin:.5rem 0 0; font-size:var(--step--1);
  color:rgba(255,255,255,.76); max-width:46ch;
}
.podcast .pilula{ background:rgba(255,255,255,.14); color:#fff; }
.podcast:hover .pilula{ background:var(--accent); color:var(--accent-ink); }

/* ---------- cards da coluna direita ---------- */
.acervo{
  display:flex; flex-direction:column; min-width:0;
  background:var(--superficie-2); border-radius:var(--radius-card);
  padding:1rem 1rem 1.25rem;
  transition:background-color .2s ease, transform .2s ease;
}
.acervo:hover{ background:var(--superficie-3); transform:translateY(-4px); }
.acervo__media{
  aspect-ratio:16 / 7; border-radius:16px; margin-bottom:.9rem;
  background:
    radial-gradient(120% 90% at calc(22% + var(--i, 0) * 16%) 14%,
      rgba(var(--accent-rgb),.30) 0%, rgba(var(--accent-rgb),.07) 44%, transparent 72%),
    linear-gradient(calc(150deg + var(--i, 0) * 14deg), #262620 0%, #0d0d0c 76%);
}
.acervo__rotulo{
  margin:0 0 .45rem; font-size:var(--step--1); font-weight:700; line-height:1;
  letter-spacing:.07em; text-transform:uppercase; color:var(--accent-escuro);
}
.acervo__titulo{
  margin:0; font-size:var(--step-1); font-weight:700;
  letter-spacing:-.02em; line-height:1.14;
}
.acervo__texto{
  margin:.45rem 0 0; font-size:var(--step--1); line-height:1.45;
  color:var(--ink-2); max-width:none;
}

/* Botao comum dos cards desta dobra. */
.pilula{
  align-self:flex-start; margin-top:auto;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.65em 1.15em; border-radius:999px;
  background:var(--bg); color:var(--ink); text-decoration:none;
  font-family:var(--font-display); font-weight:700;
  font-size:var(--step--1); line-height:1;
  transition:background-color .2s ease, color .2s ease;
}
/* O card de curso estica para a altura da linha e sobra espaco: o
   `margin-top:auto` manda o botao para a base e o card deixa de
   parecer oco. Ja o card do acervo e do podcast tem altura do proprio
   conteudo — ali o auto so afastaria o botao do texto. */
.curso .pilula{ margin-top:auto; }
.acervo .pilula,
.podcast .pilula{ margin-top:1rem; }
.acervo:hover .pilula,
.curso:hover .pilula{ background:var(--accent); }

/* ---------- newsletter ---------- */
.news{
  display:flex; flex-direction:column; justify-content:center;
  background:var(--ink); color:#fff; border-radius:var(--radius-card);
  padding:1.5rem; min-width:0;
}
.news__titulo{
  margin:0; color:#fff; font-size:var(--step-1);
  font-weight:700; letter-spacing:-.02em;
}
.news__texto{
  margin:.4rem 0 0; font-size:var(--step--1);
  color:rgba(255,255,255,.76); max-width:none;
}
.news__form{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.news__form input[type="email"]{
  flex:1 1 9rem; min-width:0; font:inherit; font-size:var(--step--1);
  padding:.7em .9em; border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08); color:#fff;
}
.news__form input[type="email"]::placeholder{ color:rgba(255,255,255,.55); }
.news__form button{
  font:inherit; font-family:var(--font-display); font-weight:700;
  font-size:var(--step--1); line-height:1; cursor:pointer;
  padding:.75em 1.2em; border-radius:999px; border:0;
  background:var(--accent); color:var(--accent-ink);
}
.news__form button:disabled{ opacity:.6; cursor:default; }
.news__aviso{
  flex:1 1 100%; margin:.25rem 0 0;
  font-size:var(--step--1); color:rgba(255,255,255,.88);
}
.news__aviso.is-erro{ color:#ffb4a8; }
/* A armadilha de robo sai da tela sem sair do formulario. */
.visor-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

@media (prefers-reduced-motion:reduce){
  .podcast:hover,
  .acervo:hover{ transform:none; }
  .cursos__palco.is-pilha .curso{ transition:none; }
}

/* =========================================================
   FAIXA DE FECHO — logo acima do rodape
   Monta sobre a secao clara com a mesma curva da segunda
   dobra e emenda no rodape, que ja e escuro.
   ========================================================= */
.fecho{
  position:relative; z-index:1;
  margin-top:calc(var(--radius-curva) * -1);
  border-radius:var(--radius-curva) var(--radius-curva) 0 0;
  background:var(--ink); color:#fff;
  padding-block:calc(var(--pad-secao) + var(--radius-curva)) var(--pad-secao);
}
/* Na letra-assinatura, como o lema do hero e os titulos de secao. */
.fecho__frase{
  margin:0; max-width:20ch;
  font-family:var(--font-lema); font-weight:800;
  font-size:clamp(1.9rem, 4.6vw, 3.6rem);
  line-height:1.04; letter-spacing:-.03em;
  color:#fff; text-wrap:balance;
  font-size-adjust:none;
}

/* =========================================================
   PLATAFORMA — caixa escura no fim da secao
   ========================================================= */
.plataforma{
  margin-top:clamp(3rem, 6vw, 5rem);
  background:rgb(13,13,12); color:#fff;
  border-radius:calc(var(--radius) * 2);
  padding:clamp(2.25rem, 5vw, 4rem);
  position:relative; overflow:hidden;
}
/* Mesmo brilho da marca usado no hero, para as duas pecas escuras da
   pagina falarem a mesma lingua. */
.plataforma::after{
  content:""; position:absolute; pointer-events:none;
  top:-30%; right:-10%; width:min(60%, 700px); height:min(160%, 700px);
  background:radial-gradient(circle at 60% 40%,
    rgba(var(--accent-rgb),.18) 0%, rgba(var(--accent-rgb),.05) 40%, transparent 70%);
}
.plataforma__texto{ position:relative; z-index:1; max-width:46rem; }
.plataforma__eyebrow{
  font-size:var(--step--1); font-weight:700; color:var(--accent);
  margin:0 0 .75rem;
}
.plataforma__titulo{
  font-size:clamp(1.7rem, 3.4vw, var(--step-3));
  color:#fff; margin:0 0 1rem; max-width:22ch;
}
.plataforma__lead{
  font-size:var(--step-1); color:rgba(255,255,255,.76);
  margin:0 0 2rem; max-width:52ch;
}

@media (prefers-reduced-motion:reduce){
  .solucao:hover{ transform:none; }
  .solucao:hover .solucao__seta{ transform:none; }
}

/* =========================================================
   DIAGNOSTICO (CTA de destaque) — preto + botao na cor-assinatura
   ========================================================= */
/* Era uma faixa preta de borda a borda; virou cartao na cor da marca,
   com a mesma anatomia da caixa do MeuVisor. A secao em volta volta ao
   fundo claro. */
.diag-cta{ background:var(--bg); color:var(--ink); }

.diag-cartao{
  position:relative; overflow:hidden;
  background:var(--accent); color:var(--accent-ink);
  border-radius:var(--radius-card);
  padding:clamp(2.25rem, 5vw, 4rem);
}
/* O brilho da marca que o cartao escuro usa seria invisivel aqui —
   seria laranja sobre laranja. Um claro difuso no alto da direita da a
   mesma profundidade sem sujar a cor. */
.diag-cartao::after{
  content:""; position:absolute; pointer-events:none;
  top:-40%; right:-8%; width:min(60%, 640px); height:min(180%, 760px);
  background:radial-gradient(circle at 60% 40%,
    rgba(255,255,255,.20) 0%, rgba(255,255,255,.07) 42%, transparent 70%);
}
.diag-cartao > *{ position:relative; z-index:1; }

.diag-cartao h2{ color:var(--accent-ink); max-width:24ch; }
/* .88 e nao .80: o laranja e mais escuro que o verde que ele
   substituiu, entao o preto por cima rende menos. Em .80 o paragrafo
   caia para 4,63:1 — passa, mas sem folga para um ajuste de cor. */
.diag-cartao p{ color:rgba(13,13,12,.88); }
.diag-cartao .btn{ margin-top:1.5rem; }

/* O eyebrow e o ponto dele vinham na cor da marca: sobre a propria cor
   da marca, sumiriam. */
.eyebrow--sobre-cor{ color:rgba(13,13,12,.88); }
.eyebrow--sobre-cor::before{ background:var(--accent-ink); }

/* Botao escuro, para CTA sobre a cor da marca. O --primary e laranja e
   desapareceria no cartao. */
.btn--escuro{ background:var(--ink); color:#fff; }
.btn--escuro:hover{ background:#262620; }

/* =========================================================
   FOOTER
   ========================================================= */
/* Posicionado pelo mesmo motivo das secoes: o hero preso tem z-index 0
   e o fundo de elemento estatico pinta abaixo dele. */
.site-footer{ position:relative; z-index:1; background:var(--ink); color:#cfd0d0; padding-block:3.5rem; }
.site-footer a{ color:#fff; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
/* Marca + as colunas do menu principal (Solucoes, Setores, Educacao)
   + a coluna Visor. */
.footer-grid{ display:grid; gap:2.5rem; grid-template-columns:1.3fr repeat(4, 1fr); }
.site-footer h4{ font-family:var(--font-display); font-size:var(--step--1); color:#8a8a89; font-weight:700; margin:0 0 1rem; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.footer-bottom{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12); font-size:var(--step--1); color:#8a8a89; }
.brand--rodape{ color:#fff; }
.site-footer__sobre{ margin-top:1rem; color:#8a8a89; max-width:34ch; }
.footer-legal{ margin-top:2.5rem; }
.footer-legal ul{ display:flex; flex-wrap:wrap; gap:1.5rem; font-size:var(--step--1); }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1080px){
  .footer-grid{ grid-template-columns:repeat(3, 1fr); }
  .footer-grid > :first-child{ grid-column:1 / -1; }
}
@media (max-width:860px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }

/* Acessibilidade */
.screen-reader-text{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.skip-link:focus{ position:fixed; top:1rem; left:1rem; width:auto; height:auto; clip:auto; z-index:100; background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:8px; }

/* =========================================================
   SUBMENUS
   Desktop: abre no hover e no foco. O botao injetado pelo JS
   atende teclado e toque, onde hover nao existe.
   ========================================================= */
.nav-primary li{ position:relative; }
.nav-primary .menu-item__rotulo{ cursor:default; }

.submenu-toggle{
  display:inline-flex; align-items:center; gap:.35rem;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit; font-size:var(--step-0); color:var(--ink);
  line-height:inherit;
}
.submenu-toggle__seta{
  width:.42em; height:.42em; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-.1em,-.1em); transition:transform .18s ease;
}
/* A seta segue exatamente as mesmas condicoes que abrem o painel.
   Presa so ao .is-open, ela ficava parada quando o submenu abria
   por hover, e virava sozinha quando o clique nao abria nada. */
.menu-item-has-children.is-open .submenu-toggle__seta{
  transform:rotate(-135deg) translate(-.15em,-.15em);
}

@media (min-width:861px){
  /* Alinhado a esquerda do item, nao centralizado: o painel recua a
     propria margem interna (--sub-pad) mais a borda, para o texto da
     lista cair na mesma vertical do texto do botao acima.
     Centralizado, ele escapava para fora e chegava a cobrir o logo. */
  .nav-primary .sub-menu{
    --sub-pad: 1rem;
    position:absolute; top:100%;
    left:calc((var(--sub-pad) + 1px) * -1);
    transform:translateY(.4rem);
    min-width:12.5rem; margin:0; padding:.35rem 0; list-style:none;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:0 12px 32px rgba(13,13,12,.10);
    display:flex; flex-direction:column; gap:0;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .16s ease, transform .16s ease, visibility .16s;
    z-index:30;
  }
  /* Ponte invisivel: sem ela o menu fecha ao atravessar o vao. */
  .nav-primary .menu-item-has-children::after{
    content:""; position:absolute; top:100%; left:0; right:0; height:.6rem;
  }
  .nav-primary .menu-item-has-children:hover > .sub-menu,
  .nav-primary .menu-item-has-children:focus-within > .sub-menu,
  .nav-primary .menu-item-has-children.is-open > .sub-menu{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateY(0);
  }

  /* Mesmas tres condicoes da regra acima: painel e seta andam juntos. */
  .nav-primary .menu-item-has-children:hover .submenu-toggle__seta,
  .nav-primary .menu-item-has-children:focus-within .submenu-toggle__seta,
  .nav-primary .menu-item-has-children.is-open .submenu-toggle__seta{
    transform:rotate(-135deg) translate(-.15em,-.15em);
  }
  /* Painel branco sobre a barra escura: o texto e escuro, e a cor vem
     declarada, nao herdada — herdando, pegaria o branco do cabecalho.
     O padding lateral e o mesmo --sub-pad que desloca o painel. */
  .site-header .nav-primary .sub-menu a{
    display:block; padding:.5rem var(--sub-pad); font-size:var(--step--1);
    white-space:nowrap; color:var(--ink);
  }
  /* Verde Sinal tambem no submenu, como pedido. Ver a nota de contraste
     no comentario do token --accent-escuro. */
  .site-header .nav-primary .sub-menu a:hover,
  .site-header .nav-primary .sub-menu a:focus-visible{
    background:#f4f4f3; color:var(--accent-escuro);
  }
}

/* =========================================================
   MENU MOBILE
   O drawer so existe abaixo de 860px. Acima, .site-nav e uma
   linha normal e o botao nao e renderizado.
   ========================================================= */
.nav-toggle{ display:none; }
.site-nav{ display:flex; align-items:center; gap:2rem; }

@media (max-width:860px){
  /* 98px de barra fixa comem tela demais no celular. Com o logo em
     44px, 76px ja da folga suficiente. */
  .site-header .container{ flex-wrap:wrap; gap:1rem; min-height:76px; }

  .nav-toggle{
    display:inline-flex; align-items:center; gap:.55rem; margin-left:auto;
    background:transparent; border:1px solid var(--line); border-radius:var(--radius);
    padding:.6rem .9rem; cursor:pointer; color:var(--ink);
    font-family:var(--font-display); font-weight:700; font-size:var(--step-0); line-height:1;
  }
  .nav-toggle__barras{ display:grid; gap:4px; width:18px; }
  .nav-toggle__barras span{ display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .18s ease, opacity .18s ease; }
  .site-header.is-open .nav-toggle__barras span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .site-header.is-open .nav-toggle__barras span:nth-child(2){ opacity:0; }
  .site-header.is-open .nav-toggle__barras span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  /* display:none tira os links do foco de teclado — e o que queremos. */
  .site-nav{
    display:none; flex-direction:column; align-items:stretch; gap:1.5rem;
    width:100%; padding:1.25rem 0 1.75rem; border-top:1px solid var(--line);
  }
  .site-header.is-open .site-nav{ display:flex; }

  .nav-primary ul{ flex-direction:column; gap:0; }
  .nav-primary li + li{ border-top:1px solid var(--line); }
  .nav-primary a{ display:block; padding:.85rem 0; font-size:var(--step-1); }
  /* Dois botoes lado a lado nao cabem em 375px: empilha no drawer. */
  .header-actions{ flex-direction:column; align-items:stretch; gap:.75rem; }
  .header-actions .btn{ display:block; text-align:center; }

  /* Submenu no mobile: acordeao, nao camada flutuante. */
  .submenu-toggle{
    width:100%; justify-content:space-between;
    padding:.85rem 0; font-size:var(--step-1);
    font-family:var(--font-display); font-weight:700;
  }
  .nav-primary .sub-menu{
    list-style:none; margin:0 0 .75rem; padding:0 0 0 1rem;
    border-left:2px solid var(--accent); display:none;
  }
  .menu-item-has-children.is-open > .sub-menu{ display:block; }
  .nav-primary .sub-menu li + li{ border-top:0; }
  .nav-primary .sub-menu a{ padding:.55rem 0; font-size:var(--step-0); color:var(--ink-2); }

  body.nav-aberta{ overflow:hidden; }
}

/* =========================================================
   CONTEUDO EDITORIAL (page.php, single.php)
   ========================================================= */
.conteudo > * + *{ margin-top:1.1rem; }
.conteudo h2{ font-size:var(--step-2); margin-top:2.5rem; }
.conteudo h3{ margin-top:2rem; }
.conteudo ul, .conteudo ol{ padding-left:1.25rem; max-width:66ch; }
.conteudo li + li{ margin-top:.35rem; }
.conteudo a{ text-decoration:underline; }
.conteudo blockquote{
  margin:2rem 0; padding:.25rem 0 .25rem 1.5rem;
  border-left:3px solid var(--accent); color:var(--ink-2); font-size:var(--step-1);
}
.conteudo img{ border-radius:var(--radius); }
.conteudo table{ width:100%; border-collapse:collapse; font-size:var(--step--1); }
.conteudo th, .conteudo td{ padding:.6rem .75rem; border:1px solid var(--line); text-align:left; }
.conteudo code{ background:#f4f4f3; padding:.15em .4em; border-radius:4px; font-size:.92em; }
.conteudo pre{ background:#f4f4f3; padding:1rem; border-radius:var(--radius); overflow-x:auto; }

.pagina__cabecalho, .artigo__cabecalho, .arquivo__cabecalho{ margin-bottom:2.5rem; }
.artigo__meta{ color:var(--muted); font-size:var(--step--1); }
.artigo__capa{ margin:0 0 2.5rem; }
.artigo__capa img{ border-radius:var(--radius); }
.artigo__nav{ display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:var(--step--1); }
.artigo__nav-item--fim{ margin-left:auto; text-align:right; }

/* Listagens */
.lista-artigos{ display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); margin-top:2.5rem; }
.card-artigo__capa img{ border-radius:var(--radius); margin-bottom:1rem; }
.card-artigo__meta{ color:var(--muted); font-size:var(--step--1); margin-bottom:.4rem; }
.card-artigo__titulo{ font-size:var(--step-1); margin-bottom:.5rem; }
.card-artigo__titulo a{ text-decoration:none; }
.card-artigo__titulo a:hover{ text-decoration:underline; }
.card-artigo__resumo{ color:var(--muted); margin:0; }

.busca-form input[type="search"]{
  padding:.8rem 1rem; border:1px solid var(--line); border-radius:var(--radius);
  font-size:var(--step-0); font-family:inherit; min-width:min(100%, 320px);
}
.pagination, .nav-links{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:3rem; }
.page-numbers{ padding:.5rem .85rem; border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; }
.page-numbers.current{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* =========================================================
   FORMULARIOS (Diagnostico e Contato)
   ========================================================= */
.diag-mount{ margin-top:2.5rem; }
.diag{ max-width:44rem; }
.diag--estreito{ max-width:32rem; }
.diag__intro{ color:var(--muted); margin-bottom:2rem; }
.diag__ajuda{ color:var(--muted); font-size:var(--step--1); }
.diag__ajuda--mini{ font-size:.8rem; margin-top:1rem; }

.diag__erro{ color:#b3261e; font-size:var(--step--1); font-weight:500; margin:.75rem 0; }
.diag__erro:focus-visible{ outline:2px solid #b3261e; outline-offset:3px; }

.diag__progresso{ margin-bottom:2.5rem; }
.diag__contador{ font-size:var(--step--1); color:var(--muted); margin-bottom:.6rem; }
.diag__barra{ height:6px; background:var(--line); border-radius:99px; overflow:hidden; }
.diag__barra-fill{ height:100%; background:var(--accent); border-radius:99px; transition:width .2s ease; }

.diag__bloco-titulo, .diag__pergunta-titulo{ font-size:var(--step-2); margin-bottom:1.5rem; }
.diag__bloco-titulo:focus-visible, .diag__pergunta-titulo:focus-visible,
.diag__nivel:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

.diag__pergunta{ border:0; padding:0; margin:0 0 2.25rem; }
.diag__legenda{ padding:0; margin-bottom:.75rem; font-weight:700; }

.diag__opcoes{ display:grid; gap:.4rem; }
.diag__opcao{
  display:flex; gap:.7rem; align-items:flex-start; cursor:pointer;
  padding:.7rem .9rem; border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:.4rem; transition:border-color .15s ease, background-color .15s ease;
}
.diag__opcao:hover{ border-color:var(--ink-2); }
.diag__opcao input{ margin-top:.3rem; accent-color:var(--accent); flex:none; }
.diag__opcao:has(input:checked){ border-color:var(--ink); background:#fafafa; }
.diag__opcao:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }

.diag__acoes{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.diag__acoes .btn{ border:0; cursor:pointer; font-family:var(--font-display); }
.diag__acoes .btn--ghost{ border:1px solid var(--line); }
.diag__acoes .btn[disabled]{ opacity:.6; cursor:progress; }

.diag__form{ display:grid; gap:1.1rem; }
.diag__campo{ display:grid; gap:.35rem; }
.diag__label{ font-size:var(--step--1); font-weight:700; }
.diag__input{
  width:100%; padding:.75rem .9rem; border:1px solid var(--line);
  border-radius:var(--radius); font-size:var(--step-0); font-family:inherit; color:var(--ink);
}
.diag__input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--ink); }
textarea.diag__input{ resize:vertical; min-height:7rem; }

/* Honeypot: fora da tela, nunca display:none (bot ignora escondido demais). */
.diag__hp{ position:absolute!important; left:-9999px; width:1px; height:1px; opacity:0; }

.diag__sucesso{ padding:2rem; border:1px solid var(--line); border-radius:var(--radius); background:#fafafa; }
.diag__sucesso:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* Resultado do Diagnostico */
.diag__nivel{ font-size:var(--step-3); margin-bottom:.5rem; }
.diag__nota{ color:var(--muted); font-size:var(--step--1); }
.diag__secao{ margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line); }
.diag__secao h3{ margin-bottom:1.25rem; }

.diag__blocos{ display:grid; gap:.85rem; }
.diag__bloco-linha{ display:grid; grid-template-columns:1fr 6rem 2.5rem; align-items:center; gap:1rem; font-size:var(--step--1); }
.diag__bloco-barra{ height:8px; background:var(--line); border-radius:99px; overflow:hidden; }
.diag__bloco-fill{ display:block; height:100%; background:var(--accent); border-radius:99px; }
.diag__bloco-nota{ text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2); font-weight:700; }

.diag__lacunas{ display:grid; gap:1.5rem; padding-left:1.25rem; }
.diag__lacuna-texto{ margin:0 0 .3rem; font-weight:500; }
.diag__lacuna-meta{ margin:0; color:var(--muted); font-size:var(--step--1); }

.diag__rm-titulo{ font-family:var(--font-display); font-size:var(--step--1); text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); margin:1.75rem 0 .85rem; }
.diag__rm{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); }
.diag__rm-area-nome{ font-weight:700; font-size:var(--step--1); margin:0 0 .4rem; }
.diag__rm-lista{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem; font-size:var(--step--1); color:var(--ink-2); }
.diag__rm-lista li{ padding-left:1rem; position:relative; }
.diag__rm-lista li::before{ content:""; position:absolute; left:0; top:.55em; width:5px; height:5px; border-radius:50%; background:var(--accent); }

.diag__rm-resto{ margin-top:1.5rem; }
.diag__precisao{ background:#fafafa; border-radius:var(--radius); padding:1.75rem; border-top:0; }
.diag__envio{ margin-top:2.5rem; color:var(--muted); font-size:var(--step--1); }

@media (max-width:560px){
  .diag__bloco-linha{ grid-template-columns:1fr 3.5rem 2.2rem; gap:.6rem; }
}

/* =========================================================
   FORMULARIO DE CAPTACAO (todas as paginas)
   ========================================================= */
.form-lead{ background:#fafafa; }
.form-lead__grid{
  display:grid; gap:3rem;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:start;
}
.form-lead__texto h2{ max-width:16ch; }
.form-lead__alternativa{ margin-top:1.5rem; color:var(--muted); font-size:var(--step--1); }
.form-lead__alternativa a{ text-decoration:underline; }

.form-lead__form{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:2rem;
}
.form-lead__linha{ display:grid; gap:1.1rem; grid-template-columns:1fr 1fr; }
.form-lead__linha--tres{ grid-template-columns:1fr 1fr 1fr; }

select.diag__input{
  appearance:none; -webkit-appearance:none; background-color:var(--surface);
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),
                   linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:2.5rem;
}

@media (max-width:960px){
  .form-lead__grid{ grid-template-columns:1fr; gap:2rem; }
}
@media (max-width:560px){
  .form-lead__linha, .form-lead__linha--tres{ grid-template-columns:1fr; }
  .form-lead__form{ padding:1.25rem; }
}

/* =========================================================
   BOTAO FLUTUANTE DO WHATSAPP
   ========================================================= */
.zap{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:40;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25d366; color:#fff; text-decoration:none;
  box-shadow:0 6px 20px rgba(13,13,12,.28);
  transition:transform .18s ease, box-shadow .18s ease;
}
.zap:hover, .zap:focus-visible{
  color:#fff; transform:scale(1.06);
  box-shadow:0 8px 26px rgba(13,13,12,.34);
}
.zap:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.zap__icone{ display:flex; animation:zap-treme 2.6s ease-in-out 3s infinite; }

/* Treme em intervalos, nao continuamente: chama atencao sem virar
   ruido em cima de quem esta lendo. */
@keyframes zap-treme{
   0%,  86%, 100%{ transform:rotate(0); }
  88%{ transform:rotate(-14deg); }
  90%{ transform:rotate(12deg); }
  92%{ transform:rotate(-10deg); }
  94%{ transform:rotate(8deg); }
  96%{ transform:rotate(-5deg); }
  98%{ transform:rotate(3deg); }
}
@media (prefers-reduced-motion:reduce){
  .zap__icone{ animation:none; }
}
@media (max-width:560px){
  .zap{ right:1rem; bottom:1rem; width:52px; height:52px; }
}

/* =========================================================
   CONTATO
   ========================================================= */
.contato{ display:grid; gap:3rem; grid-template-columns:1fr 1fr; align-items:start; }
.contato__canais{ list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:1rem; }
.contato__rotulo{ display:block; font-size:var(--step--1); color:var(--muted); font-weight:700; }
.contato__nota{ margin-top:2rem; color:var(--muted); font-size:var(--step--1); }
.contato__form-wrap{ background:#fafafa; border:1px solid var(--line); border-radius:var(--radius); padding:2rem; }

@media (max-width:860px){
  .contato{ grid-template-columns:1fr; }
}

/* =========================================================
   PAGINA DE SETOR (page-setor.php)
   Faixa laranja -> foto grande montada sobre ela -> cartoes
   de problema sobre o pe da foto -> beneficios.
   ========================================================= */

/* FAIXA DE ABERTURA — PRETA
   O cabecalho do site tem texto branco e fundo transparente ate a
   pessoa rolar: por isso TODA pagina precisa de area escura ou de cor
   no topo. Aqui quem cumpre esse papel e esta faixa — e, sendo preta,
   ela serve o cabecalho padrao sem precisar de regra nenhuma (quando
   era laranja, o branco do menu dava 3,3:1 e exigia inverter tudo).
   O espaco interno de baixo e grande porque a foto da secao seguinte
   sobe sobre ele. */
.setor-faixa{
  position:relative; z-index:1;
  background:var(--ink); color:#fff;
  margin-top:calc(var(--altura-cabecalho) * -1);
  padding-block:calc(clamp(3.5rem, 7vw, 5.5rem) + var(--altura-cabecalho)) clamp(7rem, 13vw, 11rem);
  text-align:center;
}
.setor-faixa__corpo{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; }

.setor-faixa__rotulo{
  margin:0; font-size:var(--step--1); font-weight:700; line-height:1;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent);
}

/* CAIXA BAIXA, mesmo com a referencia em caixa alta: a letra-assinatura
   da Visor nunca sobe para versal (ver CLAUDE.md). */
.setor-faixa__titulo{
  margin:0; max-width:18ch;
  font-family:var(--font-lema); font-weight:800;
  font-size:clamp(2.1rem, 5vw, 4.2rem);
  line-height:1.04; letter-spacing:-.035em;
  font-size-adjust:none;
  color:#fff;
}
.setor-faixa__sub{
  margin:0; max-width:52ch;
  font-size:var(--step-1); line-height:1.5;
  /* Sobre o preto da marca, .82 da 11,2:1 — folga de sobra. */
  color:rgba(255,255,255,.82);
}
/* "base" em laranja. Sobre o preto da marca o Laranja Queimado da
   5,8:1 — passa com folga como cor de texto. */
.setor-faixa__destaque{ color:var(--accent); }

.setor-faixa__acoes{
  display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center;
  margin-top:.75rem;
}

/* A FOTO — sobe sobre a faixa laranja e abre o fundo claro. */
.setor-vitrine{
  /* Quanto a foto monta sobre o laranja. Um valor so, para ajustar a
     sobreposicao sem cacar numeros espalhados. */
  --vitrine-monta:clamp(4rem, 9vw, 10rem);

  background:var(--bg);
  padding-top:0;
  /* O espaco de baixo fica com a secao SEGUINTE. Aqui havia um
     `padding-bottom` de secao somado ao do carrossel e ao do bloco de
     beneficios: tres vaos empilhados, mais de 300px de buraco. */
  padding-bottom:0;

  /* FLOW-ROOT NAO E ENFEITE — e o que faz a foto montar sobre a faixa.
     Sem ele a margem negativa da figura COLAPSA para fora da secao: em
     vez de subir a foto dentro da secao, sobe a secao inteira, e o fundo
     branco dela cobre o pe da faixa laranja. O resultado era a foto
     rente ao laranja, nunca por cima. */
  display:flow-root;
}
.setor-vitrine > .container{ padding-top:0; }

.setor-vitrine__figura{
  position:relative; margin:0;
  margin-top:calc(var(--vitrine-monta) * -1);
  border-radius:var(--radius-card);
  overflow:hidden;
  /* No celular a foto fica em pe. Com a proporcao do desktop ela virava
     uma tarja de 151px numa tela de 375, e os cartoes, que sobem por
     cima, comiam quase metade do que sobrava. */
  aspect-ratio:4 / 3;
  background:var(--ink);
}
/* NO DESKTOP A FOTO NAO OCUPA A LARGURA TODA: recua para a esquerda e
   deixa a direita limpa, como na referencia. A proporcao foi escolhida
   para a ALTURA nao mudar — com 72% de 1368px (985px) e 1,6:1 a foto
   continua com os mesmos 616px de antes, so que mais estreita. */
@media (min-width:62rem){
  .setor-vitrine__figura{
    width:72%;
    aspect-ratio:1.6;
  }
}
.setor-vitrine__img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Sem foto: fundo da marca, para a pagina nao abrir um buraco. */
.setor-vitrine__figura--sem-foto{
  background:
    radial-gradient(90% 120% at 18% 0%, rgba(var(--accent-rgb),.34) 0%, transparent 62%),
    var(--ink);
}

/* OS CARTOES DE PROBLEMA — descem sobre o pe da foto. */
.setor-dores{
  position:relative; z-index:2;
  margin-top:clamp(-7rem, -9vw, -4rem);
  /* Sem espaco proprio embaixo: o vao ate o proximo bloco e o
     `padding-top` dele. Aqui havia um `--pad-secao` que se somava ao da
     secao e ao do bloco seguinte — tres vaos, mais de 300px. */
  padding-bottom:0;
}

/* Trilho com encaixe: funciona com o dedo e com o teclado mesmo se o
   script nao rodar, e e o script que liga as setas. */
/* FLEX, nao grid. Em `grid-auto-columns` a porcentagem nao resolve
   dentro de um container que rola — a largura do grid fica indefinida e
   as colunas colapsam para o conteudo (medido: sete cartoes na tela em
   vez de tres). Em flex, o `flex-basis` percentual resolve contra a
   largura do proprio container, que e definida. */
.setor-dores__trilho{
  --trilho-vao:1.25rem;
  list-style:none; margin:0; padding:.5rem .25rem 1.25rem;
  display:flex; gap:var(--trilho-vao);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.setor-dores__trilho::-webkit-scrollbar{ display:none; }
/* O CARTAO E O MESMO DA HOME, SEM DESVIO.
   Antes havia aqui fundo branco, sombra e altura propria. Isso criava um
   segundo modelo de cartao no site — e a sombra ainda deixava um borrao
   cinza em volta dele. O modelo e um so: `.dor`. O que esta dobra
   acrescenta e apenas a forma quadrada e o encaixe do carrossel. */
.setor-dor{
  scroll-snap-align:start;
  flex:0 0 min(78%, 17.5rem);
  /* Quadrado quando o texto cabe. */
  aspect-ratio:1;
  /* O `min-height` FIXO do cartao padrao desliga o tamanho minimo
     automatico — e sem ele a proporcao nao cede ao conteudo, ela corta.
     Medido com o texto real: o cartao 2 estourava 8px. Com `auto` ele
     cresce para 359 e nada e cortado. */
  min-height:auto;
}
.setor-dor__icone{ color:var(--accent-escuro); }
/* O tamanho do icone vem do .dor__svg na segunda dobra; aqui o SVG e
   montado por visor_icone_setor(), que nao poe classe nenhuma. Sem esta
   regra ele cresce ate preencher o cartao. */
.setor-dor__icone svg{ width:1.65rem; height:1.65rem; display:block; }

/* Quantos cabem por vez. Mais cartoes na tela = cartao menor, que e o
   ajuste pedido: em 1368px eram 440px quadrados, agora sao 327px. */
@media (min-width:48rem){
  .setor-dor{ flex-basis:calc((100% - var(--trilho-vao)) / 2); }
}
@media (min-width:62rem){
  .setor-dor{ flex-basis:calc((100% - 2 * var(--trilho-vao)) / 3); }
}
@media (min-width:75rem){
  .setor-dor{ flex-basis:calc((100% - 3 * var(--trilho-vao)) / 4); }
}

.setor-dores__controles{
  display:flex; gap:.75rem; justify-content:center;
  margin-top:1.5rem;
}
.setor-dores__controles[hidden]{ display:none; }
.setor-dores__seta{
  width:3rem; height:3rem; display:grid; place-items:center;
  border-radius:999px; cursor:pointer;
  background:var(--superficie-2); color:var(--ink);
  border:1px solid var(--line);
  transition:background-color .2s ease, border-color .2s ease;
}
.setor-dores__seta:hover{ background:var(--superficie-3); border-color:var(--ink); }
.setor-dores__seta svg{ width:1.2rem; height:1.2rem; }

/* BENEFICIOS — foto a esquerda, lista a direita. */
.setor-beneficio{ background:var(--bg); }
.setor-beneficio__grade{
  display:grid; gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
}
@media (min-width:62rem){
  .setor-beneficio__grade{ grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); }
}

.setor-beneficio__figura{
  margin:0; border-radius:var(--radius-card); overflow:hidden;
  aspect-ratio:4 / 5; background:var(--ink);
}
.setor-beneficio__img{ width:100%; height:100%; object-fit:cover; display:block; }
.setor-beneficio__figura--sem-foto{
  background:
    radial-gradient(90% 120% at 20% 0%, rgba(var(--accent-rgb),.32) 0%, transparent 60%),
    var(--ink);
}

.setor-beneficio__titulo{
  margin:0 0 .75rem;
  font-size:clamp(1.9rem, 3.4vw, 3rem);
  line-height:1.08; letter-spacing:-.025em;
}
.setor-beneficio__apoio{
  margin:0 0 2rem; max-width:48ch;
  font-size:var(--step-1); line-height:1.5; color:var(--ink-2);
}

/* Fio entre os itens, como na referencia: separa sem virar cartao. */
.beneficios{ list-style:none; margin:0 0 2rem; padding:0; }
.beneficio{
  display:flex; gap:1.1rem; align-items:flex-start;
  padding-block:1.4rem;
  border-top:1px solid var(--line);
}
.beneficio:last-child{ border-bottom:1px solid var(--line); }

.beneficio__icone{
  flex:none; width:2.75rem; height:2.75rem;
  display:grid; place-items:center;
  border-radius:999px; border:1px solid var(--line);
  color:var(--ink);
}
.beneficio__icone svg{ width:1.3rem; height:1.3rem; }

.beneficio__corpo{ min-width:0; }
.beneficio__titulo{
  margin:0 0 .3rem;
  font-size:var(--step-0); line-height:1.3; letter-spacing:-.01em;
}
.beneficio__texto{
  margin:0; max-width:none;
  font-size:var(--step-0); line-height:1.45; color:var(--ink-2);
}

.setor-beneficio__botao{ align-self:flex-start; }

@media (prefers-reduced-motion:reduce){
  .setor-dores__trilho{ scroll-behavior:auto; }
}


/* =========================================================
   COMPARATIVO — Visor x outras solucoes
   Faixa cinza, cartao branco. A esquerda o criterio escolhido;
   a direita as duas colunas. Cada LINHA e um botao que cobre as
   duas colunas: as duas celulas falam do mesmo criterio, entao
   um controle por celula so dobraria as paradas de teclado.
   ========================================================= */
.comparativo{ background:var(--superficie-2); }

.comparativo__abertura{ text-align:center; margin-bottom:clamp(2rem, 4vw, 3rem); }
.comparativo__titulo{
  margin:0 auto .75rem; max-width:20ch;
  font-size:clamp(1.9rem, 3.4vw, 3rem);
  line-height:1.08; letter-spacing:-.025em;
}
.comparativo__sub{
  margin:0 auto; max-width:58ch;
  font-size:var(--step-1); line-height:1.5; color:var(--ink-2);
}

.comparativo__cartao{
  background:#fff;
  border-radius:var(--radius-card);
  padding:clamp(1.5rem, 3vw, 2.5rem);
  display:grid; gap:clamp(1.5rem, 3vw, 2.5rem);
  /* Nao acompanha a largura do container. Esticado ate 1368px o cartao
     abria um vao morto entre o texto da esquerda e a tabela da direita;
     com teto e centrado, os dois lados ficam perto um do outro. */
  max-width:64rem; margin-inline:auto;
}
@media (min-width:62rem){
  .comparativo__cartao{
    grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr);
    align-items:center;
  }
}

/* PAINEL DA ESQUERDA — o texto que muda. */
.comparativo__painel{ min-width:0; }
.comparativo__painel:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; border-radius:8px; }
.comparativo__conteudo[hidden]{ display:none; }
.comparativo__criterio{
  margin:0 0 .5rem; max-width:none;
  font-family:var(--font-display); font-weight:700;
  font-size:var(--step-1); line-height:1.2; letter-spacing:-.015em;
  color:var(--ink);
}
.comparativo__texto{
  margin:0; max-width:40ch;
  font-size:var(--step-0); line-height:1.5; color:var(--ink-2);
}
/* Sem JS os seis textos ficam um sob o outro; o fio separa. */
.comparativo__conteudo + .comparativo__conteudo{
  margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--line);
}
/* Com JS so um aparece por vez, entao o fio nao tem o que separar. */
.tem-comparativo .comparativo__conteudo + .comparativo__conteudo{
  margin-top:0; padding-top:0; border-top:0;
}

/* AS DUAS COLUNAS — centradas na propria coluna da grade. */
.comparativo__colunas{ min-width:0; width:100%; max-width:30rem; margin-inline:auto; }
.comparativo__cabecalho,
.comparativo__linha{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:.5rem;
}
.comparativo__rotulo{
  display:block; text-align:center;
  padding:.85rem .75rem;
  font-family:var(--font-display); font-weight:700;
  font-size:var(--step-0); line-height:1.2; letter-spacing:-.01em;
  color:var(--ink);
}
/* A coluna da Visor e a destacada: cor da marca com texto preto, que da
   5,8:1 — branco sobre o laranja daria 3,3:1 e reprovaria. */
.comparativo__rotulo--visor{
  background:var(--accent); color:var(--accent-ink);
  border-radius:var(--radius) var(--radius) 0 0;
}

.comparativo__linhas{ display:grid; }

/* A linha inteira e o botao. */
.comparativo__linha{
  width:100%; margin:0; padding:0;
  background:transparent; border:0; cursor:pointer;
  font:inherit; color:inherit; text-align:center;
  border-top:1px solid var(--line);
}
.comparativo__linha:first-child{ border-top:0; }
.comparativo__linha:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

.comparativo__celula{
  display:flex; align-items:center; justify-content:center;
  padding:.9rem .75rem;
  font-size:var(--step-0); line-height:1.35; color:var(--ink-2);
  transition:background-color .2s ease, color .2s ease;
}
/* O realce da coluna da Visor desce por todas as linhas; so a ultima
   arredonda o pe, para o conjunto virar um bloco unico como na
   referencia. */
.comparativo__celula--visor{
  background:rgba(var(--accent-rgb), .12);
  color:var(--ink);
}
.comparativo__linha:last-child .comparativo__celula--visor{
  border-radius:0 0 var(--radius) var(--radius);
}

/* A linha escolhida. */
.comparativo__linha.esta-ativa .comparativo__celula{ color:var(--ink); font-weight:700; }
.comparativo__linha.esta-ativa .comparativo__celula--visor{ background:rgba(var(--accent-rgb), .28); }
.comparativo__linha:hover .comparativo__celula--visor{ background:rgba(var(--accent-rgb), .22); }

/* O criterio dentro da linha so existe para quem esta sem JS: com o
   script ligado ele vive no painel da esquerda, e repeti-lo aqui seria
   dizer a mesma coisa duas vezes na mesma tela. */
.comparativo__criterio-linha{
  grid-column:1 / -1;
  padding:.75rem .75rem 0;
  font-weight:700; color:var(--ink); text-align:left;
  font-size:var(--step--1);
}
.tem-comparativo .comparativo__criterio-linha{ display:none; }

@media (prefers-reduced-motion:reduce){
  .comparativo__celula{ transition:none; }
}

/* Botao de contorno claro, para fundo escuro. O .btn--ghost comum e
   contornado em cinza com texto preto: sobre o preto da marca ele
   sumiria. */
.btn--contorno-claro{
  background:transparent; color:#fff;
  border-color:rgba(255,255,255,.4);
}
.btn--contorno-claro:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* =========================================================
   OPINIOES
   Titulo e setas a esquerda, depoimentos correndo a direita.
   Usa o mesmo carrossel dos problemas; muda so a aparencia.
   ========================================================= */
.opinioes{ background:var(--bg); }
.opinioes__grade{ display:grid; gap:clamp(2rem, 4vw, 3rem); align-items:start; }
@media (min-width:62rem){
  .opinioes__grade{ grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); }
}

.opinioes__titulo{
  margin:0 0 clamp(1.5rem, 3vw, 2.25rem); max-width:14ch;
  font-family:var(--font-lema); font-weight:800;
  font-size:clamp(2rem, 4.2vw, 3.6rem);
  line-height:1.04; letter-spacing:-.035em;
  font-size-adjust:none;
}

.opinioes__controles{ display:flex; gap:.75rem; }
.opinioes__controles[hidden]{ display:none; }
.opinioes__seta{
  width:3.25rem; height:3.25rem; display:grid; place-items:center;
  border-radius:999px; cursor:pointer;
  background:var(--superficie-2); color:var(--ink);
  border:1px solid var(--line);
  transition:background-color .2s ease, border-color .2s ease;
}
.opinioes__seta:hover{ background:var(--superficie-3); border-color:var(--ink); }
/* A seta de avancar e a acao esperada, entao ela leva a cor da marca. */
.opinioes__seta--frente{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.opinioes__seta--frente:hover{ background:var(--accent-escuro); border-color:var(--accent-escuro); color:#fff; }
.opinioes__seta svg{ width:1.25rem; height:1.25rem; }

.opinioes__trilho{
  --trilho-vao:1.25rem;
  list-style:none; margin:0; padding:.25rem;
  display:flex; gap:var(--trilho-vao);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.opinioes__trilho::-webkit-scrollbar{ display:none; }

.opiniao{
  scroll-snap-align:start;
  flex:0 0 min(80%, 20rem);
}
@media (min-width:62rem){
  .opiniao{ flex-basis:calc((100% - var(--trilho-vao)) / 2); }
}

.opiniao__caixa{
  margin:0; height:100%;
  display:flex; flex-direction:column; justify-content:space-between;
  gap:2rem;
  background:var(--superficie-2); color:var(--ink);
  border-radius:var(--radius-card);
  padding:clamp(1.5rem, 2.4vw, 2rem);
  min-height:19rem;
}
.opiniao__texto{ margin:0; }
.opiniao__texto p{ margin:0; font-size:var(--step-0); line-height:1.5; max-width:none; }

/* O autor numa pastilha, como na referencia. */
.opiniao__autor{
  align-self:flex-start;
  background:var(--ink); color:#fff;
  border-radius:999px;
  padding:.6rem 1.1rem;
  font-size:var(--step--1); font-weight:700; line-height:1.2;
}

/* O cartao escuro inverte tudo. */
.opiniao--escura .opiniao__caixa{ background:var(--ink); color:#fff; }
.opiniao--escura .opiniao__autor{ background:var(--accent); color:var(--accent-ink); }

/* =========================================================
   SOLUCOES DO SETOR — faixa laranja com seis cartoes
   ========================================================= */
.solucoes-setor{ background:var(--accent); color:var(--accent-ink); }
.solucoes-setor__abertura{ text-align:center; margin-bottom:clamp(2rem, 4vw, 3rem); }
.solucoes-setor__titulo{
  margin:0 auto; max-width:24ch;
  font-family:var(--font-lema); font-weight:800;
  font-size:clamp(1.9rem, 3.6vw, 3.2rem);
  line-height:1.06; letter-spacing:-.035em;
  font-size-adjust:none;
  color:var(--accent-ink);
}

/* TRES COLUNAS, nao `auto-fit`. Sao seis cartoes: em tres colunas a
   grade fecha em 2 fileiras cheias, como na referencia. Com `auto-fit`
   davam quatro colunas numa tela larga, e a ultima fileira ficava com
   dois cartoes soltos. */
.solucoes-setor__grade{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1rem, 2vw, 1.5rem);
  grid-template-columns:1fr;
}
@media (min-width:40rem){ .solucoes-setor__grade{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:62rem){ .solucoes-setor__grade{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }

.solucao-cartao{
  display:flex; flex-direction:column; height:100%;
  background:#fff; color:var(--ink);
  border-radius:var(--radius-card);
  padding:clamp(1.4rem, 2.2vw, 1.9rem);
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.solucao-cartao:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(13,13,12,.18); color:var(--ink); }
.solucao-cartao:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.solucao-cartao__icone{ display:block; color:var(--accent-escuro); margin:0 0 auto; }
.solucao-cartao__icone svg{ width:1.65rem; height:1.65rem; display:block; }

.solucao-cartao__titulo{
  margin:1.75rem 0 .4rem;
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  font-size:var(--step-1); line-height:1.15; letter-spacing:-.015em;
}
.solucao-cartao__seta{ width:1.1rem; height:1.1rem; flex:none; transition:transform .2s ease; }
.solucao-cartao:hover .solucao-cartao__seta{ transform:translateX(3px); }

.solucao-cartao__texto{
  margin:0; max-width:none;
  font-size:var(--step-0); line-height:1.45; color:var(--ink-2);
}

/* O convite nao e uma solucao: inverte para nao se passar por uma. */
.solucao-cartao--convite{ background:var(--ink); color:#fff; }
.solucao-cartao--convite:hover{ color:#fff; }
.solucao-cartao--convite .solucao-cartao__icone{ color:var(--accent); }
.solucao-cartao--convite .solucao-cartao__texto{ color:rgba(255,255,255,.76); }
.solucao-cartao--convite:focus-visible{ outline-color:#fff; }

@media (prefers-reduced-motion:reduce){
  .solucao-cartao:hover{ transform:none; }
  .solucao-cartao:hover .solucao-cartao__seta{ transform:none; }
  .opinioes__trilho{ scroll-behavior:auto; }
}

/* =========================================================
   ETAPAS DA ENTREGA — pagina de produto
   Seis faixas: o quadro cinza com o texto a esquerda, a foto
   a direita. O quadro e o cartao padrao do site; a faixa e a
   mesma forma do cartao de setor da home.
   ========================================================= */
.etapas{ background:var(--bg); }

.etapas__abertura{ margin-bottom:clamp(2rem, 4vw, 3rem); max-width:44rem; }
.etapas__rotulo{
  margin:0 0 .75rem; font-size:var(--step--1); font-weight:700; line-height:1;
  letter-spacing:.07em; text-transform:uppercase;
  /* O laranja puro da 2,4:1 no branco; o escuro e o tom da marca feito
     para ser lido sobre fundo claro. */
  color:var(--accent-escuro);
}
/* NA LETRA-ASSINATURA. Sempre caixa baixa e entreletra apertada — e
   assim que a Bricolage foi escolhida (ver CLAUDE.md). */
.etapas__titulo{
  margin:0;
  font-family:var(--font-lema); font-weight:800;
  font-size:clamp(1.9rem, 3.6vw, 3.2rem);
  line-height:1.06; letter-spacing:-.035em;
  font-size-adjust:none;
}

/* `ol` sem marcador: o numero visivel e o da pastilha, que foi
   desenhada. O contador da lista continua existindo para leitor de
   tela. Sem JS os seis ficam um sob o outro; o script os junta na
   pilha (ver .is-pilha). */
.etapas__palco{
  --pilha-entra:2.6rem;
  --pilha-recua:-1.9rem;
  list-style:none; margin:0; padding:0;
  padding-top:1.9rem;   /* lugar para a borda do cartao de tras */
}
.etapa + .etapa{ margin-top:1rem; }

/* A FOTO COBRE O CARTAO INTEIRO e o quadro flutua por cima dela, como
   na referencia. As duas camadas dividem a mesma celula; o
   empilhamento decide: foto (0), quadro (2). */
.etapa{
  position:relative; overflow:hidden;
  border-radius:var(--radius-card);
  background:var(--ink);
  display:grid; grid-template-columns:1fr;
  align-items:center;
  min-height:clamp(20rem, 34vw, 27rem);
  padding:clamp(1.25rem, 2.6vw, 2.25rem);
}

.etapa__midia{
  position:absolute; inset:0; z-index:0;
}
.etapa__img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Sem foto: fundo da marca, variando de etapa para etapa, para a
   sequencia nao virar seis retangulos iguais. */
.etapa__midia--sem-foto{
  background:
    radial-gradient(110% 80% at calc(60% + var(--carta, 0) * 7%) 18%,
      rgba(var(--accent-rgb),.30) 0%, rgba(var(--accent-rgb),.07) 46%, transparent 74%),
    linear-gradient(calc(150deg + var(--carta, 0) * 10deg),
      hsl(70 6% calc(15% + var(--carta, 0) * 3%)) 0%, #0d0d0c 80%);
}

/* O QUADRO e o CARTAO PADRAO (`.dor`): fundo, raio, respiro e o
   marcador no topo com `margin-bottom:auto` vem todos de la. Aqui so
   entra o que e desta dobra — a largura e o flutuar sobre a foto.
   Antes havia uma copia do cartao escrita a mao; virou mais um modelo
   no site, que e exatamente o que a regra do cartao padrao proibe. */
.etapa__quadro{
  position:relative; z-index:2;
  justify-self:start;
  /* QUADRADO, como os cartoes de problema. Com 31rem de largura e a
     altura minima do cartao padrao ele saia 496 x 248 — um retangulo
     deitado, que nao e a forma do cartao Visor. Estreitar e travar a
     proporcao devolve o quadrado e, de quebra, abre mais foto a
     direita. Se o texto passar do que cabe, o quadro cresce: a
     proporcao cede para o tamanho minimo do conteudo em vez de cortar. */
  width:min(100%, 22rem);
  /* Quadrado quando o texto cabe. */
  aspect-ratio:1;
  /* O `min-height` FIXO do cartao padrao desliga o tamanho minimo
     automatico, e sem ele a proporcao nao cede ao conteudo: ela corta.
     Era por isso que a etapa 3 estourava no celular. Com `auto`, o
     quadro cresce quando o texto pede e volta ao quadrado quando nao. */
  min-height:auto;
}

/* O NUMERO OCUPA O LUGAR DO ICONE do cartao padrao. Nao declara
   `margin`: e o `margin:0 0 auto` do .dor__icone que empurra titulo e
   texto para a base, e redeclarar aqui mataria esse empurrao. */
/* So o numero, sem a pastilha redonda. */
.etapa__numero{
  display:block;
  font-family:var(--font-display); font-weight:700;
  font-size:var(--step-1); line-height:1;
  /* O laranja puro da 2,4:1 no cinza do cartao — reprova para texto.
     O --accent-escuro e o tom da marca feito para ser lido sobre fundo
     claro (ver a regra de cor no CLAUDE.md). */
  color:var(--accent-escuro);
}
/* O cartao padrao escurece sob o cursor porque na home ele e clicavel.
   Aqui o quadro e so leitura: fica parado. */
.etapa__quadro:hover{ background:var(--superficie-2); }
.etapa__quadro:hover .etapa__numero{ color:var(--accent-ink); }

/* As setas, no mesmo desenho das opinioes. */
.etapas__nav{ display:flex; gap:.75rem; justify-content:flex-end; margin-top:1.5rem; }
.etapas__nav[hidden]{ display:none; }
.etapas__seta{
  width:3.25rem; height:3.25rem; display:grid; place-items:center;
  border-radius:999px; cursor:pointer;
  background:var(--superficie-2); color:var(--ink);
  border:1px solid var(--line);
  transition:background-color .2s ease, border-color .2s ease;
}
.etapas__seta:hover{ background:var(--superficie-3); border-color:var(--ink); }
.etapas__seta--frente{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.etapas__seta--frente:hover{ background:var(--accent-escuro); border-color:var(--accent-escuro); color:#fff; }
.etapas__seta svg{ width:1.25rem; height:1.25rem; }


/* =========================================================
   PILHA GENERICA (.is-pilha)
   Cartoes que se sobrepoem e trocam por setas. Tres estados:
     repouso      — esperando embaixo, invisivel;
     .esta-atras  — recuou para o fundo, so a borda de cima aparece;
     .esta-ativo  — na frente, no lugar.
   Quem poe e tira as classes e o [data-pilha] do main.js, que ja era
   generico. Isto aqui era copia dentro dos cursos; virou um bloco so
   quando as etapas da pagina de produto passaram a precisar do mesmo
   movimento. A dobra de setores ainda tem a sua propria versao
   (`is-abas`), porque troca por abas e nao por seta — vale unificar
   quando alguem mexer nela.
   Os filhos precisam de `position:relative` e `overflow:hidden`.
   ========================================================= */
.is-pilha{ display:grid; }
.is-pilha > *{
  grid-area:1 / 1;
  transform:translateY(var(--pilha-entra, 1.8rem));
  opacity:0; z-index:1;
  transition:transform .55s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.is-pilha > * + *{ margin-top:0; }
.is-pilha > .esta-ativo{ transform:none; opacity:1; z-index:3; }
.is-pilha > .esta-atras{
  transform:translateY(var(--pilha-recua, -1.5rem)) scale(.955);
  opacity:1; z-index:2;
}

/* O cartao recuado fica todo coberto pelo da frente menos a borda de
   cima: pintando ele inteiro da cor da marca, o que sobra a vista e
   exatamente essa borda. */
.is-pilha > *::after{
  content:""; position:absolute; inset:0; z-index:5;
  background:var(--accent); border-radius:inherit;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.is-pilha > .esta-atras::after{ opacity:1; }

/* Na montagem entram direto no estado final, sem deslizar. */
.sem-transicao > *,
.sem-transicao > *::after{ transition:none; }

@media (prefers-reduced-motion:reduce){
  .is-pilha > *,
  .is-pilha > *::after{ transition:none; }
}

/* =========================================================
   OUTRAS SOLUCOES — so na pagina de PRODUTO
   A faixa e a mesma da pagina de setor; o que muda aqui e o
   cartao, que passa a ser a foto inteira com o texto por cima.
   Vale nas DUAS paginas, setor e produto: a faixa e a mesma, e
   mudar uma tem de mudar a outra. Ja foi escopada por
   `.visor-produto`; o escopo saiu quando ficou claro que o bloco e
   compartilhado.
   ========================================================= */
.solucoes-setor__titulo{ color:#fff; }

/* 400 x 200 e o tamanho das fotos. As colunas param nos 400 e o
   conjunto fica centrado — esticar ate a largura do container deixaria
   a foto maior do que ela e. `minmax(0, 400px)` deixa encolher em tela
   estreita em vez de transbordar. */
.solucoes-setor__grade{
  grid-template-columns:minmax(0, 400px);
  justify-content:center;
}
@media (min-width:40rem){
  .solucoes-setor__grade{ grid-template-columns:repeat(2, minmax(0, 400px)); }
}
@media (min-width:62rem){
  .solucoes-setor__grade{ grid-template-columns:repeat(3, minmax(0, 400px)); }
}

.solucao-cartao{
  position:relative; overflow:hidden;
  display:block; height:auto;
  aspect-ratio:400 / 200;
  padding:0;
  background:var(--ink); color:#fff;
}
.solucao-cartao:hover{ color:#fff; }

.solucao-cartao__midia{
  position:absolute; inset:0; z-index:0; display:block;
}
.solucao-cartao__img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Sem foto: fundo da marca, para o cartao nao abrir um buraco. */
.solucao-cartao--sem-foto{
  background:
    radial-gradient(90% 120% at 18% 0%, rgba(var(--accent-rgb),.34) 0%, transparent 62%),
    var(--ink);
}

/* O veu: mais fechado embaixo, que e onde o texto fica. */
.solucao-cartao__veu{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,
    rgba(13,13,12,.88) 0%, rgba(13,13,12,.58) 46%, rgba(13,13,12,.18) 78%, rgba(13,13,12,.04) 100%);
}

.solucao-cartao__corpo{
  position:relative; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end;
  height:100%;
  padding:clamp(1.1rem, 2vw, 1.5rem);
}
.solucao-cartao__titulo{
  margin:0 0 .3rem; color:#fff;
  font-size:var(--step-0); line-height:1.2;
}
.solucao-cartao__texto{ color:rgba(255,255,255,.88); font-size:var(--step--1); }

/* O CONVITE EM VIDRO, como o cartao do Diagnostico no hero.
   A opacidade NAO e a mesma de la: aquele cartao fica sobre foto
   escura, este sobre o Laranja Queimado. Medido: com .42 de preto por
   cima, o laranja cai para L=0,156 e o texto branco da 5,1:1. Abaixo de
   .315 ele reprovaria nos 4,5:1. */
.solucao-cartao--convite{
  background:rgba(13,13,12,.42);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
  border:1px solid rgba(255,255,255,.3);
}
/* Sem desfoque o vidro viraria so um veu sobre o laranja cru: fecha
   mais a opacidade para garantir a leitura. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .solucao-cartao--convite{ background:rgba(13,13,12,.62); }
}
.solucao-cartao--convite:hover{ background:rgba(13,13,12,.5); }

/* =========================================================
   A TRILHA — faixa preta na pagina de produto
   Abertura em duas pontas: rotulo e titulo a esquerda, a frase
   de apoio encostada na direita. Quatro quadros escuros, com
   contorno claro em vez de fundo proprio.
   ========================================================= */
.trilha{ background:var(--ink); color:#fff; }

.trilha__abertura{
  display:grid; gap:clamp(1.25rem, 3vw, 2rem);
  margin-bottom:clamp(2.25rem, 5vw, 3.5rem);
}
/* So lado a lado quando ha largura: empilhado, a frase da direita
   viraria uma orfa solta embaixo do titulo. */
@media (min-width:62rem){
  .trilha__abertura{
    grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);
    align-items:end;
  }
}

.trilha__rotulo{
  margin:0 0 .75rem; font-size:var(--step--1); font-weight:700; line-height:1;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent);
}
.trilha__titulo{
  margin:0; max-width:20ch;
  font-size:clamp(1.9rem, 3.4vw, 3rem);
  line-height:1.08; letter-spacing:-.025em;
  color:#fff;
}
.trilha__apoio{
  margin:0; max-width:34ch;
  font-size:var(--step-1); line-height:1.45;
  /* .82 sobre o preto da marca da 11,2:1 — folga de sobra. */
  color:rgba(255,255,255,.82);
}
@media (min-width:62rem){
  /* Encostada na ponta direita, como na referencia. */
  .trilha__apoio{ justify-self:end; text-align:right; }
}

.trilha__grade{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1rem, 2vw, 1.5rem);
  grid-template-columns:1fr;
}
@media (min-width:40rem){ .trilha__grade{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:75rem){ .trilha__grade{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }

/* O quadro nao tem fundo proprio: o que o separa da faixa e o
   contorno, como na referencia. Fundo chapado sobre preto criaria um
   segundo tom de escuro sem necessidade. */
.trilha-cartao{
  display:flex; flex-direction:column;
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-card);
  padding:clamp(1.25rem, 2.2vw, 1.75rem);
}

.trilha-cartao__titulo{
  margin:0 0 1.1rem;
  font-size:var(--step-0); line-height:1.2; letter-spacing:-.01em;
  color:#fff;
}

.trilha-cartao__midia{
  position:relative; overflow:hidden;
  border-radius:var(--radius);
  aspect-ratio:4 / 3;
  margin-bottom:1.25rem;
}
.trilha-cartao__img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Sem imagem o espaco fica reservado e discreto — nao um buraco. */
.trilha-cartao__midia--vazia{
  background:
    radial-gradient(90% 110% at 30% 10%, rgba(var(--accent-rgb),.22) 0%, transparent 62%),
    rgba(255,255,255,.05);
}

.trilha-cartao__destaque{
  margin:0 0 .6rem;
  font-weight:700; font-size:var(--step-0); line-height:1.3;
  color:var(--accent);
}

.trilha-cartao__lista{
  list-style:disc; margin:0; padding-left:1.1rem;
  display:flex; flex-direction:column; gap:.35rem;
  font-size:var(--step--1); line-height:1.45;
  color:rgba(255,255,255,.82);
}