/* 06-grilla.css
   GRILLA Y LAYOUT. Dos herramientas resuelven casi todo:

   auto-fit + minmax = "todas las columnas que quepan, ninguna mas angosta
   que X". Esto reemplaza a los media queries en la mayoria de los casos.
   El contenido decide cuantas columnas hay, no un punto de corte fijo.

   contenedor = la caja centrada de ancho maximo. Que el ancho maximo viva
   en UNA variable evita el clasico "cada seccion tiene su propio margen".

   NORMALIZADO: sin :root propio. El ancho, los huecos y el aire de seccion
   vienen de tokens.css (--ancho, --ancho-texto, --hueco*, --hueco-seccion).
   Antes este archivo redefinia --hueco y --hueco-seccion con otros valores
   que tokens.css: eran dos fuentes de verdad para lo mismo.
   ========================================================== */

/* La caja centrada */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.contenedor--texto { max-width: var(--ancho-texto); }

/* t9: la grilla elastica. Esta linea es la que mas trabajo ahorra.

   La base Y las variantes declaran display+gap: una variante se puede usar
   SOLA (class="grilla--tres") y sigue siendo una grilla. Antes solo `.grilla`
   lo declaraba, asi que `class="grilla--tres"` suelto NO formaba grilla: las
   tarjetas salian apiladas a todo el ancho. Defecto latente detectado el
   2026-09-25 al anadir el patron de bloques. */
.grilla, .grilla--dos, .grilla--tres, .grilla--cuatro {
  display: grid;
  gap: var(--hueco);
}
.grilla { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

.grilla--dos  { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.grilla--tres { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grilla--cuatro { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

.centrado {
  display: grid;
  place-items: center;
}

/* Secciones: el aire es lo que separa, no las lineas.
   El patron: la SECCION es la banda (todo el ancho, lleva el fondo) y DENTRO va
   un `.contenedor`. Asi la banda de color llega a los cantos y el texto respeta
   el margen. `section.seccion.contenedor` (todo en uno) NO lo permite: la banda
   quedaria del ancho del contenido, con el color cortado a los lados. Ver
   reglas/07 (el marco de la pagina). */
.seccion { padding-block: var(--hueco-seccion); }
.seccion--media { padding-block: calc(var(--hueco-seccion) / 2); }
.seccion--fondo { background: var(--c-fondo-suave); }
/* La banda de marca: la usa el cierre (s10). Su contenido hereda el color que va
   SOBRE el acento, no el del cuerpo. El boton solido se invierte porque el de
   acento desapareceria sobre el acento (ver 03-botones.css). */
.seccion--acento { background: var(--c-acento); color: var(--c-acento-texto); }
.seccion--acento .titulo,
.seccion--acento .lead,
.seccion--acento .prosa,
.seccion--acento .antetitulo,
.seccion--acento .texto-suave { color: inherit; }

/* Pila vertical con separacion pareja, sin usar margenes sueltos */
/* La pila. Igual que en la grilla: la base Y las variantes declaran
   display+gap, para que `class="pila--ajustada"` SOLA siga siendo una columna.
   Antes solo `.pila` lo declaraba, asi que la variante suelta no apilaba: el
   icono y su texto salian en linea. Mismo defecto latente que la grilla. */
.pila, .pila--ajustada, .pila--amplia, .pila--centrada {
  display: flex; flex-direction: column; gap: var(--hueco);
}
.pila--ajustada { gap: var(--hueco-chico); }
.pila--amplia { gap: var(--hueco-grande); }
.pila--centrada { align-items: center; text-align: center; }
.pila--centrada .lead, .pila--centrada .prosa { margin-inline: auto; }

/* ---------------------------------------------------------- t15: dos columnas
   El patron estructural minimo: una columna en el telefono y dos a partir de
   48rem. Es el corte "tablet +" del sistema, no un corte propio. Las variantes
   reparten el ancho (texto/imagen). */
.doble { display: grid; gap: var(--hueco); grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .doble { grid-template-columns: 1fr 1fr; }
  .doble--60 { grid-template-columns: 3fr 2fr; }   /* la primera manda */
  .doble--40 { grid-template-columns: 2fr 3fr; }   /* la segunda manda */
}

.fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fila--separada { justify-content: space-between; }

/* Solo para lectores de pantalla: texto que informa sin verse */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------- t14: bloques
   Las piezas de distinto peso, en celdas de distinto tamano. Reemplaza a la
   fila de tres tarjetas iguales: UNA celda manda y las demas la acompanan.

   Reglas del patron (ver reglas/06 y estado-del-arte/):
   - una celda ANCLA que gana por tamano Y por contenido;
   - canaleta = mitad del relleno interno: gap = var(--hueco) / 2;
   - el colapso responsive se planifica: en pantalla chica, una columna.

   Movil primero: todo apilado. A partir de 48rem (768px), cuatro columnas; el ancla
   abarca las cuatro y las celdas anchas, dos. El ancla va PRIMERO en el HTML:
   asi el orden de la fuente ya es el orden de lectura. */
.bloques {
  display: grid;
  gap: calc(var(--hueco) / 2);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .bloques { grid-template-columns: repeat(4, 1fr); }
  .bloques--principal { grid-column: 1 / -1; }   /* el ancla manda */
  .bloques--ancho     { grid-column: span 2; }   /* la pieza de peso medio */
}