/* ============================================================================
   Entre IA e Pessoas (Palimpsesto): sistema visual e composição da página
   ----------------------------------------------------------------------------
   Camadas, de baixo para cima (todas no contexto de empilhamento da raiz):
     0   chão (cor do body) e lavagens de gradiente
     1   texto corrido e palcos presos do scroll-craft
     6   cortina do celular (esconde o texto que passa sob a figura fixa)
     10  canvas do metal (#metal), fixo, sem eventos de ponteiro
     20  vidro que passa NA FRENTE do metal (card de preço)
     30  véu do topo: tudo o que sobe se dissolve antes de chegar à marca
     60  marca e cápsula do botão (sempre sobre a parte opaca do véu)

   O metal fica por cima do texto de propósito: as composições nunca põem texto
   sob uma vaga, e quando o corpo viaja de uma vaga a outra ele cobre o que
   cruza em vez de se misturar com as letras.

   Vagas do metal: [data-metal-vaga]. Cada uma é um retângulo vazio que o CSS
   posiciona e dimensiona. Enquanto não existe html.metal-ligado, a vaga mostra
   o substituto em CSS (esfera escura polida com sombra de contato).

   Larguras (rem de 16 px até 1440 de largura):
     < 30rem            celular em pé: a marca sai com o hero e a cápsula ocupa
                        o topo, centrada, sobre o véu
     < 45rem            uma coluna; figura fixa em cortina no ato 2; as falas
                        param uma a uma no vazio
     45 a 60rem         tablet em pé: uma coluna larga, dois lados em 2+1
     >= 60rem           composições de mesa (tríptico, trilho, card de preço largo)
     altura <= 33,9rem  celular deitado: palcos presos em composição lateral
   ========================================================================== */

/* ------------------------------------------------------------------ fonte -- */
@font-face {
  font-family: "Geist";
  src: url("assets/fontes/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("assets/fontes/Geist-Italic-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens -- */
:root {
  /* seis papéis, um acento */
  --sc-canvas:     #ECEEF1;   /* chão: pérola fria, nunca branco absoluto */
  --sc-surface:    #F6F7F9;
  --sc-ink:        #15171B;
  --sc-ink-soft:   #555A64;
  --sc-accent:     #8F4A0E;   /* âmbar escuro, para texto e detalhe */
  --sc-accent-ink: #FFF7EC;

  --reflexo:       #E9B678;   /* o brilho quente que o metal devolve */
  --chao-0:        rgb(236 238 241 / 0);
  --luz:           252 253 255;          /* a luz do vidro, sem branco chapado */
  --sc-shadow-color: 222 26% 26%;

  --sc-font-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --sc-font-text:    "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --sc-maxw:   80rem;
  --sc-gutter: clamp(1.25rem, 5vw, 5.5rem);

  /* um raio só para todos os painéis de vidro */
  --raio: 28px;

  /* respiro: maior que o usual, fluido, menor no celular */
  --respiro:   clamp(5.5rem, 3.4rem + 10vw, 13.5rem);
  --pausa:     clamp(2.5rem, 1.6rem + 3.6vw, 5rem);    /* entre o título e o corpo */
  --paragrafo: clamp(1.35rem, 1.1rem + 0.8vw, 2rem);    /* entre parágrafos */

  /* tipo */
  --t-h1:    clamp(2.6rem, min(1rem + 6.4vw, 14svh), 6.5rem);
  --t-h2:    clamp(2rem, 1.2rem + 3.2vw, 4rem);
  --t-h3:    clamp(1.35rem, 1.12rem + 0.9vw, 1.9rem);
  --t-prosa: clamp(1.0625rem, 0.97rem + 0.44vw, 1.3125rem);
  --t-corpo: clamp(1rem, 0.96rem + 0.2vw, 1.0938rem);
  --t-nota:  clamp(0.8125rem, 0.75rem + 0.18vw, 0.9375rem);   /* 14 px ou mais na mesa */

  --topo-y:  clamp(0.75rem, 2.4vh, 1.5rem);
  --veu:     clamp(4.5rem, 3.6rem + 4.4vh, 7rem);
  --veu-cheio: 46%;           /* até onde o véu é opaco */
  --col: clamp(1.25rem, 2.2vw, 2.5rem);   /* calha da grade de 12 colunas */
}

/* ------------------------------------------------------------------- base -- */
html {
  /* telas muito largas: tudo cresce junto, em vez de a página virar uma ilha pequena */
  font-size: clamp(100%, 0.45vw + 9.5px, 118.75%);
  background: var(--sc-canvas);
  /* o foco do teclado nunca para debaixo do véu nem da cápsula */
  scroll-padding-top: calc(var(--veu) + 1.25rem);
  scroll-padding-bottom: 2rem;
}
body { color: var(--sc-ink); }
h1, h2, h3, p, ul, ol, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 600; }
::selection { background: var(--sc-ink); color: var(--sc-accent-ink); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 6px; }
/* main recebe o foco quando a marca (primeira parada do teclado) é acionada */
main:focus { outline: none; }

/* Sem o motor (JavaScript desligado ou script que não chegou): nada do que o
   motor esconderia fica escondido, e o trilho lateral vira lista. */
html:not(.sc-ready) [data-sc-cue],
html:not(.sc-ready) [data-sc-in],
html:not(.sc-ready) [data-sc-stagger] > * { opacity: 1; transform: none; }
html:not(.sc-ready) [data-sc-pan] { display: block; }

/* ------------------------------------------------------- camadas fixas -- */
#metal {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--sc-ease-out);
}
html.metal-ligado #metal { opacity: 1; }
/* movimento reduzido: a figura troca de estação num corte suave (a coreografia
   apaga o canvas, o corpo salta para a figura nova e o canvas acende) */
html.metal-ligado.metal-corte #metal { opacity: 0; transition-duration: 170ms; }

/* A doca do corpo: só em tela estreita (abaixo da mesa), onde há trechos de
   leitura sem vaga. Fica no alto, à esquerda: no celular em pé ocupa o lugar
   que a marca deixa depois do hero; nas outras larguras, logo depois da marca.
   Ali o canvas passa por cima do véu, para o corpo recolhido continuar à vista,
   e o card de preço (o único painel que fica na frente do metal) sobe junto. */
.doca {
  display: none;
  position: fixed; z-index: 0;
  top: calc(var(--topo-y) + 0.5rem); left: var(--sc-gutter);
  width: 1.875rem; height: 1.875rem;
  visibility: hidden; pointer-events: none;
}
@media (max-width: 59.99rem) {
  .doca { display: block; }
  #metal { z-index: 31; }
  .preco .preco__revela { z-index: 32; }
}
@media (min-width: 30rem) and (max-width: 59.99rem) {
  .doca { left: calc(var(--sc-gutter) + 6.75rem); }
}
/* celular em pé: a conta menor, entre a borda e a cápsula */
@media (max-width: 29.99rem) {
  .doca { left: 0.5rem; top: calc(var(--topo-y) + 0.625rem); width: 1.625rem; height: 1.625rem; }
}

.veu {
  position: fixed; inset: 0 0 auto 0;
  height: var(--veu);
  z-index: 30;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--sc-canvas) 0%,
    var(--sc-canvas) var(--veu-cheio),
    rgb(236 238 241 / 0.9) calc(var(--veu-cheio) + (100% - var(--veu-cheio)) * 0.34),
    rgb(236 238 241 / 0.5) calc(var(--veu-cheio) + (100% - var(--veu-cheio)) * 0.67),
    var(--chao-0) 100%);
}

.topo {
  position: fixed; top: 0; left: 0;
  z-index: 60;
  padding: var(--topo-y) var(--sc-gutter);
  pointer-events: none;
}
.marca {
  pointer-events: auto;
  display: inline-flex; align-items: center;
  min-height: 2.875rem;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--sc-ink);
}

/* A cápsula do botão: presa ao topo enquanto o percurso (do segundo ao
   penúltimo ato) está na tela. É sticky, então aparece depois do hero e sai
   antes do convite final sem uma linha de JavaScript. */
.capsula {
  position: sticky;
  top: var(--topo-y);
  z-index: 60;
  height: 0;
  display: flex; justify-content: flex-end;
  padding-inline: var(--sc-gutter);
  pointer-events: none;
  transition: opacity 220ms var(--sc-ease-out), visibility 220ms;
}
.capsula .botao { pointer-events: auto; }

/* Enquanto o card de preço está na tela a cápsula recua: o card tem o mesmo
   botão, e dois botões iguais na mesma tela (ou um sobre o outro) é ruído.
   A linha do tempo é a passagem do card pela janela, com 9rem de folga antes
   e depois; funciona sem JavaScript. */
@keyframes capsula-recua {
  0%, 100% { opacity: 1; visibility: visible; transform: none; }
  /* já invisível, sai também do lugar, de um salto e para o lado: nem o
     retângulo dela passa por cima do botão do card */
  4%       { opacity: 0; visibility: hidden; transform: none; animation-timing-function: step-start; }
  95.9%    { opacity: 0; visibility: hidden; transform: translate3d(-200vw, 0, 0); animation-timing-function: step-end; }
  96%      { opacity: 0; visibility: hidden; transform: none; }
}
/* E ela não atravessa a tela junto com a borda do percurso: só ganha corpo no
   último trecho da subida, antes de encostar no topo. Com foco do teclado
   fica sempre inteira. */
@keyframes capsula-chega { from { opacity: 0; } to { opacity: 1; } }
@supports (animation-timeline: view()) and (timeline-scope: --a) {
  body { timeline-scope: --cartao; }
  .percurso { view-timeline: --percurso block; }
  .preco__card { view-timeline: --cartao block; view-timeline-inset: -9rem; }
  .capsula {
    animation: capsula-recua linear both;
    animation-timeline: --cartao;
    transition: none;
  }
  .capsula .botao {
    animation: capsula-chega linear both;
    animation-timeline: --percurso;
    animation-range: entry 62% entry 97%;
  }
  .capsula .botao:focus-visible { animation: none; }
  /* em tela estreita o card de preço cruza a faixa do topo por cima do véu: a marca sai da frente dele */
  @media (max-width: 59.99rem) {
    .marca { animation: marca-recua linear both; animation-timeline: --cartao; }
    .marca:focus-visible { animation: none; }
  }
}
@keyframes marca-recua {
  0%, 100% { opacity: 1; visibility: visible; }
  4%, 96%  { opacity: 0; visibility: hidden; }
}
/* plano B (o script da página põe a classe onde não há animation-timeline) */
.capsula--fora { opacity: 0; visibility: hidden; transform: translate3d(-200vw, 0, 0); transition: opacity 220ms var(--sc-ease-out), visibility 220ms, transform 0s 220ms; }

/* ------------------------------------------------------------------ botão -- */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.375rem;
  padding: 0 clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  border-radius: 999px;
  font-size: clamp(0.75rem, 0.66rem + 0.3vw, 0.875rem);
  font-weight: 560;
  letter-spacing: 0.075em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--sc-accent-ink);
  background:
    radial-gradient(120% 90% at 50% -30%, rgb(var(--luz) / 0.26) 0%, rgb(var(--luz) / 0) 60%),
    linear-gradient(180deg, #2E3138 0%, #1A1C21 48%, #101216 100%);
  box-shadow:
    inset 0 1px 0 rgb(var(--luz) / 0.3),
    inset 0 -1.5px 0 rgb(233 182 120 / 0.42),
    0 1px 2px hsl(var(--sc-shadow-color) / 0.3),
    0 10px 22px -8px hsl(var(--sc-shadow-color) / 0.5),
    0 26px 44px -22px hsl(var(--sc-shadow-color) / 0.45);
  transition: transform 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out), filter 160ms var(--sc-ease-out);
}
.botao:focus-visible { border-radius: 999px; }
.botao:active { transform: translate3d(0, 1px, 0) scale(0.985); filter: brightness(0.94); }
@media (hover: hover) and (pointer: fine) {
  .botao:hover {
    transform: translate3d(0, -1px, 0);
    filter: brightness(1.12);
    box-shadow:
      inset 0 1px 0 rgb(var(--luz) / 0.36),
      inset 0 -1.5px 0 rgb(233 182 120 / 0.7),
      0 2px 3px hsl(var(--sc-shadow-color) / 0.3),
      0 14px 28px -8px hsl(var(--sc-shadow-color) / 0.55),
      0 32px 54px -22px hsl(var(--sc-shadow-color) / 0.5);
  }
  .botao:active { transform: translate3d(0, 1px, 0) scale(0.985); }
}

/* na mesa nenhum texto da página fica abaixo de 14 px */
@media (min-width: 60rem) { a.botao, a.botao--vidro { font-size: max(0.875rem, 14px); } }
@media (min-width: 60rem) { :root { --t-nota: clamp(0.875rem, 0.75rem + 0.18vw, 0.9375rem); } }   /* nota do preço e rodapé: 14 px ou mais na mesa */
/* a mesma ação, em vidro, para a cápsula fixa */
.botao--vidro {
  min-height: 2.875rem;
  padding-inline: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  font-size: clamp(0.72rem, 0.66rem + 0.25vw, 0.875rem);
  color: var(--sc-ink);
  background: linear-gradient(140deg, rgb(var(--luz) / 0.94) 0%, rgb(244 246 249 / 0.86) 100%);
  box-shadow:
    inset 1px 1px 0 rgb(var(--luz) / 0.95),
    inset -1px -1px 1px rgb(160 170 186 / 0.3),
    0 1px 2px hsl(var(--sc-shadow-color) / 0.1),
    0 10px 24px -10px hsl(var(--sc-shadow-color) / 0.3);
}
@media (hover: hover) and (pointer: fine) {
  .botao--vidro:hover {
    filter: none;
    background: linear-gradient(140deg, rgb(var(--luz) / 0.96) 0%, rgb(248 249 251 / 0.86) 100%);
    box-shadow:
      inset 1px 1px 0 rgb(var(--luz) / 0.95),
      inset -1px -1px 1px rgb(160 170 186 / 0.3),
      0 2px 3px hsl(var(--sc-shadow-color) / 0.12),
      0 14px 30px -10px hsl(var(--sc-shadow-color) / 0.36);
  }
}

/* --------------------------------------------------------- liquid glass -- */
/* Vidro pintado, lido a 1x: uma placa fosca quase da cor do chão, com um lábio
   de 4 px em volta. A luz vem de cima e da esquerda: o lábio acende desse lado
   e escurece embaixo e à direita; logo por dentro dele a placa afunda (sombra
   interna); por fora, um sulco fino e a sombra deslocada, tingida pelo chão.
   Tudo em gradiente e box-shadow: custa zero por quadro. */
.vidro {
  position: relative;
  border-radius: var(--raio);
  background:
    linear-gradient(146deg, rgb(var(--luz) / 0.7) 0%, rgb(244 246 249 / 0.52) 42%, rgb(233 236 242 / 0.66) 100%);
  box-shadow:
    /* o lábio: 4 px de luz em cima e à esquerda, 4 px de sombra embaixo e à direita */
    inset 5px 5px 2px -1px rgb(var(--luz) / 1),
    inset -5px -5px 2px -1px rgb(118 130 154 / 0.5),
    /* o degrau por dentro do lábio */
    inset 7px 7px 5px -4px rgb(138 149 171 / 0.3),
    inset -7px -7px 5px -4px rgb(var(--luz) / 0.95),
    /* a espessura da placa */
    inset 18px 18px 30px -22px rgb(var(--luz) / 0.9),
    inset -20px -20px 34px -22px rgb(112 124 150 / 0.34),
    /* o sulco em volta e a luz que o lábio devolve ao chão */
    0 0 0 1px rgb(122 133 156 / 0.4),
    -6px -6px 12px -2px rgb(var(--luz) / 0.95),
    /* a sombra externa, deslocada e tingida pelo chão */
    7px 10px 14px -5px hsl(var(--sc-shadow-color) / 0.24),
    26px 42px 72px -26px hsl(var(--sc-shadow-color) / 0.3);
}
/* Vidro translúcido: os painéis de leitura (os dois lados e o vazio, o
   conselheiro, o preço) desfocam de verdade o que está atrás deles. Atrás de
   cada um o chão leva uma lavagem de cor muito pálida (azul do lado da IA,
   âmbar do lado das pessoas), e o vidro a devolve difusa: é o que faz o painel
   ler como vidro e não como plástico. Nunca há mais de três na tela. */
.vidro--vivo, .lados__card, .conselheiro {
  background:
    linear-gradient(146deg, rgb(var(--luz) / 0.52) 0%, rgb(245 247 250 / 0.26) 44%, rgb(236 239 244 / 0.4) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.7) brightness(1.03);
  backdrop-filter: blur(18px) saturate(1.7) brightness(1.03);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidro--vivo, .lados__card, .conselheiro { background: linear-gradient(146deg, rgb(var(--luz) / 0.94) 0%, rgb(244 246 249 / 0.9) 100%); }
}
/* as lavagens atrás do vidro */
.implantacao__meio { position: relative; }   /* o palco dos lados já é sticky (o motor), e isso basta para conter a lavagem */
.lados__palco::before, .implantacao__meio::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
}
.lados__palco::before {
  background:
    radial-gradient(26% 34% at 22% 70%, rgb(196 210 234 / 0.78) 0%, rgb(196 210 234 / 0.3) 52%, rgb(196 210 234 / 0) 100%),
    radial-gradient(26% 34% at 78% 70%, rgb(242 214 178 / 0.72) 0%, rgb(242 214 178 / 0.28) 52%, rgb(242 214 178 / 0) 100%),
    radial-gradient(18% 26% at 50% 42%, rgb(214 206 226 / 0.5) 0%, rgb(214 206 226 / 0) 100%);
}
.implantacao__meio::before {
  inset: -12% 0;
  background:
    radial-gradient(30% 46% at 52% 40%, rgb(242 214 178 / 0.66) 0%, rgb(242 214 178 / 0.22) 55%, rgb(242 214 178 / 0) 100%),
    radial-gradient(34% 50% at 86% 66%, rgb(196 210 234 / 0.7) 0%, rgb(196 210 234 / 0.24) 55%, rgb(196 210 234 / 0) 100%);
}

/* -------------------------------------------------------------- tipografia -- */
.titulo {
  font-size: var(--t-h2);
  font-weight: 320;
  line-height: 1.04;
  letter-spacing: -0.038em;
  text-wrap: balance;
}
.subtitulo {
  font-size: var(--t-h3);
  font-weight: 420;
  line-height: 1.14;
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.sobretitulo {
  font-size: 0.9375rem;
  font-weight: 520;
  letter-spacing: 0.01em;
  color: var(--sc-accent);
}
.prosa p, .corrido {
  font-size: var(--t-prosa);
  line-height: 1.6;
  letter-spacing: -0.008em;
  max-width: 34em;
  text-wrap: pretty;
}
.prosa p + p { margin-top: var(--paragrafo); }
.apoio {
  font-size: var(--t-corpo);
  line-height: 1.62;
  color: var(--sc-ink-soft);
  max-width: 36em;
  text-wrap: pretty;
}

.secao { position: relative; padding-block: var(--respiro); }

/* ==========================================================================
   VAGAS DO METAL e o substituto em CSS
   ----------------------------------------------------------------------------
   Convenção que a coreografia lê:
   · vaga de um corpo (gota, cabeca, cerebro, agentes, semanas, preco, quem,
     faq, repouso): o corpo fica inscrito no retângulo, centrado.
   · vaga de dois corpos (duas, vazio, ponte): o diâmetro de cada gota é a
     ALTURA do retângulo; a IA encosta na borda esquerda, as pessoas na direita;
     o vazio entre elas é largura menos duas alturas.
   ========================================================================== */
[data-metal-vaga] {
  position: relative;
  display: block;
  flex: none;
  aspect-ratio: 1;
  pointer-events: none;
  --corpo:
    radial-gradient(ellipse 47% 30% at 37% 16%, rgb(var(--luz) / 0.96) 0%, rgb(var(--luz) / 0.8) 44%, rgb(var(--luz) / 0.2) 74%, rgb(var(--luz) / 0) 100%),
    radial-gradient(ellipse 11% 5.5% at 73% 26%, rgb(var(--luz) / 0.55) 0%, rgb(var(--luz) / 0) 100%),
    radial-gradient(ellipse 30% 7% at 56% 92.5%, rgb(233 182 120 / 0.62) 0%, rgb(233 182 120 / 0) 100%),
    radial-gradient(ellipse 72% 34% at 50% 110%, rgb(196 203 214 / 0.4) 0%, rgb(196 203 214 / 0) 100%),
    radial-gradient(closest-side, rgb(214 220 229 / 0) 82%, rgb(214 220 229 / 0.14) 94%, rgb(226 230 236 / 0.38) 100%),
    radial-gradient(circle at 36% 26%, #5A5F68 0%, #2B2E34 22%, #14161A 52%, #0A0B0D 100%);
  --sombra-chao: radial-gradient(closest-side, hsl(222 30% 18% / 0.36) 0%, hsl(222 30% 18% / 0.16) 48%, hsl(222 30% 18% / 0) 100%);
}
[data-metal-vaga]::before,
[data-metal-vaga]::after {
  content: "";
  position: absolute;
  transition: opacity 500ms var(--sc-ease-out);
}
/* o corpo */
[data-metal-vaga]::before {
  inset: 0;
  border-radius: 50%;
  background: var(--corpo);
}
/* a sombra de contato: sem ela a gota vira adesivo */
[data-metal-vaga]::after {
  left: 9%; right: 9%;
  top: 106%;
  height: 10%;
  background: var(--sombra-chao);
}
html.metal-ligado [data-metal-vaga]::before,
html.metal-ligado [data-metal-vaga]::after { opacity: 0; }

/* cabeça: um ovo em pé, sem pretender ser retrato */
[data-metal-vaga="cabeca"]::before {
  inset: 0 9%;
  border-radius: 50% 50% 47% 47% / 56% 56% 44% 44%;
}
/* cérebro: mais largo que alto, com a fissura no meio */
[data-metal-vaga="cerebro"],
[data-metal-vaga="repouso"],
[data-metal-vaga="agentes"] { aspect-ratio: 1.22; }
[data-metal-vaga="cerebro"]::before,
[data-metal-vaga="repouso"]::before,
[data-metal-vaga="agentes"]::before {
  border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
  background:
    radial-gradient(ellipse 4% 7% at 50% -1%, var(--sc-canvas) 0%, var(--sc-canvas) 58%, var(--chao-0) 100%),
    linear-gradient(90deg, rgb(8 9 11 / 0) 47%, rgb(8 9 11 / 0.72) 49.4%, rgb(8 9 11 / 0.72) 50.1%, rgb(var(--luz) / 0.2) 51.1%, rgb(var(--luz) / 0) 53%),
    var(--corpo);
}
/* agentes: três gotas pequenas em volta do cérebro (fora do retângulo) */
[data-metal-vaga="agentes"]::after { left: 12%; right: 12%; }

/* dois corpos: a exata à esquerda, a inquieta à direita */
[data-metal-vaga="duas"],
[data-metal-vaga="vazio"],
[data-metal-vaga="ponte"] { aspect-ratio: auto; }
[data-metal-vaga="duas"]::before,
[data-metal-vaga="vazio"]::before,
[data-metal-vaga="ponte"]::before {
  inset: 0 auto 0 0;
  height: 100%; aspect-ratio: 1;
}
[data-metal-vaga="duas"]::after,
[data-metal-vaga="vazio"]::after,
[data-metal-vaga="ponte"]::after {
  inset: 0 0 0 auto;
  height: 100%; aspect-ratio: 1;
  border-radius: 57% 43% 48% 52% / 46% 56% 44% 54%;
  background: var(--corpo);
}
/* as sombras de contato dos dois corpos ficam no invólucro da vaga */
.par {
  /* --d (diâmetro de cada gota) vem do palco */
  position: relative;
  padding-bottom: calc(var(--d) * 0.2);
  background:
    var(--sombra-chao) left calc(var(--d) * 0.09) bottom 0 / calc(var(--d) * 0.82) calc(var(--d) * 0.1) no-repeat,
    var(--sombra-chao) right calc(var(--d) * 0.09) bottom 0 / calc(var(--d) * 0.82) calc(var(--d) * 0.1) no-repeat;
  --sombra-chao: radial-gradient(closest-side, hsl(222 30% 18% / 0.36) 0%, hsl(222 30% 18% / 0.16) 48%, hsl(222 30% 18% / 0) 100%);
}
.par > [data-metal-vaga] { width: 100%; height: var(--d); }
/* O invólucro das figuras não recebe ponteiro (o texto que passa no vão entre
   duas gotas continua selecionável); as gotas das falas recebem, porque as
   falas passam por trás delas. */
.par, .pico__figura, .trilha__figura, .preco__vaga { pointer-events: none; }
.falas [data-metal-vaga]::before, .falas [data-metal-vaga]::after { pointer-events: auto; }
html.metal-ligado .par { background: none; }
/* a ponte: um fio de metal que afina no meio, entre as duas gotas */
.par--ponte::before {
  content: "";
  position: absolute;
  left: calc(var(--d) * 0.5); right: calc(var(--d) * 0.5);
  top: calc(var(--d) * 0.18); height: calc(var(--d) * 0.64);
  background: linear-gradient(180deg, #666B74 0%, #2A2D33 26%, #0E0F12 70%, #30333A 100%);
  -webkit-mask-image: radial-gradient(ellipse 37% 44% at 50% -2%, transparent 98.5%, #000 100%), radial-gradient(ellipse 37% 44% at 50% 102%, transparent 98.5%, #000 100%);
          mask-image: radial-gradient(ellipse 37% 44% at 50% -2%, transparent 98.5%, #000 100%), radial-gradient(ellipse 37% 44% at 50% 102%, transparent 98.5%, #000 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  transition: opacity 500ms var(--sc-ease-out);
}
html.metal-ligado .par--ponte::before { opacity: 0; }

/* ==========================================================================
   ATO 1 · HERO: pôster centrado. Tipo em cima, a gota logo abaixo.
   ========================================================================== */
.hero { position: relative; }
.hero__palco {
  height: 100vh; height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  /* pelo menos 40 px entre o botão e o topo da gota a partir de 720 px de altura */
  row-gap: clamp(1.25rem, 5.8svh, 4rem);
  padding: clamp(4.5rem, 9.6svh, 8rem) var(--sc-gutter) clamp(1.75rem, 7svh, 5rem);
  text-align: center;
}
/* a lavagem: azul-acinzentado muito pálido sob a gota, um quente à direita */
.hero__palco::before,
.convite__palco::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(62% 50% at 50% 76%, rgb(213 221 235 / 0.8) 0%, rgb(213 221 235 / 0.42) 42%, rgb(213 221 235 / 0.12) 74%, rgb(213 221 235 / 0) 100%),
    radial-gradient(38% 34% at 72% 58%, rgb(244 229 209 / 0.56) 0%, rgb(244 229 209 / 0.22) 50%, rgb(244 229 209 / 0) 100%),
    radial-gradient(40% 34% at 25% 66%, rgb(221 228 240 / 0.5) 0%, rgb(221 228 240 / 0.2) 50%, rgb(221 228 240 / 0) 100%);
}
.hero__texto {
  display: grid; justify-items: center;
  transform-origin: 50% 0;
  transform: scale(calc(1 - var(--sc-p, 0) * 0.07));
}
.hero__titulo {
  font-size: var(--t-h1);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.046em;
  text-wrap: balance;
}
.hero__apoio {
  margin-top: clamp(0.9rem, 2.8svh, 1.75rem);
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--sc-ink-soft);
  max-width: 36em;
  text-wrap: balance;
}
.hero__acao { margin-top: clamp(1.25rem, 4.2svh, 2.5rem); }
.hero__palco > [data-metal-vaga] {
  grid-row: 2;
  /* metade da altura da tela (a gota cresce com a viewport); em tela estreita, 80% da largura */
  align-self: center; justify-self: center;
  height: min(100%, 50svh, 80vw);
  width: auto;
}
/* o substituto também responde à rolagem do hero: cresce e sobe de leve */
html.sc-ready [data-metal-vaga="gota"]::before {
  transform: translate3d(0, calc(var(--sc-p, 0) * -4svh), 0) scale(calc(1 + var(--sc-p, 0) * 0.12));
}
html.sc-ready [data-metal-vaga="gota"]::after {
  transform: scale(calc(1 - var(--sc-p, 0) * 0.22));
}

/* entrada da primeira tela: só tipo, só uma vez */
@media (prefers-reduced-motion: no-preference) {
  .hero__titulo, .hero__apoio, .hero__acao { animation: chegar 820ms var(--sc-ease-out) backwards; }
  .hero__apoio { animation-delay: 90ms; }
  .hero__acao  { animation-delay: 180ms; }
  .hero__palco::before { animation: deriva 34s ease-in-out infinite alternate; }
}
@keyframes chegar {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes deriva {
  from { transform: translate3d(-2.2%, 0.6%, 0) scale(1.03); }
  to   { transform: translate3d(2.2%, -1%, 0) scale(1.06); }
}

/* ==========================================================================
   ATO 2 · A FILOSOFIA: leitura lenta, a cabeça se forma ao lado
   Texto que rola, figura que fica. A coluna do texto leva o respiro de baixo
   por dentro: assim a figura presa só começa a subir depois que a frase de
   fecho já passou do meio da tela.
   ========================================================================== */
.filosofia { padding-block: calc(var(--respiro) * 0.7) 0; }
.filosofia .lado {
  --fig: min(44svh, 32vw, 25rem);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  column-gap: clamp(2rem, 6.5vw, 7.5rem);
  align-items: start;
}
.lado__texto {
  grid-column: 1; grid-row: 1; min-width: 0;
  padding-bottom: max(var(--respiro), calc(var(--fig) * 0.72));
}
.lado__figura {
  grid-column: 2; grid-row: 1;
  position: sticky;
  top: calc(50vh - var(--fig) * 0.56); top: calc(50svh - var(--fig) * 0.56);
  height: calc(var(--fig) * 1.18);
  display: grid; place-items: start center;
}
.lado__figura > [data-metal-vaga] { width: var(--fig); }
.filosofia__abre { display: grid; row-gap: clamp(1rem, 2.4vw, 1.75rem); margin-bottom: var(--pausa); }
.filosofia__abre .titulo { max-width: 13.5em; }
.prosa__fecho, .agentes__fecho, .depois__abre {
  font-size: clamp(1.3rem, 1.06rem + 1.05vw, 2rem);
  font-weight: 340;
  line-height: 1.28;
  letter-spacing: -0.024em;
  text-wrap: pretty;
}
.prosa p.prosa__fecho {
  margin-top: calc(var(--paragrafo) * 1.9);
  font-size: clamp(1.35rem, 1.1rem + 1.15vw, 2.1rem);
  line-height: 1.26;
  letter-spacing: -0.026em;
  max-width: 21em;
  text-wrap: balance;
}

/* ==========================================================================
   ATO 3 · DOIS LADOS E O VAZIO
   Sem o motor: figura e três painéis empilhados. Com o motor: palco preso.
   Em tela larga os três painéis se acumulam num tríptico em degrau (o do meio
   sobe para o vazio entre as gotas); em tela estreita ou baixa eles se
   revezam no mesmo lugar. O tempo de cada um é dado em progresso do ato.
   ========================================================================== */
.lados { position: relative; }
.lados__palco {
  --d: clamp(5.5rem, 26vw, 8.5rem);
  display: grid;
  grid-template-columns: minmax(0, 34rem);
  justify-content: center;
  row-gap: clamp(2rem, 5svh, 3rem);
  padding: var(--respiro) var(--sc-gutter);
}
.lados__figura { width: 100%; max-width: 30rem; justify-self: center; }
.lados__card {
  padding: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
  display: grid; row-gap: clamp(0.8rem, 0.6rem + 0.7vw, 1.25rem);
  align-content: start;
}
.lados__card p {
  font-size: var(--t-corpo);
  line-height: 1.6;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.lados__card strong { color: var(--sc-ink); }

/* a aparição dos painéis, dirigida por --sc-p (só com o motor montado).
   --fora vale 1 quando o painel está invisível: ele sai de cena para a
   esquerda e deixa de receber o ponteiro no lugar do painel visível. */
html.sc-ready .lados__card {
  --rampa: 0.06;
  --de: -1; --ate: 3;
  --dx: 0px; --dy: 18px;
  --entra: clamp(0, calc((var(--sc-p, 0) - var(--de)) / var(--rampa)), 1);
  --sai:   clamp(0, calc((var(--ate) - var(--sc-p, 0)) / var(--rampa)), 1);
  --fora:  clamp(0, calc(1 - min(var(--entra), var(--sai)) * 1000), 1);
  opacity: min(var(--entra), var(--sai));
  transform: translate3d(
    calc((1 - var(--entra)) * var(--dx) - (1 - var(--sai)) * var(--dx) - var(--fora) * 300vw),
    calc((1 - var(--entra)) * var(--dy)),
    0);
  will-change: opacity, transform;
}
html.sc-ready .lados__palco {
  align-content: center;
  padding-block: calc(var(--veu) + 0.5rem) clamp(1.5rem, 5svh, 3.5rem);
}
/* revezamento (padrão): os três no mesmo lugar, um de cada vez */
html.sc-ready .lados__card { grid-column: 1; grid-row: 2; align-self: start; }
html.sc-ready .lados__card--ia      { --ate: 0.33; --dx: -26px; --dy: 0px; }
html.sc-ready .lados__card--pessoas { --de: 0.33; --ate: 0.66; --dx: 26px; --dy: 0px; }
html.sc-ready .lados__card--vazio   { --de: 0.66; --ate: 1; }

/* celular deitado: gota, painel, gota, na mesma linha */
@media (min-width: 30rem) and (max-height: 33.9rem) {
  html.sc-ready .lados__palco {
    --d: clamp(4.5rem, 24svh, 7rem);
    grid-template-columns: var(--d) minmax(0, 32rem) var(--d);
    column-gap: clamp(1rem, 3vw, 2.5rem);
  }
  html.sc-ready .lados__figura { grid-column: 1 / -1; grid-row: 1; max-width: none; align-self: center; }
  html.sc-ready .lados__card { grid-column: 2; grid-row: 1; align-self: center; padding: 1.1rem 1.4rem; row-gap: 0.5rem; }
  html.sc-ready .lados__card p { font-size: 0.9375rem; line-height: 1.5; }
  html.sc-ready .lados__card .subtitulo { font-size: 1.25rem; }
  html.sc-ready .lados__card--ia      { --de: 0.25; --ate: 0.5; }
  html.sc-ready .lados__card--pessoas { --de: 0.5; --ate: 0.75; }
  html.sc-ready .lados__card--vazio   { --de: 0.75; }
}

/* tablet em pé: os dois lados sob as gotas e o vazio no meio, embaixo; os três ficam */
@media (min-width: 45rem) and (max-width: 59.99rem) and (min-height: 56rem) {
  .lados__palco {
    --d: clamp(7rem, 15svh, 10rem);
    --vao: clamp(1.5rem, 4vw, 2.5rem);
    grid-template-columns: repeat(2, minmax(0, 21rem));
    column-gap: var(--vao);
    row-gap: clamp(2.25rem, 4svh, 3.25rem);
  }
  .lados__figura { grid-column: 1 / -1; grid-row: 1; max-width: none; width: calc(50% + var(--vao) / 2 + var(--d)); }
  .lados__card--ia      { grid-column: 1; grid-row: 2; }
  .lados__card--pessoas { grid-column: 2; grid-row: 2; }
  .lados__card--vazio   { grid-column: 1 / -1; grid-row: 3; justify-self: center; width: min(100%, 25rem); }
  html.sc-ready .lados__card--ia      { grid-column: 1; grid-row: 2; --ate: 1; }
  html.sc-ready .lados__card--pessoas { grid-column: 2; grid-row: 2; --de: 0.2; --ate: 1; }
  html.sc-ready .lados__card--vazio   { grid-column: 1 / -1; grid-row: 3; --de: 0.54; --ate: 1; --dy: 22px; }
}

/* mesa: tríptico em degrau, os três ficam. A linha de cima é das gotas e da
   sombra de contato delas; os painéis dos lados começam um respiro abaixo. */
@media (min-width: 60rem) and (min-height: 41rem) {
  .lados__palco {
    --d: clamp(6.5rem, 19svh, 11rem);
    --vao: clamp(1.5rem, 3.4vw, 4rem);
    grid-template-columns: repeat(3, minmax(0, 23rem));
    grid-template-rows: calc(var(--d) * 1.2) auto;
    column-gap: var(--vao);
    row-gap: clamp(2.5rem, 6.4svh, 4.25rem);
  }
  .lados__figura {
    grid-column: 1 / -1; grid-row: 1;
    /* cada gota fica centrada sobre o painel do seu lado */
    max-width: none;
    width: calc(100% - (100% - var(--vao) * 2) / 3 + var(--d));
    justify-self: center; align-self: start;
  }
  .lados__card--ia      { grid-column: 1; grid-row: 2; }
  .lados__card--pessoas { grid-column: 3; grid-row: 2; }
  .lados__card--vazio   { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  html.sc-ready .lados__card--ia      { grid-column: 1; grid-row: 2; --ate: 1; --dx: -30px; }
  html.sc-ready .lados__card--pessoas { grid-column: 3; grid-row: 2; --de: 0.2; --ate: 1; --dx: 30px; }
  html.sc-ready .lados__card--vazio   { grid-column: 2; grid-row: 1 / span 2; --de: 0.54; --ate: 1; --dy: 22px; }
}
/* mesa estreita (1024 de largura): as gotas vão para as bordas de fora, o
   vazio entre elas passa de 60% da tela, e os painéis ficam mais enxutos */
@media (min-width: 60rem) and (max-width: 67.99rem) and (min-height: 41rem) {
  .lados__palco { --d: clamp(6rem, 16svh, 9rem); }
  .lados__figura { width: 100%; }
  .lados__card { padding: 1.5rem; }
  .lados__card .subtitulo { font-size: 1.3125rem; text-wrap: nowrap; }
}

/* ==========================================================================
   ATO 4 · AS SEIS FALAS: atravessam o vazio de lado
   ========================================================================== */
.falas { position: relative; }
.falas__palco {
  --d: clamp(3.25rem, 11.5vw, 10rem);
  /* a gota da IA fica a mais de meio diâmetro da borda: os espinhos cabem inteiros na tela */
  --margem: max(calc(var(--sc-gutter) * 0.75), calc(var(--d) * 0.56));
  display: grid; row-gap: var(--pausa);
  padding: var(--respiro) var(--sc-gutter);
}
.falas__figura { max-width: 26rem; width: 100%; }
.falas__trilho li + li { margin-top: var(--paragrafo); }
.falas__trilho p {
  font-size: clamp(1.25rem, 1rem + 1.25vw, 2rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.24;
  letter-spacing: -0.022em;
  max-width: 17em;
  text-wrap: balance;
}

@media (prefers-reduced-motion: no-preference) {
  html.sc-ready .falas__palco { display: block; padding: 0; }
  html.sc-ready .falas__titulo {
    position: absolute;
    top: clamp(4.75rem, 14svh, 8.5rem);
    left: var(--sc-gutter); right: var(--sc-gutter);
    max-width: 11.5em;
  }
  html.sc-ready .falas__figura {
    position: absolute; z-index: 2;
    left: var(--margem); right: var(--margem);
    top: 56%;
    max-width: none; width: auto;
    transform: translate3d(0, calc(var(--d) * -0.5), 0);
  }
  /* A janela das falas. A máscara apaga o trilho atrás de cada gota e só fica
     totalmente opaca 9vw depois dela:
     zona opaca = [margem + d + 9vw, 100% - margem - d - 9vw]. */
  html.sc-ready .falas__janela {
    position: absolute; inset-inline: 0;
    top: 56%;
    height: 44svh;
    transform: translate3d(0, -50%, 0);
    display: flex; align-items: center;
    overflow: clip;
    --borda: calc(var(--margem) + var(--d));
    /* do lado da IA a faixa transparente cobre também os espinhos (0,3 do diâmetro) */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent calc(var(--borda) + var(--d) * 0.3), #000 calc(var(--borda) + var(--d) * 0.3 + 8vw), #000 calc(100% - var(--borda) - 9vw), transparent calc(100% - var(--borda) + var(--d) * 0.12), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, transparent calc(var(--borda) + var(--d) * 0.3), #000 calc(var(--borda) + var(--d) * 0.3 + 8vw), #000 calc(100% - var(--borda) - 9vw), transparent calc(100% - var(--borda) + var(--d) * 0.12), transparent 100%);
  }
  html.sc-ready .falas__trilho {
    align-items: center;
    width: max-content;
    gap: clamp(3.5rem, 13vw, 13rem);
    padding-inline: 50vw 40vw;
  }
  html.sc-ready .falas__trilho li { flex: none; margin: 0; width: clamp(12.5rem, 27vw, 27rem); }
  html.sc-ready .falas__trilho p { max-width: none; }
}
/* Tela estreita: o vão entre as gotas é curto demais para um trilho contínuo.
   As gotas encolhem e vão para as bordas, e as falas param no vazio uma de
   cada vez: seis patamares de 12% do ato, com travessias de 5,6% entre eles.
   Cada fala é 18 px mais estreita que a zona opaca da máscara. O trilho anda
   em degraus por CSS sobre --sc-p (sobrepõe o translate linear do motor). */
/* Tela estreita: o vão entre as gotas é curto demais para a travessia (ela
   cortaria a frase na borda). As gotas encolhem e vão para as bordas, e as
   falas se revezam no meio do vazio, sempre inteiras: cada uma tem um sexto do
   ato; entre duas, a que sai apaga antes de a próxima acender (nunca ficam
   duas sobrepostas). A coreografia lê a mesma conta para os espinhos. */
@media (prefers-reduced-motion: no-preference) and (max-width: 44.99rem) {
  html.sc-ready .falas__palco {
    --d: clamp(2.5rem, 11vw, 4rem);
    --margem: 0.9rem;               /* os espinhos da gota da IA cabem na tela */
    --fala: calc(100vw - (var(--margem) + var(--d)) * 2 - 1.75rem);
  }
  html.sc-ready .falas__figura, html.sc-ready .falas__janela { top: 55%; }
  html.sc-ready .falas__janela { justify-content: center; -webkit-mask-image: none; mask-image: none; }
  html.sc-ready .falas__trilho {
    display: grid; align-items: center;
    width: var(--fala); padding: 0; gap: 0;
    transform: none !important;
  }
  html.sc-ready .falas__trilho li {
    --g: 0.003; --r: 0.018;
    --a: calc(var(--i) / 6 + var(--g)); --b: calc((var(--i) + 1) / 6 - var(--g));
    grid-area: 1 / 1; width: auto;
    opacity: clamp(0, min((var(--sc-p, 0) - var(--a)) / var(--r), (var(--b) - var(--sc-p, 0)) / var(--r)), 1);
  }
  html.sc-ready .falas__trilho li:nth-child(1) { --i: 0; --a: -1; }
  html.sc-ready .falas__trilho li:nth-child(2) { --i: 1; }
  html.sc-ready .falas__trilho li:nth-child(3) { --i: 2; }
  html.sc-ready .falas__trilho li:nth-child(4) { --i: 3; }
  html.sc-ready .falas__trilho li:nth-child(5) { --i: 4; }
  html.sc-ready .falas__trilho li:nth-child(6) { --i: 5; --b: 2; }
  html.sc-ready .falas__trilho p { font-size: clamp(1.125rem, 0.6rem + 2.5vw, 1.375rem); line-height: 1.26; text-align: center; }
}
/* Movimento reduzido: sem travessia. O ato deixa de prender e as falas viram
   uma lista parada entre as duas gotas. */
@media (prefers-reduced-motion: reduce) {
  .falas { height: auto !important; }
  .falas__palco { height: auto !important; overflow: visible !important; }
  .falas__trilho { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--paragrafo) clamp(2rem, 5vw, 5rem); }
  .falas__trilho li + li { margin-top: 0; }
}

/* ==========================================================================
   ATO 5 · O PICO: Entre IA e Pessoas, e o cérebro
   Sem o motor: ponte, texto, cérebro, texto, em sequência.
   Com o motor: um palco só. Título em cima, figura no meio, um parágrafo de
   cada vez embaixo. Os tempos são cues do motor (data-sc-cue no HTML): ele
   cuida da opacidade, da subida e de tirar o ponteiro de quem está invisível.
   A faixa da figura reserva o ar: --ar-cima entre o título e o corpo,
   --ar-baixo entre a sombra de contato e o parágrafo.
   ========================================================================== */
.pico { position: relative; }
.pico__palco {
  --d: clamp(4.5rem, 20vw, 9rem);
  display: grid;
  justify-items: center;
  text-align: center;
  row-gap: var(--paragrafo);
  padding: var(--respiro) var(--sc-gutter);
}
.pico__palco::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 48% at 50% 46%, rgb(245 231 212 / 0.62) 0%, rgb(245 231 212 / 0.34) 38%, rgb(245 231 212 / 0.1) 72%, rgb(245 231 212 / 0) 100%),
    radial-gradient(46% 38% at 26% 66%, rgb(214 222 236 / 0.5) 0%, rgb(214 222 236 / 0.2) 50%, rgb(214 222 236 / 0) 100%);
}
.pico__cena { display: contents; }
.pico__cena > p {
  font-size: clamp(1rem, 0.93rem + 0.42vw, 1.25rem);
  line-height: 1.56;
  max-width: 35em;
  text-wrap: balance;
}
.pico__cena > .pico__frase {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.75rem);
  font-weight: 340;
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 22em;
  text-wrap: balance;
}
.pico .par { width: min(100%, 38rem); }
.pico__figura { width: 100%; display: grid; justify-items: center; }
.pico__figura > [data-metal-vaga] { width: min(72%, 21rem); margin-top: var(--pausa); margin-bottom: calc(var(--pausa) * 1.2); }
.pico__cena--cerebro > .titulo { margin-top: 0; }
html:not(.sc-ready) .pico__cena--entre > .titulo { margin-top: var(--pausa); }

html.sc-ready .pico__palco {
  --ar-cima:  clamp(3.25rem, 7svh, 5.5rem);
  --ar-baixo: clamp(3.75rem, 8svh, 6rem);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "titulo" "figura" "texto";
  row-gap: 0;
  padding: calc(var(--veu) + clamp(0.25rem, 2svh, 1.75rem)) var(--sc-gutter) clamp(1.25rem, 6svh, 4.5rem);
}
html.sc-ready .pico__cena > .titulo { grid-area: titulo; margin: 0; }
html.sc-ready .pico__cena > p { grid-area: texto; align-self: start; }
html.sc-ready .pico .par {
  --d: min(26svh, 22vw, 15rem);
  grid-area: figura; align-self: center;
  width: min(100%, calc(var(--d) * 3.5), 52rem);
}
/* a figura ocupa a faixa do meio; o cérebro e a sombra dele cabem nela em
   qualquer proporção (unidades de contêiner sobre a caixa de conteúdo) */
html.sc-ready .pico__figura {
  grid-area: figura; align-self: stretch; justify-self: stretch;
  min-height: 0;
  padding-block: var(--ar-cima) var(--ar-baixo);
  container-type: size;
  place-items: center;
}
html.sc-ready .pico__figura > [data-metal-vaga] {
  --w: min(80vw, 21rem);
  --w: min(92cqw, 105cqh, 33rem);          /* 105cqh: altura = 100cqh / 1,16 (corpo + sombra) */
  width: var(--w);
  margin: 0 0 calc(var(--w) * 0.131);       /* a sombra de contato (16% da altura) conta no centro */
}
/* os substitutos se revezam no meio do ato (com o metal ligado os dois somem) */
html.sc-ready .pico .par { opacity: clamp(0, calc((0.5 - var(--sc-p, 0)) / 0.05), 1); }
html.sc-ready .pico__figura { opacity: clamp(0, calc((var(--sc-p, 0) - 0.5) / 0.05), 1); }

/* tela baixa e larga: figura à esquerda, texto à direita */
@media (min-width: 30rem) and (max-height: 33.9rem) {
  html.sc-ready .pico__palco {
    --ar-cima: 0.5rem; --ar-baixo: 0.5rem;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "figura titulo" "figura texto";
    column-gap: clamp(1.5rem, 5vw, 4rem);
    justify-items: start; text-align: left;
    padding-bottom: 1.25rem;
  }
  html.sc-ready .pico__cena > .titulo { align-self: end; font-size: clamp(1.6rem, 7.4svh, 2.25rem); margin-bottom: 0.9rem; }
  html.sc-ready .pico__cena > p { font-size: 0.9375rem; line-height: 1.5; }
  html.sc-ready .pico__cena > .pico__frase { font-size: 1.2rem; }
  html.sc-ready .pico .par { --d: min(30svh, 12vw); justify-self: center; width: 100%; }
  html.sc-ready .pico__figura > [data-metal-vaga] { --w: min(86cqw, 100cqh); }
}

/* ==========================================================================
   ATO 6 · AGENTES EXECUTORES
   Mesa: o cérebro no centro, com espaço para as órbitas, e o texto dos dois
   lados dele: a explicação à esquerda, o fecho em tipo maior à direita. A
   composição inteira cabe numa tela, então o corpo fica à vista enquanto se lê.
   Tablet e celular deitado: texto à esquerda, figura presa à direita.
   Celular em pé: a figura vira cortina no topo, como no ato 2.
   ========================================================================== */
.agentes { padding-block: calc(var(--respiro) * 0.85) var(--respiro); }
.agentes__grade {
  --cer: clamp(7rem, min(22vw, 38svh), 14rem);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  column-gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}
.agentes__grade > * { grid-column: 1; }
.agentes__figura {
  grid-column: 2; grid-row: 1 / span 3;
  position: sticky;
  top: calc(50vh - var(--cer) * 0.5); top: calc(50svh - var(--cer) * 0.5);
  display: grid; place-items: center;
  padding-block: calc(var(--cer) * 0.3) calc(var(--cer) * 0.34);
}
.agentes__figura > [data-metal-vaga] { width: var(--cer); }
.agentes__titulo { margin-bottom: var(--pausa); }
.agentes__corpo { display: grid; row-gap: var(--paragrafo); align-content: start; }
.agentes__fecho { margin-top: calc(var(--paragrafo) * 1.7); max-width: 24em; }
.agentes__fecho strong { font-weight: 500; }

/* ==========================================================================
   ATOS 7 E 8 · A IMPLANTAÇÃO, O CONSELHEIRO, AS TRÊS SEMANAS, E DEPOIS
   Uma grade de 12 colunas com um trilho estreito à esquerda. O texto corre da
   coluna 5 em diante; o trilho fica vazio até a linha do tempo, onde recebe o
   subtítulo e a semente, presos enquanto as três semanas rolam. "Depois do
   relatório" é só tipografia, no mesmo eixo.
   ========================================================================== */
.metodo { position: relative; }
.implantacao { padding-top: var(--respiro); }
.implantacao__abre, .implantacao__meio, .trilha, .depois__grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col);
}
.implantacao__abre > *, .implantacao__meio > *, .trilha > *, .depois__grade > * { grid-column: 1 / -1; }
.implantacao__abre .titulo { margin-bottom: var(--pausa); }
.implantacao__meio { margin-top: calc(var(--pausa) * 1.5); }
.conselheiro {
  padding: clamp(1.6rem, 1.1rem + 2.2vw, 3rem);
  display: grid; row-gap: clamp(0.8rem, 0.6rem + 0.7vw, 1.25rem);
}
.trilha { margin-top: calc(var(--respiro) * 0.6); align-items: start; }
.trilha__marco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1.5rem;
  margin-bottom: calc(var(--pausa) * 0.8);
}
.metodo { --fig: clamp(4.5rem, min(12.5vw, 19svh), 10.5rem); }
.trilha__figura { width: var(--fig); height: calc(var(--fig) * 1.2); }
.trilha__figura > [data-metal-vaga] { width: 100%; }
.semanas li {
  display: grid;
  grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr);
  column-gap: clamp(1.25rem, 3vw, 3rem);
  row-gap: 0.6rem;
  padding-block: clamp(1.75rem, 1.2rem + 2.6vw, 3.5rem);
  border-top: 1px solid var(--sc-hairline-strong);
  font-size: var(--t-corpo);
  line-height: 1.6;
  color: var(--sc-ink-soft);
}
.semanas li:last-child { border-bottom: 1px solid var(--sc-hairline-strong); }
.semanas strong {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 520;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--sc-ink);
}
.semanas span { text-wrap: pretty; }

.depois { padding-block: calc(var(--respiro) * 0.9) var(--respiro); }
.depois .titulo { margin-bottom: var(--pausa); }
.depois__pouso { display: none; }
.depois__abre { max-width: 27em; margin-bottom: calc(var(--pausa) * 0.9); }
.depois .apoio {
  padding-top: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  border-top: 1px solid var(--sc-hairline-strong);
  max-width: none;
}
.depois .apoio + .apoio { margin-top: var(--paragrafo); }

/* ==========================================================================
   ATO 9 · QUANTO CUSTA: o vidro passa na frente do metal
   ========================================================================== */
.preco::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 46% at 72% 52%, rgb(212 221 236 / 0.8) 0%, rgb(212 221 236 / 0) 100%),
    radial-gradient(30% 30% at 88% 24%, rgb(245 231 212 / 0.55) 0%, rgb(245 231 212 / 0) 100%);
}
.preco__grade > .titulo { margin-bottom: calc(var(--pausa) * 1.2); }
.preco__cena { position: relative; display: flow-root; --gota: clamp(5.5rem, 25vw, 7.5rem); max-width: 40rem; }
/* A gota fica inteira atrás do card e é vista através do vidro (o card de
   preço desfoca menos que os outros, para o metal continuar lendo como metal).
   Estreito: no canto de cima à direita, ao lado do nome do produto, numa faixa
   que não leva texto. */
.preco__vaga {
  position: absolute;
  width: var(--gota);
  right: clamp(0.9rem, 3.2vw, 1.75rem);
  top: clamp(1rem, 0.7rem + 2vw, 2rem);
}
.preco__card.vidro--vivo {
  -webkit-backdrop-filter: blur(7px) saturate(1.5) brightness(1.04);
  backdrop-filter: blur(7px) saturate(1.5) brightness(1.04);
}
.preco__vaga > [data-metal-vaga]::after { display: none; }
.preco__revela {
  --folga: min(5rem, var(--sc-gutter));   /* espaço para a sombra dentro do recorte, sem passar da janela */
  position: relative; z-index: 20;
  padding: 5rem var(--folga); margin: -5rem calc(var(--folga) * -1);
}
.preco__card { padding: clamp(1.6rem, 1rem + 3vw, 3rem); }
.preco__nome {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 520;
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: calc(100% - var(--gota) - 0.5rem);
  min-height: calc(var(--gota) - 0.75rem);
}
.preco__lista { margin-top: clamp(1.25rem, 1rem + 1.4vw, 2rem); }
.preco__lista li {
  padding-block: clamp(0.8rem, 0.7rem + 0.4vw, 1.05rem);
  border-top: 1px solid var(--sc-hairline);
  font-size: var(--t-corpo);
  line-height: 1.45;
}
.preco__lista li:first-child {
  border-top: 0;
  padding-block: 0 clamp(0.35rem, 1vw, 0.75rem);
  font-size: clamp(3.1rem, 1.9rem + 4.4vw, 5rem);
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.preco__lista li:first-child strong { font-weight: 300; }
.preco__lista li:nth-child(2) {
  border-top: 0;
  padding-block: 0 clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
  font-size: var(--t-prosa);
  color: var(--sc-ink-soft);
}
.preco__lista li:nth-child(2) strong { color: var(--sc-ink); font-weight: 560; }
.preco__nota {
  margin-top: 0;
  padding-top: clamp(1rem, 0.8rem + 0.8vw, 1.6rem);
  border-top: 1px solid var(--sc-hairline);
  font-size: var(--t-nota);
  line-height: 1.58;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.preco__acao { margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
/* Abaixo da mesa o card pode ser mais alto que a tela. O botão fica em fluxo,
   logo depois da lista e antes da nota (a ordem de leitura do documento não
   muda): o preço e o botão cabem juntos na tela e o botão nunca cobre texto. */
@media (max-width: 59.99rem) {
  .preco__card { display: flex; flex-direction: column; padding: clamp(1.35rem, 0.9rem + 2.4vw, 2.5rem); }
  .preco__lista li { padding-block: 0.7rem; }
  .preco__acao { order: 3; margin-top: 1.1rem; }
  .preco__nota { order: 4; margin-top: 1.5rem; }
}

/* mesa: card largo e baixo, que cabe inteiro na tela. À esquerda o nome, o
   preço e o prazo; à direita o que vem junto; embaixo a nota e o botão. A gota
   fica inteira atrás do card, numa faixa à direita que não leva texto, com a
   sombra de contato dela. O celular deitado usa a mesma composição, menor. */
@media (min-width: 60rem), (min-width: 40rem) and (max-height: 33.9rem) {
  .preco__cena {
    --gota: clamp(8.5rem, min(14vw, 27svh), 13.5rem);
    max-width: 74rem;
  }
  .preco__vaga {
    right: clamp(1.75rem, 2.8vw, 3rem);
    top: calc(50% - var(--gota) * 0.58);
  }
  .preco__vaga > [data-metal-vaga]::after { display: block; }
  .preco__card {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 4.4vw, 5rem);
    padding: clamp(2rem, 1.2rem + 1.8vw, 3rem);
    padding-right: calc(var(--gota) + clamp(3.25rem, 5.4vw, 5.5rem));
  }
  .preco__acao, .preco__nota { order: 0; }
  .preco__nome { grid-column: 1 / -1; max-width: none; min-height: 0; }
  .preco__lista {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: inherit;
    column-gap: inherit;
    margin-top: clamp(1.25rem, 3svh, 2rem);
    padding-bottom: clamp(1.1rem, 2.6svh, 1.75rem);
  }
  .preco__lista li { grid-column: 2; }
  .preco__lista li:first-child { grid-column: 1; grid-row: 1 / span 2; align-self: end; padding-block: 0 0.5rem; }
  .preco__lista li:nth-child(2) { grid-column: 1; grid-row: 3 / span 2; align-self: start; padding-block: 0; text-wrap: balance; }
  .preco__lista li:nth-child(3) { grid-row: 1; border-top: 0; }
  .preco__lista li:nth-child(4) { grid-row: 2; }
  .preco__lista li:nth-child(5) { grid-row: 3; }
  .preco__lista li:nth-child(6) { grid-row: 4; }
  .preco__nota { grid-column: 1; align-self: start; padding-top: clamp(1.1rem, 2.6svh, 1.75rem); }
  .preco__acao {
    grid-column: 2; align-self: start; margin-top: 0;
    padding-top: clamp(1.1rem, 2.6svh, 1.75rem);
    border-top: 1px solid var(--sc-hairline);
  }
}
/* celular deitado: a mesma grade, com a gota e os espaços na medida da tela baixa */
@media (min-width: 40rem) and (max-width: 59.99rem) and (max-height: 33.9rem) {
  .preco__cena { --gota: 5.25rem; }
  .preco__vaga { right: 1.1rem; top: 1rem; }
  .preco__vaga > [data-metal-vaga]::after { display: none; }
  .preco__card { column-gap: 1.75rem; padding: 1.5rem; padding-right: 1.5rem; }
  .preco__nome { max-width: calc(100% - var(--gota) - 1rem); }
  .preco__lista { margin-top: 1rem; padding-bottom: 1rem; }
  .preco__lista li { padding-block: 0.55rem; }
  .preco__lista li:nth-child(3) { padding-right: calc(var(--gota) - 1.25rem); }
  .preco__lista li:first-child { font-size: 3rem; }
  .preco__nota, .preco__acao { padding-top: 1rem; }
}

/* ==========================================================================
   ATO 10 · QUEM
   ========================================================================== */
.quem__grade {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  column-gap: clamp(2.5rem, 7vw, 8rem);
  align-items: center;
}
.quem__moldura {
  position: relative;
  padding: clamp(0.7rem, 0.5rem + 0.7vw, 1.1rem);
  max-width: 27rem;
  width: 100%;
  justify-self: start;
}
.quem__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: calc(var(--raio) - clamp(0.7rem, 0.5rem + 0.7vw, 1.1rem));
  background: #121316;
  box-shadow: inset 0 0 0 1px rgb(11 12 15 / 0.4);
}
.quem__foto img {
  position: absolute; left: 0; top: -8%;
  width: 100%; height: 116%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 30%;
}
.quem__moldura > [data-metal-vaga] {
  position: absolute;
  width: clamp(4.25rem, 9.5vw, 7.5rem);
  right: clamp(-2.75rem, -3.4vw, -1.25rem);
  bottom: clamp(1.25rem, 3vw, 3rem);
}
.quem__texto .titulo { margin-bottom: var(--pausa); max-width: 11em; }
.quem__nome { font-size: var(--t-prosa); letter-spacing: -0.012em; margin-bottom: var(--paragrafo); }
.quem__texto .apoio + .apoio { margin-top: var(--paragrafo); }

/* ==========================================================================
   ATO 11 · PERGUNTAS
   ========================================================================== */
.faq__grade {
  display: grid;
  grid-template-columns: minmax(0, 0.66fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 6.5rem);
  align-items: start;
}
.faq__cabeca {
  position: sticky;
  top: calc(var(--veu) + 2rem);
  display: grid; row-gap: clamp(2rem, 5vw, 4rem);
}
.faq__cabeca > [data-metal-vaga] { width: clamp(3.5rem, 7vw, 5.75rem); }
.faq details { border-top: 1px solid var(--sc-hairline-strong); }
.faq details:last-child { border-bottom: 1px solid var(--sc-hairline-strong); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.5rem;
  padding-block: clamp(1.35rem, 1.1rem + 1vw, 2rem);
  font-size: var(--t-prosa);
  font-weight: 460;
  line-height: 1.32;
  letter-spacing: -0.016em;
  text-wrap: balance;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 0.95rem; height: 0.95rem;
  margin-top: 0.2em;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform var(--sc-d-base) var(--sc-ease-out);
}
.faq details[open] > summary::after { transform: rotate(45deg); }
.faq details > p { padding-bottom: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); padding-right: 2.5rem; }
@media (hover: hover) and (pointer: fine) {
  .faq summary { transition: color var(--sc-d-fast) var(--sc-ease-out); }
  .faq summary:hover { color: var(--sc-accent); }
}

/* ==========================================================================
   ATO 12 · O CONVITE: o cérebro pousa onde a gota estava. A página para.
   O rodapé é o marco de rodapé da página (fora de main). A base do palco
   reserva --rodape-h, e o rodapé sobe para essa faixa com margem negativa:
   chega nos últimos pixels da rolagem, sem mexer no palco.
   ========================================================================== */
:root { --rodape-h: 4.5rem; }
.convite { position: relative; }
.convite__palco {
  height: 100vh; height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) var(--rodape-h);
  justify-items: center;
  row-gap: 0;
  padding: clamp(5rem, 13svh, 8.5rem) var(--sc-gutter) 0;
  text-align: center;
}
.convite__texto { display: grid; justify-items: center; }
.convite__texto .titulo {
  font-size: clamp(1.75rem, min(1.1rem + 3vw, 8.4svh), 3.75rem);
  max-width: 15em;
}
.convite__texto .apoio {
  margin-top: clamp(0.75rem, 2.2svh, 1.6rem);
  font-size: clamp(0.9375rem, 0.9rem + 0.34vw, 1.1875rem);
  line-height: 1.48;
  max-width: 33em;
  text-wrap: balance;
}
.convite__acao { margin-top: clamp(1rem, 3svh, 2.25rem); }
/* A faixa do meio é do cérebro e da sombra de contato dele (16% da altura),
   com --ar de folga dividido entre cima e baixo. O corpo sobe 8% da própria
   altura para o conjunto corpo + sombra ficar no centro da faixa. */
.convite__palco > [data-metal-vaga] {
  --ar: clamp(2.25rem, 14svh - 3.3rem, 7rem);
  grid-row: 2;
  align-self: center; justify-self: center;
  height: min(calc((100% - var(--ar)) / 1.16), 21rem, 50vw);
  width: auto;
  transform: translate3d(0, -8%, 0);
}
.convite__base { grid-row: 3; }
.rodape {
  position: relative; z-index: 2;
  height: var(--rodape-h);
  margin-top: calc(var(--rodape-h) * -1);
  padding: 0 var(--sc-gutter) 0.5rem;
  display: grid; place-items: center;
  text-align: center;
  font-size: var(--t-nota);
  color: var(--sc-ink-soft);
}
/* A linha do rodapé é texto corrido, com os pontos da copy. Cada trecho é um
   bloco em linha que não se parte; onde a linha precisa quebrar, o ponto
   daquele lugar vira uma quebra (largura 100%, altura 0) e some, para nenhum
   separador ficar pendurado no fim ou no começo de uma linha. */
.rodape p { line-height: 0; }
.rodape__item, .rodape__sep { display: inline-block; line-height: 1.5; }
.rodape a {
  display: inline-flex; align-items: center;
  min-height: 2.875rem;
  line-height: 1.5;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .rodape a:hover { color: var(--sc-ink); }
}
@media (max-width: 67.99rem) {
  :root { --rodape-h: 5.5rem; }
  .rodape__sep--c { width: 100%; height: 0; font-size: 0; line-height: 0; overflow: hidden; vertical-align: top; }
}
@media (max-width: 43.99rem) {
  :root { --rodape-h: 6.5rem; }
  .rodape__sep--a, .rodape__sep--b { width: 100%; height: 0; font-size: 0; line-height: 0; overflow: hidden; vertical-align: top; }
  .rodape__item, .rodape__sep:not([class*="--"]) { line-height: 1.42; }
}

/* ==========================================================================
   LARGURAS
   ========================================================================== */

/* Mesa (>= 60rem): as grades de 12 colunas ganham o trilho da esquerda. */
@media (min-width: 60rem) {
  /* Agentes: o cérebro grande à esquerda, preso no meio da tela com espaço para
     as órbitas dos satélites; à direita, uma coluna só: título, explicação e o
     fecho em tipo maior. */
  .agentes { padding-block: calc(var(--respiro) * 0.6) calc(var(--respiro) * 0.8); }
  .agentes__grade {
    --cer: clamp(14rem, 41svh, 30rem);       /* altura do cérebro */
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
    column-gap: clamp(2rem, 4vw, 5rem);
    align-items: start;
  }
  .agentes__figura {
    grid-column: 1; grid-row: 1 / span 3;
    position: sticky; top: var(--veu);
    height: calc(100vh - var(--veu)); height: calc(100svh - var(--veu));
    padding: 0;
    display: grid; place-items: center;
  }
  .agentes__figura > [data-metal-vaga] { width: auto; height: var(--cer); aspect-ratio: 1.2; transform: translate3d(0, -4%, 0); }
  .agentes__titulo { grid-column: 2; grid-row: 1; margin-top: clamp(4rem, 22svh, 13rem); }
  .agentes__corpo  { grid-column: 2; grid-row: 2; }
  .agentes__corpo .corrido { max-width: 30em; }
  .agentes__fecho  { grid-column: 2; grid-row: 3; max-width: 19em; margin-bottom: clamp(4rem, 22svh, 13rem); }

  .implantacao__abre .titulo { grid-column: 5 / -1; }
  .implantacao__abre .corrido { grid-column: 5 / -1; }
  .conselheiro { grid-column: 5 / -1; }
  /* O trilho da esquerda é só do corpo: a semente fica sempre no mesmo ponto
     da tela (46% da altura), da implantação até o fim de "Depois do relatório",
     e nenhum texto passa por ali. O subtítulo da linha do tempo abre a lista,
     na coluna do texto; a vaga prende no trilho. */
  .trilha__marco { display: contents; }
  .trilha__marco .subtitulo { grid-column: 5 / -1; grid-row: 1; max-width: 16em; margin-bottom: calc(var(--pausa) * 0.8); }
  .trilha__marco .trilha__figura {
    grid-column: 1 / span 4; grid-row: 1 / span 2;
    position: sticky;
    top: calc(46vh - var(--fig) / 2); top: calc(46svh - var(--fig) / 2);
    height: var(--fig);
    justify-self: center;
  }
  .semanas { grid-column: 5 / -1; grid-row: 2; }

  .depois__grade > * { grid-column: 5 / -1; }
  /* sem vaga: "Depois do relatório" é só tipografia. O trilho da esquerda fica
     vazio e este marcador (sem substituto, invisível) diz à coreografia onde o
     corpo pode descansar enquanto o ato passa. */
  .depois__grade > .depois__pouso {
    display: block;
    grid-column: 1 / span 4; grid-row: 1 / span 4;
    position: sticky;
    top: calc(46vh - var(--fig) / 2); top: calc(46svh - var(--fig) / 2);
    align-self: start; justify-self: center;
    width: var(--fig); aspect-ratio: 1;
    pointer-events: none;
  }
  .depois__grade > .apoio { grid-column: 5 / span 4; }
  .depois__grade > .apoio + .apoio { grid-column: 9 / span 4; margin-top: 0; }
}

/* Mesa larga: dentro do painel do conselheiro, o nome à esquerda e o texto à direita. */
@media (min-width: 75rem) {
  .conselheiro {
    grid-template-columns: minmax(0, 0.44fr) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 3.5rem);
    align-items: start;
  }
}

/* Abaixo da mesa: uma coluna. */
@media (max-width: 59.99rem) {
  .faq__grade { grid-template-columns: minmax(0, 1fr); }
  .faq__cabeca { position: relative; top: auto; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 1.5rem; margin-bottom: var(--pausa); }
  .semanas li { grid-template-columns: minmax(0, 1fr); }
  .implantacao__abre .corrido, .depois__grade > * { max-width: 38rem; }
  .depois .apoio { max-width: 38rem; }
}

/* Tela estreita: acertos que valem em pé e deitado. O véu fica opaco até
   passar da cápsula, para o texto se dissolver inteiro antes dela. */
@media (max-width: 44.99rem) {
  :root { --veu: 4.25rem; --veu-cheio: 82%; --topo-y: 0.5rem; }

  .quem__grade { grid-template-columns: minmax(0, 1fr); row-gap: var(--pausa); }
  .quem__moldura { max-width: 19rem; }
  .quem__moldura > [data-metal-vaga] { right: max(-1.6rem, calc(var(--sc-gutter) * -0.8)); }

  .faq details > p { padding-right: 0; }
}

/* Celular em pé (largura): a marca e a cápsula não cabem lado a lado. A marca
   fica só no hero (presa enquanto o hero prende, sai com ele) e a cápsula
   toma o topo, centrada, do segundo ao penúltimo ato. */
@media (max-width: 29.99rem) {
  .topo { position: absolute; height: 100vh; height: 100svh; }
  html.sc-ready .topo { height: 160vh; }       /* a altura do ato do hero: data-sc-span="1.6" */
  .marca { position: sticky; top: var(--topo-y); }
  .capsula { justify-content: center; }
  .convite__palco { padding-top: calc(var(--veu) + 0.25rem); }
}

/* Abaixo de 360 px de largura o botão (uma linha só) precisa apertar um pouco. */
@media (max-width: 22.4rem) {
  .botao { padding-inline: 0.9rem; letter-spacing: 0.045em; }
}

/* Celular em pé: uma coluna. A figura fixa do ato 2 vira uma cortina no topo
   (o texto passa por baixo e se dissolve antes dela). */
@media (max-width: 44.99rem) and (min-height: 34rem) {
  :root { --cortina: clamp(12.5rem, 30svh, 15.5rem); }

  .filosofia .lado { display: block; }
  .lado__texto { padding-bottom: var(--respiro); }
  .lado__figura {
    position: sticky; top: 0; z-index: 6;
    height: var(--cortina);
    margin-inline: calc(var(--sc-gutter) * -1);
    padding-top: calc(var(--veu) - 0.25rem);
    place-items: start center;
    background: linear-gradient(180deg, var(--sc-canvas) 0%, var(--sc-canvas) 84%, var(--chao-0) 100%);
  }
  .lado__figura > [data-metal-vaga] { width: calc(var(--cortina) - var(--veu) - 2.4rem); }
  .filosofia__abre { margin-top: 1.5rem; }

  html.sc-ready .lados__figura { max-width: 21rem; }

  /* agentes: a mesma cortina, com o cérebro e as órbitas */
  .agentes__grade { display: block; --cer: 6.5rem; }
  .agentes__figura {
    top: 0; z-index: 6;
    height: calc(var(--veu) + 9.5rem);
    margin-inline: calc(var(--sc-gutter) * -1);
    padding-block: calc(var(--veu) + 1.75rem) 0;
    place-items: start center;
    background: linear-gradient(180deg, var(--sc-canvas) 0%, var(--sc-canvas) 86%, var(--chao-0) 100%);
  }
  .agentes__titulo { margin-top: 1.25rem; }

  /* linha do tempo: o subtítulo e a semente ficam presos numa barra enquanto
     as três semanas rolam por baixo */
  .trilha__marco {
    position: sticky; top: 0; z-index: 6;
    margin-inline: calc(var(--sc-gutter) * -1);
    padding: calc(var(--veu) + 0.25rem) var(--sc-gutter) 1.75rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(180deg, var(--sc-canvas) 0%, var(--sc-canvas) 84%, var(--chao-0) 100%);
  }
}

/* Celular deitado e janelas baixas: tudo o que é preso precisa caber em pouca
   altura. */
@media (max-height: 33.9rem) {
  :root { --veu: 3.6rem; --veu-cheio: 84%; --topo-y: 0.4rem; }
  .hero__palco { padding-top: 3.4rem; padding-bottom: 2.6rem; row-gap: 1.4rem; }
  .hero__titulo { font-size: clamp(2.1rem, 12svh, 3rem); }
  .hero__apoio { margin-top: 0.4rem; font-size: 1rem; max-width: none; }
  .hero__acao { margin-top: 0.7rem; }
  .botao { min-height: 2.875rem; }
  .convite__palco { padding-top: 3.5rem; }
  .convite__texto .titulo { font-size: clamp(1.4rem, 7.2svh, 2rem); max-width: none; }
  .convite__texto .apoio { margin-top: 0.4rem; font-size: 0.9375rem; max-width: 46em; }
  .rodape { font-size: 0.75rem; padding-bottom: 0.125rem; }
  .rodape__item, .rodape__sep:not([class*="--"]) { line-height: 1.3; }
  html.sc-ready .falas__titulo { top: 3.5rem; max-width: none; font-size: clamp(1.4rem, 7.4svh, 2rem); }
  html.sc-ready .falas__figura, html.sc-ready .falas__janela { top: 63%; }
  html.sc-ready .falas__palco { --margem: calc(var(--d) * 0.62); }   /* os espinhos da IA cabem inteiros na tela */
  html.sc-ready .falas__trilho p { font-size: 1.15rem; }
  .convite__acao { margin-top: 0.7rem; }
  .convite__palco > [data-metal-vaga] { --ar: 1rem; height: min(calc((100% - var(--ar)) / 1.16), 9rem); }
  .filosofia .lado { --fig: min(52svh, 28vw); }
}

/* Deitado, com o tipo menor, a razão social e o CNPJ voltam a caber numa linha. */
@media (max-height: 33.9rem) and (min-width: 35rem) {
  :root { --rodape-h: 4.25rem; }
  .rodape__sep--a, .rodape__sep--b { width: auto; height: auto; font-size: inherit; line-height: 1.3; overflow: visible; }
}

/* Celular deitado: no último palco o cérebro não cabe embaixo do texto num
   tamanho que se leia. Ele vai para o lado, com metade da altura da tela. */
@media (max-height: 33.9rem) and (min-width: 30rem) {
  .convite__palco {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) var(--rodape-h);
    column-gap: clamp(1rem, 4vw, 2.5rem);
    align-items: center;
    justify-items: start; text-align: left;
  }
  .convite__texto { grid-column: 2; grid-row: 1; justify-items: start; }
  .convite__texto .titulo, .convite__texto .apoio { text-wrap: pretty; }
  .convite__palco > [data-metal-vaga] {
    grid-column: 1; grid-row: 1;
    justify-self: center;
    height: auto; width: min(100%, 15rem, 62svh);
    transform: translate3d(0, -6%, 0);
  }
  .convite__base { grid-column: 1 / -1; grid-row: 2; }
}

/* Movimento reduzido: o que carrega compreensão fica, o que desloca sai. */
@media (prefers-reduced-motion: reduce) {
  .hero__texto { transform: none; }
  html.sc-ready [data-metal-vaga="gota"]::before,
  html.sc-ready [data-metal-vaga="gota"]::after { transform: none; }
  html.sc-ready .lados__card { transform: translate3d(calc(var(--fora) * -300vw), 0, 0); }
  .botao, .faq summary::after, .capsula { transition: none; }
}

/* Impressão e leitores sem palco: tudo em sequência. */
@media print {
  .veu, .capsula, #metal { display: none; }
}