/* =============================================
   SECTION HEADER
   ============================================= */
.section-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 64px;
}
.section-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(57,157,163,.1);
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 16px;
}
.section-header h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.05;
  margin-bottom: 16px;
}
.section-header p {
  font-size: 17px;
  color: var(--gray-600);
  font-weight: 300;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--teal);
  color: white;
  font-family: 'Ubuntu', sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 14px 28px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-primary:hover { background: var(--teal-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(57,157,163,.3); }
.btn-primary.large { padding: 16px 36px; font-size: 16px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--navy);
  font-family: 'Ubuntu', sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 14px 28px;
  border-radius: 50px;
  border: 2px solid rgba(40,56,102,.2);
  cursor: pointer;
  transition: var(--transition);
}
.btn-ghost:hover { border-color: var(--navy); background: rgba(40,56,102,.04); }
.btn-ghost.light { color: white; border-color: rgba(255,255,255,.4); }
.btn-ghost.light:hover { border-color: white; background: rgba(255,255,255,.1); }

/* Slide escuro (slide 3 – navy bg) */
.slide-dark .btn-primary {
  background: white;
  color: var(--navy);
}
.slide-dark .btn-primary:hover {
  background: var(--light);
}

@media (max-width: 768px) {
  .btn-ghost.light { border-color: rgba(255,255,255,.75); }
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--teal);
  font-family: 'Ubuntu', sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 14px 32px;
  border-radius: 50px;
  border: 2px solid var(--teal);
  cursor: pointer;
  transition: var(--transition);
}
.btn-outline:hover { background: var(--teal); color: white; }