/* ==========================================================================
   Concurso Fotográfico: ARTE E TRABALHO no Museu do Café
   Identidade oficial: rosa #EC3F7A · laranja #F47A20 · preto #111 · branco.
   Estética editorial contemporânea + o varal: fotos P&B penduradas por
   pregadores rosa em uma linha preta; a costura tracejada amarra tudo.
   Tipografia: Cormorant Garamond (títulos) · Inter (texto) · Caveat (legendas).
   ========================================================================== */

:root {
  --fundo: #F6F3EC;
  --cartao: #FFFFFF;
  --polaroid: #FFFFFF;
  --preto: #111111;
  --cinza: #6B675E;
  --cinza-claro: #A8A296;
  --rosa: #EC3F7A;
  --rosa-escuro: #C92B62;
  --rosa-tinta: #FDE7EF;
  --laranja: #F47A20;
  --borda: #E4DFD4;

  --corda: #111111;

  --fonte-titulo: "Cormorant Garamond", Georgia, serif;
  --fonte-corpo: "Inter", "Segoe UI", sans-serif;
  --fonte-mao: "Caveat", cursive;

  --sombra-papel: 0 1px 2px rgba(17, 17, 17, .10), 0 16px 34px -16px rgba(17, 17, 17, .28);
  --largura-cartao: 200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--fundo);
  background-image: radial-gradient(1100px 420px at 50% -6%, rgba(255, 255, 255, .8), transparent 70%);
  color: var(--preto);
  font-family: var(--fonte-corpo);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.estreito { max-width: 780px; }

h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.06; margin: 0 0 .5em; letter-spacing: .002em; }
h1 { font-size: clamp(2.3rem, 5.6vw, 3.7rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; }
a { color: var(--rosa); }
strong { font-weight: 700; }

.olho {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cinza);
  margin-bottom: .7rem;
}

.suave { color: var(--cinza); }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* linha de costura: divisor temático (a linha do bordado) */
.costura {
  border: none;
  border-top: 2px dashed var(--rosa);
  opacity: .55;
  margin: 3rem auto;
  max-width: 220px;
}

::selection { background: var(--rosa); color: #fff; }

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

/* ==========================================================================
   Wordmark oficial: "Concurso FOTOGRÁFICO · 104 anos de história"
   ========================================================================== */

.wordmark { line-height: 1; }
.wordmark .concurso {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  color: var(--rosa);
  font-size: 1em;
  letter-spacing: .01em;
}
.wordmark .concurso .c-grande {
  font-size: 1.62em;
  line-height: 0;
  vertical-align: -.08em;
  margin-right: -.02em;
}
.wordmark .fotografico {
  display: block;
  font-family: var(--fonte-corpo);
  font-weight: 800;
  font-size: .295em;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--preto);
  margin: .18em 0 0 .06em;
}
.wordmark .tema {
  display: block;
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 600;
  font-size: .5em;
  color: var(--laranja);
  margin-top: .32em;
}
/* ==========================================================================
   Cabeçalho e rodapé
   ========================================================================== */

.topo { padding: 24px 0 18px; border-bottom: 2px dashed var(--borda); margin-bottom: 8px; }
.topo-linha { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }

.marca { text-decoration: none; color: inherit; }
.marca .wordmark { font-size: 1.7rem; }

.menu { display: flex; gap: 6px; flex-wrap: wrap; }
.menu a {
  font-weight: 700;
  font-size: .93rem;
  text-decoration: none;
  color: var(--preto);
  padding: .5rem .95rem;
  border-radius: 999px;
  border: 1.5px dashed transparent;
  transition: border-color .18s, background-color .18s, color .18s;
}
.menu a:hover { border-color: var(--cinza-claro); }
.menu a[aria-current="page"] { background: var(--cartao); border-color: var(--rosa); color: var(--rosa); }

.rodape {
  margin-top: 5rem;
  /* o padding cede ao logo o que ele ocupa: 8.5 + 84 + 10.7 = os mesmos 103px de sempre */
  padding: .53rem 0 .67rem;
  border-top: 2px dashed var(--borda);
  color: var(--cinza);
  font-size: .9rem;
}
/* min-height igual à altura do logo, para o rodapé não pular se o SVG demorar */
.rodape .container { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; min-height: 84px; }
.rodape .realizacao { height: 84px; width: auto; flex: none; }

/* ==========================================================================
   Botões costurados
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--fonte-corpo);
  font-size: .98rem;
  font-weight: 700;
  color: #fff;
  background: var(--rosa);
  border: 0;
  border-radius: 999px;
  padding: .8rem 1.7rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(17, 17, 17, .28);
  transition: transform .16s, background-color .16s, box-shadow .16s;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1.5px dashed rgba(255, 255, 255, .72);
  border-radius: 999px;
  pointer-events: none;
}
.btn:hover { background: var(--rosa-escuro); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(17, 17, 17, .3); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-secundario {
  color: var(--preto);
  background: transparent;
  border: 1.5px solid var(--preto);
  box-shadow: none;
}
.btn-secundario::after { border-color: transparent; }
.btn-secundario:hover { background: var(--cartao); transform: translateY(-1px); }

.btn-mini { font-size: .84rem; padding: .48rem 1rem; }

.btn-perigo {
  color: var(--laranja);
  background: transparent;
  border: 1.5px dashed var(--laranja);
  box-shadow: none;
}
.btn-perigo::after { border-color: transparent; }
.btn-perigo:hover { background: rgba(244, 122, 32, .1); }

/* botão de seleção da cédula (dentro da polaroid) */
.btn-selecao {
  width: 100%;
  margin-top: .6rem;
  font: inherit;
  font-weight: 700;
  font-size: .85rem;
  color: var(--preto);
  background: transparent;
  border: 1.5px solid var(--preto);
  border-radius: 999px;
  padding: .48rem .6rem;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-selecao:hover { background: var(--rosa-tinta); border-color: var(--rosa); color: var(--rosa-escuro); }
.btn-selecao[aria-pressed="true"] { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.btn-selecao:disabled { opacity: .45; cursor: not-allowed; }

/* ==========================================================================
   Cartões de papel
   ========================================================================== */

.papel {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: clamp(1.4rem, 3.5vw, 2.3rem);
  box-shadow: var(--sombra-papel);
}

.papel-nota {
  background: var(--cartao);
  border: 2px dashed var(--borda);
  border-radius: 12px;
  padding: 1.1rem 1.4rem;
  font-size: .95rem;
}

/* ==========================================================================
   O VARAL: assinatura visual
   ========================================================================== */

.varal { position: relative; }
.varal-fila { position: relative; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }

.corda { position: absolute; top: 0; left: 0; width: 100%; height: 44px; overflow: visible; pointer-events: none; }
.corda path { fill: none; stroke: var(--corda); stroke-width: 2; stroke-linecap: round; }
.corda .no { fill: var(--corda); }

.varal-fileira {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding-top: 16px;
}

.pendura {
  translate: 0 var(--verga, 0px);
  animation: pendurar .9s cubic-bezier(.3, 1.35, .45, 1) both;
  animation-delay: var(--espera, 0s);
}
@keyframes pendurar {
  from { translate: 0 calc(var(--verga, 0px) - 52px); opacity: 0; }
  to   { translate: 0 var(--verga, 0px); opacity: 1; }
}

.polaroid {
  position: relative;
  width: var(--largura-cartao);
  background: var(--polaroid);
  padding: 9px 9px 11px;
  border-radius: 2px;
  box-shadow: var(--sombra-papel);
  rotate: var(--giro, 0deg);
  transform-origin: 50% -14px;
  animation: balancar var(--vento, 4.2s) ease-in-out var(--espera, 0s) infinite alternate;
  transition: translate .2s, box-shadow .2s, outline-color .15s;
  outline: 3px solid transparent;
  outline-offset: 3px;
}
@keyframes balancar {
  from { rotate: calc(var(--giro, 0deg) - 1.1deg); }
  to   { rotate: calc(var(--giro, 0deg) + 1.1deg); }
}
.varal-fileira .pendura:hover { z-index: 30; position: relative; }
.pendura:hover .polaroid,
.pendura:focus-within .polaroid {
  translate: 0 -6px;
  box-shadow: 0 2px 3px rgba(17, 17, 17, .16), 0 26px 46px -16px rgba(17, 17, 17, .42);
}

/* selecionada para a cédula */
.polaroid.na-cedula { outline-color: var(--rosa); }

/* pregador ROSA (identidade) segurando a foto na linha preta */
.pregador {
  position: absolute;
  top: -15px; left: 50%;
  width: 15px; height: 33px;
  translate: -50% 0;
  rotate: var(--giro-pino, 0deg);
  z-index: 4;
  background: linear-gradient(160deg, #F97DA6 0%, var(--rosa) 52%, var(--rosa-escuro) 100%);
  border-radius: 4px 4px 7px 7px;
  box-shadow:
    inset 0 -3px 4px rgba(110, 8, 48, .35),
    inset 0 2px 2px rgba(255, 255, 255, .5),
    1px 3px 4px rgba(17, 17, 17, .3);
}
.pregador::before {
  content: "";
  position: absolute;
  left: -3px; right: -3px; top: 13px;
  height: 4px;
  background: linear-gradient(#F2F2F2, #B9B9B9);
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.pregador::after {
  content: "";
  position: absolute;
  bottom: 2px; left: 50%;
  translate: -50% 0;
  width: 2px; height: 11px;
  background: rgba(110, 8, 48, .4);
  border-radius: 1px;
}

.polaroid .foto {
  display: block;
  width: 100%;
  background: #101010;
  border-radius: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: zoom-in;
}
.polaroid .foto img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 84px;
  filter: grayscale(1) contrast(1.05);
}

.polaroid .legenda {
  font-family: var(--fonte-mao);
  font-size: 1.3rem;
  line-height: 1.05;
  color: #2c2c2c;
  text-align: center;
  padding-top: .55rem;
}
.polaroid .autor {
  display: block;
  font-family: var(--fonte-mao);
  font-size: 1.05rem;
  color: var(--rosa);
}
.polaroid .votos-chip {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cinza);
  text-align: center;
  padding-top: .3rem;
}

/* carimbos de borracha */
.carimbo {
  position: absolute;
  top: 12px; right: -9px;
  rotate: 8deg;
  z-index: 5;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--laranja);
  border: 2.5px solid var(--laranja);
  border-radius: 5px;
  padding: .28rem .5rem;
  background: rgba(255, 255, 255, .85);
}
.carimbo-rosa { color: var(--rosa); border-color: var(--rosa); }
.carimbo-neutro { color: var(--cinza); border-color: var(--cinza); }

.varal-mini { --largura-cartao: 138px; }
.varal-mini .polaroid .legenda { font-size: 1.05rem; }
.varal-mini .pregador { width: 12px; height: 27px; top: -13px; }

/* ==========================================================================
   Cédula de votação (barra fixa)
   ========================================================================== */

.cedula {
  position: fixed;
  left: 50%;
  bottom: 18px;
  translate: -50% 140%;
  /* Fechada, a cédula é empurrada para fora da tela pela própria altura. Só que
     o pregador sobe 17px ACIMA dela, e 140% de ~64px não leva essa ponta junto:
     sobrava um toco de pregador rosa flutuando no rodapé, preso a nada. O
     visibility resolve de vez (e ainda tira os botões do Tab enquanto fechada);
     na transição ele só desliga no fim, então a saída continua deslizando. */
  visibility: hidden;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  max-width: min(720px, calc(100vw - 28px));
  background: var(--cartao);
  border: 1.5px solid var(--preto);
  border-radius: 16px;
  padding: .75rem 1rem .75rem 1.1rem;
  box-shadow: 0 24px 50px -18px rgba(17, 17, 17, .5);
  transition: translate .3s cubic-bezier(.3, 1.2, .4, 1), visibility .3s;
}
.cedula.aberta { translate: -50% 0; visibility: visible; }
.cedula .pregador { top: -17px; }
.cedula .rotulo {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cinza);
}
.cedula .contagem {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--rosa);
  line-height: 1;
}
.cedula .mini-fotos { display: flex; gap: 6px; }
.cedula .mini-fotos img {
  width: 42px; height: 42px;
  object-fit: cover;
  border-radius: 5px;
  filter: grayscale(1);
  background: #101010;
  border: 1.5px solid var(--borda);
}
.cedula .limpar {
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  color: var(--cinza);
  background: none;
  border: none;
  text-decoration: underline dashed;
  cursor: pointer;
}
.cedula .limpar:hover { color: var(--rosa-escuro); }

/* ==========================================================================
   Etiquetas de etapa (Inscrições → Votação → Resultado)
   ========================================================================== */

.etapas { position: relative; max-width: 620px; margin: 0 auto 3rem; }
.etapas .corda { height: 30px; }
.etapas-fileira { position: relative; display: flex; justify-content: space-around; padding-top: 12px; }
.etiqueta {
  position: relative;
  translate: 0 var(--verga, 0px);
  background: var(--cartao);
  border: 1.5px solid var(--borda);
  border-radius: 8px;
  padding: .5rem .95rem .45rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cinza);
  box-shadow: 0 6px 14px -6px rgba(17, 17, 17, .3);
}
.etiqueta .pregador { width: 11px; height: 24px; top: -12px; }
.etiqueta .pregador::before { top: 9px; }
.etiqueta.feita { color: var(--preto); border-color: var(--preto); }
.etiqueta.feita::before { content: "✓ "; color: var(--rosa); font-weight: 800; }
.etiqueta.atual {
  border: 1.5px solid var(--rosa);
  color: var(--rosa);
  animation: balancar 3.6s ease-in-out infinite alternate;
  transform-origin: 50% -12px;
}
.etiqueta.futura { opacity: .5; }

/* ==========================================================================
   Formulários
   ========================================================================== */

.campo { margin-bottom: 1.35rem; }
.campo > label, .campo > .rotulo { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .4rem; }
.campo .ajuda { display: block; font-weight: 400; font-size: .84rem; color: var(--cinza); margin-top: .1rem; }

input[type="text"], input[type="email"], input[type="number"], input[type="password"], textarea, select {
  width: 100%;
  font: inherit;
  color: var(--preto);
  background: var(--cartao);
  border: 1.5px solid var(--borda);
  border-radius: 10px;
  padding: .72rem .9rem;
  transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 96px; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--rosa);
  box-shadow: 0 0 0 3px rgba(236, 63, 122, .18);
}
input::placeholder, textarea::placeholder { color: var(--cinza-claro); }

.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.3rem; }
@media (max-width: 620px) { .duas-colunas { grid-template-columns: 1fr; } }

.opcoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.opcoes input { position: absolute; opacity: 0; pointer-events: none; }
.opcoes label {
  cursor: pointer;
  font-weight: 700;
  font-size: .9rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--borda);
  background: var(--cartao);
  transition: border-color .15s, background-color .15s, color .15s;
}
.opcoes label:hover { border-color: var(--cinza-claro); }
.opcoes input:checked + label { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.opcoes input:focus-visible + label { outline: 3px solid var(--rosa); outline-offset: 2px; }

.condicional { display: none; margin-top: .6rem; }
.condicional.visivel { display: block; }

.solta-fotos {
  border: 2px dashed var(--cinza-claro);
  border-radius: 14px;
  background: var(--cartao);
  padding: 2rem 1.4rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.solta-fotos:hover, .solta-fotos.arrastando { border-color: var(--rosa); background: #FFFDFE; }
.solta-fotos svg { width: 44px; height: 44px; color: var(--cinza); margin-bottom: .4rem; }
.solta-fotos strong { color: var(--rosa); }

.previas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1rem; }
.previa {
  position: relative;
  width: 108px;
  background: var(--polaroid);
  padding: 6px 6px 16px;
  border-radius: 2px;
  box-shadow: 0 6px 14px -6px rgba(17, 17, 17, .35);
  rotate: var(--giro, 0deg);
}
.previa img { display: block; width: 100%; height: 88px; object-fit: cover; filter: grayscale(1); background: #101010; }
.previa .tirar {
  position: absolute;
  top: -9px; right: -9px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 0;
  background: var(--preto);
  color: #fff;
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
}
.previa .tirar:hover { background: var(--rosa-escuro); }

.barra-progresso { height: 10px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 999px; overflow: hidden; margin-top: 1rem; display: none; }
.barra-progresso.ativa { display: block; }
.barra-progresso > div { height: 100%; width: 0%; background: repeating-linear-gradient(-45deg, var(--rosa), var(--rosa) 8px, var(--rosa-escuro) 8px, var(--rosa-escuro) 16px); transition: width .25s; }

.erro-form {
  display: none;
  background: var(--rosa-tinta);
  border: 1.5px dashed var(--rosa);
  color: var(--rosa-escuro);
  border-radius: 10px;
  padding: .8rem 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.erro-form.visivel { display: block; }

/* ==========================================================================
   Modal, lightbox e avisos
   ========================================================================== */

.veu {
  position: fixed; inset: 0;
  background: rgba(17, 17, 17, .55);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 90;
}
.veu.aberto { display: flex; }

.bilhete {
  position: relative;
  width: min(470px, 100%);
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 1.9rem 1.7rem 1.6rem;
  box-shadow: 0 30px 60px -20px rgba(17, 17, 17, .55);
  rotate: -.5deg;
  animation: pendurar .5s cubic-bezier(.3, 1.35, .45, 1) both;
}
.bilhete .pregador { top: -17px; }
.bilhete h3 { margin-bottom: .4rem; }
.bilhete .fechar { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 1.25rem; color: var(--cinza); cursor: pointer; }
.bilhete .acoes { display: flex; gap: .7rem; margin-top: 1.2rem; flex-wrap: wrap; }

.lupa {
  position: fixed; inset: 0;
  background: rgba(12, 12, 12, .93);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 26px;
  z-index: 95;
}
.lupa.aberta { display: flex; }
.lupa .quadro {
  position: relative;
  background: var(--polaroid);
  padding: 14px 14px 16px;
  border-radius: 3px;
  max-width: min(760px, 94vw);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
  animation: pendurar .45s cubic-bezier(.3, 1.35, .45, 1) both;
}
.lupa .quadro img {
  display: block;
  max-width: 100%;
  max-height: min(64vh, 640px);
  margin: 0 auto;
  filter: grayscale(1) contrast(1.05);
  background: #101010;
}
.lupa .rodape-foto { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .7rem; flex-wrap: wrap; }
.lupa .legenda { font-family: var(--fonte-mao); font-size: 1.6rem; color: #2c2c2c; }
.lupa .extras { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cinza); }
.lupa .fechar, .lupa .seta {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 1.3rem;
  cursor: pointer;
  transition: background-color .15s;
}
.lupa .fechar:hover, .lupa .seta:hover { background: var(--rosa); }
.lupa .fechar { top: 18px; right: 18px; }
.lupa .seta { top: 50%; translate: 0 -50%; }
.lupa .seta.ante { left: 14px; }
.lupa .seta.prox { right: 14px; }

.aviso {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 99;
  background: var(--preto);
  color: #fff;
  font-weight: 700;
  padding: .85rem 1.4rem;
  border-radius: 12px;
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .6);
  max-width: min(560px, calc(100vw - 40px));
  opacity: 0;
  translate: -50% 16px;
  transition: opacity .25s, translate .25s;
  pointer-events: none;
}
.aviso.visivel { opacity: 1; translate: -50% 0; }
.aviso.erro { background: var(--rosa-escuro); }

/* ==========================================================================
   Blocos das páginas
   ========================================================================== */

.heroi { padding: clamp(2.4rem, 6vw, 4.4rem) 0 1.6rem; text-align: center; }
.heroi .wordmark { font-size: clamp(3rem, 8.5vw, 5.4rem); margin-bottom: 1.2rem; }
.heroi p.chamada { max-width: 640px; margin: 0 auto 1.6rem; font-size: 1.1rem; color: var(--cinza); }
.heroi .acoes { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 2.6rem 0; }
@media (max-width: 760px) { .passos { grid-template-columns: 1fr; } }
.passo { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 1.3rem 1.3rem 1.1rem; }
.passo .num { font-size: .68rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--rosa); display: block; margin-bottom: .45rem; }
.passo h3 { margin-bottom: .3rem; }
.passo p { margin: 0; font-size: .95rem; color: var(--cinza); }

/* temas do concurso */
.temas { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin: 0 0 .6rem; }
.tema-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--cartao);
  border: 1.5px solid var(--preto);
  border-radius: 999px;
  padding: .5rem 1.1rem;
  font-weight: 700;
  font-size: .92rem;
}
.tema-pill .ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--laranja); }

/* cronograma e prêmios: a mesma fileira de cartões dentro do papel-nota */
.cronograma, .premios { display: grid; gap: 1rem; margin: 1.6rem 0 0; }
.cronograma { grid-template-columns: repeat(4, 1fr); }
.premios    { grid-template-columns: repeat(3, 1fr); align-items: end; gap: 0; }
@media (max-width: 860px) { .cronograma { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .premios    { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .cronograma { grid-template-columns: 1fr; } }
.cronograma .item, .premios .item { background: var(--cartao); border: 1px solid var(--borda); border-left: 4px solid var(--rosa); border-radius: 10px; padding: .9rem 1rem .8rem; }
.cronograma .item:nth-child(even) { border-left-color: var(--laranja); }
.cronograma .data, .premios .lugar { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.55rem; line-height: 1.05; color: var(--preto); }
.cronograma .nome { font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--cinza); margin-top: .3rem; }
.premios .curso { font-size: .95rem; color: var(--cinza); text-align: center; margin: 0; padding: 0 .5rem .55rem; }

/* Pódio: II à esquerda, I no meio e mais alto, III à direita. Cada .degrau é
   uma coluna com o nome do prêmio EM CIMA e o bloco embaixo — o prêmio fica
   apoiado no degrau, como o vencedor sobre o balcão. Degraus encostados
   (gap:0) e apoiados no mesmo chão (align-items:end).
   O HTML fica em I, II, III, que é a ordem certa pra leitor de tela e pro
   empilhado do celular — o arranjo é só o "order", que o media query desfaz. */
.degrau { display: flex; flex-direction: column; justify-content: flex-end; }
.degrau:nth-child(1) { order: 2; }
.degrau:nth-child(2) { order: 1; }
.degrau:nth-child(3) { order: 3; }

/* O bloco: só o lugar, centrado. A faixa da medalha é um degradê pintado no
   topo do fundo (background-size 100% 6px), não uma borda: cor chapada fica
   sem brilho, e é o degradê claro-escuro que faz metal parecer metal. O
   border-radius recorta a faixa junto com os cantos de cima. */
.premios .item {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--borda); border-radius: 10px 10px 0 0;
  background-image: var(--medalha); background-repeat: no-repeat; background-size: 100% 6px;
}
.degrau:nth-child(1) .item { min-height: 10.5rem; --medalha: linear-gradient(90deg, #8A6100, #FFC81F 28%, #FFF3A8 50%, #FFC81F 72%, #8A6100); }
.degrau:nth-child(2) .item { min-height: 8.5rem;  --medalha: linear-gradient(90deg, #6E7C8A, #C6D0DA 28%, #F0F4F8 50%, #C6D0DA 72%, #6E7C8A); }
.degrau:nth-child(3) .item { min-height: 7rem;    --medalha: linear-gradient(90deg, #6E3B12, #D9822B 28%, #F2B57A 50%, #D9822B 72%, #6E3B12); }
.degrau:nth-child(1) .lugar { font-size: 2.1rem; }

/* No telefone: sem degrau (viraria buraco) e de volta pra ordem I, II, III.
   Repete o :nth-child pra empatar a especificidade das regras acima — media
   query não soma especificidade, e um ".premios .item" simples perderia. */
@media (max-width: 700px) {
  .degrau:nth-child(n) { order: 0; }
  .degrau:nth-child(n) .item { min-height: 0; }
}

.regras { margin: 0 0 2.4rem; }
.regras ul { margin: .6rem 0 0; padding-left: 1.2rem; }
.regras li { margin-bottom: .45rem; }

.faixa-status {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: var(--cartao);
  border: 1.5px dashed var(--rosa);
  border-radius: 12px;
  padding: .9rem 1.2rem;
  margin-bottom: 2rem;
  font-weight: 600;
  flex-wrap: wrap;
}
.faixa-status .ponto {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--rosa);
  box-shadow: 0 0 0 4px rgba(236, 63, 122, .18);
  animation: pulsar 2s ease-in-out infinite;
  flex: none;
}
@keyframes pulsar { 50% { box-shadow: 0 0 0 8px rgba(236, 63, 122, .06); } }

.centro { text-align: center; }
.some { display: none !important; }

.contador-votos { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cinza); }

.vazio {
  text-align: center;
  color: var(--cinza);
  padding: 3rem 1rem;
  border: 2px dashed var(--borda);
  border-radius: 14px;
  background: rgba(255, 255, 255, .6);
}

.sucesso-polaroid {
  position: relative;
  width: min(340px, 88%);
  margin: 2.5rem auto 1.6rem;
  background: var(--polaroid);
  padding: 14px 14px 20px;
  box-shadow: var(--sombra-papel);
  rotate: -2deg;
}
.sucesso-polaroid .quadro-check { display: flex; align-items: center; justify-content: center; background: #101010; height: 210px; }
.sucesso-polaroid .quadro-check span { font-size: 4rem; color: var(--rosa); }
.sucesso-polaroid .legenda { font-family: var(--fonte-mao); font-size: 1.6rem; text-align: center; color: #2c2c2c; padding-top: .7rem; }

/* ==========================================================================
   Painel administrativo
   ========================================================================== */

.admin-shell { max-width: 1220px; margin: 0 auto; padding: 0 22px 60px; }

.admin-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 20px 0 16px;
  border-bottom: 2px dashed var(--borda);
  margin-bottom: 20px;
}
.admin-topo .wordmark { font-size: 1.55rem; }

.selo-estado {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .45rem .95rem;
  border-radius: 999px;
  border: 2px solid var(--rosa);
  color: var(--rosa);
  background: var(--cartao);
}

.abas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.abas button {
  font: inherit;
  font-weight: 700;
  font-size: .92rem;
  color: var(--cinza);
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: .5rem 1rem;
  cursor: pointer;
}
.abas button:hover { border-color: var(--cinza-claro); }
.abas button.ativa { background: var(--preto); color: #fff; }

.cartoes-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.cartao-resumo { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 1rem 1.1rem .85rem; }
.cartao-resumo .valor { font-family: var(--fonte-titulo); font-weight: 700; font-size: 2.1rem; line-height: 1; }
.cartao-resumo .nome { font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--cinza); margin-top: .35rem; }

.tabela-envolve { overflow-x: auto; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; }
.tabela th {
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cinza);
  text-align: left;
  padding: .8rem .8rem .5rem;
  border-bottom: 2px dashed var(--borda);
}
.tabela td { padding: .6rem .8rem; border-bottom: 1px solid #EEE9DD; vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tr:hover td { background: #FBFAF6; }

.chip {
  display: inline-block;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .22rem .6rem;
  border-radius: 999px;
  border: 1.5px solid var(--cinza);
  color: var(--cinza);
}
.chip-ok { border-color: var(--preto); color: var(--preto); background: rgba(17, 17, 17, .05); }
.chip-alerta { border-color: var(--laranja); color: #C05C10; background: rgba(244, 122, 32, .08); }
.chip-rosa { border-color: var(--rosa); color: var(--rosa-escuro); background: var(--rosa-tinta); }

.grade-fotos-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.foto-admin { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 12px; }
.foto-admin img { width: 100%; height: 140px; object-fit: cover; border-radius: 6px; background: #101010; filter: grayscale(1); }
.foto-admin.fora { opacity: .55; }
.foto-admin .meta { font-size: .84rem; margin: .5rem 0 .2rem; }
.foto-admin .meta strong { display: block; }
.foto-admin .acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: .5rem; }

.linha-acoes { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin: 0 0 1.4rem; }

details.expande { border-bottom: 1px solid #EEE9DD; }
details.expande summary { cursor: pointer; padding: .65rem .3rem; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
details.expande summary::-webkit-details-marker { display: none; }
details.expande summary .suave { font-weight: 400; }
details.expande .detalhe { padding: .2rem .3rem 1rem; font-size: .92rem; }
details.expande .detalhe dt { font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--cinza); margin-top: .6rem; }
details.expande .detalhe dd { margin: .1rem 0 0; }

.login-caixa { max-width: 400px; margin: 9vh auto 0; }

/* ==========================================================================
   Estatísticas (insights estilo formulário)
   ========================================================================== */

.stats-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px;
  align-items: start; } /* cada card com a própria altura, um não estica por causa do vizinho */
.stats-card {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 1.3rem 1.4rem 1.2rem;
  box-shadow: var(--sombra-papel);
}
.stats-card h3 { font-size: 1.15rem; margin-bottom: .2rem; }
.stats-card .sub { font-size: .82rem; color: var(--cinza); margin-bottom: 1rem; }

/* barras horizontais */
.barras { display: flex; flex-direction: column; gap: .7rem; }
.barra-linha { display: grid; grid-template-columns: minmax(72px, 34%) 1fr auto; align-items: center; gap: .7rem; }
.barra-rotulo { font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
.barra-trilho { background: #EFE9DC; border-radius: 999px; height: 22px; overflow: hidden; }
.barra-preench {
  display: block;   /* span inline ignora width/height: sem isto a barra nunca pinta */
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rosa), var(--laranja));
  transition: width .8s cubic-bezier(.3, 1, .4, 1);
}
.barra-linha:nth-child(even) .barra-preench { background: linear-gradient(90deg, var(--laranja), var(--rosa)); }
.barra-valor { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.barra-valor .pct { color: var(--cinza); font-weight: 600; font-size: .8rem; margin-left: .25rem; }

/* números-destaque */
.stats-numeros { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.stats-num .n { font-family: var(--fonte-titulo); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--rosa); }
.stats-num .r { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cinza); margin-top: .3rem; }

.stats-vazio { grid-column: 1/-1; }

/* pílula "ao vivo" no topo do painel */
.ao-vivo {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cinza); padding: .4rem .8rem; border-radius: 999px; border: 1.5px solid var(--borda);
}
.ao-vivo .bolinha { width: 9px; height: 9px; border-radius: 50%; background: #C9C4B8; }
.ao-vivo.on { color: #1c7a3e; border-color: #A9D8BC; }
.ao-vivo.on .bolinha { background: #22A75A; box-shadow: 0 0 0 0 rgba(34,167,90,.5); animation: pulsar-vivo 2s infinite; }
@keyframes pulsar-vivo { 70% { box-shadow: 0 0 0 7px rgba(34,167,90,0); } }

/* aviso "novas fotos chegaram" */
.novidade {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--rosa-tinta); color: var(--rosa-escuro);
  border: 1.5px dashed var(--rosa); border-radius: 999px;
  padding: .4rem .9rem; font-weight: 700; font-size: .85rem; cursor: pointer;
}

/* ==========================================================================
   Acessibilidade e responsivo
   ========================================================================== */

@media (max-width: 640px) {
  :root { --largura-cartao: 152px; }
  .varal-mini { --largura-cartao: 118px; }
  .polaroid .legenda { font-size: 1.1rem; }
  .etiqueta { padding: .42rem .6rem .38rem; font-size: .6rem; letter-spacing: .1em; }
  .cedula { gap: .6rem; padding: .65rem .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .polaroid, .etiqueta.atual, .pendura, .bilhete, .lupa .quadro { animation: none !important; }
  .faixa-status .ponto { animation: none; }
  * { transition-duration: .01ms !important; }
}