/* =========================================================
   base.css
   Archivo para estilos globales:
   - variables
   - reset
   - body
   - tipografía base
   - clases utilitarias
   ========================================================= */

/* =========================
   VARIABLES
========================= */

:root {
  --br-green: #009739;
  --br-yellow: #facc15;
  --br-blue: #002776;

  --color-white: #ffffff;
  --color-dark: #0f172a;
  --color-text-light: #e5e7eb;

  --radius-card: 24px;
  --radius-input: 14px;
  --radius-button: 16px;
}

/* =========================
   RESET GLOBAL
========================= */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  padding: 24px;

  font-family: Arial, sans-serif;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle at top left, rgba(34, 197, 94, 0.45), transparent 30%),
    radial-gradient(circle at bottom right, rgba(250, 204, 21, 0.45), transparent 30%),
    linear-gradient(135deg, #009739, #facc15, #002776);

  background-size: 200% 200%;
  animation: brazilBg 8s ease-in-out infinite;
}

/* =========================
   BACKGROUND DECORATION
========================= */

body::before,
body::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  animation: blobMove 10s ease-in-out infinite;
}

body::before {
  width: 420px;
  height: 420px;
  border-radius: 45% 55% 60% 40%;
  top: -120px;
  left: -100px;
}

body::after {
  width: 360px;
  height: 360px;
  border-radius: 60% 40% 45% 55%;
  bottom: -100px;
  right: -90px;
  animation-duration: 12s;
  animation-direction: reverse;
}

/* =========================
   TYPOGRAPHY
========================= */

h2 {
  color: var(--color-white);
}

a {
  color: #38bdf8;
}

/* =========================
   UTILITIES
========================= */

.hidden {
  display: none;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes brazilBg {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes blobMove {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  50% {
    transform: translate(30px, 20px) rotate(12deg);
  }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {
  body {
    padding: 0;
    background-size: cover;
  }

  body,
  body::before,
  body::after {
    animation: none;
  }

  h2 {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }

  p {
    font-size: 0.95rem;
  }
}