:root {
  --primos-900: #103e96;
  --primos-700: #1654c2;
  --primos-500: #3a7df2;
  --primos-50:  #eff5ff;
  --accent:     #7ed321;
  --accent-2:   #6bb81c;
  --gold:       #f5b417;
  --whatsapp:   #25D366;
  --whatsapp-2: #128C7E;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Botão WhatsApp */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--whatsapp);
  color: #fff;
  border-radius: 9999px;
  font-weight: 600;
  transition: background .15s ease, transform .15s ease;
}
.btn-whatsapp:hover { background: var(--whatsapp-2); transform: translateY(-1px); }
.btn-whatsapp:active { transform: translateY(0); }
.btn-whatsapp::before {
  content: '';
  display: inline-block;
  width: 18px; height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'><path d='M16 .5C7.4.5.5 7.4.5 16c0 2.8.7 5.4 2.1 7.8L.5 31.5l7.9-2.1c2.3 1.3 4.9 1.9 7.6 1.9 8.6 0 15.5-6.9 15.5-15.5S24.6.5 16 .5zm0 28.2c-2.4 0-4.7-.6-6.7-1.8l-.5-.3-4.7 1.3 1.3-4.6-.3-.5C3.7 20.8 3 18.5 3 16 3 8.8 8.8 3 16 3s13 5.8 13 13-5.8 12.7-13 12.7zm7.4-9.2c-.4-.2-2.4-1.2-2.7-1.3-.4-.1-.6-.2-.9.2-.3.4-1 1.3-1.3 1.6-.2.2-.5.3-.9.1-.4-.2-1.7-.6-3.3-2-1.2-1.1-2-2.4-2.2-2.8-.2-.4 0-.6.2-.8.2-.2.4-.5.6-.7.2-.2.3-.4.4-.7.1-.3.1-.5 0-.7-.1-.2-.9-2.2-1.3-3-.3-.8-.7-.7-.9-.7h-.8c-.3 0-.7.1-1.1.5s-1.4 1.4-1.4 3.4 1.5 4 1.7 4.2c.2.3 2.9 4.4 7 6.2.9.4 1.7.6 2.3.8.9.3 1.8.2 2.5.1.8-.1 2.4-1 2.7-1.9.3-1 .3-1.8.2-1.9-.1-.2-.4-.3-.8-.5z'/></svg>") no-repeat center / contain;
}

/* Botão WhatsApp Flutuante */
.fab-whatsapp {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 50;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  background: var(--whatsapp);
  color: #fff;
  border-radius: 9999px;
  box-shadow: 0 10px 25px rgba(37, 211, 102, .45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.fab-whatsapp:hover { transform: scale(1.05); box-shadow: 0 12px 30px rgba(37, 211, 102, .55); }
.fab-whatsapp::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 9999px;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .6); }
  70%  { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Como funciona — card */
.step-card {
  position: relative;
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 1.25rem;
  padding: 1.5rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.step-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(15, 58, 142, .08); border-color: var(--primos-500); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--primos-900);
  color: #fff;
  font-weight: 700;
  border-radius: 9999px;
  font-size: 1.1rem;
}
.step-title { margin-top: 1rem; font-size: 1.125rem; font-weight: 700; color: rgb(15 23 42); }
.step-desc { margin-top: .5rem; color: rgb(71 85 105); font-size: .95rem; line-height: 1.5; }

/* Check */
.check {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 22px; height: 22px;
  background: var(--primos-500);
  color: #fff;
  border-radius: 9999px;
  font-size: .7rem;
  font-weight: 700;
}

/* Cards de preço */
.price-card {
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 1.5rem;
  padding: 2rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.price-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(15, 58, 142, .12); }

/* Avaliação */
.review {
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 1.25rem;
  padding: 1.5rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.review:hover { border-color: var(--accent); box-shadow: 0 10px 30px rgba(126, 211, 33, .15); }

/* Acessibilidade */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}