/* ========================================================================== EMERALD WELLNESS — SISTEMA EDITORIAL Direção escolhida em 20/08/2026 para as LPs de tratamento. ASSINATURA: filete vertical numerado à esquerda de cada dobra, com o nome da seção girado na vertical. No mobile vira filete horizontal. RECUSA (o que este sistema não faz, e é o que o mantém fora do default): card · sombra · pílula · botão com contorno · canto arredondado · header com blur · grid simétrico de 3 colunas iguais · emoji · gradiente. Não herda base.css nem lp.css de propósito: aqueles carregam o esqueleto auditado com cinco clichês. ========================================================================== */ /* --- Fontes servidas do próprio domínio ----------------------------------- Antes vinham do fonts.googleapis.com, que bloqueava a renderização por ~400ms e só então iniciava o download em fonts.gstatic.com — dois domínios externos, dois handshakes, em série. Era a causa do CLS de 0,110 medido no celular: o H1 trocava de fonte a 1,3s, encolhia uma linha, e tudo abaixo dele subia 30px de uma vez. As duas famílias são VARIABLE: um arquivo cobre toda a faixa de peso. Foi isso que permitiu corrigir de graça dois defeitos antigos — o CSS pedia Epilogue 600 (botão, .indice__t, .coluna h3, .escolha__acao) e Fraunces itálico (.antetitulo), e nenhum dos dois vinha no . O navegador sintetizava os dois: negrito e itálico falsos. O itálico fica sem preload de propósito: o navegador não baixa uma face que a página não usa, então /reiki, que não tem antetítulo, não paga os 41 KB dele. Baixados do Google em 04/09/2026 — Epilogue v20, Fraunces v38, subset latin, que cobre todos os acentos do português. Por que font-display: block e não swap. Medido contra produção, 5 rodadas de cada sob CPU 4x e 4G lenta: swap CLS 0 · 0 · 0 · 0,110 · 0,110 FCP 1140ms ← intermitente block CLS 0,017 nas cinco FCP 836ms optional CLS 0 nas cinco FCP 876ms ← MAS o H1 saiu com 151px em vez de 121px: a Fraunces não foi aplicada em nenhuma das cinco. Zera o CLS desistindo da fonte. Com swap o período de bloqueio de 100ms expira antes de a fonte chegar sempre que o CDN entrega o CSS rápido, e aí a troca desloca a página inteira. Com block o texto espera a fonte — que vem com preload, da mesma origem —, aparece já na forma final e ainda pinta ANTES, porque não há segunda renderização. ⚠️ /assets/fonts tem cache de 1 ano immutable (ver vercel.json): trocar uma fonte exige RENOMEAR o arquivo, senão o visitante recorrente fica um ano com a versão antiga. -------------------------------------------------------------------------- */ @font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces-v38-latin.woff2') format('woff2'); font-weight: 300 400; font-style: normal; font-display: block; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces-v38-italic-latin.woff2') format('woff2'); font-weight: 300 400; font-style: italic; font-display: block; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Epilogue'; src: url('/assets/fonts/epilogue-v20-latin.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: block; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --papel: #FBFAF7; --papel-2: #F2F0E8; --tinta: #16150F; --suave: #5C594E; --filete: #D8D4C6; --verde: #0C743C; --verde-e: #084D28; --serif: Fraunces, Georgia, "Times New Roman", serif; --sans: Epilogue, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --max: 1280px; --gutter: 30px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg { display: block; max-width: 100%; } img { height: auto; } :focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; } .q { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- Cabeçalho ------------------------------------------------------------ Fixo no topo ao rolar, mas com fundo SÓLIDO e filete — nunca translúcido com desfoque, que é um dos clichês que este sistema recusa. -------------------------------------------------------------------------- */ .topo { position: sticky; top: 0; z-index: 50; background: var(--papel); border-bottom: 1px solid transparent; transition: border-color .2s ease, padding .2s ease; } /* O filete só aparece depois que a página sai do topo: no início ele dividiria o cabeçalho do conteúdo sem necessidade. */ .topo.is-preso { border-bottom-color: var(--filete); } .topo__in { display: flex; align-items: center; padding-block: 22px; transition: padding-block .2s ease; } /* Ao rolar, o cabeçalho encolhe: em tela pequena ele fica ocupando altura útil o tempo todo, e altura é o recurso mais escasso no celular. */ .topo.is-preso .topo__in { padding-block: 12px; } .topo.is-preso .logo { width: 118px; transition: width .2s ease; } .topo img { width: 146px; } /* --- Trilho: a assinatura do sistema -------------------------------------- Sem numeração de dobra: o filete e o nome da seção sozinhos já marcam o sistema, e o número dava à página cara de documento paginado. -------------------------------------------------------------------------- */ .trilho { display: flex; align-items: center; gap: 14px; padding-top: 8px; } .trilho__l { flex: 1; height: 1px; background: var(--filete); } .trilho__t { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--suave); } @media (min-width: 1040px) { .trilho { flex-direction: column; align-items: flex-start; height: var(--trilho-h, 520px); gap: 18px; overflow: hidden; } .trilho__l { width: 1px; height: auto; flex: 1; } .trilho__t { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .3em; } } /* --- Dobra 1 -------------------------------------------------------------- */ .dobra { display: grid; gap: 34px; } @media (min-width: 1040px) { .dobra { grid-template-columns: 46px minmax(0, 512px) minmax(0, 1fr); gap: 0; align-items: stretch; } } /* Alinhado ao topo: centralizar num bloco alto abre um vão morto acima. */ .texto { padding-block: 4px 40px; } @media (min-width: 1040px) { .texto { padding-left: 36px; padding-right: var(--gutter); padding-block: 4px 48px; } } .antetitulo { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.06rem; color: var(--verde); margin: 0 0 12px; } .pin { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; } .pin svg { width: 15px; height: 15px; color: var(--verde); flex: 0 0 auto; } .pin span { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--suave); } .pin b { color: var(--tinta); font-weight: 500; } .pin i { flex: 1; height: 1px; background: var(--filete); } h1 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 300; font-size: clamp(1.85rem, 1.5rem + 1vw, 2.35rem); line-height: 1.02; letter-spacing: -.025em; margin: 0 0 26px; } h1 .g { color: var(--verde); } .abre { font-size: 1.04rem; line-height: 1.75; color: var(--suave); margin: 0 0 34px; } .abre::first-line { color: var(--tinta); } /* --- Ações: um bloco sólido e um link sublinhado. Nunca sólido + contorno. - */ .acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 54px; padding: 15px 32px; background: var(--verde); color: #FFFFFF; font-size: .95rem; font-weight: 600; letter-spacing: .01em; /* entrelinha própria: a do corpo (1.65) inflava o botão em 10px, e o efeito dobra quando o rótulo quebra em duas linhas */ line-height: 1.25; text-wrap: balance; text-decoration: none; transition: background .18s ease; } /* No celular o rótulo longo da 2ª dobra quebrava e o botão ia a 86px contra 61px do da 1ª. Largura total resolve a quebra, dá alvo de toque maior e é o padrão esperado de CTA em tela pequena. */ @media (max-width: 640px) { .acoes .btn { width: 100%; padding-inline: 14px; gap: 9px; font-size: .88rem; } } .btn:hover { background: var(--verde-e); } .btn svg { width: 19px; height: 19px; flex: 0 0 auto; } .link { font-size: .92rem; color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--verde); padding-bottom: 3px; } .link:hover { color: var(--verde); } /* --- Imagem: coluna inteira, sangrando na borda --------------------------- */ .sala { margin: 0; } .sala img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; object-position: center 62%; } @media (min-width: 1040px) { /* A sangria puxa a foto até a borda da tela, mas precisa de teto: sem o max() ela cresce junto com o monitor — em 1920px chegava a 350px, e a imagem passava a dominar a dobra. Com o teto, a largura da foto fica praticamente constante entre 1280 e 2560px. */ /* Sem sangria: a foto respeita o mesmo recuo lateral do resto do conteúdo. A versão anterior a empurrava até a borda da tela com um cálculo que crescia junto com o monitor — em 1920px a foto ia a 1012px e dominava a dobra. Presa ao contêiner, a largura fica constante em qualquer tela a partir de 1280px. */ .sala img { min-height: 520px; } } /* --- Rodapé --------------------------------------------------------------- */ .rodape { border-top: 1px solid var(--filete); margin-top: 60px; } .rodape .q { padding-block: 40px 34px; } .rodape img { width: 138px; margin-bottom: 26px; } .rodape__grid { display: grid; gap: 22px; margin: 0 0 30px; } @media (min-width: 760px) { .rodape__grid { grid-template-columns: repeat(3, 1fr); gap: 30px; } } .rodape dt { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--suave); margin-bottom: 6px; } .rodape dd { margin: 0; font-size: .92rem; line-height: 1.6; } .rodape dd a { color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--verde); padding-bottom: 1px; } .rodape__legal { border-top: 1px solid var(--filete); padding-top: 20px; font-size: .78rem; color: var(--suave); margin: 0; } /* --- Botão flutuante de WhatsApp ----------------------------------------- Exceção consciente às recusas do sistema: círculo e sombra. Botão flutuante é convenção funcional reconhecida, e sem separação do fundo ele não lê como flutuante. Substitui a barra fixa que havia no rodapé mobile. -------------------------------------------------------------------------- */ .zap { position: fixed; right: var(--gutter); bottom: calc(var(--altura-cookies, 0px) + var(--gutter) + env(safe-area-inset-bottom)); z-index: 45; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: var(--verde); color: #FFFFFF; box-shadow: 0 6px 20px rgba(4, 39, 20, .22), 0 2px 6px rgba(4, 39, 20, .14); /* entra só depois que o CTA do topo sai da tela — ver wireZap() */ opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease, bottom .22s ease, background .18s ease, visibility .22s; } .zap.is-visivel { opacity: 1; visibility: visible; transform: none; } .zap svg { width: 30px; height: 30px; } .zap.is-visivel:hover { background: var(--verde-e); transform: translateY(-2px); } .zap.is-visivel:active { transform: none; } @media (prefers-reduced-motion: reduce) { .zap { transition: background .18s ease; } } /* Dois elementos fixos no rodapé se sobrepõem. Em vez de esconder o CTA enquanto o banner está aberto — o que deixava o celular sem chamada nenhuma — ele sobe pela altura do banner, publicada em --altura-cookies pelo consent.js. */ /* --- Consentimento -------------------------------------------------------- */ .cookies { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; background: var(--tinta); color: var(--papel); padding: 18px var(--gutter); font-size: .84rem; line-height: 1.5; } .cookies[hidden] { display: none; } .cookies__in { max-width: var(--max); margin-inline: auto; display: flex; flex-direction: column; gap: 14px; } @media (min-width: 900px) { .cookies__in { flex-direction: row; align-items: center; justify-content: space-between; } } .cookies p { margin: 0; max-width: 72ch; color: rgba(251, 250, 247, .82); } .cookies a { color: var(--papel); } .cookies__acoes { display: flex; gap: 12px; flex-wrap: wrap; } .cookies button { appearance: none; border: 0; cursor: pointer; padding: 11px 22px; font-family: var(--sans); font-size: .84rem; font-weight: 500; } .cookies .aceitar { background: var(--papel); color: var(--tinta); } .cookies .recusar { background: transparent; color: var(--papel); border-bottom: 1px solid var(--papel); padding-inline: 4px; } /* --- Dobra 2 ------------------------------------------------------------- Ritmo: a dobra 1 é três colunas com foto sangrando. Esta é duas colunas, sem imagem, sobre um tom de papel mais fundo. Nenhuma seção repete a forma da anterior — é o que impede a página de soar gerada. -------------------------------------------------------------------------- */ .faixa-papel { background: var(--papel-2); border-block: 1px solid var(--filete); } .dobra--texto { --trilho-h: 340px; padding-block: 56px; } @media (min-width: 1040px) { .dobra--texto { padding-block: 84px; } } .pergunta { } @media (min-width: 1040px) { .pergunta { padding-left: 36px; padding-right: var(--gutter); } } .argumento { } @media (min-width: 1040px) { .argumento { padding-left: 56px; padding-right: 0; max-width: 610px; } } h2 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 300; font-size: clamp(1.7rem, 1.4rem + 1vw, 2.25rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 22px; } .corpo > p { font-size: 1.04rem; line-height: 1.75; color: var(--suave); margin: 0 0 34px; } /* Prova: números em serifa entre filetes. É display editorial de dado, não cartão — cartão está na lista de recusas do sistema. */ .prova { display: flex; flex-wrap: wrap; gap: 8px 56px; border-block: 1px solid var(--filete); padding-block: 20px; margin: 0 0 34px; } .prova div { padding-block: 2px; } .prova b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 1.3rem + .7vw, 1.9rem); line-height: 1.1; letter-spacing: -.01em; } .prova span { display: block; font-size: .8rem; letter-spacing: .04em; color: var(--suave); } .prova .estrelas { display: inline; color: var(--verde); font-size: .72em; letter-spacing: 2px; vertical-align: .16em; } /* --- Dobra 3 ------------------------------------------------------------- Ritmo: a 1 é texto + foto lado a lado; a 2 é pergunta + argumento sobre papel fundo. Esta é vertical — abertura larga, faixa de fotos, índice. Os benefícios viram índice numerado com filetes, não cartões: cartão está na lista de recusas e retomar a numeração amarra com o trilho. -------------------------------------------------------------------------- */ .dobra--vertical { --trilho-h: 420px; padding-block: 56px; } @media (min-width: 1040px) { .dobra--vertical { grid-template-columns: 46px minmax(0, 1fr); padding-block: 88px; } } .bloco { } @media (min-width: 1040px) { .bloco { padding-left: 36px; padding-right: var(--gutter); } } .bloco h2 { max-width: 26ch; } .bloco > p { max-width: none; } /* Faixa de fotos: no desktop três colunas; no celular vira carrossel com encaixe, porque três colunas em 390px dariam 100px de largura por foto. */ .tira { display: flex; gap: 12px; margin: 0 0 44px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .tira::-webkit-scrollbar { display: none; } .tira figure { flex: 0 0 62%; margin: 0; scroll-snap-align: start; } .tira img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; } @media (min-width: 900px) { .tira { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; overflow: visible; } .tira figure { flex: none; } } .rotulo-lista { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--suave); margin: 0 0 6px; } .indice { list-style: none; margin: 0 0 40px; padding: 0; border-top: 1px solid var(--filete); } .indice li { display: grid; gap: 4px 24px; padding-block: 22px; border-bottom: 1px solid var(--filete); } @media (min-width: 900px) { .indice li { grid-template-columns: 46px minmax(0, 250px) minmax(0, 1fr); align-items: baseline; gap: 0 28px; } } .indice__n { font-family: var(--serif); font-size: .95rem; letter-spacing: .12em; color: var(--verde); } .indice__t { font-weight: 600; } .indice__d { color: var(--suave); } /* --- Dobra 4 ------------------------------------------------------------- Ritmo: quarta forma. 1 = texto + foto; 2 = pergunta + argumento sobre papel fundo; 3 = vertical com faixa de fotos; esta é composição de jornal, três colunas separadas por filete vertical. Sem cartão, sem fundo, sem canto — o filete faz a separação que a caixa faria. -------------------------------------------------------------------------- */ .dobra--colunas { --trilho-h: 400px; padding-block: 56px; } @media (min-width: 1040px) { .dobra--colunas { grid-template-columns: 46px minmax(0, 1fr); padding-block: 84px; } } .colunas { display: grid; gap: 34px 0; margin-top: 34px; } @media (min-width: 900px) { .colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } } .coluna { } @media (min-width: 900px) { .coluna { padding-inline: 28px; border-left: 1px solid var(--filete); } .coluna:first-child { padding-left: 0; border-left: 0; } .coluna:last-child { padding-right: 0; } } .coluna h3 { font-family: var(--sans); font-size: .98rem; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; margin: 0 0 6px; min-height: 2.6em; /* alinha o início das listas mesmo com títulos de 1 ou 2 linhas */ } .coluna ul { list-style: none; margin: 0; padding: 0; } .coluna li { padding-block: 13px; border-top: 1px solid var(--filete); font-size: .92rem; line-height: 1.55; color: var(--suave); } .coluna li:last-child { border-bottom: 1px solid var(--filete); } @media (max-width: 899px) { .coluna h3 { min-height: 0; } } /* --- Dobra 5 ------------------------------------------------------------- Ritmo: quinta forma. A composição é espelhada em relação à 1ª dobra — lá a foto está à direita, aqui à esquerda. A página abre e fecha com o mesmo gesto invertido, o que dá fechamento sem repetir layout. -------------------------------------------------------------------------- */ .dobra--bio { --trilho-h: 460px; padding-block: 56px 64px; } @media (min-width: 1040px) { .dobra--bio { grid-template-columns: 46px minmax(0, 380px) minmax(0, 1fr); padding-block: 84px; } } .retrato { margin: 0; } @media (min-width: 1040px) { .retrato { padding-left: 36px; } } .retrato img { width: 100%; } .retrato figcaption { margin-top: 12px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--suave); } .sobre { padding-block: 30px 0; } @media (min-width: 1040px) { .sobre { padding-left: 56px; padding-right: var(--gutter); padding-block: 0; max-width: 620px; } } .sobre h2 { max-width: 18ch; } /* O primeiro parágrafo abre com o nome dela: ganha corpo maior para funcionar como abertura, sem precisar duplicar o nome num display à parte. */ .sobre p:first-of-type { font-size: 1.06rem; line-height: 1.7; color: var(--tinta); } .sobre p { color: var(--suave); line-height: 1.75; margin: 0 0 22px; } .sobre .acoes { margin-top: 32px; } /* --- Alinhamento dos parágrafos ------------------------------------------- Justificado por pedido do cliente, SEM hifenização (decisão do Alisson). Vale registrar a limitação: o navegador justifica esticando apenas os espaços entre palavras. Sem hifenizar, em coluna de ~45 caracteres no desktop e ~40 no celular, os espaços ficam desiguais entre linhas vizinhas. Se incomodar, a saída sem hífen é alargar a coluna. Só texto corrido. Título, lista, rótulo, legenda e botão continuam à esquerda: justificar bloco de uma ou duas linhas estica a primeira de forma esquisita. -------------------------------------------------------------------------- */ .abre, .argumento > p, .bloco > p, .sobre p { text-align: justify; text-align-last: left; /* a última linha nunca é esticada */ hyphens: none; /* explícito: nenhum navegador deve hifenizar */ text-wrap: pretty; /* melhora os pontos de quebra sem hifenizar */ } /* ========================================================================== PÁGINA DE ESCOLHA (raiz) Quem chega sem contexto — link na bio, QR no consultório, alguém que apagou o caminho da URL — precisa escolher a especialidade em vez de receber uma que talvez não seja a dele. As duas escolhas são blocos editoriais, não cartões: cartão está na lista de recusas. Foto, nome, uma linha e filete fazem o mesmo trabalho. ========================================================================== */ .capa { padding-block: 44px 0; } @media (min-width: 1040px) { .capa { padding-block: 64px 0; } } .capa__intro { max-width: 46ch; margin-bottom: 44px; } .capa__intro h1 { font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem); margin-bottom: 16px; } .capa__intro p { color: var(--suave); line-height: 1.7; margin: 0; } /* Helena, em versão curta: quem chega sem contexto quer saber quem atende antes de escolher a especialidade. */ .quem { display: grid; gap: 20px; align-items: center; padding-block: 28px; border-block: 1px solid var(--filete); margin-bottom: 48px; } @media (min-width: 700px) { .quem { grid-template-columns: 104px minmax(0, 1fr); gap: 26px; } } .quem img { width: 104px; height: 104px; object-fit: cover; object-position: center 22%; } .quem__nome { font-family: var(--serif); font-size: 1.3rem; line-height: 1.15; margin: 0 0 4px; } .quem p { margin: 0; font-size: .94rem; line-height: 1.65; color: var(--suave); max-width: 62ch; } /* --- As duas escolhas ---------------------------------------------------- */ .escolhas { display: grid; gap: 40px; margin-bottom: 56px; } @media (min-width: 860px) { .escolhas { grid-template-columns: 1fr 1fr; gap: 44px; } } .escolha { display: block; text-decoration: none; color: inherit; } .escolha img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 18px; } .escolha h2 { font-size: clamp(1.5rem, 1.3rem + .7vw, 1.95rem); margin: 0 0 10px; transition: color .18s ease; } .escolha p { color: var(--suave); line-height: 1.65; margin: 0 0 16px; max-width: 42ch; } .escolha__acao { display: inline-flex; align-items: center; gap: 9px; font-size: .92rem; font-weight: 600; color: var(--verde); border-bottom: 1px solid currentColor; padding-bottom: 3px; } .escolha__acao svg { width: 14px; height: 14px; } a.escolha:hover h2 { color: var(--verde); } /* --- Dobra 4 em quatro colunas -------------------------------------------- A copy da psicoterapia traz quatro itens de uma linha, contra os três grupos com listas da cinesiologia. Mesmo dispositivo — colunas de jornal com filete —, só a contagem muda. Em telas médias vira 2x2, porque quatro colunas abaixo de 1040px dariam medida curta demais para ler. -------------------------------------------------------------------------- */ @media (min-width: 640px) and (max-width: 1039px) { .colunas--quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; } .colunas--quatro .coluna { padding-inline: 24px; border-left: 1px solid var(--filete); } .colunas--quatro .coluna:nth-child(odd) { padding-left: 0; border-left: 0; } .colunas--quatro .coluna:nth-child(-n+2) { padding-bottom: 26px; } .colunas--quatro .coluna:nth-child(n+3) { padding-top: 26px; border-top: 1px solid var(--filete); } } @media (min-width: 1040px) { .colunas--quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); } .colunas--quatro .coluna { padding-inline: 22px; } } .coluna p { margin: 0; padding-top: 13px; border-top: 1px solid var(--filete); font-size: .92rem; line-height: 1.55; color: var(--suave); } /* --- Dobra 4 em seis quadros (3 × 2) -------------------------------------- A copy do Reiki pede "duas linhas com 3 benefícios". Mesmo dispositivo das outras duas páginas — colunas de jornal separadas por filete —, só a contagem muda. "Quadro" aqui é o campo delimitado pelos filetes, não um cartão: cartão continua na lista de recusas. O filete horizontal de cada item já vem do `.coluna p`; entre as duas linhas basta o respiro, sem mais uma régua. Em telas médias vira 2×3, porque três colunas abaixo de 900px dariam medida curta demais. -------------------------------------------------------------------------- */ @media (min-width: 640px) and (max-width: 899px) { .colunas--seis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 0; } .colunas--seis .coluna { padding-inline: 24px; border-left: 1px solid var(--filete); } .colunas--seis .coluna:nth-child(odd) { padding-left: 0; border-left: 0; } .colunas--seis .coluna:nth-child(even) { padding-right: 0; } } @media (min-width: 900px) { .colunas--seis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 0; } .colunas--seis .coluna { padding-inline: 26px; border-left: 1px solid var(--filete); } /* zera o primeiro de CADA linha, não só o primeiro do grupo */ .colunas--seis .coluna:nth-child(3n+1) { padding-left: 0; border-left: 0; } .colunas--seis .coluna:nth-child(3n) { padding-right: 0; } } /* --- Página de escolha com três caminhos ---------------------------------- Com a entrada do Reiki, as escolhas passam de duas a três. Três blocos iguais lado a lado é justamente a forma que o sistema recusa quando vira cartão — aqui não vira: sem caixa, sem sombra, sem canto. O que os separa é a foto e o filete, como nas outras dobras. Em tablet a coluna tripla daria medida curta demais para o título em serifa, então cada escolha vira uma linha com a foto ao lado do texto — compacta, sem empilhar três fotos grandes. -------------------------------------------------------------------------- */ @media (min-width: 640px) and (max-width: 979px) { .escolhas { grid-template-columns: 1fr; gap: 34px; } .escolhas--tres .escolha { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 24px; align-items: start; padding-bottom: 34px; border-bottom: 1px solid var(--filete); } .escolhas--tres .escolha:last-child { padding-bottom: 0; border-bottom: 0; } .escolhas--tres .escolha picture { grid-row: span 3; } .escolhas--tres .escolha img { margin-bottom: 0; height: 100%; } /* como item de grid o link esticava e arrastava o sublinhado pela largura toda da coluna — precisa voltar a ter a largura do texto */ .escolhas--tres .escolha__acao { justify-self: start; } } @media (min-width: 980px) { .escolhas--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; } .escolhas--tres .escolha h2 { font-size: clamp(1.35rem, 1.1rem + .6vw, 1.7rem); } .escolhas--tres .escolha p { max-width: none; } } /* --- Seletor de idioma ---------------------------------------------------- A LP de quiropraxia existe em duas línguas, em páginas irmãs — não num dicionário de JS. Pôr o texto em script o tiraria do HTML e traria de volta o deslocamento de layout que custou duas sessões para eliminar. O botão mostra a bandeira do idioma DE DESTINO, não do atual: quem está na página inglesa vê a bandeira brasileira, que é para onde o clique leva. As bandeiras representam os mercados (Irlanda e Brasil), como no seletor da página de espera. ⚠️ O href é completado em wireIdioma() com a query da URL: sem isso a troca de idioma descarta utm e gclid, e a campanha perde a atribuição do lead. -------------------------------------------------------------------------- */ .idioma { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--filete); color: var(--tinta); font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: border-color .18s ease, background .18s ease; } .idioma:hover { border-color: var(--suave); background: var(--papel-2); } .idioma .flag { width: 21px; height: 14px; display: block; box-shadow: 0 0 0 1px rgba(22,21,15,.12); } /* --- Hero em retrato ------------------------------------------------------ Exceção da LP de Galway. A foto que o cliente indicou para a 1ª dobra é vertical (3:4), e recortá-la para o formato horizontal das outras três páginas custaria a estante do alto e o pé da maca, justamente o que faz a sala parecer uma sala. Em vez de preencher a coluna, a imagem guarda a própria proporção e fica encostada à direita, alinhada com o limite do conteúdo. A altura é limitada pela largura máxima, para o hero não ficar mais alto que o texto ao lado. -------------------------------------------------------------------------- */ /* Em tela média a coluna é larga e a foto vertical esticava junto: 760px de largura viravam 1013px de altura, mais que a tela inteira. Limitar a largura resolve sem recortar nem distorcer. */ @media (min-width: 640px) and (max-width: 1039px) { .sala--retrato img { max-width: 420px; margin-inline: auto; } } @media (min-width: 1040px) { .sala--retrato { display: flex; justify-content: flex-end; padding-right: var(--gutter); } .sala--retrato img { width: auto; max-width: 100%; height: auto; min-height: 0; max-height: 620px; aspect-ratio: 3 / 4; object-position: center; } }