/* ==========================================================================
   Seções de página: hero da home, banners, benefícios, "como funciona",
   faixa de ajuda (CTA) e páginas de conteúdo
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
    position: relative; overflow: hidden; color: #fff;
    background: var(--jj-hero-brilho), var(--jj-textura);
    background-size: 100% 100%, 100% 100%, 10px 10px, 10px 10px, 10px 5px;
    background-position: 0 0, 0 0, 0 0, 5px 5px, 0 0;
}
.hero h1 { font-size: clamp(2rem, 4.2vw, 3.3rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.07; margin: 0 0 1.1rem; }
.hero h1 em { font-style: normal; color: var(--jj-destaque); }
.hero .hero-texto { font-size: 1.12rem; color: #c3e0e2; max-width: 860px; margin: 0; }
.hero-brilho {
    position: absolute; inset: auto -10% -40% auto; width: 60%; aspect-ratio: 1; border-radius: 50%;
    background: rgba(32, 184, 176, .35); filter: blur(80px); pointer-events: none;
}

/* ---------- Banner ---------- */
.banner { display: block; border-radius: var(--jj-radius-lg); overflow: hidden; }
.banner img { width: 100%; height: auto; display: block; }

/* ---------- Benefícios ---------- */
.beneficio { display: flex; gap: 14px; align-items: flex-start; padding: 22px; height: 100%; }
.beneficio-icone {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; font-size: 1.15rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--jj-primary-soft); color: var(--jj-primary-text);
}
.beneficio h3 { font-size: .98rem; font-weight: 600; margin: 0 0 .2rem; }
.beneficio p { font-size: .82rem; color: var(--jj-muted); margin: 0; }

/* ---------- Como funciona ---------- */
.passos { background: var(--jj-header); border: 1px solid var(--jj-border); border-radius: var(--jj-radius-xl); padding: 48px; }
.passo { padding: 28px; height: 100%; }
.passo-numero {
    width: 44px; height: 44px; border-radius: 50%; margin-bottom: 16px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    background: var(--jj-primary); color: var(--jj-primary-contrast);
}
.passo h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .35rem; }
.passo p { color: var(--jj-muted); font-size: .9rem; margin: 0; }
@media (max-width: 767.98px) { .passos { padding: 28px 20px; } }

/* ---------- Faixa "Precisa de ajuda?" ---------- */
.faixa-ajuda {
    background: linear-gradient(120deg, #135a5a 0%, #0d3036 100%); color: #fff;
    border: 1px solid var(--jj-border); border-radius: var(--jj-radius-xl); padding: 44px 48px;
}
.faixa-ajuda h2 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 700; margin: 0 0 .3rem; letter-spacing: -.02em; }
.faixa-ajuda p { margin: 0; opacity: .85; }
.btn-whatsapp { --bs-btn-bg: var(--jj-whatsapp); --bs-btn-border-color: var(--jj-whatsapp); --bs-btn-color: #0b2e17; --bs-btn-hover-bg: #1fbd5a; --bs-btn-hover-border-color: #1fbd5a; --bs-btn-hover-color: #0b2e17; }
@media (max-width: 575.98px) { .faixa-ajuda { padding: 28px 22px; } }

/* ---------- Páginas de conteúdo (Quem somos, Tipo de gravação, Fale conosco) ---------- */
.conteudo h2 { font-size: 1.05rem; font-weight: 600; color: var(--jj-primary-text); margin: 0 0 .35rem; }
.conteudo p { color: var(--jj-text-soft); }