/* layout.css - utilidades de layout sobre los tokens --ev-* (sin build).
   Grid: .ev-grid + .ev-grid--N + .ev-gap-N.
   Nota responsive: las páginas existentes traen su propio responsive en clases
   semánticas (.caso-grid, .hp-3col, ...) con !important, que PREVALECE sobre estas
   utilidades. Por eso aquí el responsive NO usa !important: respeta lo existente
   y, a la vez, da un comportamiento por defecto para secciones nuevas. */

/* ---- Contenedor ---- */
.ev-container { max-width: 1180px; margin: 0 auto; width: 100%; padding: 0 32px; }

/* ---- Grid ---- */
.ev-grid { display: grid; }
.ev-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ev-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ev-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) {
  .ev-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .ev-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) { .ev-grid--2 { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .ev-grid--3, .ev-grid--4 { grid-template-columns: 1fr; }
}

/* ---- Gaps (escala usada por los grids del diseño) ---- */
.ev-gap-8 { gap: 8px; }  .ev-gap-10 { gap: 10px; } .ev-gap-12 { gap: 12px; }
.ev-gap-14 { gap: 14px; } .ev-gap-16 { gap: 16px; } .ev-gap-18 { gap: 18px; }
.ev-gap-20 { gap: 20px; } .ev-gap-24 { gap: 24px; } .ev-gap-28 { gap: 28px; }
.ev-gap-32 { gap: 32px; }

/* ---- Helpers flex ---- */
.ev-row { display: flex; }
.ev-row-center { display: flex; align-items: center; }
.ev-between { justify-content: space-between; }
.ev-flex-wrap { flex-wrap: wrap; }
.ev-center { display: flex; align-items: center; justify-content: center; }