/* ========================================================================= EVOLUTION MENTORES: CSS próprio da landing /plataforma/planos/mentores/ Complementa /style.css (tokens, cabeçalho, rodapé, botões, container) e /plataforma/planos/assets/planos.css (seções, hero, painéis, tabelas). NÃO redefine token de marca: só acrescenta o que é desta página. Tudo escopado em `.men`, a classe do . Sem isso, nome parecido com o de outra página derrubaria o layout dela em silêncio, que é um defeito que já aconteceu neste projeto. TODA GRADE AQUI NASCE COM `minmax(0, ...)`. Trilha com `1fr` puro tem mínimo `auto`, e item de grade nasce com `min-width: auto`: juntos, recusam encolher abaixo do conteúdo e estouram a página inteira. Foi exatamente assim que estas páginas ficaram 399px de largura numa tela de 390px. ========================================================================= */ .men { --men-borda: rgba(255, 255, 255, 0.10); --men-borda-ouro: rgba(var(--primary-gold-rgb), 0.32); --men-fundo: #101010; --men-fundo-2: #151515; --men-raio: 14px; --men-raio-g: 22px; --men-elev: 0 24px 60px rgba(0, 0, 0, 0.45); --men-ease: cubic-bezier(0.16, 1, 0.3, 1); --men-ok: #65c995; --men-atencao: #e4b65c; --men-info: #7fb4ec; } /* ------------------------------------------------------- pular para o conteúdo --- */ /* `fixed` e não `absolute`: dentro do fluxo ele empurrava o hero ao receber foco. A transição é declarada aqui para não herdar a de 0.4s do site, que fazia o link aparecer devagar demais para quem navega por teclado. */ .men-pular { position: fixed; left: 1rem; top: -4rem; z-index: 2000; background: var(--primary-gold); color: #000; padding: 0.7rem 1.1rem; border-radius: 0 0 10px 10px; font-weight: 600; transition: top 0.15s ease; } .men-pular:focus { top: 0; } /* ------------------------------------------------------------------- cabeçalhos --- */ .men-cabeca { margin-bottom: 2.2rem; max-width: 62ch; } .men-cabeca .pl-lead { margin-bottom: 0; } .men-cabeca--centro { margin-left: auto; margin-right: auto; text-align: center; } .men-mini-titulo { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 0.6rem; } .men-nota { font-size: 0.85rem; color: var(--text-muted); line-height: 1.65; border-left: 2px solid var(--men-borda-ouro); padding-left: 0.9rem; margin: 1.1rem 0 0; } /* Parágrafo corrido dentro de painel. Um degrau ACIMA da `.men-nota`: a nota é ressalva, este é o conteúdo. Iguais na cor, a leitura perderia a hierarquia. */ .men-texto { font-size: 0.93rem; color: var(--text-main); line-height: 1.7; margin: 0; } /* ------------------------------------------------------------------------ hero --- */ .men-hero-texto { min-width: 0; } /* O H1 tem TRÊS linhas deliberadas: duas frases fixas e o trecho que alterna. Cada uma é um bloco, e a largura máxima precisa caber a maior delas ("Sua metodologia continua sua.", 29 caracteres). Com os 18ch de antes, as frases quebravam no meio. NÃO uso `white-space: nowrap` aqui, que seria o atalho: texto que se recusa a quebrar estoura a página na horizontal, e foi esse tipo de defeito que levou estas páginas a medir 399px numa tela de 390 e 330px numa de 320. Em telas estreitas a quebra natural volta, e isso é o comportamento certo. */ /* ── A ESPECIFICIDADE, QUE FOI O VERDADEIRO MOTIVO ────────────────────────────────────── O tamanho vem de `.pl-hero h1` no `planos.css`, que vale 0,1,1 (classe + elemento). Uma regra `.men-h1` sozinha vale 0,1,0 e PERDE, não importa a ordem de carregamento. Por isso a primeira tentativa de reduzir a fonte não mudou nada: o valor computado seguiu em 49,6px (`3.1rem × 16`), idêntico ao de antes da edição. Foi o mesmo motivo pelo qual mexer no `max-width` em `ch` nunca teve efeito: a caixa é a coluna do hero (571px), e eu editava uma regra que não governa este título. `.men .pl-hero h1` vale 0,2,1 e vence de forma limpa, só nesta página. NÃO uso `!important`: ele apagaria a regra compartilhada para sempre e esconderia a próxima colisão em vez de resolvê-la. O TAMANHO SAI DA MEDIÇÃO: a maior frase ("Sua metodologia continua sua.") PEDE 665px numa caixa de 571px. 571/665 = 0,858, então o teto de 49,6px precisa cair para ~42px. 2.4rem dá ~41px e deixa cerca de 20px de folga, em vez de raspar no limite e voltar a quebrar num acento ou numa largura intermediária. */ .men .pl-hero h1.men-h1, .men .pl-hero .men-h1-din { font-size: clamp(1.9rem, 4.3vw, 2.4rem); line-height: 1.16; } /* O rotativo saiu de dentro do H1: o que era bloco irmão DENTRO do título virou parágrafo irmão DO título. A margem de baixo agora tem que ficar SÓ no parágrafo, senão aparece entre a primeira e a segunda linha um vão que antes não existia. O seletor precisa ser `.pl-hero h1.men-h1` (0,2,1): a regra compartilhada `.pl-hero h1` vale 0,1,1 e venceria `.men-h1` sozinha (0,1,0), em silêncio. Foi exatamente assim que o `margin: 0 0 1rem` daqui nunca valeu: o espaçamento real sempre foi o 1.1rem do compartilhado, que é o mesmo que o parágrafo herda agora. Por isso nada muda em tela. */ .pl-hero h1.men-h1 { margin-bottom: 0; } .men-h1 { margin: 0; max-width: 32ch; } /* ── UMA FRASE POR LINHA ──────────────────────────────────────────────────────────────── Solto num paragrafo unico, o navegador quebrava o titulo onde coubesse: "Compreenda melhor. Conduza / com direcao. Demonstre / evolucao." As tres frases saiam picadas no meio, e nenhuma delas se lia como promessa. `display: block` faz a linha terminar onde a FRASE termina. Nao e `white-space: nowrap`: numa largura muito estreita a frase ainda precisa poder quebrar dentro de si mesma, e proibir isso empurraria o texto para fora da tela em vez de arrumar a leitura. */ .men-h1-linha { display: block; } .men-h1-din { max-width: 32ch; } /* A frase inteira existe uma vez para o leitor de tela; o trecho que alterna é visual e fica `aria-hidden`, para não ser reanunciado a cada troca. */ .men-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .men-h1-fixo { display: block; color: var(--text-main); } /* As frases ficam EMPILHADAS na mesma célula de grade: a altura é a da maior, e a troca não empurra nada. Reservar altura é o que evita o salto de layout. */ .men-rot { display: grid; } .men-rot-item { grid-area: 1 / 1; color: var(--primary-gold); opacity: 0; transition: opacity 0.42s var(--men-ease); } .men-rot-item.is-ativo { opacity: 1; } /* Sem JavaScript nenhuma classe é aplicada: a primeira frase aparece e as outras não ocupam espaço visual. */ html:not(.men-js) .men-rot-item:first-child { opacity: 1; } .men-provas { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; list-style: none; padding: 0; margin: 1.4rem 0 0; font-size: 0.86rem; color: var(--text-muted); } .men-provas li { display: inline-flex; align-items: center; gap: 0.45rem; } .men-provas i { color: var(--primary-gold); } .men-micro { font-size: 0.88rem; color: var(--text-muted); margin: 1rem 0 0; line-height: 1.65; } .men-micro a { color: var(--primary-gold); text-decoration: underline; text-underline-offset: 2px; } /* ------------------------------------------------------ cockpit da operação --- */ .men-cockpit { min-width: 0; } .men-cockpit-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--men-borda); background: rgba(0, 0, 0, 0.25); } .men-cockpit-titulo { font-family: 'Outfit', sans-serif; font-size: 0.95rem; color: var(--text-main); } .men-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; padding: 0.25rem 0.6rem; border: 1px solid var(--men-borda-ouro); border-radius: 999px; color: var(--primary-gold); background: rgba(var(--primary-gold-rgb), 0.07); } .men-cockpit-corpo { padding: 1.1rem; display: grid; gap: 1.1rem; } /* No máximo quatro métricas na primeira dobra: painel com tudo vira tela ilegível. */ .men-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: 0.6rem; } .men-kpi { border: 1px solid var(--men-borda); border-radius: var(--men-raio); padding: 0.7rem 0.8rem; background: rgba(255, 255, 255, 0.02); min-width: 0; } .men-kpi b { display: block; font-family: 'Outfit', sans-serif; font-size: 1.45rem; color: var(--primary-gold); line-height: 1.15; font-variant-numeric: tabular-nums; } .men-kpi span { font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; display: block; } .men-agenda { display: grid; gap: 0.5rem; min-width: 0; } .men-agenda-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; font-size: 0.84rem; padding: 0.5rem 0.65rem; border: 1px solid var(--men-borda); border-radius: 10px; min-width: 0; } .men-agenda-quando { color: var(--primary-gold); font-variant-numeric: tabular-nums; white-space: nowrap; } .men-agenda-quem { color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .men-agenda-tipo { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; } /* ----------------------------------------------------------------- contraste --- */ /* Antes e depois lado a lado. Duas colunas que encolhem de verdade. */ .men-contraste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; align-items: start; } .men-contraste-col { border: 1px solid var(--men-borda); border-radius: var(--men-raio-g); padding: 1.3rem 1.2rem; background: var(--men-fundo); min-width: 0; } .men-contraste-col--depois { border-color: var(--men-borda-ouro); background: var(--men-fundo-2); } .men-contraste-col h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 0.9rem; } .men-contraste-col--depois h3 { color: var(--primary-gold); } .men-contraste-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; } .men-contraste-col li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.55rem; align-items: start; font-size: 0.92rem; line-height: 1.55; color: var(--text-muted); } .men-contraste-col--depois li { color: var(--text-main); } .men-contraste-col i { margin-top: 0.22rem; font-size: 0.85rem; } .men-contraste-col--antes i { color: var(--text-muted); } .men-contraste-col--depois i { color: var(--men-ok); } /* -------------------------------------------------------------------- jornada --- */ .men-etapas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; counter-reset: etapa; } .men-etapa { counter-increment: etapa; border: 1px solid var(--men-borda); border-radius: var(--men-raio-g); padding: 1.3rem 1.2rem 1.2rem; background: var(--men-fundo); position: relative; min-width: 0; } .men-etapa::before { content: counter(etapa); display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--men-borda-ouro); color: var(--primary-gold); font-family: 'Outfit', sans-serif; font-size: 0.9rem; margin-bottom: 0.8rem; } .men-etapa h3 { font-size: 1.02rem; margin: 0 0 0.4rem; color: var(--text-main); } .men-etapa p { margin: 0; font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; } /* ----------------------------------------------------------------------- abas --- */ .men-tablist { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem; } .men-tab { appearance: none; border: 1px solid var(--men-borda); background: rgba(0, 0, 0, 0.25); color: var(--text-muted); border-radius: 999px; padding: 0.55rem 1.1rem; font: 500 0.88rem 'Inter', sans-serif; cursor: pointer; min-height: 44px; transition: border-color 0.18s ease, color 0.18s ease; } .men-tab:hover { border-color: var(--primary-gold); color: var(--text-main); } .men-tab:focus-visible { outline: 2px solid var(--primary-gold); outline-offset: 2px; } /* Cor E peso: só a cor deixaria de fora quem não as separa bem (WCAG 1.4.1). */ .men-tab[aria-selected="true"] { background: rgba(var(--primary-gold-rgb), 0.16); border-color: var(--primary-gold); color: var(--primary-gold); font-weight: 700; } .men-painel { min-width: 0; } .men-painel[hidden] { display: none; } .men-painel-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; } .men-painel-cabeca h3 { font-size: 1.05rem; margin: 0; color: var(--text-main); } .men-painel-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.4rem; align-items: start; } /* ---------------------------------------------------------------- linha do tempo --- */ .men-linha { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; } .men-linha-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; padding-bottom: 1.1rem; position: relative; min-width: 0; } .men-linha-item::before { content: ""; grid-column: 1; width: 11px; height: 11px; border-radius: 50%; background: var(--men-fundo-2); border: 2px solid var(--men-borda-ouro); margin-top: 0.3rem; } .men-linha-item.is-feito::before { background: var(--primary-gold); border-color: var(--primary-gold); } /* A linha que liga os pontos não desce do último: ela apontaria para o nada. */ .men-linha-item:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 1.15rem; bottom: 0; width: 1px; background: var(--men-borda); } /* Os dois filhos na coluna 2. Sem isto o `` do status transborda para uma linha nova e cai na coluna do marcador, que existe só para a bolinha. Aqui a coluna 1 é `auto`, então o sintoma era outro: em vez de espremer o texto, ela CRESCIA até caber o status e empurrava o nome para longe do marcador. Mesma causa, aparência diferente. Achado na página Individual, onde a coluna estava fixa em 11px e o texto quebrava uma palavra por linha. */ .men-linha-item b { grid-column: 2; display: block; font-size: 0.93rem; color: var(--text-main); font-weight: 600; } .men-linha-item span { grid-column: 2; display: block; font-size: 0.84rem; color: var(--text-muted); line-height: 1.55; } /* ------------------------------------------------------------- multiempresa --- */ .men-empresas-barra { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.1rem; } .men-empresa-btn { appearance: none; border: 1px solid var(--men-borda); background: rgba(0, 0, 0, 0.25); color: var(--text-muted); border-radius: 999px; padding: 0.5rem 1rem; font: 500 0.86rem 'Inter', sans-serif; cursor: pointer; min-height: 44px; transition: border-color 0.18s ease, color 0.18s ease; } .men-empresa-btn:hover { border-color: var(--primary-gold); color: var(--text-main); } .men-empresa-btn:focus-visible { outline: 2px solid var(--primary-gold); outline-offset: 2px; } .men-empresa-btn.is-ativo, .men-empresa-btn[aria-pressed="true"] { background: rgba(var(--primary-gold-rgb), 0.16); border-color: var(--primary-gold); color: var(--primary-gold); font-weight: 700; } .men-cliente[hidden] { display: none; } /* Sem JavaScript todos aparecem em sequência, cada um com o próprio título: é honesto e continua legível. Com JS, um por vez, como o texto promete. */ html:not(.men-js) .men-empresas-barra { display: none; } .men-capacidade { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; font-size: 0.85rem; color: var(--text-muted); margin-top: 0.9rem; } .men-barra { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); overflow: hidden; } .men-barra i { display: block; height: 100%; border-radius: 4px; background: var(--primary-gold); width: 0; transition: width 0.7s var(--men-ease); } .is-desenhado .men-barra i { width: var(--preenche, 0%); } /* Sem JS e sem animação, a barra precisa mostrar o valor mesmo assim. */ html:not(.men-js) .men-barra i { width: var(--preenche, 0%); transition: none; } /* -------------------------------------------------------------------- pilares --- */ .men-pilares { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; } .men-pilar { border: 1px solid var(--men-borda); border-radius: var(--men-raio-g); padding: 1.3rem 1.2rem; background: var(--men-fundo); min-width: 0; } .men-pilar h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary-gold); margin: 0 0 0.8rem; } .men-pilar ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; } .men-pilar li { font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; padding-left: 1.1rem; position: relative; } .men-pilar li::before { content: ""; position: absolute; left: 0; top: 0.55rem; width: 5px; height: 5px; border-radius: 50%; background: var(--men-borda-ouro); } /* --------------------------------------------------------------------- planos --- */ .men-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.1rem; align-items: stretch; } .men-plano { display: flex; flex-direction: column; border: 1px solid var(--men-borda); border-radius: var(--men-raio-g); padding: 1.6rem 1.4rem; background: var(--men-fundo); min-width: 0; } /* O plano do meio ganha destaque visual por ser o intermediário, e não porque seja "o mais vendido": não existe dado de venda para sustentar essa frase. */ .men-plano--destaque { border-color: var(--primary-gold); box-shadow: 0 16px 48px rgba(var(--primary-gold-rgb), 0.14); } .men-plano-nome { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--primary-gold); font-weight: 700; } .men-plano-contexto { font-size: 0.86rem; color: var(--text-muted); margin: 0.5rem 0 1rem; line-height: 1.5; min-height: 2.6em; } .men-plano-preco { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 2.1rem; color: var(--text-main); line-height: 1.05; font-variant-numeric: tabular-nums; } .men-plano-unidade { display: block; font-size: 0.78rem; color: var(--text-muted); font-weight: 500; margin-bottom: 0.2rem; } .men-plano-capacidade { list-style: none; padding: 0; margin: 1.2rem 0 1.5rem; display: grid; gap: 0.55rem; } .men-plano-capacidade li { font-size: 0.9rem; color: var(--text-muted); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; align-items: start; line-height: 1.5; } .men-plano-capacidade i { color: var(--primary-gold); font-size: 0.8rem; margin-top: 0.28rem; } .men-plano-capacidade b { color: var(--text-main); } .men-plano .btn { margin-top: auto; width: 100%; justify-content: center; } /* ---------------------------------------------------------------- comparador --- */ .men-compara { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .men-compara caption { caption-side: bottom; margin-top: 0.7rem; font-size: 0.8rem; color: var(--text-muted); text-align: left; } .men-compara th, .men-compara td { padding: 0.6rem 0.6rem; text-align: right; } .men-compara th[scope="row"] { text-align: left; font-weight: 500; color: var(--text-muted); } .men-compara thead th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary-gold); border-bottom: 1px solid var(--men-borda); } .men-compara tbody tr + tr { border-top: 1px solid rgba(255, 255, 255, 0.05); } .men-compara td { color: var(--text-main); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------- garantia --- */ /* `auto minmax(0, 1fr)`, e não `auto 1fr`: com o selo de largura fixa ao lado, a trilha do texto precisa poder encolher abaixo do conteúdo dela no celular. */ .men-garantia { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; align-items: center; border: 1px solid var(--men-borda-ouro); border-radius: var(--men-raio-g); padding: 1.4rem 1.3rem; background: var(--men-fundo); margin-top: 2rem; } .men-garantia-selo { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 74px; height: 74px; flex: none; border-radius: 50%; border: 2px solid var(--primary-gold); color: var(--primary-gold); line-height: 1.05; } .men-garantia-selo strong { font-family: 'Outfit', sans-serif; font-size: 1.7rem; } .men-garantia-selo span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; } .men-garantia h3 { font-size: 1.1rem; margin: 0 0 0.45rem; color: var(--text-main); } .men-garantia p { margin: 0; font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; } @media (max-width: 520px) { /* Empilhado, o selo ao lado espremeria o texto numa coluna de poucas palavras. */ .men-garantia { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 0.9rem; } } /* ------------------------------------------------------------------------ FAQ --- */ /* Classe própria, e não `.pl-faq`: assim o planos.js não mede a mesma abertura uma segunda vez, já que este arquivo já mede. */ .men-faq { display: grid; gap: 0.6rem; max-width: 60rem; } .men-faq details { border: 1px solid var(--men-borda); border-radius: var(--men-raio); background: var(--men-fundo); overflow: hidden; } .men-faq summary { cursor: pointer; padding: 1rem 1.2rem; font-size: 0.97rem; color: var(--text-main); display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; list-style: none; } .men-faq summary::-webkit-details-marker { display: none; } .men-faq summary::after { content: "+"; color: var(--primary-gold); font-size: 1.3rem; line-height: 1; flex: none; } .men-faq details[open] summary::after { content: "\2212"; } .men-faq summary:focus-visible { outline: 2px solid var(--primary-gold); outline-offset: -2px; } .men-faq-corpo { padding: 0 1.2rem 1.1rem; color: var(--text-muted); line-height: 1.7; font-size: 0.93rem; } .men-faq-corpo p { margin: 0 0 0.7rem; } .men-faq-corpo p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------- CTA fixo móvel --- */ .men-fixo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px)); background: rgba(10, 10, 10, 0.96); border-top: 1px solid var(--men-borda-ouro); backdrop-filter: blur(8px); } .men-fixo[hidden] { display: none; } .men-fixo-texto { flex: 1 1 auto; min-width: 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.35; } .men-fixo-texto b { display: block; color: var(--text-main); font-size: 0.9rem; } .men-fixo .btn { flex: none; min-height: 44px; display: inline-flex; align-items: center; } /* A barra cobriria o fim da página: o corpo ganha folga equivalente enquanto ela existe. */ body.men-fixo-on { padding-bottom: 4.6rem; } /* ------------------------------------------------------------------- revelação --- */ .men-revelar { opacity: 0; transform: translateY(14px); transition: opacity 0.55s var(--men-ease), transform 0.55s var(--men-ease); } .men-revelar.is-visivel { opacity: 1; transform: none; } /* Sem JavaScript o IntersectionObserver nunca roda: o conteúdo precisa nascer visível, senão a página fica em branco para quem tem script bloqueado. */ html:not(.men-js) .men-revelar { opacity: 1; transform: none; } /* ----------------------------------------------------------------- responsivo --- */ @media (max-width: 1024px) { .men-h1 { max-width: 22ch; } .men-cabeca { margin-bottom: 1.8rem; } } @media (max-width: 600px) { .men-h1 { font-size: clamp(1.75rem, 7.4vw, 2.1rem); } .men-cockpit-corpo { padding: 0.9rem; } .men-plano { padding: 1.3rem 1.1rem; } .men-plano-contexto { min-height: 0; } /* Tabela estreita rola dentro do próprio quadro, nunca a página. */ .men-compara { font-size: 0.82rem; } .men-compara th, .men-compara td { padding: 0.5rem 0.4rem; } } /* Alvos de toque (WCAG 2.2, 2.5.8). A regra é por TIPO DE PONTEIRO: no mouse a diferença não aparece, e forçar 44px no desktop engorda a interface à toa. */ @media (pointer: coarse) { .men-tab, .men-empresa-btn { min-height: 44px; } .men-faq summary { min-height: 52px; } .men-provas li { min-height: 32px; } } @media (prefers-reduced-motion: reduce) { .men-rot-item, .men-revelar, .men-barra i, .men-tab, .men-empresa-btn { transition: none; } .men-revelar { opacity: 1; transform: none; } .men-barra i { width: var(--preenche, 0%); } } /* A página impressa é branca: barra fixa, abas e decoração não fazem sentido nela. */ @media print { .men-pular, .men-fixo, .men-tablist, .men-empresas-barra { display: none !important; } .men-painel[hidden], .men-cliente[hidden] { display: block !important; } .men-revelar { opacity: 1 !important; transform: none !important; } } /* ========================================================================= SITE DE VENDAS — MENTORES E CONSULTORES (prompt de 18/09/2026) ========================================================================= */ /* ---- §13: barra de prova, logo abaixo do hero ------------------------- */ .men-prova-barra { border-block: 1px solid var(--pl-border); } .men-prova-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem 1.6rem; list-style: none; margin: 0; padding: 0; } .men-prova-lista li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; } .men-prova-lista i { color: var(--primary-gold); flex: 0 0 auto; width: 1.1rem; text-align: center; } /* ---- §15: o framework em quatro etapas -------------------------------- */ .men-framework { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; list-style: none; margin: 2rem 0 0; padding: 0; position: relative; } /* A LINHA DOURADA LIGA AS QUATRO. Ela é decorativa e some no celular, onde as etapas empilham e a ordem já é dada pela leitura de cima para baixo. */ .men-framework::before { content: ''; position: absolute; top: 1.15rem; left: 12.5%; right: 12.5%; height: 1px; background: linear-gradient(90deg, transparent, var(--pl-border-gold), var(--primary-gold), var(--pl-border-gold), transparent); } .men-fw-etapa { position: relative; padding: 0 .2rem; background: transparent; } .men-fw-num { display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid var(--pl-border-gold); background: var(--pl-surface); color: var(--primary-gold); font-size: .82rem; font-weight: 700; letter-spacing: .04em; position: relative; z-index: 1; } .men-fw-etapa h3 { margin: .8rem 0 .5rem; font-size: 1.02rem; letter-spacing: .01em; } .men-fw-etapa ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; } .men-fw-etapa ul li { font-size: .88rem; color: var(--text-secondary, #b9b9b9); } @media (max-width: 900px) { /* §15: no celular vira timeline vertical. Quatro colunas de 90px não se leem. */ .men-framework { grid-template-columns: 1fr; gap: 1.4rem; padding-left: 1.6rem; } .men-framework::before { top: .4rem; bottom: .4rem; left: .75rem; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, transparent, var(--primary-gold), transparent); } .men-fw-etapa { padding-left: 0; } .men-fw-num { position: absolute; left: -1.6rem; top: 0; width: 1.5rem; height: 1.5rem; font-size: .68rem; } .men-fw-etapa h3 { margin-top: 0; } } /* ---- §16: os dois caminhos -------------------------------------------- */ .men-caminhos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 2rem; } .men-caminho { display: block; padding: 1.6rem; border-radius: var(--pl-radius); border: 1px solid var(--pl-border); background: var(--pl-surface); text-decoration: none; color: inherit; transition: border-color .18s ease, transform .18s ease; } .men-caminho:hover { border-color: var(--primary-gold); transform: translateY(-2px); } .men-caminho:focus-visible { outline: 2px solid var(--primary-gold); outline-offset: 3px; } .men-caminho h3 { margin: 0 0 .5rem; font-size: 1.18rem; } .men-caminho p { margin: 0 0 1rem; color: var(--text-secondary, #b9b9b9); } .men-caminho-cta { color: var(--primary-gold); font-weight: 600; font-size: .92rem; } @media (max-width: 720px) { .men-caminhos { grid-template-columns: 1fr; } .men-caminho { padding: 1.2rem; } } @media (prefers-reduced-motion: reduce) { .men-caminho { transition: none; } .men-caminho:hover { transform: none; } } /* ---- §22 a §26: o bloco claro, onde a página muda de assunto ---------- MEDIDO, e não escolhido no olho, como manda o resto desta folha: texto #1a1a1a sobre #f4f2ee = 15,57:1 secundário #4a4a4a sobre #f4f2ee = 7,93:1 dourado #d4af37 sobre #f4f2ee = 1,88:1 ← REPROVADO, não usar dourado #7a5f12 sobre #f4f2ee = 5,41:1 ← é este que entra no claro borda #a8801a sobre #f4f2ee = 3,26:1 (1.4.11 pede 3:1 para componente) O dourado da marca simplesmente não funciona como TEXTO sobre claro. Ele fica na borda e no traço, onde 3:1 basta, e o texto usa a versão escurecida. */ .men-claro { --men-claro-bg: #f4f2ee; --men-claro-texto: #1a1a1a; --men-claro-apoio: #4a4a4a; --men-claro-ouro: #7a5f12; --men-claro-borda: #a8801a; background: var(--men-claro-bg); color: var(--men-claro-texto); } .men-claro .pl-h2, .men-claro h3 { color: var(--men-claro-texto); } .men-claro .pl-sub, .men-claro p { color: var(--men-claro-apoio); } .men-claro .pl-eyebrow { color: var(--men-claro-ouro); } .men-destaque-claro { margin: 1.8rem 0 0; padding: .9rem 1.1rem; border-left: 3px solid var(--men-claro-borda); background: rgba(122, 95, 18, 0.06); border-radius: 0 10px 10px 0; font-weight: 600; color: var(--men-claro-texto) !important; } /* §23: o diagrama do Raio-X. É uma lista de verdade, e não um desenho: leitor de tela anuncia os dez itens, e no celular ela continua sendo uma lista. */ .men-raiox { margin-top: 2rem; } .men-raiox-centro { display: inline-block; margin: 0 0 1.1rem; padding: .5rem 1.4rem; border: 1px solid var(--men-claro-borda); border-radius: 999px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; color: var(--men-claro-texto) !important; background: rgba(122, 95, 18, 0.07); } .men-raiox-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; list-style: none; margin: 0; padding: 0; } .men-raiox-lista li { padding: .65rem .85rem; border-radius: 10px; border: 1px solid rgba(26, 26, 26, 0.14); background: rgba(255, 255, 255, 0.55); font-size: .9rem; color: var(--men-claro-texto); } /* §24: as seis etapas do Raio-X */ .men-etapas-claro { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.2rem; list-style: none; margin: 2rem 0 0; padding: 0; } .men-etapas-claro > li { padding: 1.2rem; border-radius: var(--pl-radius); border: 1px solid rgba(26, 26, 26, 0.12); background: rgba(255, 255, 255, 0.6); } .men-etapa-num { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--men-claro-ouro); } .men-etapas-claro h3 { margin: .3rem 0 .15rem; font-size: 1.05rem; } .men-etapa-lead { font-weight: 600; color: var(--men-claro-texto) !important; margin: 0 0 .4rem; } .men-etapas-claro p { margin: 0; font-size: .89rem; } /* §25: os quatro cards de clareza */ .men-cards-claro { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-top: 2rem; } .men-cards-claro article { padding: 1.1rem; border-radius: var(--pl-radius); border: 1px solid rgba(26, 26, 26, 0.12); background: rgba(255, 255, 255, 0.6); } .men-cards-claro h3 { margin: 0 0 .3rem; font-size: 1rem; } .men-cards-claro p { margin: 0; font-size: .88rem; } /* ---- §30: os três níveis de visão ------------------------------------- */ .men-niveis { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 2rem; } .men-nivel { padding: 1.3rem; border-radius: var(--pl-radius); border: 1px solid var(--pl-border); background: var(--pl-surface); } .men-nivel h3 { margin: .2rem 0 .5rem; font-size: 1.1rem; } .men-nivel p { margin: 0; color: var(--text-secondary, #b9b9b9); font-size: .9rem; } .men-nivel-seta { color: var(--primary-gold); font-size: 1.1rem; } @media (max-width: 900px) { .men-niveis { grid-template-columns: 1fr; } /* A seta horizontal vira vertical quando os blocos empilham. */ .men-nivel-seta { transform: rotate(90deg); justify-self: center; } } /* ---- §31: os seis benefícios ------------------------------------------ */ .men-beneficios { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: 2rem; } .men-beneficios article { padding: 1.2rem; border-radius: var(--pl-radius); border: 1px solid var(--pl-border); background: var(--pl-surface); } .men-beneficios h3 { margin: 0 0 .35rem; font-size: 1.02rem; color: var(--primary-gold); } .men-beneficios p { margin: 0; color: var(--text-secondary, #b9b9b9); font-size: .9rem; }