/* ═══════════════════════════════════════════════════════════════
   MATAVELLI GRANITOS — Classes Utilitárias
   ═══════════════════════════════════════════════════════════════ */

/* ─── LAYOUT ─── */

.container {
  width: 100%;
  max-width: var(--max-w-total);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--secao-px);
  padding-right: var(--secao-px);
}

.container--estreito {
  max-width: var(--max-w-conteudo);
}

.container--texto {
  max-width: var(--max-w-texto);
}

/* Grid Flexível */
.grid {
  display: grid;
  gap: var(--espaco-6);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Grid assimétrico — split editorial */
.grid--split {
  grid-template-columns: 1fr 1.2fr;
  gap: var(--espaco-16);
}

.grid--split-invertido {
  grid-template-columns: 1.2fr 1fr;
  gap: var(--espaco-16);
}

/* Flexbox Helpers */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

/* ─── SEÇÕES ─── */

.secao {
  padding: var(--secao-py) var(--secao-px);
}

.secao--escura {
  background: var(--grad-escuro);
  color: var(--cor-branco);
}

.secao--marmore {
  background: var(--cor-marmore);
}

.secao--gradiente {
  background: var(--grad-pedra);
}

/* ─── TIPOGRAFIA UTILITÁRIA ─── */

.serif { font-family: var(--fonte-serif); }
.sans { font-family: var(--fonte-sans); }
.mono { font-family: var(--fonte-mono); }

.texto-xs { font-size: var(--texto-xs); }
.texto-sm { font-size: var(--texto-sm); }
.texto-base { font-size: var(--texto-base); }
.texto-md { font-size: var(--texto-md); }
.texto-lg { font-size: var(--texto-lg); }
.texto-xl { font-size: var(--texto-xl); }
.texto-2xl { font-size: var(--texto-2xl); }
.texto-3xl { font-size: var(--texto-3xl); }
.texto-4xl { font-size: var(--texto-4xl); }
.texto-5xl { font-size: var(--texto-5xl); }

.peso-fino { font-weight: var(--peso-fino); }
.peso-leve { font-weight: var(--peso-leve); }
.peso-normal { font-weight: var(--peso-normal); }
.peso-medio { font-weight: var(--peso-medio); }
.peso-semi { font-weight: var(--peso-semi); }
.peso-bold { font-weight: var(--peso-bold); }

.italico { font-style: italic; }
.maiuscula { text-transform: uppercase; }
.ls-largo { letter-spacing: var(--ls-largo); }
.ls-extra { letter-spacing: var(--ls-extra); }
.ls-ultra { letter-spacing: var(--ls-ultra); }

.text-center { text-align: center; }
.text-right { text-align: right; }

/* ─── CORES DE TEXTO ─── */

.cor-primaria { color: var(--cor-primaria); }
.cor-secundaria { color: var(--cor-secundaria); }
.cor-branco { color: var(--cor-branco); }
.cor-cinza { color: var(--cor-cinza); }
.cor-prata { color: var(--cor-prata); }
.cor-texto-1 { color: var(--cor-texto-primario); }
.cor-texto-2 { color: var(--cor-texto-secundario); }
.cor-texto-3 { color: var(--cor-texto-terciario); }

/* Texto gradiente dourado */
.texto-dourado {
  background: var(--grad-texto-brilho);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ─── BACKGROUNDS UTILITÁRIOS ─── */

.bg-branco { background-color: var(--cor-branco); }
.bg-marmore { background-color: var(--cor-marmore); }
.bg-travertino { background-color: var(--cor-travertino); }
.bg-primaria { background-color: var(--cor-primaria); }
.bg-escuro { background-color: var(--cor-grafite); }
.bg-preto { background-color: var(--cor-preto); }

/* ─── ESPAÇAMENTO ─── */

.mt-4 { margin-top: var(--espaco-4); }
.mt-6 { margin-top: var(--espaco-6); }
.mt-8 { margin-top: var(--espaco-8); }
.mt-10 { margin-top: var(--espaco-10); }
.mt-12 { margin-top: var(--espaco-12); }
.mt-16 { margin-top: var(--espaco-16); }

.mb-4 { margin-bottom: var(--espaco-4); }
.mb-6 { margin-bottom: var(--espaco-6); }
.mb-8 { margin-bottom: var(--espaco-8); }
.mb-10 { margin-bottom: var(--espaco-10); }

.gap-2 { gap: var(--espaco-2); }
.gap-3 { gap: var(--espaco-3); }
.gap-4 { gap: var(--espaco-4); }
.gap-6 { gap: var(--espaco-6); }
.gap-8 { gap: var(--espaco-8); }
.gap-10 { gap: var(--espaco-10); }

/* ─── EFEITOS VISUAIS ─── */

/* Divisor sutil (linha de separação) */
.divisor {
  width: 100%;
  height: 1px;
  background: var(--cor-borda);
  margin: var(--espaco-12) 0;
}

.divisor--dourado {
  background: var(--grad-dourado);
  height: 2px;
  max-width: 100px;
}

/* Glassmorphism */
.glass {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Overlay sobre imagens/vídeos */
.overlay {
  position: relative;
}

.overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-hero-overlay);
  pointer-events: none;
}

/* ─── BORDAS ─── */

.borda { border: 1px solid var(--cor-borda); }
.borda-dourada { border: 1px solid var(--cor-secundaria); }

.raio-sm { border-radius: var(--raio-sm); }
.raio-md { border-radius: var(--raio-md); }
.raio-lg { border-radius: var(--raio-lg); }
.raio-xl { border-radius: var(--raio-xl); }
.raio-total { border-radius: var(--raio-total); }

/* ─── SOMBRAS ─── */

.sombra-sutil { box-shadow: var(--sombra-sutil); }
.sombra-media { box-shadow: var(--sombra-media); }
.sombra-forte { box-shadow: var(--sombra-forte); }
.sombra-elevada { box-shadow: var(--sombra-elevada); }

/* ─── VISIBILIDADE ─── */

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

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVIDADE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .grid--split,
  .grid--split-invertido {
    grid-template-columns: 1fr;
    gap: var(--espaco-8);
  }

  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid--2,
  .grid--3 {
    grid-template-columns: 1fr;
  }

  .grid--4 {
    grid-template-columns: 1fr;
  }

  .nav__menu {
    display: none; /* Mobile menu handled via JS */
  }

  .hero__visual {
    display: none;
  }
}