:root {

  --bg: #11120f;
  --surface: #191b17;
  --surface-menu: #1a1d14;
  --surface-processo: #1a1c16;

  --line: #35382f;

  --borda: #8a8f78;

  --text: #f3f1e8;
  --muted: #b0b3a5;

  --amarelo-base: #8f7d1f;
  --amarelo: #d2ba3a;         
  --amarelo-claro: #e8d87e;   
  --amarelo-ativo: #bfa62c;   
  --escuro: #11120f;

  --brilho: 0 0 24px 4px rgba(143, 125, 31, 0.6), 0 0 60px 16px rgba(143, 125, 31, 0.25);

  --brilho-filtro: drop-shadow(0 0 10px rgba(143, 125, 31, 0.85)) drop-shadow(0 0 26px rgba(210, 186, 58, 0.35));

  --degrade-amarelo: linear-gradient(180deg, #d2ba3a 0%, #c9b034 50%, #b89f28 100%);
  --degrade-amarelo-hover: linear-gradient(180deg, #dcc54a 0%, #d2ba3a 50%, #bfa62c 100%);

  --degrade-cartao: linear-gradient(180deg,
    #d2ba3a 0%,
    #d1b93a 5%,
    #cfb739 10%,
    #ccb538 15%,
    #c8b137 20%,
    #c2ac36 25%,
    #bca735 30%,
    #b6a133 35%,
    #ae9a31 40%,
    #a5932f 45%,
    #9c8a2c 50%,
    #92812a 55%,
    #877827 60%,
    #7b6e24 65%,
    #6f6321 70%,
    #62571d 75%,
    #544b1a 80%,
    #463e16 85%,
    #363112 90%,
    #27230e 95%,
    #16140a 100%);

  --erro-no-escuro: #ffb4a8;  

  --margem: clamp(20px, 5vw, 60px);

  --altura-header: 80px;

  --seta-tamanho: 52px;
  --seta-distancia: 24px;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/bricolage-grotesque-700-latin.woff2') format('woff2');
}

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

html {
  scroll-padding-top: calc(var(--altura-topo, 112px) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;  
  line-height: 1.6;
}

body {
  background-image:
    radial-gradient(ellipse 55vw 700px at 92% 4%, rgba(150, 122, 24, 0.16), transparent 70%),
    radial-gradient(ellipse 50vw 800px at 4% 20%, rgba(150, 122, 24, 0.13), transparent 70%),
    radial-gradient(ellipse 45vw 700px at 96% 38%, rgba(150, 122, 24, 0.12), transparent 70%),
    radial-gradient(ellipse 55vw 800px at 2% 58%, rgba(150, 122, 24, 0.13), transparent 70%),
    radial-gradient(ellipse 50vw 700px at 94% 78%, rgba(150, 122, 24, 0.12), transparent 70%),
    radial-gradient(ellipse 60vw 600px at 30% 99%, rgba(150, 122, 24, 0.14), transparent 70%);
  background-repeat: no-repeat;
}

body.menu-aberto {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
summary,
select {
  touch-action: manipulation;
}

button {
  cursor: pointer;
}

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

main:focus {
  outline: none;
}

.wrap {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--margem);
}

.topo-sentinela {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

main > section,
main > .avisos {
  position: relative;
}

.fim-secao {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

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

.skip {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--amarelo);
  color: var(--escuro);
  font-weight: 700;
}

.skip:focus {
  top: 12px;
}

.button {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 52px;
  padding: 14px 22px;
  background: var(--degrade-amarelo);

  border: 2px solid transparent;
  background-origin: border-box;
  border-radius: 4px;
  color: var(--escuro);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  background: var(--degrade-amarelo-hover);
  box-shadow: var(--brilho);
}

.button:active {
  background: var(--amarelo-ativo);
  box-shadow: none;
}

.button--pequeno {
  min-height: 48px;
  padding: 10px 18px;
  gap: 18px;
}

.botao-redondo {
  display: grid;
  place-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 2px solid var(--borda);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.botao-redondo:hover {
  border-color: var(--amarelo);
  color: var(--amarelo);
  box-shadow: var(--brilho);
}

.botao-redondo[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

.botao-redondo[aria-disabled="true"]:hover {
  border-color: var(--borda);
  color: var(--text);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 0;
  background: none;
  border: 0;
  color: var(--text);
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.text-link:hover {
  color: var(--amarelo);
}

.text-link:not(:has(.link-texto)) {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.link-no-texto,
a:not([class]) {
  color: var(--amarelo);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.link-no-texto:hover,
a:not([class]):hover {
  color: var(--amarelo-claro);
}

.link-portfolio {
  color: var(--amarelo);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}

.link-portfolio:hover {
  color: var(--amarelo-claro);
}

.link-texto {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.eyebrow {
  margin: 0 0 19px;
  color: var(--amarelo);
  font-size: 0.875rem;  
  font-weight: 700;
  letter-spacing: 0.12em;
}

.hero .eyebrow {
  font-size: 1rem;  
  letter-spacing: 0.02em;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--amarelo);
}

h1 {
  margin: 0 0 26px;
  font-family: 'Bricolage Grotesque', Arial, Helvetica, sans-serif;
  font-size: clamp(2.25rem, 10vw, 2.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 em {
  display: block;
  margin-top: 0.3em;
  font-style: normal;
  color: var(--amarelo);
}

h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 1.25rem;
  font-weight: 500;
}

.revelar {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.revelar.is-revelado {
  opacity: 1;
  transform: none;
}

.topo-fixo {
  display: contents;
}

@media (min-width: 700px) {
  .topo-fixo {
    position: sticky;
    top: 0;
    z-index: 30;
    display: block;
  }

  .topo-fixo .cabecalho {
    position: relative;
  }
}

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

/* INÍCIO CABEÇALHO TRANSLÚCIDO
   Mesmo efeito da barra do rodapé: fundo 88% opaco com desfoque.
   O vidro fica num ::before, e não no próprio .cabecalho, de propósito:
   backdrop-filter no cabeçalho faria o menu do celular (position: fixed, que mora
   dentro dele) passar a medir o cabeçalho em vez da tela, e a gaveta encolheria.
   Contraste do texto no pior caso (fundo branco atrás): 11,99:1 (AAA).
   Para desfazer, apague este bloco inteiro. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cabecalho {
    background: transparent;
  }

  .cabecalho::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(17, 18, 15, 0.88);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
  }
}

/* Quem pede menos transparência no sistema vê o fundo sólido de antes. */
@media (prefers-reduced-transparency: reduce) {
  .cabecalho {
    background: var(--bg);
  }

  .cabecalho::before {
    display: none;
  }
}
/* FIM CABEÇALHO TRANSLÚCIDO */

.cabecalho__conteudo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: 1280px;
  min-height: var(--altura-header);
  margin-inline: auto;
  padding: 10px var(--margem);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  line-height: 1;
}

.brand img {
  flex: none;
  width: auto;
  height: 44px;
}

.brand > span {
  font-size: 1.125rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.brand small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.03em;
}

.menu-botao {
  position: relative;
  z-index: 3;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  background: var(--bg);
  border: 2px solid var(--borda);
  border-radius: 6px;
  color: var(--amarelo);
}

.menu-botao:hover {
  border-color: var(--amarelo);
}

.menu-botao__fechar,
.menu-botao[aria-expanded="true"] .menu-botao__abrir {
  display: none;
}

.menu-botao[aria-expanded="true"] .menu-botao__fechar {
  display: inline;
}

.menu-fundo {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}

.menu-aberto .menu-fundo {
  opacity: 1;
  visibility: visible;
}

.menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: min(86vw, 340px);
  padding: 96px 24px 32px;
  overflow-y: auto;
  background: var(--surface-menu);
  border-left: 2px solid var(--amarelo-base);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s;
}

.menu-aberto .menu {
  transform: translateX(0);
  visibility: visible;
  /* Ao abrir, o menu fica visível na hora (sem esperar a transição),
     para o foco do teclado conseguir entrar no primeiro link. */
  transition: transform 0.3s ease, visibility 0s;
}

.menu__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
  font-size: 1.125rem;
}

.menu__link:hover {
  color: var(--amarelo);
}

.menu .button {
  margin-top: 20px;
}

.animacoes-botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 4px 0;
  background: none;
  border: 0;
  color: var(--text);
  font-size: 1rem;
  text-align: left;
}

.animacoes-botao:hover .animacoes-botao__trilho {
  border-color: var(--amarelo);
}

.animacoes-botao__trilho {
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  border: 2px solid var(--borda);
  border-radius: 999px;
}

.animacoes-botao__bolinha {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--borda);
  transition: transform 0.2s ease;
}

.animacoes-botao[aria-pressed="true"] .animacoes-botao__trilho {
  background: var(--amarelo);
  border-color: var(--amarelo);
}

.animacoes-botao[aria-pressed="true"] .animacoes-botao__bolinha {
  background: var(--escuro);
  transform: translateX(20px);
}

.animacoes-botao[aria-disabled="true"] {
  cursor: not-allowed;
}

.hero {
  display: flex;
  flex-direction: column;
  padding-top: 39px;
  padding-bottom: 20px;
  overflow: hidden;
}

.intro {
  max-width: 30rem;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 24px;
}

.hero-note {
  margin-top: 25px;
  color: var(--muted);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
}

.hero-note span {
  margin: 0 7px;
}

.hero-art {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: 380px;
  margin: 20px auto 0;
}

.orbit {
  position: absolute;
  top: 56px;
  left: calc(50% - 145px);
  width: 290px;
  height: 290px;
  border: 1px solid #444a32;
  border-radius: 50%;
}

.orbit::after {
  content: '';
  position: absolute;
  inset: 22px;
  border: 1px dashed #393e2c;
  border-radius: 50%;
}

.orbit {
  --mana-tamanho: 34px;
}

.orbit__mana {
  position: absolute;
  inset: 0;
  rotate: var(--angulo);
}

.orbit__mana--branco {
  --angulo: 0deg;
}

.orbit__mana--azul {
  --angulo: 72deg;
}

.orbit__mana--preto {
  --angulo: 144deg;
}

.orbit__mana--vermelho {
  --angulo: 216deg;
}

.orbit__mana--verde {
  --angulo: 288deg;
}

.orbit__mana img {
  position: absolute;
  top: calc(var(--mana-tamanho) / -2);
  left: calc(50% - var(--mana-tamanho) / 2);
  width: var(--mana-tamanho);
  height: var(--mana-tamanho);
  rotate: calc(-1 * var(--angulo));
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.85));
}

.art-note {
  display: block;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: right;
}

.hero-card {
  position: absolute;
  width: 158px;
  height: 222px;
  object-fit: cover;
  border: 4px solid #1a1b18;
  border-radius: 12px;
  box-shadow: 0 25px 35px #0009;
}

.card-back {
  top: 116px;
  left: calc(50% - 145px);
  transform: rotate(-17deg);
}

.card-front {
  top: 76px;
  left: calc(50% - 7px);
  transform: rotate(13deg);
}

@media (prefers-reduced-motion: no-preference) {
  .orbit {
    animation: girar-orbita 60s linear infinite;
  }

  .orbit__mana img {
    animation: manter-em-pe 60s linear infinite;
  }

  .card-back {
    animation: flutuar-fundo 7s ease-in-out infinite;
  }

  .card-front {
    animation: flutuar-frente 6s ease-in-out -3s infinite;
  }
}

@keyframes girar-orbita {
  to {
    rotate: 360deg;
  }
}

@keyframes manter-em-pe {
  from {
    rotate: calc(-1 * var(--angulo));
  }

  to {
    rotate: calc(-1 * var(--angulo) - 360deg);
  }
}

@keyframes flutuar-fundo {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }

  50% {
    translate: 0 -8px;
    rotate: -1deg;
  }
}

@keyframes flutuar-frente {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }

  50% {
    translate: 0 -12px;
    rotate: 1deg;
  }
}

.art-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}

@media (max-width: 359px) {
  .orbit {
    left: calc(50% - 130px);
    width: 260px;
    height: 260px;
  }

  .hero-card {
    width: 138px;
    height: 194px;
  }

  .card-back {
    left: calc(50% - 132px);
  }

  .card-front {
    left: calc(50% - 10px);
  }
}

.avisos {
  background: var(--degrade-amarelo);
  color: var(--escuro);  
  border-bottom: 1px solid var(--amarelo-base);
}

.avisos__conteudo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: 12px 4px;
}

.avisos__lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.avisos__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;  
  line-height: 1.45;
}



.avisos__item::before {
  content: "" / "";
  flex: none;
  font-size: 1.125rem;
  line-height: 1.25;
}

.avisos__item b {
  font-weight: 800;
}

.avisos__texto {
  text-wrap: balance;
}

.avisos__selo {
  display: none;
  padding: 3px 10px;
  background: var(--escuro);
  border-radius: 999px;
  color: var(--amarelo);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
}

.avisos__link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--escuro);
  font-size: 0.9375rem;  
  font-weight: 600;
  text-decoration: none;
}

.avisos__link:hover .link-texto {
  text-decoration-thickness: 2px;
}

.avisos__link:focus-visible {
  outline-color: var(--escuro);
}

.secao-destaque {
  border-image: linear-gradient(var(--surface-processo), var(--surface-processo)) fill 0 / 0 / 0 100vmax;
}

main > section + section:not(.briefing)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(640px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amarelo-base) 30%, transparent 46%,
      transparent 54%, var(--amarelo-base) 70%, transparent);
  translate: -50% 0;
}

main > section + section:not(.briefing)::after {
  content: "" / "";
  position: absolute;
  top: 0;
  left: 50%;
  color: var(--amarelo);
  font-size: 1.25rem;
  line-height: 1;
  translate: -50% -50%;
}

.section-top {
  margin-bottom: 23px;
}

.section-top p:not(.eyebrow),
.faq__intro > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.section-top p:not(.eyebrow) {
  margin-top: 20px;
}

.trabalhos-abas {
  max-width: 720px;
  margin-inline: auto;
}

.trabalhos-abas__lista {
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
  padding: 2px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.trabalhos-abas__lista::-webkit-scrollbar {
  display: none;
}

.trabalhos-aba {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted);
}

.trabalhos-aba__pilula {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;  
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.trabalhos-aba__pilula::before {
  content: "" / "";
  font-size: 0.875rem;
  line-height: 1;
}

.trabalhos-aba:hover .trabalhos-aba__pilula {
  border-color: var(--amarelo-base);
  color: var(--amarelo);
}

.trabalhos-aba[aria-selected="true"] .trabalhos-aba__pilula {
  border-color: var(--amarelo-base);
  background: rgba(143, 125, 31, 0.14);
  color: var(--amarelo);
}

.trabalhos-aba:focus-visible {
  outline: none;
}

.trabalhos-aba:focus-visible .trabalhos-aba__pilula {
  outline: 3px solid var(--amarelo);
  outline-offset: 3px;
}

/* INÍCIO AJUSTE DO CARROSSEL — mude só estes números
   --carrossel-largura-max-celular: largura máxima da carta no celular e no tablet (até 1023 px).
   --carrossel-largura-max: largura da carta no desktop (1024 px ou mais).
     Se não couber com as pílulas ao lado, ela encolhe sozinha.
   --pilulas-largura-min: largura mínima da coluna de pílulas (1280 px ou mais).
     O texto das pílulas quebra em duas linhas quando a coluna fica estreita.
   --acervo-gap: espaço entre a carta e as pílulas ao lado dela (1280 px ou mais).
   --etapas-gap: espaço entre as etapas 01, 02 e 03 (desktop, 1024 px ou mais).
   A altura da carta sempre segue a proporção 63 × 88. */
.vitrine {
  --carrossel-largura-max-celular: 420px;
  --carrossel-largura-max: 380px;
  --pilulas-largura-min: 8rem;
  --acervo-gap: 16px;
  --etapas-gap: 24px;
}
/* FIM AJUSTE DO CARROSSEL */

.moldura-jogo {

  /* Fill container com Max width: a carta depende só da largura da tela. */
  width: 100%;
  max-width: var(--carrossel-largura-max-celular);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px;  
  background: var(--degrade-cartao);

  border-radius: 12px;  
  box-shadow: 0 0 22px 3px rgba(210, 186, 58, 0.28), 0 0 60px 12px rgba(143, 125, 31, 0.22), 0 16px 40px rgba(0, 0, 0, 0.55);
}

.moldura-jogo .carrossel__palco {
  order: 1;
}

.moldura-jogo .carrossel__rodape {
  order: 2;
}

.carrossel__fotos {
  display: grid;
  padding: 0;  
  overflow: hidden;  
  background: var(--bg);
  border-radius: 10px;
  touch-action: pan-y;  
}

.carrossel__slide {
  grid-area: 1 / 1;
  min-width: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.carrossel__slide.is-atual {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s;
}

.carrossel__slide.is-vizinho {
  opacity: 1;
  visibility: visible;
  transition: none;
}

.carrossel__fotos.is-arrastando .carrossel__slide {
  transition: none;
}

.carrossel__slide.is-soltando {
  transition: transform 0.3s ease;
}

.carrossel__slide.sem-transicao {
  transition: none;
}

.carrossel__ampliar img {
  -webkit-user-drag: none;
}

.carrossel__ampliar,
.carrossel__video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 63 / 88;
  padding: 0;
  overflow: hidden;
  background: #1d1f19;
  border: 0;
  border-radius: 0;  
}

.carrossel__ampliar {
  padding: 0;  
  cursor: zoom-in;
}

.carrossel__ampliar img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;  
}

.carrossel__ampliar .carrossel__fundo,
.carrossel__video .carrossel__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(16px) brightness(0.62) saturate(1.2);
  transform: scale(1.15);
  pointer-events: none;
}

.carrossel__ampliar:focus-visible {
  outline-offset: -4px;
}

.expand {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-content: center;
  width: 32px;
  height: 32px;
  background: #14160ee8;
  border: 1px solid #777d61;
  border-radius: 50%;
  color: var(--amarelo);
}

.carrossel__video {
  display: flex;
  justify-content: center;
}

.carrossel__video-quadro {
  width: 100%;
  height: 100%;
}

.carrossel__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.carrossel__legenda {
  padding: 10px 4px 12px;
  overflow: hidden;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.carrossel__palco {
  position: relative;
}

.carrossel__seta {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(17, 18, 15, 0.82);
  border: 2px solid var(--borda);
  border-radius: 50%;
  color: var(--text);
  translate: 0 -50%;
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.carrossel__seta--anterior {
  left: 14px;
}

.carrossel__seta--proxima {
  right: 14px;
}

.carrossel__seta:hover {
  border-color: var(--amarelo);
  color: var(--amarelo);
  box-shadow: var(--brilho);
}

.carrossel__rodape {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: 6px;
  background: var(--bg);
  border-radius: 10px;
}

.carrossel__rodape .botao-redondo {
  width: 44px;
  height: 44px;
}

.carrossel .icone-tocar,
.carrossel.is-pausado .icone-pausar {
  display: none;
}

.carrossel.is-pausado .icone-tocar {
  display: block;
}

.carrossel__bolinhas {
  display: flex;
  grid-column: 2;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.carrossel__bolinha.is-fora {
  display: none;
}

.carrossel__bolinha.is-ponta:not(.is-atual) {
  transform: scale(0.6);
}

.carrossel__bolinha {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(210, 186, 58, 0.38);
  box-shadow: 0 0 4px rgba(210, 186, 58, 0.25);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.carrossel__bolinha.is-atual {
  background: var(--amarelo);
  box-shadow: 0 0 6px 2px rgba(210, 186, 58, 0.6), 0 0 14px 4px rgba(143, 125, 31, 0.45);
  transform: scale(1.4);
}

.carrossel__bolinha.is-passando {
  animation: bolinha-passa 0.45s ease-out;
}

@keyframes bolinha-passa {
  0% {
    transform: scale(0.7);
    box-shadow: none;
  }

  55% {
    transform: scale(1.9);
  }

  100% {
    transform: scale(1.4);
  }
}

@media (pointer: fine) {
  .carrossel__fotos {
    cursor: grab;
  }
}

.collection-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.875rem;
}

.videos {
  padding-top: 20px;
  padding-bottom: 49px;
}

.videos__controles {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 16px;
}

.videos__grade {
  --visiveis: 1.6;
  --vao: 15px;
  display: flex;
  gap: var(--vao);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;

  scrollbar-width: none;
}

.videos__grade::-webkit-scrollbar {
  display: none;
}

.videos__grade {
  --esmaecer-esq: 0px;
  --esmaecer-dir: 0px;
  mask-image: linear-gradient(to right,
      transparent 0, #000 var(--esmaecer-esq),
      #000 calc(100% - var(--esmaecer-dir)), transparent 100%);
}

.videos__grade.tem-antes {
  --esmaecer-esq: 48px;
}

.videos__grade.tem-mais {
  --esmaecer-dir: 72px;
}

.video-card {
  position: relative;
  flex: 0 0 calc((100% - (var(--visiveis) - 1) * var(--vao)) / var(--visiveis));
  margin: 0;
  scroll-snap-align: start;
}

.video-card video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #000;
  border-radius: 4px;
}

video:fullscreen {
  object-fit: contain !important;
  border-radius: 0 !important;
}

video:-webkit-full-screen {
  object-fit: contain !important;
  border-radius: 0 !important;
}

.video-card figcaption {
  padding-top: 12px;
}

.video-card figcaption b {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}

.video-card figcaption small,
.midia-card figcaption small {
  display: block;
  width: fit-content;
  margin-top: 6px;
  padding: 4px 10px;
  border: 1px solid var(--amarelo-base);
  border-radius: 14px;  
  background: rgba(143, 125, 31, 0.14);  
  color: var(--amarelo);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

@supports (text-box: trim-both cap alphabetic) {
  .video-card figcaption small,
  .midia-card figcaption small {
    padding: 7px 10px;
    text-box: trim-both cap alphabetic;
  }
}

.video-card__descricao {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

@media (pointer: fine) {
  .videos__grade {
    cursor: grab;
  }
}

.videos__grade.is-arrastando,
.carrossel__fotos.is-arrastando {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

:has(> video) {
  position: relative;
}

:has(> video)::after {
  content: "" / "";
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 70px;
  height: 54px;
  background: url("assets/imgs/logo-grillo-proxies-200.webp") no-repeat center / contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
  pointer-events: none;
}

.midia {
  padding-top: 20px;
  padding-bottom: 49px;
}

/* A faixa do "Na mídia" usa o mesmo componente da faixa de vídeos (.videos__grade
   no HTML e montarFaixa no app.js). Cada card é um frame vertical: mídia 9:16 em cima
   e legenda embaixo (Hug, quebra linha). A largura do card vem da faixa, nunca do texto;
   legendas longas só deixam o card mais alto. */

.midia-card {
  margin: 0;
}

.midia-card__player {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #000;
  border-radius: 4px;
}

.midia-card__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.midia-card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
}

.midia-card__play img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;  
}

.midia-card__icone {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: var(--degrade-amarelo);
  border-radius: 50%;
  color: var(--escuro);
  transition: box-shadow 0.2s ease;
}

/* Identificação visível antes de carregar o YouTube. */
.midia-card__origem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 10px;
  font-size: 0.875rem;
  line-height: 1.5;
}
.midia-card__plataforma {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--amarelo-claro);
  font-weight: 700;
}
.midia-card__plataforma svg { flex-shrink: 0; }
.midia-card__canal { color: var(--text); }

/* Capas dos vídeos locais: os controles aparecem só ao reproduzir. */
.video-player {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
}
.carrossel__video .video-player { height: 100%; }
.video-player__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--escuro);
  cursor: pointer;
}
.video-player__play[hidden] { display: none; }
.video-player__legenda {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  padding: 8px 10px;
  border-radius: 4px;
  background: rgba(17, 18, 15, 0.95);
  color: var(--amarelo-claro);
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
}
.video-player__legenda[hidden] { display: none; }

.video-player__icone {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--degrade-amarelo);
  box-shadow: 0 3px 16px rgb(0 0 0 / 35%);
}
.video-player__play:hover .video-player__icone { box-shadow: var(--brilho); }
.video-player__play:focus-visible { outline-offset: -5px; }
.video-player__play.is-carregando { cursor: progress; }
.video-player__play.is-carregando .video-player__icone { opacity: 0.65; }

.midia-card__play:hover .midia-card__icone {
  box-shadow: var(--brilho);
}

.midia-card__play:focus-visible {
  outline-offset: -4px;
}

.midia-card__play:disabled {
  cursor: not-allowed;
}

.midia-card figcaption {
  padding-top: 12px;
}

.midia-card figcaption b {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}

.icone-instagram {
  flex-shrink: 0;
  color: var(--amarelo);
  filter: drop-shadow(0 1px 1.5px #1f1408);
}

.vitrine {
  padding: 43px 0;
}

.vitrine__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
}

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 21px;
  margin-top: 28px;
}

.steps article {
  display: grid;
  grid-template-columns: 35px 1fr;
  column-gap: 12px;
  padding-top: 18px;
  border-top: 1px solid #484f38;
}

.steps article > span {
  grid-row: 1 / 3;
  padding-top: 4px;
  color: var(--amarelo);
  font-family: monospace;
  font-size: 1rem;
}

.steps h3 {
  margin: 0;
}

.steps p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 1.0625rem;
  transition: color 0.35s ease;
}

.steps article,
.questions details {
  position: relative;
  isolation: isolate;
  transition: border-color 0.35s ease;
}

.steps article::before,
.questions details::before {
  content: "";
  position: absolute;
  inset: 0 -16px;  
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, rgba(210, 186, 58, 0.06), transparent 75%),
    linear-gradient(90deg, transparent, rgba(210, 186, 58, 0.1) 20%, rgba(210, 186, 58, 0.1) 80%, transparent);
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.steps article:hover::before,
.questions details:hover::before,
.questions details:focus-within::before {
  opacity: 1;
}

.steps article:hover {
  border-top-color: var(--amarelo-base);
}

.questions details:hover,
.questions details:focus-within {
  border-bottom-color: var(--amarelo-base);
}

.steps article:hover p,
.questions details:hover p,
.questions details:focus-within p {
  color: #d6d8cc;
}

.questions details p {
  transition: color 0.35s ease;
}

@media (min-width: 1024px) {
  .steps article::before,
  .questions details::before {
    inset: 0 -28px;
  }
}

.faq {
  padding-top: 48px;
  padding-bottom: 46px;
}

/* Auto layout: textos numa coluna (Fill) e mascote noutra (Hug), lado a lado.
   Se o título crescer, o mascote não fica por cima do texto. */
.faq__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: start;
  margin-bottom: 25px;
}

.faq__intro > :not(.mascot) {
  grid-column: 1;
}

.mascot {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin-top: 25px;
  width: 115px;
  height: 115px;
  object-fit: contain;
  transform: rotate(-6deg);
}

details {
  border-bottom: 1px solid var(--line);
}

summary {
  position: relative;
  min-height: 44px;
  padding: 16px 32px 16px 0;
  font-size: 1.0625rem;
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 3px;
  color: var(--amarelo);
  font-size: 1.5rem;
  transform: translateY(-50%);
}

details[open] summary::after {
  content: '−';
}

details p {
  margin: 0 26px 23px 0;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.8;
}

.briefing {
  margin-bottom: 39px;
}

.briefing__card {
  display: grid;
  gap: 32px;
  padding: 32px 14px;
  background: var(--degrade-cartao);
  border-radius: 16px;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.65);
  color: var(--escuro);
}

.briefing__card :focus-visible {
  outline-color: var(--escuro);
}

.briefing .eyebrow {
  color: var(--escuro);
}

.briefing h2 {
  margin: 0 0 16px;
  font-weight: 700;
}

.briefing__intro {
  padding-inline: 6px;
}

.briefing__intro > p:not(.eyebrow) {
  margin: 0;
  color: var(--escuro);
}

.briefing__cartas {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: 40px;
  padding-inline: 2%;
}

.briefing__carta {
  position: relative;
  display: block;
  flex: none;
  width: 40%;
  max-width: 280px;
  margin-inline: -4%;
  overflow: hidden;
  container-type: inline-size;  
  border-radius: 6% / 4.3%;
  box-shadow: 0 0 24px 8px rgba(0, 0, 0, 0.7), 0 0 56px 16px rgba(0, 0, 0, 0.4), 0 22px 40px rgba(0, 0, 0, 0.6);
}

.briefing__carta img {
  display: block;
  width: 100%;
  height: auto;
}

.briefing__carta::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 6px solid #0b0b0a;  
  border-width: 4.2cqi;  
  border-radius: inherit;
  pointer-events: none;
}

.briefing__carta:nth-child(1) {
  rotate: -9deg;
  translate: 0 6%;
}

.briefing__carta:nth-child(2) {
  z-index: 1;
  translate: 0 -2%;
}

.briefing__carta:nth-child(3) {
  rotate: 9deg;
  translate: 0 6%;
}

.formulario {
  --painel: #0d0e0b;
  --campo: #1a1b16;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-self: start;
  padding: 48px 18px 26px;
  background:
    linear-gradient(var(--amarelo), var(--amarelo)) top 5px left 5px / 10px 10px no-repeat,
    linear-gradient(var(--amarelo), var(--amarelo)) top 5px right 5px / 10px 10px no-repeat,
    linear-gradient(var(--amarelo), var(--amarelo)) bottom 5px left 5px / 10px 10px no-repeat,
    linear-gradient(var(--amarelo), var(--amarelo)) bottom 5px right 5px / 10px 10px no-repeat,
    var(--painel);
  border: 2px solid var(--amarelo);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 6px var(--painel),
    inset 0 0 0 7px var(--amarelo-base),
    0 18px 40px rgba(0, 0, 0, 0.6);
  color: var(--text);
}

.formulario::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 50%;
  width: min(240px, 60%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amarelo-base) 20%, transparent 46%,
      transparent 54%, var(--amarelo-base) 80%, transparent);
  translate: -50% 0;
}

.formulario::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--amarelo);
  rotate: 45deg;
  translate: -50% 0;
}

.formulario__titulo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 4px;
  color: var(--text);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.formulario__titulo::before,
.formulario__titulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--amarelo-base);
}

.formulario :focus-visible {
  outline-color: var(--amarelo);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.campo label,
.formulario__resultado label {
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
}

.formulario input,
.formulario select,
.formulario textarea {
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  background: var(--campo);
  border: 1px solid var(--borda);
  border-radius: 6px;
  color: var(--text);
  font-size: 1.0625rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.formulario input:hover,
.formulario select:hover,
.formulario textarea:hover {
  border-color: var(--amarelo-base);
}

.formulario textarea {
  min-height: 120px;
  resize: vertical;
}

.formulario select {
  padding-right: 52px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f3f1e8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 24px;
  cursor: pointer;
}

@media (forced-colors: active) {
  .formulario select {
    padding-right: 16px;
    appearance: auto;
    background-image: none;
  }
}

.formulario select option,
.formulario select optgroup {
  background-color: var(--campo);
  color: var(--text);
  font-weight: 600;
  opacity: 1;
}

.formulario ::placeholder {
  color: #6e7064;
  opacity: 1;
}

.formulario [aria-invalid="true"] {
  border-width: 3px;
  border-color: var(--erro-no-escuro);
}

.campo--opcoes {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.campo--opcoes legend {
  margin-bottom: 8px;
  padding: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
}

.opcoes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

@media (min-width: 500px) {
  .opcoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

.opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: 6px;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.formulario .opcao input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.opcao__icone {
  flex: none;
}

.opcao__texto {
  flex: 1;
}

.opcao__marca {
  display: none;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--escuro);
  border-radius: 50%;
  color: var(--amarelo);
}

.opcao:hover {
  border-color: var(--amarelo);
  box-shadow: var(--brilho);
}

.opcao:has(input:checked) {
  background: var(--degrade-amarelo);
  border-color: var(--amarelo);
  color: var(--escuro);
}

.opcao:has(input:checked) .opcao__marca {
  display: grid;
}

.opcao:has(input:focus-visible) {
  outline: 3px solid var(--amarelo);
  outline-offset: 3px;
}

.campo__dica {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

.campo__erro {
  margin: 0;
  color: var(--erro-no-escuro);
  font-size: 1rem;
  font-weight: 700;
}

.formulario__erros {
  padding: 16px 20px;
  background: var(--campo);
  border: 3px solid var(--erro-no-escuro);
  border-radius: 6px;
  color: var(--erro-no-escuro);
}

.formulario__erros p {
  margin: 0 0 8px;
  font-weight: 700;
}

.formulario__erros ul {
  margin: 0;
  padding-left: 20px;
}

.formulario__erros a,
.formulario__erros a:hover {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.formulario__enviar {
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  margin-top: 4px;
  font-size: 1.125rem;
}

.formulario__nota {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  text-align: center;
}

.formulario__resultado {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}

.formulario__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.formulario .text-link {
  color: var(--text);
}

.formulario .text-link:hover {
  color: var(--amarelo);
  text-shadow: 0 0 12px rgba(210, 186, 58, 0.6);
}

.formulario__status {
  min-height: 1.6em;
  margin: 0;
  font-weight: 700;
}

.entrega {
  padding-top: 43px;
  padding-bottom: 49px;
}

.entrega__fotos {
  display: grid;
  gap: 24px;
}

.entrega__foto {
  margin: 0;
}

.entrega__foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.entrega__foto figcaption {
  padding-top: 12px;
  color: var(--muted);
  font-size: 1rem;
}

footer {
  padding-bottom: calc(var(--seta-tamanho) + var(--seta-distancia) * 2 + env(safe-area-inset-bottom));
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-bottom: 28px;
}

.footer-logo {
  display: inline-block;
  border-radius: 8px;
}

.footer-logo img {
  display: block;
  width: 140px;
  height: auto;
  transition: filter 0.2s ease;
}

.footer-logo:hover img,
.footer-logo:focus-visible img {
  filter: var(--brilho-filtro);
}

.footer-top p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.footer-redes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-redes__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.footer-redes__icone {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--degrade-amarelo);
  border-radius: 50%;
  color: var(--escuro);
  transition: box-shadow 0.2s ease;
}

.footer-redes__detalhe {
  color: var(--muted);
  font-weight: 400;
}

.footer-redes__link:hover {
  color: var(--amarelo);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-redes__link:hover .footer-redes__icone,
.footer-redes__link:focus-visible .footer-redes__icone {
  box-shadow: var(--brilho);
}

html {
  scroll-padding-bottom: calc(var(--altura-rodape, 96px) + 16px);
}

body {
  padding-bottom: var(--altura-rodape, 96px);
}

.rodape-fixo {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 25;  
  display: flow-root;  
  padding: 6px var(--margem) calc(6px + env(safe-area-inset-bottom));
  background: var(--bg);  
  border-top: 1px solid var(--amarelo-base);
  color: var(--text);  
}

@media (min-width: 1280px) {
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .rodape-fixo {
      background: rgba(17, 18, 15, 0.88);
      -webkit-backdrop-filter: blur(12px) saturate(140%);
      backdrop-filter: blur(12px) saturate(140%);
    }
  }
}

/* Quem pede menos transparência no sistema vê o fundo sólido de antes. */
@media (min-width: 1280px) and (prefers-reduced-transparency: reduce) {
  .rodape-fixo {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* FIM TESTE TRANSLÚCIDO */

.rodape-fixo__aviso {
  margin: 0;
  font-size: 0.800rem;  
  line-height: 1.4;
  text-wrap: pretty;
}

.rodape-fixo .animacoes-botao {
  float: right;
  flex: none;
  min-height: 44px;
  margin: -6px 0 0 16px;
  font-size: 0.9375rem;
}

/* INÍCIO RODAPÉ SEM BARRA FIXA (enquanto o menu hambúrguer aparece)
   O aviso legal desce para o fim do rodapé, em texto pequeno, e o botão
   de animações vai para dentro do menu (o app.js faz a troca). */
@media (max-width: 1279px) {
  /* A barra fica logo depois do <footer>: ela assume a largura do .wrap e o espaço
     final reservado para a seta de voltar ao topo, que antes era do footer. */
  footer {
    padding-bottom: 0;
  }

  .rodape-fixo {
    position: static;
    max-width: 1280px;
    margin-inline: auto;
    padding: 16px var(--margem) calc(var(--seta-tamanho) + var(--seta-distancia) * 2 + env(safe-area-inset-bottom));
    background: none;
    border-top: 0;
    color: var(--muted);
  }

  .rodape-fixo__aviso {
    font-size: 0.875rem;
    line-height: 1.5;
  }
}

.menu .animacoes-botao {
  min-height: 52px;
  border-bottom: 1px solid var(--line);
  font-size: 1.125rem;
}
/* FIM RODAPÉ SEM BARRA FIXA */

.topo-botao {
  position: fixed;
  bottom: calc(var(--seta-distancia) + var(--altura-rodape, 96px));  
  left: 50%;
  z-index: 20;
  display: grid;
  place-items: center;
  width: var(--seta-tamanho);
  height: var(--seta-tamanho);
  padding: 0;
  background: rgba(17, 18, 15, 0.92);
  border: 2px solid var(--amarelo);
  border-radius: 50%;

  box-shadow: 0 0 0 2px rgba(17, 18, 15, 0.6);
  color: var(--amarelo);
  opacity: 0;
  visibility: hidden;  
  transform: translateX(-50%);
  transition: opacity 0.35s ease, visibility 0.35s, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.topo-botao.is-visivel {
  opacity: 1;
  visibility: visible;
}

.topo-botao:hover {
  background: var(--degrade-amarelo);
  color: var(--escuro);
  box-shadow: 0 0 0 2px rgba(17, 18, 15, 0.6), var(--brilho);
}

.topo-botao:active {
  background: var(--amarelo-ativo);
  color: var(--escuro);
}

.topo-botao:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 3px;
}

dialog {
  max-width: 90vw;
  max-height: 93vh;
  padding: 56px 25px 15px;
  background: var(--surface);
  border: 1px solid #525940;
  border-radius: 6px;
  color: var(--text);
}

dialog::backdrop {
  background: #000d;
}

dialog img {
  display: block;
  max-width: 76vw;
  max-height: 70vh;
  margin: auto;
  object-fit: contain;
}

dialog p {
  font-size: 1rem;
}

.close {
  position: absolute;
  top: 6px;
  right: 8px;
  min-width: 48px;
  min-height: 48px;
  background: transparent;
  border: 0;
  color: var(--amarelo);
  font-size: 2rem;
  line-height: 1;
}

@media (min-width: 700px) {

  .avisos__conteudo {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding-block: 12px;
  }

  .avisos__link {
    align-self: auto;
    flex: none;
  }

  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0;
    padding-top: 56px;
    padding-bottom: 40px;
  }

  .hero-copy {
    position: relative;
    z-index: 1;
  }

  h1 {
    font-size: clamp(2.75rem, 4.6vw, 4rem);
    letter-spacing: -0.025em;
  }

  .hero-art {
    max-width: none;
    min-height: 480px;
    margin: 0;
    transform: scale(0.88);
    transform-origin: center left;
  }

  .orbit {
    top: 30px;
    left: 25px;
    width: 415px;
    height: 415px;
    --mana-tamanho: 46px;
  }

  .art-note {
    position: absolute;
    top: 0;
    right: 12px;
  }

  .hero-card {
    width: 217px;
    height: 304px;
    border-width: 5px;
  }

  .card-back {
    top: 98px;
    left: 24px;
  }

  .card-front {
    top: 50px;
    left: 204px;
  }

  .art-caption {
    bottom: 8px;
    left: 25px;
  }

  .section-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    margin-bottom: 32px;
  }

  .section-top p:not(.eyebrow) {
    margin-top: 0;
  }

  .section-top > div {
    flex: none;
  }

  .section-top > p:not(.eyebrow) {
    flex: 0 1 min(30rem, 45%);
  }

  h2 {
    font-size: 2.5rem;
  }

  .trabalhos-abas__lista {
    justify-content: center;
    margin-inline: 0;
    padding-inline: 0;
  }

  .moldura-jogo {
    max-width: var(--carrossel-largura-max-celular);
  }

  .vitrine {
    padding: 65px 0;
  }

  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 44px;
  }

  .steps article {
    display: block;
    padding-top: 20px;
  }

  .steps h3 {
    margin: 20px 0 8px;
  }

  .steps p {
    max-width: 20rem;
  }

  .faq {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 30px;
    padding-top: 75px;
    padding-bottom: 65px;
  }

  .faq__intro {
    display: block;
    margin-bottom: 0;
  }

  .mascot {
    width: 180px;
    height: 180px;
    margin-top: 14px;
  }

  .briefing {
    margin-bottom: 65px;
  }

  .briefing__card {
    padding: 48px 40px;
  }

  .formulario {
    padding: 56px 32px 32px;
  }

  .briefing h2 {
    font-size: 2.75rem;
  }

  .footer-logo img {
    width: 160px;
  }

  .rodape-fixo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px 32px;
    padding-block: 2px calc(2px + env(safe-area-inset-bottom));
  }

  .rodape-fixo .animacoes-botao {
    order: 1;  
    margin: 0;
  }

  .rodape-fixo__aviso {
    text-align: left;
  }

  .videos {
    padding-top: 40px;
    padding-bottom: 65px;
  }

  .videos__grade {
    --visiveis: 2.4;  
    --vao: 20px;
  }

  .entrega {
    padding-top: 76px;
    padding-bottom: 65px;
  }

  .entrega__fotos {
    grid-template-columns: 1fr 1.76fr;
    gap: 20px;
  }

  .midia {
    padding-top: 40px;
    padding-bottom: 65px;
  }

}

@media (min-width: 900px) {
  .briefing__card {
    grid-template-columns: 1fr 1.15fr;
    align-items: start;
    gap: 48px;
    padding: 56px 48px;
  }

  .briefing__cartas {
    margin-top: 190px;
  }
}

@media (min-width: 1001px) {

  .videos__grade {
    --visiveis: 4.35;
  }

  .midia__grade {
    --visiveis: 3.35;
  }

  .avisos__lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 56px;
  }

  .avisos__item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    font-size: 0.9375rem;
    line-height: 1.45;
  }

  .avisos__item::before {
    display: none;
  }

  .avisos__item:not(:last-child)::after {
    content: "" / "";
    position: absolute;
    top: 50%;
    right: -28px;
    font-size: 1.5625rem;
    line-height: 1;
    transform: translate(50%, -50%);
  }

  .avisos__selo {
    display: inline-block;
    padding: 1px 8px;
    letter-spacing: 0.06em;
  }

  .avisos__texto {
    text-wrap: pretty;
  }

  .hero {
    gap: 20px;
  }

  .hero-art {
    transform: none;
  }

  .actions {
    gap: 25px;
  }

  .faq {
    gap: 70px;
  }
}

@media (min-width: 1024px) {

  .vitrine__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 64px;
  }

  /* Frames "coluna etapas" e "coluna acervo": Auto layout vertical, Gap 33. */
  .vitrine__processo,
  .vitrine__acervo {
    display: flex;
    flex-direction: column;
    gap: 33px;
    min-width: 0;
  }

  /* Na coluna do acervo o Gap é menor, para a nota ficar perto do carrossel. */
  .vitrine__acervo {
    gap: 24px;
  }

  /* Quebras de linha soltas (<br>) entre os frames não contam: quem espaça é o Gap. */
  .vitrine__acervo > br {
    display: none;
  }

  .vitrine .section-top {
    display: block;
    margin: 0;
  }

  .vitrine .section-top p:not(.eyebrow) {
    margin-top: 16px;
  }

  /* Frame "etapas": Auto layout vertical com espaçamento "Space between (Auto)"
     do Figma. As etapas se distribuem até o fim da coluna, para a etapa 03 terminar
     junto com a coluna do acervo. --etapas-gap é o espaço mínimo entre elas. */
  .vitrine .steps {
    flex: 1;
    grid-template-columns: 1fr;
    align-content: space-between;
    gap: var(--etapas-gap);
    margin: 0;
  }

  .vitrine .steps article {
    display: grid;
    padding-top: 20px;
  }

  .vitrine .steps h3 {
    margin: 0;
  }

  .vitrine .steps p {
    max-width: none;
  }

  /* Frame "carrossel + pílulas". Até 1279 px: Auto layout vertical,
     pílulas em cima (Wrap) e carrossel embaixo. */
  .trabalhos-abas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "abas" "painel";
    gap: 8px var(--acervo-gap);
    max-width: none;
    margin: 0;
  }

  /* Frame "pílulas": Auto layout horizontal com Wrap, Gap 4. */
  .trabalhos-abas__lista {
    grid-area: abas;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  /* Célula do carrossel: nunca passa da sua largura (min-width: 0). */
  .trabalhos-painel {
    grid-area: painel;
    min-width: 0;
  }

  /* Frame "carta": Fill container com Max width. A altura vem da proporção da carta. */
  .trabalhos-painel .moldura-jogo {
    width: 100%;
    max-width: var(--carrossel-largura-max);
    margin: 0;
  }

  /* A nota é só mais um item da coluna: vem depois do carrossel, no fluxo. */
  .vitrine__acervo .collection-note {
    margin: 0;
  }
  /* FIM VITRINE EM AUTO LAYOUT */

  .carrossel__seta--anterior {
    left: 18px;
  }

  .carrossel__seta--proxima {
    right: 18px;
  }
}

@media (min-width: 1280px) {

  .cabecalho__conteudo {
    gap: 40px;
  }

  :root {
    --altura-header: 80px;
  }

  .menu-botao,
  .menu-fundo {
    display: none;
  }

  .menu {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    width: auto;
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
    transform: none;
    visibility: visible;
    transition: none;
  }

  .menu__link {
    position: relative;
    min-height: 44px;
    border: 0;
    font-size: 0.9375rem;
    white-space: nowrap;
  }

  .menu__link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 6px;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--amarelo-base), var(--amarelo-claro) 50%, var(--amarelo-base));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.6s ease-in-out;
  }

  .menu__link:hover::after,
  .menu__link:focus-visible::after {
    transform: scaleX(1);
  }

  .menu .button {
    min-height: 44px;
    margin-top: 0;
    margin-left: 8px;
    padding: 10px 18px;
    font-size: 0.9375rem;
    white-space: nowrap;
  }

  .brand {
    gap: 14px;
  }

  .brand small {
    white-space: nowrap;
  }

  .brand img {
    height: 48px;
  }

  /* A partir de 1280 px o frame "carrossel + pílulas" vira Auto layout horizontal:
     carrossel (Fixed: --carrossel-largura-max) | pílulas (Fill do que sobra, com
     largura mínima --pilulas-largura-min). As pílulas ficam sempre à direita;
     se faltar espaço, quem encolhe é a carta. */
  .trabalhos-abas {
    grid-template-columns: minmax(0, var(--carrossel-largura-max)) minmax(var(--pilulas-largura-min), 1fr);
    grid-template-areas: "painel abas";
    align-items: start;
  }

  .trabalhos-abas__lista {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    min-width: 0;
  }

  /* O texto da pílula pode quebrar em duas linhas para caber na coluna. */
  .trabalhos-aba {
    max-width: 100%;
  }

  .trabalhos-aba__pilula {
    white-space: normal;
    text-align: left;
  }
}

@media (min-width: 1440px) {
  h1 {
    font-size: 4rem;
  }

  .hero-art {
    min-height: 495px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-animacoes="desligadas"]) {
    scroll-behavior: smooth;
  }
}

html[data-animacoes="desligadas"] *,
html[data-animacoes="desligadas"] *::before,
html[data-animacoes="desligadas"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

html[data-animacoes="desligadas"] .revelar {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .revelar {
    opacity: 1;
    transform: none;
  }
}

[hidden] {
  display: none;
}

/* INÍCIO SÍMBOLO DE MANA INCOLOR (separador do site)
   Losango de lados curvos em contorno, desenhado em SVG (--icone-mana) e pintado
   com a cor do lugar (currentColor). Fica igual em qualquer aparelho, sem depender
   de fonte, e é só decoração (content vazio para leitor de tela).
   O tamanho acompanha o font-size de cada lugar (1em).
   Fica no fim do arquivo para valer por cima das regras de cada lugar. */
:root {
  --icone-mana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M50 2Q64 36 98 50Q64 64 50 98Q36 64 2 50Q36 36 50 2ZM50 24Q57.7 42.3 76 50Q57.7 57.7 50 76Q42.3 57.7 24 50Q42.3 42.3 50 24Z'/%3E%3C/svg%3E");
}

@supports (mask-image: none) or (-webkit-mask-image: none) {
  .avisos__item::before,
  main > section + section:not(.briefing)::after,
  .trabalhos-aba__pilula::before,
  .avisos__item:not(:last-child)::after {
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask: var(--icone-mana) center / contain no-repeat;
    mask: var(--icone-mana) center / contain no-repeat;
  }
}

/* Navegador sem máscara: usa o caractere ✧, parecido com o símbolo. */
@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  .avisos__item::before,
  main > section + section:not(.briefing)::after,
  .trabalhos-aba__pilula::before,
  .avisos__item:not(:last-child)::after {
    content: "✧" / "";
  }
}
/* FIM SÍMBOLO DE MANA INCOLOR */