/* ELEVO - v5 (layout enviado pelo cliente em 2026-07-26)
   Sessão 0: barra de topo escura + botão circular de menu ao lado.
   Sessão 1: hero em dois painéis - painel de marca com recorte inferior-direito
   (assinatura da seção) e painel de foto com cartão dos executivos e frentes.
   Todo valor visual resolve para design_system/tokens.css. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

:root {
  /* Fundos alternados por sessão (pedido do cliente, item 14 do "Ajuste Elevo").
     A página deixou de ser bege inteira: branco é o padrão e bege/malva entram
     como pausa. `--sec-bg` é o fundo da SESSÃO corrente - todo recorte de canto
     preenche com ele, nunca com `--canvas`, senão o notch fica branco no meio
     de uma sessão colorida. Cada sessão que foge do branco redeclara os dois. */
  --canvas: #ffffff;
  --canvas-bege: var(--primitive-cinza);
  --canvas-malva: var(--primitive-malva);
  --sec-bg: var(--canvas);
  /* painéis invertidos: eram brancos sobre bege, agora são bege sobre branco */
  --panel-bg: var(--canvas-bege);

  --ink: var(--primitive-roxo);

  /* rampas de alpha das duas tintas da página. CSS não sabe ajustar o alpha de
     uma custom property, então cada degrau é um token (padrão do main4.css).
     Os degraus de texto foram escolhidos por contraste medido: >= 4.5:1. */
  --ink-90: rgba(47, 21, 51, .9);
  --ink-88: rgba(47, 21, 51, .88);
  --ink-68: rgba(47, 21, 51, .68);
  --ink-62: rgba(47, 21, 51, .62);
  --ink-55: rgba(47, 21, 51, .55);
  --ink-34: rgba(47, 21, 51, .34);
  --ink-22: rgba(47, 21, 51, .22);
  --ink-06: rgba(47, 21, 51, .06);

  --light-92: rgba(237, 234, 229, .92);
  --light-80: rgba(237, 234, 229, .8);
  --light-58: rgba(237, 234, 229, .58);
  --light-55: rgba(237, 234, 229, .55);
  --light-50: rgba(237, 234, 229, .5);
  --light-38: rgba(237, 234, 229, .38);
  --light-28: rgba(237, 234, 229, .28);

  --sheet: rgba(255, 255, 255, .94);   /* cartões flutuando sobre a foto */
  --sheet-soft: rgba(255, 255, 255, .9);
  --sheet-ring: rgba(255, 255, 255, .95);

  --shadow-float: 0 18px 40px -26px rgba(47, 21, 51, .55);
  /* sombra suave de flutuação: mais spread, menos opacidade (não harsh) */
  --shadow-pill: 0 10px 28px -8px rgba(47, 21, 51, .36), 0 2px 8px -3px rgba(47, 21, 51, .14);
  --shadow-cta-dark: 0 16px 30px -16px rgba(47, 21, 51, .6);
  --shadow-cta-malva: 0 16px 30px -14px rgba(184, 130, 232, .55);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

/* ---------- fundos alternados (item 14) ----------
   Ordem que o cliente definiu: 1-5 branco, 6 malva, 7 bege, 8 branco, 9 bege,
   10 branco. Cada sessão colorida redeclara `--sec-bg` junto com o background,
   porque é ele que preenche os recortes de canto de dentro dela. */
.sec-result {
  background: var(--canvas-malva);
  --sec-bg: var(--canvas-malva);
}
.sec-depo,
.sec-midia {
  background: var(--canvas-bege);
  --sec-bg: var(--canvas-bege);
}

/* a barra de números é a continuação visual da hero, não uma sessão à parte:
   sem respiro em cima, ela fica presa ao painel como na referência do cliente */
.sec-prova { padding-top: 0; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--primitive-malva); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.ic { fill: currentColor; }
.ic-stroke {
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -60px; z-index: 100;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--ink); color: var(--primitive-cinza);
  font-size: var(--text-small); text-decoration: none;
  transition: top var(--duration-base) var(--ease-out);
}
.skip-link:focus-visible { top: var(--space-3); }

section[id] { scroll-margin-top: calc(var(--topbar-h) + var(--space-6)); }

/* só para leitor de tela */
.u-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* label de UI: caixa alta + tracking (não é título - títulos seguem sentence case) */
.u-label {
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px;
  border: 0; border-radius: var(--radius-pill);
  font-family: var(--font-ui); font-size: 15px; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }

.btn-dark { background: var(--ink); color: var(--primitive-cinza); }
.btn-dark:hover { box-shadow: var(--shadow-cta-dark); }

.btn-malva { background: var(--primitive-malva); color: var(--ink); }
.btn-malva:hover { box-shadow: var(--shadow-cta-malva); }

/* CTA secundário sobre o painel malva */
.btn-ghost-roxo {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink-34);
}
.btn-ghost-roxo:hover {
  background: var(--ink-06);
  box-shadow: inset 0 0 0 1.5px var(--ink-62);
}

/* CTA secundário sobre o roxo (menu) */
.btn-outline-cinza {
  background: transparent; color: var(--primitive-cinza);
  box-shadow: inset 0 0 0 1.5px var(--light-38);
}
.btn-outline-cinza:hover { box-shadow: inset 0 0 0 1.5px var(--light-80); }

/* ---------- SESSÃO 0 · barra de topo ----------
   Item 1: era uma pílula flutuante recuada da borda; virou barra retangular
   presa no topo, sangrando de ponta a ponta (referência anacouto). O conteúdo
   dela é que respeita o grid, via `--shell-max` + `--shell-pad`. */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  /* acima do menu: a barra continua visível e o botão de fechar, alcançável */
  z-index: var(--z-modal);
  background: var(--surface-topbar);
  color: var(--primitive-cinza);
}

.topbar-shell {
  display: flex; align-items: center; gap: var(--topbar-gap);
  margin: 0 auto;
  /* o recuo entra no teto porque ele mora no MESMO elemento; nas seções o
     padding fica no pai e o --shell-max no filho. Sem somar os dois, em telas
     largas a logo caía --shell-pad à frente da borda da hero. */
  max-width: calc(var(--shell-max) + var(--shell-pad) * 2);
  padding-inline: var(--shell-pad);
  height: var(--topbar-h);
}

.topbar-bar {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
  height: 100%;
}

/* área de clique cobre a altura da barra, sem mudar o desenho da logo.
   max-height + object-fit é a trava: um SVG com viewBox de proporção diferente
   (o malva quadrado, por exemplo) esticava a linha e empurrava o CTA pra fora
   da barra, que tem altura fixa. */
.topbar-brand { display: flex; align-items: center; height: 100%; }
.topbar-brand img {
  width: clamp(104px, 8.4vw, 132px);
  height: auto;
  max-height: 42%;
  object-fit: contain;
  object-position: left center;
}

.topbar-line {
  justify-self: center;
  margin: 0;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  color: var(--light-92);
}

/* CTA da barra: caixa retangular de contorno, duas linhas (item 2, anacouto).
   Sobrescreve o raio de pílula que vem de `.btn`. */
.topbar-cta {
  height: max(44px, calc(var(--topbar-h) - 22px));
  padding: 0 clamp(14px, 1.5vw, 22px);
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 0 0 1.2px var(--light-55);
  color: var(--primitive-cinza);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}
.topbar-cta:hover {
  transform: none;
  background: var(--primitive-malva);
  box-shadow: inset 0 0 0 1.2px transparent;
  color: var(--ink);
}

/* botão de menu: quadrado, encostado no CTA, dentro da barra */
.topbar-menu {
  flex: 0 0 auto;
  width: max(44px, calc(var(--topbar-h) - 22px));
  height: max(44px, calc(var(--topbar-h) - 22px));
  display: grid; place-items: center;
  border: 0; border-radius: 0;
  background: transparent;
  box-shadow: inset 0 0 0 1.2px var(--light-55);
  color: var(--primitive-cinza);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out);
}
.topbar-menu:hover { background: var(--primitive-malva); color: var(--ink); }

/* os dois ícones dividem a mesma célula e se cruzam na troca de estado */
.topbar-menu > svg {
  grid-area: 1 / 1;
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-medium) var(--ease-out);
}
.topbar-menu .ico-close,
.topbar-menu[aria-expanded="true"] .ico-open {
  opacity: 0;
  transform: rotate(-90deg) scale(.7);
}
.topbar-menu .ico-open,
.topbar-menu[aria-expanded="true"] .ico-close {
  opacity: 1;
  transform: none;
}

/* ---------- trilha da borda direita (item 2) ----------
   Chip sólido em vez de seta solta: a trilha é fixa e passa por branco, bege,
   malva e gradiente, então a seta precisa carregar o próprio contraste. */
.rail-topo {
  position: fixed;
  top: 50%;
  right: clamp(10px, 1.6vw, 26px);
  transform: translateY(-50%);
  z-index: var(--z-overlay);
  display: grid; place-items: center;
  width: clamp(40px, 3.4vw, 48px);
  height: clamp(40px, 3.4vw, 48px);
  border-radius: 50%;
  background: var(--surface-topbar);
  color: var(--primitive-cinza);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-medium) var(--ease-out),
              visibility var(--duration-medium) var(--ease-out),
              background-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.rail-topo.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
.rail-topo:hover {
  background: var(--primitive-malva);
  color: var(--ink);
  transform: translateY(-50%) scale(1.06);
}

/* ---------- menu retraído ---------- */
.menu-panel {
  position: fixed; inset: 0;
  z-index: var(--z-overlay);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-7);
  padding: calc(var(--topbar-h) + var(--shell-pad)) var(--shell-pad) var(--shell-pad);
  background: var(--surface-topbar);
  color: var(--primitive-cinza);
  overflow-y: auto;
}
.menu-panel[hidden] { display: none; }
.menu-panel:not([hidden]) { animation: menu-in var(--duration-medium) var(--ease-out); }

@keyframes menu-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.menu-nav { display: flex; flex-direction: column; gap: clamp(2px, .6vw, 8px); }
.menu-nav a {
  display: block;
  padding: clamp(4px, .8vw, 10px) 0;
  font-size: clamp(38px, 7vw, 96px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  color: var(--light-58);
  transition: color var(--duration-base) var(--ease-out);
}
.menu-nav a span { display: inline-block; transition: transform var(--duration-medium) var(--ease-out); }
.menu-nav a:hover { color: var(--primitive-malva); }
.menu-nav a:hover span { transform: translateX(clamp(8px, 1.2vw, 20px)); }

.menu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.menu-meta {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--text-small);
  color: var(--light-55);
}

/* ---------- SESSÃO 1 · hero ---------- */
/* folga inferior = folga entre as colunas: os painéis da hero e o da Sessão 2
   leem como uma família só, não como duas seções soltas */
.hero {
  padding: calc(var(--topbar-h) + var(--shell-pad)) var(--shell-pad) var(--panel-gap);
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--panel-gap);
  align-items: stretch;
  margin: 0 auto;
  max-width: var(--shell-max);
  min-height: min(76dvh, 760px);
}

.panel { position: relative; border-radius: var(--panel-r); }

/* -- painel de marca: recorte inferior-direito (assinatura da seção) -- */
.panel-brand {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--panel-pad);
  background: var(--surface-panel-brand);
  color: var(--ink);
  /* o recorte cobre esse canto: raio 0 evita o arco de 1px do anti-aliasing */
  border-bottom-right-radius: 0;
}

/* recorte na cor do canvas + dois filetes côncavos nas junções
   (receita de design_system/specs/foundations/notch-corner.md) */
.panel-cut {
  position: absolute; right: 0; bottom: 0;
  width: var(--panel-cut-w); height: var(--panel-cut-h);
  border-top-left-radius: var(--panel-fillet);
  background: var(--sec-bg);
  pointer-events: none;
}
.panel-cut::before, .panel-cut::after {
  content: ""; position: absolute;
  width: var(--panel-fillet); height: var(--panel-fillet);
  background: radial-gradient(circle at 0 0,
    transparent calc(var(--panel-fillet) - .5px),
    var(--sec-bg) var(--panel-fillet));
}
.panel-cut::before { right: 100%; bottom: 0; }
.panel-cut::after { right: 0; bottom: 100%; }

.panel-eyebrow {
  display: flex; align-items: center; gap: 9px;
  margin: 0;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.panel-eyebrow img { width: 16px; height: auto; }

.panel-title {
  margin: clamp(22px, 2.6vw, 40px) 0 0;
  max-width: 15ch;
  font-size: var(--text-panel-title);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.018em;
  text-wrap: balance;
}


.title-u {
  text-decoration: underline;
  text-decoration-thickness: .055em;
  text-underline-offset: .13em;
}

.panel-lead {
  margin: clamp(18px, 1.8vw, 26px) 0 0;
  max-width: 42ch;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.55;
  color: var(--ink-90);
  text-wrap: pretty;
}

.panel-ctas {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: clamp(24px, 2.6vw, 38px);
}


/* -- painel de foto -- */
.panel-photo {
  overflow: hidden;
  background: var(--primitive-neutral-200);
  min-height: min(58dvh, 560px);
  /* o recorte cobre esse canto: raio 0 evita o arco de 1px do anti-aliasing */
  border-bottom-left-radius: 0;
}
.panel-photo-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: grayscale(1) contrast(1.04);
}

/* recorte espelhado: abre o vazio central junto com o do painel de marca */
.photo-cut {
  position: absolute; z-index: 1;
  left: 0; bottom: 0;
  width: var(--panel-cut-w); height: var(--panel-cut-h);
  border-top-right-radius: var(--panel-fillet);
  background: var(--sec-bg);
  pointer-events: none;
}
.photo-cut::before, .photo-cut::after {
  content: ""; position: absolute;
  width: var(--panel-fillet); height: var(--panel-fillet);
  background: radial-gradient(circle at 100% 0,
    transparent calc(var(--panel-fillet) - .5px),
    var(--sec-bg) var(--panel-fillet));
}
.photo-cut::before { left: 100%; bottom: 0; }
.photo-cut::after { left: 0; bottom: 100%; }

/* seta de scroll: centrada na folga e no meio da altura do vazio.
   Mora no painel de marca só porque ele não tem overflow recortado. */
.hero-cue {
  position: absolute; z-index: 2;
  left: calc(100% + var(--panel-gap) / 2 - var(--cue-size) / 2);
  bottom: calc(var(--panel-cut-h) / 2 - var(--cue-size) / 2);
  display: grid; place-items: center;
  width: var(--cue-size); height: var(--cue-size);
  color: var(--ink-88);
  animation: cue-bob 2.4s var(--ease-in-out) infinite;
}
.hero-cue svg { width: 100%; height: 100%; stroke-width: 2.2; }
/* alvo de clique de 48px sem mexer no tamanho desenhado */
.hero-cue::before { content: ""; position: absolute; inset: -9px; }
.hero-cue:hover { color: var(--ink); }

@keyframes cue-bob {
  0%, 100% { transform: translateY(-15%); }
  50% { transform: translateY(15%); }
}

/* SLOT: recorte inferior-direito da foto, do tamanho do botão + folga.
   Ele abre o espaço; quem mora dentro é o botão, com os 4 cantos à vista.
   Ancorado na grid (não no painel) pra não ter a sombra do botão recortada. */
.who-slot {
  position: absolute; z-index: 3;
  right: 0; bottom: 0;
  height: var(--slot-h);
  padding: var(--card-gap);
  /* raio concêntrico ao do botão: a folga fica igual ao virar o canto */
  border-top-left-radius: calc(var(--card-r) + var(--card-gap));
  background: var(--sec-bg);
}
/* filetes côncavos nas junções com as bordas do painel */
.who-slot::before, .who-slot::after {
  content: ""; position: absolute;
  width: var(--panel-fillet); height: var(--panel-fillet);
  background: radial-gradient(circle at 0 0,
    transparent calc(var(--panel-fillet) - .5px),
    var(--sec-bg) var(--panel-fillet));
}
.who-slot::before { right: 100%; bottom: 0; }
.who-slot::after { right: 0; bottom: 100%; }

/* BOTÃO: leva para a seção dos executivos */
.who-card {
  display: flex; align-items: center; gap: 12px;
  height: var(--card-h);
  padding: var(--card-pad);
  border-radius: var(--card-r);
  background: var(--surface-elevated);
  color: var(--ink);
  text-decoration: none;
  /* o recorte que abriga o cartão agora é branco igual a ele: sem o filete o
     cartão derrete no vazio e a mordida da foto fica sem forma */
  box-shadow: 0 4px 12px -6px var(--ink-34), inset 0 0 0 1px var(--ink-22);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.who-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -8px var(--ink-34), inset 0 0 0 1px var(--ink-22); }
.who-card:active { transform: translateY(0); }

.who-faces { display: flex; flex: none; }
.who-faces img {
  width: var(--card-face); height: var(--card-face);
  border-radius: calc(var(--card-r) * .7);
  object-fit: cover;
  object-position: 50% 20%;
  filter: grayscale(1);
  box-shadow: 0 0 0 2.5px var(--surface-elevated);
}
.who-faces img + img { margin-left: -12px; }

.who-text { display: flex; flex-direction: column; line-height: 1.25; }
.who-text strong { font-size: clamp(13px, 1vw, 15px); font-weight: 700; white-space: nowrap; }
.who-text span { font-size: var(--text-small); color: var(--ink-68); white-space: nowrap; }

/* seta dentro do botão: é o sinal de que ele navega */
.who-badge {
  flex: none;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--primitive-malva);
  color: var(--ink);
  transition: transform var(--duration-base) var(--ease-out);
}
.who-card:hover .who-badge { transform: translate(2px, -2px); }

/* tags flutuando sobre a mesa da foto */
.photo-tags { list-style: none; margin: 0; padding: 0; }
.photo-tag {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 17px;
  border-radius: var(--radius-pill);
  background: var(--sheet-soft);
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--shadow-pill);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.photo-tag::before {
  content: ""; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primitive-malva);
}
/* altura da mesa: mãos, canvas e post-its */
.photo-tag-1 { top: 62%; left: 7%; }
.photo-tag-2 { top: 69%; left: 38%; }
.photo-tag-3 { top: 64%; right: 9%; }
.photo-tag-4 { top: 78%; left: 16%; }

/* bob vertical suave - só desktop (tags absolutas) e com motion permitido.
   html.is-static já zera animações globalmente; mobile desliga no breakpoint. */
@keyframes tag-float {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(3px); }
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-static) .photo-tag {
    animation: tag-float 4.2s var(--ease-in-out) infinite;
  }
  html:not(.is-static) .photo-tag-1 { animation-delay: 0s; }
  html:not(.is-static) .photo-tag-2 { animation-delay: .85s; }
  html:not(.is-static) .photo-tag-3 { animation-delay: 1.7s; }
  html:not(.is-static) .photo-tag-4 { animation-delay: 2.55s; }
}

/* ---------- SESSÃO 2 · prova social em números ---------- */
.sec-prova { padding: var(--space-section-half) var(--shell-pad); }

.prova-panel {
  margin: 0 auto;
  max-width: var(--shell-max);
  padding: clamp(34px, 3.6vw, 56px) var(--panel-pad-x);
  border-radius: var(--panel-r);
  /* invertido: era branco sobre bege, virou bege sobre branco */
  background: var(--panel-bg);
}

/* rótulo de seção: quadradinho laranja + label em caixa alta.
   Reutilizar nas próximas seções. */
.sec-eyebrow {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 var(--eyebrow-gap);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-88);
}
.eyebrow-dot {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--primitive-laranja);
}

.prova-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* folga maior entre as células: na montagem do cliente elas se leem como
     quatro blocos separados, não como uma fileira contínua */
  gap: clamp(28px, 3.8vw, 64px);
}

.prova-num {
  margin: 0;
  /* a régua pontilhada é a sublinha do número, então cola nele; o respiro
     grande fica embaixo dela, antes do rótulo */
  padding-bottom: clamp(8px, .9vw, 13px);
  font-size: var(--text-stat);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.022em;
  /* régua pontilhada: `border: dotted` desenha quadradinhos colados;
     o gradiente dá ponto redondo com espaçamento sob controle */
  background-image: radial-gradient(circle, var(--ink-34) 1.1px, transparent 1.2px);
  background-position: 0 100%;
  background-size: 7px 2.4px;
  background-repeat: repeat-x;
}

.prova-label {
  margin: clamp(15px, 1.5vw, 22px) 0 0;
  /* "o texto abaixo é maior equilibrando visualmente as informações" (item 16):
     era 14px fixo contra um número de 63px. Segunda passada a pedido do Caio:
     de 18px para 21px, deixando a razão número/rótulo em ~3:1. */
  font-size: clamp(16px, 1.45vw, 21px);
  font-weight: 600;
  color: var(--ink-88);
  text-wrap: pretty;
}

/* ---------- SESSÃO 3 · desafios / próximo nível ---------- */
.sec-desafios {
  padding: var(--space-section-half) var(--shell-pad);
  text-align: center;
}

.desafios-title {
  margin: 0 auto clamp(40px, 5vw, 82px);
  max-width: 28ch;   /* quebra em duas linhas */
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-h2);
  letter-spacing: -.018em;
  text-wrap: balance;
}

.desafios-row {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: var(--shell-max);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--box-gap);
}

.desafio-box {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--box-gap-in);
  min-height: var(--box-h);
  /* padding enxuto: "Elevar a performance" só cabe em uma linha assim */
  padding: clamp(12px, 1.2vw, 18px);
  border-radius: var(--box-r);
  /* só contorno: o preenchimento entra no hover (item 3). `box-shadow: inset`
     em vez de `border` porque a borda somaria 2px à altura e desalinharia a
     fileira com os outros elementos que herdam --box-h. */
  background: transparent;
  box-shadow: inset 0 0 0 1.4px var(--ink-34);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.desafio-box:hover {
  transform: translateY(-2px);
  background: var(--surface-panel-brand);
  box-shadow: inset 0 0 0 1.4px transparent;
}
.desafio-box:active { transform: translateY(0); }

/* As quatro frases têm comprimentos diferentes, então nenhuma largura única
   quebra as quatro em duas linhas. Cada linha é um span em bloco: quebra
   controlada no desktop, e no mobile o span reflui sozinho se faltar espaço. */
.desafio-texto {
  margin: 0;
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.014em;
  /* desce meio bloco da flecha pra ficar no centro óptico enquanto ela some */
  transform: translateY(var(--seta-shift));
  transition: transform var(--duration-medium) var(--ease-out);
}
.desafio-texto span { display: block; }

/* A flecha da referência mora num box só dela; aqui ela fica centrada sob o
   texto, porque os quatro box precisam carregar os quatro desafios.
   Em repouso ela some e o texto desce pra ocupar o centro óptico; no hover o
   texto sobe e ela entra. A flecha nunca sai do fluxo, então a troca é só
   transform + opacity: nenhum reflow. */
.desafio-seta {
  width: var(--box-seta); height: var(--box-seta);
  color: var(--ink-88);
  opacity: 0;
  transform: translateY(calc(var(--seta-shift) + 6px));
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-medium) var(--ease-out);
}
.desafio-seta svg { width: 100%; height: 100%; stroke-width: 2.2; }

.desafio-box:hover .desafio-texto { transform: none; }
.desafio-box:hover .desafio-seta { opacity: 1; transform: none; }

/* sem hover (toque): a flecha fica sempre visível */
@media (hover: none) {
  .desafio-seta { opacity: 1; transform: none; }
  .desafio-texto { transform: none; }
}

/* ---------- SESSÃO 4 · projetos estratégicos ---------- */
.sec-projetos { padding: var(--space-section-half) var(--shell-pad); }

.projetos-intro {
  margin: 0 auto clamp(56px, 7vw, 110px);
  max-width: var(--shell-max);
}
/* head larga: sem `balance`, a primeira linha vai até o limite em vez de
   equilibrar duas linhas curtas encostadas na esquerda */
.projetos-title {
  margin: 0;
  max-width: 40ch;
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-h2);
  letter-spacing: -.018em;
}
.projetos-lead {
  margin: clamp(20px, 2.2vw, 32px) 0 0;
  max-width: 88ch;
  font-size: clamp(16px, 1.4vw, 21px);
  line-height: 1.55;
  color: var(--ink-90);
  text-wrap: pretty;
}

.projetos-stack { margin: 0 auto; max-width: var(--shell-max); }

/* cada card gruda no topo e o próximo sobe por cima.
   Fundo opaco é o que faz a cobertura funcionar. */
.projeto-card {
  position: sticky;
  top: var(--stack-top);
  padding-top: clamp(24px, 2.4vw, 36px);
  border-top: 1px solid var(--ink-34);
  background: var(--sec-bg);
}

.projeto-titulo {
  display: flex; align-items: flex-start; gap: clamp(8px, .8vw, 14px);
  margin: 0 0 0 var(--giant-indent);
  font-size: var(--text-giant);
  font-weight: 700;
  line-height: var(--giant-lh);
  letter-spacing: -.03em;
}
.projeto-num {
  flex: none;
  position: relative;
  top: .1em;
  font-size: clamp(15px, 1.5vw, 24px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--tracking-normal);
  color: var(--ink-68);
}

.projeto-corpo {
  display: grid;
  /* item 4: "diminuir o tamanho da foto". A coluna da mídia caiu de .74fr para
     .56fr e a folga entre as colunas cresceu junto. */
  grid-template-columns: minmax(0, 1fr) minmax(0, .56fr);
  align-items: start;
  gap: clamp(32px, 5vw, 96px);
  /* Topo absorve a perna do "g" que estoura a caixa do título. Embaixo, o
     cliente pediu ~1cm a mais: a base das listas ficava a 69px da divisória do
     próximo card e não dava leitura. */
  padding: clamp(31px, 3.6vw, 55px) 0 clamp(72px, 7.4vw, 110px);
}

/* descrição e lista andam juntas no topo, não esticadas até a base da foto */
.projeto-texto { display: flex; flex-direction: column; gap: clamp(20px, 2.2vw, 32px); }

/* item 5: "aumentar o tamanho da fonte desse subtexto abaixo do título" - vale
   para as três frentes (Negócio, Mercado, Performance) */
.projeto-sub {
  margin: 0 0 clamp(12px, 1.2vw, 18px);
  font-size: clamp(20px, 1.9vw, 28px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.012em;
}
.projeto-desc {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.55;
  color: var(--ink-90);
  text-wrap: pretty;
}

/* Item 6: eram cinco itens numa lista só quebrada em duas colunas, o que fazia
   os módulos parecerem mais projetos. Agora são dois blocos com rótulo próprio -
   projetos com bullet à esquerda, módulos em tag de contorno à direita. */
.projeto-listas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(24px, 3vw, 52px);
  padding-top: clamp(18px, 2vw, 30px);
  border-top: 1px solid var(--ink-22);
}
.projeto-listas-label {
  margin: 0 0 clamp(12px, 1.2vw, 18px);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-68);
}

.projeto-bullets { list-style: none; margin: 0; padding: 0; }
.projeto-bullets li {
  position: relative;
  padding: 4px 0 4px clamp(16px, 1.3vw, 22px);
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 500;
}
/* bullet desenhado: `list-style` não deixa controlar tamanho nem cor */
.projeto-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: .78em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--primitive-laranja);
}

.projeto-tags {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: clamp(8px, .8vw, 12px);
  align-content: flex-start;
}
.projeto-tags li {
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1.2px var(--ink-34);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.projeto-media {
  width: 100%;
}

.projeto-foto {
  position: relative;
  margin: 0;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9;
}
.projeto-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}

.projeto-cta {
  position: absolute;
  bottom: clamp(12px, 1.4vw, 20px);
  left: clamp(12px, 1.4vw, 20px);
  z-index: 1;
  box-shadow: 0 2px 12px rgb(15 15 15 / .22);
}

@media (max-width: 900px) {
  /* sem recuo aqui: "Performance" não cabe na largura que sobra */
  .projeto-titulo { margin-left: 0; }
  .projeto-corpo { grid-template-columns: minmax(0, 1fr); }
  .projeto-media { order: -1; }
  .projeto-foto { aspect-ratio: 16 / 9; }
  .projeto-listas { grid-template-columns: minmax(0, 1fr); }
  /* pilha grudada come tela demais no celular: vira lista normal */
  .projeto-card { position: static; }
}

/* ---------- SESSÃO 5 · método ---------- */
.sec-metodo { padding: var(--space-section-half) var(--shell-pad); }

.metodo-panel {
  margin: 0 auto;
  max-width: var(--shell-max);
  padding: clamp(34px, 4vw, 68px) var(--panel-pad-x);
  border-radius: var(--panel-r);
  background: var(--panel-bg);
}

.metodo-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}

/* quebra travada em duas linhas: "Do mapeamento" / "à execução." */
.metodo-title {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-h2);
  letter-spacing: -.018em;
}
.metodo-title span { display: block; }
.metodo-lead {
  margin: clamp(18px, 1.8vw, 26px) 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--ink-90);
  text-wrap: pretty;
}

/* Item 8: as tags eram uma faixa centrada no rodapé do painel; o cliente pediu
   elas "à esquerda abaixo do texto", ou seja dentro da coluna da intro. */
.metodo-tools { margin-top: clamp(30px, 3.4vw, 52px); }

.metodo-tags-label {
  margin: 0 0 clamp(14px, 1.4vw, 20px);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-68);
}

/* fileira única no fim da seção; wrap só quando a largura apertar */
.metodo-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 9px;
  margin: 0; padding: 0;
}
/* só contorno; no hover preenche malva sólido (pedido explícito do item 8) */
.metodo-tags li {
  display: grid; place-items: center;
  padding: 9px 15px;
  border-radius: var(--radius-pill);
  background: transparent;
  box-shadow: inset 0 0 0 1.2px var(--ink-34);
  color: var(--ink);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.metodo-tags li:hover {
  background: var(--surface-panel-brand);
  box-shadow: inset 0 0 0 1.2px var(--surface-panel-brand);
}

/* passos: sanfona - títulos grandes clipados; hover/foco abre o detalhe */
.metodo-passos { list-style: none; margin: 0; padding: 0; }

.metodo-passo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(14px, 1.6vw, 26px);
  padding: clamp(10px, 1.1vw, 16px) 0;
  border-top: 1px solid var(--ink-22);
  cursor: pointer;
}
.metodo-passo:first-child { border-top: 0; padding-top: 0; }

.passo-num {
  padding-top: .2em;
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 600;
  color: var(--ink-68);
  line-height: 1;
}

.passo-main { min-width: 0; }

/* Fechado: só a fatia SUPERIOR da palavra. Itens 7 e 8 - estava cortando pelo
   topo (align-items: flex-end mostrava a base das letras) e o cliente pediu
   "sempre deixar a parte de cima da palavra aparecendo", como na referência. */
.passo-nome {
  margin: 0;
  font-size: clamp(40px, 5.2vw, 78px);
  font-weight: 700;
  line-height: .88;
  letter-spacing: -.03em;
  /* Medido em Hanken Grotesk: o topo da maiúscula começa a .079em do alto da
     caixa e o glifo tem .721em. Com .66em fica visível (.66 - .079) / .721 =
     ~81% da letra - antes era .48em, ou 55%, e o cliente achou cortado demais. */
  height: .66em;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  transition: height var(--duration-slow) var(--ease-out);
}

.passo-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-slow) var(--ease-out);
}
.passo-detail-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity var(--duration-medium) var(--ease-out);
}

.passo-titulo {
  margin: clamp(10px, 1vw, 16px) 0 0;
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 700;
  line-height: 1.3;
}
.passo-desc {
  margin: 6px 0 0;
  max-width: 52ch;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.55;
  color: var(--ink-90);
  text-wrap: pretty;
}

/* aberto: título inteiro + detalhe */
.metodo-passo.is-open .passo-nome { height: .95em; }
.metodo-passo.is-open .passo-detail { grid-template-rows: 1fr; }
.metodo-passo.is-open .passo-detail-inner {
  opacity: 1;
  padding-bottom: clamp(6px, .8vw, 12px);
}

@media (max-width: 900px) {
  .metodo-grid { grid-template-columns: minmax(0, 1fr); }
  /* no mobile a sanfona por hover some: todos abertos, leitura direta */
  .passo-nome {
    height: auto;
    align-items: flex-start;
  }
  .passo-detail { grid-template-rows: 1fr; }
  .passo-detail-inner { opacity: 1; padding-bottom: clamp(6px, .8vw, 12px); }
  .metodo-passo { cursor: default; }
}

/* ---------- SESSÃO 6 · resultados ---------- */
.sec-result { padding: var(--space-section-half) var(--shell-pad); }

.result-head { margin: 0 auto clamp(38px, 4.4vw, 70px); max-width: var(--shell-max); }
.result-title {
  margin: 0;
  max-width: 30ch;
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-h2);
  letter-spacing: -.018em;
}

/* Bento em xadrez, 4 colunas × 2 faixas (itens 9 e 10 - o cliente mandou uma
   referência com seis caixas de texto alternando as cores e riscou as duas
   fotos e todos os selos com o "e"):
   faixa 1: escuro | claro largo | escuro
   faixa 2: claro  | escuro      | claro largo
   O recorte é sempre o inferior-direito e só as caixas escuras o carregam. */
.result-bento {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: var(--shell-max);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(clamp(176px, 15.5vw, 232px), auto);
  gap: var(--bento-gap);
}
.result-span-1 { grid-column: span 1; }
.result-span-2 { grid-column: span 2; }

.result-card {
  position: relative;
  display: grid; place-items: center;
  padding: clamp(22px, 2.4vw, 36px);
  border-radius: var(--bento-r);
  background: var(--surface-elevated);
  color: var(--ink);
}
.result-card-escuro { background: var(--ink); color: var(--primitive-cinza); }

.result-texto {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(17px, 1.55vw, 24px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.014em;
  text-align: center;
  text-wrap: balance;
}
.result-span-2 .result-texto {
  max-width: 22ch;
  font-size: clamp(21px, 2.1vw, 31px);
}

/* --- recorte côncavo no canto inferior-direito (componente) ---
   Um quadrado preenchido com o fundo da SESSÃO morde o canto do card; os dois
   pseudo-elementos devolvem o filete côncavo nas junções com as bordas. Cada
   componente calibra o tamanho pelos três custom properties abaixo; o padrão é
   a escala do bento de resultados. */
.cut-br {
  --cut-size: var(--bento-cut);
  --cut-fillet: var(--bento-fillet);
  --cut-selo: var(--bento-selo);
  position: relative;
  border-bottom-right-radius: 0;
  padding-bottom: calc(var(--cut-size) * .45);
}
.cut-br .cut {
  position: absolute;
  right: 0; bottom: 0;
  display: grid; place-items: center;
  width: var(--cut-size); height: var(--cut-size);
  background: var(--sec-bg);
  border-top-left-radius: var(--cut-fillet);
}
.cut-br .cut::before, .cut-br .cut::after {
  content: ""; position: absolute;
  width: var(--cut-fillet); height: var(--cut-fillet);
  background: radial-gradient(circle at 0 0,
    transparent calc(var(--cut-fillet) - .5px),
    var(--sec-bg) var(--cut-fillet));
}
.cut-br .cut::before { right: 100%; bottom: 0; }
.cut-br .cut::after  { right: 0; bottom: 100%; }

/* selo dentro do recorte: anel fino com a seta diagonal */
.cut-seta {
  display: grid; place-items: center;
  width: var(--cut-selo); height: var(--cut-selo);
  border-radius: 50%;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.4px var(--ink-34);
}
.cut-seta svg { width: 42%; height: 42%; stroke-width: 2; }

@media (max-width: 900px) {
  .result-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(clamp(150px, 34vw, 200px), auto);
  }
  .result-span-2 { grid-column: span 2; }
}

@media (max-width: 560px) {
  .result-bento { grid-template-columns: minmax(0, 1fr); }
  .result-span-1, .result-span-2 { grid-column: span 1; }
}

/* ---------- SESSÃO 7 · depoimentos ---------- */
.sec-depo { padding: var(--space-section-half) var(--shell-pad); }

.depo-grid {
  display: grid;
  grid-template-columns: minmax(0, .5fr) minmax(0, 1fr);
  gap: clamp(36px, 4.6vw, 84px);
  align-items: start;
  margin: 0 auto;
  max-width: var(--shell-max);
}

.depo-intro { display: flex; flex-direction: column; align-items: flex-start; }
/* coluna estreita fazia "que" cair sozinho numa linha: quebra travada */
.depo-title span { display: block; }
.depo-title {
  margin: 0 0 clamp(26px, 3vw, 44px);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-h2);
  letter-spacing: -.018em;
}

.depo-stage { display: grid; }
/* os slides ocupam a mesma célula: a altura é a do maior e não pula na troca */
.depo-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
  gap: var(--bento-gap);
}
.depo-slide[hidden] { display: none; }

.depo-empresa {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(24px, 3vw, 44px);
  padding: clamp(24px, 2.6vw, 40px);
  border-radius: var(--bento-r);
  background: var(--surface-elevated);
}
.depo-empresa-label {
  margin: 0;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-68);
}
/* destaque: frase destilada da própria fala do cliente, não número inventado */
.depo-empresa-destaque {
  margin: clamp(14px, 1.6vw, 22px) 0 auto;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}
.depo-logo {
  width: auto; max-width: 100%;
  max-height: clamp(38px, 3.4vw, 52px);
  object-fit: contain; object-position: left bottom;
  filter: grayscale(1);
  opacity: .9;
}

.depo-fala {
  margin: 0;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.6vw, 40px);
  border-radius: var(--bento-r);
  background: var(--surface-elevated);
}
.depo-aspas {
  font-size: clamp(40px, 4vw, 58px);
  font-weight: 700;
  line-height: .8;
  color: var(--ink);
}
.depo-fala p {
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.depo-autor {
  display: flex; flex-direction: column;
  margin-top: clamp(20px, 2.2vw, 32px);
  font-size: var(--text-small);
  line-height: 1.35;
}
.depo-autor strong { font-weight: 700; }
.depo-autor span { color: var(--ink-68); }

.depo-controles {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  margin-top: clamp(18px, 2vw, 28px);
}
.depo-dots { display: flex; gap: 8px; }
.depo-dot {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--ink-22);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.depo-dot.is-on { background: var(--ink); transform: scale(1.25); }
/* alvo de toque de 44px sem inchar o desenho */
.depo-dot { position: relative; }
.depo-dot::before { content: ""; position: absolute; inset: -17px; }

.depo-setas { display: flex; gap: 8px; }
.depo-seta {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.4px var(--ink-22);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.depo-seta:hover { background: var(--surface-elevated); box-shadow: inset 0 0 0 1.4px var(--ink-62); }

/* faixa de logos: ticker monocromático em loop */
.depo-logos {
  margin: clamp(52px, 6vw, 96px) auto 0;
  max-width: var(--shell-max);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.depo-logos-track {
  display: flex;
  width: max-content;
}
.depo-logos-set {
  list-style: none; margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
  padding-inline: clamp(20px, 2.5vw, 36px);
}
.depo-logos-set li {
  flex: none;
  display: grid;
  place-items: center;
}
.depo-logos img {
  width: auto;
  max-height: clamp(26px, 2.4vw, 36px);
  object-fit: contain;
  filter: grayscale(1) contrast(.9);
  opacity: .45;
}

@media (prefers-reduced-motion: no-preference) {
  .depo-logos-track { animation: depo-logos-scroll 48s linear infinite; }
  .depo-logos:hover .depo-logos-track { animation-play-state: paused; }
  html.is-static .depo-logos-track { animation-play-state: paused; }
  @keyframes depo-logos-scroll { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .depo-logos-track { flex-wrap: wrap; width: 100%; justify-content: center; }
  .depo-logos-set { flex-wrap: wrap; justify-content: center; }
  .depo-logos-set[aria-hidden="true"] { display: none; }
  .depo-logos {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 900px) {
  .depo-grid { grid-template-columns: minmax(0, 1fr); }
  .depo-slide { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- CTA · formulário de contato ---------- */
.sec-contato { padding: var(--space-section-half) var(--shell-pad); }

.contato-painel {
  margin: 0 auto;
  max-width: var(--shell-max);
  padding: clamp(32px, 3.8vw, 62px) var(--panel-pad-x);
  border-radius: var(--panel-r);
  background: var(--ink);
  color: var(--primitive-cinza);
}

.contato-form {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 56px);
  row-gap: clamp(20px, 2.2vw, 32px);
  align-items: start;
}

/* o intro ocupa as duas linhas da esquerda: título em cima, aviso no pé */
.contato-intro {
  grid-row: span 2;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(20px, 2.4vw, 34px);
  height: 100%;
}
.contato-title {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-h2);
  letter-spacing: -.018em;
}
.contato-title span { display: block; }

.contato-aviso {
  margin: 0;
  max-width: 46ch;
  font-size: var(--text-small);
  font-style: italic;
  line-height: 1.45;
  color: var(--light-80);
}

.contato-campo { display: flex; flex-direction: column; gap: 10px; }
.contato-campo label {
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 700;
}
.contato-campo input {
  width: 100%;
  height: clamp(52px, 4.4vw, 62px);
  padding: 0 clamp(20px, 1.8vw, 26px);
  border: 0; border-radius: var(--radius-pill);
  background: transparent;
  color: var(--primitive-cinza);
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.2vw, 18px);
  box-shadow: inset 0 0 0 1.4px var(--light-38);
  transition: box-shadow var(--duration-base) var(--ease-out);
}
.contato-campo input::placeholder { color: var(--light-58); }
.contato-campo input:hover { box-shadow: inset 0 0 0 1.4px var(--light-80); }
.contato-campo input:focus-visible {
  outline: 2px solid var(--primitive-malva);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1.4px var(--primitive-malva);
}
.contato-campo input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.6px var(--primitive-laranja); }

.contato-erro {
  margin: 0;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--primitive-laranja);
}
.contato-erro[hidden] { display: none; }

/* botão embaixo do campo de celular, alinhado à direita como na referência */
.contato-acao { grid-column: 3; display: flex; justify-content: flex-end; }

.contato-ok {
  grid-column: 2 / -1;
  margin: 0;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 600;
  color: var(--primitive-malva);
}
.contato-ok[hidden] { display: none; }

@media (max-width: 900px) {
  .contato-form { grid-template-columns: minmax(0, 1fr); }
  .contato-intro { grid-row: auto; }
  .contato-acao { grid-column: 1; justify-content: flex-start; }
  .contato-acao .btn { width: 100%; }
  .contato-ok { grid-column: 1; }
}

/* ---------- SESSÃO 8 · parceiros do seu negócio ---------- */
.sec-elevo { padding: var(--space-section-half) var(--shell-pad); }

/* Item 11, segunda passada. Com as colunas em fração elas esticavam até a
   borda e abriam um vazio de ~450px entre o texto e os cards. Agora as duas
   têm largura de conteúdo e o grupo se empacota à esquerda (justify-content),
   que é a proporção da referência: texto e fotos colados, folga sobrando à
   direita em vez de no meio. */
.elevo-grid {
  /* flex, não grid: em grid o segundo track com máximo `auto` absorve o espaço
     livre antes do justify-content agir, e as colunas voltavam a esticar até a
     borda. Com flex-grow 0 nos dois, cada um para na própria base e o grupo
     fica empacotado à esquerda. */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* a folga que sobra depois das duas colunas divide igual dos dois lados em
     vez de cair toda na direita */
  justify-content: center;
  gap: clamp(32px, 3.6vw, 64px);
  margin: 0 auto;
  max-width: var(--shell-max);
}

/* bases proporcionais, não fixas: com 30rem + 620px as duas colunas somavam
   mais que o container em 1180px e quebravam em duas linhas. Em porcentagem o
   grupo cabe numa linha só em qualquer largura, sobrando ~16% à direita. */
.elevo-intro { flex: 0 1 38%; display: flex; flex-direction: column; align-items: flex-start; }
/* quebra travada: "Parceiros do" / "seu negócio" */
.elevo-title span { display: block; }
.elevo-title {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-h2);
  letter-spacing: -.018em;
}
.elevo-lead {
  margin: clamp(20px, 2.2vw, 30px) 0 clamp(28px, 3vw, 42px);
  max-width: 48ch;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--ink-90);
  text-wrap: pretty;
}

.elevo-execs {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
  /* teto absoluto: sem ele, em telas largas os dois cards voltam a crescer
     junto com o espaço livre e a sessão desequilibra de novo */
  flex: 0 1 46%;
  max-width: 620px;
}

.exec-foto {
  position: relative;
  margin: 0 0 clamp(16px, 1.8vw, 26px);
  overflow: hidden;
  border-radius: var(--bento-r);
  background: var(--primitive-neutral-200);
  aspect-ratio: 4 / 5;
}
.exec-foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* as fotos novas do cliente já vêm recortadas em 4/5 e em P&B */
  object-position: 50% 50%;
}

/* atalho de rede no canto da foto, como a trilha de ícones da referência */
.exec-social {
  position: absolute;
  top: clamp(12px, 1.2vw, 18px); right: clamp(12px, 1.2vw, 18px);
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--surface-elevated);
  color: var(--ink);
  transition: background-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.exec-social:hover { background: var(--primitive-malva); transform: translateY(-2px); }

/* régua à esquerda do papel: título em 2 linhas, nome como headline */
.exec-papel {
  margin: 0;
  padding-left: clamp(10px, 1vw, 14px);
  border-left: 1px solid var(--ink-34);
  font-size: clamp(16px, 1.45vw, 22px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink-90);
  text-align: left;
}
.exec-papel span {
  display: block;
}
.exec-nome {
  margin: clamp(8px, .9vw, 12px) 0 0;
  font-size: clamp(21px, 2vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.exec-nome span { display: block; }

/* ecossistema */
.elevo-eco {
  margin: clamp(56px, 6.4vw, 104px) auto 0;
  max-width: var(--shell-max);
  padding-top: clamp(28px, 3.2vw, 48px);
  border-top: 1px solid var(--ink-22);
}
.eco-label {
  margin: 0 0 clamp(22px, 2.6vw, 38px);
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 600;
  color: var(--ink-90);
}
.eco-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 44px);
}
/* caixas de contorno, como na montagem que o cliente mandou junto do item 11 */
.eco-lista li {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(6px, .7vw, 10px);
  min-height: clamp(96px, 8.4vw, 128px);
  padding: clamp(14px, 1.4vw, 22px) clamp(10px, 1vw, 16px);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1.2px var(--ink-34);
  text-align: center;
}
.eco-nome {
  font-size: clamp(20px, 1.9vw, 28px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.024em;
}
.eco-tipo {
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-68);
}

@media (max-width: 900px) {
  .elevo-intro, .elevo-execs { flex-basis: 100%; }
  .eco-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- SESSÃO 9 · na mídia (carrossel de uma linha) ---------- */
.sec-midia { padding: var(--space-section-half) var(--shell-pad); }
.midia-head { margin: 0 auto clamp(28px, 3.2vw, 48px); max-width: var(--shell-max); }
.midia-title {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-h2);
  letter-spacing: -.018em;
}

/* Item 12: a seta ficava absoluta em cima do último card e sumia no meio da
   fileira. Agora o carrossel é uma grade e ela tem coluna própria, fora dos
   cards, como na referência. Os pontos ficam embaixo, alinhados à esquerda. */
.midia-carrossel {
  margin: 0 auto;
  max-width: var(--shell-max);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(20px, 2.8vw, 48px);
  align-items: center;
}
.midia-track { grid-column: 1; grid-row: 1; }
.midia-dots  { grid-column: 1; grid-row: 2; }

/* rolagem nativa + snap: funciona sem JS, no toque e no teclado */
.midia-track {
  list-style: none; margin: 0; padding: 4px 0;
  display: flex; gap: var(--bento-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.midia-track::-webkit-scrollbar { display: none; }
.midia-slide {
  /* "essa sessão está fora de proporção": os cards eram largos demais e a
     fileira só mostrava três e meio */
  flex: 0 0 clamp(232px, 21vw, 306px);
  scroll-snap-align: start;
}

.midia-card {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  gap: clamp(10px, 1vw, 15px);
  padding: clamp(18px, 1.8vw, 26px);
  border-radius: var(--bento-r);
  /* recorte menor que o do bento: o card de mídia é mais estreito */
  --cut-selo: 38px;
  --cut-size: 50px;
  --cut-fillet: 14px;
  /* o .45 do recorte basta nos resultados, onde o texto é curto e centrado;
     aqui a chamada mais longa (Novo Varejo) descia por baixo da mordida */
  padding-bottom: calc(var(--cut-size) + clamp(8px, .9vw, 14px));
  background: var(--surface-elevated);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
/* sem sombra no hover: ela segue a caixa do card, que continua retangular por
   baixo do recorte, e denunciava o canto que a mordida finge não existir.
   O feedback fica no lift + o selo virando malva. */
.midia-card:hover { transform: translateY(-3px); }

/* logos vêm em proporções muito diferentes: a altura fixa é o que alinha.
   As quadradas ganham mais altura, senão viram um selinho ilegível.
   Escala ~1.7x em relação ao clamp anterior (34–48px) para leitura clara. */
.midia-logo {
  display: flex; align-items: center;
  height: clamp(44px, 4.2vw, 62px);
  margin-bottom: clamp(6px, .8vw, 11px);
}
.midia-logo img {
  width: auto; max-width: 92%; max-height: 100%;
  object-fit: contain; object-position: left center;
  filter: grayscale(1);
  opacity: .82;
}
.midia-logo-quad img { max-height: 140%; }

.midia-veiculo {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink-68);
}
.midia-chamada {
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.012em;
  text-wrap: pretty;
}

/* a seta agora mora dentro do recorte côncavo (.cut-br), como nos resultados;
   só o laranja e a transição de hover são próprios da mídia */
.midia-seta {
  color: var(--primitive-laranja);
  box-shadow: inset 0 0 0 1.3px var(--ink-22);
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.midia-seta svg { width: 45%; height: 45%; }
.midia-card:hover .midia-seta { background: var(--primitive-malva); color: var(--ink); transform: translate(2px, -2px); }

/* botão de avanço na borda direita, como na montagem */
.midia-avanca {
  grid-column: 2; grid-row: 1;
  display: grid; place-items: center;
  /* maior que antes: na referência a seta é o segundo elemento mais forte da
     sessão, depois do título */
  width: clamp(56px, 5vw, 76px); height: clamp(56px, 5vw, 76px);
  border: 0; border-radius: 50%;
  background: var(--sec-bg);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.4px var(--ink-34);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.midia-avanca:hover { background: var(--primitive-malva); box-shadow: inset 0 0 0 1.4px var(--primitive-malva); }

.midia-dots {
  display: flex; justify-content: flex-start; gap: 8px;
  margin-top: clamp(20px, 2.2vw, 30px);
}
.midia-dot {
  position: relative;
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--ink-22);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.midia-dot::before { content: ""; position: absolute; inset: -17px; }
.midia-dot.is-on { background: var(--ink); transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) { .midia-track { scroll-behavior: auto; } }

/* no toque a rolagem é o gesto: a seta some e a fileira usa a largura inteira */
@media (max-width: 900px) {
  .midia-carrossel { grid-template-columns: minmax(0, 1fr); }
  .midia-avanca { display: none; }
  .midia-dots { justify-content: center; }
}

/* ---------- SESSÃO 10 · FAQ ---------- */
.sec-faq { padding: var(--space-section-half) var(--shell-pad); }
.faq-head { margin: 0 auto clamp(28px, 3.2vw, 48px); max-width: var(--shell-max); }
.faq-title {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-h2);
  letter-spacing: -.018em;
}

.faq-lista {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: var(--shell-max);
  /* A coluna do número e a folga viram tokens porque a resposta precisa do
     mesmo recuo da pergunta. Antes a margem da resposta estimava a largura do
     número em `font-size * 1.8` e errava por 9 a 11px. */
  --faq-num-w: clamp(16px, 1.35vw, 20px);
  --faq-gap: clamp(16px, 2vw, 34px);
}

/* <details> nativo: abre sem JS e já vem com a semântica de expandir */
.faq-item { border-bottom: 1px solid var(--ink-22); }
.faq-item:first-of-type { border-top: 1px solid var(--ink-22); }

.faq-item summary {
  display: grid;
  grid-template-columns: var(--faq-num-w) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--faq-gap);
  /* acompanha a pergunta menor: 28px de respiro sobravam num texto de 20px */
  padding: clamp(16px, 1.7vw, 24px) 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.faq-num {
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 700;
  color: var(--primitive-malva);
  /* dígitos de largura fixa: 01 e 06 ocupam a mesma coluna */
  font-variant-numeric: tabular-nums;
}
.faq-pergunta {
  /* mesma escala de .desafio-texto: a pergunta estava em 23px, contra 17-20px
     do resto do corpo da página, e destoava do padrão */
  font-size: clamp(16px, 1.45vw, 20px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.012em;
  text-wrap: pretty;
}
.faq-seta {
  flex: none;
  display: grid; place-items: center;
  width: clamp(30px, 2.6vw, 38px); height: clamp(30px, 2.6vw, 38px);
  color: var(--primitive-laranja);
  transition: transform var(--duration-medium) var(--ease-out);
}
.faq-seta svg { width: 100%; height: 100%; stroke-width: 2; }
.faq-item[open] .faq-seta { transform: rotate(135deg); }
.faq-item summary:hover .faq-seta { transform: translate(2px, -2px); }
.faq-item[open] summary:hover .faq-seta { transform: rotate(135deg); }

.faq-resposta {
  margin: 0;
  padding: 0 0 clamp(22px, 2.4vw, 32px) 0;
  max-width: 78ch;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--ink-90);
  text-wrap: pretty;
}
/* alinha a resposta com a pergunta, não com o número */
@media (min-width: 561px) {
  .faq-resposta { margin-left: calc(var(--faq-num-w) + var(--faq-gap)); }
}

@media (prefers-reduced-motion: reduce) { .faq-seta { transition: none; } }

/* ---------- SESSÃO 11 · próximo passo ---------- */
.sec-final {
  position: relative;
  padding: clamp(90px, 11vw, 190px) var(--shell-pad) clamp(150px, 15vw, 250px);
  text-align: center;
  color: var(--primitive-cinza);
  /* mesh da marca em CSS: laranja, malva e roxo, sem peso de imagem */
  background:
    radial-gradient(115% 95% at 6% 2%, var(--primitive-laranja) 0%, transparent 58%),
    radial-gradient(100% 105% at 100% 46%, var(--primitive-malva) 0%, transparent 72%),
    radial-gradient(85% 75% at 2% 104%, var(--primitive-roxo) 0%, transparent 62%),
    linear-gradient(115deg, var(--grad-base-quente) 0%, var(--grad-base-frio) 100%);
}

.final-conteudo { position: relative; z-index: 1; margin: 0 auto; max-width: 900px; }
.final-title {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-h2);
  letter-spacing: -.018em;
}
.final-title span { display: block; }
.final-lead {
  margin: clamp(18px, 2vw, 28px) auto 0;
  max-width: 44ch;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--light-92);
  text-wrap: pretty;
}
.final-ctas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4);
  margin-top: clamp(30px, 3.4vw, 48px);
}

/* mordida escura na base: é por onde o rodapé sobe.
   Mesma receita de 3 arcos, virada de cabeça pra baixo. Aqui o "buraco" dos
   filetes é transparente em vez de colorido, então quem aparece é o gradiente. */
.final-recorte {
  position: absolute; z-index: 0;
  left: var(--rodape-inset); right: var(--rodape-inset); bottom: 0;
  height: var(--rodape-aba);
  border-top-left-radius: var(--rodape-r);
  border-top-right-radius: var(--rodape-r);
  background: var(--ink);
  pointer-events: none;
}
/* filete ELÍPTICO: na montagem a curva abre bem mais na horizontal do que
   desce (~190px por ~115px). Um arco circular fica curto e vira bolha. */
/* altura = aba menos o raio do canto: o filete começa onde a curva do canto
   termina. Se for mais alto, sobra uma agulha escura acima da curva. */
.final-recorte::before, .final-recorte::after {
  content: ""; position: absolute; bottom: 0;
  width: var(--rodape-fillet-x);
  height: calc(var(--rodape-aba) - var(--rodape-r));
}
.final-recorte::before {
  right: 100%;
  background: radial-gradient(var(--rodape-fillet-x) calc(var(--rodape-aba) - var(--rodape-r)) at 0 0,
    transparent 99.5%, var(--ink) 100%);
}
.final-recorte::after {
  left: 100%;
  background: radial-gradient(var(--rodape-fillet-x) calc(var(--rodape-aba) - var(--rodape-r)) at 100% 0,
    transparent 99.5%, var(--ink) 100%);
}

/* ---------- SESSÃO 12 · rodapé ---------- */
.rodape {
  padding: clamp(30px, 3.4vw, 54px) var(--shell-pad) clamp(26px, 2.6vw, 40px);
  background: var(--ink);
  color: var(--primitive-cinza);
}

/* Item 13: "o rodapé também está fora do grid e da proporção". As colunas eram
   1.2/.7/1/auto e o conteúdo de cada uma ocupava um terço da própria coluna -
   nav e contato acabavam boiando no meio do vazio. Três colunas iguais fixam
   os dois em posições de grade; o canto continua com largura própria. */
.rodape-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start;
  margin: 0 auto;
  max-width: var(--shell-max);
}

/* proporção: a marca era quase o dobro do corpo do menu ao lado */
.rodape-marca img { width: clamp(132px, 10.5vw, 168px); height: auto; }
.rodape-marca p {
  margin: clamp(18px, 2vw, 28px) 0 0;
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 600;
  line-height: 1.35;
}

.rodape-nav, .rodape-contato { display: flex; flex-direction: column; gap: 2px; }
/* padding vertical leva o alvo de 23px para 29px: abaixo de 24px reprova
   o mínimo de tamanho de alvo do WCAG 2.5.8 */
.rodape-nav a, .rodape-contato a, .rodape-pendente {
  padding: 3px 0;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.5;
  color: var(--primitive-cinza);
  text-decoration: none;
}
.rodape-nav a:hover, .rodape-contato a:hover { color: var(--primitive-malva); }

/* item sem destino ainda: texto puro, sem cara de link que não leva a lugar nenhum */
.rodape-pendente, .menu-pendente { color: var(--light-58); cursor: default; }

.rodape-redes { display: flex; flex-direction: column; gap: 7px; margin: clamp(18px, 2vw, 26px) 0 0; }
/* canto direito: botão de subir discreto + símbolo da marca */
/* canto alinhado ao topo junto com as outras colunas: centralizado, o símbolo
   sobrava abaixo da última linha do contato e quebrava a linha de base */
.rodape-canto {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  align-self: start;
}
.rodape-simbolo { width: clamp(30px, 2.6vw, 40px); height: auto; }

.rodape-subir {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--light-80);
  box-shadow: inset 0 0 0 1.3px var(--light-28);
  transition: color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.rodape-subir:hover {
  color: var(--primitive-cinza);
  box-shadow: inset 0 0 0 1.3px var(--light-80);
  transform: translateY(-2px);
}

.rodape-legal {
  display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 2vw, 34px);
  margin: clamp(30px, 3.4vw, 52px) auto 0;
  padding-top: clamp(20px, 2.2vw, 30px);
  max-width: var(--shell-max);
  border-top: 1px solid var(--light-28);
  font-size: var(--text-small);
  color: var(--light-80);
}
/* mesmo motivo dos links da grade: 23px reprova o mínimo de alvo do WCAG */
.rodape-legal a { padding: 3px 0; color: inherit; text-decoration: none; }
.rodape-legal a:hover { color: var(--primitive-malva); }

.menu-pendente {
  display: block;
  padding: clamp(4px, .8vw, 10px) 0;
  font-size: clamp(38px, 7vw, 96px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: var(--tracking-tight);
}

@media (max-width: 900px) {
  .rodape-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape-marca { grid-column: span 2; }
  .rodape-canto { grid-column: span 2; flex-direction: row; justify-content: flex-end; }
  .rodape-simbolo { display: none; }
}

/* em duas colunas o e-mail (166px) não cabe na coluna (146px) e era cortado */
@media (max-width: 620px) {
  .rodape-grid { grid-template-columns: minmax(0, 1fr); }
  .rodape-marca, .rodape-canto { grid-column: span 1; }
}

/* ---------- entrada ---------- */
.anim { animation: rise var(--duration-slow) var(--ease-out) both; }
.anim-1 { animation-delay: 80ms; }
.anim-2 { animation-delay: 200ms; }
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ---------- responsivo ---------- */
@media (max-width: 1080px) {
  .topbar-line { display: none; }
  .topbar-bar { grid-template-columns: auto auto; justify-content: space-between; }
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  /* empilhado não existe "vazio central": a foto volta a ter o canto inteiro */
  .panel-photo {
    min-height: min(64dvh, 520px);
    border-bottom-left-radius: var(--panel-r);
  }
  .photo-cut, .hero-cue { display: none; }
  .prova-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desafios-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* tags viram uma régua no pé da foto, acima do slot do botão —
     sem bob: régua estática não deve tremer */
  .photo-tags {
    position: absolute; z-index: 2;
    inset: auto clamp(12px, 3vw, 20px) calc(var(--slot-h) + 14px);
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .photo-tag {
    position: static; inset: auto;
    animation: none;
  }
}

@media (max-width: 560px) {
  /* sem espaço para a caixa de duas linhas; o CTA da hero cobre a conversão */
  .topbar-cta { display: none; }
  .topbar-bar { padding-right: 0; }
  .panel-title { max-width: none; }
  .panel-ctas .btn { flex: 1 1 100%; }
}

/* ---------- preferências ---------- */
@media (prefers-reduced-motion: reduce) {
  /* nenhum transform de hover sobra: os das seções novas não estavam cobertos */
  .midia-card:hover, .exec-social:hover, .who-card:hover,
  .midia-card:hover .midia-seta, .who-card:hover .who-badge,
  .desafio-box:hover { transform: none; }
  .midia-card, .exec-social, .who-card, .midia-seta, .who-badge,
  .result-card, .depo-seta, .midia-avanca, .rodape-subir,
  .passo-nome, .passo-detail, .passo-detail-inner { transition: none; }
  .rodape-subir:hover { transform: none; }
  .anim, .hero-cue, .photo-tag { animation: none; }
  .menu-panel:not([hidden]) { animation: none; }
  .btn, .topbar-menu, .topbar-menu > svg, .menu-nav a, .menu-nav a span { transition: none; }
  .btn:hover { transform: none; }
}

/* stills de QA: html.is-static congela tudo (ver memória do projeto) */
html.is-static *, html.is-static *::before, html.is-static *::after {
  animation: none !important;
  transition: none !important;
}