/* Fantasy Island — estilo do site inteiro.
   Padrão da marca: roxo escuro, amarelo, Poppins + DM Mono, sombra roxa deslocada.
   Tema único escuro, por escolha (é a identidade da escola). */

:root {
  --roxo-fundo: #1b0f2c;
  --roxo-meio: #2a1842;
  --roxo-borda: #3d2560;
  --roxo-sombra: #40006e;
  --roxo-vivo: #45006e;
  --cartao: #1c1b1f;
  --amarelo: #ffd02a;
  --amarelo-escuro: #e6b400;
  --texto: #f4effa;
  --texto-2: #c3b5d8;
  --texto-3: #9585ad;
  --verde: #52d053;
  --discord: #5865f2;
  --raio: 22px;
  --display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 90px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--roxo-fundo);
  color: var(--texto);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.junto { white-space: nowrap; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--amarelo); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; border-radius: 8px; }
p, h1, h2, h3, ul, ol { margin: 0; }

.miolo { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 20px; }

/* ---------- títulos no padrão da marca ---------- */
.marca-titulo {
  font-weight: 800;
  color: var(--amarelo);
  letter-spacing: -0.015em;
  line-height: 1.05;
  text-shadow: 0.05em 0.06em 0 var(--roxo-sombra);
  text-wrap: balance;
}
.rotulo {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-2);
}

/* ---------- menu ---------- */
.menu {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(27, 15, 44, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--roxo-borda);
}
.menu .miolo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
}
.menu-logo img {
  width: 150px;
  filter: drop-shadow(3px 3px 0 var(--roxo-sombra));
}
.menu-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  list-style: none;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 500;
}
.menu-links a { color: var(--texto-2); text-decoration: none; }
.menu-links a:hover, .menu-links a[aria-current="page"] { color: var(--amarelo); }
.menu-cta { flex-shrink: 0; }
.menu-abrir {
  display: none;
  background: none;
  border: 1.5px solid var(--roxo-borda);
  color: var(--texto);
  border-radius: 10px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

@media (max-width: 860px) {
  .menu .miolo { flex-wrap: wrap; }
  .menu-abrir { display: block; }
  .menu-links {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    gap: 2px;
    padding-block: 8px 4px;
  }
  .menu-links a { display: block; padding: 8px 0; font-size: 1.05rem; }
  .menu.aberto .menu-links { display: flex; }
  .menu .menu-cta { display: none; }
  .menu.aberto .menu-cta { display: inline-flex; order: 4; }
}

/* ---------- botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 24px;
  cursor: pointer;
  border: none;
  transition: transform .15s, box-shadow .15s;
}
.botao svg { width: 22px; height: 22px; flex-shrink: 0; }
.botao-amarelo { background: var(--amarelo); color: var(--roxo-fundo); box-shadow: 4px 4px 0 var(--roxo-sombra); }
.botao-roxo { background: var(--roxo-fundo); color: var(--amarelo); box-shadow: 4px 4px 0 var(--roxo-sombra); }
.botao-pequeno { padding: 8px 18px; font-size: 0.9rem; }
@media (prefers-reduced-motion: no-preference) {
  .botao:hover { transform: translate(-2px, -2px); }
  .botao-amarelo:hover, .botao-roxo:hover { box-shadow: 6px 6px 0 var(--roxo-sombra); }
}

/* ---------- abertura ---------- */
.abertura { padding-block: 72px 56px; position: relative; overflow: hidden; }
.abertura::before {
  /* brilho roxo atrás do título, discreto */
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(69, 0, 110, 0.55), transparent 65%);
  pointer-events: none;
}
.abertura .miolo { position: relative; display: grid; gap: 22px; }
/* só a home tem a foto ao lado do título */
.abertura .miolo:has(> .abertura-foto) { grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.abertura-texto { display: grid; gap: 22px; }
.abertura-foto { margin: 0; display: grid; gap: 12px; justify-items: center; }
.abertura-foto img { width: min(320px, 100%); height: auto; border-radius: 28px; box-shadow: 10px 10px 0 var(--roxo-sombra); transform: rotate(2deg); }
.abertura-foto figcaption { font-size: 1.1rem; font-weight: 700; color: var(--texto); text-align: center; margin-top: 6px; }
.abertura-foto figcaption b { color: var(--amarelo); font-weight: 800; }
@media (max-width: 760px) {
  .abertura .miolo:has(> .abertura-foto) { grid-template-columns: 1fr; gap: 32px; }
  .abertura-foto img { width: 200px; }
}
.abertura h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); max-width: 14ch; }
.abertura .lead { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--texto-2); max-width: 54ch; }
.abertura .lead b { color: var(--texto); font-weight: 600; }
.abertura-acoes { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.abertura-acoes .nota { color: var(--texto-3); font-size: 0.9rem; }

/* ---------- faixa de credenciais ---------- */
.credenciais { border-block: 1px solid var(--roxo-borda); background: var(--roxo-meio); }
.credenciais ul {
  list-style: none;
  padding: 18px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 34px;
  font-size: 0.95rem;
  color: var(--texto-2);
}
.credenciais b { color: var(--amarelo); font-weight: 700; }

/* ---------- seções ---------- */
.secao { padding-block: 84px; }
.secao-cabeca { display: grid; gap: 12px; margin-bottom: 40px; }
.secao-cabeca h2 { font-size: clamp(2rem, 5vw, 3rem); }
.secao-cabeca p:not(.rotulo) { color: var(--texto-2); max-width: 60ch; }

/* ---------- balões de preço ---------- */
.baloes {
  display: grid;
  grid-template-columns: 1fr 1fr 1.12fr;
  gap: 26px;
  align-items: end;
}
@media (max-width: 760px) { .baloes { grid-template-columns: 1fr; } }

.balao {
  position: relative;
  background: var(--verde);
  color: var(--roxo-fundo);
  border-radius: 34px;
  padding: 34px 30px 30px;
  box-shadow: 10px 10px 0 var(--roxo-sombra);
  display: grid;
  gap: 18px;
}
/* a "pontinha" de balão de fala, embaixo à esquerda */
.balao::after {
  content: "";
  position: absolute;
  left: 44px;
  bottom: -26px;
  width: 44px;
  height: 30px;
  background: var(--verde);
  clip-path: polygon(0 0, 100% 0, 10% 100%);
}
.balao-destaque { padding-block: 44px 36px; }
.balao-selo {
  position: absolute;
  top: -16px;
  right: 26px;
  background: var(--roxo-vivo);
  color: var(--amarelo);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--roxo-fundo);
}
.balao h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; }
.balao-preco { display: flex; align-items: baseline; gap: 8px; line-height: 1; }
.balao-preco .rs { font-weight: 700; font-size: 1.4rem; }
.balao-preco .valor { font-weight: 900; font-size: clamp(3.6rem, 9vw, 4.8rem); letter-spacing: -0.03em; }
.balao-preco .por { font-family: var(--mono); font-size: 0.9rem; opacity: 0.8; }
.balao ul { list-style: none; padding: 0; display: grid; gap: 8px; font-weight: 500; }
.balao li { position: relative; padding-left: 30px; }
.balao li::before { content: "✦"; color: var(--roxo-vivo); position: absolute; left: 0; top: 0; }
.balao-pagamento {
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.balao-pagamento span {
  background: #765898; /* roxo-claro do padrão Fantasy Island */
  color: var(--amarelo);
  border-radius: 999px;
  padding: 7px 18px;
  box-shadow: 3px 3px 0 var(--roxo-fundo);
}
.balao-acoes { display: grid; gap: 10px; justify-items: start; }
.balao-acoes .alt { font-size: 0.92rem; font-weight: 600; color: var(--roxo-fundo); }
.balao-acoes .alt a { color: var(--roxo-vivo); }

.baloes-nota { margin-top: 56px; color: var(--texto-3); font-size: 0.92rem; text-align: center; }

/* ---------- como funciona (resumo na home) ---------- */
.ciclo {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 760px) { .ciclo { grid-template-columns: 1fr; } }
.ciclo li {
  background: var(--cartao);
  border-radius: var(--raio);
  padding: 24px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.ciclo .dia { font-family: var(--mono); color: var(--amarelo); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ciclo h3 { font-size: 1.15rem; }
.ciclo p { color: var(--texto-2); font-size: 0.97rem; }

/* ---------- o que o mensal entrega (prévia do relatório) ---------- */
/* texto estreito à esquerda, relatório grande à direita (pra dar pra ler o que tem dentro) */
.miolo.recebe { max-width: 1320px; }
.recebe { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.5fr); gap: 40px; align-items: center; }
@media (max-width: 960px) { .recebe { grid-template-columns: 1fr; } }
.recebe-texto { display: grid; gap: 12px; }
.recebe-texto h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); }
.recebe-itens { display: grid; gap: 14px; margin-top: 6px; }
.recebe-itens div { border-left: 3px solid var(--verde); padding-left: 14px; display: grid; gap: 2px; }
.recebe-itens h3 { font-size: 0.98rem; color: var(--verde); }
.recebe-itens p { color: var(--texto-2); font-size: 0.9rem; line-height: 1.5; }

/* o relatório imita a página do aluno: fundo lilás, cartões roxos */
.relatorio {
  margin: 0;
  background: #765898;
  border-radius: 26px;
  padding: 12px 12px 16px;
  display: grid;
  gap: 12px;
  box-shadow: 10px 10px 0 var(--roxo-sombra);
  transform: rotate(0.6deg);
}
.relatorio figcaption { padding-inline: 6px; }
.relatorio-abas { display: flex; flex-wrap: wrap; gap: 6px; }
.relatorio-abas button {
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  background: var(--roxo-vivo); color: rgba(255,255,255,.88);
  border: none; border-radius: 999px; padding: 6px 12px;
}
.relatorio-abas button[aria-selected="true"] { background: var(--amarelo); color: var(--roxo-vivo); }
.relatorio-abas button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* todas as partes têm o mesmo tamanho (1000×700): trocar de aba não mexe no layout */
.relatorio-tela { aspect-ratio: 1000 / 700; border-radius: 16px; overflow: hidden; background: #765898; }
.relatorio-tela img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 860px) { .relatorio { transform: none; } }
.relatorio-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.relatorio-topo img { width: 96px; filter: drop-shadow(2px 2px 0 var(--roxo-vivo)); }
.relatorio-topo span { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.88); font-weight: 600; }
.relatorio-titulo { font-weight: 800; font-size: 1.6rem; line-height: 1.05; color: var(--amarelo); text-shadow: 3px 3px 0 var(--roxo-vivo); }
.relatorio-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.relatorio-tiles div { background: var(--roxo-vivo); border-radius: 12px; border-top: 3px solid var(--amarelo); padding: 10px 12px; display: grid; gap: 2px; }
.relatorio-tiles b { color: var(--amarelo); font-size: 1.15rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.relatorio-tiles span { font-size: 0.75rem; color: rgba(255,255,255,.85); line-height: 1.3; }
.relatorio-cmp { background: var(--roxo-vivo); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; }
.relatorio-rot { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amarelo); }
.relatorio-barras { display: grid; gap: 8px; }
.relatorio-barras div { display: grid; grid-template-columns: 9.5rem 1fr 2.6rem; gap: 10px; align-items: center; font-size: 0.82rem; color: rgba(255,255,255,.9); }
.relatorio-barras i { height: 10px; width: var(--w); border-radius: 5px; }
.relatorio-barras i.ok { background: var(--verde); }
.relatorio-barras i.warn { background: #e6770b; }
.relatorio-barras b { text-align: right; font-variant-numeric: tabular-nums; }
.relatorio-check { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 0.88rem; color: #fff; }
.relatorio-check li { background: var(--roxo-vivo); border-radius: 10px; padding: 8px 12px; }
.relatorio-check b { color: var(--amarelo); font-weight: 700; }
.relatorio figcaption { font-size: 0.8rem; color: rgba(255,255,255,.88); }
@media (max-width: 480px) {
  .relatorio-tiles { grid-template-columns: 1fr; }
  .relatorio-barras div { grid-template-columns: 1fr 2.6rem; }
  .relatorio-barras span { grid-column: 1 / -1; }
}

/* ---------- depoimentos ---------- */
.depoimentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .depoimentos { grid-template-columns: 1fr; } }
.depoimento {
  background: var(--cartao);
  border-radius: 28px;
  padding: 24px;
  display: grid;
  gap: 14px;
  align-content: start;
}
.depoimento-quem { display: flex; align-items: center; gap: 14px; }
.depoimento-quem img { width: 56px; height: 56px; border-radius: 50%; }
.depoimento-quem b { color: var(--verde); font-weight: 600; font-size: 1.1rem; }
.depoimento p { color: var(--texto); }

/* ---------- estudo da semana ---------- */
.estudo {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: center;
  background: var(--cartao);
  border-radius: 30px;
  padding: 18px;
}
@media (max-width: 760px) { .estudo { grid-template-columns: 1fr; } }
.estudo img { border-radius: 20px; border: 1px solid var(--roxo-borda); }
.estudo-texto { display: grid; gap: 14px; padding: 10px 14px 14px 0; align-content: center; }
.estudo-texto h3 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
.estudo-texto p { color: var(--texto-2); }
.estudo-texto .botao { justify-self: start; }

/* ---------- chamada final ---------- */
.final {
  background: var(--amarelo);
  color: var(--roxo-fundo);
  border-radius: 34px;
  padding: clamp(32px, 6vw, 56px);
  display: grid;
  gap: 18px;
  justify-items: start;
  box-shadow: 10px 10px 0 var(--roxo-sombra);
}
.final h2 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; }
.final p { font-size: 1.1rem; max-width: 52ch; font-weight: 500; }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--roxo-borda); margin-top: 84px; padding-block: 40px; color: var(--texto-3); font-size: 0.9rem; }
.rodape .miolo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: center; }
.rodape img { width: 120px; filter: drop-shadow(2px 2px 0 var(--roxo-sombra)); }
.rodape ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.rodape a { color: var(--texto-2); text-decoration: none; }
.rodape a:hover { color: var(--amarelo); }

/* ---------- tese, pilares e tier 3 ---------- */
.v2-tese { padding-bottom: 0; }
.v2-citacao { margin: 0 0 28px; padding: 26px 30px; background: var(--roxo-meio); border-left: 6px solid var(--amarelo); border-radius: 0 24px 24px 0; }
.v2-citacao p { font-size: clamp(1.4rem, 3.4vw, 2rem); font-weight: 700; line-height: 1.25; color: var(--texto); text-wrap: balance; }
.v2-citacao cite { display: block; margin-top: 10px; font-style: normal; font-family: var(--mono); color: var(--amarelo); font-size: 0.9rem; }
.v2-texto { color: var(--texto-2); max-width: 62ch; margin-bottom: 22px; }
.v2-pilares { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 14px; }
@media (max-width: 760px) { .v2-pilares { grid-template-columns: 1fr; } }
.v2-pilares li { background: var(--cartao); border-radius: 20px; padding: 20px 22px; display: grid; gap: 6px; align-content: center; }
.v2-pilares b { font-size: 1.2rem; font-weight: 800; }
.v2-pilares .v2-pilar-forte { background: var(--amarelo); color: var(--roxo-fundo); box-shadow: 6px 6px 0 var(--roxo-sombra); }
.v2-pilares span { color: var(--texto-2); }
.v2-pilar-forte span { font-weight: 500; color: inherit; }
.v2-tier3 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .v2-tier3 { grid-template-columns: 1fr; } }
.v2-tier3 article { background: var(--cartao); border-radius: var(--raio); padding: 24px; display: grid; gap: 8px; border-top: 4px solid var(--verde); }
.v2-tier3 .dia { font-family: var(--mono); color: var(--verde); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.v2-tier3 h3 { font-size: 1.3rem; }
.v2-tier3 p:not(.dia) { color: var(--texto-2); }

/* ---------- páginas internas ---------- */
.topo-pagina { padding-block: 64px 24px; }
.topo-pagina h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); max-width: 18ch; }
.topo-pagina .rotulo a { color: var(--texto-2); }

.passos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .passos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .passos { grid-template-columns: 1fr; } }
.passos li { background: var(--cartao); border-radius: var(--raio); padding: 22px; display: grid; gap: 8px; align-content: start; }
.passos .n { width: 40px; height: 40px; border-radius: 50%; background: var(--amarelo); color: var(--roxo-fundo); display: grid; place-items: center; font-weight: 900; box-shadow: 3px 3px 0 var(--roxo-sombra); }
.passos h3 { font-size: 1.1rem; }
.passos p { color: var(--texto-2); font-size: 0.96rem; }

.dois-planos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .dois-planos { grid-template-columns: 1fr; } }
.dois-planos article { background: var(--cartao); border-radius: var(--raio); padding: 26px; display: grid; gap: 16px; align-content: start; }
.dois-planos .destaque { border: 2px solid var(--verde); }
.preco-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.preco-linha b { font-size: 1.3rem; }
.preco-linha span { font-weight: 900; font-size: 1.8rem; color: var(--verde); }

.lista-check { list-style: none; padding: 0; display: grid; gap: 10px; color: var(--texto-2); }
.lista-check li { position: relative; padding-left: 28px; }
.lista-check li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--amarelo); }
.lista-check b { color: var(--texto); }

.temas { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.temas li { background: var(--roxo-meio); border: 1px solid var(--roxo-borda); border-radius: 999px; padding: 8px 18px; font-weight: 600; }
.nota-temas { margin-top: 22px; color: var(--texto-2); max-width: 62ch; }
.nota-temas b { color: var(--texto); }

/* estudo (artigo) */
.artigo { display: grid; gap: 44px; }
.artigo-img { border-radius: 24px; border: 1px solid var(--roxo-borda); }
.artigo-bloco { display: grid; gap: 18px; max-width: 70ch; }
.artigo-bloco h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.barons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .barons { grid-template-columns: 1fr; } }
.barons article { background: var(--cartao); border-radius: var(--raio); padding: 14px 14px 22px; display: grid; gap: 10px; align-content: start; }
.barons img { border-radius: 14px; }
.barons .dia { font-family: var(--mono); color: var(--amarelo); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; padding-inline: 8px; }
.barons h3, .barons p { padding-inline: 8px; }
.barons h3 { font-size: 1.25rem; }
.barons p { color: var(--texto-2); font-size: 0.97rem; }
.barons .na-pratica { color: var(--texto); border-top: 1px solid var(--roxo-borda); padding-top: 10px; }
.barons .na-pratica b { color: var(--verde); }
.artigo-convite { background: var(--roxo-meio); border-radius: var(--raio); padding: 28px; display: grid; gap: 12px; justify-items: start; font-size: 1.1rem; }
.artigo-convite b { color: var(--amarelo); }

/* linha do tempo (sobre) */
.linha-tempo { list-style: none; padding: 0 0 0 28px; margin: 0; border-left: 3px solid var(--roxo-borda); display: grid; gap: 26px; }
.linha-tempo li { position: relative; display: grid; gap: 4px; }
.linha-tempo li::before { content: ""; position: absolute; left: -37px; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--roxo-borda); border: 3px solid var(--roxo-fundo); }
.linha-tempo .quando { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); }
.linha-tempo h3 { font-size: 1.2rem; }
.linha-tempo p { color: var(--texto-2); }
.linha-tempo .marco::before { background: var(--amarelo); }
.linha-tempo .marco h3 { color: var(--amarelo); font-size: 1.4rem; }

/* ---------- mural de feedbacks (depoimentos.html) ---------- */
.mural-numeros { display: flex; flex-wrap: wrap; gap: 36px; margin-bottom: 40px; }
.mural-numero b { display: block; font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--amarelo); font-variant-numeric: tabular-nums; }
.mural-numero span { font-size: 0.95rem; font-weight: 600; color: var(--texto-2); }
.mural-cabeca { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; margin-bottom: 18px; }
.mural-cabeca h2 { font-size: clamp(2rem, 5vw, 3rem); }
.mural-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mural-busca { font: inherit; font-size: 0.95rem; color: var(--texto); background: var(--cartao); border: 1px solid var(--roxo-2, #3d2560); border-radius: 999px; padding: 10px 18px; width: 260px; max-width: 100%; }
.mural-busca::placeholder { color: var(--texto-3); }
.mural-anos { display: flex; flex-wrap: wrap; gap: 6px; }
.mural-ano { font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; color: var(--texto); background: var(--cartao); border: 1px solid transparent; border-radius: 999px; padding: 8px 14px; }
.mural-ano[aria-pressed="true"] { background: var(--amarelo); color: var(--roxo-fundo); }
.mural-ano:hover { border-color: var(--amarelo); }
.mural-conta { color: var(--texto-2); font-size: 0.95rem; margin: 0 0 18px; }
.mural { columns: 3 300px; column-gap: 18px; }
.mural-cartao { break-inside: avoid; margin: 0 0 18px; }
.mural-cartao .depoimento-quem div { display: grid; }
.mural-data { font-size: 0.8rem; color: var(--texto-3); }
.mural-cartao p { white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 480px) { .mural-busca { width: 100%; } }

/* ---------- celular: grupos de cartões viram faixas de arrastar pro lado ---------- */
@media (max-width: 760px) {
  .ciclo, .depoimentos, .v2-pilares, .v2-tier3, .passos, .barons {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 14px;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    margin-inline: -20px;
    padding: 6px 20px 20px;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
  }
  .ciclo::-webkit-scrollbar, .depoimentos::-webkit-scrollbar, .v2-pilares::-webkit-scrollbar,
  .v2-tier3::-webkit-scrollbar, .passos::-webkit-scrollbar, .barons::-webkit-scrollbar { display: none; }
  .ciclo > *, .depoimentos > *, .v2-pilares > *, .v2-tier3 > *,
  .passos > *, .barons > * { scroll-snap-align: start; }
  /* planos: ficam lado a lado, menores, pra ver os dois preços de uma vez */
  .baloes, .dois-planos { grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
  .baloes { padding-top: 18px; row-gap: 26px; }
  /* com três planos: o mensal em cima, largo; avulsa e pacote lado a lado embaixo */
  .balao-destaque, .dois-planos .destaque { grid-column: 1 / -1; order: -1; }
  .balao, .balao-destaque { padding: 22px 14px 18px; border-radius: 22px; gap: 12px; box-shadow: 6px 6px 0 var(--roxo-sombra); }
  .balao h3 { font-size: 1rem; }
  .balao-preco { gap: 4px; }
  .balao-preco .rs { font-size: 0.95rem; }
  .balao-preco .valor { font-size: 2.5rem; }
  .balao-preco .por { font-size: 0.7rem; }
  .balao ul { gap: 6px; font-size: 0.8rem; line-height: 1.35; }
  .balao li { padding-left: 16px; }
  .balao-pagamento { gap: 6px; font-size: 0.75rem; }
  .balao-pagamento span { padding: 4px 10px; }
  .balao-acoes .botao { font-size: 0.8rem; padding: 10px 12px; }
  .balao-acoes .alt { font-size: 0.75rem; }
  .balao-selo { font-size: 0.6rem; padding: 4px 8px; top: -12px; right: 10px; }
  .dois-planos article { padding: 16px 14px; gap: 10px; font-size: 0.82rem; }
  .v2-pilares { grid-auto-columns: 78%; }

  /* mural: texto longo fica em 6 linhas, toca pra abrir */
  .mural-cartao p { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
  .mural-cartao.aberto p { -webkit-line-clamp: unset; display: block; }
  .mural-cartao.longo { cursor: pointer; }
  .mural-cartao.longo:not(.aberto)::after { content: "Toque pra ler tudo"; font-size: 0.85rem; font-weight: 700; color: var(--amarelo); }
}

/* mensal à vista */
.balao-avista { justify-self: start; background: var(--roxo-fundo); color: #ffffff; font-size: 0.95rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; margin-top: -6px; }
.balao-avista b { color: var(--amarelo); font-weight: 800; }
.preco-avista { margin-top: -8px; text-align: right; color: var(--texto-2); font-weight: 600; }
.preco-avista b { color: var(--amarelo); }
@media (max-width: 760px) { .balao-avista { font-size: 0.72rem; padding: 4px 10px; } }

/* compra (links do Mercado Pago) */
.botao-contorno { display: inline-block; font-weight: 800; font-size: 0.95rem; color: var(--roxo-fundo); border: 2px solid var(--roxo-fundo); border-radius: 999px; padding: 9px 20px; text-decoration: none; }
.botao-contorno:hover { background: var(--roxo-fundo); color: var(--amarelo); }
.botao-contorno.claro { color: var(--amarelo); border-color: var(--amarelo); }
.botao-contorno.claro:hover { background: var(--amarelo); color: var(--roxo-fundo); }
.plano-botoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dois-planos article > .botao { justify-self: start; }
@media (max-width: 760px) { .balao-acoes .botao-contorno { font-size: 0.75rem; padding: 7px 10px; } }

/* preço por aula (pacote e mensal), pra comparação ficar à vista */
.balao-poraula { font-size: 0.92rem; font-weight: 600; margin-top: -4px; }
.balao-poraula b { font-weight: 800; }
@media (max-width: 760px) { .balao-poraula { font-size: 0.72rem; } }

/* escadinha dos planos (computador): avulsa mais baixa, mini mensal no meio, mensal no alto */
@media (min-width: 761px) {
  .baloes { align-items: start; }
  .baloes > .balao:nth-child(1) { margin-top: 150px; }
  .baloes > .balao:nth-child(2) { margin-top: 75px; }
}

/* ---------- animação dos balões de preço ----------
   1) entrada: quando a seção aparece na tela, os balões sobem um depois do outro
      (avulsa → mini mensal → mensal), com um quiquezinho no final, como degraus;
   2) passar o mouse: o balão levanta e inclina de leve;
   3) o selo "O mais pedido" dá uma balançada de tempos em tempos.
   Só liga com JavaScript (classe .anima) e respeita quem pediu menos movimento. */
@keyframes balao-sobe {
  0%   { opacity: 0; transform: translateY(70px) scale(.92); }
  60%  { opacity: 1; transform: translateY(-10px) scale(1.02); }
  80%  { transform: translateY(4px) scale(.995); }
  100% { opacity: 1; transform: none; }
}
@keyframes selo-balanca {
  0%, 86%, 100% { transform: rotate(0); }
  89% { transform: rotate(-7deg) scale(1.08); }
  92% { transform: rotate(6deg) scale(1.08); }
  95% { transform: rotate(-3deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .anima .baloes .balao { opacity: 0; }
  .anima .baloes.visivel .balao { animation: balao-sobe .8s cubic-bezier(.2,.8,.3,1) both; }
  .anima .baloes.visivel .balao:nth-child(2) { animation-delay: .18s; }
  .anima .baloes.visivel .balao:nth-child(3) { animation-delay: .36s; }
  .baloes .balao { transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s; }
  .anima .baloes.visivel .balao.pronto:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 14px 16px 0 var(--roxo-sombra); }
  .anima .baloes.visivel .balao-destaque.pronto:hover { transform: translateY(-8px) rotate(1deg); }
  .balao-selo { animation: selo-balanca 4s ease-in-out 1.4s infinite; }
}

/* ---------- bolhas mágicas nos balões de preço ----------
   Com o mouse em cima de um balão (ou um toque no celular), sobem bolhas de sabão
   furta-cor e umas estrelinhas ✦, que escapam por cima do balão e somem. */
.bolha, .brilho { position: absolute; pointer-events: none; z-index: 3; will-change: transform, opacity; }
.bolha {
  width: var(--tam); height: var(--tam);
  border-radius: 50%;
  /* roxo fraco (lilás) pra contrastar com o verde do balão */
  background:
    radial-gradient(circle at 30% 28%, #ffffff 0 9%, rgba(255,255,255,.3) 20%, transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(196,160,240,.35) 50%, rgba(160,115,215,.7) 80%, rgba(230,215,255,.95) 100%);
  border: 2px solid rgba(215,190,250,.95);
  box-shadow: 0 0 14px rgba(150,100,210,.6), inset -4px -5px 10px rgba(69,0,110,.35), inset 3px 3px 8px rgba(255,255,255,.45);
  animation: bolha-sobe var(--t) cubic-bezier(.3,.6,.4,1) forwards;
}
.brilho {
  color: var(--amarelo);
  font-size: var(--tam);
  line-height: 1;
  text-shadow: 0 0 8px rgba(255,208,42,.9), 2px 2px 0 var(--roxo-vivo);
  animation: brilho-sobe var(--t) ease-out forwards;
}
@keyframes bolha-sobe {
  0%   { opacity: 0; transform: translate(0, 0) scale(.2); }
  15%  { opacity: 1; }
  35%  { transform: translate(var(--dx1), calc(var(--sobe) * -.35)) scale(1); }
  70%  { transform: translate(var(--dx2), calc(var(--sobe) * -.75)) scale(1.05); opacity: .95; }
  92%  { transform: translate(var(--dx1), calc(var(--sobe) * -.95)) scale(1.2); opacity: .9; }
  100% { transform: translate(var(--dx1), calc(var(--sobe) * -1)) scale(1.6); opacity: 0; }
}
@keyframes brilho-sobe {
  0%   { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0); }
  25%  { opacity: 1; transform: translate(var(--dx1), calc(var(--sobe) * -.3)) scale(1.1) rotate(60deg); }
  100% { opacity: 0; transform: translate(var(--dx2), calc(var(--sobe) * -1)) scale(.4) rotate(200deg); }
}

/* ---------- botão de música (som.js) ---------- */
.botao-som {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 0.9rem var(--display);
  color: var(--amarelo); background: var(--roxo-vivo);
  border: 2px solid var(--amarelo); border-radius: 999px;
  padding: 9px 16px 9px 12px; cursor: pointer;
  box-shadow: 4px 4px 0 var(--roxo-fundo);
  transition: transform .15s, box-shadow .15s;
}
.botao-som:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--roxo-fundo); }
.botao-som .nota { font-size: 1.15rem; line-height: 1; display: inline-block; }
.botao-som[aria-pressed="true"] { background: var(--amarelo); color: var(--roxo-vivo); border-color: var(--roxo-vivo); }
@media (prefers-reduced-motion: no-preference) {
  .botao-som[aria-pressed="true"] .nota { animation: nota-danca 1.2s ease-in-out infinite; }
}
@keyframes nota-danca { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-12deg); } }
@media (max-width: 760px) {
  .botao-som { right: 12px; bottom: 12px; padding: 8px 12px 8px 10px; font-size: 0.78rem; }
}

/* ---------- cards como itens de RPG ----------
   Cada plano tem uma "raridade", como item de loot:
   avulsa = comum (lilás) · mini mensal = raro (roxo) · mensal = lendário (dourado).
   - entrada: o card cai do alto com um clarão da cor da raridade;
   - aura: brilho em volta do card (o lendário pulsa sempre, o raro devagar, o comum só no mouse);
   - mouse em cima: o card inclina em 3D seguindo o mouse (JS) e um reflexo passa por ele;
   - o lendário solta um reflexo sozinho de tempos em tempos. */
.baloes { position: relative; z-index: 0; }  /* a aura (z-index -1) fica atrás do card, não atrás da seção */
.baloes .balao:nth-child(1) { --raridade: 215, 195, 250; }
.baloes .balao:nth-child(2) { --raridade: 160, 95, 255; }
.baloes .balao:nth-child(3) { --raridade: 255, 208, 42; }

.baloes .balao::before {
  content: ""; position: absolute; inset: -5px; border-radius: 38px;
  pointer-events: none; z-index: -1;
  box-shadow: 0 0 28px 6px rgba(var(--raridade), .8);
  opacity: 0; transition: opacity .3s;
}
.baloes .balao:nth-child(2)::before { opacity: .45; }
.baloes .balao:nth-child(3)::before { opacity: .7; }
.baloes .balao:hover::before { opacity: 1; }

.reflexo {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.5) 48%, rgba(255,255,255,.15) 54%, transparent 62%);
  background-size: 260% 100%; background-position: 160% 0; background-repeat: no-repeat;
}
.baloes .balao:hover .balao-preco .valor { text-shadow: 0 0 18px rgba(var(--raridade), .95); }

@keyframes loot-cai {
  0%   { opacity: 0; transform: translateY(-70px) scale(1.25); filter: brightness(3); }
  40%  { opacity: 1; transform: translateY(8px) scale(.97); filter: brightness(1.8);
         box-shadow: 10px 10px 0 var(--roxo-sombra), 0 0 80px 14px rgba(var(--raridade), .95); }
  65%  { transform: translateY(-4px) scale(1.01); filter: brightness(1.1); }
  100% { opacity: 1; transform: none; filter: none; box-shadow: 10px 10px 0 var(--roxo-sombra); }
}
@keyframes aura-pulsa { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes reflexo-passa { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes reflexo-sozinho { 0%, 80% { background-position: 160% 0; } 100% { background-position: -60% 0; } }

@media (prefers-reduced-motion: no-preference) {
  .anima .baloes.visivel .balao { animation-name: loot-cai; animation-duration: .9s; }
  .baloes .balao:nth-child(2)::before { animation: aura-pulsa 3.6s ease-in-out infinite; }
  .baloes .balao:nth-child(3)::before { animation: aura-pulsa 2.2s ease-in-out infinite; }
  .baloes .balao:hover::before { animation: none; opacity: 1; }
  .baloes .balao:hover .reflexo { animation: reflexo-passa .9s ease-out; }
  .baloes .balao:nth-child(3):not(:hover) .reflexo { animation: reflexo-sozinho 6s ease-in-out 2s infinite; }
}

/* ---------- abertura com clima de RPG ----------
   - poeira mágica: pontinhos de luz subindo devagar no fundo;
   - círculo mágico de runas girando atrás da foto, e a foto flutuando de leve;
   - o texto de baixo do título aparece letra por letra, como caixa de diálogo de RPG, com o ▼ piscando;
   - o botão "Ver os planos" brilha como botão de missão. */
.poeira { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.abertura .miolo { z-index: 1; }
.poeira i {
  position: absolute; bottom: -10px; width: var(--t); height: var(--t); border-radius: 50%;
  background: rgb(var(--cor)); box-shadow: 0 0 10px 2px rgba(var(--cor), .8);
  opacity: 0;
}
.abertura-foto { position: relative; }
.abertura-foto img { position: relative; z-index: 1; }
.abertura-foto figcaption { position: relative; z-index: 1; }
.circulo-magico {
  position: absolute; left: 50%; top: 44%; width: 470px; height: 470px; margin: -235px 0 0 -235px;
  pointer-events: none; z-index: 0; color: rgba(255, 208, 42, .75);
  filter: drop-shadow(0 0 8px rgba(185, 140, 255, .9));
}
.circulo-magico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.circulo-magico .runas { font: 700 17px var(--display); letter-spacing: 4px; fill: currentColor; stroke: none; }
.dialogo-seta { display: inline-block; margin-left: 6px; color: var(--amarelo); font-size: .8em; }
@media (max-width: 760px) {
  .circulo-magico { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
}
@keyframes poeira-sobe {
  0%   { opacity: 0; transform: translate(0, 0); }
  15%  { opacity: .9; }
  85%  { opacity: .7; }
  100% { opacity: 0; transform: translate(var(--dx), calc(-1 * var(--sobe))); }
}
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes gira-volta { to { transform: rotate(-360deg); } }
@keyframes flutua { 0%, 100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-10px); } }
@keyframes seta-pisca { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: .3; transform: translateY(3px); } }
@keyframes missao { 0%, 100% { box-shadow: 4px 4px 0 var(--roxo-sombra), 0 0 0 0 rgba(255, 208, 42, 0); }
                    50% { box-shadow: 4px 4px 0 var(--roxo-sombra), 0 0 22px 4px rgba(255, 208, 42, .55); } }
@keyframes circulo-acende { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .poeira i { animation: poeira-sobe var(--dur) linear var(--atraso) infinite; }
  .circulo-magico { animation: circulo-acende 1.4s ease-out both; }
  .circulo-magico .anel-fora { transform-box: view-box; transform-origin: 50% 50%; animation: gira 60s linear infinite; }
  .circulo-magico .anel-dentro { transform-box: view-box; transform-origin: 50% 50%; animation: gira-volta 40s linear infinite; }
  .abertura-foto img { animation: flutua 5s ease-in-out infinite; }
  .dialogo-seta { animation: seta-pisca 1s ease-in-out infinite; }
  .abertura-acoes .botao-amarelo { animation: missao 2.4s ease-in-out 3s infinite; }
}

/* ---------- depoimentos da home como baús de tesouro ----------
   "Meus alunos são meus tesouros": cada feedback vem guardado num baú (roxo claro #765898 + verde #52d053).
   Mouse em cima (ou toque, ou Enter) → animação de 1,5 s: o baú treme, a tampa abre e o feedback
   sai de dentro pequenininho e brilhando, sobe e cresce até o tamanho real. Depois fica aberto. */
.depoimentos .depoimento.tem-bau { position: relative; min-height: 250px; background: transparent; padding: 0; display: block; }
.tesouro {
  position: relative; z-index: 3; height: 100%;
  background: var(--cartao); border-radius: 28px; padding: 24px;
  display: grid; gap: 14px; align-content: start;
}
.tem-bau:not(.aberto) .tesouro { opacity: 0; }
.bau {
  position: absolute; inset: 0; z-index: 2; border-radius: 28px;
  display: grid; place-content: center; justify-items: center; gap: 10px;
  background: radial-gradient(circle at 50% 42%, #3d2560 0%, var(--cartao) 70%);
  cursor: pointer; border: 0; padding: 0; color: var(--texto-3, #b9a8d6); font: 600 .9rem var(--display);
}
.bau:focus-visible { outline: 3px solid var(--amarelo); outline-offset: -6px; }
.bau svg { width: 180px; height: auto; overflow: visible; filter: drop-shadow(6px 6px 0 var(--roxo-sombra)); }
.bau .tampa { transform-box: view-box; transform-origin: 148px 58px; }
.bau .faisca { opacity: 0; }
.bau .dica b { color: var(--amarelo); }

/* a sequência de 1,5 s */
.aberto .bau svg { animation: bau-treme .5s ease-in-out; }
.aberto .bau .tampa { animation: tampa-abre .6s cubic-bezier(.22,1,.36,1) .35s forwards; }
.aberto .bau .dica { opacity: 0; transition: opacity .2s; }
.aberto .bau .faisca { animation: faisca-voa .9s ease-out .7s forwards; }
.aberto .bau .faisca:nth-of-type(2) { animation-delay: .78s; }
.aberto .bau .faisca:nth-of-type(3) { animation-delay: .86s; }
.aberto .bau .faisca:nth-of-type(4) { animation-delay: .94s; }
.aberto .bau { animation: bau-some .7s ease-in-out .85s forwards; pointer-events: none; }
.aberto .tesouro { transform-origin: 50% 62%; animation: tesouro-sai 1.05s cubic-bezier(.22,1,.36,1) .5s both; }

@keyframes bau-treme {
  0%, 100% { transform: none; } 25% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); }
  75% { transform: rotate(-1deg); }
}
@keyframes tampa-abre { to { transform: translateY(-14px) rotate(-26deg); } }
@keyframes bau-some { to { opacity: 0; visibility: hidden; } }
@keyframes faisca-voa { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(1.2) rotate(120deg); } }
@keyframes tesouro-sai {
  0%   { opacity: 0; transform: translateY(16%) scale(.15); filter: brightness(1.5);
         box-shadow: 0 0 0 0 rgba(82, 208, 83, 0); }
  30%  { opacity: 1; }
  60%  { transform: translateY(-3%) scale(.8); filter: brightness(1.25);
         box-shadow: 0 0 34px 8px rgba(82, 208, 83, .55), 0 0 70px 16px rgba(118, 88, 152, .45); }
  100% { opacity: 1; transform: none; filter: none;
         box-shadow: 0 0 0 0 rgba(82, 208, 83, 0), 0 0 0 0 rgba(118, 88, 152, 0); }
}
@keyframes bau-balanca { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-4deg); } 94% { transform: rotate(4deg); } 97% { transform: rotate(-2deg); } }

@media (prefers-reduced-motion: no-preference) {
  .tem-bau:not(.aberto) .bau svg { animation: bau-balanca 4s ease-in-out infinite; }
  .tem-bau:nth-child(2):not(.aberto) .bau svg { animation-delay: 1.3s; }
  .tem-bau:nth-child(3):not(.aberto) .bau svg { animation-delay: 2.6s; }
}
@media (prefers-reduced-motion: reduce) {
  .aberto .bau { animation: none; opacity: 0; visibility: hidden; }
  .aberto .tesouro { animation: none; }
}

/* ---------- título "Aqui ninguém precisa ser quebrado pra aprender" vivo ----------
   - todas as letras balançam de leve, em onda;
   - "quebrado" está rachado de verdade: duas metades separadas por uma rachadura em zigue-zague,
     que se abrem quando a seção aparece e tremem de vez em quando;
   - do "r" de "aprender" nasce uma plantinha verde, que cresce e fica balançando. */
.titulo-vivo .palavra { display: inline-block; white-space: nowrap; }
.titulo-vivo .letra { display: inline-block; }
.titulo-vivo .quebrado { position: relative; display: inline-block; color: transparent; text-shadow: none; }
.titulo-vivo .quebrado::before, .titulo-vivo .quebrado::after {
  content: attr(data-texto); position: absolute; left: 0; top: 0;
  color: var(--amarelo); text-shadow: 0.05em 0.06em 0 var(--roxo-sombra);
  transition: transform .5s cubic-bezier(.3,1.4,.5,1);
}
.titulo-vivo .quebrado::before { clip-path: polygon(0 0, 54% 0, 47% 30%, 57% 52%, 46% 74%, 52% 100%, 0 100%); }
.titulo-vivo .quebrado::after  { clip-path: polygon(54% 0, 100% 0, 100% 100%, 52% 100%, 46% 74%, 57% 52%, 47% 30%); }
.titulo-vivo.rachou .quebrado::before { transform: translate(-.05em, .03em) rotate(-4deg); }
.titulo-vivo.rachou .quebrado::after  { transform: translate(.06em, .06em) rotate(5deg); }

.titulo-vivo .aprender { position: relative; display: inline-block; }
.plantinha {
  position: absolute; right: -.62em; bottom: .5em; width: .8em; height: 1em;
  overflow: visible; transform-origin: 30% 100%; transform: scale(0);
  transition: transform .9s cubic-bezier(.3,1.4,.5,1) .7s;
}
.titulo-vivo.rachou .plantinha { transform: scale(1); }

@keyframes letra-mexe {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-.05em) rotate(-3deg); }
  75% { transform: translateY(.03em) rotate(2deg); }
}
@keyframes racha-treme {
  0%, 90%, 100% { translate: 0 0; }
  92% { translate: -.03em 0; } 94% { translate: .03em 0; } 96% { translate: -.02em 0; }
}
@keyframes planta-balanca { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }

@media (prefers-reduced-motion: no-preference) {
  .titulo-vivo .letra { animation: letra-mexe 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.11s); }
  .titulo-vivo.rachou .quebrado::before { animation: racha-treme 3.5s ease-in-out 1s infinite; }
  .titulo-vivo.rachou .quebrado::after  { animation: racha-treme 3.5s ease-in-out 1.05s infinite reverse; }
  .titulo-vivo.rachou .plantinha { animation: planta-balanca 3s ease-in-out 1.6s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .titulo-vivo .quebrado::before, .titulo-vivo .quebrado::after, .plantinha { transition: none; }
}

/* relatório de exemplo passando sozinho: barrinha enchendo na aba ativa e troca de imagem suave */
.relatorio-abas button { position: relative; overflow: hidden; }
.relatorio-abas.correndo button[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--roxo-vivo); transform-origin: left; animation: aba-enche 4.5s linear forwards;
}
@keyframes aba-enche { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#relatorio-img { transition: opacity .18s ease; }
#relatorio-img.trocando { opacity: 0; }

/* ---------- a vinha ----------
   Do "aprender" pra baixo, cada título ganha um broto no fim, cada um maior que o anterior;
   no "E aí, tá esperando o quê?" vira uma vinha com folhas e florzinhas abraçando o título.
   O caule se desenha (stroke-dashoffset) e as folhas brotam uma depois da outra. */
.titulo-vivo .com-broto { position: relative; }
.broto { position: absolute; left: 100%; bottom: .45em; margin-left: .02em; overflow: visible; }
.vinha-alvo { position: relative; display: inline-block; }
.vinha { position: absolute; overflow: visible; pointer-events: none; }
.broto .caule, .vinha .caule { stroke-dasharray: 100; stroke-dashoffset: 100; }
.broto .folha, .vinha .folha { transform: scale(0); }
.cresceu .caule { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur, 1s) ease-out var(--d, 0s); }
.cresceu .folha { transform: scale(1); transition: transform .5s cubic-bezier(.3,1.6,.5,1) var(--d, .5s); }
@keyframes broto-balanca { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@media (prefers-reduced-motion: no-preference) {
  .cresceu .broto { transform-origin: 20% 100%; animation: broto-balanca 3.4s ease-in-out 2s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .broto .caule, .vinha .caule { stroke-dashoffset: 0; }
  .broto .folha, .vinha .folha { transform: none; }
}

/* ---------- a selva no bloco final (script "a selva" no index) ---------- */
.final { position: relative; overflow: hidden; }
.final > *:not(.selva) { position: relative; z-index: 1; }
.selva { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.selva .caule { stroke-dasharray: 100; stroke-dashoffset: 100; }
.selva .folha { transform: scale(0); }
.final.cresceu .selva .caule { stroke-dashoffset: 0; }
.final.cresceu .selva .folha { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .selva .caule { stroke-dashoffset: 0; } .selva .folha { transform: none; } }

/* ---------- ficha de compra (ficha.js) ---------- */
.ficha-aberta { overflow: hidden; }
.ficha-fundo {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: rgba(15, 6, 28, .78); backdrop-filter: blur(3px);
}
.ficha-fundo[hidden] { display: none; }
.ficha {
  position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--cartao); color: var(--texto); border: 2px solid var(--verde); border-radius: 28px;
  padding: 28px 24px 22px; box-shadow: 10px 10px 0 var(--roxo-sombra);
}
.ficha-passo1, .ficha-passo2 { display: grid; gap: 12px; }
.ficha-passo1[hidden], .ficha-passo2[hidden] { display: none; }
.ficha-titulo { color: var(--amarelo); font-size: 1.6rem; font-weight: 800; line-height: 1.1; text-shadow: 0.05em 0.06em 0 var(--roxo-sombra); }
.ficha-plano { color: var(--verde); font-weight: 600; }
.ficha form { display: grid; gap: 12px; }
.ficha label { display: grid; gap: 5px; font-weight: 600; font-size: .92rem; }
.ficha label em { font-style: normal; font-weight: 400; opacity: .7; }
.ficha input {
  font: inherit; font-weight: 500; color: var(--texto); background: #2a1842; border: 2px solid #765898;
  border-radius: 12px; padding: 10px 12px;
}
.ficha input:focus { outline: none; border-color: var(--amarelo); }
.ficha .botao { justify-self: start; margin-top: 4px; }
.ficha-erro { color: #ff8a8a; font-weight: 600; min-height: 1.2em; font-size: .9rem; }
.ficha-nota { font-size: .82rem; opacity: .75; }
.ficha a:not(.botao) { color: var(--amarelo); }
.ficha-fechar {
  position: absolute; top: 10px; right: 14px; background: none; border: 0; color: var(--texto);
  font-size: 1.8rem; line-height: 1; cursor: pointer; opacity: .7;
}
.ficha-fechar:hover { opacity: 1; }