:root{--arvo-black:var(--wp--preset--color--surface-base);--arvo-green:var(--wp--preset--color--brand-provisional);--arvo-white:#fff;--arvo-gray:#a8b0aa}
html{scroll-behavior:smooth}body{margin:0;background:var(--arvo-black);color:var(--arvo-white)}
img{max-width:100%;height:auto}.mnt-arvo-placeholder{min-height:55vh;display:grid;place-items:center;padding:clamp(2rem,6vw,6rem) 1.5rem;text-align:center;background:radial-gradient(circle at 50% 0%,rgba(22,200,58,.2),transparent 38rem),var(--arvo-black)}
.mnt-arvo-placeholder__inner{max-width:860px}.mnt-arvo-placeholder__eyebrow{color:var(--arvo-green);font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.mnt-arvo-placeholder h1{font-size:clamp(2.5rem,8vw,6.5rem);line-height:.96;margin:.35em 0}.mnt-arvo-placeholder p{color:var(--arvo-gray);font-size:clamp(1rem,2vw,1.25rem)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* === CORREÇÃO ESTRUTURAL: wrapper <section> do wp:template-part dentro de
   <main> não deve herdar o max-width/margin:auto do layout "constrained"
   do WP core — os wrappers .mnt-arvo-* (alignfull) e seus containers
   internos (alignwide, max-width próprio) já controlam a largura. Sem
   isso, Hero/Como Funciona/Modelos/Benefícios ficavam presos a 1280px
   centralizados, criando faixas pretas nas laterais em telas largas. */
main.is-layout-constrained > section.wp-block-template-part {
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* === HEADER === */
/* O wrapper <header class="wp-block-template-part"> gerado pelo WP em torno
   deste template part tem altura igual à do único filho (.mnt-arvo-header),
   sem nenhuma folga — por spec, um elemento sticky só pode se mover dentro
   dos limites do seu containing block (o pai imediato), então com folga zero
   o sticky do filho nunca gruda (headerTop = -scrollY em qualquer scroll).
   O pai do wrapper (.wp-site-blocks) tem a altura da página inteira, então
   aplicar sticky no próprio wrapper resolve na raiz, sem alterar HTML. */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
}
.mnt-arvo-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--wp--custom--duration--micro) var(--wp--custom--easing--out),
    border-color var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
}
.mnt-arvo-header.is-scrolled {
  background-color: rgba(0,0,0,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--wp--custom--color--border-subtle);
  box-shadow: var(--wp--preset--shadow--card-hover);
}
.mnt-arvo-header__inner {
  min-height: 72px;
}
.mnt-arvo-header__logo {
  flex-shrink: 0;
}
.mnt-arvo-header__logo img,
.mnt-arvo-header__logo .custom-logo {
  width: 160px;
  height: auto;
  display: block;
}

/* Nav links */
.mnt-arvo-header__nav .wp-block-navigation-item__content {
  position: relative;
  font-size: 13px;
  font-weight: var(--wp--custom--font-weight--semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--on-surface-muted);
  text-decoration: none;
  transition: color var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
}
.mnt-arvo-header__nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--wp--preset--color--brand-provisional);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
}
.mnt-arvo-header__nav .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--brand-provisional);
}
.mnt-arvo-header__nav .wp-block-navigation-item__content:hover::after,
.mnt-arvo-header__nav .wp-block-navigation-item__content:focus-visible::after {
  transform: scaleX(1);
}
.mnt-arvo-header__nav .wp-block-navigation-item__content:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Nav CTA link — shown in mobile overlay only (mesmo breakpoint do hambúrguer,
   ver nota junto a "Tablet: hambúrguer" mais abaixo — evita overlay sem CTA
   entre 1024–1119px depois da elevação do breakpoint) */
@media (min-width: 1120px) {
  .mnt-arvo-header__nav-cta { display: none !important; }
}
.mnt-arvo-header__nav-cta a.wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  background-color: var(--wp--preset--color--brand-provisional);
  color: #000 !important;
  border-radius: var(--wp--custom--radius--sm);
  padding: 12px 24px;
  margin-top: 16px;
  font-weight: var(--wp--custom--font-weight--bold);
  letter-spacing: var(--wp--custom--letter-spacing--button);
  text-transform: uppercase;
  font-size: 14px;
}

/* Portal ARVO — texto visualmente oculto ("— abre em nova aba") embutido no
   label do navigation-link, já que o bloco nativo não expõe aria-label nem
   injeta aviso de nova aba sozinho (confirmado: "Fale conosco" não tem). */
.mnt-arvo-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Portal ARVO — acesso institucional/secundário, não é CTA comercial */
.mnt-arvo-header__nav-portal a.wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--wp--custom--radius--sm);
  color: var(--wp--preset--color--on-surface) !important;
  background-color: transparent;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: var(--wp--custom--font-weight--semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition:
    border-color var(--wp--custom--duration--micro) var(--wp--custom--easing--out),
    color var(--wp--custom--duration--micro) var(--wp--custom--easing--out),
    background-color var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
}
.mnt-arvo-header__nav-portal a.wp-block-navigation-item__content::after {
  content: none !important;
}
.mnt-arvo-header__nav-portal a.wp-block-navigation-item__content:hover,
.mnt-arvo-header__nav-portal a.wp-block-navigation-item__content:focus-visible {
  border-color: var(--wp--preset--color--brand-provisional);
  color: var(--wp--preset--color--brand-provisional) !important;
  background-color: color-mix(in srgb, var(--wp--preset--color--brand-provisional) 8%, transparent);
}
.mnt-arvo-header__nav-portal a.wp-block-navigation-item__content:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 4px;
}
/* Overlay mobile: reafirma o pill discreto contra a regra genérica de maior
   especificidade do overlay (font 20px/branco/uppercase:none/100% largura) —
   evita virar um 2º CTA verde ou um texto grande igual aos demais itens. */
.mnt-arvo-header .wp-block-navigation__responsive-container.is-menu-open .mnt-arvo-header__nav-portal a.wp-block-navigation-item__content {
  display: inline-flex;
  width: auto;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--wp--custom--radius--sm);
  background-color: transparent;
  color: var(--wp--preset--color--on-surface) !important;
  padding: 10px 20px;
  margin-top: 4px;
  font-size: 15px;
  font-weight: var(--wp--custom--font-weight--semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mnt-arvo-header .wp-block-navigation__responsive-container.is-menu-open .mnt-arvo-header__nav-portal a.wp-block-navigation-item__content:hover,
.mnt-arvo-header .wp-block-navigation__responsive-container.is-menu-open .mnt-arvo-header__nav-portal a.wp-block-navigation-item__content:focus-visible {
  border-color: var(--wp--preset--color--brand-provisional);
  color: var(--wp--preset--color--brand-provisional) !important;
  background-color: color-mix(in srgb, var(--wp--preset--color--brand-provisional) 8%, transparent);
}

/* CTA button (desktop/tablet) */
.mnt-arvo-header__cta .wp-block-button__link {
  padding: 10px 20px;
  font-size: 13px;
  white-space: nowrap;
  transition: background-color var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
}
.mnt-arvo-header__cta .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--brand-hover-provisional);
}
.mnt-arvo-header__cta .wp-block-button__link:active {
  background-color: var(--wp--preset--color--brand-pressed-provisional);
}
.mnt-arvo-header__cta .wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 4px;
}

/* Hamburger button */
.mnt-arvo-header .wp-block-navigation__responsive-container-open {
  background: transparent;
  border: none;
  color: var(--wp--preset--color--on-surface);
  padding: 8px;
  cursor: pointer;
}
.mnt-arvo-header .wp-block-navigation__responsive-container-open:hover { opacity: 0.8; }
.mnt-arvo-header .wp-block-navigation__responsive-container-open:focus-visible,
.mnt-arvo-header .wp-block-navigation__responsive-container-close:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 4px;
  border-radius: 2px;
}
.mnt-arvo-header .wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--on-surface) !important;
}

/* Mobile overlay */
@keyframes mnt-arvo-overlay-in {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
.mnt-arvo-header .wp-block-navigation__responsive-container.is-menu-open {
  --navigation-layout-justification-setting: center;
  background: var(--wp--preset--color--surface-base) !important;
  color: var(--wp--preset--color--on-surface) !important;
  padding: 48px 24px 32px;
  justify-content: flex-start;
  align-items: center;
  animation: mnt-arvo-overlay-in var(--wp--custom--duration--medium) var(--wp--custom--easing--out) both;
}
.mnt-arvo-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  max-width: 480px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0 !important;
}
.mnt-arvo-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
  border-bottom: 1px solid var(--wp--custom--color--border-subtle);
}
.mnt-arvo-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 20px;
  font-weight: var(--wp--custom--font-weight--bold);
  color: var(--wp--preset--color--on-surface) !important;
  text-transform: none;
  letter-spacing: 0;
  padding: 16px 0;
  text-align: center;
  width: 100%;
}
.mnt-arvo-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--brand-provisional);
}

/* Mobile */
@media (max-width: 767px) {
  .mnt-arvo-header__inner { min-height: 60px; }
  .mnt-arvo-header__logo img,
  .mnt-arvo-header__logo .custom-logo { width: 120px; }
  .mnt-arvo-header__cta-wrap { display: none !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mnt-arvo-header,
  .mnt-arvo-header__nav .wp-block-navigation-item__content,
  .mnt-arvo-header__cta .wp-block-button__link { transition: none; }
  .mnt-arvo-header .wp-block-navigation__responsive-container.is-menu-open { animation: none; }
}

/* Tablet: hambúrguer em ≤ 1119px; menu inline em ≥ 1120px.
   (Breakpoint original era 1023/1024 — elevado após a adição do item "Portal
   ARVO": com 6 itens, o menu inline só cabe sem quebrar de linha a partir de
   ~1098px de viewport; 1120px dá uma margem de segurança confortável.) */
@media (max-width: 1119px) {
  .mnt-arvo-header__nav .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }
  .mnt-arvo-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}
@media (min-width: 1120px) {
  .mnt-arvo-header__nav .wp-block-navigation__responsive-container-open {
    display: none !important;
  }
  .mnt-arvo-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: block !important;
    position: relative !important;
    z-index: auto !important;
  }
  .mnt-arvo-header__inner {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: clamp(40px, 5vw, 80px) !important;
    padding-right: clamp(40px, 5vw, 80px) !important;
    box-sizing: border-box !important;
  }
}
/* A borda esquerda do texto do Hero (.mnt-arvo-hero__content) não fica na
   borda do padding do seu container — o core do WP centraliza esse bloco
   (max-width 960px) dentro do .wp-block-cover__inner-container (main.css
   ~L546-553), então o texto renderiza mais para dentro do que o padding
   "cru" do grid. A partir de 1440px essa centralização estabiliza num
   recuo fixo de 256px (16px de padding nativo do Cover + 240px de margin
   auto), então acompanhamos esse valor aqui. Entre 1120–1439px usamos um
   recuo intermediário calculado da mesma forma, sempre verificado para
   não reduzir o espaço do menu abaixo do necessário (nav + logo ≈ 950px). */
@media (min-width: 1366px) {
  .mnt-arvo-header__inner {
    padding-left: 210px !important;
  }
}
@media (min-width: 1440px) {
  .mnt-arvo-header__inner {
    padding-left: 256px !important;
  }
}

/* === HERO === */
.mnt-arvo-hero {
  position: relative;
  overflow: hidden; /* contém o Ken Burns do ::before sem vazar do Hero */
}
/* Conteúdo ancorado perto do topo (não centralizado verticalmente no
   min-height:100vh do Cover) — o centro vertical padrão do WP Core
   (.is-position-center-left) deixava um vão vazio grande acima da eyebrow
   antes do título aparecer. */
.mnt-arvo-hero.wp-block-cover {
  align-items: flex-start !important;
}
/* Fundo isolado em ::before — Ken Burns precisa escalar só a foto; um
   transform em .mnt-arvo-hero escalaria o texto/CTAs junto. */
.mnt-arvo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/wp-content/themes/mnt-arvo/assets/images/hero-equipamento-arvo.webp') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .mnt-arvo-hero::before {
    animation: mnt-arvo-kenburns 16s ease-in-out infinite alternate;
  }
}
@keyframes mnt-arvo-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
.mnt-arvo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 90% at 10% 45%, rgba(0,0,0,0.35), transparent 70%),
    linear-gradient(
      to right,
      rgba(0,0,0,0.65) 0%,
      rgba(0,0,0,0.45) 55%,
      rgba(0,0,0,0.10) 100%
    );
  pointer-events: none;
  z-index: 0;
}
.mnt-arvo-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
}
/* Indicador de scroll — linha técnica, só onde há espaço vertical sobrando
   (tablet/desktop; no mobile o Hero é mais baixo e compete com os CTAs). */
@media (min-width: 768px) {
  .mnt-arvo-hero .wp-block-cover__inner-container::after {
    content: "";
    position: absolute;
    right: clamp(24px, 4vw, 64px);
    bottom: 32px;
    width: 3px;
    height: 56px;
    background: var(--wp--preset--color--brand-provisional);
    box-shadow: 0 0 8px rgba(34,204,34,0.5);
    transform-origin: bottom;
    pointer-events: none;
  }
}
@keyframes mnt-arvo-indicator-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.mnt-arvo-hero__content {
  max-width: 900px;
  padding: clamp(40px, 7vh, 72px) 0 clamp(32px, 6vh, 56px);
}
.mnt-arvo-eyebrow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;
}
.mnt-arvo-eyebrow__text {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-provisional);
  line-height: 1;
}
.mnt-arvo-eyebrow__line {
  width: 32px;
  height: 2px;
  background: var(--wp--preset--color--brand-provisional);
  margin-top: 8px;
}

/* ===================================================================
   SIGNATURE SYSTEM — "ARVO ENERGY RAIL" (consolidado na Rodada 3.2)
   ===================================================================
   Um único vocabulário gráfico, não um conjunto de decorações soltas por
   seção. Três peças, sempre as mesmas, remontadas conforme o contexto:

   1. TRILHO — linha fina (1–1.5px) em Signal Green, reta ou com marcas de
      régua a cada 12px (repeating-linear-gradient). Representa o cabo/
      condutor: a infraestrutura que já está lá, sempre visível mesmo sem
      JS/motion.
   2. NÓ — quadrado 6×6px com glow (box-shadow), marca pontos de conexão:
      origem, chegada, bifurcação. Nunca decorativo sozinho — sempre no
      início ou fim de um trilho.
   3. TERMINAL — o círculo numerado (Como Funciona) ou a etiqueta com tick
      (Modelos): onde o trilho "pousa" e vira informação legível.

   Onde aparece: Como Funciona (trilho vertical conectando header aos
   passos + trilho horizontal/régua ligando os 5 terminais numerados);
   Modelos (trilho vertical + nó de bifurcação em "Y", ligando header aos
   dois caminhos, e de novo entre os caminhos e o CTA); Benefícios reusa
   só o par trilho-curto + nó no acento do bloco de fechamento. Mesma
   lógica se estende a seções futuras sem inventar um 4º tratamento.

   Deliberadamente estático por padrão (funciona sem JS/motion) — a única
   peça com movimento é a "corrente" de Como Funciona (ver mnt-arvo-steps),
   que é o trilho + fluxo de energia percorrendo-o, não um elemento novo.
   Componente base reutilizável: */
.mnt-arvo-trail {
  position: relative;
  height: 40px;
}
.mnt-arvo-trail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5px;
  height: 100%;
  background: linear-gradient(to bottom, var(--wp--preset--color--brand-provisional), transparent);
}
.mnt-arvo-trail::after {
  content: "";
  position: absolute;
  left: -2.5px;
  bottom: -1px;
  width: 6px;
  height: 6px;
  background: var(--wp--preset--color--brand-provisional);
  box-shadow: 0 0 8px rgba(34,204,34,0.6);
}
.mnt-arvo-trail--short {
  height: 24px;
}
.mnt-arvo-hero__headline {
  max-width: 900px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: var(--wp--preset--color--on-surface) !important;
}
.mnt-arvo-hero__subheadline {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  max-width: 600px;
  color: var(--wp--preset--color--on-surface-muted) !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}
.mnt-arvo-hero__body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--wp--preset--color--on-surface-muted) !important;
  max-width: 600px;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}
.mnt-arvo-hero__ctas {
  margin-top: 36px !important;
}
.mnt-arvo-hero__cta-primary .wp-block-button__link {
  color: #000000 !important;
}
.mnt-arvo-hero__cta-primary .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--brand-hover-provisional) !important;
}
.mnt-arvo-hero__cta-primary .wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--on-surface);
  outline-offset: 4px;
}
.mnt-arvo-hero__cta-secondary .wp-block-button__link {
  background-color: transparent !important;
  color: var(--wp--preset--color--on-surface) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  box-shadow: none !important;
}
.mnt-arvo-hero__cta-secondary .wp-block-button__link:hover {
  background-color: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.6) !important;
}
.mnt-arvo-hero__cta-secondary .wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 4px;
}

/* Hero — animações de entrada (requer .has-js para não esconder conteúdo sem JS) */
@media (prefers-reduced-motion: no-preference) {
  .has-js .mnt-arvo-hero .mnt-arvo-eyebrow,
  .has-js .mnt-arvo-hero .mnt-arvo-hero__subheadline,
  .has-js .mnt-arvo-hero .mnt-arvo-hero__body,
  .has-js .mnt-arvo-hero .mnt-arvo-hero__ctas {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--wp--custom--duration--medium) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--medium) var(--wp--custom--easing--out);
  }
  /* Headline — wipe da esquerda pra direita via clip-path: o texto já
     nasce nítido no lugar certo, só a revelação é progressiva (sem
     caractere-por-caractere, sem efeito "apresentação"). */
  .has-js .mnt-arvo-hero .mnt-arvo-hero__headline {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 700ms var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-hero.is-visible .mnt-arvo-eyebrow     { opacity: 1; transform: none; transition-delay: 0ms; }
  .has-js .mnt-arvo-hero.is-visible .mnt-arvo-hero__headline    { clip-path: inset(0 0 0 0); transition-delay: 0ms; }
  .has-js .mnt-arvo-hero.is-visible .mnt-arvo-hero__subheadline { opacity: 1; transform: none; transition-delay: 150ms; }
  .has-js .mnt-arvo-hero.is-visible .mnt-arvo-hero__body        { opacity: 1; transform: none; transition-delay: 250ms; }
  .has-js .mnt-arvo-hero.is-visible .mnt-arvo-hero__ctas        { opacity: 1; transform: none; transition-delay: 300ms; }
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  /* Indicador de scroll — preenche uma única vez, por último (depois dos CTAs);
     depois de preenchido, uma respiração de opacidade lenta e contínua chama
     a atenção pro convite de rolar — é o único elemento da página com loop,
     porque sua função inteira é ser notado ao longo do tempo (diferente da
     Corrente/sweep, que são um momento narrativo único). */
  .has-js .mnt-arvo-hero .wp-block-cover__inner-container::after {
    transform: scaleY(0);
    transition: transform 500ms var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-hero.is-visible .wp-block-cover__inner-container::after {
    transform: scaleY(1);
    transition-delay: 450ms;
    animation: mnt-arvo-indicator-breathe 2400ms ease-in-out 950ms infinite;
  }
}

/* Hero — desktop (≥ 1024px) */
@media (min-width: 1024px) {
  .mnt-arvo-hero .wp-block-cover__inner-container {
    max-width: 1440px !important;
    padding-left: clamp(40px, 5vw, 80px) !important;
    padding-right: clamp(40px, 5vw, 80px) !important;
    box-sizing: border-box !important;
  }
  .mnt-arvo-hero__content {
    max-width: 960px;
    padding-top: clamp(56px, 9vh, 96px);
    padding-bottom: clamp(56px, 8vh, 96px);
  }
  .mnt-arvo-hero__headline {
    font-size: clamp(52px, 5vw, 76px) !important;
    line-height: 1.0 !important;
  }
  .mnt-arvo-hero__subheadline {
    font-size: clamp(20px, 2.2vw, 26px) !important;
    margin-top: 28px !important;
    max-width: 700px !important;
  }
  .mnt-arvo-hero__body {
    font-size: clamp(15px, 1.4vw, 18px) !important;
    max-width: 620px !important;
  }
  .mnt-arvo-hero__ctas {
    margin-top: 48px !important;
  }
  .mnt-arvo-hero__cta-primary .wp-block-button__link,
  .mnt-arvo-hero__cta-secondary .wp-block-button__link {
    padding: 16px 36px !important;
    font-size: 15px !important;
  }
}

/* Hero — tablet (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .mnt-arvo-hero.wp-block-cover {
    align-items: flex-start !important;
  }
  .mnt-arvo-hero .wp-block-cover__inner-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    padding-top: clamp(48px, 8vh, 84px) !important;
    padding-bottom: clamp(40px, 6vh, 64px) !important;
    box-sizing: border-box !important;
  }
  .mnt-arvo-hero__content {
    max-width: 100%;
    padding: 0;
  }
  .mnt-arvo-hero__headline {
    font-size: clamp(46px, 7.5vw, 70px) !important;
    line-height: 1.02 !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .mnt-arvo-hero__subheadline {
    font-size: clamp(18px, 2.8vw, 22px) !important;
    max-width: 100% !important;
    margin-top: 22px !important;
  }
  .mnt-arvo-hero__body {
    font-size: 16px !important;
    max-width: 100% !important;
    margin-top: 12px !important;
  }
  .mnt-arvo-hero__ctas {
    margin-top: 36px !important;
  }
  .mnt-arvo-hero__cta-primary .wp-block-button__link,
  .mnt-arvo-hero__cta-secondary .wp-block-button__link {
    padding: 14px 28px !important;
    font-size: 14px !important;
  }
}

/* === CREDIBILIDADE === */
/* Superfície raised (#141414) entre o Hero (imagem) e Como Funciona
   (surface-base/void) — mantém a alternância de valor do sistema em vez
   de repetir o mesmo preto do Hero logo na seção seguinte. */
.mnt-arvo-credibilidade {
  background-color: var(--wp--preset--color--surface-raised-provisional);
  padding-top: 80px;
  padding-bottom: 80px;
}
.mnt-arvo-credibilidade__inner {
  padding-left: clamp(40px, 5vw, 80px) !important;
  padding-right: clamp(40px, 5vw, 80px) !important;
  box-sizing: border-box !important;
}
/* Headline editorial — vive no topo do bloco direito (.proof), ancorada
   à trilha Brasil -> China logo abaixo (ver .route), não mais solta
   como título de largura total no topo da seção. Usa o step h3 do ramp
   documentado (DESIGN.md §4) em vez do h2 padrão (clamp 32-60px):
   aqui ela é o cabeçalho de um bloco de prova de ~420-480px, não o
   título da seção inteira — ainda maior que a citação (destaque) para
   preservar a hierarquia headline > citação > stats, sem inventar um
   novo degrau fora do ramp. */
.mnt-arvo-credibilidade__headline {
  max-width: 440px;
  font-size: var(--wp--preset--font-size--h-3);
  /* Herdava line-height:1.0 do H2 global (theme.json) — correto pra título
     de 1 linha, apertado demais pras 2 linhas em que este headline quebra
     (max-width:440px), mesmo ajuste já aplicado a Benefícios/Segmentos/Como
     Funciona/Soluções nesta rodada. */
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 20px 0 !important;
  color: var(--wp--preset--color--on-surface) !important;
}
.mnt-arvo-credibilidade__headline-accent {
  color: var(--wp--preset--color--brand-provisional);
}

/* Trajeto Brasil -> China — substitui a antiga faixa de citação lisa
   (wet-graphite-info sólido) como o primeiro elemento visual forte da
   seção, logo abaixo da headline. Ponto viaja de forma contínua e
   ambiente (não é reveal-uma-vez-só como o resto do site: fica em loop
   discreto enquanto a seção está visível, ver main.js) — reforça
   "trajeto sendo percorrido", não um evento único. Track e labels usam o
   mesmo vocabulário de traço fino/rótulo discreto já usado na faixa de
   potência de Soluções de Recarga, sem reinventar um quarto padrão de
   "linha com marcadores" no site. */
.mnt-arvo-credibilidade__route {
  max-width: 480px;
  margin: 0 0 36px 0;
}
.mnt-arvo-credibilidade__route-track {
  position: relative;
  width: 100%;
  height: 1px;
  background: var(--wp--custom--color--border-subtle);
}
.mnt-arvo-credibilidade__route-track::before,
.mnt-arvo-credibilidade__route-track::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wp--preset--color--on-surface-muted);
  transform: translate(-50%, -50%);
}
.mnt-arvo-credibilidade__route-track::before { left: 0; }
.mnt-arvo-credibilidade__route-track::after { left: 100%; background: var(--wp--preset--color--brand-provisional); }
.mnt-arvo-credibilidade__route-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wp--preset--color--brand-provisional);
  box-shadow: 0 0 6px rgba(34,204,34,0.5);
  transform: translate(-50%, -50%);
}
.mnt-arvo-credibilidade__route-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
.mnt-arvo-credibilidade__route-point {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mnt-arvo-credibilidade__route-point--end {
  align-items: flex-end;
  text-align: right;
}
.mnt-arvo-credibilidade__route-point strong {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: var(--wp--custom--font-weight--bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--on-surface);
}
.mnt-arvo-credibilidade__route-point small {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: var(--wp--preset--color--on-surface-muted);
}
@media (prefers-reduced-motion: no-preference) {
  .has-js .mnt-arvo-credibilidade__route-dot {
    animation: mnt-arvo-route-travel 4200ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-play-state: paused;
    /* O play-state vira "running" no mesmo instante em que .is-visible é
       setado, mas o bloco-pai (.mnt-arvo-credibilidade__route) ainda está
       no meio do próprio fade (delay 180ms + 400ms de duração = 580ms
       até ficar opaco). Sem o delay abaixo, o primeiro frame que o
       usuário via já mostrava o ponto ~28% do trajeto — nunca "saindo"
       do Brasil. animation-delay alinhado ao fim do fade do pai;
       fill-mode:backwards mantém o ponto no estado do keyframe 0%
       (opacity:0) durante a espera, evitando um flash no instante em que
       o delay termina. Só se aplica na 1ª iteração de um loop infinite,
       então as voltas seguintes não são afetadas. */
    animation-delay: 600ms;
    animation-fill-mode: backwards;
  }
  .has-js .mnt-arvo-credibilidade.is-visible .mnt-arvo-credibilidade__route-dot {
    animation-play-state: running;
  }
}
@keyframes mnt-arvo-route-travel {
  0%   { left: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  50%  { left: 100%; opacity: 1; }
  58%  { opacity: 0; }
  100% { left: 0%;   opacity: 0; }
}

/* Composição editorial em duas zonas — texto de identidade à esquerda,
   bloco de prova (headline + trilha + citação + credenciais) à direita.
   Flex, não grid (nenhum layout do sistema usa CSS grid para composição
   de seção). .proof vem primeiro no DOM (headline ancora a leitura antes
   do texto corrido, tanto em telas sem CSS quanto no empilhamento
   mobile/tablet — ver media queries abaixo) e usa `order` para aparecer
   à direita apenas no layout de duas colunas (desktop). */
.mnt-arvo-credibilidade__row {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-start;
}
.mnt-arvo-credibilidade__intro {
  order: 1;
  flex: 1 1 300px;
  min-width: 0;
  /* Unifica a largura da coluna inteira — antes cada parágrafo filho tinha
     seu próprio max-width (480/380/nenhum), gerando bordas direitas
     irregulares que liam como texto corrido solto em vez de coluna
     desenhada. */
  max-width: 480px;
}
.mnt-arvo-credibilidade__lead {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.65;
  color: var(--wp--preset--color--on-surface-muted);
  margin: 0 0 28px 0;
}
.mnt-arvo-credibilidade__subheadline {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: var(--wp--custom--font-weight--bold);
  line-height: 1.5;
  color: var(--wp--preset--color--on-surface);
  margin: 0 0 20px 0;
}

.mnt-arvo-credibilidade__proof {
  order: 2;
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Bloco de citação — antes era um painel liso (wet-graphite-info sólido,
   a "faixa azul" sinalizada como fraca/pouco premium); substituído por
   tratamento tipográfico editorial puro: sem fundo, sem borda de nenhum
   tipo (uma borda-esquerda colorida vira "side-tab", um dos clichês mais
   reconhecíveis de UI genérica gerada por IA — removida de propósito
   depois de sinalizada pela auditoria de design). A aspa de abertura em
   escala grande é o único elemento gráfico, funcionando como assinatura
   visual sozinha, sem precisar de linha/moldura para "seguntar" o bloco. */
.mnt-arvo-credibilidade__quote {
  background: none;
  border: none;
  padding: 4px 0 0 26px;
  margin: 0 0 32px 0;
  position: relative;
}
.mnt-arvo-credibilidade__quote::before {
  content: "\201C";
  position: absolute;
  top: -18px;
  left: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  color: var(--wp--preset--color--brand-provisional);
  opacity: 0.35;
}
.mnt-arvo-credibilidade__quote::after {
  content: none;
}
.mnt-arvo-credibilidade__quote p {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(19px, 2.1vw, 24px);
  font-weight: var(--wp--custom--font-weight--bold);
  line-height: 1.35;
  color: var(--wp--preset--color--on-surface);
  margin: 0 0 12px 0;
}
.mnt-arvo-credibilidade__quote cite {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--wp--preset--font-size--caption);
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--on-surface-muted);
}

/* Stats — critérios de seleção e validação técnica da ARVO EV, não
   números institucionais de um fabricante específico. Label descritivo
   visível e amarrado ao grid via aria-labelledby (mesma severidade
   semântica de um caption de tabela). Mesmo estilo de rótulo já
   usado em .mnt-arvo-footer__col-label, sem inventar tratamento novo. */
.mnt-arvo-credibilidade__stats-label {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--wp--preset--font-size--caption);
  font-weight: var(--wp--custom--font-weight--bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--on-surface-muted);
  margin: 0 0 12px 0;
}
.mnt-arvo-credibilidade__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 24px;
  margin: 0;
}
.mnt-arvo-credibilidade__stat {
  min-width: 0;
  border-top: 2px solid var(--wp--preset--color--brand-provisional);
  padding-top: 10px;
}
.mnt-arvo-credibilidade__stat dt {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--wp--preset--color--on-surface);
  margin: 0 0 4px 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Assentamento do count-up — leve "pop" no instante em que o número
   chega ao valor final (classe .mnt-arvo-count-settle, main.js), em vez
   de simplesmente parar de contar. Só transform (sem drop-shadow verde
   em texto, proibido em DESIGN.md §9). */
@keyframes mnt-arvo-stat-settle {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .mnt-arvo-credibilidade__stat dt.mnt-arvo-count-settle {
    animation: mnt-arvo-stat-settle 420ms var(--wp--custom--easing--out);
  }
}
.mnt-arvo-credibilidade__stat dd {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--wp--preset--font-size--caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--on-surface-muted);
  margin: 0;
}

/* Separador discreto entre o texto institucional (lead/subheadline) e o
   dado de mercado — reaproveita o mesmo hairline já usado em
   .mnt-arvo-modelo-card__ideal (border-top 1px, mesma opacidade) em vez de
   inventar um novo tratamento; marca a evidência de mercado como uma
   categoria de conteúdo à parte sem virar card. */
.mnt-arvo-credibilidade__market {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--wp--preset--color--on-surface-muted);
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.mnt-arvo-credibilidade__market small {
  display: block;
  margin-top: 6px;
  font-size: var(--wp--preset--font-size--caption);
  color: var(--wp--preset--color--on-surface-muted);
  opacity: 0.65;
}

/* Reveal animations — mesmo padrão de stagger 80ms usado em Como
   Funciona/Modelos/Benefícios. */
@media (prefers-reduced-motion: no-preference) {
  .has-js .mnt-arvo-credibilidade .mnt-arvo-eyebrow,
  .has-js .mnt-arvo-credibilidade .mnt-arvo-credibilidade__headline,
  .has-js .mnt-arvo-credibilidade .mnt-arvo-credibilidade__route,
  .has-js .mnt-arvo-credibilidade__intro,
  .has-js .mnt-arvo-credibilidade__quote,
  .has-js .mnt-arvo-credibilidade__market {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--wp--custom--duration--medium) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--medium) var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-credibilidade.is-visible .mnt-arvo-eyebrow               { opacity: 1; transform: none; transition-delay: 0ms; }
  .has-js .mnt-arvo-credibilidade.is-visible .mnt-arvo-credibilidade__headline { opacity: 1; transform: none; transition-delay: 100ms; }
  .has-js .mnt-arvo-credibilidade.is-visible .mnt-arvo-credibilidade__route  { opacity: 1; transform: none; transition-delay: 180ms; }
  .has-js .mnt-arvo-credibilidade.is-visible .mnt-arvo-credibilidade__intro  { opacity: 1; transform: none; transition-delay: 260ms; }
  .has-js .mnt-arvo-credibilidade.is-visible .mnt-arvo-credibilidade__quote  { opacity: 1; transform: none; transition-delay: 320ms; }
  .has-js .mnt-arvo-credibilidade.is-visible .mnt-arvo-credibilidade__market { opacity: 1; transform: none; transition-delay: 460ms; }

  .has-js .mnt-arvo-credibilidade__stat {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity var(--wp--custom--duration--short) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--short) var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-credibilidade__stat.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* Tablet (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .mnt-arvo-credibilidade {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .mnt-arvo-credibilidade__inner {
    padding-left: 48px !important;
    padding-right: 48px !important;
    box-sizing: border-box !important;
  }
  .mnt-arvo-credibilidade__row {
    flex-direction: column;
    gap: 32px;
  }
  /* Empilhado: ordem visual volta a seguir o DOM (proof/headline primeiro)
     em vez do layout de duas colunas do desktop — ver comentário em
     .mnt-arvo-credibilidade__row acima. */
  .mnt-arvo-credibilidade__intro,
  .mnt-arvo-credibilidade__proof {
    order: initial;
  }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  .mnt-arvo-credibilidade {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .mnt-arvo-credibilidade__inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .mnt-arvo-credibilidade__headline {
    margin-bottom: 24px !important;
  }
  .mnt-arvo-credibilidade__route {
    margin-bottom: 32px;
  }
  .mnt-arvo-credibilidade__row {
    flex-direction: column;
    gap: 28px;
  }
  .mnt-arvo-credibilidade__intro,
  .mnt-arvo-credibilidade__proof {
    order: initial;
  }
  .mnt-arvo-credibilidade__quote {
    padding: 4px 0 0 20px;
  }
  .mnt-arvo-credibilidade__quote::before {
    font-size: 52px;
    left: 0;
  }
  .mnt-arvo-credibilidade__market {
    padding-top: 16px;
  }
  .mnt-arvo-credibilidade__stats {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* === COMO FUNCIONA === */
/* Superfície off-black com grid técnico sutil (não preto chapado) + brilho
   verde vazando do topo — suaviza o corte duro vindo do Hero em vez de uma
   simples troca de background-color. Tudo gradiente, sem imagem/blur. */
.mnt-arvo-como-funciona {
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(34,204,34,0.06), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 64px),
    var(--wp--preset--color--surface-base);
  padding-top: 80px;
  padding-bottom: 80px;
  position: relative;
}
.mnt-arvo-como-funciona__inner {
  padding-left: clamp(40px, 5vw, 80px) !important;
  padding-right: clamp(40px, 5vw, 80px) !important;
  box-sizing: border-box !important;
}
.mnt-arvo-como-funciona__headline {
  /* Escala própria (mesmo padrão de Segmentos/Modelos), não mais o token
     h-2 compartilhado — frase curta ("Do primeiro contato / à operação.")
     não precisa do teto de 60px do H2 genérico para ler como forte. */
  max-width: 820px;
  /* margin-left/right explícitos: mesma correção já aplicada em Segmentos
     — WP Core injeta auto-margin centralizador em filho de grupo
     align="wide"/layout:constrained quando o max-width é bem menor que o
     container (até 1440px), o que empurrava a headline para o centro. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  font-size: clamp(34px, 4.2vw, 52px) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance;
  color: var(--wp--preset--color--on-surface) !important;
}
.mnt-arvo-como-funciona__headline-accent {
  color: var(--wp--preset--color--brand-provisional);
}
.mnt-arvo-como-funciona__lead {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.6;
  max-width: 760px;
  margin-left: 0 !important;
  margin-right: 0 !important;
  color: var(--wp--preset--color--on-surface-muted) !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}

/* Steps list — a Trilha vertical que ficava aqui foi removida (lia como
   "traço solto" desconectado da régua horizontal abaixo, ver rodada de
   refinamento de motion); o respiro entre o parágrafo e a fileira de
   círculos agora vem só desta margem. */
.mnt-arvo-steps {
  list-style: none;
  margin: 48px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  position: relative;
  /* Camada de profundidade sutil atrás das etapas — um "platô" técnico
     entre o fundo da seção e o conteúdo, sem virar mais um card e sem
     alterar o box model (senão a matemática de posição do trilho/corrente
     abaixo, calculada a partir do topo deste container, desalinha). */
  background: linear-gradient(to bottom, rgba(255,255,255,0.025), transparent 75%);
  border-radius: 4px;
}

/* Trilho — régua técnica com marcas a cada 12px (Rodada 3.2), não mais
   uma linha lisa. Lê como "grid de coordenadas"/infraestrutura sendo
   medida, e dá à corrente (::after) uma superfície com textura pra
   preencher, em vez de deslizar sobre o vazio. */
.mnt-arvo-steps::before {
  content: "";
  position: absolute;
  top: 23px; /* 26px (centro do círculo de 52px) - metade dos 6px de altura */
  left: 26px;
  right: 26px;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--wp--custom--color--border-subtle) 0, var(--wp--custom--color--border-subtle) 1px, transparent 1px, transparent 12px);
  z-index: 0;
}
/* === CORRENTE — ATIVAÇÃO DE REDE ===
   Substitui o conceito antigo de "ponto viajando" (removido — ver
   DECISIONS.md). Em vez de uma única barra de preenchimento contínuo, a
   trilha é dividida em 4 segmentos reais (elementos .mnt-arvo-corrente-segment,
   um entre cada par de círculos), cada um energizando-se por vez — lê como
   uma infraestrutura elétrica sendo ligada etapa por etapa, não uma
   timeline genérica correndo de ponta a ponta. .mnt-arvo-steps::before
   (trilho pontilhado, acima) continua sendo a "linha base" neutra/escura;
   os segmentos são a camada verde de ativação por cima dela. As keyframes
   mnt-arvo-corrente-fill-x/-y (abaixo) não são mais usadas aqui — continuam
   servindo Modelos/Soluções de Recarga, intocadas. As keyframes
   mnt-arvo-corrente-dot-flow-x/-y, que só o antigo ponto viajante desta
   seção usava, foram removidas (código morto, ver DECISIONS.md). */
.mnt-arvo-corrente-segment {
  position: absolute;
  top: 24.5px; /* mesmo eixo vertical do trilho, linha de 3px */
  height: 3px;
  transform-origin: left;
  z-index: 0;
  pointer-events: none;
  /* Verde sólido com uma faixa clara embutida no próprio gradiente perto
     da borda de crescimento — não um elemento "cabeça" separado. Como os
     stops são % da largura ATUAL do segmento, a faixa acompanha a ponta
     que está crescendo (scaleX) sem esticar/distorcer como um dot
     circular esticaria numa caixa escalada. Sensação de corrente elétrica
     concentrada na região que está sendo ativada, sem elemento extra. */
  background: linear-gradient(
    to right,
    var(--wp--preset--color--brand-provisional) 0%,
    var(--wp--preset--color--brand-provisional) 78%,
    rgba(230,255,235,0.95) 92%,
    var(--wp--preset--color--brand-provisional) 100%
  );
  /* Glow discreto, só na região do próprio segmento (não na trilha
     inteira) — "glow acompanha somente a região que está sendo ativada". */
  box-shadow: 0 0 6px rgba(34,204,34,0.35);
}
/* Posição de cada segmento: 5 colunas iguais de 20% (mesma largura dos
   .mnt-arvo-step, flex:1), inset de 26px (raio do círculo de 52px) nas
   duas pontas — mesma convenção de .mnt-arvo-steps::before/::before. */
.mnt-arvo-corrente-segment--1 { left: 26px; right: calc(80% - 26px); }
.mnt-arvo-corrente-segment--2 { left: calc(20% + 26px); right: calc(60% - 26px); }
.mnt-arvo-corrente-segment--3 { left: calc(40% + 26px); right: calc(40% - 26px); }
.mnt-arvo-corrente-segment--4 { left: calc(60% + 26px); right: calc(20% - 26px); }
/* Passagem final — confirmação sutil de "rede operacional" depois que o
   passo 5 ativa: uma faixa clara estreita atravessa a linha inteira uma
   única vez (ver reveal mais abaixo). Elemento próprio, acima dos
   segmentos (z-index maior), para não interferir no brilho deles. */
.mnt-arvo-corrente-finale {
  position: absolute;
  top: 24.5px;
  left: 26px;
  right: 26px;
  height: 3px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to right, transparent 0%, rgba(230,255,235,0.9) 50%, transparent 100%);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  background-position: -40% 0;
}
/* Preenchimento em etapas — cada patamar coincide com o instante em que a
   corrente "alcança" um step (mesma proporção dos delays do pulso: 150ms,
   330ms, 510ms, 690ms, 870ms sobre uma animação de 950ms), no lugar de uma
   única interpolação linear de 0 a 1. */
@keyframes mnt-arvo-corrente-fill-x {
  0%   { transform: scaleX(0); }
  16%  { transform: scaleX(0.2); }
  37%  { transform: scaleX(0.4); }
  57%  { transform: scaleX(0.6); }
  77%  { transform: scaleX(0.8); }
  100% { transform: scaleX(1); }
}
@keyframes mnt-arvo-corrente-fill-y {
  0%   { transform: scaleY(0); }
  16%  { transform: scaleY(0.2); }
  37%  { transform: scaleY(0.4); }
  57%  { transform: scaleY(0.6); }
  77%  { transform: scaleY(0.8); }
  100% { transform: scaleY(1); }
}
.mnt-arvo-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  padding-right: 32px;
}
.mnt-arvo-step:last-child {
  padding-right: 0;
}

/* Numbered circle — fundo SÓLIDO (não translúcido): precisa mascarar
   completamente a linha "Corrente" que passa atrás dele (z-index já cuida
   da ordem de pintura, mas um fundo 95% transparente deixava a linha sólida
   "vazar" visualmente através do círculo, lendo como se cruzasse por cima
   dos números). O tom sutil de verde continua via box-shadow inset, que
   pinta por cima do fundo sem abrir transparência para o que está atrás. */
.mnt-arvo-step__number {
  width: 52px;
  height: 52px;
  border: 1.5px solid var(--wp--preset--color--brand-provisional);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 900;
  color: var(--wp--preset--color--brand-provisional);
  background: var(--wp--preset--color--surface-base);
  /* Preenchimento interno + anel externo — sensação de instrumento técnico,
     não só um número num círculo. */
  box-shadow:
    inset 0 0 0 52px rgba(34, 204, 34, 0.08),
    0 0 0 4px rgba(34, 204, 34, 0.05);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  margin-bottom: 24px;
  transition: border-color 200ms var(--wp--custom--easing--out);
}
/* Marca de dial no topo do círculo — reforça a leitura "instrumento
   técnico" (como um mostrador), não decoração gratuita. */
.mnt-arvo-step__number::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 6px;
  background: var(--wp--preset--color--brand-provisional);
}
/* Ring de ativação — expande e desaparece uma única vez quando a energia
   chega no círculo (ver @keyframes mnt-arvo-step-ring e reveal mais
   abaixo). ::after livre pra isso (::before já é a marca de dial acima).
   opacity:0 por padrão — só existe durante o pulso de chegada. */
.mnt-arvo-step__number::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--wp--preset--color--brand-provisional);
  opacity: 0;
  pointer-events: none;
}
/* Dígito — elemento próprio (não mais texto solto dentro do círculo) pra
   ter sua própria microanimação de entrada (opacity + scale), independente
   da borda/fundo do círculo (ver reveal mais abaixo). */
.mnt-arvo-step__number-digit {
  display: inline-block;
}
/* Brilho interno crescente a cada passo — sugere energia acumulando ao
   longo do processo, sem depender de motion (funciona igual sem JS).
   --mnt-step-settled-shadow guarda o mesmo valor pra ser reaproveitado no
   estado ATIVO do reveal mais abaixo, sem repetir os números 5 vezes. */
.mnt-arvo-step:nth-of-type(1) .mnt-arvo-step__number { --mnt-step-settled-shadow: inset 0 0 0 52px rgba(34,204,34,0.05), 0 0 0 4px rgba(34,204,34,0.03); box-shadow: var(--mnt-step-settled-shadow); }
.mnt-arvo-step:nth-of-type(2) .mnt-arvo-step__number { --mnt-step-settled-shadow: inset 0 0 0 52px rgba(34,204,34,0.06), 0 0 0 4px rgba(34,204,34,0.04); box-shadow: var(--mnt-step-settled-shadow); }
.mnt-arvo-step:nth-of-type(3) .mnt-arvo-step__number { --mnt-step-settled-shadow: inset 0 0 0 52px rgba(34,204,34,0.07), 0 0 0 4px rgba(34,204,34,0.05); box-shadow: var(--mnt-step-settled-shadow); }
.mnt-arvo-step:nth-of-type(4) .mnt-arvo-step__number { --mnt-step-settled-shadow: inset 0 0 0 52px rgba(34,204,34,0.085), 0 0 0 4px rgba(34,204,34,0.065); box-shadow: var(--mnt-step-settled-shadow); }
.mnt-arvo-step:nth-of-type(5) .mnt-arvo-step__number { --mnt-step-settled-shadow: inset 0 0 0 52px rgba(34,204,34,0.1), 0 0 0 4px rgba(34,204,34,0.08); box-shadow: var(--mnt-step-settled-shadow); }

/* Alternância discreta de posição — só onde existe a fileira horizontal
   (desktop, ≥1024px). O círculo se desloca alguns pixels pra cima/baixo
   em relação ao trilho fixo (que não se move); a régua técnica embaixo
   permanece reta, só os "terminais" numerados sobem e descem de leve —
   sugere passos individuais numa infraestrutura contínua, sem virar
   zig-zag (a linha nunca segue o deslocamento).
   Guardado como custom property (não como transform direto): a transição
   de ativação do círculo (ver reveal mais abaixo) também anima
   `transform` (scale) — combinando os dois via var() evita que a
   transição apague o deslocamento vertical ao terminar. */
@media (min-width: 1024px) {
  .mnt-arvo-step:nth-of-type(odd) .mnt-arvo-step__number { --mnt-step-y-offset: -4px; transform: translateY(var(--mnt-step-y-offset)); }
  .mnt-arvo-step:nth-of-type(even) .mnt-arvo-step__number { --mnt-step-y-offset: 4px; transform: translateY(var(--mnt-step-y-offset)); }
}

.mnt-arvo-step__title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--on-surface) !important;
  margin: 0 0 12px 0;
}

.mnt-arvo-step__desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--wp--preset--color--on-surface-muted);
  margin: 0;
}

/* Ring de ativação — pulso único quando a energia chega no círculo:
   opacity 0.5->0, scale 1->1.45, ~550ms. Não dá pra expressar como
   transition simples (precisaria "aparecer" já em 0.5 sem fade-in e
   FICAR desaparecendo — dois estados não bastam), então é a única
   keyframe nova além da passagem final abaixo. Reaproveitada 5x via
   animation-delay, não duplicada por etapa. */
@keyframes mnt-arvo-step-ring {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.45); }
}
/* Passagem final de brilho — ver .mnt-arvo-corrente-finale acima.
   background-position varre a faixa clara da esquerda pra direita sobre
   a linha inteira, uma única vez, como confirmação de "rede
   operacional" depois que o passo 5 ativa. */
@keyframes mnt-arvo-corrente-finale-sweep {
  0%   { opacity: 0; background-position: -40% 0; }
  15%  { opacity: 0.8; }
  85%  { opacity: 0.8; }
  100% { opacity: 0; background-position: 140% 0; }
}

/* Reveal — círculos, ring, dígito, título/descrição de cada etapa e os 4
   segmentos de energia disparam todos a partir de um único gatilho
   (.mnt-arvo-como-funciona.is-visible, setado pelo sectionObs em
   main.js) — sem observers/timings paralelos. Quase tudo é `transition`
   (2 estados: inativo -> ativo) em vez de keyframes — mais simples de
   auditar; as únicas 2 keyframes novas (acima) cobrem os únicos efeitos
   que um transition de 2 pontos não expressa (ring, passagem final). */
@media (prefers-reduced-motion: no-preference) {
  /* Section header elements */
  .has-js .mnt-arvo-como-funciona .mnt-arvo-eyebrow,
  .has-js .mnt-arvo-como-funciona .mnt-arvo-como-funciona__headline,
  .has-js .mnt-arvo-como-funciona .mnt-arvo-como-funciona__lead {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--wp--custom--duration--medium) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--medium) var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-eyebrow              { opacity: 1; transform: none; transition-delay: 0ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-como-funciona__headline { opacity: 1; transform: none; transition-delay: 100ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-como-funciona__lead  { opacity: 1; transform: none; transition-delay: 200ms; }

  /* Círculo — estado INATIVO até a energia chegar (fundo já é escuro por
     padrão; aqui borda/glow interno ficam discretos e o círculo nasce
     levemente reduzido). Vale em qualquer largura — é o "círculo ativa"
     que sozinho já funciona em tablet/mobile sem precisar da linha. */
  .has-js .mnt-arvo-como-funciona .mnt-arvo-step__number {
    transform: translateY(var(--mnt-step-y-offset, 0px)) scale(0.97);
    border-color: rgba(34,204,34,0.3);
    box-shadow: inset 0 0 0 52px rgba(34,204,34,0.02), 0 0 0 4px rgba(34,204,34,0.015);
    transition:
      border-color 260ms var(--wp--custom--easing--out),
      box-shadow 260ms var(--wp--custom--easing--out),
      transform 260ms var(--wp--custom--easing--out);
  }
  /* Dígito — microanimação própria (opacity + scale), independente da
     borda/fundo do círculo acima: "o número não pode simplesmente já
     estar parado dentro do círculo". */
  .has-js .mnt-arvo-como-funciona .mnt-arvo-step__number-digit {
    opacity: 0;
    transform: scale(0.85);
    color: rgba(34,204,34,0.45);
    transition:
      opacity 220ms var(--wp--custom--easing--out),
      transform 220ms var(--wp--custom--easing--out),
      color 260ms var(--wp--custom--easing--out);
  }
  /* Ring — parado/invisível até a energia chegar (a keyframe cuida do
     "aparece já em 0.5 e desaparece"; aqui só garantimos que não toca
     enquanto a seção não está visível). */
  .has-js .mnt-arvo-como-funciona .mnt-arvo-step__number::after {
    animation: none;
    opacity: 0;
  }
  /* Título e descrição — revelam separados (título primeiro), não como
     um bloco único: "energia chega -> círculo ativa -> título revela ->
     descrição revela". */
  .has-js .mnt-arvo-como-funciona .mnt-arvo-step__title,
  .has-js .mnt-arvo-como-funciona .mnt-arvo-step__desc {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 320ms var(--wp--custom--easing--out),
      transform 320ms var(--wp--custom--easing--out);
  }

  /* Timing por etapa — passo 1 ativa em 0ms; cada trecho de energia entre
     círculos leva 350ms (250/650/1050/1450ms, ver bloco desktop abaixo);
     título/descrição de cada etapa seguem 80/160ms depois do próprio
     círculo. Contínuo, sem intervalo morto. Dispara uma única vez por
     visita (sem `forwards` explícito nestas linhas porque já é o valor
     final da transition, que naturalmente persiste). */
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(1) .mnt-arvo-step__number       { transform: translateY(var(--mnt-step-y-offset, 0px)) scale(1.03); border-color: var(--wp--preset--color--brand-provisional); box-shadow: var(--mnt-step-settled-shadow); transition-delay: 0ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(2) .mnt-arvo-step__number       { transform: translateY(var(--mnt-step-y-offset, 0px)) scale(1.03); border-color: var(--wp--preset--color--brand-provisional); box-shadow: var(--mnt-step-settled-shadow); transition-delay: 600ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(3) .mnt-arvo-step__number       { transform: translateY(var(--mnt-step-y-offset, 0px)) scale(1.03); border-color: var(--wp--preset--color--brand-provisional); box-shadow: var(--mnt-step-settled-shadow); transition-delay: 1000ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(4) .mnt-arvo-step__number       { transform: translateY(var(--mnt-step-y-offset, 0px)) scale(1.03); border-color: var(--wp--preset--color--brand-provisional); box-shadow: var(--mnt-step-settled-shadow); transition-delay: 1400ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(5) .mnt-arvo-step__number       { transform: translateY(var(--mnt-step-y-offset, 0px)) scale(1.03); border-color: var(--wp--preset--color--brand-provisional); box-shadow: var(--mnt-step-settled-shadow); transition-delay: 1800ms; }

  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(1) .mnt-arvo-step__number-digit { opacity: 1; transform: scale(1); color: var(--wp--preset--color--brand-provisional); transition-delay: 0ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(2) .mnt-arvo-step__number-digit { opacity: 1; transform: scale(1); color: var(--wp--preset--color--brand-provisional); transition-delay: 600ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(3) .mnt-arvo-step__number-digit { opacity: 1; transform: scale(1); color: var(--wp--preset--color--brand-provisional); transition-delay: 1000ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(4) .mnt-arvo-step__number-digit { opacity: 1; transform: scale(1); color: var(--wp--preset--color--brand-provisional); transition-delay: 1400ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(5) .mnt-arvo-step__number-digit { opacity: 1; transform: scale(1); color: var(--wp--preset--color--brand-provisional); transition-delay: 1800ms; }

  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(1) .mnt-arvo-step__number::after { animation: mnt-arvo-step-ring 550ms var(--wp--custom--easing--out) 0ms forwards; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(2) .mnt-arvo-step__number::after { animation: mnt-arvo-step-ring 550ms var(--wp--custom--easing--out) 600ms forwards; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(3) .mnt-arvo-step__number::after { animation: mnt-arvo-step-ring 550ms var(--wp--custom--easing--out) 1000ms forwards; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(4) .mnt-arvo-step__number::after { animation: mnt-arvo-step-ring 550ms var(--wp--custom--easing--out) 1400ms forwards; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(5) .mnt-arvo-step__number::after { animation: mnt-arvo-step-ring 550ms var(--wp--custom--easing--out) 1800ms forwards; }

  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(1) .mnt-arvo-step__title { opacity: 1; transform: none; transition-delay: 80ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(1) .mnt-arvo-step__desc  { opacity: 1; transform: none; transition-delay: 160ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(2) .mnt-arvo-step__title { opacity: 1; transform: none; transition-delay: 680ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(2) .mnt-arvo-step__desc  { opacity: 1; transform: none; transition-delay: 760ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(3) .mnt-arvo-step__title { opacity: 1; transform: none; transition-delay: 1080ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(3) .mnt-arvo-step__desc  { opacity: 1; transform: none; transition-delay: 1160ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(4) .mnt-arvo-step__title { opacity: 1; transform: none; transition-delay: 1480ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(4) .mnt-arvo-step__desc  { opacity: 1; transform: none; transition-delay: 1560ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(5) .mnt-arvo-step__title { opacity: 1; transform: none; transition-delay: 1880ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-step:nth-of-type(5) .mnt-arvo-step__desc  { opacity: 1; transform: none; transition-delay: 1960ms; }
}

/* Segmentos de energia + passagem final — só desktop (≥1024px), onde a
   trilha horizontal existe (tablet/mobile ficam com display:none, ver
   breakpoints abaixo — só círculo/ring/dígito/texto acima, que já
   funcionam em qualquer largura, cuidam do "reveal/pulso" nas telas
   menores). Timing bate exatamente com a chegada da energia em cada
   círculo acima: trecho N->N+1 termina no instante em que o círculo N+1
   ativa. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .has-js .mnt-arvo-corrente-segment {
    transform: scaleX(0);
    transition: transform 350ms var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-corrente-segment--1 { transform: scaleX(1); transition-delay: 250ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-corrente-segment--2 { transform: scaleX(1); transition-delay: 650ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-corrente-segment--3 { transform: scaleX(1); transition-delay: 1050ms; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-corrente-segment--4 { transform: scaleX(1); transition-delay: 1450ms; }

  .has-js .mnt-arvo-corrente-finale { opacity: 0; }
  .has-js .mnt-arvo-como-funciona.is-visible .mnt-arvo-corrente-finale {
    animation: mnt-arvo-corrente-finale-sweep 650ms linear 2200ms forwards;
  }
}

/* Microinteração pós-animação (desktop, hover real) — bem discreta: leve
   glow extra no círculo, título ligeiramente mais claro, o segmento
   seguinte reage de leve. Não usa .is-visible/delay — funciona a
   qualquer momento (antes, durante ou depois da sequência de entrada),
   como qualquer :hover comum. */
@media (hover: hover) and (pointer: fine) {
  .mnt-arvo-step__number {
    transition: box-shadow 200ms var(--wp--custom--easing--out);
  }
  .mnt-arvo-step__title {
    transition: color 200ms var(--wp--custom--easing--out);
  }
  .mnt-arvo-corrente-segment {
    transition: filter 200ms var(--wp--custom--easing--out);
  }
  .mnt-arvo-step:hover .mnt-arvo-step__number {
    box-shadow: var(--mnt-step-settled-shadow, inset 0 0 0 52px rgba(34,204,34,0.08), 0 0 0 4px rgba(34,204,34,0.05)), 0 0 10px rgba(34,204,34,0.25);
  }
  .mnt-arvo-step:hover .mnt-arvo-step__title {
    color: #fff !important;
  }
  .mnt-arvo-step:hover + .mnt-arvo-corrente-segment {
    filter: brightness(1.15);
  }
}

/* Tablet (768–1023px): coluna única */
@media (min-width: 768px) and (max-width: 1023px) {
  .mnt-arvo-header__inner {
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }
  .mnt-arvo-como-funciona {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .mnt-arvo-como-funciona__inner {
    padding-left: 48px !important;
    padding-right: 48px !important;
    box-sizing: border-box !important;
    max-width: 100%;
  }
  .mnt-arvo-steps {
    flex-direction: column;
    gap: 40px;
  }
  .mnt-arvo-steps::before {
    display: none;
  }
  .mnt-arvo-corrente-segment,
  .mnt-arvo-corrente-finale {
    display: none;
  }
  .mnt-arvo-step {
    flex: 0 0 100%;
    min-width: 0;
    padding-right: 0;
  }
}

/* Mobile (≤ 767px): vertical list. Sem linha vertical animada — só o
   trilho pontilhado estático (::before, guia neutro) e círculo/ring/
   dígito/texto (regras universais acima) revelando em cascata de cima
   pra baixo: "círculo ativa -> conteúdo revela -> próximo círculo",
   exatamente a simplificação sugerida pra mobile. Zero overflow
   horizontal: nada aqui introduz largura além do container existente. */
@media (max-width: 767px) {
  .mnt-arvo-como-funciona {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .mnt-arvo-como-funciona__inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .mnt-arvo-como-funciona .mnt-arvo-eyebrow {
    margin-bottom: 16px;
  }
  .mnt-arvo-como-funciona__headline {
    font-size: clamp(30px, 8.5vw, 40px) !important;
    line-height: 1.15 !important;
    margin-bottom: 4px !important;
  }
  .mnt-arvo-como-funciona__lead {
    margin-top: 12px !important;
  }
  .mnt-arvo-steps {
    flex-direction: column;
    gap: 0;
    margin-top: 40px;
  }
  .mnt-arvo-steps::before {
    /* vertical connector line — régua técnica também no mobile, só que
       com as marcas na direção vertical (0deg em vez de 90deg). Estática
       (guia neutra) — a energia nesta largura é só o círculo/ring/texto. */
    top: 26px;
    left: 23px; /* 25px (centro do trilho de 1px) - metade dos 6px de largura */
    right: auto;
    width: 6px;
    height: calc(100% - 52px);
    background: repeating-linear-gradient(0deg, var(--wp--custom--color--border-subtle) 0, var(--wp--custom--color--border-subtle) 1px, transparent 1px, transparent 12px);
  }
  .mnt-arvo-corrente-segment,
  .mnt-arvo-corrente-finale {
    display: none;
  }
  .mnt-arvo-step {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    padding-right: 0;
    padding-bottom: 48px;
    min-width: 0;
  }
  .mnt-arvo-step:last-child {
    padding-bottom: 0;
  }
  .mnt-arvo-step__number {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .mnt-arvo-step__content {
    padding-top: 8px;
    min-width: 0;
    overflow-wrap: break-word;
  }
}

/* Hero — mobile (≤ 767px) */
@media (max-width: 767px) {
  .mnt-arvo-hero { min-height: 65vh !important; }
  .mnt-arvo-hero__headline { font-size: clamp(40px, 10vw, 56px) !important; }
  .mnt-arvo-hero::after {
    background: linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.72) 50%);
  }
  .mnt-arvo-hero__ctas.wp-block-buttons { flex-direction: column !important; }
  .mnt-arvo-hero__ctas .wp-block-button { width: 100%; }
  .mnt-arvo-hero__ctas .wp-block-button .wp-block-button__link { width: 100%; text-align: center; box-sizing: border-box; }
  .mnt-arvo-hero__cta-secondary .wp-block-button__link {
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* === MODELOS DE NEGÓCIO === */
/* Fundo trocado de surface-raised-provisional (#141414, quase idêntico ao
   preto das seções vizinhas) para surface-metal (#333831) — grafite
   metálico de luminosidade intermediária, o "respiro" pedido na Rodada
   3.1 entre duas superfícies mais escuras. Contraste de texto verificado
   (branco 10.6:1, muted 6.6:1, verde mesmo sobre a superfície do card
   4.9:1 — todos ≥4.5:1 AA). */
.mnt-arvo-modelos {
  /* Base ~25% mais escura que o token surface-metal (#333831) — só usado
     nesta seção (confirmado, não é alterado no theme.json/outras seções).
     surface-metal sozinho lia como um bloco claro isolado entre Como
     Funciona (#0A0A0A) e Benefícios (#161A18); #262B24 preserva o mesmo
     matiz esverdeado-metálico, só com luminosidade mais próxima das
     seções vizinhas. Luz direcional muito sutil (canto superior esquerdo)
     por cima — reforça profundidade sem glass/blur, só gradiente. Camadas
     de esmaecimento no topo e na base suavizam a entrada vinda de Como
     Funciona e a saída para Benefícios. */
  background:
    linear-gradient(to bottom, rgba(10,10,10,0.3) 0%, transparent 140px),
    linear-gradient(to top, rgba(10,10,10,0.28) 0%, transparent 120px),
    radial-gradient(70% 50% at 15% 0%, rgba(255,255,255,0.035), transparent 60%),
    #262B24;
  padding-top: 80px;
  padding-bottom: 80px;
  position: relative;
}
/* Costura estrutural marcando a transição vinda de Como Funciona — linha
   técnica de 1px, não um corte seco de background-color. */
.mnt-arvo-modelos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.14) 20%, rgba(255,255,255,0.14) 80%, transparent);
  pointer-events: none;
}
.mnt-arvo-modelos__inner {
  padding-left: clamp(40px, 5vw, 80px) !important;
  padding-right: clamp(40px, 5vw, 80px) !important;
  box-sizing: border-box !important;
}
/* Kicker (era o H2 antigo, "Duas formas de ter um eletroposto com a ARVO
   EV.") — rebaixado a linha de contexto acima da headline nova. Ligado ao
   eyebrow (que já tem margin-bottom:20px) e colado à headline abaixo
   (margin-top pequeno) — a dupla eyebrow+kicker funciona como uma unidade
   só, headline é o elemento dominante que vem em seguida. */
.mnt-arvo-modelos__kicker {
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 600;
  line-height: 1.5;
  max-width: 480px;
  color: var(--wp--preset--color--on-surface-muted) !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}
/* Headline nova — escala própria (maior que o H2 compartilhado do resto
   do site: clamp(32,5vw,60) -> clamp(36,5vw,64)), letter-spacing mais
   fechado (-0.01 -> -0.02em) e line-height 1.08 (não 1.0, porque agora
   são 2 linhas de verdade via <br>, não uma sentença que quebra sozinha)
   — diferenciação por proporção/tracking com a mesma Montserrat 900 já
   carregada, sem depender de fonte display nova. */
.mnt-arvo-modelos__headline {
  /* 960px, não 640px: a quebra em duas linhas agora é o <br> explícito no
     HTML, não o wrap por largura — o container só precisa ser largo o
     bastante pra "A ARVO EV está com você." (a linha mais longa) caber
     inteira numa linha só no desktop, senão o <br> intencional vira um
     terceiro wrap acidental. */
  max-width: 960px;
  /* 10px -> 18px: sob o salto de peso pro H2 900/64px, o espaço mais
     apertado do resto do site (12px) lia como cramped/colado no kicker. */
  margin-top: 18px !important;
  margin-bottom: 0 !important;
  font-size: clamp(36px, 5vw, 64px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance;
  color: var(--wp--preset--color--on-surface) !important;
}
.mnt-arvo-modelos__headline-accent {
  color: var(--wp--preset--color--brand-provisional);
}
@media (max-width: 767px) {
  .mnt-arvo-modelos__headline {
    font-size: clamp(30px, 8.5vw, 40px) !important;
    line-height: 1.12 !important;
  }
}

/* === ORIGEM + BIFURCAÇÃO (Rodada 3.2) ===
   O min-height:210px original reservava espaço para o recorte do
   equipamento (IMG-M, removida numa rodada posterior) — sem ele, Trilha
   (40px) e bifurcação (48px) são os únicos filhos, ambos em fluxo normal
   (não absolute), então o bloco já se dimensiona sozinho pela altura real
   do conteúdo (~88px). margin-bottom pequeno no lugar do min-height: só
   o respiro necessário pra bifurcação não colidir com os cards, sem
   reabrir os ~122px de vazio que sobravam antes. */
.mnt-arvo-modelos__origin {
  position: relative;
  margin-top: 8px;
  margin-bottom: 16px;
}
/* A Trilha "padrão" (Como Funciona) é alinhada à esquerda, porque desce
   até o primeiro círculo da fileira. Em Modelos ela precisa ficar
   centralizada, porque é o tronco de onde a bifurcação nasce. */
.mnt-arvo-modelos .mnt-arvo-trail::before,
.mnt-arvo-modelos .mnt-arvo-trail::after {
  left: 50%;
  transform: translateX(-50%);
}
.mnt-arvo-modelos__origin .mnt-arvo-trail {
  margin: 0 auto;
}
.mnt-arvo-modelos__paths + .mnt-arvo-trail {
  /* height reduzida (40->24px) só nesta instância — aperta a distância
     até o fechamento/CTA sem tocar no componente-base .mnt-arvo-trail
     usado em outras seções. */
  height: 24px;
  margin: 8px auto 0;
}
/* Bifurcação — dois segmentos curtos e fixos (não dependem da largura do
   viewport, por isso não têm o risco de desalinhamento que uma linha
   diagonal "de ponta a ponta" teria numa seção fluida). Sugerem "um ponto
   de origem, dois caminhos" sem tentar apontar com precisão cirúrgica
   para o centro de cada card. */
.mnt-arvo-modelos__fork {
  position: relative;
  height: 48px;
}
.mnt-arvo-modelos__fork-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.5px;
  height: 48px;
  background: linear-gradient(to bottom, var(--wp--preset--color--brand-provisional), transparent);
  transform-origin: top center;
}
.mnt-arvo-modelos__fork-line--l { transform: translateX(-50%) rotate(-24deg); }
.mnt-arvo-modelos__fork-line--r { transform: translateX(-50%) rotate(24deg); }
.mnt-arvo-modelos__fork-node {
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: var(--wp--preset--color--brand-provisional);
  box-shadow: 0 0 8px rgba(34,204,34,0.6);
}

/* === FLUXO DE ENERGIA — Trilha/bifurcação vivas (só desktop, ≥1024px) ===
   Narrativa única ao entrar na viewport (mesmo gatilho .is-visible que já
   revela eyebrow/headline/lead — nenhum observer novo): a linha da Trilha
   preenche de cima pra baixo, "chega" ao nó (pulso breve), e só então os
   dois ramos da bifurcação se abrem a partir do nó — reforça literalmente
   "um ponto de origem, dois caminhos". Depois do pulso, o nó ganha uma
   respiração de brilho muito lenta e contínua (mesma ideia do indicador
   de scroll do Hero) só pra não ficar "morto" depois da entrada — sem
   loop na linha nem na bifurcação, só no nó, e com alcance de box-shadow
   propositalmente pequeno (8px->12px) pra não virar glow chamativo.
   Reaproveita as keyframes de preenchimento já existentes (Como Funciona)
   onde dá — só a bifurcação precisa de keyframes próprias, porque combina
   rotate() fixo com o scaleY() do preenchimento. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .has-js .mnt-arvo-modelos__origin .mnt-arvo-trail::before {
    transform-origin: top;
    transform: scaleY(0);
  }
  .has-js .mnt-arvo-modelos.is-visible .mnt-arvo-modelos__origin .mnt-arvo-trail::before {
    animation: mnt-arvo-corrente-fill-y 700ms var(--wp--custom--easing--out) 150ms forwards;
  }

  .has-js .mnt-arvo-modelos__fork-line--l { transform: translateX(-50%) rotate(-24deg) scaleY(0); }
  .has-js .mnt-arvo-modelos__fork-line--r { transform: translateX(-50%) rotate(24deg) scaleY(0); }
  .has-js .mnt-arvo-modelos.is-visible .mnt-arvo-modelos__fork-line--l {
    animation: mnt-arvo-fork-fill-l 450ms var(--wp--custom--easing--out) 900ms forwards;
  }
  .has-js .mnt-arvo-modelos.is-visible .mnt-arvo-modelos__fork-line--r {
    animation: mnt-arvo-fork-fill-r 450ms var(--wp--custom--easing--out) 900ms forwards;
  }

  .has-js .mnt-arvo-modelos.is-visible .mnt-arvo-modelos__fork-node {
    animation:
      mnt-arvo-fork-node-pulse 400ms ease-out 680ms,
      mnt-arvo-fork-node-breathe 3200ms ease-in-out 1100ms infinite;
  }
}
@keyframes mnt-arvo-fork-fill-l {
  0%   { transform: translateX(-50%) rotate(-24deg) scaleY(0); }
  100% { transform: translateX(-50%) rotate(-24deg) scaleY(1); }
}
@keyframes mnt-arvo-fork-fill-r {
  0%   { transform: translateX(-50%) rotate(24deg) scaleY(0); }
  100% { transform: translateX(-50%) rotate(24deg) scaleY(1); }
}
@keyframes mnt-arvo-fork-node-pulse {
  0%   { transform: translateX(-50%) scale(1);   box-shadow: 0 0 8px rgba(34,204,34,0.6); }
  45%  { transform: translateX(-50%) scale(1.4); box-shadow: 0 0 16px 3px rgba(34,204,34,0.7); }
  100% { transform: translateX(-50%) scale(1);   box-shadow: 0 0 8px rgba(34,204,34,0.6); }
}
@keyframes mnt-arvo-fork-node-breathe {
  0%, 100% { box-shadow: 0 0 8px rgba(34,204,34,0.55); }
  50%      { box-shadow: 0 0 12px rgba(34,204,34,0.7); }
}

/* Os dois caminhos — grid (não mais flex) com colunas levemente
   assimétricas (1.08/0.92) e o Caminho 02 deslocado pra baixo via
   margin-top (não transform, pra nunca competir com o transform do hover
   nem com o do reveal). align-self:start substitui o stretch implícito
   do flex anterior: cada card passa a ter a altura real do seu próprio
   conteúdo (Modelo 01 tem 5 itens, Modelo 02 tem 4), quebrando a leitura
   de "duas caixas gêmeas" sem sugerir hierarquia de qualidade — a
   diferença é de posição/lógica, não de tamanho ou peso visual. */
.mnt-arvo-modelos__paths {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 32px;
  align-items: start;
}
.mnt-arvo-modelo-card--02 {
  margin-top: 32px;
}

/* Card base — inset highlight no topo simula luz vindo de cima (não é
   elevação/drop-shadow, então não conflita com a Hover-Only Elevation
   Rule do DESIGN.md; é bisel de superfície, mesma categoria da borda). */
.mnt-arvo-modelo-card {
  position: relative;
  overflow: hidden; /* contém o sweep metálico do ::after nas bordas arredondadas */
  min-width: 0;
  box-sizing: border-box;
  /* Levemente mais presentes (0.04->0.05, 0.13->0.15) — o fundo da seção
     ficou mais escuro, os cards precisam da mesma separação relativa que
     tinham antes contra o surface-metal mais claro. */
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition:
    border-color 200ms var(--wp--custom--easing--out),
    transform 200ms var(--wp--custom--easing--out),
    box-shadow 200ms var(--wp--custom--easing--out);
}
.mnt-arvo-modelo-card:hover {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.065);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    0 8px 32px rgba(0,0,0,0.4);
}

/* Superfície própria por card — recorte técnico no canto (duas barras
   formando um "L", como uma marca de corte de desenho técnico) + wash
   ambiente que diferencia os dois modelos sem depender só da borda verde.
   Sempre visível (não é hover), então fica atrás do conteúdo real via
   z-index explícito nos filhos abaixo. */
.mnt-arvo-modelo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Recorte em duas pontas opostas (topo-direita + base-esquerda) — convenção
   de marca de corte de prancha técnica/fotografia, reforça "painel
   emoldurado" em vez de "card arredondado genérico" (Rodada 3.1). */
.mnt-arvo-modelo-card--01::before {
  background:
    linear-gradient(rgba(255,255,255,0.16), rgba(255,255,255,0.16)) top 12px right 12px / 14px 1px no-repeat,
    linear-gradient(rgba(255,255,255,0.16), rgba(255,255,255,0.16)) top 12px right 12px / 1px 14px no-repeat,
    linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12)) bottom 12px left 12px / 14px 1px no-repeat,
    linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12)) bottom 12px left 12px / 1px 14px no-repeat,
    linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.03) 100%);
}
.mnt-arvo-modelo-card--02::before {
  background:
    linear-gradient(rgba(34,204,34,0.4), rgba(34,204,34,0.4)) top 12px right 12px / 14px 1px no-repeat,
    linear-gradient(rgba(34,204,34,0.4), rgba(34,204,34,0.4)) top 12px right 12px / 1px 14px no-repeat,
    linear-gradient(rgba(34,204,34,0.3), rgba(34,204,34,0.3)) bottom 12px left 12px / 14px 1px no-repeat,
    linear-gradient(rgba(34,204,34,0.3), rgba(34,204,34,0.3)) bottom 12px left 12px / 1px 14px no-repeat,
    radial-gradient(120% 80% at 100% 0%, rgba(34,204,34,0.06), transparent 60%);
}
.mnt-arvo-modelo-card__title,
.mnt-arvo-modelo-card__list,
.mnt-arvo-modelo-card__ideal {
  position: relative;
  z-index: 1;
}
/* Etiqueta "Modelo 01/02" — selo com moldura própria + tick horizontal
   (linguagem de "terminal de trilho", não eyebrow de card comum). Única
   regra para este seletor (Rodada 3.2 consolida o que estava duplicado
   entre esta declaração e uma versão antiga de tipografia mais abaixo). */
.mnt-arvo-modelo-card__number {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 6px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 2px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-provisional);
  line-height: 1;
  transition:
    border-color 200ms var(--wp--custom--easing--out),
    background-color 200ms var(--wp--custom--easing--out);
}
.mnt-arvo-modelo-card__number::before {
  content: "";
  width: 8px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
.mnt-arvo-modelo-card--02 .mnt-arvo-modelo-card__number {
  border-color: rgba(34,204,34,0.5);
}
/* Etiqueta ganha destaque no hover do card — reforça qual caminho está
   sob o cursor sem precisar de um segundo elemento novo. */
.mnt-arvo-modelo-card:hover .mnt-arvo-modelo-card__number {
  border-color: var(--wp--preset--color--brand-provisional);
  background: rgba(34,204,34,0.1);
}

/* Spotlight que segue o cursor — resposta sofisticada ao hover pedida na
   Rodada 3. Só existe visualmente em dispositivos com hover real (mouse/
   trackpad) e com prefers-reduced-motion:no-preference; em touch/mobile
   fica sempre em opacity:0 e main.js nem liga o listener de mousemove. */
.mnt-arvo-modelo-card__spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(240px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255,255,255,0.10), transparent 70%);
}
.mnt-arvo-modelo-card--02 .mnt-arvo-modelo-card__spotlight {
  background: radial-gradient(240px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(34,204,34,0.16), transparent 70%);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .mnt-arvo-modelo-card__spotlight {
    transition: opacity 200ms var(--wp--custom--easing--out);
  }
  .mnt-arvo-modelo-card:hover .mnt-arvo-modelo-card__spotlight {
    opacity: 1;
  }

  /* Relação entre os dois modelos — ao passar o mouse num, o outro perde
     um pouco de presença (não desaparece) pra deixar a escolha visualmente
     clara. :has() generaliza pro par inteiro sem precisar de regra --01/--02
     separada; :not(:hover) garante que o próprio card sob o cursor nunca
     seja afetado por esta regra. */
  .mnt-arvo-modelo-card {
    transition: opacity 250ms var(--wp--custom--easing--out);
  }
  .mnt-arvo-modelos__paths:has(.mnt-arvo-modelo-card:hover) .mnt-arvo-modelo-card:not(:hover) {
    opacity: 0.75;
  }
}

/* Sweep metálico — reflexo diagonal muito sutil que atravessa o card uma
   única vez ao hover (não em loop). "transition: none" no repouso garante
   que ele volte à posição inicial sem animação reversa perceptível quando
   o mouse sai — só dispara de novo no próximo hover. Restrito a
   dispositivos com hover real (mouse/trackpad), para não depender de touch. */
.mnt-arvo-modelo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.13) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: none;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .mnt-arvo-modelo-card:hover::after {
    transform: translateX(120%);
    transition: transform 600ms var(--wp--custom--easing--out);
  }
}

/* Card 02 — borda verde sinaliza o caminho preferido. Coluna já mais
   estreita que o Card 01 via grid-template-columns (1.08fr/0.92fr) — a
   ênfase deste card vem da borda/selo verde + deslocamento vertical, não
   precisa também ser o mais largo. */
.mnt-arvo-modelo-card--02 {
  border: 1.5px solid var(--wp--preset--color--brand-provisional);
}
.mnt-arvo-modelo-card--02:hover {
  border-color: var(--wp--preset--color--brand-hover-provisional);
  background: rgba(34,204,34,0.05);
  box-shadow: 0 0 14px rgba(34,204,34,0.35);
}
@keyframes mnt-arvo-metal-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,204,34,0); }
  40%  { box-shadow: 0 0 24px 4px rgba(34,204,34,0.5); }
  100% { box-shadow: 0 0 14px 0 rgba(34,204,34,0.35); }
}
@media (prefers-reduced-motion: no-preference) {
  /* Especificidade (0,3,1) — supera de propósito a regra de reveal
     ".has-js .mnt-arvo-modelo-card.is-visible { transform: none; }"
     (0,3,0), que senão sempre vence e cancela o translateY do hover assim
     que o card entra no viewport (ou seja, sempre, na prática).
     -7px -> -3px na Rodada 3.2: motion de Modelos deve ser "realce de
     superfície", não card pulando/inclinando. */
  html.has-js .mnt-arvo-modelo-card:hover {
    transform: translateY(-3px);
  }
  .mnt-arvo-modelo-card--02:hover {
    animation: mnt-arvo-metal-pulse 550ms var(--wp--custom--easing--out);
  }
}

/* Título do card — margin-top abre espaço para a etiqueta "Modelo 01/02"
   que agora é posicionada em absolute (selo de canto, não mais 1ª linha
   do fluxo de texto). */
.mnt-arvo-modelo-card__title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--wp--preset--color--on-surface) !important;
  margin: 24px 0 24px 0;
}

/* Lista de itens */
.mnt-arvo-modelo-card__list {
  list-style: none;
  margin: 0 0 auto 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.mnt-arvo-modelo-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--wp--preset--color--on-surface-muted);
}
/* Stagger leve dos itens ao hover — amplitude pequena (2px), sensação de
   precisão mecânica, não de balanço decorativo. Só em dispositivos com
   hover real; a lista sempre volta ao lugar ao sair o mouse (transition
   incondicional cobre os dois sentidos). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .mnt-arvo-modelo-card__list li {
    transition: transform 200ms var(--wp--custom--easing--out);
  }
  .mnt-arvo-modelo-card:hover .mnt-arvo-modelo-card__list li:nth-child(1) { transition-delay: 0ms;  transform: translateX(4px); }
  .mnt-arvo-modelo-card:hover .mnt-arvo-modelo-card__list li:nth-child(2) { transition-delay: 30ms; transform: translateX(4px); }
  .mnt-arvo-modelo-card:hover .mnt-arvo-modelo-card__list li:nth-child(3) { transition-delay: 60ms; transform: translateX(4px); }
  .mnt-arvo-modelo-card:hover .mnt-arvo-modelo-card__list li:nth-child(4) { transition-delay: 90ms; transform: translateX(4px); }
  .mnt-arvo-modelo-card:hover .mnt-arvo-modelo-card__list li:nth-child(5) { transition-delay: 120ms; transform: translateX(4px); }
}
.mnt-arvo-modelo-card__list li svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--wp--preset--color--brand-provisional);
}

/* "Ideal para" — rodapé do card */
.mnt-arvo-modelo-card__ideal {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--wp--preset--color--on-surface-muted);
  margin: 20px 0 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  transition:
    border-top-color 200ms var(--wp--custom--easing--out),
    color 200ms var(--wp--custom--easing--out);
}
.mnt-arvo-modelo-card:hover .mnt-arvo-modelo-card__ideal {
  border-top-color: rgba(34,204,34,0.3);
  color: var(--wp--preset--color--on-surface);
}
.mnt-arvo-modelo-card__ideal strong {
  color: var(--wp--preset--color--brand-provisional);
  font-weight: 600;
}

/* Linha de fechamento (Rodada 3.1) — a Rodada 3 tratava isto como mais uma
   caixa com fundo/borda própria abaixo dos cards; agora não tem superfície
   própria nenhuma, só o texto + CTA soltos sobre o fundo da seção,
   conectados aos cards por uma Trilha (mesmo elemento de Como Funciona)
   logo acima. É essa conexão visual — não uma moldura — que faz o CTA
   parecer parte da composição em vez de um bloco solto embaixo. */
.mnt-arvo-modelos__closing {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.mnt-arvo-modelos__closing-text {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.65;
  color: var(--wp--preset--color--on-surface-muted);
  max-width: 680px;
  margin: 0;
}

/* CTA */
.mnt-arvo-modelos__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--wp--preset--color--brand-provisional);
  color: #000000;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 4px;
  transition: background-color var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
  white-space: nowrap;
}
.mnt-arvo-modelos__cta:hover {
  background-color: var(--wp--preset--color--brand-hover-provisional);
  box-shadow: 0 0 12px rgba(34,204,34,0.3);
  color: #000000;
  text-decoration: none;
}
.mnt-arvo-modelos__cta:active {
  background-color: var(--wp--preset--color--brand-pressed-provisional);
}
.mnt-arvo-modelos__cta:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Reveal animations */
@media (prefers-reduced-motion: no-preference) {
  .has-js .mnt-arvo-modelos .mnt-arvo-eyebrow,
  .has-js .mnt-arvo-modelos .mnt-arvo-modelos__kicker,
  .has-js .mnt-arvo-modelos .mnt-arvo-modelos__headline {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--wp--custom--duration--medium) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--medium) var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-modelos.is-visible .mnt-arvo-eyebrow          { opacity: 1; transform: none; transition-delay: 0ms; }
  .has-js .mnt-arvo-modelos.is-visible .mnt-arvo-modelos__kicker   { opacity: 1; transform: none; transition-delay: 100ms; }
  .has-js .mnt-arvo-modelos.is-visible .mnt-arvo-modelos__headline { opacity: 1; transform: none; transition-delay: 200ms; }

  .has-js .mnt-arvo-modelo-card {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--wp--custom--duration--medium) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--medium) var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-modelo-card.is-visible {
    opacity: 1;
    transform: none;
  }

  .has-js .mnt-arvo-modelos__closing {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--wp--custom--duration--medium) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--medium) var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-modelos__closing.is-visible {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .has-js .mnt-arvo-modelo-card,
  .has-js .mnt-arvo-modelos__closing {
    transition-duration: 250ms;
  }
}

/* Tablet (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .mnt-arvo-modelos {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .mnt-arvo-modelos__inner {
    padding-left: 48px !important;
    padding-right: 48px !important;
    box-sizing: border-box !important;
    max-width: 100%;
  }
  /* <1024px: sem bifurcação nem recorte de equipamento (só a Trilha) —
     "no tablet/mobile, degradar para fluxo vertical simples", inclusive
     visualmente antes dos cards. */
  .mnt-arvo-modelos__origin {
    min-height: 0;
  }
  .mnt-arvo-modelos__fork {
    display: none;
  }
  .mnt-arvo-modelos__paths {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px;
  }
  .mnt-arvo-modelo-card--02 {
    margin-top: 0;
  }
  .mnt-arvo-modelo-card {
    width: 100%;
    max-width: 100%;
  }
  .mnt-arvo-modelos__closing {
    margin-top: 24px;
    gap: 24px;
  }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  .mnt-arvo-modelos {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .mnt-arvo-modelos__inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .mnt-arvo-modelos__origin {
    min-height: 0;
  }
  .mnt-arvo-modelos__fork {
    display: none;
  }
  .mnt-arvo-modelos__paths {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 24px;
  }
  /* Modelo 02 primeiro no mobile — gancho mais forte */
  .mnt-arvo-modelo-card--02 {
    order: -1;
    margin-top: 0;
  }
  .mnt-arvo-modelo-card {
    width: 100%;
    box-sizing: border-box;
    padding: 24px;
  }
  .mnt-arvo-modelo-card__list {
    gap: 18px;
  }
  .mnt-arvo-modelo-card__list li {
    line-height: 1.7;
  }
  .mnt-arvo-modelos__closing {
    margin-top: 24px;
    gap: 24px;
  }
  .mnt-arvo-modelos__cta {
    width: 100%;
    box-sizing: border-box;
  }
}

/* === BENEFÍCIOS PARA ESTABELECIMENTOS === */
.mnt-arvo-beneficios {
  background-color: var(--wp--preset--color--wet-graphite);
  padding-top: 80px;
  padding-bottom: 80px;
  position: relative;
}
/* Costura estrutural marcando a transição vinda de Modelos — tom verde
   (diferente da costura branca de Modelos), variando o ritmo entre as
   3 seções em vez de repetir o mesmo tratamento nas duas junções. */
.mnt-arvo-beneficios::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(34,204,34,0.22) 50%, transparent);
  pointer-events: none;
}
.mnt-arvo-beneficios__inner {
  padding-left: clamp(40px, 5vw, 80px) !important;
  padding-right: clamp(40px, 5vw, 80px) !important;
  box-sizing: border-box !important;
}
.mnt-arvo-beneficios__headline {
  /* max-width calibrado (não um valor arbitrário de "largura de texto"
     comum no resto do site): testado no navegador para que as duas frases
     ("Mais valor para o seu espaço." / "Mais conveniência para o seu
     cliente.") quebrem exatamente uma por linha em ~1536px de viewport,
     entregando as "2 linhas" pedidas nesta rodada. Em viewports menores
     (tablet/mobile) a quebra natural pode render 3 linhas — mesmo
     comportamento de wrap orgânico já aceito em todo o resto do site,
     nenhum <br> forçado foi usado. */
  max-width: 1150px;
  /* margin-left/right explícitos: o comentário original deste bloco (ver
     abaixo, no __lead) assumia que 1150px "quase preenche o container" e
     tornava o auto-margin do WP Core invisível aqui — medido ao vivo
     nesta rodada em 1920px de viewport (container wide de até 1440px): a
     headline nascia 65px à direita do próprio __lead logo abaixo,
     perceptível, não invisível. Mesma correção já aplicada ao __lead. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Correção local de bug: a regra global `h2 { font-size: var(--wp--preset--font-size--h2) }`
     referencia uma custom property sem hífen que o WordPress nunca gera
     (o preset "h2" do theme.json vira --wp--preset--font-size--h-2, com
     hífen entre letra e dígito — mesmo bug já documentado e corrigido em
     Credibilidade/Soluções de Recarga nesta sessão). Sem este override, o
     h2 desta seção cai silenciosamente para os 16px herdados do body — o
     oposto de "headline forte" pedido nesta rodada. Corrigido só aqui,
     por instrução explícita de não alterar outras seções; Como Funciona,
     Segmentos e Soluções de Recarga têm o mesmo bug pendente. */
  font-size: var(--wp--preset--font-size--h-2);
  /* Sem line-height explícito, herdava 1.0 do H2 global (theme.json) —
     correto pra título de 1 linha, ruim aqui: esta headline é desenhada
     pra quebrar em 2-3 linhas (ver comentário do max-width acima) e a
     1.0 deixava as linhas praticamente coladas em peso 900. */
  line-height: 1.1;
  text-wrap: balance;
  margin-top: 12px !important;
  margin-bottom: 20px !important;
  color: var(--wp--preset--color--on-surface) !important;
}
.mnt-arvo-beneficios__headline-accent {
  color: var(--wp--preset--color--brand-provisional);
}
/* Reposicionamento pedido nesta rodada: antes um parágrafo solto,
   max-width sem relação com o headline muito mais largo (1150px, só
   calibrado pra quebra de 2 linhas do H2) — sem composição visual entre
   os dois. Recuo com barra de acento verde à esquerda (mesma linguagem
   já usada no bloco de citação de Credibilidade: "borda-esquerda fina
   verde") transforma o lead numa declaração de apoio com peso editorial
   próprio, não um resto de texto abaixo do título. Só CSS — bloco
   Gutenberg do headline/lead não foi tocado (preserva Site Editor). */
.mnt-arvo-beneficios__lead {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.6;
  color: var(--wp--preset--color--on-surface-muted);
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  /* margin-left/right explícitos: o WordPress Core injeta auto-margin em
     blocos filhos de um grupo com layout "constrained" (.mnt-arvo-beneficios__inner)
     para centralizá-los — invisível na headline (max-width quase preenche
     o container), mas centralizava visivelmente este parágrafo, bem mais
     estreito, fazendo-o "flutuar" solto no meio da seção em vez de
     encostar no mesmo eixo esquerdo da headline. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 580px;
  padding-left: 18px;
  /* 2px -> 3px: contra um H2 900 de até 60px, o traço fino ficava leve
     demais pra ler como acento intencional em vez de resto de régua. */
  border-left: 3px solid var(--wp--preset--color--brand-provisional);
}

/* Grid de benefícios — bento moderado: 1 card em destaque (2x2) + 5
   regulares, em vez do grid uniforme de 6 caixas idênticas. Áreas nomeadas
   (não auto-placement "dense") para não depender de packing frágil.
   grid-template-rows explícito (Rodada 3.1) evita que as linhas 1-2 se
   ajustem só pela metade da altura do destaque, o que deixava b2/b3
   desproporcionais em relação a b4/b5/b6. */
.mnt-arvo-beneficios__grid {
  list-style: none;
  /* 48px -> 60px: o lead com acento à esquerda pede mais respiro antes do
     próximo bloco visual do que um parágrafo solto pediria. */
  margin: 60px 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, minmax(148px, auto));
  grid-template-areas:
    "feat feat b2"
    "feat feat b3"
    "b4   b5   b6";
  gap: 24px;
}
.mnt-arvo-beneficio-card:nth-child(2) { grid-area: b2; }
.mnt-arvo-beneficio-card:nth-child(3) { grid-area: b3; }
.mnt-arvo-beneficio-card:nth-child(4) { grid-area: b4; }
.mnt-arvo-beneficio-card:nth-child(5) { grid-area: b5; }
.mnt-arvo-beneficio-card:nth-child(6) { grid-area: b6; }
.mnt-arvo-beneficio-card--featured { grid-area: feat; }

/* Cards — borda visível só em hover/destaque (Rodada 3.1: a Rodada 3
   dava border a TODOS os 6 cards mais o closing, ficava "excesso de
   bordas"; a separação do card contra o fundo da seção já vem da própria
   cor de fundo — wet-graphite-card sobre wet-graphite —, a borda vira
   reforço só quando há interação ou destaque). */
.mnt-arvo-beneficio-card {
  background: var(--wp--preset--color--wet-graphite-card);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    border-color 200ms var(--wp--custom--easing--out),
    background-color 200ms var(--wp--custom--easing--out),
    box-shadow 200ms var(--wp--custom--easing--out),
    transform 200ms var(--wp--custom--easing--out);
}
.mnt-arvo-beneficio-card:hover {
  border-color: rgba(34,204,34,0.35);
  background: var(--wp--preset--color--wet-graphite-card-hover);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
@media (prefers-reduced-motion: no-preference) {
  /* Especificidade elevada de propósito: a regra de reveal
     `.has-js .mnt-arvo-beneficio-card.is-visible { transform:none }`
     (3 classes) teria precedência sobre um simples `:hover` (classe +
     pseudo-classe) e cancelaria silenciosamente a elevação no hover
     depois que o card já revelou — daí `.is-visible:hover` aqui, não
     só `:hover`. */
  .has-js .mnt-arvo-beneficio-card--featured.is-visible:hover {
    transform: translateY(-4px);
  }
  .has-js .mnt-arvo-beneficio-card:not(.mnt-arvo-beneficio-card--featured).is-visible:hover {
    transform: translateY(-2px);
  }
}
/* Card em destaque — maior presença sem inventar um segundo formato: só
   escala o mesmo card (ícone/título/corpo maiores, respiro vertical),
   mantendo os outros 5 exatamente como já eram. Único card com borda
   visível em repouso — é o "âncora" do grid, os outros 5 não precisam.
   Barra verde no topo (não borda lateral — evita o "side-tab" já
   sinalizado pela auditoria de design) + ícone em chip verde sólido
   (ver .mnt-arvo-beneficio-card__icon abaixo) reforçam o contraste com
   os cards secundários, pedido explicitamente nesta rodada. */
.mnt-arvo-beneficio-card--featured {
  position: relative;
  padding: 44px;
  /* Era `center`: num card que ocupa 2 linhas do grid (bem mais alto que
     o conteúdo real de ícone+título+corpo), centralizar deixava o mesmo
     tanto de vazio em cima e embaixo — mas o olho lê o card de cima para
     baixo, então o vazio "embaixo" é o que incomoda. Ancorando no topo,
     todo o respiro sobra abaixo do texto, onde o watermark abaixo foi
     desenhado para viver (ver .mnt-arvo-beneficio-card--featured__watermark). */
  justify-content: flex-start;
  border-color: rgba(255,255,255,0.12);
  overflow: hidden;
}
.mnt-arvo-beneficio-card--featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--wp--preset--color--brand-provisional);
}
/* Watermark tipográfico — usa o vazio abaixo do texto (card 2x2 é bem
   mais alto que icone+título+corpo) como elemento de design em vez de
   deixar a área vazia, sem adicionar nenhuma informação nova: palavra
   conceitual pura, `aria-hidden`, nunca lida por leitor de tela. Cor em
   verde de marca a 7% de opacidade — mesma faixa de opacidade já usada
   no anel de fundo do ícone dos cards (.mnt-arvo-beneficio-card__icon::before,
   12%) e no wash do bloco de fechamento (7%), não um valor novo.
   `z-index:-1` mesma técnica já usada no anel do ícone: fica acima do
   fundo do card, atrás do ícone/título/corpo. Só desktop (≥1024px) — no
   tablet/mobile o card em destaque não ocupa 2 linhas (vira largura
   normal), não há vazio a preencher, então o elemento nem renderiza. */
.mnt-arvo-beneficio-card--featured__watermark {
  display: none;
}
@media (min-width: 1024px) {
  .mnt-arvo-beneficio-card--featured__watermark {
    display: block;
    position: absolute;
    right: -0.06em;
    bottom: -0.14em;
    z-index: -1;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(56px, 8vw, 104px);
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: rgba(34,204,34,0.07);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
  }
}
/* Entrada sutil — só some/aparece com JS + sem preferência por menos
   motion; sem JS ou sob prefers-reduced-motion o watermark já nasce no
   estado final (visível), porque ele é elemento de composição permanente,
   não um efeito transitório como o ponto da faixa de potência ou do
   trilho do Fechamento — a diferença importa: aqueles somem de propósito
   sob reduced-motion (são só o "efeito"), este preenche espaço o tempo
   todo e precisa continuar visível mesmo sem a animação de entrada. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .has-js .mnt-arvo-beneficio-card--featured__watermark {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 900ms var(--wp--custom--easing--out),
      transform 900ms var(--wp--custom--easing--out);
    transition-delay: 320ms;
  }
  .has-js .mnt-arvo-beneficio-card--featured.is-visible .mnt-arvo-beneficio-card--featured__watermark {
    opacity: 1;
    transform: none;
  }
}
.mnt-arvo-beneficio-card--featured .mnt-arvo-beneficio-card__icon,
.mnt-arvo-beneficio-card--featured .mnt-arvo-beneficio-card__icon svg {
  width: 48px;
  height: 48px;
}
.mnt-arvo-beneficio-card--featured .mnt-arvo-beneficio-card__title {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 900;
}
.mnt-arvo-beneficio-card--featured .mnt-arvo-beneficio-card__body {
  font-size: 16px;
  max-width: 380px;
}
.mnt-arvo-beneficio-card__icon {
  position: relative;
  color: var(--wp--preset--color--brand-provisional);
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  transition:
    color 200ms var(--wp--custom--easing--out),
    transform 200ms var(--wp--custom--easing--out);
}
/* Anel de fundo sutil atrás do ícone — mesma linguagem "instrumento
   técnico" do círculo numerado de Como Funciona, integrando o ícone à
   superfície do card em vez de deixá-lo solto sobre o título. */
.mnt-arvo-beneficio-card__icon::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: rgba(34,204,34,0.06);
  z-index: -1;
}
/* Chip do ícone em destaque — verde sólido + ícone preto, mesma receita
   já usada nos CTAs primários do site (fundo verde, texto/ícone preto) —
   reforça que este é o card âncora sem inventar um tratamento novo. */
.mnt-arvo-beneficio-card--featured .mnt-arvo-beneficio-card__icon {
  color: #000000;
}
.mnt-arvo-beneficio-card--featured .mnt-arvo-beneficio-card__icon::before {
  background: var(--wp--preset--color--brand-provisional);
}
@media (prefers-reduced-motion: no-preference) {
  .mnt-arvo-beneficio-card:hover .mnt-arvo-beneficio-card__icon {
    color: var(--wp--preset--color--brand-hover-provisional);
    transform: scale(1.08);
  }
  /* No destaque o chip do ícone é verde sólido (ver acima) — manter o
     ícone preto no hover também, ou ele "sumiria" (verde sobre verde). */
  .mnt-arvo-beneficio-card--featured:hover .mnt-arvo-beneficio-card__icon {
    color: #000000;
  }
}
.mnt-arvo-beneficio-card__icon svg {
  display: block;
}
.mnt-arvo-beneficio-card__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: var(--wp--custom--font-weight--bold);
  line-height: 1.3;
  color: var(--wp--preset--color--on-surface);
  margin: 0;
}
.mnt-arvo-beneficio-card__body {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #D0D4D2;
  margin: 0;
}

/* Faixa de fechamento — une o bloco institucional e o CTA num único bloco
   coeso (antes eram dois elementos soltos, um centralizado sobre o outro).
   No lugar da borda verde grossa do lado esquerdo (padrão reconhecível de
   UI genérica de IA, sinalizado pela auditoria), o acento agora é um
   traço curto no topo — a mesma linha de 2px do eyebrow/underline. */
.mnt-arvo-beneficios__closing {
  margin-top: 32px;
  padding: 40px;
  /* Wash radial verde muito sutil por trás do wet-graphite-info — mesma
     técnica já usada no fundo de Como Funciona (radial-gradient estático,
     sem pulso), aplicada aqui só para dar mais contraste/peso ao bloco de
     fechamento em relação aos cards secundários, conforme pedido. */
  background:
    radial-gradient(140% 100% at 100% 0%, rgba(34,204,34,0.07), transparent 60%),
    var(--wp--preset--color--wet-graphite-info);
  border: 1px solid rgba(34,204,34,0.22);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
}
/* Traço + nó — mesmo vocabulário da Trilha ARVO (linha + marcador
   quadrado), aqui na variante horizontal encostada no bloco em vez da
   vertical solta entre elementos. Reaproveita o sistema em vez de ser
   mais um tratamento decorativo à parte. */
.mnt-arvo-beneficios__closing::before {
  content: "";
  position: absolute;
  top: 0;
  left: 40px;
  width: 40px;
  height: 2px;
  background: var(--wp--preset--color--brand-provisional);
}
.mnt-arvo-beneficios__closing::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 37px;
  width: 6px;
  height: 6px;
  background: var(--wp--preset--color--brand-provisional);
  box-shadow: 0 0 8px rgba(34,204,34,0.6);
  pointer-events: none;
}
.mnt-arvo-beneficios__info {
  flex: 1 1 380px;
  min-width: 0;
}
.mnt-arvo-beneficios__info-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: var(--wp--custom--font-weight--bold);
  line-height: 1.3;
  color: var(--wp--preset--color--on-surface);
  margin: 0 0 12px 0;
}
.mnt-arvo-beneficios__info-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--wp--preset--color--on-surface-muted);
  margin: 0;
  max-width: 480px;
}

/* CTA */
.mnt-arvo-beneficios__cta-wrap {
  flex-shrink: 0;
}
.mnt-arvo-beneficios__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--wp--preset--color--brand-provisional);
  color: #000;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: var(--wp--custom--font-weight--bold);
  letter-spacing: var(--wp--custom--letter-spacing--button);
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 44px;
  border-radius: var(--wp--custom--radius--sm);
  transition:
    background-color var(--wp--custom--duration--micro) var(--wp--custom--easing--out),
    transform var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .mnt-arvo-beneficios__cta:hover {
    transform: translateY(-2px);
  }
}
.mnt-arvo-beneficios__cta:hover {
  background-color: var(--wp--preset--color--brand-hover-provisional);
  box-shadow: 0 0 12px rgba(34,204,34,0.3);
  text-decoration: none;
}
.mnt-arvo-beneficios__cta:active {
  background-color: var(--wp--preset--color--brand-pressed-provisional);
}
.mnt-arvo-beneficios__cta:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 4px;
}

/* Reveal animations */
@media (prefers-reduced-motion: no-preference) {
  .has-js .mnt-arvo-beneficios .mnt-arvo-eyebrow,
  .has-js .mnt-arvo-beneficios .mnt-arvo-beneficios__headline,
  .has-js .mnt-arvo-beneficios .mnt-arvo-beneficios__lead {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--wp--custom--duration--medium) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--medium) var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-beneficios.is-visible .mnt-arvo-eyebrow              { opacity: 1; transform: none; transition-delay: 0ms; }
  .has-js .mnt-arvo-beneficios.is-visible .mnt-arvo-beneficios__headline { opacity: 1; transform: none; transition-delay: 100ms; }
  .has-js .mnt-arvo-beneficios.is-visible .mnt-arvo-beneficios__lead     { opacity: 1; transform: none; transition-delay: 200ms; }

  .has-js .mnt-arvo-beneficio-card {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity var(--wp--custom--duration--medium) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--medium) var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-beneficio-card.is-visible {
    opacity: 1;
    transform: none;
  }
  /* Card em destaque entra com um leve scale-in além do translateY — a
     hierarquia visual do bento grid também aparece no motion, não só no
     tamanho estático. */
  .has-js .mnt-arvo-beneficio-card--featured {
    transform: translateY(20px) scale(0.97);
  }
  .has-js .mnt-arvo-beneficio-card--featured.is-visible {
    transform: none;
  }

  .has-js .mnt-arvo-beneficios__info {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 400ms var(--wp--custom--easing--out),
      transform 400ms var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-beneficios__info.is-visible {
    opacity: 1;
    transform: none;
  }

  .has-js .mnt-arvo-beneficios__cta-wrap {
    opacity: 0;
    transition: opacity 300ms var(--wp--custom--easing--out);
    transition-delay: 100ms;
  }
  .has-js .mnt-arvo-beneficios__cta-wrap.is-visible {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .has-js .mnt-arvo-beneficio-card {
    transition-duration: 250ms;
  }
}

/* Tablet (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .mnt-arvo-beneficios {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .mnt-arvo-beneficios__inner {
    padding-left: 48px !important;
    padding-right: 48px !important;
    box-sizing: border-box !important;
    max-width: 100%;
  }
  .mnt-arvo-beneficios__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "feat feat"
      "b2   b3"
      "b4   b5"
      "b6   b6";
    gap: 20px;
    margin-top: 48px;
  }
  .mnt-arvo-beneficio-card--featured {
    padding: 32px;
  }
  .mnt-arvo-beneficios__closing {
    padding: 32px;
  }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  .mnt-arvo-beneficios {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .mnt-arvo-beneficios__inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .mnt-arvo-beneficios__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "feat"
      "b2"
      "b3"
      "b4"
      "b5"
      "b6";
    gap: 16px;
    margin-top: 40px;
  }
  .mnt-arvo-beneficio-card {
    padding: 20px;
  }
  /* Mobile simplificado — card em destaque volta ao mesmo tamanho dos
     demais; a hierarquia de bento é um recurso de desktop/tablet, não
     algo que precise de uma composição própria em telas pequenas. */
  .mnt-arvo-beneficio-card--featured {
    padding: 24px;
    justify-content: flex-start;
  }
  .mnt-arvo-beneficio-card--featured .mnt-arvo-beneficio-card__icon,
  .mnt-arvo-beneficio-card--featured .mnt-arvo-beneficio-card__icon svg {
    width: 40px;
    height: 40px;
  }
  .mnt-arvo-beneficio-card--featured .mnt-arvo-beneficio-card__title {
    font-size: 16px;
  }
  .mnt-arvo-beneficio-card--featured .mnt-arvo-beneficio-card__body {
    font-size: 15px;
    max-width: none;
  }
  .mnt-arvo-beneficios__closing {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 32px;
    padding: 28px 20px;
    margin-top: 32px;
  }
  .mnt-arvo-beneficios__closing::before {
    left: 50%;
    transform: translateX(-50%);
  }
  .mnt-arvo-beneficios__closing::after {
    left: calc(50% - 23px);
  }
  .mnt-arvo-beneficios__info {
    flex: 0 1 auto;
  }
  .mnt-arvo-beneficios__info-title {
    margin-bottom: 24px;
  }
  .mnt-arvo-beneficios__info-text {
    max-width: none;
  }
  .mnt-arvo-beneficios__cta {
    width: 100%;
    box-sizing: border-box;
  }
  .mnt-arvo-beneficios__cta-wrap {
    width: 100%;
    min-width: 0;
  }
}

/* ===================================================================
   MOBILE (≤767px) — DESATIVAÇÃO DO SISTEMA DE REVEAL
   Conteúdo estrutural/textual não pode depender de IntersectionObserver
   ou requestAnimationFrame para ficar visível no mobile (capturas
   full-page e dispositivos reais podem fotografar o estado intermediário
   opacity:0 / transform:translateY(...) da transição de entrada).
   Desktop e tablet (>767px) preservam a animação original — este bloco
   só existe dentro de max-width:767px.
   =================================================================== */
/* === SEGMENTOS ATENDIDOS ===
   Fundo surface-base (void) — quebra a repetição de duas seções grafite
   seguidas (Benefícios, logo antes, já é wet-graphite) e volta ao tom
   mais escuro do sistema, mantendo a alternância de valor seção a seção. */
.mnt-arvo-segmentos {
  background-color: var(--wp--preset--color--surface-base);
  padding-top: 80px;
  padding-bottom: 80px;
}
.mnt-arvo-segmentos__inner {
  padding-left: clamp(40px, 5vw, 80px) !important;
  padding-right: clamp(40px, 5vw, 80px) !important;
  box-sizing: border-box !important;
}
.mnt-arvo-segmentos__headline {
  /* 720px -> 900px: headline nova é uma frase curta (7 palavras) desenhada
     pra caber em ~2 linhas; a largura acompanha a escala tipográfica
     própria abaixo, em vez do token h2 genérico usado antes. */
  max-width: 900px;
  /* margin-left/right explícitos: a headline nunca teve isso — o
     WordPress Core injeta auto-margin em blocos filhos de um grupo com
     layout "constrained" (.mnt-arvo-segmentos__inner, align "wide", até
     1440px em theme.json) pra centralizá-los. Como 900px é bem mais
     estreito que os até 1440px disponíveis no desktop, a headline ficava
     visivelmente empurrada pro centro — a causa raiz do "três eixos
     diferentes" (kicker à esquerda, headline centralizada, parágrafo à
     esquerda) apontado pelo cliente. Mesmo bug já corrigido no parágrafo
     abaixo numa rodada anterior; faltava aqui. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* 12px -> 10px e 16px -> 14px: ritmo vertical mais compacto pedido
     nesta rodada (kicker->headline e headline->parágrafo). */
  margin-top: 10px !important;
  margin-bottom: 14px !important;
  /* Escala própria (mesmo padrão já usado em Modelos/Fechamento/Energia
     Limpa: clamp + peso 900 + line-height/letter-spacing próprios), no
     lugar do token compartilhado --wp--preset--font-size--h-2 — a
     headline continua dominante mas sem o exagero do bloco de 3 linhas
     que a frase antiga, mais longa, produzia nesse tamanho. */
  font-size: clamp(36px, 4.6vw, 60px) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance;
  color: var(--wp--preset--color--on-surface) !important;
}
.mnt-arvo-segmentos__headline-accent {
  color: var(--wp--preset--color--brand-provisional);
}
.mnt-arvo-segmentos__lead {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.6;
  color: var(--wp--preset--color--on-surface-muted);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  /* margin-left/right explícitos: mesmo bug já corrigido em
     .mnt-arvo-beneficios__lead — o WordPress Core injeta auto-margin em
     blocos filhos de um grupo com layout "constrained"
     (.mnt-arvo-segmentos__inner) pra centralizá-los. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* 720px -> 800px: a headline agora é mais larga (900px) e mais curta em
     palavras — o parágrafo ganha um pouco mais de largura própria
     (faixa 720-820px pedida), continuando claramente mais estreito que a
     headline (hierarquia), não mais "empatado" com ela. */
  max-width: 800px;
}

/* Grid de tiles — achatado, só ícone + nome (sem título/corpo por item
   como o card de Benefícios), para não ler como "mais uma seção de
   cards". flex-wrap + justify-content:center centraliza a última linha
   incompleta automaticamente (4 colunas desktop = linha de 4 + linha de
   3 centralizada; ver breakpoints abaixo para tablet/mobile). */
.mnt-arvo-segmentos__grid {
  list-style: none;
  /* 40px -> 56px nesta rodada — mais respiro entre o parágrafo introdutório
     e os segmentos, para o conjunto ler como um grupo com peso próprio em
     vez de continuação direta do texto. */
  margin: 56px 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.mnt-arvo-segmento-tile {
  flex: 0 1 calc(25% - 12px);
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 12px;
  /* 24px 24px -> 26px 28px: área um pouco maior sem virar caixa grande. */
  padding: 26px 28px;
  box-sizing: border-box;
  background: rgba(255,255,255,0.035);
  /* 0.20 -> 0.24: mais contraste de borda em repouso. */
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 8px;
  transition:
    border-color 200ms var(--wp--custom--easing--out),
    background-color 200ms var(--wp--custom--easing--out);
}
/* Hover com acento verde discreto (cor de marca já usada em toda a página)
   no lugar do branco neutro anterior — reforça "local ativo/selecionável",
   não um botão de filtro genérico. */
.mnt-arvo-segmento-tile:hover {
  border-color: rgba(34,204,34,0.4);
  background: rgba(255,255,255,0.06);
}
.mnt-arvo-segmento-tile__icon {
  flex-shrink: 0;
  color: var(--wp--preset--color--brand-provisional);
}
.mnt-arvo-segmento-tile__icon svg {
  display: block;
}
.mnt-arvo-segmento-tile__name {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: var(--wp--custom--font-weight--bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--wp--preset--color--on-surface);
}

/* Reveal — um único fade para eyebrow/headline/lead/grid, sem stagger
   por tile (os 7 segmentos são igualmente relevantes ao mesmo tempo). */
@media (prefers-reduced-motion: no-preference) {
  .has-js .mnt-arvo-segmentos .mnt-arvo-eyebrow,
  .has-js .mnt-arvo-segmentos .mnt-arvo-segmentos__headline,
  .has-js .mnt-arvo-segmentos .mnt-arvo-segmentos__lead,
  .has-js .mnt-arvo-segmentos .mnt-arvo-segmentos__grid {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--wp--custom--duration--medium) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--medium) var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-segmentos.is-visible .mnt-arvo-eyebrow            { opacity: 1; transform: none; transition-delay: 0ms; }
  .has-js .mnt-arvo-segmentos.is-visible .mnt-arvo-segmentos__headline { opacity: 1; transform: none; transition-delay: 100ms; }
  .has-js .mnt-arvo-segmentos.is-visible .mnt-arvo-segmentos__lead    { opacity: 1; transform: none; transition-delay: 200ms; }
  .has-js .mnt-arvo-segmentos.is-visible .mnt-arvo-segmentos__grid    { opacity: 1; transform: none; transition-delay: 280ms; }
}

/* Tablet (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .mnt-arvo-segmentos__inner {
    padding-left: 48px !important;
    padding-right: 48px !important;
    box-sizing: border-box !important;
    max-width: 100%;
  }
  .mnt-arvo-segmento-tile {
    flex: 0 1 calc(33.333% - 11px);
  }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  .mnt-arvo-segmentos {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .mnt-arvo-segmentos__inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .mnt-arvo-segmentos__grid {
    margin-top: 36px;
    gap: 12px;
  }
  .mnt-arvo-segmento-tile {
    flex: 0 1 calc(50% - 6px);
    min-width: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 18px 10px;
  }
  .mnt-arvo-segmento-tile__name {
    font-size: 13px;
    line-height: 1.3;
    word-break: normal;
    overflow-wrap: normal;
    min-width: 0;
    width: 100%;
  }
}

/* Segurança extra-estreita (<375px) — mesma lógica do bloco mobile acima,
   reduz padding/font o suficiente pra dar folga confortável ao pior caso
   de largura (palavra "ESTACIONAMENTOS", 15 caracteres). */
@media (max-width: 374px) {
  .mnt-arvo-segmento-tile {
    padding: 14px 8px;
  }
  .mnt-arvo-segmento-tile__name {
    font-size: 12px;
  }
}

/* === EQUIPAMENTOS / SOLUÇÕES DE RECARGA ===
   Fundo wet-graphite — mesma família "grafite metálico" de Benefícios,
   reaproveitada em vez de criar uma 3ª superfície nova. Segmentos (a seção
   anterior) é surface-base (void), então esta transição void→graphite
   repete o padrão de alternância que já existe entre Benefícios→Segmentos. */
.mnt-arvo-equipamentos {
  background-color: var(--wp--preset--color--wet-graphite);
  padding-top: 80px;
  padding-bottom: 80px;
}
.mnt-arvo-equipamentos__inner {
  padding-left: clamp(40px, 5vw, 80px) !important;
  padding-right: clamp(40px, 5vw, 80px) !important;
  box-sizing: border-box !important;
}
.mnt-arvo-equipamentos__headline {
  max-width: 720px;
  /* margin-left/right explícitos: mesmo bug de auto-centralização já
     corrigido em Segmentos/Modelos (WP Core centraliza filho de grupo
     align="wide"/layout:constrained quando o max-width é menor que o
     container, até 1440px). */
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 12px !important;
  margin-bottom: 16px !important;
  /* Correção do bug de nomenclatura --wp--preset--font-size--h2 (sem
     hífen) já corrigido em Credibilidade/Benefícios/Segmentos/Soluções —
     sem isto o h2 cai para ~16px herdados do body (só o peso 900 do
     estilo global de elemento sobrevivia). */
  font-size: var(--wp--preset--font-size--h-2);
  color: var(--wp--preset--color--on-surface) !important;
}
.mnt-arvo-equipamentos__lead {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.6;
  color: var(--wp--preset--color--on-surface-muted);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 640px;
}

/* Foto real em destaque — único material fotográfico da seção; os 4
   cards abaixo são tipográficos de propósito (não existe foto individual
   por modelo nos materiais do cliente, ver DECISIONS.md). */
.mnt-arvo-equipamentos__photo {
  margin: 40px 0 0 0;
  max-width: 560px;
}
.mnt-arvo-equipamentos__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.mnt-arvo-equipamentos__photo-caption {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-muted);
  margin: 12px 0 0 0;
}

/* Grid de 4 cards — flex-wrap (mesma técnica de Segmentos), 2 colunas
   desktop/tablet, 1 coluna mobile. Sem CSS grid, consistente com o
   restante do sistema de layout do tema. */
.mnt-arvo-equipamentos__grid {
  margin: 40px 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.mnt-arvo-equipamento-card {
  flex: 1 1 calc(50% - 12px);
  min-width: 240px;
  background: var(--wp--preset--color--wet-graphite-card);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 28px;
  box-sizing: border-box;
  transition:
    border-color 200ms var(--wp--custom--easing--out),
    background-color 200ms var(--wp--custom--easing--out);
}
.mnt-arvo-equipamento-card:hover {
  border-color: rgba(255,255,255,0.24);
  background: var(--wp--preset--color--wet-graphite-card-hover);
}
.mnt-arvo-equipamento-card__tag {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--on-surface-muted);
  margin-bottom: 8px;
}
.mnt-arvo-equipamento-card__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: var(--wp--custom--font-weight--bold);
  line-height: 1.3;
  color: var(--wp--preset--color--on-surface);
  margin: 0 0 16px 0;
}
.mnt-arvo-equipamento-card__stat {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--wp--preset--font-size--stat);
  font-weight: 900;
  line-height: 1;
  color: var(--wp--preset--color--brand-provisional);
  margin: 0 0 12px 0;
}
.mnt-arvo-equipamento-card__attrs {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: var(--wp--preset--color--on-surface);
  margin: 0;
}
.mnt-arvo-equipamento-card__note {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-muted);
  margin: 8px 0 0 0;
}

/* Selo de seleção — características da linha de equipamentos ARVO EV,
   não credencial de uma fabricante específica (mesmos 3 selos já usados
   em Credibilidade, Catálogo p.4). */
.mnt-arvo-equipamentos__badge {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-muted);
  margin: 32px 0 0 0;
}

.mnt-arvo-equipamentos__cta-wrap {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}
.mnt-arvo-equipamentos__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--wp--preset--color--brand-provisional);
  color: #000000;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 4px;
  transition: background-color var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
  white-space: nowrap;
}
.mnt-arvo-equipamentos__cta:hover {
  background-color: var(--wp--preset--color--brand-hover-provisional);
  box-shadow: 0 0 12px rgba(34,204,34,0.3);
  color: #000000;
  text-decoration: none;
}
.mnt-arvo-equipamentos__cta:active {
  background-color: var(--wp--preset--color--brand-pressed-provisional);
}
.mnt-arvo-equipamentos__cta:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Reveal — fade único para eyebrow/headline/lead/foto/grid/badge/CTA, sem
   stagger por card (os 4 modelos são igualmente relevantes ao mesmo tempo
   — mesmo raciocínio já aplicado em Segmentos). */
@media (prefers-reduced-motion: no-preference) {
  .has-js .mnt-arvo-equipamentos .mnt-arvo-eyebrow,
  .has-js .mnt-arvo-equipamentos .mnt-arvo-equipamentos__headline,
  .has-js .mnt-arvo-equipamentos .mnt-arvo-equipamentos__lead,
  .has-js .mnt-arvo-equipamentos .mnt-arvo-equipamentos__photo,
  .has-js .mnt-arvo-equipamentos .mnt-arvo-equipamentos__grid,
  .has-js .mnt-arvo-equipamentos .mnt-arvo-equipamentos__badge,
  .has-js .mnt-arvo-equipamentos .mnt-arvo-equipamentos__cta-wrap {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--wp--custom--duration--medium) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--medium) var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-equipamentos.is-visible .mnt-arvo-eyebrow                { opacity: 1; transform: none; transition-delay: 0ms; }
  .has-js .mnt-arvo-equipamentos.is-visible .mnt-arvo-equipamentos__headline { opacity: 1; transform: none; transition-delay: 100ms; }
  .has-js .mnt-arvo-equipamentos.is-visible .mnt-arvo-equipamentos__lead     { opacity: 1; transform: none; transition-delay: 200ms; }
  .has-js .mnt-arvo-equipamentos.is-visible .mnt-arvo-equipamentos__photo   { opacity: 1; transform: none; transition-delay: 260ms; }
  .has-js .mnt-arvo-equipamentos.is-visible .mnt-arvo-equipamentos__grid   { opacity: 1; transform: none; transition-delay: 320ms; }
  .has-js .mnt-arvo-equipamentos.is-visible .mnt-arvo-equipamentos__badge  { opacity: 1; transform: none; transition-delay: 360ms; }
  .has-js .mnt-arvo-equipamentos.is-visible .mnt-arvo-equipamentos__cta-wrap { opacity: 1; transform: none; transition-delay: 400ms; }
}

/* Tablet (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .mnt-arvo-equipamentos__inner {
    padding-left: 48px !important;
    padding-right: 48px !important;
    box-sizing: border-box !important;
    max-width: 100%;
  }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  .mnt-arvo-equipamentos {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .mnt-arvo-equipamentos__inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .mnt-arvo-equipamentos__photo {
    margin-top: 32px;
    max-width: 100%;
  }
  .mnt-arvo-equipamentos__grid {
    margin-top: 32px;
    gap: 16px;
  }
  .mnt-arvo-equipamento-card {
    flex: 1 1 100%;
    min-width: 0;
    padding: 24px;
  }
  .mnt-arvo-equipamentos__cta {
    width: 100%;
  }
}

/* === SOLUÇÕES DE RECARGA (TEASER) ===
   Substitui, no fluxo da Home, o bloco .mnt-arvo-equipamentos acima (que
   permanece intacto e sem uso ativo, reservado para a futura página
   /solucoes-de-recarga/ — ver DECISIONS.md). Seção deliberadamente
   compacta e centralizada (alinhamento diferente do resto do site, que é
   predominantemente à esquerda) — reforça que esta é uma ponte/teaser,
   não mais uma seção de conteúdo denso. wet-graphite mantido: preserva a
   alternância Segmentos (surface-base) -> aqui -> Energia Limpa
   (surface-raised). */
.mnt-arvo-solucoes {
  background-color: var(--wp--preset--color--wet-graphite);
  padding-top: 64px;
  padding-bottom: 64px;
}
.mnt-arvo-solucoes__inner {
  padding-left: clamp(40px, 5vw, 80px) !important;
  padding-right: clamp(40px, 5vw, 80px) !important;
  box-sizing: border-box !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.mnt-arvo-solucoes__eyebrow {
  align-items: center;
}
.mnt-arvo-solucoes__headline {
  max-width: 640px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  /* Mesmo bug de nomenclatura de font-size já corrigido em outras seções
     (ver comentário em .mnt-arvo-beneficios__headline) — sem isto o h2
     cai para 16px herdados do body. */
  font-size: var(--wp--preset--font-size--h-2);
  /* Herdava line-height:1.0 do H2 global — sem risco em telas largas (fica
     numa linha só), mas o texto quebra em 2+ linhas a partir de larguras
     médias/mobile (font-size ainda 900/bold), mesmo ajuste já aplicado às
     outras headlines nesta rodada. */
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--wp--preset--color--on-surface) !important;
}
.mnt-arvo-solucoes__lead {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.6;
  max-width: 560px;
  color: var(--wp--preset--color--on-surface-muted) !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

/* Faixa de potência — substitui a foto como elemento visual central,
   sem depender de imagem e sem virar ícone literal de carregador.
   Preenchimento anima com a MESMA keyframe já usada em Como Funciona/
   Modelos (mnt-arvo-corrente-fill-x, definida mais acima no arquivo) —
   nenhuma técnica de motion nova, só uma aplicação nova da existente,
   sem o "brilho que viaja" (radial-gradient) usado em Como Funciona,
   pra não competir visualmente com o CTA logo abaixo. */
.mnt-arvo-solucoes__range {
  width: 100%;
  /* 480px -> 600px: a faixa é o elemento técnico principal da seção,
     ganha mais largura/presença visual. */
  max-width: 600px;
  margin: 56px auto 0;
}
.mnt-arvo-solucoes__range-track {
  position: relative;
  width: 100%;
  /* 6px -> 8px: trilho mais espesso, mais peso visual. */
  height: 8px;
  border-radius: var(--wp--custom--radius--full);
  background-color: var(--wp--custom--color--border-subtle);
  /* Marcas de régua a cada 12px — mesmo padrão de "trilho técnico" já
     usado em .mnt-arvo-steps::before, reaplicado aqui para reforçar a
     leitura de instrumento/produto, sem inventar um efeito novo. */
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 1px, transparent 1px, transparent 12px);
  overflow: hidden;
}
/* Pontos/extremos da faixa — mesmo par de pseudo-elementos já usado em
   .mnt-arvo-credibilidade__route-track::before/::after (início neutro, fim
   verde com glow), reaplicado aqui em vez de um gráfico novo. Marca com
   clareza onde a progressão de potência começa (AC) e termina (DC). */
.mnt-arvo-solucoes__range-track::before,
.mnt-arvo-solucoes__range-track::after {
  content: "";
  position: absolute;
  top: 50%;
  z-index: 2; /* fica acima do preenchimento (.range-fill), que cobre 100% da faixa no estado final */
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.mnt-arvo-solucoes__range-track::before {
  left: 0;
  background: var(--wp--preset--color--on-surface-muted);
}
.mnt-arvo-solucoes__range-track::after {
  left: 100%;
  background: var(--wp--preset--color--brand-provisional);
  box-shadow: 0 0 6px rgba(34,204,34,0.5);
}
.mnt-arvo-solucoes__range-fill {
  position: absolute;
  inset: 0;
  transform-origin: left;
  border-radius: inherit;
  /* Início com leve tingimento verde (era branco translúcido puro) — mais
     presença da cor de marca ao longo de toda a faixa, não só na ponta. */
  background: linear-gradient(90deg, rgba(34,204,34,0.35), var(--wp--preset--color--brand-provisional));
}
/* Ponto que percorre a track junto com a borda do preenchimento (ver
   @keyframes mnt-arvo-range-flow, mais abaixo) — usa os mesmos pontos
   percentuais da keyframe do fill (mnt-arvo-corrente-fill-x) para os
   dois lerem como um único movimento de "energia avançando", não dois
   efeitos separados. Glow no mesmo teto já aceito para o ponto de
   Credibilidade (`0 0 6px rgba(34,204,34,0.5)`, dentro do limite de
   DESIGN.md §8 — proibido só blur > 20px / opacidade > 40%). */
.mnt-arvo-solucoes__range-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wp--preset--color--brand-provisional);
  box-shadow: 0 0 6px rgba(34,204,34,0.5);
  transform: translate(-50%, -50%);
  opacity: 0;
}
.mnt-arvo-solucoes__range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
/* Legenda discreta (AC/DC) — mesmo vocabulário do eyebrow do site
   (uppercase, letter-spacing, cor muted). O valor em kW (abaixo) é
   quem carrega a presença visual agora; antes era o oposto (AC/DC em
   negrito claro, kW em texto solto sem realce). */
.mnt-arvo-solucoes__range-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: var(--wp--custom--font-weight--bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--on-surface-muted);
}
.mnt-arvo-solucoes__range-label strong {
  color: inherit;
  font-weight: inherit;
}
/* Valor em destaque — reusa o step h3 do type ramp documentado
   (DESIGN.md §4) em vez de inventar um tamanho novo, e o mesmo par
   peso 900 + verde de marca já usado nos números "herói" de
   Credibilidade (.mnt-arvo-credibilidade__stat dt). Transforma a
   escala de potência no elemento gráfico principal da seção sem
   introduzir um novo vocabulário visual. */
.mnt-arvo-solucoes__range-value {
  display: inline-block;
  margin-left: 4px;
  font-size: var(--wp--preset--font-size--h-3);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wp--preset--color--brand-provisional);
  vertical-align: middle;
}

/* Destaques editoriais — faixa horizontal com divisores finos, sem
   card/borda/ícone (pedido explícito para não repetir nem o grid de
   cards das outras seções, nem a lista com ícone já usada em Energia
   Limpa, que fica logo depois desta na página). */
.mnt-arvo-solucoes__highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* 32px -> 40px: mais respiro depois da faixa, que agora é o centro
     visual da seção — os destaques leem como apoio, não peso igual. */
  margin: 40px auto 0;
  max-width: 760px;
}
.mnt-arvo-solucoes__highlight {
  flex: 1 1 220px;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 28px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--wp--preset--color--on-surface-muted);
  border-left: 1px solid var(--wp--custom--color--border-subtle);
}
.mnt-arvo-solucoes__highlight:first-child {
  border-left: none;
}
.mnt-arvo-solucoes__highlight strong {
  color: var(--wp--preset--color--on-surface);
  font-weight: var(--wp--custom--font-weight--extrabold, 800);
}

.mnt-arvo-solucoes__cta-wrap {
  margin-top: 44px;
}
.mnt-arvo-solucoes__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--wp--preset--color--brand-provisional);
  color: #000000;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 4px;
  transition: background-color var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
  white-space: nowrap;
}
.mnt-arvo-solucoes__cta:hover {
  background-color: var(--wp--preset--color--brand-hover-provisional);
  box-shadow: 0 0 12px rgba(34,204,34,0.3);
  color: #000000;
  text-decoration: none;
}
.mnt-arvo-solucoes__cta:active {
  background-color: var(--wp--preset--color--brand-pressed-provisional);
}
.mnt-arvo-solucoes__cta:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Reveal — cluster único (eyebrow/headline/lead/faixa/destaques/CTA),
   mesmo gatilho .is-visible de todas as outras seções; a faixa de
   potência soma sua própria animação de preenchimento no mesmo momento. */
@media (prefers-reduced-motion: no-preference) {
  .has-js .mnt-arvo-solucoes .mnt-arvo-solucoes__eyebrow,
  .has-js .mnt-arvo-solucoes .mnt-arvo-solucoes__headline,
  .has-js .mnt-arvo-solucoes .mnt-arvo-solucoes__lead,
  .has-js .mnt-arvo-solucoes .mnt-arvo-solucoes__range,
  .has-js .mnt-arvo-solucoes .mnt-arvo-solucoes__highlights,
  .has-js .mnt-arvo-solucoes .mnt-arvo-solucoes__cta-wrap {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--wp--custom--duration--medium) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--medium) var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-solucoes.is-visible .mnt-arvo-solucoes__eyebrow     { opacity: 1; transform: none; transition-delay: 0ms; }
  .has-js .mnt-arvo-solucoes.is-visible .mnt-arvo-solucoes__headline   { opacity: 1; transform: none; transition-delay: 80ms; }
  .has-js .mnt-arvo-solucoes.is-visible .mnt-arvo-solucoes__lead       { opacity: 1; transform: none; transition-delay: 160ms; }
  .has-js .mnt-arvo-solucoes.is-visible .mnt-arvo-solucoes__range      { opacity: 1; transform: none; transition-delay: 240ms; }
  .has-js .mnt-arvo-solucoes.is-visible .mnt-arvo-solucoes__highlights { opacity: 1; transform: none; transition-delay: 320ms; }
  .has-js .mnt-arvo-solucoes.is-visible .mnt-arvo-solucoes__cta-wrap   { opacity: 1; transform: none; transition-delay: 400ms; }

  .has-js .mnt-arvo-solucoes__range-fill {
    transform: scaleX(0);
  }
  .has-js .mnt-arvo-solucoes.is-visible .mnt-arvo-solucoes__range-fill {
    animation: mnt-arvo-corrente-fill-x 1500ms var(--wp--custom--easing--out) 340ms forwards;
  }
  .has-js .mnt-arvo-solucoes.is-visible .mnt-arvo-solucoes__range-dot {
    animation: mnt-arvo-range-flow 1500ms var(--wp--custom--easing--out) 340ms forwards;
  }
}
/* Ponto acompanhando a borda do preenchimento — mesmos breakpoints de
   posição da keyframe mnt-arvo-corrente-fill-x (16%→20%, 37%→40%,
   57%→60%, 77%→80%), com fade in/out próprio para não deixar nada
   "grudado" na ponta quando a animação (única, não-infinita) termina. */
@keyframes mnt-arvo-range-flow {
  0%   { left: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  16%  { left: 20%; }
  37%  { left: 40%; }
  57%  { left: 60%; }
  77%  { left: 80%; }
  92%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Tablet (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .mnt-arvo-solucoes__inner {
    padding-left: 48px !important;
    padding-right: 48px !important;
    box-sizing: border-box;
    max-width: 100%;
  }
}

/* Mobile (≤ 767px) — destaques empilham com divisor horizontal em vez
   de vertical. */
@media (max-width: 767px) {
  .mnt-arvo-solucoes {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .mnt-arvo-solucoes__inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .mnt-arvo-solucoes__highlights {
    flex-direction: column;
    align-items: stretch;
  }
  .mnt-arvo-solucoes__highlight {
    flex: 0 1 auto;
    border-left: none;
    border-top: 1px solid var(--wp--custom--color--border-subtle);
    padding: 16px 0;
    text-align: center;
  }
  .mnt-arvo-solucoes__highlight:first-child {
    border-top: none;
    padding-top: 0;
  }
  .mnt-arvo-solucoes__cta {
    width: 100%;
    box-sizing: border-box;
  }
}

/* === ENERGIA LIMPA ===
   Superfície surface-raised (#141414) — recomendação de DESIGN.md §12 para
   esta seção, e cria a alternância graphite(Equipamentos)->raised(aqui)
   que o site já vem seguindo entre seções vizinhas.
   Grid com áreas nomeadas (não flex/2-col simples): no desktop a foto
   ocupa as duas linhas da coluna direita (header+lista à esquerda), no
   mobile as mesmas 3 peças mudam de área para a ordem pedida
   (header -> foto -> lista) sem duplicar HTML nem reordenar via JS. */
.mnt-arvo-energia-limpa {
  background-color: var(--wp--preset--color--surface-raised-provisional);
  padding-top: 80px;
  padding-bottom: 80px;
}
.mnt-arvo-energia-limpa__inner {
  padding-left: clamp(40px, 5vw, 80px) !important;
  padding-right: clamp(40px, 5vw, 80px) !important;
  box-sizing: border-box !important;
}
.mnt-arvo-energia-limpa__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "photo"
    "list";
  gap: 40px;
}
@media (min-width: 900px) {
  .mnt-arvo-energia-limpa__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    grid-template-areas:
      "header photo"
      "list   photo";
    column-gap: clamp(48px, 6vw, 80px);
    row-gap: 40px;
    align-items: start;
  }
}
.mnt-arvo-energia-limpa__header {
  grid-area: header;
}
.mnt-arvo-energia-limpa__headline {
  /* 560px -> 620px: com a 2ª linha isolando "Mobilidade inteligente" (ver
     HTML — <br> movido para depois de "inteligente"), 560px era estreito
     demais e o navegador quebrava sozinho antes disso, isolando
     "Mobilidade" numa linha própria (órfã). Medido ao vivo: a frase
     precisa de ~615px no tamanho de fonte do desktop; a coluna da grid
     tem ~630px — 620px dá folga sem depender só do limite da coluna. */
  max-width: 620px;
  margin-top: 24px !important;
  margin-bottom: 0 !important;
  font-size: clamp(32px, 3.6vw, 52px) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance;
  color: var(--wp--preset--color--on-surface) !important;
}
.mnt-arvo-energia-limpa__headline-accent {
  color: var(--wp--preset--color--brand-provisional);
}
.mnt-arvo-energia-limpa__lead {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.6;
  max-width: 480px;
  color: var(--wp--preset--color--on-surface-muted) !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}

/* Foto real — presença grande (ocupa as 2 linhas da coluna no desktop via
   grid-area), sem filtro/tingimento sobre a fotografia (regra do
   DESIGN.md §7: "não aplicar filtros de cor, tinting verde"). */
.mnt-arvo-energia-limpa__photo {
  grid-area: photo;
  margin: 0;
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
  /* Sombra + fio de borda + glow ambiente verde bem sutil (estático, sem
     depender de hover) — a moldura ganha presença própria em repouso, em
     todos os dispositivos, não só no hover do desktop. Blur alto (56px)
     mas opacidade bem baixa (0.1): fica longe do combo proibido do
     DESIGN.md §8 (blur>20px E opacidade>40%) e não escala o precedente já
     aceito no hover (0 0 32px / 0.16), só complementa em repouso.
     48px/0.08 -> 56px/0.1 e fio de 0.1 -> 0.14: reforço pequeno pedido
     nesta rodada ("reflexo discreto", "acabamento premium") — ainda bem
     abaixo do teto, só um pouco mais presente que antes. */
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 56px rgba(34,204,34,0.1), 0 0 0 1px rgba(255,255,255,0.14);
  aspect-ratio: 4 / 5;
  height: 100%;
  max-width: 100%;
  min-width: 0;
}
.mnt-arvo-energia-limpa__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Lista editorial — linhas com ícone + título + texto, separadas por fio
   sutil (não é grid de cards: pedido explícito para evitar volume visual
   de "features SaaS", ver DECISIONS.md). */
.mnt-arvo-energia-limpa__list {
  grid-area: list;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mnt-arvo-energia-limpa__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--wp--custom--color--border-subtle);
}
.mnt-arvo-energia-limpa__item:first-child {
  border-top: none;
  padding-top: 4px;
}
.mnt-arvo-energia-limpa__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--wp--preset--color--brand-provisional);
}
.mnt-arvo-energia-limpa__item-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: var(--wp--custom--font-weight--bold);
  line-height: 1.3;
  color: var(--wp--preset--color--on-surface);
  margin: 0 0 4px 0;
}
.mnt-arvo-energia-limpa__item-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--wp--preset--color--on-surface-muted);
  margin: 0;
  max-width: 46ch;
}

/* Reveal — header (eyebrow/headline/lead) e foto entram juntos com o
   gatilho único da seção; foto ganha um scale sutil (1.03->1) além do
   fade, só para diferenciar levemente o tratamento fotográfico do
   tratamento tipográfico, sem virar parallax (sem infraestrutura de
   scroll-linked motion no projeto ainda — reveal por IntersectionObserver
   é o único gatilho, ver DECISIONS.md). Lista tem stagger próprio via JS
   (mesma técnica de Benefícios/Como Funciona), 80ms por item. */
@media (prefers-reduced-motion: no-preference) {
  .has-js .mnt-arvo-energia-limpa .mnt-arvo-eyebrow,
  .has-js .mnt-arvo-energia-limpa .mnt-arvo-energia-limpa__headline,
  .has-js .mnt-arvo-energia-limpa .mnt-arvo-energia-limpa__lead {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--wp--custom--duration--medium) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--medium) var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-energia-limpa.is-visible .mnt-arvo-eyebrow             { opacity: 1; transform: none; transition-delay: 0ms; }
  .has-js .mnt-arvo-energia-limpa.is-visible .mnt-arvo-energia-limpa__headline { opacity: 1; transform: none; transition-delay: 100ms; }
  .has-js .mnt-arvo-energia-limpa.is-visible .mnt-arvo-energia-limpa__lead     { opacity: 1; transform: none; transition-delay: 200ms; }

  .has-js .mnt-arvo-energia-limpa .mnt-arvo-energia-limpa__photo {
    opacity: 0;
    transform: scale(1.03);
    transition:
      opacity var(--wp--custom--duration--long) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--long) var(--wp--custom--easing--out);
    transition-delay: 100ms;
  }
  .has-js .mnt-arvo-energia-limpa.is-visible .mnt-arvo-energia-limpa__photo {
    opacity: 1;
    transform: scale(1);
  }

  .has-js .mnt-arvo-energia-limpa__item {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity var(--wp--custom--duration--medium) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--medium) var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-energia-limpa__item.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* Tilt 3D pointer-driven no hover da foto — mesmo padrão já validado do
   spotlight de Modelos (main.js seta --tilt-x/--tilt-y via mousemove,
   só quando hover:hover+pointer:fine; CSS decide se usa, só sob
   prefers-reduced-motion:no-preference). Sem overlay/tint sobre a foto
   (proibido, DESIGN.md §7) — a profundidade vem de fora: rotação 3D leve
   + sombra/glow que crescem, nunca cor sobre a imagem. Não é parallax de
   scroll (fora do escopo do projeto) — é 100% pointer-driven.
   Especificidade elevada de propósito (4 e 5 seletores de classe) para
   vencer a regra de reveal .is-visible acima (3-4 classes) — mesmo
   ajuste de especificidade já documentado em Benefícios. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .has-js .mnt-arvo-energia-limpa.is-visible .mnt-arvo-energia-limpa__photo {
    transition:
      opacity var(--wp--custom--duration--long) var(--wp--custom--easing--out),
      transform 200ms var(--wp--custom--easing--out),
      box-shadow 250ms var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-energia-limpa.is-visible .mnt-arvo-energia-limpa__photo:hover {
    transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1.02);
    /* Sombra mais funda (20px/48px -> 28px/64px) reforça a sensação de a
       foto "levantar" da superfície no hover; glow verde um pouco mais
       presente (32px/.16 -> 40px/.18) — ainda longe do combo proibido do
       DESIGN.md §8 (blur>20px E opacidade>40% juntos). */
    box-shadow:
      0 28px 64px rgba(0,0,0,0.5),
      0 0 40px rgba(34,204,34,0.18),
      0 0 0 1px rgba(34,204,34,0.22);
  }
}

/* Tablet (768–899px) — abaixo de 900px o grid já empilha (ver regra
   principal acima); aqui só o padding lateral segue o padrão de tablet
   já usado nas demais seções. */
@media (min-width: 768px) and (max-width: 899px) {
  .mnt-arvo-energia-limpa__inner {
    padding-left: 48px !important;
    padding-right: 48px !important;
    box-sizing: border-box;
    max-width: 100%;
  }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  .mnt-arvo-energia-limpa {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .mnt-arvo-energia-limpa__inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .mnt-arvo-energia-limpa__headline {
    max-width: 100%;
    font-size: clamp(28px, 8vw, 36px) !important;
  }
  .mnt-arvo-energia-limpa__lead {
    max-width: 100%;
  }
  .mnt-arvo-energia-limpa__photo {
    aspect-ratio: 4 / 5;
    height: auto;
  }
}

/* === FECHAMENTO (CTA final da Home, antes do Footer) ===
   Superfície surface-base (#0A0A0A, void) — contraste forte contra o
   surface-raised (#141414) de Energia Limpa logo acima, e funde sem
   costura com o Footer logo abaixo (mesma superfície). Reestruturado de
   um bloco centralizado (headline + 2 CTAs) para uma composição de duas
   colunas — texto/WhatsApp à esquerda, formulário de captação à direita
   — mantendo headline, eyebrow, cor, motion e o CTA primário de WhatsApp
   exatamente como já estavam (identidade preservada). O CTA secundário
   "Conheça nossas soluções" foi removido desta seção: a especificação
   desta rodada lista só um CTA na coluna esquerda ("alternativa rápida"
   ao formulário, não mais um botão para outra seção) — a seção Soluções
   de Recarga, com seu próprio CTA para a mesma página, continua intacta
   em outro lugar da Home. */
.mnt-arvo-fechamento {
  background-color: var(--wp--preset--color--surface-base);
  padding-top: clamp(96px, 11vh, 148px);
  padding-bottom: clamp(80px, 9vh, 120px);
}
.mnt-arvo-fechamento__inner {
  padding-left: clamp(40px, 5vw, 80px) !important;
  padding-right: clamp(40px, 5vw, 80px) !important;
  box-sizing: border-box !important;
}

/* Grid — áreas nomeadas (não `order`) para o WhatsApp poder viver
   diretamente abaixo do texto no desktop (coluna esquerda) e, ainda
   assim, aparecer DEPOIS do formulário no empilhamento mobile/tablet
   (pedido explícito de ordem: headline/texto → formulário → WhatsApp),
   sem depender da ordem do DOM. Base = empilhado (mobile-first); a
   composição de duas colunas só entra a partir de 1024px, mesmo
   patamar usado no restante do site para "recurso desktop-only"
   (ex.: bifurcação de Modelos). */
.mnt-arvo-fechamento__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "copy"
    "form"
    "whats";
  gap: 40px;
  text-align: left;
}
@media (min-width: 1024px) {
  .mnt-arvo-fechamento__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "left form";
    column-gap: 80px;
    row-gap: 40px;
    align-items: start;
  }
}
.mnt-arvo-fechamento__copy {
  grid-area: copy;
}
/* Wrapper puro (sem estilo próprio) até 1024px — `display:contents` deixa
   `__copy` e `__whatsapp` participarem do grid do mobile/tablet exatamente
   como antes (áreas "copy"/"form"/"whats" continuam funcionando, ordem
   headline→formulário→WhatsApp preservada). A partir de 1024px o wrapper
   passa a existir de verdade como coluna flex, ocupando sozinho a área
   "left" do grid 2 colunas — ancora o CTA do WhatsApp na base da coluna,
   alinhado com a base do card do formulário, em vez de deixar um vão
   vazio entre o texto curto e o form mais alto. */
.mnt-arvo-fechamento__left {
  display: contents;
}
@media (min-width: 1024px) {
  .mnt-arvo-fechamento__left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    grid-area: left;
  }
}

.mnt-arvo-fechamento__eyebrow {
  align-items: flex-start;
}
/* Trilho curto do eyebrow ganha um pouco mais de largura só nesta seção
   (o padrão global .mnt-arvo-eyebrow__line, usado em todas as outras
   seções, não é tocado) para caber o ponto que percorre a linha. */
.mnt-arvo-fechamento__eyebrow .mnt-arvo-eyebrow__line {
  position: relative;
  width: 56px;
}
.mnt-arvo-fechamento__flow-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wp--preset--color--brand-provisional);
  box-shadow: 0 0 6px rgba(34,204,34,0.5);
  transform: translate(-50%, -50%);
  opacity: 0;
}
.mnt-arvo-fechamento__headline {
  max-width: 560px;
  margin: 32px 0 0 0 !important;
  font-size: clamp(34px, 4.2vw, 56px) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance;
  color: var(--wp--preset--color--on-surface) !important;
}
.mnt-arvo-fechamento__headline-accent {
  color: var(--wp--preset--color--brand-provisional);
}
.mnt-arvo-fechamento__lead {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  max-width: 480px;
  color: var(--wp--preset--color--on-surface-muted) !important;
  margin: 28px 0 0 0 !important;
}

/* Bloco do WhatsApp — CTA já existente, preservado (mesma classe,
   mesmo estilo); só ganhou um container próprio (grid-area `whats`) e
   uma legenda curta abaixo, para não ficar "boiando" sozinho ao lado
   do formulário maior. */
.mnt-arvo-fechamento__whatsapp {
  grid-area: whats;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.mnt-arvo-fechamento__whatsapp-note {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-muted);
}
.mnt-arvo-fechamento__cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--wp--preset--color--brand-provisional);
  color: #000000;
  font-family: 'Montserrat', sans-serif;
  font-weight: var(--wp--custom--font-weight--bold);
  font-size: 15px;
  letter-spacing: var(--wp--custom--letter-spacing--button);
  text-transform: uppercase;
  text-decoration: none;
  padding: 20px 44px;
  border-radius: var(--wp--custom--radius--sm);
  transition:
    background-color var(--wp--custom--duration--micro) var(--wp--custom--easing--out),
    box-shadow var(--wp--custom--duration--short) var(--wp--custom--easing--out),
    transform var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
  white-space: nowrap;
}
.mnt-arvo-fechamento__cta-primary:hover {
  background-color: var(--wp--preset--color--brand-hover-provisional);
  box-shadow: 0 0 12px rgba(34,204,34,0.3);
}
@media (prefers-reduced-motion: no-preference) {
  .mnt-arvo-fechamento__cta-primary:hover {
    transform: translateY(-2px);
  }
}
.mnt-arvo-fechamento__cta-primary:active {
  background-color: var(--wp--preset--color--brand-pressed-provisional);
}
.mnt-arvo-fechamento__cta-primary:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 4px;
}

/* ===== Formulário ===== */
.mnt-arvo-fechamento__form-wrap {
  grid-area: form;
}
/* Card do formulário — superfície grafite já usada em Benefícios/
   Soluções (wet-graphite-card), nunca branca — evita o "formulário
   genérico" pedido explicitamente para não acontecer. */
.mnt-arvo-fechamento__form {
  background: var(--wp--preset--color--wet-graphite-card);
  border: 1px solid var(--wp--custom--color--border-subtle);
  border-radius: var(--wp--custom--radius--lg);
  padding: clamp(28px, 3vw, 40px);
}
/* Wrapper dos campos — separado do <form> para que o JS de demonstração
   (main.js) possa trocar isto pelo painel de sucesso com um único
   toggle de `hidden` em cada um, em vez de esconder elemento por
   elemento (evitava sobras de `gap` de linhas/campos escondidos
   individualmente). */
.mnt-arvo-fechamento__form-fields {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.mnt-arvo-fechamento__form-fields[hidden] {
  display: none;
}
.mnt-arvo-fechamento__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.mnt-arvo-fechamento__field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 1024px) {
  .mnt-arvo-fechamento__field-row {
    grid-template-columns: 1fr 1fr;
  }
}
.mnt-arvo-fechamento__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mnt-arvo-fechamento__field-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: var(--wp--custom--font-weight--bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--on-surface);
  padding: 0;
  margin: 0;
  border: none;
}
.mnt-arvo-fechamento__required {
  color: var(--wp--preset--color--brand-provisional);
  margin-left: 2px;
}
.mnt-arvo-fechamento__optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--wp--custom--font-weight--regular);
  color: var(--wp--preset--color--on-surface-muted);
}
.mnt-arvo-fechamento__field input[type="text"],
.mnt-arvo-fechamento__field input[type="tel"],
.mnt-arvo-fechamento__field input[type="email"],
.mnt-arvo-fechamento__field textarea {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  color: var(--wp--preset--color--on-surface);
  background: var(--wp--preset--color--surface-base);
  border: 1px solid var(--wp--custom--color--border-subtle);
  border-radius: var(--wp--custom--radius--sm);
  padding: 13px 16px;
  width: 100%;
  box-sizing: border-box;
  transition:
    border-color var(--wp--custom--duration--micro) var(--wp--custom--easing--out),
    box-shadow var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
}
.mnt-arvo-fechamento__field textarea {
  resize: vertical;
  min-height: 84px;
}
.mnt-arvo-fechamento__field input::placeholder,
.mnt-arvo-fechamento__field textarea::placeholder {
  color: var(--wp--preset--color--on-surface-muted);
  opacity: 0.7;
}
.mnt-arvo-fechamento__field input:focus,
.mnt-arvo-fechamento__field textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--brand-provisional);
  box-shadow: 0 0 0 3px rgba(34,204,34,0.15);
}

/* Interesse — grupo de rádio custom (não <select> nativo, para não ler
   como "formulário de plugin"). Marcador desenhado em CSS, input nativo
   mantido (opacity:0, sobreposto ao marcador) para foco/teclado/leitor
   de tela continuarem 100% nativos. */
.mnt-arvo-fechamento__field--radio {
  border: none;
  margin: 0;
  padding: 0;
}
.mnt-arvo-fechamento__radio {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  cursor: pointer;
}
.mnt-arvo-fechamento__radio input {
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.mnt-arvo-fechamento__radio-mark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1.5px solid var(--wp--custom--color--border-medium);
  border-radius: 50%;
  position: relative;
  transition: border-color var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
}
.mnt-arvo-fechamento__radio-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--wp--preset--color--brand-provisional);
  transform: scale(0);
  transition: transform var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
}
.mnt-arvo-fechamento__radio input:checked + .mnt-arvo-fechamento__radio-mark {
  border-color: var(--wp--preset--color--brand-provisional);
}
.mnt-arvo-fechamento__radio input:checked + .mnt-arvo-fechamento__radio-mark::after {
  transform: scale(1);
}
.mnt-arvo-fechamento__radio input:focus-visible + .mnt-arvo-fechamento__radio-mark {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 2px;
}
.mnt-arvo-fechamento__radio span:last-child {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: var(--wp--preset--color--on-surface-muted);
}

/* Checkbox LGPD — mesmo vocabulário de marcador custom do rádio acima,
   variante quadrada. */
.mnt-arvo-fechamento__field--checkbox {
  gap: 4px;
}
.mnt-arvo-fechamento__checkbox {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.mnt-arvo-fechamento__checkbox input {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.mnt-arvo-fechamento__checkbox-mark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border: 1.5px solid var(--wp--custom--color--border-medium);
  border-radius: 4px;
  position: relative;
  transition:
    border-color var(--wp--custom--duration--micro) var(--wp--custom--easing--out),
    background-color var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
}
.mnt-arvo-fechamento__checkbox-mark::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #000000;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
}
.mnt-arvo-fechamento__checkbox input:checked + .mnt-arvo-fechamento__checkbox-mark {
  background: var(--wp--preset--color--brand-provisional);
  border-color: var(--wp--preset--color--brand-provisional);
}
.mnt-arvo-fechamento__checkbox input:checked + .mnt-arvo-fechamento__checkbox-mark::after {
  transform: rotate(45deg) scale(1);
}
.mnt-arvo-fechamento__checkbox input:focus-visible + .mnt-arvo-fechamento__checkbox-mark {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 2px;
}
.mnt-arvo-fechamento__checkbox-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--wp--preset--color--on-surface-muted);
}
/* Link real para /politica-de-privacidade/ — bloqueio de lançamento
   resolvido nesta rodada (ver project-docs/DECISIONS.md). */
.mnt-arvo-fechamento__privacy-link {
  color: var(--wp--preset--color--brand-provisional);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mnt-arvo-fechamento__privacy-link:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Erro — mesma cor de erro já confirmada em PAGE_PLAN.md §8 (#FF4444),
   nenhum valor novo. Mensagem só aparece quando o campo/grupo ganha
   .has-error (JS de validação client-side, ver main.js). */
.mnt-arvo-fechamento__field-error {
  display: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: #FF4444;
}
.mnt-arvo-fechamento__field.has-error input,
.mnt-arvo-fechamento__field.has-error textarea {
  border-color: #FF4444;
}
.mnt-arvo-fechamento__field.has-error .mnt-arvo-fechamento__field-error {
  display: block;
}
.mnt-arvo-fechamento__field--radio.has-error .mnt-arvo-fechamento__radio-mark,
.mnt-arvo-fechamento__field--checkbox.has-error .mnt-arvo-fechamento__checkbox-mark {
  border-color: #FF4444;
}

/* Erro geral — rate limit / falha de envio (respostas da REST API que não
   apontam para um campo específico). Mesma cor de erro, tratamento em
   bloco (não inline) para não ser confundido com erro de campo. */
.mnt-arvo-fechamento__form-general-error {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #FF4444;
  background: rgba(255,68,68,0.08);
  border: 1px solid rgba(255,68,68,0.3);
  border-radius: var(--wp--custom--radius--sm);
  padding: 12px 16px;
}

.mnt-arvo-fechamento__form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--wp--preset--color--brand-provisional);
  color: #000000;
  font-family: 'Montserrat', sans-serif;
  font-weight: var(--wp--custom--font-weight--bold);
  font-size: 15px;
  letter-spacing: var(--wp--custom--letter-spacing--button);
  text-transform: uppercase;
  border: none;
  border-radius: var(--wp--custom--radius--sm);
  padding: 18px 32px;
  cursor: pointer;
  margin-top: 4px;
  transition:
    background-color var(--wp--custom--duration--micro) var(--wp--custom--easing--out),
    box-shadow var(--wp--custom--duration--short) var(--wp--custom--easing--out),
    transform var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
}
.mnt-arvo-fechamento__form-submit:hover {
  background-color: var(--wp--preset--color--brand-hover-provisional);
  box-shadow: 0 0 12px rgba(34,204,34,0.3);
}
@media (prefers-reduced-motion: no-preference) {
  .mnt-arvo-fechamento__form-submit:hover {
    transform: translateY(-2px);
  }
}
.mnt-arvo-fechamento__form-submit:active {
  background-color: var(--wp--preset--color--brand-pressed-provisional);
}
.mnt-arvo-fechamento__form-submit:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 4px;
}
/* Loading — impede duplo clique (button[disabled] já bloqueia novos
   cliques nativamente); só opacidade + cursor, sem spinner/animação, para
   não virar "animação exagerada". */
.mnt-arvo-fechamento__form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.mnt-arvo-fechamento__form-submit:disabled:hover {
  background-color: var(--wp--preset--color--brand-provisional);
  box-shadow: none;
}
@media (prefers-reduced-motion: no-preference) {
  .mnt-arvo-fechamento__form-submit:disabled:hover {
    transform: none;
  }
}

/* Sucesso — troca o formulário inteiro pela confirmação (main.js toggla
   [hidden] em .form-fields/.form-success). Mesma superfície do card,
   sem virar um alerta verde genérico. */
.mnt-arvo-fechamento__form-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  color: var(--wp--preset--color--brand-provisional);
}
.mnt-arvo-fechamento__form-success[hidden] {
  display: none;
}
.mnt-arvo-fechamento__form-success-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: var(--wp--custom--font-weight--bold);
  color: var(--wp--preset--color--on-surface);
  margin: 4px 0 0 0;
}
.mnt-arvo-fechamento__form-success-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--wp--preset--color--on-surface-muted);
  margin: 0;
}

/* Reveal — mesmo gatilho .is-visible de todas as outras seções, mesmos
   delays já usados (eyebrow/headline/lead), só estendido para o bloco
   de WhatsApp e o formulário. Fluxo de energia no trilho do eyebrow
   mantido sem alteração. */
@media (prefers-reduced-motion: no-preference) {
  .has-js .mnt-arvo-fechamento .mnt-arvo-fechamento__eyebrow,
  .has-js .mnt-arvo-fechamento .mnt-arvo-fechamento__headline,
  .has-js .mnt-arvo-fechamento .mnt-arvo-fechamento__lead,
  .has-js .mnt-arvo-fechamento .mnt-arvo-fechamento__whatsapp {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--wp--custom--duration--medium) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--medium) var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-fechamento.is-visible .mnt-arvo-fechamento__eyebrow   { opacity: 1; transform: none; transition-delay: 0ms; }
  .has-js .mnt-arvo-fechamento.is-visible .mnt-arvo-fechamento__headline { opacity: 1; transform: none; transition-delay: 100ms; }
  .has-js .mnt-arvo-fechamento.is-visible .mnt-arvo-fechamento__lead     { opacity: 1; transform: none; transition-delay: 200ms; }
  .has-js .mnt-arvo-fechamento.is-visible .mnt-arvo-fechamento__whatsapp { opacity: 1; transform: none; transition-delay: 300ms; }

  .has-js .mnt-arvo-fechamento .mnt-arvo-fechamento__form-wrap {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--wp--custom--duration--medium) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--medium) var(--wp--custom--easing--out);
    transition-delay: 150ms;
  }
  .has-js .mnt-arvo-fechamento.is-visible .mnt-arvo-fechamento__form-wrap {
    opacity: 1;
    transform: none;
  }

  .has-js .mnt-arvo-fechamento.is-visible .mnt-arvo-fechamento__flow-dot {
    animation: mnt-arvo-fechamento-flow 1100ms var(--wp--custom--easing--out) 450ms forwards;
  }
}
@keyframes mnt-arvo-fechamento-flow {
  0%   { left: 0%;   opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Tablet (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .mnt-arvo-fechamento {
    padding-top: 96px;
    padding-bottom: 88px;
  }
  .mnt-arvo-fechamento__inner {
    padding-left: 48px !important;
    padding-right: 48px !important;
    box-sizing: border-box;
  }
  .mnt-arvo-fechamento__headline,
  .mnt-arvo-fechamento__lead {
    max-width: 640px;
  }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  .mnt-arvo-fechamento {
    padding-top: 72px;
    padding-bottom: 64px;
  }
  .mnt-arvo-fechamento__inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .mnt-arvo-fechamento__headline {
    font-size: clamp(28px, 8vw, 36px) !important;
    max-width: 100%;
  }
  .mnt-arvo-fechamento__lead {
    max-width: 100%;
  }
  .mnt-arvo-fechamento__grid {
    gap: 32px;
  }
  .mnt-arvo-fechamento__whatsapp {
    align-items: stretch;
    text-align: center;
  }
  .mnt-arvo-fechamento__cta-primary,
  .mnt-arvo-fechamento__form-submit {
    width: 100%;
    box-sizing: border-box;
  }
}

/* === FOOTER === */
.mnt-arvo-footer {
  background-color: var(--wp--preset--color--surface-base);
  border-top: 1px solid var(--wp--custom--color--border-subtle);
}
.mnt-arvo-footer__inner {
  padding: 80px clamp(40px, 5vw, 80px) 48px;
  box-sizing: border-box;
}

/* Camada estrutural — logo / navegação / contato, assimétrica de propósito
   (1.3fr + 1fr + 1fr — não é o padrão de 3 colunas iguais) */
.mnt-arvo-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 48px;
  padding-top: 48px;
  padding-bottom: 40px;
  border-top: 1px solid var(--wp--custom--color--border-subtle);
}
.mnt-arvo-footer__brand {
  display: flex;
  align-items: flex-start;
}
.mnt-arvo-footer__logo img,
.mnt-arvo-footer__logo .custom-logo {
  width: 140px;
  height: auto;
  display: block;
}
.mnt-arvo-footer__col-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--on-surface-muted);
  margin-bottom: 16px;
}
.mnt-arvo-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mnt-arvo-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: var(--wp--preset--color--on-surface-muted);
  text-decoration: none;
  transition: color var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
}
.mnt-arvo-footer__links a:hover,
.mnt-arvo-footer__links a:focus-visible {
  color: var(--wp--preset--color--brand-provisional);
}
.mnt-arvo-footer__links a:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 4px;
  border-radius: 2px;
}
.mnt-arvo-footer__links--icon svg {
  flex-shrink: 0;
}

/* Camada técnica inferior — copyright + link legal + marca discreta */
.mnt-arvo-footer__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--wp--custom--color--border-subtle);
}
.mnt-arvo-footer__legal {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.mnt-arvo-footer__copyright {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-muted);
  margin: 0;
}
.mnt-arvo-footer__legal-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
}
.mnt-arvo-footer__legal-link:hover,
.mnt-arvo-footer__legal-link:focus-visible {
  color: var(--wp--preset--color--brand-provisional);
}
.mnt-arvo-footer__legal-link:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 3px;
  border-radius: 2px;
}
.mnt-arvo-footer__mark {
  width: 24px;
  height: 2px;
  background: var(--wp--preset--color--brand-provisional);
}

/* Tablet (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .mnt-arvo-footer__inner {
    padding: 80px 48px 40px;
  }
  .mnt-arvo-footer__grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }
  .mnt-arvo-footer__brand {
    grid-column: 1 / -1;
  }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  .mnt-arvo-footer__inner {
    padding: 64px 24px 32px;
  }
  .mnt-arvo-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 40px;
    padding-bottom: 32px;
  }
  .mnt-arvo-footer__base {
    padding-top: 20px;
  }
}

/* ===================================================================
   NAVEGAÇÃO POR ÂNCORA — compensa o Header sticky (position:sticky;
   top:0; main.css:29,34) para que #como-funciona, #modelos e #contato
   não fiquem parcialmente cobertos pelo Header ao rolar via âncora.
   Base: altura do Header desktop/tablet (min-height:72px, main.css:50)
   + margem de segurança. Mobile: altura do Header mobile (min-height:
   60px, main.css:194) + margem de segurança.
   =================================================================== */
.mnt-arvo-credibilidade,
.mnt-arvo-como-funciona,
.mnt-arvo-modelos,
.mnt-arvo-segmentos,
.mnt-arvo-equipamentos,
.mnt-arvo-solucoes,
.mnt-arvo-energia-limpa,
.mnt-arvo-fechamento,
.mnt-arvo-footer__contact {
  scroll-margin-top: 90px;
}
@media (max-width: 767px) {
  .mnt-arvo-credibilidade,
  .mnt-arvo-como-funciona,
  .mnt-arvo-modelos,
  .mnt-arvo-segmentos,
  .mnt-arvo-equipamentos,
  .mnt-arvo-solucoes,
  .mnt-arvo-energia-limpa,
  .mnt-arvo-fechamento,
  .mnt-arvo-footer__contact {
    scroll-margin-top: 76px;
  }
}

/* ===================================================================
   MOBILE (≤767px) — DESATIVAÇÃO DO SISTEMA DE REVEAL
   Conteúdo estrutural/textual não pode depender de IntersectionObserver
   ou requestAnimationFrame para ficar visível no mobile (capturas
   full-page e dispositivos reais podem fotografar o estado intermediário
   opacity:0 / transform:translateY(...) da transição de entrada).
   Desktop e tablet (>767px) preservam a animação original — este bloco
   só existe dentro de max-width:767px.
   =================================================================== */
@media (max-width: 767px) {
  /* Hero */
  .has-js .mnt-arvo-hero .mnt-arvo-eyebrow,
  .has-js .mnt-arvo-hero .mnt-arvo-hero__headline,
  .has-js .mnt-arvo-hero .mnt-arvo-hero__subheadline,
  .has-js .mnt-arvo-hero .mnt-arvo-hero__body,
  .has-js .mnt-arvo-hero .mnt-arvo-hero__ctas,
  /* Credibilidade */
  .has-js .mnt-arvo-credibilidade .mnt-arvo-eyebrow,
  .has-js .mnt-arvo-credibilidade .mnt-arvo-credibilidade__headline,
  .has-js .mnt-arvo-credibilidade .mnt-arvo-credibilidade__route,
  .has-js .mnt-arvo-credibilidade__intro,
  .has-js .mnt-arvo-credibilidade__quote,
  .has-js .mnt-arvo-credibilidade__market,
  .has-js .mnt-arvo-credibilidade__stat,
  /* Como Funciona */
  .has-js .mnt-arvo-step,
  .has-js .mnt-arvo-como-funciona .mnt-arvo-eyebrow,
  .has-js .mnt-arvo-como-funciona .mnt-arvo-como-funciona__headline,
  .has-js .mnt-arvo-como-funciona .mnt-arvo-como-funciona__lead,
  /* Modelos de Negócio */
  .has-js .mnt-arvo-modelos .mnt-arvo-eyebrow,
  .has-js .mnt-arvo-modelos .mnt-arvo-modelos__kicker,
  .has-js .mnt-arvo-modelos .mnt-arvo-modelos__headline,
  .has-js .mnt-arvo-modelo-card,
  .has-js .mnt-arvo-modelos__closing,
  /* Benefícios */
  .has-js .mnt-arvo-beneficios .mnt-arvo-eyebrow,
  .has-js .mnt-arvo-beneficios .mnt-arvo-beneficios__headline,
  .has-js .mnt-arvo-beneficios .mnt-arvo-beneficios__lead,
  .has-js .mnt-arvo-beneficio-card,
  .has-js .mnt-arvo-beneficios__info,
  .has-js .mnt-arvo-beneficios__cta-wrap,
  /* Segmentos Atendidos */
  .has-js .mnt-arvo-segmentos .mnt-arvo-eyebrow,
  .has-js .mnt-arvo-segmentos .mnt-arvo-segmentos__headline,
  .has-js .mnt-arvo-segmentos .mnt-arvo-segmentos__lead,
  .has-js .mnt-arvo-segmentos .mnt-arvo-segmentos__grid,
  /* Equipamentos / Soluções de Recarga */
  .has-js .mnt-arvo-equipamentos .mnt-arvo-eyebrow,
  .has-js .mnt-arvo-equipamentos .mnt-arvo-equipamentos__headline,
  .has-js .mnt-arvo-equipamentos .mnt-arvo-equipamentos__lead,
  .has-js .mnt-arvo-equipamentos .mnt-arvo-equipamentos__photo,
  .has-js .mnt-arvo-equipamentos .mnt-arvo-equipamentos__grid,
  .has-js .mnt-arvo-equipamentos .mnt-arvo-equipamentos__badge,
  .has-js .mnt-arvo-equipamentos .mnt-arvo-equipamentos__cta-wrap,
  /* Soluções de Recarga (teaser) */
  .has-js .mnt-arvo-solucoes .mnt-arvo-solucoes__eyebrow,
  .has-js .mnt-arvo-solucoes .mnt-arvo-solucoes__headline,
  .has-js .mnt-arvo-solucoes .mnt-arvo-solucoes__lead,
  .has-js .mnt-arvo-solucoes .mnt-arvo-solucoes__range,
  .has-js .mnt-arvo-solucoes .mnt-arvo-solucoes__highlights,
  .has-js .mnt-arvo-solucoes .mnt-arvo-solucoes__cta-wrap,
  .has-js .mnt-arvo-solucoes__range-fill,
  /* Energia Limpa */
  .has-js .mnt-arvo-energia-limpa .mnt-arvo-eyebrow,
  .has-js .mnt-arvo-energia-limpa .mnt-arvo-energia-limpa__headline,
  .has-js .mnt-arvo-energia-limpa .mnt-arvo-energia-limpa__lead,
  .has-js .mnt-arvo-energia-limpa .mnt-arvo-energia-limpa__photo,
  .has-js .mnt-arvo-energia-limpa__item,
  /* Fechamento */
  .has-js .mnt-arvo-fechamento .mnt-arvo-fechamento__eyebrow,
  .has-js .mnt-arvo-fechamento .mnt-arvo-fechamento__headline,
  .has-js .mnt-arvo-fechamento .mnt-arvo-fechamento__lead,
  .has-js .mnt-arvo-fechamento .mnt-arvo-fechamento__whatsapp,
  .has-js .mnt-arvo-fechamento .mnt-arvo-fechamento__form-wrap,
  /* Pontos Ativos (página própria) */
  .has-js .mnt-arvo-pontos-ativos__hero,
  .has-js .mnt-arvo-pontos-ativos__stat,
  .has-js .mnt-arvo-pontos-ativos__ativos .mnt-arvo-pontos-ativos__section-head,
  .has-js .mnt-arvo-ponto-card,
  .has-js .mnt-arvo-pontos-ativos__em-breve .mnt-arvo-pontos-ativos__section-head,
  .has-js .mnt-arvo-pontos-ativos__cta {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
  }
  /* Ponto da faixa de potência (Soluções de Recarga) — ao contrário do
     resto da lista acima, aqui o objetivo é o oposto de "forçar visível":
     o preenchimento já aparece instantâneo e estático no mobile (regra
     acima), então um ponto ainda tentando se mover sobre ele leria como
     um artefato solto, não como o mesmo padrão "sem movimento ambiente"
     já estabelecido para esta seção no mobile. */
  .has-js .mnt-arvo-solucoes__range-dot {
    animation: none !important;
    opacity: 0 !important;
  }
  /* Ponto do trilho do eyebrow (Fechamento) — mesmo raciocínio: no mobile
     o eyebrow já aparece instantâneo pela regra acima, então o ponto
     nunca chega a animar. */
  .has-js .mnt-arvo-fechamento__flow-dot {
    animation: none !important;
    opacity: 0 !important;
  }
  /* Rede do Hero (Pontos Ativos) — mesmo raciocínio: o hero já aparece
     instantâneo pela regra acima, então os trilhos nascem completos
     (sem animação de "desenhar") e os nós não pulsam no mobile. */
  .mnt-arvo-pontos-ativos__rail {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .mnt-arvo-pontos-ativos__node rect {
    animation: none !important;
  }
}

/* ===================================================================
   PÁGINA INSTITUCIONAL — POLÍTICA DE PRIVACIDADE
   Página de leitura longa, sem motion/reveal (estática por design —
   "sem excesso de efeitos" foi pedido explícito do cliente para esta
   página). Reaproveita só tokens/cores já existentes em theme.json,
   nenhum valor novo hardcoded além do necessário para largura de leitura.
   Rodada 3: layout editorial em 2 colunas (índice lateral + conteúdo)
   a partir de 1024px; abaixo disso, chips horizontais (mesma técnica
   de dois <nav> HTML estáticos, um sempre display:none — zero JS,
   zero scrollspy, zero tab-stop duplicado).
   Rodada 4: polimento final — só espaçamento/tipografia/pequenos
   acentos (nenhuma mudança estrutural no grid, que já batia com as
   faixas pedidas). Ver DECISIONS.md. */
/* Rodada 5: o WP Core aplica margin-block-start:24px (spacing--6) a todo
   filho direto de .wp-site-blocks via `:where(.wp-site-blocks) > *`
   (especificidade zero, por causa do :where) — somava 24px escondidos
   antes do padding-top do hero. Zerado aqui na causa (não com margin
   negativa) porque essa margem de espaçamento-entre-blocos não faz
   sentido para o primeiro bloco de conteúdo da página, logo abaixo do
   header. */
.mnt-arvo-legal {
  margin-block-start: 0;
}
.mnt-arvo-legal__inner {
  /* --text-h1 (sem hífen) não existe — WP gera --text-h-1 para presets
     numéricos, mesmo bug documentado nas font-size--h2/h3 acima. */
  max-width: var(--wp--custom--width--text-h-1);
  margin-inline: auto;
  /* padding-top é a única fonte de espaço antes do hero — sem spacer,
     sem margin-top, sem min-height (header não soma nada, é sticky
     mas ocupa só sua própria altura no fluxo normal). Reduzido na
     Rodada 5 para aproximar o hero do header. */
  padding: 80px 24px 96px;
}
.mnt-arvo-legal__title {
  /* --h2 (sem hífen) nunca é gerado pelo WP para presets numéricos — usa-se
     --h-2, mesmo bug já documentado/corrigido em outras seções (ver linhas
     ~2250 e ~3007). */
  font-size: var(--wp--preset--font-size--h-2);
  font-weight: 900;
  line-height: 1.0;
  margin: 0 0 24px;
}
.mnt-arvo-legal__lead {
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.6;
  color: var(--wp--preset--color--on-surface-muted);
  /* max-width em text-h2 (720px, não text-lead) só porque cai na faixa
     700-760px pedida para o subtítulo do hero desta página específica.
     --text-h-2 (com hífen) é o nome real gerado pelo WP para esse preset
     numérico, mesmo bug já documentado em font-size--h-2/h-3 acima. */
  max-width: var(--wp--custom--width--text-h-2);
  margin: 0 0 16px;
  /* O grupo pai usa layout:"constrained", e o Core injeta
     margin-left/right:auto!important em todo filho direto — isso
     centralizava este parágrafo (mais estreito que o container).
     Sobrescrever para 0 (não auto) mantém alinhamento à esquerda. */
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.mnt-arvo-legal__updated {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--wp--preset--font-size--caption);
  color: var(--wp--preset--color--on-surface-muted);
  opacity: 0.7;
  margin: 0 0 48px;
}

/* Índice em chips — visível <1024px (≥1024px vira sidebar, ver abaixo).
   Links HTML estáticos direto no template, sem JS/scrollspy. Padding
   generoso para alvo de toque confortável em tablet/mobile. */
.mnt-arvo-legal__toc {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 64px;
}
.mnt-arvo-legal__toc-link {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 600;
  color: var(--wp--preset--color--on-surface-muted);
  text-decoration: none;
  background: var(--wp--preset--color--wet-graphite);
  border: 1px solid var(--wp--custom--color--border-subtle);
  border-radius: var(--wp--custom--radius--full);
  padding: 16px 24px;
  transition: color var(--wp--custom--duration--micro) var(--wp--custom--easing--out),
    border-color var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
}
.mnt-arvo-legal__toc-link:hover {
  color: var(--wp--preset--color--on-surface);
  border-color: var(--wp--custom--color--border-medium);
}
.mnt-arvo-legal__toc-link:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 2px;
  color: var(--wp--preset--color--on-surface);
}

/* Grid de 2 colunas — só ativa em desktop (media query mais abaixo).
   Mobile/tablet: fluxo normal, sidebar fica display:none. */
.mnt-arvo-legal__layout {
  display: block;
}
.mnt-arvo-legal__sidebar {
  display: none;
}

/* Índice lateral (sidebar) — mesmos 13 links dos chips, em formato
   vertical com número + nome curto, mais "Voltar ao topo". Rail
   (borda esquerda) marca a coluna toda; cada link ganha sua própria
   borda esquerda de 2px, que acende em verde no hover/focus — mesma
   linguagem de "trilho" já usada na Home, mas 100% estática (sem o
   ponto animado de .mnt-arvo-trail, que depende de JS). */
.mnt-arvo-legal__sidebar-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--on-surface-muted);
  padding: 0 0 16px 16px;
}
.mnt-arvo-legal__sidebar-nav {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--wp--custom--color--border-subtle);
}
.mnt-arvo-legal__sidebar-link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0 12px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--wp--preset--font-size--body-sm);
  color: var(--wp--preset--color--on-surface-muted);
  text-decoration: none;
  transition: color var(--wp--custom--duration--micro) var(--wp--custom--easing--out),
    border-color var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
}
.mnt-arvo-legal__sidebar-num {
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--brand-provisional);
  flex-shrink: 0;
}
.mnt-arvo-legal__sidebar-name {
  font-weight: var(--wp--custom--font-weight--medium);
}
.mnt-arvo-legal__sidebar-link:hover {
  color: var(--wp--preset--color--on-surface);
  border-left-color: var(--wp--preset--color--brand-provisional);
}
.mnt-arvo-legal__sidebar-link:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: -2px;
  color: var(--wp--preset--color--on-surface);
}
.mnt-arvo-legal__sidebar-back {
  display: block;
  width: fit-content;
  margin-top: 20px;
  padding: 20px 0 0 16px;
  border-top: 1px solid var(--wp--custom--color--border-subtle);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--on-surface-muted);
  text-decoration: none;
}
.mnt-arvo-legal__sidebar-back:hover {
  color: var(--wp--preset--color--brand-provisional);
}
.mnt-arvo-legal__sidebar-back:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 2px;
}

/* Título de seção — número editorial (verde, pequeno) empilhado acima
   do título (branco, grande), não colado na mesma linha. */
.mnt-arvo-legal__section-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 700;
  line-height: 1.2;
  margin: 80px 0 24px;
  padding-top: 48px;
  border-top: 1px solid var(--wp--custom--color--border-subtle);
  scroll-margin-top: 90px;
}
.mnt-arvo-legal__content > .mnt-arvo-legal__section-title:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.mnt-arvo-legal__section-num {
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--brand-provisional);
  transition: color var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
}
.mnt-arvo-legal__section-heading {
  font-size: var(--wp--preset--font-size--h-3);
}
/* :target (sem JS) — quando se chega via âncora, o número da seção
   acende num verde mais claro. Não é scrollspy: só reage à própria
   navegação nativa por âncora, exatamente como pedido. */
.mnt-arvo-legal__section-title:target .mnt-arvo-legal__section-num {
  color: var(--wp--preset--color--brand-hover-provisional);
}

.mnt-arvo-legal__content p,
.mnt-arvo-legal__content li {
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.7;
}
.mnt-arvo-legal__content p,
.mnt-arvo-legal__content ul {
  max-width: var(--wp--custom--width--text-body);
  margin: 0 0 32px;
}
.mnt-arvo-legal__content ul {
  padding-left: 22px;
}
.mnt-arvo-legal__content li {
  margin-bottom: 16px;
}
.mnt-arvo-legal__content a {
  text-underline-offset: 2px;
}
.mnt-arvo-legal__content a:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Card destacado — dados do controlador (seção 1). */
.mnt-arvo-legal__card {
  max-width: var(--wp--custom--width--text-body);
  background: var(--wp--preset--color--wet-graphite-card);
  border: 1px solid var(--wp--custom--color--border-subtle);
  border-top-width: 2px;
  border-top-color: var(--wp--preset--color--brand-provisional);
  border-radius: var(--wp--custom--radius--md);
  padding: 28px 32px;
  margin: 0 0 24px;
  box-shadow: var(--wp--preset--shadow--card-hover);
}
.mnt-arvo-legal__card-kicker {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-provisional);
  margin-bottom: 16px;
}
.mnt-arvo-legal__card-kicker::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--wp--custom--radius--full);
  background: var(--wp--preset--color--brand-provisional);
  margin-right: 8px;
  vertical-align: middle;
}
.mnt-arvo-legal__card-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}
.mnt-arvo-legal__card-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
}
.mnt-arvo-legal__card-row dt {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--on-surface-muted);
}
.mnt-arvo-legal__card-row dd {
  margin: 0;
  color: var(--wp--preset--color--on-surface);
  line-height: 1.5;
}

/* Caixa neutra — variação estrutural para listas de seções específicas
   (Dados técnicos, Cookies, Terceiros, Direitos do titular). Sem label,
   sem cor de destaque — só agrupamento visual, quebra a monotonia sem
   virar mais um card verde. */
.mnt-arvo-legal__list-box {
  background: var(--wp--preset--color--wet-graphite);
  border: 1px solid var(--wp--custom--color--border-subtle);
  border-radius: var(--wp--custom--radius--md);
  padding: 20px 24px;
  margin: 0 0 24px;
}
.mnt-arvo-legal__list-box ul {
  margin: 0;
}
.mnt-arvo-legal__list-box li:last-child {
  margin-bottom: 0;
}

/* Callout discreto — notas de transparência que já existiam no texto. */
.mnt-arvo-legal__callout {
  max-width: var(--wp--custom--width--text-body);
  background: var(--wp--preset--color--wet-graphite-info);
  border-left: 3px solid var(--wp--preset--color--brand-provisional);
  border-radius: var(--wp--custom--radius--md);
  padding: 20px 24px;
  margin: 0 0 24px;
}
.mnt-arvo-legal__callout-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-provisional);
  margin-bottom: 6px;
}
.mnt-arvo-legal__callout p {
  max-width: none;
  margin: 0;
}

/* Desktop — liga o grid de 2 colunas e a sidebar sticky; esconde os
   chips (a sidebar assume o papel de índice). top:96px ≈ header
   (72px, main.css:50) + folga, mesmo raciocínio já usado no
   scroll-margin-top:90px das âncoras em toda a página. */
@media (min-width: 1024px) {
  .mnt-arvo-legal__inner {
    max-width: 1160px;
    padding: 120px 40px 120px;
  }
  .mnt-arvo-legal__toc {
    display: none;
  }
  .mnt-arvo-legal__layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 740px);
    gap: 80px;
    align-items: start;
    margin-top: 32px;
  }
  .mnt-arvo-legal__sidebar {
    display: block;
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 96px - 40px);
    overflow-y: auto;
  }
}

@media (max-width: 767px) {
  .mnt-arvo-legal__inner {
    padding: 64px 20px 64px;
  }
  .mnt-arvo-legal__section-title {
    margin-top: 48px;
    padding-top: 32px;
  }
  .mnt-arvo-legal__card,
  .mnt-arvo-legal__callout,
  .mnt-arvo-legal__list-box {
    padding: 20px;
  }
  .mnt-arvo-legal__card-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ===================================================================
   PÁGINA — PONTOS ATIVOS (/pontos-ativos/)
   Página própria, fora da Home. Sem seção nova na Home, sem tokens
   novos — reaproveita paleta, spacing, radius, duration/easing e o
   vocabulário "ARVO ENERGY RAIL" (main.css:325) já existentes. Dados
   dos pontos: ver templates/page-pontos-ativos.html e
   project-docs/PONTOS_ATIVOS.md. Mesmo fix de margin-block-start do
   Core já documentado para .mnt-arvo-legal (main.css:4768).
   =================================================================== */
.mnt-arvo-pontos-ativos {
  margin-block-start: 0;
}
.mnt-arvo-pontos-ativos__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: 96px 40px 0;
}

/* --- Hero --- */
.mnt-arvo-pontos-ativos__hero {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-bottom: 96px;
}
.mnt-arvo-pontos-ativos__hero-copy {
  flex: 1 1 480px;
  min-width: 0;
}
.mnt-arvo-pontos-ativos__headline {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 900;
  line-height: 0.98;
  color: var(--wp--preset--color--on-surface);
  margin: 0 0 20px;
}
.mnt-arvo-pontos-ativos__accent {
  color: var(--wp--preset--color--brand-provisional);
}
.mnt-arvo-pontos-ativos__lead {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--wp--preset--font-size--lead);
  font-weight: var(--wp--custom--font-weight--semibold);
  line-height: 1.35;
  color: var(--wp--preset--color--on-surface);
  margin: 0 0 12px;
}
.mnt-arvo-pontos-ativos__region {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--wp--preset--font-size--body);
  color: var(--wp--preset--color--on-surface-muted);
  margin: 0;
}
.mnt-arvo-pontos-ativos__network {
  flex: 1 1 320px;
  min-width: 0;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}
.mnt-arvo-pontos-ativos__network svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mnt-arvo-pontos-ativos__rail {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.mnt-arvo-pontos-ativos__node rect {
  fill: var(--wp--preset--color--brand-provisional);
  filter: drop-shadow(0 0 8px rgba(34,204,34,0.6));
}
.mnt-arvo-pontos-ativos__node--main rect {
  filter: drop-shadow(0 0 10px rgba(34,204,34,0.5));
}

/* Motion do hero: trilhos "se desenham" uma vez ao entrar na tela, nós
   pulsam suavemente em loop (glow dentro do teto documentado em
   DESIGN.md §8: blur ≤20px, opacidade ≤40-60% já usada em .mnt-arvo-trail).
   Puramente decorativo/conceitual — sem coordenadas geográficas reais. */
@keyframes mnt-arvo-pontos-ativos-draw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
@keyframes mnt-arvo-pontos-ativos-node-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.35); }
}
@media (prefers-reduced-motion: no-preference) {
  .has-js .mnt-arvo-pontos-ativos__rail {
    stroke-dashoffset: 100;
  }
  .has-js .mnt-arvo-pontos-ativos__hero.is-visible .mnt-arvo-pontos-ativos__rail {
    animation: mnt-arvo-pontos-ativos-draw 1400ms var(--wp--custom--easing--out) forwards;
  }
  .has-js .mnt-arvo-pontos-ativos__hero.is-visible .mnt-arvo-pontos-ativos__rail:nth-of-type(2) { animation-delay: 200ms; }
  .has-js .mnt-arvo-pontos-ativos__hero.is-visible .mnt-arvo-pontos-ativos__rail:nth-of-type(3) { animation-delay: 400ms; }
  .has-js .mnt-arvo-pontos-ativos__hero.is-visible .mnt-arvo-pontos-ativos__node rect {
    animation: mnt-arvo-pontos-ativos-node-pulse 2600ms ease-in-out infinite;
    animation-delay: var(--node-delay, 0s);
    transform-origin: center;
  }
}

/* --- Reveal do Hero (fade único, mesmo padrão de Segmentos/Equipamentos) --- */
@media (prefers-reduced-motion: no-preference) {
  .has-js .mnt-arvo-pontos-ativos__hero {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--wp--custom--duration--medium) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--medium) var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-pontos-ativos__hero.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* --- Faixa de dados --- */
.mnt-arvo-pontos-ativos__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  margin: 0;
  padding: 40px 0;
  border-top: 1px solid var(--wp--custom--color--border-subtle);
  border-bottom: 1px solid var(--wp--custom--color--border-subtle);
}
.mnt-arvo-pontos-ativos__stat {
  flex: 1 1 auto;
  min-width: 120px;
}
.mnt-arvo-pontos-ativos__stat dt {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--wp--preset--font-size--stat);
  font-weight: 900;
  line-height: 1;
  color: var(--wp--preset--color--brand-provisional);
  margin: 0 0 8px 0;
  font-variant-numeric: tabular-nums;
}
.mnt-arvo-pontos-ativos__stat dt.mnt-arvo-count-settle {
  /* @keyframes mnt-arvo-stat-settle já definido em Credibilidade (main.css:818) */
}
@media (prefers-reduced-motion: no-preference) {
  .mnt-arvo-pontos-ativos__stat dt.mnt-arvo-count-settle {
    animation: mnt-arvo-stat-settle 420ms var(--wp--custom--easing--out);
  }
}
.mnt-arvo-pontos-ativos__stat dd {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--wp--preset--font-size--caption);
  font-weight: var(--wp--custom--font-weight--semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--on-surface-muted);
  margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .has-js .mnt-arvo-pontos-ativos__stat {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity var(--wp--custom--duration--short) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--short) var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-pontos-ativos__stat.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* --- Seções "Já funcionando" / "Em breve" --- */
.mnt-arvo-pontos-ativos__ativos,
.mnt-arvo-pontos-ativos__em-breve {
  padding: 96px 0;
}
.mnt-arvo-pontos-ativos__em-breve {
  padding-top: 64px;
}
.mnt-arvo-pontos-ativos__section-title {
  font-size: var(--wp--preset--font-size--h-2);
  font-weight: 900;
  line-height: 1.05;
  color: var(--wp--preset--color--on-surface);
  margin: 0 0 12px;
}
.mnt-arvo-pontos-ativos__section-lead {
  font-size: var(--wp--preset--font-size--body);
  color: var(--wp--preset--color--on-surface-muted);
  margin: 0 0 40px;
}
.mnt-arvo-pontos-ativos__em-breve .mnt-arvo-pontos-ativos__section-title {
  margin-bottom: 40px;
}

/* Grid mobile-first — flex-wrap (mesma técnica de Equipamentos/Segmentos),
   2 colunas ≥768px, 1 coluna abaixo disso. Sem CSS Grid, sem tabela. */
.mnt-arvo-pontos-ativos__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.mnt-arvo-ponto-card {
  flex: 1 1 calc(50% - 10px);
  min-width: 260px;
  background: var(--wp--preset--color--wet-graphite-card);
  border: 1px solid transparent;
  border-radius: var(--wp--custom--radius--md);
  padding: 24px;
  box-sizing: border-box;
  transition:
    border-color 200ms var(--wp--custom--easing--out),
    background-color 200ms var(--wp--custom--easing--out);
}
.mnt-arvo-ponto-card:hover {
  border-color: rgba(255,255,255,0.24);
  background: var(--wp--preset--color--wet-graphite-card-hover);
}
.mnt-arvo-ponto-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.mnt-arvo-ponto-card__number {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--on-surface-muted);
}
.mnt-arvo-ponto-card__pin {
  width: 20px;
  height: 20px;
  color: var(--wp--preset--color--brand-provisional);
  flex-shrink: 0;
}
.mnt-arvo-ponto-card__name {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: var(--wp--custom--font-weight--bold);
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--on-surface);
  margin: 0 0 8px;
}
.mnt-arvo-ponto-card__address {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--wp--preset--color--on-surface-muted);
  margin: 0 0 20px;
}
.mnt-arvo-ponto-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.mnt-arvo-ponto-card__badge {
  display: inline-flex;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--wp--custom--radius--full);
}
.mnt-arvo-ponto-card__badge--24h {
  background: rgba(255,255,255,0.08);
  color: var(--wp--preset--color--on-surface);
}
.mnt-arvo-ponto-card__badge--ativo {
  background: rgba(34,204,34,0.16);
  color: var(--wp--preset--color--brand-provisional);
}
.mnt-arvo-ponto-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid var(--wp--preset--color--brand-provisional);
  color: var(--wp--preset--color--brand-provisional);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 4px;
  transition:
    background-color var(--wp--custom--duration--micro) var(--wp--custom--easing--out),
    color var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
}
.mnt-arvo-ponto-card__cta:hover {
  background-color: var(--wp--preset--color--brand-provisional);
  color: #000000;
}
.mnt-arvo-ponto-card__cta:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 2px;
}

/* Modificador "Em breve" — estética diferenciada, sem badge 24h, sem CTA
   de rota (não faz sentido traçar rota até um ponto que ainda não opera). */
.mnt-arvo-ponto-card--em-breve {
  background: transparent;
  border-style: dashed;
  border-color: var(--wp--custom--color--border-medium);
}
.mnt-arvo-ponto-card--em-breve:hover {
  background: rgba(255,255,255,0.03);
  border-color: var(--wp--custom--color--border-medium);
}
.mnt-arvo-ponto-card--em-breve .mnt-arvo-ponto-card__name,
.mnt-arvo-ponto-card--em-breve .mnt-arvo-ponto-card__address {
  opacity: 0.72;
}
.mnt-arvo-ponto-card--em-breve .mnt-arvo-ponto-card__pin {
  color: var(--wp--preset--color--on-surface-muted);
}
.mnt-arvo-ponto-card__badge--em-breve {
  background: rgba(255,255,255,0.06);
  color: var(--wp--preset--color--on-surface-muted);
  border: 1px solid var(--wp--custom--color--border-medium);
}

/* Reveal com stagger — mesmo padrão de Benefícios/Equipamentos (80ms). */
@media (prefers-reduced-motion: no-preference) {
  .has-js .mnt-arvo-pontos-ativos__ativos .mnt-arvo-pontos-ativos__section-head,
  .has-js .mnt-arvo-pontos-ativos__em-breve .mnt-arvo-pontos-ativos__section-head {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--wp--custom--duration--medium) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--medium) var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-pontos-ativos__ativos.is-visible .mnt-arvo-pontos-ativos__section-head,
  .has-js .mnt-arvo-pontos-ativos__em-breve.is-visible .mnt-arvo-pontos-ativos__section-head {
    opacity: 1;
    transform: none;
  }
  .has-js .mnt-arvo-ponto-card {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--wp--custom--duration--medium) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--medium) var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-ponto-card.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* --- CTA final --- */
.mnt-arvo-pontos-ativos__cta {
  padding: 96px 0 120px;
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.mnt-arvo-pontos-ativos__cta .mnt-arvo-eyebrow {
  align-items: center;
}
.mnt-arvo-pontos-ativos__cta-headline {
  font-size: var(--wp--preset--font-size--h-2);
  font-weight: 900;
  line-height: 1.05;
  color: var(--wp--preset--color--on-surface);
  margin: 0 0 16px;
}
.mnt-arvo-pontos-ativos__cta-text {
  font-size: var(--wp--preset--font-size--body);
  color: var(--wp--preset--color--on-surface-muted);
  line-height: 1.6;
  margin: 0 0 32px;
}
.mnt-arvo-pontos-ativos__cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--wp--preset--color--brand-provisional);
  color: #000000;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 36px;
  border-radius: 4px;
  transition: background-color var(--wp--custom--duration--micro) var(--wp--custom--easing--out);
}
.mnt-arvo-pontos-ativos__cta-primary:hover {
  background-color: var(--wp--preset--color--brand-hover-provisional);
  box-shadow: 0 0 12px rgba(34,204,34,0.3);
  color: #000000;
}
.mnt-arvo-pontos-ativos__cta-primary:active {
  background-color: var(--wp--preset--color--brand-pressed-provisional);
}
.mnt-arvo-pontos-ativos__cta-primary:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-provisional);
  outline-offset: 4px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: no-preference) {
  .has-js .mnt-arvo-pontos-ativos__cta {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--wp--custom--duration--medium) var(--wp--custom--easing--out),
      transform var(--wp--custom--duration--medium) var(--wp--custom--easing--out);
  }
  .has-js .mnt-arvo-pontos-ativos__cta.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* --- Tablet (768–1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .mnt-arvo-pontos-ativos__inner {
    padding: 80px 32px 0;
  }
  .mnt-arvo-pontos-ativos__hero {
    gap: 40px;
  }
  .mnt-arvo-pontos-ativos__network {
    max-width: 280px;
  }
}

/* --- Mobile (≤767px) --- */
@media (max-width: 767px) {
  .mnt-arvo-pontos-ativos__inner {
    padding: 64px 20px 0;
  }
  .mnt-arvo-pontos-ativos__hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding-bottom: 64px;
  }
  .mnt-arvo-pontos-ativos__network {
    max-width: 220px;
    margin-inline: 0;
  }
  .mnt-arvo-pontos-ativos__stats {
    flex-direction: column;
    gap: 20px;
    padding: 32px 0;
  }
  .mnt-arvo-pontos-ativos__ativos,
  .mnt-arvo-pontos-ativos__em-breve {
    padding: 64px 0;
  }
  .mnt-arvo-ponto-card {
    flex: 1 1 100%;
  }
  .mnt-arvo-pontos-ativos__cta {
    padding: 64px 0 80px;
  }
}