/* ==========================================================================
   BASURTO FERMIN CAFE -- Responsive
   Desktop-first: ajustes para tablet y movil.
   ========================================================================== */

/* Tablet-landscape / laptop chico: el header (logo + 6 links + acciones)
   se queda sin espacio antes de llegar al breakpoint de hamburguesa (960px).
   Sin esto, el wordmark del logo se envuelve en 2 lineas y choca con el nav. */
@media (max-width: 1220px) {
  .main-nav__list { gap: var(--space-md); }
  .header-actions > .btn { display: none; }
  .brand__name { white-space: nowrap; }
}

@media (max-width: 1100px) {
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials__track { grid-template-columns: repeat(2, 1fr); }
  .related-products__grid { grid-template-columns: repeat(2, 1fr); }
  .origin-stats, .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-md); }
  .sensory__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .methods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-md); }
  .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-md); }
  .distribution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }

  .editorial-grid,
  .intro-product,
  .story,
  .checkout-grid { grid-template-columns: minmax(0, 1fr); }

  .editorial-grid--reverse .editorial-grid__media { order: 0; }

  .process__path { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-xl); }
  .process__path--five { grid-template-columns: repeat(2, 1fr); }
  .process__connector { display: none; }

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

  .product-detail { grid-template-columns: 1fr; }

  .personalizer__groups { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root {
    --container-padding: 1.25rem;
    --space-3xl: 4.5rem;
    --space-2xl: 3.25rem;
    --space-xl: 2.75rem;
  }

  .header-actions { gap: var(--space-sm); }
  .header-actions > .btn { display: none; }

  .catalog-grid { grid-template-columns: 1fr; }
  .testimonials__track { grid-template-columns: 1fr; }
  .related-products__grid { grid-template-columns: 1fr; }
  .origin-stats, .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .sensory__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .methods-grid { grid-template-columns: 1fr; }
  .people-grid { grid-template-columns: 1fr; }
  .distribution-grid { grid-template-columns: 1fr; }

  /* En 2 columnas, 5 pasos del proceso quedan como 2/2/1: el ultimo
     paso (fila suelta) a veces terminaba pintandose sobre la seccion
     de Galeria. Colchon extra abajo solo para #proceso en movil. */
  #proceso { padding-bottom: calc(var(--space-3xl) + 3rem); }
  .process__path--five { row-gap: var(--space-2xl); }

  .hero { align-items: flex-end; }
  .hero__content { padding-bottom: var(--space-xl); }
  .hero__scroll-cue { display: none; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .catalog-toolbar { flex-direction: column; align-items: stretch; }

  /* Textura vertical de granos de cafe, pensada para el ancho movil (375px)
     -- solo reemplaza el fondo compartido (bg-secciones.jpg) en #cafes;
     "Del fruto al grano" y #testimonios siguen con la foto de siempre,
     tambien en movil. */
  #cafes.section--photo-bg { background-image: url('../assets/images/seccion-catalogo-mobil.jpg'); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }

  .cart-drawer { width: 100%; }

  .modal__panel { max-height: 92vh; }

  .whatsapp-fab { width: 48px; height: 48px; }
  .cart-fab, .cart-fab__sphere { width: 48px; height: 48px; }
  .chatbot-fab { width: 48px; height: 48px; bottom: calc(var(--space-md) + 48px + var(--space-sm)); }
  .chatbot-panel {
    bottom: calc(var(--space-md) + 48px + var(--space-sm) + 48px + var(--space-sm));
    width: calc(100vw - 2 * var(--space-md));
  }
}

@media (max-width: 480px) {
  .hero__title { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .btn { width: 100%; }
  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; }
  .hero__content { padding-bottom: calc(var(--space-xl) + 64px); }
}