/* ===== Voluntariado TCS · preto e branco · Houschka Rounded + Basis Grotesque ===== */
@font-face { font-family: "Houschka"; src: url(/fontes/HouschkaRoundedAlt-Light.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Houschka"; src: url(/fontes/HouschkaRoundedAlt-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Basis"; src: url(/fontes/BasisGrotesqueArabicPro-Light.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Basis"; src: url(/fontes/BasisGrotesqueArabicPro-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Basis"; src: url(/fontes/BasisGrotesqueArabicPro-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Basis"; src: url(/fontes/BasisGrotesqueArabicPro-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --g0: #000; --g1: #0b0b0b; --g2: #131313; --g3: #1d1d1d; --g4: #2b2b2b; --g5: #464646; --g6: #7b7b7b; --g7: #a9a9a9; --g8: #d4d4d4; --g9: #ececec; --g10: #f6f6f6;
  --fundo: #000; --texto: #fff; --suave: var(--g7); --apagado: var(--g6); --linha: rgba(255,255,255,.12); --linha-forte: rgba(255,255,255,.22); --cartao: var(--g2); --cartao-2: var(--g3);
  --display: "Houschka", ui-rounded, "Nunito", system-ui, sans-serif;
  --corpo: "Basis", system-ui, -apple-system, "Segoe UI", sans-serif;
  --margem: clamp(16px, 4.4vw, 56px);
  --max: 1280px;
  --r-g: 22px; --r: 16px; --r-p: 12px;
  --mola: cubic-bezier(.22, .9, .24, 1);
  --suave-in: cubic-bezier(.4, 0, .2, 1);
  --topo-h: 4rem;
  --abas-h: 3.625rem;
  --seg-t: env(safe-area-inset-top, 0px);
  --seg-b: env(safe-area-inset-bottom, 0px);
  --sombra: 0 24px 60px -24px rgba(0,0,0,.9);
  color-scheme: dark;
}
@media (min-width: 60em) { :root { --topo-h: 4.75rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: #000; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 400 1rem/1.55 var(--corpo); letter-spacing: .002em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip; min-height: 100dvh; -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(var(--abas-h) + var(--seg-b));
}
@media (min-width: 60em) { body { padding-bottom: 0; } }
body.sem-abas { padding-bottom: 0; }
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 8px; }
::selection { background: #fff; color: #000; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 300; line-height: 1.04; letter-spacing: -0.022em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.pular { position: absolute; left: -999px; top: 8px; background: #fff; color: #000; padding: 8px 12px; border-radius: 8px; z-index: 200; }
.pular:focus { left: 8px; }
main { outline: none; min-height: 70vh; }
.env { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--margem); padding-right: var(--margem); }
@media (max-width: 59.94em) { .so-desk { display: none !important; } }
@media (min-width: 60em) { .so-mob { display: none !important; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================= TOPO ================= */
.topo { position: sticky; top: 0; z-index: 60; padding-top: var(--seg-t); transition: background .35s var(--suave-in), border-color .35s, backdrop-filter .35s; border-bottom: 1px solid transparent; }
.topo.rolado, body:not(.topo-claro) .topo { background: rgba(0,0,0,.72); backdrop-filter: saturate(160%) blur(22px); -webkit-backdrop-filter: saturate(160%) blur(22px); }
.topo.rolado { border-bottom-color: var(--linha); }
body.topo-transparente .topo:not(.rolado) { background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)); backdrop-filter: none; -webkit-backdrop-filter: none; }
.topo-in { min-height: var(--topo-h); max-width: var(--max); margin: 0 auto; padding: 0 var(--margem); display: flex; align-items: center; gap: 12px; }
.logo-tcs { display: flex; align-items: center; flex: none; }
.logo-tcs img { height: 39px; width: auto; min-width: 100px; }
.logo-tata { height: 48.75px; width: auto; flex: none; }
@media (min-width: 60em) { .logo-tcs img { height: 42px; } .logo-tata { height: 52.5px; } }
.topo-voltar { display: none; width: 40px; height: 40px; margin-left: -8px; border-radius: 50%; place-items: center; flex: none; }
.topo-voltar svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; }
body.com-voltar .topo-voltar { display: grid; }
@media (min-width: 60em) { body.com-voltar .topo-voltar { display: none; } }
.topo-nav { display: none; margin-left: 28px; gap: 2px; }
@media (min-width: 60em) { .topo-nav { display: flex; } }
.topo-nav a { position: relative; padding: 9px 14px; border-radius: 999px; color: var(--g7); font-size: 0.9375rem; transition: color .2s, background .2s; }
.topo-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.topo-nav a.ativo { color: #fff; }
.topo-nav a.ativo::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #fff; }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topo .topo-cta { display: none; }
@media (min-width: 60em) { .topo .topo-cta { display: inline-flex; } .topo-acoes { margin-right: 20px; } }
.lingua { min-height: 36px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--linha-forte); display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 500; letter-spacing: .06em; color: var(--g9); transition: border-color .2s, background .2s; }
.lingua:hover { border-color: #fff; }
.lingua svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.menu { position: fixed; z-index: 120; min-width: 200px; background: rgba(22,22,22,.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--linha-forte); border-radius: var(--r); padding: 6px; box-shadow: var(--sombra); animation: menu .22s var(--mola) both; transform-origin: top right; }
@keyframes menu { from { opacity: 0; transform: scale(.94) translateY(-6px); } }
.menu button, .menu a { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 12px; border-radius: 10px; font-size: 0.9375rem; text-align: left; color: var(--g9); }
.menu button:hover, .menu a:hover { background: rgba(255,255,255,.07); }
.menu .sel::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.menu small { color: var(--g6); font-size: 0.75rem; letter-spacing: .08em; }
.menu hr { border: 0; border-top: 1px solid var(--linha); margin: 6px 4px; }
.menu .perigo { color: #fff; }

/* ================= ABAS (mobile) ================= */
.abas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; min-height: calc(var(--abas-h) + var(--seg-b)); padding-bottom: var(--seg-b);
  display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(10,10,10,.86); backdrop-filter: saturate(170%) blur(24px); -webkit-backdrop-filter: saturate(170%) blur(24px); border-top: 1px solid var(--linha); transition: transform .4s var(--mola); }
body.sem-abas .abas { transform: translateY(110%); }
@media (min-width: 60em) { .abas { display: none; } }
.abas a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--g6); font-size: 0.6562rem; font-weight: 500; letter-spacing: .02em; min-width: 0; transition: color .2s; }
.abas svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--mola); }
.abas a.ativo { color: #fff; }
.abas a.ativo svg { fill: rgba(255,255,255,.14); }
.abas a:active svg { transform: scale(.86); }
.abas-centro span { display: none; }
.abas-centro i { width: 46px; height: 46px; border-radius: 16px; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(255,255,255,.16); transition: transform .35s var(--mola); }
.abas-centro i svg { stroke: #000; width: 22px; height: 22px; }
.abas-centro.ativo i { transform: rotate(45deg) scale(.94); }
.abas-centro.ativo i svg { transform: rotate(-45deg); fill: none; }

/* ================= BOTÕES ================= */
.botao { --bf: #fff; --bt: #000; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--bf); background: var(--bf); color: var(--bt); font-weight: 500; font-size: 1rem; white-space: nowrap; transition: transform .3s var(--mola), box-shadow .3s, background .2s, color .2s, border-color .2s; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.botao:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -8px rgba(255,255,255,.28); }
.botao:active { transform: scale(.97); }
.botao[disabled] { opacity: .4; pointer-events: none; }
.botao-sec { background: transparent; color: #fff; border-color: var(--linha-forte); }
.botao-sec:hover { border-color: #fff; box-shadow: none; }
.botao-cinza { background: var(--g3); border-color: var(--g3); color: #fff; }
.botao-cinza:hover { background: var(--g4); border-color: var(--g4); box-shadow: none; }
.botao-p { min-height: 38px; padding: 0 16px; font-size: 0.875rem; }
.botao-m { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
.botao-bloco { width: 100%; }
.botao .seta { width: 18px; height: 18px; transition: transform .3s var(--mola); }
.botao:hover .seta { transform: translateX(3px); }
.claro .botao { --bf: #000; --bt: #fff; }
.claro .botao-sec { color: #000; border-color: rgba(0,0,0,.2); background: transparent; }
.claro .botao:hover { box-shadow: 0 12px 30px -10px rgba(0,0,0,.35); }
.icone-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; transition: background .2s; }
.icone-btn:hover { background: rgba(255,255,255,.08); }
.icone-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flutuante { background: rgba(0,0,0,.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.18); }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 0.9375rem; color: var(--texto); }
.link svg { width: 16px; height: 16px; transition: transform .3s var(--mola); }
.link:hover svg { transform: translateX(3px); }

/* ================= TIPOGRAFIA UTILITÁRIA ================= */
.olho { display: inline-flex; align-items: center; gap: 10px; font-size: 0.7188rem; letter-spacing: .16em; text-transform: uppercase; color: var(--suave); font-weight: 500; }
.olho::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.t-xl { font-size: clamp(2.75rem, 12vw, 7rem); letter-spacing: -0.035em; line-height: .96; }
.t-l { font-size: clamp(2.25rem, 8.6vw, 4.5rem); letter-spacing: -0.03em; }
.t-m { font-size: clamp(1.75rem, 6vw, 2.75rem); }
.t-s { font-size: 1.5rem; }
.sub { color: var(--suave); font-size: clamp(1rem, 4.2vw, 1.188rem); font-weight: 300; max-width: 52ch; }
.num { font-variant-numeric: tabular-nums; }

/* ================= INÍCIO — desktop (herói) ================= */
.heroi { position: relative; overflow: hidden; isolation: isolate; height: min(860px, calc(100svh - var(--topo-h))); min-height: 620px; display: flex; align-items: center; margin-top: calc(-1 * var(--topo-h) - var(--seg-t)); padding-top: var(--topo-h); }
.heroi-fundo { position: absolute; inset: 0; z-index: -2; }
.heroi-fundo img { width: 100%; height: 100%; object-fit: cover; opacity: .38; transform: scale(1.06); animation: respirar 24s ease-in-out infinite alternate; }
@keyframes respirar { to { transform: scale(1.14) translate(-1.5%, -1%); } }
.heroi canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.heroi::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.82) 38%, rgba(0,0,0,.2) 72%, rgba(0,0,0,.5)), linear-gradient(180deg, rgba(0,0,0,.4), transparent 30%, transparent 70%, #000); }
.heroi h1 { margin: 22px 0 24px; }
.heroi h1 .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.heroi h1 .ln > span { display: inline-block; transform: translateY(105%); animation: subir 1.1s var(--mola) forwards; }
.heroi h1 .ln:nth-child(2) > span { animation-delay: .07s; } .heroi h1 .ln:nth-child(3) > span { animation-delay: .14s; }
@keyframes subir { to { transform: none; } }
.rot { display: inline-grid !important; vertical-align: bottom; }
.rot > b { grid-area: 1/1; font-weight: 500; white-space: nowrap; transition: transform .9s var(--mola), opacity .6s, filter .6s; }
.rot > b:not(.vis) { transform: translateY(65%); opacity: 0; filter: blur(10px); }
.rot > b.sai { transform: translateY(-65%); opacity: 0; filter: blur(10px); }
.heroi-acoes { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.heroi-legenda { position: absolute; right: var(--margem); bottom: 36px; max-width: 30ch; text-align: right; color: var(--g6); font-size: 0.7812rem; }
.heroi-rolar { position: absolute; left: 50%; bottom: 26px; width: 22px; height: 36px; border: 1px solid var(--linha-forte); border-radius: 12px; margin-left: -11px; }
.heroi-rolar::after { content: ""; position: absolute; left: 50%; top: 8px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: rolar 1.8s var(--mola) infinite; }
@keyframes rolar { 60% { transform: translateY(10px); opacity: 0; } 61% { transform: none; opacity: 0; } 100% { opacity: 1; } }

/* ================= INÍCIO — mobile (app) ================= */
.app-cab { padding-top: 8px; }
.app-ola { color: var(--suave); font-size: 0.9375rem; display: flex; align-items: center; gap: 8px; }
.app-ola .ponto { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.5); animation: pulso 2.2s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.app-cab h1 { font-size: clamp(2rem, 9.4vw, 2.75rem); margin: 8px 0 18px; letter-spacing: -0.028em; }
.campo-busca { position: relative; display: flex; align-items: center; min-height: 50px; border-radius: 16px; background: var(--g3); padding: 0 16px 0 46px; color: var(--g6); font-size: 1rem; border: 1px solid transparent; transition: border-color .2s, background .2s; width: 100%; }
.campo-busca svg { position: absolute; left: 16px; width: 19px; height: 19px; fill: none; stroke: var(--g7); stroke-width: 2; }
.campo-busca input { all: unset; width: 100%; color: #fff; font-size: 1rem; }
.campo-busca input::placeholder { color: var(--g6); }
.campo-busca:focus-within { border-color: var(--linha-forte); background: var(--g2); }
.ao-vivo { position: relative; margin-top: 16px; height: 168px; border-radius: var(--r-g); overflow: hidden; background: var(--g1); border: 1px solid var(--linha); isolation: isolate; }
.ao-vivo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ao-vivo-info { position: absolute; left: 16px; bottom: 14px; right: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; pointer-events: none; }
.ao-vivo-info b { font-family: var(--display); font-weight: 300; font-size: 2.5rem; line-height: .9; letter-spacing: -0.03em; display: block; }
.ao-vivo-info span { font-size: 0.7812rem; color: var(--g7); }
.ao-vivo-selo { font-size: 0.6562rem; letter-spacing: .14em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid var(--linha); display: inline-flex; align-items: center; gap: 6px; }
.ao-vivo-selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pisca 1.4s infinite; }
@keyframes pisca { 50% { opacity: .2; } }

/* carrosséis */
.bloco { padding-top: 34px; }
@media (min-width: 60em) { .bloco { padding-top: clamp(72px, 9vw, 120px); } }
.bloco-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.bloco-cab h2 { font-size: 1.5rem; letter-spacing: -0.02em; font-weight: 500; }
@media (min-width: 60em) { .bloco-cab { margin-bottom: 28px; align-items: flex-end; } .bloco-cab h2 { font-size: clamp(2.25rem, 4.4vw, 3.75rem); font-weight: 300; letter-spacing: -0.03em; } }
.bloco-cab .link { font-size: 0.875rem; color: var(--suave); white-space: nowrap; }
.trilho { display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--margem); padding: 2px var(--margem) 6px; margin: 0 calc(-1 * var(--margem)); scrollbar-width: none; overscroll-behavior-x: contain; }
.trilho::-webkit-scrollbar { display: none; }
.trilho > * { scroll-snap-align: start; }
.trilho-p { grid-auto-columns: min(42%, 170px); }
@media (min-width: 60em) {
  .trilho { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; gap: 20px; }
  .trilho-4 { grid-template-columns: repeat(4, 1fr); }
  .trilho-p { grid-template-columns: repeat(3, 1fr); }
}
.fichas { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px var(--margem); margin: 0 calc(-1 * var(--margem)); }
.fichas::-webkit-scrollbar { display: none; }
.ficha { flex: none; min-height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--linha-forte); font-size: 0.875rem; color: var(--g8); display: inline-flex; align-items: center; gap: 8px; transition: all .25s var(--mola); white-space: nowrap; }
.ficha:hover { border-color: #fff; }
.ficha[aria-pressed="true"], .ficha.on { background: #fff; color: #000; border-color: #fff; }
.ficha small { font-size: 0.75rem; opacity: .6; font-variant-numeric: tabular-nums; }
.ficha svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* ================= CARTÃO DE VAGA ================= */
.cartao { position: relative; display: flex; flex-direction: column; border-radius: var(--r-g); overflow: hidden; background: var(--cartao); isolation: isolate; transition: transform .5s var(--mola), box-shadow .5s; min-width: 0; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.cartao::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--linha); pointer-events: none; z-index: 3; transition: border-color .3s; }
@media (hover: hover) { .cartao:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(255,255,255,.22); } .cartao:hover::before { border-color: var(--linha-forte); } }
.cartao:active { transform: scale(.985); }
.capa { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--g2); }
@media (min-width: 60em) { .capa { aspect-ratio: 16/11; } }
.capa > img, .capa > svg { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--mola), opacity .6s; }
.capa > img { opacity: 0; } .capa > img.ok { opacity: 1; }
@media (hover: hover) { .cartao:hover .capa > img, .cartao:hover .capa > svg { transform: scale(1.06); } }
.capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 30%, transparent 55%, rgba(0,0,0,.78)); pointer-events: none; }
.capa-topo { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.selo { font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; background: #fff; color: #000; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.selo-esc { background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.2); }
.capa-base { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 10px; }
.logo-ong { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #fff; display: grid; place-items: center; padding: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.logo-ong img { width: 100%; height: 100%; object-fit: contain; }
.logo-ong.g { width: 64px; height: 64px; border-radius: 18px; padding: 6px; }
.logo-ong.gg { width: 96px; height: 96px; border-radius: 24px; padding: 8px; }
.capa-base > span:not(.logo-ong) { font-size: 0.8125rem; font-weight: 500; text-shadow: 0 1px 10px rgba(0,0,0,.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-corpo { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cartao h3 { font-size: 1.438rem; line-height: 1.1; letter-spacing: -0.018em; font-weight: 300; }
.cartao-resumo { color: var(--suave); font-size: 0.9062rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.8438rem; color: var(--suave); }
.meta span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }
.cartao-pe { margin-top: auto; padding-top: 12px; display: grid; gap: 12px; }
.ocup { display: flex; align-items: center; gap: 10px; font-size: 0.7812rem; color: var(--suave); }
.ocup-barra { flex: 1; height: 3px; border-radius: 3px; background: var(--g4); overflow: hidden; }
.ocup-barra i { display: block; height: 100%; background: #fff; border-radius: 3px; transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 1.3s var(--mola) .2s; }
.ocup b { color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etq { font-size: 0.75rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linha-forte); color: var(--g8); white-space: nowrap; }
.etq-f { background: #fff; color: #000; border-color: #fff; }
.pct { position: absolute; z-index: 4; top: 12px; right: 12px; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; font: 500 1.062rem/1 var(--display); box-shadow: 0 8px 24px rgba(0,0,0,.45); }

/* linha compacta (lista estilo app) */
.lista { display: grid; gap: 2px; }
.linha-v { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.linha-v:last-child { border-bottom: 0; }
.linha-v .mini { width: 76px; height: 76px; border-radius: 14px; overflow: hidden; background: var(--g3); position: relative; }
.linha-v .mini img, .linha-v .mini svg { width: 100%; height: 100%; object-fit: cover; }
.linha-v .data { position: absolute; left: 6px; top: 6px; background: #fff; color: #000; border-radius: 8px; padding: 3px 6px; text-align: center; line-height: 1; }
.linha-v .data b { display: block; font: 500 0.9375rem/1 var(--display); }
.linha-v .data small { font-size: 0.5625rem; text-transform: uppercase; letter-spacing: .06em; }
.linha-v h3 { font-family: var(--corpo); font-size: 0.9688rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.linha-v p { color: var(--suave); font-size: 0.8125rem; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-v .chev { width: 18px; height: 18px; stroke: var(--g6); fill: none; stroke-width: 2; }
@media (min-width: 60em) { .lista-semana { grid-template-columns: 1fr 1fr; column-gap: 40px; } }

/* organizações (tiles) */
.ong-tile { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-g); background: var(--cartao); border: 1px solid var(--linha); min-height: 200px; overflow: hidden; transition: transform .5s var(--mola), border-color .3s; isolation: isolate; }
.ong-tile:hover { transform: translateY(-4px); border-color: var(--linha-forte); }
.ong-tile .fundo { position: absolute; inset: 0; z-index: -1; opacity: .22; transition: opacity .5s; }
.ong-tile .fundo img { width: 100%; height: 100%; object-fit: cover; }
.ong-tile:hover .fundo { opacity: .34; }
.ong-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(19,19,19,.2), var(--g2) 75%); }
.ong-tile h3 { font-size: 1.25rem; margin-top: auto; font-weight: 500; letter-spacing: -0.01em; }
.ong-tile p { font-size: 0.8125rem; color: var(--suave); }
@media (min-width: 60em) { .ong-tile { min-height: 360px; padding: 28px; } .ong-tile h3 { font-size: 2.125rem; font-weight: 300; } .ong-tile p { font-size: 0.9375rem; } }

/* números */
.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 60em) { .numeros { grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--linha); } }
.numero { padding: 18px; border-radius: var(--r); background: var(--cartao); min-width: 0; }
@media (min-width: 60em) { .numero { background: none; border-radius: 0; padding: 32px 28px 8px 0; border-right: 1px solid var(--linha); margin-right: 28px; } .numero:last-child { border-right: 0; } }
.numero b { display: block; font: 300 clamp(38px, 10vw, 88px)/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.numero span { display: block; margin-top: 10px; color: var(--suave); font-size: 0.8438rem; line-height: 1.35; }

/* depoimentos */
.voz { border-radius: var(--r-g); background: var(--cartao); border: 1px solid var(--linha); padding: 22px; display: flex; flex-direction: column; gap: 18px; min-height: 230px; }
.voz blockquote { margin: 0; font: 300 1.25rem/1.35 var(--display); letter-spacing: -0.01em; }
.voz blockquote::before { content: "“"; display: block; font-size: 3.5rem; line-height: .6; margin-bottom: 8px; color: var(--g5); }
.voz footer { margin-top: auto; display: flex; align-items: center; gap: 12px; font-size: 0.8438rem; }
.voz footer i { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; font: 500 0.875rem/1 var(--display); font-style: normal; flex: none; }
.voz footer small { display: block; color: var(--suave); font-size: 0.7812rem; }

/* passos */
.passos { display: grid; gap: 10px; }
@media (min-width: 60em) { .passos { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.passo { border-radius: var(--r-g); background: var(--cartao); border: 1px solid var(--linha); padding: 22px; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
@media (min-width: 60em) { .passo { grid-template-columns: 1fr; padding: 30px; min-height: 260px; align-content: space-between; } }
.passo i { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linha-forte); display: grid; place-items: center; font: 500 0.9375rem/1 var(--display); font-style: normal; }
.passo h3 { font-size: 1.375rem; margin-bottom: 6px; font-weight: 500; }
.passo p { color: var(--suave); font-size: 0.9062rem; }
@media (min-width: 60em) { .passo h3 { font-size: 2rem; font-weight: 300; } }

/* letreiro */
.letreiro { overflow: hidden; white-space: nowrap; padding: 14px 0; border-bottom: 1px solid var(--linha); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.letreiro-in { display: inline-flex; gap: 44px; animation: correr 70s linear infinite; padding-left: 44px; }
.letreiro span { color: var(--g6); font-size: 0.8438rem; display: inline-flex; align-items: center; gap: 10px; }
.letreiro span b { color: var(--g9); font-weight: 500; }
.letreiro span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
@keyframes correr { to { transform: translateX(-50%); } }

/* seção clara */
.claro { --fundo: #fff; --texto: #000; --suave: #5a5a5a; --linha: rgba(0,0,0,.1); --linha-forte: rgba(0,0,0,.2); --cartao: #f3f3f3; background: #fff; color: #000; }
.claro ::selection { background: #000; color: #fff; }
.faixa-clara { margin-top: clamp(48px, 9vw, 120px); padding: clamp(40px, 8vw, 110px) 0; }

/* ================= LISTA DE VAGAS ================= */
.pag-cab { padding-top: 12px; padding-bottom: 6px; }
@media (min-width: 60em) { .pag-cab { padding-top: 48px; padding-bottom: 20px; } }
.pag-cab h1 { margin: 10px 0 10px; }
.filtros { position: sticky; top: calc(var(--topo-h) + var(--seg-t)); z-index: 30; background: rgba(0,0,0,.8); backdrop-filter: saturate(160%) blur(22px); -webkit-backdrop-filter: saturate(160%) blur(22px); padding: 10px 0 12px; border-bottom: 1px solid var(--linha); margin-bottom: 18px; }
.filtros-l1 { display: flex; gap: 8px; align-items: center; }
.filtros-l1 .campo-busca { flex: 1; min-height: 46px; border-radius: 14px; }
.filtros .fichas { margin-top: 10px; }
.sep-v { flex: none; width: 1px; background: var(--linha-forte); margin: 7px 2px; }
.grade { display: grid; gap: 14px; }
@media (min-width: 40em) { .grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 67.5em) { .grade { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.contagem { color: var(--suave); font-size: 0.8438rem; margin-bottom: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.contagem label { white-space: nowrap; }
.select-mini { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: #fff; font-size: 0.8438rem; font-weight: 500; padding-right: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; background-size: 13px; cursor: pointer; }
.select-mini option { background: #111; }
.vazio { text-align: center; padding: 56px 20px; color: var(--suave); border: 1px dashed var(--linha-forte); border-radius: var(--r-g); grid-column: 1 / -1; }
.vazio h3 { color: var(--texto); font-size: 1.625rem; margin-bottom: 8px; }

/* ================= DETALHE ================= */
.det-capa { position: relative; height: min(64svh, 560px); margin-top: calc(-1 * var(--topo-h) - var(--seg-t)); overflow: hidden; background: var(--g2); }
.det-capa img, .det-capa > svg { width: 100%; height: 100%; object-fit: cover; animation: zoom 1.6s var(--mola) both; }
@keyframes zoom { from { transform: scale(1.12); opacity: 0; } }
.det-capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, transparent 28%, transparent 50%, #000 100%); }
.det-flut { position: absolute; z-index: 3; left: var(--margem); right: var(--margem); top: calc(var(--topo-h) + var(--seg-t) + 8px); display: flex; justify-content: space-between; }
@media (min-width: 60em) { .det-flut { display: none; } }
.det-credito-m { display: block; margin-top: 18px; font-size: 0.7188rem; color: var(--g6); }
@media (min-width: 60em) { .det-credito-m { display: none; } }
@media (max-width: 59.94em) { .det-credito { display: none; } }
.det-credito { position: absolute; z-index: 2; right: var(--margem); bottom: 14px; font-size: 0.6875rem; color: rgba(255,255,255,.55); max-width: 60%; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.det { position: relative; z-index: 2; margin-top: -96px; display: grid; gap: 28px; }
@media (min-width: 62.5em) { .det { grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; margin-top: -180px; } }
.det-ong { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; color: var(--g8); margin-bottom: 14px; }
.det h1 { font-size: clamp(2.25rem, 9.6vw, 5rem); letter-spacing: -0.032em; margin: 14px 0 14px; }
.det-resumo { font-size: clamp(1.062rem, 4.4vw, 1.312rem); color: var(--g8); font-weight: 300; max-width: 44ch; }
.det-fatos { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linha); border-radius: var(--r); overflow: hidden; margin-top: 24px; border: 1px solid var(--linha); }
@media (min-width: 62.5em) { .det-fatos { display: none; } }
.det-fatos div { background: var(--g1); padding: 14px; min-width: 0; }
.det-fatos small, .ficha-l small { display: block; color: var(--g6); font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.det-fatos div > span { font-size: 0.875rem; display: block; overflow-wrap: anywhere; }
.det-sec { margin-top: 40px; }
.det-sec h2 { font-size: 1.625rem; margin-bottom: 14px; font-weight: 500; letter-spacing: -0.015em; }
@media (min-width: 60em) { .det-sec { margin-top: 56px; } .det-sec h2 { font-size: 2rem; font-weight: 300; } }
.det-sec > p { color: var(--g8); max-width: 64ch; font-size: 1.031rem; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: var(--g8); }
.checks li::before { content: ""; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 1px solid var(--linha-forte); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6'%3E%3Cpath d='m7 12 3.5 3.5L17 9'/%3E%3C/svg%3E") center/14px no-repeat; }
.rostos { display: flex; align-items: center; gap: 12px; }
.rostos-p { display: flex; }
.rostos-p i { width: 34px; height: 34px; border-radius: 50%; background: var(--g8); color: #000; display: grid; place-items: center; font: 500 0.7812rem/1 var(--corpo); font-style: normal; border: 2px solid #000; margin-left: -9px; }
.rostos-p i:first-child { margin-left: 0; }
.rostos-p i:nth-child(2n) { background: #fff; } .rostos-p i:nth-child(3n) { background: var(--g7); }
.rostos span { color: var(--suave); font-size: 0.875rem; }
.ong-mini { display: flex; gap: 16px; align-items: center; padding: 18px; border-radius: var(--r-g); background: var(--cartao); border: 1px solid var(--linha); margin-top: 14px; }
.ong-mini p { color: var(--suave); font-size: 0.875rem; }
.lateral { position: relative; }
.ficha-vaga { position: sticky; top: calc(var(--topo-h) + 24px); display: grid; gap: 18px; padding: 24px; border-radius: var(--r-g); background: rgba(20,20,20,.82); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--linha-forte); }
.ficha-l { display: grid; grid-template-columns: 22px 1fr; gap: 14px; }
.ficha-l svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.6; margin-top: 2px; }
.ficha-l div { min-width: 0; overflow-wrap: anywhere; font-size: 0.9375rem; }
.anel { display: flex; align-items: center; gap: 16px; padding-top: 18px; border-top: 1px solid var(--linha); }
.anel svg { width: 62px; height: 62px; transform: rotate(-90deg); flex: none; }
.anel circle { fill: none; stroke-width: 4; }
.anel .tr { stroke: var(--g4); } .anel .vl { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset 1.5s var(--mola); }
.anel b { display: block; font: 300 2rem/1 var(--display); }
.anel span { color: var(--suave); font-size: 0.8438rem; }
.cta-barra { position: fixed; z-index: 58; left: 0; right: 0; bottom: 0; padding: 12px var(--margem) calc(12px + var(--seg-b)); background: rgba(10,10,10,.9); backdrop-filter: saturate(170%) blur(24px); -webkit-backdrop-filter: saturate(170%) blur(24px); border-top: 1px solid var(--linha); display: flex; align-items: center; gap: 14px; animation: subirBarra .5s var(--mola) .2s both; }
@keyframes subirBarra { from { transform: translateY(100%); } }
.cta-barra .botao { flex: 1; max-width: 240px; margin-left: auto; }
.cta-barra-info { min-width: 0; font-size: 0.7812rem; color: var(--g7); line-height: 1.3; }
.cta-barra-info b { display: block; color: #fff; font-size: 0.9375rem; font-weight: 500; white-space: nowrap; }
@media (min-width: 62.5em) { .cta-barra { display: none; } }
@media (max-width: 62.44em) { .ficha-vaga { display: none; } .det-pag { padding-bottom: 110px; } }

/* ================= FOLHA / MODAL ================= */
.folha-fundo { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .35s; }
.folha-fundo.aberta { opacity: 1; }
.folha { position: fixed; z-index: 91; left: 0; right: 0; bottom: 0; max-height: calc(100dvh - var(--seg-t) - 24px); overflow-y: auto; overscroll-behavior: contain; background: var(--g1); border-top: 1px solid var(--linha-forte); border-radius: 26px 26px 0 0; padding: 8px var(--margem) calc(22px + var(--seg-b)); transform: translateY(100%); transition: transform .55s var(--mola); }
.folha.aberta { transform: none; }
.puxador { width: 38px; height: 5px; border-radius: 5px; background: var(--g5); margin: 4px auto 16px; }
@media (min-width: 47.5em) {
  .folha { left: 50%; right: auto; top: 50%; bottom: auto; width: min(640px, 92vw); max-height: 88dvh; border: 1px solid var(--linha-forte); border-radius: 26px; padding: 30px 36px 32px; transform: translate(-50%, -47%) scale(.97); opacity: 0; transition: transform .45s var(--mola), opacity .3s; }
  .folha.aberta { transform: translate(-50%, -50%); opacity: 1; }
  .folha-l { width: min(880px, 94vw); }
  .puxador { display: none; }
}
.folha-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.folha-cab h2 { font-size: clamp(1.75rem, 7vw, 2.375rem); }
.folha-cab p { color: var(--suave); font-size: 0.9062rem; margin-top: 6px; }
.fechar { width: 38px; height: 38px; border-radius: 50%; background: var(--g3); display: grid; place-items: center; flex: none; }
.fechar svg { width: 15px; height: 15px; stroke: #fff; stroke-width: 2.2; fill: none; }

/* formulários */
.form { display: grid; gap: 14px; }
.duas { display: grid; gap: 14px; }
@media (min-width: 35em) { .duas { grid-template-columns: 1fr 1fr; } .tres { grid-template-columns: 1fr 1fr 1fr; } }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo > label, .campo > .rot { font-size: 0.8125rem; color: var(--g7); }
.campo > label small, .campo .dica { color: var(--g6); font-size: 0.75rem; font-weight: 400; }
.entrada, .campo input:not([type=checkbox]):not([type=radio]), .campo select, .campo textarea { width: 100%; min-height: 50px; border-radius: var(--r-p); border: 1px solid var(--g4); background: var(--g2); padding: 12px 15px; font-size: 1rem; outline: none; transition: border-color .2s, background .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.campo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; }
.campo select option { background: #111; }
.campo textarea { min-height: 100px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: #fff; background: var(--g3); box-shadow: 0 0 0 4px rgba(255,255,255,.06); }
.campo input[type=datetime-local], .campo input[type=date] { color-scheme: dark; }
.aceite { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 0.875rem; color: var(--g8); cursor: pointer; }
.aceite input { width: 22px; height: 22px; margin: 0; accent-color: #fff; }
.chave { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; cursor: pointer; font-size: 0.9375rem; }
.chave input { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 28px; border-radius: 28px; background: var(--g4); position: relative; transition: background .25s; cursor: pointer; margin: 0; }
.chave input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .3s var(--mola); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.chave input:checked { background: #fff; } .chave input:checked::after { transform: translateX(18px); background: #000; }
.erro-form { background: #fff; color: #000; border-radius: var(--r-p); padding: 12px 14px; font-size: 0.875rem; font-weight: 500; }
.nota { color: var(--g6); font-size: 0.7812rem; text-align: center; }
.contador { display: inline-flex; align-items: center; border: 1px solid var(--g4); border-radius: 999px; min-height: 50px; width: max-content; }
.contador button { width: 50px; height: 48px; font-size: 1.375rem; }
.contador output { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }

/* ================= SUCESSO ================= */
.celebra { position: fixed; inset: 0; z-index: 110; background: #000; overflow-y: auto; padding: calc(24px + var(--seg-t)) var(--margem) calc(24px + var(--seg-b)); display: flex; justify-content: center; animation: aparecer .4s ease both; }
@keyframes aparecer { from { opacity: 0; } }
.celebra canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.celebra-in { position: relative; width: 100%; max-width: 440px; margin: auto 0; display: grid; gap: 20px; justify-items: center; text-align: center; }
.celebra .fechar { position: fixed; top: calc(14px + var(--seg-t)); right: 14px; z-index: 2; }
.check { width: 76px; height: 76px; }
.check circle { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 264; stroke-dashoffset: 264; animation: tracar .9s var(--mola) .1s forwards; }
.check path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: tracar .5s var(--mola) .7s forwards; }
@keyframes tracar { to { stroke-dashoffset: 0; } }
.celebra h2 { font-size: clamp(2.375rem, 11vw, 3.5rem); }
.celebra-sub { color: var(--suave); max-width: 36ch; font-size: 0.9688rem; }
.passe { width: 100%; background: #fff; color: #000; border-radius: 22px; text-align: left; overflow: hidden; animation: passe 1s var(--mola) .3s both; box-shadow: 0 40px 90px -40px rgba(255,255,255,.4); }
@keyframes passe { from { transform: translateY(40px) rotateX(28deg); opacity: 0; } }
.passe-foto { height: 120px; position: relative; overflow: hidden; background: #111; }
.passe-foto img, .passe-foto svg { width: 100%; height: 100%; object-fit: cover; }
.passe-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.6)); }
.passe-foto .logo-ong { position: absolute; left: 18px; bottom: 12px; z-index: 2; }
.passe-topo { padding: 18px 20px 4px; display: flex; justify-content: space-between; align-items: center; }
.passe-topo img { height: 30px; width: auto; min-width: 77px; }
.passe-topo span { font-size: 0.6562rem; letter-spacing: .14em; text-transform: uppercase; color: #666; text-align: right; }
.passe-meio { padding: 10px 20px 18px; }
.passe-meio h3 { font-size: 1.562rem; line-height: 1.08; }
.passe-meio p { color: #555; font-size: 0.8438rem; margin-top: 6px; }
.passe-corte { position: relative; border-top: 2px dashed #d0d0d0; margin: 0 16px; }
.passe-corte::before, .passe-corte::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: #000; }
.passe-corte::before { left: -28px; } .passe-corte::after { right: -28px; }
.passe-base { padding: 16px 20px 20px; display: grid; grid-template-columns: 1fr auto; gap: 12px 16px; font-size: 0.8125rem; }
.passe-base small { display: block; color: #888; font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase; }
.passe-base b { font-weight: 500; font-size: 0.9062rem; }
.passe-cod { font: 500 1.312rem/1 var(--display); letter-spacing: .04em; }
.passe-barras { grid-column: 1/-1; height: 38px; width: 100%; }
.celebra-acoes { display: grid; gap: 10px; width: 100%; }
@media (min-width: 26.25em) { .celebra-acoes { grid-template-columns: 1fr 1fr; } .celebra-acoes > :last-child { grid-column: 1/-1; } }

/* ================= MATCH ================= */
.match { min-height: calc(100dvh - var(--topo-h) - var(--abas-h) - var(--seg-b) - var(--seg-t)); display: flex; flex-direction: column; padding-top: 10px; padding-bottom: 28px; }
@media (min-width: 60em) { .match { padding-top: 48px; min-height: calc(100dvh - var(--topo-h)); } }
.progresso { display: flex; gap: 5px; margin-bottom: 26px; }
.progresso i { flex: 1; height: 3px; border-radius: 3px; background: var(--g4); position: relative; overflow: hidden; }
.progresso i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--mola); }
.progresso i.ok::after { transform: none; }
.match h1 { font-size: clamp(2rem, 9vw, 4.5rem); margin: 12px 0 8px; max-width: 16ch; }
.match-dica { color: var(--suave); margin-bottom: 24px; }
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 47.5em) { .opcoes { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.opcao { position: relative; text-align: left; min-height: 112px; border-radius: var(--r-g); background: var(--cartao); border: 1px solid var(--linha); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; transition: transform .35s var(--mola), background .25s, color .25s, border-color .25s; min-width: 0; }
.opcao svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.opcao span { font-weight: 500; font-size: 0.9688rem; line-height: 1.2; overflow-wrap: anywhere; }
.opcao small { display: block; color: var(--suave); font-weight: 400; font-size: 0.7812rem; margin-top: 3px; }
.opcao:active { transform: scale(.97); }
.opcao[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
.opcao[aria-pressed="true"] small { color: #555; }
.opcao::after { content: ""; position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--linha-forte); transition: all .25s; }
.opcao[aria-pressed="true"]::after { border-color: #000; background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat; }
.match-nav { margin-top: auto; padding-top: 28px; display: flex; gap: 10px; }
.match-nav .botao:last-child { flex: 1; max-width: 320px; margin-left: auto; }

/* ================= ONG ================= */
.ong-capa { position: relative; height: min(70svh, 620px); margin-top: calc(-1 * var(--topo-h) - var(--seg-t)); overflow: hidden; }
.ong-capa img { width: 100%; height: 100%; object-fit: cover; animation: zoom 1.8s var(--mola) both; }
.ong-capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.5), transparent 30%, rgba(0,0,0,.4) 60%, #000); }
.ong-cab { position: relative; z-index: 2; margin-top: -200px; }
.ong-cab h1 { font-size: clamp(2.625rem, 11vw, 6.5rem); margin: 18px 0 10px; letter-spacing: -0.035em; }
.ong-cab .frase { font: 300 clamp(19px, 4.8vw, 28px)/1.3 var(--display); color: var(--g8); }
.ong-corpo { display: grid; gap: 28px; margin-top: 32px; }
@media (min-width: 60em) { .ong-corpo { grid-template-columns: 1.5fr 1fr; gap: 72px; margin-top: 48px; } }
.ong-corpo > p { color: var(--g8); font-size: 1.125rem; font-weight: 300; line-height: 1.6; }
.dados { display: grid; gap: 0; align-content: start; }
.dados div { border-top: 1px solid var(--linha); padding: 14px 0; overflow-wrap: anywhere; font-size: 0.9375rem; }
.dados small { display: block; color: var(--g6); font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.ong-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; }
.ong-nums div { border-radius: var(--r); background: var(--cartao); padding: 14px; }
.ong-nums b { display: block; font: 300 2.125rem/1 var(--display); }
.ong-nums span { color: var(--suave); font-size: 0.7812rem; }

/* ================= EU ================= */
.eu-cab { display: grid; gap: 24px; align-items: center; padding-top: 12px; }
@media (min-width: 60em) { .eu-cab { grid-template-columns: 1fr auto; padding-top: 48px; } }
.anel-h { position: relative; width: 176px; height: 176px; justify-self: center; }
.anel-h svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel-h circle { fill: none; stroke-width: 8; }
.anel-h .tr { stroke: var(--g3); } .anel-h .vl { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset 1.8s var(--mola); }
.anel-h > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.anel-h b { font: 300 3.375rem/1 var(--display); }
.anel-h span { font-size: 0.7812rem; color: var(--suave); }
.caixa { border-radius: var(--r-g); background: var(--g1); border: 1px solid var(--linha); padding: clamp(20px, 5vw, 32px); }
.minhas { display: grid; gap: 10px; }
.minha { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: var(--r-g); background: var(--cartao); border: 1px solid var(--linha); }
.minha .mini { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; }
.minha .mini img, .minha .mini svg { width: 100%; height: 100%; object-fit: cover; }
.minha h3 { font: 500 0.9688rem/1.3 var(--corpo); letter-spacing: 0; margin-top: 6px; }
.minha p { color: var(--suave); font-size: 0.8125rem; margin-top: 2px; }
.minha-acoes { grid-column: 1/-1; display: flex; gap: 8px; flex-wrap: wrap; }
@media (min-width: 47.5em) { .minha { grid-template-columns: 72px 1fr auto; } .minha .mini { width: 72px; height: 72px; } .minha-acoes { grid-column: auto; } }
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7188rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--linha-forte); color: var(--g8); white-space: nowrap; font-weight: 500; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-confirmada, .st-concluida, .st-aberta { background: #fff; color: #000; border-color: #fff; }
.st-cancelada, .st-ausente, .st-encerrada { color: var(--g6); border-style: dashed; }
.st-rascunho { color: var(--g7); background: var(--g3); border-color: var(--g3); }
.st-lotada { background: var(--g5); border-color: var(--g5); color: #fff; }

/* ================= CERTIFICADO ================= */
.cert-pag { padding-top: 16px; padding-bottom: 48px; display: grid; gap: 18px; justify-items: center; }
.cert { width: 100%; max-width: 1000px; aspect-ratio: 1.414; background: #fff; color: #000; border-radius: 6px; position: relative; overflow: hidden; container-type: inline-size; box-shadow: 0 40px 90px -40px rgba(255,255,255,.3); }
.cert-in { position: absolute; inset: 3.2cqw; border: .12cqw solid #000; padding: 4.6cqw 5.6cqw; display: flex; flex-direction: column; }
.cert-topo { display: flex; justify-content: space-between; align-items: center; }
.cert-topo .t { height: 4.4cqw; width: auto; } .cert-topo .a { height: 5.5cqw; width: auto; }
.cert-olho { margin-top: 6cqw; font-size: 1.3cqw; letter-spacing: .3em; text-transform: uppercase; }
.cert-nome { font: 300 6.4cqw/1 var(--display); letter-spacing: -0.03em; margin: 1.6cqw 0 2cqw; }
.cert-texto { font-size: 1.85cqw; line-height: 1.5; max-width: 60ch; font-weight: 300; }
.cert-texto b { font-weight: 500; }
.cert-pe { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; font-size: 1.2cqw; color: #444; gap: 2cqw; }
.cert-pe b { display: block; color: #000; font-size: 1.5cqw; font-weight: 500; }
.cert-ong { display: flex; align-items: center; gap: 1.4cqw; }
.cert-ong img { height: 5cqw; width: auto; }
.cert-arte { position: absolute; right: -10cqw; bottom: -10cqw; width: 36cqw; height: 36cqw; pointer-events: none; opacity: .18; }
@media print {
  @page { size: A4 landscape; margin: 0; }
  html, body { background: #fff !important; padding: 0 !important; }
  .topo, .abas, .rodape, .cert-acoes, .avisos, .cta-barra { display: none !important; }
  .cert-pag { padding: 0; }
  .cert { max-width: none; width: 297mm; height: 210mm; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
}

/* ================= CRÉDITOS ================= */
.creditos { display: grid; gap: 10px; }
@media (min-width: 47.5em) { .creditos { grid-template-columns: repeat(3, 1fr); } }
.credito { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; font-size: 0.7812rem; color: var(--suave); padding: 10px; border-radius: var(--r); background: var(--cartao); }
.credito img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; }
.credito b { color: #fff; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================= RODAPÉ ================= */
.rodape { margin-top: 72px; border-top: 1px solid var(--linha); padding: 40px 0 calc(28px); }
.rodape-in { max-width: var(--max); margin: 0 auto; padding: 0 var(--margem); display: grid; gap: 26px; }
@media (min-width: 60em) { .rodape-in { grid-template-columns: 1.3fr 1fr; } }
.rodape-marca { display: flex; align-items: center; gap: 16px; }
.rodape-marca img { height: 34px; width: auto; min-width: 87px; }
.rodape-texto { color: var(--g6); max-width: 50ch; font-size: 0.8438rem; margin-top: 14px; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 10px 22px; align-content: start; color: var(--g7); font-size: 0.9062rem; }
.rodape-links a:hover { color: #fff; }
.rodape-fim { grid-column: 1/-1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--g5); font-size: 0.75rem; padding-top: 18px; border-top: 1px solid var(--linha); }

/* ================= AVISOS / REVELAR ================= */
.avisos { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--abas-h) + var(--seg-b) + 14px); z-index: 130; display: grid; gap: 8px; width: min(420px, calc(100% - 32px)); pointer-events: none; }
body.sem-abas .avisos { bottom: calc(96px + var(--seg-b)); }
@media (min-width: 60em) { .avisos { bottom: 24px; } }
.aviso { background: #fff; color: #000; padding: 13px 16px; border-radius: 14px; font-size: 0.9062rem; font-weight: 500; box-shadow: 0 20px 50px rgba(0,0,0,.6); animation: aviso .5s var(--mola) both; display: flex; align-items: center; gap: 10px; }
.aviso::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/11px no-repeat; flex: none; }
@keyframes aviso { from { transform: translateY(16px) scale(.96); opacity: 0; } }
.rv { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--mola), transform .9s var(--mola); transition-delay: var(--d, 0s); }
.rv.em { opacity: 1; transform: none; }
.esq { border-radius: var(--r-g); background: linear-gradient(90deg, var(--g2) 0%, var(--g3) 50%, var(--g2) 100%); background-size: 200% 100%; animation: brilho 1.3s infinite linear; }
@keyframes brilho { to { background-position: -200% 0; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

/* ================= PAINEL CSR ================= */
body.csr-modo .abas { display: none; }
body.csr-modo { padding-bottom: 0; }
.csr { display: grid; gap: 0; min-height: calc(100dvh - var(--topo-h)); }
@media (min-width: 62.5em) { .csr { grid-template-columns: 248px minmax(0, 1fr); } }
.csr-lado { border-right: 1px solid var(--linha); padding: 24px 16px; position: sticky; top: var(--topo-h); height: calc(100dvh - var(--topo-h)); display: none; flex-direction: column; gap: 4px; }
@media (min-width: 62.5em) { .csr-lado { display: flex; } }
.csr-lado .olho { padding: 0 12px 14px; }
.csr-lado a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--g7); font-size: 0.9375rem; transition: background .2s, color .2s; }
.csr-lado a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.csr-lado a span { display: flex; align-items: center; gap: 12px; }
.csr-lado a small { font-size: 0.75rem; color: var(--g6); font-variant-numeric: tabular-nums; }
.csr-lado a:hover { background: rgba(255,255,255,.05); color: #fff; }
.csr-lado a.ativo { background: var(--g3); color: #fff; }
.csr-lado a.botao { margin: 8px 0 18px; justify-content: center; color: #000; background: #fff; }
.csr-lado a.botao:hover { background: #fff; color: #000; }
.csr-lado .rodape-csr { margin-top: auto; font-size: 0.7812rem; color: var(--g6); padding: 0 12px; }
.csr-abas { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 8px var(--margem) 0; border-bottom: 1px solid var(--linha); position: sticky; top: calc(var(--topo-h) + var(--seg-t)); z-index: 20; background: rgba(0,0,0,.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
@media (min-width: 62.5em) { .csr-abas { display: none; } }
.csr-abas a { flex: none; padding: 10px 12px 12px; color: var(--g7); font-size: 0.9062rem; border-bottom: 2px solid transparent; }
.csr-abas a.ativo { color: #fff; border-bottom-color: #fff; }
.csr-main { padding: 22px var(--margem) 120px; min-width: 0; }
@media (min-width: 62.5em) { .csr-main { padding: 36px 44px 80px; } }
.csr-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.csr-cab h1 { font-size: clamp(1.875rem, 7vw, 3rem); letter-spacing: -0.03em; }
.csr-cab p { color: var(--suave); font-size: 0.9062rem; margin-top: 6px; }
.csr-cab .acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
@media (min-width: 47.5em) { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 80em) { .kpis { grid-template-columns: repeat(6, 1fr); } }
.kpi { border-radius: var(--r); background: var(--g1); border: 1px solid var(--linha); padding: 16px; min-width: 0; }
.kpi b { display: block; font: 300 2.25rem/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--suave); font-size: 0.7812rem; display: block; margin-top: 8px; }
.paineis { display: grid; gap: 16px; }
@media (min-width: 68.75em) { .paineis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .paineis .largo { grid-column: 1/-1; } }
.painel { border-radius: var(--r-g); background: var(--g1); border: 1px solid var(--linha); padding: 20px; min-width: 0; }
.painel h3 { font: 500 1rem/1.3 var(--corpo); letter-spacing: 0; margin-bottom: 16px; display: flex; justify-content: space-between; gap: 10px; }
.painel h3 small { color: var(--g6); font-weight: 400; font-size: 0.8125rem; }
.grafico { width: 100%; height: 200px; }
.grafico text { fill: var(--g6); font-size: 0.6875rem; font-family: var(--corpo); }
.barras { display: grid; gap: 14px; }
.bh { display: grid; gap: 7px; }
.bh-t { display: flex; justify-content: space-between; gap: 12px; font-size: 0.875rem; }
.bh-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.bh-t b { font-weight: 500; font-variant-numeric: tabular-nums; }
.bh-tr { height: 8px; background: var(--g3); border-radius: 8px; overflow: hidden; }
.bh-tr i { display: block; height: 100%; background: #fff; border-radius: 8px; transform-origin: left; animation: crescer 1.2s var(--mola) both; }
@keyframes crescer { from { transform: scaleX(0); } }
.logo-mini { width: 22px; height: 22px; border-radius: 6px; background: #fff; padding: 2px; flex: none; }
.logo-mini img { width: 100%; height: 100%; object-fit: contain; }
.prox { display: grid; gap: 0; }
.prox a { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linha); }
.prox a:first-child { border-top: 0; }
.prox .dia { text-align: center; border-radius: 10px; background: var(--g3); padding: 6px 0; line-height: 1.05; }
.prox .dia b { display: block; font: 500 1.125rem/1 var(--display); }
.prox .dia small { font-size: 0.625rem; text-transform: uppercase; color: var(--g7); letter-spacing: .06em; }
.prox strong { font-weight: 500; font-size: 0.9062rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prox span { color: var(--suave); font-size: 0.7812rem; }
.prox em { font-style: normal; font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--g8); }
.ranking li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linha); font-size: 0.875rem; }
.ranking li:first-child { border-top: 0; }
.ranking { list-style: none; margin: 0; padding: 0; }
.ranking i { font-style: normal; color: var(--g6); font-variant-numeric: tabular-nums; }
.ranking small { display: block; color: var(--g6); font-size: 0.75rem; }
.ranking b { font-weight: 500; font-variant-numeric: tabular-nums; }

.ferr { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.ferr .campo-busca { flex: 1 1 220px; min-height: 44px; border-radius: 12px; }
.ferr .fichas { flex: 1 1 100%; margin: 0; padding: 0; }
@media (min-width: 62.5em) { .ferr .fichas { flex: 0 1 auto; } }
.ferr-dir { margin-left: auto; display: flex; gap: 10px; align-items: center; color: var(--g6); font-size: 0.8438rem; white-space: nowrap; }
.grupo { margin-top: 18px; }
.grupo-cab { display: flex; align-items: center; gap: 12px; padding: 10px 0; position: sticky; top: calc(var(--topo-h) + var(--seg-t) + 52px); z-index: 5; background: rgba(0,0,0,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
@media (min-width: 62.5em) { .grupo-cab { top: var(--topo-h); } }
.grupo-cab h3 { font: 500 0.9375rem/1.25 var(--corpo); letter-spacing: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }
@media (max-width: 56.19em) { .grupo-cab h3 small { flex-basis: 100%; } }
.grupo-cab small { color: var(--g6); font-size: 0.8125rem; }
.grupo-cab .grupo-res { margin-left: auto; color: var(--g6); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.grupo-cab input { width: 18px; height: 18px; accent-color: #fff; }
.linhas { border-radius: var(--r); border: 1px solid var(--linha); overflow: hidden; background: var(--g1); }
.lv { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--linha); transition: background .2s; }
.lv:first-child { border-top: 0; }
.lv:hover { background: rgba(255,255,255,.025); }
.lv .mini { width: 64px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--g3); }
.lv .mini img, .lv .mini svg { width: 100%; height: 100%; object-fit: cover; }
.lv strong { display: block; font-weight: 500; font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv .sub2 { color: var(--g6); font-size: 0.8125rem; display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; }
.lv-ocup { display: none; width: 160px; }
.lv-acoes { display: flex; align-items: center; gap: 6px; }
@media (min-width: 56.25em) { .lv { grid-template-columns: 64px minmax(0, 1fr) 170px 110px auto; } .lv-ocup { display: block; } }
.lv .st { justify-self: start; }
.li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--linha); }
.li:first-child { border-top: 0; }
.li input[type=checkbox] { width: 18px; height: 18px; accent-color: #fff; margin: 0; }
.li strong { font-weight: 500; font-size: 0.9062rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li .sub2 { color: var(--g6); font-size: 0.7812rem; display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; }
.li .sub2 q { color: var(--g7); font-style: italic; quotes: "“" "”"; }
.li-dir { display: flex; align-items: center; gap: 10px; }
.li-vaga { display: none; }
@media (min-width: 56.25em) { .li { grid-template-columns: 22px minmax(0, 1.3fr) minmax(0, 1fr) 90px auto; } .li-vaga { display: block; font-size: 0.8438rem; color: var(--g8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .li-vaga small { display: block; color: var(--g6); font-size: 0.75rem; } }
.li-data { color: var(--g6); font-size: 0.7812rem; display: none; }
@media (min-width: 56.25em) { .li-data { display: block; } }
.sel-st { appearance: none; -webkit-appearance: none; min-height: 32px; border-radius: 999px; padding: 0 28px 0 12px; font-size: 0.7812rem; font-weight: 500; border: 1px solid var(--linha-forte); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/11px; cursor: pointer; }
.sel-st option { background: #111; color: #fff; }
.sel-st.st-confirmada, .sel-st.st-concluida { background-color: #fff; color: #000; border-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.sel-st.st-cancelada, .sel-st.st-ausente { color: var(--g6); border-style: dashed; }
.massa { position: fixed; z-index: 70; left: 50%; bottom: calc(16px + var(--seg-b)); transform: translateX(-50%); width: min(760px, calc(100% - 24px)); background: #fff; color: #000; border-radius: 18px; padding: 10px 10px 10px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; box-shadow: 0 30px 60px rgba(0,0,0,.6); animation: subirBarra .4s var(--mola) both; }
.massa b { font-weight: 500; margin-right: auto; font-size: 0.9062rem; }
.massa .botao { --bf: #000; --bt: #fff; }
.massa .botao-sec { color: #000; border-color: rgba(0,0,0,.2); }
.editor { display: grid; gap: 22px; }
@media (min-width: 75em) { .editor { grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; } }
.editor fieldset { border: 1px solid var(--linha); border-radius: var(--r-g); padding: 20px; margin: 0 0 16px; display: grid; gap: 14px; background: var(--g1); min-width: 0; }
.editor legend { padding: 0 8px; margin-left: -8px; font: 500 0.9375rem/1 var(--corpo); }
.previa { position: sticky; top: calc(var(--topo-h) + 24px); align-self: start; display: grid; gap: 12px; }
.previa .olho { margin-bottom: 4px; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.galeria label { position: relative; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; cursor: pointer; border: 2px solid transparent; background: var(--g3); display: grid; place-items: center; font-size: 0.6875rem; color: var(--g6); text-align: center; padding: 0; }
.galeria img { width: 100%; height: 100%; object-fit: cover; }
.galeria input { position: absolute; opacity: 0; }
.galeria label:has(input:checked) { border-color: #fff; }
.galeria label:has(input:checked)::after { content: ""; position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/11px no-repeat; }
.barra-salvar { position: sticky; bottom: 0; z-index: 10; display: flex; gap: 10px; justify-content: flex-end; padding: 14px 0 calc(14px + var(--seg-b)); background: linear-gradient(180deg, transparent, #000 30%); }
.ongs-csr { display: grid; gap: 12px; }
@media (min-width: 56.25em) { .ongs-csr { grid-template-columns: repeat(3, 1fr); } }
.ong-csr { border-radius: var(--r-g); background: var(--g1); border: 1px solid var(--linha); padding: 18px; display: grid; gap: 14px; }
.ong-csr-t { display: flex; gap: 14px; align-items: center; }
.ong-csr-t strong { font-size: 1.062rem; font-weight: 500; display: block; }
.ong-csr-t small { color: var(--g6); }
.ong-csr .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ong-csr .nums div { background: var(--g2); border-radius: 12px; padding: 10px; }
.ong-csr .nums b { display: block; font: 300 1.5rem/1 var(--display); }
.ong-csr .nums span { color: var(--g6); font-size: 0.7188rem; }
.demo-faixa { display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 0.75rem; color: var(--g6); padding: 8px var(--margem); border-bottom: 1px solid var(--linha); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rv { opacity: 1; transform: none; }
}

/* ===== mosaico de fotos do herói (substitui a constelação) ===== */
.mosaico { position: absolute; z-index: -2; top: 0; bottom: 0; right: 0; width: 54%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 var(--margem) 0 0; overflow: hidden; transform: rotate(-4deg) scale(1.18); transform-origin: 70% 50%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%), linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent 0%, #000 30%); }
.mosaico-col { display: grid; gap: 14px; align-content: start; animation: colunar var(--dur, 60s) linear infinite; will-change: transform; }
.mosaico-col:nth-child(2) { --dur: 76s; animation-direction: reverse; margin-top: -120px; }
.mosaico-col:nth-child(3) { --dur: 66s; margin-top: -60px; }
.mosaico figure { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4/5; background: var(--g2); position: relative; }
.mosaico figure:nth-child(3n) { aspect-ratio: 1; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.mosaico figcaption { position: absolute; left: 10px; bottom: 10px; right: 10px; font-size: 0.6875rem; color: rgba(255,255,255,.85); display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.mosaico figcaption .logo-ong { width: 26px; height: 26px; border-radius: 8px; padding: 3px; }
@keyframes colunar { to { transform: translateY(-50%); } }
.mosaico:hover .mosaico-col { animation-play-state: paused; }
.heroi::after { background: linear-gradient(90deg, #000 0%, #000 42%, rgba(0,0,0,.6) 56%, rgba(0,0,0,0) 72%), linear-gradient(180deg, rgba(0,0,0,.6), transparent 22%, transparent 78%, #000); }

/* faixa de fotos no app (mobile) */
.vitrine { position: relative; margin-top: 16px; border-radius: var(--r-g); overflow: hidden; height: 190px; background: var(--g1); border: 1px solid var(--linha); isolation: isolate; }
.vitrine-trilho { position: absolute; inset: 0; display: flex; gap: 8px; padding: 8px; width: max-content; animation: deslizar 48s linear infinite; }
.vitrine-trilho img { height: 100%; width: auto; aspect-ratio: 3/4; object-fit: cover; border-radius: 14px; opacity: .7; }
.vitrine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1) 30%, rgba(0,0,0,.88)); z-index: 1; }
.vitrine-info { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.vitrine-info b { font: 300 2.5rem/.9 var(--display); letter-spacing: -0.03em; display: block; }
.vitrine-info span { font-size: 0.7812rem; color: var(--g8); }
@keyframes deslizar { to { transform: translateX(-50%); } }
.contagem-ctl { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; min-width: 0; }
.contagem-ctl label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.contagem-ctl input { accent-color: #fff; }
.barra-salvar { flex-wrap: wrap; }
@media (max-width: 34.94em) { .barra-salvar .botao { flex: 1 1 100%; } .csr-cab .acoes { width: 100%; } .csr-cab .acoes .botao { flex: 1; } }
.editor fieldset .duas > .campo { min-width: 0; }

/* =====================================================================
   ESCALA À PROVA DE QUEBRA
   Texto em rem (segue a fonte do sistema/navegador), breakpoints em em
   (com fonte maior o layout passa para a versão compacta), alturas
   mínimas no lugar de fixas, grades auto-fit e números que cabem no card.
   ===================================================================== */
body { overflow-wrap: break-word; }
h1, h2, h3, h4, .cartao h3, .det h1, .ong-cab h1, .cert-nome { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 8 4 3; }
p, li, dd, blockquote, label, legend { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
a, button, span, strong, small { min-width: 0; }
/* URLs, e-mails e códigos: podem quebrar em qualquer ponto sem hífen */
.li .sub2 span, .dados div, .ficha-l div, .det-fatos span, .credito, .passe-base b { overflow-wrap: anywhere; -webkit-hyphens: none; hyphens: none; }

/* botões: crescem em altura e quebram linha em vez de vazar */
.botao { white-space: normal; text-align: center; line-height: 1.2; padding-block: .6em; min-height: 3.25rem; text-wrap: balance; }
.botao-p { min-height: 2.375rem; padding-block: .45em; }
.botao-m { min-height: 2.75rem; }
.ficha, .selo, .etq, .st { white-space: nowrap; }
.ficha { padding-block: .35em; line-height: 1.2; }

/* números: nunca quebram; o tamanho acompanha a largura do próprio card (container query) */
.num, .kpi b, .numero b, .anel b, .anel-h b, .ong-nums b, .vitrine-info b, .ao-vivo-info b, .ong-csr .nums b, .passe-cod, .pct, .ocup b, .bh-t b, .prox em, .ranking b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi, .numero, .ong-nums > div, .ong-csr .nums > div, .vitrine-info > div { container-type: inline-size; min-width: 0; }
.kpi b { font-size: clamp(1.4rem, 26cqi, 2.25rem); }
.numero b { font-size: clamp(1.75rem, 34cqi, 5.5rem); }
@media (min-width: 60em) { .numero b { font-size: clamp(2rem, 30cqi, 5.5rem); } }
.ong-nums b { font-size: clamp(1.25rem, 30cqi, 2.125rem); }
.ong-csr .nums b { font-size: clamp(1.1rem, 30cqi, 1.5rem); }
.vitrine-info b { font-size: clamp(1.5rem, 40cqi, 2.5rem); }
.anel-h { width: 11rem; height: 11rem; container-type: inline-size; }
.anel-h b { font-size: clamp(1.75rem, 30cqi, 3.375rem); }

/* grades que ganham ou perdem colunas conforme o texto cresce (rem), nunca espremem */
.grade { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
@media (min-width: 67.5em) { .grade { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); } }
.kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.numeros { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
@media (min-width: 60em) { .numeros { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } }
.opcoes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.ong-nums { grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr)); }
.paineis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.det-fatos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.duas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
@media (min-width: 60em) { .trilho { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); } .trilho-p { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); } }
.trilho { grid-auto-columns: min(84%, 21.25rem); }
.trilho-p { grid-auto-columns: min(46%, 11rem); }

/* linhas de lista: colunas de texto podem encolher, ícones não */
.linha-v { grid-template-columns: 4.75rem minmax(0, 1fr) auto; }
.linha-v .mini { width: 4.75rem; height: 4.75rem; }
.lv { grid-template-columns: 4rem minmax(0, 1fr) auto; }
@media (min-width: 56.25em) { .lv { grid-template-columns: 4rem minmax(0, 1fr) minmax(7rem, 10.5rem) auto auto; } .lv-ocup { width: auto; } }
.li-dir, .lv-acoes { flex-wrap: wrap; justify-content: flex-end; }

/* abas do app: rótulo nunca empurra os vizinhos */
.abas a { padding: .35rem .1rem; }
.abas a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* topo: com texto grande o menu do desktop não espreme os logos */
.topo-in { flex-wrap: nowrap; }
.topo-nav { min-width: 0; overflow: hidden; }
.topo-nav a { white-space: nowrap; }

/* cabeçalhos de bloco e barras: quebram linha em vez de sobrepor */
.bloco-cab, .csr-cab, .ferr, .contagem, .cta-barra, .match-nav, .heroi-acoes, .minha-acoes, .celebra-acoes { flex-wrap: wrap; }
.bloco-cab h2 { min-width: 0; }
.cta-barra-info { flex: 1 1 8rem; }
.cta-barra-info b { white-space: normal; }
.cta-barra .botao { flex: 1 1 9rem; }

/* passe e campos */
.passe-base { grid-template-columns: minmax(0, 1fr) auto; }
.campo input:not([type=checkbox]):not([type=radio]), .campo select, .campo textarea { min-height: 3.125rem; }

/* itens flex com container query precisam de largura própria (senão colapsam para 0) */
.vitrine-info > div { flex: 1 1 0; }
.grupo-res, .bh-t b, .prox em, .ranking b, .ocup b, .ocup > span, .cta-barra .botao, .ficha small { flex: none; }
.ocup > span { white-space: nowrap; }
/* números: tamanho 100% definido pela largura do card (cabem até ~5 caracteres, ex. "1.626") */
.kpi b { font-size: min(2.25rem, 32cqi); }
.numero b { font-size: min(5.5rem, 34cqi); }
.ong-nums b { font-size: min(2.125rem, 32cqi); }
.ong-csr .nums b { font-size: min(1.5rem, 32cqi); }
.vitrine-info b { font-size: min(2.5rem, 34cqi); }
.anel-h b { font-size: min(3.375rem, 30cqi); }
/* selos da capa: quebram de linha e nunca passam da largura do card */
.capa-topo { flex-wrap: wrap; }
.selo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* vitrine do app: altura acompanha o texto; fotos ficam no fundo */
.vitrine { height: auto; min-height: 11.875rem; display: flex; align-items: flex-end; }
.vitrine-info { position: relative; left: auto; right: auto; bottom: auto; width: 100%; padding: 4.5rem 16px 14px; }
/* botão de idioma e logos não encolhem */
.lingua { flex: none; white-space: nowrap; }
.logo-tcs, .logo-tata, .topo-voltar { flex: none; }
/* linha da ONG e etiquetas longas podem quebrar */
.det-ong { flex-wrap: wrap; }
.det-ong span, .capa-base > span:not(.logo-ong) { min-width: 0; overflow-wrap: anywhere; }
.etq { white-space: normal; max-width: 100%; line-height: 1.3; }
.det { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62.5em) { .det { grid-template-columns: minmax(0, 1fr) minmax(18rem, 23.75rem); } }
/* filhos de flex/grid podem encolher abaixo do tamanho do texto (evita o "min-width:auto" que estoura) */
.csr-cab > *, .bloco-cab > *, .pag-cab > *, .barras > *, .bh > *, .bh-t > *, .form > *, .editor > *, .editor fieldset > *, .campo, .paineis > *, .grupo-cab > *, .ferr > *, .li > *, .lv > *, .minha > *, .ong-csr-t > * { min-width: 0; }
.abas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.editor { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 75em) { .editor { grid-template-columns: minmax(0, 1fr) minmax(16rem, 22.5rem); } }
.bh-t span { display: block; }
.bh-t .logo-mini { display: inline-block; vertical-align: -5px; margin-right: 8px; }
.ferr-dir { white-space: normal; flex-wrap: wrap; margin-left: 0; }
@media (min-width: 62.5em) { .ferr-dir { margin-left: auto; } }
.chave { flex-wrap: nowrap; }
.chave > input { flex: none; }
/* último recurso para palavras maiores que a tela (ex.: "Organizações" em fonte 200% num iPhone SE) */
h1, h2, .csr-cab h1 { overflow-wrap: anywhere; }
@supports (hyphens: auto) { h1, h2 { overflow-wrap: break-word; } }
.select-mini { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.contagem-ctl > * { min-width: 0; max-width: 100%; }
/* campos nativos de data/hora têm largura intrínseca: forçar a caber */
.campo input[type=datetime-local], .campo input[type=date], .campo input[type=time] { display: block; min-width: 0; max-width: 100%; width: 100%; overflow: hidden; }
.campo input::-webkit-datetime-edit { min-width: 0; overflow: hidden; }
/* fonte grande em tela estreita (menos de 19em de largura útil): abas só com ícone, como no iOS */
@media (max-width: 19em) { .abas a span { display: none; } .abas a svg { width: 28px; height: 28px; } }
.kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }

/* =====================================================================
   MANIFESTO · o bem dá cor
   Estado inicial: P&B da marca. Depois do gesto (segurar), a cor se
   espalha em onda a partir do toque. A estrutura continua preta e branca
   (logos TCS/Tata, tipografia, fundo): "ainda estou aqui".
   ===================================================================== */
:root {
  --aurora: linear-gradient(100deg, #ff8a3d 0%, #ff4f81 32%, #b05cff 64%, #3fa9ff 100%);
  --quente: #ff5f7e;
}
img.f { filter: grayscale(1) contrast(1.06); transition: filter 1.6s var(--suave-in), transform 1.4s var(--mola), opacity .6s; }
html.cor img.f { filter: none; }
html.vt-cor img.f, html.vt-pb img.f { transition: none; }

/* acentos coloridos (só onde já havia destaque) */
html.cor .rot > b { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.cor .ocup-barra i, html.cor .bh-tr i, html.cor .progresso i::after { background: var(--aurora); }
html.cor .anel .vl, html.cor .anel-h .vl { stroke: var(--quente); }
html.cor .app-ola .ponto, html.cor .letreiro span::before, html.cor .ao-vivo-selo::before { background: var(--aurora); }
html.cor .claro .numero b { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.cor .pct { background: var(--aurora); color: #fff; }
html.cor .check circle, html.cor .check path { stroke: var(--quente); }
html.cor .opcao[aria-pressed="true"]::after { background-color: var(--quente); border-color: var(--quente); }
html.cor .abas-centro i { background: var(--aurora); box-shadow: 0 8px 28px rgba(255, 95, 126, .35); }
html.cor .abas-centro i svg { stroke: #fff; }
html.cor .passe-corte { border-top-color: #ffb3c2; }
html.cor .grafico path[stroke="#fff"] { stroke: var(--quente); }

/* luz ambiente no herói depois da cor */
.heroi::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 2.4s var(--suave-in);
  background: radial-gradient(40% 50% at 18% 70%, rgba(255, 110, 80, .22), transparent 70%), radial-gradient(35% 45% at 42% 20%, rgba(176, 92, 255, .18), transparent 70%); animation: deriva 26s ease-in-out infinite alternate; }
html.cor .heroi::before { opacity: 1; }
@keyframes deriva { to { transform: translate(4%, -3%) scale(1.08); } }

/* a onda: a página nova (colorida) é revelada em círculo a partir do toque */
html.vt-cor::view-transition-old(root) { animation: none; }
html.vt-cor::view-transition-new(root) { animation: onda 1.8s cubic-bezier(.7, 0, .12, 1) both; }
html.vt-pb::view-transition-new(root) { animation: none; }
html.vt-pb::view-transition-old(root) { z-index: 2; animation: onda-volta 1.3s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes onda { from { clip-path: circle(0px at var(--vx, 50%) var(--vy, 50%)); filter: saturate(2.2) brightness(1.15); } 60% { filter: saturate(1.4); } to { clip-path: circle(var(--vr, 150vmax) at var(--vx, 50%) var(--vy, 50%)); filter: none; } }
@keyframes onda-volta { from { clip-path: circle(var(--vr, 150vmax) at var(--vx, 50%) var(--vy, 50%)); } to { clip-path: circle(0px at var(--vx, 50%) var(--vy, 50%)); } }

/* controle "segure para ver" */
.manifesto { display: flex; align-items: center; gap: 16px; margin-top: 34px; max-width: 34rem; }
.manifesto-txt { min-width: 0; }
.manifesto-frase { font: 300 1.375rem/1.2 var(--display); letter-spacing: -0.01em; }
.manifesto-dica { color: var(--suave); font-size: .875rem; margin-top: 4px; transition: opacity .4s; }
.manifesto-depois { display: none; }
html.cor .manifesto-antes { display: none; }
html.cor .manifesto-depois { display: block; animation: aparecerTexto 1.2s var(--mola) .9s both; }
@keyframes aparecerTexto { from { opacity: 0; transform: translateY(8px); filter: blur(6px); } }
.segurar { position: relative; flex: none; width: 4.25rem; height: 4.25rem; border-radius: 50%; display: grid; place-items: center; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.segurar svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.segurar circle { fill: none; stroke-width: 2; }
.segurar .tr { stroke: var(--linha-forte); }
.segurar .vl { stroke: #fff; stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: 201; transition: stroke-dashoffset .45s var(--suave-in); }
.segurar.segurando .vl { stroke-dashoffset: 0; transition: stroke-dashoffset 1.25s linear; }
.segurar i { width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #fff; transition: transform 1.25s cubic-bezier(.3, 0, .3, 1), background .6s; box-shadow: 0 0 0 0 rgba(255,255,255,.4); animation: chamar 2.4s ease-out infinite; }
.segurar.segurando i { transform: scale(2.4); animation: none; }
@keyframes chamar { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.45); } 70%, 100% { box-shadow: 0 0 0 18px rgba(255,255,255,0); } }
.segurar:active { transform: scale(.97); }
html.cor .segurar i { background: var(--aurora); transform: scale(2.6); animation: none; }
html.cor .segurar .vl { stroke: var(--quente); stroke-dashoffset: 0; }
html.cor .segurar { pointer-events: none; }
.manifesto-app { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-g); background: var(--g2); border: 1px solid var(--linha); }
.manifesto-app .manifesto-frase { font-size: 1.125rem; }
.manifesto-app .segurar { width: 3.75rem; height: 3.75rem; }
@media (prefers-reduced-motion: reduce) { .segurar i { animation: none; } .heroi::before { animation: none; } }
/* borda da onda esfumada (a cor "se espalha" em vez de recortar) */
@property --onda { syntax: '<length>'; inherits: false; initial-value: 0px; }
html.vt-cor::view-transition-new(root) {
  -webkit-mask-image: radial-gradient(circle at var(--vx, 50%) var(--vy, 50%), #000 calc(var(--onda) - 22vmax), transparent var(--onda));
  mask-image: radial-gradient(circle at var(--vx, 50%) var(--vy, 50%), #000 calc(var(--onda) - 22vmax), transparent var(--onda));
  animation: onda-luz 2.1s cubic-bezier(.65, 0, .2, 1) both;
}
@keyframes onda-luz { from { --onda: 0px; filter: saturate(2) brightness(1.12); } 70% { filter: saturate(1.25); } to { --onda: calc(var(--vr, 150vmax) + 24vmax); filter: none; } }
html.vt-pb::view-transition-old(root) {
  -webkit-mask-image: radial-gradient(circle at var(--vx, 50%) var(--vy, 50%), #000 calc(var(--onda) - 18vmax), transparent var(--onda));
  mask-image: radial-gradient(circle at var(--vx, 50%) var(--vy, 50%), #000 calc(var(--onda) - 18vmax), transparent var(--onda));
  animation: onda-luz-volta 1.5s cubic-bezier(.6, 0, .25, 1) both;
}
@keyframes onda-luz-volta { from { --onda: calc(var(--vr, 150vmax) + 20vmax); } to { --onda: 0px; } }

/* ===== mosaico: não para no hover; legendas sempre legíveis ===== */
.mosaico:hover .mosaico-col { animation-play-state: running; }
.mosaico figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.75)); pointer-events: none; }
.mosaico figcaption { z-index: 2; left: 10px; right: auto; max-width: calc(100% - 20px); padding: 5px 10px 5px 5px; border-radius: 999px; background: rgba(0,0,0,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: .75rem; text-shadow: none; }
.mosaico figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capa-base > span:not(.logo-ong) { background: rgba(0,0,0,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); text-shadow: none; }

/* =====================================================================
   ABERTURA · "Veja o que acontece quando você faz o bem."
   ===================================================================== */
.abertura { position: fixed; inset: 0; z-index: 200; background: #000; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: crosshair; isolation: isolate; }
.abertura.sai { animation: aberturaSai 1.3s cubic-bezier(.7, 0, .2, 1) forwards; pointer-events: none; }
@keyframes aberturaSai { to { opacity: 0; transform: scale(1.08); filter: blur(10px); } }
.ab-camada { position: absolute; inset: -12%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; transform: rotate(-6deg); }
@media (max-width: 48em) { .ab-camada { grid-template-columns: repeat(3, 1fr); inset: -20% -30%; gap: 10px; } }
.ab-col { display: grid; gap: 14px; align-content: start; animation: abDeriva 70s linear infinite; }
.ab-col:nth-child(2n) { animation-direction: reverse; margin-top: -30%; }
.ab-col:nth-child(3n) { animation-duration: 90s; }
@keyframes abDeriva { to { transform: translateY(-50%); } }
.ab-col img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 18px; }
.ab-pb { opacity: 0; animation: abAcende 2.2s var(--suave-in) .5s forwards; }
.ab-pb img { filter: grayscale(1) contrast(1.05) brightness(.62); }
@keyframes abAcende { to { opacity: 1; } }
.ab-cor { -webkit-mask-image: radial-gradient(circle at var(--ax, 50%) var(--ay, 50%), #000 calc(var(--ar, 0px) * .55), transparent var(--ar, 0px)); mask-image: radial-gradient(circle at var(--ax, 50%) var(--ay, 50%), #000 calc(var(--ar, 0px) * .55), transparent var(--ar, 0px)); }
.ab-cor img { filter: saturate(1.35) brightness(.95); }
.ab-veu { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 55%, rgba(0,0,0,.15), rgba(0,0,0,.78) 70%, #000), linear-gradient(180deg, rgba(0,0,0,.65), transparent 30%, transparent 60%, rgba(0,0,0,.85)); }
.ab-brilho { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(circle at var(--ax, 50%) var(--ay, 50%), rgba(255,255,255,.9), rgba(255,140,120,.5) 12%, rgba(176,92,255,.25) 28%, transparent 55%); }
.abertura.explode .ab-brilho { animation: abBrilho 1.6s ease-out forwards; }
@keyframes abBrilho { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.abertura.explode .ab-camada { animation: abPulso 1.8s cubic-bezier(.2, .9, .2, 1); }
@keyframes abPulso { 0% { transform: rotate(-6deg) scale(1); } 18% { transform: rotate(-6deg) scale(1.045); } 100% { transform: rotate(-6deg) scale(1); } }
.ab-particulas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ab-topo { position: absolute; z-index: 3; top: 0; left: 0; right: 0; padding: calc(18px + var(--seg-t)) var(--margem) 0; display: flex; justify-content: space-between; align-items: center; opacity: 0; animation: abAcende 1s ease .1s forwards; }
.ab-topo .t { height: 42px; width: auto; min-width: 108px; } .ab-topo .a { height: 52.5px; width: auto; }
@media (max-width: 48em) { .ab-topo .t { height: 39px; min-width: 100px; } .ab-topo .a { height: 48.75px; } }
.ab-texto { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; transform: translateY(-55%); padding: 0 var(--margem); text-align: center; pointer-events: none; }
.ab-frase { font: 300 clamp(2.25rem, 7.4vw, 6.75rem)/1.02 var(--display); letter-spacing: -0.035em; max-width: 14ch; margin: 0 auto; text-wrap: balance; text-shadow: 0 4px 40px rgba(0,0,0,.6); }
.ab-frase .p { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(12px); animation: abPalavra 1.1s var(--mola) forwards; animation-delay: calc(var(--i) * 95ms + var(--base, 900ms)); }
@keyframes abPalavra { to { opacity: 1; transform: none; filter: none; } }
.ab-frase .p.sai { animation: abPalavraSai .7s cubic-bezier(.6, 0, .4, 1) forwards; animation-delay: calc(var(--i) * 35ms); }
@keyframes abPalavraSai { from { opacity: 1; transform: none; filter: none; } to { opacity: 0; transform: translateY(-.5em); filter: blur(14px); } }
.ab-frase b { font-weight: 500; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.ab-sub { margin-top: 22px; color: rgba(255,255,255,.86); font-size: clamp(1.05rem, 2.2vw, 1.45rem); font-weight: 300; opacity: 0; transform: translateY(10px); transition: opacity 1s, transform 1s var(--mola); }
.ab-sub.vis { opacity: 1; transform: none; }
.ab-dica { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(44px + var(--seg-b)); display: flex; flex-direction: column; align-items: center; gap: 14px; color: rgba(255,255,255,.8); font-size: .9375rem; letter-spacing: .02em; opacity: 0; transition: opacity .8s; pointer-events: none; text-align: center; padding: 0 var(--margem); }
.ab-dica.vis { opacity: 1; }
.ab-dica i { width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); position: relative; }
.ab-dica i::before { content: ""; position: absolute; inset: 17px; border-radius: 50%; background: #fff; }
.ab-dica i::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid #fff; animation: abOnda 2.2s ease-out infinite; }
@keyframes abOnda { from { transform: scale(1); opacity: .8; } to { transform: scale(2.2); opacity: 0; } }
.ab-anel { position: absolute; z-index: 4; width: 112px; height: 112px; margin: -56px 0 0 -56px; left: var(--ax); top: var(--ay); pointer-events: none; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .4s var(--mola); }
.abertura.segurando .ab-anel { opacity: 1; transform: none; }
.ab-anel svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ab-anel circle { fill: none; stroke-width: 2.5; }
.ab-anel .tr { stroke: rgba(255,255,255,.25); }
.ab-anel .vl { stroke: #fff; stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: calc(339.3px * (1 - var(--prog, 0))); filter: drop-shadow(0 0 8px rgba(255,255,255,.6)); }
.abertura.explode .ab-anel { opacity: 0; transform: scale(2.4); transition: opacity .8s, transform 1s var(--mola); }
.ab-pular { position: absolute; z-index: 5; right: var(--margem); bottom: calc(18px + var(--seg-b)); font-size: .8125rem; color: rgba(255,255,255,.45); padding: 8px 10px; }
.ab-pular:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .ab-col { animation: none; } }
/* abertura: texto sempre legível sobre qualquer foto */
.ab-texto::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(1100px, 130vw); height: 150%; transform: translate(-50%, -50%); z-index: -1; background: radial-gradient(closest-side, rgba(0,0,0,.72), rgba(0,0,0,.35) 60%, transparent); pointer-events: none; }
.ab-sub { text-shadow: 0 2px 18px rgba(0,0,0,.9); }
.ab-dica span { text-shadow: 0 2px 14px rgba(0,0,0,.9); }
@media (max-width: 48em) { .ab-frase { font-size: clamp(2.6rem, 11.5vw, 4rem); } }

/* ===== abertura: desempenho ===== */
.ab-camada, .ab-col { will-change: transform; }
.ab-col img { content-visibility: auto; }
.ab-cor img { filter: none; }                  /* sem filtro por foto na camada que é mascarada a cada quadro */
.ab-cor { will-change: transform, mask-image; }
.abertura.cheia .ab-cor { -webkit-mask-image: none; mask-image: none; }
.abertura.cheia .ab-pb { visibility: hidden; } /* depois da explosão a camada P&B não precisa mais ser desenhada */
.ab-brilho { mix-blend-mode: normal; background: radial-gradient(circle at var(--ax, 50%) var(--ay, 50%), rgba(255,255,255,.55), rgba(255,140,120,.28) 14%, rgba(176,92,255,.14) 30%, transparent 55%); will-change: opacity; }
.abertura.explode .ab-camada { animation: abPulso 1.6s cubic-bezier(.2, .9, .2, 1); }
html.sem-transicao img.f { transition: none !important; }

/* ===== dica: mostra o gesto (anel enchendo em loop) ===== */
.ab-dica { gap: 16px; font-size: 1.0625rem; font-weight: 500; color: #fff; }
.ab-dica .ab-demo { width: 64px; height: 64px; border: 0; position: relative; display: block; }
.ab-dica .ab-demo::before, .ab-dica .ab-demo::after { display: none; }
.ab-demo svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ab-demo circle { fill: none; stroke-width: 2; }
.ab-demo .tr { stroke: rgba(255,255,255,.3); }
.ab-demo .vl { stroke: #fff; stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: 176; animation: abDemoAnel 2.6s cubic-bezier(.5, 0, .5, 1) infinite; }
.ab-demo b { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; animation: abDemoDedo 2.6s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes abDemoAnel { 0%, 12% { stroke-dashoffset: 176; opacity: 1; } 70% { stroke-dashoffset: 0; opacity: 1; } 85%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes abDemoDedo { 0% { transform: scale(1); } 12% { transform: scale(.7); } 70% { transform: scale(.7); box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 85% { transform: scale(1.1); box-shadow: 0 0 0 22px rgba(255,255,255,0); } 100% { transform: scale(1); } }
.ab-dica.treme span { animation: abTreme .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes abTreme { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.abertura.explode .ab-demo, .abertura.cheia .ab-demo { display: none; }
@media (prefers-reduced-motion: reduce) { .ab-demo .vl, .ab-demo b { animation: none; stroke-dashoffset: 60; } }

/* ===== abertura v3: frente de cor com aro, zoom por tempo, saída em dados ===== */
/* máscara num invólucro sem transformação: o círculo nasce exatamente no dedo */
.ab-cor-env { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at var(--ax, 50%) var(--ay, 50%), #000 calc(var(--ar, 0px) - var(--pena, 60px)), transparent var(--ar, 0px));
  mask-image: radial-gradient(circle at var(--ax, 50%) var(--ay, 50%), #000 calc(var(--ar, 0px) - var(--pena, 60px)), transparent var(--ar, 0px)); will-change: mask-image; }
.ab-cor { -webkit-mask-image: none; mask-image: none; will-change: transform; }
.abertura.cheia .ab-cor-env { -webkit-mask-image: none; mask-image: none; }
.ab-camada, .abertura.explode .ab-camada { animation: none; transform: rotate(-6deg) scale(var(--zoom, 1)); }
.ab-pb { animation: abAcende 2.2s var(--suave-in) .5s forwards; }
.ab-particulas { z-index: 2; }
.ab-dados { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; }
.abertura.desfaz { background: transparent; pointer-events: none; cursor: default; }
.abertura.desfaz > :not(.ab-dados) { display: none; }

/* ===== início no celular: herói de cinema (continua a abertura) ===== */
.heroi-m { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: calc(100svh - var(--abas-h) - var(--seg-b)); margin-top: calc(-1 * var(--topo-h) - var(--seg-t)); padding-top: calc(var(--topo-h) + var(--seg-t) + 4rem); }
.hm-mosaico { position: absolute; z-index: -2; inset: -10% -45% 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; transform: rotate(-6deg); }
.hm-col { display: grid; gap: 10px; align-content: start; animation: colunar 64s linear infinite; will-change: transform; }
.hm-col:nth-child(2) { animation-duration: 80s; animation-direction: reverse; margin-top: -40%; }
.hm-col:nth-child(3) { animation-duration: 72s; margin-top: -18%; }
.hm-col img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 16px; opacity: .78; }
.heroi-m::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.1) 22%, rgba(0,0,0,.35) 42%, rgba(0,0,0,.9) 64%, #000 92%); }
.hm-in { padding-bottom: 1.75rem; }
.hm-titulo { font: 300 min(clamp(2.6rem, 12.5vw, 3.6rem), 14vw)/1 var(--display); letter-spacing: -0.035em; margin: .9rem 0 1rem; }
.hm-titulo .ln { display: block; overflow: hidden; padding-bottom: .05em; }
.hm-titulo .ln > span { display: inline-block; transform: translateY(105%); animation: subir 1.1s var(--mola) forwards; }
.hm-titulo .ln:nth-child(2) > span { animation-delay: .08s; } .hm-titulo .ln:nth-child(3) > span { animation-delay: .16s; }
.heroi-m .sub { color: rgba(255,255,255,.78); font-size: 1rem; max-width: 34ch; }
.hm-acoes { display: flex; gap: 10px; margin-top: 1.5rem; }
.hm-acoes .botao:first-child { flex: 1 1 auto; min-width: 0; }
.hm-busca { flex: none; width: 52px; padding: 0; }
.hm-busca svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.hm-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.16); }
.hm-nums > div { min-width: 0; container-type: inline-size; }
.hm-nums b { display: block; font: 300 clamp(1.5rem, 30cqi, 2.25rem)/1 var(--display); letter-spacing: -0.03em; }
.hm-nums span { display: block; margin-top: 4px; font-size: .8125rem; color: var(--g7); }
html.cor .heroi-m .rot > b { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) { .hm-col { animation: none; } }
.abertura.explode .ab-pb { animation: none; opacity: 1; }
/* topo sem borda (a borda de 1px aparecia como linha sobre o mosaico do herói); a divisória do estado rolado é uma sombra, sem mexer no layout */
.topo { border-bottom: 0; }
.topo.rolado { box-shadow: 0 1px 0 var(--linha); }
/* setas (chevron) sempre com tamanho próprio: sem isso o SVG ocupava a largura toda e espremia o texto vizinho */
svg.chev { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ong-mini .chev { color: var(--g6); }
.det-sec .etiquetas { gap: 8px; }
.det-sec .etq { font-size: .875rem; padding: 7px 14px; }

/* ===== mobile: espaços e rolagem ===== */
/* página da vaga: o espaço da barra "Participar" fica no fim da página (depois do rodapé), não entre o conteúdo e o rodapé */
@media (max-width: 62.44em) {
  .det-pag { padding-bottom: 0; }
  body.sem-abas:not(.csr-modo) { padding-bottom: calc(5.25rem + var(--seg-b)); }
}
@media (max-width: 59.94em) { .rodape { margin-top: 40px; } }
/* carrosséis: o dedo na vertical rola a página; o snap não "puxa" o gesto */
.trilho { scroll-snap-type: x proximity; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.trilho > * { scroll-snap-stop: normal; }
/* cartões: sem máscara (cada uma criava uma camada cara durante a rolagem) e sem "afundar" ao encostar o dedo para rolar */
.cartao { -webkit-mask-image: none; contain: layout paint; }
.cartao:active { transform: none; }
@media (hover: hover) and (pointer: fine) { .cartao:active { transform: scale(.985); } }
/* animações fora da tela ficam pausadas (o JS marca .fora) */
.heroi-m.fora .hm-col, .heroi.fora .mosaico-col, .fora .vitrine-trilho, .letreiro.fora .letreiro-in { animation-play-state: paused; }
/* topo da capa: selos à esquerda (quebram linha), % do Match à direita no mesmo fluxo: nunca se sobrepõem */
.capa-topo { flex-wrap: nowrap; }
.capa-topo .selos { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1 1 auto; align-items: flex-start; }
.capa-topo .selo { max-width: 100%; }
.capa-topo .pct { position: static; flex: none; margin-left: auto; min-width: 3.25rem; width: auto; height: auto; aspect-ratio: 1; padding: .35em; font-size: 1.0625rem; }

/* =====================================================================
   PESSOAS · avatares, insígnias, perfil, comunidade
   ===================================================================== */
/* avatar: ilustração em traço preto sobre disco claro; em cores, o disco ganha um tom da pessoa */
.av { --t: 2.5rem; position: relative; flex: none; width: var(--t); height: var(--t); border-radius: 50%; overflow: hidden; background: #e9e9e9; display: grid; place-items: center; isolation: isolate; }
.av i { font: 500 calc(var(--t) * .36)/1 var(--corpo); font-style: normal; color: #555; letter-spacing: .02em; }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateY(4%) scale(1.04); }
html.cor .av { background: hsl(var(--h) 72% 86%); }
.av-s { --t: 1.75rem; } .av-m { --t: 2.75rem; } .av-l { --t: 4.5rem; } .av-xl { --t: 7rem; }
.avs { display: inline-flex; padding-left: 9px; }
.avs .av { margin-left: -9px; box-shadow: 0 0 0 2px var(--fundo, #000); --t: 2.125rem; }
.rostos .avs { flex: none; }

/* insígnias: imagem (quando enviada) ou selo SVG provisório */
.ins { --s: 4.5rem; position: relative; flex: none; width: var(--s); height: var(--s); display: grid; place-items: center; }
.ins img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
.ins svg { width: 100%; height: 100%; overflow: visible; }
.ins-fundo > * { fill: #1b1b1b; }
.ins-aro > * { fill: none; stroke: #f2f2f2; stroke-width: 2.2; }
.ins-ic { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html.cor .ins-aro > * { stroke: var(--ins); }
html.cor .ins-fundo > * { fill: color-mix(in srgb, var(--ins) 22%, #111); }
html.cor .ins-ic { stroke: var(--ins); }
html.cor .ins:not(.ins-off) svg { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--ins) 45%, transparent)); }
.ins-off { opacity: .32; }
.ins-off .ins-aro > * { stroke-dasharray: 4 4; }
.ins-off img { filter: grayscale(1) brightness(.6); }
html:not(.cor) .ins img { filter: grayscale(1) contrast(1.05) drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
.ins-g { --s: 6rem; } .ins-xl { --s: 9rem; margin: 0 auto 6px; }
.ins-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.25rem), 1fr)); gap: 10px; }
.ins-grade-g { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); }
.ins-item { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 8px 14px; border-radius: var(--r-g); background: var(--cartao); border: 1px solid var(--linha); text-align: center; transition: transform .35s var(--mola), border-color .25s; }
.ins-item b { font-weight: 500; font-size: .8125rem; line-height: 1.25; overflow-wrap: anywhere; }
.ins-item.off b { color: var(--g6); }
.ins-item small { font-size: .6875rem; color: var(--g6); text-transform: uppercase; letter-spacing: .08em; }
.ins-item small.novo { color: #000; background: #fff; padding: 2px 8px; border-radius: 999px; }
html.cor .ins-item small.novo { background: var(--aurora); color: #fff; }
@media (hover: hover) { .ins-item:hover { transform: translateY(-3px); border-color: var(--linha-forte); } }
.ins-det { text-align: center; display: grid; gap: 8px; padding: 0 0 12px; }
.ins-det h2 { font-size: 1.5rem; }
.ins-det p { color: var(--suave); }
.ins-det .barra-xp { max-width: 260px; margin: 6px auto 0; width: 100%; }

/* perfil */
.perfil { padding-top: 22px; }
.perfil-cab { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.perfil-av { position: relative; flex: none; width: 8.5rem; height: 8.5rem; display: grid; place-items: center; }
.perfil-av svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.perfil-av circle { fill: none; stroke-width: 3; }
.perfil-av .tr { stroke: var(--g3); }
.perfil-av .vl { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset 1.6s var(--mola); }
html.cor .perfil-av .vl { stroke: var(--quente); }
.perfil-nv { position: absolute; right: .25rem; bottom: .25rem; min-width: 2.125rem; height: 2.125rem; padding: 0 .4em; border-radius: 999px; background: #fff; color: #000; display: grid; place-items: center; font: 500 1rem/1 var(--display); box-shadow: 0 0 0 3px var(--fundo, #000); }
html.cor .perfil-nv { background: var(--aurora); color: #fff; }
.perfil-id { flex: 1 1 16rem; min-width: 0; }
.perfil-id h1 { font: 300 clamp(2rem, 7vw, 3.25rem)/1.05 var(--display); letter-spacing: -0.03em; margin: 8px 0 6px; overflow-wrap: anywhere; }
.perfil-meta { color: var(--g6); font-size: .875rem; }
.perfil-bio { margin-top: 10px; font: 300 1.125rem/1.4 var(--display); }
.perfil-nota { margin-top: 8px; font-size: .8125rem; color: var(--g6); }
.perfil-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); gap: 10px; margin-top: 24px; }
.perfil-nums > div { min-width: 0; container-type: inline-size; padding: 14px 16px; border-radius: var(--r); background: var(--cartao); border: 1px solid var(--linha); }
.perfil-nums b { display: block; font: 300 clamp(1.5rem, 32cqi, 2.25rem)/1 var(--display); letter-spacing: -0.02em; }
.perfil-nums span { display: block; margin-top: 4px; font-size: .75rem; color: var(--g6); }
.perfil-xp { display: grid; gap: 8px; margin-top: 16px; }
.perfil-xp span { font-size: .8125rem; color: var(--g7); }
.barra-xp { height: 6px; border-radius: 6px; background: var(--g3); overflow: hidden; }
.barra-xp i { display: block; height: 100%; border-radius: 6px; background: #fff; transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--mola); }
.barra-xp i.ok { transform: scaleX(var(--p, 0)); }
html.cor .barra-xp i { background: var(--aurora); }
.bloco-cab .cont { font-size: .8125rem; color: var(--g6); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vazio-txt { color: var(--g6); font-size: .9375rem; max-width: 46ch; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--g2); border: 1px solid var(--linha); margin-top: 26px; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg a { flex: 1 0 auto; text-align: center; padding: .55em 1em; border-radius: 999px; color: var(--g7); font-size: .9375rem; white-space: nowrap; transition: background .25s, color .25s; }
.seg a.on { background: #fff; color: #000; }
.seg small { font-size: .75rem; opacity: .7; }
.linha-tempo { display: grid; gap: 10px; }
.lt-item { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 10px; border-radius: var(--r); background: var(--cartao); border: 1px solid var(--linha); }
.lt-item .mini { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; }
.lt-item .mini img, .lt-item .mini svg { width: 100%; height: 100%; object-fit: cover; }
.lt-item h3 { font: 500 .9375rem/1.3 var(--corpo); letter-spacing: 0; }
.lt-item p { color: var(--g6); font-size: .8125rem; margin-top: 2px; }
.etq-med { display: inline-block; margin-top: 6px; }
html.cor .etq-med { border-color: transparent; background: color-mix(in srgb, #ff4f81 22%, transparent); color: #ffd3de; }
.dep-st { font-size: .75rem; color: var(--g6); margin-top: 4px; }
.chave-t { display: grid; gap: 2px; min-width: 0; }
.chave-t small { color: var(--g6); font-size: .8125rem; }
.av-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr)); gap: 8px; }
.av-op { display: grid; place-items: center; padding: 6px; border-radius: 16px; border: 1px solid var(--linha); transition: border-color .2s, background .2s; }
.av-op.on { border-color: #fff; background: var(--g2); }
.conta-pag { max-width: 640px; }
.conta-pag .form { margin-top: 22px; }

/* topo e abas com a pessoa logada */
.topo-eu { display: none; flex: none; border-radius: 50%; }
@media (min-width: 60em) { .topo-eu { display: block; } }
.topo-eu .av { box-shadow: 0 0 0 1px var(--linha-forte); --t: 2.25rem; }
.abas .av-aba { --t: 1.625rem; box-shadow: 0 0 0 1.5px currentColor; }

/* comunidade */
.podio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; max-width: 34rem; margin: 10px auto 0; }
.podio-i { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.podio-av { position: relative; }
.podio-av i { position: absolute; right: -4px; bottom: -4px; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; font: 500 .875rem/1 var(--display); font-style: normal; box-shadow: 0 0 0 3px var(--fundo, #000); }
.podio-i.p1 .av { --t: 5.5rem; }
.podio-i b { font-weight: 500; font-size: .9375rem; overflow-wrap: anywhere; }
.podio-i > span.num { font-size: .8125rem; color: var(--g6); }
.podio-base { width: 100%; border-radius: 14px 14px 0 0; background: linear-gradient(180deg, var(--g3), transparent); height: 3.5rem; margin-top: 6px; }
.podio-i.p1 .podio-base { height: 5.5rem; } .podio-i.p3 .podio-base { height: 2.5rem; }
html.cor .podio-i.p1 .podio-av i { background: #ffc94d; } html.cor .podio-i.p2 .podio-av i { background: #d9dde3; } html.cor .podio-i.p3 .podio-av i { background: #d9915a; }
.ranking-lista { display: grid; gap: 2px; }
.ranking-l { display: grid; grid-template-columns: 2rem auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; transition: background .2s; }
.ranking-l:hover { background: var(--g2); }
.ranking-l.eu { background: var(--g2); box-shadow: inset 0 0 0 1px var(--linha-forte); }
.ranking-l em { font-style: normal; color: var(--g6); font-variant-numeric: tabular-nums; text-align: right; font-size: .875rem; }
.rk-txt { min-width: 0; display: grid; }
.rk-txt b { font-weight: 500; font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-txt b small { font-weight: 400; color: var(--g6); }
.rk-txt span { font-size: .75rem; color: var(--g6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-pts { text-align: right; }
.rk-pts b { display: block; font: 300 1.25rem/1 var(--display); }
.rk-pts span { font-size: .6875rem; color: var(--g6); }

/* letreiro: foto + nome + o que aconteceu, também no celular */
.letreiro-in { gap: 28px; padding-left: 28px; }
.letreiro .lt { display: inline-flex; align-items: center; gap: 10px; color: var(--g7); font-size: .8438rem; flex: none; }
.letreiro .lt span { color: inherit; }
.letreiro .lt small { color: var(--g5); font-size: .75rem; }
.letreiro .lt-conq span, .letreiro .lt-medalha span { color: #fff; }
html.cor .letreiro .lt-medalha .av { box-shadow: 0 0 0 2px #ff4f81; }
html.cor .letreiro .lt-conq .av { box-shadow: 0 0 0 2px #b05cff; }
@media (max-width: 59.94em) { .letreiro { margin-top: 14px; padding: 10px 0; border-top: 1px solid var(--linha); } .letreiro-in { animation-duration: 90s; } }
.voz footer > a { flex: none; }
.letreiro .lt span::before, .letreiro .lt .av::before { display: none; }
.letreiro .lt .av { display: grid; gap: 0; }
.letreiro .lt .av i { font-size: .625rem; }
/* perfil: títulos de seção contidos, menos espaço vertical */
.perfil .bloco { padding-top: 2.5rem; }
.perfil .bloco-cab h2 { font-size: clamp(1.375rem, 3.2vw, 1.75rem); letter-spacing: -0.02em; }
.perfil-nums { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
/* iniciais só aparecem se a ilustração não carregar */
.av:has(img) i { visibility: hidden; }

/* painel CSR: depoimentos */
.deps-csr { display: grid; gap: 12px; }
.dep-csr { display: grid; gap: 12px; padding: 18px; border-radius: var(--r-g); background: var(--cartao); border: 1px solid var(--linha); min-width: 0; }
.dep-csr-t { display: flex; gap: 12px; align-items: center; min-width: 0; }
.dep-csr-t b { display: block; font-weight: 500; }
.dep-csr-t small { display: block; color: var(--g6); font-size: .8125rem; overflow-wrap: anywhere; }
.dep-csr blockquote { margin: 0; font: 300 1.125rem/1.45 var(--display); overflow-wrap: anywhere; }
/* à prova de escala: abas do perfil quebram linha, pódio encolhe com a tela, ranking quebra em vez de cortar */
.seg { flex-wrap: wrap; overflow: visible; border-radius: 1.6rem; }
.seg a { flex: 1 1 auto; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
.podio .av { --t: min(4.5rem, 21vw); }
.podio-i.p1 .av { --t: min(5.5rem, 25vw); }
.podio-av i { width: min(1.75rem, 8vw); height: min(1.75rem, 8vw); font-size: min(.875rem, 4vw); }
.rk-txt b, .rk-txt span { white-space: normal; overflow-wrap: anywhere; }
.ranking-l { grid-template-columns: auto auto minmax(0, 1fr) auto; }
@media (max-width: 22em) { .ranking-l { grid-template-columns: auto minmax(0, 1fr) auto; } .ranking-l > em { display: none; } }

/* barra de abas do celular: 13% mais alta (o "+" girado do Match não encosta nas bordas) e sem fresta embaixo */
:root { --abas-h: 4.125rem; }
.abas { bottom: -2px; padding-bottom: calc(var(--seg-b) + 2px); min-height: calc(var(--abas-h) + var(--seg-b) + 2px); }
/* barra "Participar" da vaga: com fonte grande, quebra linha em vez de vazar */
.cta-barra { flex-wrap: wrap; }
.cta-barra > .botao { flex: 1 1 auto; max-width: 100%; }
.cta-barra-info b { overflow-wrap: anywhere; }
/* rostos da vaga: avatares + texto quebram linha com fonte grande */
.rostos { flex-wrap: wrap; }
.rostos > span { min-width: 0; overflow-wrap: anywhere; }
/* carrosséis: só rolam na horizontal (antes o trilho rolava uns pixels na vertical e cortava o card) */
.trilho, .fichas, .seg { overflow-y: hidden; overscroll-behavior-y: auto; }
.trilho { padding-top: 10px; margin-top: -8px; padding-bottom: 14px; margin-bottom: -8px; }
/* números do herói do celular: sem a linha de 1px (lia como uma fresta) */
.hm-nums { border-top: 0; padding-top: 0; margin-top: 1.75rem; }

/* idioma com bandeira (redonda); em P&B a bandeira acompanha a marca, em cores ganha cor */
.bandeira { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.25); filter: grayscale(1) contrast(1.1); transition: filter .6s; }
html.cor .bandeira { filter: none; }
.lingua { padding: 0 12px 0 8px; gap: 8px; }
.menu button { display: flex; align-items: center; gap: 10px; }
.menu button .menu-t { flex: 1 1 auto; min-width: 0; text-align: left; }
.menu button small { margin-left: auto; }
/* Tata: discreta no rodapé (o topo fica só com a TCS) */
.rodape-tata { display: inline-flex; align-items: center; gap: 10px; }
.rodape-tata img { height: 1.75rem; width: auto; opacity: .7; flex: none; }
/* avatar com retrato real: preenche o círculo; P&B fora do modo cor */
.av img { transform: none; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .8s; }
html.cor .av img { filter: none; }
.av { background: var(--g3); }
.av i { color: var(--g7); }
html.cor .av { background: hsl(var(--h) 35% 30%); }

/* herói do celular: o mosaico (camada animada e girada) termina antes da borda e esmaece sozinho.
   Antes ele encostava no fim do herói e, no iPhone, o arredondamento de subpixel deixava 1px de foto aparecer acima das causas. */
.hm-mosaico { inset: -10% -45% 30% -45%; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.heroi-m { background: #000; }
.heroi-m::after { inset: -1px; }

/* =====================================================================
   MATCH · perfis de busca, questionário, revelação e baralho
   ===================================================================== */
.mt { padding-top: 22px; max-width: 46rem; }
.mt-t { font: 300 clamp(2rem, 7.5vw, 3.5rem)/1.04 var(--display); letter-spacing: -0.035em; margin: 10px 0 10px; text-wrap: balance; overflow-wrap: anywhere; }
.mt-d { color: var(--suave); font-size: 1rem; max-width: 44ch; }
/* progresso: segmentos; o atual "enche" */
.mt-prog { display: grid; grid-auto-flow: column; gap: 6px; margin-bottom: 22px; }
.mt-prog i { height: 4px; border-radius: 4px; background: var(--g3); overflow: hidden; position: relative; }
.mt-prog i.ok::after, .mt-prog i.agora::after { content: ""; position: absolute; inset: 0; background: #fff; border-radius: inherit; transform-origin: left; }
.mt-prog i.agora::after { animation: mtEnche .9s var(--mola) both; transform: scaleX(.5); }
@keyframes mtEnche { from { transform: scaleX(0); } }
html.cor .mt-prog i.ok::after, html.cor .mt-prog i.agora::after { background: var(--aurora); }
/* opções */
.mt-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 10px; margin-top: 26px; }
.mt-ops-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.mt-op { position: relative; display: flex; align-items: center; gap: 14px; min-height: 4.75rem; padding: 14px 16px; border-radius: 20px; background: var(--cartao); border: 1px solid var(--linha); text-align: left; min-width: 0;
  transition: background .3s var(--suave-in), color .3s, border-color .3s, transform .4s var(--mola); animation: mtEntra .6s var(--mola) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes mtEntra { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.mt-op:hover { border-color: var(--linha-forte); }
.mt-op-ic { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 14px; background: var(--g2); display: grid; place-items: center; transition: background .3s, transform .5s var(--mola); }
.mt-op-ic svg, .mt-ok svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mt-op-t { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.mt-op-t b { font-weight: 500; font-size: 1rem; overflow-wrap: anywhere; }
.mt-op-t small { color: var(--g6); font-size: .8125rem; overflow-wrap: anywhere; }
.mt-ok { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--linha-forte); transition: all .35s var(--mola); }
.mt-ok svg { width: 1rem; height: 1rem; stroke-width: 2.4; opacity: 0; transform: scale(.4); transition: all .35s var(--mola); }
.mt-op[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
.mt-op[aria-pressed="true"] .mt-op-t small { color: #555; }
.mt-op[aria-pressed="true"] .mt-op-ic { background: #000; color: #fff; transform: rotate(-6deg); }
.mt-op[aria-pressed="true"] .mt-ok { background: #000; border-color: #000; color: #fff; }
.mt-op[aria-pressed="true"] .mt-ok svg { opacity: 1; transform: none; }
html.cor .mt-op[aria-pressed="true"] { background: linear-gradient(#fff, #fff) padding-box, var(--aurora) border-box; border: 1.5px solid transparent; }
html.cor .mt-op[aria-pressed="true"] .mt-op-ic, html.cor .mt-op[aria-pressed="true"] .mt-ok { background: var(--aurora); border-color: transparent; }
.mt-op.pulso { animation: mtPulso .45s var(--mola); }
@keyframes mtPulso { 40% { transform: scale(.97); } }
.mt-op-todos { border-style: dashed; }
/* navegação fixa embaixo */
.mt-nav { position: sticky; bottom: calc(var(--abas-h) + var(--seg-b)); z-index: 5; display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; padding: 18px 0 14px; margin-top: 18px; background: linear-gradient(180deg, transparent, var(--fundo, #000) 38%); }
@media (min-width: 60em) { .mt-nav { bottom: 0; } }
.mt-nav .botao { flex: 1 1 10rem; }
.mt-nome input { font: 300 clamp(1.5rem, 6vw, 2.25rem)/1.2 var(--display); padding: 14px 18px; border-radius: 18px; width: 100%; }
.mt-escolhas, .mt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.mt-escolhas i, .mt-chips i { font-style: normal; font-size: .8125rem; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--linha-forte); color: var(--g8); }
.mt-chips { margin-top: 8px; }
.mt-previa { margin-top: 18px; font: 300 1.25rem/1.3 var(--display); }
/* transição entre passos: desliza na direção certa */
html[data-mt-dir="f"]::view-transition-old(root) { animation: mtSaiE .35s var(--suave-in) both; }
html[data-mt-dir="f"]::view-transition-new(root) { animation: mtEntraD .5s var(--mola) both; }
html[data-mt-dir="v"]::view-transition-old(root) { animation: mtSaiD .35s var(--suave-in) both; }
html[data-mt-dir="v"]::view-transition-new(root) { animation: mtEntraE .5s var(--mola) both; }
@keyframes mtSaiE { to { opacity: 0; transform: translateX(-6%); } } @keyframes mtEntraD { from { opacity: 0; transform: translateX(8%); } }
@keyframes mtSaiD { to { opacity: 0; transform: translateX(6%); } } @keyframes mtEntraE { from { opacity: 0; transform: translateX(-8%); } }

/* hub */
.mt-novo { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding: 20px; border-radius: 24px; background: #fff; color: #000; transition: transform .4s var(--mola); }
.mt-novo:hover { transform: translateY(-2px); }
.mt-novo > span:nth-child(2) { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.mt-novo b { font: 400 1.375rem/1.15 var(--display); }
.mt-novo small { color: #555; font-size: .875rem; }
.mt-novo-ic { flex: none; width: 3rem; height: 3rem; border-radius: 16px; background: #000; color: #fff; display: grid; place-items: center; }
.mt-novo-ic svg, .mt-novo > svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2; }
html.cor .mt-novo-ic { background: var(--aurora); }
.mt-perfis { display: grid; gap: 10px; margin-top: 16px; }
.mt-perfil { display: flex; gap: 8px; align-items: flex-start; padding: 16px 12px 16px 18px; border-radius: 20px; background: var(--cartao); border: 1px solid var(--linha); }
.mt-perfil-a { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.mt-perfil-a b { font: 400 1.25rem/1.2 var(--display); overflow-wrap: anywhere; }
.mt-cont { margin-top: 8px; font-size: .8125rem; color: var(--g6); }
.mt-mais { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; }
.mt-mais svg { width: 1.25rem; fill: currentColor; }

/* revelação */
.mt-rev { position: relative; min-height: calc(100svh - var(--topo-h) - var(--abas-h) - var(--seg-b) - var(--seg-t)); display: grid; place-items: center; overflow: hidden; }
.mt-orbita { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: mtGira 9s linear infinite; }
@keyframes mtGira { to { transform: rotate(360deg); } }
.mt-or { --raio: min(38vw, 15rem); position: absolute; width: 4.75rem; height: 6rem; margin: -3rem 0 0 -2.375rem; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.5);
  transform: rotate(calc(360deg / var(--n) * var(--i))) translateY(calc(-1 * var(--raio))) rotate(calc(-360deg / var(--n) * var(--i)));
  animation: mtOr .9s var(--mola) both; animation-delay: calc(var(--i) * 70ms); transition: transform 1.1s cubic-bezier(.7, 0, .2, 1), opacity 1s; }
@keyframes mtOr { from { opacity: 0; transform: rotate(calc(360deg / var(--n) * var(--i))) translateY(calc(-.4 * var(--raio))) rotate(calc(-360deg / var(--n) * var(--i))) scale(.5); } }
.mt-or img, .mt-or svg { width: 100%; height: 100%; object-fit: cover; }
.mt-rev.junta .mt-or { transform: rotate(calc(360deg / var(--n) * var(--i))) translateY(0) rotate(calc(-360deg / var(--n) * var(--i))) scale(.3); opacity: 0; }
.mt-nucleo { position: relative; z-index: 2; text-align: center; display: grid; gap: 6px; place-items: center; padding: 0 var(--margem); }
.mt-nucleo::before { content: ""; position: absolute; left: 50%; top: 50%; width: 11rem; height: 11rem; margin: -5.5rem 0 0 -5.5rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.85), rgba(0,0,0,.6) 70%, transparent); z-index: -1; }
.mt-nucleo b { font: 300 clamp(3.5rem, 16vw, 6rem)/1 var(--display); letter-spacing: -0.04em; }
.mt-nucleo span { color: var(--g8); font-size: 1rem; max-width: 18ch; transition: opacity .4s; }
.mt-rev.junta .mt-nucleo b { animation: mtBate .9s var(--mola); }
@keyframes mtBate { 30% { transform: scale(1.18); } }
html.cor .mt-nucleo b { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* baralho */
.mt-deck { max-width: 30rem; padding-top: 12px; }
.mt-deck-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mt-deck-cab > div { flex: 1 1 auto; min-width: 0; display: grid; }
.mt-deck-cab b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-deck-cab small { color: var(--g6); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.mt-voltar { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--linha-forte); display: grid; place-items: center; }
.mt-voltar svg, .mt-voltar-l svg { width: 1.125rem; height: 1.125rem; }
.mt-ver-lista { flex: none; font-size: .875rem; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linha-forte); }
.mt-pilha { position: relative; height: min(62svh, 36rem); min-height: 26rem; }
.mt-card { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: var(--g1, #111); border: 1px solid var(--linha); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8);
  transform: translateY(calc(var(--k) * 14px * (1 - var(--sobe, 0)))) scale(calc(1 - var(--k) * .05 * (1 - var(--sobe, 0)))); transition: transform .45s var(--mola); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; will-change: transform; }
.mt-card:active { cursor: grabbing; }
.mt-card.chega { animation: mtChega .8s var(--mola) both; animation-delay: calc((2 - var(--k)) * 90ms); }
@keyframes mtChega { from { opacity: 0; transform: translateY(40%) rotate(calc((var(--k) - 1) * 6deg)) scale(.9); } }
.mt-card-foto { position: relative; flex: 1 1 56%; min-height: 0; overflow: hidden; }
.mt-card-foto img, .mt-card-foto svg { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mt-card-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55)); }
.mt-pct { position: absolute; z-index: 2; top: 14px; right: 14px; min-width: 3.5rem; padding: .4em .6em; border-radius: 999px; background: #fff; color: #000; text-align: center; font: 400 1rem/1 var(--display); white-space: nowrap; }
.mt-pct b { font-weight: 500; font-size: 1.25rem; }
html.cor .mt-pct { background: var(--aurora); color: #fff; }
.mt-selo { position: absolute; z-index: 3; top: 22px; padding: 6px 14px; border-radius: 12px; border: 3px solid; font: 600 1.375rem/1 var(--corpo); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; background: rgba(0,0,0,.35); }
.mt-selo-q { left: 18px; transform: rotate(-12deg); color: #fff; opacity: var(--q, 0); }
.mt-selo-d { right: 18px; transform: rotate(12deg); color: #fff; opacity: var(--dp, 0); }
html.cor .mt-selo-q { color: #7dffb0; } html.cor .mt-selo-d { color: #ffd166; }
.mt-card-c { flex: 0 0 auto; padding: 16px 18px 18px; display: grid; gap: 8px; }
.mt-card-ong { display: flex; align-items: center; gap: 10px; font-size: .8125rem; color: var(--g8); min-width: 0; }
.mt-card-ong .logo-ong { width: 32px; height: 32px; border-radius: 10px; }
.mt-card-ong span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-card h2 { font: 400 1.375rem/1.15 var(--display); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.mt-card-r { color: var(--suave); font-size: .875rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mt-card-m { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; color: var(--g7); font-size: .8125rem; }
.mt-card-m svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }
.mt-card-m span { margin-right: 6px; }
.mt-por { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .75rem; }
.mt-por > span { color: var(--g6); margin-right: 2px; }
.mt-por i { font-style: normal; padding: 3px 10px; border-radius: 999px; background: var(--g2); color: var(--g8); }
html.cor .mt-por i { background: color-mix(in srgb, #b05cff 22%, transparent); color: #eadcff; }
.mt-botoes { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; }
.mt-b { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 3.5rem; padding: 0 20px; border-radius: 999px; border: 1px solid var(--linha-forte); font-weight: 500; transition: transform .3s var(--mola), background .2s, opacity .2s; }
.mt-b:active { transform: scale(.93); }
.mt-b svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mt-b-desfaz, .mt-b-info { width: 3rem; min-height: 3rem; padding: 0; }
.mt-b-desfaz:disabled { opacity: .3; }
.mt-b-quero { background: #fff; color: #000; border-color: #fff; min-height: 3.75rem; padding: 0 26px; }
.mt-b-quero svg { fill: currentColor; }
html.cor .mt-b-quero { background: var(--aurora); color: #fff; border-color: transparent; box-shadow: 0 12px 30px rgba(255, 79, 129, .35); }
@media (max-width: 24em) { .mt-b span { display: none; } .mt-b-dep, .mt-b-quero { width: 3.75rem; padding: 0; } }
.mt-dica { text-align: center; color: var(--g6); font-size: .8125rem; margin-top: 14px; }
.mt-cor { position: fixed; z-index: 150; pointer-events: none; font-style: normal; font-size: 1.75rem; color: #fff; animation: mtCoracao 1.3s cubic-bezier(.2, .7, .3, 1) forwards; }
.mt-cor::before { content: "\2665"; }
html.cor .mt-cor { color: #ff4f81; }
@keyframes mtCoracao { 0% { opacity: 0; transform: translate(-50%, 0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), -42vh) rotate(var(--r)) scale(1.1); } }

/* resumo */
.mt-voltar-l { display: inline-flex; align-items: center; gap: 8px; color: var(--g7); font-size: .875rem; margin-bottom: 14px; }
.mt-lista { display: grid; gap: 10px; margin-top: 20px; }
.mt-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px; border-radius: 18px; background: var(--cartao); border: 1px solid var(--linha); }
.mt-item-a { flex: 1 1 14rem; min-width: 0; display: flex; align-items: center; gap: 12px; }
.mt-item .mini { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 12px; overflow: hidden; }
.mt-item .mini img, .mt-item .mini svg { width: 100%; height: 100%; object-fit: cover; }
.mt-item-a > div { display: grid; gap: 2px; }
.mt-item-a b { font-weight: 500; overflow-wrap: anywhere; }
.mt-item-a small { color: var(--g6); font-size: .8125rem; }
.mt-item > .botao { flex: 0 0 auto; margin-left: auto; }
.mt-dep { margin-top: 26px; border-top: 1px solid var(--linha); padding-top: 18px; }
.mt-dep summary { cursor: pointer; list-style: none; display: grid; gap: 2px; }
.mt-dep summary::-webkit-details-marker { display: none; }
.mt-dep summary b { font: 400 1.25rem/1.2 var(--display); }
.mt-dep summary small { color: var(--g6); }
@media (prefers-reduced-motion: reduce) { .mt-op, .mt-card.chega, .mt-or, .mt-orbita { animation: none; } }
@media (max-width: 30em) { .mt-botoes { gap: 14px; } .mt-b span { display: none; } .mt-b-dep { width: 3.5rem; padding: 0; } .mt-b-quero { width: 4.25rem; min-height: 4.25rem; padding: 0; } .mt-b-quero svg { width: 1.75rem; height: 1.75rem; } }

/* =====================================================================
   CONTA · entrar, criar conta, link mágico, senha
   ===================================================================== */
.conta-pag { max-width: 34rem; padding-top: 28px; padding-bottom: 40px; }
.conta-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.conta-selo { width: 2.75rem; height: 2.75rem; border-radius: 14px; background: #fff; color: #000; display: grid; place-items: center; }
.conta-selo svg { width: 1.375rem; height: 1.375rem; fill: currentColor; }
html.cor .conta-selo { background: var(--aurora); color: #fff; }
.conta-t { font: 300 clamp(2rem, 8vw, 3rem)/1.05 var(--display); letter-spacing: -0.03em; margin-bottom: 10px; overflow-wrap: anywhere; text-wrap: balance; }
.conta-seg { margin: 24px 0 0; }
.conta-form { margin-top: 16px; }
.conta-esqueci { justify-self: end; font-size: .875rem; margin-top: -6px; color: var(--g7); }
.conta-demo { text-align: center; padding: 10px 12px; border-radius: 12px; background: var(--g2); }
.senha-c { position: relative; }
.senha-c input { width: 100%; padding-right: 3rem; }
.senha-ver { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; border-radius: 12px; display: grid; place-items: center; color: var(--g6); }
.senha-ver svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.senha-ver.on { color: #fff; }
.forca { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: -4px; }
.forca i { height: 4px; border-radius: 4px; background: var(--g3); transition: background .3s; }
.forca i.on { background: #fff; }
html.cor form[data-forca="1"] .forca i.on { background: #ff8a3d; } html.cor form[data-forca="2"] .forca i.on { background: #ffd166; } html.cor form[data-forca="3"] .forca i.on, html.cor form[data-forca="4"] .forca i.on { background: #4ade80; }
.forca-t { margin: -6px 0 0; }
.conta-quem { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; background: var(--cartao); border: 1px solid var(--linha); margin-bottom: 22px; min-width: 0; }
.conta-quem > div { display: grid; gap: 2px; min-width: 0; }
.conta-quem b { font-weight: 500; overflow-wrap: anywhere; }
.conta-quem span { color: var(--g6); font-size: .8125rem; overflow-wrap: anywhere; }
.id-chip { justify-self: start; margin-top: 4px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--linha-forte); font-variant-numeric: tabular-nums; color: var(--g8) !important; }
.conta-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.conta-acoes .botao { flex: 1 1 10rem; }
.botao.carregando { opacity: .7; pointer-events: none; }
/* "verifique seu e-mail": envelope que recebe a carta */
.conta-enviado { text-align: center; display: grid; justify-items: center; gap: 6px; }
.conta-enviado .sub { max-width: 30ch; }
.envelope { width: 8rem; margin: 10px auto 18px; }
.envelope svg { width: 100%; overflow: visible; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.env-c { stroke-dasharray: 380; stroke-dashoffset: 380; animation: envTraca 1s var(--mola) .1s forwards; }
.env-a { stroke-dasharray: 160; stroke-dashoffset: 160; animation: envTraca .8s var(--mola) .6s forwards; }
.env-v { animation: envCai 1.8s cubic-bezier(.5, 0, .3, 1) .9s infinite; }
@keyframes envTraca { to { stroke-dashoffset: 0; } }
@keyframes envCai { 0% { transform: translateY(-14px); opacity: 0; } 30% { opacity: 1; } 70% { transform: translateY(26px); opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }
html.cor .envelope svg { stroke: url(#none) #fff; }
html.cor .env-v { stroke: #ff4f81; }
.conta-passos { list-style: none; counter-reset: p; padding: 0; margin: 18px 0 8px; display: grid; gap: 8px; text-align: left; width: 100%; }
.conta-passos li { counter-increment: p; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--cartao); border: 1px solid var(--linha); font-size: .9375rem; }
.conta-passos li::before { content: counter(p); flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; font: 500 .875rem/1 var(--display); }
html.cor .conta-passos li::before { background: var(--aurora); color: #fff; }
.conta-reenviar { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.conta-reenviar .link:disabled { opacity: .5; }
.insc-quem { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--g2); min-width: 0; }
.insc-quem > div { display: grid; min-width: 0; }
.insc-quem b { font-weight: 500; overflow-wrap: anywhere; }
.insc-quem span { font-size: .8125rem; color: var(--g6); overflow-wrap: anywhere; }

/* =====================================================================
   PERFIL · capa, crachá, abas
   ===================================================================== */
.perfil { padding-top: 0; }
.pf-capa { position: relative; isolation: isolate; overflow: hidden; margin-top: calc(-1 * var(--topo-h) - var(--seg-t)); padding: calc(var(--topo-h) + var(--seg-t) + clamp(5rem, 16vw, 9rem)) 0 22px; }
.pf-fundo { position: absolute; inset: 0; z-index: -2; background: radial-gradient(60% 80% at 20% 30%, #2a2a2a, #0a0a0a); }
.pf-fundo img { width: 100%; height: 100%; object-fit: cover; opacity: .55; transform: scale(1.08); filter: blur(2px) grayscale(1); }
html.cor .pf-fundo img { filter: blur(2px) saturate(1.1); }
html.cor .pf-fundo { background: radial-gradient(60% 80% at 15% 20%, rgba(255,95,126,.35), transparent 70%), radial-gradient(50% 70% at 85% 30%, rgba(63,169,255,.3), transparent 70%), #0b0b0b; }
.pf-capa::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.15) 30%, rgba(0,0,0,.75) 70%, #000); }
.pf-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: end; }
@media (max-width: 47.99em) { .pf-in { grid-template-columns: auto minmax(0, 1fr); } .pf-cracha { grid-column: 1 / -1; } }
@media (max-width: 26em) { .pf-in { grid-template-columns: minmax(0, 1fr); } }
.pf-av { position: relative; width: 8.5rem; height: 8.5rem; display: grid; place-items: center; }
.pf-av svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pf-av circle { fill: none; stroke-width: 3; }
.pf-av .tr { stroke: rgba(255,255,255,.18); }
.pf-av .vl { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset 1.6s var(--mola); }
html.cor .pf-av .vl { stroke: var(--quente); }
.pf-av .av-xl { box-shadow: 0 0 0 4px #000; }
.pf-nv { position: absolute; right: .25rem; bottom: .25rem; min-width: 2.25rem; height: 2.25rem; padding: 0 .45em; border-radius: 999px; background: #fff; color: #000; display: grid; place-items: center; font: 500 1rem/1 var(--display); box-shadow: 0 0 0 3px #000; }
html.cor .pf-nv { background: var(--aurora); color: #fff; }
.pf-id { min-width: 0; padding-bottom: 6px; }
.pf-nivel { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.pf-id h1 { font: 300 clamp(2rem, 7vw, 3.5rem)/1.02 var(--display); letter-spacing: -0.035em; margin: 6px 0 8px; overflow-wrap: anywhere; text-wrap: balance; }
.pf-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: rgba(255,255,255,.75); font-size: .875rem; }
.pf-meta span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pf-meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }
.pf-bio { margin-top: 10px; font: 300 1.125rem/1.4 var(--display); max-width: 44ch; }
/* crachá do Employee ID: cartão de vidro com a marca TCS */
.pf-cracha { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 20px; min-width: 15rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 20px 50px -20px rgba(0,0,0,.8); }
.pf-cracha::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 45%, transparent 60%); transform: translateX(-100%); animation: brilhoCracha 5s ease-in-out 1s infinite; pointer-events: none; }
@keyframes brilhoCracha { 0%, 60% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
.pf-cracha img { height: 1.75rem; width: auto; flex: none; min-width: 4.5rem; }
.pf-cracha > div { display: grid; min-width: 0; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.2); }
.pf-cracha small { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.pf-cracha b { font: 300 1.5rem/1.1 var(--display); letter-spacing: .02em; }
.pf-cracha-n { position: absolute; right: 12px; top: 10px; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
html.cor .pf-cracha { border-color: transparent; background: linear-gradient(rgba(20,20,20,.55), rgba(20,20,20,.55)) padding-box, var(--aurora) border-box; border: 1px solid transparent; }
.pf-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 10px; margin-top: 16px; }
.pf-nums > div { min-width: 0; container-type: inline-size; padding: 14px 16px; border-radius: var(--r); background: var(--cartao); border: 1px solid var(--linha); }
.pf-nums b { display: block; font: 300 clamp(1.5rem, 32cqi, 2.25rem)/1 var(--display); letter-spacing: -0.02em; }
.pf-nums span { display: block; margin-top: 4px; font-size: .75rem; color: var(--g6); }
.perfil-xp b { font-weight: 500; color: #fff; }
.pf-abas { display: flex; gap: 4px; margin-top: 22px; border-bottom: 1px solid var(--linha); overflow-x: auto; scrollbar-width: none; overflow-y: hidden; }
.pf-abas::-webkit-scrollbar { display: none; }
.pf-abas a { flex: none; position: relative; padding: 12px 14px; color: var(--g6); font-size: .9375rem; white-space: nowrap; transition: color .2s; }
.pf-abas a.on { color: #fff; }
.pf-abas a.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: #fff; }
html.cor .pf-abas a.on::after { background: var(--aurora); }
.pf-abas small { font-size: .75rem; color: var(--g6); margin-left: 2px; }
#pf-corpo { padding-bottom: 20px; }
.pf-lembrete { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 18px; padding: 14px 16px; border-radius: 18px; background: #fff; color: #000; text-align: left; }
.pf-lembrete > span:nth-child(2) { flex: 1 1 auto; min-width: 0; display: grid; }
.pf-lembrete small { color: #555; font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-lem-ic { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: #000; color: #fff; display: grid; place-items: center; font-size: 1.25rem; }
html.cor .pf-lem-ic { background: var(--aurora); }
.pf-lembrete svg { width: 1.25rem; flex: none; }
.minha-nota { color: #ffd166; font-size: .75rem; letter-spacing: 1px; }
html:not(.cor) .minha-nota { color: #fff; }
.minha-relato { margin-top: 6px; font-size: .875rem; color: var(--g8); font-style: italic; }
.aj-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 14px; margin-top: 22px; align-items: start; }
.aj-t { font: 400 1.375rem/1.2 var(--display); margin-bottom: 6px; }
.aj-st { font-weight: 500; font-size: 1rem; margin: 18px 0 4px; }
.aj-dados { display: grid; gap: 10px; margin: 8px 0 0; }
.aj-dados div { display: grid; gap: 2px; }
.aj-dados dt { font-size: .75rem; color: var(--g6); letter-spacing: .08em; text-transform: uppercase; }
.aj-dados dd { margin: 0; overflow-wrap: anywhere; }
.aj-sair { margin-top: 18px; color: var(--g6); }
.av-up { cursor: pointer; color: var(--g7); background-size: cover; background-position: center; min-height: 3.5rem; }
.av-up svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.av-up.com-foto svg { display: none; }
.av-up.carregando { opacity: .5; }
.com-cab { padding-top: 22px; }

/* =====================================================================
   TIMELINE
   ===================================================================== */
.pf-feed, .com-feed { max-width: 38rem; margin: 18px auto 0; }
.tl-compor { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 20px; background: var(--cartao); border: 1px solid var(--linha); color: var(--g6); text-align: left; margin-top: 18px; transition: border-color .2s; }
.tl-compor:hover { border-color: var(--linha-forte); }
.tl-compor span { flex: 1 1 auto; min-width: 0; }
.tl-compor i { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 12px; background: #fff; color: #000; display: grid; place-items: center; }
.tl-compor i svg { width: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2.2; }
html.cor .tl-compor i { background: var(--aurora); color: #fff; }
.com-feed .pf-feed { margin-top: 0; }
.tl-lista { display: grid; gap: 14px; margin-top: 14px; }
.tl-item { border-radius: 24px; background: var(--cartao); border: 1px solid var(--linha); overflow: hidden; opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .7s var(--mola), max-height .4s; transition-delay: var(--d, 0ms); min-width: 0; }
.tl-item.em { opacity: 1; transform: none; }
.tl-item.novo { animation: tlNovo 1.2s var(--mola); }
@keyframes tlNovo { from { box-shadow: 0 0 0 2px #fff; } }
.tl-item.some { opacity: 0; transform: scale(.96); }
.tl-cab { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; min-width: 0; }
.tl-cab > a:first-child { flex: none; }
.tl-quem { flex: 1 1 auto; min-width: 0; display: grid; }
.tl-quem b { font-weight: 500; overflow-wrap: anywhere; }
.tl-quem span { font-size: .75rem; color: var(--g6); overflow-wrap: anywhere; }
.tl-quem span a { color: var(--g8); }
.tl-mais { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; color: var(--g6); }
.tl-mais svg { width: 1.125rem; fill: currentColor; }
.tl-texto { padding: 0 16px 12px; white-space: pre-line; overflow-wrap: anywhere; }
.tl-midia { position: relative; background: #000; }
.tl-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; overflow-y: hidden; }
.tl-trilho::-webkit-scrollbar { display: none; }
.tl-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; aspect-ratio: 4/5; position: relative; max-height: 72svh; }
.tl-midia.um .tl-slide { aspect-ratio: auto; max-height: 80svh; }
.tl-midia.um .tl-slide img { max-height: 80svh; height: auto; }
.tl-slide img, .tl-slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-cont { position: absolute; top: 12px; right: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.6); font-size: .75rem; font-variant-numeric: tabular-nums; backdrop-filter: blur(8px); }
.tl-pontos { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.tl-pontos i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.45); transition: all .3s var(--mola); }
.tl-pontos i.on { background: #fff; width: 16px; border-radius: 4px; }
.tl-seta { position: absolute; top: 50%; width: 2.25rem; height: 2.25rem; margin-top: -1.125rem; border-radius: 50%; background: rgba(255,255,255,.88); color: #000; display: grid; place-items: center; opacity: 0; transition: opacity .2s; }
.tl-seta svg { width: 1rem; height: 1rem; }
.tl-ant { left: 10px; } .tl-prox { right: 10px; } .tl-prox svg { transform: scaleX(-1); }
@media (hover: hover) { .tl-midia:hover .tl-seta { opacity: 1; } .tl-midia.inicio .tl-ant, .tl-midia.fim .tl-prox { opacity: 0 !important; pointer-events: none; } }
.tl-som { position: absolute; right: 12px; bottom: 30px; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(0,0,0,.6); display: grid; place-items: center; }
.tl-som svg { width: 1.125rem; fill: none; stroke: #fff; stroke-width: 1.8; }
.tl-som.on .x { display: none; }
.tl-coracao { position: absolute; left: 50%; top: 50%; font-size: 6rem; line-height: 1; color: #fff; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; text-shadow: 0 10px 40px rgba(0,0,0,.4); }
.tl-coracao.vai { animation: tlCoracao .9s var(--mola); }
html.cor .tl-coracao { color: #ff4f81; }
@keyframes tlCoracao { 15% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(.95); } 45%, 70% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -80%) scale(1); opacity: 0; } }
.tl-acoes { display: flex; gap: 6px; padding: 8px 10px 4px; }
.tl-acoes button { display: inline-flex; align-items: center; gap: 6px; padding: 8px; border-radius: 12px; color: var(--g8); font-size: .875rem; font-variant-numeric: tabular-nums; }
.tl-acoes svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform .3s var(--mola); }
.tl-curtir.on svg { fill: #fff; stroke: #fff; }
html.cor .tl-curtir.on svg { fill: #ff4f81; stroke: #ff4f81; }
.tl-curtir.pop svg { animation: tlPop .5s var(--mola); }
@keyframes tlPop { 40% { transform: scale(1.35); } }
.tl-coments { padding: 0 16px 14px; }
.tl-c { font-size: .875rem; margin-top: 4px; overflow-wrap: anywhere; }
.tl-c b { font-weight: 500; }
.tl-c.novo { animation: aparecerTexto .6s var(--mola); }
.tl-todos { font-size: .8125rem; color: var(--g6); }
.tl-cform { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 4px 4px 4px 14px; border-radius: 999px; background: var(--g2); }
.tl-cform input { all: unset; flex: 1 1 auto; min-width: 0; font-size: .875rem; color: #fff; padding: 6px 0; }
.tl-cform button { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; }
.tl-cform button svg { width: 1rem; }
.tl-relato-c { padding: 0 16px 16px; }
.tl-relato blockquote { margin: 8px 0 0; font: 300 1.25rem/1.4 var(--display); overflow-wrap: anywhere; }
.tl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tl-tags i { font-style: normal; font-size: .75rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--linha-forte); color: var(--g8); }
.estrelas { display: inline-flex; gap: 2px; letter-spacing: 0; }
.estrelas i { font-style: normal; color: var(--g4); font-size: 1rem; }
.estrelas i.on { color: #fff; }
html.cor .estrelas i.on { color: #ffc94d; }
.tl-evento { display: grid; grid-template-columns: minmax(0, 1fr); }
.tl-ev-foto { position: relative; display: block; aspect-ratio: 16/8; overflow: hidden; }
.tl-ev-foto img, .tl-ev-foto svg { width: 100%; height: 100%; object-fit: cover; }
.tl-ev-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.6)); }
.tl-ev-ong { position: absolute; z-index: 2; left: 12px; bottom: 10px; display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 500; }
.tl-ev-ong .logo-ong { width: 28px; height: 28px; border-radius: 9px; }
.tl-ev-c { padding: 14px 16px 16px; display: grid; gap: 6px; }
.tl-ev-c h3 { font: 400 1.25rem/1.2 var(--display); overflow-wrap: anywhere; }
.tl-ev-t { color: var(--g7); font-size: .875rem; }
.tl-ev-pes { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tl-ev-pes small { color: var(--g6); font-size: .8125rem; }
.tl-ev-med { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: .8125rem; color: var(--g8); }
.ins-p { --s: 2.25rem; }
.tl-conq { display: flex; align-items: center; gap: 16px; padding: 18px; }
.tl-conq > div { min-width: 0; display: grid; gap: 2px; }
.tl-conq p { font-size: .875rem; color: var(--g7); overflow-wrap: anywhere; }
.tl-conq p b { color: #fff; font-weight: 500; }
.tl-conq h3 { font: 400 1.375rem/1.2 var(--display); }
.tl-conq-d { font-size: .8125rem !important; }
.tl-conq small { color: var(--g6); font-size: .75rem; }
.tl-fim { padding: 20px 0 10px; }
.tl-acabou { text-align: center; color: var(--g6); font-size: .875rem; }
.tl-carrega { display: flex; justify-content: center; gap: 6px; padding: 16px; }
.tl-carrega i { width: 8px; height: 8px; border-radius: 50%; background: var(--g6); animation: tlPonto 1s ease-in-out infinite; }
.tl-carrega i:nth-child(2) { animation-delay: .15s; } .tl-carrega i:nth-child(3) { animation-delay: .3s; }
@keyframes tlPonto { 50% { transform: translateY(-6px); background: #fff; } }
/* editor */
.tl-ed-quem { display: flex; gap: 12px; align-items: flex-start; }
.tl-ed-quem textarea { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-size: 1.0625rem; resize: vertical; padding: 8px 0; min-height: 5rem; }
.tl-ed-quem textarea:focus { outline: none; }
.tl-ed-midias { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 8px; }
.tl-ed-midias:empty { display: none; }
.tl-ed-m { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--g2); }
.tl-ed-m img, .tl-ed-m video { width: 100%; height: 100%; object-fit: cover; }
.tl-ed-m button { position: absolute; top: 4px; right: 4px; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: rgba(0,0,0,.7); display: grid; place-items: center; }
.tl-ed-m button svg { width: .875rem; stroke: #fff; stroke-width: 2.4; }
.tl-ed-v { position: absolute; left: 6px; bottom: 6px; font-style: normal; font-size: .75rem; padding: 2px 6px; border-radius: 6px; background: rgba(0,0,0,.6); }
.tl-ed-p { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .2s; }
.tl-ed-add { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 14px; border-radius: 16px; border: 1.5px dashed var(--linha-forte); cursor: pointer; transition: border-color .2s, background .2s; }
.tl-ed-add:hover { border-color: #fff; background: var(--g1); }
.tl-ed-add svg { grid-row: span 2; width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.tl-ed-add span { font-weight: 500; }
.tl-ed-add small { color: var(--g6); font-size: .8125rem; }
/* avaliação */
.av-form { text-align: left; }
.av-estrelas { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.av-estrelas button { font-size: 2.75rem; line-height: 1; color: var(--g4); padding: 2px; transition: color .2s, transform .3s var(--mola); }
.av-estrelas button.on { color: #fff; }
html.cor .av-estrelas button.on { color: #ffc94d; text-shadow: 0 0 20px rgba(255,201,77,.4); }
.av-estrelas button.pula { animation: tlPop .45s var(--mola); }
.av-rot { text-align: center; color: var(--g7); min-height: 1.5em; margin-top: -4px; }
.av-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.av-tags .ficha { white-space: nowrap; }
/* "como foi" na página da vaga */
.det-social:empty { display: none; }
.so-nota { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 20px; background: var(--cartao); border: 1px solid var(--linha); flex-wrap: wrap; }
.so-nota > b { font: 300 3.25rem/1 var(--display); letter-spacing: -0.03em; }
.so-nota .estrelas i { font-size: 1.25rem; }
.so-nota p { color: var(--g7); font-size: .875rem; margin-top: 4px; }
.so-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 9rem), 1fr)); gap: 6px; margin-top: 12px; }
.so-f { aspect-ratio: 1; border-radius: 14px; overflow: hidden; display: block; }
.so-f img, .so-f video { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--mola); }
.so-f:hover img { transform: scale(1.05); }
.so-trava { margin-top: 12px; }
.so-relatos { margin-top: 12px; }
.voz .estrelas { margin-bottom: -6px; }

/* Match: o questionário ocupa a tela; só a lista de opções rola (a página fica parada) */
.mt-q { display: flex; flex-direction: column; height: calc(100svh - var(--topo-h) - var(--seg-t) - var(--abas-h) - var(--seg-b)); min-height: 28rem; padding-bottom: 0; }
@media (min-width: 60em) { .mt-q { height: calc(100svh - var(--topo-h) - var(--seg-t)); } }
.mt-q > * { flex: none; }
.mt-q .mt-ops { flex: 1 1 auto; min-height: min(12rem, 38svh); overflow-y: auto; overscroll-behavior: contain; align-content: start; margin-top: 18px; padding: 2px 2px 18px; scrollbar-width: thin; scrollbar-color: var(--g4) transparent;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 26px), transparent); }
.mt-q .mt-nav { position: static; margin-top: 0; padding: 12px 0 14px; background: none; }
.mt-q .mt-escolhas, .mt-q .mt-previa { flex: none; }
.mt-q .mt-t { font-size: clamp(1.75rem, 6.5vw, 3rem); }

/* =====================================================================
   INGRESSO · sai da fenda, inclina em 3D, reflexo holográfico
   ===================================================================== */
.ing-cena { perspective: 1100px; width: 100%; max-width: 23.5rem; margin: 6px auto 0; touch-action: pan-y; }
.ing { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; isolation: isolate; border-radius: 26px; background: #f4f4f2; color: #0a0a0a; text-align: left;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08);
  -webkit-mask-image: radial-gradient(circle at 0 calc(100% - 7.6rem), transparent 13px, #000 13.5px), radial-gradient(circle at 100% calc(100% - 7.6rem), transparent 13px, #000 13.5px);
  -webkit-mask-composite: source-in; mask-image: radial-gradient(circle at 0 calc(100% - 7.6rem), transparent 13px, #000 13.5px), radial-gradient(circle at 100% calc(100% - 7.6rem), transparent 13px, #000 13.5px); mask-composite: intersect; }
.ing.entra { animation: ingSai 1.5s cubic-bezier(.2, .8, .2, 1) both .15s; }
@keyframes ingSai {
  0% { clip-path: inset(0 0 100% 0 round 26px); transform: translateY(-14%) rotateX(30deg); opacity: .4; }
  55% { clip-path: inset(0 0 0 0 round 26px); transform: translateY(2%) rotateX(-8deg); opacity: 1; }
  75% { transform: translateY(-1%) rotateX(4deg); }
  100% { clip-path: inset(0 0 0 0 round 26px); transform: rotateX(var(--rx)) rotateY(var(--ry)); } }
.ing-a { border-radius: 26px 26px 0 0; overflow: hidden; }
.ing-foto { position: relative; aspect-ratio: 16/10; background: #111; overflow: hidden; }
.ing-foto img, .ing-foto svg { width: 100%; height: 100%; object-fit: cover; transform: translate(calc((50% - var(--mx)) * .06), calc((50% - var(--my)) * .06)) scale(1.08); }
.ing-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55), transparent 35%, transparent 55%, rgba(0,0,0,.75)); }
.ing-foto-topo { position: absolute; z-index: 2; top: 14px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; }
.ing-marca img { height: 1.5rem; width: auto; min-width: 3.9rem; }
.ing-tipo { font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.45); backdrop-filter: blur(8px); }
.ing-foto-base { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 12px; display: flex; align-items: center; gap: 8px; color: #fff; min-width: 0; }
.ing-foto-base .logo-ong { width: 28px; height: 28px; border-radius: 8px; }
.ing-prog { font-size: .8125rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ing-c { padding: 16px 18px 18px; }
.ing-olho { font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: #6b6b6b; }
.ing-c h3 { font: 400 1.5rem/1.12 var(--display); letter-spacing: -0.02em; margin: 6px 0 14px; color: #000; overflow-wrap: anywhere; }
.ing-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0; }
.ing-dados .larga { grid-column: 1 / -1; }
.ing-dados dt { font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: #7a7a7a; }
.ing-dados dd { margin: 2px 0 0; font-weight: 500; font-size: .9375rem; overflow-wrap: anywhere; }
.ing-dados small { color: #6b6b6b; font-weight: 400; }
.ing-picote { height: 0; margin: 0 18px; border-top: 2px dashed rgba(0,0,0,.18); }
.ing-b { display: flex; align-items: center; gap: 16px; padding: 16px 18px 18px; min-height: 7.6rem; }
.ing-qr { flex: none; width: 5.25rem; height: 5.25rem; color: #000; fill: currentColor; padding: 6px; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.ing-b-t { display: grid; gap: 2px; min-width: 0; }
.ing-b-t small { font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: #7a7a7a; }
.ing-b-t b { font: 400 1.375rem/1.1 var(--display); letter-spacing: .06em; }
.ing-b-t span { font-size: .8125rem; color: #444; overflow-wrap: anywhere; }
/* holográfico: em P&B é prateado; em cores, aurora */
.ing-holo, .ing-luz { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.ing-holo { z-index: 3; mix-blend-mode: color-dodge; opacity: .38;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 6%, rgba(220,220,220,.55) 9%, rgba(255,255,255,0) 13%), radial-gradient(farthest-corner at var(--mx) var(--my), rgba(255,255,255,.5), transparent 55%);
  background-size: 220% 220%, 100% 100%; background-position: var(--mx) var(--my), 0 0; }
html.cor .ing-holo { opacity: .5; background: repeating-linear-gradient(115deg, rgba(255,138,61,.0) 0 5%, rgba(255,79,129,.5) 8%, rgba(176,92,255,.5) 11%, rgba(63,169,255,.5) 14%, rgba(255,209,102,0) 18%), radial-gradient(farthest-corner at var(--mx) var(--my), rgba(255,255,255,.55), transparent 55%); background-size: 260% 260%, 100% 100%; background-position: var(--mx) var(--my), 0 0; }
.ing-luz { z-index: 4; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.35), transparent 40%); mix-blend-mode: soft-light; }
.ing-tcs { background: #0c0c0c; color: #f2f2f2; }
.ing-tcs .ing-c h3, .ing-tcs .ing-dados dd { color: #fff; }
.ing-tcs .ing-olho, .ing-tcs .ing-dados dt, .ing-tcs .ing-b-t small, .ing-tcs .ing-dados small { color: #9a9a9a; }
.ing-tcs .ing-b-t span { color: #cfcfcf; }
.ing-tcs .ing-picote { border-top-color: rgba(255,255,255,.2); }
.ing-tcs { box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.14); }
html.cor .ing-tcs { box-shadow: 0 40px 80px -30px rgba(176,92,255,.45), 0 0 0 1px rgba(255,255,255,.14); }
.celebra-acoes .botao svg { width: 18px; height: 18px; }
.ing-tela { opacity: 0; transition: opacity .35s; }
.ing-tela.aberta { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ing.entra { animation: none; } }

/* =====================================================================
   PROGRAMAS DA TCS
   ===================================================================== */
.programas .bloco-cab h2 { margin-top: 6px; }
.trilho-prog { grid-auto-columns: min(80%, 22rem); }
.prog { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 22rem; padding: 20px; border-radius: var(--r-g); background: #0c0c0c; border: 1px solid rgba(255,255,255,.12); transition: transform .5s var(--mola), border-color .3s; }
.prog-fundo { position: absolute; inset: 0; z-index: -2; }
.prog-fundo img, .prog-fundo svg { width: 100%; height: 100%; object-fit: cover; opacity: .45; transition: transform 1.2s var(--mola); }
.prog::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.2) 40%, rgba(0,0,0,.92) 75%); }
html.cor .prog::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 60% at 100% 0%, rgba(176,92,255,.35), transparent 60%); }
@media (hover: hover) { .prog:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.3); } .prog:hover .prog-fundo img { transform: scale(1.05); } }
.prog-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.prog-topo img { height: 1.6rem; width: auto; min-width: 4.2rem; }
.prog-topo span { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.12); white-space: nowrap; }
.prog-c { margin-top: auto; display: grid; gap: 6px; min-width: 0; }
.prog-c h3 { font: 300 1.875rem/1.05 var(--display); letter-spacing: -0.025em; overflow-wrap: anywhere; }
.prog-c > p { color: rgba(255,255,255,.75); font-size: .9375rem; }
.prog-g .prog-c > p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.prog-prox { margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: grid; gap: 1px; min-width: 0; }
.prog-prox small { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.prog-prox b { font-weight: 500; overflow-wrap: anywhere; }
.prog-prox span { font-size: .8125rem; color: rgba(255,255,255,.75); }
html.cor .prog-prox { background: linear-gradient(rgba(20,20,20,.5), rgba(20,20,20,.5)) padding-box, var(--aurora) border-box; border: 1px solid transparent; }

/* =====================================================================
   AGENDA E RELATOS NO PERFIL
   ===================================================================== */
.ag-assinar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding: 16px; border-radius: 20px; background: var(--cartao); border: 1px solid var(--linha); }
.ag-assinar > div { flex: 1 1 14rem; min-width: 0; display: grid; gap: 2px; }
.ag-assinar small { color: var(--g6); font-size: .8125rem; }
.ag-ic { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 14px; background: #fff; color: #000; display: grid; place-items: center; }
.ag-ic svg { width: 1.375rem; height: 1.375rem; }
html.cor .ag-ic { background: var(--aurora); color: #fff; }
.ag-opcoes { display: grid; gap: 8px; padding-bottom: 8px; }
.ag-op { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--g2); }
.ag-op small { grid-column: 1; color: var(--g6); font-size: .8125rem; }
.ag-op svg { grid-row: 1 / span 2; grid-column: 2; width: 1rem; }
.ag-link { display: flex; gap: 8px; margin-top: 6px; }
.ag-link input { flex: 1 1 auto; min-width: 0; font-size: .8125rem; }
.minha-acoes .botao svg { width: 16px; height: 16px; }
.ficha-2bt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ficha-2bt .botao { padding: 0 12px; gap: 6px; font-size: .875rem; white-space: normal; }
.ficha-2bt .botao svg { width: 16px; height: 16px; flex: none; }
.pf-relatos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 12px; margin-top: 22px; }
.pf-relato { margin: 0; padding: 20px; border-radius: 22px; background: var(--cartao); border: 1px solid var(--linha); display: grid; gap: 10px; align-content: start; }
.pf-relato blockquote { margin: 0; font: 300 1.25rem/1.4 var(--display); overflow-wrap: anywhere; }
.pf-relato figcaption { font-size: .8125rem; color: var(--g6); }
.pf-relato figcaption a { color: var(--g8); }
/* lista de opções: sem esmaecer o topo (cortava a primeira opção); só o fim indica que há mais */
.mt-q .mt-ops { padding-top: 6px; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); }

/* painel CSR: qualidade por evento e publicações */
.qual { margin-top: 18px; }
.qual h2 { font: 400 1.25rem/1.2 var(--display); margin-bottom: 10px; }
.qual-l { display: grid; gap: 8px; }
.qual-i { border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); }
.qual-i summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.qual-i summary::-webkit-details-marker { display: none; }
.qual-i summary b { display: block; font-weight: 500; overflow-wrap: anywhere; }
.qual-i summary small { display: block; color: var(--g6); font-size: .8125rem; }
.qual-n { display: grid; justify-items: end; gap: 2px; text-align: right; }
.qual-n > b { font: 300 1.75rem/1 var(--display); }
.qual-mel { margin: 0; padding: 0 16px 14px 34px; display: grid; gap: 4px; color: var(--g8); font-size: .875rem; }
.qual-i .nota { padding: 0 16px 14px; }
.dep-csr-t .estrelas { margin-left: auto; flex: none; }
.dep-mel { padding: 10px 12px; border-radius: 12px; background: var(--g2); font-size: .875rem; }
.dep-mel small { display: block; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--g6); margin-bottom: 2px; }
.pubs-csr { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 12px; }
.pub-csr { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 20px; background: var(--cartao); border: 1px solid var(--linha); min-width: 0; }
.pub-csr.oculto { opacity: .55; }
.pub-csr p { overflow-wrap: anywhere; }
.pub-midias { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: 6px; }
.pub-midias img, .pub-midias video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.pub-csr .botao { justify-self: start; }

/* Match: selo do gesto (pílula com ícone que cresce com o arrasto) */
.mt-selo { top: 50%; left: 50%; right: auto; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border: 0; border-radius: 999px; font: 500 1.125rem/1 var(--corpo); letter-spacing: .02em; text-transform: none; white-space: nowrap;
  background: rgba(255,255,255,.94); color: #000; box-shadow: 0 18px 40px rgba(0,0,0,.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.mt-selo i { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: #000; color: #fff; }
.mt-selo svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mt-selo-q { transform: translate(-50%, -50%) rotate(-8deg) scale(calc(.55 + var(--q, 0) * .45)); }
.mt-selo-q svg { fill: currentColor; }
.mt-selo-d { transform: translate(-50%, -50%) rotate(8deg) scale(calc(.55 + var(--dp, 0) * .45)); }
html.cor .mt-selo-q, html.cor .mt-selo-d { color: #000; }
html.cor .mt-selo-q i { background: var(--aurora); }
html.cor .mt-selo-d i { background: #ffb547; color: #000; }
.mt-card-foto::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(0,0,0,calc(max(var(--q, 0), var(--dp, 0)) * .35)); }
/* desfazer: só a carta que volta anima, vindo do lado de onde saiu */
.mt-card.volta-q { animation: mtVoltaQ .55s cubic-bezier(.2, .8, .2, 1) both; }
.mt-card.volta-d { animation: mtVoltaD .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes mtVoltaQ { from { transform: translate(120vw, -4vh) rotate(24deg); } }
@keyframes mtVoltaD { from { transform: translate(-120vw, -4vh) rotate(-24deg); } }

/* ingresso: holográfico mais sutil (no escuro estava forte) */
.ing-holo { opacity: .26; }
html.cor .ing-holo { opacity: .3; }
.ing-tcs .ing-holo { mix-blend-mode: screen; opacity: .12; }
html.cor .ing-tcs .ing-holo { opacity: .16; }
/* favoritar */
.fav-bt svg, .fav-lat svg { fill: none; stroke: currentColor; stroke-width: 1.8; transition: fill .25s, transform .35s var(--mola); }
.fav-lat { gap: 8px; margin-top: -4px; }
.fav-lat svg { width: 18px; height: 18px; }
.fav-bt.on svg, .fav-lat.on svg { fill: currentColor; }
html.cor .fav-bt.on, html.cor .fav-lat.on { color: #ff4f81; }
.fav-bt.pop svg, .fav-lat.pop svg { animation: tlPop .5s var(--mola); }

/* Match: espaços da seleção (até 3) no topo do baralho */
.mt-slots { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--g1); }
.mt-slots i { width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px dashed var(--g5); overflow: hidden; display: block; transition: transform .4s var(--mola); }
.mt-slots i.cheio { border: 0; box-shadow: 0 0 0 2px #fff; animation: mtSlot .6s var(--mola); }
html.cor .mt-slots i.cheio { box-shadow: 0 0 0 2px #ff4f81; }
.mt-slots i img, .mt-slots i svg { width: 100%; height: 100%; object-fit: cover; }
.mt-slots b { font-size: .8125rem; font-weight: 500; margin-left: 2px; font-variant-numeric: tabular-nums; }
.mt-slots.pisca { animation: mtPisca .6s ease 2; }
@keyframes mtSlot { from { transform: scale(.3); } }
@keyframes mtPisca { 50% { border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.2); } }
.mt-card.nega { animation: mtNega .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes mtNega { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.mt-deck-cab > div b { font-size: .9375rem; }
.mt-item > .botao + .botao { margin-left: 0; }

/* =====================================================================
   CARREGAMENTO · TCS × Juntos
   ===================================================================== */
.splash { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: #000; transition: opacity .8s cubic-bezier(.4, 0, .2, 1), filter .8s, transform .9s cubic-bezier(.4, 0, .2, 1); }
.splash.sai { opacity: 0; filter: blur(12px); transform: scale(1.06); pointer-events: none; }
.sp-in { display: grid; justify-items: center; gap: 18px; }
.sp-tcs { width: 9.5rem; height: auto; opacity: 0; transform: translateY(14px); filter: blur(8px); animation: spEntra .9s cubic-bezier(.2, .8, .2, 1) .1s forwards; }
.sp-x { position: relative; width: 1.5rem; height: 1.5rem; }
.sp-x i { position: absolute; left: 50%; top: 50%; width: 1.9rem; height: 1.5px; margin: -.75px 0 0 -.95rem; border-radius: 2px; background: rgba(255,255,255,.85); transform: rotate(45deg) scaleX(0); animation: spTraco .55s cubic-bezier(.6, 0, .2, 1) .55s forwards; }
.sp-x i + i { transform: rotate(-45deg) scaleX(0); animation-name: spTraco2; animation-delay: .7s; }
@keyframes spTraco { to { transform: rotate(45deg) scaleX(1); } }
@keyframes spTraco2 { to { transform: rotate(-45deg) scaleX(1); } }
.sp-nome { font: 300 2.25rem/1 var(--display); letter-spacing: -0.02em; white-space: nowrap; opacity: 0; transform: translateY(12px); filter: blur(8px); animation: spEntra .9s cubic-bezier(.2, .8, .2, 1) .85s forwards; }
.sp-nome b { font-weight: 500; }
html.cor .sp-nome b { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.cor .sp-x i { background: linear-gradient(90deg, #ff8a3d, #ff4f81, #b05cff); }
.sp-barra { width: 7rem; height: 2px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 10px; opacity: 0; animation: spAparece .4s ease 1.1s forwards; }
.sp-barra i { display: block; width: 40%; height: 100%; border-radius: inherit; background: #fff; animation: spCorre 1.1s cubic-bezier(.6, 0, .4, 1) infinite; }
html.cor .sp-barra i { background: var(--aurora); }
@keyframes spEntra { to { opacity: 1; transform: none; filter: none; } }
@keyframes spAparece { to { opacity: 1; } }
@keyframes spCorre { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .sp-tcs, .sp-nome, .sp-barra { animation: none; opacity: 1; transform: none; filter: none; } .sp-x i { animation: none; transform: rotate(45deg); } .sp-x i + i { transform: rotate(-45deg); } }
/* saída do carregamento: só esvanece, revelando o conteúdo por baixo */
.splash { transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1); }
.splash.sai { opacity: 0; filter: none; transform: none; }
.splash.sai .sp-barra { opacity: 0; transition: opacity .3s; }

/* cabeçalho de página compacto: trilha, título com chip, descrição discreta */
.pc { padding-top: 18px; padding-bottom: 4px; display: grid; gap: 8px; }
.migalhas { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .8125rem; color: var(--g6); }
.migalhas a { color: var(--g6); transition: color .2s; }
.migalhas a:hover { color: #fff; }
.migalhas b { font-weight: 500; color: var(--g8); }
.migalhas span { color: var(--g5); }
.pc-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; min-width: 0; }
.pc-linha h1 { font: 300 clamp(1.875rem, 5.5vw, 2.75rem)/1.05 var(--display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.pc-chip { flex: none; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--linha-forte); font-size: .8125rem; color: var(--g8); white-space: nowrap; }
html.cor .pc-chip { border-color: transparent; background: linear-gradient(var(--fundo, #000), var(--fundo, #000)) padding-box, var(--aurora) border-box; border: 1px solid transparent; }
.pc-sub { color: var(--g6); font-size: .9375rem; max-width: 60ch; }

/* =====================================================================
   TELAS DE CONTA · centralizadas, fundo de fotos em deriva, cartão de vidro
   ===================================================================== */
.conta-tela { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center;
  min-height: calc(100svh - var(--abas-h) - var(--seg-b)); margin-top: calc(-1 * var(--topo-h) - var(--seg-t)); padding: calc(var(--topo-h) + var(--seg-t) + 24px) var(--margem) 36px; }
@media (min-width: 60em) { .conta-tela { min-height: 100svh; } }
.ct-fundo { position: absolute; z-index: -2; inset: -15% -25%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; transform: rotate(-7deg); opacity: .55; filter: blur(3px); }
.ct-col { display: grid; gap: 14px; align-content: start; animation: colunar 70s linear infinite; }
.ct-col:nth-child(2n) { animation-direction: reverse; margin-top: -30%; }
.ct-col img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 18px; }
.conta-tela::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 60% at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.92) 80%), linear-gradient(180deg, rgba(0,0,0,.6), transparent 30%, transparent 70%, rgba(0,0,0,.9)); }
html.cor .conta-tela::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 35% at 30% 30%, rgba(255,95,126,.18), transparent 70%), radial-gradient(40% 35% at 75% 70%, rgba(63,169,255,.16), transparent 70%); }
.conta-cartao { position: relative; width: 100%; max-width: 27.5rem; padding: 34px 28px 30px; border-radius: 30px; text-align: center;
  background: rgba(12,12,12,.7); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08); animation: ctEntra .8s var(--mola) both; }
@keyframes ctEntra { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@media (max-width: 26em) { .conta-cartao { padding: 28px 18px 24px; border-radius: 26px; } }
.conta-cartao .conta-marca { justify-content: center; }
.conta-cartao .conta-marca .olho::before { display: none; }
.conta-cartao .conta-t { font-size: clamp(1.75rem, 7vw, 2.375rem); margin: 6px 0 8px; }
.conta-cartao .sub { margin: 0 auto; max-width: 32ch; font-size: .9688rem; }
.conta-cartao .conta-seg { margin: 22px auto 0; max-width: 20rem; }
.conta-cartao .caixa { background: none; border: 0; padding: 0; box-shadow: none; }
.conta-cartao form { text-align: left; margin-top: 20px; }
.conta-cartao .conta-quem { text-align: left; }
.conta-cartao .conta-passos { margin-top: 16px; }
.conta-cartao .conta-acoes { justify-content: center; }
.conta-cartao.conta-enviado .envelope { margin-top: 0; }
.porta-rostos { display: flex; justify-content: center; margin: 4px 0 12px; padding-left: 12px; }
.porta-rostos span { margin-left: -12px; border-radius: 50%; box-shadow: 0 0 0 3px #0c0c0c; animation: porta .7s var(--mola) both; animation-delay: calc(var(--i) * 70ms + .2s); }
@keyframes porta { from { opacity: 0; transform: translateY(10px) scale(.8); } }
.porta-n { font-size: .8125rem; color: var(--g7); letter-spacing: .02em; }
.conta-porta .conta-t { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .ct-col { animation: none; } }

/* reserva sempre o espaço da barra de rolagem: trocar entre páginas curtas e longas não dá "salto" */
html { scrollbar-gutter: stable; }

/* à prova de escala (fonte 150–200% em 320–390 px) */
.olho { max-width: 100%; white-space: normal; flex-wrap: wrap; }
.bloco-cab > div { min-width: 0; }
.tl-ev-c, .tl-ev-c > * { min-width: 0; }
.pf-cracha { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.pf-cracha-n { position: static; order: 3; flex-basis: 100%; }
.pf-cracha > div { min-width: 0; }
.pf-cracha b { overflow-wrap: anywhere; }
.prog-topo { flex-wrap: wrap; }
.prog-topo span { white-space: normal; text-align: right; min-width: 0; }
.ongs-csr { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)) !important; }
.ong-csr, .ong-csr * { min-width: 0; overflow-wrap: anywhere; }

/* telas de conta sem rolagem da página: o cartão cabe na tela; se não couber, rola só por dentro */
.conta-tela { height: calc(100svh - var(--abas-h) - var(--seg-b)); min-height: 0; overflow: hidden; }
@media (min-width: 60em) { .conta-tela { height: 100svh; } }
.conta-cartao { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.conta-cartao::-webkit-scrollbar { display: none; }
/* telas baixas (celulares menores ou com teclado): versão compacta */
@media (max-height: 820px) {
  .conta-tela { padding-top: calc(var(--topo-h) + var(--seg-t) + 10px); padding-bottom: 12px; }
  .conta-cartao { padding: 20px 20px 18px; }
  .conta-cartao .conta-marca { margin-bottom: 8px; }
  .conta-cartao .conta-selo { width: 2.25rem; height: 2.25rem; border-radius: 12px; }
  .conta-cartao .conta-t { font-size: clamp(1.5rem, 6vw, 2rem); margin: 2px 0 4px; }
  .conta-cartao .sub { font-size: .875rem; }
  .conta-cartao .conta-seg { margin-top: 14px; }
  .conta-cartao form { margin-top: 12px; gap: 10px; }
  .conta-cartao .campo { gap: 4px; }
  .conta-cartao .campo input { min-height: 44px; }
  .conta-cartao .nota { font-size: .75rem; }
  .conta-cartao .conta-passos { gap: 6px; } .conta-cartao .conta-passos li { padding: 9px 12px; }
  .conta-cartao .envelope { width: 5.5rem; margin-bottom: 8px; }
}
@media (max-height: 700px) { .conta-cartao .sub { display: none; } .conta-cartao .conta-marca { display: none; } }
/* criar conta: campos curtos lado a lado; menos texto em telas baixas */
.conta-cartao .duas { grid-template-columns: 1fr 1fr; gap: 10px; }
.conta-cartao .duas .campo { min-width: 0; }
@media (max-height: 900px) {
  .conta-cartao .conta-marca { margin-bottom: 4px; }
  .conta-cartao .conta-marca .olho { display: none; }
  .conta-cartao .conta-t { font-size: clamp(1.5rem, 6vw, 2.125rem); }
}
@media (max-height: 820px) { .conta-cartao .criar-nota { display: none; } .conta-cartao .sub { display: none; } }
@media (max-width: 22em) { .conta-cartao .duas { grid-template-columns: 1fr; } }
.tl-conq { flex-wrap: wrap; }
.tl-conq > div { flex: 1 1 9rem; }
.tl-conq .ins-g { --s: min(6rem, 24vw); }
.tl-conq h3, .tl-conq p, .tl-conq small { overflow-wrap: anywhere; }
.olho { overflow-wrap: anywhere; }

/* caixa de publicar: o elemento mais chamativo da timeline (sem gritar) */
.tl-compor { position: relative; padding: 14px 14px 14px 12px; border-radius: 22px; color: #fff; background: linear-gradient(var(--cartao), var(--cartao)) padding-box, linear-gradient(120deg, rgba(255,255,255,.45), rgba(255,255,255,.08) 40%, rgba(255,255,255,.3)) border-box; border: 1px solid transparent; box-shadow: 0 18px 40px -24px rgba(255,255,255,.25); transition: transform .35s var(--mola), box-shadow .35s; }
.tl-compor:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -22px rgba(255,255,255,.32); }
html.cor .tl-compor { background: linear-gradient(var(--cartao), var(--cartao)) padding-box, var(--aurora) border-box; box-shadow: 0 18px 50px -26px rgba(255,79,129,.55); }
.tl-compor-t { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.tl-compor-t b { font-weight: 500; }
.tl-compor-t small { color: var(--g6); font-size: .8125rem; }
.tl-compor i { width: 2.5rem; height: 2.5rem; border-radius: 14px; animation: comporPulso 3.2s ease-in-out infinite; }
@keyframes comporPulso { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } 85% { box-shadow: 0 0 0 8px rgba(255,255,255,.08); } }
/* conquista compartilhada */
.tl-conq-post { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; margin: 0 16px 12px; padding: 18px; border-radius: 20px; background: radial-gradient(120% 140% at 0% 0%, #1d1d1d, #0e0e0e); border: 1px solid var(--linha-forte); }
.tl-conq-post > div:last-child { min-width: 0; display: grid; gap: 2px; }
.tl-conq-post small { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--g6); }
.tl-conq-post h3 { font: 400 1.375rem/1.15 var(--display); overflow-wrap: anywhere; }
.tl-conq-post p { color: var(--g7); font-size: .875rem; }
.tl-conq-brilho { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.08) 50%, transparent 65%); transform: translateX(-100%); animation: brilhoCracha 4.5s ease-in-out infinite; }
html.cor .tl-conq-post { background: radial-gradient(120% 140% at 0% 0%, rgba(176,92,255,.25), #0e0e0e 60%); }
/* recompartilhamento */
.tl-rp { display: flex; align-items: center; gap: 6px; padding: 0 16px 6px; margin-top: -4px; color: var(--g6); font-size: .75rem; }
.tl-rp svg, .tl-rep svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tl-rp svg { width: 14px; height: 14px; }
.tl-emb { display: grid; gap: 8px; margin: 0 16px 12px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--linha-forte); background: var(--g1, #0c0c0c); min-width: 0; }
.tl-emb .tl-conq-post { margin: 0; }
.tl-emb-x { color: var(--g6); font-size: .875rem; }
.tl-emb-cab { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .8125rem; }
.tl-emb-cab b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-emb-cab span { color: var(--g6); }
.tl-emb p { font-size: .9375rem; overflow-wrap: anywhere; }
.tl-emb-m { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.tl-emb-m img, .tl-emb-m video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.tl-emb-m i { position: absolute; right: 6px; bottom: 6px; font-style: normal; font-size: .75rem; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.65); }
.tl-ed-previa { max-height: 40vh; overflow: auto; border-radius: 18px; }
.tl-ed-previa .tl-emb { margin: 0; pointer-events: none; }
/* evento com busca */
.tl-ev-busca { position: relative; }
.tl-ev-busca svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: none; stroke: var(--g6); stroke-width: 2; pointer-events: none; }
.tl-ev-busca input { width: 100%; padding-left: 42px; }
.tl-ev-dica { color: var(--g6); font-size: .75rem; }
/* nível: clicável, com trilha explicada */
.pf-nivel { display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); padding: 0; }
.pf-nivel i { width: 1.125rem; height: 1.125rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); display: grid; place-items: center; font-style: normal; font-size: .625rem; letter-spacing: 0; }
.pf-nivel:hover { color: #fff; }
.nv-trilha { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.nv-trilha li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--g2); color: var(--g7); }
.nv-trilha li > b { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--linha-forte); font: 500 .9375rem/1 var(--display); }
.nv-trilha li > div { flex: 1 1 auto; min-width: 0; display: grid; }
.nv-trilha li strong { font-weight: 500; color: #fff; }
.nv-trilha li small { font-size: .8125rem; }
.nv-trilha li.ok > b { background: #fff; color: #000; border-color: #fff; }
.nv-trilha li.agora { background: #fff; color: #333; }
.nv-trilha li.agora strong { color: #000; }
.nv-trilha li.agora > b { background: #000; color: #fff; border-color: #000; }
.nv-trilha li > span { font-size: .75rem; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: #000; color: #fff; }
html.cor .nv-trilha li.ok > b, html.cor .nv-trilha li.agora > b { background: var(--aurora); color: #fff; border-color: transparent; }
.nv-pontos { margin: 18px 0 8px; }
.nv-pontos h3 { font-weight: 500; font-size: 1rem; margin-bottom: 8px; }
.nv-pontos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nv-pontos li { display: flex; align-items: baseline; gap: 10px; color: var(--g8); font-size: .9375rem; }
.nv-pontos li b { flex: none; min-width: 2.75rem; font: 400 1.125rem/1 var(--display); color: #fff; }
/* troca de aba no perfil: só o conteúdo aparece, suave */
#pf-corpo.troca { animation: abaTroca .45s var(--mola); }
@keyframes abaTroca { from { opacity: 0; transform: translateY(8px); } }
.form .tl-ev-busca input, .tl-ev-busca input { padding-left: 2.75rem !important; }

/* avatar sem foto: iniciais num disco elegante (tom da pessoa em cores, cinza em P&B) */
.av { background: linear-gradient(145deg, #2c2c2c, #161616); }
.av i { color: #e9e9e9; font-weight: 500; letter-spacing: .04em; }
html.cor .av:not(:has(img)) { background: linear-gradient(145deg, hsl(var(--h) 55% 42%), hsl(calc(var(--h) + 40) 55% 28%)); }
html.cor .av:not(:has(img)) i { color: #fff; }
/* ajustes: foto do perfil e sair */
.aj-foto { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 4px 0 6px; }
.aj-foto > div { flex: 1 1 12rem; min-width: 0; display: grid; gap: 4px; }
.aj-foto b { font-weight: 500; }
.aj-foto small { color: var(--g6); font-size: .8125rem; }
.aj-foto-bts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.aj-foto-bts label { cursor: pointer; }
.aj-foto-bts .carregando { opacity: .6; }
.aj-sair { margin-top: 22px; gap: 10px; background: transparent; color: #ff8a8a; border: 1px solid rgba(255,138,138,.45); }
.aj-sair svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aj-sair:hover { background: rgba(255,138,138,.1); border-color: #ff8a8a; box-shadow: none; }
html:not(.cor) .aj-sair { color: #fff; border-color: rgba(255,255,255,.5); }

/* caixa de publicar no estilo das redes: campo de texto + atalhos com ícone */
.tl-box { margin-top: 18px; padding: 14px 14px 8px; border-radius: 22px; background: linear-gradient(var(--cartao), var(--cartao)) padding-box, linear-gradient(120deg, rgba(255,255,255,.4), rgba(255,255,255,.08) 45%, rgba(255,255,255,.25)) border-box; border: 1px solid transparent; box-shadow: 0 18px 40px -26px rgba(255,255,255,.25); }
html.cor .tl-box { background: linear-gradient(var(--cartao), var(--cartao)) padding-box, var(--aurora) border-box; box-shadow: 0 18px 50px -28px rgba(255,79,129,.5); }
.tl-box-l { display: flex; align-items: center; gap: 12px; }
.tl-box-in { flex: 1 1 auto; min-width: 0; text-align: left; padding: 12px 16px; border-radius: 999px; background: var(--g2); border: 1px solid var(--linha); color: var(--g6); font-size: .9688rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color .2s, background .2s; }
.tl-box-in:hover { border-color: var(--linha-forte); background: var(--g3); color: var(--g7); }
.tl-box-acoes { display: flex; margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--linha); }
.tl-box-a { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 6px; border-radius: 12px; color: var(--g8); font-size: .875rem; font-weight: 500; cursor: pointer; transition: background .2s; }
.tl-box-a:hover { background: var(--g2); }
.tl-box-a svg { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tl-box-a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cor .tl-box-a:nth-child(1) svg { stroke: #4ade80; } html.cor .tl-box-a:nth-child(2) svg { stroke: #3fa9ff; } html.cor .tl-box-a:nth-child(3) svg { stroke: #ffb547; }
@media (max-width: 22em) { .tl-box-a span { display: none; } }

/* abertura: o "puxão" de zoom parte do ponto tocado (antes partia do centro e, no celular, a cor parecia nascer longe do dedo) */
.ab-pb-env { position: absolute; inset: 0; }
.ab-camada, .abertura.explode .ab-camada { transform: rotate(-6deg); }
.ab-pb-env, .ab-cor-env { transform: scale(var(--zoom, 1)); transform-origin: var(--ax, 50%) var(--ay, 50%); will-change: transform; }
@media (max-width: 26em) { .tl-box-a { font-size: .8125rem; gap: 6px; padding: 10px 4px; } }

/* =====================================================================
   CARROSSÉIS · horizontais em qualquer tela; no desktop, 3 por vez com setas
   ===================================================================== */
.carr { position: relative; }
@media (min-width: 60em) {
  .trilho { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0; margin: -8px 0 0; padding: 10px 0 18px; }
  .trilho > * { scroll-snap-align: start; }
  .trilho-p { grid-auto-columns: calc((100% - 60px) / 4); }
  .trilho-4 { grid-auto-columns: calc((100% - 60px) / 4); }
}
.carr-bt { position: absolute; z-index: 5; top: 50%; width: 2.75rem; height: 2.75rem; margin-top: -1.375rem; border-radius: 50%; display: none; place-items: center; background: rgba(255,255,255,.94); color: #000; box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: opacity .25s, transform .3s var(--mola); }
.carr-bt svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.carr-ant { left: -1.375rem; } .carr-prox { right: -1.375rem; }
.carr-bt:hover { transform: scale(1.08); }
@media (min-width: 60em) and (hover: hover) { .carr.rola .carr-bt { display: grid; } }
.carr.no-inicio .carr-ant, .carr.no-fim .carr-prox { opacity: 0; pointer-events: none; }
@media (max-width: 75em) { .carr-ant { left: -.5rem; } .carr-prox { right: -.5rem; } }
/* cards dentro dos carrosséis: altura igual, texto e números nunca estouram */
.trilho > * { min-width: 0; height: 100%; }
.trilho .prog, .trilho .ong-tile { height: auto; min-height: 20rem; }
.trilho-ongs .ong-tile h3, .prog-c h3 { overflow-wrap: anywhere; hyphens: auto; }
.trilho-ongs .ong-tile p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.prog-topo > span { max-width: 60%; }

/* seletor de unidade: botão com cara de campo, lista em folha com busca e endereço */
.sel-uni { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 14px; background: var(--g2); border: 1px solid var(--linha-forte); color: #fff; text-align: left; transition: border-color .2s, background .2s; }
.sel-uni:hover, .sel-uni:focus-visible { border-color: #fff; }
.sel-uni > svg:first-child { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--g7); stroke-width: 1.8; }
.sel-uni span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9688rem; }
.sel-uni.vazio span { color: var(--g6); }
.sel-seta { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--g6); stroke-width: 2; }
.uni-busca { margin: 4px 0 12px; }
.uni-lista { display: grid; gap: 8px; padding-bottom: 6px; }
.uni-op { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: var(--g2); border: 1px solid transparent; text-align: left; transition: border-color .2s, background .2s; min-width: 0; }
.uni-op[hidden] { display: none; }
.uni-op:hover { border-color: var(--linha-forte); }
.uni-op.on { border-color: #fff; background: var(--g3); }
html.cor .uni-op.on { border-color: transparent; background: linear-gradient(var(--g3), var(--g3)) padding-box, var(--aurora) border-box; }
.uni-ic { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: #fff; color: #000; display: grid; place-items: center; }
.uni-ic svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.uni-t { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.uni-t b { font-weight: 500; overflow-wrap: anywhere; }
.uni-t small { color: var(--g6); font-size: .8125rem; overflow-wrap: anywhere; }
.uni-ok { flex: none; font-style: normal; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-size: .8125rem; opacity: 0; background: #fff; color: #000; transition: opacity .2s; }
.uni-op.on .uni-ok { opacity: 1; }
.uni-outra { margin-top: 6px; padding: 14px; border-radius: 18px; border: 1px dashed var(--linha-forte); display: grid; gap: 8px; }
.uni-outra label { font-size: .8125rem; color: var(--g7); }
.uni-outra-l { display: flex; gap: 8px; }
.uni-outra-l input { flex: 1 1 auto; min-width: 0; }

/* revelação sem emenda: os cards seguem girando e convergem para o centro numa animação contínua */
.mt-rev.junta .mt-or { animation: mtJunta 1.15s cubic-bezier(.65, 0, .25, 1) forwards; transition: none; }
@keyframes mtJunta {
  from { opacity: 1; transform: rotate(calc(360deg / var(--n) * var(--i))) translateY(calc(-1 * var(--raio))) rotate(calc(-360deg / var(--n) * var(--i))) scale(1); }
  70% { opacity: .9; }
  to { opacity: 0; transform: rotate(calc(360deg / var(--n) * var(--i))) translateY(0) rotate(calc(-360deg / var(--n) * var(--i))) scale(.25); } }
.mt-rev.junta .mt-orbita { animation-duration: 3s; }
.mt-nucleo span { transition: opacity .35s; }

/* baralho no desktop: uma coluna só, como no celular — cabeçalho compacto, carta, botões colados na carta */
.mt-teclas { display: none; }
@media (min-width: 60em) {
  .mt-deck { max-width: 31rem; padding-top: 22px; }
  .mt-deck-cab { margin-bottom: 16px; }
  .mt-pilha { height: clamp(26rem, calc(100svh - 300px), 40rem); }
  .mt-botoes { margin-top: 18px; }
  .mt-dica { text-align: center; }
  .mt-teclas { justify-content: center; display: flex; gap: 18px; margin-top: 10px; color: var(--g6); font-size: .8125rem; }
  .mt-teclas span { display: inline-flex; align-items: center; gap: 8px; }
  .mt-teclas kbd { min-width: 1.75rem; height: 1.75rem; padding: 0 6px; border-radius: 8px; border: 1px solid var(--linha-forte); display: inline-grid; place-items: center; font: 500 .8125rem/1 var(--corpo); color: #fff; background: var(--g2); }
  .mt-card h2 { font-size: 1.625rem; }
  .mt-selo { font-size: 1.25rem; padding: 12px 22px 12px 12px; }
  .mt-selo i { width: 2.5rem; height: 2.5rem; }
}

/* capa do perfil automática: a foto da pessoa vira um fundo desfocado (sempre harmoniza); sem foto, degradê no tom do nome */
.pf-fundo { background: radial-gradient(70% 90% at 15% 20%, hsl(var(--h) 45% 26%), transparent 70%), radial-gradient(60% 80% at 85% 30%, hsl(calc(var(--h) + 50) 40% 20%), transparent 70%), #0b0b0b; }
html:not(.cor) .pf-fundo { filter: grayscale(1); }
.pf-fundo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.6); filter: blur(46px) saturate(1.5) brightness(.85); opacity: .85; }
html:not(.cor) .pf-fundo img { filter: blur(46px) grayscale(1) brightness(.75); }
html.cor .pf-fundo { background: radial-gradient(70% 90% at 15% 20%, hsl(var(--h) 70% 38%), transparent 70%), radial-gradient(60% 80% at 85% 30%, hsl(calc(var(--h) + 60) 70% 34%), transparent 70%), #0b0b0b; }
html.cor .pf-fundo.com-foto { background: #0b0b0b; }

/* painel CSR: certificados e e-mails */
.cert-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 16px; align-items: start; }
.cert-box { padding: 20px; border-radius: 22px; background: var(--cartao); border: 1px solid var(--linha); min-width: 0; display: grid; gap: 12px; }
.cert-box h2 { font: 400 1.375rem/1.2 var(--display); }
.cert-h3 { font-weight: 500; font-size: 1rem; margin-top: 10px; }
.cert-lista { display: grid; gap: 4px; max-height: 26rem; overflow: auto; overscroll-behavior: contain; }
.cert-i, .cert-todos { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; min-width: 0; }
.cert-i:hover { background: var(--g2); }
.cert-i span { display: grid; min-width: 0; }
.cert-i b { font-weight: 500; overflow-wrap: anywhere; }
.cert-i small { color: var(--g6); font-size: .8125rem; overflow-wrap: anywhere; }
.cert-todos { font-size: .875rem; color: var(--g7); border-bottom: 1px solid var(--linha); border-radius: 0; }
.cert-bts { display: flex; gap: 8px; flex-wrap: wrap; }
.em-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 10px; margin-bottom: 18px; }
.em-tipo { padding: 14px 16px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); display: grid; gap: 2px; min-width: 0; container-type: inline-size; }
.em-tipo b { font: 300 clamp(1.5rem, 26cqi, 2rem)/1 var(--display); }
.em-tipo span { font-size: .8125rem; color: var(--g7); overflow-wrap: anywhere; }
.em-falha { color: #ff8a8a; font-size: .75rem; }
.em-lista { display: grid; gap: 2px; }
.em-l { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; }
.em-l:nth-child(odd) { background: var(--g1, #0c0c0c); }
.em-st { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; font-size: .75rem; font-weight: 600; }
.em-l.falha .em-st { background: #ff8a8a; }
.em-l b { font-weight: 500; display: block; }
.em-l small { color: var(--g6); font-size: .8125rem; overflow-wrap: anywhere; }
.em-l time { color: var(--g6); font-size: .75rem; white-space: nowrap; }
/* impressão em lote: um certificado por página */
.cert-lote { display: grid; gap: 28px; justify-items: center; }
.cert-lote-cab { width: 100%; max-width: 60rem; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cert-lote-cab > div { display: grid; }
.cert-lote-cab small { color: var(--g6); }
@media print { .cert-lote { gap: 0; } .cert-lote .cert { page-break-after: always; break-after: page; } .cert-lote-cab { display: none !important; } }

/* comunidade no desktop: três colunas (meu cartão · feed · eventos e top 5) */
.com-lado { display: none; }
@media (min-width: 1100px) {
  .com-grade { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 38rem) minmax(0, 19rem); justify-content: center; gap: 28px; align-items: start; margin-top: 18px; }
  .com-grade .com-feed { margin: 0; max-width: none; }
  .com-lado { display: grid; gap: 16px; position: sticky; top: 92px; min-width: 0; }
}
.com-card { border: 1px solid var(--linha); border-radius: 18px; background: var(--g1, #0d0d0d); padding: 18px; display: grid; gap: 12px; min-width: 0; }
.com-card h3 { font: 600 .75rem/1.2 var(--corpo); letter-spacing: .08em; text-transform: uppercase; color: var(--g6); }
.com-eu-id { display: grid; justify-items: center; text-align: center; gap: 6px; min-width: 0; }
.com-eu-id b { font: 400 1.125rem/1.2 var(--display); overflow-wrap: anywhere; }
.com-eu-id small, .com-falta { color: var(--g6); font-size: .8125rem; overflow-wrap: anywhere; }
.com-nv { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .875rem; min-width: 0; }
.com-nv span { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-nv b { flex: none; color: var(--g8); font-weight: 500; }
.com-barra { height: 6px; border-radius: 99px; background: var(--linha); overflow: hidden; }
.com-barra i { display: block; height: 100%; border-radius: inherit; background: #fff; }
html.cor .com-barra i { background: var(--aurora); }
.com-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border-top: 1px solid var(--linha); padding-top: 12px; text-align: center; }
.com-nums b { display: block; font: 400 1.25rem/1.1 var(--display); }
.com-nums small { color: var(--g6); font-size: .75rem; overflow-wrap: anywhere; }
.com-links { display: grid; border-top: 1px solid var(--linha); padding-top: 4px; }
.com-links a, .com-mais { font-size: .875rem; color: var(--g8); padding: 8px 0; }
.com-links a:hover, .com-mais:hover { color: #fff; }
.com-ev { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; }
.com-ev-f { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--linha); }
.com-ev-f img, .com-ev-f svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.com-ev-t { display: grid; gap: 2px; min-width: 0; }
.com-ev-t small { color: var(--g6); font-size: .75rem; }
.com-ev-t b { font-size: .875rem; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.com-ev:hover b { text-decoration: underline; }
.com-top { display: grid; grid-template-columns: 1.25rem auto minmax(0, 1fr) auto; gap: 10px; align-items: center; min-width: 0; padding: 4px 0; }
.com-top em { font-style: normal; color: var(--g6); font-size: .8125rem; text-align: center; }
.com-top span { display: grid; min-width: 0; }
.com-top span b { font-size: .875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-top span small { color: var(--g6); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-top > b { font-size: .8125rem; color: var(--g8); font-weight: 500; }
.com-top.eu span b { color: #fff; }

/* selo do gesto ancorado no canto de cima (lado oposto ao movimento), o % some enquanto arrasta */
.mt-selo { top: 30px; }
.mt-selo-q { left: 18px; right: auto; transform-origin: left center; transform: rotate(-10deg) scale(calc(.6 + var(--q, 0) * .4)); }
.mt-selo-d { left: auto; right: 18px; transform-origin: right center; transform: rotate(10deg) scale(calc(.6 + var(--dp, 0) * .4)); }
.mt-pct { transition: opacity .15s; opacity: calc(1 - max(var(--q, 0), var(--dp, 0)) * 2); }

/* painel: entrada pela conta, papéis, equipe e modo da plataforma */
.csr-entrar { max-width: 32rem; padding-top: 56px; padding-bottom: 80px; }
.csr-conta { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; background: #fff; color: #000; text-align: left; }
.csr-conta span { display: grid; min-width: 0; }
.csr-conta b { font-weight: 600; overflow-wrap: anywhere; }
.csr-conta small { color: #555; font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csr-conta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.csr-mestra { margin-top: 22px; border-top: 1px solid var(--linha); padding-top: 14px; }
.csr-mestra summary { cursor: pointer; color: var(--g6); font-size: .875rem; }
.csr-mestra .form { margin-top: 14px; }
.csr-estado { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 10px 12px; margin: 10px 0 14px; border-radius: 14px; border: 1px solid var(--linha-forte); font-size: .875rem; font-weight: 600; }
.csr-estado i { width: 9px; height: 9px; border-radius: 50%; background: #ffb547; box-shadow: 0 0 0 4px rgba(255,181,71,.18); grid-row: span 2; }
.csr-estado.real i { background: #3ddc84; box-shadow: 0 0 0 4px rgba(61,220,132,.18); }
.csr-estado small { grid-column: 2; color: var(--g6); font-weight: 400; font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-exemplo { color: #ffb547; border-color: rgba(255,181,71,.4); }
.csr-papeis { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 10px; margin: 18px 0; }
.csr-papeis div { border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; display: grid; gap: 4px; min-width: 0; }
.csr-papeis small { color: var(--g6); font-size: .8125rem; }
.csr-add { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 12px; margin-bottom: 16px; }
.csr-add input, .csr-add select, .csr-membro select { min-width: 0; height: 44px; border-radius: 12px; border: 1px solid var(--linha-forte); background: var(--g1, #0d0d0d); color: inherit; padding: 0 12px; font: inherit; }
@media (max-width: 40em) { .csr-add { grid-template-columns: minmax(0, 1fr) auto; } .csr-add button { grid-column: 1 / -1; } }
.csr-equipe { display: grid; gap: 8px; }
.csr-membro { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 14px; }
.csr-membro span { display: grid; min-width: 0; }
.csr-membro b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csr-membro small { color: var(--g6); font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 40em) { .csr-membro { grid-template-columns: auto minmax(0, 1fr) auto; } .csr-membro select { grid-column: 1 / -1; grid-row: 2; } }
.csr-plat { margin-top: 18px; border: 1px solid var(--linha-forte); border-radius: 22px; padding: 22px; display: grid; gap: 18px; max-width: 46rem; }
.csr-plat-topo { display: flex; gap: 14px; align-items: center; min-width: 0; }
.csr-plat-topo div { display: grid; min-width: 0; }
.csr-plat-topo b { font: 400 1.5rem/1.1 var(--display); }
.csr-plat-topo small { color: var(--g6); }
.csr-plat-luz { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #ffb547; box-shadow: 0 0 0 6px rgba(255,181,71,.16); }
.csr-plat.real .csr-plat-luz { background: #3ddc84; box-shadow: 0 0 0 6px rgba(61,220,132,.16); animation: pulsar 2s ease-in-out infinite; }
@keyframes pulsar { 50% { box-shadow: 0 0 0 10px rgba(61,220,132,.06); } }
.csr-plat-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 10px; }
.csr-plat-nums div { border: 1px solid var(--linha); border-radius: 14px; padding: 12px; display: grid; gap: 2px; min-width: 0; }
.csr-plat-nums b { font: 400 1.75rem/1 var(--display); }
.csr-plat-nums small { color: var(--g6); font-size: .8125rem; overflow-wrap: anywhere; }
.csr-plat-lista { display: grid; gap: 8px; padding-left: 1.1em; color: var(--g8); font-size: .9375rem; }
.csr-plat-conf { display: grid; gap: 8px; border-top: 1px solid var(--linha); padding-top: 16px; }
.csr-plat-conf label { font-size: .875rem; color: var(--g8); }
.csr-plat-conf input { height: 48px; border-radius: 12px; border: 1px solid var(--linha-forte); background: transparent; color: inherit; padding: 0 14px; font: 600 1rem var(--corpo); letter-spacing: .08em; max-width: 20rem; }
.csr-plat-conf button { justify-self: start; }
.csr-plat-nota { color: var(--g6); font-size: .875rem; }

/* listas em lotes: botão "carregar mais" no lugar da rolagem infinita */
.mais-lote { display: flex; justify-content: center; margin: 22px 0 8px; }
.mais-lote:empty { display: none; }
.mais-lote .botao { display: inline-flex; align-items: center; gap: 10px; }
.mais-lote .botao small { color: var(--g6); font-weight: 400; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.mais-lote .tl-carrega { display: inline-flex; }
[data-lote] > [hidden] { display: none !important; }
.cartao-mais { flex: none; display: grid; place-content: center; justify-items: center; gap: 6px; min-height: 100%; width: min(12rem, 60vw); border: 1px dashed var(--linha-forte); border-radius: 22px; color: var(--g8); text-align: center; padding: 18px; scroll-snap-align: start; }
.cartao-mais b { font: 300 2rem/1 var(--display); color: #fff; }
.cartao-mais:hover { border-color: #fff; color: #fff; }

/* app instalável: convite, guia do iPhone, cartão nos ajustes e aviso de nova versão */
.pwa-convite { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 8px 4px 4px; }
.pwa-ic { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 14px 40px rgba(176,92,255,.28), 0 0 0 1px rgba(255,255,255,.08); animation: pwaEntra .7s var(--mola, cubic-bezier(.2,.9,.3,1.2)) both; }
@keyframes pwaEntra { from { transform: translateY(10px) scale(.8); opacity: 0; } }
.pwa-convite h2 { font: 300 1.625rem/1.1 var(--display); letter-spacing: -0.02em; }
.pwa-convite p { color: var(--g7); max-width: 32ch; }
.pwa-vant { list-style: none; display: grid; gap: 8px; width: 100%; max-width: 22rem; margin: 6px 0 8px; text-align: left; }
.pwa-vant li { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; color: var(--g8); }
.pwa-vant li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .45em; border-radius: 50%; background: #fff; }
html.cor .pwa-vant li::before { background: var(--aurora); }
.pwa-convite .botao-bloco { width: 100%; max-width: 22rem; }
.pwa-passos { list-style: none; display: grid; gap: 10px; width: 100%; max-width: 22rem; margin: 4px 0 10px; }
.pwa-passos li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 16px; text-align: left; font-size: .9375rem; }
.pwa-n { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; font-weight: 600; font-size: .875rem; }
.pwa-passos i { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 10px; background: var(--g2); color: #3FA9FF; }
.pwa-passos svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pwa-card { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: center; }
.pwa-card[hidden] { display: none !important; }
.pwa-card img { width: 56px; height: 56px; border-radius: 14px; }
.pwa-card p { color: var(--g6); font-size: .875rem; margin-top: 2px; }
.pwa-card .aj-t { margin: 0; }
.pwa-card .botao { grid-column: 1 / -1; justify-self: start; }
.aviso-acao { display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.aviso-acao button { flex: none; font: 600 .875rem/1 var(--corpo); padding: 8px 12px; border-radius: 999px; background: #000; color: #fff; }
/* aberto como app: sem rolagem elástica no fundo e sem seleção acidental nos controles */
html.app body { overscroll-behavior-y: none; }
html.app .tab-bar a, html.app button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* marca Juntos (abraço, do Diego): branca no P&B, nas cores da marca no modo colorido */
.marca-juntos { display: inline-block; aspect-ratio: 620 / 733; background: #fff; -webkit-mask: url(/marca/juntos-branco.webp) center / contain no-repeat; mask: url(/marca/juntos-branco.webp) center / contain no-repeat; }
/* no modo colorido, as cores da marca (roxo clareado para ler no fundo preto) */
html.cor .marca-juntos { -webkit-mask: none; mask: none; background: url(/marca/juntos-neon.webp) center / contain no-repeat; }
.sp-juntos { height: 5.5rem; }
.sp-nome { display: flex; justify-content: center; }
.logo-tcs { gap: 12px; }
.topo-sep { width: 1px; height: 26px; background: rgba(255,255,255,.28); }
.topo-juntos { height: 34px; }
.sp-juntos { height: 6rem; }
@media (min-width: 60em) { .topo-juntos { height: 38px; } .logo-tcs { gap: 14px; } }
@media (max-width: 22em) { .topo-sep, .topo-juntos { display: none; } }

/* baralho do match: sem textos de ajuda embaixo (o gesto e os botões já explicam) e sem rolagem da página */
.mt-deck .mt-dica, .mt-deck .mt-teclas { display: none !important; }
@media (min-width: 60em) { .mt-pilha { height: clamp(26rem, calc(100svh - 250px), 42rem); } }
/* celular: a carta ocupa o que sobra entre o cabeçalho e a barra de abas, sem empurrar a página */
@media (max-width: 59.99em) { .mt-pilha { height: clamp(22rem, calc(100svh - 19.5rem - var(--seg-b, 0px)), 36rem); min-height: 0; } }
.csr-entrar .botao, .mais-lote .botao, .pwa-convite .botao { height: auto; min-height: 3rem; white-space: normal; padding-top: .6em; padding-bottom: .6em; text-align: center; }
.csr-lado a.csr-estado { display: grid; grid-template-columns: auto minmax(0, 1fr); justify-content: stretch; align-items: center; row-gap: 2px; padding: 10px 12px; }
.csr-lado a.csr-estado i { flex: none; align-self: center; }

/* painel: gráfico semanal (SVG só para linha/área; pontos e textos em HTML, sem deformar) */
.g2-res { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 14px; min-width: 0; }
.g2-res b { font: 300 2rem/1 var(--display); }
.g2-res span { color: var(--g6); font-size: .8125rem; }
.g2-res em { font-style: normal; font-size: .75rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--g2); white-space: nowrap; }
.g2-res em.sobe { color: #3ddc84; } .g2-res em.desce { color: #ff8a80; }
.g2 { color: #fff; }
html.cor .g2 { color: #ff8a3d; }
.g2-plot { position: relative; height: 180px; margin: 10px 8px 0 2.25rem; }
.g2-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.g2-y { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(255,255,255,.09); }
.g2-y i { position: absolute; right: 100%; transform: translate(-8px, -50%); font: 500 .6875rem/1 var(--corpo); font-style: normal; color: var(--g6); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g2-pt { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #000; box-shadow: 0 0 0 2px currentColor; outline: none; cursor: default; transition: transform .15s; }
.g2-pt b, .g2-pt small { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; }
.g2-pt b { bottom: calc(100% + 8px); font: 600 .75rem/1 var(--corpo); color: #000; background: #fff; padding: 4px 7px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.g2-pt small { display: none; }
.g2-pt:hover, .g2-pt:focus-visible { transform: scale(1.35); z-index: 2; }
.g2-pt:hover b, .g2-pt:focus-visible b, .g2-pt.ult b { opacity: 1; }
.g2-pt.ult { background: currentColor; }
.g2-pt:first-of-type b { left: 0; transform: none; }
.g2-pt.ult b { left: auto; right: -4px; transform: none; }
.g2-x { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin: 10px 8px 0 2.25rem; }
.g2-x span { font-size: .6875rem; color: var(--g6); text-align: center; white-space: nowrap; overflow: visible; font-variant-numeric: tabular-nums; }
.g2-x span:last-child { text-align: right; }
@media (max-width: 40em) { .g2-plot { height: 150px; } }
.g2-x { display: block; position: relative; height: 1rem; }
.g2-x span { position: absolute; top: 0; transform: translateX(-50%); }
.g2-x span:last-child { transform: translateX(-100%); text-align: right; }

/* troca de página: sem sobreposição das duas telas (dava sensação de página duplicada) */
html.vt-rota::view-transition-old(root) { animation: vtSai .12s ease-in both; }
html.vt-rota::view-transition-new(root) { animation: vtEntra .3s cubic-bezier(.2, .8, .2, 1) .12s both; }
html.vt-rota #topo { view-transition-name: topo; }
html.vt-rota .abas { view-transition-name: abas; }
html.vt-rota::view-transition-group(topo), html.vt-rota::view-transition-group(abas) { animation-duration: .2s; }
html.vt-rota::view-transition-old(topo), html.vt-rota::view-transition-old(abas) { animation: none; opacity: 0; }
html.vt-rota::view-transition-new(topo), html.vt-rota::view-transition-new(abas) { animation: none; }
@keyframes vtSai { to { opacity: 0; } }
@keyframes vtEntra { from { opacity: 0; transform: translateY(10px); } }

/* iPhone: o Safari dá zoom ao tocar em campo com fonte menor que 16px — em telas de toque todo campo tem 16px */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), textarea, select, [contenteditable="true"] { font-size: max(16px, 1em) !important; }
}

/* reações em relatos e eventos concluídos */
.tl-relato .tl-acoes, .tl-ev-reage .tl-acoes { margin-top: 12px; }
.tl-ev-reage { grid-column: 1 / -1; padding: 0 16px 14px; min-width: 0; }
.tl-ev-reage .tl-acoes { border-top: 1px solid var(--linha); padding-top: 10px; }

/* perfil: crachá compacto numa linha (logo | Employee ID | nível), métricas no fim, abas com altura padrão */
.pf-cracha { flex-wrap: nowrap; padding: 12px 14px 12px 16px; gap: 14px; min-width: 0; align-items: center; }
.pf-cracha > div { flex: 1 1 auto; }
.pf-cracha b { font-size: 1.375rem; overflow-wrap: normal; white-space: nowrap; }
.pf-cracha-n { position: static; order: 0; flex: none; flex-basis: auto; align-self: center; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(0,0,0,.18); font-size: .625rem; font-weight: 600; letter-spacing: .1em; color: rgba(255,255,255,.85); white-space: nowrap; }
@media (max-width: 22em) { .pf-cracha { flex-wrap: wrap; } .pf-cracha-n { margin-left: auto; } }
@media (min-width: 48em) { .pf-cracha { align-self: center; } }
.pf-resumo { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--linha); padding-bottom: 28px; }
.pf-resumo h2 { font: 600 .75rem/1.2 var(--corpo); letter-spacing: .1em; text-transform: uppercase; color: var(--g6); }
.pf-resumo .pf-nums { margin-top: 12px; }
#pf-corpo { transition: min-height .32s cubic-bezier(.2, .8, .2, 1); } /* troca de aba: a altura desliza da antiga para a nova (sem pulo e sem espaço vazio) */

/* ===== Match: continuar de onde parou ===== */
.mt-cont-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 16px 18px; margin: 22px 0 12px; border-radius: 20px; background: #fff; color: #000; overflow: hidden; }
.mt-cont-card small { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #666; }
.mt-cont-card b { display: block; font: 400 1.125rem/1.25 var(--display); overflow-wrap: anywhere; }
.mt-cont-card em { display: block; font-style: normal; font-size: .8125rem; color: #555; }
.mt-cont-ic { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: #000; color: #fff; }
html.cor .mt-cont-ic { background: var(--aurora); }
.mt-cont-ic svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; }
.mt-cont-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.08); }
.mt-cont-barra i { display: block; height: 100%; background: #000; }
html.cor .mt-cont-barra i { background: var(--aurora); }

/* ===== Match: fim com cartas no estilo TCG ===== */
.mt-fim { padding-bottom: 40px; overflow-x: clip; }
.mt-fim-cab { padding-top: 18px; text-align: center; }
.mt-fim-cab .mt-voltar-l { justify-content: flex-start; text-align: left; }
.mt-fim-cab .mt-d { margin-inline: auto; }
.tcg-palco { --cw: min(15.5rem, 44vw); position: relative; height: calc(var(--cw) * 1.5 + 70px); margin: 18px auto 8px; max-width: 64rem; perspective: 1400px; display: grid; place-items: center; }
@media (min-width: 47.5em) { .tcg-palco { --cw: 16.5rem; height: calc(var(--cw) * 1.5 + 90px); } }
.tcg-luz { position: absolute; inset: 10% 10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.12), transparent 70%); filter: blur(10px); opacity: 0; transition: opacity 1.2s; pointer-events: none; }
html.cor .tcg-luz { background: radial-gradient(closest-side, rgba(176,92,255,.35), rgba(255,79,129,.12) 55%, transparent 75%); }
.tcg-palco.leque .tcg-luz, .tcg-palco.pronto .tcg-luz { opacity: 1; }
.tcg { --x: 0px; --y: 0px; --r: 0deg; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: absolute; width: var(--cw); aspect-ratio: 5 / 7.4; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; border-radius: 18px;
  transform: translate(var(--x), var(--y)) rotate(var(--r)); transition: transform .7s cubic-bezier(.2, .9, .25, 1.15); -webkit-tap-highlight-color: transparent; }
.tcg-in { position: absolute; inset: 0; border-radius: inherit; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform .9s cubic-bezier(.3, 1.3, .4, 1); }
.tcg.virada .tcg-in { transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.tcg.virada.mira .tcg-in { transition: transform .12s linear; }
.tcg-verso, .tcg-frente { position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.tcg-verso { transform: rotateY(180deg); display: grid; place-items: center; background: #0b0b0b; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 20px 50px rgba(0,0,0,.6); }
.tcg-verso-arte { position: absolute; inset: 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 12px), repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 12px), radial-gradient(circle at 50% 50%, #1d1d1d, #050505 70%); }
html.cor .tcg-verso-arte { background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 12px), repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 12px), radial-gradient(circle at 50% 40%, #3a1460, #120318 72%); }
.tcg-marca { position: relative; width: 42%; height: auto; }
.tcg-frente { display: flex; flex-direction: column; background: #111; padding: 7px; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 24px 60px rgba(0,0,0,.65); }
html.cor .tcg-frente { border-color: transparent; background: linear-gradient(#121212, #121212) padding-box, linear-gradient(135deg, #ff8a3d, #ff4f81, #b05cff, #3fa9ff) border-box; border: 2px solid transparent; }
.tcg-foto { position: relative; flex: 0 0 54%; border-radius: 12px; overflow: hidden; background: #222; }
.tcg-foto img, .tcg-foto svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcg-pct { position: absolute; top: 8px; right: 8px; padding: 4px 9px; border-radius: 999px; background: #fff; color: #000; font: 500 .875rem/1 var(--display); }
html.cor .tcg-pct { background: var(--aurora); color: #fff; }
.tcg-pct b { font-weight: 500; }
.tcg-c { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px 6px 4px; min-height: 0; overflow: hidden; }
.tcg-ong { display: flex; align-items: center; gap: 7px; font-size: .6875rem; color: var(--g7); min-width: 0; }
.tcg-ong span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcg-ong .logo-ong { width: 1.375rem; height: 1.375rem; flex: none; }
.tcg-t { font: 400 clamp(.9375rem, 2.6vw, 1.125rem)/1.18 var(--display); letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tcg-m { display: flex; align-items: center; gap: 6px; font-size: .6875rem; color: var(--g6); min-width: 0; margin-top: auto; }
.tcg-m + .tcg-m { margin-top: 0; }
.tcg-m span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcg-m svg { width: .875rem; height: .875rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tcg-holo { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: color-dodge; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.55), transparent 42%), linear-gradient(115deg, transparent 20%, rgba(255,138,61,.35) 36%, rgba(255,79,129,.35) 44%, rgba(176,92,255,.35) 52%, rgba(63,169,255,.35) 60%, transparent 76%);
  background-size: 100% 100%, 220% 220%; background-position: center, calc(var(--mx) * 1.2) calc(var(--my) * 1.2); }
.tcg.mira .tcg-holo { opacity: .7; }
html:not(.cor) .tcg-holo { filter: grayscale(1); }
/* sequência: caem viradas no centro, abrem em leque, viram uma a uma */
.tcg-palco:not(.leque):not(.pronto) .tcg { transform: translate(0, 0) rotate(calc(var(--i) * 3deg - 3deg)); }
.tcg-palco.cai .tcg { animation: tcgCai .8s cubic-bezier(.2, .9, .3, 1.1) both; animation-delay: calc(var(--i) * 120ms); }
@keyframes tcgCai { from { transform: translate(0, -70vh) rotate(-25deg) scale(1.2); opacity: 0; } 60% { opacity: 1; } }
.tcg-palco.leque .tcg { animation: none; }
.tcg-palco.leque .tcg.virada:not(.assentou) { animation: tcgPulo .9s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes tcgPulo { 30% { transform: translate(var(--x), calc(var(--y) - 26px)) rotate(var(--r)) scale(1.08); } }
.tcg-palco.pronto .tcg { animation: tcgFlutua 5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.4s); }
@keyframes tcgFlutua { 50% { transform: translate(var(--x), calc(var(--y) - 6px)) rotate(var(--r)); } }
.tcg-palco.pronto .tcg:hover, .tcg-palco.pronto .tcg:focus-visible { animation-play-state: paused; z-index: 20 !important; }
@media (hover: hover) { .tcg-palco.pronto .tcg:hover { animation: none; transform: translate(var(--x), calc(var(--y) - 14px)) rotate(calc(var(--r) * .4)) scale(1.04); } }
.tcg:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.tcg-flash { position: absolute; inset: -6px; border-radius: 22px; pointer-events: none; z-index: 3; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 65%); animation: tcgFlash .8s ease-out both; }
@keyframes tcgFlash { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.5); } }
.tcg-faisca { position: fixed; z-index: 95; width: 6px; height: 6px; margin: -3px; border-radius: 50%; pointer-events: none; background: #fff; box-shadow: 0 0 10px #fff; animation: tcgFaisca 1s cubic-bezier(.2, .8, .3, 1) both; }
html.cor .tcg-faisca { background: hsl(var(--h) 100% 70%); box-shadow: 0 0 12px hsl(var(--h) 100% 60%); }
@keyframes tcgFaisca { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
/* carta em foco */
.tcg-foco { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: max(16px, var(--seg-t)) 16px max(16px, var(--seg-b)); background: rgba(0,0,0,0); transition: background .4s; overflow-y: auto; }
.tcg-foco.aberto { background: rgba(0,0,0,.82); }
.tcg-foco-in { position: relative; display: grid; justify-items: center; gap: 14px; width: min(22rem, 100%); }
.tcg-foco-carta { position: relative; width: min(19rem, 78vw, calc((100svh - 15rem) / 1.48)); aspect-ratio: 5 / 7.4; border-radius: 20px; transition: transform .45s cubic-bezier(.2, .9, .25, 1.1); }
.tcg-foco-carta .tcg-frente { position: absolute; inset: 0; }
.tcg-foco-carta .tcg-t { font-size: 1.25rem; -webkit-line-clamp: 4; }
.tcg-foco-r, .tcg-foco-b, .tcg-fechar { opacity: 0; transform: translateY(10px); transition: opacity .3s .18s, transform .35s .18s; }
.tcg-foco.aberto .tcg-foco-r, .tcg-foco.aberto .tcg-foco-b, .tcg-foco.aberto .tcg-fechar { opacity: 1; transform: none; }
.tcg-foco-r { color: var(--g8); font-size: .9375rem; text-align: center; max-width: 34ch; }
.tcg-foco-b { display: grid; gap: 8px; width: 100%; }
.tcg-foco-b .botao { width: 100%; }
.tcg-fechar { position: absolute; top: -6px; right: -6px; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 1.5rem; line-height: 1; }
@media (min-width: 47.5em) { .tcg-foco-in { width: min(40rem, 100%); grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; column-gap: 28px; } .tcg-foco-carta { grid-row: span 3; width: 17rem; } .tcg-foco-r { text-align: left; } .tcg-fechar { top: -14px; right: -14px; } }
.mt-fim-nav { justify-content: center; margin-top: 22px; }
@media (prefers-reduced-motion: reduce) { .tcg, .tcg-in { transition: none; animation: none !important; } }
.mt-fim-cab { display: grid; justify-items: center; }
.mt-fim-cab .mt-voltar-l { justify-self: start; margin-bottom: 10px; }
html.sem-trans *, html.sem-trans *::before, html.sem-trans *::after { transition: none !important; }

/* navegação: voltar visível em toda página (menos o início), também no computador; nada depende de teclado ou mouse */
body.com-voltar .topo-voltar { display: grid; }
@media (min-width: 60em) { body.com-voltar .topo-voltar { display: grid; width: 44px; height: 44px; margin-left: -10px; border-radius: 50%; border: 1px solid var(--linha-forte); } body.com-voltar .topo-voltar:hover { background: rgba(255,255,255,.08); } }
.topo-voltar { min-width: 44px; min-height: 44px; }
/* folhas: X sempre visível (no computador não há gesto de arrastar) */
.folha { position: fixed; }
.folha-x { position: absolute; top: 10px; right: 10px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; }
.folha-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.folha-x:hover { background: rgba(255,255,255,.16); }
/* setas dos carrosséis também em telas de toque do computador (sem depender de hover) */
@media (min-width: 60em) { .carr.rola .carr-bt { display: grid; } }
/* alvo de toque mínimo de 44px nos controles pequenos */
@media (pointer: coarse) { .icone-btn, .tl-mais, .mt-mais, .tcg-fechar, .fechar { min-width: 44px; min-height: 44px; } }

/* recarga de atualização: a tela de carregamento não aparece (parece uma troca de página normal) */
html.atualizando #splash { display: none !important; }

/* como funciona: jornada em 4 passos logo abaixo do herói (linha do tempo vertical no celular, horizontal no computador) */
.como { padding-top: 44px; padding-bottom: 12px; }
.como-cab h2 { font: 300 clamp(1.75rem, 5vw, 2.75rem)/1.08 var(--display); letter-spacing: -0.02em; margin-top: 10px; max-width: 20ch; }
.como-passos { list-style: none; position: relative; display: grid; gap: 0; margin-top: 26px; padding: 0; }
.como-p { position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 16px; padding-bottom: 26px; min-width: 0; }
.como-p::before { content: ""; position: absolute; left: calc(1.625rem - .5px); top: 3.25rem; bottom: 0; width: 1px; background: linear-gradient(var(--linha-forte), var(--linha)); }
.como-p:last-child::before { display: none; }
html.cor .como-p::before { background: linear-gradient(#ff8a3d, #ff4f81 40%, #b05cff 80%, #3fa9ff); opacity: .55; }
.como-ic { position: relative; width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; box-shadow: 0 0 0 6px var(--fundo, #000); }
html.cor .como-ic { background: var(--aurora); color: #fff; }
.como-ic svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.como-ic i { position: absolute; right: -4px; top: -4px; width: 1.375rem; height: 1.375rem; border-radius: 50%; display: grid; place-items: center; background: #000; color: #fff; border: 1px solid var(--linha-forte); font: 600 .6875rem/1 var(--corpo); font-style: normal; }
.como-p h3 { font: 400 1.375rem/1.15 var(--display); letter-spacing: -0.01em; margin-top: .55rem; }
.como-p p { color: var(--g7); font-size: .9375rem; margin-top: 6px; max-width: 34ch; }
.como-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 4px; }
@media (min-width: 60em) {
  .como { padding-top: 72px; }
  .como-passos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
  .como-p { grid-template-columns: 1fr; gap: 18px; padding-bottom: 8px; }
  .como-p::before { left: 3.25rem; right: -28px; top: calc(1.625rem - .5px); bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--linha-forte), var(--linha)); }
  html.cor .como-p::before { background: linear-gradient(90deg, #ff8a3d, #ff4f81, #b05cff); }
  .como-p h3 { font-size: 1.75rem; margin-top: 0; }
  .como-acoes { margin-top: 30px; }
}
.como-p.rv { transition-delay: var(--d, 0ms); }

/* conquista compartilhada: em tela estreita com fonte grande, o selo vai para cima do texto */
.tl-conq-post { flex-wrap: wrap; }
.tl-conq-post > div:last-child { flex: 1 1 9rem; }
.tl-conq-post p { overflow-wrap: anywhere; }
/* topo do computador com fonte ampliada: a marca Juntos cede espaço para o menu (o botão de voltar fica) */
@media (min-width: 60em) and (max-width: 75em) { .topo-sep, .topo-juntos { display: none; } }
.topo-nav a { white-space: nowrap; }

/* sem "pulo" ao trocar de página no computador: a rolagem é sempre do html, com a faixa da barra sempre reservada
   (páginas curtas, carregamento, folhas e abertura que travam a rolagem mantêm o mesmo espaço) */
html { overflow-x: hidden; overflow-y: scroll; scrollbar-gutter: stable; scrollbar-color: #2e2e2e #000; }
html.claro-root { scrollbar-color: #bbb #fff; }

/* ===== landing x app ===== */
.so-landing { display: none !important; }
html[data-site="landing"] .so-landing { display: inline-flex !important; }
html[data-site="landing"] .abas, html[data-site="landing"] .topo-nav, html[data-site="landing"] .topo-voltar { display: none !important; }
html[data-site="landing"] body { padding-bottom: 0; }
.abas { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
/* teaser da landing: vagas só no app */
.land-teaser-in { border-radius: 28px; padding: clamp(22px, 4vw, 44px); background: radial-gradient(120% 140% at 0% 0%, #1c1c1c, #0a0a0a 60%); border: 1px solid var(--linha); }
html.cor .land-teaser-in { background: radial-gradient(120% 140% at 0% 0%, rgba(176,92,255,.22), #0a0a0a 60%); }
.land-teaser h2 { font: 300 clamp(1.625rem, 4.5vw, 2.75rem)/1.1 var(--display); letter-spacing: -0.02em; margin-top: 10px; max-width: 22ch; }
.land-teaser .sub { margin-top: 10px; max-width: 52ch; }
.land-teaser .heroi-acoes { margin-top: 20px; }
.land-causas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.land-causas .ficha { cursor: default; }
/* Buscar | Match */
.modo-busca { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 4px; margin: 14px 0 4px; border-radius: 999px; background: var(--g2); border: 1px solid var(--linha); }
.modo-busca a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 500; font-size: .9375rem; color: var(--g7); white-space: nowrap; }
.modo-busca a.on { background: #fff; color: #000; }
html.cor .modo-busca a.on:last-child { background: var(--aurora); color: #fff; }
.modo-busca svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mt .modo-busca { margin-top: 4px; margin-bottom: 14px; }
/* início do app */
.ia-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 22px; flex-wrap: wrap; }
.ia-topo h1 { font: 300 clamp(1.875rem, 6vw, 3rem)/1.05 var(--display); letter-spacing: -0.02em; margin-top: 8px; overflow-wrap: anywhere; }
.ia-nivel { display: grid; justify-items: end; padding: 10px 16px; border-radius: 16px; border: 1px solid var(--linha-forte); }
.ia-nivel span { font-size: .75rem; color: var(--g6); } .ia-nivel b { font: 400 1.375rem/1.1 var(--display); }
.ia-bloco { display: grid; gap: 12px; margin-top: 18px; }
.ia-prox { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; border-radius: 22px; background: #fff; color: #000; }
.ia-prox-f { width: 6.5rem; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #ddd; }
.ia-prox-f img, .ia-prox-f svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.ia-prox-c { display: grid; gap: 3px; min-width: 0; }
.ia-prox-c small { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #666; }
.ia-prox-c b { font: 400 1.125rem/1.2 var(--display); overflow-wrap: anywhere; }
.ia-prox-c em { font-style: normal; font-size: .8125rem; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-prox-cta { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 999px; background: #000; color: #fff; font-weight: 500; }
html.cor .ia-prox-cta { background: var(--aurora); }
.ia-prox-cta svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; }
@media (min-width: 48em) { .ia-prox { grid-template-columns: 7.5rem minmax(0, 1fr) auto; } .ia-prox-f { width: 7.5rem; } .ia-prox-cta { grid-column: auto; padding: 0 20px; } }
.ia-mais { color: var(--g6); font-size: .8125rem; }
.ia-vazio { display: grid; gap: 14px; padding: 20px; border-radius: 22px; border: 1px dashed var(--linha-forte); }
.ia-vazio small { display: block; font-size: .75rem; color: var(--g6); text-transform: uppercase; letter-spacing: .08em; }
.ia-vazio b { font: 400 1.375rem/1.2 var(--display); }
.ia-vazio-b { display: flex; flex-wrap: wrap; gap: 10px; }
.ia-feed { display: grid; gap: 12px; max-width: 38rem; }
/* post público */
.pub-post { max-width: 40rem; padding-top: 24px; padding-bottom: 60px; display: grid; gap: 16px; }
.pub-post .pub-midias { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 6px; padding: 0 16px 14px; }
.pub-post .pub-midias img, .pub-post .pub-midias video { width: 100%; border-radius: 12px; display: block; }
.pub-vaga { padding: 0 16px 16px; color: var(--g6); font-size: .875rem; }
.pub-cta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; align-items: center; padding: 18px; border-radius: 22px; border: 1px solid var(--linha-forte); }
.pub-cta p { color: var(--g6); font-size: .875rem; margin-top: 2px; }
.pub-cta .botao { grid-column: 1 / -1; justify-self: start; }
.tl-publico { margin: -4px 16px 8px; font-size: .75rem; color: #3ddc84; }
.modo-busca { display: flex; width: fit-content; }
@media (max-width: 26em) { .modo-busca svg { display: none; } .modo-busca a { padding: 0 14px; } .modo-busca { max-width: 100%; } }

/* abertura: a máscara da cor é calculada no JS (Safari); antes do primeiro toque, nada de cor */
.abertura:not(.cheia) .ab-cor-env { -webkit-mask-image: linear-gradient(transparent, transparent); mask-image: linear-gradient(transparent, transparent); }

/* início do app: "Na comunidade" em cartões compactos (carrossel) */
.ia-feed { max-width: none; }
.ia-mini { display: flex; flex-direction: column; min-height: 100%; border-radius: 20px; overflow: hidden; background: var(--cartao); border: 1px solid var(--linha); scroll-snap-align: start; }
.ia-mini-f { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--g2); flex: none; }
.ia-mini-f img, .ia-mini-f svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.ia-mini-c { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; min-width: 0; }
.ia-mini-q { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .8125rem; }
.ia-mini-q b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ia-mini-q small { margin-left: auto; flex: none; color: var(--g6); font-size: .75rem; }
.ia-mini-q .avs { display: flex; flex: none; } .ia-mini-q .avs > * + * { margin-left: -8px; }
.ia-mini-t { font-size: .9375rem; line-height: 1.4; color: var(--g8); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ia-mini.so-texto .ia-mini-t { font: 300 1.25rem/1.3 var(--display); color: #fff; -webkit-line-clamp: 6; }
.ia-mini-r { margin-top: auto; display: flex; align-items: center; gap: 6px; color: var(--g6); font-size: .8125rem; }
.ia-mini-r svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ia-mini-r i { font-style: normal; margin-right: 10px; font-variant-numeric: tabular-nums; }
.ia-mini:hover { border-color: var(--linha-forte); }
.ia-feed .ia-mini { height: 22rem; min-height: 0; }
.ia-mini-f { aspect-ratio: auto; height: 11.5rem; }
.ia-mini.so-texto { background: radial-gradient(120% 120% at 0% 0%, #1f1f1f, #0d0d0d 70%); }
html.cor .ia-mini.so-texto { background: radial-gradient(120% 120% at 0% 0%, rgba(176,92,255,.24), #0d0d0d 65%); }
.ia-mini.so-texto .ia-mini-t { flex: 1; display: flex; align-items: center; font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.25; -webkit-line-clamp: unset; overflow: hidden; }
@media (max-width: 47.99em) { .ia-feed .ia-mini { height: 18rem; } .ia-mini-f { height: 9rem; } }