/* Tema claro fixo por enquanto: as logos coloridas foram feitas para fundo claro. */
:root {
  --azul: #2f66a0;
  --azul-escuro: #1b3d66;
  --azul-claro: #eaf1f9;
  --laranja: #f7941d;
  --laranja-escuro: #d97706;
  --laranja-claro: #fff4e5;
  --verde: #16a34a;
  --whats: #25d366;
  --texto: #16212f;
  --texto-suave: #677385;
  --fundo: #f4f6fa;
  --cartao: #ffffff;
  --borda: #e6eaf0;
  --sombra: 0 4px 18px rgba(27, 61, 102, .07);
  --sombra-forte: 0 10px 30px rgba(27, 61, 102, .16);
  --raio: 22px;
  --gradiente-azul: linear-gradient(150deg, #3a78b8 0%, #1b3d66 100%);
  --gradiente-laranja: linear-gradient(150deg, #fbb04c 0%, #f7941d 100%);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Nunito", system-ui, -apple-system, sans-serif;
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 6px; font-weight: 900; }
p { margin: 0 0 10px; }
img { max-width: 100%; display: block; }
button { font: inherit; }

/* ============ moldura: celular = tela cheia; computador = aparelho ============ */
.lateral { display: none; }
.aparelho {
  position: relative;
  display: flex; flex-direction: column;
  height: 100dvh; width: 100%;
  background: var(--fundo);
  overflow: hidden;
}
@media (min-width: 900px) {
  body {
    display: flex; align-items: center; justify-content: center; gap: 72px;
    background: radial-gradient(circle at 20% 20%, #fff4e5 0, transparent 40%), radial-gradient(circle at 80% 80%, #dce8f5 0, transparent 45%), #eef2f7;
    min-height: 100vh; padding: 24px;
  }
  .lateral { display: block; width: 300px; color: var(--texto-suave); font-weight: 600; }
  .lateral img { width: 260px; margin-bottom: 24px; }
  .aparelho {
    width: 390px; height: min(844px, calc(100vh - 48px)); flex: 0 0 auto;
    border-radius: 48px; border: 11px solid #0f141b;
    box-shadow: 0 30px 80px rgba(15, 20, 27, .28);
  }
}

/* ============ splash ============ */
.splash {
  position: absolute; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--gradiente-azul); color: #fff;
  transition: opacity .5s ease, visibility .5s;
}
.splash img { width: 110px; animation: sobe 1s ease both; }
.splash p { font-weight: 800; letter-spacing: .22em; text-transform: uppercase; font-size: .72rem; color: #ffc27a; animation: aparece 1s .3s ease both; }
.splash.some { opacity: 0; visibility: hidden; }
@keyframes sobe { from { transform: translateY(20px) scale(.9); opacity: 0; } }
@keyframes aparece { from { opacity: 0; } }

/* ============ barra superior ============ */
.barra {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda);
  min-height: 60px; z-index: 10;
}
.barra-logo img { height: 34px; width: auto; }
.barra-titulo { flex: 1; font-size: 1.08rem; font-weight: 900; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-voltar {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: var(--azul-claro); color: var(--azul); cursor: pointer; flex: 0 0 auto;
}
.barra-news {
  margin-left: auto; flex: 0 0 auto; position: relative;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--azul-claro); color: var(--azul);
}
.barra-news .ponto { position: absolute; top: 7px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--laranja); border: 2px solid #fff; }
.barra-news .ponto[hidden] { display: none; }
.barra-whats {
  flex: 0 0 auto;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--whats); color: #fff; box-shadow: 0 4px 12px rgba(37, 211, 102, .35);
}
.barra-whats.quente { animation: pulsa 1.6s infinite; }
@keyframes pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); } 60% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); } }
.barra[data-modo="home"] .barra-voltar, .barra[data-modo="home"] .barra-titulo { display: none; }
.barra[data-modo="interna"] .barra-logo { display: none; }

/* ============ conteúdo rolável ============ */
.conteudo {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 16px 28px; outline: none;
  scrollbar-width: none;
}
.conteudo::-webkit-scrollbar { display: none; }
.conteudo > * { animation: entra .28s ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* ============ abas inferiores ============ */
.abas {
  flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: #fff; border-top: 1px solid var(--borda);
  padding: 6px 6px calc(8px + env(safe-area-inset-bottom));
  z-index: 10;
}
.abas a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 0; border-radius: 14px;
  font-size: .68rem; font-weight: 800; color: #9aa4b2; text-decoration: none;
  transition: color .15s;
}
.abas svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.abas a.ativa { color: var(--azul); }
.abas a.ativa svg { stroke-width: 2.4; }
.abas a.ativa span { position: relative; }
.abas a.ativa span::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--laranja); }
.modo-foco .abas { display: none; }

/* ============ blocos genéricos ============ */
.cartao { background: var(--cartao); border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra); margin-bottom: 14px; }
.secao-titulo { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 2px 10px; }
.secao-titulo h2 { font-size: 1.08rem; margin: 0; }
.secao-titulo a { font-size: .82rem; font-weight: 800; color: var(--azul); text-decoration: none; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  border: 0; border-radius: 16px; padding: 15px 20px;
  font-weight: 900; font-size: 1rem; cursor: pointer; text-decoration: none;
  transition: transform .1s, filter .15s;
}
.btn:active { transform: scale(.98); }
.btn-primario { background: var(--gradiente-laranja); color: #fff; box-shadow: 0 8px 20px rgba(247, 148, 29, .35); }
.btn-azul { background: var(--azul); color: #fff; }
.btn-secundario { background: var(--azul-claro); color: var(--azul); }
.btn-branco { background: #fff; color: var(--azul-escuro); }
.btn-link { background: none; color: var(--texto-suave); font-weight: 800; padding: 10px; box-shadow: none; }
.pilha > * + * { margin-top: 10px; }
.selo { display: inline-block; font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--laranja-escuro); background: var(--laranja-claro); padding: 4px 10px; border-radius: 999px; }
.pendente { color: var(--texto-suave); font-style: italic; font-weight: 700; }
.nota { font-size: .76rem; color: var(--texto-suave); margin-top: 10px; }

/* ============ home ============ */
.saudacao { margin: 0 2px 14px; }
.saudacao small { color: var(--texto-suave); font-weight: 700; }
.saudacao h1 { font-size: 1.5rem; }
.hero {
  position: relative; overflow: hidden;
  background: var(--gradiente-azul); color: #fff;
  border-radius: 26px; padding: 22px 20px; box-shadow: var(--sombra-forte);
}
.hero-simbolo { position: absolute; right: -28px; bottom: -36px; width: 170px; opacity: .18; pointer-events: none; }
.hero .frase { color: #ffc27a; font-weight: 900; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.hero h2 { font-size: 1.45rem; margin-bottom: 8px; max-width: 250px; }
.hero p { opacity: .9; font-size: .92rem; max-width: 260px; margin-bottom: 16px; }
.hero .btn { width: auto; display: inline-flex; padding: 13px 18px; position: relative; }

.atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.atalho {
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border-radius: 20px; padding: 16px; box-shadow: var(--sombra);
  text-decoration: none; color: var(--texto);
}
.atalho i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; font-style: normal; }
.atalho i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.atalho strong { font-size: .95rem; font-weight: 900; line-height: 1.15; }
.atalho small { color: var(--texto-suave); font-weight: 700; font-size: .76rem; }
.cor-azul { background: var(--azul-claro); color: var(--azul); }
.cor-laranja { background: var(--laranja-claro); color: var(--laranja-escuro); }
.cor-verde { background: #e7f7ee; color: var(--verde); }
.cor-roxo { background: #f1ebfb; color: #7c4dcc; }

.trilha { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.trilha::-webkit-scrollbar { display: none; }
.trilha a {
  flex: 0 0 auto; width: 104px; background: #fff; border-radius: 18px; padding: 12px; box-shadow: var(--sombra);
  text-decoration: none; color: var(--texto);
}
.trilha .num { font-size: .68rem; font-weight: 900; color: var(--laranja-escuro); }
.trilha strong { display: block; font-size: .9rem; font-weight: 900; margin: 2px 0 8px; }
.mini-barra { height: 5px; border-radius: 99px; background: var(--borda); overflow: hidden; }
.mini-barra div { height: 100%; background: var(--verde); border-radius: 99px; }

.dica { display: flex; gap: 14px; align-items: flex-start; }
.dica-icone { flex: 0 0 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; background: var(--laranja-claro); }
.dica h3 { font-size: 1rem; }
.dica p { font-size: .88rem; color: var(--texto-suave); margin: 0; }
.depoimento p { font-style: italic; }
.depoimento .autor { display: flex; align-items: center; gap: 10px; }
.depoimento .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--azul-claro); display: grid; place-items: center; font-weight: 900; color: var(--azul); }
.rodape-marca { text-align: center; margin: 26px 0 6px; }
.rodape-marca img { width: 150px; margin: 0 auto 8px; opacity: .9; }
.rodape-marca p { font-size: .74rem; color: var(--texto-suave); font-weight: 700; }
.link-equipe { display: inline-block; margin-top: 14px; font-size: .74rem; font-weight: 800; color: var(--texto-suave); text-decoration: none; padding: 6px 10px; opacity: .8; }

/* ============ quiz (tela cheia) ============ */
.quiz-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.quiz-topo .progresso { flex: 1; margin: 0; }
.quiz-topo span { font-size: .8rem; font-weight: 900; color: var(--texto-suave); }
.progresso { height: 8px; background: var(--borda); border-radius: 999px; overflow: hidden; }
.progresso div { height: 100%; background: var(--gradiente-laranja); border-radius: 999px; transition: width .35s ease; }
.quiz-pergunta { font-size: 1.55rem; margin-bottom: 6px; }
.quiz-apoio { color: var(--texto-suave); font-weight: 600; margin-bottom: 20px; }
.opcoes { display: grid; gap: 10px; }
.opcao {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: #fff; border: 2px solid transparent; border-radius: 18px; padding: 16px;
  font-weight: 800; color: var(--texto); cursor: pointer; box-shadow: var(--sombra);
  transition: border-color .15s, background .15s, transform .1s;
}
.opcao:active { transform: scale(.98); }
.opcao .radio { flex: 0 0 22px; height: 22px; border-radius: 50%; border: 2px solid #c6ced9; display: grid; place-items: center; }
.opcao.marcada { border-color: var(--azul); background: var(--azul-claro); }
.opcao.marcada .radio { border-color: var(--azul); }
.opcao.marcada .radio::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--azul); }

/* ============ resultado ============ */
.resultado-topo { text-align: center; padding: 8px 0 4px; }
.resultado-topo img { width: 74px; margin: 0 auto 10px; }
.resultado-topo h1 { font-size: 1.45rem; }
.resultado-card { background: var(--gradiente-azul); color: #fff; border-radius: 26px; padding: 20px; box-shadow: var(--sombra-forte); margin: 16px 0 14px; }
.resultado-card small { font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #ffc27a; }
.resultado-card h2 { font-size: 1.3rem; margin: 4px 0 6px; }
.resultado-card p { opacity: .9; font-size: .9rem; margin: 0; }
.info-linhas .linha { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.info-linhas .linha:last-child { border-bottom: 0; padding-bottom: 0; }
.info-linhas .linha:first-child { padding-top: 0; }
.info-linhas i { flex: 0 0 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 1.1rem; }
.info-linhas small { display: block; font-size: .72rem; font-weight: 900; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.info-linhas strong { font-weight: 900; }
.info-linhas p { font-size: .85rem; color: var(--texto-suave); margin: 2px 0 0; }
.alerta { display: flex; gap: 10px; background: var(--laranja-claro); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; font-size: .88rem; font-weight: 600; }
.bloqueado { position: relative; overflow: hidden; }
.bloqueado .borrado { filter: blur(5px); user-select: none; pointer-events: none; }
.bloqueado .cadeado { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .35); padding: 16px; }
.bloqueado .cadeado .btn { width: auto; }

/* ============ formulários ============ */
.campo { display: block; margin-bottom: 12px; }
.campo span { display: block; font-size: .8rem; font-weight: 900; color: var(--texto-suave); margin: 0 0 6px 4px; }
input, select {
  display: block; width: 100%; padding: 14px 16px; font: inherit; font-size: 1rem; font-weight: 700;
  border: 2px solid transparent; border-radius: 16px; background: var(--fundo); color: var(--texto);
  -webkit-appearance: none; appearance: none;
}
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23677385' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
input:focus, select:focus { outline: none; border-color: var(--azul); background-color: #fff; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: .84rem; margin-bottom: 12px; cursor: pointer; }
.check input { width: 22px; height: 22px; padding: 0; margin: 0; flex: 0 0 auto; border-radius: 7px; border: 2px solid #c6ced9; background: #fff; display: grid; place-items: center; }
.check input:checked { background: var(--azul); border-color: var(--azul); }
.check input:checked::after { content: "✓"; color: #fff; font-size: .8rem; font-weight: 900; }
.check em { color: var(--texto-suave); font-style: normal; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { border: 0; border-radius: 999px; padding: 9px 14px; font-weight: 800; font-size: .86rem; background: var(--fundo); color: var(--texto); cursor: pointer; }
.chip.ativo { background: var(--azul); color: #fff; }
.rotulo { font-size: .8rem; font-weight: 900; color: var(--texto-suave); margin: 0 0 8px 4px; }
.erro { color: #dc2626; font-weight: 800; font-size: .85rem; }
.mini { font-size: .72rem; color: var(--texto-suave); text-align: center; margin: 6px 0 0; }

/* ============ simulador ============ */
.total-card { background: var(--gradiente-azul); color: #fff; border-radius: 26px; padding: 20px; box-shadow: var(--sombra-forte); margin-bottom: 14px; }
.total-card small { font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.total-card .valor { font-size: 1.35rem; font-weight: 900; margin: 4px 0; }
.total-card .pendente { color: #ffc27a; }
.linha-custo { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borda); font-size: .9rem; font-weight: 700; }
.linha-custo:last-child { border-bottom: 0; }
.linha-custo .pendente { font-size: .8rem; text-align: right; }

.etapa-sim { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px dashed var(--borda); }
.etapa-sim:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.etapa-sim .chips { margin-bottom: 0; }
.etapa-sim .vazio-mini { margin-bottom: 0; }
.etapa-sim.abrindo { animation: abreEtapa .35s ease both; }
@keyframes abreEtapa { from { opacity: 0; transform: translateY(-8px); } }
.etapa-sim.feita .passo-num b { background: #e7f7ee; color: var(--verde); }
.opcional { font-style: normal; font-weight: 700; color: var(--texto-suave); font-size: .8rem; }
.passo-num { display: flex; align-items: center; gap: 8px; color: var(--texto); font-size: .9rem; margin: 4px 0 10px; }
.passo-num b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--laranja-claro); color: var(--laranja-escuro); font-size: .78rem; }
#form-sim .chips-rolagem { margin-left: -18px; margin-right: -18px; padding: 2px 18px 6px; }
#form-sim .chips-rolagem .chip { background: var(--fundo); box-shadow: none; }
#form-sim .chips-rolagem .chip.ativo { background: var(--azul); }
#form-sim .opcao { box-shadow: none; background: var(--fundo); }
#form-sim .opcao.marcada { background: var(--azul-claro); }
.escola-nome { display: block; font-weight: 900; }
.escola-sub { display: block; color: var(--texto-suave); font-weight: 700; font-size: .78rem; }
.vazio-mini { background: var(--fundo); border-radius: 14px; padding: 12px 14px; font-size: .85rem; font-weight: 700; color: var(--texto-suave); margin-bottom: 14px; }

.tag-barato { display: inline-block; margin-left: 4px; font-size: .62rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; background: #e7f7ee; color: var(--verde); padding: 2px 7px; border-radius: 99px; vertical-align: 1px; }
.chip.ativo .tag-barato { background: rgba(255, 255, 255, .22); color: #fff; }

/* ---- segmento antes/vida ---- */
.segmento { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #e4e9f0; border-radius: 16px; padding: 4px; margin-bottom: 16px; }
.segmento button { border: 0; background: none; border-radius: 12px; padding: 10px 6px; font-weight: 900; font-size: .84rem; color: var(--texto-suave); cursor: pointer; }
.segmento button.ativo { background: #fff; color: var(--azul-escuro); box-shadow: 0 2px 8px rgba(27, 61, 102, .12); }

/* ---- vida na Irlanda ---- */
.campo-sufixo { position: relative; display: flex; align-items: center; }
.campo-sufixo input { flex: 1; }
.campo-sufixo > span { position: absolute; right: 16px; font-weight: 800; font-size: .85rem; color: var(--texto-suave); pointer-events: none; }
.campo-sufixo em { position: absolute; left: 14px; font-style: normal; font-weight: 900; color: var(--texto-suave); pointer-events: none; }
.campo-sufixo em + input { padding-left: 32px; }
.grade-custos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campo-custo span { display: block; font-size: .8rem; font-weight: 900; margin: 0 0 5px 2px; }
.campo-custo input { padding: 11px 12px 11px 30px; }
.campo-custo.reserva input { background: var(--laranja-claro); }
.vida-linha { display: flex; justify-content: space-between; padding: 9px 0; font-weight: 700; font-size: .92rem; border-bottom: 1px solid var(--borda); }
.vida-linha.destaque strong { color: var(--azul); font-size: 1.05rem; }
.vida-linha .neg { color: #dc2626; }
.vida-linha .res { color: var(--laranja-escuro); }
.barra-vida { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--borda); margin: 14px 0 8px; }
.b-gasto { background: #ef6b5b; }
.b-reserva { background: var(--laranja); }
.b-sobra { background: var(--verde); }
.legenda-vida { display: flex; gap: 14px; font-size: .74rem; font-weight: 800; color: var(--texto-suave); }
.legenda-vida i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
.vida-sobra { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: #e7f7ee; color: var(--verde); font-weight: 900; }
.vida-sobra strong { font-size: 1.25rem; }
.vida-sobra.negativa { background: #fee2e2; color: #b91c1c; }

/* ============ linha do tempo ============ */
.contagem { display: flex; align-items: center; gap: 16px; }
.contagem .grande { font-size: 2.6rem; font-weight: 900; line-height: 1; color: #fff; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 14px; position: relative; padding-bottom: 18px; }
.timeline li:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; border-left: 2px dashed #f5b565; }
.timeline .marco-icone { flex: 0 0 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--azul-claro); font-size: 1.15rem; }
.timeline li.passado .marco-icone { background: #eef0f3; filter: grayscale(1); }
.timeline li.chegada .marco-icone { background: var(--gradiente-laranja); }
.timeline .data { font-size: .72rem; font-weight: 900; color: var(--laranja-escuro); text-transform: uppercase; letter-spacing: .04em; }
.timeline li.passado .data { color: var(--texto-suave); }
.timeline .titulo { font-weight: 900; }
.timeline .etapa { font-size: .78rem; color: var(--texto-suave); font-weight: 700; }

/* ============ plano / checklist ============ */
.plano-topo { display: flex; align-items: center; gap: 16px; }
.anel { --p: 0; flex: 0 0 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#ffc27a calc(var(--p) * 1%), rgba(255, 255, 255, .2) 0); }
.anel span { width: 66px; height: 66px; border-radius: 50%; background: #1f4a7a; display: grid; place-items: center; font-weight: 900; font-size: 1.1rem; color: #fff; }
.resumo-plano { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.resumo-plano div { background: #fff; border-radius: 16px; padding: 10px 12px; box-shadow: var(--sombra); }
.resumo-plano dt { font-size: .66rem; font-weight: 900; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; }
.resumo-plano dd { margin: 0; font-weight: 900; font-size: .88rem; color: var(--azul-escuro); }
.etapa-bloco h3 { display: flex; align-items: center; gap: 10px; font-size: 1rem; margin-bottom: 4px; }
.etapa-bloco h3 small { margin-left: auto; font-size: .74rem; color: var(--texto-suave); font-weight: 900; background: var(--fundo); padding: 3px 9px; border-radius: 99px; }
.etapa-bloco h3 small.completa { background: #e7f7ee; color: var(--verde); }
.item { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--borda); cursor: pointer; font-weight: 700; font-size: .92rem; }
.item:last-child { border-bottom: 0; padding-bottom: 0; }
.item input { width: 24px; height: 24px; padding: 0; flex: 0 0 auto; border-radius: 8px; border: 2px solid #c6ced9; background: #fff; display: grid; place-items: center; }
.item input:checked { background: var(--verde); border-color: var(--verde); }
.item input:checked::after { content: "✓"; color: #fff; font-weight: 900; font-size: .85rem; }
.item.feito span { text-decoration: line-through; color: var(--texto-suave); }
.temperatura { display: inline-flex; gap: 6px; align-items: center; font-weight: 900; font-size: .8rem; padding: 4px 10px; border-radius: 999px; }
.temperatura.frio { background: #e0f2fe; color: #0369a1; }
.temperatura.morno { background: #fef3c7; color: #b45309; }
.temperatura.quente { background: #fee2e2; color: #b91c1c; }

/* ============ novidades ============ */
.news { padding: 0; overflow: hidden; }
.news summary { list-style: none; cursor: pointer; padding: 16px 18px; }
.news summary::-webkit-details-marker { display: none; }
.news .meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.news .meta time { font-size: .74rem; font-weight: 800; color: var(--texto-suave); }
.news .nova { width: 8px; height: 8px; border-radius: 50%; background: var(--laranja); margin-left: auto; }
.news h3 { font-size: 1rem; margin-bottom: 4px; }
.news .resumo { font-size: .88rem; color: var(--texto-suave); margin: 0; }
.news .corpo { padding: 0 18px 16px; font-size: .92rem; border-top: 1px solid var(--borda); padding-top: 12px; }
.news[open] .resumo { display: none; }

/* ============ escolas QQI ============ */
.qqi-topo { display: flex; gap: 14px; align-items: center; }
.qqi-selo { flex: 0 0 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, .16); display: grid; place-items: center; font-weight: 900; font-size: .95rem; letter-spacing: .04em; color: #fff; }
.busca { position: relative; margin-bottom: 12px; }
.busca input { padding-left: 44px; background: #fff; box-shadow: var(--sombra); }
.busca svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; fill: none; stroke: var(--texto-suave); stroke-width: 2.2; stroke-linecap: round; }
.chips-rolagem { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px; scrollbar-width: none; }
.chips-rolagem::-webkit-scrollbar { display: none; }
.chips-rolagem .chip { flex: 0 0 auto; background: #fff; box-shadow: var(--sombra); }
.chips-rolagem .chip.ativo { background: var(--azul); }
.escola { display: flex; gap: 14px; align-items: center; }
.escola-logo { flex: 0 0 52px; height: 52px; border-radius: 16px; background: var(--azul-claro); display: grid; place-items: center; font-size: 1.4rem; }
.escola h3 { font-size: .98rem; margin-bottom: 2px; }
.escola small { color: var(--texto-suave); font-weight: 700; font-size: .8rem; }
.escola .qqi-tag { display: inline-block; margin-top: 6px; font-size: .66rem; font-weight: 900; letter-spacing: .06em; color: var(--verde); background: #e7f7ee; padding: 3px 8px; border-radius: 99px; }
.vazio { text-align: center; color: var(--texto-suave); font-weight: 700; padding: 24px 0; }
.link-inline { color: var(--azul); font-weight: 800; font-size: .82rem; text-decoration: none; margin-left: 4px; }

/* ============ checklist por marco ============ */
.proxima { display: flex; flex-direction: column; gap: 2px; border-left: 5px solid var(--laranja); }
.proxima small { font-size: .74rem; font-weight: 900; color: var(--laranja-escuro); text-transform: uppercase; letter-spacing: .04em; }
.proxima strong { font-size: 1rem; }
.proxima.ok { border-left-color: var(--verde); }
.marco-cab { display: flex; flex-direction: column; line-height: 1.2; }
.marco-cab em { font-style: normal; font-size: .7rem; font-weight: 900; color: var(--laranja-escuro); text-transform: uppercase; letter-spacing: .04em; }
.etapa-bloco h3 .st { margin-left: auto; flex: 0 0 auto; font-size: .72rem; color: var(--texto-suave); font-weight: 900; background: var(--fundo); padding: 3px 9px; border-radius: 99px; }
.etapa-bloco h3 .st.ok { background: #e7f7ee; color: var(--verde); }
.etapa-bloco h3 .st.atraso { background: #fee2e2; color: #b91c1c; }
.etapa-bloco.atrasado { box-shadow: inset 4px 0 0 #f87171, var(--sombra); }
.dica-tarefa { display: block; margin-top: 3px; font-size: .76rem; font-weight: 600; color: var(--texto-suave); text-decoration: none; }
.item.feito .dica-tarefa { display: none; }
.marco-tarefas { display: inline-block; margin-top: 4px; font-size: .78rem; font-weight: 800; color: var(--azul); text-decoration: none; }
.marco-tarefas.ok { color: var(--verde); }
.timeline li.completo .marco-icone { background: #e7f7ee; }

/* ============ barra "rumo ao sonho" ============ */
.sonho { display: block; background: #fff; border-radius: 22px; padding: 14px 16px 12px; box-shadow: var(--sombra); margin-bottom: 14px; text-decoration: none; color: var(--texto); }
.sonho-topo { display: flex; justify-content: space-between; align-items: baseline; font-weight: 900; }
.sonho-topo span { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--azul); }
.sonho-topo strong { font-size: 1.15rem; color: var(--laranja-escuro); }
.sonho-trilha { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; }
.sonho-ponta { flex: 0 0 auto; font-size: 1.15rem; }
.sonho-pista { position: relative; flex: 1; }
.sonho-linha { height: 8px; border-radius: 99px; background: repeating-linear-gradient(90deg, #d9e2ee 0 8px, transparent 8px 14px); overflow: hidden; }
.sonho-feito { height: 100%; border-radius: 99px; background: var(--gradiente-laranja); transition: width 1s cubic-bezier(.25, .8, .3, 1); }
.sonho-aviao {
  position: absolute; top: 50%; width: 34px; height: auto;
  /* o avião voa sobre a linha (entre as bandeiras), levemente inclinado para cima */
  transform: translate(-50%, -62%) rotate(-6deg);
  transition: left 1s cubic-bezier(.25, .8, .3, 1);
  filter: drop-shadow(0 3px 4px rgba(217, 119, 6, .35));
  pointer-events: none;
}
.sonho small { display: block; font-size: .76rem; font-weight: 700; color: var(--texto-suave); }

/* ============ redes sociais ============ */
.redes-titulo { font-size: .72rem !important; letter-spacing: .1em; text-transform: uppercase; margin: 14px 0 8px !important; }
.redes { display: flex; justify-content: center; gap: 12px; }
.rede { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; border: 0; cursor: pointer; color: #fff; box-shadow: var(--sombra); }
.rede svg { width: 22px; height: 22px; }
.rede.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.rede.tiktok { background: #111; }
.rede.facebook { background: #1877f2; }
.rede.site { background: var(--azul); }
button.rede { opacity: .85; }

/* ============ comunidade + financeiro (home) ============ */
.botoes-home { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.botao-home { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 20px; text-decoration: none; color: #fff; box-shadow: var(--sombra); }
.botao-home i { font-style: normal; font-size: 1.5rem; flex: 0 0 auto; }
.botao-home span { display: flex; flex-direction: column; line-height: 1.15; }
.botao-home strong { font-weight: 900; font-size: .95rem; }
.botao-home small { font-weight: 700; font-size: .74rem; opacity: .9; }
.botao-home.comunidade { background: linear-gradient(150deg, #34d27a 0%, #1ea952 100%); }
.botao-home.financeiro { background: var(--gradiente-laranja); }
.botao-home.adm-gerenciar { background: linear-gradient(150deg, #8b1c2c 0%, #5c0f1b 100%); }
.botoes-home + .equipe-cartao { margin-top: 14px; }

/* ---------- área da equipe ---------- */
.equipe-logo { display: block; width: 150px; margin: 4px auto 14px; }
.equipe-cartao .botao-home { margin: 0 0 12px; }
.equipe-quem { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.equipe-quem > span:first-child { width: 42px; height: 42px; border-radius: 50%; background: var(--azul-claro); display: grid; place-items: center; font-size: 1.3rem; flex: 0 0 auto; }
.equipe-quem > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.equipe-quem small { color: var(--texto-suave); font-weight: 700; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }

/* ---------- ADM · gerenciar escolas ---------- */
.adm-escola.inativa { opacity: .6; }
.adm-escola-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.adm-escola-topo span:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.adm-escola-topo small { color: var(--texto-suave); font-weight: 700; font-size: .8rem; }
.selo.adm-ativa { background: #e7f7ee; color: var(--verde); flex: 0 0 auto; }
.selo.adm-off { background: var(--fundo); color: var(--texto-suave); flex: 0 0 auto; }
.adm-escola-acoes { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.adm-escola-acoes .btn { padding: 11px 14px; font-size: .9rem; }
.adm-curso { border: 2px solid var(--borda); border-radius: 18px; padding: 12px 12px 0; margin-bottom: 12px; }
.adm-curso-topo { display: flex; justify-content: space-between; align-items: center; margin: 0 2px 10px; }
.adm-curso-topo b { font-weight: 900; font-size: .9rem; }
.adm-remover { border: 0; background: var(--fundo); color: var(--texto-suave); width: 32px; height: 32px; border-radius: 50%; font-weight: 900; cursor: pointer; }
.adm-curso .grade-2 .campo select, .adm-curso .grade-2 .campo input { padding: 12px 12px; font-size: .92rem; }
.adm-curso .grade-2 select { padding-right: 32px; background-position: right 10px center; }

/* ============ tela financeiro ============ */
.fin-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; font: inherit; color: var(--texto); cursor: pointer; }
.fin-item > i { flex: 0 0 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-style: normal; font-size: 1.25rem; }
.fin-item > span { flex: 1; display: flex; flex-direction: column; }
.fin-item strong { font-weight: 900; }
.fin-item small { color: var(--texto-suave); font-weight: 700; font-size: .8rem; }
.fin-item > b { font-size: 1.6rem; color: var(--texto-suave); font-weight: 400; }
div.fin-item { cursor: default; }
.fin-check { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.fin-check input { width: 26px; height: 26px; padding: 0; border-radius: 8px; border: 2px solid #c6ced9; background: #fff; display: grid; place-items: center; }
.fin-check input:checked { background: var(--verde); border-color: var(--verde); }
.fin-check input:checked::after { content: "✓"; color: #fff; font-weight: 900; }
.fin-check small { font-size: .68rem; }

/* ============ instalar app ============ */
.instalar { display: flex; align-items: center; gap: 12px; width: 100%; margin: 16px 0 0; border: 2px dashed #f5c38a; background: var(--laranja-claro); text-align: left; cursor: pointer; font: inherit; color: var(--texto); }
.instalar img { width: 46px; height: 46px; border-radius: 12px; box-shadow: var(--sombra); }
.instalar span { flex: 1; display: flex; flex-direction: column; }
.instalar strong { font-weight: 900; }
.instalar small { color: var(--texto-suave); font-weight: 700; font-size: .78rem; }
.instalar b { background: var(--gradiente-laranja); color: #fff; padding: 8px 14px; border-radius: 12px; font-size: .85rem; }
.passos-ios { margin: 0 0 18px; padding-left: 22px; font-weight: 700; }
.passos-ios li { margin-bottom: 10px; }
.ico-ios { display: inline-block; margin-left: 4px; }

/* app instalado: sem moldura, respeita a barra de status do celular */
@media (display-mode: standalone) {
  body { display: block; padding: 0; background: var(--fundo); }
  .lateral { display: none; }
  .aparelho { width: 100%; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
}

/* ============ aviso rápido (toast) ============ */
.toast {
  position: absolute; left: 50%; bottom: 96px; z-index: 60;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: #16212f; color: #fff; font-weight: 800; font-size: .9rem;
  padding: 12px 18px; border-radius: 999px; box-shadow: var(--sombra-forte);
  transition: opacity .25s, transform .25s; white-space: nowrap;
}
.toast.visivel { opacity: 1; transform: translate(-50%, 0); }

/* ============ folha inferior (bottom sheet) ============ */
.folha-fundo { position: absolute; inset: 0; z-index: 50; background: rgba(15, 22, 32, .5); display: flex; align-items: flex-end; animation: aparece .2s ease both; }
.folha-fundo[hidden] { display: none; }
.folha {
  width: 100%; max-height: 92%; overflow-y: auto; background: #fff;
  border-radius: 28px 28px 0 0; padding: 10px 20px calc(18px + env(safe-area-inset-bottom));
  animation: sobeFolha .3s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes sobeFolha { from { transform: translateY(100%); } }
.folha-alca { width: 42px; height: 5px; border-radius: 99px; background: #d6dce4; margin: 0 auto 14px; }
.folha-simbolo { width: 46px; margin: 0 auto 10px; }
.folha h2 { text-align: center; font-size: 1.3rem; }
.folha .sub { text-align: center; color: var(--texto-suave); font-size: .9rem; margin-bottom: 16px; }

/* ============ bloqueio até fazer o quiz ============ */
.cadeado-grande { width: 84px; height: 84px; margin: 6px auto 12px; border-radius: 26px; display: grid; place-items: center; font-size: 2.4rem; background: var(--laranja-claro); box-shadow: var(--sombra); }
.lista-libera { list-style: none; margin: 0; padding: 0; }
.lista-libera li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--borda); font-weight: 800; font-size: .92rem; }
.lista-libera li:last-child { border-bottom: 0; }
.lista-libera span { flex: 0 0 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--azul-claro); }
.liberado { background: #e7f7ee; color: var(--verde); font-weight: 900; font-size: .88rem; border-radius: 14px; padding: 10px 14px; margin-top: 12px; text-align: center; }

/* atalhos e botões trancados na tela inicial (o do quiz continua livre) */
.atalhos.trancado .atalho:not([href="#/quiz"]),
.botao-home.trancado { position: relative; opacity: .55; filter: grayscale(.5); }
.atalhos.trancado .atalho:not([href="#/quiz"])::after,
.botao-home.trancado::after { content: "🔒"; position: absolute; top: 8px; right: 10px; font-size: .9rem; filter: none; }
.atalhos.trancado .atalho[href="#/quiz"] { outline: 2px solid var(--laranja); outline-offset: -2px; }

/* abas trancadas */
.abas a.trancada { position: relative; opacity: .5; }
.abas a.trancada::after { content: "🔒"; position: absolute; top: 2px; right: calc(50% - 20px); font-size: .62rem; }

/* preço do curso escolhido no simulador */
.preco-curso { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--laranja-claro); font-weight: 800; font-size: .88rem; }
.preco-curso strong { font-size: 1.15rem; color: var(--laranja-escuro); white-space: nowrap; }
.linha-custo .escola-sub { display: block; }

.preco-valores { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.preco-valores small { font-size: .78rem; color: var(--texto-suave); font-weight: 800; }
.valor-real { font-size: .95rem; font-weight: 800; color: #ffc27a; white-space: nowrap; }

/* selo do modo ADM no topo */
.selo-adm { margin-left: auto; border: 0; cursor: pointer; font: inherit; font-size: .68rem; font-weight: 900; letter-spacing: .08em; color: #fff; background: #b91c1c; padding: 5px 9px; border-radius: 99px; }
.selo-adm[hidden] { display: none; }
.selo-adm:not([hidden]) + .barra-news { margin-left: 8px; }

/* acomodação estudantil no simulador */
.acomodacao-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--azul-claro); border: 2px solid var(--azul); }
.acomodacao-card strong { font-weight: 900; }
.acomodacao-card small { color: var(--texto-suave); font-weight: 800; }

/* meta sugerida no Plano financeiro */
.meta-sugerida { margin-top: 16px; padding: 14px; border-radius: 16px; background: var(--laranja-claro); }
.meta-sugerida .linha-custo { border-bottom-color: rgba(217, 119, 6, .18); }

/* passagem aérea */
.agencia-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.agencia-topo span:last-child { display: flex; flex-direction: column; }
.agencia-topo strong { font-weight: 900; }
.agencia-topo small { color: var(--texto-suave); font-weight: 700; font-size: .8rem; }
.agencia-logo { flex: 0 0 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--azul-claro); font-size: 1.3rem; }

/* documentos */
.doc-alerta { display: block; margin-top: 4px; font-size: .76rem; font-weight: 800; color: #b45309; background: var(--laranja-claro); padding: 6px 8px; border-radius: 8px; }
.item.feito .doc-alerta { display: none; }

.preco-valores small, .preco-valores strong { white-space: nowrap; }

/* texto ao lado da moldura (computador) */
.lateral .lateral-titulo { font-size: 1.35rem; font-weight: 900; color: var(--azul-escuro); line-height: 1.25; margin-bottom: 8px; }
.lateral .lateral-btn { width: auto; display: inline-flex; margin-top: 10px; }

.qqi-tag.ilep { color: var(--laranja-escuro); background: var(--laranja-claro); }

/* trilha curva do "rumo ao sonho" */
.sonho-trilha { height: 60px; }
.sonho-svg { flex: 1; height: 56px; overflow: visible; }
.sonho-base { fill: none; stroke: #d9e2ee; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 7 7; }
.sonho-feito-curva { fill: none; stroke: url(#grad-sonho); stroke-width: 6; stroke-linecap: round; }
.sonho-aviao-svg { filter: drop-shadow(0 2px 3px rgba(217, 119, 6, .35)); }

.sonho-svg { flex: 1 1 0; width: 0; min-width: 0; }

/* seletor de idioma */
.idiomas { margin-left: auto; display: flex; gap: 2px; background: var(--fundo); border-radius: 99px; padding: 3px; flex: 0 0 auto; }
.idiomas button { border: 0; background: none; cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 4px 5px; border-radius: 99px; opacity: .45; filter: grayscale(.6); }
.idiomas button.ativo { background: #fff; opacity: 1; filter: none; box-shadow: 0 1px 4px rgba(27, 61, 102, .15); }
.idiomas + .barra-news { margin-left: 6px; }
.selo-adm:not([hidden]) + .idiomas { margin-left: 6px; }
/* telas internas: só a bandeira ativa (tocar alterna), para o título caber */
.barra[data-modo="interna"] .idiomas { padding: 2px; }
.barra[data-modo="interna"] .idiomas button:not(.ativo) { display: none; }