/* ============================================================
   main.css — Reset, Layout Global & Utilitários Táticos (FX Concursos)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Cinzel:wght@500;700;800&display=swap');

*,
*::before,
*::after {
  box-sizing:  border-box;
  margin:      0;
  padding:     0;
}

html {
  scroll-behavior:   smooth;
  font-size:         16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:      var(--font-primary);
  font-size:        var(--text-base);
  font-weight:      var(--weight-normal);
  line-height:      var(--leading-relaxed);
  color:            var(--color-text-primary);
  background-color: var(--color-bg-primary);
  overflow-x:       hidden;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  max-width: 100%;
  height:    auto;
  display:   block;
}

a {
  color:           inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  background: none;
  border:     none;
  cursor:     pointer;
  font:       inherit;
}

/* ── Containers ─────────────────────────────────────────────── */
.container {
  width:     100%;
  max-width: var(--container-max);
  margin:    0 auto;
  padding:   0 var(--container-px);
}

.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

/* ── Grid & Flex ────────────────────────────────────────────── */
.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.items-center    { align-items: center; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap       { flex-wrap: wrap; }
.gap-2           { gap: var(--space-2); }
.gap-3           { gap: var(--space-3); }
.gap-4           { gap: var(--space-4); }

.grid { display: grid; }

/* ── Seção Base ─────────────────────────────────────────────── */
.section {
  padding: clamp(var(--space-16), 7vw, var(--space-24)) 0;
  position: relative;
}

.section--alt {
  background: var(--color-bg-secondary);
}

/* ── Títulos de Seção Táticos ────────────────────────────────── */
.section-header {
  text-align:    center;
  margin-bottom: clamp(var(--space-8), 4vw, var(--space-16));
}

.section-label {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-3);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-extrabold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--color-gold-300);
  margin-bottom:  var(--space-3);
}

.section-label::before,
.section-label::after {
  content: '';
  display: inline-block;
  width:   24px;
  height:  1px;
  background: var(--color-gold-500);
}

.section-title {
  font-size:   clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  color:       var(--color-text-primary);
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
}

.section-title--center { text-align: center; }

.section-subtitle {
  font-size:   clamp(var(--text-sm), 1.5vw, var(--text-base));
  color:       var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width:   640px;
}

.section-subtitle--center {
  text-align: center;
  margin:     0 auto;
}

/* ── Cards Glass Táticos ─────────────────────────────────────── */
.card-glass {
  background:      var(--color-bg-glass);
  border:          1px solid var(--color-border-glass);
  border-radius:   var(--radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:      var(--shadow-card);
  transition:
    transform    var(--transition-base),
    box-shadow   var(--transition-base),
    border-color var(--transition-base);
}

.card-glass:hover {
  transform:    translateY(-3px);
  box-shadow:   var(--shadow-card), var(--shadow-gold-glow);
  border-color: rgba(212, 175, 55, 0.45);
}

/* ── Badges Táticos ─────────────────────────────────────────── */
.badge {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-2);
  padding:        var(--space-1) var(--space-3);
  border-radius:  var(--radius-pill);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.badge--urgency {
  background:  var(--color-urgency-bg);
  color:       var(--color-urgency);
  border:      1px solid rgba(239, 68, 68, 0.35);
}

.badge--success {
  background: var(--color-success-bg);
  color:      var(--color-success);
  border:     1px solid rgba(16, 185, 129, 0.35);
}

.badge--gold {
  background:  rgba(212, 175, 55, 0.12);
  color:       var(--color-gold-300);
  border:      1px solid var(--color-border-glass);
}

/* ── Check list ─────────────────────────────────────────────── */
.check-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.check-list li {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-2);
  font-size:   var(--text-sm);
  color:       var(--color-text-primary);
  line-height: var(--leading-snug);
}

.check-list li::before {
  content:     '✓';
  display:     inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width:       20px;
  height:      20px;
  border-radius: 50%;
  background:  var(--color-success-bg);
  color:       var(--color-success);
  font-size:   var(--text-xs);
  font-weight: var(--weight-bold);
  margin-top:  1px;
}

/* ── Estrelas ───────────────────────────────────────────────── */
.star-rating {
  display:   inline-flex;
  gap:       2px;
  font-size: var(--text-sm);
}

.star-rating span {
  color: var(--color-gold-300);
}

/* ── Destaques Gradiente ─────────────────────────────────────── */
.text-gold {
  background:              var(--grad-gold-soft);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}

.text-center { text-align: center; }
.text-left   { text-align: left; }
.relative    { position: relative; }
.overflow-hidden { overflow: hidden; }
.w-full      { width: 100%; }
.mx-auto     { margin-left: auto; margin-right: auto; }
.mt-4        { margin-top: var(--space-4); }
.mt-8        { margin-top: var(--space-8); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-primary); }
::-webkit-scrollbar-thumb { background: var(--color-gold-700); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--color-gold-500); }