.elementor-kit-17{--e-global-color-primary:#050505;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#505050;--e-global-color-accent:#BD0080;--e-global-color-4d0af5c:#9D1C84;--e-global-color-b5f7f3c:#F62CDA;--e-global-color-f997c4e:#A053FD;--e-global-color-710ae17:#230335;--e-global-color-12944a0:#0C0217;--e-global-color-1719242:#11071C;--e-global-color-0d96e63:#F5DDF0;--e-global-color-939c1ef:#FEF8FD;--e-global-color-cc664f9:#EEF0F3;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-size:24px;--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Manrope";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Manrope";--e-global-typography-accent-font-weight:600;--e-global-typography-80ab7b2-font-family:"Poppins";--e-global-typography-80ab7b2-font-size:4.2em;--e-global-typography-80ab7b2-font-weight:500;--e-global-typography-c051953-font-family:"Poppins";--e-global-typography-c051953-font-size:1.2em;--e-global-typography-c051953-font-weight:500;--e-global-typography-b6c4209-font-family:"Poppins";--e-global-typography-b6c4209-font-weight:400;--e-global-typography-b6c4209-line-height:9rem;--e-global-typography-a4ce6f3-font-family:"Poppins";--e-global-typography-a4ce6f3-font-size:14px;--e-global-typography-a4ce6f3-font-weight:600;}.elementor-kit-17 button,.elementor-kit-17 input[type="button"],.elementor-kit-17 input[type="submit"],.elementor-kit-17 .elementor-button{background-color:transparent;font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );color:var( --e-global-color-secondary );background-image:linear-gradient(296deg, var( --e-global-color-4d0af5c ) 0%, var( --e-global-color-accent ) 100%);border-radius:25px 25px 25px 25px;padding:16px 26px 16px 26px;}.elementor-kit-17 button:hover,.elementor-kit-17 button:focus,.elementor-kit-17 input[type="button"]:hover,.elementor-kit-17 input[type="button"]:focus,.elementor-kit-17 input[type="submit"]:hover,.elementor-kit-17 input[type="submit"]:focus,.elementor-kit-17 .elementor-button:hover,.elementor-kit-17 .elementor-button:focus{background-color:transparent;background-image:linear-gradient(296deg, var( --e-global-color-4d0af5c ) 0%, var( --e-global-color-accent ) 75%);}.elementor-kit-17 e-page-transition{background-color:#FFBC7D;}.elementor-kit-17 h1{font-size:3.815rem;}.elementor-kit-17 h2{font-family:"Poppins", Sans-serif;font-size:3.052rem;}.elementor-kit-17 h3{font-family:"Poppins", Sans-serif;font-size:2.441rem;}.elementor-kit-17 h4{font-size:1.953rem;}.elementor-kit-17 h5{font-size:1.563rem;}.elementor-kit-17 h6{font-size:1.25rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:8px;--container-default-padding-right:8px;--container-default-padding-bottom:8px;--container-default-padding-left:8px;}.elementor-widget:not(:last-child){--kit-widget-spacing:16px;}.elementor-element{--widgets-spacing:16px 16px;--widgets-spacing-row:16px;--widgets-spacing-column:16px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-17{--e-global-typography-80ab7b2-font-size:3.8em;--e-global-typography-c051953-font-size:1em;--e-global-typography-b6c4209-font-size:10rem;--e-global-typography-b6c4209-line-height:7.6rem;}.elementor-kit-17 h1{font-size:2.986rem;}.elementor-kit-17 h2{font-size:2.488rem;}.elementor-kit-17 h3{font-size:2.074rem;}.elementor-kit-17 h4{font-size:1.728rem;}.elementor-kit-17 h5{font-size:1.44rem;}.elementor-kit-17 h6{font-size:1.2rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-17{--e-global-typography-80ab7b2-font-size:3em;--e-global-typography-c051953-font-size:0.9em;--e-global-typography-b6c4209-font-size:5rem;--e-global-typography-b6c4209-line-height:4rem;}.elementor-kit-17 h1{font-size:2.027rem;}.elementor-kit-17 h2{font-size:1.802rem;}.elementor-kit-17 h3{font-size:1.602rem;}.elementor-kit-17 h4{font-size:1.424rem;}.elementor-kit-17 h5{font-size:1.266rem;}.elementor-kit-17 h6{font-size:1.125rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   BAGÓ BOLIVIA — CSS MAESTRO v6 (CONSOLIDADO)
   Tema Hello + ElementsKit + Elementor + WooCommerce
   Por: Quatro Marketing
   Pegar en: Elementor → Site Settings → CSS personalizado
   (REEMPLAZA TODO el archivo anterior)
   ------------------------------------------------------------
   QUÉ CAMBIÓ RESPECTO A v5:
   · Se eliminó código muerto (~150 líneas): reglas que quedaban
     anuladas por bloques posteriores y nunca llegaban a aplicarse.
   · Se unificaron los bloques duplicados (hero, .vdm-toggle,
     .prensa-buscador, tarjetas del listado).
   · Cada conflicto se resolvió a favor del valor que YA se veía
     en pantalla, no del comentario original. El resultado visual
     es el mismo que en v5.
   · ÚNICO cambio de comportamiento: ver sección 10.B (se corrige
     el doble borde y el doble hover del listado de productos).
   ------------------------------------------------------------
   APRENDIZAJES DE ESTE SITIO (claves):
   · Las clases CSS manuales en secciones NO se aplican aquí.
     → Este CSS apunta DIRECTO a los widgets cuando hace falta.
   · Elementor filtra los var() de :root en algunos contextos.
     → En el vademécum y sala de prensa se usan valores directos.
   · El padding de las tarjetas va en .e-con-inner, NO en el
     contenedor externo.
   · Misión/Visión usan Icon Box de ElementsKit (.elementskit-infobox)
   · Valores/Compromiso usan Icon Box nativo (.elementor-icon-box-wrapper)
   · Las imágenes de producto traen fondo blanco propio → tarjetas
     blancas evitan el doble fondo.
   · Tras CADA cambio: purgar Speed Optimizer + Cmd+Shift+R.
   ------------------------------------------------------------
   ÍNDICE
    1. Variables de marca
    2. Botones globales
    3. Tarjetas neumórficas — ElementsKit
    4. Tarjetas neumórficas — Elementor nativo
    5. Acordeón FAQ
    6. Header glass
    7. Tipografía
    8. Scroll reveal
    9. Blog / posts
   10. WooCommerce — listado de productos
   11. Vademécum — hero de ficha
   12. Vademécum — tarjetas neumórficas inferiores
   13. Vademécum — truncado "Ver más"
   14. Vademécum — buscador de 4 pestañas
   15. Vademécum — índices navegables
   16. Productos relacionados
   17. FiboSearch
   18. Sala de prensa
   19. Accesibilidad
   ============================================================ */


/* ============================================================
   1. VARIABLES DE MARCA — EDITA SOLO AQUÍ
   Nota: estas variables funcionan en el CSS general del tema,
   pero NO dentro de los bloques del vademécum ni de sala de
   prensa (Elementor las filtra en esos contextos). Por eso más
   abajo verás los hex escritos de forma directa. Es intencional.
   ============================================================ */
:root {
  --bago-magenta: #BD0080;
  --bago-purpura: #9D1C84;
  --bago-tinta:   #1A0A18;
  --bago-gris:    #6B5C68;
  --bago-fondo:   #FBF6FA;
  --bago-hueso:   #EEF0F3;
  --grad: linear-gradient(135deg, #9D1C84 0%, #BD0080 100%);
  --neu-shadow:   12px 12px 24px #c8cad0, -12px -12px 24px #ffffff;
  --neu-shadow-h: 16px 16px 32px #c8cad0, -16px -16px 32px #ffffff;
  --neu-inset:    inset 4px 4px 8px #c8cad0, inset -4px -4px 8px #ffffff;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ============================================================
   2. BOTONES GLOBALES — degradado de marca + brillo al hover
   ------------------------------------------------------------
   OJO: en v5 había dos definiciones de .elementor-button (una en
   la sección de botones y otra en el bloque del header). La del
   header ganaba por orden y aplicaba a TODO el sitio, no solo al
   header. Aquí queda una sola regla con los valores que
   realmente se estaban viendo: radius 999px, padding 12px 28px,
   hover -1px. Los botones de ElementsKit conservan sus propios
   valores porque nunca fueron afectados por ese conflicto.
   ============================================================ */
.elementor-button {
  background: var(--grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 12px 28px !important;
  box-shadow: 0 4px 14px rgba(26,10,24,0.12) !important;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
}
.elementor-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(26,10,24,0.18) !important;
}

/* Botones de ElementsKit (no los toca el bloque del header) */
.ekit-btn, .elementskit-btn {
  background: var(--grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  padding: 16px 34px !important;
  box-shadow: 0 4px 14px rgba(26,10,24,0.12) !important;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease) !important;
  position: relative;
  overflow: hidden;
}
.ekit-btn:hover, .elementskit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(26,10,24,0.18) !important;
}

/* Brillo que cruza el botón */
.elementor-button::after {
  content: ""; position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg); transition: left 0.6s var(--ease);
}
.elementor-button:hover::after { left: 125%; }


/* ============================================================
   3. TARJETAS NEUMÓRFICAS — ElementsKit (Misión, Visión)
   ============================================================ */
.elementskit-infobox {
  background-color: var(--bago-hueso) !important;
  border: none !important;
  border-radius: 28px !important;
  box-shadow: var(--neu-shadow) !important;
  padding: 36px !important;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease) !important;
}
.elementskit-infobox:hover {
  transform: translateY(-4px);
  box-shadow: var(--neu-shadow-h) !important;
}
.elementskit-infobox .elementskit-info-box-title,
.elementskit-infobox .title { color: var(--bago-magenta) !important; }
.elementskit-infobox .box-body p,
.elementskit-infobox p { color: var(--bago-gris) !important; }

/* Ícono hundido */
.elementskit-infobox .icon {
  background: var(--bago-hueso) !important;
  border-radius: 50% !important;
  box-shadow: var(--neu-inset) !important;
}
.elementskit-infobox .icon i,
.elementskit-infobox .icon svg {
  color: var(--bago-magenta) !important;
  -webkit-text-fill-color: var(--bago-magenta) !important;
  fill: var(--bago-magenta) !important;
}


/* ============================================================
   4. TARJETAS NEUMÓRFICAS — Elementor nativo (Valores, Compromiso)
   ============================================================ */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
  background: var(--bago-hueso) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  border-radius: 28px !important;
  box-shadow: var(--neu-shadow) !important;
  padding: 36px !important;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease) !important;
}
.elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: var(--neu-shadow-h) !important;
}
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-title a { color: var(--bago-magenta) !important; }
.elementor-widget-icon-box .elementor-icon-box-description { color: var(--bago-gris) !important; }

/* Ícono con círculo magenta relleno */
.elementor-widget-icon-box .elementor-icon {
  background: var(--grad) !important;
  border-radius: 50% !important;
}
.elementor-widget-icon-box .elementor-icon i,
.elementor-widget-icon-box .elementor-icon svg {
  color: #fff !important; fill: #fff !important;
}


/* ============================================================
   5. ACORDEÓN FAQ — neumórfico hueso
   ============================================================ */
.elementskit-card,
.elementor-accordion .elementor-accordion-item {
  background: var(--bago-hueso) !important;
  border: none !important;
  border-radius: 18px !important;
  box-shadow: 6px 6px 14px #c8cad0, -6px -6px 14px #ffffff !important;
  margin-bottom: 16px !important;
  overflow: hidden;
}
.elementskit-card-header a,
.elementor-accordion .elementor-tab-title {
  color: var(--bago-tinta) !important; font-weight: 600 !important;
}
.elementor-accordion .elementor-active .elementor-tab-title { color: var(--bago-magenta) !important; }


/* ============================================================
   6. HEADER GLASS
   ------------------------------------------------------------
   RIESGO CONOCIDO: la cápsula depende del ID de Elementor
   .elementor-element-4dbac74f. Si ese contenedor se recrea, el
   ID cambia y el efecto se pierde sin aviso.
   → Recomendado: ponerle también la clase manual
     "bago-header-caps" al contenedor desde Elementor
     (Avanzado → Clases CSS). El .elementor-kit-17 ya está preparado
     abajo, así funciona con cualquiera de los dos.
   ============================================================ */
header.elementor-location-header, .elementor-location-header {
  transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.bago-header-scrolled {
  background: rgba(255,255,255,0.80) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 6px 24px rgba(157,28,132,0.12) !important;
}

/* Cápsula glass del header */
.elementor-element-4dbac74f > .e-con-inner,
.bago-header-caps > .e-con-inner {
  width: calc(100% - 40px) !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
  background: rgba(255,255,255,0.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 999px !important;
  padding: 6px 18px !important;
  min-height: 20px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}

/* Menú: quitar estilos del UL */
.jkit-nav-menu .jkit-menu,
ul.jkit-menu {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Links del menú */
.jkit-nav-menu .jkit-menu > li.menu-item > a {
  border-radius: 999px !important;
  padding: 8px 10px !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  transition: all 0.3s ease !important;
}
.jkit-nav-menu .jkit-menu > li.menu-item > a::before,
.jkit-nav-menu .jkit-menu > li.menu-item > a::after {
  display: none !important;
}
.jkit-nav-menu .jkit-menu > li.current-menu-item > a {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.jkit-nav-menu .jkit-menu > li.menu-item > a:hover {
  background: rgba(255,255,255,0.10) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

/* Color del menú: blanco en Home y Cesimed, magenta en el resto */
.home .jkit-nav-menu .jkit-menu > li.menu-item > a,
.home .jkit-nav-menu .jkit-menu > li.current-menu-item > a,
.page-id-201 .jkit-nav-menu .jkit-menu > li.menu-item > a,
.page-id-201 .jkit-nav-menu .jkit-menu > li.current-menu-item > a {
  color: #FFFFFF !important;
}
body:not(.home):not(.page-id-201) .jkit-nav-menu .jkit-menu > li.menu-item > a,
body:not(.home):not(.page-id-201) .jkit-nav-menu .jkit-menu > li.current-menu-item > a {
  color: #af007c !important;
}

/* Logo */
.elementor-widget-theme-site-logo img,
.custom-logo { max-height: 40px !important; }


/* ============================================================
   7. TIPOGRAFÍA — antetítulos de marca + jerarquía
   ============================================================ */
.elementor-widget-heading h6.elementor-heading-title,
.ekit-heading--title h6 {
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 13px; font-weight: 700; color: var(--bago-magenta);
}
h1.elementor-heading-title, h2.elementor-heading-title { letter-spacing: -0.02em; }


/* ============================================================
   8. SCROLL REVEAL
   Requiere el JS scroll-fx en el footer. Las clases reveal /
   reveal-stagger van en WIDGETS, nunca en secciones.
   ============================================================ */
.reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }


/* ============================================================
   9. BLOG / POSTS
   ============================================================ */
.elementor-post {
  border-radius: 24px; overflow: hidden; background: #fff;
  box-shadow: 0 6px 24px rgba(26,10,24,0.07);
  border: 1px solid rgba(189,0,128,0.06);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.elementor-post:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(157,28,132,0.18);
}
.elementor-post__thumbnail img { transition: transform 0.6s var(--ease); }
.elementor-post:hover .elementor-post__thumbnail img { transform: scale(1.06); }
.elementor-post-info__terms-list a {
  background: rgba(189,0,128,0.10); color: var(--bago-magenta) !important;
  padding: 4px 12px; border-radius: 50px; font-size: 12px; font-weight: 600;
}


/* ============================================================
   10. WOOCOMMERCE — LISTADO DE PRODUCTOS
   ============================================================ */

/* --- 10.A Grid nativo de WooCommerce (ul.products) --- */
ul.products li.product {
  background: #FFFFFF !important;
  border: 1px solid rgba(189,0,128,0.07) !important;
  border-radius: 24px !important;
  padding: 20px !important;
  box-shadow: 0 6px 22px rgba(26,10,24,0.08) !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease) !important;
}
ul.products li.product:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(157,28,132,0.20) !important;
}
ul.products li.product .woocommerce-loop-product__title {
  color: var(--bago-tinta) !important;
  font-weight: 600 !important;
}

/* Botones "Leer más" de WooCommerce */
ul.products li.product a.button,
.woocommerce a.button,
.woocommerce-page a.button {
  background: var(--grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 400 !important;
  padding: 14px 30px !important;
  box-shadow: 0 4px 14px rgba(26,10,24,0.12) !important;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease) !important;
  position: relative;
  overflow: hidden;
}
ul.products li.product a.button:hover,
.woocommerce a.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(26,10,24,0.18) !important;
}
ul.products li.product a.button::after,
.woocommerce a.button::after {
  content: ""; position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg); transition: left 0.6s var(--ease);
}
ul.products li.product a.button:hover::after,
.woocommerce a.button:hover::after { left: 125%; }

/* --- 10.B Loop Grid de Elementor (vademécum) ---
   ÚNICO CAMBIO DE COMPORTAMIENTO DE v6:
   En v5, .e-loop-item recibía fondo + borde + sombra Y su
   .e-con-inner recibía lo mismo → doble borde de 1px y doble
   sombra. Además ambos tenían hover (-6px y -5px), que se
   sumaban a -11px. Aquí la tarjeta se pinta SOLO en el inner.
   Si por algún motivo querés volver al comportamiento anterior,
   basta con borrar el primer bloque de abajo.                */
.elementor-loop-container .e-loop-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  height: 100% !important;
}
.elementor-loop-container .e-loop-item:hover { transform: none !important; }

.elementor-loop-container,
.elementor-loop-container.elementor-grid { align-items: stretch !important; }

.loop-card,
.elementor-loop-container .e-loop-item > .e-con-inner {
  background: #FFFFFF !important;
  border: 1px solid rgba(189,0,128,0.07) !important;
  border-radius: 24px !important;
  padding: 20px !important;
  box-shadow: 0 6px 22px rgba(26,10,24,0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease) !important;
}
.loop-card:hover,
.elementor-loop-container .e-loop-item:hover > .e-con-inner {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 38px rgba(157,28,132,0.16) !important;
}

/* Imagen: caja de altura fija para que todas arranquen igual */
.loop-card .elementor-widget-image,
.elementor-loop-container .e-loop-item .elementor-widget-image,
.loop-card figure,
.elementor-loop-container .e-loop-item figure {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.loop-card .elementor-widget-image,
.elementor-loop-container .e-loop-item .elementor-widget-image {
  height: 200px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
}
.loop-card img,
.elementor-loop-container .e-loop-item img {
  background: transparent !important;
  mix-blend-mode: normal !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 14px !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Nombre del producto */
.loop-card h2, .loop-card h3,
.elementor-loop-container .e-loop-item h2,
.elementor-loop-container .e-loop-item h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1A0A18 !important;
  margin: 14px 0 6px 0 !important;
  line-height: 1.3 !important;
}

/* Laboratorio */
.loop-lab {
  font-size: 12px !important;
  color: #BD0080 !important;
  font-weight: 600 !important;
  margin: 0 0 6px 0 !important;
}

/* Forma farmacéutica */
.loop-forma {
  font-size: 12.5px !important;
  color: #6B5C68 !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.4 !important;
}
.loop-forma::before {
  content: "Forma farmacéutica: ";
  font-weight: 700;
  color: #1A0A18;
}

/* Línea terapéutica (píldora) */
.loop-linea {
  display: inline-block !important;
  background: rgba(189,0,128,0.10) !important;
  color: #9D1C84 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 4px 11px !important;
  border-radius: 50px !important;
  margin: 0 0 8px 0 !important;
  width: auto !important;
  line-height: 1.4 !important;
}
.loop-linea::before {
  content: "Línea: ";
  font-weight: 700;
  color: #1A0A18;
}

/* Principio activo */
.loop-pa,
.loop-card .elementor-widget-text-editor p {
  font-size: 13px !important;
  color: #6B5C68 !important;
  line-height: 1.5 !important;
  margin: 0 0 14px 0 !important;
}

/* Botón, siempre al fondo */
.loop-btn,
.loop-card > .elementor-widget-button:last-child {
  margin-top: auto !important;
  width: 100% !important;
}
.loop-btn .elementor-button {
  background: #BD0080 !important;
  background-image: none !important;
  color: #fff !important;
  border-radius: 50px !important;
  padding: 11px 22px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  width: 100% !important;
  justify-content: center !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background 0.25s ease !important;
}
.loop-btn .elementor-button::after,
.loop-btn .elementor-button::before { display: none !important; content: none !important; }
.loop-btn .elementor-button:hover { background: #9D1C84 !important; transform: none !important; }


/* ============================================================
   11. VADEMÉCUM — HERO DE FICHA DE PRODUCTO
   Layout final: 2 columnas.
     Col 1 fila 1 → identidad (píldoras, nombre, principio activo)
     Col 1 fila 2 → imagen
     Col 2 (ambas filas) → campos clínicos
   ------------------------------------------------------------
   NOTA: en v5 este layout se armaba con flex y luego se
   reescribía cuatro veces (incluido un bloque "Restaurar 3
   columnas") hasta que el grid final los anulaba a todos.
   Aquí queda solo el grid, que es lo que realmente aplica.
   ============================================================ */
.vade-hero {
  background: linear-gradient(135deg, #9D1C84 0%, #BD0080 100%);
  border-radius: 28px;
  padding: 34px 40px;
  max-width: 1120px !important;
  margin: 40px auto 24px auto !important;
  box-shadow: 0 12px 32px rgba(157,28,132,0.18);
}

.vade-hero .vade-hero__top,
.e-con.vade-hero__top,
.elementor-element.vade-hero__top {
  display: grid !important;
  grid-template-columns: 250px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 30px !important;
  row-gap: 18px !important;
  align-items: center !important;
}

/* --- Col 1, fila 1: identidad (centrada) --- */
.vade-hero .vade-hero__top > .vade-hero__info {
  grid-column: 1 !important;
  grid-row: 1 !important;
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  align-self: end !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  padding: 0 !important;
}
.vade-hero__info h1 {
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  text-align: center !important;
  width: 100% !important;
}
.vade-hero__sub {
  color: rgba(255,255,255,0.85) !important;
  font-size: 14px !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  width: 100% !important;
}

/* Píldoras (línea terapéutica / laboratorio) */
.vade-pills {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 7px !important;
  margin-bottom: 12px !important;
}
.vade-pill {
  display: inline-block !important;
  width: auto !important;
  background: rgba(255,255,255,0.20) !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 5px 13px !important;
  border-radius: 50px !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  line-height: 1.4 !important;
}
.vade-pill a { color: #fff !important; text-decoration: none !important; }

/* --- Col 1, fila 2: imagen --- */
.vade-hero .vade-hero__top > .vade-hero__img {
  grid-column: 1 !important;
  grid-row: 2 !important;
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  align-self: start !important;
  background: #FFFFFF !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: clip;
  padding: 16px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14) !important;
}
.vade-hero__img img {
  max-width: 100% !important;
  max-height: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 10px;
}

/* --- Col 2: campos clínicos, sin tarjetas, separados por línea --- */
.vade-hero .vade-hero__top > .vade-hero__cards {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  align-self: center !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.vade-hero__cards .vade-card-glass,
.vade-hero__cards .vade-card-glass.e-con,
.vade-hero__cards > .elementor-element {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  transition: none !important;
}
.vade-hero__cards .vade-card-glass:hover {
  transform: none !important; box-shadow: none !important; background: transparent !important;
}

/* Sin bordes internos... */
.vade-hero__cards .vade-card-glass,
.vade-hero__cards .vade-card-glass *,
.vade-hero__cards .e-con-inner,
.vade-hero__cards .elementor-widget,
.vade-hero__cards .vade-field__head {
  border: none !important;
}
/* ...salvo la línea divisoria entre campos (todos menos el primero) */
.vade-hero__cards > .elementor-element:not(:first-child) {
  border-top: 1px solid rgba(255,255,255,0.20) !important;
  padding-top: 5px !important;
  margin-top: 5px !important;
}

/* Espaciado interno de cada campo */
.vade-hero__cards .vade-card-glass > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 15px 0 !important;
  gap: 0 !important;
  width: 100% !important;
}
.vade-hero__cards > .elementor-element:first-child > .e-con-inner { padding-top: 0 !important; }
.vade-hero__cards > .elementor-element:last-child  > .e-con-inner { padding-bottom: 0 !important; }

/* Título del campo */
.vade-hero__cards .vade-field__head {
  display: block !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
}
.vade-hero__cards .vade-field__head .elementor-widget-icon,
.vade-hero__cards .vade-field__head i,
.vade-hero__cards .vade-field__head svg { display: none !important; }

.vade-hero__cards .vade-field__title,
.vade-hero__cards .vade-field__title p,
.vade-hero__cards .vade-field__title > * {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: rgba(255,255,255,0.65) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  line-height: 1.3 !important;
  display: block !important;
  white-space: normal !important;
}

/* Texto del campo */
.vade-hero__cards .vade-card-glass p,
.vade-hero__cards .vade-card-glass .elementor-widget-text-editor,
.vade-hero__cards .vade-card-glass .elementor-widget-text-editor p {
  color: #FFFFFF !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.vade-hero__cards .elementor-widget-text-editor { position: relative; }


/* ============================================================
   12. VADEMÉCUM — 3 TARJETAS NEUMÓRFICAS (debajo del hero)
   ============================================================ */
.vade-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 18px !important;
  max-width: 1200px !important;
  margin: 0 auto 48px auto !important;
  width: 100%;
  align-items: start !important;
}
.vade-grid .vade-field {
  background: #EEF0F3 !important;
  border: none !important;
  border-radius: 22px !important;
  padding: 24px !important;
  box-shadow: 10px 10px 20px #c8cad0, -10px -10px 20px #ffffff !important;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.4s cubic-bezier(0.22,1,0.36,1) !important;
}
.vade-grid .vade-field:hover {
  transform: translateY(-4px) !important;
  box-shadow: 14px 14px 28px #c8cad0, -14px -14px 28px #ffffff !important;
}
.vade-grid .vade-field__head {
  display: block !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}
.vade-grid .vade-field__head .elementor-widget-icon,
.vade-grid .vade-field__head i,
.vade-grid .vade-field__head svg { display: none !important; }

.vade-grid .vade-field__title,
.vade-grid .vade-field__title p,
.vade-grid .vade-field__title > * {
  background: transparent !important;
  border: none !important; border-radius: 0 !important;
  padding: 0 !important; margin: 0 !important;
  color: #BD0080 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  line-height: 1.4 !important;
  display: block !important;
}
.vade-grid .vade-field p,
.vade-grid .vade-field .elementor-widget-text-editor,
.vade-grid .vade-field .elementor-widget-text-editor p {
  font-size: 13.5px !important; color: #1A0A18 !important;
  margin: 0 !important; line-height: 1.6 !important;
  background: transparent !important;
}
/* Alerta (advertencias / contraindicaciones): título rojo */
.vade-grid .vade-field--alert .vade-field__title,
.vade-grid .vade-field--alert .vade-field__title p,
.vade-grid .vade-field--alert .vade-field__title > * {
  color: #C0392B !important;
}


/* ============================================================
   13. VADEMÉCUM — TRUNCADO "VER MÁS"
   El botón lo inserta el snippet JS solo cuando el texto
   realmente desborda (mide scrollHeight vs clientHeight).
   → El número de líneas visibles se controla SOLO desde aquí.
   ============================================================ */
.vdm-truncable {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vdm-truncable.is-open {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.vade-hero__cards .vdm-truncable { -webkit-line-clamp: 7; }
.vade-grid        .vdm-truncable { -webkit-line-clamp: 3; }

/* Botón — base común */
.vdm-toggle,
button.vdm-toggle {
  position: relative !important;
  z-index: 2;
  display: inline-block !important;
  background: none !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  cursor: pointer !important;
  transform: none !important;
  transition: color 0.25s ease !important;
}
.vdm-toggle::before, .vdm-toggle::after,
button.vdm-toggle::before, button.vdm-toggle::after {
  display: none !important; content: none !important;
}

/* Variante hero: blanco sobre magenta */
.vade-hero__cards .vdm-toggle {
  margin: 6px 0 0 0 !important;
  color: rgba(255,255,255,0.70) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
.vade-hero__cards .vdm-toggle:hover { color: #fff !important; background: none !important; }

/* Variante tarjetas inferiores: magenta sobre hueso */
.vade-grid .vdm-toggle {
  margin: 8px 0 0 0 !important;
  color: #BD0080 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.vade-grid .vdm-toggle:hover { color: #9D1C84 !important; background: none !important; }


/* ============================================================
   14. VADEMÉCUM — BUSCADOR DE 4 PESTAÑAS
   HTML y JS viven en el snippet [buscador_vademecum] (WPCode).
   ============================================================ */
.vdm-buscador {
  background: #FBF6FA;
  border-radius: 999px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
  max-width: 1100px;
  margin: 24px auto 32px auto;
}

/* Pestañas */
.vdm-tabs { display: flex; gap: 6px; flex-wrap: nowrap; }
.vdm-buscador .vdm-tab,
.vdm-buscador button.vdm-tab {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #9D1C84 !important;
  border: 1px solid rgba(189,0,128,0.20) !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.2 !important;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none !important;
  transform: none !important;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}
/* Mata el brillo heredado de la sección 2 */
.vdm-buscador .vdm-tab::after,
.vdm-buscador .vdm-tab::before { display: none !important; content: none !important; }

.vdm-buscador .vdm-tab:not(.is-active):hover {
  background: rgba(189,0,128,0.06) !important;
  color: #BD0080 !important;
  border-color: #BD0080 !important;
  transform: none !important;
}
.vdm-buscador .vdm-tab.is-active,
.vdm-buscador button.vdm-tab.is-active {
  background: #BD0080 !important;
  color: #FFFFFF !important;
  border-color: #BD0080 !important;
}
.vdm-buscador .vdm-tab.is-active:hover {
  background: #9D1C84 !important;
  border-color: #9D1C84 !important;
}

/* Controles */
.vdm-controls { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; flex-wrap: nowrap; }
.vdm-select-wrap { display: none; }
.vdm-select-wrap.is-active { display: block; flex: 0 1 230px; }
.vdm-select {
  width: 100%;
  max-width: 230px;
  background: #FFFFFF;
  border: 1px solid rgba(189,0,128,0.25);
  border-radius: 999px;
  padding: 9px 34px 9px 14px;
  font-size: 12px;
  color: #1A0A18;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BD0080' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  text-overflow: ellipsis;
}
.vdm-select:focus {
  outline: none; border-color: #BD0080;
  box-shadow: 0 0 0 3px rgba(189,0,128,0.10);
}

/* Botón buscar */
.vdm-btn {
  background: #BD0080 !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 11px 18px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none !important;
  transform: none !important;
  transition: background 0.25s ease !important;
}
.vdm-btn::after, .vdm-btn::before { display: none !important; content: none !important; }
.vdm-btn:hover { background: #9D1C84 !important; transform: none !important; }


/* ============================================================
   15. VADEMÉCUM — ÍNDICES NAVEGABLES POR PESTAÑA
   HTML generado por el shortcode [vademecum_indices].
   El contenedor del Loop Grid debe tener la clase
   "vdm-resultados" para que se oculte al abrir un índice.
   ============================================================ */
.vdm-indices {
  max-width: 1240px;
  margin: 30px auto 10px;
  padding: 0 24px;
  box-sizing: border-box;
}
.vdm-idx-panel { display: none; }
.vdm-idx-panel.is-active { display: block; animation: vdmFade .25s ease; }
@keyframes vdmFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
body.vdm-idx-open .vdm-resultados { display: none !important; }

.vdm-idx-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; margin-bottom: 24px;
}
.vdm-idx-head h3 { margin: 0; font-size: 22px; color: #1A0A18; font-weight: 700; }
.vdm-idx-close {
  background: transparent; border: 1.5px solid #BD0080; color: #BD0080;
  border-radius: 999px; padding: 9px 20px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  transition: all .2s ease;
}
.vdm-idx-close:hover { background: #BD0080; color: #fff; }

/* Laboratorios */
.vdm-lab-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px; margin-bottom: 30px;
}
.vdm-lab-card {
  display: flex; flex-direction: column; background: #fff; border-radius: 18px;
  padding: 18px; text-decoration: none; box-sizing: border-box;
  box-shadow: 0 6px 18px rgba(26,10,24,.07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.vdm-lab-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(189,0,128,.16); }
.vdm-lab-imgbox {
  height: 110px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; overflow: hidden;
}
.vdm-lab-imgbox img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.vdm-lab-fallback { font-size: 30px; font-weight: 800; color: #BD0080; letter-spacing: .04em; }
.vdm-lab-name { font-size: 15px; font-weight: 700; color: #BD0080; line-height: 1.3; }
.vdm-lab-name span { color: #1A0A18; font-weight: 600; }

/* Productos */
.vdm-prod-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px; margin-bottom: 34px;
}
.vdm-prod-card {
  display: flex; flex-direction: column; background: #fff; border-radius: 20px;
  padding: 20px; box-sizing: border-box; box-shadow: 0 6px 18px rgba(26,10,24,.07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.vdm-prod-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(189,0,128,.16); }
.vdm-prod-imgbox {
  height: 165px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; overflow: hidden;
}
.vdm-prod-imgbox img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.vdm-prod-noimg { font-size: 12px; color: #1A0A18; opacity: .35; }
.vdm-prod-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #1A0A18; line-height: 1.25; }
.vdm-prod-lab { font-size: 15px; font-weight: 700; color: #BD0080; margin-bottom: 10px; }
.vdm-prod-forma { font-size: 13px; color: #6b6470; line-height: 1.45; margin-bottom: 12px; }
.vdm-prod-forma strong { color: #1A0A18; font-weight: 700; }
.vdm-prod-linea {
  display: inline-block; background: #FBEAF4; color: #BD0080; border-radius: 999px;
  padding: 7px 14px; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; margin-bottom: 16px; align-self: flex-start;
}
.vdm-prod-linea strong { color: #1A0A18; font-weight: 800; }
.vdm-prod-btn {
  margin-top: auto; display: block; text-align: center; background: #BD0080; color: #fff;
  border-radius: 999px; padding: 13px 18px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  transition: background .2s ease;
}
.vdm-prod-btn:hover { background: #9D1C84; color: #fff; }

/* Chips de texto (líneas terapéuticas / principios activos) */
.vdm-idx-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px; margin-bottom: 26px;
}
.vdm-idx-chip {
  display: block; padding: 16px 18px; border-radius: 16px; background: #fff;
  color: #1A0A18; text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.35;
  box-shadow: 0 4px 14px rgba(26,10,24,.07); transition: all .18s ease;
}
.vdm-idx-chip:hover { transform: translateY(-3px); color: #BD0080; box-shadow: 0 10px 22px rgba(189,0,128,.15); }

/* Navegación alfabética */
.vdm-idx-abc {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px;
  padding-bottom: 14px; border-bottom: 1px solid rgba(189,0,128,.15);
}
.vdm-idx-abc a {
  min-width: 32px; text-align: center; padding: 6px 8px; border-radius: 10px;
  background: #fff; color: #9D1C84; font-weight: 700; font-size: 13px; text-decoration: none;
  box-shadow: 0 2px 8px rgba(26,10,24,.06);
}
.vdm-idx-abc a:hover { background: #BD0080; color: #fff; }
.vdm-idx-letra h4 { margin: 0 0 14px; font-size: 15px; font-weight: 800; color: #BD0080; letter-spacing: .08em; }
.vdm-idx-empty { color: #1A0A18; opacity: .6; }


/* ============================================================
   16. PRODUCTOS RELACIONADOS
   ============================================================ */
.elementor-widget-woocommerce-product-related h2,
.related.products > h2,
.elementor-widget-woocommerce-product-related .elementor-heading-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #BD0080 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  margin: 0 0 22px 0 !important;
  line-height: 1.4 !important;
}
.related.products li.product .woocommerce-loop-product__title,
.elementor-widget-woocommerce-product-related .woocommerce-loop-product__title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1A0A18 !important;
  line-height: 1.35 !important;
  margin: 14px 0 0 0 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
}
.related.products li.product,
.elementor-widget-woocommerce-product-related li.product {
  background: #fff !important;
  border-radius: 20px !important;
  padding: 18px !important;
  box-shadow: 0 4px 16px rgba(26,10,24,0.08) !important;
  border: 1px solid rgba(189,0,128,0.06) !important;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.35s cubic-bezier(0.22,1,0.36,1) !important;
}
.related.products li.product:hover,
.elementor-widget-woocommerce-product-related li.product:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 36px rgba(157,28,132,0.16) !important;
}
.related.products li.product img {
  border-radius: 14px !important;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1) !important;
}
.related.products li.product:hover img { transform: scale(1.05) !important; }

/* Modo catálogo: sin precio ni carrito */
.related.products li.product .price,
.related.products li.product .button,
.related.products li.product .add_to_cart_button { display: none !important; }


/* ============================================================
   17. FIBOSEARCH
   ============================================================ */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-form,
.dgwt-wcas-search-wrapp .dgwt-wcas-search-input {
  background: #FBF6FA !important;
  border: 1px solid rgba(189,0,128,0.18) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: #1A0A18 !important;
  font-size: 14px !important;
  height: auto !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.dgwt-wcas-search-wrapp .dgwt-wcas-search-form {
  padding: 0 !important;
  overflow: visible !important;
}
.dgwt-wcas-search-wrapp .dgwt-wcas-search-input {
  padding: 14px 58px 14px 20px !important;
}
.dgwt-wcas-search-wrapp .dgwt-wcas-search-input:focus {
  border-color: #BD0080 !important;
  box-shadow: 0 0 0 3px rgba(189,0,128,0.10) !important;
  outline: none !important;
}
.dgwt-wcas-search-wrapp .dgwt-wcas-search-input::placeholder {
  color: #9D8A98 !important;
  opacity: 1 !important;
}

/* Botón lupa (círculo magenta a la derecha) */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit {
  position: absolute !important;
  right: 10px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  background: #BD0080 !important;
  background-image: none !important;
  border: none !important;
  border-radius: 999px !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  transition: background 0.25s ease !important;
}
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit::before,
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit::after {
  display: none !important; content: none !important;
}
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit:hover {
  background: #9D1C84 !important;
  transform: translateY(-50%) !important;
}
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit svg,
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit svg path,
.dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier,
.dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier path {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
  width: 16px !important;
  height: 16px !important;
}
.dgwt-wcas-close,
.dgwt-wcas-close svg path { fill: #9D1C84 !important; }

/* Panel de sugerencias */
.dgwt-wcas-suggestions-wrapp {
  border: 1px solid rgba(189,0,128,0.15) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 34px rgba(26,10,24,0.12) !important;
  overflow: hidden !important;
  margin-top: 6px !important;
}
.dgwt-wcas-suggestion {
  padding: 12px 16px !important;
  transition: background 0.2s ease !important;
}
.dgwt-wcas-suggestion:hover,
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected {
  background: rgba(189,0,128,0.06) !important;
}
.dgwt-wcas-st--title,
.dgwt-wcas-st-title {
  color: #1A0A18 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.dgwt-wcas-st--title strong,
.dgwt-wcas-st-title strong,
.dgwt-wcas-suggestion strong {
  color: #BD0080 !important;
  font-weight: 700 !important;
}
.dgwt-wcas-st-breadcrumbs,
.dgwt-wcas-sd { color: #6B5C68 !important; font-size: 12px !important; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-headline {
  background: #FBF6FA !important;
  color: #9D1C84 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  padding: 10px 16px !important;
}
.dgwt-wcas-details-more,
.dgwt-wcas-all-results { color: #BD0080 !important; font-weight: 700 !important; }


/* ============================================================
   18. SALA DE PRENSA
   Clases a poner en Elementor:
     · contenedor que envuelve las tarjetas → prensa-grid
     · cada tarjeta                        → prensa-item prensa-card
   El HTML/JS del buscador vive en un widget HTML de la página.
   Aquí van solo los overrides de layout.
   ============================================================ */

/* --- Buscador --- */
.prensa-buscador {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 26px auto 30px auto !important;
  padding: 14px 18px !important;
  box-sizing: border-box !important;
}
.prensa-buscador input#prensa-q {
  flex: 1 1 240px !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  box-sizing: border-box !important;
}
.prensa-buscador select {
  flex: 0 0 auto !important;
  width: 155px !important;
  max-width: 155px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.prensa-buscador button#prensa-reset {
  flex: 0 0 auto !important;
  width: auto !important;
  white-space: nowrap !important;
}
/* Nota: :has() no funciona en Safari < 15.4. Si el buscador se
   ve ancho en algún equipo viejo, es por esto. Alternativa sin
   :has(): poner el contenedor del widget en "En caja" 900px
   desde el panel de Elementor. */
.elementor-widget-html:has(.prensa-buscador) .elementor-widget-container {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ocultar tarjetas al filtrar */
.prensa-item.prensa-oculto { display: none !important; }

/* --- Rejilla: se aplica al inner, que es el que maqueta --- */
.prensa-grid > .e-con-inner,
.prensa-grid.e-con > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}
.prensa-grid .prensa-card {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
}

/* --- Tarjeta --- */
.prensa-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #fff !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  padding: 0 !important;
  box-shadow: 0 6px 22px rgba(26,10,24,.08) !important;
  border: 1px solid rgba(189,0,128,.07) !important;
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              box-shadow .35s cubic-bezier(.22,1,.36,1) !important;
}
.prensa-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 38px rgba(157,28,132,.16) !important;
}
.prensa-card > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Imagen con altura uniforme */
.prensa-card .elementor-widget-image {
  width: 100% !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  height: 230px !important;
  overflow: hidden !important;
}
.prensa-card .elementor-widget-image .elementor-widget-container,
.prensa-card .elementor-widget-image figure,
.prensa-card .elementor-widget-image a {
  height: 100% !important;
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.prensa-card .elementor-widget-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  display: block !important;
  transition: transform .6s cubic-bezier(.22,1,.36,1) !important;
}
.prensa-card:hover .elementor-widget-image img { transform: scale(1.05) !important; }

/* Textos con padding lateral */
.prensa-card .elementor-widget:not(.elementor-widget-image):not(.elementor-widget-button) {
  width: 100% !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
  margin-bottom: 10px !important;
}

/* Botón siempre al fondo */
.prensa-card .elementor-widget-button {
  width: 100% !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding: 6px 22px 22px 22px !important;
}


/* ============================================================
   19. RESPONSIVE
   Agrupado por breakpoint para que sea fácil de auditar.
   ============================================================ */

@media (max-width: 1240px) {
  .vade-hero, .vade-grid { margin-left: 20px !important; margin-right: 20px !important; }
}

@media (max-width: 1100px) {
  .vdm-buscador { flex-wrap: wrap !important; border-radius: 24px; max-width: 94%; }
  .vdm-tabs, .vdm-controls { flex-wrap: wrap !important; }
}

@media (max-width: 1024px) {
  .prensa-grid > .e-con-inner,
  .prensa-grid.e-con > .e-con-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .vade-hero .vade-hero__top {
    grid-template-columns: 220px minmax(0, 1fr) !important;
    column-gap: 22px !important;
  }
  .vade-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 820px) {
  .prensa-buscador { flex-wrap: wrap !important; }
  .prensa-buscador select { width: auto !important; max-width: none !important; flex: 1 1 140px !important; }
}

@media (max-width: 767px) {
  .elementskit-infobox,
  .elementor-widget-icon-box .elementor-icon-box-wrapper { padding: 28px !important; }

  .vade-hero { padding: 22px !important; }
  .vade-hero .vade-hero__top {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .vade-hero .vade-hero__top > .vade-hero__img,
  .vade-hero .vade-hero__top > .vade-hero__info,
  .vade-hero .vade-hero__top > .vade-hero__cards {
    width: 100% !important;
    max-width: 100% !important;
  }
  .vade-hero__info h1 { font-size: 24px !important; }
  .vade-grid { grid-template-columns: 1fr !important; }

  .vdm-indices { padding: 0 16px; }
  .vdm-lab-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .vdm-lab-imgbox { height: 80px; }
  .vdm-prod-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .vdm-prod-imgbox { height: 120px; }
  .vdm-prod-card { padding: 14px; }
  .vdm-idx-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

  .prensa-grid > .e-con-inner,
  .prensa-grid.e-con > .e-con-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 700px) {
  .vdm-buscador { flex-direction: column; align-items: stretch; }
  .vdm-tabs { justify-content: center; }
  .vdm-controls { flex-direction: column; align-items: stretch; }
  .vdm-select-wrap.is-active, .vdm-select { flex: 1 1 auto; max-width: none; }
  .vdm-btn { width: 100%; }
}

@media (max-width: 600px) {
  .prensa-grid > .e-con-inner,
  .prensa-grid.e-con > .e-con-inner {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .prensa-card .elementor-widget-image { height: 200px !important; }
  .prensa-buscador {
    flex-direction: column !important;
    align-items: stretch !important;
    max-width: 92% !important;
  }
  .prensa-buscador input#prensa-q,
  .prensa-buscador select,
  .prensa-buscador button#prensa-reset {
    width: 100% !important; max-width: none !important; flex: 1 1 auto !important;
  }
}

/* --- Accesibilidad: respetar movimiento reducido --- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .elementskit-infobox,
  .elementor-icon-box-wrapper,
  .elementor-button,
  .loop-card,
  .elementor-loop-container .e-loop-item > .e-con-inner,
  .vade-grid .vade-field,
  .prensa-card { transition: none !important; }
  .elementor-button:hover,
  .loop-card:hover,
  .elementor-loop-container .e-loop-item:hover > .e-con-inner,
  .vade-grid .vade-field:hover,
  .prensa-card:hover { transform: none !important; }
  .prensa-card:hover .elementor-widget-image img { transform: none !important; }
}


/* ============================================================
   FIN — CSS MAESTRO v6 · Bagó Bolivia · Quatro Marketing
   ============================================================ */
   
    .elementor-widget-elementskit-image-box img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.pil-note__list{ margin:8px 0 0; padding-left:18px; list-style:none; }
.pil-note__list li{ position:relative; padding-left:16px; margin-bottom:8px; line-height:1.6; }
.pil-note__list li:last-child{ margin-bottom:0; }
.pil-note__list li::before{ content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:#BD0080; }
.pil-note__list li:last-child{ margin-bottom:0; }

/* === Estandarizar imágenes del catálogo de productos === */
ul.products li.product .attachment-woocommerce_thumbnail,
ul.products li.product img,
.woocommerce ul.products li.product a img {
    width: 100% !important;
    height: 220px !important;      /* mismo alto para todas */
    object-fit: contain !important; /* producto completo, sin recorte */
    object-position: center !important;
    background: #ffffff !important;  /* fondo blanco uniforme */
    padding: 12px !important;         /* aire alrededor igual para todas */
    box-sizing: border-box !important;
}


/* ============================================================
   MENÚ HAMBURGUESA MÓVIL — ESTILO GLASS (ambas cabeceras)
   Panel flotante con vidrio magenta/púrpura translúcido + blur,
   bordes redondeados, textos blancos, logo en blanco.
   Botón Bagó 24/7 = pastilla blanca. Oculto en escritorio.
   ============================================================ */
@media (max-width:1024px){
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active{
    flex-direction: column !important;
    height: auto !important;
    max-height: calc(100vh - 32px) !important;
    top: 16px !important; left: 16px !important; right: 16px !important;
    width: auto !important; margin: 0 !important;
    overflow-y: auto !important;
    background: linear-gradient(160deg, rgba(146,22,122,0.90) 0%, rgba(176,0,118,0.82) 100%) !important;
    background-color: rgba(157,28,132,0.88) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: 28px !important;
    box-shadow: 0 20px 50px rgba(26,10,24,0.38) !important;
    padding: 18px 16px !important;
  }
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active .jkit-nav-identity-panel{
    order:0 !important; flex:0 0 auto !important;
    border-bottom: 1px solid rgba(255,255,255,0.18) !important;
    padding-bottom: 12px !important; margin-bottom: 8px !important;
  }
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active .jkit-nav-identity-panel img,
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active .jkit-nav-logo img{ filter: brightness(0) invert(1) !important; }
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active .jkit-menu-container{
    order:1 !important; height:auto !important; flex:1 1 auto !important;
    overflow:visible !important; width:100% !important; background:transparent !important;
  }
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active .jkit-menu{
    flex-direction:column !important; height:auto !important; width:100% !important;
    gap:2px !important; background:transparent !important;
  }
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active .jkit-menu > li.menu-item > a{
    color:#ffffff !important; background:transparent !important;
    border-radius:14px !important; padding:12px 16px !important;
    font-weight:500 !important; font-size:17px !important; transition:background .25s ease !important;
  }
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active .jkit-menu > li.menu-item > a:hover,
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active .jkit-menu > li.current-menu-item > a{ background:rgba(255,255,255,0.15) !important; color:#fff !important; }
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active .jkit-menu > li.menu-item:not(:last-child){ border-bottom:1px solid rgba(255,255,255,0.10) !important; }
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active .jkit-submenu li.menu-item > a{ color:rgba(255,255,255,0.82) !important; }
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active .jkit-menu > li.solo-movil{ border-bottom:none !important; }
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active .jkit-menu > li.solo-movil > a{
    background:#ffffff !important; color:#BD0080 !important;
    border-radius:50px !important; text-align:center !important; justify-content:center !important;
    margin:14px 6px 2px 6px !important; padding:13px 20px !important; font-weight:700 !important;
    box-shadow:0 6px 18px rgba(0,0,0,0.20) !important;
  }
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active .jkit-nav-close-button,
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active .jkit-nav-close-button i,
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active .jkit-nav-close-button svg{ color:#fff !important; fill:#fff !important; }

  /* FIX: backdrop del header rompía el position:fixed del panel (clics caían en el buscador). En móvil se quita. */
  .elementor-location-header{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active{ z-index:99999 !important; }
  /* X de cerrar en blanco */
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-close-menu,
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-close-menu i,
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-close-menu svg{ color:#ffffff !important; fill:#ffffff !important; }
  /* Submenú (sub-menu) con estilo glass, no recuadro blanco */
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active .jkit-menu .sub-menu,
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active .jkit-menu ul.sub-menu{
    background: rgba(255,255,255,0.10) !important;
    -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important;
    border-radius: 14px !important; box-shadow: none !important;
    margin: 4px 8px 6px 8px !important; padding: 4px 0 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
  }
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active .jkit-menu .sub-menu li.menu-item > a{
    color:#ffffff !important; background:transparent !important;
    font-weight:500 !important; font-size:15px !important; padding:10px 18px !important;
  }
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active .jkit-menu .sub-menu li.menu-item > a:hover{ background:rgba(255,255,255,0.14) !important; color:#ffffff !important; }
  body[data-elementor-device-mode] .jkit-nav-menu.jkit-nav-menu.break-point-mobile .jkit-menu-wrapper.active .jkit-menu .sub-menu li.menu-item:not(:last-child) > a{ border-bottom:1px solid rgba(255,255,255,0.08) !important; }

}
/* En escritorio el ítem del menú se oculta (ya existe el botón original) */
@media (min-width:1025px){
  .jkit-nav-menu .jkit-menu > li.solo-movil{ display:none !important; }
}/* End custom CSS */