/* ===== 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: hidden; 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 { 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 { 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; } }