/* Fumaça atrás do texto. O sulco de pneu liga as seções, quase transparente. */

.pista-ar {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(460px 300px at 12% 88%, rgba(188, 196, 180, 0.2), transparent 70%),
    radial-gradient(540px 360px at 86% 12%, rgba(78, 98, 74, 0.22), transparent 68%),
    radial-gradient(380px 240px at 48% 42%, rgba(143, 206, 106, 0.07), transparent 72%);
}
.pista-fumaca {
  width: 100%;
  height: 100%;
  display: block;
}

body.sell .aida {
  grid-template-columns: 1fr 34px 1fr 34px 1fr 34px 1fr;
  align-items: center;
  gap: 8px;
}
.elo,
.liga {
  pointer-events: none;
  background: url("./img/pista/trilho.svg") repeat-x center / auto 100%;
}
.liga {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.elo {
  display: block;
  height: 26px;
  opacity: 0.28;
}
.liga {
  position: relative;
  z-index: 2;
  height: 22px;
  width: min(560px, 62%);
  margin: 0 auto -12px;
  opacity: 0.16;
}

@media (prefers-reduced-motion: no-preference) {
  .stage { animation: stage-in 0.4s ease; }
}
@keyframes stage-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.result-visual {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}
body.sell .declared { padding-bottom: 36px; }
.tacho { position: relative; z-index: 3; margin: 0; width: min(280px, 100%); text-align: center; }
.tacho svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.35)); }
.tacho figcaption { margin: 2px 0 0; }
.tacho figcaption b {
  display: block;
  color: #f4f7fb;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}
.tacho figcaption span {
  display: block;
  margin-top: 6px;
  color: #8fce6a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.tacho-track { fill: none; stroke: rgba(244, 247, 251, 0.16); stroke-width: 4; stroke-linecap: butt; }
.tacho-go { fill: none; stroke: #8fce6a; stroke-width: 4; stroke-linecap: butt; }
.tacho-line { fill: none; stroke: #ff4d1c; stroke-width: 4; stroke-linecap: butt; }
.tacho-tick { stroke: rgba(244, 247, 251, 0.72); stroke-width: 1.25; stroke-linecap: butt; }
.tacho-label { fill: #d5ddd0; font: 600 13px Outfit, system-ui, sans-serif; }
.tacho-needle {
  transform-box: view-box;
  transform-origin: 140px 150px;
  transform: rotate(-120deg);
}
.tacho.run .tacho-needle { transform: rotate(var(--tacho-end, 80deg)); }
.tacho-needle polygon { fill: #f4f7f1; }
.tacho-go,
.tacho-needle {
  transition: stroke-dashoffset 1.35s cubic-bezier(0.16, 0.84, 0.32, 1), transform 1.35s cubic-bezier(0.16, 0.84, 0.32, 1);
}
@media (max-width: 980px) {
  .result-visual { grid-template-columns: 1fr; justify-items: center; }
  .tacho { width: min(260px, 86vw); }
  body.sell .aida { grid-template-columns: 1fr 1fr; }
  .elo { display: none; }
  .liga { width: min(420px, 78%); opacity: 0.14; }
}
@media (max-width: 640px) {
  body.sell .aida { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .stage { animation: none; }
}

/* Feed: linha e título. O card fica só no WhatsApp e no botão. */
body.sell .proof,
body.sell .tour,
body.sell .declared,
body.sell .sistema,
body.sell .sim,
body.sell .compare,
body.sell .people,
body.sell .plans,
body.sell .founders,
body.sell .faq,
body.sell .close,
body.sell .politica,
body.sell .quotes {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
body.sell .kicker {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
body.sell .beneficios {
  gap: 0 36px;
}
body.sell .beneficios li,
body.sell .inbox p,
body.sell .owner li,
body.sell .card,
body.sell .card li,
body.sell .tour-card li,
body.sell .metrics p,
body.sell .kanban p,
body.sell .pol-grid article,
body.sell .chart-card,
body.sell .screens figure,
body.sell .stage,
body.sell .tour-card,
body.sell .plan,
body.sell .plan.pick,
body.sell .quotes article,
body.sell .facts article {
  background: none;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.sell .beneficios li,
body.sell .inbox p,
body.sell .owner li,
body.sell .card li,
body.sell .tour-card li,
body.sell .metrics p,
body.sell .kanban p {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.sell .stage,
body.sell .tour-card {
  padding: 22px 0 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
body.sell .tour-frame,
body.sell .sim-feed,
body.sell .inbox,
body.sell .card ul,
body.sell .owner {
  gap: 0 40px;
}
body.sell .sim-feed,
body.sell .inbox,
body.sell .card ul,
body.sell .owner {
  grid-template-columns: 1fr;
}
body.sell #panel-chega,
body.sell #panel-filtra,
body.sell #panel-ve,
body.sell #panel-responde {
  grid-column: auto;
  grid-row: auto;
}
body.sell .card { padding: 0; gap: 0; }
body.sell .wa { max-width: 520px; }
body.sell .plan-grid { gap: 0; }
body.sell .plan {
  padding: 4px 28px 8px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
body.sell .plan .who {
  padding: 0;
  background: none;
}
body.sell .plan:last-child { border-right: 0; padding-right: 0; }
body.sell .screens figure { overflow: visible; }
body.sell .screens img,
body.sell .proof img,
body.sell .founders img { border-radius: 24px; }
body.sell .quotes article {
  width: 440px;
  padding: 0 28px 0 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
body.sell .pol-grid { gap: 0 28px; }
body.sell .pol-grid article {
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 980px) {
  body.sell .proof,
  body.sell .sistema,
  body.sell .sim,
  body.sell .compare,
  body.sell .people,
  body.sell .plans,
  body.sell .founders,
  body.sell .faq,
  body.sell .close,
  body.sell .politica {
    border-radius: 0;
    margin-top: 0;
  }
  body.sell .plan { border-right: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 18px 0; }
}
@media (prefers-reduced-motion: no-preference) {
  body.sell .facts article,
  body.sell .plan,
  body.sell .compare article,
  body.sell .aida a { animation: none; }
  body.sell .plan:hover,
  body.sell .compare article:hover,
  body.sell .facts article:hover,
  body.sell .aida a:hover,
  body.sell .screens figure:hover,
  body.sell .hero-points li:hover,
  body.sell .pol-grid article:hover {
    transform: none;
    box-shadow: none;
  }
}

.liga { display: none; }

/* Leitura em Z: título à esquerda, frase à direita, ação no fim da linha.
   Esse "display:contents" é só pras secoes z-topo (site-modelo, painel),
   nao pro hero -- la ele fazia pilula/titulo/botoes virarem itens soltos
   do grid .hero-top, cada um esticando pra propria linha e criando vaos
   gigantes entre eles. */
.z-topo .copy { display: contents; }
body.sell .hero .kicker,
body.sell .hero h1,
body.sell .hero .lede { grid-column: 1; }
body.sell .hero h1 { max-width: 14em; font-size: clamp(32px, 3vw, 46px); }
body.sell .hero .lede { grid-column: 1; max-width: 28ch; margin-top: 16px; color: #e4ecdf; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -0.02em; line-height: 1.35; }
body.sell .hero-model { grid-column: 2; }
/* .hero .actions saiu do grid direto do .hero-top (agora vive dentro
   de .copy, junto com o h1) -- regras antigas de grid-column/align-self
   nao se aplicam mais, removidas. */
body.sell .z-topo {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(180px, 0.75fr);
  gap: 12px 36px;
  align-items: end;
}
/* Pedido do dono: centralizar todos os titulos -- Site/Painel/Planos
   tem so 1 filho dentro do .z-topo (texto da coluna direita ja foi
   removido numa correcao anterior), entao vira bloco unico
   centralizado em vez de ficar preso na coluna 1 do grid. */
#site-modelo .z-topo,
#planos .z-topo {
  display: block;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
body.sell .z-lado {
  margin: 0;
  text-align: right;
  color: #f4f7fb;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.25;
}
body.sell .z-baixo {
  margin: 8px 0 0;
  max-width: 36rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.45;
}
body.sell .proof.z {
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  align-items: end;
}
body.sell .proof.z .z-leitura { grid-column: 1; }
body.sell .proof.z figure { grid-column: 2; grid-row: 1; }
body.sell .proof.z .z-acao { grid-column: 2; }
body.sell .z-acao { justify-self: end; }
body.sell .btn:not(.ghost) {
  animation: lead-glow 2.8s ease-in-out infinite, pulso 2.4s ease-in-out infinite;
}
body.sell .btn:not(.ghost)::after {
  display: inline-block;
  animation: seta 1.5s ease-in-out infinite;
}
@keyframes pulso {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
@keyframes seta {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
@media (max-width: 980px) {
  /* .hero .copy vira display:contents (nao flex) no mobile -- pedido
     do dono: titulo -> video do carro -> botoes (nao titulo+botoes
     juntos antes do video). Ver venda.css pros "order" de cada filho
     (.hero h1 / .hero-model / .hero .actions) e detalhes completos. */
  body.sell .hero .copy { display: contents; }
  body.sell .hero-model { grid-column: auto; grid-row: auto; }
  body.sell .hero .actions { grid-column: auto; justify-content: flex-start; }
  body.sell .z-topo,
  body.sell .proof.z { grid-template-columns: 1fr; }
  body.sell .z-lado { text-align: left; }
  body.sell .proof.z figure,
  body.sell .proof.z .z-acao,
  body.sell .z-acao { grid-column: 1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  body.sell .btn:not(.ghost) { animation: lead-glow 2.8s ease-in-out infinite; }
  body.sell .btn:not(.ghost)::after { animation: none; }
}

/* Coluna curta ao lado de coluna alta deixava vão preto. Tudo segue em uma faixa. */
body.sell .sim-feed,
body.sell .tour-frame,
body.sell .beneficios {
  grid-template-columns: 1fr;
}
body.sell #panel-responde,
body.sell .tour-frame .tour-card,
body.sell .tour-frame .sim-note {
  grid-column: 1;
  grid-row: auto;
}
body.sell .wa { max-width: none; width: 100%; }
body.sell .tour-frame .tour-card:nth-child(4) ul { grid-template-columns: 1fr; }

/* Hero ocupa a primeira tela. A rolagem vertical da página segue depois.
   svh (small viewport height), nao dvh -- dvh muda em tempo real no
   mobile conforme a barra de enderecos aparece/some durante o scroll,
   fazendo o hero (e tudo que depende dele) "pular" de tamanho. */
body.sell .hero {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 72px);
  padding: 12px 0 0;
}
body.sell .hero-top {
  flex: 1 1 auto;
  align-content: center;
  align-items: center;
  padding: 0 var(--pad);
}
@media (min-width: 981px) {
  body.sell .hero-model video {
    height: min(540px, calc(100svh - 340px));
  }
}
.marcas {
  container-type: inline-size;
  flex: 0 0 auto;
  margin-top: auto;
  width: 100%;
  overflow: hidden;
  padding: 18px 0 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marcas-trilho {
  display: flex;
  width: max-content;
  animation: marcas-ltr 18s linear infinite;
}
.marcas-grupo {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 64px;
  min-width: 100cqi;
  margin: 0;
  padding: 0 32px;
  list-style: none;
  flex: none;
}
.marcas li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(244, 247, 251, 0.88);
  white-space: nowrap;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 14px;
}
.marcas img {
  height: 32px;
  width: 64px;
  object-fit: contain;
  object-position: center;
  display: block;
}
@keyframes marcas-ltr {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* Coluna editorial. Texto e imagem no mesmo bloco, sem frase solta na outra ponta. */
body.sell .z-topo {
  grid-template-columns: minmax(0, 40rem);
  gap: 8px;
}
body.sell .z-lado,
body.sell .z-baixo {
  text-align: left;
  max-width: 38rem;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}
body.sell .z-acao { justify-self: start; }
body.sell .proof,
body.sell .sistema,
body.sell .tour,
body.sell .sim,
body.sell .declared,
body.sell .plans,
body.sell .founders,
body.sell .politica,
body.sell .quotes {
  width: min(1120px, calc(100% - clamp(32px, 6vw, 80px)));
  margin-inline: auto;
  padding: 56px 0 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.sell .faq,
body.sell .close {
  width: min(720px, calc(100% - clamp(32px, 6vw, 80px)));
  margin-inline: auto;
  padding: 56px 0 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.sell .beneficios {
  counter-reset: passo;
  gap: 0 28px;
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
body.sell .beneficios li {
  padding: 16px 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
body.sell .beneficios li::before {
  counter-increment: passo;
  content: counter(passo, decimal-leading-zero);
  display: block;
  margin-bottom: 8px;
  color: #8fce6a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
}
body.sell .screens { gap: 20px; margin-top: 22px; }
body.sell .screens figure { border-radius: 24px; }
body.sell .screens img { height: 280px; object-fit: cover; object-position: top center; border-radius: 24px; }
body.sell .screens figcaption { padding: 12px 0 0; }
body.sell .politica .pol-grid { grid-template-columns: 1fr 1fr; gap: 8px 32px; }

body.sell .quotes {
  display: block;
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}
body.sell .quotes .sim-note { margin: 0 0 16px; text-align: left; max-width: 52rem; }
body.sell .quotes-janela {
  display: grid;
  gap: 8px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
body.sell .quotes-track {
  display: flex;
  gap: 36px;
  width: max-content;
  animation: slide 55s linear infinite;
}
body.sell .quotes-track.back { display: flex; animation: slide 65s linear infinite reverse; }
body.sell .quotes-track article,
body.sell .quotes-track article:nth-child(n+7) {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 420px;
  flex: none;
  margin: 0;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.sell .quotes img:not(.google-g) {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  box-shadow: none;
}

@media (min-width: 981px) {
  body.sell .proof.z {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: stretch;
    gap: 16px 40px;
  }
  body.sell .proof.z .z-leitura { grid-column: 1; grid-row: 1; align-self: end; }
  body.sell .proof.z figure { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  body.sell .proof.z .z-acao { grid-column: 1; grid-row: 2; align-self: start; }
  body.sell .proof img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    max-height: 420px;
    object-fit: cover;
  }
  body.sell .beneficios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.sell .tour-frame {
    grid-template-columns: 1fr 1fr;
    gap: 8px 36px;
  }
  body.sell .tour-frame .tour-card,
  body.sell .tour-frame .sim-note { grid-column: auto; grid-row: auto; }
  body.sell .tour-frame .tour-card {
    padding: 16px 0 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  body.sell .tour-frame .sim-note { grid-column: 1 / -1; }
  body.sell .tour-frame .kanban { grid-template-columns: 1fr 1fr; }
  body.sell .tour-frame .tour-card:nth-child(4) ul { grid-template-columns: 1fr; }
  /* Secao simplificada (pedido do dono): so titulo centralizado +
     video do celular centralizado abaixo, sem texto lateral nem CTA
     -- layout de grid de 6 colunas com texto a esquerda nao faz mais
     sentido, vira coluna unica centralizada. */
  body.sell .sim {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  body.sell .sim > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  body.sell .sim-feed { display: flex; justify-content: center; }
  /* BUG REAL corrigido: max-width:420px fixo + aspect-ratio:328/710
     forcava a ALTURA do celular em ~909px sempre (420 * 710/328),
     nao importa quanto espaco sobrava na tela -- numa viewport de
     900px isso estourava e cortava a conversa embaixo, sem mostrar
     a ultima mensagem nem o campo de digitar. Trocado pra limitar
     por ALTURA (max-height calculada do espaco real disponivel: svh
     menos menu, padding e bloco do titulo) com width:auto -- o
     aspect-ratio resolve a largura a partir da altura disponivel,
     entao o celular sempre cabe na tela inteira, sem cortar nada. */
  body.sell #simula .wa-video-wrap {
    max-width: 420px;
    width: auto;
    height: calc(100svh - 72px - 64px - 140px);
    max-height: calc(100svh - 72px - 64px - 140px);
  }
  body.sell .declared {
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
    align-items: center;
    gap: 20px 40px;
  }
  body.sell .declared .z-acao { grid-column: 1; }
  body.sell .result-visual { grid-template-columns: 180px minmax(0, 1fr); gap: 16px; }
  body.sell .founders {
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    gap: 28px 40px;
  }
  body.sell .founders .pair { max-width: 640px; margin: 0 auto; }
  body.sell .founders img { height: 380px; object-fit: cover; object-position: center 12%; }
  body.sell .plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 22px;
  }
  body.sell .plan {
    padding: 0;
    border: 0;
  }
  body.sell .plan.pick { box-shadow: inset 0 2px 0 #ff7a1a; padding-top: 14px; }
}

@media (max-width: 980px) {
  body.sell .politica .pol-grid { grid-template-columns: 1fr; }
  body.sell .proof img { height: 240px; min-height: 0; max-height: none; }
}

body.sell .hero-model video,
body.sell .proof img,
body.sell .screens img,
body.sell .founders img,
body.sell .quotes img {
  border-radius: 24px;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.7s ease;
}
body.sell .quotes img { border-radius: 18px; }
body.sell .proof figure:hover img,
body.sell .screens figure:hover img,
body.sell .founders figure:hover img,
body.sell .quotes article:hover img {
  transform: scale(1.035);
  filter: saturate(1.05);
}
@media (prefers-reduced-motion: no-preference) {
  body.sell .proof img,
  body.sell .screens img,
  body.sell .founders img {
    animation: foto-entra 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  body.sell .screens figure:nth-child(2) img { animation-delay: 0.12s; }
  body.sell .founders figure:nth-child(2) img { animation-delay: 0.1s; }
}
@keyframes foto-entra {
  from { opacity: 0; transform: scale(1.045); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.sell .proof figure:hover img,
  body.sell .screens figure:hover img,
  body.sell .founders figure:hover img,
  body.sell .quotes article:hover img { transform: none; filter: none; }
}

/* O quadro fica parado. A foto aumenta dentro do canto. */
body.sell .moldura {
  display: block;
  overflow: hidden;
  border-radius: 28px;
  width: 100%;
}
body.sell .moldura img,
body.sell .hero-model video {
  border-radius: 0;
  width: 100%;
  display: block;
}
body.sell .hero-model {
  overflow: hidden;
  border-radius: 28px;
}
body.sell .hero-model video {
  mask-image: none;
  -webkit-mask-image: none;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.sell .hero-model:hover video { transform: scale(1.04); }
body.sell .screens {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
body.sell .screens .moldura img { height: 340px; object-fit: cover; }
body.sell .wa-shot {
  border-radius: 12px;
  /* overflow:hidden removido: a altura da .wa-shot (linha do grid) nao
     acompanha a foto por bug de calculo do CSS Grid com width percentual;
     o corte real ja acontece dentro de .moldura, que tem o proprio
     overflow:hidden + altura fixada via JS quando a foto aparece. */
}
body.sell .wa-shot .moldura { border-radius: 8px; overflow: hidden; }
body.sell .wa-shot img {
  border-radius: 0;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.sell .wa-shot:hover img { transform: scale(1.04); }
body.sell .quotes img:not(.google-g) {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

/* Desktop (>=981px): titulos centralizados e secoes reequilibradas.
   Pedido do dono (23/10 noite): "na versao do pc tem que centralizar
   os titulos, e ajustar as secoes". So roda em desktop -- mobile
   mantem o layout empilhado ja existente, nada aqui tem efeito abaixo
   de 981px. Bloco vive em pista.css (ultimo arquivo carregado no head)
   pra vencer as regras equivalentes definidas em venda.css. */
@media (min-width: 981px) {
  /* Resultado (depoimentos): texto + velocimetro viram bloco unico
     centralizado em vez de grid 2-colunas encostado a esquerda. */
  body.sell .declared {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 20px;
  }
  body.sell .declared > div:first-child { max-width: 44rem; }
  body.sell .declared .lede { margin-left: auto; margin-right: auto; }
  body.sell .declared .z-acao { justify-self: center; grid-column: auto; }
  body.sell .declared .result-visual {
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
  }

  /* Mapa do Brasil: kicker/h2/lede centralizados acima do mapa, botao
     centralizado -- o SVG do mapa nao e tocado. */
  .mapa-brasil-topo {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    justify-items: center;
  }
  body.sell .mapa-brasil-topo h2,
  body.sell .mapa-brasil-topo .kicker,
  body.sell .mapa-brasil-topo .lede { text-align: center; }
  .mapa-brasil-topo .lede { margin-left: auto; margin-right: auto; text-wrap: balance; }
  .mapa-brasil-topo .btn.ghost { justify-self: center; }

  /* Planos: o cabecalho em "leitura Z" (titulo a esquerda, frase a
     direita) vira bloco centralizado, com a frase secundaria (.z-lado)
     abaixo do titulo em vez de ao lado. Site-modelo e Painel (.tour)
     ficam de fora -- pedido do dono: titulo e subtitulo estendidos na
     largura toda, igual ao resto do site, sem agrupar/centralizar. */
  body.sell .plans .z-topo {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    max-width: 48rem;
    margin: 0 auto;
    gap: 10px;
  }
  body.sell .plans .z-topo .lede {
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
  }
  body.sell .plans .z-topo .z-lado {
    text-align: center;
    margin: 4px auto 0;
  }

  /* Fundadores: so as fotos agora, sem texto (kicker/h2/lede/lista/CTA
     removidos a pedido do dono) -- grid vira coluna unica centralizada. */
  body.sell .founders {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 20px;
  }
  body.sell .founders .pair { max-width: 420px; margin: 0 auto; }

  /* Duvidas (FAQ): kicker/h2 centralizados acima do accordion, que
     continua com o mesmo alinhamento de leitura (esquerda) dentro do
     bloco central -- so o titulo da secao muda. */
  body.sell .faq > .kicker,
  body.sell .faq > h2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  body.sell .faq > h2 { max-width: 20ch; }

  /* Atendentes: o bloco de teste abaixo da foto fica centralizado na
     mesma largura de leitura do topo (sem mudar nada da foto/formulario). */
  .atendentes-teste { max-width: 760px; margin-left: auto; margin-right: auto; }

  /* Pedido do dono: cada opcao do menu e uma secao bem definida que
     ocupa a tela inteira no desktop, conteudo bem distribuido na
     altura (nao cortado) -- mesma logica ja aplicada no mobile pra
     #simula, agora pras secoes principais do desktop. min-height (nao
     height fixo) garante que secao com mais conteudo que a tela cresce
     em vez de cortar informacao. place-content centraliza verticalmente
     sem mexer no display:grid que cada secao ja usa internamente (nao
     forca flex, que quebraria o grid de colunas existente). */
  #simula,
  #depoimentos,
  #planos {
    min-height: calc(100svh - 72px);
    align-content: center;
    padding-top: 0;
    padding-bottom: 12px;
  }
  /* Site/Painel: pedido do dono pra subir titulo+video (antes ficava
     centralizado na vertical com folga grande embaixo) -- alinha
     o conteudo mais pro topo da secao em vez de centralizar exato,
     ficando melhor distribuido com a altura real do video. */
  #site-modelo,
  #painel {
    min-height: calc(100svh - 72px);
    align-content: start;
    padding-top: 48px;
    padding-bottom: 12px;
  }
}