/* ============================================================
   CataFácil — Design System
   Paleta verde (reciclagem / meio ambiente), tipografia:
   Plus Jakarta Sans (títulos) + Inter (texto).
   ============================================================ */

:root {
  /* Verdes */
  --verde-950: #04220f;
  --verde-900: #0a3d1e;
  --verde-800: #14532d;
  --verde-700: #15803d;
  --verde-600: #16a34a;
  --verde-500: #22c55e;
  --verde-400: #4ade80;
  --verde-200: #bbf7d0;
  --verde-100: #dcfce7;
  --verde-50:  #f0fdf4;
  --lima-400:  #a3e635;
  --lima-300:  #bef264;
  --ambar:     #fdbd13;
  --ambar-600: #d99e04;

  /* Neutros */
  --cinza-900: #0f172a;
  --cinza-700: #334155;
  --cinza-600: #475569;
  --cinza-500: #64748b;
  --cinza-300: #cbd5e1;
  --cinza-200: #e2e8f0;
  --cinza-100: #f1f5f9;
  --branco:    #ffffff;

  --fonte-titulo: 'Plus Jakarta Sans', system-ui, sans-serif;
  --fonte-texto:  'Inter', system-ui, sans-serif;

  --raio: 16px;
  --raio-g: 24px;
  --sombra-suave: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .07);
  --sombra-forte: 0 4px 12px rgba(4, 34, 15, .12), 0 16px 48px rgba(4, 34, 15, .18);
  --transicao: .25s cubic-bezier(.4, 0, .2, 1);
  --topo-altura: 76px;
}

/* ---------- Reset ---------- */

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-altura) + 16px); }

body {
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--cinza-700);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--verde-700); text-decoration: none; }
ul, ol { list-style-position: inside; }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  color: var(--cinza-900);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.02em;
}

.container { width: min(1160px, 100% - 48px); margin-inline: auto; }

.pular-conteudo {
  position: absolute; left: -9999px; top: 0;
  background: var(--verde-700); color: #fff; padding: 12px 20px; z-index: 200;
}
.pular-conteudo:focus { left: 0; }

/* ---------- Botões ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: .95rem;
  padding: 13px 26px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform var(--transicao), box-shadow var(--transicao),
    background var(--transicao), color var(--transicao), border-color var(--transicao);
  white-space: nowrap;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { transform: translateY(-2px); }

.btn-primario { background: var(--verde-600); color: #fff; box-shadow: 0 6px 20px rgba(22, 163, 74, .35); }
.btn-primario:hover { background: var(--verde-700); color: #fff; }

.btn-claro { background: #fff; color: var(--verde-800); }
.btn-claro:hover { background: var(--verde-100); }

.btn-contorno-claro { border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn-contorno-claro:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }

.btn-fantasma { color: var(--verde-800); }
.btn-fantasma:hover { background: var(--verde-50); color: var(--verde-800); }

.btn-contorno { border-color: var(--verde-600); color: var(--verde-700); }
.btn-contorno:hover { background: var(--verde-600); color: #fff; }

.btn-grande { padding: 16px 34px; font-size: 1.05rem; }

/* ---------- Aviso do Certificado A1 (barra acima do topo) ---------- */

.aviso-topo { background: linear-gradient(90deg, var(--ambar), #f5ce4e); font-size: .92rem; }
.aviso-topo-inner { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; position: relative; }
.aviso-topo a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 28px 8px 0;
  color: var(--verde-950); line-height: 1.3;
}
.aviso-topo svg { width: 19px; height: 19px; flex: none; }
.aviso-topo-cta { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.aviso-topo a:hover .aviso-topo-cta { color: var(--verde-800); }
.aviso-topo button {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(4, 34, 15, .12); color: var(--verde-950);
  font-size: 1.05rem; line-height: 1; display: grid; place-items: center;
}
.aviso-topo button:hover { background: rgba(4, 34, 15, .22); }

/* ---------- Topo ---------- */

.topo {
  position: sticky; top: 0; z-index: 100; height: var(--topo-altura);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cinza-200);
}
.topo-inner { display: flex; align-items: center; gap: 32px; height: var(--topo-altura); }

.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.logo-marca { width: 44px; height: 44px; flex: none; object-fit: contain; }
.logo-institucional { height: 46px; width: auto; max-width: none; flex: none; }
.logo-texto { font-family: var(--fonte-titulo); font-size: 1.45rem; font-weight: 600; color: var(--cinza-900); letter-spacing: -.02em; }
.logo-texto strong { font-weight: 800; }
.logo-claro .logo-texto { color: #fff; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav > a {
  font-weight: 500; font-size: .95rem; color: var(--cinza-600);
  padding: 8px 14px; border-radius: 999px; transition: background var(--transicao), color var(--transicao);
}
.nav > a:hover { color: var(--verde-800); background: var(--verde-50); }
.nav > a.ativo { color: var(--verde-800); background: var(--verde-100); font-weight: 600; }
.nav-acoes-mobile { display: none; }

.topo-acoes { display: flex; align-items: center; gap: 10px; }
.topo-acoes .btn { padding: 10px 20px; font-size: .9rem; }

.menu-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer;
}
.menu-toggle span { height: 2.5px; background: var(--cinza-900); border-radius: 2px; transition: var(--transicao); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(163, 230, 53, .16), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(34, 197, 94, .25), transparent 55%),
    linear-gradient(160deg, var(--verde-950) 0%, var(--verde-900) 55%, var(--verde-800) 100%);
  padding: 90px 0 110px;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 30%, transparent 75%);
}

/* ---------- Hero: fundo animado (blobs + partículas + parallax) ---------- */
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-layer { position: absolute; inset: 0; will-change: transform; transition: transform .3s ease-out; }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(52px); opacity: .5; will-change: transform; }
.hero-blob-1 { width: 540px; height: 540px; top: -180px; right: -120px;
  background: radial-gradient(circle, #2fbf71, transparent 66%);
  animation: hero-pulse 9s ease-in-out infinite; }
.hero-blob-2 { width: 500px; height: 500px; bottom: -200px; left: -140px;
  background: radial-gradient(circle, #12b3a0, transparent 66%);
  animation: hero-pulse 11s ease-in-out infinite reverse; }
.hero-blob-3 { width: 380px; height: 380px; top: 38%; left: 52%; opacity: .22;
  background: radial-gradient(circle, var(--ambar), transparent 62%);
  animation: hero-pulse 13s ease-in-out infinite; }
@keyframes hero-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

.hero-dots { position: absolute; inset: 0; overflow: hidden; }
.hero-dot {
  position: absolute; bottom: -140px; border-radius: 50%;
  background: rgba(255, 255, 255, .06); animation: hero-float linear infinite;
}
@keyframes hero-float {
  from { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  to   { transform: translateY(-118vh) rotate(360deg); opacity: 0; }
}

.hero-grid {
  position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 56px; align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .hero-blob, .hero-dot { animation: none !important; }
  .hero-layer { transition: none !important; }
}

.hero-selo {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  padding: 8px 16px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  color: var(--verde-200); margin-bottom: 24px;
}
.hero-selo svg { width: 16px; height: 16px; color: var(--lima-400); }

.hero h1 {
  color: #fff; font-size: clamp(2.3rem, 4.5vw, 3.4rem); font-weight: 800; margin-bottom: 20px;
}
.hero h1 em { font-style: normal; color: var(--lima-300); }
.hero-texto p.hero-sub { font-size: 1.15rem; color: rgba(255, 255, 255, .82); max-width: 34rem; margin-bottom: 34px; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }

.hero-pilares { display: flex; flex-wrap: wrap; gap: 26px; }
.hero-pilares span { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .95rem; color: var(--verde-100); }
.hero-pilares svg { width: 20px; height: 20px; color: var(--lima-400); flex: none; }

.hero-arte { position: relative; }
.hero-arte img, .hero-arte svg { width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .35)); }

/* ---------- Faixa de estatísticas ---------- */

.stats { position: relative; z-index: 5; margin-top: -58px; }
.stats-cartao {
  background: #fff; border-radius: var(--raio-g); box-shadow: var(--sombra-forte);
  padding: 40px 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.stat { text-align: center; padding: 0 12px; }
.stat + .stat { border-left: 1px solid var(--cinza-200); }
.stat-icone {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px;
  background: var(--verde-100); color: var(--verde-700); display: grid; place-items: center;
}
.stat-icone svg { width: 26px; height: 26px; }
.stat-valor {
  font-family: var(--fonte-titulo); font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 800; color: var(--verde-800); letter-spacing: -.02em;
}
.stat-rotulo { font-size: .95rem; color: var(--cinza-500); font-weight: 500; margin-top: 4px; }
.stats-atualizado { text-align: center; font-size: .8rem; color: var(--cinza-500); margin-top: 14px; }

/* ---------- Seções ---------- */

.secao { padding: 96px 0; }
.secao-verde-claro { background: var(--verde-50); }
.secao-cabecalho { max-width: 46rem; margin: 0 auto 56px; text-align: center; }
.secao-cabecalho.alinhado { margin-inline: 0; text-align: left; }

.chapeu {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--verde-700); background: var(--verde-100);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.secao-cabecalho h2, .secao-titulo { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 14px; }
.secao-cabecalho p { font-size: 1.1rem; color: var(--cinza-500); }

/* ---------- Cards de funcionalidades ---------- */

.func-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.func-card {
  background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio-g);
  padding: 32px 28px; transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.func-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-suave); border-color: var(--verde-200); }
.func-icone {
  width: 56px; height: 56px; border-radius: 18px; margin-bottom: 20px;
  background: linear-gradient(135deg, var(--verde-500), var(--verde-700));
  color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(22, 163, 74, .28);
}
.func-icone svg { width: 28px; height: 28px; }
.func-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; }
.func-card p { color: var(--cinza-500); font-size: .97rem; }

/* ---------- Seção dividida (customização) ---------- */

.dividida { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.dividida-arte { position: relative; }
.dividida-arte img, .dividida-arte svg { width: 100%; height: auto; border-radius: var(--raio-g); }

.lista-checada { list-style: none; display: grid; gap: 18px; margin-top: 28px; }
.lista-checada li { display: flex; gap: 14px; align-items: flex-start; }
.lista-checada .check {
  flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%;
  background: var(--verde-100); color: var(--verde-700); display: grid; place-items: center;
}
.lista-checada .check svg { width: 14px; height: 14px; }
.lista-checada strong { display: block; color: var(--cinza-900); font-weight: 600; }
.lista-checada span.desc { color: var(--cinza-500); font-size: .95rem; }

/* ---------- Destaque Certificado Digital A1 ---------- */

.cert-card {
  position: relative; overflow: hidden; border-radius: var(--raio-g); color: #fff;
  background:
    radial-gradient(700px 380px at 95% -10%, rgba(253, 189, 19, .22), transparent 55%),
    linear-gradient(135deg, var(--verde-950), var(--verde-800));
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center;
  padding: 56px 60px;
}
.cert-info h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 14px; }
.cert-info > p { color: rgba(255, 255, 255, .85); margin-bottom: 26px; max-width: 34rem; }
.cert-info p strong { color: var(--ambar); }
.chapeu-ambar { background: rgba(253, 189, 19, .16); color: var(--ambar); }
.lista-checada-clara { margin: 0 0 32px; }
.lista-checada-clara strong { color: #fff; }
.lista-checada-clara span.desc { color: rgba(255, 255, 255, .7); }
.check-ambar { background: rgba(253, 189, 19, .18) !important; color: var(--ambar) !important; }
.cert-arte img { width: 100%; height: auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .35)); }

.btn-ambar {
  background: var(--ambar); color: var(--verde-950);
  box-shadow: 0 6px 20px rgba(253, 189, 19, .4);
}
.btn-ambar:hover { background: var(--ambar-600); color: var(--verde-950); }

/* ---------- Central de Downloads ---------- */

.download-grupo { margin-bottom: 56px; }
.download-grupo:last-of-type { margin-bottom: 0; }
.download-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.download-card {
  display: flex; align-items: flex-start; gap: 20px;
  background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio-g);
  padding: 26px 28px; transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.download-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-suave); border-color: var(--verde-200); }
.download-card-destaque { border-color: var(--verde-400); background: var(--verde-50); }

.download-icone {
  flex: none; width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center; color: #fff;
}
.download-icone svg { width: 28px; height: 28px; }
.tipo-pdf { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.tipo-doc { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.tipo-xls { background: linear-gradient(135deg, #22c55e, #15803d); }
.tipo-exe { background: linear-gradient(135deg, var(--verde-600), var(--verde-800)); }
.tipo-zip { background: linear-gradient(135deg, #f59e0b, #b45309); }

.download-corpo { flex: 1; min-width: 0; }
.download-corpo h3 { font-size: 1.12rem; font-weight: 700; margin-bottom: 6px; }
.download-corpo p { color: var(--cinza-500); font-size: .93rem; margin-bottom: 14px; }
.download-meta { display: flex; align-items: center; gap: 12px; font-size: .82rem; color: var(--cinza-500); }
.download-formato {
  font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: .72rem;
  color: var(--verde-700); background: var(--verde-100); padding: 3px 10px; border-radius: 999px;
}
.download-btn { flex: none; align-self: center; padding: 11px 22px; }
.download-btn svg { width: 18px; height: 18px; }

.download-ajuda {
  display: flex; align-items: center; gap: 14px; justify-content: center;
  margin-top: 56px; padding: 22px 28px; border-radius: var(--raio-g);
  background: var(--verde-50); border: 1px dashed var(--verde-200); color: var(--cinza-600);
}
.download-ajuda svg { width: 26px; height: 26px; flex: none; color: var(--verde-700); }
.download-ajuda a { font-weight: 600; }

@media (max-width: 768px) {
  .download-grid { grid-template-columns: 1fr; }
  .download-card { flex-wrap: wrap; }
  .download-btn { width: 100%; }
  .download-ajuda { flex-direction: column; text-align: center; }
}

/* ---------- Blog cards ---------- */

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.post-card {
  background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio-g);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-suave); }
.post-card-capa { aspect-ratio: 16 / 9; overflow: hidden; background: var(--verde-100); }
.post-card-capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card:hover .post-card-capa img { transform: scale(1.04); }
.post-card-corpo { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.post-card h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.35; }
.post-card h3 a { color: inherit; }
.post-card h3 a:hover { color: var(--verde-700); }
.post-card p { color: var(--cinza-500); font-size: .93rem; flex: 1; }
.post-meta { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--cinza-500); }
.categoria-tag {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--verde-700); background: var(--verde-100);
  padding: 4px 12px; border-radius: 999px;
}

/* Filtros de categoria */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 48px; }
.filtros a {
  padding: 9px 20px; border-radius: 999px; font-weight: 600; font-size: .9rem;
  color: var(--cinza-600); background: #fff; border: 1px solid var(--cinza-200);
  transition: var(--transicao);
}
.filtros a:hover { border-color: var(--verde-400); color: var(--verde-700); }
.filtros a.ativo { background: var(--verde-700); border-color: var(--verde-700); color: #fff; }

/* Paginação */
.paginacao { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 56px; }
.paginacao a, .paginacao span {
  min-width: 44px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; font-weight: 600; border: 1px solid var(--cinza-200); color: var(--cinza-600);
}
.paginacao a:hover { border-color: var(--verde-400); color: var(--verde-700); }
.paginacao .atual { background: var(--verde-700); border-color: var(--verde-700); color: #fff; }

/* ---------- Depoimentos ---------- */

.depo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.depo-card {
  background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio-g);
  padding: 34px 32px; display: flex; flex-direction: column; gap: 18px;
}
.depo-estrelas { display: flex; gap: 3px; color: #f59e0b; }
.depo-estrelas svg { width: 20px; height: 20px; }
.depo-card blockquote { color: var(--cinza-700); font-size: 1rem; flex: 1; }
.depo-autor { display: flex; align-items: center; gap: 14px; }
.depo-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--verde-500), var(--verde-800));
  color: #fff; display: grid; place-items: center;
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.05rem;
}
.depo-avatar-logo {
  width: 64px; height: 64px; background: #fff; object-fit: contain;
  border: 1px solid var(--cinza-200); padding: 3px;
}
.depo-autor strong { display: block; color: var(--cinza-900); font-size: .98rem; }
.depo-autor span { font-size: .85rem; color: var(--cinza-500); }

/* ---------- FAQ ---------- */

.faq-lista { max-width: 48rem; margin: 0 auto; display: grid; gap: 14px; }
.faq-item { background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio); overflow: hidden; }
.faq-pergunta {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--fonte-titulo); font-size: 1.02rem; font-weight: 700; color: var(--cinza-900);
}
.faq-pergunta .faq-seta {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--verde-100); color: var(--verde-700);
  display: grid; place-items: center; transition: transform var(--transicao);
}
.faq-seta svg { width: 16px; height: 16px; }
.faq-item[data-aberto="true"] .faq-seta { transform: rotate(180deg); }
.faq-resposta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-item[data-aberto="true"] .faq-resposta { grid-template-rows: 1fr; }
.faq-resposta-inner { overflow: hidden; }
.faq-resposta p { padding: 0 24px 22px; color: var(--cinza-600); }

/* ---------- CTA final ---------- */

.cta-final {
  position: relative; overflow: hidden; border-radius: var(--raio-g); color: #fff;
  background:
    radial-gradient(800px 400px at 90% 0%, rgba(163, 230, 53, .2), transparent 55%),
    linear-gradient(140deg, var(--verde-900), var(--verde-700));
  padding: 72px 56px; text-align: center;
}
.cta-final h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 14px; }
.cta-final p { color: rgba(255, 255, 255, .85); font-size: 1.1rem; max-width: 40rem; margin: 0 auto 34px; }
.cta-final .hero-ctas { justify-content: center; margin-bottom: 0; }

/* ---------- Página interna (hero pequeno) ---------- */

.pagina-hero {
  background:
    radial-gradient(900px 400px at 80% -20%, rgba(163, 230, 53, .14), transparent 60%),
    linear-gradient(150deg, var(--verde-950), var(--verde-800));
  color: #fff; padding: 72px 0; text-align: center;
}
.pagina-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 14px; }
.pagina-hero p { color: rgba(255, 255, 255, .82); font-size: 1.1rem; max-width: 44rem; margin: 0 auto; }
.pagina-hero .categoria-tag { background: rgba(255,255,255,.14); color: var(--lima-300); margin-bottom: 18px; }

/* ---------- Conteúdo de artigo / páginas legais ---------- */

.prosa { max-width: 46rem; margin: 0 auto; font-size: 1.05rem; }
.prosa > * + * { margin-top: 1.2em; }
.prosa h2 { font-size: 1.55rem; margin-top: 2em; }
.prosa h3 { font-size: 1.25rem; margin-top: 1.6em; }
.prosa ul, .prosa ol { padding-left: 8px; display: grid; gap: .5em; }
.prosa li::marker { color: var(--verde-600); font-weight: 700; }
.prosa strong { color: var(--cinza-900); }
.prosa em { color: var(--verde-800); }
.prosa blockquote {
  border-left: 4px solid var(--verde-500); background: var(--verde-50);
  padding: 18px 24px; border-radius: 0 var(--raio) var(--raio) 0; font-style: italic;
}

.post-capa-grande { max-width: 60rem; margin: -48px auto 56px; position: relative; z-index: 5; }
.post-capa-grande img { width: 100%; border-radius: var(--raio-g); box-shadow: var(--sombra-forte); aspect-ratio: 21/9; object-fit: cover; }

.post-rodape-meta {
  max-width: 46rem; margin: 48px auto 0; padding-top: 24px;
  border-top: 1px solid var(--cinza-200);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.tag-simples { font-size: .82rem; background: var(--cinza-100); color: var(--cinza-600); padding: 5px 14px; border-radius: 999px; }

/* ---------- Rodapé ---------- */

.rodape { background: var(--verde-950); color: rgba(255, 255, 255, .75); margin-top: 96px; }
.rodape-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; padding: 72px 0 56px;
}
.rodape-col h3 {
  color: #fff; font-size: .95rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 20px;
}
.rodape-col ul { list-style: none; display: grid; gap: 12px; }
.rodape-col a { color: rgba(255, 255, 255, .72); font-size: .95rem; transition: color var(--transicao); }
.rodape-col a:hover { color: var(--verde-400); }
.rodape-marca p { margin: 18px 0 22px; font-size: .95rem; max-width: 22rem; }
.rodape-social { display: flex; gap: 10px; }
.rodape-social a {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .8);
  transition: var(--transicao);
}
.rodape-social a:hover { background: var(--verde-600); color: #fff; transform: translateY(-2px); }
.rodape-social svg { width: 18px; height: 18px; }
.rodape-base { border-top: 1px solid rgba(255, 255, 255, .1); padding: 24px 0; font-size: .85rem; }
.rodape-base .container { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- WhatsApp flutuante ---------- */

.whatsapp-flutuante {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .45);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.whatsapp-flutuante:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(37, 211, 102, .55); }
.whatsapp-flutuante svg { width: 32px; height: 32px; }

/* ---------- Botão voltar ao topo ---------- */

.voltar-topo {
  position: fixed; right: 24px; bottom: 96px; z-index: 89;
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--verde-700); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(4, 34, 15, .28);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--transicao), visibility var(--transicao),
    transform var(--transicao), background var(--transicao);
}
.voltar-topo.visivel { opacity: 1; visibility: visible; transform: none; }
.voltar-topo:hover { background: var(--verde-800); transform: translateY(-3px); }
.voltar-topo svg { width: 24px; height: 24px; }

/* ---------- Animações de entrada ---------- */

.revelar { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.revelar.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; transition: none; }
}

/* ---------- 404 ---------- */

.pagina-404 { text-align: center; padding: 120px 0; }
.pagina-404 .num { font-family: var(--fonte-titulo); font-size: 7rem; font-weight: 800; color: var(--verde-200); line-height: 1; }
.pagina-404 h1 { font-size: 2rem; margin: 16px 0 12px; }
.pagina-404 p { color: var(--cinza-500); margin-bottom: 32px; }

/* ============================================================
   Responsivo
   ============================================================ */

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-arte { max-width: 560px; margin: 0 auto; }
  .func-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .dividida { grid-template-columns: 1fr; gap: 40px; }
  .rodape-grid { grid-template-columns: 1fr 1fr; }
  .topo-acoes .btn-fantasma { display: none; }
}

@media (max-width: 768px) {
  :root { --topo-altura: 68px; }
  .secao { padding: 72px 0; }
  .hero { padding: 64px 0 96px; }

  .topo-acoes { display: none; }
  .menu-toggle { display: flex; }

  .nav {
    position: fixed; inset: var(--topo-altura) 0 auto 0; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 6px;
    background: #fff; border-bottom: 1px solid var(--cinza-200);
    padding: 20px 24px 28px; box-shadow: var(--sombra-forte);
    transform: translateY(-130%); transition: transform .3s ease;
  }
  .nav.aberto { transform: none; }
  .nav > a { padding: 13px 16px; font-size: 1.05rem; }
  .nav-acoes-mobile { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

  .stats-cartao { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--cinza-200); padding-top: 28px; }

  .func-grid, .blog-grid, .depo-grid { grid-template-columns: 1fr; }
  .aviso-topo { font-size: .85rem; }
  .aviso-topo-inner { justify-content: flex-start; }
  .cert-card { grid-template-columns: 1fr; padding: 36px 28px; gap: 32px; }
  .cert-arte { max-width: 380px; margin: 0 auto; }
  .cta-final { padding: 56px 28px; }
  .rodape-grid { grid-template-columns: 1fr; gap: 36px; padding: 56px 0 40px; }
  .rodape-base .container { justify-content: center; text-align: center; }
  .whatsapp-flutuante { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .voltar-topo { right: 16px; bottom: 80px; width: 44px; height: 44px; }
}