/* ════════════════════════════════════════════════════════════════
   GLOBAL.CSS — Design System & Shared Styles
════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@700;800&display=swap');

:root {
  /* Paleta */
  --navy:        #0F172A;
  --navy-mid:    #1E3A5F;
  --blue:        #2563EB;
  --blue-hover:  #1D4ED8;
  --blue-light:  #EFF6FF;
  --green:       #10B981;
  --purple:      #8B5CF6;
  --red:         #EF4444;
  --amber:       #F59E0B;

  /* Superfícies */
  --surface:     #F8FAFC;
  --surface-2:   #F1F5F9;
  --border:      #E2E8F0;
  --border-focus:#2563EB;

  /* Texto */
  --text:        #1E293B;
  --text-light:  #475569;
  --muted:       #94A3B8;

  /* Tipografia */
  --font-display: 'Sora', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Sombras */
  --shadow-sm:   0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:   0 4px 16px rgba(15,23,42,.08);
  --shadow-lg:   0 20px 60px rgba(15,23,42,.14);

  /* Interação */
  --transition:  all 0.18s ease;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
}

/* ─── RESET & BASE ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--surface);
  line-height: 1.6;
  min-height: 100vh;
}

a { text-decoration: none; color: var(--blue); transition: var(--transition); }

img { display: block; max-width: 100%; }

/* ─── COMPONENTES GLOBAIS ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); box-shadow: 0 4px 12px rgba(37,99,235,.3); }

.btn-ghost { background: transparent; color: var(--text-light); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

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

.btn.registered { background: var(--green); color: #fff; }
.btn.registered:hover { background: #059669; }

.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-lg { padding: 13px 28px; font-size: 15px; }

.form-group { margin-bottom: 18px; }
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-light);
  margin-bottom: 8px;
}

.form-input, .form-textarea {
  width: 100%;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  transition: var(--transition);
  outline: none;
}
.form-input:focus, .form-textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }

.hidden { display: none !important; }

.widget-counter-box {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px;
  text-align: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.widget-counter-box:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}


@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}