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

:root {
  /* Paleta */
  --black:   #09090b;
  --white:   #ffffff;
  --gray-50: #fafafa;
  --gray-100:#f4f4f5;
  --gray-200:#e4e4e7;
  --gray-300:#d1d1d6;
  --gray-400:#a0a0ab;
  --gray-500:#71717a;
  --gray-600:#52525b;
  --gray-700:#3f3f46;
  --gray-800:#27272a;
  --gray-900:#18181b;

  --violet-50: #f5f3ff;
  --violet-100:#ede9fe;
  --violet-200:#ddd6fe;
  --violet-400:#a78bfa;
  --violet-500:#8b5cf6;
  --violet-600:#7c3aed;
  --violet-700:#6d28d9;
  --violet-800:#5b21b6;

  --green-400:#4ade80;
  --green-500:#22c55e;

  /* Semánticos */
  --accent:       #6366f1;
  --accent-dark:  #4f46e5;
  --accent-light: #818cf8;
  --accent-dim:   #e0e7ff;

  /* Tipo */
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Espaciado */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
  --s5:1.25rem; --s6:1.5rem; --s8:2rem;  --s10:2.5rem;
  --s12:3rem;   --s16:4rem;  --s20:5rem; --s24:6rem;

  /* Radios */
  --r-sm:.375rem; --r-md:.75rem; --r-lg:1rem;
  --r-xl:1.5rem;  --r-2xl:2rem;  --r-full:9999px;

  /* Sombras */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.10);
  --shadow-xl:  0 16px 48px rgba(0,0,0,.12);
  --shadow-violet: 0 4px 20px rgba(124,58,237,.35);

  --t: 180ms cubic-bezier(.4,0,.2,1);
  --container: 1200px;
}

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

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s5);
}
@media (min-width:768px)  { .container { padding-inline: var(--s8); } }
@media (min-width:1280px) { .container { padding-inline: var(--s12); } }

.sr-only {
  position:absolute;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}