/*
Theme Name: HerboMax
Theme URI: https://www.herbomax.cl
Description: Tema hijo de Woodmart con el diseño de HerboMax. Rehace la portada completa (hero, cinta de sellos, objetivos, packs, testimonios y barra de compra). Fuera de la portada solo hace dos cosas: agrega el icono de carro que faltaba en el encabezado y le pone los colores y la tipografía de la marca al encabezado y al pie. La tienda, la ficha de producto, el carro y el checkout siguen funcionando con Woodmart tal como antes.
Author: Laboratorio Nextfar SpA
Template: woodmart
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.8
License: GNU General Public License v2 or later
Text Domain: herbomax
*/

/* ══════════════════════════════════════════════════════════════════════
   Todo cuelga de .hbx. Nada de esto puede tocar el resto del sitio: la
   tienda, la ficha y el checkout siguen viendose como hoy.
   ══════════════════════════════════════════════════════════════════════ */

.hbx{
  --morado:#581fb6; --naranja:#ff5500; --lavender:#e5e0f5;
  /* El naranja #ff5500 con texto blanco encima da 3,21:1 de contraste, y
     WCAG AA pide 4,5:1: un cliente mayor, o cualquiera con el telefono al
     sol, no alcanza a leer "Comprar ahora". Los fondos que llevan texto
     blanco usan --naranja-btn (4,78:1); el naranja vivo queda para bordes
     y adornos sin texto encima. */
  --naranja-btn:#cc4400;
  --texto:#14173a; --texto-2:#5d6081; --texto-3:#8f92ac;
  --borde:#e6e2f0; --borde-2:#cfc8e2; --verde:#0f7b52; --hueso:#f7f5fb;
  font-family:'Poppins', system-ui, -apple-system, sans-serif;
  color:var(--texto);
  line-height:1.5;
  /* Woodmart mete el contenido dentro de un contenedor flex. Un hijo flex
     tiene min-width:auto, o sea que crece hasta el ancho de su contenido en
     vez de respetar la pantalla: en un celular de 375 px la portada se iba a
     528 y el banner quedaba cortado a la derecha. */
  width:100%;
  min-width:0;
  max-width:100%;
}
.hbx *{box-sizing:border-box}
.hbx-pista,.hbx-grilla,.hbx-prod,.hbx-txt{min-width:0}
.hbx img{display:block; max-width:100%}
.hbx a{text-decoration:none}

/* ── hero: carrusel ─────────────────────────────────────────────────── */
.hbx-hero{background:var(--lavender); position:relative}
.hbx-pista{display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain}
.hbx-pista::-webkit-scrollbar{display:none}
.hbx-slide{flex:0 0 100%; min-width:0; scroll-snap-align:start}

.hbx-foto{position:relative; display:block; line-height:0}
.hbx-foto img{width:100%; aspect-ratio:3/2; object-fit:cover}
/* Ofertas sin banner propio: los dos frascos compuestos, con el mismo alto
   para que el carrusel no salte al deslizar. */
.hbx-foto.hbx-duo{display:flex; align-items:center; justify-content:center; gap:4px;
  aspect-ratio:3/2; padding:16px 20px}
.hbx-foto.hbx-duo img{width:38%; height:100%; aspect-ratio:auto; object-fit:contain;
  mix-blend-mode:multiply}
.hbx-mas{font-size:2rem; font-weight:300; color:var(--morado); line-height:1; flex:none}
.hbx-cinta{position:absolute; top:16px; left:16px; z-index:2; background:var(--naranja-btn,#cc4400);
  color:#fff; font-size:.6875rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; padding:7px 16px; border-radius:999px}

.hbx-txt{padding:18px 20px 30px}
.hbx-bajada{font-size:.6875rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--morado); margin:0 0 8px}
.hbx-h1{font-size:2.05rem; font-weight:600; letter-spacing:-.045em; line-height:.98;
  margin:0 0 14px; color:var(--texto)}

/* El precio y el ahorro van pegados a la imagen, y el boton justo debajo.
   Las especificaciones bajan al final: no deciden la compra. */
.hbx-precio{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:0 0 14px; font-variant-numeric:tabular-nums}
.hbx-precio b{font-size:2.5rem; font-weight:700; letter-spacing:-.05em; line-height:1}
.hbx-precio s{font-size:1.0625rem; color:#8479a8}
.hbx-ahorro{display:inline-flex; background:var(--naranja-btn,#cc4400); color:#fff; font-size:.8125rem;
  font-weight:700; padding:5px 14px; border-radius:999px}

.hbx-btn{display:flex; align-items:center; justify-content:center; width:100%;
  min-height:56px; border-radius:999px; font-size:1.0625rem; font-weight:700;
  background:var(--naranja-btn,#cc4400); color:#fff; transition:background .15s}
.hbx-btn:hover,.hbx-btn:focus{background:#e64c00; color:#fff}
.hbx-btn:active{background:#cc4400}

.hbx-specs{display:flex; gap:22px; padding:12px 0 0; margin:18px 0 0;
  border-top:1px solid #d5cdec}
.hbx-specs div{margin:0}
.hbx-specs dt{font-size:1.125rem; font-weight:700; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.hbx-specs dd{margin:0; font-size:.6875rem; letter-spacing:.13em;
  text-transform:uppercase; color:#7c6ea3}

.hbx-envio{display:flex; align-items:center; gap:8px; font-size:.875rem;
  color:var(--verde); font-weight:600; margin:16px 0 0}

.hbx-puntos{display:flex; gap:6px; justify-content:center; padding:4px 0 20px}
.hbx-punto{position:relative; width:26px; height:4px; border-radius:999px;
  background:#c9bfe4; border:none; padding:0; cursor:pointer; transition:background .2s}
.hbx-punto.on{background:var(--morado)}
/* El area que se puede tocar es de 44px aunque la raya mida 4px. */
.hbx-punto::before{content:''; position:absolute; inset:-20px -3px}

/* ── objetivos ──────────────────────────────────────────────────────── */
.hbx-seccion{padding:40px 0}
.hbx-cab{padding:0 20px}
.hbx-eyebrow{font-size:.6875rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--morado); margin:0 0 8px}
.hbx-h2{font-size:1.875rem; font-weight:600; letter-spacing:-.04em; line-height:1.05;
  margin:0; color:var(--texto)}
.hbx-sub{font-size:.9375rem; color:var(--texto-2); line-height:1.6; margin:10px 0 0;
  max-width:46ch}

/* Sin scroll lateral: las cuatro pestanas suman ~450 px y en un celular de
   375 caben 335, asi que "Belleza" quedaba fuera de la pantalla sin barra ni
   pista visual de que estaba ahi. La maqueta las acomoda en dos filas. */
.hbx-tabs{display:flex; flex-wrap:wrap; gap:9px; padding:20px 20px 4px}
.hbx-tabs::-webkit-scrollbar{display:none}
.hbx-tab{flex:none; min-height:44px; padding:10px 20px; border-radius:999px;
  border:1.5px solid var(--borde-2); background:#fff; color:var(--texto);
  font-family:inherit; font-size:.9375rem; font-weight:600; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s}
.hbx-tab:hover{border-color:var(--morado)}
.hbx-tab.on{background:var(--morado); border-color:var(--morado); color:#fff}
.hbx-panel[hidden]{display:none}

.hbx-grilla{display:grid; grid-template-columns:1fr 1fr; gap:12px;
  padding:16px 20px 0; margin:0; list-style:none}
@media (min-width:900px){ .hbx-grilla{grid-template-columns:repeat(4,1fr); gap:20px} }

.hbx-prod{display:flex; flex-direction:column; background:#fff;
  border:1.5px solid var(--borde); border-radius:18px; overflow:hidden;
  transition:border-color .2s}
.hbx-prod:hover{border-color:var(--borde-2)}

/* La foto va posicionada en absoluto, no como hijo de un grid: las fotos de
   producto son verticales, y un alto en porcentaje dentro de una caja con
   aspect-ratio no se puede resolver. Ademas el aspect-ratio cede cuando el
   contenido no cabe, la caja crece y corta el titulo. Asi el frasco queda
   centrado en los dos ejes y la caja mantiene el cuadrado. */
.hbx-prod-foto{position:relative; display:block; aspect-ratio:1/1; background:#fff}
.hbx-prod-foto img{position:absolute; inset:0; margin:auto; width:auto; height:auto;
  max-width:calc(100% - 28px); max-height:calc(100% - 28px); mix-blend-mode:multiply}
.hbx-tag{position:absolute; top:10px; left:10px; z-index:2; background:var(--naranja-btn,#cc4400);
  color:#fff; font-size:.625rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:4px 10px; border-radius:999px}

.hbx-prod-cuerpo{display:flex; flex-direction:column; gap:5px; flex:1; padding:14px;
  border-top:1.5px solid var(--borde)}
.hbx-prod-cuerpo h3{font-size:1rem; font-weight:600; letter-spacing:-.03em;
  line-height:1.2; margin:0}
.hbx-prod-cuerpo h3 a{color:var(--texto)}
.hbx-prod-cuerpo h3 a:hover{color:var(--morado)}
.hbx-form{font-size:.8125rem; color:var(--texto-2); line-height:1.4; margin:0}
.hbx-prec2{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:auto 0 0;
  padding-top:12px; font-variant-numeric:tabular-nums}
.hbx-prec2 b{font-size:1.1875rem; font-weight:700; letter-spacing:-.045em}
.hbx-prec2 s{font-size:.8125rem; color:var(--texto-3)}

.hbx-agregar{display:flex; align-items:center; justify-content:center; width:100%;
  min-height:46px; margin-top:10px; background:var(--naranja-btn,#cc4400); color:#fff;
  border-radius:999px; font-size:.9375rem; font-weight:700; transition:background .15s}
.hbx-agregar:hover,.hbx-agregar:focus{background:#e64c00; color:#fff}
.hbx-agotado{display:flex; align-items:center; justify-content:center; width:100%;
  min-height:46px; margin-top:10px; background:var(--hueso); color:var(--texto-3);
  border-radius:999px; font-size:.9375rem; font-weight:600}

/* margin:auto no separa nada cuando el elemento es flex de ancho automatico:
   la pastilla tomaba los 375 px enteros y tocaba los dos bordes, mientras las
   tarjetas de arriba estaban a 20 px. Se le da el ancho menos los margenes. */
.hbx-todos{display:flex; align-items:center; justify-content:center; min-height:52px;
  width:calc(100% - 40px); max-width:420px; margin:24px auto 0; border:1.5px solid var(--borde-2);
  border-radius:999px; font-size:1rem; font-weight:600; color:var(--texto)}
.hbx-todos:hover{border-color:var(--texto); color:var(--texto)}

/* ── escritorio ─────────────────────────────────────────────────────── */
@media (min-width:900px){
  .hbx-slide{display:grid; grid-template-columns:1fr 1fr; align-items:center;
    gap:40px; padding:0 40px}
  .hbx-foto img{aspect-ratio:4/3}
  .hbx-txt{padding:40px 0}
  .hbx-h1{font-size:3rem}
  .hbx-btn{max-width:340px}
  .hbx-cab{padding:0 40px; text-align:center}
  .hbx-sub{margin-inline:auto}
  .hbx-tabs{justify-content:center; padding-inline:40px}
  .hbx-grilla{padding-inline:40px}
}

@media (prefers-reduced-motion: reduce){
  .hbx *{transition:none !important}
  .hbx-pista{scroll-behavior:auto}
}


/* ##################################################################
   SECCION: cinta de sellos (ticker) - va justo debajo del hero
   Venia de template-parts/ticker.css, integrado aca al armar la version 1.1.0.
   ################################################################## */

/* ══════════════════════════════════════════════════════════════════════
   Cinta de sellos de confianza ("ticker").

   Todo lleva el prefijo hbx-ticker-. Ojo: en style.css ya existen
   .hbx-pista y .hbx-cinta, que son del carrusel del hero y del banderin
   naranja. Son otra cosa. Por eso aca nada se llama asi.

   Los colores salen de las variables que .hbx define en style.css. Se
   dejan valores de respaldo en cada var() por si la cinta se usara fuera
   de .hbx: en ese caso se ve igual en vez de quedar sin color.
   ══════════════════════════════════════════════════════════════════════ */

.hbx-ticker{
  background:#fff;
  border-bottom:1px solid var(--borde, #e6e2f0);
  /* La cinta es mas ancha que la pantalla a proposito: aca se recorta. */
  overflow:hidden;
  /* Woodmart mete el contenido en un contenedor flex, y un hijo flex crece
     hasta el ancho de su contenido si no se le dice que no. Sin esto, la
     cinta (que mide el doble del ancho de sus textos) estiraria la portada
     entera y sacaria la pagina de la pantalla. */
  width:100%;
  min-width:0;
  max-width:100%;
}

/* La pista lleva las dos copias de la lista, una al lado de la otra.
   width:max-content evita que el flex las apriete y las deje en dos lineas. */
.hbx-ticker-pista{
  display:flex;
  width:max-content;
  animation:hbx-ticker-corre 30s linear infinite;
}

/* Al terminar, la pista se ha corrido exactamente la mitad de su ancho, o sea
   una copia completa: en ese punto la segunda copia esta donde arranco la
   primera y el salto al reiniciar no se ve. */
@keyframes hbx-ticker-corre{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.hbx-ticker-grupo{
  display:flex;
  align-items:center;
  gap:30px;
  padding:14px 15px;
}

.hbx-ticker-sello{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.8125rem;
  font-weight:600;
  color:var(--texto-2, #5d6081);
  /* Un sello nunca se parte en dos lineas: la cinta tiene un solo renglon. */
  white-space:nowrap;
}

.hbx-ticker-punto{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--morado, #581fb6);
  /* flex:none para que el punto no se achique cuando el texto es largo. */
  flex:none;
}

/* ── quien pidio menos movimiento ──────────────────────────────────────
   La cinta se queda quieta y los sellos se acomodan en varias lineas, para
   que se lean todos sin tener que esperar a que pasen. La copia de relleno
   sobra en ese caso, se esconde. */
@media (prefers-reduced-motion: reduce){
  .hbx-ticker-pista{
    animation:none;
    width:auto;
    max-width:100%;
    min-width:0;
  }
  .hbx-ticker-grupo{
    flex-wrap:wrap;
    gap:10px 22px;
    padding:12px 20px;
  }
  .hbx-ticker-grupo[aria-hidden="true"]{
    display:none;
  }
}

/* ── escritorio ────────────────────────────────────────────────────────
   Mismo diseno, con un poco mas de aire. */
@media (min-width:900px){
  .hbx-ticker-grupo{ gap:44px; padding:16px 22px; }
  .hbx-ticker-sello{ font-size:.875rem; }
}


/* ##################################################################
   SECCION: los mejores packs
   Venia de template-parts/packs.css, integrado aca al armar la version 1.1.0.
   ################################################################## */

/* ══════════════════════════════════════════════════════════════════════
   Seccion "Los mejores packs".

   Todo cuelga de .hbx-packs y todas las clases llevan el prefijo hbx-pk-,
   para no chocar con las clases generales del tema (hbx-cinta, hbx-ahorro,
   hbx-agregar, hbx-prod...) ni con nada de Woodmart.

   Las variables de color (--morado, --naranja, --borde, --hueso, --texto-3,
   --verde) las hereda de .hbx en style.css. Van igual con valor de respaldo,
   por si esta seccion se usa fuera de la portada.
   ══════════════════════════════════════════════════════════════════════ */

.hbx-packs{
  /* Dos colores de la maqueta que no estan en la paleta general del tema.
     Se declaran aca, dentro de la seccion, para no tocar nada mas. */
  --hbx-pk-navy:#000c46;
  --hbx-pk-verde-cl:#e3f6ed;
  background:var(--hueso,#f7f5fb);
  padding:40px 0;
  /* Woodmart mete el contenido en un contenedor flex: sin min-width:0 la
     seccion crece hasta el ancho de su contenido y se sale de la pantalla. */
  min-width:0;
}
.hbx-packs .hbx-cab{text-align:center}
.hbx-packs .hbx-sub{margin-inline:auto}

/* Tarjeta horizontal apilada: en un celular entran los cinco packs sin
   deslizar al lado. Foto a la izquierda, lo que decide la compra a la derecha. */
.hbx-pk-carril{display:grid; gap:12px; padding:18px 20px 0; min-width:0}

.hbx-pk{display:grid; grid-template-columns:128px 1fr; min-width:0;
  background:#fff; border:1.5px solid var(--borde,#e6e2f0); border-radius:18px;
  overflow:hidden}
.hbx-pk-destacado{border-color:var(--morado,#581fb6); border-width:2px}

/* La casilla de fotos lleva DOS frascos verticales (413x700) lado a lado, y
   esto ya nos mordio antes: un alto en porcentaje dentro de una caja de alto
   indefinido no se resuelve, y la imagen termina midiendo lo que quiere.
   Por eso cada frasco va dentro de su propia casilla position:relative y la
   imagen va en absoluto, centrada por inset:0 + margin:auto. Asi la foto se
   ajusta sola sin poder empujar la tarjeta.
   El min-height es un piso: si el texto de la derecha fuera corto, los frascos
   igual quedan lo bastante grandes como para leer la etiqueta en un celular. */
.hbx-pk-fotos{position:relative; display:flex; align-items:stretch;
  justify-content:center; gap:2px; padding:10px 4px; min-width:0; min-height:150px;
  background:var(--hueso,#f7f5fb)}
.hbx-pk-destacado .hbx-pk-fotos{background:var(--lavender,#e5e0f5)}

.hbx-pk-foto{position:relative; display:block; flex:1 1 0; min-width:0}
/* Las fotos vienen con fondo blanco puro: el multiply lo hace desaparecer
   sobre el hueso y sobre el lavanda del pack destacado. */
.hbx-pk-foto img{position:absolute; inset:0; margin:auto; width:auto; height:auto;
  max-width:100%; max-height:100%; mix-blend-mode:multiply}

.hbx-pk-mas{align-self:center; flex:none; font-size:.875rem; font-weight:300;
  line-height:1; color:var(--morado,#581fb6)}

.hbx-pk-cuerpo{display:flex; flex-direction:column; gap:4px; min-width:0;
  padding:14px; border-left:1.5px solid var(--borde,#e6e2f0)}

.hbx-pk-benef{margin:0; font-size:.625rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--morado,#581fb6)}
.hbx-pk-cuerpo h3{margin:0; font-size:1rem; font-weight:600; letter-spacing:-.03em;
  line-height:1.2; color:var(--texto,#14173a); overflow-wrap:anywhere}

.hbx-pk-precio{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin:6px 0 0; font-variant-numeric:tabular-nums}
.hbx-pk-precio b{font-size:1.25rem; font-weight:700; letter-spacing:-.045em}
.hbx-pk-precio s{font-size:.8125rem; color:var(--texto-3,#8f92ac)}
.hbx-pk-ahorro{font-size:.625rem; font-weight:700; color:#fff;
  background:var(--hbx-pk-navy,#000c46); padding:3px 9px; border-radius:999px;
  white-space:nowrap}

.hbx-pk-banda{margin:8px 0 0; padding:7px 10px; border-radius:10px;
  font-size:.6875rem; font-weight:700; line-height:1.35}
.hbx-pk-gratis{background:var(--hbx-pk-verde-cl,#e3f6ed); color:var(--verde,#0f7b52)}
.hbx-pk-falta{background:#fff1ea; color:#c24000}

/* Es un enlace, no un <button>: agrega los dos productos al carro de una vez.
   Lleva 44px de alto para que se pueda tocar comodo con el dedo. */
.hbx-pk-add{display:flex; align-items:center; justify-content:center; width:100%;
  min-height:44px; margin-top:10px; border-radius:999px; font-size:.9375rem;
  font-weight:700; background:var(--naranja,#ff5500); color:#fff;
  transition:background .15s}
.hbx-pk-add:hover,.hbx-pk-add:focus{background:#e64c00; color:#fff}
.hbx-pk-add:active{background:#cc4400}

.hbx-pk-agotado{display:flex; align-items:center; justify-content:center;
  width:100%; min-height:44px; margin-top:10px; border-radius:999px;
  font-size:.9375rem; font-weight:600; background:var(--hueso,#f7f5fb);
  color:var(--texto-3,#8f92ac)}

.hbx-packs .hbx-todos{margin-top:20px}

/* ── escritorio ─────────────────────────────────────────────────────── */
@media (min-width:900px){
  .hbx-pk-carril{grid-template-columns:1fr 1fr; gap:20px; padding:20px 40px 0}
  .hbx-pk{grid-template-columns:160px 1fr}
  .hbx-pk-fotos{min-height:180px}
  .hbx-pk-cuerpo{padding:18px}
}


/* ##################################################################
   SECCION: testimonios
   Venia de template-parts/testimonios.css, integrado aca al armar la version 1.1.0.
   ################################################################## */

/* ══════════════════════════════════════════════════════════════════════════
   Testimonios.

   Todas las clases llevan el prefijo hbx- y ninguna repite un nombre de los
   que ya existen en style.css: la tienda, la ficha, el carro y el checkout no
   se enteran de que este archivo existe.

   La cabecera de la seccion reutiliza .hbx-cab / .hbx-eyebrow / .hbx-h2, que
   ya estan definidos en style.css. Aca no se redefinen.

   Las variables (--morado, --lavender, etc.) las declara .hbx en style.css.
   Igual van con valor de respaldo, por si algun dia este bloque se usa fuera
   del contenedor .hbx: mejor que se vea bien a que se vea sin color.
   ══════════════════════════════════════════════════════════════════════════ */

/* Woodmart mete el contenido en un contenedor flex, y un hijo flex crece hasta
   el ancho de su contenido en vez de respetar la pantalla. Sin min-width:0 la
   seccion empuja la portada hacia la derecha en un celular de 375 px. */
.hbx-testis,
.hbx-testi-carril,
.hbx-testi,
.hbx-testi-vacio,
.hbx-testi-quien{
  min-width:0;
}

.hbx-testis{
  background:var(--lavender,#e5e0f5);
  padding:40px 0;
}

/* Apilados, no en carrusel: en celular lo que se desliza al lado no se
   descubre, y una opinion que nadie ve no sirve de nada. */
.hbx-testi-carril{
  display:grid;
  gap:12px;
  padding:18px 20px 0;
  margin:0;
}

/* ── tarjeta de testimonio real ─────────────────────────────────────────── */
.hbx-testi{
  display:flex;
  flex-direction:column;
  gap:12px;
  background:#fff;
  border:1.5px solid var(--borde,#e6e2f0);
  border-radius:20px;
  padding:20px;
}

.hbx-testi-top{
  display:flex;
  align-items:center;
  gap:13px;
}

.hbx-testi-av{
  flex:none;
  width:50px;
  height:50px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--lavender,#e5e0f5);
  color:var(--morado,#581fb6);
  font-size:1rem;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1;
  text-transform:uppercase;
}
.hbx-testi-av-foto{
  display:block;
  object-fit:cover;
  /* Una foto de persona no lleva mix-blend-mode: eso es para los frascos, que
     vienen con fondo blanco puro. */
}

.hbx-testi-quien b{
  display:block;
  font-size:1rem;
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--texto,#14173a);
}
.hbx-testi-etiqueta{
  display:inline-block;
  margin-top:4px;
  padding:3px 10px;
  border-radius:999px;
  background:#efeafb;
  color:var(--morado,#581fb6);
  font-size:.625rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* Es un <blockquote>, y Woodmart le pone borde, fondo y cursiva a los
   blockquote del contenido. Se resetea a mano para que la tarjeta se vea
   igual aca que en la maqueta. */
.hbx-testi-frase{
  margin:0;
  padding:0;
  border:0;
  background:none;
  quotes:none;
  flex:1;
  font-family:inherit;
  font-size:.9375rem;
  font-style:normal;
  font-weight:400;
  line-height:1.6;
  text-align:left;
  color:var(--texto-2,#5d6081);
}
.hbx-testi-frase::after{content:none}
.hbx-testi-frase::before{
  content:'\201C';
  display:block;
  margin-bottom:10px;
  font-size:2.4rem;
  font-weight:700;
  line-height:.5;
  color:var(--borde-2,#cfc8e2);
}

.hbx-testi-pie{
  margin:0;
  padding-top:12px;
  border-top:1px solid var(--borde,#e6e2f0);
  font-size:.625rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--texto-3,#8f92ac);
}

/* ── estado vacio ───────────────────────────────────────────────────────────
   Deliberadamente NO lleva borde punteado. El punteado dice "esto todavia no
   esta terminado", y a un cliente le parece un error del sitio. Esta tarjeta
   no es un hueco: es una promesa escrita, y se ve como cualquier otra tarjeta
   de la portada. */
.hbx-testi-vacio{
  background:#fff;
  border:1.5px solid var(--borde,#e6e2f0);
  border-radius:20px;
  padding:28px 22px 24px;
  text-align:center;
  max-width:520px;
  margin-inline:auto;
}

.hbx-testi-marca{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin:0 auto 14px;
  border-radius:999px;
  background:var(--lavender,#e5e0f5);
  color:var(--morado,#581fb6);
}
/* La comilla tipografica no se dibuja en el centro de su caja sino arriba, en
   la altura de mayuscula: centrarla con flex la deja visiblemente alta. Se
   baja con transform, que no depende del calculo de la caja de linea ni de la
   fuente que termine cargando. */
.hbx-testi-marca::before{
  content:'\201C';
  display:block;
  font-size:2.6rem;
  font-weight:700;
  line-height:1;
  transform:translateY(.2em);
}

/* Es un <h3>: Woodmart le pone su propio tamano y su propio margen. */
.hbx-testi-titulo{
  margin:0 0 10px;
  font-family:inherit;
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.25;
  color:var(--texto,#14173a);
}

.hbx-testi-texto{
  margin:0;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--texto-2,#5d6081);
}

/* Las tres reglas van alineadas a la izquierda aunque la tarjeta este
   centrada: una lista centrada se lee mal. */
.hbx-testi-reglas{
  list-style:none;
  margin:18px 0 0;
  padding:16px 0 0;
  border-top:1px solid var(--borde,#e6e2f0);
  text-align:left;
  display:grid;
  gap:9px;
}
.hbx-testi-reglas li{
  position:relative;
  padding-left:26px;
  font-size:.875rem;
  line-height:1.5;
  color:var(--texto-2,#5d6081);
}
.hbx-testi-reglas li::before{
  content:'';
  position:absolute;
  left:2px;
  top:.34em;
  width:11px;
  height:6px;
  border-left:2px solid var(--morado,#581fb6);
  border-bottom:2px solid var(--morado,#581fb6);
  transform:rotate(-45deg);
}

.hbx-testi-invita{
  margin:20px 0 10px;
  font-size:.9375rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--texto,#14173a);
}

/* Verde de WhatsApp, con texto oscuro: sobre ese verde el blanco no contrasta
   lo suficiente. */
.hbx-testi-wa{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  min-height:52px;
  padding:0 18px;
  border-radius:999px;
  background:#25d366;
  color:#062d16;
  font-size:1rem;
  font-weight:700;
  transition:background .15s;
}
.hbx-testi-wa:hover,
.hbx-testi-wa:focus{
  background:#1fbb59;
  color:#062d16;
}
.hbx-testi-wa:active{
  background:#18a34c;
}
.hbx-testi-wa-icono{
  flex:none;
}

.hbx-testi-nota{
  margin:14px 0 0;
  font-size:.75rem;
  line-height:1.55;
  color:var(--texto-3,#8f92ac);
}

/* ── escritorio ─────────────────────────────────────────────────────────── */
@media (min-width:900px){
  .hbx-testi-carril{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    padding:18px 40px 0;
  }
  /* El estado vacio es una sola tarjeta: ocupa el ancho completo y se centra,
     en vez de quedar arrinconada en media pantalla. */
  .hbx-testi-vacio{
    grid-column:1 / -1;
    padding:36px 32px 30px;
  }
  .hbx-testi-wa{
    max-width:340px;
    margin-inline:auto;
  }
}

@media (prefers-reduced-motion: reduce){
  .hbx-testis *{transition:none !important}
}


/* ##################################################################
   SECCION: barra de compra fija (la "barra de pulgar")
   Venia de template-parts/barra-compra.css, integrado aca al armar la version 1.1.0.
   ################################################################## */

/* ══════════════════════════════════════════════════════════════════════
   Barra de compra fija (la "barra de pulgar")

   Solo en celular. Pegada abajo, precio a la izquierda y "Comprar" a la
   derecha, al alcance del pulgar.

   La barra NO usa las variables de .hbx a proposito: el JavaScript la mueve
   a <body> para que position:fixed funcione siempre, asi que puede terminar
   fuera de .hbx. Usa las --hbx-* que el bloque del encabezado declara en
   :root, que existen en todo el documento.

   AL ENSAMBLAR: esta pieza traia sus propias --hbx-naranja, --hbx-texto,
   --hbx-texto-2 y --hbx-borde, con exactamente los mismos valores que las
   del encabezado. Se borraron las de aca y quedaron las de :root, para que
   un cambio de paleta se haga en un solo lugar.
   ══════════════════════════════════════════════════════════════════════ */

.hbx-barra{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  /* z-index 90: por encima del contenido de la portada, pero MUY por debajo
     del boton flotante de WhatsApp (joinchat usa ~9000) y de la cabecera fija
     de Woodmart. Si el usuario abre el chat de WhatsApp, la ventana del chat
     tapa la barra y no al reves. El choque con el boton de WhatsApp no se
     arregla con z-index sino corriendolo hacia arriba: mas abajo. */
  z-index:90;

  display:flex;
  align-items:center;
  gap:12px;
  /* min-width:0 tambien aca: la barra es hija de <body>, que en Woodmart puede
     ser contenedor flex. Sin esto crece hasta el ancho de su contenido. */
  min-width:0;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));

  background:rgba(255,255,255,.97);
  border-top:1px solid var(--hbx-borde);
  box-shadow:0 -6px 20px rgba(20,23,58,.09);

  font-family:'Poppins', system-ui, -apple-system, sans-serif;
  color:var(--hbx-texto);
  line-height:1.5;

  /* Estado de reposo: escondida. Se muestra cuando el hero se fue hacia
     arriba. visibility:hidden ademas la saca del recorrido del tabulador,
     para que nadie caiga con el teclado en un boton que no se ve. */
  transform:translateY(110%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:transform .22s ease, opacity .22s ease, visibility .22s ease;
}

.hbx-barra *{box-sizing:border-box}

.hbx-barra.hbx-barra--on{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Sin JavaScript la barra nunca recibe la clase y no se veria. Se acepta a
   proposito: sin JavaScript tampoco se puede saber si el hero esta a la
   vista, y una barra siempre encima del hero tapa su propio boton. El hero y
   las tarjetas ya tienen sus botones de comprar. */

.hbx-barra-info{
  flex:1;
  /* Leccion ya aprendida: sin min-width:0 un hijo flex no deja truncar el
     texto y empuja el boton fuera de la pantalla. */
  min-width:0;
}
.hbx-barra-precio{
  display:block;
  font-size:1.0625rem;
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.hbx-barra-eti{
  display:block;
  font-size:.75rem;
  color:var(--hbx-texto-2);
  /* "Promoción de lanzamiento" no cabe en 375 px junto al boton: se corta con
     puntos suspensivos en vez de partir en dos lineas y crecer la barra. */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.hbx-barra-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  min-height:52px;
  padding:0 30px;
  border-radius:999px;
  background:var(--hbx-naranja);
  color:#fff;
  font-size:1rem;
  font-weight:700;
  text-decoration:none;
  transition:background .15s;
}
.hbx-barra-btn:hover,
.hbx-barra-btn:focus{background:#e64c00; color:#fff}
.hbx-barra-btn:active{background:#cc4400}
/* Woodmart borra los contornos de foco en varios botones. Aca se pone uno
   propio para quien navega con teclado. */
.hbx-barra-btn:focus-visible{outline:2px solid var(--hbx-texto); outline-offset:2px}

/* La barra tapa lo ultimo de la pagina (el pie). Se le reserva el espacio al
   documento. 72px es el alto de la barra: 10 de padding + 52 del boton + 10.
   La clase la pone el JavaScript, y solo en la portada: en el resto del sitio
   esta regla no calza con nada. */
body.hbx-con-barra{
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
}

/* ── WhatsApp flotante (plugin joinchat) ──────────────────────────────
   El boton de WhatsApp vive fijo abajo a la derecha, justo donde queda el
   boton "Comprar". Subirle el z-index a la barra seria peor: taparia el chat
   de WhatsApp cuando el usuario lo abre.
   La decision es al reves: la barra se queda abajo con z-index bajo, y
   mientras esta a la vista se corre el boton de WhatsApp hacia arriba, por
   encima de ella. Cuando la barra se esconde, WhatsApp vuelve a su lugar.
   Si el plugin no esta instalado, estas reglas no calzan con nada.

   Va dentro de un max-width a proposito: en escritorio la barra no existe, y
   ahi no se toca nada de joinchat, ni siquiera para "devolverlo a su lugar".
   Su lugar lo decide el plugin, no nosotros. */
@media (max-width:899px){
  body.hbx-barra-a-la-vista .joinchat{
    --bottom:calc(84px + env(safe-area-inset-bottom));
    bottom:calc(84px + env(safe-area-inset-bottom));
    transition:bottom .22s ease;
  }
}

/* ── escritorio ──────────────────────────────────────────────────────
   En pantalla grande el boton de comprar siempre esta a la vista y no hay
   pulgar que alcanzar: la barra sobra. */
@media (min-width:900px){
  .hbx-barra{display:none}
  body.hbx-con-barra{padding-bottom:0}
}

@media (prefers-reduced-motion: reduce){
  .hbx-barra,
  .hbx-barra-btn,
  body.hbx-barra-a-la-vista .joinchat{transition:none}
}


/* ##################################################################
   FUERA DE LA PORTADA: encabezado, icono de carro y pie
   Venia de template-parts/encabezado.css, integrado aca al armar la version 1.1.0.
   ################################################################## */

/* ══════════════════════════════════════════════════════════════════════
   HerboMax — encabezado y pie

   Este archivo NO dibuja el encabezado. Woodmart lo sigue dibujando con su
   constructor de encabezados; aca solo se hacen dos cosas:

     1. Vestir el icono de carro que agrega encabezado.php (clases .hbx-*).
     2. Tenir las piezas que ya existen de Woodmart con los colores y la
        tipografia de la marca.

   Cada regla que pisa a Woodmart dice QUE clase pisa y POR QUE.

   Sobre la especificidad: esta hoja se encola despues de la de Woodmart y
   de la del tema hijo, asi que con la MISMA especificidad ya gana. Por eso
   no hay ni un solo !important en el archivo. Si en algun punto Woodmart
   escribiera la regla en un <style> en linea generado por sus ajustes de
   tema, esa si ganaria: en ese caso hay que subir un nivel a mano, no
   repartir !important.

   Movil primero. La pantalla de referencia es 375 px.
   ══════════════════════════════════════════════════════════════════════ */

/* Prefijadas con --hbx- a proposito: style.css declara --morado, --naranja,
   etc. pero SOLO dentro de .hbx (la portada). El encabezado y el pie viven
   fuera de ahi, asi que necesitan las suyas y no deben pisarse entre si. */
:root{
  --hbx-morado:#581fb6;
  --hbx-naranja:#ff5500;
  --hbx-texto:#14173a;
  /* --hbx-texto-2 lo usa la barra de compra, que tambien vive fuera de .hbx
     porque el JS la cuelga del <body>. Se declara aca, con el resto. */
  --hbx-texto-2:#5d6081;
  --hbx-borde:#e6e2f0;
  --hbx-fuente:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ══════════════════════════════════════════════════════════════════════
   1 · El carro que faltaba

   Nace como burbuja fija: eso funciona siempre, no depende de ninguna
   clase de Woodmart. El JS de encabezado.php lo asciende a icono del
   encabezado agregandole .hbx-carro--en-cabecera, y si no encuentra un
   hueco visible lo deja tal cual. Los dos estados tienen que verse bien.
   ══════════════════════════════════════════════════════════════════════ */

.hbx-carro{
  /* fixed y no absolute: la burbuja tiene que quedarse a la vista mientras
     el cliente baja por la pagina. */
  position:fixed;
  right:14px;
  /* 96 px de piso: por encima del boton flotante de WhatsApp y de la barra
     inferior de Woodmart en celular, que miden ~56 px. */
  bottom:calc(96px + env(safe-area-inset-bottom, 0px));
  /* Por debajo del menu lateral (70) y del cajon del carro (60).
     OJO, corregido al ensamblar: la barra de compra quedo en z-index 90, no
     en 45 como decia la maqueta. O sea que la barra pasa POR ENCIMA de esta
     burbuja. No molesta, porque la burbuja arranca a 96px del piso y la
     barra mide 72px: no se pisan. Y es el estado de respaldo: cuando el JS
     encuentra hueco en la cabecera, esta burbuja deja de existir. */
  z-index:55;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:52px;
  height:52px;
  border-radius:999px;
  background:#fff;
  color:var(--hbx-texto);
  border:1px solid var(--hbx-borde);
  box-shadow:0 6px 20px rgba(0,12,70,.18);
  text-decoration:none;
  font-family:var(--hbx-fuente);
  transition:color .15s, background-color .15s;
  /* Nace invisible para que no se vea el salto desde la esquina hasta el
     encabezado cuando el JS lo acomoda. El JS lo destapa apenas termina.
     La animacion es la red de seguridad: si el JS nunca corre (error de
     otro plugin, script bloqueado), a 1,5 s el carro aparece igual como
     burbuja fija. Un carro feo es infinitamente mejor que ningun carro. */
  visibility:hidden;
  animation:hbx-carro-red 0s linear 1.5s forwards;
}
@keyframes hbx-carro-red{ to{ visibility:visible; } }

/* Ya lo acomodo el JS: se destapa de inmediato y la red sobra. */
.hbx-carro--listo{
  visibility:visible;
  animation:none;
}

/* Ya vive dentro de la cabecera: pierde la sombra y el borde de burbuja y
   pasa a ser un icono de 44 px como los de la maqueta. Sigue siendo
   position:relative porque el globito se posiciona contra el. */
.hbx-carro--en-cabecera{
  position:relative;
  bottom:auto;
  right:auto;
  width:44px;
  height:44px;
  border:none;
  border-radius:12px;
  background:transparent;
  box-shadow:none;
}

.hbx-carro:hover,
.hbx-carro:focus{ color:var(--hbx-morado); }
.hbx-carro--en-cabecera:active{ background:#f4f1fa; }

.hbx-carro:focus-visible{
  outline:2px solid var(--hbx-morado);
  outline-offset:2px;
}

.hbx-carro-icono{
  display:flex;
  line-height:0;
}

/* El globito del numero. Va en <em>, asi que hay que apagarle la cursiva. */
.hbx-carro-n{
  position:absolute;
  top:5px;
  right:5px;
  display:grid;
  place-items:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:var(--hbx-naranja);
  color:#fff;
  font-family:var(--hbx-fuente);
  font-size:.625rem;
  font-weight:700;
  font-style:normal;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
/* En la burbuja fija, que es mas grande, el globito se corre un poco. */
.hbx-carro:not(.hbx-carro--en-cabecera) .hbx-carro-n{ top:2px; right:2px; }

/* Carro vacio: el globito se esconde pero SIGUE en el HTML, porque
   WooCommerce lo busca por selector para refrescarlo. Si no estuviera, el
   numero no se actualizaria nunca. */
.hbx-carro-n--cero{ display:none; }

/* Cache de paginas: el HTML guardado puede traer un numero viejo. Si la
   cookie de WooCommerce dice que hay algo en el carro pero el HTML dice 0,
   el JS marca este estado y el globito se dibuja como un punto naranjo:
   avisa que hay algo sin inventar una cantidad. */
.hbx-carro--quiza .hbx-carro-n--cero{
  display:block;
  width:10px;
  min-width:0;
  height:10px;
  padding:0;
  font-size:0;
  overflow:hidden;
}

@media (prefers-reduced-motion: reduce){
  .hbx-carro{ transition:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   2 · Encabezado de Woodmart
   ══════════════════════════════════════════════════════════════════════ */

/* PISA: header.whb-header (el contenedor del constructor de encabezados) y,
   sobre todo, sus variables de color.
   POR QUE: Woodmart 7.x pinta casi todo con --wd-primary-color,
   --wd-alternative-color y compania. Redefinirlas SOLO dentro del
   encabezado tine los iconos, el menu y los hover de una sola vez, sin
   pelear especificidad con nadie y sin tocar el resto del sitio.
   Si en esta version alguna variable se llamara distinto, la linea queda
   inerte: no rompe nada, simplemente no hace efecto. */
.whb-header{
  --wd-primary-color:var(--hbx-morado);
  --wd-alternative-color:var(--hbx-naranja);
  --wd-text-color:var(--hbx-texto);
  --wd-title-color:var(--hbx-texto);
  --wd-link-color:var(--hbx-texto);
  --wd-link-color-hover:var(--hbx-morado);
  font-family:var(--hbx-fuente);
  color:var(--hbx-texto);
}

/* PISA: .whb-row.whb-general-header, la fila principal del encabezado.
   POR QUE: en Woodmart el fondo se declara en la FILA, no en <header>. Si
   solo pintaramos <header>, una fila con .whb-with-bg lo taparia. Se
   pintan las dos para que el blanco de la marca gane igual. */
/* NO pintar de blanco el encabezado. El logo del sitio (Herbomax_Logo.png) es
   tinta 100% blanca sobre transparencia: sobre fondo blanco desaparece en TODAS
   las paginas. El morado de Woodmart es el fondo para el que ese logo se hizo.
   Si algun dia se quiere cabecera blanca, primero hay que subir un logo de
   tinta oscura y cambiar la fila a whb-color-dark desde el constructor de
   encabezados, no desde aca.
.whb-header,
.whb-header .whb-general-header{ background-color:#fff; }
*/

/* PISA: el borde inferior de .whb-main-header.
   POR QUE: Woodmart usa un gris neutro; la maqueta usa el lavanda de la
   marca (#e6e2f0), que es lo que separa el encabezado del hero. */
.whb-header .whb-main-header{ border-bottom:1px solid var(--hbx-borde); }

/* PISA: la tipografia que Woodmart fija en cada elemento del encabezado
   (.wd-tools-element, .wd-nav, .wd-header-search, .wd-header-mobile-nav).
   POR QUE: no basta con poner Poppins en el contenedor. Los ajustes de
   tipografia del tema escriben font-family en cada elemento, y eso vence a
   la herencia. Hay que nombrarlos. */
.whb-header .wd-tools-element,
.whb-header .wd-nav,
.whb-header .wd-header-search,
.whb-header .wd-header-mobile-nav{ font-family:var(--hbx-fuente); }

/* PISA: .wd-tools-element > a — el enlace de cada herramienta del
   encabezado. Ahi viven el buscador (.wd-header-search) y el menu
   hamburguesa (.wd-header-mobile-nav), los dos confirmados en el sitio.
   POR QUE: Woodmart los pinta con su esquema de color (.whb-color-dark /
   .whb-color-light), que no es el azul tinta de la marca.
   ESPECIFICIDAD: (0,2,1), la misma que usa el tema. Como esta hoja carga
   despues, gana sin necesidad de !important. */
.whb-header .wd-tools-element > a{ color:var(--hbx-texto); }
.whb-header .wd-tools-element > a:hover,
.whb-header .wd-tools-element > a:focus{ color:var(--hbx-morado); }

/* PISA: .wd-nav > li > a — los enlaces del menu principal del encabezado.
   POR QUE: mismo motivo que arriba, mas el peso y el interletrado de la
   marca (600 y -.02em, como los titulos de la portada). */
.whb-header .wd-nav > li > a{
  color:var(--hbx-texto);
  font-weight:600;
  letter-spacing:-.02em;
}
.whb-header .wd-nav > li > a:hover{ color:var(--hbx-morado); }

/* PISA: el campo del buscador dentro de .wd-header-search.
   POR QUE: al enfocarlo, Woodmart lo bordea con su color; le corresponde el
   morado de la marca. Si el input se llamara distinto en esta version, la
   regla queda inerte. */
.whb-header .wd-search-field:focus{ border-color:var(--hbx-morado); }

/* NO pisa nada: agrega el foco visible que Woodmart no marca.
   POR QUE: sin esto, quien navega con teclado no ve donde esta parado en el
   encabezado. Se usa :focus-visible para no molestar al que usa el mouse. */
.whb-header a:focus-visible,
.whb-header button:focus-visible{
  outline:2px solid var(--hbx-morado);
  outline-offset:2px;
  border-radius:8px;
}

/* ══════════════════════════════════════════════════════════════════════
   3 · Pie

   El pie esta hecho con Elementor y es el punto mas fragil del sitio: no
   sabemos que fondo trae cada seccion. Por eso aca NO se toca ni el fondo
   ni el color del texto. Solo tipografia y acentos, que no pueden romper
   el contraste. El tinte fuerte esta mas abajo, apagado.
   ══════════════════════════════════════════════════════════════════════ */

/* PISA: footer.footer-container y sus variables de color.
   POR QUE: darle la tipografia de la marca y que cualquier acento que
   Woodmart dibuje ahi (bordes, iconos, hover) use el morado en vez del
   color del tema. Nada de esto cambia el contraste del texto. */
.footer-container{
  --wd-primary-color:var(--hbx-morado);
  --wd-alternative-color:var(--hbx-naranja);
  font-family:var(--hbx-fuente);
}

/* PISA: la tipografia que Elementor escribe en cada widget del pie.
   POR QUE: igual que en el encabezado, Elementor fija font-family widget
   por widget y eso vence a la herencia del contenedor. */
.footer-container .elementor-widget-container,
.footer-container .elementor-heading-title,
.footer-container .widget{ font-family:var(--hbx-fuente); }

/* NO pisa nada: foco visible tambien en el pie, por el mismo motivo. */
.footer-container a:focus-visible{
  outline:2px solid var(--hbx-morado);
  outline-offset:2px;
}

/* ── Piel oscura del pie: APAGADA a proposito ──────────────────────────
   Esta es la version de la maqueta: navy #0b0f2e con enlaces claros. Solo
   se aplica si el body lleva la clase .hbx-pie-marca, que encabezado.php
   agrega unicamente cuando alguien enciende el filtro:

       add_filter( 'hbx_pie_marca', '__return_true' );

   ANTES DE ENCENDERLO hay que mirar el pie real. Si alguna seccion de
   Elementor trae fondo claro propio, este texto claro quedaria ilegible, y
   el dueno no lo notaria hasta que se lo diga un cliente. */
body.hbx-pie-marca .footer-container{
  background-color:#0b0f2e;
  color:#c3c7e0;
}
body.hbx-pie-marca .footer-container .elementor-section,
body.hbx-pie-marca .footer-container .elementor-container{
  background-color:transparent;
}
body.hbx-pie-marca .footer-container a{ color:#c3c7e0; }
body.hbx-pie-marca .footer-container a:hover{ color:#fff; }
body.hbx-pie-marca .footer-container h1,
body.hbx-pie-marca .footer-container h2,
body.hbx-pie-marca .footer-container h3,
body.hbx-pie-marca .footer-container h4,
body.hbx-pie-marca .footer-container .elementor-heading-title{ color:#fff; }


/* ── Tipografia de los titulos ──────────────────────────────────────────
   Woodmart escribe font-family en cada titulo desde sus ajustes de tipografia,
   y eso vence a la herencia: los titulos de la portada salian con la fuente de
   Woodmart y no con Poppins. El letter-spacing negativo esta calibrado para
   Poppins, asi que sobre otra fuente ademas se veian apretados. Hay que
   nombrarlos uno por uno. */
.hbx .hbx-h1,
.hbx .hbx-h2,
.hbx .hbx-prod-cuerpo h3,
.hbx .hbx-pk-cuerpo h3{
  font-family:inherit;
  font-style:normal;
  text-transform:none;
}


/* ── Un solo morado en todo el sitio ────────────────────────────────────
   El constructor de encabezados de Woodmart guardo el morado #512D91, mas
   apagado, mientras el resto del sitio y nuestro diseno usan #581FB6. Al
   verlos juntos en la misma pantalla el encabezado se ve desteñido.
   Se unifica en el vivo, que es el de la marca.

   PISA: .whb-general-header de uploads/.../xts-header_439246-*.css, que trae
   background-color:rgba(81,45,145,1) con especificidad (0,1,0). La nuestra es
   (0,2,0) y ademas la hoja se encola de ultima, asi que gana sin !important. */
.whb-header .whb-general-header,
.whb-header .whb-top-bar{ background-color:var(--hbx-morado,#581fb6); }

/* Y la franja de anuncio de arriba, que usa el morado apagado en el texto. */
.whb-header .whb-top-bar a,
.whb-header .whb-top-bar{ --wd-primary-color:#581fb6; }

/* El resto del sitio: botones, precios y enlaces de Woodmart y WooCommerce. */
:root{ --wd-primary-color:#581fb6; }