/*
 * Site de votação — redesign 2026 (protótipo em _files/, "Redesign – Lista de pratos · votação").
 * Independente do template Codebase: catálogo (site/estabelecimentos) e página do prato (site/votar).
 * Fontes: Figtree (texto) e "Baloo 2" (títulos), via Google Fonts.
 */

:root {
  --fundo: #F7F4EE;
  --tinta: #1B1A2E;
  --destaque: #D7262F;
  --suave: #6B6878;
  --suave-2: #4A4757;
  --borda: #E3DDD1;
  --borda-card: #E7E1D6;
  --tracejado: #DDD6C8;
  --verde: #0E6B4A;
  --verde-claro: #E9F6EF;
  --amarelo: #8A5E00;
  --amarelo-claro: #FFF4D6;
  --estrela: #F5A400;
  --estrela-off: #E6E0D4;
  --pilula: #EDE8DE;
  --azul: #1D4FA3;
  --titulo: "Baloo 2", "Figtree", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--tinta); }
a:hover { color: var(--destaque); }
h1, h2, h3, p { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible + label, .busca-campo:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
}

.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pular { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--tinta); color: #fff; padding: 8px 14px; border-radius: 8px; }
.pular:focus { left: 8px; color: #fff; }

.largura { max-width: 1248px; margin: 0 auto; padding: 0 24px; }

/* Identidade 2026 (docs/14): azul do logo novo como cor principal, dourado do logo nos detalhes.
   Cores medidas no logo (LG Bar em Bar RGB: azul #25408F, dourado #FBB040) e no banner 2026
   (menta #7EF3C8, azul elétrico #3B0CFA, magenta #FF26B2). Aplicado por página com body.tema-2026
   (aplicado a todas as páginas da votação pelo cabeçalho, VOTACAO_TEMA); erro continua vermelho. */
.tema-2026 {
  --destaque: #25408F;
  --destaque-escuro: #1B2F6B;
  --dourado: #FBB040;
  --menta: #E6FBF3;
  --fundo: #F5F7F9;
  /* neutros frios no lugar dos beges do redesign original */
  --pilula: #E9EDF3;
  --borda: #DCE2EA;
  --borda-card: #E2E7EE;
  --tracejado: #D3DAE3;
  --estrela-off: #DFE4EB;
}
.tema-2026 .filtros { background: rgba(245, 247, 249, .94); }
.tema-2026 .botao-confirmar:hover:not(:disabled) { filter: none; background: var(--destaque-escuro); }
.tema-2026 .entrar-passos span { background: var(--destaque); }
/* O banner 2026 tem informação até a borda de baixo (datas): o cartão fica abaixo, sem sobrepor */
.tema-2026 .entrar-cartao { margin-top: 28px; border-top: 4px solid var(--dourado); }
.tema-2026 .aviso.info { background: #EEF1FA; color: var(--destaque); }
.tema-2026 .realizacao b { color: var(--destaque); }
.tema-2026 a:hover { color: var(--destaque); }
/* Botões que são links mantêm o texto branco no hover (a regra acima é para links de texto) */
.tema-2026 .botao-votar:not(.fechado):hover,
.tema-2026 .botao-link:hover { color: #fff; }
.tema-2026 .botao-votar.fechado:hover { color: var(--tinta); }
.tema-2026 .botao-pilula:hover { border-color: var(--destaque); color: var(--destaque); }
.tema-2026 .marca img.logo-2026 { width: auto; height: 60px; border-radius: 0; }
/* Catálogo: o passaporte fica abaixo do banner (as datas estão na borda de baixo da arte) */
.tema-2026 .passaporte { margin: 24px 0 0; }
.tema-2026 .botao-votar:not(.fechado):hover { filter: none; background: var(--destaque-escuro); }
.tema-2026 .limpar-filtros:hover { background: #EEF1FA; }
.tema-2026 .chip.ativo { background: var(--destaque); border-color: var(--destaque); }
.tema-2026 .segmento.ativo { color: var(--destaque); }
/* Ícones do passaporte nas cores da campanha 2026 (medidas no banner como exibido na tela):
   votos = roxo do "É coisa nossa" #602F89; cronômetro/período = rosa da faixa das datas #E0577B
   (ícone #C93D66, um pouco mais escuro, para contraste sobre o rosa claro) */
.tema-2026 { --roxo-campanha: #602F89; --rosa-campanha: #E0577B; }
.tema-2026 .passaporte .icone-redondo.verde { background: #EFE7F6; color: var(--roxo-campanha); }
.tema-2026 .passaporte .icone-redondo.amarelo { background: #FCE8EE; color: #C93D66; }

/* Padrão dos cards */

.tile {
  background-color: var(--cat, #1D4FA3);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.16) 0 5px, transparent 6px),
    radial-gradient(circle at 0 0, rgba(255,255,255,.12) 0 13px, transparent 14px),
    radial-gradient(circle at 100% 0, rgba(255,255,255,.12) 0 13px, transparent 14px),
    radial-gradient(circle at 0 100%, rgba(255,255,255,.12) 0 13px, transparent 14px),
    radial-gradient(circle at 100% 100%, rgba(255,255,255,.12) 0 13px, transparent 14px);
  background-size: 44px 44px;
}

/* Cabeçalho */
.topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.marca img { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; }
.marca strong { display: block; font-family: var(--titulo); font-weight: 800; font-size: 20px; line-height: 1.1; }
.marca small { display: block; font-size: 13px; color: var(--suave); }

.botao-pilula {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1.5px solid var(--borda); background: #fff; color: var(--tinta);
  font: inherit; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.botao-pilula:hover { border-color: var(--tinta); color: var(--tinta); }

/* Hero e passaporte */
.hero { position: relative; }
/* Banner do ano na proporção da arte (width/height reais vêm de festivalBannerAtributos()) */
.hero-banner { display: block; width: 100%; height: auto; border-radius: 28px; background: var(--pilula); }

.passaporte {
  position: relative;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px;
  margin: -44px 20px 0; padding: 24px 28px;
  background: #fff; border-radius: 24px;
  box-shadow: 0 2px 4px rgba(27,26,46,.04), 0 24px 48px -24px rgba(27,26,46,.25);
}
.passaporte-bloco { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.passaporte-icone { flex-direction: row; align-items: center; gap: 16px; }
.sobretitulo { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--destaque); padding: 0; }
.passaporte-titulo { font-family: var(--titulo); font-weight: 800; font-size: 28px; line-height: 1.1; }
.passaporte-numero { font-family: var(--titulo); font-weight: 800; font-size: 34px; line-height: 1; }
.passaporte-periodo { font-family: var(--titulo); font-weight: 800; font-size: 22px; line-height: 1.15; }
.passaporte-dica, .passaporte-legenda { font-size: 14px; color: var(--suave); }

.passaporte-timer { display: flex; align-items: baseline; gap: 8px; font-family: var(--titulo); font-weight: 800; color: var(--tinta); line-height: 1; font-variant-numeric: tabular-nums; }
.timer-parte { display: inline-flex; align-items: baseline; gap: 1px; }
.timer-parte b { font-size: 28px; font-weight: 800; }
.timer-parte small { font-size: 15px; font-weight: 700; color: var(--suave); }
.progresso { height: 10px; border-radius: 999px; background: var(--pilula); overflow: hidden; }
.progresso span { display: block; height: 100%; min-width: 10px; background: var(--destaque); border-radius: 999px; transition: width .5s ease; }

.icone-redondo { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icone-redondo.verde { background: var(--verde-claro); color: var(--verde); }
.icone-redondo.amarelo { background: var(--amarelo-claro); color: var(--amarelo); }
.icone-redondo.cinza { width: 72px; height: 72px; background: var(--pilula); color: var(--suave); }

/* Título da seção */
.titulo-secao { padding-top: 56px; padding-bottom: 24px; }
.titulo-secao h1 { font-family: var(--titulo); font-weight: 800; font-size: 40px; line-height: 1.1; letter-spacing: -.01em; }
.titulo-secao p { margin-top: 8px; font-size: 17px; color: var(--suave-2); }

/* Barra de filtros (gruda no topo ao rolar) */
.filtros {
  position: sticky; top: 0; z-index: 10;
  padding: 16px 0;
  background: rgba(247,244,238,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: box-shadow .2s ease;
}
.filtros.grudada { box-shadow: 0 1px 0 var(--borda), 0 10px 24px -18px rgba(27,26,46,.35); }
.filtros .largura { display: flex; flex-direction: column; gap: 14px; }

.busca { position: relative; }
.busca-icone { position: absolute; left: 18px; top: 17px; color: var(--suave); pointer-events: none; }
.busca-campo {
  width: 100%; height: 56px; padding: 0 84px 0 52px;
  border: 1.5px solid var(--borda); border-radius: 16px; background: #fff;
  font: inherit; font-size: 16px; color: var(--tinta);
  -webkit-appearance: none; appearance: none;
}
.busca-campo::placeholder { color: var(--suave); }
.busca-campo:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 4px rgba(27,26,46,.08); }
.busca-atalho {
  position: absolute; right: 14px; top: 16px;
  padding: 2px 8px; border: 1px solid var(--borda); border-radius: 6px;
  font: 600 12px/20px "Figtree", sans-serif; color: var(--suave); background: var(--fundo);
}

.busca-limpar {
  position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--pilula); color: var(--tinta); cursor: pointer;
}
.busca-limpar:hover { background: var(--borda); }
.busca-limpar .ic { stroke-width: 2.2; }
.busca-campo::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--borda); background: #fff; color: var(--tinta);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.chip span { font-size: 12px; font-weight: 600; color: var(--suave); }
.chip:hover { border-color: var(--tinta); }
.chip.ativo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.chip.ativo span { color: rgba(255,255,255,.75); }
.bolinha { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.filtros-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.segmentos { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--pilula); }
.segmento {
  height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--suave-2); cursor: pointer; white-space: nowrap;
}
.segmento.ativo { background: #fff; color: var(--tinta); font-weight: 700; box-shadow: 0 1px 3px rgba(27,26,46,.12); }

.seletor {
  height: 44px; padding: 0 40px 0 16px; border-radius: 999px;
  border: 1.5px solid var(--borda); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231B1A2E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--tinta); cursor: pointer;
  -webkit-appearance: none; appearance: none;
}

/* Grade e cards */
.grade-secao { padding-top: 16px; padding-bottom: 64px; }
.contagem-linha { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; min-height: 40px; margin-bottom: 16px; }
.contagem { font-size: 14px; color: var(--suave); }
.limpar-filtros {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1.5px solid var(--borda);
  border-radius: 999px; background: #fff; color: var(--destaque); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.limpar-filtros:hover { border-color: var(--destaque); background: #FDECEC; }
.limpar-filtros .ic { stroke-width: 2.4; }
.limpar-filtros span { color: var(--suave); font-weight: 600; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 32px; }

.card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--borda-card); border-radius: 20px; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  animation: rise .3s ease both;
  scroll-margin-top: var(--margem-card, 16px);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(27,26,46,.05), 0 24px 44px -20px rgba(27,26,46,.3); }

.card-midia { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.midia-fundo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: filter .3s ease; }
/* Prato já votado: foto/ícone em preto e branco, como no site antigo (img.desaturate do master.css).
   Etiqueta da categoria e selo verde ficam fora da camada e continuam coloridos. */
.card-midia.votado .midia-fundo { filter: grayscale(100%); }
.foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.card:hover .foto { transform: scale(1.05); }
.selo {
  position: absolute; right: 12px; bottom: 12px;
  padding: 3px 8px; border-radius: 4px; background: rgba(20,18,32,.72); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.prato-circulo {
  width: 100px; height: 100px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--cat-texto, var(--tinta));
  box-shadow: 0 0 0 14px rgba(255,255,255,.18), 0 0 0 26px rgba(255,255,255,.1), 0 16px 30px -10px rgba(0,0,0,.35);
}
/* Prato sem foto (pratoSemFoto()): mesmo padrão do site institucional, na cor clara da categoria */
.sem-foto {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 18px 24px; text-align: center; color: var(--sf-cor, var(--tinta));
  background-color: var(--sf-fundo, #E9EDF3);
  background-image: radial-gradient(circle at 0 0, rgba(255,255,255,.62) 20%, transparent 20%), radial-gradient(circle at 100% 100%, rgba(255,255,255,.62) 20%, transparent 20%);
}
.sem-foto .ic { stroke-width: 1.15; transition: transform .35s cubic-bezier(.2,.8,.2,1.2); }
.card:hover .sem-foto .ic { transform: scale(1.06) rotate(-4deg); }
.prato-pagina .card:hover .sem-foto .ic { transform: none; }
.sem-foto b { max-width: 300px; font-family: var(--titulo); font-weight: 800; font-size: 20px; line-height: 1.15; letter-spacing: -.01em; }
.sem-foto small { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.etiqueta {
  position: absolute; left: 14px; top: 14px;
  padding: 4px 10px; border-radius: 8px; background: #fff; color: var(--cat-texto, var(--tinta));
  font-size: 13px; font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.card-check {
  position: absolute; right: 14px; top: 14px;
  width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--verde);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.card-corpo { flex: 1; display: flex; flex-direction: column; padding: 24px 28px; }
.card-cidade { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--suave); }
.card-bar { margin-top: 6px; font-weight: 800; font-size: 24px; line-height: 1.15; letter-spacing: -.01em; }
.card-prato { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 16px; color: var(--suave-2); }
.card-prato .ic { color: var(--suave); }
.tracejado { border: 0; border-top: 1.5px dashed var(--tracejado); margin: 20px 0; }
.card-acao { margin-top: auto; }

.botao-votar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; border-radius: 10px; background: var(--destaque); color: #fff;
  font-weight: 700; font-size: 16px; text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}
.botao-votar:hover { color: #fff; filter: brightness(.9); }
.botao-votar:active { transform: scale(.98); }
.botao-votar .arrow { transition: transform .2s ease; }
.botao-votar:hover .arrow { transform: translateX(4px); }
.botao-votar.fechado { background: var(--pilula); color: var(--suave-2); font-weight: 600; }
.botao-votar.fechado:hover { filter: none; color: var(--tinta); }

.voto-feito { display: flex; align-items: center; gap: 12px; min-height: 52px; color: var(--verde); }
.voto-feito .ic { stroke-width: 2; }
.voto-feito div { flex: 1; min-width: 0; }
.voto-feito strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; }
.voto-feito small { display: block; font-size: 13px; color: var(--suave); }

.estrelas { display: inline-flex; gap: 2px; }
.estrela { fill: var(--estrela-off); }
.estrela.ativa { fill: var(--estrela); }

.vazio { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 64px 16px; }
.vazio h2 { font-family: var(--titulo); font-weight: 800; font-size: 26px; }
.vazio p { color: var(--suave); }

.mais { display: flex; justify-content: center; margin-top: 40px; }
.botao-mais { min-height: 52px; padding: 0 28px; border-color: var(--tinta); }

/* Página do prato (/votar/{slug}): foto e nome, voto, detalhes.
   Desktop: voto fixo na coluna da direita. Celular: voto logo abaixo da foto. */
.voltar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 4px 0 12px; font-weight: 700; text-decoration: none; }
.prato-pagina {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas: "cabeca voto" "info voto";
  gap: 24px 32px; align-items: start; padding-bottom: 64px;
}
.prato-cabeca { grid-area: cabeca; }
.prato-info { grid-area: info; }
.prato-pagina .card { animation: none; }
.prato-pagina .card:hover { transform: none; box-shadow: none; }
.prato-pagina .card-midia { aspect-ratio: 4 / 3; }
.prato-pagina .card:hover .foto { transform: none; }
.prato-cabeca .card-bar { font-size: 30px; }
.prato-receita { margin-top: 8px; color: var(--suave-2); }
.prato-detalhes { display: grid; gap: 10px; color: var(--suave-2); }
.prato-detalhes strong { color: var(--tinta); }
.prato-instagram { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--destaque); text-decoration: none; }
.prato-instagram:hover { text-decoration: underline; }

.painel-voto {
  grid-area: voto; position: sticky; top: 24px;
  background: #fff; border: 1px solid var(--borda-card); border-radius: 20px;
  padding: 28px; text-align: center;
}
.painel-voto h2 { font-family: var(--titulo); font-weight: 800; font-size: 30px; line-height: 1.1; outline: none; }
.painel-voto .estrelas { margin: 12px 0 4px; }
.painel-texto { margin-top: 8px; color: var(--suave-2); }
.painel-aviso { margin-top: 12px; font-size: 13px; color: var(--suave); }
.prato-circulo.visto { color: var(--verde); background: var(--verde-claro); box-shadow: none; }
.prato-circulo.visto .ic { stroke-width: 2.6; }
.prato-circulo.pequeno { width: 76px; height: 76px; margin-bottom: 14px; }

.nota { border: 0; padding: 0; margin: 0; }
.nota legend { width: 100%; margin-bottom: 12px; }
.nota-estrelas { display: flex; justify-content: center; gap: 4px; }
.starbtn { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; cursor: pointer; transition: transform .12s ease; -webkit-tap-highlight-color: transparent; }
.starbtn:hover { transform: scale(1.12); }
.nota-estrelas input:focus-visible + .starbtn { outline: 3px solid var(--azul); outline-offset: 0; }
.nota-rotulo { margin-top: 10px; min-height: 24px; font-weight: 700; color: var(--suave-2); }
/* Sem JavaScript: a estrela marcada e as anteriores ficam acesas */
form:not(.com-js) .nota-estrelas:has(input:checked) .estrela { fill: var(--estrela); }
form:not(.com-js) .nota-estrelas input:checked + label ~ label .estrela { fill: var(--estrela-off); }

.botao-confirmar, .botao-escuro {
  width: 100%; height: 54px; margin-top: 20px; border: 0; border-radius: 12px;
  font: inherit; font-weight: 800; font-size: 16px; color: #fff; cursor: pointer;
  transition: filter .15s ease;
}
.botao-confirmar { background: var(--destaque); }
.botao-confirmar:hover:not(:disabled), .botao-escuro:hover { filter: brightness(.9); }
.botao-confirmar:disabled { background: var(--estrela-off); color: var(--suave); cursor: not-allowed; }
.botao-escuro { background: var(--tinta); }
.botao-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.botao-link:hover { color: #fff; }

.aviso { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; font-weight: 600; text-align: left; }
.aviso.ok { background: var(--verde-claro); color: var(--verde); }
.aviso.erro { background: #FDECEC; color: #A3141C; }
.painel-voto .aviso.erro:not(:first-child) { margin: 16px 0 0; }

/* Cabeçalho: realização (Abrasel) e "Sair" */
.topo-direita { display: flex; align-items: center; gap: 18px; }
.realizacao { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.realizacao small { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.realizacao b { font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #50674E; }
.realizacao img { display: block; height: 32px; width: auto; margin-top: 3px; }

/* Login (/entrar): cartão sobre o banner */
.entrar-cartao {
  position: relative; max-width: 520px; margin: -64px auto 0; padding: 32px;
  background: #fff; border-radius: 24px;
  box-shadow: 0 2px 4px rgba(27,26,46,.04), 0 24px 48px -24px rgba(27,26,46,.25);
}
.entrar-cartao h1 { margin-top: 6px; font-family: var(--titulo); font-weight: 800; font-size: 34px; line-height: 1.1; letter-spacing: -.01em; }
.entrar-texto { margin: 10px 0 20px; color: var(--suave-2); }
.entrar-form { display: grid; gap: 16px; }
.campo label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 15px; }
.campo input:not([type="checkbox"]) {
  width: 100%; height: 52px; padding: 0 16px; border: 1.5px solid var(--borda); border-radius: 12px;
  background: #fff; font: inherit; font-size: 16px; color: var(--tinta); -webkit-appearance: none; appearance: none;
}
.campo input:not([type="checkbox"])::placeholder { color: #A5A1AE; }
.campo input:not([type="checkbox"]):focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 4px rgba(27,26,46,.08); }
.campo input:not([type="checkbox"]).invalido { border-color: #D7262F; box-shadow: 0 0 0 4px rgba(215,38,47,.1); }
.campo-erro { margin-top: 6px; font-size: 14px; font-weight: 600; color: #A3141C; }
.entrar-captcha { display: flex; justify-content: center; overflow: hidden; }
.entrar-captcha-off { justify-self: center; padding: 4px 10px; border-radius: 6px; background: var(--amarelo-claro); color: var(--amarelo); font-size: 13px; font-weight: 700; }
.entrar-form .botao-confirmar { margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.entrar-form .botao-confirmar .ic { stroke-width: 2.2; }
.entrar-cadastro { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1.5px dashed var(--tracejado); color: var(--suave-2); }
.entrar-termo { margin-top: 14px; text-align: center; font-size: 13px; color: var(--suave); }
.entrar-termo a { color: var(--suave-2); }
.entrar-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 760px; margin: 32px auto 0; }
.entrar-passos div { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--borda-card); border-radius: 16px; }
.entrar-passos span { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--destaque); color: #fff; font-family: var(--titulo); font-weight: 800; }
.entrar-passos p { font-size: 14px; line-height: 1.35; color: var(--suave-2); }
.entrar-passos strong { color: var(--tinta); }
.entrar-periodo { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; margin-bottom: 56px; font-size: 14px; color: var(--suave); }
.pagina-entrar main { padding-bottom: 8px; }
.aviso.info { display: flex; align-items: flex-start; gap: 10px; background: #EEF3FB; color: #1D4FA3; font-weight: 500; }
.aviso.info .ic { margin-top: 2px; stroke-width: 2; }
.aviso.info strong { font-weight: 800; }

/* Cadastro: aceite do termo */
.campo .aceite { margin: 0; font-weight: 400; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14px; line-height: 1.5; color: var(--suave-2); }
.aceite input { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--destaque); cursor: pointer; }
.aceite input.invalido { outline: 2px solid #D7262F; outline-offset: 2px; }
.aceite a { color: var(--azul); font-weight: 700; }
.aceite strong { color: var(--tinta); }
.entrar-espaco { height: 56px; }

/* Termo de Consentimento: texto (janela do cadastro e página /termo) */
.termo-consentimento { font-size: 15px; line-height: 1.65; color: var(--suave-2); }
.termo-consentimento h5 { margin: 22px 0 8px; font-family: var(--titulo); font-weight: 800; font-size: 19px; line-height: 1.25; color: var(--tinta); }
.termo-consentimento p { margin-bottom: 10px; }
.termo-consentimento ul { margin: 0 0 10px; padding-left: 20px; }
.termo-consentimento li { margin-bottom: 6px; }
.termo-consentimento strong { color: var(--tinta); }
.termo-consentimento a { color: var(--azul); }
.termo-versao { margin-top: 16px; font-size: 13px; color: var(--suave); }

/* Janela do termo (cadastro) */
.termo-janela {
  width: calc(100% - 32px); max-width: 720px; max-height: calc(100% - 32px); padding: 0;
  border: 0; border-radius: 24px; background: #fff; color: var(--tinta);
  display: none; flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(20,18,32,.45);
}
.termo-janela[open] { display: flex; animation: rise .25s ease both; }
.termo-janela::backdrop { background: rgba(20,18,32,.6); }
.termo-janela-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 16px 28px; border-bottom: 1px solid var(--borda-card); }
.termo-janela-topo h2 { font-family: var(--titulo); font-weight: 800; font-size: 22px; line-height: 1.2; }
.termo-fechar { width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--pilula); color: var(--tinta); cursor: pointer; display: grid; place-items: center; }
.termo-fechar .ic { stroke-width: 2.2; }
.termo-janela-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 28px 20px; }
.termo-janela-rodape { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 20px 18px 28px; border-top: 1px solid var(--borda-card); background: var(--fundo); }
.termo-janela-rodape a { margin-right: auto; font-size: 14px; color: var(--suave-2); }
.termo-janela-rodape .botao-confirmar { width: auto; height: 46px; margin: 0; padding: 0 22px; display: inline-flex; align-items: center; gap: 8px; }
.termo-janela-rodape .botao-confirmar .ic { stroke-width: 2.6; }

/* Página /termo */
.termo-pagina { padding-bottom: 56px; }
.termo-cartao { max-width: 820px; margin: 0 auto; padding: 36px 40px; background: #fff; border: 1px solid var(--borda-card); border-radius: 24px; }
.termo-cartao h1 { margin: 6px 0 14px; font-family: var(--titulo); font-weight: 800; font-size: 36px; line-height: 1.1; }
.termo-pagina .voltar { display: flex; max-width: 820px; margin-left: auto; margin-right: auto; }
.termo-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* Rodapé */
.rodape { padding: 32px 0 24px; border-top: 1px solid var(--borda); }
.rodape-linha { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px 24px; font-size: 14px; color: var(--suave); }
.rodape-linha a { color: var(--suave-2); }
.rodape-linha a:hover { color: var(--destaque); }
.rodape-privacidade { text-align: center; font-weight: 600; }
.rodape-dev { text-align: right; }

/* Animações */
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.pop { animation: pop .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.rise { animation: rise .3s ease both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Tablet */
@media (max-width: 900px) {
  .prato-pagina { grid-template-columns: 1fr; grid-template-areas: "cabeca" "voto" "info"; gap: 16px; }
  .painel-voto { position: static; }
}

/* Celular */
@media (max-width: 640px) {
  .largura { padding: 0 16px; }
  .topo-linha { padding-top: 12px; padding-bottom: 12px; }
  .marca img { width: 44px; height: 44px; }
  .tema-2026 .marca img.logo-2026 { width: auto; height: 50px; }
  .tema-2026 .entrar-cartao { margin-top: 16px; }
  .tema-2026 .passaporte { margin: 16px 0 0; }
  .tema-2026 .marca strong { font-size: 16px; }
  .marca strong { font-size: 18px; }
  .marca small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .botao-pilula { padding: 0 14px; }

  .hero-banner { border-radius: 18px; }
  .passaporte { margin: -24px 8px 0; padding: 20px; gap: 18px; grid-template-columns: 1fr; border-radius: 20px; }
  .passaporte-titulo { font-size: 24px; }
  .passaporte-numero { font-size: 28px; }
  .passaporte-periodo { font-size: 20px; }
  .timer-parte b { font-size: 24px; }
  .busca-limpar { top: 5px; }
  .icone-redondo { width: 48px; height: 48px; }

  .titulo-secao { padding-top: 36px; padding-bottom: 12px; }
  .titulo-secao h1 { font-size: 30px; }
  .titulo-secao p { font-size: 15px; }

  .filtros { padding: 12px 0; }
  .filtros .largura { gap: 10px; }
  .busca-campo { height: 50px; border-radius: 14px; padding-right: 16px; }
  .busca-icone { top: 14px; }
  .busca-atalho { display: none; }
  /* Chips e segmentos rolam na horizontal em vez de ocupar várias linhas */
  .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .filtros-linha { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
  .filtros-linha::-webkit-scrollbar { display: none; }
  .segmentos, .seletor { flex-shrink: 0; }
  .segmento { padding: 0 12px; }

  .grade { grid-template-columns: 1fr; gap: 20px; }
  .card-corpo { padding: 20px; }
  .card-bar { font-size: 22px; }

  .prato-pagina .card-midia { aspect-ratio: 16 / 10; }
  .prato-cabeca .card-bar { font-size: 24px; }
  .starbtn { width: 54px; height: 54px; }
  .painel-voto { padding: 22px 18px; }
  .realizacao.com-sair { display: none; }
  .realizacao b { font-size: 18px; }
  .realizacao img { height: 26px; }
  .entrar-cartao { margin: -24px 8px 0; padding: 24px 20px; border-radius: 20px; }
  .entrar-cartao h1 { font-size: 28px; }
  .entrar-passos { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .entrar-periodo { margin-bottom: 40px; text-align: center; }
  .entrar-espaco { height: 40px; }
  .termo-janela { width: 100%; max-width: none; max-height: 92vh; margin: auto 0 0; border-radius: 24px 24px 0 0; }
  .termo-janela-topo { padding: 14px 14px 12px 20px; }
  .termo-janela-topo h2 { font-size: 19px; }
  .termo-janela-corpo { padding: 4px 20px 16px; }
  .termo-janela-rodape { padding: 12px 16px 16px; }
  .termo-janela-rodape a { width: 100%; margin: 0 0 2px; text-align: center; }
  .termo-janela-rodape .botao-pilula, .termo-janela-rodape .botao-confirmar { flex: 1; justify-content: center; }
  .termo-cartao { padding: 24px 20px; border-radius: 20px; }
  .termo-cartao h1 { font-size: 28px; }
  .painel-voto h2 { font-size: 26px; }
  .rodape-linha { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 6px; }
  .rodape-dev { text-align: center; }
}