/* ==========================================================================
   Nutrex — Inter (variable font), self-hosted from the child theme's
   own fonts/ folder. Registered in the Customizer as family "Inter Local"
   (a distinct name on purpose — it keeps this local, designer-supplied
   file out of YOOtheme's Google Fonts auto-fetch/self-host mechanism,
   which only knows the exact string "Inter" and would otherwise pull its
   own weight-400-only copy from Google's CDN instead of using these files).
   Each file is a single variable font covering the whole 100–900 weight
   axis (Thin through Black) plus the optical-size axis, so two @font-face
   rules are all that's needed for every weight/style combination.
   ========================================================================== */

@font-face {
  font-family: 'Inter Local';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter Local';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2');
}

/* ==========================================================================
   Main menu / header gradient background — Illustrator-exported SVG
   (images/template_images/main_menu_background.svg, viewBox 0 0 1920 139.9,
   radial gradient #2dcbeb -> #06c). Checked first: YOOtheme's native
   Customizer (Layout > Header, and Style > Navbar > Background) has no
   image-upload field — Style > Navbar > Background only offers a solid
   color or a hand-built CSS gradient, not an image file — so this is
   applied here instead, per the established "sitewide rules go in
   custom.css" convention.
   .uk-navbar-container covers both header variants (desktop .tm-header
   and mobile .tm-header-mobile share this class — verified only these
   two elements use it). custom.css loads after theme.<id>.css, but that
   alone was NOT enough: theme.9.css has its own
   .uk-navbar-container:not(.uk-navbar-transparent){background:#fff}
   rule with higher specificity (two class-level selectors vs our one),
   which fully wins the background-image longhand regardless of source
   order. Fixed by matching that same :not(.uk-navbar-transparent)
   compound selector here too (equal specificity, later in source order
   = wins) rather than reaching for !important.
   background-size: cover crops slightly rather than distorting, same
   full-bleed philosophy as the hero video's object-fit: cover.
   ========================================================================== */

.uk-navbar-container:not(.uk-navbar-transparent) {
  background-image: url('../../../images/template_images/main_menu_background.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* ==========================================================================
   Main menu (nav) link text — white, to read against the new gradient
   background above. Matches the exact compiled-theme selectors
   (.uk-navbar-nav > li > a and its hover/active/expanded states) so this
   wins on source order at equal specificity, same approach used for the
   background rule above.
   ========================================================================== */

.uk-navbar-nav > li > a,
.uk-navbar-nav > li:hover > a,
.uk-navbar-nav > li > a[aria-expanded="true"],
.uk-navbar-nav > li > a:active,
.uk-navbar-nav > li.uk-active > a {
  color: #fff;
}

/* ==========================================================================
   Main menu logo — recolor to white, same reason as the nav link text
   above. Not actually a z-index/stacking issue (verified live: the logo
   renders as an inlined <svg>, painted on top of the navbar's background
   as normal — background always paints behind an element's own content;
   nothing was literally covering it). The real cause: low contrast — the
   demo logo's raw path fills (e.g. #108e7e) read as near-invisible against
   the new blue/cyan gradient.
   GOTCHA: don't fight this at the <path> level. YOOtheme/UIkit's
   "Make SVG stylable with CSS" mechanism (uk-svg) already forces every
   hardcoded hex fill in an inlined SVG to fill:currentColor via
   `.uk-svg:not(.uk-preserve) [fill*="#"]:not(.uk-preserve){fill:currentColor}`
   — a 3-class-equivalent selector that beats a plain `.uk-logo svg path`
   rule on specificity regardless of source order (confirmed: a first
   attempt setting fill directly on the paths silently lost to this rule).
   The real Nutrex logo file already in use here
   (images/template_images/nutrex_logo_main_nav_white.svg) is built to take
   advantage of exactly this mechanism, so the correct, non-fighting fix is
   just to set `color` on the logo's link — currentColor inherits down
   through the SVG tree and resolves through the existing uk-svg rule with
   no specificity battle needed at all.
   ========================================================================== */

.uk-logo {
  color: #fff;
}

/* ==========================================================================
   HEADER NAVBAR TIGHTENING (2026-09-25) — fixes the "search bar overlaps
   Contáctenos" crowding reported between ~1200px and ~1340px viewport
   width (the safe zone between YOOtheme's uk-visible@l breakpoint, where
   the mobile hamburger takes over below 1200px, and the point where the
   desktop header's own content naturally needs ~1340px+ to lay out
   without collision). Same root-cause family and remedy as the earlier
   Valante navbar fix (see templates/yootheme_valante_capital/css/custom.css,
   "HEADER NAVBAR TIGHTENING" block) — narrower search box + tighter
   internal gaps + reduced side padding — adapted to Nutrex's own header
   markup, which differs structurally from Valante's:

   ROOT CAUSE (confirmed via live DOM inspection at simulated ~1200-1340px
   container widths): Nutrex's header nav (`.uk-navbar`, YOOtheme's
   "Logo Left / Menu Center / Extras Right" layout) is NOT one single flex
   row like Valante's. `.uk-navbar-center` (the 5 main menu links) is
   POSITION:ABSOLUTE, centered independently via left:50% + a translateX
   transform — it does not participate in flex space distribution with
   `.uk-navbar-left` (logo) or `.uk-navbar-right` (search), which are
   pushed to the two ends of `.uk-navbar` by justify-content:space-between.
   Because the centered menu block is centered on `.uk-navbar`'s own
   width regardless of how much room the logo/search actually need, once
   the viewport narrows enough that the leftover space beside the
   centered block drops below the logo's width (measured ~220px) or the
   search box's width (native 240px), the centered block visually
   overlaps whichever side ran out of room first — in practice the RIGHT
   side (search overlapping "Contáctenos") loses first, matching what
   was reported. Confirmed live that overlap begins almost exactly at the
   reported ~1340px viewport with the native (pre-fix) values below.

   FIX — three levers, same categories as the Valante fix:
   1. Search box narrower: 240px (native) → 150px.
   2. Gap between the 5 menu links tightened: 40px (native UIkit gap) → 16px.
   3. Header's own left/right side padding (this is what insets the logo
      from the left edge and the search box from the right edge) reduced:
      40px (native uk-container-expand) → 20px each side.
   Verified live (container forced to a ~1200px-viewport-equivalent width
   via a DevTools-style override) with zero overlap and comfortable
   spacing at both the 1200px and 1340px ends of the reported range; the
   full-width desktop look is unaffected — extra room just grows the
   natural gaps around the centered menu, same as before this fix.

   TO FULLY REVERT: delete everything between this line and the matching
   "===== END HEADER NAVBAR TIGHTENING =====" line below. Nothing else in
   the file depends on this block; the header falls back to
   YOOtheme/UIkit's native values (search 240px, menu-link gap 40px,
   container side padding 40px).
   ========================================================================== */

.tm-header .uk-container {
    padding-left: 20px;
    padding-right: 20px;
}

.tm-header .uk-navbar-nav {
    gap: 16px; /* native UIkit default is 40px */
}

.tm-header .uk-search-navbar {
    width: 150px; /* native default is 240px */
}

/* ----- ADDENDUM (2026-09-26): menu links weren't spreading apart on wide
   screens the way Valante's do -----
   Root cause: Valante's <nav class="uk-navbar uk-navbar-justify"> carries
   UIkit's uk-navbar-justify utility class, whose compiled rule
   (.uk-navbar-justify .uk-navbar-nav>li{flex-grow:1}, among others) gives
   every menu link flex-grow:1, so as the header widens the links grow
   apart to fill it. Nutrex's <nav class="uk-navbar"> comes from a
   different YOOtheme header layout (Logo Left / Menu Center / Extras
   Right) and never carries that class — and its menu block
   (.uk-navbar-center) is position:absolute, centered via a translateX
   transform on its own shrink-to-fit width, so it can't stretch to fill
   available space at all; only the two blank margins on either side of
   it grew with the viewport, while the links inside stayed clumped at a
   fixed gap.

   FIX: replace the transform-centering with explicit left/right insets
   (matching the logo's ~220px footprint and the 150px search box above,
   each plus a 20px clearance) so .uk-navbar-center now spans exactly the
   gap between the logo and the search box instead of floating at an
   intrinsic width — then reproduce UIkit's own uk-navbar-justify
   mechanism (flex-grow:1 on the nav's UL and on each <li>), scoped to
   this header only, so the 5 links spread out to fill that gap the same
   way Valante's do. The 16px gap set above still acts as a guaranteed
   minimum between links at the narrow end of the crowded range; the
   flex-grow is what makes them keep spreading apart beyond that as the
   screen gets wider.
   ----- */

.tm-header .uk-navbar-center {
    position: absolute;
    top: 0;
    left: 240px;   /* logo footprint (~220px) + 20px clearance */
    right: 170px;  /* search box (150px) + 20px clearance */
    width: auto;
    height: 100%;
    transform: none;
}

.tm-header .uk-navbar-center > .uk-navbar-nav {
    flex-grow: 1;
    width: 100%;
}

.tm-header .uk-navbar-nav > li {
    flex-grow: 1;
}
/* ===== END HEADER NAVBAR TIGHTENING ===== */

/* ==========================================================================
   MOBILE MENU HOVER/TAP COLOR FIX (2026-09-27)

   Problem: the Mobile Menu's Nav element renders with UIkit's built-in
   "uk-nav-primary" style. ALL THREE of UIkit's built-in nav styles
   (Default/Primary/Secondary) hardcode their :hover text color to white
   (#fff) in this theme's compiled CSS -- by design, since almost every
   other Section on this site has a solid blue/dark background where
   white hover text is correct. The one exception is this specific
   mobile dropbar panel (#tm-dialog-mobile), whose own background is
   plain white -- so on hover (and on tap, since touch browsers apply a
   transient :hover state on tap), the link text and its arrow icon
   (which inherits color via currentColor) both turned white-on-white
   and effectively vanished. This is not a Page Builder/Customizer
   toggle anywhere -- it's UIkit's baked-in nav color default, so it's
   overridden here with scoped CSS rather than hunting for a global
   theme-color setting that would also affect every other (correctly
   white-hover) nav on the site.

   Fix: pin hover/focus/active color back to the panel's own resting
   link color (#0066cc) specifically inside #tm-dialog-mobile, leaving
   uk-nav-primary's default white-hover behavior untouched everywhere
   else on the site.
   ----- */

#tm-dialog-mobile .uk-nav-primary > li > a:hover,
#tm-dialog-mobile .uk-nav-primary > li > a:focus,
#tm-dialog-mobile .uk-nav-primary > li > a:active,
#tm-dialog-mobile .uk-nav-primary .uk-nav-sub a:hover,
#tm-dialog-mobile .uk-nav-primary .uk-nav-sub a:focus,
#tm-dialog-mobile .uk-nav-primary .uk-nav-sub a:active {
    color: #0066cc;
}
/* ===== END MOBILE MENU HOVER/TAP COLOR FIX ===== */


/* ==========================================================================
   SEARCH SUGGESTIONS DROPDOWN HOVER FIX (2026-09-27)

   Same white-on-white pattern as the mobile menu fix above, found in the
   header search box's autocomplete dropdown (Joomla Smart Search / Finder,
   rendered via the Awesomplete JS library as `.awesomplete > ul > li`).

   Problem: the theme's compiled CSS gives `.awesomplete > ul` a plain
   white background with resting link text in `#0066cc`, but then hardcodes
   `.awesomplete > ul > li:hover` (and the equivalent keyboard-selected
   state, `li[aria-selected="true"]`) to `color: #fff` with a transparent
   background -- the same "assumes a colored/dark background" baked-in
   UIkit/YOOtheme default seen in the mobile nav. Against this dropdown's
   own white background, hovering (or arrowing down to) a suggestion made
   its text vanish. Not a Page Builder/Customizer setting -- it's compiled
   theme CSS, so it's overridden here with scoped rules instead.

   Fix: pin hover/selected color back to the dropdown's own resting link
   color (#0066cc, matching the mobile menu fix) and add a light background
   tint (reusing the site's existing #f2f8ff hover tint, see
   #nutrex-back-to-top below) so the hovered/selected row still has a
   visible affordance instead of no visual change at all.
   ----- */

.awesomplete > ul > li:hover,
.awesomplete > ul > li[aria-selected="true"] {
    color: #0066cc;
    background-color: #f2f8ff;
}
/* ===== END SEARCH SUGGESTIONS DROPDOWN HOVER FIX ===== */


/* ==========================================================================
   Curved section-divider system ("curve" pattern) — replaces the old
   SVG-image "curve cap" approach above (removed: it couldn't scale
   reliably from mobile widths through 4K without cropping, stretching,
   or overlapping adjacent content — confirmed via live testing across
   Firefox/Chrome/Brave at multiple viewport widths).

   Pure-CSS border-radius technique instead: no image asset, no
   object-fit tradeoffs. The curve is just a rounded corner on the
   Section element itself. --section-curve is the single source of
   truth for the curve's size/radius, shared by every curved section
   sitewide so they all stay visually consistent and resize in sync.

   Two sub-patterns, applied per-section via each Section's own
   Advanced -> CSS field (never reusable across blocks — YOOtheme
   compiles .el-section/.el-element scoped to their own block):

   1. "Curve down" (simpler — corner recedes in place, no overlap
      needed): used when the LOWER section's own top corner rounds
      off, revealing whatever sits directly behind/above it at the
      seam. Single rule on the lower section:
        .el-section{ border-radius: var(--section-curve) 0 0 0; }
      (or the mirrored corner, depending on which side the curve is on)

   2. "Curve up" (the upper section's content need to rise into the
      lower one): the LOWER section must rise up and overlap the
      upper one via negative margin-top equal to the radius, rounding
      its OPPOSITE top corner so the arc returns to the original seam
      exactly at the untouched edge. Requires a matching
      padding-bottom on the section above so its content isn't
      overlapped. Example (curve on the right, as used on
      "Nutrición y Bienestar"):
        Upper (white) section: .el-section{ padding-bottom: calc(var(--section-curve) + 40px); }
        Lower (blue) section:  .el-section{
          position: relative;
          margin-top: calc(-1 * var(--section-curve));
          border-radius: 0 var(--section-curve) 0 0;
          padding-top: var(--section-curve);
        }
   ========================================================================== */

:root {
  --section-curve: clamp(56px, 11vw, 300px);
}

@media (max-width: 820px) {
  :root {
    --section-curve: 60px;
  }
}


/* ===== LOGO GALLERY SCROLL REVEAL (2026-09-11, ported from Valante's
   "Our People" team-gallery pattern) =====
   Fade + scale-up entrance, staggered left-to-right/row-by-row as it
   scrolls into view. Add the class "logo-reveal-grid" to a Gallery/Grid
   element's Advanced -> Classes field in Page Builder to opt it in.
   Trigger is a dedicated IntersectionObserver in custom.js (see "Logo
   gallery scroll-reveal trigger") that adds "uk-scrollspy-inview" to
   each ".el-item" once ~15% visible.
   Stagger steps are keyed to THIS grid's own responsive column count —
   2 col base (mobile), 3 col @s (640px+), 6 col @l (1200px+), matching
   uk-child-width-1-2 / -1-3@s / -1-6@l — different from Valante's
   1/2/4 column grid, so the breakpoints and nth-child divisors below
   are re-derived for this grid, not copied verbatim. Same half-second-
   per-item pacing as Valante's version.
   Given its own class name (not "team-reveal-grid") per the standing
   rule: a copied pattern gets its own scoping class in both CSS and JS
   even when there's only one instance so far, so a future second
   reveal-grid on Nutrex with different timing never collides with
   this one. */
.logo-reveal-grid .uk-grid > div > .el-item {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.logo-reveal-grid .uk-grid > div > .el-item.uk-scrollspy-inview {
    opacity: 1;
    transform: scale(1);
}
/* 2-column stagger (base, mobile, below 640px) */
.logo-reveal-grid .uk-grid > div:nth-child(2n+1) > .el-item { transition-delay: 0s; }
.logo-reveal-grid .uk-grid > div:nth-child(2n)   > .el-item { transition-delay: .5s; }
/* 3-column stagger (@s, 640px+) -- overrides the 2-column rule above */
@media (min-width: 640px) {
    .logo-reveal-grid .uk-grid > div:nth-child(3n+1) > .el-item { transition-delay: 0s; }
    .logo-reveal-grid .uk-grid > div:nth-child(3n+2) > .el-item { transition-delay: .5s; }
    .logo-reveal-grid .uk-grid > div:nth-child(3n)   > .el-item { transition-delay: 1s; }
}
/* 6-column stagger (@l, 1200px+) -- overrides the 3-column rule above */
@media (min-width: 1200px) {
    .logo-reveal-grid .uk-grid > div:nth-child(6n+1) > .el-item { transition-delay: 0s; }
    .logo-reveal-grid .uk-grid > div:nth-child(6n+2) > .el-item { transition-delay: .5s; }
    .logo-reveal-grid .uk-grid > div:nth-child(6n+3) > .el-item { transition-delay: 1s; }
    .logo-reveal-grid .uk-grid > div:nth-child(6n+4) > .el-item { transition-delay: 1.5s; }
    .logo-reveal-grid .uk-grid > div:nth-child(6n+5) > .el-item { transition-delay: 2s; }
    .logo-reveal-grid .uk-grid > div:nth-child(6n)   > .el-item { transition-delay: 2.5s; }
}
@media (prefers-reduced-motion: reduce) {
    .logo-reveal-grid .uk-grid > div > .el-item {
        transition: none;
        opacity: 1;
        transform: none;
    }
}
/* ===== END LOGO GALLERY SCROLL REVEAL ===== */


/* ===== STICKY "ARRIBA" BACK-TO-TOP BUTTON (2026-09-11, ported/adapted
   from Valante's sitewide back-to-top pattern) =====
   Injected sitewide via custom.js (see "Sticky Arriba button") so it's
   fixed over every page regardless of footer content, and only becomes
   visible once the visitor has actually scrolled (JS toggle at 400px).
   Look matches Web Nutrex.ai: a single badge, flat bottom / rounded top
   corners, sitting flush against the bottom-right corner of the
   viewport (no floating gap below or to the right, unlike Valante's
   version) — chevron icon above the word "Arriba", both blue on white
   with a blue border. */
#nutrex-back-to-top {
    position: fixed;
    right: 24px;
    bottom: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 96px;
    padding: 14px 8px 10px;
    background-color: #ffffff;
    border: 2px solid #0066cc;
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    text-decoration: none;
    font-family: 'Inter Local', Inter, sans-serif;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s ease;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12);
}

#nutrex-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

#nutrex-back-to-top .btt-chevron {
    width: 24px;
    height: 24px;
    flex: none;
    color: #0066cc;
}

#nutrex-back-to-top .btt-label {
    color: #0066cc;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

#nutrex-back-to-top:hover {
    background-color: #f2f8ff;
}

@media (max-width: 639px) {
    #nutrex-back-to-top {
        right: 14px;
        width: 80px;
        padding: 10px 6px 8px;
        border-radius: 16px 16px 0 0;
    }

    #nutrex-back-to-top .btt-chevron {
        width: 20px;
        height: 20px;
    }

    #nutrex-back-to-top .btt-label {
        font-size: 12px;
    }
}
/* ===== END STICKY "ARRIBA" BACK-TO-TOP BUTTON ===== */

/* ===== PRODUCT GALLERY SCROLL-REVEAL (duplicated from .logo-reveal-grid,
   own dedicated scoping class per standing rule). Stagger delay is set
   via the --reveal-delay custom property, computed per-row at runtime
   in custom.js (NOT via nth-child math) -- nth-child(6n...) wraps every
   6 items and collided a 7th item with the 1st, and assumed a 6-column
   row that didn't match this grid's actual 4-per-row layout. Computing
   delay from each item's real row keeps this correct for any item
   count / column count. ===== */
.product-reveal-grid .uk-grid > div > .el-item {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.6s, transform 0.6s;
    transition-delay: var(--reveal-delay, 0s);
}
.product-reveal-grid .uk-grid > div > .el-item.uk-scrollspy-inview { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
    .product-reveal-grid .uk-grid > div > .el-item { transition: none; opacity: 1; transform: none; }
}
/* ===== END PRODUCT GALLERY SCROLL-REVEAL ===== */



/* Convert Forms Component - contact general inquiries page - contact form overrides. */
.nutrex-blue-button .convertforms .cf-btn {
    background-color: rgba(0, 102, 204, 1) !important;
	/* color: #001124 !important; */
	border-radius: 8px !important; 
	}
	
	
	
/* rounded photo corners */	
img.rounded-box .uk-panel uk-margin.uk-scrollspy-inview el-img  {
  border-bottom-left-radius: 15px !important;
  border-bottom-right-radius: 15px !important; 
}
	

/* ===== ANIMATED FLUID-BALLS HERO BACKGROUND (test replacement for the
   Mascotas Hero's CSS gradient, added 2026-09-18, refactored to
   randomized/JS-driven 2026-09-18).
   STATUS 2026-09-18: CONFIRMED KEEPER -- marketing team saw it at
   FLUID_BALLS_COUNT = 50 (bumped up from 30 by Chata) and liked it.
   Commented OUT below for now (both the rules here and the script in
   custom.js) while several more effects get tried on this same page --
   not deleted, just paused. Uncomment both blocks, keep the class
   "hero-fluid-balls" on the target Section, to bring it back. No manual HTML needed in the Page
   Builder -- just add the class "hero-fluid-balls" to the target
   Section's own Advanced -> Classes field. custom.js builds the blob
   <span>s at runtime and sets each one's position/color/timing via
   inline style, randomized within ranges taken from the original
   fluid_balls.css demo -- ball COUNT and SPEED are config variables at
   the top of that script's fluid-balls block (FLUID_BALLS_COUNT,
   FLUID_BALLS_SPEED), no CSS edits needed to change either. Uses the
   SAME 4 brand colors as the Mascotas gradient mesh (#0066cc base +
   #038cea / #12c9bc / #0f79bc for the balls), so it's a like-for-like
   color swap -- also a config array in custom.js if that needs to
   change. Scoped to the Section's own .uk-container (not full-bleed),
   matching the site-wide rule that contained backgrounds target the
   container, never the bare .uk-section. Real hero content is
   explicitly layered above the blobs via z-index.
   REVERT NOTE: the gradient CSS this replaces lived on the Hero
   Section's own Advanced -> CSS field (not in this file) --
   background: radial-gradient(circle at 0% 100%, #12c9bc 0%, rgba(18, 201, 188, 0) 48%), linear-gradient(135deg, #0f79bc 0%, #0454c9 55%, #038cea 100%);
   applied to `.el-section > .uk-container`. To revert: remove the
   "hero-fluid-balls" class from the Section and paste that CSS back
   into its Advanced -> CSS field (this whole block here can stay in the
   file unused, or be deleted). ===== */
.hero-fluid-balls > .uk-container {
    position: relative;
    overflow: hidden;
}

.hero-fluid-balls > .uk-container > .uk-grid {
    position: relative;
    z-index: 1;
}

.fluid-balls-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

@keyframes fluid-balls-move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.fluid-balls-bg span {
    width: 16vmin;
    height: 16vmin;
    border-radius: 16vmin;
    backface-visibility: hidden;
    position: absolute;
    animation-name: fluid-balls-move;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* ===== END ANIMATED FLUID-BALLS HERO BACKGROUND ===== */


/* ===== ANIMATED WAVES HERO BACKGROUND (GSAP-powered, candidate #2 in
   the same background-effect trial as the fluid-balls block above).
   No manual HTML needed: custom.js builds the SVG/paths at runtime and
   injects them, and loads GSAP from a CDN on demand (only on pages
   that actually use this class, not site-wide, and only once even if
   used on more than one Section). Apply by adding the class
   "hero-waves" to a Section's own Advanced -> Classes field. Config
   (wave count, speed range, gradient colors) lives in custom.js as
   named constants, same pattern as the fluid-balls block. Source:
   downloaded waves.css/.html/.js demo (a GSAP timeline animating
   randomized transforms on repeated path pairs) -- adapted from
   full-viewport/body positioning to absolute/contained within the
   Section's .uk-container, and scoped so its GSAP calls and its
   groups/paths only ever touch this instance's own SVG, never
   anything else on the page. ===== */
.hero-waves > .uk-container {
    position: relative;
    overflow: hidden;
}

.hero-waves > .uk-container > .uk-grid {
    position: relative;
    z-index: 1;
}

.waves-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.waves-bg svg {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}
/* ===== END ANIMATED WAVES HERO BACKGROUND ===== */


/* ===== ANIMATED GRADIENT HERO BACKGROUND (candidate #5 in the same
   background-effect trial as fluid-balls/waves above; crystal-parallax
   and metaballs were tried and rejected, both removed). No JS at all --
   pure CSS, a shifting linear-gradient background-position animation,
   sourced from a web configurator (Chata already set the 3 colors to
   the Mascotas brand palette before pulling the CSS). Apply by adding
   the class "hero-anigrad" to a Section's own Advanced -> Classes
   field -- no separate overlay/wrapper element needed like the JS-built
   candidates: this paints straight onto the Section's own .uk-container
   background, the exact same technique the ORIGINAL static Mascotas
   gradient used, so it's naturally already behind the Row's real
   content with no z-index handling required. To adjust: edit the
   gradient's colors/angle or the keyframe's background-position values
   directly here, and the animation-duration for speed (started at
   12s, the configurator default; shortened to 8s since marketing
   felt the teal/#12c9bc mid-stop lingered on screen too long). Vendor prefixes from the original downloaded CSS
   (-webkit-/-moz-) were dropped as unnecessary on current browsers. ===== */
.hero-anigrad > .uk-container {
    --anigrad-c1: #0f79bc;
    --anigrad-c2: #12c9bc;
    --anigrad-c3: #038cea;
    background: linear-gradient(131deg, var(--anigrad-c1), var(--anigrad-c2), var(--anigrad-c3));
    background-size: 600% 600%;
    animation: nutrex-animated-gradient-1 8s ease infinite;
}

@keyframes nutrex-animated-gradient-1 {
    0% { background-position: 0% 56%; }
    50% { background-position: 100% 45%; }
    100% { background-position: 0% 56%; }
}

/* ----- Color variants (2026-09-18) -----
   Add one of these as a SECOND class alongside "hero-anigrad" on the
   Section, e.g. class="hero-anigrad hero-anigrad--sky", to swap the
   palette without touching any other rule. All computed at the same
   saturation/lightness as the base brand blue #0066cc (HSL 210,100%,
   40%) so every variant reads as "the same brand system, different
   accent" rather than an unrelated color. For 10 subcategories, mix
   and match rather than inventing a unique palette per page. */

/* Lighter/brighter blue family -- cheerful, higher-key */
.hero-anigrad.hero-anigrad--sky > .uk-container {
    --anigrad-c1: #3399ff;
    --anigrad-c2: #0066cc;
    --anigrad-c3: #0f79bc;
}

/* Deeper blue family -- moodier, more premium/serious */
.hero-anigrad.hero-anigrad--navy > .uk-container {
    --anigrad-c1: #004080;
    --anigrad-c2: #0066cc;
    --anigrad-c3: #0000cc;
}

/* Analogous (adjacent hues, safe/harmonious): cyan-leaning */
.hero-anigrad.hero-anigrad--cyan > .uk-container {
    --anigrad-c1: #0066cc;
    --anigrad-c2: #00cccc;
    --anigrad-c3: #0f79bc;
}

/* Analogous, other direction: blue-violet/indigo-leaning */
.hero-anigrad.hero-anigrad--indigo > .uk-container {
    --anigrad-c1: #0066cc;
    --anigrad-c2: #0000cc;
    --anigrad-c3: #12c9bc;
}

/* Triadic (120deg from base, hue 90): the #66CC00 Chata asked for --
   bold, high-contrast blue + chartreuse-green */
.hero-anigrad.hero-anigrad--triadic-green > .uk-container {
    --anigrad-c1: #0066cc;
    --anigrad-c2: #66cc00;
    --anigrad-c3: #0f79bc;
}

/* Triadic, other direction (120deg the other way, hue 330):
   blue + magenta-pink, punchier/more playful */
.hero-anigrad.hero-anigrad--triadic-magenta > .uk-container {
    --anigrad-c1: #0066cc;
    --anigrad-c2: #cc0066;
    --anigrad-c3: #12c9bc;
}

/* True complementary (180deg, hue 30): single warm orange accent
   against the blue -- highest-contrast single-accent option */
.hero-anigrad.hero-anigrad--complement > .uk-container {
    --anigrad-c1: #0066cc;
    --anigrad-c2: #cc6600;
    --anigrad-c3: #0f79bc;
}


/* True complementary (180deg, hue 30): single warm orange accent
   against the blue -- highest-contrast single-accent option */
.hero-anigrad.hero-anigrad--complement-2 > .uk-container {
    --anigrad-c1: #001122;
    --anigrad-c2: #003C7E;
    --anigrad-c3: #003b77;
}


/* Split-complementary (flanking the complement, hues 0 and 60):
   blue + red + yellow -- loudest option, use sparingly */
.hero-anigrad.hero-anigrad--split > .uk-container {
    --anigrad-c1: #0066cc;
    --anigrad-c2: #cc0000;
    --anigrad-c3: #cccc00;
}
/* ===== END ANIMATED GRADIENT HERO BACKGROUND ===== */


/* ===== HERO BACKGROUND: SHIFT (Ambient Canvas series) =====
   STATUS: CANDIDATE - awaiting marketing approval
   Usage: add class "hero-shift" to the Section (Advanced > Classes)
   Colors intentionally left EXACTLY as the original Codrops demo
   (near-black backdrop, noise-driven hue drift starting at 220deg)
   -- NOT retinted to the Nutrex brand palette, per instruction. */
.hero-shift > .uk-container {
    position: relative;
    overflow: hidden;
}
.hero-shift > .uk-container > .uk-grid {
    position: relative;
    z-index: 1;
}
.shift-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.shift-bg canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* ===== END SHIFT HERO BACKGROUND ===== */

/* ===== HERO BACKGROUND: SHIFT 2 (variant of SHIFT -- brown/chocolate
   + blue palette, no greens, built for the chocolate-en-polvo Alimentos
   subcategory page per marketing's request) =====
   STATUS: CONFIRMED KEEPER -- approved by marketing
   Usage: add class "hero-shift-2" to the Section (Advanced > Classes)
   Same wrapper/scoping pattern as hero-shift, own .shift2-bg wrapper
   so both effects can coexist on the site without colliding. */
.hero-shift-2 > .uk-container {
    position: relative;
    overflow: hidden;
}
.hero-shift-2 > .uk-container > .uk-grid {
    position: relative;
    z-index: 1;
}
.shift2-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.shift2-bg canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* ===== END SHIFT 2 HERO BACKGROUND ===== */

/* ===== HERO BACKGROUND: SHIFT 3 (variant of SHIFT -- brand blues +
   the teal/green from the original hero gradient mesh, #12c9bc) =====
   STATUS: CANDIDATE - awaiting marketing approval
   Usage: add class "hero-shift-3" to the Section (Advanced > Classes)
   Same wrapper/scoping pattern as hero-shift, own .shift3-bg wrapper
   so all three shift variants can coexist on the site without
   colliding. */
.hero-shift-3 > .uk-container {
    position: relative;
    overflow: hidden;
}
.hero-shift-3 > .uk-container > .uk-grid {
    position: relative;
    z-index: 1;
}
.shift3-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.shift3-bg canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* ===== END SHIFT 3 HERO BACKGROUND ===== */




/* ===== HERO BACKGROUND: MESH GRADIENT (animated flowing WebGL mesh
   gradient, generator export) =====
   STATUS: CANDIDATE - awaiting marketing approval
   Usage: add class "hero-meshgrad" to the Section (Advanced > Classes)
   The canvas is deliberately oversized + rotated via this transform
   (matches the generator's own export CSS) so the mesh reads as a
   flowing diagonal gradient rather than a flat rectangle; the wrapper
   below clips it back to the Section's own container. */
.hero-meshgrad > .uk-container {
    position: relative;
    overflow: hidden;
}
.hero-meshgrad > .uk-container > .uk-grid {
    position: relative;
    z-index: 1;
}
.meshgrad-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* fallback fill behind the rotated/scaled canvas -- at some
       container aspect ratios the canvas doesn't fully reach every
       edge, leaving a diagonal sliver; this fill matches the
       gradient's base color so no seam is visible when that happens */
    background-color: #0F79BC;
}
.meshgrad-bg canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 90%;
    transform: translate(-50%, -50%) rotate(-4deg) scale(2.3);
}
/* ===== END MESH GRADIENT HERO BACKGROUND ===== */


/* ===== HERO BACKGROUND: FLOW (same generator as the mesh gradient
   candidate, but this export is pure CSS -- a single-axis shifting
   linear-gradient, no JS needed; "Flow" is the generator's own name
   for this export) =====
   STATUS: CONFIRMED KEEPER -- marketing team approved it.
   Usage: add class "hero-flow" to the Section (Advanced > Classes)
   Colors: Chata edited these herself away from the original green
   accent -- blues flanking left/right, with the footer's purple
   (#2D356F) in the center stop instead of green.
   Same "shifting background-position" trick as hero-anigrad (candidate
   #5) but a different motion: single 90deg axis, 300% background-size,
   bounces back and forth (animation-direction: alternate) instead of
   anigrad's diagonal 3-stop loop -- distinct enough visually to be
   worth trying as its own candidate. Applies straight to the Section's
   own .uk-container, same as anigrad -- no wrapper element or z-index
   handling needed since it's naturally behind the Row's real content. */
.hero-flow > .uk-container {
    background: linear-gradient(90deg, #0454c9, #2D356F, #0f79bc);
    background-size: 300% 300%;
    animation: nutrex-flow-gradient-1 3s alternate infinite;
}
@keyframes nutrex-flow-gradient-1 {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 100%;
    }
}
/* ===== END FLOW HERO BACKGROUND ===== */

/* ===== HERO BACKGROUND: FLOW 2 (variant of FLOW, same shifting-gradient
   technique, different color sequence/timing) =====
   STATUS: CANDIDATE - awaiting marketing approval
   Usage: add class "hero-flow-2" to the Section (Advanced > Classes)
   Colors: 7-stop symmetric/palindromic sequence Chata specified --
   dark navy (#061e7a) at both ends, mirrored inward through mid-blue
   (#0F79BC) and brand blue (#0066cc), to a lighter sky blue (#298fd0)
   at the center: #061e7a, #0F79BC, #0066cc, #298fd0, #0066cc, #0F79BC,
   #061e7a.
   Axis changed to 120deg (was 90deg on hero-flow) and cycle slowed to
   5s (was 3s) per Chata's request, since a longer 7-color sequence
   reads better with more time to traverse it. Same background-size
   300% + alternate-bounce animation-direction as hero-flow. Applies
   straight to the Section's own .uk-container -- no wrapper element
   or z-index handling needed, same as hero-flow. */
.hero-flow-2 > .uk-container {
    background: linear-gradient(135deg, #001a33, #02305c, #0fa1c1, #04abcf, #0fa1c1, #02305c, #001a33);
    background-size: 400% 400%;
    animation: nutrex-flow-gradient-2 5s alternate infinite;
}
@keyframes nutrex-flow-gradient-2 {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 100%;
    }
}
/* ===== END FLOW 2 HERO BACKGROUND ===== */



/* ===== HERO BACKGROUND: FOG (Vanta.js) =====
   STATUS: CANDIDATE - awaiting marketing approval
   Usage: add class "hero-fog" to the Section (Advanced > Classes)
   Vanta creates and sizes its own canvas inside .fog-bg automatically
   -- no extra child styling needed here, same wrapper pattern as
   every other candidate. */
.hero-fog > .uk-container {
    position: relative;
    overflow: hidden;
}
.hero-fog > .uk-container > .uk-grid {
    position: relative;
    z-index: 1;
}
.fog-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
/* ===== END FOG HERO BACKGROUND ===== */


/* ==========================================================
   GRADIENT-TIE — reusable, effect-agnostic gradient wash that
   fades to alpha 0 by the horizontal center of the section.
   Class goes on the Section (same as hero-XXX classes); selectors
   reach into > .uk-container to match that pattern and stay
   contained to the x-large max-width, not full-bleed.

   HERO variant (.gradient-tie): uses ::after, not ::before.
   ::after always renders as the LAST child of .uk-container in
   paint order, no matter when the effect's JS injects its own
   .XXX-bg div -- so at a tied z-index:0 it reliably paints ON TOP
   of the effect layer (fixing opaque effects like meshgrad fully
   hiding it), while still losing to real content's z-index:1
   (an explicit higher value always wins regardless of DOM order,
   so it can never cover text). This replaces two earlier broken
   attempts: z-index:-1 (hid it behind opaque effects entirely)
   and z-index:0.5 (invalid CSS -- z-index must be an integer --
   silently dropped to auto, tying it with the effect layer and
   losing that tie since the effect's div gets injected after),
   and a follow-up z-index:999 (fixed the hero but then sat above
   real content on OTHER sections using this class, washing out
   text -- z-index:999 has no way to know it should stay below
   content once the numbers are absolute rather than relative).

   MIRROR variant (.gradient-tie--mirror): no animated effect
   competes with this one (used on the plain section after a hero,
   e.g. Block 1's white sheet), so the original simple placement --
   behind content via negative z-index -- works correctly as-is
   and is left untouched.
   Fixed 2026-09-23.
   ========================================================== */
.gradient-tie > .uk-container,
.gradient-tie--mirror > .uk-container {
    position: relative;
    z-index: 0; /* no-op if the effect class already sets this */
}
/* Not every effect bumps its own .uk-grid to z-index:1 -- some
   (flow, anigrad) just paint a plain `background` on .uk-container
   itself, which never needed to compete with content before. Our
   ::after/::before layers ARE absolutely positioned though, so
   without this they'd jump above plain in-flow content (photo,
   text) regardless of the effect. Elevating .uk-grid here makes
   gradient-tie self-sufficient no matter which effect is present --
   harmless no-op on effects (meshgrad, fog) that already set this
   themselves. Fixed 2026-09-23 (photo was getting tinted). */
.gradient-tie > .uk-container .uk-grid,
.gradient-tie--mirror > .uk-container .uk-grid {
    position: relative;
    z-index: 1;
}

/* HERO: above the effect layer, below content -- see note above */
.gradient-tie > .uk-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 0% 100%, #12c9bc 0%, rgba(18, 201, 188, 0) 48%),
        linear-gradient(135deg, #0f79bc 0%, #0454c9 55%, #038cea 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 25%, transparent 50%);
            mask-image: linear-gradient(to right, #000 0%, #000 25%, transparent 50%);
}

/* MIRROR: behind content, hotspot top-left -- unchanged, this is
   the version that already worked on Block 1 */
.gradient-tie--mirror > .uk-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 0% 0%, #12c9bc 0%, rgba(18, 201, 188, 0) 48%),
        linear-gradient(135deg, #0f79bc 0%, #0454c9 55%, #038cea 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 25%, transparent 50%);
            mask-image: linear-gradient(to right, #000 0%, #000 25%, transparent 50%);
}
/* ===== END GRADIENT-TIE ===== */