/* SOS Pais - Componentes */

/* Botões */
.btn { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 8px; 
  font-family: inherit; 
  font-weight: 800; 
  font-size: 1rem; 
  padding: 15px 30px; 
  border-radius: var(--r-full); 
  border: none; 
  cursor: pointer; 
  transition: all .22s ease; 
  text-decoration: none; 
  line-height: 1; 
}

.btn-green { background: var(--green); color: #fff; box-shadow: 0 6px 20px rgba(26,154,86,.35); }
.btn-green:hover { background: var(--green-dk); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(26,154,86,.4); }

.btn-outline { background: transparent; color: var(--blue); border: 2px solid var(--blue); }
.btn-outline:hover { background: var(--blue-soft); }

.btn-xl { padding: 18px 40px; font-size: 1.15rem; width: 100%; max-width: 420px; }

.btn-white { background: #fff; color: var(--navy); box-shadow: var(--sh); }
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }

/* Badges & Kickers */
.kicker { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  font-size: .72rem; 
  font-weight: 700; 
  letter-spacing: .1em; 
  text-transform: uppercase; 
  color: var(--blue); 
  background: var(--blue-soft); 
  padding: 4px 12px; 
  border-radius: var(--r-full); 
  margin-bottom: 14px; 
}

.hero-badge { 
  display: inline-flex; 
  align-items: center; 
  gap: 7px; 
  background: var(--red-bg); 
  color: var(--red); 
  font-size: .75rem; 
  font-weight: 700; 
  letter-spacing: .06em; 
  text-transform: uppercase; 
  padding: 5px 13px; 
  border-radius: var(--r-full); 
  margin-bottom: 18px; 
}

/* Cards */
.dor-card { 
  background: var(--white); 
  border: 1px solid var(--border); 
  border-left: 4px solid var(--red); 
  border-radius: var(--r); 
  padding: 20px 22px; 
  display: flex; 
  align-items: flex-start; 
  gap: 14px; 
  box-shadow: var(--sh); 
  transition: transform .2s; 
}
.dor-card:hover { transform: translateY(-3px); }
.dor-card p span { font-weight: 700; color: var(--red); }

.evidence-card { 
  background: var(--white); 
  border: 1px solid var(--border); 
  border-radius: var(--r); 
  padding: 22px; 
  box-shadow: var(--sh); 
  position: relative; 
  overflow: hidden; 
}
.evidence-card::before { 
  content: ''; 
  position: absolute; 
  inset: 0 0 auto 0; 
  height: 4px; 
  background: linear-gradient(90deg, var(--red), var(--green)); 
}

.modulo-card { 
  background: var(--white); 
  border: 1px solid var(--border); 
  border-radius: var(--r); 
  overflow: hidden; 
  box-shadow: var(--sh); 
  transition: transform .2s; 
}
.modulo-card:hover { transform: translateY(-4px); }

.dep-card { 
  background: var(--white); 
  border: 1px solid var(--border); 
  border-radius: var(--r); 
  padding: 24px; 
  box-shadow: var(--sh); 
  text-align: left; 
  transition: transform .2s; 
}

.bonus-card { 
  background: var(--white); 
  border: 2px solid var(--amber-bg); 
  border-radius: var(--r); 
  padding: 24px; 
  position: relative; 
  box-shadow: var(--sh); 
  transition: transform .2s; 
}

/* Modal & Popups */
.lead-overlay, .exit-overlay { 
  position: fixed; 
  inset: 0; 
  background: rgba(5, 14, 26, .72); 
  z-index: 700; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 18px; 
  opacity: 0; 
  pointer-events: none; 
  transition: opacity .25s ease; 
}
.lead-overlay.show, .exit-overlay.show { opacity: 1; pointer-events: auto; }

.lead-popup, .exit-popup { 
  width: min(100%, 520px); 
  background: #fff; 
  border-radius: 24px; 
  box-shadow: 0 24px 80px rgba(0,0,0,.28); 
  padding: 28px; 
  position: relative; 
}