/* ===========================================================
   JuntoCompra — Adaptación a tablet y móvil
   El diseño original solo cubre escritorio (1080 px).
   Estos puntos de corte son una derivación propia.
   =========================================================== */

@media (max-width:1040px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .feature{padding:24px 20px 34px}
  .feature__icon{margin-bottom:32px}
  .steps .step:nth-child(4),
  .steps .step:nth-child(5){grid-column:span 1}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento__lead{grid-column:span 2}
  .footer__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:820px){
  .reviews{grid-template-columns:1fr}
}

@media (max-width:680px){
  :root{--section-y:56px}

  .site-header__inner{min-height:62px}

  .steps{grid-template-columns:1fr}
  .bento,
  .footer__grid{grid-template-columns:1fr}
  .bento__lead{grid-column:span 1;padding:var(--s7) var(--s6)}
  .feature{padding:22px 20px 28px}
  .feature__icon{margin-bottom:24px}
  .bento-section{padding-block:56px 64px}

  .catalog-bar{flex-direction:column;align-items:stretch}
  .search{flex:1 1 auto}
  .catalog-bar__filters{width:100%}
  .catalog-bar__filters .sort{padding:10px 14px}
  .catalog-bar__filters select{max-width:none}

  .products{grid-template-columns:1fr;gap:var(--s4)}

  .hero__actions .btn{flex:1 1 auto}

  .site-footer{margin:0;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .cta-final{padding-block:88px 56px}
  .cta-final .logo{margin-top:var(--s9)}
}

/* El panel lateral (hoja abajo / cajón a la derecha) se define entero
   en drawer.css, con su propio punto de corte en 800px. Aquí solo el
   relleno interior. */
@media (max-width:560px){
  .drawer__body{padding:var(--s5) var(--s5) var(--s6)}
  .drawer__foot{padding:var(--s3) var(--s5) var(--s4)}
  .drawer__foot .drawer__pricing{margin-bottom:var(--s3);gap:var(--s3)}
  .drawer__price-now{font-size:1.7rem}
  .drawer__hint{padding:9px 11px}
  .drawer__hint b{font-size:12px}
  .drawer__hint span{font-size:10.5px}
  .drawer__fine{font-size:9.5px}
}
}

/* En móvil las tarjetas se apilan y el titular rojo del bento caía
   justo sobre una mancha roja. Bajamos la intensidad del mesh y
   apartamos las manchas centrales para que el texto siga legible. */
@media (max-width:680px){
  .mesh--bento{
    background:
      radial-gradient(34% 20% at  0% 62%,
        rgba(216,56,92,.62) 0%,  rgba(216,56,92,.50) 40%,
        rgba(216,56,92,.22) 74%, rgba(216,56,92,0) 100%),
      radial-gradient(46% 34% at 100% 34%,
        rgba(216,56,92,.70) 0%,  rgba(216,56,92,.56) 40%,
        rgba(216,56,92,.24) 74%, rgba(216,56,92,0) 100%),
      radial-gradient(30% 12% at 82% 88%,
        rgba(216,56,92,.55) 0%,  rgba(216,56,92,.42) 45%,
        rgba(216,56,92,0) 100%),
      var(--ink);
  }
}