:root {
  --crimson: #A41E22;
  --crimson-dark: #7d1619;
  --celeste: #74ACDF;
  --celeste-dark: #4A89C8;
  --sun: #F6B40E;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.font-serif {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.text-crimson { color: var(--crimson); }
.bg-crimson { background-color: var(--crimson); }
.bg-crimson-dark { background-color: var(--crimson-dark); }
.hover\:bg-crimson-dark:hover { background-color: var(--crimson-dark); }
.hover\:text-crimson:hover { color: var(--crimson); }
.border-crimson { border-color: var(--crimson); }

.text-celeste { color: var(--celeste); }
.bg-celeste { background-color: var(--celeste); }
.bg-celeste\/20 { background-color: rgba(116, 172, 223, 0.2); }
.border-celeste { border-color: var(--celeste); }
.hover\:border-celeste:hover { border-color: var(--celeste); }
.hover\:text-celeste:hover { color: var(--celeste); }
.group:hover .group-hover\:text-celeste { color: var(--celeste); }

.text-celeste-dark { color: var(--celeste-dark); }

.flag-stripes {
  background-image: linear-gradient(
    180deg,
    var(--celeste) 0%,
    var(--celeste) 33%,
    #ffffff 33%,
    #ffffff 66%,
    var(--celeste) 66%,
    var(--celeste) 100%
  );
}

@media (max-width: 767px) {
  html { font-size: 87.5%; }

  #eventos ul > li {
    padding-top: 1rem;
    padding-bottom: 1rem;
    gap: 0.5rem;
  }

  #eventos .py-24 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}