/*
 * esbellsa-coherence — Capa de coherencia GLOBAL (Fase de Diseño · Dir 2).
 * Unifica la tipografía de toda la web (Elementor / WooCommerce / WoodMart mezclan fuentes)
 * y adapta al sistema Dir 2 los elementos del tema: caja de ofertas y títulos de sección.
 * Depende de esbellsa-blocks (tokens + @font-face self-hosted). Sin CDN.
 *
 * Nota: los ICONOS (Font Awesome / WoodMart / Elementor / dashicons) fijan su propia
 * font-family en su elemento, así que NO se ven afectados por estas reglas de texto.
 */

/* ================= 1. TIPOGRAFÍA COHERENTE (toda la web) ================= */
body{ font-family:var(--esb-body) !important; color:var(--esb-text); }
p, li, dd, dt, td, th, blockquote, figcaption, label, small, address,
.elementor-widget-container, .elementor-widget-text-editor,
.elementor-widget-text-editor p, .elementor-widget-text-editor li,
.woocommerce, .woocommerce-Tabs-panel, .wd-nav-content, .comment-content,
input, select, textarea{
  font-family:var(--esb-body) !important;
}
/* Títulos: Space Grotesk en TODA la web (unifica el mix de fuentes) */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title, .entry-title, .post-title, .product_title,
.widget-title, .woocommerce-loop-product__title, .wd-el-title,
.woodmart-title-container, .title-toc-lcs{
  font-family:var(--esb-display) !important;
  letter-spacing:-.01em;
}
/* Botones/CTA con la display (coherentes) */
button, .button, .elementor-button, .btn, .wd-buttons a{
  font-family:var(--esb-display) !important;
}

/* ================= 2. CAJA DE OFERTAS (afiliado WooCommerce) → Dir 2 ================= */
/* Cada oferta es un form .cart-product-form con botón-logo + botón-precio (amarillo por el tema). */
.cart-product-form{
  display:flex !important; align-items:center; gap:12px;
  margin:0 0 10px !important; box-shadow:none !important; border:0 !important; padding:0 !important;
}
.cart-product-form .single_add_to_cart_button_logo{
  background:transparent !important; box-shadow:none !important; border:0 !important;
  padding:0 !important; margin:0 !important; flex:0 0 auto; min-width:88px;
}
.cart-product-form .single_add_to_cart_button.button,
.cart-product-form .single_add_to_cart_button.button.alt{
  flex:1; background:var(--esb-brand-ink) !important; color:#fff !important;
  border:0 !important; border-radius:10px !important; box-shadow:none !important;
  font-family:var(--esb-display) !important; font-weight:600 !important; font-size:1rem !important;
  font-variant-numeric:tabular-nums; letter-spacing:0; padding:11px 18px !important;
  text-transform:none !important; transition:background .15s ease, transform .15s ease;
}
.cart-product-form .single_add_to_cart_button.button:hover{
  background:var(--esb-brand) !important; transform:translateY(-1px);
}

/* ================= 3. TÍTULOS DE SECCIÓN (tabs Elementor WoodMart) → Dir 2 ================= */
/* Fuera la barra azul de fondo con texto blanco → título en tinta con filete hairline. */
.wd-single-tabs .wd-all-open-title.title,
.wd-single-tabs .wd-tab-wrapper > .title{
  background:transparent !important; background-color:transparent !important;
  border:0 !important; border-bottom:2px solid var(--esb-line) !important;
  border-radius:0 !important; padding:0 0 12px !important; margin:34px 0 22px !important;
}
.wd-single-tabs .wd-all-open-title .elementor-heading-title,
.wd-single-tabs .wd-all-open-title h2,
.wd-single-tabs .wd-all-open-title h3,
.wd-single-tabs .wd-all-open-title span{
  color:var(--esb-ink) !important; font-family:var(--esb-display) !important;
  letter-spacing:-.01em;
}

/* ================= 4. VALORACIÓN FINAL / TEXT-EDITOR ================= */
/* Causa raíz del "texto en columna estrecha": el contenedor del text-editor viene en
   display:flex (flex-row), así que 2+ párrafos se colocan LADO A LADO y el primero se
   aplasta. Forzamos flujo en bloque para que los párrafos se apilen con normalidad. */
/* Los <p> cuelgan DIRECTAMENTE del widget text-editor (que viene en flex-row): apuntamos
   al widget, al container y al wrapper interno para que el texto fluya en bloque (apilado). */
.elementor-widget-text-editor,
.elementor-widget-text-editor > .elementor-widget-container,
.elementor-widget-text-editor .elementor-text-editor{
  display:block !important;
  flex-direction:column !important;
}
.elementor-widget-text-editor{ min-width:0; word-break:normal; overflow-wrap:break-word; }

/* ================= 5. ICONO DECORATIVO ESBELLSA (sustituto del viejo Saludprev) ================= */
/* El favicon original es 300x300; como divisor de sección se ve enorme -> lo acotamos sobrio. */
img[src*="cropped-esbellsa-favicon"]{ width:76px !important; height:auto !important; }