/* ========================================================================== João Victor Morais · Psicólogo Folha principal. O CSS crítico (tokens, fontes, header e hero) está inline no de cada página; este arquivo cobre o restante e carrega sem bloquear a renderização. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Menu mobile Sem JavaScript o menu vira uma faixa de links abaixo do header, para que a navegação continue disponível. -------------------------------------------------------------------------- */ .menu-toggle { display: none; } @media (max-width: 1120px) { .site-header { flex-wrap: wrap; } .js .menu-toggle { align-items: center; background: var(--yellow); border: 0; border-radius: var(--radius-sm); cursor: pointer; display: flex; flex-direction: column; gap: 5px; height: 46px; justify-content: center; padding: 0; width: 46px; } .menu-toggle span { background: var(--ink); border-radius: var(--radius-pill); display: block; height: 3px; transition: transform .2s ease, opacity .2s ease; width: 23px; } .mobile-menu.is-open .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .mobile-menu.is-open .menu-toggle span:nth-child(2) { opacity: 0; } .mobile-menu.is-open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .mobile-menu nav { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .mobile-menu nav a { align-items: center; background: #161719; border: 1px solid #303237; border-radius: var(--radius-sm); color: var(--white); display: flex; font-size: 14px; font-weight: 700; min-height: 48px; padding: 14px 16px; text-decoration: none; } /* Sem JS: a lista ocupa a largura toda, numa segunda linha do header. */ html:not(.js) .mobile-menu { flex: 1 0 100%; padding: 0 0 12px; } /* Com JS: vira painel suspenso controlado pelo botão. */ .js .mobile-menu nav { background: rgba(8, 9, 10, .99); border-bottom: 1px solid #2f3135; box-shadow: 0 18px 38px rgba(16, 17, 19, .14); left: 0; opacity: 0; padding: 16px 5vw 22px; pointer-events: none; position: fixed; right: 0; top: 84px; transform: translateY(-10px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; visibility: hidden; } .js .mobile-menu.is-open nav { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; } } /* -------------------------------------------------------------------------- 1b. Átomos compartilhados Também estão no CSS crítico da home (onde aparecem acima da dobra); aqui servem às páginas internas, que não repetem aquele bloco. -------------------------------------------------------------------------- */ .eyebrow { align-items: center; display: flex; font-size: 12px; font-weight: 760; gap: 9px; letter-spacing: .12em; margin: 0 0 24px; text-transform: uppercase; } .eyebrow > span { background: var(--yellow); border-radius: 50%; display: inline-block; flex: 0 0 auto; height: 8px; width: 8px; } .cta { align-items: center; background: var(--yellow); border: 1px solid var(--yellow); border-radius: 16px; color: var(--ink); display: inline-flex; font-size: 15px; font-weight: 780; gap: 10px; justify-content: center; min-height: 54px; padding: 14px 18px; text-align: center; text-decoration: none; transition: background .2s ease, box-shadow .2s ease, transform .2s ease; } .cta:hover { background: #ffda1a; transform: translateY(-2px); } .cta:active { transform: translateY(0) scale(.98); } .cta svg { flex: 0 0 auto; height: 20px; width: 20px; } .cta-arrow { flex: 0 0 auto; font-size: 18px; margin-left: 4px; } .microcopy { color: var(--muted); font-size: 12px; line-height: 1.48; margin: 11px 0 0; max-width: 500px; } /* -------------------------------------------------------------------------- 1c. Páginas de texto (política de privacidade, blog) -------------------------------------------------------------------------- */ .legal { margin: 0 auto; max-width: 760px; padding: clamp(56px, 7vw, 88px) 6vw clamp(64px, 7vw, 96px); } .legal h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 720; letter-spacing: -.055em; line-height: 1.02; margin-bottom: 20px; } .legal-lead { font-size: 16px; line-height: 1.62; margin-bottom: 10px; } .legal-updated { color: var(--muted); font-size: 12.5px; margin-bottom: 44px; } .legal h2 { font-size: 19px; letter-spacing: -.02em; line-height: 1.3; margin: 40px 0 12px; } .legal p, .legal li { color: var(--muted); font-size: 14.5px; line-height: 1.68; } .legal p { margin-bottom: 14px; } .legal strong { color: var(--ink); } .legal ul { display: grid; gap: 8px; margin: 0 0 18px; padding-left: 20px; } .legal a { text-decoration-color: var(--yellow); text-underline-offset: 3px; } .legal-safety { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--yellow); border-radius: var(--radius-sm); margin-top: 48px; padding: 18px 20px; } .legal-safety p { margin: 0; } .blog-empty { min-height: 46vh; } .blog-empty .cta { margin-top: 12px; } @media (max-width: 560px) { .legal { padding: 44px 20px 56px; } .legal h1 { font-size: 2.1rem; } .legal h2 { font-size: 17px; margin-top: 34px; } .legal p, .legal li { font-size: 14px; } .blog-empty .cta { width: 100%; } } /* -------------------------------------------------------------------------- 2. Blocos de seção -------------------------------------------------------------------------- */ .section { padding: clamp(64px, 6vw, 88px) 6vw; } .section-heading { max-width: 960px; } .section-heading h2, .session-intro h2 { font-size: clamp(2.1rem, 3.6vw, 3.25rem); letter-spacing: -.055em; line-height: 1.08; margin-bottom: 24px; } .section-heading > p:not(.eyebrow) { color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 720px; } .section-dark { background: var(--ink); color: var(--white); padding: clamp(64px, 6vw, 88px) 6vw; } .eyebrow-light { color: #d5d5d5; } .section-dark .section-heading > p:not(.eyebrow) { color: #b9babe; } .cta-secondary { background: transparent; border-color: var(--ink); color: var(--ink); } .cta-secondary:hover { background: var(--ink); color: var(--white); } /* -------------------------------------------------------------------------- 3. O que você enfrenta -------------------------------------------------------------------------- */ .problems { background: var(--white); } .pain-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 32px 0 28px; } /* Sem número: composição centralizada — ícone, título e descrição no eixo. */ .pain-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; min-height: 186px; padding: 26px 22px; text-align: center; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .pain-icon { align-items: center; display: flex; justify-content: center; margin-bottom: 16px; } .pain-icon img { height: 56px; width: 56px; } .pain-card h3 { font-size: 17px; letter-spacing: -.02em; margin-bottom: 10px; text-transform: none; } .pain-card p { color: var(--muted); font-size: 16px; line-height: 1.6; margin-bottom: 0; } .problems-close { border-left: 4px solid var(--yellow); font-size: 16px; line-height: 1.6; margin: 0 0 30px; max-width: 760px; padding: 4px 0 4px 16px; } /* -------------------------------------------------------------------------- 4. Sobre mim -------------------------------------------------------------------------- */ /* Mais profundo da página: é aqui que o visitante encontra a pessoa. */ /* Uma coluna para a foto, uma para cabeçalho+corpo juntos num só bloco — antes eram duas linhas de grid separadas (cabeçalho/conteúdo) com a foto atravessando as duas, e a distribuição de altura do grid nesse caso não batia pixel a pixel com a soma real do texto (sobrava alguns px acima e abaixo). Com um único bloco, a foto (align-self:stretch, o padrão) casa exatamente com a altura do texto, sem essa folga. */ .about { background: var(--ink-deep); border-top: 1px solid #303237; column-gap: 5vw; display: grid; grid-template-columns: minmax(320px, .72fr) minmax(0, 1fr); } .about-text { max-width: 760px; } /* position:relative + filhos absolutos: mesmo com height:100%, a proporção intrínseca da imagem (retrato ~4:5,5) vazava no cálculo automático da altura da linha do grid — a linha ficava do tamanho que a foto "pediria" na largura da coluna (~695px), maior que o texto real (~668px), sobrando vão embaixo. Absoluto tira a foto desse cálculo: a caixa passa a depender só do grid (min-height + stretch, que aí sim casa exatamente com o texto). */ .about-image-wrap { margin: 0; min-height: 560px; position: relative; } /* picture absoluto + inset:0 isola a foto do cálculo de altura do grid (ela nunca "pede" espaço ao pai); dentro dela, a img fica em fluxo normal, sem afetar nada lá fora. */ .about-image-wrap picture { display: block; height: 100%; inset: 0; position: absolute; width: 100%; } /* max-height/max-width (não object-fit + width/height:100%) encolhem a própria caixa da img até o tamanho realmente desenhado, sem sobra invisível nas bordas: a foto inteira sempre aparece (nunca corta) e o arredondamento cai exatamente sobre os pixels da foto, não sobre uma margem vazia. aspect-ratio (mesma proporção dos atributos width/height do HTML) deixa o navegador calcular essa caixa antes da foto carregar (loading="lazy") — sem isso ela ficava 0×0 até a imagem chegar. width E height em auto (não um fixo em 100%): com só um lado fixo, o max-width encolhia a largura mas deixava a altura presa em 100%, esticando a foto quando a coluna fica mais estreita que a altura pedida (acontecia entre 701-1000px). Com os dois auto + os dois max-*, a proporção real é respeitada não importa qual lado aperta primeiro. */ .about-image-wrap img { aspect-ratio: 1400 / 1945; border-radius: var(--radius-lg); display: block; height: auto; margin: 0 auto; max-height: 100%; max-width: 100%; width: auto; } .about-heading h2 { font-size: clamp(2.5rem, 3.9vw, 3.5rem); letter-spacing: -.065em; line-height: 1.06; margin-bottom: 22px; } .license { border-left: 4px solid var(--yellow); display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; padding-left: 15px; } .license strong { font-size: 15px; } .license span { color: #c5c6c8; font-size: 12px; } .credential-pills { display: grid; gap: 0; margin: 0 0 20px; max-width: 690px; } .credential-pills span { border-bottom: 1px solid #34363a; color: #e1e1e2; font-size: 14px; font-weight: 550; line-height: 1.45; padding: 8px 0; } /* Segunda fileira opcional: recursos integrados, um degrau abaixo das credenciais. A marcação foi retirada do "Sobre mim" por repetir o parágrafo seguinte; as regras ficam aqui caso se queira reativá-la. */ .credential-pills-soft { margin-bottom: 26px; } .credential-pills-soft span { background: rgba(242, 201, 0, .09); border-color: rgba(242, 201, 0, .38); color: #f4dd7a; font-weight: 600; } .about-copy > p { color: #c5c6c8; font-size: 16px; line-height: 1.65; max-width: 690px; } .about-copy > p:last-of-type { margin-bottom: 0; } .about-copy > .cta { margin-top: 26px; } .about-copy p.about-kicker { color: var(--yellow); font-size: clamp(14px, 1.05vw, 15.5px); font-weight: 720; line-height: 1.6; margin: 4px 0 4px; max-width: 620px; } /* -------------------------------------------------------------------------- 5. Como funciona -------------------------------------------------------------------------- */ /* Um degrau acima do "Sobre mim": sem isso as duas seções escuras, que estão coladas desde a reordenação, leem como um bloco contínuo. */ .process { background: var(--ink-soft); display: grid; gap: 5vw; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr); } .process-content { align-self: center; } .process-steps { display: grid; gap: 9px; list-style: none; margin: 38px 0 0; padding: 0; } .process-steps li { background: #26282d; border: 1px solid #3b3d42; border-radius: var(--radius-md); display: grid; gap: 16px; grid-template-columns: 52px 1fr; padding: 20px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } /* A numeração marca uma sequência real; em display ela vira o ritmo da seção. */ .process-steps > li > span { color: var(--yellow); font-size: 34px; font-weight: 700; letter-spacing: -.05em; line-height: .9; padding-top: 1px; } .process-steps h3 { font-size: 18px; margin-bottom: 6px; } .process-steps p { color: #c5c6c8; font-size: 16px; line-height: 1.52; margin: 0; } .process-image-wrap { margin: 0; min-height: 520px; position: relative; } /* picture absoluto + inset:0 isola a foto do cálculo de altura do grid (mesma técnica do "Sobre mim"); dentro dela, a img fica em fluxo normal. */ .process-image-wrap picture { display: block; height: 100%; inset: 0; position: absolute; width: 100%; } /* width E height em auto (não um fixo em 100%): com só um lado fixo, o max-width encolhia a largura mas deixava a altura presa em 100%, esticando a foto quando a coluna aperta. Com os dois auto + os dois max-*, a proporção real é respeitada não importa qual lado aperta primeiro — mesmo ajuste do "Sobre mim"/"Primeira sessão". */ .process-image-wrap img { aspect-ratio: 1400 / 1963; border-radius: var(--radius-lg); display: block; height: auto; margin: 0 auto; max-height: 100%; max-width: 100%; width: auto; } /* -------------------------------------------------------------------------- 6. A primeira sessão — seção de oferta -------------------------------------------------------------------------- */ /* Mesma técnica de "Sobre mim": uma coluna inteira para a foto, título+texto +CTA fluindo juntos na outra — não um título isolado com a foto embaixo e o resto do conteúdo numa terceira zona separada, que é o que havia antes e lia como três blocos competindo em vez de uma composição só. */ .first-session { background: var(--paper); column-gap: 5vw; display: grid; grid-template-areas: "photo heading" "photo content"; grid-template-columns: minmax(320px, .72fr) minmax(0, 1fr); padding-bottom: clamp(64px, 7vw, 96px); padding-top: clamp(64px, 7vw, 96px); row-gap: 0; } .session-intro { align-self: end; grid-area: heading; } .first-session .session-intro h2 { font-size: clamp(2.1rem, 3.3vw, 3.1rem); margin-bottom: 0; } /* Mesma técnica do "Sobre mim": o item ocupa as duas trilhas (heading+content) via grid-area, esticando para a altura combinada delas; picture absoluto isola a foto desse cálculo (senão a proporção 5:7 dela vazaria e infla a trilha); a img então encolhe pra caber nessa altura sem cortar. */ .session-photo { grid-area: photo; margin: 0; min-height: 560px; position: relative; } .session-photo picture { display: block; height: 100%; inset: 0; position: absolute; width: 100%; } /* width:auto + height:auto (não height:100%): com um dos dois fixo, o max-width só encolhia a largura e deixava a altura presa em 100%, esticando/distorcendo a foto quando a coluna é mais estreita que a altura pedida (era exatamente o caso aqui — a foto espana duas linhas e fica bem alta). Com os dois auto + os dois max-*, o navegador respeita a proporção não importa qual lado aperta primeiro. */ .session-photo img { aspect-ratio: 1300 / 1818; border-radius: var(--radius-lg); display: block; height: auto; margin: 0 auto; max-height: 100%; max-width: 100%; width: auto; } .session-details { align-self: start; grid-area: content; margin-top: 20px; max-width: 720px; } .session-copy { max-width: 650px; } .session-copy p { color: var(--muted); font-size: 16px; line-height: 1.62; } .session-copy p:last-child { margin-bottom: 0; } /* Derruba a maior objeção de quem nunca fez terapia — negrito e um degrau acima do corpo do texto bastam; maior que isso virava a primeira coisa lida na seção, atropelando os parágrafos que constroem o raciocínio até aqui. */ .session-highlight { display: block; font-size: clamp(16px, 1.3vw, 18px); font-weight: 720; line-height: 1.5; margin: 20px 0; max-width: 600px; } /* Cartão de informações práticas: o bloco mais concreto da página. */ .session-facts { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); margin: 0 0 26px; max-width: 680px; padding: 22px 24px 24px; } .session-facts-title { align-items: center; display: flex; font-size: 11px; font-weight: 760; gap: 8px; letter-spacing: .12em; margin: 0 0 16px; text-transform: uppercase; } .session-facts-title > span { background: var(--yellow); border-radius: 50%; flex: 0 0 auto; height: 7px; width: 7px; } .session-facts ul { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; } .session-facts li { align-items: flex-start; color: var(--muted); display: grid; font-size: 14px; gap: 13px; grid-template-columns: 32px 1fr; line-height: 1.55; } /* Selo amarelo por trás do ícone: puxa a cor da marca pro cartão sem redesenhar os glifos. */ .fact-icon { align-items: center; background: rgba(242, 201, 0, .16); border-radius: 50%; display: flex; flex: 0 0 auto; height: 32px; justify-content: center; width: 32px; } .session-facts svg { color: var(--ink); height: 17px; width: 17px; } /* -------------------------------------------------------------------------- 7. Perguntas frequentes -------------------------------------------------------------------------- */ .faq { background: var(--white); border-top: 1px solid var(--line); display: grid; gap: 5vw; grid-template-columns: minmax(0, .52fr) minmax(0, 1fr); } /* O título para de esticar junto com a lista e passa a acompanhar a rolagem: sem isso sobravam mais de mil pixels de coluna vazia ao lado das perguntas. */ .faq-heading { align-self: start; } @media (min-width: 901px) { .faq-heading { position: sticky; top: 108px; } } .faq-heading h2 { font-size: clamp(2.1rem, 3.2vw, 2.875rem); letter-spacing: -.055em; line-height: 1.08; margin-bottom: 0; } .faq-list { display: grid; gap: 26px; min-width: 0; } /* Três blocos rotulados: 13 perguntas seguidas viram um paredão sem estrutura. */ .faq-group { display: grid; gap: 9px; } .faq-group-title { color: var(--muted); font-size: 11px; font-weight: 760; letter-spacing: .12em; margin: 0 0 3px; text-transform: uppercase; } .faq-list details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .faq-list summary { align-items: center; cursor: pointer; display: flex; font-size: 15px; font-weight: 680; gap: 22px; justify-content: space-between; list-style: none; min-height: 56px; padding: 14px 18px; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary span { color: var(--muted); flex: 0 0 auto; font-size: 24px; font-weight: 350; transition: transform .2s ease; } .faq-list details[open] summary span { transform: rotate(45deg); } .faq-list details p { color: var(--muted); font-size: 16px; line-height: 1.62; margin: -2px 19px 20px; max-width: 680px; padding-right: 42px; } .faq-contact { border-top: 1px solid var(--line); padding-top: 20px; } .faq-contact > p:first-child { font-size: 14px; font-weight: 680; margin-bottom: 12px; } /* -------------------------------------------------------------------------- 8. Próximo passo -------------------------------------------------------------------------- */ /* O único campo de cor da página. O amarelo já é a cor de ação em todos os botões; aqui ele vira fundo, no exato momento em que a página faz o pedido. Entre o branco do FAQ e o quase-preto do rodapé, é o beat mais forte. */ .closing { align-items: center; background: var(--yellow); color: var(--ink); display: flex; flex-direction: column; padding-bottom: clamp(58px, 6vw, 84px); padding-top: clamp(58px, 6vw, 84px); text-align: center; } .closing .eyebrow { justify-content: center; } .closing .eyebrow > span { background: var(--ink); } .closing h2 { font-size: clamp(2.1rem, 3.6vw, 3.25rem); letter-spacing: -.058em; line-height: .98; margin-bottom: 20px; max-width: 960px; } /* Sobre amarelo, o cinza --muted cai para 3,6:1 e reprova. Ink rebaixado mantém a hierarquia com 7:1. */ .closing > p:not(.eyebrow) { color: rgba(16, 17, 19, .78); font-size: 15px; line-height: 1.58; max-width: 660px; } .closing small { color: rgba(16, 17, 19, .74); font-size: 12px; margin-top: 11px; } /* Botão amarelo sobre campo amarelo desapareceria: inverte para tinta. */ .closing .cta { background: var(--ink); border-color: var(--ink); color: var(--white); margin-top: 12px; } .closing .cta:hover { background: #26282d; border-color: #26282d; } .closing .cta:focus-visible { outline-color: var(--ink); } .closing ::selection { background: var(--ink); color: var(--yellow); } /* -------------------------------------------------------------------------- 9. Rodapé -------------------------------------------------------------------------- */ .site-footer { background: var(--ink-deep); color: #b9babe; font-size: 12px; line-height: 1.55; padding: 48px 6vw 40px; } .footer-cols { display: grid; gap: 5vw; grid-template-columns: 1.35fr 1fr 1fr; } .footer-col { display: flex; flex-direction: column; gap: 6px; } .footer-col strong { color: var(--white); font-size: 12px; margin-bottom: 4px; } .footer-col a { align-items: center; display: flex; min-height: 30px; text-decoration-color: var(--yellow); text-underline-offset: 4px; width: fit-content; } /* Reabrir o aviso de cookies depende de JS (é o que grava a escolha em localStorage) — sem JS não há nada para gerenciar, então o botão só aparece depois que a classe .js entra no . */ .footer-link-button { align-items: center; background: none; border: 0; color: inherit; cursor: pointer; display: none; font: inherit; min-height: 30px; padding: 0; text-align: left; text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 4px; width: fit-content; } .js .footer-link-button { display: flex; } .footer-signature { align-items: center; border-top: 1px solid #2a2b2d; display: flex; flex-direction: column; gap: 12px; margin-top: 40px; padding-top: 32px; text-align: center; } .footer-signature > span { color: #85868a; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } /* Logo oficial em cor (arquivo próprio para fundo escuro), menor que o nome no header. */ .footer-signature img { height: auto; width: 130px; } .footer-safety { border-top: 1px solid #2a2b2d; color: #a4a5a9; margin: 32px auto 0; max-width: 760px; padding-top: 24px; text-align: center; } .footer-legal { margin: 20px 0 0; text-align: center; } /* -------------------------------------------------------------------------- 10. Barra fixa mobile + aviso de cookies -------------------------------------------------------------------------- */ .mobile-cta { display: none; } /* Fica no canto direito: a coluna de texto do hero e o bloco de identificação profissional ocupam a esquerda e não podem ser encobertos. */ .cookie-notice { background: rgba(8, 9, 10, .97); border: 1px solid #303237; border-radius: var(--radius-sm); bottom: 16px; box-shadow: 0 14px 34px rgba(16, 17, 19, .28); color: #c9cacd; display: none; font-size: 11.5px; line-height: 1.5; max-width: 330px; padding: 13px 15px; position: fixed; right: 16px; z-index: 45; } .cookie-notice.is-visible { display: block; } .cookie-notice p { margin: 0 0 10px; } .cookie-notice a { color: var(--yellow); text-underline-offset: 3px; white-space: nowrap; } .cookie-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; } .cookie-notice button { border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; min-height: 34px; padding: 7px 14px; } .cookie-accept { background: var(--yellow); border: 1px solid var(--yellow); color: var(--ink); } .cookie-decline { background: transparent; border: 1px solid #4a4c51; color: #d3d4d7; } .cookie-decline:hover { border-color: #6d7075; } /* -------------------------------------------------------------------------- 10b. Microinterações e revelação progressiva Sem JS, o conteúdo permanece totalmente visível. O JS só adiciona .reveal-enabled depois que o IntersectionObserver está disponível. -------------------------------------------------------------------------- */ .reveal-enabled .reveal-item { opacity: 0; transform: translateY(16px); transition: opacity .28s ease, transform .28s ease; transition-delay: var(--reveal-delay, 0ms); } .reveal-enabled .reveal-item.is-visible { opacity: 1; transform: translateY(0); } @media (hover: hover) and (pointer: fine) { .pain-card:hover { border-color: #c9c8c1; box-shadow: 0 10px 24px rgba(16, 17, 19, .06); transform: translateY(-2px); } .process-steps li:hover { border-color: #505258; box-shadow: 0 10px 24px rgba(0, 0, 0, .12); transform: translateY(-2px); } } /* -------------------------------------------------------------------------- 11. Responsivo -------------------------------------------------------------------------- */ @media (max-width: 900px) { .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .faq { grid-template-columns: 1fr; } .process { grid-template-columns: minmax(0, 1fr) minmax(260px, .6fr); } .process-image-wrap { height: 560px; min-height: 0; } .about { grid-template-columns: minmax(260px, .62fr) minmax(0, 1fr); } .about-image-wrap { height: 560px; min-height: 0; } .first-session { grid-template-columns: minmax(260px, .62fr) minmax(0, 1fr); } .footer-cols { gap: 32px; grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .process, .about, .first-session { grid-template-columns: 1fr; } .process-image-wrap { height: 480px; min-height: 0; } /* Abaixo de 700px a foto do "Como funciona" empilha como faixa — sem texto do lado pra casar, a foto volta a preencher/cortar em vez de se enquadrar pela proporção real. */ .process-image-wrap img { aspect-ratio: auto; height: 100%; inset: 0; max-height: none; max-width: none; object-fit: cover; position: absolute; width: 100%; } .about { gap: 34px; } .first-session { gap: 34px; grid-template-areas: "heading" "photo" "content"; } /* Abaixo de 700px a foto empilha com altura fixa (banda), não mais ao lado do texto — aqui o objetivo é preencher a faixa, não respeitar a altura de um texto ao lado que já não existe, então volta a esticar/cortar. */ .about-image-wrap { height: 580px; min-height: 0; } .about-image-wrap img { height: 100%; inset: 0; max-height: none; max-width: none; object-fit: cover; object-position: center 20%; position: absolute; width: 100%; } /* Mesma lógica: sem texto ao lado, a foto d'"A primeira sessão" também volta a preencher a faixa em vez de se enquadrar pela proporção real. */ .session-photo { height: 460px; min-height: 0; } .session-photo img { aspect-ratio: auto; height: 100%; inset: 0; max-height: none; max-width: none; object-fit: cover; object-position: center 12%; position: absolute; width: 100%; } .session-details { margin-top: 0; } .footer-cols { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 560px) { .js .mobile-menu nav { grid-template-columns: 1fr; max-height: calc(100svh - 72px); overflow-y: auto; padding: 10px 18px 18px; top: 72px; } .mobile-menu nav a { font-size: 13px; padding: 13px 15px; } .section, .section-dark { padding: 52px 20px; } .section-heading h2, .session-intro h2 { font-size: 2.3rem; line-height: 1.03; margin-bottom: 17px; } .first-session .session-intro h2 { font-size: 2.3rem; } .session-photo { height: 100vw; } .section-heading > p:not(.eyebrow) { font-size: 16px; line-height: 1.52; } .pain-grid { gap: 9px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 34px 0 25px; } .pain-card { min-height: 168px; padding: 17px 14px; } .pain-icon { margin-bottom: 10px; } .pain-icon img { height: 44px; width: 44px; } .pain-card h3 { font-size: 14px; line-height: 1.2; margin-bottom: 7px; } .pain-card p { font-size: 16px; line-height: 1.5; } .problems-close { font-size: 16px; margin-bottom: 24px; } .cta-secondary { width: 100%; } .first-session { gap: 24px; padding-bottom: 48px; padding-top: 48px; } .session-copy p { font-size: 16px; line-height: 1.6; } .session-facts { padding: 18px 16px 20px; } .session-facts li { font-size: 16px; gap: 11px; grid-template-columns: 26px 1fr; } .fact-icon { height: 26px; width: 26px; } .session-facts svg { height: 14px; width: 14px; } .session-details .cta { width: 100%; } .process { gap: 0; } .process-steps { margin-top: 28px; } .process-steps li { gap: 14px; grid-template-columns: 46px 1fr; padding: 17px; } .process-steps h3 { font-size: 14px; } .process-steps p { font-size: 16px; } .process-steps > li > span { font-size: 30px; } /* A foto volta no celular, mas como faixa: o retrato inteiro custaria 490px de rolagem. Aqui ela é o único respiro visual de um trecho longo de texto. */ .process-image-wrap { display: block; height: 240px; margin-top: 30px; min-height: 0; } .process-image-wrap img { border-radius: var(--radius-md); } .about-image-wrap { height: auto; aspect-ratio: 4 / 5; min-height: 0; } .about-heading h2 { font-size: 2.5rem; } .credential-pills { gap: 7px; } .credential-pills-soft { margin-bottom: 22px; } .credential-pills span { font-size: 14px; padding: 8px 0; } .about-copy > p { font-size: 16px; line-height: 1.6; } .about-copy .cta { width: 100%; } /* Em fundo claro no mobile, o CTA cheio de amarelo repetido cansa: os secundários viram grafite e o amarelo fica só nos momentos de decisão. */ .problems .cta, .about-copy .cta, .faq-contact .cta { background: #24262a; border-color: #3b3d41; color: var(--white); } .problems .cta:hover, .about-copy .cta:hover, .faq-contact .cta:hover { background: #303238; border-color: #303238; color: var(--white); } .closing { padding-bottom: 48px; padding-top: 48px; } .closing h2 { font-size: 2.35rem; } .closing > p:not(.eyebrow) { font-size: 14px; } .closing .cta { width: 100%; } .faq { gap: 32px; } .faq-heading h2 { font-size: 2.35rem; } .faq-list { gap: 22px; } .faq-list summary { font-size: 16px; gap: 16px; min-height: 52px; padding: 13px 16px; } .faq-list details p { font-size: 16px; margin: -1px 16px 18px; padding-right: 10px; } .faq-contact .cta { width: 100%; } .site-footer { padding: 38px 20px 28px; } .footer-col a { min-height: 44px; } .footer-signature { margin-top: 32px; padding-top: 26px; } .footer-safety { margin-top: 26px; padding-top: 20px; text-align: left; } .footer-legal { text-align: left; } .mobile-cta { background: rgba(247, 246, 242, .97); border-radius: var(--radius-md) var(--radius-md) 0 0; bottom: 0; box-shadow: 0 -10px 30px rgba(16, 17, 19, .12); display: block; left: 0; opacity: 0; padding: 9px 11px calc(9px + env(safe-area-inset-bottom)); pointer-events: none; position: fixed; right: 0; transform: translateY(16px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; visibility: hidden; z-index: 40; } .mobile-cta.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; } .mobile-cta .cta { font-size: 14px; gap: 8px; min-height: 54px; padding-left: 14px; padding-right: 14px; white-space: normal; width: 100%; } /* O aviso nunca cobre o CTA fixo: quando a barra aparece, ele sobe. */ .cookie-notice { bottom: 10px; font-size: 11px; left: 10px; max-width: none; padding: 11px 13px; right: 10px; } .cookie-notice p { margin-bottom: 9px; } body.has-sticky-cta .cookie-notice { bottom: calc(84px + env(safe-area-inset-bottom)); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition: none !important; } .cta:hover, .cta:active { transform: none; } .reveal-enabled .reveal-item { opacity: 1 !important; transform: none !important; } } /* Refinamento de leitura: celulares estreitos e telas intermediárias. */ @media (max-width: 480px) { .pain-grid { grid-template-columns: 1fr; gap: 12px; } .pain-card { min-height: 0; padding: 24px; } } @media (min-width: 701px) and (max-width: 1000px) { .about, .first-session { grid-template-columns: minmax(220px, .65fr) minmax(0, 1fr); column-gap: 28px; } .process { grid-template-columns: minmax(0, 1fr) minmax(220px, .6fr); gap: 28px; } /* Nessa faixa a coluna de texto ficou mais alta que os 560px fixos da foto (as credenciais subiram para cima do título) — volta a esticar a foto para acompanhar o texto, em vez de sobrar vão acima/abaixo dela. */ .about-image-wrap, .process-image-wrap, .session-photo { height: auto; min-height: 560px; align-self: stretch; } }