/* ==========================================================================
   Kamaleon – layout.css
   Propósito: estructura global (navbar, grid, secciones, responsive)
   ========================================================================== */

/* -----------------------------
   NAVBAR · estructura mínima
   (el look y efectos están en style.css)
   ----------------------------- */

.nav {
  /* El estilo visual (fixed, blur, etc.) se maneja en style.css */
}

.nav__inner {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand img {
  border-radius: 8px;
}

/* Controles (idioma, etc.) */
.nav__controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav__controls select,
.nav__controls button {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* -----------------------------
   SECCIONES BASE
   ----------------------------- */

.section {
  padding: 28px 0;
}

.section--offers {
  padding-top: 24px;
}

/* -----------------------------
   GRID RESPONSIVE
   ----------------------------- */

.grid {
  display: grid;
  gap: var(--gap);
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 960px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* -----------------------------
   FOOTER
   (todo el estilo nuevo del footer está en style.css,
    aquí ya no hace falta nada)
   ----------------------------- */