/* Encabezado en pantallas medianas y chicas (normal #hdr y mayorista #hdrM). Va después de todos los demás estilos del encabezado.
   >= 1250 px: sin cambios (animación de compresión por JS, ver motorCab en app.js).
   900 a 1249 px: misma compresión, pero con etiquetas ocultas y anchos flexibles para que nada se pise ni se salga.
   < 900 px: dos filas fijas (fila 1: logo, buscador, cuenta y carrito; fila 2: menú que se desliza) y la fila del menú se oculta al bajar. */

/* ---------- 900 a 1249 px ---------- */
@media (min-width:900px) and (max-width:1249.98px){
  .acc .txt,.m-cta .txt,.m-pedido .mtxt{display:none}
  .acc{padding:8px 10px}
  /* el ancho en % permite que la columna del buscador se achique (un ancho fijo en px la obligaba a quedar de 640 px) */
  .buscador,.m-busq{min-width:0;max-width:100%}
  .buscador{width:min(100%,calc((var(--bw0) + var(--p)*(var(--bw1) - var(--bw0)))*1px))}
  .m-busq{width:min(100%,calc((var(--bw0) + var(--p)*(var(--bw1) - var(--bw0)))*1px))}
  #hdr.medir-e .buscador{width:min(100%,640px)}
  #hdrM.medir-e .m-busq{width:min(100%,540px)}
  #hdr.medir-c .buscador{width:min(100%,clamp(140px,calc(100vw - 760px),300px))}
  #hdrM.medir-c .m-busq{width:min(100%,clamp(150px,calc(100vw - 800px),260px))}
  nav.menu>a,nav.menu>button{padding:8px 10px}
  .m-nav-int>a{padding:0 10px}
  .m-der-top{gap:8px}
  #hdrM.medir-c .m-nav-int>a svg,#hdrM.compacto .m-nav-int>a svg{display:none}
}

/* ---------- menos de 900 px: dos filas fijas ---------- */
.m-estilo-chip{display:none}
@media (max-width:899.98px){
  #cab,#cabM{height:120px}
  #hdr,#hdrM{height:auto!important;--p:0!important;--pl:0!important;transition:none!important;box-shadow:0 2px 10px rgba(0,0,0,.12)}
  #hdr{--u0:.236px;--du:0px}
  #hdrM{--u0:.236px;--du:0px}
  .cab-asa{display:none!important}
  #hdrM::before{display:none}

  /* fila 1 + fila 2 */
  .cab-grid,.m-cab{height:auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;row-gap:2px;padding:8px 16px 0;align-items:center}
  .cab-grid{grid-template-areas:"logo busq acc" "nav nav nav"}
  .m-cab{grid-template-areas:"logo busq der" "nav nav nav"}
  .logo{width:auto;height:auto;transform:none}
  .buscador,.m-busq{width:100%!important;max-width:none;min-width:0;justify-self:stretch;transform:none}
  .buscador{padding:8px 14px}
  .m-busq{height:40px}
  .m-busq button{padding:0 14px}
  .acciones,.m-der-top{transform:none;gap:2px}
  .acc .txt,.m-cta .txt,.m-pedido .mtxt{display:none}
  .acc{padding:8px}
  .m-estilo{display:none}
  .m-pedido{gap:0}

  /* menú: tira con deslizamiento horizontal */
  nav.menu,.m-nav-int{width:100%;max-width:100%;justify-self:stretch;transform:none;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:4px 0 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-height:64px;opacity:1;transition:max-height .25s ease,padding .25s ease,opacity .2s ease}
  nav.menu::-webkit-scrollbar,.m-nav-int::-webkit-scrollbar{display:none}
  nav.menu>a,nav.menu>button,.m-nav-int>a,.m-estilo-chip{flex:none;white-space:nowrap}
  nav.menu>a,nav.menu>button{padding:8px 14px;border-radius:18px;background:#F2F3F5;font-size:14px}
  nav.menu a.activo{background:var(--rojo)}
  .m-nav-int>a,.m-estilo-chip{height:38px;padding:0 14px;border-radius:18px;background:#F2F3F5;font-size:14px;display:flex;align-items:center;gap:8px}
  .m-estilo-chip{border:1px solid #C5D0EA;color:var(--azul);background:#fff}
  .m-catbtn-wrap{flex:none;margin-right:0}
  .m-catbtn{width:auto;height:38px;padding:0 14px;border-radius:18px}
  .m-catlista{position:fixed;left:10px;right:10px;width:auto;top:auto;max-height:55vh}
  .cab-sin-menu nav.menu,.cab-sin-menu .m-nav-int{max-height:0;padding-top:0;padding-bottom:0;opacity:0;pointer-events:none}

  /* paneles que se despliegan (Inicio / Categorías) */
  #listaCat{column-count:2}
  #pnlInicio a{min-width:0;width:auto}
}

/* ---------- menos de 600 px: solo el personaje en la fila 1 ---------- */
@media (max-width:599.98px){
  #hdr,#hdrM{--u0:.3px}
  .logo-caja{--pl:1}
  .cab-grid,.m-cab{column-gap:8px}
  .m-busq button{display:none}
  .m-busq input{padding:0 12px 0 4px}
  #listaCat{column-count:1}
  .m-estilo-chip{display:flex}
}
@media (min-width:600px) and (max-width:899.98px){
  .m-estilo-chip{display:flex}
}

/* Opcion «Todas» del menu Categorias */
#listaCat a.cat-todas{font-weight:700;color:var(--azul)}