/* =========================================================================
CÓPIA PARA A BLOG1 — criada em 21/09/2026, a partir da v923.
EXCLUSIVO DESTA PÁGINA. Editar este arquivo não pode mudar a v923 nem a
v919, que está duas cópias atrás.
========================================================================= */
/* =========================================================================
CÓPIA PARA A V923 — criada em 17/09/2026, a partir da v919.
EXCLUSIVO DESTA PÁGINA. Editar este arquivo não pode mudar a v919.
Atenção ao original: style.css, pitch.css e oferta.css NÃO têm versão no
nome e são dividas por v12, v13, v14, v15, v916, v917, v918 e v919. Era
justamente por isso que a v923 precisava das próprias — mexer lá mexeria
em oito páginas de uma vez.
========================================================================= */
/* ==========================================================================
PRODUTO 2 — cópia de identidade-v918.css, feita em 08/09/2026.
É ela que dá à v919 o hero da v14: tarja vermelha, linha de apoio em
texto vermelho (não o selo azul da v916) e manchete centralizada.
Veste APENAS a v919.html. Editar aqui não mexe na v918, e vice-versa.
Editar aqui NÃO afeta as páginas do produto 1, e editar as folhas originais
em assets/css/ NÃO afeta as do produto 2. As duas árvores seguem separadas
de propósito — é produto diferente.
Não há url() em nenhuma delas, então a mudança de pasta é segura.
========================================================================== */
/* ==========================================================================
STYLE-V3.CSS — identidade visual da versão 3
Carregado DEPOIS do style.css, em v3.html apenas. Camada de sobreposição,
não folha completa. NÃO carrega nada da V2: cantoneira, alinhamento à
esquerda e Anton no corpo são exclusivos de lá.
Referência visual: capa de tabloide alemão — barra de seções no topo,
linha de apoio em vermelho ANTES da manchete, manchete enorme e preta,
tudo centralizado, condensada e pesada.
ATENÇÃO à especificidade: o pitch.css entra DEPOIS deste arquivo (ele é
não-blocante). Para sobrepor algo do bloco de oferta é preciso seletor
mais forte, tipo .oferta .oferta__titulo.
ÍNDICE
[v3.1] Tipografia e cores
[v3.2] Cabeçalho e marca
[v3.3] Tarja da editoria
[v3.5] Linha de apoio e manchete
[v3.6] Rodapé
[v3.7] Responsivo
========================================================================== */
/* ------------------------------------------------- [v3.1] Tipografia --- */
:root{
--v3-vermelho:#D40E14;
--v3-tinta:#111111;
--v3-tinta-2:#4A4F55;
--v3-linha:#DFE2E6;
--v3-rodape:#1A1D24;
--sans:"Fira Sans","Helvetica Neue",Arial,system-ui,sans-serif;
--serif:"Fira Sans","Helvetica Neue",Arial,system-ui,sans-serif;
--v3-titulo:"Fira Sans Condensed","Fira Sans",Arial,sans-serif;
}
body{
background:#fff;
color:var(--v3-tinta);
font-family:var(--sans);
}
/* --------------------------------------------- [v3.2] Cabeçalho --- */
/* ESCURO desde 03/11/2026, a pedido: a mesma cor da tira que corre logo
abaixo (--v3-rodape). Cabeçalho e tira viram um bloco escuro só.
O RELEVO É O QUE SEPARA OS DOIS. Com a mesma cor nos dois, a divisa
sumiria; ela volta como aresta, não como mudança de cor: um fio claro
no fim do cabeçalho (a luz batendo na quina de cima) e uma sombra
caindo sobre a tira (o vão embaixo da quina). É o mesmo truque de
baixo-relevo de sempre, com duas linhas em vez de uma régua colorida.
O z-index existe para a sombra cair SOBRE a tira. Sem ele a tira é
pintada depois, por vir depois no documento, e come a sombra.
O TEXTO VIRA BRANCO junto — o --v3-tinta é quase preto e sumiria. A
logo não precisa de ajuste: é colorida, tem fundo transparente e
luminância média de 0,62, medida no canvas; ela lê melhor no escuro do
que lia no branco. */
.masthead{
position:relative;
z-index:2;
background:var(--v3-rodape);
color:#fff;
border-bottom:1px solid rgba(255,255,255,.09);
box-shadow:0 3px 9px rgba(0,0,0,.45);
}
/* O padding-inline repete o do .wrap. A folha base zera as laterais do
.masthead__top com o atalho "padding:14px 0", e sem isto a logo encosta
na borda da janela acima de 760px — abaixo disso uma regra de .wrap
dentro da media query salvava por acidente de ordem. Medido em
27/09/2026: logo em x=0 e manchete em x=31 numa tela de 1024. */
.masthead__top{
padding-block:10px;
padding-inline:clamp(16px,3vw,32px);
align-items:center;
}
.brand{ text-decoration:none; }
/* Logo em imagem.
O tamanho é comandado pela ALTURA; a largura acompanha sozinha, então
qualquer proporção de arquivo funciona sem distorcer.
max-width impede que um logo muito largo empurre os ícones para fora. */
/* Seletor precisa ser MAIS FORTE que o .brand img do style.css, que fixa
30x30 para o logo antigo. .brand img vale (0,1,1); .brand__logo sozinho
vale (0,1,0) e perderia sempre, em qualquer ordem de arquivo. */
.brand img.brand__logo{
display:block;
height:72px;
width:auto;
max-width:62vw;
}
.masthead__icones{
margin-left:auto;
display:flex;
align-items:center;
gap:18px;
}
.masthead__icone{ display:block; width:24px; height:24px; color:#fff; }
.masthead__icone svg{ width:100%; height:100%; display:block; }
/* ------------------------------------------ [v3.2b] Linha de editoria ---
03/11/2026. Mora DENTRO do .masthead, então herda o fundo escuro dele e
não repete cor nenhuma.
A CAIXA DA EDITORIA é um branco a 7%, e não um cinza cravado: assim ela
acompanha o fundo se o --v3-rodape mudar um dia, em vez de descolar.
O MESMO RECUO LATERAL do .masthead__top, pela mesma conta — a caixa tem
de começar na vertical da logo, senão a linha parece solta.
O FILETE VERMELHO é ::after posicionado no fim do item, e não um
border-bottom: o border acompanharia o padding e ficaria mais largo que
a palavra. Com left/right em 16px ele para exatamente onde o texto para.
ELE ENCOSTA NA DIVISA do cabeçalho de propósito: é o filete que diz qual
seção está aberta, e colado na quina ele lê como aba, não como sublinhado
solto no meio do nada. */
/* NA MESMA LINHA DA LOGO desde 03/11/2026. O recuo lateral saiu: quem
recua agora é o .masthead__top, e repetir aqui deslocaria a caixa.
O align-self:stretch faz a caixa e o item terem a altura da barra, que
é o que mantém o filete vermelho colado na divisa de baixo. */
.editoria{
display:flex;
align-self:stretch;
margin-left:clamp(12px,2.5vw,28px);
}
/* O VÃO É O ÚNICO ESPAÇO ENTRE OS DOIS desde 03/11/2026: sem a caixa, o
respiro lateral de cada um virou distância solta e saiu. Mexer aqui é
que aproxima ou afasta HEALTH de Discoveries. */
.editoria__linha{
display:flex;
align-items:stretch;
gap:9px;
}
/* SEM CAIXA desde 03/11/2026, a pedido: o fundo claro e o canto arredondado
saíram, e com eles o respiro lateral — ele só existia por causa da caixa.
Agora HEALTH é texto puro sobre o escuro do cabeçalho, como o item ao
lado; quem separa os dois é o vão do .editoria__linha. */
.editoria__marca{
display:flex;
align-items:center;
padding:7px 0;
font-family:var(--v3-titulo);
font-size:13px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
color:#fff;
}
.editoria__seta{ margin-left:5px; opacity:.6; }
.editoria__item{
position:relative;
display:flex;
align-items:center;
padding:7px 0;
font-family:var(--v3-titulo);
font-size:14px;
font-weight:700;
letter-spacing:.02em;
color:#fff;
}
/* Sem o respiro lateral, o filete nasce e morre exatamente onde a palavra
nasce e morre — era para isso que os 16px existiam. */
.editoria__item[aria-current="page"]::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:3px;
background:var(--v3-vermelho);
}
/* CELULAR: a caixa "HEALTH »" FICA, a pedido (03/11/2026).
Ela tinha sido escondida no mesmo dia por medo de não caber ao lado da
logo e do botão de perfil. Medido depois numa tela de 320px — a mais
estreita que ainda se vê —, cabe: a linha inteira dá 243px dos 320.
O que faz caber é só encolher fonte e respiro, não esconder nada.
O min-width:0 nos dois é o que impede o estouro em qualquer tela mais
apertada que isso: sem ele, item de flex NÃO encolhe abaixo do próprio
conteúdo e empurra o botão de perfil para fora da tela em vez de ceder.
Com ele, quem cede primeiro é o texto, e nada sai da janela. */
@media (max-width:560px){
.editoria{ margin-left:10px; min-width:0; }
.editoria__linha{ min-width:0; }
.editoria__linha{ gap:7px; }
.editoria__marca{ padding:6px 0; font-size:11.5px; letter-spacing:.05em; white-space:nowrap; }
.editoria__seta{ margin-left:3px; }
.editoria__item{ padding:6px 0; font-size:12.5px; white-space:nowrap; }
}
/* --------------------------------------- [v3.3] Tarja da editoria --- */
/* Faixa larga em vermelho com o nome da editoria, e abaixo uma tira mais
escura com texto correndo em laço. Substitui o menu e o breadcrumb. */
/* ESCURA desde 27/09/2026. Era rosa (#E10A85, o da logo).
O tom e o --v3-rodape (#1A1D24), que ja existe na folha, em vez de um
cinza novo cravado a olho: a paleta da pagina ganha um tom escuro so, e
nao dois quase iguais. (O --brand-dark do style-blog1.css NAO serve aqui
— e #082B43, azul-marinho.)
OS SEPARADORES VIRAM ROSA. Eram branco a 50%, que fazia sentido sobre
o rosa; sobre o escuro virariam cinza apagado. Em rosa eles seguram a
cor da marca na barra, que e o que a barra perdeu ao deixar de ser
rosa por inteiro. */
.tarja{ background:var(--v3-rodape); color:#fff; }
.tarja__titulo{
font-family:var(--v3-titulo);
font-weight:800;
font-size:clamp(26px,1rem + 2.6vw,40px);
letter-spacing:.06em;
text-transform:uppercase;
text-align:center;
padding:22px 16px; /* o respiro pedido */
line-height:1;
}
/* A camada escura saiu em 21/09/2026, junto com o título. Ela existia para
SEPARAR a tira do bloco largo que vinha acima; sem o título não há o que
separar, e o rgba(0,0,0,.22) só sujaria o rosa.
overflow:hidden é o que recorta o trilho que corre — esse fica. */
/* MAIS FINA, EM DOIS PASSOS no mesmo dia (03/11/2026): o respiro foi de
11px para 7 e depois para 5. Quem define a altura da tira é ele somado
à altura do texto — e nesta segunda rodada o texto encolheu junto. */
.tarja__faixa{
background:transparent;
overflow:hidden;
padding:5px 0;
}
.tarja__trilho{
display:flex;
align-items:center;
gap:26px;
width:max-content;
/* --laco-tempo, e não --tarja-tempo. OS NOMES TINHAM DIVERGIDO: o
duplicarTrilho() escreve --laco-passo e --laco-tempo desde que passou a
servir também ao carrossel de ingredientes, mas esta regra continuou
lendo os nomes antigos. Variável que não existe não dá erro em CSS —
cai calada no valor de reserva. Resultado: a tira rodou sempre nos 28s
fixos, e os três ajustes de velocidade de 03/11/2026 não mudaram nada
na tela. Corrigido em 03/11/2026. */
animation:deslizaTarja var(--laco-tempo, 28s) linear infinite;
}
/* PESO 500 DE VERDADE desde 03/11/2026. Antes era 600 pedido a uma fonte
que só tinha 700 e 800 carregados: o navegador usava o 700 e o ajuste
não chegava à tela. O 500 foi acrescentado ao da fonte no ,
então agora é peso desenhado, não aproximação.
11px desde a mesma data, a pedido: era 13. O espacejamento FICA em
.09em — texto pequeno em caixa alta sem respiro entre as letras embola,
e é esse espaço que mantém a tira legível a 11px. */
.tarja__item{
font-family:var(--v3-titulo);
font-size:11px;
font-weight:500;
letter-spacing:.09em;
text-transform:uppercase;
white-space:nowrap;
color:rgba(255,255,255,.95);
}
/* SEPARADORES EM VERMELHO desde 03/11/2026, a pedido. Eram o rosa #E10A85
da logo, que some no fundo escuro da tira. Usa o --v3-vermelho da paleta
e não um vermelho novo: é o mesmo da linha de apoio da manchete, então a
página continua com UM vermelho só.
O TEXTO DOS ITENS NÃO MUDA — continua branco. Só a bolinha. */
.tarja__sep{ color:var(--v3-vermelho); font-size:11px; }
/* O deslocamento de uma volta é UMA cópia do conteúdo mais o vão que a
separa da cópia seguinte — nunca "metade do trilho".
Por que não -50%: metade só fecha o laço quando existem exatamente duas
cópias. Em tela larga duas não bastam para cobrir a faixa, e o trilho
precisa de três, quatro, às vezes cinco. Aí metade deixa de coincidir
com uma volta e o fim da faixa aparece vazio. Era esse o buraco vermelho.
Quem mede a volta e conta quantas cópias cabem é o duplicarTrilho() na
seção [08], que escreve --laco-passo e --laco-tempo aqui. O tempo
acompanha a distância para a velocidade não mudar com o tamanho da tela.
Os valores de reserva valem só se o JS não rodar. */
@keyframes deslizaTarja{
from{ transform:translateX(0); }
to { transform:translateX(calc(var(--laco-passo, 50%) * -1)); }
}
@media (hover:hover) and (pointer:fine){
.tarja:hover .tarja__trilho{ animation-play-state:paused; }
}
@media (prefers-reduced-motion:reduce){
.tarja__trilho{ animation:none; }
}
/* --------------------------- [v3.5] Linha de apoio e manchete --- */
/* A ordem no v3.html já põe a linha de apoio primeiro. Aqui só o peso.
Ela é o "kicker" da capa: menor que a manchete.
ALINHADA À ESQUERDA desde 21/09/2026.
DE VOLTA AO VERMELHO em 03/11/2026, a pedido. Ela tinha virado rosa
#E10A85 (o da logo) em 21/09; agora volta ao --v3-vermelho, que é o
mesmo vermelho dos separadores da tira e do filete da editoria. A
página fica com UM vermelho só, e o rosa da logo volta a ser só da logo.
AGORA É VARIÁVEL, e não o hexadecimal cravado: o tom é o mesmo de outros
três pontos da página, e um só lugar para mudar é melhor que quatro. */
.standfirst{
font-family:var(--v3-titulo);
font-weight:700;
font-size:clamp(17px,1rem + .7vw,23px);
line-height:1.25;
color:var(--v3-vermelho);
text-align:left;
margin:18px 0 6px;
}
/* Manchete: o elemento mais pesado da página inteira, de propósito.
Alinhada à esquerda desde 21/09/2026, junto com a linha de apoio e o
subtítulo — os três agora começam na mesma margem.
CAIXA ALTA desde 03/11/2026, a pedido, e feita AQUI e não no HTML: o
texto no código continua em capitulação normal, então o leitor de tela
lê a frase em vez de soletrar letra por letra. Na tela o resultado é o
mesmo.
O ENTRELINHA E O ESPACEJAMENTO MUDARAM JUNTO. Maiúscula não tem perna
nem haste descendo, então 1.02 de entrelinha — que era justo com
minúsculas — abria um vão visível entre as linhas; 0.95 fecha. E o
-.02em de espacejamento, que amarra minúsculas, embola maiúscula: vai
a zero. */
.article__inner h1{
font-family:var(--v3-titulo);
font-weight:800;
font-size:clamp(26px,1rem + 3.2vw,48px);
line-height:.95;
letter-spacing:0;
text-transform:uppercase;
text-align:left;
color:var(--v3-tinta);
margin:0 0 20px;
}
/* --------------------------------------------------- [v3.6] Rodapé --- */
/* BRANCO desde 24/09/2026, a pedido. Era escuro (--v3-rodape, #1A1D24).
Este é o rodapé do ARTIGO, o que aparece na página da VSL — não confundir
com o .footer-section, que é o rodapé do bloco de oferta e continua
escuro.
PRECISA DA LINHA NO TOPO. O corpo da página também é branco; sem a borda
o rodapé não termina em lugar nenhum e os links ficam boiando no fim do
texto. A variável --v3-rodape continua declarada, para a volta atrás.
TODAS as cores de texto são redeclaradas aqui, e não só o fundo. O
style-blog1.css pinta este mesmo rodapé em branco sobre escuro; como ele
carrega ANTES, basta repetir as propriedades com a mesma especificidade.
Esquecer uma deixaria texto branco sobre branco — invisível, e o tipo de
defeito que não aparece em print nenhum. */
.site-footer{
background:#fff;
color:var(--v3-tinta-2);
border-top:1px solid var(--v3-linha);
}
.site-footer a{ color:var(--v3-tinta); }
.site-footer .disclaimer{ color:rgba(74,79,85,.75); }
/* ----------------------------------------------- [v3.7] Responsivo --- */
@media (max-width:760px){
.brand img.brand__logo{ height:56px; max-width:58vw; }
.masthead__icones{ gap:14px; }
.masthead__icone{ width:22px; height:22px; }
.tarja__titulo{ padding:17px 16px; }
.standfirst{ margin-top:14px; }
}
/* --------------------------------------------------------- faixa de imprensa
Acrescentada em 21/09/2026, junto com a faixa francesa abaixo da VSL.
Regra recortada da identidade-v921.css, onde já estava conferida. */
.imprensa{
margin: 14px auto 0;
text-align: center;
}
.imprensa__img{
display: block;
width: 100%;
max-width: 620px;
height: auto;
/* margin-inline:auto, e não só o text-align do pai: a folha base declara
img{display:block}, e elemento de bloco não obedece a text-align. */
margin-inline: auto;
}
@media (max-width: 560px){
.imprensa{ margin-top: 10px; }
}
/* ------------------------------------------- [v3.2b] Logo à esquerda ---
Trocada em 21/09/2026: saiu a logo do portal, entrou o traço rosa.
ALINHADA À ESQUERDA em 24/09/2026, a pedido. Entre 21 e 24/09 ela ficou
centralizada; o que segue explica o que foi desfeito, porque não é óbvio.
A centralização precisava tirar o menu do fluxo. O .masthead__top é um
flex com .brand à esquerda e .masthead__icones empurrado por
margin-left:auto; só justify-content:center não bastaria, porque
centraria o PAR (logo + menu) e a logo acabaria deslocada para a
esquerda pela largura do menu. Por isso o menu virava absoluto e a logo
ganhava margin-inline:auto.
Agora nada disso é preciso: à esquerda é o comportamento NATURAL desse
flex. O menu volta ao fluxo com margin-left:auto e vai sozinho para a
direita. Se um dia a logo voltar ao centro, é esse par de regras
(posição absoluta no menu + margin-inline:auto na marca) que retorna.
align-items:flex-start é necessário à parte: o .brand é uma COLUNA (ver
[v3.2c]), e sem isso a logo e o nome se alinhariam pelo padrão do flex
em vez de começarem os dois na mesma margem.
O menu continua decorativo (pointer-events:none, aria-hidden no HTML). */
.masthead__top{ position:relative; }
.brand{
margin-inline:0;
align-items:flex-start;
}
.masthead__icones{
position:static;
transform:none;
margin-left:auto; /* volta a empurrar o menu para a direita */
}
/* ------------------------------------------- [v3.2c] Nome da marca ---
"Équilibre Femme" sob a logo, acrescentado em 21/09/2026.
POR QUE CORMORANT GARAMOND: a logo não tem letras — é um traço único,
com contraste forte entre grosso e fino e afinamento nas curvas. Não há
tipografia na arte para copiar, então o que se casa é o caráter do
traço. A Cormorant é serifada de alto contraste, com o mesmo
afinamento; uma sans geométrica brigaria com a curva.
A COR sai da paleta do próprio PNG: #E10A85 é o rosa dominante do
traço. Não é o --v3-vermelho da tarja, que é outro vermelho (#D40E14) e
ficaria perto o bastante para parecer erro de impressão.
O NOME ESCRITO SAIU em 24/09/2026, a pedido — ficou só a logo. As
regras de .brand__nome foram removidas junto, e com elas a coluna: sem
um segundo item embaixo, o .brand volta a ser a linha que o style.css
já define. A nota acima sobre a Cormorant e sobre o rosa #E10A85 fica
registrada para o dia em que o nome voltar.
A ALTURA caiu de 48px para 40px em 15/10/2026 (e de 30 para 26 no
celular), a pedido. Ela nasceu em 48 para o nome da marca caber sem
esticar o cabeçalho; o nome saiu em 09/10 e a folga ficou sobrando.
Aos 72px originais não volta — já tinha sido reduzida em 21/09. */
.brand img.brand__logo{ height:40px; } /* 40 desde 03/11/2026: era 48, e
encolheu quando a linha de editoria passou a dividir a barra com ela. */
/* CELULAR: logo menor desde 27/09/2026, a pedido.
O min-height segura a altura do cabecalho, que ate aqui era so a soma
do conteudo com o respiro. Sem ele, encolher o logo encolheria a barra
inteira — e o pedido era manter o espaco.
60px E A ALTURA TOTAL, e nao a do conteudo: o box-sizing da pagina e
border-box, entao o padding de 10+10 ja esta DENTRO desse numero.
Cravar 40 aqui, como se o padding somasse por fora, deixava a barra em
54px — foi o que aconteceu na primeira tentativa. */
@media (max-width:560px){
/* 26px desde 15/10/2026, junto com a reducao no desktop. O min-height
abaixo e que segura a barra: sem ele, encolher o logo encolheria o
cabecalho inteiro, e o pedido era so o logo. */
.brand img.brand__logo{ height:28px; } /* 28 desde 03/11/2026: era 32 */
.masthead__top{ min-height:60px; }
}
/* --------------------------------------- [v3.6b] Marca no rodapé ---
A logo no alto do .site-footer — o rodapé do ARTIGO.
(O rodapé do bloco de venda é outro: .footer-section, em gelatin-blog1.css.)
VOLTOU EM 24/09/2026, depois de sair na mesma manhã. Voltou diferente,
e a diferença importa:
AGORA É , NÃO MAIS MÁSCARA. A máscara existia porque o rodapé era
escuro e a arte rosa precisava virar creme — mask pinta a silhueta com
uma cor exata, coisa que filter não faz. Com o rodapé branco não há o que
recolorir: a arte entra na cor dela, e é o jeito certo. Como bônus,
trocar o arquivo não exige mais conferir contraste nenhum.
SEM O NOME ESCRITO ao lado: ele saiu do cabeçalho a pedido, e repeti-lo
só aqui embaixo deixaria a página falando dois idiomas visuais.
Por isso o alt está PREENCHIDO — a imagem é a única marca do rodapé. */
.rodape-marca{
display:flex;
align-items:center;
margin-bottom:18px;
}
/* 92px desde 15/10/2026, a pedido: era 120. O .footer-logo--marca do bloco
de venda acompanha — os dois rodapes aparecem na mesma rolagem. */
.rodape-marca__logo{
display:block;
width:92px;
height:auto;
flex-shrink:0;
}
/* O copyright acompanha, um pouco mais apagado que os links. */
.site-footer p{ color:var(--v3-tinta-2); }
@media (max-width:560px){
.rodape-marca{ margin-bottom:14px; }
.rodape-marca__logo{ width:76px; }
}
/* ------------------------------------------ [v3.2d] Ícone de perfil ---
Botão real no cabeçalho, ao lado do hambúrguer decorativo.
O pointer-events:none saiu do .masthead__icones e passou para o
.masthead__icone. Se ficasse no contêiner, o clique no perfil não
chegaria ao botão — e o defeito seria mudo: o cursor nem viraria mãozinha.
A roda e o ícone convivem no markup e trocam por classe. Assim o botão
não muda de tamanho na troca, e nada é criado no clique. */
.masthead__icone{ pointer-events:none; }
.masthead__perfil{
position:relative;
display:grid;
place-items:center;
width:38px;
height:38px;
padding:0;
border:0;
border-radius:50%;
background:transparent;
color:#fff;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
transition:background .18s ease;
}
.masthead__perfil:hover{ background:rgba(17,17,17,.06); }
.masthead__perfil:focus-visible{ outline:2px solid #E10A85; outline-offset:2px; }
.masthead__perfil:disabled{ cursor:default; }
.masthead__perfil__icone{ width:24px; height:24px; display:block; }
/* A roda: um anel com um quarto colorido, girando. Nasce escondida. */
.masthead__perfil__roda{
display:none;
width:20px;
height:20px;
border:2.5px solid rgba(17,17,17,.18);
border-top-color:#E10A85;
border-radius:50%;
animation:giraPerfil .7s linear infinite;
}
@keyframes giraPerfil{ to{ transform:rotate(360deg); } }
/* A troca. */
.masthead__perfil.esta-carregando .masthead__perfil__icone{ display:none; }
.masthead__perfil.esta-carregando .masthead__perfil__roda{ display:block; }
@media (max-width:560px){
.masthead__perfil{ width:34px; height:34px; }
.masthead__perfil__icone{ width:22px; height:22px; }
.masthead__perfil__roda{ width:18px; height:18px; }
}
/* ------------------------------------------- [v3.5b] Muito comentado ---
Subtítulo e texto abaixo da faixa de imprensa.
Alinhado à ESQUERDA como a manchete e o subtítulo do topo — os quatro
blocos de texto da matéria começam na mesma margem.
O título usa a fonte de manchete (--v3-titulo) num corpo bem menor: é
um respiro entre o vídeo e os comentários, não um segundo cabeçalho. */
.comentado{
margin:26px 0 0;
}
.comentado__titulo{
font-family:var(--v3-titulo);
font-weight:800;
font-size:clamp(20px,1rem + 1vw,26px);
line-height:1.15;
letter-spacing:-.01em;
color:#E10A85;
margin:0 0 8px;
}
.comentado__texto{
font-size:16px;
line-height:1.6;
color:var(--v3-tinta-2);
margin:0;
max-width:62ch;
}
@media (max-width:560px){
.comentado{ margin-top:20px; }
.comentado__texto{ font-size:15px; }
}
/* ------------------------------------ [v3.8] ABERTURA DA VSL ---
Os tres blocos entre o subtitulo e o player, de 27/09/2026:
.abertura (editorial), .promessas (quadro) e .aviso-tempo.
TIPOGRAFIA DO ARTIGO, nao do bloco de venda: tudo aqui ainda e a
materia. Fira Sans no corpo, --v3-titulo na pergunta, alinhado a
esquerda como a manchete e o subtitulo logo acima.
O QUADRO E DISCRETO de proposito, como foi pedido: fundo levissimo e
uma barra rosa fina a esquerda, sem borda fechada. Caixa com borda
inteira aqui leria como bloco de oferta, e este trecho ainda e
editorial.
OS MARCADORES SAO DESENHADOS com ::before, e list-style sai. O ponto
padrao do navegador fica fora do fluxo do texto e nao acompanha a cor
da marca. */
.abertura{ margin: 22px 0 0; }
.abertura__h{
font-family:var(--v3-titulo);
font-weight:800;
font-size:clamp(19px,1rem + 1vw,24px);
line-height:1.15;
letter-spacing:-.01em;
color:var(--v3-tinta);
margin:0 0 10px;
}
.abertura__p{
font-family:var(--sans);
font-size:16px;
line-height:1.62;
color:var(--v3-tinta);
margin:0 0 12px;
}
.abertura__p:last-child{ margin-bottom:0; }
/* SEM FUNDO desde 27/09/2026, a pedido. Ficam so a barra rosa a
esquerda e o recuo — e o suficiente para separar o quadro do texto
corrido, e mais discreto, que era a intencao do bloco desde o comeco.
O border-radius saiu junto: sem fundo nao ha canto para arredondar. */
.promessas{
margin:20px 0 0;
padding:2px 0 2px 16px;
border-left:3px solid #E10A85;
}
.promessas__h{
font-family:var(--sans);
font-weight:700;
font-size:15px;
line-height:1.4;
color:var(--v3-tinta);
margin:0 0 8px;
}
.promessas__lista{
list-style:none;
margin:0;
padding:0;
}
.promessas__lista li{
position:relative;
padding-left:18px;
font-family:var(--sans);
font-size:15px;
line-height:1.5;
color:var(--v3-tinta-2);
margin-bottom:6px;
}
.promessas__lista li:last-child{ margin-bottom:0; }
.promessas__lista li::before{
content:"";
position:absolute;
left:2px;
top:.58em;
width:6px;
height:6px;
border-radius:50%;
background:#E10A85;
}
/* O margin-bottom pequeno existia porque este bloco colava no player que
vinha logo ABAIXO dele. Desde 09/10/2026 ele e o ULTIMO do grupo, e o
player esta ACIMA: com 10px embaixo o texto grudava no que vem depois. */
.aviso-tempo{
display:flex;
align-items:flex-start;
gap:7px;
margin:18px 0;
font-family:var(--sans);
font-size:14px;
line-height:1.5;
color:var(--v3-tinta-2);
}
.aviso-tempo__ico{ flex-shrink:0; font-size:15px; line-height:1.45; }
@media (max-width:560px){
.abertura__p{ font-size:15px; }
.promessas{ padding-left:13px; }
.promessas__h,
.promessas__lista li{ font-size:14px; }
.aviso-tempo{ font-size:13px; }
}
/* ----------------------------------- [v3.10] BORDA DO PLAYER ---
09/10/2026, a pedido: moldura com degrade nas cores do logo.
AS CORES SAIRAM DA ARTE, nao de um palpite. Amostrei o
logo-blog1.webp no canvas, isolei os pixels SATURADOS (os pontinhos —
o resto virou #F2F2F2 no tema escuro) e agrupei por posicao. Deram
quatro, e o degrade segue a ordem em que aparecem da esquerda para a
direita:
#FE5241 coral x~948 (4.688 px)
#FEAB45 laranja x~1074 (5.870 px)
#44ACCD azul x~1210 (3.393 px)
#EB0031 vermelho x~1471 (6.057 px)
DOIS FUNDOS NUMA PROPRIEDADE SO. A borda e transparente e o degrade
e pintado no border-box, com o fundo da pagina por cima no padding-box.
E o jeito de ter borda em degrade COM canto arredondado: border-image
nao respeita border-radius, e um ::before pseudo-moldura precisaria de
position e z-index, que mexeriam no empilhamento do player.
O overflow VIRA hidden. A regra base deixava visible de proposito,
porque o player se dimensiona sozinho; mas sem clipar, os cantos
quadrados do video apareceriam por cima dos cantos arredondados da
moldura. Conferido depois que o player montou: nada dele e cortado.
O raio interno e 3px menor que o externo — a espessura da borda. Sem
isso sobra uma meia-lua do fundo entre o video e a moldura. */
/* VERMELHA DESDE 03/11/2026, a pedido. Era um gradiente de quatro cores
(laranja, âmbar, azul e carmim) herdado da identidade antiga.
VOLTOU A SER border-color SIMPLES. O gradiente exigia o truque das duas
camadas — padding-box branco por dentro, border-box colorido na borda,
com a borda transparente para deixar a de baixo aparecer. Para uma cor
chapada isso é complicação sem ganho: um border de 3px resolve, e o
miolo deixa de depender de a cor do fundo da página ser branca.
É o --v3-vermelho, o mesmo da linha de apoio logo acima, das bolinhas
da tira e do filete da editoria. */
.vsl__frame{
border:3px solid var(--v3-vermelho);
border-radius:16px;
overflow:hidden;
}
.vsl__frame vturb-smartplayer,
.vsl__frame iframe,
.vsl__frame video{ border-radius:13px; }
/* --------------------------- [v3.11] FAIXA DE NAVEGACAO ---
09/10/2026: a tira de texto em laco saiu, e o caminho de navegacao
passou a encostar direto no cabecalho.
SEM A TIRA NO MEIO, os dois viravam um bloco so: logo e caminho na
mesma cor de fundo, sem nada dizendo onde um termina. A tira fazia esse
trabalho por acidente, por ser de outra cor.
A DIVISAO AGORA E POR LINHA, e nao por cor. O cabecalho ja fechava
embaixo com 1px (regra do [v3.9]); o caminho ganha a dele, e os dois
tracos transformam a navegacao numa faixa com comeco e fim.
O respiro cresce junto: no claro o caminho era um texto espremido entre
duas coisas coloridas, e 7px bastavam. Virando faixa, ele precisa de ar
para parecer faixa — 10px em cima e embaixo. */
/* MENOR DESDE 03/11/2026, a pedido, junto com a tira que corre: o texto
foi de 11px para 9,5 e o respiro de 10px para 6.
O TAMANHO VEM DA style-blog1.css e é redeclarado AQUI de propósito. Lá
o .crumbs serve às outras páginas que dividem aquela folha; mexer lá
mexeria em todas. Esta folha é só desta página.
9,5px parece pouco e não é: o caminho de navegação é orientação, não
leitura — ele diz onde a pessoa está e sai do caminho. Quem tem de
pesar ali é a manchete, dois blocos abaixo.
--v3-linha (#DFE2E6) desde 15/10/2026: o #262626 do tema escuro, sobre
branco, é quase preto e gritaria mais que o próprio cabeçalho. */
.crumbs{
border-bottom:1px solid var(--v3-linha);
padding-block:6px;
font-size:9.5px;
}
/* O separador "›" encolhe junto e ganha um pouco mais de vão: em corpo
pequeno ele some colado nas palavras. */
.crumbs span{ margin:0 5px; }