/* Maria Avis — Brand layer for DS-maria-final
   Lexend local (sem Google Fonts) · lowercase · premium gradients */

/* ── Lexend — fontes locais ── */
@font-face {
  font-family: "Lexend";
  src: url("fonts/Lexend-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("fonts/Lexend-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("fonts/Lexend-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("fonts/Lexend-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("fonts/Lexend-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}



/* ── Base — fundo creme do portfólio ── */

:root {
  /* ── Portfólio PDF — tons extraídos ── */
  --maria-cream: #e3e2dd;
  --maria-cream-warm: #e4d2c6;
  --maria-cream-deep: #ded8cc;
  /* Laranja — logo Maria Avis (#e94e1b) */
  --maria-orange: #e94e1b;
  --maria-orange-soft: #f07d4d;
  --maria-orange-deep: #c94310;
  --maria-coral: var(--maria-orange);
  --maria-coral-soft: var(--maria-orange-soft);
  --maria-coral-deep: var(--maria-orange-deep);
  --maria-peach: #e4c0a8;
  --maria-peach-light: #e4d8cc;
  --maria-peach-deep: #ebb183;
  /* Azul profundo — referência visual da marca */
  --maria-blue: #001a8e;
  --maria-blue-soft: #3355b8;
  --maria-blue-deep: #000b4d;
  --maria-mauve: var(--maria-blue);
  --maria-mauve-soft: var(--maria-blue-soft);
  --maria-mauve-deep: var(--maria-blue-deep);
  --maria-lilac: #8090c8;
  --maria-mist-blue: #d8deea;
  --maria-charcoal: #464545;
  --maria-charcoal-soft: #5c5c58;
  --maria-white-card: #faf9f7;
  /* Logo (mantido para logotipos) */
  --maria-purple: #402c86;
  --maria-purple-deep: #2f2068;
  /* Gradientes — laranja suave (sem azul nos botões) */
  --ma-grad-premium: linear-gradient(
    158deg,
    var(--maria-orange-soft) 0%,
    var(--maria-coral)       55%,
    var(--maria-orange-deep) 100%
  );
  /* Hero — shimmer quente com contraste para animação visível */
  --ma-grad-hero-text: linear-gradient(
    90deg,
    var(--maria-orange-deep)  0%,
    var(--maria-coral)       22%,
    var(--maria-orange-soft) 44%,
    var(--maria-peach-deep)  56%,
    var(--maria-coral)       78%,
    var(--maria-orange-deep) 100%
  );
  --ma-grad-soft: linear-gradient(
    135deg,
    var(--maria-peach-light) 0%,
    var(--maria-peach)       100%
  );
  --ma-grad-glow: radial-gradient(
    ellipse at 50% 0%,
    rgba(233, 78, 27, 0.12) 0%,
    transparent              70%
  );
  /* Map legacy tokens → portfólio */
  --localyzer-jungle-500: var(--maria-charcoal);
  --localyzer-jungle-300: #8a8580;
  --localyzer-jungle-100: #d4d3ce;
  --localyzer-turquoise-500: var(--maria-coral);
  --localyzer-turquoise-300: var(--maria-peach);
  --localyzer-turquoise-100: var(--maria-peach-light);
  --localyzer-lemon-500: var(--maria-peach-deep);
  --localyzer-lemon-300: var(--maria-cream-warm);
  --localyzer-lemon-100: var(--maria-cream);
  --localyzer-peach-500: var(--maria-coral);
  --localyzer-peach-300: var(--maria-coral-soft);
  --localyzer-peach-100: var(--maria-peach-light);
  --localyzer-violet-500: var(--maria-mauve);
  --localyzer-violet-300: var(--maria-mauve-soft);
  --localyzer-violet-100: #deccd8;
  --ma-btn-height: 5.2rem;
  --ma-btn-height-nav: 4.8rem;
  --ma-btn-px: 3.2rem;
  --ma-btn-fs: 2rem;
  --ma-ease-out: cubic-bezier(0.15, 0.85, 0.3, 1);
  --ma-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ma-shadow-soft: 0 8px 32px rgba(70, 69, 69, 0.07);
  --ma-shadow-lift: 0 16px 48px rgba(233, 78, 27, 0.1);
  --ma-shadow-card: 0 2px 8px rgba(70, 69, 69, 0.06), 0 12px 32px rgba(70, 69, 69, 0.06);
  --ma-ring-focus: 0 0 0 3px rgba(233, 78, 27, 0.18);
}

html body {
  background-color: var(--maria-cream) !important;
  color: var(--maria-charcoal) !important;
}

/* ── Lexend everywhere + lowercase ── */
html body,
html body *:not(.w-icon):not(.w-icon-dropdown-toggle):not(.w-icon-nav-menu):not(.w-icon-arrow-down):not(.w-icon-slider-right):not(.w-icon-slider-left):not(.w-icon-file-upload-icon):not(.w-icon-file-upload-remove) {
  font-family: "Lexend", sans-serif !important;
}

html body *:not(input):not(textarea):not(select) {
  text-transform: lowercase !important;
}

/* Corpo em português — nomes, veículos e frases leem em sentença */
html body p,
html body .paragraph-l,
html body .paragraph-s,
html body .paragraph-m,
html body .m3-hero-p,
html body .hp-hero-p,
html body .book-demo-subtitle,
html body .ct-main-form-field-label,
html body .ct-form-checkbox-label,
html body .hp-cust-name,
html body blockquote,
html body .m3-client-quote-text,
html body .m3-clients-close-text,
html body .form-success-title,
html body .w-form-fail {
  text-transform: none !important;
}

html body input::placeholder,
html body textarea::placeholder {
  text-transform: none !important;
}

/* Hierarquia leve — evita bold pesado; máximo efetivo: semibold (600) */
.hp-hero-h1,
.h1,
.hp-footer-h1,
.hp-trust-metrics-h1,
.platform-h2 {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

.h2,
.h3,
.h4 {
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* Espaço para descendentes (g, p, q, y) — evita corte em títulos */
.hp-hero-h1,
.h1,
.h2,
.h3,
.h4,
.hp-trust-metrics-h1,
.platform-h2,
html body h1,
html body h2,
html body h3,
html body h4 {
  line-height: 1.08 !important;
  padding-bottom: 0.08em;
}

.caption,
.btn-primary,
.global-nav-link {
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  position: relative;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.h5,
.paragraph-l,
.paragraph-m,
.paragraph-s {
  font-weight: 400 !important;
}

strong,
b,
p strong,
p b {
  font-weight: 500 !important;
}

html body h1 {
  font-weight: 600 !important;
}

html body h2,
html body h3,
html body h4 {
  font-weight: 500 !important;
}

html body h5,
html body h6 {
  font-weight: 400 !important;
}

.hp-ctr-h2 {
  font-weight: 500 !important;
  font-size: 5.2vw !important;
}

/* ── Section ambient glow (sem ondas) ── */
.ds-section,
.hp-platform-s,
.hp-trust-s,
.hp-customer-s,
.hp-insights-s {
  position: relative;
  isolation: isolate;
}

.ds-section::before,
.hp-platform-s::before,
.hp-trust-s::before,
.hp-customer-s::before,
.hp-insights-s::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ma-grad-glow);
  pointer-events: none;
  z-index: 0;
}

.ds-section > *,
.hp-platform-s > *,
.hp-trust-s > *,
.hp-customer-s > *,
.hp-insights-s > * {
  position: relative;
  z-index: 1;
}

/* ── Logo nav — creme: logotipo escuro ── */
.global-header-logo-c,
.maria-logo-wrap.nav-logo {
  flex: none;
  min-width: 0;
  overflow: visible;
}
.maria-logo-light,
.maria-logo-dark {
  height: 3.6rem;
  width: auto;
  max-width: min(46vw, 18rem);
  object-fit: contain;
  object-position: left center;
  display: block;
}
.maria-logo-light { display: none; }
.maria-logo-dark { display: block; }
.global-header-c.sticky .maria-logo-dark { display: block; }

/* Nav sobre fundo creme */
.global-header-c:not(.sticky) .global-nav-link,
.global-header-c:not(.sticky) .global-nav-menu-icon {
  color: var(--maria-charcoal) !important;
}

.global-header-c:not(.sticky) .btn-primary.nav-bar.secondary {
  color: var(--maria-charcoal) !important;
  border-color: rgba(70, 69, 69, 0.25) !important;
}

/* ── Hero — fundo creme + mesh portfólio ── */
.hp-hero-s {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--maria-cream) !important;
  color: var(--maria-charcoal) !important;
}

.hp-hero-p {
  color: var(--maria-charcoal-soft) !important;
}

.ma-hero-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ma-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.65;
  will-change: transform;
}

.ma-orb--1 {
  width: 42rem;
  height: 42rem;
  background: radial-gradient(circle, rgba(233, 78, 27, 0.45) 0%, transparent 70%);
  top: -12rem;
  right: -8rem;
  animation: ma-float-1 18s ease-in-out infinite;
}

.ma-orb--2 {
  width: 36rem;
  height: 36rem;
  background: radial-gradient(circle, rgba(0, 26, 142, 0.4) 0%, transparent 70%);
  bottom: -10rem;
  left: -6rem;
  animation: ma-float-2 22s ease-in-out infinite;
}

.ma-orb--3 {
  width: 28rem;
  height: 28rem;
  background: radial-gradient(circle, rgba(216, 222, 234, 0.5) 0%, transparent 70%);
  top: 30%;
  left: 40%;
  animation: ma-float-3 26s ease-in-out infinite;
}

.ma-orb--4 {
  width: 32rem;
  height: 32rem;
  background: radial-gradient(circle, rgba(228, 192, 168, 0.42) 0%, transparent 68%);
  top: 55%;
  right: 15%;
  animation: ma-float-2 26s ease-in-out infinite reverse;
}

@keyframes ma-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-4rem, 3rem) scale(1.08); }
}
@keyframes ma-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(5rem, -2rem) scale(1.05); }
}
@keyframes ma-float-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-3rem, -4rem) scale(0.95); }
}

.hp-hero-s .container {
  position: relative;
  z-index: 2;
}

.hp-hero-h1.ma-gradient-text {
  background: var(--ma-grad-hero-text) !important;
  background-size: 280% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: ma-shimmer 11s linear infinite !important;
}

@keyframes ma-shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 100% center; }
}

@keyframes ma-hero-shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 100% center; }
}

/* ── Cards base — posição e borda ── */
.hp-platform-card-w,
.hp-trust-card-w,
.hp-trusted-card-w,
.expand-card-w,
.hp-insights-article-w,
.hp-mark-perk-w,
.ma-logo-card,
.ds-swatch {
  position: relative;
  overflow: hidden;
  border-color: rgba(70, 69, 69, 0.1) !important;
  border-radius: var(--corner-radius-m) !important;
  box-shadow: 0 2px 12px rgba(70, 69, 69, 0.07);
  transition: transform 0.3s var(--ma-ease-out), box-shadow 0.3s ease;
}

/* ── Gradient border animado — apenas em cards com fundo sólido ──
   EXCLUÍDOS: hp-platform-card-w e hp-insights-article-w (fotos full-bleed)
   porque mask-composite:exclude pode falhar e cobrir a foto com gradiente ── */
.hp-trust-card-w::before,
.hp-trusted-card-w::before,
.hp-mark-perk-w::before,
.ma-logo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--ma-grad-premium);
  background-size: 200% 200%;
  animation: ma-border-flow 10s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
  opacity: 0.45;
}

/* Cards com foto — borda simples e segura, sem risco de wash-out */
.hp-platform-card-w {
  box-shadow: 0 4px 24px rgba(70, 69, 69, 0.12);
}
.hp-insights-article-w {
  box-shadow: 0 2px 12px rgba(70, 69, 69, 0.06);
  border: 1px solid rgba(70, 69, 69, 0.08);
}

@keyframes ma-border-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hp-trust-card-w::after,
.hp-trusted-card-w::after,
.expand-card-w::after,
.hp-mark-perk-w::after,
.ma-logo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ma-grad-soft);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  z-index: 1;
}

.hp-trust-card-w:hover::after,
.hp-trusted-card-w:hover::after,
.expand-card-w:hover::after,
.hp-mark-perk-w:hover::after,
.ma-logo-card:hover::after {
  opacity: 1;
}

.ds-swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    160deg,
    rgba(233, 78, 27, 0.2) 0%,
    transparent 40%,
    rgba(0, 26, 142, 0.15) 100%
  );
  pointer-events: none;
}

.ds-surface-jungle::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 90%, rgba(233, 78, 27, 0.2), transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 10%, rgba(0, 26, 142, 0.16), transparent 50%);
  pointer-events: none;
}

/* ── Buttons — gradient fill ── */


.btn-primary:not(.submit):not(.arrow):not(.back):not(.blog):not(.newsletter):not(.pagination) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.8rem;
  min-height: var(--ma-btn-height);
  height: var(--ma-btn-height);
  padding: 0 var(--ma-btn-px) !important;
  font-size: var(--ma-btn-fs) !important;
  line-height: 1 !important;
  box-sizing: border-box;
  text-transform: lowercase;
}

.btn-primary.nav-bar {
  min-height: var(--ma-btn-height-nav) !important;
  height: var(--ma-btn-height-nav) !important;
  padding: 0 2.6rem !important;
}

.btn-primary.hp-hero {
  min-height: var(--ma-btn-height) !important;
  height: var(--ma-btn-height) !important;
  padding: 0 3.6rem !important;
  font-size: var(--ma-btn-fs) !important;
}

.btn-primary.hp-hero.outline {
  padding: 0 3.2rem !important;
}

.hp-hero-btn-svg {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
}

.hp-hero-cta-c {
  align-items: center !important;
}

/* Showcase do DS — mesma altura em todos os exemplos */
.ds-row .btn-primary.nav-bar {
  min-height: var(--ma-btn-height) !important;
  height: var(--ma-btn-height) !important;
}

.btn-primary:not(.outline):not(.secondary) {
  background: var(--ma-grad-premium) !important;
  background-size: 200% auto !important;
  border: none !important;
  transition: transform 0.35s cubic-bezier(0.15, 0.85, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.15, 0.85, 0.3, 1),
    background-position 0.45s ease;
}

.btn-primary:not(.outline):not(.secondary):hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(233, 78, 27, 0.28);
  background-position: 100% center !important;
}

.btn-primary.outline {
  position: relative;
  background: transparent !important;
  overflow: hidden;
  box-shadow: none !important;
  border: none !important;
  color: var(--maria-charcoal) !important;
}

.btn-primary.outline::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--ma-grad-premium);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.btn-primary.outline:hover {
  background: rgba(233, 78, 27, 0.06) !important;
  color: var(--maria-coral-deep) !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

/* Outline no hero claro — legível sobre creme */
.hp-hero-s .btn-primary.hp-hero.outline {
  color: var(--maria-charcoal) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.hp-hero-s .btn-primary.hp-hero.outline::before {
  display: block;
}

.hp-hero-s .btn-primary.hp-hero.outline:hover {
  color: var(--maria-coral-deep) !important;
  background: rgba(233, 78, 27, 0.08) !important;
}

/* ── Seções escuras — carvão limpo sem azul no gradiente ── */
.hp-advg-s,
.footer-s {
  background: linear-gradient(
    168deg,
    #3a3a38 0%,
    var(--maria-charcoal) 55%,
    #2e2e2c 100%
  ) !important;
  position: relative;
  overflow: hidden;
}

.hp-advg-s::before,
.footer-s::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 15% 85%, rgba(233, 78, 27, 0.22), transparent 55%),
    radial-gradient(ellipse 55% 45% at 85% 15%, rgba(0, 26, 142, 0.18), transparent 50%),
    radial-gradient(ellipse 40% 35% at 50% 50%, rgba(0, 11, 77, 0.12), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.hp-advg-s > *,
.footer-s > * {
  position: relative;
  z-index: 1;
}

/* ── Logostrip — marcas em cinza (máscara monocromática) ── */
.hp-hero-s .logostrip-c .hp-hero-logo {
  display: block;
  height: 2.8rem;
  width: auto;
  max-width: 14rem;
  object-fit: contain;
  object-position: center;
  /* Silhueta preta + opacidade = cinza carvão uniforme sobre creme */
  filter: grayscale(1) brightness(0);
  opacity: 0.38;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.hp-hero-s .logostrip-c .hp-hero-logo-w {
  padding: 0 1.6rem;
}

.hp-hero-s .logostrip-c .hp-hero-logo-w:hover .hp-hero-logo {
  opacity: 0.62;
  transform: scale(1.04);
}

/* ── Logo grid — colunas proporcionais dentro do container ── */
.ma-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 2.4rem;
  width: 100%;
  max-width: 100%;
}

.ma-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.4rem;
  border-radius: var(--corner-radius-m);
  border: 1px solid rgba(70, 69, 69, 0.08);
  background: var(--maria-white-card);
  min-height: 10rem;
  box-shadow: var(--ma-shadow-card);
  transition: transform 0.4s var(--ma-ease-out), box-shadow 0.4s var(--ma-ease-out);
}

.ma-logo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(233, 78, 27, 0.1);
}

.ma-logo-card img {
  position: relative;
  z-index: 2;
  max-width: 100%;
  max-height: 5rem;
  width: auto;
  height: auto;
}

.ma-logo-card--dark {
  background: linear-gradient(145deg, var(--maria-charcoal) 0%, var(--maria-mauve-deep) 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ── Grain + glass nav ── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ── Footer marquee ── */
.global-footer-strip-c {
  position: relative;
  z-index: 2;
  overflow: visible;
  padding: 1.2rem 0 0.8rem;
}

.global-footer-text-c {
  overflow: visible;
  align-items: center;
}

.hp-footer-h1 {
  display: inline-block;
  line-height: 1.12 !important;
  padding-bottom: 0.1em;
  overflow: visible;
  background: var(--ma-grad-premium);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ma-shimmer 12s linear infinite;
}

/* ── DS scaffolding ── */
.ds-block,
.ds-type-row {
  border-color: rgba(70, 69, 69, 0.1) !important;
}


.ds-surface-jungle {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    155deg,
    #3a3a38 0%,
    var(--maria-charcoal) 100%
  ) !important;
}

/* Botões hero em superfície escura — contraste legível */
.ds-surface-jungle .ds-row,
.hp-advg-s .hp-advg-cta-c,
.footer-s .global-footer-cta-c {
  position: relative;
  z-index: 1;
}

.ds-surface-jungle .btn-primary.hp-hero:not(.outline),
.hp-advg-s .btn-primary.hp-hero:not(.outline),
.footer-s .btn-primary.hp-hero:not(.outline) {
  background: var(--maria-white-card) !important;
  background-image: none !important;
  color: var(--maria-charcoal) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.ds-surface-jungle .btn-primary.hp-hero:not(.outline):hover,
.hp-advg-s .btn-primary.hp-hero:not(.outline):hover,
.footer-s .btn-primary.hp-hero:not(.outline):hover {
  background: #ffffff !important;
  color: var(--maria-charcoal) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
}

.ds-surface-jungle .btn-primary.hp-hero.outline,
.hp-advg-s .btn-primary.hp-hero.outline,
.footer-s .btn-primary.hp-hero.outline {
  color: var(--maria-white-card) !important;
  background: rgba(250, 249, 247, 0.06) !important;
  box-shadow: inset 0 0 0 1.5px rgba(250, 249, 247, 0.72) !important;
}

.ds-surface-jungle .btn-primary.hp-hero.outline::before,
.hp-advg-s .btn-primary.hp-hero.outline::before,
.footer-s .btn-primary.hp-hero.outline::before {
  display: none;
}

.ds-surface-jungle .btn-primary.hp-hero.outline:hover,
.hp-advg-s .btn-primary.hp-hero.outline:hover,
.footer-s .btn-primary.hp-hero.outline:hover {
  color: var(--maria-peach-light) !important;
  background: rgba(250, 249, 247, 0.1) !important;
  box-shadow: inset 0 0 0 1.5px var(--maria-coral-soft) !important;
}

.ds-surface-jungle .btn-primary.hp-hero.outline .hp-hero-btn-svg,
.hp-advg-s .btn-primary.hp-hero.outline .hp-hero-btn-svg,
.footer-s .btn-primary.hp-hero.outline .hp-hero-btn-svg {
  color: currentColor;
}

.ds-head .caption {
  background: var(--ma-grad-premium);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ma-shimmer 14s linear infinite;
}

/* ── Icons + surfaces ── */
/* Stroke-based Lucide icons: inherit color from context */
.trusted-icon {
  color: var(--maria-charcoal);
  display: block;
}

/* Legacy fill-based icons fallback */
.trusted-icon path[fill="#003F3A"],
.trusted-icon path[fill="#003f3a"],
.trusted-icon path[fill="#402c86"],
.trusted-icon path[fill="#464545"] {
  fill: var(--maria-charcoal) !important;
}

/* Grids de ícones DS — dentro do container, com quebra natural */
.ds-ui-glyph-grid,
.ds-feature-icon-grid {
  align-items: flex-start;
  column-gap: 4.8rem;
  row-gap: 3.2rem;
  width: 100%;
  max-width: 100%;
}

.ds-ui-glyph-grid .ds-icon-cell,
.ds-feature-icon-grid .ds-icon-cell {
  flex: 0 0 auto;
  min-width: 9rem;
}

.ma-ui-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  color: var(--maria-charcoal);
}

.ma-ui-icon-wrap--sm {
  width: 4.8rem;
  height: 4.8rem;
}

.ma-ui-icon--stroke {
  color: var(--maria-charcoal);
}

.ma-ui-social-pill {
  color: var(--maria-charcoal);
}

.ma-ui-social-pill .footer-social-icon rect {
  stroke: rgba(70, 69, 69, 0.22);
  stroke-opacity: 1;
}

.ma-ui-social-pill .footer-social-icon path {
  fill: var(--maria-charcoal) !important;
}

.slider-arrow path[fill="#003F3A"],
.slider-arrow path[fill="#003f3a"],
.slider-arrow path[fill="#402c86"],
.slider-arrow path[fill="#464545"] {
  fill: var(--maria-charcoal) !important;
}

.quote-ico path[fill="#00D9CC"],
.quote-ico path[fill="#00d9cc"],
.quote-ico path[fill="#f9b233"],
.quote-ico path[fill="#ec7256"],
.quote-ico path[fill="#e94e1b"] {
  fill: var(--maria-coral) !important;
}

.bg-color-soft-jungle {
  background: linear-gradient(
    165deg,
    var(--maria-cream-deep) 0%,
    var(--maria-peach-light) 100%
  ) !important;
}

/* Perk cards — paleta Maria (classes legadas do template) */
.hp-mark-perk-w.bg-color-turquoise-300 {
  background: linear-gradient(
    158deg,
    var(--maria-peach-light) 0%,
    var(--maria-peach) 100%
  ) !important;
}

.hp-mark-perk-w.bg-color-lemon-300 {
  background: linear-gradient(
    158deg,
    var(--maria-cream-warm) 0%,
    var(--maria-mist-blue)  100%
  ) !important;
}

.hp-mark-perk-w.bg-color-violet-300 {
  background: linear-gradient(
    158deg,
    #5a7ad4 0%,
    #2a4cb8 100%
  ) !important;
}

/* Texto branco em todos os cards azuis — garantia de leitura */
.hp-mark-perk-w.bg-color-violet-300 .heading-3,
.hp-mark-perk-w.bg-color-violet-300 h3,
.hp-mark-perk-w.bg-color-violet-300 .paragraph-m,
.hp-mark-perk-w.bg-color-violet-300 .paragraph-s,
.hp-mark-perk-w.bg-color-violet-300 .caption,
.hp-mark-perk-w.bg-color-violet-300 .ma-perk-tag {
  color: var(--maria-white-card) !important;
}

.hp-mark-perk-w.bg-color-peach-300 {
  background: linear-gradient(
    158deg,
    var(--maria-coral-soft) 0%,
    var(--maria-peach-deep) 100%
  ) !important;
}

/* Trust cards — faixas de cor (classes legadas Localyzer) */
.bg-color-turquoise {
  background-color: var(--maria-coral) !important;
}

.bg-color-deep-jungle {
  background: linear-gradient(
    155deg,
    #3a3a38 0%,
    var(--maria-charcoal) 100%
  ) !important;
}

.bg-color-lemon {
  background-color: var(--maria-peach-deep) !important;
}

.hp-mark-perk-w.bg-color-soft-jungle .hp-mark-perk-title,
.hp-mark-perk-w.bg-color-soft-jungle .hp-mark-perk-title *,
.hp-mark-perk-w.bg-color-soft-jungle .ma-perk-stat {
  color: var(--maria-charcoal) !important;
}

.hp-mark-perk-w.ma-perk-inverted {
  color: var(--maria-white-card);
}

.hp-mark-perk-w.ma-perk-inverted .heading-3,
.hp-mark-perk-w.ma-perk-inverted .paragraph-s,
.hp-mark-perk-w.ma-perk-inverted .paragraph-m {
  color: inherit;
}

.hp-mark-perk-w.ma-perk-inverted.bg-color-violet-300 {
  background: linear-gradient(
    158deg,
    #2a4cb8 0%,
    #1a3499 100%
  ) !important;
}

/* DS — vitrine de perk cards */
.ds-perk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
  align-items: stretch;
}

.ds-perk-grid .hp-mark-perk-w,
.ds-perk-grid .hp-mark-perk-expand {
  min-height: 34rem;
}

.ds-perk-grid .hp-mark-perk-expand,
.ds-perk-grid .ma-perk-expand-demo {
  grid-column: span 2;
  min-height: 28rem;
}

.ds-perk-grid .ma-perk-compact {
  min-height: 24rem;
  padding-bottom: 4rem !important;
}

.ds-perk-grid .ma-perk-text-only {
  justify-content: flex-start;
  padding-bottom: 4rem !important;
}

.ma-perk-tag {
  display: inline-block;
  opacity: 0.72;
  margin-bottom: 0.4rem;
}

.ma-perk-tag--light {
  color: rgba(250, 249, 247, 0.85);
  opacity: 1;
}

.ma-perk-stat {
  font-size: clamp(3.6rem, 5vw, 5.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.8rem;
}

.hp-mark-perk-expand-title .ma-perk-tag {
  margin-bottom: 1.2rem;
}

.ma-perk-expand-demo .btn-primary.secondary {
  color: var(--maria-charcoal) !important;
}

/* Expand card — overlay + blur na região do texto */
.hp-mark-perk-expand-img {
  z-index: 0;
}

.hp-mark-perk-expand-img .global-img-zoom {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-mark-perk-expand-img .overlay-gradient {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    102deg,
    rgba(46, 45, 44, 0.78) 0%,
    rgba(46, 45, 44, 0.52) 34%,
    rgba(46, 45, 44, 0.18) 52%,
    transparent 68%
  );
}

.hp-mark-perk-expand::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: min(54%, 46rem);
  height: 100%;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: rgba(35, 34, 33, 0.22);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 72%, transparent 100%);
}

.hp-mark-perk-expand-title,
.hp-mark-perk-expand-cta {
  z-index: 2;
}

@media (max-width: 767px) {
  .hp-mark-perk-expand::before {
    width: 100%;
    height: 62%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
  }

  .hp-mark-perk-expand-img .overlay-gradient {
    background: linear-gradient(
      180deg,
      rgba(46, 45, 44, 0.82) 0%,
      rgba(46, 45, 44, 0.48) 42%,
      transparent 68%
    );
  }
}

@media (max-width: 991px) {
  .ds-perk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-perk-grid .hp-mark-perk-expand,
  .ds-perk-grid .ma-perk-expand-demo {
    grid-column: span 2;
  }
}

@media (max-width: 767px) {
  .ds-perk-grid {
    grid-template-columns: 1fr;
  }

  .ds-perk-grid .hp-mark-perk-expand,
  .ds-perk-grid .ma-perk-expand-demo {
    grid-column: span 1;
    min-height: 32rem;
  }
}

::selection,
::-webkit-selection {
  background-color: var(--maria-peach) !important;
  color: var(--maria-charcoal) !important;
}

body:has(.btn-primary.submit:hover) .btn-primary.arrow,
body:has(.btn-primary.arrow:hover) .btn-primary.submit {
  background: var(--ma-grad-premium) !important;
  background-size: 200% auto !important;
}

.footer-social-link:hover .footer-social-icon path:last-child,
.footer-social-link:hover .footer-social-icon rect + path {
  fill: var(--maria-coral);
}

.social-frame-svg path[stroke="#402c86"],
.social-frame-svg path[stroke="#402C86"],
.social-frame-svg path[stroke="#464545"],
.social-frame-svg path[stroke="#003F3A"],
.social-frame-svg path[stroke="#003f3a"] {
  stroke: var(--maria-charcoal) !important;
}

.social-frame-svg path[fill="#402c86"],
.social-frame-svg path[fill="#402C86"],
.social-frame-svg circle[fill="#402c86"],
.social-frame-svg circle[fill="#402C86"],
.social-frame-svg path[fill="#464545"],
.social-frame-svg circle[fill="#464545"],
.social-frame-svg path[fill="#003F3A"],
.social-frame-svg path[fill="#003f3a"],
.social-frame-svg circle[fill="#003F3A"],
.social-frame-svg circle[fill="#003f3a"] {
  fill: var(--maria-charcoal) !important;
}

.social-frame-svg path[fill="#f9b233"],
.social-frame-svg path[stroke="#f9b233"],
.social-frame-svg path[fill="#ec7256"],
.social-frame-svg path[stroke="#ec7256"],
.social-frame-svg path[fill="#e94e1b"],
.social-frame-svg path[stroke="#e94e1b"],
.social-frame-svg path[fill="#00D9CC"],
.social-frame-svg path[fill="#00d9cc"],
.social-frame-svg path[fill="#00DFD2"],
.social-frame-svg path[fill="#00dfd2"],
.social-frame-svg path[stroke="#00D9CC"],
.social-frame-svg path[stroke="#00d9cc"],
.social-frame-svg path[stroke="#00DFD2"],
.social-frame-svg path[stroke="#00dfd2"] {
  fill: var(--maria-coral) !important;
  stroke: var(--maria-coral) !important;
}

.book-demo-close path[fill="#003F3A"],
.book-demo-close path[fill="#003f3a"],
.book-demo-close path[fill="#464545"] {
  fill: var(--maria-charcoal) !important;
}

.footer-s .global-footer-nav-social {
  color: var(--maria-white-card);
}

.footer-s .footer-social-icon rect {
  stroke: rgba(255, 255, 255, 0.22) !important;
  stroke-opacity: 1 !important;
}

.footer-s .footer-social-icon path {
  fill: currentColor !important;
}

.footer-s .footer-social-link:hover .footer-social-icon path {
  fill: var(--maria-coral) !important;
}

.hp-cust-logo-img {
  display: block;
  max-height: 2.4rem;
  max-width: 8rem;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(0);
  opacity: 0.72;
}

.w-locales-list,

.g-recaptcha,

/* Legacy fill icon overrides */
.trusted-icon path[fill="#402c86"],
.trusted-icon path[fill="#402C86"],
.trusted-icon path[fill="#464545"],
.trusted-icon path[fill="#003F3A"],
.trusted-icon path[fill="#003f3a"] {
  fill: var(--maria-charcoal) !important;
}

/* ── Trust cards — legibilidade por cor de fundo ──────────────────── */

/* Turquoise = laranja coral #e94e1b: texto e ícone brancos */
.hp-trust-card-w:has(.bg-color-turquoise) .hp-trusted-description-card-w,
.hp-trust-card-w:has(.bg-color-turquoise) .hp-trusted-description-card-w h3,
.hp-trust-card-w:has(.bg-color-turquoise) .hp-trusted-description-card-w p {
  color: #fff !important;
}
.hp-trust-card-w:has(.bg-color-turquoise) .trusted-icon {
  color: #fff;
}

/* Deep jungle = carvão escuro: texto e ícone brancos */
.hp-trust-card-w:has(.bg-color-deep-jungle) .trusted-icon,
.hp-trust-card-w:has(.bg-color-jungle) .trusted-icon {
  color: #fff;
}

/* Lemon = pêssego claro #ebb183: manter texto escuro (já é padrão) */
.hp-trust-card-w:has(.bg-color-lemon) .hp-trusted-description-card-w h3,
.hp-trust-card-w:has(.bg-color-lemon) .hp-trusted-description-card-w p {
  color: var(--maria-charcoal) !important;
}

html {
  scroll-behavior: smooth;
}

@media (min-width: 991px) {
  .hp-platform-card-w:hover {
    box-shadow: 0 24px 64px rgba(233, 78, 27, 0.12);
  }
  .hp-trusted-card-w:hover {
    box-shadow: 0 16px 48px rgba(0, 26, 142, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .ma-orb,
  .hp-hero-h1.ma-gradient-text,
  .hp-footer-h1,
  .ds-head .caption,
  .hp-trust-card-w::before,
  .hp-mark-perk-w::before,
  .ma-logo-card::before {
    animation: none !important;
  }
  .btn-primary:hover {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   Ajuste fino visual
   ═══════════════════════════════════════════════════════════ */



/* ── Scroll progress bar ── */
#ma-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2.5px;
  background: linear-gradient(90deg, var(--maria-coral), var(--maria-mauve-soft), var(--maria-peach-deep));
  z-index: 10000;
  pointer-events: none;
  transition: width 0.08s linear;
  border-radius: 0 2px 2px 0;
}

/* ── Fade-in on scroll ── */
.ma-reveal {
  opacity: 0.08;            /* mínimo visível — evita "desaparecimento" completo */
  transform: translateY(18px);
  transition: opacity 0.6s var(--ma-ease-out), transform 0.6s var(--ma-ease-out);
  will-change: opacity, transform;
}

.ma-reveal.ma-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.ma-reveal--delay-1 { transition-delay: 0.08s; }
.ma-reveal--delay-2 { transition-delay: 0.16s; }
.ma-reveal--delay-3 { transition-delay: 0.24s; }
.ma-reveal--delay-4 { transition-delay: 0.32s; }

/* Reduced-motion: skip all reveals */
@media (prefers-reduced-motion: reduce) {
  .ma-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

[id] {
  scroll-margin-top: 9rem;
}

/* ── Nav: link ativo por seção ── */
.global-nav-link.ma-nav-active {
  color: var(--maria-coral) !important;
}

.global-header-c.sticky .global-nav-link.ma-nav-active {
  color: var(--maria-coral) !important;
}

.global-nav-link.ma-nav-active::before {
  transform: scaleX(1) !important;
}

/* ── Nav link underline via pseudo ── */

.global-nav-link::before {
  transition: transform 0.3s var(--ma-ease-out) !important;
}

/* ── Book demo modal — layout completo + transição suave ── */
.book-demo-s {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 99999;
  display: flex !important;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.35s var(--ma-ease-out),
    visibility 0.35s var(--ma-ease-out),
    transform 0.35s var(--ma-ease-out);
  pointer-events: none;
  overflow-y: auto;
  padding: 2.4rem;
  box-sizing: border-box;
}

.book-demo-s.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.book-demo-c {
  position: relative;
  background: var(--maria-white-card);
  border-radius: var(--corner-radius-l);
  padding: 5.6rem;
  width: 100%;
  max-width: 56rem;
  border: 1px solid rgba(70, 69, 69, 0.08);
  box-shadow: 0 32px 80px rgba(70, 69, 69, 0.18), 0 0 0 1px rgba(70, 69, 69, 0.04);
  animation: none;
}

.book-demo-s.active .book-demo-c {
  animation: ma-modal-in 0.4s var(--ma-ease-out) forwards;
}

@keyframes ma-modal-in {
  from { transform: scale(0.96) translateY(12px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.book-demo-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 3.6rem;
  height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.book-demo-close:hover {
  background: rgba(70, 69, 69, 0.08);
  transform: rotate(90deg);
}

.book-demo-title-c {
  margin-bottom: 3.2rem;
}

@media (max-width: 767px) {
  .book-demo-c {
    padding: 4rem 2.8rem;
  }
}

/* ── Header — transparente no topo; sólido ao rolar (sticky) ── */
html body [role="banner"].global-header-c.w-nav {
  transition:
    background 0.35s var(--ma-ease-out),
    box-shadow 0.35s var(--ma-ease-out),
    border-color 0.35s var(--ma-ease-out);
}

html body [role="banner"].global-header-c.w-nav:not(.sticky) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
}

html body [role="banner"].global-header-c.w-nav.sticky,
html body .global-header-c.w-nav.sticky {
  background: var(--maria-white-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(70, 69, 69, 0.07) !important;
  box-shadow: 0 1px 0 rgba(70, 69, 69, 0.06), 0 8px 24px rgba(70, 69, 69, 0.05) !important;
}

@media screen and (max-width: 991px) {
  html body [role="banner"].global-header-c.w-nav.sticky {
    background: var(--maria-white-card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}


.global-header-c:not(.sticky) .global-nav-link:hover {
  color: var(--maria-coral-deep) !important;
}

/* ── Hero — ritmo editorial ── */
.hp-hero-h1.ma-gradient-text {
  line-height: 1.06;
  letter-spacing: -0.04em;
  text-wrap: balance;
  max-width: 14ch;
}

.hp-hero-p {
  max-width: 48ch;
  line-height: 1.58;
  margin-top: 0.4rem;
}

.hp-hero-s .btn-primary.hp-hero {
  margin-top: 0.8rem;
}

.ma-orb {
  opacity: 0.5;
  filter: blur(92px);
}

/* Mockup do hero — profundidade suave */
.hp-hero-img-c,
.hp-header-img-c img {
  border-radius: var(--corner-radius-l);
}

.hp-hero-img-c {
  filter: drop-shadow(0 28px 56px rgba(70, 69, 69, 0.11));
}

/* Mockup social + métricas CTR — escala um pouco menor */
.hp-ctr-center-w {
  width: 21.5vw !important;
  max-width: 84% !important;
}

.hp-ctr-left-w,
.hp-ctr-right-w {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media screen and (max-width: 991px) {
  .hp-ctr-center-w {
    width: 48vw !important;
    max-width: 72vw !important;
  }

  .hp-ctr-h2 {
    font-size: 12.5vw !important;
  }
}

/* ── Logostrip — fade nas bordas + logos mais legíveis ── */
.logostrip-c {
  position: relative;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 7%,
    #000 93%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 7%,
    #000 93%,
    transparent 100%
  );
}

/* ── Botões — hierarquia mais clara ── */
.btn-primary.secondary,
.btn-primary.nav-bar.secondary {
  background: rgba(250, 249, 247, 0.72) !important;
  border: 1px solid rgba(70, 69, 69, 0.14) !important;
  color: var(--maria-charcoal) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.35s var(--ma-ease-out), box-shadow 0.35s var(--ma-ease-out),
    border-color 0.35s ease, background 0.35s ease;
}

.btn-primary.secondary:hover,
.btn-primary.nav-bar.secondary:hover {
  transform: translateY(-1px);
  border-color: rgba(233, 78, 27, 0.35) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: var(--ma-shadow-soft);
}

/* submit + arrow do formulário — altura própria */
.btn-primary.submit {
  min-height: 5.2rem !important;
  height: 5.2rem !important;
  padding: 0 2.4rem !important;
}

.btn-primary.arrow {
  min-height: 5.2rem !important;
  height: 5.2rem !important;
  width: 5.2rem !important;
  min-width: 5.2rem !important;
  padding: 0 !important;
}

/* ── Formulários — focus mais marca ── */
.ct-main-form-field {
  border: 1px solid rgba(70, 69, 69, 0.14) !important;
  background: rgba(250, 249, 247, 0.85) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.ct-main-form-field:focus,
.ct-main-form-field:focus-visible {
  border-color: var(--maria-coral) !important;
  box-shadow: var(--ma-ring-focus) !important;
  background: var(--maria-white-card) !important;
  outline: none;
}

/* ── DS — formulários claro + escuro lado a lado ── */
.ds-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem;
  align-items: stretch;
}

.ds-form-panel {
  min-width: 0;
}

.ds-form-panel--light {
  padding: 4rem;
  border-radius: var(--corner-radius-m);
  background: rgba(250, 249, 247, 0.55);
  border: 1px solid rgba(70, 69, 69, 0.08);
}

/* DS — superfície clara (logotipo + ícones sociais) */
.ds-surface-light {
  padding: 4rem;
  border-radius: var(--corner-radius-m);
  background: #ffffff;
  border: 1px solid rgba(70, 69, 69, 0.08);
  color: var(--maria-charcoal);
}

.ds-surface-light .maria-logo-light {
  display: none !important;
}

.ds-surface-light .maria-logo-dark {
  display: block !important;
}

.ds-surface-light .footer-social-icon rect {
  stroke: rgba(70, 69, 69, 0.18) !important;
  stroke-opacity: 1 !important;
}

.ds-surface-light .footer-social-icon path {
  fill: var(--maria-charcoal) !important;
}

.ds-surface-light .footer-social-link:hover .footer-social-icon path {
  fill: var(--maria-coral) !important;
}

.ds-form-panel-label {
  opacity: 0.55;
  margin: 0 0 2.4rem;
}

.ma-form-dark {
  color: var(--maria-white-card);
}

.ma-form-dark .ds-form-panel-label,
.ma-form-dark .ct-main-form-w {
  position: relative;
  z-index: 1;
}

.ma-form-dark .ds-form-panel-label {
  color: rgba(250, 249, 247, 0.55);
}

.ma-form-dark .ct-main-form-field-label {
  color: rgba(250, 249, 247, 0.9) !important;
}

.ma-form-dark .ct-main-form-field {
  background: rgba(250, 249, 247, 0.08) !important;
  border: 1px solid rgba(250, 249, 247, 0.2) !important;
  color: var(--maria-white-card) !important;
}

.ma-form-dark .ct-main-form-field::placeholder {
  color: rgba(250, 249, 247, 0.42) !important;
  opacity: 1 !important;
}

.ma-form-dark .ct-main-form-field:focus,
.ma-form-dark .ct-main-form-field:focus-visible {
  border-color: var(--maria-mauve) !important;
  box-shadow: 0 0 0 2px rgba(0, 26, 142, 0.38) !important;
  background: rgba(250, 249, 247, 0.12) !important;
}

.ma-form-dark .ct-form-checkbox-label {
  color: rgba(250, 249, 247, 0.72) !important;
}

.ma-form-dark .ct-form-checkbox {
  border: 1.5px solid rgba(250, 249, 247, 0.38) !important;
  background: transparent !important;
}

.ma-form-dark .ct-form-checkbox.w--redirected-checked {
  background-color: var(--maria-coral) !important;
  border-color: var(--maria-coral) !important;
}

.ma-form-dark .ct-form-checkbox.w--redirected-focus {
  box-shadow: 0 0 0 2px rgba(0, 26, 142, 0.45) !important;
}

@media (max-width: 991px) {
  .ds-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Animate-strip: corrige media-query invertida no template ── */
/* O template original aplica mobileScroll em desktop e scroll em mobile — ao contrário */
.animate-strip {
  animation: mobileScroll 30s linear infinite;
}

@media (min-width: 769px) {
  .animate-strip {
    animation: scroll 30s linear infinite;
  }
}

/* ── DS — swatches e blocos ── */

.ds-swatch-meta .ds-var {
  opacity: 0.72;
  font-size: 0.92em;
}

.ds-head .h2 {
  letter-spacing: -0.025em;
}

.ds-type-row {
  transition: background 0.25s ease, padding-left 0.25s ease;
  border-radius: var(--corner-radius-m);
}

.ds-type-row:hover {
  background: rgba(250, 249, 247, 0.7);
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  box-shadow: var(--ma-shadow-card);
}

.global-separator {
  background-color: rgba(70, 69, 69, 0.1) !important;
}

.footer-s .global-separator.dark {
  background-color: rgba(250, 249, 247, 0.14) !important;
}

/* ── Cards com fundo sólido — borda gradiente mais discreta ── */
.hp-trust-card-w::before,
.hp-mark-perk-w::before,
.ma-logo-card::before {
  opacity: 0.32;
}

/* ── Modal contato — regras complementares (layout principal está acima) ── */

/* ── Grain — mais sutil ── */
body::before {
  opacity: 0.022;
}

/* ── Tipografia DS — amostra hero em laranja ── */
.ds-type-preview .hp-hero-h1[style*="maria-coral"],
.ds-type-preview .hp-hero-h1[style*="maria-orange"],
.ds-type-preview .hp-hero-h1[style*="turquoise"] {
  color: var(--maria-coral) !important;
  -webkit-text-fill-color: var(--maria-coral) !important;
  background: none !important;
}

/* ═══════════════════════════════════════════════════════════
   Cards de artigo — componentes + insights
   ═══════════════════════════════════════════════════════════ */

.ma-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
}

@media (max-width: 991px) {
  .ma-articles-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .ma-articles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hp-insights-article-w {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--maria-white-card);
  border-radius: var(--corner-radius-l);
  border: 1px solid rgba(70, 69, 69, 0.08);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(70, 69, 69, 0.05);
  transition: transform 0.4s var(--ma-ease-out), box-shadow 0.4s var(--ma-ease-out),
    border-color 0.35s ease;
}

.hp-insights-article-w:hover {
  transform: translateY(-4px);
  box-shadow: var(--ma-shadow-lift);
  border-color: rgba(233, 78, 27, 0.22);
}

.hp-insights-article-img-w {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--maria-cream-deep);
}

.hp-insights-article-img-w img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ma-ease-out);
}

.hp-insights-article-w:hover .hp-insights-article-img-w img {
  transform: scale(1.04);
}

.hp-insights-article-content-c {
  padding: 2rem 2.4rem 2.4rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.hp-insights-article-tags-c {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
}

.global-article-tag {
  background: rgba(233, 78, 27, 0.12) !important;
  color: var(--maria-coral-deep) !important;
  border-radius: 10rem;
  padding: 0.4rem 1.2rem;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}

.global-article-date {
  color: var(--maria-charcoal-soft);
  opacity: 0.72;
  font-size: 1.3rem;
}

.hp-insights-article-title-w .h5 {
  line-height: 1.38;
  letter-spacing: -0.015em;
  margin: 0;
}

.hp-insights-article-sum-w {
  margin-top: auto;
}

.hp-insights-article-sum-w .paragraph-s {
  line-height: 1.55;
  color: var(--maria-charcoal-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hp-insights-s {
  padding-top: var(--padding-m);
  padding-bottom: var(--padding-m);
}

.hp-insights-title-w {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.4rem;
  flex-wrap: wrap;
  margin-bottom: 4.8rem;
}

.hp-insights-title-w .h1 {
  letter-spacing: -0.03em;
  max-width: 14ch;
  line-height: 1.08;
}

@media (min-width: 992px) {
  .hp-insights-s .hp-insights-blog.swiper {
    overflow: visible;
  }

  .hp-insights-s .hp-insights-articles-c.swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.4rem;
    transform: none !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  .hp-insights-s .hp-insights-articles-w.swiper-slide {
    width: auto !important;
    margin: 0 !important;
    height: auto !important;
  }
}

#components .ma-articles-grid .hp-insights-article-w::before,
#components .ma-articles-grid .hp-insights-article-w::after {
  display: none;
}

/* ── Ícones de destaque (Lucide stroke) ── */
.hp-trusted-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s var(--ma-ease-out);
}

.hp-trusted-card-icon .trusted-icon {
  display: block;
  flex-shrink: 0;
}

.hp-trust-card-w:hover .hp-trusted-card-icon,
.ds-icon-cell:hover .hp-trusted-card-icon {
  transform: scale(1.1) rotate(-2deg);
}

/* ── Ícones de interface — hover com cor ── */
.ds-icon-cell {
  transition: opacity 0.25s ease;
  cursor: default;
}

.ds-icon-cell:hover {
  opacity: 0.78;
}

/* ── Logotipos — hover ativo em cada card ── */

/* ── Swatch grid — borda mais pronunciada ao hover ── */
.ds-swatch-grid > div:hover .ds-swatch {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 6px 24px rgba(233, 78, 27, 0.09);
  transform: translateY(-2px);
  transition: transform 0.3s var(--ma-ease-out), box-shadow 0.3s ease;
}


/* ── Trust metrics — polimento ── */
.hp-trust-metric-w {
  transition: transform 0.35s var(--ma-ease-out);
}

.hp-trust-metric-w:hover {
  transform: translateY(-3px);
}

/* ── Article cards — imagem mais suave ── */
.hp-insights-article-w:hover .hp-insights-article-img-w img {
  transform: scale(1.05);
}

/* ── DS head — caption com respiro ── */
.ds-head .caption {
  margin-bottom: 0.8rem;
}

/* ── DS block-label — mais destaque ── */
.ds-block-label {
  font-size: 1.2rem !important;
  letter-spacing: 0.08em !important;
}

/* ── Quote icon — tamanho consistente ── */
.hp-cust-testimonial-img .quote-ico {
  display: block;
  flex: none;
}

/* ── Botão submit hover ── */
.btn-primary.submit:hover {
  background: var(--ma-grad-premium) !important;
  background-size: 200% auto !important;
  background-position: 100% center !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(233, 78, 27, 0.22);
  transition: transform 0.35s var(--ma-ease-out), box-shadow 0.35s var(--ma-ease-out);
}

/* ── Platform badge hover — escala suave ── */
.hp-platform-card-w.ma-platf-card:hover .ma-platf-badge {
  transform: scale(1.06) translateY(-1px);
}

/* ── DS nav links — active ativo visível ── */
@media (max-width: 991px) {
  .global-nav-link.ma-nav-active {
    color: var(--maria-coral) !important;
  }
}

/* ──────────────────────────────────────────────
   Coesão: cabeçalho #layout ⇄ pin-grid da plataforma
   O header do layout e o hp-platform-s são a MESMA seção
   visual. Removemos a quebra abrupta entre eles.
   ────────────────────────────────────────────── */

/* Header do layout: encosta no grid abaixo, sem "fechar" */
#layout.ds-section {
  padding-bottom: 0 !important;
  border-top: 1px solid rgba(70, 69, 69, 0.1);
}

#layout .ds-head {
  margin-bottom: 0;
  max-width: 88ch;
}

/* Pin-grid herda o mesmo "trilho" do header (sem novo ambiente/glow
   que fazia parecer outra seção) e ganha um respiro superior curto,
   colando no cabeçalho em vez de flutuar solto. */
.hp-platform-s::before {
  display: none;
}

.hp-platform-s {
  padding-top: 4.8rem !important;
  margin-top: 0;
}

@media (min-width: 992px) {
  .hp-platform-s {
    padding-top: 5.6rem !important;
  }
}

/* Legenda de contexto que amarra o pin-grid ao item "04 — LAYOUT" */
.hp-platf-stats-title-w .caption {
  color: var(--maria-coral);
  opacity: 0.9;
}

/* Fio-guia sutil ligando header → grid, no mesmo tom da border-top */
#layout .container-large {
  position: relative;
}

#layout .container-large::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2.4rem;
  width: 4rem;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--maria-coral),
    rgba(70, 69, 69, 0)
  );
  border-radius: 2px;
}

/* Títulos de métrica: hierarquia coesa com o cabeçalho da seção */
.hp-platform-s .platform-h2 {
  line-height: 1.06;
}

/* ──────────────────────────────────────────────
   Coesão: #motion ⇄ carrossel de depoimentos
   ────────────────────────────────────────────── */

#motion.ma-motion-block {
  padding-bottom: var(--padding-l) !important;
  border-top: 1px solid rgba(70, 69, 69, 0.1);
}

#motion.ma-motion-block .container-large {
  position: relative;
}

#motion.ma-motion-block .ma-motion-head {
  margin-bottom: 0;
  max-width: 72ch;
  padding-bottom: 3.2rem;
}

#motion.ma-motion-block .container-large::after {
  content: "";
  display: block;
  height: 1px;
  margin: 3.2rem 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(233, 78, 27, 0.35),
    transparent
  );
}

.ma-motion-demo {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding: 4rem 4rem 3.2rem;
  border-radius: var(--corner-radius-l);
  background: rgba(250, 249, 247, 0.72);
  border: 1px solid rgba(70, 69, 69, 0.08);
  overflow: hidden;
}

.ma-motion-demo-label {
  text-align: center;
  margin-bottom: 2.4rem;
  color: var(--maria-coral);
  opacity: 0.92;
}

.ma-motion-block .hp-cust-list-c {
  margin-top: 0 !important;
}

.ma-motion-block .hp-cust-item-c {
  align-items: stretch;
  gap: 3.2rem;
}

.ma-motion-block .hp-cust-img-w {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  border-radius: var(--corner-radius-m);
  overflow: hidden;
  flex: none;
  width: 38%;
  max-width: 42rem;
}

.ma-motion-block .hp-cust-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--corner-radius-m);
}

.ma-motion-block .hp-cust-testimonial-c {
  width: auto;
  flex: 1;
  min-width: 0;
}

.ma-motion-block .hp-cust-testimonial .h3 {
  font-weight: 400;
  line-height: 1.45;
}

.ma-motion-block .hp-cust-slider-controls-c {
  margin-top: 2.4rem;
}

.hp-cust-logo {
  display: none !important;
}

@media (max-width: 767px) {
  .ma-motion-demo {
    padding: 2.4rem 2rem 2rem;
  }

  .ma-motion-block .hp-cust-item-c {
    flex-direction: column;
    gap: 2.4rem;
  }

  .ma-motion-block .hp-cust-img-w {
    width: 100%;
    max-width: none;
    aspect-ratio: 4 / 3;
  }
}

/* ── Platform cards — badge + info sobre a foto (sem caixa branca) ── */
.ma-platf-card .hp-platf-card-img-w {
  z-index: 0;
}

.ma-platf-card .hp-platf-card-img-w::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.08) 55%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.ma-platf-badge-wrap {
  position: relative;
  z-index: 2;
  width: auto !important;
  max-width: 88%;
}

.ma-platf-badge {
  display: inline-block;
  padding: 1.4rem 3rem;
  border-radius: 10rem;
  background: var(--maria-white-card);
  color: var(--maria-charcoal);
  font-size: clamp(1.6rem, 1.2rem + 0.35vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  transition: transform 0.8s cubic-bezier(0.15, 0.85, 0.3, 1);
}

.hp-platform-card-w.ma-platf-card:hover .ma-platf-badge {
  transform: scale(1.05);
}

.ma-platf-card .hp-platf-card-inf-w.ma-platf-overlay {
  z-index: 2;
  background: none;
  margin-left: 5%;
  margin-right: 5%;
}


.ma-platf-overlay-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
}

.ma-platf-overlay-left {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  min-width: 0;
}

.ma-platf-flag {
  flex: none;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.ma-platf-place {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.ma-platf-city {
  font-size: clamp(1.6rem, 1.2rem + 0.4vw, 2rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.15;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.ma-platf-region {
  font-size: clamp(1.2rem, 1rem + 0.2vw, 1.4rem);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.ma-platf-metric {
  flex: none;
  font-size: clamp(1.6rem, 1.2rem + 0.4vw, 2rem);
  font-weight: 600;
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

@media (max-width: 479px) {
  .ma-platf-flag {
    width: 3.6rem;
    height: 3.6rem;
  }

  .ma-platf-overlay-inner {
    gap: 1rem;
  }
}

/* ═══════════════════════════════════════════════════════
   POLIMENTO VISUAL — refinamentos globais
   ═══════════════════════════════════════════════════════ */

/* ── Ícones de interface DS — Lucide thin, uniformes ── */
.ds-ui-glyph-grid .ma-ui-icon-wrap {
  width: 4.8rem;
  height: 4.8rem;
  color: var(--maria-charcoal);
}

.ds-ui-glyph-grid .ma-ui-icon {
  width: 2.4rem;
  height: 2.4rem;
  display: block;
  flex: none;
}

.ds-ui-glyph-grid .ds-icon-cell:hover .ma-ui-icon-wrap {
  color: var(--maria-coral);
}

/* ── Slider arrows — peso visual consistente ── */
.slider-arrow {
  opacity: 0.88;
  transition: opacity 0.2s ease;
}

.ds-icon-cell:hover .slider-arrow {
  opacity: 0.6;
}

/* ── Play icon fill ── */
.ma-ui-icon--filled {
  color: var(--maria-charcoal);
}

/* ── DS blocks — separadores mais finos e suaves ── */
.ds-block {
  border-top-color: rgba(70, 69, 69, 0.07);
}

/* ── DS block label — mais leve ── */
.ds-block-label {
  opacity: 0.45 !important;
  letter-spacing: 0.06em !important;
  font-size: 1.1rem !important;
  margin-bottom: 2.4rem;
}

/* ── DS type spec — tipografia numérica refinada ── */
.ds-type-spec {
  font-variant-numeric: tabular-nums;
  opacity: 0.42 !important;
  font-size: 1.2rem !important;
}

/* ── Swatch hover — mais expressivo ── */
.ds-swatch-grid > div:hover .ds-swatch {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 8px 28px rgba(70, 69, 69, 0.14);
}

/* ── Trust card — overflow e cantos ── */
.hp-trust-card-w {
  overflow: hidden;
}

/* ── Platform card — sombra consistente ── */
.ma-platf-card {
  box-shadow: var(--ma-shadow-card);
}

/* ── Perk expand — overlay gradient mais rico ── */
.hp-mark-perk-expand .overlay-gradient {
  background: linear-gradient(
    180deg,
    transparent 35%,
    rgba(70, 69, 69, 0.55) 100%
  ) !important;
}

/* ── Logo card — sombra e borda integradas ── */
.ma-logo-card {
  background: var(--maria-white-card);
  border: 1px solid rgba(70, 69, 69, 0.07);
}

/* ── Metric strip — número com peso visual forte ── */
.hp-trust-metrics-h1 {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

/* ── Nav link active underline ── */
.global-nav-link.ma-nav-active::before {
  transform: scaleX(1) !important;
}

/* ── Form inputs — focus ring mais suave ── */
.ct-main-form input:focus,
.ct-main-form textarea:focus,
.ct-main-form select:focus {
  outline: none;
  box-shadow: var(--ma-ring-focus);
  border-color: var(--maria-coral-soft) !important;
}

/* ── Botão primário — estado desabilitado ── */
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

/* ── DS surface light — borda sutil, largura do container ── */
.ds-surface-light {
  border: 1px solid rgba(70, 69, 69, 0.07);
  width: 100%;
  max-width: 100%;
}

.ds-surface-light-row {
  row-gap: 3.2rem;
}

/* ── HP mark perk — texto consistente ── */
.hp-mark-perk-w .heading-3 {
  letter-spacing: -0.01em;
}

/* ── Footer strip — kerning negativo forte ── */
.hp-footer-h1 {
  letter-spacing: -0.03em;
}

/* ── DS section dividers — espaçamento breathing ── */
.ds-section {
  scroll-margin-top: 7.2rem;
}

/* ── Smooth hover transitions globais ── */
.hp-trust-card-w,
.hp-mark-perk-w,
.hp-insights-article-w,
.ma-platf-card,
.ma-logo-card {
  will-change: transform;
}

@media (min-width: 992px) {
  .hp-insights-article-w:hover {
    transform: translateY(-3px);
    box-shadow: var(--ma-shadow-lift);
  }
}

/* ── Polish: foco, overlay, menu, contraste de caption ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.w-nav-button:focus-visible,
.global-nav-link:focus-visible,
.btn-primary:focus-visible {
  outline: 2px solid var(--maria-orange) !important;
  outline-offset: 3px;
}

.caption {
  color: var(--maria-charcoal);
}

.m3-clients .caption,
.m3-clients-head .caption,
.footer-s .caption {
  color: rgba(250, 249, 247, 0.88) !important;
}

.book-demo-s {
  background-color: rgba(70, 69, 69, 0.46);
}

.book-demo-subtitle a,
.form-success-c a,
.ct-form-checkbox-label a {
  color: var(--maria-orange-deep);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.m3-hero-secondary {
  color: var(--maria-charcoal);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-underline-offset: 0.28em;
  text-decoration-thickness: 1px;
  min-height: 4.4rem;
  display: inline-flex;
  align-items: center;
}

.m3-hero-secondary:hover {
  color: var(--maria-orange-deep);
}

.ct-form-checkbox-c {
  position: relative;
}

.ct-form-checkbox-c input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.ct-form-checkbox-c input[type="checkbox"]:checked + .ct-form-checkbox {
  background: var(--maria-orange);
  border-color: var(--maria-orange);
}

.ct-form-checkbox-c input[type="checkbox"]:focus-visible + .ct-form-checkbox {
  box-shadow: var(--ma-ring-focus);
}

.ma-legal {
  padding: calc(var(--padding-l) + 6rem) 0 var(--padding-xl);
  background: var(--maria-cream);
  color: var(--maria-charcoal);
}

.ma-legal .h1 {
  margin: 0 0 2.4rem;
}

.ma-legal .paragraph-l {
  max-width: 62ch;
}

.ma-legal a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.global-nav-menu-btn {
  min-width: 4.4rem;
  min-height: 4.4rem;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: inherit;
}

@media (max-width: 991px) {
  .global-header-nav-w {
    z-index: 20;
    display: none;
    background: var(--maria-cream) !important;
    color: var(--maria-charcoal) !important;
    overflow: auto;
  }

  .global-header-nav-w.w--open,
  .global-header-nav-w[data-nav-menu-open] {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    padding: 9.6rem 2.4rem 4rem;
    z-index: 1001;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .global-header-nav-w .global-nav-link {
    background: transparent;
    color: var(--maria-charcoal) !important;
    font-size: 2.2rem;
    padding: 1.6rem 0;
    min-height: 4.4rem;
  }

  .global-nav-btn-c {
    display: none !important;
  }

  .mobile-btn-c {
    margin-top: 2.4rem;
  }

  .mobile-btn-c .btn-primary {
    display: inline-flex;
    min-height: 4.8rem;
    align-items: center;
  }

  body.ma-nav-open,
  body.ma-overlay-open {
    overflow: hidden;
  }
}