:root{ /* ===== PALETA — A METADE QUENTE DO LOGÓTIPO ===== O wordmark atravessa de roxo a laranja. O site adopta só a metade direita dessa travessia: vermelho → laranja, o lado do "ENERGY". O roxo continua a existir, mas apenas dentro do logótipo: não se repete em nenhuma superfície da página. Isto é uma decisão, não um descuido. Um logótipo multicor não obriga o site a repetir todas as cores; obriga-o a não contradizer nenhuma. A metade quente cobre 51% do wordmark e é a que fala de movimento. */ --marca:#b9202b; /* principal — 6,06:1 sobre papel */ --marca-esc:#9e1c22; /* títulos, hover — 7,58:1 */ --marca-luz:#fdeeed; --vermelho:#b9202b; --laranja:#de4a30; /* acento */ --laranja-esc:#c33d26; /* acento sobre papel claro — 4,92:1 */ --laranja-cl:#e8613f; /* acento sobre fundo escuro — 4,91:1 */ --laranja-luz:#fbeeea; /* ===== OS DOIS DEGRADÊS ===== No wordmark a cor não é chapada: atravessa. Aqui atravessa também, mas em duas versões com papéis que NUNCA se trocam. --grad remata no laranja saturado #f26132, tal como o logótipo. SÓ em superfícies SEM texto por cima (filetes, indicadores, blocos decorativos). Texto branco sobre esse laranja dá 3,22:1 e chumba o AA — medido ponto a ponto. --grad-txt a mesma travessia, remata em #c33d26. Mínimo verificado ao longo de todo o percurso: 5,23:1 contra branco, AA em todo o comprimento. É este que vai para botões, selos e qualquer superfície que carregue texto. Um botão com --grad é um bug de acessibilidade, não uma escolha estética. */ --grad:linear-gradient(96deg,#b9202b 0%,#cf4224 55%,#f26132 100%); --grad-txt:linear-gradient(96deg,#b9202b 0%,#c33724 55%,#cd471f 100%); --grad-v:linear-gradient(168deg,#b9202b 0%,#cf4224 58%,#f26132 100%); /* neutros com sub-tom quente, para acompanharem a família da marca em vez de puxarem para o lilás */ --papel:#fbf9f8; --papel2:#f4efec; --papel3:#e8ddd8; --tinta:#241d1a; --tinta2:#574a45; --tinta3:#6e5f59; --linha:#e0d4ce; /* --tinta3 é a cor das etiquetas de secção ("A CLÍNICA", "OS ESPAÇOS"), a 13px. A #8a7a74 davam 3,60:1 sobre --papel2 e chumbavam o AA. A #6e5f59 dão 5,34:1 no pior fundo. */ /* Fundo escuro das secções de destaque, do rodapé e dos submenus. 17,21:1 contra branco. Era #241814 — quase-preto com sub-tom quente, croma 0,021 e matiz 39°. Fazia sentido enquanto todas as superfícies grandes eram neutras. Deixou de fazer no dia em que a faixa de chamada e o cabeçalho ganharam a travessia da marca: medido em OKLCH, o rodapé ficava a DEZ GRAUS de matiz da ponta quente do degradê (#e03022, 29,6°). Praticamente a mesma cor, só mais escura — e o rodapé, que é a âncora do site, passava a ler-se como o laranja da faixa apagado. Competia com ela e perdia. 🔄 Revisto duas vezes, 28 Jul. 1.ª volta: baixei o croma de 0,021 para 0,008 e dei o assunto por resolvido. Estava enganado — baixei a saturação e deixei o MATIZ onde estava, a 31°, ou seja a DOIS GRAUS da ponta quente da faixa. Tratei o sintoma; a causa ficou. O rodapé continuava a ser «o laranja da faixa, apagado», só que menos. 2.ª volta: o matiz passa para 313° — a ponta ROXA da travessia, a 76° da quente. Luminosidade e contraste praticamente intactos (L=0,231 e 17,02:1, contra 0,223 e 17,21:1). A travessia passa a fechar o círculo: começa no roxo lá em cima na barra, atravessa para o quente na faixa de chamada, e o chão do site devolve-a ao roxo. E o anti-reference? «Wellness spa lilás» é lavanda CLARO e desbotado. Isto tem croma 0,036 contra os 0,160 do roxo da marca: a esta luminosidade o matiz mal se lê. É um escuro com carácter, não um lilás. */ --escuro:#231829; /* confirmação. --turquesa era usado em dois sítios e nunca foi definido: o visto de "mensagem enviada" do formulário e o aviso de "copiado" do rodapé apareciam ambos na cor do texto que os rodeia, sem sinal de êxito. Duas variantes porque os dois sítios têm fundos opostos: --ok sobre papel claro (modal do formulário) — 4,99:1 --ok-luz sobre o rodapé escuro — 9,06:1 */ --ok:#0f7a6b; --ok-luz:#4fd6be; --tit:"Barlow Condensed","Arial Narrow",sans-serif; --txt:"Barlow",system-ui,-apple-system,sans-serif; --saida:cubic-bezier(.22,1,.36,1); --nav:66px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--txt); font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} h1,h2,h3{font-family:var(--tit);font-weight:700;line-height:.99;margin:0;letter-spacing:-.012em;text-wrap:balance} p{margin:0} /* --azul nunca existiu no :root. A declaração era inválida e o browser descartava-a inteira: o site ficava SEM indicador de foco visível, o que chumba a WCAG 2.4.7 e deixa quem navega por teclado sem saber onde está. Passa a usar o vermelho da marca, com um halo branco por baixo para o foco também se ver quando cai sobre fundo escuro. */ :focus-visible{outline:3px solid var(--marca);outline-offset:3px;border-radius:2px; box-shadow:0 0 0 6px rgba(251,249,250,.9)} .oe-wrap{max-width:1180px;margin:0 auto;width:100%} .oe-mt{margin-top:26px} /* ===== SALTAR PARA CONTEÚDO (a11y) ===== */ .oe-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--tinta);color:var(--papel); padding:12px 18px;font-family:var(--tit)} .oe-skip:focus{left:8px;top:8px} /* ===== CABEÇALHO ===== */ .oe-topo{position:fixed;inset:0 0 auto;z-index:60;height:var(--nav);display:flex;align-items:center; justify-content:space-between;padding:0 16px;transition:background .35s var(--saida),box-shadow .35s var(--saida)} .oe-topo.oe-solido{background:rgba(251,248,245,.96);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--linha)} /* Sobre a fotografia do hero o logótipo é branco; assim que o cabeçalho fica sólido passa ao logótipo A CORES, no MESMO tamanho — antes trocava para a versão a preto e encolhia de 46px para 38px ao mesmo tempo, o que fazia a marca perder presença exactamente no momento em que ganha fundo branco para a suportar. */ .oe-logo{height:46px;width:auto} .oe-logo--cores{display:none} .oe-topo.oe-solido .oe-logo--claro{display:none} .oe-topo.oe-solido .oe-logo--cores{display:block} .oe-topo__dir{display:flex;align-items:center;gap:8px} .oe-hamb{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px; background:none;border:0;cursor:pointer;padding:0} .oe-hamb span{display:block;width:22px;height:2px;background:var(--papel);margin-left:auto;margin-right:auto; transition:transform .3s var(--saida),opacity .2s,background .3s} .oe-hamb span:last-child{width:15px;margin-right:11px} .oe-topo.oe-solido .oe-hamb span{background:var(--tinta)} .oe-topo__cta{display:none!important} /* menu horizontal, sempre visível em ecrã grande */ .oe-menu{display:none} .oe-menu a{font-family:var(--tit);font-size:1.02rem;font-weight:600;letter-spacing:.09em; text-transform:uppercase;color:var(--papel);padding:8px 2px;position:relative;transition:color .25s var(--saida)} .oe-menu a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--laranja); transition:right .32s var(--saida)} .oe-menu a:hover::after,.oe-menu a:focus-visible::after{right:0} .oe-topo.oe-solido .oe-menu a{color:var(--tinta)} /* menu de ecrã inteiro */ .oe-nav{position:fixed;inset:0;z-index:80;background:var(--tinta);display:flex;flex-direction:column; justify-content:center;padding:76px 22px 32px;gap:0; clip-path:inset(0 0 100% 0);transition:clip-path .55s var(--saida);visibility:hidden} .oe-nav.oe-aberto{clip-path:inset(0 0 0 0);visibility:visible} .oe-nav a{font-family:var(--tit);font-size:clamp(2rem,10vw,3.4rem);color:var(--papel);text-transform:uppercase; padding:7px 0;border-bottom:1px solid rgba(251,248,245,.1); opacity:0;transform:translateY(16px);transition:opacity .5s var(--saida),transform .5s var(--saida),color .2s} .oe-nav.oe-aberto a{opacity:1;transform:none} .oe-nav.oe-aberto a:nth-child(1){transition-delay:.08s} .oe-nav.oe-aberto a:nth-child(2){transition-delay:.13s} .oe-nav.oe-aberto a:nth-child(3){transition-delay:.18s} .oe-nav.oe-aberto a:nth-child(4){transition-delay:.23s} .oe-nav.oe-aberto a:nth-child(5){transition-delay:.28s} .oe-nav.oe-aberto a:nth-child(6){transition-delay:.33s} .oe-nav a:hover,.oe-nav a:focus-visible{color:var(--laranja)} .oe-nav__x{position:absolute;top:12px;right:12px;width:44px;height:44px;background:none;border:0; color:var(--papel);font-size:32px;line-height:1;cursor:pointer} /* ===== BOTÕES ===== */ .oe-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:54px;padding:0 26px; background:var(--marca);color:#fff;font-family:var(--tit);font-size:1.15rem;font-weight:700; text-transform:uppercase;letter-spacing:.05em;border:2px solid var(--marca);border-radius:2px;cursor:pointer; transition:background .2s var(--saida),border-color .2s var(--saida),transform .15s var(--saida)} .oe-btn:hover{background:var(--marca-esc);border-color:var(--marca-esc)} .oe-btn:active{transform:scale(.97)} .oe-btn--linha{background:transparent;color:var(--papel);border-color:rgba(251,248,245,.45)} .oe-btn--linha:hover{background:rgba(251,248,245,.12);border-color:var(--papel)} /* ===== BOTÃO DE ARO ===== Acção secundária ao lado da principal. Em repouso é neutro — aro e texto brancos, sem fundo — para não disputar atenção com "marcar avaliação". A cor só aparece ao passar o rato, e é a mesma do botão principal: o segundo botão pede-se, não se anuncia. */ .oe-btn--aro{background:transparent;color:var(--papel); border:2px solid rgba(251,249,248,.85); transition:background .3s var(--saida),color .25s var(--saida),border-color .25s var(--saida)} .oe-btn--aro:hover,.oe-btn--aro:focus-visible{ background:var(--grad-txt);color:#fff;border-color:transparent} /* as duas acções do hero lado a lado; em ecrã estreito empilham e ocupam a largura toda, para continuarem a cumprir os 44px de área de toque */ .oe-hero__accoes{display:flex;flex-wrap:wrap;gap:12px;align-items:center; opacity:0;transform:translateY(14px);animation:oe-entra .8s var(--saida) .72s forwards} @media (max-width:460px){ .oe-hero__accoes{flex-direction:column;align-items:stretch} .oe-hero__accoes .oe-btn{width:100%} } /* ===== HERO ===== */ .oe-hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto; isolation:isolate;overflow:clip;background:var(--escuro)} .oe-hero__fotom{display:none} .oe-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% center} @keyframes oe-zoom{from{transform:scale(1.09)}to{transform:scale(1)}} /* véu do hero em telemóvel: sobe de baixo, porque em ecrã estreito o texto assenta no fundo. Levava castanho (134,56,18) — cor que não existe na marca e que dava à fotografia um tom sépia lavado. Passa a subir do escuro quente da marca, com a mesma família do vermelho. */ .oe-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(to top, rgba(36,24,20,.88) 0%, rgba(34,23,19,.86) 10%, rgba(32,22,19,.86) 26%, rgba(28,21,18,.66) 52%, rgba(26,20,18,.32) 72%, rgba(26,20,18,.08) 88%, transparent 100%)} .oe-hero__in{grid-row:1;align-self:end;padding:0 16px 30px;max-width:980px;position:relative;z-index:2} .oe-hero__marca{display:none;width:min(74%,420px);margin:0 0 22px; opacity:0;transform:translateY(18px);animation:oe-entra .9s var(--saida) .25s forwards} @keyframes oe-entra{to{opacity:1;transform:none}} .oe-hero h1{font-size:clamp(3.3rem,15vw,9rem);color:var(--papel);line-height:.9; opacity:0;transform:translateY(22px);animation:oe-entra 1s var(--saida) .4s forwards} .oe-hero h1 i{font-style:italic;color:var(--laranja)} /* o acento fica no título: é o remate */ /* ===== O REMATE DO HERO LEVA A TRAVESSIA ===== Pedido do cliente: a palavra final do título com o degradê do logótipo, só na zona final dele, sem chegar ao roxo. ⚠️ Degradê aplicado a texto é normalmente proibido: se o background-clip falhar, o texto fica com a cor do fundo e desaparece, e o contraste deixa de ser mensurável. Aqui vai com três protecções: 1. `color` sólido declarado ANTES e fora do @supports. Se o background-clip não pegar, o texto fica #e8613f — 3,28:1 sobre o fundo medido do hero, acima dos 3:1 que o AA pede a 74px. 2. O @supports só ativa onde o -webkit-background-clip existe mesmo. 3. Os dois extremos do degradê foram medidos contra o fundo REAL por baixo das letras (não estimado): #e8613f = 3,28:1 e #f9852f = 4,45:1. Nenhum ponto do percurso desce abaixo do mais escuro dos dois. Se a fotografia do hero mudar, voltar a medir. */ .oe-hero h1 i, .oe-slide__t i{color:#f26132} /* 3,45:1 sobre o fundo medido do hero */ @supports (-webkit-background-clip:text) or (background-clip:text){ .oe-hero h1 i, .oe-slide__t i{ /* Alargado em 28 Jul. Estava #f26132 → #fb9433: três laranjas, ou seja os últimos 5% da travessia — a olho não se lia como travessia nenhuma. Recua até #cd312e, que é onde a travessia PASSA a suportar texto sobre este fundo. Medido ponto a ponto sobre o fundo real do hero (#20160f): do roxo aos 76% da travessia nada chega a 3:1 — o roxo dá 1,99:1, o magenta 2,39:1, o vermelho da marca 2,88:1. Não é preferência, é luminância: a metade fria não pode ser texto sobre escuro. Extremos verificados: 3,44:1 e 7,93:1. */ background:linear-gradient(96deg,#cd312e 0%,#e34e31 42%,#f26132 74%,#fb9433 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; /* o fill transparente não se aplica a ::selection nem ao modo de alto contraste, onde o `color` acima volta a mandar */ padding-right:.06em} } @media (forced-colors:active){ .oe-hero h1 i, .oe-slide__t i{-webkit-text-fill-color:currentColor;background:none} } /* a palavra que muda: o texto do hero está vivo */ .oe-rot{position:relative;display:inline-grid;font-style:italic;color:var(--laranja);vertical-align:top} .oe-rot__f{visibility:hidden;grid-area:1/1;white-space:nowrap} /* reserva a largura da maior */ .oe-rot__p{grid-area:1/1;white-space:nowrap;opacity:0;transform:translateY(.36em) rotate(1.5deg); filter:blur(5px);transition:opacity .55s var(--saida),transform .55s var(--saida),filter .55s var(--saida)} .oe-rot__p.oe-on{opacity:1;transform:none;filter:none} .oe-rot__p.oe-sai{opacity:0;transform:translateY(-.34em) rotate(-1.5deg);filter:blur(5px)} @media (prefers-reduced-motion:reduce){ .oe-rot__p{transition:none} .oe-rot__p:not(.oe-on){display:none} } .oe-hero p{color:rgba(251,248,245,.86);font-size:clamp(1.05rem,4.4vw,1.42rem);max-width:32ch;margin:18px 0 28px; opacity:0;transform:translateY(16px);animation:oe-entra .9s var(--saida) .58s forwards} /* a entrada passou para .oe-hero__accoes, que envolve os dois botões */ .oe-hero__pe{grid-row:2;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px 16px; border-top:1px solid rgba(251,248,245,.16);font-family:var(--tit);font-size:.78rem;letter-spacing:.15em; text-transform:uppercase;color:rgba(251,248,245,.7)} .oe-seta{width:21px;animation:oe-desce 2.2s var(--saida) infinite} @keyframes oe-desce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}} /* ===== SECÇÕES ===== */ .oe-sec{padding:70px 16px;background:var(--papel);position:relative;z-index:1} .oe-sec--areia{background:var(--papel2)} .oe-eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--tit);font-size:.8rem; font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta3);margin-bottom:12px} .oe-eyebrow::before{content:"";width:2px;height:1em;background:var(--laranja);transform:skewX(-6deg)} /* os h2 são os maiores blocos de tinta da página: é aqui que a marca pinta. A preto (--tinta) o site ficava a 1,0% de cor de marca visível. #9e1c22 dá 7,58:1 sobre papel — acima do AA com folga. */ .oe-sec h2{font-size:clamp(2.05rem,8.5vw,3.5rem);color:var(--marca-esc)} /* ===== A TRAVESSIA LARGA VIVE AQUI ===== Sobre fundo escuro a amplitude é impossível: o vermelho do logótipo tem luminância baixa demais e não chega a 3:1 nem sobre preto puro. Logo, a travessia ampla do logótipo só cabe onde o fundo é claro — e é aqui, nos títulos de secção, que há área e tamanho para ela se ler como travessia. Leva o degradê COMPLETO do logótipo, roxo #662C90 incluído: um degradê vermelho→laranja lê-se como "quente", não como OSTEOENERGY — o que torna este wordmark reconhecível é precisamente o salto do roxo ao laranja. O roxo entra só aqui, dentro das letras. Superfícies (fundos, botões, rodapé) continuam sem uma gota dele. Verificado contra o fundo mais escuro (--papel2 #f4efec): mínimo 3,19:1, e os h2 são 33-56px, ou seja texto grande, onde o AA pede 3:1. Mesmas três protecções do hero: cor sólida fora do @supports, activação só onde o background-clip existe, e forced-colors devolve o currentColor. */ @supports (-webkit-background-clip:text) or (background-clip:text){ /* `.oe-perc` junta-se à excepção: é escura como a `.oe-dest`, e o degradê medido lá dá 1,90:1 no arranque do roxo. */ .oe-sec:not(.oe-dest):not(.oe-etapas) h2{ /* ATENÇÃO: a shorthand `background` REPÕE background-clip. Tem de vir sempre ANTES dele e na mesma regra, senão o texto fica transparente por cima do degradê e o título desaparece. */ /* Os stops estão comprimidos: a travessia completa-se aos 55% e o resto fica laranja constante. Um h2 de duas linhas tem o box à largura da frase inteira (478px) mas as linhas visíveis só ocupam ~310px, ou seja 65% — com o degradê esticado a 100% o título parava no vermelho e nunca chegava ao laranja. É o mesmo defeito do background-size:190% que havia nos botões, noutra roupagem. `box-decoration-break:clone` resolveria isto de forma exacta, mas exige display:inline no h2, o que desfaz o text-wrap:balance e piora a quebra. */ background:linear-gradient(96deg,#662c90 0%,#a71f54 24%,#b82025 37%,#e85530 55%,#e85530 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; width:fit-content; padding-right:.06em} } @media (forced-colors:active){ .oe-sec h2{-webkit-text-fill-color:currentColor;background:none} } /* excepto sobre fundo escuro, onde o vermelho não teria contraste */ .oe-dest h2,.oe-sec--escura h2{color:var(--papel)} /* itálico dos títulos: continua a ser o remate laranja, mas no tom que se lê. #de4a30 sobre papel dá 3,85:1 e chumbava o AA; #c33d26 dá 4,92:1. */ .oe-sec h2 i,.oe-int h1 i{font-style:italic;color:var(--laranja-esc)} .oe-dest h2 i,.oe-int--foto h1 i{color:var(--laranja)} .oe-lead{color:var(--tinta2);max-width:56ch;margin-top:14px} .oe-cab{margin-bottom:30px} /* revelação */ .oe-rev{opacity:0;transform:translateY(24px);transition:opacity .75s var(--saida),transform .75s var(--saida)} .oe-rev.oe-in{opacity:1;transform:none} /* ===== UNIDADES ===== */ .oe-unid{position:relative;display:block;border-top:1px solid var(--linha);padding:24px 34px 24px 0; transition:padding-left .35s var(--saida)} .oe-unids .oe-unid:last-child{border-bottom:1px solid var(--linha)} .oe-unid:hover{padding-left:10px} .oe-unid__n{display:block;font-family:var(--tit);font-size:.76rem;letter-spacing:.2em;color:var(--tinta3)} .oe-unid__t{display:block;font-family:var(--tit);font-size:clamp(1.75rem,7vw,2.8rem);font-weight:700; line-height:1.02;margin:3px 0 5px;transition:color .25s var(--saida)} .oe-unid:hover .oe-unid__t{color:var(--marca)} .oe-unid__d{display:block;color:var(--tinta2);font-size:.97rem;max-width:46ch} .oe-unid__s{position:absolute;right:0;top:50%;transform:translateY(-50%);width:26px;color:var(--tinta3); transition:transform .3s var(--saida),color .3s} .oe-unid:hover .oe-unid__s{transform:translate(6px,-50%);color:var(--marca)} .oe-selo{display:inline-block;margin-left:9px;background:var(--vermelho);color:#fff;font-family:var(--txt); font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px; border-radius:2px;vertical-align:middle} /* ===== ESPECIALIDADES ===== */ /* Substituída pela grelha `.oe-espg` a 29 Jul. Fica porque o bloco continua a aceitar listas sem descrição, e aí esta apresentação serve. */ .oe-esp{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--linha); display:flex;flex-wrap:wrap} .oe-esp li{width:100%;border-bottom:1px solid var(--linha);padding:15px 0;display:flex; justify-content:space-between;align-items:baseline;gap:14px;transition:padding-left .3s var(--saida),color .3s} .oe-esp li:hover{padding-left:9px;color:var(--marca)} .oe-esp li span{font-family:var(--tit);font-size:1.45rem;font-weight:600} .oe-esp li b{font-family:var(--txt);font-size:.78rem;font-weight:400;color:var(--tinta3);white-space:nowrap} /* ===== ESPECIALIDADES EM CARTÕES ===== Era uma tabela de duas colunas com o local repetido em cada linha. O local subiu para uma indicação única e cada especialidade ganhou uma frase. A grelha tem SEIS colunas para conseguir duas larguras na mesma malha: os destaques ocupam metade (span 3), os restantes um terço (span 2). Numa grelha de três, os dois destaques deixavam sempre um cartão órfão. */ .oe-espn{font-family:var(--txt);font-size:.83rem;letter-spacing:.03em; color:var(--tinta3);margin:44px 0 16px;padding-bottom:14px; border-bottom:1px solid var(--linha)} .oe-espg{list-style:none;margin:0;padding:0;display:grid;gap:11px; grid-template-columns:1fr} .oe-espg li{display:flex} .oe-espg a,.oe-espg li > div{display:flex;flex-direction:column;gap:8px;width:100%; padding:21px 20px 19px;border:1px solid var(--linha);border-radius:3px; background:var(--papel);color:inherit;text-decoration:none; transition:border-color .32s var(--saida),transform .32s var(--saida), box-shadow .32s var(--saida)} .oe-espg a:hover,.oe-espg a:focus-visible{border-color:var(--marca); transform:translateY(-3px);box-shadow:0 10px 26px -18px rgba(36,29,26,.5)} .oe-espg h3{font-family:var(--tit);font-size:1.32rem;font-weight:600; line-height:1.12;margin:0;color:var(--marca-esc)} .oe-espg p{font-size:.93rem;line-height:1.56;color:var(--tinta2);margin:0} .oe-espg__mais{margin-top:auto;padding-top:12px;font-family:var(--tit); font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--marca)} .oe-espg__mais::after{content:" →"} /* Só para leitores de ecrã. Não existia no tema; `display:none` não servia, porque tira o texto também da árvore de acessibilidade. */ .oe-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Os dois em destaque: fundo cheio e título maior, sem sair da paleta. */ .oe-espg--d a{background:var(--papel2);border-color:transparent} .oe-espg--d h3{font-size:1.72rem} .oe-espg--d p{font-size:1rem} /* `hover:hover` e não largura: num telemóvel não há passagem do rato, e esconder ali o «Saber mais» deixava o cartão sem dizer que era clicável. */ @media (hover:hover){ .oe-espg__mais{opacity:0;transform:translateY(5px); transition:opacity .3s var(--saida),transform .3s var(--saida)} .oe-espg a:hover .oe-espg__mais, .oe-espg a:focus-visible .oe-espg__mais{opacity:1;transform:none} } @media (prefers-reduced-motion:reduce){ .oe-espg a,.oe-espg__mais{transition:none} .oe-espg a:hover,.oe-espg a:focus-visible{transform:none} } .oe-espb{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} @media (max-width:460px){ .oe-espb{flex-direction:column} .oe-espb .oe-btn{width:100%} } @media (min-width:600px){ .oe-espg{grid-template-columns:repeat(2,1fr)} .oe-espg li.oe-espg--d{grid-column:span 2} } @media (min-width:960px){ .oe-espg{grid-template-columns:repeat(6,1fr);gap:13px} .oe-espg li{grid-column:span 2} /* `li.oe-espg--d` e não só `.oe-espg--d`: a regra de cima tem dois selectores e ganhava — os oito cartões saíam todos da mesma largura. */ .oe-espg li.oe-espg--d{grid-column:span 3} } /* Três portas em vez de duas: com o telefone ao lado, a linha deixou de caber em ecrãs médios. Passam a poder envolver, e o telefone quebra para a sua própria linha em vez de espremer os botões. */ .oe-cta-faixa__b{flex-wrap:wrap} .oe-cta-faixa__tel{flex-basis:100%;gap:9px} .oe-cta-faixa__tel svg{width:19px;height:19px;flex:0 0 auto} /* Um dos dois de cada vez, mas ambos sempre no HTML: quem ouve a página ouve «Ligar 924 358 082» em qualquer ecrã. */ .oe-tel__num{display:none} @media (min-width:1180px){ .oe-cta-faixa__tel{flex-basis:auto} .oe-tel__accao{display:none} .oe-tel__num{display:inline} } /* Dois botões lado a lado na chamada; em ecrã estreito empilham e ocupam a largura toda, para manterem a área de toque. */ .oe-chamada__b{display:flex;flex-wrap:wrap;gap:12px;align-items:center} @media (max-width:460px){ .oe-chamada__b{flex-direction:column;align-items:stretch} .oe-chamada__b .oe-btn{width:100%} } /* O pé da secção escura: botão à esquerda, logótipo à direita. Em ecrã estreito o logótipo passa para baixo em vez de encolher o botão. */ .oe-dest__pe{display:flex;flex-wrap:wrap;align-items:center;gap:20px 26px} .oe-dest__selo{display:inline-flex;align-items:center;opacity:.62} .oe-dest__logo{height:30px;width:auto;display:block} @media (min-width:820px){ .oe-dest__pe{justify-content:space-between} .oe-dest__logo{height:34px} } /* ===== CARTÃO DE EQUIPA ===== Cheguei a pôr aqui o efeito dos packs da loja Toirito — o cartão a inclinar-se a seguir o rato, com brilho a acompanhar. Saiu: mesmo a 6 graus, um retrato que se vira lê-se como cromo colecionável, e esta página é para dar confiança. Fica o que responde sem chamar atenção para si: a fotografia aproxima-se devagar, o cartão levanta, e o filete da travessia desenha-se por baixo. Em repouso não há nada. */ .oe-membro__n{margin:0} .oe-membro__c{margin:6px 0 0} .oe-membro__brilho{display:none} @media (min-width:820px) and (hover:hover){ .oe-membro__retrato{position:relative;border-radius:3px; transition:transform .45s var(--saida),box-shadow .45s var(--saida)} .oe-membro__img{transition:transform 1.1s var(--saida)} .oe-membro:hover .oe-membro__img{transform:scale(1.05)} .oe-membro:hover .oe-membro__retrato{transform:translateY(-4px); box-shadow:0 18px 40px -22px rgba(35,24,41,.55)} /* O filete da marca: o mesmo degradê dos títulos, desenhado da esquerda. */ .oe-membro__retrato:not(.oe-membro__retrato--sem)::before{ content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2; background:var(--grad-txt);transform:scaleX(0);transform-origin:left; transition:transform .55s var(--saida)} .oe-membro:hover .oe-membro__retrato::before{transform:scaleX(1)} .oe-membro__n{transition:color .35s var(--saida)} .oe-membro:hover .oe-membro__n{color:var(--marca-esc)} } @media (prefers-reduced-motion:reduce){ .oe-membro__retrato,.oe-membro__img,.oe-membro__retrato::before{transition:none} .oe-membro:hover .oe-membro__retrato,.oe-membro:hover .oe-membro__img{transform:none} } /* Retrato em falta: as iniciais no lugar da fotografia. A cor é a da marca a baixa opacidade sobre o cinzento que o retrato já usava — assinala a ausência sem gritar, e sai sozinho assim que a fotografia entrar. */ .oe-membro__retrato--sem{display:grid;place-items:center; background:linear-gradient(150deg,var(--papel2),var(--papel3))} .oe-membro__marca{display:grid;place-items:center;width:100%;padding:0 18%} .oe-membro__logo{width:100%;height:auto;display:block;opacity:.22} /* ===== ITENS DA GRELHA COM FOTOGRAFIA ===== A área de imagem só existe em `.oe-item--foto`. Um cartão sem fotografia numa grelha onde os outros têm fica sem essa área e o texto sobe — melhor do que um rectângulo cinzento à espera de uma imagem que talvez não venha. `oe-item__txt` existe para o padding poder ser do texto e não do cartão: com a fotografia colada às margens, o padding tinha de sair de cima. */ .oe-item--foto{padding:0!important;display:flex;flex-direction:column} /* 16:7 e não 16:10. Medido: a 16:10 a fotografia ocupava 73-78% da altura do cartão e o nome da especialidade — a informação — ficava espremido em baixo. A 16:7 desce para cerca de 55% e a página encurta ~2000px. */ .oe-item__cx{display:block;overflow:hidden;background:var(--papel3); aspect-ratio:16/7} /* Excepção: onde a fotografia É o conteúdo e o texto é legenda. */ #espaco .oe-item__cx{aspect-ratio:16/10} .oe-item__img{width:100%;height:100%;object-fit:cover;display:block; transition:transform 1.1s var(--saida)} a.oe-item--foto:hover .oe-item__img, a.oe-item--foto:focus-visible .oe-item__img{transform:scale(1.04)} .oe-item--foto .oe-item__txt{display:block;padding:20px 22px 22px;flex:1} .oe-item--foto .oe-item__n{margin-bottom:5px} @media (prefers-reduced-motion:reduce){ .oe-item__img{transition:none} a.oe-item--foto:hover .oe-item__img{transform:none} } /* ===== GRELHAS AGRUPADAS ===== Uma grelha sem

é a continuação da anterior, não uma secção nova: só a primeira de um grupo leva título, as outras trazem o sobretítulo com o nome da área. Sem isto ficavam 224px de vazio entre subgrupos e as quatro áreas liam-se como quatro secções sem relação. */ .oe-sec:has(.oe-grelha):not(:has(h2)){padding-top:0} .oe-sec:has(.oe-grelha):not(:has(h2)) .oe-cab{margin-bottom:14px} .oe-sec:has(.oe-grelha):not(:has(h2)) + .oe-sec:has(.oe-grelha):not(:has(h2)){padding-top:0} /* O sobretítulo passa a fazer de título do subgrupo: ganha peso e ar. */ .oe-sec:has(.oe-grelha):not(:has(h2)) .oe-eyebrow{font-size:.86rem;margin-bottom:0} /* ===== TESTEMUNHOS ===== Citações de comprimentos muito diferentes — de seis palavras a quatro linhas. Em colunas de igual altura, as curtas ficavam com metade do cartão vazio. `masonry` não é seguro ainda; colunas CSS resolvem: cada citação ocupa o que precisa e o texto flui. As aspas são decorativas e ficam no `::before`, fora do texto — quem ouve a página não precisa de ouvir «aspas» antes de cada uma. */ .oe-test__l{margin-top:36px;columns:1;column-gap:26px} .oe-test__c{break-inside:avoid;margin:0 0 26px;padding:26px 24px 22px; background:var(--papel);border:1px solid var(--linha);border-radius:3px; position:relative;transition-delay:calc(var(--i) * 70ms)} .oe-sec--areia .oe-test__c{background:var(--papel)} .oe-test__c::before{content:"“";position:absolute;top:2px;left:18px; font-family:var(--tit);font-size:3.4rem;line-height:1;color:var(--marca);opacity:.22} .oe-test__c blockquote{margin:0} .oe-test__c blockquote p{margin:0;color:var(--tinta);font-size:1.02rem;line-height:1.6} .oe-test__c figcaption{margin-top:15px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px} .oe-test__n{font-family:var(--tit);font-weight:600;font-size:.98rem;color:var(--tinta)} .oe-test__f{font-size:.8rem;color:var(--tinta3);letter-spacing:.04em} .oe-test__nota{margin-top:6px;font-size:.9rem;color:var(--tinta3)} .oe-test__nota a{color:var(--marca);text-underline-offset:3px} @media (min-width:660px){ .oe-test__l{columns:2} } @media (min-width:1060px){ .oe-test__l{columns:3;column-gap:24px} } @media (prefers-reduced-motion:reduce){ .oe-test__c{transition-delay:0s} } /* ===== HORÁRIOS: OS DOIS MODOS DE CONSULTA ===== Os filtros respondem a «quando é o Pilates?»; o mapa responde a «o que há na terça de manhã?». São perguntas diferentes e por isso convivem. Tabela a sério e não grelha de divs: numa tabela o leitor de ecrã anuncia «terça-feira, 09:30, Pilates Clínico»; numa grelha de divs a relação entre a aula e o dia perde-se. Rola na horizontal dentro da caixa — seis dias não cabem em 390px, e a alternativa era encolher o texto até não se ler. */ .oe-hor__modos{display:flex;gap:8px;margin-bottom:18px} .oe-hor__modo{font-family:var(--tit);font-size:.82rem;letter-spacing:.1em; text-transform:uppercase;padding:11px 16px;min-height:44px;cursor:pointer; background:none;border:1px solid var(--linha);border-radius:2px; color:var(--tinta2);transition:all .3s var(--saida)} .oe-hor__modo:hover{border-color:var(--marca);color:var(--marca)} .oe-hor__modo.oe-on{background:var(--marca);border-color:var(--marca);color:#fff} .oe-hor__modo:focus-visible{outline:2px solid var(--marca);outline-offset:2px} .oe-hor__mapa-u + .oe-hor__mapa-u{margin-top:34px} .oe-hor__mapa-t{font-family:var(--tit);font-size:1.15rem;font-weight:600; margin:0 0 12px;color:var(--marca-esc)} .oe-hor__mapa-cx{overflow-x:auto;-webkit-overflow-scrolling:touch; border:1px solid var(--linha);border-radius:3px;background:var(--papel)} .oe-sec--areia .oe-hor__mapa-cx{background:var(--papel)} .oe-hor__tab{width:100%;border-collapse:collapse;min-width:760px} .oe-hor__tab th{font-family:var(--tit);font-size:.78rem;letter-spacing:.12em; text-transform:uppercase;color:var(--tinta3);font-weight:600; padding:13px 12px;text-align:left;border-bottom:1px solid var(--linha); background:var(--papel2);white-space:nowrap} .oe-hor__tab td{vertical-align:top;padding:12px;width:16.66%; border-left:1px solid var(--linha)} .oe-hor__tab td:first-child{border-left:0} .oe-hor__tab-aula{display:block;padding:7px 0;line-height:1.35} .oe-hor__tab-aula + .oe-hor__tab-aula{border-top:1px solid var(--linha)} .oe-hor__tab-aula b{display:block;font-family:var(--tit);font-size:.95rem; color:var(--marca);font-variant-numeric:tabular-nums} .oe-hor__tab-aula a{color:var(--tinta);text-decoration:none;font-size:.94rem} .oe-hor__tab-aula a:hover{color:var(--marca);text-decoration:underline} .oe-hor__tab-aula i{display:block;font-style:normal;font-size:.78rem;color:var(--tinta3)} .oe-hor__tab-vazio{color:var(--linha)} /* ===== PERGUNTAS FREQUENTES ===== Mesmo desenho do FAQ que já existia nas fichas de modalidade, agora fora dele. `
` nativo: abre sem script, responde ao teclado sem nada escrito por nós, e continua a abrir se o JavaScript falhar. */ .oe-faq__l{margin-top:32px;max-width:76ch} .oe-faq__q{border-bottom:1px solid var(--linha)} .oe-faq__q:first-of-type{border-top:1px solid var(--linha)} .oe-faq__q > summary{display:flex;align-items:center;gap:14px;padding:17px 2px; cursor:pointer;list-style:none;font-weight:500;font-size:1.04rem; transition:color .3s var(--saida)} .oe-faq__q > summary::-webkit-details-marker{display:none} .oe-faq__q > summary:hover{color:var(--marca)} .oe-faq__q > summary:focus-visible{outline:2px solid var(--marca);outline-offset:3px} .oe-faq__q > summary span{flex:1} .oe-faq__seta{width:21px;flex:0 0 auto;color:var(--marca); transition:transform .3s var(--saida)} .oe-faq__q[open] > summary .oe-faq__seta{transform:rotate(180deg)} .oe-faq__q p{padding:0 2px 21px;color:var(--tinta2);max-width:68ch;margin:0;line-height:1.6} @media (prefers-reduced-motion:reduce){ .oe-faq__seta{transition:none} } /* ===== PORQUÊ A OSTEOENERGY ===== Seis afirmações curtas. Sem cartões: cada uma é uma linha de texto com um visto à frente, e um cartão à volta de cinco palavras só acrescentava moldura. O que as agrupa é o alinhamento e o espaço. `align-items:start` e não `center`: as razões têm comprimentos diferentes e as que passam a duas linhas fariam o visto flutuar a meio. */ .oe-razoes__l{list-style:none;margin:34px 0 0;padding:0; display:grid;gap:18px 30px;grid-template-columns:1fr} .oe-razoes__l li{display:flex;align-items:start;gap:13px; font-size:1.04rem;line-height:1.45;color:var(--tinta)} .oe-razoes__v{flex:0 0 auto;width:21px;height:21px;margin-top:.1em;color:var(--marca)} @media (min-width:640px){ .oe-razoes__l{grid-template-columns:repeat(2,1fr);gap:20px 40px;margin-top:40px} } @media (min-width:1040px){ .oe-razoes__l{grid-template-columns:repeat(3,1fr)} } /* ===== AS ETAPAS DO ACOMPANHAMENTO ===== Prefixo `oe-etapas` e não `oe-perc`: esse é da linha do tempo, mais abaixo neste ficheiro, e as regras dela ganhavam por virem depois — o percurso da homepage saía com quatro colunas em vez de cinco, e a página da história ficava com fundo escuro. Duas coisas partidas pelo mesmo nome. No telemóvel os passos ficam ao centro e cada um traz o seu troço de fio, que cresce com ele. Uma linha contínua ao centro passaria por trás do texto. A partir dos 900px os passos alinham-se e o fio passa a ser um só, horizontal. */ .oe-etapas{background:var(--escuro);color:var(--papel);position:relative;overflow:clip} .oe-etapas .oe-wrap{position:relative;z-index:1} .oe-etapas .oe-eyebrow{color:rgba(251,248,245,.62)} .oe-etapas .oe-eyebrow::before{background:var(--laranja-cl)} .oe-etapas h2{color:var(--papel);max-width:20ch} /* A travessia reaproveitada do hero — a única já medida contra fundo escuro. Cor sólida primeiro, para quem não tem background-clip; e em alto contraste o `currentColor` volta a mandar. */ .oe-etapas h2 i{font-style:italic;color:#f26132; /* caixa só: não deixa o «o» ficar pendurado no fim da linha de cima */ display:inline-block;max-width:100%} @supports (-webkit-background-clip:text) or (background-clip:text){ .oe-etapas h2 i{ background:linear-gradient(96deg,#cd312e 0%,#e34e31 42%,#f26132 74%,#fb9433 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; padding-right:.06em} } @media (forced-colors:active){ .oe-etapas h2 i{-webkit-text-fill-color:currentColor;background:none} } .oe-etapas .oe-lead{color:rgba(251,248,245,.80);max-width:56ch} /* A fotografia por baixo. A camada escura por cima não é decoração: sem ela o texto branco perdia contraste em cima das zonas claras da fotografia. */ .oe-etapas__fundo{position:absolute;inset:0;z-index:0} .oe-etapas__img{width:100%;height:100%;object-fit:cover;display:block; opacity:.14;filter:grayscale(.35)} .oe-etapas__fundo::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(35,24,41,.62) 0%,rgba(35,24,41,.80) 100%)} .oe-etapas__l{list-style:none;margin:46px 0 0;padding:0;position:relative; display:grid;gap:30px;grid-template-columns:1fr;justify-items:center;text-align:center} .oe-etapas__p{position:relative;padding-top:32px; opacity:0;transform:translateY(22px); transition:opacity .9s var(--saida),transform .9s var(--saida); transition-delay:calc(var(--i) * 280ms + 300ms)} .oe-etapas.oe-vista .oe-etapas__p{opacity:1;transform:none} /* O troço de fio que liga ao passo anterior, no vão entre os dois. */ .oe-etapas__p::after{content:"";position:absolute;left:50%;top:-30px;width:2px;height:30px; background:var(--laranja-cl);opacity:.55; transform:translateX(-50%) scaleY(0);transform-origin:top; transition:transform .7s var(--saida); transition-delay:calc(var(--i) * 280ms + 120ms)} .oe-etapas__p:first-child::after{content:none} .oe-etapas.oe-vista .oe-etapas__p::after{transform:translateX(-50%) scaleY(1)} .oe-etapas__pt{position:absolute;left:50%;margin-left:-8px;top:0; width:15px;height:15px;border-radius:50%; background:var(--escuro);border:2px solid var(--laranja-cl); box-shadow:0 0 0 0 rgba(232,97,63,.34); transition:box-shadow .7s var(--saida); transition-delay:calc(var(--i) * 280ms + 700ms)} .oe-etapas.oe-vista .oe-etapas__p .oe-etapas__pt{box-shadow:0 0 0 6px rgba(232,97,63,.16)} .oe-etapas__n{display:block;font-family:var(--tit);font-size:.74rem;letter-spacing:.2em; /* #EE7448 e não `--laranja-cl`: com a fotografia por baixo o ponto mais claro do fundo sobe a #2E2434, e aí o laranja normal dá 4,38:1 — falha os 4,5 por pouco. Este dá 5,10:1 no pior ponto. */ color:#EE7448;margin-bottom:3px} .oe-etapas h3{font-family:var(--tit);font-size:clamp(1.3rem,4.6vw,1.62rem);font-weight:600; line-height:1.15;margin:0;color:var(--papel);max-width:22ch} .oe-etapas__p p{color:rgba(251,248,245,.72);font-size:.95rem;line-height:1.55;margin:7px 0 0; max-width:30ch} .oe-etapas__b{margin-top:44px} @media (min-width:900px){ .oe-etapas__l{grid-template-columns:repeat(5,1fr);gap:20px;margin-top:54px; justify-items:start;text-align:left} /* Em linha, o fio é um só e nasce ao nível dos pontos. Os troços por passo desligam-se: aqui a continuidade lê-se melhor do que a cadência. */ .oe-etapas__p::after{content:none} .oe-etapas__l::before{content:"";position:absolute;left:10px;right:10px;top:7px;height:2px; background:linear-gradient(90deg,var(--laranja-cl),rgba(232,97,63,.15)); transform:scaleX(0);transform-origin:left; transition:transform 2.6s var(--saida) .1s} .oe-etapas.oe-vista .oe-etapas__l::before{transform:scaleX(1)} .oe-etapas__p{padding:32px 14px 0 0} .oe-etapas__pt{left:0;margin-left:0;top:0} } /* Quem desliga o movimento vê a secção inteira, parada. O rodapé nem chega a observá-la: põe `.oe-vista` de uma vez e não a tira mais. */ @media (prefers-reduced-motion:reduce){ .oe-etapas__l::before,.oe-etapas__p::after{transition:none;transform:none} .oe-etapas__p{transition:none;transition-delay:0s;opacity:1;transform:none} .oe-etapas__pt{transition:none} } /* ===== DESTAQUE ESCURO ===== */ .oe-dest{background:var(--escuro);color:var(--papel);overflow:clip} .oe-dest__img{width:100%;height:58vw;max-height:440px;object-fit:cover} .oe-dest__txt{padding:42px 16px 70px} .oe-dest .oe-eyebrow{color:rgba(251,248,245,.6)} .oe-dest h2{color:var(--papel)} .oe-dest .oe-lead{color:rgba(251,248,245,.78)} .oe-gigante{font-family:var(--tit);font-style:italic;font-weight:700;font-size:clamp(3.4rem,16vw,8rem); color:var(--laranja);opacity:.22;line-height:.92;margin:.18em 0 .22em;white-space:nowrap; user-select:none;letter-spacing:-.02em} /* ===== MODAL + FORMULÁRIO ===== */ .oe-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:end center; background:rgba(18,14,11,.6);backdrop-filter:blur(3px);opacity:0;visibility:hidden; transition:opacity .3s var(--saida),visibility .3s} .oe-modal.oe-on{opacity:1;visibility:visible} .oe-modal__cx{background:var(--papel);width:100%;max-width:560px;max-height:92svh;overflow-y:auto; padding:26px 18px 30px;border-radius:14px 14px 0 0; transform:translateY(24px);transition:transform .4s var(--saida)} .oe-modal.oe-on .oe-modal__cx{transform:none} .oe-modal__x{position:absolute;top:14px;right:14px;width:44px;height:44px;background:var(--papel); border:1px solid var(--linha);border-radius:50%;font-size:22px;line-height:1;cursor:pointer;color:var(--tinta)} .oe-modal__logo{height:30px;width:auto;margin:0 0 18px} .oe-modal h2{font-size:1.9rem;margin-bottom:6px} .oe-modal .oe-lead{font-size:.96rem;margin-bottom:20px} .oe-campo{margin-bottom:15px} .oe-campo label{display:block;font-family:var(--tit);font-size:.86rem;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--tinta2);margin-bottom:5px} .oe-campo input,.oe-campo select,.oe-campo textarea{width:100%;min-height:52px;padding:13px 15px; background:#fff;border:1px solid var(--linha);border-radius:3px;font-family:var(--txt);font-size:1.02rem; color:var(--tinta);transition:border-color .2s var(--saida),box-shadow .2s var(--saida)} .oe-campo textarea{min-height:104px;resize:vertical} .oe-campo input:focus,.oe-campo select:focus,.oe-campo textarea:focus{outline:0;border-color:var(--laranja); box-shadow:0 0 0 3px var(--laranja-luz)} .oe-campo input:user-invalid{border-color:#d13b3b} .oe-erro{color:#c23434;font-size:.86rem;margin-top:5px;display:none} .oe-campo.oe-mal .oe-erro{display:block} .oe-hp{position:absolute;left:-9999px} /* armadilha anti-robô */ .oe-form__btn{width:100%;margin-top:6px} .oe-form__nota{font-size:.8rem;color:var(--tinta3);margin-top:12px;line-height:1.45} .oe-ok{text-align:center;padding:26px 0} .oe-ok svg{width:52px;color:var(--ok);margin:0 auto 14px} /* ===== RODAPÉ ===== */ .oe-rodape{background:var(--escuro);color:var(--papel);padding:0} /* faixa de acção antes do rodapé */ .oe-cta-faixa{border-bottom:1px solid rgba(251,248,245,.12);padding:52px 16px} .oe-cta-faixa .oe-wrap{display:grid;gap:22px} .oe-cta-faixa h2{font-size:clamp(1.9rem,7vw,2.9rem);color:var(--papel);max-width:18ch} .oe-cta-faixa p{color:rgba(251,248,245,.68);max-width:44ch;margin-top:10px} .oe-rodape__miolo{padding:52px 16px 0} .oe-rodape__logo{height:30px!important;width:auto!important;max-width:230px;object-fit:contain; opacity:.96;margin:0 0 34px} .oe-rodape__grelha{display:grid;gap:30px} .oe-fb h3{font-family:var(--tit);font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:rgba(251,248,245,.42);margin:0 0 12px;padding-bottom:10px; border-bottom:1px solid rgba(251,248,245,.12)} .oe-fb p{color:rgba(251,248,245,.74);font-size:.95rem;margin:3px 0;line-height:1.5} .oe-fb a{transition:color .2s var(--saida)} .oe-fb a:hover{color:var(--laranja)} .oe-social{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0} .oe-social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%; border:1px solid rgba(251,248,245,.2);color:rgba(251,248,245,.82); transition:background .25s var(--saida),border-color .25s var(--saida),color .25s,transform .25s var(--saida)} .oe-social a:hover{background:var(--marca);border-color:var(--marca);color:#fff;transform:translateY(-2px)} .oe-social svg{width:19px;height:19px} .oe-partilha{border-top:1px solid rgba(251,248,245,.12);margin-top:44px;padding:22px 0; display:flex;flex-wrap:wrap;align-items:center;gap:12px} .oe-partilha__t{font-family:var(--tit);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase; color:rgba(251,248,245,.42)} .oe-partilha__b{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .oe-partilha button,.oe-partilha a.oe-pt{display:inline-flex;align-items:center;gap:.5rem; min-height:40px;padding:0 14px;background:transparent;color:rgba(251,248,245,.78); border:1px solid rgba(251,248,245,.18);border-radius:3px;cursor:pointer; font-family:var(--txt);font-size:.86rem; transition:background .22s var(--saida),border-color .22s var(--saida),color .22s} .oe-partilha button:hover,.oe-partilha a.oe-pt:hover{background:rgba(251,248,245,.09); border-color:rgba(251,248,245,.4);color:var(--papel)} .oe-partilha svg{width:15px;height:15px} .oe-copiado{color:var(--ok-luz);font-size:.84rem;opacity:0;transition:opacity .25s} .oe-copiado.oe-on{opacity:1} .oe-fim{border-top:1px solid rgba(251,248,245,.12);padding:18px 0 26px; color:rgba(251,248,245,.42);font-size:.79rem;display:flex;flex-wrap:wrap;gap:10px; justify-content:space-between} .oe-fim a:hover{color:var(--laranja)} @media (min-width:820px){ .oe-cta-faixa{padding:66px 38px} .oe-cta-faixa .oe-wrap{grid-template-columns:1.4fr auto;align-items:center;gap:40px} .oe-rodape__miolo{padding:66px 38px 0} .oe-rodape__logo{height:36px!important;margin-bottom:44px} .oe-rodape__grelha{grid-template-columns:1.15fr 1fr 1fr 1fr;gap:38px} .oe-partilha{justify-content:space-between;margin-top:56px} } /* ===== CARROSSEL DO HERO (reposto) ===== */ .oe-hero__fundos{position:absolute;inset:0;z-index:-2;overflow:clip} .oe-hero__fundos .oe-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transform:scale(1.06);transition:opacity 1.1s var(--saida),transform 7s linear} .oe-hero__fundos .oe-hero__img.oe-on{opacity:1;transform:scale(1)} .oe-hero__slides{position:relative;display:grid} .oe-slide{grid-area:1/1;opacity:0;transform:translateY(16px);pointer-events:none; transition:opacity .62s var(--saida),transform .62s var(--saida)} .oe-slide.oe-on{opacity:1;transform:none;pointer-events:auto} .oe-slide__e{color:rgba(251,248,245,.72)!important;margin-bottom:10px} .oe-slide__e::before{background:var(--laranja)} /* `balance` nos dois: o h1 já o tinha, mas os slides 2 a 5 não são h1 (só pode haver um por página) e partiam-se onde calhava — «Uma abordagem / global à / sua saúde.» deixava o «à» sozinho no fim. */ .oe-hero h1, .oe-slide__t{text-wrap:balance} .oe-hero h1{max-width:15ch} /* a margem passou para .oe-hero__accoes: aqui, no filho de um flex com align-items:center, o margin-top empurrava só o botão principal e deixava os dois desalinhados em 13px (metade da margem) */ .oe-hero__accoes{margin-top:26px} .oe-pontos{display:flex;gap:9px;margin-top:26px} .oe-ponto{width:34px;height:34px;padding:0;background:none;border:0;cursor:pointer;display:grid;place-items:center} .oe-ponto span{display:block;width:26px;height:3px;border-radius:2px;background:rgba(251,248,245,.3); transition:background .3s var(--saida),width .3s var(--saida)} .oe-ponto.oe-on span{background:var(--laranja);width:34px} @media (min-width:820px){ .oe-hero h1{max-width:14ch} .oe-pontos{margin-top:32px} } @media (prefers-reduced-motion:reduce){ .oe-hero__fundos .oe-hero__img{transition:opacity .2s} .oe-slide{transition:opacity .2s} } /* ===== ECRÃ GRANDE (reposto) ===== */ @media (min-width:820px){ :root{--nav:104px} body{font-size:18px} .oe-topo{padding:0 38px} .oe-menu{display:flex;align-items:center;gap:26px} .oe-logo{height:62px} .oe-hamb{display:none} .oe-topo__cta{display:inline-flex!important;min-height:44px;padding:0 20px;font-size:1rem} /* o botão do topo mantém-se sempre visível, incluindo sobre a fotografia do hero. Era transparente com um contorno a 50% de branco e desaparecia contra as zonas claras da foto — que é precisamente onde ele está. */ .oe-topo:not(.oe-solido) .oe-topo__cta{ background:var(--grad-txt);color:#fff;border:0;padding:0 22px; box-shadow:0 2px 14px rgba(0,0,0,.28)} .oe-sec{padding:112px 38px} .oe-hero{display:flex;align-items:center;min-height:100svh} .oe-hero__img{object-position:72% center} /* véu direccional: escurece o lado do texto, liberta o lado da fotografia. O anterior mantinha .46 aos 62% e .20 aos 80% — a foto do espaço ficava lavada de ponta a ponta e o instrutor mal se distinguia do fundo. Agora cai a zero aos 88%: o texto tem contraste onde está, e a metade direita da imagem lê-se como fotografia. */ /* O véu tem de cobrir TODA a largura do texto, não só o início dele. Medido: por baixo do itálico do h1 o fundo chegava a #827B79, e o laranja do texto dava 1,19:1 contra esse ponto — as letras desapareciam contra as zonas claras da fotografia. A queda começava aos 32% e o texto vai até aos 44% da largura. Agora mantém-se cheio até aos 52% e só depois abre, o que continua a libertar a metade direita da imagem. */ .oe-hero::after{background:linear-gradient(96deg, rgba(28,16,12,.90) 0%, rgba(30,17,13,.89) 22%, rgba(32,18,14,.86) 38%, rgba(34,20,16,.78) 52%, rgba(32,21,18,.44) 68%, rgba(30,22,19,.14) 82%, transparent 93%)} .oe-hero__in{align-self:center;width:100%;max-width:1180px;margin:0 auto;padding:0 38px} .oe-hero__in > *{max-width:min(64%,820px)} .oe-hero h1{font-size:clamp(3.4rem,6.4vw,6.4rem)} .oe-hero__pe{position:absolute;inset:auto 0 0;padding:17px 38px 22px} .oe-duas{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start} .oe-esp li{width:50%} .oe-esp li:nth-child(odd){padding-right:34px} .oe-unid{padding:32px 44px 32px 0} .oe-barra{display:none} .oe-modal{place-items:center} .oe-modal__cx{border-radius:6px;padding:34px 34px 36px} .oe-grelha{grid-template-columns:repeat(3,1fr)} .oe-item{padding:28px 24px} .oe-int{padding:calc(var(--nav) + 70px) 38px 62px} .oe-int--foto{padding-top:calc(var(--nav) + 120px);padding-bottom:96px} } @media (min-width:600px) and (max-width:959px){ .oe-grelha{grid-template-columns:repeat(2,1fr)} } /* rodapé — afinações */ .oe-cta-faixa .oe-eyebrow{color:rgba(251,248,245,.45)} .oe-cta-faixa__b{display:flex;flex-wrap:wrap;gap:10px} .oe-cta-faixa__b .oe-btn--linha{color:var(--papel);border-color:rgba(251,248,245,.3)} .oe-rodape__topo{display:grid;gap:14px;margin-bottom:40px; padding-bottom:32px;border-bottom:1px solid rgba(251,248,245,.12)} .oe-rodape__frase{color:rgba(251,248,245,.58);font-size:1.02rem;max-width:34ch;margin:0} .oe-fb p strong{color:rgba(251,248,245,.9);font-weight:600} @media (min-width:820px){ .oe-rodape__topo{grid-template-columns:auto 1fr;align-items:center;gap:44px} .oe-rodape__logo{margin:0} .oe-rodape__grelha{grid-template-columns:repeat(3,1fr);gap:34px 30px} } @media (min-width:1180px){ .oe-rodape__grelha{grid-template-columns:.85fr .95fr .95fr 1.15fr 1fr} } /* ===== INTERIOR E GRELHA (reposto) ===== */ .oe-int__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .oe-int--foto::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(to top,rgba(30,19,14,.95) 0%,rgba(24,17,13,.82) 45%,rgba(24,17,13,.55) 100%)} .oe-int h1{font-size:clamp(2.4rem,10vw,4.6rem);margin:0} .oe-int--foto h1{color:var(--papel)} /* sobre papel claro o remate usa o laranja escuro (4,92:1); sobre a foto escura pode usar o laranja pleno do logótipo */ .oe-int h1 i{font-style:italic;color:var(--laranja-esc)} .oe-int--foto h1 i{color:var(--laranja)} .oe-int .oe-lead{margin-top:16px;max-width:52ch} .oe-int--foto .oe-lead{color:rgba(251,248,245,.84)} .oe-int--foto .oe-eyebrow{color:rgba(251,248,245,.62)} .oe-int__in{max-width:1180px;margin-inline:auto;position:relative;z-index:1} .oe-grelha{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha);margin-top:30px} .oe-item{display:block;background:var(--papel);padding:22px 18px;transition:background .3s var(--saida)} .oe-sec--areia .oe-item{background:var(--papel2)} a.oe-item:hover{background:var(--laranja);color:#fff} a.oe-item:hover .oe-item__n,a.oe-item:hover .oe-item__d{color:rgba(255,255,255,.88)} .oe-item__n{display:block;font-family:var(--tit);font-size:.72rem;letter-spacing:.2em;color:var(--tinta3);margin-bottom:6px} .oe-item__t{font-family:var(--tit);font-size:1.5rem;font-weight:700;line-height:1.05;margin:0} .oe-item__d{color:var(--tinta2);font-size:.92rem;margin-top:6px} .oe-prosa p{margin:0 0 16px;color:var(--tinta2);max-width:64ch} .oe-prosa p:last-child{margin-bottom:0} @media (min-width:600px){ .oe-grelha{grid-template-columns:repeat(2,1fr)} } @media (min-width:960px){ .oe-grelha{grid-template-columns:repeat(3,1fr)} .oe-grelha--2{grid-template-columns:repeat(2,1fr)} .oe-item{padding:28px 24px} .oe-item--larga{grid-column:1/-1} .oe-item--larga .oe-item__d{max-width:62ch} } /* ===== MORADAS COM MAPA ===== */ .oe-moradas{display:grid;gap:26px;margin-top:32px} .oe-morada{background:var(--papel2);border:1px solid var(--linha);overflow:hidden; transition:transform .3s var(--saida),box-shadow .3s var(--saida)} .oe-morada:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(36,29,24,.09)} .oe-morada__f{aspect-ratio:16/10;overflow:hidden;background:var(--papel3)} .oe-morada__f img,.oe-morada__mapa iframe{width:100%;height:100%;object-fit:cover;border:0;display:block} .oe-morada__mapa{filter:grayscale(.35) contrast(1.04)} .oe-morada__c{padding:22px 20px 24px} .oe-morada__c h3{font-family:var(--tit);font-size:1.6rem;margin:0 0 6px} .oe-morada__d{color:var(--tinta2);font-size:.94rem;margin-bottom:12px} .oe-morada__m{color:var(--tinta);font-size:1rem;line-height:1.5} .oe-morada__tel{display:inline-block;margin-top:10px;font-family:var(--tit);font-size:1.3rem; font-weight:700;color:var(--marca)} .oe-morada__tel:hover{color:var(--laranja-esc)} .oe-morada__h{margin-top:8px;font-family:var(--tit);font-size:.82rem;letter-spacing:.14em; text-transform:uppercase;color:var(--laranja)} .oe-morada__ir{display:inline-block;margin-top:14px;font-weight:600;color:var(--tinta); border-bottom:1px solid var(--linha);padding-bottom:2px;transition:color .2s,border-color .2s} .oe-morada__ir:hover{color:var(--laranja);border-color:var(--laranja)} @media (min-width:760px){ .oe-moradas{grid-template-columns:repeat(2,1fr)} } @media (min-width:1100px){ .oe-moradas{grid-template-columns:repeat(3,1fr);gap:30px} } /* ===== CONSENTIMENTO ===== */ .oe-mapa-espera{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px; padding:18px;text-align:center;background:var(--papel3);color:var(--tinta2)} .oe-mapa-espera svg{width:28px;color:var(--tinta3)} .oe-mapa-espera p{font-size:.88rem;max-width:24ch} .oe-mapa-btn{min-height:40px;padding:0 16px;background:var(--tinta);color:var(--papel);border:0; border-radius:3px;font-family:var(--tit);font-size:.95rem;font-weight:700;text-transform:uppercase; letter-spacing:.05em;cursor:pointer;transition:background .2s var(--saida)} .oe-mapa-btn:hover{background:var(--marca)} .oe-morada__mapa{position:relative} .oe-cookies{position:fixed;inset:auto 12px 12px;z-index:120;max-width:520px;margin-inline:auto; background:var(--tinta);color:var(--papel);border-radius:10px;padding:20px 20px 18px; box-shadow:0 18px 48px rgba(20,15,12,.42); transform:translateY(140%);transition:transform .5s var(--saida)} .oe-cookies.oe-on{transform:none} .oe-cookies h2{font-size:1.25rem;color:var(--papel);margin:0 0 6px} .oe-cookies p{color:rgba(251,248,245,.74);font-size:.9rem;line-height:1.5;margin:0 0 15px} /* o banner assenta em fundo escuro: o --laranja dava 4,05:1 e chumbava */ .oe-cookies p a{color:var(--laranja-cl);text-decoration:underline;text-underline-offset:.2em} .oe-cookies__b{display:flex;flex-wrap:wrap;gap:9px} .oe-cookies__b button{flex:1 1 auto;min-height:46px;padding:0 18px;border-radius:4px;cursor:pointer; font-family:var(--tit);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em; transition:background .2s var(--saida),border-color .2s var(--saida)} .oe-cookies__sim{background:var(--marca);color:#fff;border:2px solid var(--marca)} .oe-cookies__sim:hover{background:var(--marca-esc);border-color:var(--marca-esc)} .oe-cookies__nao{background:transparent;color:var(--papel);border:2px solid rgba(251,248,245,.34)} .oe-cookies__nao:hover{background:rgba(251,248,245,.1);border-color:var(--papel)} .oe-prefs{background:none;border:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline; text-underline-offset:.2em;padding:0} .oe-prefs:hover{color:var(--laranja)} @media (min-width:560px){ .oe-cookies{inset:auto auto 16px 16px;padding:24px} } /* ===== HORÁRIO ===== */ /* ===== HORÁRIO SEMANAL ===== Eram seis cartões iguais, cada um encimado por uma barra preta cheia: seis blocos escuros empilhados que pesavam mais do que as aulas em si, que são o conteúdo. O cabeçalho passa a tipografia sobre o próprio papel, com um filete de marca por baixo — o dia continua a ler-se primeiro, sem que a página fique às riscas pretas. */ .oe-horario{display:grid;gap:18px;margin-top:30px} .oe-dia{background:var(--papel2);border:1px solid var(--linha);border-radius:3px; overflow:hidden;transition:border-color .25s var(--saida),box-shadow .25s var(--saida)} .oe-sec--areia .oe-dia{background:var(--papel)} .oe-dia:hover{border-color:var(--papel3);box-shadow:0 3px 16px rgba(36,24,20,.06)} .oe-dia__t{font-family:var(--tit);font-size:1.12rem;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--tinta);margin:0;padding:15px 16px 12px; border-bottom:3px solid var(--marca);display:flex;align-items:baseline;gap:.6rem} /* o dia de hoje é o único que a maioria das pessoas vem cá ver */ .oe-dia--hoje{border-color:var(--marca)} .oe-dia--hoje .oe-dia__t{color:var(--marca-esc)} .oe-dia__t::after{content:"hoje";margin-left:auto;font-size:.62rem;letter-spacing:.14em; padding:.24em .6em;border-radius:2px;background:var(--marca);color:#fff; opacity:0;transform:translateY(-1px);transition:opacity .3s var(--saida)} .oe-dia--hoje .oe-dia__t::after{opacity:1} .oe-dia__l{list-style:none;margin:0;padding:0} .oe-dia__l li{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline; padding:11px 16px;border-bottom:1px solid var(--linha);transition:background .2s var(--saida)} .oe-dia__l li:last-child{border-bottom:0} .oe-dia__l li:hover{background:var(--laranja-luz)} /* algarismos de largura fixa: sem isto o "1" é mais estreito que o "9" e a coluna das horas fica a dançar de linha para linha */ .oe-dia__h{font-family:var(--tit);font-size:1.15rem;font-weight:700;color:var(--marca); min-width:3.4em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* o capitalize não fazia nada em texto já todo em maiúsculas — a normalização passou para oe_nome_aula() no PHP, onde dá para tratar as siglas à parte */ .oe-dia__a{font-size:.95rem;color:var(--tinta);line-height:1.35} .oe-dia__d{font-size:.72rem;color:var(--tinta3);white-space:nowrap;letter-spacing:.04em; text-transform:uppercase;font-family:var(--tit);font-weight:600} @media (min-width:700px){ .oe-horario{grid-template-columns:repeat(2,1fr);gap:20px} } @media (min-width:1100px){ .oe-horario{grid-template-columns:repeat(3,1fr)} } /* ===== LOGÓTIPO ANIMADO ===== */ .oe-marca-sec{padding:78px 16px;text-align:center;position:relative;z-index:1} .oe-marca-sec--tinta{background:var(--tinta)} .oe-marca-sec--papel{background:var(--papel2)} .oe-marca-anim{position:relative;display:inline-block;overflow:hidden; max-width:min(88%,540px);line-height:0} .oe-marca-anim__img{width:100%;height:auto; clip-path:inset(0 100% 0 0); transition:clip-path 1.5s cubic-bezier(.22,1,.36,1)} .oe-marca-anim.oe-in .oe-marca-anim__img{clip-path:inset(0 0 0 0)} /* brilho que passa depois de o logótipo aparecer */ .oe-marca-anim__brilho{position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%); transform:translateX(-115%)} .oe-marca-anim.oe-in .oe-marca-anim__brilho{ animation:oe-brilho 1.5s cubic-bezier(.4,0,.2,1) 1.25s 1} @keyframes oe-brilho{ to{ transform:translateX(115%) } } .oe-marca-frase{margin:24px auto 0;max-width:40ch; font-family:var(--tit);font-size:1.05rem;font-weight:600;letter-spacing:.18em; text-transform:uppercase} .oe-marca-sec--tinta .oe-marca-frase{color:rgba(251,248,245,.56)} .oe-marca-sec--papel .oe-marca-frase{color:var(--tinta3)} @media (min-width:820px){ .oe-marca-sec{padding:104px 38px} } @media (prefers-reduced-motion:reduce){ .oe-marca-anim__img{clip-path:none;transition:none} .oe-marca-anim__brilho{display:none} } /* os slides que não são o primeiro têm o mesmo aspecto do H1 sem serem título */ .oe-slide__t{font-family:var(--tit);font-weight:700;line-height:.9;letter-spacing:-.012em; color:var(--papel);text-wrap:balance;max-width:15ch; font-size:clamp(3.3rem,15vw,9rem)} .oe-slide__t i{font-style:italic;color:var(--laranja)} @media (min-width:820px){ .oe-slide__t{font-size:clamp(3.4rem,6.4vw,6.4rem);max-width:14ch} } /* ===== SEPARAÇÃO DE SECÇÕES ===== Sem filetes. As secções separam-se por espaço generoso (70px em telemóvel, 112px em ecrã grande) e pela troca de fundo entre --papel e --papel2. Riscos de cor a separar blocos são um remendo: acrescentam ruído horizontal, cortam a leitura vertical e cansam à terceira repetição. O degradê fica reservado aos botões, onde é acção e não decoração. */ .oe-cta-faixa{position:relative} /* etiquetas: a barrinha oblíqua passa a ter o degradê */ .oe-eyebrow::before{background:var(--grad)} /* sublinhado do menu em desktop */ .oe-menu a::after{background:var(--grad)} /* indicador activo do carrossel */ .oe-ponto.oe-on span{background:var(--laranja);width:34px} /* item da lista em hover: degradê em vez de laranja chapado */ a.oe-item:hover{background:var(--marca);color:#fff} /* barra de acção do telemóvel */ /* texto pequeno a laranja: o tom depende do fundo em que assenta. A regra original mandava --laranja-esc para todos, incluindo os links do rodapé e do menu de ecrã inteiro — que estão sobre fundo escuro, onde um laranja escuro é exactamente o oposto do que é preciso. */ .oe-morada__tel,.oe-morada__h,.oe-item__d a,.oe-prosa a{color:var(--laranja-esc)} .oe-fb a:hover,.oe-fim a:hover,.oe-nav a:hover,.oe-menu a:hover{color:var(--laranja-cl)} /* ===== O DEGRADÊ É A MARCA ===== No logótipo a cor nunca é chapada: atravessa. Aqui atravessa do vermelho ao laranja. Aqui faz o mesmo — nos botões, nas faixas e nos estados activos. */ /* ===== HIERARQUIA DE BOTÕES ===== O degradê é o gesto mais forte que a marca tem. Aplicado a todos os botões deixa de ser ênfase: cinco botões a gritar com a mesma força é o mesmo que nenhum. E como a travessia se dimensiona à largura, um botão de 163px e outro de 246px mostram ritmos diferentes do mesmo degradê — a marca deixa de ser uma e passa a ser tantas quantas as larguras. Fica reservado a UMA acção: marcar avaliação, que é o que o site inteiro serve. Marcada pelo próprio elemento (button[data-oe-modal] abre o modal de marcação), não por texto: a hierarquia visual segue a hierarquia real de acção e não precisa de manutenção quando o texto mudar. Tudo o resto é vermelho sólido ou contorno. */ /* PRIMÁRIO — marcar avaliação (no topo, no hero e na faixa final) e o envio do formulário. Marcado por classe e não por tipo de elemento: o botão do hero tanto pode sair