/* Ajustes da home institucional sobre o design system, pedidos pelo dono em 10/08/2026.
Mora aqui, e não no `system.css`, porque aquele arquivo é ativo espelhado da origem
(scripts/sync-home.mjs) — editá-lo seria desfeito no próximo sync. Injetado só na home;
as páginas do funil não carregam este arquivo. */
/* --- Hero: a linha verde é 20% maior que a primeira ----------------------------------------
As duas linhas vivem no mesmo h1 e só a segunda tem elemento próprio (.ctrl-signal-line).
O h1 define a escala e a linha verde sobe a partir dela com `em`, então a proporção vale
igual em qualquer largura, sem duplicar a escala responsiva.
A proporção era 200% quando a segunda linha era "o poder da respiração.", de 22 caracteres.
A copy de 31/08 trocou essa linha por "Em nenhuma delas usou o pulmão inteiro.", 38
caracteres, e a 2em quebrava em quatro linhas, ocupando o hero inteiro. A 1.2em cabe em duas
linhas na coluna de 710px do hero e continua sendo o elemento dominante da página.
Desde 01/09/2026 os dois valores de `font-size` do h1 saem × 0,7 — ver o bloco "Escala do
hero", adiante. Este partiu de clamp(1.7rem, 3.8vw, 4.2rem). */
.ctrl-hero h1 {
/* Curva de cima. Ela precisa **encontrar** a de celular em 560px, senão a página troca de
escala num único pixel de viewport: a versão anterior — clamp(1.79rem, 3.99vw, 4.41rem) —
media 28,64px em 561px contra os 57,12px que a faixa de celular entrega em 560px. Queda de
50% que apagava a hierarquia na faixa de 561 a 900px: iPad em retrato, celular deitado,
janela dividida no desktop. Traçada por dois pontos, os dois herdados: 57,12px em 560px,
onde a curva de celular termina, e o teto de 4,41rem em 1768px, onde a antiga terminava. */
font-size: clamp(3.57rem, calc(3.18rem + 1.113vw), 4.41rem);
/* Bold, como o hero do `motor-lead` — o sistema entrega este h1 em 400, e no verde sobre
fundo escuro o traço normal ficava leve demais. Pedido do dono em 31/08/2026. A linha verde
herda daqui: as duas linhas vivem no mesmo h1. */
font-weight: 700;
}
.ctrl-hero h1 .ctrl-signal-line {
font-size: 1.2em;
line-height: 1;
/* Respiro entre as duas linhas: o `line-height` apertado do sistema encosta uma na outra.
Com o título 30% menor (01/09/2026) as duas linhas do bloco verde ficaram grudadas: o
`line-height` foi de 0.9 para 1 e a margem, de 0.3em para 0.44em. Em `em`, então o respiro
acompanha a escala do título em qualquer largura. */
margin-top: 0.44em;
}
/* No celular a linha verde estourava a tela, então a escala cai aqui. O valor antigo
(clamp de 7.6vw) foi calculado para a linha verde a 2em; com ela a 1.2em o título ficava
pequeno demais num aparelho de 360px. A escala sobe na mesma medida em que a proporção
desceu. Este valor também saiu × 0,7, de clamp(1.6rem, 11vw, 3.4rem).
A copy de 01/09/2026 trocou a primeira linha por "23.000 respirações por dia.", e a maior
palavra passou a ser "RESPIRAÇÕES" — 11 caracteres, contra os 8 de "RESPIROU". Medido num
aparelho de 360px: a palavra ocupa 143px dos 332px da coluna, a linha inteira cabe numa só
e a página não ganha rolagem horizontal. */
@media (width <= 560px) {
.ctrl-hero h1 {
font-size: clamp(1.68rem, 11.55vw, 3.57rem);
}
}
/* --- Escala do hero: 30% menor (01/09/2026, pedido do dono) ---------------------------------
O hero ocupava a tela inteira (min-height:100svh) com o título em 4,2rem no topo da escala:
no notebook não sobrava nenhuma pista de que havia página abaixo. A altura, os paddings do
bloco e a tipografia de display caem para 0,7 do valor do sistema (os dois font-size do h1,
logo acima, já saíram multiplicados por 0,7).
O corpo do texto fica fora da conta de propósito: `.ctrl-hero__copy` a 0,7 daria 0,73rem
(~12px), abaixo do legível. A hierarquia continua de pé porque o h1, mesmo reduzido, é 2,3×
o parágrafo.
Os respiros ENTRE os blocos também saíram da conta, no mesmo dia: a primeira versão levou-os
a 0,7 junto com o resto e o dono devolveu "está sufocante" — com a tipografia menor, a mesma
distância que servia ao título grande vira aperto. Eles subiram acima do valor do sistema,
não voltaram a ele: eyebrow 20 → 26px, h1 28 → 38px, parágrafo 34 → 42px. A linha de prova
fica nos 52px do bloco adiante, que é o valor original. */
.ctrl-hero {
min-height: 70svh;
}
.ctrl-hero__content {
padding: 140px 0 77px;
}
/* A coluna do sistema tem 710px. Com o título 50% maior (01/09/2026) a primeira linha mede
750px no topo da escala e quebrava acima de ~1700px de viewport, deixando "DIA." órfão numa
linha só sua. 790px dão a folga e param bem antes do medidor, que começa a 1022px do início
da coluna.
**A faixa é obrigatória.** Até 01/09/2026 esta largura morava no escopo raiz, e ali ela não
corrigia o desktop: ela atropelava as outras duas faixas do sistema, que têm a mesma
especificidade (0,1,0) e perdem por ordem de arquivo — o 'home.css' é o último do
, e media query não soma especificidade. O sistema declara três larguras:
base width: min(710px, 58vw)
@media (width <= 1100px) width: min(700px, 70vw)
@media (width <= 820px) width: 100%
Com o override solto, as duas de baixo nunca valiam: num aparelho de 375px o título, o
parágrafo e o botão ficavam confinados a 58vw — 218px —, com 42% da tela vazia ao lado, e o
parágrafo do hero caía para 24 caracteres por linha a 320px. Fechada na faixa acima de
1100px, a regra resolve o que foi pedida para resolver e devolve o celular ao sistema. */
@media (width > 1100px) {
.ctrl-hero__content {
width: min(790px, 58vw);
}
}
.ctrl-hero__content .ctrl-eyebrow {
margin-bottom: 26px;
}
.ctrl-hero h1 {
margin-bottom: 38px;
}
.ctrl-hero__copy {
margin-bottom: 42px;
}
/* Ancorado no rodapé do hero, que subiu junto. */
.ctrl-telemetry {
bottom: 64px;
}
/* O sistema abre o topo para 128px abaixo de 820px; aqui também cai 30%. O padding de baixo
nesta faixa é o do bloco de 1100px, logo adiante. */
@media (width <= 820px) {
.ctrl-hero__content {
padding-top: 122px;
}
}
/* --- Respiro entre o botão e a linha "Gratuito. Acesso imediato." ---------------------------
Precisa do `.ctrl-page` na frente: o sistema zera `margin-top` de todo `p` dentro de
`.ctrl-page`, e essa regra tem especificidade maior que a classe sozinha — é por isso que o
próprio `margin:28px 0 0` do design system nunca valeu aqui. */
.ctrl-page .ctrl-hero__proof {
margin-top: 52px;
}
/* --- O medidor aparece no celular, embaixo da linha de prova ------------------------------- */
/* O sistema o esconde abaixo de 1100px porque ele é posicionado sobre o hero. Aqui ele sai do
posicionamento absoluto e entra no fluxo, depois do conteúdo — que termina justamente na
linha "Gratuito. Acesso imediato.". */
@media (width <= 1100px) {
.ctrl-telemetry {
display: block;
position: static;
width: min(100% - 28px, 420px);
margin: 0 auto 50px;
}
.ctrl-hero__content {
padding-bottom: 28px;
}
}
/* --- Seção "O que entra na inscrição" (01/09/2026, pedido do dono) ---------------------------
Reaproveita `.ctrl-facts`, a lista de cards de "Quem conduz": o sistema já entrega ali índice
em mono, título em caixa alta e parágrafo em cinza — exatamente o desenho pedido. A classe
`.ctrl-deliverables` entra só para o que muda, e não toca na lista do "Quem conduz".
Mobile-first porque 90% do tráfego é celular: uma coluna, respiro maior entre os cards do que
os 12px do sistema e entrelinha de 1.6 no parágrafo. As duas colunas só entram acima de
820px, o mesmo ponto em que o sistema vira o resto da página para o layout de desktop. */
.ctrl-deliverables {
gap: 18px;
}
.ctrl-deliverables li {
padding: 26px 24px 28px;
}
/* Verde neon, e não o ciano do `.ctrl-facts`: aqui o índice é a numeração da entrega, não a
marcação discreta de um fato da biografia. */
.ctrl-deliverables .ctrl-facts__index {
color: var(--ctrl-lime);
}
.ctrl-page .ctrl-deliverables strong {
line-height: 1.2;
}
.ctrl-page .ctrl-deliverables p {
line-height: 1.6;
}
@media (width > 820px) {
.ctrl-deliverables {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
/* --- Títulos das seções ---------------------------------------------------------------------
"Ninguém respira de forma completa de primeira. Nem eu respirei.", "Uma zona por aula. A quarta
soma tudo." e "Não nasceu em retiro. Nasceu sob pressão." dividem o mesmo seletor.
Começaram em 65% da escala do sistema. Em 01/09 caíram mais 18% (× 0,53 do original): com a
copy nova o título do método tem 63 caracteres — contra 38 e 41 dos outros dois — e no
desktop ocupava quatro linhas, tomando a coluna inteira e esmagando o corpo de texto ao lado.
Baixar só ele desalinharia os três, então a escala desceu para todos. */
.ctrl-section h2 {
/* Mesmo encontro em 560px do h1 do hero, pelo mesmo motivo: a curva anterior —
clamp(1.25rem, 2.94vw, 2.98rem) — caía de 34,08px para 20,00px entre 560 e 561px, e nessa
faixa o título de seção ficava em 1,26x o parágrafo, que é hierarquia nenhuma. Dois pontos:
34,08px em 560px e o teto de 2,98rem em 1622px, os dois herdados da versão antiga. */
font-size: clamp(2.13rem, calc(1.68rem + 1.281vw), 2.98rem);
/* Bold, na mesma decisão do h1 do hero. Cobre também o título do fechamento: aquela seção é
`class="ctrl-section ctrl-final"`, então só o `font-size` precisa da regra própria abaixo. */
font-weight: 700;
}
@media (width <= 560px) {
.ctrl-section h2 {
font-size: clamp(1.28rem, 7.5vw, 2.13rem);
}
}
/* --- A palavra marcada dentro de um título --------------------------------------------------
"completa" recebe tarja verde porque é a palavra que carrega a tese da seção: o problema não
é respirar, é respirar inteiro. O `mark` do navegador vem com fundo amarelo e texto preto —
ambos são substituídos aqui.
O `box-decoration-break` é o que impede a tarja de ficar com cantos abertos se a palavra cair
na quebra de linha: sem ele, cada pedaço recebe só metade do padding. */
.ctrl-mark {
padding: 0 0.16em;
color: #05070a;
box-decoration-break: clone;
/* A tarja é pintada como faixa de fundo, e não como fundo da caixa, porque a caixa é grande
demais. Num elemento em linha o fundo cobre a content box, cuja altura vem das métricas da
fonte (~1,14em) e **não** obedece ao line-height. Como os três títulos que podem conter a
tarja usam entrelinha menor que 1 (hero h1 0,83; fechamento 0,84; seção 0,94), o fundo
sobrava para fora da linha e cobria a de baixo: medido em 375px no fechamento, fonte de
28,16px, caixa de linha de 23,65px e tarja de 35,38px — 11,7px invadindo a linha seguinte,
o que cortava o acento de TAMBÉM sob a tarja de SABER USAR.
Com background-size em em, a altura da faixa passa a ser nossa e não da fonte. 0,92em
começando a 0,12em do topo da content box cobre da ponta do acento em caixa alta até abaixo
da linha de base, e cabe na caixa de linha nas três entrelinhas. Continua em linha —
inline-block resolveria a altura mas impediria a quebra, e as duas expressões marcadas têm
duas palavras cada.
Perdeu o border-radius de 3px junto: ele arredondava a caixa, não a faixa. */
background-color: transparent;
background-image: linear-gradient(var(--ctrl-lime, #b7ff3c), var(--ctrl-lime, #b7ff3c));
background-repeat: no-repeat;
background-size: 100% 0.92em;
background-position: 0 0.12em;
}
/* O título do fechamento, 45% menor que o do sistema (× 0,55) no piso e na taxa de crescimento.
O teto, porém, desceu de 4.95rem para 3.8rem em 01/09. O texto tem 64 caracteres em caixa
alta e o bloco é limitado a 1080px: a 79px, que é onde o `4.4vw` travava numa tela de 1867px,
ele mede 2507px e quebrava em três linhas, enquanto no celular já vinha em duas. A 3.8rem
mede 1900px, ou seja, 950px por linha — cabe em duas com folga, e o `text-wrap: balance` do
sistema divide as duas de forma equilibrada. */
.ctrl-final h2 {
/* Este título não tinha degrau — mas passa a ter se ficar parado enquanto os outros dois
sobem: a 561px ele mede 28,16px e o h2 de seção agora mede 34,07px, ou seja, o fechamento
da página ficaria menor que os títulos de seção. Sobe junto, mantendo-se ~15% acima deles,
e o teto de 3,8rem continua sendo alcançado em 1382px, como antes. */
font-size: clamp(2.44rem, calc(1.51rem + 2.652vw), 3.8rem);
}
/* A faixa de celular deste título nasce aqui: ele nunca teve uma, porque a curva única bastava
enquanto o piso era baixo. Com o piso em 2,44rem, sem esta faixa o celular saltaria de 28,16px
para 39,04px. Encontra a curva de cima em 560px, e o piso de 1,76rem preserva o tamanho de
hoje nos aparelhos estreitos (vale até 404px). Precisa vir depois do bloco de celular do h2
de seção, acima: as duas regras têm a mesma especificidade e quem decide é a ordem. */
@media (width <= 560px) {
.ctrl-final h2 {
font-size: clamp(1.76rem, 6.97vw, 2.44rem);
}
}
/* --- Respiro entre título de seção e o texto que vem abaixo ---------------------------------
O sistema zera a margem de todo `p` dentro de `.ctrl-page` (mesma regra citada no bloco do
`.ctrl-hero__proof`), e o `h2` não tem margem própria: o parágrafo encostava na última linha
do título. Ficava disfarçado enquanto os títulos eram menores e de uma linha só; com a copy
de 31/08, que traz títulos de duas e três linhas, virou emenda. Precisa do `.ctrl-page` na
frente para vencer a especificidade daquela regra. */
.ctrl-page .ctrl-section h2 {
margin-bottom: 26px;
}
/* --- A tese centralizada no celular --------------------------------------------------------
Acima de 820px ela divide a faixa com o código vertical, à direita, e alinhar ao centro
descolaria o texto dele. No celular o código some e a frase fica sozinha na faixa. */
@media (width <= 820px) {
.ctrl-thesis__grid {
justify-items: center;
text-align: center;
}
}
/* --- As barras do medidor desenham a capacidade, não uma régua ----------------------------- */
/* Abdômen inteiro, costelas 25% menores, tórax 50% menor que as costelas — e as três centradas
na própria coluna, para a leitura ficar piramidal de baixo para cima. */
.ctrl-zone i {
justify-self: center;
width: 100%;
}
.ctrl-zone--ribs i {
width: 75%;
}
.ctrl-zone--chest i {
width: 37.5%;
}
/* Cada zona ganha a cor da sua aula — a mesma do acento dos cards: abdômen ciano (aula 01),
costelas verde (02) e tórax rosa (03). A animação do sistema pinta a barra com
`var(--ctrl-lime)`, e a variável resolve no próprio elemento: redefini-la aqui troca a cor
sem duplicar os três `@keyframes`. Vale só dentro da zona, não vaza para a página. */
.ctrl-zone--belly {
--ctrl-lime: #00d9ff;
}
.ctrl-zone--chest {
--ctrl-lime: #ff168c;
}
/* --- Medidor de respiração sobre a foto da seção do método ---------------------------------
Ciclo de 12s: 4s enchendo, 2s segurando, 6s soltando. As três zonas acendem de baixo para
cima na inspiração, na ordem que o texto ao lado defende, e apagam de cima para baixo na
expiração — cada uma na cor da sua aula: abdômen ciano (01), costelas verde (02), tórax rosa
(03).
Os `@keyframes` vivem aqui, e não são os `st-breath-*` do `styles-DTo07YCd.css`. Até 01/09
esta seção reaproveitava aqueles, mas o dono pediu a retenção em 2s e lá ela é de 1s (laço de
11s), no guia "Respire junto" do `conteudo4respira`. Mudar o arquivo compartilhado alteraria
o exercício guiado junto, então os tempos daqui passaram a ser próprios. **As duas versões
agora podem divergir** — ao mexer numa, conferir a outra.
Outra diferença deliberada: lá o ritmo só começa no clique em "Começar o ritmo"; aqui roda
sozinho, porque é ilustração da tese da seção, não exercício para acompanhar. */
@keyframes ctrl-breath-belly {
0% { fill: transparent; stroke: var(--st-color-border-strong); }
11.1%, 83.3% { fill: var(--st-color-brand-orange); stroke: var(--st-color-brand-orange); }
100% { fill: transparent; stroke: var(--st-color-border-strong); }
}
@keyframes ctrl-breath-ribs {
0%, 11.1% { fill: transparent; stroke: var(--st-color-border-strong); }
22.2%, 66.7% { fill: var(--st-color-brand-orange); stroke: var(--st-color-brand-orange); }
83.3%, 100% { fill: transparent; stroke: var(--st-color-border-strong); }
}
@keyframes ctrl-breath-chest {
0%, 22.2% { fill: transparent; stroke: var(--st-color-border-strong); }
33.3%, 50% { fill: var(--st-color-brand-orange); stroke: var(--st-color-brand-orange); }
66.7%, 100% { fill: transparent; stroke: var(--st-color-border-strong); }
}
/* 0 → 4s: "Inspire · 4s". */
@keyframes ctrl-breath-cue-in {
0%, 31% { opacity: 1; }
33.3%, 100% { opacity: 0; }
}
/* 4 → 6s: "Segure · 2s". */
@keyframes ctrl-breath-cue-hold {
0%, 33.3% { opacity: 0; }
35%, 48% { opacity: 1; }
50%, 100% { opacity: 0; }
}
/* 6 → 12s: "Solte · 6s". */
@keyframes ctrl-breath-cue-out {
0%, 50% { opacity: 0; }
52%, 98% { opacity: 1; }
100% { opacity: 0; }
}
.ctrl-breath {
position: absolute;
/* Encostado no pé da foto e centrado na largura: as três zonas caem sobre o tronco do
Ricardo, de baixo para cima, como se a respiração estivesse acontecendo nele. Por isso o
painel perdeu moldura, fundo e blur em 01/09 — cartão flutuante competia com a leitura de
que as formas pertencem ao corpo. O `bottom` só reserva a faixa da legenda da figura. */
left: 50%;
translate: -50%;
bottom: 30px;
z-index: 3;
width: 46%;
height: 48%;
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
justify-items: center;
gap: 10px;
/* Decorativo: não recebe clique nem atrapalha a seleção do texto em volta. */
pointer-events: none;
}
/* O medidor ocupa a caixa inteira, que é dimensionada em porcentagem da foto — assim as três
zonas continuam batendo com o tronco em qualquer largura de tela, em vez de terem um tamanho
fixo que só serve num breakpoint. A `viewBox` continua 64×92 e o SVG leva
`preserveAspectRatio="none"` para preencher a caixa nos dois eixos. */
.ctrl-breath__gauge {
width: 100%;
height: 100%;
}
.ctrl-breath__zone {
/* Sem isto o traço esticaria junto com a forma e ficaria mais grosso na vertical. */
vector-effect: non-scaling-stroke;
/* Só o preenchimento é translúcido — o corpo aparece por baixo da zona acesa, sustentando a
leitura de que a respiração acontece nele. O contorno fica opaco: com `opacity` no elemento
inteiro, a zona apagada (que é só traço) quase desaparecia sobre a camisa escura. */
fill-opacity: 0.62;
}
/* Os keyframes do sistema pintam com estas duas variáveis. Fora do `aula.css` elas não existem,
então cada zona declara a sua aqui. */
.ctrl-breath__zone {
--st-color-border-strong: rgb(245 247 250 / 58%);
fill: none;
stroke: var(--st-color-border-strong);
stroke-width: 1.5px;
}
.ctrl-breath__zone--belly {
--st-color-brand-orange: var(--ctrl-cyan, #00d9ff);
animation: 12s linear infinite ctrl-breath-belly;
}
.ctrl-breath__zone--ribs {
--st-color-brand-orange: var(--ctrl-lime, #b7ff3c);
animation: 12s linear infinite ctrl-breath-ribs;
}
.ctrl-breath__zone--chest {
--st-color-brand-orange: var(--ctrl-magenta, #ff168c);
animation: 12s linear infinite ctrl-breath-chest;
}
/* As três legendas ocupam o mesmo ponto e se revezam por opacidade — por isso a altura fixa,
senão o painel pularia de tamanho a cada troca. */
.ctrl-breath__cues {
position: relative;
min-width: 108px;
height: 15px;
margin: 0;
font-family: var(--ctrl-mono, ui-monospace, monospace);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.12em;
color: rgb(245 247 250 / 92%);
text-align: center;
text-transform: uppercase;
}
.ctrl-breath__cue {
position: absolute;
left: 50%;
translate: -50%;
white-space: nowrap;
opacity: 0;
}
.ctrl-breath__cue--in {
animation: 12s linear infinite ctrl-breath-cue-in;
}
.ctrl-breath__cue--hold {
animation: 12s linear infinite ctrl-breath-cue-hold;
}
.ctrl-breath__cue--out {
animation: 12s linear infinite ctrl-breath-cue-out;
}
/* Quem pediu menos movimento no sistema recebe o quadro parado, com as três zonas acesas e a
primeira legenda visível — a informação continua de pé sem nada piscando. */
@media (prefers-reduced-motion: reduce) {
.ctrl-breath__zone {
fill: var(--st-color-brand-orange);
stroke: var(--st-color-brand-orange);
animation: none;
}
.ctrl-breath__cue {
animation: none;
}
.ctrl-breath__cue--in {
opacity: 1;
}
}
/* No celular a foto encolhe e o painel encostaria na legenda do rodapé da figura. */
@media (width <= 560px) {
.ctrl-breath {
bottom: 38px;
width: 52%;
height: 45%;
}
.ctrl-breath__cues {
font-size: 0.56rem;
}
}
/* --- O pé da foto do Ricardo escurece mais -------------------------------------------------
O sistema já cobre toda `.ctrl-figure` com um gradiente (`::before`: transparente até 55%,
descendo para `rgba(2,3,5,.82)`). Ele bastava para o retrato antigo, que era escuro. A foto
de 01/09 é clara — camisa azul-clara e fundo de dia — e a legenda em cima dela quase sumia.
Aqui o gradiente começa mais cedo e fecha mais opaco, só nesta figura: a do método continua
com o valor do sistema, porque a imagem de lá já é escura no pé. */
/* --- Índice e título na mesma linha ---------------------------------------------------------
Vale para as duas listas de cards da página: os três fatos do "Quem conduz" e os quatro
entregáveis de "O que entra na inscrição", que adotaram a mesma regra em 01/09/2026 a pedido
do dono — as duas usam `.ctrl-facts`, então o desenho tinha de ser o mesmo.
O sistema entrega o `strong` como bloco, com 18px de margem em cima e 10px embaixo, então o
"001" ficava sozinho numa linha e o título caía na seguinte. Passando o `li` a grid de duas
colunas, os dois dividem a primeira linha e o parágrafo ocupa a largura inteira embaixo.
Economiza ~28px de altura por card, e os cards são idênticos em estrutura. */
#ricardo .ctrl-facts li,
.ctrl-deliverables li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: baseline;
column-gap: 8px;
row-gap: 10px;
}
#ricardo .ctrl-facts strong,
.ctrl-deliverables strong {
display: inline;
margin: 0;
}
#ricardo .ctrl-facts p,
.ctrl-deliverables p {
grid-column: 1 / -1;
}
/* O traço separador é decorativo: entra pelo CSS para não virar texto no HTML. */
#ricardo .ctrl-facts__index::after,
.ctrl-deliverables .ctrl-facts__index::after {
content: " -";
}
/* Os índices ganham a tipografia dos códigos das aulas (`.ctrl-lesson__code`): mesma família
mono, 0.67rem, peso 800 e 0.08em de espaçamento — antes eram 0.65rem no peso 400, e ao lado
do título em caixa alta ficavam apagados. A cor sai da mesma fórmula de lá, `--ctrl-accent`
com o ciano de reserva.
As três cores são as das aulas 02, 03 e 04. A 01 é ciano, que já era a cor destes índices —
repeti-la não daria distinção nenhuma, então a sequência começa no verde. */
#ricardo .ctrl-facts__index,
.ctrl-deliverables .ctrl-facts__index {
font-size: 0.67rem;
font-weight: 800;
letter-spacing: 0.08em;
}
/* Cinza, e nao lima/magenta/ambar como ate 01/09/2026. Aquelas tres sao as cores das aulas 02,
03 e 04 — costelas, alto do torax e as tres juntas —, e o leitor aprende esse vocabulario no
hero. Gasta-las aqui, onde nao significam zona nenhuma, esvazia o codigo de cor bem na secao
em que o cetico precisa de rigor. Os indices continuam destacados pela tipografia: mono,
0.67rem, peso 800, que e o tratamento dos codigos das aulas. */
#ricardo .ctrl-facts__index {
color: var(--ctrl-muted);
}
#ricardo .ctrl-figure::before {
background: linear-gradient(
rgba(0, 0, 0, 0) 30%,
rgba(2, 3, 5, 0.72) 68%,
rgba(2, 3, 5, 0.99) 100%
);
}
/* --- Blocos de texto que a copy de 31/08 acrescentou ---------------------------------------
Três parágrafos que não existiam na página anterior. O sistema zera `margin-top` de todo `p`
dentro de `.ctrl-page` (mesma regra citada no bloco do `.ctrl-hero__proof`), por isso cada um
precisa do `.ctrl-page` na frente para recuperar o próprio respiro. */
/* Fecho da seção do método, logo abaixo do mapa das quatro zonas. */
.ctrl-page .ctrl-method__fecho {
margin-top: 28px;
max-width: 620px;
}
/* Segundo parágrafo da bio. O primeiro é o lead e fica maior; este volta ao corpo de texto. */
.ctrl-page .ctrl-author__lead--secundario {
margin-top: 20px;
font-size: 1rem;
opacity: 0.82;
}
/* Fecho do CTA final, depois do botão. As duas linhas vêm separadas por de propósito:
"Podia aproveitar." é a virada e precisa cair sozinha. */
.ctrl-page .ctrl-final__fecho {
margin-top: 44px;
line-height: 1.7;
opacity: 0.78;
}
/* A assinatura do Ricardo fecha a página. */
.ctrl-page .ctrl-final__assinatura {
margin-top: 18px;
font-weight: 600;
letter-spacing: 0.01em;
}
/* ============================================================================================
Auditoria de layout de 01/09/2026 — segunda leva
============================================================================================
A primeira leva (largura do hero, degrau da escala, tarja) foi ao ar antes. Esta traz os
itens de imagem, conversao, tipografia miuda, cards clicaveis e o painel do hero. */
/* --- nao pode virar caixa -----------------------------------------------------------
As tres imagens ganharam em volta para servir AVIF/WebP e um recorte proprio de
celular. O elemento e inline por padrao, e as regras do sistema dimensionam a com
width/height em porcentagem — que passariam a resolver contra a caixa do , de altura
automatica, em vez da do container. Com display:contents o nao gera caixa nenhuma e
toda regra existente continua valendo sem alteracao. */
.ctrl-page picture {
display: contents;
}
/* --- A navegacao volta a existir no celular ---------------------------------------------------
O sistema faz `.ctrl-nav__links a:not(.ctrl-btn){display:none}` abaixo de 820px, sem hamburguer
e sem substituto: o visitante de celular — 90% do trafego — ficava com zero navegacao em dez
telas de rolagem. Os tres rotulos sao curtos ("Metodo", "Aulas", "Quem conduz") e cabem numa
linha a 375px com 14px de intervalo.
Quem sai da barra e o botao: acima de 820px ele continua ali, e no celular a barra flutuante
do rodape cobre a conversao com muito mais alcance. Sem isso os quatro nao caberiam. */
@media (width <= 820px) {
.ctrl-page .ctrl-nav__links {
gap: 14px;
}
.ctrl-page .ctrl-nav__links a:not(.ctrl-btn) {
display: inline-flex;
font-size: 0.62rem;
letter-spacing: 0.05em;
}
.ctrl-page .ctrl-nav__links .ctrl-btn {
display: none;
}
}
/* --- CTA no fim das duas listas --------------------------------------------------------------
Entre o botao do hero e o do fechamento havia 4.257px no desktop e 6.650px no celular sem um
unico elemento de conversao. Quem se convence lendo o card da AULA//04 rolava mais 2.300px
para poder agir. */
.ctrl-page .ctrl-section-cta {
margin-top: 34px;
text-align: center;
}
/* --- A barra flutuante -----------------------------------------------------------------------
Aparece quando o CTA do hero sai de cena e se recolhe quando o do fechamento entra, para nao
haver dois botoes iguais na tela ao mesmo tempo — quem liga e desliga e o IntersectionObserver
no fim do index.html. No celular ela ocupa a base inteira, respeitando a area segura do
aparelho; no desktop encolhe para um botao no canto.
Usa visibility junto de opacity para sair da ordem de foco quando esta recolhida: so opacity
deixaria um link invisivel e tabulavel no meio da pagina. */
.ctrl-cta-flutuante {
position: fixed;
z-index: 40;
inset: auto 0 0;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--ctrl-line);
background: color-mix(in srgb, var(--ctrl-bg-deep) 94%, transparent);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
opacity: 0;
visibility: hidden;
translate: 0 100%;
transition: opacity 0.25s ease-out, translate 0.25s ease-out, visibility 0.25s;
}
.ctrl-cta-flutuante.is-visivel {
opacity: 1;
visibility: visible;
translate: 0 0;
}
@media (width > 820px) {
.ctrl-cta-flutuante {
inset: auto 24px 24px auto;
padding: 0;
border: 0;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
translate: 0 16px;
}
.ctrl-cta-flutuante .ctrl-btn {
width: auto;
box-shadow: 0 12px 34px rgb(2 3 5 / 62%);
}
}
/* --- Os quatro cards de aula viram links de verdade -------------------------------------------
O sistema ja dava `transform: translateY(-5px)` e borda acesa no hover de um
que nao era
clicavel: quatro botoes falsos, e no celular o hover ficava presente depois do toque, deixando
o card aceso para sempre. Agora o hover promete o que entrega, e o parametro ?aula=0N diz ao
funil qual das quatro zonas despertou o interesse.
O padding sai do