/* 1000faturas — Paleta: Teal #0F8B8D / Dark Teal #0A6C74 / Blue-Grey #1F3A4D */

/* Skip link — acessibilidade */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #0F8B8D;
  color: #fff;
  padding: 8px 16px;
  z-index: 100;
  transition: top 0.3s;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  top: 0;
}

/* Fontes */
html { font-family: 'DM Sans', system-ui, sans-serif; }
.mono { font-family: 'DM Mono', monospace; }

/* Navbar link underline animation */
.nav-link,
.nl {
  position: relative;
}
.nav-link::after,
.nl::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #0F8B8D;
  transition: width 0.2s;
}
.nav-link:hover::after,
.nl:hover::after {
  width: 100%;
}

/* Gradient hero */
.gradient-hero,
.gh {
  background: linear-gradient(135deg, #1F3A4D 0%, #0A6C74 60%, #0F8B8D 100%);
}

/* Gradient CTA */
.gradient-cta,
.gcta {
  background: linear-gradient(135deg, #0A6C74, #0F8B8D);
}

/* Card hover effect */
.card-hover,
.ch {
  transition: all 0.2s ease;
}
.card-hover:hover,
.ch:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(15, 139, 141, 0.12);
}

/* Feature icon background */
.feature-icon {
  background: linear-gradient(135deg, #e6f4f4, #ccf0f1);
}

/* Step connector */
.step-connector {
  background: linear-gradient(to bottom, #0F8B8D, #ccf0f1);
}

/* Tags / badges */
.tag-green { background: #dcfce7; color: #15803d; }
.tag-yellow { background: #fef9c3; color: #a16207; }
.tag-red { background: #fee2e2; color: #b91c1c; }

.badge {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
}

/* Coin badge (preços) */
.coin-badge,
.cb {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border: 2px solid #cbd5e1;
}

/* Gradient addon (preços) */
.gradient-addon {
  background: linear-gradient(135deg, #78350f, #b45309);
}

/* Form focus states */
input:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(15, 139, 141, 0.15);
}

/* Details/summary reset */
details summary {
  list-style: none;
}
details summary::-webkit-details-marker {
  display: none;
}

/* === FUNDOS DINÂMICOS E PADRÕES === */

/* Padrão de pontos sutil */
.bg-pattern-dots,
.bpd {
  background-color: #ffffff;
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Padrão de pontos em fundo escuro */
.bg-pattern-dots-dark,
.bpdd {
  background-color: #0f172a;
  background-image: radial-gradient(#1e293b 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Blur blobs decorativos (posicionáveis) */
.blur-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.blur-blob-teal {
  background: #0f8b8d;
}
.blur-blob-amber {
  background: #f59e0b;
}
.blur-blob-blue {
  background: #3b82f6;
}

/* Secção com fundo escuro e glow sutil */
.bg-section-dark,
.bsd {
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #111827 100%);
  position: relative;
  overflow: hidden;
}
.bg-section-dark::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(15,139,141,0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Secção com gradiente sutil teal */
.bg-section-teal,
.bst {
  background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
  position: relative;
}

/* Secção com gradiente quente (social proof) */
.bg-section-warm,
.bsw {
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 60%);
}

/* Divisor ondulado entre secções (top) */
.divider-wave-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}
.divider-wave-top svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 48px;
}

/* Divisor ondulado entre secções (bottom) */
.divider-wave-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.divider-wave-bottom svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 48px;
}

/* Glow em cards sobre fundo escuro */
.card-glow {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 20px 50px rgba(0,0,0,0.3);
}

/* Animação sutil de flutuação */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* Glow de texto para estatísticas */
.text-glow {
  text-shadow: 0 0 30px rgba(15,139,141,0.3);
}

/* === CLASSES UTILITÁRIAS DE FUNDO === */
.section-alt {
  background-color: #f7f8fa;
}
.section-dark {
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #111827 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.section-dark h2 {
  color: #fff;
}

/* Hero pills */
.hero-pills {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.hero-pills span {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
}