/* === 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;
    /* HOVER BRIDGE — the trigger's li box ends ~22px above where the
       panel starts (top:100% lands below the header's bottom padding),
       leaving a dead strip: moving the cursor from the trigger toward
       the panel crosses header background that belongs to NEITHER the
       li nor the panel, so li:hover drops and the panel snaps shut.
       Extend the panel's hover box UP over that gap with padding-top +
       an equal negative margin-top: the box now reaches the trigger
       (continuous hover chain) while the visible card stays put
       (padding is transparent — background is on the wrapper). */
    padding: 26px 0 0 !important;
    margin-top: -26px !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;
  }
}

/* ════════════════════════════════════════════════════════════════
   FEATURES PANEL — PILLAR GRID (.vxm-pm)
   Replaces the flat 5x3 card grid of the "Características" panel.

   One idea: every column IS a pillar, read coarse-to-fine.
   Row 1 = the pillar (hub: what it is, one click to the story).
   Row 2 = its functions (spokes: what it does, one click to specs).
   A newcomer reads the top row across; someone hunting a specific
   capability reads one column down. Two entry points, one grid.

   The two rows are separate grid ROWS of the same grid, but each
   pillar+column pair lives in a single .vxm-pm__group that spans
   both via subgrid — so the hub band stays aligned across all four
   columns, and a pillar never gets separated from its functions
   when the grid reflows to 2 or 1 column.

   Descriptions are NEVER clamped here. Copy is written to a hard
   ~40-char budget measured in Portuguese (the longest language),
   which is what actually fixes the truncation the card grid had.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Hub band tint — brand blue at very low alpha so the four
     pillars read as one continuous object, not four cards. */
  --vxm-pm-hub-bg: rgba(71, 126, 207, 0.055);
  --vxm-pm-hub-bg-hover: rgba(71, 126, 207, 0.11);
  /* Body copy: 0.68 alpha lands at ~6.2:1 on white (AA at 12px). */
  --vxm-pm-body: rgba(26, 26, 26, 0.68);
  /* Column labels sit on white at 11px caps; 0.64 gives ~5.1:1,
     comfortably clear of the 4.5:1 floor rather than grazing it. */
  --vxm-pm-muted: rgba(26, 26, 26, 0.64);
}

/* Panel shell — zero padding so the hub band and the strip can
   bleed edge to edge; inner padding lives on the parts. */
.header .mega-drop-wrapper.vxm-pm {
  display: block !important;
  padding: 0 !important;
  overflow: hidden;
}
@media (min-width: 768px) {
  .header .mega-drop-wrapper.vxm-pm {
    max-width: min(1240px, calc(100vw - 32px));
  }
}

/* === ROW 0 · THE PROMISE ===================================
   A single sentence above the grid. It is deliberately the largest
   type in the panel: the pillars are 16px, so 19px reads as the
   panel's headline without competing with the page behind it.
   Costs ~58px of panel height — paid for by giving a cold visitor
   something to understand before they have to choose a column. */
.vxm-pm__intro {
  padding: 17px 20px 15px;
  border-bottom: 1px solid var(--vxm-mm-divider);
}
.vxm-pm__intro-title {
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--vxm-mm-title);
}
.vxm-pm__intro-sub {
  margin: 5px 0 0;
  font-family: Montserrat, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--vxm-pm-body);
}

/* === GRID ================================================== */
.vxm-pm__groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  gap: 0;
}
.vxm-pm__group {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  min-width: 0;
}
/* Without subgrid the layout still holds; only the hub band's
   bottom edge can go ragged if two pillar descriptions differ
   in line count. */
@supports not (grid-template-rows: subgrid) {
  .vxm-pm__group { grid-template-rows: auto 1fr; }
}
.vxm-pm__group + .vxm-pm__group {
  border-left: 1px solid var(--vxm-mm-divider);
}

/* === ROW 1 · THE PILLAR (hub) =============================== */
.vxm-pm__pillar {
  display: block;
  padding: 18px 20px 16px;
  background: var(--vxm-pm-hub-bg);
  text-decoration: none;
  transition: background var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-pm__pillar:hover { background: var(--vxm-pm-hub-bg-hover); }

.vxm-pm__pillar-name {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--vxm-mm-title);
  margin-bottom: 5px;
}
.vxm-pm__pillar-name::after {
  content: "\2192";
  display: inline-block;
  margin-left: 7px;
  font-weight: 400;
  color: var(--vxm-mm-accent);
  transition: transform var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-pm__pillar:hover .vxm-pm__pillar-name::after {
  transform: translateX(4px);
}
.vxm-pm__pillar-desc {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--vxm-pm-body);
}

/* === ROW 2 · THE FUNCTIONS (spokes) ========================= */
.vxm-pm__col {
  padding: 16px 14px 18px;
  min-width: 0;
}
.vxm-pm__col-label {
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--vxm-pm-muted);
  margin: 0 0 10px 6px;
}

.vxm-pm__fn {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
  padding: 7px 6px;
  border-radius: 9px;
  text-decoration: none;
  transition: background var(--vxm-mm-anim) var(--vxm-mm-ease),
              box-shadow var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-pm__fn:hover { background: var(--vxm-mm-card-hover); }

.vxm-pm__fn-icon {
  display: block;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.vxm-pm__fn-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(26, 26, 26, 0.45);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-pm__fn:hover .vxm-pm__fn-icon svg { stroke: var(--vxm-mm-accent); }

.vxm-pm__fn-text { display: block; min-width: 0; }
.vxm-pm__fn-title {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--vxm-mm-title);
}
.vxm-pm__fn-desc {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--vxm-pm-body);
  margin-top: 1px;
}

/* Lead item — each column opens with its strongest function.
   Reads as a second row of heroes across the whole panel. */
.vxm-pm__fn--lead {
  background: rgba(26, 26, 26, 0.035);
  margin-bottom: 5px;
}
.vxm-pm__fn--lead .vxm-pm__fn-title { font-size: 13.5px; font-weight: 700; }
.vxm-pm__fn--lead .vxm-pm__fn-icon svg { stroke: var(--vxm-mm-accent); }
.vxm-pm__fn--lead:hover {
  background: #FFFFFF;
  box-shadow: 0 6px 18px -6px rgba(26, 26, 26, 0.18),
              0 1px 2px rgba(26, 26, 26, 0.06);
}

/* === BADGES — two in the whole panel, by policy ============= */
.vxm-pm__badge {
  display: inline-block;
  margin-left: 7px;
  vertical-align: 1px;
  font-family: Montserrat, sans-serif;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(77, 198, 190, 0.22);
  color: #076B65;
}
/* BETA reads as "in progress", not "fresh" — blue, not teal.
   Keyed on a class, not the href: page slugs are localized
   (vendedor-ia / ai-salesperson), so an attribute selector would
   silently drop the style on the English build. */
.vxm-pm__badge--beta {
  background: rgba(71, 126, 207, 0.16);
  color: #2C5AA0;
}

/* === THE FOCAL MOMENT ======================================
   "Diseño de tienda" promises the whole store restyles in one
   click, so the menu entry does exactly that on hover: the three
   swatches cycle through palettes instead of describing it. */
.vxm-pm__swatches {
  grid-column: 2;
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.vxm-pm__swatches i {
  width: 22px;
  height: 7px;
  border-radius: 3px;
  background: #477ECF;
}
.vxm-pm__swatches i:nth-child(2) { background: #4DC6BE; }
.vxm-pm__swatches i:nth-child(3) { background: #1A1A1A; }

@keyframes vxm-pm-restyle {
  0%,  100% { background: #477ECF; }
  30%       { background: #4DC6BE; }
  60%       { background: #E8A33D; }
  85%       { background: #1A1A1A; }
}
.vxm-pm__fn--lead:hover .vxm-pm__swatches i {
  animation: vxm-pm-restyle 2s var(--vxm-mm-ease) infinite;
}
.vxm-pm__fn--lead:hover .vxm-pm__swatches i:nth-child(2) { animation-delay: 160ms; }
.vxm-pm__fn--lead:hover .vxm-pm__swatches i:nth-child(3) { animation-delay: 320ms; }

/* === STRIP ================================================== */
.vxm-pm__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 11px 14px 11px 20px;
  border-top: 1px solid var(--vxm-mm-divider);
  background: rgba(26, 26, 26, 0.022);
}
.vxm-pm__strip-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}
.vxm-pm__strip-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: Montserrat, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vxm-pm-body);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background var(--vxm-mm-anim) var(--vxm-mm-ease),
              color var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-pm__strip-link svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vxm-pm__strip-link:hover {
  background: var(--vxm-mm-card-hover);
  color: var(--vxm-mm-title);
}

.vxm-pm__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  background: #1A1A1A;
  color: #FFFFFF;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow var(--vxm-mm-anim) var(--vxm-mm-ease),
              transform var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-pm__cta::after {
  content: "\2192";
  transition: transform var(--vxm-mm-anim) var(--vxm-mm-ease);
}
.vxm-pm__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(26, 26, 26, 0.38);
}
.vxm-pm__cta:hover::after { transform: translateX(3px); }

/* === BROWSER SURFACES ======================================= */
.vxm-pm a:focus-visible {
  outline: 2px solid var(--vxm-mm-accent);
  outline-offset: -2px;
  border-radius: 9px;
}
.vxm-pm ::selection {
  background: rgba(71, 126, 207, 0.20);
  color: #1A1A1A;
}

/* === RESPONSIVE ============================================= */
@media (max-width: 1240px) and (min-width: 768px) {
  .header .mega-drop-wrapper.vxm-pm {
    max-width: calc(100vw - 24px) !important;
  }
}

/* Below 1180px four columns leave each one too narrow to hold a
   title plus its one-line descriptor, so we drop to two rather than
   let the copy wrap. The pillar travels with its own functions
   because the group, not the row, is the grid item. */
@media (max-width: 1179px) and (min-width: 768px) {
  .vxm-pm__groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
  }
  .vxm-pm__group:nth-child(odd) { border-left: 0; }
  .vxm-pm__group:nth-child(n + 3) { border-top: 1px solid var(--vxm-mm-divider); }
  .vxm-pm__intro { padding: 15px 16px 13px; }
  .vxm-pm__intro-title { font-size: 17.5px; }
  .vxm-pm__pillar { padding: 15px 16px 13px; }
  .vxm-pm__col { padding: 14px 12px 16px; }
}

/* Mobile — the panel is already an accordion under the trigger,
   so groups simply stack: pillar as the section head, its
   functions listed underneath. */
@media (max-width: 767px) {
  .header .mega-drop-wrapper.vxm-pm {
    padding: 0 !important;
    overflow: hidden;
  }
  .vxm-pm__groups {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .vxm-pm__group {
    display: block;
    grid-row: auto;
    grid-template-rows: none;
    border-left: 0 !important;
  }
  .vxm-pm__group + .vxm-pm__group {
    border-top: 1px solid var(--vxm-mm-divider);
  }
  .vxm-pm__intro { padding: 14px 16px 12px; }
  .vxm-pm__intro-title { font-size: 16px; }
  .vxm-pm__intro-sub { font-size: 12px; }
  .vxm-pm__pillar { padding: 14px 16px 12px; }
  .vxm-pm__pillar-name { font-size: 15px; }
  .vxm-pm__col { padding: 10px 10px 14px; }
  .vxm-pm__col-label { margin-bottom: 8px; }
  .vxm-pm__strip {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
  }
  .vxm-pm__strip-links { justify-content: flex-start; }
  .vxm-pm__cta { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .vxm-pm__fn--lead:hover .vxm-pm__swatches i { animation: none; }
  .vxm-pm__pillar:hover .vxm-pm__pillar-name::after,
  .vxm-pm__cta:hover::after { transform: none; }
  .vxm-pm__cta:hover { transform: none; }
}

/* === SPECIFICITY GUARD =====================================
   The legacy header rule

     .main-nav__item a, .main-nav__item > button { color: var(--header-nav-color) }

   paints EVERY anchor in the nav with the dark header's near-white
   link color, at specificity (0,1,1) — it outranks any single-class
   rule of ours. Inner <span>s escape it because they carry their own
   color, but an anchor that draws its own text (or an icon using
   currentColor) does not. This — not the entrance animation — is why
   the old panel's strip links and eyebrow link read as invisible.
   Scoping under .vxm-pm takes us to (0,2,0) and settles it. */
.vxm-pm .vxm-pm__pillar,
.vxm-pm .vxm-pm__fn {
  color: var(--vxm-mm-title);
}
/* The legacy nav also styles headings/paragraphs inside the panel. */
.vxm-pm .vxm-pm__intro-title { color: var(--vxm-mm-title); }
.vxm-pm .vxm-pm__intro-sub { color: var(--vxm-pm-body); }
.vxm-pm .vxm-pm__strip-link {
  color: var(--vxm-pm-body);
  /* The same legacy rule also carries a font-weight. */
  font-weight: 600;
}
.vxm-pm .vxm-pm__strip-link:hover {
  color: var(--vxm-mm-title);
}
.vxm-pm .vxm-pm__cta {
  color: #FFFFFF;
}

/* Same guard for the two legacy panels (Soluciones, + Info). They
   declare the right colours already — `.main-nav__item a` was simply
   outranking them, which is why their eyebrow link and strip links
   rendered near-white on a white panel and read as missing. This
   restores the colours those rules always intended; it changes no
   design decision in those panels. */
.header .mega-drop .vxm-mm__eyebrow-link {
  color: rgba(26, 26, 26, 0.80);
  font-weight: 600;
}
.header .mega-drop .vxm-mm__eyebrow-link:hover {
  color: #1A1A1A;
}
.header .mega-drop .vxm-mm__strip-link {
  color: var(--vxm-mm-body);
  font-weight: 500;
}
.header .mega-drop .vxm-mm__strip-link:hover {
  color: #1A1A1A;
}
/* === assets/module_button-stack.min.css === */
.btn-list{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;padding-bottom:1rem;padding-top:2rem}.btn-list__item{margin-bottom:.8rem;margin-right:.8rem}.btn-list__item:last-of-type{margin-right:0}@media only screen and (min-width:768px){.btn-list{justify-content:normal}}
/* === assets/css/global-hero-buttons.css === */
.vxm-hero-buttons .btn-list {
  padding: 0;
}

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

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

.vxm-header-divider hr {
  border: 0 none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #666666;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
}
/* === assets/css/vpm-2026.css === */
/* vpm-2026.css — /vender-por-mayor, generación 2026.
   Autocontenida (.vpm-*). Las "capturas" del sistema son viñetas animadas en
   CSS/SVG (UI esquemática): representan lo que hace cada módulo sin usar
   screenshots reales que se desactualizan. */

.vpm {
  --vpm-dark: #1A1A1A;
  --vpm-ink: #24292f;
  --vpm-muted: #57606a;
  --vpm-teal: var(--vxm-teal, #4DC6BE);
  --vpm-teal-ink: #12756E;
  --vpm-blue: var(--vxm-brand-blue, #477ECF);
  --vpm-line: #e4e7ec;
}

/* antídoto estándar: nada hereda itálica ni subrayado del template */
.vpm a, .vpm a *, .vpm a:hover, .vpm a:hover *, .vpm a:focus, .vpm a:focus * {
  font-style: normal;
  text-decoration: none;
}
.vpm i, .vpm em { font-style: normal; }

/* ---------- primitivas ---------- */
.vpm-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vpm-teal);
  margin-bottom: 14px;
}
.vpm-eyebrow--dark { color: var(--vpm-teal-ink); }

.vpm h2 {
  font-size: var(--vxm-fs-title) !important;
  font-weight: 800;
  line-height: 1.18;
  margin: 0 0 14px;
}
.vpm-sub {
  font-size: var(--vxm-fs-subtitle, 18px);
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

.vpm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease, border-color 200ms ease;
}
.vpm-btn--primary { background: var(--vpm-blue); color: #fff; }
.vpm-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(71, 126, 207, 0.45);
  color: #fff;
}
.vpm-btn--ghost { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.vpm-btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
  color: #fff;
}

/* ---------- secciones alternadas: copy + viñeta ---------- */
.vpm-feat { padding: 76px 24px; background: #fff; }
.vpm-feat--tint { background: #F6F8FA; }
.vpm-feat__grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: 54px;
  align-items: center;
}
.vpm-feat--flip .vpm-feat__grid > .vpm-feat__copy { order: 2; }
.vpm-feat__copy h2 { color: var(--vpm-ink); }
.vpm-feat__copy .vpm-sub { color: var(--vpm-muted); }
.vpm-feat__list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.vpm-feat__list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--vpm-muted);
}
.vpm-feat__list li b { color: var(--vpm-ink); font-weight: 700; }
.vpm-feat__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(77, 198, 190, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312756E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l5 5L20 7'/%3E%3C/svg%3E");
  background-size: 9px;
  background-position: center;
  background-repeat: no-repeat;
}
.vpm-feat__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--vpm-blue);
  transition: color 240ms ease;
}
.vpm-feat__more i { display: inline-block; transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.vpm-feat__more:hover { color: var(--vpm-teal-ink); }
.vpm-feat__more:hover i { transform: translateX(5px); }

/* ---------- marco de viñeta: ventana esquemática del sistema ---------- */
.vpm-shot {
  position: relative;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--vpm-line);
  box-shadow: 0 22px 54px rgba(16, 24, 40, 0.13);
  overflow: hidden;
}
.vpm-shot__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #fafbfc;
  border-bottom: 1px solid var(--vpm-line);
}
.vpm-shot__dots { display: inline-flex; gap: 5px; }
.vpm-shot__dots i { width: 9px; height: 9px; border-radius: 50%; background: #e3e6ea; }
.vpm-shot__title {
  font-size: 12px;
  font-weight: 600;
  color: #8b949e;
  letter-spacing: 0.02em;
}
.vpm-shot__body { padding: 18px; }

/* reveal de entrada por sección (JS marca .is-in) */
.vpm-reveal { opacity: 0; transform: translateY(22px); transition: opacity 560ms ease, transform 560ms cubic-bezier(0.22, 0.9, 0.3, 1); }
.vpm-reveal.is-in { opacity: 1; transform: none; }

/* las animaciones internas de cada viñeta SOLO corren con .is-live (en pantalla) */
.vpm-shot [class*="vpm-anim"] { animation-play-state: paused; }
.is-live .vpm-shot [class*="vpm-anim"] { animation-play-state: running; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .vpm-feat { padding: 56px 20px; }
  .vpm-feat__grid { grid-template-columns: 1fr; gap: 34px; }
  .vpm-feat--flip .vpm-feat__grid > .vpm-feat__copy { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vpm-reveal { opacity: 1; transform: none; transition: none; }
  .vpm-shot * { animation: none !important; transition: none !important; }
}

/* ================= HERO ================= */
.vpm-hero {
  background: var(--vpm-dark);
  color: #fff;
  padding: 84px 24px 88px;
}
.vpm-hero__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
  gap: 52px;
  align-items: center;
}
.vpm-hero h1 {
  font-size: var(--vxm-fs-hero, clamp(30px, 4.4vw, 44px));
  font-weight: 800;
  line-height: 1.14;
  margin: 0 0 18px;
  color: #fff;
}
.vpm-hero h1 em { color: var(--vpm-teal); font-style: normal; }
.vpm-hero__sub {
  font-size: var(--vxm-fs-subtitle, 18px);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 28px;
  max-width: 54ch;
}
.vpm-hero__actions { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.vpm-hero__cta-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vpm-hero__cta-note { font-size: 13px; color: rgba(255, 255, 255, 0.62); }

/* visual del hero: foto real de la operación + circuito flotando encima */
.vpm-hero__visual { position: relative; padding-bottom: 30px; }
.vpm-hero__photo {
  margin: 0 0 0 64px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.vpm-hero__photo img { display: block; width: 100%; height: auto; }

/* circuito: 5 estaciones y un pulso que las recorre, como tarjeta sobre la foto */
.vpm-circuit {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(272px, 68%);
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  background: rgba(26, 26, 26, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}
.vpm-circuit__step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  animation: vpmStation 7.5s ease-in-out infinite;
  animation-play-state: paused;
}
.is-live .vpm-circuit__step { animation-play-state: running; }
.vpm-circuit__step--2 { animation-delay: 1.5s; }
.vpm-circuit__step--3 { animation-delay: 3s; }
.vpm-circuit__step--4 { animation-delay: 4.5s; }
.vpm-circuit__step--5 { animation-delay: 6s; }
@keyframes vpmStation {
  0%, 18%, 100% { border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.05); }
  6% { border-color: var(--vpm-teal); background: rgba(77, 198, 190, 0.14); }
}
.vpm-circuit__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(77, 198, 190, 0.16);
  color: var(--vpm-teal);
  font-size: 13px;
  font-weight: 800;
}

/* ================= viñetas: bases compartidas ================= */
/* swap de 2 y 3 valores apilados */
.vpm-swap { position: relative; display: inline-block; }
.vpm-swap > span { display: inline-block; }
.vpm-swap > span + span { position: absolute; left: 0; top: 0; }
@keyframes vpmShow2a { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes vpmShow2b { 0%, 44% { opacity: 0; } 50%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vpmShow3 { 0%, 28% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes vpmPop { 0% { opacity: 0; transform: translateY(8px) scale(0.96); } 100% { opacity: 1; transform: none; } }
@keyframes vpmFadeCycle { 0%, 8% { opacity: 0; transform: translateY(6px); } 16%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
@keyframes vpmPing { 0%, 100% { box-shadow: 0 0 0 0 rgba(77, 198, 190, 0); } 40% { box-shadow: 0 0 0 6px rgba(77, 198, 190, 0.25); } }

/* ---- 1 · acceso ---- */
.vpm-v-acceso { display: flex; flex-direction: column; gap: 10px; }
.vpm-v-acceso__row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--vpm-line); border-radius: 10px;
  animation: vpmPop 600ms ease both;
}
.vpm-v-acceso__row--2 { animation-delay: 900ms; }
.vpm-v-acceso__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #eef2f6; color: var(--vpm-muted);
  font-size: 12px; font-weight: 700;
}
.vpm-v-acceso__who { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--vpm-ink); }
.vpm-v-acceso__who small { display: block; font-size: 11.5px; font-weight: 500; color: var(--vpm-muted); }
.vpm-v-acceso__badge { position: relative; min-width: 92px; text-align: center; }
.vpm-v-acceso__badge b {
  display: inline-block; padding: 5px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; width: 100%;
}
.vpm-v-acceso__pend { background: #fdf3d8; color: #8a6a12; animation: vpmShow2a 6s infinite; }
.vpm-v-acceso__ok { position: absolute; left: 0; top: 0; background: #ddf3e6; color: #146c43; animation: vpmShow2b 6s infinite; }
.vpm-v-acceso__badge--2 .vpm-v-acceso__pend { animation-delay: 1.2s; }
.vpm-v-acceso__badge--2 .vpm-v-acceso__ok { animation-delay: 1.2s; }
.vpm-v-acceso__price {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 10px;
  background: #f6f8fa; font-size: 13px; color: var(--vpm-muted);
}
.vpm-v-acceso__price b { font-size: 15px; color: var(--vpm-ink); filter: blur(5px); animation: vpmUnblur 6s infinite; }
.vpm-v-acceso__lock { margin-left: auto; font-style: normal; animation: vpmLockFade 6s infinite; }
@keyframes vpmUnblur { 0%, 46% { filter: blur(5px); } 56%, 92% { filter: blur(0); } 100% { filter: blur(5px); } }
@keyframes vpmLockFade { 0%, 46% { opacity: 1; } 56%, 92% { opacity: 0.25; } 100% { opacity: 1; } }

/* ---- 2 · catálogo ---- */
.vpm-v-cat__top { display: flex; gap: 14px; align-items: flex-start; }
.vpm-v-cat__img {
  width: 74px; height: 74px; border-radius: 10px;
  background: linear-gradient(135deg, #dfe7f0, #c8d6e6);
  animation: vpmImgTint 8s infinite;
}
@keyframes vpmImgTint {
  0%, 22% { background: linear-gradient(135deg, #dfe7f0, #c8d6e6); }
  28%, 47% { background: linear-gradient(135deg, #efe3d2, #e0cdb0); }
  53%, 72% { background: linear-gradient(135deg, #dfeee2, #c3e0cc); }
  78%, 100% { background: linear-gradient(135deg, #dfe7f0, #c8d6e6); }
}
.vpm-v-cat__info b { font-size: 14px; color: var(--vpm-ink); }
.vpm-v-cat__chips { display: flex; gap: 6px; margin: 8px 0; }
.vpm-v-cat__chips span {
  padding: 4px 10px; border-radius: 7px;
  border: 1.4px solid var(--vpm-line);
  font-size: 12px; font-weight: 700; color: var(--vpm-muted);
  animation: vpmChipOn 8s infinite;
}
.vpm-v-cat__chip--2 { animation-delay: 2s !important; }
.vpm-v-cat__chip--3 { animation-delay: 4s !important; }
.vpm-v-cat__chip--4 { animation-delay: 6s !important; }
@keyframes vpmChipOn {
  0%, 20%, 100% { border-color: var(--vpm-line); color: var(--vpm-muted); background: #fff; }
  6%, 14% { border-color: var(--vpm-teal-ink); color: var(--vpm-teal-ink); background: rgba(77, 198, 190, 0.10); }
}
.vpm-v-cat__stock { font-size: 12px; color: var(--vpm-muted); }
.vpm-v-cat__feeds {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--vpm-line);
}
.vpm-v-cat__feeds span {
  padding: 5px 11px; border-radius: 999px;
  background: #f2f4f7; font-size: 11.5px; font-weight: 700; color: var(--vpm-ink);
  animation: vpmPing 5s infinite;
}
.vpm-v-cat__feed--2 { animation-delay: 0.8s !important; }
.vpm-v-cat__feed--3 { animation-delay: 1.6s !important; }
.vpm-v-cat__feeds small { margin-left: auto; font-size: 11.5px; color: var(--vpm-teal-ink); font-weight: 600; }

/* ---- 3 · listas ---- */
.vpm-v-listas__tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.vpm-v-listas__tabs span {
  padding: 6px 13px; border-radius: 999px;
  border: 1.4px solid var(--vpm-line);
  font-size: 12.5px; font-weight: 700; color: var(--vpm-muted);
  animation: vpmTabOn 7.5s infinite;
}
.vpm-v-listas__tab--2 { animation-delay: 2.5s !important; }
.vpm-v-listas__tab--3 { animation-delay: 5s !important; }
@keyframes vpmTabOn {
  0%, 30%, 100% { border-color: var(--vpm-line); color: var(--vpm-muted); background: #fff; }
  5%, 26% { border-color: var(--vpm-blue); color: #fff; background: var(--vpm-blue); }
}
.vpm-v-listas__product {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border: 1px solid var(--vpm-line); border-radius: 10px;
}
.vpm-v-listas__thumb { width: 46px; height: 46px; border-radius: 9px; background: linear-gradient(135deg, #e7ecf2, #d3dde8); }
.vpm-v-listas__product b { font-size: 13.5px; color: var(--vpm-ink); display: block; }
.vpm-v-listas__product small { font-size: 11.5px; color: var(--vpm-muted); }
.vpm-v-listas__price { position: relative; margin-left: auto; min-width: 84px; text-align: right; }
.vpm-v-listas__price b { font-size: 17px; color: var(--vpm-ink); opacity: 0; animation: vpmShow3 7.5s infinite; }
.vpm-v-listas__price b + b { position: absolute; right: 0; top: 0; }
.vpm-v-listas__p--2 { animation-delay: 2.5s !important; }
.vpm-v-listas__p--3 { animation-delay: 5s !important; }
.vpm-v-listas__note { display: block; margin-top: 12px; font-size: 12px; color: var(--vpm-teal-ink); font-weight: 600; }

/* ---- 4 · condiciones ---- */
.vpm-v-cond { display: flex; flex-direction: column; gap: 12px; }
.vpm-v-cond__row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--vpm-muted); }
.vpm-v-cond__subtotal { position: relative; font-size: 15px; color: var(--vpm-ink); }
.vpm-v-cond__subtotal span { opacity: 0; animation: vpmShow2a 7s infinite; }
.vpm-v-cond__subtotal span:first-child { opacity: 1; }
.vpm-v-cond__subtotal span + span { position: absolute; right: 0; top: 0; animation: vpmShow2b 7s infinite; }
.vpm-v-cond__barwrap { height: 9px; border-radius: 999px; background: #eef1f4; overflow: hidden; }
.vpm-v-cond__bar {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--vpm-teal), #2fa79f);
  animation: vpmCondBar 7s ease-in-out infinite;
}
@keyframes vpmCondBar { 0%, 12% { width: 55%; } 45%, 92% { width: 100%; } 100% { width: 55%; } }
.vpm-v-cond__hint { position: relative; min-height: 18px; font-size: 12.5px; }
.vpm-v-cond__hint em { position: absolute; left: 0; top: 0; font-style: normal; font-weight: 600; }
.vpm-v-cond__falta { color: #b54708; animation: vpmShow2a 7s infinite; }
.vpm-v-cond__ok { color: #146c43; animation: vpmShow2b 7s infinite; }
.vpm-v-cond__btn {
  align-self: flex-end;
  padding: 9px 22px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; color: #fff;
  background: #c3cad3;
  animation: vpmCondBtn 7s infinite;
}
@keyframes vpmCondBtn {
  0%, 44% { background: #c3cad3; box-shadow: none; }
  52%, 92% { background: var(--vpm-blue); box-shadow: 0 8px 18px rgba(71, 126, 207, 0.35); }
  100% { background: #c3cad3; }
}

/* ---- 5 · pedidos ---- */
.vpm-v-ped { display: flex; flex-direction: column; gap: 12px; }
.vpm-v-ped__states { display: flex; gap: 7px; flex-wrap: wrap; }
.vpm-v-ped__states span {
  padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  background: #f2f4f7; color: var(--vpm-muted);
  animation: vpmStateOn 8s infinite;
}
.vpm-v-ped__st--1 { --c: #6941c6; }
.vpm-v-ped__st--2 { --c: #175cd3; animation-delay: 2s !important; }
.vpm-v-ped__st--3 { --c: #b54708; animation-delay: 4s !important; }
.vpm-v-ped__st--4 { --c: #146c43; animation-delay: 6s !important; }
@keyframes vpmStateOn {
  0%, 22%, 100% { background: #f2f4f7; color: var(--vpm-muted); }
  6%, 16% { background: var(--c); color: #fff; }
}
.vpm-v-ped__edit {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border: 1px solid var(--vpm-line); border-radius: 10px;
  font-size: 13.5px; color: var(--vpm-ink);
}
.vpm-v-ped__qty { position: relative; font-size: 14px; min-width: 44px; text-align: right; }
.vpm-v-ped__qty span { animation: vpmShow2a 8s infinite; }
.vpm-v-ped__qty span + span { position: absolute; right: 0; top: 0; color: var(--vpm-teal-ink); animation: vpmShow2b 8s infinite; }
.vpm-v-ped__toast {
  align-self: flex-start;
  padding: 7px 12px; border-radius: 8px;
  background: #ddf3e6; color: #146c43;
  font-size: 12px; font-weight: 700;
  opacity: 0; animation: vpmFadeCycle 8s infinite;
  animation-delay: 3.6s;
}
.vpm-v-ped__doc {
  padding: 10px 12px; border-radius: 10px;
  border: 1.4px dashed #c9d2dc;
  font-size: 12.5px; font-weight: 600; color: var(--vpm-muted);
  opacity: 0; animation: vpmFadeCycle 8s infinite;
  animation-delay: 5.4s;
}

/* ---- 6 · vendedores ---- */
.vpm-v-vend { display: flex; flex-direction: column; gap: 12px; }
.vpm-v-vend__seller { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--vpm-ink); }
.vpm-v-vend__seller small { color: var(--vpm-muted); font-size: 12px; }
.vpm-v-vend__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vpm-blue); color: #fff;
  font-size: 12px; font-weight: 700;
}
.vpm-v-vend__clients { display: flex; gap: 8px; flex-wrap: wrap; }
.vpm-v-vend__clients span {
  padding: 6px 12px; border-radius: 999px;
  border: 1.4px solid var(--vpm-line);
  font-size: 12px; font-weight: 600; color: var(--vpm-muted);
  animation: vpmChipOn 7.5s infinite;
}
.vpm-v-vend__c--2 { animation-delay: 2.5s !important; }
.vpm-v-vend__c--3 { animation-delay: 5s !important; }
.vpm-v-vend__order {
  padding: 11px 13px; border-radius: 10px;
  background: #f6f8fa; border-left: 3px solid var(--vpm-teal);
  font-size: 13px; color: var(--vpm-ink);
  opacity: 0; animation: vpmFadeCycle 7.5s infinite;
  animation-delay: 5.6s;
}
.vpm-v-vend__order small { display: block; color: var(--vpm-muted); font-size: 11.5px; margin-top: 2px; }

/* ---- 7 · auto-seller ---- */
.vpm-v-auto { display: flex; flex-direction: column; gap: 14px; }
.vpm-v-auto__trigger {
  align-self: flex-start;
  padding: 6px 12px; border-radius: 999px;
  background: #fdf3d8; color: #8a6a12;
  font-size: 12px; font-weight: 700;
  animation: vpmPing 7s infinite;
}
.vpm-v-auto__mailrow { display: flex; align-items: center; gap: 10px; }
.vpm-v-auto__mail {
  font-size: 18px;
  animation: vpmMailFly 7s ease-in-out infinite;
}
@keyframes vpmMailFly {
  0%, 14% { transform: translateX(0); opacity: 1; }
  46% { transform: translateX(160px); opacity: 1; }
  54%, 100% { transform: translateX(160px); opacity: 0; }
}
.vpm-v-auto__line { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, #d5dce4 0 8px, transparent 8px 16px); }
.vpm-v-auto__client {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #eef2f6; color: var(--vpm-muted);
  font-size: 12px; font-weight: 700;
}
.vpm-v-auto__result {
  padding: 11px 13px; border-radius: 10px;
  background: rgba(77, 198, 190, 0.10); border: 1px solid rgba(77, 198, 190, 0.4);
  font-size: 13px; color: var(--vpm-ink);
  opacity: 0; animation: vpmFadeCycle 7s infinite;
  animation-delay: 3.4s;
}
.vpm-v-auto__result small { display: block; color: var(--vpm-muted); font-size: 11.5px; margin-top: 2px; }

/* ---- 8 · descuentos ---- */
.vpm-v-desc { display: flex; flex-direction: column; gap: 12px; }
.vpm-v-desc__qtyrow { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--vpm-muted); }
.vpm-v-desc__qty { position: relative; font-size: 16px; color: var(--vpm-ink); min-width: 40px; text-align: right; }
.vpm-v-desc__qty span { opacity: 0; animation: vpmShow3 7.5s infinite; }
.vpm-v-desc__qty span + span { position: absolute; right: 0; top: 0; }
.vpm-v-desc__qty span:nth-child(2) { animation-delay: 2.5s; }
.vpm-v-desc__qty span:nth-child(3) { animation-delay: 5s; }
.vpm-v-desc__tiers { display: flex; gap: 8px; }
.vpm-v-desc__tiers span {
  flex: 1;
  padding: 9px 10px; border-radius: 10px;
  border: 1.4px solid var(--vpm-line);
  font-size: 11.5px; color: var(--vpm-muted); text-align: center;
  animation: vpmTierOn 7.5s infinite;
}
.vpm-v-desc__tiers b { display: block; font-size: 14px; color: var(--vpm-ink); margin-top: 2px; }
.vpm-v-desc__t--2 { animation-delay: 2.5s !important; }
.vpm-v-desc__t--3 { animation-delay: 5s !important; }
@keyframes vpmTierOn {
  0%, 30%, 100% { border-color: var(--vpm-line); background: #fff; }
  5%, 26% { border-color: var(--vpm-teal-ink); background: rgba(77, 198, 190, 0.10); }
}
.vpm-v-desc__badge {
  padding: 9px 12px; border-radius: 10px;
  background: #f6f8fa;
  font-size: 12px; font-weight: 600; color: var(--vpm-teal-ink);
  opacity: 0; animation: vpmFadeCycle 7.5s infinite;
  animation-delay: 5.2s;
}

/* ---- 9 · marketing kit ---- */
.vpm-v-kit { display: flex; flex-direction: column; gap: 12px; }
.vpm-v-kit__grid { display: flex; gap: 8px; }
.vpm-v-kit__ph {
  flex: 1; aspect-ratio: 1; border-radius: 10px;
  background: linear-gradient(135deg, #e7ecf2, #d3dde8);
  animation: vpmPop 500ms ease both;
}
.vpm-v-kit__ph--2 { animation-delay: 250ms; background: linear-gradient(135deg, #efe3d2, #e0cdb0); }
.vpm-v-kit__ph--3 { animation-delay: 500ms; background: linear-gradient(135deg, #dfeee2, #c3e0cc); }
.vpm-v-kit__dl { display: flex; gap: 8px; flex-wrap: wrap; }
.vpm-v-kit__dl span {
  padding: 6px 11px; border-radius: 8px;
  background: #f2f4f7; font-size: 11.5px; font-weight: 700; color: var(--vpm-ink);
  animation: vpmPing 6.5s infinite;
}
.vpm-v-kit__dl span:nth-child(2) { animation-delay: 0.7s; }
.vpm-v-kit__dl span:nth-child(3) { animation-delay: 1.4s; }
.vpm-v-kit__wsp {
  padding: 11px 13px; border-radius: 12px 12px 12px 3px;
  background: #ddf3e6;
  font-size: 12.5px; color: #114b31;
  opacity: 0; animation: vpmFadeCycle 6.5s infinite;
  animation-delay: 2.6s;
}
.vpm-v-kit__wsp b { display: block; font-weight: 700; }
.vpm-v-kit__wsp small { font-size: 11.5px; color: #2c6b4d; }

/* ---- 10 · reportes ---- */
.vpm-v-rep { display: flex; flex-direction: column; gap: 12px; color: var(--vpm-blue); }
.vpm-v-rep__tiles { display: flex; gap: 8px; }
.vpm-v-rep__tiles span {
  flex: 1;
  padding: 10px 11px; border-radius: 10px;
  border: 1px solid var(--vpm-line);
  animation: vpmPop 500ms ease both;
}
.vpm-v-rep__tile--2 { animation-delay: 250ms !important; }
.vpm-v-rep__tile--3 { animation-delay: 500ms !important; }
.vpm-v-rep__tiles small { display: block; font-size: 10.5px; color: var(--vpm-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.vpm-v-rep__tiles b { font-size: 16px; color: var(--vpm-ink); }
.vpm-v-rep__tiles em { font-style: normal; font-size: 11px; font-weight: 700; color: #146c43; margin-left: 5px; }
.vpm-v-rep__spark { width: 100%; height: 48px; color: var(--vpm-blue); }
.vpm-v-rep__line {
  stroke-dasharray: 420; stroke-dashoffset: 420;
  animation: vpmSpark 6.5s ease-out infinite;
}
@keyframes vpmSpark { 0% { stroke-dashoffset: 420; } 45%, 88% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.vpm-v-rep__alert {
  align-self: flex-start;
  padding: 7px 12px; border-radius: 8px;
  background: #fdeceb; color: #b42318;
  font-size: 12px; font-weight: 700;
  opacity: 0; animation: vpmFadeCycle 6.5s infinite;
  animation-delay: 3s;
}

/* ================= CTA FINAL ================= */
.vpm-cta {
  background: var(--vpm-dark);
  color: #fff;
  padding: 78px 24px 84px;
}
.vpm-cta__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.vpm-cta h2 { color: #fff; }
.vpm-cta__actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 26px; }

/* ================= responsive extra ================= */
@media (max-width: 960px) {
  .vpm-hero { padding: 60px 20px 64px; }
  .vpm-hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .vpm-hero__actions { flex-direction: column; align-items: stretch; }
  .vpm-hero__cta-col { align-items: stretch; text-align: center; }
  .vpm-hero__visual { padding-bottom: 200px; }
  .vpm-hero__photo { margin-left: 28px; }
  .vpm-circuit { width: min(248px, 76%); }
  .vpm-btn { width: 100%; }
  .vpm-v-desc__tiers { flex-wrap: wrap; }
}

/* ===== pasada de lógica causal en las viñetas ===== */

/* hero: el pulso lateral recorre las estaciones al ritmo en que se encienden */
.vpm-circuit__pulse {
  position: absolute;
  left: 6px; top: 20px;
  width: 4px; height: 24px;
  border-radius: 999px;
  background: var(--vpm-teal);
  box-shadow: 0 0 12px rgba(77, 198, 190, 0.8);
  animation: vpmPulseTravel 7.5s linear infinite;
}
@keyframes vpmPulseTravel {
  0% { top: 20px; opacity: 1; }
  92% { top: calc(100% - 44px); opacity: 1; }
  100% { top: calc(100% - 44px); opacity: 0; }
}

/* catálogo: el stock acompaña a la variante activa (S/M/L/XL) */
.vpm-v-cat__stockval { position: relative; display: inline-block; min-width: 150px; color: var(--vpm-ink); }
.vpm-v-cat__stockval span { opacity: 0; animation: vpmShow4 8s infinite; font-weight: 700; }
.vpm-v-cat__stockval span + span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.vpm-v-cat__sv--2 { animation-delay: 2s !important; }
.vpm-v-cat__sv--3 { animation-delay: 4s !important; }
.vpm-v-cat__sv--4 { animation-delay: 6s !important; }
.vpm-v-cat__sv--low { color: #b54708; }
.vpm-v-cat__sv--out { color: #b42318; }
@keyframes vpmShow4 { 0%, 21% { opacity: 1; } 25%, 100% { opacity: 0; } }
/* la imagen ahora cambia EXACTAMENTE con el chip (2s / 4s / 6s) */
@keyframes vpmImgTint {
  0%, 24% { background: linear-gradient(135deg, #dfe7f0, #c8d6e6); }
  25%, 49% { background: linear-gradient(135deg, #efe3d2, #e0cdb0); }
  50%, 74% { background: linear-gradient(135deg, #dfeee2, #c3e0cc); }
  75%, 100% { background: linear-gradient(135deg, #ece7f2, #d8cfe8); }
}

/* condiciones: el mínimo queda a la vista para que la cuenta sea verificable */
.vpm-v-cond__min { font-size: 13.5px; color: var(--vpm-muted); font-weight: 700; }

/* pedidos: primero cambia la cantidad, DESPUÉS el aviso de editado, después el remito */
.vpm-v-ped__toast { animation-delay: 4.3s !important; }
.vpm-v-ped__doc { animation-delay: 6s !important; }

/* auto-seller: el cliente "se despierta" cuando le llega el email */
.vpm-v-auto__client { animation: vpmClientWake 7s infinite; animation-play-state: paused; }
.is-live .vpm-v-auto__client { animation-play-state: running; }
@keyframes vpmClientWake {
  0%, 44% { background: #eef2f6; color: var(--vpm-muted); transform: none; }
  50%, 88% { background: rgba(77, 198, 190, 0.2); color: var(--vpm-teal-ink); transform: scale(1.1); }
  100% { background: #eef2f6; color: var(--vpm-muted); }
}

/* descuentos: total calculado con el precio del tramo obtenido, sincronizado
   con la cantidad (12→1.000 · 60→900 · 120→790) */
.vpm-v-desc__total {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: #f6f8fa;
  font-size: 12.5px; color: var(--vpm-muted);
}
.vpm-v-desc__totalval { position: relative; min-width: 170px; text-align: right; font-weight: 500; }
.vpm-v-desc__totalval em { font-style: normal; opacity: 0; animation: vpmShow3 7.5s infinite; color: var(--vpm-muted); }
.vpm-v-desc__totalval em + em { position: absolute; right: 0; top: 0; white-space: nowrap; }
.vpm-v-desc__totalval strong { color: var(--vpm-teal-ink); font-weight: 800; }
.vpm-v-desc__tv--2 { animation-delay: 2.5s !important; }
.vpm-v-desc__tv--3 { animation-delay: 5s !important; }
/* === assets/css/pye-2026.css === */
/* pye-2026.css — /pagos-y-envios, generación 2026.
   Se monta sobre vpm-2026.css (hero, feat, shot, cta, reveal, is-live).
   Las "capturas" son viñetas esquemáticas en CSS: representan lo que hace
   cada módulo sin screenshots reales que se desactualizan.
   Toda animación corre solo con la sección en pantalla (.is-live) y se
   apaga con prefers-reduced-motion (heredado de vpm-2026.css). */

.pye {
  --pye-ok: #146c43;
  --pye-ok-bg: #ddf3e6;
  --pye-warn: #8a6a12;
  --pye-warn-bg: #fdf3d8;
  --pye-info: #1d4ed8;
  --pye-info-bg: #e4ecfd;
  --pye-soft: #f6f8fa;
}

/* antídoto de itálicas/subrayado, además del de .vpm */
.pye i, .pye em { font-style: normal; }

/* ---------- primitivas compartidas de las viñetas ---------- */
.pye-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--vpm-line);
  border-radius: 10px;
  background: #fff;
}
.pye-row__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(77, 198, 190, 0.16);
  color: var(--vpm-teal-ink);
  font-size: 11.5px;
  font-weight: 800;
}
.pye-row__ico svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pye-row__name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--vpm-ink);
  line-height: 1.3;
}
.pye-row__name small {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--vpm-muted);
}
.pye-tag {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.pye-tag--off { background: var(--pye-ok-bg); color: var(--pye-ok); }
.pye-tag--up { background: var(--pye-warn-bg); color: var(--pye-warn); }
.pye-tag--flat { background: #eef2f6; color: var(--vpm-muted); }
.pye-tag--info { background: var(--pye-info-bg); color: var(--pye-info); }

/* ---------- HERO · checkout con las condiciones ya cargadas ---------- */
.pye-co { display: flex; flex-direction: column; gap: 10px; }
.pye-co__who {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 11px;
  border-bottom: 1px dashed var(--vpm-line);
}
.pye-co__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2f6;
  color: var(--vpm-muted);
  font-size: 11.5px;
  font-weight: 800;
}
.pye-co__whotxt { flex: 1; font-size: 13px; font-weight: 700; color: var(--vpm-ink); line-height: 1.3; }
.pye-co__whotxt small { display: block; font-size: 11px; font-weight: 500; color: var(--vpm-muted); }

.pye-co__pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--vpm-line);
  border-radius: 10px;
  background: var(--pye-soft);
}
.pye-co__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vpm-muted);
  min-width: 84px;
}
.pye-co__val { flex: 1; font-size: 13px; font-weight: 700; color: var(--vpm-ink); }
.pye-co__from {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--vpm-teal-ink);
  background: rgba(77, 198, 190, 0.16);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* el envío alterna entre retiro y transporte; el total acompaña.
   El valor largo va absoluto: sin min-width la caja colapsa al ancho del
   valor corto y el importe se parte en vertical (bug real, ya visto). */
.pye-co__swap { position: relative; display: block; min-height: 18px; }
.pye-co__swap > span { display: block; white-space: nowrap; }
.pye-co__swap > span + span { position: absolute; left: 0; top: 0; width: 100%; }
.pye-co__sums .pye-co__swap { min-width: 78px; text-align: right; }
.pye-co__a { animation: vpmShow2a 8s infinite; }
.pye-co__b { animation: vpmShow2b 8s infinite; }

.pye-co__sums {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px;
  border-radius: 10px;
  background: var(--pye-soft);
  border: 1px solid var(--vpm-line);
}
.pye-co__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--vpm-muted);
  font-variant-numeric: tabular-nums;
}
.pye-co__line b { font-weight: 700; color: var(--vpm-ink); }
.pye-co__line--minus b { color: var(--pye-ok); }
.pye-co__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 3px;
  padding-top: 9px;
  border-top: 1px solid var(--vpm-line);
  font-size: 13px;
  font-weight: 700;
  color: var(--vpm-ink);
  font-variant-numeric: tabular-nums;
}
.pye-co__total .pye-co__swap { min-height: 20px; min-width: 118px; text-align: right; }
.pye-co__totalval { font-size: 17px; font-weight: 800; }

/* ---------- 1 · métodos de pago propios ---------- */
.pye-pm { display: flex; flex-direction: column; gap: 9px; }
.pye-pm .pye-row { animation: vpmPop 520ms ease both; }
.pye-pm .pye-row--2 { animation-delay: 260ms; }
.pye-pm .pye-row--3 { animation-delay: 520ms; }
.pye-pm .pye-row--4 { animation-delay: 780ms; }
.pye-pm__notes {
  margin-left: 41px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px dashed rgba(77, 198, 190, 0.55);
  background: rgba(77, 198, 190, 0.07);
  font-size: 12px;
  line-height: 1.6;
  color: var(--vpm-muted);
}
.pye-pm__notes b { display: block; color: var(--vpm-ink); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.pye-pm__notes span { display: block; }
.pye-pm__trail {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: 41px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--vpm-teal-ink);
}
.pye-pm__trail i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(77, 198, 190, 0.2);
  font-size: 10px;
}

/* ---------- 2 · cobros online: el estado del pedido ---------- */
.pye-pay { display: flex; flex-direction: column; gap: 12px; }
.pye-pay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--vpm-ink);
}
.pye-pay__head small { display: block; font-size: 11.5px; font-weight: 500; color: var(--vpm-muted); }
.pye-pay__states { position: relative; min-width: 116px; height: 26px; }
.pye-pay__st {
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  animation: pyeState3 9s infinite;
}
.pye-pay__st--1 { background: var(--pye-warn-bg); color: var(--pye-warn); }
.pye-pay__st--2 { background: var(--pye-info-bg); color: var(--pye-info); animation-delay: 3s; }
.pye-pay__st--3 { background: var(--pye-ok-bg); color: var(--pye-ok); animation-delay: 6s; }
@keyframes pyeState3 {
  0%, 2% { opacity: 0; transform: translateY(5px); }
  6%, 31% { opacity: 1; transform: none; }
  35%, 100% { opacity: 0; transform: translateY(-5px); }
}

.pye-pay__barwrap {
  height: 9px;
  border-radius: 999px;
  background: #eef2f6;
  overflow: hidden;
}
.pye-pay__bar {
  display: block;
  height: 100%;
  width: 62%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vpm-teal), var(--vpm-blue));
  animation: pyeFill 9s ease-in-out infinite;
}
@keyframes pyeFill {
  0%, 30% { width: 62%; }
  55%, 100% { width: 100%; }
}
.pye-pay__ledger {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--vpm-line);
  background: var(--pye-soft);
}
.pye-pay__mv {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--vpm-muted);
  font-variant-numeric: tabular-nums;
}
.pye-pay__mv span { flex: 1; }
.pye-pay__mv b { color: var(--vpm-ink); font-weight: 700; }
.pye-pay__mv i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--pye-ok-bg);
  color: var(--pye-ok);
  font-size: 10px;
  font-weight: 800;
}
.pye-pay__mv--pending i { background: var(--pye-warn-bg); color: var(--pye-warn); }
.pye-pay__amounts {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--vpm-muted);
  font-variant-numeric: tabular-nums;
}
.pye-pay__amounts b { color: var(--vpm-ink); font-weight: 700; }
.pye-pay__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pye-pay__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 9px;
  border: 1px solid var(--vpm-line);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: var(--vpm-ink);
}
.pye-pay__btn--send {
  border-color: rgba(71, 126, 207, 0.4);
  background: rgba(71, 126, 207, 0.08);
  /* azul oscurecido: var(--vpm-blue) sobre este tinte da 4.08:1, por debajo de 4.5 */
  color: #2c5aa0;
  animation: vpmPing 9s ease-in-out infinite;
  animation-delay: 2.4s;
}
.pye-pay__mail {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--vpm-line);
  background: var(--pye-soft);
  font-size: 12px;
  color: var(--vpm-muted);
  animation: vpmFadeCycle 9s ease-in-out infinite;
  animation-delay: 3.2s;
}
.pye-pay__mail i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(71, 126, 207, 0.14);
  color: #2c5aa0;
  font-size: 11px;
}

/* ---------- 3 · envíos: transportes y notas ---------- */
.pye-sh { display: flex; flex-direction: column; gap: 9px; }
.pye-sh .pye-row { animation: vpmPop 520ms ease both; }
.pye-sh .pye-row--2 { animation-delay: 240ms; }
.pye-sh .pye-row--3 { animation-delay: 480ms; }
.pye-sh .pye-row--4 { animation-delay: 720ms; }
.pye-sh__truck {
  background: rgba(71, 126, 207, 0.13);
  color: var(--vpm-blue);
}
.pye-sh__notes {
  margin-left: 41px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px dashed rgba(71, 126, 207, 0.45);
  background: rgba(71, 126, 207, 0.06);
  font-size: 12px;
  line-height: 1.6;
  color: var(--vpm-muted);
}
.pye-sh__notes b { display: block; color: var(--vpm-ink); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.pye-sh__notes span { display: block; }
.pye-sh__add {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px dashed var(--vpm-line);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vpm-muted);
}
.pye-sh__add i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #eef2f6;
  color: var(--vpm-muted);
  font-size: 14px;
  font-weight: 700;
}

/* ---------- 4 · zonas y envío gratis ---------- */
.pye-zn { display: flex; flex-direction: column; gap: 9px; }
.pye-zn__zone {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 1px solid var(--vpm-line);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vpm-ink);
}
.pye-zn__zone span { flex: 1; }
.pye-zn__price { position: relative; font-variant-numeric: tabular-nums; font-weight: 700; min-width: 78px; text-align: right; }
.pye-zn__price em { animation: vpmShow2a 10s infinite; }
.pye-zn__free {
  position: absolute;
  right: 0;
  top: 0;
  color: var(--pye-ok);
  animation: vpmShow2b 10s infinite;
}
.pye-zn__level {
  margin-top: 4px;
  padding: 12px;
  border-radius: 10px;
  background: var(--pye-soft);
  border: 1px solid var(--vpm-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pye-zn__ltitle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--vpm-ink);
}
.pye-zn__ltitle small { font-size: 11.5px; font-weight: 500; color: var(--vpm-muted); font-variant-numeric: tabular-nums; }
.pye-zn__track { display: block; height: 9px; border-radius: 999px; background: #e7ebf0; overflow: hidden; }
.pye-zn__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vpm-teal), var(--vpm-blue));
  width: 46%;
  animation: pyeLevel 10s ease-in-out infinite;
}
@keyframes pyeLevel {
  0%, 34% { width: 46%; }
  52%, 94% { width: 100%; }
  100% { width: 46%; }
}
/* dos estados que se alternan en el mismo lugar: sin hueco cuando cambia */
.pye-zn__badge {
  position: relative;
  align-self: stretch;
  min-height: 24px;
  font-size: 11.5px;
  font-weight: 700;
}
.pye-zn__badge > span {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
}
.pye-zn__badge > span + span { position: absolute; left: 0; top: 0; }
.pye-zn__before {
  background: #eef2f6;
  color: var(--vpm-muted);
  font-weight: 600;
  animation: vpmShow2a 10s infinite;
}
.pye-zn__after {
  background: var(--pye-ok-bg);
  color: var(--pye-ok);
  animation: vpmShow2b 10s infinite;
}

/* ---------- 5 · la ficha del cliente ---------- */
.pye-fc { display: flex; flex-direction: column; gap: 0; }
.pye-fc__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 13px;
  margin-bottom: 4px;
  border-bottom: 1px dashed var(--vpm-line);
}
.pye-fc__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2f6;
  color: var(--vpm-muted);
  font-size: 12px;
  font-weight: 800;
}
.pye-fc__who { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--vpm-ink); line-height: 1.3; }
.pye-fc__who small { display: block; font-size: 11.5px; font-weight: 500; color: var(--vpm-muted); }
.pye-fc__field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 12.5px;
  border: 1px solid transparent;
}
.pye-fc__field + .pye-fc__field { border-top: 1px solid var(--vpm-line); border-radius: 0; }
.pye-fc__k { min-width: 128px; color: var(--vpm-muted); font-weight: 500; }
.pye-fc__v { flex: 1; color: var(--vpm-ink); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
/* las dos filas que manda esta página se iluminan en el ciclo */
.pye-fc__field--hot {
  animation: pyeHot 8s ease-in-out infinite;
  border-radius: 9px;
}
.pye-fc__field--hot + .pye-fc__field--hot { border-top-color: transparent; }
.pye-fc__field--hot2 { animation-delay: 900ms; }
@keyframes pyeHot {
  0%, 14% { background: transparent; border-color: transparent; }
  26%, 62% { background: rgba(77, 198, 190, 0.1); border-color: rgba(77, 198, 190, 0.45); }
  76%, 100% { background: transparent; border-color: transparent; }
}
.pye-fc__foot {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(77, 198, 190, 0.09);
  border: 1px solid rgba(77, 198, 190, 0.32);
  font-size: 12px;
  font-weight: 600;
  color: var(--vpm-teal-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pye-fc__foot i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(77, 198, 190, 0.24);
  font-size: 10px;
}

/* ---------- responsive ---------- */
@media (max-width: 620px) {
  .pye-co__label { min-width: 68px; font-size: 10px; }
  .pye-co__from { display: none; }
  .pye-fc__k { min-width: 104px; }
  .pye-pm__notes,
  .pye-pm__trail,
  .pye-sh__notes { margin-left: 0; }
}