/* =================================================================
   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 SaviHome ----------------
     Leída del sitio que había (Divi, 14/10/2026), no inventada: el acento
     `accent_color` y los botones de savihome.pe son el verde salvia, la letra
     y la franja inferior del pie el carbón, y la cabecera el crema. El logo
     (`logo-SH-1.png`, PNG con transparencia) lleva exactamente esos dos
     colores: #2B2A2A y #90AA81. */
  --brand-sage: #91AC83;
  --brand-charcoal: #2B2A29;
  --brand-cream: #F6F4F2;

  /* Derivado para hovers profundos y estados de foco sobre el carbón. */
  --brand-charcoal-dark: #1D1D1B;

  /* Salvia oscurecido **por contraste, no por gusto**: el de marca sobre
     blanco da 2,49:1 como texto —el sitio viejo pintaba letra blanca sobre
     botones salvia, y no se lee—. Este da 5,43:1. Se usa donde el verde es
     *letra* sobre fondo claro (hover de enlaces, foco); donde es *fondo*, se
     usa el de marca con letra oscura encima (7,95:1 contra `--near-black`). */
  --brand-sage-dark: #57714A;

  /* Salvia aclarado, para cuando el acento es letra **sobre el carbón**:
     8,24:1. Sobre blanco no llega a 2:1: **no usarlo fuera de fondos oscuros**. */
  --brand-sage-light: #B5CBA9;

  /* ---- Alias heredados de JR Implementos ----
     El sistema viene de JRI, donde el acento era amarillo, y esos 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—. Mismo reparto que en Drigo y
     SaviWork: `--brand-yellow` es el acento **de fondo** (texto oscuro
     encima), `--brand-gold` el acento **de letra** (el oscurecido) y
     `--brand-yellow-alt` el acento sobre fondo oscuro. */
  --brand-yellow: var(--brand-sage);
  --brand-gold: var(--brand-sage-dark);
  --brand-yellow-alt: var(--brand-sage-light);

  /* Fondo oscuro de marca: el carbón. Va aparte de `--near-black` a
     propósito: ese token se usa como color de **texto** en decenas de reglas,
     y las superficies oscuras ya estaban cazadas en `--brand-dark` desde el
     fork de Drigo. */
  --brand-dark: var(--brand-charcoal);

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