/* ============================================
   MANUALVERDE — responsive.css
   Diseño móvil primero: aquí ampliamos a
   tablet y escritorio
   ============================================ */

/* ---------- Tablet (≥768px) ---------- */
@media (min-width: 768px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--cats {
    grid-template-columns: repeat(2, 1fr);
  }
  .franja {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
  .editorial {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* ---------- Escritorio (≥1024px) ---------- */
@media (min-width: 1024px) {
  .nav {
    display: block;
  }
  .menu-btn,
  .nav--movil {
    display: none !important;
  }
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--cats {
    grid-template-columns: repeat(3, 1fr);
  }
  .hero__inner {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .hero__figura {
    display: block;
    justify-self: end;
  }
}