/* =========================================================
   bedrock mentoria · landing "a sua semana, tela a tela"
   Carrega depois de home.css e espacial-azul.css. O mundo é o
   mesmo (céu azul-noite que vira branco, azul-gelo); aqui fica a
   estrutura: herói, ponte, cena da plataforma presa à tela,
   mentores, quadro checkmate clicável, matérias e planos.
   ========================================================= */

/* ---------- superfícies do navegador, no tom da página ---------- */
.home ::selection { background: #3667AD; color: #FFFFFF; }
.home { caret-color: #3667AD; scrollbar-color: #9AA3B5 transparent; }
.home a { text-underline-offset: .2em; }
.home :focus-visible { outline: 2px solid #3667AD; outline-offset: 3px; border-radius: 8px; }
.home .hero :focus-visible, .home .site-header :focus-visible { outline-color: #A9C2E6; }
.seta { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.14em; }
.price strong, .sum, .lst-n, .sem-head, .task time { font-variant-numeric: tabular-nums; }

/* ---------- espaço: mais acima do título do que abaixo ---------- */
.home .sec > .w { padding-top: clamp(88px, 11vw, 144px); padding-bottom: clamp(64px, 8vw, 104px); }
.equipe-topo, .metodo-topo, .planos-topo, .cena-topo {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px 56px; align-items: end; margin-bottom: clamp(36px, 5vw, 56px);
}
.equipe-topo .lead, .metodo-topo .lead, .planos-topo .lead, .cena-topo .lead { max-width: 52ch; }
.lead a { text-decoration: underline; color: var(--h-ink); }
@media (max-width: 899px) { .equipe-topo, .metodo-topo, .planos-topo, .cena-topo { grid-template-columns: 1fr; } }

/* ---------- herói: à esquerda, como uma página que começa ---------- */
.home .hero-in { max-width: var(--wrap-h); align-items: flex-start; text-align: left; gap: 26px; padding-left: 24px; padding-right: 24px; }
.home .hero h1 { font-size: clamp(44px, min(7vw, 11vh), 96px); letter-spacing: -.04em; line-height: .98; max-width: 11ch; }
.home .hero p { max-width: 46ch; }
.home .hero-ctas { justify-content: flex-start; }
.home .exam-pick { margin-top: -4px; }
.home .approvals { justify-content: flex-start; }
.home .approvals .approvals-nota { text-align: left; }
.aprov-rot { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--h-mute); }
.rolar { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -12px 0 24px; font-size: 14px; font-weight: 600; color: var(--h-text); text-decoration: none; }
.rolar .seta { transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .rolar:hover .seta { transform: translateY(3px); } }

/* ---------- marca-texto traçado à mão ----------
   O home.js põe um traço SVG atrás da palavra e o desenha da esquerda
   para a direita, como uma caneta: largura irregular, leve inclinação e
   uma segunda passada mais fina. Sem JS, o traço já aparece inteiro. */
.home .hl { position: relative; z-index: 0; background: none !important; padding: 0 .04em; margin: 0 -.04em; white-space: nowrap; }
.home .hero .hl::before { display: none; }
.hl .traco { position: absolute; z-index: -1; left: -.1em; bottom: .22em; height: .74em; width: calc(100% + .2em); overflow: visible; pointer-events: none; color: var(--h-hl);
  clip-path: inset(-20% 100% -20% 0); transition: clip-path .62s cubic-bezier(.45, .05, .3, 1); }
.hl.is-on .traco, .no-js .hl .traco { clip-path: inset(-20% -4% -20% 0); }
.hl .traco .m1 { fill: currentColor; fill-opacity: var(--h-op, .5); }
.hl .traco .m2 { fill: var(--h-hl2, currentColor); fill-opacity: var(--h-op2, calc(var(--h-op, .5) * .45)); }
.hl .traco .m3, .hl .traco .m4 { fill: none; stroke: currentColor; stroke-opacity: .22; stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.home .hero .hl { --h-hl: rgba(54,103,173, .5); }
.home main .sec .hl { --h-hl: #3667AD; --h-op: .7; }
@media (prefers-reduced-motion: reduce) { .hl .traco { transition: none; } }

/* ---------- ponte: a dor vira a promessa da cena seguinte ---------- */
.ponte-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: start; }
.ponte-in .h2 { grid-row: span 2; max-width: 14ch; }
.dores { list-style: none; margin: 0; padding: 0; }
.dores li { padding: 20px 0; border-top: 1px solid var(--h-line2); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: var(--h-ink2); }
.dores li:last-child { border-bottom: 1px solid var(--h-line2); }
.ponte-fim { font-family: var(--f-disp); font-weight: 700; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.3; letter-spacing: -.02em; color: var(--h-ink); max-width: 30ch; text-wrap: pretty; }
@media (max-width: 899px) { .ponte-in { grid-template-columns: 1fr; } .ponte-in .h2 { grid-row: auto; } }

/* ---------- a cena: passos à esquerda, a plataforma presa à direita ---------- */
.cena-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.cena-passos { list-style: none; margin: 0; padding: 0; }
.cena-passo { min-height: 54vh; padding: 11vh 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; transition: color .3s var(--ease-out); }
.cena-passo:first-child { padding-top: 4vh; min-height: 56vh; }
.cena-passo:not(.is-on) h3 { color: var(--h-mute); }
.cena-passo:not(.is-on) svg.peca { color: #9AA3B5; }
.cena-passo h3 { font-family: var(--f-disp); font-weight: 800; font-size: clamp(26px, 2.5vw, 34px); line-height: 1.08; letter-spacing: -.035em; color: var(--h-ink); text-wrap: balance; }
.cena-passo .dia { color: var(--h-acc-ink); }
.cena-passo p { font-size: 17px; line-height: 1.6; color: var(--h-text); max-width: 42ch; }
.cena-passo .quem { align-self: flex-start; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; line-height: 1.4; color: var(--h-text); background: rgba(54,103,173, .2); border-radius: 12px; padding: 8px 12px; }
.cena-passo .quem b { color: #2B5594; font-weight: 700; }
.cena-passo .quem .dia { font-weight: 700; color: var(--h-ink); }
.cena-passo .quem .av { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.cena-palco { position: sticky; top: calc(var(--header-h, 74px) + 28px); }
.cena-palco .app { box-shadow: 0 30px 70px -20px rgba(25, 31, 58, .28), 0 2px 6px rgba(25, 31, 58, .06); }
/* as peças já contam a sequência; a fileira de abas repetia o menu da janela */
.cena-palco .pf-steps { display: none; }
.cena-palco .pf-step { padding: 14px 0 6px; min-height: 44px; }
.cena-palco .pf-step b { font-size: 15px; }
.cena-palco .pf-step .prog i { transition: transform .3s var(--ease-out); }
.home .cena-fim { margin-top: clamp(40px, 6vw, 72px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; font-family: var(--f-disp); font-weight: 700; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.02em; color: var(--h-ink); }
.home .cena-fim .h-link--under { font-family: var(--f-ui); font-size: 15px; display: inline-flex; gap: 8px; align-items: center; }
/* celular e tablet: a plataforma vem primeiro, com as abas; os passos contam o resto */
@media (max-width: 959px) {
  .cena-grade { grid-template-columns: 1fr; gap: 28px; }
  /* o método e a plataforma continuam uma sequência só: a janela fica presa no
     alto e cada peça que passa por baixo troca a tela */
  .cena-palco { position: sticky; top: calc(var(--header-h, 66px) + 6px); z-index: 2; order: -1; background: #FFFFFF; padding: 6px 0 10px; margin: 0 -24px; padding-left: 24px; padding-right: 24px; box-shadow: 0 14px 18px -16px rgba(25, 31, 58, .25); }
  /* a janela fica maior e recortada; a tela rola sozinha até o que a peça marca */
  .cena-palco .app { zoom: .8; }
  .cena-palco .app-body { min-height: 0; }
  .cena-palco .app-telas { max-height: 44svh; overflow: hidden; }
  /* no celular o plano da semana mostra o nome de cada bloco */
  .cena-palco .sbk b { font-size: 10px; }
  .pular-cena { display: inline-flex; }
  .cena-passo, .cena-passo:first-child { min-height: 40svh; padding: 22px 0; border-top: 1px solid var(--h-line2); justify-content: flex-start; }
}

/* ---------- mentores ---------- */
@media (max-width: 599px) { .home .mentors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } .home .mentor > div { font-size: 13px; } }

/* ---------- matérias: três linhas de texto, não três cartões ---------- */
.materias { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px 64px; align-items: start; }
.mat-lista { margin: 0; }
.mat-lista > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 24px; padding: 20px 0; border-top: 1px solid var(--h-line2); }
.mat-lista > div:last-child { border-bottom: 1px solid var(--h-line2); }
.mat-lista dt { font-family: var(--f-disp); font-weight: 800; font-size: 22px; letter-spacing: -.03em; color: var(--h-ink); }
.mat-lista dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--h-text); }
@media (max-width: 899px) { .materias { grid-template-columns: 1fr; } }
@media (max-width: 479px) { .mat-lista > div { grid-template-columns: 1fr; } }

/* ---------- planos e final ---------- */
.home .h-link { display: inline-flex; align-items: center; gap: 8px; }
.final ol li b { font-variant-numeric: tabular-nums; }

/* alvos de toque de 44px no seletor de prova e nos links soltos */
.home .exam-pick select { min-height: 44px; }
.home .exam-pick a { height: 44px; }
.home .h-link--under { min-height: 44px; }

/* ---------- herói em duas colunas: a promessa à esquerda, a prova ao lado ---------- */
.home .hero h1 { max-width: none; }
.home .hero h1 > span { white-space: nowrap; }
@media (max-width: 479px) { .home .hero h1 { font-size: clamp(34px, 10vw, 44px); } }
@media (min-width: 1100px) {
  .home .hero-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); column-gap: 64px; row-gap: 26px; align-items: start; }
  .home .hero-in > :not(.hero-prova) { grid-column: 1; }
  .home .hero-prova { grid-column: 2; grid-row: 2 / span 3; align-self: start; }
}
.hero-prova { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: 20px; background: rgba(231, 239, 245, .06); border: 1px solid rgba(231, 239, 245, .14); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .5); }
.hp-rostos { display: flex; }
.hp-rostos picture { display: contents; }
.hp-rostos img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid #1B2242; filter: grayscale(1); }
.hp-rostos img + img, .hp-rostos picture + picture img { margin-left: -14px; }
.hp-quem { font-size: 16px; line-height: 1.5; color: var(--h-text); }
.hp-quem b { color: var(--h-ink); }
.hero-prova .approvals { padding: 14px 0 0; border-top: 1px solid rgba(231, 239, 245, .14); justify-content: flex-start; gap: 6px 16px; }
.hero-prova .approvals b { font-size: 15px; }
.hero-prova .approvals-nota { font-size: 14px; line-height: 1.5; color: var(--h-ink); text-align: left; margin: 0; }
.home .rolar { margin-top: 8px; }
/* parágrafos curtos sem palavra sozinha na última linha */
.home p { text-wrap: pretty; }
/* fechamento centrado também nos botões (a regra do herói alinha à esquerda) */
.home .final .hero-ctas { justify-content: center; }
/* celular: o herói fica com a linha de prova (.hero-selo); o cartão completo
   repetia os mesmos rostos e a mesma frase de Química. "Preços" já está na barra de baixo. */
@media (max-width: 699px) { .home .hero-prova { display: none; } .home .hero .hero-ctas .h-link { display: none; } }
/* celular pequeno: a janela da plataforma ocupa menos altura e sobra espaço para o texto de cada peça */
@media (max-width: 480px) { .cena-palco .app-telas { max-height: 28svh; } }
/* área de toque do link do WhatsApp nas perguntas */
.home .faq > .stack a { padding: 12px 2px; }

/* ---------- a cena cabe na tela: mais largura e a janela um pouco menor ---------- */
@media (min-width: 960px) {
  .cena-grade { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; }
  .cena-palco .app { zoom: .86; }
}
@media (min-width: 960px) and (max-height: 800px) { .cena-palco .app { zoom: .74; } .cena-palco { top: calc(var(--header-h, 74px) + 16px); } }

/* ---------- cada passo da cena é uma peça do checkmate ---------- */
.cena-passo h3 { display: flex; flex-direction: column; gap: 6px; }
.cena-passo h3 svg.peca { width: 40px; height: 40px; color: var(--h-ink); fill: currentColor; margin-bottom: 6px; }
.cena-passo.is-on h3 svg.peca { color: var(--h-acc-ink); }
.home .pill { color: #3667AD; border-color: rgba(54,103,173, .35); background: #FFFFFF; }
@media (max-width: 959px) { .cena-passo h3 svg.peca { width: 32px; height: 32px; } }

/* ---------- o que cada peça governa dentro da janela ---------- */
[data-alvo] { position: relative; }
.app .sbk[data-alvo] { position: absolute; }

/* ---------- marca-texto no céu: mancha azul-gelo translúcida, o branco continua legível ---------- */
/* no céu escuro a tinta é uma cor sólida do azul da marca: transparência sobre o preto vira cinza */
.home .hero .hl { --h-hl: #3667AD; --h-op: 1; --h-hl2: #2B558F; --h-op2: 1; }

/* ---------- janela: selo de demonstração e ícones ---------- */
.app-bar .demo { margin-left: 10px; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #FFFFFF; background: #3667AD; border-radius: 999px; padding: 3px 9px; }
.bx svg { width: 12px; height: 12px; display: block; }
.tcard-link i svg { width: 18px; height: 18px; }

/* ---------- pessoas em destaque ---------- */
.home .mentor-n b { color: var(--h-ink); }

/* ---------- o fim espelha o começo: a página fecha no céu noturno ---------- */
.home .final { background: radial-gradient(ellipse 60% 70% at 50% 110%, rgba(54,103,173, .18), transparent 70%), linear-gradient(180deg, #191F3A 0%, #0B0E1C 100%); border-top: 0;
  --h-ink: #FFFFFF; --h-ink2: #E2E5EE; --h-text: #C9CEDB; --h-mute: #A9B0C2; --h-line: rgba(231, 239, 245, .2); --h-card: rgba(231, 239, 245, .08); --h-bg: #191F3A; color: #FFFFFF; }
.home .final .h-btn--dark { background: #FFFFFF; color: #191F3A !important; }
.home .final .h-link { color: #FFFFFF; }
.home .final :focus-visible { outline-color: #A9C2E6; }
/* blocos do calendário cortam o que passa da borda: o marcado deixa o traço sair */
.app .sbk.is-marcado { overflow: visible; z-index: 4; }
.app .sem-col:has(.is-marcado) { overflow: visible; z-index: 4; }
.app .sem-grade:has(.is-marcado) { overflow: visible; }


/* hover do botão fixo: sombra com deslocamento, não brilho em volta */
.home .zap-fixo:hover { box-shadow: 0 10px 24px rgba(25, 31, 58, .2); }

/* o rei fecha a semana: as seis notas aparecem e a mais fraca vira o foco */
.notas-mini { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.notas-mini span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: #F2F5F9; color: #3F4660; font-size: 12px; font-weight: 600; }
.notas-mini .peca { width: 13px; height: 13px; fill: currentColor; }
.notas-mini b { color: #191F3A; }
.faixa-foco-mini { transition: background-color .3s cubic-bezier(.23,1,.32,1), color .3s cubic-bezier(.23,1,.32,1); }
.cena.is-rei .faixa-foco-mini { background: #191F3A; color: #FFFFFF; }
.cena.is-rei .faixa-foco-mini b { color: #A9C2E6; }
.cena.is-rei .notas-mini .fraca { background: #191F3A; color: #FFFFFF; }
.cena.is-rei .notas-mini .fraca b { color: #A9C2E6; }

/* ---------- cabeçalho e rodapé na mesma grade das seções ---------- */
.home .site-header .container, .home .site-footer .container { max-width: var(--wrap-h); padding-inline: 24px; }
/* a primeira seção nasce do céu: sem o filete, que parecia uma emenda */
.home #problema { border-top: 0; }
@media (min-width: 960px) { .home .header-inner { gap: 0; } .home .header-inner > .nav { margin-left: auto; } }

/* atalho para quem não quer percorrer a demonstração no celular */
.pular-cena { display: none; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--h-acc-ink); }
/* a regra base acima esconde o atalho; no celular e no tablet ele aparece */
@media (max-width: 959px) { .pular-cena { display: inline-flex; } }
#preco { scroll-margin-top: calc(var(--header-h, 74px) + 24px); }

/* celular: a prova social cabe numa linha logo abaixo do texto do topo (o cartão completo vem depois) */
.hero-selo { display: none; }
@media (max-width: 1099px) {
  .home .hero-selo { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .78); }
  .hero-selo b { color: #FFFFFF; font-weight: 700; }
  .hs-rostos { display: flex; flex: none; }
  .hs-rostos img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; filter: grayscale(1); border: 2px solid #12172E; margin-left: -8px; }
  .hs-rostos img:first-child { margin-left: 0; }
}

/* tela de dúvidas: a foto do caderno do aluno e a da resolução, desenhadas */
.duv-foto--papel { padding: 0; overflow: hidden; background: #FBF8F1; transform: rotate(-.8deg); box-shadow: 0 6px 14px -8px rgba(25, 31, 58, .35); }
.duv-foto--papel svg { display: block; width: 100%; height: 100%; }
.duv-foto--papel .mao { font-family: var(--f-ui); font-style: italic; font-weight: 600; font-size: 10.5px; letter-spacing: -.01em; }
/* fotos dos mentores em 4:5: nos rostos redondos, o recorte fica no rosto */
.hp-rostos img, .hs-rostos img { object-fit: cover; object-position: 50% 12%; }
/* a resposta do mentor sai na ficha de gabarito da bedrock (papel claro, número em Poppins, erro esperado em azul) */
/* aluno e mentor mandam a questão no modelo da lista da bedrock: papel areia, número em Poppins, letras das alternativas */
.duv-foto--lista { height: auto; padding: 0; overflow: hidden; background: #F5F4F1; border-color: #E2DFDA; transform: rotate(-.5deg); box-shadow: 0 6px 14px -8px rgba(25, 31, 58, .3); }
.duv-r .duv-foto--lista { transform: rotate(.4deg); }
.duv-foto--lista svg { display: block; width: 100%; height: auto; }
.duv-foto--lista .f-num { font-family: var(--f-disp); font-weight: 800; font-size: 19px; letter-spacing: -.04em; fill: #0E0E0D; }
.duv-foto--lista .f-meta, .duv-foto--lista .f-rot { font-family: var(--f-ui); font-weight: 600; font-size: 6.4px; letter-spacing: .14em; fill: #6E6A64; }
.duv-foto--lista .f-resp { font-family: var(--f-ui); font-weight: 600; font-size: 6px; letter-spacing: .12em; fill: #3667AD; }
.duv-foto--lista .f-resp-v { font-family: var(--f-disp); font-weight: 700; font-size: 9px; fill: #F5F4F1; text-anchor: middle; }
.duv-foto--lista .f-mat { font-family: 'Times New Roman', Georgia, serif; font-style: italic; font-size: 10.5px; fill: #0E0E0D; }
.duv-foto--lista .f-erro { font-family: var(--f-ui); font-size: 8px; fill: #4E4B47; }

.duv-foto--lista .l-topo { font-family: var(--f-ui); font-weight: 600; font-size: 6px; letter-spacing: .14em; fill: #6E6A64; }
.duv-foto--lista .l-enun { font-family: var(--f-ui); font-size: 7.6px; fill: #4E4B47; }
.duv-foto--lista .l-letra { font-family: var(--f-disp); font-weight: 700; font-size: 7.4px; fill: #0E0E0D; }
.duv-foto--lista .l-alt { font-family: var(--f-ui); font-size: 7.6px; fill: #4E4B47; }
.duv-foto--lista .l-alt-off { font-family: var(--f-ui); font-size: 6.8px; fill: #A19C94; }
.duv-foto--lista .l-alt-off .l-letra { fill: #A19C94; font-size: 6.8px; }
.duv-foto--lista .l-alt-ok { font-family: var(--f-ui); font-weight: 700; font-size: 8px; fill: #0E0E0D; }
.duv-foto--lista .l-alt-ok .l-letra { font-size: 8px; }
.duv-foto--lista .l-mao { font-family: 'Segoe Print', 'Bradley Hand', cursive; font-style: italic; font-size: 9px; fill: #2B3A67; }
.duv-foto--lista .l-de { font-family: var(--f-disp); font-weight: 700; font-size: 7px; fill: #0E0E0D; }