/* ============================================================
   style.css — LP Google AI Pro (oferta 18 meses por R$ 100)
   Herda os componentes do design system do /shild e adiciona
   os blocos específicos desta oferta. Arquivo único, sem build.

   SUMÁRIO
   01. Reset e base
   02. Container
   03. Ícones
   04. Botões
   05. Header
   06. Hero (glow, badge, pills, CTA)
   07. Seções (ritmo, eyebrow, títulos)
   08. Economia (âncora de preço)
   09. Comparação (oficial × promo)
   10. Benefícios (grade de cards)
   11. Como funciona (etapas)
   12. Oferta (card de preço)
   13. Vagas (barra de escassez)
   14. Garantia
   15. FAQ
   16. CTA final
   17. Footer
   18. Prova social (pilha de avatares)
   19. Toggle de tema (claro/escuro)
   20. Animações
   21. Depoimentos e prints (esteira)
   ============================================================ */

/* ========== 01. Reset e base ========== */

*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid var(--border);
  margin: 0;
  padding: 0;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 15px;
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

main { flex: 1; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, svg { display: block; vertical-align: middle; }
img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: -.01em;
}

button { font: inherit; color: inherit; background: none; cursor: pointer; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #c8ccd1;
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: #a8acb1; background-clip: padding-box; }
.dark ::-webkit-scrollbar-thumb { background: #4e4f50; background-clip: padding-box; }
.dark ::-webkit-scrollbar-thumb:hover { background: #6a6b6c; background-clip: padding-box; }

/* ========== 02. Container ========== */

.container { width: 100%; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .container { padding-inline: 1.5rem; } }
.container--md  { max-width: 48rem; }
.container--lg  { max-width: 64rem; }
.container--xl  { max-width: 72rem; }
.container--nav { max-width: 80rem; }

/* ========== 03. Ícones ========== */

.icon-check   { color: var(--success); flex-shrink: 0; }
.icon-x       { color: var(--destructive); flex-shrink: 0; }
.icon-primary { color: var(--primary); }

/* gradiente Gemini para texto (títulos/destaques) */
.text-gradient {
  background-image: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ========== 04. Botões ========== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  white-space: nowrap;
  font-weight: 500;
  border-radius: 9999px;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.btn svg { width: 1rem; height: 1rem; }
.btn__seta { margin-left: .375rem; }

.btn--sm { height: 2.25rem; padding-inline: 1rem;    font-size: .875rem; }
.btn--md { height: 2.75rem; padding-inline: 1.5rem;  font-size: .9375rem; }
.btn--lg { height: 3.25rem; padding-inline: 1.75rem; font-size: 1.0625rem; font-weight: 600; }

.btn--primary { background-color: var(--primary); color: var(--primary-foreground); }
.btn--primary:hover { background-color: color-mix(in srgb, var(--primary) 88%, #000); transform: translateY(-1px); }

/* CTA principal (WhatsApp) — usa o azul primário do DS */
.btn--wa { background-color: var(--primary); color: var(--primary-foreground); }
.btn--wa:hover { background-color: color-mix(in srgb, var(--primary) 88%, #000); transform: translateY(-1px); box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--primary) 55%, transparent); }

.btn--outline { border: 1px solid var(--input); }
.btn--outline:hover { background-color: var(--accent); color: var(--accent-foreground); }

.btn--glass {
  background-color: color-mix(in srgb, var(--card) 60%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
}

.btn--white { background-color: #fff; color: #1a73e8; }
.btn--white:hover { background-color: rgb(255 255 255 / .9); transform: translateY(-1px); }
.btn--ghost { border: 1px solid rgb(255 255 255 / .45); color: #fff; }
.btn--ghost:hover { background-color: rgb(255 255 255 / .12); }

/* ========== 05. Header ========== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: all .3s;
}
.site-header.is-scrolled {
  background-color: color-mix(in srgb, var(--background) 80%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: 0 4px 20px -12px rgb(0 0 0 / .35);
}
.site-header__inner {
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.brand__icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.brand__icon--sm { width: 1.25rem; height: 1.25rem; }

.site-nav { display: none; }
@media (min-width: 1024px) {
  .site-nav { display: flex; align-items: center; gap: .25rem; }
}
.site-nav__link {
  display: inline-flex;
  height: 2.25rem;
  align-items: center;
  border-radius: 9999px;
  padding-inline: .875rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  transition: color .15s, background-color .15s;
}
.site-nav__link:hover {
  background-color: color-mix(in srgb, var(--card) 70%, transparent);
  color: var(--foreground);
}

/* Abaixo de 640px a marca escrita por extenso e o botao de conversao nao
   cabem na mesma linha, e o botao ficava cortado na borda direita. Fica so
   o icone, que ja identifica a oferta. O nome continua sendo anunciado por
   leitor de tela pelo aria-label do proprio link. */
@media (max-width: 639px) {
  .brand > span { display: none; }
  /* alvo de toque um pouco maior que o padrao .btn--sm (36px) */
  .site-header__actions .btn { height: 2.5rem; }
}

/* ========== 06. Hero ========== */

.hero { position: relative; overflow: hidden; }
.hero__glow { pointer-events: none; position: absolute; inset: 0; z-index: -10; }
.hero__glow span { position: absolute; border-radius: 9999px; filter: blur(64px); }
.hero__glow span:nth-child(1) {
  top: -8rem; left: -8rem; width: 36rem; height: 36rem;
  background-color: color-mix(in srgb, var(--glow-1) 22%, transparent); opacity: .6;
}
.hero__glow span:nth-child(2) {
  top: -5rem; right: -4rem; width: 34rem; height: 34rem;
  background-color: color-mix(in srgb, var(--glow-3) 20%, transparent); opacity: .5;
}
.hero__glow span:nth-child(3) {
  top: 40%; left: 40%; width: 28rem; height: 28rem;
  background-color: color-mix(in srgb, var(--glow-2) 20%, transparent); opacity: .4;
}
.hero__inner { padding-top: 3.5rem; padding-bottom: 4rem; text-align: center; }
@media (min-width: 640px) { .hero__inner { padding-top: 5rem; padding-bottom: 5rem; } }

/* badge de escassez (ponto pulsante) */
.badge-live {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  background-color: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
  border-radius: 9999px;
  padding: .375rem 1rem .375rem .75rem;
  margin-bottom: 1.5rem;
  font-size: .8125rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 85%, transparent);
}
.badge-live strong { color: var(--foreground); font-weight: 700; }
.badge-live__dot { position: relative; width: .625rem; height: .625rem; flex-shrink: 0; }
.badge-live__dot::before,
.badge-live__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  background-color: var(--badge-dot, var(--destructive));
}
.badge-live__dot::after { animation: ping 1.4s cubic-bezier(0, 0, .2, 1) infinite; opacity: .75; }

/* Mensagem rotativa: alerta (vermelho, padrão) para escassez/preço e
   ativacao (verde) para as notificacoes de cliente. A troca so acontece
   com o texto invisivel, entao a mudanca de largura da pilula passa
   despercebida. */
.badge-live--ativacao { --badge-dot: var(--success); }
.badge-live__texto { transition: opacity .28s ease; white-space: nowrap; }
.badge-live.is-trocando .badge-live__texto { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .badge-live__texto { transition: none; }
}

.hero__title {
  font-size: 2.35rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.04;
  margin-bottom: .625rem;
  text-wrap: balance;
}
@media (min-width: 640px) { .hero__title { font-size: 3.5rem; } }
@media (min-width: 1024px) { .hero__title { font-size: 4rem; } }
.hero__title-line { display: block; margin-top: .375rem; }

/* subchamada menor, logo abaixo do título grande */
.hero__tagline {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 1.25rem;
}
@media (min-width: 640px) { .hero__tagline { font-size: 1.3125rem; } }

.hero__subtitle {
  font-size: 1.0625rem;
  color: var(--muted-foreground);
  max-width: 38rem;
  margin-inline: auto;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
@media (min-width: 640px) { .hero__subtitle { font-size: 1.1875rem; } }
.hero__subtitle strong { color: var(--foreground); font-weight: 600; }

.hero__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 1.75rem;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem .875rem;
  border-radius: 9999px;
  font-size: .8125rem;
  line-height: 1rem;
  font-weight: 600;
}
.pill svg { width: 1rem; height: 1rem; }
.pill--success {
  background-color: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
}
.pill--neutral {
  background-color: color-mix(in srgb, var(--card) 80%, transparent);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border);
  color: color-mix(in srgb, var(--foreground) 80%, transparent);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}
@media (min-width: 640px) { .hero__actions { flex-direction: row; } }
.hero__note { font-size: .8125rem; line-height: 1.25rem; color: var(--muted-foreground); }

/* ========== 07. Seções ========== */

.section { padding-block: 3.5rem; scroll-margin-top: 5rem; }
@media (min-width: 640px) { .section { padding-block: 5rem; } }
.section--alt { background-color: color-mix(in srgb, var(--secondary) 45%, transparent); }
.section--bordered { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }

.section__eyebrow {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .75rem;
}
.section__title {
  font-size: 1.875rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.025em;
  /* Distribui as linhas do titulo em blocos parecidos, em vez de deixar
     uma palavra solta na ultima linha. */
  text-wrap: balance;
}
@media (min-width: 640px) { .section__title { font-size: 2.25rem; line-height: 1.11; } }
@media (min-width: 1024px) { .section__title--display { font-size: 3rem; line-height: 1.05; } }
.section__lead { font-size: 1.125rem; color: var(--muted-foreground); line-height: 1.6; }
.section__head--center { max-width: 44rem; margin-inline: auto; text-align: center; margin-bottom: 3rem; }
.section__head--center .section__title { margin-bottom: .75rem; }

/* ========== 08. Economia (âncora de preço) ========== */

.economia {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  background-color: var(--card);
  padding: 2.5rem 1.5rem;
  text-align: center;
}
@media (min-width: 640px) { .economia { padding: 3rem; } }
.economia__label {
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted-foreground);
  margin-bottom: .75rem;
}
.economia__valor {
  font-size: clamp(2rem, 8.5vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-bottom: .5rem;
  text-wrap: balance;
}
/* "Economia de" no mesmo tamanho do valor; so o numero fica em azul */
.economia__valor-prefixo { color: var(--foreground); }
.economia__sub { font-size: 1.0625rem; color: var(--muted-foreground); max-width: 34rem; margin-inline: auto; }
.economia__sub strong { color: var(--foreground); font-weight: 700; }
/* "Mais de 94% de desconto" numa linha propria, destacada */
.economia__desconto {
  display: inline-block;
  margin-top: 1rem;
  padding: .5rem 1.125rem;
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
  font-size: 1rem;
  font-weight: 700;
}
.economia__desconto strong { font-weight: 800; }
.economia__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.5rem;
}
.economia__chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem .875rem;
  border-radius: 9999px;
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  font-size: .875rem;
  font-weight: 600;
}
.economia__chip svg { width: 1rem; height: 1rem; color: var(--primary); }

/* ========== 09. Comparação (oficial × promo) ========== */

.compare { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 640px) { .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compare-card {
  background-color: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 1.25rem;
  padding: 1.75rem;
}
.compare-card--promo {
  border: 2px solid var(--primary);
  box-shadow: 0 20px 45px -18px color-mix(in srgb, var(--primary) 45%, transparent);
}
.compare-card__tag {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted-foreground);
  margin-bottom: 1rem;
}
.compare-card--promo .compare-card__tag { color: var(--primary); }
/* Sem tamanho, o icone da etiqueta promo esticava a linha pra 59px contra
   18px do outro card e desalinhava preco, total e lista em ~40px. */
.compare-card__tag svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.compare-card__preco { display: flex; align-items: baseline; gap: .375rem; margin-bottom: .25rem; }
.compare-card__valor { font-size: 2.25rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.compare-card__valor--riscado {
  color: var(--muted-foreground);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--destructive) 70%, transparent);
  font-weight: 700;
}
.compare-card__periodo { font-size: .9375rem; color: var(--muted-foreground); }
/* Cor no preco da oferta, no mesmo degrade da marca. O tamanho continua
   igual ao do outro card pra nao desalinhar as duas colunas. */
.compare-card--promo .compare-card__valor {
  background-image: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.compare-card--promo .compare-card__periodo { color: var(--primary); font-weight: 600; }
.compare-card__total { font-size: .875rem; color: var(--muted-foreground); margin-bottom: .25rem; }
.compare-card__total strong { color: var(--foreground); font-weight: 700; }
.compare-card__nota { font-size: .8125rem; font-weight: 600; color: var(--muted-foreground); margin-bottom: 1rem; }
.compare-card--promo .compare-card__nota { color: var(--success); }

/* Asterisco do preco equivalente: sobe e encolhe pra nao competir com o
   numero. A explicacao dele fica na legenda embaixo dos dois cards. */
.asterisco { font-size: .6em; vertical-align: super; line-height: 0; }
/* Fica logo abaixo do titulo, junto do preco que o asterisco explica. */
.compare__legenda {
  margin-top: .875rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted-foreground);
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}
.compare__legenda strong { color: var(--foreground); font-weight: 600; }
.compare-card__lista { font-size: .875rem; color: var(--muted-foreground); }
.compare-card__lista li { display: flex; gap: .5rem; align-items: flex-start; }
.compare-card__lista li + li { margin-top: .5rem; }
.compare-card__lista svg { width: 1rem; height: 1rem; margin-top: .125rem; }

/* ========== 10. Benefícios ========== */

.beneficios__grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .beneficios__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .beneficios__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.beneficio {
  background-color: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 1.25rem;
  padding: 1.5rem;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.beneficio:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  box-shadow: 0 10px 30px -18px rgb(0 0 0 / .25);
  transform: translateY(-2px);
}
/* logo original do produto, sem tile de fundo — cores da marca */
.beneficio__logo {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.beneficio__logo svg { width: 2.75rem; height: 2.75rem; }
.beneficio__titulo { font-weight: 700; font-size: 1.0625rem; line-height: 1.35; margin-bottom: .375rem; }
.beneficio__desc { font-size: .9375rem; line-height: 1.55; color: var(--muted-foreground); }

/* ========== 11. Como funciona (etapas) ========== */

.etapas { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .etapas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.etapa {
  position: relative;
  background-color: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 1.25rem;
  padding: 1.5rem;
  transition: border-color .15s, box-shadow .15s;
}
.etapa:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
}
.etapa__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background-color: var(--secondary);
  color: var(--primary);
  font-weight: 800;
  font-size: .9375rem;
  margin-bottom: 1rem;
}
.etapa__titulo { font-weight: 700; font-size: 1.0625rem; line-height: 1.35; margin-bottom: .5rem; }
.etapa__desc { font-size: .9375rem; line-height: 1.55; color: var(--muted-foreground); }

/* ========== 12. Oferta (card de preço) ========== */

.oferta { max-width: 34rem; margin-inline: auto; }
.oferta-card {
  position: relative;
  overflow: hidden;
  background-color: var(--card);
  border: 2px solid var(--primary);
  border-radius: 1.5rem;
  padding: 2.5rem 1.75rem;
  box-shadow: 0 30px 60px -25px color-mix(in srgb, var(--primary) 55%, transparent);
  text-align: center;
}
@media (min-width: 640px) { .oferta-card { padding: 3rem 2.5rem; } }
.oferta-card__flag {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  /* Discreta de proposito: com o gradiente cheio e texto branco ela
     competia com o preco, que e o que precisa ser visto primeiro. */
  background-color: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  padding: .375rem 1rem;
  border-radius: 9999px;
  font-size: .8125rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.oferta-card__flag svg { width: .9375rem; height: .9375rem; }
/* O valor cheio precisa ser lido antes de ser riscado: e dele que vem a
   nocao de economia. */
.oferta-card__de { font-size: 1.0625rem; color: var(--muted-foreground); }
.oferta-card__de s {
  color: var(--foreground);
  font-weight: 700;
  text-decoration-color: var(--destructive);
  text-decoration-thickness: 2px;
}
.oferta-card__preco { display: flex; align-items: baseline; justify-content: center; gap: .375rem; margin: .25rem 0; }
.oferta-card__cifra { font-size: 1.75rem; font-weight: 700; align-self: flex-start; margin-top: .5rem; }
.oferta-card__valor { font-size: clamp(3.5rem, 14vw, 4.75rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.oferta-card__unico {
  display: inline-block;
  margin-top: .25rem;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--success);
}
.oferta-card__equivalente { font-size: .9375rem; color: var(--muted-foreground); margin-top: .5rem; }
.oferta-card__features {
  text-align: left;
  margin: 1.75rem 0;
  display: grid;
  gap: .625rem;
  font-size: .9375rem;
}
.oferta-card__features li { display: flex; gap: .625rem; align-items: flex-start; }
.oferta-card__features svg { width: 1.125rem; height: 1.125rem; margin-top: .0625rem; }
.oferta-card__cta { width: 100%; }
.oferta-card__nota { font-size: .8125rem; color: var(--muted-foreground); margin-top: 1rem; }

/* ========== 13. Escassez (condicao de lancamento) ========== */

/* Sem contador e sem barra de progresso nesta secao: a secao fecha com a
   acao em vez de terminar numa caixa de numeros. */
/* Linha do tempo dos lotes. O peso visual vem do "Esgotado" ao lado e do
   preco maior logo a frente. */
.lotes {
  display: grid;
  gap: .75rem;
  margin-top: 2rem;
  list-style: none;
  counter-reset: none;
}
@media (min-width: 720px) { .lotes { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.lote {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding: 1.125rem 1.25rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  background-color: var(--card);
  text-align: center;
}
.lote__nome { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-foreground); }
.lote__preco { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.lote__status { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; font-size: .8125rem; font-weight: 600; }
.lote__status svg { width: .875rem; height: .875rem; }

.lote--fechado { opacity: .72; }
.lote--fechado .lote__preco { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted-foreground) 60%, transparent); }
.lote--fechado .lote__status { color: var(--success); }

.lote--atual { border-color: var(--primary); border-width: 2px; padding-block: calc(1.125rem - 1px); }
.lote--atual .lote__preco { background-image: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lote--atual .lote__status { color: var(--primary); }
.lote__pulso { position: relative; width: .5rem; height: .5rem; border-radius: 9999px; background-color: var(--primary); }
.lote__pulso::after {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  background-color: var(--primary); opacity: .75;
  animation: ping 1.4s cubic-bezier(0, 0, .2, 1) infinite;
}
@media (prefers-reduced-motion: reduce) { .lote__pulso::after { animation: none; } }

.lote--futuro .lote__preco { color: var(--destructive); font-size: 1.25rem; }
.lote--futuro .lote__status { color: var(--muted-foreground); }

/* ========== 13b. Quem atende (apresentacao) ========== */

/* Mesma estrutura da garantia: imagem a esquerda e texto ao lado a partir
   de 900px, coluna unica centralizada abaixo disso. */
.autor {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  justify-items: center;
  text-align: center;
}
/* Foto, texto e redes em tres colunas: as redes ocupam a direita, que antes
   ficava vazia com o texto limitado a 58ch. */
@media (min-width: 900px) {
  .autor { grid-template-columns: auto minmax(0, 1fr) 15rem; gap: 2rem; justify-items: start; text-align: left; }
}
.autor__foto {
  width: 6rem;
  height: 6rem;
  border-radius: 9999px;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--primary) 35%, transparent);
}
.autor__texto { display: flex; flex-direction: column; gap: .625rem; max-width: 58ch; }
.autor__nome { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; }
.autor__texto p { color: var(--muted-foreground); line-height: 1.6; text-wrap: pretty; }
.autor__cargo { font-weight: 600; color: var(--foreground) !important; margin-top: -.25rem; }
.autor__redes { display: flex; flex-direction: column; gap: .5rem; width: 100%; max-width: 17rem; }
.autor__redes a {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .875rem;
  border-radius: .75rem;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background-color: var(--card);
  color: var(--foreground);
  transition: border-color .2s, background-color .2s;
}
.autor__redes a:hover { border-color: var(--primary); background-color: color-mix(in srgb, var(--primary) 8%, var(--card)); }
.autor__redes a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.autor__redes svg { width: 1.125rem; height: 1.125rem; color: var(--primary); flex-shrink: 0; }
.autor__redes span { display: flex; flex-direction: column; font-size: .8125rem; color: var(--muted-foreground); line-height: 1.3; }
.autor__redes strong { font-size: .875rem; font-weight: 700; color: var(--foreground); }

/* ========== 14. Garantia ========== */

/* Garantia e formas de pagamento lado a lado a partir de 1024px: sao as
   duas respostas de risco (e se nao funcionar? e como eu pago?) e ler as
   duas juntas fecha a objecao inteira. */
.confianca { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .confianca { grid-template-columns: repeat(2, 1fr); gap: 3rem; } }
/* No par lado a lado o selo grande nao cabe: encolhe pra caber com o texto. */
@media (min-width: 1024px) {
  .confianca .garantia__selo,
  .confianca .garantia__selo svg { width: 4.5rem; height: 4.5rem; }
}

/* Selo a esquerda e texto ao lado a partir de 900px, os dois alinhados
   pelo centro na vertical. Abaixo disso vira coluna unica, com o selo
   centralizado por cima do texto. */
.garantia {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 900px) { .garantia { grid-template-columns: auto 1fr; } }
.garantia__selo {
  width: 9rem;
  height: 9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  color: var(--primary);
}
.garantia__selo svg { width: 9rem; height: 9rem; }
/* Estes blocos espacam por gap. As margens proprias do chapeu e do titulo
   somavam ao gap e davam 26px onde o padrao da pagina e 12px, soltando o
   chapeu do titulo em vez de deixar os dois lidos como par. */
.garantia__texto .section__eyebrow,
.autor__texto .section__eyebrow { margin-bottom: 0; }
.garantia__texto .section__title { margin-bottom: 0; text-wrap: balance; }
/* Linha longa demais abre "rios" de espaco entre as palavras. O teto de
   58ch segura a medida perto do confortavel de leitura, e o pretty evita
   palavra sozinha na ultima linha. */
.garantia__texto { display: flex; flex-direction: column; gap: .75rem; max-width: 58ch; }
.garantia__texto p { color: var(--muted-foreground); line-height: 1.6; text-wrap: pretty; }
.garantia__texto strong { color: var(--foreground); font-weight: 700; }

/* ========== 15. FAQ ========== */

.faq__head { text-align: center; margin-bottom: 2.5rem; }
.faq-lista {
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.faq-item + .faq-item { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.faq-item__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  text-align: left;
  transition: color .15s;
}
.faq-item__toggle:hover { color: var(--primary); }
.faq-item__pergunta { font-weight: 600; font-size: 1rem; }
@media (min-width: 640px) { .faq-item__pergunta { font-size: 1.125rem; line-height: 1.75rem; } }
.faq-item__icone {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background-color: var(--secondary);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.faq-item__icone svg { width: 1rem; height: 1rem; }
.faq-item__minus { display: none; }
.faq-item.is-open .faq-item__minus { display: block; }
.faq-item.is-open .faq-item__plus { display: none; }
.faq-item__painel { overflow: hidden; transition: all .3s; max-height: 0; }
.faq-item.is-open .faq-item__painel { max-height: 28rem; padding-bottom: 1.25rem; }
.faq-item__painel p { color: var(--muted-foreground); line-height: 1.625; padding-right: 2.5rem; }
.faq-item__painel p + p { margin-top: .75rem; }

/* ========== 16. CTA final ========== */

.cta-final {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  /* azul escuro fixo nos dois temas (não segue o --grad-brand claro do dark) */
  background-image: linear-gradient(135deg, #1a73e8 0%, #4285f4 55%, #1557b0 100%);
  padding: 3.5rem 1.5rem;
  text-align: center;
}
@media (min-width: 640px) { .cta-final { padding: 5rem 3rem; } }
/* No dark, o CTA final segue o clima escuro da hero (fundo Gemini + leve
   brilho azul) em vez do azul vibrante, que chamava atenção demais. */
.dark .cta-final {
  background-image:
    radial-gradient(120% 120% at 50% -20%, color-mix(in srgb, var(--primary) 16%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, #1a2740 0%, #131314 55%, #10182a 100%);
  border: 1px solid var(--border);
}
.dark .cta-final__glow span { background-color: color-mix(in srgb, var(--primary) 16%, transparent); }
.cta-final__glow { position: absolute; inset: 0; pointer-events: none; }
.cta-final__glow span {
  position: absolute; width: 24rem; height: 24rem; border-radius: 9999px;
  background-color: rgb(255 255 255 / .12); filter: blur(64px);
}
.cta-final__glow span:nth-child(1) { top: -6rem; right: -6rem; }
.cta-final__glow span:nth-child(2) { bottom: -6rem; left: -6rem; }
.cta-final__conteudo { position: relative; }
.cta-final .section__title { color: #fff; margin-bottom: 1rem; text-wrap: balance; }
/* O .text-gradient da marca e azul, e o fundo deste bloco tambem —
   azul sobre azul some. Esta variante clara mantem a familia da marca
   e continua legivel nos dois temas. */
.text-gradient--alerta {
  background-image: var(--grad-alerta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient--claro {
  background-image: linear-gradient(105deg, #fff 0%, #d2e3fc 45%, #8ab4f8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nowrap { white-space: nowrap; }
.cta-final__sub {
  color: rgb(255 255 255 / .9);
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 38rem;
  margin-inline: auto;
  margin-bottom: 2rem;
}
.cta-final__actions { display: flex; flex-direction: column; gap: .75rem; justify-content: center; align-items: center; }
@media (min-width: 640px) { .cta-final__actions { flex-direction: row; } }
.cta-final__nota { color: rgb(255 255 255 / .85); font-size: .8125rem; line-height: 1.4; margin-top: 1.5rem; }

/* ========== 17. Footer ========== */

.site-footer {
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  background-color: color-mix(in srgb, var(--card) 40%, transparent);
}
.site-footer__inner { padding-block: 3rem; }
.site-footer__cols {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
}
@media (min-width: 640px) { .site-footer__cols { flex-direction: row; } }
.site-footer__sobre { max-width: 26rem; }
.site-footer__sobre .brand { margin-bottom: .75rem; }
.site-footer__sobre p { font-size: .875rem; color: var(--muted-foreground); line-height: 1.625; }
.site-footer__sobre p a, .site-footer__contato p a { transition: color .15s; }
.site-footer__sobre p a:hover, .site-footer__contato p a:hover { color: var(--foreground); }
.site-footer__contato { font-size: .875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.site-footer__contato p + p { margin-top: .25rem; }
.site-footer__contato-titulo { font-weight: 600; color: var(--foreground); margin-bottom: .5rem; }
.site-footer__legal {
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  padding-top: 1.5rem;
  font-size: .75rem;
  color: var(--muted-foreground);
  line-height: 1.625;
}
.site-footer__legal p + p { margin-top: .5rem; }
/* Texto curto o bastante pra usar a largura toda do rodape sem cansar. */
.site-footer__legal p { text-wrap: pretty; }
.site-footer__legal strong { color: var(--foreground); font-weight: 600; }

/* ========== 18. Prova social (pilha de avatares) ========== */

.prova-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .875rem;
}
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack__item {
  position: relative;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 2px solid var(--card);
  margin-left: -.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(0 0 0 / .1);
}
.avatar-stack__item:first-child { margin-left: 0; }
.avatar-stack__item svg { width: 1.375rem; height: 1.375rem; }
/* a foto cobre a silhueta (fallback) quando carrega no navegador do visitante */
.avatar-stack__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
}
.avatar-stack__item:nth-child(1) { background-color: #4285f4; }
.avatar-stack__item:nth-child(2) { background-color: #ea4335; }
.avatar-stack__item:nth-child(3) { background-color: #34a853; }
.avatar-stack__item:nth-child(4) { background-color: #fbbc04; }
.avatar-stack__item:nth-child(5) { background-color: #1a73e8; }
.avatar-stack__mais {
  height: 2rem;
  margin-left: -.7rem;
  padding-inline: .625rem;
  border-radius: 9999px;
  border: 2px solid var(--card);
  background-color: var(--secondary);
  color: var(--primary);
  font-weight: 700;
  font-size: .75rem;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 1px 2px rgb(0 0 0 / .1);
  position: relative;
  z-index: 1;
}
.prova-social__texto { font-size: .8125rem; color: var(--muted-foreground); }
.prova-social__texto strong { color: var(--foreground); font-weight: 600; }
.prova-social__texto a { color: var(--foreground); text-decoration: underline; text-underline-offset: 2px; }

/* ========== 19. Toggle de tema (claro/escuro) ========== */

.site-header__actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.theme-toggle {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--foreground);
  flex-shrink: 0;
  transition: background-color .15s, color .15s, border-color .15s;
}
.theme-toggle:hover { background-color: var(--accent); color: var(--accent-foreground); }
.theme-toggle svg { width: 1.125rem; height: 1.125rem; }
.theme-toggle__sun { display: none; }
.dark .theme-toggle__sun { display: block; }
.dark .theme-toggle__moon { display: none; }

/* ========== 20. Animações ========== */

@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* ========== 21. Depoimentos e prints (esteira) ========== */

/* Exceção deliberada ao interruptor global de redução de movimento da seção 20:
   só esta esteira continua animando, devagar e com pausa garantida no hover, no
   foco e no arrasto. O resto do site respeita a preferência normalmente. Por
   isso os overrides abaixo usam propriedades longhand com !important pontual,
   em vez de mexer no interruptor global. */

/* ---------- estrutura da esteira ---------- */

.depos__esteira {
  /* full-bleed: os cards atravessam a largura inteira da viewport,
     mesmo a seção estando dentro de .container container--xl */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* overflow-x:auto sem overflow-y explícito faz o navegador computar
     overflow-y como auto também (regra do spec: não dá pra ter um eixo
     "visible" com o outro diferente de visible) — ou seja, o eixo
     vertical também fica clipado por esse container. Testado 2026-08-20:
     não existe combinação overflow-x:auto + overflow-y:visible no mesmo
     elemento, então o card de depoimento NÃO PODE crescer/vazar por cima
     da fileira de baixo só com CSS (fica sempre clipado no limite desta
     esteira) — por isso ele foi redesenhado pra nunca mudar de altura
     (ver .depo abaixo). Só o print ainda cresce (scale 1.06 no hover,
     ~16px pra cada lado numa carta de 534.26px, depois do ajuste de
     proporção de 2026-08-29 pra parar de cortar as fotos reais), e o
     padding subiu de 1rem pra 1.25rem pra manter folga (sobra ~4px de
     cada lado, perto da folga original de 3.2px). */
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 4rem,
    #000 calc(100% - 4rem),
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 4rem,
    #000 calc(100% - 4rem),
    transparent
  );
  cursor: grab;
}
/* barra de rolagem nunca aparece, em nenhuma situação (nem sem JS,
   nem sob reduced-motion) — o arrasto continua funcionando sem ela */
.depos__esteira::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.depos__esteira.is-dragging {
  cursor: grabbing;
}

/* .depos__esteira + .depos__esteira { margin-top: 1rem; } */

.depos__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  padding-inline: 1rem;
  /* valores-base; a duração real vem do bloco "sempre anima" abaixo,
     que precisa de !important pra vencer o interruptor global */
  animation: depo-esteira 90s linear infinite;
  /* promove a faixa pra uma camada de GPU só dela — sem isso, com várias
     esteiras + dezenas de cards animando ao mesmo tempo, o navegador pode
     ficar repintando em vez de só compositar, e isso é visto como
     "travadinha". Não consegui medir FPS de verdade neste ambiente de
     automação (requestAnimationFrame não dispara aqui), então isto é
     boa prática preventiva, não uma medição confirmada. */
  will-change: transform;
}
.depos__track--reverso {
  animation-name: depo-esteira-reverso;
}
.depos__track--prints {
  animation-name: depo-esteira;
}

/* ---------- sempre anima: exceção ao interruptor global de reduced-motion ---------- */
/* só as propriedades que definem O QUE anima (nome/duração/ritmo) levam
   !important — animation-play-state fica de fora de propósito, pra pausa
   no hover/foco/arrasto (regra abaixo, também !important) continuar
   decidindo por cima disso. */
/* as esteiras (depoimentos e prints) repetem seus cards o quanto for
   preciso pra "uma cópia" ficar sempre mais larga que a tela — sem isso o
   loop (-50%) mostra vão vazio no fim de cada volta. Durações calculadas
   pra manter ~22px/s de velocidade:
   - depoimentos: 7 clientes reais × 2 repetições = 14 cards/cópia (~4704px de metade)
   - prints: 7 imagens reais × 3 repetições = 21 cards/cópia (~5376px de metade)
   Se o número de depoimentos ou de prints mudar bastante no futuro, revisar
   esses números, senão a velocidade muda junto. */
.depos__track {
  animation-name: depo-esteira !important;
  animation-duration: 214s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}
.depos__track--reverso {
  animation-name: depo-esteira-reverso !important;
  animation-duration: 250s !important;
}
.depos__track--prints {
  animation-duration: 244s !important;
}

.depos__esteira:hover .depos__track,
.depos__esteira:focus-within .depos__track,
.depos__esteira.is-dragging .depos__track {
  animation-play-state: paused !important;
}
/* .depos__esteira precisa de tabindex="0" no HTML pra :focus-within ser
   alcançável por teclado — sem isso a pausa por foco nunca dispara,
   porque não há nenhum elemento focável dentro dos cards (figure/blockquote). */
.depos__esteira:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring);
}

@keyframes depo-esteira {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  } /* -50% = exatamente uma cópia da lista */
}
@keyframes depo-esteira-reverso {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

/* ---------- card ---------- */

/* O card NUNCA muda de altura — nem no hover. Em vez de crescer (o que
   exigia clipar/vazar por cima da fileira de baixo, já que a esteira
   precisa de overflow-x:auto e isso força overflow-y:auto também, sem
   como escapar disso só com CSS), no hover ele REORGANIZA o próprio
   espaço interno: a foto+nome (.depo__autor) encolhem até sumir, e o
   texto toma esse espaço liberado, sempre dentro dos mesmos 14rem.
   O requisito é não deixar espaço vazio permanente entre as fileiras
   nem card vazando atrás da fileira debaixo.
   Altura ajustada de 14rem pra 16.75rem pra caber o depoimento mais
   longo sem cortar (ver comentário em .depo__texto);
   o "sempre dentro dos mesmos X rem" abaixo continua valendo, só o
   valor do X mudou. */
.depo-slot {
  flex: 0 0 20rem;
}
.depo {
  height: 16.75rem;
  background-color: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 1.25rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* rede de segurança: nunca deveria disparar, mas se um
    depoimento for tão grande que nem com a foto/nome escondidos caiba,
    corta aqui em vez de vazar pra fora do card */
  transition: box-shadow .2s, border-color .2s;
}
.depo-slot:hover .depo,
.depo-slot:focus-within .depo {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  box-shadow: 0 12px 28px -12px rgb(0 0 0 / .35);
}

.depo__estrelas {
  display: flex;
  gap: 0.125rem;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}
.depo__estrelas svg {
  width: 1rem;
  height: 1rem;
  fill: #fbbc04;
}

.depo__texto {
  font-size: 0.875rem;
  line-height: 1.625; /* 22.75px/linha, medido, base de todos os valores abaixo */
  color: color-mix(in srgb, var(--foreground) 90%, transparent);
  /* Corrigido em 2026-08-29: o teto de 91px (4 linhas) cortava o final de
     2 dos 7 depoimentos reais sem nenhum sinal visual (o line-clamp abaixo
     nao tem efeito pratico neste layout, o corte era so o max-height). O
     teto agora sobe pra 137px (6 linhas), que e exatamente o tamanho do
     maior depoimento dos 7, entao nenhum texto fica escondido em repouso.
     O .depo cresceu junto (ver height logo abaixo) pra caber essa altura. */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 137px;
  transition: max-height .4s ease;
}
/* O clamp NÃO é animável — quem anima abrir/fechar é o max-height,
   clipando um conteúdo que precisa estar sempre MAIOR que ele. Por isso
   o clamp tem que continuar no valor grande durante todo o fechamento:
   se voltasse pra 4 na hora, o conteúdo encolheria de golpe, o
   max-height não teria mais o que clipar e o texto fecharia instantâneo
   (dessincronizado da foto+nome crescendo devagar — exatamente a
   reclamação que originou esta parte). Quem liga/desliga esta classe é
   o script.js, que só a remove 400ms depois do mouse sair. */
.depo-slot--aberto .depo__texto {
  -webkit-line-clamp: 6;
}
/* Duas classes, exclusivas entre si, que script.js decide comparando o
   scrollHeight do texto (altura natural, sem corte) contra estes mesmos
   tetos em px (não existe seletor CSS pra "texto truncado"):
   - .depo-slot--expandivel: não cabe nas 4 linhas do repouso, mas cabe
     em 5 encolhendo a foto+nome (tier 1) — espaço medido: 117px.
   - .depo-slot--expandivel-total: nem em 5 linhas cabe — só nesse caso
     a foto+nome somem de vez (tier 2), liberando 6 linhas — espaço
     medido: 147px. Cards cujo texto já cabe nas 4 linhas do repouso não
     recebem nenhuma das duas e não reagem ao hover — não faz sentido
     encolher a foto de quem não precisa do espaço. */
.depo-slot--expandivel:hover .depo__texto,
.depo-slot--expandivel:focus-within .depo__texto {
  max-height: 114px; /* 5 linhas = 113.75px */
}
.depo-slot--expandivel-total:hover .depo__texto,
.depo-slot--expandivel-total:focus-within .depo__texto {
  max-height: 137px; /* 6 linhas = 136.5px */
}

.depo__autor {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.75rem;
  margin-top: auto;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  /* medido: a altura real em repouso é ~49px (foto de 36px + padding-top
     + borda) — o teto fica só um pouco acima disso (não os 3.5rem/56px
     de antes), pra transição de colapso (tier 2) não ter um "trecho
     morto" no início (onde nada muda visualmente porque o teto ainda
     está bem acima do conteúdo) seguido de um colapso repentino no
     final. Com o teto próximo do conteúdo real, o colapso fica
     proporcional do início ao fim. */
  max-height: 3.125rem;
  opacity: 1;
  overflow: hidden;
  transition: all .4s ease;
}
/* tier 1: a foto+nome DIMINUEM progressivamente em vez de sumir — ficam
   pequenos no canto, mas continuam visíveis, e voltam ao tamanho normal
   (mesma transição, invertida) ao tirar o mouse/foco. */
.depo-slot--expandivel:hover .depo__autor,
.depo-slot--expandivel:focus-within .depo__autor {
  gap: 0.5rem;
  padding-top: 0.5rem;
}
/* tier 2: só quando nem encolher basta. A foto+nome DESCEM e se escondem
   por baixo, e o fio da borda FICA visível até o fim — é ele que vira o
   "divisor" que sobra. O efeito pedido é ver o bloco descer, e não um
   desaparecimento gradual. Por isso aqui
   NÃO há opacity nem border-top-color:transparent: o que encolhe é a
   altura, enquanto o conteúdo escorrega pra baixo e o overflow:hidden
   do .depo__autor faz o recorte. */
.depo-slot--expandivel-total:hover .depo__autor,
.depo-slot--expandivel-total:focus-within .depo__autor {
  max-height: 0;
  padding-top: 0;
}
.depo-slot--expandivel-total:hover .depo__foto,
.depo-slot--expandivel-total:hover .depo__nome,
.depo-slot--expandivel-total:focus-within .depo__foto,
.depo-slot--expandivel-total:focus-within .depo__nome {
  /* valor fixo (não %) pra foto e nome descerem juntos, na mesma
     velocidade — em % cada um andaria conforme a própria altura e eles
     se separariam no meio do caminho */
  transform: translateY(3rem);
}
.depo__foto {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .4s ease;
}
/* só o tier 1 encolhe a foto — no tier 2 ela desce inteira (encolher e
   descer ao mesmo tempo davam dois movimentos brigando) */
.depo-slot--expandivel:hover .depo__foto,
.depo-slot--expandivel:focus-within .depo__foto {
  width: 1.375rem;
  height: 1.375rem;
}
.depo__foto svg {
  width: 1.5rem;
  height: 1.5rem;
  transition: all .4s ease;
}
.depo-slot--expandivel:hover .depo__foto svg,
.depo-slot--expandivel:focus-within .depo__foto svg {
  width: 0.875rem;
  height: 0.875rem;
}
.depo__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
}
.depo__nome {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all .4s ease;
}
.depo-slot--expandivel:hover .depo__nome,
.depo-slot--expandivel:focus-within .depo__nome {
  font-size: 0.6875rem;
}

/* ---------- card de print (ativação no celular) ---------- */
/* formato vertical 9:16 (story) — a esteira sempre roda em uma
   única fileira pra esse tipo de card, nunca duas opostas */

/* tamanho e proporção vindos da referência de layout (334x600px, perto
   de 9:16), mantendo o border-radius e a sombra do design system em vez
   do cartão reto e sem cantos da referência */
.print {
  flex: 0 0 15rem; /* 240px */
  /* Corrigido em 2026-08-29: com 9/16 (0,563) a moldura era mais "quadrada"
     que as fotos reais (proporção entre 0,449 e 0,559, medidas nos 7
     prints), e o cover cortava topo e base em até 108px, exatamente onde
     fica a identificação da conta e o resultado da ativação. 115/256
     (0,449) usa a proporção da foto mais alta dos 7: nenhuma foto perde
     topo/base agora, e só a mais quadrada do conjunto perde um pouco
     das laterais, que não têm conteúdo importante. */
  aspect-ratio: 115 / 256;
  border-radius: 1.25rem;
  overflow: hidden;
  position: relative;
  background-color: var(--secondary);
  transition: transform 0.3s ease;
}
/* o card sob o mouse cresce, como na referência — a esteira inteira
   também pausa (regra em "estrutura da esteira" acima), então o
   visitante ganha os dois: para de andar E o card em foco se destaca */
.print:hover,
.print:focus-visible {
  transform: scale(1.06);
  z-index: 2;
}
.print img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Desde o ajuste de proporção da moldura (2026-08-29, ver .print acima)
     o corte de topo/base já fica em ~0 pros 7 prints reais. Mantido
     "top" mesmo assim: é uma rede de segurança barata pra qualquer foto
     futura mais "quadrada" que a de referência, que ainda perderia lados
     e não topo/base, que é onde fica o conteúdo importante da tela. */
  object-position: top;
}

/* Segunda exceção pontual ao interruptor global abaixo (a primeira é a
   esteira, seção 21 acima): o encolhimento de foto e nome no hover do
   card de depoimento. Mesmo com "reduzir movimento" ligado, essa
   transição roda. Ela é curta e só dispara no hover ou no foco, não é
   movimento contínuo como a esteira, então o risco de desconforto é bem
   menor. Um seletor de classe com !important vence o `* {...!important}`
   da media query abaixo mesmo vindo antes no arquivo, porque a cascata
   compara especificidade entre !importants, não só ordem. */
.depo__foto,
.depo__foto svg,
.depo__autor,
.depo__nome,
.depo__texto {
  transition: all 0.4s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}