/* Hub Igaming Sem Fronteiras — mesma linguagem da página nova da mentoria (okamistudio, out/2026):
   noite em preto e branco, a única cor é a luz laranja (brasa #ff5b14). Escala de cinzas faz a
   profundidade; o laranja só aparece no botão principal, nos pontos e numa barra ou outra.
   Archivo em tudo, títulos com leve degradê do branco pro cinza. Nada de halo laranja. */
:root,
:root[data-theme="light"] .porta,
:root[data-theme="light"] .heroi:not(.liso) {
  /* a tela de login e o topo COM foto ficam sempre escuros: a foto é escura */
  --bg: #080808;
  --bg2: #111;
  --card: #111;
  --card2: #171717;
  --card3: #1e1e1e;
  --card-g: linear-gradient(180deg, #131313, #0e0e0e);
  --brilho: inset 0 1px 0 rgba(255, 255, 255, .06);
  --placa: linear-gradient(180deg, #1f1f1f, #141414);
  --line: rgba(255, 255, 255, .07);
  --line2: rgba(255, 255, 255, .1);
  --line3: rgba(255, 255, 255, .22);
  --txt: #f5f5f3;
  --txt2: #b4b4b4;
  --mute: #8c8c8c;
  --mute2: #7a7a78;
  --sheen: linear-gradient(100deg, #fafaf8 0%, #ececea 38%, #8f8f8c 100%);
  --lar: #ff5b14;
  --lar2: #ff7a3d;
  --lar3: #ffb27a;
  --lar-bg: rgba(255, 91, 20, .08);
  --lar-bg2: rgba(255, 91, 20, .14);
  --luz: linear-gradient(90deg, #a32700, #ff5b14 70%, #ffb27a);
  --feito: #f5f5f3;
  --feito-txt: #080808;
  --ok: #61ce70;
  --ok-bg: rgba(97, 206, 112, .1);
  --warn: #f2c46d;
  --warn-bg: rgba(242, 196, 109, .1);
  --bad: #ff5c5c;
  --bad-bg: rgba(255, 92, 92, .1);
  --blue: #8fb8ff;
  --blue-bg: rgba(143, 184, 255, .1);
  --r: 22px;
  --sombra: 0 24px 48px -24px rgba(0, 0, 0, .8);
  --sombra-capa: 0 24px 40px -20px rgba(0, 0, 0, .9);
  --vidro: rgba(16, 16, 16, .62);
  --vidro-borda: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .14);
  --topo-bg: rgba(14, 14, 14, .72);
  --tab-bg: rgba(14, 14, 14, .86);
  --hover: rgba(255, 255, 255, .05);
  --trilho: #171717;
  --trilho2: #262626;
  --inp: #141414;
  --gaveta: #0c0c0c;
  --apagado: #3d3d3d;
  --veu: rgba(0, 0, 0, .72);
  --toast-bg: #f5f5f3;
  --toast-txt: #080808;
  --t: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
/* versão clara: papel neutro (sem tom quente) + a mesma brasa, um tom mais fechado pra ler no claro */
:root[data-theme="light"] {
  --bg: #f5f5f3;
  --bg2: #ececea;
  --card: #fff;
  --card2: #f3f3f1;
  --card3: #e6e6e4;
  --card-g: linear-gradient(180deg, #fff, #fbfbfa);
  --brilho: inset 0 1px 0 rgba(255, 255, 255, .9);
  --placa: linear-gradient(180deg, #fff, #efefed);
  --line: rgba(0, 0, 0, .07);
  --line2: rgba(0, 0, 0, .1);
  --line3: rgba(0, 0, 0, .22);
  --txt: #0a0a0a;
  --txt2: #4a4a48;
  --mute: #6b6b69;
  --mute2: #8a8a87;
  --sheen: linear-gradient(100deg, #0a0a0a 0%, #1e1e1e 38%, #6e6e6b 100%);
  --lar: #e8500f;
  --lar2: #d4470b;
  --lar3: #a33a08;
  --lar-bg: rgba(232, 80, 15, .07);
  --lar-bg2: rgba(232, 80, 15, .12);
  --feito: #0a0a0a;
  --feito-txt: #fff;
  --ok: #1d9446;
  --ok-bg: rgba(29, 148, 70, .1);
  --warn: #a86400;
  --warn-bg: rgba(214, 140, 30, .14);
  --bad: #d23333;
  --bad-bg: rgba(210, 51, 51, .09);
  --blue: #2b62d9;
  --blue-bg: rgba(43, 98, 217, .09);
  --sombra: 0 18px 40px -20px rgba(0, 0, 0, .18);
  --sombra-capa: 0 18px 36px -18px rgba(0, 0, 0, .3);
  --vidro: rgba(255, 255, 255, .78);
  --vidro-borda: inset 0 0 0 1px rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
  --topo-bg: rgba(255, 255, 255, .78);
  --tab-bg: rgba(255, 255, 255, .92);
  --hover: rgba(0, 0, 0, .04);
  --trilho: #e6e6e4;
  --trilho2: #d4d4d2;
  --inp: #fff;
  --gaveta: #fafaf9;
  --apagado: #c4c4c2;
  --veu: rgba(10, 10, 10, .38);
  --toast-bg: #0a0a0a;
  --toast-txt: #fff;
}
.porta, .heroi { color: var(--txt); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--txt); }
body { font: 15px/1.6 var(--f); -webkit-font-smoothing: antialiased; min-height: 100vh; caret-color: var(--lar); }
::selection { background: var(--lar); color: #080808; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--lar); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--t); font-weight: 500; line-height: 1.12; letter-spacing: -.022em; text-wrap: balance; }
h1 { font-size: 38px; letter-spacing: -.034em; line-height: 1.06; }
h2 { font-size: 28px; letter-spacing: -.03em; }
h3 { font-size: 17px; letter-spacing: -.015em; }
/* títulos com leve degradê do branco para o cinza, como luz batendo de um lado */
h1, h2 { width: fit-content; max-width: 100%; background: var(--sheen); -webkit-background-clip: text; background-clip: text; color: transparent; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--lar); font-weight: inherit; }
p { margin: 0; text-wrap: pretty; }
.mute { color: var(--mute); }
.mute2 { color: var(--mute2); }
.small { font-size: 13.5px; }
.tiny { font-size: 12px; }
.lar { color: var(--lar); }
.pre { white-space: pre-wrap; word-break: break-word; }
/* sobretítulo: rótulo pequeno com o ponto de brasa na frente */
.sobre { display: flex; align-items: center; gap: 10px; font-family: var(--f); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 12px; }
.sobre::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lar); box-shadow: 0 0 0 3px var(--lar-bg2); flex: none; }
/* o antigo traço laranja saiu: o ponto de marca já mora no sobretítulo */
.traco { display: none; }
.num { font-family: var(--t); color: var(--lar2); letter-spacing: .06em; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ estrutura */
/* topo = cápsula de vidro flutuando sobre o conteúdo */
.topo { position: sticky; top: 12px; z-index: 30; max-width: 1240px; margin: 12px auto 0; border-radius: 18px; background: var(--topo-bg);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: var(--vidro-borda), 0 20px 40px -24px rgba(0, 0, 0, .9); }
.topo-in { padding: 0 10px 0 22px; height: 64px; display: flex; align-items: center; gap: 28px; }
.marca { display: flex; flex-direction: column; line-height: 1.05; font-family: var(--t); white-space: nowrap; }
.marca small { font-size: 9.5px; font-weight: 500; letter-spacing: .3em; color: var(--mute); margin-bottom: 5px; }
.marca b { font-size: 16px; font-weight: 600; letter-spacing: -.005em; }
.marca b i { font-style: normal; color: var(--lar); }
.nav { display: flex; gap: 2px; flex: 1; justify-content: center; }
.nav a { position: relative; padding: 8px 15px; border-radius: 99px; color: var(--txt2); font-weight: 500; font-size: 13.5px; transition: color .25s, background-color .25s; }
.nav a:hover { color: var(--txt); background: var(--hover); }
.nav a.on { color: var(--txt); background: var(--hover); box-shadow: inset 0 0 0 1px var(--line); }
.nav a.mentor { color: var(--lar2); }
.nav svg { display: none; }
.eu { display: flex; align-items: center; gap: 8px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--t); font-weight: 600; font-size: 12.5px;
  background: var(--placa); box-shadow: inset 0 0 0 1px var(--line2), var(--brilho); flex: none; }
.avatar.g { width: 54px; height: 54px; font-size: 18px; box-shadow: inset 0 0 0 1px var(--line3), var(--brilho); }
/* trilhos: dois fios verticais marcando a coluna do conteúdo, como na página */
.main { max-width: 1240px; min-height: calc(100vh - 76px); margin: 0 auto; padding: 40px 40px 120px; position: relative; isolation: isolate; }
.main::before { content: ""; position: absolute; inset: 0; z-index: -1; border-inline: 1px solid var(--line); pointer-events: none; }
.tabbar { display: none; }

@media (max-width: 900px) {
  .nav { display: none; }
  .topo { top: 8px; margin: 8px 8px 0; border-radius: 16px; }
  .topo-in { height: 56px; gap: 8px; padding: 0 4px 0 14px; justify-content: space-between; }
  .eu { gap: 2px; }
  .marca b { font-size: 13.5px; }
  .main { padding: 24px 16px 120px; }
  .main::before { display: none; }
  h1 { font-size: 29px; }
  h2 { font-size: 23px; }
  .tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: var(--tab-bg); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 1px 0 var(--line2); padding: 8px 4px calc(8px + env(safe-area-inset-bottom)); }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--mute2); }
  .tabbar a.on { color: var(--txt); }
  .tabbar a.on svg { color: var(--lar); }
  .tabbar svg { width: 21px; height: 21px; }
}

@media (max-width: 420px) { .eu .avatar { display: none; } .marca small { font-size: 8.5px; } }

/* ------------------------------------------------------------ botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; padding: 0 20px; border-radius: 99px;
  border: 1px solid var(--line2); background: transparent; font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  transition: border-color .3s, background-color .3s, transform .11s, box-shadow .3s; -webkit-tap-highlight-color: transparent; }
.btn:hover { border-color: var(--line3); background: var(--hover); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn svg { width: 16px; height: 16px; flex: none; }
/* botão principal = o "SE QUALIFICAR PARA A VAGA" da página: pílula de brasa, texto escuro, seta num círculo preto */
.btn.prim { border-color: transparent; color: #120500; font-family: var(--t); font-size: 12px; font-weight: 600; letter-spacing: .045em; text-transform: uppercase;
  background: linear-gradient(180deg, #ff6d2c, #ff5b14 55%, #f24f0b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 16px 32px -18px rgba(255, 91, 20, .55); }
.btn.prim:hover { border-color: transparent; background: linear-gradient(180deg, #ff7a3d, #ff6420 55%, #f5560f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 20px 36px -18px rgba(255, 91, 20, .65); }
.btn.prim svg { stroke-width: 2.2; }
.btn.prim:has(> .btn-seta) { padding: 0 5px 0 22px; gap: 16px; }
.btn-seta { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #080808; flex: none; transition: transform .32s cubic-bezier(.16, 1, .3, 1); }
.btn-seta svg { width: 14px !important; height: 14px !important; stroke: #fff; }
.btn.prim:hover .btn-seta { transform: rotate(45deg); }
.btn.ghost { border-color: transparent; color: var(--mute); }
.btn.ghost:hover { color: var(--txt); background: var(--hover); }
.btn.perigo { color: var(--bad); }
.btn.sm { height: 34px; padding: 0 14px; font-size: 12.5px; }
.btn.prim.sm { font-size: 11px; }
.btn.prim.sm:has(> .btn-seta) { padding: 0 4px 0 16px; gap: 12px; }
.btn.sm .btn-seta { width: 26px; height: 26px; }
.btn.ic { width: 36px; height: 36px; padding: 0; }

/* ------------------------------------------------------------ peças */
/* superfície única: cinza um degrau acima do fundo, borda fina e brilho só no topo */
.card { background: var(--card-g); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--brilho); }
.pad { padding: 28px; }
@media (max-width: 600px) { .pad { padding: 20px; } }
.card.quente { border-color: rgba(255, 91, 20, .4); background: radial-gradient(120% 90% at 100% 0%, var(--lar-bg), transparent 60%), var(--card-g); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--line2); color: var(--mute); white-space: nowrap; }
.chip svg { width: 12px; height: 12px; }
.chip.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.chip.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.chip.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.chip.lar { background: var(--lar-bg2); color: var(--lar2); border-color: transparent; }
.chip.blue { background: var(--blue-bg); color: var(--blue); border-color: transparent; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--mute2); flex: none; }

.linha { display: flex; align-items: center; gap: 12px; }
.linha.wrap { flex-wrap: wrap; }
.entre { justify-content: space-between; }
.col { display: flex; flex-direction: column; }
.gap4 { gap: 4px; } .gap8 { gap: 8px; } .gap16 { gap: 16px; } .gap24 { gap: 24px; }
.flex1 { flex: 1; min-width: 0; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } .mt32 { margin-top: 48px; }

.cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.cabeca p { margin-top: 10px; max-width: 620px; }
.volta { display: inline-flex; align-items: center; gap: 6px; color: var(--mute2); font-size: 13px; font-weight: 600; margin-bottom: 18px; letter-spacing: .02em; }
.volta svg { width: 15px; height: 15px; }
.volta:hover { color: var(--lar); }

.barra { height: 4px; border-radius: 99px; background: var(--trilho); overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: 99px; background: var(--luz); transition: width .6s; }

.vazio { text-align: center; padding: 64px 24px; color: var(--mute); }
.vazio svg { width: 38px; height: 38px; color: var(--mute2); margin: 0 auto 14px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pilula { height: 36px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line2); background: transparent; color: var(--mute);
  font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: all .2s; }
.pilula:hover { color: var(--txt); border-color: var(--line3); }
.pilula.on { background: var(--hover); color: var(--txt); border-color: var(--line3); }
.pilula.on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lar); flex: none; }
.pilula svg { width: 15px; height: 15px; flex: none; }

/* ------------------------------------------------------------ formulários */
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo > span { font-size: 12.5px; font-weight: 500; color: var(--mute); letter-spacing: .02em; }
.campo > em { font-style: normal; font-size: 12px; color: var(--mute2); }
.inp { height: 46px; padding: 0 15px; border-radius: 12px; border: 1px solid var(--line2); background: var(--inp); outline: none; width: 100%; transition: border-color .2s, box-shadow .2s; }
textarea.inp { height: auto; min-height: 100px; padding: 12px 15px; resize: vertical; line-height: 1.55; }
.inp:focus { border-color: var(--lar); box-shadow: 0 0 0 4px var(--lar-bg); }
.inp:disabled { color: var(--mute); }
select.inp { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position: calc(100% - 19px) 20px, calc(100% - 14px) 20px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grade3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 640px) { .grade2, .grade3 { grid-template-columns: 1fr; } }
.troca { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 14px; }
.troca input { display: none; }
.troca i { width: 40px; height: 23px; border-radius: 99px; background: var(--trilho2); position: relative; transition: background .2s; flex: none; }
.troca i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #f5f5f3; transition: transform .2s; }
.troca input:checked + i { background: var(--lar); }
.troca input:checked + i::after { transform: translateX(17px); }
.img-campo { display: flex; gap: 14px; align-items: center; }
.img-prev { width: 88px; height: 88px; border-radius: 12px; background: var(--inp) center/cover no-repeat; border: 1px dashed var(--line3); flex: none; display: grid; place-items: center; color: var(--mute2); }
.img-prev.vert { width: 74px; height: 111px; }

/* ------------------------------------------------------------ gaveta / toast */
.veu { position: fixed; inset: 0; background: var(--veu); backdrop-filter: blur(3px); z-index: 50; animation: fade .2s; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); z-index: 51; background: var(--gaveta); border-left: 1px solid var(--line2); border-radius: 22px 0 0 22px;
  display: flex; flex-direction: column; animation: entra .28s cubic-bezier(.2, .8, .2, 1); box-shadow: var(--sombra); }
.gaveta.larga { width: min(780px, 100%); }
.gaveta-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.gaveta-topo h2 { font-size: 20px; }
.gaveta-corpo { flex: 1; overflow: auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.gaveta-pe { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--line); }
@keyframes entra { from { transform: translateX(40px); opacity: 0; } }
@media (max-width: 600px) { .gaveta { border-radius: 0; } }
@keyframes fade { from { opacity: 0; } }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 80; background: var(--toast-bg); color: var(--toast-txt); padding: 12px 20px;
  border-radius: 99px; font-weight: 600; font-size: 14px; box-shadow: var(--sombra); animation: sobe .25s; max-width: calc(100% - 32px); }
.toast.erro { background: var(--bad); color: #fff; }
@keyframes sobe { from { transform: translate(-50%, 12px); opacity: 0; } }

/* ------------------------------------------------------------ login / convite */
.porta { background: var(--bg); min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; position: relative; overflow: hidden; }
/* a foto vem com o preto em volta: a caixa segue a proporção dela; a última fileira de pixels é cinza, corta e esfuma a base */
.porta::before { content: ""; position: absolute; top: 4%; right: 0; width: min(92%, 1640px); aspect-ratio: 1920 / 844; background: var(--hero-d, url(/brand/foto-desktop.webp)) 50% 0 / cover no-repeat;
  clip-path: inset(0 0 3px 0); -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.porta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #080808 22%, rgba(8, 8, 8, .35) 48%, transparent 66%), linear-gradient(0deg, #080808 6%, transparent 40%); }
.porta-box { width: min(440px, 100%); position: relative; z-index: 1; justify-self: start; margin-left: max(0px, calc((100vw - 1240px) / 2)); }
.porta-box .marca { margin-bottom: 34px; }
.porta-box .marca b { font-size: 24px; }
.porta-box .marca small { font-size: 11px; }
.porta-box .card { background: var(--vidro); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-color: transparent; box-shadow: var(--vidro-borda), 0 24px 40px -24px rgba(0, 0, 0, .9); }
@media (max-width: 900px) {
  .porta { place-items: end center; }
  .porta::before { top: 0; width: 100%; aspect-ratio: 1080 / 1920; background-image: var(--hero-m, url(/brand/foto-mobile.webp)); background-size: 100% auto; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 62%); mask-image: linear-gradient(180deg, #000 40%, transparent 62%); }
  .porta::after { background: linear-gradient(0deg, #080808 46%, rgba(8, 8, 8, .3) 72%, transparent); }
  .porta-box { justify-self: center; margin: 0; }
}

/* ------------------------------------------------------------ início / aulas */
.heroi { position: relative; margin: -40px calc(50% - 50vw) 0; padding: 90px max(24px, calc(50vw - 596px)) 64px; min-height: 460px; display: flex; align-items: flex-end; overflow: hidden; }
.heroi::before { content: ""; position: absolute; inset: 0; background: var(--hero-d, url(/brand/foto-desktop.webp)) 62% 10% / cover no-repeat; }
.heroi::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #080808 18%, rgba(8, 8, 8, .72) 42%, rgba(8, 8, 8, .05) 72%), linear-gradient(0deg, #080808 3%, transparent 38%); }
.heroi-in { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.heroi h1 { font-size: clamp(34px, 2.2rem + 1.2vw, 50px); max-width: 680px; }
.heroi p { color: var(--mute); max-width: 520px; margin-top: 12px; }
.heroi:not(.liso) { background: var(--bg); }
.heroi.liso { min-height: 0; padding-top: 72px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.heroi.liso::before { background: radial-gradient(45% 120% at 88% 0%, var(--hover), transparent 70%); }
.heroi.liso::after { display: none; }
@media (max-width: 900px) {
  .heroi { margin: -24px calc(50% - 50vw) 0; padding: 230px 16px 28px; min-height: 0; }
  .heroi::before { background-image: var(--hero-m, url(/brand/foto-mobile.webp)); background-position: 50% 0; background-size: 100% auto; }
  .heroi::after { background: linear-gradient(0deg, #080808 34%, rgba(8, 8, 8, .25) 70%, rgba(8, 8, 8, .1)); }
  .heroi-in { grid-template-columns: minmax(0, 1fr); }
  .heroi.liso { padding: 36px 16px 24px; }
  .heroi.liso::before { background: radial-gradient(90% 80% at 100% 0%, var(--hover), transparent 70%); }
  .continuar { width: 100%; }
  .heroi h1 { font-size: 29px; }
}
.continuar { display: flex; gap: 14px; align-items: center; padding: 10px 10px 10px 10px; border-radius: 18px; background: var(--vidro); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--vidro-borda), 0 24px 40px -24px rgba(0, 0, 0, .9); width: 380px; max-width: 100%; transition: box-shadow .3s; }
.continuar:hover { box-shadow: inset 0 0 0 1px var(--line3), inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 40px -24px rgba(0, 0, 0, .9); }
.continuar .thumb { width: 46px; height: 69px; border-radius: 10px; background: var(--card3) center/cover; flex: none; }
.continuar h3 { font-size: 15px; }
.play { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #120500; flex: none;
  background: linear-gradient(180deg, #ff6d2c, #ff5b14 55%, #f24f0b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 24px -12px rgba(255, 91, 20, .6); }
.play svg { fill: currentColor; }
.play svg { width: 15px; height: 15px; margin-left: 2px; }

.vitrine { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: 24px 16px; }
@media (max-width: 1000px) { .vitrine { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .vitrine { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; } }
.capa { display: block; }
.capa-img { aspect-ratio: 2 / 3; border-radius: 18px; background: var(--bg2) 50% 50% / contain no-repeat; border: 1px solid var(--line2); position: relative; overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s; }
.capa:hover .capa-img { transform: translateY(-4px); border-color: var(--line3); box-shadow: var(--sombra-capa); }
/* as capas do Gabriel (800×1200) já vêm com moldura e cantos próprios: sem a nossa borda por cima */
.capa-img:not(.sem) { border-color: transparent; background-color: transparent; border-radius: 14px; }
.capa:hover .capa-img:not(.sem) { border-color: transparent; }
.capa-img.sem { display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; background: radial-gradient(120% 70% at 50% 0%, var(--hover), transparent 60%), var(--card-g); }
.capa-img.sem small { font-family: var(--t); font-size: 9px; letter-spacing: .3em; color: var(--mute2); }
.capa-img.sem b { font-family: var(--t); font-weight: 600; font-stretch: 72%; font-size: 72px; line-height: .92; margin-top: 8px; letter-spacing: -.01em; background: var(--sheen); -webkit-background-clip: text; background-clip: text; color: transparent; }
.capa-img.sem i { font-style: normal; font-family: var(--t); font-size: 10px; letter-spacing: .14em; color: var(--mute2); margin-top: 14px; }
.capa-img.sem i em { font-style: normal; color: var(--lar); }
.capa-info { padding: 12px 2px 0; display: flex; flex-direction: column; gap: 8px; }
.capa-info h3 { font-size: 14.5px; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 700px) { .capa-info h3 { font-size: 12.5px; } .capa-img.sem b { font-size: 40px; } }
.capa-info .barra { flex: 1; }

.modulo-topo { display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: end; margin-bottom: 36px; }
@media (max-width: 640px) { .modulo-topo { grid-template-columns: 110px 1fr; gap: 18px; } }
.aulas-lista { display: flex; flex-direction: column; gap: 10px; }
.aula-item { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 18px; background: var(--card-g); border: 1px solid var(--line); box-shadow: var(--brilho); transition: border-color .3s, background .3s; }
.aula-item:hover { border-color: var(--line3); }
.aula-item.on { border-color: var(--line3); background: var(--card2); }
.aula-item .num { width: 34px; flex: none; font-size: 13px; }
.aula-item b { font-weight: 600; }
.aula-n { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-family: var(--t); font-size: 12px; font-weight: 500; color: var(--txt2); background: var(--placa); box-shadow: inset 0 0 0 1px var(--line2), var(--brilho); flex: none; }
.aula-item.on .aula-n:not(.feita) { color: var(--lar2); box-shadow: inset 0 0 0 1.5px var(--lar); }
.aula-n.feita, .feito-ic { background: var(--feito); color: var(--feito-txt); box-shadow: none; }
.aula-n.feita { border-radius: 50%; }
.aula-n svg, .feito-ic svg { width: 16px; height: 16px; }
.feito-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.player-grade { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
@media (max-width: 1000px) { .player-grade { grid-template-columns: 1fr; } }
.player { aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; border: 1px solid var(--line); box-shadow: var(--sombra); }
.player iframe { width: 100%; height: 100%; border: 0; display: block; }
.player.sem { display: grid; place-items: center; color: var(--mute); background: radial-gradient(80% 80% at 50% 0%, var(--hover), transparent), var(--card-g); }
.materiais a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line2); background: var(--card-g); font-weight: 600; font-size: 14px; transition: border-color .2s; }
.materiais a svg { color: var(--lar); width: 18px; height: 18px; }
.materiais a:hover { border-color: var(--line3); }

/* ------------------------------------------------------------ checklist */
.ops { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.progresso-topo { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; }
.anel { width: 108px; height: 108px; position: relative; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--t); font-size: 24px; font-weight: 500; }
.contas { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 14px; }
.contas div b { display: block; font-family: var(--t); font-size: 22px; font-weight: 500; }
.contas div span { font-size: 12px; color: var(--mute); }
@media (max-width: 640px) { .progresso-topo { gap: 18px; align-items: start; } .anel { width: 76px; height: 76px; } .anel b { font-size: 17px; } .contas { gap: 16px; } .contas div b { font-size: 18px; } }
.caixa { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line3); display: grid; place-items: center; flex: none; transition: all .2s; }
.caixa svg { width: 14px; height: 14px; opacity: 0; color: var(--feito-txt); stroke-width: 3; }
.on > .caixa, .caixa.on { background: var(--feito); border-color: var(--feito); }
.on > .caixa svg, .caixa.on svg { opacity: 1; }

/* ------------------------------------------------------------ métricas */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 960px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi { padding: 22px 24px; }
.kpi > span { font-size: 11.5px; font-weight: 500; color: var(--mute); font-family: var(--t); letter-spacing: .14em; text-transform: uppercase; }
.kpi b { display: block; font-family: var(--t); font-size: 32px; font-weight: 500; margin: 8px 0 4px; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.kpi em, .met em { font-style: normal; font-size: 12.5px; font-weight: 600; }
.kpi.destaque { border-color: rgba(255, 91, 20, .4); background: radial-gradient(120% 120% at 100% 0%, var(--lar-bg2), transparent 55%), var(--card-g); }
@media (max-width: 600px) { .kpi { padding: 16px; } .kpi b { font-size: 22px; } }
.sobe { color: var(--ok); } .desce { color: var(--bad); }
.met-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.met { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.met > span { font-size: 12.5px; color: var(--mute); }
.met b { font-family: var(--t); font-size: 22px; font-weight: 500; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.periodos { display: flex; flex-direction: column; gap: 10px; }
.periodo { display: grid; grid-template-columns: 170px repeat(4, 1fr) auto; gap: 14px; align-items: center; padding: 18px 22px; cursor: pointer; transition: border-color .2s; }
.periodo:hover { border-color: var(--line3); }
.periodo .v b { display: block; font-family: var(--t); font-weight: 500; font-size: 15px; }
.periodo .v span { font-size: 11.5px; color: var(--mute2); }
@media (max-width: 760px) { .periodo { grid-template-columns: 1fr 1fr; } .periodo > :first-child { grid-column: 1 / -1; } .periodo > :last-child { display: none; } }
.grafico svg { width: 100%; height: 220px; display: block; }
.ao-vivo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .ao-vivo { grid-template-columns: 1fr; } }
.ao-vivo div { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); font-size: 13px; }

/* ------------------------------------------------------------ ferramentas / bônus */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.fer { display: flex; flex-direction: column; overflow: hidden; position: relative; transition: border-color .3s, transform .3s; }
.fer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); }
.fer:hover { border-color: var(--line3); transform: translateY(-3px); }
.fer-img { aspect-ratio: 16 / 9; background: var(--bg2) center/cover no-repeat; border-bottom: 1px solid var(--line); }
.fer-img.sem { display: grid; place-items: center; background: radial-gradient(100% 90% at 50% 0%, var(--hover), transparent 60%), var(--bg2);
  font-family: var(--t); font-size: 34px; font-weight: 600; font-stretch: 72%; letter-spacing: -.01em; color: var(--txt); }
.fer-img.sem svg { width: 40px; height: 40px; color: var(--mute); }
.fer-corpo { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.fer-corpo p { color: var(--mute); font-size: 14px; flex: 1; }
.fer-corpo .btn { margin-top: 10px; }
/* nos cartões o botão é discreto (a página só tem UM bloco laranja); a brasa fica no círculo da seta */
.fer .btn.prim { color: var(--txt); background: var(--hover); border-color: var(--line2); box-shadow: none; }
.fer .btn.prim:hover { background: var(--card3); border-color: var(--line3); box-shadow: none; }
.fer .btn-seta { background: var(--lar); }
.fer .btn-seta svg { stroke: #120500; }

.cofre { max-width: 680px; margin: 40px auto 0; text-align: center; position: relative; }
.cofre { isolation: isolate; }
.cofre::before { content: ""; position: absolute; left: 50%; top: -10px; z-index: -1; width: 320px; height: 220px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, var(--lar-bg), transparent 70%); pointer-events: none; }
.cofre .sobre { justify-content: center; }
.cofre h1 { font-size: 44px; position: relative; margin-inline: auto; }

@media (max-width: 600px) { .cofre h1 { font-size: 30px; } }
.cod-campo { display: block; width: min(420px, 100%); height: 64px; margin: 30px auto 22px; padding: 0 16px; text-align: center; position: relative;
  font-family: var(--t); font-size: 24px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; border-radius: 14px;
  border: 1px solid var(--line3); background: var(--inp); outline: none; caret-color: var(--lar); transition: border-color .2s, box-shadow .2s; }
.cod-campo::placeholder { color: var(--line3); }
.cod-campo:focus { border-color: var(--lar); box-shadow: 0 0 0 4px var(--lar-bg2); }
@media (max-width: 420px) { .cod-campo { font-size: 19px; letter-spacing: .2em; } }
.cod-inp { font-family: var(--t); text-transform: uppercase; letter-spacing: .14em; }
.escudo { width: 96px; height: 96px; margin: 0 auto 22px; color: var(--lar); position: relative; }
.liberado { animation: brilha 1.3s ease-out; }
@keyframes brilha { 0% { transform: scale(.92); opacity: 0; filter: brightness(2.2); } 100% { transform: none; opacity: 1; filter: none; } }

/* ------------------------------------------------------------ mentor */
.mentorados { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.mentorado { padding: 22px; display: flex; flex-direction: column; gap: 16px; transition: border-color .25s, box-shadow .25s; }
.mentorado:hover { border-color: var(--line3); }
.mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini div { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--hover); }
.mini b { display: block; font-family: var(--t); font-weight: 500; font-size: 16px; }
.mini span { font-size: 11.5px; color: var(--mute2); }
.termo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.termo.travado { color: var(--bad); } .termo.andando { color: var(--warn); } .termo.voando { color: var(--ok); }
.termo.travado .dot { background: var(--bad); } .termo.andando .dot { background: var(--warn); } .termo.voando .dot { background: var(--ok); }
.termo .dot { box-shadow: 0 0 0 3px var(--hover); }
.abas { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 26px; overflow-x: auto; scrollbar-width: none; }
.abas a { padding: 12px 14px; font-weight: 600; font-size: 14px; color: var(--mute); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .2s; }
.abas a:hover { color: var(--txt); }
.abas a.on { color: var(--txt); border-color: var(--lar); }
.linha-tempo { display: flex; flex-direction: column; gap: 16px; position: relative; }
.call { display: grid; grid-template-columns: 84px 1fr; gap: 22px; padding: 24px 26px; }
.call-data { text-align: center; padding-top: 2px; }
.call-data b { display: block; font-family: var(--t); font-size: 34px; font-weight: 500; letter-spacing: -.035em; line-height: 1; color: var(--txt); }
.call-data span { font-family: var(--t); font-size: 11px; font-weight: 500; color: var(--lar2); text-transform: uppercase; letter-spacing: .16em; }
@media (max-width: 600px) { .call { grid-template-columns: 1fr; gap: 12px; padding: 20px; } .call-data { text-align: left; display: flex; gap: 10px; align-items: baseline; } .call-data b { font-size: 24px; } }
.bloco-txt h4 { font-family: var(--t); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; color: var(--mute); margin: 18px 0 8px; }
.bloco-txt p { color: var(--txt2); }
.pend { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; cursor: pointer; font-size: 14.5px; }
.pend .caixa { margin-top: 1px; width: 20px; height: 20px; }
.pend.on .t { color: var(--mute2); text-decoration: line-through; }
.retrato { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line2); }
.pend-linha { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
.qr { background: #fff; border-radius: 14px; padding: 10px; width: 170px; height: 170px; }
.qr svg, .qr img { width: 100%; height: 100%; }
.adm-lista { display: flex; flex-direction: column; gap: 10px; }
.adm-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.adm-thumb { width: 54px; height: 54px; border-radius: 12px; background: var(--bg2) center/cover; flex: none; border: 1px solid var(--line2); }
.adm-thumb.vert { width: 48px; height: 72px; }
.oculto { opacity: .45; }
.sub-lista { margin: 0 0 8px 34px; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 600px) { .sub-lista { margin-left: 10px; } .adm-item { flex-wrap: wrap; } }
.aula-mark { width: 34px; flex: none; display: grid; place-items: center start; }
html, body { overflow-x: hidden; }

/* ------------------------------------------------------------ ver como mentorado */
.modo-ver span { display: inline; }
@media (max-width: 900px) { .modo-ver span { display: none; } .modo-ver { width: 36px; padding: 0; } }
#modo-faixa:empty { display: none; }
#modo-faixa { border-top: 1px solid rgba(255, 91, 20, .3); background: linear-gradient(90deg, var(--lar-bg2), var(--lar-bg)); border-radius: 0 0 18px 18px; }
.modo-in { max-width: 1240px; margin: 0 auto; padding: 8px 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.modo-tit { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 13px; }
.modo-tit svg { width: 16px; height: 16px; color: var(--lar); flex: none; }
.modo-tit b { font-family: var(--t); font-weight: 600; color: var(--lar2); }
.modo-seg button { height: 28px; }
@media (max-width: 900px) { .modo-in { padding: 8px 16px; gap: 8px; } .modo-tit .mute { display: none; } }
.so-mob { display: none; }
@media (max-width: 900px) { .so-desk { display: none; } .so-mob { display: inline; } }

/* ------------------------------------------------------------ início: painel, mentor, jornada */
.continuar .thumb.sem { display: grid; place-items: center; background: var(--placa); box-shadow: inset 0 0 0 1px var(--line2); }
.continuar .thumb.sem b { font-family: var(--t); font-weight: 500; font-size: 20px; color: var(--txt2); }
.painel { margin-top: 48px; }
.kpi b small { font-size: .55em; color: var(--mute); font-weight: 400; margin-left: 2px; }
.kpi em { display: block; }
.kpi-link { transition: border-color .3s, transform .3s; }
.kpi-link:hover { border-color: var(--line3); transform: translateY(-2px); }
.jornada-ficha { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 14px; max-width: 760px; flex-wrap: wrap; }
.jornada-ficha select { width: auto; flex: 1; min-width: 220px; height: 40px; }
#modulos { scroll-margin-top: 96px; }

/* painel do início: tarefas individuais (largo) + checklist e aulas ao lado */
.painel-grade { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.painel-lado { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.painel-lado .kpi { display: flex; flex-direction: column; justify-content: center; }
.tarefas-ind { min-height: 260px; }
@media (max-width: 900px) {
  .painel-grade { grid-template-columns: minmax(0, 1fr); }
  .painel-lado { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .tarefas-ind { min-height: 0; }
}

/* jornada compacta: trilha com todos os passos + a explicação do passo escolhido */
.trilha { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.trilha li { position: relative; }
.trilha li + li::before { content: ""; position: absolute; top: 19px; left: calc(-50% + 24px); right: calc(50% + 24px); height: 2px; border-radius: 2px; background: var(--line2); }
.trilha li:has(> .feito)::before, .trilha li:has(> .agora)::before { background: var(--lar); }
.tr-passo { width: 100%; background: none; border: 0; padding: 0 4px; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; color: inherit; text-align: center; }
.tr-n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--t); font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
  border: 1px solid var(--line2); background: var(--placa); color: var(--mute); transition: border-color .3s, box-shadow .3s; }
.tr-n svg { width: 16px; height: 16px; }
.tr-passo:hover .tr-n { border-color: var(--line3); color: var(--txt); }
.tr-passo.feito .tr-n { background: var(--feito); border-color: var(--feito); color: var(--feito-txt); }
.tr-passo.agora .tr-n { border: 2px solid var(--lar); color: var(--lar2); background: var(--card-g); }
.tr-passo.sel .tr-n { box-shadow: 0 0 0 4px var(--hover), 0 0 0 5px var(--line2); }
.tr-t { font-size: 12px; line-height: 1.35; color: var(--mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tr-passo.sel .tr-t { color: var(--txt); font-weight: 600; }
.tr-det { margin-top: 22px; padding: 18px 20px; border-radius: 18px; background: var(--hover); border: 1px solid var(--line); }
.tr-det .num { font-size: 11.5px; letter-spacing: .24em; }
.tr-det p { max-width: 820px; }
@media (max-width: 760px) {
  .trilha { margin-top: 20px; }
  .trilha li + li::before { top: 14px; left: calc(-50% + 16px); right: calc(50% + 16px); }
  .tr-passo { padding: 0; }
  .tr-n { width: 30px; height: 30px; font-size: 10.5px; }
  .tr-n svg { width: 13px; height: 13px; }
  .tr-t { display: none; }
  .tr-det { padding: 16px; }
}

/* WhatsApp do mentor: botão flutuante (no lugar do cartão "Seu mentor") */
.zap-flut { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: #25d366; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 6px rgba(37, 211, 102, .12); transition: transform .2s, box-shadow .2s; }
.zap-flut:hover { transform: scale(1.06); box-shadow: 0 12px 34px rgba(0, 0, 0, .4), 0 0 0 8px rgba(37, 211, 102, .18); }
.zap-flut svg { width: 26px; height: 26px; }
@media (max-width: 900px) { .zap-flut { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); width: 50px; height: 50px; } }

/* ------------------------------------------------------------ checklist em blocos */
.ck-dica { margin: 18px 2px 12px; }
.ck-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
@media (max-width: 640px) { .ck-grade { grid-template-columns: minmax(0, 1fr); } }
.ck-bloco { padding: 20px 20px 12px; display: flex; flex-direction: column; gap: 12px; }
.ck-bloco.completa { border-color: var(--line3); }
.ck-topo { display: flex; align-items: center; gap: 12px; }
.ck-topo h3 { flex: 1; min-width: 0; font-size: 16px; }
.ck-n { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-family: var(--t); font-size: 12px; font-weight: 500; color: var(--txt2);
  background: var(--placa); box-shadow: inset 0 0 0 1px var(--line2), var(--brilho); flex: none; }
.ck-n svg { width: 15px; height: 15px; }
.completa .ck-n { background: var(--feito); color: var(--feito-txt); box-shadow: none; }
.ck-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ck-item { display: flex; align-items: flex-start; gap: 6px; padding: 6px 0; border-top: 1px solid var(--line); }
.ck-item:first-child { border-top: 0; }
.ck-item button { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; text-align: left; }
.ck-marca { width: 34px; height: 34px; display: grid !important; place-items: center; flex: none; }
.ck-marca svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; border: 1.5px solid var(--line3); color: transparent; stroke-width: 3; transition: all .2s; box-sizing: border-box; }
.ck-marca:hover svg { border-color: var(--txt2); }
.ck-item.encaminhado .ck-marca svg { border-color: var(--warn); background: linear-gradient(90deg, var(--warn-bg) 50%, transparent 50%); }
.ck-item.concluido .ck-marca svg { background: var(--feito); border-color: var(--feito); color: var(--feito-txt); }
.ck-txt { flex: 1; min-width: 0; padding: 7px 0 !important; font-size: 14px; line-height: 1.45; display: flex; flex-direction: column; gap: 4px; }
.ck-item.concluido .ck-txt > span:first-child { color: var(--mute2); text-decoration: line-through; text-decoration-color: var(--line3); }
.ck-resp { align-self: flex-start; font-size: 12.5px; font-weight: 600; color: var(--lar2); background: var(--lar-bg); border-radius: 8px; padding: 3px 9px; white-space: pre-wrap; word-break: break-word; }
.ck-tag { align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--warn); letter-spacing: .04em; }
.ck-ic { width: 32px; height: 34px; display: grid !important; place-items: center; color: var(--apagado) !important; flex: none; transition: color .2s; }
.ck-ic svg { width: 17px; height: 17px; }
.ck-ic:hover, .ck-item:hover .ck-ic { color: var(--mute) !important; }
.ck-ic.on { color: var(--lar) !important; }
.verif-bloco .ck-item { cursor: pointer; }
.estrela { width: 32px; height: 34px; display: grid !important; place-items: center; color: var(--apagado) !important; flex: none; transition: color .2s; }
.estrela svg { width: 17px; height: 17px; }
.estrela:hover { color: var(--mute) !important; }
.estrela.on { color: var(--lar) !important; }
.estrela.on svg { fill: currentColor; }
.seg { display: inline-flex; padding: 3px; border-radius: 99px; border: 1px solid var(--line2); flex: none; }
.seg button { border: 0; background: none; height: 30px; padding: 0 13px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--mute2); cursor: pointer; white-space: nowrap; transition: all .2s; }
.seg button:hover { color: var(--txt); }
.seg button.on.a_fazer { background: var(--card3); color: var(--txt); }
.seg button.on.encaminhado { background: var(--warn-bg); color: var(--warn); }
.seg button.on.concluido { background: var(--feito); color: var(--feito-txt); }
.seg.moeda { height: 44px; align-items: center; }
.seg.moeda button { height: 36px; padding: 0 16px; font-size: 13px; }

/* ------------------------------------------------------------ métricas: destaque e funil deitado */
.kpi.destaque.verde { border-color: rgba(97, 206, 112, .5); background: radial-gradient(120% 120% at 100% 0%, rgba(97, 206, 112, .14), transparent 55%), var(--card); }
.kpi.destaque.verde b { text-shadow: 0 0 24px rgba(97, 206, 112, .35); }
a.periodo { color: inherit; }
.funilh { display: flex; gap: 4px; }
.fh-et { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.fh-rot { font-size: 12.5px; line-height: 1.3; color: var(--txt2); min-height: 34px; display: flex; align-items: flex-end; justify-content: center; padding: 0 4px; }
.fh-forma { height: 190px; position: relative; display: grid; place-items: center; }
.fh-forma::before { content: ""; position: absolute; inset: 0; opacity: calc(1 - var(--i) * .11);
  background: linear-gradient(180deg, #ff7a3d, #ff5b14 45%, #a32700);
  clip-path: polygon(0 calc(50% - var(--a) * 50%), 100% calc(50% - var(--b) * 50%), 100% calc(50% + var(--b) * 50%), 0 calc(50% + var(--a) * 50%)); }
.fh-forma b { position: relative; font-family: var(--t); font-weight: 600; font-size: 18px; color: #fff; letter-spacing: -.02em; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.fh-conv { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; min-height: 52px; }
.fh-conv b { font-family: var(--t); font-weight: 500; }
@media (max-width: 720px) {
  /* celular: o funil fica de pé (afina pra baixo), rótulo à esquerda, conversão à direita */
  .funilh { flex-direction: column; gap: 3px; }
  .fh-et { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 74px; gap: 10px; align-items: center; text-align: left; }
  .fh-rot { min-height: 0; justify-content: flex-start; padding: 0; font-size: 12px; }
  .fh-forma { height: 50px; }
  .fh-forma::before { clip-path: polygon(calc(50% - var(--a) * 50%) 0, calc(50% + var(--a) * 50%) 0, calc(50% + var(--b) * 50%) 100%, calc(50% - var(--b) * 50%) 100%); }
  .fh-forma b { font-size: 15px; }
  .fh-conv { min-height: 0; align-items: flex-end; gap: 4px; font-size: 12px; }
}

/* ------------------------------------------------------------ bônus por dentro */
a.fer { color: inherit; }
a.fer .btn { align-self: flex-start; }
.bonus-capa { aspect-ratio: 16 / 9; border-radius: var(--r); background: var(--bg2) center/cover no-repeat; border: 1px solid var(--line); }

/* ------------------------------------------------------------ preparação pro go-live (só admin) */
.prontidao { border-color: rgba(255, 91, 20, .35); }
.pr-lista { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; }
.pr-lista li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.pr-lista li b { font-weight: 600; font-size: 15px; }
.pr-lista li p { margin-top: 2px; }
.pr-ic { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1.5px solid var(--lar); }
.pr-ic svg { width: 14px; height: 14px; stroke-width: 3; }
.pr-lista li.feito .pr-ic { background: var(--feito); border-color: var(--feito); color: var(--feito-txt); }
.pr-lista li.feito b { color: var(--mute); }
@media (max-width: 600px) {
  .pr-lista li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px 14px; align-items: start; }
  .pr-lista li .btn { grid-column: 2; justify-self: start; }
}