/* Saber Cognitivo — LP Meu ABC em Aventuras
   Paleta tirada da logo real: roxo #603090, marinho #001848, amarelo #F0A800, verde #60A830.
   Nicho de material pedagógico infantil: claro, arredondado, texto grande, mobile primeiro. */

:root {
  --roxo: #603090;
  --roxo-escuro: #481878;
  --roxo-claro: #F3EDFA;
  --marinho: #001848;
  --amarelo: #F0A800;
  --verde: #60A830;
  --texto: #221A33;
  --texto-suave: #5C5470;
  --fundo: #FFFFFF;
  --fundo-suave: #FAF7FD;
  --borda: #E6DCF2;
  --raio: 18px;
  --sombra: 0 4px 16px rgba(72, 24, 120, .10);
  --env: 640px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fundo);
  padding-bottom: 86px; /* espaço da barra fixa */
}

img { max-width: 100%; height: auto; display: block; }

.env { width: 100%; max-width: var(--env); margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; color: var(--marinho); }
h2 { font-size: 28px; font-weight: 800; }
h3 { font-size: 21px; font-weight: 800; }
p { margin: 0 0 14px; }
s { color: var(--texto-suave); }

/* ---------- topo ---------- */
.topo { padding: 18px 0 4px; text-align: center; }
.topo__logo { width: 210px; height: auto; margin: 0 auto; }

/* ---------- abertura ---------- */
.hero { padding: 10px 0 28px; text-align: center; }

.hero__chapeu {
  display: inline-block;
  background: var(--roxo-claro);
  color: var(--roxo-escuro);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.hero__titulo { font-size: 32px; font-weight: 800; }
.hero__titulo em { color: var(--roxo); font-style: normal; }

.hero__sub { color: var(--texto-suave); font-size: 17px; margin-bottom: 20px; }

.hero__arte { margin: 0 0 18px; }
.hero__arte img { border-radius: var(--raio); }

.selos {
  list-style: none;
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 0 0 22px;
}
.selos li {
  flex: 1;
  background: var(--fundo-suave);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 10px 6px;
  font-size: 13px;
  color: var(--texto-suave);
  font-weight: 700;
}
.selos span {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--roxo);
}

/* ---------- oferta ---------- */
.oferta {
  background: var(--fundo-suave);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px;
}
.oferta__de { margin: 0; font-size: 15px; color: var(--texto-suave); }
.oferta__por { margin: 0; font-size: 20px; color: var(--marinho); font-weight: 700; }
.oferta__por strong { font-size: 46px; font-weight: 800; color: var(--roxo); }
.oferta__parcela { font-size: 15px; color: var(--texto-suave); margin: 2px 0 16px; }
.oferta__selo {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--verde);
}

.garantia {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--texto-suave);
}

/* ---------- botão ---------- */
.botao {
  display: block;
  background: var(--roxo);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 19px;
  text-align: center;
  padding: 18px 20px;
  border-radius: 999px;
  box-shadow: var(--sombra);
  transition: transform .12s ease, background .12s ease;
}
.botao:hover { background: var(--roxo-escuro); transform: translateY(-1px); }
.botao:active { transform: translateY(1px); }
.botao--kit { background: var(--amarelo); color: var(--marinho); }
.botao--kit:hover { background: #D89600; }

/* ---------- blocos ---------- */
.bloco { padding: 36px 0; }
.bloco--claro { background: var(--fundo-suave); }
.bloco--kit { background: var(--marinho); color: #fff; text-align: center; }
.bloco--kit h2 { color: #fff; }
.bloco__intro { color: var(--texto-suave); margin-bottom: 24px; }

.item {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--sombra);
}
.item__tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  margin: 0 0 10px;
}
.item__tag--principal { background: var(--roxo); color: #fff; }
.item__tag--bonus { background: #FFF3D6; color: #8A6000; }
.item__paginas {
  font-weight: 800;
  color: var(--roxo);
  font-size: 15px;
  margin: 0 0 10px;
}

.lista { margin: 12px 0 0; padding-left: 0; list-style: none; }
.lista li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
  font-size: 16px;
  color: var(--texto-suave);
}
.lista li::before {
  content: "";
  position: absolute;
  left: 4px; top: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--verde);
}

.figura { margin: 20px 0; }
.figura img { border-radius: var(--raio); }

.duplo { display: grid; gap: 14px; }
.cartao {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px;
}
.cartao p { margin: 0; color: var(--texto-suave); font-size: 16px; }

.nota {
  font-size: 15px;
  color: var(--texto-suave);
  margin-top: 16px;
}

.passos { margin: 0; padding-left: 22px; }
.passos li { margin-bottom: 12px; color: var(--texto-suave); }
.passos strong { color: var(--texto); }

/* ---------- kit ---------- */
.kit__chapeu {
  display: inline-block;
  background: var(--amarelo);
  color: var(--marinho);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
}
.kit__linha { color: #C9D2E8; }
.kit__preco { font-size: 19px; margin-bottom: 2px; }
.kit__preco s { color: #8A97B8; }
.kit__preco strong { font-size: 40px; color: var(--amarelo); }
.bloco--kit .oferta__parcela { color: #C9D2E8; margin-bottom: 20px; }

/* ---------- dúvidas ---------- */
details {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 10px;
}
summary {
  font-weight: 800;
  color: var(--marinho);
  cursor: pointer;
  font-size: 17px;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: " +"; color: var(--roxo); float: right; }
details[open] summary::after { content: " –"; }
details p { margin: 12px 0 0; color: var(--texto-suave); font-size: 16px; }

/* ---------- fechamento ---------- */
.fechamento {
  padding: 40px 0;
  text-align: center;
  background: var(--roxo-claro);
}
.fechamento__preco { font-size: 18px; margin-bottom: 18px; }
.fechamento__preco strong { font-size: 42px; color: var(--roxo); }
.fechamento__preco s { margin-left: 8px; }

/* ---------- rodapé ---------- */
.rodape {
  background: var(--marinho);
  color: #C9D2E8;
  padding: 30px 0 34px;
  text-align: center;
  font-size: 14px;
}
.rodape img { width: 190px; margin: 0 auto 10px; }
.rodape__assinatura { color: #fff; font-style: italic; margin-bottom: 14px; }
.rodape__contato a { color: var(--amarelo); font-weight: 700; text-decoration: none; }
.rodape__aviso { max-width: 520px; margin: 18px auto 0; font-size: 12.5px; line-height: 1.5; color: #93A0C0; }
.rodape__cnpj { font-size: 12.5px; color: #93A0C0; }

/* ---------- barra fixa ---------- */
.barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-top: 1px solid var(--borda);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(72, 24, 120, .10);
  z-index: 20;
}
.barra__preco { font-size: 14px; color: var(--texto-suave); white-space: nowrap; }
.barra__preco strong { display: block; font-size: 22px; color: var(--roxo); }
.botao--barra { flex: 1; font-size: 17px; padding: 14px 16px; }

/* ---------- telas maiores ---------- */
@media (min-width: 720px) {
  :root { --env: 760px; }
  body { padding-bottom: 0; font-size: 19px; }
  .hero__titulo { font-size: 42px; }
  h2 { font-size: 34px; }
  .duplo { grid-template-columns: 1fr 1fr; }
  .botao { max-width: 420px; margin-left: auto; margin-right: auto; }
  .barra { display: none; }
  .hero__arte img { max-width: 520px; margin: 0 auto; }
}