`, e uma regra `.papel .extra__n` passava a ganhar DENTRO das secções verdes — o texto ficava tinta escura sobre verde, por ler. Na maqueta isso não acontecia porque as secções são irmãs de topo, e foi por isso que a diferença escapou. Uma variável herda do antepassado MAIS PRÓXIMO: a secção manda sempre, esteja dentro do que estiver. */ .papel,.branco-fundo{--txt:var(--tinta);--txt2:var(--tinta-suave);--risco:var(--linha)} /* 🔑 `--txt2` é o branco esbatido de TODO o site sobre cor. Vive aqui, num sítio só, porque a percentagem depende de quão claro é o fundo: quando o verde subiu para o Pantone do manual, os 85% escritos à mão em três sítios caíram para 4,43:1 e passaram a falhar. Um número escrito à mão não acompanha uma mudança de paleta; uma variável acompanha. */ .teal,.carvao{--txt:var(--branco);--txt2:rgba(255,255,255,.9);--risco:var(--linha-clara)} /* 🔴 O padrão dela SAIU das barras de cor. Duas razões, ambas medidas: na maqueta aprovada o ficheiro dava 404 — ou seja, o que foi aprovado nunca teve padrão nenhum aqui; e no WordPress, onde carregava mesmo, punha textura por baixo das críticas da Wook e deixava-as por ler. Fica a cor limpa. O padrão dela não se perde: vive nos separadores `.vira`, onde não há texto. */ .teal .eyebrow{color:var(--branco)} .teal .eyebrow::before{background:var(--branco)} .carvao{background:var(--carvao);color:var(--papel);position:relative;isolation:isolate} .carvao .eyebrow{color:var(--teal)} .carvao .eyebrow::before{background:var(--teal)} /* ASSINATURA "virar a página": a passagem entre registos não é um corte a direito. O padrão do registo que entra atravessa em diagonal, como a folha de um diário a virar. */ .vira{position:relative;height:clamp(48px,7vw,96px);overflow:hidden;background:var(--papel)} .vira::before{content:"";position:absolute;inset:-1px 0;background:var(--teal-fundo); -webkit-mask-image:linear-gradient(172deg,#000 26%,rgba(0,0,0,.5) 54%,transparent 80%); mask-image:linear-gradient(172deg,#000 26%,rgba(0,0,0,.5) 54%,transparent 80%)} .vira::after{content:"";position:absolute;inset:0; background:url(../img/padrao-teal.webp) center/cover;opacity:.32;mix-blend-mode:soft-light; -webkit-mask-image:linear-gradient(172deg,#000 26%,transparent 78%); mask-image:linear-gradient(172deg,#000 26%,transparent 78%)} .vira--sai{background:var(--teal-fundo)} .vira--sai::before{background:var(--papel); -webkit-mask-image:linear-gradient(-172deg,#000 26%,rgba(0,0,0,.5) 54%,transparent 80%); mask-image:linear-gradient(-172deg,#000 26%,rgba(0,0,0,.5) 54%,transparent 80%)} .vira--sai::after{background:url(../img/padrao-papel.webp) center/cover;opacity:.16; mix-blend-mode:normal; -webkit-mask-image:linear-gradient(-172deg,#000 26%,transparent 78%); mask-image:linear-gradient(-172deg,#000 26%,transparent 78%)} /* ---------- botões ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; min-height:54px;padding:.9rem 1.5rem;border:0;border-radius:var(--r); font:inherit;font-weight:700;font-size:1.02rem;text-decoration:none;cursor:pointer; transition:background .2s var(--ease),transform .12s var(--ease), box-shadow .2s var(--ease),color .2s var(--ease)} .btn:active{transform:scale(.978)} /* 🔴 O botão era verde ESCURO com letra branca — e o verde escuro só lá estava porque eu insistia em letra branca: sobre o verde claro dela, branco dá 2,5:1, ilegível. A saída não era escurecer a marca, era trocar a letra. Com carvão sobre o verde dela dá 6,6:1, e o botão volta a ser da cor que ela usa no site vivo. 🔑 O site dela usa branco sobre este verde: fica bonito e não se lê — é o defeito que aqui não se copia. */ .btn--acao{background:var(--teal);color:var(--carvao); box-shadow:0 3px 14px rgba(62,177,165,.34)} .btn--acao:hover{background:var(--teal-claro);color:var(--carvao); box-shadow:0 6px 22px rgba(62,177,165,.42)} .btn--linha{background:transparent;color:var(--tinta);font-weight:500; box-shadow:inset 0 0 0 1.5px var(--linha)} .btn--linha:hover{box-shadow:inset 0 0 0 1.5px var(--teal-texto);color:var(--teal-texto)} .teal .btn--acao{background:var(--branco);color:var(--teal-texto);box-shadow:0 3px 16px rgba(0,0,0,.16)} .teal .btn--acao:hover{background:var(--papel);color:var(--carvao)} .teal .btn--linha{color:var(--branco);box-shadow:inset 0 0 0 1.5px var(--linha-clara)} .teal .btn--linha:hover{box-shadow:inset 0 0 0 1.5px var(--branco);color:var(--branco)} .carvao .btn--linha{color:var(--papel);box-shadow:inset 0 0 0 1.5px rgba(247,246,243,.28)} .carvao .btn--linha:hover{box-shadow:inset 0 0 0 1.5px var(--teal);color:var(--teal)} :where(a,button,input,select,summary):focus-visible{outline:3px solid var(--teal-texto); outline-offset:2px;border-radius:3px} /* ---------- comprimento de linha ---------- 🔴 Medido: havia texto corrido a 142 caracteres por linha em `/marcar-consulta/`, 90 nas perguntas frequentes e 83 nas opiniões da Wook. Acima de ~80 o olho perde o início da linha seguinte e o bloco lê-se como uma parede — é isso que dá o aspecto «esticado a toda a largura», mesmo com a secção bem alinhada. O limite vive aqui, num sítio só, e é em `ch`: acompanha o tamanho da letra. */ .passo p,.faq__r,.op p,.cookies__in p,.extra__d,.oferta small{max-width:68ch} .capa__lead,.sec__cab p{max-width:60ch} /* ---------- cabeçalho: começa limpo sobre o hero, passa a teal ao descer ---------- 🔴 O WordPress embrulha cada parte do tema num `

` com a altura do que tem lá dentro — 98px. Um elemento `sticky` só cola dentro do pai, por isso o nosso cabeçalho escorregava para fora ao fim de 98px e o site ficava sem cabeçalho fixo (e sem a mudança para verde ao descer), coisa que na maqueta não se via porque lá ele é filho directo do . `display:contents` faz o embrulho desaparecer do layout sem lhe tocar no HTML — e de caminho tira o segundo

aninhado, que duplicava o marco de navegação para quem usa leitor de ecrã. */ .wp-site-blocks > header.wp-block-template-part{display:contents} /* ---------- cabeçalho ---------- */ /* 🔴 O DESFOQUE VIVE NUM PSEUDO-ELEMENTO, NUNCA NO PRÓPRIO `.topo`. `backdrop-filter` (como `filter` e `transform`) faz do elemento um CONTAINING BLOCK para descendentes `position:fixed`. O menu de telemóvel do WordPress é um `fixed; inset:0` dentro do cabeçalho ⇒ com o desfoque no `.topo` abria confinado aos 74px da barra em vez do ecrã inteiro. Medido: 390x74 com o desfoque, 390x844 sem ele. O JS estava bom; era CSS. 🔑 É o mesmo género de armadilha do `filter:blur()` que fazia o H1 do hero desaparecer atrás do véu. Em ancestrais de `fixed`: nada de filtros. */ .topo{position:sticky;top:0;z-index:60; transition:box-shadow .4s var(--ease)} .topo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:rgba(247,246,243,.94); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); transition:background .4s var(--ease)} .topo__in{display:flex;align-items:center;gap:1rem;min-height:var(--topo-h)} .topo.desceu{box-shadow:0 2px 18px rgba(23,27,32,.14)} .topo.desceu::before{background:var(--teal-fundo)} .marca{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--carvao); flex:none;padding-block:.35rem;margin-right:auto;transition:color .4s var(--ease)} .topo.desceu .marca{color:var(--branco)} .marca svg{height:30px;width:auto;flex:none} .marca--logo img,.marca--logo svg{height:52px;width:auto;display:block; transition:filter .4s var(--ease)} .topo.desceu .marca--logo img{filter:brightness(0) invert(1)} .topo.desceu .marca--logo svg{color:var(--branco)} .marca__txt{display:flex;flex-direction:column;line-height:1.08} .marca__txt b{font-weight:700;font-size:.9rem;letter-spacing:-.012em} .marca__txt span{font-size:.57rem;letter-spacing:.12em;text-transform:uppercase; color:var(--teal-texto);font-weight:500;transition:color .4s var(--ease)} .topo.desceu .marca__txt span{color:rgba(255,255,255,.85)} /* 🔴 `.nav{display:none}` escondia o menu em telemóvel — mas no WordPress o bloco de navegação leva esta mesma classe, e o botão ☰ vive DENTRO dele. Resultado: em telemóvel o site ficava sem navegação nenhuma, só com o botão de marcação, e ninguém chegava às páginas. Esconde-se a LISTA, nunca o bloco. */ .nav{display:block} .nav > ul, .nav .wp-block-navigation__container{display:none} .nav .wp-block-navigation__responsive-container-open{display:flex; background:none;border:0;padding:.35rem;cursor:pointer;color:var(--tinta); transition:color .3s var(--ease)} .topo.desceu .nav .wp-block-navigation__responsive-container-open{color:var(--branco)} /* ═══════════ O PAINEL DO MENU EM TELEMÓVEL — «o índice do diário» ═══════════ Registo ARDÓSIA, por regra do DESIGN.md: claro é onde se lê, escuro é onde se decide. Escolher para onde ir é decidir ⇒ carvão com o padrão a giz, e o teal guardado para os números e para a acção. Um painel teal cheio fazia do menu uma barra de cor; isto faz dele uma página do caderno. O que o torna DELA e não um menu qualquer: a numeração de índice (o manual diz que a irregularidade da marca existe «para transmitir a escrita manual de um diário»), o símbolo do livro gigante e cortado ao fundo, o padrão de giz que já vem de 2015, e a frase que ela mandou pintar na parede do consultório. 🔴 A ESPECIFICIDADE É DE PROPÓSITO. O WordPress pinta o painel com `.wp-block-navigation:not(.has-background) .…is-menu-open:not(.disable-…)`, que vale (0,5,0): um selector nosso de (0,4,0) perde e o menu abre BRANCO com texto branco. Somando `.wp-block-navigation` e `.has-modal-open` chega-se a (0,6,0) e ganha-se sem um único `!important`. */ .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open{ background:var(--carvao);color:var(--papel); padding:calc(var(--topo-h) + 1.6rem) var(--gut) 1.4rem; isolation:isolate} /* o giz sobre a ardósia — o padrão dela, não uma textura de banco de imagens */ .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open::before{ content:"";position:absolute;inset:0;z-index:-2;pointer-events:none; background:url(../img/padrao-ardosia.webp) center/cover;opacity:.08} /* 🔑 o símbolo (coração-maçã com livro aberto) entra GIGANTE e CORTADO, a 5%. O DESIGN.md pede exactamente isto atrás do preçário; o menu é o outro sítio onde há espaço vazio que merece assinatura em vez de vácuo. */ .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open::after{ content:"";position:absolute;z-index:-1;pointer-events:none; right:-24%;bottom:-14%;width:84vw;height:84vw; background:url(../img/simbolo.svg) center/contain no-repeat; opacity:.05;filter:brightness(0) invert(1)} /* 🔑 A cadeia de alturas tem de ir toda até ao fim, senão o `margin-top:auto` do rodapé não empurra nada: o `__responsive-close` do WordPress é um `block` de altura automática e cortava a corrente a meio. Com ela inteira, o índice fica em cima, a frase dela em baixo, e o símbolo enche o vazio no meio. */ .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-close{display:flex;flex-direction:column; width:100%;min-height:100%} .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-dialog{width:100%;max-width:var(--max); margin-inline:auto;display:flex;flex-direction:column;min-height:100%} /* 🔴 O bloco no cabeçalho é `items-justified-right` — em ecrã largo os links ficam à direita e está certo. Mas essa mesma classe põe `align-items:flex-end` no painel: a lista encolhia para 150px encostados à direita e os filetes ficavam a meio do ecrã. No painel manda a leitura, não a justificação da barra. */ .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content{align-items:flex-start; width:100%;flex:1;display:flex;flex-direction:column; /* 🔴 o botão de marcação é `fixed` no fundo do painel: sem esta folga a frase dela assentava EXACTAMENTE por trás dele e desaparecia. 54px do botão, 24px do fundo, 18px de ar. */ --cta-espaco:96px;padding-bottom:var(--cta-espaco)} .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container, .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container.items-justified-right{display:flex; flex-direction:column;gap:0;width:100%; justify-content:flex-start;align-items:stretch; counter-reset:entrada} /* cada entrada do índice */ .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-item{width:100%;position:relative; border-top:1px solid rgba(247,246,243,.11);counter-increment:entrada} .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-item:first-child{border-top:0} .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open a{ color:var(--papel);text-decoration:none;display:flex;align-items:baseline; gap:.85rem;width:100%;min-height:56px; font-size:1.34rem;font-weight:500;letter-spacing:-.018em;line-height:1.2; padding:.92rem 0;text-align:left; transition:color .35s var(--ease),transform .35s var(--ease)} /* o número do índice, a giz */ .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open a::before{content:counter(entrada,decimal-leading-zero); color:var(--teal);font-size:.66rem;font-weight:500;letter-spacing:.13em; font-variant-numeric:tabular-nums;flex:none;width:1.6rem; transition:color .35s var(--ease)} .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open a:hover, .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open a:focus-visible{color:var(--teal-claro);transform:translateX(5px)} /* 🔑 O número de artigos é MEDIDO (409 no dia em que isto se escreveu), e vive preso ao endereço do blog, nunca à posição no menu: reordenar o menu no painel do WordPress não pode passar a etiqueta para outra entrada. */ .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open a[href*="blog"]::after{content:"409 artigos";margin-left:auto; /* 🔴 42% dava 3,85:1 sobre o carvão e falhava AA. 52% dá 5,19:1 e continua a ler-se como secundário — a etiqueta não pode competir com «Blog», mas também não pode ser um enfeite ilegível. Medido, não estimado. */ color:rgba(247,246,243,.52);font-size:.7rem;font-weight:400;letter-spacing:.02em} /* o rodapé: a frase que ela mandou pintar na parede do consultório */ .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content::after{ content:"«Alimentação saudável não é dieta, é estilo de vida.»"; display:block;margin-top:auto;padding-top:1.9rem;max-width:26ch; font-style:italic;font-size:.88rem;line-height:1.5; color:rgba(247,246,243,.5)} /* o ✕: branco, com alvo de toque a sério (44px, é o mínimo do DESIGN.md) */ .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-close{color:var(--papel); padding:.6rem;top:1rem;right:calc(var(--gut) - .6rem); min-width:44px;min-height:44px; transition:color .3s var(--ease),transform .3s var(--ease)} .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-close:hover{color:var(--teal); transform:rotate(90deg)} /* ── a entrada: «virar a página», que é a assinatura do site ── O painel não aparece: atravessa em diagonal, como a folha de um diário a virar, e as entradas do índice assentam a seguir, uma a uma. 🔴 `clip-path` e `transform` só; nada de animar `height` ou `top`. */ @keyframes ddd-vira-menu{ from{clip-path:polygon(0 0,100% 0,100% 0,-30% 0)} to {clip-path:polygon(0 0,100% 0,100% 100%,0 100%)} } @keyframes ddd-assenta{ from{opacity:0;transform:translateY(14px)} to {opacity:1;transform:none} } .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open{ animation:ddd-vira-menu .52s var(--ease) both} .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-item{animation:ddd-assenta .5s var(--ease) both; animation-delay:calc(160ms + (var(--n,0) * 55ms))} .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-item:nth-child(1){--n:0} .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-item:nth-child(2){--n:1} .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-item:nth-child(3){--n:2} .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-item:nth-child(4){--n:3} .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-item:nth-child(5){--n:4} .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-item:nth-child(6){--n:5} .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-item:nth-child(n+7){--n:6} /* 🔑 O botão real de marcação sobe para o fim do painel em vez de se duplicar markup: é o mesmo elemento, com o mesmo `data-abre-modal`, só noutro sítio. Se o browser não souber `:has()`, fica onde estava, atrás do painel, e a marcação continua a ser a entrada 01 do índice. Nada se perde. */ .topo:has(.wp-block-navigation__responsive-container.is-menu-open) .topo__btn{ position:fixed;left:var(--gut);right:var(--gut);bottom:1.5rem;z-index:100000; min-height:54px;font-size:1rem;background:var(--teal);color:var(--carvao); animation:ddd-assenta .5s var(--ease) both;animation-delay:.48s} .topo:has(.wp-block-navigation__responsive-container.is-menu-open) .topo__btn:hover{ background:var(--teal-claro)} @media (prefers-reduced-motion:reduce){ .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open, .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-item, .topo:has(.wp-block-navigation__responsive-container.is-menu-open) .topo__btn{ animation:none} .topo .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open a:hover{transform:none} } .topo__btn{min-height:40px;padding:.45rem 1rem;font-size:.86rem;font-weight:700; border:0;border-radius:var(--r);cursor:pointer;font-family:inherit; background:var(--teal-fundo);color:var(--branco); transition:background .3s var(--ease),color .3s var(--ease)} .topo__btn:hover{background:var(--teal-texto)} .topo.desceu .topo__btn{background:var(--branco);color:var(--teal-texto)} .topo.desceu .topo__btn:hover{background:var(--papel)} /* ============ HERO — meia-tela carvão ============ O lado da fotografia é carvão com o padrão dela; o lado do texto é papel. Assimétrico a sério, usa as três cores do manual, e sai do reflexo «branco + teal» que é o que toda a gente faz em saúde. Em telemóvel empilha: proposta, acção, prova — e só depois o bloco escuro com a fotografia e a frase da parede. Consegue marcar sem descer. ================================================================== */ .hero{position:relative;padding-top:1.25rem;padding-bottom:0; margin-top:calc(var(--topo-h) * -1);isolation:isolate} .hero .wrap{padding-top:var(--topo-h);position:relative;z-index:2} .hero__txt{position:relative;z-index:2;padding-bottom:2rem} .hero h1{margin-bottom:1rem} /* o peso está na promessa, não na negação */ .hero h1 .ln:first-child{font-size:.62em;font-weight:500;letter-spacing:-.01em; color:var(--tinta-suave);display:block;margin-bottom:.25em} .hero h1 .ln:last-child{color:var(--teal-texto);display:block} .hero__lead{font-size:1.06rem;color:var(--tinta-suave);margin-bottom:1.45rem; max-width:38ch} .hero__ctas{display:grid;gap:.6rem} .hero__ctas .btn{width:100%} .hero__prova{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin-top:1.35rem; font-size:.83rem;color:var(--tinta-suave);line-height:1.5} .hero__prova b{font-weight:500;color:var(--tinta)} .hero__prova span{display:inline-flex;align-items:center;gap:.4rem} .hero__prova span::before{content:"";width:5px;height:5px;border-radius:50%; background:var(--teal);flex:none} /* o bloco escuro: em telemóvel sangra de margem a margem */ .hero__foto{position:relative;margin-inline:calc(var(--gut) * -1); background:var(--carvao);padding:1.5rem var(--gut) 1.75rem;isolation:isolate} .hero__foto::before{content:"";position:absolute;inset:0;z-index:-1; background:url(../img/padrao-ardosia.webp) center/cover;opacity:.13} .hero__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 18%; border-radius:var(--r);box-shadow:0 18px 44px rgba(0,0,0,.4)} /* a frase da parede vive no escuro, por baixo da foto: não tapa o rosto */ .parede{position:relative;margin:1.25rem 0 0;color:var(--papel);max-width:30rem} .parede::before{content:"“";position:absolute;top:-.28em;left:-.1rem;font-size:2.6rem; line-height:1;color:var(--teal);opacity:.6} .parede p{margin:0 0 0 1.5rem;font-size:1.02rem;line-height:1.45;font-style:italic; font-weight:300} /* ---------- credenciais ---------- */ .creds{border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)} .creds__in{display:grid} .cred{padding:1.3rem 0;border-top:1px solid var(--linha)} .cred:first-child{border-top:0} .cred__ent{display:block;font-size:.65rem;letter-spacing:.13em;text-transform:uppercase; color:var(--teal-texto);font-weight:500;margin-bottom:.35rem} .cred b{display:block;font-size:1rem;font-weight:700;line-height:1.35} .cred p{margin:.2rem 0 0;font-size:.85rem;color:var(--tinta-suave);line-height:1.5} .cred__selo{margin-top:.7rem;height:34px;width:auto} /* ---------- secções ---------- */ .sec{padding-block:2.9rem} .sec--larga{padding-block:3.6rem} .sec--apertada{padding-block:2.2rem} .sec__cab{margin-bottom:1.85rem;max-width:58ch} .sec__cab p{color:var(--tinta-suave);margin-bottom:0} .teal .sec__cab p{color:rgba(255,255,255,.92)} .carvao .sec__cab p{color:rgba(247,246,243,.76)} .modos{display:grid;gap:1rem} .modo{position:relative;border:1px solid var(--linha);border-radius:var(--r); padding:1.5rem 1.35rem;background:var(--branco);display:flex;flex-direction:column} .modo--destaque{background:var(--carvao);color:var(--papel);border-color:var(--carvao); overflow:hidden} .modo--destaque::before{content:"";position:absolute;inset:0; background:url(../img/padrao-ardosia.webp) center/cover;opacity:.11} .modo--destaque>*{position:relative} .modo__marca{display:inline-block;font-size:.65rem;letter-spacing:.13em; text-transform:uppercase;font-weight:700;color:var(--carvao);background:var(--teal); padding:.3rem .65rem;border-radius:3px;margin-bottom:1rem;align-self:flex-start} .modo h3{margin-bottom:.6rem} .modo p{color:var(--tinta-suave);font-size:.96rem} .modo--destaque p{color:rgba(247,246,243,.8)} .modo ul{list-style:none;margin:1.05rem 0 1.5rem;padding:0;display:grid;gap:.5rem; font-size:.93rem} .modo li{display:flex;gap:.6rem;align-items:flex-start} .modo li svg{flex:none;width:1.05rem;height:1.05rem;margin-top:.28rem; stroke:var(--teal-texto);fill:none;stroke-width:2.5;stroke-linecap:round} .modo--destaque li svg{stroke:var(--teal)} .modo .btn{margin-top:auto;width:100%} .areas{display:grid} .area{display:flex;gap:.8rem;align-items:baseline;padding-block:.78rem; border-bottom:1px solid var(--linha)} .area span{font-size:.7rem;color:var(--teal-texto);font-weight:500; font-variant-numeric:tabular-nums;flex:none;width:1.5rem} .area b{font-weight:400;font-size:.97rem} .passos{display:grid;gap:1.9rem} .passos__lista{display:grid;gap:1.45rem} .passo{display:grid;grid-template-columns:auto 1fr;gap:1.05rem;padding-bottom:1.45rem; border-bottom:1px solid var(--linha)} .passo:last-child{border-bottom:0;padding-bottom:0} .passo__n{font-size:2rem;font-weight:300;line-height:1;color:var(--teal-texto); font-variant-numeric:tabular-nums;letter-spacing:-.04em} .passo h3{margin-bottom:.35rem;font-size:1.08rem} .passo p{margin:0;color:var(--tinta-suave);font-size:.94rem} .precos{display:grid;gap:1px;background:var(--linha-clara); border:1px solid var(--linha-clara);border-radius:var(--r);overflow:hidden} .preco{background:var(--teal-fundo);padding:1.45rem 1.3rem} .preco--principal{background:var(--teal-texto)} .preco__et{font-size:.67rem;letter-spacing:.13em;text-transform:uppercase; color:rgba(255,255,255,.9);font-weight:500} .preco__v{font-size:2.5rem;font-weight:700;line-height:1;letter-spacing:-.04em; margin:.55rem 0 .12rem;display:flex;align-items:baseline;gap:.12rem;color:var(--branco)} .preco__v i{font-style:normal;font-size:.42em;font-weight:400;color:var(--txt2,rgba(255,255,255,.88))} .preco p{margin:.4rem 0 0;font-size:.87rem;color:rgba(255,255,255,.92)} .precos__nota{margin-top:1.3rem;font-size:.87rem;color:rgba(255,255,255,.92); display:grid;gap:.3rem} .precos__nota b{color:var(--branco);font-weight:700} .pilares{display:grid;gap:0;counter-reset:pil} .pilar{padding:1.35rem 0;border-top:1px solid var(--linha);counter-increment:pil; position:relative} .pilar:first-child{border-top:0} .pilar h3{font-size:1.08rem;margin-bottom:.3rem;display:flex;align-items:baseline;gap:.6rem} .pilar h3::before{content:counter(pil,decimal-leading-zero);font-size:.72rem; font-weight:500;color:var(--teal-texto);font-variant-numeric:tabular-nums} .pilar p{margin:0;color:var(--tinta-suave);font-size:.95rem} .casos{display:grid;gap:1rem} .caso{border:1px solid var(--linha);border-radius:var(--r);padding:1.45rem 1.3rem; background:var(--branco);display:flex;flex-direction:column;gap:.85rem} .caso--grande q{font-size:1.18rem;line-height:1.42;font-weight:300} .caso q{quotes:"«" "»";font-style:normal;display:block} .caso q::before{content:open-quote;color:var(--teal-texto)} .caso q::after{content:close-quote;color:var(--teal-texto)} .caso footer{font-size:.79rem;color:var(--tinta-suave);display:flex;align-items:center; gap:.55rem;margin-top:auto} .caso footer::before{content:"";width:1.3rem;height:1px;background:var(--teal);flex:none} /* ============ O LIVRO — a barra teal que ela já usa ============ */ .livro{display:grid;gap:1.75rem;align-items:center} .livro__capa{margin-inline:auto;max-width:280px;filter:drop-shadow(0 18px 40px rgba(23,27,32,.3))} .livro__preco{display:flex;align-items:baseline;gap:.55rem;margin:1.1rem 0 1.2rem} .livro__preco b{font-size:2rem;font-weight:700;letter-spacing:-.03em;color:var(--branco)} .livro__preco span{font-size:.87rem;color:var(--txt2,rgba(255,255,255,.88))} .livro .btn{width:100%} .livro__aut{font-size:.83rem;color:var(--txt2,rgba(255,255,255,.88));margin-top:1rem} .livro__aut b{font-weight:500;color:var(--branco)} /* opiniões reais da Wook */ .opinioes{display:grid;gap:.9rem;margin-top:2.25rem; /* 🔑 Limitar só o parágrafo não chegou: o CARTÃO continuava com 593px e o bloco lia-se largo à mesma. O conjunto encolhe, e as opiniões ficam com a largura de um testemunho — não de um artigo. 🔴 E `max-width` sem `margin-inline:auto` encosta à esquerda: o bloco ficava com um vazio de 350px à direita. */ max-width:58rem;margin-inline:auto} .op{background:rgba(0,0,0,.14);border-radius:var(--r);padding:1.2rem 1.15rem; border:1px solid rgba(255,255,255,.16)} .op__e{display:flex;gap:.14rem;margin-bottom:.6rem} .op__e svg{width:15px;height:15px;fill:var(--estrela)} .op__e svg.vazia{fill:none;stroke:var(--estrela);stroke-width:1.6} .op h3{font-size:.86rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase; margin-bottom:.15rem;color:var(--branco)} .op cite{font-style:normal;font-size:.78rem;color:var(--txt2,rgba(255,255,255,.88)); display:block;margin-bottom:.6rem} .op p{margin:0;font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.96)} .op__fonte{font-size:.76rem;color:var(--txt2,rgba(255,255,255,.88)); margin:.9rem auto 0;max-width:58rem;width:100%} /* eBooks */ .oferta{display:grid;gap:1.9rem;align-items:center} .oferta__forma{display:grid;gap:.7rem;margin-top:1.3rem;max-width:26rem} .oferta input{font:inherit;font-size:16px;padding:.85rem 1rem;border:1.5px solid var(--linha); border-radius:var(--r);background:var(--branco);min-height:54px} .oferta input:focus{border-color:var(--teal-texto);outline:0; box-shadow:0 0 0 3px rgba(63,180,156,.22)} .oferta small{font-size:.8rem;color:var(--tinta-suave)} .capas{display:grid;grid-template-columns:1fr 1fr;gap:.7rem} .capas img{border-radius:3px;box-shadow:0 8px 22px rgba(23,27,32,.16);width:100%} .capas img:nth-child(2){transform:translateY(-.6rem)} .capas img:nth-child(3){transform:translateY(.4rem)} /* blog */ .cats{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.9rem} /* As categorias eram bolhas cinzentas com um número apagado ao lado — o feitio que qualquer site tem. Passam a falar a língua da casa: o nome em carvão, a contagem numa pastilha verde-água, e ao passar o rato enchem-se da cor dela com letra carvão, tal como os botões. A que se está a ver fica cheia, para se saber onde se está sem ler. */ .cat{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none; padding:.42rem .5rem .42rem .95rem;border:1px solid var(--linha);border-radius:100px; font-size:.87rem;font-weight:500;color:var(--tinta);background:var(--branco); transition:border-color .25s var(--ease),background .25s var(--ease), color .25s var(--ease),transform .25s var(--ease)} .cat i{font-style:normal;font-size:.72rem;font-weight:600;line-height:1; font-variant-numeric:tabular-nums;color:var(--teal-texto); background:rgba(62,177,165,.16);border-radius:100px;padding:.3rem .5rem; transition:background .25s var(--ease),color .25s var(--ease)} .cat:hover{background:var(--teal);border-color:var(--teal);color:var(--carvao); transform:translateY(-1px)} .cat:hover i{background:rgba(23,27,32,.14);color:var(--carvao)} .cat--activa{background:var(--teal);border-color:var(--teal);color:var(--carvao)} .cat--activa i{background:rgba(23,27,32,.14);color:var(--carvao)} @media (prefers-reduced-motion:reduce){ .cat:hover{transform:none} } .artigos{display:grid;gap:1.35rem} .artigo{text-decoration:none;display:grid;gap:.45rem;padding-top:.9rem; border-top:2px solid var(--tinta)} .artigo time{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase; color:var(--tinta-suave)} .artigo h3{font-size:1.04rem;font-weight:500;line-height:1.35;letter-spacing:-.008em} .artigo:hover h3{color:var(--teal-texto)} /* fecho */ .fecho__grid{display:grid;gap:1.5rem} .fecho h2{max-width:16ch} .fecho p{color:rgba(255,255,255,.92);max-width:44ch;margin-bottom:0} .fecho .btn{width:100%} .agua{position:absolute;right:-8%;top:50%;translate:0 -50%;width:min(46vw,380px); opacity:.1;pointer-events:none;z-index:-1;color:var(--branco)} .agua svg{width:100%;height:auto} /* rodapé */ .rodape{padding-block:2.6rem 1.4rem;font-size:.92rem} .rodape__grid{display:grid;gap:1.9rem;padding-bottom:1.9rem; border-bottom:1px solid rgba(247,246,243,.16)} .rodape h3,.rodape h4{font-size:.67rem;letter-spacing:.13em;text-transform:uppercase; color:var(--teal);margin-bottom:.8rem;font-weight:500} .rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:.48rem} .rodape a{color:rgba(247,246,243,.8);text-decoration:none} .rodape a:hover{color:var(--teal)} .rodape address{font-style:normal;color:rgba(247,246,243,.8);line-height:1.7} .rodape__fim{display:grid;gap:.55rem;padding-top:1.4rem;font-size:.81rem; color:rgba(247,246,243,.6)} .rodape__fim a{color:rgba(247,246,243,.6)} .rodape .marca{color:var(--papel)} .rodape .marca__txt span{color:var(--teal)} /* barra fixa de marcação */ .barra{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:.6rem; background:rgba(23,27,32,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); padding:.6rem var(--gut);padding-bottom:calc(.6rem + env(safe-area-inset-bottom)); border-top:1px solid rgba(247,246,243,.14); transform:translateY(115%);transition:transform .35s var(--ease)} .barra.on{transform:none} .barra .btn{flex:1;min-height:48px;font-size:.95rem} .barra .btn--linha{flex:0 0 auto;padding-inline:1.05rem;color:var(--papel); box-shadow:inset 0 0 0 1.5px rgba(247,246,243,.3)} /* ---------- modal ---------- */ .modal{border:0;padding:0;background:transparent;width:100%;max-width:100%; color:var(--tinta);margin:auto auto 0;max-height:100%} .modal::backdrop{background:rgba(11,13,16,.8); -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)} .modal[open]{animation:sobe .4s var(--ease)} @keyframes sobe{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} .modal__caixa{background:var(--papel);border-radius:14px 14px 0 0;overflow:hidden; max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch} .modal__cab{background:var(--carvao);color:var(--papel);padding:1.35rem 1.25rem 1.2rem; position:relative;isolation:isolate} .modal__cab::before{content:"";position:absolute;inset:0;z-index:-1; background:url(../img/padrao-ardosia.webp) center/cover;opacity:.14} .modal__cab svg.marca-mini{height:26px;width:auto;color:var(--teal);margin-bottom:.65rem} .modal__cab h2{font-size:1.22rem;margin-bottom:.28rem} .modal__cab p{margin:0;font-size:.87rem;color:rgba(247,246,243,.75)} .modal__x{position:absolute;top:.7rem;right:.7rem;background:rgba(247,246,243,.1);border:0; color:var(--papel);cursor:pointer;min-width:44px;min-height:44px;border-radius:50%; display:grid;place-content:center;transition:background .2s var(--ease)} .modal__x:hover{background:rgba(247,246,243,.22)} .modal__corpo{padding:1.25rem} .escolha{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1.2rem} .escolha input{position:absolute;opacity:0;width:0;height:0} .escolha label{display:block;cursor:pointer;padding:.85rem .9rem;border-radius:var(--r); border:1.5px solid var(--linha);background:var(--branco);min-height:74px; transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)} .escolha label b{display:block;font-size:.93rem;font-weight:700;margin-bottom:.12rem} .escolha label span{display:block;font-size:.75rem;color:var(--tinta-suave);line-height:1.38} .escolha input:checked + label{border-color:var(--teal-texto); background:rgba(63,180,156,.11);box-shadow:inset 0 0 0 1px var(--teal-texto)} .escolha input:focus-visible + label{outline:3px solid var(--teal-texto);outline-offset:2px} .escolha__t{font-size:.85rem;font-weight:500;margin:0 0 .5rem} .campos{display:grid;gap:.88rem} .campo{display:grid;gap:.3rem} .campo--par{grid-template-columns:1fr;gap:.88rem} .campo label{font-size:.85rem;font-weight:500} .campo label i{font-style:normal;color:var(--teal-texto)} .campo input,.campo select{font:inherit;font-size:16px;padding:.8rem .9rem; border:1.5px solid var(--linha);border-radius:var(--r);background:var(--branco);min-height:52px; width:100%;transition:border-color .18s var(--ease)} .campo select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565C64' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .85rem center;background-size:1.1rem; padding-right:2.6rem} .campo input:focus,.campo select:focus{border-color:var(--teal-texto);outline:0; box-shadow:0 0 0 3px rgba(63,180,156,.24)} .campo [aria-invalid="true"]{border-color:#B3261E} .erro{font-size:.78rem;color:#B3261E;margin:0} .campo--rgpd{grid-template-columns:auto 1fr;align-items:start;gap:.65rem;font-size:.84rem; color:var(--tinta-suave);line-height:1.5} .campo--rgpd input{min-height:auto;width:1.2rem;height:1.2rem;margin-top:.15rem; accent-color:var(--teal-texto)} .armadilha{position:absolute!important;left:-9999px!important;top:auto!important; width:1px!important;height:1px!important;overflow:hidden!important} .modal .btn{width:100%;margin-top:1.25rem} .modal__nota{margin:.8rem 0 0;font-size:.79rem;color:var(--tinta-suave);text-align:center; line-height:1.5} .feito{display:none;text-align:center;padding:1rem 0 .5rem} .feito.on{display:block;animation:sobe .5s var(--ease)} .feito__ok{width:54px;height:54px;margin:0 auto 1.05rem;border-radius:50%; background:rgba(63,180,156,.18);display:grid;place-content:center} .feito__ok svg{width:25px;height:25px;stroke:var(--teal-texto);fill:none;stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round} .feito h3{margin-bottom:.42rem} .feito p{color:var(--tinta-suave);max-width:36ch;margin-inline:auto} .feito__ref{display:inline-block;margin-top:.28rem;padding:.5rem 1rem; background:var(--papel-2);border-radius:var(--r);font-weight:700; font-variant-numeric:tabular-nums;letter-spacing:.04em} form.enviando{opacity:.55;pointer-events:none} /* reveal aditivo: sem JS o conteúdo está visível */ .js .rev{opacity:0;transform:translateY(12px); transition:opacity .65s var(--ease),transform .65s var(--ease)} .js .rev.on{opacity:1;transform:none} /* ================= tablet ================= */ @media (min-width:640px){ :root{--gut:2rem} .hero__ctas{grid-auto-flow:column;justify-content:start} .hero__ctas .btn{width:auto;padding-inline:1.7rem} .creds__in{grid-template-columns:1fr 1fr;column-gap:2rem} .cred:nth-child(2){border-top:0} .modos{grid-template-columns:1fr 1fr} .modo .btn{width:auto;align-self:flex-start} .areas{grid-template-columns:1fr 1fr;column-gap:2.5rem} .precos{grid-template-columns:repeat(3,1fr)} .casos{grid-template-columns:1fr 1fr} .pilares{grid-template-columns:1fr 1fr;column-gap:2.5rem} .pilar:nth-child(2){border-top:0} .artigos{grid-template-columns:1fr 1fr;gap:1.6rem} .oferta{grid-template-columns:1fr 1fr;gap:2.4rem} .capas{grid-template-columns:repeat(4,1fr)} .livro{grid-template-columns:.85fr 1.15fr;gap:2.5rem} .livro__capa{margin:0;max-width:none} .livro .btn{width:auto} .opinioes{grid-template-columns:1fr 1fr} .rodape__grid{grid-template-columns:1fr 1fr} .campo--par{grid-template-columns:1fr 1fr} .modal{max-width:min(620px,94vw);margin:auto} .modal__caixa{border-radius:12px} .precos__nota{grid-auto-flow:column;justify-content:start;gap:1.75rem} .fecho .btn{width:auto} } /* ================= desktop ================= */ @media (min-width:1000px){ :root{--gut:2.5rem;--topo-h:98px} .nav{display:flex;gap:1.4rem;font-size:.91rem;margin-right:1.2rem} .nav > ul,.nav .wp-block-navigation__container{display:flex;gap:1.4rem} .nav .wp-block-navigation__responsive-container-open{display:none} .nav a{text-decoration:none;color:var(--tinta);padding-block:.4rem;position:relative; transition:color .3s var(--ease)} .nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px; background:var(--teal);transform:scaleX(0);transform-origin:left; transition:transform .25s var(--ease)} .nav a:hover::after{transform:scaleX(1)} .topo.desceu .nav a{color:rgba(255,255,255,.92)} .topo.desceu .nav a::after{background:var(--branco)} .marca svg{height:38px} .marca--logo img,.marca--logo svg{height:72px} .marca__txt b{font-size:1rem} .marca__txt span{font-size:.62rem} .barra{display:none} .hero{padding:0;min-height:min(88vh,860px);display:flex;align-items:stretch} /* metade direita em carvão, a sangrar até à margem do ecrã */ .hero::after{content:"";position:absolute;top:0;bottom:0;right:0;width:46%; background:var(--carvao) url(../img/padrao-ardosia.webp) center/cover; background-blend-mode:soft-light;z-index:0} .hero .wrap{display:grid;grid-template-columns:1fr 46%;gap:0;align-items:center; padding-top:calc(var(--topo-h) + 1rem);padding-bottom:2.5rem;width:100%} .hero__lead{font-size:1.15rem;max-width:36ch} .hero__txt{grid-column:1;grid-row:1;padding-right:3.5rem;padding-bottom:0} .hero__ctas{grid-auto-flow:column;justify-content:start} .hero__ctas .btn{width:auto;padding-inline:1.7rem} .hero__foto{grid-column:2;grid-row:1;margin:0;background:none;padding:0 0 0 3rem} .hero__foto::before{display:none} .hero__foto img{aspect-ratio:3/4;object-position:center 16%; box-shadow:0 30px 70px rgba(0,0,0,.45)} .parede{margin-top:1.5rem;max-width:24rem} .parede p{font-size:1.06rem} .sec{padding-block:4.6rem} .sec--larga{padding-block:6.5rem} .sec--apertada{padding-block:3rem} .sec__cab{margin-bottom:2.9rem} .sec__cab--desloca{margin-left:auto} .creds__in{grid-template-columns:repeat(4,1fr);column-gap:0} .cred{padding:1.7rem 1.5rem;border-top:0;border-left:1px solid var(--linha)} .cred:first-child{border-left:0;padding-left:0} .modos{grid-template-columns:7fr 5fr;gap:1.75rem} .modo{padding:2.2rem 2rem} .areas{grid-template-columns:repeat(3,1fr);column-gap:3rem} .passos{grid-template-columns:5fr 7fr;gap:3.5rem;align-items:start} .passos__fixo{position:sticky;top:calc(var(--topo-h) + 2rem)} .passos__lista{gap:2rem} .passo__n{font-size:2.4rem} .preco{padding:2rem 1.85rem} .preco__v{font-size:3.1rem} .casos{grid-template-columns:1.35fr 1fr;gap:1.5rem} .pilares{grid-template-columns:repeat(4,1fr);column-gap:2rem} .pilar{border-top:0;border-left:1px solid var(--linha);padding:0 1.5rem} .pilar:first-child{padding-left:0;border-left:0} .caso--grande{grid-row:span 2;justify-content:center} .caso--grande q{font-size:1.48rem} .caso{padding:2rem 1.85rem} .livro{grid-template-columns:.8fr 1.2fr;gap:3.5rem} .opinioes{grid-template-columns:repeat(2,1fr);gap:1rem} .artigos{grid-template-columns:repeat(4,1fr)} .rodape__grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem} /* A linha de fecho ocupava 1049px numa coluna de 1200 e ficava encostada à esquerda, com um vazio à direita que se notava. Centrada, fecha a página. */ .rodape__fim{grid-auto-flow:column;justify-content:center;gap:2rem;text-align:center} .fecho__grid{grid-template-columns:1fr auto;gap:2.5rem;align-items:center} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} html{scroll-behavior:auto} .js .rev{opacity:1;transform:none} .barra{transform:none} .vira::before,.vira::after{-webkit-mask-image:none;mask-image:none} .vira::after{display:none} } /* ================================================================== ANIMAÇÃO DO HERO As palavras sobem por trás de uma máscara, com o desfoque a sair. Sem rotação e sem filete: o movimento serve a leitura, não se mostra. Aditivo: sem JS, ou com reduced-motion, o título está simplesmente lá. ================================================================== */ .tit{display:block} .js .tit .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em} /* 🔴 `animation`, não `transition` + classe. Com transition o estado final dependia de o JS conseguir pôr `.on`; se isso falhasse — e falhou — o H1 ficava invisível. Uma animação CSS termina sempre no último keyframe, aconteça o que acontecer ao JS. O `backwards` garante o estado inicial durante o delay, e o `forwards` fixa o final. */ @keyframes sobe-palavra{from{transform:translateY(105%);opacity:0} to{transform:none;opacity:1}} .js .tit .pl{display:inline-block; animation:sobe-palavra .8s var(--ease) both} @media (prefers-reduced-motion:reduce){ .js .tit .pl{animation:none} } /* ================================================================== PÁGINAS INTERNAS ================================================================== */ .capa{padding-block:2rem 2.25rem;position:relative} .capa .wrap{padding-top:var(--topo-h)} .capa h1{font-size:clamp(1.9rem,1.25rem + 2.6vw,3.2rem);margin-bottom:.9rem} .capa__lead{font-size:1.06rem;color:var(--tinta-suave);max-width:52ch;margin-bottom:0} .migalhas{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.78rem;color:var(--tinta-suave); margin-bottom:1rem;list-style:none;padding:0} .migalhas li::after{content:"›";margin-left:.4rem;color:var(--teal-texto)} .migalhas li:last-child::after{content:""} .migalhas a{text-decoration:none} .migalhas a:hover{color:var(--teal-texto)} .prosa{max-width:68ch} .prosa h2{margin:2.25rem 0 .8rem;font-size:clamp(1.35rem,1.15rem + .9vw,1.9rem)} .prosa h3{margin:1.75rem 0 .5rem} .prosa p{color:var(--tinta)} .prosa ul{padding-left:1.1rem;margin:0 0 1.1em} .prosa li{margin-bottom:.45rem} .prosa blockquote{margin:1.75rem 0;padding:1.25rem 1.35rem;background:var(--branco); border:1px solid var(--linha);border-radius:var(--r);font-style:italic;font-weight:300; font-size:1.1rem;color:var(--tinta)} .prosa blockquote p:last-child{margin-bottom:0} .ficha{display:grid;gap:0;margin:1.5rem 0} .ficha div{display:grid;gap:.15rem;padding:.85rem 0;border-top:1px solid var(--linha)} .ficha div:first-child{border-top:0} .ficha dt{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase; color:var(--teal-texto);font-weight:500} .ficha dd{margin:0;font-size:.98rem} /* ================================================================== BLOG ================================================================== */ .destaque{display:grid;gap:1.1rem;text-decoration:none;color:inherit} .destaque__img{border-radius:var(--r);overflow:hidden;aspect-ratio:16/10} .destaque__img img{width:100%;height:100%;object-fit:cover; transition:transform .7s var(--ease)} .destaque:hover .destaque__img img{transform:scale(1.03)} .destaque h2{font-size:clamp(1.4rem,1.2rem + 1.1vw,2.1rem);margin-bottom:.5rem; color:var(--tinta);transition:color .2s var(--ease)} .destaque:hover h2{color:var(--teal-texto)} .destaque p{color:var(--tinta-suave);margin-bottom:0;text-decoration:none} .grelha{display:grid;gap:1.6rem;margin-top:2rem} .post{text-decoration:none;display:grid;gap:.65rem;align-content:start} /* capa de reserva: mesmo espaço, sem parecer defeito */ .post__img--vazia{display:grid;place-items:center;aspect-ratio:3/2;width:100%; background:var(--papel-2);border-radius:var(--r)} .post__img--vazia svg{width:34%;max-width:74px;height:auto;fill:var(--teal-texto); opacity:.42} .destaque__img .post__img--vazia{aspect-ratio:3/2} .post__img{border-radius:var(--r);overflow:hidden;aspect-ratio:3/2;background:var(--papel-2)} .post__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .post:hover .post__img img{transform:scale(1.04)} .post__meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center; font-size:.71rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave)} .post__cat{color:var(--teal-texto);font-weight:500} .post__meta span::before{content:"·";margin-right:.5rem} .post__meta span:first-child::before{content:""} .post h3{font-size:1.06rem;font-weight:500;line-height:1.35;letter-spacing:-.008em} .post:hover h3{color:var(--teal-texto)} .paginacao{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:2.5rem;align-items:center} .paginacao a,.paginacao span{min-width:44px;min-height:44px;display:grid;place-content:center; border-radius:var(--r);text-decoration:none;font-size:.92rem;padding-inline:.75rem; border:1px solid var(--linha);background:var(--branco)} .paginacao .actual{background:var(--teal-fundo);color:var(--branco);border-color:var(--teal-fundo); font-weight:700} .paginacao a:hover{border-color:var(--teal-texto);color:var(--teal-texto)} .paginacao .prox{margin-left:auto} /* convite de marcação no fim do artigo e da listagem */ .convite{margin-top:2.5rem;border-radius:var(--r);overflow:hidden} .convite__in{padding:1.75rem 1.4rem} .convite h3{margin-bottom:.5rem;color:var(--branco)} .convite p{color:rgba(255,255,255,.92);margin-bottom:1.1rem;max-width:46ch} .convite .btn{width:100%} @media (min-width:640px){ .grelha{grid-template-columns:1fr 1fr;gap:1.8rem} .destaque{grid-template-columns:1.15fr 1fr;gap:1.75rem;align-items:center} .ficha{grid-template-columns:1fr 1fr;column-gap:2rem} .ficha div:nth-child(2){border-top:0} .convite__in{padding:2.1rem 1.9rem} .convite .btn{width:auto} } @media (min-width:1000px){ .capa{padding-block:2.75rem 3rem} .capa .wrap{padding-top:calc(var(--topo-h) + .5rem)} .grelha{grid-template-columns:repeat(3,1fr);gap:2rem} .destaque{grid-template-columns:1.25fr 1fr;gap:2.5rem} .convite__in{padding:2.6rem 2.4rem;display:grid;grid-template-columns:1fr auto; gap:2rem;align-items:center} .convite p{margin-bottom:0} } /* ---------- menu em telemóvel ---------- */ .menu-btn{display:grid;place-content:center;background:rgba(23,27,32,.07);border:0; color:var(--carvao);cursor:pointer;min-width:44px;min-height:44px;border-radius:var(--r); transition:background .3s var(--ease),color .3s var(--ease)} .topo.desceu .menu-btn{background:rgba(255,255,255,.18);color:var(--branco)} .menu-mob{display:none;background:var(--carvao); border-top:1px solid rgba(247,246,243,.14)} .menu-mob.on{display:block;animation:desce .28s var(--ease)} @keyframes desce{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .menu-mob ul{list-style:none;margin:0;padding:.4rem var(--gut) 1rem} .menu-mob a{display:block;padding:.95rem 0;text-decoration:none;color:var(--papel); font-size:1.02rem;border-bottom:1px solid rgba(247,246,243,.12)} .menu-mob li:last-child a{border-bottom:0} .menu-mob a:hover{color:var(--teal)} @media (min-width:1000px){ .menu-btn,.menu-mob{display:none!important} } /* ================================================================== ARTIGO (single) — o layout vive no tema. Ela escolhe a imagem, escreve o título e o texto, e o artigo sai sempre assim. ================================================================== */ .art__capa{padding-block:1.75rem 1.5rem} .art__capa .wrap{padding-top:var(--topo-h);max-width:70ch} .art__meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.73rem; letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:.9rem} .art__meta a{color:var(--teal-texto);font-weight:500;text-decoration:none} .art__meta a:hover{text-decoration:underline} .art__meta span::before{content:"·";margin-right:.5rem} .art__meta span:first-child::before{content:""} .art__capa h1{font-size:clamp(1.85rem,1.25rem + 2.5vw,3rem);margin-bottom:.9rem} .art__autor{display:flex;align-items:center;gap:.7rem;font-size:.87rem; color:var(--tinta-suave)} .art__autor img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none} .art__autor b{color:var(--tinta);font-weight:500;display:block;font-size:.92rem} .art__hero{margin-block:1.5rem 0} .art__hero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)} .art__hero figcaption{font-size:.78rem;color:var(--tinta-suave);margin-top:.55rem} .art__corpo{max-width:68ch;margin-inline:auto} .art__corpo p{font-size:1.06rem;line-height:1.72} .art__corpo h2{margin:2.1rem 0 .7rem;font-size:clamp(1.3rem,1.15rem + .8vw,1.75rem)} .art__corpo ul,.art__corpo ol{padding-left:1.15rem;margin:0 0 1.15em} .art__corpo li{margin-bottom:.5rem;font-size:1.04rem;line-height:1.65} .art__corpo strong{font-weight:500} /* partilha, no fim do artigo */ .partilha{margin-top:2.5rem;padding-top:1.6rem;border-top:1px solid var(--linha); display:grid;gap:.85rem} .partilha__t{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:var(--tinta-suave);font-weight:500;margin:0} .partilha__b{display:flex;flex-wrap:wrap;gap:.55rem} .partilha__b a,.partilha__b button{display:inline-flex;align-items:center;gap:.5rem; min-height:46px;padding:.6rem 1rem;border-radius:var(--r);text-decoration:none; border:1px solid var(--linha);background:var(--branco);color:var(--tinta);cursor:pointer; font:inherit;font-size:.9rem; transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)} .partilha__b a:hover,.partilha__b button:hover{border-color:var(--teal-texto); color:var(--teal-texto);background:rgba(63,180,156,.08)} .partilha__b svg{width:18px;height:18px;flex:none} .partilha__b .copiado{background:var(--teal-fundo);color:var(--branco);border-color:var(--teal-fundo)} .relacionados{margin-top:2.75rem;padding-top:2rem;border-top:1px solid var(--linha)} .relacionados h2{font-size:1.25rem;margin-bottom:1.4rem} @media (min-width:1000px){ .art__capa{padding-block:2.5rem 1.75rem} .art__capa .wrap{padding-top:calc(var(--topo-h) + .5rem)} .art__hero img{aspect-ratio:21/9} .partilha{grid-auto-flow:column;justify-content:space-between;align-items:center} } /* ---------- blocos de texto com imagem (páginas internas) ---------- */ .dupla{display:grid;gap:1.75rem;align-items:center} .dupla img{border-radius:var(--r);width:100%} .dupla--inv .dupla__txt{order:2} .retrato{position:relative} .retrato > img{aspect-ratio:4/5;object-fit:cover;width:100%;border-radius:var(--r)} .selo-flut{position:absolute;right:-.5rem;bottom:-1rem;background:var(--branco); border-radius:var(--r);padding:.75rem .8rem;box-shadow:0 14px 34px rgba(23,27,32,.2); width:min(13rem,62%)} .selo-flut img{width:100%;height:auto;border-radius:0;aspect-ratio:auto;object-fit:contain;display:block} .selo-flut p{margin:.4rem 0 0;font-size:.68rem;line-height:1.4;color:var(--tinta-suave)} /* grelha de condições tratadas */ .condicoes{display:grid;gap:.6rem;margin:1.5rem 0} .cond{display:flex;gap:.7rem;align-items:flex-start;padding:.85rem 1rem;background:var(--branco); border:1px solid var(--linha);border-radius:var(--r);font-size:.95rem} .cond svg{flex:none;width:1.05rem;height:1.05rem;margin-top:.28rem;stroke:var(--teal-texto); fill:none;stroke-width:2.5;stroke-linecap:round} /* números de prova (dados reais, nunca inventados) */ .provas{display:grid;gap:0;margin:1.75rem 0} .prova{padding:1.1rem 0;border-top:1px solid rgba(255,255,255,.28)} .prova:first-child{border-top:0} .prova b{display:block;font-size:1.5rem;font-weight:700;letter-spacing:-.03em;color:var(--branco)} .prova span{font-size:.88rem;color:rgba(255,255,255,.9)} @media (min-width:640px){ .dupla{grid-template-columns:1fr 1fr;gap:2.25rem} .dupla--inv .dupla__txt{order:0} .condicoes{grid-template-columns:1fr 1fr} .provas{grid-template-columns:repeat(3,1fr);column-gap:2rem} .prova{border-top:0;border-left:1px solid rgba(255,255,255,.28);padding:0 1.5rem} .prova:first-child{padding-left:0;border-left:0} } @media (min-width:1000px){ .dupla{grid-template-columns:1.05fr .95fr;gap:3.5rem} .dupla--larga{grid-template-columns:.85fr 1.15fr} .condicoes{grid-template-columns:repeat(3,1fr)} } /* ---------- galeria do espaço ---------- */ .galeria{display:grid;gap:.7rem;margin-top:1.5rem} .galeria figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden} .galeria img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3; transition:transform .8s var(--ease)} .galeria figure:hover img{transform:scale(1.035)} .galeria figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .95rem .8rem; font-size:.8rem;color:var(--branco);font-weight:500; /* 🔑 O degradê é o fundo real da legenda. Se for fraco, uma fotografia clara por baixo deixa a primeira linha por ler — e nenhuma medição de CSS o apanha, porque a cor está na imagem. Vai escuro o suficiente para o branco se ler mesmo sobre a parte mais clara. */ background:linear-gradient(to top,rgba(23,27,32,.92) 0%,rgba(23,27,32,.72) 55%,transparent 100%)} .galeria .larga{grid-column:1/-1} .galeria .larga img{aspect-ratio:16/10;object-position:center 42%} @media (min-width:640px){ .galeria{grid-template-columns:1fr 1fr;gap:.9rem} } @media (min-width:1000px){ .galeria{grid-template-columns:repeat(3,1fr);gap:1rem} .galeria .larga img{aspect-ratio:2/1;object-position:center 44%} } /* ---------- loja: o que o livro inclui ---------- */ .inclui{display:grid;gap:0;margin:1.5rem 0} .inclui div{padding:1.1rem 0;border-top:1px solid var(--risco,rgba(255,255,255,.28))} .inclui div:first-child{border-top:0} .inclui b{display:block;font-weight:700;margin-bottom:.2rem;color:var(--txt,var(--branco))} .inclui p{margin:0;font-size:.92rem;color:var(--txt2,rgba(255,255,255,.92))} /* cartões dos cadernos */ .ebooks{display:grid;gap:1.1rem;margin-top:1.75rem; /* 🔴 Estavam `repeat(4,1fr)` a partir dos 1000px — mas vivem DENTRO da coluna direita da `.oferta`, que é meia largura: davam cartões de 85px, com uma palavra por linha. Aqui as colunas nascem do espaço real, nunca do ecrã. */ grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr))} .ebook{border:1px solid var(--linha);border-radius:var(--r);background:var(--branco); overflow:hidden;display:flex;flex-direction:column} .ebook img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--papel-2); padding:.9rem} .ebook__in{padding:1.1rem 1.1rem 1.25rem;display:flex;flex-direction:column;flex:1} .ebook h3{font-size:1.02rem;margin-bottom:.45rem} .ebook p{font-size:.9rem;color:var(--tinta-suave);margin-bottom:.9rem} .ebook__pvp{margin-top:auto;display:flex;align-items:baseline;gap:.5rem} .ebook__pvp b{font-size:1.25rem;font-weight:700;letter-spacing:-.02em} .ebook__pvp span{font-size:.8rem;color:var(--tinta-suave)} @media (min-width:640px){ .inclui{grid-template-columns:1fr 1fr;column-gap:2rem} .inclui div:nth-child(2){border-top:0} } .post__img--vazia{display:grid;place-content:center;aspect-ratio:3/2; background:var(--papel-2);border-radius:var(--r);color:var(--linha)} .post__img--vazia svg{width:44%;height:auto;opacity:.5} .paginacao .ant{margin-right:.35rem} /* ─────────────── E · TAÇA SOBRE O TEAL DELA ─────────────── A imagem que o Paulo trouxe: taça vista de cima sobre teal, com o lado esquerdo livre. O fundo da secção usa o teal EXACTO amostrado da imagem (#359A8B), para a fotografia fundir sem costura e a secção poder ser mais larga do que ela. O texto ocupa o lado vazio. Em telemóvel entra a versão vertical, com o texto em cima. */ .hero--e{--teal-img:#359A8B; position:relative;padding:0;margin-top:calc(var(--topo-h) * -1); background:var(--teal-img);isolation:isolate;overflow:hidden; display:flex;align-items:center;min-height:100vh;min-height:100svh} .hero--e::after{display:none} .hero--e__img{position:absolute;inset:0;z-index:-2} .hero--e__img img{width:100%;height:100%;object-fit:cover;object-position:right center} /* Véu só do lado do texto — a imagem tem a zona lisa à esquerda, é seguro. 🔴 Medido: o verde do hero (#359A8B) é claro. Sem véu dá 3,4:1 com branco, e o véu anterior já tinha desvanecido para ~.09 onde as últimas linhas acabavam: a sobrancelha, a entrada e a linha de provas ficavam entre 2,9 e 3,3:1. Agora segura-se ≥.34 até aos 52% — 5,9:1 — e só depois desaparece, para a fotografia continuar limpa. */ .hero--e__veu{position:absolute;inset:0;z-index:-1; background:linear-gradient(96deg,rgba(23,27,32,.64) 0%,rgba(23,27,32,.60) 34%, rgba(23,27,32,.50) 56%,rgba(23,27,32,.20) 72%,transparent 86%)} .hero--e .wrap{width:100%;padding-top:calc(var(--topo-h) + 2rem);padding-bottom:2.5rem} .hero--e__txt{max-width:32rem} .hero--e .eyebrow{color:var(--branco)} .hero--e .eyebrow::before{background:var(--branco)} .hero--e h1{color:var(--branco);font-size:clamp(2.1rem,1.25rem + 3.7vw,4.3rem); margin-bottom:1rem;text-shadow:0 2px 24px rgba(23,27,32,.28)} .hero--e h1 .ln:first-child{font-size:.56em;font-weight:400; color:rgba(255,255,255,.78);margin-bottom:.18em} .hero--e h1 .ln:last-child{color:var(--branco)} .hero--e__lead{font-size:1.06rem;color:var(--branco);max-width:29ch; margin-bottom:1.5rem;text-shadow:0 1px 16px rgba(23,27,32,.24)} .hero--e__ctas{display:grid;gap:.6rem} .hero--e__ctas .btn{width:100%} .hero--e .btn--acao{background:var(--branco);color:#1d6d5f;box-shadow:0 6px 22px rgba(0,0,0,.22)} .hero--e .btn--acao:hover{background:var(--papel);color:var(--carvao)} .hero--e .btn--linha{color:var(--branco);box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.55)} .hero--e .btn--linha:hover{background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1.6px var(--branco)} .hero--e__prova{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin-top:1.35rem; font-size:.83rem;color:rgba(255,255,255,.95);line-height:1.5} .hero--e__prova b{font-weight:700;color:var(--branco)} .hero--e__prova span{display:inline-flex;align-items:center;gap:.4rem} .hero--e__prova span::before{content:"";width:5px;height:5px;border-radius:50%; background:var(--branco);flex:none} @media (min-width:1000px){ .hero--e .wrap{padding-top:calc(var(--topo-h) + 3.5rem);padding-bottom:4rem} .hero--e__txt{max-width:34rem} .hero--e__ctas{grid-auto-flow:column;justify-content:start} .hero--e__ctas .btn{width:auto;padding-inline:1.7rem} /* 🔴 ATENÇÃO: o véu tem TRÊS definições — a base, esta (ecrã grande) e a de telemóvel, mais abaixo. É esta que manda no desktop. Editei a base duas vezes a pensar que estava a mudar o hero e os números não mexiam. Valores medidos sobre a fotografia, não escolhidos a olho. O degradê da maqueta caía para .08 aos 46%, mas o texto vai até aos 49%: a sobrancelha ficava a 3,1:1 e a linha de provas a 3,4:1, abaixo dos 4,5:1 exigidos. 🔴 E cheguei a pôr .56 aqui, o que era o dobro do preciso — a medição que me levou lá estava a fotografar o botão branco ao lado, não o fundo. Isso escurecia o verde DELA em 60% no meio do hero, e a cor da marca não se gasta para compensar um erro meu. Calculado a partir dos pixels da própria fotografia, sem véu: o mínimo é .23. Fica .28, com folga, e só na faixa onde há texto — dos 64% para a direita a taça fica com a cor intacta. */ /* 🔴 Recalibrado a 30 Ago para a fotografia APROVADA no briefing (Catarina no consultório): a parede é creme, não o verde da taça. Medido no ecrã, com o véu antigo: 3,0:1 de média e 1,9:1 no pior ponto — o briefing exige WCAG 2.2 AA (4,5:1). O véu agora segura .58 até aos 52% e só depois desaparece, para a Catarina e o InBody ficarem com a luz intacta. */ .hero--e__veu{background:linear-gradient(96deg,rgba(23,27,32,.62) 0%, rgba(23,27,32,.58) 30%,rgba(23,27,32,.50) 52%, rgba(23,27,32,.16) 66%,transparent 80%)} } @media (max-width:999px){ /* 🔴 30 Ago — a fotografia mudou e a regra antiga deixou de servir. Com a foto da Catarina, o texto por cima passava-lhe pelo rosto e o contraste caía a 1,9:1. O briefing manda: «separar texto e imagem em blocos se o fundo comprometer a leitura; não cortar o rosto». É isso que se faz aqui — a fotografia em cima, inteira, e o texto por baixo sobre carvão sólido. 🔑 E a copy volta toda: esconder o lead no telemóvel era reduzir texto vinculativo, que o briefing não permite. */ .hero--e{min-height:auto;flex-direction:column;justify-content:flex-start; background:var(--carvao);overflow:visible;margin-top:0} .hero--e__img{position:relative;inset:auto;z-index:0; height:50svh;min-height:300px;width:100%} .hero--e__img img{width:100%;height:100%;object-fit:cover; object-position:62% 16%} .hero--e__veu{display:none} .hero--e .wrap{padding-top:1.6rem;padding-bottom:2.2rem;position:relative;z-index:1} .hero--e__txt{max-width:none} .hero--e h1{font-size:clamp(1.8rem,1.05rem + 4.4vw,2.5rem);margin-bottom:.9rem} .hero--e__lead{display:block;max-width:none;font-size:1rem} .hero--e__ctas .btn--linha{display:block} .hero--e__prova{display:flex} .hero--e__ctas .btn{min-height:52px} .hero--e__txt{max-width:22rem} } /* ── a prova passa a viver com a fotografia dela (era a secção 2) ── */ .prova-dela{position:relative;isolation:isolate} .prova-dela__grid{display:grid;gap:1.75rem;align-items:center} .prova-dela__foto img{width:100%;aspect-ratio:4/5;object-fit:cover; object-position:center 15%;border-radius:var(--r)} .prova-dela__lista{display:grid;gap:0} .prova-dela__lista div{padding:1.05rem 0;border-top:1px solid var(--linha)} .prova-dela__lista div:first-child{border-top:0;padding-top:0} .prova-dela__lista dt{font-size:.65rem;letter-spacing:.13em;text-transform:uppercase; color:var(--teal-texto);font-weight:500;margin-bottom:.25rem} .prova-dela__lista dd{margin:0;font-size:1rem;font-weight:700;line-height:1.35} .prova-dela__lista dd span{display:block;font-weight:400;font-size:.86rem; color:var(--tinta-suave);margin-top:.15rem} .prova-dela__selo{height:36px;width:auto;margin-top:.7rem} @media (min-width:900px){ .prova-dela__grid{grid-template-columns:.8fr 1.2fr;gap:3.5rem} } /* ================================================================== PREÇÁRIO EM CARTÕES Os valores vivem num sítio só (`precario.py`, que no WordPress é o ecrã «Preçário» do painel). Ela muda ali e muda em todo o site — que é o que impede voltar a haver dois preçários a contradizerem-se. ================================================================== */ .cartoes{display:grid;gap:1rem;align-items:start} /* 🔴 A secção teal define `color:branco` para tudo o que está lá dentro. Um cartão branco herdava-o e o texto ficava branco sobre branco — os itens da lista desapareciam. Um cartão claro repõe sempre a sua própria cor. */ .cartao{color:var(--tinta); background:var(--branco);border-radius:10px;padding:1.6rem 1.4rem 1.5rem; display:flex;flex-direction:column;position:relative; box-shadow:0 2px 4px rgba(23,27,32,.06),0 12px 32px rgba(23,27,32,.1); transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .cartao:hover{transform:translateY(-3px); box-shadow:0 4px 8px rgba(23,27,32,.08),0 20px 44px rgba(23,27,32,.16)} .cartao--destaque{padding-top:2.1rem; box-shadow:0 3px 6px rgba(23,27,32,.1),0 22px 50px rgba(23,27,32,.22)} .cartao__selo{position:absolute;top:-.72rem;left:1.4rem; background:var(--carvao);color:var(--teal);font-size:.64rem;font-weight:700; letter-spacing:.13em;text-transform:uppercase;padding:.4rem .8rem;border-radius:100px} .cartao__et{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase; color:var(--teal-texto);font-weight:500;margin:0 0 .5rem} .cartao__v{font-size:3rem;font-weight:700;line-height:1;letter-spacing:-.045em; margin:0 0 .35rem;color:var(--tinta);display:flex;align-items:baseline;gap:.1rem} .cartao__v i{font-style:normal;font-size:.36em;font-weight:400;color:var(--tinta-suave)} .cartao__res{margin:0 0 1.1rem;font-size:.92rem;color:var(--tinta-suave); padding-bottom:1.1rem;border-bottom:1px solid var(--linha)} .cartao__inc{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.6rem; font-size:.92rem} .cartao__inc li{display:flex;gap:.6rem;align-items:flex-start;line-height:1.45} .cartao__inc svg{flex:none;width:1rem;height:1rem;margin-top:.22rem; stroke:var(--teal-texto);fill:none;stroke-width:2.6;stroke-linecap:round; stroke-linejoin:round} .cartao .btn{margin-top:auto;width:100%} /* o botão do cartão é sempre sólido, mesmo dentro da secção teal */ .teal .cartao .btn--acao{background:var(--teal);color:var(--carvao); box-shadow:0 3px 14px rgba(62,177,165,.30)} .teal .cartao .btn--acao:hover{background:var(--teal-claro);color:var(--carvao)} /* os outros serviços: em linha, sem competir com as consultas */ /* Os outros serviços — uma lista de preços, não três blocos de texto à solta. 🔴 Antes eram nome/valor/nota empilhados em três colunas, sem caixa nem alinhamento: lia-se como sobras debaixo dos cartões, e os valores competiam com os das consultas. Agora é uma linha por serviço, nome à esquerda e valor à direita, com um filete a separar — a forma que toda a gente já sabe ler numa tabela de preços, e claramente secundária às consultas. */ .extras{display:grid;gap:0;margin-top:2rem; border-top:1px solid var(--risco,rgba(255,255,255,.26))} .extras__t{grid-column:1/-1;margin:0 0 .2rem;font-size:.68rem;letter-spacing:.13em; text-transform:uppercase;font-weight:600;color:var(--txt2,rgba(255,255,255,.88))} .extra{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .9rem; padding:.95rem 0;border-top:1px solid var(--risco,rgba(255,255,255,.16))} .extra:first-of-type{border-top:0} .extra__n{margin:0;flex:1 1 12rem;font-size:.96rem;font-weight:600; color:var(--txt,var(--branco))} .extra__v{margin:0;order:3;font-size:1.1rem;font-weight:700;letter-spacing:-.02em; color:var(--txt,var(--branco));white-space:nowrap} .extra__d{margin:0;flex:1 1 100%;font-size:.82rem;line-height:1.45; color:var(--txt2,rgba(255,255,255,.88))} @media (min-width:700px){ .cartoes{grid-template-columns:repeat(3,1fr);gap:1.1rem} .extras{grid-template-columns:repeat(3,1fr);column-gap:2rem} .extra{border-top:0;padding:1.1rem 0 0} } @media (min-width:1000px){ .cartoes{gap:1.4rem;align-items:center} .cartao{padding:1.9rem 1.7rem 1.75rem} .cartao--destaque{padding:2.5rem 1.7rem 2rem;transform:scale(1.045)} .cartao--destaque:hover{transform:scale(1.045) translateY(-3px)} .cartao__v{font-size:3.4rem} } /* crédito da casa, discreto, no fim do rodapé */ .rodape__nos{margin-left:auto;color:rgba(247,246,243,.5)} .rodape__nos a{color:var(--teal);text-decoration:none;font-weight:500} .rodape__nos a:hover{text-decoration:underline} @media (max-width:999px){ .rodape__nos{margin-left:0} } /* resumo do artigo na listagem, como no site dela */ .post__res{margin:0;font-size:.88rem;line-height:1.5;color:var(--tinta-suave)} .post:hover .post__res{color:var(--tinta-suave)} /* ---------- perguntas frequentes ---------- */ .faqs{max-width:74ch;margin-inline:auto} .faq{border-top:1px solid var(--linha)} .faq:last-child{border-bottom:1px solid var(--linha)} .faq summary{cursor:pointer;list-style:none;padding:1.25rem 2.5rem 1.25rem 0; position:relative;font-weight:500;font-size:1.05rem;line-height:1.4; transition:color .2s var(--ease)} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--teal-texto)} .faq summary::after{content:"";position:absolute;right:.35rem;top:1.6rem; width:11px;height:11px;border-right:2px solid var(--teal-texto); border-bottom:2px solid var(--teal-texto);transform:rotate(45deg); transition:transform .25s var(--ease)} .faq[open] summary::after{transform:rotate(-135deg)} .faq[open] summary{color:var(--teal-texto)} .faq__r{padding:0 2.5rem 1.35rem 0;margin:0;color:var(--tinta-suave); font-size:.98rem;line-height:1.65} /* ---------- aviso de cookies ---------- */ /* ---------- aviso de cookies ---------- 🔑 É a primeira coisa que se vê no site, por isso é desenhado como o site: o carvão da marca, o verde-água só no que se toca, os cantos e a sombra dos cartões, o filete de marca em cima. Curto, encostado a um canto, e a sair do caminho com a mesma curva de todo o resto. 🔴 O que não se negoceia: recusar tem exactamente o mesmo peso visual que aceitar — mesmo tamanho, mesma letra, lado a lado. Um aviso em que o «não» é mais difícil de carregar do que o «sim» não é uma escolha, é um funil. */ .cookies{position:fixed;z-index:95; left:var(--gut);right:var(--gut); bottom:calc(var(--gut) + env(safe-area-inset-bottom)); max-width:26rem; background:var(--carvao);color:var(--papel); border-radius:14px;overflow:hidden; box-shadow:0 2px 6px rgba(23,27,32,.2),0 18px 46px rgba(23,27,32,.38); transform:translateY(calc(100% + var(--gut) + 1.5rem)); transition:transform .55s var(--ease)} .cookies::before{content:"";display:block;height:3px; background:linear-gradient(90deg,var(--teal),var(--teal-claro))} .cookies.on{transform:none} .cookies__in{padding:1.05rem 1.15rem 1.1rem} .cookies p{margin:0 0 .9rem;font-size:.82rem;line-height:1.55; color:rgba(247,246,243,.82)} .cookies p b{color:var(--papel);font-weight:600} .cookies p a{color:var(--teal-claro);text-underline-offset:2px} .cookies p a:hover{color:var(--teal)} .cookies__b{display:grid;grid-template-columns:1fr 1fr;gap:.5rem} .cookies__b button{min-height:38px;padding:.5rem .9rem;border-radius:8px; border:0;font:inherit;font-size:.83rem;font-weight:600;cursor:pointer; letter-spacing:.01em; transition:background .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease)} .cookies__sim{background:var(--teal);color:var(--carvao)} .cookies__sim:hover{background:var(--teal-claro)} .cookies__nao{background:transparent;color:rgba(247,246,243,.9); box-shadow:inset 0 0 0 1.4px rgba(247,246,243,.26)} .cookies__nao:hover{box-shadow:inset 0 0 0 1.4px rgba(247,246,243,.6);color:var(--papel)} body.tem-cookies .barra{bottom:auto} @media (min-width:700px){ .cookies{left:auto;right:var(--gut);max-width:24rem} } /* ================================================================== CONTACTOS ================================================================== */ .contactos{display:grid;gap:2rem;align-items:start} .vias{display:grid;gap:.7rem} .via{display:flex;gap:.9rem;align-items:flex-start;padding:1.15rem 1.2rem; background:var(--branco);border:1px solid var(--linha);border-radius:var(--r); text-decoration:none;color:var(--tinta); transition:border-color .2s var(--ease),transform .18s var(--ease), box-shadow .2s var(--ease)} .via:hover{border-color:var(--teal-texto);transform:translateY(-2px); box-shadow:0 8px 22px rgba(23,27,32,.09)} .via__ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid; place-content:center;background:rgba(63,180,156,.14)} .via__ic svg{width:19px;height:19px;stroke:var(--teal-texto);fill:none; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .via b{display:block;font-size:.98rem;font-weight:700;margin-bottom:.1rem} .via span{display:block;font-size:.86rem;color:var(--tinta-suave);line-height:1.45} /* mapa que só carrega quando a pessoa quer: nada de terceiros sem consentir */ .mapa{position:relative;border-radius:var(--r);overflow:hidden; background:var(--papel-2);aspect-ratio:16/10;display:grid;place-content:center; text-align:center;padding:1.5rem;border:1px solid var(--linha)} .mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .mapa__pre p{margin:0 0 1rem;font-size:.92rem;color:var(--tinta-suave);max-width:34ch} .mapa__pre svg{width:30px;height:30px;stroke:var(--teal-texto);fill:none; stroke-width:1.8;margin-bottom:.7rem} /* formulário de dúvidas na própria página */ .form-duvida{background:var(--branco);border:1px solid var(--linha); border-radius:var(--r);padding:1.5rem 1.35rem} .form-duvida h2{font-size:1.3rem;margin-bottom:.4rem} .form-duvida > p{color:var(--tinta-suave);font-size:.93rem;margin-bottom:1.3rem} .form-duvida textarea{font:inherit;font-size:16px;padding:.8rem .9rem; border:1.5px solid var(--linha);border-radius:var(--r);background:var(--branco); width:100%;min-height:120px;resize:vertical;line-height:1.55; transition:border-color .18s var(--ease)} .form-duvida textarea:focus{border-color:var(--teal-texto);outline:0; box-shadow:0 0 0 3px rgba(63,180,156,.24)} .form-duvida .btn{width:100%;margin-top:1.2rem} .form-duvida .modal__nota{text-align:left;margin-top:.8rem} @media (min-width:900px){ .contactos{grid-template-columns:1fr 1fr;gap:3rem} .form-duvida{padding:2rem 1.85rem} } /* botão que parece uma ligação, dentro de texto corrido */ .lig{background:none;border:0;padding:0;font:inherit;color:var(--teal-texto); text-decoration:underline;cursor:pointer} .lig:hover{color:var(--carvao)} /* cookies-escondido-menu 🔴 O aviso de cookies vive em `position:fixed` no fundo do ecrã e tapava o botão «Marcar consulta» dentro do painel do menu — a única acção do painel, escondida por uma barra que já lá estava. Enquanto o menu está aberto o aviso sai de cena; volta ao fechar. O consentimento não se dispensa, adia-se. */ .topo:has(.wp-block-navigation__responsive-container.is-menu-open) ~ * .cookies, body:has(.wp-block-navigation__responsive-container.is-menu-open) .cookies{ opacity:0;visibility:hidden;pointer-events:none; transition:opacity .25s var(--ease),visibility .25s var(--ease)} /* ============================================================================ HERO EM SPLIT — 30 Ago 2026 🔑 O briefing (p. 6) descreve o enquadramento assim: «Texto HTML vivo no lado esquerdo; Catarina e InBody no lado direito.» Isso é uma GRELHA, não um véu por cima da fotografia — e a grelha é das poucas coisas que o briefing nos deixa decidir. Com o véu, a fotografia dela perdia a luz toda e o conjunto ficava igual a qualquer clínica. 🔴 Ganha-se também o contraste sem truques: texto carvão sobre papel dá 14,8:1, contra os 4,55:1 no limite que o véu conseguia. ============================================================================ */ .hero--split{background:var(--papel);min-height:auto;display:grid; align-items:stretch;overflow:hidden;margin-top:0} .hero--split .hero--e__veu{display:none} .hero--split .hero--e__img{position:relative;inset:auto;z-index:0; height:52svh;min-height:300px;width:100%} .hero--split .hero--e__img img{width:100%;height:100%;object-fit:cover; object-position:62% 16%} .hero--split .wrap{padding-top:2rem;padding-bottom:2.6rem;position:relative;z-index:1} .hero--split .hero--e__txt{max-width:none} .hero--split h1{color:var(--carvao)} .hero--split h1 .ln:first-child{color:var(--tinta-suave)} .hero--split h1 .ln:last-child{color:var(--carvao)} .hero--split .eyebrow{color:var(--teal-texto)} .hero--split .eyebrow::before{background:var(--teal-texto)} .hero--split .hero--e__lead{color:var(--tinta-suave);max-width:38ch;display:block} .hero--split .hero--e__prova{color:var(--tinta-suave);display:flex} .hero--split .hero--e__prova b{color:var(--carvao)} .hero--split .hero--e__prova span::before{background:var(--teal)} .hero--split .btn--acao{background:var(--teal-fundo);color:#fff;box-shadow:0 6px 22px rgba(41,117,109,.24)} .hero--split .btn--acao:hover{background:var(--carvao);color:#fff} .hero--split .btn--linha{color:var(--teal-texto);box-shadow:inset 0 0 0 1.6px rgba(41,117,109,.42)} .hero--split .btn--linha:hover{background:rgba(63,180,156,.12);color:var(--carvao)} .hero--split .hero--e__ctas .btn--linha{display:inline-flex} @media (min-width:1000px){ /* Duas colunas: o texto respira à esquerda, a fotografia fica inteira à direita — sem uma única camada por cima dela. */ .hero--split{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); min-height:min(88svh,760px)} .hero--split .hero--e__img{order:2;height:100%;min-height:0} .hero--split .hero--e__img img{object-position:58% center} .hero--split .wrap{order:1;display:flex;align-items:center; padding-top:calc(var(--topo-h) + 2rem);padding-bottom:3rem; padding-right:clamp(1.5rem,3vw,3.5rem);max-width:none;margin-left:auto; width:100%} .hero--split .hero--e__txt{max-width:34rem;margin-left:auto} .hero--split .hero--e__ctas{grid-auto-flow:column;justify-content:start} } @media (min-width:1400px){ .hero--split .hero--e__txt{max-width:36rem} } @media (max-width:999px){ /* 🔴 Duas correcções medidas no telemóvel: a fotografia cortava-lhe o alto da cabeça e o hero não chegava a encher o ecrã. Agora o conjunto ocupa o ecrã inteiro (imagem em cima, texto por baixo a preencher o resto) e o corte começa no topo da imagem, para o rosto ficar sempre inteiro. */ .hero--split{min-height:100svh;grid-template-rows:auto 1fr;margin-top:0} .hero--split .hero--e__img{height:56svh;min-height:330px} .hero--split .hero--e__img img{object-position:62% 2%} .hero--split .wrap{display:flex;align-items:center; padding-top:1.5rem;padding-bottom:1.8rem} .hero--split .hero--e__lead{font-size:.98rem;max-width:none} } /* ---- BLOCO 2 da homepage · ASSINATURA (briefing p. 7) ---------------------- «Bloco com fundo branco, muito espaço negativo e sem fotografia.» É a única instrução de desenho que o briefing dá para este bloco, e é literal. */ .assinatura{background:var(--branco);text-align:center; padding-block:clamp(3.5rem,9vw,7.5rem)} .assinatura .wrap{max-width:52rem} .assinatura__frase{font-size:clamp(1.5rem,1rem + 2.2vw,2.6rem);line-height:1.18; font-weight:500;color:var(--carvao);letter-spacing:-.015em;margin:0 0 1.6rem; text-wrap:balance} .assinatura__txt{font-size:clamp(1rem,.96rem + .18vw,1.09rem);line-height:1.72; color:var(--tinta-suave);max-width:44rem;margin:0 auto;text-wrap:pretty} @media (min-width:1000px){ .assinatura__frase{margin-bottom:2rem} } /* ---- BLOCOS 3 e 4 da homepage · domínios e fases (briefing p. 7-8) -------- Os cartões têm título, texto e ordem fixos — o desenho é que é nosso. Grelha de seis em cima (fundo papel), três fases em baixo (fundo branco), para os dois conjuntos se lerem como coisas diferentes. */ .dominios{background:var(--papel);padding-block:clamp(3.5rem,7vw,6rem)} .fases{background:var(--branco);padding-block:clamp(3.5rem,7vw,6rem)} .sec__cab{max-width:44rem;margin-bottom:clamp(2rem,4vw,3.2rem)} .sec__t{font-size:clamp(1.55rem,1.1rem + 1.9vw,2.5rem);line-height:1.16; letter-spacing:-.018em;color:var(--carvao);margin:.5rem 0 1rem;text-wrap:balance} .sec__lead{font-size:1.03rem;line-height:1.72;color:var(--tinta-suave); max-width:40rem;text-wrap:pretty} .dominios__g{list-style:none;margin:0;padding:0;display:grid;gap:1px; background:var(--linha);border:1px solid var(--linha);border-radius:var(--r); overflow:hidden} .dom{background:var(--branco);padding:clamp(1.4rem,2.4vw,2rem); display:flex;flex-direction:column;gap:.55rem;transition:background .35s var(--ease)} .dom:hover{background:#fff} .dom__n{font-size:.76rem;font-weight:700;letter-spacing:.16em;color:var(--teal-texto)} .dom__t{font-size:1.07rem;line-height:1.3;font-weight:500;color:var(--carvao);margin:0} .dom__d{font-size:.9rem;line-height:1.62;color:var(--tinta-suave);margin:0} .dominios__nota{margin:1.6rem 0 0;font-size:.86rem;line-height:1.68; color:var(--tinta-suave);max-width:52rem} .fases__g{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem} .fase{border:1px solid var(--linha);border-radius:var(--r); padding:clamp(1.4rem,2.4vw,2rem);background:var(--papel); border-top:3px solid var(--teal);display:flex;flex-direction:column;gap:.5rem} .fase__id{font-size:1.5rem;font-weight:500;letter-spacing:-.02em;color:var(--teal-texto); line-height:1} .fase__t{font-size:1.05rem;font-weight:500;color:var(--carvao);margin:0;line-height:1.3} .fase__d{font-size:.9rem;line-height:1.62;color:var(--tinta-suave);margin:0} .fases__nota{margin:1.5rem 0 0;font-size:.88rem;line-height:1.66;color:var(--carvao); font-weight:500;max-width:46rem;padding-left:.9rem;border-left:3px solid var(--teal)} .fases__cta{margin:2rem 0 0} @media (min-width:720px){ .dominios__g{grid-template-columns:repeat(2,1fr)} .fases__g{grid-template-columns:repeat(3,1fr);gap:1.2rem} } @media (min-width:1080px){ .dominios__g{grid-template-columns:repeat(3,1fr)} } /* ---- BLOCO 2 · assinatura — composição editorial ------------------------- 🔑 A primeira versão era texto centrado, e texto centrado não é composição: é a ausência dela. A copy não se pode tocar, por isso o trabalho todo é de estrutura — grelha assimétrica, dois tamanhos com contraste real (a frase a 3,4rem, o corpo a 1,05rem: rácio 3,2), a segunda metade da frase noutra cor porque é a AFIRMAÇÃO e a primeira é a negação, e uma régua a segurar o conjunto. Continua sem fotografia e com o espaço negativo que o briefing exige — o espaço é que faz a frase ser lida devagar. */ .assinatura{background:var(--branco);text-align:left; padding-block:clamp(4.5rem,12vw,9.5rem)} .assinatura__g{max-width:min(72rem,92vw)} .assinatura__frase{margin:0;font-size:clamp(1.75rem,1.05rem + 3.1vw,3.4rem); line-height:1.12;font-weight:500;letter-spacing:-.028em;color:var(--carvao); max-width:20ch;text-wrap:balance} .assinatura__l1,.assinatura__l2{display:block} .assinatura__l2{color:var(--teal-texto)} .assinatura__txt{margin:clamp(2rem,4vw,3.2rem) 0 0;padding-top:clamp(1.6rem,3vw,2.4rem); border-top:1px solid var(--linha); font-size:clamp(.99rem,.95rem + .2vw,1.08rem);line-height:1.78; color:var(--tinta-suave);max-width:38rem;text-wrap:pretty} @media (min-width:900px){ /* Duas colunas desiguais: a frase manda, o corpo entra a meio e desce. A régua nasce na margem esquerda e só acompanha a coluna do texto. */ .assinatura__g{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); column-gap:clamp(2.5rem,6vw,7rem);align-items:start} .assinatura__frase{max-width:none;font-size:clamp(2.4rem,1.2rem + 2.6vw,3.6rem)} .assinatura__txt{margin-top:.6rem;max-width:34rem} } /* Afinação do bloco 2: a coluna do corpo estava a 45 caracteres por linha, quando a medida confortável são 65-75. Colunas mais equilibradas, frase um pouco menor para caber em duas linhas boas em vez de quatro curtas. */ .assinatura__g{max-width:min(78rem,93vw)} @media (min-width:900px){ .assinatura__g{grid-template-columns:minmax(0,1fr) minmax(0,.96fr); column-gap:clamp(2rem,4.5vw,5rem)} .assinatura__frase{font-size:clamp(2.15rem,1.1rem + 2.15vw,3.05rem)} .assinatura__txt{max-width:42rem;font-size:1.05rem} } /* 🔴 Especificidade: a regra da 1.ª versão era `.assinatura .wrap{max-width:52rem}` (0,2,0) e as afinações seguintes eram `.assinatura__g` (0,1,0) — nunca ganhavam, e o bloco ficou preso a 832px com o corpo a 34 caracteres por linha. Repete-se o mesmo peso para desfazer. */ .assinatura .wrap{max-width:min(78rem,93vw)} @media (min-width:900px){ .assinatura .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.96fr); column-gap:clamp(2rem,4.5vw,5rem);align-items:start} } /* ═══ BLOCO 2 · assinatura — versão FINAL «selo» (escolhida a 30 Ago) ═══════ Substitui as regras anteriores deste bloco. Todos os selectores levam dois níveis de propósito: a 1.ª versão tinha `.assinatura .wrap` (0,2,0) e as afinações de um nível nunca ganhavam. Agora todas pesam o mesmo ou mais. O símbolo da marca entra em marca de água a 4,5% — não é fotografia, é a própria identidade, e o briefing autoriza o padrão histórico em detalhes. */ .assinatura{background:var(--branco);position:relative;overflow:hidden; text-align:center;padding-block:clamp(4.5rem,11vw,8.5rem)} .assinatura .assinatura__marca{position:absolute;inset:0;display:grid; place-items:center;pointer-events:none;z-index:0} .assinatura .assinatura__marca img{width:clamp(280px,42vw,540px);height:auto; opacity:.045;filter:grayscale(1)} .assinatura .wrap{position:relative;z-index:1;display:block; max-width:min(64rem,92vw)} .assinatura .assinatura__frase{margin:0 auto; font-size:clamp(1.7rem,1rem + 2.6vw,3.25rem);line-height:1.14;font-weight:500; letter-spacing:-.03em;color:var(--carvao);max-width:19ch;text-wrap:balance} .assinatura .assinatura__l1, .assinatura .assinatura__l2{display:block} .assinatura .assinatura__l2{color:var(--teal-texto)} .assinatura .assinatura__risco{width:52px;height:2px;background:var(--teal); margin:clamp(1.8rem,3.5vw,2.6rem) auto 0;border:0} .assinatura .assinatura__txt{margin:clamp(1.6rem,3vw,2.2rem) auto 0;padding:0; border:0;font-size:clamp(1rem,.96rem + .2vw,1.06rem);line-height:1.8; color:var(--tinta-suave);max-width:62ch;text-wrap:pretty} /* ═══════════════════════════════════════════════════════════════════════════ PÁGINAS DO BRIEFING v3.1 — sistema de blocos Mobile-first: tudo o que está fora de media query é o telemóvel; as regras maiores só acrescentam colunas e escala. Nenhuma grelha de cartões iguais repetida: cada conjunto tem a forma que o conteúdo pede (etapas numeradas em linha do tempo, princípios em lista tipográfica sem caixas, níveis de evidência com a letra a mandar, perguntas em

nativo). ═══════════════════════════════════════════════════════════════════════════ */ /* ---- cabeçalho de página interior --------------------------------------- */ .pag-hero{background:var(--papel);padding-block:clamp(2.5rem,9vw,5rem) clamp(2.5rem,7vw,4.5rem); margin-top:calc(var(--topo-h) * -1);padding-top:calc(var(--topo-h) + clamp(2rem,7vw,4rem))} .pag-hero__t{font-size:clamp(1.9rem,1.15rem + 3.2vw,3.5rem);line-height:1.1; letter-spacing:-.03em;font-weight:500;color:var(--carvao);margin:.6rem 0 1.1rem; max-width:20ch;text-wrap:balance} .pag-hero__lead{font-size:clamp(1rem,.96rem + .3vw,1.15rem);line-height:1.75; color:var(--tinta-suave);max-width:56ch;margin:0;text-wrap:pretty} .pag-hero__cta{margin:clamp(1.6rem,3vw,2.2rem) 0 0} /* ---- cabeçalhos de secção ------------------------------------------------ */ .sec--branca{background:var(--branco)} .sec--branca,.etapas-sec,.niveis-sec,.perguntas,.compromisso,.limites,.fecho-pag{ padding-block:clamp(3rem,7vw,5.5rem)} .etapas-sec{background:var(--branco)} .niveis-sec{background:var(--papel)} .perguntas{background:var(--branco)} .compromisso{background:var(--papel)} .limites{background:var(--papel)} /* ---- 4 etapas: linha do tempo, não cartões ------------------------------- */ .etapas__g{list-style:none;margin:0;padding:0;display:grid;gap:0} .etapa{position:relative;padding:1.4rem 0 1.4rem 3.4rem;border-top:1px solid var(--linha)} .etapa:last-child{border-bottom:1px solid var(--linha)} .etapa__n{position:absolute;left:0;top:1.5rem;font-size:.78rem;font-weight:700; letter-spacing:.14em;color:var(--teal-texto)} .etapa__t{margin:0 0 .35rem;font-size:1.12rem;font-weight:500;color:var(--carvao)} .etapa__d{margin:0;font-size:.94rem;line-height:1.68;color:var(--tinta-suave);max-width:62ch} /* ---- figura com legenda -------------------------------------------------- */ .fig-lado{margin:clamp(2rem,4vw,3rem) 0 0;display:grid;gap:.9rem} .fig-lado img{width:100%;height:auto;border-radius:var(--r);display:block} .fig-lado figcaption{font-size:.86rem;line-height:1.66;color:var(--tinta-suave); max-width:60ch;padding-left:.9rem;border-left:2px solid var(--teal)} /* ---- princípios: lista tipográfica --------------------------------------- */ .princ__g{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem} .princ__t{margin:0 0 .3rem;font-size:1.02rem;font-weight:500;color:var(--carvao)} .princ__d{margin:0;font-size:.94rem;line-height:1.68;color:var(--tinta-suave);max-width:60ch} /* ---- níveis de evidência: a letra manda ---------------------------------- */ .niveis__g{list-style:none;margin:0;padding:0;display:grid;gap:1rem} .nivel{display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;align-items:start; padding:1.1rem 0;border-top:1px solid var(--linha)} .nivel__l{font-size:1.9rem;line-height:1;font-weight:700;color:var(--teal); letter-spacing:-.02em} .nivel__t{margin:0 0 .25rem;font-size:1rem;font-weight:500;color:var(--carvao)} .nivel__d{margin:0;font-size:.92rem;line-height:1.66;color:var(--tinta-suave);max-width:58ch} .niveis__nota{margin:1.6rem 0 0;font-size:.9rem;line-height:1.7;color:var(--carvao); max-width:62ch;font-weight:500} /* ---- framework ----------------------------------------------------------- */ .framework{background:var(--carvao);color:#fff;padding-block:clamp(3rem,7vw,5.5rem)} .framework .eyebrow{color:var(--teal-claro)} .framework .eyebrow::before{background:var(--teal-claro)} .framework .sec__t{color:#fff} .framework .sec__lead{color:rgba(255,255,255,.78)} .framework__g{display:grid;gap:2rem} .framework__ctas{display:grid;gap:.6rem;margin:1.8rem 0 0} .framework__ctas .btn{width:100%} .framework .btn--acao{background:var(--teal);color:var(--carvao)} .framework .btn--acao:hover{background:#fff;color:var(--carvao)} .framework .btn--linha{color:#fff;box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.5)} .framework .btn--linha:hover{background:rgba(255,255,255,.12)} .framework__leg{margin:1.1rem 0 0;font-size:.84rem;color:rgba(255,255,255,.62)} .framework__vis{border-radius:var(--r);overflow:hidden;background:#fff;min-height:60svh} .framework__vis object{width:100%;height:60svh;display:block} .framework__vis p{padding:1.4rem;color:var(--tinta-suave);font-size:.94rem} /* ---- 18 perguntas:

nativo (teclado e leitores de ecrã de graça) -- */ .pq__g{border-top:1px solid var(--linha)} .pq{border-bottom:1px solid var(--linha)} .pq__q{cursor:pointer;list-style:none;padding:1.15rem 2.4rem 1.15rem 0;position:relative; font-size:1rem;font-weight:500;color:var(--carvao);line-height:1.45; transition:color .25s var(--ease)} .pq__q::-webkit-details-marker{display:none} .pq__q::after{content:"";position:absolute;right:.35rem;top:1.5rem;width:11px;height:11px; border-right:2px solid var(--teal-texto);border-bottom:2px solid var(--teal-texto); transform:rotate(45deg);transition:transform .3s var(--ease)} .pq[open] .pq__q::after{transform:rotate(-135deg)} .pq__q:hover{color:var(--teal-texto)} .pq__q:focus-visible{outline:2px solid var(--teal-texto);outline-offset:3px;border-radius:3px} .pq__r{padding:0 0 1.4rem} .pq__r p{margin:0 0 .8rem;font-size:.95rem;line-height:1.75;color:var(--tinta-suave);max-width:68ch} .pq__ref a{font-size:.86rem;color:var(--teal-texto);font-weight:500} /* ---- compromisso público ------------------------------------------------- */ .compromisso__g{display:grid;gap:2.4rem} .compromisso__t{font-size:1.12rem;font-weight:500;color:var(--carvao);margin:0 0 1rem; padding-bottom:.6rem;border-bottom:2px solid var(--teal)} .compromisso__t--nao{border-bottom-color:#B4472E} .lista-clinica{list-style:none;margin:0;padding:0;display:grid;gap:.85rem} .lista-clinica li{position:relative;padding-left:1.5rem;font-size:.94rem;line-height:1.68; color:var(--tinta-suave);max-width:60ch} .lista-clinica li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px; border-radius:50%;background:var(--teal)} .lista-clinica--nao li::before{border-radius:0;height:2px;top:.85em;width:11px;background:#B4472E} .destaque{margin:2.4rem 0 0;font-size:1rem;line-height:1.72;color:var(--carvao);font-weight:500; max-width:64ch;padding-left:1rem;border-left:3px solid var(--teal)} /* ---- caixa de sinais de alarme ------------------------------------------- */ .alarme{margin:2rem 0 0;padding:1.3rem 1.4rem;background:#FDECE4;border:1px solid #F3D6C6; border-radius:var(--r)} .alarme__t{margin:0 0 .5rem;font-size:.8rem;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:#9A3412} .alarme__d{margin:0;font-size:.94rem;line-height:1.7;color:#7A3010;max-width:66ch} /* ---- fecho de página ----------------------------------------------------- */ .fecho-pag{background:var(--branco);text-align:center} .fecho-pag__t{font-size:clamp(1.5rem,1.1rem + 1.7vw,2.3rem);line-height:1.18;font-weight:500; letter-spacing:-.02em;color:var(--carvao);margin:0 auto;max-width:22ch;text-wrap:balance} .fecho-pag__d{margin:1rem auto 0;font-size:1rem;line-height:1.72;color:var(--tinta-suave); max-width:56ch} .fecho-pag__ctas{display:grid;gap:.6rem;margin:1.9rem auto 0;max-width:22rem} /* ═══ a partir do tablet ═══ */ @media (min-width:720px){ .etapas__g{grid-template-columns:repeat(2,1fr);column-gap:2.4rem} .etapa{border-top:2px solid var(--linha)} .princ__g{grid-template-columns:repeat(2,1fr);gap:2rem 2.6rem} .compromisso__g{grid-template-columns:repeat(2,1fr);gap:3rem} .framework__ctas{display:flex;gap:.7rem} .framework__ctas .btn{width:auto;padding-inline:1.6rem} .fecho-pag__ctas{display:flex;justify-content:center;max-width:none} .fig-lado{grid-template-columns:1.4fr 1fr;align-items:center;gap:1.8rem} .fig-lado figcaption{border-left:2px solid var(--teal);padding-left:1.1rem} } @media (min-width:1000px){ .etapas__g{grid-template-columns:repeat(4,1fr);column-gap:2rem} .etapa{padding-left:0;padding-top:2.6rem;border-top:2px solid var(--linha)} .etapa__n{top:1rem} .princ__g{grid-template-columns:repeat(3,1fr)} .niveis__g{grid-template-columns:repeat(2,1fr);column-gap:2.6rem} .framework__g{grid-template-columns:1fr 1.05fr;gap:3rem;align-items:center} .framework__vis object{height:64svh} .pq__q{font-size:1.06rem;padding-block:1.35rem} } /* ---- página Consultas ---------------------------------------------------- */ .precos-sec{background:var(--branco);padding-block:clamp(3rem,7vw,5.5rem)} .online{background:var(--papel);padding-block:clamp(3rem,7vw,5.5rem)} /* hero com fotografia: no telemóvel a imagem vem primeiro, a seguir o texto */ .pag-hero--img .pag-hero__g{display:grid;gap:1.8rem} .pag-hero--img .pag-hero__fig{margin:0;order:-1} .pag-hero--img .pag-hero__fig img{width:100%;height:auto;max-height:52svh;object-fit:cover; object-position:center 22%;border-radius:var(--r);display:block} /* modalidades: duas notas, sem caixas */ .modos__g{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem} .modo{padding-top:1.1rem;border-top:2px solid var(--teal)} .modo__t{margin:0 0 .4rem;font-size:1.08rem;font-weight:500;color:var(--carvao)} .modo__d{margin:0;font-size:.95rem;line-height:1.7;color:var(--tinta-suave);max-width:56ch} /* preços: o valor manda, o resto acompanha */ .precos__g{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem} .preco{border:1px solid var(--linha);border-radius:var(--r);padding:clamp(1.4rem,3vw,1.9rem); background:var(--papel);display:flex;flex-direction:column;gap:.55rem} .preco__t{margin:0;font-size:.98rem;font-weight:500;color:var(--carvao);line-height:1.35} .preco__v{margin:0;font-size:clamp(2rem,1.4rem + 1.6vw,2.7rem);line-height:1;font-weight:600; letter-spacing:-.03em;color:var(--teal-texto)} .preco__res{margin:0;font-size:.95rem;line-height:1.6;color:var(--carvao);font-weight:500} .preco__inc{margin:0;font-size:.88rem;line-height:1.66;color:var(--tinta-suave)} .preco__cta{margin:.6rem 0 0} .preco__cta .btn{width:100%} .precos__nota{margin:1.4rem 0 0;font-size:.87rem;line-height:1.68;color:var(--tinta-suave); max-width:64ch} /* InBody: fotografia + preço, em faixa */ .inbody{margin:clamp(2.2rem,4vw,3.2rem) 0 0;display:grid;gap:1.4rem; background:var(--carvao);border-radius:var(--r);overflow:hidden} .inbody__fig{margin:0} .inbody__fig img{width:100%;height:100%;max-height:44svh;object-fit:cover;object-position:center 18%;display:block} .inbody__txt{padding:clamp(1.4rem,3vw,2.2rem);color:#fff} .inbody__t{margin:0 0 .4rem;font-size:1.1rem;font-weight:500;color:#fff} .inbody__v{margin:0 0 .7rem;font-size:2rem;font-weight:500;color:var(--teal-claro);line-height:1} .inbody__d{margin:0 0 1.2rem;font-size:.94rem;line-height:1.7;color:rgba(255,255,255,.78);max-width:52ch} .inbody .btn--linha{color:#fff;box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.5)} .inbody .btn--linha:hover{background:rgba(255,255,255,.12)} /* passos da consulta online */ .passos__g{list-style:none;margin:clamp(1.6rem,3vw,2.4rem) 0 0;padding:0;display:grid;gap:1.2rem} .passo{padding-left:1rem;border-left:2px solid var(--linha)} .passo__t{margin:0 0 .3rem;font-size:.98rem;font-weight:500;color:var(--carvao)} .passo__d{margin:0;font-size:.92rem;line-height:1.66;color:var(--tinta-suave);max-width:56ch} .online__cols{display:grid;gap:2rem;margin:clamp(2rem,4vw,3rem) 0 0} .online__lim{margin:0;font-size:.94rem;line-height:1.72;color:var(--tinta-suave);max-width:60ch} @media (min-width:720px){ .modos__g{grid-template-columns:repeat(2,1fr);gap:2rem} .precos__g{grid-template-columns:repeat(3,1fr);gap:1.2rem} .inbody{grid-template-columns:.85fr 1.15fr;align-items:stretch;gap:0} .inbody__fig img{max-height:none} .passos__g{grid-template-columns:repeat(3,1fr);gap:1.6rem} .online__cols{grid-template-columns:repeat(2,1fr);gap:3rem} } @media (min-width:1000px){ .pag-hero--img .pag-hero__g{grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center} .pag-hero--img .pag-hero__fig{order:2} .pag-hero--img .pag-hero__fig img{max-height:none;aspect-ratio:4/5} .pag-hero--img .pag-hero__txt{order:1} } /* ---- homepage · blocos 5 a 14 -------------------------------------------- */ .metodo-home{background:var(--papel);padding-block:clamp(3rem,7vw,5.5rem)} .quem{background:var(--carvao);color:#fff;padding-block:clamp(3rem,7vw,5.5rem)} .plano{background:var(--branco);padding-block:clamp(3rem,7vw,5.5rem)} .evidencia{background:var(--papel);padding-block:clamp(3rem,7vw,5.5rem)} .testemunhos{background:var(--branco);padding-block:clamp(3rem,7vw,5.5rem)} .diario{background:var(--papel);padding-block:clamp(3rem,7vw,5.5rem)} .fecho-home{background:var(--carvao);color:#fff;text-align:center; padding-block:clamp(3.5rem,9vw,6.5rem)} .sec__cta{margin:clamp(1.6rem,3vw,2.2rem) 0 0;display:flex;flex-wrap:wrap;gap:.7rem} /* quem a vai acompanhar — em carvão, a fotografia a mandar */ .quem .eyebrow{color:var(--teal-claro)} .quem .eyebrow::before{background:var(--teal-claro)} .quem .sec__t{color:#fff;margin-bottom:.3rem} .quem__g{display:grid;gap:1.8rem} .quem__fig{margin:0} .quem__fig img{width:100%;height:auto;border-radius:var(--r);display:block} .quem__cargo{margin:0 0 1.2rem;font-size:1rem;color:var(--teal-claro);font-weight:500} .quem__d{margin:0 0 1rem;font-size:.97rem;line-height:1.76;color:rgba(255,255,255,.8);max-width:62ch} .quem__cred{margin:1.4rem 0 1.6rem;font-size:.85rem;line-height:1.72; color:rgba(255,255,255,.6);max-width:64ch;padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.16)} .quem .btn--linha{color:#fff;box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.45)} .quem .btn--linha:hover{background:rgba(255,255,255,.12)} /* ligação de texto simples */ .lnk{font-size:.9rem;font-weight:500;color:var(--teal-texto); border-bottom:1px solid rgba(40,113,106,.35);padding-bottom:1px} .lnk:hover{border-bottom-color:var(--teal-texto)} /* momentos da consulta */ .plano__g{display:grid;gap:2rem} .plano__fig{margin:0} .plano__fig img{width:100%;height:auto;border-radius:var(--r);display:block} .momentos__g{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem} .momento{padding-left:1rem;border-left:2px solid var(--teal)} .momento__t{margin:0 0 .2rem;font-size:.98rem;font-weight:500;color:var(--carvao)} .momento__d{margin:0;font-size:.93rem;line-height:1.68;color:var(--tinta-suave);max-width:56ch} /* selo do framework */ .evidencia__sel{display:inline-block;margin:0;padding:.5rem .9rem;font-size:.8rem; font-weight:500;letter-spacing:.06em;color:var(--teal-texto);background:var(--branco); border:1px solid var(--linha);border-radius:99px} /* testemunhos: citação a mandar, nome discreto */ .tst__g{list-style:none;margin:0;padding:0;display:grid;gap:2rem} .tst__q{margin:0 0 .7rem;padding:0;border:0;font-size:1.02rem;line-height:1.68; color:var(--carvao);max-width:56ch;quotes:"«" "»"} .tst__q::before{content:open-quote;color:var(--teal)} .tst__q::after{content:close-quote;color:var(--teal)} .tst__n{margin:0;font-size:.85rem;font-weight:500;letter-spacing:.04em;color:var(--tinta-suave)} /* oito áreas da biblioteca */ .areas__g{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem} .areas__g .area{display:inline-block;padding:.6rem 1rem;font-size:.9rem;font-weight:500; color:var(--carvao);background:var(--branco);border:1px solid var(--linha); border-radius:99px;transition:border-color .25s var(--ease),color .25s var(--ease)} .areas__g .area:hover{border-color:var(--teal);color:var(--teal-texto)} /* fecho da homepage */ .fecho-home__t{margin:0 auto;font-size:clamp(1.55rem,1.1rem + 1.9vw,2.5rem);line-height:1.2; font-weight:500;letter-spacing:-.022em;color:#fff;max-width:26ch;text-wrap:balance} .fecho-home__d{margin:1.1rem auto 0;font-size:1rem;line-height:1.74; color:rgba(255,255,255,.76);max-width:56ch} .fecho-home__cta{margin:2rem 0 0} .fecho-home .btn--acao{background:var(--teal);color:var(--carvao)} .fecho-home .btn--acao:hover{background:#fff} .fecho-home__nota{margin:1.1rem 0 0;font-size:.84rem;color:rgba(255,255,255,.55)} @media (min-width:720px){ .tst__g{grid-template-columns:repeat(3,1fr);gap:2.2rem} .momentos__g{gap:1.4rem} } @media (min-width:1000px){ .quem__g{grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:center} .plano__g{grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center} .plano__fig{order:2} } /* 🔴 CORRECÇÃO 30 Ago — texto invisível nos cartões de preço. O CSS antigo tem `.preco p{color:rgba(255,255,255,.92)}` (0,1,1), herdado do preçário que vivia sobre fundo teal escuro. Os cartões novos estão sobre papel claro e as minhas regras eram `.preco__v` (0,1,0) — perdiam sempre. Medido no ecrã: 1,08:1. Agora todas as cores desta secção levam dois níveis. */ .precos-sec .preco{background:var(--papel);color:var(--carvao)} .precos-sec .preco p{color:var(--tinta-suave)} .precos-sec .preco .preco__t{color:var(--carvao)} .precos-sec .preco .preco__v{color:var(--teal-texto)} .precos-sec .preco .preco__res{color:var(--carvao);font-weight:500} .precos-sec .preco .preco__inc{color:var(--tinta-suave)} .precos-sec .precos__nota{color:var(--tinta-suave)} .precos-sec .preco .btn--linha{color:var(--teal-texto); box-shadow:inset 0 0 0 1.6px rgba(40,113,106,.4)} .precos-sec .preco .btn--linha:hover{background:rgba(63,180,156,.12);color:var(--carvao)} /* ═══ PREÇÁRIO — lista editorial, não três caixas iguais ═══════════════════ 🔑 Três cartões do mesmo tamanho lado a lado é a resposta preguiçosa e lê-se como uma tabela de SaaS. Aqui o preço é o que a pessoa procura: fica grande, alinhado à direita, e o resto organiza-se à volta dele. Réguas em vez de caixas — o preçário de um consultório não precisa de molduras. */ .precos-sec .tarifas__g{list-style:none;margin:0;padding:0; border-top:1px solid var(--linha)} .precos-sec .tarifa{padding:clamp(1.5rem,3.5vw,2.3rem) 0; border-bottom:1px solid var(--linha);background:transparent} .precos-sec .tarifa__cab{display:flex;align-items:baseline;justify-content:space-between; gap:1rem;flex-wrap:wrap} .precos-sec .tarifa__t{margin:0;font-size:clamp(1.05rem,1rem + .3vw,1.25rem); font-weight:500;color:var(--carvao);line-height:1.3;max-width:26ch} .precos-sec .tarifa__v{margin:0;font-size:clamp(2.1rem,1.5rem + 1.8vw,3rem);line-height:1; font-weight:600;letter-spacing:-.035em;color:var(--teal-texto);font-variant-numeric:tabular-nums} .precos-sec .tarifa__res{margin:.6rem 0 0;font-size:1rem;line-height:1.6; color:var(--carvao);max-width:52ch} .precos-sec .tarifa__inc{list-style:none;margin:1rem 0 0;padding:0; display:flex;flex-wrap:wrap;gap:.45rem .5rem;max-width:64ch} .precos-sec .tarifa__inc li{font-size:.85rem;line-height:1.4;color:var(--tinta-suave); padding:.3rem .7rem;border:1px solid var(--linha);border-radius:99px;background:var(--branco)} .precos-sec .tarifa__cta{margin:1.2rem 0 0} .precos-sec .tarifa__cta .btn{width:100%} @media (min-width:820px){ .precos-sec .tarifa{display:grid;grid-template-columns:1fr auto; column-gap:clamp(1.5rem,4vw,3.5rem);align-items:start} .precos-sec .tarifa__cab{display:contents} .precos-sec .tarifa__t{grid-column:1;grid-row:1} .precos-sec .tarifa__v{grid-column:2;grid-row:1 / span 2;text-align:right; align-self:start;padding-top:.1rem} .precos-sec .tarifa__res{grid-column:1;grid-row:2;margin-top:.4rem} .precos-sec .tarifa__inc{grid-column:1;grid-row:3} .precos-sec .tarifa__cta{grid-column:1 / -1;grid-row:4;margin-top:1.3rem} .precos-sec .tarifa__cta .btn{width:auto;padding-inline:1.6rem} } /* ═══ InBody — composição sobreposta, a fotografia a mandar ════════════════ */ .precos-sec .inbody{margin:clamp(2.5rem,5vw,4rem) 0 0;display:block; background:transparent;border-radius:0;overflow:visible;position:relative} .precos-sec .inbody__fig{margin:0;border-radius:var(--r);overflow:hidden} .precos-sec .inbody__fig img{width:100%;height:auto;max-height:none;aspect-ratio:4/5; object-fit:cover;object-position:center 15%;display:block} .precos-sec .inbody__txt{position:relative;margin:-3rem 1rem 0;padding:clamp(1.5rem,4vw,2.2rem); background:var(--carvao);color:#fff;border-radius:var(--r); box-shadow:0 18px 44px rgba(23,27,32,.22)} .precos-sec .inbody__t{margin:0 0 .2rem;font-size:1.08rem;font-weight:500;color:#fff} .precos-sec .inbody__v{margin:0 0 .9rem;font-size:clamp(2.4rem,1.8rem + 2vw,3.4rem); line-height:1;font-weight:500;letter-spacing:-.035em;color:var(--teal-claro)} .precos-sec .inbody__d{margin:0 0 1.4rem;font-size:.95rem;line-height:1.72; color:rgba(255,255,255,.78);max-width:46ch} .precos-sec .inbody .btn--linha{color:#fff;box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.5); width:100%} .precos-sec .inbody .btn--linha:hover{background:rgba(255,255,255,.14)} @media (min-width:900px){ .precos-sec .inbody{display:grid;grid-template-columns:1fr 1fr;align-items:center} .precos-sec .inbody__fig{grid-column:1;grid-row:1} .precos-sec .inbody__fig img{aspect-ratio:5/6} .precos-sec .inbody__txt{grid-column:2;grid-row:1;margin:0 0 0 -4rem;z-index:2; padding:clamp(2rem,3.5vw,3rem)} .precos-sec .inbody .btn--linha{width:auto;padding-inline:1.6rem} } /* ═══ HONORÁRIOS — tabela, não montra ══════════════════════════════════════ 🔑 O que fazia isto parecer venda não era o preço: era um botão por linha, como numa página de planos de software. Aqui os honorários são informação e a marcação é um gesto só, no fim da secção. Sem caixas, sem molduras, sem selos de «mais procurado»: réguas finas, números tabulares alinhados e uma ligação de texto por linha, para quem já sabe o que quer. Contraste verificado: título 16:1, valor 5,3:1, corpo 6,3:1. */ .precos-sec .honorarios{list-style:none;margin:0;padding:0} .precos-sec .hon{padding:clamp(1.4rem,3.2vw,2rem) 0;border-top:1px solid var(--linha)} .precos-sec .hon:last-child{border-bottom:1px solid var(--linha)} .precos-sec .hon__t{margin:0;font-size:clamp(1.02rem,.98rem + .25vw,1.18rem); font-weight:500;color:var(--carvao);line-height:1.35;max-width:28ch} .precos-sec .hon__v{margin:.35rem 0 0;font-size:clamp(1.7rem,1.3rem + 1.3vw,2.35rem); line-height:1;font-weight:500;letter-spacing:-.03em;color:var(--carvao); font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.12em} .precos-sec .hon__m{font-size:.5em;font-weight:500;color:var(--teal-texto)} .precos-sec .hon__res{margin:.7rem 0 0;font-size:.98rem;line-height:1.62; color:var(--carvao);max-width:50ch} .precos-sec .hon__inc{margin:.45rem 0 0;font-size:.9rem;line-height:1.7; color:var(--tinta-suave);max-width:62ch} .precos-sec .hon__cta{margin:.9rem 0 0} .precos-sec .hon__cta a{font-size:.92rem;font-weight:500;color:var(--teal-texto); border-bottom:1px solid rgba(40,113,106,.32);padding-bottom:2px; display:inline-block;min-height:44px;line-height:2.6} .precos-sec .hon__cta a:hover{border-bottom-color:var(--teal-texto);color:var(--carvao)} .precos-sec .hon__cta a:focus-visible{outline:2px solid var(--teal-texto); outline-offset:3px;border-radius:2px} @media (min-width:820px){ /* O valor sobe para a mesma linha do nome, alinhado à direita, e o texto ocupa a coluna larga: lê-se como uma tabela de honorários, de cima a baixo. */ .precos-sec .hon{display:grid;grid-template-columns:minmax(0,1fr) auto; column-gap:clamp(2rem,5vw,4rem);align-items:baseline} .precos-sec .hon__t{grid-column:1;grid-row:1} .precos-sec .hon__v{grid-column:2;grid-row:1;margin:0;justify-content:flex-end} .precos-sec .hon__res{grid-column:1;grid-row:2} .precos-sec .hon__inc{grid-column:1;grid-row:3} .precos-sec .hon__cta{grid-column:1;grid-row:4} } /* ═══ PREÇÁRIO · painel escuro (escolhido a 30 Ago) ════════════════════════ 🔑 Terceira forma, e a que ficou: o que fazia as anteriores parecerem montra era haver um botão por serviço. Aqui o valor manda, o que inclui fica legível por baixo, e a marcação é UM gesto, no rodapé. Os CTA que o briefing define por serviço ficam como ligações de texto. Mobile-first: colunas empilhadas com régua entre elas; a partir dos 900px passam a três, separadas por filetes verticais. */ .precos-sec .painel-prec{background:var(--carvao);color:#fff;border-radius:8px; overflow:hidden;margin-top:clamp(1.8rem,4vw,2.6rem)} .precos-sec .painel-prec__g{list-style:none;margin:0;padding:0;display:grid} .precos-sec .pcol{padding:clamp(1.6rem,4vw,2.2rem); border-bottom:1px solid rgba(255,255,255,.13)} .precos-sec .pcol__num{margin:0 0 .3rem;font-size:clamp(2.8rem,2rem + 2.6vw,3.6rem); line-height:1;font-weight:400;letter-spacing:-.04em;color:#fff; font-variant-numeric:tabular-nums} .precos-sec .pcol__eu{font-size:.36em;font-weight:400;color:var(--teal-claro); margin-left:.14em;letter-spacing:0} .precos-sec .pcol__t{margin:0 0 .6rem;font-size:1rem;font-weight:500;color:#fff; line-height:1.35} .precos-sec .pcol__r{margin:0 0 .7rem;font-size:.94rem;line-height:1.62; color:rgba(255,255,255,.76);max-width:42ch} .precos-sec .pcol__i{margin:0;font-size:.85rem;line-height:1.7; color:rgba(255,255,255,.56);max-width:46ch} .precos-sec .pcol__cta{margin:1rem 0 0} .precos-sec .pcol__cta a{font-size:.88rem;font-weight:500;color:var(--teal-claro); border-bottom:1px solid rgba(107,203,193,.4);padding-bottom:2px; display:inline-block;min-height:44px;line-height:2.7} .precos-sec .pcol__cta a:hover{color:#fff;border-bottom-color:#fff} .precos-sec .pcol__cta a:focus-visible{outline:2px solid var(--teal-claro); outline-offset:3px;border-radius:2px} .precos-sec .painel-prec__rodape{padding:clamp(1.4rem,3.5vw,1.9rem) clamp(1.6rem,4vw,2.2rem); background:rgba(255,255,255,.055);display:grid;gap:1rem} .precos-sec .painel-prec__nota{margin:0;font-size:.85rem;line-height:1.68; color:rgba(255,255,255,.62);max-width:58ch} .precos-sec .painel-prec__cta{margin:0} .precos-sec .painel-prec .btn--acao{background:var(--teal);color:var(--carvao); width:100%;justify-content:center} .precos-sec .painel-prec .btn--acao:hover{background:#fff} @media (min-width:900px){ .precos-sec .painel-prec__g{grid-template-columns:repeat(3,1fr)} .precos-sec .pcol{border-bottom:0;border-right:1px solid rgba(255,255,255,.13)} .precos-sec .pcol:last-child{border-right:0} .precos-sec .painel-prec__rodape{grid-template-columns:1fr auto;align-items:center;gap:1.6rem} .precos-sec .painel-prec .btn--acao{width:auto;padding-inline:1.7rem} } /* ═══ Bloco 14 · fecho da homepage — refeito a claro ═══════════════════════ 🔑 Vinha carvão e centrado, logo depois do painel de preços (escuro) e do bloco «Quem a vai acompanhar» (carvão): três fundos escuros seguidos. Agora fecha em papel, alinhado à esquerda, com a fotografia à direita — a página começa e acaba na pessoa, e o botão volta a ser o único ponto escuro do bloco, que é onde deve estar o olho. */ .fecho-home{background:var(--papel);color:var(--carvao);text-align:left; padding-block:clamp(3.5rem,8vw,6rem)} .fecho-home__g{display:grid;gap:2rem;align-items:center} .fecho-home__t{margin:0;font-size:clamp(1.5rem,1.1rem + 1.9vw,2.45rem);line-height:1.2; font-weight:500;letter-spacing:-.024em;color:var(--carvao);max-width:19ch;text-wrap:balance} .fecho-home__d{margin:1.1rem 0 0;font-size:1rem;line-height:1.74;color:var(--tinta-suave); max-width:52ch} .fecho-home__cta{margin:1.9rem 0 0} .fecho-home .btn--acao{background:var(--teal-fundo);color:#fff; box-shadow:0 8px 26px rgba(41,117,109,.24);width:100%} .fecho-home .btn--acao:hover{background:var(--carvao)} .fecho-home__nota{margin:1rem 0 0;font-size:.85rem;line-height:1.6;color:var(--tinta-suave); max-width:46ch} .fecho-home__fig{margin:0;border-radius:var(--r);overflow:hidden} .fecho-home__fig img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover; object-position:center 25%;display:block} @media (min-width:900px){ .fecho-home__g{grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,5vw,4.5rem)} .fecho-home__fig{order:2} .fecho-home__fig img{aspect-ratio:5/6} .fecho-home .btn--acao{width:auto;padding-inline:1.9rem} } /* ---- rodapé conforme o briefing (secção 3) ------------------------------- */ .rodape__marca{margin:1.1rem 0 .4rem;font-size:1rem;font-weight:500;color:var(--branco)} .rodape__areas{margin:0 0 .9rem;font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.66)} .rodape__lema{margin:0;font-size:.9rem;line-height:1.6;color:var(--teal-claro)} .rodape__nav{list-style:none;margin:0;padding:0;display:grid;gap:.55rem} .rodape__nav a{font-size:.9rem;color:rgba(255,255,255,.78)} .rodape__nav a:hover{color:#fff} .rodape__morada{margin:0 0 .8rem;font-size:.9rem;line-height:1.65;color:rgba(255,255,255,.78)} .rodape__tel{margin:0;font-size:.9rem;line-height:1.8;overflow-wrap:anywhere} .rodape__tel a{color:rgba(255,255,255,.78)} .rodape__tel a:hover{color:#fff} /* o «Gerir consentimento» é um botão por necessidade técnica; deve ler-se como os outros itens da lista, não como um botão de sistema */ .rodape__consent{background:none;border:0;padding:0;margin:0;font:inherit; font-size:.9rem;color:rgba(255,255,255,.78);cursor:pointer;text-align:left; min-height:44px;line-height:2.6} .rodape__consent:hover{color:#fff} .rodape__consent:focus-visible{outline:2px solid var(--teal-claro);outline-offset:3px} .rodape__legal{margin:0;font-size:.8rem;line-height:1.7;color:rgba(255,255,255,.52); max-width:78ch} .rodape__nos{margin:0;font-size:.78rem;color:rgba(255,255,255,.38)} .rodape__nos a{color:rgba(255,255,255,.5)} .rodape__nos a:hover{color:rgba(255,255,255,.75)} @media (min-width:900px){ .rodape__fim{justify-content:space-between;align-items:baseline;gap:1.5rem} } /* ---- página Sobre -------------------------------------------------------- */ .percurso{background:var(--papel);padding-block:clamp(3rem,7vw,5.5rem)} .publicacoes{background:var(--branco);padding-block:clamp(3rem,7vw,5.5rem)} .destaques{background:var(--papel);padding-block:clamp(3rem,7vw,5.5rem)} .marcos__g{list-style:none;margin:0;padding:0;border-top:1px solid var(--linha)} .marco{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.4rem; padding:1.1rem 0;border-bottom:1px solid var(--linha);align-items:baseline} .marco__a{font-size:.92rem;font-weight:500;color:var(--teal-texto); font-variant-numeric:tabular-nums;min-width:6.5rem} .marco__d{margin:0;font-size:.95rem;line-height:1.68;color:var(--tinta-suave);max-width:62ch} .cred{margin:clamp(2rem,4vw,3rem) 0 0} .cred__t{margin:0 0 1rem;font-size:1.05rem;font-weight:500;color:var(--carvao); padding-bottom:.6rem;border-bottom:2px solid var(--teal)} .dim__g{list-style:none;margin:clamp(1.8rem,4vw,2.6rem) 0 0;padding:0;display:grid;gap:1.4rem} .dim{padding-top:1rem;border-top:2px solid var(--teal)} .dim__t{margin:0 0 .3rem;font-size:1rem;font-weight:500;color:var(--carvao)} .dim__d{margin:0;font-size:.92rem;line-height:1.62;color:var(--tinta-suave)} .dest__g{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem} .dest{padding:1.4rem 0;border-top:1px solid var(--linha)} .dest:last-child{border-bottom:1px solid var(--linha)} .dest__meta{margin:0 0 .5rem;display:flex;gap:.7rem;align-items:center;flex-wrap:wrap} .dest__tipo{font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase; color:var(--teal-texto);padding:.24rem .6rem;border:1px solid rgba(40,113,106,.28);border-radius:99px} .dest__data{font-size:.82rem;color:var(--tinta-suave)} .dest__t{margin:0 0 .2rem;font-size:1.08rem;font-weight:500;color:var(--carvao);line-height:1.35} .dest__ent{margin:0 0 .5rem;font-size:.87rem;color:var(--tinta-suave)} .dest__d{margin:0;font-size:.93rem;line-height:1.68;color:var(--tinta-suave);max-width:60ch} @media (min-width:760px){ .dim__g{grid-template-columns:repeat(3,1fr);gap:2rem} .dest__g{gap:0} } /* ═══ RODAPÉ — composição refeita ══════════════════════════════════════════ 🔴 O que estava mal, medido: a linha legal vinha CENTRADA e partia-se em três linhas no meio do nada; as quatro colunas tinham larguras arbitrárias (304/217/217/261 px); a nossa assinatura tinha desaparecido; e sobrava um terço do rodapé em espaço morto à direita. Agora: grelha própria com proporções pensadas, tudo alinhado ao topo e à esquerda, uma régua a separar o legal, e a assinatura discreta no fim — como o briefing pede, fora da zona de maior contraste. */ .rodape .rodape__grid{display:grid;gap:2.4rem 3rem;align-items:start} .rodape .rodape__grid > .wp-block-column{flex-basis:auto !important;width:auto !important; min-width:0;margin:0 !important} .rodape h3,.rodape h4{margin:0 0 1.1rem;font-size:.72rem;font-weight:500;letter-spacing:.16em; text-transform:uppercase;color:rgba(255,255,255,.45)} .rodape .marca--logo{display:inline-block;margin-bottom:1.3rem} .rodape .marca--logo svg{width:190px;height:auto} .rodape__marca{margin:0 0 .35rem;font-size:1.02rem;font-weight:500;color:#fff; letter-spacing:-.01em} .rodape__areas{margin:0 0 1rem;font-size:.86rem;line-height:1.65;color:rgba(255,255,255,.6)} .rodape__lema{margin:0;font-size:.9rem;line-height:1.6;color:var(--teal-claro);max-width:26ch} .rodape__nav{list-style:none;margin:0;padding:0;display:grid;gap:.65rem} .rodape__nav a,.rodape__consent{font-size:.9rem;line-height:1.4;color:rgba(255,255,255,.8); transition:color .22s var(--ease)} .rodape__nav a:hover,.rodape__consent:hover{color:#fff} .rodape__morada{margin:0 0 .9rem;font-size:.9rem;line-height:1.65;color:rgba(255,255,255,.8)} .rodape__tel{margin:0;font-size:.9rem;line-height:1.85;overflow-wrap:anywhere} /* fim do rodapé: régua, legal à esquerda, assinatura à direita */ .rodape .rodape__fim{margin-top:clamp(2.2rem,4vw,3.2rem);padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap; gap:.8rem 2rem;align-items:baseline;justify-content:space-between;text-align:left} .rodape .rodape__legal{margin:0;text-align:left;font-size:.79rem;line-height:1.75; color:rgba(255,255,255,.5);max-width:74ch;flex:1 1 32rem} .rodape .rodape__nos{margin:0;text-align:left;font-size:.76rem;color:rgba(255,255,255,.34); flex:0 0 auto;white-space:nowrap} .rodape .rodape__nos a{color:rgba(255,255,255,.46)} .rodape .rodape__nos a:hover{color:rgba(255,255,255,.72)} /* 🔑 1000px, não 760: entre os dois, quatro colunas davam 118-177px de largura e os rótulos dela partiam-se. Abaixo disso vale a grelha de 2 do bloco @media (max-width:999px) mais abaixo. */ @media (min-width:1000px){ .rodape .rodape__grid{grid-template-columns:1.5fr 1fr 1.25fr 1fr} } /* afinação: a linha legal partia em três linhas curtas e o lema em duas */ .rodape .rodape__legal{flex:1 1 46rem;max-width:none} .rodape__lema{max-width:34ch} /* ═══ Bloco 9 · o percurso da consulta ═════════════════════════════════════ A copy dela são quatro apontamentos curtos. Em lista corrida não se percebe que é uma sequência; com uma linha contínua e marcadores, percebe-se sem acrescentar uma palavra. No telemóvel a linha é vertical; a partir do tablet deita-se e os quatro momentos lêem-se da esquerda para a direita. */ .plano{background:var(--branco);padding-block:clamp(3rem,7vw,5.5rem)} .mom__g{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative} .mom{position:relative;padding:0 0 2rem 2.2rem} .mom:last-child{padding-bottom:0} /* a linha */ .mom::before{content:"";position:absolute;left:6px;top:1.1rem;bottom:-.4rem;width:2px; background:var(--linha)} .mom:last-child::before{display:none} /* o marcador */ .mom__p{position:absolute;left:0;top:.55rem;width:14px;height:14px;border-radius:50%; background:var(--branco);border:2px solid var(--teal);z-index:1} .mom__n{display:block;font-size:.72rem;font-weight:500;letter-spacing:.16em; color:var(--teal-texto);margin-bottom:.25rem} .mom__t{margin:0 0 .3rem;font-size:1.05rem;font-weight:500;color:var(--carvao);line-height:1.3} .mom__d{margin:0;font-size:.94rem;line-height:1.7;color:var(--tinta-suave);max-width:56ch} .plano__fim{margin:clamp(2rem,4vw,2.8rem) 0 0;font-size:clamp(1.05rem,1rem + .5vw,1.3rem); line-height:1.45;font-weight:500;color:var(--carvao);max-width:34ch; padding-left:1.1rem;border-left:3px solid var(--teal)} @media (min-width:820px){ .mom__g{grid-template-columns:repeat(4,1fr);gap:0 1.8rem} .mom{padding:2.2rem 0 0 0} /* a linha passa a horizontal, por cima dos marcadores */ .mom::before{left:7px;right:-1.8rem;top:6px;bottom:auto;width:auto;height:2px} .mom:last-child::before{display:none} .mom__p{top:0;left:0} .plano__fim{max-width:42ch} } /* ═══ Página Sobre — ritmo ═════════════════════════════════════════════════ 🔴 O que estava mal: 5.465 px de altura com tudo à mesma largura, o mesmo peso e o mesmo alinhamento. Sem variação, uma página longa lê-se como um documento, não como uma apresentação. A copy é vinculativa, por isso o trabalho é todo de composição: larguras diferentes por função, anos com presença na cronologia, credenciais em duas colunas sem moldura, e a frase da marca a ocupar o ecrã inteiro como pausa. */ /* o texto de leitura ganha medida a sério */ .publicacoes .sec__cab,.percurso .sec__cab{max-width:none} .publicacoes .sec__lead{max-width:70ch;font-size:1.02rem;line-height:1.8} .publicacoes .sec__lead + .sec__lead{margin-top:1.1rem} /* cronologia: o ano manda */ .marcos__g{border-top:2px solid var(--linha)} .marco{grid-template-columns:auto 1fr;gap:.3rem 2rem;padding:1.35rem 0;align-items:start} .marco__a{font-size:1.35rem;font-weight:500;letter-spacing:-.02em;color:var(--carvao); min-width:7.5rem;line-height:1.1} .marco__d{font-size:.97rem;line-height:1.7;max-width:66ch;padding-top:.2rem} /* credenciais: duas colunas, sem caixa */ .cred{margin-top:clamp(2.5rem,5vw,3.5rem);padding:0;background:none;border:0} .cred__t{font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase; color:var(--tinta-suave);border-bottom:0;padding-bottom:0;margin-bottom:1.2rem} .cred .lista-clinica{gap:.7rem 2.5rem} /* a frase da marca vira pausa, a toda a largura */ .percurso .destaque{margin-top:clamp(3rem,6vw,4.5rem);padding:clamp(1.8rem,4vw,2.6rem) 0 0; border-left:0;border-top:1px solid var(--linha); font-size:clamp(1.25rem,1rem + 1.3vw,1.85rem);line-height:1.32;font-weight:500; color:var(--carvao);max-width:26ch;text-wrap:balance} /* dimensões com mais presença */ .dim{border-top:0;padding-top:0} .dim__t{font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase; color:var(--teal-texto);margin-bottom:.5rem} .dim__d{font-size:1.02rem;line-height:1.5;color:var(--carvao)} /* destaques: o título respira */ .dest__t{font-size:1.2rem;line-height:1.28;letter-spacing:-.015em} .dest{padding:1.8rem 0} @media (min-width:900px){ /* o bloco biográfico ganha duas colunas de leitura */ /* 🔴 Eram duas colunas e o terceiro parágrafo atravessava as duas por baixo: 528px, 528px e 666px. Lia-se como um bloco solto, mais largo que os outros. 🔑 Os três parágrafos são três temas — livro, palestras, media — e são exactamente os três cartões que vêm a seguir (Autora · Palestrante · Media). Três colunas iguais dizem isso, e ficam todos do mesmo tamanho. */ .publicacoes .sec__cab{display:grid;grid-template-columns:repeat(3,1fr); column-gap:clamp(1.8rem,3vw,2.4rem);align-items:start} .publicacoes .sec__t{grid-column:1 / -1;max-width:22ch} .publicacoes .sec__lead{max-width:none} .publicacoes .sec__lead:nth-of-type(1){grid-column:1;grid-row:2} .publicacoes .sec__lead:nth-of-type(2){grid-column:2;grid-row:2;margin-top:0} .publicacoes .sec__lead:nth-of-type(3){grid-column:3;grid-row:2;margin-top:0} .cred .lista-clinica{grid-template-columns:repeat(2,1fr)} .percurso .destaque{max-width:30ch} } /* a frase da marca partia em seis linhas curtas: precisa de medida, não de menos */ .percurso .destaque{max-width:none} @media (min-width:900px){ .percurso .destaque{max-width:46ch;font-size:clamp(1.4rem,1rem + 1.5vw,2.05rem)} } /* ═══ Cronologia como linha temporal ═══════════════════════════════════════ No telemóvel: eixo à esquerda, marcos em coluna — a leitura natural. A partir do tablet: eixo ao centro e os marcos alternam de lado, com o ano dentro do marcador. Só CSS: o conteúdo é o mesmo, muda a composição. O eixo é uma linha viva — mais escura onde já passou, ténue no fim. */ .percurso .marcos__g{border-top:0;position:relative;padding:0;margin:clamp(2rem,4vw,3rem) 0 0; list-style:none} .percurso .marcos__g::before{content:"";position:absolute;left:9px;top:.6rem;bottom:.6rem; width:2px;background:linear-gradient(180deg,var(--teal) 0%,var(--teal) 55%,var(--linha) 100%)} .percurso .marco{display:block;position:relative;padding:0 0 2.1rem 2.6rem;border:0} .percurso .marco:last-child{padding-bottom:0} .percurso .marco::before{content:"";position:absolute;left:2px;top:.42rem;width:16px;height:16px; border-radius:50%;background:var(--papel);border:2.5px solid var(--teal);z-index:1; transition:transform .4s var(--ease)} .percurso .marco:hover::before{transform:scale(1.22)} .percurso .marco__a{display:block;min-width:0;margin-bottom:.3rem; font-size:1.28rem;font-weight:500;letter-spacing:-.02em;color:var(--carvao);line-height:1.1; font-variant-numeric:tabular-nums} .percurso .marco__d{margin:0;font-size:.96rem;line-height:1.72;color:var(--tinta-suave); max-width:56ch;padding:0} @media (min-width:860px){ .percurso .marcos__g{padding:1rem 0 0} .percurso .marcos__g::before{left:50%;transform:translateX(-50%)} .percurso .marco{width:calc(50% - 2.6rem);padding:0 0 2.6rem 0} .percurso .marco:nth-child(odd){margin-left:0;text-align:right} .percurso .marco:nth-child(even){margin-left:calc(50% + 2.6rem)} .percurso .marco:nth-child(odd)::before{left:auto;right:-3.4rem} .percurso .marco:nth-child(even)::before{left:-3.4rem} .percurso .marco:nth-child(odd) .marco__d{margin-left:auto} .percurso .marco__a{font-size:1.5rem} .percurso .marco__d{max-width:38ch} } /* ═══ Sobre · ritmo tonal ══════════════════════════════════════════════════ 🔴 Medido: 5.741 px de altura, seis secções e duas cores de fundo que são quase a mesma (#F7F6F3 e #FAFCFB). Sem contraste tonal, uma página longa lê-se plana por muito bem composta que esteja cada parte. Os destaques passam a carvão — é o remate antes do fecho e dá à página a âncora escura que ela não tinha; e o bloco biográfico ganha fotografia. */ .destaques{background:var(--carvao);color:#fff} .destaques .eyebrow{color:var(--teal-claro)} .destaques .eyebrow::before{background:var(--teal-claro)} .destaques .sec__t{color:#fff} .destaques .dest{border-top-color:rgba(255,255,255,.15)} .destaques .dest:last-child{border-bottom-color:rgba(255,255,255,.15)} .destaques .dest__tipo{color:var(--teal-claro);border-color:rgba(107,203,193,.35)} .destaques .dest__data{color:rgba(255,255,255,.5)} .destaques .dest__t{color:#fff} .destaques .dest__ent{color:var(--teal-claro)} .destaques .dest__d{color:rgba(255,255,255,.72)} /* fotografia do bloco biográfico */ .publicacoes__fig{margin:clamp(2rem,4vw,3rem) 0 0;border-radius:var(--r);overflow:hidden} .publicacoes__fig img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover; object-position:center 40%;display:block} /* ---- página Contacto ----------------------------------------------------- */ .contacto{background:var(--branco);padding-block:clamp(2.5rem,6vw,4.5rem)} .contacto__fig{margin:0 0 clamp(2rem,4vw,3rem);border-radius:var(--r);overflow:hidden} .contacto__fig img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover; object-position:center 45%;display:block} .contacto__g{display:grid;gap:2.2rem} .contacto__col{padding-top:1.2rem;border-top:2px solid var(--teal)} .contacto__t{margin:0 0 .9rem;font-size:.75rem;font-weight:500;letter-spacing:.16em; text-transform:uppercase;color:var(--tinta-suave)} .contacto__morada{margin:0 0 1rem;font-size:1.06rem;line-height:1.55;color:var(--carvao); font-weight:500} .contacto__linha{margin:0 0 .5rem;font-size:1rem;line-height:1.5} .contacto__linha a{color:var(--teal-texto);font-weight:500} .contacto__linha a:hover{color:var(--carvao)} .contacto__linha span{display:block;font-size:.78rem;color:var(--tinta-suave);margin-top:.1rem} .contacto__horario{margin:0 0 1rem;font-size:1rem;line-height:1.6;color:var(--tinta-suave)} .contacto__horario strong{display:block;font-size:1.5rem;font-weight:500;color:var(--carvao); letter-spacing:-.02em;margin-top:.2rem;font-variant-numeric:tabular-nums} .contacto__d{margin:0 0 1.2rem;font-size:.93rem;line-height:1.68;color:var(--tinta-suave); max-width:42ch} @media (min-width:820px){ .contacto__g{grid-template-columns:1.15fr .9fr 1fr;gap:clamp(2rem,4vw,3.5rem)} } /* ---- mapa com consentimento --------------------------------------------- */ .mapa-sec{background:var(--papel);padding-block:clamp(2.5rem,6vw,4.5rem)} .ddd-mapa{position:relative;border-radius:var(--r);overflow:hidden; background:var(--carvao);min-height:clamp(280px,42svh,420px);display:grid;place-items:center} .ddd-mapa__aviso{padding:clamp(1.6rem,4vw,2.6rem);text-align:center;max-width:44rem} .ddd-mapa__t{margin:0 0 .5rem;font-size:1.1rem;font-weight:500;color:#fff} .ddd-mapa__d{margin:0 0 1.4rem;font-size:.94rem;line-height:1.7;color:rgba(255,255,255,.72)} .ddd-mapa__acoes{margin:0;display:grid;gap:.6rem;justify-content:center} .ddd-mapa .btn--acao{background:var(--teal);color:var(--carvao)} .ddd-mapa .btn--acao:hover{background:#fff} .ddd-mapa .btn--linha{color:#fff;box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.5)} .ddd-mapa .btn--linha:hover{background:rgba(255,255,255,.12)} .ddd-mapa--carregado{display:block;min-height:0;background:none} .ddd-mapa__frame{width:100%;height:clamp(300px,52svh,520px);border:0;display:block} .mapa-sec__legal{margin:1.2rem 0 0;font-size:.82rem;line-height:1.7;color:var(--tinta-suave); max-width:76ch} @media (min-width:600px){ .ddd-mapa__acoes{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center} } /* ═══ BIBLIOTECA DE ARTIGOS (briefing, secção 9) ═══════════════════════════ */ .bib-capa{background:var(--papel);padding-block:clamp(2.5rem,7vw,4.5rem); margin-top:calc(var(--topo-h) * -1);padding-top:calc(var(--topo-h) + clamp(2rem,6vw,3.5rem))} .bib__t{font-size:clamp(1.9rem,1.15rem + 3.2vw,3.4rem);line-height:1.1;letter-spacing:-.03em; font-weight:500;color:var(--carvao);margin:.6rem 0 1rem;max-width:20ch;text-wrap:balance} .bib__lead{font-size:1.02rem;line-height:1.75;color:var(--tinta-suave);max-width:64ch;margin:0} /* pesquisa */ .bib-busca{margin:clamp(2rem,4vw,2.8rem) 0 0;max-width:44rem} .bib-busca__l{display:block;font-size:.78rem;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--tinta-suave);margin-bottom:.6rem} .bib-busca__linha{display:grid;gap:.6rem} .bib-busca input{width:100%;padding:.85rem 1rem;font:inherit;font-size:1rem; border:1px solid var(--linha);border-radius:var(--r);background:var(--branco); color:var(--carvao);min-height:48px} .bib-busca input:focus-visible{outline:2px solid var(--teal-texto);outline-offset:2px} /* filtros */ .bib-filtros{margin:clamp(1.6rem,3vw,2.2rem) 0 0} .bib-filtros__t{margin:0 0 .7rem;font-size:.78rem;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--tinta-suave)} .bib-filtros__g{display:grid;gap:.9rem} .bib-filtro span{display:block;font-size:.82rem;color:var(--tinta-suave);margin-bottom:.3rem} .bib-filtro select{width:100%;padding:.7rem .9rem;font:inherit;font-size:.95rem; border:1px solid var(--linha);border-radius:var(--r);background:var(--branco); color:var(--carvao);min-height:44px} .bib-filtros__limpar{margin:0;align-self:end} .bib-filtros__limpar a{font-size:.88rem;color:var(--teal-texto); border-bottom:1px solid rgba(40,113,106,.3);padding-bottom:1px} /* oito áreas */ .bib-areas{background:var(--branco);padding-block:clamp(3rem,7vw,5rem)} .bib-areas__g{list-style:none;margin:0;padding:0;display:grid;gap:1px; background:var(--linha);border:1px solid var(--linha);border-radius:var(--r);overflow:hidden} .bib-area a{display:block;background:var(--papel);padding:clamp(1.3rem,2.4vw,1.8rem);height:100%; transition:background .3s var(--ease)} .bib-area a:hover{background:var(--branco)} .bib-area__n{display:block;font-size:.72rem;font-weight:500;letter-spacing:.16em; color:var(--teal-texto);margin-bottom:.45rem} .bib-area__t{display:block;font-size:1.04rem;font-weight:500;color:var(--carvao); line-height:1.3;margin-bottom:.4rem} .bib-area__d{display:block;font-size:.86rem;line-height:1.6;color:var(--tinta-suave)} .bib-destaque{background:var(--papel);padding-block:clamp(3rem,7vw,5rem)} .bib-destaque__meta{margin:1rem 0 0;font-size:.85rem;color:var(--tinta-suave)} .bib-lista{background:var(--branco);padding-block:clamp(3rem,7vw,5rem)} .bib-mais{background:var(--papel);padding-block:clamp(3rem,6vw,4rem) 0} /* framework */ .bib-framework{background:var(--carvao);color:#fff;padding-block:clamp(3rem,7vw,5rem)} .bib-framework .eyebrow{color:var(--teal-claro)} .bib-framework .eyebrow::before{background:var(--teal-claro)} .bib-framework .sec__t{color:#fff} .bib-framework .sec__lead{color:rgba(255,255,255,.76)} .bib-framework__g{display:grid;gap:2rem;align-items:center} .bib-framework__ctas{display:grid;gap:.6rem;margin:1.6rem 0 0} .bib-framework .btn--acao{background:var(--teal);color:var(--carvao)} .bib-framework .btn--linha{color:#fff;box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.5)} .bib-framework__sel{margin:0;font-size:1.3rem;font-weight:500;color:var(--teal-claro); line-height:1.3;padding-left:1.2rem;border-left:3px solid var(--teal)} .bib-framework__sel span{display:block;font-size:.85rem;font-weight:400; color:rgba(255,255,255,.55);margin-top:.3rem} /* newsletter */ .bib-news{background:var(--branco);padding-block:clamp(3rem,7vw,5rem);text-align:center} .bib-news__t{margin:0 auto;font-size:clamp(1.5rem,1.1rem + 1.6vw,2.2rem);line-height:1.2; font-weight:500;color:var(--carvao);max-width:20ch;letter-spacing:-.02em} .bib-news__d{margin:.9rem auto 0;font-size:1rem;line-height:1.7;color:var(--tinta-suave);max-width:48ch} .bib-news__f{margin:1.8rem auto 0;max-width:34rem;display:grid;gap:.7rem} .bib-news__l{text-align:left;font-size:.82rem;color:var(--tinta-suave)} .bib-news__f input{width:100%;padding:.8rem 1rem;font:inherit;border:1px solid var(--linha); border-radius:var(--r);background:var(--papel);min-height:48px} .bib-news__nota{margin:1rem auto 0;font-size:.82rem;color:var(--tinta-suave);max-width:48ch} @media (min-width:640px){ .bib-busca__linha{grid-template-columns:1fr auto} .bib-areas__g{grid-template-columns:repeat(2,1fr)} .bib-filtros__g{grid-template-columns:repeat(3,1fr) auto;align-items:end;gap:1.2rem} } @media (min-width:1000px){ .bib-areas__g{grid-template-columns:repeat(4,1fr)} .bib-framework__g{grid-template-columns:1.4fr .6fr;gap:3rem} .bib-framework__ctas{display:flex;gap:.7rem} } /* 🔴 CORRECÇÃO — os cartões de «Atualizados recentemente» ficaram empilhados a toda a largura, um por linha, com as imagens à escala do destaque: a página passou dos 11.000 px. O contentor `.posts` do tema não traz grelha própria quando é usado fora da listagem principal. */ .bib-lista .posts{display:grid;gap:1.6rem} .bib-lista .posts .post{margin:0} .bib-lista .posts .post__img{aspect-ratio:16/10;overflow:hidden;border-radius:var(--r); background:var(--papel)} .bib-lista .posts .post__img img{width:100%;height:100%;object-fit:cover;display:block} /* artigos sem imagem: em vez de um rectângulo cinzento vazio, o padrão da marca */ .bib-lista .posts .post__img:empty{background:var(--papel) url('/wp-content/themes/ddd/assets/img/simbolo.svg') center/34% no-repeat; opacity:.5} .bib-destaque .post__img,.bib-destaque .post--destaque .post__img{max-height:min(46svh,420px); overflow:hidden;border-radius:var(--r)} .bib-destaque .post__img img{width:100%;height:100%;object-fit:cover} @media (min-width:640px){ .bib-lista .posts{grid-template-columns:repeat(2,1fr);gap:1.8rem} } @media (min-width:1000px){ .bib-lista .posts{grid-template-columns:repeat(3,1fr)} } /* ═══ Biblioteca · os três blocos de artigos têm de se distinguir ══════════ 🔴 Dois problemas medidos: «Mais recentes» ocupava 5.284 px porque a grelha só estava definida para o outro módulo; e os três blocos de artigos eram visualmente iguais, um atrás do outro — daí a confusão. Agora cada um tem a forma do seu papel: · Em destaque — um artigo, grande, com imagem · Atualizados — lista de texto: o que interessa é o que mudou · Mais recentes — grelha de seis com imagem */ .bib-mais .posts{display:grid;gap:1.6rem} .bib-mais .posts .post{margin:0} .bib-mais .posts .post__img{aspect-ratio:16/10;overflow:hidden;border-radius:var(--r); background:var(--papel)} .bib-mais .posts .post__img img{width:100%;height:100%;object-fit:cover;display:block} .bib-mais__todos{margin:clamp(1.8rem,3vw,2.4rem) 0 0} /* «Atualizados recentemente» passa a lista: sem imagens, o foco é a revisão */ .bib-lista{background:var(--papel)} .bib-lista .posts{display:block;border-top:1px solid var(--linha)} .bib-lista .posts .post{margin:0;padding:1.1rem 0;border-bottom:1px solid var(--linha); display:grid;grid-template-columns:1fr;gap:.2rem} .bib-lista .posts .post__img{display:none} .bib-lista .posts .post__meta{order:-1;font-size:.76rem;letter-spacing:.1em; text-transform:uppercase;color:var(--tinta-suave)} .bib-lista .posts .post h2,.bib-lista .posts .post h3{font-size:1.05rem;line-height:1.35; margin:0;font-weight:500} .bib-lista .posts .post p{font-size:.9rem;line-height:1.6;color:var(--tinta-suave); margin:.2rem 0 0;max-width:70ch} @media (min-width:640px){ .bib-mais .posts{grid-template-columns:repeat(2,1fr);gap:1.8rem} .bib-lista .posts .post{grid-template-columns:1fr auto;align-items:baseline; column-gap:2rem} .bib-lista .posts .post__meta{order:0;text-align:right;white-space:nowrap} .bib-lista .posts .post p{grid-column:1/-1} } @media (min-width:1000px){ .bib-mais .posts{grid-template-columns:repeat(3,1fr)} } /* 🔴 A lista de «revisto por último» ficou com o título à direita e o resumo à esquerda: o cartão do tema traz meta→título→resumo por esta ordem, e num grid de duas colunas o primeiro filho cai sempre na coluna 1. Fixa-se cada um na sua coluna em vez de deixar a ordem do DOM decidir. */ @media (min-width:640px){ .bib-lista .posts .post{grid-template-columns:1fr auto;column-gap:2.5rem} .bib-lista .posts .post > *:nth-child(1){grid-column:1;grid-row:2} /* meta */ .bib-lista .posts .post h2, .bib-lista .posts .post h3{grid-column:1;grid-row:1;text-align:left} .bib-lista .posts .post__meta{grid-column:2;grid-row:1;text-align:right; align-self:baseline} .bib-lista .posts .post p{grid-column:1;grid-row:3;text-align:left} } .bib-lista .posts .post h2,.bib-lista .posts .post h3{order:-1} /* 🔴 O «Ver o arquivo completo» encostava à faixa escura do framework: escrevi `padding-block: X 0` no .bib-mais — espaço em cima, zero em baixo. */ .bib-mais{padding-block:clamp(3rem,6vw,4.5rem) clamp(3rem,7vw,5rem)} .bib-mais__todos{margin-top:clamp(2rem,4vw,2.8rem)} /* ---- nota clínica da página de contactos -------------------------------- Não é uma citação nem um destaque de marca: é um aviso de segurança. Dá-se-lhe a forma de aviso — fundo próprio, rótulo, e os números de emergência à mão, que é o que falta a quem está mesmo com um sintoma urgente. */ .nota-clinica{background:#FDF6EC;border:1px solid #EFDFC4;border-radius:var(--r); padding:clamp(1.3rem,3vw,1.8rem);max-width:64rem} .nota-clinica__t{margin:0 0 .5rem;font-size:.74rem;font-weight:500;letter-spacing:.16em; text-transform:uppercase;color:#8A5A12} .nota-clinica__d{margin:0 0 .9rem;font-size:.97rem;line-height:1.72;color:#5C4416;max-width:62ch} .nota-clinica__sos{margin:0;font-size:.94rem;line-height:1.6;padding-top:.9rem; border-top:1px solid #EFDFC4} .nota-clinica__sos a{color:#8A5A12;font-weight:500;border-bottom:1px solid rgba(138,90,18,.35); display:inline-block;min-height:44px;line-height:2.9} .nota-clinica__sos a:hover{color:#5C4416;border-bottom-color:#5C4416} /* ═══ As três fases da vida — progressão, não três caixas ══════════════════ 🔑 O conteúdo é uma linha do tempo (35-40 → 40-50 → 50-60+), mas estava desenhado como três cartões iguais, que é a forma que não conta nada. Agora cada fase mostra onde está nessa linha: uma barra que se enche mais à medida que se avança, e o intervalo de idade com peso de número, não de etiqueta. Sem molduras — as fases não são produtos. */ .fases .fases__g{gap:0;border-top:1px solid var(--linha)} .fases .fase{background:none;border:0;border-bottom:1px solid var(--linha); border-radius:0;padding:clamp(1.6rem,3.5vw,2.2rem) 0;gap:0;position:relative} .fases .fase__id{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);font-weight:500; letter-spacing:-.03em;color:var(--carvao);line-height:1; font-variant-numeric:tabular-nums;display:block;margin-bottom:.75rem} /* a barra da vida: enche-se de fase para fase */ .fases .fase::before{content:"";display:block;height:3px;width:100%; background:var(--linha);margin-bottom:1.1rem;border-radius:2px} .fases .fase::after{content:"";position:absolute;top:clamp(1.6rem,3.5vw,2.2rem);left:0; height:3px;background:var(--teal);border-radius:2px; transition:width .8s var(--ease)} .fases .fase:nth-child(1)::after{width:33%} .fases .fase:nth-child(2)::after{width:66%} .fases .fase:nth-child(3)::after{width:100%} .fases .fase__t{font-size:1.06rem;font-weight:500;color:var(--carvao);margin:0 0 .4rem; line-height:1.32} .fases .fase__d{font-size:.94rem;line-height:1.7;color:var(--tinta-suave);margin:0;max-width:58ch} .fases .fases__nota{margin:clamp(1.8rem,3.5vw,2.4rem) 0 0;border-left:0;padding-left:0; padding-top:0;font-size:clamp(1.02rem,.98rem + .5vw,1.24rem);line-height:1.5; font-weight:500;color:var(--carvao);max-width:44ch;text-wrap:balance} @media (min-width:820px){ .fases .fases__g{grid-template-columns:repeat(3,1fr);gap:0 clamp(1.8rem,4vw,3.2rem); border-top:0} .fases .fase{border-bottom:0;padding-top:0} .fases .fase::before{margin-bottom:1.3rem} .fases .fase::after{top:0} /* no ecrã largo a barra corre ao longo das três colunas */ .fases .fase:nth-child(1)::after{width:100%} .fases .fase:nth-child(2)::after{width:100%} .fases .fase:nth-child(3)::after{width:100%} .fases .fase:nth-child(1)::before{background:var(--teal)} .fases .fase:nth-child(2)::before{background:linear-gradient(90deg,var(--teal) 0%,var(--teal-claro) 100%)} .fases .fase:nth-child(3)::before{background:linear-gradient(90deg,var(--teal-claro) 0%,var(--linha) 100%)} .fases .fase::after{display:none} .fases .fase__id{font-size:clamp(1.9rem,1.2rem + 1.6vw,2.6rem)} } /* ═══ Acessibilidade no telemóvel ══════════════════════════════════════════ 🔴 Medido a 390 px e a 360 px, em oito páginas: 128 alvos de toque abaixo dos 44 px e 96 textos abaixo dos 14 px. Não eram 128 defeitos diferentes — eram os mesmos elementos repetidos em todas as páginas: os links do rodapé (18 px de altura), o botão do menu (35×35) e os rótulos pequenos. O mínimo de 44×44 é a norma da Apple; a Material usa 48×48. */ @media (max-width:999px){ /* alvos de toque */ .rodape__nav a, .rodape__nav .rodape__consent, .rodape__tel a, .bib-filtros__limpar a, .rodape__nos a{display:inline-flex;align-items:center;min-height:44px} .rodape__nav{gap:.15rem} .menu-btn, .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close{min-width:44px;min-height:44px; display:inline-flex;align-items:center;justify-content:center} /* rótulos legíveis */ .eyebrow{font-size:.78rem} .rodape__areas{font-size:.9rem} .rodape__legal{font-size:.85rem} .rodape__nos{font-size:.82rem} .post__cat,.post__meta span{font-size:.78rem} .bib-busca__l,.bib-filtro span{font-size:.85rem} .dest__data,.bib-destaque__meta{font-size:.85rem} } /* segunda passagem: os que sobraram na medição */ @media (max-width:999px){ .eyebrow{font-size:.88rem;letter-spacing:.13em} .rodape__legal,.rodape__nos{font-size:.88rem} .post__cat,.post__meta span,.dest__data,.bib-destaque__meta, .bib-busca__l,.bib-filtro span,.escolha__t,.campo__ajuda{font-size:.88rem} /* links curtos precisam de área, não só de altura */ .rodape__nav a,.rodape__nos a,.rodape__tel a{padding-inline:.35rem;margin-inline:-.35rem} /* o aviso de cookies é do tema e também não cumpre */ .cookies a,.cookies__sim,.cookies__nao{min-height:44px;display:inline-flex; align-items:center;justify-content:center;padding-inline:1rem} .cookies p a{padding-inline:.3rem;margin-inline:-.3rem} } /* terceira e última passagem — os que resistiram por especificidade */ @media (max-width:999px){ .rodape .rodape__legal,.rodape .rodape__nos{font-size:.88rem} .modal .campo label,.campo label,.escolha__t{font-size:.92rem} .escolha label span,.escolha label b + span{font-size:.85rem} .modal__nota,.hero--e__prova{font-size:.88rem} /* os botões do aviso de cookies são do tema e ficavam a 38 px de altura */ .cookies .cookies__sim,.cookies .cookies__nao{min-height:44px;padding-block:.7rem} } /* ligação de cada destaque */ .dest__cta{margin:.8rem 0 0} .dest__cta a{font-size:.9rem;font-weight:500;color:var(--teal-claro); border-bottom:1px solid rgba(107,203,193,.4);padding-bottom:2px; display:inline-block;min-height:44px;line-height:2.7} .dest__cta a:hover{color:#fff;border-bottom-color:#fff} .dim__d a{color:var(--teal-texto);border-bottom:1px solid rgba(40,113,106,.32)} .dim__d a:hover{color:var(--carvao)} /* ═══ PADRÃO HISTÓRICO DA MARCA (briefing, secção 11) ══════════════════════ «Aplicação subtil em separadores, detalhes e rodapé; nunca competir com a leitura.» São os desenhos a giz de 2015 — os mesmos que estão pintados na parede do consultório, e que se vêem na fotografia do hero. 🔑 Entra por trás, a 7 % no escuro e 5 % no claro, e sempre com o texto por cima numa camada própria: o contraste medido tem de ficar igual ao de antes. */ .rodape{position:relative;isolation:isolate} .rodape::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:url('/wp-content/themes/ddd/assets/img/padrao-ardosia.webp') center/cover no-repeat; opacity:.07;filter:grayscale(1)} .quem{position:relative;isolation:isolate} .quem::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:url('/wp-content/themes/ddd/assets/img/padrao-ardosia.webp') center/cover no-repeat; opacity:.06;filter:grayscale(1)} /* separador entre secções claras: uma faixa fina com o padrão claro */ .sec--separador{position:relative;height:clamp(56px,8vw,88px); background:url('/wp-content/themes/ddd/assets/img/padrao-claro.webp') center/cover no-repeat; opacity:.5} /* detalhe: a assinatura já tem o símbolo; aqui só o padrão no bloco do framework */ .bib-framework,.framework{position:relative;isolation:isolate} .bib-framework::before,.framework::before{content:"";position:absolute;inset:0;z-index:-1; pointer-events:none; background:url('/wp-content/themes/ddd/assets/img/padrao-ardosia.webp') center/cover no-repeat; opacity:.06;filter:grayscale(1)} @media (prefers-reduced-motion:reduce){ .rodape::before,.quem::before{opacity:.05} } /* ═══ Secção 11 · os três que a auditoria apanhou ══════════════════════════ O briefing exige Ubuntu em «títulos, subtítulos, texto, botões, formulários e legendas» e só três pesos. Estes elementos ficaram de fora porque os browsers não herdam a fonte em controlos nativos. */ button,input,select,textarea,optgroup{font-family:inherit} .modal__x,.modal button,.campo input,.campo select,.campo textarea{font-family:Ubuntu,-apple-system,"Segoe UI",sans-serif} .cookies__sim,.cookies__nao{font-weight:500} /* último 600: os botões do aviso de cookies. A regra do tema tem dois níveis, por isso a minha de um nível nunca ganhava — mesma armadilha da noite toda. */ .cookies .cookies__sim,.cookies .cookies__nao{font-weight:500} /* ---------- hero: enquadramento por faixa, como o briefing define (secção 11) ---------- 🔑 Ela escreve, para 768–1279 px: «Servir derivado 1280 px. Reduzir largura do texto; object-position aproximado 68–72% ao centro.» A regra do site parava nos 58% a partir dos 1000 px — dentro da faixa dela, mas fora do valor pedido. Abaixo dos 1000 px o hero já separa texto e imagem em blocos, que é exactamente a saída que ela autoriza para os ecrãs estreitos. */ @media (min-width:1000px) and (max-width:1279px){ .hero--split .hero--e__img img{object-position:70% center} } /* nota legal das chamadas: é copy obrigatória do briefing (secção 3), mas é uma nota — não pode ter o mesmo peso que os números a que se refere. Discreta, nunca abaixo do contraste AA: mede-se, não se arbitra. */ .rodape__nota{display:inline-flex;align-items:flex-start;gap:.45rem;margin:.7rem 0 0; padding:.42rem .68rem;font-size:.76rem;line-height:1.4; color:var(--papel,#F7F6F3); background:color-mix(in srgb,var(--teal,#3FB49C) 13%,transparent); border:1px solid color-mix(in srgb,var(--teal,#3FB49C) 34%,transparent); border-radius:.45rem} /* o ícone alinha com a PRIMEIRA linha, não com o centro de duas */ .rodape__nota-i{flex:0 0 auto;margin-top:.12em;color:var(--teal,#3FB49C)} /* «chamadas para rede móvel ou / fixa nacional» em vez de deixar «nacional» só */ .rodape__nota span{text-wrap:balance;max-width:22ch} @supports not (color:color-mix(in srgb,red 10%,transparent)){ .rodape__nota{background:rgba(63,180,156,.13);border-color:rgba(63,180,156,.34)} } /* ---------- mapa: marcador com o símbolo da marca ---------------------------- O embed da Google impunha o pino vermelho dela. Passou a Leaflet sobre OpenStreetMap para o ponto ser o símbolo do Diário de uma Dietista. 🔑 O símbolo é servido como máscara, não como imagem: assim herda a cor da marca em vez de vir a preto. */ .ddd-mapa__leaflet{width:100%;height:100%;min-height:340px;border-radius:.6rem} .ddd-pino{background:none;border:0} .ddd-pino__c{display:grid;place-items:center;width:54px;height:54px;border-radius:50%; background:var(--papel,#F7F6F3); border:2px solid var(--teal,#3FB49C); box-shadow:0 6px 16px rgba(23,27,32,.28)} .ddd-pino__c img{width:28px;height:28px; /* a máscara colore o símbolo com o carvão da marca */ background:var(--carvao,#171B20); -webkit-mask:url(../img/simbolo.svg) center/contain no-repeat; mask:url(../img/simbolo.svg) center/contain no-repeat} /* a ponta que aponta ao sítio exacto */ .ddd-pino__b{display:block;width:0;height:0;margin:-2px auto 0; border-left:7px solid transparent;border-right:7px solid transparent; border-top:12px solid var(--teal,#3FB49C)} .leaflet-popup-content{font-family:inherit;font-size:.86rem;line-height:1.45} .leaflet-container{font-family:inherit} @media (prefers-reduced-motion:reduce){.leaflet-fade-anim .leaflet-tile{transition:none}} /* estado da subscrição da newsletter — o form não pode ficar mudo */ .bib-news__estado{grid-column:1/-1;margin:.6rem 0 0;font-size:.86rem;line-height:1.45} .bib-news__estado--ok{color:#1F6B5C} .bib-news__estado--erro{color:#9B2C2C} .bib-news__estado a{color:inherit;text-decoration:underline} /* ---------- /marcar-consulta/: o formulário vive na página ------------------ É o MESMO