/* Header del sitio: sin botón de WhatsApp y con efecto vidrio (estilo Apple) sobre el azul de marca.
   Se carga después de /_next/static/css/index.*.css. /assets/ tiene cache de 1 hora. */

/* body{overflow-x:hidden} del CSS base anula position:sticky; clip recorta igual sin crear contenedor de scroll. */
body{overflow-x:clip}

.site-header .header-cta{display:none}

.site-header{
  min-height:64px;
  padding-top:8px;
  padding-bottom:8px;
  background:rgba(8,23,43,.9);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 32px -20px rgba(0,0,0,.5);
}
.site-nav a{transition:color .2s ease}

.mega__panel{
  background:rgba(8,23,43,.94);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  backdrop-filter:saturate(180%) blur(24px);
  border-color:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 60px -24px rgba(0,0,0,.55);
}

/* Mega menú abierto por toque (header-menu.js): pantallas táctiles con diseño de escritorio. */
.mega.is-open .mega__panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%) translateY(0)}
.mega.is-open .mega__trigger:after{content:"-"}

/* Móvil: el panel baja debajo del header, a lo ancho, con la lista de productos en una columna. */
@media (max-width:820px){
  .site-header .mega.is-open .mega__panel{
    display:grid;
    position:absolute;
    top:100%;
    left:12px;
    right:12px;
    width:auto;
    margin-top:6px;
    transform:none;
    grid-template-columns:1fr;
    gap:0;
    padding:10px;
    max-height:calc(100vh - 150px);
    max-height:calc(100dvh - 150px);
    overflow-y:auto;
    overscroll-behavior:contain;
    border-radius:14px;
    /* Dentro del header el blur no alcanza el contenido de la página: panel sólido para que no se transparente. */
    background:#08172b;
  }
  .site-header .mega.is-open .mega__intro{display:none}
  .site-header .mega.is-open .mega__list{grid-template-columns:1fr;gap:4px}
  .site-header .mega.is-open .mega__list a{min-height:54px;padding:8px 12px;justify-content:start;text-align:left}
  /* El "+/-" sigue el estado real del panel, no el foco que queda en el enlace. */
  .site-header .mega:not(.is-open) .mega__trigger:after{content:"+"}
}

/* Pie universal: en móvil los cuatro enlaces pasan a dos columnas, con área de toque cómoda. */
@media (max-width:760px){
  .site-footer .footer-links{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px 18px;
    width:100%;
    max-width:300px;
    margin:0 auto;
    justify-items:center;
  }
  .site-footer .footer-links a{min-height:44px;display:inline-flex;align-items:center}
}

/* Navegadores sin backdrop-filter: el azul original casi opaco. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{background:rgba(8,23,43,.96)}
  .mega__panel{background:rgba(8,23,43,.98)}
}