/* ═══════════════════════════════════════════════════════════
   CENNO HUB · Método CASA
   Montserrat (a máquina) + Instrument Serif itálico (a pessoa)
   Fundo #F2EDE3 = cor exata do fundo da foto do hero,
   para que o objeto flutue sem moldura.
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: Montserrat;
  src: url('fonts/Montserrat-var-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/InstrumentSerif-Italic-latin.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  --paper:  #F2EDE3;
  --ink:    #14170E;
  --ink-2:  #1D2116;
  --orange:     #F87000;   /* a marca: botões, faixas, elementos gráficos */
  --orange-txt: #CC5C00;   /* texto grande sobre papel (3.5:1) */
  --orange-mid: #AD4E00;   /* texto miúdo sobre papel (4.6:1) */
  /* três verdes da mesma matiz: o da marca, o legível em texto miúdo
     sobre papel, e o de área grande com texto claro em cima */
  --green:      #008810;
  --green-txt:  #007C0E;
  --green-area: #00660C;
  --linha:  rgba(20, 23, 14, .15);
  --linha-clara: rgba(242, 237, 227, .2);
  --suave:  rgba(20, 23, 14, .62);
  --suave-claro: rgba(242, 237, 227, .66);
  --lado:   clamp(1.25rem, 5.5vw, 7rem);
  --mola:   cubic-bezier(.2, .9, .25, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  scroll-padding-top: 5rem;   /* o cabeçalho fixo não cobre o topo da seção */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 Montserrat, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;              /* clip, não hidden: não quebra position:sticky */
}

a { color: inherit; }

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

.skip {
  position: fixed; z-index: 60; top: -6rem; left: 1rem;
  background: var(--orange); color: var(--ink);
  padding: .85rem 1.2rem; font-weight: 800; text-decoration: none;
}
.skip:focus { top: 1rem; }

/* ─────────── tipografia base ─────────── */

h1, h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.042em;
  line-height: .9;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 4.7vw, 5rem); }
h2 { font-size: clamp(2rem, 4.4vw, 4.1rem); }

/* a voz humana: serifa itálica */
h1 em, h2 em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  letter-spacing: -.012em;
  color: var(--orange-txt);
}
/* sobre fundo escuro o laranja da marca já contrasta de sobra */
.escuro h2 em, .conversa h2 em { color: var(--orange); }

.kicker {
  margin: 0 0 1.15rem;
  font-size: .69rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--green-txt);
}
.escuro .kicker { color: #55C264; }

.chamada {
  max-width: 40ch;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.5;
  color: var(--suave);
}
.escuro .chamada { color: var(--suave-claro); }
/* a mesma rgba(20,23,14,.62) dá 6,7:1 sobre o papel e só 3,3:1 sobre o
   laranja da seção do Método CASA: ali o texto precisa de mais tinta */
.casa .chamada { color: rgba(20, 23, 14, .82); }

.grifo {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: 1.42em; line-height: 1.28;
  letter-spacing: -.012em;
  color: var(--ink);
}
.escuro .grifo { color: var(--paper); }

.miudo { font-size: .78rem; color: var(--suave); }
.escuro .miudo { color: var(--suave-claro); }

.escuro { background: var(--ink); color: var(--paper); }

/* ─────────── botão ─────────── */

.botao {
  display: inline-flex; align-items: center; gap: .7rem;
  background: var(--orange); color: var(--ink);
  padding: 1.05rem 1.6rem;
  font-size: .88rem; font-weight: 800; letter-spacing: -.01em;
  text-decoration: none;
  transition: transform .25s var(--mola), background .25s var(--mola);
}
.botao span { transition: transform .3s var(--mola); }
.botao:hover { background: #FF8417; transform: translateY(-2px); }
.botao:hover span { transform: translateX(5px); }
.botao.grande { padding: 1.3rem 2rem; font-size: 1rem; }
/* o botão repetido no meio da página (Governança e Método CASA): eram
   12.000 px sem nenhuma ação entre o hero e o fim */
.cta-meio { margin: clamp(2.5rem, 5vw, 4rem) 0 0; }

/* ─────────── cabeçalho ─────────── */

.topo {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding: .62rem var(--lado);
  background: rgba(242, 237, 227, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linha);
  transition: background .45s var(--mola), border-color .45s var(--mola), color .45s var(--mola);
}
/* atravessando uma seção escura, o cabeçalho acompanha */
.topo.inverso {
  background: rgba(20, 23, 14, .82);
  border-bottom-color: var(--linha-clara);
  color: var(--paper);
}
.topo.inverso .marca b { color: #55C264; }
.topo.inverso .marca b i,
.rodape .marca b i { color: var(--orange); }
.topo.inverso nav a { color: var(--suave-claro); }
.topo.inverso nav a:hover { color: var(--orange); }
.marca {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; flex: 0 0 auto;
}
.marca svg { width: 2.5rem; height: auto; display: block; }
.marca b {
  font-size: .95rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--green-txt);
}
.marca b i { font-style: normal; color: var(--orange-mid); }

.topo nav { display: flex; gap: 1.9rem; margin-left: auto; }
.topo nav a {
  font-size: .78rem; font-weight: 700; text-decoration: none;
  color: var(--suave);
  transition: color .2s;
}
.topo nav a:hover { color: var(--orange); }

/* Botão de verdade, e vai direto para o WhatsApp (pedido dele em 16/09):
   antes era um texto sublinhado que só rolava até a última seção. É o único
   apelo visível nas 11 dobras seguintes, porque o cabeçalho é fixo. O padding
   vertical do .topo caiu de .95rem para .62rem para a barra não engordar. */
.topo-cta {
  position: relative;
  display: inline-flex; align-items: center;
  /* verde do WhatsApp (pedido dele em 16/09): o botão diz o canal antes de
     ser lido. Texto em tinta, não branco: branco sobre este verde dá 1,6:1 e
     reprova; com a tinta da página dá 9,1:1 */
  background: #25D366; color: var(--ink);
  padding: .55rem .95rem;
  font-size: .78rem; font-weight: 800; text-decoration: none;
  transition: transform .25s var(--mola), background .25s var(--mola);
}
.topo-cta:hover { background: #34E07A; transform: translateY(-2px); }
/* sobre a seção escura o cabeçalho vira papel; o texto do botão continua tinta,
   senão fica papel sobre laranja (2:1, reprovado) */
.topo.inverso .topo-cta { color: var(--ink); }
/* área de toque: o botão tem 37 px de altura e o dedo precisa de 44 */
.topo-cta::before { content: ""; position: absolute; inset: -4px -2px; }
.topo-cta span { white-space: nowrap; }
/* a 390 px o nome por extenso quebrava em duas linhas e engordava a barra de
   58 para 77 px: ali o botão diz a ação e o canal, e a marca fica na logo */
.cta-curto { display: none; }

/* ─────────── hero ─────────── */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  /* embaixo, a reserva da nota "01": ela é absoluta a clamp(1rem, 3vh, 2.2rem)
     do chão e tem ~2.1rem de altura. Com 3rem de padding, em tela baixa
     (1536×730, 1366×657) a coluna de texto descia até em cima dela e as duas
     linhas se embolavam. A soma garante ~2rem de folga em qualquer altura. */
  padding: clamp(3.5rem, 8vh, 7rem) var(--lado) calc(clamp(1rem, 3vh, 2.2rem) + 4.2rem);
  min-height: min(88vh, 60rem);
}
.hero-texto { position: relative; z-index: 2; max-width: 40rem; }
.olho {
  margin: 0 0 1.4rem;
  font-size: .69rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--green-txt);
}
.hero h1 { margin-bottom: 1.7rem; }
.hero .chamada { margin: 0 0 2.2rem; }
.rodape-hero { margin: 1.1rem 0 0; font-size: .74rem; color: var(--suave); }

/* o objeto flutua: o fundo da foto é a cor da página */
.hero-objeto {
  position: relative; z-index: 1;
  margin: 0;
  margin-right: calc(var(--lado) * -1);
  animation: flutua 9s ease-in-out infinite;
}
.hero-objeto .casa-base {
  display: block; width: 100%; height: auto;
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
  transition: transform .8s var(--mola);
}
@keyframes flutua {
  0%, 100% { transform: translateY(0)   rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-.5deg); }
}

.hero-nota {
  position: absolute; left: var(--lado); bottom: clamp(1rem, 3vh, 2.2rem);
  display: flex; align-items: baseline; gap: .8rem;
  margin: 0; max-width: 15rem;
  font-size: .76rem; font-weight: 700; line-height: 1.35;
  color: var(--suave);
}
.hero-nota span {
  font-size: .66rem; font-weight: 800; letter-spacing: .1em;
  color: var(--orange-mid);
}

/* ─────────── para quem é ───────────
   Duas colunas separadas por um fio, sem caixa nem cor de fundo: o bloco
   filtra quem continua lendo, e não compete com o hero em cima nem com a
   faixa de logos embaixo. O vão do fio é o mesmo dos dois lados, então ele
   nasce centrado entre os dois textos (gap de um lado, padding do outro). */
.filtro {
  --vao: clamp(1.4rem, 3.2vw, 3rem);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--vao);
  padding: clamp(1.4rem, 2.5vw, 2rem) var(--lado) clamp(2rem, 3.5vw, 2.8rem);
}
.filtro-lado p { margin: 0; }
.filtro-lado p + p {
  margin-top: .45rem;
  max-width: 34ch;
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  line-height: 1.5;
}
.filtro-rot {
  font-size: .69rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--green-txt);
}
.filtro-nao {
  border-left: 1px solid var(--linha);
  padding-left: var(--vao);
}
.filtro-nao .filtro-rot { color: var(--suave); }

/* ─────────── quem já confiou ───────────
   Logos dos clientes que o time da Cenoura Hub já atendeu, coloridos
   (decisão do Junior em 15/09; a versão em tinta continua disponível em
   _ferramentas/logos_tinta.py, basta rodar e publicar). Cópias
   iguais da lista emendadas; cada uma anda uma largura mais um vão, e o
   laço fecha sem salto. Para no hover, e o logo sob o mouse acende. */
.confianca {
  --vao: clamp(2.6rem, 6vw, 5.5rem);
  padding: clamp(1.8rem, 3.5vw, 2.8rem) var(--lado) clamp(2rem, 3.5vw, 3rem);
  border-top: 1px solid var(--linha);
}
.confianca .kicker { margin-bottom: clamp(1.1rem, 2vw, 1.5rem); }
/* quem é atendido por quem: "nosso time" sozinho podia ser lido como
   carteira da CENNO HUB, que ainda não tem cliente (achado B2) */
.confianca-pe {
  margin: clamp(1rem, 2vw, 1.4rem) 0 0;
  font-size: .78rem; color: var(--suave);
}
.confianca-trilho {
  display: flex; gap: var(--vao); overflow: hidden;
  margin: 0 calc(var(--lado) * -1); padding: 0 var(--lado);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.confianca-lista {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--vao);
  list-style: none; margin: 0; padding: 0;
  animation: desfila 38s linear infinite;
}
.confianca-trilho:hover .confianca-lista { animation-play-state: paused; }
.confianca-lista img {
  /* os mínimos são o celular (pedido dele: "um pouquinho maior só no
     mobile"); no desktop os valores de 3vw e 4vw não mudaram */
  display: block; height: clamp(2.5rem, 3vw, 2.75rem); width: auto;
  /* o teto de largura segura os logotipos largos (PetWag): na mesma altura
     dos selos eles pesavam o dobro na faixa */
  max-width: clamp(8.5rem, 11vw, 9.5rem); object-fit: contain;
}
.confianca-lista .alto img { height: clamp(3.4rem, 4vw, 3.6rem); }
@keyframes desfila { to { transform: translateX(calc(-100% - var(--vao))); } }
@media (prefers-reduced-motion: reduce) {
  .confianca-lista { animation: none; flex-wrap: wrap; }
  .confianca-lista[aria-hidden] { display: none; }
  .confianca-trilho { -webkit-mask-image: none; mask-image: none; }
}

/* ─────────── marquee ─────────── */

.faixa {
  overflow: hidden;
  background: var(--ink); color: var(--paper);
  padding: .8rem 0;
  border-block: 1px solid var(--ink);
}
.faixa-trilho {
  display: flex; width: max-content;
  animation: corre 34s linear infinite;
}
.faixa-trilho span {
  padding-right: 2.2rem; white-space: nowrap;
  font-size: clamp(1.15rem, 2.4vw, 2rem); font-weight: 800;
  letter-spacing: -.035em; text-transform: uppercase;
}
.faixa-trilho i { font-style: normal; color: var(--orange); }
@keyframes corre { to { transform: translateX(-33.333%); } }

/* ─────────── tensão ─────────── */

.tensao { padding: clamp(5rem, 8vw, 7rem) var(--lado); }

/* o cabo de guerra: as duas falas puxam para lados opostos, e a corda
   entre elas fica esticada — até arrebentar. A linha de 2 px é a base:
   ela vale sem JS, sem vídeo e com `prefers-reduced-motion`. */
/* O topo é uma grade de duas colunas em que o h2 entra por `display: contents`:
   marketing em cima à esquerda, corda no meio, comercial embaixo à direita, e a
   explicação ocupa o quadrante que ficava vazio à esquerda do comercial,
   alinhada pela base. O grifo fecha centrado, entre as duas pontas, como diz
   o próprio texto. Antes os dois parágrafos sobravam soltos embaixo (15/09). */
.tensao-topo {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 5vw, 5rem);
  grid-template-areas: "mkt mkt" "corda corda" "explica com" "grifo grifo";
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}
/* só este h2 cresce (pedido dele); o tamanho global dos h2 fica */
.tensao h2 { display: contents; font-size: clamp(2rem, 5vw, 4.8rem); }
.tensao h2 > span:first-child { grid-area: mkt; }
.tensao h2 em { grid-area: com; justify-self: end; text-align: right; }
.tensao-explica {
  grid-area: explica; align-self: end;
  margin: 0; max-width: 36ch;
  font-size: 1.05rem; line-height: 1.55; color: var(--suave-claro);
}
.tensao .grifo {
  grid-area: grifo; justify-self: center; text-align: center;
  max-width: 32ch; margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
}
.tensao h2 .corda {
  grid-area: corda;
  display: block; height: 2px; margin: .38em 0;
  background: linear-gradient(90deg,
    var(--orange) 0 12%, var(--linha-clara) 12% 88%, #55C264 88% 100%);
  transform: scaleX(var(--tensao, .55));
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(.16, 1, .3, 1);
}
.tensao h2 .corda.esticada { --tensao: 1; }

/* Com JS, a linha vira o miolo de uma caixa da altura do vídeo: o espaço
   já nasce reservado, senão a página pula 400 px quando a corda entra. */
html.js .tensao h2 .corda {
  position: relative; height: auto; aspect-ratio: 800 / 264;
  /* o vídeo tem 800 px de largura; esticado de lado a lado da tela passava
     de 1.600 px e borrava. Fica no tamanho nativo, centrado entre as falas */
  width: min(100%, 57rem); justify-self: center;
  background: none; transform: none;
  display: grid; place-items: center;
}
/* A linha só aparece quando não há corda para mostrar. Com JS e movimento
   normal ela fica invisível desde o começo: o Junior viu o fio surgindo antes
   da corda e pediu para tirar (15/09). Sem JS, sem vídeo ou com movimento
   reduzido a corda nunca entra, e aí a linha é a própria imagem da tensão. */
html.js .tensao h2 .corda::before { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.js .tensao h2 .corda::before { opacity: 1; }
}
html.js .tensao h2 .corda::before {
  content: ""; width: 100%; height: 2px;
  background: linear-gradient(90deg,
    var(--orange) 0 12%, var(--linha-clara) 12% 88%, #55C264 88% 100%);
  transform: scaleX(var(--tensao, .55));
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(.16, 1, .3, 1), opacity .5s ease;
}
/* A entrada é feita no JS, com a Web Animations API, e não por `transition`:
   num <video> a transição de `opacity` simplesmente NÃO roda aqui — medido,
   `getAnimations()` volta vazio e o valor pula de 0 a 1 num quadro só. Pior,
   como o vídeo já estava tocando por baixo, o primeiro segundo se perdia. */
.corda-parada,
.corda-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
}
/* o vídeo por cima: quando assume, cobre a imagem e a troca não aparece */
.corda-video { z-index: 1; }
/* a linha só sai depois que a corda já está inteira na frente dela */
html.js .tensao h2 .corda.rompida::before { opacity: 0; }

.perguntas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha-clara); }
.perguntas li {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--linha-clara);
  font-size: clamp(1.15rem, 2.5vw, 2rem);
  font-weight: 700; letter-spacing: -.03em;
  display: flex; gap: 1.2rem; align-items: baseline;
}
.perguntas li::before {
  /* era um travessão; virou o ponto laranja dos selos da casa */
  content: ''; flex: 0 0 auto;
  width: .42em; height: .42em; border-radius: 99px;
  background: var(--orange);
  transform: translateY(-.06em);
}

/* ─────────── mercado e prática ───────────
   Cada linha é um par: o que a pesquisa diz, e o que foi medido numa
   operação real. A coluna da prática leva o laranja, é o dado que só a
   CENNO tem. No celular os pares empilham e cada cartão ganha o seu rótulo,
   porque o cabeçalho de coluna deixa de estar em cima dele. */
.provas { padding: clamp(5rem, 8vw, 7rem) var(--lado); }
.provas-cabeca { max-width: 54rem; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.provas-grade {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--linha);
  border: 1px solid var(--linha);
}
.provas-coluna {
  margin: 0; padding: 1.05rem 1.7rem;
  background: var(--paper);
  font-size: .7rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--suave);
}
.provas-coluna-nossa { color: var(--orange-mid); }
.prova {
  display: grid; align-content: start; gap: .7rem;
  background: var(--paper); padding: 2.2rem 1.7rem 2.4rem;
}
.prova-quem {
  display: none; margin: 0;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--suave);
}
.prova-nossa .prova-quem { color: var(--orange-mid); }
.prova-numero {
  font-size: clamp(2.6rem, 5.2vw, 4.4rem); font-weight: 800;
  letter-spacing: -.045em; line-height: 1; color: var(--ink);
}
.prova-nossa .prova-numero { color: var(--orange-txt); }
/* `.prova p` pegaria também o rótulo e o deixaria em 1rem (especificidade
   maior que `.prova-quem`), por isso o :not */
.prova > p:not(.prova-quem) { margin: 0; font-size: 1rem; line-height: 1.5; max-width: 36ch; }
.prova small { font-size: .74rem; color: var(--suave); }
/* dado de mercado sem par: ocupa a linha inteira e mostra o próprio rótulo,
   porque está embaixo das duas colunas */
.prova-sozinha { grid-column: 1 / -1; }
.prova-sozinha .prova-quem { display: block; }

/* o dado da prática que sustenta o "responde o contato na hora" */
.papeis-dado {
  max-width: 48rem; margin: 0 0 clamp(2.2rem, 4vw, 3.2rem);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.55;
  color: var(--suave);
}
.papeis-dado b { color: var(--ink); font-weight: 800; }

@media (max-width: 900px) {
  .provas-grade { grid-template-columns: 1fr; }
  .provas-coluna { display: none; }
  .prova-quem { display: block; }
}

/* ─────────── a semana ─────────── */

.rotina { padding: clamp(5rem, 8vw, 7rem) var(--lado); }
.rotina-cabeca { max-width: 54rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.rotina-cabeca h2 { margin-bottom: 1.6rem; }

.semana { max-width: 78rem; }
.semana-barra {
  height: 3px; background: var(--linha); margin-bottom: 2.6rem; overflow: hidden;
}
.semana-preenche {
  display: block; height: 100%; width: 0;
  background: var(--orange);
  transition: width .9s var(--mola);
}
.dias {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: var(--linha);
  border: 1px solid var(--linha);
}
.dias li {
  background: var(--paper);
  padding: 1.7rem 1.3rem 2rem;
  transition: background .5s var(--mola), color .5s var(--mola);
}
.dias li b {
  display: block;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem); font-weight: 800;
  letter-spacing: -.035em; margin-bottom: .2rem;
}
.dias li i {
  display: block; font-style: normal;
  font-size: .67rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green-txt);
  margin-bottom: 1.1rem;
}
.dias li p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--suave); }

.dias li.ativo { background: var(--ink); color: var(--paper); }
.dias li.ativo i { color: var(--orange); }
.dias li.ativo p { color: var(--suave-claro); }

.semana-pe { margin: 2rem 0 0; font-size: .93rem; color: var(--suave); }
.semana-pe strong { color: var(--ink); }

/* ─────────── quatro números ─────────── */

.numeros { padding: clamp(5rem, 8vw, 7rem) var(--lado); }
.numeros-cabeca { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.quatro {
  list-style: none; margin: 0 0 2.5rem; padding: 0;
  border-top: 1px solid var(--linha-clara);
}
.quatro li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1rem 2rem; align-items: baseline;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--linha-clara);
}
.quatro span {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  color: var(--orange);
}
.quatro b {
  font-size: clamp(1.3rem, 3vw, 2.5rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1.02;
}
.quatro i {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-size: 1.15rem;
  color: var(--suave-claro);
}
.numeros-pe { max-width: 48ch; margin: 0; color: var(--suave-claro); }

/* ─────────── papéis ─────────── */

.papeis { padding: clamp(5rem, 8vw, 7rem) var(--lado); }
.papeis h2 { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.papeis-grade {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--linha);
  border: 1px solid var(--linha);
}
.papeis-grade article { background: var(--paper); padding: 2.2rem 1.7rem 2.6rem; }
.papeis-grade article.destaque { background: var(--green-area); color: var(--paper); }
.papel-tag {
  margin: 0 0 1.4rem;
  font-size: clamp(1.15rem, 2vw, 1.7rem); font-weight: 800;
  letter-spacing: -.035em;
}
.papeis-grade p:last-child { margin: 0; font-size: .93rem; color: var(--suave); }
.papeis-grade .destaque .papel-tag { color: var(--paper); }
.papeis-grade .destaque p:last-child { color: rgba(242, 237, 227, .88); }

/* ─────────── limites ─────────── */

.limites { padding: clamp(5rem, 8vw, 7rem) var(--lado); }
.limites h2 { max-width: 20ch; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.tres {
  list-style: none; margin: 0 0 clamp(3rem, 6vw, 4.5rem); padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  counter-reset: lim;
}
.tres li {
  counter-increment: lim;
  border-top: 3px solid var(--orange);
  padding-top: 1.3rem;
}
.tres li::before {
  content: counter(lim, decimal-leading-zero);
  display: block; margin-bottom: .9rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  color: var(--orange);
}
.tres b {
  display: block; margin-bottom: .8rem;
  font-size: clamp(1.25rem, 2.4vw, 2rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1.05;
}
.tres p { margin: 0; font-size: .95rem; color: var(--suave-claro); }

.limites-pe { max-width: 56rem; }
.limites-pe > p { margin: 0 0 1.4rem; }
.limites-pe > p:first-child { color: var(--suave-claro); font-size: 1.05rem; }
.limites-pe em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-size: 1.16em; color: var(--paper);
}

/* ─────────── método casa ─────────── */

.casa {
  background: var(--orange);
  padding: clamp(5rem, 8vw, 7rem) var(--lado);
}
.casa .kicker { color: var(--ink); }
.casa h2 { color: rgba(20, 23, 14, .72); }
.casa h2 em { color: var(--ink); }
/* o botão laranja some no fundo laranja: aqui ele é tinta, com texto papel */
.casa .cta-meio .botao { background: var(--ink); color: var(--paper); }
.casa .cta-meio .botao:hover { background: #2B3122; }
.casa-cabeca { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.etapas { border-top: 1px solid rgba(20, 23, 14, .3); }
.etapas details { border-bottom: 1px solid rgba(20, 23, 14, .3); }
.etapas summary {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1rem; align-items: baseline;
  padding: 1.5rem 0;
  cursor: pointer; list-style: none;
}
.etapas summary::-webkit-details-marker { display: none; }
.etapas summary span {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-size: 2.1rem; line-height: 1;
}
.etapas summary h3 {
  font-size: clamp(1.8rem, 4.4vw, 3.6rem); font-weight: 800;
  letter-spacing: -.045em; line-height: 1; margin: 0; display: inline; }
.etapas summary i {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-size: 1.15rem;
  color: rgba(20, 23, 14, .80);   /* .72 dava 4,06:1 sobre o laranja; AA pede 4,5 */
}
.etapas summary h3 { color: rgba(20, 23, 14, .58); transition: color .3s var(--mola); }
.etapas details[open] summary h3 { color: var(--ink);}
/* a resposta desdobra quando o passo abre, no scroll ou no clique */
.etapas details[open] p { animation: desdobra .55s var(--mola) both; }
@keyframes desdobra { from { opacity: 0; transform: translateY(-.35rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .etapas details[open] p { animation: none; } }
.etapas p {
  margin: 0 0 1.9rem; padding-left: 4.2rem;
  max-width: 52ch; font-size: 1rem; line-height: 1.55;
  color: rgba(20, 23, 14, .85);
}

/* ─────────── o que fica ─────────── */

.fica { padding: clamp(5rem, 8vw, 7rem) var(--lado); }
.fica h2 { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.fica-corpo {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: 80rem;
}
.fica-rot {
  margin: 0 0 1.2rem;
  font-size: .69rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--green-txt);
}
.fica-corpo ul { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.fica-corpo li {
  padding: .85rem 0 .85rem 1.7rem;
  border-bottom: 1px solid var(--linha);
  font-size: 1.02rem; font-weight: 600;
  position: relative;
}
.fica-corpo li::before {
  content: '+'; position: absolute; left: 0;
  color: var(--green-txt); font-weight: 800;
}
.fica-corpo .vai li { color: var(--suave); font-weight: 400; }
.fica-corpo .vai li::before { content: '−'; color: var(--suave); }
.fica-corpo .vai + .grifo { margin-top: 2rem; display: block; }

/* ─────────── dúvidas ─────────── */

.duvidas {
  display: grid; grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 7vw, 7rem);
  padding: clamp(5rem, 8vw, 7rem) var(--lado);
  border-top: 1px solid var(--linha);
}
.lista-duvidas { border-top: 1px solid var(--linha); }
.lista-duvidas details { border-bottom: 1px solid var(--linha); }
.lista-duvidas summary {
  display: flex; justify-content: space-between; gap: 1.5rem; align-items: center;
  padding: 1.35rem 0;
  cursor: pointer; list-style: none;
  font-size: clamp(1.02rem, 1.7vw, 1.4rem); font-weight: 700;
  letter-spacing: -.028em;
}
/* a pergunta é um h3 de verdade (SEO/GEO), vestido igual ao texto do summary */
.lista-duvidas summary h3 { display: inline; margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.lista-duvidas summary::-webkit-details-marker { display: none; }
.lista-duvidas summary span {
  flex: 0 0 auto; width: 1.4rem; height: 1.4rem; position: relative;
}
.lista-duvidas summary span::before,
.lista-duvidas summary span::after {
  content: ''; position: absolute; inset: 50% 0 auto;
  height: 2px; background: var(--orange);
  transition: transform .3s var(--mola);
}
.lista-duvidas summary span::after { transform: rotate(90deg); }
.lista-duvidas details[open] summary span::after { transform: rotate(0deg); }
.lista-duvidas p {
  margin: 0 0 1.6rem; max-width: 58ch;
  font-size: .98rem; line-height: 1.6; color: var(--suave);
}

/* ─────────── conversa ─────────── */

.conversa {
  background: var(--green-area); color: var(--paper);
  padding: clamp(5rem, 13vw, 12rem) var(--lado);
}
.conversa .kicker { color: #9BE0A6; }
.conversa h2 { margin-bottom: 1.8rem; }
.conversa h2 em { color: var(--paper); }
.conversa .chamada { color: rgba(242, 237, 227, .88); margin: 0 0 2.6rem; }
.conversa .miudo { margin: 1.4rem 0 0; color: rgba(242, 237, 227, .7); }

/* ─────────── rodapé ─────────── */

.rodape {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2.5rem;
  padding: 2.2rem var(--lado);
  background: var(--ink); color: var(--paper);
  font-size: .78rem;
}
.rodape .marca b { color: var(--paper); }
.rodape .marca b i { color: var(--orange); }
.rodape p { margin: 0; }
.rodape p:nth-of-type(1) { margin-right: auto; color: var(--suave-claro); }
.rodape .miudo { color: rgba(242, 237, 227, .45); }

/* o pé do rodapé no mesmo desenho do site da Cenoura Hub: crédito à esquerda,
   políticas e praça à direita, com um fio separando. As políticas são as da
   Cenoura Hub porque a empresa é a mesma (Asher Marketing), e elas existem lá. */
.rodape-pe {
  flex: 1 0 100%;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .6rem 2rem;
  margin-top: 1.6rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(242, 237, 227, .12);
}
.rodape-links { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem; }
.rodape-links a {
  color: rgba(242, 237, 227, .72); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--mola), border-color .3s var(--mola);
}
.rodape-links a:hover, .rodape-links a:focus-visible {
  color: var(--paper); border-bottom-color: var(--orange);
}

/* O parágrafo terminava com "quê." sozinho numa linha (print dele, 15/09).
   A lista em itálico pede 843 px e o parágrafo tem 896: cabe inteira numa
   linha só, então ela começa depois dos dois-pontos, por um <br>. No celular
   o <br> some (a coluna é estreita e a quebra atrapalharia) e ficam o espaço
   rígido do "por quê" e o `text-wrap: pretty` cuidando das viúvas. */
.limites-pe p { text-wrap: pretty; }
@media (max-width: 900px) { .limites-pe p br { display: none; } }

/* ─────────── revelação ─────────── */

/* só esconde quando há JS para revelar de volta.
   Sem JS (ou se o script falhar), tudo nasce visível. */
html.js .rev { opacity: 0; transform: translateY(22px); }
html.js .rev.vis {
  opacity: 1; transform: none;
  transition: opacity .7s var(--mola), transform .7s var(--mola);
}

/* ═══════════ responsivo ═══════════ */

@media (max-width: 1080px) {
  .quatro li { grid-template-columns: 3rem 1fr; }
  .quatro i { grid-column: 2; }
  .dias { grid-template-columns: repeat(2, 1fr); }
  .dias li:last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .topo nav { display: none; }
  .topo { gap: 1rem; }
  .topo-cta { margin-left: auto; }
  .cta-largo { display: none; }
  .cta-curto { display: inline; }

  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 2.5rem;
    padding-bottom: clamp(3rem, 6vh, 5rem);   /* aqui a nota está no fluxo, sem reserva */
  }

  /* uma coluna: o fio vertical entre os dois lados vira horizontal */
  .filtro { grid-template-columns: 1fr; }
  .filtro-nao {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--linha); padding-top: var(--vao);
  }
  .hero-objeto { margin: 0 calc(var(--lado) * -1) 0; order: 2; }
  .hero-texto { order: 1; }
  .hero-nota { position: static; margin-top: 1.8rem; max-width: none; order: 3; }

  .papeis-grade,
  .tres,
  .fica-corpo,
  .duvidas { grid-template-columns: 1fr; }

  .papeis-grade, .fica-corpo { gap: 1px; }
  .tres { gap: 2rem; }
  .duvidas { gap: 2.5rem; }
}

@media (max-width: 620px) {
  .dias { grid-template-columns: 1fr; }
  .dias li:last-child { grid-column: auto; }
  .botao { width: 100%; justify-content: space-between; }
  .tensao-topo { grid-template-columns: 1fr; grid-template-areas: "mkt" "corda" "com" "explica" "grifo"; }
  .tensao-explica { margin-top: 1.6rem; }
  .tensao .grifo { justify-self: start; text-align: left; max-width: 26ch; }
  .etapas summary { grid-template-columns: 2.4rem 1fr; }
  .etapas summary i { grid-column: 2; }
  .etapas p { padding-left: 2.4rem; }
  .quatro li { grid-template-columns: 2.6rem 1fr; gap: .6rem 1rem; }
}

/* ═══════════ movimento reduzido ═══════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html.js .rev { opacity: 1; transform: none; }
  .hero-objeto { animation: none; }
  .hero-objeto img { transform: none; }
  .faixa-trilho { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   O HERO QUE SE MONTA
   A casa não aparece pronta: sobe por dobras conforme a página
   rola, na ordem do método. Cada marca entra junto com a peça
   que ela nomeia — rótulo antes da peça existir não explica nada.
   ═══════════════════════════════════════════════════════════ */

/* A casa se monta sozinha, assim que entra na tela. Prender a montagem
   ao scroll obrigava o leitor a rolar devagar para ver o gesto — e quem
   rola rápido via a animação em soluços. O tempo agora é da página. */
.hero-trilho { position: relative; }

.hero-objeto { isolation: isolate; }
.casa-base { position: relative; z-index: 1; }

/* o vídeo só entra em cena quando o JS confirma que vai tocar; até lá
   quem ocupa o espaço é a <img> da casa montada, e o leiaute não pula */
.casa-video { display: none; width: 100%; height: auto; }
html.js .hero-objeto.montando .casa-video { display: block; }
html.js .hero-objeto.montando .casa-base { display: none; }
/* o convite para rever, discreto, no canto do objeto */
.rever {
  position: absolute; right: 0; bottom: -.2rem; z-index: 4;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .7rem; border: 1px solid var(--linha-clara);
  border-radius: 99px; background: var(--paper);
  font: inherit; font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--suave); cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility .4s, color .2s, border-color .2s;
}
.rever.on { opacity: 1; visibility: visible; }
.rever:hover { color: var(--ink); border-color: var(--orange); }
.rever:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ── as marcas ── */
.casa-marcas { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.selo-casa {
  position: absolute;
  left: var(--x); top: var(--y);
  --pos: translate(-50%, -50%);
  transform: var(--pos) scale(.94);
  display: grid; gap: .3rem;
  max-width: 13.5rem; padding: .5rem .8rem .6rem;
  border: 1px solid var(--linha-clara);
  border-radius: 2px;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(20,23,14,.05), 0 14px 30px -22px rgba(20,23,14,.6);
  font: inherit; text-align: left; color: var(--ink);
  cursor: pointer; pointer-events: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease, transform .45s var(--mola), visibility .45s;
}
.selo-casa.on { opacity: 1; visibility: visible; transform: var(--pos) scale(1); }

/* onde cada selo se prende no desenho. Estava no `style=` de cada botão e
   voltou para cá: inline vence media query, e o celular precisa mover um. */
.selo-casa[data-quadro="9"]  { --x: 50%; --y: 91%; }
.selo-casa[data-quadro="19"] { --x: 17%; --y: 67%; }
.selo-casa[data-quadro="29"] { --x: 52%; --y: 37%; }
.selo-casa[data-quadro="37"] { --x: 57%; --y: 17%; }

/* ancoragem por lado — centralizar todas jogava a da esquerda sobre o texto */
.selo-casa[data-lado="centro"] { --pos: translate(-50%, -50%); }
.selo-casa[data-lado="esq"]    { --pos: translate(0, -50%); }
.selo-casa[data-lado="dir"]    { --pos: translate(-100%, -50%); }
.selo-casa[data-lado="dir"]::before { left: auto; right: -5px; }
.selo-casa b {
  font-size: .66rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange-mid);
}
.selo-casa span {
  display: block; max-height: 0; overflow: hidden;
  font-size: .8rem; line-height: 1.45; color: var(--suave);
  opacity: 0;
  transition: max-height .4s var(--mola), opacity .3s ease;
}
.selo-casa:hover span, .selo-casa:focus-visible span, .selo-casa[aria-expanded="true"] span {
  max-height: 7rem; opacity: 1;
}
.selo-casa:hover, .selo-casa:focus-visible { border-color: var(--orange); }
.selo-casa:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* o pontinho que ancora a marca na peça */
.selo-casa::before {
  content: ""; position: absolute; left: -5px; top: 50%;
  width: 9px; height: 9px; margin-top: -4.5px;
  border-radius: 99px; background: var(--orange);
  box-shadow: 0 0 0 3px var(--paper);
}

/* ═══════════════════════════════════════════════════════════
   O PACOTE — a caixa CASA e o que vai dentro dela
   ═══════════════════════════════════════════════════════════ */
.pacote {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.4rem, 4vw, 3.4rem) clamp(1.5rem, 4vw, 4rem);
  padding: clamp(3.5rem, 9vh, 6.5rem) var(--lado);
}
.pacote-cabeca { grid-column: 1; max-width: 34rem; }
.pacote-cabeca .chamada { margin: 1.4rem 0 0; }
.pacote-objeto {
  grid-column: 2; grid-row: 1 / span 2;
  margin: 0; align-self: center;
}
/* o fundo da foto é a cor da página, então ela flutua sem moldura —
   é o mesmo efeito que a caixa tinha na primeira versão */
.pacote-objeto img {
  display: block; width: 100%; height: auto;
  animation: flutua 9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pacote-objeto img { animation: none; }
}
.pacote-lista {
  grid-column: 1; margin: 0; padding: 0;
  list-style: none; display: grid; gap: 1.4rem;
  counter-reset: pacote;
}
.pacote-lista li {
  counter-increment: pacote;
  padding-left: 2.3rem; position: relative;
  border-top: 1px solid var(--linha-clara); padding-top: 1.1rem;
}
.pacote-lista li::before {
  content: counter(pacote, decimal-leading-zero);
  position: absolute; left: 0; top: 1.1rem;
  font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  color: var(--orange-mid);
  font-variant-numeric: tabular-nums;
}
.pacote-tag {
  margin: 0 0 .35rem; font-size: .95rem; font-weight: 700;
  letter-spacing: -.01em;
}
.pacote-lista p:last-child { margin: 0; font-size: .93rem; color: var(--suave); }
.pacote-nota {
  grid-column: 1 / -1; margin: .6rem 0 0;
  font-size: .8rem; color: var(--suave);
}

@media (max-width: 900px) {
  /* O celular monta igual. Mas o selo que cabia sobre uma casa de 1100 px
     cobre os cards numa de 375: aqui ele é só a etiqueta, largura do texto.
     O corpo do texto abre no toque — e aí sim pode passar por cima do
     desenho, porque foi o leitor que pediu. */
  .selo-casa {
    /* `max-height:0` esconde o texto mas ele continua ditando a LARGURA:
       sem este teto o chip de "Estrutura" nascia com 312 px e vazava. */
    max-width: 7.6rem;
    padding: .3rem .55rem .34rem;
    box-shadow: 0 1px 0 rgba(20,23,14,.05), 0 8px 18px -14px rgba(20,23,14,.55);
    transition: opacity .45s ease, transform .45s var(--mola),
                visibility .45s, left .35s var(--mola), width .35s var(--mola);
  }
  /* Alvo de toque de 44 px SEM mudar o desenho: a área sensível cresce por
     fora, num pseudo-elemento invisível. O chip tinha 25 px de altura; o
     mínimo de WCAG 2.5.8 é 24 px e o Google recomenda ~48. Medido em 15/09. */
  .selo-casa::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    height: 44px; transform: translateY(-50%);
  }
  .selo-casa b { font-size: .56rem; letter-spacing: .09em; }
  .selo-casa span { font-size: .78rem; }
  /* no toque não existe hover: sem isto o primeiro toque já abria e fechava */
  .selo-casa:hover span { max-height: 0; opacity: 0; }

  /* aberto, o painel se centraliza: ancorado, o de "Cobertura" nasce a 57%
     da largura e saía pela direita em qualquer aparelho */
  .selo-casa[aria-expanded="true"] {
    left: 50%; --pos: translate(-50%, -50%);
    max-width: none; width: min(17rem, 74vw); z-index: 5;
  }
  .selo-casa[aria-expanded="true"] span { max-height: 9rem; opacity: 1; }
  .selo-casa[aria-expanded="true"]::before { opacity: 0; }

  /* "Operação" nomeia os cards; a 37% a etiqueta caía bem em cima deles */
  .selo-casa[data-quadro="29"] { --y: 29%; }

  /* o objeto é sangrado até a borda; sem isto o botão encosta na tela */
  .rever { right: var(--lado); }

  .pacote { grid-template-columns: 1fr; }
  .pacote-cabeca, .pacote-lista, .pacote-objeto { grid-column: 1; }
  .pacote-objeto { grid-row: auto; margin: 0 calc(var(--lado) * -1); }
}

@media (prefers-reduced-motion: reduce) {
  .casa-video, .rever { display: none; }
  html.js .hero-objeto.montando .casa-base { visibility: visible; }
  .marca { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   A EQUIPE — a cena dos agentes, recortada e em laço
   ═══════════════════════════════════════════════════════════ */
.equipe {
  margin: clamp(1.6rem, 4vw, 2.6rem) 0 clamp(2rem, 5vw, 3rem);
  display: grid; justify-items: center; gap: .9rem;
}
.equipe-video, .equipe-base {
  /* 44rem: a cena cabe numa tela de notebook junto com o título, e fica
     abaixo dos 860 px do vídeo, então nunca é esticada */
  display: block; width: 100%; max-width: 44rem; height: auto;
  /* a cadeira da direita encosta na borda do quadro; sem isso ela
     termina num corte reto que o olho lê como recorte mal feito */
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 3.5%);
          mask-image: linear-gradient(to left, transparent 0, #000 3.5%);
}
.equipe-video { display: none; }
html.js .equipe.rodando .equipe-video { display: block; }
html.js .equipe.rodando .equipe-base  { display: none; }
.equipe figcaption {
  max-width: 44ch; text-align: center;
  font-size: .82rem; line-height: 1.5; color: var(--suave);
}

@media (prefers-reduced-motion: reduce) {
  html.js .equipe.rodando .equipe-video { display: none; }
  html.js .equipe.rodando .equipe-base  { display: block; }
}