/* Estilos das páginas da biblioteca de golpes — reutiliza a base do styles.css */
.legal-page { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.legal-header { background: linear-gradient(160deg, #13346f, var(--blue-deep)); color: #eaf1ff; padding: clamp(2rem, 4vw, 3rem) 0; }
.legal-header h1 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.3rem); }
.legal-header .lede { color: #c6d4f0; margin-top: .75rem; max-width: 62ch; }
.legal-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1rem; font-size: .9rem; color: #9fb2d8; }
.legal-meta strong { color: #e0eaff; }

.legal-body { max-width: 760px; margin: 0 auto; }
.legal-body h2 { font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); margin: 2.25rem 0 .75rem; color: var(--ink); border-bottom: 2px solid var(--rule); padding-bottom: .4rem; }
.legal-body h3 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; color: var(--ink); }
.legal-body p { margin: .7rem 0; color: var(--ink-2); line-height: 1.75; }
.legal-body ul { margin: .7rem 0 .7rem 1.2rem; color: var(--ink-2); display: grid; gap: .55rem; line-height: 1.7; }
/* :not(.btn): sem a exclusão, esta regra (0,1,1) vence .btn-primary (0,1,0)
   e o texto do botão fica azul sobre fundo azul — botão "sem texto" no celular. */
.legal-body a:not(.btn) { color: var(--blue); }

.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .92rem; color: #9fb2d8; flex-wrap: wrap; }
.breadcrumb a { color: #8fc0ff; }
.breadcrumb-sep { color: #556b9a; }

/* Caixa de CTA do app no meio do conteúdo */
.cta-box {
  background: #eef5ff; border: 1.5px solid #c7d6f2; border-left: 5px solid var(--blue);
  border-radius: var(--radius-sm); padding: 1.4rem 1.5rem; margin: 2.25rem 0;
}
.cta-box h3 { margin: 0 0 .5rem; color: var(--ink); }
.cta-box .btn { margin-top: .4rem; }
.cta-fine { font-size: .92rem; color: var(--ink-2); margin-top: .6rem; }

.ver-tambem { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: .95rem; }

/* Botão de compartilhar no WhatsApp */
.share-whats {
  display: inline-flex; align-items: center; gap: .55rem;
  background: #128C4A; color: #fff !important; text-decoration: none;
  font-family: var(--font-brand); font-weight: 700; font-size: 1rem;
  padding: .7rem 1.2rem; border-radius: 999px; margin: 1.25rem 0 .25rem;
}
.share-whats:hover { background: #0e7a3f; }
.share-whats svg { flex: none; }

/* Cards do hub /golpes/ */
.golpes-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 1.5rem; }
.golpe-card {
  background: #fff; border: 1.5px solid var(--rule); border-radius: var(--radius-sm);
  padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .5rem;
}
.golpe-card h2 { margin: 0; font-size: 1.15rem; border: none; padding: 0; }
.golpe-card h2 a { color: var(--ink); text-decoration: none; }
.golpe-card h2 a:hover { color: var(--blue); }
.golpe-card p { margin: 0; font-size: .97rem; }
.golpe-card .card-link { margin-top: auto; font-weight: 600; color: var(--blue); font-size: .95rem; }