/* Fontes auto-hospedadas — geradas de fonts.googleapis.com em 19/08/2026.
   Só os subsets latin e latin-ext: o site é em português e os demais
   (cirílico, grego, vietnamita) eram 2/3 dos arquivos e nunca seriam
   baixados por ninguém aqui. Licença: SIL Open Font License 1.1. */

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fontes/Fraunces-latin-ext-FTeO-U.woff2) format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fontes/Fraunces-latin-xC9TeA.woff2) format('woff2');
  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;
}

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fontes/Fraunces-latin-ext-FTeO-U.woff2) format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fontes/Fraunces-latin-xC9TeA.woff2) format('woff2');
  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;
}

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fontes/Fraunces-latin-ext-FTeO-U.woff2) format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fontes/Fraunces-latin-xC9TeA.woff2) format('woff2');
  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;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fontes/IBMPlexSans-latin-ext-KYbABA.woff2) format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fontes/IBMPlexSans-latin-yxeKYY.woff2) format('woff2');
  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;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fontes/IBMPlexSans-latin-ext-KYbABA.woff2) format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fontes/IBMPlexSans-latin-yxeKYY.woff2) format('woff2');
  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;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fontes/IBMPlexSans-latin-ext-KYbABA.woff2) format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fontes/IBMPlexSans-latin-yxeKYY.woff2) format('woff2');
  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;
}

/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fontes/Literata-latin-ext-5ClqOw.woff2) format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fontes/Literata-latin-K5U5Ck.woff2) format('woff2');
  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;
}

/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fontes/Literata-latin-ext-_WTFCW.woff2) format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fontes/Literata-latin-J_HWTA.woff2) format('woff2');
  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;
}

/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fontes/Literata-latin-ext-_WTFCW.woff2) format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fontes/Literata-latin-J_HWTA.woff2) format('woff2');
  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;
}


/* Primeira Estante — kit de identidade v2.0 de 17/08/2026, lido de 08_Site/identidade/tokens.css em tempo de build. */
/* ============================================================================
   PRIMEIRA ESTANTE — tokens de identidade
   Kit v2.0 — 17/08/2026
   ----------------------------------------------------------------------------
   GERADO por brand/master/gera_tokens.py. Nao editar a mao: edite paleta.py e
   rode de novo. Assim todo hex daqui continua sendo consequencia da medicao do
   arquivo da marca, e nao uma escolha perdida no meio de uma folha de estilo.

   As quatro cores de marca foram medidas no arquivo vetorizado (interior
   erodido de cada forma, mediana de 14 mil a 51 mil pixels por regiao):

       petroleo   #0F3340    oliva      #657968
       ocre       #CC8828    terracota  #C5542B

   Normalizadas em OKLCh (matiz ao grau inteiro), e delas derivadas as escalas
   de 50 a 900. O degrau 500 E' a cor do arquivo.

   ----------------------------------------------------------------------------
   AS TRES REGRAS QUE ESTE ARQUIVO EXISTE PARA GUARDAR

   1. SERIFA E' JUIZO, SANS E' DADO.
      Titulo, prosa curatorial e analise em serifa. Nota, mes, dimensao, fonte
      e rotulo em sans, sempre com algarismo tabular. Numero em serifa vira
      opiniao; opiniao em sans vira dado. Os dois erros sao do mesmo tipo.

   2. AS CORES DA MARCA NAO JULGAM.
      Oliva, ocre e terracota identificam PRATELEIRA, nunca veredito. Nao
      existe verde = aprovado, amarelo = atencao, laranja = ruim. A nota e'
      sempre petroleo, qualquer que seja o valor: quem diz se 62 e' pouco e' o
      numero 62, nao a cor dele.

   3. AUSENCIA DE EVIDENCIA NAO E' REPROVACAO.
      Campo sem lastro sai em neutro tracejado, com o rotulo "sem dado" — nunca
      em vermelho, nunca curto, nunca ausente do desenho. Um livro com tres
      dimensoes medidas e duas vazias tem de PARECER isso.
   ========================================================================== */

:root { color-scheme: light; }

:root {

  /* ---------- as quatro cores do arquivo (degrau 500 = medido) --------- */
  /* petroleo — OKLCh L 0.300 C 0.048 H 226 */
  --pe-petroleo-50: #F1F7FA;
  --pe-petroleo-100: #E2EDF1;
  --pe-petroleo-200: #C8DAE3;
  --pe-petroleo-300: #A4C0CC;
  --pe-petroleo-400: #7FA2B1;
  --pe-petroleo-500: #0D3340;
  --pe-petroleo-600: #032A37;
  --pe-petroleo-700: #00222E;
  --pe-petroleo-800: #001A24;
  --pe-petroleo-900: #01131A;
  /* oliva — OKLCh L 0.555 C 0.036 H 150 */
  --pe-oliva-50: #F3F7F4;
  --pe-oliva-100: #E6ECE7;
  --pe-oliva-200: #CFDAD1;
  --pe-oliva-300: #AFC0B2;
  --pe-oliva-400: #8DA191;
  --pe-oliva-500: #647968;
  --pe-oliva-600: #4C604F;
  --pe-oliva-700: #354738;
  --pe-oliva-800: #202F23;
  --pe-oliva-900: #101C13;
  /* ocre — OKLCh L 0.680 C 0.135 H 70 */
  --pe-ocre-50: #FFF4E7;
  --pe-ocre-100: #FCE7D0;
  --pe-ocre-200: #F3D0A9;
  --pe-ocre-300: #E3B074;
  --pe-ocre-400: #CC8C39;
  --pe-ocre-500: #CD8725;
  --pe-ocre-600: #A66400;
  --pe-ocre-700: #7F4400;
  --pe-ocre-800: #582600;
  --pe-ocre-900: #351000;
  /* terracota — OKLCh L 0.585 C 0.155 H 40 */
  --pe-terracota-50: #FFF1E9;
  --pe-terracota-100: #FFE2D5;
  --pe-terracota-200: #FFC7B2;
  --pe-terracota-300: #F8A283;
  --pe-terracota-400: #E47953;
  --pe-terracota-500: #C55429;
  --pe-terracota-600: #A43600;
  --pe-terracota-700: #811A00;
  --pe-terracota-800: #5D0000;
  --pe-terracota-900: #3C0000;

  /* ---------- neutros: papel, nao cinza (matiz 76, croma minimo) ------- */
  --pe-neutro-0: #FFFDFA;
  --pe-neutro-50: #FBF7EF;
  --pe-neutro-100: #F5F0E6;
  --pe-neutro-200: #EAE3D7;
  --pe-neutro-300: #D8D1C3;
  --pe-neutro-400: #B0AA9E;
  --pe-neutro-500: #8B867C;
  --pe-neutro-600: #6A665E;
  --pe-neutro-700: #4D4A43;
  --pe-neutro-800: #302D28;
  --pe-neutro-900: #1B1915;

  /* ---------- superficies ---------------------------------------------- */
  --pe-papel:        var(--pe-neutro-50);   /* fundo do site                 */
  --pe-papel-alto:   var(--pe-neutro-0);    /* superficie elevada            */
  --pe-papel-fundo:  var(--pe-neutro-100);  /* faixa, zebra, campo           */
  --pe-papel-escuro: var(--pe-petroleo-500);/* secao invertida               */

  /* ---------- tinta (contraste medido sobre o papel) -------------------- */
  --pe-tinta:        var(--pe-neutro-900); /* #1B1915 — 16.43:1  AAA */
  --pe-tinta-apoio:  var(--pe-neutro-700); /* #4D4A43 — 8.27:1  AAA */
  --pe-tinta-mudo:   var(--pe-neutro-600); /* #6A665E — 5.35:1  AA  */
  --pe-linha:        var(--pe-neutro-200); /* regua fina                  */
  --pe-linha-forte:  var(--pe-neutro-300); /* regua de secao              */

  /* ---------- papeis funcionais ----------------------------------------
     Achados por busca em OKLCh: matiz e croma da cor de marca preservados,
     L movido ate' o contraste passar. Nao sao "a cor da marca escurecida no
     olho" — sao o primeiro degrau que passa. */
  --pe-marca:        var(--pe-petroleo-500); /* #0D3340 — 12.56:1 sobre papel, AAA */
  --pe-marca-forte:  var(--pe-petroleo-700);
  --pe-marca-fraca:  var(--pe-petroleo-50);
  --pe-acao:         #BE4E22; /* 4.57:1 sobre papel · 4.88:1 com branco por cima */
  --pe-acao-hover:   #A53600;
  --pe-acao-fraca:   var(--pe-terracota-50);
  --pe-ressalva:     #A46100; /* 4.58:1 — obra avaliada e mal, terceira coisa */
  --pe-ressalva-fraca: var(--pe-ocre-50);
  --pe-colecao:      #617665; /* 4.58:1 — identidade de prateleira, nunca veredito */
  --pe-colecao-fraca: var(--pe-oliva-50);
  --pe-ausencia:     var(--pe-neutro-600); /* #6A665E — 5.35:1. NUNCA vermelho. */
  --pe-ausencia-fraca: var(--pe-neutro-100);
  --pe-sobre-acao:   #FFFFFF;
  --pe-sobre-marca:  var(--pe-neutro-50);

  /* ---------- graficas: identificam prateleira, nao carregam texto -----
     Sao as tres barras do simbolo, na ordem em que aparecem nele. Uma colecao
     recebe uma delas e fica com ela; a cor nao diz se a colecao e' boa. */
  --pe-graf-1: var(--pe-oliva-500);
  --pe-graf-2: var(--pe-ocre-500);
  --pe-graf-3: var(--pe-terracota-500);

  /* ---------- tipografia ------------------------------------------------
     Fraunces  = voz     (titulo; serifa de juizo)
     Literata  = leitura (prosa curatorial; desenhada para tela)
     IBM Plex  = dado    (nota, mes, dimensao, fonte, rotulo)
     Outfit    = MARCA — vive so' no wordmark, e la' em contorno. Nao e'
                 carregada pelo site: assinatura nao pode depender de download.
     ------------------------------------------------------------------- */
  --pe-fonte-titulo: "Fraunces", "Iowan Old Style", Georgia, serif;
  --pe-fonte-corpo:  "Literata", Georgia, "Times New Roman", serif;
  --pe-fonte-dado:   "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;

  /* escala 1.200 (terca menor), mesma razao nas duas pontas */
  --pe-t-3xg: 3.583rem; --pe-t-2xg: 2.986rem; --pe-t-xg: 2.488rem;
  --pe-t-g:   2.074rem; --pe-t-m:   1.728rem; --pe-t-p:  1.440rem;
  --pe-t-base:1.200rem; --pe-t-xp:  1.000rem; --pe-t-2xp:0.833rem;
  --pe-t-3xp: 0.694rem;

  --pe-peso-titulo: 600;   /* Fraunces em 700 fecha os olhais nos corpos grandes */
  --pe-peso-corpo:  400;
  --pe-peso-dado:   500;
  --pe-entrelinha-titulo: 1.06;
  --pe-entrelinha-corpo:  1.62;
  --pe-entrelinha-dado:   1.35;
  --pe-track-versalete: 0.11em;
  --pe-track-titulo:    -0.008em;
  /* Entreletra do wordmark, para quando o nome for texto e nao desenho.
     Medida no arquivo: vao de 0,50 da altura de caixa alta. */
  --pe-track-marca: 0.30em;

  /* ---------- espaco: passo de 4 px, nomeado pelo uso ------------------- */
  --pe-e-1:.25rem; --pe-e-2:.5rem;  --pe-e-3:.75rem; --pe-e-4:1rem;
  --pe-e-5:1.5rem; --pe-e-6:2rem;   --pe-e-7:3rem;   --pe-e-8:4rem;
  --pe-e-9:6rem;   --pe-e-10:8rem;

  /* ---------- forma -----------------------------------------------------
     A marca tem exatamente DOIS tipos de canto: vivo a esquerda (a lombada,
     onde tudo alinha) e meia-cana a direita (a ponta aberta da prateleira).
     O sistema usa os mesmos dois. Nao existe "canto arredondado generico". */
  --pe-r-0: 0;                  /* lombada: bloco alinhado a esquerda        */
  --pe-r-p: 3px;
  --pe-r-m: 6px;
  --pe-r-pilula: 999px;         /* ponta de trilho                           */
  --pe-trilho-a: 8px;           /* altura do trilho — 6u da grade da marca   */
  --pe-trilho-a-p: 5px;         /* trilho compacto (card, lastro)            */
  --pe-lombada: 3px;            /* espessura da marca de colecao             */

  /* ---------- profundidade: papel sobre papel, nunca vidro -------------- */
  --pe-sombra-livro: 0 1px 1px rgba(28,25,21,.10), 0 6px 10px -6px rgba(28,25,21,.28);
  --pe-sombra-1: 0 1px 2px rgba(28,25,21,.05);
  --pe-sombra-2: 0 2px 4px rgba(28,25,21,.06), 0 10px 24px -12px rgba(28,25,21,.16);
  --pe-foco: 0 0 0 3px var(--pe-papel), 0 0 0 6px var(--pe-acao);

  /* ---------- movimento ------------------------------------------------- */
  --pe-tempo-1: 120ms; --pe-tempo-2: 220ms; --pe-tempo-3: 420ms;
  --pe-curva: cubic-bezier(.32,.72,0,1);

  /* ---------- medida ----------------------------------------------------- */
  --pe-medida: 66ch;
  --pe-medida-estreita: 44ch;
  --pe-largura-max: 1180px;
  --pe-largura-larga: 1320px;

  /* ---------- ativos da marca -------------------------------------------- */
  --pe-clear-space: 0.30;   /* fracao da altura do simbolo, em volta dele     */
  --pe-logo-min-px: 40;     /* abaixo disso: microversao (brand/svg/micro-*)  */

  /* ---------- escala da janela etaria -------------------------------------
     Fixa, e por isso comparavel: duas obras lado a lado tem a mesma regua.
     0 a 96 meses cobre 97 % das janelas do acervo; o que passa disso e'
     desenhado com a ponta aberta. */
  --pe-janela-teto: 96;
}

/* ============================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pe-papel);
  color: var(--pe-tinta);
  font-family: var(--pe-fonte-corpo);
  font-size: var(--pe-t-base);
  line-height: var(--pe-entrelinha-corpo);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--pe-fonte-titulo);
  font-weight: var(--pe-peso-titulo);
  line-height: var(--pe-entrelinha-titulo);
  letter-spacing: var(--pe-track-titulo);
  color: var(--pe-marca);
  margin: 0 0 var(--pe-e-4);
  text-wrap: balance;
}
h1 { font-size: clamp(2.05rem, 1.25rem + 3.1vw, var(--pe-t-2xg)); }
h2 { font-size: clamp(1.62rem, 1.15rem + 1.9vw, var(--pe-t-xg)); }
h3 { font-size: var(--pe-t-m); }
p  { max-width: var(--pe-medida); }
a  { color: var(--pe-acao); text-decoration-thickness: .07em; text-underline-offset: .17em; }
a:hover { color: var(--pe-acao-hover); }
:focus-visible { outline: none; box-shadow: var(--pe-foco); border-radius: var(--pe-r-m); }

/* Versalete institucional — a unica caixa alta do sistema. */
.pe-versalete {
  font-family: var(--pe-fonte-dado); font-weight: 600;
  font-size: var(--pe-t-3xp); letter-spacing: var(--pe-track-versalete);
  text-transform: uppercase; color: var(--pe-tinta-mudo);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* Kit v2.0 — 17/08/2026 */


/* ==========================================================================
   PONTE DE IDENTIDADE — nomes antigos do site redefinidos sobre os tokens do
   kit v2. Nada de cor ou tipo e' decidido aqui: isto e' so' traducao.
   ========================================================================== */
:root{
 --papel:var(--pe-papel);
 --papel2:var(--pe-papel-fundo);
 --creme:var(--pe-papel-alto);

 --tinta:var(--pe-tinta);
 --tinta2:var(--pe-tinta-apoio);
 /* --mudo era a cor de AUSENCIA de dado no kit v1 e o site a usava tambem em
    legenda e contagem. No v2 as duas coisas se separam: ausencia tem token
    proprio (--pe-ausencia) e texto secundario tem o dele. Aqui --mudo vira o
    texto secundario, que e' o uso majoritario; quem desenha ausencia usa o
    token de ausencia direto, nunca este alias. */
 --mudo:var(--pe-tinta-mudo);
 --linha:var(--pe-linha);

 --destaque:var(--pe-acao);
 /* No v1 --verde apontava para uma cor de "verificado" e --mostarda para
    "ressalva": era o semaforo entrando pela porta dos fundos. No v2 as cores
    da marca nao julgam. --verde passa a ser a cor de COLECAO (identidade de
    prateleira) e --mostarda a de RESSALVA, que e' um veredito de curadoria
    explicito e nao uma cor de marca reaproveitada. */
 --verde:var(--pe-colecao);
 --mostarda:var(--pe-ressalva);

 /* madeira: elemento grafico, nunca recebe texto. */
 --mad1:var(--pe-graf-2);
 --mad2:var(--pe-graf-3);
 --mad3:var(--pe-marca);

 --sombra:var(--pe-sombra-2);

 --serif:var(--pe-fonte-corpo);
 --sans:var(--pe-fonte-dado);
 --titulo:var(--pe-fonte-titulo);

 --t1:var(--pe-t-3xp);  --t2:var(--pe-t-2xp);  --t3:var(--pe-t-xp);
 --t4:var(--pe-t-base); --t5:var(--pe-t-p);    --t6:var(--pe-t-m);
 --t7:var(--pe-t-g);    --t8:var(--pe-t-xg);   --t9:var(--pe-t-2xg);

 /* O v1 tinha um unico raio grande (--pe-r-g, 20px) e o site inteiro herdou
    canto arredondado de tudo. O v2 tem dois cantos, e so' dois. */
 --pe-r-g:var(--pe-r-m);
}


/* RESERVA DE ESPACO DA CAPA (19/08/2026).
   88% das 6.084 imagens do site nao declaram largura e altura. A resposta NAO
   e' width/height por imagem: capa de livro nao tem proporcao fixa, o arquivo
   da Amazon nem sempre tem a proporcao do objeto, e numero errado DEFORMA. A
   caixa reserva a proporcao, e `object-fit: contain` (que a regra de .capa>img
   ja usa) encaixa a capa dentro sem esticar. 1/1.45 e' a proporcao mediana de
   album infantil; capa mais quadrada ou mais alta continua cabendo, so' sobra
   ou falta folga lateral — nunca distorce. */
.capa { aspect-ratio: 1 / 1.45; }

/* ---------------------------------------------------------------------------
   CSS proprio do site. As variaveis abaixo NAO decidem mais cor nem tipo:
   quem decide e 08_Site/identidade/tokens.css, e a ponte em identidade.py
   redefine estes mesmos nomes em termos dos tokens do kit (a ponte vem
   ANTES daqui, entao ela perde a cascata de proposito -- os valores abaixo
   ficam como FALLBACK legivel para o caso de o kit sumir e alguem abrir o
   HTML publicado sem contexto). Nao edite cor aqui: edite o kit.
   --------------------------------------------------------------------- */
:root{
 /* 18/08/2026 — estes valores foram REESCRITOS para o kit v2.
    Ate aqui eles guardavam a paleta do site de ANTES do kit v1. Como
    fallback isso nao era inofensivo: se a cadeia de var() falhasse, o site
    nao caia numa versao simples de si mesmo — caia numa identidade que ele
    nao tem mais, com duas geracoes de marca de distancia. Fallback que
    mente e pior que fallback nenhum, porque ninguem desconfia dele.
    Agora sao os mesmos valores do kit, escritos literais: se o kit sumir, o
    HTML publicado continua parecendo a Primeira Estante.
    (Os hex antigos NAO sao citados aqui de proposito. Este comentario vai
    inteiro para o <style> de cada uma das 297 paginas, e o audita_marca.py
    varre o publicado — citar a cor morta aqui reprovaria o proprio site.) */
 --papel:#FBF7EF;--papel2:#F5F0E6;--creme:#FFFDFA;--tinta:#1B1915;--tinta2:#4D4A43;
 --mudo:#6A665E;--linha:#EAE3D7;--destaque:#BE4E22;--verde:#617665;--mostarda:#A46100;
 --mad1:#CD8725;--mad2:#C55429;--mad3:#0D3340;
 --sombra:0 2px 4px rgba(28,25,21,.06),0 10px 24px -12px rgba(28,25,21,.16);
 --serif:Georgia,'Iowan Old Style','Palatino Linotype',Palatino,serif;
 --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
 /* Escala tipografica (C1 da auditoria de 13/08/2026). Razao unica
    de 1,125 do menor ao maior degrau, base 1rem. Antes eram 28
    tamanhos distintos com incrementos de 0,01rem -- ajuste por
    sensacao, nao hierarquia -- e um valor em px no meio, que ignora
    o tamanho de fonte escolhido no sistema operacional.
    Ninguem escreve font-size literal daqui em diante. */
 --t1:0.7rem; --t2:0.79rem; --t3:0.89rem; --t4:1rem; --t5:1.12rem; --t6:1.27rem; --t7:1.6rem; --t8:2.03rem; --t9:2.57rem;

}

/* ==========================================================================
   PONTE DE IDENTIDADE — nomes antigos do site redefinidos sobre os tokens do
   kit v2. Nada de cor ou tipo e' decidido aqui: isto e' so' traducao.
   ========================================================================== */
:root{
 --papel:var(--pe-papel);
 --papel2:var(--pe-papel-fundo);
 --creme:var(--pe-papel-alto);

 --tinta:var(--pe-tinta);
 --tinta2:var(--pe-tinta-apoio);
 /* --mudo era a cor de AUSENCIA de dado no kit v1 e o site a usava tambem em
    legenda e contagem. No v2 as duas coisas se separam: ausencia tem token
    proprio (--pe-ausencia) e texto secundario tem o dele. Aqui --mudo vira o
    texto secundario, que e' o uso majoritario; quem desenha ausencia usa o
    token de ausencia direto, nunca este alias. */
 --mudo:var(--pe-tinta-mudo);
 --linha:var(--pe-linha);

 --destaque:var(--pe-acao);
 /* No v1 --verde apontava para uma cor de "verificado" e --mostarda para
    "ressalva": era o semaforo entrando pela porta dos fundos. No v2 as cores
    da marca nao julgam. --verde passa a ser a cor de COLECAO (identidade de
    prateleira) e --mostarda a de RESSALVA, que e' um veredito de curadoria
    explicito e nao uma cor de marca reaproveitada. */
 --verde:var(--pe-colecao);
 --mostarda:var(--pe-ressalva);

 /* madeira: elemento grafico, nunca recebe texto. */
 --mad1:var(--pe-graf-2);
 --mad2:var(--pe-graf-3);
 --mad3:var(--pe-marca);

 --sombra:var(--pe-sombra-2);

 --serif:var(--pe-fonte-corpo);
 --sans:var(--pe-fonte-dado);
 --titulo:var(--pe-fonte-titulo);

 --t1:var(--pe-t-3xp);  --t2:var(--pe-t-2xp);  --t3:var(--pe-t-xp);
 --t4:var(--pe-t-base); --t5:var(--pe-t-p);    --t6:var(--pe-t-m);
 --t7:var(--pe-t-g);    --t8:var(--pe-t-xg);   --t9:var(--pe-t-2xg);

 /* O v1 tinha um unico raio grande (--pe-r-g, 20px) e o site inteiro herdou
    canto arredondado de tudo. O v2 tem dois cantos, e so' dois. */
 --pe-r-g:var(--pe-r-m);
}


*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);
 font:16px/1.6 var(--serif);padding:0}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px 70px}
/* Paragrafo de prosa (pagina de livro, sobre) fica mais estreito que os
   trilhos/grades de capa — texto corrido em 1160px de largura fica dificil
   de ler; capa em fileira, nao. */
.medida{max-width:720px}
/* Link de pulo: fora da tela ate receber foco de teclado. Nao usa
   display:none nem visibility:hidden — os dois tiram o elemento da ordem
   de foco, que e' exatamente o que ele existe para ocupar. */
.pular{position:absolute;left:-9999px;top:0;z-index:99;background:var(--creme);
 color:var(--tinta);padding:8px 16px;border:2px solid var(--destaque);
 border-radius:0 0 8px 0;font-family:var(--sans);font-size:var(--t3);text-decoration:none}
.pular:focus{left:0}
nav.topo{border-bottom:1px solid var(--linha);background:var(--papel)}
nav.topo .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:18px;
 padding-top:18px;padding-bottom:18px}
nav.topo a{text-decoration:none;color:var(--tinta2);font-family:var(--sans);
 font-size:var(--t2);font-weight:500;letter-spacing:.01em;
 border-bottom:1px solid transparent;padding-bottom:2px}
nav.topo a:not(.marca):hover{color:var(--tinta);border-color:var(--destaque)}
nav.topo a.marca{font-family:var(--serif);font-weight:700;font-size:var(--t5);
 color:var(--tinta)}
nav.topo a:hover{color:var(--destaque)}
header.pagina{padding:40px 0 22px}
h1{font-size:var(--t8);margin:0 0 10px;letter-spacing:-.3px;line-height:1.2}
h1 span{color:var(--destaque)}
.sub{color:var(--mudo);font-size:var(--t4);margin:0}
h2{font-size:var(--t6);margin:38px 0 6px;padding-bottom:6px;border-bottom:1px solid var(--linha)}
.metodo,.caixa{background:#fff;border:1px solid var(--linha);border-radius:12px;
 padding:18px 20px;font-size:var(--t4);color:var(--tinta2)}
.metodo b,.caixa b{color:var(--tinta)}
.chips{margin-top:10px;display:flex;gap:7px;flex-wrap:wrap}
.chip{font-family:var(--sans);font-size:var(--t1);letter-spacing:.3px;
 padding:4px 10px;border-radius:999px;background:#f1e9da;color:var(--mudo)}
.chip.n{background:var(--verde);color:#fff;font-weight:600}
.fato{margin:16px 0;font-size:var(--t4);color:var(--tinta2)}
.acao{display:inline-block;margin-top:18px;padding:11px 22px;border-radius:8px;
 background:var(--destaque);color:#fff;text-decoration:none;font-family:var(--sans);
 font-weight:600;font-size:var(--t4)}
.acao:hover{background:#933f16}
.linha-acao{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.linha-acao .acao{margin-top:0}
/* Selo de identificacao comercial exigido pelo CONAR junto do link de
   afiliado — nao no rodape (o texto do selo em si vem de
   amazon_link.marcacao, nunca fixo aqui, para nao vazar a palavra em
   pagina sem tag). Chip claro (papel2), cor tinta2: 6.9:1 de contraste
   contra o fundo do chip e 7.7:1 contra o papel, bem acima do minimo AA
   (4.5:1) para texto pequeno — nao pode ser "cinza-claro sobre bege". */
.marca-publi{display:inline-block;font-family:var(--sans);font-size:var(--t1);
 font-weight:700;letter-spacing:.4px;color:var(--tinta2);background:var(--papel2);
 border:1px solid var(--linha);border-radius:999px;padding:4px 11px}
.grade-idades{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
 gap:12px;margin-top:16px;list-style:none;padding:0}
.grade-idades a{display:block;background:#fff;border:1px solid var(--linha);
 border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--tinta)}
.grade-idades a:hover{border-color:var(--destaque)}
.grade-idades .n{font-family:var(--sans);font-weight:700;font-size:var(--t4)}
.grade-idades .d{font-family:var(--sans);font-size:var(--t2);color:var(--mudo)}
.vizinhos{display:flex;justify-content:space-between;margin-top:30px;
 font-family:var(--sans);font-size:var(--t3)}
.vizinhos a{text-decoration:none;color:var(--tinta2)}
.vizinhos a:hover{color:var(--destaque)}
.aviso-cobertura{background:#fbf1df;border:1px solid var(--mostarda);border-radius:12px;
 padding:14px 18px;font-size:var(--t3);color:var(--tinta2);margin:16px 0}
footer{margin-top:56px;padding-top:20px;border-top:2px solid var(--linha);
 color:var(--mudo);font-size:var(--t3)}
footer p{margin:0 0 8px}

/* ── capa (decoracao, nunca estrutura — ver docstring de capa_html) ──── */
/* A capa e' SEMPRE hotlink direto para o CDN da Amazon — nunca baixada nem
   cacheada (parecer juridico 12/08/2026). Tecnica portada de
   vitrine_template.html#.capa (12/08/2026, reforma visual): SO' a altura e'
   fixa aqui — a largura vem do container (coluna do grid/flex), nunca as
   duas ao mesmo tempo, ou a capa fica espremida numa caixa quase quadrada
   que nao respeita a proporcao real do livro (o que o titular reprovou
   como "parece Paint"). A MESMA url entra duas vezes: '.bg' ampliada e
   borrada preenche o vazio atras (o navegador busca uma vez so' e serve a
   segunda do cache), a capa inteira fica por cima sem cortar nada
   (object-fit:contain). Falha de carga (ou o placeholder 1x1 da Amazon,
   ver capa_html()) cai no bloco tipografico '.fb', que fica por baixo o
   tempo todo — a caixa tem ALTURA fixa nos dois casos, o layout nao pode
   saltar nem quebrar. */
.capa-link{display:block;text-decoration:none;color:inherit;position:relative}
.capa{position:relative;display:flex;align-items:center;justify-content:center;
 margin:0 auto;overflow:hidden;border-radius:3px 8px 8px 3px;
 background:var(--creme);box-shadow:var(--sombra)}
.capa::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;z-index:4;
 background:linear-gradient(90deg,rgba(90,55,20,.22),rgba(90,55,20,0))}
.capa .fb{position:absolute;inset:0;z-index:1;display:flex;align-items:center;
 flex-direction:column;justify-content:center;text-align:center;padding:9%;
 font-family:var(--serif);font-size:var(--t1);line-height:1.25;color:var(--tinta2);
 overflow:hidden;background:linear-gradient(150deg,#fdf7ec,#eadcc0)}
.capa .fb b{display:block;color:var(--tinta);margin-bottom:.35em;
 display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.capa .fb span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
 overflow:hidden}
/* Ha capa de verdade: a reserva sai de cena por inteiro. Ver marca_frente(). */
.capa.com-capa .fb{display:none}
/* imagem principal: cresce ate' o limite da caixa sem cortar (nunca
   deforma), some do fluxo (opacity:0) ate' o onload confirmar que carregou
   de verdade (naturalWidth>2 — ver capa_html()), revelando '.fb' por baixo
   enquanto isso — degradacao graciosa sem depender do layout saltar. */
.capa img{position:relative;z-index:2;max-width:100%;max-height:100%;
 object-fit:contain;display:block;opacity:0;transition:opacity .5s}
.capa img.ok{opacity:1}
.capa img.erro{display:none}
/* fundo: a propria capa, ampliada e borrada, so' para o vazio da moldura
   nao ficar creme chapado. z-index 0 e opacidade baixa — nunca compete
   com a arte de cima. */
.capa .bg{position:absolute;left:-14%;top:-14%;width:128%;height:128%;z-index:0;
 max-width:none;max-height:none;object-fit:cover;
 filter:blur(15px) saturate(1.3) brightness(.82);opacity:0;transition:opacity .6s}
.capa .bg.ok{opacity:.5}
/* .capa-nota REMOVIDA em 08/09/2026 junto com o selo de numero no canto da
   capa. Ver capa_html(): a faixa nao ocupou o lugar dela porque o cartao ja
   a mostra em .pe-ficha__faixa, logo abaixo. */
.au-mini{font-family:var(--sans);font-size:var(--t1);color:var(--mudo);margin:3px 0 0;
 text-align:center;line-height:1.25;height:26px;overflow:hidden;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.capa-publi{position:absolute;top:6px;left:6px;z-index:5;font-family:var(--sans);
 font-size:var(--t1);font-weight:700;letter-spacing:.03em;color:#fff;
 background:rgba(47,42,36,.74);padding:2px 6px;border-radius:4px}
.credito-capa{font-family:var(--sans);font-size:var(--t2);color:var(--mudo);margin:10px 0 0}
/* o livro inclina ao passar o mouse — mesmo gesto de vitrine_template.html
   #.livro:hover .capa, em todo lugar que usa capa_html() (trilho, grade e
   pagina de livro): e' o detalhe que tira a cara de tabela/planilha. */
.capa{transition:transform .3s cubic-bezier(.34,1.5,.5,1),box-shadow .3s}
.capa-link:hover .capa{transform:translateY(-8px) rotate(-1.3deg);
 box-shadow:-1px 4px 8px rgba(90,55,25,.14),-2px 12px 22px rgba(90,55,25,.16)}

/* ── trilhos horizontais (home) ──────────────────────────────────────── */
.trilho{margin:30px 0 6px}
.trilho .th{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.trilho .th h2{margin:0;padding:0;border:0;font-size:var(--t6)}
.trilho .th .cnt{font-family:var(--sans);font-size:var(--t1);background:var(--papel2);
 color:var(--tinta2);padding:3px 10px;border-radius:999px;border:1px solid var(--linha);
 font-weight:700}
.trilho .th .verall{margin-left:auto;font-family:var(--sans);font-size:var(--t3);
 color:var(--destaque);text-decoration:underline;text-underline-offset:3px;
 white-space:nowrap}
/* pista: fileira com rolagem horizontal, prateleira (gradiente de madeira)
   desenhada logo abaixo do rodape das capas — mesma linguagem da Vitrine
   privada (vitrine_template.html, '.grade'), so' com uma linha em vez de
   varias (o degrade nao repete, so' precisa acertar UMA vez). */
/* padding-top (14px) e' repetido em background-position para a prateleira
   comecar exatamente onde a capa termina (129px de altura) — o mesmo
   truque de deslocamento que vitrine_template.html#.grade usa, so' que
   aqui e' uma fileira so, entao os stops sao relativos a ela (0 = topo da
   capa) e o deslocamento vem inteiro do background-position. */
/* A regua fica em 14 (padding-top) + 176 (altura da moldura) = 190px.
   O numero e o mesmo passado a capa_html() em cardcapa_html(): mexer
   em um sem mexer no outro descasa o pe do livro da prateleira. */
.pista{display:flex;gap:22px;overflow-x:auto;padding:14px 4px 30px;
 scrollbar-width:thin;scrollbar-color:var(--linha) transparent;
 background-image:linear-gradient(to bottom,
   transparent 0 190px,var(--pe-linha-forte) 190px 191px,
   transparent 191px 100%);
 background-position:0 0;background-repeat:no-repeat}
.pista::-webkit-scrollbar{height:7px}
.pista::-webkit-scrollbar-thumb{background:var(--linha);border-radius:999px}
/* largura FIXA aqui e' a da COLUNA (o cartao inteiro), nunca da .capa em si
   — a .capa (regra em capa_html()/CSS acima) so' fixa altura e herda 100%
   dessa largura, por isso "assenta" sem sobrar creme torto de um jeito
   diferente em cada card. */
.cardcapa{flex:0 0 140px;width:140px}
.cardcapa .titulo-mini{display:block;text-decoration:none;color:inherit}
/* Titulo: centralizado sob a capa (mesma largura, agora que a capa nao tem
   mais largura fixa propria), altura reservada para 2 linhas SEMPRE — com
   1 linha ou 2, a legenda termina na mesma altura em todo card da fileira,
   entao a fileira nao "serrilha". line-clamp corta com reticencias nos
   navegadores que suportam; height+overflow e' o fallback nos que nao
   suportam (nunca deixa o texto vazar da caixa reservada). */
.cardcapa h3{font-family:var(--titulo);font-size:var(--t2);margin:22px 0 0;
 font-weight:600;line-height:1.3;
 height:34px;overflow:hidden;text-align:center;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ── grade de capas (pagina de idade) ────────────────────────────────── */
/* Mesma tecnica de vitrine_template.html#.grade (prateleira de verdade):
   align-items:end para o livro assentar na tabua, e o periodo do degrade
   repetido casado com a altura de cada linha da grade. Diferenca daqui
   para a Vitrine: la' o cartao E' a capa (altura fixa, sem legenda visivel
   — o titulo so' aparece em tooltip no hover), entao periodo = altura da
   capa + gap basta. Aqui o cartao tem legenda (titulo/autor/nota) SEMPRE
   visivel embaixo da capa (nunca depende de hover, funciona sem JS), entao
   o periodo tem que cobrir o cartao INTEIRO, nao so' a capa:
     periodo = altura do cartao (grid-auto-rows) + folga entre linhas (gap)
             = 292px + 30px = 322px

   Tres numeros amarrados, e mexer em um sem mexer nos outros quebra a
   pagina de um jeito que so aparece da SEGUNDA fileira em diante:
     grid-auto-rows == .livrocard{height} == ultimo stop do degrade - gap.
   Em 12/08/2026 grid-auto-rows ficou em 242 enquanto o cartao subiu para
   259: 17px de erro POR FILEIRA, acumulando, ate a tabua da 4a fileira
   passar por cima do nome do autor. A primeira fileira estava perfeita —
   e' por isso que olhar so o topo da pagina nao encontra esta classe de
   bug.

   E a tabua fica em 150-168, logo ABAIXO do pe da capa, nao por cima
   dele: o .bg desfocado enche a largura inteira do cartao, entao tabua
   sobreposta a capa simplesmente desaparece atras dela. O titulo comeca
   em 150+42=192px, 24px depois do fim da tabua — mesma folga dos trilhos
   da home, que e' a que ele aprovou.
   e' exatamente o ultimo stop do degrade abaixo — descasar isso faz os
   livros flutuarem fora da tabua (ja aconteceu nesta base, 12/08/2026).
   grid-auto-rows FIXO (em vez de altura automatica) e' o que garante que
   toda linha tenha a MESMA altura mesmo quando um cartao tem nota/dizeres
   e outro nao — sem isso o periodo fixo do degrade descasaria da segunda
   linha em diante. */
/* 16/08/2026, SEGUNDA passada — a primeira estava errada de premissa.
   Eu tinha subido o cartao de 292 para 316px para o texto parar de ser
   fatiado. Tirou o corte, e o titular respondeu que nao resolveu e ficou
   feio. Os dois certos:
     · nao resolveu porque o problema nunca foi o pixel — era o FRAGMENTO.
       Com mais altura, o cartao passou a exibir meia frase inteirinha em vez
       de meia frase cortada. Sinopse saiu do cartao (ver livrocard_html);
     · ficou feio porque 44 dos 63 cartoes nao tinham sinopse e herdaram
       ~90px de buraco, e porque a tabua de madeira em cinco faixas — a
       ultima peca do desenho anterior ao kit — atravessava a pagina como
       uma barra laranja saturada, brigando com tudo que ja tinha sido
       acalmado. Nos trilhos da home ela ja tinha virado regua de 1px em
       15/08; aqui tinha ficado.
   Agora: capa 150 + 22 de respiro + titulo 38 + autoria = 252px de cartao,
   regua de 1px em 150, periodo 252+30 = 282. Os tres numeros acoplados
   continuam sendo tres, e continuam andando juntos.
   252 e nao 240: com 240 a folga do pe da autoria dava exatamente 6px, que e'
   o PISO da asercao E — passar raspando num portao e' o mesmo que nao passar
   na proxima vez que a fonte mudar meio ponto.

   16/08/2026, TERCEIRA passada: 252 -> 260. A autoria passou a poder ocupar
   DUAS linhas (ver .livrocard .au), porque em uma so' ela cortava o nome de
   quem ilustrou no meio da palavra em 41 dos 110 cartoes de /idade/4-anos/.
   Medido com duas linhas e cartao de 252: zero cortes, mas folga minima de
   5px — abaixo do piso de 6. Os 8px sobem a folga para 13. O periodo
   acompanha: 260 + gap 30 = 290. */
/* PAINT FORA DA TELA (19/08/2026). Uma grade de idade chega a 234 cartoes
   e 470 <img>, e o navegador fazia layout e paint de todos de uma vez. No
   CARTAO, e nao na grade: no container a barra de rolagem daria pulo. A
   altura reservada e estimativa (capa ~260 + titulo/credito ~90); errar
   nao quebra layout, so torna a rolagem menos precisa antes de entrar na
   tela. Navegador sem suporte ignora as duas linhas e fica como estava. */
.grade-livros > .livrocard{content-visibility:auto;
 contain-intrinsic-size:auto 350px}
.grade-livros{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
 gap:30px 18px;grid-auto-rows:260px;align-items:end;padding:18px 2px 40px;
 background-image:repeating-linear-gradient(to bottom,
   transparent 0 150px,var(--pe-linha-forte) 150px 151px,
   transparent 151px 290px);
 background-position:0 18px;background-repeat:no-repeat}
/* .livrocard e' um <div> (nao <a>): a capa ja e' seu proprio link para a
   Amazon (capa_html — regra 4 do parecer juridico), entao o titulo/legenda
   precisa ser um <a> IRMAO para a pagina interna, nunca aninhado dentro do
   link da capa (HTML invalido). */
.livrocard{height:260px;overflow:hidden;display:flex;flex-direction:column}
/* SO' a altura da capa e' fixa (150px) — a largura vem do cartao, que por
   sua vez vem da coluna do grid (repeat(auto-fill,minmax(150px,1fr))): a
   mesma regra de capa_html()/.capa, aplicada aqui de novo porque este e'
   o unico lugar onde a coluna pode alargar alem do minimo (1fr). */
.livrocard .capa{height:150px}
/* 22px, nao 42: os 42 existiam para o titulo comecar 24px DEPOIS do fim da
   tabua de madeira, que ocupava 150-168. A tabua virou uma regua de 1px em
   150, entao o respiro volta a ser respiro tipografico. */
.livrocard .legenda{flex:1;padding-top:22px;overflow:hidden;display:block;
 text-decoration:none;color:inherit}
/* Titulo centralizado sob a capa, altura reservada para 2 linhas SEMPRE
   (37,68px calculado a .92rem/1.28 * 2 linhas, arredondado para 38px) —
   com 1 linha ou 2, tudo que vem depois (autor, nota, dizeres) comeca na
   MESMA altura em qualquer cartao da fileira. line-clamp corta com
   reticencias onde suportado; height+overflow e' o fallback onde nao. */
/* padding/border ZERADOS: a regra global de h2 tras `padding-bottom:6px` e
   `border-bottom:1px solid var(--linha)`, e o cartao da grade usa <h2> desde
   a correcao de nivel de heading (A2, 13/08). Resultado: um filete cinza
   atravessava cada cartao entre o titulo e a autoria, sem funcao nenhuma.
   Nos trilhos da home isso nao aparecia porque la o titulo e' <h3>. E' o
   preco de reusar seletor de elemento em componente — o componente herda o
   que a folha global decidiu para a pagina inteira. */
.livrocard h2{font-size:var(--t3);margin:0 0 2px;padding:0;border:0;
 font-weight:600;line-height:1.28;
 height:38px;overflow:hidden;text-align:center;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* DUAS linhas, nao uma. Com `white-space:nowrap` + reticencia, 41 dos 110
   cartoes de /idade/4-anos/ cortavam o credito no meio da palavra
   ("Ilan Brenman - il. Guilher..."). Cortar o sobrenome de quem ilustrou um
   livro nao e' economia de espaco, e' credito errado com cara de estilo —
   o mesmo defeito que o titular apontou na sinopse, um paragrafo acima.
   O que cabe em duas linhas quem garante nao e' este CSS: e' o
   LARGURA_CARTAO de creditos.py, que DEGRADA o credito (tira o ilustrador,
   depois vira "Fulano e outros") antes de deixar o navegador cortar. */
.livrocard .au{font-family:var(--sans);font-size:var(--t2);color:var(--mudo);margin:0 0 3px;
 line-height:1.32;text-align:center;overflow:hidden;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.livrocard .nt{font-family:var(--sans);font-size:var(--t2);font-weight:700;color:var(--verde);
 margin:0 0 3px;text-align:center}
.livrocard .tr{font-size:var(--t2);color:var(--tinta2);margin:0;line-height:1.3;
 text-align:center;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── grade compacta de idades (home, faixas fora de bebe/1/2/3 anos) ──── */
.grade-idades-compacta{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
 gap:10px;margin-top:6px;list-style:none;padding:0}
.grade-idades-compacta a{display:block;background:#fff;border:1px solid var(--linha);
 border-radius:8px;padding:11px 14px;text-decoration:none;color:var(--tinta)}
.grade-idades-compacta a:hover{border-color:var(--destaque)}
.grade-idades-compacta .n{font-family:var(--sans);font-weight:700;font-size:var(--t4)}
.grade-idades-compacta .d{font-family:var(--sans);font-size:var(--t2);color:var(--mudo)}

/* ── pagina de livro: capa grande a esquerda, informacao a direita ────── */
.livro-lyt{display:flex;gap:34px;flex-wrap:wrap;align-items:flex-start}
/* coluna com largura fixa (240px) — aqui e' um item so, nao uma grade, e a
   .capa (so' com altura fixa, 252px, ver capa_html()/.capa) enche 100% da
   coluna: mesma regra "so' um lado fixo", so' que o lado que vem de fora e'
   uma largura de coluna fixa em vez de uma largura de grid variavel. */
.livro-lyt .col-capa{flex:0 0 240px}
.livro-lyt .col-capa .capa{height:252px}
.livro-lyt .col-info{flex:1 1 380px;min-width:280px}
.livro-lyt h1{margin-top:0}
/* .nota-grande (o numero em corpo 56) SAIU em 08/09/2026. No lugar, um selo
   de faixa: mesma posicao, um terco do peso visual. A hierarquia da pagina
   muda de proposito — o elemento com maior destaque tipografico passa a ser
   a janela etaria, que e' a pergunta que so' este site responde. */
.faixa-selo{display:flex;align-items:center;gap:10px;margin:16px 0 4px;
 flex-wrap:wrap}
.faixa-selo .fx{font-family:var(--sans);font-size:var(--t3);font-weight:700;
 letter-spacing:.01em;padding:4px 11px;border-radius:999px;
 border:1px solid var(--linha);background:var(--papel2);color:var(--tinta)}
/* A DISTINCAO NAO USA A COR DE ACAO — corrigido no mesmo dia, vendo a tela.
   A primeira versao pintava "Recomendado" com var(--destaque), que e' a cor
   do botao de compra: o selo ficou disputando o olho com a unica coisa da
   pagina que leva para fora, e o proprio kit proibe isso em prosa ("NUNCA a
   cor da acao — isso poria a nota disputando atencao com o botao de compra").
   Um selo de curadoria com a cor de "comprar" tambem sugere que recomendar e'
   vender, que e' exatamente o que este site nao quer afirmar.
   Sobram peso e estilo, e a cor de marca vem do kit. Nenhum dos tres e' o
   unico sinal: o texto do selo ja diz qual faixa e' — daltonismo e impressao
   em preto e branco continuam legiveis, mesma regra da regua de lastro. */
.faixa-selo.faixa-ress .fx{border-style:dashed;color:var(--mudo)}
.faixa-selo .conf{font-family:var(--sans);font-size:var(--t2);color:var(--mudo)}
/* A RAZAO DA JANELA, logo abaixo do painel de idade. Recuo e barra a
   esquerda: e' comentario sobre o painel de cima, nao um bloco novo. */
.razao-janela{font-size:var(--t3);line-height:1.5;color:var(--tinta);
 margin:10px 0 18px;padding:2px 0 2px 14px;border-left:3px solid var(--linha)}
.razao-janela b{font-family:var(--sans);font-size:var(--t2);
 letter-spacing:.02em;text-transform:uppercase;color:var(--mudo);
 display:block;margin-bottom:3px}
/* ── O GUIA DA PAGINA DE IDADE (08/09/2026) ──────────────────────────────
   Deliberadamente NAO e' uma grade. A grade responde "o que existe"; o guia
   responde "por onde comecar", e as duas perguntas nao podem ter a mesma
   forma na mesma pagina, ou viram o mesmo bloco duas vezes.
   Lista de linhas largas: capa pequena a esquerda, prosa a direita, medida
   de leitura curta. A prosa e' o ponto — a capa aqui e' referencia, nao
   vitrine. */
.guia{margin:26px 0 34px}
.guia h2{font-size:var(--t5);margin:0 0 6px}
.guia .guia-h2b{font-size:var(--t4);margin:26px 0 6px;color:var(--tinta2)}
.guia-int{font-size:var(--t3);color:var(--tinta2);line-height:1.5;
 max-width:62ch;margin:0 0 16px}
.guia-lista{list-style:none;margin:0;padding:0;display:flex;
 flex-direction:column;gap:18px}
.guia-item{display:flex;gap:16px;align-items:flex-start}
/* As tres que abrem tem capa maior e uma lombada — a diferenca entre "comece
   por estas" e "depois destas" precisa ser visivel sem ler o cabecalho. */
.guia-item--abre{padding-left:14px;border-left:3px solid var(--destaque)}
/* So' a LARGURA aqui. A altura vem do parametro de capa_html(), que a escreve
   inline e vence classe — e que e' tambem a altura pedida a Amazon na URL da
   imagem. Duas fontes para a mesma medida foi o defeito da primeira versao. */
.guia-item .capa-link{flex:0 0 auto}
.guia-item .capa{width:76px}
.guia-item--abre .capa{width:98px}
.guia-txt{flex:1 1 auto;min-width:0}
.guia-txt h3{margin:0;font-size:var(--t4);line-height:1.25}
.guia-txt h3 a{color:var(--tinta);text-decoration:none}
.guia-txt h3 a:hover{color:var(--destaque)}
.guia-meta{margin:3px 0 6px;font-family:var(--sans);font-size:var(--t2);
 color:var(--mudo);line-height:1.35}
.guia-raz{margin:0;font-size:var(--t3);line-height:1.55;color:var(--tinta2);
 max-width:62ch}
@media (max-width:560px){
 .guia-item .capa{width:60px}
 .guia-item--abre .capa{width:76px}
 .guia-item{gap:12px}
}
/* O cabecalho da grade completa. Ele existe para que a grade nao pareca a
   continuacao do guia: muda de pergunta, entao muda de titulo.
   08/09/2026 — o cabecalho virou o BOTAO que abre a grade (<summary>). Os
   links continuam todos no HTML com o <details> fechado: recolher muda a
   primeira tela, nao o que o buscador le nem o que o leitor sem JavaScript
   alcanca. Por isso o estilo do titulo nao muda; muda so' o que ele faz. */
.grade-h{font-size:var(--t5);margin:34px 0 4px}
.grade-tudo{margin:0 0 8px}
.grade-tudo>summary{cursor:pointer;list-style:none;display:block;
 padding:2px 0;border-radius:8px}
.grade-tudo>summary::-webkit-details-marker{display:none}
.grade-tudo>summary:focus-visible{outline:2px solid var(--destaque);
 outline-offset:3px}
.grade-tudo>summary .grade-h{display:inline-block;margin-right:8px}
/* A seta e' a unica coisa que gira; o texto do rotulo diz a contagem, entao
   quem nao enxerga o triangulo ja' sabe o que ha' atras dele. */
.grade-tudo>summary .grade-h::after{content:'▾';font-family:var(--sans);
 font-size:.7em;color:var(--mudo);margin-left:10px;
 display:inline-block;transition:transform .15s}
.grade-tudo[open]>summary .grade-h::after{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){
 .grade-tudo>summary .grade-h::after{transition:none}
}
.grade-int{font-size:var(--t3);color:var(--tinta2);line-height:1.5;
 max-width:62ch;margin:0 0 14px}
/* ── camada editorial do guia (P1, 08/09/2026) ───────────────────────── */
.guia-abre{max-width:62ch;margin:0 0 30px}
.guia-abre h2{font-size:var(--t5);margin:0 0 12px;line-height:1.25}
.guia-abre p{font-size:var(--t3);line-height:1.6;color:var(--tinta2);margin:0 0 12px}
/* A assinatura e a data de revisao sao PROMESSA: a data e' a do texto, nao
   a do build. Data automatica em pagina editorial e' o truque que as fazendas
   de conteudo usam para fingir frescor, e o Adendo nomeia isso. */
.guia-assina{font-family:var(--sans);font-size:var(--t2);color:var(--mudo);
 border-top:1px solid var(--linha);padding-top:10px;margin-top:16px}
/* `.pule-estes`, e NAO `.pular`: `.pular` ja' e' o link de salto para o
   conteudo, escondido fora da tela por CSS de acessibilidade. Batizei a
   secao nova com o mesmo nome e ela sumiu inteira da pagina — o build
   passou, o HTML tinha a secao, e so' olhar a tela mostrou. Nome de classe
   e' espaco compartilhado; conferir tela e' olhar, nao listar elemento. */
.pule-estes{max-width:62ch;margin:34px 0 8px}
.pule-estes h2{font-size:var(--t5);margin:0 0 6px}
.pule-int{font-size:var(--t2);color:var(--mudo);line-height:1.5;margin:0 0 16px}
.pule-estes ul{list-style:none;padding:0;margin:0}
.pule-estes li{border-left:3px solid var(--linha);padding:2px 0 2px 14px;margin:0 0 18px}
.pule-estes li h3{font-size:var(--t4);margin:0 0 4px}
.pule-estes li p{font-size:var(--t3);line-height:1.55;color:var(--tinta2);margin:0}
.pule-alt{margin-top:6px !important;font-family:var(--sans);font-size:var(--t2)}
.perguntas{max-width:62ch;margin:30px 0 8px}
.perguntas h2{font-size:var(--t5);margin:0 0 12px}
.pgt{border-bottom:1px solid var(--linha)}
.pgt>summary{cursor:pointer;list-style:none;padding:12px 0;
 font-family:var(--sans);font-size:var(--t3);color:var(--tinta)}
.pgt>summary::-webkit-details-marker{display:none}
.pgt>summary::after{content:'+';float:right;color:var(--mudo);font-size:1.1em}
.pgt[open]>summary::after{content:'–'}
.pgt>summary:focus-visible{outline:2px solid var(--destaque);outline-offset:2px}
.pgt p{font-size:var(--t3);line-height:1.6;color:var(--tinta2);margin:0 0 14px}
/* A lacuna declarada. Mesma forma da razao, tom de ausencia — nao e' alerta
   (a obra nao tem defeito), e' o site dizendo o que nao olhou. */
.razao-lacuna{font-size:var(--t2);line-height:1.5;color:var(--mudo);
 margin:0 0 18px;padding:2px 0 2px 14px;border-left:3px dashed var(--linha)}
.razao-lacuna b{font-family:var(--sans);font-size:var(--t1);
 letter-spacing:.02em;text-transform:uppercase;color:var(--mudo);
 display:block;margin-bottom:3px}
.porque{background:#fff;border:1px solid var(--linha);border-radius:12px;
 padding:16px 18px;margin:8px 0 20px}
.porque h2{margin:0 0 10px;font-size:var(--t4);color:var(--tinta)}
/* Frase de sintese (nota+confianca+fontes numa frase so) fica ACIMA das
   dimensoes e do parágrafo que explica os pesos — é o resumo para quem não
   vai ler as cinco linhas de baixo. Fundo levemente destacado (papel2) e
   borda esquerda na cor de destaque, mesma linguagem visual de
   .janela-card/.aviso-cobertura (caixa que chama atenção sem virar alerta). */
.porque .sintese{margin:0 0 14px;padding:9px 13px;font-size:var(--t3);
 color:var(--tinta);background:var(--papel2);border-radius:8px;
 border-left:3px solid var(--destaque)}
.porque-intro{margin:0 0 12px;font-size:var(--t3);color:var(--tinta2);line-height:1.45}
/* Uma linha por dimensao (nao mais chip em fileira): a nota da dimensao no
   cabecalho, explicacao do que ela mede logo abaixo — e' o que faz
   "TEXTO 5/5" virar argumento em vez de numero solto. O chip de peso saiu em
   08/09/2026 (ver dims_html): ele publicava 30/30/20/15/5, uma aritmetica
   que o codigo nunca aplicou. */
.dims{display:flex;flex-direction:column;gap:10px;margin:0 0 12px}
.dims .d{background:var(--papel2);border-radius:8px;padding:10px 13px}
.dims .dh{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.dims .dh b{font-family:var(--sans);font-size:var(--t2);letter-spacing:.03em;
 text-transform:uppercase;color:var(--tinta2)}
.dims .nt{margin-left:auto;font-family:var(--serif);font-size:var(--t5);font-weight:700;
 color:var(--tinta)}
.dims .dexp{margin:5px 0 0;font-size:var(--t2);color:var(--tinta2);line-height:1.42}
.fontes-lista{margin:0;padding:0;list-style:none;font-family:var(--sans);
 font-size:var(--t2);color:var(--tinta2)}
.fontes-lista li{padding:3px 0;border-top:1px dotted var(--linha)}
.fontes-lista li:first-child{border-top:0}
.janela-card{background:#fbf3e2;border:1px solid var(--mostarda);border-radius:12px;
 padding:14px 18px;margin:0 0 18px;font-size:var(--t4);color:var(--tinta2)}
.janela-card b{color:var(--tinta)}
.trabalha-card{margin:0 0 18px;font-size:var(--t4);color:var(--tinta2)}
/* Ressalva de autoria: registro de conferencia, nao credito. Sai em sans
   (regra de ouro do kit: serifa e' juizo, sans e' dado) e um degrau abaixo
   do corpo, porque quem quer saber quem escreveu ja leu isso no alto. */
.nota-autoria{margin:0 0 18px;font-family:var(--sans);font-size:var(--t2);
 line-height:1.55;color:var(--tinta2);max-width:64ch;
 border-left:2px solid var(--linha-forte,var(--linha));padding-left:12px}
.nota-autoria b{color:var(--tinta);font-weight:600}
.categorias-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 20px}
.categorias-chips .chip{background:#fff;border:1px solid var(--linha)}

/* ── reforma visual 15/08/2026 ───────────────────────────────────────────
   Diagnóstico: a migração para o kit v1.2 tinha sido feita nos TOKENS (a
   ponte identidade.ALIAS) e não na COMPOSIÇÃO. O site continuava com o
   desenho anterior ao kit: caixa em vez de filete, capa em tamanho de
   miniatura, prateleira desenhada em degradê, cabeçalho repetindo o nome da
   marca, e a assinatura do kit (a régua de lastro) sem aparecer na home.
   Referência de composição: catálogos cuja mercadoria É a arte de capa
   deixam o cromo pequeno e mudo, estruturam por filete de 1px em vez de
   moldura, e não colocam cor nenhuma que compita com a arte.
   ------------------------------------------------------------------- */

/* A assinatura do lockup sai da cor de ação no cabeçalho do site. No papel
   ela é a única linha da peça e pode carregar a cor; numa barra que também
   traz menu e, logo abaixo, um título, o laranja vira o elemento mais alto
   da tela e compete com ele. O kit fica intacto — isto é uso, não marca. */
nav.topo .pe-lockup-assin{color:var(--tinta2)}

/* Menu como GRUPO, não como irmãos soltos da marca. */
nav.topo .links{display:flex;align-items:center;gap:24px}

/* Busca no cabeçalho. Rótulo existe para leitor de tela e some da tela —
   `display:none` NÃO serve: tira o elemento da árvore de acessibilidade,
   que é justamente o que ele existe para ocupar. */
.vis-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
 overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.busca{display:flex;align-items:center;margin-left:22px;
 border:1px solid var(--linha);border-radius:999px;background:var(--creme);
 transition:border-color var(--pe-tempo-1) var(--pe-curva)}
.busca:focus-within{border-color:var(--pe-marca)}
.busca input{border:0;background:transparent;font:inherit;
 font-family:var(--sans);font-size:var(--t2);color:var(--tinta);
 padding:8px 4px 8px 15px;width:18ch;outline:none}
.busca input::placeholder{color:var(--mudo)}
.busca button{border:0;background:transparent;cursor:pointer;color:var(--tinta2);
 padding:8px 13px 8px 6px;display:flex;align-items:center;border-radius:999px}
.busca button:hover{color:var(--destaque)}
/* No celular o lockup sozinho já ocupa a barra inteira, então tentar caber o
   menu na mesma linha só produz quebra torta. Aqui a quebra é DECIDIDA: a
   marca fica numa linha, o menu numa segunda linha própria, separada por um
   filete, com os três itens distribuídos na largura e alvo de toque alto o
   bastante para o dedo (44px é o mínimo recomendado; 13px de padding em cima
   e embaixo mais a altura da linha passa disso).
   640px é o mesmo ponto de corte em que o kit esconde a assinatura verbal do
   lockup — usar outro criaria uma faixa de larguras com meia-decisão. */
@media(max-width:640px){
 nav.topo .wrap{flex-direction:column;align-items:stretch;gap:0;
  padding-top:12px;padding-bottom:0}
 nav.topo a.marca{margin:0 0 12px}
 /* align-self:stretch e' obrigatorio aqui, nao enfeite: identidade.CORRECOES
    tras `nav.topo .wrap{align-items:center}` e vem DEPOIS deste bloco na
    cascata, entao em coluna o grupo encolhia para o tamanho do conteudo e
    centralizava — o `space-between` nao tinha largura para distribuir e o
    filete ficava mais curto que a marca logo acima. Medido: o primeiro link
    comecava em 67px com a marca em 17px. */
 /* Com o quarto item (Prateleiras) os rotulos somam ~308px e nao cabem em
    360px de tela com folga. Em vez de encolher a letra ou abreviar nome de
    secao, a fileira ROLA — mesmo gesto do seletor de idade, e o corte fica
    obvio porque ela sangra ate a borda. */
 nav.topo .links{align-self:stretch;justify-content:flex-start;gap:20px;
  border-top:1px solid var(--linha);overflow-x:auto;
  scrollbar-width:none;margin:0 -16px;padding:0 16px}
 nav.topo .links::-webkit-scrollbar{display:none}
 nav.topo .links a{padding:13px 0;flex:0 0 auto;white-space:nowrap}
 .busca{align-self:stretch;margin:0 0 12px;order:-1}
 .busca input{width:100%;flex:1}
}

/* masthead da home: uma linha editorial, não o nome da marca outra vez */
/* 40px, nao 56: medido, a primeira capa caia em 798px numa janela de 900 e
   so' a borda de cima do livro aparecia. Espaco em cima e' sinal de cuidado
   ate' o ponto em que ele empurra a mercadoria para fora da tela. */
.masthead{padding:40px 0 4px}
.masthead .lede{font-family:var(--titulo);font-weight:700;
 font-size:clamp(1.9rem,1.1rem+2.4vw,2.9rem);line-height:1.07;
 letter-spacing:-.005em;color:var(--pe-marca);max-width:22ch;margin:0 0 20px;
 text-wrap:balance}
.masthead .lede em{font-style:normal;color:var(--destaque)}
.masthead .diz{font-size:var(--t4);color:var(--tinta2);max-width:56ch;margin:0}

/* eyebrow + título de seção: substitui o h2 sublinhado em caixa */
.secao{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;
 padding-bottom:14px;margin:0 0 18px;border-bottom:1px solid var(--linha)}
.secao .st{flex:1;min-width:260px}
/* .olho e' classe propria, nao filha de .secao: a faixa do metodo usa o
   mesmo versalete e fica FORA de .secao. Aninhar a regra fez o versalete
   sair em serifa minuscula la, que e' o oposto do que ele existe para ser. */
.olho{display:block;font-family:var(--sans);font-weight:600;
 font-size:var(--t1);letter-spacing:.10em;text-transform:uppercase;
 color:var(--tinta2);margin:0 0 8px}
.secao h2{margin:0;padding:0;border:0;font-family:var(--titulo);
 font-size:var(--t7);color:var(--pe-marca);line-height:1.1}
.secao .sub2{font-family:var(--sans);font-size:var(--t2);color:var(--tinta2);
 margin:8px 0 0}
.secao .verall{margin-left:auto;font-family:var(--sans);font-size:var(--t3);
 font-weight:600;color:var(--destaque);text-decoration:none;
 border-bottom:1px solid transparent;white-space:nowrap;padding-bottom:2px}
.secao .verall:hover{border-color:var(--destaque)}

/* ── índice por idade: a FORMA da coleção ────────────────────────────────
   Onze caixas brancas idênticas descreviam o acervo sem informar nada. A
   barra é proporcional à contagem, então a página mostra de cara o que a
   medição de 15/08 apurou: a curadoria mora na primeira infância. Faixa
   rala sai em cor de AUSÊNCIA (nunca vermelha — ausência não é veredito). */
.ix{display:block;margin:0;padding:0;list-style:none}
.ix a{display:grid;grid-template-columns:minmax(0,13ch) minmax(0,11ch) 1fr 5ch;
 align-items:center;gap:16px;padding:12px 0;text-decoration:none;
 border-bottom:1px solid var(--linha);color:inherit}
.ix a:hover{background:var(--papel2)}
.ix .r{font-family:var(--titulo);font-weight:700;font-size:var(--t4);
 color:var(--pe-marca)}
.ix .m{font-family:var(--sans);font-size:var(--t2);color:var(--tinta2);
 font-variant-numeric:tabular-nums}
.ix .b{display:block;height:6px;background:var(--linha);border-radius:999px;
 overflow:hidden}
.ix .b i{display:block;height:100%;background:var(--pe-marca);opacity:.55;
 border-radius:999px}
.ix a:hover .b i{opacity:.85}
.ix a[data-alto] .b i{background:var(--destaque);opacity:.8}
.ix a[data-rala] .b i{background:var(--mudo);opacity:.35}
.ix a[data-rala] .r{color:var(--tinta2)}
.ix .n{font-family:var(--sans);font-variant-numeric:tabular-nums;font-weight:600;
 font-size:var(--t3);text-align:right;color:var(--tinta)}
.ix a[data-rala] .n{color:var(--mudo)}
.ix-pe{font-family:var(--sans);font-size:var(--t2);color:var(--tinta2);
 margin:16px 0 0;max-width:70ch}

/* ── faixa do método: largura da página, e a assinatura do kit em uso ──── */
.faixa-metodo{margin:64px 0 0;background:var(--papel2);
 border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.faixa-metodo .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;
 padding-top:56px;padding-bottom:56px;align-items:start}
.faixa-metodo h2{margin:6px 0 16px;padding:0;border:0;font-family:var(--titulo);
 font-size:var(--t7);color:var(--pe-marca);line-height:1.1}
.faixa-metodo p{font-size:var(--t4);color:var(--tinta);max-width:52ch;margin:0 0 16px}
.faixa-metodo p.men{color:var(--tinta2);font-size:var(--t3)}
.faixa-metodo .demo{background:var(--creme);border:1px solid var(--linha);
 border-radius:12px;padding:22px;box-shadow:var(--sombra)}
.faixa-metodo .demo .dt{font-family:var(--titulo);font-weight:700;font-size:var(--t4);
 color:var(--pe-marca);margin:0 0 2px}
.faixa-metodo .demo .da{font-family:var(--sans);font-size:var(--t2);
 color:var(--tinta2);margin:0 0 18px}
.faixa-metodo .demo .leg{font-family:var(--sans);font-size:var(--t2);
 color:var(--tinta2);margin:18px 0 0;line-height:1.5}
/* A regua do kit nasceu para uma coluna estreita (rotulo | trilho | nota
   curta). Aqui a terceira celula carrega "sem evidencia", que e' texto, nao
   numero — com a coluna em `auto` ela era espremida junto com as outras e a
   frase vazava para fora da celula, encostando na borda do cartao.
   A terceira coluna e' LARGURA FIXA, nao `auto` nem `max-content`: cada
   linha e' um grid PROPRIO (display:grid esta na linha, nao na regua), entao
   coluna dimensionada por conteudo da largura diferente em cada linha — e a
   linha vazia, cujo texto e' o mais longo, ficava com o trilho mais CURTO
   que as outras. Trilho curto e' exatamente o que o kit proibe: dimensao sem
   evidencia se desenha VAZIA, nunca curta, ou o desenho volta a dizer "vale
   menos" onde deveria dizer "nao sabemos". 7,5em cabe "sem evidencia" e
   iguala os cinco trilhos. Vale so' dentro de .faixa-metodo — a pagina de
   livro usa a regua na largura para a qual o kit a desenhou. */
.faixa-metodo .pe-lastro{max-width:none}
.faixa-metodo .pe-lastro-linha{grid-template-columns:9.5em minmax(40px,1fr) 7.5em;
 gap:14px;padding:3px 0}
.faixa-metodo .pe-lastro-valor{white-space:nowrap;text-align:right}

/* ── ação de compra ──────────────────────────────────────────────────────
   O projeto se remunera por comissão de afiliado, então a ação PRECISA ser
   encontrável. O que ele NÃO pode usar, e é bom estar escrito onde alguém
   vá reler: preço no site (o contrato do Programa de Associados proíbe),
   contagem regressiva, "últimas unidades", "só hoje" e qualquer prova
   social inventada — não há dado de estoque nem de prazo nesta base, e
   fabricar um seria mentira. Sobra a alavanca legítima, que por acaso é a
   mais forte aqui: esta é a única página do mundo que responde "serve para
   a MINHA criança, agora?". A ação converte no instante em que essa dúvida
   fecha, então o trabalho é POSICIONAR a ação nesse instante — não gritar.

   O botão herda .acao (já existente) e ganha só presença: mais alto, mais
   largo, com a seta e uma reação física ao toque. */
.acao{padding:14px 26px;font-size:var(--t3);border-radius:999px;
 box-shadow:0 1px 2px rgba(90,55,25,.14);
 transition:background var(--pe-tempo-1) var(--pe-curva),
  transform var(--pe-tempo-1) var(--pe-curva),
  box-shadow var(--pe-tempo-1) var(--pe-curva)}
.acao:hover{transform:translateY(-1px);box-shadow:0 3px 6px rgba(90,55,25,.20)}
.acao:active{transform:translateY(1px);box-shadow:none}

/* Ação ao lado da capa: ocupa a largura da coluna, para ser um alvo e não
   um link perdido. O selo fica embaixo, centralizado com ela. */
.compra-topo{display:flex;flex-direction:column;align-items:center;gap:9px;
 margin:16px 0 0}
/* nowrap + padding menor: a coluna tem 240px e o rotulo inteiro cabe em ~204
   (16px de letra, mais a seta e o respiro). Sem isto o texto quebrava em duas
   linhas com a seta boiando na direita, que e' o oposto de um alvo claro. */
.compra-topo .acao{width:100%;justify-content:center;text-align:center;
 display:flex;align-items:center;gap:.45em;margin-top:0;
 padding-left:14px;padding-right:14px;white-space:nowrap}

.linha-acao .acao{margin-top:0}

/* ── barra de compra do celular ──────────────────────────────────────────
   Só existe abaixo de 720px e só depois que a capa sai da tela (ver o
   IntersectionObserver em pagina_livro). Fina de propósito: 1px de filete
   em cima, sem sombra pesada, sem animação de entrada — é um atalho para
   quem já decidiu, não um pop-up. Leva o selo 'publicidade' DENTRO dela,
   porque o CONAR pede identificação junto do link e o selo do topo já
   rolou para fora da tela. */
.barra-compra{display:none}
@media(max-width:720px){
 /* No celular a coluna da capa e' travada em 180px (regra de .livro-lyt),
    entao o botao do topo quebrava "Ver preco / na Amazon" em duas linhas com
    a seta solta na direita. E ele seria redundante: abaixo de 720px quem faz
    esse trabalho e' a barra fixa, que aparece no primeiro rolar. Some aqui,
    fica no desktop — onde nao ha barra e a coluna tem 240px. */
 .compra-topo{display:none}
 .barra-compra{display:flex;align-items:center;gap:14px;
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--creme);border-top:1px solid var(--linha-forte,var(--linha))}
 .barra-compra[hidden]{display:none}
 .bc-obra{flex:1;min-width:0;line-height:1.25}
 .bc-obra b{display:block;font-family:var(--titulo);font-size:var(--t3);
  color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .bc-obra span{display:block;font-family:var(--sans);font-size:var(--t1);
  color:var(--mudo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .bc-acao{display:flex;flex-direction:column;align-items:center;gap:3px}
 .bc-acao .acao{margin:0;padding:11px 18px;white-space:nowrap}
 .bc-acao .marca-publi{padding:1px 7px;font-size:.62rem;border:0;
  background:transparent;color:var(--mudo)}
 /* o rodapé não pode terminar embaixo da barra */
 body.com-barra{padding-bottom:76px}
}

/* ── seletor de idade: a travessia inteira, no alto da página ───────────
   Fileira rolável em vez de quebra de linha: com 11 faixas, quebrar produz
   três linhas de pílulas e o bloco começa a competir com a grade que vem
   logo abaixo. As margens negativas fazem a fileira sangrar até a borda da
   tela no celular, para o corte da rolagem não parecer defeito de layout.
   A faixa ATUAL não é link (é <span>) — link para a própria página é ruído
   para leitor de tela e para quem clica por engano. */
.seletor{margin:0 0 22px}
.seletor .olho{margin:0 0 10px}
.seletor ul{display:flex;gap:8px;list-style:none;margin:0;padding:2px 24px 12px;
 overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--linha) transparent;
 margin-left:-24px;margin-right:-24px}
.seletor ul::-webkit-scrollbar{height:6px}
.seletor ul::-webkit-scrollbar-thumb{background:var(--linha);border-radius:999px}
.seletor .op{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap;
 font-family:var(--sans);font-size:var(--t3);text-decoration:none;
 color:var(--tinta2);background:var(--creme);
 border:1px solid var(--linha);border-radius:999px;padding:8px 15px}
.seletor a.op:hover{border-color:var(--destaque);color:var(--tinta)}
.seletor .op i{font-style:normal;font-size:var(--t1);font-weight:700;
 font-variant-numeric:tabular-nums;color:var(--mudo)}
.seletor .op.atual{background:var(--pe-marca);border-color:var(--pe-marca);
 color:var(--pe-sobre-marca);font-weight:600}
.seletor .op.atual i{color:var(--pe-sobre-marca);opacity:.75}

/* ── rodapé: três colunas regradas, não três parágrafos cinzas ─────────── */
footer .cols{display:grid;grid-template-columns:1.1fr .8fr .8fr 1.4fr;gap:44px}
footer h3{font-family:var(--sans);font-size:var(--t1);font-weight:600;
 letter-spacing:.10em;text-transform:uppercase;color:var(--tinta2);margin:0 0 14px}
/* O arquivo da assinatura traz a area de respiro DENTRO dele — medido no PNG,
   a tinta ocupa (120,55)-(1514,384) de 1600x440, ou seja 7,5% de margem a
   esquerda e 12,5% em cima. Encostado no grid como imagem crua, ele parecia
   recuado e flutuando enquanto as outras colunas comecavam na linha de cima.
   As margens negativas em porcentagem da PROPRIA largura da imagem cancelam
   exatamente essa area de respiro, entao a tinta alinha com o texto das
   outras colunas em qualquer largura de tela. Porcentagem de margem vertical
   tambem se resolve sobre a largura do container em CSS — por isso o valor de
   cima e' 12,5% de 440/1600 = 3,44%. */
footer .fassin{overflow:hidden}
footer .fassin img{display:block;width:100%;max-width:306px;height:auto;
 margin:-3.44% 0 -3.5% -7.5%}
footer ul{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:var(--t3)}
footer li{margin:0 0 9px}
footer li a{text-decoration:none;color:var(--tinta2)}
footer li a:hover{color:var(--destaque)}
footer .dec{font-family:var(--sans);font-size:var(--t2);line-height:1.6;
 color:var(--tinta2);margin:0 0 12px;max-width:48ch}

@media(max-width:820px){
 .faixa-metodo .wrap{grid-template-columns:1fr;gap:32px}
 footer .cols{grid-template-columns:1fr;gap:32px}
 .ix a{grid-template-columns:minmax(0,10ch) 1fr 4ch}
 .ix .m{display:none}
}

@media(max-width:600px){h1{font-size:var(--t7)}.wrap{padding:0 16px 60px}
 /* mobile: col-capa ganha a linha toda (flex-basis:100%) mas fica com
    max-width contido (180px) e centralizada — a .capa continua so' com
    altura fixa (189px) e enche esses 180px, nunca os dois fixos nela. */
 .livro-lyt .col-capa{flex-basis:100%;max-width:180px;margin:0 auto}
 .livro-lyt .col-capa .capa{height:189px}}

.expl{display:grid;grid-template-columns:250px 1fr;gap:32px;align-items:start}
@media (max-width:860px){.expl{grid-template-columns:1fr;gap:0}}
.expl-busca{position:relative;margin:0 0 22px}
.expl-busca input{width:100%;box-sizing:border-box;padding:13px 15px 13px 42px;
 font:inherit;font-size:1rem;border:2px solid var(--pe-linha-forte);border-radius:10px;
 background:var(--pe-papel);color:var(--pe-tinta)}
.expl-busca input:focus{outline:3px solid var(--pe-acao);outline-offset:1px;border-color:var(--pe-acao)}
.expl-busca svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
 width:18px;height:18px;opacity:.55;pointer-events:none}
.expl-painel{border:1px solid var(--pe-linha);border-radius:12px;padding:18px 16px;
 background:var(--pe-papel);position:sticky;top:16px}
.expl-grupo{margin:0 0 20px}
.expl-grupo:last-child{margin-bottom:0}
.expl-grupo h3{font-family:var(--pe-fonte-corpo);font-size:.74rem;letter-spacing:.09em;
 text-transform:uppercase;color:var(--pe-acao);margin:0 0 9px;font-weight:700}
.expl-op{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:.92rem;cursor:pointer}
.expl-op input{width:16px;height:16px;accent-color:var(--pe-acao);flex:none}
.expl-op .ct{margin-left:auto;font-family:var(--pe-fonte-dado);font-size:.78rem;
 font-variant-numeric:tabular-nums;color:var(--pe-acao);opacity:.75}
.expl-op[data-vazio="1"]{opacity:.42;cursor:not-allowed}
.expl-idade{width:100%;padding:9px 10px;font:inherit;font-size:.94rem;
 border:1px solid var(--pe-linha-forte);border-radius:8px;background:var(--pe-papel);color:var(--pe-tinta)}
.expl-limpar{margin-top:6px;background:none;border:none;padding:0;font:inherit;font-size:.86rem;
 color:var(--pe-acao);text-decoration:underline;cursor:pointer}
.expl-resumo{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.expl-resumo b{font-family:var(--pe-fonte-dado);font-variant-numeric:tabular-nums;font-size:1.5rem}
.expl-vazio{border:2px dashed var(--pe-ausencia);border-radius:12px;padding:20px;margin:0 0 22px}
.expl-vazio h2{margin:0 0 8px;font-size:1.12rem}
.expl-vazio p{margin:0 0 8px}
.expl-abre{display:none}
@media (max-width:860px){
 .expl-abre{display:flex;align-items:center;gap:8px;width:100%;justify-content:center;
  padding:12px;margin:0 0 16px;font:inherit;font-weight:700;border:2px solid var(--pe-linha-forte);
  border-radius:10px;background:var(--pe-papel);color:var(--pe-tinta);cursor:pointer}
 .expl-abre .ct{font-family:var(--pe-fonte-dado);background:var(--pe-acao);color:var(--pe-papel);
  border-radius:999px;padding:1px 8px;font-size:.8rem}
 .expl-painel{position:static;display:none;margin:0 0 18px}
 .expl-painel[data-aberto="1"]{display:block}
}
.expl-grade .capa{display:block;position:relative;margin:0 0 8px}
.expl-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:24px 14px}
.expl-grade .cardcapa{flex:none;width:100%}

/* 15/08/2026: era um cartao de borda grossa e canto arredondado, e na
   primeira tela ele lia como caixa de alerta — a mesma forma que o site usa
   para aviso de cobertura. Vira uma LINHA entre dois filetes: o convite
   continua sendo o elemento mais importante da tela sem precisar de moldura,
   e o peso volta para o titulo, que e' quem deve carrega-lo. */
.pc{border-top:1px solid var(--pe-linha);border-bottom:1px solid var(--pe-linha);
 padding:26px 0 24px;margin:0 0 8px;background:transparent}
.pc h2{margin:0 0 4px;font-family:var(--pe-fonte-titulo);font-size:1.45rem;
 color:var(--pe-marca)}
.pc .pc-ex{margin:0 0 16px;color:var(--pe-tinta-suave);font-size:.95rem}
.pc-linha{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.pc-campo{display:flex;flex-direction:column;gap:5px}
.pc-campo span{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
 color:var(--pe-tinta-suave);font-weight:700}
.pc select{padding:11px 12px;font:inherit;font-size:1rem;border:1px solid var(--pe-linha-forte);
 border-radius:9px;background:var(--pe-papel);color:var(--pe-tinta);min-width:116px}
.pc-ir{padding:12px 24px;font:inherit;font-size:1rem;font-weight:700;border:none;border-radius:9px;
 background:var(--pe-acao);color:var(--pe-papel);cursor:pointer}
.pc-ir:disabled{opacity:.45;cursor:not-allowed}
.pc-nasce{display:flex;align-items:center;gap:7px;font-size:.9rem;margin:12px 0 0;cursor:pointer}
/* A nota de privacidade cresceu de uma linha para quatro (15/08/2026) porque
   a versao curta afirmava menos do que da' para afirmar aqui — e a promessa
   forte e' VERIFICAVEL: nenhuma requisicao da pagina carrega a data. O que
   ela NAO pode dizer e' "nao fica armazenado", que seria falso: fica em
   localStorage, no aparelho, e e' exatamente por isso que existe o botao
   "trocar". Medida antes de escrever: a pagina faz dois `fetch`, os dois GET
   de arquivo estatico da propria origem (/dados/acervo.json e
   /dados/prateleiras.json), sem corpo e sem parametro; localStorage aparece
   tres vezes (ler, gravar, apagar); zero cookie, zero beacon, zero script de
   terceiro. Se algum dia entrar medicao no site, esta frase muda ANTES.

   MEDIDO DE NOVO EM 08/09/2026, porque a medicao entrou. O site passou a
   carregar o beacon do Cloudflare Web Analytics no fim do <body> — entao
   "zero beacon" acima descreve o estado ATE 08/09 e nao vale mais. A frase
   da tela mudou junto, e mudou ANTES do beacon subir: onde dizia "nao entra
   em medicao nenhuma" agora diz "nao entra na medicao de audiencia do site".
   A diferenca nao e' cosmetica. A afirmacao sobre a DATA continua verdadeira
   e continua sendo a que importa aqui — ela nao sai do aparelho, nao vira
   cookie, nao e' medida. O que deixou de ser verdade e' a leitura mais larga
   que a frase antiga permitia, a de que o site nao mede nada. */
.pc-priv{margin:16px 0 0;font-size:.84rem;line-height:1.55;
 color:var(--pe-tinta-suave);display:flex;gap:8px;align-items:flex-start;
 max-width:64ch}
.pc-priv b{color:var(--pe-tinta)}
.pc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0}
.pc-chip{padding:9px 14px;font:inherit;font-size:.92rem;border:1.5px solid var(--pe-linha-forte);
 border-radius:999px;background:var(--pe-papel);color:var(--pe-tinta);cursor:pointer}
.pc-chip:hover{border-color:var(--pe-acao)}
.pc-chip[data-pular="1"]{border-style:dashed;color:var(--pe-acao)}
.pc-fita{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:0 0 26px;
 padding:10px 14px;border-left:4px solid var(--pe-acao);border-radius:0 9px 9px 0;
 background:color-mix(in srgb,var(--pe-acao) 8%,var(--pe-papel));font-size:.95rem}
.pc-fita b{font-family:var(--pe-fonte-dado)}
.pc-fita button{background:none;border:none;padding:0;font:inherit;font-size:.9rem;
 color:var(--pe-acao);text-decoration:underline;cursor:pointer}
.pc-saidas{display:flex;flex-wrap:wrap;gap:18px;align-items:baseline;margin:10px 0 34px}
.pc-saidas button{background:none;border:none;padding:0;font:inherit;font-size:.92rem;
 color:var(--pe-acao);text-decoration:underline;cursor:pointer}
.pc-vazio{border:2px dashed var(--pe-ausencia);border-radius:12px;padding:18px;margin:0 0 22px}
.pc-vazio h3{margin:0 0 7px;font-size:1.05rem}
@media (max-width:560px){.pc{padding:18px 16px}.pc-linha{gap:8px}.pc select{min-width:0;flex:1}
 .pc-ir{width:100%;margin-top:4px}}

/* ── hub de prateleiras ─────────────────────────────────────────────────
   Cartão de prateleira: quatro capas em leque + contagem + título. A
   contagem vem ANTES do título de propósito — é ela que impede a etiqueta
   de prometer no vazio: quem clica em "Premiados" já sabe que vai achar 42,
   não "vários".

   `.rec-card` é <div>, nunca <a>. capa_html() já devolve um <a>, e <a>
   dentro de <a> é HTML inválido: o parser fecha o de fora antes do de
   dentro e o leque desmonta em quatro capas verticais de largura cheia
   (aconteceu aqui na primeira tentativa, 16/08/2026). O link do texto é
   IRMÃO dos links das capas — mesma regra que .livrocard já documenta. */
.grade-recortes{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
 gap:34px 30px;margin:0;padding:0;list-style:none}
.rec-card{border-bottom:1px solid var(--linha);padding:0 0 22px;height:100%}
.rec-pilha{display:flex;align-items:flex-end;height:126px;margin:0 0 15px;
 padding-left:14px}
.rec-pilha .capa-link{flex:0 0 auto;width:76px;margin-left:-14px;
 position:relative;z-index:1}
.rec-pilha .capa-link:nth-child(2){z-index:2}
.rec-pilha .capa-link:nth-child(3){z-index:3}
.rec-pilha .capa-link:nth-child(4){z-index:4}
.rec-pilha .capa{height:112px;transition:transform var(--pe-tempo-2) var(--pe-curva)}
.rec-card:hover .rec-pilha .capa{transform:translateY(-6px)}
/* o leque é decoração: dentro dele a reserva tipográfica só atrapalha */
.rec-pilha .capa .fb{font-size:.52rem;padding:6%}
.rec-pilha .capa .fb span{display:none}
.rec-txt{display:block;text-decoration:none;color:inherit}
.rec-txt .cnt{display:block;font-family:var(--sans);font-size:var(--t1);
 font-weight:700;letter-spacing:.09em;text-transform:uppercase;
 color:var(--mudo);margin:0 0 6px}
.rec-txt h3{font-family:var(--titulo);font-size:var(--t5);margin:0 0 7px;
 color:var(--pe-marca);line-height:1.15}
.rec-txt .dz{display:block;font-size:var(--t3);color:var(--tinta2);
 line-height:1.5;max-width:44ch}
.rec-card:hover .rec-txt h3{color:var(--destaque)}

/* nota de método no alto da página de um recorte */
.rec-porque{background:var(--papel2);border-left:3px solid var(--pe-marca);
 border-radius:0 10px 10px 0;padding:15px 19px;margin:0 0 28px;
 font-size:var(--t3);color:var(--tinta2);max-width:72ch;line-height:1.55}
.rec-porque b{color:var(--tinta)}

.cl-carimbo{font-size:.82rem;color:#6b6b6b;margin:.4rem 0 0;letter-spacing:.01em}

/* ── a estante de lombadas ───────────────────────────────────────────────
   O unico desenho desta pagina, e ele nao e' imagem: cinco <a> com cor,
   altura e largura variaveis, mais uma tabua de madeira em degrade. Zero
   requisicao de rede, zero licenca de terceiro.

   `align-items:flex-end` e' o que faz a coisa parecer estante: os pes das
   lombadas encostam na tabua e as alturas divergem por cima, como volumes de
   verdade. Alinhadas pelo topo, o bloco leria como grafico de barras — que e'
   precisamente o que uma pagina sobre livro nao deve parecer.

   ALINHADA A ESQUERDA, nao centralizada: a coluna de leitura deste site e'
   alinhada a esquerda, e com os volumes centralizados o desenho lia como
   "sobraram cinco livros numa estante grande" em vez de "esta e' a estante". */
.cl-estante{position:relative;display:inline-flex;align-items:flex-end;
  gap:.5rem;height:13.5rem;margin:1.4rem 0 2.2rem;padding:0 1.6rem .6rem 0}
.cl-tabua{position:absolute;left:-.7rem;right:0;bottom:0;height:.6rem;
  border-radius:1px;
  background:linear-gradient(180deg,#c9a882 0%,#a8845c 40%,#8a6a45 100%);
  box-shadow:0 2px 0 #6f5439, 0 5px 8px rgba(0,0,0,.16)}
.cl-lomb{position:relative;display:flex;align-items:center;justify-content:center;
  width:var(--larg);height:var(--alt);border-radius:2px 2px 0 0;
  background:var(--c);text-decoration:none;
  box-shadow:inset -6px 0 10px -6px rgba(0,0,0,.45),
             inset 5px 0 0 -3px rgba(255,255,255,.22),
             0 1px 3px rgba(0,0,0,.2);
  transition:transform .18s cubic-bezier(.34,1.4,.5,1)}
.cl-lomb::before{content:'';position:absolute;left:0;right:0;top:.5rem;height:1px;
  background:rgba(255,255,255,.32)}
.cl-lomb::after{content:'';position:absolute;left:0;right:0;bottom:.5rem;height:1px;
  background:rgba(255,255,255,.32)}
.cl-lomb:hover,.cl-lomb:focus{transform:translateY(-9px)}
/* Sem overflow:hidden, e de proposito. Corte por CSS e' silencioso: o quinto
   clube saiu no ar como "Clubinho Coracoes Pr" e nada acusou. Quem mede se o
   nome cabe agora e' confere_lombada_cabe(), que QUEBRA o build. */
.cl-lnome{writing-mode:vertical-rl;transform:rotate(180deg);color:#fff;
  font-size:.8rem;font-weight:600;letter-spacing:.02em;line-height:1;
  white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.3)}
@media(max-width:560px){
  .cl-estante{height:11.5rem;gap:.35rem;padding-right:1rem}
  .cl-lomb{width:calc(var(--larg) * .8)}
  .cl-lnome{font-size:.68rem}}

/* veredito — a ancora da pagina */
.cl-vgrid{display:grid;gap:.6rem;margin:1.1rem 0 1.8rem}
@media(min-width:640px){.cl-vgrid{grid-template-columns:1fr 1fr}}
.cl-v{display:block;text-decoration:none;color:inherit;padding:.75rem .9rem;
  border:1px solid #e4e4e4;border-left:5px solid var(--c);border-radius:3px;
  background:#fff;transition:background .12s}
.cl-v:hover,.cl-v:focus{background:#fafafa}
.cl-vsit{display:block;font-size:.82rem;color:#5a5a5a;margin-bottom:.2rem}
.cl-vnome{display:block;color:var(--c);font-size:1.02rem;line-height:1.25}
.cl-vpor{display:block;font-size:.88rem;color:#3d3d3d;margin-top:.2rem}

/* cartao de clube */
.cl-card{margin:2.4rem 0;padding:1.1rem 0 0;border-top:3px solid var(--c)}
.cl-top{display:flex;gap:.75rem;align-items:flex-start}
.cl-ini{flex:0 0 auto;width:2.4rem;height:2.4rem;border-radius:2px;
  background:var(--c);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:1.35rem;font-weight:700;line-height:1;
  box-shadow:inset -4px 0 7px -4px rgba(0,0,0,.45)}
.cl-tit h3{margin:0;line-height:1.2}
.cl-resumo{margin:.2rem 0 0;color:#4a4a4a;font-size:.95rem}

/* apresentacao do clube */
.cl-prop{margin:.9rem 0 0;font-size:.95rem;line-height:1.6}
.cl-diz{margin:.8rem 0 0;padding:.1rem 0 .1rem .85rem;
  border-left:3px solid var(--c,#d8d8d8);color:#4a4a4a;font-size:.9rem;
  line-height:1.55;font-style:italic}
.cl-diz cite{display:block;margin-top:.35rem;font-style:normal;
  font-size:.8rem;color:#6b6b6b}
.cl-diz cite a{color:inherit}
.cl-so{margin:.9rem 0 0;font-size:.92rem;line-height:1.55;
  background:#fbfbfb;border:1px solid #eee;border-radius:3px;padding:.6rem .75rem}
.cl-so b{color:var(--c)}

/* quem escolhe, com nome — o titular pediu detalhe, e nome de pessoa merece
   destaque proprio em vez de virar lista dentro de um paragrafo */
.cl-cur{margin:1.2rem 0 0;padding:.8rem .95rem;background:#fcfbf9;
  border:1px solid #ece7df;border-radius:3px}
.cl-cur h4{margin:0 0 .3rem;font-family:var(--sans,inherit);font-size:.74rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--c);font-weight:700}
.cl-curnota{margin:0 0 .5rem;font-size:.88rem;line-height:1.5;color:#4a4a4a}
.cl-curlista{margin:0;padding:0;list-style:none;
  display:grid;gap:.3rem .9rem}
@media(min-width:52rem){.cl-curlista{grid-template-columns:1fr 1fr}}
.cl-curlista li{font-size:.86rem;line-height:1.45;color:#3d3d3d;
  padding-left:.7rem;border-left:2px solid #e4ded4}
.cl-curlista b{color:#2f2f2f;font-weight:600}

/* os OITO eixos — o corpo do cartao. Duas colunas no desktop: oito blocos
   empilhados viravam uma coluna longa demais, e o leitor perdia o cartao de
   vista antes de chegar ao fim dele. */
.cl-eixos{margin:1.2rem 0 0;display:grid;gap:1.1rem 1.8rem}
@media(min-width:56rem){.cl-eixos{grid-template-columns:1fr 1fr}}
.cl-eixo h4{margin:0 0 .25rem;font-family:var(--sans,inherit);font-size:.74rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--c);font-weight:700}
.cl-eixo p{margin:0;font-size:.92rem;line-height:1.55;color:#2f2f2f}
.cl-eixo.cl-vazio p{color:#6f6f6f}
.cl-fontes{list-style:none;margin:.45rem 0 0;padding:0}
.cl-fontes li{margin:.3rem 0 0;font-size:.78rem;line-height:1.45;color:#7a7a7a;
  padding-left:.65rem;border-left:2px solid #ececec}
.cl-fontes a{color:#7a7a7a}
.cl-cit{font-style:italic}
.cl-fonte{font-size:.82rem;color:#6b6b6b;margin:1.2rem 0 0;
  border-top:1px solid #ededed;padding-top:.7rem}
.cl-tab .cl-vazio{color:#8a8a8a;font-style:italic}

/* link pago — desenhado para NAO parecer o botao mais importante da pagina. */
.cl-afi{margin:1.2rem 0 0;padding:.85rem .95rem;background:#fbfbfb;
  border:1px solid #e4e4e4;border-radius:3px}
.cl-btn{display:inline-block;padding:.5rem .95rem;border-radius:3px;
  border:1.5px solid var(--c);color:var(--c);text-decoration:none;
  font-size:.92rem;font-weight:600;background:#fff}
.cl-btn:hover,.cl-btn:focus{background:var(--c);color:#fff}
.cl-publi{display:inline-block;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:#8a5a00;background:#fdf3e0;
  border:1px solid #f0dcb4;border-radius:2px;padding:.05rem .3rem;
  margin-right:.35rem;vertical-align:.05em}
.cl-divulga{margin:.6rem 0 0;font-size:.84rem;color:#4a4a4a;line-height:1.5}
.cl-cond{margin:.45rem 0 0;font-size:.84rem;color:#4a4a4a;line-height:1.5;
  padding-left:.7rem;border-left:2px solid #e4e4e4}

/* tabela comparativa — eixo de livro na linha, clube na coluna.
   No desktop ela sai da medida de leitura crescendo SO' PARA A DIREITA: a
   borda esquerda continua alinhada com o texto. `100vw - 100%` e' a sobra a
   direita da coluna de leitura. A primeira versao usava margin-left negativa
   supondo a coluna CENTRALIZADA, e ela e' alinhada a esquerda. */
.cl-rolar{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1rem 0 2rem;
  border:1px solid #e4e4e4;border-radius:3px}
@media(min-width:62rem){
  .cl-rolar{margin-right:calc(-1 * min(22rem, 100vw - 100% - 4rem))}
}
/* `border-collapse:separate` e' EXIGENCIA da coluna fixa, nao preferencia.
   Com `collapse`, a borda pertence a grade da tabela, e nao a celula: a
   celula gruda ao rolar e a borda dela fica para tras. Com `separate` +
   `border-spacing:0` o desenho e' identico, e cada celula leva a propria
   borda consigo. */
.cl-tab{border-collapse:separate;border-spacing:0;font-size:.85rem;
  min-width:48rem;width:100%}
.cl-tab th,.cl-tab td{border-bottom:1px solid #eee;border-right:1px solid #eee;
  padding:.55rem .65rem;vertical-align:top;text-align:left;
  overflow-wrap:break-word}
.cl-tab td{width:calc((100% - 11rem)/5)}
.cl-tab tbody th,.cl-tab thead th:first-child{width:11rem}
.cl-tab tr:last-child th,.cl-tab tr:last-child td{border-bottom:0}
.cl-tab th:last-child,.cl-tab td:last-child{border-right:0}
.cl-tab thead th{background:#fafafa;font-size:.86rem;line-height:1.25;
  border-bottom:2px solid var(--c,#e4e4e4);vertical-align:bottom}
.cl-tab thead th a{color:var(--c);text-decoration:none}
.cl-tab thead th a:hover{text-decoration:underline}
.cl-tab tbody th{white-space:normal;color:#6b6b6b;font-weight:600;
  background:#fcfcfc}

/* ── A COLUNA DOS EIXOS NAO SAI DA TELA ──────────────────────────────────
   Pedido do titular, 10/09/2026, apontando para a tabela do my-best.com:
   *"ele mantem a coluna fixa com os produtos e conforme as categorias vao
   avancando, voce ainda consegue ver a qual produto elas se referem."*

   A nossa tabela e' TRANSPOSTA em relacao a de la — eixo na linha, clube na
   coluna —, entao o que precisa grudar aqui e' a coluna dos EIXOS. Rolando
   para a direita voce avanca pelos clubes, e sem isso a pergunta que a linha
   responde ("Linha editorial", "Ilustracao e credito") sai de vista junto.

   Por que transposta continua certa: comparacao se le' na HORIZONTAL. "Quem
   escolhe" numa linha so' deixa o olho correr — 20 curadores | a editora |
   2 pessoas | equipe com 3 nomes | equipe sem nomes. Com clube na linha,
   cada clube vira um bloco e a comparacao some. E sao 5 clubes contra 8
   eixos: transpor deixaria a tabela mais larga, aumentando a rolagem que
   este conserto existe para tornar suportavel.

   `background` OPACO e' obrigatorio: sem ele o conteudo que rola passa por
   baixo e aparece atraves da coluna fixa. E a sombra a direita nao e'
   enfeite — e' o que diz ao olho que aquela coluna e' outra camada, e nao
   uma coluna qualquer que por acaso parou ali. */
.cl-tab tbody th,.cl-tab thead th:first-child{
  position:sticky;left:0;z-index:2;
  box-shadow:1px 0 0 #eee, 4px 0 6px -4px rgba(0,0,0,.13)}
.cl-tab thead th:first-child{z-index:3}
@media(max-width:560px){
  /* 11rem numa tela de 400px comeria quase metade da largura util. */
  .cl-tab tbody th,.cl-tab thead th:first-child{width:7.5rem;font-size:.8rem}
  .cl-tab td{width:calc((100% - 7.5rem)/5)}}

/* o acervo, no fim — as unicas capas de verdade que esta pagina pode mostrar */
.cl-pista{margin:1.2rem 0 1rem}
.cl-ponte{background:#fbfbfb;border-left:3px solid #7A4E2D;border-radius:0 3px 3px 0;
  padding:.7rem .9rem;margin:1rem 0 0}
.cl-ver{display:inline-block;font-family:var(--sans,inherit);font-size:.9rem;
  font-weight:600;text-decoration:none}

/* ── paginas de pergunta ───────────────────────────────────────────────────
   Sem classe nova para o que o site ja veste: header, h1, h2, p, .fato,
   .trilho, .pista, .cardcapa, .linha-acao e .acao saem do CSS comum. Aqui
   ficam so' as quatro coisas que estas paginas tem e as outras nao: o PAR de
   numeros, o paragrafo que declara o limite do estudo, a lista de conselho e
   a lista do indice.

   ZERO hex nesta folha — toda cor sai de token da marca. A primeira versao
   desta pagina, em 11/09/2026, usou cinzas e um marrom que nao era da marca,
   e o titular respondeu que a pagina tinha ficado "morta, sem vida, sem cor".
   Cor de enfeite nao resolve isso; cor com significado, sim. */

/* O PAR. Dois blocos de mesmo peso tipografico e cores opostas: o resultado
   na cor da marca, o tamanho da amostra na cor da ausencia — que e' a cor que
   este site usa em todo lugar para dizer "aqui falta informacao". O desenho
   E' a honestidade da pagina: numero grande sozinho seria enfeite, e e'
   exatamente o que uma pagina de dica faria. Quem garante que os dois ficam
   juntos no HTML e' confere_amostra_junto_do_resultado(). */
.pg-par{display:grid;grid-template-columns:1fr 1fr;gap:var(--pe-e-3,.75rem);
  margin:var(--pe-e-5,1.5rem) 0}
.pg-par__bloco{padding:var(--pe-e-4,1rem);border-radius:var(--pe-r-m,6px);
  display:flex;flex-direction:column;gap:var(--pe-e-2,.5rem)}
.pg-par__bloco--forte{background:var(--pe-marca-fraca);
  border-left:4px solid var(--pe-marca)}
.pg-par__bloco--limite{background:var(--pe-ausencia-fraca);
  border-left:4px solid var(--pe-ausencia)}
.pg-par__n{font-family:var(--titulo);font-size:var(--t7);font-weight:600;
  line-height:1;font-variant-numeric:tabular-nums}
.pg-par__bloco--forte .pg-par__n{color:var(--pe-marca)}
.pg-par__bloco--limite .pg-par__n{color:var(--pe-ausencia)}
.pg-par__leg{font-family:var(--sans);font-size:var(--t2);line-height:1.5;
  color:var(--tinta2)}
@media(max-width:560px){.pg-par{grid-template-columns:1fr}}

/* A prateleira aqui e' seguida pela linha de acao, nao por outro trilho: os
   96px de baixo do .trilho sao a distancia entre DUAS prateleiras da home e
   aqui abrem um vao de 128px medido no navegador. */
.trilho.pg-prateleira{margin-bottom:var(--pe-e-4,1rem)}

.pg-limite{background:var(--papel2);border-left:3px solid var(--pe-ausencia);
  border-radius:0 var(--pe-r-m,6px) var(--pe-r-m,6px) 0;
  padding:var(--pe-e-3,.7rem) var(--pe-e-4,.9rem);margin:var(--pe-e-4,1rem) 0}

/* A lista de conselho veste as QUATRO cores do simbolo, na ordem do simbolo:
   a espinha (marca), a barra verde (colecao), a ocre (madeira) e a laranja
   (acao). O ciclo e' 4n de proposito: a quinta dica que alguem escrever nasce
   com cor, nao cinza. No texto em negrito a ocre vira mostarda — #CD8725 em
   corpo de texto sobre papel nao passa em contraste, e o token existe
   exatamente para esse caso. */
.pg-lista{margin:var(--pe-e-4,1rem) 0 var(--pe-e-6,1.6rem);padding:0;
  list-style:none;display:grid;gap:var(--pe-e-3,.7rem)}
.pg-lista li{padding:var(--pe-e-1,.25rem) 0 var(--pe-e-1,.25rem)
  var(--pe-e-4,.9rem);border-left:3px solid var(--linha);
  font-size:var(--t3);line-height:1.6}
.pg-lista li:nth-child(4n+1){border-left-color:var(--pe-marca)}
.pg-lista li:nth-child(4n+2){border-left-color:var(--pe-colecao)}
.pg-lista li:nth-child(4n+3){border-left-color:var(--mad1)}
.pg-lista li:nth-child(4n+4){border-left-color:var(--pe-acao)}
.pg-lista b{font-family:var(--titulo);font-weight:600}
.pg-lista li:nth-child(4n+1) b{color:var(--pe-marca)}
.pg-lista li:nth-child(4n+2) b{color:var(--pe-colecao)}
.pg-lista li:nth-child(4n+3) b{color:var(--mostarda)}
.pg-lista li:nth-child(4n+4) b{color:var(--pe-acao)}

.pg-indice{margin:var(--pe-e-5,1.2rem) 0;padding:0;list-style:none;
  display:grid;gap:var(--pe-e-3,.9rem)}
.pg-indice li{padding:var(--pe-e-4,.8rem) var(--pe-e-4,.95rem);
  border:1px solid var(--linha);border-left:4px solid var(--pe-marca);
  border-radius:var(--pe-r-m,6px);background:var(--creme)}
.pg-indice li:hover{border-left-color:var(--pe-acao)}
.pg-indice a{display:block;font-family:var(--titulo);font-size:var(--t4);
  font-weight:600;text-decoration:none;line-height:1.3;color:var(--pe-marca)}
.pg-indice a:hover{text-decoration:underline}
.pg-ichamada{display:block;margin-top:var(--pe-e-2,.25rem);
  font-family:var(--sans);font-size:var(--t2);color:var(--mudo)}

/* ============================================================================
   PRIMEIRA ESTANTE — SISTEMA v2.0 (17/08/2026)
   Vai por ULTIMO na folha, depois do CSS antigo do site. Quem vem depois ganha.

   ----------------------------------------------------------------------------
   A GRAMATICA, EM UMA FRASE

   O simbolo da marca e' um diagrama de prateleira: uma lombada vertical e tres
   reguas horizontais que saem dela, quadradas na esquerda e arredondadas na
   direita. O sistema inteiro e' feito dessa mesma peca — o TRILHO — usada em
   tres trabalhos diferentes:

     1. ESTANTE   a linha em que as capas se apoiam. Livro fica em pe, nao
                  dentro de uma caixa.
     2. JANELA    a faixa de meses em que a obra rende. Mesmo desenho, agora
                  medindo tempo: comeco, pico, fim, e onde a crianca esta.
     3. LASTRO    as cinco dimensoes da rubrica. Trilho cheio e' evidencia
                  registrada; trilho tracejado e' ausencia de dado.

   Uma peca, tres trabalhos. E' isto que faz o site parecer desta marca sem
   precisar espalhar copias da logo.

   ----------------------------------------------------------------------------
   O QUE FOI RETIRADO, E POR QUE

   - CARTAO. O layout antigo punha cada informacao dentro de uma caixa com
     borda, fundo proprio, canto arredondado e sombra: as cinco dimensoes da
     rubrica eram cinco cartoes bege, e a pagina de livro inteira era um cartao
     branco dentro do papel. Caixa sinaliza "isto e' um objeto separado". As
     cinco dimensoes NAO sao cinco objetos separados: sao cinco linhas de uma
     mesma tabela. Viraram linhas, separadas por regua.
   - SELO DE NOTA SOBRE A CAPA. A nota ficava num retangulo escuro em cima da
     arte. Capa de livro infantil e' obra de ilustrador creditado; tapar o canto
     dela com um numero e' desrespeito editorial e ruido visual. A nota desceu
     para a linha de dado, sob o titulo, onde ela pode ser lida ao lado da
     janela etaria — que e' a informacao com que ela precisa ser comparada.
   - SOMBRA DECORATIVA. Sobrou uma so', a do pe da capa: livro em pe projeta
     sombra na prateleira. E' a unica sombra do sistema que descreve um fato.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────── 1. FUNDACAO ── */

body { font: var(--pe-t-base)/var(--pe-entrelinha-corpo) var(--pe-fonte-corpo); }

h1, h2, h3, h4 {
  font-family: var(--pe-fonte-titulo);
  font-weight: var(--pe-peso-titulo);
  letter-spacing: var(--pe-track-titulo);
  color: var(--pe-marca);
}

/* Todo numero e' dado: sans, tabular, cor da marca — NUNCA a cor da acao
   (isso poria a nota disputando atencao com o botao de compra) e nunca uma cor
   que dependa do valor (isso transformaria a paleta em semaforo). */
/* 08/09/2026: sairam daqui `.nota-grande .num`, `.capa-nota` e
   `.pe-ficha__nota` — os tres desenhavam o numero da nota, que deixou de ser
   publicado. As dimensoes (`.nt`) ficam: continuam sendo dado. */
.nt, .grade-idades .n, .grade-idades-compacta .n,
.livrocard .nt, .dims .nt, .pe-nota, .pe-lastro-valor,
.seletor .op i, .pe-janela__rot {
  font-family: var(--pe-fonte-dado);
  font-variant-numeric: tabular-nums;
  font-weight: var(--pe-peso-dado);
  letter-spacing: 0;
  color: var(--pe-marca);
}

a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, [tabindex]:focus-visible {
  outline: none; box-shadow: var(--pe-foco); border-radius: var(--pe-r-m);
}

.wrap { max-width: var(--pe-largura-max); }

/* ────────────────────────────────────────────────────── 2. O TRILHO (base) ─
   Quadrado a esquerda, meia-cana a direita: a lombada e a ponta aberta.
   Todas as tres aplicacoes herdam daqui. */

.pe-trilho {
  position: relative; display: block;
  height: var(--pe-trilho-a);
  background: var(--pe-linha);
  border-radius: 0 var(--pe-r-pilula) var(--pe-r-pilula) 0;
  overflow: hidden;
}
.pe-trilho > * { position: absolute; top: 0; bottom: 0; }

/* ─────────────────────────────────────────────── 3. JANELA ETARIA (novo) ──
   A peca central do produto, e ate hoje ela era uma frase perdida no rodape da
   pagina de livro ("A janela vai de 18 a 36 meses, com o ponto alto por volta
   dos 24"). Virou desenho, com regua FIXA de 0 a 96 meses — fixa de proposito:
   e' o que permite comparar duas obras de relance numa mesma prateleira. Regua
   que se ajusta a cada obra mente sobre a largura da janela.

   Variaveis (todas em % da regua, calculadas no build):
     --ini  --fim  --pico  --eu
   Estado em data-estado: ativa | futura | passada | sem. */

.pe-janela { display: block; }
.pe-janela__regua {
  position: relative; display: block; width: 100%;
  height: var(--pe-trilho-a);
  background: var(--pe-linha);
  border-radius: 0 var(--pe-r-pilula) var(--pe-r-pilula) 0;
}
.pe-janela__faixa {
  position: absolute; top: 0; bottom: 0;
  left: var(--ini); right: calc(100% - var(--fim));
  background: var(--pe-marca);
  border-radius: 0 var(--pe-r-pilula) var(--pe-r-pilula) 0;
}
/* O pico nao e' outra cor: e' a MESMA faixa mais alta. Cor nova aqui viraria
   um terceiro significado para o leitor decifrar. */
.pe-janela__pico {
  position: absolute; left: var(--pico); top: 50%;
  width: 2px; height: calc(var(--pe-trilho-a) + 8px);
  transform: translate(-1px, -50%);
  background: var(--pe-papel);
}
.pe-janela__pico::after {
  content: ""; position: absolute; left: 50%; top: -5px;
  width: 5px; height: 5px; transform: translateX(-50%) rotate(45deg);
  background: var(--pe-marca);
}
/* "Voce esta aqui". So' existe quando a idade da crianca e' conhecida — e ela
   nunca sai do aparelho, entao esta marca e' desenhada no proprio navegador
   nas paginas de resultado, e no build so' nas paginas de idade, onde o alvo
   e' a FAIXA (fato publico), nunca uma crianca. */
.pe-janela__eu {
  position: absolute; left: var(--eu); top: 50%;
  width: 0; height: 0; transform: translate(-50%, -50%);
  z-index: 2;
}
.pe-janela__eu::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 13px; height: 13px; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--pe-acao);
  box-shadow: 0 0 0 3px var(--pe-papel);
}
.pe-janela__rots {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--pe-e-3); margin-top: 7px;
  font-family: var(--pe-fonte-dado); font-size: var(--pe-t-2xp);
  color: var(--pe-tinta-mudo); line-height: 1.3;
}
.pe-janela__rot { color: var(--pe-marca); }
.pe-janela__rot--fim { text-align: right; }

/* Sem janela derivada: a regua fica tracejada e vazia. Nao e' nota baixa, nao
   e' erro — e' ausencia, e ausencia tem desenho proprio. */
.pe-janela[data-estado="sem"] .pe-janela__regua {
  background: transparent; height: 0;
  border-top: 2px dashed var(--pe-ausencia);
}
.pe-janela[data-estado="sem"] .pe-janela__rots { color: var(--pe-ausencia); font-style: italic; }
/* Janela ja passada: a faixa continua inteira (o livro nao piorou), mas em
   tinta fraca — e a marca da crianca fica depois dela, o que ja conta a
   historia sem precisar de aviso vermelho. */
.pe-janela[data-estado="passada"] .pe-janela__faixa { background: var(--pe-neutro-400); }
.pe-janela[data-estado="passada"] .pe-janela__pico::after { background: var(--pe-neutro-400); }
/* Janela futura: mesma faixa, e a espera desenhada como pontilhado entre onde
   a crianca esta e onde a janela abre. */
.pe-janela[data-estado="futura"] .pe-janela__espera {
  position: absolute; top: 50%; left: var(--eu); right: calc(100% - var(--ini));
  height: 0; border-top: 2px dotted var(--pe-acao); transform: translateY(-50%);
}

/* Versao compacta, a dos cartoes. Mesma peca, 5 px de altura, sem rotulos —
   os rotulos viram a linha de ficha logo abaixo. */
.pe-janela--mini .pe-janela__regua { height: var(--pe-trilho-a-p); }
.pe-janela--mini .pe-janela__pico { height: calc(var(--pe-trilho-a-p) + 6px); }
.pe-janela--mini .pe-janela__pico::after { width: 4px; height: 4px; top: -4px; }
.pe-janela--mini .pe-janela__eu::before { width: 9px; height: 9px; box-shadow: 0 0 0 2px var(--pe-papel); }

/* Bloco grande, o da pagina de livro: a resposta da primeira dobra. */
.pe-janela--painel {
  margin: var(--pe-e-6) 0 var(--pe-e-7);
  padding: 0 0 0 var(--pe-e-5);
  border-left: var(--pe-lombada) solid var(--pe-marca);
  max-width: 760px;
}
.pe-janela--painel .pe-janela__titulo {
  font-family: var(--pe-fonte-dado); font-weight: 600;
  font-size: var(--pe-t-3xp); letter-spacing: var(--pe-track-versalete);
  text-transform: uppercase; color: var(--pe-tinta-mudo);
  margin: 0 0 var(--pe-e-3);
}
.pe-janela--painel .pe-janela__frase {
  font-family: var(--pe-fonte-corpo); font-size: var(--pe-t-p);
  line-height: 1.45; color: var(--pe-tinta); margin: 0 0 var(--pe-e-4);
  max-width: 52ch;
}
.pe-janela--painel .pe-janela__frase b { font-weight: 600; color: var(--pe-marca); }
.pe-janela--painel .pe-janela__regua { height: 10px; }
.pe-janela--painel .pe-janela__rots { font-size: var(--pe-t-xp); margin-top: 9px; }
.pe-janela[data-estado="sem"].pe-janela--painel { border-left-color: var(--pe-ausencia); }

/* ─────────────────────────────────────────────── 4. ESTANTE (secao/trilho) ─
   Uma prateleira e': marca de colecao (lombada colorida) + olho + titulo +
   descricao + fileira de capas apoiadas numa linha. */

.trilho { margin: 0 0 var(--pe-e-9); }
.trilho .secao {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--pe-e-5); margin: 0 0 var(--pe-e-5);
  border-bottom: 1px solid var(--pe-linha-forte); padding-bottom: var(--pe-e-3);
}
.trilho .st { padding-left: var(--pe-e-4); border-left: var(--pe-lombada) solid var(--pe-graf-1); }
.trilho:nth-of-type(3n+2) .st { border-left-color: var(--pe-graf-2); }
.trilho:nth-of-type(3n+3) .st { border-left-color: var(--pe-graf-3); }
.trilho .olho {
  display: block; font-family: var(--pe-fonte-dado); font-weight: 600;
  font-size: var(--pe-t-3xp); letter-spacing: var(--pe-track-versalete);
  text-transform: uppercase; color: var(--pe-tinta-mudo); margin: 0 0 6px;
}
.trilho .st h2 { margin: 0 0 6px; font-size: clamp(1.5rem, 1.1rem + 1.4vw, var(--pe-t-g)); }
.trilho .sub2 {
  margin: 0; max-width: 62ch; font-size: var(--pe-t-xp);
  line-height: 1.55; color: var(--pe-tinta-apoio);
}
.trilho .verall {
  flex: none; white-space: nowrap; text-decoration: none;
  font-family: var(--pe-fonte-dado); font-weight: 600; font-size: var(--pe-t-2xp);
  letter-spacing: .02em; color: var(--pe-acao); padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
}
.trilho .verall:hover { color: var(--pe-acao-hover); }

/* ────────────────────────────────────────────────── 5. A CAPA SOBRE A LINHA ─
   Sem moldura, sem fundo tingido, sem canto arredondado: a capa e' a arte, e a
   interface nao desenha nada por cima nem por baixo dela. O unico enfeite e' a
   sombra do pe, que e' o que um livro em pe faz numa prateleira. */

.capa-link { display: block; text-decoration: none; }
.capa {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  width: 100%; background: transparent; border: 0; border-radius: 0;
  box-shadow: none; overflow: visible;
}
.capa img { border-radius: 0; }
.capa > img:not(.bg) {
  position: relative; z-index: 2; max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain; object-position: bottom;
  opacity: 0; transition: opacity var(--pe-tempo-2) var(--pe-curva),
                          transform var(--pe-tempo-2) var(--pe-curva);
  box-shadow: var(--pe-sombra-livro);
}
.capa > img.ok:not(.bg) { opacity: 1; }
.capa img.bg { display: none; }   /* o fundo borrado morre: a linha ja segura a capa */
.capa img.erro { display: none; }
.capa-link:hover .capa > img.ok:not(.bg) { transform: translateY(-3px); }

/* Linha da prateleira: passa sob a fileira inteira, nao sob cada capa. */
.pista, .grade { position: relative; }
.pista::after, .grade-linha::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: var(--pe-linha-pe, 0);
  height: 1px; background: var(--pe-linha-forte);
}

/* Bloco de reserva quando a capa nao carrega: continua sendo tipografia, nao
   uma caixa cinza. */
.capa .fb {
  position: absolute; inset: auto 0 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  padding: var(--pe-e-3); text-align: left;
  background: var(--pe-papel-fundo);
  border-left: var(--pe-lombada) solid var(--pe-linha-forte);
  height: 100%;
}
.capa.com-capa .fb { display: none; }
.capa .fb b { font-family: var(--pe-fonte-titulo); font-weight: 600;
  font-size: var(--pe-t-2xp); line-height: 1.2; color: var(--pe-marca); }
.capa .fb span { font-family: var(--pe-fonte-dado); font-size: var(--pe-t-3xp);
  color: var(--pe-tinta-mudo); line-height: 1.3; }

/* A nota nunca mais em cima da arte. */
.capa-nota { display: none !important; }

/* ──────────────────────────────────────────────────── 6. CARTAO DE OBRA ────
   Nao e' cartao: e' uma entrada de catalogo. Capa, titulo, autoria, e a linha
   de dado — janela e nota lado a lado, porque so' juntas elas respondem a
   pergunta do site ("serve agora?" e "e' bom?"). */

.livrocard, .cardcapa {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: 0; display: flex; flex-direction: column; gap: 0;
}
.livrocard .legenda, .cardcapa .titulo-mini {
  display: block; text-decoration: none; color: inherit;
  padding-top: var(--pe-e-3);
}
.livrocard h2, .cardcapa h3 {
  margin: 0; font-family: var(--pe-fonte-titulo); font-weight: var(--pe-peso-titulo);
  font-size: var(--pe-t-xp); line-height: 1.22; color: var(--pe-marca);
  letter-spacing: 0;
}
.livrocard .legenda:hover h2, .cardcapa .titulo-mini:hover h3 { color: var(--pe-acao); }
.livrocard .au, .cardcapa .au-mini {
  margin: 4px 0 0; font-family: var(--pe-fonte-dado); font-size: var(--pe-t-3xp);
  line-height: 1.35; color: var(--pe-tinta-mudo);
}

/* A linha de ficha: janela a esquerda, faixa da curadoria a direita. */
.pe-ficha { margin-top: var(--pe-e-3); }
.pe-ficha__linha {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--pe-e-2); margin-top: 6px;
  font-family: var(--pe-fonte-dado); font-size: var(--pe-t-3xp);
  color: var(--pe-tinta-mudo); line-height: 1.3;
}
/* .pe-ficha__nota (o numero no canto do cartao) saiu em 08/09/2026. No lugar,
   a faixa de tres niveis: mesma posicao, texto em vez de numero. Ela nao usa
   a fonte de dado — nao e' dado numerico, e' juizo escrito.
   A cor distingue as tres SEM ser o unico sinal (o texto ja diz qual e'), pela
   mesma razao que a regua de lastro nunca dependeu so' de cor. */
/* Sobe de --pe-t-3xp para --pe-t-2xp no mesmo dia, medindo: a 11,1px uma
   PALAVRA nao se le com a mesma facilidade que um numero de dois digitos —
   era o tamanho que o numero tinha, e o tamanho seguiu o slot em vez de
   seguir o conteudo. */
.pe-ficha__faixa {
  font-family: var(--pe-fonte-dado); font-size: var(--pe-t-2xp);
  font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  color: var(--pe-tinta-mudo);
}
.pe-fx--rec { color: var(--pe-marca); }
.pe-fx--ress { font-style: italic; }
.pe-ficha__meses { letter-spacing: .01em; }
.pe-ficha--sem .pe-ficha__meses { color: var(--pe-ausencia); font-style: italic; }

/* ──────────────────────────────────────────────────── 7. PAGINA DE LIVRO ───
   Sai o cartao branco que embrulhava tudo. Entra a coluna editorial: reguas
   horizontais separando assuntos, e uma lombada vertical marcando o unico
   bloco que precisa de destaque. */

.livro-lyt { align-items: start; }
.porque, .metodo, .caixa, .trabalha-card, .sintese {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: 0;
}
.porque { border-top: 1px solid var(--pe-linha-forte); padding-top: var(--pe-e-5); }
.porque > h2 { font-size: var(--pe-t-m); margin-bottom: var(--pe-e-4); }
.sintese {
  border-left: var(--pe-lombada) solid var(--pe-marca);
  padding: 2px 0 2px var(--pe-e-4); margin: 0 0 var(--pe-e-5);
  font-family: var(--pe-fonte-corpo); font-size: var(--pe-t-xp); line-height: 1.5;
  color: var(--pe-tinta); max-width: 56ch;
}
.porque-intro { color: var(--pe-tinta-apoio); font-size: var(--pe-t-xp); }

/* As cinco dimensoes viram linhas de tabela, nao cinco caixas. */
.dims { display: block; margin: var(--pe-e-5) 0 0; }
.dims .d {
  display: grid; grid-template-columns: minmax(0, 1fr) 4.2em;
  align-items: baseline; gap: var(--pe-e-4);
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: var(--pe-e-4) 0; margin: 0;
  border-top: 1px solid var(--pe-linha);
}
.dims .d:first-child { border-top: 0; }
.dims .dh { display: flex; align-items: baseline; gap: var(--pe-e-2); flex-wrap: wrap; }
.dims .dh, .dims .dexp { grid-column: 1; }
.dims .th {
  font-family: var(--pe-fonte-dado); font-weight: 600; font-size: var(--pe-t-3xp);
  letter-spacing: var(--pe-track-versalete); text-transform: uppercase;
  color: var(--pe-tinta);
}
/* .dims .peso saiu em 08/09/2026 — ver build_site.dims_html. O chip publicava
   30/30/20/15/5, tabela que o codigo nunca aplicou. */
.dims .dexp { margin: 5px 0 0; font-size: var(--pe-t-2xp); line-height: 1.5;
  color: var(--pe-tinta-apoio); max-width: 62ch; }
.dims .nt { grid-column: 2; grid-row: 1 / span 2; text-align: right;
  font-size: var(--pe-t-p); align-self: center; }

/* .nota-grande (o numero em clamp(2.6rem..3.4rem)) saiu em 08/09/2026. Em seu
   lugar, .faixa-selo — e a diferenca de escala e' deliberada: o maior corpo
   tipografico da pagina volta a ser o titulo da obra e o painel de janela,
   nao o veredito. */
.faixa-selo { margin: 0 0 var(--pe-e-5); }
.faixa-selo .fx {
  font-family: var(--pe-fonte-dado); font-size: var(--pe-t-2xp);
  font-weight: 700; letter-spacing: var(--pe-track-versalete);
  text-transform: uppercase; color: var(--pe-marca);
  background: transparent; border: 0; border-radius: 0; padding: 0;
}
.faixa-selo.faixa-ress .fx { color: var(--pe-tinta-mudo); font-style: italic; }
.faixa-selo .conf { font-family: var(--pe-fonte-dado); font-size: var(--pe-t-3xp);
  color: var(--pe-tinta-mudo); }
/* A razao da janela: prosa, medida de leitura curta, lombada discreta.
   MEDIDO E CORRIGIDO no mesmo dia (licao 9: "cabe na tela" e "da' para ler"
   sao perguntas diferentes). A primeira versao renderizou a 13,3px — tamanho
   de rodape — e este e' o paragrafo de maior valor da pagina: o unico texto
   que diz POR QUE a obra serve nesta idade, e o unico que concorrente nenhum
   copia. Elemento cujo papel e' ser LIDO ganha tamanho de leitura. */
.razao-janela { font-size: var(--pe-t-p); line-height: 1.6;
  color: var(--pe-tinta); max-width: 62ch;
  border-left: 2px solid var(--pe-linha); }
.razao-janela b { font-family: var(--pe-fonte-dado); font-size: var(--pe-t-3xp);
  letter-spacing: var(--pe-track-versalete); text-transform: uppercase;
  color: var(--pe-tinta-mudo); }
/* A lacuna declarada: menor que a razao, cor de ausencia, lombada tracejada.
   Menor de proposito — ela e' verdadeira e necessaria, e nao e' o assunto da
   pagina. Mesma familia de .cred-ausente. */
.razao-lacuna { font-size: var(--pe-t-2xp); line-height: 1.5;
  color: var(--pe-ausencia); max-width: 62ch;
  border-left: 2px dashed var(--pe-linha); }
.razao-lacuna b { font-family: var(--pe-fonte-dado); font-size: var(--pe-t-3xp);
  letter-spacing: var(--pe-track-versalete); text-transform: uppercase;
  color: var(--pe-ausencia); }

.credito-capa { font-family: var(--pe-fonte-dado); font-size: var(--pe-t-3xp);
  color: var(--pe-tinta-mudo); line-height: 1.4; margin: var(--pe-e-3) 0 var(--pe-e-4); }

/* Acao de compra: presente e clara, mas nunca maior que a analise. Cor de
   acao, nao cor de marca — e' a unica coisa da pagina que leva para fora. */
.acao, .pe-btn, .pc-ir {
  display: inline-flex; align-items: center; gap: var(--pe-e-2);
  font-family: var(--pe-fonte-dado); font-weight: 600; font-size: var(--pe-t-xp);
  padding: .68em 1.25em; border: 0; border-radius: var(--pe-r-pilula);
  background: var(--pe-acao); color: var(--pe-sobre-acao);
  text-decoration: none; cursor: pointer; box-shadow: none;
  transition: background var(--pe-tempo-1) var(--pe-curva);
}
.acao:hover, .pe-btn:hover, .pc-ir:hover { background: var(--pe-acao-hover); color: #fff; }
.marca-publi, .capa-publi {
  font-family: var(--pe-fonte-dado); font-size: var(--pe-t-3xp);
  letter-spacing: .08em; text-transform: uppercase; color: var(--pe-tinta-mudo);
  background: transparent; border: 1px solid var(--pe-linha-forte);
  border-radius: var(--pe-r-pilula); padding: .25em .7em;
}

.chip {
  font-family: var(--pe-fonte-dado); font-size: var(--pe-t-3xp);
  color: var(--pe-tinta-apoio); background: transparent;
  border: 1px solid var(--pe-linha-forte); border-radius: var(--pe-r-pilula);
  padding: .3em .8em;
}

/* ────────────────────────────────────────────────────────── 8. LASTRO ──────
   Cinco trilhos, um por dimensao. Cheio = evidencia registrada. Tracejado =
   sem dado. A regra que este desenho existe para impedir: ler ausencia como
   reprovacao. */

.pe-lastro { display: flex; flex-direction: column; gap: 9px; max-width: 460px; margin: var(--pe-e-4) 0 0; }
.pe-lastro-linha {
  display: grid; grid-template-columns: 11.5em 1fr 4.4em; align-items: center;
  gap: var(--pe-e-3); font-family: var(--pe-fonte-dado); font-size: var(--pe-t-2xp);
  color: var(--pe-tinta-apoio);
}
.pe-lastro-trilho {
  height: var(--pe-trilho-a-p); background: var(--pe-linha);
  border-radius: 0 var(--pe-r-pilula) var(--pe-r-pilula) 0; overflow: hidden;
}
.pe-lastro-preenche { display: block; height: 100%; background: var(--pe-marca);
  border-radius: 0 var(--pe-r-pilula) var(--pe-r-pilula) 0; }
.pe-lastro-linha[data-estado="ausente"] .pe-lastro-trilho {
  height: 0; background: transparent; overflow: visible;
  border-top: 2px dashed var(--pe-ausencia);
}
.pe-lastro-linha[data-estado="ausente"] .pe-lastro-valor {
  color: var(--pe-ausencia); font-style: italic; font-weight: 400;
}
.pe-lastro-valor { text-align: right; white-space: nowrap; }
.pe-lastro-legenda {
  font-family: var(--pe-fonte-dado); font-size: var(--pe-t-2xp);
  color: var(--pe-tinta-mudo); margin: var(--pe-e-4) 0 var(--pe-e-6);
  max-width: 52ch; line-height: 1.5;
}

/* Fontes da evidencia: lista de referencias, com regua fina. Nao e' cartao. */
.fato, .fontes li { border-radius: 0; }

/* Ressalva: obra avaliada e reprovada — terceira coisa, nem ausencia nem erro. */
.ressalva-curadoria {
  background: transparent; color: var(--pe-tinta);
  border: 0; border-left: var(--pe-lombada) solid var(--pe-ressalva);
  border-radius: 0; padding: 2px 0 2px var(--pe-e-4); margin: 0 0 var(--pe-e-5);
  font-size: var(--pe-t-xp); line-height: 1.5; max-width: var(--pe-medida);
}
.ressalva-curadoria b { color: var(--pe-ressalva); }

/* ──────────────────────────────────────────────────── 9. TOPO E RODAPE ─────*/

nav.topo {
  background: var(--pe-papel); border-bottom: 1px solid var(--pe-linha-forte);
  box-shadow: none;
}
nav.topo .wrap { align-items: center; gap: var(--pe-e-5); padding-top: 14px; padding-bottom: 14px; }
nav.topo a.marca { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; }
.pe-lockup { display: inline-flex; align-items: center; gap: 13px; }
.pe-lockup-simbolo { height: 40px; width: auto; display: block; }
.pe-lockup-regua { display: none; }
.pe-lockup-txt { display: flex; flex-direction: column; gap: 4px; line-height: 1; }
.pe-lockup-nome {
  font-family: var(--pe-fonte-dado); font-weight: 500; font-size: 1.02rem;
  letter-spacing: var(--pe-track-marca); text-transform: uppercase;
  color: var(--pe-marca); white-space: nowrap;
}
.pe-lockup-assin {
  font-family: var(--pe-fonte-corpo); font-style: italic; font-size: .74rem;
  letter-spacing: .01em; color: var(--pe-tinta-mudo); white-space: nowrap;
}
nav.topo .links a {
  font-family: var(--pe-fonte-dado); font-size: var(--pe-t-2xp); font-weight: 500;
  color: var(--pe-tinta-apoio); text-decoration: none; padding: 6px 0;
  border-bottom: 2px solid transparent;
}
nav.topo .links a:hover { color: var(--pe-marca); border-bottom-color: var(--pe-graf-2); }
nav.topo .busca input {
  font-family: var(--pe-fonte-dado); font-size: var(--pe-t-2xp);
  background: var(--pe-papel-alto); border: 1px solid var(--pe-linha-forte);
  border-radius: var(--pe-r-pilula); padding: .5em .9em; color: var(--pe-tinta);
}
nav.topo .busca input::placeholder { color: var(--pe-tinta-mudo); }

footer { background: var(--pe-papel-fundo); border-top: 1px solid var(--pe-linha-forte); }
footer .dec, footer li a { font-family: var(--pe-fonte-dado); }
footer li a { color: var(--pe-tinta-apoio); text-decoration: none; }
footer li a:hover { color: var(--pe-acao); }

/* ─────────────────────────────────────────────────── 10. HOME E SELETOR ────*/

.masthead { padding: var(--pe-e-8) 0 var(--pe-e-6); }
.masthead .lede {
  font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.15rem);
  max-width: 17ch; margin: 0 0 var(--pe-e-5);
}
.masthead .lede em { font-style: normal; color: var(--pe-acao); }
.masthead .diz {
  font-size: var(--pe-t-p); line-height: 1.5; color: var(--pe-tinta-apoio);
  max-width: 54ch; margin: 0;
}

.pc {
  border-top: 1px solid var(--pe-linha-forte);
  border-bottom: 1px solid var(--pe-linha-forte);
  background: transparent; padding: var(--pe-e-6) 0; margin: 0 0 var(--pe-e-8);
}
.pc h2 { font-size: var(--pe-t-m); margin-bottom: var(--pe-e-3); }
.pc-ex { color: var(--pe-tinta-apoio); font-size: var(--pe-t-xp); max-width: 56ch; }
.pc-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pe-e-3); margin: var(--pe-e-5) 0 var(--pe-e-4); }
.pc-campo { display: flex; flex-direction: column; gap: 7px; }
.pc-campo > span {
  font-family: var(--pe-fonte-dado); font-weight: 600; font-size: var(--pe-t-3xp);
  letter-spacing: var(--pe-track-versalete); text-transform: uppercase;
  color: var(--pe-tinta-mudo);
}
.pc-campo select {
  font-family: var(--pe-fonte-dado); font-size: var(--pe-t-xp); color: var(--pe-tinta);
  background: var(--pe-papel-alto); border: 1px solid var(--pe-linha-forte);
  border-bottom-width: 2px; border-radius: var(--pe-r-m);
  padding: .6em 2.2em .6em .8em; min-width: 8.5em;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--pe-tinta-apoio) 50%),
                    linear-gradient(135deg, var(--pe-tinta-apoio) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.pc-ir:disabled { background: var(--pe-neutro-300); color: var(--pe-tinta-mudo); cursor: not-allowed; }
.pc-priv {
  font-family: var(--pe-fonte-dado); font-size: var(--pe-t-2xp); line-height: 1.5;
  color: var(--pe-tinta-mudo); max-width: 62ch;
  display: flex; gap: var(--pe-e-3); align-items: flex-start;
  background: transparent; border: 0; border-left: 1px solid var(--pe-linha-forte);
  padding: 0 0 0 var(--pe-e-4); margin: 0;
}
.pc-priv b { color: var(--pe-tinta-apoio); }

/* Seletor de idade: fita de trilhos, nao fileira de pilulas. */
.seletor ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0 0 4px; overflow-x: auto; }
.seletor .op {
  display: inline-flex; align-items: baseline; gap: .45em; white-space: nowrap;
  font-family: var(--pe-fonte-dado); font-size: var(--pe-t-2xp); font-weight: 500;
  color: var(--pe-tinta-apoio); text-decoration: none;
  padding: .5em .85em; border: 1px solid var(--pe-linha-forte);
  border-radius: var(--pe-r-pilula); background: transparent;
}
.seletor .op i { font-style: normal; font-size: var(--pe-t-3xp); color: var(--pe-tinta-mudo); }
.seletor .op:hover { border-color: var(--pe-marca); color: var(--pe-marca); }
.seletor .op.atual { background: var(--pe-marca); border-color: var(--pe-marca); color: var(--pe-sobre-marca); }
.seletor .op.atual i { color: var(--pe-neutro-300); }

/* ───────────────────────────────────────────────────────── 11. CELULAR ─────*/

@media (max-width: 640px) {
  .pe-lockup { gap: 10px; }
  .pe-lockup-simbolo { height: 34px; }
  .pe-lockup-nome { font-size: .86rem; letter-spacing: .22em; }
  .pe-lockup-assin { display: none; }
  .trilho .secao { flex-direction: column; align-items: flex-start; gap: var(--pe-e-3); }
  .trilho .verall { align-self: flex-start; }
  .pe-janela--painel { padding-left: var(--pe-e-4); }
  .dims .d { grid-template-columns: minmax(0, 1fr) 3.2em; gap: var(--pe-e-3); }
  .masthead { padding: var(--pe-e-6) 0 var(--pe-e-5); }
}

/* ══════════════════════════════════════════════ 12. VENCER O CSS ANTIGO ════
   Regras onde o CSS de 2026 tem especificidade maior que a do sistema. Cada
   uma anotada com o QUE ela desfaz — quem ler daqui a seis meses precisa saber
   se pode apagar a linha (porque a regra antiga sumiu) ou nao. */

/* .livrocard{height:260px;overflow:hidden} — o cartao tinha altura travada em
   260 px e cortava o que passasse. Com a ficha (janela + nota) ele passa. A
   altura fixa existia para o degrade de "fade" no pe do cartao, que saiu
   junto com o corte de sinopse; nao ha mais o que esconder. */
.livrocard { height: auto; overflow: visible; }
.livrocard .legenda { flex: none; padding-top: var(--pe-e-3); overflow: visible; }
.grade-livros { align-items: end; }

/* .porque .sintese{background:#..;border-radius} — a sintese era um cartao
   bege dentro do cartao branco. Vira lombada. */
.porque .sintese {
  background: transparent; border: 0; border-radius: 0;
  border-left: var(--pe-lombada) solid var(--pe-marca);
  padding: 2px 0 2px var(--pe-e-4); margin: 0 0 var(--pe-e-5);
  font-size: var(--pe-t-xp); line-height: 1.5; max-width: 56ch;
}

/* .capa-link:hover .capa{transform:translateY(-8px) rotate(-1.3deg)} — a capa
   inteira girava 1,3 grau no hover. Livro numa prateleira nao gira; e capa de
   ilustrador nao e' adesivo. Fica so' o levantar de 3 px, no <img>. */
.capa-link:hover .capa { transform: none; box-shadow: none; }
.capa { transition: none; }

/* .capa .fb{inset:0;align-items:center} — o bloco de reserva ficava centrado
   e o texto flutuava no meio de um retangulo. Vira lombada tipografica. */
.capa .fb { align-items: stretch; inset: auto 0 0; }
.capa .fb b { display: block; margin: 0; }
.capa .fb span { display: block; -webkit-line-clamp: none; }

/* A LINHA DA PRATELEIRA.
   Desenhada no pe da capa e nao no pe do cartao: e' nela que o livro se apoia,
   nao embaixo do nome do autor. As pontas avancam metade do vao lateral para
   os segmentos se emendarem e a fileira ler como UMA linha continua. */
.capa { position: relative; overflow: visible; }
.capa::after {
  content: ""; position: absolute; left: -11px; right: -11px; bottom: -1px;
  height: 1px; background: var(--pe-linha-forte);
}
.pista::after, .grade-linha::after { display: none; }

/* .secao .verall / .trilho .th — especificidade maior que a do sistema. */
.secao .verall {
  border: 0; border-bottom: 1px solid currentColor; border-radius: 0;
  background: transparent; color: var(--pe-acao);
  font-family: var(--pe-fonte-dado); font-size: var(--pe-t-2xp); padding: 0 0 3px;
}
.secao .verall:hover { color: var(--pe-acao-hover); border-color: currentColor; }
.secao .sub2 { font-family: var(--pe-fonte-corpo); font-size: var(--pe-t-xp); color: var(--pe-tinta-apoio); }
.secao h2 { font-family: var(--pe-fonte-titulo); }
.secao .st { flex: 1; min-width: 260px; }

/* .dims .nt{font-family:var(--serif);font-weight:700} — nota em serifa. */
.dims .nt { font-family: var(--pe-fonte-dado); font-weight: var(--pe-peso-dado);
  color: var(--pe-marca); margin-left: 0; }
.dims .dh b { font-family: var(--pe-fonte-dado); font-size: var(--pe-t-3xp);
  letter-spacing: var(--pe-track-versalete); text-transform: uppercase;
  font-weight: 600; color: var(--pe-tinta); }
.dims .peso { font-family: var(--pe-fonte-dado); font-size: var(--pe-t-3xp);
  font-weight: 400; color: var(--pe-tinta-mudo); background: transparent; padding: 0; }

/* .livrocard .nt{color:var(--verde)} — a nota vinha na cor de colecao. */
.livrocard .nt, .cardcapa .nt { color: var(--pe-marca); }

/* Titulo longo nao pode estourar a coluna do cartao (visto em
   "Sagatrissuinorana" e "Da pequena toupeira que queria saber..."). */
.livrocard h2, .cardcapa h3, .pe-ficha { overflow-wrap: break-word; hyphens: auto; }

/* .masthead{padding:40px 0 4px} e .lede{font-weight:700} */
.masthead { padding: var(--pe-e-8) 0 var(--pe-e-6); }
.masthead .lede { font-weight: var(--pe-peso-titulo); }
.masthead .diz { font-family: var(--pe-fonte-corpo); font-size: var(--pe-t-p); color: var(--pe-tinta-apoio); }

/* Busca do topo: o campo cortava o texto do proprio placeholder. */
nav.topo .busca { border: 1px solid var(--pe-linha-forte); border-radius: var(--pe-r-pilula);
  background: var(--pe-papel-alto); padding: 0 4px 0 14px; min-width: 250px; }
nav.topo .busca input { border: 0; background: transparent; padding: .5em 0;
  font-family: var(--pe-fonte-dado); font-size: var(--pe-t-2xp); }
nav.topo .busca:focus-within { border-color: var(--pe-marca); }

/* O cadeado da nota de privacidade era um emoji. Emoji nao e' iconografia:
   ele muda de desenho em cada sistema e some onde nao ha fonte de emoji
   (visto renderizando como retangulo vazio). A informacao ja esta na frase e
   o bloco ja tem lombada propria. */
.pc-priv > [aria-hidden="true"] { display: none; }

/* .olho: versalete unico do sistema. */
.olho { font-family: var(--pe-fonte-dado); font-weight: 600; font-size: var(--pe-t-3xp);
  letter-spacing: var(--pe-track-versalete); text-transform: uppercase;
  color: var(--pe-tinta-mudo); }

@media (max-width: 640px) {
  nav.topo .busca { min-width: 0; width: 100%; }
}

/* A ficha desce para o PE do cartao. Sem isto ela flutua logo abaixo do
   titulo, e como titulo tem uma ou duas linhas, a fileira de reguas fica
   serrilhada — e regua serrilhada nao se compara de relance, que e' a unica
   razao de a regua ser fixa. */
.livrocard, .cardcapa { height: 100%; }
.livrocard .legenda, .cardcapa .titulo-mini { display: flex; flex-direction: column; flex: 1; }
.pe-ficha { margin-top: auto; padding-top: var(--pe-e-3); }
.pista { align-items: stretch; }

/* Legenda da regua. A janela e' um desenho novo: ele so' informa se alguem
   disser, uma vez por pagina, o que ele mede. */
.pe-legenda-janela {
  display: flex; align-items: center; gap: var(--pe-e-4); flex-wrap: wrap;
  margin: var(--pe-e-5) 0 var(--pe-e-6); padding: var(--pe-e-4) 0;
  border-top: 1px solid var(--pe-linha);
  border-bottom: 1px solid var(--pe-linha);
  font-family: var(--pe-fonte-dado); font-size: var(--pe-t-2xp);
  color: var(--pe-tinta-apoio); line-height: 1.5;
}
.pe-legenda-janela .pe-janela { width: 132px; flex: none; }
.pe-legenda-janela p { margin: 0; max-width: 70ch; }
.pe-legenda-janela b { color: var(--pe-tinta); font-weight: 600; }

/* .capa::before — uma faixa em degrade de 6 px na borda esquerda, imitando a
   lombada de um livro POR CIMA da arte da capa. Sai: a capa e' obra de
   ilustrador creditado, e desenhar uma lombada falsa em cima dela e' inventar
   um objeto que nao existe. A profundidade quem da' e' a sombra do pe, que
   descreve um fato (o livro esta em pe) em vez de fingir um. */
.capa::before { display: none; }
.capa { background: transparent; box-shadow: none; border-radius: 0; margin: 0; }

/* .dims .nt e' filho de .dh, nao irmao — a grade de duas colunas em .d nunca
   ia alcanca-lo. A linha e': rotulo · peso ....... nota, alinhada a direita. */
.dims .d { display: block; }
.dims .dh { display: flex; align-items: baseline; gap: var(--pe-e-2); width: 100%; }
.dims .dh .nt { margin-left: auto; font-size: var(--pe-t-xp); }
.dims .dexp { margin-top: 6px; }

/* align-items:end fazia o cartao encolher para o proprio conteudo e a regua
   voltava a serrilhar. stretch + margin-top:auto na ficha e' o par certo. */
.grade-livros { align-items: stretch; }

/* A grade tinha linha de prateleira: um repeating-linear-gradient no fundo,
   com o traco fixo em 150 px (a altura da capa) e a linha da grade em 260 px.
   Funcionava enquanto o cartao tivesse exatamente 260 px. Com a ficha ele
   passa disso, e altura travada em grade nao estica: corta.
   A linha passa a ser desenhada no PE DA CAPA (.capa::after), que e' onde ela
   pertence e que continua certa qualquer que seja a altura do cartao. */
.grade-livros {
  grid-auto-rows: auto; align-items: stretch;
  background-image: none;
  gap: var(--pe-e-7) var(--pe-e-5);
  padding: var(--pe-e-4) 2px var(--pe-e-8);
}
.pista { background-image: none; padding-bottom: var(--pe-e-6); }

/* No celular a busca vinha com order:-1 e aparecia ACIMA da marca: a primeira
   coisa da pagina era um campo de busca vazio, e a marca so' depois. Busca e'
   ferramenta de quem ja sabe o que quer; a marca e' o que diz onde a pessoa
   esta. A ordem volta a ser marca, navegacao, busca. */
@media (max-width: 820px) {
  nav.topo .busca { order: 3; margin: 12px 0 0; width: 100%; }
  nav.topo .links { order: 2; }
  nav.topo a.marca { order: 1; }
}

/* Botao desabilitado continua tendo de ser LEGIVEL: ele diz o que vai
   acontecer quando o campo estiver preenchido. */
.pc-ir:disabled {
  background: transparent; color: var(--pe-tinta-mudo);
  box-shadow: inset 0 0 0 1px var(--pe-linha-forte);
}

/* ─────────────────────────────────────────── 13. A CHAVE DE LEITURA ────────*/
.notacao {
  margin: var(--pe-e-6) 0 var(--pe-e-8);
  padding: var(--pe-e-6) 0;
  border-top: 1px solid var(--pe-linha-forte);
  border-bottom: 1px solid var(--pe-linha-forte);
}
.notacao > h2 { font-size: var(--pe-t-m); }
.notacao-item { margin: var(--pe-e-6) 0 0; }
.notacao-item .olho { margin: 0 0 var(--pe-e-3); color: var(--pe-tinta-apoio); }
.notacao-txt {
  margin: var(--pe-e-4) 0 0; font-size: var(--pe-t-xp); line-height: 1.55;
  color: var(--pe-tinta-apoio); max-width: var(--pe-medida);
}
.notacao-txt b { color: var(--pe-tinta); font-weight: 600; }
.notacao-item .pe-janela--painel { margin: 0; }

/* Dentro da chave de leitura o componente ja vem rotulado pelo item ("1 · a
   janela de idade"); repetir o titulo interno seria dizer a mesma coisa duas
   vezes com dois estilos diferentes. */
.notacao .pe-janela__titulo { display: none; }

/* ══════════════════════════════ 14. O DETALHAMENTO DA RUBRICA ══════════════
   As cinco descrições de dimensão entram fechadas. Elas não são evidência:
   medido nas 271 páginas publicadas, há CINCO textos distintos ali — o de
   "texto" aparece 261 vezes, palavra por palavra. É a legenda da rubrica.
   O lastro e as fontes, que mudam de obra para obra, ficam abertos acima.

   O gatilho é uma régua, como todo o resto do sistema: lombada à esquerda,
   e um sinal que gira. Nada de "botão de accordion". */
.dims-det { margin: var(--pe-e-5) 0 var(--pe-e-4); }
.dims-det > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: var(--pe-e-3); padding: var(--pe-e-3) 0;
  border-top: 1px solid var(--pe-linha);
  border-bottom: 1px solid var(--pe-linha);
  font-family: var(--pe-fonte-dado); font-weight: 600; font-size: var(--pe-t-2xp);
  letter-spacing: .01em; color: var(--pe-tinta-apoio);
}
.dims-det > summary::-webkit-details-marker { display: none; }
.dims-det > summary::before {
  content: ""; flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--pe-acao); border-bottom: 2px solid var(--pe-acao);
  transform: rotate(-45deg) translate(-2px, -2px);
  transition: transform var(--pe-tempo-1) var(--pe-curva);
}
.dims-det[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
.dims-det > summary:hover { color: var(--pe-marca); }
.dims-det[open] > summary { border-bottom-color: transparent; }
.dims-det .porque-intro { margin-top: var(--pe-e-4); }
/* Impressão e busca dentro da página não podem depender do clique. */
@media print { .dims-det > summary { display: none; } .dims-det > *:not(summary) { display: revert; } }

/* "O que a obra trabalha" agora abre a coluna de análise, logo abaixo da
   nota. Ganha peso de prosa editorial — é o único texto da página escrito
   sobre ESTA obra. */
.trabalha-card {
  margin: var(--pe-e-4) 0 var(--pe-e-4); font-size: var(--pe-t-p);
  line-height: 1.5; color: var(--pe-tinta); max-width: 56ch;
}
.trabalha-card b { color: var(--pe-marca); font-weight: 600; }
.categorias-chips { margin: 0 0 var(--pe-e-6); }

/* O estado desabilitado do "Ver a estante" estava fraco demais — lia como
   ausência de botão, não como botão que ainda não pode ser clicado. Ele
   continua SEM a cor de ação de propósito (prometer clique antes da hora é
   pior), mas com contorno firme e o cursor certo. */
.pc-ir:disabled {
  box-shadow: inset 0 0 0 2px var(--pe-neutro-300);
  color: var(--pe-tinta-apoio);
}

/* CORREÇÃO 18/08/2026 — regressão introduzida por mim no kit v2.
   `.capa-publi` é `position:absolute; top:6px` dentro de `.capa`. Isso
   funcionava enquanto a capa era centralizada na moldura; quando o sistema v2
   passou a apoiá-la no PÉ (`align-items:flex-end`, para o livro assentar na
   linha da prateleira), a folga migrou toda para o topo — e o selo passou a
   flutuar acima da arte, órfão, parecendo etiqueta de outra coisa.

   O selo NÃO pode sumir: na página de obra a capa é o link de afiliado, e o
   CONAR exige identificação junto do link, visível sem rolar e sem passar o
   mouse. Ele desce para o pé da arte, que é onde ela está agora. */
.capa .capa-publi {
  top: auto; bottom: 8px; left: 8px; z-index: 5;
  background: rgba(27, 25, 21, .82); color: #fff; border: 0;
  border-radius: var(--pe-r-m); padding: .22em .6em;
  font-size: var(--pe-t-3xp); letter-spacing: .07em;
}

/* O rodapé passa a usar o lockup horizontal em vetor. A margem negativa que
   havia aqui existia para comer o ar em volta do PNG do kit v1 (1600×440 com
   folga desenhada dentro); o SVG do v2 é justo — o viewBox é a marca. */
footer .fassin img { margin: 0; max-width: 260px; }

/* O endereço ao lado do botão "Falar comigo". Existe para o caso em que o
   `mailto:` não leva a lugar nenhum — quem usa webmail clica e nada acontece.
   Texto selecionável é o plano B, e não custa nada a quem tem cliente de
   e-mail configurado. */
.linha-acao { display: flex; align-items: center; gap: var(--pe-e-4); flex-wrap: wrap; }
.acao-alt {
  font-family: var(--pe-fonte-dado); font-size: var(--pe-t-2xp);
  color: var(--pe-tinta-mudo);
}
.acao-alt a { color: var(--pe-tinta-apoio); text-decoration-thickness: .06em; }
.acao-alt a:hover { color: var(--pe-acao); }

/* Página de endereço inexistente. Sem cara de erro de sistema: é uma página
   editorial curta que explica o que aconteceu e oferece as saídas. */
.lista-404 { list-style: none; margin: var(--pe-e-4) 0 var(--pe-e-6); padding: 0; }
.lista-404 li {
  padding: var(--pe-e-3) 0 var(--pe-e-3) var(--pe-e-4);
  border-top: 1px solid var(--pe-linha);
  border-left: var(--pe-lombada) solid var(--pe-graf-1);
  font-size: var(--pe-t-xp); color: var(--pe-tinta-apoio); line-height: 1.5;
}
.lista-404 li:nth-child(2) { border-left-color: var(--pe-graf-2); }
.lista-404 li:nth-child(3) { border-left-color: var(--pe-graf-3); }
.lista-404 li:nth-child(4) { border-left-color: var(--pe-linha-forte); }
.lista-404 li a {
  font-family: var(--pe-fonte-titulo); font-weight: 600; font-size: var(--pe-t-p);
  color: var(--pe-marca); text-decoration: none;
}
.lista-404 li a:hover { color: var(--pe-acao); }

/* ═══════════════════════════════ 15. FICHA TÉCNICA ═════════════════════════
   O que o objeto é, em oposição ao que a curadoria acha dele. Por isso ele é
   desenhado como registro, não como argumento: sans em tudo (é dado), régua
   fina entre linhas, rótulo em versalete. Sem caixa — a página não tem
   nenhuma, e esta não seria a primeira. */
.ficha-tecnica {
  margin: var(--pe-e-7) 0 var(--pe-e-6);
  padding-top: var(--pe-e-4);
  border-top: 1px solid var(--pe-linha-forte);
  max-width: 560px;
}
.ficha-tecnica > .olho { margin: 0 0 var(--pe-e-3); font-size: var(--pe-t-3xp); }
.ft-lista { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--pe-e-6); }
.ft-linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--pe-e-3);
  padding: var(--pe-e-3) 0; border-top: 1px solid var(--pe-linha);
  font-family: var(--pe-fonte-dado); font-size: var(--pe-t-2xp); line-height: 1.35;
}
.ft-linha dt { color: var(--pe-tinta-mudo); margin: 0; }
.ft-linha dd {
  margin: 0; text-align: right; color: var(--pe-tinta);
  font-weight: var(--pe-peso-dado); font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) { .ft-lista { grid-template-columns: 1fr; } }

/* ═══════════════════════════ 16. PESSOA ════════════════════════════════════
   Uma página por pessoa, não uma por papel — 55 pessoas do acervo assinam em
   mais de um papel. O papel vira o cabeçalho de cada prateleira dentro dela,
   reusando a gramática de estante do resto do site. */

/* O crédito na primeira dobra da obra: link discreto. Ele não pode competir
   com o título, e não pode parecer botão — é atribuição, não ação. */
.pes-link { color: inherit; text-decoration-color: var(--pe-linha-forte);
  text-underline-offset: .2em; }
.pes-link:hover { color: var(--pe-acao); text-decoration-color: currentColor; }

/* Índice de gente */
.pes-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--pe-e-6) var(--pe-e-7); margin: var(--pe-e-6) 0 var(--pe-e-8); }
.pes-grupo .olho { margin: 0 0 var(--pe-e-2); padding-bottom: var(--pe-e-2);
  border-bottom: 1px solid var(--pe-linha-forte); color: var(--pe-marca); }
.pes-lista { list-style: none; margin: 0; padding: 0; }
.pes-lista li { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--pe-e-3); padding: 7px 0; border-top: 1px solid var(--pe-linha); }
.pes-lista li:first-child { border-top: 0; }
.pes-lista a { font-family: var(--pe-fonte-corpo); font-size: var(--pe-t-xp);
  color: var(--pe-marca); text-decoration: none; }
.pes-lista a:hover { color: var(--pe-acao); }
.pes-lista i { font-style: normal; font-family: var(--pe-fonte-dado);
  font-size: var(--pe-t-3xp); color: var(--pe-tinta-mudo);
  font-variant-numeric: tabular-nums; }

/* Lacuna de crédito declarada. Não é erro nem alerta: é o mesmo "sem dado" da
   régua de lastro, na linha de autoria. Cor de ausência, itálico, sem link. */
.cred-ausente { color: var(--pe-ausencia); font-style: italic; }

/* ─────────────────────── 17. A CAPA ASSENTA, EM TODA PÁGINA ────────────────
   Achado pelo titular em 18/08/2026, na grade do /explorar/: capa mais baixa
   que a moldura ficava GRUDADA NO TOPO, com a folga sobrando embaixo — o
   livro flutuando acima da prateleira, que é o contrário do que o sistema
   inteiro afirma.

   A causa não era o alinhamento: era o `display`. `explorar.py` traz
   `.expl-grade .capa{display:block}` — especificidade (0,2,0) contra os
   (0,1,0) de `.capa{display:flex}` do sistema. Vence por especificidade,
   independentemente da ordem na folha, e com `display:block` o
   `align-items:flex-end` fica inerte: existe, é lido pelo navegador, e não
   governa nada.

   Lição prática: quando um valor computado bate com o que você escreveu mas o
   desenho não obedece, confira a PROPRIEDADE QUE HABILITA aquele valor. Aqui
   o `align-items` estava certo e inútil.

   A regra abaixo devolve o flex nas grades que o desmontaram, mantendo o que
   cada módulo tinha de próprio (a margem do explorar, a altura do recorte). */
.expl-grade .capa,
.rec-pilha .capa {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.expl-grade .capa { margin: 0 0 8px; }

/* ────────────────── 18. NAVEGAÇÃO CRUZADA: prateleira × idade ──────────────
   Mesma fita do seletor de idade, reusada nos dois sentidos. Cada botão traz a
   contagem daquela célula — prateleira que promete mostra quanto entrega. */
.fita-prateleira, .fita-idade { margin: var(--pe-e-5) 0 var(--pe-e-4); }
.fita-prateleira .olho, .fita-idade .olho { margin: 0 0 var(--pe-e-3); }
.fita-prateleira ul, .fita-idade ul {
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0;
}
.fita-prateleira .op, .fita-idade .op {
  display: inline-flex; align-items: baseline; gap: .45em; white-space: nowrap;
  font-family: var(--pe-fonte-dado); font-size: var(--pe-t-2xp); font-weight: 500;
  color: var(--pe-tinta-apoio); text-decoration: none;
  padding: .5em .85em; border: 1px solid var(--pe-linha-forte);
  border-radius: var(--pe-r-pilula); background: transparent;
}
.fita-prateleira .op i, .fita-idade .op i {
  font-style: normal; font-size: var(--pe-t-3xp); color: var(--pe-tinta-mudo);
  font-variant-numeric: tabular-nums;
}
.fita-prateleira .op:hover, .fita-idade a.op:hover {
  border-color: var(--pe-marca); color: var(--pe-marca);
}
.fita-idade .op.atual {
  background: var(--pe-marca); border-color: var(--pe-marca); color: var(--pe-sobre-marca);
}
.fita-idade .op.atual i { color: var(--pe-neutro-300); }
/* Faixa sem nenhuma obra nesta prateleira: aparece com o zero à vista, e não
   clicável. "Olhamos e não há" é informação; sumir é silêncio. */
.fita-idade .op.vazia {
  border-style: dashed; border-color: var(--pe-linha);
  color: var(--pe-ausencia); cursor: default;
}
.fita-aviso {
  margin: var(--pe-e-3) 0 0; font-family: var(--pe-fonte-dado);
  font-size: var(--pe-t-2xp); color: var(--pe-tinta-mudo);
}