/* ==========================================================================
Carlos Miguel Branco — Design System (segunda metade)
Mobile-first: a base é o telemóvel; as media queries só ACRESCENTAM.
Prefixo .cmb- em tudo para não colidir com plugins.
ATENÇÃO — LEIA-SE ANTES DE PROCURAR ALGUMA COISA AQUI:
A partir de 01/09/2026 o design system está repartido por DOIS
ficheiros, e não há uma única regra repetida entre eles:
assets/css/critical.css o primeiro ecrã. Tipos de letra, tokens
(:root), base, tipografia auxiliar,
botões, cabeçalho, marca, botão MENU,
CAPAS e barra de números.
Vai inline no , não é descarregado.
assets/css/theme.css este. Tudo o que só se vê depois de haver
scroll. Carrega sem bloquear a pintura.
Se procuras os tokens, o cabeçalho ou as capas, é no critical.css.
========================================================================== */
@font-face {
font-family: "Montserrat";
font-style: italic;
font-weight: 400 900;
font-display: swap;
src: url("../fonts/montserrat-latin-italic.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- 3. Secções ---------- */
.cmb-section {
padding-block: var(--cmb-section);
padding-inline: var(--cmb-gutter);
}
.cmb-section--alt {
background: var(--cmb-ink-900);
border-block: 1px solid var(--cmb-line-soft);
}
.cmb-section--center { text-align: center; }
.cmb-section--tight { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.cmb-pagehead {
/* Topo curto de propósito: o conteúdo começa logo abaixo do menu.
O espaço em baixo mantém-se, para separar do corpo do artigo. */
padding-block: clamp(1.25rem, 4vw, 2rem) clamp(1.5rem, 4vw, 2.5rem);
padding-inline: var(--cmb-gutter);
}
/* Secções 4 (tipografia auxiliar) e 5 (botões): ver critical.css.
São das primeiras coisas que se vêem, por isso mudaram de ficheiro. */
/* ---------- 6. Redes sociais ----------
A barra de topo foi removida em 30/08/2026: ocupava 38px de altura em
todos os ecrãs para repetir contactos que já estão no rodapé. Estas
regras ficam porque o rodapé usa as mesmas classes. */
.cmb-socials.wp-block-social-links { gap: 8px; }
.cmb-socials .wp-social-link { transition: transform .2s var(--cmb-ease); }
.cmb-socials .wp-social-link:hover { transform: translateY(-2px); }
.cmb-socials .wp-social-link a {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 10px;
}
/* Secções 7 (cabeçalho), 8 (marca) e o botão MENU fechado: ver
critical.css. O painel aberto fica aqui — só é preciso depois de um
toque, e nessa altura esta folha já chegou. */
/* ---------- 9. Navegação — painel aberto --- */
.cmb-nav .wp-block-navigation__responsive-container.is-menu-open {
padding: clamp(1.25rem, 5vw, 2.5rem);
background: var(--cmb-ink-900);
overflow-y: auto;
overscroll-behavior: contain;
}
.cmb-nav .wp-block-navigation__responsive-container-close {
min-width: 44px;
min-height: 44px;
padding: 8px;
border-radius: 10px;
color: var(--cmb-text);
background: rgba(255,255,255,.06);
}
/* Título do painel: diz ao utilizador o que está a ver. */
.cmb-nav .is-menu-open .wp-block-navigation__responsive-container-content::before {
content: "Navegar no site";
display: block;
margin-bottom: .9rem;
padding-bottom: .9rem;
border-bottom: 1px solid var(--cmb-line);
font-size: .66rem;
font-weight: 800;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--cmb-accent);
}
.cmb-nav .is-menu-open .wp-block-navigation__responsive-container-content { gap: 0; }
.cmb-nav .is-menu-open .wp-block-navigation__container { width: 100%; gap: 0; }
.cmb-nav .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--cmb-line-soft); }
.cmb-nav .is-menu-open .wp-block-navigation-item:last-child { border-bottom: 0; }
.cmb-nav .is-menu-open .wp-block-navigation-item__content {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 52px;
padding: 14px 4px;
border-radius: 0;
font-size: 1.05rem;
font-weight: 700;
color: var(--cmb-text);
}
/* Seta discreta à direita: reforça que cada linha é uma página. */
.cmb-nav .is-menu-open .wp-block-navigation-item__content::after {
content: "›";
font-size: 1.4rem;
font-weight: 400;
line-height: 1;
color: var(--cmb-muted2);
}
.cmb-nav .is-menu-open .wp-block-navigation-item__content:hover,
.cmb-nav .is-menu-open .wp-block-navigation-item__content:focus-visible { color: var(--cmb-accent); background: none; }
.cmb-nav .is-menu-open .current-menu-item .wp-block-navigation-item__content { color: var(--cmb-accent); }
/* Secção 10 (CAPAS) e a barra de números por baixo delas: ver
critical.css. São o primeiro ecrã de quatro das dez páginas — foi
por isso que mudaram de ficheiro. */
.cmb-hero {
position: relative;
/* Topo reduzido (era clamp(3rem,12vw,7rem) em cima e em baixo).
Em telemóvel isso empurrava o título para fora do primeiro ecrã. */
padding-block: clamp(1.5rem, 5vw, 3rem) clamp(2.5rem, 9vw, 5rem);
padding-inline: var(--cmb-gutter);
background:
radial-gradient(ellipse 80% 60% at 20% 0%, rgba(42,157,143,.16), transparent 70%),
radial-gradient(ellipse 60% 50% at 92% 10%, rgba(9,124,110,.12), transparent 70%);
}
/* ---------- 11. Grelhas (converte wp:columns em CSS grid) ---------- */
.cmb-grid.wp-block-columns,
.cmb-grid.wp-block-post-template {
display: grid;
gap: var(--cmb-gap);
margin: 0;
}
.cmb-grid > .wp-block-column,
.cmb-grid > li { margin: 0; min-width: 0; }
.cmb-grid--2, .cmb-grid--3, .cmb-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 560px) {
.cmb-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) {
.cmb-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cmb-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
.cmb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cmb-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
/* Duas colunas assimétricas (texto + painel). */
.cmb-split.wp-block-columns { display: grid; gap: clamp(1.5rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
.cmb-split > .wp-block-column { margin: 0; min-width: 0; }
@media (min-width: 900px) {
.cmb-split.wp-block-columns { grid-template-columns: 1.15fr .85fr; align-items: center; }
}
/* ---------- 12. Cartões ---------- */
.cmb-card {
position: relative;
height: 100%;
padding: clamp(1.4rem, 5vw, 1.9rem);
border: 1px solid var(--cmb-line);
border-radius: var(--cmb-r);
background: var(--cmb-ink-900);
overflow: hidden;
transition: transform .35s var(--cmb-ease), border-color .35s, box-shadow .35s;
}
.cmb-card:hover { transform: translateY(-4px); border-color: var(--cmb-line-acc); box-shadow: var(--cmb-shadow); }
.cmb-card > :last-child { margin-bottom: 0; }
.cmb-card p { font-size: clamp(.9rem, 3.2vw, .94rem); }
.cmb-card--feature {
border-color: var(--cmb-line-acc);
background: linear-gradient(165deg, var(--cmb-tint), rgba(255,255,255,.015));
}
.cmb-card__num {
display: grid;
place-items: center;
width: 42px;
height: 42px;
margin: 0 0 1rem;
border-radius: 12px;
background: linear-gradient(135deg, var(--cmb-accent), var(--cmb-accent-deep));
color: var(--cmb-accent-ink);
font-size: .95rem;
font-weight: 900;
}
.cmb-panel {
padding: clamp(1.5rem, 5vw, 2rem);
border: 1px solid var(--cmb-line);
border-radius: var(--cmb-r-lg);
background: linear-gradient(160deg, var(--cmb-tint), rgba(255,255,255,.02));
box-shadow: var(--cmb-shadow-lg);
}
.cmb-panel > :last-child { margin-bottom: 0; }
.cmb-tag {
display: inline-block;
padding: 5px 12px;
border: 1px solid var(--cmb-line-acc);
border-radius: 99px;
background: var(--cmb-tint);
font-size: .66rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cmb-accent);
}
.cmb-tag--yellow { border-color: rgba(255,237,85,.35); background: rgba(255,237,85,.1); color: var(--cmb-yellow); }
.cmb-tag--muted { border-color: var(--cmb-line); background: rgba(255,255,255,.04); color: var(--cmb-muted); }
/* Secção 13 (barra de números): ver critical.css — aparece logo por
baixo da capa, ainda no primeiro ecrã em muitos telemóveis. */
/* ---------- 14. Listas com check ---------- */
.cmb-checklist.wp-block-list {
list-style: none;
padding: 0;
margin: 0 0 1.4rem;
display: grid;
gap: .8rem;
}
.cmb-checklist li {
position: relative;
padding-left: 30px;
font-size: clamp(.9rem, 3.2vw, .95rem);
line-height: 1.6;
}
.cmb-checklist li::before {
content: "";
position: absolute;
left: 0;
top: .25em;
width: 18px;
height: 18px;
border: 1px solid var(--cmb-line-acc);
border-radius: 50%;
background: var(--cmb-tint);
}
.cmb-checklist li::after {
content: "";
position: absolute;
left: 6px;
top: calc(.25em + 4px);
width: 5px;
height: 9px;
border-right: 2px solid var(--cmb-accent);
border-bottom: 2px solid var(--cmb-accent);
transform: rotate(42deg);
}
.cmb-checklist--cross li::before { border-color: rgba(224,106,106,.35); background: rgba(224,106,106,.12); }
.cmb-checklist--cross li::after {
left: 5px;
top: calc(.25em + 5px);
width: 8px;
height: 8px;
border: 0;
transform: none;
background:
linear-gradient(45deg, transparent 44%, #E06A6A 44%, #E06A6A 56%, transparent 56%),
linear-gradient(-45deg, transparent 44%, #E06A6A 44%, #E06A6A 56%, transparent 56%);
}
/* ---------- 15. Cronologia ---------- */
.cmb-timeline { position: relative; padding-left: 30px; display: grid; gap: clamp(1.4rem, 4vw, 2rem); }
.cmb-timeline::before {
content: "";
position: absolute;
left: 9px;
top: .5rem;
bottom: .5rem;
width: 2px;
border-radius: 2px;
background: linear-gradient(180deg, var(--cmb-teal), var(--cmb-dark), transparent);
}
.cmb-timeline__item { position: relative; }
.cmb-timeline__item::before {
content: "";
position: absolute;
left: -27px;
top: .45rem;
width: 13px;
height: 13px;
border: 2px solid var(--cmb-accent);
border-radius: 50%;
background: var(--cmb-ink-950);
box-shadow: 0 0 0 4px rgba(42,157,143,.14);
}
.cmb-timeline__year {
margin: 0 0 2px;
font-size: .72rem;
font-weight: 800;
letter-spacing: .16em;
color: var(--cmb-accent);
}
.cmb-timeline__item > :last-child { margin-bottom: 0; }
/* ---------- 16. Citação ---------- */
.cmb-quote {
margin: 0;
padding: clamp(1.4rem, 5vw, 2.2rem);
padding-left: clamp(1.5rem, 5vw, 2.5rem);
border-left: 3px solid var(--cmb-accent);
border-radius: 0 var(--cmb-r) var(--cmb-r) 0;
background: linear-gradient(90deg, var(--cmb-tint), transparent);
}
.cmb-quote p {
font-size: clamp(1.02rem, 4vw, 1.32rem);
font-weight: 600;
font-style: italic;
line-height: 1.6;
color: var(--cmb-text);
}
.cmb-quote cite {
display: block;
margin-top: .9rem;
font-size: .76rem;
font-style: normal;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cmb-accent);
}
/* ---------- 17. Preço ---------- */
.cmb-price {
padding: clamp(1.8rem, 6vw, 2.4rem);
border: 1px solid var(--cmb-line-acc);
border-radius: var(--cmb-r-lg);
background: linear-gradient(165deg, rgba(42,157,143,.14), rgba(255,255,255,.02));
box-shadow: var(--cmb-shadow-lg);
text-align: center;
}
.cmb-price__value {
margin: .5rem 0 .2rem;
font-size: clamp(2.4rem, 12vw, 3.4rem);
font-weight: 900;
letter-spacing: -.04em;
line-height: 1;
color: var(--cmb-text);
}
.cmb-price__meta { font-size: .78rem; color: var(--cmb-muted2); margin-bottom: 1.5rem; }
.cmb-price .cmb-checklist { text-align: left; }
/* ---------- 18. FAQ ---------- */
.cmb-faq.wp-block-details {
padding: 0;
border: 1px solid var(--cmb-line);
border-radius: var(--cmb-r-sm);
background: var(--cmb-ink-900);
transition: border-color .3s, background .3s;
}
.cmb-faq.wp-block-details[open] { border-color: var(--cmb-line-acc); background: var(--cmb-ink-850); }
.cmb-faq summary {
display: flex;
align-items: center;
min-height: 44px;
padding: clamp(.9rem, 4vw, 1.15rem) clamp(1rem, 4vw, 1.4rem);
font-size: clamp(.9rem, 3.4vw, .96rem);
font-weight: 700;
color: var(--cmb-text);
cursor: pointer;
list-style: none;
}
.cmb-faq summary::-webkit-details-marker { display: none; }
.cmb-faq summary::marker { content: ""; }
.cmb-faq summary:hover { color: var(--cmb-accent); }
.cmb-faq > :not(summary) {
padding: 0 clamp(1rem, 4vw, 1.4rem) clamp(1rem, 4vw, 1.3rem);
font-size: clamp(.88rem, 3.2vw, .93rem);
margin: 0;
}
/* ---------- 19. Artigos ---------- */
.cmb-post {
height: 100%;
padding: clamp(1.4rem, 5vw, 1.8rem);
border: 1px solid var(--cmb-line);
border-radius: var(--cmb-r);
background: var(--cmb-ink-900);
transition: transform .35s var(--cmb-ease), border-color .35s, box-shadow .35s;
}
.cmb-post:hover { transform: translateY(-4px); border-color: var(--cmb-line-acc); box-shadow: var(--cmb-shadow); }
/* ---------- Imagens dos artigos ----------
Há aqui TRÊS coisas diferentes, e é por não terem sido separadas que a
mesma regra andava a fazer mal a duas delas:
1. a miniatura no cartão da LISTAGEM;
2. a imagem de topo do ARTIGO aberto;
3. as fotografias no MEIO do texto (mais abaixo).
Só a primeira leva object-fit: cover. */
/* 1. Miniatura do cartão da listagem — baixa, larga e sempre igual.
Aqui o corte é indispensável: são quatro cartões lado a lado e basta
uma foto vertical para desalinhar a grelha toda. O cover corta, nunca
deforma, por isso ninguém sai esticado. */
.cmb-post .wp-block-post-featured-image img {
width: 100%;
height: 250px;
max-height: 250px;
object-fit: cover;
display: block;
border-radius: 14px;
margin-bottom: 1rem;
}
/* 2. Imagem de topo do artigo aberto — SEM corte e SEM altura fixa.
*
* 04/09/2026: o max-height: 500px ainda encolhia a fotografia de destaque
* nos 4 artigos. A caixa passa a seguir a proporção real da imagem
* (height: auto). O object-fit: contain com !important anula o
* style="object-fit:cover" que o WordPress escreve no ![]()
.
* A regra dos 250px (.cmb-post) é só para os CARTÕES da listagem. */
.cmb-featured,
.cmb-featured.wp-block-post-featured-image {
margin-block: clamp(1.2rem, 4vw, 2rem);
text-align: center;
}
.cmb-featured img,
.cmb-featured.wp-block-post-featured-image img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: none !important;
object-fit: contain !important;
display: block;
margin-inline: auto;
border-radius: 14px;
}
/* --- Imagens DENTRO do corpo do artigo --------------------------------
Estas são outra coisa: não são a miniatura do cartão (250px) nem a
imagem destacada do topo (420px), são as fotografias que vão no meio
do texto. Não tinham teto nenhum, por isso uma foto carregada a
1200x1600 entrava no artigo com 1600px de altura e obrigava a fazer
scroll durante um ecrã inteiro para lá passar.
Aqui NÃO se usa object-fit: cortar uma imagem explicativa a meio pode
esconder justamente o que ela mostra. Limita-se a altura e deixa-se a
largura acompanhar, por isso a proporção mantém-se sempre. */
.wp-block-post-content :is(figure, .wp-block-image) img,
.wp-block-post-content > img {
max-width: 100%;
max-height: 500px; /* valor fixo, como pedido na auditoria */
width: auto;
height: auto;
object-fit: initial; /* anula qualquer corte herdado */
margin-inline: auto;
display: block;
border-radius: 14px;
}
.wp-block-post-content :is(figure, .wp-block-image) { text-align: center; }
.wp-block-post-content figcaption {
margin-top: .7rem;
font-size: .78rem;
color: var(--cmb-muted2);
text-align: center;
}
/* Imagens alinhadas à esquerda/direita pelo editor mantêm-se estreitas. */
.wp-block-post-content :is(.alignleft, .alignright) img { max-height: clamp(200px, 34vh, 340px); }
@media (max-width: 599px) {
.wp-block-post-content :is(.alignleft, .alignright) {
float: none;
margin-inline: auto;
}
}
.cmb-post__meta {
font-size: .7rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cmb-muted2);
margin-bottom: .8rem;
}
.cmb-post h3 { font-size: clamp(1.02rem, 4vw, 1.14rem); line-height: 1.35; margin-bottom: .7rem; }
.cmb-post h3 a { color: var(--cmb-text); text-decoration: none; }
.cmb-post h3 a:hover { color: var(--cmb-accent); }
.cmb-post p { font-size: clamp(.88rem, 3.2vw, .92rem); }
.cmb-post__link,
.cmb-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .78rem;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--cmb-accent);
text-decoration: none;
}
.cmb-post__link::after,
.cmb-link::after { content: "→"; transition: transform .25s var(--cmb-ease); }
.cmb-post__link:hover::after,
.cmb-link:hover::after { transform: translateX(5px); }
/* ---------- 20. Faixa CTA ---------- */
.cmb-cta {
padding-block: clamp(3rem, 10vw, 5.5rem);
padding-inline: var(--cmb-gutter);
border-block: 1px solid var(--cmb-line);
background:
radial-gradient(ellipse 80% 100% at 50% 0%, rgba(42,157,143,.2), transparent 72%),
var(--cmb-ink-900);
text-align: center;
}
.cmb-cta .cmb-lead { margin-inline: auto; }
.cmb-cta__note { margin-top: 1.1rem; font-size: .78rem; color: var(--cmb-muted2); }
/* ---------- 21. Vídeo de abertura (página Musculação 40+) ----------
HISTÓRICO: até 30/08/2026 esta secção tinha um efeito "Sticky Reveal" —
a secção media 175vh a 190vh, o palco ficava preso no ecrã e o vídeo
crescia de 820px para 1560px com a escala a ir de .94 a 1.06 conforme
o scroll. Era intencional, mas na prática lia-se como um defeito: o
vídeo começava pequeno e perdido, mudava de tamanho sozinho e prendia
o scroll durante quase dois ecrãs.
Agora o vídeo tem uma medida só, do princípio ao fim: 1180px no
desktop, largura do ecrã menos as margens no telemóvel. Nada se move
durante o scroll e a secção tem a altura do seu próprio conteúdo. */
.cmb-sticky { position: relative; }
.cmb-sticky__stage {
display: flex;
justify-content: center;
max-width: 100%;
padding-block: clamp(2rem, 8vw, 3.5rem);
padding-inline: var(--cmb-gutter);
}
.cmb-sticky__media {
/* min() em vez de largura fixa: nunca pode passar da largura útil do
ecrã, por isso não há maneira de nascer scroll horizontal nem de o
lado direito ficar cortado no telemóvel. */
width: 100%;
max-width: min(1180px, 100%);
border-radius: var(--cmb-r);
overflow: hidden;
/* Moldura: um fio teal ténue mais um halo, para o vídeo não parecer
um retângulo perdido no meio do preto. */
box-shadow:
0 0 0 1px rgba(53,196,178,.28),
0 30px 80px rgba(0,0,0,.6),
0 0 90px rgba(42,157,143,.14);
}
.cmb-sticky__media .wp-block-embed,
.cmb-sticky__media .cmb-video,
.cmb-sticky__media figure { margin: 0; }
/* Vídeo em iframe próprio (silencioso, em loop, sem comandos).
O bloco Embed do WordPress não aceita parâmetros do leitor, por isso este
vídeo é um bloco HTML — e a proporção passa a ser responsabilidade nossa. */
.cmb-video {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--cmb-ink-950, #07090c);
overflow: hidden;
}
.cmb-video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* Modo ambiente: o vídeo é decoração, não é para ser clicado.
Sem isto, um clique pausava-o e estragava o efeito. */
.cmb-video--ambiente iframe { pointer-events: none; }
/* Link para ouvir o vídeo com som. Discreto por definição: quem quer, encontra;
quem não quer, não é incomodado. */
.cmb-video-som {
margin-top: 1rem;
font-size: .82rem;
letter-spacing: .02em;
}
.cmb-video-som a {
color: var(--cmb-muted2);
text-decoration: none;
border-bottom: 1px solid transparent;
padding-bottom: 2px;
transition: color .25s var(--cmb-ease), border-color .25s var(--cmb-ease);
}
.cmb-video-som a::after { content: " ↗"; }
.cmb-video-som a:hover,
.cmb-video-som a:focus-visible {
color: var(--cmb-accent);
border-bottom-color: currentColor;
}
@media (min-width: 768px) {
.cmb-sticky__media { border-radius: 20px; }
}
/* ---------- 22. Shorts do YouTube (facade leve) ---------- */
.cmb-shorts.wp-block-columns {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--cmb-gap);
margin-top: var(--cmb-gap);
}
@media (min-width: 900px) { .cmb-shorts.wp-block-columns { grid-template-columns: repeat(4, 1fr); } }
.cmb-shorts > .wp-block-column { margin: 0; min-width: 0; }
.cmb-short .wp-block-embed__wrapper,
.cmb-short figure { margin: 0; }
.cmb-short .wp-block-embed__wrapper {
position: relative;
aspect-ratio: 9 / 16;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--cmb-line);
background: var(--cmb-ink-850);
}
.cmb-short iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Miniatura + botão de play que substituem o iframe até ao primeiro clique. */
.cmb-facade {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 0;
border: 0;
cursor: pointer;
background-color: var(--cmb-ink-850);
background-size: cover;
background-position: center;
}
.cmb-facade::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
}
.cmb-facade::after {
content: "";
position: relative;
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--cmb-accent) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2304120F'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/22px no-repeat;
box-shadow: 0 8px 24px rgba(0,0,0,.5);
transition: transform .25s var(--cmb-ease);
}
.cmb-facade:hover::after { transform: scale(1.1); }
/* ---------- 23. Rodapé ---------- */
.cmb-footer {
padding-block: clamp(2.5rem, 8vw, 4.5rem) 0;
padding-inline: var(--cmb-gutter);
background: var(--cmb-ink-900);
border-top: 1px solid var(--cmb-line);
}
.cmb-footer__grid.wp-block-columns {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1.8rem, 6vw, 3.5rem);
padding-bottom: clamp(1.8rem, 5vw, 2.8rem);
}
@media (min-width: 600px) {
.cmb-footer__grid.wp-block-columns { grid-template-columns: repeat(2, 1fr); }
.cmb-footer__about { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
.cmb-footer__grid.wp-block-columns { grid-template-columns: 1.5fr 1fr 1fr; }
.cmb-footer__about { grid-column: auto; }
}
.cmb-footer__grid > .wp-block-column { margin: 0; min-width: 0; }
.cmb-footer__about p { max-width: 42ch; margin-block: 1rem; }
/* --- Contraste do rodapé (auditoria de 01/09/2026) ---------------------
"Navegação", "Mais", os links legais e o aviso de direitos estavam a
#6B7280 sobre #0B0E13: 4,0:1, abaixo do mínimo de 4,5:1. O token
--cmb-muted2 subiu para #98A2B3 (7,5:1) e corrige a maior parte.
Aqui vai-se mais longe do que o mínimo: os títulos e os links do
rodapé passam a branco puro, porque foram nomeados um a um no
relatório. #FFFFFF sobre #0B0E13 dá 19,5:1.
Nota: os títulos deixaram de ser e passaram a . Não é
estética — a página saltava de para e um leitor de ecrã
anuncia isso como um nível em falta. O aspecto não muda nada: quem
manda no tamanho é esta classe, não o nível da tag. */
.cmb-footer__title {
font-size: .72rem;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
color: #FFFFFF;
margin-bottom: .9rem;
}
.cmb-footer__links.wp-block-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: .6rem;
}
.cmb-footer__links a {
font-size: .875rem;
color: #E7EAEF;
text-decoration: none;
transition: color .2s, transform .2s var(--cmb-ease);
display: inline-block;
}
.cmb-footer__links a:hover { color: var(--cmb-accent); transform: translateX(4px); }
.cmb-footer__thanks {
padding: clamp(1rem, 4vw, 1.4rem);
margin-bottom: 1.5rem;
border: 1px solid var(--cmb-line-soft);
border-radius: var(--cmb-r);
background: rgba(255,255,255,.02);
font-style: italic;
text-align: center;
color: var(--cmb-muted);
}
.cmb-footer__bar {
gap: .6rem;
padding-block: 1.2rem 1.6rem;
border-top: 1px solid var(--cmb-line-soft);
color: #C8CFD9;
text-align: center;
}
.cmb-footer__bar p { margin: 0; }
/* Estes três links foram reprovados por nome no relatório. Branco puro,
e sublinhado ténue para não dependerem só da cor — quem não distingue
bem cores continua a perceber que são links. */
.cmb-footer__legal a {
display: inline-block;
min-height: 44px;
padding: 10px 4px;
line-height: 24px;
color: #FFFFFF;
text-decoration: underline;
text-decoration-color: rgba(255,255,255,.35);
text-underline-offset: 3px;
}
.cmb-footer__legal a:hover { color: var(--cmb-accent); text-decoration-color: currentColor; }
@media (max-width: 599px) { .cmb-footer__bar { justify-content: center; } }
/* Contraste forçado (auditoria 04/09/2026): o rodapé falhava WCAG
porque tokens e blocos do WordPress voltavam a cinzento. Branco puro
em tudo o que é texto; o hover dos links fica no acento, para não
perder o sinal de que são clicáveis. */
.cmb-footer,
.cmb-footer *:not(svg):not(path):not(rect) {
color: #FFFFFF !important;
}
.cmb-footer a:hover,
.cmb-footer a:focus-visible {
color: var(--cmb-accent) !important;
}
/* ---------- 24. Página Afiliado — paleta Zumub ---------- */
.cmb-page--afiliado {
--cmb-accent: #2C6BFF;
--cmb-accent-deep: #0B4FD8;
--cmb-accent-ink: #FFFFFF;
--cmb-line-acc: rgba(44,107,255,.4);
--cmb-tint: rgba(44,107,255,.12);
--cmb-ink-950: #05070D;
--cmb-ink-900: #0A0F1C;
--cmb-ink-850: #101827;
background: var(--cmb-ink-950);
}
.cmb-page--afiliado .cmb-brand__mark {
background: linear-gradient(135deg, #2C6BFF, #0B4FD8);
color: #fff;
}
/* Blocos claros ao estilo e-commerce, só nesta página. */
.cmb-section--light {
background: #FFFFFF;
color: #2A3446;
border-block: 1px solid rgba(0,0,0,.08);
}
.cmb-section--light :is(h1,h2,h3,h4) { color: #05070D; }
.cmb-section--light :is(p, li, .cmb-lead) { color: #2A3446; }
.cmb-section--light .cmb-card,
.cmb-section--light .cmb-panel {
background: #F5F7FB;
border-color: rgba(0,0,0,.09);
box-shadow: 0 2px 10px rgba(10,15,28,.05);
}
.cmb-section--light .cmb-card:hover { box-shadow: 0 14px 34px rgba(10,15,28,.12); }
.cmb-section--light .cmb-checklist li::before { background: rgba(44,107,255,.1); }
.cmb-section--light .cmb-quote {
background: linear-gradient(90deg, rgba(44,107,255,.08), transparent);
}
.cmb-section--light .cmb-quote p { color: #05070D; }
/* O botão fantasma precisa de contraste próprio em fundo branco. */
.cmb-section--light .cmb-btn--ghost .wp-block-button__link {
background: #FFFFFF;
border-color: rgba(10,15,28,.18);
color: #05070D;
}
.cmb-section--light .cmb-btn--ghost .wp-block-button__link:hover {
border-color: var(--cmb-accent);
background: rgba(44,107,255,.06);
}
/* ---------- 25. Revelar ao scroll ---------- */
.cmb-reveal { opacity: 0; transform: translateY(22px); }
.cmb-reveal.is-in {
opacity: 1;
transform: none;
transition: opacity .7s var(--cmb-ease), transform .7s var(--cmb-ease);
}
/* ---------- 26. Voltar ao topo ----------
O botão é criado pelo JS e não existe no HTML das páginas — assim
aparece nas dez páginas e nos artigos sem ser preciso reinserir
padrão nenhum nem mexer nos templates.
Fica no canto inferior direito, mas sobe acima da barra de gestos do
telemóvel (env(safe-area-inset-bottom)) e só aparece depois de haver
scroll suficiente para valer a pena. */
.cmb-top {
position: fixed;
right: clamp(.9rem, 3.5vw, 1.6rem);
bottom: calc(clamp(.9rem, 3.5vw, 1.6rem) + env(safe-area-inset-bottom, 0px));
z-index: 90;
display: grid;
place-items: center;
width: 46px;
height: 46px;
padding: 0;
border: 1px solid var(--cmb-line-acc);
border-radius: 50%;
background: rgba(11,14,19,.86);
color: var(--cmb-accent);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity .3s var(--cmb-ease), transform .3s var(--cmb-ease),
visibility .3s, background .25s, border-color .25s;
}
@supports (backdrop-filter: blur(1px)) {
.cmb-top { background: rgba(11,14,19,.6); backdrop-filter: blur(12px); }
}
.cmb-top.is-on { opacity: 1; visibility: visible; transform: none; }
.cmb-top:hover,
.cmb-top:focus-visible { background: var(--cmb-accent); color: var(--cmb-accent-ink); border-color: var(--cmb-accent); }
.cmb-top svg { width: 20px; height: 20px; display: block; }
/* Alvo de toque com 46px de lado — acima do mínimo de 44px — mas sem
volume visual: é um círculo discreto, não um segundo CTA. */
@media (max-width: 599px) {
.cmb-top { width: 44px; height: 44px; }
}
/* ---------- 27. Copiar o email ----------
Um link mailto: só funciona se o dispositivo tiver um programa de
email associado. Em muitos computadores não tem, e o clique não faz
absolutamente nada — que foi o que aconteceu na página Contactos.
O mailto fica, e ao lado passa a haver forma de copiar o endereço. */
.cmb-copy {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 40px;
margin-top: .6rem;
padding: 8px 14px;
border: 1px solid var(--cmb-line);
border-radius: 9px;
background: rgba(255,255,255,.03);
color: var(--cmb-soft);
font-size: .74rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
transition: border-color .25s, color .25s, background .25s;
}
.cmb-copy:hover,
.cmb-copy:focus-visible { border-color: var(--cmb-line-acc); color: var(--cmb-text); background: var(--cmb-tint); }
.cmb-copy.is-done { border-color: var(--cmb-line-acc); color: var(--cmb-accent); }
.cmb-section--light .cmb-copy { border-color: rgba(10,15,28,.18); color: #2A3446; background: #fff; }
/* ==========================================================================
29. ÍCONES NOS LINKS DE MARCA
==========================================================================
Não há imagens para carregar, não há JavaScript, não há plugin, e não
se mexeu numa única linha do HTML das páginas. Os ícones são desenhos
vectoriais escritos dentro do próprio CSS e aplicados pelo ENDEREÇO do
link: qualquer link para a Hotmart apanha o ícone da Hotmart, esteja
em que página estiver, inclusive nos artigos que ainda estão por
migrar. Não há nada a reinserir e não há nada que se possa esquecer.
ATENÇÃO — mudou em 02/09/2026: até aqui os desenhos eram aproximações
feitas à mão. Agora são os símbolos OFICIAIS de cada marca, a partir
dos ficheiros originais. A frase que aqui estava antes, "não são
reproduções dos logótipos", deixou de ser verdade e foi retirada.
Continuam monocromáticos: herdam a cor do próprio botão
(currentColor). Um "a" laranja da Amazon dentro de um botão teal
estragava a paleta, e um logótipo a cores dentro de um botão colorido
quase nunca se lê.
Cada símbolo foi encaixado numa caixa comum de 24×24 com o mesmo peso
óptico — não com a mesma largura. Igualar a largura fazia a chama da
Hotmart (que é alta) ficar minúscula ao lado do sorriso da Amazon (que
é quatro vezes mais largo do que alto). O que se iguala é o quanto
cada um PARECE pesar ao lado do texto.
Sobre a Amazon: o sorriso sozinho, aos 21px a que isto é visto no
telemóvel, fica um traço fino que ninguém identifica — foi medido. O
que se usa é o "a" com o sorriso por baixo, que é a forma que a
própria Amazon usa quando precisa de um ícone quadrado.
Sobre a Hotmart: do logótipo usa-se só a chama. O nome escrito, à
dimensão de um ícone, fica um borrão ilegível.
Sobre o Zumub — mudou a 03/09/2026. Deixou de ser o saco de compras
desenhado. O site da Zumub não tem o logótipo em SVG, só um PNG de
230×70, e do logótipo usa-se apenas o símbolo: as quatro barras
inclinadas que formam o "Z" — o mesmo que está na parede da fotografia
da página Afiliado. O nome "zumub" fica de fora pela razão da Hotmart.
O símbolo não foi decalcado a olho. Foi medido no PNG, barra a barra
(largura 7,72px, inclinação -0,556 por linha, espaçamento 10,42) e
reconstruído em vector. Sobreposto ao original, o maior desvio num
ponto é de 0,06px. Sendo vector, fica nítido em qualquer tamanho; o
PNG, aos 21px de um telemóvel 3x, teria de ser ampliado e ficava
esborratado.
Em browsers antigos que não percebam "mask" o ícone simplesmente não
aparece. O botão continua lá, com o texto, a funcionar na mesma.
========================================================================== */
.cmb-btn .wp-block-button__link:is(
[href*="hotmart.com"], [href*="amazon."], [href*="zumu"],
[href*="youtube.com"], [href*="youtu.be"], [href*="instagram.com"],
[href*="facebook.com"], [href^="mailto:"]
)::before,
a.cmb-link:is(
[href*="hotmart.com"], [href*="amazon."], [href*="zumu"],
[href*="youtube.com"], [href*="youtu.be"], [href*="instagram.com"],
[href*="facebook.com"], [href^="mailto:"]
)::before {
content: "";
flex: 0 0 auto;
width: 1.25em;
height: 1.25em;
background-color: currentColor;
-webkit-mask: var(--cmb-ico) center / contain no-repeat;
mask: var(--cmb-ico) center / contain no-repeat;
}
/* --- Hotmart: a chama do logótipo. --- */
:is(.cmb-btn .wp-block-button__link, a.cmb-link)[href*="hotmart.com"]::before {
--cmb-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(4.1512 1.3505) scale(0.0748)'%3E%3Cpath d='M199.866 133.954c-3.61-12.822-8.833-25.329-16.319-37.69 0 0-7.053-11.685-10.014-15.217-.722-.919-2.19.097-1.637 1.137.843 1.742 1.589 3.87 1.059 5.975-.866 2.54-3.706 4.33-6.33 3.411a5.6 5.6 0 0 1-1.926-1.306c-2.696-2.782-4.068-7.354-5.825-13.184-1.564-5.177-3.49-11.636-7.004-18.603-5.681-11.322-12.421-16.571-12.686-16.79a.97.97 0 0 0-1.179 0 .99.99 0 0 0-.361 1.138c.024.097 2.864 9.435-2.6 16.498-2.166 2.83-5.488 4.524-9.339 4.766-3.876.242-7.703-1.04-10.014-3.338-5.704-5.734-6.378-15.894-6.258-21.434.361-18.482 5.945-31.424 8.858-35.706.265-.363.241-.871-.048-1.234-.289-.339-.746-.484-1.156-.29-22.602 9.821-38.97 26.562-47.322 48.407C65.047 63.484 63 69.41 61.34 73.137c-1.54 3.41-2.96 4.983-4.405 5.854-.794.484-1.781.75-2.768.798-1.468-.145-8.762-1.5-2.407-13.692.53-1.016-.867-2.056-1.637-1.21l-5.007 5.516c-.216.242-.457.484-.674.726l-.842.92a6 6 0 0 0-.385.483c-15.79 18.047-26.84 41.125-33.194 62.486-5.705 20.539-6.066 36.916-6.017 43.158v1.378c0 27.603 10.494 53.536 29.582 73.058 19.064 19.499 44.435 30.264 71.394 30.264s52.33-10.741 71.394-30.264c19.063-19.522 29.582-45.455 29.582-73.058 0-17.587-2.262-31.908-6.09-45.6m-94.886 99.087c-28.86 0-52.281-23.949-52.281-53.487 0-29.537 23.396-53.487 52.281-53.487s52.281 23.95 52.281 53.487-23.396 53.487-52.281 53.487'/%3E%3C/g%3E%3C/svg%3E");
}
/* --- Amazon: o "a" com o sorriso por baixo. --- */
:is(.cmb-btn .wp-block-button__link, a.cmb-link)[href*="amazon."]::before {
--cmb-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(5.1325 1.5) scale(0.2416)'%3E%3Cpath d='M56.342 56.124l-3.667-5.582c-1.167-2.084-1.083-4.418-1.083-4.418V20.375C52.092-1.875 27.425.042 27.425.042 5.497.042 2.258 17.107 2.258 17.107c-.914 3.431 1.744 3.514 1.744 3.514l10.715 1.087s1.827.418 2.492-1.757c0 0 1.411-7.445 9.302-7.445 8.586 0 8.497 7.369 8.497 7.369v6.169c-17.14.573-25.083 5.331-25.083 5.331-10.583 6-9.917 17.917-9.917 17.917 0 19.416 18.5 18.582 18.5 18.582 11.833 0 18.833-8.666 18.833-8.666 2.083 3.668 5.917 7.166 5.917 7.166 1.918 2.08 3.917.334 3.917.334l8.667-7.416c1.916-1.418.5-3.168.5-3.168zm-32.059-.24c-5.566 0-7.635-5.531-6.711-10.967.925-5.436 5.729-9.708 17.437-9.583v3.305c.415 14.438-6.093 17.245-10.726 17.245z'/%3E%3Cg transform='translate(-17.7324 52.7217) scale(0.2963)'%3E%3Cpath d='M241.504 104.862s-.98 1.705.224 2.086c0 0 1.36.531 3.056-1.043 0 0 12.369-10.805 12.667-30.477 0 0 .091-2.457-.895-3.129 0 0-3.875-3.428-17.809-2.385 0 0-12.146.82-18.777 6.707 0 0-.596.521-.596 1.191 0 0-.143 1.447 3.502.82 0 0 12.145-1.715 19.373-.82 0 0 3.727.447 4.77 1.715 0 0 1.714 1.416.819 6.109 0 .002-2.46 11.924-6.334 19.226z'/%3E%3Cpath d='M239.055 85.989s1.814 2.35-1.113 4.377c0 0-31.267 25.01-83.767 25.01 0 0-54.042 2.666-99.167-38.334 0 0-1.582-1.389-.6-2.68 0 0 .878-1.188 3.151.104 0 0 42.449 26.451 98.199 26.451 0 0 38.75 1.5 78.5-15.5 0 0 3.167-1.641 4.797.572z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* --- Zumub: o símbolo do logótipo, as barras inclinadas do "Z". --- */
:is(.cmb-btn .wp-block-button__link, a.cmb-link)[href*="zumu"]::before {
--cmb-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(1.458 1.692) scale(0.53)'%3E%3Cpath d='M11.223 0L18.943 0L12.528 11.53L4.808 11.53Z'/%3E%3Cpath d='M21.643 0L29.363 0L7.72 38.9L0 38.9Z'/%3E%3Cpath d='M32.063 0L39.783 0L18.14 38.9L10.42 38.9Z'/%3E%3Cpath d='M27.232 27.41L34.952 27.41L28.56 38.9L20.84 38.9Z'/%3E%3C/g%3E%3C/svg%3E");
}
/* --- YouTube --- */
:is(.cmb-btn .wp-block-button__link, a.cmb-link):is([href*="youtube.com"],[href*="youtu.be"])::before {
--cmb-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(1 1) scale(0.9167)'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/g%3E%3C/svg%3E");
}
/* --- Instagram --- */
:is(.cmb-btn .wp-block-button__link, a.cmb-link)[href*="instagram.com"]::before {
--cmb-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(1.75 1.75) scale(0.8542)'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/g%3E%3C/svg%3E");
}
/* --- Facebook --- */
:is(.cmb-btn .wp-block-button__link, a.cmb-link)[href*="facebook.com"]::before {
--cmb-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(1.75 1.75) scale(0.8542)'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/g%3E%3C/svg%3E");
}
/* --- Email: o endereço do site é do Gmail, por isso é o M do Gmail.
(O rodapé usa o bloco social-links do WordPress, que tem envelope
próprio e não passa por aqui.) --- */
:is(.cmb-btn .wp-block-button__link, a.cmb-link)[href^="mailto:"]::before {
--cmb-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(1.5 1.5) scale(0.875)'%3E%3Cpath d='M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z'/%3E%3C/g%3E%3C/svg%3E");
}
/* O .cmb-link já tinha uma seta em ::after. Com um ícone à frente, os
dois precisam de respirar. */
a.cmb-link::before { margin-right: -1px; }
/* ==========================================================================
30. LOGÓTIPOS DAS MARCAS NOS CARTÕES (Plano Real, padrão 03)
==========================================================================
Pedido no relatório de 02/09/2026: os logótipos oficiais dentro dos
cartões de comparação, "entre 35px e 45px para não gritarem". Ficaram
a 38px.
NÃO É PRECISO REINSERIR O PADRÃO — e isso era o principal receio. Pelo
mesmo mecanismo da secção 29, o logótipo entra pelo ENDEREÇO do link
que o cartão já tem lá dentro: o cartão que leva à Hotmart recebe o
logótipo da Hotmart, o que leva à Amazon recebe o da Amazon. Não se
mexe no HTML das páginas, logo não há nada a apagar nem a reescrever à
mão.
Foi verificado, ficheiro a ficheiro, que em todo o tema existem apenas
dois cartões com links destas marcas: os dois do padrão 03. O botão da
Hotmart da página Experiência Real está dentro de .cmb-price e o da
página Artigos dentro de .cmb-cta — nenhum é cartão, e por isso
nenhum apanha logótipo.
Aqui usam-se os logótipos COMPLETOS, com o nome escrito, ao contrário
dos botões. A 38px o nome lê-se, e é o nome que dá o ar de ambiente
oficial de marca; aos 21px de um botão ficava um borrão, e é por isso
que na secção 29 se usa só o símbolo.
Monocromáticos e claros, como foi pedido: o fundo destes cartões é
escuro (.cmb-section--alt) e a versão em branco é a que se lê. Não é
branco puro escrito à mão — é o token --cmb-text (#F1F4F7), o mesmo
dos títulos. Assim o logótipo pesa como um título e não como texto
corrido, que no tema é mais apagado (#C3CBD5), e fica preso à paleta
em vez de a contrariar.
O ::before ocupa a largura toda do cartão mas só pinta onde a máscara
deixa — não precisa de largura própria, e o "contain" garante a
proporção original de cada logótipo.
Em browsers sem :has() a regra inteira é ignorada e o cartão fica
exactamente como estava. Nada se parte.
========================================================================== */
.cmb-card:has(a[href*="hotmart.com"])::before,
.cmb-card:has(a[href*="amazon."])::before {
content: "";
display: block;
height: 42px;
margin: 0 0 1.1rem;
background-color: var(--cmb-text);
-webkit-mask: var(--cmb-logo) left center / auto var(--cmb-logo-alt) no-repeat;
mask: var(--cmb-logo) left center / auto var(--cmb-logo-alt) no-repeat;
}
/* --- Hotmart: chama + nome. --- */
.cmb-card:has(a[href*="hotmart.com"])::before { --cmb-logo-alt: 42px; --cmb-logo: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 980 285' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M254.819 228.71V89.973c0-.799.626-1.452 1.421-1.452h28.186c.795 0 1.42.653 1.42 1.452v52.422c5.007-8.902 14.828-17.006 30.618-17.006 25.226 0 34.686 16.402 34.686 39.142v64.179c0 .798-.626 1.452-1.42 1.452h-27.994c-.795 0-1.42-.654-1.42-1.452v-56.075c0-13.838-4.237-21.942-15.983-21.942s-18.679 8.298-18.679 23.321v54.696c0 .798-.626 1.452-1.42 1.452H256.24c-.795 0-1.421-.654-1.421-1.452m106.153-48.747v-1.983c0-30.844 20.797-52.592 52.209-52.592s52.209 21.748 52.209 52.592v1.983c0 31.038-20.604 52.786-52.209 52.786s-52.209-21.748-52.209-52.786m73.199 0v-1.983c0-18.579-6.355-28.474-20.99-28.474s-20.99 9.895-20.99 28.474v1.983c0 18.773 6.548 28.667 20.99 28.667s20.99-9.894 20.99-28.667m53.819 19.353v-48.624h-17.163c-.529 0-.938-.436-.938-.968v-20.78c0-.533.433-.968.938-.968h17.163V89.512c0-.532.433-.968.939-.968h28.908c.53 0 .939.436.939.968v38.464h22.097c.53 0 .939.435.939.968v20.78c0 .532-.434.968-.939.968h-22.097v46.447c0 8.104 3.851 11.467 13.48 11.467 4.044 0 5.969-.75 8.713-1.621l1.228.919v21.482a.99.99 0 0 1-.698.944 59.4 59.4 0 0 1-16.753 2.37c-25.226 0-36.78-11.466-36.78-33.408zm67.424 29.877V128.944c0-.532.433-.968.939-.968h28.909c.529 0 .938.436.938.968v14.636c4.622-9.096 13.865-18.192 29.294-18.192s25.034 6.12 30.041 18.99c6.932-11.854 17.716-18.99 32.158-18.99 24.456 0 34.108 16.208 34.108 39.94v63.865c0 .532-.433.967-.939.967h-28.909c-.529 0-.938-.435-.938-.967v-57.939c0-14.031-5.2-20.756-14.828-20.756-10.783 0-17.138 7.911-17.138 24.724v53.971c0 .532-.433.967-.939.967h-28.909c-.529 0-.938-.435-.938-.967v-57.745c0-13.837-4.622-20.95-14.443-20.95-10.591 0-17.523 7.5-17.523 24.506v54.189c0 .532-.434.967-.939.967h-28.909c-.529 0-.939-.435-.939-.967zm167.123-27.506c0-17.587 10.976-28.062 30.04-30.457l34.686-4.741v-6.532c0-7.499-4.814-12.047-14.827-12.047s-15.382 3.87-16.465 11.055a.956.956 0 0 1-.939.823H727.64a.98.98 0 0 1-.963-1.065c1.685-21.095 19.642-33.335 46.36-33.335 26.719 0 44.29 13.426 44.29 34.787v68.994c0 .532-.433.967-.938.967h-27.056a.95.95 0 0 1-.939-.895l-.914-14.297c-5.97 11.08-17.139 17.781-32.159 17.781-19.256 0-32.736-13.039-32.736-31.038zm64.726-8.685v-7.305l-23.493 3.169c-7.702.992-11.361 4.741-11.361 10.862 0 6.725 4.814 10.668 13.672 10.668 11.554 0 21.182-6.919 21.182-17.394m133.181-42.31h-17.162c-.53 0-.939-.436-.939-.968v-20.78c0-.533.433-.968.939-.968h17.162V89.512c0-.532.433-.968.939-.968h28.909c.529 0 .938.436.938.968v38.464h24.095c.53 0 .939.435.939.968v20.78c0 .532-.434.968-.939.968H951.23v46.447c0 8.104 3.852 11.467 13.48 11.467 4.092 0 7.582-.774 10.759-1.645.602-.17 1.204.29 1.204.943v21.506a.99.99 0 0 1-.698.944c-5.175 1.451-12.493 2.371-18.775 2.371-25.226 0-36.78-11.467-36.78-33.409v-48.649zm-30.52-22.664c-16.633-1.524-25.082 4.258-29.583 16.184v-15.265c0-.532-.433-.967-.939-.967h-27.416c-.53 0-.939.435-.939.967v100.249c0 .532.433.968.939.968h27.416c.53 0 .939-.436.939-.968v-46.665c0-30.578 12.131-33.045 29.438-31.957a.963.963 0 0 0 1.011-.967v-20.611c0-.484-.385-.944-.866-.992z' fill='%230D0D0D'/%3E%3Cpath d='M199.866 133.954c-3.61-12.822-8.833-25.329-16.319-37.69 0 0-7.053-11.685-10.014-15.217-.722-.919-2.19.097-1.637 1.137.843 1.742 1.589 3.87 1.059 5.975-.866 2.54-3.706 4.33-6.33 3.411a5.6 5.6 0 0 1-1.926-1.306c-2.696-2.782-4.068-7.354-5.825-13.184-1.564-5.177-3.49-11.636-7.004-18.603-5.681-11.322-12.421-16.571-12.686-16.79a.97.97 0 0 0-1.179 0 .99.99 0 0 0-.361 1.138c.024.097 2.864 9.435-2.6 16.498-2.166 2.83-5.488 4.524-9.339 4.766-3.876.242-7.703-1.04-10.014-3.338-5.704-5.734-6.378-15.894-6.258-21.434.361-18.482 5.945-31.424 8.858-35.706.265-.363.241-.871-.048-1.234-.289-.339-.746-.484-1.156-.29-22.602 9.821-38.97 26.562-47.322 48.407C65.047 63.484 63 69.41 61.34 73.137c-1.54 3.41-2.96 4.983-4.405 5.854-.794.484-1.781.75-2.768.798-1.468-.145-8.762-1.5-2.407-13.692.53-1.016-.867-2.056-1.637-1.21l-5.007 5.516c-.216.242-.457.484-.674.726l-.842.92a6 6 0 0 0-.385.483c-15.79 18.047-26.84 41.125-33.194 62.486-5.705 20.539-6.066 36.916-6.017 43.158v1.378c0 27.603 10.494 53.536 29.582 73.058 19.064 19.499 44.435 30.264 71.394 30.264s52.33-10.741 71.394-30.264c19.063-19.522 29.582-45.455 29.582-73.058 0-17.587-2.262-31.908-6.09-45.6m-94.886 99.087c-28.86 0-52.281-23.949-52.281-53.487 0-29.537 23.396-53.487 52.281-53.487s52.281 23.95 52.281 53.487-23.396 53.487-52.281 53.487' fill='%23FF4000'/%3E%3C/svg%3E"); }
/* --- Amazon: nome + sorriso. --- */
.cmb-card:has(a[href*="amazon."])::before { --cmb-logo-alt: 32px; --cmb-logo: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.658000000000003 -1.875 384.24600000000004 119.917'%3E%3Cpath d='M81.633 27.542V64.65a2.268 2.268 0 0 1-2.268 2.268H67.651a2.269 2.269 0 0 1-2.268-2.268V4.292a2.268 2.268 0 0 1 2.268-2.268h10.84a2.268 2.268 0 0 1 2.268 2.268v8.5S84.634.667 96.134.667c0 0 11.375-1.375 16 11.25 0 0 3.875-11.25 15.625-11.25 0 0 17.474-1.039 17.474 17.042l.133 9.958v37.108a2.268 2.268 0 0 1-2.268 2.268h-11.715a2.269 2.269 0 0 1-2.268-2.268l-.107-40.483c.333-9.167-7.083-8.5-7.083-8.5-9.333.167-8.435 11.875-8.435 11.875v37.108a2.268 2.268 0 0 1-2.268 2.268H99.508a2.269 2.269 0 0 1-2.268-2.268V25.208s.685-9.5-7.649-9.5c.001 0-8.249-1.083-7.958 11.834zM383.588 27.431v37.107a2.269 2.269 0 0 1-2.268 2.268l-12.183.236a2.269 2.269 0 0 1-2.268-2.268V25.208s.685-9.5-7.648-9.5c0 0-7.959-.392-7.959 14.503v34.438a2.269 2.269 0 0 1-2.268 2.268h-11.715a2.269 2.269 0 0 1-2.268-2.268V4.292a2.269 2.269 0 0 1 2.268-2.268h10.84a2.268 2.268 0 0 1 2.268 2.268v8.5S354.262.667 365.762.667c0 0 12.319-1.869 16.468 11.015.001-.001 1.358 2.657 1.358 15.749zM299.008.417c-14.98 0-27.125 12.625-27.125 33.875 0 18.709 9.375 33.875 27.125 33.875 16.75 0 27.125-15.166 27.125-33.875 0-20.875-12.144-33.875-27.125-33.875zm9.455 34.625c0 8-1 12.25-1 12.25-1.423 8.457-7.562 8.469-8.467 8.424-.977.039-7.168-.049-8.449-8.424 0 0-1-4.25-1-12.25v-1.333c0-8 1-12.25 1-12.25 1.281-8.375 7.473-8.463 8.449-8.425.905-.045 7.044-.034 8.467 8.425 0 0 1 4.25 1 12.25zM265.084 12.708v-8.66a2.269 2.269 0 0 0-2.268-2.268h-38.72a2.268 2.268 0 0 0-2.268 2.268v8.593a2.269 2.269 0 0 0 2.268 2.268h20.197l-23.906 34.68s-.942 1.406-.911 2.959v10.549s-.156 3.617 3.946 1.518c0 0 7.286-4.402 19.503-4.402 0 0 12.065-.15 20.109 4.781 0 0 3.339 1.518 3.339-1.82v-9.182s.303-2.43-2.884-3.947c0 0-9.258-5.084-21.399-4.25zM56.342 56.124l-3.667-5.582c-1.167-2.084-1.083-4.418-1.083-4.418V20.375C52.092-1.875 27.425.042 27.425.042 5.497.042 2.258 17.107 2.258 17.107c-.914 3.431 1.744 3.514 1.744 3.514l10.715 1.087s1.827.418 2.492-1.757c0 0 1.411-7.445 9.302-7.445 8.586 0 8.497 7.369 8.497 7.369v6.169c-17.14.573-25.083 5.331-25.083 5.331-10.583 6-9.917 17.917-9.917 17.917 0 19.416 18.5 18.582 18.5 18.582 11.833 0 18.833-8.666 18.833-8.666 2.083 3.668 5.917 7.166 5.917 7.166 1.918 2.08 3.917.334 3.917.334l8.667-7.416c1.916-1.418.5-3.168.5-3.168zm-32.059-.24c-5.566 0-7.635-5.531-6.711-10.967.925-5.436 5.729-9.708 17.437-9.583v3.305c.415 14.438-6.093 17.245-10.726 17.245zM212.008 56.124l-3.666-5.582c-1.167-2.084-1.084-4.418-1.084-4.418V20.375c.5-22.25-24.167-20.333-24.167-20.333-21.928 0-25.167 17.065-25.167 17.065-.914 3.431 1.744 3.514 1.744 3.514l10.715 1.087s1.827.418 2.492-1.757c0 0 1.411-7.445 9.302-7.445 8.586 0 8.497 7.369 8.497 7.369v6.169c-17.139.573-25.083 5.331-25.083 5.331-10.583 6-9.917 17.917-9.917 17.917 0 19.416 18.5 18.582 18.5 18.582 11.833 0 18.833-8.666 18.833-8.666 2.084 3.668 5.916 7.166 5.916 7.166 1.918 2.08 3.918.334 3.918.334l8.666-7.416c1.917-1.418.501-3.168.501-3.168zm-32.059-.24c-5.566 0-7.635-5.531-6.711-10.967.925-5.436 5.729-9.708 17.436-9.583v3.305c.416 14.438-6.091 17.245-10.725 17.245z'/%3E%3Cg fill='%23f3971b'%3E%3Cpath d='M241.504 104.862s-.98 1.705.224 2.086c0 0 1.36.531 3.056-1.043 0 0 12.369-10.805 12.667-30.477 0 0 .091-2.457-.895-3.129 0 0-3.875-3.428-17.809-2.385 0 0-12.146.82-18.777 6.707 0 0-.596.521-.596 1.191 0 0-.143 1.447 3.502.82 0 0 12.145-1.715 19.373-.82 0 0 3.727.447 4.77 1.715 0 0 1.714 1.416.819 6.109 0 .002-2.46 11.924-6.334 19.226z'/%3E%3Cpath d='M239.055 85.989s1.814 2.35-1.113 4.377c0 0-31.267 25.01-83.767 25.01 0 0-54.042 2.666-99.167-38.334 0 0-1.582-1.389-.6-2.68 0 0 .878-1.188 3.151.104 0 0 42.449 26.451 98.199 26.451 0 0 38.75 1.5 78.5-15.5 0 0 3.167-1.641 4.797.572z'/%3E%3C/g%3E%3C/svg%3E"); }
/* ---------- 28. Acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
.cmb-reveal { opacity: 1; transform: none; }
.cmb-top { transition: none; }
}