body {
  font-family: Arial, Helvetica, sans-serif;
}

header {
  background: linear-gradient(
    105deg,
    #0f172a 0%,
    #0f172a 50%,
    #2c4886 50%,
    #2c4886 100%
  );
}

.bg-night {
  background-color: #0f172a;
}

.bg-card {
  background-color: #374151;
}

header picture img {
  height: 110px !important;
  width: auto;
  object-fit: contain;
}

header > div > p {
  font-size: 2rem;
  max-width: 500px;
}

header > div > p span {
  text-wrap: nowrap;
}

header > div > div {
  max-width: 500px;
}

.b800 {
  font-weight: 800 !important;
}

.text-blue {
  color: #60a5fa;
}

section.card {
  background: #111827;
  margin-top: -35px;
  max-width: 1200px;
}

section.card div.card {
  background-color: #374151;
  width: clamp();
}

section.card div.card p {
  font-size: 25px;
  font-weight: 700;
}

.cards-wrapper {
  justify-content: space-between; /* opcional, só pra dar um respiro */
}

.cards-wrapper .card {
  flex: 1 1 100%;
  max-width: 100%;
}

@media (min-width: 576px) {
  /* sm: 1 coluna */
  .cards-wrapper .card {
    max-width: calc(100% - 0.75rem);
  }
}

@media (min-width: 768px) {
  /* md: 2 colunas */
  .cards-wrapper .card {
    max-width: calc(50% - 0.75rem);
  }

  section.card .row .card.text-white.p-4 {
    max-width: calc(50% - 1rem);
  }
}

@media (min-width: 992px) {
  /* lg: 4 colunas */
  .cards-wrapper .card {
    max-width: calc(25% - 0.75rem);
  }
}

/* Progress bars: red for incompletos (<100), green for completos (==100) */
progress {
  width: 100%;
  height: 25px;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  border-radius: 9999px;
}

/* Base track */
progress::-webkit-progress-bar {
  background-color: #1f2937; /* gray-800 - dark track */
  border-radius: 9999px;
}

/* Incomplete value (default) */
progress::-webkit-progress-value {
  background-color: #ef4444; /* red-500 */
  border-radius: 9999px;
}

/* Firefox */
progress::-moz-progress-bar {
  background-color: #ef4444; /* red-500 */
  border-radius: 9999px;
}

/* Complete when value == 100 */
progress[value="100"]::-webkit-progress-value {
  background-color: #10b981; /* green-600 */
}

progress[value="100"]::-moz-progress-bar {
  background-color: #10b981; /* green-600 */
}

/* Layout: progress + nome na mesma linha, centralizados verticalmente */
section.card .row .card.text-white.p-4 > div.mt-2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

section.card .row .card.text-white.p-4 > div.mt-2 > progress {
  flex: 1 1 auto;
}

section.card .row .card.text-white.p-4 > div.mt-2 > span {
  white-space: nowrap;
  width: 120px; /* largura fixa para padronizar nomes */
  text-align: left;
}

.text-green {
  color: #10b981;
}

.text-red {
  color: #ef4444;
}

section.container {
  max-width: 900px;
}

#contato > div {
  max-width: 600px;
}

ul.mx-auto {
  max-width: fit-content;
}

.card.bg-card {
  border-radius: 0.75rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card.bg-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

.card.bg-card h4 {
  color: #60a5fa;
  font-weight: 700;
  margin-bottom: 1rem;
}

.card.bg-card p {
  font-size: 0.95rem;
  color: #d1d5db;
}

.whatsapp {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 900;
  background: #25d366;
  padding: 18px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px #25d36666;
}

.whatsapp img {
  filter: invert(1);
}

.whatsapp:hover {
  transform: scale(1.2);
}