:root {
  --azul: #1b5fc7;
  --azul-escuro: #0d3a8a;
  --azul-claro: #e8f0fc;
  --laranja: #f07b14;
  --laranja-escuro: #d35f0a;
  --verde-whats: #25d366;
  --verde-whats-escuro: #1da851;
  --texto: #1d2433;
  --texto-suave: #5a6478;
  --fundo: #f4f7fc;
  --branco: #ffffff;
  --borda: #dfe6f2;
  --sombra: 0 6px 20px rgba(13, 58, 138, 0.10);
  --raio: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.wrap { max-width: 560px; margin: 0 auto; padding: 0 16px; }

/* ---------- Página principal (bio) ---------- */
.bio {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 0%, rgba(240, 123, 20, 0.16), transparent 45%),
    radial-gradient(circle at 100% 30%, rgba(27, 95, 199, 0.14), transparent 50%),
    var(--fundo);
  padding: 36px 0 48px;
}

.bio-topo { text-align: center; }

.bio-logo {
  width: 150px; height: 150px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--branco);
  box-shadow: var(--sombra);
  border: 4px solid var(--branco);
}

.bio-nome { font-size: 1.5rem; font-weight: 700; margin-top: 14px; color: var(--azul-escuro); }
.bio-nome span { color: var(--laranja); }

.bio-frase { color: var(--texto-suave); font-size: 0.98rem; margin: 6px auto 0; max-width: 380px; }

.bio-insta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; font-size: 0.9rem; font-weight: 600; color: var(--azul);
}

.links { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }

.btn-whats-grande {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--verde-whats); color: #fff;
  font-weight: 700; font-size: 1.08rem;
  padding: 17px 20px; border-radius: var(--raio);
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35);
  transition: transform .15s, background .15s;
}
.btn-whats-grande:hover { background: var(--verde-whats-escuro); transform: translateY(-2px); }
.btn-whats-grande svg { width: 26px; height: 26px; flex-shrink: 0; }

.card-link {
  display: flex; align-items: center; gap: 14px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px 18px;
  box-shadow: var(--sombra);
  transition: transform .15s, border-color .15s;
}
.card-link:hover { transform: translateY(-2px); border-color: var(--azul); }

.card-icone {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 1.6rem;
}
.ic-azul { background: var(--azul-claro); }
.ic-laranja { background: #fff1e4; }
.ic-misto { background: linear-gradient(135deg, #fff1e4, var(--azul-claro)); }

.card-texto { flex: 1; min-width: 0; }
.card-texto strong { display: block; font-size: 1.05rem; color: var(--azul-escuro); }
.card-texto small { display: block; color: var(--texto-suave); font-size: 0.86rem; line-height: 1.35; }

.card-seta { color: var(--laranja); font-size: 1.4rem; font-weight: 700; }

.bio-rodape { text-align: center; margin-top: 34px; color: var(--texto-suave); font-size: 0.8rem; }

/* ---------- Páginas internas ---------- */
.topo {
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 10;
}
.topo .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
/* A imagem da logo tem muita borda branca: mostra só a parte do desenho. */
.topo-logo { display: block; width: 106px; height: 68px; overflow: hidden; position: relative; }
.topo-logo img { position: absolute; width: 168px; height: 168px; left: -26px; top: -47px; max-width: none; }
.voltar { font-size: 0.9rem; font-weight: 600; color: var(--azul); display: flex; align-items: center; gap: 4px; }

.hero {
  background: linear-gradient(135deg, var(--azul-escuro), var(--azul));
  color: #fff;
  padding: 38px 0 44px;
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -60px; bottom: -80px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(240, 123, 20, 0.85);
}
.hero .wrap { position: relative; z-index: 1; }
.selo {
  display: inline-block; background: var(--laranja); color: #fff;
  font-size: 0.75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 99px;
}
.hero h1 { font-size: 1.85rem; line-height: 1.2; margin-top: 12px; }
.hero p { margin-top: 10px; opacity: .92; font-size: 1rem; }

.secao { padding: 30px 0 4px; }
.secao h2 { font-size: 1.25rem; color: var(--azul-escuro); margin-bottom: 12px; }
.secao h2::after {
  content: ""; display: block; width: 44px; height: 4px; border-radius: 4px;
  background: var(--laranja); margin-top: 6px;
}
.secao p { color: var(--texto-suave); margin-bottom: 10px; }

.lista-check { list-style: none; display: grid; gap: 10px; }
.lista-check li {
  background: var(--branco); border: 1px solid var(--borda); border-radius: 14px;
  padding: 12px 14px 12px 44px; position: relative; font-size: 0.95rem;
}
.lista-check li::before {
  content: "✓"; position: absolute; left: 14px; top: 11px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--laranja); color: #fff; font-size: 0.75rem; font-weight: 700;
  display: grid; place-items: center;
}

.passos { list-style: none; display: grid; gap: 12px; counter-reset: passo; }
.passos li {
  counter-increment: passo;
  background: var(--branco); border: 1px solid var(--borda); border-radius: 14px;
  padding: 14px 14px 14px 58px; position: relative; font-size: 0.95rem;
}
.passos li::before {
  content: counter(passo); position: absolute; left: 14px; top: 13px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--azul); color: #fff; font-weight: 700;
  display: grid; place-items: center;
}
.passos strong { display: block; color: var(--azul-escuro); }

.curso {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 18px; box-shadow: var(--sombra); margin-bottom: 14px;
}
.curso h3 { color: var(--azul-escuro); font-size: 1.1rem; }
.curso p { color: var(--texto-suave); font-size: 0.93rem; margin: 6px 0 10px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag {
  background: var(--azul-claro); color: var(--azul-escuro);
  font-size: 0.78rem; font-weight: 600; padding: 4px 10px; border-radius: 99px;
}
.tag.laranja { background: #fff1e4; color: var(--laranja-escuro); }

.btn-whats {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--verde-whats); color: #fff; font-weight: 600; font-size: 0.92rem;
  padding: 10px 16px; border-radius: 12px; transition: background .15s;
}
.btn-whats:hover { background: var(--verde-whats-escuro); }
.btn-whats svg { width: 18px; height: 18px; }

.faq details {
  background: var(--branco); border: 1px solid var(--borda); border-radius: 14px;
  margin-bottom: 10px; padding: 0 16px;
}
.faq summary {
  cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none;
  display: flex; justify-content: space-between; gap: 10px; color: var(--azul-escuro);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--laranja); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: 14px; margin: 0; font-size: 0.93rem; }

.chamada {
  margin: 30px 0 40px;
  background: linear-gradient(135deg, var(--laranja), var(--laranja-escuro));
  color: #fff; border-radius: var(--raio); padding: 26px 20px; text-align: center;
}
.chamada h2 { font-size: 1.3rem; }
.chamada p { opacity: .95; margin: 8px 0 16px; }
.chamada .btn-whats-grande { box-shadow: none; }

/* Busca (extensão) */
.busca {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 14px 16px 14px 44px; border-radius: 14px;
  border: 2px solid var(--borda); background: var(--branco) no-repeat 14px center / 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6478' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  outline: none; transition: border-color .15s;
}
.busca:focus { border-color: var(--azul); }

.filtros { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 4px; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  font: inherit; font-size: 0.85rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  padding: 7px 14px; border-radius: 99px; border: 1px solid var(--borda);
  background: var(--branco); color: var(--texto-suave);
}
.filtro.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }

.contagem { font-size: 0.85rem; color: var(--texto-suave); margin: 10px 0; }

.grade-cursos { display: grid; gap: 10px; }
.item-ext {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--branco); border: 1px solid var(--borda); border-radius: 14px; padding: 12px 14px;
}
.item-ext strong { display: block; font-size: 0.95rem; color: var(--azul-escuro); line-height: 1.3; }
.item-ext small { color: var(--texto-suave); font-size: 0.8rem; }
.item-ext a {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  background: var(--verde-whats); display: grid; place-items: center;
}
.item-ext a svg { width: 22px; height: 22px; }
.vazio { text-align: center; color: var(--texto-suave); padding: 20px; }

/* Botão flutuante */
.whats-flutuante {
  position: fixed; right: 16px; bottom: 18px; z-index: 50;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--verde-whats); display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  animation: pulso 2.4s infinite;
}
.whats-flutuante svg { width: 32px; height: 32px; }
@keyframes pulso {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,.22), 0 0 0 0 rgba(37,211,102,.5); }
  50% { box-shadow: 0 8px 24px rgba(0,0,0,.22), 0 0 0 12px rgba(37,211,102,0); }
}

.rodape { text-align: center; padding: 20px 0 90px; color: var(--texto-suave); font-size: 0.8rem; }

.aviso-legal {
  text-align: left; font-size: 0.74rem; line-height: 1.5; color: var(--texto-suave);
  background: var(--branco); border: 1px solid var(--borda); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 14px;
}
.aviso-legal p + p { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .whats-flutuante { animation: none; }
  * { transition: none !important; }
}