/* Portal de Resultados #AprenderParaPrevenir — núcleo (shell + componentes comuns).
   Tokens copiados sem alteração de referencia-portal/original/tokens-e-fontes.css;
   só as fontes apontam para os WOFF2 locais (subset latin + latin-ext). */
@font-face{font-family:"Muli";src:url("../fonts/muli-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Muli";src:url("../fonts/muli-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Muli";src:url("../fonts/muli-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Muli";src:url("../fonts/muli-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
/* Fallback métrico: enquanto a Muli carrega, o 2º nome da pilha ("Mulish") é
   a Arial local ajustada às medidas da Muli (tools/fontes.py) — evita CLS. */
@font-face{font-family:"Mulish";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Helvetica");size-adjust:101.97%;ascent-override:98.55%;descent-override:24.52%;line-gap-override:0%}

/* Paleta do Governo Federal, conforme brandbook da 9ª Campanha.
   Regra fechada: nenhuma cor fora destas sete. Ajustes de legibilidade se fazem
   trocando o FUNDO ou o TAMANHO/PESO do texto — nunca criando novos matizes.
   Véus (rgba de preto/branco) são permitidos apenas para separadores e superfícies. */
:root{
  /* Base — nome oficial no brandbook */
  --cor-verde-amazonia:#00D000;   /* PANTONE 354C */
  --cor-amarelo-sol:#FFD000;      /* PANTONE 109C */
  --cor-azul-atlantico:#183EFF;   /* PANTONE 2935C */
  --cor-vermelho-urucum:#FF0000;  /* PANTONE 485C */
  --cor-preto-ebano:#000000;      /* PANTONE BLACK C */
  --cor-cinza-harpia:#3C3C3C;     /* PANTONE 447C */
  --cor-branco-paz:#FFFFFF;

  /* Véus — transparências das cores base, sem novos matizes */
  --veu-preto-04:rgba(0,0,0,.04);
  --veu-preto-08:rgba(0,0,0,.08);
  --veu-preto-14:rgba(0,0,0,.14);
  --veu-preto-60:rgba(0,0,0,.60);
  --veu-preto-88:rgba(0,0,0,.88);
  --veu-branco-16:rgba(255,255,255,.16);
  --veu-branco-72:rgba(255,255,255,.72);

  /* Texto */
  --texto-primario:var(--cor-preto-ebano);
  --texto-secundario:var(--cor-cinza-harpia);
  --texto-inverso:var(--cor-branco-paz);
  --texto-link:var(--cor-azul-atlantico);      /* 6,6:1 no branco */
  --texto-atencao:var(--cor-vermelho-urucum);  /* 4,0:1 — só ≥24px ou bold ≥19px */

  /* Superfícies */
  --superficie-base:var(--cor-branco-paz);
  --superficie-alt:var(--veu-preto-04);
  --superficie-inversa:var(--cor-preto-ebano);
  --superficie-cinza:var(--cor-cinza-harpia);
  --superficie-destaque:var(--cor-amarelo-sol);
  --superficie-positiva:var(--cor-verde-amazonia);
  --superficie-acao:var(--cor-azul-atlantico);
  --superficie-alerta:var(--cor-vermelho-urucum);

  /* Bordas e traços */
  --traco-sutil:var(--veu-preto-14);
  --traco-forte:var(--cor-preto-ebano);
  --traco-inverso:var(--veu-branco-16);

  /* Níveis de reconhecimento da campanha (view Resultados) */
  --nivel-destaque-fundo:var(--cor-amarelo-sol);
  --nivel-destaque-tinta:var(--cor-preto-ebano);
  --nivel-inspiradora-fundo:var(--cor-verde-amazonia);
  --nivel-inspiradora-tinta:var(--cor-preto-ebano);
  --nivel-mencao-fundo:var(--cor-azul-atlantico);
  --nivel-mencao-tinta:var(--cor-branco-paz);
  --nivel-sorteado-fundo:var(--cor-cinza-harpia);
  --nivel-sorteado-tinta:var(--cor-branco-paz);
  --nivel-certificado-fundo:var(--cor-branco-paz);
  --nivel-certificado-tinta:var(--cor-preto-ebano);

  /* Eixos temáticos — cada eixo recebe uma das cores base, sem inventar matiz */
  --eixo-agua:var(--cor-azul-atlantico);
  --eixo-morro:var(--cor-cinza-harpia);
  --eixo-calor:var(--cor-vermelho-urucum);
  --eixo-prevencao:var(--cor-verde-amazonia);
  --eixo-mobilizacao:var(--cor-amarelo-sol);
}

/* Muli em pesos extremos faz todo o trabalho: Black (900) caixa-alta para títulos,
   Regular/SemiBold para texto, e um stack monoespaçado para rótulos e dados —
   substituto declarado de Chinese Rocks (ver readme.md › SUBSTITUIÇÕES). */
:root{
  --fonte-titulo:"Muli","Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fonte-texto:"Muli","Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Rótulos também em Muli: a monoespaçada do sistema foi abandonada como
     substituta de Chinese Rocks. Como Muli é mais larga na mesma medida, a
     composição --tipo-rotulo usa um corpo menor (11px) que o texto de apoio. O mínimo de 12px vale para
     textos de leitura; rótulos dinâmicos (categorias, municípios, níveis) ficam em 11px. */
  --fonte-rotulo:"Muli","Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;

  --peso-extralight:200;
  --peso-light:300;
  --peso-regular:400;
  --peso-semibold:600;
  --peso-bold:700;
  --peso-extrabold:800;
  --peso-black:900;

  /* Escala — base 16px */
  --texto-3xs:.6875rem;  /* 11 */
  --texto-2xs:.75rem;    /* 12 */
  --texto-xs:.8125rem;   /* 13 */
  --texto-sm:.875rem;    /* 14 */
  --texto-base:1rem;     /* 16 */
  --texto-lg:1.125rem;   /* 18 */
  --texto-xl:1.25rem;    /* 20 */
  --texto-2xl:1.5rem;    /* 24 */
  --texto-3xl:1.875rem;  /* 30 */
  --texto-4xl:2.375rem;  /* 38 */
  --texto-5xl:3rem;      /* 48 */
  --texto-6xl:3.875rem;  /* 62 */
  --texto-7xl:5rem;      /* 80 */

  /* .92 e 1.02 só servem a display de UMA linha: em caixa-alta portuguesa a
     cedilha de uma linha colide com o til da seguinte. Títulos que podem
     quebrar usam --entrelinha-titulo-multi. */
  --entrelinha-solida:.92;
  --entrelinha-titulo:1.02;
  --entrelinha-titulo-multi:1.3;
  --entrelinha-curta:1.25;
  --entrelinha-texto:1.55;
  --entrelinha-solta:1.7;

  --tracking-titulo:-.02em;
  --tracking-normal:0;
  --tracking-rotulo:.14em;  /* rótulos em caixa-alta monoespaçada */
  --tracking-largo:.22em;

  /* Composições prontas */
  --tipo-display:var(--peso-black) var(--texto-6xl)/var(--entrelinha-solida) var(--fonte-titulo);
  --tipo-titulo-1:var(--peso-black) var(--texto-4xl)/var(--entrelinha-titulo) var(--fonte-titulo);
  --tipo-titulo-2:var(--peso-extrabold) var(--texto-2xl)/var(--entrelinha-curta) var(--fonte-titulo);
  --tipo-titulo-3:var(--peso-bold) var(--texto-lg)/var(--entrelinha-curta) var(--fonte-titulo);
  --tipo-texto:var(--peso-regular) var(--texto-base)/var(--entrelinha-texto) var(--fonte-texto);
  --tipo-texto-lg:var(--peso-regular) var(--texto-lg)/var(--entrelinha-texto) var(--fonte-texto);
  --tipo-apoio:var(--peso-regular) .9375rem/1.4 var(--fonte-texto); /* 15px */
  --tipo-rotulo:var(--peso-bold) var(--texto-3xs)/1.25 var(--fonte-rotulo);
  --tipo-dado:var(--peso-black) var(--texto-5xl)/var(--entrelinha-solida) var(--fonte-titulo);
}

/* Régua de 4px. O brandbook fala de "divisão do espaço e adensamento":
   blocos colados (gap 0–8) dentro de módulos, respiros grandes entre módulos. */
:root{
  --esp-0:0;
  --esp-1:.25rem;  /* 4  */
  --esp-2:.5rem;   /* 8  */
  --esp-3:.75rem;  /* 12 */
  --esp-4:1rem;    /* 16 */
  --esp-5:1.25rem; /* 20 */
  --esp-6:1.5rem;  /* 24 */
  --esp-8:2rem;    /* 32 */
  --esp-10:2.5rem; /* 40 */
  --esp-12:3rem;   /* 48 */
  --esp-16:4rem;   /* 64 */
  --esp-20:5rem;   /* 80 */
  --esp-24:6rem;   /* 96 */
  --esp-32:8rem;   /* 128 */

  --gap-grade:var(--esp-6);
  --gap-cartoes:var(--esp-5);
  --padding-cartao:var(--esp-5);
  --padding-secao:var(--esp-16);
  --padding-secao-mobile:var(--esp-10);
}

/* Geometria: retângulo para o assunto principal, círculo/pílula para tópicos —
   a mesma lógica dos adornos de título do brandbook. Cantos quase retos. */
:root{
  --raio-0:0;
  --raio-1:2px;    /* botões e blocos de ação */
  --raio-2:6px;    /* cartões, campos, thumbnails */
  --raio-3:12px;   /* módulos grandes, mapa, lightbox */
  --raio-pilula:999px; /* tags, filtros, chips */

  --borda-fina:1px;
  --borda-media:2px;
  --borda-grossa:3px;

  --sombra-0:none;
  --sombra-1:0 1px 2px rgba(0,0,0,.08);
  --sombra-2:0 4px 14px rgba(0,0,0,.10);
  --sombra-3:0 12px 32px rgba(0,0,0,.16);
  /* Sombra-bloco: deslocamento sólido, sem desfoque — ecoa o preenchimento
     dos vãos das letras da marca. Usada em destaques e cartões de premiação. */
  --sombra-bloco:6px 6px 0 var(--cor-preto-ebano);
  --sombra-bloco-curta:3px 3px 0 var(--cor-preto-ebano);
  --foco-anel:0 0 0 3px rgba(24,62,255,.45);
  --foco-anel-inverso:0 0 0 3px rgba(255,255,255,.7);
}

/* Movimento institucional: curto, sem quicar. Troca de view = fade + 8px de subida. */
:root{
  --dur-instantanea:90ms;
  --dur-rapida:140ms;
  --dur-base:220ms;
  --dur-view:280ms;
  --dur-lenta:420ms;
  --ease-saida:cubic-bezier(.2,.8,.2,1);
  --ease-entrada:cubic-bezier(.4,0,1,1);
  --ease-padrao:cubic-bezier(.4,0,.2,1);
  --deslocamento-view:8px;
  --carregando-simulado:600ms; /* delay de AJAX simulado nas views Iniciativas e Fotos */
}

:root{
  --largura-conteudo:1200px;
  --largura-estreita:880px;
  --largura-texto:68ch;
  --altura-header:88px;
  --altura-submenu:56px;
  --altura-header-mobile:64px;
  --alvo-toque:44px;
  --z-header:100;
  --z-submenu:90;
  --z-tooltip:200;
  --z-lightbox:300;
  --borda-cabecalho:var(--borda-grossa);
}


/* Cores dos reconhecimentos (pedido de 27/10/2026): fora da paleta fechada do
   brandbook, para não confundir com as cores das categorias de participante.
   Sobrescrevem os tokens --nivel-* sem alterar o bloco copiado acima.
   Contraste do texto branco: 3,3:1 (laranja, abaixo do AA — escolha editorial) / 7,1:1 / 5,0:1. */
:root{
  --nivel-destaque-fundo:#FF5010;     /* laranja (pedido de 27/10/2026; branco sobre ele: 3,3:1) */
  --nivel-destaque-tinta:var(--cor-branco-paz);
  --nivel-inspiradora-fundo:#6D28D9;  /* roxo */
  --nivel-inspiradora-tinta:var(--cor-branco-paz);
  --nivel-mencao-fundo:#15803D;       /* verde escuro */
  --nivel-mencao-tinta:var(--cor-branco-paz);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.portal{margin:0;background:var(--superficie-base);color:var(--texto-primario);font:var(--tipo-texto);-webkit-font-smoothing:antialiased;min-height:100vh}
.portal img,.portal svg{max-width:100%}
.portal img{height:auto}
.portal h1,.portal h2,.portal h3,.portal p,.portal figure,.portal ul,.portal ol{margin:0}
.portal ul,.portal ol{padding:0;list-style:none}
.portal a{color:var(--texto-link)}
.portal button,.portal input,.portal select{font:inherit;color:inherit}
.portal button{cursor:pointer}
.portal :focus{outline:none}
.portal :focus-visible{outline:none;box-shadow:var(--foco-anel)}
.portal [tabindex="-1"]:focus{box-shadow:none}
.portal mark.marca-texto{background:var(--cor-amarelo-sol);box-shadow:0 0 0 4px var(--cor-amarelo-sol);color:inherit}
.portal .so-leitor{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.portal .pular{position:absolute;left:var(--esp-4);top:-60px;z-index:calc(var(--z-header) + 10);background:var(--cor-preto-ebano);color:var(--cor-branco-paz);padding:var(--esp-3) var(--esp-4);font:var(--peso-bold) var(--texto-sm)/1 var(--fonte-texto);border-radius:var(--raio-1);text-decoration:none}
.portal .pular:focus{top:var(--esp-2)}

/* Contêiner de view e tipografia comum */
.portal .conteudo{max-width:var(--largura-conteudo);margin:0 auto;padding:var(--esp-12) var(--esp-5) var(--esp-16)}
.portal .titulo-pagina{font:var(--tipo-titulo-1);font-size:clamp(1.125rem,3.2vw,1.625rem);line-height:var(--entrelinha-titulo-multi);letter-spacing:var(--tracking-titulo);text-transform:uppercase}
.portal .titulo-pagina--3xl{font-size:var(--texto-3xl)}
/* Algumas views do protótipo não sobrescrevem a entrelinha do --tipo-titulo-1. */
.portal .titulo-pagina--compacto{line-height:var(--entrelinha-titulo)}
.portal .titulo-2{font:var(--tipo-titulo-2)}
.portal .titulo-3{font:var(--tipo-titulo-3)}
.portal .texto-lg{font:var(--tipo-texto-lg);max-width:var(--largura-texto);text-wrap:pretty}
.portal .texto{font:var(--tipo-texto);text-wrap:pretty}
.portal .apoio{font:var(--tipo-apoio);color:var(--texto-secundario);text-wrap:pretty}
.portal .secundario{color:var(--texto-secundario)}
.portal .rotulo{font:var(--tipo-rotulo);letter-spacing:var(--tracking-rotulo);text-transform:uppercase}
.portal .rotulo--secundario{color:var(--texto-secundario)}
.portal .divisoria{margin-top:var(--esp-16);border-top:var(--borda-media) solid var(--traco-forte);padding-top:var(--esp-8)}
.portal .barra-cor{display:block;height:6px;width:44px;background:var(--cor,var(--cor-amarelo-sol))}
.portal .pilula{border:var(--borda-fina) solid var(--traco-forte);border-radius:var(--raio-pilula);padding:6px 11px}

/* Cores do brand como classes (fundo + tinta legível — contraste.js) */
.portal .cor-vermelho-urucum{--cor:var(--cor-vermelho-urucum)}
.portal .cor-azul-atlantico{--cor:var(--cor-azul-atlantico)}
.portal .cor-amarelo-sol{--cor:var(--cor-amarelo-sol)}
.portal .cor-verde-amazonia{--cor:var(--cor-verde-amazonia)}
.portal .cor-cinza-harpia{--cor:var(--cor-cinza-harpia)}
.portal .tinta-clara{--tinta:var(--cor-branco-paz)}
.portal .tinta-escura{--tinta:var(--cor-preto-ebano)}

/* Placeholder em listras diagonais (sem imagem inventada) */
.portal .placeholder{height:100%;width:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--esp-3);background:repeating-linear-gradient(135deg,var(--veu-preto-04) 0 8px,transparent 8px 16px);border:var(--borda-fina) solid var(--traco-sutil);color:var(--texto-secundario);font:var(--tipo-rotulo);letter-spacing:var(--tracking-rotulo);text-transform:uppercase}
.portal .placeholder--absoluto{position:absolute;inset:0;border:0}

/* ── Cabeçalho ────────────────────────────────────────────────────────── */
.portal .cabecalho{position:relative;z-index:var(--z-header);background:var(--superficie-base);border-bottom:var(--borda-cabecalho) solid var(--traco-forte)}
.portal .cabecalho__interno{max-width:var(--largura-conteudo);margin:0 auto;min-height:var(--altura-header);padding:var(--esp-3) var(--esp-4);display:flex;align-items:center;gap:var(--esp-5);flex-wrap:wrap}
.portal .cabecalho__marca{display:inline-flex;border-radius:var(--raio-1)}
/* Logos (padrão ou do painel): altura fixa e largura máxima; a imagem cabe na
   caixa sem distorcer e fica alinhada à esquerda (31/10/2026). */
.portal .cabecalho__logo{height:87px;width:auto;max-width:220px;object-fit:contain;object-position:left center;display:block}
.portal .cabecalho__selo{font:var(--peso-black) var(--texto-2xs)/1 var(--fonte-rotulo);letter-spacing:var(--tracking-rotulo);text-transform:uppercase;padding:9px 13px;background:var(--cor-amarelo-sol);color:var(--cor-preto-ebano);border-radius:var(--raio-1)}
.portal .cabecalho__acao{margin-left:auto;display:flex;align-items:center;gap:var(--esp-3)}

/* ── Menu de views ───────────────────────────────────────────────────── */
.portal .menu-views{position:sticky;top:0;z-index:var(--z-submenu);background:var(--superficie-base);border-bottom:var(--borda-fina) solid var(--traco-sutil)}
body.admin-bar.portal .menu-views{top:var(--wp-admin--admin-bar--height,32px)}
.portal .menu-views__lista{max-width:var(--largura-conteudo);margin:0 auto;display:flex;align-items:stretch;gap:var(--esp-1);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-height:var(--altura-submenu);padding:0 var(--esp-4)}
.portal .menu-views__lista::-webkit-scrollbar{display:none}
.portal .menu-views__lista>li{display:flex;flex:none}
.portal .menu-views__item .icone{flex:none}
.portal .menu-views__item{display:inline-flex;align-items:center;gap:var(--esp-2);font:var(--peso-extrabold) var(--texto-sm)/1 var(--fonte-titulo);text-transform:uppercase;letter-spacing:.02em;text-decoration:none;white-space:nowrap;min-height:var(--alvo-toque);padding:0 var(--esp-3);color:var(--texto-primario);background:transparent;transition:background var(--dur-rapida) var(--ease-padrao)}
/* Com ícone em todos os itens, o respiro lateral passa de 16 para 12 px para os 8 caberem em 1200 px. */
.portal .menu-views__item[aria-current="page"]{background:var(--cor-amarelo-sol);box-shadow:inset 0 -4px 0 var(--cor-preto-ebano)}
.portal .menu-views__item:focus-visible{box-shadow:inset var(--foco-anel)}
.portal .menu-views__item[aria-current="page"]:focus-visible{box-shadow:inset 0 -4px 0 var(--cor-preto-ebano),inset var(--foco-anel)}

/* ── Responsividade do cabeçalho e do menu ───────────────────────────────
   ≥ 1200 px: menu completo com ícones. 1024–1199 px: sem ícones (exceto a
   casa) para os 8 itens caberem. < 1024 px: cabeçalho compacto e fixo, com
   botão "Menu" que abre um painel em tela cheia (com JS: aria-expanded,
   foco no 1º item, Esc fecha, conteúdo atrás fica inerte; sem JS: :target). */
.portal .cabecalho__menu,.portal .menu-views__extra{display:none}
@media (max-width:1199.98px) and (min-width:1024px){
  .portal .menu-views__item .icone:not(.icone--casa){display:none}
}
@media (max-width:1023.98px){
  .portal{--altura-topo:64px}
  .portal .cabecalho{position:sticky;top:0}
  body.admin-bar.portal .cabecalho{top:var(--wp-admin--admin-bar--height,46px)}
  .portal .cabecalho__interno{min-height:var(--altura-topo);padding:var(--esp-2) var(--esp-4);gap:var(--esp-3);flex-wrap:nowrap}
  .portal .cabecalho__logo{height:44px;max-width:min(160px,42vw)}
  .portal .cabecalho__selo{font-size:10px;padding:6px 9px;white-space:nowrap}
  .portal .cabecalho__acao{display:none}
  .portal .cabecalho__menu{display:inline-flex;align-items:center;gap:var(--esp-2);margin-left:auto;min-height:var(--alvo-toque);padding:0 var(--esp-3);border:var(--borda-media) solid var(--cor-preto-ebano);border-radius:var(--raio-1);color:var(--cor-preto-ebano);text-decoration:none;font:var(--peso-black) var(--texto-xs)/1 var(--fonte-titulo);text-transform:uppercase;letter-spacing:.04em;background:var(--superficie-base)}
  .portal .cabecalho__menu-icone{position:relative;display:inline-flex;flex-direction:column;justify-content:space-between;width:18px;height:14px}
  .portal .cabecalho__menu-icone>span{display:block;height:2.5px;border-radius:2px;background:currentColor;transition:transform var(--dur-base) var(--ease-padrao),opacity var(--dur-rapida) var(--ease-padrao)}
  .portal .cabecalho__menu[aria-expanded="true"]{background:var(--cor-amarelo-sol)}
  .portal .cabecalho__menu[aria-expanded="true"] .cabecalho__menu-icone>span:nth-child(1){transform:translateY(5.75px) rotate(45deg)}
  .portal .cabecalho__menu[aria-expanded="true"] .cabecalho__menu-icone>span:nth-child(2){opacity:0}
  .portal .cabecalho__menu[aria-expanded="true"] .cabecalho__menu-icone>span:nth-child(3){transform:translateY(-5.75px) rotate(-45deg)}

  .portal .menu-views{display:none;position:fixed;left:0;right:0;bottom:0;top:calc(var(--altura-topo) + var(--borda-cabecalho));z-index:var(--z-header);overflow-y:auto;overscroll-behavior:contain;border-bottom:0;background:var(--superficie-base)}
  body.admin-bar.portal .menu-views{top:calc(var(--altura-topo) + var(--borda-cabecalho) + var(--wp-admin--admin-bar--height,46px))}
  .portal .menu-views.aberto,.portal .menu-views:target{display:flex;flex-direction:column}
  .portal .menu-views__lista{flex-direction:column;align-items:stretch;gap:0;overflow:visible;min-height:0;padding:var(--esp-2) 0;max-width:none;width:100%}
  .portal .menu-views__lista>li{display:block}
  .portal .menu-views__item{display:flex;width:100%;min-height:56px;gap:var(--esp-3);padding:0 var(--esp-5);font-size:var(--texto-base);border-bottom:var(--borda-fina) solid var(--traco-sutil)}
  .portal .menu-views__item .icone{display:block;width:20px;height:20px}
  .portal .menu-views__item[aria-current="page"]{box-shadow:inset 6px 0 0 var(--cor-preto-ebano)}
  .portal .menu-views__item[aria-current="page"]:focus-visible{box-shadow:inset 6px 0 0 var(--cor-preto-ebano),inset var(--foco-anel)}
  .portal .menu-views__extra{display:flex;flex-direction:column;gap:var(--esp-3);padding:var(--esp-5);margin-top:auto}
  .portal .menu-views__fechar{align-self:center;font:var(--peso-bold) var(--texto-sm)/1 var(--fonte-texto);color:var(--texto-link);padding:var(--esp-3)}
  body.portal.menu-aberto{overflow:hidden}
}
@media (max-width:479.98px){
  .portal .cabecalho__selo{display:none}
  .portal .cabecalho__logo{height:40px;max-width:min(140px,40vw)}
}

/* ── Troca de view (fade + 8px) ──────────────────────────────────────── */
.portal .portal-main{display:block;transition:opacity var(--dur-view) var(--ease-saida),transform var(--dur-view) var(--ease-saida)}
.portal .portal-main.entrando{opacity:0;transform:translateY(var(--deslocamento-view));transition:none}

/* ── Rodapé ──────────────────────────────────────────────────────────── */
.portal .rodape{background:var(--cor-preto-ebano);color:var(--cor-branco-paz);padding:var(--esp-16) var(--esp-4) var(--esp-8)}
.portal .rodape__interno{max-width:var(--largura-conteudo);margin:0 auto;display:flex;flex-direction:column;gap:var(--esp-10)}
.portal .rodape__topo{display:flex;gap:var(--esp-10);flex-wrap:wrap;align-items:center;justify-content:space-between}
.portal .rodape__logo{height:84px;width:auto;max-width:min(255px,100%);object-fit:contain;object-position:left center;display:block}
.portal .rodape__redes{display:flex;gap:var(--esp-2);flex-wrap:wrap}
.portal .rodape__rede{display:inline-flex;align-items:center;justify-content:center;width:var(--alvo-toque);height:var(--alvo-toque);border:var(--borda-fina) solid var(--veu-branco-16);border-radius:var(--raio-1);color:var(--cor-branco-paz);text-decoration:none;transition:background var(--dur-rapida) var(--ease-padrao),color var(--dur-rapida) var(--ease-padrao)}
.portal a.rodape__rede:hover{background:var(--cor-branco-paz);color:var(--cor-preto-ebano)}
.portal a.rodape__rede:focus-visible{box-shadow:var(--foco-anel-inverso)}
.portal .rodape__rede--desabilitada{opacity:.4}
.portal .rodape__rotulo{font:var(--tipo-rotulo);letter-spacing:var(--tracking-rotulo);text-transform:uppercase;color:var(--veu-branco-72);margin-bottom:var(--esp-4)}
.portal .rodape__parceiros{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:center;gap:var(--esp-6) var(--esp-8)}
.portal .rodape__parceiro{width:100%;height:auto;display:block}
.portal .rodape__nota{font:var(--tipo-apoio);color:var(--veu-branco-72);max-width:var(--largura-texto)}

/* ── Botão (Botao.jsx) ───────────────────────────────────────────────── */
.portal .grupo-botoes{display:flex;gap:var(--esp-3);flex-wrap:wrap}
.portal .botao{display:inline-flex;align-items:center;justify-content:center;gap:var(--esp-2);font:var(--peso-black) var(--texto-sm)/1 var(--fonte-titulo);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;border-radius:var(--raio-1);border:var(--borda-media) solid transparent;cursor:pointer;padding:13px 20px;min-height:var(--alvo-toque);transition:background var(--dur-rapida) var(--ease-padrao),color var(--dur-rapida) var(--ease-padrao),border-color var(--dur-rapida) var(--ease-padrao),transform var(--dur-rapida) var(--ease-padrao),box-shadow var(--dur-rapida) var(--ease-padrao)}
.portal .botao svg{flex:none}
.portal .botao--sm{padding:10px 14px;font-size:var(--texto-xs);min-height:36px}
.portal .botao--lg{padding:17px 28px;min-height:56px}
.portal .botao--total{width:100%}
.portal .botao--primario{background:var(--cor-azul-atlantico);color:var(--cor-branco-paz);border-color:var(--cor-azul-atlantico)}
.portal .botao--primario:hover{background:var(--cor-preto-ebano);border-color:var(--cor-preto-ebano)}
.portal .botao--secundario{background:transparent;color:var(--cor-preto-ebano);border-color:var(--cor-preto-ebano)}
.portal .botao--secundario:hover{background:var(--cor-preto-ebano);color:var(--cor-branco-paz)}
.portal .botao--destaque,.portal .botao--positivo,.portal .botao--alerta{border-color:var(--cor-preto-ebano);box-shadow:var(--sombra-bloco-curta)}
.portal .botao--destaque{background:var(--cor-amarelo-sol);color:var(--cor-preto-ebano)}
/* Positivo e alerta: o protótipo usava tinta branca (1,9:1 e 4,0:1, abaixo de AA);
   aqui vale a regra do contraste.js do brand — Verde e Vermelho levam tinta preta. */
.portal .botao--positivo{background:var(--cor-verde-amazonia);color:var(--cor-branco-paz)} /* branco (pedido de 31/10/2026) */
.portal .botao--alerta{background:var(--cor-vermelho-urucum);color:var(--cor-preto-ebano)}
.portal .botao--youtube{background:var(--cor-vermelho-urucum);color:var(--cor-branco-paz);border-color:var(--cor-preto-ebano);box-shadow:var(--sombra-bloco-curta)} /* branco no vermelho: 4,0:1 (pedido de 31/10/2026) */
.portal .botao--youtube:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--cor-preto-ebano)}
.portal .botao--destaque:hover,.portal .botao--positivo:hover,.portal .botao--alerta:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--cor-preto-ebano)}
.portal .botao--fantasma{background:transparent;color:var(--cor-azul-atlantico);border-color:transparent;padding:8px 2px}
.portal .botao--fantasma:hover{color:var(--cor-preto-ebano);text-decoration:underline;text-underline-offset:4px}
.portal .botao--inverso{background:var(--cor-branco-paz);color:var(--cor-preto-ebano);border-color:var(--cor-branco-paz)}
.portal .botao--inverso:hover{background:var(--cor-amarelo-sol);border-color:var(--cor-amarelo-sol)}
.portal .botao:focus-visible{box-shadow:var(--foco-anel)}
.portal .botao--desabilitado{opacity:.4;pointer-events:none;cursor:default}

/* ── Etiqueta (Etiqueta.jsx) ─────────────────────────────────────────── */
/* Campo de busca com lupa: usado em Campanhas e em Resultados (sorteados).
   Fica aqui porque cada view só carrega o próprio CSS (03/11/2026). */
.portal .campo-busca{display:inline-flex;align-items:center;gap:var(--esp-2);flex:1 1 260px;min-width:220px;border:var(--borda-fina) solid var(--traco-forte);border-radius:var(--raio-2);padding:0 var(--esp-3);min-height:var(--alvo-toque);background:var(--superficie-base)}
.portal .campo-busca:focus-within{box-shadow:var(--foco-anel)}
.portal .campo-busca input{flex:1;border:0;outline:none;background:transparent;font:var(--tipo-texto);min-width:0;padding:10px 0}
.portal .campo-busca input:focus-visible{box-shadow:none}
.portal .etiqueta{display:inline-flex;align-items:center;gap:6px;font:var(--tipo-rotulo);letter-spacing:var(--tracking-rotulo);text-transform:uppercase;padding:6px 11px;border-radius:var(--raio-pilula);border:var(--borda-fina) solid var(--traco-forte);background:transparent;color:var(--cor-preto-ebano);white-space:normal;line-height:1.3;max-width:100%;text-align:center}
.portal .etiqueta--quadrada{border-radius:var(--raio-1)}
/* Categoria de participante: corpo e espaçamento menores que o rótulo padrão. */
.portal .etiqueta--categoria{font-size:10px;letter-spacing:.06em;padding:4px 9px}
.portal [class*="etiqueta--cor-"]{background:var(--cor);border-color:var(--cor);color:var(--tinta)}
.portal .etiqueta--cor-vermelho-urucum{--cor:var(--cor-vermelho-urucum)}
.portal .etiqueta--cor-azul-atlantico{--cor:var(--cor-azul-atlantico)}
.portal .etiqueta--cor-amarelo-sol{--cor:var(--cor-amarelo-sol)}
.portal .etiqueta--cor-verde-amazonia{--cor:var(--cor-verde-amazonia)}
.portal .etiqueta--nivel-destaque{background:var(--nivel-destaque-fundo);color:var(--nivel-destaque-tinta);border-color:var(--nivel-destaque-fundo)}
.portal .etiqueta--nivel-inspiradora{background:var(--nivel-inspiradora-fundo);color:var(--nivel-inspiradora-tinta);border-color:var(--nivel-inspiradora-fundo)}
.portal .etiqueta--nivel-honrosa{background:var(--nivel-mencao-fundo);color:var(--nivel-mencao-tinta);border-color:var(--nivel-mencao-fundo)}

/* ── Esqueleto (Esqueleto.jsx) ───────────────────────────────────────── */
@keyframes portalPulso{0%,100%{opacity:1}50%{opacity:.45}}
.portal .esqueleto{display:grid;gap:var(--gap-cartoes);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.portal .esqueleto__rotulo{grid-column:1/-1;margin-bottom:var(--esp-2)}
.portal .esqueleto__cartao{display:flex;flex-direction:column;gap:var(--esp-3);border:var(--borda-fina) solid var(--traco-sutil);border-radius:var(--raio-2);padding:var(--esp-4)}
.portal .esqueleto__barra{display:block;height:14px;background:var(--veu-preto-08);border-radius:var(--raio-1);animation:portalPulso 1.2s var(--ease-padrao) infinite}
.portal .esqueleto__barra--img{height:148px}
.portal .esqueleto__barra--85{width:85%}
.portal .esqueleto__barra--55{width:55%}

/* ── Movimento reduzido ──────────────────────────────────────────────── */
/* Âncoras (#campanhas-lista…) e scrollIntoView param abaixo do que fica fixo
   no topo: o menu no desktop, o cabeçalho abaixo de 1024px (+ barra do WP). */
.portal{--topo-fixo:var(--altura-submenu)}
body.admin-bar.portal{--topo-fixo:calc(var(--altura-submenu) + var(--wp-admin--admin-bar--height,32px))}
@media (max-width:1023.98px){
  .portal{--topo-fixo:calc(var(--altura-topo) + var(--borda-cabecalho))}
  body.admin-bar.portal{--topo-fixo:calc(var(--altura-topo) + var(--borda-cabecalho) + var(--wp-admin--admin-bar--height,46px))}
}
.portal [id]{scroll-margin-top:calc(var(--topo-fixo) + var(--esp-4))}

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

/* Responsividade geral (27/10/2026). */
@media (max-width:599.98px){
  .portal .conteudo{padding:var(--esp-8) var(--esp-4) var(--esp-12)}
  .portal .divisoria{margin-top:var(--esp-12)}
  .portal .rodape{padding:var(--esp-12) var(--esp-4) var(--esp-8)}
  .portal .rodape__logo{height:64px;max-width:min(200px,100%)}
  .portal .rodape__parceiros{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-5)}
}