/* /mentoria · ID Cromo. Tokens, topo, pílulas, seções e contato vêm do site.css; aqui fica só o desta página. */

h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* =========================================================
   FUNDO · profundidade atrás da página inteira (pedido do Max, 29/10: "o fundo tá muito chapado")
   Camada fixa em z-index -1: fica acima do fundo do body e abaixo de tudo. Hero, porta e contato têm fundo
   próprio e cobrem a camada; ela aparece da faixa de clientes até as perguntas. Brilho em gradiente (nunca
   filter: blur, que pesa no 1º quadro do celular), linhas no alinhamento da .caixa, uma luz descendo por cada
   linha e o grão do site da Domos (bloco layout-fundo-aura). Só anda com html.anima.
   ========================================================= */
.fundo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fundo-aura { position: absolute; border-radius: 50%; }
.aura-1 {
  width: 76vmax; height: 76vmax; top: -34vmax; right: -30vmax;
  background: radial-gradient(circle, rgba(77, 141, 255, .11) 0%, rgba(77, 141, 255, .035) 38%, rgba(77, 141, 255, 0) 66%);
}
.aura-2 {
  width: 64vmax; height: 64vmax; bottom: -30vmax; left: -28vmax;
  background: radial-gradient(circle, rgba(156, 192, 255, .075) 0%, rgba(156, 192, 255, 0) 64%);
}
html.anima .aura-1 { animation: fundo-a1 40s ease-in-out infinite alternate; }
html.anima .aura-2 { animation: fundo-a2 52s ease-in-out infinite alternate; }
@keyframes fundo-a1 { to { transform: translate3d(-12vmax, 16vmax, 0) scale(1.1); } }
@keyframes fundo-a2 { to { transform: translate3d(14vmax, -12vmax, 0) scale(1.08); } }
.fundo::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
/* as linhas: 1 px de gelo que some em cima e embaixo da tela; --x é a posição dentro da largura do texto */
.fundo-linhas { position: absolute; top: 0; bottom: 0; left: 50%; width: min(100%, var(--caixa)); transform: translateX(-50%); }
.fundo-linhas > span {
  position: absolute; top: 0; bottom: 0; width: 1px;
  left: calc(var(--calha) + (100% - 2 * var(--calha)) * var(--x));
  background: linear-gradient(180deg, rgba(232, 240, 255, 0), rgba(232, 240, 255, .055) 16%, rgba(232, 240, 255, .055) 84%, rgba(232, 240, 255, 0));
}
/* a luz: um fio LED com a ponta clara embaixo (ela desce) e um halo em volta. Atravessa a tela em 58% do
   ciclo e descansa o resto, cada linha num ritmo, pra nunca descerem juntas */
.fundo-linhas > span::after {
  content: ""; position: absolute; top: 0; left: -7px; width: 15px; height: 30vh; opacity: 0;
  background:
    linear-gradient(180deg, rgba(77, 141, 255, 0) 0%, rgba(77, 141, 255, .5) 78%, #CFE0FF 97%, rgba(207, 224, 255, 0) 100%) center / 1px 100% no-repeat,
    radial-gradient(ellipse 50% 46% at 50% 82%, rgba(77, 141, 255, .3), rgba(77, 141, 255, 0) 70%);
}
html.anima .fundo-linhas > span::after { animation: fundo-desce var(--dur, 15s) linear var(--atraso, 0s) infinite; }
@keyframes fundo-desce {
  0% { transform: translate3d(0, -40vh, 0); opacity: 0; }
  6%, 52% { opacity: 1; }
  58%, 100% { transform: translate3d(0, 110vh, 0); opacity: 0; }
}
/* celular: 3 linhas (bordas e meio) e o brilho parado; a luz nas linhas continua (só transform) */
@media (max-width: 640px) { .fundo-linhas .so-largo { display: none; } }
@media (max-width: 760px), (hover: none) { html.anima .fundo-aura { animation: none; } }
@media print { .fundo { display: none; } }

/* =========================================================
   HERO · a armadura da home (site.css + js/hero.js) com o texto da mentoria
   ========================================================= */
/* as fotos daqui têm 785 px a mais de fundo à esquerda (o Max pediu o personagem mais pra direita, longe do texto):
   no desktop, centradas, ele cai em uns 65% da largura; em pé, o foco puxa ele de volta pro meio.
   --hero-foco é lido pelo hero.js (shader) e vale como object-position na reserva, a mesma conta */
.hero-mentoria { --hero-foco: .5; }
.hero-mentoria .hero-reserva { object-position: calc(var(--hero-foco) * 100%) 50%; }
.hero-mentoria .hero-conteudo { bottom: clamp(48px, 10vh, 112px); width: min(600px, 44vw); }
.hero-mentoria .hero-titulo { font-size: clamp(46px, min(5vw, 7.5vh), 80px); } /* 5 linhas em 1440 e 1280: maior que isso encosta no menu */
.hero-pergunta { margin-top: 30px; }
.hero-mentoria .hero-acoes { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-mentoria .hero-acoes .pilula { padding: 0 22px; letter-spacing: .18em; } /* os dois cabem numa linha a partir de 1280 */
.hero-meta { margin-top: 22px; font: 400 10px/1.9 var(--mr-marca); letter-spacing: .24em; text-transform: uppercase; color: var(--mr-cinza); }
.hero-meta > span { display: block; }
.hero-vagas { color: var(--mr-led); text-shadow: 0 0 12px rgba(77, 141, 255, .45); }
/* o canvas pinta cinza até as duas fotos chegarem: fica escondido e aparece no mesmo quadro em que o hero.js tira a reserva */
html.js .hero-mentoria .hero-canvas { opacity: 0; }
html.js .hero-mentoria.pronta .hero-canvas { opacity: 1; }
/* sem preloader aqui: a armadura chega de blur pra nítido em CSS, desde o primeiro quadro (o GSAP piscaria) */
html.anima .hero-mentoria .hero-reserva, html.anima .hero-mentoria .hero-canvas { animation: hero-chega 2.2s var(--mr-entrada) backwards; } /* backwards: no fim o filtro volta a none */
@keyframes hero-chega { from { filter: blur(16px); transform: scale(1.06); } }

/* =========================================================
   POR DENTRO · porta presa à rolagem (bloco anim-porta-cofre, molde anim-cenas-rolagem)
   Sem .cenas-on (sem JS, movimento reduzido, tela baixa, ?static): a agência aberta, empilhada.
   ========================================================= */
.porta { position: relative; --p: 0; --chega: 0; --anel: clamp(150px, 18vw, 280px); }
.porta-palco { position: relative; }
.folha, .fresta, .fresta-brilho, .sala-chip { display: none; }

/* a sala: o que aparece quando a porta abre */
.sala {
  position: relative;
  display: grid; justify-items: center; gap: 32px;
  padding: clamp(96px, 16vh, 180px) var(--calha);
  border-top: 1px solid var(--mr-fio);
  background: radial-gradient(ellipse 55% 50% at 50% 45%, rgba(77, 141, 255, .14), transparent 70%), var(--mr-fundo);
}
.terminal {
  width: min(720px, 100%);
  border: 1px solid var(--mr-vidro-borda); border-radius: 18px;
  background: rgba(11, 11, 18, .86);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(77, 141, 255, .06);
  overflow: hidden;
}
.terminal-topo {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 20px; border-bottom: 1px solid var(--mr-fio);
  font: 400 10px/1 var(--mr-marca); letter-spacing: .3em; text-transform: uppercase; color: var(--mr-cinza);
}
.terminal-linhas { padding: 22px 24px 26px; font: 400 15px/1.8 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.terminal-linhas .cmd { color: var(--mr-gelo-forte); }
.terminal-linhas .cmd:not(:first-child) { margin-top: .5em; }
.terminal-linhas .prompt { color: var(--mr-led); }
.terminal-linhas .out { padding-left: 1.4em; color: var(--mr-cinza); }
.terminal-linhas .ok::before { content: "✓ "; color: var(--mr-led); }
.sala-chip {
  padding: 12px 22px; border-radius: 999px;
  border: 1px solid var(--mr-vidro-borda); background: rgba(24, 24, 31, .72);
  font: 300 17px/1 var(--mr-titulo); color: var(--mr-gelo); white-space: nowrap;
}
.sala-legenda { max-width: 600px; text-align: center; }
.sala-legenda .rotulo { justify-content: center; }
.sala-frase { margin-top: 14px; font: 300 clamp(22px, 2.3vw, 34px)/1.25 var(--mr-titulo); }

/* ---------- cinema: o JS escreve --chega (a porta subindo até o topo) e --p (0 a 1, presa); o CSS move as camadas ----------
   faixas: mostrador gira e trava na chegada · luz vaza 0 a .05 · folhas correm .03 a .43 · terminal .40 a .77 · legenda .80 a .86 */
html.cenas-on .porta {
  height: 240vh;
  --luz: clamp(0, (var(--chega) - .25) / .6, 1);         /* a fresta acende enquanto a porta sobe */
  --vaza: clamp(0, var(--p) / .05, 1);                   /* luz vazando pela fresta */
  --abre: clamp(0, (var(--p) - .03) / .4, 1);            /* folhas correm */
  --abre-s: calc(var(--abre) * var(--abre) * (3 - 2 * var(--abre))); /* com aceleração e freio */
}
html.cenas-on .porta-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
html.cenas-on .folha, html.cenas-on .fresta, html.cenas-on .fresta-brilho { display: block; }

/* folhas: metal escuro escovado, dois frisos finos e o mostrador cortado ao meio na fresta */
.folha {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2;
  overflow: hidden;
  will-change: transform;
}
.folha::before, .folha::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(232, 240, 255, .07); }
.folha::before { top: 16%; }
.folha::after { bottom: 16%; }
.folha-esq {
  left: 0;
  background:
    repeating-linear-gradient(90deg, rgba(232, 240, 255, .022) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(232, 240, 255, .05) 0%, transparent 24%, transparent 76%, rgba(232, 240, 255, .035) 100%),
    linear-gradient(90deg, #07070D 0%, #111119 62%, #0C0C13 100%);
  box-shadow: inset -1px 0 0 rgba(232, 240, 255, .2);
}
.folha-dir {
  right: 0;
  background:
    repeating-linear-gradient(90deg, rgba(232, 240, 255, .022) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(232, 240, 255, .05) 0%, transparent 24%, transparent 76%, rgba(232, 240, 255, .035) 100%),
    linear-gradient(270deg, #07070D 0%, #111119 62%, #0C0C13 100%);
  box-shadow: inset 1px 0 0 rgba(232, 240, 255, .2);
}
html.cenas-on .folha-esq { transform: translateX(calc(var(--abre-s) * -102%)); }
html.cenas-on .folha-dir { transform: translateX(calc(var(--abre-s) * 102%)); }

.fechadura { position: absolute; top: 50%; width: var(--anel); aspect-ratio: 1; }
.folha-esq .fechadura { right: 0; transform: translate(50%, -50%); }
.folha-dir .fechadura { left: 0; transform: translate(-50%, -50%); }
.giro, .giro svg { display: block; width: 100%; height: 100%; }
.giro svg { overflow: visible; }
/* gira enquanto a porta sobe e freia até travar quando ela encosta no topo */
html.cenas-on .giro { transform: rotate(calc((1 - var(--chega)) * (1 - var(--chega)) * 320deg)); }

/* a luz da fresta é um degradê (núcleo + dois halos borrados) */
.porta { --fresta-luz: linear-gradient(180deg, transparent 0%, var(--mr-led) 18%, #9CC0FF 50%, var(--mr-led) 82%, transparent 100%); }
.fresta {
  position: absolute; z-index: 3; top: 0; bottom: 0; left: calc(50% - 1px); width: 2px;
  background: var(--fresta-luz);
  pointer-events: none;
}
.fresta::before, .fresta::after { content: ""; position: absolute; top: 0; bottom: 0; background: var(--fresta-luz); }
.fresta::before { left: -7px; width: 16px; filter: blur(8px); opacity: .85; }
.fresta::after { left: -29px; width: 60px; filter: blur(26px); opacity: .3; }
html.cenas-on .fresta { opacity: clamp(0, 1 - var(--abre) * 4, 1); transform: scaleY(var(--luz)); }
.fresta-brilho {
  position: absolute; z-index: 3; top: 0; bottom: 0; left: 50%; width: 240px; margin-left: -120px;
  background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(77, 141, 255, .3), transparent 70%);
  pointer-events: none;
}
html.cenas-on .fresta-brilho {
  opacity: calc(var(--vaza) * clamp(0, 1 - var(--abre) * 2.5, 1));
  transform: scaleX(calc(1 + var(--vaza) * 1.5));
}

html.cenas-on .sala {
  position: absolute; inset: 0; z-index: 1;
  align-content: center; gap: clamp(20px, 4vh, 36px);
  padding: 84px var(--calha) 40px;
  border-top: 0;
  transform: scale(calc(.9 + .1 * var(--abre-s)));
  opacity: calc(.15 + .85 * var(--abre-s));
}
/* cada linha do terminal aparece numa faixa própria da rolagem */
html.cenas-on .terminal-linhas li {
  --l: clamp(0, (var(--p) - (.40 + var(--i) * .034)) / .03, 1);
  opacity: var(--l);
  transform: translateX(calc((1 - var(--l)) * -10px));
}
html.cenas-on .sala-chip {
  display: block; position: absolute; top: var(--y); left: var(--x);
  --c: clamp(0, (var(--p) - var(--ini)) / .05, 1);
  opacity: var(--c);
  transform: translateY(calc(-50% + (1 - var(--c)) * 16px));
}
html.cenas-on .chip-dir { left: auto; right: var(--x); }
html.cenas-on .sala-legenda {
  --leg: clamp(0, (var(--p) - .80) / .06, 1);
  opacity: var(--leg);
  transform: translateY(calc((1 - var(--leg)) * 14px));
}

/* =========================================================
   PROVA · quem já passou pela Domos, logo depois da porta
   Faixa do bloco comp-marquee-infinito: o CSS anda até -50%, que é uma cópia exata, e o JS só duplica os
   itens. O espaço entre logos é padding do item, não gap: com gap o -50% erra meio vão e a faixa pula a cada
   volta. Sem a cópia (movimento reduzido, ?static, sem JS) os 13 ficam numa grade parada e centralizada.
   ========================================================= */
.clientes { padding: clamp(72px, 12vh, 128px) 0; border-top: 1px solid var(--mr-fio); }
.clientes + .secao { border-top: 1px solid var(--mr-fio); }
.clientes-cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; }
.clientes-numero { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.clientes-numero strong { font: 300 clamp(56px, 7vw, 104px)/.9 var(--mr-titulo); letter-spacing: -.02em; }
.clientes-numero span { max-width: 11em; font: 300 clamp(20px, 2.1vw, 32px)/1.2 var(--mr-titulo); color: var(--mr-gelo); text-wrap: balance; }
.clientes-apoio { max-width: 30ch; color: var(--mr-cinza); text-wrap: balance; }

.clientes-faixa { margin-top: clamp(40px, 7vh, 72px); }
.mq__viewport { width: 100%; overflow: hidden; }
.mq__track { --mq-gap: clamp(48px, 6vw, 88px); display: flex; align-items: center; }
.mq__track li { flex: none; display: flex; align-items: center; height: 88px; padding: 0 calc(var(--mq-gap) / 2); }
/* logo de 2 cores vem em 2 tons de gelo (a principal cheia, a segunda em #808590): por isso a opacidade pode ser alta */
.mq__track img { width: auto; height: var(--h, 32px); max-width: none; opacity: .8; transition: opacity .3s; }
.mq__track li:hover img { opacity: 1; }
.mq__track:not([data-marquee-pronto]) { flex-wrap: wrap; justify-content: center; padding: 0 var(--calha); }
.mq__track[data-marquee-pronto] { width: max-content; animation: mq-anda 56s linear infinite; }
.clientes-faixa:has([data-marquee-pronto]) {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
/* parar pra ler é acessibilidade, não enfeite */
.mq__viewport:hover .mq__track, .mq__viewport:focus-within .mq__track { animation-play-state: paused; }
@keyframes mq-anda { to { transform: translate3d(-50%, 0, 0); } }

/* =========================================================
   01 · PRA QUEM É
   ========================================================= */
.trilhas-grade { margin-top: clamp(48px, 8vh, 88px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.trilha {
  position: relative;
  padding: clamp(28px, 3.4vw, 48px);
  border: 1px solid var(--mr-fio); border-radius: 24px;
  background: linear-gradient(180deg, rgba(232, 240, 255, .035), rgba(232, 240, 255, 0) 60%), var(--mr-superficie);
  transition: border-color .6s, box-shadow .6s;
}
.trilha.escolhida { border-color: rgba(77, 141, 255, .45); box-shadow: 0 0 0 1px rgba(77, 141, 255, .15), 0 24px 70px rgba(77, 141, 255, .08); }
.trilha-tag { display: flex; align-items: center; gap: .9em; font: 400 11px/1.4 var(--mr-marca); letter-spacing: .26em; text-transform: uppercase; color: var(--mr-gelo); }
.trilha h3 { margin-top: 26px; font: 300 clamp(28px, 2.7vw, 42px)/1.1 var(--mr-titulo); }
.trilha-texto { margin-top: 18px; color: var(--mr-cinza); }
.trilha-sai {
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--mr-fio);
  font: 400 10px/1 var(--mr-marca); letter-spacing: .3em; text-transform: uppercase; color: var(--mr-cinza);
}
.trilha-lista { margin-top: 18px; display: grid; gap: 14px; }
.trilha-lista li { position: relative; padding-left: 26px; }
.trilha-lista li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--mr-led); box-shadow: 0 0 8px rgba(77, 141, 255, .5);
}

/* =========================================================
   02 · COMO FUNCIONA
   ========================================================= */
.programa-sub { margin-top: 22px; max-width: 560px; color: var(--mr-cinza); font-size: clamp(17px, 1.4vw, 20px); }
.abas {
  margin-top: 40px; display: inline-flex; gap: 6px; padding: 6px;
  border-radius: 999px; border: 1px solid var(--mr-vidro-borda); background: var(--mr-vidro);
}
.aba {
  min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px;
  background: transparent; color: var(--mr-cinza);
  font: 400 11px/1 var(--mr-marca); letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; transition: background-color .3s, color .3s;
}
.aba:hover { color: var(--mr-gelo); }
.aba[aria-selected="true"] { background: var(--mr-gelo); color: var(--mr-fundo); }
.aba:focus-visible { outline: 2px solid var(--mr-led); outline-offset: 3px; }
html:not(.js) .abas { display: none; }
html.js .programa[data-ativa="negocio"] [data-trilha="prestador"],
html.js .programa[data-ativa="prestador"] [data-trilha="negocio"] { display: none; }
.encontros { margin-top: 28px; }
.item-trilha { display: block; margin-top: 10px; font-style: normal; color: var(--mr-led); }
html.js .item-trilha { display: none; }

/* =========================================================
   03 · INVESTIMENTO
   ========================================================= */
.planos { margin-top: clamp(48px, 8vh, 88px); display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(16px, 2vw, 28px); }
.plano {
  display: flex; flex-direction: column;
  padding: clamp(28px, 3.4vw, 48px);
  border: 1px solid var(--mr-fio); border-radius: 24px;
  background: var(--mr-superficie);
}
.plano-principal {
  border-color: rgba(77, 141, 255, .4);
  background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(77, 141, 255, .12), transparent 60%), var(--mr-superficie);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.plano-tag { font: 400 11px/1.4 var(--mr-marca); letter-spacing: .26em; text-transform: uppercase; color: var(--mr-cinza); }
.plano-valor { margin-top: 22px; font: 300 clamp(56px, 7vw, 104px)/1 var(--mr-titulo); letter-spacing: -.02em; }
.plano:not(.plano-principal) .plano-valor { font-size: clamp(40px, 4.4vw, 64px); color: var(--mr-gelo); }
.plano-valor small { margin-left: .12em; font-size: .4em; letter-spacing: 0; color: var(--mr-cinza); }
.plano-cond { margin-top: 14px; color: var(--mr-cinza); font-size: 15px; }
.plano-lista { flex: 1; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--mr-fio); display: grid; align-content: start; gap: 12px; }
.plano-lista li { position: relative; padding-left: 26px; }
.plano-lista li::before {
  content: ""; position: absolute; left: 2px; top: .8em;
  width: 10px; height: 1px; background: var(--mr-led); box-shadow: 0 0 6px rgba(77, 141, 255, .6);
}
.plano .pilula { margin-top: 32px; align-self: flex-start; }
.fundadoras {
  margin-top: 24px; display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 24px; border: 1px dashed rgba(77, 141, 255, .35); border-radius: 16px;
  color: var(--mr-cinza);
}
.fundadoras .ponto-led { margin-top: .7em; }
.fundadoras strong { color: var(--mr-gelo); font-weight: 500; }

/* =========================================================
   04 · QUEM · 05 · PERGUNTAS · 06 · SUA VEZ
   ========================================================= */
.quem .numeros { margin-top: clamp(64px, 10vh, 112px); }
/* desktop: a foto ocupa a coluna da esquerda inteira; na direita, o título em cima e o texto embaixo */
.quem-grade { grid-template-areas: "foto cabeca" "foto texto"; grid-template-rows: auto 1fr; row-gap: clamp(28px, 4vh, 44px); }
.quem-cabeca { grid-area: cabeca; }
.quem-texto { grid-area: texto; }
.quem-foto { grid-area: foto; margin: 0; }
.quem-foto img { display: block; width: 100%; height: auto; border: 1px solid var(--mr-fio); border-radius: 24px; }
html.js .entra-foto { opacity: 0; }
.numeros-3 { grid-template-columns: repeat(3, 1fr); }

.caixa-estreita { max-width: 980px; }
.faq { margin-top: clamp(40px, 6vh, 64px); border-top: 1px solid var(--mr-fio); }
.faq__item { border-bottom: 1px solid var(--mr-fio); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 0; cursor: pointer; list-style: none;
  font: 300 clamp(20px, 2vw, 28px)/1.25 var(--mr-titulo); color: var(--mr-gelo);
  transition: color .3s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--mr-gelo-forte); }
.faq__item summary:focus-visible { outline: 2px solid var(--mr-led); outline-offset: 4px; border-radius: 4px; }
.faq__icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--mr-led); transition: transform .35s var(--mr-entrada); }
.faq__icon::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.faq__icon::after { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.faq__item[open] .faq__icon::after { transform: translateX(-50%) scaleY(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--mr-entrada); }
.faq__a > p { overflow: hidden; min-height: 0; padding-bottom: 26px; color: var(--mr-cinza); max-width: 62ch; }
.faq__item[open] .faq__a { grid-template-rows: 1fr; }
/* Resposta escrita como no Claude (FAQ do site da Domos): "Pensando…" e o texto entrando. O texto inteiro já
   ocupa o lugar, transparente, e o JS passa letra a letra do .faq__falta pro .faq__dito: nada cresce enquanto escreve */
.faq__status {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font: 400 10px/1.6 var(--mr-marca); letter-spacing: .24em; text-transform: uppercase; color: var(--mr-cinza);
}
.faq__faisca { display: inline-block; font-size: 13px; letter-spacing: 0; color: var(--mr-led); text-shadow: 0 0 10px rgba(77, 141, 255, .6); }
.faq__item.pensando .faq__faisca { animation: faq-gira 1.6s linear infinite; }
@keyframes faq-gira { to { transform: rotate(360deg); } }
.faq__falta { color: transparent; }
/* o cursor tem largura líquida zero (margem negativa): andar com ele não muda a quebra das linhas */
.faq__item[open] .faq__dito::after {
  content: ""; display: inline-block; width: 2px; height: 1.05em; margin-right: -2px; vertical-align: -.18em;
  background: var(--mr-led); box-shadow: 0 0 8px rgba(77, 141, 255, .7);
  animation: faq-pisca 1.05s step-end infinite;
}
@keyframes faq-pisca { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* com mouse, a pergunta fechada ganha o cursor piscando no fim, como um prompt; aberta, quem pisca é o da resposta */
@media (hover: hover) {
  .faq__item summary::after { content: ""; order: 1; flex-shrink: 0; width: 2px; height: 1em; margin: 0 auto 0 -14px; background: var(--mr-led); opacity: 0; }
  .faq__icon { order: 2; }
  .faq__item:not([open]) summary:hover::after { animation: faq-pisca 1.05s step-end infinite; }
}

.contato-frase { margin-top: 22px; max-width: 460px; color: var(--mr-cinza); }

/* =========================================================
   TELAS MENORES
   ========================================================= */
@media (max-width: 1199px) {
  html.cenas-on .sala-chip { display: none; }
}
@media (min-width: 641px) and (max-height: 860px) {
  .hero-pergunta { display: none; } /* notebook e tablet deitado de 700 a 860 de altura: o texto cabe abaixo do menu */
}
@media (max-width: 1100px) {
  .porta { --anel: clamp(116px, 26vw, 200px); }
  .hero-mentoria .hero-conteudo { right: var(--calha); width: auto; bottom: calc(48px + env(safe-area-inset-bottom)); }
  .hero-mentoria .hero-titulo { max-width: 9.5em; } /* tablet deitado: o rosto fica no meio da tela e o título à esquerda dele */
  .hero-mentoria .hero-veu { background: linear-gradient(0deg, rgba(2, 2, 9, .95) 0%, rgba(2, 2, 9, .72) 38%, rgba(2, 2, 9, 0) 62%); }
  .hero-mentoria .hero-role { display: none; } /* o texto ocupa a largura toda e a dica bateria na última linha */
}
@media (max-width: 1100px) and (orientation: portrait) {
  .hero-mentoria { --hero-foco: .645; }
  .hero-mentoria .hero-titulo { max-width: none; font-size: clamp(46px, min(6vw, 9vh), 92px); } /* em pé o rosto fica acima do texto: largura toda, a 1ª frase numa linha */
  .hero-pergunta { display: none; } /* tablet em pé: sem ela o texto começa abaixo do queixo */
}
@media (min-width: 641px) and (max-height: 640px) {
  .hero-mentoria .hero-sub, .hero-pergunta { display: none; } /* celular deitado (o hero fica com 560 de altura) e janela baixa: o texto não caberia */
}
@media (max-width: 900px) {
  .trilhas-grade, .planos { grid-template-columns: 1fr; }
  .numeros-3 { grid-template-columns: 1fr; }
  .numeros-3 .numero, .numeros-3 .numero + .numero { padding: 28px 0 0; border-left: 0; }
  .numeros-3 .numero:nth-child(n+2) { margin-top: 28px; border-top: 1px solid var(--mr-fio); }
  .quem-grade { grid-template-areas: "cabeca" "foto" "texto"; grid-template-rows: none; }
}
@media (max-width: 640px) {
  .porta { --anel: 128px; }
  .topo .pilula { padding: 0 14px; font-size: 10px; letter-spacing: .14em; } /* "Quero uma vaga" cabe ao lado do logo em 360 */
  /* no celular o texto inteiro cobriria o rosto: ficam rótulo, título, os 2 botões e as vagas; a porta logo abaixo conta o resto */
  .hero-mentoria .hero-titulo { margin: 12px 0; font-size: clamp(32px, 9vw, 42px); } /* 4 linhas: com 5 o texto sobe até o queixo */
  .hero-mentoria .hero-sub, .hero-pergunta, .hero-mentoria .hero-formato { display: none; }
  .hero-mentoria .hero-acoes { margin-top: 22px; gap: 8px; }
  .hero-mentoria .hero-acoes .pilula { flex: 1 1 100%; min-height: 44px; }
  .hero-mentoria .hero-veu { background: linear-gradient(0deg, rgba(2, 2, 9, .95) 0%, rgba(2, 2, 9, .7) 34%, rgba(2, 2, 9, 0) 56%); }
  html.cenas-on .sala { padding: 72px var(--calha) 28px; }
  .terminal-topo { padding: 13px 16px; }
  .terminal-linhas { padding: 18px 16px 20px; font-size: 12px; }
  .abas { display: flex; }
  .aba { flex: 1; padding: 0 10px; font-size: 10px; letter-spacing: .12em; }
  .plano .pilula { align-self: stretch; }
  .fundadoras { padding: 18px; }
  .contato-acoes .pilula { flex: 1 1 100%; }
  .mq__track { --mq-gap: 40px; }
  .mq__track li { height: 72px; }
  .mq__track img { height: calc(var(--h, 32px) * .8); }
}
@media (max-width: 640px) and (max-height: 760px) {
  .hero-mentoria .hero-conteudo { bottom: calc(36px + env(safe-area-inset-bottom)); }
  .hero-mentoria .hero-titulo { font-size: clamp(30px, 8.4vw, 36px); }
  .hero-mentoria .hero-acoes { margin-top: 16px; }
  .hero-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__a { transition: none; }
  .faq__item.pensando .faq__faisca, .faq__item[open] .faq__dito::after, .faq__item:not([open]) summary:hover::after { animation: none; }
}