:root{
  /* estrutura vinda da referência */
  --ink:#14151D;
  --ink-soft:#20232B;
  --bone:#EAE8E8;
  --graphite:#424346;
  /* identidade oficial da Cláudia */
  --bronze:#835F43;
  --gold:#DEBB99;
  --mauve:#CABCB7;
  --cream:#E2E1DB;

  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Montserrat",system-ui,-apple-system,sans-serif;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur-micro:180ms;
  --dur-hover:260ms;
  --dur-reveal:620ms;

  --p:0;
  --pad:clamp(20px,5vw,80px);
  --sec:clamp(80px,11vw,180px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--bone);
  font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.7;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- tipografia ---------- */
.display{
  font-family:var(--serif);font-weight:400;
  /* Medido no proprio canvas com a fonte carregada: a descendente do "j" mais
     a ascendente da linha de baixo pedem 0,948 do corpo da fonte. Com 0,86 as
     letras se encavalavam. 0,98 e o mesmo valor ja usado no hero. */
  line-height:.98;letter-spacing:-.032em;
  text-wrap:balance;
}
/* O titulo tem 2 linhas e o hero perdeu o rotulo e o paragrafo, entao sobra
   altura. Maior tambem faz ele cruzar mais a divisa claro/video, que e o que
   da o efeito de duas cores da referencia. */
/* Numeros medidos na referencia: 136px num viewport de 1440 (9,44vw) com teto
   de 153px, entrelinha 0,8 e tracking de -3%. */
.d-xl{font-size:min(9.44vw, 153px); font-size:clamp(2rem, min(9.44vw, 153px), 153px)}
/* A referencia usa 0,8, mas o texto dela nao tem a colisao que o nosso tem:
   aqui a descida do "p" de Implantodontia (31px) mais a subida do "P" de
   Periodontia (113px) pedem 144px, e 0,8 dava so 122,4px. Sobrepunha 21,6px.
   0,98 resolve com folga. Medido, nao estimado. */
.hero-centro h1,.hero-centro .over{line-height:.98}
/* Revelacao da frase quando a cortina sai: cada linha sobe de tras de uma
   janela que a esconde. O recorte e a propria linha, entao o texto surge
   deslizando de baixo, sem borda aparecendo. */
.hero-centro .linha{display:block;overflow:hidden}
/* O estado escondido mora DENTRO da animacao (from), nao no elemento. Assim,
   se a animacao nao rodar por qualquer motivo, o texto aparece normal em vez
   de ficar invisivel para sempre. O `both` segura o quadro inicial durante a
   espera, entao o efeito continua igual. */
.hero-centro .linha > span{display:block;
  animation:linhaSobe .95s var(--ease-out) both}
.hero-centro .linha:nth-child(1) > span{animation-delay:3.05s}
.hero-centro .linha:nth-child(2) > span{animation-delay:3.2s}
@keyframes linhaSobe{from{transform:translateY(110%)} to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .hero-centro .linha > span{transform:none;animation:none}
}
.d-lg{font-size:clamp(2.6rem,7.4vw,6.2rem)}
.d-md{font-size:clamp(2rem,4.4vw,3.6rem)}
.italic{font-style:italic;color:var(--gold)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.label{
  font-family:var(--sans);font-size:clamp(10px,1vw,11.5px);font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;line-height:1.4;
}
.lead{font-size:clamp(1.02rem,1.5vw,1.28rem);font-weight:400;line-height:1.66;max-width:60ch}
.body{font-size:clamp(.95rem,1.1vw,1.03rem);font-weight:400;line-height:1.75;max-width:62ch}
/* paragrafos seguidos estavam colados: o .body nao tinha margem nenhuma */
p.body + p.body,p.lead + p.body{margin-top:1.1em}
.muted{color:rgba(234,232,232,.78)}
.on-light .muted{color:rgba(66,67,70,.88)}

/* ---------- seções de dois tons ---------- */
section{padding:var(--sec) var(--pad);position:relative}
.on-light{background:var(--bone);color:var(--graphite)}
.on-light .display{color:var(--ink)}
.on-light .italic{color:var(--bronze)}
.wrap{max-width:1360px;margin:0 auto;width:100%}

/* ---------- abertura ----------
   Sequencia: o arco desenha e gira, some dando lugar ao simbolo dela, e o nome
   e revelado da esquerda para a direita. Os servicos ja aparecem cedo, embaixo,
   como na referencia. A cortina sai por animacao CSS com `forwards`: se o JS
   falhar, ela some do mesmo jeito e nao prende ninguem na tela. */
.abertura{
  position:fixed;inset:0;z-index:999;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  animation:aberturaSai .7s var(--ease-io) 3s forwards;
}
@keyframes aberturaSai{to{opacity:0;visibility:hidden;pointer-events:none}}

/* O nome fica numa caixa que comeca com largura ZERO. Sem isso ele ocupa
   espaco no layout mesmo invisivel, e a linha centralizada joga o simbolo
   para a esquerda do centro: e o que parecia defeito no carregamento.
   Quando a caixa abre, o simbolo desliza para a esquerda sozinho. */
.abertura{--alt-simb:clamp(104px,9.4vw,178px);--vao:clamp(14px,1.6vw,30px)}
.abertura-marca{display:flex;align-items:center}
.abertura-simbolo{position:relative;flex-shrink:0;
  width:calc(var(--alt-simb) * .902);height:var(--alt-simb)}
.abertura-simbolo .arco,.abertura-simbolo img{position:absolute;inset:0;
  width:100%;height:100%}
.abertura-simbolo img{object-fit:contain;opacity:0;
  animation:simboloEntra .5s var(--ease-out) 1.25s forwards}
@keyframes simboloEntra{to{opacity:1}}

.arco{overflow:visible;animation:arcoGira 1.25s linear,arcoSai .35s ease 1.25s forwards}
.arco circle{fill:none;stroke:var(--bone);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:276.5;stroke-dashoffset:276.5;
  animation:arcoDesenha 1.25s var(--ease-io) forwards}
@keyframes arcoDesenha{
  0%{stroke-dashoffset:276.5}
  55%{stroke-dashoffset:70}
  100%{stroke-dashoffset:0}
}
@keyframes arcoGira{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
@keyframes arcoSai{to{opacity:0}}

.abertura-nome-caixa{
  /* o vao vai como margem DENTRO da caixa: com padding, a caixa nunca chega a
     largura zero e o simbolo fica fora do centro no carregamento */
  overflow:hidden;flex-shrink:0;width:0;
  animation:nomeAbre .8s var(--ease-out) 1.6s forwards;
}
@keyframes nomeAbre{to{width:calc(var(--vao) + var(--alt-simb) * .92 * 2.394)}}
.abertura-nome{
  margin-left:var(--vao);
  height:calc(var(--alt-simb) * .92);width:calc(var(--alt-simb) * .92 * 2.394);
  max-width:none;object-fit:contain;display:block;
  opacity:0;animation:nomeAparece .55s var(--ease-out) 1.75s forwards;
}
@keyframes nomeAparece{to{opacity:1}}

.abertura-servicos{
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(22px,3vh,44px);
  display:flex;justify-content:space-between;gap:16px;
  font-family:var(--sans);font-weight:700;
  font-size:clamp(11px,.85vw,17px);letter-spacing:.02em;color:var(--bone);
  opacity:0;animation:servicosEntram .6s var(--ease-out) .35s forwards;
}
@keyframes servicosEntram{to{opacity:1}}
@media(max-width:700px){
  .abertura-servicos{justify-content:center;gap:14px;font-size:11px}
  .abertura-marca{flex-direction:column;gap:14px}
}
@media(prefers-reduced-motion:reduce){
  .abertura{animation:none;opacity:0;visibility:hidden;pointer-events:none}
}

/* ---------- header ----------
   referência medida: 72px de altura, marca ocupando 51% dela.
   A logo da Cláudia é 1188x469 (2,53:1), então 52px de altura = 132px de largura. */
/* Sem barra no topo, como na referencia. O menu cruzaria a divisa entre o
   lado claro e o video, entao cada item existe em DUAS camadas sobrepostas:
   a escura por baixo e a clara recortada exatamente na regiao do video, com a
   mesma conta que ja recorta a frase do hero. Passando do hero, volta a barra. */
header{
  position:fixed;inset:0 0 auto 0;z-index:100;min-height:clamp(64px,5vw,104px);
  background:rgba(234,232,232,0);
  border-bottom:1px solid rgba(66,67,70,0);
  transition:background var(--dur-hover) var(--ease-io),
             border-color var(--dur-hover) var(--ease-io),
             transform 420ms var(--ease-out);
}
/* rolagem para baixo esconde a barra para nao atrapalhar os motions;
   rolagem para cima traz ela de volta. Igual a referencia. */
header.escondida{transform:translateY(-100%)}
header.stuck{background:rgba(234,232,232,.96);backdrop-filter:blur(14px);
  border-bottom-color:rgba(66,67,70,.14)}
.hd-camada{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:clamp(8px,.6vw,16px) var(--pad);
}
.hd-clara{
  pointer-events:none;
  /* a borda esquerda do video em porcentagem da largura da tela */
  clip-path:inset(0 0 0 calc(50% * (1 - var(--p,0))));
}
header.stuck .hd-clara{display:none}
/* Marca horizontal (simbolo a esquerda, nome a direita), recortada da margem
   vazia do arquivo original: 1108x342 de arte util dentro de 1501x1501.
   Sem esse recorte ela aparecia pequena mesmo com altura grande. */
header .logo img{height:clamp(38px,3.84vw,78px);width:auto;display:block}
nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px)}
nav a.navlink{
  font-size:clamp(14px,1.111vw,22px);font-weight:400;letter-spacing:0;color:var(--graphite);
  transition:color var(--dur-hover) var(--ease-io);
}
nav a.navlink:hover{color:var(--bronze)}

/* ---------- cores de cada camada do topo ----------
   A referencia usa Inter Tight, que no peso 400 ja e densa. Montserrat no
   mesmo 400 fica bem mais fina e o texto some sobre o video. Por isso aqui o
   peso sobe para 600: mesma leitura, tipo diferente. */
.hd-escura .navlink{color:var(--graphite)}
.hd-escura .navlink:hover{color:var(--bronze)}
.hd-escura .pill{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.hd-escura .burger{border-color:rgba(66,67,70,.34)}
.hd-escura .burger span{background:var(--graphite)}

.hd-clara .navlink{color:var(--bone)}
.hd-clara .pill{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.hd-clara .burger{border-color:rgba(234,232,232,.42)}
.hd-clara .burger span{background:var(--bone)}

/* A camada clara nao recebe ponteiro (senao bloquearia os cliques), entao o
   hover sempre acontece na camada escura, por baixo. O JS espelha esse hover
   aqui, que e a camada que aparece sobre o video. */
.hd-clara .navlink.espelho-hover{color:var(--gold)}
.hd-clara .pill.espelho-hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.hd-clara .pill.espelho-hover .roll span{transform:translateY(-100%)}
.hd-clara .pill.espelho-hover .ico{transform:rotate(90deg)}
.hd-clara .burger.espelho-hover{border-color:var(--gold)}

header nav a.navlink{font-weight:600}

/* botão hambúrguer: só no mobile */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;border:1px solid rgba(66,67,70,.3);border-radius:999px;
  background:transparent;cursor:pointer;align-items:center;
  transition:border-color var(--dur-hover) var(--ease-io)}
.burger span{display:block;width:17px;height:1.5px;background:var(--graphite);
  transition:transform var(--dur-hover) var(--ease-io),opacity var(--dur-micro) var(--ease-io)}
.burger:hover{border-color:var(--bronze)}
body.locked .burger span{background:var(--bone)}
body.locked .burger{border-color:rgba(234,232,232,.3)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* painel de menu mobile */
.sheet{
  position:fixed;inset:0;z-index:95;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:0 var(--pad);
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity 320ms var(--ease-io),transform 380ms var(--ease-out),visibility 0s linear 380ms;
}
.sheet.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.sheet a{font-family:var(--serif);font-size:clamp(2rem,10vw,2.9rem);letter-spacing:-.03em;
  line-height:1.25;color:var(--bone);
  opacity:0;transform:translateY(16px);
  transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out),color var(--dur-hover) var(--ease-io)}
.sheet.open a{opacity:1;transform:none}
.sheet.open a:nth-child(1){transition-delay:70ms}
.sheet.open a:nth-child(2){transition-delay:140ms}
.sheet.open a:nth-child(3){transition-delay:210ms}
.sheet.open a:nth-child(4){transition-delay:280ms}
.sheet a:hover{color:var(--gold)}
/* o botao do menu so existe no celular (a folha some acima de 860px), e
   centralizado ele fica mais estavel do que colado na margem esquerda */
.sheet .sheet-cta{margin-top:34px;text-align:center;opacity:0;transform:translateY(16px);
  transition:opacity 420ms var(--ease-out) 350ms,transform 420ms var(--ease-out) 350ms}
.sheet.open .sheet-cta{opacity:1;transform:none}
body.locked{overflow:hidden}

@media(max-width:860px){
  nav .navlink{display:none}
  .burger{display:flex}
}
@media(min-width:861px){.sheet{display:none}}

/* ---------- botão pill ----------
   medido na referência: 48px de altura, raio 64px, padding 16px/24px, gap 24px,
   corpo 16px peso 400 SEM caixa alta e SEM tracking, transição 0.3s ease-in-out.
   O movimento é rolagem de texto: duas cópias empilhadas, a de cima sobe e a de
   baixo entra no lugar. Nada de troca de cor de fundo com ponto piscando. */
.pill{
  display:inline-flex;align-items:center;gap:clamp(14px,1.667vw,34px);
  min-height:clamp(44px,3.33vw,68px);padding:0 clamp(18px,1.667vw,34px);border-radius:999px;
  border:1px solid transparent;background:var(--ink);color:var(--bone);
  /* peso 600: a referencia usa Inter Tight, densa no 400. Montserrat no 400
     fica fina demais e o texto some sobre o video. */
  font-family:var(--sans);font-size:clamp(14px,1.111vw,22px);font-weight:600;
  letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer;
  transition:background .3s ease-in-out,color .3s ease-in-out,border-color .3s ease-in-out;
}
.pill .roll{display:block;overflow:hidden;height:1.35em;position:relative}
.pill .roll span{display:block;height:1.35em;line-height:1.35em;
  transition:transform .3s ease-in-out}
.pill:hover .roll span{transform:translateY(-100%)}
.pill .ico{flex-shrink:0;width:clamp(12px,.97vw,19px);height:clamp(12px,.97vw,19px);transition:transform .3s ease-in-out}
.pill:hover .ico{transform:rotate(90deg)}
.pill:hover{background:var(--bronze);color:var(--bone);border-color:var(--bronze)}

/* variante clara: usada sobre fundo escuro */
.pill.light{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.pill.light:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* variante de contorno */
.pill.ghost{background:transparent;color:var(--graphite);border-color:rgba(66,67,70,.3)}
.pill.ghost:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
section:not(.on-light) .pill.ghost{color:var(--bone);border-color:rgba(234,232,232,.3)}
section:not(.on-light) .pill.ghost:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}

/* ---------- hero ----------
   A referência abre CLARA (#EAE8E8) com o display em grafite, e um painel de
   imagem à direita onde o texto que cruza vira claro. Isso também é mais fiel
   à identidade da Cláudia, que é clara e quente. */
/* O hero vira um trilho de rolagem de 2 telas. O conteudo fica preso no topo
   enquanto a pagina rola, e o progresso (--p, de 0 a 1) abre o video ate a
   largura inteira e faz a frase virar clara por completo. */
.hero{
  position:relative;background:var(--bone);color:var(--graphite);
  height:200svh;padding:0;
}
.hero-pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  /* respiro igual em cima e embaixo: e o que coloca o titulo no centro exato
     da tela, como na referencia (centro em 50,0%). A base do hero e absoluta,
     entao nao depende deste respiro. */
  padding:clamp(96px,13vh,170px) var(--pad);
}
.hero-media{
  position:absolute;top:0;right:0;height:100%;overflow:hidden;background:var(--ink);
  /* Metade da tela no topo, tela inteira ao fim do trilho.
     A referencia divide exatamente ao meio: o video dela comeca em x=960
     numa tela de 1920. */
  width:calc(50% + 50% * var(--p,0));
}
.hero-media img{display:none}
/* a imagem de reserva so entra quando o video nao existe: movimento reduzido */
@media(prefers-reduced-motion:reduce){
  .hero-media video{display:none}
  .hero-media img{display:block}
}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;
  /* O video e retrato (1080x1920). Com o painel estreito quase nada e cortado,
     mas na tela inteira sobram so 659px de altura dos 1920, ou seja 34% do
     quadro. Com o enquadramento parado em 22% essa faixa cai na testa dela.
     Por isso o enquadramento desce junto com a abertura: 22% -> 42%. */
  object-position:50% calc(40% + 2% * var(--p,0));
  filter:grayscale(.34) contrast(1.05) brightness(.82)}
.hero-media video{position:absolute;inset:0}
/* sem video disponivel, ou movimento reduzido: fica a foto */
@media(prefers-reduced-motion:reduce){.hero-media video{display:none}}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(20,21,29,.62) 0%,rgba(20,21,29,.24) 42%,rgba(20,21,29,.5) 100%)}
.hero .wrap{position:relative;z-index:2}

/* Composicao da referencia: titulo grande centralizado na PAGINA cruzando a
   divisa claro/video, e uma base com o registro a esquerda (lado claro) e a
   frase a direita (sobre o video). */
.hero-pin{justify-content:center}

/* precisa ocupar a largura CHEIA do hero, sem o respiro lateral: o recorte e
   uma porcentagem da propria caixa, e se ela for menor que a tela o corte sai
   deslocado da borda do video. */
/* Slogan que desliza na horizontal conforme o video se abre, como na
   referencia. A frase e mais larga que a tela e anda da direita para a
   esquerda presa ao mesmo progresso --p que abre o video.
   Aparece so depois que o video ja tomou boa parte da tela, senao invadiria
   o lado claro. */
.hero-slogan{
  position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);
  display:flex;justify-content:center;
  overflow:hidden;white-space:nowrap;pointer-events:none;z-index:3;
  opacity:calc((var(--p,0) - 0.34) * 4);
}
.hero-slogan span{
  display:inline-block;white-space:nowrap;
  font-family:var(--serif);font-weight:400;
  /* precisa CABER na tela: a frase termina inteira e legivel, nao cortada */
  font-size:min(10vw, 12rem, 24vh);
  line-height:1;letter-spacing:-.03em;color:var(--bone);
  /* entra pela direita e para no centro. Em p=1 o deslocamento e zero, entao
     ela para exatamente onde o flex a centraliza. */
  transform:translateX(calc((1 - var(--p,0)) * 100vw));
}
@media(max-width:960px){.hero-slogan{display:none}}

.hero-centro{position:relative;text-align:center;z-index:2;
  width:calc(100% + var(--pad) * 2);margin-left:calc(var(--pad) * -1);
  /* sobe o bloco em relacao ao centro exato da tela */
  margin-top:calc(-1 * clamp(30px, 6vh, 70px))}
.hero-centro h1{margin:0;color:var(--graphite)}
.hero-centro{opacity:calc(1 - var(--p,0) * 2.4)}
.hero-centro .over{
  position:absolute;left:0;top:0;width:100%;margin:0;
  color:var(--bone);pointer-events:none;
  /* mesma conta do header: a borda do video em porcentagem da largura */
  clip-path:inset(0 0 0 calc(50% * (1 - var(--p,0))));
}
.hero-centro .over .italic{color:var(--cream)}

.hero-base{
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(26px,4vh,52px);
  z-index:2;display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(24px,5vw,80px);
  opacity:calc(1 - var(--p,0) * 2.2);
}
.hero-base-esq{flex-shrink:0}
/* mesma logica do "Based in:" da referencia: rotulo pequeno em cinza e os
   lugares empilhados em peso alto */
.base-rotulo{font-family:var(--sans);font-size:clamp(12px,.95vw,18px);
  font-weight:400;color:rgba(66,67,70,.7);margin-bottom:clamp(10px,.9vw,18px)}
.base-locais{font-family:var(--sans);font-size:clamp(14px,1.111vw,22px);
  font-weight:700;line-height:1.35;color:var(--ink);letter-spacing:-.01em}
@media(max-width:960px){.base-locais{color:var(--ink)}}
.hero-assinatura{margin-left:auto;text-align:left}
.hero-cro{font-family:var(--sans);font-weight:600;
  font-size:clamp(11px,.8vw,16px);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(234,232,232,.72);margin-top:clamp(6px,.6vw,12px)}
@media(max-width:960px){.hero-cro{color:rgba(66,67,70,.72)}}
.hero-frase{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.25rem,2.5vw,2.35rem);line-height:1.12;letter-spacing:-.02em;
  color:var(--bone);text-align:left;max-width:22ch;
}
.hero-frase .italic{color:var(--cream)}

@media(max-width:960px){
  .hero-base{position:static;flex-direction:column;align-items:flex-start;
    opacity:1;margin-top:clamp(26px,4vh,44px)}
  .hero-frase{color:var(--graphite);margin-left:0;max-width:100%}
  .hero-frase .italic{color:var(--bronze)}
  .hero-centro{text-align:left}
  .hero-centro .over{display:none}
}

/* ---------- manifesto e retrato viajante ----------
   O retrato atravessa duas secoes crescendo: fica preso no topo enquanto o
   trecho rola, e a escala vem do progresso --q calculado sobre esse trecho. */
.manifesto-grid{display:grid;grid-template-columns:.8fr 1.2fr;
  gap:clamp(32px,6vw,90px);align-items:start}
/* a primeira coluna fica vazia de proposito: e o espaco da foto */
.manifesto-texto{grid-column:2}
@media(max-width:900px){.manifesto-grid{grid-template-columns:1fr;gap:28px}
  .manifesto-texto{grid-column:1}}

.trecho-retrato{position:relative;
  --foto-w:clamp(210px,18vw,320px);
  --foto-max:calc(var(--foto-w) * 1.42);
  --foto-esq:max(var(--pad), calc((100vw - 1360px) / 2));
}
/* `clip` e nao `hidden`: hidden criaria um container de rolagem e quebraria o
   sticky. Sem isso a foto ampliada escapa por baixo e invade a secao seguinte. */
/* o topo recuado descola a foto do video da secao anterior; como o recorte
   e este mesmo elemento, ela tambem nao pinta acima dessa linha */
.retrato-trilho{position:absolute;
  inset:clamp(56px,7vw,130px) 0 clamp(96px,13vh,170px) 0;
  pointer-events:none;z-index:5;overflow:clip}
.retrato-viagem{
  position:sticky;margin:0;margin-left:var(--foto-esq);
  width:var(--foto-w);
  overflow:hidden;background:var(--ink-soft);
  /* Ancora no canto superior esquerdo (com origem no meio ela crescia para
     cima e invadia a secao anterior). Para ficar SEMPRE centrada na vertical,
     o topo do sticky recua no mesmo ritmo em que ela cresce. */
  transform-origin:0% 0%;
  transform:scale(calc(1 + .42 * var(--q,0)));
  top:calc((100vh - var(--foto-w) * 1.5 * (1 + .42 * var(--q,0))) / 2);
  will-change:transform;
}
.retrato-viagem img{display:block;width:100%;height:auto;
  aspect-ratio:2 / 3;object-fit:cover;filter:grayscale(.32) contrast(1.04)}
/* a foto sorrindo fica empilhada em cima da de mascara, no mesmo tamanho, e
   vai surgindo conforme a rolagem da secao da profissional: uma apaga a outra */
.retrato-viagem .rv-b{position:absolute;inset:0;height:100%;
  opacity:clamp(0, calc((var(--t,0) - .10) / .34), 1)}
@media(max-width:1100px){
  /* em tela estreita ele volta a ser foto normal no fluxo, sem viagem */
  /* `overflow:clip` aqui e do desktop, onde o trilho e uma caixa absoluta
     que segura a foto ampliada. Em tela estreita ele nao serve para nada
     (quem corta a foto e o overflow:hidden da propria moldura) e ainda
     derruba a pintura: com ele, secoes inteiras abaixo do hero paravam de
     ser desenhadas no Chrome e a tela ficava preta com o conteudo todo la,
     visivel no DOM. Reproduzido e confirmado em 08/09/2026. */
  .retrato-trilho{position:static;overflow:visible}
  /* `relative` e nao `static`: static tambem tira o sticky, mas faz a foto
     de cima (.rv-b, que e absolute) se prender ao .trecho-retrato inteiro,
     4000px de altura. Ela virava um borrao gigante dentro da moldura. */
  /* `top:auto` junto: o valor de `top` do sticky nao e ignorado por um
     relative, ele empurra a foto para baixo e ela sai pelo rodape do
     trilho, que tem overflow:clip. Ficava so uma tira da foto a mostra. */
  .retrato-viagem{position:relative;top:auto;transform:none;
    width:min(340px,72vw);margin:0 auto clamp(28px,5vw,48px)}
}
@media(prefers-reduced-motion:reduce){.retrato-viagem{transform:none}}

/* ---------- a profissional ----------
   A foto termina a viagem aqui: a primeira coluna do grid e so a vaga dela.
   O texto fica a direita, parcialmente oculto, e corre conforme a rolagem,
   com as pontas esmaecidas por mascara, como na referencia. */
#profissional{padding:0;height:270svh}
.pro-pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;
  padding:clamp(88px,11vh,140px) var(--pad)}
.pro-grid{display:grid;
  grid-template-columns:calc(var(--foto-max) + clamp(30px,4vw,72px)) 1fr;
  align-items:center}
.pro-vaga{grid-column:1}
.pro-texto{grid-column:2;min-width:0}
.pro-scroll{margin-top:clamp(20px,2.2vw,34px);
  height:min(60svh,560px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 90%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 90%,transparent 100%)}
.pro-corrida{transform:translateY(calc(-1 * var(--t,0) * var(--desl,0px)));
  will-change:transform;padding-bottom:clamp(64px,11vh,120px)}
.pro-corrida .body{margin:0 0 1.15em;line-height:1.9;max-width:60ch;
  font-size:clamp(1rem,1.2vw,1.14rem)}
.pro-corrida .assinatura{color:rgba(234,232,232,.5)}
.pro-corrida .timeline{margin-top:clamp(14px,1.6vw,22px)}
@media(max-width:1100px){
  /* sem viagem e sem trilho: vira secao comum, com o texto inteiro a mostra */
  #profissional{height:auto;padding:var(--sec) 0}
  .pro-pin{position:static;height:auto;padding:0 var(--pad)}
  .pro-grid{grid-template-columns:1fr}
  .pro-vaga{display:none}
  .pro-texto{grid-column:1}
  .pro-scroll{height:auto;overflow:visible;
    -webkit-mask-image:none;mask-image:none}
  .pro-corrida{transform:none}
}
@media(prefers-reduced-motion:reduce){
  #profissional{height:auto}
  .pro-pin{position:static;height:auto}
  .pro-scroll{height:auto;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .pro-corrida{transform:none}
}


/* Lista de areas: estava sem CSS nenhum desde a reescrita do hero, por isso
   os blocos apareciam empilhados e colados. Separador e respiro por bloco. */
.areas{margin-top:clamp(30px,3.4vw,52px);border-top:1px solid rgba(234,232,232,.16)}
/* Sao TRES filhos (numero, titulo e texto), nao dois: sem dizer a coluna de
   cada um, o texto caia na primeira coluna e a inchava. */
.area{display:grid;grid-template-columns:auto 1fr;
  gap:0 clamp(16px,2.2vw,40px);align-items:start;
  padding:clamp(26px,2.8vw,42px) 0;
  border-bottom:1px solid rgba(234,232,232,.16)}
.area .num{grid-column:1;grid-row:1 / span 2}
.area h3{grid-column:2;grid-row:1}
.area .body{grid-column:2;grid-row:2}
.area .num{font-family:var(--serif);font-size:clamp(1.4rem,2vw,2rem);
  color:var(--gold);line-height:1.05;margin:0}
.area h3{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.45rem,2.3vw,2.05rem);letter-spacing:-.02em;
  line-height:1.1;margin:0 0 clamp(10px,1vw,16px)}
.area .body{margin:0;line-height:1.85;max-width:52ch}
@media(max-width:640px){.area{grid-template-columns:1fr;gap:6px}}

/* na secao escura o conteudo desvia para a direita da foto ampliada */
@media(min-width:1101px){
  .trecho-retrato #atuacao .wrap{
    max-width:none;
    padding-left:calc(var(--foto-esq) + var(--foto-max) + clamp(24px,3vw,56px) - var(--pad));
  }
}


/* ---------- depoimentos ----------
   Mesma divisao da referencia: rotulo e lista de nomes a esquerda, a fala
   grande a direita, separadas por um fio vertical. Troca sozinha a cada 9s,
   com um arco de progresso no item ativo; clicar tambem troca. */
#depoimentos{background:var(--ink)}
.dep-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(30px,6vw,110px);align-items:start}
.dep-lista{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(6px,.6vw,10px);margin-top:clamp(24px,3.2vw,52px)}
.dep-item{display:flex;align-items:center;gap:10px;padding:4px 0;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--sans);font-size:clamp(14px,1.05vw,19px);font-weight:600;
  color:rgba(234,232,232,.34);
  transition:color var(--dur-hover) var(--ease-io)}
.dep-item:hover{color:rgba(234,232,232,.7)}
.dep-item.ativo{color:var(--bone)}
.dep-arco{width:14px;height:14px;flex:none;border-radius:50%;
  border:1.6px solid transparent;opacity:0}
.dep-item.ativo .dep-arco{opacity:1;border-color:transparent;
  border-top-color:var(--gold);border-right-color:var(--gold);
  animation:depGira 6s linear infinite}
@keyframes depGira{from{transform:rotate(0)} to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.dep-item.ativo .dep-arco{animation:none}}
.dep-nota{display:flex;align-items:center;gap:10px;
  margin-top:clamp(28px,3.4vw,54px);
  font-family:var(--sans);font-size:clamp(11px,.86vw,14px);font-weight:600;
  letter-spacing:.04em;color:rgba(234,232,232,.5);
  transition:color var(--dur-hover) var(--ease-io)}
.dep-nota:hover{color:var(--bone)}
.dep-estrelas{color:var(--gold);letter-spacing:.1em}
.dep-dir{position:relative;padding-left:clamp(24px,3vw,56px);
  border-left:1px solid rgba(234,232,232,.16);min-height:clamp(280px,30vw,420px)}
.dep-fala{position:absolute;inset:0 0 auto 0;padding-left:inherit;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .55s var(--ease-io),transform .55s var(--ease-out),visibility 0s .55s}
.dep-fala.ativo{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dep-fala blockquote{margin:0;font-family:var(--sans);font-weight:600;
  font-size:clamp(1.15rem,1.85vw,1.95rem);line-height:1.42;
  letter-spacing:-.015em;color:var(--bone);max-width:24ch}
.dep-autor{margin-top:clamp(26px,3vw,44px);
  font-family:var(--sans);font-size:clamp(12px,.9vw,15px);font-weight:600;
  color:rgba(234,232,232,.5)}
@media(max-width:900px){
  .dep-grid{grid-template-columns:1fr;gap:26px}
  .dep-dir{padding-left:20px;min-height:0;display:grid}
  .dep-fala{position:relative;inset:auto;grid-area:1/1}
}

/* ---------- fecho: foto grande com a frase por cima ---------- */
/* A foto vem sem fundo, entao ela fica em pe sobre o proprio fundo do site e
   a frase passa dos dois lados dela, como na referencia. */
.fecho{position:relative;padding:0;
  /* o topo comeca EXATAMENTE na cor da secao de cima e vai clareando devagar:
     e o degrade imperceptivel, sem nenhuma linha de encontro entre duas cores */
  background:linear-gradient(180deg,var(--ink) 0%,#181a23 22%,var(--ink-soft) 52%,var(--ink-soft) 100%);
  /* o arco tambem obedece a ALTURA da tela: so com vw ele ficava alto
     demais numa tela baixa e empurrava o selo para cima do bordado */
  --arco-alt:clamp(120px,min(15vw,26svh),250px);
  height:clamp(590px,106svh,1100px);overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center}
.fecho-foto{position:absolute;bottom:clamp(26px,5vh,58px);left:50%;transform:translateX(-50%);
  height:92%;width:auto;max-width:none;z-index:2;
  /* clareia um pouco menos do que o resto do site para o rosto nao apagar */
  filter:contrast(1.04) saturate(.96)}
/* luz de fundo atras dela, como na referencia: um halo que morre em
   transparente antes de chegar nas bordas, entao nao ha degrau em lugar nenhum */
.fecho::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(76% 60% at 50% 44%,
    rgba(126,134,156,.26) 0%,
    rgba(74,80,98,.15) 34%,
    rgba(38,41,52,.06) 58%,
    rgba(24,26,35,0) 78%)}
/* Meio circulo chapado por cima da parte de baixo da foto, igual a referencia.
   Ele e 160% da largura da tela: as pontas ficam de fora, entao so se ve a
   curva, nunca a quina dela encontrando a borda em linha reta. */
.fecho-arco{position:absolute;left:-30%;right:-30%;bottom:0;
  height:var(--arco-alt);z-index:3;pointer-events:none;
  background:var(--ink);border-radius:50% 50% 0 0 / 100% 100% 0 0}
.fecho-frase{position:relative;z-index:4;width:100%;
  display:flex;align-items:baseline;justify-content:center;
  gap:clamp(10px,2vw,40px);
  padding:0 var(--pad) calc(var(--arco-alt) + clamp(12px,2.2vw,40px))}
.fecho-lado{font-family:var(--serif);font-weight:400;color:var(--bone);
  font-size:clamp(2.2rem,7vw,6rem);line-height:.98;letter-spacing:-.032em;
  white-space:nowrap;flex:1 1 0}
.fecho-lado.esq{text-align:right}
.fecho-lado.dir{text-align:left}
.fecho-selo{position:relative;font-family:var(--sans);font-size:clamp(9px,.72vw,12px);
  font-weight:700;text-transform:uppercase;letter-spacing:.14em;line-height:1.5;
  color:var(--bone);text-align:center;align-self:center;
  flex:0 0 auto;max-width:16ch}
/* O bordado do jaleco cai atras deste texto. Em vez de desfocar a foto (que
   borrava uma area grande demais), uma sombra escura curta colada nas letras:
   ela cobre so o que esta imediatamente atras do texto. */
.fecho-selo{text-shadow:
  0 1px 2px rgba(10,11,16,.95),
  0 0 7px rgba(10,11,16,.92),
  0 0 15px rgba(10,11,16,.72)}
@media(max-width:820px){
  .fecho{height:clamp(450px,80svh,760px);--arco-alt:clamp(80px,14vw,140px)}
  .fecho-foto{height:84%;bottom:clamp(18px,3vh,34px)}
  .fecho-lado{font-size:clamp(1.7rem,7.6vw,3rem)}
  .fecho-selo{display:none}
}

/* ---------- contato: o painel escuro sobe em arco por cima da foto ---------- */
#contato{position:relative;background:var(--ink);
  padding:calc(var(--arco,60px) + clamp(20px,3vw,50px)) var(--pad) clamp(50px,6vw,90px)}
/* o painel encosta direto: a base do fecho ja e o --ink do arco, entao a
   passagem de um para o outro nao tem cor nenhuma mudando */
#contato{--arco:0px}
#contato > .wrap{position:relative;z-index:2}
.contato-simbolo{display:block;margin:0 auto clamp(40px,5vw,80px);
  height:clamp(46px,4.4vw,86px);width:auto}
.contato-topo{display:grid;grid-template-columns:auto 1fr;
  gap:clamp(24px,5vw,90px);align-items:start}
.contato-social{display:flex;gap:clamp(10px,1vw,18px)}
.social{width:clamp(48px,3.9vw,74px);height:clamp(48px,3.9vw,74px);
  border-radius:50%;background:rgba(234,232,232,.07);color:rgba(234,232,232,.8);
  display:grid;place-items:center;
  transition:background var(--dur-hover) var(--ease-io),color var(--dur-hover) var(--ease-io)}
.social svg{width:44%;height:44%}
.social:hover{background:var(--gold);color:var(--ink)}
.contato-chamada .display{max-width:16ch}
.contato-cols{display:grid;grid-template-columns:1fr 1fr 1.6fr;
  gap:clamp(24px,4vw,70px);
  margin-top:clamp(56px,8vw,130px);padding-top:clamp(30px,3.4vw,52px);
  border-top:1px solid rgba(234,232,232,.14)}
.contato-cols .col{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,.9vw,14px)}
.contato-cols .label{margin-bottom:clamp(10px,1.4vw,22px)}
.contato-cols a,.contato-cols .local-cidade{font-family:var(--sans);
  font-size:clamp(15px,1.15vw,21px);font-weight:600;color:var(--bone);
  transition:color var(--dur-hover) var(--ease-io)}
.contato-cols a:hover{color:var(--gold)}
.local{display:flex;flex-direction:column;gap:clamp(6px,.7vw,11px)}
.local-cidade{margin:0}
.local-forte{margin-top:clamp(6px,.8vw,12px)}
.local-linha{margin:0;font-family:var(--sans);font-size:clamp(12px,.92vw,15px);
  font-weight:500;color:rgba(234,232,232,.6)}
a.local-linha:hover{color:var(--gold)}
@media(max-width:900px){
  .contato-topo{grid-template-columns:1fr;gap:26px}
  .contato-cols{grid-template-columns:1fr 1fr;gap:30px}
  .contato-cols .col-larga{grid-column:1 / -1}
}


/* ---------- a marca da Claudia como icone de botao ----------
   SVG reconstruido a partir das medidas do PNG oficial (raios 158 e 126,7,
   traco 15,1 e os vaos de cada arco). Inline para herdar a cor do botao em
   que estiver, sem precisar de uma arte por contexto. */
/* ---------- soluções: lista editorial que abre ----------
   A referencia nunca poe descricao por item numa lista: ela lista nome e usa
   escala tipografica como hierarquia. Aqui os 19 nomes ficam grandes e o
   paragrafo so aparece quando a pessoa abre. O texto continua TODO no HTML,
   apenas recolhido por CSS, entao o Google le tudo. */
.grupo{margin-top:clamp(38px,4.8vw,76px)}
.grupo-cab{display:flex;align-items:baseline;gap:16px;
  padding-bottom:clamp(14px,1.6vw,22px);border-bottom:1px solid rgba(66,67,70,.26)}
.grupo-cab h3{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,3.2vw,2.6rem);letter-spacing:-.025em;color:var(--ink)}
.grupo-cab .count{font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.14em;color:var(--bronze)}

.sol{border-bottom:1px solid rgba(66,67,70,.14)}
.sol-cab{width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:baseline;gap:clamp(14px,2vw,36px);
  padding:clamp(13px,1.35vw,21px) 0;
  transition:padding-left var(--dur-hover) var(--ease-io)}
.sol-cab:hover{padding-left:clamp(6px,1vw,16px)}
.sol-num{font-family:var(--serif);font-size:clamp(.85rem,1.05vw,1.15rem);
  color:var(--bronze);line-height:1}
/* tracking negativo e o gesto da referencia, mas ele so funciona em corpo
   gigante. Nestes 27px ele so espremia as letras: aqui vai levemente aberto. */
.sol-nome{font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(1.12rem,1.85vw,1.68rem);letter-spacing:.012em;line-height:1.14}
.sol-tag{font-family:var(--sans);font-size:clamp(9.5px,.72vw,11px);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--bronze);
  text-align:right;white-space:nowrap}
.sol-ico{width:clamp(11px,.85vw,14px);height:clamp(11px,.85vw,14px);
  color:var(--graphite);flex:none;
  transition:transform var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-io)}
.sol-cab:hover .sol-ico{color:var(--bronze)}
.sol.aberto .sol-ico{transform:rotate(45deg);color:var(--bronze)}

/* grid-template-rows de 0fr para 1fr anima a altura sem precisar medir nada
   no JS e sem tirar o texto do documento */
.sol-corpo{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 480ms var(--ease-out),opacity 340ms var(--ease-io);
  opacity:0}
.sol-corpo > *{overflow:hidden;min-height:0}
.sol.aberto .sol-corpo{grid-template-rows:1fr;opacity:1}
.sol-corpo .body{max-width:62ch;line-height:1.85;
  margin:0 0 clamp(16px,1.8vw,26px);
  padding-left:calc(clamp(.85rem,1.05vw,1.15rem) + clamp(14px,2vw,36px))}

/* com um item aberto, os outros recuam: o olho vai para o que foi escolhido */
.sols.tem-aberto .sol:not(.aberto) .sol-nome{color:rgba(66,67,70,.42)}
.sols.tem-aberto .sol:not(.aberto) .sol-num,
.sols.tem-aberto .sol:not(.aberto) .sol-tag{opacity:.5}
.sol-nome,.sol-num,.sol-tag{transition:color var(--dur-hover) var(--ease-io),opacity var(--dur-hover) var(--ease-io)}

@media(max-width:820px){
  .sol-cab{grid-template-columns:auto minmax(0,1fr) auto;gap:10px 14px}
  .sol-tag{grid-column:2;grid-row:2;text-align:left;white-space:normal}
  .sol-corpo .body{padding-left:0}
  .sol-cab:hover{padding-left:0}
}
@media(prefers-reduced-motion:reduce){
  .sol-corpo{transition:none}
}

/* ---------- profissional ---------- */
@media(max-width:900px){.pro{grid-template-columns:1fr;gap:40px}}
/* o elemento com movimento amplia um pouco para ter folga e nao mostrar borda
   ao deslocar; o deslocamento em si vem do JS, ligado a rolagem */
[data-parallax]{overflow:hidden}
[data-parallax] img{transform:scale(1.12);transform-origin:50% 50%;will-change:transform}
@media(prefers-reduced-motion:reduce){[data-parallax] img{transform:none}}
@media(max-width:900px){[data-parallax] img{transform:none}}
.timeline{margin-top:clamp(34px,5vw,54px);border-top:1px solid rgba(234,232,232,.14)}
.tl{display:grid;grid-template-columns:96px 1fr;gap:clamp(14px,2.4vw,32px);padding:16px 0;border-bottom:1px solid rgba(234,232,232,.1)}
@media(max-width:620px){.tl{grid-template-columns:1fr;gap:4px}}
.tl .yr{font-family:var(--serif);font-size:1.15rem;color:var(--gold);line-height:1.3}
.tl p{font-size:.94rem;font-weight:400;line-height:1.6;color:rgba(234,232,232,.86)}

/* ---------- statement ---------- */
.statement{text-align:center}
.statement .display{margin:0 auto;max-width:19ch}

/* ---------- contato ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,80px);align-items:end}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:40px}}
.chan{display:block;padding:20px 0;border-top:1px solid rgba(234,232,232,.14);transition:padding-left var(--dur-hover) var(--ease-io)}
.chan:hover{padding-left:10px}
.chan .v{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.02em;line-height:1.2;transition:color var(--dur-hover) var(--ease-io)}
.chan:hover .v{color:var(--gold)}

footer{padding:clamp(30px,4vw,44px) var(--pad);border-top:1px solid rgba(234,232,232,.14)}
.foot-logo{height:clamp(58px,4.4vw,84px);width:auto;display:block}
/* o simbolo do WhatsApp e a linha de cidades do rodape existem so no
   celular; no PC nada muda, e por isso eles nascem escondidos aqui */
.ico-wa{display:none}
.foot-locais{display:none}
.pro-foto-mobile{display:none}
.rot-contato{display:none}
.foot-row{max-width:1360px;margin:0 auto;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}


/* ---------- frase que sobe linha por linha ao chegar a rolagem ----------
   Mesmo gesto do titulo da home: cada linha e uma janela recortada e o texto
   sobe de dentro dela. Aqui quem dispara e o IntersectionObserver que ja
   existe para os .reveal, entao nao precisa de JS novo. */
.sobe.reveal{opacity:1;transform:none}
.sobe .linha{display:block;overflow:hidden}
.sobe .linha > span{display:block;transform:translateY(112%);
  transition:transform .95s var(--ease-out)}
.sobe.in .linha > span{transform:none}
.sobe.in .linha:nth-child(2) > span{transition-delay:.15s}
@media(prefers-reduced-motion:reduce){
  .sobe .linha > span{transform:none;transition:none}
}

/* ---------- revelação por rolagem ----------
   motion-design: entrada = curva desacelerada, nunca linear;
   nunca só opacidade, sempre com deslocamento; deslocamento curto (28px). */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);
  transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .wa{transform:none;opacity:1;transition:none}
  *{transition-duration:.01ms !important}
}


/* ---------- páginas internas (blog) ----------
   O cabeçalho do site tem duas camadas recortadas porque atravessa o vídeo do
   hero. Aqui não existe vídeo, então ele é sólido desde o topo. */
.pag-interna{background:var(--ink);color:var(--bone)}
.hd-solido{position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(20,21,29,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(234,232,232,.12)}
.hd-solido .hd-camada{position:relative}
.hd-solido .navlink{color:rgba(234,232,232,.82)}
.hd-solido .navlink:hover{color:var(--gold)}
.hd-solido .pill{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.hd-solido .pill:hover{background:var(--gold);border-color:var(--gold)}
.hd-solido .burger{border-color:rgba(234,232,232,.42)}
.hd-solido .burger span{background:var(--bone)}

.pag-topo{padding:clamp(140px,17vh,220px) var(--pad) clamp(40px,5vw,70px)}
.pag-topo .wrap{max-width:1360px;margin:0 auto}
.volta{display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(20px,2.4vw,34px);
  font-family:var(--sans);font-size:clamp(11px,.86vw,13px);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(234,232,232,.5);
  transition:color var(--dur-hover) var(--ease-io)}
.volta:hover{color:var(--gold)}
.volta svg{width:12px;height:12px}

/* lista de artigos */
.artigos{border-top:1px solid rgba(234,232,232,.16);margin-top:clamp(30px,4vw,56px)}
.artigo-item{display:block;padding:clamp(24px,3vw,42px) 0;
  border-bottom:1px solid rgba(234,232,232,.14);
  transition:padding-left var(--dur-hover) var(--ease-io)}
.artigo-item:hover{padding-left:clamp(6px,1vw,16px)}
.artigo-item h2{font-family:var(--serif);font-weight:400;color:var(--bone);
  font-size:clamp(1.3rem,2.4vw,2.1rem);letter-spacing:.008em;line-height:1.16;
  margin:0 0 10px;max-width:26ch}
.artigo-item:hover h2{color:var(--gold)}
.artigo-item .resumo{margin:0;max-width:60ch;color:rgba(234,232,232,.7)}
.artigo-meta{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.selo-rascunho{font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);
  border:1px solid rgba(131,95,67,.5);border-radius:999px;padding:4px 11px}

/* coluna de leitura do artigo */
.leitura{max-width:70ch;margin:0 auto;padding:0 var(--pad) clamp(70px,9vw,130px)}
.leitura h1{font-family:var(--serif);font-weight:400;color:var(--bone);
  font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.06;letter-spacing:-.02em;
  margin:0 0 clamp(20px,2.4vw,34px)}
.leitura h2{font-family:var(--serif);font-weight:400;color:var(--bone);
  font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.18;letter-spacing:.006em;
  margin:clamp(44px,5vw,72px) 0 clamp(14px,1.6vw,22px)}
.leitura p{font-size:clamp(1rem,1.16vw,1.1rem);font-weight:400;line-height:1.9;
  color:rgba(234,232,232,.82);margin:0 0 1.2em;max-width:none}
.leitura strong{color:var(--bone);font-weight:600}
.leitura .chamada{margin-top:clamp(46px,6vw,80px);padding-top:clamp(30px,3.4vw,50px);
  border-top:1px solid rgba(234,232,232,.16)}

/* ---------- botão do Blog, ao lado da logo ----------
   Mesmo lugar e mesmo peso dos "Menu" e "Services" da referência: pequeno,
   em sans, colado na marca, com uma seta discreta. */
/* margin-left auto empurra ele ate encostar no grupo da direita, e a margem
   da direita abre a folga que separa ele da navegacao */
.hd-blog{margin-left:auto;margin-right:clamp(56px,8.2vw,170px);
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:clamp(13px,1.02vw,20px);font-weight:600;
  letter-spacing:-.01em;white-space:nowrap;
  transition:color var(--dur-hover) var(--ease-io)}
.hd-blog svg{width:.72em;height:.72em;
  transition:transform var(--dur-hover) var(--ease-out)}
.hd-blog:hover svg,.hd-blog.espelho-hover svg{transform:translate(2px,-2px)}
.hd-escura .hd-blog{color:var(--graphite)}
.hd-escura .hd-blog:hover{color:var(--bronze)}
.hd-clara .hd-blog{color:var(--bone)}
.hd-clara .hd-blog.espelho-hover{color:var(--gold)}
.hd-solido .hd-blog{color:rgba(234,232,232,.82)}
.hd-solido .hd-blog:hover{color:var(--gold)}
@media(max-width:960px){.hd-blog{display:none}}

.artigo-area{font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bronze)}

/* link do item da lista para o artigo correspondente */
.sol-leia{margin:0 0 clamp(16px,1.8vw,26px);
  padding-left:calc(clamp(.85rem,1.05vw,1.15rem) + clamp(14px,2vw,36px))}
.sol-leia a{font-family:var(--sans);font-size:clamp(12px,.92vw,14px);font-weight:600;
  letter-spacing:.02em;color:var(--bronze);
  transition:color var(--dur-hover) var(--ease-io)}
.sol-leia a:hover{color:var(--ink)}
@media(max-width:820px){.sol-leia{padding-left:0}}


/* ================================================================
   CELULAR — os mesmos motions do PC, no gesto certo para a tela

   Tudo daqui para baixo vive dentro de max-width:960px. Acima disso
   nada muda: o desktop continua exatamente como estava.

   O problema que isto resolve: os movimentos do site eram calculados
   so em tela larga (--p travado em 0, --q e --t zerados abaixo de
   1100px). No celular sobrava a estrutura sem nenhum movimento: duas
   telas de rolagem no hero sem nada acontecer, o video preso na
   metade direita de uma tela de 375px, e o retrato virando foto
   parada. Aqui os mesmos progressos voltam a ser calculados, so que
   traduzidos para a proporcao em pe.
   ================================================================ */
@media(max-width:960px){

  /* ---------- hero: o video sobe em vez de abrir para o lado ----------
     Numa tela larga a divisa natural e vertical, por isso no PC o video
     ocupa a metade direita e cresce para a esquerda. Numa tela em pe a
     divisa natural e horizontal: o video e a faixa de baixo e SOBE ate
     tomar a tela inteira, preso ao mesmo --p. */
  /* duas telas de trilho e demais no celular, onde a rolagem e por dedo */
  .hero{height:170svh}
  /* o bloco de texto fica centrado na FAIXA CLARA, nao na tela: por isso o
     respiro de baixo acompanha a altura do video. Sem isso o titulo colava
     no topo e sobrava um vazio grande antes do video. */
  /* respiro de baixo FIXO em 38svh, e nao acompanhando o --p: crescendo,
     ele chegava a 100svh e nao sobrava altura para o titulo, entao a caixa
     estourava os 100svh e o painel ficava 83px maior que a tela. O texto
     ja sai de cena por volta de p=0,45 mesmo, entao o respiro so precisa
     valer no comeco. */
  .hero-pin{justify-content:center;
    padding:clamp(76px,10vh,110px) var(--pad) 38svh}
  .hero-media{
    top:auto;bottom:0;left:0;right:0;width:100%;
    /* em svh e nao em %: a faixa clara de cima precisa ter altura
       previsivel para o titulo e a base caberem nela em tela baixa */
    height:calc(38svh + 62svh * var(--p,0));
  }
  /* o enquadramento nao precisa descer com a abertura: aqui o painel e
     sempre em pe, nunca fica baixo e largo como no PC */
  .hero-media img,.hero-media video{object-position:50% 34%}
  /* clareado vertical no lugar do diagonal, que foi desenhado para a
     divisa em pe do desktop */
  /* mais fundo na metade de baixo do que no desktop: e ali que a frase
     grande cai, e o jaleco claro dela apagava as letras */
  .hero-media::after{
    background:linear-gradient(180deg,rgba(20,21,29,.34) 0%,
      rgba(20,21,29,.24) 32%,rgba(20,21,29,.52) 66%,rgba(20,21,29,.68) 100%)}
  /* a divisa entre a faixa clara e o video fica limpa, sem esfumado: e a
     mesma linguagem da divisa vertical do desktop, que tambem e reta.
     Testado com degrade e ele so embaçava o topo do video. */

  /* o titulo estava encostado na borda esquerda da tela: aquela largura
     a mais existe so para o recorte de dois tons, que no celular nao
     acontece (a camada clara fica escondida) */
  /* titulo centralizado e grande, como a referencia que o Rafael mandou:
     ele quebra em tres linhas e ocupa a faixa clara inteira */
  .hero-centro{width:100%;margin-left:0;margin-top:0;text-align:center}
  .hero-centro h1{font-size:clamp(2.2rem,12.6vw,3.9rem)}
  /* titulo inteiro em preto, "Protese" incluida: no PC ela e dourada
     porque metade da frase cruza o video, e ali o dourado e que da o
     contraste. No celular a frase fica toda na faixa clara. */
  .hero-centro h1,.hero-centro h1 .italic{color:var(--ink)}

  /* a base sai de cena junto com o titulo conforme o video sobe */
  /* a assinatura desce ate a beira do video: as duas margens `auto` (esta
     e a do .hero-centro) dividem a sobra da faixa clara, entao o titulo
     fica no lugar de sempre e o nome encosta embaixo. */
  .hero-centro{margin-top:auto}
  .hero-base{margin-top:auto;margin-bottom:clamp(16px,2.8vh,32px);
    gap:clamp(6px,1.2vh,12px);align-items:center;text-align:center;
    opacity:calc(1 - var(--p,0) * 2.2)}
  /* nome e CRO logo abaixo do titulo, no lugar do subtitulo da referencia.
     `order` e nao mudanca no HTML: no PC a ordem continua a mesma. */
  .hero-assinatura{order:-1;margin-left:0;text-align:center}
  /* assinatura tambem toda preta, "Capanema" e o CRO incluidos: mesma
     razao do titulo, no celular ela nao cruza o video */
  .hero-frase,.hero-frase .italic{color:var(--ink)}
  .hero-frase{text-align:center;max-width:none;
    font-size:clamp(1.4rem,7.6vw,2.25rem)}
  .hero-cro{font-size:12.5px;letter-spacing:.16em;color:var(--ink)}
  /* as cidades sairam do hero e foram para o rodape */
  .hero-base-esq{display:none}
  .foot-locais{display:block}

  /* ---------- botoes do topo ----------
     Agendar vira uma bolinha cinza com o simbolo do WhatsApp e o menu vira
     um circulo preto, como na referencia. O texto "Agendar" continua por
     extenso dentro do menu sanduiche, entao a acao nao se perde. */
  header nav{gap:10px}
  header .pill{
    width:46px;height:46px;min-height:46px;flex:none;
    padding:0;gap:0;justify-content:center;border-radius:50%}
  header .pill .roll,header .pill .ico{display:none}
  header .pill .ico-wa{display:block;width:23px;height:23px}
  .hd-escura .pill{background:rgba(66,67,70,.10);color:var(--graphite);
    border-color:transparent}
  .hd-escura .pill:hover{background:rgba(66,67,70,.18);color:var(--graphite)}
  .hd-clara .pill{background:rgba(234,232,232,.2);color:var(--bone);
    border-color:transparent}
  /* com a folha do menu aberta o fundo vira escuro: a bolinha cinza-claro
     do WhatsApp sumia contra ele */
  body.locked .hd-escura .pill{background:rgba(234,232,232,.16);color:var(--bone)}
  .hd-escura .burger{background:var(--ink);border-color:var(--ink)}
  .hd-escura .burger span{background:var(--bone)}
  .hd-clara .burger{background:var(--bone);border-color:var(--bone)}
  .hd-clara .burger span{background:var(--ink)}

  /* o slogan existia so no PC. Aqui ele volta com o mesmo tempo de
     entrada, mas quebrado em linhas e subindo, em vez de atravessar a
     tela na horizontal: a frase inteira nao cabe numa linha de 375px. */
  /* centrada no PAINEL de video, nao na tela: enquanto o video e so a
     faixa de baixo, a frase centralizada na tela cairia em cima da linha
     que separa as duas partes */
  .hero-slogan{display:flex;white-space:normal;padding:0 var(--pad);
    /* centro do painel de video mais 16svh: o Rafael pediu a frase mais
       baixa, na altura do trabalho dela, e nao no meio do quadro */
    top:calc(100svh - (38svh + 62svh * var(--p,0)) / 2 + 16svh)}
  .hero-slogan span{
    white-space:normal;text-align:center;max-width:11ch;
    font-size:min(12.5vw,3.6rem);line-height:1.04;
    /* sombra curta colada nas letras, mesmo recurso ja usado no selo do
       fecho: cobre so o que esta atras do texto, sem borrar a imagem */
    text-shadow:0 1px 3px rgba(10,11,16,.6),0 0 22px rgba(10,11,16,.45);
    transform:translateY(calc((1 - var(--p,0)) * 30px))}

  /* o topo em cor clara so acende quando o video encosta nele. Ate la a
     divisa e horizontal e o menu nunca cruza o video, entao o recorte
     lateral do desktop nao serve aqui. */
  .hd-clara{clip-path:none;opacity:calc((var(--p,0) - .82) * 5.5)}

  /* ---------- retrato ----------
     No PC a foto viaja, cresce e troca de retrato conforme a rolagem. No
     celular nao ha coluna vaga para essa viagem, entao ela e uma foto so,
     parada: a do jaleco e mascara, sem a troca para a foto sorrindo.
     Pedido do Rafael em 08/09/2026.
     O fundo dela e o mesmo creme da secao de baixo, e nao o preto do
     corpo da pagina: assim a foto nao ganha uma moldura escura em volta
     e ja pertence ao bloco do manifesto. O respiro de cima e o que separa
     ela do video do hero. */
  .retrato-trilho{background:var(--bone);
    padding:clamp(44px,9vw,80px) var(--pad) 0}
  .retrato-viagem{width:100%;max-width:none;margin:0;
    background:transparent;will-change:auto}
  .retrato-viagem .rv-b{display:none}

  /* camada de composicao que nao anima mais nesta largura: mantida, ela
     so ocupa memoria de video a toa */
  .pro-corrida{will-change:auto}

  /* ---------- retrato sorrindo abrindo "A profissional" ----------
     De ponta a ponta da tela, sem respiro dos lados: assim ela nao ganha
     a moldura escura que sobraria se ficasse dentro do respiro da secao.
     O recorte 4/5 evita que uma foto 2/3 em largura cheia tome quase a
     tela inteira, e o enquadramento sobe um pouco para segurar o rosto. */
  /* ---------- texto da profissional preso a rolagem ----------
     Mesmo mecanismo do PC: a secao vira um trilho, o bloco gruda no topo
     por uma tela e o texto corre dentro da janela conforme a rolagem, com
     as pontas esmaecidas. O que faltava no celular era o calculo (--t e
     --desl so eram medidos acima de 1100px) e a altura do trilho. */
  #profissional{height:330svh;padding:0}
  .pro-pin{position:sticky;top:0;height:100svh;display:flex;
    align-items:center;padding:clamp(70px,9vh,104px) var(--pad)}
  .pro-scroll{height:min(60svh,520px);overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 88%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 88%,transparent 100%)}
  .pro-corrida{transform:translateY(calc(-1 * var(--t,0) * var(--desl,0px)))}

  /* a foto vive FORA do bloco que gruda, entao aqui ela e um elemento
     solto no fluxo e ja nasce da largura da tela */
  .pro-foto-mobile{display:block;overflow:hidden;
    margin:0 0 clamp(34px,6vw,58px)}
  .pro-foto-mobile img{width:100%;height:auto;
    aspect-ratio:4 / 5;object-fit:cover;object-position:50% 28%;
    filter:grayscale(.32) contrast(1.04)}
}

/* ---------- tipografia de leitura no celular ----------
   Os tamanhos do site sao clamp(min, vw, max) calibrados para tela larga:
   num celular o termo em vw fica minusculo e tudo cai no `min`, que era um
   piso pensado so para nao quebrar. Resultado: texto pequeno e apertado.
   Aqui o piso sobe e o espaco entre linhas abre. Nada disso vale no PC:
   os `max` dos clamps sao os mesmos de antes, so o piso mudou. */
@media(max-width:960px){
  .body{font-size:clamp(1rem,4.3vw,1.1rem);line-height:1.8}
  .lead{font-size:clamp(1.1rem,4.8vw,1.3rem);line-height:1.62}
  .label{font-size:11px;letter-spacing:.14em}

  /* lista de solucoes: era o ponto mais apertado da pagina */
  .sol-cab{padding:22px 0;gap:13px 14px}
  .sol-num{font-size:1.15rem}
  .sol-nome{font-size:clamp(1.4rem,6.4vw,1.9rem);line-height:1.24}
  .sol-tag{font-size:12px;letter-spacing:.1em}
  .sol-ico{width:15px;height:15px}
  .sol-corpo .body{margin-bottom:22px}
  .grupo-cab{padding-bottom:18px}
  .grupo-cab h3{font-size:clamp(1.9rem,8vw,2.4rem)}
  .grupo-cab .count{font-size:12px}

  /* areas de atuacao, linha do tempo e depoimentos */
  .area .body{line-height:1.8}
  .tl p{font-size:1rem;line-height:1.7}
  .tl .yr{font-size:1.25rem}
  .dep-fala blockquote{font-size:clamp(1.3rem,6vw,1.75rem);line-height:1.4}
  .dep-item{font-size:16px}
  .contato-cols a,.contato-cols .local-cidade{font-size:17px}
  .local-linha{font-size:13.5px}

  /* chamada final centralizada: numa coluna so, o bloco alinhado a
     esquerda ficava torto em relacao ao simbolo, que ja e centralizado */
  .contato-topo{justify-items:center;text-align:center}
  .contato-social{justify-content:center}
  .contato-chamada{width:100%}
  .contato-chamada .display{max-width:none;margin:0 auto}
  .contato-chamada .lead{max-width:34ch;margin-left:auto;margin-right:auto}

  /* a coluna "Areas" repete os tres links que a secao de atuacao ja lista
     logo acima; o Rafael pediu para tirar do rodape (08/09/2026). Com ela
     fora, sobram dois blocos, entao viram uma coluna so. No PC continua
     como estava, com as tres colunas. */
  .contato-cols .col-areas{display:none}
  /* as cidades ja estao no rodape: aqui elas sairiam repetidas duas telas
     depois, entao ficam so o telefone, o Instagram e o CRO */
  .contato-cols .local-cidade,.contato-cols .local-uf{display:none}
  .rot-atendimento{display:none}
  .rot-contato{display:block}
  .local-forte{margin-top:0}
  .contato-cols{grid-template-columns:1fr;justify-items:center;text-align:center}
  .contato-cols .col{align-items:center}
  .contato-cols .local{align-items:center}

  /* rodape centralizado: numa coluna so, o `space-between` do PC nao tem
     o que distribuir e as linhas ficavam encostadas na esquerda */
  .foot-row{flex-direction:column;justify-content:center;
    text-align:center;gap:14px}
  .foot-logo{margin:0 auto}
}

/* ---------- fecho: "Cuidado de perto" no celular ----------
   No PC a frase abraca a foto, uma metade de cada lado, e por isso cada
   lado e uma coluna com `nowrap`. Numa tela estreita nao ha largura para
   isso: as duas metades ficavam espremidas no meio, pequenas. Aqui elas
   viram duas linhas empilhadas e centralizadas, bem maiores, e sobem
   sobre a foto. So abaixo de 820px, que e onde o selo ja sai de cena. */
@media(max-width:820px){
  .fecho-frase{flex-direction:column;align-items:center;gap:0;
    padding-bottom:calc(var(--arco-alt) + clamp(46px,10vh,104px))}
  .fecho-lado{flex:none;font-size:clamp(2.6rem,16vw,4.6rem);
    line-height:.96;text-align:center}
  .fecho-lado.esq,.fecho-lado.dir{text-align:center}
}

@media(max-width:960px) and (prefers-reduced-motion:reduce){
  /* sem movimento: o hero vira uma tela so, com o video ja aberto */
  .hero{height:auto;min-height:100svh}
  .hero-pin{position:static;height:auto;min-height:100svh}
  .hero-slogan{display:none}
  .retrato-viagem img{transform:none}
}