/* =====================================================================
   JC INFORMÁTICA — BASE STYLES
   Reset, variáveis CSS e estilos fundamentais
===================================================================== */

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

:root {
  --navy:       #0B1F3A;
  --navy2:      #132845;
  --navy3:      #1A3358;
  --gold:       #C8973A;
  --gold2:      #E3B45A;
  --off:        #F4F2EE;
  --light:      #FFFFFF;
  --slate:      #8A9BB0;
  --muted:      #4A6080;
  --text:       #1E2E42;
  --radius:     8px;
  --max-w:      980px;
  --transition: 0.22s ease;
}

html { 
  scroll-behavior: smooth; 
}

body {
  font-family: 'Trebuchet MS', 'Segoe UI', Tahoma, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--off);
}

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

svg { 
  display: block; 
  flex-shrink: 0; 
}

.max { 
  max-width: var(--max-w); 
  margin: 0 auto; 
}

/* TYPOGRAPHY HELPERS */
.section-tag {
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  border-left: 3px solid var(--gold);
  padding-left: 10px;
  margin-bottom: 0.875rem;
}

.section-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.28;
  margin-bottom: 1.5rem;
}

/* ANIMATIONS */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim { 
  opacity: 0; 
}

.anim.visible { 
  animation: fadeUp 0.6s ease forwards; 
}