/* =========================================================
   LAYOUT — container, sections, grids, responsividade
   ========================================================= */

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

/* Seções genéricas */
.section {
  padding-block: var(--section-py);
  position: relative;
  isolation: isolate;
}

.section--black {
  background-color: var(--preto-base);
  color: var(--branco);
}

.section--yellow {
  background-color: var(--amarelo-principal);
  color: var(--preto-base);
}

.section--yellow h2,
.section--yellow h3 {
  color: var(--preto-base);
}

.section--yellow p {
  color: rgba(13, 13, 13, 0.78);
}

/* Tag/eyebrow de seção (com linha) */
.section-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  text-align: center;
  margin-bottom: var(--space-6);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--amarelo-principal);
}

.section-tag__line {
  flex: 0 1 60px;
  height: 2px;
  background: var(--amarelo-principal);
  border-radius: 2px;
}

.section-tag--dark {
  color: var(--preto-base);
}

.section-tag--dark .section-tag__line {
  background: var(--preto-base);
}

/* Títulos e subtítulos de seção */
.section-title {
  font-size: var(--fs-56);
  font-weight: var(--fw-black);
  text-align: center;
  text-transform: uppercase;
  line-height: 1.02;
  margin: 0 auto var(--space-8);
  max-width: 22ch;
  color: var(--branco);
}

.section-title--dark {
  color: var(--preto-base);
  max-width: 24ch;
}

.section-title--center {
  text-align: center;
}

.section-subtitle {
  font-size: var(--fs-18);
  text-align: center;
  color: var(--cinza-texto);
  max-width: 60ch;
  margin: 0 auto var(--space-12);
}

.section-subtitle--dark {
  color: rgba(13, 13, 13, 0.78);
}

/* Grid helpers */
.grid {
  display: grid;
  gap: var(--space-6);
}

/* Responsividade base */
@media (min-width: 768px) {
  .section-title {
    margin-bottom: var(--space-10);
  }
}