/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: min(92svh, 860px);
  display: flex;
  align-items: center;
  background: var(--preto);
  color: var(--branco);
  overflow: hidden;
  padding-block: clamp(9rem, 16vw, 11rem) clamp(4rem, 8vw, 6rem);
}

/* A DIAGONAL VEM DENTRO DA IMAGEM, não é desenhada em CSS.
   hero-consultorias-viva.jpg (1920x1000) traz o corte diagonal, a foto e —
   no lado escuro — o monograma da Ana em padrão repetido sobre #0D0B12.
   A diagonal vai de 65,1% da largura no topo a 48,2% na base.

   `cover`, e NÃO `auto 100%`: o lado escuro tem o padrão do monograma, então
   qualquer área que a imagem não cubra apareceria como preto chapado, com uma
   linha visível onde o padrão para. Com cover a imagem sempre preenche o hero
   inteiro. (Enquanto a arte era preta lisa, `auto 100%` + background-color
   funcionava; deixou de funcionar quando a textura entrou.)

   Ancorada em `right top`: em telas largas e baixas o cover corta na vertical,
   e ancorar no topo protege a cabeça dela, que fica no terço superior da foto.

   O gradiente por cima é um véu de legibilidade: garante que o texto continue
   legível em qualquer largura, sem depender da geometria exata da diagonal.
   Foi assim que o hero deixou de quebrar entre 901px e 1092px.

   --hero-topo: a foto desce essa altura para a cabeça da Ana sair de baixo
   do cabeçalho, que é translúcido e a escurecia. Como o `cover` recorta na
   horizontal (a imagem é mais larga que o hero), descer a imagem descobre
   uma faixa no topo — é o segundo véu, o vertical, que a cobre: opaco até
   onde a foto começa e dissolvendo depois, para não sobrar uma linha reta
   onde o céu principia. */
.hero {
  --hero-topo: 4.5rem;
  background-color: var(--preto);
  background-image:
    linear-gradient(180deg, var(--preto) 0 var(--hero-topo), transparent calc(var(--hero-topo) + 7rem)),
    linear-gradient(100deg, var(--preto) 0 32%, transparent 64%),
    url('../img/hero-consultorias-viva.jpg');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, right var(--hero-topo);
  background-size: 100% 100%, 100% 100%, cover;
}

.hero-interno { position: relative; z-index: 2; }
/* Mantém o texto dentro da faixa preta da imagem. A diagonal chega a 48,2%
   da largura da imagem na base, e o véu escurece até 64% — 44% deixa margem
   confortável nos dois casos. */
.hero-texto { max-width: min(33rem, 44%); }
.hero-texto h1 { margin-bottom: 1.5rem; }
.hero-texto p { color: var(--cinza-lilas); max-width: 38ch; margin-bottom: 2.5rem; }
/* .selo aqui fica sobre o fundo escuro do .hero: --roxo-digital passa
   AA nesse fundo (4,62:1), diferente do --roxo-profundo padrão de base.css,
   que foi escolhido para fundos claros. */
.hero .selo { color: var(--roxo-digital); }

@media (max-width: 900px) {
  /* No celular a imagem (1,92:1) não cabe inteira, então vira cover.
     Ancorada em `right`: é onde está o rosto da Ana, na faixa de 80% a 91%
     da largura original. Ancorar no meio corta a cabeça e sobra um tronco.

     Como o rosto fica no terço superior da foto, a composição se inverte em
     relação ao desktop: imagem em cima, texto embaixo. Daí o align-items
     flex-end e o véu subindo de baixo para cima. */
  /* Aqui não entra o véu vertical do desktop: a imagem é escalada pela
     largura e fica bem mais alta que o hero, então deslocá-la não descobre
     faixa nenhuma. calc(50% + 2rem) desce a foto 2rem em relação ao centro,
     o suficiente para a cabeça dela sair de baixo do cabeçalho. */
  .hero {
    min-height: 92svh;
    text-align: center;
    padding-block: clamp(6rem, 18vw, 8rem) clamp(2.5rem, 9vw, 4rem);
    align-items: flex-end;
    background-position: center, right calc(50% + 2rem);
    background-size: 100% 100%, cover;
    background-image:
      linear-gradient(0deg, var(--preto) 0 34%, transparent 72%),
      url('../img/hero-consultorias-viva.jpg');
  }
  .hero-texto { max-width: none; margin-inline: auto; }
  .hero-texto p { margin-inline: auto; }
}

/* ---------- MARQUEE ---------- */
.marquee {
  background: var(--roxo-profundo);
  color: var(--branco);
  padding-block: 1rem;
  overflow: hidden;
}
.marquee-trilha { display: flex; width: max-content; animation: correr 64s linear infinite; }
.marquee-grupo {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding-right: 1.5rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee-grupo b { color: var(--roxo-digital); font-size: .7rem; }

/* A trilha tem SEIS cópias idênticas do mesmo grupo (ver comentário no HTML).
   Deslocar -33.333% move exatamente duas cópias, então o estado final é
   visualmente idêntico ao inicial e a emenda não aparece.

   Por que seis e não duas: no momento da emenda, as cópias que sobram à
   direita precisam cobrir a tela inteira. Com duas cópias sobrava uma
   (~1090px) e em 1440px ficava um vazio de 319px à direita. Com seis,
   sobram quatro (~4360px), o que cobre qualquer monitor real.

   Os 64s vêm daí: 2180px percorridos em 64s ≈ 34px/s, a mesma velocidade
   percebida do desenho original. Ao mexer no número de cópias ou nos textos,
   recalcular as duas coisas juntas — a porcentagem e o tempo. */
@keyframes correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}

/* ---------- ABERTURA ----------
   Seção escura. O arco da página segue o argumento do texto: escuro enquanto
   ela está sozinha, claro a partir do momento em que os planos aparecem.
   Três movimentos distintos — a dor, o mecanismo, a ponte — e cada um recebe
   um peso diferente, em vez dos três saírem como um bloco só. */
.abertura {
  position: relative;
  background-color: var(--preto);
  color: var(--branco);
  padding-block: calc(var(--sec-y) * 1.15);
  overflow: hidden;
}

/* Textura do monograma, extraída da própria arte do hero. A opacidade
   reproduz o contraste do original (delta de ~24 em 255, ~9%). */
.abertura::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/padrao-monograma.png') repeat;
  background-size: 132px 123px;
  opacity: .05;
  pointer-events: none;
}

.abertura-grade {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
/* container-type habilita as unidades cqi usadas por .abertura-sozinha.
   Sem isto a palavra não teria como se medir pela coluna. */
.abertura-coluna { min-width: 0; container-type: inline-size; }

/* Eyebrow com traço, no lugar do selo padrão. */
.selo--traco { display: inline-flex; align-items: center; gap: .75rem; color: var(--roxo-digital); }
.selo--traco::before {
  content: '';
  width: 2.25rem;
  height: 2px;
  background: var(--roxo-digital);
}

/* A hierarquia do título é invertida de propósito: o resto da frase recua
   para peso 500 e corpo pequeno, e "sozinha" carrega o tamanho todo. */
.abertura-titulo {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  /* 400 exige que o peso esteja no link do Google Fonts. Antes o Roboto vinha
     só em 700 e 900, então qualquer valor menor caía no 700 e a frase saía
     tão encorpada quanto a palavra grande — o contraste sumia. */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.005em;
  margin-block: 1.25rem 1.75rem;
}

/* "sozinha" é o evento visual da seção: preenchida, peso máximo, ocupando
   a largura inteira da coluna.

   28.5cqi e não um valor em vw: a coluna mede ~520px no desktop e ~335px no
   celular, então vw erraria nos dois. cqi mede a própria coluna, e a palavra
   preenche a mesma proporção em qualquer tela.

   O 28,5 foi medido, não estimado: em Roboto 900 a palavra "sozinha" ocupa
   3,28x o tamanho da fonte, o que dá 93% da coluna. Sobra folga de propósito,
   para o caso de a Roboto não carregar e a fonte substituta ser mais larga.
   AO TROCAR A PALAVRA, REMEDIR — o valor é específico para estas 7 letras.

   Continua sendo texto normal no DOM: leitores de tela leem a frase inteira. */
.abertura-sozinha {
  display: block;
  font-size: 28.5cqi;
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.035em;
  color: var(--branco);
  margin-block: .12em .06em;
}

/* Navegadores sem unidades de container caem num valor por viewport. Menos
   preciso, mas nunca quebra o layout. */
@supports not (font-size: 1cqi) {
  .abertura-sozinha { font-size: clamp(2.75rem, 8.5vw, 8rem); }
}

.abertura-texto { color: var(--cinza-lilas); max-width: 36rem; }

/* ----- os três pilares ----- */
.pilares { list-style: none; padding: 0; display: grid; gap: .875rem; }

/* Cada pilar é um card fechado, com fundo próprio — os itens não ficam
   soltos sobre a textura da seção. Mesmo tratamento dos cards da seção de
   planos, que é o padrão de card sobre fundo escuro nesta página. */
.pilar {
  display: flex;
  gap: 1.125rem;
  padding: 1.25rem;
  background: var(--grafite);
  border: 1px solid color-mix(in srgb, var(--branco) 8%, transparent);
  border-radius: var(--raio-md);
  transition: border-color .25s ease, transform .25s ease;
}
.pilar:hover {
  border-color: color-mix(in srgb, var(--roxo-digital) 45%, transparent);
  transform: translateY(-2px);
}

.pilar-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: var(--raio-sm);
  background: color-mix(in srgb, var(--roxo-profundo) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--roxo-digital) 35%, transparent);
  color: var(--roxo-digital);
}
.pilar-icone svg { width: 1.375rem; height: 1.375rem; }

/* Preenchida, não contornada. Com o card em --grafite, o --roxo-digital
   contornado caía para 4,18:1 — abaixo do mínimo AA de 4,5:1 para texto
   pequeno. Branco sobre --roxo-profundo dá 10,95:1. */
.pilar-tag {
  display: inline-block;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--branco);
  background: var(--roxo-profundo);
  border-radius: 4px;
  padding: .2rem .5rem;
  margin-bottom: .55rem;
}
.pilar-texto h3 { font-size: 1.0625rem; margin-bottom: .3rem; }
.pilar-texto p { font-size: .9rem; color: var(--cinza-lilas); }

/* ----- a ponte, agora um passo de verdade ----- */
.abertura-ponte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--raio-md);
  background: var(--roxo-profundo);
  color: var(--branco);
  transition: background-color .25s ease, transform .25s ease;
}
.abertura-ponte:hover { background: var(--roxo-digital); transform: translateY(-2px); }
.abertura-ponte:focus-visible { outline: 3px solid var(--roxo-digital); outline-offset: 3px; }
.abertura-ponte-texto { display: grid; gap: .15rem; font-size: .95rem; }
.abertura-ponte-texto strong { font-family: var(--fonte-titulo); font-size: 1.15rem; }
.abertura-ponte-seta {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--preto);
}
.abertura-ponte-seta svg { width: 1.1rem; height: 1.1rem; }

@media (max-width: 900px) {
  .abertura-grade { grid-template-columns: 1fr; }
}

/* ---------- PLANOS (preços + garantia + fechamento) ----------
   Seção escura, no fim da página: o valor é construído antes do preço.
   Substituiu as duas seções que existiam antes — os cards da 3ª dobra e o
   bloco de garantia —, que mostravam preço em dois lugares diferentes. */
.planos {
  position: relative;
  background-color: var(--preto);
  color: var(--branco);
  padding-block: var(--sec-y);
  overflow: hidden;
}
.planos::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/padrao-monograma.png') repeat;
  background-size: 132px 123px;
  opacity: .05;
  pointer-events: none;
}
.planos > .container { position: relative; }
.planos-cabecalho { text-align: center; margin-bottom: 2.5rem; }
.planos-cabecalho .titulo-secao { max-width: 24ch; margin-inline: auto; }
/* .selo aqui fica sobre fundo escuro: --roxo-digital passa AA (4,62:1). */
.planos .selo { color: var(--roxo-digital); }

/* ----- os dois blocos lado a lado -----
   Sem align-items: os blocos esticam até a mesma altura e o .bloco-pe encosta
   no fundo pelo margin-top:auto. Definir align-items aqui anularia isso. */
.planos-blocos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
/* O estado cheio é o PADRÃO: sem JS os dois blocos aparecem assim, íntegros.
   O apagamento só existe dentro de .js-selecao, quando já há como reverter. */
.bloco {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--roxo-profundo) 45%, transparent), transparent 70%),
    var(--grafite);
  border: 1px solid color-mix(in srgb, var(--roxo-digital) 32%, transparent);
  border-radius: var(--raio-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--sombra-alta);
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

/* ----- topo: o nome e o preço são a identidade do bloco -----
   No HTML é texto puro. O JS acrescenta role=radio, tabindex e teclado. */
.bloco-topo {
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--branco) 12%, transparent);
  border-radius: var(--raio-sm);
}
.js-selecao .bloco-topo:focus-visible { outline: 3px solid var(--roxo-digital); outline-offset: 4px; }
.bloco-nome {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: .5rem;
}
.bloco-barra { color: var(--roxo-digital); font-weight: 400; }
/* A bolinha só aparece quando existe escolha para fazer, ou seja, com JS. */
.bloco-marca {
  display: none;
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  margin-right: .2rem;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--branco) 35%, transparent);
  transition: border-color .25s ease, background .25s ease;
}
@media (min-width: 901px) {
  .js-selecao .bloco-marca { display: block; }
}
.js-selecao .bloco--ativo .bloco-marca {
  border-color: var(--roxo-digital);
  background: radial-gradient(circle, var(--roxo-digital) 45%, transparent 47%);
}
.bloco-badge {
  padding: .15rem .4rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--branco) 14%, transparent);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.bloco-preco {
  font-family: var(--fonte-titulo);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 900;
  line-height: 1.1;
}
.bloco-preco em {
  font-family: var(--fonte-texto);
  font-style: normal;
  font-size: .9rem;
  font-weight: 500;
  color: var(--cinza-lilas);
}

/* ----- apagado = desmarcado — só com os dois cards lado a lado -----
   Tudo daqui vive dentro de min-width:901px. No empilhado a escolha não
   existe: apagar um card ali só esconderia o botão de quem quer clicar
   direto, e é isso que se faz no celular. O JS também desliga o radiogroup
   abaixo desse limite, mas a garantia é esta — se o evento de mudança de
   largura não chegar (girar a tela), nenhum CTA some assim mesmo.

   O corte é 901px porque é onde o CSS deixa de empilhar. */
@media (min-width: 901px) {
  /* O corpo perde opacidade, mas o topo (nome e preço) troca de COR, não de
     opacidade: é o que a pessoa precisa ler para escolher, e --cinza-lilas
     mantém 6,4:1 sobre o grafite. Passar o mouse devolve leitura sem clique,
     e quem pede mais contraste no sistema não recebe apagamento nenhum. */
  .js-selecao .bloco { cursor: pointer; }
  .js-selecao .bloco:not(.bloco--ativo) {
    background: color-mix(in srgb, var(--grafite) 55%, var(--preto));
    border-color: color-mix(in srgb, var(--branco) 10%, transparent);
    box-shadow: none;
  }
  .js-selecao .bloco:not(.bloco--ativo) .bloco-nome,
  .js-selecao .bloco:not(.bloco--ativo) .bloco-preco { color: var(--cinza-lilas); }
  /* A transição fica na regra base: declarada só no estado apagado, a volta
     ao estado cheio seria instantânea e o apagamento, suave. */
  .bloco-frase, .bloco-specs, .bloco-detalhe, .bloco-pagamento { transition: opacity .25s ease; }
  /* O apagamento é aplicado item a item, e não no .bloco-corpo inteiro, porque
     opacity de um pai não pode ser desfeita num filho — e o "Saber mais"
     precisa continuar legível no card apagado: comparar os dois planos não
     deve exigir selecionar um deles antes. */
  .js-selecao .bloco:not(.bloco--ativo) .bloco-frase,
  .js-selecao .bloco:not(.bloco--ativo) .bloco-specs,
  .js-selecao .bloco:not(.bloco--ativo) .bloco-detalhe,
  .js-selecao .bloco:not(.bloco--ativo) .bloco-pagamento { opacity: .42; }
  /* Já o botão do WhatsApp sai de cena: ele é a ação do plano escolhido, e
     duas chamadas primárias competindo anulam a própria escolha. visibility
     (e não display) preserva a altura, então trocar de card não faz a página
     pular. */
  .js-selecao .bloco:not(.bloco--ativo) .bloco-cta { visibility: hidden; }
  .js-selecao .bloco:not(.bloco--ativo) .bloco-saiba {
    border-color: color-mix(in srgb, var(--branco) 14%, transparent);
    color: var(--cinza-lilas);
  }
  .js-selecao .bloco:not(.bloco--ativo) .bloco-saiba::after { color: var(--cinza-lilas); }
  .js-selecao .bloco:not(.bloco--ativo):hover {
    border-color: color-mix(in srgb, var(--roxo-digital) 45%, transparent);
  }
  .js-selecao .bloco:not(.bloco--ativo):hover .bloco-frase,
  .js-selecao .bloco:not(.bloco--ativo):hover .bloco-specs,
  .js-selecao .bloco:not(.bloco--ativo):focus-within .bloco-frase,
  .js-selecao .bloco:not(.bloco--ativo):focus-within .bloco-specs { opacity: .78; }
  @media (prefers-contrast: more) {
    .js-selecao .bloco:not(.bloco--ativo) .bloco-frase,
    .js-selecao .bloco:not(.bloco--ativo) .bloco-specs,
    .js-selecao .bloco:not(.bloco--ativo) .bloco-detalhe,
    .js-selecao .bloco:not(.bloco--ativo) .bloco-pagamento { opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .bloco, .bloco-marca, .bloco-frase, .bloco-specs, .bloco-pagamento { transition: none; }
}

.bloco-frase {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: .875rem;
  max-width: 32ch;
}
.bloco-texto { color: var(--cinza-lilas); font-size: .95rem; margin-bottom: 1.75rem; }

/* Os três números vêm da própria copy do plano — "encontros semanais de 90
   minutos", "grupo limitado a até 10 mulheres". Só foram extraídos e postos
   em evidência; não há nenhuma informação nova aqui.

   Antes eram três caixas com fundo e borda. Ao lado de uma lista de dez
   itens e de um parágrafo, viravam mais três blocos disputando atenção — e
   repetindo o que a lista logo abaixo já dizia. Viraram uma faixa de números
   entre dois fios: mesma informação, um bloco a menos. */
.bloco-specs {
  list-style: none;
  padding: .875rem 0;
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  border-block: 1px solid color-mix(in srgb, var(--branco) 10%, transparent);
}
.bloco-specs li { display: flex; align-items: baseline; gap: .4rem; }
.bloco-specs strong {
  font-family: var(--fonte-titulo);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  color: var(--branco);
}
.bloco-specs span { font-size: .75rem; line-height: 1.3; color: var(--cinza-lilas); }

.bloco-rotulo {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cinza-lilas);
  margin-bottom: .75rem;
}

/* Dentro dos planos o disco do check sai de cena e fica só o tique. Vinte
   discos preenchidos, dez de cada lado, viravam um pontilhado que competia
   com o texto — e o tique sozinho já diz "incluído". */
.planos .lista-check { gap: .5rem; }
.planos .lista-check li { padding-left: 1.35rem; font-size: .9rem; }
.planos .lista-check li::before { display: none; }
.planos .lista-check li::after {
  left: .1rem;
  top: .42rem;
  border-color: var(--roxo-digital);
}

/* ----- "Saber mais sobre esse plano" -----
   Link discreto, não um segundo botão: o botão primário do card é o do
   WhatsApp e os dois não podem disputar. */
.bloco-saiba {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  align-self: flex-start;
  margin-top: 1.25rem;
  padding: .5rem .875rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--roxo-digital) 40%, transparent);
  color: var(--branco);
  font-size: .85rem;
  font-weight: 600;
  transition: background-color .2s ease, border-color .2s ease;
}
.bloco-saiba::after { content: '→'; color: var(--roxo-digital); }
.bloco-saiba:hover {
  background: color-mix(in srgb, var(--roxo-profundo) 55%, transparent);
  border-color: var(--roxo-digital);
}
.bloco-saiba:focus-visible { outline: 3px solid var(--roxo-digital); outline-offset: 2px; }
/* Sem JS o detalhe fica aqui, aberto, logo abaixo do link. Com JS ele é
   movido para dentro do modal (ver iniciarDetalhes) — some do card porque
   saiu dele, não porque foi escondido. */
.bloco-detalhe { margin-top: 1.5rem; }

/* ----- modal do detalhe -----
   O <dialog> é criado pelo JS e vive dentro de .planos, então herda o
   tratamento escuro da seção. */
.modal {
  width: min(44rem, calc(100vw - 2rem));
  max-height: min(82vh, 44rem);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--roxo-digital) 32%, transparent);
  border-radius: var(--raio-lg);
  background: var(--grafite);
  color: var(--branco);
  box-shadow: var(--sombra-alta);
}
/* display só no estado aberto: em .modal puro ele venceria o display:none
   que o próprio <dialog> aplica quando fechado, e o modal ficaria sempre
   visível na página.

   position/inset/margin explícitos: declarar display:flex substitui o
   display do navegador e a centralização padrão do <dialog> deixa de
   valer — renderizado, ele nasceu grudado no canto superior esquerdo. */
.modal[open] {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  margin: auto;
}
/* Preto neutro literal: ::backdrop não enxerga as custom properties do
   :root em navegadores anteriores ao Chrome 122, e um var() que falha
   deixaria o fundo transparente. Não é cor de marca — é um véu. */
.modal::backdrop { background: rgba(0, 0, 0, .72); }
.modal-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--branco) 12%, transparent);
}
.modal-identidade .bloco-preco { font-size: 2rem; }
.modal-fechar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--branco) 14%, transparent);
  color: var(--cinza-lilas);
  font-size: 1.35rem;
  line-height: 1;
  transition: color .2s ease, border-color .2s ease;
}
.modal-fechar:hover { color: var(--branco); border-color: var(--roxo-digital); }
.modal-fechar:focus-visible { outline: 3px solid var(--roxo-digital); outline-offset: 2px; }
.modal-corpo { padding: 1.5rem; overflow-y: auto; }
.modal-corpo .bloco-detalhe { margin-top: 0; }
.modal-pe {
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--branco) 12%, transparent);
}

/* ----- pé do bloco: botão, pagamento e garantia -----
   margin-top:auto encosta o pé no fundo, então os dois botões ficam alinhados
   mesmo com o Círculo tendo 10 itens e a Essencial 11. */
.bloco-pe { margin-top: auto; padding-top: 1.75rem; }
.bloco-cta { width: 100%; }
.bloco-pagamento { font-size: .8rem; color: var(--cinza-lilas); text-align: center; margin-top: .875rem; }
.bloco-garantia { font-size: .8rem; color: var(--cinza-lilas); text-align: center; margin-top: .35rem; }

/* ----- fechamento: a voz à esquerda, a prova à direita -----
   Os dois blocos tinham o mesmo peso e nenhum dos dois chegava. Agora a
   frase cresce e a garantia vira card selado. */
.planos-fecho {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid color-mix(in srgb, var(--branco) 10%, transparent);
}
/* Seletor por classe, não .planos-fecho h3: os dois títulos do fecho são
   irmãos e têm tamanhos diferentes. */
.fecho-titulo {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.15;
  max-width: 24ch;
  margin-bottom: 1rem;
}
.fecho-voz p { color: var(--cinza-lilas); max-width: 52ch; }

/* Fundo sólido, sem textura por dentro: o monograma da seção passa por
   trás do card e a caixa precisa parecer fechada, não translúcida. */
.fecho-garantia {
  display: flex;
  gap: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--grafite);
  border: 1px solid color-mix(in srgb, var(--roxo-digital) 30%, transparent);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-alta);
}
.fecho-selo {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--roxo-profundo) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--roxo-digital) 45%, transparent);
  color: var(--roxo-digital);
}
.fecho-selo svg { width: 1.6rem; height: 1.6rem; }
.fecho-garantia h3 { font-size: 1.125rem; margin-bottom: .4rem; }
.fecho-garantia p { color: var(--cinza-lilas); font-size: .9rem; }

@media (max-width: 900px) {
  /* Dois blocos não cabem lado a lado: viram um embaixo do outro, e o
     apagado continua apagado — a escolha segue valendo empilhada. */
  .planos-blocos, .planos-fecho { grid-template-columns: 1fr; }
  .bloco-specs { gap: .5rem; }
  .bloco-specs li { padding: .75rem .625rem; text-align: center; }
}

/* ---------- O QUE AS DUAS OFERECEM ---------- */
.comum { background: var(--branco); padding-block: var(--sec-y); }
.comum-interno {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.comum-foto {
  position: relative;
  border-radius: var(--raio-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--roxo-profundo), var(--roxo-digital));
  aspect-ratio: 4 / 5;
}
.comum-foto img { width: 100%; height: 100%; object-fit: cover; }
.comum-intro { color: var(--texto-suave); margin-bottom: 1.5rem; }

/* Os oito itens viram cartõezinhos em duas colunas. Como lista corrida eles
   viravam uma tira alta e magra ao lado de uma foto 4:5, e a coluna inteira
   ficava sem peso. auto-fit resolve a quebra sozinho: onde não couberem dois
   de 14rem, viram um por linha, sem precisar de breakpoint. */
.comum-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .625rem;
}
/* flex + center: os cartões de uma linha esticam para acompanhar o vizinho
   de duas, e sem isto o texto ficava colado no topo enquanto o tique ia
   para o meio do cartão. Os dois precisam concordar. */
.comum-lista li {
  display: flex;
  align-items: center;
  padding: .75rem .875rem .75rem 2.5rem;
  background: var(--off-white);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}
/* O tique fica centrado na altura do cartão, e não na primeira linha: com
   dois itens quebrando em duas linhas, ancorar no topo deixava o check
   desalinhado do texto. O .22rem repete o deslocamento da lista original,
   onde o tique já nasce um pouco acima do centro do círculo. */
.comum-lista li::before { top: calc(50% - .625rem); left: .75rem; }
.comum-lista li::after { top: calc(50% - .405rem); left: 1.18rem; }
/* No celular duas colunas espremem itens de quatro palavras em três linhas.
   O auto-fit sozinho ainda cabia dois de 14rem aqui — este corte é explícito. */
@media (max-width: 600px) {
  .comum-lista { grid-template-columns: 1fr; }
}
.comum-diferenca {
  margin-top: 2rem;
  padding: 1.5rem;
  border-left: 3px solid var(--roxo-digital);
  background: var(--off-white);
  border-radius: 0 var(--raio-md) var(--raio-md) 0;
  font-size: .95rem;
  color: var(--texto-suave);
}
.comum-diferenca strong { color: var(--roxo-profundo); }

/* ---------- ENCONTROS ---------- */
.encontros { background: var(--off-white); padding-block: var(--sec-y); }
/* Colunas iguais: a coluna de texto virou trilho com cards e precisa de
   largura para os passos não quebrarem em duas linhas cada. */
.encontros-interno {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* Os três passos viram um trilho: número na linha, texto em card branco.
   Antes era texto solto sobre o fundo da seção e a coluna inteira ficava
   sem peso ao lado da foto. */
.passos { position: relative; list-style: none; padding: 0; display: grid; gap: 1rem; margin-block: 2rem; }
.passos li { position: relative; display: flex; align-items: flex-start; gap: 1.125rem; }
/* Uma linha só, do centro do primeiro número ao centro do último, passando
   POR TRÁS dos círculos — os segmentos soltos entre um passo e outro ficavam
   curtos demais para ler como percurso. Os círculos têm fundo sólido e anel
   branco, então cobrem a linha e a fatiam sozinhos. */
.passos::before {
  content: '';
  position: absolute;
  left: 1.375rem;
  top: 1.375rem;
  bottom: 1.375rem;
  width: 2px;
  transform: translateX(-1px);
  background: linear-gradient(
    color-mix(in srgb, var(--roxo-digital) 75%, transparent),
    color-mix(in srgb, var(--roxo-digital) 30%, transparent));
}
.passo-num {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--lilas-suave);
  border: 2px solid var(--branco);
  box-shadow: 0 0 0 1px var(--borda);
  color: var(--roxo-profundo);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: .875rem;
}
.passo-texto {
  flex: 1;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  padding: .625rem 1.125rem;
}

/* O aviso é a ressalva mais importante da página — quem só assiste à
   gravação perde as correções. Ganha ícone e fundo lilás para não ler como
   mais um card igual aos passos. */
.aviso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem .875rem;
  background: var(--lilas-suave);
  border: 1px solid var(--lilas-claro);
  border-radius: var(--raio-md);
  padding: 1.5rem;
}
.aviso-icone {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--branco);
  color: var(--roxo-profundo);
}
.aviso-icone svg { width: 1.25rem; height: 1.25rem; }
.aviso-titulo { align-self: center; font-weight: 700; color: var(--roxo-profundo); }
.aviso p:last-child { font-size: .9rem; color: var(--texto-suave); }

/* O degradê continua como fundo: é o que aparece enquanto a foto carrega,
   já que ela é lazy. A foto é 16:9 e a caixa 16:10 — o cover corta cerca de
   5% de cada lado, e a Ana está centralizada, então nada essencial sai. */
.encontros-video {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--raio-lg);
  background: linear-gradient(150deg, var(--lilas-suave), var(--lilas-claro));
  box-shadow: var(--sombra-alta);
}
.encontros-video img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .comum-interno, .encontros-interno { grid-template-columns: 1fr; }
  .comum-foto { max-width: 26rem; margin-inline: auto; }
  .encontros-video { order: -1; }
}

/* ---------- QUAL DEVO ESCOLHER ---------- */
.escolher { background: var(--branco); padding-block: var(--sec-y); }
.escolher-cabecalho { text-align: center; margin-bottom: 3rem; }
.escolher-cabecalho .titulo-secao { margin-inline: auto; }

.escolher-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
.escolher-card {
  background: var(--off-white);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
}
.escolher-card--destaque { background: var(--lilas-suave); border-color: var(--roxo-digital); }
.escolher-card h3 { margin-bottom: 1.5rem; font-size: 1.15rem; }

/* ---------- DEPOIMENTOS ---------- */
.depoimentos { background: var(--off-white); padding-block: var(--sec-y); }
.depoimentos-cabecalho { text-align: center; margin-bottom: 3rem; }
.depoimentos-cabecalho .titulo-secao { margin-inline: auto; }

.depoimentos-grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}

.depoimento {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border-radius: var(--raio-lg);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  box-shadow: var(--sombra-card);
  margin: 0;
}
/* As aspas saem do fluxo e vão para o canto: como bloco no topo, empurravam
   o texto para baixo e o card começava com um vazio. */
.depoimento-aspas {
  position: absolute;
  top: .75rem;
  right: 1.25rem;
  font-family: var(--fonte-titulo);
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--roxo-digital);
  opacity: .16;
}
/* flex:1 empurra a assinatura para o rodapé: com depoimentos de tamanhos
   diferentes lado a lado, as assinaturas ficam na mesma linha. */
.depoimento p {
  flex: 1;
  position: relative;
  color: var(--texto-suave);
  font-size: 1.0625rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}
.depoimento footer {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borda);
}
/* Iniciais no lugar do retrato: não existem fotos das alunas, e um avatar
   genérico de banco de imagem seria pior do que nenhum. */
.depoimento-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--roxo-profundo);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .02em;
}
.depoimento-quem { display: grid; gap: .3rem; justify-items: start; }
.depoimento cite {
  font-style: normal;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--roxo-profundo);
}
.depoimento-plano {
  padding: .15rem .45rem;
  border-radius: 4px;
  background: var(--lilas-suave);
  color: var(--roxo-profundo);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .escolher-grade, .depoimentos-grade { grid-template-columns: 1fr; }
}

/* ---------- FAQ ----------
   O accordion em si mora em componentes.css; aqui fica só a grade de duas
   colunas com o card de contato, que só existe nesta página. */
.faq { background: var(--branco); padding-block: var(--sec-y); }
.faq-interno {
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.faq-contato {
  background: var(--off-white);
  border-radius: var(--raio-lg);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  text-align: center;
  position: sticky;
  top: 2rem;
}
/* Exceção única à regra de "cores só via token": o ícone abaixo usa um SVG
   embutido como data URI, e o atributo stroke desse SVG precisa de uma cor
   literal — uma custom property (var()) não pode ser interpolada dentro de
   uma data: URI. O valor stroke='%234C1D95' é a forma percent-encoded de
   --roxo-profundo (#4C1D95). Se --roxo-profundo mudar de valor no futuro,
   este trecho precisa ser atualizado manualmente para continuar igual. */
.faq-contato-icone {
  width: 3rem; height: 3rem;
  margin: 0 auto 1.25rem;
  border-radius: var(--raio-sm);
  background: var(--lilas-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C1D95' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E") no-repeat center / 1.5rem;
}
.faq-contato h3 { margin-bottom: .5rem; }
.faq-contato p { color: var(--texto-suave); font-size: .95rem; margin-bottom: 1.5rem; }

@media (max-width: 900px) {
  .faq-interno { grid-template-columns: 1fr; }
  .faq-contato { position: static; }
}