/* ===== Navegação ===== */
.nav { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 28px var(--margem); font-size: 15px; color: var(--apoio); }
.nav__nome { color: var(--tinta); font-weight: 500; }
.nav ul { list-style: none; display: flex; gap: 30px; padding: 0; }

@media (max-width: 860px) {
  .nav { padding: 20px var(--margem); }
  .nav__nome { display: none; }
  .nav ul { gap: 20px; }
  .nav ul a { display: inline-flex; align-items: center; min-height: 44px; }
}


/* ===== Hero ===== */
.hero { position: relative; min-height: 100vh; min-height: 100svh; padding: 0 var(--margem); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50vw 50vw at 22% 55%, rgb(143 179 255 / .07), transparent 70%); pointer-events: none; }
.hero > * { position: relative; }
.hero__corpo { padding: 96px 0 9vh; }

.hero__quem { display: flex; align-items: center; gap: 18px; margin-bottom: 34px; }
.hero__quem p { font-size: 17px; line-height: 1.35; color: var(--apoio); }
.hero__quem b { display: block; color: var(--tinta); font-weight: 500; font-size: 19px; }

/* retrato: só o rosto entra no quadro */
.hero__moldura { perspective: 600px; width: 88px; flex: none; }
.hero__retrato {
  aspect-ratio: 1; border-radius: var(--raio-imagem); overflow: hidden; position: relative;
  background: radial-gradient(70% 55% at 50% 30%, #34353a, #111113 80%);
  box-shadow: 0 30px 80px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .07);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  clip-path: inset(100% 0 0 0 round var(--raio-imagem));
}
.pronto .hero__retrato { clip-path: inset(0 0 0 0 round var(--raio-imagem)); transition: clip-path var(--entrada) var(--curva) .1s, transform .8s var(--curva); }
.hero__retrato img { position: absolute; left: 50%; top: -6%; width: 165%; height: auto; max-width: none; transform: translateX(-50%); }
.hero__retrato::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .06) 50%, transparent 65%); background-size: 250% 100%; background-position: var(--brilho, 100%) 0; pointer-events: none; }

.hero__bloco { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3.4fr); column-gap: 7vw; align-items: end; }
.hero__titulo { grid-column: 1; grid-row: 1; font-weight: 500; font-size: var(--t-titulo); line-height: var(--t-titulo-lh); letter-spacing: var(--t-titulo-ls); max-width: 16ch; }
.hero__titulo span { color: var(--apoio); }
.hero__acao { grid-column: 1; grid-row: 2; justify-self: start; margin-top: 44px; --seta-x: 0; --seta-y: 3px; }
.hero__fatos { grid-column: 2; grid-row: 1 / 3; align-self: end; list-style: none; padding: 0; border-top: 1px solid var(--linha); }
.hero__fatos li { padding: var(--e-4) 0; border-bottom: 1px solid var(--linha); }
.hero__fatos small { display: block; font-size: var(--t-rotulo); color: var(--apoio); margin-bottom: 6px; }
.hero__fatos span { font-size: 16px; line-height: 1.4; }

@media (max-width: 860px) {
  .hero { justify-content: flex-start; }
  .hero__corpo { padding: 84px 0 6vh; }
  /* os espaços crescem com a altura da tela: num celular alto o hero respira, num baixo tudo ainda cabe na primeira tela */
  .hero__quem { margin-bottom: clamp(24px, 4.5svh, 44px); }
  .hero__moldura { width: 64px; }
  .hero__bloco { display: block; }
  .hero__titulo { font-size: 34px; }
  .hero__fatos { margin-top: clamp(24px, 4.5svh, 44px); }
  .hero__fatos li { padding: clamp(12px, 2svh, 18px) 0; display: flex; gap: 12px; align-items: baseline; }
  .hero__fatos small { flex: 0 0 64px; margin: 0; }
  .hero__acao { margin-top: clamp(26px, 5svh, 48px); display: flex; width: 100%; justify-content: space-between; }
}


/* ===== Formação ===== */
/* desktop: a seção fica presa e a faixa de fotos anda para o lado com a rolagem */
.formacao { position: relative; border-top: 1px solid var(--linha); }
.formacao__palco { height: 300vh; position: relative; }
.formacao__cena { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; padding: var(--e-8) 0 var(--e-6); }
.formacao__titulo {
  position: absolute; z-index: 1; left: var(--margem); top: 50%; width: 30vw;
  transform: translate3d(var(--x, 0px), -50%, 0);
  font-weight: 500; font-size: var(--t-titulo); line-height: var(--t-titulo-lh); letter-spacing: var(--t-titulo-ls);
}

.formacao__faixa { flex: 1; min-height: 0; display: flex; gap: 6vw; padding: 0 var(--margem); width: max-content; transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; }
.formacao__vao { flex: none; width: 30vw; }
.formacao__lugar { align-self: center; width: min(66vw, calc((100vh - 340px) * 1.5)); display: flex; flex-direction: column; margin: 0; }
/* o quadro tem a proporção das fotos (3:2) */
.formacao__lugar .quadro { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--raio-imagem); overflow: hidden; background: var(--superficie); }
/* a ampliação cobre o deslizamento da foto dentro do quadro (até 4% para cada lado) */
.formacao__lugar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: translate3d(var(--px, 0px), 0, 0) scale(1.09); }
.formacao__lugar figcaption { padding-top: var(--e-4); }
.formacao__lugar b { display: block; font-weight: 500; font-size: var(--t-sub); line-height: var(--t-sub-lh); letter-spacing: var(--t-sub-ls); }
.formacao__lugar span { display: block; margin-top: var(--e-1); font-size: var(--t-texto); line-height: var(--t-texto-lh); color: var(--apoio); }

.formacao__regua { margin: var(--e-6) var(--margem) 0; position: relative; border-top: 1px solid var(--linha); }
.formacao__regua i { position: absolute; top: -1px; left: 0; height: 1px; width: 100%; background: var(--tinta); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* celular: a faixa desliza com o dedo */
@media (max-width: 860px) {
  .formacao__palco { height: auto; }
  .formacao__cena { position: static; height: auto; padding: var(--secao) 0; }
  .formacao__titulo { position: static; width: auto; transform: none; padding: 0 var(--margem); }
  .formacao__faixa { width: auto; transform: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--e-4); padding: var(--e-6) var(--margem) var(--e-2); scroll-padding: 0 var(--margem); scrollbar-width: none; }
  .formacao__faixa::-webkit-scrollbar { display: none; }
  .formacao__vao { display: none; }
  .formacao__lugar { flex: 0 0 84vw; width: 84vw; scroll-snap-align: start; }
  .formacao__lugar img { transform: none; }
  .formacao__regua { margin-top: var(--e-5); }
}

/* movimento reduzido no desktop: as fotos empilhadas */
@media (min-width: 861px) and (prefers-reduced-motion: reduce) {
  .formacao__palco { height: auto; }
  .formacao__cena { position: static; height: auto; padding: var(--secao) 0; }
  .formacao__titulo { position: static; width: auto; transform: none; padding: 0 var(--margem); }
  .formacao__faixa { width: auto; flex-direction: column; gap: var(--e-8); transform: none; padding-top: var(--e-7); }
  .formacao__vao { display: none; }
  .formacao__lugar { align-self: flex-start; }
  .formacao__lugar img { transform: none; }
  .formacao__regua { display: none; }
}


/* ===== Projetos ===== */
.projetos { border-top: 1px solid var(--linha); padding: var(--secao) var(--margem); overflow: hidden; }
.projetos__titulo { font-weight: 500; font-size: var(--t-sub); line-height: var(--t-sub-lh); letter-spacing: var(--t-sub-ls); }
.projetos__corpo { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7fr); gap: 5vw; align-items: center; margin-top: var(--e-7); min-height: 66vh; }

/* abas numeradas; a linha da aba ativa enche enquanto o projeto está na tela */
.abas { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); margin-bottom: var(--e-7); max-width: 50%; }
.abas button { all: unset; cursor: pointer; display: block; width: 100%; padding-top: var(--e-4); position: relative; color: var(--apoio); font-size: var(--t-texto); line-height: 1.35; transition: color var(--rapido); }
.abas button::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--linha); }
.abas button::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--tinta); transform: scaleX(0); transform-origin: left; }
.abas button:hover, .abas button[aria-selected="true"] { color: var(--tinta); }
.abas button:focus-visible { outline: 2px solid var(--destaque); outline-offset: 6px; border-radius: 4px; }
.abas button[aria-selected="true"]::after { animation: enche 12s linear forwards; }
.projetos.pausa .abas button[aria-selected="true"]::after { animation-play-state: paused; }
@keyframes enche { to { transform: scaleX(1); } }

/* convite para o próximo projeto: três pulsadas, só de cor */
.abas button.chamando { animation: chama 1.4s ease-in-out 3; }
.abas button.chamando::before { animation: chama-linha 1.4s ease-in-out 3; }
@keyframes chama { 50% { color: var(--tinta); text-shadow: 0 0 14px rgb(242 241 237 / .45); } }
@keyframes chama-linha { 50% { background: var(--tinta); } }

.textos { display: grid; }
.proj { grid-area: 1 / 1; }
.proj > * { opacity: 0; transform: translateY(20px); transition: opacity var(--medio) var(--curva), transform var(--lento) var(--curva); }
.proj.ativo > * { opacity: 1; transform: none; }
.proj.ativo > :nth-child(2) { transition-delay: .06s; }
.proj.ativo > :nth-child(3) { transition-delay: .12s; }
.proj.ativo > :nth-child(4) { transition-delay: .18s; }
.proj:not(.ativo) { pointer-events: none; }
.proj small { display: block; font-size: var(--t-rotulo); color: var(--apoio); margin-bottom: var(--e-3); }
.proj h3 { font-weight: 500; font-size: var(--t-titulo); line-height: var(--t-titulo-lh); letter-spacing: var(--t-titulo-ls); }
.proj p { margin-top: var(--e-5); font-size: var(--t-texto); line-height: var(--t-texto-lh); color: var(--apoio); }
.proj .stack { margin-top: var(--e-4); font-size: var(--t-rotulo); line-height: var(--t-rotulo-lh); color: var(--tinta); }
.proj .link { display: inline-block; margin: var(--e-5) var(--e-5) 0 0; color: var(--tinta); border-bottom: 1px solid var(--linha); padding-bottom: 2px; font-size: var(--t-texto); }
.proj .link:hover { border-color: var(--tinta); }

/* baralho: as próximas janelas ficam atrás; a da frente sai para a esquerda na troca */
.baralho { position: relative; perspective: 1800px; aspect-ratio: 16 / 10.6; margin-right: calc(var(--margem) * -1 - 6vw); }
.janela {
  position: absolute; inset: 0; margin: 0; border-radius: var(--raio-janela); overflow: hidden; background: var(--superficie);
  box-shadow: 0 40px 100px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .08);
  transform-origin: 0 50%;
  transform: rotateY(-12deg) translate3d(calc(var(--pos) * 5%), calc(var(--pos) * -4%), calc(var(--pos) * -90px));
  opacity: calc(1 - var(--pos) * .32); z-index: calc(10 - var(--pos));
  transition: transform var(--entrada) var(--curva), opacity var(--lento) var(--curva);
}
.janela.foi { transform: rotateY(-4deg) translate3d(-60%, 6%, 120px); opacity: 0; transition-duration: var(--lento); }
.janela.foi--direita { transform: rotateY(-4deg) translate3d(60%, 6%, 120px); }
.janela .barra { height: 38px; display: flex; align-items: center; gap: var(--e-2); padding: 0 var(--e-4); border-bottom: 1px solid var(--linha); }
.janela .barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--contorno); }
.janela .barra span { margin-left: var(--e-3); height: 24px; padding: 0 var(--e-3); border-radius: 6px; background: var(--fundo); font-size: 12px; color: var(--apoio); display: flex; align-items: center; }
.janela img { width: 100%; height: calc(100% - 38px); object-fit: cover; object-position: top; }
.janela img.foto { height: 100%; object-position: 100% 55%; }

@media (max-width: 860px) {
  .abas { margin-bottom: var(--e-5); }
  .proj h3 { font-size: var(--t-sub); line-height: var(--t-sub-lh); letter-spacing: var(--t-sub-ls); }
  /* espaço para as janelas de trás do baralho, que sobem um pouco, não encostarem no título */
  .projetos__corpo { display: flex; flex-direction: column-reverse; gap: var(--e-6); margin-top: var(--e-8); min-height: 0; }
  .baralho { width: 100%; margin-right: 0; }
  /* a perspectiva vai na própria janela: no baralho, ela prenderia o chat, que no celular é fixo na tela */
  .janela { transform: perspective(1400px) rotateY(-8deg) translate3d(calc(var(--pos) * 4%), calc(var(--pos) * -5%), calc(var(--pos) * -60px)); }
  .janela.foi { transform: perspective(1400px) rotateY(-3deg) translate3d(-70%, 6%, 80px); }
  .janela.foi--direita { transform: perspective(1400px) rotateY(-3deg) translate3d(70%, 6%, 80px); }
}

/* sem troca automática, a linha da aba ativa já aparece cheia */
@media (prefers-reduced-motion: reduce) {
  .abas button[aria-selected="true"]::after { animation: none; transform: scaleX(1); }
}


/* ===== Assistente de Projetos ===== */
.abrir-chat { appearance: none; background: none; border: 0; border-bottom: 1px solid var(--linha); border-radius: 0; font: inherit; padding: 0 0 2px; cursor: pointer; display: inline-flex; align-items: center; gap: var(--e-2); margin-top: var(--e-5); color: var(--tinta); font-size: var(--t-texto); transition: border-color var(--rapido); }
.abrir-chat:hover { border-color: var(--tinta); }
.abrir-chat:focus-visible { outline: 2px solid var(--destaque); outline-offset: 4px; }

/* a janela do chat entra na frente do baralho e fica inteira dentro da tela */
.janela--chat {
  z-index: 20; display: flex; flex-direction: column; background: var(--superficie);
  right: calc(var(--margem) + 6vw);
  transform: rotateY(-5deg) translate3d(30%, 8%, 60px); opacity: 0; pointer-events: none;
}
.baralho.conversa .janela--chat { transform: rotateY(-5deg) translate3d(0, 2%, 30px); opacity: 1; pointer-events: auto; }
.baralho.conversa .janela:not(.janela--chat) { filter: brightness(.45) blur(1px); }
.janela--chat .fechar { all: unset; cursor: pointer; margin-left: auto; display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-rotulo); color: var(--tinta); padding: var(--e-2); border-radius: 6px; transition: background var(--rapido); }
.janela--chat .fechar:hover { background: var(--linha); }
.janela--chat .fechar:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }

.chat__corpo { flex: 1; min-height: 0; overflow-y: auto; padding: var(--e-6) var(--e-6) var(--e-4); display: flex; flex-direction: column; gap: var(--e-4); }
.chat__vazio { margin: auto 0 0; color: var(--apoio); font-size: var(--t-lead); line-height: var(--t-lead-lh); max-width: 30ch; }
.fala { max-width: 78%; font-size: var(--t-texto); line-height: var(--t-texto-lh); padding: var(--e-3) var(--e-4); border-radius: 16px; opacity: 0; transform: translateY(8px); animation: chega var(--medio) var(--curva) forwards; }
.fala--voce { align-self: flex-end; background: var(--tinta); color: var(--fundo); border-bottom-right-radius: 4px; }
.fala--assistente { align-self: flex-start; background: var(--linha); color: var(--tinta); border-bottom-left-radius: 4px; }
.fala.escrevendo { transition: clip-path .35s var(--curva); } /* o balão cresce junto com o texto */
.fala .so-leitor { user-select: none; } /* copiar a resposta não duplica o texto */
.digitando i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: var(--apoio); animation: pisca 1s infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes chega { to { opacity: 1; transform: none; } }
@keyframes pisca { 50% { opacity: .2; } }

.chat__form { display: flex; gap: var(--e-3); align-items: center; padding: var(--e-4) var(--e-6) var(--e-2); border-top: 1px solid var(--linha); }
.chat__aviso { padding: 0 var(--e-6) var(--e-4); color: var(--apoio); font-size: var(--t-rotulo); line-height: var(--t-rotulo-lh); }
.chat__form:focus-within { box-shadow: inset 0 1px 0 var(--destaque); }
.chat__form input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--tinta); font: inherit; font-size: var(--t-texto); padding: var(--e-2) 0; }
.chat__form input::placeholder { color: var(--apoio); }
.chat__form button { all: unset; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: var(--fundo); }
.chat__form button:disabled { opacity: .3; cursor: default; }
.chat__form button:focus-visible { outline: 2px solid var(--destaque); outline-offset: 3px; }

/* a regra global de movimento reduzido corta a animação de entrada das falas */
@media (prefers-reduced-motion: reduce) {
  .fala { opacity: 1; transform: none; }
  .digitando i { opacity: .6; }
}

/* celular: o chat sobe como uma folha por baixo */
@media (max-width: 860px) {
  .baralho { perspective: none; }
  /* --teclado e --livre vêm do site.js: a altura do teclado aberto e a parte da tela que sobra acima dele */
  .janela--chat { position: fixed; inset: auto 0 var(--teclado, 0px) 0; height: 78vh; height: min(78svh, calc(var(--livre, 100svh) - 12px)); border-radius: 18px 18px 0 0; transform: translate3d(0, 100%, 0); outline: 0; }
  .janela--chat.com-teclado .barra, .janela--chat.com-teclado .chat__aviso { display: none; }
  .baralho.conversa .janela--chat { transform: none; }
  .baralho.conversa .janela:not(.janela--chat) { filter: none; }
  .janela--chat .barra { order: 3; height: auto; padding: var(--e-2) var(--e-4) var(--e-4); border: 0; }
  .janela--chat .barra i, .janela--chat .barra span { display: none; }
  .janela--chat .fechar { flex: 1; min-height: 44px; justify-content: center; font-size: var(--t-texto); border: 1px solid var(--linha); border-radius: var(--raio-pilula); }
  .chat__corpo, .chat__form, .chat__aviso { padding-left: var(--e-4); padding-right: var(--e-4); }
  .chat__form button { width: 44px; height: 44px; }
}


/* ===== Competências ===== */
/* desktop: a seção fica presa e as camadas descem uma a uma, da placa até a tela */
.camadas { border-top: 1px solid var(--linha); position: relative; }
.camadas__palco { height: 340vh; position: relative; }
.camadas__cena { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7fr); gap: 5vw; align-items: center; padding: 0 var(--margem); overflow: hidden; }
.camadas__titulo { font-weight: 500; font-size: var(--t-sub); line-height: var(--t-sub-lh); letter-spacing: var(--t-sub-ls); }

/* o texto da camada que acabou de pousar; quem sai apaga rápido e quem entra espera, para os dois não se sobreporem */
.camadas__textos { display: grid; margin-top: var(--e-8); min-height: 15em; }
.camada { grid-area: 1 / 1; opacity: 0; transform: translateY(16px); transition: opacity var(--rapido) ease, transform var(--lento) var(--curva); }
.camada.ativa { opacity: 1; transform: none; transition: opacity var(--medio) var(--curva) .2s, transform var(--lento) var(--curva) .2s; }
.camada:not(.ativa) { pointer-events: none; }
.camada h3 { font-weight: 500; font-size: var(--t-titulo); line-height: var(--t-titulo-lh); letter-spacing: var(--t-titulo-ls); }
.camada p { margin-top: var(--e-4); font-size: var(--t-lead); line-height: var(--t-lead-lh); color: var(--tinta); }
.camada p + p { margin-top: var(--e-3); font-size: var(--t-texto); line-height: var(--t-texto-lh); color: var(--apoio); }
.camadas__tambem { margin-top: var(--e-5); color: var(--apoio); opacity: 0; transition: opacity var(--lento) var(--curva); }
.camadas__tambem b { color: var(--tinta); font-weight: 500; }
.camadas.completa .camadas__tambem { opacity: 1; }

/* o lugar onde a ferramenta foi usada leva ao projeto, já aberto na aba certa */
.prova { color: var(--tinta); text-decoration: underline 1px var(--contorno); text-underline-offset: .25em; transition: text-decoration-color var(--rapido); }
.prova:hover { text-decoration-color: var(--tinta); }

/* a pilha: placas da mesma família das janelas dos projetos, vistas de cima */
.pilha-cena { height: 78vh; display: grid; place-items: center; perspective: 1800px; }
.pilha { position: relative; width: min(440px, 32vw); aspect-ratio: 3 / 2; transform: rotateX(58deg) rotateZ(-36deg); transform-style: preserve-3d; }
.placa {
  position: absolute; inset: 0; border-radius: var(--raio-janela); background: var(--superficie);
  box-shadow: 0 0 0 1px var(--contorno), 0 30px 60px rgb(0 0 0 / .45);
  display: flex; align-items: flex-end; padding: var(--e-5);
  transform: translateZ(calc(var(--k) * 70px + var(--sobe, 0px))); opacity: var(--op, 1);
  transition: box-shadow var(--medio) var(--curva);
}
.placa span { font-size: var(--t-lead); font-weight: 500; color: var(--apoio); transition: color var(--medio) var(--curva); }
.placa.ativa { box-shadow: 0 0 0 1px var(--tinta), 0 30px 60px rgb(0 0 0 / .45), 0 0 90px rgb(143 179 255 / .16); }
.placa.ativa span { color: var(--tinta); }

/* celular: a pilha em cima e uma camada por vez embaixo, trocada com o dedo; as placas acima da ativa sobem e abrem um vão */
@media (max-width: 860px) {
  .camadas__palco { height: auto; }
  .camadas__cena { position: static; height: auto; display: flex; flex-direction: column; align-items: stretch; padding: var(--secao) var(--margem); overflow: visible; }
  .camadas__cena > div:first-child { display: contents; }
  .camadas__titulo { order: 1; }
  /* espaço em cima para a placa de cima subir sem encostar no título */
  .pilha-cena { order: 2; height: 320px; padding-top: 96px; }
  .pilha { width: 210px; }
  .placa { padding: var(--e-3); transform: translateZ(calc(var(--k) * 38px + var(--ergue, 0px))); transition: box-shadow var(--medio) var(--curva), transform var(--medio) var(--curva); }
  .placa.acima { --ergue: 46px; }
  .placa { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .placa span { font-size: var(--t-texto); }

  /* só a camada da vez fica na tela; a próxima espera logo depois da borda */
  .camadas__textos { order: 3; display: flex; align-items: flex-start; gap: var(--e-5); min-height: 0; margin: var(--e-4) calc(var(--margem) * -1) 0; padding: 0 var(--margem); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 var(--margem); scrollbar-width: none; transition: height var(--medio) var(--curva); }
  .camadas__textos::-webkit-scrollbar { display: none; }
  .camada, .camada.ativa { flex: 0 0 100%; scroll-snap-align: start; opacity: 1; transform: none; }
  .camada:not(.ativa) { pointer-events: auto; }
  .camada h3 { font-size: var(--t-sub); line-height: var(--t-sub-lh); letter-spacing: var(--t-sub-ls); }
  .camada p { margin-top: var(--e-4); }
  .prova { padding: 11px 0; } /* o espaço em volta aumenta a área de toque sem mexer na linha nem no sublinhado */

  /* as marcas dizem em qual das quatro camadas a pessoa está, e levam a cada uma */
  .marcas { order: 4; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e-2); margin-top: var(--e-6); }
  .marcas button { all: unset; cursor: pointer; height: 44px; position: relative; }
  .marcas button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--linha); transition: background var(--medio) var(--curva); }
  .marcas button.ativa::before { background: var(--tinta); }
  .marcas button:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; border-radius: 4px; }
  /* o "No dia a dia" é a última parada do arraste, com o mesmo desenho das camadas */
  .camadas__textos > .camadas__tambem { flex: 0 0 100%; scroll-snap-align: start; margin: 0; opacity: 1; }
  .camadas__tambem b { display: block; margin-bottom: var(--e-4); font-size: var(--t-sub); line-height: var(--t-sub-lh); letter-spacing: var(--t-sub-ls); }

  /* convite para arrastar: a mão em traço faz o gesto, o texto espia a próxima camada e a próxima marca pulsa */
  .mao { position: absolute; right: 12%; bottom: 34px; width: 46px; height: 46px; color: var(--tinta); opacity: 0; pointer-events: none; }
  .mao.arrastando { animation: arrasta 2.6s cubic-bezier(.45, 0, .25, 1) 2; }
  .mao.parada { opacity: .7; }
  .camadas__textos.espiando .camada { animation: espia 2.6s cubic-bezier(.45, 0, .25, 1); }
  .marcas button.chamando::before { animation: chama-linha 1.4s ease-in-out 3; }
}
@media (min-width: 861px) { .marcas { display: none; } }
@keyframes arrasta {
  0% { opacity: 0; transform: translateX(0) scale(1); }
  18% { opacity: .75; transform: translateX(0) scale(.9); }
  62% { opacity: .75; transform: translateX(-150px) scale(.9); }
  85%, 100% { opacity: 0; transform: translateX(-165px) scale(1); }
}
@keyframes espia { 0%, 18% { transform: none; } 58% { transform: translateX(-46px); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .camadas__palco { height: auto; }
  .camadas__cena { position: static; height: auto; padding: var(--secao) var(--margem); }
  .camada { opacity: 1; transform: none; grid-area: auto; }
  .camada:not(.ativa) { pointer-events: auto; }
  .camadas__textos { gap: var(--e-6); min-height: 0; }
  .camadas__tambem { opacity: 1; }
}


/* ===== Contato ===== */
.contato { border-top: 1px solid var(--linha); padding: var(--secao) var(--margem) 0; overflow: hidden; }
.contato__corpo { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7fr); gap: 5vw; align-items: center; }
.contato__titulo { font-weight: 500; font-size: var(--t-titulo); line-height: var(--t-titulo-lh); letter-spacing: var(--t-titulo-ls); }
.contato__titulo span { color: var(--apoio); }
.contato__extra { margin-top: var(--e-5); font-size: var(--t-rotulo); color: var(--apoio); }

.canais { list-style: none; padding: 0; margin-top: var(--e-6); border-top: 1px solid var(--linha); }
.canais a { display: grid; grid-template-columns: 6em minmax(0, 1fr) auto; align-items: baseline; gap: var(--e-3); padding: var(--e-4) 0; border-bottom: 1px solid var(--linha); }
.canais small { font-size: var(--t-rotulo); color: var(--apoio); }
.canais i { font-style: normal; color: var(--apoio); transition: transform var(--medio) var(--curva); }
.canais a:hover i { transform: translate(3px, -3px); color: var(--tinta); }

/* janela de mensagem, da mesma família das janelas dos projetos */
.mensagem-cena { perspective: 1800px; }
.mensagem {
  margin: 0; border-radius: var(--raio-janela); overflow: hidden; background: var(--superficie);
  box-shadow: 0 40px 100px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .08);
  transform-origin: 0 50%; transform: rotateY(-12deg) translateX(14vw); opacity: 0;
  transition: transform var(--entrada) var(--curva), opacity var(--lento) var(--curva);
}
.contato.visto .mensagem { transform: rotateY(-6deg); opacity: 1; }
.mensagem:focus-within { box-shadow: 0 40px 100px rgb(0 0 0 / .5), 0 0 0 1px var(--destaque); }
.mensagem .barra { height: 38px; display: flex; align-items: center; gap: var(--e-2); padding: 0 var(--e-4); border-bottom: 1px solid var(--linha); }
.mensagem .barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--contorno); }
.mensagem .barra span { margin-left: var(--e-3); font-size: 12px; color: var(--apoio); }

.campo { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) auto; align-items: center; gap: var(--e-3); padding: var(--e-4) var(--e-6); border-bottom: 1px solid var(--linha); }
.campo label, .campo small { font-size: var(--t-rotulo); color: var(--apoio); }
.campo input, .mensagem textarea { background: none; border: 0; outline: 0; color: var(--tinta); font: inherit; font-size: var(--t-texto); min-width: 0; }
.campo input::placeholder, .mensagem textarea::placeholder { color: var(--apoio); }
/* o campo ativo ganha um fundo azul leve, porque um anel de foco ficaria cortado dentro da janela */
.campo:focus-within, .mensagem textarea:focus { background: rgb(143 179 255 / .06); }
.mensagem textarea { display: block; width: 100%; min-height: 24vh; resize: none; padding: var(--e-5) var(--e-6); line-height: var(--t-texto-lh); }
.copiar { all: unset; cursor: pointer; font-size: var(--t-rotulo); color: var(--apoio); padding: var(--e-2); border-radius: 6px; }
.copiar:hover { color: var(--tinta); }
.copiar:focus-visible { outline: 2px solid var(--destaque); }
.mensagem__acoes { display: flex; justify-content: flex-end; padding: var(--e-4) var(--e-6) var(--e-5); }

.rodape { margin-top: var(--e-10); padding: var(--e-5) 0 var(--e-6); border-top: 1px solid var(--linha); display: flex; justify-content: space-between; align-items: center; gap: var(--e-5); font-size: var(--t-rotulo); color: var(--apoio); }
.rodape a { display: inline-flex; align-items: center; min-height: 44px; }
.rodape a:hover { color: var(--tinta); }

@media (max-width: 860px) {
  .contato__corpo { grid-template-columns: 1fr; gap: var(--e-7); }
  .contato__titulo { font-size: var(--t-sub); line-height: var(--t-sub-lh); letter-spacing: var(--t-sub-ls); }
  .mensagem-cena { perspective: none; }
  .mensagem { transform: perspective(1400px) rotateY(-14deg) translateX(18vw); }
  .contato.visto .mensagem { transform: none; }
  .campo { grid-template-columns: minmax(0, 1fr) auto; padding: var(--e-3) var(--e-4); row-gap: 2px; }
  .campo label, .campo small { grid-column: 1 / -1; }
  .copiar { min-height: 44px; display: inline-flex; align-items: center; }
  .mensagem textarea { padding: var(--e-4); }
  .mensagem__acoes { padding: var(--e-3) var(--e-4) var(--e-4); }
  .mensagem__acoes .botao { width: 100%; }
  .canais a { min-height: 56px; align-items: center; }
  .rodape { margin-top: var(--e-8); flex-direction: column; gap: 0; }
}


/* ===== Títulos das seções no celular ===== */
/* centralizados e todos do mesmo tamanho; no desktop, cada um segue o desenho da sua seção */
@media (max-width: 860px) {
  .formacao__titulo, .projetos__titulo, .camadas__titulo, .contato__titulo { text-align: center; font-size: var(--t-sub); line-height: var(--t-sub-lh); letter-spacing: var(--t-sub-ls); }
}