/* ==========================================================================
   Oli Studio — repaginação
   Fundos: tinta (escuro) e branco. Cor de destaque: dourado no escuro,
   azul-oli no claro, sempre em pouca quantidade.
   Fontes Newsreader, Karla e IBM Plex Mono. Sem degradês, como pede o manual.
   ========================================================================== */

:root {
  /* Marca */
  --tinta: #141B26;
  --papel: #F7F9FB;
  --areia: #E0DED4;
  --azul-oli: #24548C;
  --nevoa: #DCE7F2;
  --branco: #FFFFFF;
  --dourado: #E5BE78;

  /* Derivadas, só para interface */
  --fundo: #0E131B;
  --tinta-2: #182029;
  --azul-oli-claro: #3D74B8;
  --ponto: #7FA8D9;

  /* Destaque (títulos, números, estados ativos): dourado sobre o escuro.
     No branco o dourado não tem contraste para texto, então vira azul-oli. */
  --destaque-escuro: var(--dourado);
  --destaque-claro: var(--azul-oli);

  /* Hierarquia sobre o escuro */
  --titulo-escuro: #FFFFFF;
  --lead-escuro: #DCE7F2;
  --corpo-escuro: rgba(247, 249, 251, .58);
  --suave-escuro: rgba(247, 249, 251, .40);
  --linha-escura: rgba(220, 231, 242, .10);
  --linha-escura-forte: rgba(220, 231, 242, .24);

  /* Hierarquia sobre o claro */
  --titulo-claro: #141B26;
  --lead-claro: rgba(20, 27, 38, .78);
  --corpo-claro: rgba(20, 27, 38, .62);
  --suave-claro: rgba(20, 27, 38, .45);
  --linha-clara: #E3E8EF;

  /* Papéis, trocados nas seções claras */
  --destaque: var(--destaque-escuro);
  --rotulo: var(--areia);
  --titulo: var(--titulo-escuro);
  --lead: var(--lead-escuro);
  --corpo: var(--corpo-escuro);
  --suave: var(--suave-escuro);
  --linha: var(--linha-escura);
  --linha-forte: var(--linha-escura-forte);
  --marcador: var(--areia);

  /* Tipografia */
  --f-titulo: "Newsreader", Georgia, "Times New Roman", serif;
  --f-texto: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --t-12: .75rem;
  --t-14: .875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-21: 1.3125rem;
  --t-24: 1.5rem;

  /* Espaço */
  --largura: 1280px;
  --margem: clamp(16px, 4vw, 40px);
  --vao: 24px;
  --secao: clamp(88px, 11vw, 148px);
  --topo: 72px;

  --raio-midia: 14px;
  --raio-painel: 20px;
  --raio-secao: clamp(28px, 4vw, 56px);

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ------------------------------------------------------------- Base ---- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--corpo);
  font: 400 var(--t-18)/1.65 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-aberto { overflow: hidden; }

img,
svg { display: block; max-width: 100%; }

a { color: inherit; }

p { margin: 0; }

h1, h2, h3 { margin: 0; color: var(--titulo); }

/* O atributo hidden precisa vencer os display: grid/flex dos componentes
   (painéis do "Para quem é", botão de pausa, aviso do formulário) */
[hidden] { display: none !important; }

button { font: inherit; color: inherit; }

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

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pular {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--areia);
  color: var(--tinta);
  font-weight: 500;
  text-decoration: none;
}
.pular:focus { top: 12px; }

.faixa {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--vao);
}

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

/* Seções claras: mesma estrutura, papéis de cor trocados */
.secao--clara {
  --destaque: var(--destaque-claro);
  --rotulo: var(--titulo-claro);
  --titulo: var(--titulo-claro);
  --lead: var(--lead-claro);
  --corpo: var(--corpo-claro);
  --suave: var(--suave-claro);
  --linha: var(--linha-clara);
  --linha-forte: #CFD8E3;
  --marcador: var(--azul-oli);
  background: var(--branco);
  color: var(--corpo);
}

/* Duas seções seguidas com o mesmo fundo: um espaço só entre elas,
   em vez do fim de uma somado ao começo da outra */
.secao--escura + .secao--escura,
.secao--clara + .secao--clara { padding-top: 0; }

/* ------------------------------------------------------- Tipografia --- */
.hero__titulo,
.titulo-2 {
  font-family: var(--f-titulo);
  font-weight: 400;
  color: var(--destaque);
  text-wrap: balance;
}

.hero__titulo {
  font-size: 2.5rem;
  line-height: 1.04;
  letter-spacing: -.03em;
}
.hero__lead {
  display: block;
  color: var(--titulo-escuro);
}
.hero__titulo em { font-style: italic; }

/* Do tablet para cima, uma ideia por linha */
@media (min-width: 701px) {
  .hero__titulo { font-size: clamp(3rem, 4.9vw, 4rem); }
  .hero__lead,
  .hero__linha { white-space: nowrap; }
  .hero__linha { display: block; }
}

.titulo-2 {
  font-size: clamp(2.125rem, 1.35rem + 2.5vw, 3.375rem);
  line-height: 1.06;
  letter-spacing: -.024em;
}

.frase { display: block; }

/* Rótulo da seção: dá o primeiro degrau da hierarquia */
.rotulo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-14);
  font-weight: 500;
  color: var(--rotulo);
}
.rotulo svg { width: 13px; height: 13px; flex: none; color: var(--destaque); }

.apoio {
  max-width: 54ch;
  color: var(--lead);
  font-size: var(--t-18);
}

.texto-grande {
  font-size: clamp(var(--t-21), 1rem + .8vw, var(--t-24));
  line-height: 1.5;
  color: var(--lead);
}

.link {
  color: var(--titulo);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  text-decoration-color: var(--marcador);
  transition: color .2s var(--ease);
}
.link:hover { color: var(--marcador); }

/* ---------------------------------------------------------- Botões ---- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 500 var(--t-16)/1 var(--f-texto);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.botao svg { width: 18px; height: 18px; flex: none; }

.botao--acao { background: var(--areia); color: var(--tinta); }
.botao--acao:hover { background: var(--branco); }

.botao--escuro { background: var(--tinta); color: var(--papel); }
.botao--escuro:hover { background: var(--azul-oli); }

.botao--linha { border-color: var(--linha-forte); color: var(--titulo); }
.botao--linha:hover { border-color: var(--marcador); color: var(--marcador); }

.botao--p { min-height: 42px; padding: 0 18px; font-size: var(--t-14); }

.acoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------- Cabeçalho --- */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fundo);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), transform .45s var(--ease);
}
.topo.is-rolado { border-bottom-color: var(--linha-escura); }

/* Some enquanto as três palavras ocupam a tela e volta no fim da seção */
.topo-escondido .topo { transform: translateY(-100%); }

/* Onde o fundo muda de claro para escuro (ou o contrário), a seção nova
   entra por cima da anterior com os cantos de cima arredondados */
.curva {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--raio-secao) * -1);
  border-radius: var(--raio-secao) var(--raio-secao) 0 0;
}
.secao--escura.curva,
.rodape.curva { background: var(--fundo); }

/* Um fio marca a passagem de "Para quem é" para "Como funciona", com folga
   dos dois lados para não encostar no conteúdo */
#como-funciona {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--secao) * .75);
}
#como-funciona::before {
  content: "";
  position: absolute;
  top: calc(var(--secao) * -.125);
  left: 50%;
  width: min(100% - var(--margem) * 2, var(--largura));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--linha-escura-forte), transparent);
}

.topo__faixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--topo);
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--titulo-escuro);
  text-decoration: none;
  flex: none;
}
.marca__folha { width: 24px; height: 24px; }
.marca__nome {
  font-family: var(--f-titulo);
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: -.01em;
}
.marca__ponto { color: var(--dourado); }

.menu { display: flex; align-items: center; gap: 28px; }
.menu__marca { display: none; }

.menu__link {
  font-size: var(--t-14);
  font-weight: 500;
  color: var(--corpo-escuro);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.menu__link:hover { color: var(--titulo-escuro); }

.menu-botao { display: none; }

@media (max-width: 1040px) {
  .menu-botao {
    position: relative;
    z-index: 70;
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--linha-escura-forte);
    border-radius: 999px;
    background: transparent;
    color: var(--titulo-escuro);
    cursor: pointer;
  }
  .menu-botao svg { width: 22px; height: 22px; }

  /* Menu em tela cheia, entrando da esquerda */
  .menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 12px var(--margem) 40px;
    background: var(--fundo);
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .42s var(--ease), visibility 0s .42s;
  }
  .menu.is-aberto {
    transform: none;
    visibility: visible;
    transition: transform .42s var(--ease), visibility 0s;
  }

  .menu__marca {
    display: inline-flex;
    align-self: flex-start;
    min-height: 48px;
    margin-bottom: 28px;
  }

  .menu__link {
    padding: 14px 0;
    border-bottom: 1px solid var(--linha-escura);
    font: 300 2rem/1.15 var(--f-titulo);
    letter-spacing: -.015em;
    color: var(--titulo-escuro);
  }

  .menu__acao { align-self: flex-start; margin-top: 32px; }
}

/* ---------------------------------------------------------- Abertura --- */
/* Texto à esquerda; à direita, prints de sites entregues passam numa diagonal */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--topo));
  min-height: calc(100svh - var(--topo));
  padding-block: clamp(40px, 5vw, 72px);
  overflow: hidden;
}

.hero__grade { position: relative; z-index: 2; width: 100%; align-items: center; }

.hero__bloco {
  grid-column: 1 / span 6;
  display: grid;
  gap: 26px;
  justify-items: start;
}

.hero__texto { color: var(--corpo); max-width: 46ch; }

.fatos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0;
}
.fato { display: flex; align-items: baseline; gap: 8px; }
.fato dd {
  order: -1;
  margin: 0;
  font: 400 var(--t-24)/1 var(--f-titulo);
  color: var(--destaque);
  font-variant-numeric: lining-nums tabular-nums;
}
.fato dt { font-size: var(--t-14); color: var(--suave); }

/* Vitrine: o JavaScript posiciona cada print no caminho a cada quadro */
.vitrine {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 56%;
}

.vitrine__fluxo {
  position: absolute;
  inset: 0;
  transform: perspective(1800px) rotateY(-9deg) rotateX(5deg);
  transform-style: preserve-3d;
}

.vitrine__item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(27vw, 540px);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--linha-escura-forte);
  border-radius: var(--raio-midia);
  background: var(--branco);
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .9);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.vitrine__item img { width: 100%; height: auto; }
.vitrine__item--copia { display: none; }

/* Sem JavaScript: três prints parados na diagonal */
.vitrine:not(.vitrine--viva) .vitrine__item { opacity: 0; }
.vitrine:not(.vitrine--viva) .vitrine__item:nth-child(-n + 3) { opacity: 1; }
.vitrine:not(.vitrine--viva) .vitrine__item:nth-child(1) { z-index: 3; }
.vitrine:not(.vitrine--viva) .vitrine__item:nth-child(2) { transform: translate(-58%, -165%) scale(.82); }
.vitrine:not(.vitrine--viva) .vitrine__item:nth-child(3) { transform: translate(-22%, 70%) scale(.86); }

@media (max-width: 1040px) {
  .hero { display: block; min-height: 0; padding-bottom: clamp(64px, 10vw, 96px); }
  .hero__grade { align-items: start; }
  .hero__bloco { grid-column: 1 / -1; max-width: 640px; }

  /* No celular os prints viram uma faixa que corre sozinha */
  .vitrine {
    position: relative;
    width: auto;
    margin-top: 44px;
    padding-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .vitrine::-webkit-scrollbar { display: none; }
  .vitrine--viva { overflow: hidden; }

  .vitrine__fluxo {
    position: static;
    display: flex;
    width: max-content;
    padding-left: var(--margem);
    transform: none;
  }
  .vitrine--viva .vitrine__fluxo { padding-left: 0; animation: vitrine-faixa 55s linear infinite; }

  .vitrine__item,
  .vitrine:not(.vitrine--viva) .vitrine__item {
    position: relative;
    left: auto;
    top: auto;
    width: min(74vw, 340px);
    margin-right: 14px;
    box-shadow: none;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .vitrine--viva .vitrine__item--copia { display: block; }
}

@keyframes vitrine-faixa { to { transform: translateX(-50%); } }

/* Notebook de tela baixa: o padding de baixo encolhe com a altura e o
   conteúdo acaba colado no fim da seção; força uma folga mínima */
@media (min-width: 1041px) and (max-height: 860px) {
  .hero { padding-bottom: clamp(64px, 9vw, 96px); }
}

/* ---------------------------------------------------------- Problema --- */
/* Segue logo depois da abertura, por isso começa com pouco espaço */
/* Primeira seção clara: entra sobre a abertura com os cantos arredondados */
.problema {
  padding-top: calc(var(--secao) + var(--raio-secao) * .5);
  /* Menos sobra de branco antes das palavras, já descontando o quanto elas
     sobem para arredondar o canto */
  padding-bottom: calc(var(--secao) * .65 + var(--raio-secao));
}

.problema__cabeca {
  display: grid;
  gap: 22px;
  max-width: 860px;
}
.problema__cabeca .texto-grande { max-width: 42ch; }
.problema__cabeca > p:last-child { max-width: 56ch; }

.situacoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px var(--vao);
  margin: clamp(56px, 7vw, 88px) 0 0;
  padding: 0;
  list-style: none;
}
.situacao { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; align-content: start; }
.situacao h3 {
  margin-top: 14px;
  font: 400 var(--t-24)/1.22 var(--f-titulo);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.situacao p { max-width: 46ch; }

/* Quadros: pedaços de tela que ilustram cada situação */
.quadro {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  height: 236px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: var(--raio-painel);
  background: var(--tinta);
  font-family: var(--f-texto);
  line-height: 1.3;
}

.quadro__legenda {
  font: 400 11px/1 var(--f-mono);
  color: var(--suave-escuro);
}
.quadro__legenda + .mini-busca,
.mini-balao + .quadro__legenda { margin-top: 8px; }

.mini-balao {
  align-self: flex-start;
  max-width: 88%;
  padding: 11px 15px;
  border-radius: 16px 16px 16px 4px;
  background: var(--tinta-2);
  border: 1px solid var(--linha-escura-forte);
  font-size: var(--t-16);
  color: var(--titulo-escuro);
}

.mini-busca {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--papel);
  font-size: var(--t-16);
  color: var(--tinta);
}
.mini-busca svg { width: 16px; height: 16px; flex: none; color: var(--azul-oli); }

.mini-cursor {
  width: 1.5px;
  height: 18px;
  margin-left: -8px;
  background: var(--azul-oli);
  animation: piscar 1s steps(1) infinite;
}

/* Perfil: grade de posts e as perguntas que ficam sem resposta */
.quadro--perfil { justify-content: flex-start; }

.mini-perfil { display: flex; align-items: center; gap: 10px; }
.mini-perfil i { width: 34px; height: 34px; border-radius: 50%; background: var(--azul-oli); }
.mini-perfil span { display: grid; gap: 6px; }
.mini-perfil b { display: block; width: 92px; height: 7px; border-radius: 9px; background: rgba(220, 231, 242, .26); }
.mini-perfil b + b { width: 64px; background: rgba(220, 231, 242, .14); }

.mini-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  width: 58%;
  margin-top: 6px;
}
.mini-grade i { aspect-ratio: 1; border-radius: 4px; background: rgba(220, 231, 242, .1); }
.mini-grade i:nth-child(2),
.mini-grade i:nth-child(6) { background: rgba(36, 84, 140, .75); }
.mini-grade i:nth-child(4) { background: rgba(224, 222, 212, .28); }

.mini-duvidas {
  position: absolute;
  right: 20px;
  top: 50%;
  display: grid;
  justify-items: end;
  gap: 8px;
  transform: translateY(-38%);
}
.mini-duvidas span {
  padding: 9px 13px;
  border-radius: 14px 14px 4px 14px;
  background: var(--papel);
  font-size: var(--t-14);
  font-weight: 500;
  color: var(--tinta);
  white-space: nowrap;
}
.mini-duvidas span:nth-child(2) { margin-right: 18px; }

/* Pesquisa: o concorrente aparece, você não */
.quadro--concorrente { justify-content: flex-start; }

.mini-resultados { display: grid; gap: 8px; margin-top: 6px; }
.mini-resultado {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--tinta-2);
}
.mini-resultado i { width: 16px; height: 16px; flex: none; border-radius: 50%; background: rgba(220, 231, 242, .22); }
.mini-resultado b { flex: 1; height: 7px; border-radius: 9px; background: rgba(220, 231, 242, .2); }
.mini-resultado em {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--azul-oli);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  color: var(--branco);
}
.mini-resultado--ausente {
  justify-content: center;
  border: 1px dashed var(--linha-escura-forte);
  background: none;
  font-size: var(--t-14);
  color: var(--suave-escuro);
}

.problema__fecho {
  display: grid;
  gap: 14px;
  justify-items: start;
  margin-top: clamp(40px, 5vw, 56px);
}
.problema__fecho p {
  max-width: 52ch;
  font-size: var(--t-18);
  line-height: 1.55;
  color: var(--titulo);
}
.problema__fecho .link { font-size: var(--t-16); }

@media (max-width: 1040px) {
  .situacoes { grid-template-columns: 1fr; }
  .situacao {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--vao);
  }
  .quadro { grid-row: 1 / span 2; }
  .situacao h3 { align-self: end; }
}

@media (max-width: 700px) {
  .situacao { grid-template-columns: 1fr; grid-template-rows: auto; }
  .quadro { grid-row: auto; height: 220px; padding: 20px; }
  .situacao h3 { align-self: start; }
}


/* Entrada dos cartões: sobem em sequência e as cenas pequenas acontecem
   depois (balão, pesquisa sendo digitada, perguntas, resultados) */
.situacoes--animadas .situacao {
  opacity: 0;
  transform: translateY(56px);
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
}
.situacoes--animadas .situacao:nth-child(2) { transition-delay: .12s; }
.situacoes--animadas .situacao:nth-child(3) { transition-delay: .24s; }
.situacoes--animadas.is-dentro .situacao { opacity: 1; transform: none; }

.situacoes--animadas .mini-balao,
.situacoes--animadas .mini-duvidas span,
.situacoes--animadas .mini-resultado {
  opacity: 0;
  transition: opacity .5s var(--ease), transform .6s cubic-bezier(.16, 1, .3, 1);
}
.situacoes--animadas .mini-balao { transform: translateY(10px); }
.situacoes--animadas .mini-duvidas span { transform: scale(.6); transform-origin: 100% 100%; }
.situacoes--animadas .mini-resultado { transform: translateX(-24px); }

.situacoes--animadas.is-dentro .mini-balao,
.situacoes--animadas.is-dentro .mini-duvidas span,
.situacoes--animadas.is-dentro .mini-resultado { opacity: 1; transform: none; }

.situacoes--animadas.is-dentro .mini-balao { transition-delay: .5s; }
.situacoes--animadas.is-dentro .mini-duvidas span:nth-child(1) { transition-delay: .75s; }
.situacoes--animadas.is-dentro .mini-duvidas span:nth-child(2) { transition-delay: 1.1s; }
.situacoes--animadas.is-dentro .mini-duvidas span:nth-child(3) { transition-delay: 1.45s; }
.situacoes--animadas.is-dentro .mini-resultado:nth-child(1) { transition-delay: .85s; }
.situacoes--animadas.is-dentro .mini-resultado:nth-child(2) { transition-delay: 1.05s; }
.situacoes--animadas.is-dentro .mini-resultado:nth-child(3) { transition-delay: 1.3s; }

/* --------------------------------------------------- As três palavras --- */
/* Sem JavaScript (ou com menos movimento), as palavras ficam empilhadas.
   A seção começa clara, como a anterior, e escurece quando as palavras tomam a tela */
.palavras {
  padding-block: var(--secao);
  --palavras-fundo: var(--branco);
  --palavras-letra: var(--tinta);
  --palavras-ponto: var(--azul-oli);
  --titulo: var(--palavras-letra);
  background: var(--palavras-fundo);
  transition: background-color .9s var(--ease);
}
/* Fundo e letras trocam juntos, pela mesma classe */
.palavras--escura {
  --palavras-fundo: var(--fundo);
  --palavras-letra: var(--titulo-escuro);
  --palavras-ponto: var(--dourado);
}

.palavras__palco {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  justify-items: center;
  padding-inline: var(--margem);
}

.palavra {
  max-width: 11ch;
  text-align: center;
  font: 300 clamp(3.25rem, 1.5rem + 8.4vw, 10.5rem)/.98 var(--f-titulo);
  letter-spacing: -.035em;
  color: var(--palavras-letra);
  text-wrap: balance;
  transition: color .9s var(--ease);
}
.palavra b { font-weight: 300; color: var(--palavras-ponto); transition: color .9s var(--ease); }

/* Com a rolagem: a seção fica parada e cada palavra acende letra por letra.
   Ela entra por cima do fim da seção clara (o canto arredondado só aparece
   quando escurece) e a seção seguinte sobe por cima da última palavra */
.palavras--viva {
  position: relative;
  z-index: 1;
  height: 340vh;
  padding-block: 0;
  margin-top: calc(var(--raio-secao) * -1);
  margin-bottom: -42vh;
  border-radius: var(--raio-secao) var(--raio-secao) 0 0;
}
.palavras--viva .palavras__palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  place-items: center;
  overflow: hidden;
}
.palavras--viva .palavra { grid-area: 1 / 1; opacity: 0; will-change: opacity, transform; }
.palavras--viva .palavra span { opacity: 0; transition: opacity .2s linear; }

/* ------------------------------ Como o seu cliente chega até você --- */
/* Sobe por cima do fim da seção das palavras, para não sobrar tela vazia */
.cena { position: relative; z-index: 1; padding-block: 0; }

.cena__pino {
  display: flex;
  align-items: center;
  padding-block: clamp(48px, 6vw, 88px);
}
.cena__pino > .faixa { width: 100%; }

/* A tela fica parada enquanto a jornada acontece */
.cena--viva { height: 340vh; }
.cena--viva .cena__pino {
  position: sticky;
  top: var(--topo);
  height: calc(100vh - var(--topo));
  height: calc(100svh - var(--topo));
  padding-block: 20px;
}

.palco {
  --destaque: var(--destaque-escuro);
  --titulo: var(--titulo-escuro);
  --corpo: var(--corpo-escuro);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid var(--linha-escura);
  border-radius: 32px;
  background: var(--tinta);
  color: var(--corpo);
}

.palco__titulo {
  font: 400 clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem)/1.1 var(--f-titulo);
  letter-spacing: -.02em;
  color: var(--destaque);
  text-wrap: balance;
}

.atos { display: grid; gap: 24px; margin: 32px 0 0; padding: 0; list-style: none; }
.ato { display: grid; gap: 6px; opacity: .42; transition: opacity .5s var(--ease); }
.ato.is-atual { opacity: 1; }
.ato__trilho {
  display: block;
  height: 3px;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--linha-escura-forte);
}
.ato__trilho i {
  display: block;
  height: 100%;
  background: var(--dourado);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}
.ato__nome { font: 400 var(--t-24)/1.2 var(--f-titulo); color: var(--titulo-escuro); }
.ato__texto { font-size: var(--t-16); line-height: 1.5; color: var(--corpo-escuro); }

.palco__legenda { display: none; }
.palco__nota { margin-top: 30px; font-size: 13px; line-height: 1.45; color: var(--corpo-escuro); }

/* A tela: pesquisa, site e conversa, empilhados; o estado vem de data-* */
.tela {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: var(--branco);
  color: var(--tinta);
}
.tela__barra { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; background: #EDF0F4; }
.tela__barra i { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #CBD2DA; }
.tela__barra::after { content: ""; width: 44px; flex: none; }
.tela__url {
  margin: 0 auto;
  padding: 3px 16px;
  border-radius: 7px;
  background: var(--branco);
  font-size: 13px;
  color: #5F6979;
}

.tela__corpo { position: relative; aspect-ratio: 1366 / 794; overflow: hidden; }
.tela__site,
.tela__busca,
.tela__conversa { position: absolute; inset: 0; }

.tela__site { transition: opacity .5s var(--ease), transform .7s var(--ease); }
.tela__site img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  transform-origin: 28% 30%;
  transform: scale(var(--zoom, 1));
}
.tela[data-cena="busca"] .tela__site { opacity: 0; transform: scale(1.06); }

.tela__busca {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 7% 9%;
  background: var(--branco);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.tela[data-cena="site"] .tela__busca { opacity: 0; transform: scale(.94); }

.tela__campo {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 20px;
  border: 1px solid #E3E8EF;
  border-radius: 999px;
  font-size: 1.0625rem;
}
.tela__campo svg { width: 18px; height: 18px; flex: none; color: #5F6979; }

.tela__resultados { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tela__resultado {
  display: grid;
  gap: 4px;
  padding: 14px 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .6s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}
.tela__resultado:nth-child(2) { transition-delay: .08s; }
.tela__resultado:nth-child(3) { transition-delay: .16s; }
.tela[data-resultados="1"] .tela__resultado { opacity: 1; transform: none; }
.tela__resultado b { display: block; width: 60%; height: 9px; border-radius: 5px; background: #E8ECF1; }
.tela__resultado b + b { width: 85%; }
.tela__fonte { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5F6979; }
.tela__fonte i { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--dourado); }
.tela__link { font-size: 1.1875rem; line-height: 1.3; color: var(--azul-oli); }
.tela__trecho { font-size: .9375rem; color: #5F6979; }
.tela[data-marcado="1"] .tela__resultado--nosso { border-color: var(--azul-oli); background: #F3F7FC; }

.tela__conversa {
  left: auto;
  width: 46%;
  padding: 16px;
  transform: translateY(110%);
  transition: transform .7s var(--ease);
}
.tela:not([data-conversa="0"]) .tela__conversa { transform: none; }

.conversa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 14px;
  border-radius: 18px;
  background: #EFEAE2;
  color: var(--tinta);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45);
}
.conversa__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -14px -14px 6px;
  padding: 12px 14px;
  border-radius: 18px 18px 0 0;
  background: var(--tinta);
  color: var(--papel);
  font-size: var(--t-14);
  line-height: 1.3;
}
.conversa__topo small { display: block; font-size: 12px; color: var(--lead-escuro); }
.conversa__avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--dourado);
  color: var(--tinta);
  font-size: 12px;
  font-weight: 700;
}
.conversa__msg {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: .9375rem;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.conversa__msg--chega { align-self: flex-start; border-radius: 4px 14px 14px 14px; background: var(--branco); }
.conversa__msg--resposta { align-self: flex-end; border-radius: 14px 4px 14px 14px; background: #D9FDD3; }
.conversa__msg--digitando { align-self: flex-end; display: flex; gap: 4px; padding: 13px 14px; background: #D9FDD3; }
.conversa__msg--digitando i { width: 7px; height: 7px; border-radius: 50%; background: #6B8F66; animation: pulinho 1s infinite; }
.conversa__msg--digitando i:nth-child(2) { animation-delay: .15s; }
.conversa__msg--digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pulinho { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-4px); } }

.tela[data-conversa="1"] .conversa__msg--chega,
.tela[data-conversa="2"] .conversa__msg--chega,
.tela[data-conversa="2"] .conversa__msg--digitando,
.tela[data-conversa="3"] .conversa__msg--chega,
.tela[data-conversa="3"] .conversa__msg--resposta { opacity: 1; transform: none; }
.tela[data-conversa="3"] .conversa__msg--digitando { display: none; }

@media (max-width: 1040px) {
  .cena--viva .cena__pino { padding-block: 12px; }
  .palco { grid-template-columns: 1fr; gap: 14px; padding: 18px; border-radius: 24px; }
  .palco__titulo { font-size: 1.375rem; }
  .atos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
  .ato { gap: 0; }
  .ato__trilho { margin-bottom: 8px; }
  .ato__nome { font-size: var(--t-16); line-height: 1.25; }
  .ato__texto { display: none; }
  .palco__legenda { display: block; min-height: 3em; margin-top: 10px; font-size: var(--t-16); line-height: 1.5; color: var(--lead-escuro); }
  .palco__nota { margin-top: 4px; font-size: 12px; }
}

/* Celular baixo: a legenda sai para a tela caber inteira */
@media (max-width: 1040px) and (max-height: 720px) {
  .palco__legenda { display: none; }
}

/* Notebook de tela baixa: o quadro encolhe junto, para caber inteiro entre a
   barra do topo e o fim da tela, sem cortar o título nem a nota */
@media (min-width: 1041px) and (max-height: 860px) {
  .cena--viva .cena__pino { padding-block: 14px; }
  .cena--viva .palco {
    gap: clamp(24px, 3vw, 44px);
    padding: clamp(22px, 2.4vw, 34px);
    /* Largura limitada pela altura livre: assim a janela do site nunca
       ultrapassa o espaço que sobra */
    max-width: calc((100svh - var(--topo) - 140px) / .582 * 1.58 + 160px);
    margin-inline: auto;
  }
  .cena--viva .palco__titulo { font-size: clamp(1.5rem, 1rem + 1.1vw, 2.1rem); }
  .cena--viva .atos { gap: 14px; margin-top: 18px; }
  .cena--viva .ato__trilho { margin-bottom: 7px; }
  .cena--viva .ato__nome { font-size: var(--t-21); }
  .cena--viva .palco__nota { margin-top: 14px; }
}

/* Tela ainda mais baixa: aperta mais um pouco, sem perder nada de vista */
@media (min-width: 1041px) and (max-height: 700px) {
  .cena--viva .cena__pino { padding-block: 8px; }
  .cena--viva .palco { gap: 28px; padding: 20px 24px; }
  .cena--viva .atos { gap: 10px; margin-top: 14px; }
  .cena--viva .ato__texto { font-size: var(--t-14); }
  .cena--viva .palco__nota { margin-top: 10px; }
}

/* No celular a tela mantém o mesmo formato horizontal do computador, só
   com tipografia e espaçamentos menores para caber na largura da tela */
@media (max-width: 700px) {
  /* Um pouco menos larga que 16:9, para o balão de conversa ter altura
     de sobra sem virar uma tela de celular em pé */
  .tela__corpo { aspect-ratio: 4 / 3; }
  .tela__barra { height: 34px; padding: 0 12px; }
  .tela__url { padding: 2px 12px; font-size: 11px; }
  .tela__busca { gap: 12px; padding: 7% 6%; }
  .tela__campo { height: 40px; padding: 0 14px; gap: 8px; font-size: 13px; }
  .tela__campo svg { width: 14px; height: 14px; }
  .tela__resultado { padding: 10px 12px; }
  .tela__link { font-size: 14px; }
  .tela__trecho { font-size: 12px; }
  .tela__conversa { width: 100%; padding: 8px; }
  .conversa { padding: 8px; gap: 6px; }
  .conversa__topo { margin: -8px -8px 4px; padding: 8px; font-size: 11px; }
  .conversa__avatar { width: 26px; height: 26px; font-size: 10px; }
  .conversa__msg { padding: 8px 11px; font-size: 12px; }
}

/* Celular bem estreito: a tela ganha mais altura para o balão de
   conversa não cortar */
@media (max-width: 380px) {
  .tela__corpo { aspect-ratio: 1 / 1; }
}

/* -------------------------------------------------------- Benefícios --- */
.beneficios__cabeca {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(40px, 5vw, 60px);
}

.beneficios__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vao);
  margin: 0;
  padding: 0;
  list-style: none;
}

.beneficio {
  display: flex;
  flex-direction: column;
  padding: 12px 12px 30px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-painel);
  background: var(--branco);
}
.beneficio__cena {
  display: grid;
  place-items: center;
  min-height: 210px;
  margin-bottom: 26px;
  padding: 20px;
  border-radius: 14px;
  background: var(--papel);
}
.beneficio h3 {
  margin: 0 16px;
  font: 400 var(--t-24)/1.2 var(--f-titulo);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.beneficio p { margin: 8px 16px 0; font-size: var(--t-16); }

/* Relógio de verdade: o site segue no ar a qualquer hora */
@keyframes anel {
  from { transform: scale(.4); opacity: 1; }
  to { transform: scale(1.5); opacity: 0; }
}
.relogio { display: flex; align-items: center; gap: 22px; }
.relogio__mostrador { width: 112px; height: 112px; flex: none; }
.relogio__info { display: grid; gap: 6px; }
.relogio__status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-14); font-weight: 500; color: var(--azul-oli); }
.relogio__status i { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--azul-oli); }
.relogio__status i::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid var(--azul-oli);
  border-radius: 50%;
  animation: anel 2.2s var(--ease) infinite;
}
.relogio__hora { font: 400 2.5rem/1 var(--f-titulo); color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; }
.relogio__dias { font-size: 12px; color: var(--corpo-claro); }

/* Resultado de pesquisa com o site de um cliente */
.pesquisa {
  display: grid;
  gap: 4px;
  width: 100%;
  max-width: 330px;
  padding: 16px 18px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--branco);
}
.pesquisa__fonte { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--corpo); }
.pesquisa__fonte i { width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--dourado); }
.pesquisa__titulo { font-size: var(--t-16); line-height: 1.35; color: var(--azul-oli); }
.pesquisa__trecho { font-size: 13px; color: var(--corpo); }

/* Cores de clientes se alternando: cada site com a identidade do negócio */
.paleta { display: grid; justify-items: center; gap: 14px; }
.paleta__cores { display: flex; gap: 8px; }
.paleta__cores i {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(20, 27, 38, .08);
  transition: background-color .8s var(--ease);
}
.paleta__nome { font-size: var(--t-14); font-weight: 500; color: var(--corpo); }

@media (max-width: 1040px) {
  .beneficios__lista { grid-template-columns: 1fr; max-width: 560px; }
}

/* Entradas em sequência (a classe vem do JavaScript; sem ele, tudo aparece) */
.revela [data-revela] > * {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
}
.revela [data-revela] > :nth-child(2) { transition-delay: .12s; }
.revela [data-revela] > :nth-child(3) { transition-delay: .24s; }
.revela [data-revela].is-dentro > * { opacity: 1; transform: none; }

/* ------------------------------------------------------- Para quem é --- */
.para-quem .grade { align-items: start; row-gap: 36px; }

.para-quem__lado {
  grid-column: 1 / span 5;
  display: grid;
  gap: 20px;
  position: sticky;
  top: calc(var(--topo) + 32px);
}

.areas__dica {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: var(--t-14);
  color: var(--corpo);
}
.areas__dica svg { width: 20px; height: 20px; flex: none; color: var(--destaque); }
.areas__dica-toque { display: none; }
@media (hover: none) {
  .areas__dica-mouse { display: none; }
  .areas__dica-toque { display: inline; }
}

.areas { display: grid; border-top: 1px solid var(--linha); }

.area {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 2px 15px 0;
  border: 0;
  border-bottom: 1px solid var(--linha);
  background: none;
  text-align: left;
  color: rgba(247, 249, 251, .5);
  cursor: pointer;
  transition: color .2s var(--ease);
}
.area__num { font: 400 var(--t-12)/1 var(--f-mono); color: var(--suave); transition: color .2s var(--ease); }
.area__nome {
  font: 400 clamp(1.375rem, 1rem + .9vw, 1.8125rem)/1.15 var(--f-titulo);
  letter-spacing: -.015em;
}
.area__seta {
  width: 22px;
  height: 22px;
  opacity: .35;
  transition: opacity .2s var(--ease), transform .25s var(--ease);
}
.area:hover { color: var(--titulo-escuro); }
.area:hover .area__seta { opacity: .8; transform: translateX(4px); }
.area[aria-selected="true"] { color: var(--destaque); }
.area[aria-selected="true"] .area__num { color: var(--destaque); }
.area[aria-selected="true"] .area__seta { opacity: 1; transform: translateX(4px); }

.paineis { grid-column: 7 / span 6; }

.painel { display: grid; gap: 18px; }
.painel:not([hidden]) { animation: surgir .4s var(--ease); }
@keyframes surgir { from { opacity: 0; } }

.painel__foto {
  width: 100%;
  height: auto;
  margin-bottom: 6px;
  border-radius: var(--raio-midia);
  background: var(--tinta);
}

.painel__quem { font-size: var(--t-14); color: var(--marcador); }
.painel__texto { color: var(--lead); }

.painel__subtitulo {
  margin-top: 6px;
  font: 500 var(--t-14)/1.3 var(--f-texto);
  color: var(--suave);
}

.painel__itens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--vao);
  margin: 0;
  padding: 0;
  list-style: none;
}
.painel__itens li {
  padding-block: 12px;
  border-top: 1px solid var(--linha);
  font-size: var(--t-16);
  line-height: 1.45;
}

.painel__nota { font-size: var(--t-14); color: var(--suave); }
.painel__nota a { color: var(--titulo); text-underline-offset: .25em; }

@media (max-width: 1040px) {
  .para-quem__lado { position: static; grid-column: 1 / -1; }
  .paineis { grid-column: 1 / -1; }

  /* Todas as áreas à vista, em etiquetas que quebram linha */
  .areas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 0;
  }

  .area {
    display: inline-flex;
    width: auto;
    gap: 8px;
    padding: 11px 16px;
    border: 1px solid var(--linha-escura-forte);
    border-radius: 999px;
    color: var(--corpo-escuro);
  }
  .area__num { display: none; }
  .area__nome { font: 500 var(--t-14)/1 var(--f-texto); letter-spacing: 0; }
  .area__seta { display: none; }
  .area[aria-selected="true"] { background: var(--papel); border-color: var(--papel); color: var(--tinta); }
}

@media (max-width: 560px) {
  .painel__itens { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------- Como funciona --- */
.processo__grade { align-items: start; row-gap: 48px; }

/* À esquerda, fixo durante a rolagem: título e a etapa que está no meio da tela */
.processo__lado {
  grid-column: 1 / span 5;
  position: sticky;
  top: calc(var(--topo) + 48px);
  display: grid;
  gap: 20px;
}

.contador { display: grid; gap: 10px; max-width: 320px; margin-top: 28px; }
.contador__num { display: flex; align-items: baseline; gap: 8px; line-height: .9; }
.contador__num b {
  display: inline-block;
  font: 300 clamp(4.5rem, 3rem + 3vw, 6.5rem)/.9 var(--f-titulo);
  letter-spacing: -.04em;
  color: var(--titulo-escuro);
  font-variant-numeric: lining-nums tabular-nums;
}
.contador__num small { font: 400 var(--t-21)/1 var(--f-titulo); color: var(--suave); }
.contador__nome { display: inline-block; font: 400 var(--t-24)/1.2 var(--f-titulo); color: var(--destaque); }
.contador__barra {
  display: block;
  height: 2px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--linha-forte);
}
.contador__barra i {
  display: block;
  height: 100%;
  background: var(--dourado);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .2s linear;
}

/* A troca de número entra de baixo para cima */
.contador.is-trocando .contador__num b,
.contador.is-trocando .contador__nome { animation: subir .45s var(--ease); }
@keyframes subir { from { opacity: 0; transform: translateY(12px); } }

.processo__prazo { font-size: var(--t-16); color: var(--corpo); }
.processo__prazo b { font-weight: 500; color: var(--titulo); }

/* À direita, as etapas: a do meio da tela acende, as outras ficam apagadas */
.passos {
  grid-column: 7 / span 6;
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0 0 18vh;
  list-style: none;
}

.passo {
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid var(--linha);
  border-radius: 22px;
  background: var(--tinta);
  opacity: .34;
  transition: opacity .6s var(--ease), border-color .6s var(--ease);
}
.passo.is-atual { opacity: 1; border-color: var(--linha-forte); }

.passo__etapa { font-size: var(--t-14); color: var(--suave); }
.passo__nome {
  margin: 6px 0 22px;
  font: 400 clamp(1.75rem, 1.4rem + .9vw, 2.25rem)/1.1 var(--f-titulo);
  letter-spacing: -.015em;
}

.passo__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.passo__voce,
.passo__gente {
  padding: 18px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--fundo);
}
.passo__quem {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--lead);
}
.passo__quem svg { width: 14px; height: 14px; flex: none; }
.passo__gente .passo__quem { color: var(--dourado); }
.passo__duo p { font-size: var(--t-16); line-height: 1.5; }

@media (max-width: 1040px) {
  .processo__lado { position: static; grid-column: 1 / -1; }
  .passos { grid-column: 1 / -1; padding-bottom: 0; }
  .contador { display: none; }
  .passo { opacity: 1; }
}

/* Notebook de tela baixa: a coluna fixa com o contador encolhe para caber
   entre a barra do topo e o fim da tela, sem cortar "Entrega a partir de
   15 dias" embaixo */
@media (min-width: 1041px) and (max-height: 860px) {
  .processo__lado { gap: 12px; top: calc(var(--topo) + 20px); }
  .contador { gap: 6px; margin-top: 14px; }
  .contador__num b { font-size: clamp(2.75rem, 2rem + 2vw, 4rem); }
  .contador__nome { font-size: var(--t-21); }
  .processo__prazo { font-size: var(--t-14); }
}

@media (min-width: 1041px) and (max-height: 700px) {
  .processo__lado { gap: 8px; top: calc(var(--topo) + 12px); }
  .processo__lado .apoio { display: none; }
  .contador { margin-top: 10px; }
}

@media (max-width: 700px) {
  .passo__duo { grid-template-columns: 1fr; }
}

/* ------------------------------------------------ Projetos entregues --- */
/* O trilho de projetos já traz o próprio respiro no alto, então os planos
   fecham com menos espaço embaixo */
.planos { padding-bottom: calc(var(--secao) * .35); }
.projetos { padding-block: 0; }
.projetos + .depoimentos { padding-top: clamp(48px, 6vw, 88px); }

.trilho__palco {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(32px, 4vw, 52px);
  padding-block: var(--secao);
  overflow: hidden;
}

.trilho__cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
}
.trilho__cabeca .rotulo { margin-bottom: 18px; }
.trilho__dica {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-14);
  color: var(--corpo);
  white-space: nowrap;
}
.trilho__dica svg { width: 16px; height: 16px; }

.trilho__faixa {
  --obra-largura: min(64vw, 860px, calc((100vh - 400px) * 1.66));
  display: flex;
  align-items: flex-start;
  gap: var(--vao);
  width: max-content;
  padding-inline: max(var(--margem), calc((100vw - var(--largura)) / 2 + var(--margem)));
}

.obra { flex: none; display: grid; gap: 18px; width: var(--obra-largura); margin: 0; }

.obra__janela {
  overflow: hidden;
  border: 1px solid var(--linha-forte);
  border-radius: 16px;
  background: var(--tinta);
}
.obra__barra {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--linha);
  background: var(--tinta-2);
}
.obra__barra i { width: 10px; height: 10px; flex: none; border-radius: 50%; background: rgba(220, 231, 242, .16); }
.obra__barra::after { content: ""; width: 44px; flex: none; }
.obra__barra span {
  margin: 0 auto;
  padding: 3px 14px;
  border-radius: 7px;
  background: var(--fundo);
  font-size: 13px;
  color: var(--corpo);
}
.obra__janela img { width: 100%; height: auto; aspect-ratio: 1366 / 794; object-fit: cover; }

.obra figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.obra__nome { font: 400 var(--t-24)/1.2 var(--f-titulo); letter-spacing: -.01em; color: var(--titulo); }
.obra__tipo { font-size: var(--t-14); color: var(--corpo); }

/* Fecha o trilho com a mesma altura dos prints, sem acompanhar a legenda */
.obra--fim {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
  width: min(40vw, 480px);
  height: calc(var(--obra-largura) * 794 / 1366 + 42px);
  padding: 48px;
  border: 1px dashed var(--linha-forte);
  border-radius: 22px;
}
.obra--fim p {
  font: 400 clamp(1.9rem, 1.4rem + 1.2vw, 2.6rem)/1.1 var(--f-titulo);
  letter-spacing: -.02em;
  color: var(--destaque);
  text-wrap: balance;
}

/* Com a rolagem lateral ligada, a seção fica parada enquanto a faixa anda */
.trilho--vivo .trilho__palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding-block: calc(var(--topo) + 24px) 32px;
}
.trilho--vivo .trilho__faixa { will-change: transform; }

@media (max-width: 1040px) {
  .trilho__cabeca { flex-direction: column; align-items: flex-start; }
  .trilho__dica { display: none; }
  .trilho__faixa {
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--margem);
    padding-bottom: 12px;
    scrollbar-width: none;
  }
  .trilho__faixa::-webkit-scrollbar { display: none; }
  .obra { width: 84vw; scroll-snap-align: start; }
  .obra--fim { width: 84vw; height: auto; padding: 32px; }
}

/* ------------------------------------------------------- Depoimentos --- */
.depoimentos__cabeca {
  display: grid;
  gap: 18px;
  max-width: 820px;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.citacoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vao);
}

.citacao {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0;
  padding: clamp(26px, 2.6vw, 34px);
  border: 1px solid var(--linha);
  border-radius: 22px;
  background: var(--tinta);
}

.citacao blockquote {
  margin: 0;
  font-size: var(--t-16);
  line-height: 1.7;
  color: rgba(247, 249, 251, .74);
  text-wrap: pretty;
}

/* O trecho mais forte de cada depoimento, em dourado */
.citacao mark { background: none; color: var(--dourado); }

.citacao figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.citacao__avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--tinta-2);
  border: 1px solid var(--linha-forte);
  font-size: var(--t-14);
  font-weight: 500;
  color: var(--titulo-escuro);
}
.citacao__quem { display: grid; gap: 2px; font-size: var(--t-14); }
.citacao__nome { font-weight: 500; font-size: var(--t-16); color: var(--titulo); }
.citacao__cargo { color: var(--corpo); }

@media (max-width: 1040px) {
  .citacoes { grid-template-columns: 1fr; max-width: 680px; }
}

/* ------------------------------------------------------------- Sobre --- */
.sobre__grade { align-items: center; row-gap: 36px; }

.sobre__foto {
  grid-column: 1 / span 5;
  width: 100%;
  height: auto;
  border-radius: var(--raio-midia);
}

.sobre__texto {
  grid-column: 7 / span 6;
  display: grid;
  gap: 20px;
}
.sobre__texto p { max-width: 56ch; }
.sobre__texto .fatos { margin-top: 8px; }

@media (max-width: 860px) {
  .sobre__foto { grid-column: 1 / -1; max-width: 420px; }
  .sobre__texto { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ Planos --- */
.planos__cabeca {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(40px, 6vw, 68px);
}

.precos {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.preco {
  display: grid;
  grid-template-columns: 56px repeat(11, minmax(0, 1fr));
  gap: 16px var(--vao);
  align-items: center;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--linha);
  border-radius: var(--raio-painel);
  background: var(--tinta);
  transition: border-color .25s var(--ease);
}
.preco:hover { border-color: var(--linha-forte); }

.preco__esquema {
  grid-column: 1;
  width: 48px;
  height: 34px;
  color: var(--ponto);
}

.preco__nome { grid-column: 2 / span 3; display: grid; gap: 6px; }
.preco__nome h3 { font: 400 clamp(1.375rem, 1.2rem + .5vw, 1.75rem)/1.15 var(--f-titulo); letter-spacing: -.012em; }
.preco__nome p { font-size: var(--t-14); }

.preco__detalhe { grid-column: 5 / span 4; display: grid; gap: 12px; }
.preco__detalhe > p { font-size: var(--t-14); }

.selos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.selos li {
  padding: 4px 11px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  font-size: var(--t-12);
  line-height: 1.4;
  color: var(--corpo);
}

.preco__valor { grid-column: 9 / span 2; display: grid; gap: 2px; }
.preco__valor small { font-size: var(--t-12); color: var(--suave); }
.preco__valor b {
  font: 400 clamp(1.625rem, 1.3rem + .8vw, 2.125rem)/1 var(--f-titulo);
  color: var(--destaque);
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.preco__valor--consulta b { font-size: var(--t-18); color: var(--corpo); }

.preco .botao { grid-column: 11 / span 2; justify-self: end; }

.manutencao {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px var(--vao);
  align-items: baseline;
  margin-top: 12px;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--linha);
  border-radius: var(--raio-painel);
}
.manutencao h3 { grid-column: 1 / span 4; font: 400 var(--t-24)/1.2 var(--f-titulo); }
.manutencao p { grid-column: 5 / span 5; font-size: var(--t-14); }
.manutencao .link { grid-column: 10 / span 3; justify-self: end; font-size: var(--t-14); }

@media (max-width: 1100px) {
  .preco {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: start;
  }
  .preco__esquema { grid-row: 1 / span 2; }
  .preco__nome { grid-column: 2 / span 2; }
  .preco__detalhe { grid-column: 2 / span 2; }
  .preco__valor { grid-column: 2; align-self: end; }
  .preco .botao { grid-column: 3; align-self: end; }

  .manutencao { grid-template-columns: 1fr; }
  .manutencao h3,
  .manutencao p,
  .manutencao .link { grid-column: 1; justify-self: start; }
}

@media (max-width: 560px) {
  .preco { grid-template-columns: 1fr; }
  .preco__esquema { grid-row: auto; }
  .preco__nome,
  .preco__detalhe,
  .preco__valor,
  .preco .botao { grid-column: 1; justify-self: start; }
}

/* ----------------------------------------------------------- Dúvidas --- */
.duvidas__lado {
  grid-column: 1 / span 4;
  align-self: start;
  position: sticky;
  top: calc(var(--topo) + 32px);
  display: grid;
  gap: 18px;
}

.lista-duvidas {
  grid-column: 6 / span 7;
  border-top: 1px solid var(--linha-forte);
}

.duvida { border-bottom: 1px solid var(--linha); }

.duvida summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  font: 400 var(--t-21)/1.35 var(--f-texto);
  color: var(--titulo);
  list-style: none;
  cursor: pointer;
}
.duvida summary::-webkit-details-marker { display: none; }
.duvida summary svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--suave);
  transition: transform .3s var(--ease), color .2s;
}
.duvida summary:hover svg { color: var(--titulo); }
.duvida[open] summary svg { transform: rotate(45deg); color: var(--destaque); }

.duvida p {
  max-width: 60ch;
  padding-bottom: 24px;
}
.duvida[open] p { animation: surgir .35s var(--ease); }

@media (max-width: 1040px) {
  .duvidas__lado { position: static; grid-column: 1 / -1; margin-bottom: 32px; }
  .lista-duvidas { grid-column: 1 / -1; }
  .duvida summary { font-size: var(--t-18); }
}

/* ----------------------------------------------------------- Contato --- */
.contato .grade { row-gap: 44px; align-items: start; }

.contato__texto {
  grid-column: 1 / span 5;
  display: grid;
  gap: 20px;
  position: sticky;
  top: calc(var(--topo) + 32px);
  justify-items: start;
}

.formulario {
  grid-column: 7 / span 6;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.campo { display: grid; gap: 7px; }
.campo--inteiro,
.formulario__legenda,
.formulario__enviar,
.formulario__status { grid-column: 1 / -1; }

.campo label { font-size: var(--t-14); font-weight: 500; color: var(--titulo); }
.obrigatorio { color: var(--azul-oli); font-weight: 500; }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--linha-forte);
  border-radius: 10px;
  background: var(--papel);
  color: var(--titulo-claro);
  font: 400 var(--t-16)/1.4 var(--f-texto);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.campo textarea { resize: vertical; min-height: 126px; }
.campo input::placeholder,
.campo textarea::placeholder { color: var(--suave-claro); }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: #B9C6D6; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  background: var(--branco);
  border-color: var(--azul-oli);
}

.campo select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2324548C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.formulario__isca { position: absolute; left: -9999px; }

.formulario__legenda { font-size: var(--t-14); color: var(--suave); }
.formulario__enviar { justify-self: start; }
.formulario__enviar:disabled { opacity: .7; cursor: default; }

.formulario__status {
  padding: 14px 16px;
  border-radius: 10px;
  font-size: var(--t-16);
  background: var(--papel);
  border: 1px solid var(--azul-oli);
  color: var(--titulo);
}
.formulario__status--erro { border-color: #B4442F; }

@media (max-width: 1040px) {
  .contato__texto { position: static; grid-column: 1 / -1; }
  .formulario { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .formulario { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ Rodapé --- */
.rodape { padding-block: 56px 40px; background: var(--fundo); }

.rodape__grade {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px 40px;
  align-items: center;
}

.rodape__frase { color: var(--suave-escuro); font-size: var(--t-16); }

.rodape__links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--t-14); }
.rodape__links a { color: var(--corpo-escuro); text-decoration: none; }
.rodape__links a:hover { color: var(--titulo-escuro); }

.rodape__base {
  grid-column: 1 / -1;
  padding-top: 24px;
  border-top: 1px solid var(--linha-escura);
  font-size: var(--t-14);
  color: var(--suave-escuro);
}

@media (max-width: 860px) {
  .rodape__grade { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------- Menos movimento - */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}