@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

/*
 Theme Name:   Buscador Agrícola
 Theme URI:    https://buscadoragricola.cl
 Description:  Tema hijo de Astra para el marketplace agrícola Buscador Agrícola
 Author:       Buscador Agrícola
 Author URI:   https://buscadoragricola.cl
 Template:     astra
 Version:      1.0.20
 Text Domain:  buscador-agricola
*/

/*
  ÍNDICE (orden lógico de bloques)
  1. Global / resets (espacio superior, full-width, tipografía global)
  2. Header
  3. Footer
  4. Home: hero, búsqueda, secciones, banners promo, empresas, categorías, últimos agregados
  5. Cómo funciona
  6. Planes
  7. Categorías (ba-cats)
  8. Resultados
  9. Producto
  10. Componentes / utilidades (Dokan, etc.)

  SISTEMA DE ICONOS:
  - Cómo funciona (pasos, contacto, beneficios): estilo Figma – círculo, fondo claro (verde/azul),
    icono en tono medio (verde/azul) para buen contraste. WhatsApp contacto = círculo verde (--ba-whatsapp-green) + blanco.
  - Producto, store, planes, etc.: caja verde claro + icono blanco.
  - Fondo oscuro (footer): contenedor transparente, borde claro, icono blanco.

  CONVENCIONES Y BUENAS PRÁCTICAS
  - Tokens: colores, tipografía, espaciado y breakpoints en assets/css/design-tokens.css (única fuente).
  - Nomenclatura: BEM para componentes .ba-* (bloque__elemento--modificador).
  - !important: solo para overrides de Astra, WooCommerce o Dokan; documentar con comentario si se añade uno nuevo.
  - Media queries: preferir variables --ba-bp-* (xs 420, sm 480, md 768, lg 1024, xl 1280) para consistencia.
  - Una regla por selector cuando sea posible; agrupar por componente o sección con comentario de cabecera.
  - VERSIÓN: al modificar este archivo (o assets del tema que afecten a la UI), subir Version en la cabecera
    (línea 10) para invalidar caché en producción (p. ej. 1.0.2 → 1.0.3).
*/

/* Tipografía global: --ba-font-family definido en design-tokens.css. Aplica Nunito (sobrescribe Astra, WooCommerce, Dokan). */
html,
body,
body *,
#page,
#page *,
.site,
.site *,
.site-main,
.site-main *,
.ast-container,
.ast-container *,
.entry-content,
.entry-content *,
[class*="ba-"],
[class*="ba-"] *,
.woocommerce,
.woocommerce *,
.dokan-dashboard,
.dokan-dashboard *,
.yotako-header,
.yotako-header *,
.ba-store,
.ba-store * {
  font-family: var(--ba-font-family) !important;
}

/* =========================
   CSS GLOBAL - Espacio superior CERO (prioridad máxima)
   ========================= */
/* Los !important siguientes son overrides necesarios sobre Astra (layout, padding-top). */

/* Header: sin espacio debajo para pegar contenido */
.yotako-header,
header.yotako-header,
.ba-header {
  margin-bottom: 0 !important;
}
/* Override Astra y cualquier otro: sin espacio blanco superior */
html body #content.site-content,
html body .site-content,
html body .site-content > .ast-container,
html body .ast-container,
html body .site-main,
html body .ast-container .ast-row,
html body.single-product .site-content,
html body.single-product .ast-container,
html body.page .site-content,
html body.page .ast-container,
body.ba-page-resultados #content,
body.ba-page-resultados .site-content,
body.ba-page-resultados .ast-container,
body.page-resultados #content,
body.page-resultados .site-content,
body.page-resultados .ast-container,
/* Usuario logueado: admin-bar no debe añadir espacio extra al content */
html body.admin-bar #content.site-content,
html body.admin-bar .site-content,
html body.admin-bar .site-content > .ast-container,
html body.admin-bar .ast-container,
html body.admin-bar .site-main,
body.admin-bar.ba-page-resultados #content,
body.admin-bar.ba-page-resultados .site-content,
body.admin-bar.ba-page-resultados .ast-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Layout full-width (Figma): 100% ancho en inicio, Como funciona, Categorías, Planes, Empresas, Resultados */
body.ba-layout-fullwidth #page,
body.ba-layout-fullwidth .site,
body.ba-layout-fullwidth .site-content,
body.ba-layout-fullwidth .site-content .ast-container,
body.ba-layout-fullwidth .site-main,
body.ba-layout-fullwidth .entry-content,
body.ba-layout-fullwidth .ast-container,
body.ba-layout-fullwidth .ast-container .ast-row {
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box;
}
body.ba-layout-fullwidth #page,
body.ba-layout-fullwidth .site,
body.ba-layout-fullwidth .site-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.ba-layout-fullwidth .site-content .ast-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}
body.ba-layout-fullwidth .site-main,
body.ba-layout-fullwidth .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Astra: quitar cualquier padding superior del contenedor de la entrada */
body.ba-layout-fullwidth .ast-container .entry-content,
body.ba-layout-fullwidth .site-content .ast-container .site-main {
  padding-top: 0 !important;
}
/* Sin espacio entre cabecera y primer bloque (hero); anula también márgenes/padding del editor Gutenberg */
body.ba-layout-fullwidth .entry-content > *:first-child,
body.ba-layout-fullwidth .site-main > *:first-child,
body.ba-layout-fullwidth .entry-content .wp-block-group:first-child,
body.ba-layout-fullwidth .entry-content > .wp-block-group:first-of-type,
body.ba-layout-fullwidth .site-main .wp-block-group:first-of-type,
body.ba-layout-fullwidth .entry-content .wp-block-group:first-of-type .wp-block-group {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Si el hero está dentro de un grupo, quitar espacio del contenedor que lo envuelve */
body.ba-layout-fullwidth .entry-content .ba-hero-home,
body.ba-layout-fullwidth .site-main .ba-hero-home {
  margin-top: 0 !important;
}
/* Cualquier contenedor que envuelva al hero (bloques Gutenberg, shortcode, etc.): sin espacio superior */
body.ba-layout-fullwidth .entry-content .wp-block-group:has(> .ba-hero-home),
body.ba-layout-fullwidth .site-main .wp-block-group:has(> .ba-hero-home),
body.ba-layout-fullwidth .entry-content .wp-block-shortcode:has(.ba-hero-home),
body.ba-layout-fullwidth .site-main .wp-block-shortcode:has(.ba-hero-home),
body.ba-layout-fullwidth .entry-content > div:first-child:has(.ba-hero-home),
body.ba-layout-fullwidth .entry-content > *:has(> .ba-hero-home),
body.ba-layout-fullwidth .entry-content .wp-block-group:has(> .ba-como-funciona),
body.ba-layout-fullwidth .site-main .wp-block-group:has(> .ba-como-funciona),
body.ba-layout-fullwidth .entry-content .wp-block-shortcode:has(.ba-como-funciona),
body.ba-layout-fullwidth .site-main .wp-block-shortcode:has(.ba-como-funciona),
body.ba-layout-fullwidth .entry-content > *:has(> .ba-como-funciona),
body.ba-layout-fullwidth .entry-content .wp-block-group:has(> .ba-planes-page),
body.ba-layout-fullwidth .entry-content .wp-block-shortcode:has(.ba-planes-page),
body.ba-layout-fullwidth .entry-content > *:has(> .ba-planes-page) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* WordPress block gap: quitar espacio entre bloques al inicio (solo primera posición) */
body.ba-layout-fullwidth .entry-content {
  --wp--style--block-gap: 0;
}
body.ba-layout-fullwidth .entry-content > *:first-child {
  margin-block-start: 0 !important;
}
/* Párrafo vacío antes del hero: colapsar a cero altura (fallback si el filtro no lo elimina) */
body.ba-layout-fullwidth .entry-content:has(> .ba-hero-home) > p:first-child:not(:has(*)) {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
/* Inicio, Cómo funciona y Planes: sin margen superior extra (evitar solapes) */
body.ba-layout-fullwidth section.ba-hero-home,
body.ba-layout-fullwidth section.como-hero,
body.ba-layout-fullwidth section.ba-planes-page__hero {
  margin-top: 0 !important;
}
/* Astra: contenedores sin sidebar sin margen superior */
body.ba-layout-fullwidth.ast-plain-container.ast-no-sidebar #primary,
body.ba-layout-fullwidth.ast-separate-container .ast-article-single {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Como funciona y Planes: ancho completo, sin padding lateral en el contenedor */
body.ba-layout-fullwidth .ast-container:has(.ba-como-funciona),
body.ba-layout-fullwidth .site-content .ast-container:has(.ba-como-funciona),
body.ba-layout-fullwidth .ast-container:has(.ba-planes-page),
body.ba-layout-fullwidth .site-content .ast-container:has(.ba-planes-page) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}
/* Quitar margen del primer hijo cuando es ba-como-funciona o ba-planes-page */
body.ba-layout-fullwidth .entry-content > .ba-como-funciona,
body.ba-layout-fullwidth .site-main > .ba-como-funciona,
body.ba-layout-fullwidth .entry-content .wp-block-group:has(> .ba-como-funciona),
body.ba-layout-fullwidth .entry-content .wp-block-group:has(> .como-hero),
body.ba-layout-fullwidth .entry-content > .ba-planes-page,
body.ba-layout-fullwidth .site-main > .ba-planes-page {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Tipografía Nunito ya aplicada globalmente en :root + html/body/selectores anteriores */

/* Responsivo: ancho completo en cualquier viewport (Full HD y mayores) */
@media (min-width: 1200px) {
  body.ba-layout-fullwidth .site-content .ast-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* Como funciona: sin padding lateral para ancho completo real */
  body.ba-layout-fullwidth .ast-container:has(.ba-como-funciona),
  body.ba-layout-fullwidth .site-content .ast-container:has(.ba-como-funciona) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.product.featured {
  border-bottom: 1px solid var(--ba-border);
  border-radius: 6px;
  padding: 10px;
}

/* =========================
   HEADER YOTAKO – ESTABLE
   ========================= */

.yotako-header{
  width: 100%;
  background: var(--ba-bg-white);
  border-bottom: 1px solid var(--ba-border-light);
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* wrapper principal header (logo | menu | user) */
.yotako-header .container_7276ebb59053{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;

  gap: 28px;
  padding: 8px 44px;
  min-height: 56px;

  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* menú centrado real */
.yotako-header .container_19f6c1dcd86d{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;

  /* si querés “centro óptico” como Figma, ajustá esto */
  transform: translateX(0px);
}

/* logo */
.yotako-header .container_20559f6c3621 img{
  max-height: 36px;
  width: auto;
  display: block;
}

/* botón cuenta */
#userMenuToggle{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

#userMenuToggle p{
  line-height: 1;
  margin: 0;
}

#userMenuToggle:focus{
  outline: none;
}

/* =========================
   FOOTER – AJUSTE 100% FIGMA
   (pegar al final del style.css)
   ========================= */

/* Fondo: verde oscuro según diseño web */
.ba-footer{
  background: var(--ba-bg-footer) !important;
  padding: 36px 0 42px !important;
}

/* Tarjeta verde centrada */
.ba-footer__card{
  width: 100% !important;
  background: var(--ba-bg-footer) !important;
  overflow: hidden !important;
}

/* Grilla interna */
.ba-footer__grid{
  padding: 42px 56px 26px !important;   /* más aire como Figma */
  display: grid !important;
  grid-template-columns: 1.35fr 1fr 1fr !important;
  gap: 72px !important;
  align-items: start !important;
}

/* Logo */
.ba-footer__logo{
  max-height: 46px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin-bottom: 18px !important;
  display: block !important;
}

/* Texto descriptivo */
.ba-footer__text{
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 18px !important;
  color: var(--ba-text-on-dark-muted) !important;
  max-width: 360px !important;
}

/* Títulos (Empresa / Contacto) – destacados sobre el verde */
.ba-footer__title{
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 0 18px !important;
  color: var(--ba-text-on-dark) !important;
}
/* Empresa: links uno debajo del otro */
.ba-footer__col .ba-footer__link{
  display: block !important;
  width: 100%;
  margin-bottom: 10px;
}


/* Links */
.ba-footer__link{
  font-size: 14px !important;
  line-height: 1.8 !important;
  margin-bottom: 8px !important;
  color: var(--ba-text-on-dark-muted) !important;
}
.ba-footer__link:hover{
  color: var(--ba-text-on-dark) !important;
}

/* Contacto: icono a la izquierda del dato (Figma) */
.ba-footer__contact{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.ba-footer__contact .ba-footer__link{
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  flex: 1 !important;
  min-width: 0 !important;
}
@media (max-width: 640px){
  .ba-footer__contact .ba-footer__link{
    white-space: normal !important;
  }
}
/* Iconos de contacto: en footer (fondo oscuro) = estilo “on dark”: sin caja, icono en tono claro/outline (ref. Figma) */
.ba-footer .ba-footer__icon-wrap{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: var(--ba-radius-lg) !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  flex-shrink: 0 !important;
}
.ba-footer .ba-footer__icon{
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  opacity: .95 !important;
}

/* Redes: círculos verde oscuro como Figma (mismo tono que el footer, icono blanco dentro) */
.ba-footer__socials{
  margin-top: 10px !important;
  gap: 12px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
.ba-footer__social{
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  background: var(--ba-bg-footer) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: background .2s ease, border-color .2s ease !important;
}
.ba-footer__social:hover{
  background: rgba(0,0,0,.25) !important;
  border-color: rgba(255,255,255,.4) !important;
}
/* Icono llena el círculo; cover recorta el espacio vacío si el PNG tiene padding */
.ba-footer__social-img{
  width: 100% !important;
  height: 100% !important;
  min-width: 34px !important;
  min-height: 34px !important;
  object-fit: cover !important;
  display: block !important;
  filter: brightness(0) invert(1);
}

/* Font Awesome: iconos de redes (cuando se usa filtro ba_footer_social_use_fontawesome true) */
.ba-footer__social--fa i{
  color: var(--ba-text-on-dark) !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
}

/* SVG: iconos de redes por defecto (no dependen de Font Awesome) */
.ba-footer__social--svg{
  color: var(--ba-text-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ba-footer__social--svg svg{
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}
.ba-footer__social--svg:hover{
  color: var(--ba-text-on-dark);
  opacity: 0.9;
}

/* Línea verde clara + copyright centrado (diseño web) */
.ba-footer__bottom{
  border-top: 1px solid rgba(255,255,255,.2) !important;
  padding: 22px 56px 26px !important;
  text-align: center !important;
  font-size: 13px !important;
  color: var(--ba-text-on-dark-muted) !important;
}

/* Responsive: tablet – apilar columnas */
@media (max-width: 900px){
  .ba-footer__grid{
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    padding: 34px 24px 18px !important;
  }
  .ba-footer__bottom{
    padding: 18px 24px 22px !important;
  }
}

/* Responsive: móvil – según Figma: una columna, todo alineado a la izquierda, iconos en Contacto */
@media (max-width: 640px){
  .ba-footer{
    padding: 20px 0 24px !important;
  }
  .ba-footer__card{
    max-width: 100% !important;
  }
  .ba-footer__grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 20px 20px 16px !important;
    gap: 24px !important;
  }
  .ba-footer__brand{
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .ba-footer__logo{
    max-height: 38px !important;
    margin-bottom: 10px !important;
  }
  .ba-footer__text{
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
    text-align: left !important;
  }
  .ba-footer__col{
    text-align: left !important;
  }
  .ba-footer__col .ba-footer__link{
    font-size: 13px !important;
    margin-bottom: 8px !important;
    min-height: var(--ba-touch-target, 48px);
    padding: 12px 0;
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
  }
  .ba-footer__title{
    font-size: 14px !important;
    margin-bottom: 10px !important;
  }
  /* Contacto: icono a la izquierda del dato (como Figma + iconos) */
  .ba-footer__contact{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }
  .ba-footer__contact .ba-footer__link{
    font-size: 13px !important;
    white-space: normal !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
  }
  .ba-footer__icon{
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }
  .ba-footer__socials{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-top: 4px !important;
  }
  .ba-footer__social{
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }
  .ba-footer__social-img{
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }
  .ba-footer__social--fa i{
    font-size: 1rem !important;
  }
  .ba-footer__social--svg svg{
    width: 1rem;
    height: 1rem;
  }
  .ba-footer__bottom{
    padding: 14px 20px 18px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ocultar botón scroll top si molesta */
.ast-scroll-top-icon{
  display: none !important;
}

/* FORZAR CONTRASTE COMO FIGMA */
.ba-footer,
.ba-footer * {
  color: var(--ba-text-on-dark-muted);
}
.ba-footer__title {
  color: var(--ba-text-on-dark) !important;
}

/* Solo escritorio: 3 columnas; círculos con borde ya definidos arriba. */
@media (min-width: 641px){
  .ba-footer__grid{
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 1fr !important;
    gap: 56px !important;
    align-items: flex-start !important;
  }
}

/* =========================
   HERO OFFSET GLOBAL
   ========================= */


/* =========================
   HEADER → EMPUJA CONTENIDO
   ========================= */

.yotako-header{
  position: relative;
  z-index: 100;
}

/* =========================
   BA - CATEGORÍAS / CATÁLOGO
   Diseño ancho según Figma
========================= */
/* Tipografía del sitio (misma en store, categorías, empresas, resultados) */
.ba-cats, .ba-cats *{ box-sizing:border-box; }
.ba-cats{
  margin-top: 0;
  width: 100%;
  font-family: var(--ba-font-family);
  color: var(--ba-text-primary);
}

/* Hero a ancho completo (Figma); contenido del hero centrado */
.ba-cats__hero{
  position:relative;
  overflow:hidden;
  min-height: var(--ba-hero-height-list);
  width: 100%;
  background: linear-gradient(90deg, var(--ba-hero-overlay-start), var(--ba-hero-overlay-end)), var(--ba-hero-cats-bg-image, var(--ba-hero-bg)) center/cover no-repeat;
  padding: var(--ba-hero-padding-y) var(--ba-gutter);
  box-shadow: 0 18px 40px rgba(2,6,23,.12);
}
.ba-cats__heroInner{
  max-width: 1200px;
  margin: 0 auto;
}

/* Contenedor del grid y título "Explora nuestro catálogo" */
.ba-cats__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--ba-hero-to-content-gap) var(--ba-gutter) 56px;
  width: 100%;
}

.ba-cats__heroTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ba-cats__title{
  font-size: var(--ba-font-size-subtitle-1);
  line-height: var(--ba-line-height-tight);
  font-weight: var(--ba-font-weight-extrabold);
  color: var(--ba-text-on-dark);
  margin:0 0 10px;
  padding-left: 16px;
  padding-right: 16px;
}
.ba-cats__subtitle{
  margin:0;
  color: var(--ba-text-on-dark-muted);
  font-size: var(--ba-font-size-body-4);
  padding-left: 16px;
  padding-right: 16px;
}

/* barra filtros: contenedor del form */
.ba-cats__filters{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding-left: 16px;
  padding-right: 16px;
}

/* primera fila: Región, Rubro, Categoría, Subcategoría (horizontal) */
.ba-cats__filtersRow{
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1.2fr 1.2fr;
  gap: 10px;
  align-items: end;
}

/* recuadro debajo: Cultivo, Plaga, Ingrediente activo (horizontal) */
.ba-cats__insumos-box{
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(16, 24, 40, .25);
  border: 1px solid rgba(255,255,255,.2);
  margin-top: 4px;
}
.ba-cats__insumos-box-title{
  display: block;
  font-size: var(--ba-font-size-label);
  font-weight: var(--ba-font-weight-bold);
  color: var(--ba-text-on-dark-muted);
  margin-bottom: 10px;
}
.ba-cats__insumos-filters{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  align-items: end;
}

.ba-field{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.ba-field label{
  font-size: var(--ba-font-size-label);
  color: var(--ba-text-on-dark-muted);
}
.ba-field select,
.ba-field input{
  width:100%;
  height: 40px;
  border-radius: var(--ba-radius-lg);
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(16, 24, 40, .35);
  color: var(--ba-text-on-dark);
  outline:none;
  font-family: var(--ba-font-family);
}
.ba-field select:focus,
.ba-field input:focus{
  outline: none;
  border-color: rgba(255,255,255,.45);
}
.ba-field select:disabled,
.ba-field input:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.ba-btn{
  height: 40px;
  align-self:end;
  border-radius: var(--ba-radius-lg);
  padding: 0 14px;
  border: 0;
  cursor:pointer;
  font-weight: var(--ba-font-weight-extrabold);
  font-family: var(--ba-font-family);
  color: var(--ba-text-on-dark);
  background: linear-gradient(90deg, var(--ba-primary), var(--ba-primary-hover));
  box-shadow: 0 10px 22px rgba(22,163,74,.18);
}
.ba-btn:hover{ filter: brightness(1.03); background: var(--ba-primary-hover); }
.ba-btn:active{ transform: translateY(1px); background: var(--ba-primary-active); }
.ba-btn:disabled,
.ba-btn[disabled]{
  background: var(--ba-button-disabled-bg) !important;
  color: var(--ba-button-disabled-color) !important;
  cursor: not-allowed;
  box-shadow: none;
}

/* Botón solo texto (Style/Buttons) */
.ba-btn--text{
  background: transparent !important;
  color: var(--ba-primary);
  box-shadow: none;
}
.ba-btn--text:hover{ color: var(--ba-primary-hover); }
.ba-btn--text:active{ color: var(--ba-link-active); }

/* Outline: hover relleno (Style/Buttons) */
.ba-btn--outline:disabled,
.ba-btn--outline[disabled]{
  background: var(--ba-button-disabled-bg) !important;
  color: var(--ba-button-disabled-color) !important;
  border-color: var(--ba-button-disabled-bg) !important;
}

.ba-cats__clear{
  margin-top: 10px;
  display:inline-flex;
  gap:8px;
  align-items:center;
  color: var(--ba-text-on-dark-muted);
  font-size: var(--ba-font-size-label);
  text-decoration:none;
  font-family: var(--ba-font-family);
}
.ba-cats__clear:hover{ text-decoration:underline; color: var(--ba-text-on-dark); }

/* sección catálogo (Style: títulos verde, subtítulos plomo) */
.ba-cats__sectionTitle{
  margin: 24px 0 6px;
  font-weight: var(--ba-font-weight-extrabold);
  font-size: var(--ba-font-size-h4);
  color: var(--ba-section-title-color);
}
.ba-cats__sectionHint{
  margin: 0 0 20px;
  font-size: var(--ba-font-size-subtitle-4);
  color: var(--ba-section-subtitle-color);
}
.ba-cats__count{
  margin: 0 0 16px;
  font-size: var(--ba-font-size-body-3);
  color: var(--ba-text-muted);
}
.ba-cats__pagination{
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.ba-cats__pagination .page-numbers{
  padding: 8px 14px;
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius-lg);
  text-decoration: none;
  color: var(--ba-text-primary);
  font-weight: var(--ba-font-weight-semibold);
  font-family: var(--ba-font-family);
}
.ba-cats__pagination .page-numbers:hover,
.ba-cats__pagination .page-numbers.current{
  background: var(--ba-primary);
  color: var(--ba-text-on-dark);
  border-color: var(--ba-primary);
}

/* GRID */
.ba-cats .ba-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ba-card{
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius: var(--ba-radius-xl);
  overflow:hidden;
  background: var(--ba-bg-white);
  border:1px solid var(--ba-border);
  box-shadow: var(--ba-shadow-card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  font-family: var(--ba-font-family);
}
.ba-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--ba-shadow-card-hover);
  border-color: var(--ba-primary-border);
}

.ba-card__media{
  position: relative;
  aspect-ratio: 16/10;
  background: var(--ba-bg-section);
}
.ba-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ba-card__pill{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: var(--ba-radius-md);
  font-size: var(--ba-font-size-body-5);
  font-weight: var(--ba-font-weight-bold);
  font-family: var(--ba-font-family);
  background: var(--ba-primary);
  color: var(--ba-text-on-dark);
  z-index: 1;
}

.ba-card__body{
  padding: 10px 10px 12px;
}
.ba-card__title{
  font-size: var(--ba-font-size-body-2);
  font-weight: var(--ba-font-weight-extrabold);
  line-height: var(--ba-line-height-tight);
  margin: 0 0 8px;
  color: var(--ba-text-primary);
}
.ba-card__meta{
  font-size: var(--ba-font-size-label);
  color: var(--ba-text-muted);
}
.ba-card__location::before{
  content: "📍 ";
}

.ba-pill{
  display:inline-flex;
  padding: 4px 8px;
  border-radius: var(--ba-radius-pill);
  font-size: var(--ba-font-size-body-5);
  font-weight: var(--ba-font-weight-extrabold);
  font-family: var(--ba-font-family);
  background: var(--ba-primary-light);
  color: var(--ba-primary);
  margin-bottom: 8px;
}
.ba-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  color: var(--ba-text-muted);
  font-size: var(--ba-font-size-body-5);
  font-family: var(--ba-font-family);
}
.ba-meta span{ display:inline-flex; align-items:center; gap:6px; }

/* estado vacío */
.ba-empty{
  border: 1px dashed var(--ba-border);
  background: var(--ba-bg-section);
  padding: 16px;
  border-radius: var(--ba-radius-xl);
  color: var(--ba-text-secondary);
  font-size: var(--ba-font-size-body-4);
  font-family: var(--ba-font-family);
}

/* =========================
   GUÍA DE ESTILO (carpeta Style/) – Links, tags, inputs, tabs, cards
   ========================= */
/* Enlaces (Style/Link) */
.ba-link{
  color: var(--ba-link);
  text-decoration: none;
  font-family: var(--ba-font-family);
}
.ba-link:hover{ color: var(--ba-link-hover); }
.ba-link:active{ color: var(--ba-link-active); }

/* Enlaces en contenido de secciones (Style: verde enlace) */
.entry-content .ba-section a:not(.ba-btn):not(.ba-btn--outline):not(.ba-btn--text),
.ba-section__intro a,
.ba-plans-cta__note a{
  color: var(--ba-link);
  text-decoration: none;
}
.entry-content .ba-section a:not(.ba-btn):not(.ba-btn--outline):not(.ba-btn--text):hover,
.ba-section__intro a:hover,
.ba-plans-cta__note a:hover{
  color: var(--ba-link-hover);
  text-decoration: underline;
}

/* Tags categorías (Style/Link – Tags Categorias) */
.ba-tag{
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--ba-radius-md);
  font-size: var(--ba-font-size-small);
  font-family: var(--ba-font-family);
}
.ba-tag--green{ background: var(--ba-tag-green-bg); color: var(--ba-tag-green-text); }
.ba-tag--blue{ background: var(--ba-tag-blue-bg); color: var(--ba-tag-blue-text); }
.ba-tag--orange{ background: var(--ba-tag-orange-bg); color: var(--ba-tag-orange-text); }
.ba-tag--brown{ background: var(--ba-tag-brown-bg); color: var(--ba-tag-brown-text); }

/* Inputs en fondos claros (Style/Search, A4-3) */
.ba-input-light,
input.ba-input-light,
.ba-field input.ba-input-light{
  background: var(--ba-bg-white);
  border: 1px solid var(--ba-input-border);
  color: var(--ba-text-primary);
  border-radius: var(--ba-radius-lg);
}
.ba-input-light::placeholder{ color: var(--ba-input-placeholder); }
.ba-input-light:focus{
  outline: none;
  border-color: var(--ba-input-border-focus);
}
.ba-input-light:disabled{
  background: var(--ba-input-bg-disabled);
  border-color: var(--ba-input-bg-disabled);
  cursor: not-allowed;
}

/* Card estado seleccionado (Style A4-3) */
.ba-card--selected,
.ba-card.is-selected{
  border-width: 2px;
  border-color: var(--ba-card-selected-border);
}

/* Tabs tipo píldora (Style Tab Categorias) */
.ba-tabs-pill{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--ba-tab-inactive-bg);
  border-radius: var(--ba-radius-pill);
  font-family: var(--ba-font-family);
}
.ba-tabs-pill [role="tab"],
.ba-tabs-pill .ba-tab{
  padding: 8px 16px;
  border-radius: var(--ba-radius-pill);
  border: none;
  background: transparent;
  color: var(--ba-primary);
  cursor: pointer;
  font-size: var(--ba-font-size-small);
  font-weight: var(--ba-font-weight-semibold);
}
.ba-tabs-pill [role="tab"]:hover,
.ba-tabs-pill .ba-tab:hover{ background: rgba(15, 107, 63, 0.12); }
.ba-tabs-pill [role="tab"][aria-selected="true"],
.ba-tabs-pill .ba-tab.is-active{
  background: var(--ba-tab-active-bg);
  color: var(--ba-tab-active-text);
}

/* Tabs tipo subrayado (Style Tab Empresas) */
.ba-tabs-underline{
  display: flex;
  gap: 24px;
  border-bottom: 2px solid var(--ba-border);
  font-family: var(--ba-font-family);
}
.ba-tabs-underline [role="tab"],
.ba-tabs-underline .ba-tab{
  padding: 10px 0;
  border: none;
  background: none;
  color: var(--ba-primary);
  cursor: pointer;
  font-size: var(--ba-font-size-body);
  font-weight: var(--ba-font-weight-semibold);
  margin-bottom: -2px;
  border-bottom: 2px solid transparent;
}
.ba-tabs-underline [role="tab"]:hover,
.ba-tabs-underline .ba-tab:hover{ color: var(--ba-primary-hover); }
.ba-tabs-underline [role="tab"][aria-selected="true"],
.ba-tabs-underline .ba-tab.is-active{
  border-bottom-color: var(--ba-tab-underline);
}

/* Responsive */
@media (max-width: 1024px){
  .ba-cats .ba-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Solo en móvil: filtros en columna (vertical). Desktop/tablet: filas (horizontal) */
@media (max-width: 600px){
  .ba-cats__filtersRow{ grid-template-columns: 1fr; }
  .ba-cats__insumos-filters{ grid-template-columns: 1fr; }
  .ba-btn{ width:100%; }
}
@media (max-width: 820px){
  .ba-cats .ba-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px){
  .ba-cats .ba-grid{ grid-template-columns: 1fr; }
  .ba-cats__hero{ padding: var(--ba-hero-padding-y) var(--ba-gutter); }
}

/* =========================
   CÓMO FUNCIONA - diseño validado
   [ba_como_funciona]
========================= */
.ba-como-funciona{ margin-top: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
.ba-como-funciona *{ box-sizing: border-box; }

/* Hero - ancho completo */
.como-hero{
  position: relative;
  width: 100%;
  min-height: 260px;
  padding: 48px 24px 56px;
  background: linear-gradient(90deg, rgba(7,32,43,.92), rgba(7,32,43,.55)), var(--hero-bg) center/cover no-repeat;
  overflow: hidden;
}
.como-hero__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.15);
  pointer-events: none;
}
.como-hero__container{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--ba-gutter);
  padding-right: var(--ba-gutter);
}
.como-hero__content{ text-align: left; }
.como-hero__pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--ba-primary);
  color: var(--ba-text-on-dark);
  font-size: var(--ba-font-size-body-3);
  font-weight: var(--ba-font-weight-semibold);
  font-family: var(--ba-font-family);
  border-radius: var(--ba-radius-pill);
  margin-bottom: 16px;
}
.como-hero__pill svg,
.como-hero__pill .como-hero__pill-icon{ width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; }
.como-hero__title{
  margin: 0 0 12px;
  font-size: var(--ba-font-size-h1);
  font-weight: var(--ba-font-weight-extrabold);
  font-family: var(--ba-font-family);
  color: var(--ba-text-on-dark);
  line-height: var(--ba-line-height-tight);
}
.como-hero__subtitle{
  margin: 0;
  font-size: var(--ba-font-size-body-2);
  font-family: var(--ba-font-family);
  color: var(--ba-text-on-dark-muted);
  max-width: 560px;
}

/* 3 pasos - ancho completo (Figma: pill y título centrados) */
.ba-steps{ width: 100%; padding: 48px 24px 56px; background: var(--ba-bg-section); }
.ba-steps__inner{ max-width: 1200px; margin: 0 auto; text-align: center; padding-left: var(--ba-gutter); padding-right: var(--ba-gutter); }
.ba-steps__pill{
  display: inline-block;
  padding: 6px 14px;
  background: var(--ba-primary);
  color: var(--ba-text-on-dark);
  font-size: var(--ba-font-size-subtitle-3);
  font-weight: var(--ba-font-weight-semibold);
  font-family: var(--ba-font-family);
  border-radius: var(--ba-radius-pill);
  margin-bottom: 12px;
}
.ba-steps__title{
  margin: 0 0 32px;
  font-size: var(--ba-font-size-h2);
  font-weight: var(--ba-font-weight-bold);
  font-family: var(--ba-font-family);
  color: var(--ba-text-primary);
  line-height: var(--ba-line-height-tight);
}
.ba-steps__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  margin-bottom: 32px;
}
.ba-steps__line{
  position: absolute;
  top: 52px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--ba-border);
  z-index: 0;
}
.ba-step{
  position: relative;
  z-index: 1;
  padding: 28px 20px;
  background: var(--ba-bg-white);
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius-xl);
  text-align: center;
  font-family: var(--ba-font-family);
}
/* Iconos pasos: Figma – caja fondo verde claro, borde verde (Paso 1 y 3), borde azul/gris (Paso 2); iconos en color (verde, azul, verde claro) */
.ba-step__icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 12px;
  background: var(--ba-primary-light);
  border: 2px solid var(--ba-primary);
  filter: none;
}
.ba-step__icon--g1,
.ba-step__icon--g3{ background: var(--ba-primary-light); border-color: var(--ba-primary); }
/* Paso 2 (Asesor IA): borde gris como en Figma */
.ba-step__icon--g2{ background: var(--ba-primary-light); border-color: var(--ba-border); }
.ba-step__icon img{
  width: 28px;
  height: 28px;
  max-width: 32px;
  max-height: 32px;
  min-width: 28px;
  min-height: 28px;
  object-fit: contain;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}
/* Anular cualquier filtro/opacidad heredada (tema, entry-content, etc.): iconos en colores originales Figma */
body .ba-steps .ba-step__icon img,
body .ba-steps .ba-step__icon--g1 img,
body .ba-steps .ba-step__icon--g2 img,
body .ba-steps .ba-step__icon--g3 img {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}
.ba-step__tag{
  display: inline-block;
  padding: 4px 10px;
  font-size: var(--ba-font-size-body-4);
  font-weight: var(--ba-font-weight-bold);
  font-family: var(--ba-font-family);
  border-radius: var(--ba-radius-md);
  margin-bottom: 10px;
}
.ba-step__tag--g1{ background: var(--ba-tag-green-bg); color: var(--ba-tag-green-text); }
.ba-step__tag--g2{ background: var(--ba-tag-blue-bg); color: var(--ba-tag-blue-text); }
.ba-step__tag--g3{ background: var(--ba-tag-green-bg); color: var(--ba-tag-green-text); }
.ba-step__headline{ margin: 0 0 8px; font-size: var(--ba-font-size-body-2); font-weight: var(--ba-font-weight-bold); color: var(--ba-text-primary); }
.ba-step__text{ margin: 0; font-size: var(--ba-font-size-body-2); color: var(--ba-text-muted); }
.ba-steps__cta{ text-align: center; }
.ba-steps__button{
  display: inline-block;
  padding: 14px 28px;
  background: var(--ba-primary);
  color: var(--ba-text-on-dark);
  font-weight: var(--ba-font-weight-semibold);
  font-family: var(--ba-font-family);
  text-decoration: none;
  border-radius: var(--ba-radius-lg);
  transition: background .2s;
}
.ba-steps__button:hover{ background: var(--ba-primary-hover); color: var(--ba-text-on-dark); }

/* CTA Vendedores - ancho completo (Figma: pill, título y cards centrados) */
.ba-plans-cta{ width: 100%; padding: 48px 24px 56px; }
.ba-plans-cta__inner{ max-width: 1200px; margin: 0 auto; text-align: center; padding-left: var(--ba-gutter); padding-right: var(--ba-gutter); }
.ba-plans-cta__pill{
  display: inline-block;
  padding: 6px 14px;
  background: var(--ba-primary);
  color: var(--ba-text-on-dark);
  font-size: var(--ba-font-size-subtitle-3);
  font-weight: var(--ba-font-weight-semibold);
  font-family: var(--ba-font-family);
  border-radius: var(--ba-radius-pill);
  margin-bottom: 12px;
}
.ba-plans-cta__title{
  margin: 0 0 8px;
  font-size: var(--ba-font-size-h2);
  font-weight: var(--ba-font-weight-bold);
  font-family: var(--ba-font-family);
  color: var(--ba-text-primary);
  line-height: var(--ba-line-height-tight);
}
.ba-plans-cta__subtitle{ margin: 0 0 24px; font-size: var(--ba-font-size-body-2); font-family: var(--ba-font-family); color: var(--ba-section-subtitle-color); }
.ba-plans-cta__cards{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 16px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.ba-contact-card{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius-xl);
  background: var(--ba-bg-white);
  text-decoration: none !important;
  color: inherit;
  font-family: var(--ba-font-family);
  transition: border-color .2s, box-shadow .2s;
}
.ba-contact-card:hover{ border-color: var(--ba-primary); box-shadow: var(--ba-shadow-card); }
/* Iconos contacto: estilo Figma – círculo verde claro + icono verde (email y WhatsApp con icono chat genérico). Sin subrayado en icono. */
.ba-contact-card__icon{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ba-tag-green-bg);
  border: none;
  text-decoration: none !important;
}
.ba-contact-card__icon img{
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 1;
  filter: none !important;
}
.ba-contact-card__meta{ display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.ba-contact-card__label{ font-size: var(--ba-font-size-body-3); color: var(--ba-text-muted); text-decoration: none; }
.ba-contact-card__value{ font-size: var(--ba-font-size-body-2); font-weight: var(--ba-font-weight-semibold); color: var(--ba-text-primary); text-decoration: none; }
.ba-plans-cta__note{
  margin: 0 0 24px;
  font-size: var(--ba-font-size-body-2);
  color: var(--ba-section-subtitle-color);
  font-family: var(--ba-font-family);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ba-plans-cta__dot img{ width: 16px; height: 16px; vertical-align: middle; }
.ba-plans-cta__actions{ text-align: center; }
.ba-plans-cta__button{
  display: inline-block;
  padding: 14px 28px;
  background: var(--ba-primary);
  color: var(--ba-text-on-dark);
  font-weight: var(--ba-font-weight-semibold);
  font-family: var(--ba-font-family);
  text-decoration: none;
  border-radius: var(--ba-radius-lg);
  transition: background .2s;
}
.ba-plans-cta__button:hover{ background: var(--ba-primary-hover); color: var(--ba-text-on-dark); }

/* Beneficios - ancho completo (Figma: pill y título centrados, grid 3 columnas) */
.ba-benefits{ width: 100%; padding: 48px 24px 56px; background: var(--ba-bg-section); }
.ba-benefits__inner{ max-width: 1200px; margin: 0 auto; text-align: center; padding-left: var(--ba-gutter); padding-right: var(--ba-gutter); }
.ba-benefits__pill{
  display: inline-block;
  padding: 6px 14px;
  background: var(--ba-primary);
  color: var(--ba-text-on-dark);
  font-size: var(--ba-font-size-subtitle-3);
  font-weight: var(--ba-font-weight-semibold);
  font-family: var(--ba-font-family);
  border-radius: var(--ba-radius-pill);
  margin-bottom: 12px;
}
.ba-benefits__title{
  margin: 0 0 32px;
  font-size: var(--ba-font-size-h2);
  font-weight: var(--ba-font-weight-bold);
  font-family: var(--ba-font-family);
  color: var(--ba-text-primary);
  line-height: var(--ba-line-height-tight);
}
.ba-benefits__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
}
.ba-benefit{
  display: flex;
  gap: 20px;
  padding: 24px;
  background: var(--ba-bg-white);
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius-xl);
  font-family: var(--ba-font-family);
}
/* Iconos beneficios: estilo Figma – círculo, fondo claro, icono en tono medio (verde/azul) para buen contraste */
.ba-benefit__icon{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: var(--ba-tag-green-bg);
  border: none;
}
.ba-benefit__icon img{
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: none !important;
}
.ba-benefit__icon--b, .ba-benefit__icon--g, .ba-benefit__icon--m{ display: flex; align-items: center; justify-content: center; }
/* Azul (Figma): Contacto directo, Especializado */
.ba-benefit__icon--blue{
  background: var(--ba-tag-blue-bg) !important;
}
.ba-benefit__icon--blue img{
  filter: none !important;
}
.ba-benefit__icon--blue .fab.fa-whatsapp{
  color: var(--ba-tag-blue-text) !important;
  opacity: 1;
  filter: none;
}
/* WhatsApp marca (solo si se usa sin --blue): círculo verde, icono blanco */
.ba-benefit__icon--wa:not(.ba-benefit__icon--blue){
  background: var(--ba-whatsapp-green) !important;
}
.ba-benefit__icon--wa:not(.ba-benefit__icon--blue) .fab.fa-whatsapp{ color: #fff !important; opacity: 1; filter: none; }
.ba-benefit__icon--wa::before,
.ba-benefit__icon--wa::after{ display: none !important; }
.ba-benefit__icon--wa img{ filter: none !important; }
.ba-benefit__content{ flex: 1; }
.ba-benefit__headline{ margin: 0 0 8px; font-size: var(--ba-font-size-body-2); font-weight: var(--ba-font-weight-bold); color: var(--ba-text-primary); }
.ba-benefit__text{ margin: 0; font-size: var(--ba-font-size-body-2); color: var(--ba-text-muted); }

@media (max-width: 1024px){
  .ba-benefits__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
  .ba-steps__grid{ grid-template-columns: 1fr; }
  .ba-steps__line{ display: none; }
  .ba-plans-cta__cards{ grid-template-columns: 1fr; max-width: none; }
  .ba-benefits__grid{ grid-template-columns: 1fr; }
}

/* =========================
   CÓMO FUNCIONA - legacy (.ba-cf) - mantener por compatibilidad
========================= */
.ba-cf{ margin-top: 0; width: 100%; box-sizing: border-box; }
.ba-cf *{ box-sizing: border-box; }

/* Hero a ancho completo (Figma) - legacy */
.ba-cf__hero{
  position: relative;
  margin-top: 0;
  width: 100%;
  min-height: var(--ba-hero-height-page);
  padding: var(--ba-hero-padding-y) var(--ba-gutter);
  background-size: cover;
  background-position: center;
  border-radius: 0;
  overflow: hidden;
}

/* Contenedor de secciones con max-width */
.ba-cf__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--ba-hero-to-content-gap) var(--ba-gutter) 48px;
}
.ba-cf__pill{
  display: inline-block;
  padding: 8px 16px;
  background: rgba(34, 197, 94, 0.9);
  color: var(--ba-text-on-dark);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 999px;
  margin-bottom: 20px;
}
.ba-cf__heroTitle{
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  color: var(--ba-text-on-dark);
  line-height: 1.2;
}
.ba-cf__heroSub{
  margin: 0;
  font-size: 1rem;
  color: var(--ba-text-on-dark-muted);
  max-width: 560px;
}

.ba-cf__section{ padding: 40px 0 32px; }
.ba-cf__sectionTitle{
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ba-primary);
}
.ba-cf__sectionDesc{ margin: 0 0 20px; color: var(--ba-text-secondary); font-size: 1rem; }
.ba-cf__sectionSub{ margin: 0 0 24px; color: var(--ba-text-muted); font-size: 1rem; }

.ba-cf__steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 28px;
}
.ba-cf__step{
  padding: 24px 20px;
  background: var(--ba-bg-white);
  border: 1px solid var(--ba-border);
  border-radius: 12px;
  text-align: center;
}
.ba-cf__stepIcon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--ba-tag-green-bg);
  color: var(--ba-primary);
  font-size: 1.5rem;
  border-radius: 12px;
  margin-bottom: 12px;
}
.ba-cf__stepIcon--alt{ background: var(--ba-tag-blue-bg); color: var(--ba-tag-blue-text); }
.ba-cf__stepTitle{ margin: 0 0 8px; font-size: 1.05rem; font-weight: 700; color: #0f172a; }
.ba-cf__stepDesc{ margin: 0; font-size: 0.9rem; color: var(--ba-text-muted); }

.ba-cf__contactCards{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 16px;
}
.ba-cf__contactCard{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  border: 1px solid var(--ba-border);
  border-radius: 12px;
  background: var(--ba-bg-white);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.ba-cf__contactCard:hover{ border-color: var(--ba-primary); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.ba-cf__contactIcon{ font-size: 1.75rem; margin-bottom: 8px; }
.ba-cf__contactLabel{ font-size: 0.85rem; color: var(--ba-text-muted); margin-bottom: 4px; }
.ba-cf__contactValue{ font-size: 1rem; font-weight: 600; color: #0f172a; }
.ba-cf__note{ margin: 0 0 20px; font-size: 0.9rem; color: var(--ba-text-muted); }

.ba-cf__ctaWrap{ margin: 0 0 8px; text-align: center; }
.ba-cf__cta{
  display: inline-block;
  padding: 14px 28px;
  background: var(--ba-primary);
  color: var(--ba-text-on-dark);
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  transition: background .2s;
}
.ba-cf__cta:hover{ background: var(--ba-primary-hover); color: var(--ba-text-on-dark); }

.ba-cf__features{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.ba-cf__feature{
  padding: 24px 20px;
  background: var(--ba-bg-white);
  border: 1px solid var(--ba-border);
  border-radius: 12px;
}
.ba-cf__featureIcon{ font-size: 1.75rem; display: block; margin-bottom: 10px; }
.ba-cf__featureTitle{ margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: #0f172a; }
.ba-cf__featureDesc{ margin: 0; font-size: 0.88rem; color: var(--ba-text-muted); }

.ba-cf__waFloat{
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ba-whatsapp-green);
  color: var(--ba-text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  z-index: 999;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.ba-cf__waFloat:hover{ transform: scale(1.05); box-shadow: 0 6px 20px rgba(0,0,0,.25); color: var(--ba-text-on-dark); }

@media (max-width: 768px){
  .ba-cf__steps{ grid-template-columns: 1fr; }
  .ba-cf__contactCards{ grid-template-columns: 1fr; }
  .ba-cf__features{ grid-template-columns: 1fr; }
  .ba-cf__waFloat{ right: 16px; bottom: 16px; width: 48px; height: 48px; font-size: 1.5rem; }
}

/* =========================
   BA - EMPRESAS LISTADO
========================= */
/* =========================
   BA - EMPRESAS LISTADO (como mock)
========================= */
.ba-emp, .ba-emp *{ box-sizing:border-box; }
.ba-emp{ margin-top: 0; width: 100%; font-family: var(--ba-font-family); color: var(--ba-text-primary); }
.ba-emp__inner{ max-width:1200px; margin:0 auto; padding: var(--ba-hero-to-content-gap) 16px 56px; }

/* HERO a ancho completo (Figma) */
.ba-emp__hero{
  position:relative;
  margin-top: 0;
  width: 100%;
  border-radius: 0;
  overflow:hidden;
  min-height: var(--ba-hero-height-list);
  padding: var(--ba-hero-padding-y) var(--ba-gutter);
  background: linear-gradient(90deg, var(--ba-hero-overlay-start), var(--ba-hero-overlay-end)), var(--ba-hero-emp-bg-image, var(--ba-hero-bg)) center/cover no-repeat;
}
.ba-emp__heroContent{
  max-width:1200px;
  margin:0 auto;
  padding: 0 var(--ba-gutter);
}
.ba-emp__crumbs{
  font-size:12px;
  color: var(--ba-text-on-dark-muted);
  margin-bottom: 10px;
}
.ba-emp__title{
  margin:0 0 6px;
  font-size: 22px;
  font-weight: 900;
  color: var(--ba-text-on-dark);
}
.ba-emp__subtitle{
  margin:0;
  font-size: 12px;
  color: var(--ba-text-on-dark-muted);
}

/* FILTROS (fila, como el mock) */
.ba-emp__filtersBar{
  max-width:1200px;
  margin: 14px auto 0; /* “sube” un poco sobre el hero como en el mock */
  padding: 0 16px;
}
.ba-emp__filters{
  display:grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 12px;
  background: var(--ba-bg-white);
  border:1px solid var(--ba-border);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 12px 26px rgba(2,6,23,.08);
}

.ba-emp__control{
  position:relative;
}
.ba-emp__input,
.ba-emp__select{
  width:100%;
  height: 40px;
  border-radius: 10px;
  border:1px solid var(--ba-border);
  background: var(--ba-bg-white);
  padding: 0 12px;
  outline: none;
  font-size: 13px;
  color: var(--ba-text-primary);
}
.ba-emp__input::placeholder{ color:#94a3b8; }
.ba-emp__select{ padding-right: 34px; }
.ba-emp__icon{
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .55;
  font-size: 14px;
  pointer-events:none;
}

/* HEAD lista */
.ba-emp__listHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin: 18px 0 10px;
}
.ba-emp__listTitle{
  margin:0;
  font-size: 16px;
  font-weight: 900;
}
.ba-emp__count{
  font-size: 12px;
  color: var(--ba-text-muted);
  white-space: nowrap;
}

/* GRID logos */
.ba-emp__grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
.ba-emp__card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height: 120px;
  padding: 18px 14px;
  border-radius: 12px;
  border:1px solid var(--ba-border);
  background: var(--ba-bg-white);
  box-shadow: 0 8px 16px rgba(2,6,23,.05);
  text-decoration:none;
  color:inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ba-emp__card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(2,6,23,.08);
}
.ba-emp__logo{
  width: 120px;
  height: 56px;
  object-fit: contain;
  display:block;
}
.ba-emp__name{
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ba-text-primary);
  text-align: center;
  line-height: 1.2;
}

/* empty */
.ba-emp__empty{
  border: 1px dashed var(--ba-border);
  background:var(--ba-bg-section);
  padding: 16px;
  border-radius: 12px;
  color: var(--ba-text-secondary);
  font-size: 13px;
}

/* responsive */
@media (max-width: 1024px){
  .ba-emp__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  .ba-emp__filters{ grid-template-columns: 1fr; }
  .ba-emp__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px){
  .ba-emp__grid{ grid-template-columns: 1fr; }
}
/* =========================
   BA - RESULTADOS (match mock)
   Fuente Nunito cargada via wp_enqueue_style en functions.php
========================= */

/* =========================
   BA - RESULTADOS (CSS COMPLETO)
   - Hero search full width (100vw) con background
   - Contenido alineado a container (1200px + 16px)
   - margin-top 14vh
   - Tipografía Nunito
========================= */

.ba-res, .ba-res *{ box-sizing:border-box; }

.ba-res{
  margin-top: 0 !important;
  width: 100%;
  font-family: var(--ba-font-family);
  color: var(--ba-text-primary);
}

/* container: promos + layout (hero ya va fuera, full width) */
.ba-res__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 56px;
}

/* Hero búsqueda a ancho completo (Figma) */
.ba-res__topSearchWrap{
  position: relative;
  width: 100%;
  overflow: hidden;

  /* look del diseño: recto, full */
  border-radius: 0 !important;

  /* altura y aire del hero */
  min-height: 78px;
  display:flex;
  align-items:center;
  padding: 18px 0;

  background-color: var(--ba-primary);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* overlay para legibilidad */
.ba-res__topSearchOverlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(7,32,43,.55), rgba(7,32,43,.25));
  pointer-events:none;
}

/* form alineado al container */
.ba-res__topSearch{
  position: relative;
  width: calc(100% - 32px);
  max-width: 1200px;
  margin: 0 auto !important;

  display:flex;
  align-items:center;
  gap: 10px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(229,231,235,.9);
  border-radius: var(--ba-radius-xl);
  padding: 10px 12px;

  box-shadow: var(--ba-shadow-card-hover);
}

.ba-res__topSearch input{
  border:0;
  outline:none;
  flex:1;
  height: 36px;
  font-size: var(--ba-font-size-body-4);
  padding: 0 6px;
  font-family: var(--ba-font-family);
  background: transparent;
  color: var(--ba-text-primary);
}
.ba-res__topSearch input::placeholder{
  color: var(--ba-input-placeholder);
  font-weight: var(--ba-font-weight-semibold);
}

.ba-res__topSearch button{
  border:0;
  width: 42px;
  height: 36px;
  border-radius: var(--ba-radius-lg);
  cursor:pointer;
  background: var(--ba-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink: 0;
}
.ba-res__topSearch button:hover{
  background: var(--ba-primary-hover);
}
.ba-res__topSearch button img,
.ba-res__topSearch button svg{ width:20px; height:20px; display:block; flex-shrink:0; }
.ba-res__topSearch button svg{
  stroke:#ffffff;
  stroke-width: 2.5;
  fill: none;
}

/* =========================
   PROMOS
========================= */
.ba-res__promos{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0 18px;
  padding: 0; /* alineado al container */
}

.ba-promo{
  border-radius: 12px;
  overflow:hidden;
  border:1px solid var(--ba-border);
  box-shadow: 0 10px 22px rgba(2,6,23,.06);

  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;

  padding: 14px;
  text-decoration:none;
  color:inherit;
}

.ba-promo--green{ background: #dff0b2; }
.ba-promo--yellow{ background: #f5d86c; }

.ba-promo__img{
  width: 120px;
  height: 78px;
  border-radius: 10px;
  object-fit: cover;
}

.ba-promo__title{
  margin:0 0 6px;
  font-size: var(--ba-font-size-label);
  font-weight: var(--ba-font-weight-extrabold);
  font-family: var(--ba-font-family);
  color: var(--ba-text-primary);
}

.ba-promo__text{
  margin:0;
  font-size: var(--ba-font-size-body-5);
  font-weight: var(--ba-font-weight-semibold);
  font-family: var(--ba-font-family);
  color: var(--ba-text-secondary);
  line-height: var(--ba-line-height-body);
}

/* =========================
   LAYOUT (SIDEBAR + GRID)
========================= */
.ba-res__layout{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  align-items:start;
  padding: 0; /* NO padding extra, lo maneja el container */
}

/* =========================
   SIDEBAR FILTERS
========================= */
.ba-filters{
  border: 1px solid var(--ba-border);
  background: var(--ba-bg-white);
  border-radius: var(--ba-radius-xl);
  padding: 16px;
  box-shadow: var(--ba-shadow-card);
}

.ba-filters__group{
  display:flex;
  flex-direction:column;
  gap: 6px;
  margin-bottom: 10px;
}

.ba-filters label{
  font-size: var(--ba-font-size-body-5);
  color: var(--ba-text-primary);
  font-weight: var(--ba-font-weight-extrabold);
  font-family: var(--ba-font-family);
}

.ba-filters select{
  width:100%;
  height: 40px;
  border-radius: var(--ba-radius-lg);
  border: 1px solid var(--ba-input-border);
  padding: 0 10px;
  font-size: var(--ba-font-size-label);
  outline: none;
  font-family: var(--ba-font-family);
  background: var(--ba-bg-white);
  color: var(--ba-text-primary);
}
.ba-filters select:focus{
  border-color: var(--ba-input-border-focus);
}

.ba-filters select:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* Botones: tipografía pedida */
.ba-filters__btn,
.ba-filters__btn--apply,
.ba-filters__btn--clear{
  font-family: var(--ba-font-family);
  font-weight: 600; /* SemiBold */
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0;
  text-align: center;
}

.ba-filters__btn{
  width:100%;
  min-height: 44px;
  border-radius: var(--ba-radius-md);
  border: 2px solid var(--ba-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.ba-filters__btn--apply{
  background: var(--ba-primary);
  color: var(--ba-text-on-dark);
  margin-top: 8px;
}
.ba-filters__btn--apply:hover{
  background: var(--ba-primary-hover);
  color: var(--ba-text-on-dark);
}

.ba-filters__btn--clear{
  background: var(--ba-bg-white);
  color: var(--ba-primary);
  margin-top: 8px;
}
.ba-filters__btn--clear:hover{
  background: var(--ba-primary-light);
  color: var(--ba-primary-hover);
}

/* =========================
   CONTENT HEAD (título + chips)
========================= */
.ba-res__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ba-res__h2{
  margin:0;
  font-size: var(--ba-font-size-body-2);
  font-weight: var(--ba-font-weight-extrabold);
  color: var(--ba-section-title-color);
}

.ba-res__count{
  margin: 6px 0 0;
  font-size: var(--ba-font-size-label);
  color: var(--ba-text-muted);
  font-weight: var(--ba-font-weight-bold);
}

.ba-res__sort{
  display:flex;
  gap: 8px;
  margin-top: 2px;
}

.ba-res__pagination{
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #eef2f0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.ba-res__pagination .page-numbers{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ba-res__pagination .page-numbers li{
  list-style: none;
  margin: 0;
}

.ba-res__pagination a.page-numbers,
.ba-res__pagination span.page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  background: #fff;
  border: 1px solid #e6eae7;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}

.ba-res__pagination a.page-numbers:hover{
  background: #e9f7ef;
  border-color: #0f6b3f;
  color: #0f6b3f;
}

.ba-res__pagination span.current{
  background: #0f6b3f !important;
  color: #fff !important;
  border-color: #0f6b3f !important;
}

.ba-res__pagination span.dots{
  border: none !important;
  background: transparent !important;
}

.ba-chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--ba-border);
  background: var(--ba-bg-white);
  font-size: 11px;
  font-weight: 900;
  color: var(--ba-text-primary);
  white-space: nowrap;
}

/* Si te quedó .results con padding en otro lado */
.results{ padding: 0 !important; }

/* =========================
   GRID PRODUCTS
========================= */
.ba-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ba-card{
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius: 14px;
  overflow:hidden;
  background: var(--ba-bg-white);
  border:1px solid var(--ba-border);
  box-shadow: 0 10px 20px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}

.ba-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(2,6,23,.10);
}

.ba-card__media{
  aspect-ratio: 16/10;
  background: var(--ba-bg-section);
}

.ba-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ba-card__body{
  padding: 10px 10px 12px;
}

.ba-pill{
  display:inline-flex;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 900;
  background: var(--ba-primary-light);
  color:var(--ba-primary);
  margin-bottom: 8px;
}

.ba-card__title{
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--ba-text-primary);
}

.ba-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  color: var(--ba-text-muted);
  font-size: 11px;
  font-weight: 700;
}

.ba-meta span{
  display:inline-flex;
  align-items:center;
  gap: 6px;
}

.ba-empty{
  border: 1px dashed var(--ba-border);
  background:var(--ba-bg-section);
  padding: 16px;
  border-radius: 14px;
  color: var(--ba-text-secondary);
  font-size: 13px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1024px){
  .ba-res__layout{ grid-template-columns: 260px 1fr; }
  .ba-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px){
  .ba-res__promos{ grid-template-columns: 1fr; }
  .ba-res__layout{ grid-template-columns: 1fr; }
}

/* Container y gutter: definidos en assets/css/design-tokens.css */

/* HERO: hacerlo container y más a la izquierda */
.hero-agro{
  padding-left: var(--ba-gutter) !important;
  padding-right: var(--ba-gutter) !important;
}

.hero-agro__content{
  max-width: var(--ba-container) !important;
  margin-left: var(--ba-gutter) !important;
  margin-right: var(--ba-gutter) !important;
}
/* el search que sea del mismo ancho del container */
.hero-agro__search{
  max-width: var(--ba-container) !important;
}

/* =========================
   HERO GLOBAL HOME [ba_hero_home] – Formato referencia/Figma
========================= */
.ba-hero-home{
  padding: var(--ba-hero-padding-y) var(--ba-gutter);
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
  min-height: var(--ba-hero-height-primary);
  width: 100%;
  box-sizing: border-box;
}
/* Hero oscuro: más alto, pegado a cabecera. Imagen por variable (inline mínima) para cachear gradient en CSS */
.ba-hero-home--dark{
  background: linear-gradient(180deg, var(--ba-hero-overlay-start) 0%, var(--ba-hero-overlay-end) 100%), var(--ba-hero-home-bg-image, var(--ba-hero-bg)) center/cover no-repeat;
  padding-top: var(--ba-hero-padding-y);
  padding-bottom: var(--ba-hero-padding-y);
  min-height: var(--ba-hero-height-primary);
}
.ba-hero-home--dark .ba-hero-home__title{
  color: var(--ba-text-on-dark) !important;
  font-size: var(--ba-font-size-h1);
  font-family: var(--ba-font-family);
  margin-bottom: 12px;
}
.ba-hero-home--dark .ba-hero-home__subtitle{
  color: var(--ba-text-on-dark-muted) !important;
  font-size: var(--ba-font-size-body-2);
  font-family: var(--ba-font-family);
  margin-bottom: 28px;
}
.ba-hero-home__inner{
  max-width: var(--ba-container);
  margin: 0 auto;
  padding-left: var(--ba-gutter);
  padding-right: var(--ba-gutter);
  width: 100%;
  box-sizing: border-box;
}
.ba-hero-home__title{
  font-size: var(--ba-font-size-h1);
  font-weight: var(--ba-font-weight-bold);
  font-family: var(--ba-font-family);
  color: var(--ba-text-primary);
  margin: 0 0 12px;
  line-height: var(--ba-line-height-tight);
}
.ba-hero-home__subtitle{
  font-size: var(--ba-font-size-body-2);
  font-family: var(--ba-font-family);
  color: var(--ba-text-secondary);
  margin: 0 0 24px;
  max-width: min(560px, 100%);
}
/* Barra de búsqueda: ancho completo del contenedor, centrada (Figma) */
.ba-hero-home__search-wrap{
  display: flex;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.ba-hero-home__search{
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: stretch;
  min-height: 56px;
  border-radius: var(--ba-radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  background: var(--ba-bg-white);
  border: 1px solid var(--ba-border);
}
.ba-hero-home--dark .ba-hero-home__search{
  background: var(--ba-bg-white);
  border-color: var(--ba-border);
}
/* Región: altura fija y padding generoso para que el texto no se corte en ningún navegador */
.ba-hero-home__search .ba-hero-home__region{
  width: auto;
  min-width: 160px;
  max-width: min(200px, 38vw);
  height: 56px;
  min-height: 56px;
  padding: 0 36px 0 16px;
  border: 0;
  border-right: 1px solid var(--ba-border);
  border-radius: 0;
  background: var(--ba-bg-white);
  color: var(--ba-text-secondary);
  font-size: 1rem;
  font-family: inherit;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  line-height: 56px;
  box-sizing: border-box;
}
.ba-hero-home__search .ba-hero-home__region option{
  background: var(--ba-bg-white);
  color: var(--ba-text-secondary);
  padding: 8px;
}
.ba-hero-home__search input{
  flex: 1;
  min-height: 56px;
  padding: 0 18px;
  border: 0;
  font-size: var(--ba-font-size-body-2);
  font-family: var(--ba-font-family);
  background: var(--ba-bg-white);
  min-width: 0;
  line-height: 1.4;
  box-sizing: border-box;
}
.ba-hero-home__search input::placeholder{
  color: var(--ba-input-placeholder);
}
.ba-hero-home__search button{
  min-width: 56px;
  min-height: 56px;
  padding: 0 20px;
  background: var(--ba-primary);
  color: var(--ba-text-on-dark);
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
}
.ba-hero-home__search button svg{
  display: block;
}
@media (max-width: 768px){
  .ba-hero-home{ padding: var(--ba-hero-padding-y) var(--ba-gutter); }
  .ba-hero-home--dark{ padding-top: var(--ba-hero-padding-y); padding-bottom: var(--ba-hero-padding-y); min-height: var(--ba-hero-height-page); }
  .ba-hero-home__search{ min-height: 52px; }
  .ba-hero-home__search .ba-hero-home__region{ height: 52px; min-height: 52px; min-width: 0; max-width: min(180px, 42vw); padding: 0 32px 0 12px; font-size: 0.95rem; line-height: 52px; background-position: right 10px center; }
  .ba-hero-home__search input{ min-height: 52px; padding: 0 14px; font-size: 0.95rem; }
  .ba-hero-home__search button{ min-height: 52px; min-width: 52px; padding: 0 16px; }
}
@media (max-width: 480px){
  .ba-hero-home{ padding: var(--ba-hero-padding-y) var(--ba-gutter); }
  .ba-hero-home--dark{ padding-top: var(--ba-hero-padding-y); padding-bottom: var(--ba-hero-padding-y); min-height: var(--ba-hero-height-page); }
  .ba-hero-home__search{ flex-wrap: wrap; align-items: stretch; min-height: 0; }
  .ba-hero-home__search .ba-hero-home__region{ height: 52px; min-height: 52px; max-width: 100%; min-width: 0; border-right: 0; border-bottom: 1px solid var(--ba-border); padding: 0 32px 0 12px; line-height: 52px; background-position: right 10px center; }
  .ba-hero-home__search input{
    order: 2;
    flex: 1 1 100%;
    min-height: 52px;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 20px 20px;
  }
  /* En móvil el botón de búsqueda es la lupa; ocultamos el botón verde (se envía con Enter) */
  .ba-hero-home__search button{ display: none !important; }
}

/* =========================
   BUENAS PRÁCTICAS MÓVIL (Buscador Agrícola – Figma referencia)
   Touch targets ≥48px, legibilidad, sin afectar escritorio
========================= */
@media (max-width: 768px){
  .ba-hero-home__title{ font-size: var(--ba-title-size-mobile); line-height: 1.25; }
  .ba-hero-home__subtitle{ font-size: var(--ba-subtitle-size-mobile); }
  .ba-hero-home__search button{ min-height: var(--ba-touch-target); min-width: var(--ba-touch-target); }
  .ba-section .ba-btn--outline{ min-height: var(--ba-touch-target); padding: 12px 20px; display: inline-flex; align-items: center; justify-content: center; }
  .ba-section__head{ gap: 14px; margin-bottom: 18px; }
  .ba-section__title{ font-size: var(--ba-title-size-mobile); }
  .ba-categoria-card{ padding: 14px 12px; min-height: 0; }
  .empresa-card{ padding: 12px 10px 14px; }
}
@media (max-width: 480px){
  .empresas-agro__grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .ba-categorias-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .ba-section{ padding: var(--ba-section-padding-y) var(--ba-gutter); }
  .producto-card__body{ padding: 14px; }
  .producto-card__name{ font-size: 0.9375rem; line-height: 1.35; }
  .ultimos-agregados__grid{ gap: 14px; }
}
@media (max-width: 900px){
  .ba-burger{ min-width: var(--ba-touch-target); min-height: var(--ba-touch-target); }
  .ba-drawer__nav a{ min-height: var(--ba-touch-target); padding: 14px 12px; display: flex; align-items: center; }
  .ba-drawer__menu a{ min-height: var(--ba-touch-target); padding: 14px 12px; display: flex; align-items: center; }
}

/* =========================
   SECCIONES FIGMA (ba-section)
========================= */
.ba-section{
  max-width: var(--ba-container);
  margin: 0 auto;
  padding: var(--ba-section-padding-y) var(--ba-gutter);
  width: 100%;
  box-sizing: border-box;
}
/* Cabecera de sección: botón centrado verticalmente con el bloque de texto (Figma) */
.ba-section__head{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
/* Texto y botón alineados al centro vertical (título + subtítulo + intro vs. botón) */
.ba-section__head > div{
  align-self: center;
  min-width: 0;
}
.ba-section__head > .ba-btn--outline{
  align-self: center;
  flex-shrink: 0;
}
/* Título de sección: verde identidad (Style Tipografia H2). Modificador --dark para Empresas (Figma Home -2). */
.ba-section__title{
  font-size: var(--ba-font-size-h2);
  font-weight: var(--ba-font-weight-bold);
  color: var(--ba-section-title-color);
  margin: 0 0 4px;
  font-family: var(--ba-font-family);
  line-height: var(--ba-line-height-tight);
}
.ba-section__title--dark{
  color: var(--ba-text-primary) !important;
}
/* Subtítulo: plomo (Style Body/Subtitle) */
.ba-section__subtitle{
  font-size: var(--ba-font-size-subtitle-4);
  color: var(--ba-section-subtitle-color);
  margin: 0;
  font-family: var(--ba-font-family);
}
/* Intro / descripción segunda línea: verde identidad */
.ba-section__intro{
  font-size: var(--ba-font-size-body-3);
  color: var(--ba-section-intro-color);
  margin: 8px 0 0;
  font-family: var(--ba-font-family);
}
.ba-section .ba-btn--outline{
  padding: 10px 20px;
  border-radius: var(--ba-radius-lg);
  font-weight: var(--ba-font-weight-semibold);
  font-family: var(--ba-font-family);
  color: var(--ba-primary);
  border: 2px solid var(--ba-primary);
  background: var(--ba-bg-white);
  text-decoration: none;
  white-space: nowrap;
}
.ba-section .ba-btn--outline:hover{
  background: var(--ba-primary);
  color: var(--ba-text-on-dark);
}
@media (max-width: 480px){
  .ba-section__head{ flex-direction: column; align-items: stretch; gap: 12px; }
  .ba-section .ba-btn--outline{ align-self: flex-start; }
}
/* Contenedor del contenido de sección (home: empresas, últimos). Sin padding extra; .ba-section ya lo define. */
.ba-section__content{
  margin: 0;
  padding: 0;
}

/* =========================
   IDENTIDAD – Títulos y subtítulos en secciones de fondo claro
   Misma línea que el home: título/intro verde, subtítulo plomo (figma)
   ========================= */
.ba-cats__sectionTitle,
.ba-steps__title,
.ba-plans-cta__title,
.ba-benefits__title,
.ba-res__h2{
  color: var(--ba-section-title-color) !important;
  font-family: var(--ba-font-family);
}
.ba-cats__sectionHint,
.ba-plans-cta__subtitle{
  color: var(--ba-section-subtitle-color) !important;
  font-family: var(--ba-font-family);
}

/* Categorías destacadas – grid responsive */
.ba-categorias-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
  gap: clamp(12px, 2vw, 16px);
}
@media (min-width: 480px){
  .ba-categorias-grid{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (min-width: 768px){
  .ba-categorias-grid{ grid-template-columns: repeat(4, 1fr); }
}
.ba-categoria-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(16px, 3vw, 24px) clamp(12px, 2vw, 16px);
  background: var(--ba-bg-white);
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius-lg);
  text-decoration: none;
  color: var(--ba-text-secondary);
  font-family: var(--ba-font-family);
  transition: box-shadow .2s, border-color .2s;
}
.ba-categoria-card:hover{
  border-color: var(--ba-primary);
  box-shadow: 0 4px 12px rgba(15,107,63,.15);
}
/* Figma Home -2: primera card (Insumos) con borde verde claro destacado */
.ba-categoria-card--first{
  border-color: var(--ba-primary-border);
  box-shadow: 0 2px 8px rgba(15,107,63,.08);
}
/* ===== CATEGORÍAS DESTACADAS (home): una sola fuente de verdad (Figma Opción 2) ===== */
.ba-categoria-card__icon{
  font-size: 2rem;
  margin-bottom: 8px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ba-text-primary);
}
.ba-categoria-card__icon--green{ background: var(--ba-cat-icon-green); color: #fff; }
.ba-categoria-card__icon--blue{ background: var(--ba-cat-icon-blue); color: #fff; }
.ba-categoria-card__icon--equipamiento{ background: var(--ba-cat-icon-equipamiento); color: #fff; }
.ba-categoria-card__icon--yellow{ background: var(--ba-cat-icon-yellow); color: #fff; }

/* Sección home: contenedor + SVG o img en blanco (ganar a Astra/global) */
body .ba-section-categorias .ba-categoria-card__icon,
body .ba-section-categorias .categorias-destacadas__grid .ba-categoria-card__icon{
  filter: none;
  color: #fff !important;
}
body .ba-section-categorias .ba-categoria-card__icon svg,
body .ba-section-categorias .categorias-destacadas__grid .ba-categoria-card__icon svg{
  display: block;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  fill: none !important;
  stroke: #fff !important;
  color: #fff !important;
}
body .ba-section-categorias .ba-categoria-card__icon svg path,
body .ba-section-categorias .ba-categoria-card__icon svg circle,
body .ba-section-categorias .ba-categoria-card__icon svg polyline{
  fill: none !important;
  stroke: #fff !important;
}
body .ba-section-categorias .ba-categoria-card__icon img,
body .ba-section-categorias .categorias-destacadas__grid .ba-categoria-card__icon img,
body .ba-section-categorias .ba-categoria-card__icon .ba-categoria-card__icon-img{
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 100%;
  object-fit: contain !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Otras vistas que usen .ba-categoria-card__icon (svg/img genérico) */
.ba-categoria-card__icon img{
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}
.ba-categoria-card__icon svg{
  display: block;
  flex-shrink: 0;
}
.ba-categoria-card__icon svg path,
.ba-categoria-card__icon svg circle{
  stroke: currentColor;
}
.ba-categoria-card__icon svg [fill],
.ba-categoria-card__icon svg path[fill]{
  fill: currentColor;
}
.ba-categoria-card__name{
  font-weight: 600;
  text-align: center;
}
.ba-categoria-card__count{
  font-size: 0.85rem;
  color: var(--ba-text-muted);
  margin-top: 4px;
}

/* Planes destacados (home) */
.ba-planes-preview{
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.ba-planes-preview__card{
  position: relative;
  padding: 24px;
  background: var(--ba-bg-white);
  border: 1px solid var(--ba-border);
  border-radius: 6px;
  text-align: center;
}
.ba-planes-preview__card--featured{
  border-color: var(--ba-primary);
  background: #f0fdf4;
}
.ba-planes-preview__badge{
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  background: var(--ba-primary);
  color: var(--ba-text-on-dark);
  padding: 4px 12px;
  border-radius: 20px;
}
.ba-planes-preview__icon{
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
}
.ba-planes-preview__name{
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ba-text-primary);
}
.ba-planes-preview__price{
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ba-primary);
}
.ba-planes-preview__desc{
  margin: 0;
  font-size: 0.9rem;
  color: var(--ba-text-muted);
}
.ba-planes-preview__cta{
  padding: 16px 24px;
  background: var(--ba-primary);
  color: var(--ba-text-on-dark);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  white-space: nowrap;
  transition: background .2s;
}
.ba-planes-preview__cta:hover{
  background: var(--ba-primary-hover);
  color: var(--ba-text-on-dark);
}
@media (max-width: 768px){
  .ba-planes-preview{
    grid-template-columns: 1fr;
  }
  .ba-planes-preview__cta{ text-align: center; }
}

/* =========================
   PÁGINA PLANES Y PUBLICIDAD [ba_planes_pagina]
   Lineamientos: Style (Colors, Tipografía, Buttons, Link). Hero oscuro + banner + cuerpo + contacto fondo claro.
========================= */
.ba-planes-page{ margin-top: 0; width: 100%; max-width: 100%; box-sizing: border-box; font-family: var(--ba-font-family); }
.ba-planes-page *{ box-sizing: border-box; }
/* Hero: fondo oscuro, texto blanco (tokens) */
.ba-planes-page__hero{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--ba-hero-padding-y) var(--ba-gutter);
  min-height: var(--ba-hero-height-page);
  text-align: left;
  background: linear-gradient(90deg, var(--ba-hero-overlay-start), var(--ba-hero-overlay-end)), var(--ba-hero-planes-bg-image, var(--ba-hero-bg)) center/cover no-repeat;
}
.ba-planes-page__hero-inner{
  position: relative;
  max-width: var(--ba-container);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--ba-gutter);
}
.ba-planes-page__hero .ba-planes-page__title,
.ba-planes-page__hero .ba-planes-page__subtitle,
.ba-planes-page__hero .ba-planes-page__pill{
  color: var(--ba-text-on-dark) !important;
  font-family: var(--ba-font-family);
}
.ba-planes-page__title{
  font-size: var(--ba-font-size-h1);
  font-weight: var(--ba-font-weight-bold);
  margin: 0 0 0.5rem;
  line-height: var(--ba-line-height-tight);
}
.ba-planes-page__subtitle{
  font-size: var(--ba-font-size-body-2);
  opacity: 0.95;
  margin: 0;
  line-height: 1.5;
}
.ba-planes-page__pill{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--ba-primary);
  color: var(--ba-text-on-dark) !important;
  padding: 0.35rem 0.75rem;
  border-radius: var(--ba-radius-pill);
  font-size: var(--ba-font-size-body-3);
  font-weight: var(--ba-font-weight-semibold);
  font-family: var(--ba-font-family);
  margin-bottom: 0.75rem;
}
.ba-planes-page__pill img.emoji,
.ba-planes-page__pill .emoji{
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
/* Banner: pill dentro del cuerpo, superior izquierda (Figma) */
.ba-planes-page__banner{
  display: inline-block;
  background: var(--ba-banner-green);
  color: var(--ba-banner-green-text);
  padding: 0.5rem 1rem;
  border-radius: var(--ba-radius-pill);
  font-weight: var(--ba-font-weight-regular);
  font-size: var(--ba-font-size-body-3);
  font-family: var(--ba-font-family);
  margin-bottom: 1.25rem;
}
/* Cuerpo: sección blanca con banner + párrafos alineados a la izquierda */
.ba-planes-page__body{
  max-width: var(--ba-container);
  margin: 0 auto;
  padding: var(--ba-hero-to-content-gap) var(--ba-gutter) var(--ba-section-padding-y);
  background: var(--ba-bg-white);
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}
.ba-planes-page__body .ba-planes-page__lead{
  color: var(--ba-banner-green-text);
  font-family: var(--ba-font-family);
  font-size: var(--ba-font-size-body-1);
  font-weight: var(--ba-font-weight-bold);
  line-height: 1.6;
  margin: 0 0 1.25rem;
}
.ba-planes-page__body .ba-planes-page__with-check{
  color: var(--ba-banner-green-text);
  font-family: var(--ba-font-family);
  font-size: var(--ba-font-size-body-2);
  font-weight: var(--ba-font-weight-regular);
  line-height: 1.6;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.ba-planes-page__check{
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230f6b3f'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Contacto: fondo verde claro (Figma), caja icono verde oscuro + icono blanco */
.ba-planes-page__contact{
  max-width: 100%;
  margin: 0;
  width: 100%;
  background: var(--ba-primary-light);
  padding: var(--ba-section-padding-y) var(--ba-gutter);
  text-align: center;
  box-sizing: border-box;
}
.ba-planes-page__contact > p{
  color: var(--ba-banner-green-text);
  margin: 0 0 1rem;
  font-family: var(--ba-font-family);
  font-size: var(--ba-font-size-body-2);
  font-weight: var(--ba-font-weight-regular);
}
.ba-planes-page__contact a{
  color: var(--ba-banner-green-text);
  font-weight: var(--ba-font-weight-regular);
  text-decoration: none;
  font-family: var(--ba-font-family);
}
.ba-planes-page__contact a:hover{ text-decoration: underline; }
.ba-planes-page__contactRow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.ba-planes-page__contactRow:last-of-type{ margin-bottom: 0; }
.ba-planes-page__contact .ba-planes-page__icon-wrap{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: var(--ba-radius-lg);
  background: var(--ba-primary);
  border: none;
  flex-shrink: 0;
}
.ba-planes-page__contact .ba-planes-page__icon{
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: none !important;
}
.ba-planes-page__thanks{
  margin-top: 1.5rem;
  font-weight: var(--ba-font-weight-regular);
  font-family: var(--ba-font-family);
  color: var(--ba-banner-green-text);
  font-size: var(--ba-font-size-body-2);
}

/* Página Planes y publicidad: tabs + paneles (.ba-plans) */
.ba-plans{
  width: 100%;
  padding: 0;
}
.ba-plans__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--ba-gutter, 20px) 40px;
}
.ba-plans__header{
  margin-bottom: 24px;
}
.ba-plans__title{
  margin: 0 0 8px;
  font-size: var(--ba-font-size-h3);
  font-weight: var(--ba-font-weight-bold);
  font-family: var(--ba-font-family);
  color: var(--ba-text-primary);
}
.ba-plans__subtitle{
  margin: 0;
  font-size: var(--ba-font-size-body-2);
  font-family: var(--ba-font-family);
  color: var(--ba-text-muted);
}
/* Tabs estilo Style (Tab Empresas: subrayado; aquí pill para coherencia con outline) */
.ba-plans__tabs{
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.ba-plans__tab{
  padding: 12px 20px;
  border: 1px solid var(--ba-border);
  background: var(--ba-bg-white);
  border-radius: var(--ba-radius-lg);
  font-size: var(--ba-font-size-body-3);
  font-weight: var(--ba-font-weight-semibold);
  font-family: var(--ba-font-family);
  color: var(--ba-text-muted);
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.ba-plans__tab:hover{
  border-color: var(--ba-primary);
  color: var(--ba-primary);
}
.ba-plans__tab.is-active{
  border-color: var(--ba-primary);
  background: var(--ba-primary-light);
  color: var(--ba-primary);
}
.ba-plans__panel{
  display: none;
}
.ba-plans__panel.is-active{
  display: block;
}
.ba-plans__grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.ba-plans__card{
  position: relative;
  padding: 24px;
  background: var(--ba-bg-white);
  border: 1px solid var(--ba-border);
  border-radius: 12px;
  text-align: center;
}
.ba-plans__card--featured{
  border-color: var(--ba-primary);
  background: #f0fdf4;
}
.ba-plans__card-badge{
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  background: var(--ba-primary);
  color: var(--ba-text-on-dark);
  padding: 4px 12px;
  border-radius: 20px;
}
.ba-plans__card-icon{
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
}
.ba-plans__card-name{
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ba-text-primary);
}
.ba-plans__card-price{
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ba-primary);
}
.ba-plans__card-desc{
  margin: 0;
  font-size: 0.9rem;
  color: var(--ba-text-muted);
}
.ba-plans__cta-wrap{
  text-align: center;
  margin: 0;
}
.ba-plans__cta{
  display: inline-block;
  padding: 14px 28px;
  background: var(--ba-primary);
  color: var(--ba-text-on-dark);
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  transition: background .2s;
}
.ba-plans__cta:hover{
  background: var(--ba-primary-hover);
  color: var(--ba-text-on-dark);
}

/* Banners promo (John Deere, Pioneer) – según diseño referencial Figma */
.ba-banners-promo{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2.5vw, 20px);
  max-width: var(--ba-container);
  margin: 0 auto;
  padding: 0 var(--ba-gutter) clamp(24px, 5vw, 40px);
  width: 100%;
  box-sizing: border-box;
}
.ba-banner-promo{
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 140px;
  padding: 14px 16px;
  border-radius: 16px;
  text-decoration: none;
  color: var(--ba-text-primary);
  overflow: hidden;
  transition: box-shadow .2s;
}
.ba-banner-promo:hover{
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
}
.ba-banner-promo:focus-visible{
  outline: 2px solid var(--ba-primary);
  outline-offset: 2px;
}
.ba-banner-promo--green{ background: #dff0b2; }
.ba-banner-promo--yellow{ background: #f5d86c; }
/* Imagen ~un tercio del ancho (referencia), ocupa toda la altura del banner */
.ba-banner-promo__img{
  width: 36%;
  max-width: 200px;
  min-width: 110px;
  align-self: stretch;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
}
.ba-banner-promo__content{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 18px;
  padding-right: 12px;
}
/* Título: en escritorio más contenido para no verse excesivo; en móvil se mantiene legible */
.ba-banner-promo__title{
  margin: 0 0 8px;
  font-family: var(--ba-font-family);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ba-banner-green-text);
}
/* Escritorio: tamaño contenido para que se vea agradable */
@media (min-width: 641px){
  .ba-banner-promo__title{ font-size: clamp(1rem, 1.4vw, 1.2rem); }
  .ba-banner-promo__text{ font-size: clamp(0.875rem, 1vw, 0.9375rem); }
}
/* Por defecto (móvil primero): tamaños más grandes para tacto */
@media (max-width: 640px){
  .ba-banner-promo__title{ font-size: clamp(1.1rem, 4vw, 1.35rem); }
}
.ba-banner-promo--yellow .ba-banner-promo__title{
  color: #2d5016;
}
.ba-banner-promo:hover .ba-banner-promo__title{
  color: var(--ba-primary);
}
/* Descripción: en escritorio más pequeña; en móvil cómoda */
.ba-banner-promo__text{
  margin: 0;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ba-banner-green-text);
}
@media (max-width: 640px){
  .ba-banner-promo__text{ font-size: 0.9375rem; }
}
.ba-banner-promo--yellow .ba-banner-promo__text{
  color: #374a2a;
}
@media (max-width: 640px){
  .ba-banners-promo{ grid-template-columns: 1fr; }
  .ba-banner-promo{ min-height: 120px; padding: 12px 14px; }
  .ba-banner-promo__img{ min-width: 100px; width: 34%; }
  .ba-banner-promo__content{ padding-left: 14px; padding-right: 10px; }
}

/* =========================
   ÚLTIMAS 3 SECCIONES: padding L/R 30px y alineadas al search
   (NO el hero)
========================= */
.empresas-agro,
.categorias-destacadas,
.ultimos-agregados,
.promo-duo{
  max-width: var(--ba-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--ba-gutter) !important;
  padding-right: var(--ba-gutter) !important;
}

/* si algunas ya tenían padding 40px, esto lo corrige */
.categorias-destacadas,
.ultimos-agregados,
.promo-duo{
  padding-left: var(--ba-gutter) !important;
  padding-right: var(--ba-gutter) !important;
}

/* Empresas y Categorías: mismo ancho (contenedor Figma), grids al 100% */
.ba-section-empresas,
.ba-section-categorias{
  width: 100%;
  box-sizing: border-box;
}
.ba-section__content{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.empresas-agro__grid,
.ba-categorias-grid{
  width: 100%;
  min-width: 0;
}
.empresas-agro__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 2.5vw, 20px);
  align-items: stretch;
}
@media (min-width: 480px){
  .empresas-agro__grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px){
  .empresas-agro__grid{ grid-template-columns: repeat(6, 1fr); }
}
.empresa-card{
  display: flex;
  flex-direction: column;
  font-family: var(--ba-font-family);
  align-items: center;
  padding: 10px 10px 14px;
  background: var(--ba-bg-white);
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius-lg);
  text-decoration: none;
  color: var(--ba-text-secondary);
  transition: box-shadow .2s, border-color .2s;
  min-height: 0;
}
.empresa-card:hover{
  border-color: var(--ba-primary);
  box-shadow: 0 4px 12px rgba(31,111,61,.15);
}
/* Logo con proporción correcta: no llenar toda la card (Figma) */
.empresa-card img{
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 72px;
  object-fit: contain;
  flex-shrink: 0;
  box-sizing: border-box;
}
.empresa-card span{
  margin-top: 10px;
  font-size: var(--ba-font-size-body-3);
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--ba-primary);
}

/* =========================
   9. PRODUCTO - Etiqueta categoría, galería, Cobertura, WhatsApp flotante
========================= */
.ba-product__category-label{
  margin-bottom: 10px;
}
.ba-product__category-label .ba-chip--category{
  background: var(--ba-primary-light);
  border-color: var(--ba-primary);
  color: var(--ba-primary);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
}

.ba-product__breadcrumbs{
  padding-top: 0;
  font-family: var(--ba-font-family);
  font-size: var(--ba-font-size-body-5);
  color: var(--ba-text-muted);
  margin-bottom: 12px;
}
.ba-product__breadcrumbs a{
  color: var(--ba-link);
  text-decoration: none;
}
.ba-product__breadcrumbs a:hover{
  color: var(--ba-link-hover);
  text-decoration: underline;
}

/* Caja vendedor (sidebar producto): contenedor y cabecera */
.ba-vendor{
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius-lg);
  background: var(--ba-bg-white);
  padding: 16px;
  font-family: var(--ba-font-family);
}
.ba-vendor__top{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.ba-vendor__logo{
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: var(--ba-radius-lg);
  overflow: hidden;
  background: var(--ba-bg-section);
  border: 1px solid var(--ba-border);
}
.ba-vendor__logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ba-vendor__logoFallback{
  width: 100%;
  height: 100%;
  background: var(--ba-primary-light);
}
.ba-vendor__namewrap{
  min-width: 0;
}
.ba-vendor__name{
  font-size: var(--ba-font-size-body-2);
  font-weight: var(--ba-font-weight-bold);
  color: var(--ba-text-primary);
  line-height: 1.25;
}
.ba-vendor__link{
  display: inline-block;
  margin-top: 4px;
  font-size: var(--ba-font-size-body-5);
  color: var(--ba-link);
  text-decoration: none;
}
.ba-vendor__link:hover{
  color: var(--ba-link-hover);
  text-decoration: underline;
}
.ba-vendor__cta{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--ba-radius-lg);
  font-family: var(--ba-font-family);
  font-size: var(--ba-font-size-body-3);
  font-weight: var(--ba-font-weight-semibold);
  background: var(--ba-primary);
  color: var(--ba-text-on-dark) !important;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.ba-vendor__cta:hover{
  background: var(--ba-primary-hover);
  color: var(--ba-text-on-dark) !important;
}

.ba-vendor__metaRow{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.ba-vendor__metaRow:last-of-type{ margin-bottom: 0; }

/* Iconos dirección, cobertura y contacto: estilo Figma (blanco sobre fondo verde claro) */
.ba-vendor__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: var(--ba-radius-lg);
  background: var(--ba-primary-light);
  flex-shrink: 0;
}
.ba-vendor__icon img{
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: none !important;
}
.ba-vendor__icon span[aria-hidden="true"]{
  font-size: 18px;
}

.ba-vendor__email{ color: var(--ba-primary); text-decoration: none; font-weight: 700; }
.ba-vendor__email:hover{ text-decoration: underline; }
.ba-vendor__metaLabel{
  font-size: var(--ba-font-size-body-5);
  color: var(--ba-text-muted);
}

/* Sidebar "Más productos del vendedor" */
.ba-sideList{
  margin-top: 24px;
  font-family: var(--ba-font-family);
}
.ba-sideList__title{
  font-size: var(--ba-font-size-body-3);
  font-weight: var(--ba-font-weight-bold);
  color: var(--ba-text-primary);
  margin: 0 0 12px;
}
.ba-sideList__items{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ba-miniCard{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius-lg);
  background: var(--ba-bg-white);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ba-miniCard:hover{
  border-color: var(--ba-primary);
  box-shadow: var(--ba-shadow-card-hover);
}
.ba-miniCard__img{
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: var(--ba-radius-md);
  overflow: hidden;
  background: var(--ba-bg-section);
}
.ba-miniCard__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ba-miniCard__body{
  min-width: 0;
}
.ba-miniCard__cat{
  font-size: var(--ba-font-size-body-5);
  font-weight: var(--ba-font-weight-semibold);
  color: var(--ba-tag-green-text);
  background: var(--ba-tag-green-bg);
  padding: 2px 6px;
  border-radius: var(--ba-radius-sm);
  display: inline-block;
  margin-bottom: 4px;
}
.ba-miniCard__title{
  font-size: var(--ba-font-size-body-3);
  font-weight: var(--ba-font-weight-semibold);
  color: var(--ba-text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Documentación: enlaces descargables */
.ba-docs__item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--ba-border);
  border-radius: 8px;
  background: var(--ba-bg-section);
  text-decoration: none;
  color: var(--ba-text-secondary);
  margin-bottom: 8px;
  transition: background .2s;
}
.ba-docs__item:hover{
  background: var(--ba-bg-section);
}
.ba-docs__item:last-child{ margin-bottom: 0; }
.ba-docs__badge{
  font-size: 10px;
  font-weight: 700;
  background: #dc2626;
  color: var(--ba-text-on-dark);
  padding: 2px 6px;
  border-radius: 4px;
}
.ba-docs__name{ flex: 1; font-size: 13px; }
.ba-docs__download{ opacity: .6; }
.ba-docs__hint{
  font-size: 13px;
  color: var(--ba-text-muted);
  font-style: italic;
}

/* Ocultar autor/fecha en ficha de producto (evitar "Por Alan Oteross / fecha") */
.single-product .entry-meta,
.single-product .ast-single-entry-banner .entry-meta {
  display: none !important;
}

/* Mensajes WooCommerce en ficha producto (tipografía y colores del sistema) */
.ba-product .woocommerce-message,
.ba-product .woocommerce-info,
.ba-product .woocommerce-error {
  font-family: var(--ba-font-family) !important;
  font-size: var(--ba-font-size-body-3) !important;
  border-radius: var(--ba-radius-md) !important;
}
.ba-product .woocommerce-message { border-left-color: var(--ba-primary) !important; }
.ba-product .woocommerce-info { border-left-color: var(--ba-link) !important; }

/* Layout general ficha de producto (mobile-first) */
.single-product .ba-product{
  max-width: 1200px;
  margin: 16px auto 40px;
  padding: 0 16px;
  width: 100%;
  box-sizing: border-box;
}

/* Grid ficha producto: móvil apilado */
.single-product .ba-product__grid{
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.single-product .ba-product__media,
.single-product .ba-product__main,
.single-product .ba-product__side{
  width: 100%;
  min-width: 0;
}

/* Contenido central: bloques en columna (descripción, documentación, relacionados) */
.single-product .ba-product__main .ba-box,
.single-product .ba-product__main .ba-two{
  margin-top: 0;
}
.single-product .ba-product__main .ba-box + .ba-box,
.single-product .ba-product__main .ba-box + .ba-two,
.single-product .ba-product__main .ba-two + .ba-box{
  margin-top: 18px;
}

/* Bloque doble (características técnicas + documentación) */
.ba-two{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Desktop/tablet: 3 columnas — arriba: foto + características; debajo: descripción en 2 columnas (desde 768px) */
@media (min-width: 768px){
  .single-product .ba-product__grid{
    display: grid !important;
    /* Imagen e información en proporciones similares (≈50/50) y sidebar más angosta */
    grid-template-columns: minmax(320px, 1.2fr) minmax(0, 1.2fr) minmax(260px, .9fr);
    grid-template-rows: auto auto auto auto;
    align-items: start;
    gap: 24px 32px;
    width: 100%;
  }

  .single-product .ba-product__media{
    grid-column: 1;
    grid-row: 1;
    /* Sin sticky para que la imagen no quede “flotando” y el layout sea coherente */
  }

  .single-product .ba-product__main{
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .single-product .ba-product__side{
    grid-column: 3;
    grid-row: 1 / -1;
    position: sticky;
    top: 24px;
  }

  /* Descripción ocupa las dos primeras columnas (debajo de foto y características) */
  .single-product .ba-product__description{
    grid-column: 1 / 3;
    grid-row: 2;
    min-width: 0;
  }

  .single-product .ba-product__main-end{
    grid-column: 1 / 3;
    grid-row: 3;
    min-width: 0;
  }

  /* Ítems relacionados al final, ocupa las 2 primeras columnas (como la descripción) */
  .single-product .ba-product__related{
    grid-column: 1 / 3;
    grid-row: 4;
    min-width: 0;
  }
}

@media (min-width: 960px){
  .ba-two{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  /* Un solo bloque (ej. solo Documentación) ocupa todo el ancho, igual que Descripción */
  .ba-two > .ba-box:only-child{
    grid-column: 1 / -1;
  }
}

@media (min-width: 1280px){
  .single-product .ba-product{
    max-width: 1320px;
  }
}

/* WhatsApp flotante: verde sólido, icono blanco nítido (sin capa blanca ni filtros) */
.ba-wa-float{
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: var(--ba-whatsapp-green) !important;
  color: #fff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(37,211,102,.4);
  z-index: 999;
  transition: transform .2s, box-shadow .2s;
  opacity: 1;
  filter: none;
}
.ba-wa-float::before,
.ba-wa-float::after{ display: none !important; }
.ba-wa-float svg{ fill: currentColor; opacity: 1; filter: none; }
.ba-wa-float:hover{
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(37,211,102,.5);
  color: #fff !important;
}

/* Layout galería: anulamos layout clásico Astra; template actual usa .ba-product-gallery__* (sin FlexSlider) */
.ba-product .woocommerce-product-gallery,
.ba-product div.images {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
.ba-product .woocommerce-product-gallery {
  position: relative;
  z-index: 1;
}

/* Características principales: colapsable y chips en línea */
.ba-box--collapsible{
  cursor: pointer;
}
.ba-box--collapsible .ba-box__title{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.ba-box--collapsible .ba-box__title::-webkit-details-marker,
.ba-box--collapsible .ba-box__title::marker{
  display: none;
}
.ba-box--collapsible .ba-box__title::before{
  content: '';
  width: 0;
  height: 0;
  border-left: 6px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: rotate(0deg);
  transition: transform .2s;
  flex-shrink: 0;
  opacity: .7;
}
.ba-box--collapsible[open] .ba-box__title::before{
  transform: rotate(90deg);
}
.ba-box--collapsible .ba-attrs{
  margin-top: 12px;
  width: 100%;
}

/* Filas de atributos: ancho completo para que los chips usen toda la línea y hagan wrap */
.single-product .ba-box--collapsible .ba-attrs__row{
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
.single-product .ba-box--collapsible .ba-attrs__row:last-child{
  margin-bottom: 0;
}
.single-product .ba-box--collapsible .ba-attrs__row .ba-attrs__label{
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--ba-text-secondary);
}
.single-product .ba-box--collapsible .ba-attrs__row .ba-attrs__value{
  display: block;
  width: 100%;
  min-width: 0;
}

/* Chips: una al lado de la otra, si falta espacio bajan a la línea siguiente */
.ba-attrs__value--chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
.ba-attrs__value--chips .ba-chip{
  flex: 0 0 auto;
  padding: 4px 8px;
  font-size: 10px;
  white-space: normal;
  word-break: break-word;
}
.ba-attrs__row--tags .ba-attrs__label{
  margin-bottom: 6px;
}
.ba-attrs__row--tags .ba-attrs__value{
  width: 100%;
  min-width: 0;
}

/* Características principales: diseño grid (maquinaria, terrenos, servicios) — 2 columnas etiqueta | valor */
.ba-box--attrs-grid .ba-attrs--grid{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 24px;
  align-items: baseline;
  width: 100%;
}
.ba-box--attrs-grid .ba-attrs--grid .ba-attrs__label{
  color: var(--ba-text-muted);
  font-size: 0.9em;
  font-weight: 500;
}
.ba-box--attrs-grid .ba-attrs--grid .ba-attrs__value{
  font-weight: 600;
  color: #111827;
}

/* Galería producto: 4 miniaturas visibles con navegación, imagen principal cuadrada (altura = 4 miniaturas) */
:root{
  --ba-gallery-thumb-size: 72px;
  --ba-gallery-thumb-gap: 8px;
  --ba-gallery-visible-thumbs: 4;
  --ba-gallery-main-size: calc(var(--ba-gallery-visible-thumbs) * var(--ba-gallery-thumb-size) + (var(--ba-gallery-visible-thumbs) - 1) * var(--ba-gallery-thumb-gap));
}
.ba-product-gallery.ba-product-gallery--thumbs-left .ba-product-gallery__inner{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ba-product-gallery__thumbs-wrap{
  flex-shrink: 0;
  height: var(--ba-gallery-main-size);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  position: relative;
}
.ba-product-gallery__thumbs-nav{
  flex-shrink: 0;
  width: 24px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--ba-primary-light);
  color: var(--ba-primary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
}
.ba-product-gallery__thumbs-nav:hover{
  background: var(--ba-primary);
  color: var(--ba-text-on-dark);
}
.ba-product-gallery__thumbs{
  display: flex;
  flex-direction: column;
  gap: var(--ba-gallery-thumb-gap);
  width: var(--ba-gallery-thumb-size);
  height: var(--ba-gallery-main-size);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.ba-product-gallery__thumb{
  display: block;
  width: var(--ba-gallery-thumb-size);
  height: var(--ba-gallery-thumb-size);
  min-height: var(--ba-gallery-thumb-size);
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ba-gallery-placeholder-bg);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  flex-shrink: 0;
}
.ba-product-gallery__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ba-product-gallery__thumb:hover,
.ba-product-gallery__thumb--active{
  border-color: var(--ba-primary);
  box-shadow: 0 0 0 1px var(--ba-primary);
}
/* Contenedor imagen principal: ratio 1:1, fondo por token (sin espacio gris/plomo) */
.ba-product-gallery__main{
  flex: 0 0 var(--ba-gallery-main-size);
  width: var(--ba-gallery-main-size);
  height: var(--ba-gallery-main-size);
  min-width: 0;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ba-gallery-placeholder-bg);
  aspect-ratio: 1 / 1;
  max-height: 480px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Cada slide rellena todo el contenedor */
.ba-product-gallery__slide{
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ba-product-gallery__slide--active{
  display: block;
}
/* Imagen centrada superior y lateral; resto del área en blanco */
.ba-product-gallery__slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .25s ease-out;
}
.ba-product-gallery--without-images .ba-product-gallery__main img{
  max-width: 120px;
  margin: auto;
  opacity: .5;
}

/* Contador de imágenes (ej. 1 / 4) sobre la foto principal */
.ba-product-gallery__counter{
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 15, 15, .65);
  color: var(--ba-text-on-dark);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ba-product-gallery__counter-sep{
  opacity: .8;
}

/* Lightbox: imagen a pantalla completa con navegación */
.ba-product-gallery-lightbox{
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 56px;
  box-sizing: border-box;
}
.ba-product-gallery-lightbox[hidden]{
  display: none !important;
}
.ba-product-gallery-lightbox__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .9);
  cursor: pointer;
}
.ba-product-gallery-lightbox__content{
  position: relative;
  z-index: 2;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ba-product-gallery-lightbox__img{
  max-width: 100%;
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.ba-product-gallery-lightbox__counter{
  margin-top: 12px;
  color: var(--ba-text-on-dark);
  font-size: 14px;
  font-weight: 600;
}
.ba-product-gallery-lightbox__close,
.ba-product-gallery-lightbox__prev,
.ba-product-gallery-lightbox__next{
  position: absolute;
  z-index: 3;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: var(--ba-text-on-dark);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ba-product-gallery-lightbox__close:hover,
.ba-product-gallery-lightbox__prev:hover,
.ba-product-gallery-lightbox__next:hover{
  background: rgba(255, 255, 255, .25);
}
.ba-product-gallery-lightbox__close{
  top: 16px;
  right: 16px;
  font-size: 32px;
}
.ba-product-gallery-lightbox__prev{
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.ba-product-gallery-lightbox__next{
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.ba-product-gallery-lightbox--single .ba-product-gallery-lightbox__prev,
.ba-product-gallery-lightbox--single .ba-product-gallery-lightbox__next{
  display: none;
}

/* Galería producto: aspecto fijo para que no domine la página ni quede flotando */
.ba-product__media .woocommerce-product-gallery {
  max-height: 480px;
  border-radius: 16px;
  overflow: hidden;
}
.ba-product__media .woocommerce-product-gallery__image--placeholder,
.ba-product__media .woocommerce-product-gallery__placeholder,
.ba-product__media .placeholder{
  aspect-ratio: 1 / 1;
  min-height: 260px;
  max-height: 480px;
  background: var(--ba-gallery-placeholder-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  width: 100%;
}
.ba-product__media .woocommerce-product-gallery__image--placeholder img,
.ba-product__media .woocommerce-product-gallery__placeholder img,
.ba-product__media .placeholder img{
  max-width: 120px;
  opacity: .5;
}

/* Zoom suave al pasar el mouse por la imagen principal */
.ba-product-gallery__slide--active:hover img{
  transform: scale(1.04);
}

/* ====== ÍTEMS RELACIONADOS (producto-card en single product) ====== */
.ultimos-agregados__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 16px);
}
@media (min-width: 640px){
  .ultimos-agregados__grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1024px){
  .ultimos-agregados__grid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.producto-card{
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--ba-bg-white);
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius-lg);
  overflow: hidden;
  font-family: var(--ba-font-family);
  transition: border-color .2s, box-shadow .2s;
}
.producto-card:hover{
  border-color: var(--ba-primary);
  box-shadow: 0 4px 12px rgba(31,111,61,.12);
}
.producto-card__media{
  aspect-ratio: 4/3;
  background: var(--ba-bg-section);
  overflow: hidden;
  display: block;
}
.producto-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  vertical-align: middle;
}
/* Placeholder sin imagen: WooCommerce suele usar icono pequeño; contain evita recorte feo */
.producto-card__media img[src*="placeholder"],
.producto-card__media img[src*="woocommerce-placeholder"]{
  object-fit: contain;
  padding: 20%;
}
.producto-card__body{
  padding: 12px;
}
.producto-card__tag{
  display: inline-block;
  font-size: var(--ba-font-size-body-5);
  font-weight: var(--ba-font-weight-semibold);
  font-family: var(--ba-font-family);
  color: var(--ba-tag-green-text);
  background: var(--ba-tag-green-bg);
  padding: 4px 8px;
  border-radius: var(--ba-radius-pill);
  margin-bottom: 6px;
}
.producto-card__name{
  font-size: var(--ba-font-size-body-3);
  font-weight: var(--ba-font-weight-bold);
  color: var(--ba-text-primary);
  line-height: 1.3;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.producto-card__meta{
  font-size: var(--ba-font-size-label);
  color: var(--ba-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Mismo estilo que resto del sitio: cuadro verde claro + icono blanco */
.producto-card__pin{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: var(--ba-radius-lg);
  background: var(--ba-primary-light);
  flex-shrink: 0;
}
.producto-card__pin img{
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: none !important;
}
.producto-card__pin span[aria-hidden="true"]{
  font-size: 14px;
}

/* ====== STORE (Dokan): tipografía igual al resto del sitio ====== */
.ba-store{
  font-family: var(--ba-font-family);
}

/* Store – Información de contacto: mismo estilo que producto (icono blanco sobre verde claro) */
.ba-storeContact__row{
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  font-size: var(--ba-font-size-body-3);
  color: var(--ba-text-secondary);
}
.ba-storeContact__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: var(--ba-radius-lg);
  background: var(--ba-primary-light);
  flex-shrink: 0;
}
.ba-storeContact__icon img{
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: none !important;
}
.ba-storeContact__icon span[aria-hidden="true"]{
  font-size: 18px;
}
.ba-storeContact__link{
  color: var(--ba-primary);
  text-decoration: none;
  font-weight: var(--ba-font-weight-semibold);
}
.ba-storeContact__link:hover{ text-decoration: underline; }
.ba-storeContact__hint{
  font-size: var(--ba-font-size-body-3);
  color: var(--ba-text-muted);
  margin: 10px 0 12px;
}
.ba-store .ba-box__head{
  padding: 14px 16px;
  font-size: var(--ba-font-size-body-3);
  font-weight: var(--ba-font-weight-extrabold);
  color: var(--ba-text-primary);
  border-bottom: 1px solid var(--ba-border);
}
.ba-storeContact .ba-btn--primary{
  width: 100%;
  margin-top: 12px;
  background: var(--ba-primary);
  color: var(--ba-text-on-dark);
  border-radius: var(--ba-radius-lg);
  font-weight: var(--ba-font-weight-semibold);
  font-family: var(--ba-font-family);
}
.ba-storeContact .ba-btn--primary:hover{
  background: var(--ba-primary-hover);
  color: var(--ba-text-on-dark);
}

/* ====== FILTROS STORE (Dokan) ====== */
.ba-store__filters{
  padding: 16px;
  overflow: visible;
}

.ba-store__filters .ba-filterLabel{
  display:block;
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ba-text-secondary); /* evita label "blanco" */
}

.ba-store__filters .ba-select{
  width:100%;
  height:48px;
  padding: 0 14px;
  border:1px solid #d7dde5;
  border-radius:12px;
  background: var(--ba-bg-white);
  color:#111827;
  font-size:14px;
  line-height:48px; /* evita que se corte el texto */
  appearance:auto;
  -webkit-appearance:auto;
  -moz-appearance:auto;
  opacity:1;
  -webkit-text-fill-color:#111827; /* por si algún CSS lo dejaba transparente */
}

.ba-store__filters .ba-select option{
  color:#111827;
}

.ba-store__filters .ba-btn{
  width:100%;
  margin-top:10px;
  padding:14px 18px;
  border-radius:10px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}

.ba-store__filters .ba-btn--primary{
  background:var(--ba-primary);
  color: var(--ba-text-on-dark);
  border:none;
}

.ba-store__filters .ba-btn--outline{
  background: var(--ba-bg-white);
  color:var(--ba-primary);
  border:2px solid var(--ba-primary);
}

/* ====== STORE (Dokan): layout, hero, grid, cards, promos, paginación (design tokens) ====== */
.ba-store,
.ba-store * {
  box-sizing: border-box !important;
}
.ba-store {
  padding: 18px 16px 46px !important;
  font-family: var(--ba-font-family);
}
.ba-store__headInner,
.ba-store__inner {
  max-width: var(--ba-container) !important;
  margin: 0 auto !important;
}
.ba-store__crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--ba-font-size-body-5);
  color: var(--ba-text-muted);
  margin: 6px 0 12px;
}
.ba-store__crumbs a {
  color: var(--ba-text-muted);
  text-decoration: none;
}
.ba-store__crumbs a:hover {
  color: var(--ba-link);
}
.ba-store__hero {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding-bottom: 6px !important;
}
.ba-store__logo {
  width: 56px !important;
  height: 56px !important;
  border-radius: var(--ba-radius-lg);
  overflow: hidden;
  background: var(--ba-bg-section);
  border: 1px solid var(--ba-border);
}
.ba-store__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ba-store__title {
  margin: 0;
  font-size: var(--ba-font-size-subtitle-2);
  font-weight: var(--ba-font-weight-extrabold);
  color: var(--ba-text-primary);
  line-height: 1.15;
}
.ba-store__meta {
  margin-top: 6px;
  font-size: var(--ba-font-size-body-3);
  color: var(--ba-text-muted);
}
.ba-store__desc {
  margin: 8px 0 0;
  font-size: var(--ba-font-size-body-3);
  color: var(--ba-text-secondary);
  max-width: 860px;
}
.ba-store__actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}
.ba-store__count {
  font-size: var(--ba-font-size-body-5);
  font-weight: var(--ba-font-weight-extrabold);
  color: var(--ba-text-muted);
  background: var(--ba-bg-white) !important;
  border: 1px solid var(--ba-border) !important;
  padding: 8px 12px !important;
  border-radius: var(--ba-radius-pill) !important;
}
.ba-store__grid {
  margin-top: 18px !important;
  display: grid !important;
  grid-template-columns: 312px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
  width: 100% !important;
}
.ba-store__grid > *,
.ba-store__side,
.ba-store__content {
  min-width: 0 !important;
}
.ba-store .ba-box {
  background: var(--ba-bg-white);
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius-xl);
  overflow: hidden;
}
.ba-store .ba-box__head {
  padding: 14px 16px;
  font-size: var(--ba-font-size-body-3);
  font-weight: var(--ba-font-weight-extrabold);
  color: var(--ba-text-primary);
  border-bottom: 1px solid var(--ba-border);
}
.ba-storeContact {
  padding: 14px 16px 16px !important;
}
.ba-store .ba-blur {
  filter: blur(4px);
  opacity: 0.75;
}
.ba-store .ba-btn {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 13px 14px;
  border-radius: var(--ba-radius-lg);
  font-weight: var(--ba-font-weight-extrabold);
  font-size: var(--ba-font-size-body-3);
  text-decoration: none;
  border: 1px solid transparent;
  font-family: var(--ba-font-family);
}
.ba-store .ba-btn--primary {
  background: var(--ba-primary);
  color: var(--ba-text-on-dark) !important;
}
.ba-store .ba-btn--primary:hover {
  background: var(--ba-primary-hover);
  color: var(--ba-text-on-dark) !important;
}
.ba-store .ba-mt {
  margin-top: 14px;
}
.ba-store .ba-empty {
  padding: 12px 16px;
  color: var(--ba-text-muted);
  font-size: var(--ba-font-size-body-5);
}
.ba-store .ba-promos {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
}
.ba-store .ba-promo {
  display: grid !important;
  grid-template-columns: 88px 1fr !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  min-height: 86px !important;
  align-items: center !important;
  border-radius: var(--ba-radius-xl) !important;
  border: 1px solid var(--ba-border) !important;
  background: var(--ba-banner-green) !important;
  text-decoration: none !important;
}
.ba-store .ba-promo__img {
  width: 88px !important;
  height: 54px !important;
  border-radius: var(--ba-radius-lg);
  background: var(--ba-bg-white);
  border: 1px solid var(--ba-border-light);
  overflow: hidden;
}
.ba-store .ba-promo__title {
  font-size: var(--ba-font-size-body-3);
  line-height: 1.2;
  color: var(--ba-text-primary);
}
.ba-store .ba-promo__desc {
  font-size: var(--ba-font-size-body-5);
  margin-top: 4px;
  opacity: 0.9;
  color: var(--ba-text-secondary);
}
.ba-storeGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 6px !important;
  width: 100% !important;
}
.ba-store .ba-card {
  width: 100%;
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius-xl);
  overflow: hidden;
  background: var(--ba-bg-white);
  text-decoration: none !important;
  display: block;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ba-store .ba-card:hover {
  border-color: var(--ba-primary);
  box-shadow: var(--ba-shadow-card-hover);
}
.ba-store .ba-card * {
  text-decoration: none !important;
}
.ba-store .ba-card__img img {
  width: 100% !important;
  height: 170px !important;
  object-fit: cover !important;
  display: block;
}
.ba-store .ba-card__body {
  padding: 12px 12px 14px !important;
}
.ba-store .ba-card__cat {
  display: inline-block;
  font-size: var(--ba-font-size-body-5);
  font-weight: var(--ba-font-weight-extrabold);
  color: var(--ba-primary);
  background: var(--ba-primary-light);
  border: 1px solid var(--ba-primary-border);
  padding: 3px 8px;
  border-radius: var(--ba-radius-pill);
  margin-bottom: 8px;
}
.ba-store .ba-card__title {
  font-size: var(--ba-font-size-body-3);
  font-weight: var(--ba-font-weight-extrabold);
  color: var(--ba-text-primary) !important;
  line-height: 1.25;
}
.ba-store .ba-card__meta {
  margin-top: 6px;
  font-size: var(--ba-font-size-body-5);
  color: var(--ba-text-muted);
}
.ba-store-pagination {
  padding: 16px 0 !important;
  width: 100% !important;
}
.ba-store-pagination--top {
  margin-bottom: 16px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--ba-border);
}
.ba-store-pagination--bottom {
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--ba-border);
}
.ba-store-pagination .page-numbers {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: center;
  align-items: center;
}
.ba-store-pagination .page-numbers li {
  margin: 0 !important;
}
.ba-store-pagination a.page-numbers,
.ba-store-pagination span.page-numbers {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-size: var(--ba-font-size-body-3) !important;
  font-weight: var(--ba-font-weight-bold) !important;
  color: var(--ba-text-secondary) !important;
  text-decoration: none !important;
  background: var(--ba-bg-white);
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius-md);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: var(--ba-font-family);
}
.ba-store-pagination a.page-numbers:hover {
  background: var(--ba-primary-light);
  border-color: var(--ba-primary);
  color: var(--ba-primary) !important;
}
.ba-store-pagination span.current {
  background: var(--ba-primary) !important;
  border-color: var(--ba-primary) !important;
  color: var(--ba-text-on-dark) !important;
}
.ba-store-pagination span.dots {
  border: none !important;
  background: transparent !important;
  min-width: auto;
  padding: 0 4px;
}
@media (max-width: 1000px) {
  .ba-store__grid {
    grid-template-columns: 1fr !important;
  }
  .ba-storeGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .ba-store .ba-promos {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 520px) {
  .ba-storeGrid {
    grid-template-columns: 1fr !important;
  }
  .ba-store__hero {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }
}