/* === assets/css/global-cta.css === */
a.cta_button {
  box-sizing: content-box !important;
  vertical-align: middle;
}

.hs-breadcrumb-menu {
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.hs-breadcrumb-menu-item {
  float: left;
  padding: 10px 0 10px 10px;
}

.hs-breadcrumb-menu-divider:before {
  content: "›";
  padding-left: 10px;
}

.hs-featured-image-link {
  border: 0;
}

.hs-featured-image {
  float: right;
  margin: 0 0 20px 20px;
  max-width: 50%;
}

.hs-screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
}

@media (max-width: 568px) {
  .hs-featured-image {
    float: none;
    margin: 0;
    width: 100%;
    max-width: 100%;
  }
}
/* === assets/template_main.min.css === */
/* Theme base styles */

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* ************************************************************************* */
/* ****************************   Accent Colors   **************************** */
/* ************************************************************************* */





/* ************************************************************************* */
/* ****************************   Dark Colors   **************************** */
/* ************************************************************************* */






/* ************************************************************************* */
/* ****************************   Light Colors   **************************** */
/* ************************************************************************* */





/* ************************************************************************* */
/* ****************************   Status Colors   **************************** */
/* ************************************************************************* */





/* ************************************************************************* */
/* ****************************  Typography   **************************** */
/* ************************************************************************* */
































/* ************************************************************************* */
/* ****************************  Layout   **************************** */
/* ************************************************************************* */














/* ************************************************************************* */
/* ****************************  Buttons   **************************** */
/* ************************************************************************* */
















































































/* ************************************************************************* */
/* ****************************  Forms   **************************** */
/* ************************************************************************* */









































  







  







  







  





























































/* ************************************************************************* */
/* ****************************  Table   **************************** */
/* ************************************************************************* */









  



  



  



  



  



  



  



  


/* ************************************************************************* */
/* ****************************  Header   **************************** */
/* ************************************************************************* */



















/* ************************************************************************* */
/* ****************************  Footer   **************************** */
/* ************************************************************************* */









/* ************************************************************************* */
/* ****************************  CSS Variables   **************************** */
/* ************************************************************************* */

:root {

  /* Global Colors */
  --accent-primary: #00BFA6;
  --accent-secondary: #477ECF;
  --accent-tertiary: #CFE2F3;
  --dark-primary: #1a1a1a;
  --dark-secondary: rgba(26, 26, 26, 80%);
  --dark-tertiary: rgba(26, 26, 26, 60%);
  --dark-quaternary: rgba(26, 26, 26, 40%);
  --light-primary: #F9FBF7;
  --light-secondary: #F2F5EE;
  --light-tertiary: #E8ECE4;
  --status-success: #6CB46B;
  --status-error: #DB4065;

  /* Animation */
  --transition: all 0.3s ease-in-out;

  /* Shadow */
  --shadow: 0 0 12px rgb(24 28 32 / 6%), 0 4px 48px rgb(24 28 32 / 3%);

  /* Typography */
  --primary-font-family: Montserrat, sans-serif;
  --secondary-font-family: Montserrat Alternates, sans-serif;

  --base-font-size: 18px;
  --letter-spacing: -0.03em;

  --body-text-family: Montserrat, sans-serif;
  --body-text-color: #1a1a1a;
  --body-text-weight: ;
  --body-text-size: px;
  --body-text-style: normal;

  --heading-weight: 700;
  --heading-color: #1a1a1a;
  --heading-family: Montserrat,, sans-serif;

  /* Heading 1 */--h1-family: Montserrat, sans-serif;--h1-color: #1a1a1a;--h1-weight: var(--heading-weight);--h1-size: 4rem;--h1-transform: none;

  /* Heading 2 */--h2-family: Montserrat, sans-serif;--h2-color: #1a1a1a;--h2-weight: var(--heading-weight);--h2-size: 3rem;--h2-transform: none;

  /* Heading 3 */--h3-family: Montserrat, sans-serif;--h3-color: #1a1a1a;--h3-weight: var(--heading-weight);--h3-size: 2.33rem;--h3-transform: none;

  /* Heading 4 */--h4-family: Montserrat, sans-serif;--h4-color: #1a1a1a;--h4-weight: var(--heading-weight);--h4-size: 1.67rem;--h4-transform: none;

  /* Heading 5 */--h5-family: Montserrat, sans-serif;--h5-color: #1a1a1a;--h5-weight: var(--heading-weight);--h5-size: 1.34rem;--h5-transform: none;

  /* Heading 6 */--h6-family: Montserrat, sans-serif;--h6-color: #1a1a1a;--h6-weight: var(--heading-weight);--h6-size: 1.11rem;--h6-transform: none;

  --link-style: italic;--link-underline: underline;--link-color: #1a1a1a;
  --link-style-hover: italic;--link-underline-hover: underline;--link-color-hover: #1a1a1a;

  /* Layout */
  --small-container: 600px;
  --default-container: 1356px;
  --blogpost-container: 600px;

  /* --vertical-spacing: rem;
  --vertical-spacing-1-3: calc( * 0.3)rem;
  --vertical-spacing-1-2: calc( * 0.5)rem;
  --vertical-spacing-3-4: calc( * 0.75)rem; */

  /* Corners */
  --radius: 0px;
  --half-radius: calc(0 / 2)px;

  /* Buttons */
  --btn-radius: 5px;
  
  --primary-btn-label: #1a1a1a;
  --primary-btn-fill: #00BFA6;
  --primary-btn-label-hover: #00BFA6;
  --primary-btn-fill-hover: #1a1a1a;
  --primary-btn-label-active: #00BFA6;
  --primary-btn-fill-active: #1a1a1a;
  
  --secondary-btn-label: #1a1a1a;
  --secondary-btn-fill: #477ECF;
  --secondary-btn-label-hover: #477ECF;
  --secondary-btn-fill-hover: #1a1a1a;
  --secondary-btn-label-active: #477ECF;
  --secondary-btn-fill-active: #1a1a1a;
  
  --tertiary-btn-label: #1a1a1a;
  --tertiary-btn-border-bottom: 1px solid rgba(26, 26, 26, calc(100 / 100));
  --tertiary-btn-border-left: 1px solid rgba(26, 26, 26, calc(100 / 100));
  --tertiary-btn-border-right: 1px solid rgba(26, 26, 26, calc(100 / 100));
  --tertiary-btn-border-top: 1px solid rgba(26, 26, 26, calc(100 / 100));

  --tertiary-btn-label-hover: rgba(26, 26, 26, 60%);
  --tertiary-btn-border-bottom-hover: 1px solid rgba(26, 26, 26, calc(60 / 100));
  --tertiary-btn-border-left-hover: 1px solid rgba(26, 26, 26, calc(60 / 100));
  --tertiary-btn-border-right-hover: 1px solid rgba(26, 26, 26, calc(60 / 100));
  --tertiary-btn-border-top-hover: 1px solid rgba(26, 26, 26, calc(60 / 100));
  
  --tertiary-btn-label-active: rgba(26, 26, 26, 60%);

  --inverted-btn-label: #1a1a1a;
  --inverted-btn-fill: #F9FBF7;
  --inverted-btn-label-hover: #1a1a1a;
  --inverted-btn-fill-hover: #F2F5EE;
  --inverted-btn-label-active: #1a1a1a;
  --inverted-btn-fill-active: #F2F5EE;

  --ink-btn-style: italic;
  --ink-btn-label: #1a1a1a;
  --ink-btn-fill: #477ECF;--ink-btn-width: 6px;--ink-btn-style-hover: italic;
  --ink-btn-label-hover: #1a1a1a;
  --ink-btn-fill-hover: #477ECF;--ink-btn-width-hover: 15px;--ink-btn-label-active: #1a1a1a;
  --ink-btn-fill-active: #477ECF;

  --featured-btn-style: italic;
  --featured-btn-label: #00BFA6;
  --featured-btn-underline-color: #00BFA6;
  --featured-btn-underline-width: 0.2em;
  --featured-btn-underline: 0 var(--featured-btn-underline-width) var(--featured-btn-underline-color);
  --featured-btn-style-hover: italic;
  --featured-btn-label-hover: #1a1a1a;
  --featured-btn-label-active: #1a1a1a;
  --featured-btn-underline-active: 0  #1a1a1a;

  /* Forms */--form-bg: none;--form-border-bottom: none;
  --form-border-left: none;
  --form-border-right: none;
  --form-border-top: none;--title-color: var(--h3-color);--title-bg: none;--label: var(--dark-primary);--help-text: var(--dark-tertiary);--placeholder: rgba(26, 26, 26, 60%);--field-text: #1a1a1a;--field-bg: #F9FBF7;--field-border-bottom: 1px solid rgba(232, 236, 228, calc(100 / 100));
  --field-border-left: 1px solid rgba(232, 236, 228, calc(100 / 100));
  --field-border-right: 1px solid rgba(232, 236, 228, calc(100 / 100));
  --field-border-top: 1px solid rgba(232, 236, 228, calc(100 / 100));--field-corner: 0;--field-outline-color: var(--dark-primary);--field-btn-label: #1a1a1a;--field-btn-label-hover: #00BFA6;--field-btn-fill: #00BFA6;--field-btn-fill-hover: #1a1a1a;--field-btn-border-bottom: none;
  --field-btn-border-left: none;
  --field-btn-border-right: none;
  --field-btn-border-top: none;

  --field-btn-border-bottom-hover: none;
  --field-btn-border-left-hover: none;
  --field-btn-border-right-hover: none;
  --field-btn-border-top-hover: none;--field-btn-corner: var(--btn-radius);--field-btn-corner-hover: var(--btn-radius);/* Tables */--table-header-text: #1a1a1a;--table-header-bg: #F2F5EE;--table-body-text: rgba(26, 26, 26, 80%);--table-body-bg: #F9FBF7;--table-footer-text: rgba(26, 26, 26, 80%);--table-footer-bg: #F9FBF7;--table-cell-spacing: 0.5em 1em 0.5em 1em;

  --table-cell-border-bottom: none;
  --table-cell-border-left: none;
  --table-cell-border-right: none;
  --table-cell-border-top: none;

  /* Header */
  --header-nav-color: #F9FBF7;
  --header-nav-color-hover: #00BFA6;
  --mega-menu-title-color: #1a1a1a;
  --mega-menu-text-color: rgba(26, 26, 26, 60%);
  --mega-menu-bg: #F9FBF7;
  --mega-menu-item-hover: #F2F5EE;
  --mega-menu-border: ;
  --header-bg: #1a1a1a;
  --header-bg-landing: #F9FBF7;--header-bottom-border: none;--header-logo-effect: none;--content-offset-desktop: 90px;
  --content-offset-mobile: 80px;

  /* Footer */
  --footer-text: ;
  --footer-bg: #00BFA6;
  --footer-nav-cols: 3;
  --footer-nav-width: 660px;--footer-border: none;}

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
::selection {
  background-color: var(--accent-secondary);
  color: var(--dark-primary);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  min-height: 100%;
  line-height: 1.2;
}

body {
  background-color: var(--light-primary);
  display: flex; /* Needed for footer to be stick to bottom when there is few content */
  flex-direction: column;
  min-height: 100vh;
  margin:  0;
  overflow-x: hidden; /* Prevents horizontal scrolling */
  -webkit-overflow-scrolling: touch;
  padding: 0;
  word-break: break-word;
}

figure {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

.img img {
  border-radius: var(--radius);
  width: 100%;
}

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/

.main-page-container {
  flex: 1 0 auto; /* Expands the container to move footer to the bottom of the page */
}

.container {
  max-width: var(--default-container);
  margin: 0 auto;
  padding: 0 2rem;
}

@media (max-width: 767px) {
  .container {
    padding: 0 1rem;
  }
}

.container--blogpost {
  max-width: var(--blogpost-container);
}

.container--small {
  max-width: var(--small-container);
}

.main-content-offset {
  margin-top: var(--content-offset-mobile);
}

@media only screen and (min-width: 768px) {
  .main-content-offset {
    margin-top: var(--content-offset-desktop);
  }
}



  /* CSS variables */
  
  :root {
    --column-gap: 2.13%;
    --column-width-multiplier: 8.333;
  }
  
  /* Mobile layout */
  
  .row-fluid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  
  
    .row-fluid .span1,
    .row-fluid .span2,
    .row-fluid .span3,
    .row-fluid .span4,
    .row-fluid .span5,
    .row-fluid .span6,
    .row-fluid .span7,
    .row-fluid .span8,
    .row-fluid .span9,
    .row-fluid .span10,
    .row-fluid .span11,
    .row-fluid .span12{
    min-height: 1px;
    width: 100%;
  }
  
  /* Desktop layout */
  
  @media (min-width: 768px) {
    .row-fluid {
      flex-wrap: nowrap;
      justify-content: space-between;
    }
  
    
      .row-fluid .span1 {
        width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span2 {
        width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span3 {
        width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span4 {
        width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span5 {
        width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span6 {
        width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span7 {
        width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span8 {
        width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span9 {
        width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span10 {
        width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span11 {
        width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
      }
    
  }
.dnd-section > .row-fluid {
  margin: 0 auto;
  max-width: var(--default-container);
}

.dnd-section .dnd-column {
  padding: 0 2rem;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0 1rem;
  }
}

/* Elements
Base HMTL elements are styled in this section (<body<, <h1>, <a>, <p>, <button> etc.)
*/

/* General typography styles */

@media only screen and (max-width: 768px) {
  html {
    font-size: calc(0.889 * var(--base-font-size));
  }
}

@media only screen and (min-width: 768px) {
  html {
    font-size: var(--base-font-size);
  }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
  font-smoothing: antialiased;
  color: var(--body-text-color);
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  font-weight: var(--body-text-weight);
  letter-spacing: var(--letter-spacing);
  line-height: 1.4;
  overflow-wrap: break-word;
}

html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
  line-break: strict;
  overflow-wrap: normal;
  word-break: break-all;
}

/* Paragraphs */

p {
  font-size: 1rem;
  letter-spacing: var(--letter-spacing);
  line-height: 1.4;
  margin: 0 0 1em;
}

.paragraph--xs,
.paragraph--xs p {
  font-size: 0.78rem;
  line-height: 1.4;
}

.paragraph--sm,
.paragraph--sm p {
  font-size: 0.89rem;
  line-height: 1.4;
}

.paragraph--md,
.paragraph--md p {
  font-size: 1rem;
  line-height: 1.4;
}

.paragraph--lg,
.paragraph--lg p {
  font-size: 1.167rem;
  line-height: 1.4;
}

.paragraph--xl,
.paragraph--xl p {
  font-size: 1.34rem;
  line-height: 1.4;
}

.paragraph--xxl,
.paragraph--xxl p {
  font-size: 1.56rem;
  line-height: 1.4;
}

.paragraph--xxxl,
.paragraph--xxxl p {
  font-size: 2rem;
  line-height: 1.2;
}

@media only screen and (max-width: 767px) {
  .paragraph--xxxl,
  .paragraph--xxxl p {
    font-size: 1.56rem;
  }
}

.text-centered {
  text-align: center;
}

.metadata {
  font-size: 0.667rem;
  line-height: 1;
}

.label {
  display: inline-block;
  font-size: 0.89rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  margin-bottom: 1em;
  text-decoration: none;
  text-transform: uppercase;
}

.label--lg {
  font-size: 1rem;
  margin-bottom: 1.875em;
}

b,
strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

.inverted,
p.inverted,
.inverted p,
.inverted.metadata,
.inverted.label {
  color: var(--light-primary);
}

/* Anchors */

a {
  color: var(--link-color);
  cursor: pointer;
  font-style: var(--link-style);
  letter-spacing: var(--letter-spacing);
  position: relative;
  text-decoration: var(--link-underline);
  transition: var(--transition);
}

a:hover,
a:focus {
  color: var(--link-color-hover);
  text-decoration: var(--link-underline-hover);
}

a:active {
  color: var(--link-color-active);
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6,
.heading {
  color: var(--heading-color);
  font-family: var(--heading-family);
  font-weight: var(--heading-weight);
  letter-spacing: var(--letter-spacing);
  line-height: 1.1;
  margin: 0 0 0.5em 0;
}

h1,
.heading--primary,
.heading--primary * {
  color: var(--h1-color);
  font-family: var(--h1-family);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  text-transform: var(--h1-transform);
}

h2,
.heading--secondary,
.heading--secondary * {
  color: var(--h2-color);
  font-family: var(--h2-family);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  text-transform: var(--h2-transform);
}

h3,
.heading--tertiary,
.heading--tertiary * {
  color: var(--h3-color);
  font-family: var(--h3-family);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  text-transform: var(--h3-transform);
}

h4,
.heading--quaternary,
.heading--quaternary * {
  color: var(--h4-color);
  font-family: var(--h4-family);
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  text-transform: var(--h4-transform);
}

h5,
.heading--quinary,
.heading--quinary * {
  color: var(--h5-color);
  font-family: var(--h5-family);
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  text-transform: var(--h5-transform);
}

h6,
.heading--senary,
.heading--senary * {
  color: var(--h6-color);
  font-family: var(--h6-family);
  font-size: var(--h6-size);
  font-weight: var(--h6-weight);
  text-transform: var(--h6-transform);
}

@media only screen and (max-width: 767px) {
  h1,
  .heading--primary,
  .heading--primary * {
    font-size: calc(var(--h1-size) * 0.8);
  }

  h2,
  .heading--secondary,
  .heading--secondary * {
    font-size: calc(var(--h2-size) * 0.9);
  }

  h3,
  .heading--tertiary,
  .heading--tertiary * {
    font-size: calc(var(--h3-size) * 0.95);
  }

  h4,
  .heading--quaternary,
  .heading--quaternary * {
    font-size: calc(var(--h4-size) * 0.95);
  }
}

.inverted h1,
h1.inverted,
.inverted h2,
h2.inverted,
.inverted h3,
h3.inverted,
.inverted h4,
h4.inverted,
.inverted h5,
h5.inverted,
.inverted h6,
h6.inverted {
  color: var(--light-primary);
}

.no-margin h1,
.no-margin h2,
.no-margin h3,
.no-margin h4,
.no-margin h5,
.no-margin h6,
.no-margin.heading--primary,
.no-margin.heading--secondary,
.no-margin.heading--tertiary,
.no-margin.heading--quaternary,
.no-margin.heading--quinary,
.no-margin.heading--senary,
.no-margin p {
  margin: 0;
}

/* Lists */

ul,
ol {
  margin: 0 0 1.34rem;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin: 0;
}

ul.no-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

li {
  line-height: 1.4;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  color: var(--dark-tertiary);
  vertical-align: bottom;
}

/* Blockquotes */

blockquote,
.quote,
.quote p {
  color: var(--dark-primary);
  font-family: var(--secondary-font-family);
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0;
}

blockquote {
  padding: 2em 1em;
}

/* Horizontal rules */

hr {
  border: none;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--light-tertiary);
  width: 100%;
}

/* Subscripts and superscripts */

sup,
sub {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Image alt text */

img {
  font-size: 0.583rem;
  letter-spacing: var(--letter-spacing);
  word-break: normal;
}

/* Highlighted text */

mark {
  background-color: var(--accent-secondary);
  color: var(--body-text-color);
  letter-spacing: var(--letter-spacing);
}
button,
.button,
input[type=submit],
.hs-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: var(--btn-radius);
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--primary-font-family);
  font-size: 1rem;
  flex-shrink: 0;
  font-style: normal;
  font-weight: 500;
  margin: 0;
  padding: 0.625em 1.5em;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: var(--transition);
  white-space: normal;
}

button:disabled,
.button:disabled {
  background-color: #D0D0D0;
  border-color: #D0D0D0;
  color: #E6E6E6;
}

/* Primary Button */

.button--primary,
.button--primary:visited {
  background-color: var(--primary-btn-fill);
  color: var(--primary-btn-label);
  fill: var(--primary-btn-label);
}

.button--primary:hover {
  background-color: var(--primary-btn-fill-hover);
  color: var(--primary-btn-label-hover);
  fill: var(--primary-btn-label-hover);
}

.button--primary:active {
  background-color: var(--primary-btn-fill-active);
  color: var(--primary-btn-label-active);
  fill: var(--primary-btn-label-active);
}

/* Secondary Button */

.button--secondary,
.button--secondary:visited {
  background-color: var(--secondary-btn-fill);
  color: var(--secondary-btn-label);
  fill: var(--secondary-btn-label);
}

.button--secondary:hover {
  background-color: var(--secondary-btn-fill-hover);
  color: var(--secondary-btn-label-hover);
  fill: var(--secondary-btn-label-hover);
}

.button--secondary:active {
  background-color: var(--secondary-btn-fill-active);
  color: var(--secondary-btn-label-active);
  fill: var(--secondary-btn-label-active);
}

/* Tertiary Button */

.button--tertiary,
.button--tertiary:visited {
  border-bottom: var(--tertiary-btn-border-bottom);
  border-left: var(--tertiary-btn-border-left);
  border-right: var(--tertiary-btn-border-right);
  border-top: var(--tertiary-btn-border-top);
  color: var(--tertiary-btn-label);
  fill: var(--tertiary-btn-label);
}

.button--tertiary:hover {
  border-bottom: var(--tertiary-btn-border-bottom-hover);
  border-left: var(--tertiary-btn-border-left-hover);
  border-right: var(--tertiary-btn-border-right-hover);
  border-top: var(--tertiary-btn-border-top-hover);
  color: var(--tertiary-btn-label-hover);
  fill: var(--tertiary-btn-label-hover);
}

.button--tertiary:active {
  border: var(--tertiary-btn-border-active);
  color: var(--tertiary-btn-label-active);
  fill: var(--tertiary-btn-label-active);
}

/* Inverted Button */

.button--inverted,
.button--inverted:visited {
  background-color: var(--inverted-btn-fill);
  color: var(--inverted-btn-label);
  fill: var(--inverted-btn-label);
}

.button--inverted:hover {
  background-color: var(--inverted-btn-fill-hover);
  color: var(--inverted-btn-label-hover);
  fill: var(--inverted-btn-label-hover);
}

.button--inverted:active {
  background-color: var(--inverted-btn-fill-active);
  color: var(--inverted-btn-label-active);
  fill: var(--inverted-btn-label-active);
}

/* Ink Button */

.button--ink,
.button--ink:visited {
  color: var(--ink-btn-label);
  fill: var(--ink-btn-label);
  font-style: var(--ink-btn-style);
  padding-left:  0;
  padding-right: 0;
}

.button--ink:hover {
  color: var(--ink-btn-label-hover);
  fill: var(--ink-btn-label-hover);
  font-style: var(--ink-btn-style-hover);
}

.button--ink:active {
  color: var(--ink-btn-label-active);
  fill: var(--ink-btn-label-active);
}

.button--ink::before {
  background-color: var(--ink-btn-fill);
  bottom: 0.75em;
  content: "";
  display: block;
  height: var(--ink-btn-width);
  left: 0;
  mix-blend-mode: multiply;
  position: absolute;
  transition: var(--transition);
  width: 100%;
}

.button--ink:hover::before {
  background-color: var(--ink-btn-fill-hover);
  height: var(--ink-btn-width-hover);
}

.button--ink * {
  z-index: 1;
}

/* Featured Button */

.button--featured,
.button--featured:visited {
  box-shadow: var(--featured-btn-underline);
  color: var(--featured-btn-label);
  fill: var(--featured-btn-label);
  font-style: var(--featured-btn-style);
  font-weight: 700;
  padding: 0;
}

.button--featured:hover {
  box-shadow: 0 0 var(--featured-btn-label-hover);
  color: var(--featured-btn-label-hover);
  fill: var(--featured-btn-label-hover);
  font-style: var(--featured-btn-style-hover);
}

.button--featured:active {
  box-shadow: 0 0 var(--featured-btn-label-hover);
  color: var(--featured-btn-label-active);
  fill: var(--featured-btn-label-active);
}

/* No Button */

.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  background: none;
  border: none;
  border-radius: 0;
  color: initial;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-bottom: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: none;
}

/* Button Sizing */

.button--xs {
  font-size: 0.78rem;
}

.button--sm {
  font-size: 0.89rem;
}

.button--md {
  font-size: 1rem;
}

.button--lg {
  font-size: 1.33rem;
}

.button--xl {
  font-size: 1.67rem;
}

/* Button Icons */

.button__icon {
  align-items: center;
  display: flex;
  justify-content: center;
}

.button__icon svg {
  fill: inherit;
  height: 1em;
  margin-right: 0.4em;
  width:  1em;
}

.button__icon--fa svg {
  display: block;
  fill: inherit;
  height: 1em;
  margin-right: 0.4em;
}

.button.button--icon-right .button__icon,
.button.button--icon-right .button__icon--fa {
  order: 1;
}

.button.button--icon-right .button__icon svg,
.button.button--icon-right .button__icon--fa svg {
  margin-left: 0.4em;
  margin-right: 0;
}

/* Switcher Button */

.button--switcher,
.button--switcher .button {
  color: var(--primary-btn-label);
  fill: var(--primary-btn-label);
  font-size: 0.9rem;
  padding: 0;
}

.button--switcher .button::before {
  display: none;
}
/* Form general styles */

form {
  background: var(--form-bg);
  border-bottom: var(--form-border-bottom);
  border-left: var(--form-border-left);
  border-right: var(--form-border-right);
  border-top: var(--form-border-top);
}

.form-title {
  background: var(--title-bg);
  color: var(--title-color);
}

/* Fields */

.hs-form-field {
  margin-bottom: 1em;
}

/* Labels */

form label {
  color: var(--label);
  display: block;
  font-size: 0.78rem;
  letter-spacing: var(--letter-spacing);
  line-height: 1;
  margin-bottom: 0.45em;
  padding-bottom: 0.4em;
  padding-left: 1.33rem;
  padding-top: 0.4em;
}

/* Help text */

form legend {
  color: var(--help-text);
  font-size: 0.9rem;
}

/* Inputs */

form input[type=text],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea,
.select-selected {
  background-color: var(--field-bg);
  border-bottom: var(--field-border-bottom);
  border-left: var(--field-border-left);
  border-right: var(--field-border-right);
  border-top: var(--field-border-top);
  border-radius: var(--field-corner);
  -webkit-border-radius: var(--field-corner);
  color: var(--field-text);
  display: inline-block;
  font-size: 0.89rem;
  letter-spacing: var(--letter-spacing);
  line-height: 1.1;
  padding: 1.56em;
  width: 100% !important;
}

/* Style for successful validation */
/* form input[type='text']:valid,
form input[type='email']:valid,
form input[type='password']:valid,
form input[type='tel']:valid,
form input[type='number']:valid,
form select:valid,
form textarea:valid {
  border: none;
  border-top: 4px solid var(--status-success);
} */

form input[type='text']:focus,
form input[type='text']:active,
form input[type='email']:focus,
form input[type='email']:active,
form input[type='password']:focus,
form input[type='password']:active,
form input[type='tel']:focus,
form input[type='tel']:active,
form input[type='number']:focus,
form input[type='number']:active,
form select:focus,
form select:active,
form textarea:focus,
form textarea:active {
  outline: 1px solid var(--field-outline-color);
}

form fieldset {
  max-width: 100% !important;
}

::-webkit-input-placeholder {
  color: var(--placeholder);
  letter-spacing: var(--letter-spacing);
}

::-moz-placeholder {
  color: var(--placeholder);
  letter-spacing: var(--letter-spacing);
}

:-ms-input-placeholder {
  color: var(--placeholder);
  letter-spacing: var(--letter-spacing);
}

:-moz-placeholder {
  color: var(--placeholder);
  letter-spacing: var(--letter-spacing);
}

::placeholder {
  color: var(--placeholder);
  letter-spacing: var(--letter-spacing);
}

/* Inputs - checkbox/radio */

form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

form .inputs-list > li {
  display: block;
  margin: 0.7rem 0;
}

form .inputs-list input,
form .inputs-list span {
  vertical-align: middle;
}

form input[type=checkbox],
form input[type=radio] {
  cursor: pointer;
  margin-right: 0.35rem;
}

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

.hs-dateinput:before {
  content:'\01F4C5';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.fn-date-picker .pika-table thead th {
  color: #FFF;
}

.fn-date-picker td.is-selected .pika-button {
  border-radius: 0;
  box-shadow: none;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  color: #FFF;
}

/* Inputs - file picker */

form input[type=file] {
  background-color: transparent;
  border: initial;
  padding: initial;
}

/* Headings and text */

form .hs-richtext,
form .hs-richtext p {
  font-size: 0.875rem;
  margin: 0 0 1.4rem;
}

form .hs-richtext img {
  max-width: 100% !important;
}

/* GDPR */

form .legal-consent-container,
form .legal-consent-container .hs-richtext,
form .legal-consent-container .hs-richtext p {
  color: var(--dark-tertiary);
  font-size: 0.8rem;
  margin-bottom: 1.67em;
}

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 1rem !important;
}

form .legal-consent-container label {
  padding-left: 0;
}

/* Validation */

.hs-form-required {
  color: var(--status-error);
}

.hs-input.invalid.error {
  border: none;
  border-top: 4px solid var(--status-error);
}

.hs-error-msg {
  color: var(--status-error);
  font-size: 0.72rem;
  margin-top: 1em;
  padding-left: 1.33rem;
}

/* Submit button */

form input[type=submit],
form .hs-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  align-items: center;
  appearance: none;
  background: var(--field-btn-fill);
  border-bottom: var(--field-btn-border-bottom);
  border-left: var(--field-btn-border-left);
  border-right: var(--field-btn-border-right);
  border-top: var(--field-btn-border-top);
  border-radius: var(--field-btn-corner);
  box-shadow: none;
  color: var(--field-btn-label);
  cursor: pointer;
  display: inline-flex;
  font-size: 1rem;
  fill: var(--field-btn-label);
  flex-shrink: 0;
  font-weight: 500;
  padding: 0.625em 1.5em;
  text-align: center;
  text-decoration: none;
  transition: var(--transition);
  white-space: normal;
}

form input[type=submit]:hover,
form .hs-button:hover {
  background: var(--field-btn-fill-hover);
  border-bottom: var(--field-btn-border-bottom-hover);
  border-left: var(--field-btn-border-left-hover);
  border-right: var(--field-btn-border-right-hover);
  border-top: var(--field-btn-border-top-hover);
  border-radius: var(--field-btn-corner-hover);
  color: var(--field-btn-label-hover);
  fill: var(--field-btn-label-hover);
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}

/* Custom selector */

/* The container must be positioned relative: */
.hs-fieldtype-select .input,
.custom-select {
  position: relative;
}

.hs-fieldtype-select .input select
.custom-select select {
  appearance: none; 
}

/* Style the arrow inside the select element: */
.select-selected::after {
  background-image: url("https://48932267.fs1.hubspotusercontent-na1.net/hubfs/48932267/raw_assets/public/@marketplace/Kohorta/Adamant/images/custom-select/icon-dropdown.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  content: "";
  height: 1.2em;
  position: absolute;
  right: 1.2em;
  top: 1.6em;
  transform: rotate(0deg);
  transition: var(--transition);
  width:  1.2em;
}

.custom-select .select-selected::after {
  top: 1em;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active::after {
  transform: translateY(0.2em) rotate(180deg);
}

/* style the items (options), including the selected item: */
.select-items div {
  border: none;
  color: var(--field-text);
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
}

.custom-select .select-selected {
  background-color: var(--light-tertiary);
  font-size: 1rem;
  padding: 1.2em 1.67em;
  position: relative;
}

.select-selected__label {
  left: 0;
  position: absolute;
  top: 0;
}

.select-items div {
  font-size: 0.875rem;
  overflow: hidden;
  padding: 1em 1.67em;
  white-space: nowrap;
}

.select-items div:first-of-type {
  border-top: 1px solid var(--light-tertiary);
  padding-top: 1.67em;
}

.select-items div:last-of-type {
  padding-bottom: 1.67em;
}

/* Style items (options): */
.select-items {
  background-color: var(--light-secondary);
  left: 0;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 100;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover, 
.same-as-selected {
  background-color: var(--light-tertiary);
}
/* Table */

table {
  background-color: var(--table-body-bg) !important;
  border-bottom: var(--table-cell-border-bottom) !important;
  border-left: var(--table-cell-border-left) !important;
  border-right: var(--table-cell-border-right) !important;
  border-top: var(--table-cell-border-top) !important;
  border-collapse: collapse;
  font-size: 0.89rem;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

/* Table cells */

td,
th {
  border-bottom: var(--table-cell-border-bottom);
  border-left: var(--table-cell-border-left);
  border-right: var(--table-cell-border-right);
  border-top: var(--table-cell-border-top);
  color: var(--table-body-text);
  padding: var(--table-cell-spacing);
  vertical-align: top;
}

/* Table header */

thead th {
  background-color: var(--table-header-bg);
  color: var(--table-header-text);
  font-weight: 700;
  padding-bottom: 1.2em;
  padding-top:    1.2em;
  vertical-align: bottom;
}

/* Table footer */

tfoot td {
  background-color: var(--table-footer-bg);
  color: var(--table-footer-text);
}

/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/

/* Header */

.header {
  background-color: var(--header-bg);
  border-bottom: var(--header-bottom-border);
  position: relative;
  width: 100%;
}

.header--fixed {
  left: 0;
  min-height: var(--main-content-offset);
  position: fixed;
  top: 0;
  z-index: 1000;
}

.header--landing {
  background-color: var(--header-bg-landing);
}

/* Logo */

.header__logo-effect a {
  position: relative;
}

.header__logo a::after {
  background: var(--header-logo-effect);
  background-position: -500%;
  background-repeat: no-repeat;
  background-size: 140px;
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: background-position 0.8s ease-in-out;
}

.header__logo a:hover::after {
  background-position: 500%;
  opacity: 1;
}

.header__logo * {
  display: block;
}

.header__logo a:not([class])::before {
  display: none;
}

/* Navigation skipper */

.header__skip {
  height: 1px;
  left: -1000px;
  overflow: hidden;
  position: absolute;
  text-align: left;
  top: -1000px;
  width: 1px;
}

.header__skip:hover,
.header__skip:focus,
.header__skip:active {
  height: auto;
  left: 0;
  overflow: visible;
  top: 0;
  width: auto;
}

/* Navigation */

.header__main {
  align-items: center;
  display: flex;
}

.header__nav {
  align-items: center;
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
}

@media screen and (min-width: 768px) {
  .header__nav {
    flex-grow: 1;
    justify-content: flex-end;
  }
}

.inner-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 1.5rem;
  padding-top:    1.5rem;
  width: 100%;
}

.header__cta {
  margin-bottom: 2rem;
  padding-left: 2rem;
  display: flex;
}

.header__cta .btn-list {
  padding: 0;
}

.header__cta .btn-list__item {
  margin: 0;
}

.header__cta .button--secondary,
.header__cta .button--secondary:visited {
  border: none;
  /* padding-left: 0; */
}

.header__cta .button--secondary:hover {
  background-color: transparent;
}

@media screen and (min-width: 768px) {
  .header__cta {
    display: flex;
    flex-shrink: 0;
    margin-bottom: 0;
    padding-left: 0;
  }
}
  
.header__block {
  background-color: var(--header-bg);
  display: none;
  padding: 0;
}

.header__block.is-active {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100vh - var(--content-offset-mobile));
  min-height: calc(100dvh - var(--content-offset-mobile));
  margin: 0;
  left: 0;
  overflow: hidden;
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
  position: absolute;
  right: 0;
  top: var(--content-offset-mobile);
  z-index: 20;
}

.header__block-toggle {
  align-items: flex-start;
  color: var(--header-nav-color);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 24px;
  justify-content: space-around;
  padding: 3px;
  transform: translateY(0) rotate(0deg);
  transition: all .3s ease-in-out;
  width: 24px;
  z-index: 100;
}

.js-header__block-toggle--reverse {
  transform: rotate(90deg);
}

.header__block-toggle-item {
  background-color: var(--header-nav-color);
  height: 1px;
  transition: all .2s ease-in-out;
  transition-delay: .2s;
}

.header__block-toggle-item--s {
  transform: translateY(0) scale(1);
  width: 50%;
}

.header__block-toggle-item--l {
  width: 100%;
  transform: translateY(0) rotate(0deg);
}

.header__block-toggle-item--m {
  transform: translateY(0) rotate(0deg);
  width: 68%;
}

.js-header__block-toggle--reverse .header__block-toggle-item--s {
  transform: translateY(6px) scale(0);
}

.js-header__block-toggle--reverse .header__block-toggle-item--l {
  transform: translateY(0) rotate(45deg);
}

.js-header__block-toggle--reverse .header__block-toggle-item--m {
  transform: translateY(-6px) rotate(-45deg);
  width: 100%;
}

@media screen and (min-width: 768px) {
  .header__block-toggle {
    display: none;
  }

  .header__block {
    background-color: transparent;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
  }

  .header__block.is-active {
    flex-direction: row;
    height: auto;
    min-height: auto;
    justify-content: initial;
    overflow: initial;
    padding: 0;
    position: static;
  }
}



/* Language switcher */

.header__lang {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  margin-left: 1em;
  padding-right: 1em;
}

.header__lang-label {
  color: var(--header-nav-color);
  font-size: 0.89rem;
  margin-left: 0.35em;
  white-space: nowrap;
}

.header__lang:hover .lang_list_class {
  display: block;
}

.header__lang .lang_switcher_class {
  display: block;
}

.lang_switcher_class .globe_class {
  background-image: url("https://48932267.fs1.hubspotusercontent-na1.net/hubfs/48932267/raw_assets/public/@marketplace/Kohorta/Adamant/images/lang-switcher/icon-lang.svg");
  background-color: var(--dark-tertiary);
  background-size: 14px;
  border-radius: 50%;
  height: 20px;
  width: 20px;
}

.lang_switcher_class .lang_list_class {
  width: 160px;
}

.lang_switcher_class .lang_list_class li:first-child {
  border: none;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  padding-top: 1.6em;
}

.lang_switcher_class .lang_list_class li:last-child {
  border: none;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  padding-bottom: 1.6em;
}

.lang_switcher_class .lang_list_class {
  top: 18px;
}
.lang_switcher_class .lang_list_class li {
  background-color: var(--light-tertiary);
  border: none;
  font-size: 0.84rem;
  padding: 0.6em;
}

.lang_switcher_class .lang_list_class::after {
  border-bottom-color: var(--light-tertiary);
}

.lang_switcher_class .lang_list_class::before {
  border-bottom-color: var(--light-tertiary);
}

.lang_switcher_class .lang_list_class li a {
  color: var(--dark-primary);
  font-style: normal;
}

.lang_switcher_class .lang_list_class li a:hover {
  color: var(--dark-tertiary);
}
/* ----------- Footer ----------- */

.footer {
  background-color: var(--footer-bg);
  border-top: var(--footer-border);
  flex-shrink: 0;
}

.footer ul[role=menu] a:not([class]):hover::before {
  display: none;
}

/* Footer nav */

.footer__nav ul[role=menu], .footer__nav [role=navigation] ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__nav ul[role=menu]:first-child, .footer__nav [role=navigation] ul:first-child {
  display: flex;
  flex-wrap: wrap;
  max-width: var(--footer-nav-width);
}

.footer__nav ul[role=menu] li, .footer__nav [role=navigation] ul li {
  padding: 0.4em 2em 0.4em 0;
}

.footer__nav ul[role=menu] .hs-menu-depth-1, .footer__nav [role=navigation] ul .hs-menu-depth-1 {
  flex-shrink: 0;
  margin-bottom: 1.8rem;
}

@media only screen and (min-width: 640px){
  .footer__nav ul[role=menu] li, .footer__nav [role=navigation] ul li {
    padding-right: 0.9em;
  }

  .footer__nav ul[role=menu] .hs-menu-depth-1, .footer__nav [role=navigation] ul .hs-menu-depth-1 {
    flex-basis: calc(100% / var(--footer-nav-cols));
    margin-bottom: 2.5rem;
  }
}

.footer__nav ul[role=menu] .hs-menu-depth-1 > a, .footer__nav [role=navigation] ul .hs-menu-depth-1 > a {
  color: var(--footer-nav-item-color);
  cursor: initial;
  display: block;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  margin-bottom: 1em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer__nav ul[role=menu] .hs-menu-depth-2 > a[href="javascript:;"], .footer__nav [role=navigation] ul .hs-menu-depth-2 > a[href="javascript:;"] {
  color: var(--footer-nav-item-disabled);
  cursor: auto;
  position: relative;
}

.footer__nav ul[role=menu] .hs-menu-depth-2 > a[href="javascript:;"]:hover, .footer__nav [role=navigation] ul .hs-menu-depth-2 > a[href="javascript:;"]:hover {
  color: var(--footer-nav-item-disabled);
}



.footer__nav ul[role=menu] li a, .footer__nav [role=navigation] ul li a {
  color: var(--footer-nav-item-color);
  font-size: 0.89rem;
  font-style: normal;
  text-decoration: none;
}

.footer__nav ul[role=menu] a:not([class]):hover, .footer__nav [role=navigation] ul a:not([class]):hover {
  color: var(--footer-nav-item-color-hover);
  text-decoration: underline;
}

.footer__nav ul[role=menu] a[href="javascript:;"]:hover, .footer__nav [role=navigation] ul a[href="javascript:;"]:hover {
  color: var(--footer-nav-item-color);
  text-decoration: none;
}

/* Footer logo */

.footer__logo a {
  display: block;
  width: 100px;
}

@media only screen and (min-width: 768px) {
  .footer__logo a {
    width: 140px;
  }
}

/* Footer meta nav */

.footer__meta-nav {
  color: var(--footer-meta);
  font-size: 0.89rem;
}

.footer__meta-nav a {
  color: var(--footer-meta);
  font-style: normal;
  text-decoration: underline;
}

.footer__meta-nav a:hover {
  color: var(--dark);
  text-decoration: none;
}

.footer__meta-nav a:not([class]):hover::before {
  display: none;
}

.footer__meta-nav a svg {
  display: inline-block;
  margin-bottom: -0.125em;
  margin-left: 0.2em;
}
/* Menu and simple menu */

.hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Horizontal menu */

.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  flex-direction: column;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: column;
  }
}

/* Vertical menu */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  flex-direction: column;
}

/* Flyouts */

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: inline-flex;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: flex;
  }
}

.hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
  left: -9999px;
  opacity: 0;
  position: absolute;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
  display: block;
  white-space: nowrap;
}

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 0;
  opacity: 1;
  top: 100%;
}

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 100%;
  opacity: 1;
  top: 0;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    position: relative;
    top: auto;
  }
}

/* CTA, logo, and rich text images */

.hs_cos_wrapper_type_cta img,
.hs_cos_wrapper_type_logo img,
.hs_cos_wrapper_type_rich_text img {
  height: auto;
  max-width: 100%;
}
.card__image {
  margin-bottom: 3rem;
}

.card__divider {
  border-bottom-width: 2px;
  margin-bottom: 1.875rem;
}

.card__title {
  position: relative;
}

.card--framed {
  background-color: var(--light-secondary);
  min-height: 100%;
  padding: 3rem 2rem;
}

.card__icon svg {
  display: block;
}

.card__desc,
.card__desc p {
  font-size: clamp(0.89rem, 5vw,1.167rem);
}

@media only screen and (min-width: 768px) {
  .card--framed {
    padding: clamp(1rem, 4vw, 3.67rem);
  }
}

/* Section */

.featured-cards {
  position: relative;
  z-index: 1;
}

@media only screen and (min-width: 768px) {
  .featured-cards .row-fluid,
  .featured-cards .dnd-module {
    display: flex !important;
  }
}
.testimonial__info {
  margin-bottom: 1.5rem;
}

@media only screen and (min-width: 768px) {
  .testimonial__info {
    align-items: center;
    display: flex;
  }
}

.testimonial__meta {
  color: var(--dark-tertiary);
  display: block;
  font-size: 0.89rem;
}

.testimonial__name {
  margin-bottom: 0.5em;
}

/* Utilities
Helper classes with ability to override anything that comes before it
*/

/* ********* Layout ********* */

.footer-bottom__base {
  display: flex; /* Enables body content to acquire flex properties like grow, shrink and base */
  flex-direction: column; /* Fixes the row layout for body that comes from display: flex */
  min-height: 100vh;
  overflow-x: hidden;
}

.footer-bottom__shift {
  flex: 1 0 auto; 
  /* Makes div, which is footer's sibling, to grow and take all the height and shifts footer 
  element to the bottom of the browser window. It works when summarized height of the body's 
  children is less then the height of the browser's window */
}

.block {
  display: block;
}

.flex {
  display: flex;
}

.flex-centered-col {
  align-items: center;
  display: flex;
  flex-direction: column;
}

@media only screen and (max-width: 768px) {
  .m-hide {
    display: none;
  }
}

.relative {
  position: relative;
}

.mw-220 {
  max-width: 220px !important;
}

.mw-380 {
  max-width: 380px !important;
}

.mw-460 {
  max-width: 460px !important;
}

.mw-600 {
  max-width: 600px !important;
}

.mw-720 {
  max-width: 720px !important;
}

.mw-840 {
  max-width: 840px !important;
}

.full-width {
  width: 100%;
}

/* ********* Spacing ********* */

@media only screen and (min-width: 1024px) {
  .d-offset-left {
    margin-left: 7.5rem;
  }
}

/* Bottom */

.pb-0 {
  padding-bottom: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.pb-xs {
  padding-bottom: 1rem;
}

.mb-xs {
  margin-bottom: 1rem;
}

.pb-sm {
  margin-bottom: 2rem;
}

.mb-sm {
  margin-bottom: 2rem;
}

.pb-md {
  padding-bottom: 3.75rem;
}

.mb-md {
  margin-bottom: 3.75rem;
}

.pb-lg {
  padding-bottom: 5rem;
}

.mb-lg {
  margin-bottom: 5rem;
}

.pb-xl {
  padding-bottom: 8rem;
}

.mb-xl {
  margin-bottom: 8rem;
}

@media (max-width: 767px) {
  .m-pb-0 {
    padding-bottom: 0;
  }
  
  .m-mb-0 {
    margin-bottom: 0;
  }
  
  .m-pb-xs {
    padding-bottom: 1rem;
  }
  
  .m-mb-xs {
    margin-bottom: 1rem;
  }
  
  .m-pb-sm {
    margin-bottom: 2rem;
  }
  
  .m-mb-sm {
    margin-bottom: 2rem;
  }
  
  .m-pb-md {
    padding-bottom: 3.75rem;
  }
  
  .m-mb-md {
    padding-bottom: 3.75rem;
  }
  
  .m-pb-lg {
    padding-bottom: 5rem;
  }
  
  .m-mb-lg {
    margin-bottom: 5rem;
  }
  
  .m-pb-xl {
    padding-bottom: 8rem;
  }
  
  .m-mb-xl {
    margin-bottom: 8rem;
  }
}

/* Top */

.pt-0 {
  padding-top: 0;
}

.mt-0 {
  margin-top: 0;
}

.pt-xs {
  padding-top: 1rem;
}

.mt-xs {
  margin-top: 1rem;
}

.pt-sm {
  padding-top: 2rem;
}

.mt-sm {
  margin-top: 2rem;
}

.pt-md {
  padding-top: 3.75rem;
}

.mt-md {
  margin-top: 3.75rem;
}

.pt-lg {
  padding-top: 5rem;
}

.mt-lg {
  margin-top: 5rem;
}

.pt-xl {
  padding-top: 8rem;
}

.mt-xl {
  margin-top: 8rem;
}

@media (max-width: 767px) {
  .m-pt-0 {
    padding-top: 0;
  }
  
  .m-mt-0 {
    margin-top: 0;
  }
  
  .m-pt-xs {
    padding-top: 1rem;
  }
  
  .m-mt-xs {
    margin-top: 1rem;
  }
  
  .m-pt-sm {
    padding-top: 2rem;
  }
  
  .m-mt-sm {
    margin-top: 2rem;
  }
  
  .m-pt-md {
    padding-top: 3.75rem;
  }
  
  .m-mt-md {
    margin-top: 3.75rem;
  }
  
  .m-pt-lg {
    padding-top: 5rem;
  }
  
  .m-mt-lg {
    margin-top: 5rem;
  }
  
  .m-pt-xl {
    padding-top: 8rem;
  }
  
  .m-mt-xl {
    margin-top: 8rem;
  }
}

/* Left */

.pl-0 {
  padding-left: 0;
}

.ml-0 {
  margin-left: 0;
}

.pl-xs {
  padding-left: 1rem;
}

.ml-xs {
  margin-left: 1rem;
}

.pl-sm {
  padding-left: 2rem;
}

.ml-sm {
  margin-left: 2rem;
}

.pl-md {
  padding-left: 3.75rem;
}

.ml-md {
  margin-left: 3.75rem;
}

.pl-lg {
  padding-left: 5rem;
}

.ml-lg {
  margin-left: 5rem;
}

.pl-xl {
  padding-left: 8rem;
}

.ml-xl {
  margin-left: 8rem;
}

@media (max-width: 767px) {
  .m-pl-0 {
    padding-left: 0;
  }
  
  .m-ml-0 {
    margin-left: 0;
  }
  
  .m-pl-xs {
    padding-left: 1rem;
  }
  
  .m-ml-xs {
    margin-left: 1rem;
  }
  
  .m-pl-sm {
    padding-left: 2rem;
  }
  
  .m-ml-sm {
    margin-left: 2rem;
  }
  
  .m-pl-md {
    padding-left: 3.75rem;
  }
  
  .m-ml-md {
    margin-left: 3.75rem;
  }
  
  .m-pl-lg {
    padding-left: 5rem;
  }
  
  .m-ml-lg {
    margin-left: 5rem;
  }
  
  .m-pl-xl {
    padding-left: 8rem;
  }
  
  .m-ml-xl {
    margin-left: 8rem;
  }
}

/* Right */

.pr-0 {
  padding-right: 0;
}

.mr-0 {
  margin-right: 0;
}

.pr-xs {
  padding-right: 1rem;
}

.mr-xs {
  margin-right: 1rem;
}

.pr-sm {
  padding-right: 2rem;
}

.mr-sm {
  margin-right: 2rem;
}

.pr-md {
  padding-right: 3.75rem;
}

.mr-md {
  margin-right: 3.75rem;
}

.pr-lg {
  padding-right: 5rem;
}

.mr-lg {
  margin-right: 5rem;
}

.pr-xl {
  padding-right: 8rem;
}

.mr-xl {
  margin-right: 8rem;
}

@media (max-width: 767px) {
  .m-pr-0 {
    padding-right: 0;
  }
  
  .m-mr-0 {
    margin-right: 0;
  }
  
  .m-pr-xs {
    padding-right: 1rem;
  }
  
  .m-mr-xs {
    margin-right: 1rem;
  }
  
  .m-pr-sm {
    padding-right: 2rem;
  }
  
  .m-mr-sm {
    margin-right: 2rem;
  }
  
  .m-pr-md {
    padding-right: 3.75rem;
  }
  
  .m-mr-md {
    margin-right: 3.75rem;
  }
  
  .m-pr-lg {
    padding-right: 5rem;
  }
  
  .m-mr-lg {
    margin-right: 5rem;
  }
  
  .m-pr-xl {
    padding-right: 8rem;
  }
  
  .m-mr-xl {
    margin-right: 8rem;
  }
}

/* Horizontal */

.px-xs {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-sm {
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-md {
  padding-left: 3.75rem;
  padding-right: 3.75rem;
}

.px-lg {
  padding-left: 5rem;
  padding-right: 5rem;
}

.px-xl {
  padding-left: 8rem;
  padding-right: 8rem;
}

@media (max-width: 767px) {
  .m-px-xs {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .m-px-sm {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  
  .m-px-md {
    padding-left: 3.75rem;
    padding-right: 3.75rem;
  }
  
  .m-px-lg {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  
  .m-px-xl {
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

/* Vertical */

.py-xs {
  padding-bottom: 1rem;
  padding-top: 1rem;
}

.py-sm {
  padding-bottom: 2rem;
  padding-top: 2rem;
}

.py-md {
  padding-bottom: 3.75rem;
  padding-top: 3.75rem;
}

.py-lg {
  padding-bottom: 5rem;
  padding-top: 5rem;
}

.py-xl {
  padding-bottom: 8rem;
  padding-top: 8rem;
}

@media (max-width: 767px) {
  .m-py-xs {
    padding-bottom: 1rem;
    padding-top: 1rem;
  }
  
  .m-py-sm {
    padding-bottom: 2rem;
    padding-top: 2rem;
  }
  
  .m-py-md {
    padding-bottom: 3.75rem;
    padding-top: 3.75rem;
  }
  
  .m-py-lg {
    padding-bottom: 5rem;
    padding-top: 5rem;
  }
  
  .m-py-xl {
    padding-bottom: 8rem;
    padding-top: 8rem;
  }
}

/* Auto */

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

.mx-auto {
  margin: 0 auto;
}

/* ********* Visuals ********* */

/* Images */

.img-cover {
  --max-width: 306px;
  display: block;
  max-width: var(--max-width) !important;
  overflow: hidden;
}

.img-cover img {
  object-fit: cover;
}

.img-cover--portrait-lg {
  --max-width: 597px;
}

.img-cover--portrait-lg,
.img-cover--portrait-lg img {
  aspect-ratio: 4/5;
}

.img-cover--portrait-md {
  --max-width: 392px;
}

.img-cover--portrait-md,
.img-cover--portrait-md img {
  aspect-ratio: 4/5;
}

.img-cover--portrait-md-tall {
  --max-width: 389px;
}

.img-cover--portrait-md-tall,
.img-cover--portrait-md-tall img {
  aspect-ratio: 2/3;
}

.img-cover--square-sm {
  --max-width: 114px;
}

.img-cover--square-sm,
.img-cover--square-sm img {
  aspect-ratio: 1/1;
}

.img-cover--square-md {
  --max-width: 306px;
}

.img-cover--square-md,
.img-cover--square-md img {
  aspect-ratio: 1/1;
}

.img-cover--square-lg {
  --max-width: 468px;
}

.img-cover--square-lg,
.img-cover--square-lg img {
  aspect-ratio: 1/1;
}

.img-cover--square-xl {
  --max-width: 597px;
}

.img-cover--square-xl,
.img-cover--square-xl img {
  aspect-ratio: 1/1;
}

.img-cover--landscape-sm {
  --max-width: 306px;
}

.img-cover--landscape-sm,
.img-cover--landscape-sm img {
  aspect-ratio: 3/2;
}

.img-cover--landscape-md {
  --max-width: 702px;
}

.img-cover--landscape-md,
.img-cover--landscape-md img {
  aspect-ratio: 3/2;
}

.img-cover--landscape-lg {
  --max-width: 1356px;
}

.img-cover--landscape-lg,
.img-cover--landscape-lg img {
  aspect-ratio: 2/1;
}

.img-cover--oval-lg {
  --max-width: 294px;
  border-radius: calc(var(--max-width) * 0.6);
}

.img-cover--oval-lg,
.img-cover--oval-lg img {
  aspect-ratio: 4/5;
}

.img-cover--oval-sm {
  --max-width: 114px;
  border-radius: calc(var(--max-width) * 0.6);
}

.img-cover--oval-sm,
.img-cover--oval-sm img {
  aspect-ratio: 4/5;
}

.img-cover--oval-xs {
  --max-width: 72px;
  border-radius: calc(var(--max-width) * 0.6);
}

.img-cover--oval-xs,
.img-cover--oval-xs img {
  aspect-ratio: 4/5;
}

/* Icons */

.icon--linkedin-fix svg {
  margin-top: -0.12em;
}

/* ********* Appearance ********* */

.bg-color {
  background-color: var(--accent-primary);
}

.bg-white {
  background-color: #FFF;
}

.bg-light {
  background-color: var(--light-primary);
}

.bg-light-sec {
  background-color: var(--light-secondary);
}

.bg-light-ter {
  background-color: var(--light-tertiary);
}

.bg-dark {
  background-color: var(--dark-primary);
}

.divider-b {
  border-bottom: 1px solid var(--light-tertiary);
}

.divider-t {
  border-top: 1px solid var(--light-tertiary);
}

@media only screen and (max-width: 768px) {
  .m-divider-b {
    border-bottom: 1px solid var(--light-tertiary);
  }
  
  .m-divider-t {
    border-top: 1px solid var(--light-tertiary);
  }
}

/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}

/* JS-related helpers */

.js-noscroll {
  overflow: hidden;
}

.js-hide {
  display: none;
}

@media (hover: hover) {
  .js-slidein-start {
    opacity: 0;
    transform: translateY(25%);
    transition-duration: 0.6s;
    transition-property: opacity,transform;
    transition-timing-function: ease-in-out;
  }

  .js-slidein-end {
    opacity: 1;
    transform: translateY(0);
  }
}
/* === assets/css/common.css === */
/* ============================================================
   VXM Design System - CSS Custom Properties
   ============================================================ */

:root {
  /* Brand Colors */
  --vxm-brand-blue: #477ECF;
  --vxm-dark: #1A1A1A;
  --vxm-white: #FFFFFF;
  --vxm-accent: #7FD2CD;
  --vxm-success: #20AD96;
  --vxm-teal: #4DC6BE;
  --vxm-black: #000000;

  /* Neutral Palette */
  --vxm-gray-100: #F9FAFB;
  --vxm-gray-200: #F2F5EE;
  --vxm-gray-300: #E5E7EB;
  --vxm-gray-400: #CCCCCC;
  --vxm-gray-500: #999999;
  --vxm-gray-600: #555555;
  --vxm-gray-700: #333333;
  --vxm-gray-900: #0A0E27;

  /* Typography Scale */
  --vxm-text-sm: 14px;
  --vxm-text-base: 16px;
  --vxm-text-lg: 18px;
  --vxm-text-xl: 24px;
  --vxm-text-2xl: 32px;
  --vxm-text-3xl: 40px;

  /* Heading scale (responsive) — normalized site-wide title/subtitle sizes.
     Matches the hero + "tradicional a digital" reference: desktop -> mobile.
     Curves use a small vw + base px so the clamp doesn't slam into max
     by ~680px viewport (the prior `5vw` did) and then look oversized
     against shrinking 2-col card layouts at the desktop→tablet
     transition. With the new formulas the title hits 34px only
     around 1267px viewport — a clean smooth ramp from mobile to
     desktop, no aggressive jumps. */
  --vxm-fs-hero: clamp(30px, 1.7vw + 18px, 44px); /* hits 44 at ~1530px */
  --vxm-fs-title: clamp(26px, 1.5vw + 15px, 34px); /* hits 34 at ~1267px */
  --vxm-fs-subhead: clamp(20px, 1vw + 13px, 26px); /* hits 26 at ~1300px */
  --vxm-fs-subtitle: 18px;                  /* leads / strong intros */
  --vxm-fs-body: 16px;                      /* body paragraphs */
  --vxm-fs-eyebrow: 12px;                   /* small uppercase labels */

  /* OVERRIDE legacy template_main.min.css token defaults that were
     forcing every H1/H2 across the site to render at 64px / 48px AND
     uppercase. Now all inner pages inherit the same scale as the
     home (clamp 30→44 for H1, clamp 26→34 for H2) and stay in title
     case unless an explicit eyebrow declares uppercase. */
  --h1-size: var(--vxm-fs-hero);
  --h2-size: var(--vxm-fs-title);
  --h1-transform: none;
  --h2-transform: none;

  /* Spacing Scale */
  --vxm-space-xs: 4px;
  --vxm-space-sm: 8px;
  --vxm-space-md: 16px;
  --vxm-space-lg: 24px;
  --vxm-space-xl: 40px;
  --vxm-space-2xl: 64px;

  /* Layout */
  --vxm-max-width: 1400px;
  --vxm-border-radius: 8px;

  /* Transitions */
  --vxm-transition-fast: 150ms ease;
  --vxm-transition-base: 300ms ease;
}

/* CSS Containment for third-party embeds — prevents layout shifts from propagating */
.embed_container,
.oembed_container {
  contain: layout;
}

/* Override vendor template_main.min.css color variables for WCAG contrast */
:root {
  --accent-primary: #477ECF;
  --accent-secondary: #477ECF;
  --primary-btn-fill: #477ECF;
  --primary-btn-label: #FFFFFF;
  --primary-btn-label-hover: #477ECF;
  --primary-btn-label-active: #477ECF;
  --secondary-btn-fill: #477ECF;
  --secondary-btn-label-hover: #477ECF;
  --secondary-btn-label-active: #477ECF;
  --ink-btn-fill: #477ECF;
  --ink-btn-fill-hover: #477ECF;
  --ink-btn-fill-active: #477ECF;
  --featured-btn-label: #477ECF;
  --featured-btn-underline-color: #477ECF;
  --header-nav-color-hover: #477ECF;
  --field-btn-label-hover: #477ECF;
  --field-btn-fill: #477ECF;
  --footer-bg: #4DC6BE;
}

/* ── Utility classes ── */

.img-responsive {
  max-width: 100%;
  height: auto;
}

.inline-block-wrap {
  display: inline-block;
  max-width: 100%;
}

.border-none {
  border: 0;
}

/* ============================================================
   Base Styles
   ============================================================ */

/* Center buttons in plataforma.html sections */

.button-wrapper {
  text-align: center;
}

/* Shared across 10 pages: administrar.html, alimentos-y-bebidas.html, autoseller.html */

a.cta_button {
  box-sizing: content-box !important;
  vertical-align: middle;
}

.hs-breadcrumb-menu {
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.hs-breadcrumb-menu-item {
  float: left;
  padding: 10px 0 10px 10px;
}

.hs-breadcrumb-menu-divider:before {
  content: "›";
  padding-left: 10px;
}

.hs-featured-image-link {
  border: 0;
}

.hs-featured-image {
  float: right;
  margin: 0 0 20px 20px;
  max-width: 50%;
}

.hs-screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
}

/* Shared across 10 pages: administrar.html, alimentos-y-bebidas.html, autoseller.html */

.vxm-header-logo .logo {
  max-width: 120px;
  margin-top: 0;
  margin-bottom: -200px;
}

/* ════════════════════════════════════════════════════════════════
   HEADER — normalize across all pages
   Page-specific CSS bundles can occasionally inflate the nav font
   size (legacy 1.33rem default → ~21px); lock the navigation
   typography here so every page renders the header identically.
   Loaded by common.css → applies on every page on every country.
   ════════════════════════════════════════════════════════════════ */

/* Logo: consistent height + fixed width — no per-page surprises */
.header .vxm-header-logo img,
.header .header__logo img {
  height: 36px !important;
  width: auto !important;
  max-width: 140px !important;
  display: block !important;
}

/* Nav items + their dropdown buttons: 15px on desktop, 14px under
   1024px so the bar doesn't wrap onto two lines. */
.header .main-nav__item,
.header .main-nav__item button,
.header .main-nav__item > a,
.header .main-nav__item-label,
.header .drop-trigger {
  font-family: Montserrat, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

/* The carat icon next to dropdown labels: scale with the text */
.header .main-nav__item-icon {
  width: 12px !important;
  height: 12px !important;
}

/* Header outer height — keep consistent across pages */
.header .inner-header {
  min-height: 64px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

@media (max-width: 1024px) {
  .header .main-nav__item,
  .header .main-nav__item button,
  .header .main-nav__item > a,
  .header .main-nav__item-label,
  .header .drop-trigger {
    font-size: 14px !important;
  }
}

@media (max-width: 768px) {
  .header .vxm-header-logo img,
  .header .header__logo img {
    height: 30px !important;
    max-width: 120px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   SAFETY NET — force every page heading to respect the design tokens
   This catches any legacy CSS rule that hardcodes a font-size or
   uppercase transform on H1/H2/H3 inside an inner page. Excluded:
     • Home hero / chat / case-stud (have their own scale)
     • Eyebrows / labels / chips / nav  (intentional uppercase)
   ════════════════════════════════════════════════════════════════ */
body :is(h1, .heading--primary):not(.vxm-hero-new__title):not([class*="case-stud"]):not(.chat-bot-name):not(.help-center-h):not(.hc-title) {
  font-size: var(--vxm-fs-hero) !important;
  text-transform: none !important;
  line-height: 1.15 !important;
}

body :is(h2, .heading--secondary):not(.vxm-hero-new__title):not([class*="case-stud"]):not([class*="card__title"]):not(.help-center-h):not(.hc-title) {
  font-size: var(--vxm-fs-title) !important;
  text-transform: none !important;
  line-height: 1.2 !important;
}

/* H3: SUBSECTION title — smaller than H2 but distinctly bigger than
   body. Uses --vxm-fs-subhead (clamp 20→26px). This is the level for
   "Acceso exclusivo a clientes mayoristas", "Pedidos digitales", etc.
   Specificity kept LOW (body h3 = 0,0,2) so subheading/feat-row
   overrides below can win without needing inflated selectors. */
body h3 {
  font-size: var(--vxm-fs-subhead) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-transform: none !important;
}

body h4 {
  font-size: var(--vxm-fs-subtitle) !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

/* Restore intentional sizing for components that legitimately have
   their own H3 scale (card titles, case-stud, accordion). */
body .case-stud-heading,
body [class*="card__title"],
body .accordion__item-heading,
body .help-center-h,
body .hc-title,
body .vxm-home-feat-admin-title,
body .vxm-home-feat-grow-title,
body .vxm-home-feat-sellers-title,
body .vxm-home-feat-conditions-title,
body .vxm-home-feat-support-title,
body .vxm-home-feat-integ-title,
body .vxm-home-feat-struct-title {
  font-size: unset !important;  /* let component CSS own it */
}

/* H3/H4 inside SUBHEADING / LEAD / SUBTITLE / *-heading wrapper
   containers are NOT subsection titles — they're page-lead
   descriptors that the legacy markup wrapped in an H3 for SEO.
   Drop to subtitle (18px / 400 / line-height 1.5) so they read as
   descriptive copy, not as a heading.
   Includes the home's *-built-heading wrappers — the class name
   says "heading" but the content is a description. */
body [class*="-subheading"] h3,
body [class*="-subheading"] h4,
body [class*="-lead"] h3,
body [class*="-subtitle"] h3,
body [class*="-subtitle"] h4,
body .vxm-home-built-heading h3,
body .vxm-home-built-heading h4,
body .vxm-home-cta-heading h3,
body .vxm-home-cta-heading h4 {
  font-size: var(--vxm-fs-subtitle) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   UNIFIED CTA SYSTEM — mirror the home hero buttons across every
   inner page. The legacy template ships .button--primary /
   .button--secondary / .button--ink / .button--lg with their own
   look (gray, low-contrast borders); we override them site-wide so
   every CTA on every page reads as part of the same family as the
   home hero. Spec lifted from .vxm-hero-new__cta--{primary,secondary}.
   ════════════════════════════════════════════════════════════════ */

/* Base shape — every CTA. */
body .button.button--primary,
body .button.button--secondary,
body a.button--primary,
body a.button--secondary,
body button.button--primary,
body button.button--secondary,
body .button.button--lg,
body .button.button--md {
  font-family: Montserrat, sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 15px 40px !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  display: inline-block !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: all 0.3s ease !important;
  line-height: 1.2 !important;
  cursor: pointer;
}

/* PRIMARY — brand-blue solid (matches home hero primary). */
body .button.button--primary,
body a.button--primary,
body button.button--primary {
  background-color: var(--vxm-brand-blue) !important;
  background-image: none !important;
  color: #fafafa !important;
  border: 0 !important;
  box-shadow: 0 4px 15px rgba(71, 126, 207, 0.4) !important;
}

body .button.button--primary:hover,
body a.button--primary:hover,
body button.button--primary:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 30px rgba(71, 126, 207, 0.7),
              0 0 30px rgba(71, 126, 207, 0.4) !important;
  color: #fafafa !important;
}

/* SECONDARY — outline. On dark sections the legacy markup expects
   white border + white text; on light sections it expects dark.
   We detect via inverted ancestor as a heuristic; default = dark. */
body .button.button--secondary,
body a.button--secondary,
body button.button--secondary {
  background: transparent !important;
  color: var(--vxm-dark, #1A1A1A) !important;
  border: 2px solid var(--vxm-dark, #1A1A1A) !important;
  box-shadow: none !important;
  padding: 13px 38px !important;
}

body .button.button--secondary:hover,
body a.button--secondary:hover,
body button.button--secondary:hover {
  background: rgba(26, 26, 26, 0.06) !important;
  color: var(--vxm-dark, #1A1A1A) !important;
  transform: translateY(-3px);
}

/* When SECONDARY sits on a dark background (.inverted ancestor or
   common dark wrappers), flip to white outline. */
body .inverted .button.button--secondary,
body [class*="bg-dark"] .button.button--secondary,
body .vxm-dark-section .button.button--secondary,
body [class*="dnd_area-row-31"] .button.button--secondary,
body section[style*="background"] .button.button--secondary {
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}
body .inverted .button.button--secondary:hover,
body [class*="bg-dark"] .button.button--secondary:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* The legacy .button--ink class on FEATURE-ROW 'Saber Más' pills is
   already styled by home.css with the right outline pill geometry.
   Skip it here. */

/* ────────────────────────────────────────────────────────────
   MEGAMENU — kill the empty top strip on desktop dropdown.
   The legacy module sets `.mega-drop { top: var(--content-offset-
   desktop) }` but that variable resolves to nothing in our build,
   leaving a gap between the header bottom edge and the dropdown.
   Pin to 100% of the header so the dropdown opens flush. */
@media (min-width: 768px) {
  .header .menu-drop-panel.mega-drop,
  .header .mega-drop {
    top: 100% !important;
  }
  .header .mega-drop-wrapper {
    padding-top: 2rem !important;
    padding-bottom: 3rem !important;
  }
}

/* Page descriptor / lead paragraph that sits under a hero — pin to
   the subtitle token so they all read the same. */
body .s-page-header p,
body .vxm-hero-subtitle,
body .paragraph--lg.lead,
body .vxm-page-lead {
  font-size: var(--vxm-fs-subtitle) !important;
  line-height: 1.5 !important;
}

/* ──────────────────────────────────────────────────────────────
   BODY COPY NORMALIZATION
   The legacy 'paragraph--lg' / 'paragraph--md' wrappers around rich
   text rendered <p>/<li> at 21px and <strong> inside them at 18px —
   bolded text was SMALLER than the body it was supposed to highlight.
   Pin both to the body token (16px) and let <strong> read as
   weight: 700 inline. Same size, different weight = correct hierarchy. */
body .paragraph--lg p,
body .paragraph--lg li,
body .paragraph--md p,
body .paragraph--md li,
body .paragraph--sm p,
body .paragraph--sm li {
  font-size: var(--vxm-fs-body) !important;
  line-height: 1.6 !important;
}

body .paragraph--lg p strong,
body .paragraph--lg li strong,
body .paragraph--md p strong,
body .paragraph--md li strong {
  font-size: inherit !important;  /* match the surrounding paragraph */
  font-weight: 700 !important;
  color: var(--vxm-dark, #1A1A1A);
}

/* The 'lead' strong that opens a description block (like the bold
   first line in each feature description) — bump to subtitle 18px so
   it visually leads. Only when the <strong> is alone in its <p>. */
body .paragraph--lg > span > p > strong:only-child,
body .paragraph--lg > span > p strong:first-child {
  font-size: var(--vxm-fs-subtitle) !important;
}

/* Override legacy .text-18 class which forces 18px regardless of
   context — let it inherit from the paragraph above. */
body .text-18 {
  font-size: var(--vxm-fs-body) !important;
}
body .text-18 strong {
  font-size: var(--vxm-fs-subtitle) !important;
  font-weight: 700 !important;
}

/* Shared across 10 pages: administrar.html, alimentos-y-bebidas.html, autoseller.html */

.vxm-hero-buttons .btn-list {
  padding: 0;
}

/* Shared across 10 pages: administrar.html, alimentos-y-bebidas.html, autoseller.html */

.vxm-hero-buttons .button1 {
  background: linear-gradient(135deg, var(--vxm-gray-500) 0%, #777777 100%);
  color: var(--vxm-white);
  font-weight: bold;
  position: relative;
  overflow: hidden;
  border: none;
  box-shadow:
  0 4px 15px rgba(0, 0, 0, 0.2),
  0 0 20px rgba(153, 153, 153, 0.3),
  inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure button text is visible above animations */

.vxm-hero-buttons .button1 span {
  position: relative;
  z-index: 1;
}

/* Cosmic shimmer effect - always active */

.vxm-hero-buttons .button1::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
  60deg,
  transparent 0%,
  transparent 40%,
  rgba(255, 255, 255, 0.3) 50%,
  transparent 60%,
  transparent 100%
  );
  animation: cosmic-shimmer 3s linear infinite;
  pointer-events: none;
}

/* Starfield overlay - always active */

.vxm-hero-buttons .button1::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
  radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.9), transparent),
  radial-gradient(1px 1px at 60% 70%, rgba(255, 255, 255, 0.8), transparent),
  radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.7), transparent),
  radial-gradient(1px 1px at 80% 10%, rgba(255, 255, 255, 0.8), transparent),
  radial-gradient(1px 1px at 90% 60%, rgba(255, 255, 255, 0.9), transparent),
  radial-gradient(1px 1px at 33% 80%, rgba(255, 255, 255, 0.7), transparent);
  background-size: 200% 200%;
  background-position: 0% 0%;
  animation: starfield-drift 20s linear infinite;
  pointer-events: none;
  opacity: 0.6;
}

.vxm-hero-buttons .button1:hover,
.vxm-hero-buttons .button1:focus {
  background: linear-gradient(135deg, var(--vxm-brand-blue) 0%, #6B9AE8 50%, var(--vxm-brand-blue) 100%);
  box-shadow:
  0 6px 25px rgba(0, 191, 166, 0.4),
  0 0 40px rgba(0, 191, 166, 0.3),
  0 0 60px rgba(71, 126, 207, 0.2),
  inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px) scale(1.03);
}

.vxm-hero-buttons .button1:hover::before {
  animation: cosmic-shimmer 1.5s linear infinite;
}

.vxm-hero-buttons .button1:hover::after {
  opacity: 1;
  animation: starfield-drift 10s linear infinite;
}

.vxm-hero-buttons .button1:active {
  background: linear-gradient(135deg, #3A6AB5 0%, var(--vxm-brand-blue) 100%);
  transform: translateY(0) scale(1);
  box-shadow:
  0 2px 10px rgba(0, 191, 166, 0.5),
  0 0 20px rgba(0, 191, 166, 0.4),
  inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Keyframe animations */

@keyframes cosmic-shimmer {
  0% {
  transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
  transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

@keyframes starfield-drift {
  0% {
  background-position: 0% 0%;
  }
  100% {
  background-position: 100% 100%;
  }
}

/* Shared across 10 pages: administrar.html, alimentos-y-bebidas.html, autoseller.html */

.vxm-header-divider hr {
  border: 0 none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #666666;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
}

/* Shared across 10 pages: administrar.html, alimentos-y-bebidas.html, autoseller.html */

.vxm-footer .global-footer-outer {
  padding: 90px 0 0;
  margin-top: 0;
  margin-bottom: 0;
}

.vxm-footer .global-footer-outer .inner .col1 .quote p,
.vxm-footer
  .global-footer-outer
  .inner
  .col1
  .need-help-img
  .help-text
  .help-title
  p,
.vxm-footer .global-footer-outer .inner .col2 .loc-add p,
.vxm-footer
  .global-footer-outer
  .inner
  .col2
  .cont-links
  .cont-link
  .con-link
  a,
.vxm-footer
  .global-footer-outer
  .inner
  .col
  .co-menu
  .hs-menu-wrapper
  ul
  li
  a,
.vxm-footer .global-footer-outer .copyright p {
  color: var(--vxm-white);
  font-size: 15px;
  font-family: Montserrat, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.vxm-footer .global-footer-outer .inner .cont-links .type strong,
.vxm-footer .global-footer-outer .inner .cont-links .con-link a {
  color: var(--vxm-white);
}

.vxm-footer .global-footer-outer .inner .col1 .need-help-img .image img {
  border: 0 none;
  border-radius: 0;
}

.vxm-footer
  .global-footer-outer
  .inner
  .col1
  .need-help-img
  .help-text
  .help-link
  a {
  color: var(--vxm-white);
  font-size: 15px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.vxm-footer
  .global-footer-outer
  .inner
  .col1
  .need-help-img
  .help-text
  .help-link
  a:hover {
  color: var(--vxm-teal);
}

.vxm-footer .global-footer-outer .inner .col-title h4 {
  color: var(--vxm-white);
  font-size: 21px;
  font-family: Montserrat, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.vxm-footer .global-footer-outer .inner .col-title:before {
  background-color: var(--vxm-teal);
}

.vxm-footer .global-footer-outer .inner .col2 .loc-tit h5,
.vxm-footer .global-footer-outer .inner .col2 .contact-tit h5 {
  color: var(--vxm-white);
  font-size: 20px;
  font-family: Montserrat, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.vxm-footer
  .global-footer-outer
  .inner
  .col2
  .cont-links
  .cont-link
  .type
  h6 {
  color: var(--vxm-white);
  font-size: 18px;
  font-family: Montserrat, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.vxm-footer
  .global-footer-outer
  .inner
  .col2
  .cont-links
  .cont-link
  .con-link
  a:hover,
.vxm-footer
  .global-footer-outer
  .inner
  .col
  .co-menu
  .hs-menu-wrapper
  ul
  li
  a:hover {
  color: var(--vxm-brand-blue);
}

/* Shared across 10 pages: administrar.html, alimentos-y-bebidas.html, autoseller.html */

.vxm-footer-social .social-follow {
  margin-bottom: 20px;
  display: flex !important;
  justify-content: center !important;
  gap: 1.5rem !important;
  padding: 2rem 0 !important;
}

.vxm-footer-social .social-follow__link {
  padding: 0.75rem;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background:
  radial-gradient(circle at 30% 30%, rgba(40, 60, 120, 0.15), transparent 70%),
  rgba(15, 20, 45, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(100, 120, 180, 0.15) !important;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
  box-shadow:
  0 4px 20px rgba(0, 0, 0, 0.4),
  inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
}

.vxm-footer-social .social-links {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.vxm-footer-social .social-follow__link svg {
  color: var(--vxm-white);
  width: 20px !important;
  height: 20px !important;
  fill: rgba(220, 230, 255, 0.85) !important;
  transition: all 0.5s ease !important;
  position: relative !important;
  z-index: 1 !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

.vxm-footer-social .social-follow__link:hover svg,
.vxm-footer-social .social-follow__link:focus svg,
.vxm-footer-social .social-follow__link:active svg {
  color: rgba(26, 26, 26, 60%);
  fill: rgba(26, 26, 26, 60%);
}

/* Font declarations removed - using Google Fonts CDN from HTML */

/* Shared across 8 pages: administrar.html, alimentos-y-bebidas.html, autoseller.html */

.vxm-cta-btn .button-wrapper,
.vxm-feature-problems-btn .button-wrapper,
.vxm-feature-solutions-btn .button-wrapper,
.vxm-button-centered .button-wrapper {
  text-align: CENTER;
}

.vxm-cta-btn .button--featured:hover,
.vxm-hero-cta-btn .button--featured:hover,
.vxm-tabs-cta-btn .button--featured:hover,
.vxm-feature-problems-btn .button--featured:hover,
.vxm-feature-solutions-btn .button--featured:hover,
.vxm-button-centered .button--featured:hover,
.vxm-button-white-18 .button--featured:hover {
  box-shadow: 0 0;
}

.vxm-hero-cta-btn .button,
.vxm-feature-problems-btn .button,
.vxm-feature-solutions-btn .button,
.vxm-button-centered .button {
  color: var(--vxm-white);
  font-weight: bold;
}

/* Shared across 2 pages: alimentos-y-bebidas.html, calzado.html */

.vxm-tabs .hs-tabs-wrapper,
.vxm-tabs-primary .hs-tabs-wrapper {
  margin-top: 0;
  margin-bottom: 30px;
}

.vxm-tabs .hs-tabs__tab,
.vxm-tabs-primary .hs-tabs__tab {
  padding: 10px;
}

.vxm-tabs .hs-tabs__tab[aria-selected="true"],
.vxm-tabs-primary .hs-tabs__tab[aria-selected="true"] {
  border-top: 1px solid var(--vxm-teal);
  border-left: 1px solid var(--vxm-teal);
  border-right: 1px solid var(--vxm-teal);
  border-bottom: 2px solid var(--vxm-black);
  background-color: var(--vxm-teal);
}

.vxm-tabs .hs-tabs__tab[aria-selected="true"]:after,
.vxm-tabs .hs-tabs__tab[aria-selected="false"]:hover:after,
.vxm-tabs .hs-tabs__tab[aria-selected="false"]:focus:after,
.vxm-tabs-primary .hs-tabs__tab[aria-selected="true"]:after,
.vxm-tabs-primary .hs-tabs__tab[aria-selected="false"]:hover:after,
.vxm-tabs-primary .hs-tabs__tab[aria-selected="false"]:focus:after {
  border-bottom: 2px solid var(--vxm-black);
}

.vxm-tabs .hs-tabs__tab[aria-selected="false"],
.vxm-tabs-primary .hs-tabs__tab[aria-selected="false"] {
  border-top: 1px solid var(--vxm-gray-400);
  border-left: 1px solid var(--vxm-gray-400);
  border-right: 1px solid var(--vxm-gray-400);
  border-bottom: 2px solid var(--vxm-gray-400);
}

.vxm-tabs .hs-tabs__tab[aria-selected="false"]:after,
.vxm-tabs-primary .hs-tabs__tab[aria-selected="false"]:after {
  border-bottom: 2px solid var(--vxm-gray-400);
}

.vxm-tabs .hs-tabs__tab[aria-selected="false"]:hover,
.vxm-tabs .hs-tabs__tab[aria-selected="false"]:focus,
.vxm-tabs-primary .hs-tabs__tab[aria-selected="false"]:hover,
.vxm-tabs-primary .hs-tabs__tab[aria-selected="false"]:focus {
  border-top: 1px solid var(--vxm-gray-400);
  border-left: 1px solid var(--vxm-gray-400);
  border-right: 1px solid var(--vxm-gray-400);
  border-bottom: 2px solid var(--vxm-black);
}

.vxm-tabs .hs-tabs__content,
.vxm-tabs-primary .hs-tabs__content {
  border: 2px solid var(--vxm-brand-blue);
  background-color: var(--vxm-white);
}

.vxm-tabs .hs-tabs__content__panel,
.vxm-tabs-primary .hs-tabs__content__panel {
  margin-right: -100%;
  visibility: hidden;
}

.vxm-tabs .hs-tabs__content__panel--visible,
.vxm-tabs-primary .hs-tabs__content__panel--visible {
  visibility: visible;
}

.vxm-tabs-cta-btn .button,
.vxm-button-white-18 .button {
  color: var(--vxm-white);
  font-size: 18px;
  font-weight: bold;
}

/* Shared across 2 pages: alimentos-y-bebidas.html, calzado.html */

/* Shared across 2 pages: alimentos-y-bebidas.html, calzado.html */

/* Shared across 2 pages: alimentos-y-bebidas.html, calzado.html */

.vxm-logo-slider .jake-logo-slider,
.vxm-logo-slider .jake-logo-slider .swiper-slide {
  background: rgba(255, 255, 255, 0%);
  border-radius: 0;
}

.vxm-logo-slider .swiper-pagination {
  position: static;
  padding-bottom: 20px;
}

.vxm-logo-slider .swiper-pagination-bullet {
  opacity: 1;
  background-color: var(--vxm-gray-500);
  width: 12px;
  height: 12px;
  padding: 6px;
  box-sizing: content-box;
}

.vxm-logo-slider .swiper-pagination-bullet-active,
.vxm-logo-slider .swiper-scrollbar-drag {
  background-color: var(--vxm-brand-blue);
}

.vxm-logo-slider .swiper-button-next,
.vxm-logo-slider .swiper-button-prev {
  color: var(--vxm-gray-500);
}

.vxm-logo-slider .swiper-button-next:hover,
.vxm-logo-slider .swiper-button-prev:hover {
  color: var(--vxm-brand-blue);
}

.vxm-logo-slider .swiper-wrapper {
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  align-items: center;
}

.vxm-logo-slider .jake-logo-slider__swiper {
  position: relative;
  overflow: hidden;
}

.vxm-logo-slider .jake-logo-slider__swiper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 100%;
  background: linear-gradient(to right, var(--vxm-white), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 2;
}

.vxm-logo-slider .jake-logo-slider__swiper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 100%;
  background: linear-gradient(to left, var(--vxm-white), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 2;
}

/* Mobile responsive adjustments */

/* ===================================================================
   REUSABLE COMPONENT STYLES - SHARED ACROSS MULTIPLE PAGES
   Centralized from 31 inline CSS files to reduce duplication

   Usage: Add vxm-* classes to HTML elements for shared styling
   =================================================================== */

/* -------------------------------------------------------------------
   BUTTON COMPONENTS
   ------------------------------------------------------------------- */

/* Centered button with white text and bold font - Used on 12 pages */


/* -------------------------------------------------------------------
   VIDEO/MEDIA COMPONENTS
   ------------------------------------------------------------------- */

/* White video thumbnail icon - Used on 7 pages */

.vxm-video-icon-white .oembed_custom-thumbnail_icon svg {
  fill: var(--vxm-white);
}

/* -------------------------------------------------------------------
   TABS COMPONENT - PRIMARY STYLE
   Used on: alimentos-y-bebidas, bazar-deco-regalos, ferreteria-y-construccion, libreriayoficina
   ------------------------------------------------------------------- */


@media only screen and (min-width: 220px) and (max-width: 767px) {

.vxm-footer .global-footer-outer {
  padding: 30px 0 0;
  margin-top: 0;
  margin-bottom: 0;
}

.vxm-footer .global-footer-outer .inner .col1 .quote p,
.vxm-footer
    .global-footer-outer
    .inner
    .col1
    .need-help-img
    .help-text
    .help-title
    p,
.vxm-footer
    .global-footer-outer
    .inner
    .col1
    .need-help-img
    .help-text
    .help-link
    a,
.vxm-footer .global-footer-outer .inner .col2 .loc-tit h5,
.vxm-footer .global-footer-outer .inner .col2 .loc-add p,
.vxm-footer .global-footer-outer .inner .col2 .contact-tit h5,
.vxm-footer
    .global-footer-outer
    .inner
    .col2
    .cont-links
    .cont-link
    .con-link
    a,
.vxm-footer
    .global-footer-outer
    .inner
    .col
    .co-menu
    .hs-menu-wrapper
    ul
    li
    a,
.vxm-footer .global-footer-outer .copyright p {
  font-size: 15px;
}

.vxm-footer .global-footer-outer .inner .col-title h4 {
  font-size: 21px;
}

.vxm-footer
    .global-footer-outer
    .inner
    .col2
    .cont-links
    .cont-link
    .type
    h6 {
  font-size: 14px;
}

}


@media only screen and (min-width: 768px) {

.vxm-footer-social .social-links {
  justify-content: center;
}

}


@media only screen and (min-width: 768px) and (max-width: 1024px) {

.vxm-footer .global-footer-outer {
  padding: 90px 0 0;
  margin-top: 0;
  margin-bottom: 0;
}

}


@media (max-width: 767px) {

.global_footer_by_growmeda.inner {
  flex-direction: column !important;
  gap: 2rem !important;
  padding: 3rem 0 !important;
}

.global_footer_by_growmeda.col1,
  .global_footer_by_growmeda.col2,
  .global_footer_by_growmeda.cold1,
  .global_footer_by_growmeda.cold2 {
  flex: 1 1 100% !important;
}

.vxm-footer-social .social-follow {
  gap: 1rem !important;
}

}


@media (max-width: 568px) {

.hs-featured-image {
  float: none;
  margin: 0;
  width: 100%;
  max-width: 100%;
}

}

/* Shared rules extracted from individual page CSS files */

.vxm-main-content {
  color: rgba(26, 26, 26, 60%) !important;
  display: block !important;
}

.vxm-main-content p,
.vxm-main-content li,
.vxm-main-content span,
.vxm-main-content label,
.vxm-main-content h1,
.vxm-main-content h2,
.vxm-main-content h3,
.vxm-main-content h4,
.vxm-main-content h5,
.vxm-main-content h6 {
  color: rgba(26, 26, 26, 60%) !important;
}

.vxm-cta-row-margin {
  margin-bottom: 1rem !important;
}

.vxm-cta-label,
.vxm-cta-heading {
  color: var(--vxm-white) !important;
  display: block !important;
}

.vxm-cta-label p,
.vxm-cta-label li,
.vxm-cta-label span,
.vxm-cta-label label,
.vxm-cta-label h1,
.vxm-cta-label h2,
.vxm-cta-label h3,
.vxm-cta-label h4,
.vxm-cta-label h5,
.vxm-cta-label h6,
.vxm-cta-heading p,
.vxm-cta-heading li,
.vxm-cta-heading span,
.vxm-cta-heading label,
.vxm-cta-heading h1,
.vxm-cta-heading h2,
.vxm-cta-heading h3,
.vxm-cta-heading h4,
.vxm-cta-heading h5,
.vxm-cta-heading h6 {
  color: var(--vxm-white) !important;
}

.vxm-hero-header-padding {
  padding-bottom: 1rem !important;
}

.vxm-section-1-padding {
  padding-top: 3rem !important;
}

.main_content-row-6-margin {
  margin-bottom: -100px !important;
}

.main_content-row-0-background-layers,
.main_content-row-4-background-layers {
  background-image: linear-gradient(var(--vxm-dark), var(--vxm-dark)) !important;
  background-position: left top !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
}

.main_content-row-3-background-layers,
.main_content-row-5-background-layers {
  background-image: linear-gradient(var(--vxm-white), var(--vxm-white)) !important;
  background-position: left top !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
}

.main_content-row-6-background-layers {
  background-image: linear-gradient(var(--vxm-brand-blue), var(--vxm-brand-blue)) !important;
  background-position: left top !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
}

.vxm-logo-slider-margin {
  margin-bottom: 0.5rem !important;
}

.vxm-section-2-padding {
  padding-top: 1rem !important;
  padding-bottom: 3rem !important;
}

.vxm-video-player {
  display: block !important;
  padding-bottom: 20px !important;
}

/* ── Off-screen rendering optimization ── */
#main-content > .row-fluid-wrapper > .row-fluid > .row-fluid-wrapper.dnd-section:nth-child(n+4) {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* ── Feature section text ── */

.vxm-fs-label,
.vxm-fs-heading {
  color: var(--vxm-white) !important;
  display: block !important;
}

.vxm-fs-label p,
.vxm-fs-label li,
.vxm-fs-label span,
.vxm-fs-label label,
.vxm-fs-label h1,
.vxm-fs-label h2,
.vxm-fs-label h3,
.vxm-fs-label h4,
.vxm-fs-label h5,
.vxm-fs-label h6,
.vxm-fs-heading p,
.vxm-fs-heading li,
.vxm-fs-heading span,
.vxm-fs-heading label,
.vxm-fs-heading h1,
.vxm-fs-heading h2,
.vxm-fs-heading h3,
.vxm-fs-heading h4,
.vxm-fs-heading h5,
.vxm-fs-heading h6 {
  color: var(--vxm-white) !important;
}

.vxm-fp-label,
.vxm-fp-heading {
  color: var(--vxm-dark) !important;
  display: block !important;
}

.vxm-fp-label p,
.vxm-fp-label li,
.vxm-fp-label span,
.vxm-fp-label label,
.vxm-fp-label h1,
.vxm-fp-label h2,
.vxm-fp-label h3,
.vxm-fp-label h4,
.vxm-fp-label h5,
.vxm-fp-label h6,
.vxm-fp-heading p,
.vxm-fp-heading li,
.vxm-fp-heading span,
.vxm-fp-heading label,
.vxm-fp-heading h1,
.vxm-fp-heading h2,
.vxm-fp-heading h3,
.vxm-fp-heading h4,
.vxm-fp-heading h5,
.vxm-fp-heading h6 {
  color: var(--vxm-dark) !important;
}

/* ── Flex positioning (shared across all pages) ── */

.vxm-cta-label-flex,
.vxm-cta-heading-flex,
.vxm-cta-btn-flex,
.vxm-feature-problems-img-flex,
.vxm-feature-solutions-img-flex,
.vxm-hero-action-flex {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start;
}

.vxm-cta-label-flex > div,
.vxm-cta-heading-flex > div,
.vxm-cta-btn-flex > div,
.vxm-feature-problems-img-flex > div,
.vxm-feature-solutions-img-flex > div,
.vxm-hero-action-flex > div {
  max-width: 100%;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   Utility Classes (extracted from inline styles)
   ========================================================================== */
.text-18 { font-size: 18px; }
.text-16 { font-size: 16px; }
.text-white { color: #ffffff; }
.font-bold { font-weight: bold; }
.text-center { text-align: center; }
.bg-transparent { background-color: transparent; }
/* === assets/css/global-header.css === */
.vxm-header-logo .logo {
  max-width: 120px;
  margin-top: 0;
  margin-bottom: -200px;
}
/* === assets/module_mega-menu.min.css === */
.main-nav-list{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;width:100%}.main-nav__item{cursor:pointer;display:inline-block;flex-grow:0;line-height:1;margin-left:.45em;margin-right:.45em;padding:.5em 0 .5em 1.25em;position:relative}.main-nav__item,.main-nav__item button{font-size:1.33rem}.main-nav__item a,.main-nav__item>button{color:var(--header-nav-color);fill:var(--header-nav-color);font-style:normal;font-weight:400;text-decoration:none}.main-nav__item a:hover,.main-nav__item>button:hover{color:var(--header-nav-color-hover)}.main-nav__item button{display:flex;padding:.5em 0;text-align:inherit}.main-nav__item button:hover *{color:var(--header-nav-color-hover);fill:var(--header-nav-color-hover)}.main-nav__item.menu-drop{padding:0;position:static;transition:var(--transition)}.main-nav__item.mega-link{position:static}.mega-link>a{align-items:center;display:flex;position:relative}.mega-link .main-nav__item-label{color:var(--header-nav-color);font-weight:400}.mega-drop{left:0;position:static;top:var(--content-offset-desktop);width:100vw;z-index:9}.mega-drop__item{display:block}.mega-drop__item img{display:none}.mega-drop__item p{display:none;margin:0}.menu-drop-panel{height:0;overflow:hidden;transition-property:height,visibility;transition-timing-function:ease;visibility:hidden}.menu-drop.is-active .menu-drop-panel{visibility:visible}.main-nav__item-icon{display:inline-block;margin-right:.2em;transition:var(--transition);width:1em}.drop-link .main-nav__item-icon,.mega-link .main-nav__item-icon{color:var(--header-nav-color)}.drop-link.is-active .main-nav__item-icon,.mega-link.is-active .main-nav__item-icon{transform:translateY(2px) rotate(180deg)}.sub-menu-drop{height:0;position:static}.sub-menu-drop li{padding-left:1rem}.sub-menu-drop a{display:block;padding-bottom:.8em;padding-top:.8em}@media screen and (max-width:767px){.main-nav__item.is-active .mega-drop{display:block}.main-nav__item.drop-link,.main-nav__item.mega-link{padding-left:1.25em}.mega-drop__item h5{display:block;padding-bottom:.8em;padding-top:.8em}.mega-drop__item h5,.sub-menu-drop a{color:var(--header-nav-color);font-size:1rem;font-weight:400}.mega-drop__item:hover h5,.sub-menu-drop a:hover{color:var(--header-nav-color-hover)}.sub-menu-drop li:last-of-type{padding-bottom:1rem}}@media screen and (min-width:768px){.main-nav-list{align-items:center;background-color:transparent;display:flex;flex-direction:row;height:auto;justify-content:center;position:static}.main-nav__item{font-size:.89rem;padding:.2em 0}.main-nav__item button{font-size:.875rem;padding-bottom:.25em;padding-top:.25em}.main-nav__item-icon{margin-right:0}.main-nav__item.is-active>button *{color:var(--header-nav-color-hover);fill:var(--header-nav-color-hover)}.mega-link.is-active{box-shadow:0 1px var(--dark-primary)}.mega-link.is-active .main-nav__item-icon{transform:translateY(1px) rotate(180deg)}.mega-drop{position:absolute}.mega-drop-wrapper{background-color:var(--mega-menu-bg);padding-bottom:4rem;padding-top:3rem}.mega-drop-container{display:flex;flex-wrap:wrap}.mega-drop__item{max-width:300px;padding:1.875rem}.mega-drop__item:hover{background-color:var(--mega-menu-item-hover)}.mega-drop__item img{display:block;flex-shrink:0;margin-right:1.875rem;max-width:60px}.mega-drop__item p{color:var(--mega-menu-text-color);display:block}.mega-drop__item-text h5{color:var(--mega-menu-title-color);flex-shrink:0}.mega-drop__item-text p{color:var(--mega-menu-text-color)}.main-nav__item:hover .sub-menu-drop{display:block}.sub-menu-drop{background-color:var(--mega-menu-bg);position:absolute;top:var(--content-offset-desktop);width:180px;z-index:9}.sub-menu-drop li{padding-left:1.5rem}.sub-menu-drop li:first-of-type{margin-top:1rem}.sub-menu-drop li:last-of-type{margin-bottom:1rem}.sub-menu-drop li a{color:var(--mega-menu-title-color);font-size:.89rem}.sub-menu-drop li:hover{background-color:var(--mega-menu-item-hover)}}@media only screen and (min-width:860px){.main-nav__item{font-size:.89rem;margin-left:1em;margin-right:1em}}@media only screen and (min-width:990px){.main-nav__item,.main-nav__item button{font-size:1rem}}
/* === assets/css/megamenu-2026.css === */
/* ════════════════════════════════════════════════════════════════
   VXM MEGAMENU 2026 — premium dark-glass panel
   Replaces the legacy HubSpot mega-menu module visuals while
   keeping the same outer DOM hooks (.mega-drop, .mega-drop-wrapper,
   .mega-drop-container, .mega-drop__item) so the legacy
   open/close JS still fires. Everything inside is new markup.

   Three-tier structure:
   • Eyebrow strip (label + "ver todo →")
   • Product cards row (5 cards, NEW badge support)
   • Two-column footer (use cases + resources lists)
   • Bottom strip (quick links + demo CTA)
   ════════════════════════════════════════════════════════════════ */

/* === Override legacy CSS variables — light theme.
   Panel is pure white #FFFFFF, all text is brand dark #1A1A1A.
   Borders/dividers/hovers use very low-alpha black so they read as
   crisp on white without becoming heavy. */
:root {
  --mega-menu-bg: #FFFFFF;
  --mega-menu-title-color: #1A1A1A;
  --mega-menu-text-color: rgba(26, 26, 26, 0.62);
  --mega-menu-item-hover: rgba(26, 26, 26, 0.04);
  --mega-menu-border: rgba(26, 26, 26, 0.08);

  /* Local tokens for the new megamenu — light theme */
  --vxm-mm-panel-bg: #FFFFFF;
  --vxm-mm-card-bg: rgba(26, 26, 26, 0.025);
  --vxm-mm-card-hover: rgba(26, 26, 26, 0.05);
  --vxm-mm-card-active: rgba(71, 126, 207, 0.08);
  --vxm-mm-divider: rgba(26, 26, 26, 0.08);
  --vxm-mm-eyebrow: rgba(26, 26, 26, 0.50);
  --vxm-mm-title: #1A1A1A;
  --vxm-mm-body: rgba(26, 26, 26, 0.62);
  --vxm-mm-accent: var(--vxm-brand-blue, #477ECF);
  --vxm-mm-radius-panel: 18px;
  --vxm-mm-radius-card: 12px;
  --vxm-mm-anim: 140ms;
  --vxm-mm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* === PANEL (the dropdown itself) === */
.header .menu-drop-panel.mega-drop,
.header .mega-drop {
  /* Fast snappy open/close — legacy used CSS display toggling so
     the actual fade is handled by these transitions on the wrapper. */
  z-index: 50 !important;
}

/* === PURE-CSS hover/active snap — overrides legacy height:0 JS dance.
   The legacy module gates visibility on a JS-toggled .is-active class
   that adds 200-300ms of latency before the panel even starts to
   appear. We hijack the parent li:hover state so the panel opens
   the instant the cursor reaches the trigger — no JS in the path. */
@media (min-width: 768px) {
  /* Default: panel exists but is hidden via display:none.
     Switch to display:block only when the parent li has either
     :hover, :focus-within, or our custom .vxm-mm-open class.
     We don't use opacity here because the legacy module sets an
     inline transition-duration that fights us; display toggling
     is snappy enough at 140ms anyway. */
  .header li.menu-drop > .menu-drop-panel.mega-drop,
  .header .main-nav__item.menu-drop > .menu-drop-panel.mega-drop {
    height: auto !important;
    overflow: visible !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
    transition: none !important;
  }

  .header li.menu-drop:hover > .menu-drop-panel.mega-drop,
  .header li.menu-drop:focus-within > .menu-drop-panel.mega-drop,
  .header li.menu-drop.vxm-mm-open > .menu-drop-panel.mega-drop,
  .header .main-nav__item.menu-drop:hover > .menu-drop-panel.mega-drop,
  .header .main-nav__item.menu-drop:focus-within > .menu-drop-panel.mega-drop,
  .header .main-nav__item.menu-drop.vxm-mm-open > .menu-drop-panel.mega-drop {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* When user clicks the trigger to CLOSE the dropdown, the JS adds
     .vxm-mm-suppress-hover. While that class is on, force the panel
     to stay hidden even if the cursor is still hovering the trigger.
     The class is cleared by JS on the next `mouseleave`, so the
     next deliberate hover opens the panel normally again. */
  .header li.menu-drop.vxm-mm-suppress-hover > .menu-drop-panel.mega-drop,
  .header .main-nav__item.menu-drop.vxm-mm-suppress-hover > .menu-drop-panel.mega-drop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* The wrapper inside handles the snappy slide-in animation via
     keyframes — that's the visible motion the user sees. The panel
     itself just toggles display:none/block which has no transition. */

  /* Make sure all the new content inside is always visible when the
     panel is open — avoids any inherited visibility:hidden from the
     legacy .menu-drop-panel base rule. Both hover-open AND
     click-pinned (.vxm-mm-open) states must cascade visibility. */
  .header li.menu-drop:hover .mega-drop *,
  .header li.menu-drop:focus-within .mega-drop *,
  .header li.menu-drop.vxm-mm-open .mega-drop * {
    visibility: visible !important;
  }
}

@media (min-width: 768px) {
  .header .menu-drop-panel.mega-drop,
  .header .mega-drop {
    top: 100% !important;
    /* Subtle inner shadow line under the header so the floating
       panel reads as detached from the nav bar. */
    padding: 0 !important;
    background: transparent !important;
  }

  /* Make the WRAPPER the visible floating card — centered, rounded,
     elevated, with the light-paper treatment. Shadow is softer than
     the dark version because the panel itself reads naturally on
     light surroundings. */
  .header .mega-drop-wrapper {
    background: var(--vxm-mm-panel-bg) !important;
    background-image:
      radial-gradient(120% 60% at 50% 0%,
        rgba(71, 126, 207, 0.04) 0%, transparent 60%);
    border: 1px solid var(--vxm-mm-divider);
    border-radius: var(--vxm-mm-radius-panel) !important;
    padding: 22px 24px 18px !important;
    margin: 14px auto 0 !important;
    max-width: min(1180px, calc(100vw - 32px));
    box-shadow:
      0 28px 70px -16px rgba(26, 26, 26, 0.18),
      0 8px 24px -8px rgba(26, 26, 26, 0.08);
    /* Snappy entrance */
    animation: vxm-mm-in var(--vxm-mm-anim) var(--vxm-mm-ease);
    transform-origin: top center;
  }
}

@keyframes vxm-mm-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Smoothly accelerate the legacy show/hide cascade by zeroing
   any inherited transition delays on hover-triggered subtrees. */
.header .mega-drop,
.header .mega-drop * {
  transition-delay: 0ms !important;
}

/* === EYEBROW STRIP (top row label + ver-todo link) === */
.vxm-mm__eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 6px 14px;
  border-bottom: 1px solid var(--vxm-mm-divider);
  margin-bottom: 14px;
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vxm-mm__eyebrow-label {
  color: var(--vxm-mm-eyebrow);
  font-weight: 600;
}
.vxm-mm__eyebrow-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vxm-mm-accent);
  margin-right: 8px;
  vertical-align: middle;
  transform: translateY(-1px);
}

.vxm-mm__eyebrow-link {
  color: rgba(26, 26, 26, 0.80);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  transition: background var(--vxm-mm-anim) var(--vxm-mm-ease),
              color var(--vxm-mm-anim);
}
.vxm-mm__eyebrow-link:hover {
  background: rgba(26, 26, 26, 0.05);
  color: #1A1A1A;
}
.vxm-mm__eyebrow-link::after {
  content: "→";
  font-size: 14px;
  letter-spacing: 0;
  transition: transform var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-mm__eyebrow-link:hover::after {
  transform: translateX(3px);
}

/* === PRODUCT CARDS ROW (top row of premium icon/image cards) === */
.vxm-mm__cards {
  display: grid;
  grid-template-columns: repeat(var(--vxm-mm-cards, 5), minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

/* Override legacy .mega-drop-container flex so the new grid wins */
.header .mega-drop-container.vxm-mm__cards {
  display: grid !important;
  flex-wrap: nowrap !important;
}

/* Each card — quiet by default, lifts and accents on hover */
.vxm-mm-card {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 14px 14px 14px !important;
  max-width: none !important;
  min-height: 0;
  background: var(--vxm-mm-card-bg) !important;
  border: 1px solid rgba(26, 26, 26, 0.06);
  border-radius: var(--vxm-mm-radius-card);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition:
    background var(--vxm-mm-anim) var(--vxm-mm-ease),
    border-color var(--vxm-mm-anim) var(--vxm-mm-ease),
    box-shadow var(--vxm-mm-anim) var(--vxm-mm-ease),
    transform var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-mm-card:hover {
  background: #FFFFFF !important;
  border-color: rgba(71, 126, 207, 0.30);
  box-shadow: 0 8px 20px -8px rgba(26, 26, 26, 0.12);
  transform: translateY(-1px);
}

/* Icon chip — small rounded square, lights up brand-blue on hover */
.vxm-mm-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(26, 26, 26, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--vxm-mm-accent);
  flex-shrink: 0;
  transition: background var(--vxm-mm-anim) var(--vxm-mm-ease),
              color var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-mm-card__icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vxm-mm-card:hover .vxm-mm-card__icon {
  background: var(--vxm-mm-accent);
  color: #FFFFFF;
}

/* Image-card variant — image fills top, text below (Soluciones rubros).
   Force `align-items: stretch` to override the base card's
   `align-items: flex-start` so the image holder spans the full card
   width and `object-fit: cover` actually crops correctly instead of
   leaving the image at its natural 240×150 dimensions. */
.vxm-mm-card--image {
  padding: 0 !important;
  align-items: stretch !important;
}
.vxm-mm-card__img {
  position: relative;
  display: block;
  width: 100%;
  align-self: stretch;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: rgba(26, 26, 26, 0.04);
  border-radius: var(--vxm-mm-radius-card) var(--vxm-mm-radius-card) 0 0;
}
.vxm-mm-card__img img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform calc(var(--vxm-mm-anim) * 2) var(--vxm-mm-ease);
}
.vxm-mm-card:hover .vxm-mm-card__img img {
  transform: scale(1.04);
}

/* Per-rubro crop focus — the source images are portrait shots with
   the subject in different parts of the frame. Override
   object-position so each one crops to its "hero" element. */
.vxm-mm-card__img img[src*="indumentaria"]     { object-position: center 22%; }
.vxm-mm-card__img img[src*="calzado"]          { object-position: center 35%; }
.vxm-mm-card__img img[src*="bazar"]            { object-position: center 40%; }
.vxm-mm-card__img img[src*="alimentos"]        { object-position: center 50%; }
.vxm-mm-card__img img[src*="tecnologia"]       { object-position: center 50%; }
.vxm-mm-card__img img[src*="cosmetica"]        { object-position: center 35%; }
.vxm-mm-card__img img[src*="libreria"]         { object-position: center 45%; }
.vxm-mm-card__img img[src*="ferreteria"]       { object-position: center 50%; }

.vxm-mm-card--image .vxm-mm-card__body {
  padding: 12px 14px 14px;
}

/* Card body text */
.vxm-mm-card__title,
.vxm-mm-card h5 {
  font-family: Montserrat, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--vxm-mm-title) !important;
  margin: 0 0 4px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em;
  padding: 0 !important;
  text-transform: none !important;
}

.vxm-mm-card__desc,
.vxm-mm-card p {
  font-family: Montserrat, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--vxm-mm-body) !important;
  margin: 0 !important;
  line-height: 1.45 !important;
  display: block !important;
  /* Cap description to 2 lines so cards stay equal-height */
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* NEW badge — pill at top-right of card. On light theme the pill
   is teal solid with white text for a punchy accent that survives
   the white card background. */
.vxm-mm-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: Montserrat, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4DC6BE 0%, #2FA8A0 100%);
  color: #FFFFFF;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(77, 198, 190, 0.28);
}
.vxm-mm-card--image .vxm-mm-card__badge {
  top: 10px;
  right: 10px;
  background: rgba(26, 26, 26, 0.86);
  color: #4DC6BE;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* === TWO-COLUMN FOOTER (use cases + resources lists) === */
.vxm-mm__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 16px 6px 10px;
  border-top: 1px solid var(--vxm-mm-divider);
}

.vxm-mm__col-label {
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--vxm-mm-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}

.vxm-mm__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 16px;
}

.vxm-mm__list-item {
  display: block;
  text-decoration: none;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 8px;
  transition: background var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-mm__list-item:hover {
  background: var(--vxm-mm-card-hover);
}

.vxm-mm__list-item-title {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vxm-mm-title);
  line-height: 1.3;
  margin: 0 0 2px;
}
.vxm-mm__list-item-title::after {
  content: "  ↗";
  opacity: 0;
  color: var(--vxm-mm-accent);
  transition: opacity var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-mm__list-item:hover .vxm-mm__list-item-title::after {
  opacity: 1;
}

.vxm-mm__list-item-desc {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--vxm-mm-body);
  line-height: 1.4;
  margin: 0;
}

/* === BOTTOM STRIP (secondary links + CTA) === */
.vxm-mm__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 12px 6px 2px;
  border-top: 1px solid var(--vxm-mm-divider);
}

.vxm-mm__strip-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.vxm-mm__strip-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-family: Montserrat, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--vxm-mm-body);
  text-decoration: none;
  border-radius: 8px;
  transition: background var(--vxm-mm-anim) var(--vxm-mm-ease),
              color var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-mm__strip-link:hover {
  background: var(--vxm-mm-card-hover);
  color: #1A1A1A;
}
.vxm-mm__strip-link svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  opacity: 0.6;
}

.vxm-mm__strip-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: #1A1A1A;
  color: #FFFFFF !important;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: transform var(--vxm-mm-anim) var(--vxm-mm-ease),
              box-shadow var(--vxm-mm-anim) var(--vxm-mm-ease),
              background var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-mm__strip-cta:hover {
  background: var(--vxm-mm-accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(71, 126, 207, 0.28);
}
.vxm-mm__strip-cta::after {
  content: "→";
  font-weight: 700;
  transition: transform var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-mm__strip-cta:hover::after {
  transform: translateX(3px);
}

/* === RESPONSIVE COLLAPSE — narrow tablet stacks cards 3-up, mobile 1-up === */
@media (max-width: 1024px) and (min-width: 768px) {
  .header .mega-drop-wrapper {
    max-width: calc(100vw - 24px) !important;
    padding: 18px 18px 14px !important;
  }
  .vxm-mm__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vxm-mm__bottom { gap: 16px; }
  .vxm-mm__list { grid-template-columns: 1fr; }
}

/* === MOBILE — render the megamenu as a white card-block sitting
       inside the dark legacy drawer. Keeps the new light theme
       consistent with desktop and gives clear separation from the
       dark drawer background. */
@media (max-width: 767px) {
  /* Closed-state: invisible + height 0, no scroll cost */
  .header li.menu-drop > .menu-drop-panel.mega-drop {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  /* Opened via tap on the trigger (legacy .is-active) OR via our
     own .vxm-mm-open class — both reveal the accordion-style panel
     in normal flow under the trigger. */
  .header li.menu-drop.is-active > .menu-drop-panel.mega-drop,
  .header li.menu-drop.vxm-mm-open > .menu-drop-panel.mega-drop {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
    width: auto !important;
    background: transparent !important;
  }
  /* Force all child content visible — kills legacy visibility:hidden */
  .header li.menu-drop.is-active .mega-drop *,
  .header li.menu-drop.vxm-mm-open .mega-drop * {
    visibility: visible !important;
  }
  .header .menu-drop-panel.mega-drop,
  .header .mega-drop {
    background: transparent !important;
  }
  .header .mega-drop-wrapper {
    background: var(--vxm-mm-panel-bg) !important;
    border: 1px solid var(--vxm-mm-divider) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.30) !important;
    margin: 4px 12px 16px !important;
    padding: 14px 14px 12px !important;
    max-width: calc(100% - 24px) !important;
    animation: none;
  }
  .vxm-mm__eyebrow {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 4px 10px;
    margin-bottom: 8px;
  }
  .vxm-mm__eyebrow-label {
    font-size: 11px;
    line-height: 1.3;
  }
  .vxm-mm__eyebrow-link {
    font-size: 11px;
    padding: 2px 6px;
  }
  .vxm-mm__cards {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  /* Mobile cards use CSS Grid (NOT flex) so the title gets the
     entire right column instead of being shrunk into a flex sliver
     between the icon and the description. Layout:
       [ICON]  Title
               Description (2-line clamp)
     This kills the broken "Plataf / orma" wrapping. */
  .vxm-mm-card {
    display: grid !important;
    grid-template-columns: 32px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: start;
    padding: 14px !important;
  }
  .vxm-mm-card__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    margin: 2px 0 0 !important;
  }
  .vxm-mm-card__title {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    line-height: 1.25 !important;
  }
  .vxm-mm-card__desc {
    grid-column: 2;
    grid-row: 2;
    margin: 0 !important;
    -webkit-line-clamp: 2;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }
  /* NEW badge needs space on the right — pull it out of the grid */
  .vxm-mm-card__badge {
    top: 8px !important;
    right: 8px !important;
  }

  /* Image cards revert to a vertical stack (image on top, body
     below) — they don't fit the icon-grid pattern. */
  .vxm-mm-card--image {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
    grid-template-columns: none !important;
  }
  .vxm-mm-card--image .vxm-mm-card__img {
    aspect-ratio: 16 / 9;
    width: 100% !important;
  }
  .vxm-mm-card--image .vxm-mm-card__body {
    padding: 12px 14px 14px;
  }
  .vxm-mm-card--image .vxm-mm-card__title {
    grid-column: auto;
    grid-row: auto;
  }
  .vxm-mm-card--image .vxm-mm-card__desc {
    grid-column: auto;
    grid-row: auto;
    -webkit-line-clamp: 3;
  }
  .vxm-mm__bottom {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px 4px;
  }
  .vxm-mm__list { grid-template-columns: 1fr; gap: 2px; }
  .vxm-mm__list-item-title { font-size: 14px; }
  .vxm-mm__list-item-desc { font-size: 12.5px; }
  .vxm-mm__strip {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 4px 4px;
  }
  .vxm-mm__strip-links {
    justify-content: center;
    flex-wrap: wrap;
  }
  .vxm-mm__strip-cta {
    justify-content: center;
    padding: 12px 18px;
    font-size: 14px;
  }
}
/* === assets/module_button-stack.min.css === */
.btn-list{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;padding-bottom:1rem;padding-top:2rem}.btn-list__item{margin-bottom:.8rem;margin-right:.8rem}.btn-list__item:last-of-type{margin-right:0}@media only screen and (min-width:768px){.btn-list{justify-content:normal}}
/* === assets/css/global-hero-buttons.css === */
.vxm-hero-buttons .btn-list {
  padding: 0;
}

.vxm-hero-buttons .button1 {
  background-color: var(--vxm-gray-500);
  color: var(--vxm-white);
  font-weight: bold;
}

.vxm-hero-buttons .button1:hover,
.vxm-hero-buttons .button1:focus,
.vxm-hero-buttons .button1:active {
  background-color: var(--vxm-brand-blue);
}

.vxm-header-divider hr {
  border: 0 none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #666666;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
}
/* === assets/css/probardemos.css === */
.vxm-hero-cta-btn .button-wrapper {
  text-align: CENTER;
}

.vxm-hero-cta-btn .button {
  color: var(--vxm-white);
  font-size: 18px;
  font-weight: bold;
}

.vxm-hero-cta-btn .button--featured:hover {
  box-shadow: 0 0;
}


.vxm-integ-cards-section h1,
.vxm-integ-cards-section h2,
.vxm-integ-cards-section h3,
.vxm-integ-cards-section h4,
.vxm-integ-cards-section h5,
.vxm-integ-cards-section h6 {
  font-family: Montserrat Alternates;
  color: var(--vxm-brand-blue);
}

.vxm-integ-cards-section p,
.vxm-integ-cards-section li,
.vxm-integ-cards-section div,
.vxm-integ-cards-section span {
  font-family: Montserrat;
}

.vxm-integ-cards-section .content-cards {
  position: relative;
  padding: 0;
  margin-top: 20px;
}

.vxm-integ-cards-section .top-heading.heading-1,
.vxm-integ-cards-section .top-heading.heading-1 span {
  color: var(--vxm-teal);
}

.vxm-integ-cards-section [class*="content-cards-card-button-wrapper-"] .button-1,
.vxm-integ-cards-section [class*="content-cards-card-button-wrapper-"] .btn-cta-1 {
  padding: 0 0;
  background-color: rgba(255, 255, 255, 0);
  color: var(--vxm-brand-blue);
  border: 0 solid;
  border-color: #d0d5dd;
  position: relative;
  z-index: 2;
}

.vxm-integ-cards-section
  [class*="content-cards-card-button-wrapper-"]
  .content-cards-card-button-inner-wrapper
  span
  svg
  path {
  fill: var(--vxm-brand-blue);
}

.vxm-integ-cards-section [class*="content-cards-card-button-wrapper-"] .button-1:hover,
.vxm-integ-cards-section [class*="content-cards-card-button-wrapper-"] .btn-cta-1:hover {
  background-color: rgba(255, 255, 255, 0);
  color: var(--vxm-teal);
}

.vxm-integ-cards-section
  [class*="content-cards-card-button-wrapper-"]
  .content-cards-card-button-inner-wrapper
  .button-1:hover
  span
  svg
  path,
.vxm-integ-cards-section
  [class*="content-cards-card-button-wrapper-"]
  .content-cards-card-button-inner-wrapper
  .btn-cta-1:hover
  span
  svg
  path {
  fill: var(--vxm-teal);
}

.vxm-integ-cards-section .content-cards-description-wrapper *,
.vxm-integ-cards-section .content-cards-description-wrapper {
  color: var(--vxm-brand-blue);
}

.vxm-integ-cards-section .content-cards-card-title .heading,
.vxm-integ-cards-section .content-cards-card-description p {
  color: var(--vxm-dark);
}

.vxm-integ-cards-section .content-cards-card-button-inner-wrapper {
  border-radius: 5px;
  background-color: var(--vxm-white);
}

.vxm-integ-cards-section
  [class*="content-cards-card-button-wrapper-"]
  .content-cards-card-button-inner-wrapper,
.vxm-integ-cards-section
  [class*="content-cards-card-button-wrapper-"]
  .content-cards-card-button-inner-wrapper:hover {
  background-color: var(--vxm-white);
}

.vxm-integ-cards-section .content-cards-card-button-inner-wrapper:hover,
.vxm-integ-cards-section .whole-link:hover + .content-cards-card-button-inner-wrapper {
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
}

/* ════════════════════════════════════════════════════════════════
   Demo rubro cards — 3-per-row premium grid with hover lift,
   image zoom, and CTA fill animation. Replaces the legacy
   flex/% sizing that produced 4-per-row + missing card chrome.
   Markup layout (each card):
     .content-cards-card-button-wrapper
       ├─ a.whole-link  (absolute overlay, click target)
       └─ .content-cards-card-button-inner-wrapper
           ├─ .content-cards-card-img-icon > img
           ├─ .content-cards-card-description (h + p)
           └─ a.button.button--secondary  (visible CTA)
   ════════════════════════════════════════════════════════════════ */

/* Grid container — 3 cols desktop, 2 tablet, 1 mobile */
.vxm-integ-cards-section .content-cards-card-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;
  max-width: 1180px;
  margin: 0 auto !important;
  padding: 0 clamp(16px, 4vw, 24px) !important;
  align-items: stretch;
  justify-content: center;
}

@media (max-width: 899px) {
  .vxm-integ-cards-section .content-cards-card-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}

@media (max-width: 599px) {
  .vxm-integ-cards-section .content-cards-card-wrapper {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Override every legacy width:% rule — grid handles sizing now */
.vxm-integ-cards-section .content-cards-card-button-wrapper,
.vxm-integ-cards-section .content-cards-card-wrapper.one .content-cards-card-button-wrapper,
.vxm-integ-cards-section .content-cards-card-wrapper.two .content-cards-card-button-wrapper,
.vxm-integ-cards-section .content-cards-card-wrapper.three .content-cards-card-button-wrapper {
  flex: 0 0 auto;
  width: auto !important;
}

/* === Unified animation system ===
   All hover-triggered transitions share the same 260ms duration and
   standard ease-out curve so motion across the card (lift, image
   zoom, CTA fill) reads as ONE coordinated move instead of 3 things
   firing at different speeds. */

/* Card — white surface, soft shadow, smooth lift on hover */
.vxm-integ-cards-section .content-cards-card-button-wrapper {
  position: relative;
  background: #FFFFFF !important;
  border: 1px solid rgba(26, 26, 26, 0.06) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04),
              0 4px 12px rgba(26, 26, 26, 0.04);
  /* Promote to its own compositor layer so transform + box-shadow
     repaint stays off the main thread — kills the jitter when
     moving between adjacent cards. */
  will-change: transform, box-shadow;
  transition:
    transform 260ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 260ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.vxm-integ-cards-section .content-cards-card-button-wrapper:hover {
  transform: translateY(-4px);
  border-color: rgba(71, 126, 207, 0.22) !important;
  box-shadow:
    0 14px 30px -8px rgba(26, 26, 26, 0.14),
    0 4px 10px rgba(26, 26, 26, 0.05);
}

/* Whole-link overlay — invisible click target.
   Kill its inherited 0.3s transition so it doesn't fire any phantom
   animations on top of the card's. Zero own paint, zero own motion. */
.vxm-integ-cards-section .content-cards-card-button-wrapper .whole-link {
  display: block;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3;
  background: transparent !important;
  border: 0 !important;
  border-radius: inherit !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: none !important;
}
.vxm-integ-cards-section .content-cards-card-button-wrapper .whole-link:hover,
.vxm-integ-cards-section .content-cards-card-button-wrapper .whole-link:focus {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Image holder — fixed 4:3 aspect ratio. Image fills via object-fit:
   cover and zooms inside the clip on card hover. */
.vxm-integ-cards-section .content-cards-card-img-icon {
  width: 100% !important;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0 !important;
  border-radius: 0 !important;
  background: #F4F4F5;
}

.vxm-integ-cards-section .content-cards-card-img-icon img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
  will-change: transform;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.vxm-integ-cards-section .content-cards-card-button-wrapper:hover
.content-cards-card-img-icon img {
  transform: scale(1.035);
}

/* Inner column — push the CTA to the bottom so cards align */
.vxm-integ-cards-section .content-cards-card-button-inner-wrapper {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0 !important;
  margin: 0 !important;
}

/* Text block — sits between image and CTA */
.vxm-integ-cards-section .content-cards-card-description {
  padding: 20px 22px 8px;
  flex: 1 1 auto;
  text-align: center;
}

.vxm-integ-cards-section .content-cards-card-description h1,
.vxm-integ-cards-section .content-cards-card-description h2,
.vxm-integ-cards-section .content-cards-card-description h3,
.vxm-integ-cards-section .content-cards-card-description h4,
.vxm-integ-cards-section .content-cards-card-description h5,
.vxm-integ-cards-section .content-cards-card-description h6,
.vxm-integ-cards-section .content-cards-card-description strong,
.vxm-integ-cards-section .content-cards-card-description b {
  font-family: Montserrat, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--vxm-dark) !important;
  line-height: 1.25 !important;
  margin: 0 0 8px !important;
  text-align: center !important;
  letter-spacing: -0.005em;
}

.vxm-integ-cards-section .content-cards-card-description p {
  font-family: Montserrat, sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: rgba(26, 26, 26, 0.72) !important;
  margin: 0 !important;
  /* Clamp description to 4 lines so card heights stay close */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA button — anchored bottom, full-width pill. Transition matches
   the card/image timing so the button fill, the card lift, and the
   image zoom all complete together at 260ms. */
.vxm-integ-cards-section .content-cards-card-button-inner-wrapper
> .button {
  margin: 16px 22px 22px !important;
  align-self: stretch;
  text-align: center;
  position: relative;
  z-index: 2;
  transition:
    background-color 260ms cubic-bezier(0.4, 0, 0.2, 1),
    color 260ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 260ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 260ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* On card hover, flip the secondary CTA into its filled state. */
.vxm-integ-cards-section .content-cards-card-button-wrapper:hover
.button.button--secondary,
.vxm-integ-cards-section .content-cards-card-button-wrapper:hover
.button.button--primary {
  background: var(--vxm-brand-blue) !important;
  border-color: var(--vxm-brand-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(71, 126, 207, 0.28) !important;
}

/* Respect users who prefer reduced motion — disable lift/zoom but
   keep the color flip so the CTA still signals interactivity. */
@media (prefers-reduced-motion: reduce) {
  .vxm-integ-cards-section .content-cards-card-button-wrapper,
  .vxm-integ-cards-section .content-cards-card-img-icon img {
    transition: none !important;
  }
  .vxm-integ-cards-section .content-cards-card-button-wrapper:hover {
    transform: none !important;
  }
  .vxm-integ-cards-section .content-cards-card-button-wrapper:hover
  .content-cards-card-img-icon img {
    transform: none !important;
  }
}

@media (max-width: 599px) {
  .vxm-integ-cards-section .content-cards {
    padding: 0 0 48px !important;
  }
}
/* ════════════════════════════════════════════════════════════════
   "Cómo probar las demos en 4 pasos" — premium tabs redesign
   Tabs as numbered pill buttons with active state in brand-blue;
   content panel as a soft white card with shadow. No structural
   markup changes — just CSS on top of the existing tab system.
   ════════════════════════════════════════════════════════════════ */
.vxm-demo-tabs-section .hs-tabs-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 24px);
}

.vxm-demo-tabs-section .hs-tabs__tab-wrapper {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 10px !important;
  border-bottom: 0 !important;
  counter-reset: vxmtab;
  padding-bottom: 8px;
}

.vxm-demo-tabs-section .hs-tabs__tab {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 12px 22px !important;
  background: #FFFFFF !important;
  border: 1.5px solid rgba(26, 26, 26, 0.10) !important;
  border-radius: 999px !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--vxm-dark) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease,
              color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

/* Numbered chip on each tab — auto-numbered via CSS counter */
.vxm-demo-tabs-section .hs-tabs__tab::before {
  counter-increment: vxmtab;
  content: counter(vxmtab);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(26, 26, 26, 0.08);
  color: var(--vxm-dark);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  transition: background 200ms ease, color 200ms ease;
}

.vxm-demo-tabs-section .hs-tabs__tab::after {
  display: none !important;        /* kill the legacy underline bar */
  border: 0 !important;
}

.vxm-demo-tabs-section .hs-tabs__tab[aria-selected="false"]:hover,
.vxm-demo-tabs-section .hs-tabs__tab[aria-selected="false"]:focus {
  border-color: var(--vxm-brand-blue) !important;
  color: var(--vxm-brand-blue) !important;
  background: #FFFFFF !important;
  transform: translateY(-1px);
}

.vxm-demo-tabs-section .hs-tabs__tab[aria-selected="true"] {
  background: var(--vxm-brand-blue) !important;
  border-color: var(--vxm-brand-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(71, 126, 207, 0.30) !important;
}

.vxm-demo-tabs-section .hs-tabs__tab[aria-selected="true"]::before {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}

/* Kill the scroll-nudge side arrows at every breakpoint. With the pill
   tabs wrapping/flexing freely there's no horizontal-scroll viewport
   that needs nudging — the arrows were dead UI. */
.vxm-demo-tabs-section .hs-tabs__nudge,
.vxm-demo-tabs-section .hs-tabs__nudge--left,
.vxm-demo-tabs-section .hs-tabs__nudge--right,
.vxm-demo-tabs-section .hs-tabs__nudge--show {
  display: none !important;
}

/* Re-center the tabs row inside its parent container. Legacy markup
   uses .hs-tabs__tabs-container as a flex row with [nudge-left,
   scroll, nudge-right] and justify-content:space-between — once the
   nudges are removed the single remaining child collapses to
   flex-start (visually flush-left). Force center on the container
   AND give the scroll wrapper an auto inline size so it shrink-wraps
   the centered tab pills instead of stretching. */
.vxm-demo-tabs-section .hs-tabs__tabs-container {
  justify-content: center !important;
}
.vxm-demo-tabs-section .hs-tabs__scroll {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
}

/* Content panel — white card with soft shadow.
   Margin-bottom + parent overflow:visible so the soft drop shadow
   has breathing room before the next (teal) section starts.
   Text inside is centered to match the centered tabs above. */
.vxm-demo-tabs-section .hs-tabs__content {
  margin-top: 28px;
  margin-bottom: 24px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}

.vxm-demo-tabs-section .hs-tabs__content__panel {
  margin: 0 !important;
  visibility: hidden;
  display: none;
  background: #FFFFFF;
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 18px;
  padding: 32px 36px;
  /* Stronger shadow so it reads as a floating card instead of
     being clipped against the dark/teal section below. */
  box-shadow: 0 10px 30px rgba(26, 26, 26, 0.08),
              0 2px 6px rgba(26, 26, 26, 0.04);
}

.vxm-demo-tabs-section .hs-tabs__content__panel--visible {
  visibility: visible;
  display: block;
}

.vxm-demo-tabs-section .hs-tabs__content__panel p {
  margin: 0 !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  color: rgba(26, 26, 26, 0.78) !important;
  text-align: center !important;
}

.vxm-demo-tabs-section .hs-tabs__content__panel p strong {
  display: block;
  margin: 0 0 8px 0;
  font-weight: 700;
  color: var(--vxm-dark);
  font-size: 17px;
}

/* Give the whole tabs section enough bottom breathing room so the
   shadow doesn't slam into the teal banner below. */
.main_content-row-3-background-layers,
.vxm-section-3-padding {
  padding-bottom: 4rem !important;
}

@media (max-width: 600px) {
  .vxm-demo-tabs-section .hs-tabs__content__panel {
    padding: 24px 22px;
  }
  .vxm-demo-tabs-section .hs-tabs__content__panel p strong {
    font-size: 16px;
  }
}
.vxm-hero-action-img {
  display: block !important;
  padding-bottom: 1rem !important;
}

/* Page H2 title — use the site-wide title token so it matches the
   home + every other section heading. Was hardcoded 38px which
   blew past the 34px max of --vxm-fs-title. */
.vxm-demo-section-title {
  color: var(--vxm-dark) !important;
  display: block !important;
  font-size: var(--vxm-fs-title) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

.vxm-demo-section-title p,
.vxm-demo-section-title li,
.vxm-demo-section-title span,
.vxm-demo-section-title label,
.vxm-demo-section-title h1,
.vxm-demo-section-title h2,
.vxm-demo-section-title h3,
.vxm-demo-section-title h4,
.vxm-demo-section-title h5,
.vxm-demo-section-title h6 {
  color: var(--vxm-dark) !important;
  font-size: var(--vxm-fs-title) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

/* "Prueba una tienda mayorista real, de tu rubro:" — top-heading
   above the demo cards grid. The legacy markup is <p class="heading
   top-heading heading-1 h1"> so it inherits .h1 sizing (~44px+ from
   template_main). Pin to the title token so it sits below the H2
   without competing with it. */
.vxm-integ-cards-section .top-heading,
.vxm-integ-cards-section .top-heading.heading-1,
.vxm-integ-cards-section .top-heading.heading-1 span,
.vxm-integ-cards-section .heading.h1 {
  font-size: var(--vxm-fs-title) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: var(--vxm-teal);
  text-align: center !important;
  margin: 0 auto 8px !important;
  letter-spacing: -0.005em;
}

.vxm-demo-tabs-heading {
  display: block !important;
  font-size: var(--vxm-fs-title) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  padding-bottom: 1rem !important;
  padding-top: 2rem !important;
  text-align: center !important;
  color: var(--vxm-dark) !important;
}

.vxm-demo-tabs-heading p,
.vxm-demo-tabs-heading li,
.vxm-demo-tabs-heading span,
.vxm-demo-tabs-heading label,
.vxm-demo-tabs-heading h1,
.vxm-demo-tabs-heading h2,
.vxm-demo-tabs-heading h3,
.vxm-demo-tabs-heading h4,
.vxm-demo-tabs-heading h5,
.vxm-demo-tabs-heading h6 {
  font-size: var(--vxm-fs-title) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: var(--vxm-dark) !important;
}

.module_17558606035475-flexbox-positioning {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start;
}

.module_17558606035475-flexbox-positioning > div {
  max-width: 100%;
  flex-shrink: 0 !important;
}

.vxm-section-0-padding {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

.main_content-row-0-background-layers {
  background-image: linear-gradient(var(--vxm-dark), var(--vxm-dark)) !important;
  background-position: left top !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
}

.vxm-section-1-bg,
.vxm-section-2-bg,
.main_content-row-3-background-layers {
  background-image: linear-gradient(var(--vxm-white), var(--vxm-white)) !important;
  background-position: left top !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
}

.vxm-section-2-padding {
  padding-bottom: 1rem !important;
}

.vxm-section-3-padding {
  padding-bottom: 2rem !important;
}

.main_content-row-4-margin {
  margin-bottom: -100px !important;
}

.vxm-section-4-padding {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.main_content-row-4-background-layers {
  background-image: linear-gradient(var(--vxm-teal), var(--vxm-teal)) !important;
  background-position: left top !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
}

@media (min-width: 768px) {

.vxm-section-0-align > .row-fluid,
.vxm-footer-row-align > .row-fluid {
  display: flex !important;
  flex-direction: row;
}

.vxm-hero-footer-align,
.vxm-hero-header-align,
.vxm-footer-cell-align {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.vxm-hero-footer-align > div,
.vxm-hero-header-align > div,
.vxm-footer-cell-align > div {
  flex-shrink: 0 !important;
}

}

@media (max-width: 767px) {

.vxm-section-0-padding {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.vxm-section-4-padding {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

.vxm-hero-header-margin {
  margin-bottom: 3rem !important;
}

}

/* Rounded image corners — hero brochure + the 9 rubro cards.
   Wrapper + img both get the radius so the clip is clean and survives
   the .whole-link overlay that sits on top of legacy card markup. */
.vxm-hero-action-img img,
.vxm-integ-cards-section .content-cards-card-img-icon,
.vxm-integ-cards-section .content-cards-card-img-icon img {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Round the whole card too so the bottom (text area) matches the
   image's rounded top — gives a unified pill-card feel like the
   home industries section. */
.vxm-integ-cards-section .content-cards-card-button-wrapper,
.vxm-integ-cards-section [class*="content-cards-card-button-wrapper-"] {
  border-radius: 16px !important;
  overflow: hidden !important;
}
/* === assets/module_Content_Cards.min.css === */
.content-cards *,.content-cards :after,.content-cards :before{box-sizing:border-box}.content-cards-top-section{margin-bottom:60px}.content-cards-card-button-wrapper a>span{color:inherit!important;font-weight:700}.content-cards{text-align:center}.content-cards-card-wrapper{display:flex;flex-wrap:wrap;margin:0 -15px;row-gap:25px}.content-cards-card-button-wrapper{flex:0 0 auto;padding-left:15px;padding-right:15px;position:relative;width:100%}.content-cards-card-button-inner-wrapper{display:block;height:100%;padding:40px 20px 30px;position:relative;-webkit-transition:all .25s cubic-bezier(.645,.045,.355,1);-o-transition:all .25s cubic-bezier(.645,.045,.355,1);transition:all .25s cubic-bezier(.645,.045,.355,1)}.content-cards-card-button-inner-wrapper span svg{margin-left:14px;vertical-align:middle;width:16px}.content-cards-card-button-inner-wrapper span svg path{-webkit-transition:all .25s cubic-bezier(.645,.045,.355,1);-o-transition:all .25s cubic-bezier(.645,.045,.355,1);transition:all .25s cubic-bezier(.645,.045,.355,1)}.content-cards-card-img-icon{margin-bottom:24px}.content-cards-card-description{margin-bottom:34px}.content-cards-card-title .heading{margin-bottom:15px}@media (max-width:767px){.content-cards-top-section{margin-bottom:30px}}
/* === assets/module_tabbed_card.min.css === */
.hs-tabs,.hs-tabs__scroll{display:flex;justify-content:space-between;position:relative}.hs-tabs__scroll{overflow-x:auto}.hs-tabs__nudge{align-items:center;bottom:0;box-sizing:border-box;display:none;height:80%;position:absolute;top:0;width:16px}.hs-tabs__nudge,.hs-tabs__nudge:active,.hs-tabs__nudge:focus,.hs-tabs__nudge:hover{background:none;background:#fff;border:none;border-radius:0;color:initial;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:auto 0;padding:0;text-align:left;text-decoration:none;transition:none}.hs-tabs__nudge--show{display:flex}.hs-tabs__nudge--right,.hs-tabs__nudge--right:active,.hs-tabs__nudge--right:focus,.hs-tabs__nudge--right:hover{border:1px solid #ccc;border-right:none;justify-content:flex-end;right:0}.hs-tabs__nudge--left,.hs-tabs__nudge--left:active,.hs-tabs__nudge--left:focus,.hs-tabs__nudge--left:hover{border:1px solid #ccc;border-left:none;justify-content:flex-start;left:0;z-index:1}.hs-tabs-nudge-icon{align-items:center;display:flex;fill:currentColor;height:100%;width:8px}.hs-tabs-nudge-icon svg{width:8px}.hs-tabs__tab-wrapper{display:flex;gap:.25rem;justify-content:space-between;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content}.hs-tabs__tab{box-sizing:border-box;flex:1;justify-content:center;position:relative;text-align:center;white-space:nowrap}.hs-tabs__tab,.hs-tabs__tab:active,.hs-tabs__tab:focus,.hs-tabs__tab:hover{background:none;background-color:#eee;border:1px solid #ccc;border-bottom:none;border-radius:0;color:initial;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin-bottom:0;padding:.7rem 1.4rem;text-align:left;text-decoration:none;transition:none}.hs-tabs__tab:active,.hs-tabs__tab:focus,.hs-tabs__tab:hover{background:#fff}.hs-tabs__tab[aria-selected=true]{background:#fff;border-bottom-color:#fff;font-weight:700}.hs-tabs__tab-wrapper--has-nudges>.hs-tabs__tab:first-child{margin-left:1px;padding-left:18px}.hs-tabs__tab-wrapper--has-nudges>.hs-tabs__tab:last-child{margin-right:1px;padding-right:18px}.hs-tabs__tab:after{bottom:0;content:"";left:0;position:absolute;right:0;top:0}.hs-tabs__tab[aria-selected=false]:focus:after,.hs-tabs__tab[aria-selected=false]:hover:after,.hs-tabs__tab[aria-selected=true]:after{border-bottom:2px solid}.hs-tabs__content{border:1px solid #ccc;display:flex}.hs-tabs__content__panel{box-sizing:border-box;padding:2.8rem;width:100%}@media screen and (max-width:767px){.hs-tabs__scroll{margin-left:56px;width:calc(100% - 112px)}.hs-tabs__nudge{display:flex;justify-content:center;width:48px}.hs-tabs__nudge--mobile-disabled{opacity:30%}.hs-tabs__nudge--left,.hs-tabs__nudge--left:active,.hs-tabs__nudge--left:focus,.hs-tabs__nudge--left:hover,.hs-tabs__nudge--right,.hs-tabs__nudge--right:active,.hs-tabs__nudge--right:focus,.hs-tabs__nudge--right:hover{justify-content:center}}
/* === assets/css/global-cta-align.css === */
.vxm-cta-btn .button-wrapper {
  text-align: CENTER;
}

.vxm-cta-btn .button--featured:hover {
  box-shadow: 0 0;
}