/* =====================================================================
   5-banner.css  |  BANNER DE DESTAQUE E CAIXA "NÃO ACHOU O QUE QUERIA?"
   São duas coisas separadas, uma em cima da outra.
   ===================================================================== */

/* ---------- BANNER DE DESTAQUE ---------- */

/* faixa larga com degradê (ou imagem, veja o comentário no index.html) */
.banner{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:80px 0 0;padding:44px;border-radius:28px;color:#fff;overflow:hidden;
  background:var(--banner-img, linear-gradient(135deg,var(--accent2),var(--accent)));background-size:cover;background-position:center}

/* texto do banner (lado esquerdo) */
.banner-texto{max-width:520px;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.banner h2{margin-bottom:10px}
.banner p{margin-bottom:22px;opacity:.92;font-size:17px}

/* a etiqueta do banner fica branca translúcida */
.banner .tag{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35);color:#fff}

/* botão branco para destacar em cima do degradê */
.banner .btn{background:#fff;color:#1c1830;text-shadow:none}

/* emoji grande do lado direito (apague o <div class="banner-visual"> se não quiser) */
.banner-visual{font-size:110px;line-height:1;filter:drop-shadow(0 10px 20px rgba(0,0,0,.3))}

/* no celular o banner vira uma coluna e o emoji some */
@media (max-width:640px){
  .banner{padding:30px 24px}
  .banner-visual{display:none}
}


/* ---------- NÃO ACHOU O QUE QUERIA? ---------- */

/* caixa colorida clarinha, separada do banner */
.cta{margin:40px 0 60px;padding:50px 24px;text-align:center;border-radius:28px;background:linear-gradient(135deg,rgba(255,94,168,.2),rgba(124,92,255,.2));border:1px solid var(--linha)}
.cta p{color:var(--muted);margin:8px 0 22px}