@charset "UTF-8";
/* =========================================================================
   Aranha Ilustrações — folha única
   Implementa DESIGN-SYSTEM.md. Ordem: fontes, tokens, base, layout,
   componentes, páginas, movimento.
   ========================================================================= */

/* ---------------------------------------------------------------- fontes */
/* latin-ext primeiro: o navegador só baixa o arquivo cujo unicode-range
   é realmente usado na página. */

@font-face {
  font-family: "Darker Grotesque";
  src: url("/assets/fonts/darker-grotesque-300-900-normal-latin.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Darker Grotesque";
  src: url("/assets/fonts/darker-grotesque-300-900-normal-latin-ext.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-400-normal-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-400-normal-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-400-italic-latin.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  src: url("/assets/fonts/dm-mono-500-normal-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  src: url("/assets/fonts/dm-mono-500-normal-latin-ext.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- tokens */
:root {
  /* cor — ver DESIGN-SYSTEM.md §1. Contrastes verificados. */
  --papel: #eef0f1;
  --papel-alto: #ffffff;
  --tinta: #14181d;          /* 15,59:1 sobre papel */
  --tinta-media: #4a5560;    /*  6,66:1 sobre papel */
  /* O acento vem da camisa do Daniel na foto do hero — cor amostrada da
     própria imagem (#a3337c no meio, #732253 na sombra, #bd5a97 no realce).
     Dois estados, como antes: um claro que é só traço e um entintado que
     carrega texto. */
  --roxo-camisa: #d9a0c4;    /* NUNCA texto sobre claro (1,88:1). Só traço. */
  --roxo-tinta: #982570;     /*  6,48:1 sobre papel — AA */

  /* espaço — base 4 */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px; --e10: 128px; --e11: 192px;

  --margem: 20px;
  --calha: 20px;
  /* Uma borda de grid só. Ter dois contêineres (1240 e 1440) fazia a
     margem esquerda pular de seção para seção — o alinhamento vertical da
     página é o que sustenta a sensação de grade. Quem precisa romper,
     rompe de forma total (sangria), nunca por 100px. */
  --container: min(100% - 2 * var(--margem), 1240px);
  --container-texto: 34em;  /* medida de leitura, aplicada aos filhos */

  /* tipografia */
  --display: "Darker Grotesque", "Arial Narrow", system-ui, sans-serif;
  --texto: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-display: clamp(3rem, 1.10rem + 8.4vw, 7.5rem);
  --t-h1: clamp(2.25rem, 1.45rem + 3.6vw, 4.5rem);
  --t-h2: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem);
  --t-h3: clamp(1.25rem, 1.10rem + 0.7vw, 1.625rem);
  --t-leitura: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-corpo: 1.0625rem;
  --t-peq: 0.9375rem;
  --t-micro: 0.8125rem;

  /* Altura real do topo fixo (medida: 94px), usada para encaixar o hero na
     dobra do mobile. Se o padding do cabeçalho mudar, este valor muda junto. */
  --topo-altura: 5.875rem;

  /* traço e forma */
  --traco: 2px;
  --raio: 4px;
  --dur: 180ms;
  --curva: cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (min-width: 48rem) {
  :root { --margem: 40px; --calha: 28px; }
}

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-corpo);
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--roxo-tinta); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

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

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--roxo-tinta);
  outline-offset: 3px;
  border-radius: 2px;
}

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.pular {
  position: absolute; left: var(--e4); top: -100%; z-index: 100;
  background: var(--tinta); color: var(--papel-alto);
  padding: var(--e3) var(--e5); border-radius: var(--raio);
  font-family: var(--mono); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none;
}
.pular:focus { top: var(--e4); }

/* --------------------------------------------------------------- layout */
.container { width: var(--container); margin-inline: auto; }

/* A coluna de leitura mantém a medida de 34em, mas ancorada na MESMA borda
   esquerda do resto da página. Centralizada, ela criava um segundo
   alinhamento (431px contra 100px) e a página perdia a sensação de grade. */
.container-texto { width: var(--container); margin-inline: auto; }
.container-texto > * { max-width: var(--container-texto); }

/* Sangria: rompe o contêiner e vai de borda a borda da viewport. É a
   "splash page" do sistema — usada no hero do case e na arte final. */
.case__hero { width: 100%; margin-inline: 0; }

/* rótulo utilitário: etapa, categoria, metadado */
.micro, .case__etiqueta, .rodape__titulo, .painel__cat,
.camadas__numero, .ficha dt, .metrica dt {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-media);
}

/* ---------------------------------------------------------------- topo */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--traco) solid var(--tinta);
}
.topo__interno {
  width: var(--container); margin-inline: auto;
  display: flex; align-items: center; gap: var(--e5);
  /* 12px deixava o topo apertado contra o conteúdo, destoando do respiro
     das outras faixas. 24px alinha o cabeçalho ao ritmo do resto. */
  padding-block: var(--e5);
}
.marca { text-decoration: none; color: inherit; display: grid; line-height: 1; }
.marca__nome {
  font-family: var(--display); font-weight: 800;
  font-size: 1.5rem; letter-spacing: -0.03em;
}
.marca__pessoa {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--tinta-media);
  margin-top: 3px;
}
.nav { margin-left: auto; display: flex; align-items: center; gap: var(--e5); }
.nav__lista { display: flex; gap: var(--e5); }
.nav__lista a {
  color: var(--tinta); text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 1.1875rem;
}
.nav__lista a:hover { text-decoration: underline; text-decoration-color: var(--roxo-camisa); text-decoration-thickness: 3px; }
.nav__lista a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--roxo-camisa);
  text-decoration-thickness: 3px; text-underline-offset: 0.3em;
}
.idioma {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.08em; color: var(--tinta); text-decoration: none;
  border: var(--traco) solid var(--tinta); border-radius: var(--raio);
  padding: 5px var(--e2);
}
.idioma:hover { background: var(--tinta); color: var(--papel-alto); }
.topo__menu { display: none; }

/* Abaixo de 62rem a navegação não cabe na linha: vira painel sob o topo.
   O botão é um <button> de verdade com aria-expanded — sem JS o painel
   fica aberto (regra :not() abaixo), então nunca há menu inacessível. */
@media (max-width: 61.999rem) {
  .topo__interno { position: relative; flex-wrap: wrap; }
  .topo__menu {
    display: grid; place-items: center; margin-left: auto;
    width: 44px; height: 44px; cursor: pointer;
    background: transparent;
    border: var(--traco) solid var(--tinta); border-radius: var(--raio);
  }
  .topo__risco, .topo__risco::before, .topo__risco::after {
    display: block; width: 20px; height: var(--traco);
    background: var(--tinta); content: "";
  }
  .topo__risco { position: relative; }
  .topo__risco::before { position: absolute; left: 0; top: -6px; }
  .topo__risco::after { position: absolute; left: 0; top: 6px; }
  .topo__menu[aria-expanded="true"] .topo__risco { background: transparent; }
  .topo__menu[aria-expanded="true"] .topo__risco::before { top: 0; transform: rotate(45deg); }
  .topo__menu[aria-expanded="true"] .topo__risco::after { top: 0; transform: rotate(-45deg); }

  .nav {
    display: none;
    position: absolute; top: calc(100% + var(--e3)); left: 0; right: 0; z-index: 60;
    flex-direction: column; align-items: stretch; gap: var(--e5);
    padding: var(--e6) var(--margem);
    background: var(--papel-alto);
    border-block: var(--traco) solid var(--tinta);
  }
  body.menu-aberto .nav { display: flex; }
  .nav__lista { flex-direction: column; gap: var(--e5); }
  .nav__lista a { font-size: var(--t-h3); }
  .idioma, .topo__cta { justify-self: start; align-self: start; }
}
/* Sem JavaScript o painel não abre. A saída não é deixar o visitante preso:
   o rodapé traz a navegação completa em todas as páginas, e o link "pular
   para o conteúdo" continua funcionando. */

/* ------------------------------------------------------------- botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e2);
  font-family: var(--display); font-weight: 700; font-size: 1.125rem;
  letter-spacing: -0.01em; line-height: 1;
  padding: var(--e3) var(--e5);
  border: var(--traco) solid var(--tinta);
  border-radius: var(--raio);
  text-decoration: none; cursor: pointer;
  transition: transform var(--dur) var(--curva), box-shadow var(--dur) var(--curva);
}
.botao--primario { background: var(--tinta); color: var(--papel-alto); }
.botao--secundario { background: transparent; color: var(--tinta); }
.botao:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--tinta); }
.botao--secundario:hover { background: var(--papel-alto); }
.botao--grande { font-size: 1.375rem; padding: var(--e4) var(--e7); }

/* ----------------------------------------------------- cabeçalho de página */
.cabecalho-pagina { padding-block: var(--e9) var(--e7); }
.titulo-pagina { font-size: var(--t-h1); font-weight: 800; }
.subtitulo-pagina {
  font-size: var(--t-leitura); color: var(--tinta-media);
  max-width: 46ch; margin-top: var(--e4);
}

/* ------------------------------------------------------ grade / painéis */
.filtros {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  margin-bottom: var(--e7);
  padding-bottom: var(--e5);
  border-bottom: var(--traco) solid var(--tinta);
}
.filtro {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: transparent; color: var(--tinta-media);
  border: var(--traco) solid transparent; border-radius: var(--raio);
  padding: var(--e2) var(--e3); cursor: pointer;
}
.filtro:hover { color: var(--tinta); border-color: var(--tinta); }
.filtro[aria-pressed="true"] { background: var(--tinta); color: var(--papel-alto); border-color: var(--tinta); }

/* masonry por colunas: preserva a proporção original de cada arte,
   sem corte e sem JavaScript */
.grade { columns: 1; column-gap: var(--calha); }
@media (min-width: 34rem) { .grade { columns: 2; } }
@media (min-width: 62rem) { .grade { columns: 3; } }
@media (min-width: 90rem) { .grade { columns: 4; } }

.painel {
  break-inside: avoid;
  margin-bottom: var(--calha);
  background: var(--papel-alto);
  border: var(--traco) solid var(--tinta);
  border-radius: var(--raio);
  overflow: hidden;
  position: relative;
  transition: transform var(--dur) var(--curva), box-shadow var(--dur) var(--curva);
}
.painel:hover, .painel:focus-within { transform: translateY(-2px); box-shadow: 0 4px 0 var(--tinta); }
.painel img { width: 100%; }
.painel__selo {
  position: absolute; top: var(--e3); left: var(--e3); z-index: 2;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--tinta); color: var(--papel-alto);
  padding: 4px var(--e2); border-radius: 2px;
}
.painel__pe {
  padding: var(--e4);
  border-top: var(--traco) solid var(--tinta);
  display: grid; gap: var(--e2);
}
.painel__titulo { font-size: 1.25rem; font-weight: 700; }
.painel__acao {
  justify-self: start;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--roxo-tinta);
  text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--roxo-camisa); text-underline-offset: 0.2em;
}
.painel__acao:hover { text-decoration-color: var(--roxo-tinta); }
.grade__vazio { padding: var(--e9) 0; text-align: center; color: var(--tinta-media); }

/* ------------------------------------------------------------------ case */
.case__topo { padding-top: var(--e8); }
.case__migalha { font-family: var(--mono); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.08em; }
.case__etiqueta { margin-top: var(--e6); }
.case__titulo { font-size: var(--t-h1); font-weight: 800; margin-top: var(--e2); }
.case__resumo {
  font-size: var(--t-leitura); color: var(--tinta-media);
  max-width: 52ch; margin-top: var(--e4);
}
.ficha {
  display: flex; flex-wrap: wrap; gap: var(--e5) var(--e7);
  margin: var(--e6) 0 var(--e7);
  padding-top: var(--e5); border-top: var(--traco) solid var(--tinta);
}
.ficha__item { margin: 0; }
.ficha dt { margin-bottom: var(--e1); }
.ficha dd { margin: 0; font-size: var(--t-corpo); }
.ficha__papel, .ficha__handle { color: var(--tinta-media); }

/* sangria: uma vez por página, o painel rompe o contêiner */
.case__hero {
  border: var(--traco) solid var(--tinta);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--papel-alto);
}

.secao-case { padding-block: var(--e9); }
.secao-case__titulo { font-size: var(--t-h2); margin-bottom: var(--e5); }
.prosa { font-size: var(--t-leitura); line-height: 1.65; }
.prosa p + p { margin-top: 0; }
.aviso-idioma {
  font-family: var(--mono); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tinta-media);
  border-left: 3px solid var(--roxo-camisa);
  padding-left: var(--e3); margin-bottom: var(--e5);
}
.figura { background: var(--papel-alto); border: var(--traco) solid var(--tinta); border-radius: var(--raio); overflow: hidden; }
.figura--case { margin-top: var(--e6); }
.figura__legenda {
  font-family: var(--mono); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-media);
  padding: var(--e3) var(--e4);
  border-top: var(--traco) solid var(--tinta);
}
.metricas { display: flex; flex-wrap: wrap; gap: var(--e7); margin: 0; }
.metrica { margin: 0; }
.metrica dd { margin: var(--e1) 0 0; font-size: var(--t-leitura); max-width: 34ch; }

.depoimento { margin: 0; border-left: var(--traco) solid var(--tinta); padding-left: var(--e5); }
.depoimento blockquote { margin: 0; }
.depoimento blockquote p {
  font-size: var(--t-h3); font-style: italic; line-height: 1.4;
}
.depoimento figcaption { margin-top: var(--e4); }
.depoimento__autor { font-family: var(--display); font-weight: 700; font-size: 1.125rem; }
.depoimento__papel { color: var(--tinta-media); font-size: var(--t-peq); }

.case__pe { padding-block: var(--e7); border-top: var(--traco) solid var(--tinta); }
.case__navegacao { display: flex; justify-content: space-between; gap: var(--e5); flex-wrap: wrap; }
.case__navegacao a { text-decoration: none; display: grid; gap: var(--e1); }
.case__proximo { text-align: right; }
.case__nav-rotulo { font-family: var(--mono); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-media); }
.case__nav-titulo { font-family: var(--display); font-weight: 700; font-size: var(--t-h3); color: var(--tinta); }
.case__navegacao a:hover .case__nav-titulo { text-decoration: underline; text-decoration-color: var(--roxo-camisa); text-decoration-thickness: 3px; }

/* ================================================== ELEMENTO-ASSINATURA
   As camadas — comparador de estágios da mesma arte.
   Sem JS, mostra a última camada (a arte final). O JS só acrescenta controle.
   ==================================================================== */
.camadas { margin-top: var(--e7); }
.camadas__palco {
  position: relative;
  border: var(--traco) solid var(--tinta);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--papel-alto);
}
.camadas__camada { grid-area: 1 / 1; }
/* A arte é grande (até 4961px). Sem teto, os controles do comparador caem
   fora da tela — e um comparador cujo controle você não vê não é um
   comparador. O teto é dado pela LARGURA calculada a partir da proporção
   (--ar, escrita pelo gerador), não por max-height: assim a caixa continua
   definida e o divisor da régua encosta exatamente nas bordas da arte. */
.camadas__palco {
  display: grid;
  width: min(100%, calc(var(--altura-max, 620px) * var(--ar, 1.4)));
  margin-inline: auto;
}
.camadas__camada img { width: 100%; height: auto; }
.camadas__camada:not([data-ativa]) { opacity: 0; }
.camadas__camada[data-ativa] { opacity: 1; }

/* modo etapas: cross-fade */
.camadas--etapas .camadas__camada { transition: opacity 240ms ease-out; }
.camadas--etapas .camadas__camada:not([data-ativa]) { pointer-events: none; }

.camadas__passos {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  margin-top: var(--e4);
}
.camadas__passo {
  display: grid; gap: 2px; text-align: left;
  background: transparent; cursor: pointer;
  border: var(--traco) solid transparent; border-radius: var(--raio);
  padding: var(--e2) var(--e3);
}
.camadas__passo:hover { border-color: var(--tinta); }
.camadas__passo[aria-current="true"] { border-color: var(--tinta); background: var(--papel-alto); }
.camadas__passo[aria-current="true"] .camadas__numero { color: var(--roxo-tinta); }
.camadas__rotulo { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; }

/* modo régua: divisor arrastável */
.camadas--regua .camadas__camada[data-indice="1"] {
  clip-path: inset(0 0 0 var(--corte, 50%));
}
.camadas--regua .camadas__camada { opacity: 1; }
.camadas--regua .camadas__palco::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: var(--corte, 50%); width: var(--traco);
  background: var(--roxo-camisa); pointer-events: none;
}
.camadas__regua {
  -webkit-appearance: none; appearance: none;
  display: block; margin: var(--e4) auto 0;
  /* mesma largura do palco: o controle tem que corresponder à arte */
  width: min(100%, calc(var(--altura-max, 620px) * var(--ar, 1.4)));
  background: transparent; cursor: ew-resize;
}
.camadas__regua::-webkit-slider-runnable-track {
  height: var(--traco); background: var(--tinta); border-radius: 2px;
}
.camadas__regua::-moz-range-track {
  height: var(--traco); background: var(--tinta); border-radius: 2px;
}
.camadas__regua::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -13px;
  background: var(--roxo-camisa);
  border: var(--traco) solid var(--tinta); border-radius: 50%;
}
.camadas__regua::-moz-range-thumb {
  width: 28px; height: 28px;
  background: var(--roxo-camisa);
  border: var(--traco) solid var(--tinta); border-radius: 50%;
}

/* --------------------------------------------------------------- CTA */
.cta {
  background: var(--tinta); color: var(--papel);
  padding-block: var(--e9);
  margin-top: var(--e10);
}
.cta__interno { text-align: center; }
.cta__titulo { font-size: var(--t-h1); font-weight: 800; color: var(--papel-alto); }
.cta__sub { color: color-mix(in srgb, var(--papel) 80%, transparent); font-size: var(--t-leitura); margin-top: var(--e4); }
.cta .botao--primario {
  background: var(--papel-alto); color: var(--tinta);
  border-color: var(--papel-alto); margin-top: var(--e6);
}
.cta .botao--primario:hover { box-shadow: 0 4px 0 var(--roxo-camisa); }

/* ------------------------------------------------------------- rodapé */
.rodape { background: var(--tinta); color: var(--papel); padding-block: var(--e8) var(--e6); }
.rodape a { color: var(--papel); text-decoration-color: var(--roxo-camisa); }
.rodape__interno {
  width: var(--container); margin-inline: auto;
  display: grid; gap: var(--e7);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .rodape__interno { grid-template-columns: 2fr 1fr 1fr auto; }
}
.rodape__assinatura { font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1; }
.rodape__tagline { color: color-mix(in srgb, var(--papel) 70%, transparent); font-size: var(--t-peq); margin-top: var(--e2); }
.rodape__titulo { color: color-mix(in srgb, var(--papel) 70%, transparent); margin-bottom: var(--e3); }
.rodape__bloco li { margin-bottom: var(--e2); }
.rodape__idioma a {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.08em;
  border: var(--traco) solid var(--papel); border-radius: var(--raio);
  padding: 5px var(--e2); text-decoration: none;
}
.rodape__direitos {
  width: var(--container); margin: var(--e8) auto 0;
  padding-top: var(--e5);
  border-top: var(--traco) solid color-mix(in srgb, var(--papel) 25%, transparent);
  color: color-mix(in srgb, var(--papel) 60%, transparent);
  font-size: var(--t-peq);
}

/* ------------------------------------------------- títulos de seção */
.secao__etiqueta {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-media);
  margin-bottom: var(--e3);
}
.secao__titulo { font-size: var(--t-h2); }
.secao__titulo--menor { font-size: var(--t-h3); margin-top: var(--e8); }
.secao__sub {
  font-size: var(--t-leitura); color: var(--tinta-media);
  max-width: 52ch; margin-top: var(--e4);
}
.secao__mais { margin-top: var(--e7); }
.secao__mais a { font-family: var(--display); font-weight: 700; font-size: var(--t-h3); }

/* --------------------------------------------------------------- hero */
/* A colagem ocupa a dobra inteira, como fundo. Foi montada para isso: na
   horizontal o branco fica à esquerda (onde entra o texto) e a arte à
   direita; na vertical o branco fica em cima e a foto no fim da dobra.
   O branco foi removido das duas (ferramentas/recortar-fundo.py), então
   quem aparece por trás é o papel do site. */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(88svh, 780px);
  padding-block: var(--e8);
  overflow: hidden;
}
.hero__fundo {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
/* A imagem é posicionada de forma absoluta dentro da faixa: assim o tamanho
   vem só da caixa, sem depender do dimensionamento intrínseco do <picture>,
   que é um elemento inline e resolve `height: 100%` de forma inconsistente
   entre engines. */
.hero__fundo picture {
  position: absolute; inset: 0;
  display: block;
}
.hero__fundo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 100% 50%;   /* segura a arte colada na direita */
}
.hero__interno { position: relative; z-index: 1; }
/* A coluna de texto é limitada pelo espaço que a colagem deixa livre à
   esquerda, não por uma medida fixa. A arte ocupa ~747px constantes entre
   1200px e 1436px de viewport, então o que sobra é (100vw - 747px): daí o
   `100vw - 50rem`, que reserva a arte e ainda deixa respiro. Sem isso a
   coluna ficava em 30ch (~340px) e o título quebrava em cinco linhas
   espremidas no canto. */
.hero__texto { max-width: min(34rem, calc(100vw - 50rem)); }
.hero__titulo {
  /* menor que --t-display: aqui a imagem é a protagonista, não o título */
  font-size: clamp(2rem, 1.20rem + 2.6vw, 3rem);
  font-weight: 800;
}
.hero__sub {
  font-size: var(--t-leitura); color: var(--tinta-media);
  max-width: 34ch; margin-top: var(--e5);
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); }

/* Ponto de virada alto de propósito: sobrepor texto e arte só funciona
   quando ainda sobra espaço vazio à esquerda da colagem, e para essa
   composição isso exige ~1150px. Em 768px o texto caía em cima do rosto. */
@media (max-width: 74.999rem) {
  /* Abaixo disso o texto não sobrepõe a arte: eles se empilham. O bloco de
     texto ocupa o que precisa e a arte toma todo o resto da dobra, com a
     foto do ilustrador ancorada no fim — que é como a peça foi montada.
     Sobrepor aqui jogaria os botões em cima do rosto. */
  /* Coluna flex em vez de grid: com `flex: 1 1 auto` a faixa da arte fica
     com exatamente o que sobra da dobra, e a foto do ilustrador termina no
     fim da primeira tela. Com grid, o `1fr` não resolvia contra min-height
     e a faixa assumia a altura natural da imagem (693px), estourando a
     dobra. `min-height: 0` é o que permite ela encolher. */
  .hero {
    display: flex;
    flex-direction: column;
    /* stretch, não o `center` herdado do desktop: em coluna, o eixo
       transversal é o horizontal, e centralizar encolhe a faixa da arte
       para a largura do conteúdo. */
    align-items: stretch;
    /* altura definida, não min-height: é o que permite a faixa da arte
       encolher para caber. Com min-height o contêiner cresce e a imagem
       assume a altura natural (693px), estourando a dobra. */
    height: calc(100svh - var(--topo-altura));
    min-height: 34rem;
    padding-block: var(--e6) 0;
  }
  .hero__interno { flex: 0 0 auto; }
  .hero__fundo {
    position: relative; inset: auto;
    flex: 1 1 auto;
    min-height: min(200px, 26svh);
    margin-top: var(--e5);
  }
  .hero__fundo img { object-position: 50% 100%; }
  .hero__texto { max-width: none; }
  .hero__sub { max-width: 40ch; }
  .hero__acoes { margin-top: var(--e5); }
}

/* -------------------------------------------------------------- prova */
.prova { padding-block: var(--e9); }
.prova__apoio {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-media);
  padding-bottom: var(--e5); border-bottom: var(--traco) solid var(--tinta);
}
.prova__lista {
  display: grid; gap: var(--e6); margin: var(--e7) 0 0;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .prova__lista { grid-template-columns: repeat(3, 1fr); } }
.prova__item { margin: 0; }
.prova__valor {
  font-family: var(--display); font-weight: 800; font-size: var(--t-h1);
  line-height: 0.9; letter-spacing: -0.03em;
}
.prova__rotulo { margin: var(--e3) 0 0; color: var(--tinta-media); font-size: var(--t-peq); }

/* -------------------------------- assinatura (as camadas) na home */
.assinatura { padding-block: var(--e9); background: var(--papel-alto); border-block: var(--traco) solid var(--tinta); }

/* ---------------------------------------------------------- destaques */
.destaques { padding-block: var(--e9); }
.destaques__lista {
  display: grid; gap: var(--calha); margin-top: var(--e7);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .destaques__lista { grid-template-columns: repeat(3, 1fr); } }
.painel--case { margin-bottom: 0; }
.painel__link { display: block; color: inherit; text-decoration: none; height: 100%; }
.painel__resumo { color: var(--tinta-media); font-size: var(--t-peq); }
.painel--case .painel__pe { display: grid; gap: var(--e3); }

/* --------------------------------------------------------- serviços */
.servicos { padding-block: var(--e9); }
.servicos__lista {
  display: grid; gap: var(--calha); margin-top: var(--e7);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .servicos__lista { grid-template-columns: repeat(3, 1fr); } }
.servico {
  background: var(--papel-alto); border: var(--traco) solid var(--tinta);
  border-radius: var(--raio); padding: var(--e6);
  display: grid; align-content: start; gap: var(--e4);
}
.servico__titulo { font-size: var(--t-h3); }
.servico__corpo { color: var(--tinta-media); }
/* A Newsreader só tem o peso 400 carregado, e font-synthesis-weight está
   desligado — pedir 600 aqui renderizava igual ao corpo. Usa a display, que
   é variável e é onde moram os rótulos do sistema. */
.servico__lista-titulo {
  font-family: var(--display); font-weight: 700;
  font-size: 1.0625rem; margin: 0;
}
.servico__lista { display: grid; gap: var(--e2); }
.servico__lista li { padding-left: var(--e5); position: relative; font-size: var(--t-peq); }
.servico__lista li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 12px; height: var(--traco); background: var(--roxo-camisa);
}
.tags { display: flex; flex-wrap: wrap; gap: var(--e2); }
/* Dentro dos cards a lista de tags vem depois de outra lista e o espaçamento
   é do grid do card. Solta, logo abaixo de um título, precisa do próprio
   respiro — sem isso as etiquetas de ferramentas colam no texto. */
:is(h1, h2, h3) + .tags { margin-top: var(--e5); }
.tag {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  border: var(--traco) solid var(--tinta); border-radius: var(--raio);
  padding: 4px var(--e2);
}

/* --------------------------------------------------------- processo */
.processo { padding-block: var(--e9); }
.processo__lista {
  display: grid; gap: var(--e7); margin-top: var(--e7);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .processo__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .processo__lista { grid-template-columns: repeat(4, 1fr); } }
.etapa { display: grid; gap: var(--e3); align-content: start; }
.etapa__numero {
  font-family: var(--display); font-weight: 800; font-size: 3rem; line-height: 1;
  /* --roxo-camisa reprova em contraste (1,81:1) e o próprio sistema proíbe
     usá-lo como texto. Aqui vai a versão entintada, que passa em AA. */
  color: var(--roxo-tinta); margin: 0;
}
.etapa__titulo { font-size: var(--t-h3); }
.etapa__corpo { color: var(--tinta-media); font-size: var(--t-peq); margin: 0; }

/* ------------------------------------------------------ depoimentos */
.depoimentos { padding-block: var(--e9); }
.depoimentos__videos {
  display: grid; gap: var(--calha); margin-top: var(--e7);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .depoimentos__videos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .depoimentos__videos { grid-template-columns: repeat(3, 1fr); } }
.depo-video { display: grid; gap: var(--e2); }
.depo-video .video { padding: 0; width: 100%; }
.depo-video__cliente { font-family: var(--display); font-weight: 700; font-size: var(--t-h3); margin: var(--e2) 0 0; }
.depo-video__projeto {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-media); margin: 0;
}
.depoimentos__citacoes {
  margin-top: var(--e9); display: grid; gap: var(--e7);
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) { .depoimentos__citacoes { grid-template-columns: repeat(2, 1fr); } }
.citacao {
  margin: 0; border-left: var(--traco) solid var(--tinta); padding-left: var(--e5);
}
.citacao--destaque { grid-column: 1 / -1; border-left-color: var(--roxo-camisa); border-left-width: 4px; }
.citacao blockquote { margin: 0; font-size: var(--t-leitura); font-style: italic; }
.citacao figcaption { margin-top: var(--e4); }
.citacao__autor { font-family: var(--display); font-weight: 700; font-size: 1.125rem; }
.citacao__papel { color: var(--tinta-media); font-size: var(--t-peq); }

/* ------------------------------------------------------------- sobre */
.sobre__topo { padding-block: var(--e9) var(--e7); }
.sobre__interno { display: grid; gap: var(--e7); align-items: start; }
@media (min-width: 62rem) { .sobre__interno { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--e8); } }
.sobre__chamada { font-size: var(--t-leitura); color: var(--tinta-media); max-width: 52ch; margin-top: var(--e5); }
.sobre__retrato { border: var(--traco) solid var(--tinta); border-radius: var(--raio); overflow: hidden; }
.sobre__retrato img { width: 100%; }

.aplicacoes { padding-block: var(--e9); background: var(--papel-alto); border-block: var(--traco) solid var(--tinta); }
.aplicacoes__lista {
  display: grid; gap: var(--e7); margin-top: var(--e7); grid-template-columns: 1fr;
}
@media (min-width: 56rem) { .aplicacoes__lista { grid-template-columns: repeat(2, 1fr); } }
.aplicacao__titulo { font-size: var(--t-h3); margin-top: var(--e4); }
.aplicacao__desc { color: var(--tinta-media); margin-top: var(--e2); }
.figura--aplicacao { background: var(--papel); }

/* ----------------------------------------------------------- contato */
.canais { padding-block: var(--e7) var(--e9); }
.canais__lista { display: grid; gap: var(--calha); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .canais__lista { grid-template-columns: repeat(3, 1fr); } }
.canal {
  background: var(--papel-alto); border: var(--traco) solid var(--tinta);
  border-radius: var(--raio); padding: var(--e6);
  display: grid; align-content: start; gap: var(--e3);
}
.canal__titulo { font-size: var(--t-h3); }
.canal__desc { color: var(--tinta-media); font-size: var(--t-peq); margin: 0; }
.canal__dado { font-family: var(--mono); font-size: var(--t-peq); margin: 0; }
.canal .botao { justify-self: start; margin-top: var(--e2); }
.canal__redes { display: flex; gap: var(--e4); }

.briefing { padding-block: var(--e9); background: var(--papel-alto); border-block: var(--traco) solid var(--tinta); }
.briefing__lista {
  counter-reset: b; display: grid; gap: var(--e6); margin-top: var(--e7);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .briefing__lista { grid-template-columns: repeat(2, 1fr); } }
.briefing__item { counter-increment: b; padding-left: var(--e8); position: relative; }
.briefing__item::before {
  content: counter(b, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.08em; color: var(--tinta-media);
  border: var(--traco) solid var(--tinta); border-radius: var(--raio);
  padding: 4px var(--e2);
}
.briefing__titulo { font-size: var(--t-h3); }
.briefing__corpo { color: var(--tinta-media); margin-top: var(--e2); }

.miudezas { padding-block: var(--e9); }
.miudezas__lista { display: grid; gap: var(--e7); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .miudezas__lista { grid-template-columns: repeat(2, 1fr); } }
.miudeza__titulo { font-size: var(--t-h3); margin-bottom: var(--e3); }

/* --------------------------------------------------- 404 e raiz */
.erro__palco { padding-block: var(--e10); display: grid; gap: var(--e9); }
.erro__titulo { font-size: var(--t-h1); font-weight: 800; }
.erro__corpo { font-size: var(--t-leitura); color: var(--tinta-media); margin-top: var(--e4); }
.erro__acoes { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); }

/* -------------------------------------------------------- lightbox */
body.sem-rolagem { overflow: hidden; }

.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: none;
  align-items: center; justify-content: center;
  gap: var(--e4);
  padding: var(--e5);
  background: color-mix(in srgb, var(--tinta) 94%, transparent);
}
.lightbox--aberto { display: flex; }
.lightbox__palco {
  margin: 0; max-width: min(92vw, 1400px); max-height: 90vh;
  display: grid; gap: var(--e3);
  animation: lightbox-entra 180ms var(--curva);
}
.lightbox__palco img { max-height: 78vh; width: auto; margin-inline: auto; border-radius: var(--raio); }
.lightbox__legenda {
  color: var(--papel); font-size: var(--t-peq); text-align: center;
  max-width: 70ch; margin-inline: auto;
}
.lightbox__fechar, .lightbox__nav {
  flex: none;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--papel);
  border: var(--traco) solid var(--papel);
  display: grid; place-items: center;
}
.lightbox__fechar { position: absolute; top: var(--e5); right: var(--e5); }
.lightbox__fechar::before { content: "\00d7"; font-size: 1.75rem; line-height: 1; }
.lightbox__nav--ant::before { content: "\2190"; font-size: 1.25rem; }
.lightbox__nav--prox::before { content: "\2192"; font-size: 1.25rem; }
.lightbox__fechar:hover, .lightbox__nav:hover { background: var(--roxo-camisa); color: var(--tinta); border-color: var(--roxo-camisa); }

@keyframes lightbox-entra { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }

/* --------------------------------------------- facade de vídeo */
.video {
  position: relative; cursor: pointer;
  border: var(--traco) solid var(--tinta); border-radius: var(--raio);
  overflow: hidden; background: var(--tinta);
  aspect-ratio: 16 / 9;
}
.video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.video::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--papel-alto);
  border: var(--traco) solid var(--tinta);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.video::before {
  content: ""; position: absolute; inset: 0; margin: auto; z-index: 2;
  width: 0; height: 0;
  border-left: 22px solid var(--tinta);
  border-top: 14px solid transparent; border-bottom: 14px solid transparent;
  transform: translateX(6px);
  pointer-events: none;
}
.video:hover::after { background: var(--roxo-camisa); }
.video__frame { width: 100%; height: 100%; border: 0; display: block; }

/* ----------------------------------------------------------- movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}