/* ============================================================
   SUPRA CASES — Header, mega menu, buscador
   Extraido de supra-cases-v3.html lineas 112-187
   ============================================================ */

/* ============ HEADER ============ */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--linea)}
.hdr-in{height:var(--h-header);display:flex;align-items:center;gap:14px}
.logo img{height:27px;width:auto;display:block}
.logo{flex:none;display:flex;align-items:center}

.nav{display:flex;align-items:center;gap:0;height:100%;flex:1;min-width:0;margin:0;padding:0;flex-wrap:nowrap}
.nav>li{list-style:none;height:100%;display:flex;align-items:center}
.nav a,.nav button{display:flex;align-items:center;gap:4px;height:100%;padding:0 7px;
  font-size:11.5px;font-weight:700;color:var(--negro);transition:color var(--t);
  text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;
  border-bottom:3px solid transparent;margin-bottom:-1px}
.nav a:hover,.nav button:hover{color:var(--amarillo-osc)}
.nav .on{color:var(--negro)}
.nav .on{border-bottom-color:var(--amarillo)}
.nav svg{width:11px;height:11px;opacity:.6}

.hdr-acc{display:flex;align-items:center;gap:4px;flex:none;margin-left:auto}
.icobtn{width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r);
  transition:background var(--t);position:relative}
.icobtn:hover{background:var(--humo)}
.icobtn svg{width:20px;height:20px}
.inicial{width:30px;height:30px;border-radius:50%;background:var(--negro);color:var(--amarillo);
  display:grid;place-items:center;font-size:12px;font-weight:800;letter-spacing:-.02em}
.badge{position:absolute;top:4px;right:3px;min-width:18px;height:18px;padding:0 4px;
  background:var(--amarillo);color:var(--negro);font-size:11px;font-weight:800;
  border-radius:9px;display:grid;place-items:center;border:2px solid #fff}

/* ============ MEGA MENÚ ============ */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--blanco);
  border-bottom:3px solid var(--amarillo);box-shadow:0 16px 34px -20px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t),transform var(--t),visibility var(--t);z-index:59}
.mega.abierto{opacity:1;visibility:visible;transform:none}
.mega-in{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)) 260px;gap:26px;
  padding:26px 20px 30px;max-width:var(--max);margin:0 auto}
.mega h4{font-size:11.5px;font-weight:800;color:var(--texto-3);letter-spacing:.07em;
  text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.mega h4 i{width:9px;height:9px;border-radius:2px;flex:none}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.mega ul a{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:6px 8px;margin-left:-8px;border-radius:var(--r);font-size:14.5px;font-weight:500;
  transition:background var(--t)}
.mega ul a:hover{background:var(--humo)}
.mega ul a span{font-size:12px;color:var(--texto-3);font-weight:700}
/* La tarjeta va SIEMPRE en la ultima pista, la de 260px, la tenga o no el
   panel llena por delante. Sin esto la coloca el flujo automatico: el panel de
   "Fundas sublimables" tiene cuatro columnas y caia bien, pero el de "Insumos"
   (tres) y el de "No sublimables" (dos) la dejaban en una pista de 1fr, a
   media anchura y a media pagina, con el hueco a la derecha. La tarjeta queda
   siempre pegada al margen derecho y las columnas de contenido (--cols, que
   pone inc/mega-menu.php) reparten el resto del ancho. */
.mega-side{grid-column:-2/-1;background:var(--negro);color:#fff;border-radius:var(--r-g);padding:20px}
.mega-side p{font-size:13.5px;color:#A9A9B2;margin:0 0 14px}
.mega-side h4{color:var(--amarillo);font-size:15px;text-transform:uppercase;font-style:italic;
  letter-spacing:0;margin-bottom:6px}

/* ============ BUSCADOR ============ */
.busq-capa{position:fixed;inset:0;background:rgba(14,14,14,.5);z-index:80;display:none}
.busq-capa.abierto{display:block}
.busq-caja{max-width:680px;margin:7vh auto 0;background:var(--blanco);border-radius:var(--r-g);
  overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.busq-top{display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--linea)}
.busq-top svg{width:20px;height:20px;color:var(--texto-3);flex:none}
.busq-top input{flex:1;height:60px;border:none;outline:none;font-size:17px;font-weight:500;background:none}
.busq-res{max-height:58vh;overflow:auto;padding:6px;overscroll-behavior:contain}
.busq-grupo{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--texto-3);padding:12px 10px 6px}
.busq-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--r);
  width:100%;text-align:left;transition:background var(--t)}
.busq-item:hover,.busq-item.sel{background:var(--humo)}
.busq-item .bt{font-weight:700;font-size:14.5px;line-height:1.25}
.busq-item .bs{font-size:12.5px;color:var(--texto-2)}
.busq-item .bp{margin-left:auto;font-weight:800;font-size:13.5px;flex:none;color:var(--texto-2)}
/* La columna del medio es la unica que puede encoger: sin min-width:0 el
   texto largo de un producto estira la fila y empuja el precio fuera. */
.busq-txt{min-width:0;flex:1}
.busq-item .bt,.busq-item .bs{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ico-modelo{background:var(--negro)}
.busq-vacio-t{font-weight:700;color:var(--texto);font-size:16px;margin-bottom:6px}
.busq-vacio .btn{margin-top:16px}
/* La salida a la busqueda normal de Woo cierra la lista: se separa con una
   linea y pesa menos que un resultado, que es lo que es. */
.busq-item[data-enviar]{margin-top:6px;border-top:1px solid var(--linea);border-radius:0 0 var(--r) var(--r)}
.busq-item[data-enviar] .bt{font-weight:600;color:var(--texto-2)}
.ico-cuadro{width:40px;height:40px;border-radius:5px;flex:none;display:grid;place-items:center;
  font-size:11px;font-weight:800;font-style:italic;color:#fff;letter-spacing:-.02em}
.busq-vacio{margin:0;padding:36px 16px;text-align:center;color:var(--texto-2);font-size:14.5px}
.busq-pie{border-top:1px solid var(--linea);padding:10px 16px;font-size:12px;color:var(--texto-3);
  display:flex;gap:16px}
kbd{font:inherit;font-size:11px;font-weight:700;border:1px solid var(--linea);
  border-bottom-width:2px;border-radius:3px;padding:1px 5px;background:var(--humo)}


/* ============================================================
   AJUSTES DEL PORTE A WORDPRESS
   No vienen del prototipo: alli estos estados se resolvian con
   style="display:none" en el HTML y un listener de resize en JS.
   Expresarlos en CSS evita el parpadeo al cargar y quita la
   dependencia de JavaScript.
   ============================================================ */

/* El boton de hamburguesa es solo de movil. Se muestra en 06-responsive.css
   a partir de 940px hacia abajo. */
#btnMenu{display:none}

/* La barra no debe desbordarse por encima de los iconos de la derecha.
   Con flex-wrap:nowrap y min-width:0, los elementos que no caben se salen
   del contenedor y se encabalgan con .hdr-acc; recortarlos es preferible. */
.nav{overflow:hidden}
.hdr-acc{flex:none}