/* Sistema visual light studio compartilhado por todas as paginas do Xikota.ai. */

@font-face { font-family: "Sora Local"; src: url('/assets/fonts/Sora-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora Local"; src: url('/assets/fonts/Sora-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora Local"; src: url('/assets/fonts/Sora-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora Local"; src: url('/assets/fonts/Sora-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  /* Paleta branca unificada (2026-08-07, pedido do dono: o campo e branco,
     nao bege). As internas herdam o branco da home. O vermilion institucional
     #dc000c segue como accent das internas (D15); a home sobrepoe o proprio
     accent na camada .home. */
  --page: #FFFFFF;
  --page-soft: #F5F4F2;
  --surface: #F1F0EE;
  --surface-hi: #FBFBFA;
  --surface-low: #E8E6E3;
  --ink: #17191F;
  --ink-2: #45464E;
  --ink-3: #5A5B63;
  --vermilion: #dc000c;
  --vermilion-deep: #9a060d;
  --danger-ink: #8f050c;
  --hair: rgba(23, 25, 31, 0.12);
  --hair-strong: rgba(23, 25, 31, 0.22);
  --shine: rgba(255, 255, 255, 0.72);
  --font: "Sora Local", "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font);
  --font-ui: var(--font);
  --maxw: 880px;
  --wide: 1320px;
  /* Altura real da .site-nav, medida. Ela muda de altura por breakpoint (a nav
     quebra em duas linhas abaixo de 900px), e os offsets sticky e de ancora
     estavam com numeros fixos calibrados so pro desktop. Quem precisa de
     "logo abaixo da nav" usa este token, nunca um px cravado. */
  --nav-h: 82px;
  /* Altura da barra de filtro das bibliotecas, medida: 124px em toda largura
     de 360 a 1440. Quem salta pra uma ancora dentro da biblioteca precisa
     limpar a nav E a barra, que fica grudada logo abaixo dela. */
  --barra-h: 124px;
  --gutter: clamp(20px, 5vw, 72px);
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 38px;
  --r-full: 999px;
  --shadow-1: 0 1px 0 var(--shine) inset, 0 8px 22px rgba(48, 44, 38, 0.10);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.86) inset, 0 26px 60px rgba(48, 44, 38, 0.16), 0 6px 16px rgba(48, 44, 38, 0.08);
  --focus-color: var(--vermilion);
  --d-fast: 120ms;
  --d-base: 240ms;
  --d-slow: 520ms;
  --d-reveal: 620ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Compatibilidade com os nomes antigos enquanto o HTML fica byte-identico. */
  --void: var(--page);
  --sumi: var(--surface);
  --graphite: var(--surface-low);
  --graphite-2: var(--page-soft);
  --paper: var(--ink);
  --paper-hi: var(--ink);
  --ink-1: var(--ink);
  --vermilion-hot: var(--vermilion-deep);
  --glass-edge: var(--hair-strong);
  --focus: none;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* O feedback de toque e dos proprios elementos (press dos .btn, fisica dos
     logos); o flash cinza nativo do WebKit por cima so suja. */
  -webkit-tap-highlight-color: transparent;
  background: var(--page);
}
body {
  min-width: 320px;
  font-family: var(--font);
  color: var(--ink);
  background: var(--page);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::after { display: none !important; }
p { text-wrap: pretty; }
img, video { max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { color: #fff; background: var(--vermilion); }

a { color: inherit; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
  box-shadow: none;
  border-radius: 8px;
}
main[tabindex="-1"]:focus,
#stage:focus { outline: none; box-shadow: none; }

.skip {
  position: fixed;
  left: 16px;
  top: -88px;
  z-index: 1000;
  padding: 12px 18px;
  color: #fff;
  background: var(--vermilion);
  border-radius: var(--r-sm);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--d-base) var(--ease-out);
}
.skip:focus { top: 16px; }

/* gutter - 20px: o pill tem 20px de padding interno na esquerda, entao o
   texto do wordmark cai exatamente na margem do conteudo em qualquer largura
   (dono, 2026-08-02: header desalinhado das margens do conteudo). */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  padding: 14px calc(var(--gutter) - 20px) 0;
}
.site-nav::before {
  content: "";
  position: absolute;
  inset: 0 0 -30px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--page) 58%, transparent);
}
/* Na home a navbar nao cobre a hero (decisao do dono, 2026-08-01): ela vive
   fixa, fora da tela, e so aparece quando a hero sai de cena (classe nav-on
   aplicada pelo site.js). Sem JS ela volta a ser um header estatico no topo. */
.home .site-nav {
  position: fixed;
  inset: 0 0 auto;
  transform: translateY(-112%);
  visibility: hidden;
  transition: transform var(--d-slow) var(--ease-out), visibility 0s var(--d-slow);
}
.home.nav-on .site-nav {
  transform: none;
  visibility: visible;
  transition: transform var(--d-slow) var(--ease-out);
}
.home:not(.js) .site-nav { position: absolute; transform: none; visibility: visible; }
.nav-inner {
  /* Largura da capsula derivada do shell do conteudo (wrap --wide + gutter):
     o 1120px fixo deixava o header fora do grid do conteudo em tela larga. */
  max-width: min(100%, calc(var(--wide) - 2 * var(--gutter) + 40px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 10px 9px 20px;
  border: 1px solid rgba(23, 26, 32, 0.13);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.74) inset, 0 12px 30px rgba(46, 42, 36, 0.08);
}
.wordmark {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark .dot { color: var(--vermilion-deep); }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  color: var(--ink-2);
  border-radius: var(--r-full);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--d-fast) var(--ease-standard), background var(--d-fast) var(--ease-standard), transform var(--d-fast) var(--ease-out);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.46);
}
.nav-links a:hover { transform: translateY(-1px); }
.nav-cta .m-short { display: none; }

/* Acoes fixas do header: conta e CTA comercial ficam FORA da faixa de links.
   Ate 2026-08-12 o "Entrar" era o sexto link dessa faixa, que no mobile vira
   scroll horizontal sem barra: ele nascia fora da tela (achado do dono). */
.nav-acoes { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-conta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-full);
  background: var(--surface-hi);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--d-fast) var(--ease-standard), color var(--d-fast) var(--ease-standard), background var(--d-fast) var(--ease-standard);
}
.nav-conta:hover,
.nav-conta[aria-current="page"] { border-color: var(--vermilion-deep); color: var(--vermilion-deep); background: #fff; }
.nav-conta-icone { flex-shrink: 0; }

.btn,
.btn-primary,
a.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  color: #fff;
  background: var(--vermilion);
  background-image: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 12px 22px rgba(154, 6, 13, 0.20);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out), background var(--d-fast) var(--ease-standard);
}
.btn:hover,
.btn-primary:hover,
a.btn:hover {
  transform: translateY(-3px) scale(1.012);
  background: #c6000b;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.38) inset, 0 18px 28px rgba(154, 6, 13, 0.24);
}
.btn:active,
.btn-primary:active,
a.btn:active { transform: translateY(2px) scale(0.97); transition-duration: 90ms; }
.btn, .btn-primary, a.btn { translate: var(--bx, 0px) var(--by, 0px); transition-property: transform, box-shadow, background, translate; transition-duration: var(--d-base); }
.btn.magnet-release { transition: translate 520ms cubic-bezier(0.22, 1.6, 0.32, 1), transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out), background var(--d-fast) var(--ease-standard); }
.btn[disabled], .btn[aria-busy="true"] {
  cursor: wait;
  opacity: 0.72;
  transform: scale(0.985);
}
.btn-ghost,
a.btn-ghost,
a.ghost {
  color: var(--ink);
  background: rgba(250, 250, 249, 0.42);
  border-color: var(--hair-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
.btn-ghost:hover,
a.btn-ghost:hover,
a.ghost:hover {
  color: var(--vermilion-deep);
  background: rgba(251, 251, 250, 0.7);
  border-color: rgba(154, 6, 13, 0.45);
  box-shadow: var(--shadow-1);
}

main { display: block; }
.wrap { width: min(100%, var(--maxw)); margin: 0 auto; padding-inline: var(--gutter); }
.home .wrap { width: min(100%, var(--wide)); max-width: var(--wide); }
.hero-int { padding: clamp(64px, 9vh, 104px) 0 clamp(34px, 5vh, 54px); }
h1, h2, h3 { color: var(--ink); text-wrap: balance; }
h1 {
  max-width: 14ch;
  font-size: clamp(2.15rem, 5vw, 4.25rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.055em;
}
h1 em, h2 em { color: var(--vermilion-deep); font-style: normal; }
h2 {
  font-size: clamp(1.55rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;
}
h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.022em; }
.lede { max-width: 62ch; margin-top: 20px; color: var(--ink-2); font-size: clamp(1.04rem, 1.5vw, 1.22rem); }
.band { padding: clamp(54px, 8vh, 92px) 0; }

.prose { padding-bottom: 20px; }
.prose > * + * { margin-top: 20px; }
.prose p, .prose li { color: var(--ink-2); font-size: 1rem; }
.prose strong, .prose b { color: var(--ink); }
.prose ol, .prose ul { padding-left: 24px; }
.prose li + li { margin-top: 10px; }
.prose h2 { margin-top: 52px; }
.prose h3 { margin-top: 34px; }
.prose a, .card a, .fine a, .lede a, #resultado a:not(.btn),
.applied-case a, .today a, .proofs a, .coda a, .saida-coda a,
.foot-inner a:not(.wordmark), .casas a {
  color: var(--vermilion-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(154, 6, 13, 0.38);
  transition: color var(--d-fast), text-decoration-color var(--d-fast);
}
.prose a:hover, .card a:hover, .fine a:hover, .lede a:hover, #resultado a:not(.btn):hover,
.applied-case a:hover, .today a:hover, .proofs a:hover, .coda a:hover, .saida-coda a:hover,
.foot-inner a:not(.wordmark):hover, .casas a:hover {
  color: var(--vermilion-deep);
  text-decoration-color: var(--vermilion);
}
.prose blockquote {
  padding: 16px 18px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-sm);
  background: var(--surface-hi);
  color: var(--ink-2);
}

.card {
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, rgba(251, 251, 250, 0.72), rgba(238, 237, 234, 0.72));
  box-shadow: var(--shadow-1);
  transition: transform var(--d-slow) var(--ease-out), box-shadow var(--d-slow) var(--ease-out), border-color var(--d-base);
}
.card + .card { margin-top: 18px; }
.card:hover { transform: translateY(-4px); border-color: rgba(154, 6, 13, 0.22); box-shadow: var(--shadow-2); }
.card .k, .k {
  color: var(--vermilion-deep);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.card h3 { margin-top: 8px; }
.card .resumo { margin-top: 9px; color: var(--ink-2); font-size: 0.95rem; }
details.metodo { margin-top: 16px; border-top: 1px solid var(--hair); }
details.metodo summary {
  min-height: 44px;
  padding: 12px 0 2px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
details.metodo summary::-webkit-details-marker { display: none; }
details.metodo summary::before { content: "+"; color: var(--vermilion-deep); font-size: 1.1rem; font-weight: 800; }
details.metodo[open] summary::before { content: "\2212"; }
.metodo-body { padding: 12px 0 4px; }
.metodo-body > * + * { margin-top: 14px; }
.metodo-body .lbl {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-3);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.metodo-body p, .metodo-body li { color: var(--ink-2); font-size: 0.94rem; white-space: pre-line; }
.fine { color: var(--ink-3); font-size: 0.85rem; line-height: 1.58; }
code, .mono {
  padding: 3px 7px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--hair);
  border-radius: 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}
.steps { margin-top: 20px; display: grid; gap: 16px; list-style: none; counter-reset: st; }
.steps li { position: relative; padding-left: 48px; color: var(--ink-2); counter-increment: st; }
.steps li::before {
  content: counter(st, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  padding: 3px 7px;
  color: var(--vermilion-deep);
  border: 1px solid var(--hair-strong);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 800;
}

/* Hero interativo */
.progress, .lightfall { display: none !important; }
/* Recomposicao pos-auditoria (2026-08-01): a cabeca abre a home sozinha, em
   destaque; copy e painel do metodo descem para baixo do palco. O palco vive
   em fluxo normal, nao mais como camada absoluta atras da copy. */
.home .hero {
  /* Direcao de arte da hero (2026-08-02): fundo off-white quente, cabeca 15%
     menor e mais alta, orbita de logos em tres planos, headline em 2 linhas.
     Valores centrais nas custom properties abaixo; o resto deriva delas. */
  --hero-bg: #FFFFFF;
  --hero-ink: #17191F;
  --hero-accent: #C92A22;
  --head-scale: 0.85;
  --logo-shadow: 0 14px 18px rgba(20, 22, 26, 0.12);
  --chin-gap: 40px;
  /* Altura da composicao; o queixo vive a 90% dela (medido no alpha do poster). */
  --comp-h: calc(min(70svh, 46vw, 720px) * var(--head-scale));
  position: relative;
  display: block;
  isolation: isolate;
  overflow: clip;
  background: var(--hero-bg);
}
#stage {
  position: relative;
  z-index: 0;
  height: auto;
  padding: clamp(32px, 5vh, 56px) 0 0;
  /* SEM overflow aqui: a drop-shadow da cabeca desce alem do palco, e um clip
     cortaria a sombra numa reta visivel sobre a headline. O .hero ja clipa. */
  display: grid;
  place-items: center;
  background: var(--hero-bg);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  /* Touch: segurar pro sorriso nao pode abrir menu de contexto do iOS nem
     piscar o highlight cinza de tap. */
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#composition {
  position: relative;
  z-index: 1;
  height: var(--comp-h);
  aspect-ratio: 3 / 4;
}
/* Os videos e posters carregam canal alpha (fundo removido offline por
   subject-lift do Vision). Sem plate, halo ou feather: a cabeca compoe
   direto sobre o fundo em qualquer largura. A sombra ambiental assenta o
   recorte no off-white sem virar sticker. */
#head {
  position: absolute;
  inset: 0;
  z-index: 1;
  filter: drop-shadow(0 26px 32px rgba(15, 18, 22, 0.13));
}
#head video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  pointer-events: none;
  /* A pilha nasce declarada AQUI, nao so no topo do motor. Sao quatro assets
     com canal alpha empilhados: duas camadas opacas ao mesmo tempo somam alpha
     nas bordas antialiasadas e o contorno engrossa numa cabeca-fantasma. Sem
     estas duas linhas, os quatro videos comecam em opacity 1 / z-index auto, e
     o topo da pilha por ordem de DOM e o v-startle, nao o neutro. Enquanto a
     midia so entrava depois de um clique, a janela era estreita; com o
     aquecimento automatico ela existe em toda visita, ate o motor executar. */
  opacity: 0;
  z-index: 1;
}
#head video#v-right { opacity: 1; z-index: 2; }
html:not(.tem-js) #head video { display: none; }
#head-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  /* O poster e o frame 0 do right.webm, que e a camada que o motor deixa
     visivel: a troca IDA e praticamente invisivel sozinha (2% dos pixels, so
     ruido fino de codec, porque o video passa por YUV e o WebP nao). Este fade
     existe pela VOLTA: quando o neutro cai na recuperacao por Blob, o poster
     reaparece e a cabeca pode estar virada, entao ali o corte seria um salto de
     verdade. Medido: os frames intermediarios ficam sempre entre os dois
     extremos, sem estouro. O bloco global de movimento reduzido zera esta
     duracao, e tudo bem: sem o fade a ida continua invisivel. */
  transition: opacity 200ms linear;
}
#head-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
#stage.media-ready #head-poster { opacity: 0; }
#logos {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  perspective: 900px;
}
.logo {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  place-items: center;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transform: translate(-50%, -50%) translate3d(calc(var(--mx, 0) * var(--depth)), calc(var(--my, 0) * var(--depth)), 0) translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(var(--drot, 0deg));
  transition: transform 0.35s var(--ease-out);
}
html:not(.tem-js) .logo { cursor: default; pointer-events: none; }
html:not(.tem-js) .logo .tip { display: none; }
/* Fisica dos logos (desktop fine-pointer): arrastaveis, com arremesso e mola
   de retorno. Durante o gesto a transicao sai pra nao brigar com o rAF. */
/* pan-y, nunca none: swipe vertical que comeca no logo segue rolando a pagina
   (o browser cancela o drag e a mola devolve); so o gesto horizontal vira
   arremesso. Logo nao pode ser buraco morto de scroll na primeira dobra. */
.logo.draggable { cursor: grab; touch-action: pan-y; }
.logo.dragging { cursor: grabbing; transition: none; }
.logo.dragging .tip, .logo.settling .tip { opacity: 0 !important; }
.logo.settling { transition: none; }
.logo.dragging .float, .logo.settling .float { animation-play-state: paused; }
.logo:focus-visible { outline: 3px solid var(--vermilion); outline-offset: 5px; border-radius: 14px; box-shadow: none; }
.logo .float { display: block; animation: logo-bob var(--dur) ease-in-out infinite; animation-delay: var(--delay); will-change: transform; }
.logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(var(--logo-shadow));
  transform: scale(1);
  transition: transform 0.3s var(--ease-out), filter 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
/* Tres planos de profundidade: Figma e Gemini na frente (nitidas, sombra mais
   presente), cabeca no meio, Claude e OpenAI atras (menores via --w, levemente
   apagadas e desfocadas). Hover traz qualquer logo pra frente. */
.logo[aria-label="Figma"] img, .logo[aria-label="Gemini"] img { filter: drop-shadow(0 16px 20px rgba(20, 22, 26, 0.16)); }
.logo[aria-label="Claude"] img, .logo[aria-label="ChatGPT"] img { opacity: 0.92; filter: blur(0.7px) drop-shadow(0 12px 16px rgba(20, 22, 26, 0.10)); }
/* Hover so em device com hover real: no touch o :hover gruda depois do tap e
   deixaria tooltip e lift presos ate o proximo toque em outro lugar. */
@media (hover: hover) {
  .logo:hover img { transform: scale(1.027) translateY(-3px); opacity: 1; filter: drop-shadow(0 20px 24px rgba(20, 22, 26, 0.18)); }
  .logo:hover .tip { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.logo:focus-visible img { transform: scale(1.027) translateY(-3px); opacity: 1; filter: drop-shadow(0 20px 24px rgba(20, 22, 26, 0.18)); }
@keyframes logo-bob {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(var(--dx), var(--dy), 12px) rotate3d(1, 1, 0, var(--tilt)) rotate(var(--rz)); }
}
.tip {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  padding: 5px 12px;
  color: #fff;
  background: var(--ink);
  border-radius: var(--r-full);
  font: 600 13px/1.35 var(--font);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.18s ease 0.12s, transform 0.18s ease 0.12s;
}
.logo:focus-visible .tip, .logo.tip-open .tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.logo:focus-visible .tip, .logo.tip-open .tip { transition-delay: 0s; }

.home .hero-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  justify-items: center;
  gap: clamp(28px, 4vw, 56px);
  /* O queixo vive a 90% de --comp-h; esta margem deixa --chin-gap de respiro
     entre o queixo e a headline. */
  margin-top: calc(var(--chin-gap) - var(--comp-h) * 0.10);
  padding-top: 0;
  padding-bottom: clamp(56px, 9vh, 104px);
}
.home .hero-copy { align-self: start; text-align: center; }
.home .hero-copy h1 { margin-inline: auto; }
.home .hero-copy .sub { margin-inline: auto; }
.home .hero-copy .actions { justify-content: center; }
/* Headline editorial em duas linhas: o em vira bloco e carrega a linha toda. */
.home .hero-copy h1 {
  max-width: none;
  margin-top: 0;
  font-weight: 700;
  font-size: clamp(4rem, 6vw, 5.75rem);
  line-height: 0.88;
  letter-spacing: -0.06em;
  color: var(--hero-ink);
}
.home .hero-copy h1 em { display: block; font-style: normal; color: var(--hero-accent); }
/* Um vermelho so dentro da hero: o CTA primario acompanha o accent da headline. */
.home .hero .btn-primary { background: var(--hero-accent); }
.home .hero .btn-primary:hover { background: #b02419; }
.home .hero-copy .sub { max-width: 48ch; margin-top: 26px; color: var(--ink-2); font-size: clamp(1rem, 1.3vw, 1.16rem); }
.actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Credencial do Best Paper Award: card quieto (Apple/Airbnb, dono 2026-08-02).
   Hairline uniforme, canto suave, o selo da IARIA é o único acento; sem barra
   de cor lateral, sem kicker em vermilion. */
.hero-award {
  margin: 30px auto 0;
  max-width: 58ch;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px 16px 16px;
  border: 1px solid var(--hair-strong);
  border-radius: 18px;
  background: rgba(245, 247, 249, 0.62);
  text-align: left;
  text-decoration: none;
  transition: transform var(--d-slow) var(--ease-out), box-shadow var(--d-slow) var(--ease-out);
}
.hero-award:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); }
.hero-award:focus-visible { outline: 2px solid var(--vermilion-deep); outline-offset: 3px; }
.hero-award-seal { flex: none; width: 44px; height: 44px; border-radius: 50%; }
.hero-award-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hero-award-k { color: var(--ink-3); font-size: 0.78rem; font-weight: 700; letter-spacing: -0.01em; }
.hero-award-t { color: var(--ink-2); font-size: 0.92rem; line-height: 1.5; }
.hero-award-cta { margin-top: 2px; color: var(--ink); font-size: 0.88rem; font-weight: 700; }

/* Home: o antigo bloco light-studio da home saiu daqui. O sistema de cenas
   editoriais da home (2026-08-02) vive no fim deste arquivo, escopado em
   .home, herdando a direcao de arte da hero. As paginas internas seguem no
   light studio acima. */
.sec-head { max-width: 980px; }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
.cta-form form, .nl-form { display: grid; gap: 13px; }
/* O CSS legado inline poe input e botao lado a lado por #waitlist-form (ID).
   Empilhado sempre: o input nunca encolhe. */
#waitlist-form { grid-template-columns: 1fr; }
#waitlist-form .btn { width: 100%; justify-self: stretch; }
.waitlist-field, .nl-row { display: grid; gap: 7px; }
.waitlist-field label, .nl-label { color: var(--ink); font-size: 0.78rem; font-weight: 700; }
input[type="email"], input[type="text"] {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  color: var(--ink);
  background: rgba(253, 253, 252, 0.76);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-md);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset;
  transition: border-color var(--d-fast), box-shadow var(--d-base), transform var(--d-base) var(--ease-out);
}
input[type="email"]:hover, input[type="text"]:hover { border-color: rgba(23, 26, 32, 0.34); }
input[type="email"]:focus, input[type="text"]:focus { border-color: var(--vermilion-deep); box-shadow: 0 0 0 4px rgba(154, 6, 13, 0.10); }
.field-touched input:invalid, input[aria-invalid="true"] { border-color: var(--vermilion-deep); box-shadow: 0 0 0 4px rgba(154, 6, 13, 0.10); }
.hidden-field { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }
.form-erro, #nl-status.err { color: var(--danger-ink); }
#obrigado { display: none; padding: 24px; border: 1px solid var(--hair-strong); background: rgba(255, 255, 255, 0.38); border-radius: var(--r-md); }
#obrigado p { margin-top: 9px; color: var(--ink-2); }
.nl-lede { color: var(--ink-2); font-size: 1.08rem; }
.nl-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.nl-row .nl-label { grid-column: 1 / -1; }
.nl-cursor { display: inline-block; width: 0.08em; height: 0.82em; margin-left: 0.08em; background: var(--vermilion); vertical-align: -0.04em; animation: cursor-blink 1.3s steps(1) infinite; }
@keyframes cursor-blink { 50% { opacity: 0.22; } }

body.js .reveal { opacity: 0; transform: translateY(22px); }
body.js .reveal.in { opacity: 1; transform: none; transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out); transition-delay: var(--rd, 0ms); }
body.site-motion .site-reveal { opacity: 0; transform: translateY(18px); will-change: opacity, transform; }
body.site-motion .site-reveal.in { opacity: 1; transform: none; transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out); will-change: auto; }
@supports (animation-timeline: view()) {
  .palco img, .quem-foto img { animation: image-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes image-drift { from { transform: scale(1.035) translateY(-1.5%); } to { transform: scale(1.035) translateY(1.5%); } }
}

/* Diagnostico com especificidade maior que o estilo inline legado. */
body .q { border-color: var(--hair); background: rgba(250, 250, 249, 0.5); box-shadow: var(--shadow-1); }
body .q legend { color: var(--ink); }
body .q .num { color: var(--vermilion-deep); }
body .opt { color: var(--ink-2); border-color: var(--hair); background: rgba(255, 255, 255, 0.24); transition: transform var(--d-base) var(--ease-out), border-color var(--d-fast), background var(--d-fast); }
body .opt:hover { transform: translateY(-2px); border-color: rgba(23, 26, 32, 0.32); }
body .opt:has(input:checked) { color: var(--ink); border-color: var(--vermilion-deep); background: rgba(220, 0, 12, 0.045); }
body .diag-pontos { display: none; }
body #quiz-erro { color: var(--danger-ink); }
html:not(.tem-js) .page-diagnostico #quiz input,
html:not(.tem-js) .page-diagnostico #quiz button[type="submit"],
html:not(.tem-js) .page-diagnostico #quiz-erro { display: none !important; }
html:not(.tem-js) .page-diagnostico #quiz .opt {
  display: grid;
  grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  cursor: default;
  pointer-events: none;
  transform: none !important;
  transition: none;
}
html:not(.tem-js) .page-diagnostico .diag-pontos {
  display: inline-block;
  color: var(--ink);
  font-weight: 800;
}
html:not(.tem-js) .page-diagnostico .diag-nojs-resultado { margin-top: 28px; }
body #resultado { border-color: rgba(154, 6, 13, 0.38); background: linear-gradient(145deg, rgba(251, 251, 250, 0.76), rgba(238, 237, 234, 0.82)); box-shadow: var(--shadow-2); }
body #resultado .status-line { color: var(--vermilion-deep); }
body #resultado p, body #resultado li { color: var(--ink-2); }

.site-foot { margin-top: clamp(44px, 8vh, 82px); border-top: 1px solid var(--hair); background: var(--page-soft); }
.foot-inner { max-width: 1120px; margin: 0 auto; padding: 34px var(--gutter) 48px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; }
.foot-inner span, .foot-inner p { color: var(--ink-3); font-size: 0.84rem; }
/* O `.dot` do wordmark e um <span> dentro do <a class="wordmark">, entao a
   regra generica de span do rodape acima (especificidade 0,1,1) vencia o
   .wordmark (0,1,0) e partia a marca em dois tamanhos: "Xikota" a 17.92px e
   ".ai" a 13.44px. Esta linha devolve a heranca do wordmark. */
.foot-inner .wordmark .dot { font-size: inherit; }
.foot-lockup { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.casas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 36px; }
.casa p { margin-top: 5px; color: var(--ink-3); font-size: 0.78rem; }
.foot-legal { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--hair); }

.page-404 {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: var(--page) !important;
  background-image: none !important;
  color: var(--ink) !important;
}
.page-404 main { width: min(100%, 62ch); padding: clamp(28px, 5vw, 56px); border: 1px solid var(--hair); border-radius: var(--r-xl); background: rgba(250, 250, 249, 0.62); box-shadow: var(--shadow-2); }
.page-404 h1 { color: var(--ink); font-family: var(--font); }
.page-404 p { color: var(--ink-2); }
.page-404 a.primary { color: #fff; background: var(--vermilion); }
.page-404 a.ghost { color: var(--ink); border-color: var(--hair-strong); }
.page-404 .casas { display: block; border-top-color: var(--hair); }

@media (min-width: 621px) and (max-width: 1279px) {
  .home .hero { --comp-h: calc(min(62svh, 60vw, 640px) * var(--head-scale)); }
  #stage { padding: clamp(72px, 10vh, 104px) 0 0; }
  .logo[aria-label="Figma"]   { --x: -8% !important; --y: 32% !important; --w: 15.5% !important; }
  .logo[aria-label="Claude"]  { --x: 10% !important; --y: -4% !important; --w: 21.5% !important; }
  .logo[aria-label="ChatGPT"] { --x: 88% !important; --y: -3% !important; --w: 15.5% !important; }
  .logo[aria-label="Gemini"]  { --x: 106% !important; --y: 30% !important; --w: 15% !important; }
  .home .hero-grid { grid-template-columns: minmax(0, 620px); justify-content: center; }
}

@media (min-width: 1280px) {
  .home .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: clamp(0px, calc(1320px - 100vw), 48px);
  }
  .home .hero-copy .sub { max-width: 44ch; font-size: 1rem; }
}

@media (max-width: 1100px) {
  .nav-cta .m-full { display: none; }
  .nav-cta .m-short { display: inline; }
  .nav-links a { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 860px) {
  .nav-inner { max-width: none; }
}

@media (max-width: 900px) {
  /* Aqui a .nav-links ganha `grid-column: 1 / -1` e a nav passa a ocupar duas
     linhas. Medido: 136px de altura. */
  :root { --nav-h: 136px; }
  .nav-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .nav-inner > .wordmark { grid-column: 1; grid-row: 1; }
  .nav-inner > .nav-acoes { grid-column: 2; grid-row: 1; }
  .nav-links { grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: max-content; width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; border-top: 1px solid var(--hair); padding-top: 3px; }
  .nav-links::-webkit-scrollbar { display: none; }
}

@media (max-width: 720px) {
  /* Duas linhas com padding e fonte menores. Medido: 121px de altura. */
  :root { --gutter: 20px; --nav-h: 121px; }
  .site-nav { padding: 9px 10px 0; }
  .nav-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 7px 7px 7px 15px; border-radius: 24px; }
  .nav-inner > .wordmark { grid-column: 1; grid-row: 1; }
  .nav-inner > .nav-acoes { grid-column: 2; grid-row: 1; gap: 6px; }
  .nav-acoes > .btn { min-height: 44px; padding: 9px 14px; font-size: 0.78rem; }
  .nav-conta { min-height: 44px; padding: 8px 12px; font-size: 0.78rem; gap: 6px; }
  .nav-links { grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: max-content; width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; border-top: 1px solid var(--hair); padding-top: 3px; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { min-height: 44px; padding: 7px 11px; font-size: 0.8rem; }
  .home .hero { --comp-h: calc(min(58svh, 104vw) * var(--head-scale)); --chin-gap: 30px; }
  .home .hero-grid { grid-template-columns: 1fr; padding-top: 0; padding-bottom: 44px; }
  .home .hero-copy { max-width: 100%; }
  .home .hero-copy h1 { font-size: clamp(2.5rem, 12.5vw, 3.5rem); }
  .home .hero-copy .sub { max-width: 38ch; font-size: 0.95rem; }
  #stage { padding: 96px 0 0; }
  /* A flutuacao continua presa em `#stage.media-ready`, e isso e deliberado.
     Os quatro logos tem animation-delay NEGATIVO, entao religar a animacao no
     meio do ciclo faz os quatro SALTAREM ate 7,8 px de uma vez (medido em
     390x844: o ChatGPT anda 2,5 px em x e 7,4 px em y no frame da troca).
     Deixa-la rodando desde o primeiro frame mata o salto, mas custa 2 a 3
     pontos de Lighthouse mobile (medido, 4 rodadas pareadas contra o baseline:
     0,92/0,92/0,93/0,94 caiu para 0,92/0,90/0,90), porque quatro animacoes
     infinitas dentro de um `perspective` com `blur` em duas das imagens
     rasterizam durante toda a janela de carga. O piso do repo e 0,90.

     Com o aquecimento automatico atual o salto nao ficou solto no meio da
     leitura: em toque, quem acorda a cabeca e o toque no proprio palco ou a
     inclinacao do aparelho, ou seja, o salto volta a coincidir com um gesto da
     propria pessoa. Trocar 3 pontos de mobile por isso nao paga. */
  .logo .float { animation: none; will-change: auto; }
  #stage.media-ready .logo .float { animation: logo-bob var(--dur) ease-in-out infinite; animation-delay: var(--delay); }
  .logo { --depth: 4px !important; }
  .logo[aria-label="Figma"]   { --x: -2% !important; --y: 30% !important; --w: 14.5% !important; }
  .logo[aria-label="Claude"]  { --x: 12% !important; --y: -3% !important; --w: 19.5% !important; }
  .logo[aria-label="ChatGPT"] { --x: 86% !important; --y: -2% !important; --w: 14.5% !important; }
  .logo[aria-label="Gemini"]  { --x: 102% !important; --y: 28% !important; --w: 14% !important; }
  .nl-row { grid-template-columns: 1fr; }
  .nl-row .nl-label { grid-column: auto; }
  .actions .btn { width: 100%; }
  .casas { grid-template-columns: 1fr; }
}

/* ── Conta e auth (fase 1, 2026-08-02) ──────────────────────────────────
   Visibilidade por estado de sessao: .auth-in so aparece logado, .auth-out
   so aparece deslogado. O default sem JS e o estado deslogado. */
html:not(.is-authed) .auth-in { display: none !important; }
html.is-authed .auth-out { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.conta-card { border: 1px solid var(--hair-strong); border-radius: var(--r-lg); padding: clamp(22px, 3.5vw, 32px); background: var(--surface-hi); box-shadow: var(--shadow-1); margin-top: 22px; }
.conta-card + .conta-card { margin-top: 18px; }
.conta-card h2 { font-size: 1.15rem; letter-spacing: -0.01em; }

/* Painel da conta: o cartao da oferta abre a pagina, o acervo fica recolhido
   embaixo. Ate 2026-08-12 eram quatro cartoes iguais liderados por lista de
   progresso, sem nenhum caminho de compra (achado do dono). */
.conta-card.destaque { border-color: rgba(154, 6, 13, 0.42); border-width: 2px; background: #fff; }
.conta-card-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.conta-estado {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-full);
  background: var(--page);
  color: var(--ink-2);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.conta-card.destaque .conta-estado { border-color: transparent; background: var(--vermilion); color: #fff; }
.conta-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.conta-lista { margin-top: 16px; padding-left: 22px; display: grid; gap: 12px; color: var(--ink-2); font-size: 0.96rem; }
.conta-lista b { color: var(--ink); }
.conta-detalhe { margin-top: 16px; border-top: 1px solid var(--hair); }
/* display:flex mata o marcador nativo do summary: sem o sinal proprio, o
   disclosure vira um titulo que ninguem clica. */
.conta-detalhe summary { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font-size: 0.9rem; font-weight: 700; cursor: pointer; list-style: none; }
.conta-detalhe summary::-webkit-details-marker { display: none; }
.conta-detalhe summary::before {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--vermilion);
  border-bottom: 2px solid var(--vermilion);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--d-fast) var(--ease-standard);
}
.conta-detalhe[open] summary::before { transform: rotate(-135deg) translate(-3px, -3px); }
.conta-detalhe[open] summary { border-bottom: 1px solid var(--hair); }
.conta-diag { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); color: var(--ink-2); font-size: 0.95rem; }
.conta-diag a { color: var(--vermilion-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.conta-email { color: var(--ink-2); font-size: 0.95rem; margin-top: 6px; overflow-wrap: anywhere; }
.conta-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.conta-form input[type="email"] { flex: 1 1 260px; }
.conta-label { flex: 1 0 100%; font-size: 0.82rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-2); }
/* Altura do widget managed reservada antes de ele existir: o iframe entra
   depois da rede e empurraria o botao de enviar. */
.cf-turnstile { flex: 1 0 100%; min-height: 65px; }
#conta-status { margin-top: 14px; font-size: 0.95rem; }
#conta-status.err { color: var(--danger-ink); }
#conta-status.ok { color: var(--ink); font-weight: 600; }

.prog-list { list-style: none; margin-top: 14px; }
.prog-list li { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 0.96rem; }
.prog-list li:first-child { border-top: 0; }
.prog-list .estado { flex-shrink: 0; font-weight: 800; font-size: 0.78rem; letter-spacing: -0.01em; color: var(--ink-3); min-width: 84px; }
.prog-list li.feito .estado { color: var(--vermilion-deep); }
.prog-list a { color: var(--ink); }

.progress-mark { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.btn-mark { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--hair-strong); border-radius: var(--r-full); background: var(--surface-hi); color: var(--ink); font-size: 0.88rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color var(--d-fast) var(--ease-standard), background var(--d-fast) var(--ease-standard); }
.btn-mark:hover { border-color: var(--ink-2); }
.btn-mark[aria-pressed="true"] { border-color: var(--vermilion-deep); background: rgba(220, 0, 12, 0.06); color: var(--vermilion-deep); }
.btn-mark[disabled] { opacity: 0.55; cursor: default; }
.prog-aviso:not(:empty) { color: var(--danger-ink); font-size: 0.88rem; font-weight: 600; }
.conta-erro-link:not(:empty) { border: 1px solid var(--danger-ink); border-radius: var(--r-md); padding: 14px 18px; margin-top: 18px; color: var(--danger-ink); font-size: 0.95rem; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════
   HOME · CENAS EDITORIAIS (2026-08-02)
   A hero definiu a linguagem: off-white quente, tinta preta, vermelho como
   ponto de tensao. Daqui pra baixo a home roda em cenas: dois ambientes
   (claro e escuro), uma mensagem dominante por tela, conteudo concentrado
   no centro, vermelho so em palavra, numero, linha e estado.
   ═══════════════════════════════════════════════════════════════════════ */

.home {
  --page: #FFFFFF;
  --page-soft: #FFFFFF;
  --surface: #F1F0EE;
  --surface-hi: #FBFBFA;
  --surface-low: #E8E6E3;
  --ink: #17191F;
  --ink-2: #45464E;
  --ink-3: #5A5B63;
  /* Alinhado com D15 em 2026-08-17: o vermilion institucional #dc000c e a
     unica cor da marca em todas as superficies. As cenas nasceram com um
     vermelho proprio (#C92A22 / #A02318) e a home era a unica superficie web
     do ecossistema fora do token canonico, com a hero pinada de volta logo
     acima, dois vermelhos na mesma rolagem. O papel do vermelho nao muda:
     palavra, numero, linha e estado, nunca fundo de area. Medido: contraste
     melhora nas cenas escuras (3.21:1 -> 3.39:1) e no numeral sobre claro
     (7.64:1 -> 8.73:1), e o branco sobre o chip continua acima de AA
     (5.47:1 -> 5.19:1). */
  --accent: #dc000c;
  --accent-deep: #9a060d;
  --vermilion: var(--accent);
  --vermilion-deep: var(--accent-deep);
  --hair: rgba(23, 25, 31, 0.14);
  --hair-strong: rgba(23, 25, 31, 0.28);
  --dark: #17191F;
  --dark-ink: #F3F0EB;
  /* Tiers escuros em hex SOLIDO (mesma luminancia dos antigos rgba 0.76/0.62):
     hierarquia por cor, nunca por translucidez (regra do dono). */
  --dark-ink-2: #BEBCBA;
  --dark-ink-3: #9F9E9D;
  --dark-hair: rgba(243, 240, 235, 0.16);
  --danger-ink: #A02318;
  --wide: 1200px;
  --edit: 840px;
  --scene-pad: clamp(84px, 12vh, 120px);
  /* Tipografia das cenas (spec 2026-08-02): grande, curta, negativa. */
  --t-scene: clamp(3.25rem, 7vw, 7rem);
  --t-scene-2: clamp(2.375rem, 5vw, 4.5rem);
  --t-stand: clamp(1.375rem, 2.3vw, 2.125rem);
  --t-body: clamp(1.0625rem, 1.4vw, 1.3125rem);
  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--page);
}
@media (min-width: 720px) { .home { --scene-pad: clamp(110px, 15vh, 160px); } }
@media (min-width: 1080px) { .home { --scene-pad: clamp(140px, 19vh, 214px); } }

/* A hero permanece exatamente como aprovada: os tokens que ela consumia
   antes desta camada ficam pinados de volta aqui dentro, e o padding + o
   espacamento dos CTAs que vinham do CSS inline legado (removido do
   index.html em 2026-08-02) ficam explicitos aqui. */
.home .hero {
  --vermilion: #dc000c;
  --vermilion-deep: #9a060d;
  --ink-2: #454c56;
  --ink-3: #505862;
  --hair: rgba(23, 26, 32, 0.12);
  --hair-strong: rgba(23, 26, 32, 0.22);
  --shadow-1: 0 1px 0 var(--shine) inset, 0 8px 22px rgba(44, 52, 62, 0.10);
  padding: clamp(40px, 7vh, 88px) 0 clamp(56px, 9vh, 104px);
}
.home .hero .btn-ghost { background: rgba(239, 242, 245, 0.42); }
.home .hero .btn-ghost:hover { background: rgba(245, 247, 249, 0.7); }
.home .hero .actions { margin-top: 34px; gap: 14px; }
.home .hero .sub { line-height: 1.5; }
/* O CSS legado compunha os reveals em layer propria (will-change); manter na
   hero preserva a rasterizacao exata do texto aprovado. */
body.home.js .hero .reveal { will-change: transform, opacity; }

.home em { font-style: normal; }

/* ── Header pos-hero: pill leve no off-white ─────────────────────────── */
/* O pill se sustenta sozinho sobre qualquer ambiente; o degrade de fundo do
   nav das internas viraria uma faixa clara suja sobre as cenas escuras. */
.home .site-nav::before { content: none; }
.home .nav-inner {
  /* max-width fica com a regra base (shell do conteudo); aqui so o skin. */
  border-color: var(--hair);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 14px 34px rgba(23, 25, 31, 0.10);
}
.home .nav-links a:hover,
.home .nav-links a[aria-current="page"] { background: rgba(23, 25, 31, 0.06); }
.home .wordmark .dot { color: var(--accent); }

/* Menu mobile da home: uma linha (wordmark + Menu + CTA); os links abrem por
   disclosure. Sem JS o botao segue [hidden] e os links ficam visiveis. */
.home .nav-menu { display: none; }
@media (max-width: 720px) {
  body.home.js .nav-inner { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
  body.home.js .nav-inner > .wordmark { grid-column: 1; grid-row: 1; }
  body.home.js .nav-menu {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 8px 12px;
    border: 0;
    background: none;
    color: var(--ink);
    font: 700 0.84rem/1 var(--font);
    cursor: pointer;
    border-radius: var(--r-full);
  }
  body.home.js .nav-menu::after { content: "+"; color: var(--accent); font-size: 1.05rem; font-weight: 700; }
  body.home.js .site-nav.nav-open .nav-menu::after { content: "\2212"; }
  body.home.js .nav-inner > .nav-acoes { grid-column: 3; grid-row: 1; }
  body.home.js .nav-links {
    display: none;
    opacity: 0;
    transform: translateY(-4px);
  }
  body.home.js .site-nav.nav-open .nav-links {
    display: grid;
    opacity: 1;
    transform: none;
    transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
    @starting-style { opacity: 0; transform: translateY(-4px); }
  }
}

/* ── Casca de cena ───────────────────────────────────────────────────── */
.home .scene { position: relative; padding: var(--scene-pad) 0; background: var(--page); }
.home .wrap-edit { width: min(100%, var(--edit)); margin-inline: auto; padding-inline: var(--gutter); }
.home .scene-head h2 {
  max-width: 20ch;
  font-size: var(--t-scene-2);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.home .scene-head h2 em { color: var(--accent); }
.home .scene-head.center { text-align: center; }
.home .scene-head.center h2 { margin-inline: auto; }
.home .scene-lede { max-width: 52ch; margin-top: 22px; color: var(--ink-2); font-size: var(--t-body); line-height: 1.55; }
.home .scene-head.center .scene-lede { margin-inline: auto; }
.home .scene p { line-height: 1.55; }
.home .coda { max-width: 58ch; margin-top: clamp(44px, 6vw, 64px); color: var(--ink-2); }
.home .coda.center { margin-inline: auto; text-align: center; }

/* Links de corpo nas cenas claras: sublinha fina que acende no vermelho. */
.home .scene a:not(.btn):not(.link-line),
.home .nl-line a:not(.btn) {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(160, 35, 24, 0.42);
  transition: color var(--d-fast), text-decoration-color var(--d-fast);
}
.home .scene a:not(.btn):not(.link-line):hover,
.home .nl-line a:not(.btn):hover {
  color: var(--accent-deep);
  text-decoration-color: var(--accent);
}
.home .scene-dark a:not(.btn):not(.link-line) { text-decoration-color: rgba(243, 240, 235, 0.4); }
.home .scene-dark a:not(.btn):not(.link-line):hover { color: var(--dark-ink); text-decoration-color: var(--accent); }

/* Link-acao: linha vermelha que cresce. */
.home .link-line {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
}
.home .link-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 7px;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0.34);
  transform-origin: left;
  transition: transform var(--d-base) var(--ease-out);
}
.home .link-line:hover::after, .home .link-line:focus-visible::after { transform: scaleX(1); }

/* Reveal da home calibrado pela spec: 24px, entrada longa, easing editorial. */
body.home.js .reveal { transform: translateY(24px); }
body.home.js .reveal.in { opacity: 1; transform: none; transition: opacity 640ms var(--ease-entrance), transform 640ms var(--ease-entrance); transition-delay: var(--rd, 0ms); }

/* Ambiente escuro. */
.home .scene-dark { background: var(--dark); color: var(--dark-ink); }
.home .scene-dark h2, .home .scene-dark h3 { color: var(--dark-ink); }

/* ── CENA · DUAS PORTAS ──────────────────────────────────────────────── */
/* A casa vende mentoria hoje e formacao depois. Ate 2026-08-12 a home nao
   dizia isso em lugar nenhum e o rodape mandava mentoria pra outra casa. */
.home .portas {
  margin: clamp(44px, 6vw, 76px) auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.6vw, 30px);
}
.home .porta {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-lg);
  background: var(--surface-hi);
  box-shadow: var(--shadow-1);
}
.home .porta-aberta { border-color: rgba(160, 35, 24, 0.45); }
.home .porta-estado {
  align-self: flex-start;
  padding: 6px 13px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-full);
  color: var(--ink-2);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.home .porta-aberta .porta-estado { border-color: transparent; background: var(--accent); color: #fff; }
.home .porta h3 {
  margin-top: 20px;
  font-size: clamp(1.6rem, 2.7vw, 2.15rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.home .porta-desc { margin-top: 14px; color: var(--ink-2); font-size: 0.98rem; }
.home .porta-lista { margin-top: 18px; padding-left: 22px; display: grid; gap: 10px; color: var(--ink-2); font-size: 0.94rem; }
.home .porta-acoes { margin-top: auto; padding-top: clamp(24px, 3vw, 32px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.home .portas-conta { margin: clamp(30px, 4vw, 48px) auto 0; color: var(--ink-2); font-size: 0.95rem; text-align: center; }

/* ── CENA · TRES RESULTADOS ──────────────────────────────────────────── */
.home .results {
  margin: clamp(56px, 8vw, 104px) auto 0;
  list-style: none;
  counter-reset: result;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 4.5vw, 64px);
}
.home .result { counter-increment: result; position: relative; padding-top: 24px; }
.home .result::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 2px;
  background: var(--accent);
  transform-origin: left;
  transition: transform var(--d-slow) var(--ease-out);
}
.home .result:hover::before { transform: scaleX(2.1); }
.home .result-num { display: block; color: var(--accent-deep); font-size: 0.9rem; font-weight: 800; letter-spacing: -0.01em; }
.home .result-num::before { content: counter(result, decimal-leading-zero); }
.home .result-word {
  margin-top: 12px;
  font-size: clamp(2.5rem, 4.6vw, 4.25rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
  transition: transform var(--d-slow) var(--ease-out);
}
.home .result:hover .result-word { transform: translateY(-4px); }
.home .result-title { margin-top: 20px; color: var(--ink); font-weight: 700; font-size: 1rem; }
.home .result-desc { margin-top: 8px; max-width: 32ch; color: var(--ink-2); font-size: 0.97rem; }
.home .scene-coda { max-width: 58ch; margin: clamp(52px, 7vw, 80px) auto 0; color: var(--ink-3); font-size: 0.95rem; text-align: center; }

/* ── CENA · MANIFESTO (tese + disciplina) ────────────────────────────── */
.home .scene-manifesto { text-align: center; }
.home .manifesto-line {
  max-width: 15ch;
  margin-inline: auto;
  font-size: var(--t-scene);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.055em;
}
.home .manifesto-line em { color: var(--accent); }
.home .manifesto-lede {
  max-width: 44ch;
  margin: clamp(44px, 6vw, 72px) auto 0;
  color: var(--dark-ink-2);
  font-size: var(--t-stand);
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.home .manifesto-lede b { color: var(--dark-ink); font-weight: 700; }
.home .manifesto-def {
  max-width: 52ch;
  margin: clamp(44px, 6vw, 72px) auto 0;
  padding-top: 36px;
  border-top: 1px solid var(--dark-hair);
}
.home .manifesto-def .k { color: var(--dark-ink-3); font-size: 0.78rem; font-weight: 800; letter-spacing: -0.01em; }
.home .manifesto-def p { margin-top: 16px; color: var(--dark-ink-2); font-size: var(--t-body); }
.home .manifesto-def b { color: var(--dark-ink); }
.home .manifesto-coda {
  max-width: 13ch;
  margin: clamp(60px, 9vw, 108px) auto 0;
  font-size: var(--t-scene-2);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--dark-ink);
}
.home .manifesto-coda em { color: var(--accent); }
@supports (animation-timeline: view()) {
  body.home.js .manifesto-line { animation: manifesto-drift linear both; animation-timeline: view(); animation-range: entry 0% cover 46%; }
  @keyframes manifesto-drift { from { transform: translateY(30px); } to { transform: none; } }
}

/* ── CENA · SETE ETAPAS ──────────────────────────────────────────────── */
/* Base (mobile, sem JS, reduced motion): lista editorial compacta. */
.home .chain {
  max-width: 720px;
  margin: clamp(48px, 7vw, 84px) auto 0;
  list-style: none;
  display: block;
}
.home .chain .step { border-top: 1px solid var(--hair); padding: 20px 0; }
.home .chain .step:last-child { border-bottom: 1px solid var(--hair); }
.home .chain .num { color: var(--accent); font-size: 0.9rem; font-weight: 800; letter-spacing: -0.01em; }
.home .chain h3 { margin-top: 6px; font-size: var(--t-stand); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; }
.home .chain p { margin-top: 10px; max-width: 52ch; color: var(--ink-2); font-size: 0.98rem; }
.home .chain .step-note { margin-top: 8px; color: var(--ink-3); font-size: 0.85rem; }

/* Acordeao (JS, telas estreitas): um passo aberto por vez. */
.home .chain .step-toggle {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.home .chain .step-toggle::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  transition: transform var(--d-base) var(--ease-out);
}
.home .chain .step.open .step-toggle::after { content: "\2212"; }
.home .chain.steps-acc .step-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease-out); }
.home .chain.steps-acc .step.open .step-body { grid-template-rows: 1fr; }
.home .chain.steps-acc .step-body-in { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s 420ms; }
.home .chain.steps-acc .step.open .step-body-in { visibility: visible; transition: visibility 0s; }

/* Palco sticky (JS, desktop): uma etapa dominante por vez, indice na lateral. */
.home .steps-track { position: relative; }
.home.steps-sticky .scene-steps { padding: 0; }
.home.steps-sticky .steps-track { height: 540svh; }
.home.steps-sticky .steps-pin {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  align-content: center;
  overflow: clip;
  padding: clamp(32px, 5vh, 64px) 0;
}
.home.steps-sticky .steps-layout {
  margin-top: clamp(40px, 7vh, 88px);
  display: grid;
  grid-template-columns: minmax(150px, 0.28fr) minmax(0, 0.72fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.home.steps-sticky .chain { max-width: none; margin: 0; display: grid; min-height: clamp(330px, 44vh, 460px); }
.home.steps-sticky .chain .step {
  grid-row: 1;
  grid-column: 1;
  align-self: center;
  border: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(26px);
  pointer-events: none;
  transition: opacity 560ms var(--ease-entrance), transform 560ms var(--ease-entrance);
}
.home.steps-sticky .chain .step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.home.steps-sticky .chain .num { font-size: clamp(4rem, 8vw, 7.5rem); line-height: 1; letter-spacing: -0.04em; }
.home.steps-sticky .chain h3 { margin-top: 14px; font-size: var(--t-scene-2); letter-spacing: -0.045em; line-height: 0.98; max-width: 14ch; }
.home.steps-sticky .chain p { margin-top: 20px; max-width: 40ch; font-size: var(--t-stand); line-height: 1.3; letter-spacing: -0.015em; }
.home.steps-sticky .chain .step-note { margin-top: 14px; font-size: 0.95rem; letter-spacing: 0; }
.home .steps-hud { display: grid; gap: clamp(20px, 4vh, 36px); align-content: center; }
.home .steps-counter { color: var(--ink-3); font-size: 0.9rem; font-weight: 700; letter-spacing: -0.01em; }
.home .steps-counter b { color: var(--accent-deep); }
.home .steps-rail { display: grid; gap: 4px; justify-items: start; }
.home .steps-rail button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 2px 8px 2px 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: 700 0.88rem/1 var(--font);
  letter-spacing: -0.01em;
  cursor: pointer;
  border-radius: 8px;
}
.home .steps-rail button i {
  width: 26px;
  height: 2px;
  background: rgba(23, 25, 31, 0.45);
  transform-origin: left;
  transition: background var(--d-fast), transform var(--d-base) var(--ease-out);
}
.home .steps-rail button:hover { color: var(--ink); }
.home .steps-rail button[aria-current="true"] { color: var(--ink); }
.home .steps-rail button[aria-current="true"] i { background: var(--accent); transform: scaleX(1.6); }

/* ── CENA · METODO APLICADO (cases) ──────────────────────────────────── */
.home .cases-rail {
  margin-top: clamp(48px, 6vw, 84px);
  display: grid;
  grid-auto-flow: column;
  /* Um case dominante por vez, de verdade: o painel toma quase o espaco util
     e o vizinho entra como fatia estreita (~112px), onde cabe no maximo meio
     numeral; nada de titulo legivel. O 100% do track resolve contra o
     content-box do rail (ja descontado o gutter). */
  grid-auto-columns: calc(100% - 56px);
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  padding: 10px var(--gutter) 22px;
  scrollbar-width: none;
}
.home .cases-rail::-webkit-scrollbar { display: none; }
.home .case-panel {
  position: relative;
  counter-increment: case;
  min-height: clamp(380px, 44vw, 520px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: clamp(28px, 4vw, 56px);
  border-radius: 20px;
  background: var(--dark);
  color: var(--dark-ink);
  scroll-snap-align: center;
  transition: transform var(--d-slow) var(--ease-out);
}
.home .cases-rail { counter-reset: case; }
.home .case-panel:hover { transform: translateY(-6px) rotate(0.3deg); }
/* O numeral gigante ocupa o campo superior do painel: elemento grafico, nao
   metadado; texto grande em bold mantem >=3:1 sobre o escuro. */
.home .case-panel::before {
  content: counter(case, decimal-leading-zero);
  position: absolute;
  top: clamp(16px, 2.2vw, 30px);
  left: clamp(28px, 4vw, 52px);
  color: var(--accent);
  font-size: clamp(4rem, 8vw, 7.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.home .case-panel h3 { color: var(--dark-ink); font-size: clamp(2.2rem, 4vw, 3.5rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.04em; }
.home .case-panel p { max-width: 46ch; color: var(--dark-ink-2); font-size: 0.98rem; }
.home .case-panel a.link-line { color: var(--dark-ink); margin-top: 4px; align-self: flex-start; }
.home .cases-dots { margin-top: 4px; display: flex; justify-content: center; gap: 4px; }
.home .cases-dots button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 10px;
}
.home .cases-dots button i { width: 26px; height: 2px; background: rgba(23, 25, 31, 0.45); transition: background var(--d-fast), transform var(--d-base) var(--ease-out); }
.home .cases-dots button[aria-current="true"] i { background: var(--accent); transform: scaleX(1.5); }

/* ── CENA · PRA QUEM ─────────────────────────────────────────────────── */
.home .fit-grid {
  max-width: 980px;
  margin: clamp(48px, 6vw, 80px) auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 96px);
}
/* As duas colunas tem o mesmo peso visual (nada de apagar o lado "nao e"):
   a distincao vive nos marcadores, vermelho contra neutro. */
.home .fit-col { border-top: 2px solid var(--ink); padding-top: 24px; }
.home .fit-title { font-size: var(--t-stand); font-weight: 700; letter-spacing: -0.02em; }
.home .fit-list { margin-top: 22px; display: grid; gap: 14px; list-style: none; }
.home .fit-list li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: 0.98rem; }
.home .fit-list li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.home .fit-list.yes li::before { content: "+"; color: var(--accent); }
.home .fit-list.no li::before { content: "\2212"; color: var(--ink-2); }

/* ── CENA · PROVAS ───────────────────────────────────────────────────── */
.home .scene-proofs .scene-head h2 { font-size: var(--t-scene); letter-spacing: -0.055em; line-height: 0.92; max-width: 14ch; }
/* Ticker de provas REMOVIDO por decisao do dono (2026-08-02): era o ultimo
   traco de template na home e duplicava a lista de provas logo abaixo. */
.home .proof-hero { max-width: var(--edit); margin: clamp(56px, 8vw, 104px) auto 0; text-align: center; }
.home .proof-seal { display: block; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; box-shadow: 0 6px 30px rgba(140, 100, 20, 0.28); }
.home .proof-hero .k { color: var(--accent-deep); font-size: 0.78rem; font-weight: 800; letter-spacing: -0.01em; }
.home .proof-title {
  max-width: 18ch;
  margin: 18px auto 0;
  font-size: var(--t-scene-2);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.home .proof-lede { max-width: 52ch; margin: 24px auto 0; color: var(--ink-2); font-size: var(--t-body); }
.home .proof-links { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 36px; }
/* Texto manda na cena; a foto acompanha em escala editorial (dono 2026-08-02:
   as fotos grandes dominavam a secao e brigavam com a lista). */
.home .proof-rest {
  margin-top: clamp(72px, 10vw, 132px);
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.home .today { list-style: none; }
.home .today li { display: grid; grid-template-columns: 108px 1fr; gap: 18px; padding: 17px 0; border-top: 1px solid var(--hair); }
.home .today li:last-child { border-bottom: 1px solid var(--hair); }
.home .today .tag { color: var(--accent-deep); font-size: 0.78rem; font-weight: 800; letter-spacing: -0.01em; padding-top: 4px; }
.home .today .txt { color: var(--ink-2); font-size: 0.97rem; }
/* Item do premio (Best Paper Award): o titulo do artigo pesa mais e os CTAs
   ganham linha propria; markup em index.html li.award-item. */
.home .today li.award-item .txt b { color: var(--ink); }
.home .award-links { display: block; margin-top: 8px; font-weight: 600; }
.home .later { margin-top: 30px; max-width: 46ch; }
.home .later h3 { font-size: 1.02rem; font-weight: 700; }
.home .later p { margin-top: 8px; color: var(--ink-2); font-size: 0.94rem; }
.home .later p b { color: var(--ink); }
.home .palco { overflow: hidden; border-radius: 26px; }
/* height auto e obrigatorio: sem ele o atributo height="1798" do img vale
   como hint presentacional, a foto renderia com 1798px literais de altura e
   o aspect-ratio abaixo era ignorado (raiz do "foto gigante", 2026-08-02). */
.home .palco img { width: 100%; height: auto; display: block; object-fit: cover; }
.home .palco figcaption { padding: 12px 4px 0; color: var(--ink-3); font-size: 0.82rem; }
/* Retrato do pulpito: escala editorial na coluna, rosto sempre inteiro. */
.home .proof-rest .palco { max-width: 400px; justify-self: center; }
.home .proof-rest .palco img { aspect-ratio: 3 / 4; object-position: 50% 18%; }
/* Painel: banda contida fechando a cena, nao full-bleed gigante. */
.home .palco-wide { max-width: 880px; margin-top: clamp(48px, 7vw, 88px); margin-inline: auto; }
.home .palco-wide img { max-height: clamp(260px, 30vw, 380px); object-position: 50% 30%; }

/* ── CENA · QUEM ─────────────────────────────────────────────────────── */
.home .quem-grid {
  margin-top: clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 7vw, 104px);
  align-items: center;
}
.home .quem-foto { overflow: hidden; border-radius: 28px; aspect-ratio: 4 / 5; }
.home .quem-foto img { width: 100%; height: 100%; display: block; object-fit: cover; }
.home .quem-lede { color: var(--ink); font-size: var(--t-stand); line-height: 1.3; letter-spacing: -0.02em; }
.home .quem-lede b { font-weight: 700; }
.home .proofs { margin-top: 30px; padding-left: 22px; display: grid; gap: 16px; }
.home .proofs li { color: var(--ink-2); font-size: 0.98rem; }

/* ── CENA · CTA FINAL (unico grande momento de conversao) ────────────── */
.home .scene-cta { text-align: center; }
.home .scene-cta .cta-head h2 {
  max-width: 13ch;
  margin-inline: auto;
  font-size: var(--t-scene);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.055em;
}
.home .scene-cta .cta-head h2 em { color: var(--accent); }
.home .scene-cta .support { max-width: 46ch; margin: 26px auto 0; color: var(--dark-ink-2); font-size: var(--t-body); }
.home .scene-cta .cta-form { max-width: 620px; margin: clamp(44px, 6vw, 72px) auto 0; text-align: left; }
.home .scene-cta #waitlist-form { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.home .scene-cta #waitlist-form .btn { grid-column: auto; width: auto; align-self: end; min-height: 56px; padding-inline: 28px; }
.home .scene-cta #waitlist-form .fine,
.home .scene-cta #waitlist-form .form-erro { grid-column: 1 / -1; }
.home .scene-cta .waitlist-field label { color: var(--dark-ink); }
.home .scene-cta .fine { color: var(--dark-ink-3); }
.home .scene-cta #obrigado { border-color: var(--dark-hair); background: rgba(243, 240, 235, 0.06); }
.home .scene-cta #obrigado h3 { color: var(--dark-ink); font-size: 1.3rem; }
.home .scene-cta #obrigado p { color: var(--dark-ink-2); }
.home .scene-cta .form-erro { color: #FFB4AE; }

/* Campos sobre o ambiente escuro (CTA e newsletter). Borda de repouso
   >=3:1 sobre #17191F (WCAG 1.4.11): e ela que delimita o campo. */
.home .scene-cta input[type="email"],
.home .nl-line input[type="email"] {
  min-height: 56px;
  color: var(--dark-ink);
  background: rgba(243, 240, 235, 0.10);
  border-color: rgba(243, 240, 235, 0.40);
  box-shadow: none;
}
.home .scene-cta input[type="email"]:hover,
.home .nl-line input[type="email"]:hover { border-color: rgba(243, 240, 235, 0.62); }
.home .scene-cta input[type="email"]:focus,
.home .nl-line input[type="email"]:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(201, 42, 34, 0.28); }
.home .scene-cta .field-touched input:invalid,
.home .scene-cta input[aria-invalid="true"],
.home .nl-line .field-touched input:invalid,
.home .nl-line input[aria-invalid="true"] { border-color: #E0564C; box-shadow: 0 0 0 4px rgba(224, 86, 76, 0.22); }
.home .scene-cta input::placeholder,
.home .nl-line input::placeholder { color: rgba(243, 240, 235, 0.55); }

/* ── NEWSLETTER · linha do rodape (captura secundaria; o CTA da lista e o
   unico grande momento de conversao da pagina) ───────────────────────── */
.home .nl-line {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
  gap: 18px 56px;
  align-items: center;
  padding: 26px 0;
  border-top: 1px solid var(--dark-hair);
  border-bottom: 1px solid var(--dark-hair);
}
.home .nl-line h2 { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: var(--dark-ink); }
.home .nl-line .nl-lede { margin-top: 8px; max-width: 44ch; color: var(--dark-ink-2); font-size: 0.92rem; }
.home .nl-line .nl-label { color: var(--dark-ink); }
.home .nl-line input[type="email"] { min-height: 50px; }
/* Submit da newsletter rebaixado a ghost: o pill vermelho cheio e exclusivo
   do unico grande CTA final. */
.home .nl-line .btn {
  min-height: 50px;
  font-size: 0.88rem;
  padding-inline: 20px;
  color: var(--dark-ink);
  background: transparent;
  border-color: rgba(243, 240, 235, 0.42);
  box-shadow: none;
}
.home .nl-line .btn:hover {
  background: rgba(243, 240, 235, 0.08);
  border-color: var(--dark-ink);
  box-shadow: none;
}
.home .nl-line .fine { color: var(--dark-ink-3); font-size: 0.78rem; }
.home .nl-line #nl-status { color: var(--dark-ink); }
.home .nl-line #nl-status.err { color: #FFB4AE; }
.home .nl-line #nl-status a, .home .nl-line .form-erro a, .home .scene-cta .form-erro a, .home .scene-cta .fine a, .home .nl-line .fine a { color: var(--dark-ink); }
.home .nl-cursor { background: var(--accent); }

/* ── FOOTER · fecho escuro, compacto ─────────────────────────────────── */
.home .site-foot { margin-top: 0; border-top: 1px solid var(--dark-hair); background: var(--dark); }
.home .foot-inner {
  max-width: var(--wide);
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  padding: clamp(48px, 7vh, 76px) var(--gutter) 52px;
}
.home .site-foot .wordmark { color: var(--dark-ink); }
/* O ponto do wordmark herdava `.home .wordmark .dot` (--accent #c92a22), calibrado
   para o nav claro. No rodape escuro (#17191f) isso dava 3.21:1 a 17.92px peso 800,
   logo abaixo do piso de texto grande (18.66px bold), entao o alvo e 4.5:1. #ff6a55
   ja e o acento escuro canonizado neste arquivo (--r-acento do bloco escuro do
   acervo) e sobe para 6.23:1. Escopado em .home: o rodape das internas e claro. */
.home .site-foot .wordmark .dot { color: #ff6a55; }
.home .foot-lockup span { color: var(--dark-ink-2); }
.home .foot-lockup .sep { color: var(--dark-ink-3); }
.home .casas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 40px; }
.home .casa { border-top: 1px solid var(--dark-hair); padding-top: 14px; }
.home .casa a { color: var(--dark-ink); font-weight: 700; font-size: 0.95rem; text-decoration: none; }
.home .casa a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.home .casa p { margin-top: 5px; color: var(--dark-ink-2); font-size: 0.8rem; }
.home .casa p a { color: var(--dark-ink); font-weight: 600; }
.home .foot-legal { grid-column: 1 / -1; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--dark-hair); color: var(--dark-ink-3); font-size: 0.8rem; }
.home .foot-legal a { color: var(--dark-ink); }

/* ── Responsivo das cenas ────────────────────────────────────────────── */
@media (max-width: 980px) {
  .home .proof-rest, .home .quem-grid { grid-template-columns: 1fr; }
  .home .quem-foto { width: min(100%, 480px); }
  .home .proof-rest .palco { width: min(100%, 380px); justify-self: start; }
}
@media (max-width: 860px) {
  .home .results { grid-template-columns: 1fr; gap: 44px; }
  .home .portas { grid-template-columns: 1fr; }
  .home .result-desc { max-width: 52ch; }
  .home .fit-grid { grid-template-columns: 1fr; gap: 44px; }
  .home .nl-line { grid-template-columns: 1fr; }
  .home .casas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
}
@media (max-width: 720px) {
  .home .scene-cta #waitlist-form { grid-template-columns: 1fr; }
  .home .scene-cta #waitlist-form .btn { width: 100%; }
  .home .cases-rail { grid-auto-columns: calc(100% - 40px); gap: 14px; }
  .home .case-panel { min-height: 400px; }
  .home .today li { grid-template-columns: 1fr; gap: 6px; padding: 15px 0; }
  .home .casas { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  body.js .reveal, body.js .reveal.in, body.site-motion .site-reveal, body.site-motion .site-reveal.in { opacity: 1 !important; transform: none !important; }
  .logo .float { animation: none !important; will-change: auto; }
  .logo { transform: translate(-50%, -50%); }
  .logo:hover img, .logo:focus-visible img, .card:hover, .outcard:hover, .chain .step:hover, .opt:hover, .btn:hover, .btn:active, .hero-award:hover { transform: none !important; }
  .palco img, .quem-foto img { animation: none !important; transform: none !important; }
  .home .result:hover .result-word, .home .result:hover::before, .home .case-panel:hover { transform: none !important; }
  .home .site-nav { transition: none; }
  body.home.js .manifesto-line { animation: none !important; }
}

/* ==========================================================================
   RECURSOS  (migrados do thiagoxikota.com em 2026-08-13, D38 fase 2)

   A pagina antiga era dark-only de verdade: renderizava identica em
   prefers-color-scheme light e dark, porque a paleta estava fixa. O pedido do
   dono foi manter aquele desenho e parar de ser so escuro. Entao o acervo ganha
   tokens proprios: no claro herda a casa (branco, Sora, vermilion), no escuro
   assume a paleta exata da pagina antiga (#0d0f17 e familia).

   Escopo fechado em .page-recursos: o resto da escola continua claro. Contraste
   alto nos dois esquemas; hierarquia por cor, peso e espaco, nunca por opacidade.
   ========================================================================== */

.page-recursos {
  --r-bg: var(--page);
  --r-bg-2: var(--page-soft);
  --r-card: var(--surface-hi);
  --r-code: var(--surface);
  --r-ink: var(--ink);
  --r-ink-2: var(--ink-2);
  --r-ink-3: var(--ink-3);
  --r-linha: var(--hair);
  --r-linha-forte: var(--hair-strong);
  --r-acento: var(--vermilion);
  --r-acento-ink: #ffffff;
  --r-chip: var(--surface);
  --r-cta: linear-gradient(135deg, #8f0007, #dc000c);
}

@media (prefers-color-scheme: dark) {
  .page-recursos {
    /* O escuro do acervo so remapeava os tokens --r-*, e herdava o
       --vermilion-deep #9a060d do :root claro. Todo seletor fora do sistema
       --r-* (.fine a, .lede a, .prose a, .wordmark .dot) ficava com vermelho
       escuro sobre fundo escuro: 2.19:1 no link e 2.05:1 no ponto do wordmark.
       O vazamento e de token global, nao do sistema --r-, entao a correcao e
       remapear o token global aqui, no mesmo escopo. #ff6a55 nao e cor nova:
       e o --r-acento ja canonizado neste bloco.
       So o --vermilion-deep entra. Remapear tambem o --vermilion pintaria o
       fundo do .btn primario de #dc000c para #ff6a55, e o branco em cima dele
       cai de 5.19:1 para 2.82:1 (medido). O --vermilion fica como esta. */
    --vermilion-deep: #ff6a55;
    --r-bg: #0d0f17;
    --r-bg-2: #151927;
    --r-card: #141826;
    --r-code: #1d2333;
    --r-ink: #f4f7ff;
    --r-ink-2: #cad1e4;
    --r-ink-3: #a9b2cb;
    --r-linha: #283149;
    --r-linha-forte: #3a4463;
    --r-acento: #ff6a55;
    --r-acento-ink: #0d0f17;
    --r-chip: #1d2333;
    --r-cta: linear-gradient(135deg, #8f0007, #dc000c);
  }
}

.page-recursos { background: var(--r-bg); color: var(--r-ink); }
.page-recursos .site-nav::before { background: var(--r-bg); border-color: var(--r-linha); }
.page-recursos .nav-links a,
.page-recursos .nav-conta,
.page-recursos .wordmark { color: var(--r-ink); }
.page-recursos .wordmark .dot { color: var(--r-acento); }
.page-recursos .nav-links a[aria-current="page"] { color: var(--r-acento); }
.page-recursos .site-foot { background: var(--r-bg-2); border-top: 1px solid var(--r-linha); }
.page-recursos .site-foot, .page-recursos .foot-inner span { color: var(--r-ink-2); }
.page-recursos .foot-inner a:not(.wordmark) { color: var(--r-ink-2); }
.page-recursos .hero-int h1 { color: var(--r-ink); }
.page-recursos .lede, .page-recursos .fine { color: var(--r-ink-2); }
.page-recursos .fine a { color: var(--r-acento); }
.page-recursos .prose p, .page-recursos .prose li { color: var(--r-ink-2); }
.page-recursos .prose strong, .page-recursos .prose b,
.page-recursos .prose h2, .page-recursos .prose h3, .page-recursos .prose h4 { color: var(--r-ink); }
.page-recursos .prose a { color: var(--r-acento); }
.page-recursos .band { border-color: var(--r-linha); }

/* Pilulas de tipo, como na pagina antiga: BIBLIOTECA cheia, EM DESTAQUE vazada */
.rec-pills { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.rec-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 999px;
  font: 700 0.78rem/1.4 var(--font-ui);
}
.rec-pill-tipo { color: var(--r-acento-ink); background: var(--r-acento); }
.rec-pill-destaque { color: var(--r-ink); border: 1px solid var(--r-linha-forte); }
.rec-pills time, .rec-pills .rec-meta { color: var(--r-ink-3); font-size: 0.85rem; letter-spacing: 0; text-transform: none; }

/* Nav entre bibliotecas, o "segmented" do topo da pagina antiga */
.rec-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  margin-bottom: 26px;
  padding: 6px;
  background: var(--r-card);
  border: 1px solid var(--r-linha);
  border-radius: 999px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rec-nav::-webkit-scrollbar { display: none; }
.rec-nav a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 44px;
  padding: 9px 15px;
  color: var(--r-ink-2);
  border-radius: 999px;
  font: 600 0.86rem/1 var(--font-ui);
  text-decoration: none;
  white-space: nowrap;
}
.rec-nav a:hover { color: var(--r-ink); background: var(--r-bg-2); }
.rec-nav a[aria-current="page"] { color: var(--r-ink); background: var(--r-bg-2); }
.rec-nav .n { padding: 2px 8px; color: var(--r-ink-3); background: var(--r-chip); border-radius: 999px; font-size: 0.76rem; }
.rec-nav a[aria-current="page"] .n { color: var(--r-acento-ink); background: var(--r-acento); }

/* Cartao do hub: grade, como o "Comece pelo seu objetivo" da pagina antiga */
.rec-grade { display: grid; gap: 16px; margin-top: 26px; }
@media (min-width: 760px) { .rec-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rec-grade .card {
  margin: 0;
  padding: 24px;
  background: var(--r-card);
  border: 1px solid var(--r-linha);
  border-radius: 16px;
}
.rec-grade .card:hover { border-color: var(--r-linha-forte); }
.rec-grade .card .k { color: var(--r-ink-3); }
.rec-grade .card h3 { margin-top: 8px; }
.rec-grade .card h3 a { color: var(--r-ink); text-decoration: none; }
.rec-grade .card h3 a:hover { color: var(--r-acento); text-decoration: underline; }
.rec-grade .card .resumo { color: var(--r-ink-2); }
.rec-estat { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; color: var(--r-ink-2); font-size: 0.9rem; }
.rec-estat b { color: var(--r-ink); }

/* Painel de filtro: chips por secao + busca, como na pagina antiga */
.rec-filtro {
  display: none;
  margin-top: 26px;
  padding: 16px;
  background: var(--r-card);
  border: 1px solid var(--r-linha);
  border-radius: 14px;
}
html.tem-filtro .rec-filtro { display: block; }
.rec-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rec-chip {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  color: var(--r-ink-2);
  background: var(--r-chip);
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 0.84rem/1 var(--font-ui);
  cursor: pointer;
}
.rec-chip:hover { color: var(--r-ink); border-color: var(--r-linha-forte); }
.rec-chip[aria-pressed="true"] { color: var(--r-acento-ink); background: var(--r-acento); }
.rec-chip .n { opacity: 1; font-weight: 700; font-size: 0.78rem; }
.rec-filtro input:focus-visible { outline: 2px solid var(--r-acento); outline-offset: 2px; }
.rec-filtro label { display: block; margin-bottom: 7px; color: var(--r-ink); font-size: 0.84rem; font-weight: 600; }
.rec-filtro input {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  color: var(--r-ink);
  background: var(--r-bg);
  border: 1px solid var(--r-linha-forte);
  border-radius: 10px;
  font: 500 0.98rem/1.4 var(--font-ui);
}
.rec-filtro input::placeholder { color: var(--r-ink-3); }
#rec-contagem { margin: 10px 0 0; color: var(--r-ink-3); }

/* Bloco de codigo e prompt */
.pre-wrap { position: relative; margin-top: 18px; }
.page-recursos .prose pre {
  margin: 18px 0 0;
  padding: 18px 20px;
  overflow-x: auto;
  color: var(--r-ink);
  background: var(--r-code);
  border: 1px solid var(--r-linha);
  border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88rem;
  line-height: 1.62;
  white-space: pre-wrap;
  word-break: break-word;
}
.pre-wrap pre { margin-top: 0; padding-right: 108px; }
.page-recursos .prose pre code { padding: 0; background: none; border: 0; font-size: inherit; }
.page-recursos code, .page-recursos .mono { color: var(--r-ink); background: var(--r-chip); border-color: var(--r-linha); }
.pre-copiar {
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 44px;
  padding: 6px 13px;
  color: var(--r-ink);
  background: var(--r-bg);
  border: 1px solid var(--r-linha-forte);
  border-radius: 8px;
  font: 600 0.8rem/1 var(--font-ui);
  cursor: pointer;
}
.pre-copiar:hover { background: var(--r-bg-2); }
.pre-copiar:focus-visible { outline: 2px solid var(--r-acento); outline-offset: 2px; }
.pre-copiar.ok { color: var(--r-acento-ink); background: var(--r-acento); border-color: var(--r-acento); }
.pre-copiar.erro { color: var(--r-acento); border-color: var(--r-acento); }

.page-recursos kbd {
  padding: 2px 7px;
  color: var(--r-ink);
  background: var(--r-chip);
  border: 1px solid var(--r-linha-forte);
  border-bottom-width: 2px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.84em;
}

/* Tabela larga rola dentro da caixa; a pagina nunca rola de lado */
.tabela-rolavel { margin-top: 20px; overflow-x: auto; border: 1px solid var(--r-linha); border-radius: 12px; -webkit-overflow-scrolling: touch; }
.page-recursos .prose table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.92rem; }
.page-recursos .prose th, .page-recursos .prose td { padding: 12px 14px; color: var(--r-ink-2); text-align: left; vertical-align: top; border-bottom: 1px solid var(--r-linha); }
.page-recursos .prose th { color: var(--r-ink); background: var(--r-bg-2); font-weight: 700; white-space: nowrap; }
.page-recursos .prose tbody tr:last-child td { border-bottom: 0; }

.page-recursos .prose dl { margin-top: 20px; }
.page-recursos .prose dt { margin-top: 16px; color: var(--r-ink); font-weight: 700; }
.page-recursos .prose dd { margin: 4px 0 0; color: var(--r-ink-2); }

/* Conteudo secundario (outro SO, outra rota) */
.page-recursos .prose details { margin-top: 20px; padding: 2px 18px; background: var(--r-bg-2); border: 1px solid var(--r-linha); border-radius: 12px; }
.page-recursos .prose summary { padding: 14px 0; color: var(--r-ink); font-weight: 600; cursor: pointer; list-style: none; }
.page-recursos .prose summary::-webkit-details-marker { display: none; }
.page-recursos .prose summary::before {
  content: "+";
  display: inline-block;
  width: 1.2em;
  margin-right: 10px;
  color: var(--r-acento);
  font-weight: 800;
  text-align: center;
}
.page-recursos .prose details[open] > summary::before { content: "−"; }
.page-recursos .prose summary:focus-visible { outline: 2px solid var(--r-acento); outline-offset: 3px; }
.page-recursos .prose details > *:last-child { margin-bottom: 16px; }

.page-recursos .btn-primary { background: var(--r-cta); border-color: transparent; color: #fff; }
.page-recursos .band > .btn:not(.btn-primary), .page-recursos p > .btn:not(.btn-primary) { color: var(--r-ink); border-color: var(--r-linha-forte); background: transparent; }

@media (max-width: 720px) {
  .pre-wrap pre { padding-right: 20px; padding-top: 52px; }
  .pre-copiar { top: 8px; right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-recursos .prose summary::before { transition: none; }
}

/* Chrome da casa dentro do acervo, no esquema escuro. A nav, o rodape e os
   botoes usam tokens claros fixos (--surface-hi, --hair-strong): sem estes
   overrides o "Entrar" ficava texto claro sobre fundo claro, ilegivel. */
@media (prefers-color-scheme: dark) {
  .page-recursos .nav-conta {
    color: var(--r-ink);
    background: var(--r-card);
    border-color: var(--r-linha-forte);
  }
  .page-recursos .nav-conta:hover { background: var(--r-bg-2); }
  .page-recursos .btn-ghost,
  .page-recursos a.btn-ghost,
  .page-recursos a.ghost {
    color: var(--r-ink);
    background: var(--r-card);
    border-color: var(--r-linha-forte);
    box-shadow: none;
  }
  .page-recursos .site-foot { background: var(--r-bg-2); }
  .page-recursos .hero-int h1 em { color: var(--r-acento); }
  .page-recursos .prose blockquote { color: var(--r-ink-2); border-color: var(--r-linha-forte); }
}

/* A pilula da nav e o `.nav-inner`, com fundo branco a 80% e inset shadow
   clara. No escuro isso vira uma barra leitosa em cima do acervo. */
@media (prefers-color-scheme: dark) {
  .page-recursos .nav-inner {
    background: rgba(20, 24, 38, 0.86);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 8px 28px rgba(0, 0, 0, 0.45);
    border-color: var(--r-linha);
  }
  .page-recursos .nav-links a:hover { color: var(--r-acento); }
  /* O item ativo usa branco a 46%, que no escuro vira uma pilula cinza
     boiando. Aqui ele se marca por cor e fundo do proprio acervo. */
  .page-recursos .nav-links a[aria-current="page"] {
    color: var(--r-acento);
    background: rgba(255, 106, 85, 0.12);
  }
}

/* ==========================================================================
   Acervo interativo (2026-08-13). O acervo veio do thiagoxikota.com, onde era
   React: wizard de setup, workspace guiado, bibliotecas filtraveis, trilha por
   objetivo e paleta de busca. Aqui o COMPORTAMENTO foi refeito em JS puro; o
   que segue e a pele desses controles, sempre nos tokens --r-* do acervo.

   Regra de leitura: nada de hierarquia por opacidade. Estado se marca por cor,
   peso, borda ou espaco. Sem JS, os controles nao aparecem (.tem-js), entao a
   pagina nunca mostra botao morto.
   ========================================================================== */

/* O `html` da casa e branco fixo e so o `body` do acervo escurece: no escuro
   isso aparece como faixa branca no overscroll e embaixo de pagina curta. O
   escopo continua fechado no acervo, o resto da escola segue claro. */
@media (prefers-color-scheme: dark) {
  html:has(body.page-recursos) { background: #0d0f17; }
}

/* `h1, h2, h3` da casa usam --ink fixo, que no escuro do acervo vira texto
   escuro sobre fundo escuro. Sem esta linha, todo titulo fora da hero some
   (o "Comece pelo seu objetivo" e os titulos de grupo das bibliotecas). */
.page-recursos h1, .page-recursos h2, .page-recursos h3,
.page-recursos h4, .page-recursos h5, .page-recursos h6 { color: var(--r-ink); }
.page-recursos h1 em, .page-recursos h2 em { color: var(--r-acento); }

.page-recursos .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.page-recursos [hidden] { display: none !important; }
html:not(.tem-js) .so-js { display: none !important; }

@media (max-width: 720px) {
  .page-recursos .nav-links a,
  .page-recursos .nav-conta,
  .page-recursos .nav-acoes > .btn { min-height: 44px; }
}

/* Rotulo de secao dentro dos paineis (o SectionLabel do original) */
.rec-rotulo { margin: 0 0 6px; color: var(--r-ink); font: 700 0.95rem/1.4 var(--font-ui); letter-spacing: -0.01em; }

/* --- Bloco copiavel com rotulo de tipo -------------------------------- */
.rec-bloco { position: relative; margin-top: 18px; }
.rec-bloco > figcaption { margin-bottom: 6px; padding-right: 104px; color: var(--r-ink-3); font: 600 0.84rem/1.4 var(--font-ui); }
.rec-bloco > figcaption .rec-bloco-titulo { display: block; margin-top: 3px; color: var(--r-ink); font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; }
.page-recursos .rec-bloco pre { margin-top: 0; padding-right: 108px; }
@media (max-width: 720px) {
  .rec-bloco > figcaption { padding-right: 0; }
  .page-recursos .rec-bloco pre { padding-right: 20px; padding-top: 52px; }
}

/* --- Notas de destaque (InfoNote) ------------------------------------- */
.rec-nota { margin-top: 18px; padding: 15px 17px; color: var(--r-ink-2); background: var(--r-bg-2); border: 1px solid var(--r-linha); border-radius: 12px; }
.rec-nota > *:first-child { margin-top: 0; }
.rec-nota strong { color: var(--r-ink); }
.rec-nota-aviso { border-color: var(--r-linha-forte); }
.rec-nota-aviso > *:first-child strong:first-child, .rec-nota-aviso > strong:first-child { color: var(--r-acento); }
.rec-nota-ok { border-color: var(--r-linha-forte); }
.rec-persistencia-status { margin: 0 0 18px; padding: 12px 14px; color: var(--r-ink); background: var(--r-bg-2); border: 1px solid var(--r-acento); border-radius: 12px; font: 600 0.88rem/1.5 var(--font-ui); }


/* --- Wizard e workspace: casca comum ---------------------------------- */
.rec-wizard { margin-top: 28px; padding: clamp(16px, 4vw, 26px); background: var(--r-card); border: 1px solid var(--r-linha); border-radius: 18px; }
.rec-wizard > *:first-child { margin-top: 0; }
.rec-wizard h3, .rec-wizard h4 { margin-top: 4px; }
.rec-secao { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--r-linha); }
.rec-secao:first-of-type { border-top: 0; padding-top: 0; }

/* Cartoes de escolha (cliente do Claude, rota do portfolio) */
.rec-opcoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
@media (min-width: 640px) { .rec-opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rec-opcoes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rec-opcao { display: block; width: 100%; min-height: 76px; padding: 14px 16px; text-align: left; color: var(--r-ink-2); background: var(--r-bg); border: 1px solid var(--r-linha-forte); border-radius: 14px; font: 500 0.92rem/1.5 var(--font-ui); cursor: pointer; }
.rec-opcao:hover { background: var(--r-bg-2); border-color: var(--r-ink-3); }
.rec-opcao b { display: block; margin-bottom: 3px; color: var(--r-ink); font-size: 0.98rem; font-weight: 700; }
.rec-opcao[aria-pressed="true"] { color: var(--r-ink); background: var(--r-bg-2); border-color: var(--r-acento); border-width: 2px; padding: 13px 15px; }
.rec-opcao[aria-pressed="true"] b::after { content: " ✓"; color: var(--r-acento); }
.rec-opcao:focus-visible, .rec-aba:focus-visible, .rec-passo:focus-visible, .rec-chip:focus-visible, .rec-objetivo:focus-visible { outline: 2px solid var(--r-acento); outline-offset: 2px; }

/* Abas (sistema operacional) */
.rec-abas { display: flex; gap: 4px; margin-top: 10px; border-bottom: 1px solid var(--r-linha-forte); }
.rec-aba { position: relative; min-height: 44px; padding: 10px 16px; color: var(--r-ink-3); background: none; border: 0; font: 600 0.9rem/1 var(--font-ui); cursor: pointer; }
.rec-aba:hover { color: var(--r-ink); }
.rec-aba[aria-pressed="true"] { color: var(--r-ink); }
.rec-aba[aria-pressed="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; background: var(--r-acento); border-radius: 3px 3px 0 0; }

/* Chips de passo */
.rec-passos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 0; list-style: none; }
.rec-passos li { margin: 0; }
.rec-passo { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; padding: 9px 15px; color: var(--r-ink-2); background: var(--r-bg); border: 1px solid var(--r-linha-forte); border-radius: 999px; font: 600 0.85rem/1 var(--font-ui); cursor: pointer; }
.rec-passo:hover { color: var(--r-ink); background: var(--r-bg-2); }
.rec-passo[aria-current="step"] { color: var(--r-acento-ink); background: var(--r-acento); border-color: var(--r-acento); }
.rec-passo.feito { color: var(--r-ink); border-color: var(--r-acento); }
.rec-passo.feito::before { content: "✓"; color: var(--r-acento); font-weight: 800; }
.rec-passo[aria-current="step"].feito::before { color: var(--r-acento-ink); }


/* Painel do passo. O `90px` fixo escondia 48.7px do topo do painel atras da
   nav de duas linhas no celular; o offset agora sai do token medido. */
.rec-painel { margin-top: 20px; padding: clamp(15px, 3.5vw, 22px); background: var(--r-bg); border: 1px solid var(--r-linha); border-radius: 16px; scroll-margin-top: calc(var(--nav-h) + 14px); }
.rec-painel:focus-visible { outline: 2px solid var(--r-acento); outline-offset: 3px; }
.rec-painel-cab { padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--r-linha); }
.rec-painel-cab h4 { margin-top: 2px; }
.rec-painel-cab p { margin-top: 6px; }

/* Checklist de validacao */
.rec-check { margin-top: 20px; padding: 16px 18px; background: var(--r-bg-2); border: 1px solid var(--r-linha); border-radius: 12px; }

.rec-check ul { margin-top: 8px; padding-left: 0; list-style: none; }
/* Sem JS a marcacao nao salva nada. O texto continua (e conteudo util: e o
   criterio de pronto da etapa), mas a caixa some pra nao oferecer um controle
   que nao funciona. */
html:not(.tem-js) .rec-check input[type="checkbox"] { display: none; }
html:not(.tem-js) .rec-check label { cursor: default; }
html:not(.tem-js) .rec-check ul { padding-left: 22px; list-style: disc; }
.rec-check li + li { margin-top: 2px; }
.rec-check label { display: flex; gap: 11px; align-items: flex-start; min-height: 44px; padding: 8px 0; color: var(--r-ink-2); font-size: 0.94rem; line-height: 1.5; cursor: pointer; }
.rec-check input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--r-acento); cursor: pointer; }
.rec-check label:hover { color: var(--r-ink); }
.rec-feito { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--r-linha); color: var(--r-ink); font-weight: 700; font-size: 0.92rem; }


/* Rodape de navegacao do passo */
.rec-rodape { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--r-linha); }
/* Rotulo longo ("Ir pra etapa 2: Contas e ambiente") estoura a tela de 320px
   se o botao nao puder quebrar. */
.rec-rodape > * { max-width: 100%; }
.rec-rodape .btn { white-space: normal; text-align: left; }
.rec-link-botao { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding: 6px 0; color: var(--r-ink-3); background: none; border: 0; font: 600 0.86rem/1.4 var(--font-ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rec-link-botao:hover { color: var(--r-acento); }
.rec-link-botao:focus-visible { outline: 2px solid var(--r-acento); outline-offset: 3px; }

/* Barra de progresso */
.rec-progresso { margin-top: 18px; }
.rec-progresso-topo { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-content: space-between; }
.rec-progresso-texto { color: var(--r-ink); font-weight: 600; font-size: 0.9rem; }
.rec-progresso-trilho { height: 8px; margin-top: 8px; background: var(--r-chip); border: 1px solid var(--r-linha); border-radius: 999px; overflow: hidden; }
.rec-progresso-barra { height: 100%; width: 0; background: var(--r-acento); border-radius: 999px; transition: width var(--d-slow) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .rec-progresso-barra { transition: none; } }

/* Campo de texto do gerador e do token */
.rec-campo { margin-top: 14px; }
.rec-campo label { display: block; margin-bottom: 5px; color: var(--r-ink); font-size: 0.88rem; font-weight: 600; }
.rec-campo .rec-dica { margin: 0 0 6px; color: var(--r-ink-3); font-size: 0.82rem; }
.rec-campo input, .rec-campo textarea, .rec-campo select {
  width: 100%; min-height: 46px; padding: 11px 14px; color: var(--r-ink); background: var(--r-bg);
  border: 1px solid var(--r-linha-forte); border-radius: 10px; font: 500 0.95rem/1.5 var(--font-ui);
}
.rec-campo textarea { min-height: 110px; resize: vertical; }
.rec-campo input:focus-visible, .rec-campo textarea:focus-visible, .rec-campo select:focus-visible { outline: 2px solid var(--r-acento); outline-offset: 1px; }
.rec-campos { margin-top: 18px; padding: 16px; border: 1px solid var(--r-linha); border-radius: 14px; }
.rec-campos legend { padding: 0 8px; color: var(--r-ink); font-weight: 700; font-size: 0.9rem; }
.rec-token-linha { position: relative; }
.rec-token-linha input { padding-right: 104px; }
.rec-token-ver { position: absolute; top: 1px; right: 2px; min-width: 44px; min-height: 44px; padding: 8px 12px; color: var(--r-ink); background: var(--r-chip); border: 1px solid var(--r-linha-forte); border-radius: 8px; font: 600 0.8rem/1 var(--font-ui); cursor: pointer; }
.rec-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* --- Hub: objetivos, trilha e continuar ------------------------------- */
.rec-continuar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.rec-continuar a { display: inline-flex; gap: 8px; align-items: center; max-width: 100%; min-height: 44px; padding: 10px 18px; color: var(--r-ink); background: var(--r-card); border: 1px solid var(--r-linha-forte); border-radius: 999px; font-size: 0.9rem; text-decoration: none; }
.rec-continuar a:hover { border-color: var(--r-acento); color: var(--r-acento); }
.rec-continuar b { font-weight: 700; }
.rec-objetivos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 18px; }
@media (min-width: 700px) { .rec-objetivos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .rec-objetivos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rec-objetivo { min-height: 96px; padding: 16px 18px; text-align: left; color: var(--r-ink-2); background: var(--r-card); border: 1px solid var(--r-linha-forte); border-radius: 16px; font: 500 0.9rem/1.5 var(--font-ui); cursor: pointer; }
.rec-objetivo b { display: block; margin-bottom: 4px; color: var(--r-ink); font-size: 1rem; font-weight: 700; }
.rec-objetivo:hover { background: var(--r-bg-2); border-color: var(--r-ink-3); }
.rec-objetivo[aria-pressed="true"] { border-color: var(--r-acento); border-width: 2px; padding: 15px 17px; }
.rec-trilha { margin-top: 20px; padding: clamp(16px, 4vw, 24px); background: var(--r-card); border: 1px solid var(--r-linha); border-radius: 18px; }
/* Mesmo caso do painel: offset de ancora atrelado a altura real da nav. */
.rec-trilha h3 { margin-top: 0; scroll-margin-top: calc(var(--nav-h) + 14px); }
.rec-trilha h3:focus-visible { outline: 2px solid var(--r-acento); outline-offset: 4px; }
.rec-trilha-topo { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--r-linha); }
.rec-trilha-alvo { color: var(--r-ink); font-weight: 600; }
.rec-tempo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 0; border: 0; }
.rec-tempo legend { margin-bottom: 8px; padding: 0; color: var(--r-ink); font-size: 0.88rem; font-weight: 600; }
.rec-tempo-op { min-height: 44px; padding: 8px 14px; color: var(--r-ink-2); background: var(--r-chip); border: 1px solid transparent; border-radius: 999px; font: 600 0.84rem/1 var(--font-ui); cursor: pointer; }
.rec-tempo-op[aria-pressed="true"] { color: var(--r-acento-ink); background: var(--r-acento); }
.rec-tempo-op:focus-visible { outline: 2px solid var(--r-acento); outline-offset: 2px; }
.rec-trilha-lista { margin-top: 16px; padding-left: 0; list-style: none; }
.rec-trilha-lista > li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--r-linha); }
.rec-trilha-lista > li:first-child { border-top: 0; }
.rec-trilha-lista .n { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; color: var(--r-acento); background: var(--r-chip); border-radius: 999px; font: 700 0.82rem/1 var(--font-ui); }
.rec-trilha-lista li.feito .n { color: var(--r-acento-ink); background: var(--r-acento); }
.rec-trilha-lista li.feito .rec-passo-titulo a { color: var(--r-ink-3); text-decoration-line: line-through; }
.rec-trilha-lista li.destaque { background: var(--r-bg-2); border-radius: 12px; padding-left: 12px; padding-right: 12px; }
.rec-trilha-corpo { flex: 1 1 auto; min-width: 0; }
.rec-proximo { display: inline-block; margin-left: 8px; padding: 2px 10px; color: var(--r-acento-ink); background: var(--r-acento); border-radius: 999px; font: 700 0.76rem/1.6 var(--font-ui); vertical-align: 1px; }
.rec-trilha-lista .rec-min { margin-top: 4px; color: var(--r-ink-3); font-size: 0.82rem; }
.rec-trilha-check { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; min-height: 44px; color: var(--r-ink-2); font-size: 0.85rem; cursor: pointer; }
.rec-trilha-check input { width: 20px; height: 20px; accent-color: var(--r-acento); cursor: pointer; }

/* --- Paleta de busca --------------------------------------------------- */
.rec-busca-gatilho { display: flex; gap: 10px; align-items: center; width: 100%; max-width: 520px; min-height: 52px; margin-top: 22px; padding: 12px 18px; color: var(--r-ink-2); background: var(--r-card); border: 1px solid var(--r-linha-forte); border-radius: 999px; font: 500 0.95rem/1 var(--font-ui); text-align: left; cursor: pointer; }
.rec-busca-gatilho:hover { border-color: var(--r-acento); color: var(--r-ink); }
.rec-busca-gatilho:focus-visible { outline: 2px solid var(--r-acento); outline-offset: 2px; }
.rec-busca-gatilho .rec-atalho { margin-left: auto; padding: 3px 8px; color: var(--r-ink-3); background: var(--r-chip); border: 1px solid var(--r-linha); border-radius: 6px; font-size: 0.78rem; }
.rec-nav.tem-busca-compacta { margin-bottom: 10px; }
.rec-busca-compacta { display: flex; justify-content: flex-end; margin-bottom: 26px; }
.rec-busca-gatilho-compacto { width: auto; max-width: 100%; min-height: 44px; margin-top: 0; padding: 9px 14px; font-size: 0.84rem; }
@media (max-width: 640px) { .rec-busca-gatilho .rec-atalho { display: none; } }
.rec-paleta { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; padding: 0; background: rgba(13, 15, 23, 0.55); border: 0; max-width: none; max-height: none; width: 100%; height: 100%; }
.rec-paleta::backdrop { background: rgba(13, 15, 23, 0.55); }
.rec-paleta-caixa { display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: 80vh; background: var(--r-card); border: 1px solid var(--r-linha-forte); border-radius: 18px 18px 0 0; overflow: hidden; }
@media (min-width: 640px) { .rec-paleta { align-items: flex-start; padding-top: 12vh; } .rec-paleta-caixa { max-height: 62vh; border-radius: 18px; } }
.rec-paleta-topo { padding: 12px; border-bottom: 1px solid var(--r-linha); }
.rec-paleta-topo input { width: 100%; min-height: 48px; padding: 12px 14px; color: var(--r-ink); background: var(--r-bg); border: 1px solid var(--r-linha-forte); border-radius: 10px; font: 500 1rem/1.4 var(--font-ui); }
.rec-paleta-lista { flex: 1 1 auto; overflow-y: auto; padding: 6px; }
.rec-paleta-grupo { padding: 14px 12px 4px; color: var(--r-ink-3); font: 700 0.82rem/1.4 var(--font-ui); }
.rec-paleta-item { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; width: 100%; min-height: 44px; padding: 11px 12px; color: var(--r-ink); background: none; border: 0; border-radius: 10px; font: 500 0.94rem/1.4 var(--font-ui); text-align: left; text-decoration: none; cursor: pointer; }
.rec-paleta-item .rec-paleta-previa { flex: 0 1 auto; max-width: 48%; color: var(--r-ink-3); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .rec-paleta-item .rec-paleta-previa { display: none; } }
.rec-paleta-item:hover, .rec-paleta-item[aria-selected="true"] { background: var(--r-bg-2); }
.rec-paleta-item[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--r-acento); }
.rec-paleta-item[aria-selected="true"] .rec-paleta-previa { color: var(--r-ink-2); }
.rec-paleta-vazio { padding: 26px 12px; color: var(--r-ink-2); text-align: center; }
.rec-paleta-ajuda { padding: 10px 14px; color: var(--r-ink-3); border-top: 1px solid var(--r-linha); font-size: 0.8rem; }

/* --- Bibliotecas: barra de filtro e cartoes ---------------------------- */
/* O `top: 76px` era a altura da nav de desktop, e ficava abaixo dela em
   qualquer tela estreita: a 375px a nav mede 121px e comia 45px da barra,
   32px dos 40px do chip de filtro. Agora o offset acompanha a nav. */
.rec-barra { position: sticky; top: calc(var(--nav-h) + 8px); z-index: 20; margin-top: 24px; padding: 12px; background: var(--r-card); border: 1px solid var(--r-linha); border-radius: 14px; }
.rec-barra-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.rec-barra-chips::-webkit-scrollbar { display: none; }
.rec-barra .rec-chip { white-space: nowrap; }
.rec-chip[aria-checked="true"] { color: var(--r-acento-ink); background: var(--r-acento); }
.rec-barra-busca { position: relative; margin-top: 10px; }
.rec-barra-busca input { width: 100%; min-height: 46px; padding: 11px 14px; color: var(--r-ink); background: var(--r-bg); border: 1px solid var(--r-linha-forte); border-radius: 10px; font: 500 0.95rem/1.4 var(--font-ui); }
.rec-barra-busca input::placeholder { color: var(--r-ink-3); }
.rec-barra-busca input:focus-visible { outline: 2px solid var(--r-acento); outline-offset: 1px; }
.rec-resultado { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 12px; color: var(--r-ink-2); font-size: 0.88rem; }
.rec-resultado strong { color: var(--r-ink); }
.rec-limpar { min-width: 44px; min-height: 44px; padding: 8px 14px; color: var(--r-ink); background: var(--r-chip); border: 1px solid var(--r-linha-forte); border-radius: 999px; font: 600 0.82rem/1 var(--font-ui); cursor: pointer; }
.rec-limpar:hover { border-color: var(--r-acento); color: var(--r-acento); }
.rec-limpar:focus-visible { outline: 2px solid var(--r-acento); outline-offset: 2px; }

.page-recursos .prose .rec-grupo { margin-top: 44px; }
/* Os 150px e 140px destas duas ancoras limpavam a nav, mas nao a barra de
   filtro grudada abaixo dela: o alvo do salto caia 68px atras da barra. O
   offset agora e derivado (nav + 8px do sticky da barra + barra + 14px de
   respiro), entao vale em qualquer largura em vez de so numa. */
.page-recursos .prose .rec-grupo > h2 { margin-top: 0; scroll-margin-top: calc(var(--nav-h) + var(--barra-h) + 22px); }
.rec-grupo-desc { margin-top: 4px; color: var(--r-ink-3); }
.rec-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; }
.rec-lista-2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .rec-lista-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page-recursos .prose .rec-item { margin-top: 0; padding: 18px; background: var(--r-card); border: 1px solid var(--r-linha); border-radius: 14px; scroll-margin-top: calc(var(--nav-h) + var(--barra-h) + 22px); }
.page-recursos .prose .tabela-rolavel tr[id] { scroll-margin-top: calc(var(--nav-h) + var(--barra-h) + 22px); }
.page-recursos .prose .tabela-rolavel tr[id]:target { outline: 2px solid var(--r-acento); outline-offset: -2px; }
.page-recursos .prose .rec-item h3 { margin-top: 0; font-size: 1.02rem; }
.rec-item .rec-uso { margin-top: 6px; color: var(--r-ink-2); font-size: 0.92rem; }
.rec-corpo { position: relative; margin-top: 14px; }
html.tem-js .rec-corpo:not(.aberto) { max-height: 190px; overflow: hidden; }
html.tem-js .rec-corpo:not(.aberto)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(to bottom, transparent, var(--r-card)); pointer-events: none; }
.rec-corpo.sem-fade::after { display: none; }
.rec-expandir { margin-top: 10px; }
.rec-item-pe { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--r-linha); color: var(--r-ink-3); font-size: 0.82rem; }
.rec-selo { padding: 3px 11px; border-radius: 999px; font: 600 0.78rem/1.5 var(--font-ui); }
.rec-selo-official { color: var(--r-acento-ink); background: var(--r-acento); }
.rec-selo-industry, .rec-selo-community { color: var(--r-ink); background: var(--r-chip); border: 1px solid var(--r-linha-forte); }
.rec-variacoes { margin-top: 14px; }

/* Cartao de ferramenta */
.page-recursos .prose a.rec-item { display: block; color: inherit; text-decoration: none; background-image: none; }
.page-recursos .prose a.rec-item:hover { border-color: var(--r-acento); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.rec-item-topo { display: flex; gap: 11px; align-items: flex-start; }
.rec-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; overflow: hidden; color: var(--r-ink); background: var(--r-chip); border: 1px solid var(--r-linha); border-radius: 10px; font: 700 1rem/1 var(--font-ui); }
.rec-avatar img { width: 22px; height: 22px; }
.rec-item-topo h3 { min-width: 0; overflow-wrap: anywhere; }
.rec-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rec-etiqueta { padding: 3px 10px; border-radius: 999px; font: 600 0.74rem/1.6 var(--font-ui); }
.rec-etiqueta-free { color: #10502f; background: #cdf2df; }
.rec-etiqueta-freemium { color: #123c66; background: #cfe4fb; }
.rec-etiqueta-paid { color: #6b3b04; background: #fbe4c4; }
.rec-etiqueta-oss { color: var(--r-acento-ink); background: var(--r-acento); }
.rec-etiqueta-plataforma { color: var(--r-ink); background: var(--r-chip); border: 1px solid var(--r-linha-forte); }
@media (prefers-color-scheme: dark) {
  .rec-etiqueta-free { color: #062b17; background: #6ee7b7; }
  .rec-etiqueta-freemium { color: #06203c; background: #93c5fd; }
  .rec-etiqueta-paid { color: #3b2100; background: #fcd34d; }
}
.rec-item .rec-quando { margin-top: 10px; color: var(--r-ink-2); font-size: 0.9rem; }
.rec-item .rec-quando strong { color: var(--r-ink); }
.rec-item .rec-preco { margin-top: 6px; color: var(--r-ink-3); font-size: 0.82rem; }

/* Destaques ("O que eu uso de verdade") */
.rec-destaques { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
@media (min-width: 640px) { .rec-destaques { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rec-destaques { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.page-recursos .prose a.rec-destaque { display: flex; gap: 11px; align-items: center; padding: 14px; color: inherit; background: var(--r-card); border: 1px solid var(--r-linha); border-radius: 14px; text-decoration: none; background-image: none; }
.page-recursos .prose a.rec-destaque:hover { border-color: var(--r-acento); }
/* min-width 0 no item flex: sem isso o texto de uma linha vira largura minima
   do cartao e a grade estoura a tela no celular. */
.rec-destaque > span { min-width: 0; flex: 1 1 auto; }
.rec-destaque b { display: block; color: var(--r-ink); font-size: 0.94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-destaque > span > span { display: block; margin-top: 2px; color: var(--r-ink-2); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-destaque .rec-avatar { width: 42px; height: 42px; }

/* Mapa de fluxo (etapa de publicacao) */
.rec-fluxo { margin-top: 18px; padding-left: 0; list-style: none; }
.rec-fluxo li { padding: 12px 16px; color: var(--r-ink); background: var(--r-bg-2); border: 1px solid var(--r-linha); border-radius: 12px; font-size: 0.92rem; }
.rec-fluxo li + li { margin-top: 6px; }
.rec-fluxo li span { display: block; color: var(--r-ink-3); font-size: 0.82rem; }
.rec-fluxo li + li::before { content: "↓"; display: block; margin: -20px 0 6px; color: var(--r-acento); font-weight: 700; }

/* Tags do recurso e navegacao entre recursos */
.rec-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.rec-tags a, .rec-tags span { padding: 6px 12px; color: var(--r-ink-2); background: var(--r-chip); border-radius: 999px; font-size: 0.82rem; text-decoration: none; }
.rec-tags a:hover { color: var(--r-acento-ink); background: var(--r-acento); }

/* --- Hub: banner do objetivo, CTA da trilha e proximos passos ---------- */
/* Sem JS as 7 trilhas aparecem inteiras, uma embaixo da outra; com JS o hub
   mostra so a escolhida. A regra abaixo evita o flash das outras 6. */
html.tem-js .rec-trilha { display: none; }
html.tem-js .rec-trilha.ativa { display: block; }
/* Alvo do "Comece pelo seu objetivo": o `90px` deixava 31px do titulo atras da
   nav no celular. Offset agora acompanha a altura medida da nav. */
.page-recursos #objetivos { scroll-margin-top: calc(var(--nav-h) + 14px); }
.rec-objetivo-atual { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; margin-top: 18px; padding: 14px 18px; background: var(--r-card); border: 2px solid var(--r-acento); border-radius: 16px; }
.rec-objetivo-atual .rec-rotulo { margin-bottom: 2px; }
.rec-progresso-texto.completa { color: var(--r-acento); }
.rec-tempo-dica { margin-top: 8px; color: var(--r-ink-2); font-size: 0.88rem; }
.rec-trilha-saida { margin-top: 18px; color: var(--r-ink-2); }
.rec-trilha-saida b { color: var(--r-ink); }
.rec-trilha-cta { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--r-linha); }
.rec-trilha-cta p { margin-top: 8px; color: var(--r-ink-2); }
.rec-trilha-cta-titulo { margin-top: 0; color: var(--r-ink); font-weight: 700; }
/* O nome do recurso salvo e livre: sem teto e min-width, o chip empurra a
   pagina em 320px em vez de cortar o texto. */
.rec-continuar-nome { flex: 0 1 auto; overflow: hidden; min-width: 4ch; max-width: 34ch; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) { .rec-grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rec-grade-3 .card.destaque { border-color: var(--r-acento); }
.rec-card-cta { margin-top: 14px; }
.rec-card-cta a { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; color: var(--r-acento); font-weight: 600; font-size: 0.92rem; text-decoration: underline; text-underline-offset: 3px; }
.rec-card-cta a:hover { color: var(--r-ink); }

/* --- Recurso: bloco "Continue lendo" ---------------------------------- */
.rec-relacionados { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--r-linha); }
.rec-relacionados .rec-grade { margin-top: 16px; }
.rec-relacionados .card .k { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.rec-relacionados-ver { margin-top: 20px; }
.rec-relacionados-ver a { color: var(--r-acento); font-weight: 600; font-size: 0.9rem; }

/* --- Wizard do Figma: variantes, apps, escopos, diagnostico ------------ */

/* Sem JS o wizard mostra as 4 combinacoes de cliente e SO de uma vez, e cada
   bloco precisa dizer de qual e. Com JS so a escolhida fica na tela, e o rotulo
   vira ruido. */
.rec-variante-rotulo { margin: 14px 0 8px; padding: 7px 12px; color: var(--r-ink); background: var(--r-chip); border: 1px solid var(--r-linha-forte); border-radius: 8px; font-weight: 700; font-size: 0.9rem; }
html.tem-js .rec-variante-rotulo { display: none; }

.rec-apps { margin-top: 10px; padding-left: 0; list-style: none; }
.rec-apps li + li { margin-top: 8px; }
.page-recursos .prose a.rec-app { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; min-height: 44px; padding: 12px 16px; color: var(--r-ink); background: var(--r-bg-2); border: 1px solid var(--r-linha-forte); border-radius: 12px; text-decoration: none; background-image: none; }
.page-recursos .prose a.rec-app:hover { border-color: var(--r-acento); }
.rec-app b { display: block; font-size: 0.96rem; }
.rec-app-nome span { display: block; margin-top: 2px; color: var(--r-ink-2); font-size: 0.82rem; }
.rec-app-acao { color: var(--r-acento); font-weight: 700; font-size: 0.86rem; }

.rec-escopos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-left: 0; list-style: none; }
.page-recursos .prose .rec-escopos li { margin-top: 0; padding: 6px 12px; color: var(--r-ink); background: var(--r-chip); border-radius: 999px; font-size: 0.82rem; }

.rec-diag { margin-top: 12px; padding-left: 0; list-style: none; }
.page-recursos .prose .rec-diag > li { margin-top: 10px; padding: 14px 16px; background: var(--r-bg-2); border: 1px solid var(--r-linha); border-radius: 12px; }
.rec-diag b { display: block; color: var(--r-ink); }
.rec-diag p { margin-top: 6px; }

.rec-rodape-col { flex-direction: column; align-items: stretch; }
.rec-rodape-col .rec-acoes { align-items: center; }
/* O rotulo do livro e longo e .btn nasce nowrap: sem quebrar, estoura a tela em 320px. */
.rec-rodape-col .rec-acoes .btn { white-space: normal; text-align: center; }

/* Captura de tela do tutorial: reserva a proporcao antes de carregar (sem
   pulo de layout) e nunca estoura a largura do painel. */
.rec-figura { margin-top: 18px; }
.rec-figura img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: var(--r-bg-2); border: 1px solid var(--r-linha); border-radius: 12px; }
.rec-figura figcaption { margin-top: 8px; color: var(--r-ink-3); font-size: 0.86rem; }
/* Ritmo vertical dentro dos paineis. Sem isso o conteudo do passo sai colado:
   paragrafo, rotulo e bloco encostam um no outro e a leitura trava. */
.rec-painel > * + *, .rec-secao > * + *, .rec-wizard > * + * { margin-top: 18px; }
.rec-painel .rec-rotulo, .rec-secao .rec-rotulo { margin-top: 26px; }
.rec-painel-cab + *, .rec-painel > *:first-child { margin-top: 0; }
.rec-painel p + p, .rec-painel ul + p, .rec-painel ol + p { margin-top: 14px; }
.rec-painel ul, .rec-painel ol { margin-top: 12px; }
.rec-painel li + li { margin-top: 8px; }
.rec-painel .rec-nota + .rec-nota { margin-top: 14px; }

/* Grade sempre fecha: card sozinho na ultima linha e veto do dono. Quando o
   ultimo item cai sozinho numa fila nova, ele ocupa a fila inteira. */
@media (min-width: 700px) {
  .rec-objetivos > :last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  .rec-objetivos > :last-child:nth-child(2n + 1) { grid-column: auto; }
  .rec-objetivos > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
@media (min-width: 760px) {
  .rec-grade > :last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}