/** * A camada de marca sobre o template Latos. * * Tudo aqui é sobreposição: previews/latos-original/index.html continua * sendo a captura fiel, e desligar esta folha devolve o Latos original. */ /* ── A ORDEM DAS SEÇÕES SEGUE O ROTEIRO, NÃO O TEMPLATE ────────────────── O roteiro da página tem 18 etapas; o template trouxe nove seções numa ordem própria. As estruturas que servem estão quase todas fora de lugar: a de depoimentos vem em sexto no template e é a décima sexta do roteiro, a de planos vem em sétimo e é a oitava, e assim por diante. ⚠️ A REORDENAÇÃO É POR `order`, e não por mover nó no DOM. O `Main` é flex column, então `order` resolve visualmente sem tocar na árvore. Mover as seções de lugar no HTML faria o React do Framer hidratar contra uma ordem diferente da que ele mesmo renderiza — o erro #418 em série que já apareceu aqui quando um único nó entrou fora de hora, e que chegou a inchar a página de 13 mil para 67 mil pixels. Os números saltam de dez em dez para as seções novas caberem entre elas sem renumerar tudo a cada inclusão. */ #main [data-framer-name="Main"] > section[data-framer-name="Hero"] { order: 10; } /* 1 · hero */ #main [data-framer-name="Main"] > section[data-framer-name="Problem"] { order: 20; } /* 2 · frases de impacto */ #main [data-framer-name="Main"] > section[data-framer-name="Services"] { order: 30; } /* 3 · sintomas */ #main [data-framer-name="Main"] > section[data-framer-name="Philosophy"] { order: 40; } /* 4 · não é só menopausa */ #main [data-framer-name="Main"] > section[data-framer-name="Process"] { order: 70; } /* 7 · como funciona */ #main [data-framer-name="Main"] > section[data-framer-name="Pricing"] { order: 80; } /* 8 · o que pode fazer parte */ /* ── A "TECNOLOGIA" (Articles do template) SAI DA PÁGINA ─────────────── Ele a listou em 19/09 entre as que podem cair. O que ela dizia já está dito em outro lugar: bioimpedância e exames aparecem no leque de "O tratamento" e na lista de diferenciais. `display: none` e não remoção do nó do HTML: o pacote é captura estática do Framer e a captura é a única cópia que existe, então mexer no markdown capturado é o que não se faz aqui. */ #main [data-framer-name="Main"] > section[data-framer-name="Articles"] { display: none !important; } #main [data-framer-name="Main"] > section[data-framer-name="Social Proof"] { order: 160; } /* 16 · histórias */ #main [data-framer-name="Main"] > section[data-framer-name="FAQ"] { order: 170; } /* 17 · FAQ */ /* ── TIPOGRAFIA ────────────────────────────────────────────────────────── Manrope/Playfair do template saem; Geist/Schibsted Grotesk da clínica entram. O `!important` e a `--framer-font-family` andam juntos porque o Framer escreve a fonte em estilo inline E numa variável própria: mexer só na regra perde para o inline, só na variável não alcança o texto solto. */ :root { --elev-body-font: "Geist", sans-serif; --elev-display-font: "Schibsted Grotesk", sans-serif; } body, #main .framer-text { font-family: var(--elev-body-font) !important; --framer-font-family: var(--elev-body-font) !important; } #main h1.framer-text, #main h2.framer-text, #main h3.framer-text, #main h4.framer-text, #main h5.framer-text, #main h6.framer-text, #main h1.framer-text *, #main h2.framer-text *, #main h3.framer-text *, #main h4.framer-text *, #main h5.framer-text *, #main h6.framer-text * { font-family: var(--elev-display-font) !important; --framer-font-family: var(--elev-display-font) !important; } /* ── AS CORES, NO PADRÃO DO BODY RECODE ────────────────────────────────── ⚠️ A REDEFINIÇÃO TEM QUE SER NO `body`, NUNCA NO `:root`. O template declara os tokens nos dois lugares, e variável CSS resolve por HERANÇA: o elemento herda do ancestral mais próximo, e `body` está mais perto do conteúdo. Não é disputa de especificidade, então `!important` no `:root` também não resolve — foi a primeira tentativa, e não mudou um pixel. */ body { --token-05105cc3-9e5b-4ba5-99de-bcbb313fff97: #3a3e46; /* era #383230 */ --token-bb9d216c-3aac-4692-9d58-f5b2a9cdcc09: #15171c; /* era #925737 · palavra grifada */ --token-73f2db1a-7507-497c-8ae8-8d245cb8f957: #15171c; /* era #99582a */ --token-37dc4a56-7c48-459b-9219-16fda4a7c505: #3a3e46; /* era #835a2e */ --token-88a4daad-a946-45b3-8827-b1d1da914614: #71767f; /* era #695f5a */ --token-46407dfd-76a5-4435-98e7-29914a17d655: #a8a8a8; /* era #baa287 */ --token-2007957d-a074-4c0c-8a33-8d85ed1ba0fd: #15171c; /* era #000 */ --token-c689d33e-db60-40d9-96cf-22106b00a9b7: #15171c; /* era #000 */ --token-5e02aa66-cff6-4bf7-b9d7-72e2e153ca27: #ffffff; /* era #fdf6ee · fundo */ --token-880f89e1-36c9-4265-a2f4-20ec3d5bd7ce: #ffffff; /* era #fef9ef */ /* ⚠️ NENHUM DESTES É BEGE. Pedido em 19/09: "tudo o que está meio bege troque por cinza". A primeira passagem daqui só tinha dessaturado o bege do Latos (#f7f0e8 → #f4f2ee), o que ainda deixa o vermelho acima do azul e lê como creme. Agora é cinza de verdade, azul acima do vermelho, na mesma luminosidade de antes para não mexer no contraste: #f4f2ee → #f2f3f5 (241 → 243) e #ece9e0 → #e8e9eb (231 → 233). #e8e9eb é o mesmo cinza da tela do Body Recode. */ --token-138e2608-4624-498b-9c83-db7325a255ec: #f2f3f5; /* era #f7f0e8 */ --token-4d3745c4-dd2b-4ffd-9745-95753d2f06a5: #f2f3f5; /* era #f7f0e8 */ --token-414b030a-7aa2-401f-80ee-0588281fe7b2: #f2f3f5; /* era #f0e6dc */ --token-5ce0b930-e777-45e1-a7fb-4e304c30196a: #f2f3f5; /* era #f5ede4 */ --token-8314b48d-7054-4002-aa94-f8e61d82f0a7: #f2f3f5; /* era #f2e9dd */ --token-88284299-f2bc-4b1e-88ba-817077810d98: #f2f3f5; /* era #f2eae1 */ --token-417fbc95-d4e0-46cc-bbb6-9f5045b10bfe: #f2f3f5bf;/* era #f5ece3bf */ --token-3ea87e2d-f56b-411d-adc2-29e71fbb6484: #e8e9eb; /* era #e6dbce · linhas */ --token-befdc86e-2a74-4257-a7ea-e8de6617000f: #e8e9eb; /* era #e5dcd1 */ } /* O corpo fica um tom acima do título, como no Body Recode (#626770 no parágrafo, tinta cheia no título). Um token só serve aos dois no template, então a separação é feita aqui — e pela VARIÁVEL do Framer, não por `color`: o valor chega por estilo inline e `color` perderia. */ #main p.framer-text { --framer-text-color: #626770 !important; color: #626770 !important; } /* ── A TIPOGRAFIA DO HERO, NA MEDIDA DO BODY RECODE ────────────────────── Números MEDIDOS no hero de clinic.be-elev.com/emagrecimento, não escolhidos: Body Recode Latos (antes) título 84px / 84px 90px / 99px peso 500 400 tracking −2.94px −3.6px subtítulo 21px / 27.3px 18px / 25.2px peso 400 500 O título do template era maior e mais leve, o subtítulo menor e mais pesado — invertidos, os dois heros tinham hierarquias diferentes. */ /* A foto aparece antes da hidratação, inclusive com vídeo indisponível. O container permanece no lugar quando o vídeo é ocultado após um erro. */ #main section[data-framer-name="Hero"] .framer-j9k7iu-container { background: center / cover no-repeat url("/menopausa/media/hero-menopausa-fogachos-poster.webp"); } #main section[data-framer-name="Hero"] video { opacity: 0; } @media (max-width: 767px) { #main section[data-framer-name="Hero"] .framer-j9k7iu-container { background-image: url("/menopausa/media/hero-menopausa-fogachos-poster-9x16.webp"); } } #main section[data-framer-name="Hero"] h1, #main section[data-framer-name="Hero"] h1 * { font-size: 84px !important; --framer-font-size: 84px !important; line-height: 84px !important; --framer-line-height: 84px !important; font-weight: 500 !important; --framer-font-weight: 500 !important; letter-spacing: -2.94px !important; --framer-letter-spacing: -2.94px !important; } /* ── O SUBTÍTULO VIRA CARTÃO DE VIDRO ──────────────────────────────────── Pedido dele em 19/09/2026, e por um motivo concreto: o texto caía direto sobre o vídeo, que troca de luminância a cada quadro. Onde passa o copo dourado, letra clara sobre fundo claro — ilegível. A regra de parágrafo da página (#626770 sobre branco) só piorava, porque o hero tem o contraste invertido. A receita é a do cartão do hero do Body Recode, MEDIDA nele: branco a 10%, desfoque de 20px, raio de 24px. ⚠️ COM UMA BASE ESCURA POR BAIXO, que lá não é necessária e aqui é. No Body Recode o cartão pousa sobre um trecho de vídeo sempre escuro; aqui ele atravessa a luz da janela e o copo, e branco-sobre-claro continua branco sobre claro por mais que se desfoque — desfoque embaralha, não escurece. OS NÚMEROS SAÍRAM DE MEDIÇÃO, não de gosto. Amostrando o vídeo quadro a quadro na área do cartão e olhando o PIXEL MAIS CLARO (que é quem engole a letra, não a média): sem cartão nenhum ............... 1,12:1 ilegível base 42% + branco 10% ........... 2,89:1 ainda reprova base 58% + branco 6% ........... 4,89:1 passa com folga O mínimo do WCAG para texto deste tamanho é 3,0, e 4,5 é o alvo de texto normal. Escurecer mais só tiraria o vidro sem ganho de leitura. `display: inline-block` e `width: fit-content` porque o

é um bloco de largura cheia: sem isso o cartão vira uma faixa até a borda da tela. */ #main section[data-framer-name="Hero"] p.framer-text { display: inline-block; /* O PORTE É O DO CARTÃO DO BODY RECODE, medido nele: 298×276. Antes este cartão era uma faixa de 530×122 — deitado, largo e raso, nada a ver com o de lá, que é um bloco quase quadrado. Com 300px de largura o texto desce para cinco linhas e a altura chega perto dos 276, que é o que dá aos dois heros a mesma silhueta. */ width: 300px; max-width: 100%; margin-top: 4px; padding: 24px; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .03) 100%), rgba(6, 7, 9, .58); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); /* A linha de luz no topo é o que faz o vidro ter espessura em vez de parecer um retângulo cinza — mesma ideia do `inset` do .vidro-card. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); /* 15px/22.5px é o corpo do cartão do Body Recode. Os 21px de antes eram o tamanho do SUBTÍTULO do hero, que fazia sentido quando o texto corria solto sobre o vídeo; dentro de um cartão de 300px ele viraria três palavras por linha. */ font-size: 15px !important; --framer-font-size: 15px !important; line-height: 22.5px !important; --framer-line-height: 22.5px !important; font-weight: 400 !important; --framer-font-weight: 400 !important; letter-spacing: normal !important; --framer-letter-spacing: normal !important; color: #ffffff !important; --framer-text-color: #ffffff !important; } /* ── O CARTÃO VAI PARA A DIREITA ───────────────────────────────────────── Pedido dele em 19/09/2026, e é onde o cartão do Body Recode também fica. O hero é uma coluna de 1200px alinhada à esquerda; o cartão vive num invólucro de 300px dentro dela. `align-self: flex-end` empurra só esse invólucro para o fim da coluna — o título e o botão continuam à esquerda, que é o contraste que faz o cartão ler como nota à parte e não como continuação do texto. O alvo é o INVÓLUCRO, não o

: mover o

sozinho o tiraria do bloco que o template dimensiona, e a largura de 300px viria a zero. ⚠️ E ELE SAI DO FLUXO, que é o que aproxima o título do botão. Só alinhar à direita não bastava: o invólucro continuava ocupando a própria faixa vertical na coluna, e empurrava o botão 301px para baixo — o título terminava em y487 e o botão só começava em y788, com um vazio entre os dois. Fora do fluxo, a coluna da esquerda volta a ser título seguido de botão, e o cartão flutua ao lado. `bottom: 0` o alinha pela BASE com o fim do bloco de texto, em vez de pendurá-lo numa altura arbitrária: os dois terminam na mesma linha, e é isso que faz os lados conversarem. ⚠️ Se o template for recapturado e esta classe mudar de nome, o cartão volta para o fluxo, à esquerda — perde-se o arranjo, não a página. É o modo de falhar certo para um seletor que depende de nome gerado. */ #main section[data-framer-name="Hero"] .framer-kqj96x { position: absolute; right: 0; bottom: 0; } /* ── A ASSINATURA DO MÉDICO NO PÉ DO CARTÃO ────────────────────────────── Retrato de 48px em círculo, nome e casa à direita — as medidas saíram do cartão do Body Recode. A linha de cima separa sem desenhar régua: é a mesma ideia do `inset` que dá espessura ao vidro. */ #main .elev-hero-autor { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); } #main .elev-hero-autor img { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; /* O retrato é recortado bem no rosto: sem isto o círculo pega o ombro. */ object-position: 50% 22%; } #main .elev-hero-autor-nomes { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #main .elev-hero-autor-nome { font-size: 15px; line-height: 22.5px; font-weight: 500; color: #ffffff; } #main .elev-hero-autor-casa { font-size: 12px; line-height: 15.6px; font-weight: 500; letter-spacing: .08em; color: rgba(255, 255, 255, .62); } /* ── NO CELULAR O TEXTO CEDE O ROSTO ───────────────────────────────────── Medido em 390×844: o conteúdo do hero ocupava de 35% a 95% da altura e começava exatamente no queixo da mulher — o selo caía sobre o rosto e a headline sobre o leque, que é o assunto da imagem. Mover não resolvia: o contêiner do template já é `justify-content: flex-end`, ou seja, o bloco já estava o mais baixo que dava. O que sobrava era ENCOLHER, e os 80px vieram de quatro lugares somados — o título (−40), os vãos entre os blocos (−20), o cartão (−12) e o respiro de baixo (−8). Nenhum deles sozinho resolveria sem estragar a peça. O título perde 10px mas ganha em leitura: em 44px ele quebrava em quatro linhas nesta frase, e em 34px cabe em três. */ @media (max-width: 809px) { #main section[data-framer-name="Hero"] h1, #main section[data-framer-name="Hero"] h1 * { font-size: 34px !important; --framer-font-size: 34px !important; line-height: 36px !important; --framer-line-height: 36px !important; letter-spacing: -1.02px !important; --framer-letter-spacing: -1.02px !important; } /* Os vãos do template: 20px entre selo, título e cartão, e 32px entre o bloco de texto e o botão. */ #main section[data-framer-name="Hero"] .framer-1ttpb2c { gap: 14px !important; } #main section[data-framer-name="Hero"] .framer-1diuylv { gap: 22px !important; } #main section[data-framer-name="Hero"] .framer-1bb1mfo { padding-bottom: 32px !important; } /* NO CELULAR O CARTÃO NÃO ENTRA, por decisão dele em 19/09/2026 — e a tela concorda: com ele o conjunto ia até 98% da altura, colado no pé. Sem ele sobra respiro, e o título e o botão ficam com o rosto da mulher inteiro por cima. Some o INVÓLUCRO, não só o

: esconder o

deixaria os 4px e o vão de 14px do invólucro reservados, um buraco no meio da composição. */ #main section[data-framer-name="Hero"] .framer-kqj96x { display: none !important; } } /* ── O SELO DO HERO ────────────────────────────────────────────────────── Mesmo esquema do Body Recode (commit 5ae7c95): pílula com gradiente verde, ícone no tamanho da letra, tudo numa linha só. ⚠️ O VERDE ESCURECE NO FIM, e isso saiu de medição lá. Sobre foto escura o esmeralda claro bastaria; aqui a pílula fica sobre o VÍDEO do hero, que troca de luminância a cada quadro, e o verde claro LEVANTA a luminância do fundo — o texto branco caía para 3,90:1, abaixo do mínimo de 4,5. Daí o gradiente ir do esmeralda para o verde-tinta da casa, com uma base escura a 52% por baixo: é a base que garante a leitura em QUALQUER quadro. `inline-flex` e `width: fit-content` porque o elemento é um bloco de largura cheia: sem isso a "pílula" vira uma faixa atravessando a tela. */ #main .elev-hero-assinatura { display: inline-flex; align-items: center; width: fit-content; gap: .62em; margin: 0 0 24px; padding: 7px 14px 7px 12px; border-radius: 999px; background: linear-gradient(135deg, rgba(77, 204, 133, .34) 0%, rgba(21, 96, 60, .52) 100%), rgba(6, 7, 9, .52); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: "Geist", sans-serif !important; font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .08em; color: #ffffff; /* UMA LINHA SEMPRE. Numa pílula de raio cheio, texto em duas linhas deixa de ler como selo e vira um retângulo de cantos redondos. */ white-space: nowrap; } /* O ÍCONE NO TAMANHO DA LETRA. Em 1.15em ele mede ~13,8px: a marca tem três barras e abaixo disso elas colam. O -.08em é alinhamento ÓTICO — o `align-items` centra o ícone na caixa da LINHA, que inclui as descidas, e sem a correção ele lê caído ao lado das maiúsculas. O arquivo é o `-escuro`, que na nomenclatura da casa é o ícone PARA tema escuro: barras claras. Sobre esta pílula o `-claro` sumiria. */ #main .elev-hero-assinatura::before { content: ""; display: block; flex: 0 0 1.15em; width: 1.15em; height: 1.15em; position: relative; top: -.08em; background: url("/menopausa/brand/icone-clinic-escuro.png") center / contain no-repeat; } /* NO CELULAR O TIPO CEDE DOIS DEGRAUS, e é o comprimento que obriga. O selo do Body Recode tem 41 caracteres e cabe em 11px; este tem 47 ("ELEV CLINIC • MENOPAUSE RECODE • SAÚDE HORMONAL"), que em 11px com .06em mediria ~305px — mais que os ~300 disponíveis num aparelho de 360px depois das margens, do ícone e do respiro da pílula, e quebraria em duas linhas. Em 10px com .04em cai para ~258px e entra com folga. */ @media (max-width: 767.98px) { #main .elev-hero-assinatura { margin-bottom: 16px; padding: 6px 11px 6px 9px; font-size: 10px; letter-spacing: .04em; gap: .5em; } } /* ── OS BOTÕES DO HERO ─────────────────────────────────────────────────── O template põe dois lado a lado, e ambos apontavam para páginas do Latos que não existem aqui. Ficou um só, o da casa, montado pelo navigation.js dentro deste mesmo grupo. Os originais saem por CSS e continuam no DOM: removê-los faria o React hidratar contra uma árvore diferente. */ #main [data-framer-name^="Button Primary"], #main [data-framer-name^="Button Secondary"] { display: none !important; } /* ── OS DOIS BOTÕES MORTOS DO TEMPLATE SAEM DA FILA ────────────────────── O grupo "Buttons" do hero trazia dois botões do Latos, para ./contact e ./about — páginas que não existem aqui. O nosso entrou ao lado deles, mas eles NUNCA saíram: o link interno ficou com 0 de altura, então sumiram da vista, e o contêiner de cada um manteve os 65px de largura fixa do template. Somados aos dois espaçamentos de 12, são 154px de fila vazia empurrando o nosso botão para a direita — no celular ele acabava em x=171 enquanto o selo e o título começam em x=16. Por isso `display: none` e não `visibility: hidden` ou `opacity: 0`: nenhum dos dois tira o elemento da fila do flex, que é o problema aqui. O seletor é estrutural de propósito. `framer-1ucwrea-container` é hash de build: recapturar o template troca o nome e a regra deixaria de valer em silêncio. "Todo filho do grupo que não seja o nosso" continua verdadeiro em qualquer recaptura. */ #main [data-framer-name="Buttons"] > *:not(.elev-hero-cta) { display: none !important; } #main .elev-hero-cta { display: inline-block; visibility: hidden; } #main .elev-hero-cta[data-ready="true"] { visibility: visible; } /* ── SEM ITÁLICO ───────────────────────────────────────────────────────── O template grifa uma palavra por título em Playfair Italic. A clínica não usa itálico, e com a Playfair trocada pela Schibsted Grotesk — que não tem corte itálico — o que sobrava era oblíquo SINTÉTICO, inclinado por transformação do navegador. O destaque continua existindo pelo peso de tinta (título #3a3e46, palavra grifada #15171c). */ #main, #main *, #main .framer-text, #main .framer-text * { font-style: normal !important; } /* ── A ASSINATURA: "MENOPAUSE RECODE by ELEV" ──────────────────────────── Cópia fiel do Body Recode. As medidas saíram de previews/vitalo-original/brand/overrides.css (.elev-recode-*), e os tempos do fade, de brand/recode-intro.mjs — as duas páginas batem no mesmo compasso porque é literalmente o mesmo número. ⚠️ "by ELEV" FICA NA MESMA LINHA DO NOME. É um dentro do

, não um parágrafo abaixo: só a palavra "by" encolhe (.62em) e apaga (opacity .55), e "ELEV" segue no corpo do título. Quebrado em duas linhas vira legenda — foi o erro da primeira versão daqui. ⚠️ E NÃO É SÓ RESPIRO: É UM BLOCO QUE GRUDA. A seção tem 190svh e o bloco de dentro 100svh em `sticky` — o nome fica PARADO no meio da tela enquanto a rolagem corre por baixo. `svh` e não `vh` porque a barra do navegador no celular recolhe ao rolar: com `vh` o bloco cresceria no meio do movimento e o texto daria um salto. */ #main .elev-assinatura-secao { position: relative; width: 100%; height: 190svh; flex: none; overflow: visible; padding: 0; background: #fff; } #main .elev-assinatura-secao .elev-secao-interno { position: sticky; top: 0; height: 100svh; display: grid; /* `align-content`, NÃO `place-items`. No Body Recode o bloco grudado tem um filho só (o .elev-recode-inner) e `place-items` centra aquele um. Aqui o nome e a frase são dois itens de grade: com `place-items` cada um ganha sua faixa e a grade estica as duas até encher a tela, o que jogou a frase para longe do nome. `align-content` centra o CONJUNTO e deixa o espaçamento por conta da margem da frase — que é onde ele está definido, 24px no celular e 32px daí para cima. */ align-content: center; justify-items: center; max-width: none; padding: 0 24px; box-sizing: border-box; text-align: center; } #main .elev-assinatura-secao .elev-secao-titulo { width: 100%; max-width: 1100px; margin: 0 auto; color: #15171c; font-family: "Schibsted Grotesk", system-ui, sans-serif !important; font-weight: 500; /* O `min(3.4vw, 5svh)` é o que faz o nome caber deitado num celular: só a largura não basta, porque em paisagem sobra largura e falta altura. */ font-size: clamp(20px, min(3.4vw, 5svh), 46px); line-height: 1.15; letter-spacing: 0.07em; text-transform: uppercase; } #main .elev-assinatura-sig { white-space: nowrap; opacity: var(--v-sig, 0); } #main .elev-assinatura-by { font-size: 0.62em; opacity: 0.55; letter-spacing: 0; text-transform: lowercase; } /* A linha de definição sob o nome: mesma cor e mesma escala da do Body Recode. Sobe 24px enquanto aparece — o mesmo deslocamento de lá. */ #main .elev-assinatura-frase { margin: 24px auto 0; max-width: 24ch; color: #71767f; font-family: "Geist", "Geist Placeholder", system-ui, sans-serif; font-size: clamp(14px, min(1.5vw, 2.2svh), 19px); line-height: 1.45; text-wrap: balance; opacity: var(--v-frase, 0); transform: translateY(calc((1 - var(--v-frase, 0)) * 24px)); will-change: opacity, transform; } @media (min-width: 768px) { #main .elev-assinatura-secao .elev-secao-interno { padding-inline: 32px; } #main .elev-assinatura-frase { margin-top: 32px; max-width: none; white-space: nowrap; } } /* Quem pediu menos movimento recebe a seção inteira parada e visível: uma tela só, sem grudar, com os dois textos já no lugar. */ @media (prefers-reduced-motion: reduce) { #main .elev-assinatura-secao { height: 100svh; } #main .elev-assinatura-secao .elev-secao-interno { position: relative; } #main .elev-assinatura-sig { opacity: 1; } #main .elev-assinatura-frase { opacity: 1; transform: none; } } /* ── AS FRASES DE IMPACTO, NA TELA CINZA ───────────────────────────────── A seção "Problem" do template vinha branca e com o cinza de corpo no texto. Pedido em 19/09: fundo cinza, texto preto. As duas cores são as do Body Recode, não escolhidas aqui: #e8e9eb é o fundo da `.elev-recode-gray` e #15171c é a tinta cheia do site. Assim a tela cinza da menopausa e a do emagrecimento são a mesma tela. A cor do texto sai pela VARIÁVEL do Framer além do `color`: o valor chega a estes parágrafos por estilo inline, e só `color` perderia a disputa — é a mesma armadilha anotada na regra de #626770 lá em cima. */ #main section[data-framer-name="Problem"] { background: #e8e9eb; } #main section[data-framer-name="Problem"] p.framer-text { --framer-text-color: #15171c !important; color: #15171c !important; } /* ── A ENTRADA DO CABEÇALHO DE SEÇÃO ───────────────────────────────────── Selo, título e linha de apoio sobem e acendem quando a seção chega à tela, em cascata de 90ms. Quem liga é o IntersectionObserver no navigation.tsx, que põe `.elev-entrou` uma vez e larga o elemento — não há nada preso ao scroll aqui, e por isso nada desfaz ao rolar de volta. A curva é a de saída do Body Recode (.22,1,.36,1): parte rápido e assenta devagar, que é o que faz o movimento ler como chegada e não como deslize. ⚠️ O `!important` NÃO É EXCESSO DE ZELO. Estes três já vêm com um "appear effect" do Framer, que escreve `opacity` e `transform` INLINE no elemento — e inline ganha de classe. Sem `!important` a regra daqui não encosta no que está na tela. E o appear do Framer não resolve o pedido: ele dispara no CARREGAMENTO, e esta é a terceira seção da página. Quando a pessoa rola até aqui, a animação terminou faz tempo e o cabeçalho já está aceso — que é exatamente o que ele descreveu ao pedir a entrada. Quem liga a classe é o JS, não o HTML: se o script falhar, `.elev-entra` nunca é posta e o cabeçalho fica visível, em vez de sumir para sempre. */ #main .elev-entra { opacity: 0 !important; transform: translateY(18px) !important; transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--atraso, 0s), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--atraso, 0s); will-change: opacity, transform; } #main .elev-entra.elev-entrou { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { #main .elev-entra { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── OS CARTÕES DE SINTOMA: RELEVO E CONVITE PARA ABRIR ────────────────── Dois pedidos de 19/09 sobre a mesma peça. 1. GRADIENTE, NÃO COR CHAPADA. Vai por `background-image` de propósito: a cor chapada chega a estes cartões por ESTILO INLINE (`background-color: var(--token-…)`), e disputar `background-color` com inline exigiria `!important`. Um gradiente é imagem, pinta por cima da cor e não disputa nada — o inline continua lá, inofensivo, como fundo de reserva enquanto a imagem não resolve. O aberto é mais claro que os fechados, e isso é hierarquia, não enfeite: numa fileira de quatro caixas do mesmo tom, qual está aberta só se lê pela altura. Com o aberto mais claro, lê-se de relance. 2. O CONVITE PARA CLICAR. Antes não havia nenhum: o cursor virava pointer, e só — no celular nem isso existe. Entra um chevron à direita do título, que gira 180° quando o cartão abre. Ele mora no ::after do PRÓPRIO h3, não do cartão, porque assim acompanha a linha do título sozinho: o título está centrado no cartão fechado e no topo do aberto, e um chevron preso ao cartão precisaria de dois `top` diferentes para não desencontrar. O SVG vai embutido em data URI — é um traço de 200 bytes, e uma requisição a mais para isso seria pior que o ganho. `padding-right` no título para o texto não passar por baixo do sinal, e `pointer-events: none` no ::after para o clique continuar sendo do cartão inteiro, não do ícone. */ /* ⚠️ SEM `transition` AQUI, E O ÂNGULO É QUASE HORIZONTAL. Os dois são conserto do mesmo estrago: a primeira versão desta regra atrapalhou a abertura do acordeão. `transition: transform` porque quem anima a abertura é o Framer Motion, escrevendo `transform` INLINE a cada quadro. Uma transição CSS na mesma propriedade e no mesmo elemento faz o navegador interpolar por cima de uma interpolação que já está correndo — o cartão fica borrachudo e chega atrasado ao lugar. `transition: background-image` era inútil de qualquer forma: imagem de fundo não interpola em CSS, a troca é seca. Só custava repintura. E 100deg em vez de 160deg porque o cartão CRESCE ao abrir (56 → 131 no celular). Num degradê inclinado, mudar a altura redesenha o degradê inteiro: ele escorre durante toda a animação, que é exatamente o tipo de coisa que se vê como falha. Quase horizontal, a altura quase não o afeta — e o cartão é largo (343 a 592px), então o degradê continua tendo espaço para ler. */ #main [data-framer-name^="Service Accordion"] { background-image: linear-gradient(100deg, #F4F5F7 0%, #ECEEF1 55%, #E3E6EA 100%); } #main [data-framer-name^="Service Accordion Opened"] { background-image: linear-gradient(100deg, #FAFBFC 0%, #F2F4F6 55%, #E9ECF0 100%); } #main [data-framer-name^="Service Accordion"] h3 { position: relative; padding-right: 34px; } #main [data-framer-name^="Service Accordion"] h3::after { content: ""; position: absolute; right: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315171c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px 18px no-repeat; opacity: 0.38; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; pointer-events: none; } #main [data-framer-name^="Service Accordion Opened"] h3::after { transform: rotate(180deg); opacity: 0.7; } /* ⚠️ NÃO REPOR O REALCE DE `:hover` AQUI. Havia um, e saiu: os cartões do acordeão trazem `onMouseEnter`/`onMouseLeave` nas próprias props do React — o ponteiro entrando é o GATILHO da troca, não um estado decorativo. Pintar `:hover` no mesmo elemento significa começar uma mudança de fundo no exato quadro em que o Framer desmonta o componente "Closed" e monta o "Opened": a transição morre pela metade e a troca pisca. Se um dia fizer falta um realce de ponteiro, ele tem que morar em algo que não seja trocado na abertura — o contêiner de fora, não o cartão. */ /* ── "NÃO É SÓ MENOPAUSA": O TÍTULO CEDE, O RÓTULO SOBE PARA A MARGEM ──── Três pedidos de 19/09 na seção Philosophy. 1. O RÓTULO ESTAVA 16px À DIREITA DO TÍTULO, e não por acaso: ele vem dentro de uma pílula do template (`padding: 8px 16px`) cujo fundo é o mesmo #f2f3f5 do cartão — invisível, mas empurrando. Zerado o padding e o fundo, o texto encosta na margem do h2. Em caixa alta ele vira eyebrow, então recebe a métrica de eyebrow da casa (12px, peso 500, tracking .08em) em vez dos 16px em negrito que tinha. A cor é #71767f e não o #a8a8a8 das outras seções: aquelas são brancas, esta é cinza, e #a8a8a8 sobre #f2f3f5 dá 2,2:1 — ilegível para 12px. 2. O TÍTULO CEDE UM DEGRAU: 60 → 46px no desktop, 48 → 34 no celular. A hierarquia se mantém porque o que a define é a RAZÃO para o corpo, não o tamanho absoluto: contra parágrafos de 18px, 46 ainda é 2,6× e 34 é 1,9×. Continua lendo como título de seção. 3. Um parágrafo de cada vez no celular — a regra vive no bloco de responsivo, mais abaixo. */ #main section[data-framer-name="Philosophy"] .framer-mWlI5 { padding: 0 !important; background: transparent !important; } #main section[data-framer-name="Philosophy"] .framer-mWlI5 p.framer-text { font-size: 12px !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: 0.08em !important; --framer-letter-spacing: 0.08em !important; text-transform: uppercase; color: #71767f !important; --framer-text-color: #71767f !important; } #main section[data-framer-name="Philosophy"] h2, #main section[data-framer-name="Philosophy"] h2 * { font-size: 46px !important; line-height: 55px !important; letter-spacing: -2.3px !important; --framer-letter-spacing: -2.3px !important; } /* ── "PARA QUEM É" TRAVA EM 100svh, EM TODA TELA ───────────────────────── A seção prende por uma tela inteira e os cartões entram enquanto a rolagem corre por baixo — o mesmo arranjo da assinatura e da seção "não é só menopausa", agora com cinco peças em vez de uma. 240svh: 100 para a tela parada e 140 de percurso, 28svh por cartão. ⚠️ O CONTEÚDO TEM QUE CABER, e cabe de formas diferentes. No desktop os cinco ficam à vista ao mesmo tempo (3 + 2) e entram em cascata. No CELULAR eles não cabem: medido, cinco cartões com etiqueta, título e texto somam ~1000px contra os ~520 que sobram de uma tela de 812 depois do cabeçalho. Por isso lá eles se revezam no MESMO lugar, um por vez — a mesma solução da seção de cima, que é o vocabulário que a página já usa para isto. Quem escreve o progresso é o navigation.tsx, em --c0..--c4. */ /* ── A TERAPIA HORMONAL TRAVA EM 100svh ────────────────────────────────── Quarta seção presa da página, mesmo desenho das outras: a
mede 320svh, o bloco de dentro 100, e os 220 que sobram são o percurso por onde os três painéis se revezam. 320 e não os 240 de "Para quem é" porque aqui cada peça é uma TELA DE TEXTO para ler, não um cartão que acende: 220svh divididos por três dão ~73svh por painel, que é tempo de leitura. Com 240 seriam 47, e o terceiro chegaria antes de o segundo ter sido lido. O cinza vive na
e não no componente porque o percurso inteiro precisa ser cinza — o componente só ocupa a tela grudada, e nos 220svh de rolagem o que aparece atrás dele é a seção. */ /* ⚠️ O RAIO VIVE NA
, E POR ISSO O COMPONENTE NÃO PODE PINTAR. A pedido dele, 24px de canto. Quem pinta o cinza é a seção, e o componente é transparente de propósito: se ele também pintasse, a caixa dele — quadrada e da largura inteira — cobriria o canto arredondado justamente no instante em que ele aparece, que é quando a tela grudada ainda está no topo da seção. E nada de `overflow: hidden` para "garantir" o corte: overflow cria contexto de rolagem e quebraria o `position: sticky` do bloco de dentro, que é o que prende a seção. Não há o que cortar de todo modo — o componente tem exatamente a largura da seção. */ #main #elev-terapia-hormonal { /* 440 e não os 320 de antes: a seção deixou de ser só três telas de texto e passou a carregar a coreografia inteira do GEL por baixo delas — a caixa gira, as abas abrem, o frasco sai, a caixa tomba, a tampa sobe. Em 320svh isso corria rápido demais para se ver o que está acontecendo, que é o ponto do objeto existir. */ height: 620svh; background: #e8e9eb; border-radius: 24px; } #main #elev-terapia-hormonal .elev-secao-interno { position: sticky; top: 0; height: 100svh; } /* Sem trava para quem pediu menos movimento: a seção volta a ter altura de conteúdo e os três painéis viram uma coluna, com os três acesos pelo `atualizarTerapia`. */ @media (prefers-reduced-motion: reduce) { #main #elev-terapia-hormonal { height: auto; } #main #elev-terapia-hormonal .elev-secao-interno { position: relative; height: auto; } } /* ── "METABOLISMO" TRAVA EM 100svh, MAS SÓ NO CELULAR ──────────────────── No desktop a fileira de cinco polaroides cabe numa tela e a seção é de altura normal. Abaixo de 810px elas não cabem — cinco cartas de ~300px somam 1500px —, então a seção vira percurso e as cartas se empilham, subindo uma por vez. Ver `atualizarMetabolismo` na navigation.tsx. 320svh: 100 param e os 220 restantes são o percurso das quatro que sobem, ~55svh cada. */ @media (max-width: 809px) { #main #elev-metabolismo { height: 320svh; } #main #elev-metabolismo .elev-secao-interno { position: sticky; top: 0; height: 100svh; } } /* Quem pediu menos movimento recebe a seção solta, com as cartas em coluna: o empilhamento é movimento, e sem ele a pilha esconderia quatro das cinco. */ @media (max-width: 809px) and (prefers-reduced-motion: reduce) { #main #elev-metabolismo { height: auto; } #main #elev-metabolismo .elev-secao-interno { position: relative; height: auto; } } /* ── "OBJETIVOS" TRAVA EM 100svh ───────────────────────────────────────── Quinta seção presa da página. 500svh: o bloco de dentro ocupa 100 e os 400 que sobram são o percurso das oito máscaras, 50svh por imagem — que é o tempo de ler uma frase curta antes de a próxima cobrir. O componente fecha a própria altura em 100svh e desenha o recorte; aqui só se define quanto percurso existe e quem gruda. */ #main #elev-objetivos { height: 500svh; } #main #elev-objetivos .elev-secao-interno { position: sticky; top: 0; height: 100svh; } @media (prefers-reduced-motion: reduce) { #main #elev-objetivos { height: auto; } #main #elev-objetivos .elev-secao-interno { position: relative; height: auto; } } #main #elev-para-quem-e { height: 240svh; } #main #elev-para-quem-e .elev-secao-interno { position: sticky; top: 0; height: 100svh; } /* Quem pediu menos movimento recebe a seção parada, com altura de conteúdo e os cinco cartões visíveis de uma vez. */ @media (prefers-reduced-motion: reduce) { #main #elev-para-quem-e { height: auto; } #main #elev-para-quem-e .elev-secao-interno { position: relative; height: auto; } } /* ── "O TRATAMENTO" TRAVA EM 100svh ────────────────────────────────────── Terceira seção presa da página, e pelo mesmo desenho das outras: a seção mede 200svh, o bloco de dentro 100, e o que sobra é percurso. 200 e não 240 como a de "Para quem é" porque aqui não há cinco peças entrando em sequência — o que vai correr neste percurso é a animação do objeto no centro, que precisa de menos caminho. A altura do conteúdo é o que decide se isto pode existir: medido antes de travar, para saber se os dez recursos cabem numa tela. */ /* ⚠️ O PERCURSO CAIU DE 200svh PARA 100. Com a lista de texto, o que ia correr no trecho grudado era a animação de um objeto que não existe mais: o leque se abre ao PONTEIRO, não à rolagem. Manter 100svh de percurso vazio faria a página parar numa tela que já mostrou tudo. A seção continua medindo uma tela — o componente fecha a própria altura em 100svh —, só não prende mais. */ #main #elev-o-que-entra { height: auto; } @media (prefers-reduced-motion: reduce) { #main #elev-o-que-entra { height: auto; } } /* ── O NÚMERO DA ETAPA VIRA MARCA D'ÁGUA ───────────────────────────────── Pedido em 19/09: cartões mais baixos, e o número grande atrás do texto, encostado à esquerda. O número saía no fluxo, numa linha própria de 42px mais 16 de vão — 58 dos 178px de altura do cartão eram só ele. Tirando-o do fluxo, o cartão passa a medir o que o texto pede: título, descrição e o respiro. ⚠️ SELETORES ESTRUTURAIS, não as classes. Os quatro cartões têm classes de hash diferentes entre si (`framer-1nmmppn` num, outra no vizinho) e o quarto é um clone, então nomear qualquer uma delas pegaria um cartão e deixaria os outros três. "Primeiro filho" e "último filho" valem para os quatro e sobrevivem a uma recaptura do template. ⚠️ E O `:not([data-framer-name="Steps"])` VAI EM TODAS AS REGRAS, não só na primeira. `^="Step"` casa com "Steps" — o contêiner dos quatro — e o primeiro filho DELE é o cartão 01 inteiro. Sem o `:not`, a regra do número pegava todos os h3 daquele cartão: título e descrição saíam em 92px de marca d\'água, o cartão inchava para 483px e a fileira se sobrepunha. Medido. ⚠️ O TAMANHO É px, E NÃO `cqh`. A primeira versão pôs `container-type: size` no cartão para medir o número em `88cqh` — a altura do próprio cartão. Isso DERRUBOU a seção: `container-type: size` faz o elemento perder a altura intrínseca do conteúdo, os quatro cartões colapsaram para 40px, o texto vazou por cima do vizinho e o `cqh` virou 0, então a fonte foi a zero junto. Medido. Com px o número não acompanha o cartão se a copy crescer, e é um preço que se paga: 92px é grande o bastante para ocupar quase toda a altura do cartão como ele está hoje, e as quatro descrições têm duas ou três linhas — nenhuma vai estourar isso sozinha. */ #main section[data-framer-name="Process"] [data-framer-name^="Step"]:not([data-framer-name="Steps"]) { position: relative; padding: 20px 22px !important; gap: 0 !important; } /* `inset: 0` com flex, e não `top: 50%` com `translateY(-50%)`. O segundo depende de um `transform` que o Framer também escreve neste nó, e o dele ganha: o número descia e era cortado pela base do cartão. Uma caixa do tamanho do cartão centrando o próprio conteúdo não disputa propriedade nenhuma. */ #main section[data-framer-name="Process"] [data-framer-name^="Step"]:not([data-framer-name="Steps"]) > div:first-child { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; padding-left: 12px; pointer-events: none; z-index: 0; } #main section[data-framer-name="Process"] [data-framer-name^="Step"]:not([data-framer-name="Steps"]) > div:first-child h3 { /* 104px contra os 124 do cartão mais baixo: "quase toda a altura", como ele pediu, com uma folga que impede o número de encostar nas bordas arredondadas. */ font-size: 104px !important; --framer-font-size: 104px !important; line-height: 1 !important; --framer-line-height: 1 !important; font-weight: 500 !important; letter-spacing: -0.04em !important; --framer-letter-spacing: -0.04em !important; /* Tinta cheia a 8%: o bastante para a marca existir contra o degradê claro do cartão, pouco o bastante para o texto passar por cima dela sem perder contraste. Medido contra #EDEEF0, o mais claro do degradê. */ color: rgba(21, 23, 28, .08) !important; --framer-text-color: rgba(21, 23, 28, .08) !important; /* ⚠️ `text-align` E `align-self`, os dois. O `justify-content` do invólucro posiciona a CAIXA do h3, mas o template dá a ela largura cheia e `text-align: center` — então a caixa ia para a esquerda e o número continuava no meio dela. E `align-self` porque o h3 herdava altura cheia: com o texto no topo da caixa, o número encostava na borda de cima (folga 0 em cima, 42 embaixo, medido). */ /* ⚠️ `margin: auto auto auto 0` É O QUE POSICIONA, e não `justify-content`, `align-self` nem `text-align` — os três foram tentados e nenhum moveu o número. A explicação está na ordem do flexbox: margens `auto` absorvem o espaço livre ANTES de o `justify-content` ser consultado. Mandam por definição da especificação, não por especificidade de seletor, então `!important` nos outros não adiantaria nunca. Lendo as quatro partes: `auto` em cima e embaixo centra na vertical, `auto` à direita empurra tudo para a esquerda, `0` à esquerda encosta na margem do invólucro. Uma declaração resolve os dois eixos. Medido: de (x=131, topo=0) para (x=12, topo=21, base=21). */ width: auto !important; margin: auto auto auto 0 !important; text-align: left !important; } /* O texto sobe para cima da marca. `position: relative` sem deslocamento existe só para criar o contexto de empilhamento. */ #main section[data-framer-name="Process"] [data-framer-name^="Step"]:not([data-framer-name="Steps"]) > div:last-child { position: relative; z-index: 1; } /* Os cartões ficaram mais baixos e o vão de 12px, que servia a cartões de 178px, passou a apertar: quanto menor a peça, mais o espaço entre elas precisa PROPORCIONALMENTE. 22px devolve o respiro sem a fileira crescer de volta ao que era. */ #main section[data-framer-name="Process"] [data-framer-name="Steps"] { gap: 22px !important; } /* ── AS SEÇÕES QUE NASCERAM AQUI ───────────────────────────────────────── Brancas e só com o texto, como combinado: elas existem para a página ficar completa e serem desenhadas uma a uma depois. A tipografia já é a da casa — Schibsted no título, Geist no corpo, a mesma escala do resto da página — para que a leitura do conjunto faça sentido desde já. `max-width` em `ch` e não em pixel: a medida que importa numa coluna de texto é quantos CARACTERES cabem na linha, e 62 é o intervalo em que o olho acha a linha seguinte sem esforço. */ #main .elev-secao { width: 100%; padding: 96px 24px; background: #ffffff; } /* ── A SEÇÃO QUE É UM COMPONENTE ───────────────────────────────────────── Quando uma das seções novas vira um componente React (a primeira é a "Nossa filosofia", com o about-12 do React Bits adaptado), o invólucro precisa sair da frente: o `.elev-secao-interno` existe para dar margem, teto de largura e respiro às seções que são só texto, e o componente já traz os três dentro da própria shadow root. Deixar os dois somaria padding com padding e estreitaria a grade de duas colunas. ⚠️ E ESTE BLOCO PRECISA VIR DEPOIS DE `.elev-secao`. Ele nasceu ACIMA dela, e o `padding: 0` daqui nunca valeu nada: as duas regras têm a mesma especificidade, então a última do arquivo ganha, e `.elev-secao` repunha os 96px/24px. Medido em 19/09 — a seção escura aparecia com 24px de branco de cada lado. Por ordem e não por `!important`: a regra seguinte nesta folha ainda precisa poder ajustar o padding de uma seção específica, e `!important` tiraria isso de quem vier depois. O `visibility` segue a mesma trava da barra e do rodapé: só aparece quando a folha do shadow root terminou de carregar. Sem ela, o bloco pisca sem estilo por um quadro — e aqui isso seria um parágrafo gigante em Times New Roman. */ #main .elev-secao-componente { padding: 0; } #main .elev-secao-componente .elev-secao-interno { max-width: none; padding: 0; margin: 0; } #main .elev-secao-componente .elev-secao-interno > div { visibility: hidden; } #main .elev-secao-componente .elev-secao-interno > div[data-ready="true"] { visibility: visible; } #main .elev-secao-interno { max-width: 1200px; margin: 0 auto; } #main .elev-secao-rotulo { margin: 0 0 20px; font-family: "Geist", sans-serif; font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: #a8a8a8; } #main .elev-secao-titulo { margin: 0; max-width: 20ch; font-family: "Schibsted Grotesk", sans-serif; font-size: 60px; font-weight: 500; line-height: 1.06; letter-spacing: -.022em; color: #3a3e46; text-wrap: balance; } /* O grifo é tinta cheia contra o título suave — o mesmo contraste que substituiu a terracota do template no resto da página. */ #main .elev-secao-grifo { color: #15171c; } #main .elev-secao-texto { margin: 28px 0 0; max-width: 62ch; font-family: "Geist", sans-serif; font-size: 18px; font-weight: 400; line-height: 1.55; color: #626770; text-wrap: pretty; } /* A mensagem central de uma seção, quando ela existe para dizer UMA coisa. O filete à esquerda faz o trabalho das aspas sem usar aspas. */ /* Sem fio à esquerda: ele pediu a barra fora em 19/09. O destaque se distingue por corpo e peso, que já bastam — e fio vertical aqui seria contorno com outro nome, que é o que ele não quer em lugar nenhum. Com o fio, o recuo de 20px também perde a razão de existir. */ #main .elev-secao-destaque { margin: 32px 0 0; padding: 4px 0; max-width: 54ch; font-family: "Schibsted Grotesk", sans-serif; font-size: 24px; font-weight: 500; line-height: 1.34; letter-spacing: -.015em; color: #15171c; text-wrap: pretty; } /* A lista em duas colunas a partir do tablet: itens curtos numa coluna só deixam metade da tela vazia à direita. `column-count` e não grid porque a quantidade de itens varia de uma seção para outra. */ #main .elev-secao-lista { margin: 36px 0 0; padding: 0; list-style: none; column-gap: 48px; } #main .elev-secao-lista li { position: relative; margin: 0 0 14px; padding-left: 22px; max-width: 46ch; font-family: "Geist", sans-serif; font-size: 17px; line-height: 1.5; color: #3a3e46; break-inside: avoid; } #main .elev-secao-lista li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: #15171c; } /* OS PILARES são vocabulário, não enumeração: palavras curtas que a pessoa lê de relance para entender a amplitude do tratamento. Por isso grade de fichas e não lista com marcador — o marcador sugere sequência, e aqui não há ordem nenhuma entre eles. */ #main .elev-secao-pilares { display: flex; flex-wrap: wrap; gap: 10px; margin: 36px 0 0; padding: 0; list-style: none; } #main .elev-secao-pilares li { padding: 12px 20px; border-radius: 999px; background: linear-gradient(155deg, #EDEEF0 0%, #E2E4E8 58%, #D9DDE3 100%); /* Mesma correção dos cartões do processo: a camada do meio, sem deslocamento, é o que faz a sombra envolver a pílula em vez de aparecer só embaixo. Alcance lateral máximo de 5px. */ box-shadow: 0 1px 2px rgba(21, 23, 28, .05), 0 0 14px -2px rgba(21, 23, 28, .09), 0 8px 18px -8px rgba(21, 23, 28, .12); font-family: "Geist", sans-serif; font-size: 16px; font-weight: 500; line-height: 1.3; color: #15171c; } #main .elev-secao-botao { display: inline-block; margin: 36px 0 0; visibility: hidden; } #main .elev-secao-botao[data-ready="true"] { visibility: visible; } /* O FECHO DA PÁGINA é o único que centra: ele não está explicando nada, está fazendo um convite, e o texto centrado é o que separa um fim de uma seção a mais. O título ocupa a largura inteira porque a segunda metade dele é uma frase, não uma palavra grifada. */ /* No FAQ fechado, o texto da resposta pode continuar em uma camada transparente no celular. Ele não pode capturar o toque da pergunta. */ #main section[data-framer-name="FAQ"] [data-framer-name="Close"] .framer-dm8kjm { pointer-events: none; } #main #elev-cta-final { padding: 120px 24px; } #main #elev-cta-final .elev-secao-interno { text-align: center; max-width: 880px; } #main #elev-cta-final .elev-secao-titulo { max-width: none; margin-inline: auto; font-size: 44px; line-height: 1.12; } #main #elev-cta-final .elev-secao-botao { --cta-h: 44px; --cta-fs: 13px; --cta-pl: 18px; --cta-inset: 4px; --cta-arrow: 16px; } #main #elev-cta-final .elev-secao-grifo { display: block; margin-top: .18em; } /* ── "POR QUE TRATAR NA ELEV" CENTRA, E OS MARCADORES VIRAM ✓ ────────── "troque as bolinhas pelo sinal de certo em verde igual esta na tabela comparativa / deixe tudo aqui centralizado ao meio" (21/09/2026). ⚠️ O `text-align` ATRAVESSA SHADOW ROOT POR HERANÇA. Centrar a seção centraria junto a tabela comparativa que mora no apêndice — cabeçalho, células e legenda, tudo. Por isso o host do apêndice devolve `left` logo abaixo: é ele que barra a herança na porta da shadow root. A COLUNA DUPLA SAI AQUI. Com `column-count: 2` e texto centrado, cada item se centra dentro da SUA coluna e o que se vê são duas pilhas centradas, não uma coisa centrada. Oito linhas curtas numa coluna só custam pouca altura e têm um eixo visível, que é o que ele pediu. */ #main #elev-por-que-elev .elev-secao-interno { text-align: center; } #main #elev-por-que-elev .elev-secao-titulo { max-width: 22ch; margin-inline: auto; } #main #elev-por-que-elev .elev-secao-texto { margin-inline: auto; } #main #elev-por-que-elev .elev-secao-lista { column-count: 1; max-width: 640px; margin-inline: auto; } #main #elev-por-que-elev .elev-secao-lista li { padding-left: 0; max-width: none; } /* ── O ✓ NO LUGAR DA BOLINHA ────────────────────────────────────────── É o mesmo desenho do `Check` do lucide que a tabela usa — o path `M20 6 9 17l-5-5` num viewBox de 24, traço 2,5 e pontas redondas — e o mesmo verde, #4dcc85. Ele entra como IMAGEM DE FUNDO e não como `mask`: a máscara pediria o par `-webkit-mask`/`mask` e um valor a mais para a cor, e aqui a cor é uma só. O SVG já nasce verde. ⚠️ SAI DO `position: absolute`. O marcador antigo era um ponto solto na margem esquerda, o que só funciona com texto alinhado à esquerda: num item centrado ele ficaria pendurado longe da frase. Como `inline-block` ele anda junto com a linha, e o par ✓+frase é que se centra. */ #main #elev-por-que-elev .elev-secao-lista li::before { position: static; display: inline-block; vertical-align: -2px; width: 17px; height: 17px; margin-right: 9px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234dcc85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; } /* A tabela comparativa NÃO herda a centragem — ver o aviso acima. */ #main #elev-por-que-elev .elev-secao-apendice { text-align: left; } /* O bloco de captura de e-mail do template sai: o convite da página agora é a seção de fecho, e dois pedidos diferentes no mesmo lugar dividem a atenção de quem chegou até ali. */ #main .framer-cvd3dg, #main .framer-cvd3dg ~ * { display: none !important; } @media (min-width: 810px) { #main .elev-secao-lista { column-count: 2; } } @media (max-width: 809px) { #main .elev-secao { padding: 56px 16px; } /* E aqui pelo mesmo motivo do bloco lá em cima: a regra de celular de `.elev-secao` vem DEPOIS daquela, então repunha os 16px laterais e a seção escura voltava a ter uma tira branca de cada lado. Medido: o fundo ficava em x=16 com 343 de largura numa tela de 375. */ #main .elev-secao-componente { padding: 0; } #main .elev-secao-titulo { font-size: 32px; line-height: 1.1; max-width: none; } #main .elev-secao-texto { font-size: 16px; margin-top: 20px; } #main .elev-secao-destaque { font-size: 19px; margin-top: 24px; } #main .elev-secao-lista { margin-top: 26px; } #main .elev-secao-lista li { font-size: 15px; max-width: none; } #main .elev-secao-pilares { margin-top: 26px; gap: 8px; } #main .elev-secao-pilares li { font-size: 14px; padding: 10px 16px; } #main .elev-secao-botao { margin-top: 28px; } #main #elev-cta-final { padding: 72px 16px; } #main #elev-cta-final .elev-secao-titulo { font-size: 28px; } } /* ── A COLUNA DE CARTÕES ACOMPANHA A ALTURA DA IMAGEM ──────────────────── Medido: a pilha dos quatro cartões tinha 445px e a imagem ao lado 480 — 35px de descompasso, que deixavam a coluna da esquerda terminando antes e a fileira desalinhada no pé. A causa é o contêiner das duas colunas, que vem com `align-items: flex-start`: cada coluna fica com a própria altura em vez de acompanhar a mais alta. `stretch` resolve isso, e o `space-between` na pilha reparte os 35px entre os vãos — assim os cartões mantêm o tamanho que têm e só respiram um pouco mais, em vez de esticarem e desproporcionar o que está fechado contra o que está aberto. Só no desktop: abaixo de 810px as duas colunas empilham e não há altura para igualar. */ @media (min-width: 810px) { #main section[data-framer-name="Services"] .framer-1kvcuwg { align-items: stretch !important; } #main section[data-framer-name="Services"] .framer-1l174ek { /* ⚠️ `height: auto` É O QUE FAZ O `stretch` DO PAI VALER. O template declara `height: min-content` nesta pilha, e min-content trava a altura no conteúdo — o pai pode pedir `stretch` à vontade que o filho não estica. Foi por isso que a primeira tentativa não mudou nada: as duas regras estavam aplicadas e medidas (pai em stretch, pilha em space-between), e a altura seguia 444,78 contra 480. */ height: auto !important; justify-content: space-between !important; } } /* ── A SEÇÃO DE SINTOMAS NO CELULAR ────────────────────────────────────── Medida em 390×844: 1501px de altura, quase duas telas e meia para quatro itens. O culpado não era o número de itens — era o tipo, que veio em corpo de desktop: título da seção ....... 48px, 230px de altura, três linhas título de cada item ... 32px/41.6px, duas linhas cada vão entre blocos ...... 50px respiro da seção ...... 80px em cima e embaixo recheio do cartão ..... 24px Em 19px o título do item cabe numa linha só, que é o que mais encurta a seção. O resto acompanha em proporção. No desktop nada muda. Os quatro itens ficam todos ABERTOS aqui, como o template já faz: no celular um acordeão obrigaria quatro toques para ler o que é a lista inteira, e a lista é curta. */ @media (max-width: 809px) { #main section[data-framer-name="Services"] h2, #main section[data-framer-name="Services"] h2 * { font-size: 32px !important; --framer-font-size: 32px !important; line-height: 34px !important; --framer-line-height: 34px !important; letter-spacing: -0.7px !important; --framer-letter-spacing: -0.7px !important; } #main section[data-framer-name="Services"] h3, #main section[data-framer-name="Services"] h3 * { font-size: 19px !important; --framer-font-size: 19px !important; line-height: 24px !important; --framer-line-height: 24px !important; letter-spacing: -0.3px !important; --framer-letter-spacing: -0.3px !important; } #main section[data-framer-name="Services"] .framer-1pra437 { gap: 28px !important; padding: 48px 16px !important; } #main section[data-framer-name="Services"] .framer-1e2a9q9 { padding: 16px !important; gap: 8px !important; } /* ── A SEÇÃO TRAVA EM 100svh E AS FRASES TROCAM DENTRO DELA ──────────── A versão anterior deixava o bloco rolar e trocava as frases conforme ele cruzava a tela — o texto mudava enquanto se movia, o que divide a atenção. Agora o cartão GRUDA por uma tela inteira e só as frases se mexem, que é o mesmo arranjo da assinatura e do Body Recode. 240svh na seção: 100 para o cartão parado e 140 de percurso, ou seja 35svh para cada uma das quatro frases. `svh` e não `vh` pelo motivo de sempre — a barra do navegador recolhe ao rolar e com `vh` a tela cresceria no meio da troca. A IMAGEM É QUEM CEDE. Ela vinha com 500px fixos; o texto ocupa 349 e as margens 64, então em 812 sobrariam 399 — mas num aparelho de 667 sobrariam 254, e a altura fixa estouraria a tela. Virou `flex: 1` com `min-height: 0`: fica com o que sobrar, seja qual for a tela. O `min-height: 0` não é enfeite — sem ele o item de flex se recusa a encolher abaixo do conteúdo e o estouro volta. O texto (`Right`) vai a `flex: 0 0 auto` pelo lado oposto: ele é a parte que não pode encolher, senão a frase corta. */ #main section[data-framer-name="Philosophy"] { height: 240svh; } #main section[data-framer-name="Philosophy"] .framer-4ki2e { position: sticky; top: 0; height: 100svh; padding: 24px 16px !important; gap: 0 !important; box-sizing: border-box; } #main section[data-framer-name="Philosophy"] .framer-1y1ec8f { height: 100% !important; box-sizing: border-box; } #main section[data-framer-name="Philosophy"] .framer-1x0n69d { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; } #main section[data-framer-name="Philosophy"] .framer-9n2bas { flex: 0 0 auto !important; } /* ── UM PARÁGRAFO DE CADA VEZ ────────────────────────────────────────── Os quatro parágrafos empilhados somavam 514px — um paredão de texto. Agora eles dividem a MESMA célula de grade: a caixa passa a ter a altura do maior (151px) e não a soma dos quatro, e quem escolhe qual está à vista é a rolagem que corre enquanto o cartão está preso. `grid-area: 1 / 1` em vez de `position: absolute` de propósito. O absoluto exigiria uma altura fixa no palco — um número mágico que mente no dia em que a copy mudar. Empilhados na mesma célula, a grade mede o maior sozinha e continua certa depois de qualquer reescrita. As opacidades vêm de --p0..--p3, escritas pelo navigation.tsx a cada quadro. Sem `transition`, pelo mesmo motivo da assinatura: quem manda no tempo é o dedo, e uma transição faria a troca continuar sozinha depois que a rolagem parasse. Os padrões do `var()` importam: com o JS fora do ar o primeiro parágrafo fica visível e os outros não — some conteúdo, mas a seção continua legível, em vez de virar uma caixa vazia. */ #main section[data-framer-name="Philosophy"] .framer-1ao3yec { display: grid !important; } #main section[data-framer-name="Philosophy"] .framer-1ao3yec > p { grid-area: 1 / 1; margin: 0; will-change: opacity, transform; } #main section[data-framer-name="Philosophy"] .framer-1ao3yec > p:nth-child(1) { opacity: var(--p0, 1); transform: translateY(calc((1 - var(--p0, 1)) * 12px)); } #main section[data-framer-name="Philosophy"] .framer-1ao3yec > p:nth-child(2) { opacity: var(--p1, 0); transform: translateY(calc((1 - var(--p1, 0)) * 12px)); } #main section[data-framer-name="Philosophy"] .framer-1ao3yec > p:nth-child(3) { opacity: var(--p2, 0); transform: translateY(calc((1 - var(--p2, 0)) * 12px)); } #main section[data-framer-name="Philosophy"] .framer-1ao3yec > p:nth-child(4) { opacity: var(--p3, 0); transform: translateY(calc((1 - var(--p3, 0)) * 12px)); } #main section[data-framer-name="Philosophy"] h2, #main section[data-framer-name="Philosophy"] h2 * { font-size: 34px !important; line-height: 41px !important; letter-spacing: -1.7px !important; --framer-letter-spacing: -1.7px !important; } /* Quem pediu menos movimento recebe a seção inteira parada: nada gruda, a altura volta a ser a do conteúdo e os quatro parágrafos empilham visíveis, como antes de tudo isto. */ @media (prefers-reduced-motion: reduce) { #main section[data-framer-name="Philosophy"] { height: auto; } #main section[data-framer-name="Philosophy"] .framer-4ki2e { position: relative; height: auto; padding: 48px 16px !important; gap: 40px !important; } #main section[data-framer-name="Philosophy"] .framer-1y1ec8f { height: auto !important; } #main section[data-framer-name="Philosophy"] .framer-1x0n69d { flex: 0 0 auto !important; height: 500px !important; } #main section[data-framer-name="Philosophy"] .framer-1ao3yec { display: flex !important; } #main section[data-framer-name="Philosophy"] .framer-1ao3yec > p { opacity: 1 !important; transform: none !important; } } /* O TEXTO VAZAVA PELA DIREITA. O invólucro do parágrafo vem com `width: 352px` FIXO do template — medida do cartão no desktop. No celular o cartão tem 343px e 16px de padding de cada lado, ou seja 311px de vão: o parágrafo passava 41px por fora e o `overflow: clip` do cartão comia o fim de cada linha ("aumento da gord", "com m"). `max-width` e não `width`: a largura fixa continua declarada pelo template e seria reposta a cada recomposição do acordeão; o teto vence os dois casos sem depender de quem escreve por último. */ #main [data-framer-name^="Service Accordion"] .framer-116jlnf { max-width: 100% !important; } } /* ── A SEÇÃO DE PLANOS SAI ─────────────────────────────────────────────── Era a estrutura de `Pricing` do template, aproveitada para a etapa "o que pode fazer parte do tratamento". Não serviu: ela é feita para PREÇOS — as colunas têm cifra em corpo grande no meio ($89, $149), uma delas é destacada como plano recomendado, e cada uma termina em botão de compra. Numa página de tratamento médico isso lê como tabela de venda. Sai inteira, a pedido dele. A etapa 8 do roteiro volta para a fila das seções a construir do zero. Continua no DOM, escondida, e não removida do HTML: apagar nó faz o React do Framer hidratar contra uma árvore diferente da que renderiza. */ #main [data-framer-name="Main"] > section[data-framer-name="Pricing"] { display: none !important; } /* ── A SEÇÃO "COMO FUNCIONA" ───────────────────────────────────────────── A frase que atravessa o vídeo era #626770, a cor de corpo da página. Ela foi pensada para tinta sobre papel e aqui pousa sobre imagem em movimento: some no claro e briga no escuro. Branco cheio, com uma sombra baixa que não aparece como sombra — só garante a borda da letra quando um quadro claro passa por baixo. */ #main section[data-framer-name="Process"] .framer-styles-preset-h6w5wv { color: #ffffff !important; --framer-text-color: #ffffff !important; text-shadow: 0 1px 12px rgba(6, 7, 9, .45); } /* OS TRÊS CARTÕES DO MESMO TAMANHO. Eles vinham com alturas diferentes (198, 198 e 220px) porque o contêiner é flex com `align-items: flex-start`, e cada um crescia com o próprio texto. `stretch` iguala os três pelo mais alto — e é isso que faz uma fileira ler como fileira. O fundo era #f4f2ee chapado. Agora é um degradê que escurece na diagonal e puxa um leve verde no fim, o da casa: o bastante para os cartões se destacarem do branco da página sem virarem uma caixa cinza. */ #main section[data-framer-name="Process"] .framer-15jn47u { align-items: stretch !important; } #main section[data-framer-name="Process"] .framer-1m9ryt6, #main section[data-framer-name="Process"] .framer-14869qo, #main section[data-framer-name="Process"] .framer-ja4bl9 { height: auto !important; background: linear-gradient(155deg, #EDEEF0 0%, #E2E4E8 58%, #D9DDE3 100%) !important; /* SEM BORDA, COM SOMBRA — a pedido dele. A borda desenhava o contorno e o cartão ficava recortado contra o branco; a sombra dá a mesma separação por profundidade, que é como o resto da casa resolve (--shadow-md, em app/globals.css). Duas camadas e não uma: a de baixo, curta e mais opaca, assenta o cartão na página; a de cima, longa e diluída, é a que se lê como luz. Uma sombra só, esticada, vira uma mancha cinza embaixo do cartão. ⚠️ TRÊS CAMADAS AGORA, E NENHUMA PASSA DE 6px PARA OS LADOS. A versão anterior era `0 10px 28px` sem spread: deslocada 10px para baixo, ela aparecia embaixo e sumia nas laterais, o que se lê como sombra CORTADA — foi o que ele viu. E não dava para simplesmente alargá-la: medido no celular, o cartão ocupa 343 dos 375px da tela, sobram 16 de cada lado, e o `[data-framer-name="Main"]` tem `overflow: clip` na largura exata da janela. Qualquer sombra com alcance lateral acima de 16px seria recortada de verdade. Alcance lateral é `blur / 2 + spread`. As três somam no máximo 6px: 0 1px 2px → 1px assenta o cartão 0 0 20px -4px → 6px halo simétrico, o que faltava 0 12px 28px -10px → 4px profundidade, sem vazar A do meio é a que conserta a queixa: sem deslocamento vertical, ela envolve o cartão por igual em vez de empilhar tudo embaixo. */ border: 0 !important; box-shadow: 0 1px 2px rgba(21, 23, 28, .05), 0 0 20px -4px rgba(21, 23, 28, .10), 0 12px 28px -10px rgba(21, 23, 28, .16); } /* ── O LOGOTIPO DO TEMPLATE ────────────────────────────────────────────── O Latos assina a seção "Não é só menopausa" com a marca dele — uma de 100×40 no pé da coluna de texto, que passou despercebida porque não está na barra nem no rodapé, os dois lugares óbvios. O seletor pega qualquer nó chamado "Logo" dentro do #main, e não só aquele: o template usa o mesmo nome na barra (já escondida) e pode usá-lo de novo noutra seção. Esconder por NOME cobre os que ainda não vimos. Há um "© 2026 Latos" no rodapé do template, mas ele vive dentro do