/* ==========================================================================
   INSTITUTO MARTINS THEODORO — home.css
   Só a página inicial. Carrega apenas na front page (ver functions.php).

   Ordem do arquivo = ordem da página. Cada seletor aparece uma vez.
   Depende dos tokens de theme.css.

   VALORES: são os da versão aprovada. A reescrita trocou a ARQUITETURA
   (sem !important, sem seletor repetido, sem token duplicado), não o
   desenho — cada medida abaixo foi lida do CSS anterior.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════
   1. HERO — Caramelo Refinado (direção C)

   O caramelo continua, com a saturação baixada o suficiente para o
   ouro se destacar dele. Antes o fundo era dourado atrás de traço
   dourado: os dois brigavam e nenhum vencia.

   DISTRIBUIÇÃO. O hero é uma grade de DUAS LINHAS — conteúdo e faixa.
   A primeira ocupa toda a folga (1fr) e centra o conteúdo dentro dela;
   a segunda encosta a faixa no rodapé.

   Isto substitui um remendo: antes eram `justify-content:center` com
   `margin-top:auto` na faixa. A margem automática absorvia TODA a folga
   e o center ficava sem nada para distribuir — o bloco de texto subia
   para o topo e era preciso compensar com padding. Com grid-template-rows
   a centragem é real e não depende de compensação.
   ══════════════════════════════════════════════════════════════════ */
.imt-hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  padding-top:var(--header-h);
  overflow:hidden;
  contain:layout paint style;
  color:var(--noir);

  background-color:#E6DCC6;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.28'/%3E%3C/svg%3E"),
    radial-gradient(130% 95% at 72% 24%, rgba(255,255,255,.58), transparent 60%),
    linear-gradient(172deg,#FDFCF9 0%,#F5EFE2 40%,#EDE4D2 74%,#E6DCC6 100%);
  background-size:180px 180px,auto,auto;
  background-repeat:repeat,no-repeat,no-repeat;
}

/* DUAS COLUNAS NA MESMA GRADE, dentro do mesmo contêiner.
   A arte deixou de ser `position:absolute`: agora ela é uma coluna, e
   por isso alinha com o texto pela grade em vez de por palpite. A borda
   direita da arte é a borda direita do contêiner — a mesma do menu, a
   mesma de todas as seções abaixo. */
/* A DIVISÃO É A PRÓPRIA RAZÃO ÁUREA: 1,618 para o texto, 1 para a arte.

   Antes a coluna da arte era `auto` — ou seja, a largura que a figura
   quisesse — e o texto ficava com a sobra. Isso deixava a fronteira
   entre os dois à mercê da figura, e não de uma decisão.

   Numa página cujo símbolo É a razão áurea, dividir a dobra por ela é a
   escolha óbvia, e ela resolve de quebra: com φ o texto fica com 62% e a
   arte com 38%, que é quase exatamente onde as duas se equilibram. */
.imt-hero-grid{
  /* A conta do contêiner, repetida aqui porque a arte precisa dela:
     .imt-wrap é `width:100%; max-width:var(--wrap)` com `--gut` de
     padding dos dois lados. */
  --vao:clamp(1.25rem,2.6vw,2.6rem);
  --conteudo:min(var(--wrap), 100vw - 2 * var(--gut));

  align-self:center;
  display:grid;
  /* A COLUNA DA ARTE É `auto`, NÃO UMA FRAÇÃO FIXA — e isso importa.

     Com `1.618fr 1fr` a proporção áurea ficava garantida, mas em tela
     baixa e larga a figura encolhe pelo limite de altura e sobrava
     coluna vazia do lado dela: o buraco voltava, agora dentro da
     própria coluna da arte. Medido em 1300 × 640: figura de 301px numa
     coluna de 423px.

     Com `auto`, a coluna vale exatamente a largura da figura, e o que
     ela não usa volta para o texto em vez de virar vão. A divisão áurea
     continua existindo — ela agora mora na largura da arte, logo
     abaixo. */
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--vao);
  align-items:center;
  padding-block:clamp(1.5rem,4vw,3rem);
}

/* O bloco de texto vira CONTÊINER de consulta. É o que permite ao
   título medir-se pela coluna em que ele vive, e não pela janela. */
.imt-hero-texto{min-width:0;container-type:inline-size}

/* O TÍTULO PRECISA PREENCHER A COLUNA DELE.

   Medido em 1440 × 900: a maior linha usava 558px de uma coluna de
   659px. Os 101px de sobra à direita, somados ao vão entre colunas,
   eram o buraco que aparecia no meio da dobra — não era a arte pequena,
   era o texto curto para o espaço que tinha.

   O corpo subiu de 4,6vw para 5,15vw, e o teto acompanhou. Na largura
   onde o contêiner trava em 1260px a fonte pararia de fazer sentido se
   continuasse crescendo, e é isso que o teto de 4,64rem impede. */
.imt-hero h1{
  font-family:var(--voice);
  font-size:clamp(2.4rem,5.15vw,5.2rem);
  font-weight:330;
  line-height:1;
  letter-spacing:-.03em;
  margin-bottom:1.5rem;
}

/* E AQUI A CORREÇÃO DE FATO.

   Enquanto o corpo vem de `vw`, ele mede a JANELA. Mas a linha do
   título vive na coluna de texto, e as duas não crescem juntas: quando
   a arte encolhe por falta de altura, a coluna engorda e o título fica
   igual — sobrando espaço exatamente onde o buraco aparecia. Em
   1366 × 657 sobravam 245px ao lado da maior linha.

   Com `cqw` o título passa a medir a própria coluna. A maior linha
   ocupa cerca de 92% dela em qualquer largura, e a sobra deixa de
   depender do formato da tela.

   A declaração de cima, em vw, fica como reserva: navegador sem
   consulta de contêiner ignora esta e usa aquela. */
@supports (container-type:inline-size){
  .imt-hero h1{font-size:clamp(2.4rem,11.25cqw,5.2rem)}
}

/* A cortina: cada linha sobe de trás de uma máscara. O overflow no
   invólucro é o que faz a máscara — por isso são dois elementos. */
.imt-curtain{display:block;overflow:hidden}
.imt-curtain-inner{display:block;transform:translateY(105%)}

.js-anim .imt-curtain-inner{animation:imt-curtain var(--t-entrada) var(--ease) both}
/* SEQUENCING: um passo de 150ms por linha. Não é duração, é ORDEM —
   por isso não usa os tokens de tempo de resposta. */
.js-anim .imt-l1{animation-delay:calc(var(--t-passo) * 1)}
.js-anim .imt-l2{animation-delay:calc(var(--t-passo) * 2)}

/* A LINHA 3 ACUMULA DUAS ANIMAÇÕES: a cortina de entrada e o brilho
   dourado. Elas precisam vir na MESMA declaração.

   `animation` é atalho: duas regras de mesma especificidade não somam,
   a última apaga a primeira. Era o que acontecia — .js-anim
   .imt-curtain-inner (0,2,0) em home.css apagava .imt-l3.imt-grad-text
   (0,2,0) de theme.css, porque home carrega depois. O brilho só
   aparecia quando o JS falhava e a regra da cortina não se aplicava. */
.js-anim .imt-l3.imt-grad-text{
  animation:
    imt-curtain var(--t-entrada) var(--ease) calc(var(--t-passo) * 3) both,
    imt-shine 7s var(--ease) 2;
}
@keyframes imt-curtain{to{transform:translateY(0)}}

/* Sem JS a cortina nunca roda — então a linha não pode nascer fora
   de vista. Mesmo princípio de falha segura do .imt-reveal. */
html:not(.js-anim) .imt-curtain-inner{transform:none}

.imt-hero-desc{
  font-size:var(--t-m);
  font-weight:300;
  line-height:1.75;
  color:#57514A;
  /* ERA 46ch, E ERA O MAIOR BURACO DA DOBRA.

     Medido: o parágrafo parava em 551px dentro de uma coluna de 681px.
     Somando o vão entre colunas, sobravam 167px de nada exatamente na
     altura em que o olho está lendo — mais do que ao lado do título.

     57ch continua dentro da faixa confortável de leitura, e a própria
     coluna serve de teto: ela nunca passa de ~60 caracteres. */
  max-width:57ch;
  margin-bottom:2.2rem;
}

.imt-hero-actions{display:flex;gap:.9rem;flex-wrap:wrap}

/* Texto vertical na MARGEM DA PÁGINA, fora do contêiner — como
   numeração de página de revista. Antes ele dividia a borda direita com
   a arte e os dois disputavam o mesmo lugar; agora a arte tem a coluna
   dela e este fica na goteira, que existia e estava vazia. */
.imt-hero-index{
  position:absolute;
  right:clamp(12px,1.6vw,26px);
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  writing-mode:vertical-rl;
  font-family:var(--display);
  font-size:.64rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gray-soft);
}

/* ── A arte, agora como coluna ────────────────────────────────────
   A largura é limitada pela ALTURA disponível: a proporção do símbolo é
   0,619 (13 × 21, dois Fibonacci), então uma altura máxima de 76vh dá
   uma largura de 76vh × 0,619. Sem esse limite ele estouraria a dobra em
   telas baixas — a figura é alta por natureza.

   ERA 60vh COM TETO DE 340px, e sobrava hero demais. Medido em
   1440 × 900: a grade ocupava 636px de uma dobra de 900, deixando 264px
   de folga vertical morta, e a maior linha do título usava 558px de uma
   coluna de 748px — mais 190px vazios ao lado dela. A figura era o único
   elemento que podia crescer para fechar os dois buracos ao mesmo tempo.

   OS TRÊS LIMITES EXISTEM POR MOTIVOS DIFERENTES. `76vh` cuida da
   dobra. `34vw` impede que ela domine em telas largas e baixas. O teto
   de 440px protege o TÍTULO: o contêiner trava em 1260px, mas a fonte
   continua crescendo até 4,4rem, então em telas muito grandes a coluna
   de texto é o recurso escasso. Com 440px sobram 642px para uma linha
   que precisa de 593px na fonte máxima.

   CUSTO: a arte repinta a cada quadro enquanto o hero está visível, e
   agora repinta uma área 1,6× maior. É a troca direta deste pedido. */
.imt-hero-mark{
  /* AQUI MORA A RAZÃO ÁUREA DA DOBRA.

     Descontado o vão, o que sobra é repartido entre texto e figura na
     proporção 1,618 : 1. A parte da figura é 1/(1+1,618) = 0,382.
     Numa página cujo símbolo É essa razão, dividir a dobra por ela não
     é enfeite conceitual: é a única divisão que não precisa ser
     justificada.

     O segundo limite continua sendo a altura, para a figura não
     estourar a dobra em telas baixas. Quando ele manda, a figura
     encolhe e a coluna encolhe junto — a sobra volta para o texto. */
  width:min(
    calc((var(--conteudo) - var(--vao)) * 0.382),
    calc(76vh * 0.619)
  );
  min-width:0;
}
.imt-hero-mark-fade{
  display:block;
  --mark-op:1;
  opacity:0;
  transform:scale(.96);
  animation:imt-mark-in var(--t-deliberado) 1.4s ease both;
}
@keyframes imt-mark-in{
  from{opacity:0;transform:scale(.96)}
  to{opacity:var(--mark-op);transform:scale(1)}
}
html:not(.js-anim) .imt-hero-mark-fade{opacity:var(--mark-op);transform:none;animation:none}

/* ══════════════════════════════════════════════════════════════════
   2. ESPIRAL ÁUREA — construção clássica

   SEM FILTRO, nem SVG nem CSS. Filtro não é composto em GPU: animar
   conteúdo dentro dele obriga a re-renderizar o filtro inteiro a cada
   quadro. Sobre o caramelo claro também não haveria neon a fazer — o
   desenho se sustenta como gravura.

   Geometria em template-parts/arte-hero.php.
   ══════════════════════════════════════════════════════════════════ */
.ea{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}

/* TRAÇO EM UNIDADES DO viewBox, e isso é uma CORREÇÃO, não preferência.

   Antes havia `vector-effect:non-scaling-stroke` aqui, para a espessura
   ficar igual em qualquer tamanho. O efeito colateral é que ele move o
   cálculo do traço inteiro para o espaço de TELA — inclusive o
   tracejado. Com isso o `pathLength="1000"` logo abaixo deixava de
   valer, e `stroke-dasharray:1000` passava a significar mil pixels de
   tela em vez do caminho inteiro.

   MEDIDO na página: o caminho dos quadrados tem 3.450px de tela, então
   um traço de mil pixels cobria 29% dele e o resto virava vão. A
   espiral, com 1.355px, ficava em 74%. Era isso que aparecia como
   figura quebrada em cantoneiras e arcos soltos — não era a animação
   em curso, era o desenho faltando pedaço o tempo todo.

   E piorava conforme a arte crescia: quanto maior a figura, mais longo
   o caminho em pixels, maior o buraco.

   As espessuras abaixo são as mesmas de antes, convertidas pela escala
   do viewBox. A consequência aceita é que agora o traço acompanha o
   tamanho da figura — de ~1,6px a ~2,6px na linha principal, entre a
   arte menor e a maior. Numa gravura isso é o comportamento certo. */
.ea path{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
}

/* pathLength="1000" normaliza: o mesmo par dasharray/dashoffset serve
   para a espiral e para os quadrados, que têm comprimentos bem
   diferentes. */
@keyframes ea-tracar{
  0%{stroke-dashoffset:1000}
  30%{stroke-dashoffset:0}
  75%{stroke-dashoffset:0}
  100%{stroke-dashoffset:-1000}
}

/* Na referência os quadrados e a espiral têm o mesmo peso de luz — um
   não é fundo do outro. */
.ea-halo   {stroke:#C79A3F;stroke-width:.268;opacity:.10}
.ea-linha  {stroke:#A87F2C;stroke-width:.084;opacity:1}
.ea-quadros{stroke:#A87F2C;stroke-width:.054;opacity:.72}

/* Os quadrados entram logo atrás da espiral: a construção aparece, a
   curva a percorre. */
.js-anim .ea-halo,
.js-anim .ea-linha{animation:ea-tracar 9s cubic-bezier(.5,0,.2,1) infinite}
.js-anim .ea-quadros{animation:ea-tracar 9s cubic-bezier(.5,0,.2,1) .35s infinite}

/* Sem JS nada anima, então o traçado não pode nascer escondido. */
html:not(.js-anim) .ea path{stroke-dashoffset:0}

/* O ponto de luz. offset-distance vira transform: compositor, não
   pintura.

   ATENÇÃO: este caminho é cópia do <path> da espiral em
   template-parts/arte-hero.php — offset-path não aceita referência a um
   elemento. Mudou lá, muda aqui. */
.ea-particula{
  fill:#8A6520;
  stroke:none;
  offset-path:path("M 0 -1 A 1 1 0 0 0 1 0 A 1 1 0 0 0 2 -1 A 2 2 0 0 0 0 -3 A 3 3 0 0 0 -3 0 A 5 5 0 0 0 2 5 A 8 8 0 0 0 10 -3 A 13 13 0 0 0 -3 -16");
  offset-rotate:0deg;
  opacity:0;
  animation:ea-correr 9s cubic-bezier(.42,0,.3,1) infinite;
}
@keyframes ea-correr{
  0%,30%{offset-distance:0%;opacity:0}
  36%{opacity:.9}
  70%{offset-distance:100%;opacity:.9}
  78%{offset-distance:100%;opacity:0}
  100%{offset-distance:100%;opacity:0}
}

/* Respiração e cintilação vivem em <div> próprias, fora do SVG: cada
   uma é camada de compositor, e o navegador desloca ou esmaece o
   resultado já pronto em vez de repintar o desenho. */
.ea-respira{
  display:block;width:100%;
  animation:ea-respira 16s ease-in-out infinite;
  will-change:transform;
  backface-visibility:hidden;
}
@keyframes ea-respira{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-.8%)}
}

.ea-cintila{
  display:block;width:100%;
  animation:ea-cintila 13s steps(1,end) infinite;
}
@keyframes ea-cintila{
  0%,100%{opacity:1}
  52%{opacity:1}52.4%{opacity:.9}52.8%{opacity:1}
  84%{opacity:1}84.3%{opacity:.94}84.6%{opacity:1}84.9%{opacity:.86}85.3%{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .ea path{stroke-dashoffset:0}
  .js-anim .ea path,
  .ea-particula,.ea-respira,.ea-cintila{animation:none}
  .ea-particula{opacity:0}
}

/* ══════════════════════════════════════════════════════════════════
   3. MARQUEE
   Estático: rolar em laço não guiava, não conectava e não respondia —
   e obrigava a esperar a frase passar para ler a credencial.
   ══════════════════════════════════════════════════════════════════ */
.imt-marquee{
  position:relative;
  border-top:1px solid rgba(124,90,33,.16);
}
.imt-marquee-track{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.2rem 0;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding:1.15rem var(--gut);
}
.imt-marquee-item{
  display:flex;
  align-items:center;
  gap:1.1rem;
  padding:.35rem 1.2rem;
  font-family:var(--display);
  font-size:.67rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gray);
}
/* O ponto é separador, some no último item da linha. */
.imt-marquee-item:last-child .imt-dot{display:none}
.imt-dot{
  width:3px;height:3px;
  border-radius:50%;
  background:var(--gold-2);
  opacity:.8;
  flex:none;
}

/* ══════════════════════════════════════════════════════════════════
   4. WAYFINDING — as duas trilhas
   Faz a ponte do caramelo do hero até o branco da primeira seção.
   ══════════════════════════════════════════════════════════════════ */
/* MESMA COR DO PÉ DO HERO, CHAPADA.

   Antes havia aqui um gradiente do caramelo até o branco. Numa faixa de
   135px isso não faz ponte: faz emenda — a transição inteira acontece
   num pedaço estreito e o olho lê uma barra separada, colada embaixo do
   hero. Era a "sensação de quebra".

   O hero termina exatamente em #E6DCC6, e é essa a cor daqui. A junção
   entre os dois some, e o wayfinding passa a ser o rodapé do hero, não
   uma faixa própria. A troca para o branco acontece na fronteira
   seguinte, onde ela é uma decisão de seção — marcada pelo fio de baixo. */
.imt-wayfind{
  background-color:#E6DCC6;
  border-bottom:1px solid rgba(124,90,33,.18);
  contain:layout paint style;
}
.imt-wayfind-grid{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
  display:grid;
  grid-template-columns:1fr 1fr;
}
.imt-way-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:1.5rem;
  padding:clamp(2rem,4.4vw,2.9rem) clamp(1.2rem,3vw,2.4rem);
  transition:background-color var(--t-deliberado) var(--ease);
}
.imt-way-item + .imt-way-item{border-left:1px solid rgba(124,90,33,.2)}

/* DOIS BOTÕES DE LARGURA TOTAL.

   O realce era pintado no próprio item, e o item para na borda do
   contêiner — medido: ele ia de 143 a 713 numa janela de 1425. Ao passar
   o mouse, acendia só esse pedaço e sobravam 143px apagados na ponta.
   Por contraste, o apagado lia como uma barra escura ao lado.

   Agora quem acende é um pseudo-elemento que SANGRA até a borda da
   página: -100vw no primeiro item, +100vw no último. O `contain:paint`
   da seção corta o excesso. Os dois se encontram no meio exato da tela,
   que é onde já estava o fio divisor.

   O item em si não mudou de lugar — o texto continua alinhado com o
   texto do hero. O que mudou é só a área que acende. */
.imt-way-item::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-color:transparent;
  transition:background-color var(--t-deliberado) var(--ease);
}
.imt-way-item:first-child::before{left:-100vw}
.imt-way-item:last-child::before{right:-100vw}
.imt-way-item:hover::before{background-color:rgba(255,252,244,.55)}

.imt-way-num{
  font-family:var(--display);
  font-size:.68rem;
  letter-spacing:.14em;
  color:var(--gold-3);
  flex:none;
}
.imt-way-kicker{
  display:block;
  font-family:var(--display);
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gray-soft);
  margin-bottom:.35rem;
}
.imt-way-item h3{
  font-family:var(--voice);
  font-size:var(--t-l);
  font-weight:400;
  line-height:1.25;
}
.imt-way-arrow{
  margin-left:auto;
  font-size:var(--t-m);
  color:var(--gold-3);
  transition:transform var(--t-resposta) var(--ease);
}
.imt-way-item:hover .imt-way-arrow{transform:translateY(4px)}

/* ══════════════════════════════════════════════════════════════════
   5. ESQUELETO DE SEÇÃO
   ══════════════════════════════════════════════════════════════════ */
.imt-sec{padding-block:var(--r-normal)}

/* As duas viradas de TRILHA (paciente -> dentista -> comum) usam
   --r-amplo: é onde o leitor troca de assunto e precisa de um instante
   para se reorientar. Ver .imt-courses e .imt-founders. */

.imt-sec-head{margin-bottom:clamp(2.5rem,5vw,4rem)}

.imt-sec-head h2{
  font-family:var(--voice);
  font-size:clamp(2rem,3.8vw,var(--t-3xl));
  font-weight:330;
  line-height:1.16;
  letter-spacing:-.012em;
  text-wrap:balance;
}
.imt-sec-head p{
  font-size:1rem;
  font-weight:300;
  line-height:1.78;
  letter-spacing:.004em;
  color:var(--gray);
  margin-top:1.2rem;
  max-width:min(100%,var(--medida));
}

/* ══════════════════════════════════════════════════════════════════
   6. TRATAMENTOS
   ══════════════════════════════════════════════════════════════════ */
/* SUPERFÍCIE COMPARTILHADA.
   No neumorfismo a peça e o fundo têm a MESMA cor: a forma existe só
   pela luz. Por isso a seção deixou de ser branca — sobre branco puro
   não há para onde clarear, e o realce de luz simplesmente não existe.
   Este tom é o caramelo do hero, bem mais claro: mesma família, outro
   degrau. */

/* ── O OURO DAS CHAMADAS MUDA DE LADO COM O FUNDO ─────────────────
   Quatro das onze chamadas douradas vivem sobre o preto quente da
   trilha do dentista, e lá a conta se inverte: a rampa clara, que no
   papel some, é a que brilha; a escura, que no papel resolve, dá 2,71
   de contraste e volta a sumir.

   São os mesmos quatro lugares que já trocam de paleta por inteiro
   (eyebrow, títulos, texto de apoio). O ouro do texto passa a trocar
   junto, em vez de ser o único elemento a ignorar o fundo.

   `.imt-final` é declarada CLARA, mas a chamada dela mora dentro do
   painel escuro do balcão — por isso a regra mira o painel, e não a
   seção. `.imt-testi` tem variante clara e por isso pede a exclusão:
   sem ela, os depoimentos de pacientes receberiam a rampa do lado
   errado. */
.imt-courses .imt-grad-text,
.imt-why-dark .imt-grad-text,
.imt-final-info .imt-grad-text,
.imt-testi:not(.imt-testi-light) .imt-grad-text{
  background-image:var(--gold-grad-texto-escuro);
}

.imt-services{background:var(--superficie)}

.imt-simple-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.25rem;
}
/* QUATRO SOMBRAS, NENHUMA BORDA.

   Duas por fora dão o relevo: luz vindo de cima à esquerda, sombra
   caindo embaixo à direita. Duas por dentro dão o estofado — é o que
   separa "caixa com sombra" de superfície modelada.

   A sombra NÃO é preta nem azul como no exemplo original: é o ouro
   escuro da marca (#7C5A21) em opacidade baixa. Sombra neutra sobre
   caramelo suja o tom; sombra da própria cor aprofunda. */
.imt-simple-card{

  /* Ângulos escritos por home.js a cada quadro. O repouso é zero, e o
     repouso é o que vale sem JS, sem mouse e no celular. */
  --incl-x:0deg;
  --incl-y:0deg;
  --incl-z:0px;

  position:relative;
  display:flex;
  flex-direction:column;
  gap:.7rem;
  background:var(--superficie);
  border:0;
  border-radius:12px;
  padding:2.4rem 2rem 2rem;
  box-shadow:
    -10px -10px 26px var(--neu-luz),
     12px  12px 30px var(--neu-sombra),
    inset -18px -18px 38px rgba(255,253,247,.5),
    inset  16px  16px 34px rgba(124,90,33,.04);
  transform-style:preserve-3d;
  transform:
    perspective(900px)
    rotateX(var(--incl-x))
    rotateY(var(--incl-y))
    translateZ(var(--incl-z));
  transition:transform var(--t-deliberado) var(--ease),box-shadow var(--t-deliberado) var(--ease);
}

/* INCLINAÇÃO — a peça gira na direção do ponteiro.

   A sombra NÃO muda no hover, e é de propósito. Como o cartão é feito
   de luz e sombra pintadas, girá-lo já equivale a mover a fonte de luz;
   a mesma leitura sai de graça. Animar `box-shadow` obrigaria o
   navegador a redesenhar quatro desfoques a cada quadro — aqui não
   repinta nada, a GPU só gira uma camada que já está pronta.

   A perspectiva é POR CARTÃO, não na grade. Numa grade de 3×2 uma
   perspectiva única no contêiner deixa a fileira de baixo girando como
   se fosse vista de cima, e as pontas entortam mais que o centro. Com
   perspectiva própria, os seis se comportam igual. */
.imt-simple-card.is-inclinando{
  transition:transform .08s linear,box-shadow var(--t-deliberado) var(--ease);
}

/* O ícone e o título saem do plano e flutuam sobre a superfície: é o
   que separa "a imagem do cartão girou" de "o cartão tem profundidade". */
.imt-simple-card:hover .imt-simple-ico{transform:translateZ(26px)}
.imt-simple-card:hover h3{transform:translateZ(14px)}

/* O selo vira pastilha AFUNDADA: as mesmas duas luzes, invertidas.
   Contorno de 1px ao lado de uma superfície modelada denuncia dois
   sistemas diferentes na mesma peça. */
.imt-simple-badge{
  position:absolute;
  top:1.2rem;right:1.2rem;
  font-family:var(--display);
  font-size:var(--t-micro);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold-3);
  background:var(--superficie);
  border:0;
  border-radius:20px;
  padding:.3rem .7rem;
  box-shadow:
    inset 2px 2px 5px rgba(124,90,33,.14),
    inset -2px -2px 5px rgba(255,253,247,.95);
}
.imt-simple-ico{
  width:26px;height:26px;color:var(--gold-3);
  transform:translateZ(0);
  transition:transform var(--t-deliberado) var(--ease);
}
.imt-simple-kicker{
  font-family:var(--display);
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gray);
}
.imt-simple-card h3{
  font-family:var(--voice);
  font-size:var(--t-xl);
  font-weight:400;
  line-height:1.2;
  transform:translateZ(0);
  transition:transform var(--t-deliberado) var(--ease);
}
.imt-simple-card p{
  font-size:var(--t-s);
  line-height:1.7;
  color:var(--gray);
  flex:1;
}
.imt-simple-cta{
  font-family:var(--display);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold-3);
  margin-top:.4rem;
  transition:letter-spacing var(--t-resposta) var(--ease);
}
.imt-simple-card:hover .imt-simple-cta{letter-spacing:.17em}

/* ══════════════════════════════════════════════════════════════════
   7. POR QUE — lista numerada em romano
   ══════════════════════════════════════════════════════════════════ */
.imt-why{background:var(--paper-dim)}

.imt-why-list{border-top:1px solid var(--hair-l)}
.imt-why-row{
  display:grid;
  grid-template-columns:44px 1fr 1.5fr;
  gap:1.6rem;
  align-items:center;
  padding:1.6rem 0;
  border-bottom:1px solid var(--hair-l);
}
.imt-why-row-num{
  font-family:var(--voice);
  font-size:var(--t-s);
  letter-spacing:.1em;
  color:var(--gold-3);
}
.imt-why-row h4{
  font-family:var(--display);
  font-size:var(--t-base);
  font-weight:500;
  letter-spacing:.01em;
}
.imt-why-row p{
  font-size:var(--t-s);
  line-height:1.7;
  color:var(--gray);
  max-width:var(--medida);
}

/* ── Variante LÂMINAS — trilha do paciente ───────────────────────
   A lista continua lista, e a ordem sobrevive: cinco itens numerados em
   romano são um argumento lido de cima para baixo, não um catálogo onde
   se escolhe. Grade de três colunas destruiria a sequência e ainda
   deixaria um avulso na última fileira.

   O que muda é a MATÉRIA. Cada linha vira uma lâmina da mesma superfície
   modelada a luz dos tratamentos, de largura inteira — parentesco com os
   cartões sem virar cópia deles.

   A peça e o fundo compartilham --paper-dim, não --superficie. No
   neumorfismo os dois precisam da MESMA cor, e manter o tom próprio
   desta seção é o que impede que ela e os tratamentos virem um bloco
   claro só, sem junta visível.

   Modificador próprio porque a trilha do dentista continua escura: são
   dois públicos em dois pontos distantes da página. */
.imt-why-laminas .imt-why-list{
  border-top:0;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.imt-why-laminas .imt-why-row{

  position:relative;
  overflow:hidden;
  grid-template-columns:66px 1fr 1.5fr;
  padding:1.5rem 1.8rem;
  border-bottom:0;
  border-radius:12px;
  background:var(--paper-dim);
  box-shadow:
    -8px -8px 20px var(--neu-luz),
     10px  10px 24px var(--neu-sombra),
    inset -14px -14px 30px rgba(255,253,247,.45),
    inset  12px  12px 26px rgba(124,90,33,.035);
  transition:transform var(--t-deliberado) var(--ease),box-shadow var(--t-deliberado) var(--ease);
}

/* A luz que atravessa a borda de cima. É um gradiente pintado uma vez e
   deslocado por transform: composição, não repintura. */
.imt-why-laminas .imt-why-row::after{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-2),transparent);
  transform:translateX(-101%);
  transition:transform 1s var(--ease);
}
.imt-why-laminas .imt-why-row:hover{
  transform:translateY(-3px);
  box-shadow:
    -12px -12px 28px var(--neu-luz),
     16px  16px 36px rgba(124,90,33,.16),
    inset -14px -14px 30px rgba(255,253,247,.45),
    inset  12px  12px 26px rgba(124,90,33,.035);
}
.imt-why-laminas .imt-why-row:hover::after{transform:translateX(101%)}

/* O numeral vira medalha GRAVADA e emerge no hover: as duas luzes
   trocam de lado. O material inverte, a cor quase não se move — é o
   mesmo vocabulário da pastilha "Mais procurado" dos tratamentos. */
.imt-why-laminas .imt-why-row-num{
  width:46px;height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:.9rem;
  letter-spacing:.06em;
  background:var(--paper-dim);
  box-shadow:
    inset 3px 3px 6px rgba(124,90,33,.16),
    inset -3px -3px 6px rgba(255,253,247,.95);
  transition:box-shadow var(--t-deliberado) var(--ease),color var(--t-deliberado) var(--ease);
}
.imt-why-laminas .imt-why-row:hover .imt-why-row-num{
  color:var(--gold-2);
  box-shadow:
    -3px -3px 7px rgba(255,253,247,.95),
     4px  4px 8px rgba(124,90,33,.18);
}

/* ── Variante escura — as MESMAS lâminas, na trilha do dentista ──
   Mesmo arquétipo, outra pele. A geometria toda vem das regras acima;
   aqui muda só a cor e o sentido da luz.

   A luz é o ouro da marca em alfa baixo, não branco: sobre um escuro
   quente, realce branco esverdeia e denuncia plástico. É o espelho
   exato da decisão do lado claro, onde a sombra é ouro em vez de
   cinza. */
.imt-why-dark{background:var(--superficie-noir)}
.imt-why-dark .imt-sec-head h2{color:var(--paper)}
.imt-why-dark .imt-why-row-num{color:var(--gold-1)}
.imt-why-dark .imt-why-row h4{color:var(--paper)}
.imt-why-dark .imt-why-row p{color:rgba(255,255,255,.62)}
.imt-why-dark .imt-eyebrow{color:var(--gold-1)}

.imt-why-dark .imt-why-list{
  border-top:0;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.imt-why-dark .imt-why-row{
  position:relative;
  overflow:hidden;
  grid-template-columns:66px 1fr 1.5fr;
  padding:1.5rem 1.8rem;
  border-bottom:0;
  border-radius:12px;
  background:var(--superficie-noir);
  box-shadow:
    -8px -8px 20px var(--neu-luz-noir),
     10px  10px 24px var(--neu-sombra-noir),
    inset -14px -14px 30px rgba(244,227,176,.022),
    inset  12px  12px 26px rgba(0,0,0,.2);
  transition:transform var(--t-deliberado) var(--ease),box-shadow var(--t-deliberado) var(--ease);
}
.imt-why-dark .imt-why-row::after{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-2),transparent);
  transform:translateX(-101%);
  transition:transform 1s var(--ease);
}
.imt-why-dark .imt-why-row:hover{
  transform:translateY(-3px);
  box-shadow:
    -12px -12px 28px var(--neu-luz-noir),
     16px  16px 36px rgba(0,0,0,.62),
    inset -14px -14px 30px rgba(244,227,176,.022),
    inset  12px  12px 26px rgba(0,0,0,.2);
}
.imt-why-dark .imt-why-row:hover::after{transform:translateX(101%)}

.imt-why-dark .imt-why-row-num{
  width:46px;height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:.9rem;
  letter-spacing:.06em;
  background:var(--superficie-noir);
  box-shadow:
    inset 3px 3px 6px rgba(0,0,0,.5),
    inset -3px -3px 6px rgba(244,227,176,.08);
  transition:box-shadow var(--t-deliberado) var(--ease),color var(--t-deliberado) var(--ease);
}
.imt-why-dark .imt-why-row:hover .imt-why-row-num{
  color:var(--gold-2);
  box-shadow:
    -3px -3px 7px rgba(244,227,176,.08),
     4px  4px 8px rgba(0,0,0,.5);
}

/* ══════════════════════════════════════════════════════════════════
   8. FAIXAS DE IMAGEM
   ══════════════════════════════════════════════════════════════════ */
/* PANORAMA — a faixa ficou alta, e isso é o assunto.

   Ela tinha 420px no máximo numa tela de 1425: uma tira de 3,4 para 1
   cortada de uma foto em RETRATO. Sobrava uma fatia estreita da cena e
   não dava para ver o que estava acontecendo nela. Com 620px o retrato
   entrega muito mais do que uma faixa, e a foto passa a ser fotografia
   em vez de textura de fundo.

   NADA AQUI USA `overflow`, e o motivo é a paralaxe logo abaixo:
   `animation-timeline: view()` mede o elemento contra o contêiner de
   rolagem mais próximo, e `overflow:hidden` CRIA um contêiner de
   rolagem. Com ele, a linha do tempo da foto viraria esta própria
   faixa, que nunca rola, e a animação ficaria parada em zero — sem erro
   nenhum no console. `clip-path` corta igual e não cria contêiner.

   `contain` perdeu o `paint` pelo mesmo motivo: o recorte já é feito
   pelo clip-path, e paint containment mexe justamente nessa área. */
.imt-band{
  /* QUANTO A FOTO FICA PARA TRÁS DA ROLAGEM.

     Estas três linhas são o efeito inteiro. A moldura da foto nasce
     mais alta que a janela de propósito, com `--lag` sobrando acima e
     abaixo do recorte, e a animação gasta essa folga do topo ao pé
     enquanto a faixa atravessa a tela. Quanto maior a folga, mais a
     foto fica para trás da rolagem e mais da cena desfila.

     A versão anterior deslocava 8% da altura da foto — 115px contra
     1520px de rolagem, 7% de atraso. Sete por cento é indistinguível
     de uma foto parada, e foi exatamente essa a queixa.

     A FOLGA NÃO É UM NÚMERO CHUTADO, é medida da geometria.

     Uma foto 4:3 numa faixa de largura total tem 75vw de altura
     natural. O que passa da altura da faixa é folga que já existe e
     não custa nada — `--sobra` é metade dela, para cada lado.

     Uma medida em vw sozinha não serviria: a altura da faixa trava em
     620px enquanto a largura continua crescendo, então a mesma
     porcentagem corta demais numa tela e de menos noutra. Amarrando à
     sobra real, o corte fica constante em qualquer largura.

     O FATOR 1,35 É O ÚNICO LUXO. Ele pede 35% a mais do que a foto tem
     de sobra, e esse excedente sai do lado: a foto cresce para
     preencher a moldura mais alta e some cerca de 7% por borda. Em
     troca, o curso passa de 450px para 620px. Sete por cento de borda
     numa faixa de ponta a ponta ninguém vê; a diferença no movimento
     se vê na hora.

     O teto de 460px segura telas muito largas, onde a sobra explode e
     o percurso começaria a durar mais que a própria travessia.

     NO CELULAR NÃO HÁ SOBRA NENHUMA. A faixa trava em 360px de altura
     enquanto a foto, deitada, cobre 281px numa tela de 375 — ela já
     entra ampliada. Ali `--sobra` é negativa e quem manda é o piso de
     78px, que compra movimento pagando em largura: mostra 55% do
     quadro em vez de 64%. Numa peça de 360px que se atravessa em dois
     gestos, o movimento vale mais que os 9 pontos de moldura. */
  --altura:clamp(360px,58vw,620px);
  --sobra:calc((75vw - var(--altura)) / 2);
  --lag:clamp(78px,var(--sobra) * 1.35,460px);

  position:relative;
  height:var(--altura);
  clip-path:inset(0);
  background:#EDEAE3;
  border-top:1px solid var(--hair-l);
  border-bottom:1px solid var(--hair-l);
  contain:layout style;
}

/* A MOLDURA DA FOTO É MAIOR QUE A JANELA, e é por isso que existe o
   que ver. A foto sai do fluxo e ganha uma altura de folga para cada
   lado; em repouso ela fica centrada, e nos extremos do percurso uma
   das bordas encosta exatamente no limite do recorte. Nunca aparece
   fundo: o curso da animação é, ao pixel, a folga que sobra. */
.imt-band img{
  position:absolute;
  left:0;
  top:calc(var(--lag) * -1);
  width:100%;
  height:calc(100% + var(--lag) * 2);
  object-fit:cover;
  object-position:center 50%;
}

/* A PARALAXE É LIGADA PELO NAVEGADOR À POSIÇÃO DA FAIXA.

   Sem ouvinte de rolagem e sem passar pelo script: a linha do tempo é
   a travessia do elemento pela tela, e o resultado é composição pura.
   Onde não houver suporte, a foto fica parada e nada quebra — por isso
   o estado de repouso não depende da animação existir.

   O `scale` que acompanhava o deslocamento saiu. Ele existia só para
   dar folga ao movimento, e cobrava resolução em troca: ampliar 16% é
   perder 16% de nitidez na faixa inteira. A folga agora vem da altura
   da moldura, que não amplia nada — a foto é servida no tamanho que
   tem. */
@supports (animation-timeline:view()){
  .imt-band img{
    /* 3.7.1: camada própria desde o início — sem isso o navegador
       promove e devolve a foto (1.400 × 1.200 px) ao entrar e sair da
       tela, e cada promoção é uma rasterização inteira no meio da
       rolagem. */
    will-change:transform;
    animation:imt-faixa-paralaxe linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes imt-faixa-paralaxe{
    from{transform:translate3d(0,calc(var(--lag) * -1),0)}
    to{transform:translate3d(0,var(--lag),0)}
  }
}

/* O fio de ouro fecha a faixa por baixo, do jeito que o resto do site
   fecha suas peças. */
.imt-band::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:1px;
  z-index:3;
  background:linear-gradient(90deg,transparent,var(--gold-2),transparent);
  opacity:.6;
}

/* A faixa é larguíssima e a foto é retrato: o corte mostra só uma
   fatia. object-position mira a altura onde estão os profissionais —
   o padrão pegaria o teto e o topo das cabeças. */
/* O ANCORAMENTO É MEDIDO, não chutado. Uma foto 4:3 numa faixa 2,3:1
   perde 42% da altura, e o ponto escolhido decide o que sobra.

   Na de harmonização testei quatro pontos contra o recorte real: em 30%
   só aparecem ombros; em 70% e 90% as profissionais perdem o rosto. Em
   50% ficam as três de frente e as mãos trabalhando — que é o que a
   legenda promete. 50% também é o padrão, então basta não declarar. */
.imt-band-equipe img{object-position:center 42%}

/* A FAIXA DE HARMONIZAÇÃO GANHOU UMA FOTO EM RETRATO, e retrato numa
   faixa 2,3 para 1 é o caso mais severo de recorte que existe aqui: das
   1.900px que a imagem ocupa deitada na largura total, a janela mostra
   618 e a paralaxe percorre 1.240.

   24% foi medido, não estimado. Renderizei a janela real em cinco
   alturas: de 50% para baixo sobra avental e falta rosto; em 80% ficam
   as mãos e some a profissional. Em 24% entram touca, máscara, as duas
   mãos na seringa e a bandeja de instrumentos. */
.imt-band-hof img{object-position:center 24%}

/* O VÉU GANHOU UM DEGRAU INTERMEDIÁRIO. Num gradiente de dois pontos
   sobre uma faixa alta, a transição sobe reta e aparece como uma faixa
   cinza no meio da foto. Com a parada de 46% ele fecha embaixo, onde o
   texto está, e some antes de alcançar a cena. */
.imt-band-cap{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:2;
  padding:clamp(1.8rem,3.6vw,3rem) 0;
  background:linear-gradient(0deg,rgba(20,20,20,.82),rgba(20,20,20,.3) 46%,transparent);
  color:var(--paper);
}
.imt-band-cap span{
  display:block;
  font-family:var(--display);
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-1);
  margin-bottom:.4rem;
}
/* A frase cresceu junto com a faixa: numa peça de 620px, o corpo
   anterior lia como legenda de rodapé em vez de declaração. */
.imt-band-cap p{
  font-family:var(--voice);
  font-size:clamp(1.4rem,2.5vw,2.1rem);
  font-weight:400;
  line-height:1.26;
  letter-spacing:-.012em;
  max-width:26ch;
}

/* ══════════════════════════════════════════════════════════════════
   9. COMO FUNCIONA — etapas
   ══════════════════════════════════════════════════════════════════ */
/* UM TRILHO, NÃO QUATRO FILETES.

   O defeito da versão anterior não era falta de enfeite: eram quatro
   colunas iguais, cada uma com seu próprio filete e um vão entre elas.
   Essa é a forma visual de uma TABELA — quatro coisas paralelas. Mas o
   conteúdo é um processo, e a única pista de ordem eram os algarismos,
   em corpo 10 e cinza. A estrutura contava uma coisa e o texto, outra.

   Agora a via é contínua e cada etapa tem um nó gravado sobre ela. */
.imt-steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1.8rem,3.5vw,3.4rem);
}
.imt-steps::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--hair-l);
}

/* O ouro percorre a via na chegada. scaleX é compositor: a GPU move
   uma camada pronta, nada repinta.

   FALHA SEGURA, mesma do resto do arquivo: sem JS o `is-in` nunca
   chega, então o trilho já nasce cheio em vez de ficar vazio para
   sempre. */
.imt-steps::after{
  content:"";
  position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--gold-2);
  transform:scaleX(0);
  transform-origin:left;
}
html:not(.js-anim) .imt-steps::after{transform:scaleX(1)}
.js-anim .imt-steps.is-in::after{
  animation:imt-trilho var(--t-ambiente) var(--ease) .1s both;
}
@keyframes imt-trilho{to{transform:scaleX(1)}}

.imt-step{
  position:relative;
  padding-top:3.6rem;
  display:flex;flex-direction:column;gap:.6rem;
  transition:transform var(--t-deliberado) var(--ease);
}
.imt-step:hover{transform:translateY(-4px)}

/* O NÓ. É a medalha das lâminas, no mesmo vocabulário: gravada no
   repouso, emergindo no hover. A página não ganha um sistema novo —
   ganha a mesma peça em outro lugar.

   A entrada em cascata de [data-stagger] já traz cada etapa em
   sequência, e o nó vem junto com ela. Uma segunda coreografia aqui
   estaria disputando a mesma propriedade com a primeira. */
.imt-step-num{
  position:absolute;
  top:0;left:0;
  width:38px;height:38px;
  border-radius:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  font-family:var(--display);
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--gold-3);
  background:var(--superficie);
  box-shadow:
    inset 3px 3px 6px rgba(124,90,33,.16),
    inset -3px -3px 6px rgba(255,253,247,.95);
  transition:box-shadow var(--t-deliberado) var(--ease),color var(--t-deliberado) var(--ease);
}
.imt-step:hover .imt-step-num{
  color:var(--gold-2);
  box-shadow:
    -3px -3px 7px rgba(255,253,247,.95),
     4px  4px 8px rgba(124,90,33,.18);
}
.imt-step h4{
  font-family:var(--voice);
  font-size:var(--t-l);
  font-weight:400;
  line-height:1.2;
}
.imt-step p{
  font-size:var(--t-s);
  line-height:1.7;
  color:var(--gray);
}

/* ══════════════════════════════════════════════════════════════════
   10. DEPOIMENTOS
   ══════════════════════════════════════════════════════════════════ */
.imt-testi{background:var(--superficie-noir);color:var(--paper)}
.imt-testi .imt-sec-head h2{color:var(--paper)}
.imt-testi .imt-eyebrow{color:var(--gold-1)}

.imt-testi-light{background:var(--paper-dim);color:var(--noir)}
.imt-testi-light .imt-sec-head h2{color:var(--noir)}
.imt-testi-light .imt-eyebrow{color:var(--gold-3)}

/* ── CARTÃO DE CITAÇÃO ───────────────────────────────────────────
   Antes eram painéis encostados, separados por um vão de 1px, sem raio
   e sem sombra — e na trilha clara ainda por cima em BRANCO PURO. Dois
   defeitos nisso.

   O branco era frio sobre um fundo quente: o mesmo problema que já
   corrigimos no wayfinding e nos tokens de neutro. Branco puro ao lado
   de caramelo lê como remendo colado, não como peça da mesma página.

   E painéis encostados com um filete entre eles não desenham cartões,
   desenham uma TABELA. Era o mesmo defeito das etapas.

   UM ARQUÉTIPO, DUAS PELES. A geometria mora aqui e vale para as duas
   trilhas; só a cor e a luz mudam abaixo. Peça e fundo sempre dividem o
   mesmo tom, que é a condição para a luz existir. */
.imt-testi-rail{
  display:flex;
  gap:2rem;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  /* Acima de 960px os três cabem e não há o que rolar. O recorte do
     scroller cortaria as sombras pelo meio, então ele só existe onde
     serve — reposto no bloco responsivo. */
  overflow:visible;
}
.imt-testi-rail::-webkit-scrollbar{display:none}

.imt-testi-card{
  flex:0 0 calc((100% - 4rem) / 3);
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  border-radius:12px;
  padding:2.2rem 2rem 1.8rem;
  background:var(--superficie-noir);
  box-shadow:
    -8px -8px 20px var(--neu-luz-noir),
     10px  10px 24px var(--neu-sombra-noir),
    inset -14px -14px 30px rgba(244,227,176,.022),
    inset  12px  12px 26px rgba(0,0,0,.2);
  transition:transform var(--t-deliberado) var(--ease),box-shadow var(--t-deliberado) var(--ease);
}
.imt-testi-card:hover{
  transform:translateY(-4px);
  box-shadow:
    -12px -12px 28px var(--neu-luz-noir),
     16px  16px 36px rgba(0,0,0,.62),
    inset -14px -14px 30px rgba(244,227,176,.022),
    inset  12px  12px 26px rgba(0,0,0,.2);
}

.imt-testi-light .imt-testi-card{
  background:var(--paper-dim);
  box-shadow:
    -8px -8px 20px rgba(255,253,247,.92),
     10px  10px 24px rgba(124,90,33,.12),
    inset -14px -14px 30px rgba(255,253,247,.45),
    inset  12px  12px 26px rgba(124,90,33,.035);
}
.imt-testi-light .imt-testi-card:hover{
  box-shadow:
    -12px -12px 28px rgba(255,253,247,.92),
     16px  16px 36px rgba(124,90,33,.16),
    inset -14px -14px 30px rgba(255,253,247,.45),
    inset  12px  12px 26px rgba(124,90,33,.035);
}

/* A ASPA ERA O CARACTERE DE POLEGADA, o mesmo do teclado. Composto em
   serifada a 40px, ele vira dois riscos verticais. Numa página que usa
   Fraunces em tudo, era o detalhe que mais denunciava. O template passa
   a trazer a aspa tipográfica de abertura. */
.imt-testi-quote{
  font-family:var(--voice);
  font-size:var(--t-2xl);
  line-height:.6;
  color:var(--gold-2);
  opacity:.7;
  margin-bottom:1rem;
  transition:opacity var(--t-deliberado) var(--ease);
}
.imt-testi-card:hover .imt-testi-quote{opacity:1}
.imt-testi-text{
  font-size:1.02rem;
  line-height:1.6;
  font-weight:300;
  color:rgba(255,255,255,.85);
  flex:1;
  margin-bottom:1.4rem;
  max-width:var(--medida);
}
.imt-testi-light .imt-testi-text{color:var(--noir)}

.imt-testi-author{
  font-family:var(--display);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold-1);
}
.imt-testi-light .imt-testi-author{color:var(--gold-3)}

/* ── Indicador de posição ─────────────────────────────────────────
   Nasce VAZIO. O JS só o preenche quando o trilho realmente
   transborda. Com 3 depoimentos no desktop cada card ocupa exatamente
   1/3 do trilho: não há o que rolar, e controle que não controla nada
   é ruído. Antes eram setas e um contador travado em "1 / 3". */
.imt-testi-dots{display:flex;align-items:center;margin:1.1rem 0 0 -7px}
.imt-testi-dots:empty{display:none}
.imt-testi-dot{
  width:38px;height:44px;
  display:flex;align-items:center;justify-content:center;
}
.imt-testi-dot::before{
  content:"";
  display:block;
  width:24px;height:2px;
  border-radius:1px;
  background:rgba(255,255,255,.24);
  transition:width var(--t-resposta) var(--ease),background-color var(--t-resposta) var(--ease);
}
.imt-testi-dot[aria-current="true"]::before{width:34px;background:var(--gold-1)}
.imt-testi-light .imt-testi-dot::before{background:rgba(20,20,20,.18)}
.imt-testi-light .imt-testi-dot[aria-current="true"]::before{background:var(--gold-3)}

/* ══════════════════════════════════════════════════════════════════
   11. CTA DE FECHO DE TRILHA
   ══════════════════════════════════════════════════════════════════ */
.imt-track-cta{
  background:var(--paper-dim);
  padding:clamp(2.4rem,5vw,3.6rem) 0;
  border-top:1px solid var(--hair-l);
}
.imt-track-cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}
.imt-track-cta h3{
  font-family:var(--voice);
  font-size:var(--t-xl);
  font-weight:400;
  line-height:1.25;
  margin-bottom:.5rem;
  max-width:22ch;
}
.imt-track-cta p{
  font-size:var(--t-s);
  line-height:1.7;
  color:var(--gray);
  max-width:var(--medida);
}
/* Mesmo escuro das seções da trilha, senão o fecho dela apareceria como
   uma faixa de outro preto logo abaixo dos depoimentos. */
.imt-track-dark{background:var(--superficie-noir);border-top-color:var(--hair-d)}
.imt-track-dark h3{color:var(--paper)}
.imt-track-dark p{color:rgba(255,255,255,.6)}

/* ══════════════════════════════════════════════════════════════════
   12. CURSOS
   ══════════════════════════════════════════════════════════════════ */
.imt-courses{
  background:var(--superficie-noir);
  color:var(--paper);
  padding-block:var(--r-amplo) var(--r-normal);
}
.imt-courses .imt-sec-head h2{color:var(--paper)}
.imt-courses .imt-sec-head p{color:rgba(255,255,255,.62)}
.imt-courses .imt-eyebrow{color:var(--gold-1)}

/* CARTÃO MODELADO NO ESCURO — o espelho dos tratamentos.

   Antes a grade se fechava por fios internos, sem respiro: o mesmo
   desenho de TABELA que já corrigimos nas etapas e nos depoimentos. E o
   hover era um flash de fundo, que é repintura de uma área grande a
   cada quadro.

   Agora são peças modeladas a luz, com o mesmo vão e o mesmo raio dos
   cartões de tratamento, e a mesma inclinação sob o ponteiro. */
.imt-course-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}
.imt-course-card{
  /* Ângulos escritos por home.js. O repouso é zero, e o repouso é o que
     vale sem JS, sem mouse e no celular. */
  --incl-x:0deg;
  --incl-y:0deg;
  --incl-z:0px;

  position:relative;
  padding:2.4rem 1.9rem;
  min-height:300px;
  border:0;
  border-radius:12px;
  background:var(--superficie-noir);
  display:flex;
  flex-direction:column;
  gap:.7rem;
  box-shadow:
    -10px -10px 26px var(--neu-luz-noir),
     12px  12px 30px var(--neu-sombra-noir),
    inset -18px -18px 38px rgba(244,227,176,.022),
    inset  16px  16px 34px rgba(0,0,0,.2);
  transform-style:preserve-3d;
  transform:
    perspective(900px)
    rotateX(var(--incl-x))
    rotateY(var(--incl-y))
    translateZ(var(--incl-z));
  transition:transform var(--t-deliberado) var(--ease),box-shadow var(--t-deliberado) var(--ease);
}
.imt-course-card.is-inclinando{
  transition:transform .08s linear,box-shadow var(--t-deliberado) var(--ease);
}
.imt-course-card:hover .imt-course-ico{transform:translateZ(26px)}
.imt-course-card:hover h3{transform:translateZ(14px)}
.imt-course-ico{
  width:26px;height:26px;color:var(--gold-1);
  transform:translateZ(0);
  transition:transform var(--t-deliberado) var(--ease);
}
.imt-course-tag{
  font-family:var(--display);
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-1);
}
.imt-course-card h3{
  font-family:var(--voice);
  font-size:var(--t-xl);
  font-weight:400;
  line-height:1.2;
  color:var(--paper);
  transform:translateZ(0);
  transition:transform var(--t-deliberado) var(--ease);
}
.imt-course-card p{
  font-size:var(--t-s);
  line-height:1.7;
  color:rgba(255,255,255,.68);
  flex:1;
}
.imt-course-people{
  font-size:var(--t-xs);
  color:var(--gray-soft);
}
.imt-course-cta{
  font-family:var(--display);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold-1);
  transition:letter-spacing var(--t-resposta) var(--ease);
}
.imt-course-card:hover .imt-course-cta{letter-spacing:.17em}

/* ── Índice de masterclasses ─────────────────────────────────────── */
.imt-courses-sub{margin-top:3.4rem}
.imt-courses-sub-label{
  font-family:var(--display);
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-1);
  margin-bottom:1.4rem;
}
.imt-course-index{border-top:1px solid var(--hair-d)}
.imt-index-row{
  position:relative;
  display:grid;
  grid-template-columns:44px 1fr 1fr 48px;
  gap:1.8rem;
  align-items:center;
  padding:1.75rem 0;
  border-bottom:1px solid var(--hair-d);
}

/* ÍNDICE CONTINUA ÍNDICE — e por isso NÃO vira lâmina.
   Sete masterclasses em peças modeladas seriam sete blocos disputando
   atenção com os três cartões de curso logo acima, que são a oferta
   principal. Aqui a hierarquia pede lista.

   O que muda é o gesto: o hover era um flash de fundo, ou seja,
   repintura de uma faixa inteira a cada quadro. Agora o fio embaixo
   acende da esquerda para a direita e o número avança. `scaleX` e
   `translateX` são compositor — a linha inteira do hover é GPU. */
.imt-index-row::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;height:1px;
  background:var(--gold-2);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t-deliberado) var(--ease);
}
.imt-index-row:hover::after{transform:scaleX(1)}
.imt-index-num{
  font-family:var(--display);
  font-size:.68rem;
  letter-spacing:.14em;
  color:var(--gold-1);
  transition:transform var(--t-deliberado) var(--ease);
}
.imt-index-row:hover .imt-index-num{transform:translateX(4px)}
.imt-index-main h4{
  font-family:var(--voice);
  font-size:var(--t-l);
  font-weight:400;
  line-height:1.2;
  color:var(--paper);
  margin-bottom:.25rem;
}
.imt-index-tag{
  font-family:var(--display);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gray-soft);
}
.imt-index-desc{
  font-size:var(--t-s);
  line-height:1.7;
  color:rgba(255,255,255,.62);
}
.imt-index-desc-mobile{display:none}
.imt-index-arrow{
  justify-self:end;
  color:var(--gold-1);
  transition:transform var(--t-resposta) var(--ease);
}
.imt-index-row:hover .imt-index-arrow{transform:translate(3px,-3px)}

/* ══════════════════════════════════════════════════════════════════
   13. FUNDADORES
   ══════════════════════════════════════════════════════════════════ */
/* VITRINE — o retrato como objeto montado.

   A seção era BRANCO PURO entre vizinhos em caramelo: o mesmo remendo
   que já corrigimos no wayfinding e nos depoimentos. Agora a linha
   inteira é uma peça da mesma matéria dos cartões e das lâminas, e a
   foto fica encaixada numa janela gravada nela. */
.imt-founders{
  background:var(--superficie);
  padding-block:var(--r-amplo) var(--r-normal);
}

.imt-founder-row{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:clamp(1.8rem,4vw,3.4rem);
  align-items:center;
  background:var(--superficie);
  border-radius:12px;
  padding:clamp(1.4rem,2.6vw,2rem);
  box-shadow:
    -10px -10px 26px var(--neu-luz),
     12px  12px 30px var(--neu-sombra),
    inset -18px -18px 38px rgba(255,253,247,.5),
    inset  16px  16px 34px rgba(124,90,33,.04);
}
/* O filete que separava as duas linhas some: entre duas peças soltas,
   quem separa é o vão. */
.imt-founder-row + .imt-founder-row{margin-top:2rem}

/* A LINHA JÁ CARREGA .imt-reveal, E ISSO É UMA ARMADILHA.

   A regra de revelação em theme.css tem especificidade (0,3,0) e fixa
   `transform:none` no estado .is-in — ela venceria o levantar do hover,
   que é exatamente a colisão que matou o hover dos cartões de
   tratamento. Aqui a especificidade é declarada de propósito para
   vencer, e as três transições vêm na MESMA regra: `transition` é
   atalho, e duas declarações de mesma força não somam, a última apaga a
   primeira. */
/* 3.7.1: SÓ O TRANSFORM ANIMA. A sombra também mudava no hover, e
   sombra com 30–40px de desfoque numa peça de 1.200 × 700 é repintura
   cheia a cada quadro da transição — era um dos pontos em que a rolagem
   travava (a peça passava sob o mouse parado e o hover disparava). O
   levantar de 4px já diz que a peça respondeu. */
.imt-founders .imt-founder-row.imt-reveal{
  transition:
    opacity var(--t-entrada) var(--ease),
    transform var(--t-deliberado) var(--ease);
}
.imt-founders .imt-founder-row.imt-reveal:hover{
  transform:translateY(-4px);
}

/* O fio de ouro atravessa a borda de cima. Gradiente pintado uma vez e
   deslocado por transform: composição, não repintura. */
.imt-founder-row::after{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-2),transparent);
  transform:translateX(-101%);
  transition:transform 1s var(--ease);
}
.imt-founder-row:hover::after{transform:translateX(101%)}

/* A INVERSÃO DEIXA DE SER TRUQUE DE IDIOMA.
   Era `direction:rtl` no contêiner e `ltr` de volta em cada filho —
   funciona, mas usa a direção de escrita como ferramenta de layout, e
   isso volta a morder quando entra número ou pontuação no meio. Grade
   sabe trocar de lado sozinha. */
.imt-reverse{grid-template-columns:1.18fr .82fr}
.imt-reverse .imt-founder-photo{order:2}

/* A janela: gravada na peça, com a foto encaixada dentro dela. */
.imt-founder-photo{
  position:relative;
  aspect-ratio:4/5;
  border:0;
  border-radius:8px;
  overflow:hidden;
  background:linear-gradient(160deg,#EDEAE3,#DFDAD0);
  box-shadow:
    inset 4px 4px 10px rgba(124,90,33,.18),
    inset -4px -4px 10px rgba(255,253,247,.9);
}
/* O avanço lento da foto dentro da janela. `transform` numa imagem já
   rasterizada é trabalho de compositor: a GPU só reamostra a camada. */
.imt-founder-photo img{
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1);
  transition:transform 1.6s var(--ease);
}
.imt-founder-row:hover .imt-founder-photo img{transform:scale(1.05)}

/* A PLAQUETA PERDEU O DESFOQUE DE FUNDO.
   Era a mesma propriedade que travou o cabeçalho por segundos. Aqui ela
   desfocava uma foto que nunca muda — trabalho vivo para um resultado
   fixo. Agora é superfície sólida, com a mesma luz do resto. */
.imt-founder-tag{
  position:absolute;
  left:.9rem;bottom:.9rem;
  z-index:2;
  background:var(--superficie);
  padding:.7rem 1rem;
  border-radius:6px;
  border-left:2px solid var(--gold-2);
  box-shadow:
    -3px -3px 8px rgba(255,253,247,.9),
     4px  4px 10px rgba(124,90,33,.14);
}
.imt-founder-tag strong{
  display:block;
  font-family:var(--display);
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.06em;
}
.imt-founder-tag span{
  display:block;
  font-size:var(--t-micro);
  color:var(--gray-soft);
}

.imt-founder-text h2{
  font-family:var(--voice);
  font-size:clamp(1.9rem,3.2vw,2.6rem);
  font-weight:330;
  line-height:1.12;
  letter-spacing:-.018em;
}
.imt-founder-role{
  font-family:var(--display);
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-3);
  margin:.5rem 0 1.2rem;
}
.imt-founder-text > p{
  font-size:var(--t-base);
  line-height:1.78;
  font-weight:300;
  color:var(--gray);
  max-width:var(--medida);
}
.imt-founder-cred{
  margin-top:1.5rem;
  padding-top:1.3rem;
  border-top:1px solid var(--hair-l);
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.imt-founder-cred li{
  position:relative;
  padding-left:1.3rem;
  font-size:var(--t-s);
  line-height:1.6;
  color:var(--gray);
  max-width:var(--medida);
}
.imt-founder-cred li::before{
  content:"";
  position:absolute;
  left:0;top:.7em;
  width:.55rem;height:1px;
  background:var(--gold-2);
}

/* ══════════════════════════════════════════════════════════════════
   14. O ESPAÇO
   ══════════════════════════════════════════════════════════════════ */
.imt-space{background:var(--paper-dim)}

.imt-space-panel{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  border:1px solid var(--hair-l);
  background:var(--paper);
  overflow:hidden;
}
.imt-space-media{
  position:relative;
  min-height:clamp(300px,42vw,520px);
  overflow:hidden;
  background:#EDEAE3;
}
.imt-space-media img{
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.05);
  transition:transform var(--t-ambiente) var(--ease);
}
.imt-space-panel.is-in .imt-space-media img{transform:scale(1)}

.imt-space-text{
  padding:clamp(2rem,4vw,3.4rem);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.imt-space-text h2{
  font-family:var(--voice);
  font-size:clamp(1.9rem,3.4vw,2.6rem);
  font-weight:330;
  line-height:1.14;
  letter-spacing:-.018em;
}
.imt-space-lead{
  font-size:var(--t-base);
  font-weight:300;
  line-height:1.78;
  color:var(--gray);
  margin:1.1rem 0 1.6rem;
  max-width:var(--medida);
}
.imt-space-list{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  margin-bottom:1.9rem;
  padding-top:1.3rem;
  border-top:1px solid var(--hair-l);
}
.imt-space-list li{display:flex;flex-direction:column;gap:.15rem}
.imt-space-list strong{
  font-family:var(--display);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-3);
}
.imt-space-list span{font-size:var(--t-s);color:var(--gray)}
.imt-space-text .imt-btn{align-self:flex-start}
/* ── O PALCO ──────────────────────────────────────────────────────
   A galeria de quatro selos virou um ambiente por vez, grande, com os
   dez em miniatura embaixo. O motivo é o material: as fotos têm
   2.560px e mostram salas inteiras — em 200px de largura não se via
   sala nenhuma, só textura.

   A TROCA É DISSOLUÇÃO CONTRÁRIA. A dissolução comum troca duas fotos
   paradas, e por isso lê como corte disfarçado: as duas ocupam o mesmo
   lugar, no mesmo tamanho, e o olho vê uma virar a outra.

   Aqui elas nunca estão no mesmo estado. A que entra vem de um pouco
   mais perto e recua até assentar; a que sai continua avançando, para
   longe, e perde um grau de nitidez enquanto vai. Dois movimentos em
   sentidos opostos, e é isso que faz o cruzamento parecer PROFUNDIDADE
   em vez de troca.

   TRÊS DONOS DE `transform`, UM POR NÍVEL — e esta é a razão de a peça
   ter três camadas de div para uma foto só:

     .imt-quadro   cuida da opacidade
     .imt-deriva   cuida do vaivém eterno
     img           cuida da chegada

   Empilhados assim nenhum sobrescreve o outro. Juntar dois deles num
   elemento só é exatamente o erro que já matou o hover dos cartões de
   tratamento nesta casa: declaração vinda de animação vence transição,
   e a perdedora some sem erro nenhum no console.

   `clip-path` em vez de `overflow`: o recorte é o mesmo e não cria
   contêiner de rolagem. */
.imt-palco-zona{margin-top:clamp(1.4rem,3vw,2.2rem)}

.imt-palco{
  position:relative;
  aspect-ratio:16/9;
  background:#EDEAE3;
  border:1px solid var(--hair-l);
  clip-path:inset(0);
  cursor:zoom-in;
}
.imt-quadro{position:absolute;inset:0}
.imt-quadro img{width:100%;height:100%;object-fit:cover}

/* A deriva impede a foto parada de virar papel de parede. Vinte e dois
   segundos de ida e volta é lento o bastante para ninguém flagrar o
   movimento e vivo o bastante para a imagem nunca parecer morta.

   Ela para sozinha quando a seção sai da tela: `content-visibility`
   suspende a renderização do bloco, e animação que não é desenhada não
   é calculada. */
.imt-deriva{
  position:absolute;inset:0;
  animation:imt-deriva 22s var(--ease) infinite alternate;
}
@keyframes imt-deriva{
  from{transform:scale(1.05) translate3d(-1.1%,-.7%,0)}
  to{transform:scale(1.13) translate3d(1.1%,.7%,0)}
}

/* A PLACA MORDE O CANTO DA FOTO em vez de flutuar sobre ela.

   Toda galeria resolve legenda com gradiente escuro no pé da imagem —
   inclusive as faixas desta mesma página, e é por isso que aqui não.
   Um retângulo da cor do papel encostado na quina inferior esquerda
   lê como etiqueta colada, e é a peça que traz a matéria modelada a
   luz do resto do site para dentro da fotografia. */
.imt-placa{
  position:absolute;left:0;bottom:0;z-index:3;
  background:var(--superficie);
  padding:clamp(1.1rem,2.2vw,1.7rem) clamp(1.4rem,2.8vw,2.2rem);
  max-width:min(30rem,72%);
  border-top:1px solid var(--gold-2);
  border-right:1px solid var(--gold-2);
  box-shadow:-4px -4px 12px var(--neu-luz),6px 6px 16px var(--neu-sombra);
}
.imt-placa-idx{
  display:block;
  font-family:var(--display);
  font-size:.62rem;font-weight:500;letter-spacing:.22em;
  color:var(--gold-3);
  font-variant-numeric:tabular-nums;
  margin-bottom:.35rem;
}
.imt-placa h3{
  font-family:var(--voice);
  font-size:clamp(1.15rem,2.1vw,1.6rem);
  font-weight:340;letter-spacing:-.012em;
  margin:0;
}
.imt-placa p{
  margin:.4rem 0 0;
  font-size:.86rem;font-weight:300;line-height:1.62;
  color:var(--gray);
}
/* AS TRÊS LINHAS ENTRAM UMA DE CADA VEZ, não a placa inteira de uma
   vez. O escalonamento é curto — setenta milésimos — porque longo
   demais vira apresentação de slide; o que se quer aqui é só a
   sensação de que as três pertencem à foto que acabou de chegar.

   Quem anima é o script, com a API de animações: fossem três regras
   de CSS com atrasos diferentes, seria preciso removê-las e forçar
   uma releitura do layout a cada troca para elas rodarem de novo. A
   classe abaixo existe só para marcar quais linhas participam.

   SEM `will-change`: a API de animações já promove o elemento a
   camada própria durante a animação e o devolve ao terminar. Declarar
   a dica no CSS prenderia três camadas na memória da placa de vídeo
   para sempre, por causa de 700 milésimos de movimento. */
.imt-placa-lin{display:block}

/* Setas de vidro, no alto à direita — longe da placa e longe do
   assunto da foto, que nestas dez está sempre no centro. */
.imt-palco-setas{
  position:absolute;z-index:3;
  right:clamp(.8rem,2vw,1.4rem);
  top:clamp(.8rem,2vw,1.4rem);
  display:flex;gap:.5rem;
}
.imt-palco-seta{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  cursor:pointer;
  color:var(--noir);
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.55);
  backdrop-filter:saturate(200%) blur(12px);
  transition:background-color var(--t-toque) var(--ease),
             color var(--t-toque) var(--ease),
             transform var(--t-toque) var(--ease);
}
.imt-palco-seta:hover{background:rgba(255,255,255,.82);transform:translateY(-2px)}
.imt-palco-seta:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
/* ── A TIRA ───────────────────────────────────────────────────────
   Dez miniaturas, todas visíveis. A que está no palco é a única em cor
   plena e a única levantada; as outras recuam meio tom, que é como um
   contato fotográfico marca a escolhida.

   CINCO COLUNAS, NÃO SEIS NEM QUATRO. São dez peças, e dez só fecha em
   linhas inteiras com 1, 2, 5 ou 10 colunas. Qualquer outro número
   deixa uma última fila pela metade, que é o defeito visual de metade
   das galerias por aí. Daí as quebras irem de cinco direto para duas,
   sem passar por quatro nem por três. */
.imt-tira{
  list-style:none;
  margin:clamp(.6rem,1.2vw,.9rem) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(.4rem,.9vw,.7rem);
}
}
.imt-mini{
  position:relative;
  aspect-ratio:4/3;
  border:1px solid var(--hair-l);
  background:#EDEAE3;
  clip-path:inset(0);
  cursor:pointer;
  opacity:.56;
  filter:saturate(.72);
  transition:opacity var(--t-resposta) var(--ease),
             filter var(--t-resposta) var(--ease),
             transform var(--t-deliberado) var(--ease),
             border-color var(--t-deliberado) var(--ease),
             box-shadow var(--t-deliberado) var(--ease);
}
.imt-mini img{width:100%;height:100%;object-fit:cover}
.imt-mini:hover,.imt-mini:focus-visible{
  opacity:.88;filter:saturate(.95);
  transform:translateY(-3px);
  outline:none;
}
.imt-mini.is-atual{
  opacity:1;filter:none;
  transform:translateY(-5px);
  border-color:var(--gold-2);
  box-shadow:0 14px 30px -18px rgba(124,90,33,.7);
}
/* O RÓTULO É UMA PLACA EM MINIATURA, e só a escolhida tem uma.

   A primeira versão era o gradiente escuro de sempre, em corpo 9, que
   aparecia no hover. Dois defeitos e os dois foram vistos na tela:

   1. O VULTO PRETO. Com 1,3rem de respiro em cima, a faixa ocupava um
      quarto da altura da miniatura. Em corpo 9 o texto ali não se lê —
      sobra a mancha escura sem a informação que a justificaria.

   2. A PISCADA. O rótulo saía em .45s e o da peça seguinte entrava no
      mesmo tempo, então atravessar a tira com o ponteiro deixava dois
      meio visíveis ao mesmo tempo, dez vezes seguidas.

   As duas somem juntas ao tirar o hover da conta: o rótulo pertence à
   peça que está NO PALCO, e essa só muda por clique. Nunca há dois, e
   por isso não há piscada.

   A forma é a mesma placa que morde o canto da foto grande — papel
   claro, fio de ouro em cima e à direita, tipo em caixa alta. A tira
   passa a repetir, miúdo, o que o palco faz em tamanho grande. */
.imt-mini-rot{
  position:absolute;left:0;bottom:0;
  max-width:100%;
  padding:.32rem .52rem .3rem;
  background:var(--superficie);
  border-top:1px solid var(--gold-2);
  border-right:1px solid var(--gold-2);
  color:var(--gold-3);
  font-family:var(--display);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  /* Sai deslizando por baixo da própria borda. O recorte da peça já
     está lá; a placa não precisa de nenhuma máscara própria. */
  opacity:0;
  transform:translateY(100%);
  transition:opacity var(--t-resposta) var(--ease),
             transform var(--t-resposta) var(--ease);
}
.imt-mini.is-atual .imt-mini-rot{opacity:1;transform:none}

/* ── A LENTE ──────────────────────────────────────────────────────
   Tela cheia sobre o site. Ela vive FORA da seção: `.imt-sec` declara
   `content-visibility:auto`, que aplica contenção de layout, e um
   elemento com contenção de layout vira bloco contentor dos
   descendentes fixos. Dentro da seção esta peça se ancoraria nela em
   vez de na tela. */
.imt-lente{
  position:fixed;inset:0;z-index:80;
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:rgba(18,17,15,.95);
  backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--t-resposta) var(--ease);
}
.imt-lente.is-aberta{opacity:1;pointer-events:auto}
.imt-lente-topo{
  display:flex;justify-content:space-between;align-items:center;
  padding:clamp(1rem,2.4vw,1.6rem) var(--gut);
  color:rgba(255,255,255,.72);
  font-family:var(--display);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.imt-lente-fechar{
  cursor:pointer;
  color:rgba(255,255,255,.72);
  font-family:var(--display);
  font-size:.68rem;
  letter-spacing:.2em;
  background:none;
  border:0;
  transition:color var(--t-toque) var(--ease);
}
.imt-lente-fechar:hover{color:var(--gold-1)}
.imt-lente-palco{
  position:relative;
  display:grid;place-items:center;
  padding:0 clamp(.6rem,3vw,3rem);
  min-height:0;
}
.imt-lente-palco img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  border:1px solid rgba(255,255,255,.14);
  opacity:0;transform:scale(.985);
  transition:opacity var(--t-deliberado) var(--ease),
             transform var(--t-deliberado) var(--ease);
}
.imt-lente.is-aberta .imt-lente-palco img{opacity:1;transform:scale(1)}
.imt-lente-pe{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:2rem;
  padding:clamp(1rem,2.4vw,1.8rem) var(--gut) clamp(1.4rem,3vw,2.4rem);
  color:var(--paper);
}
.imt-lente-pe h3{
  font-family:var(--voice);
  font-size:clamp(1.25rem,2.4vw,1.7rem);
  font-weight:340;letter-spacing:-.01em;
  margin:0 0 .3rem;
}
.imt-lente-pe p{
  margin:0;
  font-size:.9rem;font-weight:300;
  color:rgba(255,255,255,.66);
  max-width:46ch;
}
.imt-lente-setas{display:flex;gap:.6rem;flex:0 0 auto}
.imt-lente-seta{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  cursor:pointer;
  color:var(--paper);
  border:1px solid rgba(255,255,255,.22);
  background:none;
  transition:background-color var(--t-toque) var(--ease),
             border-color var(--t-toque) var(--ease),
             color var(--t-toque) var(--ease);
}
.imt-lente-seta:hover{
  background:rgba(255,255,255,.1);
  border-color:var(--gold-2);
  color:var(--gold-1);
}
.imt-lente-seta:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}

/* ══════════════════════════════════════════════════════════════════
   15. CONTATO
   O painel de informações é ESCURO ao lado do formulário claro. É o
   contraste que separa "onde nos encontrar" de "fale conosco" sem
   precisar de título para cada metade.
   ══════════════════════════════════════════════════════════════════ */
/* O BALCÃO — as duas metades viram UMA PEÇA.

   Três correções de uma vez, e as três já tinham precedente no site:

   1. A seção era BRANCO PURO, a última da página. Todas as outras já
      foram para os tons quentes.

   2. O painel era uma TABELA: duas metades dentro de uma borda de 1px,
      sem raio e sem relevo. Mesmo desenho que trocamos nas etapas, nos
      depoimentos e nos cursos.

   3. O preto da metade esquerda era `--noir` (#141414) enquanto a
      trilha do dentista e o rodapé usam #1E1C18. Dois pretos encostados
      leem como emenda, não como decisão. */
.imt-final{background:var(--superficie)}

.imt-final-panel{
  display:grid;
  /* minmax(0,…) e não fr seco: `1fr` é `minmax(auto,1fr)`, e o mínimo
     automático de uma coluna é o CONTEÚDO mais largo que ela carrega.
     Aqui esse conteúdo era o e-mail do Instituto — 32 caracteres sem
     espaço —, e no celular a coluna crescia para 409px numa tela de
     375: o painel inteiro saía pela direita e o título era cortado. */
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  border:0;
  border-radius:14px;
  overflow:hidden;
  background:var(--superficie);
  box-shadow:
    -12px -12px 30px var(--neu-luz),
     14px  14px 34px var(--neu-sombra),
    inset -18px -18px 38px rgba(255,253,247,.5),
    inset  16px  16px 34px rgba(124,90,33,.04);
}

.imt-final-info{
  background:var(--superficie-noir);
  color:var(--paper);
  padding:clamp(2.4rem,4vw,3.6rem);
  min-width:0;
}
/* O e-mail e o telefone podem partir onde for preciso; o item que os
   carrega precisa poder encolher para isso acontecer. */
.imt-final-item > div{min-width:0}
.imt-final-item span,
.imt-final-item a{overflow-wrap:anywhere}
.imt-final-info .imt-eyebrow{color:var(--gold-1)}
.imt-final-info h2{
  font-family:var(--voice);
  font-size:clamp(1.9rem,3.4vw,2.6rem);
  font-weight:330;
  line-height:1.14;
  letter-spacing:-.018em;
  color:var(--paper);
  margin-bottom:2rem;
}
.imt-final-item{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  padding:1.05rem 0;
  border-top:1px solid var(--hair-d);
}
.imt-final-item .imt-ico{flex:none;color:var(--gold-1);margin-top:.25rem}
.imt-final-item strong{
  display:block;
  font-family:var(--display);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-1);
  margin-bottom:.3rem;
}
.imt-final-item span,
.imt-final-item a{
  font-size:var(--t-s);
  line-height:1.6;
  color:rgba(255,255,255,.78);
}
.imt-final-item a:hover{color:var(--gold-1)}

/* ── Formulário ──────────────────────────────────────────────────── */
/* Sem fundo próprio: a metade clara É a peça, e peça e campo precisam
   compartilhar a cor para a luz existir. */
.imt-form{
  background:none;
  padding:clamp(2.4rem,4vw,3.6rem);
  min-width:0;
}
.imt-form h3{
  font-family:var(--voice);
  font-size:var(--t-xl);
  font-weight:400;
  line-height:1.2;
}
.imt-form > p{
  font-size:var(--t-s);
  color:var(--gray);
  margin:.4rem 0 1.6rem;
}
.imt-frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.imt-field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.imt-field label{
  font-family:var(--display);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gray-soft);
}
/* O CAMPO É GRAVADO NA PEÇA, não desenhado por cima dela.

   Era caixa branca com contorno de 1px — o padrão do navegador, a
   única coisa da página que não passou pelo sistema. Agora ele afunda
   na superfície, que é o gesto certo para um formulário: digitar é
   depositar algo dentro, não escrever em cima. */
.imt-field input,
.imt-field select,
.imt-field textarea{
  font-family:var(--sans);
  font-size:var(--t-s);
  padding:.85rem 1rem;
  background:var(--superficie);
  border:0;
  border-radius:8px;
  box-shadow:
    inset 3px 3px 7px rgba(124,90,33,.13),
    inset -3px -3px 7px rgba(255,253,247,.95);
  transition:box-shadow var(--t-resposta) var(--ease);
}
.imt-field textarea{min-height:110px;resize:vertical}
/* No foco o sulco APROFUNDA e ganha um anel de ouro de 1px. Ficar só
   com o anel deixaria o campo raso; ficar só com o sulco não avisaria
   quem navega por teclado onde está o cursor. */
.imt-field input:focus,
.imt-field select:focus,
.imt-field textarea:focus{
  outline:none;
  box-shadow:
    inset 4px 4px 9px rgba(124,90,33,.18),
    inset -4px -4px 9px rgba(255,253,247,.98),
    0 0 0 1px var(--gold-2);
}
.imt-form-error{
  color:#B3261E;
  font-size:var(--t-xs);
  margin:-.5rem 0 1rem;
}
.imt-form .imt-btn{width:100%}

/* ══════════════════════════════════════════════════════════════════
   16. CONTENÇÃO DE SEÇÃO

   A home tem quase 14 mil pixels e treze blocos, e nenhum deles
   declarava contenção. Sem isso, toda invalidação de estilo ou layout
   percorre a árvore inteira — inclusive a parte que está a dez mil
   pixels da tela e ninguém vai ver tão cedo.

   `content-visibility:auto` manda o navegador PULAR layout e pintura do
   que não está por perto, e voltar a fazer quando o bloco se aproxima.
   É o ataque direto ao tempo de Renderização do perfil.

   `contain-intrinsic-size` é o que impede a barra de rolagem de pular:
   ele diz que altura supor enquanto o bloco está pulado. Os valores
   abaixo foram MEDIDOS na página, não estimados. A palavra `auto` na
   frente faz o navegador guardar a altura real depois da primeira
   renderização e usar aquela dali em diante, então o erro só existe
   antes de o bloco ser visto uma vez.

   O HERO FICA DE FORA de propósito: ele está sempre no topo, nunca é
   pulado, e já declara `contain:content`.

   ATENÇÃO AO QUE ESSA MEDIDA SIGNIFICA: é a altura do CONTEÚDO, e o
   padding da seção continua somando por fora. Na primeira tentativa eu
   usei a altura da caixa inteira e a página nascia 2.316px mais alta do
   que era — a barra de rolagem encolhia enquanto se rolava. Os valores
   abaixo já vêm com os ~209px de respiro descontados (~256px onde o
   respiro de cima é o amplo).
   ══════════════════════════════════════════════════════════════════ */
.imt-sec{
  content-visibility:auto;
  contain-intrinsic-size:auto 700px;
}

/* A FAIXA DE IMAGEM FICOU DE FORA, e é uma troca consciente.

   `content-visibility:auto` pula a renderização do que está longe e
   aplica contenção de tamanho enquanto pula. A paralaxe da faixa depende
   de o navegador medir a TRAVESSIA do elemento pela tela, do momento em
   que ele começa a entrar até sair — medida que fica sob suspeita num
   elemento cujo tamanho é presumido enquanto ele não é desenhado.

   São três elementos na página, cada um com uma imagem só. O que se
   perde em contenção é pouco; o que se ganha é uma animação que
   funciona com certeza em vez de funcionar provavelmente. */
.imt-services{contain-intrinsic-size:auto 765px}
.imt-why{contain-intrinsic-size:auto 720px}
.imt-testi{contain-intrinsic-size:auto 530px}
.imt-courses{contain-intrinsic-size:auto 1574px}
.imt-founders{contain-intrinsic-size:auto 1386px}
.imt-space{contain-intrinsic-size:auto 1666px}   /* palco + dez miniaturas em duas filas */
.imt-final{contain-intrinsic-size:auto 655px}

/* ══════════════════════════════════════════════════════════════════
   17. RESPONSIVO
   Um bloco por ponto de quebra, no fim — não espalhado pelo arquivo.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .imt-index-row{grid-template-columns:44px 1fr 48px;gap:1.4rem}
  .imt-index-desc{display:none}
  .imt-index-desc-mobile{
    display:block;
    font-size:var(--t-s);
    line-height:1.7;
    color:rgba(255,255,255,.62);
    margin-top:.4rem;
  }
}

@media (max-width:960px){
  /* No celular a grade vira uma coluna: texto em cima, símbolo
     embaixo e centrado. Ele não some — é a assinatura da página — mas
     entra depois da mensagem, não competindo com ela. */
  .imt-hero{min-height:auto}
  .imt-hero-grid{grid-template-columns:1fr;gap:clamp(2rem,7vw,3rem)}
  .imt-hero-mark{width:min(72vw,340px);justify-self:center}
  .imt-hero-index{display:none}

  .imt-simple-grid{grid-template-columns:1fr}
  .imt-course-grid{grid-template-columns:1fr}
  .imt-steps{grid-template-columns:1fr 1fr;gap:2rem clamp(1.6rem,4vw,2.6rem)}
  /* A partir daqui a grade tem mais de uma fileira, e uma via que
     atravessa o contêiner só alcançaria a primeira. Cada etapa volta a
     ter o próprio fio, e o nó continua pousado sobre ele. */
  .imt-steps::before,
  .imt-steps::after{display:none}
  .imt-step{border-top:1px solid var(--hair-l)}

  .imt-why-row{grid-template-columns:44px 1fr;row-gap:.4rem;align-items:start}
  .imt-why-row p{grid-column:2}
  /* A regra acima é (0,1,0) e a das lâminas é (0,2,0): media query não
     soma especificidade, então a coluna precisa ser reescrita aqui ou o
     desktop venceria no celular. */
  .imt-why-laminas .imt-why-row,
  .imt-why-dark .imt-why-row{grid-template-columns:46px 1fr;padding:1.3rem 1.4rem}

  .imt-founder-row{grid-template-columns:1fr;gap:2rem}
  .imt-reverse{direction:ltr}
  .imt-space-panel{grid-template-columns:minmax(0,1fr)}
  .imt-final-panel{grid-template-columns:minmax(0,1fr)}
  .imt-testi-card{flex:0 0 85%}
  /* Aqui o trilho passa a rolar de verdade, então o scroller volta. O
     respiro vertical existe para a sombra não ser cortada pelo recorte
     do próprio scroller; a margem negativa devolve o espaço ao fluxo. */
  .imt-testi-rail{
    overflow-x:auto;
    padding-block:1.4rem;
    margin-top:-1.4rem;
  }
  .imt-wayfind-grid{grid-template-columns:1fr}
  .imt-way-item + .imt-way-item{border-left:0;border-top:1px solid var(--hair-l)}
  /* Num palco estreito, 16:9 vira uma tira e a sala some. 4:3 é a
     proporção nativa destas fotos: nada é cortado. */
  .imt-palco{aspect-ratio:4/3}
  .imt-placa{max-width:86%}
}

@media (max-width:640px){
  /* Em duas colunas o nome mais longo encosta na borda; o corpo menor
     evita a reticência em "Prática supervisionada". */
  .imt-mini-rot{font-size:.58rem;letter-spacing:.07em}
  .imt-steps{grid-template-columns:1fr;gap:1.8rem}
  .imt-tira{grid-template-columns:repeat(2,1fr)}
  .imt-lente-pe{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .imt-frow{grid-template-columns:1fr}
  .imt-track-cta-inner{flex-direction:column;align-items:flex-start}
}

/* Sem mouse o :hover fica preso depois do toque; o deslocamento é
   desligado e a resposta fica por conta da cor (ver theme.css). */
@media (hover:none){
  .imt-step:hover,
  .imt-palco-seta:hover{transform:none}
}

/* ══════════════════════════════════════════════════════════════════
   18. PAUSA DA ARTE FORA DA TELA

   Três animações a pausar, não seis: o traçado agora roda uma vez e
   para sozinho (forwards), então não há laço para interromper. Sobram
   a respiração, a cintilação e a partícula — todas de compositor.

   Uma regra de CSS basta porque nada mais na arte é SMIL; antes era
   preciso chamar svg.pauseAnimations(), que <animateMotion> exigia.

   ATENÇÃO: .imt-hero-mark-fade NÃO entra aqui. Ela carrega a animação
   de ENTRADA da arte, e pausá-la a deixaria congelada em opacity:0.
   É a mesma armadilha da cortina do título. */
.imt-idle .ea-respira,
.imt-idle .ea-cintila,
.imt-idle .ea-particula,
.imt-idle .ea-halo,
.imt-idle .ea-linha,
.imt-idle .ea-quadros{animation-play-state:paused}

/* A DERIVA DO PALCO também pausa pela classe: home.js marca .imt-space com
   .imt-idle fora da tela (mesmo observador do hero). O content-visibility
   já pulava o desenho; isto garante que o relógio da animação também pare. */
.imt-space.imt-idle .imt-deriva{animation-play-state:paused}


/* ══════════════════════════════════════════════════════════════════
   3.7.1 · FUNDADORES LEVES EM TELA ESTREITA
   No celular e no tablet as duas peças viram colunas de ~1.100 px de
   altura, e as quatro sombras (duas internas com 34–38px de desfoque)
   custam caro na primeira pintura — que acontece no meio da rolagem,
   quando a seção chega perto (content-visibility). Fica uma sombra só,
   curta; a matéria continua a mesma.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:960px){
  .imt-founder-row{
    box-shadow:0 1px 2px rgba(124,90,33,.06),0 10px 24px -14px rgba(124,90,33,.28);
  }
  .imt-founder-photo{box-shadow:inset 0 0 0 1px rgba(124,90,33,.10)}
}