/* Dicionário Emocional
   Mobile primeiro: tudo aqui foi escrito olhando 390px e só depois cresce.
   Direção do briefing (seção 41): afetivo, familiar, leve, confiável, sem
   estética de clínica. */

:root {
  --tinta: #241b3a;
  --tinta-suave: #574a72;
  --papel: #fdf8f1;
  --papel-claro: #ffffff;
  --papel-quente: #fbeee1;
  --acento: #e2622f;
  --acento-escuro: #c24d1f;
  --lilas: #6d4bd6;
  --verde: #2f7a5f;
  --borda: #eadfd1;
  --sombra: 0 10px 30px rgba(36, 27, 58, 0.08);
  --raio: 18px;
  --largura: 720px;
}

/* GOTCHA de mobile: `rem` mede pelo ROOT (html, 16px), não pelo body (17px).
   Fonte escrita como 0.70rem vira 11.2px e fica abaixo do piso de 12px do
   critério mobile da casa. Piso seguro para texto pequeno: 0.78rem. */

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  /* system-ui primeiro. Começar a lista por "Segoe UI" faz o fontconfig do
     Linux substituir por qualquer coisa (deu Liberation Mono no print), e o
     texto sai com cara de terminal. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  /* Nada pode transbordar na horizontal no celular. */
  overflow-x: hidden;
}

/* GOTCHA que já esticou foto em produção: max-width sem height auto faz os
   atributos width/height do HTML virarem altura fixa e a imagem sai deformada.
   Auditoria automática não pega isso, só olhar o print pega. */
img {
  max-width: 100%;
  height: auto;
}

h1, h2, h3 {
  line-height: 1.25;
  margin: 0 0 0.6em;
  font-weight: 800;
  letter-spacing: -0.01em;
}

h1 { font-size: 1.85rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.12rem; }

p { margin: 0 0 1em; }

a { color: var(--lilas); }

strong { font-weight: 700; }

main { display: block; }

.hero,
.secao {
  padding: 40px 20px;
  margin: 0 auto;
  max-width: var(--largura);
}

.secao-clara {
  background: var(--papel-claro);
  max-width: none;
  padding-left: max(20px, calc((100% - var(--largura)) / 2));
  padding-right: max(20px, calc((100% - var(--largura)) / 2));
}
.secao-clara > * { max-width: var(--largura); }

.secao-oferta,
.secao-final {
  background: var(--papel-quente);
  max-width: none;
  text-align: center;
  padding-left: max(20px, calc((100% - var(--largura)) / 2));
  padding-right: max(20px, calc((100% - var(--largura)) / 2));
}
.secao-oferta > *, .secao-final > * { max-width: var(--largura); }

/* ---------- hero ---------- */

/* O hero ocupa a largura toda para o gradiente sangrar, e o CONTEÚDO é
   centralizado pelo padding, não por margin auto em cada filho.
   
   GOTCHA que desalinhou a página inteira no desktop: com `margin-left/right:
   auto` nos filhos, três coisas escapavam e encostavam na borda esquerda da
   tela. O selo é `inline-block`, e margin auto não centraliza inline-block. E
   `.emocoes` e `.nao-sei` declaram `margin` na forma abreviada, que RESETA o
   left/right para zero. No mobile ninguém via, porque a tela inteira tem a
   largura do conteúdo. Centralizar pelo padding do container funciona para
   qualquer display e não pode ser desfeito por um `margin` de outra regra. */
.hero {
  background: linear-gradient(180deg, #fff6ea 0%, var(--papel) 100%);
  max-width: none;
  padding-top: 32px;
  padding-left: max(20px, calc((100% - var(--largura)) / 2));
  padding-right: max(20px, calc((100% - var(--largura)) / 2));
}
.hero > * { max-width: var(--largura); }

.selo {
  display: inline-block;
  background: var(--lilas);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.emocoes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 20px;
}
.emocoes li {
  background: var(--papel-claro);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: var(--sombra);
}
.emocoes li:nth-child(2n) { color: var(--acento); }
.emocoes li:nth-child(3n) { color: var(--lilas); }
.emocoes li:nth-child(5n) { color: var(--verde); }

.nao-sei {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--acento);
  margin: 8px 0 24px;
}

.caixa-oferta {
  background: var(--papel-claro);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 24px 20px;
  margin-top: 28px;
  box-shadow: var(--sombra);
  text-align: center;
}

.oferta-formato { color: var(--tinta-suave); margin-bottom: 4px; }

.preco {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--tinta);
  margin: 4px 0 0;
  letter-spacing: -0.02em;
}
.preco-detalhe { color: var(--tinta-suave); margin-bottom: 20px; }

.prazo { font-size: 0.95rem; color: var(--tinta-suave); margin: 14px 0 0; }
.prazo-forte { font-size: 1.15rem; font-weight: 700; }

/* ---------- botões ---------- */

.botao {
  display: inline-block;
  min-height: 56px;
  padding: 16px 22px;
  border-radius: 999px;
  border: none;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.botao:active { transform: scale(0.98); }

.botao-principal {
  background: var(--acento);
  color: #fff;
  width: 100%;
  box-shadow: 0 8px 20px rgba(226, 98, 47, 0.28);
}
.botao-principal:hover { background: var(--acento-escuro); }
.botao-principal[disabled],
.botao-principal[aria-disabled="true"] {
  background: #d8cec2;
  color: #6b6157;
  box-shadow: none;
  cursor: not-allowed;
}

.botao-leve {
  background: var(--papel-claro);
  color: var(--lilas);
  border: 2px solid var(--lilas);
}

.botao-mini {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 0.85rem;
  background: var(--papel-claro);
  border: 1px solid var(--borda);
  color: var(--tinta);
}

.compra { margin-top: 8px; }
.aviso-checkout {
  font-size: 0.9rem;
  color: var(--tinta-suave);
  background: #fff4e6;
  border: 1px dashed var(--borda);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 12px 0 0;
}

/* ---------- textos ---------- */

.solta { margin-bottom: 0.45em; }
.pergunta { color: var(--lilas); margin-top: 24px; }
.destaque { color: var(--verde); font-size: 1.2rem; }
.frase-grande { font-size: 1.6rem; margin-top: 18px; }
.assinatura { color: var(--tinta-suave); font-weight: 600; }

.fala {
  margin: 0 0 12px;
  padding: 14px 16px;
  background: var(--papel-claro);
  border-left: 5px solid var(--lilas);
  border-radius: 0 14px 14px 0;
  font-size: 1.02rem;
  font-style: italic;
  box-shadow: var(--sombra);
}

.lista { padding-left: 20px; margin: 0 0 1em; }
.lista li { margin-bottom: 6px; }

.ressalva {
  font-size: 0.95rem;
  color: var(--tinta-suave);
  background: var(--papel-claro);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 18px;
}

/* ---------- carrosséis ---------- */

.secao-psicologos {
  background: var(--papel-claro);
  max-width: none;
  padding-left: max(20px, calc((100% - var(--largura)) / 2));
  padding-right: max(20px, calc((100% - var(--largura)) / 2));
}
.secao-psicologos > h2,
.secao-psicologos > h3,
.secao-psicologos > p { max-width: var(--largura); }

/* ───────────────────────── Esteira de autoridade ─────────────────────────
   A lista de psicólogos anda sozinha e NUNCA para: sem pausa no hover, sem
   link e sem botão. Decisão do dono, e faz sentido de produto: o objetivo
   aqui é provar que existe uma base grande de profissionais reais, não tirar
   a pessoa da página de vendas no meio da oferta.

   O truque do laço sem emenda: o mesmo grupo de cartões aparece duas vezes no
   HTML e a animação anda de 0 a -50%. No instante em que volta ao começo, a
   segunda cópia está exatamente onde a primeira estava, então o olho não vê
   corte. Por isso a translação é -50% e não -100%. */

.esteira {
  margin: 0;
  padding: 14px 0;
  background: linear-gradient(180deg, var(--papel-quente), var(--papel));
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  overflow: hidden;
}

.esteira-rotulo {
  margin: 0 auto 10px;
  padding: 0 16px;
  max-width: var(--largura);
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tinta-suave);
}

/* A janela recorta a esteira e apaga as pontas, para os cartões nascerem e
   morrerem em fade em vez de aparecerem cortados na borda da tela. */
.esteira-janela {
  overflow: hidden;
  /* Fade largo nas pontas. Com recorte curto o cartão da borda aparece cortado
     e legível ao mesmo tempo, o que lê como bug de layout em vez de esteira. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}

.esteira-trilho {
  display: flex;
  width: max-content;
  animation: correr var(--duracao, 40s) linear infinite;
  will-change: transform;
}

.esteira[data-sentido="direita"] .esteira-trilho { animation-direction: reverse; }

.esteira-grupo { display: flex; gap: 12px; padding-right: 12px; }

@keyframes correr {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* Movimento reduzido: a esteira para e o dedo assume. Quem liga essa opção no
   sistema costuma ter enjoo com movimento contínuo, e uma faixa andando sem
   parar é exatamente o caso. */
@media (prefers-reduced-motion: reduce) {
  .esteira-trilho { animation: none; }
  .esteira-janela { overflow-x: auto; }
  .esteira-grupo:nth-child(2) { display: none; }
}

.cartao {
  flex: 0 0 184px;
  /* Altura fixa porque a esteira é uma LINHA: cartão com altura variável faz a
     faixa parecer um gráfico de barras andando. Nome e abordagem são aparados
     em duas linhas para caber sempre, e o CRP fica preso no rodapé do cartão. */
  height: 262px;
  background: var(--papel-claro);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 6px 18px rgba(36, 27, 58, 0.06);
  overflow: hidden;
}

.cartao-foto {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--papel-quente);
  border: 3px solid var(--papel-quente);
  margin-bottom: 10px;
}

.cartao-nome {
  font-size: 0.88rem;
  line-height: 1.25;
  /* Altura reservada para DUAS linhas. Sem isso, um nome de duas linhas empurra
     a abordagem para fora do cartão de altura fixa e o texto sai cortado ao
     meio, que foi o que aconteceu com "Psi. Geovanna Guizolini". */
  min-height: 2.5em;
  margin: 0 0 3px;
  color: var(--tinta);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cartao-crp {
  font-size: 0.82rem;
  color: var(--lilas);
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}

.cartao-abordagem {
  font-size: 0.8rem;
  color: var(--tinta-suave);
  margin: 0 0 6px;
  line-height: 1.3;
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cartao-local {
  font-size: 0.8rem;
  color: var(--verde);
  font-weight: 700;
  margin: auto 0 0;
}


/* ---------- faq ---------- */

.faq-item {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 4px 16px;
  margin-bottom: 10px;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  padding: 14px 0;
  min-height: 44px;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: " +"; color: var(--acento); }
.faq-item[open] summary::after { content: " −"; }

/* ---------- barra flutuante ---------- */

.barra-flutuante {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--borda);
  box-shadow: 0 -6px 20px rgba(36, 27, 58, 0.1);
}
.barra-flutuante[hidden] { display: none; }
.barra-texto { display: flex; flex-direction: column; line-height: 1.2; flex: 1 1 auto; min-width: 0; }
.barra-nome { font-size: 0.8rem; color: var(--tinta-suave); }
.barra-preco { font-size: 1.05rem; font-weight: 800; }
.botao-barra { width: auto; flex: 0 0 auto; min-height: 48px; padding: 12px 18px; font-size: 0.92rem; }

/* ---------- entrega ---------- */

.hero-entrega { text-align: center; }
.hero-entrega h1 { color: var(--verde); }

.caixa-download {
  background: var(--papel-claro);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 24px 20px;
  text-align: center;
  box-shadow: var(--sombra);
}
.caixa-download .botao { width: 100%; }
.caixa-download.liberada { border-color: var(--verde); }
.caixa-download.bloqueada { border-color: #d3b1a5; }

.estado {
  display: inline-block;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 16px;
}
.estado-preparando { background: #fff1dd; color: #9a5a12; }
.estado-liberado { background: #e2f5ec; color: var(--verde); }
.estado-bloqueado { background: #fbe6e0; color: #a03a1c; }

.exemplo-link {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  background: var(--papel-claro);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.9rem;
  word-break: break-all;
}

/* ---------- rodapé ---------- */

.rodape {
  background: var(--tinta);
  color: #efe8f7;
  text-align: center;
  padding: 34px 20px calc(90px + env(safe-area-inset-bottom));
}
.rodape-marca { font-size: 1.15rem; font-weight: 800; margin-bottom: 6px; }
.rodape-frase { color: #c3b7d8; max-width: 460px; margin: 0 auto 18px; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; margin-bottom: 14px; }
.rodape-links a {
  color: #efe8f7;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  font-size: 0.92rem;
}
.rodape-contato { color: #a99cc2; font-size: 0.9rem; margin: 0; }

.pagina-entrega ~ .rodape,
.pagina-legal ~ .rodape { padding-bottom: 34px; }

/* ---------- painel ---------- */

.tema-admin { background: #f4f5f8; }
.pagina-admin { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; }
.cabecalho-admin h1 { margin-bottom: 4px; }
.miudo { font-size: 0.85rem; color: var(--tinta-suave); }

.bloco {
  background: #fff;
  border: 1px solid #e3e5ec;
  border-radius: 14px;
  padding: 18px 16px;
  margin-bottom: 18px;
}
.bloco.alerta { border-color: #f0c27a; background: #fffaf0; }
.bloco ul { padding-left: 20px; }

.campo { display: block; margin: 14px 0 8px; font-size: 0.92rem; font-weight: 600; }
.campo input {
  display: block;
  width: 100%;
  margin-top: 6px;
  /* 16px é o mínimo: abaixo disso o Safari do iPhone dá zoom sozinho ao focar. */
  font-size: 16px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #d7dae3;
  border-radius: 10px;
}

.status {
  font-size: 16px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #d7dae3;
  border-radius: 10px;
  width: 100%;
  margin-bottom: 6px;
}

.tabela { width: 100%; border-collapse: collapse; margin-top: 12px; }
.tabela th { display: none; }
.tabela td {
  display: block;
  padding: 6px 0;
  border: none;
  font-size: 0.92rem;
}
.tabela td::before {
  content: attr(data-rotulo);
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
}
.tabela tbody tr {
  display: block;
  border: 1px solid #e3e5ec;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.log { list-style: none; padding: 0; font-size: 0.88rem; }
.log li { padding: 6px 0; border-bottom: 1px solid #eef0f4; }
.resultado { font-size: 0.9rem; color: var(--verde); min-height: 20px; }
.resultado.erro { color: #b5391b; }

/* ---------- telas maiores ---------- */

@media (min-width: 700px) {
  body { font-size: 18px; }
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.75rem; }
  /* GOTCHA que deixou o desktop torto desde o começo: esta linha era
     `.hero, .secao { padding: 64px 28px }` e, por vir depois no arquivo,
     apagava o padding lateral calculado das seções que ocupam a largura toda.
     Sem esse padding, quem centraliza o conteúdo é `margin: auto` em cada
     filho, e isso falha em inline-block e em quem declara `margin` abreviada,
     jogando selo, cápsulas e frases contra a borda esquerda da tela.
     No celular ninguém via, porque lá a tela tem a largura do conteúdo. */
  .hero, .secao { padding-top: 64px; padding-bottom: 64px; }
  .secao { padding-left: 28px; padding-right: 28px; }
  .hero,
  .secao-clara,
  .secao-oferta,
  .secao-final,
  .secao-psicologos {
    padding-left: max(28px, calc((100% - var(--largura)) / 2));
    padding-right: max(28px, calc((100% - var(--largura)) / 2));
  }
  .preco { font-size: 3.2rem; }
  .botao-principal { width: auto; min-width: 320px; }
  .barra-flutuante { justify-content: center; }
  .barra-texto { flex: 0 0 auto; }

  .tabela th {
    display: table-cell;
    text-align: left;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tinta-suave);
    padding: 8px 10px;
    border-bottom: 1px solid #e3e5ec;
  }
  .tabela tbody tr { display: table-row; border: none; padding: 0; }
  .tabela td { display: table-cell; padding: 10px; border-bottom: 1px solid #eef0f4; vertical-align: top; }
  .tabela td::before { display: none; }
  .status { width: auto; }
}

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


/* ───────────────────────── Elementos gráficos ─────────────────────────
   O briefing (seção 41) pede afetivo, familiar, leve e confiável, sem cara de
   clínica. Aqui isso vira: manchas de cor desfocadas atrás do hero, cápsulas
   de emoção coloridas, e um bloco de celebração na entrega. Tudo em CSS puro,
   porque a CSP não deixa buscar imagem de fora e SVG inline pesa menos que
   qualquer ilustração. */

/* GOTCHA: o hero PRECISA de overflow hidden. O .hero-fundo é posicionado com
   inset lateral negativo para as manchas de cor sangrarem além do texto, e sem
   recorte aqui esses 20px de cada lado viram scroll horizontal na página
   inteira. O sintoma é traiçoeiro: window.innerWidth passa a valer 410 numa
   tela de 390, então uma auditoria que compare scrollWidth com innerWidth
   devolve "zero transbordo" e o defeito passa. Compare sempre com
   documentElement.clientWidth. */
.hero { position: relative; isolation: isolate; overflow: hidden; }

.hero-fundo {
  /* GOTCHA: `.hero > *` limita todo filho direto a 720px, e o fundo é filho
     direto. Sem esta linha ele era cortado em 720px e a página ganhava uma
     BORDA VERTICAL DURA no meio do desktop, com cor de um lado e nada do
     outro. Blur não faz borda reta: quando aparecer uma, procure um recorte,
     não a sombra. */
  max-width: none;
  position: absolute;
  inset: -40px -20px auto;
  height: 420px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.bolha {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.5;
}

/* Posição em PORCENTAGEM, não em pixel. Com valores fixos as três manchas
   ficavam amontoadas à esquerda numa tela de 1440 e a metade direita do hero
   ficava lisa, o que lê como fundo que "acabou" no meio da página. Em % elas
   acompanham a largura e o hero fica equilibrado em qualquer tela. */
.bolha-a { width: 30%; min-width: 220px; aspect-ratio: 1; background: #f6c89a; top: -70px; left: -4%; }
.bolha-b { width: 26%; min-width: 200px; aspect-ratio: 1; background: #c9b8f5; top: 30px; right: -4%; opacity: 0.45; }
.bolha-c { width: 24%; min-width: 180px; aspect-ratio: 1; background: #a9dcc4; top: 200px; left: 40%; opacity: 0.35; }

/* Cápsulas de emoção: cada uma com sua cor, em vez de sete pílulas iguais.
   É o elemento mais "produto infantil" da página sem virar desenho animado. */
.emocoes li {
  font-size: 0.92rem;
  font-weight: 700;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--papel-claro);
  border: 1.5px solid var(--borda);
  box-shadow: 0 3px 10px rgba(36, 27, 58, 0.05);
}

.emocoes li:nth-child(1) { color: #c0392b; border-color: #f0c2bb; background: #fdeeeb; }
.emocoes li:nth-child(2) { color: #7d5ba6; border-color: #ddd0ef; background: #f5f0fc; }
.emocoes li:nth-child(3) { color: #b7791f; border-color: #f0dfb8; background: #fdf6e5; }
.emocoes li:nth-child(4) { color: #2f7a5f; border-color: #bde0d0; background: #ecf7f2; }
.emocoes li:nth-child(5) { color: #2b6cb0; border-color: #c2d8ef; background: #ebf3fb; }
.emocoes li:nth-child(6) { color: #b83280; border-color: #f2c6df; background: #fdeef6; }
.emocoes li:nth-child(7) { color: #4a5568; border-color: #d6dae0; background: #f1f3f5; }

/* Bloco de celebração da entrega. É a primeira coisa que o comprador vê depois
   de pagar, então ganha o peso de tela que o dono pediu. */
.celebracao {
  position: relative;
  margin: 6px auto 22px;
  padding: 26px 20px 24px;
  max-width: var(--largura);
  border-radius: 24px;
  background: linear-gradient(160deg, #eaf7f0, #fdf8f1 70%);
  border: 1.5px solid #bde0d0;
  box-shadow: 0 14px 34px rgba(47, 122, 95, 0.12);
  text-align: center;
}

.celebracao-selo {
  display: inline-block;
  margin: 0 0 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--verde);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.celebracao-titulo {
  margin: 0 0 8px;
  font-size: 2.3rem;
  line-height: 1.1;
  color: var(--verde);
}

.celebracao-linha { margin: 0; font-size: 1.06rem; color: var(--tinta); }

/* O aviso de como e quando o material chega. Fica logo abaixo da comemoração
   porque é a primeira pergunta de quem acabou de pagar. */
.entrega-aviso {
  margin: 0 auto 14px;
  padding: 14px 16px;
  max-width: var(--largura);
  border-radius: 14px;
  background: var(--papel-claro);
  border: 1px dashed var(--lilas);
  color: var(--tinta);
  font-size: 1rem;
}

@media (min-width: 720px) {
  .celebracao-titulo { font-size: 2.9rem; }
  .cartao { flex: 0 0 196px; }
}

/* ─────────────── Esteira discreta (a do topo) ───────────────
   O topo é a primeira coisa que aparece e não pode competir com a manchete da
   oferta. Então o cartão perde a caixa (sem fundo, sem borda, sem sombra) e o
   retrato cresce: pesa menos como bloco e mais como rosto. Retrato QUADRADO com
   canto arredondado, que é o formato que a foto do cadastro já tem, então não
   sobra corte estranho como no círculo. */

.esteira-discreta {
  background: var(--papel);
  border-top: none;
  border-bottom: 1px solid var(--borda);
  padding: 12px 0 14px;
}

.esteira-discreta .esteira-rotulo {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: #9b90ad;
  margin-bottom: 8px;
}

.esteira-discreta .cartao {
  flex: 0 0 132px;
  height: auto;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

.esteira-discreta .cartao-foto {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  border: none;
  object-fit: cover;
  margin-bottom: 8px;
}

.esteira-discreta .cartao-nome {
  font-size: 0.86rem;
  min-height: 0;
  margin-bottom: 1px;
  font-weight: 700;
}

.esteira-discreta .cartao-crp {
  font-size: 0.78rem;
  color: var(--tinta-suave);
  font-weight: 600;
  margin-bottom: 0;
}

/* Na esteira discreta a abordagem sai: quatro linhas de texto embaixo de cada
   rosto é o oposto de discreto. Ela continua na esteira da segunda dobra. */
.esteira-discreta .cartao-abordagem { display: none; }

.esteira-discreta .cartao-local {
  font-size: 0.78rem;
  font-weight: 600;
  margin: 2px 0 0;
}

/* ─────────────── Escolha de público (só na página geral) ───────────────
   Dois caminhos para a mesma oferta. Cartões grandes porque no celular são o
   alvo de toque, e empilhados por padrão: lado a lado em 390px daria dois
   botões estreitos com o texto quebrando. */

.secao-escolha { text-align: center; }

.escolha-botoes {
  display: grid;
  gap: 12px;
  margin: 18px auto 14px;
  max-width: var(--largura);
}

.escolha-cartao {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 16px;
  min-height: 76px;
  justify-content: center;
  border-radius: var(--raio);
  background: var(--papel-claro);
  border: 2px solid var(--lilas);
  text-decoration: none;
  color: var(--tinta);
  box-shadow: 0 8px 22px rgba(109, 75, 214, 0.1);
}

.escolha-rotulo { font-size: 1.08rem; font-weight: 800; color: var(--lilas); }
.escolha-detalhe { font-size: 0.9rem; color: var(--tinta-suave); }

@media (min-width: 720px) {
  .escolha-botoes { grid-template-columns: 1fr 1fr; }
}

/* ───────────────── Mapa das emoções no cérebro da criança ─────────────────
   SVG inline com animação em CSS. Nada de biblioteca: a CSP bloqueia CDN e
   sete pontos com dez fios não justificam trazer uma.

   O truque dos fios: cada <line> leva pathLength="1", então o dasharray passa a
   trabalhar em unidades de 0 a 1 e fios de comprimentos diferentes acendem no
   mesmo ritmo. Sem isso, a linha curta acende num piscar e a longa se arrasta,
   e o conjunto perde o compasso. */

.secao-mapa { text-align: center; }

.mapa {
  margin: 22px auto 0;
  max-width: 460px;
}

.mapa-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.mapa-svg .cabeca {
  fill: #fff;
  stroke: var(--borda);
  stroke-width: 2.5;
}

.mapa-svg .miolo {
  fill: url(#miolo);
  opacity: 0.85;
}

.mapa-svg .sulco {
  fill: none;
  stroke: #d9c7b4;
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.7;
}

.mapa-svg .fio {
  stroke: var(--lilas);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.25;
  animation: acender 5.5s ease-in-out infinite;
  animation-delay: var(--atraso, 0s);
}

@keyframes acender {
  0%        { stroke-dashoffset: 1;   opacity: 0.16; }
  22%       { stroke-dashoffset: 0;   opacity: 0.95; }
  46%       { stroke-dashoffset: 0;   opacity: 0.95; }
  70%, 100% { stroke-dashoffset: -1;  opacity: 0.16; }
}

.mapa-svg .halo {
  fill: var(--cor);
  opacity: 0.16;
  transform-box: fill-box;
  transform-origin: center;
  animation: pulsar 3.6s ease-in-out infinite;
  animation-delay: var(--atraso, 0s);
}

@keyframes pulsar {
  0%, 100% { transform: scale(0.72); opacity: 0.14; }
  50%      { transform: scale(1.18); opacity: 0.34; }
}

.mapa-svg .nucleo {
  fill: var(--cor);
  stroke: #fff;
  stroke-width: 2.5;
}

/* Rótulo dentro da figura só entra em tela grande. Em 390px sete nomes se
   encavalam e ainda cairiam abaixo do piso de 12px depois da escala do
   viewBox. No celular quem nomeia é a legenda em HTML, logo abaixo. */
.mapa-svg .rotulo { display: none; }

.mapa-legenda { margin: 14px 0 0; }

.mapa-legenda ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  padding: 0;
  margin: 0;
}

.mapa-legenda li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tinta-suave);
}

.bolinha {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}

@media (min-width: 700px) {
  .mapa { max-width: 560px; }
  /* Com os nomes dentro da figura, a legenda embaixo vira repetição. Ela
     continua no HTML para o leitor de tela e para o celular. */
  .mapa-legenda { display: none; }
  .mapa-svg .rotulo {
    display: block;
    font-size: 13px;
    font-weight: 700;
    fill: var(--tinta);
    text-anchor: middle;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 4;
    stroke-linejoin: round;
  }
}

/* Movimento reduzido: o mapa aparece inteiro aceso e parado. A informação
   continua toda na tela, só não pisca. */
@media (prefers-reduced-motion: reduce) {
  .mapa-svg .fio {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 0.75;
  }
  .mapa-svg .halo { animation: none; opacity: 0.22; }
}

/* Cor de cada emoção e atraso de cada fio. Isto mora aqui, e não num
   atributo style, porque a CSP é `style-src 'self'` sem unsafe-inline: atributo
   style no HTML é bloqueado pelo navegador e some sem avisar. */
.ponto-1 { --cor: #c0392b; --atraso: 0.00s; }
.bolinha-1 { background: #c0392b; }
.ponto-2 { --cor: #7d5ba6; --atraso: 0.55s; }
.bolinha-2 { background: #7d5ba6; }
.ponto-3 { --cor: #b7791f; --atraso: 1.10s; }
.bolinha-3 { background: #b7791f; }
.ponto-4 { --cor: #2f7a5f; --atraso: 1.65s; }
.bolinha-4 { background: #2f7a5f; }
.ponto-5 { --cor: #2b6cb0; --atraso: 2.20s; }
.bolinha-5 { background: #2b6cb0; }
.ponto-6 { --cor: #b83280; --atraso: 2.75s; }
.bolinha-6 { background: #b83280; }
.ponto-7 { --cor: #4a5568; --atraso: 3.30s; }
.bolinha-7 { background: #4a5568; }

.fio-1 { --atraso: 0.00s; }
.fio-2 { --atraso: 0.42s; }
.fio-3 { --atraso: 0.84s; }
.fio-4 { --atraso: 1.26s; }
.fio-5 { --atraso: 1.68s; }
.fio-6 { --atraso: 2.10s; }
.fio-7 { --atraso: 2.52s; }
.fio-8 { --atraso: 2.94s; }
.fio-9 { --atraso: 3.36s; }
.fio-10 { --atraso: 3.78s; }

/* ───────────── Mapa: ponto clicável e caixa de texto ─────────────
   O núcleo visível tem 8 de raio. Fosse ele o alvo, o dedo teria 16px para
   acertar. O círculo `.alvo` é transparente, tem 24 de raio e existe só para
   receber o toque, o que dá 48px no viewBox e passa folgado no piso de 40px. */

.mapa-svg .ponto { cursor: pointer; }
.mapa-svg .alvo { fill: transparent; }

.mapa-svg .ponto:focus-visible {
  outline: 3px solid var(--lilas);
  outline-offset: 3px;
  border-radius: 50%;
}

/* O ponto aberto ganha anel e para de pulsar: com o texto na tela, o pulso
   passa a competir com a leitura em vez de convidar para o clique. */
.mapa-svg .ponto-aberto .nucleo { stroke: var(--cor); stroke-width: 4; r: 10; }
.mapa-svg .ponto-aberto .halo { animation: none; opacity: 0.42; }

.mapa-painel {
  margin: 18px auto 0;
  max-width: 560px;
  min-height: 96px;
}

.mapa-convite {
  margin: 0;
  font-size: 0.95rem;
  color: var(--tinta-suave);
  font-style: italic;
}

.mapa-texto {
  text-align: left;
  background: var(--papel-claro);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 18px 18px 16px;
  box-shadow: var(--sombra);
}

.mapa-texto-titulo { margin: 0 0 8px; font-size: 1.2rem; }
.mapa-texto p { margin: 0 0 12px; }

.mapa-rotulo-lista {
  margin: 14px 0 7px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.mapa-palavras {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0;
  margin: 0;
}

.mapa-palavras .palavra {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  background: var(--papel);
}

/* `[hidden]` perde para qualquer display declarado em classe, porque a regra do
   navegador tem especificidade zero. Sem esta linha o texto de todas as sete
   emoções aparece de uma vez. */
.mapa-painel [hidden] { display: none !important; }

/* Cor de cada palavra, na mesma ordem das emoções do mapa. */
.palavra-1 { color: #c0392b; }
.palavra-2 { color: #7d5ba6; }
.palavra-3 { color: #b7791f; }
.palavra-4 { color: #2f7a5f; }
.palavra-5 { color: #2b6cb0; }
.palavra-6 { color: #b83280; }
.palavra-7 { color: #4a5568; }