/*
 * Estructura: contenedor, secciones y retícula de 12 columnas.
 * Detalle en docs/DISENO.md §6.
 *
 * Márgenes laterales: 20 px (celular) · 32 px (tablet) · 64–80 px (escritorio).
 * Cortes: 0–767 celular · 768–1023 tablet · 1024–1439 escritorio · 1440+ grande.
 */

/* ---------- Contenedor ----------
 * Centra el contenido y le pone los márgenes. Se usa DENTRO de una sección
 * (que puede tener fondo de borde a borde). */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* Misma medida de margen para elementos de ancho completo (cabecera, pie)
 * que no llevan un .contenedor adentro: alinea con el contenido en pantallas enormes. */
.margen-pagina {
  padding-inline: max(var(--margen), calc((100% - var(--ancho-max)) / 2 + var(--margen)));
}

/* ---------- Secciones ----------
 * Cada sección deja espacio ARRIBA (56 px celular → 144 px escritorio).
 * Las que terminan antes de un bloque oscuro piden también espacio abajo. */
.seccion {
  padding-block-start: var(--separacion);
}

.seccion--cerrada {
  padding-block-end: var(--separacion);
}

/* Un bloque oscuro lleva espacio arriba y abajo */
.seccion.oscuro {
  padding-block-end: var(--separacion);
}

/* ---------- Retícula de 12 columnas ----------
 * Celular: 4 columnas. Desde 768 px: 12 columnas.
 * Todo se apila a ancho completo hasta 1023 px; desde 1024 px actúan las
 * clases .c-inicio-fin (ej. .c-1-6 ocupa de la columna 1 a la 6). */
.grilla {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--medianil);
  row-gap: var(--e-7);
}

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

/* Por defecto, cada hijo ocupa todo el ancho (se apila) */
.grilla > * {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Tablet: mitad y mitad. Sólo para PARES (los dos servicios):
 * con 3 elementos dejaría uno solo en la segunda fila; para 3, no se usa y se apilan. */
@media (min-width: 768px) {
  .grilla > .t-mitad {
    grid-column: span 6;
  }
}

/* Escritorio: columnas exactas (inicio–fin, contando de 1 a 12) */
@media (min-width: 1024px) {
  .grilla > .c-1-12 { grid-column: 1 / 13; }
  .grilla > .c-1-8  { grid-column: 1 / 9; }
  .grilla > .c-1-6  { grid-column: 1 / 7; }
  .grilla > .c-1-5  { grid-column: 1 / 6; }
  .grilla > .c-1-4  { grid-column: 1 / 5; }
  .grilla > .c-1-3  { grid-column: 1 / 4; }
  .grilla > .c-4-6  { grid-column: 4 / 7; }
  .grilla > .c-7-9  { grid-column: 7 / 10; }
  .grilla > .c-10-12 { grid-column: 10 / 13; }
  .grilla > .c-5-8  { grid-column: 5 / 9; }
  .grilla > .c-5-12 { grid-column: 5 / 13; }
  .grilla > .c-7-12 { grid-column: 7 / 13; }
  .grilla > .c-8-12 { grid-column: 8 / 13; }
  .grilla > .c-9-12 { grid-column: 9 / 13; }
}

/* ---------- Ayudas de composición ---------- */

/* Elementos apilados con el mismo espacio entre sí (--sep cambia la medida) */
.pila {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sep, var(--e-5));
}

/* Elementos en fila que pasan a la línea siguiente si no entran */
.fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sep, var(--e-4)) var(--e-5);
}

/* Separador fino */
.linea {
  height: 1px;
  border: 0;
  background-color: var(--regla);
}