/* =========================================================
   bedrock mentoria · visual espacial (azul)
   Carrega depois do home.css. O topo é um céu azul-noite com
   estrelas que se dissolve no creme claro da página. O resto
   segue o tema claro original da landing.
   ========================================================= */
/* paleta: azul-noite #191F3A · azul-gelo #3667AD · azul pálido #FFFFFF · branco #FFFFFF (topo em preto #07070B) */
:root { --bg-rgb: 255 255 255; --fg-rgb: 25 31 58; --bg: #FFFFFF; --fg: #191F3A; }
html { background: #FFFFFF; }
.home {
  --f-disp: 'Poppins', 'Red Hat Text', -apple-system, 'Segoe UI', sans-serif;
  --h-bg: #FFFFFF; --h-card: #FFFFFF; --h-tint: #DCE7F5;
  --h-ink: #191F3A; --h-ink2: #2A3152; --h-text: #3F4660; --h-mute: #5A627A; --h-faint: #646C82;
  --h-line: rgba(25,31,58,.22); --h-line2: rgba(25,31,58,.12); --h-sunk: rgba(231,239,245,.45);
  --h-acc: #3667AD; --h-acc-ink: #3667AD; --h-acc-soft: rgba(54,103,173,.14); --h-acc-line: rgba(54,103,173,.45);
  --h-glow: rgba(54,103,173,.14); --h-glow2: rgba(231,239,245,.5); --h-hl: rgba(54,103,173,.32);
  --h-shadow: 0 24px 60px rgba(25,31,58,.12);
  background: #FFFFFF;
}
.home .inc--free, .home .sec:nth-of-type(even) { --h-card: #FFFFFF; }
.home h1, .home h2, .home h3 { letter-spacing: -.035em; }
.hero h1 { letter-spacing: -.04em; }
.home main h1 + p { margin-top: 16px; }
.ceu { display: none; }

/* tokens escuros só no céu: topo e cabeçalho */
.home .hero, .home .site-header {
  --h-bg: #191F3A; --h-card: rgba(231,239,245,.08); --h-tint: rgba(54,103,173,.1);
  --h-ink: #FFFFFF; --h-ink2: #E2E5EE; --h-text: #C9CEDB; --h-mute: #A9B0C2; --h-faint: #7F88A0;
  --h-line: rgba(231,239,245,.2); --h-line2: rgba(231,239,245,.1); --h-sunk: rgba(231,239,245,.06);
  --h-acc: #3667AD; --h-acc-ink: #A9C2E6; --h-hl: rgba(54,103,173,.55);
  --bg-rgb: 10 20 48; --fg-rgb: 245 244 241; --bg: #0A1430; --fg: #FFFFFF;
  --line-soft: rgba(245,244,241,.12); --text-mute: #A9B0C2;
  color: #FFFFFF;
}

/* o céu: azul-noite com nebulosas, e um fade longo até o creme */
.hero {
  background:
    radial-gradient(ellipse 70% 50% at 85% 55%, rgba(54,103,173,.16), transparent 70%),
    radial-gradient(ellipse 60% 50% at 5% 60%, rgba(231,239,245,.10), transparent 70%),
    linear-gradient(180deg, #07070B 0%, #0B0E1B 18%, #141932 42%, #191F3A 65%, #222B52 100%);
}
.hero canvas { -webkit-mask-image: none; mask-image: none; }
.hero::after {
  content: ''; position: relative; z-index: 1; display: block; height: clamp(220px, 30vh, 340px);
  margin-top: calc(-1 * clamp(90px, 12vh, 150px)); pointer-events: none;
  /* o céu some aos poucos e depois o azul clareia numa curva suave até o azul pálido */
  background: linear-gradient(180deg in oklab, rgb(34 43 82 / 0.000) 0%, rgb(34 43 82 / 0.156) 10%, rgb(34 43 82 / 0.500) 20%, rgb(34 43 82 / 0.844) 30%, rgb(34 43 82 / 1.000) 40%, rgb(43 52 89) 48%, rgb(69 76 109) 55%, rgb(104 110 137) 63%, rgb(145 149 169) 70%, rgb(185 188 200) 78%, rgb(220 222 228) 85%, rgb(246 246 248) 93%, rgb(255 255 255) 100%);
}

/* cabeçalho em vidro azul-noite, legível sobre o céu e sobre o creme */
.home .site-header::before { opacity: 0; }
.home .site-header, .home .site-header.is-stuck {
  background: #07070B; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 0;
  --bg-rgb: 7 7 11; --bg: #07070B; --h-bg: #07070B;
}
.home .site-header.is-stuck { background: rgba(7,7,11,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(231,239,245,.08); }
/* Menu do celular aberto depois de rolar: o desfoque acima prende o
   .nav (que é position: fixed) à altura do cabeçalho, e ele abria
   cortado em ~37px. O styles.css já tira o desfoque nesse caso, mas
   a regra do .is-stuck acima tem mais peso; esta devolve o comportamento. */
body.home.nav-open .site-header.is-stuck { -webkit-backdrop-filter: none; backdrop-filter: none; }
.home main { position: relative; background: linear-gradient(180deg, #07070B 0, #07070B var(--header-h, 72px), #FFFFFF var(--header-h, 72px)); }

/* azul da marca com texto branco: 5,7:1 no botão fixo */
.zap-fixo, .zap-fixo:hover { color: #FFFFFF; }
.zap-fixo svg, .zap-fixo span { color: #FFFFFF !important; }
.zap-fixo:hover { background: #2B5594; }
/* selo "grátis": texto branco sobre o azul da marca, como o botão fixo */
.home .inc .inc-top span.free, .home .free { color: #FFFFFF; }

/* o link "Ver planos e preços" quebrava em duas linhas e encostava no seletor de prova */
.hero .h-link { white-space: nowrap; }
@media (min-width: 560px) { .hero .hero-ctas { flex-wrap: nowrap; width: max-content; max-width: 100%; } }
@media (max-width: 559px) { .hero .hero-ctas { row-gap: 4px; margin-bottom: 8px; } }
/* a faixa "Mentores aprovados em" fica acima do fade, sem ser apagada por ele */
.hero > .w, .hero > .hero-in { position: relative; z-index: 2; }

/* prévia da plataforma no formato atual: faixa do foco no topo e "Travou numa questão?" */
.faixa-foco-mini { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; background: var(--h-card); border: 1px solid var(--h-line2); font-size: 13px; color: var(--h-mute); }
.faixa-foco-mini b { color: var(--h-acc-ink); font-weight: 700; }
.faixa-foco-mini .foco-peca { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--h-acc-soft); color: var(--h-acc-ink); }
.faixa-foco-mini .foco-peca svg { width: 16px; height: 16px; }
.pilha-mini { display: grid; gap: inherit; align-content: start; min-width: 0; }
.tcard-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tcard-link > span { display: flex; flex-direction: column; gap: 2px; }
.tcard-link b { font-family: var(--f-disp); font-size: 14px; color: var(--h-ink); }
.tcard-link span span { font-size: 12px; color: var(--h-mute); }
.tcard-link i { font-style: normal; font-size: 18px; color: var(--h-acc-ink); }
.app-tela[data-pf-tela="0"] .hoje-grade { align-items: stretch; }
.app-tela[data-pf-tela="0"] .hoje-grade > .tcard:first-child { justify-content: flex-start; }

/* marca-texto mais natural: pincelada com bordas irregulares, levemente inclinada,
   que passa um pouco das letras e fica na metade de baixo, como caneta de verdade */
.hero .hl {
  position: relative; z-index: 0; background: none !important; padding: 0 .06em; margin: 0 -.06em;
}
.hero .hl::before {
  content: ''; position: absolute; z-index: -1; left: -.12em; right: -.14em; top: .42em; bottom: .02em;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M6 22 C 40 12, 120 10, 210 11 S 360 9, 394 15 C 398 24, 397 38, 391 47 C 330 52, 230 50, 140 52 S 30 54, 9 49 C 3 40, 2 30, 6 22 Z' fill='%233667AD' fill-opacity='.85'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  transform: rotate(-1.2deg) scaleX(0); transform-origin: left center;
  transition: transform .9s cubic-bezier(.65, 0, .35, 1);
}
.hero .hl + .hl::before, .hero span:nth-child(3) .hl::before { transform: rotate(.8deg) scaleX(0); }
.hero .hl.is-on::before, .no-js .hero .hl::before { transform: rotate(-1.2deg) scaleX(1); }
.hero span:nth-child(3) .hl.is-on::before { transform: rotate(.8deg) scaleX(1); }
@media (prefers-reduced-motion: reduce) { .hero .hl::before { transition: none; } }


/* ---------- camadas da atmosfera ----------
   O fundo desce num fade contínuo, só em azuis, da estratosfera ao céu claro.
   Em cada camada aparece um objeto que se move com a rolagem. */
html, .home { background: #FFFFFF; }
.home .site-footer { background: transparent; }
.home .tcard, .home .inc, .home .pc, .home .opt, .home .sum, .home .mentor { background-color: rgb(255 255 255 / .74); }
.home main > section { position: relative; z-index: 1; }
.atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.atmos > * { position: absolute; }
.atmos svg { display: block; width: 100%; height: auto; shape-rendering: crispEdges; image-rendering: pixelated; }
/* sprites em pixel, parados no lugar, com uma animação pequena em loop */
.atmos .sat { width: 112px; animation: px-flutua 6s steps(6) infinite; }
.atmos .sat .luz { animation: px-pisca 1.6s steps(1) infinite; }
.atmos .balao { width: 36px; animation: px-sobe 7s steps(7) infinite; }
.atmos .aviao { width: 96px; animation: px-flutua 5s steps(5) infinite; }
.atmos .nuvem { width: 150px; opacity: .95; animation: px-deriva 14s steps(14) infinite alternate; }
.atmos .aves { width: 54px; animation: px-flutua 4s steps(4) infinite; }
.atmos .aves .asa2 { animation: px-pisca .8s steps(1) infinite; }
.atmos .aves .asa1 { animation: px-pisca .8s steps(1) infinite reverse; }
@keyframes px-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes px-sobe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes px-deriva { from { transform: translateX(0); } to { transform: translateX(28px); } }
@keyframes px-pisca { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (max-width: 760px) { .atmos .sat, .atmos .aviao { width: 56px; } .atmos .nuvem { width: 100px; } }
@media (prefers-reduced-motion: reduce) { .atmos * { animation: none !important; } }

/* matérias em uma linha só */
.mat3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.mat3 > div { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 16px; background: rgb(255 255 255 / .74); border: 1px solid var(--h-line2); }
.mat3 b { font-family: var(--f-disp); font-size: 22px; letter-spacing: -.03em; color: var(--h-ink); }
.mat3 span { font-size: 14px; line-height: 1.45; color: var(--h-mute); }
@media (max-width: 720px) { .mat3 { grid-template-columns: 1fr; } }

/* plataforma: tudo clicável */
.app-nav [data-pf-nav] { cursor: pointer; }
.app-tela[data-pf-tela="0"] .task { cursor: pointer; transition: background .2s; border-radius: 10px; }
.app-tela[data-pf-tela="0"] .task:hover { background: rgb(25 31 58 / .04); }
.app-tela[data-pf-tela="0"] .task .bx { transition: background .25s, color .25s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.app-tela[data-pf-tela="0"] .task.done .bx { transform: scale(1.06); }
.pf-dica { margin-top: 14px; font-size: 13px; color: var(--h-mute); text-align: center; }

/* chips com duas linhas: a pílula acompanha a altura do texto */
.home .chips li { height: auto !important; min-height: 0; line-height: 1.35; padding-top: 8px; padding-bottom: 8px; white-space: normal; }
/* subtítulo das telas da plataforma não encosta no título */
.app-hello small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-bottom: 2px; line-height: 1.3; }
.app-hello > div { min-width: 0; }

/* montador de plano: rótulo da etapa em largura total, sem encostar nos cartões */
#planos .step-label, #planos [data-plano] legend, #planos .q-label { display: block; width: 100%; white-space: normal; margin-bottom: 12px; }

/* ---------- acessibilidade (impeccable critique/audit, 18 out 2026) ---------- */
/* azul-gelo não serve de texto nem de ícone sobre claro (1,6–1,75:1): usa a tinta do acento */
.home .pc--focus svg, .home .pc--focus .bar em, .home .sem-head span.hoje { color: var(--h-acc-ink); }
.home .sbk.e, .home .card-h .novo { color: #FFFFFF; }
/* rodapé: o texto a 58% da tinta dava 4,1:1 sobre branco */
.home .site-footer { --text-mute: #5A627A; --text-dim: #4B5370; }
/* seletor "Minha prova": o foco do teclado aparece no quadro inteiro */
.exam-pick:focus-within { outline: 2px solid var(--h-acc); outline-offset: 3px; }
.exam-pick select:focus-visible { outline: none; }
/* "Entrar" do celular: área de toque de 44px */
.home .entrar-movel { min-height: 44px; padding: 0 6px; }
@media (max-width: 560px) {
  /* no celular o rótulo some da vista (continua para leitor de tela) e o nome da prova cabe inteiro */
  .exam-pick label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* "O que vem na mentoria": cartões só com título não guardam altura vazia no celular */
.home .inc { min-height: 0; }
/* a prova mais forte, logo abaixo das aprovações */
.approvals .approvals-nota { flex-basis: 100%; margin-top: 6px; font-size: 13px; color: var(--h-text); text-align: center; }