.elementor-kit-6{--e-global-color-primary:#9A2069;--e-global-color-secondary:#3B0C28;--e-global-color-text:#262626;--e-global-color-accent:#A15D07;--e-global-color-hip_marca_50:#FCF0F7;--e-global-color-hip_marca_100:#F8DDED;--e-global-color-hip_marca_200:#F1BBDB;--e-global-color-hip_marca_700:#9A2069;--e-global-color-hip_marca_800:#761951;--e-global-color-hip_marca_950:#3B0C28;--e-global-color-hip_apoio_200:#B5E5F7;--e-global-color-hip_apoio_500:#19ABE4;--e-global-color-hip_destaque_300:#F8BB6D;--e-global-color-hip_destaque_400:#F5961E;--e-global-color-hip_destaque_700:#A15D07;--e-global-color-hip_cinza_50:#FAFAFA;--e-global-color-hip_cinza_150:#EDEDED;--e-global-color-hip_cinza_600:#525252;--e-global-color-hip_cinza_900:#171717;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-size:54px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.12em;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-size:22px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-font-style:italic;--e-global-typography-secondary-line-height:1.65em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.7em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-line-height:1.5em;color:#262626;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;line-height:1.7em;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:#9A2069;font-family:"Inter", Sans-serif;}.elementor-kit-6 a:hover{color:#761951;}.elementor-kit-6 h1{color:#171717;font-family:"Playfair Display", Sans-serif;font-size:62px;font-weight:700;line-height:1.08em;letter-spacing:-1.55px;}.elementor-kit-6 h2{color:#171717;font-family:"Playfair Display", Sans-serif;font-size:54px;font-weight:700;line-height:1.12em;letter-spacing:-1.35px;}.elementor-kit-6 h3{color:#171717;font-family:"Playfair Display", Sans-serif;font-size:30px;font-weight:700;line-height:1.25em;}.elementor-kit-6 h4{color:#171717;font-family:"Playfair Display", Sans-serif;font-size:22px;font-weight:700;line-height:1.35em;}.elementor-kit-6 h5{color:#171717;font-family:"Playfair Display", Sans-serif;font-size:19px;font-weight:600;line-height:1.45em;}.elementor-kit-6 h6{color:#171717;font-family:"Playfair Display", Sans-serif;font-size:18px;font-weight:600;line-height:1.5em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-6{--e-global-typography-primary-font-size:42px;--e-global-typography-primary-line-height:1.12em;--e-global-typography-secondary-font-size:22px;--e-global-typography-secondary-line-height:1.65em;--e-global-typography-text-font-size:16px;--e-global-typography-text-line-height:1.7em;--e-global-typography-accent-font-size:16px;--e-global-typography-accent-line-height:1.5em;font-size:16px;line-height:1.7em;}.elementor-kit-6 h1{font-size:46px;line-height:1.08em;letter-spacing:-1.15px;}.elementor-kit-6 h2{font-size:42px;line-height:1.12em;letter-spacing:-1.05px;}.elementor-kit-6 h3{font-size:26px;line-height:1.25em;}.elementor-kit-6 h4{font-size:21px;line-height:1.35em;}.elementor-kit-6 h5{font-size:18px;line-height:1.45em;}.elementor-kit-6 h6{font-size:18px;line-height:1.5em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{--e-global-typography-primary-font-size:32px;--e-global-typography-primary-line-height:1.12em;--e-global-typography-secondary-font-size:18px;--e-global-typography-secondary-line-height:1.65em;--e-global-typography-text-font-size:16px;--e-global-typography-text-line-height:1.7em;--e-global-typography-accent-font-size:16px;--e-global-typography-accent-line-height:1.5em;font-size:16px;line-height:1.7em;}.elementor-kit-6 h1{font-size:36px;line-height:1.08em;letter-spacing:-0.9px;}.elementor-kit-6 h2{font-size:32px;line-height:1.12em;letter-spacing:-0.8px;}.elementor-kit-6 h3{font-size:23px;line-height:1.25em;}.elementor-kit-6 h4{font-size:20px;line-height:1.35em;}.elementor-kit-6 h5{font-size:18px;line-height:1.45em;}.elementor-kit-6 h6{font-size:18px;line-height:1.5em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* Imagem de cartão com ligação: o do Elementor é inline-block e encolhe até ao conteúdo, tirando ao a largura do cartão. */ .hip-cartao .elementor-widget-image a { display: block; } /* Botão do cartão sempre no fundo, para alinhar com os da mesma linha quando os textos têm comprimentos diferentes. */ .hip-cartao .elementor-widget-button { margin-top: auto; } /* ===== Acessibilidade — 2026-09-02 ================================ Os quatro blocos abaixo fecham os problemas P1 da crítica de 01/09 (.impeccable/critique/2026-09-01T11-28-24Z__upwego-pt-hipnoterapia.md). Cada número aqui escrito foi MEDIDO no site servido, com estilos computados, ANTES de a regra existir — nenhum foi previsto. */ /* A1. FOCO VISÍVEL nos campos do formulário (WCAG 2.4.7). ⚠️⚠️ O SELETOR TEM DE TER QUATRO PESOS, e isso não é gosto — é o que foi preciso para ganhar. Quem apaga o anel é uma regra do próprio Elementor, encontrada pelo CDP (CSS.getMatchedStylesForNode com forcePseudoState), porque um varrimento por document.styleSheets NÃO a vê: .elementor-field-group .elementor-field-textual:focus { box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); outline: 0; } São (0,3,0). Uma regra nossa a (0,2,0) — que foi a primeira tentativa — perde em silêncio: o `outline-offset` aplicava e o resto caía para o inicial, o que se lê no ecrã como «não fiz nada». ⚠️ E a box-shadow que fica NÃO é «transparente de tamanho zero», como a crítica escreveu: é `rgba(0,0,0,0.1) 0px 0px 0px 1px inset`. O valor transparente e a zero é o que se lê a MEIO da transição (os campos têm `transition: all 0.3s`) — quem mede no mesmo instante do foco lê o ponto de partida e não o de chegada. A conclusão da crítica aguenta-se à mesma: 1px a 10% de preto não é um indicador de foco. ▶ `transition-property: outline-offset` existe para o anel aparecer NO INSTANTE do Tab. Sem isso o `transition: all 0.3s` do Elementor também apanha o anel, e quem navega depressa fica sem ele. ⚠️ As ligações e os botões NÃO entram aqui: medidos, já têm foco próprio (`outline: auto`). Só os 3 campos de texto é que o perderam. Alcance medido nas 14 páginas: 3 elementos. */ .elementor-field-group .elementor-field-textual:focus:focus-visible { outline: 3px solid var(--e-global-color-hip_marca_700); outline-offset: 2px; transition-property: outline-offset; } /* A2. LIGAÇÕES DENTRO DO TEXTO (WCAG 1.4.1). A ligação é #9A2069 e o texto à volta é #262626: dá 2,01:1, e o critério pede 3:1 MAIS uma pista que não seja cor. O sublinhado é a pista. (Contra o FUNDO a ligação está bem: 7,54:1, acima de AA — são dois limiares diferentes e é fácil trocá-los.) ⚠️ Os números mudaram a 02/09 com a paleta da marca, e mudaram para LADOS OPOSTOS: contra o fundo a ligação MELHOROU (5,93 → 7,54:1), e contra o texto à volta PIOROU (2,55 → 2,01:1). O sublinhado passou a ser mais necessário, não menos — sem ele o 1.4.1 falha por mais. ⚠️ `main` exclui o cabeçalho e o rodapé de propósito: o menu e as ligações do rodapé não são texto corrido, e sublinhá-las era ruído. Alcance medido nas 14 páginas: 246 ligações, das quais 235 estão mesmo rodeadas de texto (o critério do 1.4.1) e 11 sozinhas no seu parágrafo — a estas o sublinhado não faz mal nenhum. */ main .elementor-widget-text-editor a:not(.elementor-button) { text-decoration: underline; text-underline-offset: 0.15em; } /* A3. CAIXA DE RGPD: alvo de toque (WCAG 2.5.8, que pede 24×24). Medida a 13×13px, com o
` lá dentro tinha **570px**. Os 120px que faltam são duas coisas — 40px de padding do contentor de cada lado (esses são nossos e ficam) e **80px de `margin: 1em 40px`, que é o valor por omissão do folha-de-estilo do BROWSER para `blockquote`**. Ninguém o escolheu e ninguém o via. ▶ A margem horizontal vai a zero; a VERTICAL fica, que essa é ritmo. Ganho medido: 570px → 650px de linha, +14%, sem mexer em mais nada. ⚠️ O seletor é estreito: só dentro de um editor de texto do `main`. Uma regra `blockquote { margin: 0 }` à solta apanhava o rodapé e qualquer citação futura fora de conteúdo. */ main .elementor-widget-text-editor blockquote { margin-inline: 0; } /* D4. ALVOS DE TOQUE a 390px (WCAG 2.5.8, que pede 24×24 — aqui usa-se 44, que é o mínimo do 2.5.5 e o que a crítica mediu). Medidos 33 alvos NÃO-INLINE abaixo de 44×44 nas 14 páginas, e são só três coisas repetidas: o botão «Inscrever-se» do cabeçalho a 119×41 (emitido DUAS vezes por página, desktop e telemóvel), o hamburger a 39×39, e uma ligação solta na `curso`. ⚠️⚠️ A CRÍTICA CONTOU 165 DE 190 NO `terapeutas`, E ESSE NÚMERO NÃO É ACCIONÁVEL: o 2.5.8 isenta explicitamente o alvo cujo tamanho é dado pela entrelinha do texto à volta, e a esmagadora maioria dos 164 que se medem lá são as ligações «( mais info )» dentro das linhas de terapeuta. Alargá-las era engordar texto corrido. ▶ A régua aplica a isenção; sem ela, esta linha mandava corrigir 164 falsos. ⚠️ Escolhe-se `.elementor-location-header .elementor-button` e não `.elementor-button` — os 8 botões de inscrição que o corpo ganhou a 01/09 já medem 143×48 e não têm nada que ver com isto. ⚠️⚠️ GOTCHA DO CUSTOM CSS, apanhado a 02/09 a ler o `post-6.css` servido: o Elementor SUBSTITUI a palavra reservada `sele` + `ctor` pelo .elementor-kit-6 do elemento, e faz isso DENTRO DOS COMENTÁRIOS também. Esta linha dizia «O ⟨palavra⟩ do botão é …» e chegou ao servidor como «O .elementor-kit-6 do botão é …». Não estragou nada por ser comentário, mas numa regra a sério trocava o alvo em silêncio. ▶ Não se escreve essa palavra no Custom CSS, nem a explicar. ✅ E HÁ UMA SAÍDA, MEDIDA a 02/09 ao fim do dia: **a substituição é SENSÍVEL A MAIÚSCULAS**. Lido no `post-6.css` servido, no mesmo ficheiro e na mesma corrida: a forma minúscula desta linha foi trocada pelo `.elementor-kit-6`, e a forma MAIÚSCULA de outro comentário — «O SELECTOR TEM DE TER UMA CLASSE», mais abaixo — chegou intacta. ▶ Precisas de a escrever num comentário? Escreve-a em MAIÚSCULAS. ▶ A ligação solta da `curso` é `> a:only-child`: um que é o único conteúdo do seu widget de texto não tem texto nenhum à volta, portanto a isenção inline não o cobre. `inline-flex` + `align-items: center` dá-lhe os 44px sem deslocar a linha de base do texto. Alcance medido: 2 botões + 1 hamburger por página, e 1 ligação ao todo. */ .elementor-location-header .elementor-button { min-block-size: 44px; } .elementor-menu-toggle { min-inline-size: 44px; min-block-size: 44px; } main .elementor-widget-text-editor > a:only-child { display: inline-flex; align-items: center; min-block-size: 44px; } /* ===== Identidade — tratamento de imagem, 2026-09-02 ================ A crítica de 01/09 diz que «as imagens não têm sistema»: a grelha da homepage junta seis géneros sem nada que os ligue. MEDIDO antes de escrever isto: as 112 imagens de corpo das 14 páginas têm TODAS `border-radius: 0px` e `border: 0px none`. Não havia tratamento nenhum. ⛔ O QUE NÃO SE FEZ, E É MEDIDO: uniformizar proporções. A crítica pedia 16:9 nos cartões e 1:1 nos retratos, e isso NÃO se pode fazer aqui — 29 imagens do `testemunhos` são capturas de ecrã com o TEXTO dentro, e dar-lhes caixa fixa corta esse texto. É o mesmo defeito da Eugénia Fonseca que já está na dívida técnica, e nenhuma das réguas o vê. ✅ Medido também: 116 imagens, **0 deformadas** acima de 2% (o `object-fit: fill` de 38 delas é o valor inicial e é inócuo — não há altura fixa a lutar com a proporção). Esse risco não existia. ⚠️⚠️ O SELECTOR TEM DE TER UMA CLASSE, e não é gosto — é o que foi preciso para ganhar. Quem põe as imagens a canto vivo é o próprio Elementor, com `.elementor img { border-radius: 0 }`, que é (0,1,1). A 1.ª versão desta regra era `main img`, (0,0,2), e PERDIA em silêncio: o computado continuava `0px` e o antes e o depois saíam iguais no screenshot. `main .elementor img` é (0,1,2) e ganha. ▶ É a SEGUNDA vez no mesmo dia que uma regra nossa perde por especificidade contra o Elementor — a primeira foi o anel de foco (A1). ⚠️ `main` exclui o cabeçalho e o rodapé: o logótipo é marca, não fotografia, e não leva moldura. */ main .elementor img { border-radius: 12px; } /* ⚠️ A LINHA VAI SÓ NOS CARTÕES, e a razão é medida. Das 116 imagens de corpo, 21 estão dentro de `.hip-cartao` e enchem a caixa — 21 de 21, contadas uma a uma. Das 95 soltas, 43 NÃO enchem: 12 no `calendario`, 6 no `terapeutas` (os mapas) e 25 no `testemunhos`. ▶ Numa imagem que não enche, a `box-shadow` desenha o rectângulo da CAIXA e não o da foto: fica um contorno à volta de espaço vazio. Foi visto em screenshot no `testemunhos`, e é por isso que a 1.ª versão desta folha — linha e fundo `marca_50` em TUDO — foi deitada fora. O raio acima fica em todas porque numa caixa que a foto não enche ele não tem efeito visível nenhum. ⚠️ `box-shadow` e não `border`: uma borda de 1px entra na caixa de layout e mudava a geometria que o `medir_acabamento.mjs` e o `medir_encolhimento.mjs` medem. A sombra a zero de desfoque desenha a mesma linha e não mexe um pixel. ⚠️ O rgba é o `marca_700` (#9A2069) a 14%, colado de propósito: uma var() do kit não se pode diluir em opacidade sem `color-mix()`, que o Elementor não garante nesta versão. É a segunda excepção consciente do ficheiro, a par do #B91C1C do A4. */ main .elementor .hip-cartao img { box-shadow: 0 0 0 1px rgba(154, 32, 105, 0.14); } /* ===== Colapso das zonas do `terapeutas` — 2026-09-02, fim da tarde == C1. AS 7 ZONAS PASSAM A ABRIR UMA DE CADA VEZ. Medido a 02/09 às 17:2x, a 390px: a página tinha 47 839px, 56,7 alturas de ecrã, com as 173 fichas empilhadas e sem pesquisa, filtro nem corte. A barra de âncoras já existia e saltava para as 7 zonas, mas quem saltava aterrava a meio da página e deixava de ver a barra. O QUE ESTA REGRA FAZ: esconde a LINHA DE FICHAS de toda a zona que não seja o alvo da âncora. O `h2` da zona e o mapa do cliente ficam à vista — os 7 mapas são conteúdo dele, e a D6 existe para lhes dar sítio. COMO SE NOMEIA A LINHA: é o contentor que tem `.hip-cartao` por FILHO DIRECTO. A árvore servida é `#zona-x > .e-con-inner > (imagem, .e-con-boxed > .e-con-inner > (h2, LINHA))` e nenhum desses níveis tem classe própria — o `:has(> .hip-cartao)` é a única forma de lhe chamar o nome sem contar `> div` desde a raiz, que parte no dia em que o Elementor mudar de invólucro. ⚠️ ESCONDE-SE O QUE ESTÁ FECHADO; NUNCA SE MOSTRA O QUE ESTÁ ABERTO. A forma óbvia — `display: none` em todas e `display: flex` no `:target` — obriga a saber o valor declarado da linha (medido a 02/09: `flex`, às duas larguras) e passa a mentir no dia em que o construtor passar a grelha. Com `:not(:target)` a zona aberta não casa regra nenhuma e fica com o display que já tinha. Zero valores copiados. ⚠️ `#ver-todas:target` DESLIGA A REGRA INTEIRA, e é isso que impede o colapso de esconder conteúdo sem saída: com a zona fechada, o Ctrl+F do browser NÃO encontra as fichas, porque `display: none` sai da busca da página. O 8.º botão da barra («Ver todas») aponta para a própria barra, que leva esse id, e repõe a página como estava antes desta regra. ⚠️ O `[id^="zona-"]` é hoje EXCLUSIVO da `terapeutas` — conferido nos 14 módulos de `paginas/`: as únicas âncoras com esse prefixo são as 7 dela; as do `curso` são `certificacoes` e afins. Uma página nova que use o prefixo herda este colapso sem o ter pedido. ⚠️ SEM `:has()` NÃO ACONTECE NADA, e é de propósito: um browser que não o suporte deita fora o seletor inteiro e serve a página de antes de 02/09, com as 173 fichas à vista. Degrada para o comportamento antigo, não para uma página partida. */ main .elementor:not(:has(#ver-todas:target)) [id^="zona-"]:not(:target) .e-con:has(> .hip-cartao) { display: none; } /* ===== Corte dos cartões do `testemunhos` — 2026-09-03 =============== T1. OS CARTÕES PASSAM A MOSTRAR 4 LINHAS, COM UMA SAÍDA. Medido a 03/09 às 10:2x, a 390px: a página tinha 54 105px, 64,1 alturas de ecrã. Os 44 cartões de texto são 38 098px disso — 70,4%. Com esta regra: 26 593px, 31,5 ecrãs. Menos 50,8%. ⛔ PORQUE NÃO LEVA O MECANISMO DO C1: a `testemunhos` não tem zonas nem âncoras. São 41 testemunhos em 6 pilhas entremeados com 2 carrosséis, 3 gráficos, 1 vídeo e as «Conversas Hypnos», NA ORDEM EDITORIAL DO CLIENTE. Colapsar «secções» ali obrigava a inventar agrupamentos que ele não tem, e isso bate na regra do CLAUDE.md. O que se corta é o TEXTO de cada cartão, que é uma unidade que ele próprio escreveu. ⚠️ `4lh` E NÃO `109px`, e a diferença é a lição do C1 a valer outra vez. O `lh` é a entrelinha que o browser já calculou para aquele elemento — zero valores copiados para dentro do CSS. Medido a 03/09: dá 109px (4 × 27,2px), e no dia em que a escala tipográfica mudar acompanha-a sozinho. Um `109px` copiado passava a mentir nesse dia. ⚠️ O `:has(#ver-tudo)` LIMITA A REGRA À PÁGINA QUE TEM O BOTÃO, e é o que impede isto de cair nos cartões das outras 13. A classe `.hip-cartao` é de TODAS elas (é o `CLASSE_CARTAO` do `seccoes.py`), portanto sem esta condição a regra cortava a `como-escolher`, a `normas` e as restantes. 🟢 PROVADO a 03/09, e não presumido: injectada numa página sem `#ver-tudo`, a altura fica em 54 105px — a regra não faz nada. ⚠️ Conferido nos 14 módulos de `paginas/`: ninguém mais usa esta âncora. Uma página nova que ponha um `#ver-tudo` herda o corte — mas aí é de propósito, porque o botão é o pedido explícito. ⚠️ O `mask-image` NÃO É ENFEITE. Sem ele o texto corta a meio de uma palavra e lê-se como página partida, não como resumo. Não usa cor nenhuma da paleta — é uma máscara de opacidade, e por isso continua certa se a identidade mudar outra vez. ⛔ E O QUE ESTA REGRA NÃO FAZ, medido: com o cartão cortado, o Ctrl+F do browser ENCONTRA o texto e não o mostra — o `overflow: hidden` não sai da busca da página, ao contrário do `display: none` do C1. É pior nesse ponto e melhor noutro (o texto fica na página para quem lê com leitor de ecrã). A saída «Ver testemunhos completos» é o que torna isto aceitável. ⚠️ SEM `:has()` OU SEM `lh` NÃO ACONTECE NADA, e é de propósito: o browser deita fora o seletor ou a declaração e serve a página de antes de 03/09, com os 44 cartões inteiros. Degrada para o comportamento antigo, não para uma página partida. */ main .elementor:has(#ver-tudo):not(:has(#ver-tudo:target)) .hip-cartao > .elementor-widget-text-editor { max-block-size: 4lh; overflow: hidden; mask-image: linear-gradient(to bottom, #000 60%, transparent); } /* T1b. E AS LIGAÇÕES DO TEXTO CORTADO SAEM DA ORDEM DO TAB. 🔴 ACHADO DO `codex review`, 03/09, e é um defeito a sério: o `overflow: hidden` corta o DESENHO e não desliga nada. Uma ligação abaixo da 4.ª linha continua focável — quem navega por teclado chega-lhe, o browser rola o contentor para a mostrar, e o foco fica num sítio que ninguém vê. **É a diferença para o C1**, onde o `display: none` tira da ordem do tab sozinho. Escrever «é como o C1» teria escondido isto. O `visibility: hidden` tira do tab order E do render, que é o que se quer para uma ligação que já está fora da caixa. ⚠️⚠️ ISTO SÓ É SEGURO PORQUE **ZERO** LIGAÇÕES ESTÃO VISÍVEIS NAS 4 PRIMEIRAS LINHAS, e isso é MEDIDO, não presumido: a 03/09 os cartões têm 2 ligações (a do Rafael Reis e a do Rui Santos), a 536px e a 398px do topo do texto, com 109px visíveis. **As duas fora da caixa.** 🔴 **No dia em que o cliente mandar um testemunho com a ligação nas 4 primeiras linhas, esta regra escondia-lhe a ligação a MEIO da frase** — um buraco em branco no texto dele. ▶ **Por isso existe o grupo T5 do `medir_colapso.mjs`, que reprova se alguma ligação de cartão cair dentro da caixa visível.** A regra é segura hoje; a régua avisa quando deixar de ser. Sem esse grupo, isto era uma bomba com temporizador. */ main .elementor:has(#ver-tudo):not(:has(#ver-tudo:target)) .hip-cartao > .elementor-widget-text-editor a { visibility: hidden; } /* ===== Tabela de comparação — 2026-09-03 ============================= E1. A TABELA LÊ-SE, E EM ECRÃ ESTREITO ROLA POR DENTRO. Nasceu para a tabela das 6 sessões do `calendario`, que a crítica de 01/09 pediu: as sessões diferem em cidade × formato × datas × horas × carga horária e estavam escritas em prosa, portanto não se comparavam. 🔴 QUEM ROLA É A MOLDURA, NUNCA A PÁGINA. Quatro colunas não cabem em 390px e não têm de caber — o que não pode acontecer é a PÁGINA rolar de lado, que é a régua que este site tem a zero desde 21/08. O `overflow-x: auto` na `.hip-tabela-moldura` põe a barra dentro dela. ▶ O D8 do `medir_desenho.mjs` mede as DUAS pontas: a moldura tem de rolar (`scrollWidth > clientWidth`) E o documento tem de ficar a zero. Medir só o documento deixava passar uma tabela esmagada até ficar ilegível; medir só a moldura deixava passar uma página partida. ⚠️ `min-inline-size` NAS CÉLULAS, e é o que impede o esmagamento. Sem ele o browser encolhe as colunas até caberem — a tabela deixa de rolar, o D8 reprova por «a moldura não rola», e o que se vê é uma coluna de palavras partidas letra a letra. O valor é uma medida de leitura, não uma cópia de nada: cabe uma data curta («19/9/2026») sem quebrar. ⚠️ O ANEL DE FOCO DA MOLDURA NÃO SE APAGA. Ela leva `tabindex="0"` porque é uma região que rola, e quem chega lá por teclado tem de ver onde está — é o mesmo A1 do formulário, aplicado a outra coisa. Usa a cor da marca, que é a única das três do logótipo que passa AA. ⚠️ `border-collapse: collapse` e a linha só EM BAIXO de cada `tr`: uma grelha completa desenha 28 traços numa tabela de 4×7 e compete com o texto. A separação horizontal chega para o olho seguir a linha. ⛔ O QUE ESTA REGRA NÃO FAZ: não transforma a tabela em cartões abaixo de uma largura. Isso seria mudar a estrutura conforme o ecrã, e uma tabela que deixa de ser tabela deixa de ser comparável — que é a única coisa que ela existe para fazer. Rolar mantém a comparação. */ main .hip-tabela-moldura { overflow-x: auto; max-inline-size: 100%; } main .hip-tabela-moldura:focus-visible { outline: solid 3px var(--e-global-color-hip_marca_700); outline-offset: 2px; } main .hip-tabela-moldura table { border-collapse: collapse; inline-size: 100%; text-align: start; } main .hip-tabela-moldura caption { text-align: start; padding-block-end: 12px; color: var(--e-global-color-hip_cinza_600); } main .hip-tabela-moldura th, main .hip-tabela-moldura td { min-inline-size: 9ch; padding: 12px 16px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--e-global-color-hip_cinza_150); } main .hip-tabela-moldura thead th { border-block-end: 2px solid var(--e-global-color-hip_marca_700); white-space: nowrap; } /* E1b. A FONTE VOLTA AOS 16px DO RESTO DO SITE. Medida a 03/09 no publicado: as células saíam a **14,4px**, que é o que o tema dá a uma tabela. O corpo deste site é 16px em todo o lado, e uma tabela de comparação — que é para se ler célula a célula — é o pior sítio para ter a letra mais pequena da página. */ main .hip-tabela-moldura th, main .hip-tabela-moldura td { font-size: 1rem; } /* E1c. A ÚLTIMA COLUNA NÃO ENCOLHE, E ISTO É O QUE SALVOU A TABELA A 390px. 🔴 O DEFEITO QUE SÓ O SCREENSHOT MOSTROU: a 390px a coluna da carga horária fica FORA do ecrã — mas continua a mandar na ALTURA da linha. Encolhida, o texto dela (90 caracteres) quebrava em 5 linhas, e o que se via eram linhas de 133px quase vazias, com a coluna culpada invisível. A régua dava PASS: a moldura rolava e a página estava a zero. **Passou por uma prova verde e reprovou aos olhos.** ⚠️ O `30ch` É O PONTO ONDE PARA DE MELHORAR, e foi medido, não escolhido. Ensaiados 30ch e 40ch a 390px e a 1440px: 390px como estava 576px de tabela · linhas 133px · total 886px 16px + 30ch 741px · linhas 97px · total 672px 16px + 40ch 851px · linhas 97px · total 672px 1440px 16px + 30ch 896px, NÃO rola · linhas 73px O 40ch alarga a tabela mais 110px e **não melhora nada** — mesma altura de linha, mesma altura total. ▶ Escolhe-se o mais estreito dos dois que dão o mesmo resultado, porque numa tabela que rola cada pixel de largura é mais um que alguém tem de arrastar. ⚠️ `tr > :last-child` e não `td:last-child`: a última célula do cabeçalho é um `th`, e sem ela na regra a coluna do cabeçalho e a do corpo pediam larguras diferentes. */ main .hip-tabela-moldura tr > :last-child { min-inline-size: 30ch; } /* W1. O ESTADO DE UM WEBINAR PASSA A DISTINTIVO, NA PRIMEIRA GRELHA DA `workshops`. 🔴 O DEFEITO: os 3 cartões de cima misturam 1 aberto com 2 já realizados, e a ÚNICA diferença entre eles era a palavra — «*Inscrições abertas!» contra «*Já realizado» — a 16px negrito, no mesmo estilo do preço, do formador e do sumário. É a única página das oito com produto pago (25,00 € / 50,00 €), e toda a decisão do visitante estava codificada numa linha de texto que ele tinha de ler em cada cartão. Os 13 de baixo NÃO levam distintivo: a secção deles já se chama «Outros webinars *Já realizados», e repetir o estado 13 vezes debaixo de um título que o diz é ruído. ⛔ O TEXTO NÃO MUDA — nem uma letra. O que muda é a apresentação: a palavra dele ganha caixa, cor e peso. Marcado por uma classe no `

`, posta pelo `workshops.py` a partir de uma declaração EXPLÍCITA por cartão, nunca por adivinhação sobre o texto. ⚠️⚠️ E A ADIVINHAÇÃO ESTAVA MEDIDA E RECUSADA. A 03/09 contaram-se as formas do estado nos 16 cartões e são CINCO, não duas: 10x `(já realizada)` 2x `*Já realizado` 1x `*Inscrições abertas!` 1x `30 Março - 20h30/22h30 (já realizada)` 1x `14/Março - 20h30/22h30(já realizado)` E um cartão — `Terapia das Partes` — não declara estado nenhum. 🔴 Pior, e é o que mata a regra por palavra: o subtítulo «Mas, ses, porquês... - As feridas abertas» casa com «abertas» e NÃO é estado nenhum. Uma regra por texto pintava-o de «inscrições abertas». ▶ Por isso o estado é DECLARADO, e a marcação falha alto se a frase declarada não estiver no cartão. ⚠️ `inline-block` e não `block`: o distintivo tem de ter a largura do texto, não a da coluna. Com `block` era uma faixa de 608px atravessada por três palavras. */ main .hip-estado { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em; } /* W1b. Aberto: o magenta da marca sobre branco — o par já medido a **7,54:1** no resto do site (é o dos botões). Realizado: cinza escuro sobre branco, **7,81:1**, que recua na leitura sem desaparecer da vista. ⚠️⚠️ O CINZA CLARO ESTAVA MEDIDO E FOI RECUSADO, e o número que o mata não é o do TEXTO. Com `hip_cinza_50` (#FAFAFA) o texto dava 17,18:1 — excelente — mas o DISTINTIVO contra o cartão branco dava **1,044**, e um distintivo que não se distingue do cartão não é distintivo nenhum. Ele até passava a régua da casa (o mínimo é 1,03), e passava **por três centésimas**: uma prova verde sobre uma coisa invisível. ▶ Medidas as quatro globais de cinza contra o branco do cartão: #FAFAFA 1,044 · #EDEDED 1,171 · **#525252 7,814** · #171717 17,928 ▶ Escolhido o #525252: vê-se, e com texto branco o contraste do texto é o mesmo 7,81. O #171717 vê-se ainda melhor e pesava mais na página do que o magenta do que está ABERTO — que é o contrário do que se quer. 🔴 Lição: quando se pinta um distintivo, medem-se DOIS contrastes — o do texto contra o distintivo e o do distintivo contra o que está por trás. Medir só o primeiro dá verde a uma etiqueta que ninguém vê. */ main .hip-estado--aberto { background: var(--e-global-color-hip_marca_700); color: #FFFFFF; } main .hip-estado--realizado { background: var(--e-global-color-hip_cinza_600); color: #FFFFFF; } /* ===== N1. Salto de âncora por baixo do cabeçalho fixo — 2026-09-03 == O índice das 26 normas aterrava DEBAIXO do cabeçalho: medido no HTML servido, 25 das 26 âncoras a 1440px e 23 das 26 a 390px chegavam com o topo tapado. O cabeçalho é `position: fixed` e mede **132px a 1440px** e **117px a 390px** (lidos com estilos computados, não do CSS). 148px = os 132 do caso pior + 16 de ar. A 390px sobra folga (31px em vez de 16) e isso é preferível a duas regras e a um `@media` — o CSS deste site não tem nenhum, e o valor a mais só afasta o texto do cabeçalho, nunca o esconde. ⚠️ ÂMBITO DELIBERADAMENTE ESTREITO: só os alvos `norma-N`. A `curso` tem o MESMO defeito e está MEDIDO (metodologia e bibliografia: 132px a 1440, 117px a 390) — mas alargar o seletor mudava o salto de páginas que esta ronda não mediu uma a uma. Está no HANDOFF por decidir. */ main [id^="norma-"] { scroll-margin-top: 148px; } /* N1b. Os 26 botões do índice, todos da MESMA largura. Sem isto as colunas dançam: medido no HTML servido, um botão de um dígito sai a **59px** e um de dois a **73px**, e o `flex-wrap` alinha pela ordem, não por grelha — a 390px liam-se sete linhas com as colunas todas desencontradas. 73px é o máximo MEDIDO, não um palpite: iguala sem apertar nenhum, e a 390px quatro deles mais três goteiras de 12px dão 328px, que cabe na coluna de leitura. ⚠️ É `min-inline-size` e não `width`: o botão pode crescer se o tipo de letra mudar, o que não pode é ficar mais estreito do que o vizinho. */ main a[href^="#norma-"] { min-inline-size: 73px; } /* N2. O número de cada norma — que é texto DELE, não numeração nossa — ganha peso e a cor da marca, para o olho poder saltar de norma em norma. Medido antes, no site servido: 26 parágrafos seguidos, 1228 palavras sem uma pausa visual, e o número enterrado no meio do parágrafo. */ .hip-norma-n { font-weight: 700; color: var(--e-global-color-hip_marca_700); } /* N2b. Cada norma separa-se da anterior. Sem isto são 26 blocos com o mesmo peso e o olho não tem onde parar. O .elementor-kit-6 é ESTREITO de propósito (`main [id^="norma-"]`, a mesma família da N1): alargá-lo mudava o espaçamento de páginas que esta ronda não mediu. ⚠️ padding-top 33px, não 24 — corrigido na volta 2 da crítica (04/09, `criticas/volta-1.md`, P2). O crítico media 34,39px entre o fim do texto e a linha (14,4px de margin-bottom do

+ 20px de gap do flex) contra só 25px entre a linha e a norma seguinte (1px de borda + 24px de padding-top): a linha ficava ~27% mais perto da norma seguinte do que da anterior. Remedido nas 25 fronteiras (comRisco) e nos dois viewports antes de mudar, com `medir_simetria.mjs`: os dois lados são CONSTANTES (é CSS, não varia por norma) — gap acima da linha 34,3906px em todas as 25, nos dois viewports. ⚠️⚠️ CORRIGIDO (ronda de revisão, 04/09): o cálculo abaixo tinha um erro de referência, apanhado por `criticas/volta-2.md`. O `medir_simetria.mjs:47-48` mede `gap_acima` ATÉ AO TOPO da borda e `gap_abaixo` A PARTIR DE BAIXO da borda — os dois já excluem a borda, cada um do seu lado. Para o ar ficar simétrico à volta da linha bastava por isso igualar padding-top a gap_acima: o exacto simétrico seria **34px**, não 33. Subtrair a borda a gap_acima (34,3906 − 1 ≈ 33, como este comentário dizia antes) compara dois pontos de referência diferentes e tira a borda ao lado errado — não é arredondamento, é um erro de derivação. Fica em **33px** na mesma (não é isto que se está a corrigir: 1px numa linha decorativa é imperceptível e republicar só por isto não se paga); o que se corrige é a explicação, para a página seguinte não repetir a subtracção. Não se mexeu no gap do flex nem no margin-bottom do

— os dois são partilhados com outras páginas e esta ronda não as mediu. */ main [id^="norma-"] + [id^="norma-"] { border-top: 1px solid var(--e-global-color-hip_cinza_150); padding-top: 33px; } /* C2. A CABEÇA DE NÍVEL do programa do `curso`. ⚠️ É C2 e não C1 porque o `C1` JÁ ESTÁ TOMADO — é o colapso das 7 zonas da `terapeutas` (linha 476). A primeira versão desta ronda escreveu C1 e a verificação 37 apanhou-a: contou 21 grupos onde a linha declarava 22, porque dois rótulos iguais são UM conjunto. ▶ Rótulo novo confirma-se contra os que existem, não se escolhe pela inicial da página. Medido a 07/09 no HTML servido: o programa são 31 parágrafos com o mesmo peso, e lá dentro o cliente escreveu TRÊS níveis e 26 módulos numerados por ele. «Nível I» é um parágrafo indistinguível de um módulo, e por isso ninguém vê onde um nível acaba e o outro começa — a maior corrida da página é de 28 parágrafos sem uma pausa (spec §1). ⚠️ NÃO é um `

`: virar isto em título mexia na hierarquia de cabeçalhos, que tem régua própria desde 02/09 (os saltos de nível). O que se muda é o peso e a cor — a mesma escolha da `.hip-norma-n`. */ .hip-nivel { font-weight: 700; color: var(--e-global-color-hip_marca_700); margin-block-start: 2em; } /* C2b. OS 26 MÓDULOS LEEM-SE COMO LISTA, com o número pendurado na margem: a primeira linha começa onde começava e as seguintes alinham por baixo do TEXTO, não por baixo do número. ⛔ Isto NÃO é uma `
    `, e a razão é a mesma que manteve a `normas` em prosa: ele já numera («1 - », «10- »), e uma lista ordenada duplicava a numeração dele. 🔴 É TAMBÉM O QUE RECUPERA O DESTAQUE DO NÚMERO SEM LHE TOCAR. A primeira versão desta ronda envolvia o número num `` e o `verificar_conteudo` reprovou 5 blocos — os 5 módulos que ele escreve «1-» COLADO, onde o span mete um espaço que o cliente não tem (ver `verificar_conteudo.py:104` e o comentário do `_com_ritmo()`). O recuo faz o mesmo trabalho visual sem etiqueta nenhuma dentro do texto. ⚠️ 2.4em cobre a forma mais larga que ele usa, «10- » (4 caracteres). Formas mais curtas deixam folga — é o normal numa lista pendurada, e o que importa é que as 26 alinhem o TEXTO na mesma coluna. ⚠️ O `padding-inline-start` ESTREITA a linha e nunca a alarga, portanto não desfaz o `max-inline-size: 42em` do grupo D2 — que é a medida de leitura e não se toca. */ .hip-item { padding-inline-start: 2.4em; text-indent: -2.4em; } /* C2c. E cada módulo separa-se do anterior. Sem isto os 26 encostam-se e o recuo sozinho não chega para o olho parar. ⚠️ 10px, não os 33px da norma — e a diferença é medida, não gosto: uma norma tem 47,3 palavras de média e um módulo tem 10,0 (260 em 26). O mesmo ar sobre blocos 4,7x mais curtos rasgava a página em 26 tiras. ⚠️ É `padding`, não `margin`, para não colapsar com o margin-bottom do

    , que é partilhado com páginas que esta ronda não mediu. 🔴 NÃO é `.hip-item + .hip-item`, e isso foi MEDIDO no publicado: a primeira versão usava o irmão adjacente e o estilo computado deu `padding-block-start: 0px` nos 26. A causa é a árvore do Elementor — cada `texto_rico()` é um WIDGET próprio, portanto os `

    ` nunca são irmãos: têm um `.elementor-widget-text-editor` cada um pelo meio. ▶ Aplica-se a todos, e o primeiro leva 10px a mais do que precisava. É inofensivo — vem logo a seguir a uma cabeça de nível, que já traz 2em de ar — e evita um `:has()` para ganhar 10px num sítio só. */ .hip-item { padding-block-start: 10px; } /* C2d. A CONTINUAÇÃO de uma entrada: o mesmo recuo, SEM o pendurado. Existe por um caso só, e é do texto do cliente: na `inicio` ele partiu uma frase em dois blocos — «…a pessoa pode melhorar a» e «concentração, a memória e o desempenho…». São dois `

    ` do original e mantêm-se dois (decisão D1, registada em `paginas/inicio.py:109-111`); o que não podem é desalinhar. ⚠️ Sem `text-indent` de propósito: com ele, a primeira linha da segunda metade saltava para a margem e a frase lia-se como duas entradas. */ .hip-item-cont { padding-inline-start: 2.4em; } /* ===== F1. Acordeão de FAQ — 2026-09-08 =========================== O ORIGINAL do cliente tem esta secção como acordeão — o HTML dele marca-a `data-aid="FAQ_QUESTION"` e `FAQ_ANSWER_RENDERED_0..4` — e a nossa migração achatou-a em prosa corrida: 5 títulos dele perdidos e 2 300 caracteres seguidos sem uma pega para o olho. As 5 respostas batiam byte a byte com os nossos 5 parágrafos (medido a 08/09), por isso o que entrou foram só os títulos que faltavam. ▶ A marcação é `

    `/`` NATIVO — ver a docstring do `seccoes.acordeao()` para as três razões. Aqui fica só o que o CSS tem de fazer e porquê. ⚠️ O `list-style: none` E o `::-webkit-details-marker` são precisos os DOIS, e não é redundância: o Chrome e o Firefox escondem o triângulo pelo primeiro, o Safari só pelo segundo. Com um só, metade dos visitantes vê duas setas — a do browser e a nossa. ⚠️ O «+» é um `::after` e NÃO um ``: as verificações 41-43 proíbem `` dentro do texto do cliente porque o extractor junta nós com um espaço. Um sinal desenhado em CSS não existe para o extractor, e por isso não pode inventar espaço nenhum. ⚠️ FECHADO o título é `cinza_600` (#525252, 7,46:1 sobre branco) e ABERTO é `cinza_900` (#171717, 17,18:1). Os dois passam AA com folga — o esbatido do componente de referência copiou-se no PESO da cor, não em opacidade, que é o que costuma reprovar contraste. ⚠️ O `margin-block-start` do «+» é `.35em` e não `0`: alinha o sinal com a PRIMEIRA LINHA do título, não com o centro da caixa. Um título que parta em duas linhas descia o sinal para o meio, e ele deixava de se ler como o botão daquela linha. 🔴 A ANIMAÇÃO É PROGRESSIVA E ISSO É DECLARADO, não esquecido. Abrir um `
    ` com transição só é possível com `interpolate-size` e `::details-content`, que hoje são do Chromium. Fora dele o painel abre de repente — e abre, que é o que interessa. Por isso vai dentro de um `@supports`: o conteúdo nunca depende da animação. ▶ E é também porque é que NÃO se usou `max-height` com um número inventado: uma resposta mais comprida do que o palpite fica cortada, e nenhuma régua desta casa mede um corte desses. */ .hip-faq details { border: 1px solid var(--e-global-color-hip_cinza_150); border-radius: 12px; background-color: #FFFFFF; transition: background-color .2s ease; } .hip-faq details + details { margin-block-start: 16px; } .hip-faq details[open] { background-color: var(--e-global-color-hip_cinza_50); } .hip-faq summary { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 16px 20px; cursor: pointer; list-style: none; font-weight: 600; color: var(--e-global-color-hip_cinza_600); transition: color .2s ease; } .hip-faq summary::-webkit-details-marker { display: none; } .hip-faq details[open] > summary { color: var(--e-global-color-hip_cinza_900); } .hip-faq summary:focus-visible { outline: 2px solid var(--e-global-color-hip_marca_700); outline-offset: 2px; } .hip-faq summary::after { content: ""; flex: none; inline-size: 18px; block-size: 18px; margin-block-start: .35em; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: rotate .2s ease; } .hip-faq details[open] > summary::after { rotate: 45deg; } .hip-faq .hip-faq-r { padding: 0 20px 20px; } .hip-faq .hip-faq-r p:last-child { margin-block-end: 0; } @supports (interpolate-size: allow-keywords) { .hip-faq { interpolate-size: allow-keywords; } .hip-faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .3s ease, content-visibility .3s allow-discrete; } .hip-faq details[open]::details-content { block-size: auto; } } /* ===== G1. Texto a correr à volta da foto — 2026-09-09 ============== Pedido do Tiago: «quando não houver foto tem de ocupar a página». Numa GRELHA as duas colunas nascem à mesma altura e a foto acaba onde acaba — medido nas 13 páginas a 09/09: 17 secções de 19 com mais de 120px de branco por baixo da foto, 24 508px somados, a pior com 3 408. Aqui a foto FLUTUA e o texto corre por baixo dela quando ela acaba. 🔴 `.e-con.hip-correr` e não `.hip-correr`, e a diferença importa: o Elementor declara `.e-con { display: flex }` com a mesma força que uma classe sozinha teria, e um float dentro de um flex NÃO faz o texto correr — os filhos viram itens de flex e alinham-se lado a lado. Com as duas classes a regra ganha por especificidade, e não por ordem de carregamento, que é o que muda quando alguém mexe no ficheiro. 🔴 Os widgets também voltam a BLOCO. Medido na maqueta de 09/09: com os widgets a `display: flex` (o que o Elementor lhes dá dentro de um contentor flex), a foto ficava por CIMA do texto e não ao lado — o float não tem efeito nenhum sobre um irmão que gera contexto próprio. ⚠️ O `::after` com `clear: both` é o que impede o fundo da secção de colapsar: sem ele, um contentor cujo único conteúdo alto é o float sai com a altura do texto e a foto transborda para a secção seguinte. 🔴🔴 O CAMINHO PASSA PELO `.e-con-inner`, E ISSO FOI MEDIDO, NÃO ADIVINHADO. Um contentor `e-con-boxed` do Elementor não põe os widgets como filhos dele: mete-os dentro de um `
    ` que ele próprio gera. Com `.e-con.hip-correr > .hip-correr-foto` — o filho DIRECTO — o seletor não bate em nada, o `float` fica em `none` e a foto sai com 1000px por cima do texto, que é a forma antiga com outro nome. Medido a 09/09 no HTML servido: a classe estava lá e o estilo computado dizia `float: none`. ▶ **A lição é a de sempre nesta frente:** a classe no HTML prova que a marca chegou, não que a regra ganhou. Quem prova é o estilo computado, e foi a régua `medir_correr.mjs` que o disse. */ .e-con.hip-correr, .e-con.hip-correr > .e-con-inner { display: block; } .e-con.hip-correr > .e-con-inner > .elementor-widget { display: block; width: auto; max-width: none; } .e-con.hip-correr > .e-con-inner > .hip-correr-foto { float: left; width: 400px; margin: 6px 32px 12px 0; } .e-con.hip-correr > .e-con-inner > .hip-correr-foto--dir { float: right; margin: 6px 0 12px 32px; } /* ⚠️ O modificador de largura, 2026-09-09. A regra de cima fixa `width: 400px` no WRAPPER, e por isso o `largura_imagem` da `imagem()` — que escreve `max-width` na — não consegue esticar a foto: medido, pedi 520 e saiu 400. Este modificador é a única forma de a alargar sem mexer nas 9 outras secções de texto a correr do site. Entrou com a caixa da «Quando recebemos…» a passar de 1000 para 1720px, onde 400px de foto ficavam pequenos para o bloco. */ .e-con.hip-correr > .e-con-inner > .hip-correr-foto--larga { width: 520px; } .e-con.hip-correr > .e-con-inner::after { content: ""; display: block; clear: both; } @media (max-width: 767px) { .e-con.hip-correr > .e-con-inner > .hip-correr-foto, .e-con.hip-correr > .e-con-inner > .hip-correr-foto--dir { float: none; width: 100%; margin: 0 0 24px 0; } /* 🔴 E A TAMBÉM PERDE O TECTO, senão o `width: 100%` de cima não serve de nada — achado do `codex review` a 09/09, aceite e MEDIDO. A `imagem()` escreve `max-width: 400px` na (é a largura do float no desktop) e esse cap sobrevive ao empilhamento: 390px → caixa 350 · img 350 ok, o cap não morde 560px → caixa 520 · img 400 120px de branco 700px → caixa 660 · img 400 260px 767px → caixa 727 · img 400 327px É a MESMA família do outro achado da mesma volta (o tecto de 520px na `foto_a_acompanhar`): uma regra de layout nova e um `max-width` antigo a lutar, com o `max-width` a ganhar. Aqui cura-se no CSS, porque o número do desktop tem de ficar. */ .e-con.hip-correr > .e-con-inner > .hip-correr-foto img, .e-con.hip-correr > .e-con-inner > .hip-correr-foto--dir img { max-width: none; width: 100%; } } /* ===== B1. Banda de fotografia a toda a largura — 2026-09-09 ======== Uma fotografia que toca as duas bordas do ecrã, como respiro entre blocos de texto. Nasceu com as imagens geradas de 08/09. 🔴 O QUE ELA DESFAZ É O RAIO, e o defeito foi medido antes de escrita: o `main .elementor img { border-radius: 12px }` deste mesmo ficheiro é certo numa imagem de cartão e errado numa que encosta às bordas — os quatro cantos mordem o branco da página. Medido a 09/09 na `como-escolher` com estilos computados: caixa a `0..1440` (ou seja, a largura toda) e mesmo assim com ar de recuada. **O que parecia margem era raio.** ⛔ Não se tirou o raio GLOBAL: ele serve as 116 imagens de cartão e de coluna que já lá estão. Tira-se onde estorva, com a classe. 🔴🔴 O SELETOR REPETE O `main .elementor` DE PROPÓSITO, E ISSO NÃO É RUÍDO. A regra que ela desfaz é `main .elementor img` — uma classe e dois elementos. Um `.hip-banda img` sozinho é uma classe e um elemento, portanto PERDE, e o raio fica na mesma. Medido a 09/09: a classe estava no HTML (3 ocorrências), a regra estava no `post-6.css`, e os quatro cantos continuavam a `12px`. ▶ **É a segunda vez no mesmo dia que uma regra nova perde por especificidade** — a primeira foi o G1 com o `.e-con`. A marca no HTML prova que a classe chegou; quem prova que a regra ganhou é o estilo computado. */ main .elementor .hip-banda img { border-radius: 0; } /* ===== L1. A secção que acompanha o ecrã — 2026-09-09 =============== Escolha do Tiago entre quatro maquetas medidas: «o nosso maior problema é não ocupar maior parte da página». Medido a 09/09 na secção dos seis cartões da home, com a caixa de 1280px fixos que havia: ecrã 1440 → sobravam 80px de cada lado ecrã 1920 → sobravam 320px ecrã 2560 → sobravam 640px Com esta regra: 58px, 100px e 420px. ⛔ **1440px e 1600px fixos foram medidos e recusados.** Abrem no monitor, mas num portátil de 1440 deixam **20px de margem** — e aí as duas dão exactamente o mesmo, porque é o ecrã que manda e não o número. Um valor fixo não sabe em que ecrã está; o `min()` sabe. 🔴 O `boxed_width` do Elementor JÁ ESCREVE `max-width: 1720px` neste `.e-con-inner`, por uma regra `.elementor-element-` — uma classe, 0,1,0. Esta tem duas classes e um filho, portanto ganha sem `!important`. ▶ E se ela falhar, a secção fica nos 1720px fixos em vez de correr de borda a borda: o pixel é a rede, o `vw` é o ganho. */ .e-con.hip-largo > .e-con-inner { max-width: min(1720px, 92vw); } /* ===== G2. A foto que acompanha a altura do texto — 2026-09-09 ====== Numa secção de duas colunas, a coluna da fotografia estica até à altura da coluna do texto e a `` preenche-a com `object-fit: cover`. 🔴 É a terceira resposta ao branco, e serve o caso que as outras duas não servem: texto mais alto do que a foto **e** a secção a ocupar a largura toda. A grelha sozinha deixa branco por baixo da foto; o `hip-correr` mata esse branco mas obriga o bloco a ser estreito, porque o texto tem cap de 43em e num bloco de 1720px sobrava vazio à direita. ⛔ **Só entra em fotografias GERADAS**, e a guarda está no Python (`seccao_com_imagem(foto_a_acompanhar=True)` recusa um ficheiro que não comece por `hipno-ger-`). Um `cover` numa imagem do cliente corta-lhe as palavras — o cartaz do curso tem os cinco locais e o «Calendário 2026» escritos lá dentro, e é o caso medido que fixou a regra. ⚠️ O `align-self: stretch` é preciso NA COLUNA: sem ele, um filho de flex encolhe até ao conteúdo e a `` com `height: 100%` resolve contra uma caixa que tem exactamente a altura da imagem — ou seja, não estica nada e a regra parece não existir. 🔴🔴 O `max-block-size: 780px` E O `sticky` SÃO O QUE IMPEDE A FOTO DE VIRAR UMA TIRA, e os dois nasceram de uma medição, não de gosto. Com o `stretch` sozinho, a secção da «3a GERAÇÃO» — quatro sub-blocos de prosa — dava à foto **520 x 1662px**, um rácio de 1:3,2. Um `cover` nessa caixa deita fora 84% da largura da fotografia e o que sobra é uma fita vertical de que já não se percebe o assunto. ▶ Com o tecto de 780px a mesma foto sai a **520 x 780**, rácio 1:1,5 — um retrato normal. Medido a 09/09 nas três secções: 655px, 780px e 345px de altura, todas com o texto ao lado à mesma altura ou mais. ▶ E o `sticky` é o que evita que o tecto traga de volta o branco que esta classe existe para matar: em vez de a foto ficar parada no topo e deixar 880px de vazio por baixo, ela acompanha a leitura. ⚠️ O `top: 32px` é pequeno de propósito — o cabeçalho deste site é `position: static` (medido, 103px de altura), portanto não há barra fixa nenhuma por baixo da qual a foto se pudesse esconder. */ .e-con.hip-foto-alta { align-self: stretch; justify-content: stretch; } .e-con.hip-foto-alta > .elementor-widget-image, .e-con.hip-foto-alta > .e-con-inner > .elementor-widget-image { flex: 1 1 auto; display: flex; } .e-con.hip-foto-alta .elementor-widget-container { display: flex; flex: 1 1 auto; } .e-con.hip-foto-alta img { block-size: 100%; inline-size: 100%; object-fit: cover; max-block-size: 780px; position: sticky; top: 32px; } /* ===== G3. A foto que SEGUE o scroll, SEM recortar — 2026-09-09 ====== A irmã da G2 para fotografias DO CLIENTE. Pedido do Tiago a 09/09, sobre duas secções da `inicio`: «usar o mesmo efeito que temos em cima da foto aqui, a seguir o scroll para não parecer zona morta sem nada em branco». 🔴 A G2 faz DUAS coisas ao mesmo tempo e só uma delas é que era pedida. O `cover` recorta, e a guarda do `foto_a_acompanhar` recusa imagens do cliente por causa disso — não por causa do `sticky`. Medido o recorte que o `cover` da G2 faria nas duas fotos destas secções, numa caixa 738x780: `amor-0001` (800x800) perde 5,4% da largura `1139` (800x534) perde 36,8% da largura A segunda é mais de um terço de uma fotografia de uma aula. Por isso este grupo fica só com o `sticky`: a foto mantém tamanho e proporção. ⚠️ NÃO leva `align-self: stretch` nem `block-size`, ao contrário da G2 — é exactamente isso que a impede de esticar e portanto de recortar. O que dá altura à coluna é o TEXTO ao lado; a foto só deixa de ficar parada no topo dessa coluna. 📌 O `top: 32px` é o mesmo da G2, e pela mesma razão medida: o cabeçalho deste site é `position: static`, não há barra fixa que tape a foto. */ .e-con.hip-foto-segue > .elementor-widget-image, .e-con.hip-foto-segue > .e-con-inner > .elementor-widget-image { position: sticky; top: 32px; }/* End custom CSS */