/* =====================================================================
   V3 da Página de Vendas — copy "COPY DESAFIO ÚLTIMA"
   Carrega DEPOIS do /style.css (V1). Só acrescenta o que é novo.
   Tudo aqui usa o prefixo "v3-" pra não mexer em nada da V1.
   Paleta clara (bege/offwhite), destaques laranja/terracota,
   frases fortes em bordô, verde só nos cards de destaque.
   ===================================================================== */

/* ---------- Seção 3 — subtítulo da dor ---------- */

.v3-dor-subtitulo p {
  font-family: var(--fonte-corpo);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--verde);
  margin: 0 0 8px;
}

.v3-dor-subtitulo p:last-child { margin-bottom: 0; }
.v3-dor-subtitulo strong { color: var(--verde); font-weight: 700; }

@media (min-width: 768px) {
  .v3-dor-subtitulo p { font-size: 23px; }
}

.dor-coluna-texto h2 { margin-bottom: 16px; }
.v3-dor-subtitulo { margin-bottom: 32px; }

/* ---------- Utilidades de texto (Seção 5 em diante) ---------- */

.v3-estreito {
  max-width: 760px;
  margin-inline: auto;
}

.v3-titulo-centro {
  text-align: center;
  text-wrap: balance;
  margin-bottom: 20px;
}

.v3-subtitulo-centro {
  text-align: center;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  text-wrap: balance;
  margin: 0 auto 48px;
}

@media (min-width: 768px) {
  .v3-subtitulo-centro { font-size: 26px; }
}

.v3-texto-centro {
  text-align: center;
  font-size: 18px;
  line-height: 1.55;
}

@media (min-width: 768px) {
  .v3-texto-centro { font-size: 20px; }
}

.v3-versos { font-style: italic; }

/* Frase forte em bordô */
.v3-frase-forte {
  text-align: center;
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: 24px;
  line-height: 1.2;
  color: var(--vermelho);
  text-wrap: balance;
  margin: 40px auto;
}

@media (min-width: 768px) {
  .v3-frase-forte { font-size: 32px; }
}

.v3-frase-gigante { font-size: 30px; }

@media (min-width: 768px) {
  .v3-frase-gigante { font-size: 48px; }
}

/* Chamada de destaque (título médio, verde + laranja) */
.v3-chamada {
  text-align: center;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  text-wrap: balance;
  margin: 48px auto 32px;
}

@media (min-width: 768px) {
  .v3-chamada { font-size: 34px; }
}

/* ---------- 5a — Fluxo da indicação ---------- */

.v3-fluxo {
  list-style: none;
  margin: 24px auto 48px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  counter-reset: fluxo;
}

.v3-fluxo li {
  background-color: var(--branco);
  border: 2px solid var(--terracota);
  border-radius: var(--radius-pilula);
  padding: 12px 24px;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 17px;
  color: var(--verde);
  text-align: center;
  white-space: nowrap;
}

/* seta entre as etapas: ↓ no celular, → no computador */
.v3-fluxo li + li::before {
  content: "↓";
  display: block;
  color: var(--laranja);
  font-size: 22px;
  line-height: 1;
  margin: -46px 0 24px;
}

.v3-fluxo li + li { margin-top: 44px; }

/* a última etapa fecha o ciclo em laranja */
.v3-fluxo li:last-child {
  background-color: var(--laranja);
  border-color: var(--laranja);
  color: var(--branco);
}

@media (min-width: 900px) {
  .v3-fluxo {
    flex-direction: row;
    justify-content: center;
    gap: 44px;
  }
  .v3-fluxo li + li { margin-top: 0; position: relative; }
  .v3-fluxo li + li::before {
    content: "→";
    position: absolute;
    left: -34px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
}

/* Falas da indicação — balões brancos */
.v3-falas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 8px auto 0;
}

.v3-fala {
  background-color: var(--branco);
  border-radius: 20px 20px 20px 4px;
  box-shadow: var(--sombra);
  padding: 14px 24px;
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 19px;
  color: var(--verde);
  text-align: center;
}

.v3-fala:nth-child(2) { border-radius: 20px 20px 4px 20px; }

@media (min-width: 768px) {
  .v3-fala { font-size: 22px; }
}

/* ---------- 5b — Desejos + Ponto Cego ---------- */

.v3-desejos {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.v3-desejos li {
  background-color: var(--offwhite);
  border-radius: var(--radius-pilula);
  padding: 10px 20px;
  font-weight: 600;
  color: var(--verde);
  text-align: center;
}

.v3-ponto-cego {
  text-align: center;
  font-family: var(--fonte-titulo);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 32px;
  line-height: 1.05;
  color: var(--laranja);
  text-wrap: balance;
  margin: 0 auto 32px;
}

@media (min-width: 768px) {
  .v3-ponto-cego { font-size: 64px; }
}

.v3-cego-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 40px 0;
}

@media (min-width: 768px) {
  .v3-cego-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

.v3-cego-card {
  background-color: var(--offwhite);
  border-left: 5px solid var(--terracota);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: 28px 24px;
  color: var(--verde);
}

@media (min-width: 768px) {
  .v3-cego-card { padding: 36px 32px; }
}

.v3-cego-numero {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  color: var(--laranja);
  margin-bottom: 12px;
}

.v3-cego-card h3 {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 19px;
  line-height: 1.2;
  color: var(--verde);
  margin: 0 0 16px;
  text-wrap: balance;
}

.v3-cego-card p { margin-bottom: 12px; }
.v3-cego-card p:last-child { margin-bottom: 0; }

.v3-cego-card .v3-cego-forte {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.25;
  color: var(--vermelho);
  margin-top: 16px;
}

.v3-cego-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v3-cego-lista li::before {
  content: "✦";
  color: var(--laranja);
  margin-right: 8px;
}

.v3-cego-lista strong { color: var(--vermelho); }

/* ---------- 5c — Trabalho × Oferta ---------- */

.v3-um-x-outro {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  max-width: 900px;
  margin: 32px auto 16px;
}

@media (min-width: 768px) {
  .v3-um-x-outro { flex-direction: row; align-items: stretch; gap: 24px; }
  .v3-lado { flex: 1; display: flex; flex-direction: column; justify-content: center; }
}

.v3-lado {
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;
}

.v3-lado p { margin-bottom: 10px; }
.v3-lado p:last-child { margin-bottom: 0; }

.v3-lado-titulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 24px;
  margin-bottom: 16px;
}

.v3-lado-trabalho {
  background-color: var(--branco);
  border: 2px solid var(--terracota);
  color: var(--verde);
}

.v3-lado-trabalho .v3-lado-titulo { color: var(--terracota); }

.v3-lado-exemplos { font-style: italic; }

.v3-lado-def { font-size: 19px; font-weight: 700; }  /* frase inteira em negrito (pedido da Rita) */
.v3-lado-def strong { font-weight: inherit; }       /* mesmo peso na frase toda */
.v3-lado-oferta .v3-lado-def { color: var(--peach); }  /* "É o convite para entrar." inteira em peach */

.v3-lado-oferta {
  background-color: var(--verde);
  color: var(--offwhite);
  box-shadow: 0 20px 48px rgba(1, 64, 64, 0.3);
}

.v3-lado-oferta .v3-lado-titulo { color: var(--peach); font-size: 30px; }
.v3-lado-oferta strong { color: var(--peach); }

.v3-lado-fala {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  color: var(--branco);
  margin-top: 8px;
}

.v3-x {
  align-self: center;
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--laranja);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: 24px;
}

/* palavras sem negrito dentro dos títulos dos cards do Ponto Cego */
.v3-cego-card h3 .v3-leve { font-weight: 400; }

/* =====================================================================
   Seção 6 — Agora, vamos construir a sua
   Um bloco só (caixa branca da V1):
   abertura → apoio do Empreendedorismo Energético (discreto) →
   "O que você recebe" com as 3 entregas e os mockups
   ===================================================================== */

@media (min-width: 768px) {
  .solucao-caixa-escura.v3-desafio { padding: 64px 56px; }
}

.v3-desafio-topo { margin-bottom: 40px; }

.v3-solucao-promessa {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  color: var(--verde);
  text-wrap: balance;
  margin: 32px auto 12px;
}

@media (min-width: 768px) {
  .v3-solucao-promessa { font-size: 30px; }
}

.v3-solucao-sub {
  font-size: 17px;
  line-height: 1.5;
  color: var(--verde);
  max-width: 640px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .v3-solucao-sub { font-size: 19px; }
}

/* Apoio — Empreendedorismo Energético: faixa compacta, texto menor */
.v3-ee {
  max-width: 720px;
  margin: 0 auto 48px;
  padding: 24px 24px 20px;
  background-color: var(--bege);
  border-radius: var(--radius);
  text-align: center;
  color: var(--verde);
}

.v3-ee p {
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 8px;
}

@media (min-width: 768px) {
  .v3-ee { padding: 28px 40px 24px; }
  .v3-ee p { font-size: 16px; }
}

.v3-ee .v3-ee-rotulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: 10px;
}

.v3-ee .v3-ee-lema {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1.2;
  margin: 14px 0 0;
}

@media (min-width: 768px) {
  .v3-ee .v3-ee-lema { font-size: 22px; }
}

/* ---------- Seção 8 — O que você recebe ---------- */

.v3-entrega-numero {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
  color: var(--laranja);
  margin-bottom: 8px;
}

.v3-entrega-formula {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.35;
  color: var(--vermelho);
}

.v3-entrega-partes {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.v3-entrega-partes li {
  background-color: var(--offwhite);
  border: 1px solid rgba(179, 122, 100, 0.4);
  border-radius: var(--radius-pilula);
  padding: 6px 14px;
  font-weight: 700;
  font-size: 15px;
  color: var(--verde);
}

.entrega-card .v3-entrega-forte {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.25;
  color: var(--verde);
}

@media (min-width: 768px) {
  .entrega-card .v3-entrega-forte { font-size: 24px; }
}

.entrega-card .v3-entrega-fala {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-style: italic;
  font-size: 20px;
  line-height: 1.35;
  color: var(--vermelho);
  border-left: 3px solid var(--laranja);
  padding-left: 16px;
}

/* ---------- Seção 10 — Recapitulação ---------- */

.v3-recap-fecho p { margin: 0 0 10px; color: var(--offwhite); font-weight: 500; }
.v3-recap-fecho p:last-child { margin-bottom: 0; }

.v3-recap-fecho .v3-recap-fecho-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--peach);
}

.v3-recap-fecho .v3-recap-fecho-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1.15;
  color: var(--branco);
}

.v3-recap-fecho .destaque-peach {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 20px;
}

/* ---------- Seção 11 — Pós-compra: 3 passos lado a lado ---------- */

@media (min-width: 900px) {
  .grade-posvenda.v3-posvenda { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Seção 12 — Fechamento ---------- */

.fechamento-texto .v3-fechamento-forte {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  color: var(--vermelho);
  margin-top: 28px;
}

.fechamento-texto .v3-fechamento-final {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: 24px;
  line-height: 1.2;
  color: var(--verde);
  margin-top: 28px;
}

@media (min-width: 768px) {
  .fechamento-texto .v3-fechamento-forte { font-size: 26px; }
  .fechamento-texto .v3-fechamento-final { font-size: 30px; }
}

/* ---------- Seção 13 — 2ª oferta ---------- */

/* respiro em cima (antes era 0, quando a seção de cima tinha a mesma cor bege) */
.v3-oferta2 { padding-top: 64px; }

@media (min-width: 768px) {
  .v3-oferta2 { padding-top: 88px; }
}
.v3-oferta2 .badge-formato { margin-bottom: 32px; }

/* ---------- Seção 14 — Bio ---------- */

.bio-texto .v3-bio-metodo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.3;
  color: var(--verde);
  margin-top: 24px;
}

.bio-texto .v3-bio-forte {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 21px;
  line-height: 1.25;
  color: var(--vermelho);
}

.bio-texto .v3-bio-lema {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 22px;
  color: var(--verde);
  margin: 24px 0;
}

@media (min-width: 768px) {
  .bio-texto .v3-bio-metodo { font-size: 24px; }
  .bio-texto .v3-bio-lema { font-size: 28px; }
}

/* Botão de compra: frase mais longa na V3 — menos folga lateral no celular */
@media (max-width: 767px) {
  .recap-botao.btn-cta-principal { padding: 18px 24px; font-size: 16px; }
}

/* ---------- Seção 5c — frase final sem caixa ---------- */

.v3-texto-maior {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.35;
  margin-top: 32px;
}

@media (min-width: 768px) {
  .v3-texto-maior { font-size: 28px; }
}

/* ---------- Seção 6 — "O que você recebe" dentro do mesmo bloco ---------- */

.v3-recebe-titulo {
  margin-top: 64px;
  padding-top: 56px;
  border-top: 1px solid rgba(179, 122, 100, 0.3);
}

@media (min-width: 768px) {
  .v3-recebe-titulo { margin-top: 80px; padding-top: 72px; }
}

.v3-desafio .v3-frase-gigante { margin-bottom: 0; }

/* ---------- Seção 15 — tagline maior (+6pt no computador) ---------- */

.tagline-fechamento.v3-tagline { max-width: 900px; }

@media (min-width: 768px) {
  .tagline-fechamento.v3-tagline { font-size: 38px; line-height: 1.4; }
}

/* ---------- Seção 5c — Arquitetura: as etapas da Oferta Ressonante ---------- */

.v3-arquitetura {
  max-width: 1040px;
  margin: 8px auto 0;
}

.v3-arq-titulo {
  text-align: center;
  font-family: var(--fonte-titulo);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.15;
  color: var(--verde);
  text-wrap: balance;
  margin: 0 0 32px;
}

@media (min-width: 768px) {
  .v3-arq-titulo { font-size: 30px; margin-bottom: 40px; }
}

.v3-arq-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;            /* espaço pra seta entre os cards */
}

.v3-arq-card {
  position: relative;
  background-color: var(--branco);
  border-top: 4px solid var(--laranja);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: 24px 22px 22px;
  color: var(--verde);
}

.v3-arq-numero {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--laranja);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 14px;
}

.v3-arq-card h4 {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1.2;
  color: var(--verde);
  margin: 0 0 10px;
  text-wrap: balance;
}

.v3-arq-card p {
  font-size: 15px;
  line-height: 1.45;
  margin: 0 0 6px;
}

.v3-arq-card p:last-child { margin-bottom: 0; }

.v3-arq-card .v3-arq-acao {
  font-weight: 700;
  color: var(--vermelho);
}

/* seta pra próxima etapa: ↓ no celular */
.v3-arq-card:not(:last-child)::after {
  content: "↓";
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--laranja);
}

/* 2 colunas no tablet: seta → dentro da linha, sem seta na virada */
@media (min-width: 640px) and (max-width: 999px) {
  .v3-arq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 44px; }
  .v3-arq-card:nth-child(odd):not(:last-child)::after {
    content: "→";
    left: auto;
    right: -34px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .v3-arq-card:nth-child(even)::after { content: none; }
}

/* 3 colunas no computador: → dentro da linha, sem seta na virada da 3ª pra 4ª */
@media (min-width: 1000px) {
  .v3-arq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 44px; }
  .v3-arq-card { padding: 28px 26px 26px; }
  .v3-arq-card:not(:last-child)::after {
    content: "→";
    left: auto;
    right: -34px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .v3-arq-card:nth-child(3)::after { content: none; }
}

/* ---------- Seção 6 — "Você vai construir, passo a passo" com os dias ---------- */

.v3-entrega-partes li span {
  font-weight: 800;
  color: var(--laranja);
  margin-right: 4px;
}

/* ---------- Bio — 3 números (+4.000 / +100 / +6 Dígitos) sem encostar ---------- */

.bio-texto .bio-stats {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.bio-texto .bio-stat-numero {
  font-size: 34px;
  white-space: nowrap;
}

/* lado a lado só quando a coluna do texto é larga o bastante pra "+6 Dígitos" */
@media (min-width: 1100px) {
  .bio-texto .bio-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .bio-texto .bio-stat-numero { font-size: 34px; }
}

/* "CHEGA!" — em 200px ele passava da tela entre ~768 e ~840px de largura */
@media (min-width: 768px) {
  .chega-bloco .headline-impacto { font-size: min(200px, 22vw); }
}

/* ---------- Seção 6 — fundo terracota (era camurça; pedido da Rita, 26/09/2026) ---------- */

.v3-fundo-camurca {
  /* virou terracota (26/09/2026): mesmos tons profundos da capa */
  background-color: #8A5A47;
  background-image: linear-gradient(180deg, #9A6450 0%, #7C4E3D 100%);
  color: var(--verde);
}

/* =====================================================================
   CAPA (hero) — fundo terracota profunda + "ressonância"
   Aprovada pela Rita em 26/09/2026: fundo A + título T2.
   Só tons da paleta, sem vermelho nem verde no fundo.
   ===================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 60% 45% at 50% 10%, rgba(255, 190, 152, 0.5) 0%, rgba(255, 190, 152, 0) 70%),
    linear-gradient(180deg, var(--terracota) 0%, #9A6450 40%, #7C4E3D 100%);
}

@media (min-width: 768px) {
  .hero {
    background:
      radial-gradient(ellipse 40% 75% at 78% 50%, rgba(255, 190, 152, 0.6) 0%, rgba(255, 190, 152, 0) 70%),
      linear-gradient(90deg, #7C4E3D 0%, #9A6450 50%, var(--terracota) 100%);
  }
}

.hero > .container { position: relative; z-index: 1; }

/* título branco; "chegarem naturalmente" como marca-texto peach */
.hero-headline {
  color: #FFFFFF;
  text-shadow: 0 2px 14px rgba(60, 30, 20, 0.35);
}

.hero-headline .destaque {
  color: #4A2A1F;
  text-shadow: none;
  background: linear-gradient(transparent 8%, var(--peach) 8%, var(--peach) 92%, transparent 92%);
  padding: 0 0.12em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  border-radius: 4px;
}

/* textos menores em branco (a V1 deixava 75% transparente) */
.hero-texto-menor p { color: #FFFFFF; opacity: 1; }
.hero-texto-menor p.hero-texto-italico { color: rgba(255, 255, 255, 0.94); }
.hero-texto-menor strong { color: var(--peach); }

/* pontos de luz piscando devagar */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

.hero::before {
  background-image:
    radial-gradient(circle, #fff 0 2px, rgba(255, 190, 152, 0.7) 3px, transparent 7px),
    radial-gradient(circle, #fff 0 1.5px, rgba(255, 190, 152, 0.6) 2.5px, transparent 6px),
    radial-gradient(circle, #fff 0 2px, rgba(255, 190, 152, 0.7) 3px, transparent 8px),
    radial-gradient(circle, #fff 0 1.5px, rgba(255, 190, 152, 0.55) 2.5px, transparent 6px),
    radial-gradient(circle, #fff 0 1.5px, rgba(255, 190, 152, 0.6) 2.5px, transparent 6px);
  background-position: 8% 18%, 22% 82%, 91% 12%, 62% 88%, 96% 64%;
  animation: v3-brilho 5s ease-in-out infinite;
}

.hero::after {
  background-image:
    radial-gradient(circle, #fff 0 1.5px, rgba(255, 190, 152, 0.6) 2.5px, transparent 6px),
    radial-gradient(circle, #fff 0 2px, rgba(255, 190, 152, 0.7) 3px, transparent 8px),
    radial-gradient(circle, #fff 0 1.5px, rgba(255, 190, 152, 0.55) 2.5px, transparent 6px),
    radial-gradient(circle, #fff 0 1.5px, rgba(255, 190, 152, 0.6) 2.5px, transparent 6px);
  background-position: 40% 8%, 72% 30%, 4% 55%, 48% 94%;
  animation: v3-brilho 5s ease-in-out 2.5s infinite;
}

@keyframes v3-brilho {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

/* ondas de ressonância + halo claro atrás do logo */
.hero-logo-wrap { position: relative; isolation: isolate; }

.hero-logo-wrap::before,
.hero-logo-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.hero-logo-wrap::before {
  width: 820px;
  height: 820px;
  background: repeating-radial-gradient(circle,
    transparent 0 34px,
    rgba(255, 190, 152, 0.45) 35px 36.5px,
    transparent 37.5px 52px);
  -webkit-mask-image: radial-gradient(circle, #000 18%, rgba(0, 0, 0, 0.55) 45%, transparent 70%);
          mask-image: radial-gradient(circle, #000 18%, rgba(0, 0, 0, 0.55) 45%, transparent 70%);
  animation: v3-ressoar 7s ease-in-out infinite;
}

.hero-logo-wrap::after {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle,
    #FFF6EF 0%,
    rgba(255, 238, 225, 0.95) 30%,
    rgba(255, 190, 152, 0.6) 52%,
    rgba(227, 115, 66, 0.18) 64%,
    transparent 74%);
  filter: blur(6px);
  animation: v3-pulsar 7s ease-in-out infinite;
}

@keyframes v3-ressoar {
  0%, 100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0.75; }
  50%      { transform: translate(-50%, -50%) scale(1.04); opacity: 1; }
}

@keyframes v3-pulsar {
  0%, 100% { transform: translate(-50%, -50%) scale(0.94); opacity: 0.9; }
  50%      { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}

/* celular: o logo fica em cima do título — halo achatado e contido no
   próprio logo, ondas discretas, e um respiro entre logo e título */
@media (max-width: 767px) {
  .hero-logo-wrap { margin-bottom: 14px; }
  .hero-logo-wrap::after {
    width: 210px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
      #FFF6EF 0%,
      rgba(255, 238, 225, 0.92) 38%,
      rgba(255, 190, 152, 0.45) 60%,
      transparent 72%);
    filter: blur(4px);
  }
  .hero-logo-wrap::before {
    width: 300px;
    height: 300px;
    opacity: 0.55;
    -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 55%);
            mask-image: radial-gradient(circle, #000 20%, transparent 55%);
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after,
  .hero-logo-wrap::before, .hero-logo-wrap::after { animation: none; }
}

/* ---------- "CHEGA!" preenche de verde conforme a rolagem ----------
   Referência da Rita: mareeducacao.com.br/dm7 (efeito "scrub" no scroll).
   A palavra começa num bege apagado e o verde avança da esquerda pra direita
   acompanhando a rolagem (se a pessoa sobe, ele recua). O script do fim do
   index.html atualiza --chega-pos de 100% (apagado) até 0% (todo verde).
   Sem JavaScript ou com "reduzir movimento": fica verde direto. */
.chega-bloco .headline-impacto {
  --chega-pos: 0%;
  background-image: linear-gradient(to right, var(--verde) 50%, #D4B5A7 50%);
  background-size: 200% 100%;
  background-position: var(--chega-pos) 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Seção 12 "Quanto tempo mais…" — fundo verde (26/09/2026) ----------
   Texto claro pra leitura; destaques em peach (laranja some no verde). */
.v3-fundo-verde {
  background-color: var(--verde);
  color: var(--offwhite);
}

.v3-fundo-verde .fechamento-texto h2 { color: #FFFFFF; }
.v3-fundo-verde .destaque { color: var(--peach); }
.v3-fundo-verde .fechamento-texto p { color: var(--offwhite); }
.v3-fundo-verde .fechamento-texto strong { color: #FFFFFF; }
.v3-fundo-verde .fechamento-texto .v3-fechamento-forte { color: var(--peach); }
.v3-fundo-verde .fechamento-texto .v3-fechamento-final { color: #FFFFFF; }
.v3-fundo-verde .fechamento-imagem { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }

/* ---------- Seção 2 (prints) — box em terracota (26/09/2026; antes bege escuro) ----------
   Mesmo terracota profundo da capa e da Seção 6. Título branco, destaque peach. */
.prova-box {
  background-color: #8A5A47;
  background-image: linear-gradient(180deg, #9A6450 0%, #7C4E3D 100%);
}
.prova-box .prova-titulo { color: #FFFFFF; }
.prova-box .prova-titulo .destaque { color: var(--peach); }

/* ---------- Seção 15 — faixa da frase final em verde (26/09/2026) ----------
   Texto em bege claro, destaque em peach. */
.v3-fundo-verde .tagline-fechamento { color: var(--bege); }
.v3-fundo-verde .tagline-fechamento .destaque { color: var(--peach); }

/* ---------- Seção 2 — marcador de texto amarelo nos prints (26/09/2026) ----------
   A imagem fica numa "moldura" do tamanho exato dela (--r = largura/altura),
   centralizada na área branca de altura fixa do card. Os marcadores (.v3-marca)
   ficam por cima, posicionados em % da imagem, então acompanham qualquer tela.
   mix-blend-mode: multiply faz o amarelo "tingir" o fundo sem apagar a letra. */
.card-prova-imagem.v3-print {
  --h: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .card-prova-imagem.v3-print { --h: 200px; }
}

.v3-print-area {
  position: relative;
  width: min(100%, calc(var(--h) * var(--r)));
  aspect-ratio: var(--r);
}

.v3-print-area img {
  display: block;
  width: 100%;
  height: 100%;
}

.v3-marca {
  position: absolute;
  background: linear-gradient(100deg, rgba(255, 226, 0, 0.55), rgba(255, 214, 0, 0.62) 50%, rgba(255, 226, 0, 0.5));
  mix-blend-mode: multiply;
  border-radius: 3px 6px 4px 7px;
  transform: skewX(-4deg);
  pointer-events: none;
}