e nao no , segue
visivel descendo ate o proximo topico durante esse mesmo intervalo. */
.analise__item--ativo p {
opacity: 1;
filter: none;
transform: none;
transition: opacity 0.18s ease, filter 0.18s ease, transform 0.18s ease;
}
.analise.is-veiled .analise__item--ativo p {
opacity: 0;
filter: blur(12px);
transform: translateY(8px);
}
@media (max-width: 640px) {
.analise {
width: 100%;
grid-template-columns: 1fr;
}
/* uma coluna so: cai fora das linhas/colunas explicitas do desktop. A
ordem visual (imagem, dica, leitura) e dada por "order", nao pela
ordem do HTML — a dica precisa vir depois da foto no mobile. */
.analise__dica,
.analise__viewer,
.analise__leitura {
grid-column: 1;
grid-row: auto;
}
.analise__viewer {
order: 1;
}
.analise__dica {
order: 2;
}
.analise__leitura {
order: 3;
}
/* diferente do .article-split__media, a foto do .analise agora e bem
mais alta que larga (aspect-ratio 1230/2400) — deixa-la ocupar a
largura inteira da coluna faria a caixa passar de 600px de altura no
mobile. Trava em 306px, centralizada, e a leitura volta a uma altura
fixa menor (nao precisa mais casar com o fim da foto).
width (nao max-width): dentro de uma linha de grid "auto" (coluna
1fr), max-width so limita um stretch que nunca chega a se resolver —
sem largura definida o navegador nao consegue calcular a altura via
aspect-ratio antes de dimensionar a linha, e a caixa colapsa perto de
0px. width:min(...) da um valor definido de largura, que resolve o
aspect-ratio normalmente. */
.analise__viewer {
width: min(100%, 306px);
margin: 0 auto;
}
.analise__leitura {
height: 347px;
}
}
@media (prefers-reduced-motion: reduce) {
.analise__shot,
.analise__historico button,
.analise__item--fila button,
.analise__item--ativo p,
.analise__item--ativo::before,
.analise .is-magnet-target,
.analise__restart {
transition: none;
}
}
/* Curriculo */
.cv-section {
margin-bottom: 40px;
}
.cv-row {
display: flex;
justify-content: space-between;
gap: 16px;
}
.cv-row + .cv-row {
margin-top: 4px;
}
.cv-row .label {
color: var(--color-ink);
}
.cv-row .date {
color: var(--color-ink-muted);
white-space: nowrap;
font-size: var(--text-meta);
}
.courses-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.course-item .meta {
display: block;
color: var(--color-ink-muted);
font-size: var(--text-meta);
}
.course-item .name {
display: block;
margin-top: 4px;
color: var(--color-ink);
}
.job-entry + .job-entry {
margin-top: 24px;
}
/* titulo do cargo com o mesmo peso dos titulos de artigo do index
(.featured-link a) — so a primeira linha (cargo + data), nao a da empresa */
.job-entry .cv-row:first-child .label {
font-weight: 500;
}
.job-entry .bullets {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.job-entry .bullets li {
position: relative;
padding-left: 16px;
font-size: var(--text-meta);
color: var(--color-ink-muted);
}
.job-entry .bullets li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--color-ink-muted);
}
/* Colunas de competencias (Areas de Interesse, Ferramentas, Afinidade com
Processos) — mesma logica de grade dos Cursos, mas em 3 colunas alinhadas
pelo topo, cada uma com seu rotulo e uma lista vertical propria. */
.skills-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: start;
}
.skill-list {
display: flex;
flex-direction: column;
gap: 4px;
}
/* as caixas de texto (titulo e itens) ficam limitadas a 70% da largura da
coluna — nomes mais longos quebram em vez de esticar ate a borda */
.skill-col .section-label,
.skill-list li {
max-width: 70%;
}
.skill-list li {
color: var(--color-ink);
font-size: var(--text-body);
}
/* o "-" do documento vira um respiro entre o grupo principal e o resto.
A regua acompanha a largura do titulo da coluna (nao a coluna inteira):
6.1em medidos no texto "Ferramentas", ancorados ao mesmo token de fonte do
titulo (--text-body) para escalar junto. */
.skill-list__divider {
width: calc(var(--text-body) * 6.1);
max-width: 100%;
height: 1px;
margin: 8px 0;
background: var(--color-border);
}
/* =====================================================================
Revelar-no-hover
Conteudo extra recolhido que so aparece ao passar o mouse (ou focar via
teclado) sobre o grupo. A transicao de estado espelha a dos cards do index:
a ALTURA anima em cubic-bezier(0.22, 1, 0.36, 1) (via grid-template-rows
0fr->1fr, que dispensa saber a altura final) e o conteudo faz o mesmo
cross-fade das camadas do card — opacity + blur(12px) + translateY(8px).
O indicativo (".reveal__toggle") colapsa em sincronia com a abertura, entao
".reveal" nunca encolhe abaixo do cursor e o hover nao pisca.
===================================================================== */
.reveal__toggle {
appearance: none;
min-height: 0;
overflow: hidden;
border: 0;
background: none;
padding: 4px 0 0;
font: inherit;
line-height: 1;
text-align: left;
/* mesma cor e peso dos titulos de artigo do index (.featured-link a) */
color: var(--color-link);
font-weight: 500;
cursor: pointer;
transition: color 0.15s ease, opacity 0.35s ease;
}
.reveal__toggle:hover,
.reveal__toggle:focus-visible {
color: var(--color-link);
}
/* o indicativo vive numa faixa que colapsa (1fr -> 0fr) ao revelar */
.reveal__toggle-wrap {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* O estado aberto e uma classe (.is-open) posta por js/reveal.js, nao :hover:
o mouse abre e o item TRAVA aberto; so um clique sobre a regiao expandida
devolve ao estado contraido. */
.reveal.is-open > .reveal__toggle-wrap {
grid-template-rows: 0fr;
}
.reveal.is-open .reveal__toggle {
opacity: 0;
}
/* faixa do conteudo: cresce de 0fr a 1fr com o mesmo tempo/curva do card */
.reveal__more {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-open > .reveal__more {
grid-template-rows: 1fr;
}
/* o conteudo em si entra com o cross-fade das camadas do card */
.reveal__inner {
min-height: 0;
overflow: hidden;
opacity: 0;
filter: blur(12px);
transform: translateY(8px);
transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease;
}
.reveal.is-open .reveal__inner {
opacity: 1;
filter: none;
transform: none;
}
/* aberto, a regiao expandida convida ao clique que a fecha */
.reveal.is-open > .reveal__more {
cursor: pointer;
}
/* variante em pilha (coluna Ferramentas): itens revelados seguem o mesmo
empilhamento e respiro da lista */
.reveal--stack .reveal__inner {
display: flex;
flex-direction: column;
gap: 4px;
}
/* variante texto (bio): mesmo respiro entre paragrafos que .bio usa entre
seus filhos diretos (gap: 24px) — aqui os paragrafos colapsados ficam
dentro do reveal__inner, entao o gap tem que ser repetido aqui. */
.reveal--text .reveal__inner {
display: flex;
flex-direction: column;
gap: 24px;
}
/* link do artigo citado no 3o paragrafo da bio: peso maior que o corpo do
texto (mesmo padrao de seletor por atributo de .aside-menu a[href=...]) */
.reveal--text a[href="artigo-casos-estudo-ia.html"] {
font-weight: 500;
}
/* variante blocos (Experiencia profissional): o toggle fica na posicao do 2o
cargo, com o mesmo respiro que separa os job-entry */
.job-entry + .reveal--jobs {
margin-top: 24px;
}
@media (prefers-reduced-motion: reduce) {
.reveal__toggle-wrap,
.reveal__more,
.reveal__inner,
.reveal__toggle {
transition: none;
}
}
/* =====================================================================
Mobile (<=640px)
Abaixo de 640px nem a coluna cabe fixa: ela vira fluida e ocupa a largura
util da tela. O menu (ja no topo em todo desktop) apenas reempilha e
realinha ao padding da coluna.
===================================================================== */
@media (max-width: 640px) {
:root {
/* o breakout do carrossel nao faz sentido sem margem lateral sobrando —
ele so empurraria o trilho para fora da tela. Aqui a vitrine e a
propria largura util da coluna: a janela menos o padding de .main.
Isso tambem redimensiona o card expandido, que ja deriva daqui. */
--carousel-track: calc(100vw - 48px);
}
.main {
width: 100%;
padding-inline: 24px;
padding-bottom: 64px;
}
/* coluna fluida: o menu realinha aos 24px de padding do .main e encosta
um pouco mais no topo. */
.aside-menu {
flex-direction: column;
align-items: normal;
width: auto;
margin-inline: 24px;
padding-top: 32px;
}
.aside-menu ul {
justify-content: flex-start;
margin-top: 0;
}
/* o empilhamento do card nao esta aqui: video em cima e texto embaixo
agora vale em qualquer largura */
.courses-grid {
grid-template-columns: 1fr;
}
.skills-grid {
grid-template-columns: 1fr;
}
}