/* ============================================================
   Nexus Aquecedores — Seção "Problemas do seu aquecedor"
   Estilo isolado sob #nexus-problemas para não conflitar
   com o Tailwind já existente no site.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

#nexus-problemas {
  --nx-blue: 210 100% 40%;
  --nx-blue-dark: 210 100% 32%;
  --nx-orange: 18 100% 60%;
  --nx-green: 142 70% 49%;
  --nx-green-dark: 142 70% 38%;
  --nx-fg: 220 20% 14%;
  --nx-muted: 220 9% 46%;
  --nx-secondary: 210 20% 96%;
  --nx-border: 220 13% 91%;

  background: hsl(var(--nx-secondary));
  padding: 3rem 1rem;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  color: hsl(var(--nx-fg));
}
@media (min-width: 768px) {
  #nexus-problemas { padding: 5rem 1rem; }
}

#nexus-problemas .nx-container { max-width: 1200px; margin: 0 auto; }

#nexus-problemas .nx-head { text-align: center; margin-bottom: 2.5rem; }

#nexus-problemas .nx-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 .75rem;
  color: hsl(var(--nx-fg));
}
#nexus-problemas .nx-title span { color: hsl(var(--nx-blue)); }

#nexus-problemas .nx-sub {
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  color: hsl(var(--nx-muted));
  max-width: 640px;
  margin: 0 auto;
}

#nexus-problemas .nx-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 560px) {
  #nexus-problemas .nx-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  #nexus-problemas .nx-grid { grid-template-columns: repeat(4, 1fr); }
}

#nexus-problemas .nx-card {
  background: #fff;
  border: 1px solid hsl(var(--nx-border));
  border-radius: 1rem;
  padding: 1.75rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#nexus-problemas .nx-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(16, 24, 40, .12);
  border-color: hsl(var(--nx-blue) / .35);
}

#nexus-problemas .nx-ic {
  width: 66px; height: 66px;
  border-radius: 999px;
  background: hsl(var(--nx-blue) / .10);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
  transition: background .2s ease;
}
#nexus-problemas .nx-card:hover .nx-ic { background: hsl(var(--nx-blue) / .16); }
#nexus-problemas .nx-ic svg {
  width: 32px; height: 32px;
  stroke: hsl(var(--nx-blue));
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#nexus-problemas .nx-card h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
  color: hsl(var(--nx-fg));
  min-height: 2.6em;
  display: flex; align-items: center;
}

#nexus-problemas .nx-code-input {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid hsl(var(--nx-border));
  border-radius: .55rem;
  font-size: .9rem;
  font-family: inherit;
  margin: -.4rem 0 .75rem;
  text-align: center;
  color: hsl(var(--nx-fg));
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#nexus-problemas .nx-code-input:focus {
  border-color: hsl(var(--nx-blue));
  box-shadow: 0 0 0 3px hsl(var(--nx-blue) / .15);
}

#nexus-problemas .nx-btn {
  margin-top: auto;
  width: 100%;
  border: none;
  cursor: pointer;
  background: hsl(var(--nx-green));
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  padding: .8rem 1rem;
  border-radius: .7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  box-shadow: 0 4px 12px hsl(var(--nx-green) / .3);
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
#nexus-problemas .nx-btn:hover {
  background: hsl(var(--nx-green-dark));
  transform: translateY(-1px);
  box-shadow: 0 6px 16px hsl(var(--nx-green) / .4);
}
#nexus-problemas .nx-btn:active { transform: translateY(0); }
#nexus-problemas .nx-btn svg { width: 18px; height: 18px; fill: #fff; }

#nexus-problemas .nx-foot {
  text-align: center;
  margin-top: 2.5rem;
}
#nexus-problemas .nx-foot .nx-btn {
  width: auto;
  padding: .95rem 2rem;
  font-size: 1.05rem;
  background: hsl(var(--nx-blue));
  box-shadow: 0 6px 18px hsl(var(--nx-blue) / .3);
}
#nexus-problemas .nx-foot .nx-btn:hover { background: hsl(var(--nx-blue-dark)); }

/* ============================================================
   Correção: logo do rodapé (fundo escuro)
   A logo original tem fundo branco sólido, o que criava um
   retângulo branco no rodapé. Trocamos pela versão transparente.
   ============================================================ */
footer img[src*="logo.png"] {
  content: url('/images/logo-transparente.png');
  background: transparent !important;
}