/*
  Sistema de grid — basado en el frame "Layout" de Figma (node 3206:2156):
  12 columnas, margen fijo 72px, gutter 20px, a 1440px de ancho de diseño.

  Se adapta a 3 rangos (no hay frames mobile/tablet en Figma; ver
  CONTEXTO-APRENDIZAJES.md — la decisión de breakpoints es nuestra):
    - Desktop  >=1024px : 12 columnas, ESCALADO PROPORCIONAL al viewport
    - Tablet   768-1023px: 8 columnas  / margen 40px / gutter 16px
    - Mobile   <768px    : 4 columnas  / margen 20px / gutter 16px

  IMPORTANTE — por qué escritorio arranca en 1024 y no en 1280:
  el diseño sólo existe a 1440px. Con el corte en 1280, cualquier pantalla de
  1280px o menos (p. ej. un portátil de 1260) caía en la maqueta apilada de
  tablet y NUNCA mostraba el diseño real. Ahora, de 1024px en adelante se usa
  la retícula de 12 columnas y todas las medidas fijas del diseño se escalan
  en proporción al ancho (los tokens --w-*), que es como debe reducirse una
  maqueta de ancho fijo.

  Márgenes: 72/1440 = 5% del ancho, de ahí `min(72px, 5vw)`.

  Uso: <div class="container"><div class="grid"> ... <div class="col-6"> ...
*/

:root {
  --grid-columns: 12;
  --grid-margin: min(72px, 5vw);
  --grid-gutter: min(20px, 1.39vw);
  --container-max: 1440px;

  /*
    Anchos de columna del diseño, escalables. Cada uno es
    `min(medidaDeFigma, su equivalente en vw)`, de modo que a 1440px o más se
    usa el valor exacto y por debajo encoge manteniendo la proporción.
      419 = 4 col | 528 = 5 col | 638 = 6 col | 748 = 7 col
      858 = 8 col | 1076 = 10 col | 1296 = 12 col
  */
  --w-4col:  min(419px, 29.10vw);
  --w-5col:  min(528px, 36.67vw);
  --w-6col:  min(638px, 44.31vw);
  --w-7col:  min(748px, 51.94vw);
  --w-8col:  min(858px, 59.58vw);
  --w-10col: min(1076px, 74.72vw);
  --w-12col: min(1296px, 90vw);
}

@media (max-width: 1023px) {
  :root {
    --grid-columns: 8;
    --grid-margin: 40px;
    --grid-gutter: 16px;
    /* En tablet/móvil los bloques pasan a ancho completo */
    --w-4col: 100%;
    --w-5col: 100%;
    --w-6col: 100%;
    --w-7col: 100%;
    --w-8col: 100%;
    --w-10col: 100%;
    --w-12col: 100%;
  }
}

@media (max-width: 767px) {
  :root {
    --grid-columns: 4;
    --grid-margin: 20px;
    --grid-gutter: 16px;
  }
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  box-sizing: border-box;
}

/* Cuando .container es hijo directo de una sección con flex-column+gap,
   hereda ese mismo gap entre sus hijos en vez de quedar pegados. */
section > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: inherit;
}
section > .container > * {
  max-width: 100%;
  min-width: 0;
}

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

/* Columnas fijas a 12 (desktop). En tablet/mobile cada .col-N ocupa el
   ancho completo del grid reducido, salvo que la sección declare su propio
   comportamiento — evita que un col-6 quede a la mitad en una grid de 4. */
/* grid-column-end (no el shorthand) para no pisar grid-column-start cuando
   se combina con .col-start-N — el shorthand "span N" resetea el otro
   extremo a auto y rompía el offset (bug real detectado en HERO de HOME). */
.col-1  { grid-column-end: span 1; }
.col-2  { grid-column-end: span 2; }
.col-3  { grid-column-end: span 3; }
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-9  { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; }
.col-11 { grid-column-end: span 11; }
.col-12 { grid-column-end: span 12; }

@media (max-width: 1023px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    grid-column: span 8;
  }
  .col-tablet-4 { grid-column: span 4 !important; }
}

@media (max-width: 767px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
  .col-tablet-4 {
    grid-column: span 4 !important;
  }
}

/* Offsets (desktop, 12 columnas) — se anulan en tablet/mobile para que
   todo vuelva a ocupar el ancho completo del grid reducido. */
.col-start-1  { grid-column-start: 1; }
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }
.col-start-5  { grid-column-start: 5; }
.col-start-6  { grid-column-start: 6; }
.col-start-7  { grid-column-start: 7; }
.col-start-8  { grid-column-start: 8; }
.col-start-9  { grid-column-start: 9; }

@media (max-width: 1023px) {
  .col-start-1, .col-start-2, .col-start-3, .col-start-4, .col-start-5,
  .col-start-6, .col-start-7, .col-start-8, .col-start-9 {
    grid-column-start: 1;
  }
}