/* =================================================================
   Cabecera de Savi Safety — portada de `savisafety-design-v3-3` (11/09/2026)

   Hoja SUSTITUIDA, no corregida: el bloque HEADER de `styles.css` de v3 con
   sus clases traducidas a `jri-`. Valores en px (Bricks pone la raíz a 10 px y
   todo `rem` saldría al 62,5 %). Los tokens (`--c-*`, `--space-*`…) están en
   `base.css`, dentro del ámbito de las piezas portadas.

   Medidas de la referencia: avisos 40 px · fila del logo 86 px · barra 50 px ·
   logo 250×59 · buscador 620 × 40 · «Por categoría» 1280×306 (4 columnas de
   300) · «Por industria» 680×341 (2 de 300) · «Por marca» a ancho completo, con
   su cabecera y 12 tarjetas de 220×128 (el logo, dentro, no pasa de 172×80).
   ================================================================= */

.jri-site-header {
  /* `sticky` aquí no pega la barra cuando la monta Bricks: el padre
     (`#brx-header`) mide lo mismo y no hay recorrido. La pega el ajuste
     nativo de la plantilla de cabecera. Se deja por si el shortcode se usa
     fuera de Bricks. */
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-blanco);
}

/* fila 1 — avisos en marquesina, CSS puro */
.jri-avisos {
  background: var(--c-amarillo);
  color: var(--c-negro);
  height: 40px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.jri-avisos__pista {
  display: flex;
  gap: var(--space-9);
  white-space: nowrap;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: 1px;
  text-transform: uppercase;
  animation: jri-marquesina 40s linear infinite;
}
.jri-avisos__pista > span { flex: none; }
@keyframes jri-marquesina { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .jri-avisos__pista { animation: none; overflow-x: auto; }
}

/* fila 2 — logo, buscador, herramientas */
.jri-header-main { border-bottom: var(--border) solid var(--c-borde); }
.jri-header-main__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 86px;
}
.jri-logo { flex: none; }
.jri-logo img { width: 250px; height: 59px; object-fit: contain; }

.jri-buscador { flex: 1; display: flex; max-width: 620px; margin: 0; }
.jri-buscador input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0 var(--space-4);
  background: var(--c-blanco);
  border: var(--border) solid var(--c-borde-input);
  border-right: 0;
  border-radius: var(--radius-input) 0 0 var(--radius-input);
  font-size: var(--fs-body);
  box-shadow: none;
}
.jri-buscador button {
  width: 52px;
  display: grid;
  place-items: center;
  background: var(--c-texto-2);
  color: var(--c-blanco);
  border: 0;
  border-radius: 0 2px 2px 0;
  cursor: pointer;
  transition: background-color var(--t-base);
}
.jri-buscador button:hover { background: var(--c-negro); }

/* FiboSearch con las medidas del formulario propio: campo blanco de 40 px con
   borde y el botón gris oscuro de 52 px pegado a la derecha. Su estilo
   «solaris» ya tiene esa forma; se le quitan la flecha del botón y la sombra
   del foco y se igualan medidas y colores. Las reglas del plugin pesan (0,3,1)
   y (0,4,1) en `:focus`; estas empiezan por `.jri-site-header
   .jri-buscador--fibo` para ganarles sin `!important`. */
.jri-buscador--fibo .dgwt-wcas-search-wrapp {
  min-width: 0;
  width: 100%;
  max-width: none;
  margin: 0;
}

.jri-site-header .jri-buscador--fibo .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
  height: 40px;
  padding: 0 92px 0 var(--space-4);
  background: var(--c-blanco);
  border: var(--border) solid var(--c-borde-input);
  border-radius: var(--radius-input);
  box-shadow: none;
  color: var(--c-texto-2);
  font-size: var(--fs-body);
  font-family: inherit;
}

.jri-site-header .jri-buscador--fibo .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::placeholder {
  color: var(--c-mute);
  font-style: normal;
}

.jri-site-header .jri-buscador--fibo .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
  width: 52px;
  min-width: 52px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  background: var(--c-texto-2);
  color: var(--c-blanco);
  border-radius: 0 2px 2px 0;
  opacity: 1;
}

.jri-site-header .jri-buscador--fibo .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:hover { background: var(--c-negro); }

/* La flecha que apunta al campo es un triángulo de bordes pegado al botón. */
.jri-site-header .jri-buscador--fibo .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit::before { display: none; }

/* 14 px: el icono de FiboSearch es macizo y llena su caja; el propio era un trazo fino
   de 18 px con aire alrededor. Medido sobre capturas a 1440 y 390. */
.jri-site-header .jri-buscador--fibo .dgwt-wcas-search-submit svg { position: static; width: 14px; height: 14px; }

/* Las sugerencias cuelgan del `<body>`, fuera de la cabecera: solo la letra. */
.dgwt-wcas-suggestions-wrapp { font-family: inherit; }

.jri-header-tools { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.jri-header-tools a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 10px;
  height: 40px;
  font-size: var(--fs-body);
  white-space: nowrap;
  transition: color var(--t-base);
}
.jri-header-tools a:hover { color: var(--c-mute); }
.jri-cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  background: var(--c-amarillo);
  color: var(--c-negro);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* fila 3 — navegación */
.jri-nav-principal { background: var(--c-negro); color: var(--c-blanco); }
.jri-nav-principal__inner { position: relative; display: flex; align-items: center; min-height: 50px; }
.jri-nav-lista { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.jri-nav-lista a {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 50px;
  font-size: var(--fs-nav);
  text-transform: uppercase;
  transition: color var(--t-base);
}
.jri-nav-lista a:hover { color: var(--c-amarillo); }
.jri-nav-lista--secundario { margin-left: auto; }

/* Megamenú sin JS: hover + focus-within. Anclado al contenedor, no al <li>,
   para que nunca desborde el ancho de la página. */
.jri-tiene-menu { position: static; }
.jri-megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  background: var(--c-blanco);
  color: var(--c-texto);
  box-shadow: var(--shadow-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-panel), transform var(--t-panel), visibility var(--t-panel);
}
.jri-tiene-menu:hover .jri-megamenu,
.jri-tiene-menu:focus-within .jri-megamenu { opacity: 1; visibility: visible; transform: none; }

/* Los dos megamenús de listas */
.jri-megamenu--sized {
  display: grid;
  gap: 0 60px;
  padding: 30px 35px 0;
  grid-template-columns: repeat(var(--cols), 300px);
}
.jri-megamenu--4 { --cols: 4; width: 1280px; }
.jri-megamenu--2 { --cols: 2; width: 680px; }
.jri-megamenu--sized ul { padding-bottom: 30px; }
.jri-megamenu--sized a {
  display: block;
  height: auto;
  padding: 5px 0;
  font-size: 14px;
  line-height: 22.4px;
  font-weight: var(--fw-medium);
  color: var(--c-texto-link);
  text-transform: none;
  transition: color var(--t-base);
}
.jri-megamenu--sized a:hover { color: var(--c-mute); }

/* «Por marca»: título, enlace y rejilla de 12 logos a ancho completo.

   REMEDIDO en savisafety.com el 14/09/2026 a 1502 px, abriendo el panel con un
   `mouseMoved` real sobre la pestaña (con una clase inyectada no se reproduce).
   Lo que decía esta hoja antes describía la rejilla pero no el panel:

   - panel de y=176 a y=543 → 30 px de aire arriba y 25 abajo;
   - «Marcas destacadas» h3 22/30,8 peso 600 #242424, y a la derecha
     «Ver todas las marcas» 14/22,4 peso 500 #333 con un filete de 1 px #777;
     15 px entre esa fila y los logos;
   - banda a 45 px del borde: 15 más que la barra de navegación, que va a 30;
   - 6 columnas con 10 px de hueco, tarjeta de 220×128 con marco blanco de 4 px
     y el interior (212×120) en rgb(243,245,247);
   - **la imagen NO llena la tarjeta**: mide 212×120 con `padding: 20px`, así que
     el logo se dibuja como mucho en 172×80. Sin ese relleno —que es lo que había—
     los logos ocupaban 209×120: casi el doble de superficie, que es justo lo que
     se veía «bastante grande».

   El gris no es un fondo: es el mismo velo `rgb(137 155 172 / 10%)` ENCIMA de la
   imagen que llevan las tarjetas de producto (`tarjeta.css`). Se comprueba en el
   píxel: el azul de Ansell sale (14,82,162) y no (0,80,170) — el velo le sube el
   rojo—, y los logos JPG con fondo blanco horneado no dejan ningún rectángulo
   blanco sobre el gris. Un fondo gris debajo no daría ninguna de las dos cosas. */
.jri-megamenu--marcas { left: 0; right: 0; width: auto; padding: 30px 0 25px; }
.jri-megamenu__marcas-pista {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  /* 15 px más que la barra: el sitio mete la banda del panel dentro del contenedor. */
  padding-inline: calc(var(--pad-x) + 15px);
}
.jri-megamenu__marcas-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 15px;
}
.jri-megamenu--marcas .jri-megamenu__marcas-titulo {
  font-size: 22px;
  font-weight: var(--fw-semibold);
  color: var(--c-texto-card);
}
/* `.jri-nav-lista a` (0,1,1) alcanza a este enlace: le pone 50 px de alto, flex y
   mayúsculas, y su `:hover` lo pinta de amarillo. Se neutraliza con dos clases. */
.jri-megamenu--marcas .jri-megamenu__marcas-todas {
  display: inline;
  height: auto;
  font-size: 14px;
  font-weight: var(--fw-medium);
  text-transform: none;
  color: var(--c-texto-2);
  border-bottom: 1px solid var(--c-mute);
}
.jri-megamenu--marcas .jri-megamenu__marcas-todas:hover {
  color: var(--c-texto-card);
  border-bottom-color: var(--c-texto-card);
}
.jri-megamenu__marcas-rejilla {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
/* `.jri-nav-lista a` fuerza 50 px de alto y flex: aquí se neutraliza. */
.jri-megamenu--marcas .jri-marca-item {
  position: relative;
  display: block;
  height: auto;
  padding: 0;
  border: 4px solid var(--c-blanco);
  background: var(--c-blanco);
}
/* El velo, encima de la imagen y sin comerse el clic. */
.jri-megamenu--marcas .jri-marca-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(137 155 172 / 10%);
  pointer-events: none;
}
.jri-megamenu--marcas .jri-marca-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 212 / 120;
  /* 20 px sobre una tarjeta de 212 → 9,43 %. En porcentaje y no en píxeles para que
     el aire se mantenga en proporción cuando la rejilla baja a 4 y a 3 columnas: a
     3 columnas en un móvil, 20 px fijos dejarían el logo en una franja de 66 px. */
  padding: 9.43%;
  object-fit: contain;
}
@media (max-width: 1280px) {
  .jri-megamenu--4 { width: min(1280px, 100vw - 2 * var(--pad-x)); }
  .jri-megamenu__marcas-rejilla { grid-template-columns: repeat(4, 1fr); }
  .jri-megamenu__marcas-pista { padding-inline: var(--pad-x); }
}

/* móvil */
.jri-hamburguesa {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.jri-hamburguesa span { display: block; height: 2px; background: currentColor; margin: 5px 0; }

@media (max-width: 1024px) {
  .jri-hamburguesa { display: block; }
  .jri-header-main__inner { gap: var(--space-2); min-height: 64px; flex-wrap: wrap; }
  .jri-logo img { width: 200px; height: 44px; }
  .jri-buscador { order: 3; flex-basis: 100%; max-width: none; margin-bottom: var(--space-3); }

  /* En el sitio, en móvil la fila queda en hamburguesa + logo + carrito
     (`layout.md` de v3). La captura móvil de v3 enseña además «Sigue tu
     pedido» e «Ingresar» apretados junto al logo: es un defecto de la
     reconstrucción, no del sitio. La cuenta sigue a mano en el panel. */
  /* Con el padre delante: `.jri-header-tools a { display: flex }` (0,1,1) le
     ganaba a la clase sola (0,1,0) y en móvil seguía saliendo «Ingresar». */
  .jri-header-tools .jri-header-tools__texto { display: none; }
  .jri-header-tools .jri-cart-total { display: none; }

  .jri-nav-principal { display: none; }
  .jri-nav-principal.esta-abierto {
    display: block;
    position: fixed;
    /* Ancho completo, como el panel de savisafety.com (medido a 390 px el 11/09/2026).
       Con el velo tapado, el cierre lo lleva el botón de `.jri-nav-panel-cab`. */
    inset: 0;
    z-index: 80;
    overflow: auto;
    padding: 0 0 var(--space-6);
  }
  .jri-nav-principal.esta-abierto .jri-nav-lista > li > a,
  .jri-nav-principal.esta-abierto .jri-nav-lista--cuenta a {
    padding-inline: var(--pad-x);
    border-bottom: 1px solid rgb(255 255 255 / 12%);
  }
  .jri-nav-principal.esta-abierto .jri-nav-panel-cab { display: flex; }
  .jri-nav-principal.esta-abierto .jri-megamenu { padding-left: calc(var(--pad-x) + 14px); }
  .jri-nav-principal.esta-abierto .jri-nav-principal__inner { display: block; padding-inline: 0; }
  .jri-nav-principal.esta-abierto .jri-nav-lista { flex-direction: column; gap: 0; }
  .jri-nav-principal.esta-abierto .jri-nav-lista a { height: 48px; font-weight: var(--fw-semibold); letter-spacing: 1px; }
  .jri-nav-principal.esta-abierto .jri-nav-lista--secundario { margin-left: 0; }

  /* v3 abre el submenú con `style.display`; aquí con una clase, para no dejar
     estilos en línea colgados al volver a escritorio. */
  .jri-megamenu {
    position: static;
    width: auto;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    background: transparent;
    color: inherit;
    box-shadow: none;
    padding: 0 0 var(--space-4) var(--space-4);
  }
  .jri-tiene-menu.esta-desplegado > .jri-megamenu { display: block; }
  .jri-megamenu--sized { grid-template-columns: 1fr; gap: 0; width: auto; }
  .jri-tiene-menu.esta-desplegado > .jri-megamenu--sized { display: grid; }
  .jri-megamenu--sized ul { padding-bottom: var(--space-3); }
  .jri-megamenu--sized a { color: inherit; }
  /* El panel abierto ya sangra 34 px por la izquierda (`padding-left` de `.jri-megamenu`),
     pero no deja nada a la derecha: las tres columnas sumaban justo el ancho restante y la
     tercera tarjeta —y el final de «Ver todas las marcas»— quedaban cortadas contra el borde.
     El margen derecho es el de la web en móvil (`--pad-x`, 20 px). */
  .jri-megamenu__marcas-pista { padding-inline: 0 var(--pad-x); max-width: none; }
  .jri-megamenu__marcas-rejilla { grid-template-columns: repeat(3, 1fr); }
  /* Aquí el panel es la barra negra: el título en #242424 y el enlace en #333 no se
     leerían. Heredan el blanco del panel, y el filete baja a un blanco al 40 %. */
  /* A 390 px no caben en la misma línea: «Marcas destacadas» y «Ver todas las marcas»
     se partían los dos en dos líneas. Apilados, cada uno ocupa la suya. */
  .jri-megamenu__marcas-cab {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 12px;
  }
  .jri-megamenu--marcas .jri-megamenu__marcas-titulo { font-size: 16px; color: inherit; }
  .jri-megamenu--marcas .jri-megamenu__marcas-todas,
  .jri-megamenu--marcas .jri-megamenu__marcas-todas:hover {
    color: inherit;
    border-bottom-color: rgb(255 255 255 / 40%);
  }
  .jri-megamenu--marcas .jri-marca-item { border-width: 2px; }
}

/* Cabecera del panel móvil: logo a la izquierda y cierre a la derecha. Fuera del panel no
   existe, así que se oculta siempre y la consulta de móvil la enseña al abrirlo. */
.jri-nav-panel-cab {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px var(--pad-x);
  border-bottom: 1px solid rgb(255 255 255 / 12%);
}
.jri-nav-panel-cab__logo img { width: 160px; height: auto; }
.jri-nav-cerrar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.jri-nav-lista--cuenta { display: none; }
.jri-nav-principal.esta-abierto .jri-nav-lista--cuenta { display: block; }
.jri-nav-lista--cuenta a { display: flex; align-items: center; gap: 10px; height: 48px; font-weight: var(--fw-semibold); letter-spacing: 1px; color: inherit; text-decoration: none; text-transform: uppercase; font-size: 13px; }

/* Fuera de móvil solo se pinta el logo normal; si no hay logo de móvil, el normal vale para
   los dos: la consulta de abajo no encuentra `--escritorio` y no esconde nada. Va ANTES que
   la consulta de medios: con la misma especificidad gana la última, y puesta después dejaba
   el logo claro oculto también en móvil. */
.jri-logo .jri-logo__img--movil { display: none; }

/* En móvil, la fila del logo de savisafety.com es NEGRA, no blanca: medido con
   `getComputedStyle` a 390 px el 11/09/2026 — `rgb(17,17,16)`, 55 px de alto, el logo en su
   versión clara (`Logo-White.png`, 200×44) y los iconos en blanco. v3 la dejó blanca, que es
   como se ve en escritorio; manda el sitio. El buscador va dentro de esa banda negra. */
@media (max-width: 767px) {
  .jri-header-main {
    background: var(--c-negro, #111110);
    color: #fff;
    padding-block: 8px 10px;
  }
  .jri-header-main__inner { min-height: 55px; row-gap: 10px; }
  /* El icono del sitio es más grueso y más ancho que el de v3: tres barras de 26×3. */
  .jri-header-main .jri-hamburguesa { width: 40px; color: #fff; }
  .jri-header-main .jri-hamburguesa span { width: 26px; height: 3px; margin: 6px 0; }
  .jri-header-main .jri-header-tools__carrito svg { width: 24px; height: 22px; }
  .jri-header-main .jri-header-tools a { color: #fff; }
  .jri-logo .jri-logo__img--escritorio { display: none; }
  .jri-logo .jri-logo__img--movil { display: block; }
  .jri-buscador { margin-bottom: 0; }
}


/* El velo lo crea `header.js` al abrir el panel. Va fuera del `<header>`
   (colgado del `<body>`), así que no hereda nada del ámbito de la cabecera. */
.jri-nav-velo {
  position: fixed;
  inset: 0;
  z-index: 70;
  padding: 0;
  background: rgba(0, 0, 0, .7);
  border: 0;
  cursor: pointer;
}