/* idecaba-local.css — local overrides for hub-asymmetric (sitio.comunal*.com.ar)
   Goal: keep UI identical to original template, only fix the eyebrow pill + prevent bad overlays.
*/

:root{
  --idecaba-primary: #0F144E;
  --idecaba-eyebrow-bg: #BFC2C7;
  --idecaba-eyebrow-fg: #000000;
}

/* NOTE: do NOT override Elementor global colors here.
   That can recolor backgrounds/sections across the whole template.
   Keep this file limited to the eyebrow + specific bugfixes only. */

/* Header fixes */
/* Prevent the header bar from turning black (keep original transparent/light look) */
.main-header,
.is-stuck .main-header,
.main-header.is-stuck{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Some Hub layouts draw the bar via pseudo-elements or inner sections */
.main-header::before,
.main-header::after{
  background: transparent !important;
  background-color: transparent !important;
}

.main-header .elementor-section,
.main-header .elementor-container,
.main-header .elementor-widget-wrap,
.main-header .elementor-widget-container{
  background: transparent !important;
  background-color: transparent !important;
}

/* Header logo size (keep it small and consistent across pages) */
.main-header .navbar-brand,
.main-header .navbar-brand-inner{
  display: inline-flex !important;
  align-items: center !important;
}

.main-header .navbar-brand img{
  max-height: 22px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  transform: none !important;
}

/* Some theme styles can scale the whole logo container; neutralize that */
.main-header #site-logo,
.main-header #site-logo .module-logo{
  transform: none !important;
}

@media(max-width: 767px){
  .lqd-mobile-sec .navbar-brand img{ max-height: 28px !important; }
}

/* Keep eyebrow (H6) style as in the ORIGINAL theme.
   We only prevent double-paint/overlays; we do NOT recolor or restyle globally. */
.ld-fancy-heading h6.ld-fh-element.elementor-heading-title.h6{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Titles must NEVER render as a giant pill/background.
   Keep original look: allow highlight underline/brush, but force transparent backgrounds. */
.ld-fancy-heading h1.ld-fh-element,
.ld-fancy-heading h2.ld-fh-element,
.ld-fancy-heading h3.ld-fh-element,
.ld-fancy-heading h4.ld-fh-element,
.ld-fancy-heading h5.ld-fh-element{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* If a wrapper is adding a background “pill”, kill it for non-H6 headings */
.ld-fancy-heading :is(h1,h2,h3,h4,h5).ld-fh-element[class*="lqd-highlight"],
.ld-fancy-heading :is(h1,h2,h3,h4,h5).ld-fh-element .lqd-highlight-inner{
  background: transparent !important;
  background-color: transparent !important;
}

/* Disable Hub highlight overlay layers for eyebrow so it doesn't “double paint” */
.ld-fancy-heading h6.ld-fh-element.elementor-heading-title.h6.lqd-highlight-classic,
.ld-fancy-heading h6.ld-fh-element.elementor-heading-title.h6.lqd-highlight-grow-left,
.ld-fancy-heading h6.ld-fh-element.elementor-heading-title.h6[class*="lqd-highlight"]{
  background-image: none !important;
}

/* Match original-style pill for HERO eyebrows (Servicios/Recursos/Blog).
   In this export, the hero eyebrow widget id is 185ec2ca across those pages.
*/
/* HERO eyebrow pill: override both the widget container (theme sets bg via inline CSS)
   and the H6 itself (so we don't get mixed colors).
*/
body.page-id-5294 .elementor-element-12db479 > .elementor-widget-container,
body.page-id-5417 .elementor-element-0ca9bba > .elementor-widget-container,
body.page-id-5445 .elementor-element-a57599c > .elementor-widget-container{
  /* Match Investments container styling exactly (and keep it as a compact badge, not full-width) */
  display: inline-block !important;
  width: auto !important;
  max-width: max-content !important;
  margin: 0px 0px 20px 0px !important;
  padding: 0px 15px 0px 15px !important;
  background-color: #FFFFFF !important;
  border-radius: 4px !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.page-id-5294 .elementor-element-12db479 .ld-fancy-heading h6.ld-fh-element,
body.page-id-5417 .elementor-element-0ca9bba .ld-fancy-heading h6.ld-fh-element,
body.page-id-5445 .elementor-element-a57599c .ld-fancy-heading h6.ld-fh-element{
  display: inline-block;
  padding: 0.5em 1em !important;
  border-radius: 999px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  color: #000000 !important;
  box-shadow: none !important;
  text-transform: none !important; /* Investments is not forced uppercase */
  letter-spacing: 0 !important;
}

/* Kill extra highlight layers for eyebrow (H6) without using :has (mobile support).
   The theme may apply background on the widget container AND paint highlight overlays.
   We force the container to be transparent and remove highlight layers inside H6. */
/* Avoid global container overrides (they change the original look, e.g. “Investments”).
   Only fix overlay/double-paint at the highlight layer level. */

/* If any specific widget-container ends up painting a second pill, we will target it by widget id.
   Example: (disabled by default)
   .elementor-element-XXXXXX > .elementor-widget-container{ background: transparent !important; }
*/

.ld-fancy-heading h6.ld-fh-element.elementor-heading-title.h6 .lqd-highlight-inner,
.ld-fancy-heading h6.ld-fh-element.elementor-heading-title.h6 .lqd-highlight-brush-svg,
.ld-fancy-heading h6.ld-fh-element.elementor-heading-title.h6 .lqd-highlight,
.ld-fancy-heading h6.ld-fh-element.elementor-heading-title.h6 .lqd-highlight *{
  display: none !important;
  background: transparent !important;
}

.ld-fancy-heading h6.ld-fh-element.elementor-heading-title.h6:before,
.ld-fancy-heading h6.ld-fh-element.elementor-heading-title.h6:after,
.ld-fancy-heading h6.ld-fh-element.elementor-heading-title.h6 i,
.ld-fancy-heading h6.ld-fh-element.elementor-heading-title.h6 svg{
  display: none !important;
  content: none !important;
}

/* Failsafe: if theme custom animations fail to initialize (mobile/JS/cache),
   some widgets can stay at opacity:0 from their initValues.
   Force visibility so content never renders “washed out / invisible”. */
.elementor-element[data-custom-animations="true"],
.elementor-widget[data-custom-animations="true"],
[data-custom-animations="true"]{
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

/* Also unhide split-text inner spans if they get stuck at opacity:0 */
.lqd-split-chars .lqd-chars .split-inner,
.lqd-split-words .lqd-words .split-inner{
  opacity: 1 !important;
  transform: none !important;
}

/* Hero backgrounds: make them consistent (same blue as services/solutions hero) */
:root{ --idecaba-hero-blue: #0F144E; }

/* /solutions hero */
body.page-id-5294 .elementor-5294 .elementor-element.elementor-element-f4ed3a4,
body.page-id-5294 .elementor-5294 .elementor-element.elementor-element-f4ed3a4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{
  background-color: var(--idecaba-hero-blue) !important;
}

/* /blog hero (was #9A1F1F) */
body.page-id-5445 .elementor-5445 .elementor-element.elementor-element-30a6756,
body.page-id-5445 .elementor-5445 .elementor-element.elementor-element-30a6756 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
body.page-id-5445 .elementor-5445 .elementor-element.elementor-element-30a6756 > .elementor-background-overlay{
  background-color: var(--idecaba-hero-blue) !important;
}

/* /recursos (page-id 5417) hero (was #9A1F1F) */
body.page-id-5417 .elementor-5417 .elementor-element.elementor-element-e6f358e,
body.page-id-5417 .elementor-5417 .elementor-element.elementor-element-e6f358e > .elementor-motion-effects-container > .elementor-motion-effects-layer,
body.page-id-5417 .elementor-5417 .elementor-element.elementor-element-e6f358e > .elementor-background-overlay{
  background-color: var(--idecaba-hero-blue) !important;
}