/* =========================================================================
   além — tokens e peças de base da nova linguagem (direção A)
   Gerado a partir do canvas "além — Capa e Revista", 9 out 2026.
   Regra-mãe: o preto é TINTA (texto, filetes, contornos, botões, logotipo)
   ou TELA (player, abertura da Revista, faixa de Vídeos). Nunca fundo
   escuro só para destacar.
   ========================================================================= */

:root {
  /* ---------- Pretos (neutros, sem verde-petróleo) ---------- */
  --alem-nanquim: #0c0d0e;        /* preto novo: telas, botões, barras */
  --alem-tinta: #111213;          /* texto, filetes, contornos (substitui #171a1c e #14181c) */
  --alem-tela-funda: #050606;     /* fundo do player / abertura escura */
  --alem-tela-elevada: #1a1b1c;   /* trilhos e cartões sobre a tela (substitui #202c30) */
  --alem-linha-tela: #2c2d2e;     /* divisórias sobre fundo escuro */
  --alem-contorno-tela: #3a3b3c;  /* contorno de botões sobre fundo escuro */
  --alem-texto2-tela: #a9a49c;    /* texto secundário sobre nanquim (7,8:1) */
  --alem-texto3-tela: #c9c4bb;    /* resumos sobre nanquim */

  /* ---------- Papel ---------- */
  --alem-papel: #f6f3ee;
  --alem-papel-capa: #ece7de;     /* faixa de Colunas, créditos, citações */
  --alem-campo: #fffdfa;          /* encarte, cartões, campos, trilho da cápsula */
  --alem-areia: #e9e4db;          /* trilho do sumário / índice, hover de ícone */
  --alem-areia-hover: #ded8ce;
  --alem-linha: #d8d0c3;
  --alem-linha-forte: #c9c0b4;
  --alem-texto2: #5b5751;         /* 6,5:1 sobre papel */
  --alem-texto-corpo: #1d1f21;
  --alem-texto-suave: #3b3935;

  /* ---------- Destaques ---------- */
  --alem-verde: #067378;          /* rótulos e faixa de apoio — 5,0:1 sobre papel */
  --alem-verde-hover: #05565a;
  --alem-ciano: #36aeb0;          /* só brilho, anel, rótulo sobre tela */
  --alem-ciano-claro: #92e1dd;    /* dígitos do visor */

  /* ---------- Brilhos ---------- */
  --alem-brilho-hover: 0 0 0 1px var(--alem-ciano), 0 0 22px rgba(54,174,176,.45);
  --alem-brilho-ativo: 0 0 0 1px rgba(54,174,176,.6), 0 0 14px rgba(54,174,176,.28);
  --alem-brilho-sobre-tela: 0 0 0 2px var(--alem-ciano), 0 0 24px rgba(54,174,176,.55);
  --alem-varredura: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);

  /* ---------- Formas ---------- */
  --alem-raio-jornal: 28px 6px 6px 6px;     /* "canto de jornal" para caixas grandes */
  --alem-raio-jornal-p: 18px 4px 4px 4px;   /* fotos, cartões menores */
  --alem-pilula: 999px;
  --alem-contorno: 1.5px solid var(--alem-tinta);

  /* ---------- Tipografia ---------- */
  --alem-f-titulo: 'Fraunces', serif;          /* 600–650; títulos −1,6% a −2,4% */
  --alem-f-leitura: 'Source Serif 4', serif;
  --alem-f-interface: 'Source Sans 3', sans-serif;
  --alem-f-mono: 'IBM Plex Mono', monospace;

  /* ---------- Movimento ---------- */
  --alem-curva: cubic-bezier(.2, 0, 0, 1);       /* padrão, 240 ms */
  --alem-curva-entrada: cubic-bezier(.05, .7, .1, 1);  /* entradas, 320–480 ms */
  --alem-curva-saida: cubic-bezier(.3, 0, .8, .15);    /* saídas, 220–280 ms */

  /* ---------- Grade ---------- */
  --alem-conteudo: 1376px;   /* 1440 − 2 × 32 */
  --alem-margem: 32px;       /* 20px no celular */
  --alem-medida: 680px;      /* largura do texto de leitura */
}

/* =========================================================================
   5ª entrega — MODO ESCURO: tokens
   O tema é decidido por JS (data-tema="claro|escuro" no <html>; ver 05-modo-escuro.md).
   Sem JS, ou sem data-tema, o site é claro. Cada token claro tem um espelho no bloco
   escuro mais abaixo; o que não aparece lá não muda (telas, ciano, brilhos).
   ========================================================================= */
:root {
  /* tokens novos do guia (iguais ao desenho atual no tema claro) */
  --alem-verde-claro: #e9f4f2;
  --alem-verde-faixa: #067378;       /* fundo das faixas de apoio; texto creme por cima */
  --alem-botao-fundo: #0c0d0e;       /* botão primário: inverte no escuro */
  --alem-botao-texto: #f6f3ee;
  --alem-veu: rgba(246,243,238,.72); /* véu atrás de gavetas e busca */
  --alem-documento-sombra: #e2dccf;
  --alem-documento-orelha: #e2dccf;
  --alem-marca-dagua: #ddd6c8;       /* disco decorativo atrás do título do Apoie */
  --alem-desabilitado: #8a847b;
  --alem-alerta: #e3b04b;            /* só "esperando alguém" (não muda) */
  /* fora do guia: pedidos pela troca das cores soltas (ver docs/MODO-ESCURO.md) */
  --alem-erro: #a43131;              /* mensagens de erro em texto (espelho no escuro) */
  /* fixos nos dois temas: neutros usados em telas, brilhos e sombras */
  --alem-texto-tela: #f6f3ee;        /* texto claro sobre telas (não é o papel: o papel escurece no modo escuro) */
  --alem-branco: #ffffff;
  --alem-preto: #000000;
  --alem-sombra: #111213;            /* sombras e filetes translúcidos que não devem virar creme */
}

/* Cores de tela herdadas: valores atuais preservados. Telas (player, faixa de vídeos,
   gaveta, placar, abertura da Revista) não mudam de cor no modo escuro, então estas
   cores só ganharam nome. Quando o desenho for consolidado, trocar pelas oito da paleta. */
:root {
  --alem-tela-777777: #777777;
  --alem-tela-555555: #555555;
  --alem-tela-c7c0b6: #c7c0b6;
  --alem-tela-5d5d5a: #5d5d5a;
  --alem-tela-b8b0a5: #b8b0a5;
  --alem-tela-0c1213: #0c1213;
  --alem-tela-8ccfd0: #8ccfd0;
  --alem-tela-292d30: #292d30;
  --alem-tela-2a3032: #2a3032;
  --alem-tela-3b4549: #3b4549;
  --alem-tela-b9b9b3: #b9b9b3;
  --alem-tela-495255: #495255;
  --alem-tela-b9bdb9: #b9bdb9;
  --alem-tela-070a0c: #070a0c;
  --alem-tela-d8dad7: #d8dad7;
  --alem-tela-d5d6d2: #d5d6d2;
  --alem-tela-d7d1c7: #d7d1c7;
  --alem-tela-113b40: #113b40;
  --alem-tela-d2cec7: #d2cec7;
  --alem-tela-168da5: #168da5;
  --alem-tela-d4d0c8: #d4d0c8;
  --alem-tela-102629: #102629;
  --alem-tela-d9d6ce: #d9d6ce;
  --alem-tela-5d6765: #5d6765;
  --alem-tela-e0ddd5: #e0ddd5;
  --alem-tela-e4eff0: #e4eff0;
  --alem-tela-0a7076: #0a7076;
  --alem-tela-737571: #737571;
  --alem-tela-d2d6d2: #d2d6d2;
  --alem-tela-222a2d: #222a2d;
  --alem-tela-697174: #697174;
  --alem-tela-d1d4d0: #d1d4d0;
  --alem-tela-67c7c8: #67c7c8;
  --alem-tela-5c5a56: #5c5a56;
  --alem-tela-3fb6b8: #3fb6b8;
  --alem-tela-bfe6e4: #bfe6e4;
  --alem-tela-d3dad8: #d3dad8;
  --alem-tela-3a4248: #3a4248;
  --alem-tela-292f34: #292f34;
  --alem-tela-d3cabc: #d3cabc;
  --alem-tela-e6e0d7: #e6e0d7;
  --alem-tela-79cecb: #79cecb;
  --alem-tela-263438: #263438;
  --alem-tela-c6cbc6: #c6cbc6;
  --alem-tela-89d2cf: #89d2cf;
  --alem-tela-d3c9b6: #d3c9b6;
  --alem-tela-53656a: #53656a;
  --alem-tela-213237: #213237;
  --alem-tela-075d61: #075d61;
  --alem-tela-70c7c4: #70c7c4;
  --alem-tela-82d4d1: #82d4d1;
  --alem-tela-1d2529: #1d2529;
  --alem-tela-0c1315: #0c1315;
  --alem-tela-242a2e: #242a2e;
  --alem-tela-343b40: #343b40;
  --alem-tela-002d2f: #002d2f;
  --alem-tela-d0d0cd: #d0d0cd;
  --alem-tela-7ed6d3: #7ed6d3;
  --alem-tela-101316: #101316;
  --alem-tela-080a0c: #080a0c;
  --alem-tela-d5d6d3: #d5d6d3;
  --alem-tela-e1eeee: #e1eeee;
  --alem-tela-aebdbb: #aebdbb;
  --alem-tela-253438: #253438;
  --alem-tela-aaa9a5: #aaa9a5;
  --alem-tela-a5a8a6: #a5a8a6;
  --alem-tela-087f83: #087f83;
  --alem-tela-0c1012: #0c1012;
  --alem-tela-0e1417: #0e1417;
  --alem-tela-e9e4d8: #e9e4d8;
  --alem-tela-067378: #067378;
  --alem-tela-cfeeea: #cfeeea;
  --alem-tela-e2dccf: #e2dccf;
  --alem-tela-6f6c67: #6f6c67;
  --alem-tela-5c5d5e: #5c5d5e;
  --alem-tela-8d8a84: #8d8a84;
  --alem-tela-4a4b4c: #4a4b4c;
  --alem-tela-d9d4cb: #d9d4cb;
  --alem-tela-172326: #172326;
}

/* =========================== Tema escuro =========================== */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --alem-papel: #141412;           /* papel noturno: grafite quente, não preto */
  --alem-papel-capa: #1b1a17;
  --alem-campo: #1f1e1b;
  --alem-areia: #262521;
  --alem-areia-hover: #2e2c27;
  --alem-linha: #35332e;
  --alem-linha-forte: #46433c;
  --alem-tinta: #e9e4db;           /* a tinta vira creme (texto, filetes, contornos) */
  --alem-texto-corpo: #dcd7ce;
  --alem-texto-suave: #c4beb3;
  --alem-texto2: #a39e94;
  --alem-verde: #4fc4c6;           /* o verde sai (3,3:1); entra o ciano (8,8:1) */
  --alem-verde-hover: #92e1dd;
  --alem-verde-claro: #122625;
  --alem-verde-faixa: #0b3f42;
  --alem-botao-fundo: #e9e4db;
  --alem-botao-texto: #141412;
  --alem-veu: rgba(20,20,18,.72);
  --alem-documento-sombra: #2e2c27;
  --alem-documento-orelha: #3a3832;
  --alem-marca-dagua: #2a2823;
  --alem-desabilitado: #6e6a62;
  --alem-erro: #f2a0a0;
  /* espelhos dos tokens antigos (--alem-paper, --alem-ink…): o CSS legado ainda os usa */
  --alem-paper: #141412;
  --alem-paper-deep: #1b1a17;
  --alem-paper-cover: #1b1a17;
  --alem-nav-pill: #262521;
  --alem-nav-pill-active: #2e2c27;
  --alem-paper-video: #141412;
  --alem-rule: #46433c;
  --alem-rule-light: #35332e;
  --alem-ink: #e9e4db;
  --alem-muted: #a39e94;
  --alem-accent: #4fc4c6;
  --alem-accent-hover: #92e1dd;
  --alem-accent-active: #92e1dd;
  --alem-accent-soft: #1a4a4c;
  --alem-accent-pale: #122625;
  --alem-night-text: #f6f3ee;     /* texto sobre telas: não segue o papel */
  --alem-home-muted: #a39e94;
  --alem-home-rule: #46433c;
}
/* >>> telas (gerado por pins.py) */
/* Telas não mudam de cor no modo escuro: dentro delas os tokens voltam ao valor do tema claro. */
:root[data-tema="escuro"] .alem-gaveta,
:root[data-tema="escuro"] .alem-key-points-title,
:root[data-tema="escuro"] .alem-home-edition-pill,
:root[data-tema="escuro"] .alem-home-video-band,
:root[data-tema="escuro"] .alem-core-front-dark,
:root[data-tema="escuro"] .alem-barra-materia,
:root[data-tema="escuro"] .alem-home-edition-image,
:root[data-tema="escuro"] .alem-home-play,
:root[data-tema="escuro"] .alem-video-special-stage,
:root[data-tema="escuro"] .alem-esp-barra,
:root[data-tema="escuro"] .alem-esp-proxima,
:root[data-tema="escuro"] .alem-ap-painel,
:root[data-tema="escuro"] .alem-ap-tela,
:root[data-tema="escuro"] .alem-ap-faixa--3,
:root[data-tema="escuro"] .alem-cookie-embed,
:root[data-tema="escuro"] .alem-tp-placar,
:root[data-tema="escuro"] .alem-edition-feature,
:root[data-tema="escuro"] .alem-tr-soon,
:root[data-tema="escuro"] .alem-home-extra-band,
:root[data-tema="escuro"] .alem-home-live,
:root[data-tema="escuro"] .alem-ap-barra,
:root[data-tema="escuro"] .alem-video-mobile-nav,
:root[data-tema="escuro"] .alem-vcap-pill,
:root[data-tema="escuro"] .alem-tr-overlay,
:root[data-tema="escuro"] .alem-cr-visor,
:root[data-tema="escuro"] .alem-cr-moldura,
:root[data-tema="escuro"] .alem-cr-curios,
:root[data-tema="escuro"] .alem-spoiler-etiqueta,
:root[data-tema="escuro"] .alem-cr-mono,
:root[data-tema="escuro"] .alem-ed-todas,
:root[data-tema="escuro"] .alem-cl-ecl b,
:root[data-tema="escuro"] .alem-cr-media,
:root[data-tema="escuro"] .alem-edt-posicao,
:root[data-tema="escuro"] .alem-inst-eclipse {
  --alem-papel: #f6f3ee;
  --alem-papel-capa: #ece7de;
  --alem-campo: #fffdfa;
  --alem-areia: #e9e4db;
  --alem-areia-hover: #ded8ce;
  --alem-linha: #d8d0c3;
  --alem-linha-forte: #c9c0b4;
  --alem-tinta: #111213;
  --alem-texto-corpo: #1d1f21;
  --alem-texto-suave: #3b3935;
  --alem-texto2: #5b5751;
  --alem-verde: #067378;
  --alem-verde-hover: #05565a;
  --alem-verde-claro: #e9f4f2;
  --alem-verde-faixa: #067378;
  --alem-botao-fundo: #0c0d0e;
  --alem-botao-texto: #f6f3ee;
  --alem-desabilitado: #8a847b;
  --alem-erro: #a43131;
  --alem-documento-sombra: #e2dccf;
  --alem-documento-orelha: #e2dccf;
  --alem-marca-dagua: #ddd6c8;
  --alem-paper: #f6f3ee;
  --alem-paper-deep: #efeae1;
  --alem-paper-cover: #ece7de;
  --alem-nav-pill: #e9e4db;
  --alem-nav-pill-active: #ded8ce;
  --alem-paper-video: #f4f1ea;
  --alem-rule: #b8afa1;
  --alem-rule-light: #d8d0c4;
  --alem-home-paper: #f6f3ee;
  --alem-home-soft: #ece7de;
  --alem-home-ink: #111213;
  --alem-home-muted: #5b5751;
  --alem-home-rule: #c9c0b4;
  --alem-home-teal: #067378;
  --alem-home-teal-deep: #05565a;
  --alem-home-white: #f6f3ee;
  --alem-night-text: #f6f3ee;
  --alem-ink: #111213;
  --alem-muted: #534f4a;
  --alem-accent: #067378;
  --alem-accent-hover: #05565a;
  --alem-accent-active: #043f42;
  --alem-accent-soft: #b9e0df;
  --alem-accent-pale: #dcefed;
  --p: #f6f3ee;
  --ink: #111213;
  --vd: #067378;
  --ln: #d8d0c3;
  --t2: #5b5751;
  --alem-veu: rgba(246,243,238,.72);
}

/* Faixas de apoio: fundo próprio (--alem-verde-faixa, verde-escuro no escuro) e texto creme que não escurece. */
:root[data-tema="escuro"] .alem-home-support-callout,
:root[data-tema="escuro"] .alem-article-support-orbit,
:root[data-tema="escuro"] .alem-article-support-kicker,
:root[data-tema="escuro"] .alem-article-support-index,
:root[data-tema="escuro"] .alem-support-kicker,
:root[data-tema="escuro"] .alem-esp-abertura,
:root[data-tema="escuro"] .alem-esp-apoio,
:root[data-tema="escuro"] .alem-edition-support,
:root[data-tema="escuro"] :is(.alem-article-content, .alem-photo-content) > .alem-support-invitation,
:root[data-tema="escuro"] .alem-video-special-support,
:root[data-tema="escuro"] .alem-support-hero,
:root[data-tema="escuro"] .alem-cr-apoio-topo {
  --alem-papel: #f6f3ee;
  --alem-papel-capa: #ece7de;
  --alem-campo: #fffdfa;
  --alem-areia: #e9e4db;
  --alem-areia-hover: #ded8ce;
  --alem-linha: #d8d0c3;
  --alem-linha-forte: #c9c0b4;
  --alem-tinta: #111213;
  --alem-texto-corpo: #1d1f21;
  --alem-texto-suave: #3b3935;
  --alem-texto2: #5b5751;
  --alem-verde: #067378;
  --alem-verde-hover: #05565a;
  --alem-verde-claro: #e9f4f2;
  --alem-botao-fundo: #0c0d0e;
  --alem-botao-texto: #f6f3ee;
  --alem-desabilitado: #8a847b;
  --alem-erro: #a43131;
  --alem-documento-sombra: #e2dccf;
  --alem-documento-orelha: #e2dccf;
  --alem-marca-dagua: #ddd6c8;
  --alem-paper: #f6f3ee;
  --alem-paper-deep: #efeae1;
  --alem-paper-cover: #ece7de;
  --alem-nav-pill: #e9e4db;
  --alem-nav-pill-active: #ded8ce;
  --alem-paper-video: #f4f1ea;
  --alem-rule: #b8afa1;
  --alem-rule-light: #d8d0c4;
  --alem-home-paper: #f6f3ee;
  --alem-home-soft: #ece7de;
  --alem-home-ink: #111213;
  --alem-home-muted: #5b5751;
  --alem-home-rule: #c9c0b4;
  --alem-home-teal: #067378;
  --alem-home-teal-deep: #05565a;
  --alem-home-white: #f6f3ee;
  --alem-night-text: #f6f3ee;
  --alem-ink: #111213;
  --alem-muted: #534f4a;
  --alem-accent: #067378;
  --alem-accent-hover: #05565a;
  --alem-accent-active: #043f42;
  --alem-accent-soft: #b9e0df;
  --alem-accent-pale: #dcefed;
  --p: #f6f3ee;
  --ink: #111213;
  --vd: #067378;
  --ln: #d8d0c3;
  --t2: #5b5751;
  --alem-veu: rgba(246,243,238,.72);
}
@media (max-width:820px) {
  :root[data-tema="escuro"] .alem-home-section-nav {
  --alem-papel: #f6f3ee;
  --alem-papel-capa: #ece7de;
  --alem-campo: #fffdfa;
  --alem-areia: #e9e4db;
  --alem-areia-hover: #ded8ce;
  --alem-linha: #d8d0c3;
  --alem-linha-forte: #c9c0b4;
  --alem-tinta: #111213;
  --alem-texto-corpo: #1d1f21;
  --alem-texto-suave: #3b3935;
  --alem-texto2: #5b5751;
  --alem-verde: #067378;
  --alem-verde-hover: #05565a;
  --alem-verde-claro: #e9f4f2;
  --alem-verde-faixa: #067378;
  --alem-botao-fundo: #0c0d0e;
  --alem-botao-texto: #f6f3ee;
  --alem-desabilitado: #8a847b;
  --alem-erro: #a43131;
  --alem-documento-sombra: #e2dccf;
  --alem-documento-orelha: #e2dccf;
  --alem-marca-dagua: #ddd6c8;
  --alem-paper: #f6f3ee;
  --alem-paper-deep: #efeae1;
  --alem-paper-cover: #ece7de;
  --alem-nav-pill: #e9e4db;
  --alem-nav-pill-active: #ded8ce;
  --alem-paper-video: #f4f1ea;
  --alem-rule: #b8afa1;
  --alem-rule-light: #d8d0c4;
  --alem-home-paper: #f6f3ee;
  --alem-home-soft: #ece7de;
  --alem-home-ink: #111213;
  --alem-home-muted: #5b5751;
  --alem-home-rule: #c9c0b4;
  --alem-home-teal: #067378;
  --alem-home-teal-deep: #05565a;
  --alem-home-white: #f6f3ee;
  --alem-night-text: #f6f3ee;
  --alem-ink: #111213;
  --alem-muted: #534f4a;
  --alem-accent: #067378;
  --alem-accent-hover: #05565a;
  --alem-accent-active: #043f42;
  --alem-accent-soft: #b9e0df;
  --alem-accent-pale: #dcefed;
  --p: #f6f3ee;
  --ink: #111213;
  --vd: #067378;
  --ln: #d8d0c3;
  --t2: #5b5751;
  --alem-veu: rgba(246,243,238,.72);
  }
}
/* <<< telas */
/* Telas ganham um contorno ciano fino no escuro, para não sumirem no fundo. */
:root[data-tema="escuro"] .alem-tela { box-shadow: 0 0 0 1px color-mix(in srgb, var(--alem-ciano, #36aeb0) 50%, transparent); }

/* =========================== Peças de base =========================== */

/* Filete duplo: 3px + 3px de ar + 1px */
.alem-filete { height: 3px; border-top: 3px solid var(--alem-tinta); border-bottom: 1px solid var(--alem-tinta); }

/* Rótulos */
.alem-mono { font-family: var(--alem-f-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }
.alem-chapeu { font-family: var(--alem-f-interface); font-weight: 700; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--alem-verde); }

/* Bolinha de marca (ponto ciano aceso) */
.alem-ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--alem-ciano); box-shadow: 0 0 8px color-mix(in srgb, var(--alem-ciano, #36aeb0) 90%, transparent); flex: none; }

/* Botão primário: pílula nanquim, brilho no hover. 48px (52 no celular). */
.alem-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 48px; padding: 0 24px; border: 0; border-radius: var(--alem-pilula);
  background: var(--alem-nanquim); color: var(--alem-papel);
  font: 700 12px/1 var(--alem-f-interface); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 0 0 1px var(--alem-nanquim); transition: box-shadow .24s var(--alem-curva); cursor: pointer;
}
.alem-btn:hover, .alem-btn:focus-visible { box-shadow: var(--alem-brilho-hover); }

/* Botão de contorno: 44px */
.alem-btn-contorno {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 20px; border: var(--alem-contorno); border-radius: var(--alem-pilula);
  background: transparent; color: var(--alem-tinta);
  font: 700 11.5px/1 var(--alem-f-interface); letter-spacing: .14em; text-transform: uppercase;
  transition: box-shadow .24s var(--alem-curva); cursor: pointer;
}
.alem-btn-contorno:hover { box-shadow: 0 0 0 1px var(--alem-ciano), 0 0 16px color-mix(in srgb, var(--alem-ciano, #36aeb0) 35%, transparent); }

/* Botão claro sobre a tela */
.alem-btn-claro { /* mesmas medidas de .alem-btn */ background: var(--alem-papel); color: var(--alem-nanquim); }
.alem-btn-claro:hover { box-shadow: var(--alem-brilho-sobre-tela); }

/* Cápsula de seções (Capa · Revista · Tendências) — computador */
.alem-capsula { display: flex; gap: 2px; padding: 4px; border: var(--alem-contorno); border-radius: var(--alem-pilula); background: var(--alem-campo); }
.alem-capsula a { height: 40px; padding: 0 22px; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--alem-pilula);
  font: 700 11.5px/1 var(--alem-f-interface); letter-spacing: .15em; text-transform: uppercase; color: var(--alem-tinta);
  transition: box-shadow .24s var(--alem-curva); }
.alem-capsula a:hover { box-shadow: 0 0 0 1px var(--alem-ciano), 0 0 16px color-mix(in srgb, var(--alem-ciano, #36aeb0) 32%, transparent); }
.alem-capsula a[aria-current="page"] { background: var(--alem-nanquim); color: var(--alem-papel); box-shadow: var(--alem-brilho-ativo); }
/* Celular: a cápsula vira barra fixa nanquim, 16px da borda inferior; item atual em pílula de papel com anel ciano. */

/* Visor (números de edição, ranking, capítulos) */
.alem-visor { font-family: var(--alem-f-mono); font-weight: 600; color: var(--alem-ciano-claro); background: var(--alem-nanquim);
  border-radius: 6px; padding: 6px 8px; text-shadow: 0 0 8px color-mix(in srgb, var(--alem-ciano, #36aeb0) 80%, transparent); }

/* Marcador de meia-lua (ligadas da manchete, listas) */
.alem-meialua { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 4px 0 0 0 var(--alem-tinta); transition: all .24s var(--alem-curva); }
a:hover > .alem-meialua { background: var(--alem-ciano); box-shadow: 0 0 0 3px color-mix(in srgb, var(--alem-ciano, #36aeb0) 18%, transparent), 0 0 14px color-mix(in srgb, var(--alem-ciano, #36aeb0) 60%, transparent); }

/* Tela: qualquer superfície escura de vídeo recebe varredura */
.alem-tela { position: relative; background: var(--alem-nanquim); }
.alem-tela::after { content: ""; position: absolute; inset: 0; background-image: var(--alem-varredura); pointer-events: none; }

/* Caixa "canto de jornal" (encarte da Revista, Em resumo, selo de apoio, comentários) */
.alem-caixa { background: var(--alem-campo); border: var(--alem-contorno); border-radius: var(--alem-raio-jornal); overflow: hidden; }
.alem-caixa > .alem-barra { background: var(--alem-nanquim); color: var(--alem-papel); display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 11px 18px 11px 22px; }

/* ====================== Animação: eclipse que acende ======================
   Botões redondos das redes sociais (e pílulas "Siga o além"). */
.alem-rede { position: relative; overflow: hidden; isolation: isolate; width: 34px; height: 34px; border-radius: 50%;
  display: inline-grid; place-items: center; border: var(--alem-contorno); color: var(--alem-tinta);
  transition: color .2s .06s, box-shadow .32s var(--alem-curva); }
.alem-rede::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--alem-nanquim);
  transform: translateX(-102%); transition: transform .34s var(--alem-curva-entrada); z-index: -1; }
.alem-rede::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; z-index: -1;
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--alem-ciano-claro, #92e1dd) 16%, transparent) 0 1px, transparent 1px 3px); transition: opacity .2s .14s; }
.alem-rede:hover::before, .alem-rede:focus-visible::before { transform: none; }
.alem-rede:hover::after, .alem-rede:focus-visible::after { opacity: 1; }
.alem-rede:hover, .alem-rede:focus-visible { color: var(--alem-papel); box-shadow: 0 0 0 1px var(--alem-ciano), 0 0 14px color-mix(in srgb, var(--alem-ciano, #36aeb0) 45%, transparent); animation: alem-aceso .9s var(--alem-curva) 1; }
.alem-rede svg { transition: transform .34s var(--alem-curva-entrada); }
.alem-rede:hover svg { transform: scale(1.1); }
@keyframes alem-aceso {
  0%   { box-shadow: 0 0 0 1px var(--alem-ciano), 0 0 0 transparent; }
  35%  { box-shadow: 0 0 0 1px var(--alem-ciano-claro), 0 0 26px color-mix(in srgb, var(--alem-ciano, #36aeb0) 70%, transparent); }
  100% { box-shadow: 0 0 0 1px var(--alem-ciano), 0 0 14px color-mix(in srgb, var(--alem-ciano, #36aeb0) 45%, transparent); }
}

/* =================== Animação: troca de canal entre seções ===================
   Ao trocar Capa ↔ Revista ↔ Tendências. Funciona como camada sobre a área de
   conteúdo; idealmente via View Transitions API, com este CSS de fallback. */
.alem-canal { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: var(--alem-nanquim); background-image: var(--alem-varredura);
  animation: alem-canal .56s var(--alem-curva) both; }
.alem-canal-linha { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; z-index: 6; pointer-events: none;
  background: var(--alem-ciano-claro); box-shadow: 0 0 12px var(--alem-ciano), 0 0 28px color-mix(in srgb, var(--alem-ciano, #36aeb0) 80%, transparent); animation: alem-linha .56s var(--alem-curva) both; }
.alem-entra { animation: alem-entra .5s var(--alem-curva-entrada) .3s both; }
.alem-rotulo-digita { animation: alem-digita .42s steps(8) .1s both; }
@keyframes alem-canal { 0% { transform: scaleY(1); opacity: 1; } 55% { transform: scaleY(0); opacity: 1; } 100% { transform: scaleY(0); opacity: 0; } }
@keyframes alem-linha { 0%, 40% { transform: scaleX(1); opacity: 0; } 52% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(0); opacity: 0; } }
@keyframes alem-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes alem-digita { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* A pílula da cápsula desliza até o novo item: transition: left .46s var(--alem-curva) */

/* ======================== Animação: busca abrindo ======================== */
.alem-busca { width: 56px; transition: width .48s var(--alem-curva), padding .48s var(--alem-curva); }
.alem-busca[data-aberta] { width: 760px; animation: alem-neon .7s linear .3s both; }
.alem-busca-painel { animation: alem-painel .5s var(--alem-curva-entrada) .32s both; }
.alem-busca-varredura { animation: alem-varre .5s var(--alem-curva-entrada) .32s both; } /* linha ciano de 2px no topo do painel */
.alem-busca-item { animation: alem-item .36s var(--alem-curva-entrada) both; } /* delay em cascata: .5s + n × 60ms */
@keyframes alem-neon { 0% { box-shadow: 0 0 0 0 transparent; } 25% { box-shadow: 0 0 0 2px var(--alem-ciano-claro), 0 0 30px color-mix(in srgb, var(--alem-ciano, #36aeb0) 75%, transparent); }
  38% { box-shadow: 0 0 0 1px var(--alem-ciano), 0 0 4px color-mix(in srgb, var(--alem-ciano, #36aeb0) 20%, transparent); } 52% { box-shadow: 0 0 0 2px var(--alem-ciano-claro), 0 0 26px color-mix(in srgb, var(--alem-ciano, #36aeb0) 65%, transparent); }
  100% { box-shadow: 0 0 0 1px var(--alem-ciano), 0 0 22px color-mix(in srgb, var(--alem-ciano, #36aeb0) 35%, transparent); } }
@keyframes alem-painel { from { clip-path: inset(0 0 100% 0); transform: translateY(-6px); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes alem-varre { 0% { top: 0; opacity: 1; } 85% { top: 100%; opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes alem-item { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* ===================== Animação: gaveta (índice) abrindo ===================== */
.alem-gaveta { transform: translateX(-102%); visibility: hidden;
  transition: transform .28s var(--alem-curva-saida) .06s, visibility 0s linear .36s; }
.alem-gaveta[data-aberta] { transform: none; visibility: visible; transition: transform .48s var(--alem-curva-entrada), visibility 0s; }
.alem-gaveta .alem-cascata { opacity: 0; transform: translateX(-16px); transition: opacity .12s, transform .12s; }
.alem-gaveta[data-aberta] .alem-cascata { opacity: 1; transform: none;
  transition: opacity .3s var(--alem-curva) var(--d, 0s), transform .45s var(--alem-curva-entrada) var(--d, 0s); } /* --d: 40ms por item */
/* Lua do eclipse no canto: translateX(-170px) → 0 em 1s com .2s de atraso. Borda direita: fio ciano com 2 piscadas. */

/* ==================== Acessibilidade e movimento reduzido ==================== */
:focus-visible { outline: 2px solid var(--alem-verde); outline-offset: 3px; }
.alem-tela :focus-visible { outline-color: var(--alem-ciano); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .alem-canal, .alem-canal-linha, .alem-busca-varredura { display: none; }
  .alem-rede::before { transform: none; opacity: 0; }
  .alem-rede:hover::before { opacity: 1; }
}

/* =========================================================================
   6ª entrega: estrelas das críticas de cinema
   Uma estrela = <svg viewBox="0 0 24 24">. Cheia .f, meia .m (metade esquerda), vazia .e.
   Sobre papel (--tinta): tinta do tema. Sobre tela (visor): ciano com brilho, igual nos dois temas.
   ========================================================================= */
.alem-estrelas { display: inline-flex; align-items: center; vertical-align: middle; gap: 8px; }
.alem-estrelas-fila { display: inline-flex; align-items: center; }
.alem-estrelas svg { display: block; overflow: visible; }
.alem-estrelas path { stroke-width: 1.5; stroke-linejoin: round; }
.alem-estrelas--tinta .f { fill: var(--alem-tinta); stroke: var(--alem-tinta); }
.alem-estrelas--tinta .m { fill: url(#alem-meia-tinta); stroke: var(--alem-tinta); }
.alem-estrelas--tinta .e { fill: none; stroke: var(--alem-linha-forte); }
.alem-estrelas--tela .f { fill: var(--alem-ciano, #36aeb0); stroke: var(--alem-ciano, #36aeb0); filter: drop-shadow(0 0 5px rgba(54,174,176,.75)); }
.alem-estrelas--tela .m { fill: url(#alem-meia-tela); stroke: var(--alem-ciano, #36aeb0); }
.alem-estrelas--tela .e { fill: none; stroke: var(--alem-contorno-tela, #3a3b3c); }
.alem-estrelas-num { font-variant-numeric: tabular-nums; line-height: 1; }
.alem-estrelas--tinta .alem-estrelas-num { color: var(--alem-tinta); }
.alem-estrelas--tela .alem-estrelas-num { color: var(--alem-ciano, #36aeb0); }
/* tamanhos: grande (visor), média (nota final), pequena (listas), mínima (uma estrela + número) */
.alem-estrelas--g .alem-estrelas-fila { gap: 5px; } .alem-estrelas--g svg { width: 40px; height: 40px; } .alem-estrelas--g .alem-estrelas-num { font: 400 46px/1 var(--alem-f-mono, "IBM Plex Mono", monospace); }
.alem-estrelas--m .alem-estrelas-fila { gap: 3px; } .alem-estrelas--m svg { width: 28px; height: 28px; } .alem-estrelas--m .alem-estrelas-num { font: 600 30px/1 var(--alem-f-titulo, Fraunces, Georgia, serif); }
.alem-estrelas--p { gap: 8px; } .alem-estrelas--p .alem-estrelas-fila { gap: 2px; } .alem-estrelas--p svg { width: 15px; height: 15px; } .alem-estrelas--p .alem-estrelas-num { font: 600 10.5px/1 var(--alem-f-mono, "IBM Plex Mono", monospace); }
.alem-estrelas--min { gap: 5px; } .alem-estrelas--min svg { width: 15px; height: 15px; } .alem-estrelas--min .alem-estrelas-num { font: 600 11px/1 var(--alem-f-mono, "IBM Plex Mono", monospace); }