/* ============================================================
   DOGUINHO STUDIOS — CSS GLOBAL
   Fonte: Inter Medium (500)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ------------------------------------------------------------
   1. VARIÁVEIS
------------------------------------------------------------ */
:root {
  /* Paleta oficial */
  /* A escala do rosa. O escuro é quem pinta texto (menu, legendas),
     porque é o que tem contraste; o médio é o destaque da marca;
     o claro é fundo, borda e linha. */
  --cor-primaria:     #ec7897;  /* rosa médio  */
  --cor-secundaria:   #de6283;  /* rosa escuro */
  --cor-suave:        #f0c9d3;  /* rosa claro  */
  --cor-destaque:     #b8425f;  /* rosa fechado, para o que precisa
                                   pesar mais que o resto do menu */
  --cor-grafite:      #41434b;  /* cinza texto */
  --cor-vinho:        #3a0d0d;  /* vinho escuro*/

  /* Derivadas */
  --cor-fundo:        #fff7f8;
  --cor-branco:       #ffffff;
  --cor-divisor:      rgba(236, 120, 151, 0.34);

  /* Tipografia */
  --fonte-base: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --peso-medium: 500;
  --peso-semibold: 600;
  --peso-bold: 700;

  /* Layout */
  --header-altura: 74px;
  --largura-max: 1720px;
  --raio: 14px;
  --raio-pill: 999px;

  /* Efeitos */
  /* Patinha do mascote, usada como máscara — a cor vem do CSS,
     então dá para pintar de qualquer tom da paleta. */
  --patinha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='6.6' cy='9.4' rx='2.5' ry='3.1'/%3E%3Cellipse cx='17.4' cy='9.4' rx='2.5' ry='3.1'/%3E%3Cellipse cx='10' cy='4.9' rx='2.2' ry='2.8'/%3E%3Cellipse cx='14' cy='4.9' rx='2.2' ry='2.8'/%3E%3Cpath d='M12 12.2c3.2 0 6 2.5 6 5.2 0 2.2-1.8 3.4-3.8 3.4-1 0-1.6-.3-2.2-.3s-1.2.3-2.2.3C7.8 20.8 6 19.6 6 17.4c0-2.7 2.8-5.2 6-5.2z'/%3E%3C/svg%3E");

  --sombra-header: 0 4px 18px rgba(58, 13, 13, 0.10);
  --transicao: 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transicao-suave: 0.22s ease;
}

/* ------------------------------------------------------------
   2. RESET
------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--fonte-base);
  font-weight: var(--peso-medium);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cor-grafite);
  background-color: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

/* O atributo hidden precisa vencer as regras acima */
[hidden] { display: none !important; }

a {
  color: inherit;
  text-decoration: none;
  font-weight: var(--peso-medium);
}

ul, ol { list-style: none; margin: 0; padding: 0; }

button {
  font-family: inherit;
  font-weight: var(--peso-medium);
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-weight: var(--peso-bold);
  color: var(--cor-vinho);
  line-height: 1.25;
}

:focus-visible {
  outline: 3px solid var(--cor-primaria);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ------------------------------------------------------------
   3. UTILITÁRIOS
------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 28px;
}

.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;
}

/* Empurra o conteúdo para baixo do header fixo */
body { padding-top: var(--header-altura); }

/* ============================================================
   4. HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-altura);
  background: linear-gradient(180deg, #fff5f8 0%, var(--cor-suave) 100%);
  box-shadow: var(--sombra-header);
  transition: box-shadow var(--transicao-suave);
}

.site-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--cor-primaria) 0%,
    var(--cor-secundaria) 35%,
    var(--cor-suave) 50%,
    var(--cor-secundaria) 65%,
    var(--cor-primaria) 100%);
  opacity: 0.85;
}

/* Ao rolar, o header não muda de tamanho — só ganha uma sombra
   um pouco mais forte, para descolar do conteúdo. */
.site-header.is-scrolled {
  box-shadow: 0 6px 22px rgba(58, 13, 13, 0.16);
}

/* Logo, menu e redes andam juntos, como um bloco só centralizado */
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* ---------- 4.1 LOGO ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  transition: transform var(--transicao);
}

.brand:hover { transform: scale(1.05) rotate(-1.5deg); }

/* Logo colorida (arquivo usado como está) */
.brand-img {
  height: 52px;
  width: auto;
  transition: height var(--transicao-suave);
}


/* Silhueta pintada com a cor do studio.
   O arquivo vira uma máscara, então a cor vem do CSS e não do PNG —
   é assim que a logo rosa-clarinha aparece nítida no header rosa. */
.brand-mark {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background-color: var(--cor-logo, var(--cor-primaria));
  -webkit-mask-image: var(--logo-url);
          mask-image: var(--logo-url);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: width var(--transicao-suave), height var(--transicao-suave), background-color var(--transicao-suave);
}


/* ---------- 4.2 NAVEGAÇÃO ---------- */
.main-nav {
  flex: 0 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.nav-list {
  display: flex;
  align-items: stretch;
}

.nav-item { display: flex; }

/* Divisórias verticais entre os itens (igual referência) */
.nav-item + .nav-item {
  border-left: 1px solid var(--cor-divisor);
}

.nav-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 17px;
  color: var(--cor-secundaria);
  font-size: 0.9rem;
  text-align: center;
  white-space: nowrap;
  transition: color var(--transicao-suave);
}

.nav-icon {
  width: 20px;
  height: 20px;
  display: block;
  color: var(--cor-secundaria);
  transform: translateY(2px);
  opacity: 0.75;
  transition: transform var(--transicao), opacity var(--transicao-suave), color var(--transicao-suave);
}

.nav-icon svg { width: 100%; height: 100%; display: block; }

.nav-label { position: relative; display: block; }

/* Sublinhado animado */
.nav-label::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -3px;
  width: 0; height: 2px;
  border-radius: var(--raio-pill);
  background: var(--cor-primaria);
  transform: translateX(-50%);
  transition: width var(--transicao-suave);
}

/* Hover / foco */
.nav-link:hover,
.nav-link:focus-visible { color: var(--cor-primaria); }

.nav-link:hover .nav-icon,
.nav-link:focus-visible .nav-icon {
  color: var(--cor-primaria);
  opacity: 1;
  animation: pulinho 0.55s ease;
}

.nav-link:hover .nav-label::after,
.nav-link:focus-visible .nav-label::after { width: 100%; }

/* Página atual */
.nav-link.is-active {
  color: var(--cor-primaria);
  font-weight: var(--peso-semibold);
}

.nav-link.is-active .nav-icon { color: var(--cor-primaria); opacity: 1; }
.nav-link.is-active .nav-label::after { width: 100%; }

@keyframes pulinho {
  0%   { transform: translateY(2px)  scale(1); }
  40%  { transform: translateY(-4px) scale(1.18); }
  70%  { transform: translateY(1px)  scale(0.96); }
  100% { transform: translateY(2px)  scale(1); }
}

/* Itens de destaque (recompensas / crie conosco).
   Um rosa mais fechado que o dos outros itens: os demais já são rosa,
   e só ficar mais claro que eles não leria como destaque. */
.nav-link.is-destaque {
  color: var(--cor-destaque);
  font-weight: var(--peso-semibold);
}

.nav-link.is-destaque .nav-icon { color: var(--cor-destaque); opacity: 0.9; }

/* Precisa de especificidade maior que a do .is-destaque acima,
   senão o hover comum do menu não teria efeito nestes dois */
.nav-link.is-destaque:hover,
.nav-link.is-destaque:focus-visible { color: var(--cor-primaria); }

.nav-link.is-destaque:hover .nav-icon,
.nav-link.is-destaque:focus-visible .nav-icon { color: var(--cor-primaria); }

/* Item interno (só administradores veem): fica marcado com um
   tracejado, para não se confundir com o menu do público */
.nav-link.is-interno .nav-label {
  padding-bottom: 2px;
  border-bottom: 1px dashed var(--cor-divisor);
}

/* A guia de administração é um seletor, e não um link: uma opção
   para cada área interna. Ele é vestido com a cara dos outros itens
   do menu, mas mantém a setinha, que é o que avisa que ali abre
   uma lista. */
/* A guia é o pai do menu que abre embaixo dela */
.nav-tem-menu { position: relative; }
.nav-tem-menu .nav-link { cursor: pointer; }

/* A guia interna guarda a cor mais fechada dos itens de destaque */
.nav-admin {
  color: var(--cor-destaque);
  font-weight: var(--peso-semibold);
}

.nav-admin .nav-icon { color: var(--cor-destaque); opacity: 0.9; }

.nav-admin:hover,
.nav-admin:focus-visible { color: var(--cor-primaria); }

.nav-admin:hover .nav-icon,
.nav-admin:focus-visible .nav-icon { color: var(--cor-primaria); opacity: 1; }

/* A setinha vira de lado quando o menu está aberto */
.nav-seta {
  width: 12px;
  height: 12px;
  display: block;
  transition: transform var(--transicao);
}

.nav-seta svg { width: 100%; height: 100%; display: block; }
.nav-link[aria-expanded="true"] .nav-seta { transform: rotate(180deg); }

/* O sublinhado dos itens comuns também vale para as guias com menu */
.nav-tem-menu .nav-link:hover .nav-label::after,
.nav-tem-menu .nav-link:focus-visible .nav-label::after,
.nav-tem-menu .nav-link[aria-expanded="true"] .nav-label::after { width: 100%; }

/* ---------- MENU DA GUIA ----------
   Desenhado por nós, e não a lista do sistema: só assim ele tem a
   cara do site. Sai do fluxo para não empurrar o header. */
.nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 1050;
  min-width: 210px;
  padding: 8px;
  border-radius: 16px;
  background: var(--cor-branco);
  box-shadow: 0 16px 34px rgba(58, 13, 13, 0.18);
  transform: translateX(-50%);
  animation: abrirMenuNav 0.2s cubic-bezier(0.2, 0.85, 0.25, 1);
}

/* Nome do jogo acima das subpáginas dele. Vira um rótulo do grupo,
   e não um item — por isso não acende nem recebe clique. */
.nav-menu-titulo {
  padding: 8px 14px 6px;
  font-size: 0.72rem;
  font-weight: var(--peso-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-primaria);
}

.nav-menu-titulo + li .nav-menu-item { margin-top: 2px; }

.nav-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 11px;
  font-size: 0.86rem;
  font-weight: var(--peso-medium);
  color: var(--cor-grafite);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transicao-suave), color var(--transicao-suave);
}

/* Item que abre a lista de episódios, em vez de levar a algum lugar */
.nav-parte-abre {
  width: 100%;
  font-family: inherit;
  text-align: left;
}

.nav-parte-abre .nav-seta { width: 11px; height: 11px; }
.nav-parte-abre[aria-expanded="true"] { color: var(--cor-destaque); }
.nav-parte-abre[aria-expanded="true"] .nav-seta { transform: rotate(180deg); }

/* Os episódios de uma parte. A altura é limitada porque treze deles
   passariam da tela; o que sobra rola dentro do próprio menu. */
.nav-episodios {
  max-height: 234px;
  overflow-y: auto;
  margin: 2px 0 6px;
  padding-left: 10px;
  border-left: 2px solid var(--cor-suave);
}

.nav-menu-item.is-sub {
  padding: 7px 12px;
  font-size: 0.82rem;
  font-weight: var(--peso-medium);
}

.nav-menu-item:hover,
.nav-menu-item:focus-visible {
  background: var(--cor-suave);
  color: var(--cor-destaque);
}

/* A área em que você já está */
.nav-menu-item.is-active {
  background: var(--cor-primaria);
  color: var(--cor-branco);
  font-weight: var(--peso-semibold);
}

/* O menu do guia é mais largo: "Episódio 13" com o recuo da sublista
   não caberia na largura dos outros */
.nav-menu-guia { min-width: 232px; }

@keyframes abrirMenuNav {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- 4.3 REDES SOCIAIS ---------- */
.social-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.social-link {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--cor-primaria);
  background: rgba(255, 255, 255, 0.55);
  transition: transform var(--transicao), background var(--transicao-suave), color var(--transicao-suave);
}

.social-link svg { width: 18px; height: 18px; display: block; }

.social-link:hover,
.social-link:focus-visible {
  color: var(--cor-branco);
  background: var(--cor-primaria);
  transform: translateY(-3px) scale(1.1);
}

/* ---------- 4.4 BOTÃO DE TEMA ---------- */
.tema-toggle {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--cor-primaria);
  background: rgba(255, 255, 255, 0.55);
  transition: transform var(--transicao), background var(--transicao-suave), color var(--transicao-suave);
}

.tema-toggle:hover,
.tema-toggle:focus-visible {
  background: var(--cor-branco);
  transform: rotate(-18deg) scale(1.1);
}

.tema-toggle svg { width: 19px; height: 19px; display: block; }

/* ---------- 4.5 BOTÃO MOBILE ---------- */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--cor-primaria);
  place-items: center;
  transition: background var(--transicao-suave);
}

.nav-toggle:hover { background: var(--cor-branco); }

.nav-toggle-bars {
  position: relative;
  width: 22px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: background var(--transicao-suave);
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--transicao-suave), top var(--transicao-suave);
}

.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after  { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { top: 0; transform: rotate(-45deg); }

/* Fundo escuro do menu mobile */
.nav-overlay {
  position: fixed;
  inset: var(--header-altura) 0 0 0;
  background: rgba(58, 13, 13, 0.42);
  opacity: 0;
  visibility: hidden;
  z-index: 998;
  transition: opacity var(--transicao-suave), visibility var(--transicao-suave);
}

.nav-overlay.is-open { opacity: 1; visibility: visible; }

body.nav-aberto { overflow: hidden; }

/* Redes dentro do menu mobile (escondidas no desktop) */
.nav-social { display: none; }

/* ============================================================
   5. HOME — HERO (cenário + elenco + lojas)
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: clamp(540px, 84vh, 900px);
  overflow: hidden;
  isolation: isolate;
  background: #7fd0ef;
}

/* Cenário da fazenda */
.hero-fundo {
  position: absolute;
  inset: 0;
  /* A imagem vem do arquivo do jogo em destaque (home/entrelacos.js,
     por exemplo) e é aplicada pelo home.js. Aqui fica só o
     comportamento, que vale para qualquer cenário. */
  background-size: cover;
  background-position: center 32%;
  transform: scale(1.05);
  animation: respirarFundo 26s ease-in-out infinite alternate;
}

@keyframes respirarFundo {
  from { transform: scale(1.05) translateY(0); }
  to   { transform: scale(1.11) translateY(-1.2%); }
}

/* Vinheta por cima do cenário: escurece as bordas e mantém o miolo
   claro, para o elenco destacar sem deixar o fundo lavado.
   Fica ABAIXO dos personagens — só trata o cenário. */
.hero-brilho {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 34%, rgba(58, 13, 13, 0.26) 100%),
    linear-gradient(180deg, rgba(58, 13, 13, 0.16) 0%, transparent 20%);
  pointer-events: none;
}

/* ---------- 5.1 ELENCO (carrossel) ----------
   Um personagem centralizado por vez. Clique em quem está do lado
   para trazê-lo ao centro, ou no centralizado para ir ao próximo.
   O home.js só define os números (--dist, --abs); as contas ficam aqui. */
.hero-elenco {
  position: absolute;
  inset: 0;
  --espaco: 230px;   /* o quanto o elenco fica espalhado (o home.js usa
                        isto como referência; a distância real entre dois
                        vizinhos leva em conta a largura de cada um) */
  --zoom: 1;         /* tamanho geral do elenco */
}

/* Os personagens são maiores que a hero e ficam cortados na altura
   das coxas, como numa foto de grupo.

   Os sprites já vêm todos no mesmo canvas (1000x1415), com os pés na
   mesma linha e a altura de cada personagem certa dentro do arquivo.
   Por isso todos usam a MESMA altura aqui — a diferença de estatura
   entre eles vem pronta da arte, não do CSS.

   --altura 157.5% + --base -59.1% deixa a cabeça do mais alto a 95%
   da hero e corta todo mundo na altura das coxas. */
.hero-slot {
  position: absolute;
  left: 50%;
  bottom: calc(var(--base, -59.1%) * var(--zoom));
  display: block;
  height: calc(var(--altura, 157.5%) * var(--zoom));
  /* A largura é só a do CORPO do personagem, não a do arquivo inteiro.
     Se fosse o arquivo, a moldura transparente de um cobriria o outro
     e o clique cairia sempre no vizinho errado. O desenho transborda
     dessa caixa de propósito. */
  width: var(--largura, 260px);
  overflow: visible;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  /* Quem recebe o clique é o ::before, não o botão inteiro */
  pointer-events: none;
  transform-origin: bottom center;
  -webkit-tap-highlight-color: transparent;

  --x: 0px;          /* deslocamento lateral, calculado no home.js */
  --dist: 0;         /* posição em relação ao centralizado (-2, -1, 0, 1, 2...) */
  --abs: 0;          /* o mesmo número, sem o sinal */

  /* Só desloca para o lado — NADA de encolher quem está longe do centro.
     Encolher por distância bagunçava a altura entre os personagens: o
     Mateus na ponta ficava menor que o Atlas do lado do centro, e a
     escadinha de estaturas da arte se perdia. A altura de cada um vem
     pronta do arquivo e tem que ser respeitada.
     O --x é calculado no home.js a partir da largura de cada personagem. */
  transform: translateX(calc(-50% + var(--x, 0px)));
  /* Quem está longe do centro vai ficando translúcido: 12% por posição.
     O --vis é o que apaga quem está chegando na beirada da tela, para
     ninguém aparecer cortado pela metade. Quem calcula é o home.js. */
  opacity: calc((1 - 0.12 * var(--abs)) * var(--vis, 1));
  z-index: var(--camada, 1);
  /* Profundidade vem só de quem está na frente e de um escurecimento
     bem leve em quem está atrás. */
  filter: brightness(calc(1 - 0.04 * var(--abs)));
  transition:
    transform 0.75s cubic-bezier(0.22, 0.9, 0.28, 1),
    opacity 0.5s ease,
    filter 0.5s ease;
}

/* Quem está fora do trio no celular: invisível não basta, ele ainda
   receberia o clique que era do vizinho visível */
.hero-slot.is-oculto { pointer-events: none; }

/* Ajuste por personagem: os campos "altura" e "base" do arquivo do
   jogo entram aqui como estilo do próprio elemento. Quem não declara
   segue o padrão do .hero-slot acima (157.5% / -59.1%). */

/* Área de clique: começa na cabeça e vai até os pés, sem o vazio
   que sobra em cima do personagem dentro do arquivo. */
.hero-slot::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--alvo, 100%);
  pointer-events: auto;
  cursor: pointer;
}

.hero-slot:focus-visible { outline-offset: -6px; }

/* O desenho transborda a caixa de clique e fica centralizado pelo corpo.
   O --centro corrige quem foi desenhado fora do meio do arquivo. */
.hero-personagem {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
  transform: translateX(calc(-50% + var(--centro, 0px)));
  pointer-events: none;
  filter: drop-shadow(0 14px 22px rgba(58, 13, 13, 0.32));
  /* Animação de entrada, uma vez só, quando a página abre */
  animation: entrarElenco 0.9s cubic-bezier(0.2, 0.85, 0.25, 1) backwards;
}

.hero-slot:nth-child(1) .hero-personagem { animation-delay: 0.30s; }
.hero-slot:nth-child(2) .hero-personagem { animation-delay: 0.22s; }
.hero-slot:nth-child(3) .hero-personagem { animation-delay: 0.14s; }
.hero-slot:nth-child(4) .hero-personagem { animation-delay: 0.18s; }
.hero-slot:nth-child(5) .hero-personagem { animation-delay: 0.26s; }
.hero-slot:nth-child(6) .hero-personagem { animation-delay: 0.34s; }

@keyframes entrarElenco {
  from { opacity: 0; transform: translate(calc(-50% + var(--centro, 0px)), 9%); }
  to   { opacity: 1; transform: translate(calc(-50% + var(--centro, 0px)), 0); }
}

/* ---------- 5.2 LOGO DO JOGO + CARDS DAS LOJAS ---------- */
.hero-conteudo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9%;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 0 20px;
  pointer-events: none;   /* só a logo e os botões recebem clique */
}

.hero-logo {
  width: clamp(168px, 23.8vw, 392px);
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(58, 13, 13, 0.5));
  animation: entrarLogo 0.9s cubic-bezier(0.2, 0.85, 0.25, 1) 0.35s backwards;
}

@keyframes entrarLogo {
  from { opacity: 0; transform: translateY(22px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-lojas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  pointer-events: auto;
  animation: entrarLojas 0.8s ease 0.7s backwards;
}

@keyframes entrarLojas {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.loja-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 26px 11px 20px;
  background: var(--cor-branco);
  border: 2px solid var(--cor-suave);
  border-radius: var(--raio-pill);
  box-shadow: 0 8px 20px rgba(58, 13, 13, 0.22);
  color: var(--cor-vinho);
  transition: transform var(--transicao), box-shadow var(--transicao-suave), border-color var(--transicao-suave);
}

.loja-card:hover,
.loja-card:focus-visible {
  transform: translateY(-5px) scale(1.03);
  border-color: var(--cor-primaria);
  box-shadow: 0 14px 26px rgba(58, 13, 13, 0.3);
}

.loja-icone {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.loja-icone svg { width: 100%; height: 100%; display: block; }

.loja-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}

.loja-texto small {
  font-size: 0.72rem;
  font-weight: var(--peso-medium);
  color: var(--cor-secundaria);
}

.loja-texto strong {
  font-size: 1.18rem;
  font-weight: var(--peso-bold);
  letter-spacing: -0.01em;
}

/* ---------- 5.3 NUVENS DE BAIXO ---------- */
.hero-mato {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  /* A ponta do capim mais alto fica em torno de 90% desta altura —
     tem que sobrar abaixo dos botões de download, que estão a 9%
     do fundo da hero. */
  height: 86px;
  z-index: 20;
  display: block;
  /* Sombra para cima, para o mato pousar sobre a arte
     em vez de parecer um recorte colado por cima dela */
  filter: drop-shadow(0 -4px 10px rgba(58, 13, 13, 0.18));
}

.hero-mato .mato-tras   { fill: var(--cor-suave); }
.hero-mato .mato-frente { fill: var(--cor-fundo); }

/* Margaridinhas: pétalas claras, miolo na cor do studio.
   As pétalas são elipses mais altas que largas de propósito — o SVG
   é esticado na horizontal, e assim elas chegam redondas na tela. */
.hero-mato .flor-petala { fill: var(--cor-fundo); }
.hero-mato .flor-miolo  { fill: var(--cor-primaria); }
.hero-mato .flor-caule {
  fill: none;
  stroke: var(--cor-fundo);
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* Balanço leve, com ritmo diferente em cada flor */
.hero-mato .flor-balanco {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: balancarFlor 5s ease-in-out infinite alternate;
}

.hero-mato .mato-flor:nth-child(2) .flor-balanco { animation-duration: 6.4s; animation-delay: -1.2s; }
.hero-mato .mato-flor:nth-child(3) .flor-balanco { animation-duration: 4.6s; animation-delay: -2.4s; }
.hero-mato .mato-flor:nth-child(4) .flor-balanco { animation-duration: 7.1s; animation-delay: -0.6s; }
.hero-mato .mato-flor:nth-child(5) .flor-balanco { animation-duration: 5.5s; animation-delay: -3.1s; }
.hero-mato .mato-flor:nth-child(6) .flor-balanco { animation-duration: 6.0s; animation-delay: -1.8s; }

@keyframes balancarFlor {
  from { transform: rotate(-4deg); }
  to   { transform: rotate(4deg); }
}

/* ============================================================
   6. SOBRE NÓS
   ============================================================ */
/* O padding no topo também impede que a margem do primeiro título
   "escape" para fora do main e deixe de empurrar o conteúdo */
.pagina { padding-top: 1px; padding-bottom: 40px; }

.secao { padding: 64px 28px; }

/* Seção que termina colada no que vem depois — usada quando a próxima
   parte já traz o próprio respiro, como a arte no fim do Sobre Nós */
.secao-fim { padding-bottom: 24px; }

/* Título com patinhas e a linha atravessando, como na referência */
.secao-titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  /* O vão precisa caber as patinhas, que ficam fora do texto */
  gap: 42px;
  margin: 0 0 48px;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: var(--peso-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-primaria);
}

/* Quando o título abre a página, e não uma seção interna, ele precisa
   do respiro que o .secao daria em volta dele — senão fica embaixo do
   header, que é fixo. Precisa vir depois do .secao-titulo, que também
   declara a margem. */
.secao-titulo-pagina { margin: 48px 0 40px; }

.secao-titulo span { position: relative; flex-shrink: 0; }

/* As patinhas dos dois lados do texto, tortinhas como pegadas */
.secao-titulo span::before,
.secao-titulo span::after {
  content: '';
  position: absolute;
  background-color: var(--cor-secundaria);
  -webkit-mask-image: var(--patinha);
          mask-image: var(--patinha);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.secao-titulo span::before {
  left: -28px;
  top: -0.42em;
  width: 19px;
  height: 19px;
  transform: rotate(-18deg);
}

.secao-titulo span::after {
  right: -24px;
  bottom: -0.34em;
  width: 14px;
  height: 14px;
  transform: rotate(24deg);
}

/* Uma linha de cada lado, dividindo o espaço em partes iguais —
   é o que deixa o título centralizado */
.secao-titulo::before,
.secao-titulo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cor-suave);
}

/* ---------- 6.1 LOGO DO ESTÚDIO ---------- */
.sobre-logo {
  text-align: center;
  margin-bottom: 40px;
}

/* A logo é rosa clarinha (#fee7ed) e sumiria no fundo da página.
   Quem dá o contraste é o borrão rosa que vem atrás dela — os dois
   arquivos têm o mesmo quadro, então basta empilhar. */
.sobre-logo-marca {
  position: relative;
  display: inline-block;
  width: 560px;
  max-width: 100%;
  /* A sombra acompanha o recorte do borrão, não uma caixa */
  filter: drop-shadow(0 12px 18px rgba(58, 13, 13, 0.2));
  transition: transform var(--transicao), filter var(--transicao-suave);
}

.sobre-logo-marca:hover {
  transform: translateY(-5px) rotate(-1deg);
  filter: drop-shadow(0 20px 26px rgba(58, 13, 13, 0.28));
}

/* Quem define o tamanho do conjunto é a logo */
.sobre-logo-frente {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

/* O borrão fica maior que ela e sobra por fora, feito adesivo.
   Mexa no width daqui para engordar ou afinar essa borda. */
.sobre-logo-fundo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  /* Sem isto o "img { max-width: 100% }" do reset trava o borrão no
     tamanho da logo, e ela vaza pelas laterais — as pontas do desenho
     dela são mais largas que as do borrão dentro do arquivo. */
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
}

/* ---------- 6.2 TEXTO ---------- */
.sobre-texto {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.06rem;
  line-height: 1.75;
}

.sobre-texto p { margin: 0 0 20px; }
.sobre-texto strong { color: var(--cor-primaria); font-weight: var(--peso-bold); }

/* ---------- 6.3 BOTÕES DAS REDES ---------- */
.sobre-redes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 0;
}

.rede-botao {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 30px;
  border-radius: var(--raio-pill);
  background: var(--cor-primaria);
  color: var(--cor-branco);
  font-size: 1.05rem;
  font-weight: var(--peso-semibold);
  box-shadow: 0 6px 16px rgba(58, 13, 13, 0.18);
  transition: transform var(--transicao), box-shadow var(--transicao-suave), background var(--transicao-suave);
}

/* Devolve ao botão a transição padrão do site (curta, com molinha).
   Sem esta regra, o .revelar da animação de entrada vem depois no
   arquivo, empata em especificidade e impõe os 0,75s dele ao hover. */
.sobre-redes .rede-botao {
  transition:
    transform var(--transicao),
    box-shadow var(--transicao-suave),
    opacity 0.6s ease;
}

/* No hover o botão só clareia — nada de trocar de cor. É um véu
   branco por cima, que funciona igual tanto nos botões escuros
   quanto nos claros e mantém a cor de cada rede. */
.rede-botao::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--cor-branco);
  opacity: 0;
  transition: opacity 0.28s ease;
}

/* O seletor precisa do .sobre-redes na frente: sem ele, o
   "transform: none" da animação de entrada (.revelar.visivel) empata
   em especificidade, vem depois no arquivo e anula o levantar. */
.sobre-redes .rede-botao:hover,
.sobre-redes .rede-botao:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 22px rgba(58, 13, 13, 0.26);
}

.rede-botao:hover::before,
.rede-botao:focus-visible::before { opacity: 0.2; }

.rede-icone {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}

.rede-icone svg { width: 100%; height: 100%; display: block; color: currentColor; }

/* Cada rede puxa um pouco para a cor da marca dela */
.rede-instagram { background: linear-gradient(120deg, #de6283 0%, #ec7897 100%); }
.rede-x         { background: #241416; }
.rede-tiktok    { background: #3a0d0d; }
.rede-whatsapp  { background: #1f8a4c; }

/* Vem ANTES dos botões: primeiro o convite, depois onde clicar */
.sobre-chamada {
  max-width: 620px;
  margin: 42px auto 22px;
  text-align: center;
  font-size: 0.98rem;
  color: var(--cor-grafite);
}

.sobre-chamada span {
  display: block;
  color: var(--cor-primaria);
  font-weight: var(--peso-semibold);
  font-size: 1.08rem;
  margin-bottom: 6px;
}

/* ---------- 6.4 ENTRADA DA PÁGINA ----------
   Cada peça começa deslocada e transparente; o aboutUs.js solta a
   classe .visivel quando ela entra na tela. O que está no topo entra
   em cascata assim que a página abre; o que está mais abaixo espera
   a rolagem, para não animar fora do campo de visão. */
.revelar {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.75s cubic-bezier(0.2, 0.8, 0.25, 1),
    transform 0.75s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.revelar-zoom { transform: translateY(26px) scale(0.94); }
.revelar-esq  { transform: translateX(-30px); }

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

/* Estas regras valem SÓ para o título que participa da animação de
   entrada (o que tem a classe .revelar). Sem esse recorte, os riscos
   e as patinhas ficariam em scale(0) — ou seja, invisíveis — em
   qualquer página que não rode a animação. */

/* As linhas do título crescem a partir do texto para fora */
.secao-titulo.revelar::before,
.secao-titulo.revelar::after {
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.25, 1) 0.2s;
}

.secao-titulo::before { transform-origin: right center; }
.secao-titulo::after  { transform-origin: left center; }

.secao-titulo.revelar.visivel::before,
.secao-titulo.revelar.visivel::after { transform: scaleX(1); }

/* As patinhas dão um pulinho, uma depois da outra */
.secao-titulo.revelar span::before {
  transform: rotate(-18deg) scale(0);
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s;
}

.secao-titulo.revelar span::after {
  transform: rotate(24deg) scale(0);
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.66s;
}

.secao-titulo.revelar.visivel span::before { transform: rotate(-18deg) scale(1); }
.secao-titulo.revelar.visivel span::after  { transform: rotate(24deg) scale(1); }

/* ---------- 6.5 ARTE ---------- */
.sobre-arte {
  display: flex;
  justify-content: center;
  padding: 0 28px;
}

.sobre-arte img {
  width: min(880px, 100%);
  height: auto;
  /* O desenho já é cortado na altura do tronco: encostando no rodapé,
     ele parece sair de dentro dele. Com um vão no meio, a ilustração
     fica boiando entre o fundo claro e a faixa escura. */
  display: block;
  margin-bottom: -2px;
}

/* No Sobre Nós a arte é a última coisa da página, e o respiro que as
   outras têm embaixo viraria justamente esse vão */
.pagina-sobre { padding-bottom: 0; }

.pagina-sobre + #footer .site-footer,
.pagina-sobre + .site-footer { margin-top: 0; }

/* ============================================================
   7. CONTAS — BOTÕES, FORMULÁRIOS E TELAS
   ============================================================ */

/* ---------- 7.1 BOTÕES ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 26px;
  border-radius: var(--raio-pill);
  font-size: 0.98rem;
  font-weight: var(--peso-semibold);
  text-align: center;
  cursor: pointer;
  transition: transform var(--transicao), box-shadow var(--transicao-suave),
              background var(--transicao-suave), color var(--transicao-suave);
}

.botao:hover,
.botao:focus-visible { transform: translateY(-3px); }

.botao-cheio { width: 100%; }

.botao-principal {
  background: var(--cor-primaria);
  color: var(--cor-branco);
  box-shadow: 0 6px 16px rgba(58, 13, 13, 0.18);
}

.botao-principal:hover,
.botao-principal:focus-visible { box-shadow: 0 12px 22px rgba(58, 13, 13, 0.26); }

.botao-secundario {
  background: var(--cor-suave);
  color: var(--cor-secundaria);
}

.botao-secundario:hover,
.botao-secundario:focus-visible { background: var(--cor-primaria); color: var(--cor-branco); }

.botao-fantasma {
  background: transparent;
  color: var(--cor-secundaria);
  border: 2px solid var(--cor-suave);
}

.botao-fantasma:hover,
.botao-fantasma:focus-visible { border-color: var(--cor-primaria); color: var(--cor-primaria); }

.botao-fantasma.is-ativo {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--cor-branco);
}

.botao-sair {
  width: 100%;
  background: transparent;
  color: var(--cor-vinho);
  border: 2px solid var(--cor-suave);
}

.botao-sair:hover,
.botao-sair:focus-visible { border-color: var(--cor-vinho); background: var(--cor-vinho); color: var(--cor-branco); }

/* ---------- 7.2 CAMPOS ---------- */
.campo {
  display: block;
  margin-bottom: 14px;
}

.campo-rotulo {
  display: block;
  margin-bottom: 6px;
  font-size: 0.86rem;
  font-weight: var(--peso-semibold);
  color: var(--cor-secundaria);
}

/* O asterisco de obrigatório */
.campo-rotulo b { color: var(--cor-primaria); }

.campo-entrada {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid var(--cor-suave);
  border-radius: var(--raio);
  background: var(--cor-branco);
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: var(--peso-medium);
  color: var(--cor-grafite);
  transition: border-color var(--transicao-suave), box-shadow var(--transicao-suave);
}

.campo-entrada:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 4px rgba(236, 120, 151, 0.18);
}

.campo-ajuda {
  display: block;
  margin-top: 4px;
  font-size: 0.79rem;
  line-height: 1.35;
  color: var(--cor-grafite);
  opacity: 0.75;
}

/* Enquanto o CEP é consultado, a borda pisca de leve */
.campo-entrada.is-buscando {
  border-color: var(--cor-primaria);
  animation: buscandoCep 1s ease-in-out infinite;
}

@keyframes buscandoCep {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236, 120, 151, 0.35); }
  50%      { box-shadow: 0 0 0 5px rgba(236, 120, 151, 0.12); }
}

/* Ajuda sem texto (a idade, antes de a data ser preenchida) não pode
   ocupar espaço, senão desalinha a linha inteira */
.campo-ajuda:empty { display: none; }

/* Destaque dentro do texto de ajuda, como o "+55" do telefone */
.campo-ajuda b {
  font-weight: var(--peso-bold);
  color: var(--cor-secundaria);
  opacity: 1;
}

/* Dois campos lado a lado. A margem de baixo é da linha, e não de
   cada campo: senão o campo mais alto (o que tem texto de ajuda)
   soma a margem dele à da linha e abre um vão grande demais. */
.campo-linha {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
}

/* Campos de tamanho fixo, que ficariam largos demais sozinhos */
.campo-cpf { max-width: 260px; }

.campo-linha .campo { flex: 1; min-width: 0; margin-bottom: 0; }
.campo-linha .campo-largo { flex: 2.4; }
.campo-linha .campo-estreito { flex: 1; }

.grupo {
  margin: 0 0 26px;
  padding: 0;
  border: none;
}

.grupo legend {
  padding: 0;
  margin-bottom: 14px;
  font-size: 1.05rem;
  font-weight: var(--peso-bold);
  color: var(--cor-vinho);
}

.grupo-opcional,
.grupo-exigido {
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: var(--raio-pill);
  background: var(--cor-suave);
  font-size: 0.72rem;
  font-weight: var(--peso-semibold);
  color: var(--cor-secundaria);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Uma exigência não pode ter a mesma cara de uma dispensa: o selo
   preenchido diz que aquilo tem que ser preenchido */
.grupo-exigido {
  background: var(--cor-primaria);
  color: var(--cor-branco);
}

/* A parte do formulário que ficou faltando. Acende inteira, e não só
   um campo: às vezes o que falta é a escolha entre dois cartões, ou
   uma rede qualquer entre quatro. */
.is-faltando {
  border-radius: var(--raio);
  outline: 2px solid #a3223a;
  outline-offset: 10px;
  animation: chamarAtencao 0.5s ease;
}

.is-faltando legend,
.is-faltando > span { color: #a3223a; }

@keyframes chamarAtencao {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* ---------- 7.3 TELAS DE LOGIN E CADASTRO ---------- */
.pagina-conta {
  display: flex;
  justify-content: center;
  padding: 56px 24px 80px;
}

.cartao-conta {
  width: 100%;
  max-width: 430px;
  padding: 40px 38px;
  border-radius: 26px;
  background: var(--cor-branco);
  box-shadow: 0 16px 40px rgba(58, 13, 13, 0.12);
  text-align: center;
}

.cartao-largo { max-width: 640px; }

.cartao-logo {
  width: 210px;
  max-width: 70%;
  margin: 0 auto 22px;
  /* A logo é rosa clarinha: sobre o cartão branco precisa de um
     fundo próprio, então ganha o rosa da marca por trás */
  padding: 14px 18px;
  border-radius: 18px;
  background: var(--cor-primaria);
}

.cartao-titulo {
  margin: 0 0 6px;
  font-size: 1.5rem;
  color: var(--cor-primaria);
}

.cartao-texto {
  margin: 0 0 28px;
  font-size: 0.95rem;
  color: var(--cor-grafite);
}

.cartao-nota {
  margin: 0 0 16px;
  font-size: 0.84rem;
  color: var(--cor-grafite);
  opacity: 0.8;
}

/* Os formulários são alinhados à esquerda dentro do cartão */
.cartao-conta form { text-align: left; }

.cartao-aviso {
  margin: 4px 0 16px;
  padding: 11px 15px;
  border-radius: var(--raio);
  background: rgba(222, 98, 131, 0.12);
  font-size: 0.88rem;
  font-weight: var(--peso-semibold);
  color: var(--cor-secundaria);
  text-align: left;
}

.cartao-aviso.is-ok {
  background: rgba(74, 157, 110, 0.14);
  color: #2f6d4a;
}

.cartao-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--cor-suave);
}

/* Aqui a nota é um texto ao lado do botão, e não um parágrafo:
   a margem de baixo dela desalinharia os dois na vertical */
.cartao-acoes .cartao-nota { margin: 0; }

/* ============================================================
   8. PERFIL
   ============================================================ */

/* ---------- 8.1 A BOLINHA NO HEADER ---------- */
.perfil-bolha {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--cor-primaria);
  background: rgba(255, 255, 255, 0.55);
  font-weight: var(--peso-bold);
  transition: transform var(--transicao), background var(--transicao-suave), color var(--transicao-suave);
}

.perfil-bolha:hover,
.perfil-bolha:focus-visible {
  background: var(--cor-primaria);
  color: var(--cor-branco);
  transform: translateY(-3px) scale(1.1);
}

.perfil-bolha svg { width: 19px; height: 19px; display: block; }

/* Logado: a bolinha vira a inicial do nome, em destaque */
.perfil-bolha.is-logado {
  background: var(--cor-primaria);
  color: var(--cor-branco);
}

.perfil-bolha.is-logado:hover { background: var(--cor-vinho); }

.perfil-inicial { font-size: 0.95rem; line-height: 1; }

/* ---------- 8.2 A PÁGINA DA CONTA ---------- */
.pagina-perfil {
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
  padding: 44px 24px 80px;
}

/* Painel que abre direto no cabeçalho, sem título de página antes:
   precisa do próprio respiro para não encostar no header fixo */
.pagina-painel { padding-top: 40px; }

.perfil-cabecalho {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;
  padding: 24px 28px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-secundaria) 100%);
  color: var(--cor-branco);
  box-shadow: 0 12px 30px rgba(58, 13, 13, 0.16);
}

/* Os blocos ficam lado a lado nas telas largas */
.perfil-secoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

/* Os que têm muitos campos ocupam a linha inteira */
.perfil-bloco-largo { grid-column: 1 / -1; }

.perfil-avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 1.4rem;
  font-weight: var(--peso-bold);
}

.perfil-identidade {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.perfil-identidade strong { font-size: 1.1rem; }

.perfil-identidade span {
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.perfil-selo {
  align-self: flex-start;
  margin-top: 5px;
  padding: 3px 11px;
  border-radius: var(--raio-pill);
  background: rgba(255, 255, 255, 0.25);
  font-size: 0.72rem !important;
  font-weight: var(--peso-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* O "sair" fica encostado na direita do cabeçalho */
.perfil-sair {
  width: auto;
  flex-shrink: 0;
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--cor-branco);
}

.perfil-sair:hover,
.perfil-sair:focus-visible {
  background: var(--cor-branco);
  border-color: var(--cor-branco);
  color: var(--cor-primaria);
}

.perfil-bloco {
  padding: 26px;
  border-radius: 22px;
  background: var(--cor-branco);
  box-shadow: 0 10px 26px rgba(58, 13, 13, 0.09);
}

.perfil-bloco h2 {
  margin: 0 0 16px;
  font-size: 1.12rem;
  color: var(--cor-primaria);
}

.perfil-bloco .botao { width: 100%; }

/* Exceção: numa fileira, os botões dividem a linha. A largura cheia
   serve para o botão que fecha um bloco sozinho — dois deles em pé,
   um sobre o outro, viram uma parede. */
.perfil-bloco .vagas-botoes .botao,
.perfil-bloco .jogos-rodape .botao { width: auto; }

.perfil-nota {
  margin: -8px 0 14px;
  font-size: 0.82rem;
  color: var(--cor-grafite);
  opacity: 0.8;
}

.perfil-pontos {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0 18px;
  padding: 16px 18px;
  border-radius: var(--raio);
  background: var(--cor-suave);
}

.perfil-pontos-numero {
  font-size: 1.9rem;
  font-weight: var(--peso-bold);
  color: var(--cor-primaria);
  line-height: 1;
}

.perfil-pontos-texto {
  font-size: 0.83rem;
  color: var(--cor-secundaria);
}

.perfil-tipos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.perfil-tipos .botao {
  width: auto;
  flex: 1;
  min-width: 92px;
  padding: 9px 12px;
  font-size: 0.85rem;
}

/* O bloco de demonstração não existiria no site publicado */
.perfil-bloco-demo {
  background: transparent;
  border: 2px dashed var(--cor-suave);
  box-shadow: none;
}

/* ---------- 8.1 NOTIFICAÇÕES ----------
   Desenhadas pelo components/notificacao.js e usadas em todo o site.
   Nenhuma página precisa ter estes elementos no HTML. */

/* O recado sobe do rodapé da tela quando algo é salvo */
.notificacao {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 1200;
  max-width: min(440px, calc(100% - 32px));
  margin: 0;
  padding: 14px 28px;
  border-radius: var(--raio-pill);
  background: var(--cor-primaria);
  color: var(--cor-branco);
  font-size: 0.9rem;
  font-weight: var(--peso-semibold);
  text-align: center;
  box-shadow: 0 10px 26px rgba(58, 13, 13, 0.28);
  transform: translateX(-50%);
}

.notificacao.is-erro { background: var(--cor-vinho); }

.notificacao.is-entrando {
  animation: subirAviso 0.35s cubic-bezier(0.2, 0.85, 0.25, 1);
}

@keyframes subirAviso {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* A pergunta antes de algo sem volta. Fica acima dos modais das
   páginas, porque muitas vezes ela nasce de dentro de um deles. */
.confirmacao-fundo {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(58, 13, 13, 0.55);
  animation: aparecer 0.2s ease;
}

.confirmacao {
  width: min(420px, 100%);
  padding: 28px 26px 24px;
  border-radius: 22px;
  background: var(--cor-branco);
  text-align: center;
  box-shadow: 0 22px 50px rgba(58, 13, 13, 0.32);
  animation: subirConfirmacao 0.28s cubic-bezier(0.2, 0.85, 0.25, 1);
}

.confirmacao-titulo {
  margin: 0 0 10px;
  font-size: 1.15rem;
  color: var(--cor-secundaria);
}

.confirmacao-texto {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
}

.confirmacao-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.confirmacao-acoes .botao { padding: 11px 22px; font-size: 0.92rem; }

@keyframes aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes subirConfirmacao {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   9. VAGAS
   ============================================================ */
.vagas-intro {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
  font-size: 1.02rem;
}

/* A página inteira fica numa coluna central: o .container do site é
   largo demais para texto, e o conteúdo ficava jogado na esquerda */
.vagas-secao {
  max-width: 1060px;
  margin: 0 auto 54px;
  text-align: center;
}

.vagas-titulo {
  margin: 0 0 6px;
  font-size: 1.3rem;
  color: var(--cor-primaria);
}

.vagas-nota {
  margin: 0 0 22px;
  font-size: 0.92rem;
  color: var(--cor-grafite);
  opacity: 0.85;
}

/* O formulário da administração fica fora da grade do perfil, então
   precisa da própria largura e do espaço até a seção seguinte */
.vagas-bloco {
  max-width: 1060px;
  margin: 0 auto 46px;
}

/* O teto de 380px por coluna cabia só duas por fileira nas telas de
   notebook. Com o mínimo menor e o máximo em 1fr, entram três sempre
   que houver uns 820px, e elas crescem para ocupar o que sobra. */
.vagas-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  justify-content: center;
  align-items: start;
  gap: 20px;
  margin-top: 18px;
}

/* ---------- 9.1 CARTÃO DA VAGA ---------- */
/* Dentro do cartão o texto volta a ser alinhado à esquerda: título,
   descrição e requisitos são leitura, não chamada */
.vaga-cartao {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 24px;
  border-radius: 20px;
  background: var(--cor-branco);
  box-shadow: 0 10px 26px rgba(58, 13, 13, 0.09);
  transition: transform var(--transicao), box-shadow var(--transicao-suave);
}

.vaga-cartao:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(58, 13, 13, 0.14);
}

/* Vaga fechada fica apagada na tela de administração */
.vaga-cartao.is-fechada { opacity: 0.7; }

.vaga-titulo {
  margin: 0 0 12px;
  font-size: 1.14rem;
  color: var(--cor-vinho);
}

.vaga-selos {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}

.vaga-selo {
  padding: 4px 12px;
  border-radius: var(--raio-pill);
  background: var(--cor-suave);
  font-size: 0.75rem;
  font-weight: var(--peso-semibold);
  color: var(--cor-secundaria);
}

.vaga-selo.is-aberta { background: #cdeed8; color: #2f6d4a; }
.vaga-selo.is-fechada { background: var(--cor-vinho); color: var(--cor-branco); }

.vaga-texto {
  margin: 0 0 12px;
  font-size: 0.93rem;
  line-height: 1.6;
}

.vaga-sem-candidatos { opacity: 0.7; font-size: 0.86rem; }

/* O botão desce para o rodapé do cartão, alinhando com os vizinhos */
.vaga-acao { margin-top: auto; align-self: center; }

/* ---------- 9.2 CANDIDATURAS (administração) ---------- */
.vaga-candidaturas {
  margin: 4px 0 14px;
  padding: 12px 14px;
  border-radius: var(--raio);
  background: var(--cor-fundo);
}

.vaga-candidaturas summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: var(--peso-semibold);
  color: var(--cor-primaria);
}

.vaga-candidatos { margin-top: 12px; }

/* Dentro do modal a lista é a primeira coisa: a folga que a separa do
   texto da vaga, no cartão, vira espaço sobrando aqui */
.modal-corpo .vaga-candidatos { margin-top: 0; }

.vaga-candidatos li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 0;
  border-top: 1px solid var(--cor-suave);
  font-size: 0.88rem;
}

.vaga-candidatos li:first-child { border-top: none; padding-top: 0; }

.vaga-candidato-email { color: var(--cor-secundaria); }

.vaga-candidato-data,
.vaga-candidato-arquivo {
  font-size: 0.79rem;
  opacity: 0.8;
  /* Nome de arquivo é uma palavra só, e às vezes enorme: sem quebrar
     no meio, ele empurra a largura do cartão inteiro */
  word-break: break-word;
  overflow-wrap: anywhere;
}

.vaga-candidato-arquivo em { font-style: normal; color: var(--cor-primaria); }

.vaga-candidato-link {
  color: var(--cor-primaria);
  font-weight: var(--peso-semibold);
  word-break: break-all;
}

.vaga-candidato-link:hover { text-decoration: underline; }

.vaga-candidato-mensagem {
  margin: 6px 0 0;
  padding: 10px 12px;
  border-radius: var(--raio);
  background: var(--cor-suave);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* ---------- 9.3 FORMULÁRIOS DA PÁGINA ---------- */
.vagas-form {
  max-width: 720px;
  margin: 0 auto;
  padding: 26px;
  border-radius: 20px;
  background: var(--cor-branco);
  box-shadow: 0 10px 26px rgba(58, 13, 13, 0.09);
  /* Rótulo e campo de formulário se leem melhor alinhados à esquerda */
  text-align: left;
}

/* O botão de enviar volta ao centro. Precisa virar bloco: como
   inline-flex, a margem automática não o centralizaria. */
.vagas-form > .botao {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

.campo-texto {
  resize: vertical;
  min-height: 90px;
  line-height: 1.55;
}

/* ---------- CAMPO COM LISTA ----------
   Um campo de texto com as opções embaixo, filtradas enquanto se
   digita. Serve onde um <select> não basta porque a lista é longa —
   e digitar dentro de um <select> nenhum navegador permite. */
.combo {
  position: relative;
  display: block;
}

.combo-campo { padding-right: 42px; }

.combo-seta {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 14px;
  height: 14px;
  color: var(--cor-secundaria);
  transform: translateY(-50%);
  pointer-events: none;
}

.combo-seta svg { width: 100%; height: 100%; display: block; }

.combo-lista {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 16px;
  background: var(--cor-branco);
  box-shadow: 0 16px 34px rgba(58, 13, 13, 0.18);
}

.combo-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 11px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transicao-suave);
}

.combo-item strong { font-size: 0.9rem; color: var(--cor-secundaria); }
.combo-item span { font-size: 0.79rem; opacity: 0.8; }

.combo-item:hover,
.combo-item:focus-visible { background: var(--cor-suave); }

.combo-vazio {
  padding: 12px;
  font-size: 0.85rem;
  text-align: center;
  opacity: 0.75;
}

/* ---------- OLHO DE SENHA ----------
   O components/senha.js embrulha cada campo de senha nesta caixa e
   põe o botão dentro dela. */
.campo-senha {
  position: relative;
  display: block;
}

/* O texto para antes do olho, senão a senha passa por baixo dele */
.campo-senha .campo-entrada { padding-right: 48px; }

.campo-olho {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--cor-secundaria);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background var(--transicao-suave), color var(--transicao-suave);
}

.campo-olho:hover,
.campo-olho:focus-visible {
  background: var(--cor-suave);
  color: var(--cor-destaque);
}

.campo-olho svg { width: 19px; height: 19px; display: block; }

/* Campo de arquivo: o botão nativo ganha a cara do site */
.campo-arquivo {
  width: 100%;
  padding: 11px 14px;
  border: 2px dashed var(--cor-suave);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--cor-grafite);
  cursor: pointer;
}

.campo-arquivo::file-selector-button {
  margin-right: 12px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--raio-pill);
  background: var(--cor-primaria);
  color: var(--cor-branco);
  font-family: inherit;
  font-weight: var(--peso-semibold);
  cursor: pointer;
}

.campo-marcador {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 0.93rem;
  cursor: pointer;
}

.campo-marcador input { width: 18px; height: 18px; accent-color: var(--cor-primaria); }

.vagas-botoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}

.vagas-botoes .botao { padding: 10px 20px; font-size: 0.9rem; }

/* Nesta fileira a cor é fixa, e a cor escolhida é a que estes botões
   tinham no hover. Cada regra vale para os dois estados, então nada
   muda ao passar o mouse — só o leve levantar, que é o retorno de
   que o botão é clicável. */
.vagas-botoes .botao-fantasma,
.vagas-botoes .botao-fantasma:hover,
.vagas-botoes .botao-fantasma:focus-visible {
  background: transparent;
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
}

.vagas-botoes .botao-secundario,
.vagas-botoes .botao-secundario:hover,
.vagas-botoes .botao-secundario:focus-visible {
  background: var(--cor-primaria);
  color: var(--cor-branco);
}

.vagas-botoes .botao-perigo,
.vagas-botoes .botao-perigo:hover,
.vagas-botoes .botao-perigo:focus-visible {
  background: #a3223a;
  border-color: #a3223a;
  color: var(--cor-branco);
}

.botao-perigo {
  background: transparent;
  border: 2px solid var(--cor-suave);
  color: var(--cor-vinho);
}

.botao-perigo:hover,
.botao-perigo:focus-visible {
  background: #a3223a;
  border-color: #a3223a;
  color: var(--cor-branco);
}

/* ---------- 9.4 ESTADOS ---------- */
.vagas-vazio,
.vagas-trancado {
  max-width: 620px;
  margin: 0 auto;
  padding: 30px 26px;
  border-radius: 20px;
  border: 2px dashed var(--cor-suave);
  text-align: center;
  font-size: 0.96rem;
}

.vagas-trancado p { margin: 0 0 16px; }

.vagas-bloqueio { max-width: 560px; margin: 40px auto; }
.vagas-bloqueio h1 { color: var(--cor-primaria); }

.vagas-aviso {
  max-width: 720px;
  margin: 16px auto 0;
  padding: 13px 18px;
  border-radius: var(--raio);
  background: rgba(74, 157, 110, 0.14);
  font-size: 0.9rem;
  font-weight: var(--peso-semibold);
  color: #2f6d4a;
}

.vagas-aviso.is-erro {
  background: rgba(222, 98, 131, 0.14);
  color: var(--cor-secundaria);
}

/* ---------- 9.5 JANELA DE CANDIDATURA ---------- */
.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(58, 13, 13, 0.45);
}

.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1101;
  width: min(560px, calc(100% - 32px));
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: var(--cor-branco);
  box-shadow: 0 22px 50px rgba(58, 13, 13, 0.32);
  transform: translate(-50%, -50%);
  animation: abrirModal 0.3s cubic-bezier(0.2, 0.85, 0.25, 1);
}

@keyframes abrirModal {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.modal-topo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--cor-suave);
}

.modal-topo h2 {
  flex: 1;
  margin: 0;
  font-size: 1.15rem;
  color: var(--cor-primaria);
}

.modal-fechar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--cor-secundaria);
  background: var(--cor-fundo);
  transition: background var(--transicao-suave);
}

.modal-fechar:hover { background: var(--cor-suave); }
.modal-fechar svg { width: 17px; height: 17px; }

.modal-corpo {
  padding: 22px 24px 26px;
  overflow-y: auto;
  /* Nada dentro do modal pode esticá-lo para o lado: rolagem
     horizontal num modal é sempre um acidente */
  overflow-x: hidden;
}

/* Modal que carrega uma lista, e não um formulário */
.modal-largo { width: min(760px, calc(100% - 32px)); }
.modal-largo .recompensa-lista { margin-top: 0; }

/* Filtros de uma lista dentro do modal. Ficam irmãos do corpo, e não
   dentro dele, para não rolarem junto com a lista. */
.modal-busca {
  flex-shrink: 0;
  max-width: none;
  margin: 0;
  padding: 16px 24px;
  border-bottom: 1px solid var(--cor-suave);
}

/* Os três campos ficam lado a lado, dividindo a largura do modal.
   A dupla classe é necessária: o .recompensa-busca .campo vem depois
   no arquivo e, com a mesma força, ganharia — é ele quem prende a
   largura mínima que fazia os campos quebrarem de linha aqui. */
.recompensa-busca.modal-busca { flex-wrap: nowrap; }
.recompensa-busca.modal-busca .campo { flex: 1.2 1 0; min-width: 0; }
.recompensa-busca.modal-busca .campo-estreito { flex: 1 1 0; }

/* ============================================================
   10. PROGRAMA DE RECOMPENSAS
   ============================================================ */

/* Os dois cartões de "artista / criador" na abertura */
.recompensa-tipos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* ---------- 10.1 SITUAÇÃO DA INSCRIÇÃO ---------- */
.recompensa-estado {
  max-width: 720px;
  margin: 0 auto 26px;
  padding: 28px 26px;
  border-radius: 20px;
  border: 2px solid var(--cor-suave);
  background: var(--cor-branco);
  text-align: center;
}

.recompensa-estado h2 { margin: 12px 0 10px; font-size: 1.25rem; }
.recompensa-estado p { margin: 0 0 8px; font-size: 0.96rem; }

.recompensa-estado.is-aprovada { border-color: #7cc79a; }
.recompensa-estado.is-recusada { border-color: var(--cor-secundaria); }

.recompensa-selo {
  display: inline-block;
  padding: 5px 16px;
  border-radius: var(--raio-pill);
  background: var(--cor-suave);
  font-size: 0.76rem;
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-secundaria);
}

.is-aprovada .recompensa-selo { background: #cdeed8; color: #2f6d4a; }
.is-recusada .recompensa-selo { background: var(--cor-secundaria); color: var(--cor-branco); }

.recompensa-motivo {
  margin: 12px auto;
  padding: 14px 18px;
  border-radius: var(--raio);
  background: var(--cor-fundo);
  font-size: 0.92rem;
  text-align: left;
}

.recompensa-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

.recompensa-form-titulo {
  margin: 0 0 20px;
  font-size: 1.2rem;
  color: var(--cor-primaria);
}

/* ---------- 10.2 ESCOLHA ARTISTA / CRIADOR ---------- */
.recompensa-escolha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.escolha-cartao {
  position: relative;
  display: block;
  cursor: pointer;
}

/* O botão nativo some, mas continua ali para o teclado e o leitor */
.escolha-cartao input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.escolha-conteudo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 18px 20px;
  border: 2px solid var(--cor-suave);
  border-radius: var(--raio);
  transition: border-color var(--transicao-suave), background var(--transicao-suave);
}

.escolha-conteudo strong { color: var(--cor-vinho); font-size: 1.02rem; }
.escolha-conteudo span { font-size: 0.86rem; opacity: 0.85; }

.escolha-cartao:hover .escolha-conteudo { border-color: var(--cor-primaria); }

/* Escolhido: fica preenchido na cor da marca, como um botão ligado */
.escolha-cartao input:checked + .escolha-conteudo {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria);
}

.escolha-cartao input:checked + .escolha-conteudo strong,
.escolha-cartao input:checked + .escolha-conteudo span {
  color: var(--cor-branco);
  opacity: 1;
}

.escolha-cartao input:focus-visible + .escolha-conteudo {
  outline: 3px solid var(--cor-primaria);
  outline-offset: 3px;
}

/* ---------- 10.3 JOGO + E-MAIL ---------- */
.jogo-linha { align-items: flex-end; }

/* Some quando só resta uma linha */
.jogo-remover {
  width: 38px;
  height: 46px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: var(--raio);
  background: var(--cor-suave);
  color: var(--cor-secundaria);
  font-size: 1.3rem;
  line-height: 1;
  transition: background var(--transicao-suave), color var(--transicao-suave);
}

.jogo-remover:hover {
  background: var(--cor-secundaria);
  color: var(--cor-branco);
}

.jogos-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.jogos-rodape .botao { padding: 9px 18px; font-size: 0.88rem; }

/* Sem jogo sobrando, o botão fica desligado e o aviso explica */
.jogos-rodape .botao:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.jogos-rodape .campo-ajuda { flex: 1; min-width: 200px; margin-top: 0; }

/* ---------- EXEMPLOS DO ESTILO DE ARTE ----------
   Miniaturas quadradas: os arquivos vêm em formatos diferentes, e
   sem um recorte igual a fileira fica desalinhada. */
.exemplos-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.exemplo-item {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--cor-suave);
  background: var(--cor-fundo);
}

.exemplo-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.exemplo-tirar {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(58, 13, 13, 0.72);
  color: var(--cor-branco);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transicao-suave);
}

.exemplo-tirar:hover { background: #a3223a; }

/* Miniatura clicável: a imagem grande abre por cima da página */
.exemplo-abre {
  padding: 0;
  cursor: pointer;
  transition: transform var(--transicao), border-color var(--transicao-suave);
}

.exemplo-abre:hover,
.exemplo-abre:focus-visible {
  transform: translateY(-3px);
  border-color: var(--cor-primaria);
}

/* No cartão da vaga a lista fica entre o texto e o botão de
   candidatura: o parágrafo acima já traz a própria folga, e embaixo
   ela precisa de um respiro para não encostar no botão */
/* Na página pública o cartão fica centralizado. São poucas linhas por
   vaga, e centradas elas se lêem como um anúncio; à esquerda, com o
   botão no meio, o cartão ficava torto.

   A administração continua alinhada à esquerda: ali cada cartão traz
   a lista de candidaturas, que é para ser varrida com os olhos. */
#vagasLista .vaga-cartao { text-align: center; }
#vagasLista .vaga-selos,
#vagasLista .exemplos-lista { justify-content: center; }

.vaga-cartao .exemplos-lista { margin: 2px 0 20px; }

/* ---------- LUPA ----------
   A imagem ampliada, desenhada pelo components/imagem.js */
.lupa {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(58, 13, 13, 0.82);
  cursor: zoom-out;
  animation: aparecer 0.2s ease;
}

.lupa-imagem {
  max-width: 100%;
  max-height: 100%;
  display: block;
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
  animation: subirConfirmacao 0.28s cubic-bezier(0.2, 0.85, 0.25, 1);
}

.lupa-fechar {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: var(--cor-branco);
  cursor: pointer;
  transition: background var(--transicao-suave);
}

.lupa-fechar:hover { background: rgba(255, 255, 255, 0.3); }
.lupa-fechar svg { width: 19px; height: 19px; }

/* No perfil o grupo de jogos não tem <legend>, então o rótulo e a
   explicação ficam soltos e precisam do próprio espaçamento */
.perfil-nota-jogos { margin: 0 0 14px; }

/* ---------- 10.4 PAINEL ---------- */
.recompensa-lembrete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  max-width: 1060px;
  margin: 0 auto 26px;
  padding: 14px 16px 14px 20px;
  border-radius: var(--raio);
  background: var(--cor-suave);
  font-size: 0.94rem;
  color: var(--cor-secundaria);
}

/* O texto ocupa o que sobra e empurra o botão para a direita */
.recompensa-lembrete > span { flex: 1; min-width: 220px; }

.botao-regras {
  flex-shrink: 0;
  padding: 9px 18px;
  font-size: 0.86rem;
  background: var(--cor-branco);
  color: var(--cor-secundaria);
}

.botao-regras:hover,
.botao-regras:focus-visible {
  background: var(--cor-primaria);
  color: var(--cor-branco);
}

.botao-regras .botao-icone { width: 17px; height: 17px; }

/* Lista dentro do modal de regras */
.lista-regras {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lista-regras li {
  position: relative;
  padding-left: 26px;
  font-size: 0.93rem;
  line-height: 1.55;
}

/* Patinha no lugar do marcador da lista */
.lista-regras li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 14px;
  height: 14px;
  background-color: var(--cor-primaria);
  -webkit-mask-image: var(--patinha);
          mask-image: var(--patinha);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.recompensa-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}

.recompensa-numero {
  padding: 20px;
  border-radius: 18px;
  background: var(--cor-branco);
  box-shadow: 0 10px 26px rgba(58, 13, 13, 0.08);
  text-align: center;
}

.recompensa-numero strong {
  display: block;
  font-size: 2rem;
  line-height: 1;
  color: var(--cor-primaria);
}

.recompensa-numero span {
  display: block;
  margin-top: 6px;
  font-size: 0.84rem;
  opacity: 0.85;
}

/* O número que a pessoa veio ver, no meio dos que dão contexto */
.recompensa-numero.is-destaque {
  background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-secundaria) 100%);
  color: var(--cor-branco);
}

.recompensa-numero.is-destaque strong { color: var(--cor-branco); font-size: 2.3rem; }
.recompensa-numero.is-destaque span { opacity: 0.95; }

/* ---------- 10.5 LISTA DE ENVIOS ---------- */
.recompensa-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 860px;
  margin: 18px auto 0;
  text-align: left;
}

.recompensa-item {
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--cor-branco);
  box-shadow: 0 8px 22px rgba(58, 13, 13, 0.08);
}

.recompensa-item-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.recompensa-status {
  padding: 4px 12px;
  border-radius: var(--raio-pill);
  font-size: 0.75rem;
  font-weight: var(--peso-semibold);
  background: var(--cor-suave);
  color: var(--cor-secundaria);
}

.recompensa-status.is-aprovada   { background: #cdeed8; color: #2f6d4a; }
.recompensa-status.is-recusada   { background: var(--cor-secundaria); color: var(--cor-branco); }
.recompensa-status.is-depositada { background: var(--cor-primaria); color: var(--cor-branco); }

.recompensa-selo-tipo {
  padding: 4px 12px;
  border-radius: var(--raio-pill);
  border: 1px solid var(--cor-suave);
  font-size: 0.75rem;
  color: var(--cor-secundaria);
}

.recompensa-data {
  margin-left: auto;
  font-size: 0.8rem;
  opacity: 0.75;
}

.recompensa-nome {
  display: block;
  margin-bottom: 4px;
  color: var(--cor-vinho);
}

.recompensa-link {
  display: block;
  margin: 4px 0;
  font-size: 0.88rem;
  color: var(--cor-primaria);
  font-weight: var(--peso-semibold);
  word-break: break-all;
}

.recompensa-link:hover { text-decoration: underline; }

/* Link no meio de uma frase, e não numa linha só dele */
.recompensa-link.is-inline {
  display: inline;
  margin: 0;
  font-size: inherit;
  word-break: normal;
  white-space: nowrap;
}

.recompensa-detalhes {
  margin: 6px 0 0;
  font-size: 0.86rem;
  opacity: 0.85;
}

/* Campo de motivo que abre ao recusar */
.recompensa-recusa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

/* O "confirmar recusa" é a ação mais séria da tela: fica sempre
   preenchido, e a cor não muda no hover. As três situações usam a
   mesma regra para nada mudar ao passar o mouse. */
.recompensa-recusa .botao-perigo,
.recompensa-recusa .botao-perigo:hover,
.recompensa-recusa .botao-perigo:focus-visible {
  background: #a3223a;
  border-color: #a3223a;
  color: var(--cor-branco);
}

.recompensa-filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.recompensa-filtros .botao { padding: 8px 18px; font-size: 0.86rem; }

/* Busca por pessoa e recorte por tipo, na moderação */
.recompensa-busca {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 720px;
  margin: 14px auto 0;
}

.recompensa-busca .campo { flex: 1; min-width: 220px; margin-bottom: 0; }
.recompensa-busca .campo-estreito { flex: 0 1 260px; }

.recompensa-periodo {
  max-width: 720px;
  margin: 10px auto 0;
  text-align: center;
}

/* ---------- 10.6 BOTÃO DO GRUPO ---------- */
/* ============================================================
   9-B. FOOTER
   Faixa escura no fim de toda página. As cores são fixas de
   propósito: ela é escura nos dois temas, e é o texto que muda.
   ============================================================ */
.site-footer {
  position: relative;
  margin-top: 46px;
  padding: 22px 0 18px;
  background: var(--cor-vinho);
  color: var(--cor-suave);
  font-size: 0.82rem;
}

/* A mesma fita colorida que fecha o header, agora abrindo o rodapé */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--cor-primaria) 0%,
    var(--cor-secundaria) 35%,
    var(--cor-suave) 50%,
    var(--cor-secundaria) 65%,
    var(--cor-primaria) 100%);
}

/* A marca à esquerda e as colunas logo em seguida, como na
   referência. Empurradas para a beirada direita, elas ficavam longe
   demais da marca para se lerem como parte do mesmo rodapé. */
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 26px 64px;
}

.footer-marca { flex: 0 1 250px; }

/* A logo entra como máscara: o desenho vem do arquivo e a cor, do
   tema. Assim ela é rosa no claro e amarela no escuro, sempre igual
   aos títulos das colunas — sem um arquivo de cor fixa puxando a
   paleta do outro tema para dentro deste. */
.footer-logo { display: block; }

.footer-logo-marca {
  display: block;
  /* 2657x800 é o tamanho do arquivo */
  width: 122px;
  height: 36.7px;
  background-color: var(--cor-primaria);
  -webkit-mask-image: var(--logo);
          mask-image: var(--logo);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: left center;
          mask-position: left center;
  transition: background-color var(--transicao-suave);
}

.footer-logo:hover .footer-logo-marca { background-color: var(--cor-suave); }

.footer-lema {
  margin: 8px 0 8px;
  max-width: 250px;
  font-size: 0.77rem;
  line-height: 1.45;
}

.footer-email {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--cor-suave);
  transition: color var(--transicao-suave);
}

.footer-email:hover { color: var(--cor-primaria); }

.footer-email-icone { width: 15px; height: 15px; flex-shrink: 0; }
.footer-email-icone svg { width: 100%; height: 100%; display: block; }

/* O contato fica na ponta direita, sozinho: é o que sobrava de altura
   na coluna da marca */
.footer-contato { margin-left: auto; }

.footer-redes { margin: 10px 0 0; gap: 7px; }

/* Menores que as do header: aqui elas acompanham, não chamam */
.footer-redes .social-link { width: 27px; height: 27px; }
.footer-redes .social-link svg { width: 14px; height: 14px; }

/* Sobre o vinho, o botão redondo das redes precisa clarear */
.footer-redes .social-link {
  background: rgba(255, 255, 255, 0.12);
  color: var(--cor-suave);
}

.footer-redes .social-link:hover {
  background: var(--cor-primaria);
  color: var(--cor-vinho);
}

.footer-direitos {
  margin: 0;
  font-size: 0.78rem;
  font-weight: var(--peso-semibold);
  opacity: 0.85;
}

/* As colunas ficam do tamanho do conteúdo e encostadas umas nas
   outras. Esticadas para ocupar a largura, elas se afastavam tanto
   que deixavam de parecer um bloco só. */
.footer-colunas {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
}

/* Largura mínima igual para as três: sem ela, "Jogos" fica magrinha
   ao lado de "Participe" e as divisórias saem desencontradas */
.footer-coluna { min-width: 132px; }

/* A linha que separa as colunas, como na referência */
.footer-coluna + .footer-coluna {
  padding-left: 34px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-coluna-titulo {
  margin: 0 0 7px;
  font-size: 0.8rem;
  color: var(--cor-primaria);
}

.footer-coluna li + li { margin-top: 4px; }

.footer-link {
  font-size: 0.78rem;
  color: var(--cor-suave);
  transition: color var(--transicao-suave);
}

.footer-link:hover { color: var(--cor-primaria); }

/* ============================================================
   10-A. SEÇÕES DA HOME
   Vitrines de cartões usadas por loja, vagas, Instagram,
   comunidade, fanarts e criadores do mês. Uma peça só serve a
   todas: o que muda é quais partes vêm preenchidas.
   ============================================================ */

/* Faixa alternada, para as seções não virarem um bloco só */
.secao-clara { background: var(--cor-fundo); }

.secao-texto {
  max-width: 620px;
  margin: -18px auto 34px;
  text-align: center;
  font-size: 1rem;
}

.secao-acao { margin-top: 34px; text-align: center; }

.vitrine {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 290px));
  justify-content: center;
  align-items: stretch;
  gap: 20px;
}

.vitrine-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: var(--cor-branco);
  box-shadow: 0 10px 26px rgba(58, 13, 13, 0.09);
  transition: transform var(--transicao), box-shadow var(--transicao-suave);
}

a.vitrine-item:hover,
a.vitrine-item:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(58, 13, 13, 0.16);
}

/* A arte ocupa a largura toda do cartão */
.vitrine-arte {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--cor-suave);
}

/* Nas vitrines de imagem — Instagram e fanarts — o quadrado é o
   formato que as redes usam, e o que evita cartões desiguais */
.vitrine-quadrada .vitrine-arte { aspect-ratio: 1 / 1; }

.vitrine-arte img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Quando não há foto, a inicial do nome faz as vezes dela */
.vitrine-inicial {
  display: grid;
  place-items: center;
  height: 92px;
  background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-secundaria) 100%);
  color: var(--cor-branco);
  font-size: 2.1rem;
  font-weight: var(--peso-bold);
}

.vitrine-corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 18px 20px 20px;
  text-align: left;
}

.vitrine-corpo strong {
  font-size: 1rem;
  color: var(--cor-secundaria);
}

.vitrine-corpo span {
  font-size: 0.87rem;
  line-height: 1.5;
}

.vitrine-selo {
  padding: 4px 12px;
  border-radius: var(--raio-pill);
  background: var(--cor-suave);
  color: var(--cor-destaque);
  font-size: 0.72rem;
  font-weight: var(--peso-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Espaço reservado: o desenho da seção enquanto ela não tem
   conteúdo. Tracejado para ninguém confundir com cartão de verdade. */
.vitrine-item.is-vazio,
.parceiro-vazio {
  min-height: 190px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 2px dashed var(--cor-suave);
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
}

.vitrine-vazio {
  font-size: 0.88rem;
  font-weight: var(--peso-semibold);
  color: var(--cor-secundaria);
  opacity: 0.75;
  text-align: center;
}

/* ---------- PARCEIROS ----------
   Logos de tamanhos e formatos diferentes: a altura fixa e o
   contain são o que os deixa parecendo do mesmo tamanho. */
.parceiros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 22px;
}

.parceiro {
  display: grid;
  place-items: center;
  width: 190px;
  height: 110px;
  padding: 18px;
  border-radius: 18px;
  background: var(--cor-branco);
  box-shadow: 0 10px 26px rgba(58, 13, 13, 0.09);
  transition: transform var(--transicao);
}

a.parceiro:hover,
a.parceiro:focus-visible { transform: translateY(-5px); }

.parceiro img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.parceiro-vazio { width: 190px; height: 110px; min-height: 0; }

/* Arte anexada a uma publicação, no painel e na moderação */
.arte-previa {
  display: block;
  width: 100%;
  max-width: 320px;
  max-height: 300px;
  margin: 12px auto 0;
  object-fit: contain;
  border-radius: 14px;
  border: 2px solid var(--cor-suave);
  background: var(--cor-fundo);
}

/* ============================================================
   10-B. GUIA DOS JOGOS
   Página inicial: um bloco por jogo, com a sinopse, a logo que
   leva às respostas e os últimos episódios de cada categoria.
   ============================================================ */

.guia-jogo {
  max-width: 1000px;
  margin: 0 auto 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--cor-divisor);
}

.guia-jogo:last-child { border-bottom: none; padding-bottom: 0; }

.guia-capa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 42px;
  text-align: center;
}

.guia-sinopse {
  max-width: 620px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
}

/* A logo é o caminho principal para as respostas, então ela é o
   maior alvo da tela */
.guia-logo {
  display: block;
  max-width: 340px;
  transition: transform var(--transicao), filter var(--transicao-suave);
}

.guia-logo img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(58, 13, 13, 0.22));
}

.guia-logo:hover,
.guia-logo:focus-visible { transform: translateY(-6px) scale(1.02); }

.guia-ultimo {
  margin: 0;
  font-size: 0.94rem;
  color: var(--cor-secundaria);
}

.guia-ultimo span { opacity: 0.7; }

.guia-categoria { margin-bottom: 30px; }

.guia-categoria-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--cor-suave);
}

.guia-categoria-topo h2 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--cor-primaria);
}

.guia-todos {
  font-size: 0.86rem;
  font-weight: var(--peso-semibold);
  color: var(--cor-secundaria);
  border-bottom: 1px dashed var(--cor-divisor);
}

.guia-todos:hover { color: var(--cor-primaria); }

/* Três por fileira nas telas largas, um por linha no celular */
.guia-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.guia-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px;
  border-radius: 18px;
  background: var(--cor-branco);
  box-shadow: 0 10px 26px rgba(58, 13, 13, 0.09);
  transition: transform var(--transicao), box-shadow var(--transicao-suave);
}

.guia-card:hover,
.guia-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 18px 34px rgba(58, 13, 13, 0.16);
}

.guia-card strong { font-size: 1.05rem; color: var(--cor-secundaria); }
.guia-card-titulo { font-size: 0.9rem; }
.guia-card-data { font-size: 0.8rem; opacity: 0.7; }

.guia-selo {
  align-self: flex-start;
  margin-bottom: 4px;
  padding: 3px 10px;
  border-radius: var(--raio-pill);
  background: var(--cor-primaria);
  color: var(--cor-branco);
  font-size: 0.68rem;
  font-weight: var(--peso-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.guia-vazio {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.75;
}

/* ---------- 10.7 ABAS DA ADMINISTRAÇÃO ---------- */

/* Fileira que troca a área de trabalho da página. Fica separada do
   conteúdo por uma linha, para não se confundir com os filtros que
   aparecem dentro de cada área. */
.adm-abas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 1060px;
  margin: 0 auto 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--cor-divisor);
}

.adm-abas .botao { padding: 10px 20px; font-size: 0.9rem; }

/* Aba com trabalho parado. O preenchimento suave a destaca sem
   competir com a aba aberta, que é a única cheia de cor. */
.adm-abas .tem-novidade {
  background: var(--cor-destaque);
  border-color: var(--cor-destaque);
  color: var(--cor-branco);
}

/* A aba aberta é a mais forte, tenha novidade ou não. Precisa desta
   regra própria porque a de cima vem depois do .botao-fantasma.is-ativo
   no arquivo e, com a mesma força, apagaria o preenchimento dela. */
.adm-abas .botao.is-ativo {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--cor-branco);
}

/* Quantos itens estão esperando naquela aba */
.aba-conta {
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--raio-pill);
  background: var(--cor-primaria);
  color: var(--cor-branco);
  font-size: 0.72rem;
  font-weight: var(--peso-bold);
  line-height: 1;
}

/* Na aba aberta o fundo já é rosa, então o carimbo inverte */
/* Sobre uma aba preenchida o carimbo inverte, senão ele some no
   fundo da própria cor */
.adm-abas .tem-novidade .aba-conta {
  background: var(--cor-branco);
  color: var(--cor-destaque);
}

.adm-abas .is-ativo .aba-conta {
  background: var(--cor-branco);
  color: var(--cor-secundaria);
}

.vagas-subtitulo {
  margin: 34px 0 16px;
  font-size: 1.05rem;
  text-align: center;
  color: var(--cor-secundaria);
}

/* Listas curtas viram grade, e não pilha: são poucas informações por
   item, e empilhados eles gastariam uma tela inteira para dizer
   pouco. A largura mínima cabe três ou quatro por fileira no espaço
   da página, e vira uma coluna só no celular. */
.cartao-grade {
  display: grid;
  /* auto-fit em vez de auto-fill: as colunas que sobram somem, e o
     teto de 300px impede que um cartão sozinho estique pela fileira
     inteira. Com as colunas vazias fora do caminho, o justify-content
     consegue centralizar o que restou. */
  grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
  justify-content: center;
  align-items: start;
  gap: 16px;
  max-width: 1060px;
}

.cartao-grade .recompensa-item { padding: 18px; }
.cartao-grade .recompensa-item-topo { margin-bottom: 8px; }

/* No cartão estreito a data cai para a linha de baixo, e o empurrão
   para a direita que ela tem na lista deixaria de fazer sentido */
.cartao-grade .recompensa-data { margin-left: 0; }

/* Nome de quem está no programa: é o que se clica para abrir o
   resumo, então precisa parecer clicável sem virar um botão cheio */
.pessoa-abrir {
  display: inline-block;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: var(--peso-bold);
  color: var(--cor-secundaria);
  text-align: left;
  cursor: pointer;
  border-bottom: 1px dashed var(--cor-primaria);
  transition: color var(--transicao-suave);
}

.pessoa-abrir:hover,
.pessoa-abrir:focus-visible { color: var(--cor-primaria); }

/* Selo de quem está nos Top criadores */
.selo-top {
  padding: 4px 12px;
  border-radius: var(--raio-pill);
  background: var(--cor-primaria);
  color: var(--cor-branco);
  font-size: 0.72rem;
  font-weight: var(--peso-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pessoa-numeros { margin: 20px 0 0; }
.pessoa-acoes { margin-top: 22px; }

.pessoa-bloco { margin-top: 24px; }

.pessoa-bloco h3 {
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: var(--cor-secundaria);
}

/* Uma linha por mês e rede: o rótulo à esquerda, o número à direita,
   para a coluna de números ficar alinhada e dar para comparar */
.pessoa-alcance {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pessoa-alcance li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--cor-fundo);
  font-size: 0.9rem;
}

.pessoa-alcance strong { color: var(--cor-secundaria); }

/* Cartão de métrica na lista: o print aparece em miniatura só para
   reconhecer de quem é. Ler o número exige a imagem grande, e é o
   clique no cartão que a abre. */
.metrica-cartao {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: transform var(--transicao), box-shadow var(--transicao-suave);
}

.metrica-cartao:hover,
.metrica-cartao:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(58, 13, 13, 0.14);
}

.metrica-miniatura {
  display: block;
  width: 100%;
  height: 130px;
  margin-bottom: 12px;
  object-fit: cover;
  /* O alto do print é onde ficam os números, então o corte tira de
     baixo, e não do meio */
  object-position: top;
  border-radius: 12px;
  background: var(--cor-fundo);
}

.metrica-numero {
  font-weight: var(--peso-semibold);
  color: var(--cor-secundaria);
}

/* Campo onde a administração anota o alcance lido no print */
.metrica-alcance {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.metrica-alcance .campo { flex: 1 1 200px; max-width: 260px; margin-bottom: 0; }
.metrica-alcance .botao { padding: 11px 22px; font-size: 0.9rem; }

/* ---------- 10.8 MÉTRICA MENSAL ---------- */

/* O print enviado. Altura limitada porque a imagem vem de um celular
   e costuma ser bem mais alta que larga — sem o teto, um único print
   empurraria o resto da página para longe. */
.metrica-print {
  display: block;
  width: 100%;
  max-width: 420px;
  max-height: 340px;
  margin: 14px auto 0;
  object-fit: contain;
  border-radius: 14px;
  border: 2px solid var(--cor-suave);
  background: var(--cor-fundo);
}

.metrica-enviada {
  padding: 16px 18px 18px;
  border-radius: 18px;
  background: var(--cor-fundo);
}

/* Uma caixa por rede enviada. Só ganha margem quando tem alguma
   coisa dentro — no começo do mês a lista está vazia. */
.metrica-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.metrica-lista:not(:empty) { margin-bottom: 20px; }

/* ---------- 10.9 AVISOS DO ESTÚDIO ---------- */

/* Botões do cabeçalho colorido do painel — avisos e denúncias.
   Vazados, para não competirem com o botão do grupo, que fica ao
   lado e é o único cheio. */
.botao-painel {
  position: relative;
  flex-shrink: 0;
  padding: 10px 18px;
  font-size: 0.88rem;
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: var(--cor-branco);
}

.botao-painel:hover,
.botao-painel:focus-visible {
  background: var(--cor-branco);
  border-color: var(--cor-branco);
  color: var(--cor-secundaria);
}

.botao-painel .botao-icone { width: 17px; height: 17px; }

/* Subtítulo dentro de um modal que tem mais de uma parte */
.modal-subtitulo {
  margin: 28px 0 14px;
  font-size: 1rem;
  color: var(--cor-secundaria);
}

/* Quantos avisos ainda não foram lidos. Fica na quina do botão, como
   um carimbo, e some sozinho quando não há nada novo. */
.botao-marcador {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: var(--raio-pill);
  background: var(--cor-vinho);
  color: var(--cor-branco);
  font-size: 0.72rem;
  font-weight: var(--peso-bold);
  line-height: 1;
}

/* O texto do aviso é escrito à mão pela administração: as quebras de
   linha que ela usou precisam sobreviver */
.aviso-texto {
  white-space: pre-line;
  line-height: 1.6;
}

/* Recado endereçado a uma pessoa só ganha uma borda, para não se
   perder no meio dos comunicados gerais */
.aviso-item.is-pessoal {
  border: 2px solid var(--cor-primaria);
}

.botao-whats {
  background: #1f8a4c;
  color: var(--cor-branco);
}

.botao-whats:hover,
.botao-whats:focus-visible { background: #186e3c; color: var(--cor-branco); }

.botao-icone {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
}

.botao-icone svg { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------
   11. RESPONSIVO
------------------------------------------------------------ */

/* Telas médias: aperta o espaçamento da nav */
@media (max-width: 1500px) {
  .nav-link { padding: 6px 12px; font-size: 0.84rem; }
  .container { padding: 0 18px; }
  .social-link { width: 31px; height: 31px; }
  .social-link svg { width: 16px; height: 16px; }
}

@media (max-width: 1280px) {
  .nav-link { padding: 6px 9px; font-size: 0.78rem; }
  .nav-icon { width: 18px; height: 18px; }
  .brand-img { height: 44px; }
  .brand-mark { width: 44px; height: 44px; }
}

/* Mobile / tablet: menu lateral */
@media (max-width: 1080px) {
  .nav-toggle { display: grid; }

  .main-nav {
    position: fixed;
    top: var(--header-altura);
    right: 0;
    width: min(340px, 86vw);
    height: calc(100vh - var(--header-altura));
    padding: 22px 20px 40px;
    background: var(--cor-branco);
    box-shadow: -6px 0 26px rgba(58, 13, 13, 0.18);
    overflow-y: auto;
    transform: translateX(105%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    display: block;
  }

  .main-nav.is-open { transform: translateX(0); }

  .nav-list { flex-direction: column; align-items: stretch; }

  .nav-item + .nav-item {
    border-left: none;
    border-top: 1px solid var(--cor-suave);
  }

  .nav-link {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 15px 8px;
    font-size: 0.98rem;
    white-space: normal;
    text-align: left;
  }

  .nav-icon { transform: none; opacity: 1; }
  .nav-link:hover .nav-icon { animation: none; transform: scale(1.15); }
  .nav-label::after { display: none; }

  .nav-link.is-active {
    background: var(--cor-suave);
    border-radius: 10px;
  }

  /* Na gaveta do celular o menu da guia abre para baixo, empurrando o
     resto: flutuando, ele sairia por fora da gaveta */
  .nav-tem-menu { flex-direction: column; }

  .nav-menu {
    position: static;
    min-width: 0;
    margin-top: 4px;
    padding: 4px 0 6px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    animation: none;
  }

  .nav-menu-item { padding-left: 34px; white-space: normal; }

  /* Logo à esquerda, redes e botão do menu à direita */
  .header-inner > .social-list { margin-left: auto; margin-right: 2px; }
  .nav-toggle { margin-left: 0; }
}

@media (max-width: 720px) {
  :root { --header-altura: 66px; }

  .brand-img { height: 38px; }
  .brand-mark { width: 38px; height: 38px; }

  /* No celular as redes vão para dentro do menu */
  .header-inner > .social-list { display: none; }
  .nav-toggle { margin-left: auto; }

  .nav-social {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--cor-suave);
  }
}

/* Hero: o carrossel vai apertando conforme a tela encolhe */
@media (max-width: 1280px) {
  .hero-elenco { --espaco: 188px; }
}

@media (max-width: 1024px) {
  .hero { height: clamp(470px, 74vh, 700px); }
  .hero-elenco { --espaco: 152px; --zoom: 0.95; }
  .hero-conteudo { bottom: 11%; gap: 16px; }
  .hero-logo { width: clamp(161px, 28vw, 294px); }
}

@media (max-width: 768px) {
  .hero-elenco { --espaco: 118px; --zoom: 0.88; }
  .loja-card { padding: 9px 20px 9px 16px; gap: 10px; }
  .loja-icone { width: 28px; height: 28px; }
  .loja-texto small { font-size: 0.66rem; }
  .loja-texto strong { font-size: 1rem; }
  .hero-mato { height: 54px; }

  /* No celular a logo sobe para cima das cabeças. Na tela estreita os
     personagens ficam bem mais altos, e a logo empilhada acima dos
     botões caía justamente sobre os rostos — que é o que a cena tem
     de melhor. Esticando a caixa de cima a baixo, o space-between
     joga a logo para o topo e os botões continuam no rodapé. */
  .hero-conteudo {
    /* Quase no topo da cena. O body já reserva a altura do header, e
       a cena começa abaixo dele — descontar o header de novo aqui
       jogaria a logo uma faixa inteira para baixo, à toa. */
    top: 12px;
    justify-content: space-between;
  }

  /* Só o destaque e um vizinho de cada lado. Os seis numa tela desta
     largura viram um amontoado em que não se reconhece ninguém.
     Quem lê este número é o home.js. */
  .hero-elenco { --vizinhos: 1; --espaco: 150px; --zoom: 0.9; }
}

@media (max-width: 520px) {
  .hero { height: clamp(430px, 68vh, 560px); }
  .hero-elenco { --espaco: 118px; --zoom: 0.84; }
  .hero-mato { height: 46px; }

  .secao { padding: 44px 20px; }
  .secao-titulo { font-size: 1.15rem; margin-bottom: 34px; gap: 30px; }
  .secao-titulo span::before { left: -22px; width: 15px; height: 15px; }
  .secao-titulo span::after  { right: -19px; width: 11px; height: 11px; }
  /* Menos que 100% porque o borrão passa de 30% para fora e
     encostaria nas bordas da tela */
  .sobre-logo-marca { width: 76%; }
  .rede-botao { padding: 11px 22px; font-size: 0.95rem; }

  /* Contas: no celular os campos lado a lado viram um por linha, e
     aí cada um volta a precisar da própria margem de baixo */
  /* No celular o rodapé vira uma coluna só, e as divisórias entre as
     colunas de links deixam de fazer sentido */
  .footer-inner { flex-direction: column; gap: 26px; }
  .footer-marca { flex: 1 1 auto; }
  .footer-colunas { flex-direction: column; gap: 20px; }
  .footer-coluna { min-width: 0; }

  /* Empilhado, "à direita" deixa de existir */
  .footer-contato { margin-left: 0; }

  .footer-coluna + .footer-coluna {
    padding-left: 0;
    padding-top: 18px;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .campo-linha { flex-direction: column; gap: 0; }
  .campo-linha .campo { margin-bottom: 14px; }

  /* A linha de jogo alinha pelo pé quando os campos estão lado a lado,
     para o botão de remover encostar na base deles. Empilhada, esse
     mesmo alinhamento encolhe cada campo ao tamanho do conteúdo e
     joga tudo para a direita — aqui eles voltam a ocupar a linha. */
  .jogo-linha { align-items: stretch; }

  /* Empilhado, o botão de remover deixa de ser um quadradinho ao lado:
     vira uma faixa larga o bastante para o dedo */
  .jogo-remover {
    width: 100%;
    height: 42px;
    margin-bottom: 0;
  }

  /* O botão de adicionar e o aviso dele, um sobre o outro */
  .jogos-rodape { flex-direction: column; align-items: stretch; }
  .jogos-rodape .botao { width: 100%; }
  .jogos-rodape .campo-ajuda { min-width: 0; text-align: center; }

  /* Três campos lado a lado não cabem na largura de um celular */
  .recompensa-busca.modal-busca { flex-wrap: wrap; }
  .recompensa-busca.modal-busca .campo { flex: 1 1 100%; }
  .cartao-conta { padding: 30px 22px; border-radius: 20px; }
  .pagina-conta { padding: 32px 16px 60px; }
  .perfil-secoes { grid-template-columns: 1fr; }
  .vagas-lista { grid-template-columns: 1fr; }
  .vaga-cartao { padding: 20px; }
  .vagas-form { padding: 20px; }
  .perfil-cabecalho { flex-wrap: wrap; padding: 20px; }
  .perfil-sair { width: 100%; }

  /* ---------- PAINEL DO PROGRAMA NO CELULAR ----------
     O cabeçalho vira duas fileiras: quem você é em cima, os botões
     embaixo. Numa tela estreita eles não cabem ao lado do nome, e
     cada um sobrando meia linha ficava torto. */
  .pagina-painel .perfil-cabecalho { gap: 14px; padding: 18px; }
  .pagina-painel .perfil-identidade { flex: 1 1 55%; }

  .pagina-painel .perfil-cabecalho .botao {
    flex: 1 1 130px;
    justify-content: center;
    padding: 10px 14px;
  }

  /* O e-mail do jogo cabe inteiro quebrando linha. Com reticências,
     dois jogos cadastrados viravam "Entre Laços & Am..." e a pessoa
     não conseguia conferir o que cadastrou. */
  .pagina-painel .perfil-identidade span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.4;
  }
  .pagina-perfil { padding: 28px 16px 70px; }
  .hero-conteudo { bottom: 12%; gap: 12px; }
  .hero-logo { width: clamp(140px, 43.4vw, 210px); }
  .hero-lojas { gap: 12px; }
}

/* Acessibilidade: reduz animações */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}