/* ============================================================
   layout.css — contenedor, grilla y espaciado vertical.
   Sección 4.3 de la especificación.
   ============================================================ */

:root {
  /* Alto del header sticky. Lo usa scroll-padding-top para que
     las anclas no queden tapadas (sección 8, punto 4). */
  --alto-cabecera: 68px;
}

@media (min-width: 768px) {
  :root {
    --alto-cabecera: 76px;
  }
}

html {
  scroll-padding-top: calc(var(--alto-cabecera) + var(--e-5));
}

/* ---------- Contenedor ------------------------------------- */

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho-max) + var(--e-5) * 2);
  margin-inline: auto;
  padding-inline: var(--e-5);
}

@media (min-width: 768px) {
  .contenedor {
    max-width: calc(var(--ancho-max) + var(--e-7) * 2);
    padding-inline: var(--e-7);
  }
}

/* ---------- Grilla ------------------------------------------
   4 columnas de base, 6 desde 768px, 12 desde 1024px.
   Gutter fijo de 24px en los tres casos.
   ----------------------------------------------------------- */

.grilla {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .grilla {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grilla {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

/* Ocupar el ancho completo de la grilla en cualquier breakpoint */
.grilla > .col-total {
  grid-column: 1 / -1;
}

/* ---------- Espaciado vertical de secciones ----------------- */

.seccion {
  padding-block: clamp(80px, 12vh, 160px);
}

/* La primera sección después del hero no necesita el tope completo:
   el hero ya trae su propio respiro abajo. */
.seccion--pegada {
  padding-block-start: 0;
}

/* Cabecera de sección: etiqueta mono + título + línea de contexto */
.seccion-cabecera {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  margin-block-end: var(--e-8);
  max-width: 65ch;
}

@media (min-width: 768px) {
  .seccion-cabecera {
    margin-block-end: var(--e-9);
  }
}

/* Etiqueta mono con la línea corta en cian que la precede */
.etiqueta-seccion {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.etiqueta-seccion::before {
  content: "";
  inline-size: var(--e-6);
  block-size: 1px;
  background: var(--cian);
  flex: none;
}

/* ---------- Apiladores genéricos ---------------------------- */

.pila {
  display: flex;
  flex-direction: column;
}

.pila-2 { gap: var(--e-2); }
.pila-3 { gap: var(--e-3); }
.pila-4 { gap: var(--e-4); }
.pila-5 { gap: var(--e-5); }
.pila-6 { gap: var(--e-6); }

.fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
}