/* ==========================================================================
   Raphael Fontes - folha de estilo única
   Tokens vindos do kit de identidade visual.
   Mobile-first. Breakpoints: 720px (tablet), 1024px (desktop).
   ========================================================================== */

:root {
  /* Cores da marca */
  --navy:        #0F172A;  /* azul profundidade */
  --navy-2:      #132238;  /* azul secundário */
  --navy-line:   #24354F;  /* borda sobre navy */
  --navy-rule:   #1B2A44;  /* divisor sutil sobre navy */
  --navy-dot:    #1A2C48;  /* malha de pontos */
  --orange:      #F97316;  /* laranja destaque */
  --orange-hi:   #FB8C3C;  /* hover */
  --gray-050:    #F5F7FA;  /* cinza claro */
  --graphite:    #1E1E1E;  /* grafite apoio */

  /* Neutros de texto */
  --white:       #FFFFFF;
  --ink-050:     #F8FAFC;
  --ink-200:     #E2E8F0;
  --ink-300:     #CBD5E1;
  --ink-400:     #94A3B8;
  --ink-500:     #64748B;
  --ink-600:     #475569;
  --border:      #E2E8F0;
  --border-soft: #EEF2F6;

  /* Tipografia */
  --font-sans: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Ritmo */
  --pad-x: 22px;
  --section-y: 64px;
  --maxw: 1200px;
}

@media (min-width: 720px)  { :root { --pad-x: 40px; --section-y: 88px; } }
@media (min-width: 1024px) { :root { --pad-x: 80px; --section-y: 104px; } }

/* ---------- Reset enxuto ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-hi); }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--orange);
  color: var(--navy);
  padding: 12px 18px;
  font-weight: 600;
  z-index: 100;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Campo-armadilha (honeypot) do formulario de newsletter: some da tela e do
   leitor de tela (junto com tabindex="-1" e aria-hidden no HTML), mas continua
   no DOM para bot simples preencher. Diferente de .visually-hidden, que existe
   para texto que a pessoa com leitor de tela precisa ouvir: aqui ninguem deve
   nem saber que o campo existe. */
.hp { position: absolute; left: -9999px; top: -9999px; }

/* ---------- Estruturas ---------- */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--section-y); }
.section--light  { background: var(--gray-050); }
.section--white  { background: var(--white); }
.section--navy   { background: var(--navy); color: var(--ink-200); position: relative; overflow: hidden; }
.section--navy-2 { background: var(--navy-2); color: var(--ink-200); position: relative; overflow: hidden; }

.section--navy h2, .section--navy h3,
.section--navy-2 h2, .section--navy-2 h3 { color: var(--ink-050); }

/* Malha de pontos: textura do kit */
.dotgrid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--navy-dot) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.6;
  pointer-events: none;
}
.dotgrid > * { position: relative; }

/* ---------- Tipografia utilitária ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--orange);
  flex-shrink: 0;
}

.mono {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.h1  { font-size: clamp(2.25rem, 6vw, 3.75rem); }
.h2  { font-size: clamp(1.75rem, 4vw, 2.625rem); }
.h3  { font-size: clamp(1.125rem, 2vw, 1.3125rem); font-weight: 600; line-height: 1.32; }

.lead {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.62;
  color: var(--ink-600);
}
.section--navy .lead, .section--navy-2 .lead { color: var(--ink-400); }

/* ---------- Prosa: escala tipografica do corpo de artigo ----------
   O reset global zera margem de titulo e paragrafo, e tira marcador de
   lista, porque isso serve aos menus. Markdown gera HTML puro, entao a
   prosa precisa da escala aqui. Nao usar style= inline em artigo. */

/* 68ch rendia 96 caracteres por linha em Sora, medido, porque o glifo "0"
   e bem mais largo que a media. 52ch fica na faixa confortavel de leitura. */
.prose { max-width: 52ch; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-600); }
.prose > :first-child { margin-top: 0; }

.prose p { margin-top: 1.15em; }

/* O primeiro paragrafo e a resposta direta ao titulo, o trecho que busca
   e IA extraem. Ganha um pouco mais de corpo por isso. */
.prose > p:first-of-type { font-size: 1.125rem; line-height: 1.65; color: var(--ink-600); }

.prose h2 {
  margin-top: 2.2em;
  margin-bottom: 0.55em;
  font-size: clamp(1.3125rem, 2.4vw, 1.625rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--navy);
}
.prose h3 {
  margin-top: 1.8em;
  margin-bottom: 0.4em;
  font-size: clamp(1.0625rem, 1.8vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.34;
  color: var(--navy);
}

.prose strong { font-weight: 600; color: var(--navy); }
.prose em { font-style: italic; }

.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.prose ul, .prose ol { margin: 1.3em 0; padding-left: 1.35em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: 0.6em; padding-left: 0.25em; }
.prose li::marker { color: var(--ink-400); }
.prose li > p { margin-top: 0.5em; }

.prose blockquote {
  margin: 1.8em 0;
  padding: 2px 0 2px 22px;
  border-left: 2px solid var(--orange);
  color: var(--ink-500);
}
.prose blockquote p { margin-top: 0.6em; }
.prose blockquote > :first-child { margin-top: 0; }

.prose hr { margin: 2.6em 0; border: 0; border-top: 1px solid var(--border); }

.section-head { margin-bottom: 40px; max-width: 44rem; }

@media (min-width: 1024px) {
  .section-head--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 64px;
    max-width: none;
  }
  .section-head--split > :first-child { max-width: 44rem; }
  .section-head--split > p { max-width: 22rem; margin: 0; }
}

/* ---------- Botões e links de ação ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* O atributo hidden vem do navegador como display:none, com especificidade
   baixissima, entao qualquer regra que declare display o anula em silencio. Foi
   o que aconteceu com os botoes do simulado: .btn declara inline-flex, e o
   "Refazer do zero" aparecia desde o carregamento, antes de existir o que
   refazer. Vale para qualquer componente com display proprio que use hidden. */
[hidden] { display: none !important; }

.btn--primary { background: var(--orange); color: var(--navy); }
.btn--primary:hover { background: var(--orange-hi); color: var(--navy); }

.btn--ghost { border-color: var(--border); color: var(--navy); background: transparent; }
.btn--ghost:hover { border-color: var(--navy); color: var(--navy); }

.hero .btn--ghost,
.section--navy .btn--ghost,
.section--navy-2 .btn--ghost { border-color: #2C3E5C; color: var(--ink-200); background: transparent; }
.hero .btn--ghost:hover,
.section--navy .btn--ghost:hover,
.section--navy-2 .btn--ghost:hover { border-color: var(--orange); color: var(--ink-050); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-mono {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}
.link-mono:hover { color: var(--orange); }
.hero .link-mono,
.section--navy .link-mono, .section--navy-2 .link-mono { color: var(--ink-050); }

/* ---------- Header ---------- */

.site-header {
  background: var(--navy);
  border-bottom: 1px solid var(--navy-rule);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
  padding-block: 12px;
}

@media (min-width: 1024px) { .site-header__inner { min-height: 88px; } }

.brand { display: flex; align-items: center; gap: 12px; color: var(--ink-050); }
.brand:hover { color: var(--ink-050); }

.brand__mark {
  width: 38px; height: 38px;
  flex-shrink: 0;
  background: var(--navy-2);
  border: 1px solid var(--navy-line);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.brand__name { font-size: 0.875rem; font-weight: 600; line-height: 1.2; }
.brand__role {
  display: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
@media (min-width: 1024px) { .brand__role { display: block; margin-top: 2px; } }

.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: 32px; }
  .nav a {
    font-size: 0.84375rem;
    color: var(--ink-300);
    padding-block: 4px;
    border-bottom: 1px solid transparent;
  }
  .nav a:hover { color: var(--ink-050); border-bottom-color: var(--navy-line); }
  .nav a[aria-current="page"] { color: var(--ink-050); border-bottom-color: var(--orange); }
}

/* Menu mobile: <details>, sem JavaScript */
.nav-mobile { position: relative; }
@media (min-width: 1024px) { .nav-mobile { display: none; } }

.nav-mobile > summary {
  list-style: none;
  width: 44px; height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding-inline: 10px;
  cursor: pointer;
}
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile > summary span { height: 1.5px; background: var(--ink-050); }
.nav-mobile > summary span:last-child { width: 14px; background: var(--orange); }

.nav-mobile__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  min-width: 220px;
  background: var(--navy-2);
  border: 1px solid var(--navy-line);
  padding: 8px 0;
}
.nav-mobile__panel a {
  display: block;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding-inline: 20px;
  font-size: 0.9375rem;
  color: var(--ink-200);
}
.nav-mobile__panel a:hover { background: var(--navy); color: var(--ink-050); }

/* Submenu "Artigos": <details> aninhado, sem JavaScript. */
.nav-drop summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav-drop summary::-webkit-details-marker { display: none; }
.nav-drop summary::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  opacity: 0.7;
}
.nav-drop[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }

/* Desktop: dropdown flutuante ancorado no summary, dentro de .nav. */
@media (min-width: 1024px) {
  .nav .nav-drop { position: relative; }
  .nav .nav-drop summary {
    font-size: 0.84375rem;
    color: var(--ink-300);
    padding-block: 4px;
    border-bottom: 1px solid transparent;
  }
  .nav .nav-drop summary:hover,
  .nav .nav-drop[open] summary { color: var(--ink-050); border-bottom-color: var(--navy-line); }
  .nav .nav-drop summary[aria-current="page"] { color: var(--ink-050); border-bottom-color: var(--orange); }

  .nav .nav-drop__panel {
    position: absolute;
    left: 0;
    top: calc(100% + 16px);
    min-width: 260px;
    background: var(--navy-2);
    border: 1px solid var(--navy-line);
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    z-index: 20;
  }
  .nav .nav-drop__panel a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 18px;
    font-size: 0.875rem;
    color: var(--ink-200);
    border-bottom: 0;
  }
  .nav .nav-drop__panel a:hover { background: var(--navy); color: var(--ink-050); }
}

/* Mobile: aninhado dentro do painel, sem posicionamento absoluto, so recuo. */
.nav-drop--mobile summary {
  min-height: 48px;
  padding-inline: 20px;
  font-size: 0.9375rem;
  color: var(--ink-200);
}
.nav-drop--mobile summary:hover { background: var(--navy); color: var(--ink-050); }
.nav-drop--mobile .nav-drop__panel a {
  padding-inline: 34px;
  font-size: 0.875rem;
  color: var(--ink-300);
}

/* ---------- Hero ---------- */

.hero { background: var(--navy); color: var(--ink-200); position: relative; overflow: hidden; }
.hero__inner { padding-block: 56px; position: relative; }
@media (min-width: 1024px) { .hero__inner { padding-block: 96px; } }

.hero__dots {
  position: absolute;
  top: 0; right: 0;
  width: 60%;
  height: 100%;
  background-image: radial-gradient(#1E3A5F 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.5;
  pointer-events: none;
}

.hero__grid { display: grid; gap: 44px; position: relative; }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 72px; align-items: start; }
}

/* Hero puramente tipográfico, sem retrato */
.hero__grid--text { max-width: 60rem; }
@media (min-width: 1024px) { .hero__grid--text { grid-template-columns: minmax(0, 1fr); } }

.hero h1 { color: var(--ink-050); margin-bottom: 24px; line-height: 1.08; }
.hero .lead { margin-bottom: 32px; max-width: 36rem; }

.hero__figure { position: relative; }
.hero__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 12%;
  background: var(--navy-2);
}
.hero__figure::after {
  content: "";
  position: absolute;
  right: -16px; bottom: -16px;
  width: 76px; height: 76px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  pointer-events: none;
}

/* ---------- Faixa de temas ---------- */

.topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.topics a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  background: var(--white);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-600);
}
.topics a:hover { border-color: var(--orange); color: var(--navy); }
/* Tema anunciado mas ainda sem artigo: aparece, nao clica. */
.topics span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px dashed var(--border);
  color: var(--ink-400);
  font-size: 0.8125rem;
  cursor: default;
}

/* ---------- Grades e cartões ---------- */

.grid { display: grid; gap: 16px; }
@media (min-width: 720px)  { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px)  { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card--navy { background: var(--navy-2); border-color: var(--navy-line); }
.card--navy h3 { color: var(--ink-050); }
.card--navy p  { color: var(--ink-400); }

.card__kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}
.card__meta {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.card--navy .card__meta { border-top-color: var(--navy-line); }
.card p { color: var(--ink-600); font-size: 0.9375rem; }

.card--link { transition: border-color 0.15s ease; }
.card--link:hover { border-color: var(--orange); }
.card--link h3 a { color: inherit; }
.card--link h3 a:hover { color: var(--orange); }

/* Dois cartoes de artigo acima da lista de download, na Biblioteca. Grade
   propria e nao .grid--3 porque sao sempre dois, e dois cards numa grade de
   tres deixam um buraco a direita. */
.grade-artigos { display: grid; gap: 16px; margin-bottom: 40px; }
@media (min-width: 720px) { .grade-artigos { grid-template-columns: 1fr 1fr; } }

/* ---------- Filtro de artigos ----------
   Radio escondido + rotulo adjacente, sem JavaScript. O rotulo funciona como
   aba: :checked muda a cor dele, e :has() no ancestral .filtro esconde no
   .filtro__lista os cartoes cujo data-fase nao bate com a aba marcada. Nao usa
   #ancora porque navegacao por hash arrasta a pagina na vertical (ver nota do
   carrossel mais abaixo); radio preserva a posicao de rolagem.

   ATENCAO: a lista de seletores logo abaixo e ESTATICA, uma linha por fase.
   CSS nao le site.json, entao adicionar uma fase nova em site.fases (para uma
   serie nova, por exemplo) NAO basta: sem a linha correspondente aqui, a aba
   aparece no filtro, o radio marca, mas nenhum cartao some. Isso ja aconteceu
   uma vez, com a fase "jornada-de-ia": a aba renderizava e o radio marcava
   certinho, e so ao testar o clique de verdade (nao so olhar o HTML) que
   ficou claro que o filtro nao filtrava nada. */

.filtro__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0 0 32px;
}
.filtro__radio {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.filtro__tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--ink-500);
}
.filtro__tab:hover { border-color: var(--orange); color: var(--orange); }
.filtro__radio:checked + .filtro__tab {
  background: var(--navy);
  border-color: var(--navy);
  color: #FFFFFF;
}
.filtro__radio:focus-visible + .filtro__tab {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.filtro:has(#fase-safe:checked) .filtro__lista .card:not([data-fase="safe"]),
.filtro:has(#fase-descobrir:checked) .filtro__lista .card:not([data-fase="descobrir"]),
.filtro:has(#fase-construir:checked) .filtro__lista .card:not([data-fase="construir"]),
.filtro:has(#fase-entregar:checked) .filtro__lista .card:not([data-fase="entregar"]),
.filtro:has(#fase-operar:checked) .filtro__lista .card:not([data-fase="operar"]),
.filtro:has(#fase-arranjo:checked) .filtro__lista .card:not([data-fase="arranjo"]),
.filtro:has(#fase-times:checked) .filtro__lista .card:not([data-fase="times"]),
.filtro:has(#fase-documentos:checked) .filtro__lista .card:not([data-fase="documentos"]),
.filtro:has(#fase-jornada-de-ia:checked) .filtro__lista .card:not([data-fase="jornada-de-ia"]),
.filtro:has(#fase-fundamentos-de-ia:checked) .filtro__lista .card:not([data-fase="fundamentos-de-ia"]) {
  display: none;
}

/* ---------- Lista de cases ---------- */

.stack-list { border-top: 1px solid var(--border); }
.stack-list > li { border-bottom: 1px solid var(--border); }
.stack-list__row {
  display: grid;
  gap: 8px;
  padding-block: 26px;
}
@media (min-width: 1024px) {
  .stack-list__row {
    grid-template-columns: 180px minmax(0, 1fr) 200px;
    gap: 32px;
    align-items: baseline;
  }
}
.stack-list h3 { font-size: 1.125rem; }
.stack-list p { color: var(--ink-600); font-size: 0.9375rem; }
.stack-list__row > div > p { margin-top: 8px; }

/* Linha de etapa expansivel: <details>/<summary>, sem JavaScript. O clique
   abre a lista de artigos ali mesmo, sem navegar para a pagina de etapa. */
.stack-list__item > summary { list-style: none; cursor: pointer; }
.stack-list__item > summary::-webkit-details-marker { display: none; }
.stack-list__item > summary:hover h2 { color: var(--orange); }
.stack-list__count { display: flex; align-items: center; gap: 8px; }
@media (min-width: 1024px) { .stack-list__count { justify-content: space-between; } }
.stack-list__caret {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--ink-400);
  border-bottom: 1.5px solid var(--ink-400);
  transform: rotate(45deg);
}
.stack-list__item[open] .stack-list__caret { transform: rotate(-135deg); }
.stack-list__panel { padding-bottom: 28px; }
.stack-list__panel .grid { margin-top: 4px; }
.stack-list__panel > p:last-child { margin-top: 16px; }

/* ---------- Linha do tempo ---------- */

.timeline { border-left: 1px solid #CBD5E1; padding-left: 28px; list-style: none; }
.timeline > li { position: relative; padding-bottom: 34px; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 9px;
  width: 9px; height: 9px;
  background: var(--orange);
}
.timeline__year {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-500);
}
.timeline h3 { font-size: 1.0625rem; margin-block: 6px 6px; }
.timeline p { font-size: 0.9375rem; color: var(--ink-600); }

/* ---------- Newsletter ---------- */

.newsletter__form {
  display: grid;
  gap: 12px;
  max-width: 34rem;
  margin-top: 24px;
}
@media (min-width: 720px) {
  .newsletter__form { grid-template-columns: minmax(0, 1fr) auto; }
}
.newsletter__form input[type="email"] {
  min-height: 48px;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--ink-050);
  background: var(--navy);
  border: 1px solid var(--navy-line);
}
.newsletter__form input[type="email"]::placeholder { color: var(--ink-500); }
.newsletter__form input[type="email"]:focus { border-color: var(--orange); outline: none; }
.newsletter__note {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* ---------- Bloco de contato ---------- */

.contact-list { display: grid; gap: 0; margin-top: 24px; }
.contact-list > li { border-top: 1px solid var(--navy-line); }
.contact-list > li:last-child { border-bottom: 1px solid var(--navy-line); }
.contact-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding-block: 14px;
  color: var(--ink-200);
  font-size: 0.9375rem;
}
.contact-list a:hover { color: var(--orange); }
.contact-list .mono { color: var(--ink-500); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy);
  color: var(--ink-400);
  border-top: 1px solid var(--navy-rule);
  padding-block: 48px 32px;
}
.site-footer__top { display: grid; gap: 36px; }
@media (min-width: 1024px) {
  .site-footer__top { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 80px; }
}
.site-footer__cols { display: grid; gap: 28px; }
@media (min-width: 720px) { .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } }

.site-footer h2 {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}
.site-footer a { color: var(--ink-400); font-size: 0.8125rem; }
.site-footer a:hover { color: var(--ink-050); }
.site-footer li a { display: flex; align-items: center; min-height: 40px; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--navy-rule);
}
.site-footer__bottom p {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #475569;
}

/* ---------- Preferência de movimento ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Tabela na prosa ----------
   Vale mais que print de tabela: e legivel por busca e por IA, responde a
   busca por texto e rola sozinha em tela estreita. */

.prose .tabela { margin: 2.2em 0; overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 30rem; }
.prose caption {
  caption-side: bottom;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-500);
  text-align: left;
  padding-left: 14px;
  border-left: 2px solid var(--orange);
}
.prose th, .prose td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  line-height: 1.55;
}
.prose thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  border-bottom: 1px solid var(--navy-line);
  white-space: nowrap;
}
.prose tbody th { font-weight: 600; color: var(--navy); white-space: nowrap; }
.prose tbody tr:last-child th, .prose tbody tr:last-child td { border-bottom: 0; }

/* ---------- Figura: diagrama proprio em SVG dentro da prosa ---------- */

/* A coluna de texto e estreita de proposito, mas diagrama pede largura.
   A figura extrapola a medida da prosa no desktop, sem passar do container. */
.figura { margin: 2.4em 0; }
@media (min-width: 1024px) {
  .prose .figura { width: 128%; max-width: 820px; }
}
.figura svg { width: 100%; height: auto; display: block; }
.figura figcaption {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-500);
  padding-left: 14px;
  border-left: 2px solid var(--orange);
}
/* Diagrama largo rola dentro de si em tela estreita, a pagina nunca. */
@media (max-width: 719px) {
  .figura { overflow-x: auto; }
  .figura svg { min-width: 620px; }
}

/* Diagrama vertical (roteiro, lista, comparacao) e desenhado para caber na
   largura da propria prosa, ao contrario do grafico de barra largo acima:
   nao precisa nem da extrapolacao de 128% no desktop, nem do min-width que
   forcaria rolagem horizontal no mobile por nada. */
.prose .figura--vertical { width: 100%; max-width: 620px; }
@media (max-width: 719px) {
  .figura--vertical { overflow-x: visible; }
  .figura--vertical svg { min-width: 0; }
}

/* Capa de e-book: card de retrato, fora da .prose (vive numa landing page, nao
   dentro de artigo), com sombra para sugerir profundidade de capa fisica sem
   usar foto nem mockup 3D. Largura fixa e pequena de proposito: e a imagem de
   apoio da secao, o texto ao lado carrega o argumento. */
.figura--capa { margin: 0; max-width: 320px; }
.figura--capa svg {
  border-radius: 10px;
  box-shadow: 0 24px 48px -16px rgba(15, 23, 42, 0.45);
}

/* ---------- Certificacoes: carrossel sem JavaScript ----------
   Barra de rolagem escondida, com esmaecimento nas pontas indicando
   continuidade. As setas dependem de assets/carrossel.js e por isso
   ficam ocultas ate ele inicializar: sem script nao ha botao morto, e a
   faixa segue rolavel por swipe, trackpad e teclado. */

.carrossel { display: flex; align-items: center; gap: 16px; margin-top: 32px; }

.carrossel__janela { position: relative; flex: 1 1 auto; min-width: 0; }

/* Esmaecimento nas duas pontas, sinalizando que ha mais conteudo. */
.carrossel__janela::before,
.carrossel__janela::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 1;
}
.carrossel__janela::before { left: 0;  background: linear-gradient(to right, var(--gray-050), transparent); }
.carrossel__janela::after  { right: 0; background: linear-gradient(to left,  var(--gray-050), transparent); }

.badges {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximate;
  padding: 4px 40px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.badges::-webkit-scrollbar { display: none; }

.badge {
  flex: 0 0 auto;
  scroll-snap-align: center;
  scroll-margin: 0 40px;
  width: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.badge img { width: 72px; height: 72px; object-fit: contain; }
.badge__nome {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  line-height: 1.5;
}

.carrossel__seta {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink-500);
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
/* Melhoria progressiva: sem o script nao existe seta morta na tela. */
@media (min-width: 1024px) {
  [data-carrossel="pronto"] .carrossel__seta { display: flex; }
}
.carrossel__seta:disabled { opacity: 0.3; cursor: default; }
.carrossel__seta:disabled:hover { border-color: var(--border); color: var(--ink-500); }
.carrossel__seta:hover { border-color: var(--orange); color: var(--orange); }
.carrossel__seta:active { transform: scale(0.94); }
.carrossel__seta svg { width: 16px; height: 16px; }

/* ---------- FAQ: bloco de perguntas (AEO, pareado com FAQPage) ---------- */

.faq { display: flex; gap: 80px; align-items: flex-start; flex-wrap: wrap; }
.faq__head { flex: 0 0 auto; max-width: 20rem; }
.faq__itens { flex: 1 1 30rem; max-width: 50rem; }

.faq__item { padding: 26px 0; border-top: 1px solid var(--border); }
.faq__item:last-child { border-bottom: 1px solid var(--border); }
.faq__item p { margin-top: 12px; color: var(--ink-600); line-height: 1.7; }

/* ---------- Biblioteca: lista de materiais para download ---------- */

.dl-list { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (min-width: 720px)  { .dl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dl-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.dl-item {
  background: var(--white);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dl-item h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.32; }
.dl-item p { font-size: 13.5px; line-height: 1.6; color: var(--ink-600); }

.dl-link {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}
.dl-link:hover { color: var(--orange); }
.dl-link svg { flex-shrink: 0; }

/* Destaque de material maior (e-book, simulado) */
.feature {
  display: grid;
  gap: 24px;
  border: 1px solid var(--navy-line);
  background: var(--navy-2);
  padding: 34px 30px;
}
@media (min-width: 1024px) {
  .feature { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px; align-items: center; }
}
.feature h3 { font-size: clamp(1.25rem, 2.4vw, 1.625rem); font-weight: 600; color: var(--ink-050); }
.feature p { color: var(--ink-400); font-size: 0.9375rem; line-height: 1.64; margin-top: 12px; }

/* ---------- Consentimento de cookies (apenas na área com anúncios) ---------- */

.consent {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 90;
  display: grid;
  gap: 16px;
  max-width: 40rem;
  margin-inline: auto;
  padding: 22px 24px;
  background: var(--navy);
  border: 1px solid var(--navy-line);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.32);
}
@media (min-width: 720px) {
  .consent { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; }
}
.consent__texto { font-size: 13.5px; line-height: 1.6; color: var(--ink-300); }
.consent__acoes { display: flex; gap: 10px; }
.consent__acoes .btn { min-height: 44px; padding: 11px 20px; font-size: 0.875rem; }
.consent .btn--ghost { border-color: #2C3E5C; color: var(--ink-200); }

/* Espaço reservado de anúncio: sem consentimento, fica vazio e não empurra layout */
.ad-slot { min-height: 0; margin-block: 32px; }
.ad-slot:not(:empty) { min-height: 100px; }
.ad-slot:not(:empty)::before {
  content: "Publicidade";
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* ==================== VÍDEO (fachada) ====================
   Capa servida do próprio domínio e link para o YouTube. Sem iframe: o embed
   é terceiro com cookie, e fora de /simulados/ não existe banner de consentimento. */
.videos {
  margin: 40px auto 0;
  max-width: 760px;
  padding-top: 28px;
  border-top: 2px solid var(--orange);
}
.videos__intro {
  margin: 8px 0 20px;
  color: var(--ink-500);
  font-size: 0.95rem;
  line-height: 1.6;
}
.videos__lista { display: grid; gap: 16px; }
.videos__item {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  min-height: 44px;
}
.videos__item:hover,
.videos__item:focus-visible { border-color: var(--orange); }
.videos__capa {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.videos__media { position: relative; display: block; }
/* Triângulo de play em CSS puro, sem ícone externo. */
.videos__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 44px;
  margin: -22px 0 0 -32px;
  border-radius: 10px;
  background: var(--orange);
}
.videos__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -6px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.videos__item:hover .videos__play { transform: scale(1.06); }
.videos__texto { display: block; padding: 14px 18px 16px; }
.videos__nome {
  display: block;
  font-weight: 600;
  line-height: 1.4;
}
.videos__meta {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* ==================== SIMULADO ====================
   Sem JavaScript a página é material de estudo: questões, alternativas e
   gabarito comentado, tudo visível. O script só esconde o gabarito e liga a
   correção, então o conteúdo indexável não depende dele. */
.container--estreito { max-width: 760px; }

.simulado__aviso {
  margin: 0 0 32px;
  padding: 14px 18px;
  border-left: 3px solid var(--orange);
  background: var(--gray-050);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-600);
}
.questao {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border-soft);
}
.questao__campo { margin: 0; padding: 0; border: 0; }
.questao__enunciado {
  display: block;
  margin-bottom: 14px;
  padding: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--navy);
}
.questao__n {
  display: inline-block;
  margin-right: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--orange);
}
.questao__alt {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
  line-height: 1.5;
  cursor: pointer;
}
.questao__alt:hover { border-color: var(--ink-300); }
.questao__alt input { margin-top: 4px; flex: none; accent-color: var(--orange); }
.questao__alt:not([data-marca]):has(input:checked) { border-color: var(--navy); background: var(--gray-050); }
.questao__alt:has(input:disabled) { cursor: default; }
/* Depois da correção: verde no gabarito, laranja no erro de quem respondeu.
   A cor nunca é o único sinal, o gabarito sempre vem escrito logo abaixo. */
.questao__alt[data-marca="correta"]   { border-color: #15803D; background: #F0FDF4; }
.questao__alt[data-marca="incorreta"] { border-color: var(--orange); background: #FFF7ED; }
.questao__gabarito {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 6px;
  background: var(--gray-050);
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--ink-600);
}
.questao__gabarito p { margin: 0 0 10px; }
.questao__gabarito p:last-child { margin-bottom: 0; }
.questao__resposta { color: var(--navy); font-weight: 600; }
.questao__resposta .mono {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  font-weight: 400;
  color: var(--ink-500);
}
.questao__link { font-family: var(--font-mono); font-size: 0.78rem; }
.simulado__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0; }
.simulado__resultado {
  margin: 32px 0;
  padding: 26px 28px;
  border-radius: 8px;
  border-top: 3px solid var(--orange);
  background: var(--navy);
  color: var(--ink-300);
}
.simulado__resultado:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.simulado__nota {
  margin: 6px 0 10px;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--white);
}
.simulado__pct { color: var(--orange); }

.simulado__gate-titulo { margin: 6px 0 0; color: var(--white); max-width: 34rem; }
.simulado__gate-form { display: grid; gap: 14px; margin-top: 18px; max-width: 30rem; }
.simulado__gate-form input[type="email"] {
  min-height: 48px;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--ink-050);
  background: var(--navy-2);
  border: 1px solid var(--navy-line);
}
.simulado__gate-form input[type="email"]::placeholder { color: var(--ink-500); }
.simulado__gate-form input[type="email"]:focus { border-color: var(--orange); outline: none; }
.simulado__gate-consentimento {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-400);
}
.simulado__gate-consentimento input { margin-top: 3px; }
.simulado__gate-form .btn { justify-self: start; }
.simulado__gate-erro { color: var(--orange); font-size: 0.875rem; }

/* ==================== CHAMADA DO SIMULADO ====================
   Bloco de fim de artigo. Navy com a malha de pontos da marca, fio laranja de
   2px no topo e um único CTA sólido, que é o que a regra do laranja permite.
   O número grande é decorativo (aria-hidden): a contagem também está no texto
   do botão de destino e no título da página do simulado. */
.chamada {
  position: relative;
  overflow: hidden;
  margin: 48px auto 56px;
  max-width: 760px;
  border-radius: 10px;
  border-top: 2px solid var(--orange);
  background: var(--navy);
  color: var(--ink-300);
}
.chamada__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--navy-dot) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.6;
  pointer-events: none;
}
.chamada__corpo {
  position: relative;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 30px 32px 32px;
}
.chamada__numero {
  flex: none;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 3.4rem;
  line-height: 0.9;
  font-weight: 600;
  color: var(--orange);
  /* contorno em vez de sólido: laranja preenchido nesse tamanho vira faixa larga */
  -webkit-text-stroke: 1px var(--orange);
  color: transparent;
}
.chamada .eyebrow { margin-bottom: 12px; color: var(--ink-400); }
.chamada__titulo {
  margin: 0 0 10px;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
}
.chamada__texto {
  margin: 0 0 22px;
  line-height: 1.65;
  color: var(--ink-400);
}
/* No celular o número vira uma linha própria, para o texto não ficar espremido. */
@media (max-width: 560px) {
  .chamada__corpo { flex-direction: column; gap: 10px; padding: 26px 22px 28px; }
  .chamada__numero { font-size: 2.6rem; }
}

/* Linha curta do simulado, no meio do texto. Deliberadamente discreta: fio de
   2px e selo mono, sem caixa, sem fundo e sem botão. Caixa chamativa no meio do
   corpo leria como anúncio, e fora de /simulados/ este site não tem nenhum. */
.prose .chamada-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 34px 0;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--orange);
  font-size: 0.95rem;
  line-height: 1.6;
}
.chamada-linha__selo {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* ==================== OFERTA DO MATERIAL PAGO ====================
   Única parte comercial do site, e vive só dentro de /simulados/. Fica no painel
   de resultado, aparece junto com a nota e nunca antes: quem não corrigiu não
   tem o que comprar. Sem preço aqui de propósito, para não haver número velho no
   site quando a Hotmart mudar o valor. Contorno e não bloco sólido: o resultado
   logo acima já é navy cheio, e dois navy seguidos viram uma faixa só. */
.oferta {
  margin: 20px 0 0;
  padding: 24px 26px;
  border: 1px solid var(--navy-line);
  border-left: 2px solid var(--orange);
  border-radius: 8px;
  background: var(--navy-2);
}
.oferta .eyebrow { margin-bottom: 10px; color: var(--ink-400); }
.oferta__titulo {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--white);
}
.oferta__texto {
  margin: 0 0 20px;
  line-height: 1.65;
  color: var(--ink-400);
}
/* No índice a oferta aparece sobre fundo branco, então ganha o fundo navy que
   no painel de resultado já vem do bloco de cima. */
.oferta--indice { margin: 40px 0 0; background: var(--navy); }

/* ---------- Case: grid de metricas e lista de tecnologia ----------
   Criados para a pagina de case (src/cases/*.njk). Grade de estatistica e
   lista de tag sao genericos o bastante para o proximo case reaproveitar sem
   CSS novo. */

/* O fundo do grid so existe para desenhar a linha de 1px entre os tiles
   (o gap deixa o fundo aparecer como divisor). Isso significa que contagem
   de coluna que nao divide o numero de item exato expoe esse fundo como
   bloco vazio na ultima linha. Por isso a contagem de coluna e por
   modificador, escolhida para dividir sem resto o numero de tiles que o
   case tem, em vez de uma contagem fixa universal. */
.stat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
@media (min-width: 560px) { .stat-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .stat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 720px) { .stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.stat-tile {
  background: var(--white);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-tile__valor {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--navy);
}
.stat-tile--destaque .stat-tile__valor { color: var(--orange); }
.stat-tile__rotulo {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-500);
}

.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--gray-050);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-600);
}

/* ---------- Diagrama animado: consulta em linguagem natural ----------
   Animacao em CSS puro, sem JavaScript. Nenhum conteudo do site pode
   depender de script fora de /simulados/, e o verificar falha em script
   nao declarado, entao SMIL e JS estao fora: sobra CSS.

   Todas as partes compartilham o mesmo ciclo de 9s e se posicionam por
   animation-delay. Mesma duracao em todas mantem a relacao de fase
   estavel para sempre, o que delay sozinho garante e porcentagem
   separada por elemento nao garantiria sem recalcular tudo a cada ajuste.

   transform-box: fill-box e obrigatorio aqui: sem ele, transform-origin
   em elemento de SVG e resolvido contra o viewBox inteiro, e a escala
   acontece a partir do canto errado. */

.dgconsulta__fonte { opacity: 0.25; animation: dgc-fonte 9s linear infinite; }
.dgconsulta__fonte--2 { animation-delay: 0.35s; }
.dgconsulta__fonte--3 { animation-delay: 0.7s; }
.dgconsulta__fonte--4 { animation-delay: 1.05s; }
@keyframes dgc-fonte {
  0%       { opacity: 0.25; }
  4%, 93%  { opacity: 1; }
  99%      { opacity: 0.25; }
}

/* A cobertura tem a cor do fundo da barra e encolhe para a direita, o que
   revela o texto da esquerda para a direita, como digitacao. */
.dgconsulta__cobre {
  transform-box: fill-box;
  transform-origin: right center;
  animation: dgc-cobre 9s linear infinite;
}
@keyframes dgc-cobre {
  0%, 20%  { transform: scaleX(1); }
  44%, 93% { transform: scaleX(0); }
  100%     { transform: scaleX(1); }
}

/* O cursor anda em translate no mesmo intervalo e com a mesma curva linear
   da cobertura, entao a ponta dele acompanha a borda revelada. */
.dgconsulta__cursor { animation: dgc-cursor 9s linear infinite; }
@keyframes dgc-cursor {
  0%, 20%  { transform: translateX(0); }
  44%, 93% { transform: translateX(286px); }
  100%     { transform: translateX(0); }
}

.dgconsulta__risco {
  transform-box: fill-box;
  transform-origin: left center;
  animation: dgc-risco 9s linear infinite;
}
.dgconsulta__risco--2 { animation-delay: 0.15s; }
@keyframes dgc-risco {
  0%, 46%  { transform: scaleX(0); }
  55%, 93% { transform: scaleX(1); }
  100%     { transform: scaleX(0); }
}

.dgconsulta__pulso {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: dgc-pulso 9s linear infinite;
}
@keyframes dgc-pulso {
  0%, 46%   { opacity: 0; transform: scale(1); }
  52%       { opacity: 0.7; }
  64%, 100% { opacity: 0; transform: scale(1.07); }
}

.dgconsulta__res { opacity: 0; animation: dgc-res 9s linear infinite; }
@keyframes dgc-res {
  0%, 62%  { opacity: 0; }
  72%, 93% { opacity: 1; }
  100%     { opacity: 0; }
}

.dgconsulta__barra {
  transform-box: fill-box;
  transform-origin: left center;
  animation: dgc-barra 9s linear infinite;
}
.dgconsulta__barra--2 { animation-delay: 0.22s; }
.dgconsulta__barra--3 { animation-delay: 0.44s; }
@keyframes dgc-barra {
  0%, 66%  { transform: scaleX(0); }
  76%, 93% { transform: scaleX(1); }
  100%     { transform: scaleX(0); }
}

/* Quem pede menos movimento no sistema ve o estado final, parado e completo.
   Sem este bloco, desligar a animacao deixaria fonte apagada, texto coberto
   e resposta invisivel, ou seja o diagrama vazio. */
@media (prefers-reduced-motion: reduce) {
  .dgconsulta *      { animation: none !important; }
  .dgconsulta__fonte { opacity: 1; }
  .dgconsulta__cobre { transform: scaleX(0); }
  .dgconsulta__cursor { opacity: 0; }
  .dgconsulta__pulso { opacity: 0; }
  .dgconsulta__risco { transform: scaleX(1); }
  .dgconsulta__res   { opacity: 1; }
  .dgconsulta__barra { transform: scaleX(1); }
}

/* Diagrama animado do fluxo de ETL (case BI e dados corporativos), mesma
   familia de regra do .dgconsulta acima: ciclo unico de 9s, mesma duracao
   em toda parte, animation-delay para escalonar fase, e transform-box:
   fill-box obrigatorio em todo elemento que escala, senao transform-origin
   resolve contra o viewBox inteiro. */

.dgetl__pacote {
  transform-box: fill-box;
  transform-origin: left center;
  opacity: 0;
  animation: dge-pacote 9s linear infinite;
}
.dgetl__pacote--2 { animation-delay: 1s; }
.dgetl__pacote--3 { animation-delay: 2s; }
@keyframes dge-pacote {
  0%, 10%  { opacity: 0; transform: translateX(0); }
  14%      { opacity: 1; transform: translateX(0); }
  40%      { opacity: 1; transform: translateX(280px); }
  46%, 100% { opacity: 0; transform: translateX(280px); }
}

/* O anel pulsa quando os pacotes chegam na caixa de transformacao, entre
   40% e 65% do ciclo, o mesmo intervalo em que os tres pacotes escalonados
   estao entrando. */
.dgetl__pulso {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: dge-pulso 9s linear infinite;
}
@keyframes dge-pulso {
  0%, 38%   { opacity: 0; transform: scale(1); }
  50%       { opacity: 0.7; }
  65%, 100% { opacity: 0; transform: scale(1.06); }
}

/* As barras crescem de baixo para cima depois da transformacao, entre 58%
   e 90% do ciclo, escalonadas para nao subir todas juntas. */
.dgetl__barra {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: dge-barra 9s linear infinite;
}
.dgetl__barra--2 { animation-delay: 0.15s; }
.dgetl__barra--3 { animation-delay: 0.3s; }
@keyframes dge-barra {
  0%, 58%  { transform: scaleY(0.15); }
  72%, 90% { transform: scaleY(1); }
  97%, 100% { transform: scaleY(0.15); }
}

/* Quem pede menos movimento no sistema ve o estado final, parado e completo:
   pacote entregue (some), transformacao sem pulso, dashboard com as tres
   barras cheias. Sem este bloco, desligar a animacao deixaria pacote
   invisivel e barra achatada, ou seja o diagrama vazio. */
@media (prefers-reduced-motion: reduce) {
  .dgetl__pacote { animation: none !important; opacity: 0; }
  .dgetl__pulso  { animation: none !important; opacity: 0; }
  .dgetl__barra  { animation: none !important; transform: scaleY(1); }
}

/* ============================================================
   FAIXA DO LIVRO NA HOME
   Capa pequena ao lado do texto. Discreta de proposito: a home
   nao e vitrine comercial, entao o livro nao ganha secao cheia.
   ============================================================ */
.livro-faixa { display: flex; flex-direction: column; gap: 22px; }
.livro-faixa__capa { display: block; flex: 0 0 auto; line-height: 0; }
.livro-faixa__capa img {
  width: 120px;
  height: auto;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

@media (min-width: 720px) {
  .livro-faixa { flex-direction: row; align-items: center; gap: 32px; }
  .livro-faixa > div { max-width: 40rem; }
}

/* ============================================================
   MARCA DO FONTE FRAMEWORK
   "Fonte" grande, "framework" pequeno ao lado. E uma marca, nao
   duas palavras: por isso nao quebra linha no meio. O tamanho e
   relativo (em), para servir de h1 no hero e de h3 no card sem
   precisar de variante por lugar.
   ============================================================ */
.marca-fw { white-space: nowrap; }
.marca-fw small {
  font-size: 0.52em;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-left: 0.04em;
  opacity: 0.72;
}

/* Tag que e link. Usada nos temas do PMIRioCast, no Sobre. */
a.tag { text-decoration: none; transition: border-color .15s ease, color .15s ease; }
a.tag:hover,
a.tag:focus-visible { border-color: var(--orange); color: var(--navy); }