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

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

body {
  margin: 0;
  background: var(--tema-fundo);
  color: var(--tema-texto);
  transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
  font-family: var(--fonte-corpo);
  font-weight: var(--peso-corpo);
  font-size: var(--fs-corpo-p);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
}

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

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: 50%;
  translate: -50% -200%;
  z-index: calc(var(--z-overlay) + 1);
  padding: var(--space-3) var(--space-4);
  background: var(--tema-destaque);
  color: var(--texto-sobre-destaque);
  font-weight: var(--peso-corpo-forte);
  border-radius: var(--radius-chip);
  transition: translate var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { translate: -50% 0; outline-color: var(--tema-texto); }

/* rótulo de seção entre parênteses */
.label {
  font-family: var(--fonte-corpo);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-corpo-medio);
  letter-spacing: 0.01em;
}
.label::before { content: "("; }
.label::after { content: ")"; }

/* botões: CTA principal e secundário */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-family: var(--fonte-corpo);
  font-weight: var(--peso-corpo-forte);
  font-size: var(--fs-corpo-p);
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn--primary {
  background: var(--tema-destaque);
  color: var(--texto-sobre-destaque);
}
.btn--primary:hover { background: var(--tema-texto); color: var(--tema-fundo); }
.btn--primary:focus-visible { outline-color: var(--tema-texto); }

.btn--secondary {
  color: var(--tema-texto);
  box-shadow: inset 0 0 0 2px currentColor;
}
.btn--secondary:hover {
  background: var(--tema-texto);
  color: var(--tema-fundo);
  box-shadow: inset 0 0 0 2px var(--tema-texto);
}

/* bandeira do país de lançamento, logo depois do nome do projeto. Acompanha o tamanho do texto. */
.flag {
  display: inline-block;
  height: var(--bandeira-altura);
  aspect-ratio: 3 / 2;
  margin-left: var(--bandeira-vao);
  vertical-align: var(--bandeira-subida);
  border-radius: var(--bandeira-raio);
  overflow: hidden;
  /* linha fina por dentro, para o branco da bandeira não sumir em fundo claro */
  outline: 1px solid var(--bandeira-borda);
  outline-offset: -1px;
}
.flag svg { display: block; width: 100%; height: 100%; }

/* seta dos links de texto */
.link-arrow { flex: none; width: 1em; height: 1em; }

/* ---------- entrada ----------
   Elementos com .enter aparecem quando a página fica pronta (main.js põe is-ready no html
   depois de a fonte carregar). --i define a ordem. */
.js .enter {
  opacity: 0;
  transform: translateY(0.35em);
  filter: blur(10px);
}
.is-ready .enter {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out),
              filter var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .enter { opacity: 1; transform: none; filter: none; }
  .is-ready .enter { transition: none; }
}

/* pílula grande: o link de um cartão inteiro ("todos os trabalhos", o contato) */
.more__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-7);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 2px currentColor;
  font-family: var(--fonte-titulo);
  font-size: var(--fs-titulo-g);
  font-weight: var(--peso-titulo);
  line-height: 1;
  letter-spacing: var(--tracking-titulo);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.more__link:hover {
  background: var(--cena-texto);
  color: var(--cena-fundo);
}
@media (max-width: 560px) {
  .more__link { padding: var(--space-4) var(--space-5); }
}