/* === 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/module_video.min.css === */
.oembed_container{display:inline-block;height:100%;position:relative;width:100%}.iframe_wrapper{height:0;padding-bottom:56.25%;padding-top:25px;position:relative}.oembed_container_iframe{height:100%;left:0;margin:0 auto;position:absolute;right:0;top:0;width:100%}.oembed_custom-thumbnail,.oembed_custom-thumbnail:active,.oembed_custom-thumbnail:focus,.oembed_custom-thumbnail:hover{align-items:center;appearance:none;background-color:transparent;background-position:50%;background-repeat:no-repeat;background-size:cover;border:none;border-radius:0;display:flex;height:100%;justify-content:center;left:0;margin:0;padding:0;position:absolute;top:0;width:100%;z-index:1}.oembed_custom-thumbnail_icon{align-items:center;cursor:pointer;display:flex;justify-content:center;width:100%}.oembed_custom-thumbnail_icon svg{display:block;height:auto;width:12%}:root .oembed_custom-thumbnail_icon svg,_:-ms-fullscreen{max-width:none}.oembed_custom-thumbnail--hide{display:none}.embed_container{display:inline-block;height:100%;position:relative;width:100%}.embed_container iframe{left:0;max-height:100%;max-width:100%;position:absolute;right:0;top:0}.oembed-info{height:1px;left:-10000px;overflow:hidden;position:absolute;top:auto;width:1px}:not(.hs-inline-edit) .hs-video-placeholder{display:none}.hs-inline-edit .hs-video-placeholder{background-color:#f5f8fa!important;border:1px dashed #516f90!important;display:block!important;font-size:14px!important;margin:2px 1px!important;outline:1px dashed #fff!important;text-align:center!important}.hs-video-placeholder>*{box-sizing:border-box!important;display:block!important;margin:1px!important;padding:12px!important;width:calc(100% - 2px)!important}p.hs-video-placeholder__title{font-size:14px!important;font-weight:700!important;line-height:normal!important;margin-bottom:10px!important;margin-top:0!important;padding:0!important}p.hs-video-placeholder__description,p.hs-video-placeholder__title{color:#7c98b6!important;font-family:Helvetica Neue,Helvetica,Arial,sans-serif!important;font-style:italic!important;text-shadow:0 -1px 0 hsla(0,0%,100%,.5)!important}p.hs-video-placeholder__description{font-weight:400!important;line-height:1.6!important;margin:0!important}
/* === 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/module_Logo_Slider.min.css === */
.jake-logo-slider.swiper{height:100%;width:100%}body .jake-logo-slider__swiper{z-index:0}.jake-logo-slider .swiper-slide{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;font-size:18px;text-align:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;flex-direction:column}.swiper--grayscale-hover .swiper-slide:not(:hover) img{filter:grayscale(100%)}.jake-logo-slider--hide{opacity:0}.jake-logo-slider--fade{opacity:1;transition:opacity .3s}.jake-logo-slider .disabled_swiper_button{cursor:auto;opacity:0;pointer-events:none}
/* === assets/css/global-cta-align.css === */
.vxm-cta-btn .button-wrapper {
  text-align: CENTER;
}

.vxm-cta-btn .button--featured:hover {
  box-shadow: 0 0;
}
/* === assets/css/industry-shared.css === */
/* ══════════════════════════════════════════════
   Industry pages – shared styles
   Loaded by: calzado, indumentaria, ferreteria,
   bazar, libreria, cosmetica, tecnologia, alimentos
   ══════════════════════════════════════════════ */

/* ── Tabs component ── */

.vxm-ind-tabs-title {
  color: var(--vxm-dark) !important;
  display: block !important;
  font-size: var(--vxm-fs-title) !important;
  text-align: left !important;
}

.vxm-ind-tabs-title p,
.vxm-ind-tabs-title li,
.vxm-ind-tabs-title span,
.vxm-ind-tabs-title label,
.vxm-ind-tabs-title h1,
.vxm-ind-tabs-title h2,
.vxm-ind-tabs-title h3,
.vxm-ind-tabs-title h4,
.vxm-ind-tabs-title h5,
.vxm-ind-tabs-title h6 {
  color: var(--vxm-dark) !important;
  font-size: var(--vxm-fs-title) !important;
}

.vxm-ind-tabs-demo {
  display: block !important;
  padding-bottom: 1rem !important;
  padding-top: 1rem !important;
}

.vxm-ind-tabs-desc {
  display: block !important;
  padding-bottom: 2rem !important;
}

.vxm-ind-tabs-hidden {
  color: var(--vxm-white) !important;
  display: block !important;
  font-size: var(--vxm-fs-subtitle) !important;
  font-weight: bold !important;
  padding-bottom: 1rem !important;
  padding-top: 0 !important;
  text-align: center !important;
}

.vxm-ind-tabs-hidden p,
.vxm-ind-tabs-hidden li,
.vxm-ind-tabs-hidden span,
.vxm-ind-tabs-hidden label,
.vxm-ind-tabs-hidden h1,
.vxm-ind-tabs-hidden h2,
.vxm-ind-tabs-hidden h3,
.vxm-ind-tabs-hidden h4,
.vxm-ind-tabs-hidden h5,
.vxm-ind-tabs-hidden h6 {
  color: var(--vxm-white) !important;
  font-size: var(--vxm-fs-subtitle) !important;
  font-weight: bold !important;
}

/* ── Feature content areas ── */

.vxm-fp-content {
  display: block !important;
  padding-bottom: 0 !important;
}

.vxm-fs-content {
  display: block !important;
}

.vxm-fp-img,
.vxm-fs-img {
  display: block !important;
  padding-bottom: 1rem !important;
  padding-top: 3rem !important;
}

/* ── Section spacing ── */

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

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

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

.vxm-feature-problems-margin,
.vxm-feature-solutions-margin {
  margin-bottom: 0 !important;
}

/* ── Desktop layout ── */

@media (min-width: 768px) {

.vxm-section-0-align > .row-fluid,
.vxm-section-3-align > .row-fluid,
.main_content-row-4-vertical-alignment > .row-fluid,
.vxm-feature-solutions-row2-align > .row-fluid,
.vxm-footer-row-align > .row-fluid {
  display: flex !important;
  flex-direction: row;
}

.vxm-hero-footer-align,
.vxm-hero-header-align,
.vxm-feature-problems-align,
.vxm-feature-solutions-align,
.vxm-feature-solutions-content-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-feature-problems-align > div,
.vxm-feature-solutions-align > div,
.vxm-feature-solutions-content-align > div,
.vxm-footer-cell-align > div {
  flex-shrink: 0 !important;
}

}

/* ── Mobile layout ── */

@media (max-width: 767px) {

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

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

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

.module_175509671876012-hidden,
.vxm-tabs-hidden {
  display: none !important;
}

.vxm-feature-problems-margin,
.vxm-feature-solutions-margin {
  margin-bottom: 1.67rem !important;
}

}
/* === assets/css/calzado.css === */
.module_17550967274725-flexbox-positioning,
.module_175509671876014-flexbox-positioning,
.module_17550967187607-flexbox-positioning,
.module_17550967187608-flexbox-positioning {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start;
}

.module_17550967274725-flexbox-positioning > div,
.module_175509671876014-flexbox-positioning > div,
.module_17550967187607-flexbox-positioning > div,
.module_17550967187608-flexbox-positioning > div {
  max-width: 100%;
  flex-shrink: 0 !important;
}

.vxm-section-1-bg,
.vxm-section-2-bg {
  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-feature-problems-img-align,
.vxm-feature-solutions-img-align {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.vxm-feature-problems-img-align > div,
.vxm-feature-solutions-img-align > div {
  flex-shrink: 0 !important;
}

}

@media (max-width: 767px) {

.module_175509671876012-hidden {
  display: none !important;
}

}