/* Menu Segurança (/seguranca e /golpes) · peças comuns às duas páginas.
   Vem depois de institucional.css. Só tokens semânticos do DSNinja; tokens próprios com o prefixo --pi-.
   Tudo que não existe no Kojo está marcado "fora do Kojo · PROPOSTA". */

/* Título de seção: h2 do DS (40px no desktop, como a original) */
.sg-title { font-size: var(--text-h2); color: var(--color-text-heading); }
.pi-section--brand .sg-title { color: var(--color-text-on-brand); }

/* Hero amarelo com foto no escudo (arte da página original). O amarelo continua nos dois temas (amarelo híbrido). */
.sg-hero { padding: var(--space-700) 0 0; overflow: hidden; }
.sg-hero__grid { display: grid; gap: var(--space-500); align-items: end; }
.sg-hero h1 { font-size: var(--text-h1); line-height: var(--line-height-compact); }
.sg-hero__text { display: grid; gap: var(--space-300); justify-items: start; padding-bottom: var(--space-300); }
.sg-hero__text p { font-size: var(--text-large); line-height: var(--line-height-normal); max-width: 48ch; }
.sg-hero__media { justify-self: center; width: min(78%, 300px); }
@media (min-width: 992px) {
  .sg-hero { padding-top: var(--space-1000); }
  .sg-hero__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-1200); align-items: center; }
  .sg-hero h1 { font-size: calc(var(--text-h1) * 1.5); }
  .sg-hero__text { padding-bottom: var(--space-1000); gap: var(--space-500); }
  .sg-hero__media { width: 400px; align-self: end; }
}
/* Marca-texto amarelo invertido no título, como na original: fundo claro e texto escuro nos dois temas · fora do Kojo · PROPOSTA */
.sg-mark { background: var(--pi-plate); color: var(--color-text-on-brand); padding: 0 var(--space-200); border-radius: var(--radius-l); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Grade de ilustração + texto (cards de dica) */
.sg-tips { display: grid; gap: var(--space-500); }
@media (min-width: 640px) { .sg-tips { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .sg-tips--4 { grid-template-columns: repeat(4, 1fr); } }
.sg-tip { display: grid; gap: var(--space-200); justify-items: center; align-content: start; text-align: center; }
.sg-tip .pi-plate { width: 96px; height: 96px; margin-bottom: var(--space-100); }
.sg-tip h3 { font-size: var(--text-h5); color: var(--color-text-heading); }
.sg-tip p { color: var(--color-text-body); }
.sg-tip strong { color: var(--color-text-default); font-weight: var(--font-weight-semibold); }

/* Lista com ilustração pequena à esquerda */
.sg-list { display: grid; }
.sg-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-300); align-items: center; padding: var(--space-300) 0; border-bottom: 1px solid var(--color-border-default); color: var(--color-text-body); }
.sg-list li:last-child { border-bottom: 0; }
.sg-list .pi-plate { width: 56px; height: 56px; }

/* Faixa de contato amarela (Central de Ajuda / chat) */
.sg-cta { text-align: center; }
.sg-cta .pi-container { display: grid; gap: var(--space-300); justify-items: center; }
.sg-cta p { font-size: var(--text-large); max-width: 60ch; }
.sg-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-300); margin-top: var(--space-200); }
/* E-mail sobre o amarelo: azul de ação não tem contraste no amarelo; o link fica em on-brand, sublinhado · fora do Kojo · PROPOSTA */
.sg-mail-onbrand { color: var(--color-text-on-brand); font-weight: var(--font-weight-semibold); font-size: var(--text-large); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.sg-mail-onbrand:hover { text-decoration-thickness: 2px; }

/* Blog · "Confira outras dicas de segurança" */
.sg-blog { display: grid; gap: var(--space-500); }
@media (min-width: 640px) { .sg-blog { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .sg-blog--3 { grid-template-columns: repeat(3, 1fr); } }
.sg-blog--2 { max-width: 760px; margin: 0 auto; }
.sg-blog a { display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; text-decoration: none; transition: transform var(--duration-base) var(--easing-out), box-shadow var(--duration-base) var(--easing-out); }
.sg-blog a:hover { transform: translateY(-2px); box-shadow: var(--shadow-bottom-2); }
.sg-blog img { width: 100%; aspect-ratio: 285 / 170; object-fit: cover; }
.sg-blog__body { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-200); padding: var(--space-300) var(--space-500) var(--space-500); flex: 1; }
.sg-blog h3 { font-size: var(--text-h5); color: var(--color-text-heading); }
.sg-blog .gn-icon { color: var(--color-action-primary); margin-top: 2px; }
.sg-blog-more { display: flex; justify-content: center; margin-top: var(--space-700); }
@media (prefers-reduced-motion: reduce) { .sg-blog a:hover { transform: none; } }
[data-mode="dark"] .sg-blog a:hover { box-shadow: 0 0 0 1px var(--color-border-default); }

/* Header: link para a outra página do menu Segurança */
.sg-nav { display: flex; align-items: center; gap: var(--space-200); }

/* Faixa creme (brand-subtle), como a seção de pagamento da original */
.sg-section--cream { background: var(--color-bg-brand-subtle); }