@font-face { font-family: 'Baloo 2'; src: url(../assets/fonts/baloo2.woff2) format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url(../assets/fonts/nunito.woff2) format('woff2'); font-weight: 200 1000; font-display: swap; }

:root {
  --navy: #0F2C5C; --navy-2: #173B73; --navy-3: #0A1F42;
  --red: #B3191F; --red-d: #7E1116; --gold: #F2B705; --gold-l: #FFD54A;
  --blue: #1F5FBF; --green: #2E8B3E; --ok: #1E9E5A; --orange: #E2621B;
  --paper: #F5F0E6; --card: #FFFFFF; --ink: #172033; --muted: #5D6678; --line: #E6DECF; --soft: #FBF8F2;
  --r: 18px; --r-s: 12px;
  --sh: 0 1px 2px rgb(15 44 92 / .06), 0 8px 24px -12px rgb(15 44 92 / .25);
  --sh-up: 0 2px 4px rgb(15 44 92 / .08), 0 22px 40px -18px rgb(15 44 92 / .45);
  --mola: cubic-bezier(.34, 1.56, .64, 1);
  --suave: cubic-bezier(.22, 1, .36, 1);
  --t: 'Baloo 2', system-ui, sans-serif; --f: 'Nunito', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font: 15px/1.5 var(--f); color: var(--ink); background: var(--paper);
  background-image: radial-gradient(circle at 12% 8%, rgb(242 183 5 / .10), transparent 32%), radial-gradient(circle at 92% 90%, rgb(179 25 31 / .07), transparent 36%);
  background-attachment: fixed; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--t); line-height: 1.15; margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.ic { width: 20px; height: 20px; flex: none; }
.muted { color: var(--muted); }
.pad { padding: 16px 0; }
code { background: rgb(0 0 0 / .06); padding: 1px 6px; border-radius: 6px; font-size: .9em; }

/* ---------- abertura ---------- */
.abertura { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; grid-auto-flow: column; gap: 4vw; background: radial-gradient(circle at 50% 40%, var(--navy-2), var(--navy-3)); pointer-events: none; animation: abre-sai .6s 1.5s var(--suave) forwards; }
.abertura img { height: min(26vh, 220px); opacity: 0; filter: drop-shadow(0 20px 40px rgb(0 0 0 / .5)); }
.abertura img:first-child { animation: abre-pu .9s .1s var(--mola) forwards; }
.abertura img:last-child { height: min(30vh, 260px); animation: abre-ev .9s .45s var(--mola) forwards; }
@keyframes abre-pu { from { opacity: 0; transform: translateX(-60px) rotate(-12deg) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes abre-ev { from { opacity: 0; transform: translateY(40px) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes abre-sai { to { opacity: 0; visibility: hidden; transform: scale(1.08); } }

/* ---------- moldura ---------- */
#app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.lado { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 20px 14px; color: #fff; background: linear-gradient(170deg, var(--navy-2), var(--navy-3) 70%); overflow: hidden; }
.lado::after { content: ''; position: absolute; inset: auto -40px -60px -40px; height: 220px; background: radial-gradient(ellipse at 50% 100%, rgb(179 25 31 / .55), transparent 70%); pointer-events: none; }
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; border-bottom: 1px solid rgb(255 255 255 / .12); }
.marca img { width: 52px; filter: drop-shadow(0 4px 10px rgb(0 0 0 / .4)); transition: transform .5s var(--mola); }
.marca:hover img { transform: rotate(-8deg) scale(1.08); }
.marca b { display: block; font: 800 20px/1 var(--t); }
.marca small { color: var(--gold-l); font-weight: 700; letter-spacing: .04em; }
.lado nav { display: flex; flex-direction: column; gap: 4px; position: relative; z-index: 1; }
.lado nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; font-weight: 700; color: rgb(255 255 255 / .78); transition: background .2s, color .2s, transform .3s var(--mola); }
.lado nav a:hover { background: rgb(255 255 255 / .08); color: #fff; transform: translateX(4px); }
.lado nav a.on { background: var(--gold); color: var(--navy-3); box-shadow: 0 8px 20px -8px rgb(242 183 5 / .8); }
.lado nav a.on .ic { animation: pula .6s var(--mola); }
.lado-ev { margin-top: auto; width: 100%; position: relative; z-index: 1; filter: drop-shadow(0 8px 16px rgb(0 0 0 / .45)); animation: flutua 6s ease-in-out infinite; }
.corpo { min-width: 0; }
.topo { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: rgb(245 240 230 / .82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topo h1 { font-size: 24px; color: var(--navy); }
.salvo { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; color: var(--ok); opacity: 0; }
.salvo .ic { width: 16px; height: 16px; }
.salvo.pisca { animation: salvo 1.6s var(--suave); }
@keyframes salvo { 0% { opacity: 0; transform: translateY(6px); } 15%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }
main { padding: 24px 32px 64px; max-width: 1320px; display: flex; flex-direction: column; gap: 20px; }

/* entrada da tela */
.enter > *, .enter .stagger > * { animation: sobe .6s var(--suave) both; }
.enter > * { animation-delay: calc(var(--n, 0) * 70ms); }
.enter > :nth-child(2) { --n: 1; } .enter > :nth-child(3) { --n: 2; } .enter > :nth-child(4) { --n: 3; } .enter > :nth-child(5) { --n: 4; } .enter > :nth-child(6) { --n: 5; }
.enter .stagger > * { animation-delay: calc(120ms + var(--i, 0) * 55ms); }
@keyframes sobe { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pula { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-10deg); } 100% { transform: scale(1); } }
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
::view-transition-old(root) { animation: .22s ease both vt-sai; }
::view-transition-new(root) { animation: .32s var(--suave) both vt-entra; }
@keyframes vt-sai { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; } }

/* ---------- peças ---------- */
.card { background: var(--card); border-radius: var(--r); padding: 20px 22px; box-shadow: var(--sh); border: 1px solid rgb(15 44 92 / .05); }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.card-h h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; color: var(--navy); }
.card-h h2 .ic { color: var(--red); }
.pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 99px; background: var(--soft); border: 1px solid var(--line); font: 800 13px/1.6 var(--t); color: var(--navy); white-space: nowrap; }
.pill.ok { background: #E3F5EA; border-color: #BFE6CD; color: var(--ok); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 12px; border: 0; background: var(--red); color: #fff; font-weight: 800; cursor: pointer; white-space: nowrap; box-shadow: 0 6px 16px -8px rgb(179 25 31 / .8); transition: transform .25s var(--mola), box-shadow .2s, background .2s; position: relative; overflow: hidden; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -10px rgb(179 25 31 / .8); }
.btn:active { transform: scale(.96); }
.btn.sec { background: var(--soft); color: var(--navy); border: 1px solid var(--line); box-shadow: none; }
.btn.sec:hover { background: #fff; border-color: var(--navy); }
.btn.claro { background: rgb(255 255 255 / .16); color: #fff; border: 1px solid rgb(255 255 255 / .35); box-shadow: none; backdrop-filter: blur(4px); }
.btn.claro:hover { background: #fff; color: var(--navy); }
.btn.grande { padding: 14px 22px; font-size: 16px; background: var(--navy); box-shadow: 0 8px 20px -10px var(--navy); }
.btn.carregando { pointer-events: none; color: transparent; }
.btn.carregando::after { content: ''; position: absolute; inset: 50% auto auto 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; border: 3px solid rgb(255 255 255 / .4); border-top-color: #fff; animation: gira .7s linear infinite; }
.btn.sec.carregando::after { border-color: rgb(15 44 92 / .2); border-top-color: var(--navy); }
@keyframes gira { to { transform: rotate(360deg); } }
.icone-btn { border: 0; background: none; padding: 6px; border-radius: 8px; color: var(--muted); cursor: pointer; transition: color .2s, background .2s, transform .2s var(--mola); }
.icone-btn:hover { color: var(--red); background: #FBE9EA; transform: scale(1.1); }
.link { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-weight: 800; color: var(--red); }
.link .ic { width: 16px; transition: transform .25s var(--mola); }
.link:hover .ic { transform: translateX(4px); }
.fonte { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.fonte-tag { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--soft); padding: 3px 9px; border-radius: 99px; }
input, select, textarea { border: 1.5px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 12px; outline: none; transition: border-color .2s, box-shadow .2s; min-width: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgb(31 95 191 / .14); }
.inline { border-color: transparent; background: transparent; padding: 5px 8px; width: 100%; }
.inline:hover { border-color: var(--line); background: #fff; }
.vazio { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px; text-align: center; color: var(--muted); }
.vazio > .ic { width: 44px; height: 44px; color: var(--gold); animation: flutua 3s ease-in-out infinite; }
.aviso { display: flex; align-items: center; gap: 4px; margin-top: 3px; color: #A35A00; font-size: 12px; font-weight: 700; animation: sobe .35s var(--suave); }
.aviso .ic { width: 14px; height: 14px; }
.avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--c); color: #fff; font: 800 13px/1 var(--t); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18); }
.vazio-av { width: 40px; height: 40px; background: var(--soft); color: var(--muted); border: 2px dashed var(--line); box-shadow: none; }

/* check com mola */
.lista-check { display: flex; flex-direction: column; gap: 2px; }
.check { display: flex; align-items: flex-start; gap: 12px; padding: 8px 10px; border-radius: 12px; cursor: pointer; transition: background .2s; }
.check:hover { background: var(--soft); }
.check input, .mini-check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 8px; border: 2px solid #C9C0AE; background: #fff; transition: all .3s var(--mola); }
.check .box .ic { width: 16px; height: 16px; color: #fff; stroke-width: 3; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s .05s var(--suave); }
.check.on .box { background: var(--ok); border-color: var(--ok); transform: scale(1.08); }
.check.on .box .ic { stroke-dashoffset: 0; }
.check.on .txt { color: var(--muted); text-decoration: line-through; text-decoration-color: rgb(30 158 90 / .5); }
.check input:focus-visible + .box { box-shadow: 0 0 0 4px rgb(31 95 191 / .25); }
.mini-check { cursor: pointer; flex: none; }
.mini-check span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #C9C0AE; background: #fff; transition: all .3s var(--mola); }
.mini-check .ic { width: 16px; color: #fff; stroke-width: 3; }
.mini-check input:checked + span { background: var(--ok); border-color: var(--ok); transform: rotate(360deg); }

/* anel */
.anel { position: relative; flex: none; display: grid; place-items: center; }
.anel svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.anel circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.anel-fundo { stroke: #EEE7DA; }
.anel-valor { stroke-dashoffset: var(--alvo); transition: stroke-dashoffset 1.3s var(--suave); }
.anel span { font: 800 14px/1 var(--t); color: var(--navy); }

/* ---------- início ---------- */
.hero { position: relative; overflow: hidden; border-radius: 26px; padding: 34px 32px 120px; color: #fff; background: linear-gradient(160deg, #102F63 0%, #0B2148 55%, #5E1018 115%); box-shadow: var(--sh-up); isolation: isolate; --mx: 0; --my: 0; }
.hero::before { content: ''; position: absolute; width: 520px; height: 520px; right: -120px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgb(242 183 5 / .35), transparent 65%); transform: translate(calc(var(--mx) * -30px), calc(var(--my) * -20px)); transition: transform .4s ease-out; z-index: -1; }
.hero-ceu i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .7; animation: brilha 3s ease-in-out infinite; z-index: -1; }
.hero-ceu i:nth-child(1) { left: 8%; top: 18%; } .hero-ceu i:nth-child(2) { left: 22%; top: 9%; animation-delay: .6s; } .hero-ceu i:nth-child(3) { left: 41%; top: 22%; animation-delay: 1.2s; } .hero-ceu i:nth-child(4) { left: 63%; top: 12%; animation-delay: .3s; }
.hero-ceu i:nth-child(5) { left: 78%; top: 30%; animation-delay: 1.8s; } .hero-ceu i:nth-child(6) { left: 90%; top: 8%; animation-delay: .9s; } .hero-ceu i:nth-child(7) { left: 55%; top: 40%; animation-delay: 2.2s; } .hero-ceu i:nth-child(8) { left: 14%; top: 44%; animation-delay: 1.5s; }
@keyframes brilha { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.4); } }
.hero-montes { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 150px; z-index: -1; }
.hero-montes .m1 { fill: #1D467F; opacity: .7; transform: translateX(calc(var(--mx) * 18px)); transition: transform .5s ease-out; }
.hero-montes .m2 { fill: var(--red-d); transform: translateX(calc(var(--mx) * -26px)); transition: transform .5s ease-out; }
.hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.hero-logos { display: flex; align-items: center; justify-content: center; gap: 22px; transform: translate(calc(var(--mx) * 10px), calc(var(--my) * 8px)); transition: transform .4s ease-out; }
.logo-pu { height: 118px; filter: drop-shadow(0 12px 22px rgb(0 0 0 / .45)); animation: flutua 5s ease-in-out infinite; }
.logo-ev { height: 168px; filter: drop-shadow(0 16px 26px rgb(0 0 0 / .5)); animation: flutua 5s 1.2s ease-in-out infinite; position: relative; }
.hero-x { font: 800 15px/1 var(--t); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-l); }
.hero-tit { font-size: clamp(24px, 3vw, 36px); font-weight: 800; }
.hero-tit b { color: var(--gold-l); }
.hero-sub { margin: 0; opacity: .9; }
.contagem { display: flex; gap: 12px; margin-top: 8px; }
.cont { min-width: 92px; padding: 10px 8px 8px; border-radius: 16px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .2); backdrop-filter: blur(6px); }
.cont b { display: block; font: 800 42px/1 var(--t); color: #fff; text-shadow: 0 4px 14px rgb(0 0 0 / .35); }
.cont b.vira { animation: vira .45s var(--mola); }
.cont:first-child b { color: var(--gold-l); }
.cont span { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
@keyframes vira { 0% { transform: translateY(-40%) rotateX(80deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: -78px; padding: 0 18px; position: relative; z-index: 2; }
.kpi { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r); background: #fff; box-shadow: var(--sh-up); transition: transform .35s var(--mola), box-shadow .3s; }
.kpi:hover { transform: translateY(-6px) rotate(-.5deg); }
.kpi b { display: block; font: 800 17px/1.15 var(--t); color: var(--navy); }
.kpi span { font-size: 13px; color: var(--muted); }
.grade2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
.comece { display: flex; align-items: center; gap: 18px; background: linear-gradient(120deg, #FFF7DB, #fff); border: 2px dashed var(--gold); }
.comece .ic-g { width: 48px; height: 48px; color: var(--red); animation: pula 2s infinite; }
.comece h2 { color: var(--navy); }
.comece p { margin: 4px 0 0; color: var(--muted); }
.comece .btn { margin-left: auto; }
.alerta { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #FFF5DA; color: #6B4A00; transition: transform .3s var(--mola); }
.alerta:hover { transform: translateX(4px); }
.alerta .ic { color: #C98A00; margin-top: 2px; }

/* prazos */
.prazos-mini, .prazos-lista { display: flex; flex-direction: column; gap: 8px; }
.prazo { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--soft); border: 1px solid transparent; transition: transform .3s var(--mola), background .2s; }
.prazo:hover { transform: translateX(3px); }
.prazo-data { flex: none; width: 66px; text-align: center; padding: 5px 0; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.prazo-data b { display: block; font: 800 18px/1.1 var(--t); color: var(--navy); }
.prazo-data span { font-size: 11px; font-weight: 800; color: var(--muted); }
.prazo-txt { flex: 1; min-width: 0; }
.prazo-txt b { display: block; font-size: 14px; line-height: 1.3; }
.prazo-txt span { font-size: 12.5px; color: var(--muted); }
.prazo.perto { background: #FFF5DA; border-color: #F4D98A; }
.prazo.perto .prazo-data { border-color: var(--gold); }
.prazo.perto .prazo-data span { color: #A35A00; }
.prazo.atrasado { background: #FDECEC; border-color: #F3C2C4; animation: treme 3s 1s infinite; }
.prazo.atrasado .prazo-data span { color: var(--red); }
.prazo.feito { opacity: .6; }
.prazo.feito .prazo-txt b { text-decoration: line-through; }
@keyframes treme { 0%, 92%, 100% { transform: none; } 94% { transform: translateX(-3px); } 96% { transform: translateX(3px); } 98% { transform: translateX(-2px); } }

/* ---------- agenda ---------- */
.trilha { padding: 26px 30px 18px; overflow-x: auto; }
.trilha-linha { position: relative; display: flex; align-items: flex-start; justify-content: space-between; min-width: 720px; }
.trilha-linha::before { content: ''; position: absolute; left: 20px; right: 20px; top: 20px; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, #D9CFBC 0 10px, transparent 10px 18px); }
.trilha-pt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; padding: 0; }
.trilha-pt span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: conic-gradient(var(--ok) calc(var(--p) * 360deg), #E8E0D0 0); font: 800 16px/1 var(--t); color: var(--navy); position: relative; transition: transform .35s var(--mola); }
.trilha-pt span::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff; z-index: -0; }
.trilha-pt span > *, .trilha-pt span { z-index: 1; }
.trilha-pt span .ic { position: relative; width: 18px; color: var(--ok); stroke-width: 3; }
.trilha-pt:hover span { transform: scale(1.15) translateY(-3px); }
.trilha-pt em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--muted); }
.trilha-pt.atual span { box-shadow: 0 0 0 5px rgb(242 183 5 / .35); animation: pulsa 2s infinite; }
.trilha-pt.atual em { color: var(--red); }
.trilha-pt.done span { background: var(--ok); }
.trilha-pt.done span::before { background: #E3F5EA; }
.trilha-pt { isolation: isolate; }
.trilha-pt span { isolation: isolate; }
.trilha-pt span::before { z-index: -1; }
.trilha-fim { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.trilha-fim .ic { width: 42px; height: 42px; padding: 8px; border-radius: 50%; background: var(--red); color: #fff; animation: flutua 3s infinite; }
.trilha-fim em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--red); }
@keyframes pulsa { 0%, 100% { box-shadow: 0 0 0 4px rgb(242 183 5 / .4); } 50% { box-shadow: 0 0 0 10px rgb(242 183 5 / .08); } }
.agenda-cols { display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: start; }
.semanas { display: flex; flex-direction: column; gap: 14px; }
.semana header { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.semana header > div:nth-child(2) { flex: 1; }
.semana h3 { font-size: 19px; color: var(--navy); }
.sem-n { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--navy); color: #fff; font: 800 20px/1 var(--t); transform: rotate(-4deg); }
.semana.atual { outline: 3px solid var(--gold); outline-offset: -1px; }
.semana.atual .sem-n { background: var(--red); animation: pula 2.4s infinite; }
.semana.completa .sem-n { background: var(--ok); }
.agora { color: var(--red); }
.barra { width: 120px; height: 8px; border-radius: 8px; background: #EEE7DA; overflow: hidden; }
.barra i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 8px; background: linear-gradient(90deg, var(--gold), var(--ok)); transition: width .6s var(--suave); }
.prazos-col { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; }

/* ---------- pessoas ---------- */
.resumo-pessoas { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.contador { display: flex; align-items: baseline; gap: 8px; }
.contador b { font: 800 56px/1 var(--t); color: var(--red); }
.contador span { color: var(--muted); font-weight: 700; }
.inp-num { width: 74px; font: 800 20px/1 var(--t); color: var(--navy); text-align: center; }
.classes-barras { flex: 1; display: flex; gap: 10px; justify-content: flex-end; align-items: flex-end; min-width: 420px; }
.cb { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 74px; padding: 8px 4px 6px; border: 0; border-radius: 12px; background: none; cursor: pointer; transition: background .2s, transform .3s var(--mola); }
.cb:hover, .cb.on { background: var(--soft); transform: translateY(-3px); }
.cb.on { outline: 2px solid var(--c); }
.cb i { display: block; width: 26px; height: calc(8px + var(--h) * 56px); border-radius: 8px 8px 4px 4px; background: var(--c); transform-origin: bottom; animation: cresce .9s var(--mola) both; }
.cb b { font: 800 18px/1 var(--t); }
.cb span { font-size: 11px; font-weight: 800; color: var(--muted); }
@keyframes cresce { from { transform: scaleY(0); } }
.add-pessoa { display: grid; grid-template-columns: 2fr 90px 1fr 150px auto auto; gap: 10px; }
.filtros { display: flex; align-items: center; gap: 10px; margin: 16px 0 8px; }
.chip { padding: 7px 14px; border-radius: 99px; border: 1.5px solid var(--line); background: #fff; font-weight: 800; cursor: pointer; }
.chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.busca { position: relative; flex: 1; max-width: 360px; }
.busca .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 18px; }
.busca input { width: 100%; padding-left: 38px; border-radius: 99px; }
.tabela-pessoas { display: flex; flex-direction: column; }
.tp-h, .tp-l { display: grid; grid-template-columns: minmax(220px, 2.2fr) 70px 150px 1fr 290px 40px; gap: 8px; align-items: center; }
.tp-h { padding: 8px 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line); }
.tp-l { padding: 6px; border-bottom: 1px solid #F1EBDF; transition: background .2s, opacity .28s, transform .28s; }
.tp-l:hover { background: var(--soft); }
.tp-l.saindo { opacity: 0; transform: translateX(40px); }
.tp-nome { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tp-nome > span:not(.avatar) { min-width: 0; flex: 1; }
.tp-nome input { font-weight: 800; }
.tp-nome small { display: flex; gap: 4px; padding-left: 8px; font-size: 11.5px; color: var(--muted); }
.tp-nome small em { font-style: normal; font-weight: 800; color: #fff; background: var(--c); padding: 0 6px; border-radius: 6px; }
.num { width: 60px; }
.tag-dir { font-style: normal; font-size: 12px; font-weight: 800; color: #fff; background: var(--navy); padding: 3px 8px; border-radius: 8px; }
.pront { display: flex; gap: 5px; }
.pchip { display: inline-flex; align-items: center; gap: 3px; padding: 5px 9px; border-radius: 99px; border: 1.5px dashed #CFC5B2; background: #fff; font-size: 12px; font-weight: 800; color: var(--muted); cursor: pointer; transition: all .3s var(--mola); }
.pchip .ic { width: 13px; height: 13px; stroke-width: 3; }
.pchip:hover { border-color: var(--ok); color: var(--ok); }
.pchip.on { border-style: solid; border-color: var(--ok); background: var(--ok); color: #fff; animation: pula .45s var(--mola); }

/* ---------- provas ---------- */
.trofeu { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; background: linear-gradient(120deg, #fff 40%, #FFF7DB); }
.trofeu-txt { flex: 1 1 280px; }
.trofeu-txt h2 { display: flex; gap: 10px; align-items: center; color: var(--navy); font-size: 22px; }
.trofeu-txt p { margin: 6px 0 0; color: var(--muted); }
.trofeu-trilha { display: flex; align-items: center; gap: 8px; }
.ts { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #EEE7DA; color: #A79D8B; transition: all .5s var(--mola); transition-delay: calc(var(--i) * 60ms); }
.ts .ic { width: 22px; height: 22px; }
.ts.on { background: var(--c); color: #fff; transform: translateY(-4px) rotate(-4deg); box-shadow: 0 10px 18px -8px var(--c); }
.ts.meta::after { content: 'troféu'; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 800; color: var(--red); letter-spacing: .06em; text-transform: uppercase; }
.ts.meta { outline: 2px dashed var(--red); outline-offset: 3px; }
.taca { display: flex; flex-direction: column; align-items: center; margin-left: 10px; color: #B4A994; transition: color .4s; }
.taca .ic { width: 46px; height: 46px; }
.taca b { font: 800 18px/1 var(--t); }
.taca.ganhou { color: #D9A400; }
.taca.ganhou .ic { animation: taca 1.8s var(--mola) infinite; filter: drop-shadow(0 4px 10px rgb(242 183 5 / .7)); }
@keyframes taca { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg) scale(1.15); } 40% { transform: rotate(10deg) scale(1.15); } 60% { transform: none; } }
.provas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.prova-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 22px; background: #fff; box-shadow: var(--sh); border-top: 6px solid var(--c); transition: transform .4s var(--mola), box-shadow .3s; }
.prova-card::after { content: ''; position: absolute; width: 180px; height: 180px; right: -60px; bottom: -80px; border-radius: 50%; background: var(--c); opacity: .07; transition: transform .6s var(--suave), opacity .3s; }
.prova-card:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: var(--sh-up); }
.prova-card:hover::after { transform: scale(2.2); opacity: .1; }
.pc-top { display: flex; align-items: center; gap: 12px; }
.pc-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--c); color: #fff; box-shadow: 0 10px 18px -10px var(--c); transition: transform .5s var(--mola); }
.pc-ic .ic { width: 30px; height: 30px; }
.prova-card:hover .pc-ic { transform: rotate(-10deg) scale(1.12); }
.pc-cod { font: 800 14px/1 var(--t); color: var(--c); letter-spacing: .04em; }
.prova-card h3 { font-size: 21px; color: var(--navy); margin-top: 6px; }
.pc-lema { margin: 0; color: var(--muted); font-style: italic; font-size: 14px; flex: 1; }
.pc-pe { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-weight: 800; font-size: 13.5px; color: var(--muted); }
.pc-pe > span { display: inline-flex; align-items: center; gap: 5px; }
.pc-pe .ic { width: 16px; }
.prova-card.pronta { border-top-color: var(--ok); }
.prova-card.pronta::before { content: 'equipe completa'; position: absolute; top: 26px; right: -44px; width: 170px; text-align: center; transform: rotate(40deg); padding: 3px 0; background: var(--ok); color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; box-shadow: 0 4px 10px -4px rgb(0 0 0 / .3); }
.voltar { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--muted); align-self: flex-start; }
.voltar:hover { color: var(--red); }
.voltar .ic { width: 16px; transition: transform .25s var(--mola); }
.voltar:hover .ic { transform: translateX(-4px); }
.prova-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 24px; padding: 28px; border-radius: 26px; color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #0A1F42)); box-shadow: var(--sh-up); }
.prova-hero::after { content: ''; position: absolute; inset: -40% -10% auto auto; width: 380px; height: 380px; border-radius: 50%; border: 50px solid rgb(255 255 255 / .07); animation: gira 40s linear infinite; }
.ph-ic { display: grid; place-items: center; flex: none; width: 104px; height: 104px; border-radius: 30px; background: rgb(255 255 255 / .16); border: 2px solid rgb(255 255 255 / .3); animation: entra-ic .9s var(--mola) both; }
.ph-ic .ic { width: 58px; height: 58px; stroke-width: 1.6; }
@keyframes entra-ic { from { transform: scale(0) rotate(-90deg); } }
.ph-txt { flex: 1; position: relative; z-index: 1; }
.ph-cod { font: 800 14px/1 var(--t); letter-spacing: .1em; opacity: .85; }
.prova-hero h1 { font-size: clamp(26px, 3vw, 38px); margin: 4px 0; }
.prova-hero p { margin: 0 0 12px; opacity: .9; font-style: italic; }
.ph-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-tags span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: rgb(0 0 0 / .18); font-size: 13px; font-weight: 700; }
.ph-tags .ic { width: 16px; }
.ph-acoes { display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 1; }
.prova-cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; align-items: start; }
.prova-cols > div { display: flex; flex-direction: column; gap: 20px; }
.passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.passos li { display: flex; gap: 12px; align-items: flex-start; animation: sobe .5s var(--suave) both; animation-delay: calc(200ms + var(--i) * 90ms); }
.passos li span { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font: 800 15px/1 var(--t); }
.passos li p { margin: 3px 0 0; }
.pontua { display: flex; gap: 12px; margin-top: 16px; padding: 14px; border-radius: 14px; background: #E8F0FC; }
.pontua .ic { color: var(--blue); width: 26px; height: 26px; }
.pontua p { margin: 2px 0 0; }
.portas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; perspective: 800px; }
.porta-card { padding: 12px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); animation: sobe .5s var(--suave) both; animation-delay: calc(300ms + var(--i) * 80ms); }
.porta-folha { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 10px; background: var(--navy); color: #fff; transform-origin: left; transition: transform .6s var(--suave); }
.porta-card:hover .porta-folha { transform: rotateY(-38deg); }
.porta-folha b { font: 800 20px/1 var(--t); color: var(--gold-l); }
.porta-card h4 { margin: 10px 0 2px; font-size: 16px; color: var(--navy); }
.porta-card p { margin: 0; font-size: 13px; color: var(--muted); }
.treino { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.treino li::marker { color: var(--red); }
.memo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.memo div { padding: 10px 12px; border-radius: 12px; border-left: 5px solid var(--c); background: var(--soft); }
.memo b { display: block; font-family: var(--t); color: var(--c); }
.memo span { display: block; font-size: 13px; }
.memo em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--muted); }
.vagas { display: flex; flex-direction: column; }
.vg-h, .vg { display: grid; grid-template-columns: 1fr 1.15fr 1.15fr; gap: 10px; align-items: start; }
.vg-h { padding: 6px 4px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.vg { padding: 9px 4px; border-top: 1px solid #F1EBDF; transition: background .3s; }
.vg.cheia { background: linear-gradient(90deg, rgb(30 158 90 / .07), transparent 60%); }
.vg-rot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 800; padding-top: 8px; }
.vg-rot i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.vg-rot small { flex-basis: 100%; font-weight: 600; font-size: 12px; color: var(--muted); }
.vg select { width: 100%; }
.cat { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--orange); color: #fff; }
.vg-livre { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--soft); border: 1.5px dashed var(--line); }
.vl-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.vl-h small { flex-basis: 100%; color: var(--muted); }
.vl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.pchip-nome { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 4px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: 13.5px; animation: sobe .3s var(--mola); }
.pchip-nome button { border: 0; background: #F1EBDF; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-weight: 800; }
.pchip-nome button:hover { background: var(--red); color: #fff; }
.vl-chips select { width: auto; }
.add-treino { display: grid; grid-template-columns: 140px 110px 1fr; gap: 8px; }
.add-treino input[name="nota"] { grid-column: 1 / 3; }
.treinos { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.treino-l { display: grid; grid-template-columns: 54px 64px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--soft); }
.treino-l small { display: block; color: var(--muted); }
.t-tempo { font: 800 15px/1 var(--t); text-align: center; padding: 5px; border-radius: 8px; background: #fff; }
.t-tempo.ok { color: var(--ok); } .t-tempo.ruim { color: var(--red); }

/* checklist com explicação */
.ck-linha { display: flex; align-items: flex-start; gap: 4px; }
.ck-linha .check { flex: 1; }
.info-btn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-top: 3px; border: 0; border-radius: 50%; background: transparent; color: var(--blue); cursor: pointer; transition: background .2s, transform .35s var(--mola), color .2s; }
.info-btn:hover { background: #E8F0FC; transform: scale(1.12); }
.ck-item.aberto .info-btn { background: var(--blue); color: #fff; transform: rotate(360deg); }
.ck-info { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--suave); }
.ck-info > div { overflow: hidden; margin: 0 8px 0 46px; font-size: 14px; }
.ck-item.aberto .ck-info { grid-template-rows: 1fr; }
.ck-item.aberto .ck-info > div { margin-bottom: 10px; padding: 12px 14px; border-radius: 12px; background: #F1F6FD; border-left: 4px solid var(--blue); animation: sobe .4s var(--suave); }
.ck-info p { margin: 0 0 8px; }
.ck-info b { display: block; font-family: var(--t); font-size: 14px; color: var(--navy); margin-bottom: 2px; }
.ck-info ol { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; }
.ck-info ol li::marker { font-weight: 800; color: var(--blue); }

/* dúvidas por prova */
.duvidas { border-top: 5px solid var(--c); }
.duv-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.duv { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; background: #FFF8E4; border: 1px solid #F4E2A8; animation: sobe .45s var(--suave) both; animation-delay: calc(var(--i) * 40ms); transition: background .3s, border-color .3s; }
.duv > div { flex: 1; min-width: 0; }
.duv b { display: block; font-size: 14px; line-height: 1.35; margin-bottom: 4px; }
.duv.ok { background: #EEF8F2; border-color: #BFE6CD; }
.duv.ok b { color: var(--muted); }
.duv-tag { font-style: normal; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 6px; background: #EDE6D6; color: var(--muted); vertical-align: 1px; }
.duv-tag.sua { background: var(--blue); color: #fff; }
.add-duvida { display: flex; gap: 10px; margin-top: 14px; }
.add-duvida input { flex: 1; }
.pc-duv { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 3px 9px; border-radius: 99px; background: #FFF3CF; color: #8A5A00; font-size: 12px; font-weight: 800; }
.pc-duv .ic { width: 14px; height: 14px; }

/* ---------- diretoria ---------- */
.equipe-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: start; }
.equipe-cols > div { display: flex; flex-direction: column; gap: 20px; }
.funcoes { display: flex; flex-direction: column; gap: 8px; }
.funcao { display: grid; grid-template-columns: 40px 1fr 210px; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--soft); border: 1px solid transparent; transition: border-color .3s, background .3s; }
.funcao.ok { background: #fff; border-color: #BFE6CD; }
.funcao b { display: block; font-family: var(--t); font-size: 16px; color: var(--navy); }
.funcao small { color: var(--muted); font-size: 12.5px; line-height: 1.3; display: block; }
.social { background: linear-gradient(160deg, #fff 60%, #E8F0FC); }
.vols { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.vol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vol select { flex: 1; }
.vol-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #E8E0D0; font: 800 15px/1 var(--t); transition: background .3s; }
.vol.ok .vol-n { background: var(--blue); color: #fff; }
.vol .aviso { flex-basis: 100%; padding-left: 42px; }
.saude { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.dica { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); margin: 0; font-size: 14px; }
.dica .ic { color: var(--red); }
.roteiro { display: flex; flex-direction: column; gap: 8px; }
.dia { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--soft); }
.dia b { font-family: var(--t); color: var(--navy); }
.dia p { margin: 0; font-weight: 700; }
.dia small { color: var(--muted); }
.dia.destaque { background: var(--red); color: #fff; }
.dia.destaque b { color: var(--gold-l); }
.dia.destaque small { color: rgb(255 255 255 / .85); }

/* ---------- checklists ---------- */
.checks-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.ck.completa { box-shadow: 0 0 0 3px var(--ok), var(--sh); }
.pendencias { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pend { display: flex; gap: 12px; padding: 12px; border-radius: 14px; background: #FFF8E4; border: 1px solid #F4E2A8; transition: background .3s, border-color .3s; }
.pend > div { flex: 1; }
.pend b { display: block; font-size: 14px; margin-bottom: 4px; }
.pend.ok { background: #EEF8F2; border-color: #BFE6CD; }

/* ---------- materiais ---------- */
.mat-intro { display: flex; align-items: center; gap: 20px; background: linear-gradient(120deg, var(--navy), var(--navy-2)); color: #fff; }
.mat-intro h2 { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.mat-intro p { margin: 6px 0 0; opacity: .85; }
.mat-intro .btn.grande { margin-left: auto; background: var(--gold); color: var(--navy-3); }
.sec-tit { display: flex; align-items: center; gap: 12px; font-size: 22px; color: var(--navy); margin-top: 6px; }
.sec-tit > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--c); color: #fff; }
.sec-tit small { font: 600 14px var(--f); color: var(--muted); }
.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.doc { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: var(--sh); transition: transform .4s var(--mola), box-shadow .3s; }
.doc:hover { transform: translateY(-6px); box-shadow: var(--sh-up); }
.doc-folha { position: relative; height: 110px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); overflow: hidden; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.doc-folha::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 8px; background: var(--c); }
.doc-folha span { display: grid; place-items: center; width: 44px; height: 44px; margin-top: 6px; border-radius: 12px; background: var(--c); color: #fff; transition: transform .5s var(--mola); }
.doc:hover .doc-folha span { transform: rotate(-12deg) scale(1.1); }
.doc-folha i { display: block; height: 6px; border-radius: 6px; background: #E5DDCD; width: 80%; margin-left: 56px; margin-top: -2px; transform-origin: left; transition: transform .5s var(--suave); }
.doc-folha i:nth-of-type(1) { position: absolute; top: 28px; left: 14px; width: 55%; } .doc-folha i:nth-of-type(2) { position: absolute; top: 42px; left: 14px; width: 40%; } .doc-folha i:nth-of-type(3) { position: absolute; top: 56px; left: 14px; width: 48%; }
.doc:hover .doc-folha i { transform: scaleX(1.25); }
.doc-txt h3 { font-size: 18px; color: var(--navy); }
.doc-txt p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.doc-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.backup .clube-form { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 10px; align-items: end; }
.clube-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.backup-acoes { display: flex; gap: 10px; margin-top: 14px; }

/* ---------- modal, toast, confete ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgb(10 31 66 / .55); backdrop-filter: blur(4px); animation: fade .25s; }
.modal.sai { animation: fade .25s reverse forwards; }
.modal-in { width: min(640px, 100%); background: #fff; border-radius: 22px; padding: 24px; box-shadow: var(--sh-up); animation: sobe .4s var(--mola); }
.modal-in h2 { display: flex; gap: 10px; align-items: center; color: var(--navy); }
.modal-in textarea { width: 100%; resize: vertical; }
.modal-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
@keyframes fade { from { opacity: 0; } }
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast { display: flex; align-items: center; gap: 10px; max-width: 420px; padding: 12px 16px; border-radius: 14px; background: var(--navy); color: #fff; box-shadow: var(--sh-up); animation: toast .5s var(--mola); }
.toast.ok .ic { color: var(--gold-l); }
.toast.erro { background: var(--red); }
.toast.sai { animation: toast .35s reverse forwards; }
.toast code { background: rgb(255 255 255 / .15); }
@keyframes toast { from { opacity: 0; transform: translateX(60px) scale(.9); } }
.confete { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 70; }

/* ---------- telas menores ---------- */
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .agenda-cols, .prova-cols, .equipe-cols, .grade2 { grid-template-columns: 1fr; }
  .prazos-col { position: static; max-height: none; }
  .tp-h { display: none; }
  .tp-l { grid-template-columns: 1fr 70px 150px; }
  .tp-l > :nth-child(4) { grid-column: 1; } .tp-l > :nth-child(5) { grid-column: 2 / 4; }
  .tp-l > :nth-child(6) { grid-column: 3; grid-row: 1; justify-self: end; }
}
@media (max-width: 820px) {
  #app { grid-template-columns: 1fr; }
  .lado { position: fixed; z-index: 20; top: auto; bottom: 0; left: 0; right: 0; height: auto; padding: 6px; flex-direction: row; }
  .marca, .lado-ev, .lado::after { display: none; }
  .lado nav { flex-direction: row; justify-content: space-around; width: 100%; }
  .lado nav a { flex-direction: column; gap: 2px; padding: 6px 4px; font-size: 10.5px; }
  .lado nav a:hover { transform: none; }
  .topo { padding: 12px 16px; }
  main { padding: 16px 16px 100px; }
  .hero { padding: 24px 16px 110px; }
  .logo-pu { height: 70px; } .logo-ev { height: 96px; } .hero-x { display: none; }
  .cont { min-width: 64px; } .cont b { font-size: 28px; }
  .kpis { grid-template-columns: 1fr; padding: 0 8px; }
  .add-pessoa, .add-treino, .backup .clube-form { grid-template-columns: 1fr 1fr; }
  .add-pessoa input[name="nome"] { grid-column: 1 / -1; }
  .classes-barras { min-width: 0; overflow-x: auto; justify-content: flex-start; }
  .checks-grade, .pendencias, .portas, .memo, .duv-lista { grid-template-columns: 1fr; }
  .prova-hero { flex-direction: column; align-items: flex-start; }
  .vg-h { display: none; } .vg { grid-template-columns: 1fr; }
  .funcao { grid-template-columns: 40px 1fr; } .funcao select { grid-column: 1 / -1; }
  .mat-intro, .comece { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- login ---------- */
.tela-login { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 50% 20%, #173B73, #0A1F42 60%, #4A0E14 130%); color: #fff; }
.tela-login.entrando .login { animation: sai-login .45s var(--suave) forwards; }
@keyframes sai-login { to { opacity: 0; transform: scale(1.05); } }
.login { width: min(720px, 100% - 32px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 32px 0; }
.login-logos { display: flex; align-items: center; gap: 24px; }
.login-logos .logo-pu { height: 110px; animation: abre-pu .9s var(--mola) both, flutua 5s 1s ease-in-out infinite; }
.login-logos .logo-ev { height: 160px; animation: abre-ev .9s .2s var(--mola) both, flutua 5s 1.4s ease-in-out infinite; filter: drop-shadow(0 16px 26px rgb(0 0 0 / .5)); }
.login h1 { font-size: clamp(24px, 4vw, 34px); animation: sobe .6s .35s var(--suave) both; }
.login h1 b { color: var(--gold-l); }
.login-sub { margin: 0; opacity: .85; font-weight: 700; animation: sobe .6s .45s var(--suave) both; }
.perfis[hidden], .login-form[hidden] { display: none; }
.perfis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; width: 100%; margin-top: 6px; }
.perfil-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 10px; border-radius: 20px; border: 1px solid rgb(255 255 255 / .18); background: rgb(255 255 255 / .08); color: #fff; cursor: pointer; backdrop-filter: blur(6px); animation: sobe .55s var(--suave) both; animation-delay: calc(500ms + var(--i) * 80ms); transition: transform .35s var(--mola), background .25s, border-color .25s; }
.perfil-card:hover { transform: translateY(-8px) rotate(-1deg); background: rgb(255 255 255 / .16); border-color: var(--c); }
.perfil-card span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--c); box-shadow: 0 10px 22px -10px var(--c); transition: transform .5s var(--mola); }
.perfil-card:hover span { transform: rotate(-10deg) scale(1.1); }
.perfil-card .ic { width: 30px; height: 30px; }
.perfil-card b { font: 800 18px/1 var(--t); margin-top: 4px; }
.perfil-card small { opacity: .75; font-weight: 700; }
.login-form { display: flex; flex-direction: column; gap: 12px; width: min(360px, 100%); padding: 22px; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: var(--sh-up); animation: sobe .45s var(--mola); }
.login-form.treme { animation: treme-forte .45s; }
@keyframes treme-forte { 20% { transform: translateX(-10px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
.login-form input { padding: 13px 14px; font-size: 16px; text-align: center; }
.voltar-perfil { align-self: flex-start; border: 0; background: none; color: var(--muted); font-weight: 800; cursor: pointer; }
.login-quem { display: flex; align-items: center; justify-content: center; gap: 10px; font: 800 20px var(--t); color: var(--navy); }
.login-quem span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--c); color: #fff; }
.login-erro { margin: 0; min-height: 1.4em; color: var(--red); font-weight: 800; }
.login-pe { margin-top: 10px; font-size: 12.5px; opacity: .6; }
@media (max-width: 640px) { .perfis { grid-template-columns: 1fr 1fr; } .login-logos .logo-pu { height: 76px; } .login-logos .logo-ev { height: 110px; } }

/* ---------- moldura por perfil ---------- */
.topo-dir { display: flex; align-items: center; gap: 12px; }
.perfil { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; background: var(--soft); border: 1px solid var(--line); font-weight: 800; font-size: 13px; color: var(--navy); }
.perfil .ic { width: 16px; height: 16px; }
.sair-topo { padding: 6px 12px; }
.sair-nav { display: none; }
body[data-papel="desbravador"] .lado, body[data-papel="pais"] .lado { display: none; }
body[data-papel="desbravador"] #app, body[data-papel="pais"] #app { grid-template-columns: 1fr; }
body[data-papel="desbravador"] main, body[data-papel="pais"] main { margin: 0 auto; max-width: 1100px; }
body[data-papel="instrutor"] .lado nav a:last-of-type { margin-bottom: 0; }
.fam { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 4px 8px; border-radius: 99px; background: #FFF3CF; color: #8A5A00; font-style: normal; font-size: 12px; font-weight: 800; }
.fam .ic { width: 13px; height: 13px; }
.fam.ok { background: #E3F5EA; color: var(--ok); }
.acessos-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.acesso { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); }
.acesso b { font-family: var(--t); font-size: 16px; color: var(--navy); }
.acesso small { color: var(--muted); margin-top: -4px; }

/* ---------- áreas do desbravador e dos pais ---------- */
.hero-mini { padding: 26px 24px 30px; }
.hero-mini .logo-pu { height: 84px; } .hero-mini .logo-ev { height: 118px; }
.hero-mini .cont { min-width: 74px; } .hero-mini .cont b { font-size: 32px; }
.link-claro { border: 0; background: none; color: var(--gold-l); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; padding: 0; }
.escolha .busca { margin: 10px 0 4px; max-width: 420px; }
.escolha .busca > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; }
.esc-classe { margin: 16px 0 8px; font-size: 16px; color: var(--c); display: flex; align-items: center; gap: 8px; }
.esc-classe::before { content: ''; width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.esc-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.esc-p { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--line); background: #fff; text-align: left; cursor: pointer; font-weight: 800; transition: transform .3s var(--mola), border-color .2s, background .2s; }
.esc-p small { display: block; font-weight: 600; color: var(--muted); }
.esc-p:hover { transform: translateY(-3px); border-color: var(--blue); }
.esc-p.on { border-color: var(--ok); background: #EEF8F2; }
.esc-p.on .avatar { animation: pula .5s var(--mola); }
.esc-ok { display: flex; justify-content: flex-end; margin-top: 16px; }
.missao-card { border-top: 6px solid var(--c); }
.missao-card .card-h h2 .ic { color: var(--c); }
.memoria { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 16px; padding: 18px 20px; border-radius: 16px; background: color-mix(in srgb, var(--c) 6%, #fff); border: 2px solid color-mix(in srgb, var(--c) 30%, #fff); font-size: 18px; line-height: 1.6; }
.mem-bloco h4 { color: var(--navy); font-size: 18px; margin-bottom: 2px; }
.mem-bloco p { margin: 0; }
.mem-bloco ol { margin: 0; padding-left: 24px; }
.pal { display: inline-block; border-radius: 6px; transition: background .35s, color .35s, filter .35s; }
.memoria.esconde .pal { background: color-mix(in srgb, var(--c) 22%, #fff); color: transparent; cursor: pointer; animation: cobre .4s var(--suave) both; animation-delay: calc(var(--i) * 6ms); }
.memoria.esconde .pal.ver { background: transparent; color: var(--ink); }
@keyframes cobre { from { background: transparent; color: var(--ink); } }
.minhas-provas { display: flex; flex-direction: column; gap: 10px; }
.mp { display: flex; gap: 12px; padding: 12px; border-radius: 14px; background: var(--soft); border-left: 5px solid var(--c); }
.mp .pc-ic { width: 44px; height: 44px; border-radius: 13px; }
.mp .pc-ic .ic { width: 24px; height: 24px; }
.mp b { display: block; font-family: var(--t); color: var(--navy); font-size: 16px; }
.mp small { display: block; font-weight: 800; color: var(--c); }
.mp p { margin: 4px 0 0; font-size: 14px; }
.mp.mini { padding: 8px 10px; margin-bottom: 6px; }
.mp.mini .pc-ic { width: 34px; height: 34px; border-radius: 10px; }
.mp.mini .pc-ic .ic { width: 18px; height: 18px; }
.preparo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 4px; }
.prep { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: var(--soft); font-weight: 700; font-size: 14px; color: var(--muted); }
.prep span { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px dashed #C9C0AE; }
.prep.on { background: #EEF8F2; color: var(--ink); }
.prep.on span { border: 0; background: var(--ok); color: #fff; animation: pula .5s var(--mola); }
.prep .ic { width: 14px; height: 14px; stroke-width: 3; }
.sub-h { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: 16px; color: var(--navy); }
.sub-h .ic { color: var(--red); width: 18px; }
.treino-prox { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--soft); margin-bottom: 6px; font-size: 14px; }
.treino-prox b { font-family: var(--t); color: var(--navy); }
.treino-prox em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--red); }
.nos-app { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.no-app { padding: 14px; border-radius: 14px; background: var(--soft); }
.no-app h4 { color: var(--red); font-size: 17px; }
.no-app ol { margin: 6px 0 0; padding-left: 20px; font-size: 14px; }
.filhos { display: flex; flex-direction: column; gap: 18px; }
.filho { border-top: 6px solid var(--c); }
.filho-h { display: flex; align-items: center; gap: 14px; }
.filho-h h2 { color: var(--navy); font-size: 24px; }
.filho-h div > span { color: var(--muted); font-weight: 700; }
.filho-grade { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; }
.regras { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.regras li::marker { color: var(--red); }
@media (max-width: 820px) {
  .filho-grade, .preparo, .acessos-grade { grid-template-columns: 1fr; }
  .sair-nav { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; color: rgb(255 255 255 / .78); font-size: 10.5px; font-weight: 700; padding: 6px 4px; }
  .sair-topo { display: none; }
  .perfil { display: none; }
  body[data-papel="desbravador"] .sair-topo, body[data-papel="pais"] .sair-topo { display: inline-flex; }
  .memoria { font-size: 16px; }
}