/* ═══════════════════════════════════════════════
   Sistema de grillas y breakpoints
   Mobile-first · columnas stretch · tope en 1280px
   ═══════════════════════════════════════════════ */

/* ── Mobile (base, desde 360px) ── */
:root {
  --grid-columns:  4;
  --grid-margin:   16px;
  --grid-gutter:   16px;
  --grid-max-width: 100%;
}

/* ── Tablet vertical (768px+) ── */
@media (min-width: 768px) {
  :root {
    --grid-columns:  8;
    --grid-margin:   32px;
    --grid-gutter:   24px;
  }
}

/* ── Tablet horizontal (1024px+) ── */
@media (min-width: 1024px) {
  :root {
    --grid-columns:  12;
    --grid-margin:   40px;
    --grid-gutter:   24px;
  }
}

/* ── Desktop (1280px+) — frame fijo, no crece más ── */
@media (min-width: 1280px) {
  :root {
    --grid-columns:  12;
    --grid-margin:   64px;
    --grid-gutter:   24px;
    --grid-max-width: var(--grid-frame-max);
  }
}

/* ── Contenedor de página ── */
.grid-container,
.container {
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
  box-sizing: border-box;
}

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

/* ── Span de columnas (relativo al breakpoint activo) ── */
.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }
.col-span-full { grid-column: 1 / -1; }

/* Inicio en columna N (desktop / tablet horizontal) */
@media (min-width: 1024px) {
  .col-from-2 { grid-column: 2 / -1; }
  .col-from-3 { grid-column: 3 / -1; }
  .col-from-7 { grid-column: 7 / -1; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .col-from-2 { grid-column: 1 / -1; }
  .col-from-3 { grid-column: 2 / -1; }
  .col-from-7 { grid-column: 4 / -1; }
}

@media (max-width: 767px) {
  .col-from-2,
  .col-from-3,
  .col-from-7 { grid-column: 1 / -1; }
}

/* ── Alineación exacta 1280 (12 columnas, margin 64, gutter 24) ── */
@media (min-width: 1280px) {
  .site-col-from-2  { grid-column-start: 2; }
  .site-col-from-3  { grid-column-start: 3; }
  .site-col-from-7  { grid-column-start: 7; }
  .site-col-to-12   { grid-column-end: 13; }   /* hasta fin de col 12 */
  .site-col-to-end  { grid-column-end: -1; }  /* hasta el final de la grilla */
  .site-col-12 {
    grid-column: 12 / 13;
    justify-self: end;
  }
}

@media (max-width: 1023px) {
  .site-col-from-2,
  .site-col-from-3,
  .site-col-from-7,
  .site-col-to-12,
  .site-col-to-end,
  .site-col-12 {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

/* ── Utilidades de breakpoint (solo desktop) ── */
@media (min-width: 1280px) {
  .col-span-d-1  { grid-column: span 1; }
  .col-span-d-2  { grid-column: span 2; }
  .col-span-d-3  { grid-column: span 3; }
  .col-span-d-4  { grid-column: span 4; }
  .col-span-d-5  { grid-column: span 5; }
  .col-span-d-6  { grid-column: span 6; }
  .col-span-d-7  { grid-column: span 7; }
  .col-span-d-8  { grid-column: span 8; }
  .col-span-d-9  { grid-column: span 9; }
  .col-span-d-10 { grid-column: span 10; }
  .col-span-d-11 { grid-column: span 11; }
  .col-span-d-12 { grid-column: span 12; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .col-span-th-1  { grid-column: span 1; }
  .col-span-th-2  { grid-column: span 2; }
  .col-span-th-3  { grid-column: span 3; }
  .col-span-th-4  { grid-column: span 4; }
  .col-span-th-5  { grid-column: span 5; }
  .col-span-th-6  { grid-column: span 6; }
  .col-span-th-7  { grid-column: span 7; }
  .col-span-th-8  { grid-column: span 8; }
  .col-span-th-9  { grid-column: span 9; }
  .col-span-th-10 { grid-column: span 10; }
  .col-span-th-11 { grid-column: span 11; }
  .col-span-th-12 { grid-column: span 12; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .col-span-tv-1 { grid-column: span 1; }
  .col-span-tv-2 { grid-column: span 2; }
  .col-span-tv-3 { grid-column: span 3; }
  .col-span-tv-4 { grid-column: span 4; }
  .col-span-tv-5 { grid-column: span 5; }
  .col-span-tv-6 { grid-column: span 6; }
  .col-span-tv-7 { grid-column: span 7; }
  .col-span-tv-8 { grid-column: span 8; }
}

@media (max-width: 767px) {
  .col-span-m-1 { grid-column: span 1; }
  .col-span-m-2 { grid-column: span 2; }
  .col-span-m-3 { grid-column: span 3; }
  .col-span-m-4 { grid-column: span 4; }
}