/* Zigurate · a casca do site.
   Os tokens vêm de marca.css e NÃO se redeclaram aqui. Se faltar cor, a
   correção é em marca.css. Este arquivo só monta peça. */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--noite);color:var(--pedra);font-family:var(--txt);
  font-weight:300;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:var(--tit);font-weight:600;line-height:1.08;letter-spacing:-.015em;color:var(--papel)}
/* em fundo claro o rótulo em branco translúcido some: aqui ele é grafite */
.bloco.claro .modo h3{color:var(--grafite)}
.bloco.claro .modo p{color:var(--grafite2)}
.bloco.claro .modo,.bloco.claro .modos{border-color:var(--cerca)}

/* barra */
.barra::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;
  background:linear-gradient(180deg,rgba(10,11,13,.9),rgba(10,11,13,0))}
/* O VÉU DA BARRA VALE SEMPRE QUE ATRÁS DELA HÁ FILME, e não só depois de
   rolar 40px. Medido no pior quadro do filme da home: o menu ficava com
   2,81:1 de contraste, e o slider antigo já era ruim nos três planos
   (3,19 · 3,39 · 4,27, todos abaixo dos 4,5:1 de AA). A causa é que o menu
   mora à direita, onde o véu do hero é `transparent`, e o topo do véu
   vertical (0,6) não segura uma cena clara.
   Sobre a noite chapada este gradiente é INVISÍVEL, porque é noite sobre
   noite: ele só aparece onde precisa aparecer. Por isso pode ficar ligado.
   No modo dia continua saindo, senão seria um borrão escuro sobre o claro.
   Medido no pior quadro: 2,88:1 sem ele, 4,69:1 com ele. O valor do
   gradiente não mudou — 0,9 é o mesmo de antes, só deixou de ficar em
   opacidade 0 enquanto a página está no topo. A diferença entre a barra
   parada e a rolada passa a ser o desfoque, que é o que ela sempre quis
   dizer: "tem conteúdo passando por baixo". */
.barra:not(.dia)::after{opacity:1}
.barra.fundo::after{opacity:1}
.barra.dia .marca{color:var(--grafite)}
.barra.dia .marca b{color:var(--grafite2)}
.barra.dia .menu a{color:var(--grafite2)}
.barra.dia .menu a:hover{color:var(--grafite)}
/* âmbar como TEXTO sobre o dia tem contraste baixo: aqui ele vira o fundo */
.barra.dia .menu a.cta{background:var(--fio);border-color:var(--fio);color:var(--noite)}
.barra.dia::after{background:linear-gradient(180deg,rgba(241,236,227,.94),rgba(241,236,227,0))}
.barra{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:20px 5vw;transition:background .4s ease,backdrop-filter .4s ease}
.barra.fundo{backdrop-filter:blur(14px)}
/* o traço do símbolo é currentColor: a barra clara não precisa de um segundo SVG */
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--pedra)}
.marca svg{width:22px;height:22px;display:block}
.marca b{font-family:var(--tit);font-weight:600;font-size:.92rem;letter-spacing:.06em;color:var(--papel)}
.menu{display:flex;gap:26px;align-items:center}
.menu a{font-family:var(--rot);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fraco);text-decoration:none;transition:color .3s}
.menu a:hover,.menu a[aria-current]{color:var(--papel)}
.menu a.cta{border:1px solid var(--fio-borda);color:var(--fio);border-radius:var(--capsula);padding:9px 17px}
.menu a.cta:hover{background:var(--fio-veu)}

/* ══ O SELETOR DE LÍNGUA ═══════════════════════════════════════════════
   Três letras, a atual sem link. São <a> de verdade, com href e hreflang:
   um seletor em JS não é seguido pelo buscador, e as versões EN e ES nunca
   seriam indexadas. Vem antes do menu na ordem do DOM porque é decisão de
   entrada, não de navegação: quem cai na língua errada resolve isso primeiro.
   O `gap` é menor que o do menu de propósito, para as três letras lerem
   como um grupo só e não como mais três itens de menu. */
.ling{display:inline-flex;align-items:center;gap:9px;margin-right:8px;
  font-family:var(--rot);font-size:.55rem;letter-spacing:.16em}
.ling b{font-weight:400;color:var(--papel)}
.ling a{font-size:inherit;letter-spacing:inherit;color:var(--fraquinho);
  text-transform:uppercase;transition:color .2s var(--curva)}
.ling a:hover{color:var(--pedra)}
.barra.dia .ling b{color:var(--grafite)}
.barra.dia .ling a{color:var(--grafite3)}
.barra.dia .ling a:hover{color:var(--grafite)}

/* palco de vídeo em tela cheia */
.palco{position:relative;height:100svh;overflow:hidden;background:#000}
.palco > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,13,.55) 0%,transparent 26%,transparent 52%,rgba(10,11,13,.88) 100%)}
.dentro{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 5vw 12vh;max-width:1500px;margin:0 auto}

/* blocos de leitura */
.bloco{padding:16vh 5vw;max-width:1500px;margin:0 auto}
.bloco.claro{background:var(--dia);color:var(--grafite);max-width:none}

/* ── O FILME ATRÁS DE UMA SEÇÃO DE LEITURA ──────────────────────────────
   Os três blocos que sobraram do filme 1 entram atrás das seções que já
   dizem a mesma coisa que eles mostram. O `.palco` acima faz isso em tela
   cheia com uma frase; aqui embaixo o texto é longo, e a diferença muda
   o véu: no palco ele abre o meio, porque lá o texto mora na base; aqui
   ele cobre a seção inteira e o filme vira MATÉRIA DE FUNDO, não imagem.

   FULL-BLEED PELO CAMINHO QUE O `.claro` JÁ ABRIU: a `.bloco` tem
   max-width de 1500px, então um vídeo com inset:0 dentro dela pararia
   nos 1500 e deixaria duas faixas de noite nas laterais em tela larga.
   A `.bloco.claro` já resolvia isso soltando o max-width da section e
   devolvendo a medida ao `.dentro2`. Aqui é o mesmo movimento, e por isso
   a seção filmada também carrega o conteúdo dentro de um `.dentro2`. */
.bloco.filmado{position:relative;max-width:none;overflow:hidden}
.bloco.filmado > video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
/* as duas pontas fundem na noite: sem isso a seção filmada encosta na
   vizinha em borda dura e o corte aparece como um risco horizontal */
.bloco.filmado > .veu{background:linear-gradient(180deg,
  var(--noite) 0%,rgba(10,11,13,.88) 16%,rgba(10,11,13,.85) 50%,
  rgba(10,11,13,.9) 84%,var(--noite) 100%)}
.bloco.filmado .dentro2{position:relative;z-index:2;max-width:1500px;margin:0 auto}
.bloco.claro h2{color:var(--grafite)}
.bloco.claro .dentro2{max-width:1500px;margin:0 auto}
.chapeu{margin-bottom:22px}
h1.gigante{font-size:clamp(2.2rem,6vw,5.2rem)}
h2.grande{font-size:clamp(1.7rem,3.6vw,3.1rem);max-width:19ch}
.linha-fina{font-size:clamp(1rem,1.35vw,1.2rem);color:var(--fraco);max-width:52ch;margin-top:22px}
.claro .linha-fina{color:var(--grafite2)}

/* três colunas, uma linha um dado */
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:46px;margin-top:76px}
.tres .n{font-family:var(--tit);font-weight:500;font-size:clamp(1.25rem,1.8vw,1.62rem);
  line-height:1.24;letter-spacing:-.015em;color:var(--papel)}
/* a ênfase é PESO, não itálico: Space Grotesk não tem itálico de verdade
   e o browser inventaria um oblíquo torto */
.tres .n em{font-style:normal;font-weight:700}
.claro .tres .n{color:var(--grafite)}
.tres p{margin-top:16px;color:var(--fraco);font-size:.95rem}
.claro .tres p{color:var(--grafite2)}

/* prova */
.prova{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:70px}
.caso{border:1px solid var(--cerca);border-radius:var(--raio);padding:34px 36px;background:var(--dia2)}
.caso .q{font-family:var(--tit);font-weight:500;font-size:clamp(1.5rem,2.2vw,1.95rem);
  color:var(--grafite);line-height:1.14;letter-spacing:-.02em}
.caso .r{font-size:.95rem;color:var(--grafite2);margin-top:14px}
.caso .f{font-family:var(--rot);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grafite3);margin-top:22px}

/* rodapé */
.rodape{border-top:1px solid var(--linha);padding:70px 5vw 46px}
/* A TESE DA CASA, no topo do rodapé. Medida de leitura de verdade (58ch) e
   não a largura da tela: é o único texto longo do rodapé e o mais importante
   dele. Fica ACIMA das colunas de link porque é conteúdo, não navegação. */
.quemfaz{max-width:1500px;margin:0 auto 58px;padding-bottom:44px;border-bottom:1px solid var(--linha);
  display:grid;grid-template-columns:132px 1fr;gap:44px;align-items:start}
.quemfaz p{max-width:58ch;color:var(--fraco);font-size:.95rem;margin-top:16px;line-height:1.62}
.quemfaz p b{color:var(--pedra);font-weight:500}
/* O SELO É COLORIDO, e aqui o IHC não é marca de terceiro sendo citada: é a
   assinatura de quem faz, e entra com a cara dela em vez de achatada em
   silhueta como os logos de cliente.
   SEM FUNDO BRANCO, e isso foi medido antes de decidir: o arquivo oficial da
   marca é BRANCO com o espectro nos filetes, feito para fundo escuro. Sobre
   branco o "IHC" some e sobram só as listras coloridas. O que eu tinha pegado
   antes era a versão para papel claro, e por isso parecia frágil aqui.
   Fica em coluna própria e alinhado ao topo do texto: ao lado do parágrafo
   viraria bullet, e acima viraria cabeçalho de seção. */
.ihc-selo{display:block;width:100%;max-width:88px;transition:transform .3s var(--curva)}
.ihc-selo:hover{transform:translateY(-2px)}
.ihc-selo img{width:100%;height:auto;display:block}
@media(max-width:899px){
  .quemfaz{grid-template-columns:1fr;gap:22px;margin-bottom:44px;padding-bottom:34px}
  .ihc-selo{max-width:58px}
  .quemfaz p{font-size:.9rem;margin-top:14px}}
.rodape .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;max-width:1500px;margin:0 auto}
.rodape a{display:block;color:var(--fraco);text-decoration:none;font-size:.9rem;padding:5px 0}
.rodape a:hover{color:var(--papel)}
.rodape .fim{max-width:1500px;margin:54px auto 0;display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;border-top:1px solid var(--linha);padding-top:24px}
/* na assinatura o nome da casa é o que salta, e o resto sussurra */
.rodape .fim .mono{color:var(--fraquinho)}
.rodape .fim b{color:var(--fraco);font-weight:400}
.rodape .fim i{font-style:normal;font-variant-numeric:tabular-nums}
@media(max-width:899px){.rodape .fim{flex-direction:column;gap:8px}}

/* O CONVITE DO ZIGU. Mora aqui, e não no <style> da home, porque ele vive
   em todas as páginas: quem entra por /o-que-e ou /sobre também precisa de
   um atalho para a conversa. */
/* SÓ O AVATAR, sem rótulo: pedido dele em 12/08. O texto ao lado repetia o
   botão que já vive na barra fixa, e a figura sozinha basta — quem viu o
   filme reconhece o Zigu, e o `aria-label` continua dizendo o que ele faz
   para quem não vê a imagem.
   A ARTE FOI CLAREADA na geração (brilho +0.18, contraste 1.2): a original é
   noturna e, reduzida a 38px, o vazio dentro do capuz virava uma mancha
   preta. Conferido no tamanho real, não no arquivo grande. */
.zigu-fala{position:fixed;right:22px;bottom:22px;z-index:70;display:block;
  border-radius:50%;text-decoration:none;padding:3px;
  background:rgba(10,11,13,.82);border:1px solid var(--fio-borda);
  backdrop-filter:blur(12px);box-shadow:0 10px 34px -12px rgba(0,0,0,.7);
  transition:transform .25s var(--curva),border-color .25s,opacity .3s}
.zigu-fala img{width:50px;height:50px;border-radius:50%;object-fit:cover;display:block;
  background:var(--noite2)}
.zigu-fala:hover{transform:translateY(-2px) scale(1.04);border-color:var(--fio)}
/* no fim da página o contato já está na tela, e o convite sai de cena */
.zigu-fala.sai{opacity:0;pointer-events:none;transform:translateY(8px)}
@media(max-width:899px){
  /* MENOR NO RETRATO, e mais colado no canto: no iPhone ele estava caindo em
     cima do título da seção que explica. O botão flutuante pode cobrir fundo,
     nunca palavra. */
  .zigu-fala{right:12px;bottom:12px;padding:2px}
  .zigu-fala img{width:38px;height:38px}
}

/* botões */
/* `background:none` e `border:0` NO BASE, e isso não é zelo: o `.btn` nasceu
   para `<a>`, onde o fundo é transparente por natureza, e o site inteiro só o
   usava em âncora. No dia em que o quiz entrou na home com
   `<button class="btn vazio">voltar</button>`, o botão apareceu com o CINZA
   PADRÃO DO NAVEGADOR — `rgb(239,239,239)` — e o texto, que é papel a 58%,
   sumiu dentro dele. Nenhuma regra do site pintava aquele fundo: ele vinha do
   user-agent, e por isso não havia o que procurar nas folhas.
   `font:inherit` pela mesma razão: `<button>` não herda a fonte da página. */
.btn{display:inline-block;font-family:var(--rot);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;border-radius:var(--capsula);padding:15px 28px;
  background:none;border:0;cursor:pointer;
  transition:all .3s var(--curva)}
.btn.cheio{background:var(--pedra);color:var(--noite)}
.btn.cheio:hover{background:var(--papel)}
.btn.vazio{border:1px solid var(--linha);color:var(--fraco)}
.btn.vazio:hover{color:var(--papel);border-color:var(--pedra)}
.claro .btn.cheio{background:var(--grafite);color:var(--dia)}
.claro .btn.vazio{border-color:var(--cerca);color:var(--grafite2)}

/* o app: uma coluna, e o vídeo vira vertical */
@media (max-width:899px){
  .menu a:not(.cta){display:none}
  /* o seletor sobrevive ao menu recolhido: sem ele, quem abre na língua
     errada pelo celular fica preso nela */
  .ling{gap:7px;margin-right:2px}
  .ling a{display:inline}
  /* no celular a barra fica sobre a imagem o tempo todo: o degradê do topo é fixo */
  .barra::after{opacity:1;background:linear-gradient(180deg,rgba(10,11,13,.92) 0%,rgba(10,11,13,.55) 60%,rgba(10,11,13,0) 100%)}
  .barra.dia::after{background:linear-gradient(180deg,rgba(241,236,227,.96) 0%,rgba(241,236,227,.6) 60%,rgba(241,236,227,0) 100%)}
  .menu a.cta{background:rgba(10,11,13,.55);backdrop-filter:blur(8px)}
  .barra.dia .menu a.cta{background:var(--fio)}
  .bloco{padding:11vh 6vw}
  .tres{grid-template-columns:1fr;gap:36px;margin-top:52px}
  .prova{grid-template-columns:1fr}
  .rodape .cols{grid-template-columns:1fr;gap:26px}
  .rodape .fim{flex-direction:column;gap:12px}
  .dentro{padding:0 6vw 14vh}
  h2.grande{max-width:none}
}

/* a ilustração é parte do bloco, não enfeite: mesmo tamanho, mesmo respiro.
   O traço herda a cor do texto (currentColor), então o mesmo desenho serve
   na noite e no dia sem uma segunda versão. */
.fig{height:104px;margin-bottom:26px;color:var(--pedra)}
.claro .fig,.sim .fig{color:var(--grafite2)}
.fig svg{width:auto;height:100%;display:block;overflow:visible}
.fig.direita svg{margin-left:auto}
.figgrande{height:190px;margin:0 0 34px}
.figgrande svg{width:auto;height:100%;overflow:visible}
.tres .fig{height:76px;margin-bottom:20px}
.lista .it .fig{height:58px;margin:0}

/* O TRAÇO COMPENSA O TAMANHO, senão o desenho pequeno acinzenta.
   O viewBox tem 90 de altura: a espessura real na tela é 1.2 × (altura/90).
   A 58px isso dá 0,77px — abaixo de um pixel o browser dilui a linha e a
   figura parece cinza-suja em vez de traço de pedra. Aqui cada tamanho leva
   a espessura que devolve ~1,3px reais. É [[feedback-legibilidade-no-tamanho-real]]
   aplicada a desenho em vez de texto. */
.figgrande svg{stroke-width:1}      /* 190px → 2,1px */
.fig svg{stroke-width:1.2}          /* 104px → 1,39px */
.tres .fig svg{stroke-width:1.5}    /*  76px → 1,27px */
.caso .fig svg{stroke-width:1.6}    /*  70px → 1,24px */
.lista .it .fig svg{stroke-width:2} /*  58px → 1,29px */
.lista.comfig .it{grid-template-columns:74px 1fr}
.caso .fig{height:70px;margin-bottom:20px}
@media(max-width:899px){.figgrande{height:140px}.lista.comfig .it{grid-template-columns:1fr}}

/* ══ O RECADO DO FORMULÁRIO ═══════════════════════════════════════════════
   O que o envio responde: erro ao lado do botão, e o agradecimento no lugar
   do formulário inteiro. Vive no casca.css, e não no <style> da home, porque
   a página de contato usa o mesmo. */
.f-diz{font-family:var(--rot);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fraquinho);align-self:center}
.f-diz.ruim{color:var(--fio)}
.f-pronto{max-width:620px;margin-top:38px;padding:30px 32px;border:1px solid var(--fio-borda);
  border-radius:var(--raio);background:var(--fio-veu);display:flex;flex-direction:column;gap:10px}
.f-pronto b{font-family:var(--tit);font-weight:600;font-size:1.35rem;letter-spacing:-.02em;
  color:var(--papel)}
.f-pronto span{font-size:.95rem;line-height:1.6;color:var(--fraco)}
.f-pronto i{font-style:normal;color:var(--papel)}
@media(max-width:899px){.f-pronto{padding:24px 22px}.f-diz{width:100%;margin-top:4px}}