/* ==================================================================
   MP6 · IDENTIDADE PROFISSIONAL (V7.86)
   ------------------------------------------------------------------
   O PROBLEMA QUE ESTE ARQUIVO RESOLVE

   O site foi crescendo por paginas e cada uma nasceu com o visual da
   epoca: titulo de 72px com brilho neon, cartao com gradiente e glow,
   particles e "laser flow" animados no hero, botao com sombra colorida,
   raio de 28px, botoes de DEBUG da faixa 3D ("video", "2x", "girar",
   "modo leve", "recolher") aparecendo para o VISITANTE.

   Nada disso e' "bonito": e' cara de prototipo. Quem chega para comprar
   compara com mesa de verdade e desconfia.

   A REFERENCIA (thprop.com.br), medida no navegador:
     fundo  rgb(5,7,10)      Inter, h1 40px PESO 500 (nao 900)
     texto  rgb(198,205,211) numeros em monospace
     rotulo de secao em caixa alta, 11px, espacado
     cartao de borda 1px, sem gradiente e sem brilho
     verde/acento so' em detalhe e no CTA

   COMO ESTE ARQUIVO ENTRA

   1) TOKENS: redefine :root (o site inteiro ja' bebe nesses nomes).
   2) DE-GLOW: zera brilho, gradiente de cartao, particles e laser.
   3) TIPOGRAFIA: contei o problema no DOM da home - 191 elementos
      com font-size INLINE e 96 com font-weight inline, 13 deles com
      30px ou mais (h1 de 72px/900). Estilo inline ganha de folha de
      estilo, entao aqui se usa seletor de ATRIBUTO
      ([style*="font-weight: 900"]) com !important: e' o unico jeito
      de conter o que esta' escrito no HTML sem reescrever o React.
   4) PRIMITIVAS .pro-*: rotulo, regua, painel, numero, aviso legal -
      para a pagina ter vocabulario institucional.
   5) FAIXA 3D: os controles de QA saem da vista do visitante; continuam
      acessiveis para quem audita (?3d=dev ou tecla "d", ver mp6_pro.js).

   Este arquivo e' publicado pelo mp6_site_pro_patch.py e conferido pelo
   mp6_site_pro_testes.py. Editar aqui e' editar o site inteiro.
   ================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  --pro-bg:        #05070A;
  --pro-bg-2:      #070A0E;
  --pro-surface:   #0A0E13;
  --pro-surface-2: #0D1218;
  --pro-line:      rgba(255, 255, 255, .08);
  --pro-line-2:    rgba(255, 255, 255, .14);
  --pro-text:      #E9EEF1;
  --pro-text-2:    #C6CDD3;
  --pro-text-3:    rgba(255, 255, 255, .42);
  --pro-accent:    #00E59B;
  --pro-accent-d:  #00B97A;
  --pro-danger:    #F87171;
  --pro-gold:      #E0B03C;
  --pro-r:         10px;
  --pro-r-lg:      14px;

  /* os nomes que o site inteiro ja' usa */
  --bg:            var(--pro-bg);
  --bg-tint:       var(--pro-bg-2);
  --surface:       var(--pro-surface);
  --surface-2:     var(--pro-surface-2);
  --surface-green: var(--pro-surface);
  --line:          var(--pro-line);
  --primary:       var(--pro-accent);
  --primary-rgb:   0, 229, 155;
  --primary-deep:  var(--pro-accent-d);
  --text:          var(--pro-text);
  --text-dim:      var(--pro-text-3);
  --cyan:          var(--pro-text-2);
  --violet:        var(--pro-text-2);
  --gold:          var(--pro-gold);
  --danger:        var(--pro-danger);
}

/* ------------------------------------------------------- 2. BASE E DE-GLOW */
html { scroll-behavior: smooth; }

body {
  background: var(--pro-bg) !important;
  background-image: none !important;
  color: var(--pro-text-2) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 400;
  letter-spacing: 0;
}

/* a malha de 56px e o gradiente radial davam "papel de parede de gamer" */
body::before,
body::after { background-image: none !important; opacity: 0 !important; }

/* Hero: particulas, laser e os dois blobs verdes.

   ATENCAO - AQUI JA' QUEBROU A HOME (medido, nao suposto): esconder o canvas
   .laser-flow com display:none deixa a caixa dele com 0x0; o desenho em React
   entao calcula um gradiente radial com valor NAO FINITO e lanca
   "Failed to execute 'createRadialGradient' ... non-finite" - o erro sobe pelo
   React e a home inteira deixa de renderizar (tela com so' a faixa 3D).

   Por isso estes fundos ficam INVISIVEIS, mas continuam ocupando o espaco:
   opacity:0 mantem a geometria (o desenho nao quebra) e pointer-events:none
   tira o clique. "display:none" so' onde o elemento nao e' desenhado por
   canvas que mede a propria caixa - as particulas sao divs com animacao CSS. */
.particle { display: none !important; }
.laser-flow,
.liquid-ether,
.aurora,
.noise-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
}

.hero-glow { opacity: .16 !important; filter: none !important; }

::selection { background: rgba(0, 229, 155, .22) !important; color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--pro-bg); }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-radius: 8px;
  border: 2px solid var(--pro-bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .22); }

/* qualquer brilho colorido grande que tenha sobrado */
[class*="glow"] { text-shadow: none; }

/* ------------------------------------------------------------- 3. TIPOGRAFIA */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3 {
  color: var(--pro-text) !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
  line-height: 1.15 !important;
  text-shadow: none !important;
}

h1, .h1 { font-weight: 500 !important; }

p, li, span, label, td, th, small { text-shadow: none; }

/* Contencao do que esta' escrito INLINE no HTML (ver comentario no topo).
   Estilo inline vence folha de estilo: aqui a unica saida e' !important. */
[style*="font-weight: 900"], [style*="font-weight:900"] { font-weight: 600 !important; }
[style*="font-weight: 800"], [style*="font-weight:800"] { font-weight: 600 !important; }
[style*="font-weight: 700"], [style*="font-weight:700"] { font-weight: 500 !important; }
[style*="letter-spacing: -"], [style*="letter-spacing:-"] { letter-spacing: -.015em !important; }

/* ------------------------------------------------------------------
   ESCALA TIPOGRAFICA.
   As medidas abaixo NAO foram inventadas: sao os valores que existem de
   fato no site, lidos dos 35 templates servidos (python -c com regex
   'clamp\([^)\']*\)' e 'fontSize: [0-9]+').

   Antes -> agora (o que o visitante ve):
     h1 da home      clamp(40,6vw,72) / 900  ->  clamp(30,4.2vw,48) / 600
     h2 de secao     clamp(28,4vw,42)  / 800  ->  clamp(22,2.6vw,30) / 600
     numero do KPI   36px / 900              ->  28px / 600
     preco do plano  36px / 900              ->  28px / 600

   Por que nao um "h1 { font-size: ... }" generico: o tamanho NAO esta' no
   h1 - esta' no atributo style do proprio elemento. Sem estes seletores
   de atributo o titulo continua saindo com 72px de peso 900.
   ------------------------------------------------------------------ */
[style*="clamp(40px, 6vw, 72px)"] {
  font-size: clamp(30px, 4.2vw, 48px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
}
[style*="clamp(36px, 5vw, 56px)"] {
  font-size: clamp(26px, 3.2vw, 40px) !important;
  line-height: 1.1 !important;
}
[style*="clamp(30px, 4.4vw, 46px)"] {
  font-size: clamp(22px, 2.8vw, 34px) !important;
  line-height: 1.15 !important;
}
[style*="clamp(28px, 4vw, 42px)"],
[style*="clamp(28px, 4vw, 40px)"],
[style*="clamp(28px, 4.4vw, 44px)"] {
  font-size: clamp(22px, 2.6vw, 30px) !important;
  line-height: 1.18 !important;
}
[style*="clamp(28px, 4vw, 36px)"],
[style*="clamp(28px,4vw,36px)"],
[style*="clamp(24px, 3.5vw, 36px)"],
[style*="clamp(24px,4vw,32px)"] {
  font-size: clamp(20px, 2.4vw, 28px) !important;
  line-height: 1.2 !important;
}
[style*="clamp(20px, 2.6vw, 28px)"] {
  font-size: clamp(17px, 2.2vw, 24px) !important;
  line-height: 1.25 !important;
}
/* numeros e precos em px redondo: entram em degraus, nao em salto */
[style*="font-size: 36px"], [style*="font-size:36px"] { font-size: 28px !important; line-height: 1.1 !important; }
[style*="font-size: 32px"], [style*="font-size:32px"] { font-size: 25px !important; }
[style*="font-size: 28px"], [style*="font-size:28px"] { font-size: 22px !important; }
[style*="font-size: 24px"], [style*="font-size:24px"] { font-size: 20px !important; }
[style*="font-size: 22px"], [style*="font-size:22px"] { font-size: 19px !important; line-height: 1.25 !important; }
[style*="font-size: 20px"], [style*="font-size:20px"] { font-size: 17px !important; }
[style*="font-size: 18px"], [style*="font-size:18px"] { font-size: 16px !important; }

/* hero de tela cheia empurra a proposta para baixo da dobra */
section[style*="min-height: 100vh"],
section[style*="min-height:100vh"],
section[style*="min-height: 100dvh"],
header[style*="min-height: 100vh"] {
  min-height: auto !important;
  padding-top: 84px !important;
  padding-bottom: 76px !important;
}
section[style*="min-height: 90vh"],
div[style*="min-height: 100vh"] { min-height: auto !important; }

/* respiro das secoes: o site tinha padding apertado e sem regua */
section { padding-top: 68px; padding-bottom: 68px; }
section + section { border-top: 1px solid var(--pro-line); }

/* ------------------------------------------------------------- 4. SUPERFICIES */
.stat-card, .glass, .card, .plan-card, .bg-card, .chroma-card,
.reflective-card, .scroll-stack-item, .price-card, .feature-card,
.login-card, [class*="tilt-card"] {
  background: var(--pro-surface) !important;
  background-image: none !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-r-lg) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.stat-card:hover, .card:hover, .plan-card:hover, .bg-card:hover,
.feature-card:hover, .price-card:hover {
  border-color: var(--pro-line-2) !important;
  box-shadow: none !important;
  transform: none !important;
}
.hover-lift:hover, .glass:hover { box-shadow: none !important; }

/* cartao destacado (plano recomendado) continua se destacando - por borda e
   nao por brilho */
.plan-card.destaque, .plan-card.popular, .plan-card.featured, .card-destaque {
  border-color: rgba(0, 229, 155, .45) !important;
}
.chroma-overlay, .edge-light, .eb-glow-1, .eb-glow-2, .eb-background-glow {
  display: none !important;
}
.reflective-gradient, .gooey-bg, .eb-canvas-container { opacity: .25 !important; }

/* ---------------------------------------------------------------- 5. BOTOES */
.btn-primary, .btn-gold, .header-btn-buy, .btn-cta,
a.cta, .mp6nav .links a.cta, .mp6nav .menu a.cta, button[class*="btn-primary"] {
  background: var(--pro-accent) !important;
  background-image: none !important;
  color: #05100C !important;
  border: 1px solid var(--pro-accent) !important;
  border-radius: var(--pro-r) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
  text-shadow: none !important;
}
.btn-primary:hover, .btn-gold:hover, .header-btn-buy:hover, a.cta:hover {
  background: var(--pro-accent-d) !important;
  border-color: var(--pro-accent-d) !important;
  color: #05100C !important;
  transform: none !important;
  box-shadow: none !important;
}

.btn-outline, .btn-secondary, .header-btn-login, .header-btn-ghost,
button[class*="btn-outline"] {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--pro-line-2) !important;
  border-radius: var(--pro-r) !important;
  color: var(--pro-text) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}
.btn-outline:hover, .btn-secondary:hover, .header-btn-login:hover {
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(0, 229, 155, .5) !important;
  color: var(--pro-text) !important;
  transform: none !important;
}

button, .btn, input[type="submit"] { border-radius: var(--pro-r) !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(0, 229, 155, .55);
  outline-offset: 2px;
}

/* ------------------------------------------------- 6. NAV, SELO, RODAPE */
.mp6nav .bar {
  background: rgba(5, 7, 10, .88) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--pro-line) !important;
}
.mp6nav .logo {
  background: var(--pro-accent) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}
.mp6nav .links a { font-weight: 500 !important; border-radius: var(--pro-r) !important; }
.mp6nav .links a.cta { border-radius: var(--pro-r) !important; }
.mp6nav .foot { border-top: 1px solid var(--pro-line) !important; }
.mp6nav .foot a { font-weight: 400 !important; }

.topbar, .navbar, header.sticky, .site-header {
  background: rgba(5, 7, 10, .88) !important;
  border-bottom: 1px solid var(--pro-line) !important;
  box-shadow: none !important;
}

/* badge/pill: em vez de pirulito neon, um selo de borda fina */
.badge, .pill, .tag, .mp6nav .bar .links a.on, [class*="badge"] {
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------- 7. TABELA COMPARATIVA */
table { border-collapse: collapse; }
table th {
  color: var(--pro-text-3) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
  border-bottom: 1px solid var(--pro-line-2) !important;
  background: transparent !important;
}
table td {
  border-bottom: 1px solid var(--pro-line) !important;
  color: var(--pro-text-2);
  font-variant-numeric: tabular-nums;
}
table tr:hover td { background: rgba(255, 255, 255, .02); }
.comparison-table .highlight-col { background: rgba(0, 229, 155, .05) !important; }
.comparison-table .check { color: var(--pro-accent) !important; }

/* numeros em monospace, alinhados na vertical (leitura de mesa) */
.pro-num, .stat-value, .kpi-value, .price-value, [class*="-value"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* ------------------------------------------------- 8. FAIXA 3D (DE-GLOW) */
/* ATENCAO AO NOME: a classe e' .mp6d3-faixa (mp6_3d.js: cria("section",
   "mp6d3-faixa")). Uma regra escrita para ".mp6d3-secao" nao casa com nada -
   regra morta nao da erro, so' nao faz efeito: por isso o nome aqui saiu do
   codigo, nao da memoria. */
.mp6d3-faixa { border-bottom: 1px solid var(--pro-line) !important; }

/* A FAIXA DENTRO DE UM BODY QUE E' FLEX
   Medido em 6 templates (login, activate, download_ea, eula, order_status,
   success): o body e' `display:flex; justify-content:center; align-items:center`
   e a faixa 3D entra como FILHA do body. No navegador isso da' a faixa e o
   cartao LADO A LADO, com o cartao empurrado para a direita (a tela de entrada
   do admin ficou assim depois do V7.85).
   Conserto: a faixa toma a linha inteira (flex-basis 100%) e as linhas do flex
   param de esticar altura (align-content:flex-start) - o conteudo desce e segue
   centralizado na horizontal. Em body que nao e' flex, as duas regras nao tem
   efeito nenhum. */
body { flex-wrap: wrap; align-content: flex-start; }
body > .mp6d3-faixa { flex: 0 0 100% !important; width: 100% !important; }
.mp6d3-selo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  color: var(--pro-text-3) !important;
  opacity: .85 !important;
  text-shadow: none !important;
}

/* Os botoes de QA ("video", "2x", "girar", "modo leve", "recolher") apareciam
   para o VISITANTE: e' a prova mais barata de que o site e' prototipo. Ficam
   fora da vista e voltam para quem audita com ?3d=dev ou a tecla "d". */
.mp6d3-controles { display: none !important; }
html.mp6pro-dev .mp6d3-controles { display: flex !important; }
/* ATENCAO AO ESCOPO: o runtime 3D (mp6_3d.js) marca com a classe
   .mp6d3-botao NAO SO' os controles da faixa - ele marca tambem todo CTA do
   site, para dar relevo. Com a regra sem escopo, ela vencia o .btn-primary
   (mesma especificidade, mais adiante no arquivo) e o botao verde do plano
   virava um botao cinza escuro. Medido: bg=rgba(5,7,10,.82) no "Adquirir".
   Por isso o estilo dos controles de QA vive SO' dentro de .mp6d3-controles. */
.mp6d3-controles .mp6d3-botao {
  background: rgba(5, 7, 10, .82) !important;
  border: 1px solid var(--pro-line-2) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  color: var(--pro-text-2) !important;
}

/* o relevo/relevo-luz que o runtime aplica nos CTA some: mesa nao tem botao
   com brilho deslizante */
a.mp6d3-botao, button.mp6d3-botao, .btn-primary.mp6d3-botao, .btn-outline.mp6d3-botao {
  box-shadow: none !important;
  filter: none !important;
}

/* -------------------------------------------------- 9. PRIMITIVAS .pro-* */
.pro-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pro-text-3);
}
.pro-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pro-accent);
}
.pro-title { font-size: clamp(24px, 3vw, 32px); font-weight: 500; color: var(--pro-text); }
.pro-sub { font-size: 15px; line-height: 1.65; color: var(--pro-text-2); max-width: 62ch; }
.pro-rule { height: 1px; background: var(--pro-line); border: 0; margin: 0; }
.pro-grid { display: grid; gap: 1px; background: var(--pro-line); }
.pro-cell { background: var(--pro-bg); padding: 20px 22px; }
.pro-kpi-v {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px;
  font-weight: 500;
  color: var(--pro-text);
  font-variant-numeric: tabular-nums;
}
.pro-kpi-l { font-size: 12px; color: var(--pro-text-3); letter-spacing: .04em; }
.pro-panel {
  background: var(--pro-surface);
  border: 1px solid var(--pro-line);
  border-radius: var(--pro-r-lg);
  padding: 22px 24px;
}
.pro-tag {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--pro-line-2);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pro-text-3);
}
.pro-tag.on { border-color: rgba(0, 229, 155, .5); color: var(--pro-accent); }

/* o aviso que mesa seria publica: risco, ambiente, o que o plano NAO promete */
.pro-legal {
  border-top: 1px solid var(--pro-line);
  margin-top: 48px;
  padding: 22px 0 8px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--pro-text-3);
  max-width: 88ch;
}
.pro-legal b { color: var(--pro-text-2); font-weight: 500; }

.pro-steps { display: grid; gap: 0; }
.pro-step { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--pro-line); }
.pro-step-n {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; color: var(--pro-text-3); min-width: 26px; padding-top: 2px;
}

/* ------------------------------------- 10. MARCA E ATENDIMENTO (IA VENDAS) */
/* O cabecalho da home mostrava o logo (que JA' tem o nome escrito) e, do lado,
   a palavra "MP6" de novo. Marca escrita duas vezes na mesma linha e' o defeito
   que o visitante le' como desleixo. */
.logo-bubble .logo-content img + span,
.logo-bubble .logo-content span[style*="font-weight: 800"],
.logo-bubble .logo-content span[style*="font-weight:800"] { display: none !important; }
.logo-bubble {
  border: 1px solid var(--pro-line-2) !important;
  border-radius: 999px !important;
  background: rgba(5, 7, 10, .9) !important;
}

/* O botao de atendimento era dourado, em Arial Black, com brilho - o unico
   elemento do site nessa lingua. Vira o CTA institucional. */
#mp6iaBtn {
  background: var(--pro-accent) !important;
  background-image: none !important;
  color: #05100C !important;
  border: 1px solid var(--pro-accent) !important;
  border-radius: 999px !important;
  font-family: Inter, -apple-system, "Segoe UI", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .01em !important;
  box-shadow: none !important;
  padding: 11px 17px !important;
}
#mp6iaBtn span { background: #05100C !important; }
#mp6iaBox {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-r-lg) !important;
  box-shadow: none !important;
}
#mp6iaTop {
  background: var(--pro-bg-2) !important;
  border-bottom: 1px solid var(--pro-line) !important;
  color: var(--pro-text) !important;
  font-family: Inter, -apple-system, "Segoe UI", sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
}
.mp6iaM { border-radius: var(--pro-r) !important; }
.mp6iaIA { background: var(--pro-surface-2) !important; border: 1px solid var(--pro-line) !important; }
.mp6iaEu { background: rgba(0, 229, 155, .14) !important; border: 1px solid rgba(0, 229, 155, .22) !important; }
#mp6iaForm, #mp6iaTag {
  background: var(--pro-bg-2) !important;
  border-color: var(--pro-line) !important;
}
#mp6iaInp {
  background: var(--pro-bg) !important;
  border: 1px solid var(--pro-line-2) !important;
  border-radius: var(--pro-r) !important;
}
#mp6iaSend {
  background: var(--pro-accent) !important;
  background-image: none !important;
  color: #05100C !important;
  font-weight: 600 !important;
  border-radius: var(--pro-r) !important;
}
#mp6iaTag a { color: var(--pro-accent) !important; }

/* ------------------- 11. TELA DE ENTRADA (o cartao do painel / login) */
/* Vale para login.html (a entrada secreta do admin) e para a area do cliente:
   e' o primeiro cartao que o dono ve todo dia, e era o mais "pirulito" do site -
   icone com halo verde, titulo verde brilhando, campo com brilho no foco. */
.logo-icon {
  box-shadow: none !important;
  border: 1px solid rgba(0, 229, 155, .45) !important;
}
.logo-title {
  color: var(--pro-text) !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
  text-shadow: none !important;
}
.logo-subtitle { color: var(--pro-text-3) !important; letter-spacing: .04em !important; }

.btn-login {
  background: var(--pro-accent) !important;
  background-image: none !important;
  color: #05100C !important;
  border-radius: var(--pro-r) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.form-label {
  color: var(--pro-text-3) !important;
  letter-spacing: .12em !important;
  font-weight: 500 !important;
}
.form-input {
  background: var(--pro-bg) !important;
  border: 1px solid var(--pro-line-2) !important;
  border-radius: var(--pro-r) !important;
  box-shadow: none !important;
}
.form-input:focus {
  border-color: rgba(0, 229, 155, .55) !important;
  box-shadow: none !important;
}
.error-msg {
  background: rgba(248, 113, 113, .08) !important;
  border: 1px solid rgba(248, 113, 113, .28) !important;
  color: #FCA5A5 !important;
  border-radius: var(--pro-r) !important;
}

/* -------------------------------------------------- 12. ACESSIBILIDADE */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (max-width: 720px) {
  section { padding-top: 48px; padding-bottom: 48px; }
  section[style*="min-height: 100vh"], section[style*="min-height:100vh"] {
    padding-top: 64px !important;
    padding-bottom: 52px !important;
  }
  .pro-legal { margin-top: 30px; }
}