@font-face {
  font-family: "Luckiest Guy";
  src: url("fontes/LuckiestGuy-Regular.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("fontes/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("fontes/Poppins-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --azul-noite: #061b4a;
  --azul: #0b47b0;
  --azul-vivo: #1565d8;
  --azul-texto: #0e2a5c;
  --cinza-azulado: #546c96;
  --amarelo: #fec600;
  --laranja: #ff8a00;
  --branco: #ffffff;
  --sombra: 0 14px 40px rgba(3, 14, 45, 0.35);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Poppins", system-ui, sans-serif;
  line-height: 1.6;
  color: var(--branco);
  background-color: var(--azul-noite);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(41, 140, 255, 0.45), transparent 45%),
    radial-gradient(circle at 85% 35%, rgba(21, 101, 216, 0.5), transparent 50%),
    linear-gradient(180deg, #0b47b0 0%, #082f80 45%, var(--azul-noite) 100%);
  background-attachment: fixed;
}

a {
  color: inherit;
  text-underline-offset: 3px;
}

.pagina {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 16px 56px;
}

.topo {
  text-align: center;
  margin-bottom: 32px;
}

.logo {
  width: min(460px, 86%);
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(3, 14, 45, 0.45));
}

.frase {
  margin: 12px 0 0;
  font-weight: 600;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
}

.equipe {
  margin: 4px 0 0;
  font-family: "Luckiest Guy", "Poppins", sans-serif;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  letter-spacing: 0.04em;
  color: var(--amarelo);
}

.video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  background: #000;
  box-shadow: var(--sombra);
}

.nota {
  margin: 10px 4px 0;
  font-size: 0.9rem;
  opacity: 0.85;
  text-align: center;
}

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 40px;
}

.cartao {
  padding: 22px 24px;
  border-radius: 24px;
  background: var(--branco);
  color: var(--azul-texto);
  box-shadow: var(--sombra);
}

.cartao h2,
.ods h2,
.arquivos h2 {
  margin: 0 0 10px;
  font-family: "Luckiest Guy", "Poppins", sans-serif;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.cartao h2 {
  font-size: 1.45rem;
  color: var(--azul);
}

.cartao p,
.cartao ol {
  margin: 0;
}

.cartao ol {
  padding-left: 1.2em;
}

.cartao li + li {
  margin-top: 6px;
}

.cartao strong {
  color: var(--azul-vivo);
}

.ods {
  margin-top: 48px;
  text-align: center;
}

.ods h2,
.arquivos h2 {
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  color: var(--amarelo);
}

.icones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 18px 0;
}

.icones img {
  width: clamp(92px, 26vw, 150px);
  height: auto;
  box-shadow: 0 8px 22px rgba(3, 14, 45, 0.4);
}

.aviso {
  max-width: 680px;
  margin: 0 auto;
  font-size: 0.78rem;
  opacity: 0.8;
}

.ingles {
  margin-top: 40px;
}

.arquivos {
  margin-top: 40px;
}

.arquivos ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.arquivos a {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--amarelo);
  color: var(--azul-texto);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(3, 14, 45, 0.3);
}

.arquivos a:hover,
.arquivos a:focus-visible {
  background: var(--laranja);
  color: var(--branco);
}

a:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 3px;
}

.rodape {
  margin-top: 48px;
  font-size: 0.85rem;
  opacity: 0.85;
  text-align: center;
}

.rodape p {
  margin: 6px 0;
}