/* Layout primitives: container, grids, sections, helpers. */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }

.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack--sm { gap: var(--sp-2); }
.stack--lg { gap: var(--sp-6); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* No mobile força 2 colunas (cards menores, vê mais) */
@media (max-width: 720px) {
  .grid { gap: var(--sp-3); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Telas bem pequenas voltam pra 1 coluna pra não comprimir demais */
@media (max-width: 420px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.section { padding-block: var(--sp-10); background: var(--bg); }
.section--soft { background: var(--bg-soft); }
.section--navy { background: var(--navy-2); color: #fff; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: rgba(255,255,255,.85); }

main { min-height: 100vh; }

/* helpers */
.center { text-align: center; }
.flex { display: flex; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }

.hide-mobile { display: none; }
@media (min-width: 720px) { .hide-mobile { display: initial; } }
.hide-desktop { display: initial; }
@media (min-width: 720px) { .hide-desktop { display: none; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Em páginas logadas (cliente), reserva espaço pro BottomNav no mobile */
body.com-bottomnav { padding-bottom: calc(var(--bottomnav-h) + var(--sp-4)); }
@media (min-width: 720px) { body.com-bottomnav { padding-bottom: 0; } }