/* =================================================================
   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 Drigo ----------------
     Los tres colores salen del logo (`Logo-Drigo-2025.png`), medidos sobre el
     PNG: el azul ocupa el 42-61% de los píxeles opacos, el cian el 14-28% y el
     naranja es el toque de acento. Drigo **no usa amarillo ni negro de marca**.

     El reparto de papeles: manda el azul, acentúa el naranja, fondo blanco. */
  --brand-blue: #034C90;
  --brand-blue-dark: #023A6E;
  --brand-cyan: #01E3FC;
  --brand-orange: #F5762F;

  /* Naranja oscurecido **por contraste, no por gusto**: el naranja de marca
     sobre blanco da 2,79:1 como texto, que no llega ni al mínimo de texto
     grande. Este da 5,04:1 y sí cumple AA. Se usa donde el naranja es *letra*
     (hover de enlaces, foco); donde es *fondo*, se usa el de marca. */
  --brand-orange-dark: #B84F16;

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

     `--brand-yellow` es el acento **de fondo**: el naranja de marca funciona
     igual que el amarillo, incluido el texto oscuro encima (7,08:1).
     `--brand-gold` es el acento **de letra**, y por eso apunta al oscurecido. */
  --brand-yellow: var(--brand-orange);
  --brand-gold: var(--brand-orange-dark);
  --brand-yellow-alt: var(--brand-cyan);

  /* Fondo oscuro de marca. En JRI era el negro; en Drigo es el azul del logo.
     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 de azul habría
     puesto azul toda la letra del sitio. */
  --brand-dark: var(--brand-blue);

  /* 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);
}