/* ============================================================
   SISTEMA DE GRILLA
   10 cols x 10 rows con calles de 15px (desktop)
   ============================================================ */

.section {
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
  width: 100%;
}

/* --- Hero: ocupa el viewport completo, grilla 10x10 ---
   La altura del hero es 100vh, divididas en 10 rows iguales */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  gap: var(--grid-gap);
  height: 100%;
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding: var(--grid-gap);
}