/* Tema do micheltlutz.me no exo: mira só as classes estáveis exo-* e as variáveis --exo-*.
   Cada regra diz, num comentário, qual par de migracao/visual/pares.mjs ela fecha. */

/* ---- Fontes (autohospedadas; a CSP só aceita o próprio site) ---- */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('fonts/jetbrains-mono-latin.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/lora-latin.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/lora-latin-italic.woff2') format('woff2'); }

/* ---- Tokens: o legado é escuro por padrão; `html.ml-claro` (posto pelo theme.js) inverte ---- */
:root {
  /* escala do acento (#99cc00) nos canais RGB que o front.css do motor lê */
  --exo-primary-50: 246 255 224; --exo-primary-100: 234 255 179; --exo-primary-200: 215 255 112; --exo-primary-300: 194 245 61;
  --exo-primary-400: 174 224 20; --exo-primary-500: 153 204 0; --exo-primary-600: 125 166 0; --exo-primary-700: 98 128 0;
  --exo-primary-800: 74 97 0; --exo-primary-900: 53 70 0;

  --ml-bg: #000; --ml-bg-alt: #0f0f0f; --ml-ink: #fff;
  --ml-accent: #99cc00; --ml-accent-ink: #99cc00; --ml-focus: #99cc00; --ml-on-accent: #000;
  --ml-lanterna: rgb(153 204 0 / 0.55); --ml-lanterna-brilho: rgb(255 255 255 / 0.035); /* --ml-flash e --ml-flash-bloom do legado */
  --ml-line: rgb(255 255 255 / 0.1); --ml-line-strong: rgb(255 255 255 / 0.15);
  --ml-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  --ml-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --ml-h2: clamp(1.75rem, 1.35rem + 2vw, 2.25rem);
  --ml-container: 80rem;
  color-scheme: dark;
}
html.ml-claro {
  --ml-bg: #fff; --ml-bg-alt: #f5f5f5; --ml-ink: #333;
  --ml-accent-ink: #628000; --ml-focus: #628000;
  --ml-lanterna: rgb(98 128 0 / 0.85); --ml-lanterna-brilho: rgb(0 0 0 / 0.043);
  --ml-line: rgb(0 0 0 / 0.1); --ml-line-strong: rgb(0 0 0 / 0.15);
  color-scheme: light;
}

/* ---- Base ---- */
html { background: var(--ml-bg); }
/* par "base: fundo, texto e fonte da página" */
.exo-site { background: var(--ml-bg); color: var(--ml-ink); overflow-x: clip; } /* orbes e fundos cheios passam da janela sem criar rolagem horizontal */
/* o motor pinta cinzas e bordas fixas nas utilidades do Tailwind; aqui tudo vem dos tokens */
.exo-site * { border-color: var(--ml-line); }
/* :where() zera a especificidade: a regra vence as utilidades do front.css (vem depois) e perde para qualquer regra de componente deste arquivo */
:root :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, td, th, label, legend, figcaption, blockquote, strong, em, time, span) { color: inherit; }
/* cinzas e verdes das utilidades do Tailwind viram a cor herdada (os links, abaixo, voltam ao acento) */
:root :where([class*='text-gray-'], [class*='text-primary-']) { color: inherit; }
:root :where(a:not(.exo-button)) { color: var(--ml-accent-ink); } /* :root e não .exo-site: a 404 e os fragmentos /w/ não têm a classe */
/* a 404 e os fragmentos /w/ não têm .exo-site: o invólucro delas (bg-white do motor) leva o fundo e a cor do tema, senão o texto herdado fica branco sobre branco */
:root body > .min-h-screen { background: var(--ml-bg); color: var(--ml-ink); }
/* foco visível: anel de 2 px no acento (como o legado) */
.exo-site :focus-visible { outline: 2px solid var(--ml-focus); outline-offset: 2px; }

/* ---- Container e ritmo ---- */
/* par "base: largura do conteúdo (container de 80rem)" */
.exo-site-main { max-width: var(--ml-container); padding-block: 0; padding-inline: 1rem; }
@media (min-width: 640px) { .exo-site-main { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .exo-site-main { padding-inline: 2rem; } }

/* pares "ritmo": cada dobra tem 64 px acima e abaixo e um fundo cheio na largura da janela
   (o fundo passa do container pela sombra e pelo clip-path, sem criar rolagem horizontal) */
.exo-fold {
  --ml-fold-bg: var(--ml-bg);
  margin-top: 0; padding-block: 4rem;
  background: var(--ml-fold-bg);
  box-shadow: 0 0 0 100vmax var(--ml-fold-bg);
  clip-path: inset(0 -100vmax);
}
/* a home alterna: sobre+números+certificações, escrita e palco e contato ficam em #0f0f0f */
#sobre, #numeros, #certificacoes, #escrita, #artigos, #palestras, #contato-intro, #contato, #contato-direto, #contato-email { --ml-fold-bg: var(--ml-bg-alt); }

/* ---- Tipografia ---- */
/* par "título de seção (h2): tipografia" (desktop e celular) */
.exo-fold h2 { font-size: var(--ml-h2); line-height: 1.15; }

/* ---- Hero (Task 3) ---- */
/* pares "hero: espaço da seção": 64 px acima e 128 px abaixo (48 e 96 no celular), como o legado */
#inicio { position: relative; padding-top: 4rem; padding-bottom: 8rem; }
/* issue #34: o palco de ponteiro é a seção inteira do legado (hero + faixa + 128 px de respiro), de borda a borda da janela. A dobra do motor é só o
   container, e o clip-path do fundo cheio cortava o brilho na borda de baixo do hero (o retângulo da captura). O hero e a faixa têm o fundo da página,
   então deixam de pintar o próprio fundo; o clip do hero só segura o brilho acima do topo. Para baixo quem corta o halo é o #sobre: ele pinta
   por cima porque o clip-path da .exo-fold (o contorno da dobra de borda a borda) o faz pintar como posicionado, em ordem de árvore. Quando a
   dobra nativa do motor chegar e esse contorno sair, voltar a inset(0 -100vmax calc(-1 * var(--ml-palco-extra))). A aura e o orbe descem
   --ml-palco-extra, a altura da faixa que o theme.js mede (15 rem é a reserva sem JS). */
#inicio { --ml-palco-extra: 15rem; background: transparent; box-shadow: none; clip-path: inset(0 -100vmax -100vmax); }
#esteira { position: relative; background: transparent; box-shadow: none; clip-path: none; }
#esteira::after { content: ''; position: absolute; left: calc(50% - 50vw); width: 100vw; bottom: 0; height: 8rem; pointer-events: none; background: linear-gradient(to top, var(--ml-bg), transparent); } /* o degradê do pé da seção do legado (.ml-hero-beams:after) */
@media (max-width: 767px) { #inicio { padding-top: 3rem; padding-bottom: 6rem; } }
.exo-hero { position: relative; z-index: 1; padding: 0; }
.exo-hero-body { max-width: 48rem; } /* par "hero: coluna do conteúdo": 768 px, deslocada 64 px no desktop como a .ml-hero-content */
@media (min-width: 1024px) { .exo-hero-body { margin-left: 4rem; } }
/* pares "hero: título": display fluido de 40 a 60 px, 700, -0,025em, equilibrado */
.exo-hero-title { font-size: clamp(2.5rem, 1.6rem + 4.5vw, 3.75rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; }
/* pares "hero: descrição": 18 px/1,65 em no máximo 672 px */
.exo-hero-lede { font-size: 1.125rem; line-height: 1.65; max-width: 42rem; margin-top: 1.5rem; }
.exo-actions { gap: 1rem; margin-top: 2.5rem; }
/* celular: os dois botões em coluna, ambos na largura do mais largo, texto centralizado (par "botão primário no celular") */
@media (max-width: 639px) { .exo-actions { flex-direction: column; width: max-content; max-width: 100%; align-items: stretch; } .exo-actions .exo-button { justify-content: center; text-align: center; } }
/* fundo do hero: aura e dois orbes borrados (sem animação; o parallax é do theme.js) */
#inicio::before, #inicio::after { content: ''; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(70px); background: rgb(153 204 0 / 0.25); }
#inicio::before { width: 18rem; height: 18rem; top: 2.5rem; left: calc(50% - 50vw - 6rem); } /* -96 px da borda da janela, como o -left-24 do legado */
#inicio::after { width: 20rem; height: 20rem; bottom: calc(-1 * var(--ml-palco-extra, 0px)); right: calc(50% - 50vw - 6rem); } /* no pé do palco, -96 px da borda direita (bottom-0 -right-24) */

/* ---- Destaque do hero e faixa de termos (motor 48fffe7, exo#142) ----
   pares "hero: palavra em destaque": o gradiente de cinco paradas do legado, que cintila a cada 7 s; no claro, os tons escuros do acento */
.exo-hero-highlight { background-image: linear-gradient(100deg, #fff, #99cc00, #b8f000, #99cc00, #fff); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: ml-shimmer 7s linear infinite; }
html.ml-claro .exo-hero-highlight { background-image: linear-gradient(100deg, #333, #628000, #4a6100, #628000, #333); }
@keyframes ml-shimmer { from { background-position: 0% center; } to { background-position: 200% center; } }
/* pares "esteira": a faixa fecha a seção do hero (64 px abaixo dos botões, 128 px antes de #sobre, como o mt-16 e o pb-32 do legado) e vai de borda a borda, com filete em cima,
   12 px de respiro, máscara nas pontas e 38 s por volta; os termos em mono, maiúsculas, apagados, separados só por 40 px */
#inicio:has(+ #esteira) { padding-bottom: 0; } /* no legado a faixa é filha da seção do hero: os 128 px de respiro vêm depois dela */
#esteira { padding: 0 0 8rem; }
@media (max-width: 767px) { #esteira { padding-bottom: 6rem; } }
#esteira .exo-marquee { width: 100vw; margin-inline: calc(50% - 50vw); margin-top: 4rem; padding: 12px 0; border-top: 1px solid var(--ml-line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); --exo-marquee-duration: 38s; }
.exo-marquee-list { gap: 40px; min-width: 0; justify-content: flex-start; padding-inline-end: 40px; }
.exo-marquee-term { font-family: var(--ml-mono); font-size: 14px; line-height: 20px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; opacity: 0.5; color: var(--ml-ink); }
.exo-marquee-term::before { content: none; } /* o legado separa os termos só pelo espaço */

/* ---- Botões ---- */
/* pares "botão primário" e "botão secundário (vidro)" */
.exo-button { border-radius: 0.5rem; font-size: 1rem; line-height: 1.5rem; font-weight: 600; padding: 1rem 2rem; transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s; }
.exo-button.is-primary { background: var(--ml-accent); color: var(--ml-on-accent); border: 0; box-shadow: 0 0 40px rgb(153 204 0 / 0.3); }
.exo-button.is-primary:hover { background: var(--ml-accent); transform: translateY(-2px); box-shadow: 0 0 50px 8px rgb(153 204 0 / 0.45); }
.exo-button.is-ghost { background: rgb(10 10 10 / 0.55); color: var(--ml-ink); border: 1px solid var(--ml-line); backdrop-filter: blur(8px); }
.exo-button.is-ghost:hover { background: rgb(10 10 10 / 0.55); border-color: var(--ml-accent); color: var(--ml-accent); }
html.ml-claro .exo-button.is-ghost { background: rgb(255 255 255 / 0.6); }

/* ---- Ficha (fact-sheet) ---- */
/* pares "ficha": uma coluna no celular, duas no tablet, quatro a partir de 1024 px; filete em cima, sem filete nos itens */
.exo-fact-sheet-list { grid-template-columns: minmax(0, 1fr); gap: 1rem 2rem; border-top: 1px solid var(--ml-line); padding-top: 1.25rem; }
@media (min-width: 768px) { .exo-fact-sheet-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .exo-fact-sheet-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.exo-fact { padding-bottom: 0; border-bottom-width: 0; }
.exo-fact-key { font-family: var(--ml-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ml-accent-ink); line-height: 1.5; }
.exo-fact-value { font-size: 14px; line-height: 1.375; opacity: 0.8; }

/* ---- Home: seções (Task 4) ---- */
/* par "sobre: kicker (rótulo mono)" */
.exo-kicker { font-family: var(--ml-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; margin-bottom: 1rem; }
/* par "seção: chamada (lede)" */
.exo-section-lede { font-size: 1.125rem; line-height: 1.65; opacity: 0.8; margin-top: 1rem; max-width: none; }
:is(#trajetoria, #escrita, #contato-intro) .exo-rich-paragraph { font-size: 1.125rem; line-height: 1.65; opacity: 0.8; margin-top: 1rem; max-width: 48rem; } /* a abertura das dobras de cabeçalho vai num paragraph (um rich-text só com section-head não desenha) */
/* par "cabeçalho editorial": 768 px e 40 px abaixo, como o .ml-editorial-header; os centrados de /projetos ficam largos */
.exo-fold .exo-section-head { max-width: 48rem; margin-bottom: 2.5rem; }
:is(#labs, #apps, #marcos, #alem-do-codigo) .exo-section-head { max-width: none; }
/* as dobras de cabeçalho colam na dobra seguinte (o espaço é o margin-bottom do cabeçalho) */
#escrita, #contato-intro { padding-bottom: 0; }
#artigos, #palestras, #contato, #contato-direto, #contato-email { padding-top: 0; }

/* sobre: texto em Lora, medida de 68ch, abertura em itálico, link branco sublinhado, citação com filete no acento */
#sobre .exo-text { font-family: var(--ml-serif); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); line-height: 1.7; max-width: 68ch; }
#sobre .exo-text p { margin: 0 0 1.375em; }
#sobre .exo-text p:first-child { font-style: italic; opacity: 0.7; margin-bottom: 1.5rem; }
#sobre .exo-text a { color: inherit; text-decoration: underline; text-underline-offset: 0.14em; }
#sobre .exo-quote { border: 0; border-left: 2px solid var(--ml-accent); padding-left: 1.5rem; margin: 2.5rem 0 0; max-width: 48rem; }
#sobre .exo-quote blockquote { font-family: var(--ml-serif); font-size: 1.75rem; line-height: 1.375; font-style: italic; border: 0; padding: 0; margin: 0; }

/* números: quatro colunas (duas no celular), valor grande no acento, rótulo apagado */
.exo-stats-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
@media (min-width: 768px) { .exo-stats-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.exo-stat-value { font-size: 2.25rem; font-weight: 700; line-height: 1; color: var(--ml-accent-ink); }
.exo-stat-label { font-size: 14px; line-height: 1.375; opacity: 0.7; }

/* certificações e marcas: o título vira um rótulo pequeno e os itens viram texto mono em linha, sem pílula */
#certificacoes .exo-section-title, #marcas .exo-section-title { font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ml-accent-ink); }
.exo-logo-strip-list { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.exo-logo, .exo-logo-strip.is-badges .exo-logo-link, .exo-logo-strip.is-badges .exo-logo-name { background: none; border: 0; border-radius: 0; padding: 0; min-height: 0; text-decoration: none; }
.exo-logo-link, .exo-logo-name { font-family: var(--ml-mono); font-size: 12px; color: var(--ml-ink); }

/* trajetória: linha vertical, ponto de 10 px no acento, período mono, título 20/600 e descrição apagada */
.exo-timeline-list { padding-left: 2rem; border-left: 1px solid var(--ml-line-strong); }
.exo-event { position: relative; padding-bottom: 2.5rem; border: 0; }
.exo-event::before { content: ''; position: absolute; left: calc(-2rem - 5.5px); top: 0.4rem; width: 10px; height: 10px; border-radius: 50%; background: var(--ml-accent); box-shadow: 0 0 0 2px var(--ml-fold-bg, var(--ml-bg)); }
.exo-event-when { font-family: var(--ml-mono); font-size: 14px; color: var(--ml-accent-ink); }
.exo-event-title { font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--ml-ink); margin-top: 6px; }
.exo-event-body { font-size: 1rem; line-height: 1.5; opacity: 0.8; max-width: 42rem; margin-top: 8px; }

/* escrita e palco: linha em grade (data mono à esquerda, título e resumo à direita), filete embaixo */
.exo-collection-item { display: grid; grid-template-columns: 144px max-content minmax(0, 1fr); gap: 8px 32px; padding: 24px 0; border: 0; border-bottom: 1px solid var(--ml-line); }
.exo-collection-date { grid-column: 1; grid-row: 1; font-family: var(--ml-mono); font-size: 14px; opacity: 0.6; color: var(--ml-ink); }
.exo-collection-link { grid-column: 2 / 4; grid-row: 1; font-size: 1.25rem; font-weight: 600; line-height: 1.375; color: var(--ml-ink); text-decoration: none; }
.exo-collection-link:hover { color: var(--ml-accent-ink); }
.exo-collection-summary { grid-column: 2 / 4; grid-row: 2; font-size: 1rem; line-height: 1.5; opacity: 0.75; }
/* a terceira linha do item (motor 48fffe7): tempo de leitura na coluna 2, etiquetas na 3; evento e local nas duas */
.exo-collection-item .exo-listing-meta { grid-column: 2 / 4; grid-row: 3; }
.exo-collection-item .exo-listing-reading { grid-column: 2; grid-row: 3; }
.exo-collection-item .exo-chips { grid-column: 3; grid-row: 3; }
@media (max-width: 639px) {
  .exo-collection-item { grid-template-columns: minmax(0, 1fr); }
  .exo-collection-date, .exo-collection-link, .exo-collection-summary, .exo-collection-item .exo-listing-meta, .exo-collection-item .exo-listing-reading, .exo-collection-item .exo-chips { grid-column: 1; grid-row: auto; }
}

/* stack: grade de linhas finas (o gap de 1 px mostra o fundo), célula na cor da seção, etiquetas soltas */
#stack .exo-feature-cards-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--ml-line); border-radius: 12px; overflow: hidden; }
@media (min-width: 768px) { #stack .exo-feature-cards-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { #stack .exo-feature-cards-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#stack .exo-feature-cards-list > li { display: flex; }
#stack .exo-card { flex: 1; background: var(--ml-bg); border: 0; border-radius: 0; box-shadow: none; padding: 1.5rem; }
#stack .exo-card-title { font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
#stack .exo-chips { display: flex; flex-wrap: wrap; gap: 4px 8px; }
#stack .exo-chip { background: none; border: 0; border-radius: 0; padding: 0; font-size: 14px; color: var(--ml-ink); opacity: 1; }

/* dobras da mesma seção do legado ficam coladas: só a primeira tem folga em cima e só a última embaixo */
#sobre { padding-bottom: 2rem; } #numeros { padding-block: 2rem; } #certificacoes { padding-top: 2rem; }
#trajetoria { padding-bottom: 1.5rem; } #experiencias { padding-block: 1rem; } #marcas { padding-block: 1.5rem; } #nota { padding-top: 1rem; }
#artigos { padding-bottom: 2rem; } #palestras { padding-top: 0; } #contato { padding-bottom: 1rem; }
#contato-direto { padding-block: 1rem; } #contato-email { padding-top: 0; }

/* ---- Formulário de contato (Task 5) ---- */
/* pares "formulário": 672 px, duas colunas com 16 px, o campo longo (assunto e mensagem), o botão e a nota ocupam a linha inteira */
.exo-form-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; max-width: 42rem; }
@media (min-width: 640px) {
  .exo-form-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exo-form-body > :where(.exo-field:has(textarea), .exo-field:has(input[name="assunto"]), .exo-button, .exo-form-purpose, .exo-form-policy, .exo-consent, .exo-form-notice) { grid-column: 1 / -1; }
}
#formulario .exo-form-body, :is(.exo-listing-form, .exo-record-form) .exo-form-body { margin-inline: auto; } /* no eixo também no fim da listagem e de cada palestra, como o legado */
/* o formulário que fecha a página (fim da listagem e do registro): a nota de privacidade a 50 px do rodapé, como no legado */
:is(.exo-listing-form, .exo-record-form) { margin-bottom: 50px; }
.exo-form-body > .exo-button { justify-self: start; }
/* o motor dá margin-top a cada filho da grade (space-y) e o ritmo dobrava o do legado (16 da margem + 16 do gap):
   a margem sai e o gap manda; o seletor empata com o do motor e vence por vir depois */
.exo-form-body > :not([hidden]) ~ :not([hidden]) { margin-top: 0; }
/* o "Prefere e-mail?" da dobra #email entra ao lado do botão (theme.js 4d), como o .ml-form-actions do legado */
.exo-form-body > .ml-form-acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ml-form-acoes .ml-form-fallback { margin: 0; font-size: 12px; line-height: 16px; opacity: 0.7; color: var(--ml-ink); }
.ml-form-acoes .ml-form-fallback a { color: var(--ml-ink); }
/* a região viva (avisos de envio) é vazia até haver aviso: sem ela ocupando a primeira célula da grade */
.exo-form-live { grid-column: 1 / -1; }
.exo-form-live:empty { display: none; }
.exo-field { display: flex; flex-direction: column; gap: 6px; }
.exo-label { font-size: 14px; font-weight: 500; line-height: 20px; }
/* Re-pin 33b5b21 (exo#166): o cabeçalho do campo e a marca "obrigatório"/"opcional" como o .ml-form-label e o .ml-form-hint do legado (12/16 no verde do tema) */
.exo-field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 0; }
.exo-field-mark { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--ml-accent-ink); }
.exo-field-hint { font-size: 12px; line-height: 16px; color: var(--ml-ink); opacity: 0.7; } /* sem par: o legado não tem dica; a cor cinza do motor não lê sobre o fundo escuro */
/* campos escuros: fundo preto, borda branca a 20%, raio de 12 px; no foco, borda e halo no acento */
.exo-input { background: var(--ml-bg); color: var(--ml-ink); border: 1px solid rgb(255 255 255 / 0.2); border-radius: 12px; padding: 10px 14px; font-size: 1rem; line-height: 1.5; min-height: 0; }
html.ml-claro .exo-input { background: #fff; border-color: rgb(0 0 0 / 0.2); }
.exo-input:focus, .exo-input:focus-visible { border-color: var(--ml-focus); box-shadow: 0 0 0 3px rgb(153 204 0 / 0.25); outline: none; }
.exo-input::placeholder { color: var(--ml-ink); opacity: 0.4; }
textarea.exo-input { min-height: 10.375rem; resize: vertical; }
.exo-form-purpose { font-size: 12px; line-height: 16px; opacity: 0.7; margin-top: 0; }
/* melhoria sobre o legado: o vermelho do erro (rgb(179 69 44)) dava só 3,9:1 sobre o preto; este passa de 7:1 */
.exo-field-error { color: #ff8f77; font-size: 12px; }
html.ml-claro .exo-field-error { color: #b3452c; }

/* links dentro de texto rico: o front.css os pinta com primary-700 (verde escuro, 3,9:1 sobre o preto); aqui vão no acento */
.exo-content a, .exo-text a { color: var(--ml-accent-ink); }

/* ---- Projetos (Task 6; re-pin be1ac3c: o título e o subtítulo saíram do <header> para div.exo-site-heading, exo#224) ---- */
/* pares "projetos: título da página" e "subtítulo": centrados, 36/700 e 18 px em até 768 px.
   O invólucro interno ganha o px-6 da main (e o pt que dá os ~76 px entre a linha da marca e o título, como o legado),
   para o título alinhar com o conteúdo em qualquer largura. */
.exo-site .exo-site-heading { text-align: center; padding: 2.5rem 0 0; }
.exo-site-heading > div { max-width: var(--ml-container); padding-inline: 1rem; }
@media (min-width: 640px) { .exo-site-heading > div { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .exo-site-heading > div { padding-inline: 2rem; } }
.exo-site-title { font-size: var(--ml-h2); line-height: 1.15; font-weight: 700; margin-top: 1.5rem; }
.exo-site-subtitle { font-size: 1.125rem; line-height: 1.65; max-width: 48rem; margin-inline: auto; opacity: 1; }
/* seções de /projetos: cabeçalho centrado como no legado (a home é editorial, à esquerda) */
:is(#labs, #apps, #marcos, #alem-do-codigo) .exo-section-head { text-align: center; }
:is(#labs, #apps, #marcos, #alem-do-codigo) .exo-section-title { margin-bottom: 1rem; }
:is(#labs, #apps, #marcos, #alem-do-codigo) .exo-section-lede { max-width: 48rem; margin: 0 auto 3rem; opacity: 1; }
#intro .exo-text, #intro .exo-rich-paragraph { text-align: center; max-width: 48rem; margin-inline: auto; opacity: 0.8; }
#apps { --ml-fold-bg: var(--ml-bg-alt); }
#alem-do-codigo { --ml-fold-bg: #171717; }
html.ml-claro #alem-do-codigo { --ml-fold-bg: #f5f5f5; }

/* labs: dois cards por linha numa coluna de 1024 px; fundo #0f0f0f, título verde, botão pequeno no acento */
#labs .exo-feature-cards-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; max-width: 64rem; margin-inline: auto; }
@media (min-width: 768px) { #labs .exo-feature-cards-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#labs .exo-card, #apps .exo-card { background: var(--ml-bg-alt); border: 0; border-radius: 8px; padding: 24px; box-shadow: none; }
#labs .exo-card-title { font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--ml-accent-ink); margin-bottom: 12px; }
#labs .exo-card-body { font-size: 14px; line-height: 20px; opacity: 1; }
#labs .exo-chip { font-size: 12px; line-height: 16px; background: var(--ml-bg); color: var(--ml-ink); padding: 4px 8px; border: 0; border-radius: 4px; opacity: 1; } /* 24 px, como a .chip do legado */
/* issue #37: o card de Labs e Apps com a estrutura do .card do legado: o respiro é só das margens (o motor põe gap de 12 px), o corpo
   respeita a linha em branco entre os dois parágrafos (o card do motor tem um texto só; 20 px onde o legado tem 12), e as etiquetas
   ganham o rótulo "Stack" (sonda "labs: o respiro…" e pares do rótulo) */
:is(#labs, #apps) .exo-card { gap: 0; }
#labs .exo-card-body { white-space: pre-line; margin-bottom: 16px; }
#labs .exo-chips { margin-bottom: 20px; gap: 6px; } /* gap-1.5 do legado: a primeira fileira de etiquetas cabe inteira */
#labs .exo-chips::before { content: 'Stack'; display: block; width: 100%; font-size: 14px; line-height: 20px; font-weight: 600; text-transform: uppercase; color: var(--ml-accent-ink); margin-bottom: 2px; } /* 8 px até as etiquetas como o legado: o row-gap de 6 px do ul já conta (revisão) */
/* issue #37: a lanterna do legado (.ml-flashlight): um filete de 1 px (máscara que deixa só a borda) e um brilho, ambos radiais a partir do
   ponteiro (--ml-mx/--ml-my, escritos pelo theme.js), apagados em repouso e acesos no hover e no foco. Sem elevação: o legado não eleva. */
:is(#labs, #apps) .exo-card { position: relative; }
:is(#labs, #apps) .exo-card::before, :is(#labs, #apps) .exo-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity 0.4s; }
:is(#labs, #apps) .exo-card::before { padding: 1px; background: radial-gradient(600px circle at var(--ml-mx, 50%) var(--ml-my, 0%), var(--ml-lanterna), transparent 40%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }
:is(#labs, #apps) .exo-card::after { background: radial-gradient(800px circle at var(--ml-mx, 50%) var(--ml-my, 0%), var(--ml-lanterna-brilho), transparent 40%); }
:is(#labs, #apps) .exo-card:is(:hover, :focus-within)::before, :is(#labs, #apps) .exo-card:is(:hover, :focus-within)::after { opacity: 1; }
:is(#labs, #alem-do-codigo) .exo-card-link { display: inline-block; align-self: flex-start; width: fit-content; background: var(--ml-accent); color: var(--ml-on-accent); font-weight: 600; text-decoration: none; transition: transform 0.3s, box-shadow 0.3s; }
#labs .exo-card-link { font-size: 14px; padding: 8px 16px; border-radius: 4px; line-height: 20px; min-height: 0; }

/* marcos (motor 48fffe7, exo#143): etiquetas como os chips dos history-cards, imagem com raio 8 px e filete, link como o botão pequeno dos labs */
#marcos .exo-event .exo-chips { gap: 6px; margin-top: 8px; }
#marcos .exo-chip { font-size: 12px; line-height: 16px; background: var(--ml-bg); color: var(--ml-ink); padding: 4px 8px; border: 0; border-radius: 4px; opacity: 1; }
#marcos .exo-event-media { max-width: 28rem; margin: 12px 0 16px; }
#marcos .exo-event-media img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--ml-bg-alt); }
#marcos .exo-event-link { display: inline-flex; align-items: center; margin-top: 8px; font-size: 14px; line-height: 20px; font-weight: 600; padding: 8px 16px; border-radius: 4px; background: var(--ml-accent); color: var(--ml-on-accent); text-decoration: none; }
#marcos .exo-event-link:hover { text-decoration: none; filter: brightness(1.08); }
:is(#labs, #alem-do-codigo) .exo-card-link:hover { transform: translateY(-2px); box-shadow: 0 0 24px rgb(153 204 0 / 0.35); }

/* apps: ícone de 96 px com cantos de 22%, nome, e o rótulo "↗ APP STORE" no acento */
#apps .exo-feature-cards-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (min-width: 768px) { #apps .exo-feature-cards-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { #apps .exo-feature-cards-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.5rem; } }
#apps .exo-card { text-align: center; gap: 0; } /* o card do motor é flex com gap de 12 px; o respiro aqui é só das margens, como no legado (sonda "apps: o respiro…") */
/* Re-pin 33b5b21 (exo#165): o motor desenha o ícone quadrado (96 px, centrado, sem corte) em .exo-card-icon; o tema só põe os cantos de 22 % e a sombra do legado (shadow-md) */
#apps .exo-card-icon { margin: 0 auto; }
#apps .exo-card-icon img { border-radius: 22%; margin-bottom: 1rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
#apps .exo-card-title { font-size: 1.125rem; font-weight: 700; line-height: 1.55; margin-bottom: 8px; } /* par "apps: nome com 8 px abaixo" */
#apps .exo-card-body { font-size: 14px; line-height: 20px; opacity: 0.8; margin-bottom: 1rem; } /* par "apps: descrição (14/20 apagada)"; 16 px até o rótulo */
#apps .exo-card-link { font-size: 14px; color: var(--ml-accent-ink); text-transform: uppercase; text-decoration: none; background: none; }
#apps .exo-card-link::before { content: '\2197\00a0'; }

/* além do código: seção em #171717, blocos sem caixa, título verde e botão no acento */
#alem-do-codigo .exo-feature-cards-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; max-width: 48rem; margin-inline: auto; }
#alem-do-codigo .exo-card { background: none; border: 0; padding: 0; box-shadow: none; }
#alem-do-codigo .exo-card-title { font-size: 1.5rem; font-weight: 700; color: var(--ml-accent-ink); }
html.ml-claro :is(#labs, #alem-do-codigo) .exo-card-title { color: #4a6100; } /* o legado usa um verde mais escuro nos cards no claro (6,6:1 sobre #f5f5f5; #628000 daria 4,1:1) */
#alem-do-codigo .exo-card-link { font-size: 1rem; padding: 12px 24px; border-radius: 8px; }

/* ---- Artigo, palestra e listagens (Task 7 da Fase G; re-pin be1ac3c) ----
   A página de registro usa os papéis dos campos (exo#145: exo-record-*) e a listagem é configurável (exo#148: exo-listing-*);
   o tema mira essas classes, não mais o elemento. Com a exo#208 a data do registro (exo-record-date) e a linha da listagem
   (exo-listing-list, -item, -title, -date, -summary) ganharam classe de contrato: os seletores por elemento saíram. A página
   de palestra se reconhece pelo link da coleção no cabeçalho da página (/palestras). */
.exo-site:has(article.exo-content) .exo-site-heading, .exo-site:has(.exo-listing-intro) .exo-site-heading { text-align: start; }
.exo-site:has(article.exo-content) .exo-site-subtitle, .exo-site:has(.exo-listing-intro) .exo-site-subtitle { margin-inline: 0; }

/* cabeçalho do registro: a data e a linha de metadados (rótulo e valor) em mono, apagadas, como o .article-meta do legado */
.exo-record-date { margin-top: 0; font-family: var(--ml-mono); font-size: 14px; line-height: 20px; color: var(--ml-ink); }
.exo-record-date time { opacity: 0.6; }
.exo-record-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 8px 0 0; font-family: var(--ml-mono); font-size: 14px; line-height: 20px; opacity: 0.6; color: var(--ml-ink); }
.exo-record-meta-item { display: flex; gap: 6px; min-width: 0; align-items: baseline; }
.exo-record-meta dt { font-weight: 400; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.exo-record-meta dd { margin: 0; min-width: 0; }
.exo-record-meta dd a { color: inherit; text-decoration: underline; text-underline-offset: 0.14em; }

/* a coluna de leitura (38 rem): capa, etiquetas, abertura e corpo, nesta ordem (o legado põe as etiquetas antes da abertura) */
.exo-content { display: flex; flex-direction: column; max-width: 38rem; overflow-wrap: anywhere; }
.exo-content > * { min-width: 0; }
/* A tela aproveitada no registro (decisão do Michel, 06/11/2026, desviando dos 672 px centrados do legado):
   o artigo inteiro — texto e mídia — ocupa o invólucro, sem teto próprio (a revisão dele tirou o de 48rem no texto). */
article.exo-content.exo-record { max-width: none; }
/* o link de volta à coleção acima do título (a.exo-record-back do motor, exo#265, "Voltar para Artigos"): 14 px na cor de
   destaque e a seta, como o legado. Em Inter, não mono: o legado declara font-mono mas o purge do Tailwind tirou a classe
   do CSS dele (mesmo caso do título do ano), e a paridade segue o medido. */
.exo-site-heading .exo-record-back { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 2.5rem; font-family: var(--exo-font); font-size: 14px; line-height: 20px; color: var(--ml-accent-ink); text-decoration: none; }
.exo-site-heading .exo-record-back:hover { text-decoration: underline; }
.exo-site-heading .exo-record-back::before { content: ''; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("/theme/icons/seta-esquerda.svg") center / contain no-repeat; mask: url("/theme/icons/seta-esquerda.svg") center / contain no-repeat; }
article.exo-record { padding-top: 2rem; } /* folga entre o filete do cabeçalho e a capa (ou as etiquetas, sem capa) */
.exo-record-cover { order: -2; margin: 0; }
.exo-record-cover img { width: 100%; height: auto; max-height: 24rem; object-fit: contain; border-radius: 8px; margin: 0 0 32px; }
/* campos sem papel (hoje só as tags): o rótulo fica para o leitor de tela e os valores viram chips */
.exo-record > div:not(.exo-record-body) { order: -1; margin: 0 0 24px; }
.exo-record > div:not(.exo-record-body) > h2 { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.exo-record > div:not(.exo-record-body) > :is(p, ul) { margin: 0; }
.exo-record > div:not(.exo-record-body) > ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.exo-record > div:not(.exo-record-body) > ul > li { font-family: var(--exo-font); font-size: 12px; line-height: 16px; padding: 4px 12px; border: 1px solid var(--ml-line); border-radius: 9999px; background: transparent; color: var(--ml-ink); }
/* abertura em Lora itálico */
.exo-record > .exo-record-summary { order: 0; margin: 0 0 2rem; font-family: var(--ml-serif); font-size: 1.25rem; line-height: 1.625; font-style: italic; opacity: 0.7; color: var(--ml-ink); }
/* corpo: Lora 19/32 (fluido), h2 28 e h3 20 em Inter, listas, código, citação e tabela */
.exo-record-body { order: 1; margin-top: 0; font-family: var(--ml-serif); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); line-height: 1.7; }
.exo-record-body p { margin: 0 0 1.375em; }
.exo-record-body h2 { font-family: var(--exo-font); font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem); font-weight: 700; line-height: 1.25; margin: 3rem 0 0.75rem; }
.exo-record-body h2:first-child { margin-top: 0; }
.exo-record-body h3 { font-family: var(--exo-font); font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 2.25rem 0 0.5rem; }
.exo-record-body a { color: inherit; text-decoration: underline; text-underline-offset: 0.14em; }
.exo-record-body a:hover { color: var(--ml-accent-ink); }
.exo-record-body :is(ul, ol) { padding-left: 24px; margin-bottom: 1.375em; }
.exo-record-body ul { list-style: disc; }
.exo-record-body ol { list-style: decimal; }
.exo-record-body li { margin-bottom: 0.5rem; }
.exo-record-body :not(pre) > code { font-family: var(--ml-mono); font-size: 14px; background: rgb(23 23 23 / 0.8); border: 1px solid var(--ml-line); padding: 0 6px; border-radius: 4px; }
html.ml-claro .exo-record-body :not(pre) > code { background: rgb(0 0 0 / 0.05); }
.exo-record-body pre { font-family: var(--ml-mono); font-size: 14px; line-height: 22.75px; background: var(--ml-bg-alt); padding: 16px; border-radius: 8px; overflow-x: auto; margin-bottom: 24px; }
.exo-record-body pre code { font: inherit; background: none; border: 0; padding: 0; }
.exo-record-body blockquote { border-left: 4px solid var(--ml-accent); padding-left: 1rem; font-style: italic; margin: 1.5rem 0; }
.exo-record-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin-bottom: 1.5rem; }
.exo-record-body :is(th, td) { border: 1px solid var(--ml-line); padding: 0.5rem 0.75rem; text-align: left; }
.exo-record-body img { max-width: 100%; height: auto; border-radius: 8px; }
/* palestra: a abertura em Inter e as etiquetas em pílulas preenchidas, como o legado */
.exo-site:has(.exo-site-masthead a[href="/palestras"]) .exo-record-summary { font-family: var(--exo-font); line-height: 1.75rem; opacity: 0.9; margin-bottom: 1.5rem; }
.exo-site:has(.exo-site-masthead a[href="/palestras"]) .exo-record > div:not(.exo-record-body) > ul > li { font-size: 14px; line-height: 20px; border-color: var(--ml-line-strong); background: #171717; }
html.ml-claro .exo-site:has(.exo-site-masthead a[href="/palestras"]) .exo-record > div:not(.exo-record-body) > ul > li { background: var(--ml-bg-alt); }

/* listagens (/artigos, /palestras): introdução editorial, linha em grade (data e tipo | tempo de leitura | etiquetas) e links do fim.
   Re-pin be1ac3c: a linha tem classes de contrato (exo#208), o tipo vem do motor (exo#209: item.kind_label, o ::after saiu),
   os grupos por ano (exo#207), o filtro por tópico (exo#214) e os links da abertura (exo#215). */
.exo-listing-intro { margin: 0 0 2rem; }
.exo-listing-intro h2 { margin: 0; font-family: var(--exo-font); font-size: 2.25rem; font-weight: 700; line-height: 1.15; color: var(--ml-ink); }
.exo-listing-lead { margin: 0.75rem 0 0; font-family: var(--exo-font); font-size: 1.125rem; line-height: 1.65; opacity: 0.8; color: var(--ml-ink); }
/* os links da abertura (o Medium), como o legado: pequenos, apagados, com a seta no acento */
.exo-listing-intro-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 1rem 0 0; padding: 0; }
.exo-listing-intro-links a { font-family: var(--exo-font); font-size: 12px; opacity: 0.7; color: var(--ml-ink); text-decoration: none; }
.exo-listing-intro-links a:hover { opacity: 1; }
.exo-listing-intro-links a::after { content: ' \2197'; color: var(--ml-accent-ink); }
/* a barra de filtro (pílulas "Tudo" e uma por tópico), como a .filter-bar e as .chip-filter do legado */
.exo-listing-filter { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; }
.exo-listing-filter-chip { display: inline-flex; align-items: center; cursor: pointer; padding: 10px 20px; border: 1px solid var(--ml-bg-alt); border-radius: 9999px; background: transparent; font-family: var(--exo-font); font-size: 1rem; line-height: 1.5; font-weight: 600; color: var(--ml-ink); transition: color 0.15s, background-color 0.15s, border-color 0.15s; }
.exo-listing-filter-chip:hover, .exo-listing-filter-chip:focus-visible { border-color: var(--ml-accent-ink); }
.exo-listing-filter-chip[aria-pressed="true"] { border-color: var(--ml-accent); background: var(--ml-accent); color: var(--ml-on-accent); box-shadow: 0 0 24px rgb(153 204 0 / 0.35); }
/* o título do ano de um grupo (pequeno, apagado, com o filete), como o h2 de ano do legado: a classe font-mono do legado
   não está no CSS dele (purge), então o ano REAL sai em Inter — a paridade segue o medido, não a intenção */
.exo-listing-group > h2 { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--ml-line); font-family: var(--exo-font); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.14em; color: var(--ml-ink); opacity: 0.5; }
.exo-listing-group { margin-top: 2.5rem; }
.exo-listing-list { list-style: none; padding: 0; }
.exo-listing-item { display: grid; grid-template-columns: 144px max-content minmax(0, 1fr); gap: 8px 32px; padding: 24px 0; border-width: 0 0 1px; border-bottom-color: var(--ml-line); }
.exo-listing-item > .exo-listing-date { grid-column: 1; grid-row: 1; margin: 0; font-family: var(--ml-mono); font-size: 14px; color: var(--ml-ink); }
.exo-listing-date > time { opacity: 0.6; }
/* o tipo do item abaixo da data ("Artigo", "Palestra"), do motor (item.kind_label), como a .ml-index-kind do legado */
.exo-listing-kind { display: block; margin: 6px 0 0; font-family: var(--ml-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ml-accent-ink); }
.exo-listing-item > .exo-listing-title { grid-column: 2 / 4; grid-row: 1; font-size: 1.25rem; font-weight: 600; line-height: 1.375; color: var(--ml-ink); text-decoration: none; }
.exo-listing-item > .exo-listing-title:hover { color: var(--ml-accent-ink); }
.exo-listing-item > .exo-listing-summary { grid-column: 2 / 4; grid-row: 2; margin: 0; font-size: 1rem; line-height: 1.5; opacity: 0.75; }
.exo-listing-item > .exo-listing-meta { grid-column: 2 / 4; grid-row: 3; }
.exo-listing-item > .exo-listing-reading { grid-column: 2; grid-row: 3; }
.exo-listing-item > .exo-chips { grid-column: 3; grid-row: 3; }
/* /artigos e /palestras como o legado (05/11, tarde): conteúdo de 960 px (container de 64 rem), resumo de 672 px, título com quebra
   equilibrada, metadados a 0,6, só duas etiquetas por linha (o legado emite duas) e o índice do kicker: a contagem de itens com dois
   dígitos ("10" artigos, "03" palestras), que o theme.js escreve em data-ml-indice (decorativo; sem JS não aparece) */
.exo-site:has(.exo-listing-intro) .exo-site-main { max-width: 64rem; }
/* o cabeçalho da página (o kicker) com a mesma caixa da main, para alinhar com a abertura em qualquer largura */
.exo-site:has(.exo-listing-intro) .exo-site-heading > div { max-width: 64rem; }
.exo-listing-intro h2 { text-wrap: balance; }
.exo-listing-item > .exo-listing-summary { max-width: 42rem; }
.exo-listing-item > .exo-chips > .exo-chip:nth-child(n + 3) { display: none; }
.exo-site:has(.exo-listing-intro) .exo-site-title::before { color: var(--ml-accent-ink); }
.exo-site:has(.exo-listing-intro) .exo-site-title[data-ml-indice]::before { content: attr(data-ml-indice) / ''; }
.exo-listing-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 2rem 0 0; }
.exo-listing-links a { font-family: var(--exo-font); font-size: 12px; opacity: 0.7; color: var(--ml-ink); text-decoration: none; }
.exo-listing-links a:hover { opacity: 1; }
.exo-listing-links a::after { content: ' \2197'; color: var(--ml-accent-ink); }
/* a linha de metadados do item (tempo de leitura, etiquetas, evento e local) em mono 12, na listagem e na home */
.exo-listing-meta, .exo-listing-reading, .exo-collection-item .exo-listing-meta, .exo-collection-item .exo-listing-reading, .exo-listing-item .exo-chips, .exo-collection-item .exo-chips { margin: 4px 0 0; padding: 0; list-style: none; font-family: var(--ml-mono); font-size: 12px; line-height: 16px; opacity: 1; color: var(--ml-ink); }
.exo-listing-meta, .exo-collection-item .exo-listing-meta, .exo-listing-item .exo-chips, .exo-collection-item .exo-chips { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.exo-listing-meta li, .exo-listing-item .exo-chip, .exo-collection-item .exo-chip { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-family: var(--ml-mono); font-size: 12px; line-height: 16px; color: var(--ml-ink); }
/* a 0,6 depois do bloco acima: o "opacity: 1" dele empata na especificidade e vence pela ordem se esta regra vier antes */
.exo-listing-item > :is(.exo-listing-reading, .exo-listing-meta, .exo-chips) { opacity: 0.6; }
@media (max-width: 639px) {
  .exo-listing-item { grid-template-columns: minmax(0, 1fr); }
  .exo-listing-item > * { grid-column: 1 !important; grid-row: auto !important; } /* !important: vence as posições da grade de cima só no celular */
  .exo-listing-item > .exo-listing-date { order: -1; } /* a data e o tipo antes do título, como o legado empilha */
  .exo-listing-item > .exo-chips, .exo-collection-item .exo-chips { order: 1; } /* o tempo de leitura antes das etiquetas */
}

/* ---- Comportamento (theme.js, Task 8) ---- */
/* revelação ao rolar: só existe com `html.ml-js`, que o theme.js liga quando o navegador anima e tem IntersectionObserver */
.ml-js .ml-revelar { opacity: 0; transform: translateY(16px); transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.ml-js .ml-revelar.ml-visivel { opacity: 1; transform: none; }
/* parallax dos orbes do hero (--ml-px e --ml-py vêm do theme.js) */
/* --ml-px/--ml-py vão de -1 a 1 (theme.js, como o legado); a profundidade dos orbes é 46 px no desktop e 20 px no celular */
#inicio { --ml-orbe: 46px; }
@media (max-width: 767px) { #inicio { --ml-orbe: 20px; } }
#inicio::before, #inicio::after { translate: calc(var(--ml-px, 0) * var(--ml-orbe)) calc(var(--ml-py, 0) * var(--ml-orbe)); transition: translate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }
#inicio::after { translate: calc(var(--ml-px, 0) * var(--ml-orbe) * -0.6) calc(var(--ml-py, 0) * var(--ml-orbe) * -0.6); }
/* 1. o palco de ponteiro do legado (.ml-pointer-stage): a aura radial que segue o ponteiro (só com hover de verdade); os feixes do legado têm altura zero no ar e ficaram de fora */
.ml-aura { position: absolute; top: 0; bottom: calc(-1 * var(--ml-palco-extra, 0px)); left: calc(50% - 50vw); width: 100vw; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.5s; background: radial-gradient(620px circle at var(--ml-pointer-x, 50%) var(--ml-pointer-y, 40%), rgb(153 204 0 / 0.18), transparent 62%); }
#inicio.is-pointer-active .ml-aura { opacity: 1; }
/* os orbes respiram (ml-orb-breathe do legado: 11 s e 9 s, o segundo defasado) e o botão primário pulsa o brilho (ml-beacon, 6 s) */
@keyframes ml-orbe-respira { 0%, to { opacity: 0.7; scale: 1; } 50% { opacity: 1; scale: 1.14; } }
#inicio::before { animation: ml-orbe-respira 11s ease-in-out infinite; }
#inicio::after { animation: ml-orbe-respira 9s ease-in-out infinite; animation-delay: -4.5s; }
@keyframes ml-farol { 0%, 65%, to { box-shadow: 0 0 40px rgb(153 204 0 / 0.3); } 30% { box-shadow: 0 0 50px 8px rgb(153 204 0 / 0.45); } }
#inicio .exo-button.is-primary { animation: ml-farol 6s ease-in-out infinite; }
#inicio .exo-button.is-primary:hover, #inicio .exo-button.is-primary:focus-visible { animation: none; }
/* o eyebrow (theme.js: o Foco da ficha): pílula de vidro com o ponto que pulsa, como o .ml-hero-eyebrow */
.ml-eyebrow { display: flex; width: fit-content; align-items: center; gap: 8px; margin-bottom: 24px; padding: 6px 16px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; color: var(--ml-ink); background: rgb(10 10 10 / 0.55); border: 1px solid var(--ml-line); border-radius: 9999px; backdrop-filter: blur(12px); }
html.ml-claro .ml-eyebrow { background: rgb(255 255 255 / 0.6); }
.ml-pulso { position: relative; display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 9999px; background: var(--ml-accent); }
.ml-pulso::after { content: ''; position: absolute; inset: 0; border-radius: 9999px; background: var(--ml-accent); animation: ml-pulso-anel 2.6s ease-out infinite; }
@keyframes ml-pulso-anel { 0% { opacity: 0.55; scale: 1; } 70%, to { opacity: 0; scale: 3.2; } }
/* voltar ao topo: 44 x 44 px, vidro, canto inferior direito */
.ml-voltar-topo { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; width: 44px; height: 44px; border-radius: 9999px; border: 1px solid var(--ml-line); background: rgb(10 10 10 / 0.55); color: var(--ml-ink); backdrop-filter: blur(8px); font-size: 1.25rem; line-height: 1; cursor: pointer; transition: transform 0.3s, border-color 0.3s; }
.ml-voltar-topo:hover { transform: translateY(-2px); border-color: var(--ml-accent); }
.ml-voltar-topo[hidden] { display: none; }
html.ml-claro .ml-voltar-topo { background: rgb(255 255 255 / 0.7); }
/* alternador de tema (a posição no cabeçalho está em "Cabeçalho, menu e rodapé") */
.ml-alternador:hover { border-color: var(--ml-accent); }

/* movimento reduzido: nada anima, tudo aparece */
@media (prefers-reduced-motion: reduce) {
  .ml-js .ml-revelar { opacity: 1; transform: none; transition: none; }
  #inicio::before, #inicio::after { transition: none; translate: none; }
  .ml-aura { display: none; }
  #inicio::before, #inicio::after, #inicio .exo-button.is-primary, .ml-pulso::after { animation: none; }
  .exo-hero-highlight { animation: none; } /* o destaque fica na cor do gradiente, sem cintilar */
  .exo-button, .ml-voltar-topo { transition: none; }
  .exo-button:hover, .ml-voltar-topo:hover { transform: none; }
  :is(#labs, #apps) .exo-card::before, :is(#labs, #apps) .exo-card::after { display: none; } /* a lanterna some, como no legado */
}

/* a ficha vem acima do hero no legado; no HTML o hero é a primeira dobra (só assim o motor o faz o <h1> da página).
   A main é uma grade de seis colunas (Fase H): cada dobra ocupa as seis, salvo Artigos | Palestras (3 + 3, 584 px como o legado)
   e Formulário | Ou direto e e-mail (4 + 2); no celular, uma coluna. */
.exo-site-main { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 3rem; }
.exo-site-main > * { grid-column: 1 / -1; } /* dobras e, nas páginas internas, o artigo, a listagem e os links */
#ficha { order: -1; }
#artigos { grid-column: 1 / 4; }
#palestras { grid-column: 4 / 7; }
#contato { grid-column: 1 / 5; grid-row: span 2; }
#contato-direto, #contato-email { grid-column: 5 / 7; }
/* lado a lado, a sombra de 100vmax (fundo de borda a borda) da dobra da direita cobriria o conteúdo da esquerda: só a da esquerda pinta */
@media (min-width: 1024px) { #palestras, #contato-direto, #contato-email { box-shadow: none; } }
@media (max-width: 1023px) {
  .exo-site-main { grid-template-columns: minmax(0, 1fr); }
  .exo-site-main > *, #artigos, #palestras, #contato, #contato-direto, #contato-email { grid-column: 1; grid-row: auto; }
}

/* ---- Fase H (05/11/2026): os 11 itens do Michel, medidos no legado ---- */
/* 2. ficha colada: 32 px acima e nada abaixo (section.pt-8 do legado); a lista com filete e 20 px de respiro em cima e embaixo */
#ficha { padding: 2rem 0 0; }
.exo-fact-sheet-list { padding: 20px 0; }
/* 3. a faixa de termos tem filete em cima e embaixo */
#esteira .exo-marquee { border-bottom: 1px solid var(--ml-line); }
/* 4 e 7. kicker como o .ml-kicker: índice em verde (por dobra, decorativo como o aria-hidden do legado), texto e um filete até a borda */
.exo-kicker { display: flex; align-items: baseline; gap: 12px; line-height: 16px; }
.exo-kicker::before { color: var(--ml-accent-ink); font-weight: 500; }
/* o índice leva texto alternativo vazio (content: '01' / ''): decorativo, como o aria-hidden do legado; o filete fica a 0,3 como o .ml-kicker-rule */
#sobre .exo-kicker::before { content: '01' / ''; }
#trajetoria .exo-kicker::before { content: '02' / ''; }
#escrita .exo-kicker::before { content: '03' / ''; }
#stack .exo-kicker::before { content: '04' / ''; }
#contato-intro .exo-kicker::before { content: '05' / ''; }
.exo-kicker::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.3; align-self: center; }
/* 5. badges em mono 12, sem pílula, como as .ml-credential */
#certificacoes .exo-logo { font-family: var(--ml-mono); font-size: 12px; line-height: 16px; border-radius: 0; padding: 0; background: none; }
#certificacoes .exo-logo-name { font: inherit; }
#certificacoes .exo-logo-strip-list { max-width: 56rem; margin-top: 8px; } /* par "badges: lista a 8 px do rótulo" */
#certificacoes .exo-logo + .exo-logo::before { content: '·' / ''; margin-right: 8px; opacity: 0.5; } /* como o .ml-credential + .ml-credential:before */
#certificacoes .exo-section-head, #marcas .exo-section-head { margin-bottom: 0; } /* o rótulo cola na lista (mt-2 do legado) */
/* 6. Escrita & Palco: os títulos das colunas como o feed-head do legado (20/700, filete de 2 px) */
#artigos .exo-section-head, #palestras .exo-section-head { border-bottom: 2px solid var(--ml-line-strong); padding-bottom: 8px; margin-bottom: 12px; }
#artigos .exo-section-title, #palestras .exo-section-title { font-size: 20px; font-weight: 700; line-height: 27.5px; }
/* 8. matriz do stack: o índice "04 / 01" em mono verde, por contador */
#stack .exo-feature-cards-list { counter-reset: stack; }
#stack .exo-card { counter-increment: stack; }
#stack .exo-card::before { content: '04 / ' counter(stack, decimal-leading-zero) / ''; display: block; margin-bottom: 8px; font-family: var(--ml-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--ml-accent-ink); }
/* par "stack: etiquetas apagadas": a lista a 0,7 com um ponto entre as etiquetas, como as .ml-capability-tag */
#stack .exo-chips { opacity: 0.7; gap: 4px 8px; font-size: 14px; }
#stack .exo-chip + .exo-chip::before { content: '·' / ''; margin-right: 8px; opacity: 0.5; }
/* listagens: o título da página (h1) vira o kicker do legado ("PALESTRAS" em mono com o filete) e a introdução é o título grande */
.exo-site:has(.exo-listing-intro) .exo-site-title { display: flex; align-items: baseline; gap: 12px; font-family: var(--ml-mono); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ml-ink); opacity: 0.6; max-width: 48rem; }
.exo-site:has(.exo-listing-intro) .exo-site-title::after { content: ''; flex: 1; height: 1px; background: currentColor; align-self: center; }
.exo-listing-intro { max-width: 48rem; }
/* a faixa de chamada no fim da listagem (after.cta) e no fim do registro (record_after.cta, exo#239: a página de cada palestra),
   como a seção escura do legado: fundo alternado, texto centrado, botão primário */
:is(.exo-listing-cta, .exo-record-cta) { margin-top: 4rem; }
:is(.exo-listing-cta, .exo-record-cta) .exo-cta-band { text-align: center; padding: 4rem 1.5rem; border-radius: 12px; background: var(--ml-bg-alt); color: var(--ml-ink); }
:is(.exo-listing-cta, .exo-record-cta) .exo-cta-band :is(h2, .exo-cta-band-title) { font-size: 2.25rem; font-weight: 700; line-height: 1.15; color: var(--ml-ink); margin: 0 auto 1rem; max-width: 42rem; }
:is(.exo-listing-cta, .exo-record-cta) .exo-cta-band :is(p, .exo-cta-band-body) { font-size: 1.125rem; line-height: 1.65; opacity: 0.8; color: var(--ml-ink); margin: 0 auto 2rem; max-width: 42rem; }
:is(.exo-listing-cta, .exo-record-cta) .exo-cta-band .exo-actions { justify-content: center; margin-top: 0; }
.exo-record-after { margin-bottom: 4rem; } /* sem formulário depois, a faixa é o fim da página: respira do rodapé como respira do texto */
.exo-record-after:has(+ .exo-record-form) { margin-bottom: 0; } /* com o formulário, o ritmo é o da listagem: os 32 px do mt-8 dele */
/* 11. a seta de voltar ao topo em verde, a 24 px do canto, como a .to-top */
.ml-voltar-topo { color: var(--ml-accent-ink); bottom: 1.5rem; right: 1.5rem; }

/* ---- Cabeçalho, menu e rodapé (Task 11) ---- */
/* o cabeçalho vira uma grade: marca | menu | botões; o título da página e o resto ocupam as linhas de baixo.
   O invólucro da marca (.exo-site-masthead) deixa de gerar caixa para a marca, o título e o subtítulo entrarem na grade. */
.exo-site-header { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; padding: 0.75rem max(1rem, calc((100% - var(--ml-container)) / 2 + 1rem)); border-width: 0 0 1px; background: rgb(0 0 0 / 0.7); backdrop-filter: blur(12px); }
html.ml-claro .exo-site-header { background: rgb(255 255 255 / 0.7); }
@media (min-width: 640px) { .exo-site-header { padding-inline: max(1.5rem, calc((100% - var(--ml-container)) / 2 + 1.5rem)); } }
@media (min-width: 1024px) { .exo-site-header { padding-inline: max(2rem, calc((100% - var(--ml-container)) / 2 + 2rem)); column-gap: 2rem; } }
/* Re-pin be1ac3c (exo#224): o título e o subtítulo saíram do <header> para div.exo-site-heading, então a barra (marca, menu e
   botões) fica fixa em TODAS as páginas, como o legado; o contorno position: static das internas saiu. O masthead (a marca e,
   no registro, o link da coleção) é uma linha só, para a barra não crescer. */
.exo-site-masthead { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 1rem; min-width: 0; margin: 0; max-width: none; }
.exo-site-brand { grid-column: 1; grid-row: 1; }
.exo-site-brand, .exo-site-brand-name { font-size: 1.125rem; font-weight: 700; color: var(--ml-ink); text-decoration: none; }
.exo-site-brand img { height: 80px; width: auto; display: block; }
/* só o logo, como o legado: é o painel que decide (Aparência, "Mostrar o nome ao lado do logo" desligado, exo#175);
   o motor então dá ao <img> o alt com o nome e o link da marca segue com nome acessível */
.exo-site-nav { grid-column: 2; grid-row: 1; justify-self: center; margin: 0; }
.exo-site-nav-list { display: flex; gap: 2rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.exo-site-nav-link { font-size: 1rem; font-weight: 500; line-height: 1.5rem; color: var(--ml-ink); text-decoration: none; transition: color 0.15s; }
.exo-site-nav-link:hover { color: var(--ml-accent-ink); text-decoration: none; }
.exo-site-nav-link[aria-current="page"] { color: var(--ml-ink); font-weight: 500; text-decoration: none; } /* o legado não marca a página atual; o aria-current fica para o leitor de tela */
.ml-acoes { grid-column: 3; grid-row: 1; display: flex; align-items: center; gap: 0.5rem; }
.ml-alternador { width: 44px; height: 44px; border-radius: 9999px; border: 1px solid var(--ml-line); background: transparent; color: var(--ml-ink); font-size: 1.125rem; cursor: pointer; }
.ml-menu-botao { display: none; width: 44px; height: 44px; border-radius: 9999px; border: 1px solid var(--ml-line); background: transparent; color: var(--ml-ink); cursor: pointer; align-items: center; justify-content: center; }
.ml-menu-botao:hover { border-color: var(--ml-accent); }
.ml-menu-barras, .ml-menu-barras::before, .ml-menu-barras::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; content: ''; }
.ml-menu-barras { position: relative; }
.ml-menu-barras::before { position: absolute; top: -6px; }
.ml-menu-barras::after { position: absolute; top: 6px; }
/* abaixo de 1024 px o menu vira um painel que o botão abre (o legado só fazia isso abaixo de 1280 px, e sem aria-expanded) */
@media (max-width: 1023px) {
  .ml-menu-botao { display: inline-flex; }
  .exo-site-header .exo-site-nav { display: none; grid-column: 1 / -1; grid-row: 2; justify-self: stretch; padding: 0.5rem 0 0.75rem; }
  .exo-site-header .exo-site-nav.ml-menu-aberto { display: block; }
  .exo-site-nav-list { flex-direction: column; gap: 0; }
  .exo-site-nav-link { display: block; padding: 0.625rem 0; }
}
@media (min-width: 1024px) { .exo-site-nav { display: block; } }

/* rodapé: centralizado, filete no tom da seção alternada, links pequenos e apagados */
.exo-site-footer { padding: 2rem max(1rem, calc((100% - var(--ml-container)) / 2 + 1rem)); border-width: 1px 0 0; border-top-color: var(--ml-bg-alt); background: var(--ml-bg); color: var(--ml-ink); font-size: 14px; text-align: center; }
.exo-site-footer > div { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; max-width: none; margin: 0; }
.exo-site-footer > div > * { margin: 0; }
.exo-site-footer-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; list-style: none; padding: 0; }
.exo-site-footer a { color: var(--ml-ink); opacity: 0.7; text-decoration: none; transition: opacity 0.15s, color 0.15s; }
.exo-site-footer a:hover { opacity: 1; color: var(--ml-accent-ink); }
.exo-site-footer-text { opacity: 1; font-size: 1rem; line-height: 1.5rem; } /* 16/24 como o .footer-copyright */
.exo-site-footer-social-item { display: flex; line-height: 0; } /* o li do motor é list-item com 20 px de linha e deixava a fila com 29 px; o legado tem 24 */
/* 10. rodapé como o legado (Fase H): copyright 16 px, ícones SVG de 24 px pelo tema (mask nas classes exo-site-icon-* do motor,
   desenhos em /theme/icons/), crédito 14 px a 0,75; o feed vira o ícone RSS. Sem desenho conhecido, o link social volta a ser texto. */
.exo-site-footer > div { gap: 0; }
/* os seletores levam o invólucro e :not([hidden]) para empatar com o space-y-3 do motor (.space-y-3 > :not([hidden]) ~ :not([hidden]), três classes) e vencer por vir depois */
.exo-site-footer > div > .exo-site-footer-note:not([hidden]) { opacity: 0.7; margin: 0 0 24px; order: 0; } /* o .footer-resume do legado: acima do copyright, mb-6 */
.exo-site-footer > div > .exo-site-footer-text:not([hidden]) { margin: 0 0 16px; order: 1; }
.exo-site-footer > div > .exo-site-footer-social:not([hidden]) { gap: 24px; margin: 0 0 16px; order: 2; }
.exo-site-footer > div > p:has(> .exo-site-footer-feed):not([hidden]) { margin: 0 0 16px; order: 3; } /* o motor embrulha o feed e o voltar ao topo em <p> sem classe */
.exo-site-footer > div > .exo-site-footer-credit:not([hidden]) { font-size: 14px; opacity: 0.75; margin: 0; order: 4; }
.exo-site-footer > div > p:has(> .exo-site-footer-top):not([hidden]) { margin: 12px 0 0; order: 5; }
.exo-site-footer .exo-site-footer-note-link { color: var(--ml-accent-ink); opacity: 1; } /* o .link-accent do legado; a opacidade fica só no parágrafo */
.exo-site-footer .exo-site-footer-social-link, .exo-site-footer .exo-site-footer-feed { display: inline-block; width: 24px; height: 24px; font-size: 0; line-height: 0; color: var(--ml-ink); opacity: 1; border-radius: 4px; }
/* o desenho fica no ::before: uma máscara no próprio <a> recortaria o anel de foco (revisão da Fase H) */
.exo-site-footer .exo-site-footer-social-link::before, .exo-site-footer .exo-site-footer-feed::before { content: ''; display: block; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--ml-icone) center / contain no-repeat; mask: var(--ml-icone) center / contain no-repeat; }
.exo-site-footer .exo-site-footer-social-link:hover, .exo-site-footer .exo-site-footer-feed:hover { opacity: 1; color: var(--ml-accent-ink); }
.exo-site-icon-linkedin { --ml-icone: url("/theme/icons/linkedin.svg"); }
.exo-site-icon-github { --ml-icone: url("/theme/icons/github.svg"); }
.exo-site-icon-youtube { --ml-icone: url("/theme/icons/youtube.svg"); }
.exo-site-footer-feed, .exo-site-icon-rss { --ml-icone: url("/theme/icons/rss.svg"); } /* o RSS é a quarta rede (Configurações); o link de feed separado fica coberto se voltar */
.exo-site-footer .exo-site-footer-social-link:not(.exo-site-icon-linkedin):not(.exo-site-icon-github):not(.exo-site-icon-youtube):not(.exo-site-icon-rss) { width: auto; height: auto; font-size: 14px; line-height: 1.5; opacity: 0.7; }
.exo-site-footer .exo-site-footer-social-link:not(.exo-site-icon-linkedin):not(.exo-site-icon-github):not(.exo-site-icon-youtube):not(.exo-site-icon-rss)::before { content: none; }
/* o link "Preferências de cookies" (exo#333) vem num <p> sem classe, o último do rodapé: sem order ele subiria para logo depois da nota */
.exo-site-footer > div > p:has(> .exo-cookie-reopen):not([hidden]) { font-size: 14px; margin: 12px 0 0; order: 6; }

/* 11. Aviso de cookies (exo#333, motor 0.3.0). O motor decide quando ele aparece (barra fixa no pé com a escolha
   pendente ou reaberto pelo rodapé, escondido depois) e o tema só o veste com os tokens do site. Aceitar e Recusar
   têm o mesmo peso de propósito: a LGPD pede recusar tão fácil quanto aceitar, então nenhum dos dois ganha o verde. */
.exo-cookie-notice { background: var(--ml-bg-alt); color: var(--ml-ink); border-color: var(--ml-line-strong); font-size: 14px; line-height: 20px; }
.exo-cookie-notice.is-open, html[data-exo-consent="pending"] .exo-cookie-notice { padding: 1rem max(1rem, calc((100% - var(--ml-container)) / 2 + 1rem)); box-shadow: 0 -12px 32px rgb(0 0 0 / 0.45); }
html.ml-claro .exo-cookie-notice.is-open, html.ml-claro[data-exo-consent="pending"] .exo-cookie-notice { box-shadow: 0 -8px 24px rgb(0 0 0 / 0.08); }
.exo-cookie-text { opacity: 0.85; }
.exo-cookie-notice .exo-cookie-policy { color: var(--ml-accent-ink); }
.exo-cookie-accept, .exo-cookie-refuse { min-height: 2.75rem; padding: 0.5rem 1.25rem; border: 1px solid var(--ml-line-strong); border-radius: 4px; background: transparent; color: var(--ml-ink); font-size: 14px; font-weight: 600; transition: border-color 0.3s, color 0.3s; }
:is(.exo-cookie-accept, .exo-cookie-refuse):hover { background: transparent; border-color: var(--ml-accent); color: var(--ml-accent-ink); }
:is(.exo-cookie-accept, .exo-cookie-refuse):focus-visible { outline: 2px solid var(--ml-focus); outline-offset: 2px; }
/* a margem lateral é a do cabeçalho, nos mesmos pontos de quebra, para o texto alinhar com o logo */
@media (min-width: 640px) { .exo-cookie-notice.is-open, html[data-exo-consent="pending"] .exo-cookie-notice { padding-inline: max(1.5rem, calc((100% - var(--ml-container)) / 2 + 1.5rem)); } }
@media (min-width: 1024px) { .exo-cookie-notice.is-open, html[data-exo-consent="pending"] .exo-cookie-notice { padding-inline: max(2rem, calc((100% - var(--ml-container)) / 2 + 2rem)); } }
@media (min-width: 48rem) {
  .exo-cookie-notice.is-open, html[data-exo-consent="pending"] .exo-cookie-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
  .exo-cookie-notice .exo-cookie-actions { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .exo-cookie-accept, .exo-cookie-refuse { transition: none; } }

/* "Ou direto" (links do contato na home): rótulo mono no acento e uma linha por link, com o domínio ao lado */
#contato-direto :is(.exo-text, .exo-rich-text) { max-width: 42rem; }
#contato-direto p { margin: 0 0 0.75rem; font-family: var(--ml-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ml-accent-ink); }
#contato-direto ul { list-style: none; padding: 0; margin: 0; }
#contato-direto li { padding: 0.75rem 0; border-bottom: 1px solid var(--ml-line); font-family: var(--ml-mono); font-size: 12px; opacity: 0.9; }
#contato-direto li a { margin-right: 0.75rem; font-family: var(--exo-font); font-size: 1rem; font-weight: 600; color: var(--ml-ink); text-decoration: none; }
#contato-direto li a:hover { color: var(--ml-accent-ink); }

/* ---- Realce de sintaxe (highlight.js do motor, exo#140): paleta tipo Prism "tomorrow" do legado ---- */
/* o span do realce herdaria a cor do texto pela regra de cor herdada lá em cima, então as cores vêm daqui */
:root { --ml-tk-comentario: #999; --ml-tk-palavra: #cc99cd; --ml-tk-texto: #7ec699; --ml-tk-numero: #f08d49; --ml-tk-funcao: #f8c555; --ml-tk-atributo: #e2777a; --ml-tk-tipo: #67cdcc; }
html.ml-claro { --ml-tk-comentario: #6a737d; --ml-tk-palavra: #8250df; --ml-tk-texto: #0a7a3d; --ml-tk-numero: #b05a00; --ml-tk-funcao: #8a6400; --ml-tk-atributo: #c4352d; --ml-tk-tipo: #0b7285; }
pre code .hljs-comment, pre code .hljs-quote, pre code .hljs-meta { color: var(--ml-tk-comentario); font-style: italic; }
pre code .hljs-keyword, pre code .hljs-selector-tag, pre code .hljs-doctag, pre code .hljs-bullet, pre code .hljs-section { color: var(--ml-tk-palavra); }
pre code .hljs-string, pre code .hljs-regexp, pre code .hljs-addition, pre code .hljs-template-variable { color: var(--ml-tk-texto); }
pre code .hljs-number, pre code .hljs-literal, pre code .hljs-built_in, pre code .hljs-symbol, pre code .hljs-params { color: var(--ml-tk-numero); }
pre code .hljs-title, pre code .hljs-function, pre code .hljs-class .hljs-title { color: var(--ml-tk-funcao); }
pre code .hljs-attr, pre code .hljs-attribute, pre code .hljs-name, pre code .hljs-tag, pre code .hljs-variable, pre code .hljs-deletion, pre code .hljs-property { color: var(--ml-tk-atributo); }
pre code .hljs-type, pre code .hljs-selector-class, pre code .hljs-selector-id { color: var(--ml-tk-tipo); }
pre code .hljs-strong { font-weight: 700; }
pre code .hljs-emphasis { font-style: italic; }