@font-face {
  font-family: Fredoka;
  src: url('assets/fonts/fredoka.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --roxo: #6b3fc9;
  --amarelo: #ffe066;
  --degrau: #e5b800;
  --texto: #2e2440;
  --noite: #232062;
  color: white;
  background: var(--roxo);
  font-family: Fredoka, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: var(--roxo); }
h1, p { margin: 0; }
html { scroll-padding-top: 24px; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 5px; }
::selection { background: var(--amarelo); color: var(--texto); }
.header { padding: 32px clamp(24px, 6vw, 88px); }
.wordmark { font: 600 36px/1 Fredoka, sans-serif; letter-spacing: -1.2px; text-decoration: none; }
.wordmark > span, h1 > span { color: var(--amarelo); }
.hero { height: 100svh; min-height: 320px; position: relative; }
.hero-stage { height: 100%; position: relative; overflow: hidden; }
.hero-scene { width: min(1440px, calc(100% - 80px)); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; grid-template-columns: minmax(0, 32fr) minmax(0, 64fr); align-items: center; gap: 4%; container-type: inline-size; }
.hero-brand { grid-column: 2; grid-row: 1; min-width: 0; }
.hero-go, .hero-paroli { display: block; font-weight: 700; line-height: .95; letter-spacing: -.025em; white-space: nowrap; }
.hero-go { font-size: 8cqw; line-height: .82; }
.hero-paroli { font-size: 18.5cqw; color: var(--amarelo); }
.hero-art { grid-column: 1; grid-row: 1; justify-self: center; width: 100%; max-width: 75svh; aspect-ratio: 1; position: relative; isolation: isolate; pointer-events: none; }
.hero-art .mascot { transform-origin: 50% 50%; animation: mascot-float 7s cubic-bezier(.45, 0, .55, 1) infinite; }
.hero-shadow { position: absolute; z-index: -1; width: 48%; height: 6%; left: 26%; top: 86%; opacity: .85; animation: shadow-float 7s cubic-bezier(.45, 0, .55, 1) infinite; }
.hero-shadow::before, .hero-shadow::after { content: ''; position: absolute; border-radius: 50%; }
.hero-shadow::before { inset: -20% -12%; background: #15134a; opacity: .3; filter: blur(clamp(8px, 1.1cqw, 18px)); }
.hero-shadow::after { inset: 22% 16%; background: #120b24; opacity: .24; filter: blur(clamp(4px, .55cqw, 9px)); }
.hero[data-paused] .mascot, .hero[data-paused] .hero-shadow { animation-play-state: paused; }
@keyframes mascot-float {
  0%, 100% { transform: translate3d(-2px, 4px, 0) rotate(-.4deg); }
  50% { transform: translate3d(2px, -5px, 0) rotate(.4deg); }
}
@keyframes shadow-float {
  0%, 100% { transform: scale(.96, .9); opacity: .85; }
  50% { transform: scale(1.05, 1.12); opacity: .62; }
}
.copy { width: min(1100px, calc(100% - 48px)); margin-inline: auto; padding-block: 48px 112px; text-align: center; }
h1 { font: 600 clamp(52px, 5.8vw, 80px)/1.05 Fredoka, sans-serif; letter-spacing: -.01em; }
.copy > p { margin-top: 26px; font-size: 24px; font-weight: 600; line-height: 1.4; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 78px; margin-top: 32px; padding: 17px 32px; border-radius: 16px; color: var(--texto); background: var(--amarelo); box-shadow: 0 6px 0 var(--degrau); font-size: 30px; font-weight: 600; text-decoration: none; transition: transform 120ms ease-out, box-shadow 120ms ease-out; }
.button:focus-visible { outline: 3px solid white; outline-offset: 10px; }
.button:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--degrau); }
.mascot { display: block; width: 100%; height: auto; }
.site-footer { width: min(1100px, calc(100% - 48px)); margin-inline: auto; padding-block: 26px 32px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid #ffffff30; font-size: 14px; line-height: 1.5; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer a { display: inline-block; padding-block: 8px; text-decoration: none; }
.site-footer a[aria-current] { color: var(--amarelo); }
.inner-page { display: flex; flex-direction: column; }
.inner-page .site-footer { margin-top: auto; }
.document-page { width: min(820px, calc(100% - 48px)); margin: 32px auto 64px; padding: clamp(26px, 5vw, 56px); border-radius: 28px; background: white; color: var(--texto); box-shadow: 0 24px 64px #15134a33; }
.document-page h1 { font-size: clamp(36px, 4.5vw, 56px); line-height: 1.12; }
.document-page h2 { margin: 44px 0 16px; font-size: 32px; font-weight: 600; line-height: 1.2; }
.document-page p { font-size: 18px; font-weight: 400; line-height: 1.7; }
.document-page p + p { margin-top: 16px; }
.document-page .document-lead { margin-top: 24px; font-size: 22px; line-height: 1.5; }
.document-page .document-date { margin-top: 16px; font-size: 15px; }
.document-page a { text-underline-offset: 4px; overflow-wrap: anywhere; }
.document-page a:focus-visible { outline-color: var(--noite); }
.contact-email { display: inline-block; margin-block: 36px; font-size: clamp(23px, 4.5vw, 36px); font-weight: 600; }

@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .button:hover { transform: translateY(-1px); box-shadow: 0 7px 0 var(--degrau); }
  .button:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--degrau); }
}

@media (max-width: 700px) {
  .header { padding-block: 24px; text-align: center; }
  .wordmark { font-size: 31px; }
  .copy { padding-block: 32px 80px; }
  h1 { font-size: clamp(39px, 10vw, 58px); letter-spacing: -1px; }
  .copy > p { margin: 20px auto 0; }
  .button { margin-top: 25px; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 8px; font-size: 13px; }
  .site-footer nav { gap: 8px 18px; }
  .document-page { margin-top: 16px; border-radius: 22px; }
}

@media (max-width: 700px) {
  .hero-scene { width: calc(100% - 32px); grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hero-brand { grid-column: 1; grid-row: 1; text-align: center; }
  .hero-go { font-size: 20cqw; }
  .hero-paroli { font-size: 30cqw; }
  .hero-art { grid-column: 1; grid-row: 2; width: 76%; max-width: 34svh; }
}

@media (max-width: 700px) and (max-height: 700px) {
  .header { padding-block: 18px; }
  .copy > p { margin-top: 14px; }
  .button { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
  .hero-art .mascot, .hero-shadow { animation: none; }
}