/* Preparação Bizurada — plataforma de estudos */
:root {
  --fundo: #070807;
  --painel: #101210;
  --painel2: #161915;
  --linha: #252a22;
  --linha2: #353c30;
  --texto: #e8e6df;
  --suave: #9a9d92;
  --apagado: #6b6f65;
  --ouro: #d4a72c;
  --ouro2: #f0c75a;
  --oliva: #6f7d3c;
  --oliva2: #8fa04e;
  --sangue: #c0392b;
  --verde: #4caf6a;
  --raio: 10px;
  --titulo: 'Bebas Neue', 'Oswald', Impact, sans-serif;
  --tatico: 'Rajdhani', 'Inter', sans-serif;
  --corpo: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
}
body::before { /* camuflado digital bem sutil */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%238fa04e'%3E%3Crect x='0' y='0' width='20' height='10'/%3E%3Crect x='40' y='10' width='30' height='10'/%3E%3Crect x='90' y='0' width='10' height='20'/%3E%3Crect x='10' y='40' width='20' height='20'/%3E%3Crect x='60' y='50' width='40' height='10'/%3E%3Crect x='30' y='80' width='10' height='30'/%3E%3Crect x='80' y='90' width='30' height='10'/%3E%3Crect x='0' y='100' width='20' height='10'/%3E%3C/g%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; color: var(--texto); }
img { max-width: 100%; display: block; }

/* ---------- estrutura ---------- */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.lateral {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: linear-gradient(180deg, #0c0e0b, #080908);
  border-right: 1px solid var(--linha);
  padding: 22px 14px; display: flex; flex-direction: column; gap: 4px;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; border-bottom: 1px solid var(--linha); margin-bottom: 14px; }
.marca svg { width: 42px; height: 42px; flex: none; }
.marca b { font-family: var(--titulo); font-size: 23px; letter-spacing: 1.5px; line-height: .95; display: block; font-weight: 400; }
.marca small { font-family: var(--tatico); color: var(--ouro); font-size: 11px; letter-spacing: 3px; font-weight: 700; }
.nav-sec { font-family: var(--tatico); font-size: 11px; letter-spacing: 2.5px; color: var(--apagado); font-weight: 700; padding: 14px 10px 6px; text-transform: uppercase; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px;
  color: var(--suave); font-weight: 500; font-size: 14.5px; border-left: 2px solid transparent; transition: .15s;
}
.nav a svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.nav a:hover { background: var(--painel2); color: var(--texto); }
.nav a.ativo { background: linear-gradient(90deg, rgba(212,167,44,.14), transparent); color: var(--ouro2); border-left-color: var(--ouro); }
.lateral .rodape-lat { margin-top: auto; padding: 16px 10px 0; font-size: 11.5px; color: var(--apagado); border-top: 1px solid var(--linha); }

.principal { min-width: 0; }
.topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: 14px 32px; background: rgba(7,8,7,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha);
}
.menu-btn { display: none; width: 38px; height: 38px; border: 1px solid var(--linha2); border-radius: 8px; place-items: center; }
.busca { flex: 1; max-width: 520px; position: relative; }
.busca input {
  width: 100%; background: var(--painel); border: 1px solid var(--linha2); border-radius: 8px;
  padding: 10px 14px 10px 40px; outline: none; transition: .15s;
}
.busca input:focus { border-color: var(--ouro); }
.busca svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; color: var(--apagado); }
.topo .patente { margin-left: auto; display: flex; align-items: center; gap: 10px; font-family: var(--tatico); font-weight: 700; letter-spacing: 1px; font-size: 13px; color: var(--suave); }
.topo .patente .divisa { color: var(--ouro); }
.conteudo { padding: 30px 32px 70px; max-width: 1280px; }

/* ---------- tipografia ---------- */
h1, h2, h3 { font-family: var(--titulo); font-weight: 400; letter-spacing: 1.5px; line-height: 1; }
h1 { font-size: clamp(40px, 6vw, 72px); }
h2 { font-size: 34px; margin-bottom: 6px; }
h3 { font-size: 23px; }
.rotulo { font-family: var(--tatico); font-weight: 700; letter-spacing: 3px; font-size: 12px; color: var(--ouro); text-transform: uppercase; }
.sub { color: var(--suave); max-width: 720px; }
.cab-pagina { margin-bottom: 26px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.cab-pagina > div { display: grid; gap: 8px; }

/* ---------- hero ---------- */
.hero {
  position: relative; border-radius: 16px; overflow: hidden; min-height: 440px; display: flex; align-items: flex-end;
  border: 1px solid var(--linha2); margin-bottom: 28px; isolation: isolate;
}
.hero .fotos { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); z-index: -2; }
.hero .fotos div { background-size: cover; background-position: center; }

/* tratamento cinematográfico: sombras frias, luzes douradas, granulado e vinheta */
.cine { position: relative; background-size: cover; background-position: center; filter: saturate(.75) contrast(1.28) brightness(.72) sepia(.18); transition: filter .5s; overflow: hidden; }
.cine::before {
  content: ''; position: absolute; inset: 0; mix-blend-mode: soft-light;
  background: linear-gradient(160deg, rgba(240,199,90,.55) 0%, rgba(20,40,45,.2) 45%, rgba(10,30,40,.75) 100%);
}
.cine::after {
  content: ''; position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.9) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero:hover .cine, a.carreira:hover .cine { filter: saturate(.95) contrast(1.22) brightness(.85) sepia(.12); }
.unidade {
  position: absolute; z-index: 2; top: 12px; left: 12px; font-family: var(--tatico); font-weight: 700; font-size: 11px; letter-spacing: 2.5px;
  color: var(--ouro2); background: rgba(0,0,0,.55); border: 1px solid rgba(212,167,44,.35); padding: 3px 8px; border-radius: 4px; text-transform: uppercase;
}
.hero .unidade { top: auto; bottom: 14px; left: auto; right: 12px; opacity: .8; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, var(--fundo) 6%, rgba(7,8,7,.75) 45%, rgba(7,8,7,.25)),
              linear-gradient(90deg, rgba(7,8,7,.9), transparent 70%);
}
.hero-txt { padding: 40px; max-width: 760px; display: grid; gap: 14px; }
.hero h1 span { color: var(--ouro); }
.hero p { color: #c9cbc2; font-size: 16.5px; }
.hero-logo { position: absolute; right: 30px; top: 24px; width: clamp(110px, 18vw, 240px); filter: drop-shadow(0 10px 30px rgba(0,0,0,.8)); z-index: 0; }
.hero-txt { position: relative; z-index: 1; }
.estrelas { color: var(--ouro); letter-spacing: 6px; font-size: 15px; text-shadow: 0 0 12px rgba(212,167,44,.5); }

/* logo do usuário na lateral */
.marca .logo-img { display: none; }
.marca.tem-logo { flex-direction: column; text-align: center; }
.marca.tem-logo .logo-img { display: block; width: 150px; margin: 0 auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.marca.tem-logo svg, .marca.tem-logo > span { display: none; }

/* marca d'água: brasão da Preparação Bizurada */
.principal { position: relative; }
.principal::after {
  content: ''; position: fixed; right: -50px; bottom: -40px; width: 540px; height: 540px; z-index: -1; pointer-events: none;
  background: url('../img/logo.webp') center / contain no-repeat; opacity: .06;
}
/* fuzis cruzados atrás dos números */
.stat { overflow: hidden; }
.stat::after {
  content: ''; position: absolute; right: -24px; bottom: -10px; width: 150px; height: 44px; opacity: .09;
  background: url('../img/fuzil.svg') center / contain no-repeat; transform: rotate(-18deg);
}
.acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 8px;
  font-family: var(--tatico); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; font-size: 14px;
  border: 1px solid var(--linha2); background: var(--painel2); transition: .15s;
}
.btn:hover { border-color: var(--ouro); color: var(--ouro2); }
.btn.ouro { background: var(--ouro); color: #111; border-color: var(--ouro); }
.btn.ouro:hover { background: var(--ouro2); color: #111; }
.btn.peq { padding: 7px 12px; font-size: 12.5px; }
.btn svg { width: 16px; height: 16px; }

/* ---------- cartões e grades ---------- */
.grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grade.g4 { grid-template-columns: repeat(4, 1fr); }
.cartao {
  background: linear-gradient(180deg, var(--painel2), var(--painel)); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 20px; position: relative; transition: .18s;
}
a.cartao:hover, button.cartao:hover { border-color: var(--oliva2); transform: translateY(-2px); }
.cartao::before { /* cantoneira tática */
  content: ''; position: absolute; top: -1px; left: -1px; width: 16px; height: 16px;
  border-top: 2px solid var(--ouro); border-left: 2px solid var(--ouro); border-radius: var(--raio) 0 0 0;
}
.stat b { font-family: var(--titulo); font-size: 46px; font-weight: 400; display: block; line-height: 1; color: var(--ouro2); }
.stat span { color: var(--suave); font-size: 13.5px; }
.materia { display: grid; gap: 10px; text-align: left; }
.materia .ico { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: rgba(111,125,60,.18); color: var(--oliva2); border: 1px solid rgba(143,160,78,.3); }
.materia .ico svg { width: 22px; height: 22px; }
.materia h3 { font-size: 22px; }
.materia .meta { display: flex; flex-wrap: wrap; gap: 6px; }
.etq { font-family: var(--tatico); font-weight: 600; font-size: 12px; letter-spacing: .5px; padding: 3px 8px; border-radius: 5px; background: #1d211b; color: var(--suave); border: 1px solid var(--linha); }
.etq.ouro { color: var(--ouro2); border-color: rgba(212,167,44,.35); background: rgba(212,167,44,.08); }
.etq.verde { color: #7fd598; border-color: rgba(76,175,106,.35); background: rgba(76,175,106,.08); }
.barra { height: 5px; border-radius: 3px; background: #22261f; overflow: hidden; }
.barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--oliva), var(--ouro)); }
.secao { margin: 38px 0 16px; display: flex; align-items: center; gap: 14px; }
.secao::after { /* faca como divisor */
  content: ''; flex: 1; height: 22px; opacity: .8;
  background: url('../img/faca.svg') left center / auto 18px no-repeat, linear-gradient(var(--linha2), var(--linha2)) 230px center / calc(100% - 230px) 1px no-repeat;
}
.secao h2 { display: flex; align-items: center; gap: 10px; }
.secao h2::before { content: ''; width: 34px; height: 34px; flex: none; background: url('../img/logo-mini.png') center / contain no-repeat; }
.secao h2 { margin: 0; font-size: 28px; }

/* carreiras */
.carreira { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.carreira .foto { aspect-ratio: 16/10; }
.carreira .corpo { position: relative; margin-top: -30px; z-index: 2; }
.carreira .corpo { padding: 4px 20px 20px; display: grid; gap: 8px; }
.carreira .sigla { font-family: var(--titulo); font-size: 38px; color: var(--ouro); line-height: 1; }
.carreira p { color: var(--suave); font-size: 14px; }

/* ---------- listas ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; align-items: center; }
.filtros select, .filtros input {
  background: var(--painel); border: 1px solid var(--linha2); border-radius: 8px; padding: 9px 12px; outline: none;
}
.chip { padding: 7px 13px; border-radius: 20px; border: 1px solid var(--linha2); font-size: 13px; color: var(--suave); font-weight: 500; }
.chip.ativo, .chip:hover { border-color: var(--ouro); color: var(--ouro2); background: rgba(212,167,44,.07); }
.lista { display: grid; gap: 8px; }
.item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  background: var(--painel); border: 1px solid var(--linha); border-radius: 9px; padding: 12px 16px; transition: .15s;
}
.item:hover { border-color: var(--linha2); background: var(--painel2); }
.item .tipo { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; background: #1b1f19; color: var(--ouro); }
.item .tipo svg { width: 19px; }
.item .tit { font-weight: 600; font-size: 14.5px; }
.item .info { font-size: 12.5px; color: var(--apagado); display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.item .lado { display: flex; gap: 6px; align-items: center; }
.item.feito .tit { color: var(--suave); }
.item.feito .tipo { background: rgba(76,175,106,.15); color: var(--verde); }
.marcar { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--linha2); display: grid; place-items: center; color: var(--apagado); }
.marcar svg { width: 15px; }
.item.feito .marcar { background: var(--verde); border-color: var(--verde); color: #08130c; }
.mais { margin-top: 14px; text-align: center; }
.vazio { padding: 40px; text-align: center; color: var(--suave); border: 1px dashed var(--linha2); border-radius: var(--raio); display: grid; gap: 10px; justify-items: center; }
.vazio svg { width: 44px; color: var(--apagado); }

/* abas internas */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; }
.abas button { padding: 11px 16px; font-family: var(--tatico); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 13.5px; color: var(--suave); border-bottom: 2px solid transparent; white-space: nowrap; display: flex; gap: 7px; align-items: center; }
.abas button svg { width: 15px; }
.abas button.ativo { color: var(--ouro2); border-bottom-color: var(--ouro); }
.abas button .n { font-size: 11px; background: #1f231c; padding: 1px 6px; border-radius: 4px; color: var(--apagado); }

/* ---------- flashcards ---------- */
.flash-area { display: grid; justify-items: center; gap: 18px; }
.flash { width: min(680px, 100%); aspect-ratio: 16/9; perspective: 1400px; cursor: pointer; }
.flash .giro { position: relative; width: 100%; height: 100%; transition: transform .55s cubic-bezier(.3,.7,.3,1); transform-style: preserve-3d; }
.flash.virado .giro { transform: rotateY(180deg); }
.flash .face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 14px; padding: 34px;
  display: grid; place-items: center; text-align: center; font-size: clamp(16px, 2.2vw, 21px); font-weight: 500;
  background: linear-gradient(160deg, #1a1e17, #0f110e); border: 1px solid var(--linha2); overflow-y: auto;
}
.flash .face.verso { transform: rotateY(180deg); background: linear-gradient(160deg, #23200f, #12110a); border-color: rgba(212,167,44,.4); }
.flash .face .rotulo { position: absolute; top: 16px; left: 20px; }
.flash .face .dica-v { position: absolute; bottom: 14px; font-size: 12px; color: var(--apagado); font-family: var(--tatico); letter-spacing: 1px; }
.flash-ctrl { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.btn.erro { border-color: rgba(192,57,43,.5); color: #f08b80; }
.btn.acerto { border-color: rgba(76,175,106,.5); color: #7fd598; }
.contador { font-family: var(--tatico); font-weight: 700; letter-spacing: 2px; color: var(--suave); }

/* ---------- questões ---------- */
.questao { max-width: 860px; }
.questao .enun { font-size: 17px; font-weight: 500; margin: 12px 0 18px; }
.alts { display: grid; gap: 10px; }
.alt {
  display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; text-align: left;
  padding: 13px 16px; border-radius: 9px; border: 1px solid var(--linha2); background: var(--painel); transition: .15s;
}
.alt:hover:not([disabled]) { border-color: var(--ouro); }
.alt .letra { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linha2); display: grid; place-items: center; font-family: var(--tatico); font-weight: 700; }
.alt .porque { grid-column: 2; font-size: 13.5px; color: var(--suave); margin-top: 6px; display: none; }
.alt.certa { border-color: var(--verde); background: rgba(76,175,106,.08); }
.alt.certa .letra { background: var(--verde); border-color: var(--verde); color: #071; color: #06140b; }
.alt.errada { border-color: var(--sangue); background: rgba(192,57,43,.08); }
.alt.errada .letra { background: var(--sangue); border-color: var(--sangue); }
.respondida .alt .porque { display: block; }
.dica { margin-top: 14px; font-size: 13.5px; color: var(--suave); }
.explica { margin-top: 20px; border-radius: 12px; padding: 18px 20px; background: #0c0e0b; border: 1px solid var(--linha2); display: grid; gap: 6px; animation: surge .35s; }
.explica .veredito { display: flex; align-items: center; gap: 10px; font-family: var(--tatico); font-weight: 700; font-size: 17px; letter-spacing: .5px; padding-bottom: 10px; border-bottom: 1px solid var(--linha); margin-bottom: 4px; }
.explica .veredito svg { width: 22px; }
.explica.ok { border-color: rgba(76,175,106,.5); } .explica.ok .veredito { color: #7fd598; }
.explica.nok { border-color: rgba(192,57,43,.5); } .explica.nok .veredito { color: #f08b80; }
.explica h4 { display: flex; align-items: center; gap: 8px; font-family: var(--tatico); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--ouro2); margin-top: 10px; }
.explica h4 svg { width: 16px; }
.explica p { color: #d6d5cd; font-size: 15px; }
.placar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }

/* ---------- mapa mental ---------- */
.mapa { overflow-x: auto; padding: 10px 0 20px; }
.mapa ul { list-style: none; padding-left: 26px; position: relative; }
.mapa > ul { padding-left: 0; }
.mapa li { position: relative; padding: 5px 0 5px 22px; }
.mapa > ul > li { padding-left: 0; }
.mapa li::before { content: ''; position: absolute; left: 0; top: 21px; width: 18px; height: 1px; background: var(--linha2); }
.mapa li::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--linha2); }
.mapa li:last-child::after { height: 21px; }
.mapa > ul > li::before, .mapa > ul > li::after { display: none; }
.no {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 8px; font-size: 14px;
  background: var(--painel2); border: 1px solid var(--linha2); text-align: left;
}
.no.tem { cursor: pointer; }
.no.tem:hover { border-color: var(--ouro); }
.no .seta { width: 14px; transition: .2s; color: var(--ouro); }
li.fechado > .no .seta { transform: rotate(-90deg); }
li.fechado > ul { display: none; }
.nivel0 { font-family: var(--titulo); font-size: 24px; letter-spacing: 1px; background: var(--ouro); color: #111; border-color: var(--ouro); padding: 9px 18px; }
.nivel1 { border-color: rgba(212,167,44,.5); color: var(--ouro2); font-weight: 700; font-family: var(--tatico); font-size: 15.5px; letter-spacing: .5px; }
.nivel2 { border-color: rgba(143,160,78,.45); color: #c8d39a; font-weight: 600; }

/* ---------- áudio ---------- */
.player { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.player .disco { width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(circle, var(--ouro) 0 14%, #111 15% 38%, #1d211a 39% 100%); border: 1px solid var(--linha2); position: relative; }
.player.tocando .disco { animation: gira 4s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.player audio { width: 100%; filter: invert(.88) sepia(.3) hue-rotate(10deg); height: 40px; }

/* ---------- relatório de atualizações ---------- */
.relatorio { max-width: 900px; padding: 30px 34px; font-size: 15.5px; }
.relatorio h2 { font-size: 30px; color: var(--ouro2); margin: 26px 0 10px; }
.relatorio h2:first-child { margin-top: 0; }
.relatorio h3 { font-size: 22px; margin: 22px 0 8px; color: #c8d39a; }
.relatorio h4 { font-family: var(--tatico); font-size: 16px; letter-spacing: .5px; margin: 16px 0 6px; }
.relatorio p { margin: 8px 0; color: #d6d5cd; }
.relatorio ul, .relatorio ol { margin: 8px 0 8px 22px; display: grid; gap: 6px; color: #d6d5cd; }
.relatorio b { color: var(--texto); }
.relatorio li.sub { margin-left: 22px; list-style: circle; font-size: 14.5px; }
.relatorio li:not(.sub) + li.sub { margin-top: -2px; }
.relatorio blockquote { border-left: 3px solid var(--ouro); background: rgba(212,167,44,.06); padding: 10px 14px; margin: 12px 0; border-radius: 0 8px 8px 0; }
.relatorio code { background: #1d211b; padding: 1px 5px; border-radius: 4px; font-size: 13.5px; }
.relatorio hr { border: 0; border-top: 1px solid var(--linha); margin: 20px 0; }

/* ---------- resumo interativo ---------- */
.bizu { display: grid; grid-template-columns: 26px 1fr; gap: 10px; margin: 14px 0; padding: 12px 14px; border-radius: 9px; background: linear-gradient(90deg, rgba(212,167,44,.13), rgba(212,167,44,.03)); border: 1px solid rgba(212,167,44,.35); }
.bizu svg { width: 22px; color: var(--ouro); }
.bizu b { font-family: var(--tatico); letter-spacing: 2px; color: var(--ouro2); margin-right: 4px; }
.flash-mini { margin: 16px 0; padding: 14px 16px; border-radius: 10px; border: 1px dashed rgba(143,160,78,.6); background: rgba(111,125,60,.08); cursor: pointer; display: grid; gap: 6px; }
.flash-mini .rotulo { color: var(--oliva2); display: flex; gap: 6px; align-items: center; }
.flash-mini .fm-f { font-weight: 600; }
.flash-mini .fm-v { display: none; color: var(--ouro2); border-top: 1px solid var(--linha2); padding-top: 8px; }
.flash-mini.virado .fm-v { display: block; animation: surge .3s; }
@keyframes surge { from { opacity: 0; transform: translateY(-4px); } }
.teste { margin: 20px 0; padding: 18px; border-radius: 12px; background: #0c0e0b; border: 1px solid var(--linha2); border-left: 3px solid var(--ouro); }
.teste .enun { font-weight: 600; margin: 8px 0 12px; }
.teste .alt { padding: 10px 13px; font-size: 14.5px; }
.teste .exp { display: none; margin-top: 12px; font-size: 14px; color: var(--suave); padding: 10px 12px; background: var(--painel2); border-radius: 8px; }
.teste.respondida .exp { display: block; }

/* ---------- cronômetro ---------- */
.crono { display: flex; align-items: center; gap: 8px; background: var(--painel); border: 1px solid var(--linha2); border-radius: 8px; padding: 4px 6px 4px 10px; }
.crono > svg { width: 17px; color: var(--apagado); flex: none; }
.crono select { background: transparent; border: 0; outline: none; max-width: 150px; font-size: 13px; color: var(--suave); }
.crono select option { background: var(--painel); }
.crono .tempo { font-family: var(--tatico); font-weight: 700; font-size: 16px; letter-spacing: 1px; min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.crono .play { width: 30px; height: 30px; border-radius: 6px; background: var(--ouro); color: #111; display: grid; place-items: center; }
.crono .play svg { width: 14px; }
.crono.on { border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(212,167,44,.12); }
.crono.on > svg, .crono.on .tempo { color: var(--ouro2); }
.crono.on .play { background: var(--sangue); color: #fff; }

/* ---------- desempenho ---------- */
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 170px; }
.dia { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; font-size: 12px; color: var(--suave); text-transform: capitalize; }
.dia i { width: 100%; max-width: 44px; border-radius: 5px 5px 2px 2px; background: linear-gradient(0deg, var(--oliva), var(--ouro)); }
.dia .v { font-family: var(--tatico); font-weight: 700; color: var(--texto); }
.tabela-wrap { overflow-x: auto; padding: 8px 16px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
.tabela th { text-align: left; font-family: var(--tatico); letter-spacing: 1.5px; font-size: 12px; color: var(--apagado); text-transform: uppercase; padding: 10px 8px; border-bottom: 1px solid var(--linha2); }
.tabela td { padding: 10px 8px; border-bottom: 1px solid var(--linha); }
.tabela td.ok { color: #7fd598; font-weight: 600; } .tabela td.nok { color: #f08b80; font-weight: 600; }
.tabela .apagado { color: var(--apagado); font-size: 12.5px; }
.aprov { display: grid; grid-template-columns: 1fr 44px; gap: 10px; align-items: center; }
.aprov b { font-family: var(--tatico); text-align: right; }
.item.rec { grid-template-columns: auto 1fr; }
.linha-mat { display: grid; grid-template-columns: 210px 1fr 60px; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.linha-mat span:last-child { text-align: right; font-family: var(--tatico); font-weight: 700; color: var(--ouro2); }

.creditos { margin-top: 50px; font-size: 11.5px; color: var(--apagado); border-top: 1px solid var(--linha); padding-top: 16px; }
.creditos a { text-decoration: underline; }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--ouro); color: #111; padding: 10px 18px; border-radius: 8px; font-weight: 600; transition: .25s; z-index: 99; }
.toast.on { transform: translateX(-50%) translateY(0); }

/* ---------- página inicial cinematográfica ---------- */
.conteudo.home { padding-top: 0; }
.cine-hero {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  height: min(82vh, 760px); min-height: 520px; margin: 0 -32px; background: #000;
}
.slides { position: absolute; inset: 0; z-index: -3; }
.slide {
  position: absolute; inset: -3%; background-size: cover; background-position: center 30%; opacity: 0;
  transition: opacity 1.8s ease; filter: grayscale(.3) contrast(1.35) brightness(.42) saturate(.65) sepia(.28);
}
.slide.ativo { opacity: 1; animation: kenburns 9s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.02) translateX(0); } to { transform: scale(1.14) translateX(-1.5%); } }
.cine-hero::before { /* gradação de cor: sombras frias, luz dourada */
  content: ''; position: absolute; inset: 0; z-index: -2; mix-blend-mode: soft-light;
  background: linear-gradient(170deg, rgba(240,199,90,.5), rgba(10,35,45,.35) 50%, rgba(5,20,30,.85));
}
.cine-hero::after { /* vinheta + fade para o fundo */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 80% 70% at 60% 40%, transparent 30%, rgba(0,0,0,.85) 100%),
              linear-gradient(0deg, var(--fundo) 2%, rgba(7,8,7,.55) 35%, transparent 65%),
              linear-gradient(90deg, rgba(0,0,0,.75), transparent 60%);
}
.grao {
  position: absolute; inset: -50%; z-index: -1; opacity: .13; pointer-events: none; animation: grao .9s steps(4) infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes grao { 0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); } 50% { transform: translate(2%,-3%); } 75% { transform: translate(-2%,-1%); } }
.tarja { position: absolute; left: 0; right: 0; height: 6%; background: #000; z-index: 2; }
.tarja.t1 { top: 0; } .tarja.t2 { bottom: 0; }
.hud { position: absolute; top: calc(6% + 16px); left: 32px; z-index: 3; display: flex; align-items: center; gap: 8px; font-family: var(--tatico); font-weight: 700; font-size: 11.5px; letter-spacing: 3px; color: rgba(232,230,223,.75); }
.hud i { width: 9px; height: 9px; border-radius: 50%; background: var(--sangue); box-shadow: 0 0 8px var(--sangue); animation: pisca 1.4s infinite; }
@keyframes pisca { 50% { opacity: .2; } }
.cine-hero .hero-logo { top: calc(6% + 18px); right: 32px; width: clamp(110px, 15vw, 210px); z-index: 3; }
.cine-txt { position: relative; z-index: 3; padding: 0 32px calc(6% + 40px); max-width: 820px; display: grid; gap: 14px; }
.cine-txt h1 { font-size: clamp(52px, 8.5vw, 116px); line-height: .9; text-shadow: 0 6px 40px rgba(0,0,0,.8); }
.cine-txt h1 span { color: var(--ouro); text-shadow: 0 0 30px rgba(212,167,44,.35); }
.cine-txt p { color: #c9cbc2; font-size: 17px; max-width: 600px; text-shadow: 0 2px 12px #000; }
.btn.vidro { background: rgba(10,12,10,.45); backdrop-filter: blur(6px); border-color: rgba(232,230,223,.25); }

.briefing { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 -32px; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); background: linear-gradient(180deg, #050605, #0b0d0a); }
.briefing div { padding: 22px 32px; border-right: 1px solid var(--linha); display: grid; }
.briefing div:last-child { border-right: 0; }
.briefing b { font-family: var(--titulo); font-size: 48px; font-weight: 400; line-height: 1; color: var(--ouro2); }
.briefing span { color: var(--suave); font-family: var(--tatico); letter-spacing: 2px; text-transform: uppercase; font-size: 12px; font-weight: 700; }

.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-auto-rows: 200px; gap: 12px; }
.quadro {
  position: relative; overflow: hidden; border-radius: 10px; background-size: cover; background-position: center;
  border: 1px solid var(--linha); transition: border-color .3s;
}
.quadro:hover { border-color: rgba(212,167,44,.6); }
.quadro::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.85), transparent 55%); }
.quadro .q-txt { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.quadro .q-ico { grid-row: span 2; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: rgba(212,167,44,.15); border: 1px solid rgba(212,167,44,.45); color: var(--ouro2); }
.quadro .q-ico svg { width: 20px; }
.quadro b { font-family: var(--titulo); font-weight: 400; font-size: 28px; letter-spacing: 1.5px; line-height: 1; color: var(--texto); }
.quadro small { color: #b9bbb2; font-size: 13px; }
.quadro:hover b { color: var(--ouro2); }
.quadro::before { content: ''; position: absolute; inset: 0; background: inherit; filter: grayscale(.85) contrast(1.25) brightness(.55); transition: filter .5s; }
.quadro:hover::before { filter: grayscale(.1) contrast(1.15) brightness(.8) sepia(.15); }

.banner-final {
  position: relative; isolation: isolate; overflow: hidden; margin: 50px -32px 0; min-height: 380px; display: flex; align-items: center;
  background-size: cover; background-position: center 35%;
}
.banner-final::before { content: ''; position: absolute; inset: 0; z-index: -1; backdrop-filter: grayscale(.5) contrast(1.2) brightness(.4) sepia(.25);
  background: radial-gradient(ellipse at 70% 50%, transparent 20%, rgba(0,0,0,.9) 90%), linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.2)); }
.banner-final > div { padding: 40px 32px; display: grid; gap: 12px; max-width: 640px; }
.banner-final h2 { font-size: clamp(40px, 6vw, 76px); line-height: .92; }
.banner-final p { color: #c9cbc2; }
.banner-final .btn { justify-self: start; }

/* cabeçalho das outras páginas com foto */
.conteudo:not(.home) > .cab-pagina:first-child {
  position: relative; isolation: isolate; overflow: hidden; margin: -30px -32px 26px; padding: 70px 32px 30px; min-height: 230px;
  border-bottom: 1px solid var(--linha);
}
.conteudo:not(.home) > .cab-pagina:first-child::before {
  content: ''; position: absolute; inset: 0; z-index: -2; background: var(--cena) center 35% / cover no-repeat;
  filter: grayscale(.35) contrast(1.3) brightness(.55) sepia(.3);
}
.conteudo:not(.home) > .cab-pagina:first-child::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, var(--fundo) 0%, rgba(7,8,7,.35) 55%, rgba(7,8,7,.6)), linear-gradient(90deg, rgba(0,0,0,.65), transparent 75%);
}

/* ---------- concursos ---------- */
.contagem { display: grid; text-align: center; padding: 12px 20px; border-radius: 12px; background: rgba(0,0,0,.55); border: 1px solid rgba(212,167,44,.45); backdrop-filter: blur(6px); }
.contagem b { font-family: var(--titulo); font-weight: 400; font-size: 52px; line-height: 1; color: var(--ouro2); }
.contagem span { font-family: var(--tatico); font-weight: 700; letter-spacing: 2px; font-size: 11px; text-transform: uppercase; color: var(--suave); }
.peso { font-style: normal; color: var(--ouro2); font-weight: 700; }
.disc-edital { display: grid; gap: 10px; }
.disc-edital .d-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.regras { margin-left: 20px; display: grid; gap: 6px; color: #d6d5cd; }
.usuario { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--suave); white-space: nowrap; }
.usuario b { color: var(--texto); }
.sair-lat { margin: 14px 4px 0; justify-content: center; }
.faixa-aviso { background: rgba(192,57,43,.15); border-bottom: 1px solid rgba(192,57,43,.5); color: #f3a59b; padding: 10px 32px; font-size: 14px; }

/* ---------- criar meu cronograma ---------- */
.form-crono { display: grid; gap: 22px; max-width: 900px; padding: 26px; }
.form-crono .campo > label, .form-crono .duplo label { display: block; font-family: var(--tatico); font-weight: 700; letter-spacing: 1px; font-size: 15px; text-transform: uppercase; color: var(--ouro2); margin-bottom: 10px; }
.form-crono .duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: end; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-op input { position: absolute; opacity: 0; pointer-events: none; }
.chip-op span { display: inline-block; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--linha2); background: var(--painel); color: var(--suave); font-size: 14px; font-weight: 500; cursor: pointer; transition: .15s; user-select: none; }
.chip-op span:hover { border-color: var(--ouro); }
.chip-op input:checked + span { background: rgba(212,167,44,.14); border-color: var(--ouro); color: var(--ouro2); font-weight: 700; }
.chip-op input:focus-visible + span { outline: 2px solid var(--ouro); outline-offset: 2px; }
.regua { display: flex; align-items: center; gap: 14px; }
.regua input { flex: 1; accent-color: var(--ouro); }
.regua b { font-family: var(--titulo); font-weight: 400; font-size: 30px; color: var(--ouro2); min-width: 90px; }
.form-crono input[type=date] { background: var(--painel); border: 1px solid var(--linha2); border-radius: 8px; padding: 10px 12px; color-scheme: dark; width: 100%; }
.resumo-form { padding: 12px 14px; border-radius: 9px; background: rgba(212,167,44,.07); border: 1px solid rgba(212,167,44,.25); font-size: 15px; }
.resumo-form b { color: var(--ouro2); font-family: var(--tatico); font-size: 18px; }
.resumo-form span { color: var(--suave); font-size: 13px; }
.btn.grande { justify-self: start; padding: 14px 26px; font-size: 16px; }

.progresso-crono { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; margin-bottom: 18px; padding: 14px 20px; }
.progresso-crono b { font-family: var(--titulo); font-size: 26px; font-weight: 400; color: var(--ouro2); }
.progresso-crono > span { font-family: var(--tatico); font-weight: 700; color: var(--ouro2); }
.semana-plano { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.dia-plano { background: var(--painel); border: 1px solid var(--linha); border-radius: 12px; padding: 14px; display: grid; gap: 8px; align-content: start; }
.dia-plano.hoje { border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(212,167,44,.12); }
.dia-cab { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--linha); }
.dia-cab b { font-family: var(--titulo); font-weight: 400; font-size: 24px; letter-spacing: 1px; }
.dia-cab span { color: var(--suave); font-family: var(--tatico); font-weight: 600; }
.dia-cab em { margin-left: auto; font-style: normal; font-family: var(--tatico); font-weight: 700; font-size: 11px; letter-spacing: 2px; background: var(--ouro); color: #111; padding: 2px 8px; border-radius: 4px; }
.bloco { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px; border-radius: 9px; background: var(--painel2); border: 1px solid var(--linha); border-left: 3px solid var(--oliva2); }
.bloco.revisao { border-left-color: var(--ouro); }
.bloco.feito { opacity: .55; }
.bloco.feito .marcar { background: var(--verde); border-color: var(--verde); color: #08130c; }
.b-mat { font-weight: 700; font-size: 14.5px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.b-mat span { font-family: var(--tatico); font-size: 12px; color: var(--ouro2); font-weight: 700; }
.b-desc { font-size: 13.5px; color: #d0cfc7; margin-top: 2px; }
.b-extra { font-size: 12.5px; color: var(--suave); margin-top: 2px; }
.b-links { display: flex; flex-direction: column; gap: 4px; }
.b-links .btn.peq { padding: 5px 7px; }
.b-links .btn svg { width: 14px; height: 14px; }

@media print {
  .lateral, .topo, .abas.semanas, .cab-pagina .acoes, .b-links, .marcar, .creditos { display: none !important; }
  body, .app, .principal, .conteudo { background: #fff !important; color: #000 !important; display: block; }
  body::before, .principal::after, .cab-pagina::before, .cab-pagina::after { display: none !important; }
  .semana-plano[hidden] { display: grid !important; }
  .semana-plano::before { content: 'Semana ' attr(data-s); }
  .dia-plano, .bloco { background: #fff !important; border-color: #999 !important; color: #000; break-inside: avoid; }
  .b-desc, .b-extra, .dia-cab span, .sub { color: #333 !important; }
  .cab-pagina h1 { color: #000; font-size: 32px; }
}

/* ---------- celular ---------- */
@media (max-width: 1000px) { .grade.g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; left: 0; top: 0; width: 270px; z-index: 50; transform: translateX(-100%); transition: .25s; }
  .lateral.aberta { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.6); }
  .menu-btn { display: grid; }
  .topo { padding: 12px 16px; }
  .topo .patente { display: none; }
  .topo { flex-wrap: wrap; }
  #topoCrono { order: 3; width: 100%; }
  .crono select { max-width: none; flex: 1; }
  .conteudo { padding: 20px 16px 60px; }
  .hero { min-height: 400px; }
  .hero .fotos { grid-template-columns: repeat(2, 1fr); }
  .hero-txt { padding: 24px; }
  .hero-logo { width: 84px; right: 12px; top: 12px; }
  .item { grid-template-columns: auto 1fr; }
  .item .lado { grid-column: 1 / -1; justify-content: flex-end; }
  .linha-mat { grid-template-columns: 1fr 70px; }
  .linha-mat .barra { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 860px) {
  .cine-hero, .briefing, .banner-final { margin-left: -16px; margin-right: -16px; }
  .cine-hero { height: 78vh; min-height: 520px; }
  .cine-txt { padding: 0 18px calc(6% + 28px); }
  .hud { left: 18px; }
  .cine-hero .hero-logo { right: 14px; width: 90px; }
  .briefing { grid-template-columns: 1fr 1fr; }
  .briefing div { padding: 16px 18px; border-bottom: 1px solid var(--linha); }
  .briefing b { font-size: 38px; }
  .mosaico { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 8px; }
  .quadro .q-txt { left: 10px; right: 10px; bottom: 10px; column-gap: 8px; }
  .quadro .q-ico { width: 30px; height: 30px; } .quadro .q-ico svg { width: 16px; }
  .quadro b { font-size: 20px; } .quadro small { display: none; }
  .banner-final > div { padding: 30px 18px; }
  .conteudo:not(.home) > .cab-pagina:first-child { margin: -20px -16px 22px; padding: 56px 16px 24px; }
  .form-crono { padding: 18px; } .form-crono .duplo { grid-template-columns: 1fr; }
  .semana-plano { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .grade.g4 { grid-template-columns: 1fr 1fr; gap: 10px; } .stat b { font-size: 36px; } }
