/* ============================================================
   Metta — protótipo HTML da Home
   Tokens e medidas extraídos do wireframe Figma (página 05)
   ============================================================ */

/* Os tokens saíram daqui e moram em css/fundacao.css, que carrega
   antes deste arquivo. Fonte única: não redeclarar token aqui. */


*{ box-sizing:border-box; margin:0; padding:0; }
/* o corte lateral fica só aqui: repetir no body faz o navegador
   desenhar duas barras de rolagem */
html{ scroll-behavior:smooth; overflow-x:clip; }
body{
  font-family:var(--texto); color:var(--ink); background:var(--branco);
  -webkit-font-smoothing:antialiased;
  /* o arco dos casos é de propósito mais largo que o container; sem este
     corte a página desliza para o lado no celular. clip, e não hidden,
     para não criar contexto de rolagem e trazer de volta a barra dupla */
  overflow-x:clip;
}
/* 25/09: overflow:clip só existe no Safari do iOS 16 em diante. Num iPhone
   mais antigo as duas regras acima são ignoradas, nada corta a lateral e a
   página cresce com o que sangra. Lá entra o hidden, que o iOS respeita;
   a barra dupla que o hidden causa é coisa de desktop, que já tem o clip. */
@supports not (overflow-x:clip){
  html, body{ overflow-x:hidden; }
}
img{ display:block; max-width:100%; }
a{ text-decoration:none; color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* ---------- tipografia ---------- */
.d-hero{ font-family:var(--display); font-weight:400; font-size:var(--fs-hero); line-height:1; letter-spacing:-.01em; }
.hero .d-hero{ font-weight:600; }
.d-statement{ font-family:var(--display); font-weight:500; font-size:var(--fs-statement); line-height:1; }
.d-quote{ font-family:var(--display); font-weight:500; font-size:var(--fs-quote); line-height:1; }
.d-number{ font-family:var(--display); font-weight:400; font-size:var(--fs-number); line-height:1; display:block; white-space:nowrap; }
.d-card{ font-family:var(--display); font-weight:400; font-size:var(--fs-card); line-height:1; }
/* No Figma a caixa do chapéu tem 15 de altura para um corpo de 12, ou
   seja, entrelinha 1,25. Com `line-height:1` ela media 12 e TODA dobra
   nascia 3px acima do arquivo, em todas as páginas. */
.chapeu{
  font-family:var(--display); font-weight:500; font-size:12px; line-height:1.25;
  letter-spacing:.01em; text-transform:uppercase; color:var(--ink);
}
.chapeu--inter{ font-family:var(--texto); letter-spacing:1.2px; }
.corpo-16{ font-size:16px; line-height:1.6; color:var(--corpo); }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--texto); font-weight:500; font-size:14px; line-height:1.2;
  padding:16px; border-radius:100px; white-space:nowrap;
  transition:transform .22s var(--ease), background-color .22s var(--ease),
             color .22s var(--ease), box-shadow .22s var(--ease);
}
.btn--claro{ background:var(--branco); color:var(--ink); }
.btn--escuro{ background:var(--ink); color:var(--branco); }
.btn--amarelo{ background:var(--amarelo); color:var(--ink); }
/* 23/09, Figma node 1069:3611: botão de "ver mais" -- vazado, borda
   escura de 1px, sem fundo. Usado em "ver os casos completos" (Mentoria
   2ª dobra, Consultoria) e "exibir mais cases" (Resultados). */
.btn--contorno{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn--sm{ padding:14px 16px; }
.btn--lg{ padding:15px 26px; font-size:15px; font-weight:600; }
.btn--claro:hover{ background:#f2f5f7; transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.18); }
.btn--escuro:hover{ background:#1b2a33; transform:translateY(-2px); box-shadow:0 10px 24px rgba(12,22,27,.22); }
.btn--amarelo:hover{ background:#ffcb45; transform:translateY(-2px); box-shadow:0 10px 24px rgba(255,190,24,.32); }
.btn--contorno:hover{ background:var(--ink); color:var(--branco); transform:translateY(-2px); box-shadow:0 10px 24px rgba(12,22,27,.18); }
.btn:active{ transform:translateY(0); }

/* ---------- placeholder de imagem ---------- */
.ph-img{ background:var(--cinza-card); }

/* ============================================================
   HEADER
   ============================================================ */
/* menu estatico: acompanha o scroll da pagina e sai de cena com ela.
   absolute sem ancestral posicionado ancora no documento, nao na tela. */
.nav{ position:absolute; top:32px; left:0; right:0; z-index:80; }
.nav-in{
  position:relative; width:var(--linha-site); margin:0 auto; height:51px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-pill{
  display:flex; align-items:center; gap:8px;
  background:rgba(12,22,27,.15); border-radius:80px; padding:6px;
  backdrop-filter:blur(70.75px); -webkit-backdrop-filter:blur(70.75px);
  transition:background-color .3s var(--ease);
}

/* item de menu — pilula, como o resto do header.
   Medidas do Figma 1226:715: caixa de 39 de altura, 8 de recuo em volta,
   raio 100, Inter Medium 14 e branco sobre escuro. O recuo aqui era 12 e
   a cor era o cinza #b3b3b3: os 4 a mais por lado inchavam a pilula da
   esquerda em 40 no total. */
.nav-item{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:39px; padding:0 8px; border-radius:100px;
  font-size:14px; font-weight:500; color:var(--branco);
  transition:background-color .22s var(--ease), color .22s var(--ease);
}
/* na pilula da direita o Contato respira 16 de cada lado (1226:723) */
.nav-pill--dir .nav-item{ padding:0 16px; }
/* e o CTA amarelo e a MESMA caixa de 39 do item, com 16 de recuo
   (1226:725). Ele herdava o .btn--sm, que tem 14 de recuo em cima e
   embaixo: isso dava 44,8 de altura e estufava a pilula da direita para
   56,8 enquanto a da esquerda ficava nos 51 do arquivo. */
.nav-pill--dir .btn{ height:39px; padding:0 16px; font-size:14px; }
.nav-item:hover{ color:var(--branco); background:var(--vidro-forte); }
/* o item da pagina em que voce esta acende em amarelo, e nao no vidro
   forte. Vale nos dois temas, porque o amarelo le sobre foto escura e
   sobre dobra clara igual. So na pilula da esquerda: na da direita o
   ativo encostaria no CTA, que ja e amarelo, e os dois virariam um
   botao so. */
.nav-item.is-ativo{ color:var(--branco); background:var(--vidro-forte); }
.nav-pill:not(.nav-pill--dir) .nav-item.is-ativo{ color:var(--ink); background:var(--amarelo); }
.nav-item .chev{ transition:transform .25s var(--ease); }

/* ---------- menu que cai no hover (Figma 1348:24267 e 1348:24325) ----------
   Painel de 204 de largura, recuo de 6, itens de 192x39 com vao de 8 e
   canto de 24, no mesmo vidro da pilula. Abre 9 abaixo da barra e fica
   CENTRADO no item que o chamou.

   O painel e irmao da .nav-pill, e nao filho do item. A pilula tem
   backdrop-filter, e o Chrome lava o conteudo de qualquer filho que
   tambem tenha um: la dentro o texto do dropdown saia cinza em vez de
   preto. Quem o ancora embaixo do item certo e o js/nav-sub.js, que
   escreve o `left`. */
.nav-tem{ display:flex; }
.nav-sub[hidden]{ display:none; }
/* o painel e filho do <body>, nao do header: quem o coloca e o posiciona
   e o js/nav-sub.js. O porque esta escrito la. */
.nav-sub{
  position:absolute; top:0; left:0;
  width:204px; padding:6px; border-radius:24px;
  display:flex; flex-direction:column; gap:8px;
  /* o mesmo vidro da pilula, que e o que o arquivo pede */
  background:rgba(12,22,27,.15);
  backdrop-filter:blur(70.75px); -webkit-backdrop-filter:blur(70.75px);
  opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease), margin-top .26s var(--suave);
  margin-top:-6px;
  z-index:90;
}
.nav-sub.esta-aberto{ opacity:1; pointer-events:auto; margin-top:0; }
.nav-sub-item{
  display:flex; align-items:center; justify-content:center;
  height:39px; padding:0 8px; border-radius:100px;
  font-size:14px; font-weight:500; line-height:1.2; color:var(--branco);
  white-space:nowrap;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.nav-sub-item:hover{ background:var(--vidro-forte); }
/* fora do .nav o tema nao chega por heranca: o JS marca o painel */
.nav-sub.e-claro .nav-sub-item{ color:var(--ink); }
.nav-sub.e-claro .nav-sub-item:hover{ background:rgba(12,22,27,.08); }

/* logo: assinatura inteira, parada e centralizada. Sem animacao.
   Medidas do no atual (1226:909 no desktop, 1070:7047 no celular, iguais):
   a marca ocupa 119,00x28,56, simbolo de 30,1 e palavra de 79,8x16,7, com
   9,05 de vao. O 927:9297 que estava aqui era o header antigo, mais alto,
   e deixava a marca um terco maior do que o arquivo pede.
   A largura do simbolo vai 30,88 e nao 30,14 porque o SVG tem proporcao
   133/123: forcar os 30,14 espremeria o desenho. */
.nav-logo{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  display:flex; align-items:center; gap:9.05px;
}
.logo-simbolo{ width:30.88px; height:28.56px; flex:none; }
.logo-palavra{ display:block; flex:none; width:79.82px; height:16.69px; }
.logo-palavra img{
  width:79.82px; max-width:none; height:16.69px; display:block;
  transition:filter .32s var(--ease);
}
/* sobre dobra clara a palavra vira escura; o símbolo segue amarelo,
   que é a assinatura oficial em fundo claro */
.nav.sobre-claro .logo-palavra img{ filter:invert(1); }

/* Soluções virou link direto para a página: nao ha mais menu suspenso.

   Sobre dobra clara so o TEXTO inverte. O vidro nao: no arquivo ele e
   rgba(12,22,27,.15) nos dois temas, claro e escuro. */
.nav.sobre-claro .nav-item{ color:var(--ink); }
.nav.sobre-claro .nav-item:hover{ color:var(--ink); background:rgba(12,22,27,.08); }
.nav.sobre-claro .nav-item.is-ativo{ color:var(--ink); background:rgba(12,22,27,.08); }
.nav.sobre-claro .nav-pill:not(.nav-pill--dir) .nav-item.is-ativo,
.nav.sobre-claro .nav-pill:not(.nav-pill--dir) .nav-item.is-ativo:hover{
  color:var(--ink); background:var(--amarelo);
}
.nav.sobre-claro .nav-menu span{ background:var(--ink); }

/* ============================================================
   ENTRADA POR SCROLL
   ============================================================ */
/* Duas camadas, mesmo gesto: fade in up.

   [data-anima] e a marcacao escrita na mao: sobe junto com a dobra.
   [data-sobe] o app.js poe sozinho em todo bloco que ninguem marcou, e
   cada um sobe no momento em que cruza a tela.

   Depois que a subida termina o transform volta a `none`. Um
   translateY(0) parado continua sendo um transform, e transform cria
   bloco de contencao: deixar ligado atrapalharia qualquer position
   fixed ou sticky que viva dentro do elemento. */
[data-anima],
[data-sobe]{
  opacity:0;
  transition:opacity var(--dur) var(--suave), transform var(--dur) var(--suave);
  transition-delay:var(--d, 0s);
}
.is-dentro [data-anima],
[data-sobe].ja-entrou{ opacity:1; }

/* quem sobe: todo mundo, menos a peca marcada como "opaco" */
[data-anima],
[data-sobe]:not([data-sobe="opaco"]){ transform:translateY(40px); }
.is-dentro [data-anima],
[data-sobe]:not([data-sobe="opaco"]).ja-entrou{ transform:translateY(0); }
[data-sobe]:not([data-sobe="opaco"]).ja-parou{ transform:none; }

/* data-sobe="opaco" e o bloco que tem transform proprio ou que esta
   posicionado no palco. Ele entra so pela opacidade, e nenhuma regra
   daqui escreve transform nele: escrever derrubaria a centralizacao por
   translateX(-50%) ou a posicao da peca, que foi por isso que esses
   blocos ficaram de fora da entrada ate 16/09/2026. */
[data-sobe="opaco"]{ transition-property:opacity; }

@media (prefers-reduced-motion: reduce){
  [data-anima],
  [data-sobe]{ opacity:1; transition:none; }
  [data-anima],
  [data-sobe]:not([data-sobe="opaco"]){ transform:none; }
}

/* ============================================================
   01 · HERO
   ============================================================ */
.hero{
  position:relative; background:var(--hero-bg); color:var(--branco);
  height:742px; display:flex; flex-direction:column;
}
.hero-centro{
  width:min(819px, 100% - var(--gutter) * 2); margin:217px auto 0;
  display:flex; flex-direction:column; align-items:center; gap:34px; text-align:center;
}
.hero-texto{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.hero .d-hero{ max-width:743px; color:var(--branco); }
.hero-sub{ max-width:559px; font-size:18px; line-height:1.1; color:var(--branco); }

/* ---------- hero claro: o símbolo em degradê entra por baixo ----------
   Calibrado pelas telas do Figma (Site · Section 1: 1920, 1440, 1360 e
   458), que batem uma a uma com os breakpoints daqui. A ideia é o
   símbolo ser fundo, não conteúdo: a caixa dele só começa em
   --logo-topo, bem abaixo do botão, e sangra pelo pé da dobra, que é
   quem recorta. A proporção 133/123 é a do próprio símbolo, então o
   shader preenche a caixa inteira sem cortar nada.                    */
.hero.hero--claro{
  background:var(--branco); color:var(--ink); overflow:hidden;
  height:970px;
  --logo-larg:1683px;
  --logo-topo:523px;
}
.hero--claro .d-hero{ color:var(--ink); }
.hero--claro .hero-sub{ color:var(--apoio); }
.hero--claro .hero-centro{ position:relative; z-index:1; margin-top:217px; }

.hero-logo{
  position:absolute; top:var(--logo-topo); left:50%;
  transform:translateX(-50%);
  width:var(--logo-larg);
  aspect-ratio:133 / 123;
  z-index:0; pointer-events:none;
}
.hero-logo canvas{
  display:block; width:100%; height:100%;
  opacity:0; transition:opacity .5s var(--ease);
}
.hero-logo.esta-pronto canvas{ opacity:1; }

/* a referência troca o bold do título por light; o resto do hero segue */
.hero--claro .d-hero{ font-weight:400; }

/* ---------- faixa de clientes como banda própria ----------
   Saiu de dentro do hero e agora fecha a dobra dos casos, com fundo
   transparente como no Figma. Cada PNG entra como máscara, então a cor
   dos logos vem daqui e não do arquivo; --ar guarda a proporção de cada
   um, que é o que dá largura à máscara. */
.logobar.logobar--faixa{
  position:relative; left:auto; right:auto; bottom:auto;
  width:100%; margin-top:18px; background:transparent;
}
.logobar-logo{
  display:block; flex:none;
  height:var(--h, 30px); aspect-ratio:var(--ar);
  background-color:#bbcfd9;
  -webkit-mask:var(--l) center / contain no-repeat;
          mask:var(--l) center / contain no-repeat;
  transition:background-color .25s var(--ease);
}
.logobar-logo:hover{ background-color:var(--apoio); }
.logobar-logo[data-logo="vivo"]{ --l:url('../assets/faixa/vivo.png'); }
.logobar-logo[data-logo="leroy-merlin"]{ --l:url('../assets/faixa/leroy-merlin.png'); }
.logobar-logo[data-logo="panvel"]{ --l:url('../assets/faixa/panvel.png'); }
.logobar-logo[data-logo="sicoob"]{ --l:url('../assets/faixa/sicoob.png'); }
.logobar-logo[data-logo="sicredi"]{ --l:url('../assets/faixa/sicredi.png'); }
.logobar-logo[data-logo="zema"]{ --l:url('../assets/faixa/zema.png'); }

/* faixa de clientes em loop contínuo */
.logobar{
  position:absolute; left:0; right:0; bottom:0; height:103px;
  display:flex; align-items:center; overflow:hidden; background:var(--vidro);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logobar-trilho{
  display:flex; flex:none; width:max-content;
  animation:desliza 90s linear infinite;
}
.logobar:hover .logobar-trilho{ animation-play-state:paused; }
.logobar-grupo{ display:flex; flex:none; align-items:center; gap:64px; padding-right:64px; }
.logobar-grupo img{
  height:30px; width:auto; flex:none;
  opacity:.85; transition:opacity .25s var(--ease);
}
/* compensação óptica: logo quadrado pede mais altura que logo deitado */
.logobar-grupo img[src*="leroy"]{ height:48px; }
.logobar-grupo img[src*="mime"]{ height:34px; }
.logobar-grupo img:hover{ opacity:1; }
@keyframes desliza{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* ============================================================
   02 · QUEM SOMOS
   ============================================================ */
.quem-somos{ width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto; padding:179px 0 60px; }
.eco-grid{ display:grid; grid-template-columns:minmax(0,572px) minmax(0,586px); justify-content:space-between; gap:48px; align-items:start; }
.eco-texto{ display:flex; flex-direction:column; align-items:flex-start; }
.eco-texto .chapeu{ margin-bottom:21px; }
.eco-texto .d-hero{ max-width:563px; margin-bottom:21px; }
.eco-texto .corpo-16{ max-width:587px; line-height:1.1; margin-bottom:39px; }
.eco-texto .justificativa{ max-width:563px; font-size:18px; line-height:1.45; color:var(--apoio); margin-bottom:26px; }
.eco-midia{ height:442px; border-radius:40px; margin-top:-31px; }

/* ---------- quem somos centrado, versão da referência ----------
   O texto vai para o eixo e os cartões soltos ficam ao redor, nas
   posições medidas na tela 1920 do Figma (--x em % da tela, --y em px
   a partir do topo da dobra). São placeholders: entram imagens depois. */
.quem-somos.quem-somos--centro{
  position:relative; width:100%; max-width:none;
  padding:167px 0 96px; min-height:1240px; overflow:hidden;
  /* vira contêiner para o desfoque dos elementos soltos acompanhar a
     largura da tela em vez de ficar preso em px */
  container-type:inline-size;
}
.eco-soltos{ position:absolute; inset:0; z-index:0; pointer-events:none; }
/* Cada solto é o lugar de uma foto: --img entra quando a imagem chegar
   e --tom é o preenchimento até lá. O desfoque é o do Figma, só que em
   cqw para acompanhar a tela.

   --p vem do JS e vale 0 quando a dobra encosta no pé da tela e 1
   quando ela sai pelo topo. Ele comanda duas coisas: a entrada, que
   começa depois que o texto já apareceu (daí o corte em .12), e a
   subida, contínua e proporcional a --z, que é a profundidade. O de
   frente percorre 180px enquanto os de trás percorrem 78px, e é essa
   diferença de velocidade que dá o volume. */
.solto{
  position:absolute; left:var(--x); top:var(--y); width:var(--w);
  aspect-ratio:158 / 96; border-radius:7.6%;
  background:var(--img, none) center / cover no-repeat, var(--tom, var(--nevoa));
  filter:blur(var(--desfoque, 0cqw));
  /* entram depois do texto: o corte em .22 é o ponto do scroll em que o
     fade in up do bloco central já terminou. Cada um espera mais um
     tanto conforme a profundidade, então os do fundo chegam primeiro e
     o da frente fecha a cena. */
  opacity:clamp(0, (var(--p, 0) - .22 - var(--z) * .08) * 2.6, 1);
  transform:translate3d(0, calc((.5 - var(--p, 0)) * (60px + var(--z) * 120px)), 0);
  will-change:transform, opacity;
}

.eco-centro{
  position:relative; z-index:1;
  width:min(587px, 100% - var(--gutter) * 2); margin:0 auto;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.eco-centro .chapeu{ margin-bottom:21px; }
.eco-centro .d-hero{ max-width:563px; margin-bottom:21px; }
/* a segunda metade da frase muda de peso e de cor, como no Figma */
.eco-realce{ font-weight:600; font-style:italic; color:var(--muted); }
.eco-centro .justificativa{ max-width:563px; font-size:18px; line-height:1.45; color:var(--apoio); margin-bottom:21px; }
.eco-centro .corpo-16{ max-width:587px; line-height:1.1; margin-bottom:39px; }
.numeros--centro{ margin-top:64px; width:min(597px, 100%); }
.numeros--centro .num{ align-items:center; text-align:center; }
.numeros--centro .num-valor{ justify-content:center; }

.numeros{ display:flex; align-items:flex-start; gap:30px; margin-top:92px; }
.num{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:8px; }
/* a unidade sai do numero para o numero continuar dominante e nao estourar
   a coluna: "+1.000" no corpo de display, "empresas" num degrau abaixo */
.num-valor{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.num-unidade{ font-family:var(--display); font-weight:400; font-size:calc(var(--fs-number) * .44);
  line-height:1; color:var(--ink); }
.num-legenda{ font-size:14px; line-height:1.4; color:var(--apoio); }
.divisor{ width:1px; height:76px; background:var(--divisor); flex:none; }

/* ---------- cabeçalho de dobra ---------- */
.cabecalho{ display:flex; justify-content:space-between; gap:210px; }
.cab-esq{ width:min(657px, 60%); display:flex; flex-direction:column; gap:6px; }
.cab-esq .d-hero{ max-width:575px; }
.cab-apoio{ width:min(405px, 34%); font-size:18px; line-height:1.52; color:var(--corpo); text-align:right; align-self:center; }

/* ============================================================
   03 · SOLUÇÕES — sem hover no card, só o botão age
   ============================================================ */
.solucoes{ width:min(var(--container), 100% - var(--gutter) * 2); margin:165px auto 0; display:flex; flex-direction:column; gap:53px; }
/* ---------- CSS ÓRFÃO, confirmado em 18/09/2026 ----------
   .cards / .card / .card-midia / .card-corpo / .card-texto não são
   emitidos por gerador nenhum: varri todos os .py e todos os .html
   gerados atrás de `class="card"`, `class="cards"`, `card-midia`,
   `card-corpo` e `card-texto` e não achei uso nenhum. É sobra de uma
   versão anterior da seção de Soluções (o gerador atual é solucoes.py,
   com a classe .sol-card). Fica marcado e não apagado: remover é
   decisão do Renan, não minha. */
.cards{ display:flex; gap:25px; }
.card{ flex:1 1 0; min-width:0; }
.card{
  /* min-height, nao height: a copy v3 deixou o card de consultoria mais alto que
     os outros dois e altura travada cortava o botao */
  width:407px; min-height:659px; border-radius:40px; background:var(--cinza-card);
  display:flex; flex-direction:column; overflow:hidden;
}
.card-midia{ height:269px; background:#e4e4e4; flex:none; }
.card-corpo{ flex:1; display:flex; flex-direction:column; gap:29px; padding:16px 25px 32px; }
.card-texto{ display:flex; flex-direction:column; gap:16px; flex:1; min-height:0; }
.card .corpo-16{ line-height:1.45; }
.card-corpo .btn{ align-self:flex-start; flex:none; }

/* ============================================================
   04 · DEPOIMENTO — carrossel automático
   ============================================================ */
.depoimento{ width:min(var(--container), 100% - var(--gutter) * 2); margin:119px auto 0; display:flex; flex-direction:column; gap:24px; text-align:center; }
.dep-rotulo{ margin-bottom:0; }

.dep-area{ position:relative; }
/* recorta os slides que aguardam à direita, senão eles alargam a página */
.dep-palco{ position:relative; height:209px; overflow:hidden; }
.dep-slide{
  position:absolute; inset:0;
  display:flex; flex-direction:column; gap:24px; align-items:center;
  opacity:0; transform:translateX(70px) scale(.94);
  transition:opacity .72s var(--suave), transform .72s var(--suave);
  pointer-events:none;
}
.dep-slide.esta{
  opacity:1; transform:translateX(0) scale(1); pointer-events:auto;
  transition-delay:.2s;                      /* entra depois que o anterior sai */
}
.dep-slide.saiu{
  opacity:0; transform:translateX(-70px) scale(.94);
  transition-duration:.4s; transition-delay:0s;
}
.d-quote{ max-width:652px; }
.dep-autor{ display:flex; align-items:center; justify-content:center; gap:12px; text-align:left; }
.dep-foto{ width:52px; height:52px; border-radius:50%; background:#eff3f5; flex:none; }
.dep-nome{ font-size:15px; font-weight:600; }
.dep-cargo{ font-size:13px; color:var(--muted-2); }

/* setas laterais */
.dep-seta{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:100px;
  background:var(--nevoa); color:var(--apoio);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
#depPrev{ left:-92px; }
#depNext{ right:-92px; }
.dep-seta:hover{ background:var(--ink); color:var(--branco); }
#depPrev:hover{ transform:translateY(-50%) translateX(-2px); }
#depNext:hover{ transform:translateY(-50%) translateX(2px); }

/* trilho navegável, no estilo da linha de carregamento */
.dep-trilho{
  width:min(615px, 100%); margin:36px auto 0;
  display:flex; gap:6px; align-items:center;
}
.dep-seg{
  flex:1; height:12px; padding:5px 0;      /* área de clique confortável, traço fino */
  position:relative; display:block;
}
/* trilho: cinza claro quando não visto, cinza médio quando já passou */
.dep-seg::before{
  content:''; position:absolute; left:0; right:0; top:5px; height:2px;
  background:var(--divisor); border-radius:2px;
  transition:background-color .35s var(--ease);
}
.dep-seg.is-visto::before{ background:var(--muted); }
.dep-seg:hover::before{ background:var(--apoio); }

/* preenchimento do que está em exibição, em animação pausável */
.dep-seg::after{
  content:''; position:absolute; left:0; top:5px; height:2px; width:0;
  background:var(--ink); border-radius:2px;
}
.dep-seg.is-ativo::after{ animation:encher var(--tempo, 5s) linear forwards; }
.depoimento.esta-parado .dep-seg.is-ativo::after{ animation-play-state:paused; }
@keyframes encher{ from{ width:0; } to{ width:100%; } }

/* ============================================================
   05 · RESULTADOS — carrossel de capas de caso
   ============================================================ */
.resultados{ width:min(var(--container), 100% - var(--gutter) * 2); margin:54px auto 0; padding:72px 0 31px; display:flex; flex-direction:column; gap:64px; }
/* A fileira de casos é a ponte entre a primeira e a segunda dobra: sobe
   164px por cima do pé do hero, que é onde o anel é recortado, e é ela
   quem esconde esse corte. O arco estático do carrossel sai, porque na
   referência quem faz de fundo para os cards é o próprio anel. */
.resultados--topo{
  position:relative; z-index:2;
  margin-top:-164px; padding:0; gap:0;
}
.resultados--topo .cases-palco::before{ display:none; }
.cases-palco{ position:relative; }
/* arco do símbolo da Metta atrás dos cards (Figma 689:5974).
   Ancorado 8px acima do topo do trilho e 118% da largura do container. */
.cases-palco::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:50%; transform:translateX(-50%);
  top:-8px; width:117.8%; aspect-ratio:1354 / 638;
  background:url('../assets/marca/arco-metta.svg') center top / 100% auto no-repeat;
}
/* a janela tem altura travada pela do card aberto, assim o trilho pode
   mudar de tamanho sem empurrar as setas. O corte é só lateral: em cima
   e embaixo o clip é folgado, senão a sombra do card aberto some. */
.cases-janela{
  position:relative; z-index:1;
  /* o palco é mais largo que o container: os cinco cards do Figma
     somam 1606 sobre um container de 1272 */
  width:126.26%; margin-left:-13.13%;
  aspect-ratio:1606 / 371.5;
  clip-path:inset(-40px 0 -260px 0);
  container-type:inline-size;
}
.cases-trilho{
  display:flex; align-items:center; height:100%; gap:25px;
  transition:transform .72s var(--suave);
  will-change:transform;
}

/* ---- card de caso: fechado é só a foto, aberto ganha moldura e nome ----
   A foto guarda a mesma proporção nos dois estados (515/358 aberto,
   336/234 fechado), então ela só cresce, nunca deforma. */
.case{
  flex:none; width:270px; border-radius:20px;
  background:transparent; padding:0;
  display:flex; flex-direction:column;
  transition:width .72s var(--suave), border-radius .72s var(--suave),
             padding .72s var(--suave), background-color .72s var(--suave),
             box-shadow .72s var(--suave);
}
.case-foto{
  border-radius:20px; overflow:hidden; background:var(--nevoa);
  transition:border-radius .72s var(--suave);
}
.case-foto img{
  width:100%; aspect-ratio:515 / 358; object-fit:cover; display:block;
}
.case-vazio{ width:100%; aspect-ratio:515 / 358; background:var(--nevoa); }
.case-info{
  height:0; opacity:0; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.16cqw; gap:0.8cqw;
  transition:height .72s var(--suave), opacity .34s var(--suave);
}
.case-nomes{ display:flex; flex-direction:column; min-width:0; }
.case-seg{
  font-family:var(--display); font-weight:500; font-size:min(11px, 1.0cqw); line-height:1;
  letter-spacing:.01em; text-transform:uppercase; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.case-cliente{
  font-family:var(--display); font-weight:500; font-size:min(17px, 1.6cqw); line-height:1;
  text-transform:uppercase; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.case-seta{
  flex:none; width:max(28px, 2.5cqw); height:max(28px, 2.5cqw); border-radius:100px;
  background:#b0cad8; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .3s var(--ease), transform .3s var(--ease);
}
.case:hover .case-seta{ background:var(--amarelo); }

.case.is-centro{
  width:442px; border-radius:34px; padding:0.848cqw;
  background:#fff;
  box-shadow:0 86px 120px -66px rgba(0,0,0,.25), 0 6px 26px rgba(12,22,27,.07);
}
.case.is-centro .case-foto{ border-radius:30px; }
.case.is-centro .case-info{ height:3.9cqw; opacity:1; }

.cases-setas{ position:relative; z-index:1; display:flex; justify-content:space-between; margin-top:26px; }
/* as setas ficam paradas: só a cor reage, nada de deslocamento */
.seta{
  width:44px; height:44px; border-radius:100px; flex:none;
  background:var(--nevoa); color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color .22s var(--ease), color .22s var(--ease);
}
.seta:hover{ background:var(--ink); color:var(--branco); }

/* ============================================================
   06 · CTA FINAL
   ============================================================ */
.cta-dobra{ width:min(var(--container), 100% - var(--gutter) * 2); margin:54px auto 0; }
/* o degradê e as duas formas vêm do Figma 860:5452. O centro do radial
   fica bem abaixo da caixa, por isso o topo é o tom mais escuro e a
   base abre no azul. As formas são o arco da marca, desfocado. */
.painel{
  position:relative; overflow:hidden; container-type:inline-size;
  /* 60 de raio com canto iOS cheio: pedido de 15/09 para todo box de
     CTA final do site */
  color:var(--branco); border-radius:60px;
  background:radial-gradient(ellipse 93.1% 206% at 50% 199.6%,
             #283845 0%, #1a2730 50%, #0c161b 100%);
  padding:88px 64px; display:flex; flex-direction:column; align-items:center; gap:0;
  text-align:center;
}
.painel-brilho{
  position:absolute; z-index:0; pointer-events:none;
  width:29.61cqw; height:57.77cqw; max-width:none;
}
.painel-brilho--esq{ left:-9.03cqw; top:1.58cqw; }
.painel-brilho--dir{ left:75.72cqw; top:-21.93cqw; }
/* Figma 949:11234, que e instancia do componente de CTA final e vale para
   todas as paginas: a headline mede 820 e o apoio 560, os dois centrados.
   O apoio nao tinha largura nenhuma e corria de ponta a ponta do box. */
.painel .d-statement{ position:relative; z-index:1; max-width:820px; margin-bottom:87px; }
/* Figma 927:9269: no CTA final o titulo abre em 88, o apoio vem 24 abaixo
   dele, o botao 33 abaixo do apoio e o pe fecha em 105. O que estava no
   lugar jogava 87 entre titulo e apoio e colava o botao no texto. */
.painel:not(.painel--texto){ padding-bottom:105px; }
.painel:not(.painel--texto) .d-statement{ margin-bottom:24px; }
.painel:not(.painel--texto) .painel-apoio:last-of-type{ margin-bottom:33px; }
.painel-texto{ position:relative; z-index:1; max-width:614px; margin-bottom:78px; }
.painel-apoio{ width:560px; max-width:100%; margin-inline:auto; font-size:17px; line-height:1.5; }
/* o segundo paragrafo do CTA final pedia respiro: a classe saia no HTML
   desde sempre e nunca teve regra, entao os dois blocos chegavam colados
   e liam como um paragrafo so de seis linhas */
.painel-apoio--2{ margin-top:14px; }
.painel .btn{ position:relative; z-index:1; }

/* ============================================================
   07 · RODAPÉ
   ============================================================ */
/* o rodapé é full-bleed para o brilho ir de ponta a ponta; o conteúdo
   volta para a largura do container no .rod-in */
.rodape{ position:relative; overflow:hidden; margin-top:55px; padding:64px 0 40px; background:var(--branco); }
.rod-in{
  position:relative; z-index:1;
  width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
  display:flex; flex-direction:column; gap:40px;
}

/* ---------- brilho que desliza da direita para a esquerda ----------
   Duas faixas de gradiente com 200% de largura e o padrão repetido a cada
   50%: deslocar -50% emenda o ciclo sem salto. A animação é só transform,
   que roda no compositor, então não repinta o rodapé a cada quadro.
   Velocidades diferentes tiram a leitura de "loop".                    */
.rod-luz{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.rod-luz::before,
.rod-luz::after{
  content:''; position:absolute; top:0; bottom:0; left:0; width:200%;
  background-repeat:repeat-x; background-size:50% 100%;
  will-change:transform;
}
.rod-luz::before{
  background-image:radial-gradient(124% 108% at 50% 112%,
    #e9a700 0%, #ffc32a 30%, #ffe8ad 62%, rgba(255,232,173,0) 100%);
  animation:rod-luz-a 38s linear infinite;
}
.rod-luz::after{
  background-image:radial-gradient(82% 76% at 24% 108%,
    rgba(255,190,24,.72) 0%, rgba(255,232,173,.34) 48%, rgba(255,232,173,0) 100%);
  animation:rod-luz-b 61s linear infinite;
}
@keyframes rod-luz-a{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
@keyframes rod-luz-b{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

.rod-topo{ display:flex; justify-content:space-between; gap:64px; }
.rod-marca{ width:300px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.rod-logo{ height:44px; width:auto; margin-left:0; }
.rod-frase{ font-size:15px; line-height:1.5; color:var(--ink); }

.rod-colunas{ display:flex; gap:64px; }
.rod-col{ display:flex; flex-direction:column; gap:14px; }
.rod-titulo{ font-size:13px; font-weight:600; color:var(--ink); }
.rod-col a{ font-size:14px; color:var(--muted); width:fit-content; transition:color .2s var(--ease), transform .2s var(--ease); }
.rod-col a:hover{ color:var(--ink); transform:translateX(3px); }

.rod-linha{ height:1px; background:rgba(30,45,54,.15); }
.rod-base{ display:flex; align-items:center; justify-content:space-between; height:32px; }
.rod-copy{ font-size:14px; color:var(--ink); }
.rod-social{ display:flex; gap:12px; }
.social{
  width:32px; height:32px; border-radius:50%;
  border:2px solid var(--ink); background:transparent;
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.social:hover{ background:rgba(12,22,27,.12); transform:translateY(-2px); }

.rod-assinatura{ margin-top:13px; }
.rod-assinatura img{ width:100%; height:auto; }

/* ============================================================
   MENU COMPACTO (aparece de tablet para baixo)
   ============================================================ */
/* Figma 1070:7018: caixa de 33x33 sem vidro atras, tres tracos de 17x2
   nos y 9,9 / 16,5 / 23,1 - passo de 6,6, ou seja 4,6 de vao livre.
   A caixa tem 33 e nao 44 porque e a medida do arquivo; o alvo de toque
   de 44 volta pelo ::after, que cresce a area sem mexer no desenho. */
.nav-menu{
  display:none; position:relative; width:33px; height:33px; background:none; border:0;
  flex-direction:column; align-items:center; justify-content:center; gap:4.6px;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.nav-menu::after{ content:''; position:absolute; inset:-6px; }
.nav-menu span{
  display:block; width:17px; height:2px; background:var(--branco); border-radius:2px;
  transition:transform .3s var(--suave), opacity .2s var(--ease);
}
/* aberto vira X: o traco do meio some e os de fora se cruzam sobre ele */
.nav.esta-aberto .nav-menu span:first-child{ transform:translateY(6.6px) rotate(45deg); }
.nav.esta-aberto .nav-menu span:nth-child(2){ opacity:0; }
.nav.esta-aberto .nav-menu span:last-child{ transform:translateY(-6.6px) rotate(-45deg); }
/* o foco por teclado precisa de anel proprio, porque a pilula saiu */
.nav-menu:focus-visible{ outline:2px solid var(--amarelo); outline-offset:4px; border-radius:6px; }

/* DROPBOX do arquivo (1270:4841): caixa de raio 24 com 6 de recuo, o
   mesmo vidro da pilula (12,22,27 a 15% com desfoque de 70,75) e itens
   de 39 de altura com 8 de vao. Era 22/14 de recuo, vao de 2 e fundo
   chapado a 92%.
   A folga vem do no novo (1340:21496 e 1270:4848, 15/09): a barra termina
   em 33 e o painel abre em 58, entao sao 25 e nao os 12 que estavam aqui.
   A largura e a mesma da barra, 333 de 333. */
.nav-painel{
  display:none; flex-direction:column; gap:8px;
  margin:25px auto 0; padding:6px;
  width:min(var(--container), 100% - var(--gutter) * 2);
  border-radius:24px; background:rgba(12,22,27,.15);
  backdrop-filter:blur(70.75px); -webkit-backdrop-filter:blur(70.75px);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .28s var(--ease), transform .32s var(--suave), visibility .28s;
}
.nav-painel a{
  display:flex; align-items:center; justify-content:center;
  height:39px; padding:0 8px; border-radius:100px; text-align:center;
  font-size:14px; font-weight:500; color:var(--branco);
  transition:background-color .2s var(--ease);
}
/* o vidro do painel agora e translucido, entao o texto segue o tema da
   dobra como os itens da barra ja seguiam */
.nav.painel-claro .nav-painel a{ color:var(--ink); }
.nav.painel-claro .nav-painel a:hover{ background:rgba(12,22,27,.08); }
.nav.painel-claro .nav-painel-sub{ color:#435965 !important; }
.nav-painel a:hover{ background:var(--vidro-forte); }
.nav-painel-sub{ font-size:14px !important; color:var(--nav-texto) !important; }
/* a regra .nav-painel a vence o .btn por especificidade e deixava o CTA
   com canto de 12px: aqui ele volta a ser redondo como no resto do site */
.nav-painel .btn{ height:39px; padding:0 16px; margin-top:6px; font-size:14px;
  border-radius:100px; justify-content:center; color:var(--ink); }
.nav-painel .btn:hover{ background:#f2f5f7; }
.nav.esta-aberto .nav-painel{ opacity:1; visibility:visible; transform:translateY(0); }

/* ============================================================
   BREAKPOINTS
   base do arquivo = desktop 1440, idêntico ao wireframe
   ============================================================ */

/* ---------- widescreen ---------- */
@media (min-width:1728px){
  :root{
    --container:1400px; --gutter:120px;
    --fs-hero:46px; --fs-statement:48px; --fs-quote:34px; --fs-number:56px; --fs-card:26px;
  }
  .hero{ height:820px; }
  .hero-centro{ margin-top:250px; }
  /* tela 1920 do Figma: mesmo enquadramento e mesmo corpo de título que
     a tela de 1440, então as três primeiras dobras não acompanham o
     --fs-hero de 46px do widescreen */
  .hero--claro .hero-centro{ margin-top:217px; }
  .hero--claro .d-hero,
  .resultados--topo .d-hero,
  .quem-somos--centro .d-hero{ font-size:40px; }
  .eco-grid{ grid-template-columns:minmax(0,620px) minmax(0,640px); }
  .eco-midia{ height:480px; }
}

/* ---------- desktop mini / notebook ---------- */
@media (max-width:1439px){
  :root{
    --gutter:48px;
    --fs-hero:34px; --fs-statement:36px; --fs-quote:26px; --fs-number:42px; --fs-card:22px;
  }
  .hero{ height:auto; padding-bottom:103px; }
  .hero-centro{ margin:180px auto 90px; }
  /* tela 1360 do Figma. A largura vira fluida e passa exatamente pelos
     dois pontos desenhados: 1479px em 1360 e 1087px em 458. */
  .hero--claro{
    --logo-larg:calc(888px + 43.46vw);
    --logo-topo:552px;
  }
  .hero--claro .hero-centro{ margin:196px auto 0; }
  .quem-somos{ padding:120px 0 48px; }
  .eco-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; }
  .eco-midia{ height:auto; aspect-ratio:586/442; margin-top:0; }
  .eco-texto .d-hero{ margin-bottom:18px; }
  .eco-texto .corpo-16{ line-height:1.45; margin-bottom:32px; }
  .numeros{ margin-top:64px; gap:22px; }
  .num{ width:auto; flex:1 1 0; min-width:0; }
  .solucoes{ margin-top:110px; }
  .card{ height:auto; min-height:560px; }
  .card-midia{ height:200px; }
  .depoimento{ margin-top:100px; }
  #depPrev{ left:-64px; }
  #depNext{ right:-64px; }
  .resultados{ padding-top:56px; }
  .painel{ padding:64px 48px; }
}

/* ---------- tablet ---------- */
@media (max-width:1023px){
  :root{
    --gutter:32px;
    --fs-hero:30px; --fs-statement:30px; --fs-quote:23px; --fs-number:38px; --fs-card:21px;
  }
  /* header vira logo + botão */
  /* no frame de celular (1070:7048) a barra abre em y=34 e tem 33 de
     altura, a mesma do hamburguer. Aqui eram 56, o que descia a marca
     11,5 em relacao ao arquivo. */
  .nav{ top:34px; }
  .nav-pill{ display:none; }
  /* sem hover no celular, e o painel do hamburguer ja lista as paginas */
  .nav-sub{ display:none; }
  .nav-menu{ display:flex; }
  .nav-painel{ display:flex; }
  /* 25/09: o painel fechado continua no fluxo (so invisivel), entao o
     <header> media 34 a 572 no celular e engolia o toque de tudo que
     estivesse embaixo dessa faixa: o "Entre em contato" do hero de
     Palestras nao respondia. Fechado, o header deixa o toque passar e so a
     barra (logo + hamburguer) recebe; aberto, volta ao normal. */
  .nav:not(.esta-aberto){ pointer-events:none; }
  .nav:not(.esta-aberto) .nav-in{ pointer-events:auto; }
  .nav-in{ height:33px; }
  .nav-logo{ position:static; transform:none; }

  .hero-centro{ margin:150px auto 80px; }
  /* daqui para baixo a copy quebra em mais linhas, então a altura da
     dobra passa a ser mínima e não fixa */
  .hero.hero--claro{ height:auto; min-height:900px; --logo-topo:545px; }
  /* abaixo de 1024 a coluna de texto ocupa a largura toda e não sobra
     branco lateral, então os elementos soltos saem de cena */
  .quem-somos--centro{ padding:120px 0 80px; min-height:0; }
  .eco-soltos{ display:none; }
  /* abaixo de 1024 o palco não comporta os cinco cards: volta a três,
     na largura do container, e a fileira encosta menos no hero */
  .cases-janela{ width:100%; margin-left:0; aspect-ratio:1272 / 460; }
  .resultados--topo{ margin-top:-80px; }
  .hero--claro .hero-centro{ margin:175px auto 0; }
  .hero-sub{ line-height:1.35; }
  .logobar{ height:84px; }
  .logobar-grupo{ gap:44px; padding-right:44px; }
  .logobar-grupo img{ height:24px; }
  .logobar-grupo img[src*="leroy"]{ height:38px; }
  .logobar-grupo img[src*="mime"]{ height:27px; }

  .quem-somos{ padding:88px 0 40px; }
  .eco-grid{ grid-template-columns:1fr; gap:36px; }
  .eco-midia{ order:-1; }
  .numeros{ flex-wrap:wrap; gap:28px 20px; }
  .num{ flex:1 1 40%; }
  .numeros .divisor{ display:none; }

  .cabecalho{ flex-direction:column; gap:20px; }
  .cab-esq{ width:100%; }
  .cab-apoio{ width:100%; text-align:left; }

  .solucoes{ margin-top:80px; gap:36px; }
  /* as três soluções deslizam para o lado, em vez de esticar a página */
  .cards{
    gap:20px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none; padding-bottom:4px;
  }
  .cards::-webkit-scrollbar{ display:none; }
  .card{ flex:0 0 300px; width:300px; min-height:0; height:auto; scroll-snap-align:start; }
  .card-midia{ height:190px; }

  .depoimento{ margin-top:80px; }
  .dep-palco{ height:auto; min-height:230px; }
  .dep-slide{ position:relative; inset:auto; }
  .dep-slide:not(.esta){ position:absolute; inset:0; }
  #depPrev{ left:-16px; }
  #depNext{ right:-16px; }
  .dep-seta{ width:38px; height:38px; }

  .resultados{ margin-top:40px; padding:40px 0 24px; }

  .painel{ padding:56px 36px; border-radius:24px; }
  .rodape{ margin-top:40px; padding-top:48px; }
  .rod-topo{ flex-direction:column; gap:40px; }
  .rod-colunas{ gap:48px; flex-wrap:wrap; }
}

/* tablet: o card inteiro é proporcional, então só os raios mudam */
@media (max-width:1023px){
  .case, .case-foto{ border-radius:18px; }
  .case.is-centro{ border-radius:32px; }
  .case.is-centro .case-foto{ border-radius:26px; }
}

/* no mobile o card aberto ocupa o palco inteiro: outra proporção de janela */
@media (max-width:767px){
  .cases-janela{ aspect-ratio:1272 / 1065; clip-path:inset(-24px 0 -120px 0); }
  .case-info{ padding:0 4.19cqw; gap:2.9cqw; }
  .case-seg{ font-size:12px; }
  .case-cliente{ font-size:21px; }
  .case-seta{ width:max(30px, 9.11cqw); height:max(30px, 9.11cqw); }
  .case.is-centro{ padding:2.19cqw 3.1cqw; }
  .case.is-centro .case-info{ height:14.21cqw; }
  .case, .case-foto{ border-radius:16px; }
  .case.is-centro{ border-radius:24px; box-shadow:0 40px 60px -40px rgba(0,0,0,.25); }
  .case.is-centro .case-foto{ border-radius:20px; }
  .cases-setas{ margin-top:16px; }
}

/* ---------- mobile ---------- */
@media (max-width:767px){
  :root{
    --gutter:20px;
    --fs-hero:26px; --fs-statement:26px; --fs-quote:20px; --fs-number:34px; --fs-card:20px;
    /* o card de listagem encolhe junto com a tela: capa 214 contra 282,
       e o miolo aperta os respiros. Vale para o card de artigo e para o
       de caso, que usam a mesma caixa. */
    --h-capa:214px;
    --card-pad-lado:var(--e-5);   /* 20 */
    --card-pad-pe:var(--e-6);     /* 24 */
    --card-gap:var(--e-5);        /* 20 */
  }
  .hero-centro{ margin:130px auto 64px; gap:26px; }
  /* tela 458 do Figma */
  .hero.hero--claro{ min-height:840px; --logo-topo:539px; }
  .resultados--topo{ margin-top:-40px; }
  .quem-somos--centro{ padding:96px 0 64px; }
  .hero--claro .hero-centro{ margin:139px auto 0; }
  .hero-sub{ font-size:16px; }
  .logobar{ height:72px; }
  .logobar-grupo{ gap:34px; padding-right:34px; }
  .logobar-grupo img{ height:20px; }
  .logobar-grupo img[src*="leroy"]{ height:32px; }
  .logobar-grupo img[src*="mime"]{ height:23px; }

  .quem-somos{ padding:64px 0 32px; }
  /* faixa de destaque em grade 2x2: os separadores viram borda das células */
  .numeros{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:48px; }
  .numeros .divisor{ display:none; }
  .num{ width:auto; gap:6px; padding:18px 16px; }
  .num .d-number{ font-size:clamp(20px, 6.6vw, 30px); }
  .num:nth-of-type(odd):not(:last-of-type){
    padding-left:0; border-right:1px solid var(--divisor);
  }
  .num:nth-of-type(even){ padding-right:0; }
  .num:not(:last-of-type){ border-bottom:1px solid var(--divisor); }
  .num-legenda{ font-size:13px; }

  .solucoes{ margin-top:56px; }
  .card-midia{ height:160px; }
  .card-corpo{ padding:16px 20px 26px; gap:22px; }

  .depoimento{ margin-top:56px; gap:20px; }
  .dep-palco{ min-height:270px; }
  .dep-autor{ flex-direction:column; text-align:center; gap:10px; }
  /* sem espaço lateral para as setas: a navegação fica nos traços */
  .dep-seta{ display:none; }

  .resultados{ padding-top:32px; }

  .painel{ padding:40px 24px; }
  .painel-apoio{ font-size:15px; }
  .rodape{ margin-top:32px; padding-top:36px; }
  .rod-colunas{ gap:32px; }
  .rod-col{ flex:1 1 40%; }
  .rod-base{ flex-direction:column; height:auto; gap:16px; align-items:flex-start; }
}

/* ============================================================
   PÁGINAS INTERNAS
   componentes que não existem na Home
   ============================================================ */

/* hero de página interna: texto à esquerda, card à direita */
.hero--interno{ height:auto; padding:0 0 92px; }
.hero-interno{
  width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
  padding-top:237px;
  display:grid; grid-template-columns:minmax(0,556px) minmax(0,634px);
  justify-content:space-between; gap:64px; align-items:start;
}
.hero-interno .d-hero{ color:var(--branco); margin-bottom:18px; }
.hero-interno-apoio{ font-size:18px; line-height:1.35; color:var(--branco); }
.hero-interno-filtro{ margin-top:22px; font-size:15px; line-height:1.5; color:rgba(255,255,255,.72); }
.hero--interno .hero-esq{ padding-top:48px; }

/* card de formulário */
.form-card{
  background:var(--nevoa); border-radius:24px; padding:40px;
  display:flex; flex-direction:column; gap:24px;
}
.form-card h2{ font-family:var(--display); font-weight:600; font-size:28px; line-height:1.2; color:var(--ink); }
.campo{ display:flex; flex-direction:column; gap:8px; }
.campo > span{ font-size:14px; font-weight:600; color:var(--ink); }
.campo input, .campo select, .campo textarea{
  font-family:var(--texto); font-size:14px; color:var(--ink);
  background:var(--branco); border:0; border-radius:8px; padding:13px 12px;
  width:100%; outline:none;
  transition:box-shadow .22s var(--ease);
}
.campo textarea{ min-height:100px; resize:vertical; }
.campo input::placeholder, .campo textarea::placeholder{ color:var(--muted); }
.campo select{ color:var(--muted); appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23738f9e' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
.campo select:valid{ color:var(--ink); }
.campo input:focus, .campo select:focus, .campo textarea:focus{ box-shadow:0 0 0 2px var(--apoio); }
.form-card .btn{ width:100%; padding:16px 32px; font-size:16px; font-weight:600; }
.form-nota{ font-size:13px; line-height:1.5; color:var(--muted); }

/* canal direto e blocos de atendimento */
.canal{ display:flex; flex-direction:column; gap:6px; }
.canal-rotulo{ font-size:13px; font-weight:600; color:var(--ink); }
.canal-valor{ font-size:15px; color:var(--apoio); }

/* faixa de números em página interna */
.numeros--linha{ margin-top:0; }

/* grade de cards de texto (sinais, etapas, entregas) */
.grade{ display:grid; gap:24px; }

/* faixa que fica em linha e vira rolagem lateral quando não cabe.
   flex:1 0 <base> cresce se sobrar espaço e nunca encolhe, então o
   scroll aparece sozinho na largura em que os itens não cabem mais. */
.trilho{
  display:flex; gap:24px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:4px;
}
.trilho::-webkit-scrollbar{ display:none; }
.trilho > *{ flex:1 0 230px; scroll-snap-align:start; }
.trilho.tem-mais{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,rgba(0,0,0,.3) 96%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 86%,rgba(0,0,0,.3) 96%,transparent 100%);
}
.grade--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.grade--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.grade--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
/* os cinco temas da palestra: o card 04 é bem mais longo que os outros e ocupa
   duas colunas, senão a grade fica com um buraco na última linha */
.grade--temas .bloco:nth-child(4){ grid-column:span 2; }
.bloco{
  background:var(--cinza-card); border-radius:24px; padding:28px;
  display:flex; flex-direction:column; gap:12px;
}
.bloco h3{ font-family:var(--display); font-weight:400; font-size:20px; line-height:1.2; color:var(--ink); }
.bloco p{ font-size:15px; line-height:1.5; color:var(--corpo); }
.bloco-num{ font-family:var(--display); font-weight:500; font-size:13px; color:var(--muted); }
/* bloco de justificativa, o mesmo card mas em escuro, para sair da lista */
.bloco--destaque{ margin-top:24px; background:var(--painel); color:var(--branco); padding:36px 40px; gap:16px; }
.bloco--destaque p{ color:rgba(255,255,255,.86); font-size:16px; }

/* painel escuro com texto centralizado */
.painel--texto{ padding:80px 88px; gap:20px; }
.painel--texto .painel-apoio{ max-width:min(674px, 100%); } /* 16/10: sem o 100% o texto vazava do painel no celular */

/* FAQ */
.faq{ width:min(var(--container), 100%); margin:0 auto; display:flex; flex-direction:column; }
.faq-item{ border-bottom:1px solid var(--divisor); }
.faq-p{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px 10px; text-align:left;
  font-size:16px; font-weight:500; color:var(--ink);
  transition:color .2s var(--ease);
}
.faq-p:hover{ color:var(--apoio); }
.faq-mais{ font-size:24px; line-height:1; color:var(--ink); transition:transform .3s var(--suave); flex:none; }
.faq-item.esta-aberto .faq-mais{ transform:rotate(45deg); }
.faq-r{
  max-height:0; overflow:hidden; padding:0 10px;
  font-size:15px; line-height:1.6; color:var(--corpo);
  transition:max-height .4s var(--suave), padding .4s var(--suave), opacity .3s var(--ease);
  opacity:0;
}
.faq-item.esta-aberto .faq-r{ max-height:340px; padding:0 10px 22px; opacity:1; }

/* dobra com fundo claro alternado */
.dobra--cinza{ background:var(--cinza-card); }

@media (max-width:1023px){
  .hero-interno{ grid-template-columns:1fr; gap:36px; padding-top:150px; }
  .hero--interno .hero-esq{ padding-top:0; }
  .hero--interno{ padding-bottom:64px; }
  .form-card{ padding:28px; }
  .grade--3, .grade--4{ grid-template-columns:1fr 1fr; }
  .grade--2{ grid-template-columns:1fr 1fr; }
  .grade--temas .bloco:nth-child(4){ grid-column:span 2; }
  .painel--texto{ padding:56px 36px; }
}
@media (max-width:767px){
  .hero-interno{ padding-top:130px; }
  .grade--3, .grade--4{ grid-template-columns:1fr; }
  .grade--2{ grid-template-columns:1fr; }
  .grade--temas .bloco:nth-child(4){ grid-column:auto; }
  .faixa-destaque{ flex-direction:column; align-items:flex-start; }
  .painel--texto{ padding:40px 24px; }
  .form-card{ padding:22px; }
}

/* ---------- cards de caso com texto ---------- */
.cases-grade{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:25px; }
/* ---- a moldura é a do card de artigo ----
   Alinhamento fechado em 18/09/2026. A rodada de 17/09 igualou só o
   truncamento do texto e o botão e parou aí: o card continuava com raio
   de 32 contra os 40 do .art-card, capa de 196 contra 282, capa SEM
   canto nenhum contra os 32 dela, e sem a elevação no hover. O Renan
   apontou os quatro.

   Agora as quatro medidas saem dos mesmos tokens que o .art-card usa
   (--r-grande, --r-capa, --h-capa) e o hover copia o dele, gesto por
   gesto. O padrão é o Figma 1294:955 (card 487 com raio 40, capa
   487x282 com raio 32, fundo #eff1f3 = --cinza-card).

   --capa-h existe porque duas variantes do card cabem em espaço menor
   (o trilho de "outros casos", de 326, e o de mentoria no celular): lá
   a capa guarda a PROPORÇÃO da capa padrão sobre a largura do card, em
   vez dos 282 crus, que virariam uma capa alta demais num card estreito. */
.caso-card{
  --capa-h:var(--h-capa);
  background:var(--cinza-card); border-radius:var(--r-grande); overflow:hidden;
  display:flex; flex-direction:column; gap:var(--card-gap-capa);
}
.caso-capa{
  height:var(--capa-h); background:#e4e4e4; flex:none;
  border-radius:var(--r-capa);
}
/* a elevação do .art-card, igual: sobe 4 e ganha sombra.

   Por que longhand e não o atalho `transition`: o card carrega
   [data-anima] na página de resultados, e a entrada por scroll mora em
   `[data-anima]{transition:opacity,transform; transition-delay:var(--d)}`,
   lá em cima neste arquivo. O atalho aqui zeraria aquele delay e mataria
   o escalonamento da entrada. Declarando só property/duration/timing, o
   delay do escalonamento continua vindo de lá, e `transform` segue na
   lista porque é o que a entrada anima.

   A subida sai por `translate`, e não por `transform`, pelo mesmo motivo
   que no .art-card: dois donos já escrevem transform neste card, a
   entrada por scroll (`.is-dentro [data-anima]{transform:translateY(0)}`)
   e a revelação do "ver mais casos" (`animation:casoEntra ... both`, que
   trava o transform do último quadro e vence qualquer regra do autor).
   `translate` é propriedade separada e compõe com os dois. */
.caso-card{
  transition-property:opacity, transform, translate, box-shadow;
  transition-duration:var(--dur);
  transition-timing-function:var(--suave), var(--suave), var(--suave), var(--ease);
}
.caso-card:hover{ translate:0 -4px; box-shadow:0 18px 40px rgba(12,22,27,.10); }
@media (prefers-reduced-motion: reduce){
  .caso-card{ transition:none; }
  .caso-card:hover{ translate:none; }
}
/* ---- o miolo é o do card de artigo ----
   Segunda parte do alinhamento, 18/09/2026. A primeira rodada acertou a
   moldura (raio, capa, canto da capa, hover) e o Renan viu de imediato
   que o miolo continuava diferente: título 21/25,2 contra 24/24, resumo
   15/22,5 contra 14/19,04, respiro 24/26/28 com vão de 12 contra
   16/25/32 com vão de 29, e nenhum espaço entre a capa e o corpo contra
   os 10 do padrão. Dava 555 de altura contra 607.

   Agora as medidas saem dos tokens de CARD DE LISTAGEM (fundacao.css) e
   a estrutura é a mesma: .caso-card-texto espelha a .art-card-texto.
   Essa caixa é o que permite dois respiros diferentes no mesmo miolo, e
   é ela quem cresce para empurrar o botão até o pé, papel que antes era
   do parágrafo (e que fazia o clamp cortar pela altura em vez de pela
   conta de linhas, mostrando uma quarta linha fatiada).

   A COR do resumo ficou de fora de propósito: o padrão usa --muted, que
   dá 2,9:1 sobre branco, abaixo do mínimo de 4,5:1. Aqui ele segue em
   --corpo. É decisão de cor, não de escala, e é do Renan. */
.caso-corpo{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--card-gap);
  padding:var(--card-pad-topo) var(--card-pad-lado) var(--card-pad-pe);
  flex:1;
}
.caso-card-texto{ display:flex; flex-direction:column; gap:var(--card-gap-texto); flex:1; }
.caso-corpo .chapeu{ color:var(--muted); }
/* o CTA é o mesmo botão pílula escuro do .art-card (.btn.btn--escuro.btn--sm),
   no lugar do link sublinhado que existia antes de 17/09. O card inteiro
   já é o <a>, então aqui ele não precisa do pointer-events:none que o
   .art-card usa: lá o botão fica por cima de um link de título separado,
   aqui não há link aninhado para proteger. */
.caso-corpo h3{
  font-family:var(--display); font-weight:var(--peso-regular);
  font-size:var(--fs-t3); line-height:1; color:var(--ink);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
}
/* pega o chapéu junto, e é de propósito: no .art-card a regra
   equivalente (.art-card p) também alcança o .art-cat, e é dela que o
   chapéu do padrão tira os 14/19,04. Escapar daqui deixaria os dois
   chapéus diferentes de novo. O peso 500 e o caixa alta continuam
   vindo do .chapeu. */
.caso-corpo p{
  font-size:var(--fs-corpo-s); line-height:1.36; color:var(--corpo);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
}
/* o align-items:flex-start do corpo já resolve o stretch do botão, mas o
   flex:none fica: sem ele o botão encolhe quando o texto é longo */
.caso-corpo .btn{ flex:none; }

/* ---------- lista numerada ---------- */
.lista-num{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 40px; }
/* lista de "pra quem é", marcador em amarelo porque é o sinal da marca */
.lista-check{ display:grid; gap:14px; max-width:820px; }
.lista-check li{ list-style:none; display:flex; gap:14px; align-items:baseline;
  font-size:17px; line-height:1.5; color:var(--corpo); }
.lista-check li::before{ content:""; width:7px; height:7px; border-radius:50%;
  background:var(--amarelo); flex:none; transform:translateY(-2px); }
/* faixa de fechamento do escopo */
.faixa-destaque{ margin-top:32px; display:flex; align-items:center; justify-content:space-between;
  gap:24px; background:var(--cinza-card); border-radius:24px; padding:26px 32px; flex-wrap:wrap; }
.faixa-destaque p{ font-family:var(--display); font-weight:400; font-size:20px; line-height:1.25; color:var(--ink); }
/* formulário que ocupa a largura da dobra, usado na página de consultoria */
/* o cartao largo ocupa a coluna inteira, como o resto da pagina */
.form-card--largo{ max-width:none; margin-top:32px; }
.lista-num li{ list-style:none; display:flex; gap:14px; align-items:baseline;
  padding:16px 0; border-bottom:1px solid var(--divisor); font-size:16px; color:var(--corpo); }
.lista-num li b{ font-family:var(--display); font-weight:500; font-size:13px; color:var(--muted); flex:none; }

/* ---------- duas colunas de critérios ---------- */
.criterios{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:25px; }
.criterio{ background:var(--cinza-card); border-radius:24px; padding:32px; }
.criterio h3{ font-family:var(--display); font-weight:400; font-size:20px; margin-bottom:18px; }
.criterio ul{ display:flex; flex-direction:column; gap:12px; }
.criterio li{ list-style:none; font-size:15px; line-height:1.5; color:var(--corpo);
  padding-left:20px; position:relative; }
.criterio li::before{ content:''; position:absolute; left:0; top:9px; width:8px; height:8px;
  border-radius:50%; background:var(--muted); }
.criterio--nao li::before{ background:var(--divisor); }

/* ---------- citação isolada ---------- */
.citacao{ width:min(var(--container), 100%); margin:0 auto; text-align:center;
  display:flex; flex-direction:column; gap:22px; align-items:center; }
.citacao > *{ max-width:820px; }
.citacao-autor{ font-size:15px; font-weight:600; }
.citacao-cargo{ font-size:13px; color:var(--muted-2); }

/* ---------- chips de setor ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{ padding:11px 20px; border-radius:100px; background:var(--cinza-card);
  font-size:14px; color:var(--apoio); }

/* ---------- perfil de quem conduz ---------- */
.perfil{ display:grid; grid-template-columns:minmax(0,460px) minmax(0,1fr);
  gap:64px; align-items:center; }
.perfil-foto{ background:var(--nevoa); border-radius:32px; aspect-ratio:460/420; }
.perfil-texto{ display:flex; flex-direction:column; gap:18px; }
.perfil-texto p{ font-size:16px; line-height:1.6; color:var(--corpo); }
.selos{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.selo{ padding:10px 18px; border-radius:100px; background:var(--cinza-card);
  font-family:var(--display); font-weight:500; font-size:12px; text-transform:uppercase;
  letter-spacing:.01em; color:var(--apoio); }

/* ---------- texto longo de caso ---------- */
.texto-longo{ display:grid; grid-template-columns:minmax(0,520px) minmax(0,1fr); gap:64px; }
/* ---------- fechamento de case: foto à esquerda, texto à direita ---------- */
.fecha{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; }
.fecha-foto{ margin:0; }
.fecha-foto img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.fecha-texto{ display:flex; flex-direction:column; gap:14px; }
.fecha-texto .d-hero{ margin:0; }
.fecha-texto .corpo-longo{ display:flex; flex-direction:column; gap:16px; margin-top:6px; }
.fecha-texto .corpo-longo p{ font-size:16px; line-height:1.6; color:var(--corpo); }
@media (max-width:1023px){
  .fecha{ gap:40px; }
}
@media (max-width:767px){
  /* empilhado, a foto continua vindo antes do texto */
  .fecha{ grid-template-columns:1fr; gap:28px; }
}
.texto-longo .corpo-longo{ display:flex; flex-direction:column; gap:16px; }
.texto-longo .corpo-longo p{ font-size:16px; line-height:1.6; color:var(--corpo); }

/* ---------- documento legal ---------- */
/* a caixa segue a coluna; o texto legal mantem a medida de leitura */
/* O texto legal ocupa a linha inteira do site, a mesma do menu e da
   primeira dobra. Vai de 100% e nao de var(--linha-site): a secao que
   envolve ele JA recua a margem, e --linha desconta a margem de novo,
   o que deixava o bloco 168 mais estreito e fora de prumo com o menu. */
.doc{ width:100%; max-width:var(--container); margin:0 auto; display:flex; flex-direction:column; gap:20px; }
/* no celular o arquivo recua o texto legal em 40 de cada lado, e nao nos 20
   do resto do site: coluna mais estreita para leitura longa */
@media (max-width:767px){
  .doc{ width:calc(100% - 40px); }
}
/* nada de teto de 820 aqui: o bloco parava no meio da coluna e deixava
   a metade direita vazia. Quem segura a largura e a linha do site. */
.doc h2{ font-family:var(--display); font-weight:400; font-size:24px; margin-top:20px; }
.doc p{ font-size:16px; line-height:1.65; color:var(--corpo); }

@media (max-width:1023px){
  .cases-grade{ grid-template-columns:1fr 1fr; }
  .lista-num, .criterios{ grid-template-columns:1fr; }
  .perfil, .texto-longo{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:767px){
  .cases-grade{ grid-template-columns:1fr; }
}

/* ---------- foto real dentro do case ---------- */
.foto{ display:flex; flex-direction:column; gap:12px; }
.foto img{ width:100%; height:auto; border-radius:32px; display:block; }
.foto--alta img{ aspect-ratio:1272/620; object-fit:cover; }
/* --muted (#738f9e) sobre branco da 2,9:1 de contraste, abaixo do minimo
   de 4,5:1 para texto pequeno. --nav-texto (#435965) e o mesmo cinza que a
   legenda de numero ja usa e fecha em 6:1. */
.foto-legenda{ font-size:13px; line-height:1.5; color:var(--apoio); }
.foto-credito{ color:var(--divisor); }
.fotos-par{ display:grid; grid-template-columns:1fr 1fr; gap:25px; }
.fotos-par img{ aspect-ratio:4/3; object-fit:cover; }
.fotos-tira{ display:grid; grid-template-columns:repeat(var(--n,3),1fr); gap:25px; }
.fotos-tira img{ aspect-ratio:4/3; object-fit:cover; }
@media (max-width:1023px){
  .fotos-tira{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){
  .fotos-par,
  .fotos-tira{ grid-template-columns:1fr; }
  .foto img{ border-radius:20px; }
}

/* ---------- hero de estudo de caso: mesma medida do hero da home ---------- */
.hero--case{ padding-bottom:120px; }
.hero--case .hero-interno{
  /* a caixa segue a coluna do site; quem segura a leitura sao os
     max-width do titulo e do apoio, que continuam estreitos */
  width:min(var(--container), 100% - var(--gutter) * 2);
  /* 217 da home menos a altura da tag e do respiro, para o título
     começar na mesma linha do título da home */
  padding-top:162px;
  grid-template-columns:minmax(0,1fr);
  justify-content:center; text-align:center; gap:0;
}
.hero--case .hero-esq{ display:flex; flex-direction:column; align-items:center; gap:18px; padding-top:0; }
.hero--case .d-hero{ max-width:743px; margin-bottom:0; }
.hero--case .hero-interno-apoio{ max-width:620px; line-height:1.35; }

/* tag de segmento */
.tag-seg{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:100px;
  background:var(--vidro); border:1px solid rgba(255,255,255,.16);
  font-family:var(--display); font-weight:500; font-size:11px;
  letter-spacing:.02em; text-transform:uppercase; color:var(--branco);
}
.tag-seg span{ opacity:.6; }

/* resumo executivo: mesma grade das seções de texto do case */
.resumo .d-hero{ max-width:520px; }
.resumo-corpo p{ font-size:18px; line-height:1.55; color:var(--corpo); }

@media (max-width:1023px){
  .hero--case{ padding-bottom:72px; }
  .hero--case .hero-interno{ padding-top:150px; }
}
@media (max-width:767px){
  .hero--case .hero-interno{ padding-top:130px; }
  .resumo-corpo p{ font-size:16px; }
}

/* ---------- outros casos: texto à esquerda, carrossel à direita ---------- */
.outros{ display:grid; grid-template-columns:minmax(0,352px) minmax(0,1fr); gap:56px; align-items:start; }
.outros-texto .chapeu{ margin-bottom:6px; }
.outros-nav{ display:flex; gap:12px; margin-top:32px; }
.outros-trilho{
  display:flex; gap:25px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;          /* mandatory brigava com a animação */
  scrollbar-width:none; -ms-overflow-style:none;
  /* 4/8 de respiro não cabem mais a elevação do hover, que sobe 4 e joga
     uma sombra de 18+40 para baixo: o trilho rola no eixo X, e isso já
     torna o Y recortado. Mesmo remédio de .result-janela, mais abaixo:
     abre espaço com padding e devolve ao fluxo com margem negativa, para
     a dobra não mudar de altura. O padding lateral fica como estava, ou
     o primeiro cartão sai do prumo com o texto. */
  padding:10px 4px 46px 0;
  margin:-6px 0 -38px;   /* sobra 4 em cima e 8 embaixo, a caixa de antes */
  /* a borda direita esmaece, sinalizando que há mais conteúdo */
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 82%, rgba(0,0,0,.25) 95%, transparent 100%);
          mask-image:linear-gradient(90deg, #000 0, #000 82%, rgba(0,0,0,.25) 95%, transparent 100%);
}
/* no fim da lista não há mais o que revelar, então a máscara sai */
.outros-trilho.no-fim{
  -webkit-mask-image:none; mask-image:none;
}
.outros-trilho::-webkit-scrollbar{ display:none; }
.outros-trilho .caso-card{ flex:none; width:326px; scroll-snap-align:start; }
/* cartão mais estreito que o padrão (326 contra 407), então a capa não
   leva os 282 crus: leva a mesma PROPORÇÃO da capa padrão sobre a
   largura do cartão. 326/407,33 x 282 = 225,7. */
.outros-trilho .caso-card{ --capa-h:226px; }

/* a capa agora pode ser imagem de verdade */
img.caso-capa{ width:100%; object-fit:cover; display:block; }

@media (max-width:1023px){
  .outros{ grid-template-columns:1fr; gap:28px; }
  .outros-nav{ margin-top:20px; }
}
@media (max-width:767px){
  /* mesma conta do desktop, agora sobre o cartão de celular:
     270/350 x 214 = 165,1 */
  .outros-trilho .caso-card{ width:270px; --capa-h:165px; }
}

/* ============================================================
   CAMPOS NO CELULAR: SEM ZOOM AO TOCAR (25/09)
   O Safari do iPhone (e o Chrome do iPhone, que usa o mesmo motor)
   da zoom na pagina quando o campo tocado tem letra menor que 16px,
   e depois a pessoa precisa tirar o zoom na mao. Os formularios
   estavam em 14 e 15. A saida e a letra de 16 nos campos, e NAO
   travar o zoom no viewport (maximum-scale / user-scalable=no), que
   tiraria de quem enxerga pouco o direito de ampliar a pagina.
   O !important e de proposito: cada formulario tem folha propria com
   seletores mais especificos (.ct-cartao .campo input etc.), e esta
   regra precisa valer para todos, inclusive os que vierem depois.
   ============================================================ */
@media (max-width:1023px){
  input:not([type=radio]):not([type=checkbox]):not([type=range]),
  select,
  textarea{ font-size:16px !important; }
}