/* =================================================================
   JRI Core — base
   Tokens y primitivas compartidas por todas las secciones.
   Se encola una sola vez y solo si hay al menos una sección en la página.

   No incluye reset de elementos (img, a, ul, button…) a propósito: eso lo
   aporta el tema. Meterlo aquí pelearía con Bricks y con WooCommerce.
   ================================================================= */

/* -----------------------------------------------------------------
   Montserrat autoalojada (fuente variable 400–900, un solo fichero
   por subconjunto). Antes la servía Divi desde Google Fonts; al quitar
   Divi la tipografía caía a la del sistema.

   Autoalojada evita la petición a un tercero, quita el retraso de
   resolución DNS + TLS contra fonts.gstatic.com y no envía la IP del
   visitante a Google.

   `latin` (38 KB) cubre todo el español. `latin-ext` (71 KB) solo se
   descarga si en la página aparece un carácter de su rango, así que
   declararlo no cuesta nada.
   ----------------------------------------------------------------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------------- Marca Savi Safety ----------------
     Amarillo y negro. Es la única de las cuatro webs cuyo acento coincide con
     el del sistema original de JR Implementos, así que aquí los alias de abajo
     apenas hacen trabajo: apuntan al color de verdad.

     EL SITIO ACTUAL USA TRES AMARILLOS CASI IDÉNTICOS y no es intencionado:
     #F5EC08 en el fondo de «Línea económica», #F4EC09 en los botones de ficha
     técnica y en el de Culqi, y #F7EC00 suelto. Se unifica en **#F4EC09**, que
     es el que llevan los botones y el que hereda del tema. Los tres dan el
     mismo contraste (15,2:1 con el negro de marca), así que la elección es de
     coherencia, no de accesibilidad. */
  /* #F5EC08 desde el 11/09/2026: es el que unifica `savisafety-design-v3-3`
     (`--c-amarillo`), medido en la marquesina y en «Línea económica». Antes era
     #F4EC09, el de los botones; la diferencia no se ve, pero dos valores del
     mismo token acaban conviviendo. */
  --brand-yellow-base: var(--c-amarillo);
  /* `--near-black` NO se define aquí: es un neutro y su sitio es el bloque
     «Neutros oscuros», más abajo. Estuvo declarado en esta línea con el valor
     correcto (#111110) y **no servía de nada**, porque el bloque heredado de JRI
     lo volvía a declarar 43 líneas después con #0A0A0A y ganaba el último. La
     barra de navegación salió negra —parecía bien— pero con el negro equivocado.
     Dos declaraciones del mismo token en el mismo `:root` no dan ningún aviso. */

  /* Amarillo oscurecido **por contraste, no por gusto**. El amarillo de marca
     como LETRA sobre blanco da 1,25:1 —ilegible, ni de lejos el 4,5:1 de AA—.
     Este es el primer oscurecido del mismo tono que llega: 4,62:1.
     Se usa donde el amarillo es *letra* sobre fondo claro (hover de enlaces,
     foco); donde es *fondo*, va el de marca con texto negro encima. */
  --brand-yellow-dark: #7C7805;

  /* Sobre el negro de marca el amarillo va sobrado (15,2:1), así que el papel
     de «acento sobre fondo oscuro» lo hace el propio color, sin aclarar. */

  /* ---- Alias heredados de JR Implementos ----
     El sistema viene de JRI y esos tres nombres están escritos en decenas de
     reglas repartidas por 16 hojas. Reapuntarlos aquí rebrandea el sistema
     entero sin tocar ninguna de esas reglas, y se revierte cambiando tres
     líneas.

     `--brand-yellow` es el acento **de fondo**.
     `--brand-gold` es el acento **de letra**, y por eso apunta al oscurecido.
     `--brand-yellow-alt` es el acento **sobre fondo oscuro**. */
  --brand-yellow: var(--brand-yellow-base);
  --brand-gold: var(--brand-yellow-dark);
  --brand-yellow-alt: var(--brand-yellow-base);

  /* Fondo oscuro de marca. En JRI era el negro; aquí es el azul marino.
     Va aparte de `--near-black` a propósito: ese token se usa **90 veces como
     color de texto** y solo 15 como fondo, así que teñirlo habría puesto azul
     marino toda la letra del sitio.

     El trabajo de cazar esas superficies ya está hecho: viene del fork de
     Drigo, donde se hizo en dos pasadas. Contado sobre este fork (2026-08-25):
     **28** reglas con `background: var(--brand-dark)` y **ninguna** con
     `--near-black`, `--black`, `--dark-1` o `--dark-2` como fondo.

     Y la otra mitad de la regla también se sostiene: **0 reglas** usan
     `color: var(--brand-yellow)` —el acento nunca es letra— frente a 19 que
     usan `color: var(--brand-gold)`, que es el oscurecido y para eso está. */
  /* Superficie oscura de marca. En Savi Safety es el negro corporativo. */
  --brand-dark: var(--near-black);

  /* Neutros oscuros */
  --black: #000000;
  /* #111110, no el #0A0A0A que traía JRI: es el negro corporativo de Savi Safety,
     medido en el CSS del constructor de cabecera del sitio en vivo
     (`.whb-header-bottom { background-color: rgba(17,17,16,1) }`). Es también el
     fondo de la barra de navegación vía `--brand-dark`. */
  --near-black: #111110;
  --dark-1: #222222;
  --dark-2: #444444;

  /* Neutros claros */
  --white: #FFFFFF;
  --gray-50: #F1F1F3;
  --gray-100: #EEEEEE;
  --gray-150: #ECECEC;
  /* Gris **más oscuro que el fondo de tarjeta**, para el estado apagado de un
     selector sobre `--gray-100`. Medido en el Figma de testimonios. */
  --gray-300: #B4B4B4;

  /* Texto. `--text` es el rgb(38,38,38) de `--wd-text-color` del sitio en vivo,
     no el negro puro que traía JRI: es el color del cuerpo, de la marquesina, de
     los enlaces del pie y de los desplegables (v2: `--ss-text`). */
  --text: #262626;
  --text-muted: #808080;
  --text-muted-2: #666666;
  /* Precio anterior tachado en la tarjeta (v2: `--ss-muted-light`). */
  --text-muted-light: #BBBBBB;
  --text-on-dark: #D1D1D1;

  /* ---- Superficies y acentos de Savi Safety (de `savisafety-static-v2`) ----
     `--surface-alt` es el gris de las secciones «Amplio catálogo» y «Marcas»;
     `--tile` el fondo de la zona de imagen de la tarjeta de v2 (la referencia lo
     obtiene con un velo, ver `tarjeta.css`); `--sale` la etiqueta «−N %»;
     `--line` el filete de separación del pie y de las celdas de logos. */
  --surface-alt: #F1F3F5;
  --tile: #F5F5F5;
  --sale: #FD000D;
  --line: rgba(0, 0, 0, .1);

  /* Espaciado */
  /* Azul del icono informativo, medido sobre el Figma de la ficha. */
  --info-blue: #166BBB;

  --space-1: 5px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 27px;
  --space-7: 30px;
  --space-8: 40px;
  --space-9: 54px;

  /* Radios */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-pill: 25px;

  /* Sombras */
  --shadow-card: 0 2px 8px 0 rgba(0, 0, 0, .08);
  --shadow-glow-yellow: 0 1px 4px 0 var(--brand-yellow);

  /* Tipografía */
  --font: "Montserrat", Helvetica, Arial, Lucida, sans-serif;

  /* Layout */
  --container: 1400px;
  /* Alto de la cabecera completa: marquesina 40 + fila del logo 85 + barra 50.
     Lo usan los desplazamientos pegajosos del catálogo, los avisos y el total del
     carrito; en móvil baja a 145 (≤980) y 153 (≤767) — medidos, ver más abajo. */
  --header-h: 175px;
}

/* =================================================================
   Sistema de diseño de `savisafety-design-v3-3` (11/09/2026)

   Medido sobre savisafety.com con `getComputedStyle` (ver `tokens.json` del
   paquete). Es la especificación de todo lo que se porte desde esa fecha, y
   sus reglas se copian con sus propios nombres de token para no traducir a
   mano cada valor al portar.

   Tres tokens de v3 CHOCAN con los de JR Implementos que siguen usando las
   hojas aún sin portar: `--space-*` (v3: 4/8/12/16/24/32/40/56/80; JRI:
   5/8/10/16/20/27/30/40/54), `--container` (1600 frente a 1400) y
   `--shadow-card`. Redefinirlos en `:root` movería en silencio las páginas
   pendientes. Así que esos tres se redefinen **solo dentro de las piezas ya
   portadas** (la lista de `.jri-v3-ambito`, abajo). Cuando no quede ninguna
   hoja de JRI, pasan a `:root` y el bloque de alias heredados se borra.
   ================================================================= */
:root {
  /* color: marca */
  --c-amarillo: #F5EC08;          /* unifica #F5EC08 / #F4EC09 / #FEED00 del sitio */
  --c-amarillo-oscuro: #D9D107;

  /* color: neutros */
  --c-negro: #111110;             /* barra de navegación, texto fuerte */
  --c-negro-banda: #0A0A0A;       /* banda de título del blog */
  --c-boton: #212121;
  --c-boton-hover: #000000;
  --c-texto: #262626;
  --c-texto-2: #333333;
  --c-texto-card: #242424;
  /* v3 lo usa en los enlaces de los megamenús y NO lo define: sin esto se
     heredaba el color del padre. `tokens.json` los mide en #000000. */
  --c-texto-link: #000000;
  --c-mute: #777777;
  --c-tachado: #BBBBBB;
  --c-blanco: #FFFFFF;

  /* color: superficies y bordes */
  --c-superficie: #F1F3F5;
  --c-borde: #EFEFEF;
  --c-borde-input: #DDDDDD;
  --c-hairline: rgba(0, 0, 0, .106);
  --c-hairline-form: rgba(0, 0, 0, .1);

  /* color: estado */
  --c-oferta: #FD000D;
  --c-error: #E01020;
  --c-overlay: rgba(0, 0, 0, .7);
  --c-whatsapp: #25D366;

  /* tipografía */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --ls-base: .5px; --ls-boton: 1.25px; --ls-titulo: 1.5px;
  --fs-hero: clamp(32px, 19.2px + 4vw, 68px);
  --fs-h1: clamp(24px, 18.4px + 1.6vw, 34px);
  --fs-h2: clamp(20px, 16px + 1.2vw, 28px);
  --fs-h3: clamp(18px, 16px + .6vw, 22px);
  --fs-h4: 18px;
  --fs-h5: 16px;
  --fs-body: 14px;
  --fs-articulo: clamp(15px, 14.4px + .2vw, 15.4px);
  --fs-card: 14px;
  --fs-small: 12.6px;
  --fs-nav: 14px;
  --fs-boton: 12px;
  --lh-tight: 1.2; --lh-titulo: 1.4; --lh-base: 1.6;

  /* layout */
  --pad-x: 30px;
  --gutter: 30px;

  /* forma */
  --radius: 0px;
  --radius-input: 3px;
  --radius-full: 50%;
  --border: 1px;
  --shadow-dropdown: 0 0 3px 0 rgba(0, 0, 0, .15);
  --shadow-boton: inset 0 -2px 0 0 rgba(0, 0, 0, .15);
  --shadow-galeria: 0 0 5px 0 rgba(0, 0, 0, .08);

  /* movimiento: propiedades concretas, no `all` */
  --t-rapida: .15s ease-in-out;
  --t-base: .25s ease;
  --t-panel: .4s cubic-bezier(.2, .8, .2, 1);
}
@media (max-width: 1024px) {
  /* 20 px, no 15: es el margen lateral que mide savisafety.com a 390 px (11/09/2026). */
  :root { --pad-x: 20px; --gutter: 16px; }
}

/* Ámbito de las piezas portadas de v3: aquí dentro los tres tokens que chocan
   valen lo que dice v3. Al portar una pieza, se añade su raíz a esta lista. */
:is(.jri-site-header, .jri-site-footer, .jri-garantias, .jri-whatsapp) {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 56px; --space-9: 80px;
  --container: 1600px;
  --shadow-card: 0 0 9px 0 rgba(0, 0, 0, .1);

  /* El «body» de v3, que aquí no se puede imponer al documento entero. */
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  color: var(--c-texto);
}
:where(.jri-site-header, .jri-site-footer, .jri-garantias) :is(h1, h2, h3, h4, h5) {
  margin: 0;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-titulo);
}
:where(.jri-site-header, .jri-site-footer, .jri-garantias) :is(button, input, select, textarea) {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* El contenedor de v3: fluido hasta 1600 px con 30 px de margen (15 en móvil),
   en TODO el sitio — cabecera incluida. Resuelve la duda del 06/09 sobre si la
   cabecera iba a 1380 y el cuerpo a 1320: a 1440 px de ventana los dos dan
   1380, que es lo que se midió entonces; a 1502 v3 mide 1442. */
:is(.jri-site-header, .jri-site-footer, .jri-garantias) .jri-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* -----------------------------------------------------------------
   Reset ACOTADO a las secciones del plugin.

   El diseño estático traía un reset global (`body`, `ul`, `img`, `a`,
   `button`). Meterlo aquí pelearía con Bricks y con WooCommerce, así que
   se aplica solo dentro de los contenedores propios: las secciones se ven
   igual sin imponerle nada al resto del sitio.
   ----------------------------------------------------------------- */
/* Los contenedores raíz sí llevan especificidad normal. */
.jri-section,
.jri-site-header,
.jri-site-footer,
.jri-breadcrumb,
.jri-drawer,
.jri-wa-float {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--text);
}

/* Excepción al `:where()`: esta regla **necesita** especificidad real.
   Bricks da `label { margin-bottom: 5px }` en `frontend.min.css` (0,0,1), y
   varias piezas de la interfaz son `<label>` porque abren un panel con una
   casilla oculta: la hamburguesa, los botones de filtrar y ordenar, las aspas
   de cerrar y los fondos de los paneles. En un contenedor con
   `align-items: center` se centra la **caja de margen**, así que esos 5 px de
   más abajo suben la pieza 2,5 px y queda descuadrada con lo que tiene al
   lado. No da ningún error: parece un problema de tamaño o de padding.
   Se anula **solo el margen inferior**, para no tocar los de arriba que sí son
   nuestros —`.jri-check` lleva 16 px—. Con el selector de atributo la regla
   vale (0,1,1) y gana a la del tema. Si algún día una etiqueta nuestra
   necesita margen inferior, tendrá que pedirlo con más peso que esto. */
label[class^="jri-"],
label[class*=" jri-"] { margin-bottom: 0; }

/* Todo lo demás va envuelto en :where(), que aporta especificidad CERO.
   Es importante: con selectores normales, `.jri-section a { color: inherit }`
   (0,1,1) le ganaba a `.jri-btn-dark` (0,1,0) y los botones salían con el
   color del texto en vez del suyo. Con :where() cualquier regla real manda. */
:where(.jri-section, .jri-site-header, .jri-site-footer, .jri-breadcrumb, .jri-drawer) *,
:where(.jri-breadcrumb) {
  box-sizing: border-box;
}

:where(.jri-section, .jri-site-header, .jri-site-footer, .jri-drawer) :is(ul, ol) {
  list-style: none;
  margin: 0;
  padding: 0;
}

:where(.jri-section, .jri-site-header, .jri-site-footer, .jri-drawer) img {
  max-width: 100%;
  height: auto;
  display: block;
}

:where(.jri-section, .jri-site-header, .jri-site-footer, .jri-breadcrumb, .jri-drawer) a {
  color: inherit;
  text-decoration: none;
}

:where(.jri-section, .jri-site-header, .jri-site-footer, .jri-drawer) button {
  font-family: inherit;
  cursor: pointer;
}

:where(.jri-section, .jri-site-footer, .jri-drawer) :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
}

:where(.jri-section, .jri-site-footer) p { margin: 0 0 var(--space-4); }
:where(.jri-section, .jri-site-footer) p:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------
   Bricks limita `#brx-content.wordpress` a 1100 px. Nuestras secciones
   traen su propio contenedor (`.jri-container`, 1400 px) y varias son de
   sangrado completo —hero, barra CTA, pie—, así que ese tope las estrecha
   y les impide llegar a los bordes.

   Esta regla solo llega a las páginas donde hay al menos una sección
   nuestra: `base.css` se encola de forma condicional.
   ----------------------------------------------------------------- */
#brx-content.wordpress {
  width: 100%;
  max-width: none;
}

/* -----------------------------------------------------------------
   `#brx-content` sale como contenedor **flex** en la ficha de producto,
   y por defecto en fila. Cada elemento de Bricks —la ruta, la ficha—
   se convierte en un ítem que se reparte el ancho: la ruta se encogía
   a los 313 px de su texto en vez de ocupar la línea entera.

   De dónde sale ese `display: flex` **no se ha encontrado**: no está en
   ninguna hoja del sitio, ni en el JS de Bricks, ni en sus ajustes ni en
   los de la plantilla. Se comprobó con `getComputedStyle` en el
   navegador, así que es real; simplemente no se ha localizado el origen.

   Fijar la dirección a columna arregla el síntoma sin pelear con la
   regla desconocida, y es inerte si algún día `#brx-content` vuelve a
   ser un bloque normal. **Si aparece el origen, esto puede sobrar.**
   ----------------------------------------------------------------- */
#brx-content {
  flex-direction: column;
  align-items: stretch;
}

/* ---------------- Primitivas ---------------- */
/* El contenedor de v3-3 en TODO el sitio (11/09/2026): fluido hasta 1600 px con
   `--pad-x` de margen (30; 15 bajo 1025). Era el de JRI —95 % hasta 1400— y a 1502 px
   el contenido empezaba en x=51 en vez de en x=30. Valor literal y no `--container`:
   ese token sigue valiendo 1400 para las hojas de JRI aún sin portar. */
.jri-container {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* 45 px por defecto (v2: `.ss-section`). Las de fondo llevan el suyo, abajo. */
.jri-section { padding-block: 45px; }

/* Título de sección: 28 px / 600 en CAJA NORMAL.
   JR Implementos los pone en versalitas a 22/700; Savi Safety no usa versalitas
   en ningún título de sección de la portada. Medido en el render de la
   referencia — «Productos más vendidos», «Amplio catálogo de productos», «Kit por
   oficio» y «Línea económica» dan los cuatro 28px/600, `tt: none`, ls 0,5 px,
   `rgb(38,38,38)`. La única excepción es «Marcas destacadas», a 24. */
.jri-section-title {
  font-family: var(--font);
  font-size: 28px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: .5px;
  line-height: 1.2;
  margin: 0 0 var(--space-7);
  color: rgb(38 38 38);
}
.jri-section-title--center { text-align: center; margin-bottom: var(--space-8); }

/* ---------------- Cabecera de sección: título + «Ver más» ----------------
   La usan la tira de marcas, el catálogo por categorías y el listado del
   blog. Estaba en el diseño estático y **no se había portado**: sin ella el
   enlace caía debajo del título, alineado a la izquierda y con el color del
   texto —sobre la caja gris, casi ilegible—. */
.jri-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
/* El título trae margen inferior propio; dentro de la fila descentraría el
   par respecto al botón. */
.jri-section-head .jri-section-title { margin-bottom: 0; }

.jri-see-more {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  background: var(--brand-dark);
  color: var(--white);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.jri-see-more:hover { background: var(--brand-gold); color: var(--near-black); border-color: var(--brand-gold); }

/* Variante sobre caja oscura (Figma `234.jpg`): botón de contorno, no pastilla
   negra —sobre `--dark-2` el negro sólido desaparece—. */
.jri-section-head--dark .jri-section-title { color: var(--white); }
.jri-section-head--dark .jri-see-more {
  background: transparent;
  color: var(--white);
  border-color: var(--gray-150);
  border-radius: var(--radius-md);
  font-weight: 700;
  padding: var(--space-5);
  /* Sin esto hereda el interlineado del tema y el botón sube de 55 a 64 px:
     el mismo tropiezo que el «Enviar cotización» del checkout. */
  line-height: 1;
}
.jri-section-head--dark .jri-see-more:hover {
  background: var(--brand-yellow);
  color: var(--near-black);
  border-color: var(--brand-yellow);
}

/* En móvil el título y el botón van en **una sola línea** (Figma
   `temp/236.jpg`), y para eso el botón tiene que encoger: con el tamaño de
   escritorio se comía el ancho y «CATÁLOGO POR CATEGORÍAS» caía a dos líneas.
   Medido allí: 65×29 px con el título a 19. El hueco baja a 8 porque en 390 px
   los dos juntos ocupan casi la fila entera. */
@media (max-width: 767px) {
  .jri-section-head { gap: var(--space-2); }
  /* El título baja **solo dentro de la caja oscura**: los 19 px generales le
     ganan al ancho disponible y lo parten en dos. Fuera de aquí no hay botón
     que le dispute la fila, así que no toca. */
  .jri-section-head--dark .jri-section-title { font-size: 14px; }
  .jri-section-head--dark .jri-see-more { padding: 8px var(--space-1); font-size: 11px; }
}

/* ---------------- Ruta de navegación ----------------
   Aparece en la ficha de producto, los archivos, el blog y las páginas
   internas: es primitiva, no de una sección concreta. */
/* Bloque de ancho completo explícito: el `<nav>` queda fuera de varias
   reglas del tema y la barra gris no llegaba de lado a lado. */
.jri-breadcrumb {
  display: block;
  width: 100%;
  float: none;
  /* El Figma la quiere sobre fondo blanco y en gris, sin la banda gris del
     diseño estático. Es un componente compartido: el cambio alcanza a todas
     las páginas con ruta, que es lo deseable —una ruta que cambia de color
     según la página parece un fallo—. */
  background: var(--white);
  font-size: 14px;
  padding-block: 0;
}
/* Aspecto de `savisafety-design-v3-3` (`.breadcrumbs`, 11/09/2026): 14 px en gris,
   separadores «/» más claros y el último tramo en el color del texto y seminegrita.
   Es el mismo que pinta la banda del archivo (`grilla.css`, `.jri-breadcrumbs`). */
.jri-breadcrumb .jri-container { padding-block: 16px; }
.jri-breadcrumb a { color: var(--c-mute); }
.jri-breadcrumb a:hover { color: var(--c-texto); }
.jri-breadcrumb .jri-sep { color: var(--c-tachado); margin: 0 8px; }
.jri-breadcrumb .jri-current { color: var(--c-texto); font-weight: 600; }

/* ---------------- Páginas internas ----------------
   Título y enlace de vuelta. Los comparten catálogo, carrito, checkout,
   confirmación, blog y las institucionales: son primitivas, no de una
   sección concreta. */
.jri-page-title {
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: var(--space-7);
}
.jri-page-title--center { text-align: center; }

.jri-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--near-black);
  margin-bottom: var(--space-5);
}
.jri-back-link:hover { color: var(--brand-gold); }

.jri-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* La barra encoge en cuanto se van las dos pastillas y el buscador (≤980, ver
   `secciones/header.css`). El token vive aquí porque no lo usa solo la
   cabecera: de él cuelgan el desplazamiento del panel del catálogo, el `top`
   de la columna del total y el del aviso de «añadido al carrito».

   MEDIDO, no calculado (CDP sobre lab125, 13/09/2026, `#brx-header`): 145 px
   entre 768 y 980, y 153 px por debajo. Sticky y sin encoger al hacer scroll
   en ninguno de los dos tramos.

   Antes decía 90 px «= 30 + 60», y esa cuenta se dejaba fuera la fila del
   BUSCADOR, que en móvil va aparte. El aviso de carrito se colocaba a 90 px
   bajo una cabecera de 153 que va por encima (z-index 998 contra 990), así que
   quedaba medio tapado: solo asomaban la última línea y el botón. */
@media (max-width: 980px) {
  :root { --header-h: 145px; }
}

@media (max-width: 767px) {
  :root { --header-h: 153px; }
}

@media (max-width: 767px) {
  .jri-section { padding-block: 30px; }
  .jri-section--gris, .jri-section--amarillo { padding-block: 30px 40px; }
  /* En móvil, savisafety.com NO reduce el título de sección: medido a 390 px el 11/09/2026
     sigue en 28px/39.2 peso 600. El 19px venía de v3. */
  .jri-section-title { font-size: 28px; line-height: 1.4; }
  .jri-page-title { font-size: 20px; }
}


.jri-btn {
  display: inline-block;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 10px 22px;
  transition: all .2s;
}
.jri-btn-dark { background: var(--brand-dark); color: var(--white); }
.jri-btn-dark:hover { background: var(--brand-yellow); color: var(--near-black); }
.jri-btn-quote:hover { background: var(--brand-yellow); color: var(--near-black); }
.jri-btn { padding: 12px 40px; }
.jri-btn { margin-top: var(--space-7); }
.jri-btn { margin-top: var(--space-6); }
.jri-btn { width: 100%; text-align: center; }
.jri-btn { width: 100%; }

/* =================================================================
   Botones — primitiva compartida (modificadores)
   Vivían en `header.css` solo porque en el diseño estático estaban
   dentro del bloque del header. Los usan testimonios, tarjetas,
   formularios, pie y ficha de producto: si esa hoja no se encola, los
   botones salen como texto plano.
   ================================================================= */

.jri-btn-ghost:hover { background: var(--brand-dark); color: var(--white); border-color: var(--brand-dark); }

.jri-btn-block { display: block; width: 100%; text-align: center; }

.jri-btn-block + .jri-btn-block { margin-top: var(--space-3); }

.jri-btn-lg { padding: 14px 32px; font-size: 14px; }

.jri-btn:disabled { opacity: .45; cursor: not-allowed; }

.jri-btn:disabled:hover { background: var(--gray-100); color: var(--text-muted); }

/* ---------------- Botones (variantes nuevas) ---------------- */
.jri-btn-ghost {
  background: var(--white);
  color: var(--near-black);
  border: 1px solid var(--gray-150);
}

/* -----------------------------------------------------------------
   Fondo de sección (Savi Safety)

   En la referencia el color lo pone la FILA, no la sección: «Amplio catálogo de
   productos» y «Marcas destacadas» van sobre `rgb(241,243,245)` y «Línea
   económica» sobre el amarillo de marca. En JR Implementos todas las secciones
   van sobre blanco, así que este mecanismo no existía.

   Se resuelve con un modificador y no cableando el color en cada hoja: son tres
   secciones hoy y el cliente puede querer moverlo. Y a ancho completo, porque en
   el diseño el color llega de borde a borde aunque el contenido vaya centrado.
   ----------------------------------------------------------------- */
.jri-section--gris     { background: var(--surface-alt); padding-block: 40px 60px; }
.jri-section--amarillo { background: var(--brand-yellow); padding-block: 40px 55px; }

/* Sobre el amarillo el título va en negro puro, que es lo que mide la referencia
   en «Línea económica» (`rgb(0,0,0)`), no el `rgb(38,38,38)` del resto. */
.jri-section--amarillo .jri-section-title { color: #000; }