/* =================================================================
   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 SaviWork ----------------
     Dos colores y blanco, los que dio el cliente. Manda el azul marino,
     acentúa el naranja. SaviWork **no usa amarillo, ni negro, ni cian de
     marca**: los que había venían del tema heredado (WoodMart pintaba de
     negro #111110 y amarillo #F4EC09), no de la marca. */
  --brand-navy: #212148;
  --brand-orange: #E95720;

  /* Derivado para hovers profundos y estados de foco sobre el navy. */
  --brand-navy-dark: #16162F;

  /* Naranja oscurecido **por contraste, no por gusto**: el naranja de marca
     sobre blanco da 3,59:1 como texto, que no llega al 4,5:1 de AA. Este da
     5,08:1. Se usa donde el naranja es *letra* sobre fondo claro (hover de
     enlaces, foco); donde es *fondo*, se usa el de marca. */
  --brand-orange-dark: #BF471A;

  /* Naranja aclarado, para cuando el acento es letra **sobre el navy**: el de
     marca ahí da 4,25:1 y se queda a 0,25 de AA, además de vibrar. Este da
     6,54:1. Ocupa el papel que en Drigo tenía el cian de su logo.
     Sobre blanco da 2,33:1: **no usarlo fuera de fondos oscuros**. */
  --brand-orange-light: #FF8A50;

  /* ---- Alias heredados de JR Implementos ----
     El sistema viene de JRI, donde el acento era amarillo, y esos dos nombres
     están escritos en decenas de reglas repartidas por 16 hojas. Reapuntarlos
     aquí rebrandea el sistema entero sin tocar ni una de esas reglas —y
     permite volver atrás cambiando tres líneas—.

     `--brand-yellow` es el acento **de fondo**: el naranja de marca funciona
     igual que el amarillo, incluido el texto oscuro encima (5,51:1 contra
     `--near-black`).
     `--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-orange);
  --brand-gold: var(--brand-orange-dark);
  --brand-yellow-alt: var(--brand-orange-light);

  /* 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á. */
  --brand-dark: var(--brand-navy);

  /* Neutros oscuros */
  --black: #000000;
  --near-black: #0A0A0A;
  --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: #000000;
  --text-muted: #808080;
  --text-muted-2: #666666;
  --text-on-dark: #D1D1D1;

  /* 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;
  --header-h: 90px;
}

/* -----------------------------------------------------------------
   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 ---------------- */
.jri-container {
  width: 95%;
  max-width: var(--container);
  margin-inline: auto;
}

.jri-section { padding-block: var(--space-9); }

.jri-section-title {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  line-height: 1.2;
  margin: 0 0 var(--space-7);
  color: var(--text);
}
.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: 13px;
  padding-block: 0;
}
/* Más aire arriba que abajo: sin la banda gris quedaba pegada al header. */
.jri-breadcrumb .jri-container { padding-block: var(--space-6) var(--space-3); }
.jri-breadcrumb a { color: var(--text-muted); }
.jri-breadcrumb a:hover { color: var(--brand-gold); }
.jri-breadcrumb .jri-sep { color: var(--text-muted); margin: 0 8px; }
.jri-breadcrumb .jri-current { color: var(--text-muted-2); 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 y el `top`
   de la columna del total. */
@media (max-width: 980px) {
  :root { --header-h: 64px; }
}

@media (max-width: 767px) {
  .jri-container { width: 100%; padding-inline: var(--space-4); }
  .jri-section { padding-block: var(--space-8); }
  .jri-section-title { font-size: 19px; }
  .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);
}