@media (max-width:1440px){.nb-shell{max-width:calc(100% - 3rem)}}

@media (max-width:1024px){
  /* El hero se apila (la oferta arriba a lo ancho, los dos tiles en fila) y las
     rejillas pierden columnas. `grid-template-rows:none` apaga las dos filas de
     escritorio: con dos tiles en dos columnas sobraria una fila vacia con su gap. */
  .nb-hero{grid-template-columns:1fr}
  .nb-side{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .nb-catgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .nb-pasos{grid-template-columns:1fr 1fr}
  .nb-pasos>div:first-child{grid-column:1/-1}
  .nb-grid5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nb-foot{grid-template-columns:1fr 1fr}
  .nb-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nb-product-detail__layout{grid-template-columns:1fr}
}

@media (max-width:768px){
  /* Cabecera: logo y botones arriba, buscador debajo a lo ancho, y la barra de
     categorias escondida hasta tocar «Menu» (navigation.js pone `hidden`). */
  /* Logo + WhatsApp + Carrito + Menu caben en una linea a 390px solo si los
     botones se aprietan; si no, los botones saltaban a una segunda fila y el
     logo quedaba solo. El padding vertical reemplaza al `min-height` de escritorio. */
  .nb-header-row{flex-wrap:wrap;gap:.5rem .5rem;row-gap:.5rem;min-height:0;padding-block:.6rem}
  .nb-header-acts{gap:0}
  .nb-logo__marca{height:24px}
  .nb-site-footer .nb-logo__marca{height:28px}
  .nb-iconbtn{padding:0 .35rem;font-size:.88rem}
  .nb-product-search{order:3;flex-basis:100%;max-width:none}
  .nb-iconbtn.nb-menu-toggle{display:inline-flex}
  .nb-cats ul{flex-direction:column;align-items:stretch}
  .nb-cats__all{margin-left:0}
  /* Hero: la foto de estudio deja de ser fondo y pasa arriba del texto, en su
     propia caja redondeada; sin la mascara (ya no hay texto debajo que despejar). */
  .nb-promo{grid-template-columns:1fr;padding:1.5rem;min-height:0}
  .nb-promo__foto{position:static;height:auto;aspect-ratio:3/2;order:-1;border-radius:var(--nb-radius-md);-webkit-mask-image:none;mask-image:none}
  .nb-promo__img,.nb-promo__placa{justify-self:center;order:-1}
  .nb-side{grid-template-columns:1fr}
  /* La foto del tile ocupa ~44% del ancho: el texto no puede pasar de ahi o
     queda tapado por el producto. */
  .nb-tile h3,.nb-tile p{max-width:min(22ch,56%)}
  .nb-catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nb-grid5{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .nb-card{padding:.75rem}
  .nb-card__media{height:7.5rem}
  .nb-card__media img{max-height:6.8rem}
  .nb-pasos{grid-template-columns:1fr;padding:1.5rem}
  .nb-filas{grid-template-columns:1fr}
  .nb-foot{grid-template-columns:1fr}
  .nb-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nb-product-card__media{height:9.5rem;padding:.8rem}
  .nb-product-card__media img{max-height:7.9rem}
}

@media (max-width:375px){
  /* A 360px el logo y los botones aprietan un poco mas para seguir en una linea. */
  .nb-logo__marca{height:22px}
  .nb-iconbtn{padding:0 .25rem;font-size:.82rem}
  .nb-product-grid{gap:.75rem}
  .nb-product-card__media{height:8rem}
  .nb-product-card__media img{max-height:6.4rem}
}