/* =========================================================
   MONITORAX SITE — ESTILOS DA LANDING
   ========================================================= */

/* ====================== HEADER ====================== */
.mx-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--cor-borda);
}

.mx-header__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: var(--espaco-6);
}

.mx-header__marca {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  color: var(--cor-texto);
  font-weight: var(--peso-bold);
  font-size: var(--tam-xl);
  letter-spacing: -0.02em;
}
.mx-header__marca:hover { color: var(--cor-texto); text-decoration: none; }
.mx-header__marca img { height: 36px; width: auto; }

.mx-nav {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
}
.mx-nav__lista {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mx-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--raio);
  color: var(--cor-texto-suave);
  font-size: var(--tam-md);
  font-weight: var(--peso-medio);
  transition: all var(--transicao-rapida);
}
.mx-nav__link:hover {
  background: var(--cor-fundo-suave);
  color: var(--cor-texto);
  text-decoration: none;
}

.mx-nav__login {
  background: var(--cor-primaria);
  color: var(--branco);
  padding: 9px 18px;
}
.mx-nav__login:hover {
  background: var(--cor-primaria-hover);
  color: var(--branco);
}
.mx-nav__login svg { width: 16px; height: 16px; }

.mx-menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 8px;
  cursor: pointer;
  color: var(--cor-texto);
}
.mx-menu-toggle svg { width: 22px; height: 22px; }

@media (max-width: 860px) {
  .mx-menu-toggle { display: inline-flex; }
  .mx-nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--branco);
    border-bottom: 1px solid var(--cor-borda);
    padding: var(--espaco-4) var(--container-pad);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transicao);
  }
  .mx-nav[data-aberto="true"] {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .mx-nav__lista {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--espaco-1);
  }
  .mx-nav__link {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 14px;
  }
  .mx-nav__login { justify-content: center; }
}

/* ====================== HERO ====================== */
.mx-hero {
  position: relative;
  padding: var(--espaco-24) 0 var(--espaco-20);
  overflow: hidden;
  background:
    radial-gradient(800px 400px at 80% -10%, rgba(37, 99, 235, 0.12), transparent 60%),
    radial-gradient(600px 300px at 10% 10%, rgba(37, 99, 235, 0.08), transparent 60%);
}
.mx-hero__interior {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: var(--espaco-12);
}
@media (max-width: 960px) {
  .mx-hero { padding: var(--espaco-16) 0; }
  .mx-hero__interior {
    grid-template-columns: 1fr;
    gap: var(--espaco-10);
  }
}

.mx-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--raio-pill);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
  font-size: var(--tam-sm);
  font-weight: var(--peso-semi);
  margin-bottom: var(--espaco-5);
}
.mx-hero__tag::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cor-sucesso);
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18);
  animation: pulso 2s ease-in-out infinite;
}
@keyframes pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.mx-hero__titulo {
  margin-bottom: var(--espaco-5);
}
.mx-hero__titulo span {
  background: linear-gradient(135deg, var(--azul-600), var(--azul-400));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mx-hero__texto {
  font-size: var(--tam-lg);
  color: var(--cor-texto-suave);
  margin-bottom: var(--espaco-8);
  max-width: 560px;
}

.mx-hero__ctas {
  display: flex;
  gap: var(--espaco-3);
  flex-wrap: wrap;
}

.mx-hero__metricas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espaco-6);
  margin-top: var(--espaco-10);
  padding-top: var(--espaco-8);
  border-top: 1px solid var(--cor-borda);
}
.mx-hero__metricas strong {
  display: block;
  font-size: var(--tam-3xl);
  color: var(--cor-primaria);
  font-weight: var(--peso-bold);
}
.mx-hero__metricas span {
  font-size: var(--tam-sm);
  color: var(--cor-texto-suave);
}

/* === MOCKUP DO PAINEL (lado direito do hero) === */
.mx-hero__visual {
  position: relative;
}
.mx-hero__painel {
  background: var(--branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-xl);
  overflow: hidden;
  transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
  transition: transform var(--transicao-lenta);
}
.mx-hero__painel:hover {
  transform: perspective(1200px) rotateY(-2deg) rotateX(0);
}
.mx-hero__painel-cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--cinza-50);
  border-bottom: 1px solid var(--cor-borda);
}
.mx-hero__painel-cabecalho .ponto {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cinza-300);
}
.mx-hero__painel-cabecalho .url {
  margin-left: 8px;
  font-size: var(--tam-xs);
  color: var(--cor-texto-fraco);
  font-family: var(--fonte-mono);
}
.mx-hero__painel-corpo {
  padding: var(--espaco-5);
  display: grid;
  gap: var(--espaco-4);
}
.mx-stats-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espaco-3);
}
.mx-stat-mini {
  padding: var(--espaco-3);
  background: var(--cor-fundo-suave);
  border-radius: var(--raio);
  border: 1px solid var(--cor-borda);
}
.mx-stat-mini__valor {
  font-size: var(--tam-xl);
  font-weight: var(--peso-bold);
  color: var(--cor-texto);
}
.mx-stat-mini__rotulo {
  font-size: var(--tam-xs);
  color: var(--cor-texto-suave);
}
.mx-stat-mini--ok .mx-stat-mini__valor { color: var(--cor-sucesso); }
.mx-stat-mini--alerta .mx-stat-mini__valor { color: var(--cor-aviso); }
.mx-stat-mini--erro .mx-stat-mini__valor { color: var(--cor-perigo); }

.mx-mini-tabela {
  display: grid;
  gap: 6px;
}
.mx-mini-linha {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--espaco-3);
  padding: 10px 12px;
  background: var(--cor-fundo-suave);
  border-radius: var(--raio-sm);
  font-size: var(--tam-sm);
}
.mx-mini-linha__nome {
  font-weight: var(--peso-medio);
  color: var(--cor-texto);
}
.mx-mini-badge {
  font-size: var(--tam-xs);
  font-weight: var(--peso-semi);
  padding: 3px 10px;
  border-radius: var(--raio-pill);
}
.mx-mini-badge--ok    { background: #dcfce7; color: #15803d; }
.mx-mini-badge--alert { background: #fef3c7; color: #b45309; }
.mx-mini-badge--erro  { background: #fee2e2; color: #b91c1c; }
.mx-mini-linha__hora { color: var(--cor-texto-fraco); font-family: var(--fonte-mono); }

@media (max-width: 960px) {
  .mx-hero__painel { transform: none; }
}

/* ====================== LOGOS / PROVA ====================== */
.mx-logos {
  padding: var(--espaco-12) 0;
  border-top: 1px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
  background: var(--branco);
}
.mx-logos__titulo {
  text-align: center;
  font-size: var(--tam-sm);
  color: var(--cor-texto-fraco);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--espaco-6);
}
.mx-logos__lista {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--espaco-10);
  align-items: center;
}
.mx-logo-marca {
  font-weight: var(--peso-bold);
  font-size: var(--tam-lg);
  color: var(--cor-texto-fraco);
  letter-spacing: -0.02em;
}

/* ====================== RECURSOS ====================== */
.mx-recursos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--espaco-5);
}
.mx-recurso {
  padding: var(--espaco-6);
  background: var(--branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  transition: all var(--transicao);
}
.mx-recurso:hover {
  border-color: var(--azul-300);
  transform: translateY(-2px);
  box-shadow: var(--sombra-md);
}
.mx-recurso__icone {
  width: 48px; height: 48px;
  border-radius: var(--raio);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--espaco-4);
}
.mx-recurso__icone svg { width: 24px; height: 24px; }
.mx-recurso h3 {
  font-size: var(--tam-lg);
  margin-bottom: var(--espaco-2);
}
.mx-recurso p {
  color: var(--cor-texto-suave);
  font-size: var(--tam-md);
}

/* ====================== COMO FUNCIONA ====================== */
.mx-passos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espaco-6);
  position: relative;
}
@media (max-width: 768px) { .mx-passos { grid-template-columns: 1fr; } }
.mx-passo {
  text-align: center;
  padding: 0 var(--espaco-3);
}
.mx-passo__numero {
  display: inline-flex;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cor-primaria);
  color: var(--branco);
  align-items: center;
  justify-content: center;
  font-size: var(--tam-2xl);
  font-weight: var(--peso-bold);
  margin-bottom: var(--espaco-4);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}
.mx-passo h3 { margin-bottom: var(--espaco-2); }
.mx-passo p { color: var(--cor-texto-suave); }

/* ====================== PARA QUEM ====================== */
.mx-publico {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--espaco-4);
}
.mx-publico__item {
  padding: var(--espaco-5);
  background: var(--branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
}
.mx-publico__icone {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--raio);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mx-publico__icone svg { width: 20px; height: 20px; }
.mx-publico strong { display: block; }
.mx-publico span { font-size: var(--tam-sm); color: var(--cor-texto-suave); }

/* ====================== DIFERENCIAIS / SEÇÃO ESCURA ====================== */
.mx-diferenciais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--espaco-6);
}
.mx-diferencial {
  padding: var(--espaco-6);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--raio-lg);
  backdrop-filter: blur(10px);
}
.mx-diferencial__valor {
  font-size: var(--tam-4xl);
  font-weight: var(--peso-bold);
  color: var(--azul-300);
  display: block;
  margin-bottom: var(--espaco-2);
}
.mx-diferencial p {
  color: var(--azul-100);
  font-size: var(--tam-md);
}

/* ====================== FAQ ====================== */
.mx-faq {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  gap: var(--espaco-3);
}
.mx-faq__item {
  background: var(--branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
}
.mx-faq__pergunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espaco-5);
  background: transparent;
  border: 0;
  text-align: left;
  font-size: var(--tam-base);
  font-weight: var(--peso-semi);
  color: var(--cor-texto);
  cursor: pointer;
  transition: background var(--transicao-rapida);
}
.mx-faq__pergunta:hover { background: var(--cor-fundo-suave); }
.mx-faq__pergunta svg {
  width: 20px; height: 20px;
  color: var(--cor-texto-suave);
  transition: transform var(--transicao);
  flex-shrink: 0;
}
.mx-faq__item[data-aberto="true"] .mx-faq__pergunta svg {
  transform: rotate(45deg);
  color: var(--cor-primaria);
}
.mx-faq__resposta {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transicao-lenta);
}
.mx-faq__item[data-aberto="true"] .mx-faq__resposta {
  max-height: 400px;
}
.mx-faq__resposta-interior {
  padding: 0 var(--espaco-5) var(--espaco-5);
  color: var(--cor-texto-suave);
}

/* ====================== CTA FINAL ====================== */
.mx-cta-final {
  text-align: center;
  padding: var(--espaco-12);
  background: linear-gradient(135deg, var(--azul-600) 0%, var(--azul-800) 100%);
  border-radius: var(--raio-2xl);
  color: var(--branco);
  box-shadow: var(--sombra-xl);
}
.mx-cta-final h2 {
  color: var(--branco);
  margin-bottom: var(--espaco-3);
}
.mx-cta-final p {
  font-size: var(--tam-lg);
  color: var(--azul-100);
  margin-bottom: var(--espaco-8);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.mx-cta-final__ctas {
  display: inline-flex;
  gap: var(--espaco-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* ====================== RODAPÉ ====================== */
.mx-rodape {
  background: var(--cinza-900);
  color: var(--cinza-300);
  padding: var(--espaco-16) 0 var(--espaco-6);
}
.mx-rodape__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--espaco-10);
  margin-bottom: var(--espaco-12);
}
@media (max-width: 768px) {
  .mx-rodape__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--espaco-8);
  }
}
.mx-rodape__marca {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-4);
  color: var(--branco);
  font-weight: var(--peso-bold);
  font-size: var(--tam-xl);
}
.mx-rodape__marca img { height: 36px; width: auto; filter: brightness(0) invert(1); }
.mx-rodape__sobre {
  font-size: var(--tam-sm);
  color: var(--cinza-400);
  max-width: 320px;
}
.mx-rodape h4 {
  color: var(--branco);
  font-size: var(--tam-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--espaco-4);
}
.mx-rodape ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--espaco-2);
}
.mx-rodape ul a {
  color: var(--cinza-400);
  font-size: var(--tam-sm);
}
.mx-rodape ul a:hover { color: var(--branco); }
.mx-rodape__base {
  border-top: 1px solid var(--cinza-800);
  padding-top: var(--espaco-6);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espaco-4);
  font-size: var(--tam-sm);
  color: var(--cinza-500);
}

/* ====================== CONTATO (PÁGINA) ====================== */
.mx-contato {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--espaco-12);
}
@media (max-width: 860px) { .mx-contato { grid-template-columns: 1fr; } }

.mx-contato__info h3 { margin-bottom: var(--espaco-2); }
.mx-contato__lista {
  margin-top: var(--espaco-8);
  display: grid;
  gap: var(--espaco-5);
}
.mx-contato__item {
  display: flex;
  gap: var(--espaco-4);
  align-items: flex-start;
}
.mx-contato__item-icone {
  width: 44px; height: 44px;
  border-radius: var(--raio);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mx-contato__item-icone svg { width: 20px; height: 20px; }
.mx-contato__item strong { display: block; margin-bottom: 2px; }
.mx-contato__item span { color: var(--cor-texto-suave); font-size: var(--tam-md); }
.mx-contato__item a { color: var(--cor-texto-suave); }
.mx-contato__item a:hover { color: var(--cor-primaria); }

.mx-form {
  background: var(--branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  padding: var(--espaco-8);
  box-shadow: var(--sombra-sm);
}
.mx-form__grupo {
  display: grid;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-5);
}
.mx-form__grupo label {
  font-size: var(--tam-sm);
  font-weight: var(--peso-medio);
  color: var(--cor-texto);
}
.mx-form__grupo input,
.mx-form__grupo textarea,
.mx-form__grupo select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--branco);
  font-family: inherit;
  font-size: var(--tam-md);
  color: var(--cor-texto);
  transition: all var(--transicao-rapida);
}
.mx-form__grupo input:focus,
.mx-form__grupo textarea:focus,
.mx-form__grupo select:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: var(--sombra-foco);
}
.mx-form__grupo textarea {
  resize: vertical;
  min-height: 120px;
}
.mx-form__linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espaco-4);
}
@media (max-width: 540px) { .mx-form__linha { grid-template-columns: 1fr; } }

.mx-form__feedback {
  margin-top: var(--espaco-4);
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: var(--raio);
  font-size: var(--tam-sm);
  display: none;
}
.mx-form__feedback[data-tipo="ok"] {
  display: block;
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.mx-form__feedback[data-tipo="erro"] {
  display: block;
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* =========================================================
   RESPONSIVIDADE — REFINAMENTOS
   Mobile-first: tap targets >= 44px, paddings adaptativos,
   layouts que quebram graciosamente em tablet e celular.
   ========================================================= */

/* === TABLET (768–1024px) === */
@media (max-width: 1024px) {
  :root { --container-pad: var(--espaco-5); }
  .mx-hero__interior { gap: var(--espaco-8); }
  .mx-recursos__grid { gap: var(--espaco-4); }
  .mx-rodape__grid { gap: var(--espaco-8); }
}

/* === MOBILE LARGE (até 768px) === */
@media (max-width: 768px) {
  :root { --container-pad: var(--espaco-4); }

  .mx-header__interior { height: 64px; gap: var(--espaco-3); }
  .mx-header__marca img { height: 32px; }

  .mx-hero { padding: var(--espaco-12) 0; }
  .mx-hero__tag { font-size: var(--tam-xs); }
  .mx-hero__texto { font-size: var(--tam-base); }

  .mx-hero__metricas {
    grid-template-columns: 1fr;
    gap: var(--espaco-4);
    margin-top: var(--espaco-6);
    padding-top: var(--espaco-6);
    text-align: center;
  }
  .mx-hero__metricas strong { font-size: var(--tam-2xl); }

  .mx-hero__ctas { flex-direction: column; align-items: stretch; }
  .mx-hero__ctas a {
    justify-content: center;
    width: 100%;
    min-height: 48px;
  }

  .mx-cta-final { padding: var(--espaco-8) var(--espaco-5); border-radius: var(--raio-xl); }
  .mx-cta-final__ctas { width: 100%; flex-direction: column; }
  .mx-cta-final__ctas a {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  .mx-recurso { padding: var(--espaco-5); }
  .mx-publico__item { padding: var(--espaco-4); }
  .mx-faq__pergunta { padding: var(--espaco-4); font-size: var(--tam-md); min-height: 56px; }
  .mx-faq__resposta-interior { padding: 0 var(--espaco-4) var(--espaco-4); }
  .mx-form { padding: var(--espaco-5); }

  .mx-rodape { padding: var(--espaco-12) 0 var(--espaco-5); }
  .mx-rodape__grid { margin-bottom: var(--espaco-8); }
  .mx-rodape__base { flex-direction: column; align-items: flex-start; }
}

/* === MOBILE PEQUENO (até 480px) === */
@media (max-width: 480px) {
  .mx-hero__metricas { padding-top: var(--espaco-5); margin-top: var(--espaco-5); }
  .mx-stats-mini { grid-template-columns: 1fr 1fr; }
  .mx-stats-mini > :last-child { grid-column: span 2; }
  .mx-mini-linha {
    grid-template-columns: 1fr auto;
    gap: var(--espaco-2);
  }
  .mx-mini-linha__hora { display: none; }

  .mx-passo__numero { width: 48px; height: 48px; font-size: var(--tam-xl); }
  .mx-rodape__grid { grid-template-columns: 1fr; }

  .secao-cabecalho p { font-size: var(--tam-base); }
  .mx-recurso__icone { width: 40px; height: 40px; }
  .mx-recurso__icone svg { width: 20px; height: 20px; }
}

/* === TAP TARGETS ACESSÍVEIS === */
@media (hover: none) and (pointer: coarse) {
  .mx-nav__link, .mx-faq__pergunta, .mx-form__grupo input, .mx-form__grupo select, .mx-form__grupo textarea {
    min-height: 44px;
  }
  .mx-recurso:hover { transform: none; }
}

/* === LARGE DESKTOP (>= 1440px) === */
@media (min-width: 1440px) {
  :root { --container-max: 1280px; }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}