/* ============================================================================
   FTNOW · portal de tecnologia — protótipo mobile (PD05)
   Caminho A "Órbita": grafite profundo, cor por tema como sistema, vidro só na
   navegação e na sobreposição. Nada de vidro atrás de texto de notícia.
   Herança da casa: fonte nativa óptica, font-synthesis:none, tabular-nums,
   escuro como padrão, nenhuma fonte remota.
   ==========================================================================*/

/* a cor da aura atravessa a troca de tema em vez de pular — por isso é
   registrada como <color>: só assim o navegador sabe interpolar a variável */
@property --aura-a { syntax: '<color>'; inherits: true; initial-value: #6f7cff; }
@property --aura-b { syntax: '<color>'; inherits: true; initial-value: #49c6ff; }

/* ---------- 1. tokens ---------------------------------------------------- */

:root {
  --fundo:        #08090c;
  --superficie:   #111318;
  --superficie-2: #171a21;
  --tinta:        #f3f5f8;
  --tinta-media:  #a3a9b5;
  --tinta-fraca:  #808692;
  --linha:        rgba(243, 245, 248, .08);
  --linha-forte:  rgba(243, 245, 248, .14);
  --midia-base:   #0d0f15;
  --vidro:        rgba(16, 18, 24, .66);
  --vidro-forte:  rgba(20, 22, 29, .86);
  --vidro-borda:  rgba(255, 255, 255, .08);
  --vidro-brilho: rgba(255, 255, 255, .06);
  --veu:          rgba(0, 0, 0, .52);
  --sombra:       0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --sombra-alta:  0 2px 6px rgba(0,0,0,.4), 0 30px 80px rgba(0,0,0,.6);
  --foco:         #8ab4ff;
  /* marca FTNOW: o coral de "agora" — só para o ponto vivo, a marca e o que está acontecendo */
  --ft-vivo:      #ff5b4f;
  --aura-forca:   .30;

  /* cor por tema — uma por assunto, mesma luminância, matizes afastados.
     No escuro elas brilham; no claro descem de luz para passar contraste em texto. */
  --t-alta:    #f3f5f8;
  --t-ia:      #a594ff;
  --t-gadgets: #5ccfff;
  --t-carros:  #4fe3a0;
  --t-espaco:  #ffb25c;
  --t-games:   #ff6eb4;
  --t-ciencia: #cdeb5e;

  --sans: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* segunda família: monoespaçada nativa, só para dado — tempo, contagem, duração.
     É ela que dá o "instrumento" ao produto sem baixar fonte nenhuma. */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;

  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;

  --raio-card: 24px;
  --raio-midia: 18px;
  --raio-p: 999px;

  /* curva de folha do iOS: sai rápido e assenta devagar */
  --curva: cubic-bezier(.32, .72, 0, 1);
  --t-rapido: 160ms;
  --t-medio: 320ms;
  --t-folha: 460ms;

  --topo: 100px;               /* medido pelo app.js */
  --barra-h: 62px;
  --seguro-baixo: env(safe-area-inset-bottom, 0px);
  --seguro-topo: env(safe-area-inset-top, 0px);
}

:root[data-tema="claro"] {
  --fundo:        #f3f4f7;
  --superficie:   #ffffff;
  --superficie-2: #f7f8fa;
  --tinta:        #0b0d12;
  --tinta-media:  #4f5562;
  --tinta-fraca:  #676d78;
  --linha:        rgba(11, 13, 18, .07);
  --linha-forte:  rgba(11, 13, 18, .12);
  --midia-base:   #e6e9ef;
  --vidro:        rgba(250, 251, 253, .72);
  --vidro-forte:  rgba(252, 252, 254, .9);
  --vidro-borda:  rgba(11, 13, 18, .07);
  --vidro-brilho: rgba(255, 255, 255, .7);
  --veu:          rgba(10, 12, 18, .28);
  --sombra:       0 1px 2px rgba(11,13,18,.04), 0 8px 24px rgba(11,13,18,.06);
  --sombra-alta:  0 2px 6px rgba(11,13,18,.06), 0 30px 80px rgba(11,13,18,.18);
  --foco:         #2f6bff;
  --ft-vivo:      #d9372c;
  --aura-forca:   .16;

  --t-alta:    #0b0d12;
  --t-ia:      #5b47e0;
  --t-gadgets: #0277b6;
  --t-carros:  #087a4b;
  --t-espaco:  #b05f00;
  --t-games:   #c21e73;
  --t-ciencia: #5e7a00;
}

/* o elemento herda a cor do tema a que pertence */
[data-t="alta"]    { --t: var(--t-alta); }
[data-t="ia"]      { --t: var(--t-ia); }
[data-t="gadgets"] { --t: var(--t-gadgets); }
[data-t="carros"]  { --t: var(--t-carros); }
[data-t="espaco"]  { --t: var(--t-espaco); }
[data-t="games"]   { --t: var(--t-games); }
[data-t="ciencia"] { --t: var(--t-ciencia); }

/* ---------- 2. base ------------------------------------------------------ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  transition: background-color var(--t-medio) ease;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 12px; }

/* ícones de traço: 1.6, ponta redonda — o mesmo desenho em toda a interface */
.barra-item svg, .botao-icone svg, .acao svg, .icone svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- 3. palco e aura ---------------------------------------------- */

/* fora do celular o app fica numa coluna de celular, centrada */
.palco {
  position: fixed; inset: 0;
  max-width: 480px; margin: 0 auto;
  overflow: hidden;
  background: var(--fundo);
  transform-origin: 50% 0;
  transition: transform var(--t-folha) var(--curva), border-radius var(--t-folha) var(--curva), filter var(--t-folha) var(--curva);
}
@media (min-width: 520px) {
  body { background: radial-gradient(80vw 60vh at 50% 0%, color-mix(in oklab, var(--aura-a) 10%, transparent), transparent 70%), var(--fundo); }
  .palco { box-shadow: 0 0 0 1px var(--linha), var(--sombra-alta); }
}

/* a aura é a cor do tema atual vazando por trás do topo. Ela muda de cor quando
   o tema muda — é o sinal mais rápido de "onde estou" sem ler nada. */
.aura {
  position: absolute; inset: 0 0 auto 0; height: 420px;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 18% 0%,  color-mix(in oklab, var(--aura-a) calc(var(--aura-forca) * 100%), transparent), transparent 70%),
    radial-gradient(60% 55% at 92% 8%,  color-mix(in oklab, var(--aura-b) calc(var(--aura-forca) * 80%), transparent), transparent 72%);
  transition: --aura-a 600ms ease, --aura-b 600ms ease;
}

/* ---------- 4. topo: marca + faixa de temas ------------------------------ */

.topo {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  padding-top: var(--seguro-topo);
  background: var(--vidro);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--vidro-borda);
  transition: transform var(--t-medio) var(--curva);
}
/* ao rolar para baixo a linha da marca sai; a faixa de temas fica — ela é navegação */
.topo.recolhido { transform: translateY(calc(-1 * var(--linha-marca, 52px))); }
.topo.so-marca .temas-trilho { display: none; }

.topo-linha {
  height: 52px;
  display: flex; align-items: center; gap: var(--e3);
  padding: 0 var(--e3) 0 var(--e5);
}
.marca { display: flex; align-items: center; gap: 10px; }
/* a marca FTNOW (proposta 1 · Ponto vivo, escolhida em 26/10/2026): a palavra em curvas,
   letras na cor da tinta e o "o" de now no coral de "agora". Altura mínima de tela: 16 px. */
.marca { color: var(--tinta); text-decoration: none; }
.palavra-marca { display: block; height: 22px; width: auto; }
.pagina-topo .palavra-marca { height: 18px; }
.aviso-prototipo {
  margin-left: auto;
  font-family: var(--mono); font-size: 0.6563rem; letter-spacing: .02em;
  color: var(--tinta-fraca);
  padding: 4px 9px; border-radius: var(--raio-p); border: 1px solid var(--linha); white-space: nowrap;
}
.botao-icone {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--tinta-media);
  transition: background-color var(--t-rapido), color var(--t-rapido);
}
.botao-icone:hover { background: var(--linha); color: var(--tinta); }
:root[data-tema="escuro"] .i-sol, :root[data-tema="claro"] .i-lua { display: none; }

.temas-trilho { position: relative; }
.temas {
  position: relative;
  display: flex; gap: var(--e1);
  overflow-x: auto; scrollbar-width: none;
  padding: 2px var(--e4) 10px;
  scroll-padding-inline: var(--e5);
}
.temas::-webkit-scrollbar { display: none; }
/* esmaecer a ponta direita: avisa que a faixa continua sem mostrar barra */
.temas-trilho::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 28px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--vidro-forte));
  opacity: .9;
}

.tema-aba {
  position: relative; z-index: 1;
  flex: none; height: 34px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--raio-p);
  font-size: 0.875rem; font-weight: 500; letter-spacing: -.005em;
  color: var(--tinta-media);
  white-space: nowrap;
  transition: color var(--t-rapido);
}
.tema-aba .ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--t); opacity: .9; }
.tema-aba[data-t="alta"] .ponto {
  width: 7px; height: 7px;
  background: conic-gradient(var(--t-ia), var(--t-gadgets), var(--t-carros), var(--t-ciencia), var(--t-espaco), var(--t-games), var(--t-ia));
}
.tema-aba[aria-selected="true"] { color: var(--tinta); }

/* o indicador é uma pílula só, que viaja entre as abas seguindo o dedo */
.tema-indicador {
  position: absolute; z-index: 0; left: 0; top: 2px; height: 34px; width: 60px;
  border-radius: var(--raio-p);
  background: color-mix(in oklab, var(--aura-a) 16%, var(--superficie-2));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--aura-a) 34%, transparent), inset 0 1px 0 var(--vidro-brilho);
  transition: --aura-a 600ms ease;
  will-change: transform, width;
}
:root[data-tema="claro"] .tema-indicador { background: color-mix(in oklab, var(--aura-a) 10%, #fff); }

/* ---------- 5. abas e pager ---------------------------------------------- */

.abas { position: absolute; inset: 0; }
.aba { position: absolute; inset: 0; }
.aba[hidden] { display: none; }
.aba.entrando { animation: entra var(--t-rapido) ease-out; }
@keyframes entra { from { opacity: 0; } to { opacity: 1; } }

/* um painel por tema, lado a lado; o deslizar horizontal é nativo (scroll-snap) */
.pager {
  position: absolute; inset: 0;
  display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.pager::-webkit-scrollbar { display: none; }

.painel, .rolagem {
  flex: none; width: 100%; height: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  padding: calc(var(--topo) + var(--e5)) var(--e4) calc(var(--barra-h) + var(--seguro-baixo) + 48px);
}
.painel::-webkit-scrollbar, .rolagem::-webkit-scrollbar { display: none; }
.rolagem { position: absolute; inset: 0; }

/* ---------- 6. cabeçalho de seção ---------------------------------------- */

.cabeca { padding: 0 var(--e2) var(--e5); }
.cabeca-titulo {
  font-family: var(--display); font-size: 2.125rem; line-height: 1.08;
  font-weight: 300; letter-spacing: -.03em;
}
.cabeca-sub {
  margin-top: var(--e2);
  display: flex; align-items: center; gap: var(--e2);
  font-family: var(--mono); font-size: 0.7188rem; color: var(--tinta-fraca); letter-spacing: .01em;
}
/* o ponto vivo é o mesmo ponto da marca: mesmo coral, mesmo pulso */
.ao-vivo {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ft-vivo);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--ft-vivo) 60%, transparent);
  animation: pulso 2.4s ease-out infinite;
}
@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ft-vivo) 55%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.rotulo-secao {
  margin: var(--e6) var(--e2) var(--e3);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: .01em; color: var(--tinta-media);
}

.lista { display: grid; gap: var(--e4); }

/* ---------- 7. card de notícia ------------------------------------------- */

.card {
  position: relative;
  background: var(--superficie);
  border-radius: var(--raio-card);
  box-shadow: inset 0 0 0 1px var(--linha);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-rapido) ease, box-shadow var(--t-rapido) ease;
}
.card:active { transform: scale(.985); }
.card:hover { box-shadow: inset 0 0 0 1px var(--linha-forte); }
.card:focus-visible { outline-offset: 3px; border-radius: var(--raio-card); }

/* ARTE DO PORTAL — o centro da identidade. O cartão de notícia de site não tem foto
   da matéria (og:image não se copia nem se puxa por hotlink: 01_O_Que_E_Permitido §1.4).
   No lugar, cada tema tem a sua FORMA, desenhada em linha fina sobre a cor do tema:
     IA        órbitas e um nó          Gadgets   aparelho e relógio em contorno
     Carros    arcos de corrente        Espaço    planeta com anel e uma lua
     Games     grade de pixels          Ciência   átomo, duas elipses e o núcleo
   A luz (--x) muda de lugar de item para item; a forma do tema não muda — é ela que
   faz o tema ser reconhecido antes de ler a palavra. */
.midia {
  --x: 30%;
  --traco:  color-mix(in oklab, var(--t) 46%, transparent);
  --traco2: color-mix(in oklab, var(--t) 26%, transparent);
  --cheio:  color-mix(in oklab, var(--t) 78%, transparent);
  position: relative; overflow: hidden; aspect-ratio: 21 / 9;
  background:
    var(--forma, linear-gradient(transparent, transparent)),
    radial-gradient(90% 120% at var(--x) 0%, color-mix(in oklab, var(--t) 58%, transparent), transparent 64%),
    linear-gradient(160deg, color-mix(in oklab, var(--t) 22%, var(--midia-base)), var(--midia-base));
}
.midia::before, .midia::after { content: ""; position: absolute; pointer-events: none; }
.midia > * { position: relative; z-index: 1; }
.card > .midia { margin: 6px 6px 0; border-radius: var(--raio-midia); }
.midia.grande { aspect-ratio: 16 / 10; }

.arte[data-t="ia"] {
  --forma:
    radial-gradient(circle at 76% 42%, transparent 0 30%, var(--traco) 30.3% 30.7%, transparent 31%),
    radial-gradient(circle at 76% 42%, transparent 0 17%, var(--traco2) 17.3% 17.7%, transparent 18%),
    radial-gradient(circle at 76% 42%, var(--cheio) 0 4.5%, transparent 5%),
    radial-gradient(circle at 57% 20%, var(--cheio) 0 1.4%, transparent 1.8%);
}
.arte[data-t="gadgets"]::before {
  right: 15%; top: 12%; width: 21%; aspect-ratio: 9 / 18;
  border: 1.5px solid var(--traco); border-radius: 24% / 12%;
  transform: rotate(-10deg);
}
.arte[data-t="gadgets"]::after {
  right: 43%; top: 44%; width: 12%; aspect-ratio: 1;
  border: 1.5px solid var(--traco2); border-radius: 32%;
  box-shadow: inset 0 0 0 5px transparent, 0 0 0 0 transparent;
}
.arte[data-t="carros"] {
  --forma:
    radial-gradient(circle at 26% 240%, transparent 0 57%, var(--traco) 57.2% 57.5%, transparent 57.8% 62%, var(--traco2) 62.2% 62.5%, transparent 62.8% 67%, var(--traco) 67.2% 67.5%, transparent 67.8%),
    radial-gradient(circle at 71% 37%, var(--cheio) 0 2.6%, transparent 3%);
}
.arte[data-t="espaco"] {
  --forma:
    radial-gradient(circle at 84% 155%, color-mix(in oklab, var(--t) 34%, var(--midia-base)) 0 54%, transparent 54.4%),
    radial-gradient(circle at 58% 24%, var(--cheio) 0 2.4%, transparent 2.8%);
}
.arte[data-t="espaco"]::before {
  right: -12%; bottom: 4%; width: 78%; height: 30%;
  border: 1.5px solid var(--traco); border-radius: 50%;
  transform: rotate(-10deg);
}
.arte[data-t="games"]::before {
  inset: 0 0 0 35%;
  background: radial-gradient(circle, var(--traco) 0 1.3px, transparent 1.7px) 0 0 / 14px 14px;
  -webkit-mask-image: radial-gradient(60% 75% at 62% 45%, #000, transparent);
          mask-image: radial-gradient(60% 75% at 62% 45%, #000, transparent);
}
.arte[data-t="games"]::after {
  right: 24%; top: 34%; width: 5.5%; aspect-ratio: 1; border-radius: 28%;
  background: var(--cheio);
}
.arte[data-t="ciencia"] {
  --forma: radial-gradient(circle at 74% 50%, var(--cheio) 0 3.6%, transparent 4%);
}
.arte[data-t="ciencia"]::before, .arte[data-t="ciencia"]::after {
  left: 52%; top: 32%; width: 44%; height: 36%;
  border: 1.5px solid var(--traco); border-radius: 50%;
  transform: rotate(28deg);
}
.arte[data-t="ciencia"]::after { transform: rotate(-28deg); border-color: var(--traco2); }

.card-corpo { padding: 14px 18px 16px; }

.meta {
  display: flex; align-items: center; gap: var(--e2);
  font-size: 0.7813rem; color: var(--tinta-fraca);
}
.selo {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--t);
}
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tempo { font-family: var(--mono); font-size: 0.7188rem; margin-left: auto; }
.sep { width: 3px; height: 3px; border-radius: 50%; background: var(--tinta-fraca); opacity: .6; }

.card-titulo {
  margin-top: 8px;
  font-family: var(--display); font-size: 1.125rem; line-height: 1.28; font-weight: 600; letter-spacing: -.015em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-resumo {
  margin-top: 6px; color: var(--tinta-media); font-size: 0.9063rem; line-height: 1.42;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.rodape {
  margin-top: 14px;
  display: flex; align-items: center; gap: 10px;
}
/* pilha de favicons — na versão real, o favicon de cada veículo */
.pilha { display: flex; }
.fav {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.5938rem; font-weight: 600; color: var(--tinta-media);
  background: var(--superficie-2);
  box-shadow: 0 0 0 2px var(--superficie), inset 0 0 0 1px var(--linha-forte);
}
.pilha .fav + .fav { margin-left: -7px; }

/* a frase do "por quê": a evidência do card, explicada em palavras (03 §2.2) */
.porque {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.7813rem; color: var(--tinta-media);
}
.rodape .porque { flex: 1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.botao-mini {
  flex: none; height: 30px; padding: 0 12px; border-radius: var(--raio-p);
  display: inline-flex; align-items: center;
  font-size: 0.8125rem; font-weight: 600; color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--linha-forte);
}

.acao {
  margin-left: auto;
  width: 38px; height: 38px; margin-right: -8px; border-radius: 50%;
  display: grid; place-items: center; color: var(--tinta-fraca);
  transition: color var(--t-rapido), background-color var(--t-rapido), transform var(--t-rapido);
}
.acao:hover { background: var(--linha); color: var(--tinta); }
.acao:active { transform: scale(.88); }
.acao[aria-pressed="true"] { color: var(--t); }
.acao[aria-pressed="true"] svg { fill: currentColor; }

/* destaque: o primeiro do ranking, maior e com a posição em cima da imagem */
.card.destaque .card-titulo { font-size: 1.4375rem; line-height: 1.2; letter-spacing: -.022em; }
.posicao {
  position: absolute; left: 14px; top: 12px;
  font-family: var(--display); font-size: 2.75rem; font-weight: 200; line-height: 1; letter-spacing: -.04em;
  color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

/* ---------- 8. ranking compacto (2 a 5) ---------------------------------- */

.ranking { margin-top: var(--e3); background: var(--superficie); border-radius: var(--raio-card); box-shadow: inset 0 0 0 1px var(--linha); padding: 4px 0; }
.linha-rank {
  display: grid; grid-template-columns: 36px 1fr 64px; gap: 12px; align-items: center;
  padding: 12px 14px 12px 16px; cursor: pointer;
  border-radius: 20px;
  transition: background-color var(--t-rapido);
}
.linha-rank + .linha-rank { border-top: 1px solid var(--linha); border-radius: 0; }
.linha-rank:hover { background: color-mix(in oklab, var(--tinta) 3%, transparent); }
.linha-rank .num {
  font-family: var(--display); font-size: 1.875rem; font-weight: 200; letter-spacing: -.04em; line-height: 1;
  color: var(--tinta-fraca); text-align: center;
}
.linha-rank .rk-titulo {
  font-size: 0.9375rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.linha-rank .meta { margin-top: 5px; }
.meta.em-trechos { flex-wrap: wrap; row-gap: 0; height: 1.35em; line-height: 1.35; overflow: hidden; }
.trecho { color: var(--tinta-media); }
.trecho + .trecho::before { content: "·"; margin-right: 6px; color: var(--tinta-fraca); }
.linha-rank > div { min-width: 0; }
.linha-rank.sem-num { grid-template-columns: 1fr 64px; padding-left: 18px; }
.meta > * { white-space: nowrap; }
.linha-rank .miniatura { width: 64px; height: 64px; aspect-ratio: auto; border-radius: 14px; }

/* ---------- 9. variantes: vídeo e Instagram ------------------------------ */

/* linha da plataforma: quem publicou e onde — atribuição em cada item (01 §3.3) */
.linha-plataforma { display: flex; align-items: center; gap: 8px; padding: 14px 18px 10px; min-width: 0; }
.marca-plataforma {
  flex: none; height: 20px; padding: 0 7px; border-radius: 6px;
  display: inline-flex; align-items: center;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: -.01em;
}
/* no produto entra o logotipo oficial do YouTube, pelas regras de marca dele */
.marca-plataforma.yt { background: #ff0033; color: #fff; }
.marca-plataforma.ig { color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linha-forte); }
.autor { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-plataforma .views { margin-left: auto; font-family: var(--mono); font-size: 0.6875rem; color: var(--tinta-media); white-space: nowrap; }
.marca-origem { font-family: var(--mono); font-size: 0.6563rem; color: var(--tinta-fraca); padding: 2px 7px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--linha-forte); }

/* thumbnail do YouTube: MOLDURA, não recorte. A imagem fica inteira, retangular, na
   proporção dela, sem texto nem gradiente por cima; a bandeja é que tem o canto
   arredondado. Mínimo de 120×70 px quando o toque toca o vídeo. */
.bandeja { margin: 0 6px; padding: 8px; border-radius: var(--raio-midia); background: var(--superficie-2); }
.thumb {
  position: relative; display: block; width: 100%; min-width: 120px; min-height: 70px;
  aspect-ratio: 16 / 9; border-radius: 0; cursor: pointer;
  /* bloco neutro de protótipo: imagem não segue o tema claro/escuro */
  background: linear-gradient(180deg, #6a7686 0%, #3a424e 55%, #1d2128 100%);
}
.play {
  position: absolute; inset: 0; margin: auto;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  /* sem blur: num feed com dez vídeos seriam dez vidros recalculando a cada quadro */
  background: rgba(10, 12, 16, .62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
  color: #fff;
  transition: transform var(--t-rapido) ease;
}
.play svg { width: 20px; height: 20px; fill: currentColor; stroke: none; margin-left: 3px; }
.thumb:hover .play { transform: scale(1.06); }
.thumb:focus-visible { outline-offset: 3px; border-radius: 4px; }

/* ---------- 10. barra inferior ------------------------------------------- */

.barra {
  position: absolute; z-index: 25;
  left: var(--e4); right: var(--e4); bottom: calc(var(--seguro-baixo) + 12px);
  height: var(--barra-h);
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px;
  border-radius: 28px;
  background: var(--vidro);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 0 0 1px var(--vidro-borda), inset 0 1px 0 var(--vidro-brilho), var(--sombra);
}
.barra-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 22px;
  color: var(--tinta-fraca);
  font-size: 0.6563rem; font-weight: 500; letter-spacing: .01em;
  transition: color var(--t-rapido), background-color var(--t-rapido);
}
.barra-item svg { width: 23px; height: 23px; }
.barra-item.ativo { color: var(--tinta); background: color-mix(in oklab, var(--tinta) 7%, transparent); }
.barra-item.ativo svg { fill: color-mix(in oklab, currentColor 14%, transparent); }

/* ---------- 11. vídeos, salvos, busca ------------------------------------ */

.filtros { display: flex; gap: var(--e2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--e4)) var(--e5); padding: 0 var(--e4); }
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex: none; height: 32px; padding: 0 13px; border-radius: var(--raio-p);
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.8438rem; font-weight: 500; color: var(--tinta-media);
  box-shadow: inset 0 0 0 1px var(--linha-forte);
  transition: background-color var(--t-rapido), color var(--t-rapido), box-shadow var(--t-rapido);
}
.filtro .ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--t); }
.filtro[aria-pressed="true"] { color: var(--tinta); background: color-mix(in oklab, var(--t) 14%, var(--superficie)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--t) 40%, transparent); }
.filtro[data-t="alta"][aria-pressed="true"] { background: color-mix(in oklab, var(--tinta) 8%, var(--superficie)); box-shadow: inset 0 0 0 1px var(--linha-forte); }

.vazio {
  margin: 56px auto 0; max-width: 280px; text-align: center;
  display: grid; justify-items: center; gap: 10px;
}
.vazio .icone {
  width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center;
  color: var(--tinta-media); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha);
}
.vazio .icone svg { width: 26px; height: 26px; }
.vazio h3 { font-family: var(--display); font-size: 1.1875rem; font-weight: 600; letter-spacing: -.015em; margin-top: 6px; }
.vazio p { color: var(--tinta-media); font-size: 0.9063rem; }

.busca-campo {
  position: relative; display: block; margin-bottom: var(--e6);
}
.busca-campo svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; fill: none; stroke: var(--tinta-fraca); stroke-width: 1.6; stroke-linecap: round; }
.busca-campo input {
  width: 100%; height: 50px; padding: 0 16px 0 46px;
  border: 0; border-radius: 18px; outline: none;
  font: inherit; font-size: 1rem; color: var(--tinta);
  background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha-forte);
  transition: box-shadow var(--t-rapido);
}
.busca-campo input::placeholder { color: var(--tinta-fraca); }
.busca-campo input:focus { box-shadow: inset 0 0 0 1.5px var(--foco); }

.grade-temas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.ladrilho {
  position: relative; height: 104px; border-radius: 22px; overflow: hidden;
  padding: 14px 16px; text-align: left;
  display: flex; flex-direction: column; justify-content: flex-end;
  background:
    radial-gradient(circle at 86% 18%, transparent 0 26%, color-mix(in oklab, var(--t) 45%, transparent) 26.6% 27.4%, transparent 28%),
    radial-gradient(110% 100% at 100% 0%, color-mix(in oklab, var(--t) 55%, transparent), transparent 70%),
    var(--superficie);
  box-shadow: inset 0 0 0 1px var(--linha);
  transition: transform var(--t-rapido);
}
.ladrilho:active { transform: scale(.97); }
.ladrilho b { font-family: var(--display); font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; }
.ladrilho span { font-family: var(--mono); font-size: 0.6875rem; color: var(--tinta-media); }

/* ---------- 12. folha do assunto ----------------------------------------- */

.veu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--veu);
  opacity: 0; transition: opacity var(--t-folha) var(--curva);
}
.veu.aberto { opacity: 1; }

body.com-folha .palco { transform: scale(.94) translateY(10px); border-radius: 26px; }

/* Rodada 4: a folha abre inteira, até o topo, e é sempre superfície sólida — ela carrega
   texto. O vidro fica no topo e na barra. A alça desce pela área segura do iPhone instalado. */
.folha {
  position: fixed; z-index: 50;
  left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 480px;
  height: 100dvh;
  padding-top: var(--seguro-topo);
  display: flex; flex-direction: column;
  border-radius: 24px 24px 0 0;
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--linha), var(--sombra-alta);
  transform: translateY(100%);
  transition: transform var(--t-folha) var(--curva);
  will-change: transform;
}
.folha[data-pos="cheio"] { transform: translateY(0); }
.folha.arrastando { transition: none; }
.folha:focus { outline: none; }

.folha-alca { position: relative; flex: none; height: 44px; cursor: grab; touch-action: none; }
.alca { position: absolute; left: 50%; top: 9px; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--linha-forte); }
.folha-fechar { position: absolute; right: 10px; top: 6px; width: 34px; height: 34px; background: var(--linha); }
.folha-fechar svg { width: 18px; height: 18px; }

/* o corpo da folha é superfície sólida: aqui tem texto, e vidro atrás de texto atrapalha */
.folha-corpo {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: 0 var(--e5) calc(var(--seguro-baixo) + 32px);
}
.folha-corpo::-webkit-scrollbar { display: none; }

.assunto-titulo {
  margin-top: 10px;
  font-family: var(--display); font-size: 1.625rem; line-height: 1.16; font-weight: 600; letter-spacing: -.024em;
}
/* o porquê por extenso: a frase, a nota e os três fatores da fórmula */
.porque-bloco {
  margin-top: var(--e4); padding: 14px 16px 12px; border-radius: 18px;
  background: color-mix(in oklab, var(--t) 8%, var(--superficie));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--t) 22%, transparent);
}
.porque-frase { font-size: 0.875rem; font-weight: 500; line-height: 1.35; }
.fatores { margin-top: 12px; display: grid; gap: 7px; }
.fatores div { display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: center; }
.fatores dt { font-size: 0.7813rem; color: var(--tinta-media); }
.medidor { height: 4px; border-radius: 2px; background: var(--linha-forte); overflow: hidden; }
.medidor i { display: block; height: 100%; border-radius: 2px; background: var(--t); }
.assunto-midia { margin-top: var(--e5); }
.assunto-midia > .midia { border-radius: var(--raio-midia); }
.assunto-midia .bandeja { margin: 0; }
.folha-corpo .linha-plataforma { padding: 0 2px 10px; }
.views-yt { margin-top: 6px; font-family: var(--mono); font-size: 0.7188rem; color: var(--tinta-media); }

/* citação: uma frase só, entre aspas, com crédito (01 §1.3) — nunca o lead */
.citacao { margin-top: var(--e5); padding: 4px 0 4px 16px; border-left: 2px solid var(--t); border-radius: 1px; }
.citacao p { font-family: var(--display); font-size: 1.125rem; font-weight: 300; line-height: 1.4; letter-spacing: -.01em; }
.citacao cite { display: block; margin-top: 6px; font-style: normal; font-family: var(--mono); font-size: 0.7188rem; color: var(--tinta-media); }
.citacao cite::before { content: "— "; }
.assunto-resumo { margin-top: var(--e5); font-size: 1rem; line-height: 1.55; color: var(--tinta); }
.nota-exemplo { margin-top: 8px; font-family: var(--mono); font-size: 0.6875rem; color: var(--tinta-fraca); }

.acoes-folha { display: flex; gap: var(--e2); margin-top: var(--e5); }
.botao {
  height: 44px; padding: 0 18px; border-radius: var(--raio-p);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.9063rem; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--linha-forte);
  transition: background-color var(--t-rapido), transform var(--t-rapido);
}
.botao svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.botao:active { transform: scale(.97); }
.botao.primario { background: var(--tinta); color: var(--fundo); box-shadow: none; flex: 1; justify-content: center; }
.botao[aria-pressed="true"] { color: var(--t); }
.botao[aria-pressed="true"] svg { fill: currentColor; }

.fontes { margin-top: var(--e3); border-radius: 20px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha); overflow: hidden; }
.fonte + .fonte { border-top: 1px solid var(--linha); }
.fonte-link {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: start;
  padding: 14px 16px;
  transition: background-color var(--t-rapido);
}
.fonte-link:hover { background: color-mix(in oklab, var(--tinta) 3%, transparent); }
.fonte .fav { width: 32px; height: 32px; font-size: 0.6875rem; box-shadow: inset 0 0 0 1px var(--linha-forte); }
.fonte-nome { display: flex; align-items: center; gap: 8px; font-size: 0.7813rem; color: var(--tinta-fraca); }
.fonte-nome b { color: var(--tinta-media); font-weight: 600; }
.fonte-titulo { margin-top: 3px; font-size: 0.9063rem; font-weight: 500; line-height: 1.35; }
.fonte .seta { width: 18px; height: 18px; margin-top: 7px; fill: none; stroke: var(--tinta-fraca); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 13. movimento e transparência reduzidos --------------------- */

/* transparência reduzida: ver o fim do arquivo (seção 15), depois do vidro líquido */


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  body.com-folha .palco { transform: none; border-radius: 0; }
  .pager { scroll-behavior: auto; }
}

/* ---------- 14. embed, novidades, convite, PWA --------------------------- */

/* o embed do Instagram tem piso reservado: a folha não pula quando ele chega (CLS) */
.embed { min-height: 420px; border-radius: var(--raio-midia); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha); display: grid; place-items: center; }
.embed-estado { padding: 24px; text-align: center; font-family: var(--mono); font-size: 0.7188rem; line-height: 1.7; color: var(--tinta-media); display: grid; justify-items: center; gap: 4px; }
.embed-estado i { font-style: normal; color: var(--tinta); }
.embed-estado .botao { margin-top: 10px; font-family: var(--sans); }
.embed-estado .carregando, .player .carregando { width: 26px; height: 26px; margin: 0 auto 10px; border-radius: 50%; border: 2px solid var(--linha-forte); border-top-color: var(--tinta); animation: gira .8s linear infinite; }
.player .carregando { border-color: rgba(255,255,255,.18); border-top-color: #fff; }

.botao.largo { margin-top: 12px; width: 100%; justify-content: center; }

.novas {
  position: absolute; z-index: 22; left: 0; right: 0; top: calc(var(--topo) + 10px);
  display: flex; justify-content: center; pointer-events: none;
}
.novas button {
  pointer-events: auto;
  height: 36px; padding: 0 16px 0 12px; border-radius: var(--raio-p);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8438rem; font-weight: 600; color: var(--fundo); background: var(--tinta);
  box-shadow: var(--sombra);
  transform: translateY(-12px); opacity: 0;
  transition: transform var(--t-medio) var(--curva), opacity var(--t-medio) var(--curva);
}
.novas button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.novas.visivel button { transform: none; opacity: 1; }
.novas:not(.visivel) button { pointer-events: none; }

.convite {
  margin-top: var(--e4);
  display: grid; grid-template-columns: 40px 1fr 36px; gap: 12px; align-items: start;
  padding: 14px 8px 14px 14px; border-radius: 20px;
  background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linha);
}
.convite-icone { width: 40px; height: 40px; border-radius: 10px; display: block; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.convite b { display: block; font-size: 0.9063rem; font-weight: 600; letter-spacing: -.01em; }
.convite p { margin-top: 2px; font-size: 0.8125rem; color: var(--tinta-media); line-height: 1.4; }
.convite-fechar { width: 36px; height: 36px; }
.convite-fechar svg { width: 16px; height: 16px; }

/* só para as capturas de conferência (?captura) */
.sem-transicao *, .sem-transicao *::before, .sem-transicao *::after { transition: none !important; animation: none !important; }

/* o player, depois do toque (no protótipo, simulado) */
.player {
  position: relative; aspect-ratio: 16 / 9;
  display: grid; place-items: center; text-align: center;
  background: #000; color: #c9ced8;
  font-family: var(--mono); font-size: 0.7188rem; line-height: 1.6; padding: 20px;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* alvo de toque de 44 px sem engordar o desenho: a área sensível passa da borda visível */
.tema-aba::after, .filtro::after, .acao::after, .botao-mini::after { content: ""; position: absolute; inset: -6px -2px; }
.filtro, .acao, .botao-mini { position: relative; }
.acao::after { inset: -3px; }

/* ==========================================================================
   15. RODADA 2 · LIQUID (25/10/2026)
   Referência: Apple Liquid Glass — Newsroom (09/06/2025), HIG Materials e Tab bars
   (consultados em 25/10/2026). Regras que valem aqui:
   - vidro é camada de navegação e controle: topo, barra, folha em meia altura,
     pílula de tema. Nunca atrás de texto longo, nunca vidro sobre vidro;
   - variante "regular": desfoca e ajusta a luminosidade do fundo para o texto
     do vidro passar em AA, sobre qualquer coisa que role por baixo;
   - a cor do vidro vem do conteúdo (--cor-conteudo, posta pelo liquido.js);
   - menos transparência e mais contraste trocam o vidro por superfície.
   ========================================================================== */

@property --cor-conteudo { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0); }

:root {
  /* escuro: o fundo atrás do vidro é escurecido (brightness) antes de clarear o
     texto — é assim que o rótulo cinza-claro passa 4,5:1 até sobre arte luminosa */
  --lg-fundo:   rgba(16, 18, 24, .40);
  --lg-filtro:  blur(12px) saturate(190%) brightness(.74);
  --lg-luz:     rgba(255, 255, 255, .20);
  --lg-aro-a:   rgba(255, 255, 255, .55);
  --lg-aro-b:   rgba(255, 255, 255, .10);
  --lg-rotulo:  color-mix(in oklab, var(--tinta) 84%, transparent);
  --lg-sombra:  0 1px 1px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.35);
}
:root[data-tema="claro"] {
  --lg-fundo:   rgba(255, 255, 255, .46);
  --lg-filtro:  blur(12px) saturate(190%) brightness(1.1);
  --lg-luz:     rgba(255, 255, 255, .75);
  --lg-aro-a:   rgba(255, 255, 255, .95);
  --lg-aro-b:   rgba(255, 255, 255, .35);
  --lg-rotulo:  #3f4551;
  --lg-sombra:  0 1px 1px rgba(11,13,18,.05), 0 10px 30px rgba(11,13,18,.10);
}

.palco { transition: transform var(--t-folha) var(--curva), border-radius var(--t-folha) var(--curva), --cor-conteudo 500ms ease; }

/* o material: tinta que vem do conteúdo + luz especular que segue o dedo + aro de
   luz na borda (mais forte no alto à esquerda, como luz de cima) */
.topo, .barra {
  background:
    radial-gradient(160px 80px at var(--luz-x, 28%) var(--luz-y, 0%), var(--lg-luz), transparent 72%),
    color-mix(in oklab, var(--cor-conteudo) 16%, var(--lg-fundo));
  -webkit-backdrop-filter: var(--lg-filtro);
          backdrop-filter: var(--lg-filtro);
}
.refrata .topo, .refrata .barra { backdrop-filter: url(#refracao) var(--lg-filtro); }
.topo::before, .barra::before, .folha::before, .tema-indicador::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 1px;
  background: linear-gradient(150deg, var(--lg-aro-a), var(--lg-aro-b) 32%, transparent 55%, var(--lg-aro-b) 85%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* topo: sem fio duro embaixo — a borda é um degradê de rolagem (scroll edge) */
.topo { border-bottom: 0; }
.topo::before { padding: 0 0 1px; background: linear-gradient(90deg, transparent, var(--lg-aro-b) 30%, var(--lg-aro-b) 70%, transparent); }
.topo::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; pointer-events: none;
  background: linear-gradient(color-mix(in oklab, var(--fundo) 55%, transparent), transparent);
}
.temas-trilho::after { background: linear-gradient(to right, transparent, color-mix(in oklab, var(--fundo) 70%, transparent)); }

/* pílula de tema: gota de vidro tingida pelo tema; a forma é calculada no app.js */
.tema-indicador {
  background: color-mix(in oklab, var(--aura-a) 22%, rgba(255,255,255,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 14px color-mix(in oklab, var(--aura-a) 28%, transparent);
  transform-origin: 0 50%;
}
:root[data-tema="claro"] .tema-indicador {
  background: color-mix(in oklab, var(--aura-a) 14%, rgba(255,255,255,.7));
  box-shadow: inset 0 1px 0 #fff, 0 4px 14px color-mix(in oklab, var(--aura-a) 22%, transparent);
}

/* barra inferior: flutua, encolhe ao rolar e o item tocado vira lente */
.barra {
  display: flex; gap: 0; border-radius: 31px;
  box-shadow: var(--lg-sombra);
  transition: right 420ms var(--curva), box-shadow var(--t-medio);
}
.barra-item {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
  color: var(--lg-rotulo);
  transition: flex-grow 420ms var(--curva), opacity 240ms ease, transform 380ms cubic-bezier(.34, 1.56, .64, 1), color var(--t-rapido), background-color var(--t-rapido);
}
.barra-item span { transition: opacity 200ms ease; }
.barra-item.ativo { color: var(--tinta); background: color-mix(in oklab, var(--cor-conteudo) 18%, color-mix(in oklab, var(--tinta) 9%, transparent)); }
.barra-item.gota { transform: scale(1.1); background: radial-gradient(circle at 50% 35%, var(--lg-luz), transparent 75%), color-mix(in oklab, var(--tinta) 10%, transparent); }

.barra.minima { right: calc(100% - var(--e4) - var(--barra-h)); }
.barra.minima .barra-item:not(.ativo) { flex-grow: 0; opacity: 0; pointer-events: none; padding: 0; }
.barra.minima .barra-item.ativo span { opacity: 0; height: 0; }
.barra.minima .barra-item.ativo { border-radius: 50%; }

/* folha: superfície sólida em toda a altura (Rodada 4); a meia altura de vidro saiu */
.folha::before { opacity: .4; }
.folha-fechar { background: color-mix(in oklab, var(--tinta) 9%, transparent); }

/* rótulo do conteúdo real e notas */
.selo-real {
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 6px;
  font-family: var(--mono); font-size: 0.6563rem; font-weight: 600; letter-spacing: .02em;
  color: var(--tinta); background: color-mix(in oklab, var(--t, var(--tinta)) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--t, var(--tinta)) 40%, transparent);
}
.reais { margin-bottom: var(--e5); }
.reais-cabeca { padding: 0 var(--e2) var(--e2); display: grid; gap: 2px; }
.reais-cabeca b { font-size: 0.8125rem; font-weight: 600; }
.reais-cabeca span { font-size: 0.8125rem; color: var(--tinta-media); }
.reais .ranking { margin-top: 0; }
.fonte-autor { display: block; margin-top: 3px; font-family: var(--mono); font-size: 0.6875rem; color: var(--tinta-fraca); }
.porque-nota-real { margin-top: 8px; font-size: 0.75rem; color: var(--tinta-media); }

/* thumbnail oficial: imagem inteira, na proporção dela, nada por cima além do ▶ */
.thumb.com-imagem { background: #000; }
.thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb.sem-imagem::after {
  content: "thumbnail indisponível neste ambiente"; position: absolute; left: 0; right: 0; bottom: 10px;
  text-align: center; font-family: var(--mono); font-size: 0.6875rem; color: rgba(255,255,255,.75);
}
.player-real { position: relative; aspect-ratio: 16 / 9; background: #000; }
.player-real iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* embed de rede: piso contra o bug dos 2 px e a moldura clara assumida */
.embed { min-height: 480px; padding: 8px; display: block; background: var(--superficie-2); }
.embed .instagram-media, .embed .text-post-media { margin: 0 auto !important; min-width: 0 !important; width: 100% !important; }
.embed iframe { display: block; width: 100% !important; border-radius: 12px; }
.aviso-terceiro {
  min-height: 300px; padding: 28px 22px; text-align: center;
  display: grid; justify-items: center; align-content: center; gap: 8px;
}
.aviso-terceiro .aviso-icone {
  width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center;
  background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha-forte); color: var(--tinta-media);
}
.aviso-terceiro .aviso-icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.aviso-terceiro b { margin-top: 6px; font-family: var(--display); font-size: 1.0625rem; font-weight: 600; }
.aviso-terceiro p { max-width: 260px; font-size: 0.875rem; color: var(--tinta-media); }
.aviso-terceiro .botao { margin-top: 8px; }
.bandeja:has(.aviso-terceiro) .aviso-terceiro { min-height: 0; aspect-ratio: 16 / 9; padding: 12px; gap: 4px; }
.bandeja:has(.aviso-terceiro) .aviso-terceiro p { display: none; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- acessibilidade do vidro -------------------------------------- */

@media (prefers-contrast: more) {
  :root { --lg-fundo: rgba(12, 14, 19, .9); }
  :root[data-tema="claro"] { --lg-fundo: rgba(255, 255, 255, .92); }
}
@media (prefers-reduced-transparency: reduce) {
  .topo, .barra { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--superficie) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .tema-indicador, .barra, .barra-item, .folha { transition: none !important; }
}

/* ==========================================================================
   16. RODADA 3 · os três mecanismos e os dados abertos (25/10/2026)
   - o trecho que importa: linha "vai direto ao trecho" FORA da thumbnail;
   - o assunto que esquenta: traço das 24 h, ponto final destacado;
   - o que mudou desde ontem: selo no card e linha do tempo na folha;
   - dados abertos: cards de dado, com a forma do tema e sem foto.
   Nada disto vai sobre vidro: tudo mora em superfície sólida.
   ========================================================================== */

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

/* ---------- 16.1 carregando: o feed não fica em branco enquanto o vivo.json chega */

.esperando { opacity: 0; animation: aparece 240ms ease 200ms forwards; }
.esq { border-radius: var(--raio-card); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha); animation: respira 1.6s ease-in-out infinite; }
.esq.titulo { width: 62%; height: 38px; margin: 0 var(--e2) var(--e5); border-radius: 12px; }
.esq.bloco { height: 300px; margin-bottom: var(--e4); }
.esq.bloco.curto { height: 168px; }
@keyframes aparece { to { opacity: 1; } }
@keyframes respira { 50% { opacity: .55; } }

/* ---------- 16.2 selo "novo desde ontem" */

.selo-novo {
  flex: none; position: relative;
  display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 8px 0 6px;
  border-radius: var(--raio-p);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: .005em; color: var(--tinta);
  background: color-mix(in oklab, var(--t, var(--tinta)) 15%, transparent);
}
.selo-novo::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--t, var(--tinta)); }
.meta { min-width: 0; }
.meta .selo { min-width: 0; }
.meta.em-trechos .selo-novo { height: 1.35em; }

/* ---------- 16.3 o traço das 24 h */

.faisca { flex: none; display: block; overflow: visible; }
.faisca-linha { fill: none; stroke: var(--t); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.faisca-area  { fill: color-mix(in oklab, var(--t) 7%, transparent); stroke: none; }
.faisca-halo  { fill: color-mix(in oklab, var(--t) 22%, transparent); }
.faisca-ponto { fill: var(--t); stroke: var(--superficie); stroke-width: 1.5; }
.faisca.grande { width: 100%; height: auto; }
.faisca.grande .faisca-linha { stroke-width: 2; }
.porque-bloco .faisca-ponto { stroke: color-mix(in oklab, var(--t) 8%, var(--superficie)); }

/* na linha do ranking o traço ocupa a coluna da miniatura */
.rk-faisca { display: grid; place-items: center end; height: 64px; }
/* no rodapé do card ele fica no lugar da pilha de favicons */
.rodape .faisca { margin-right: 2px; }

.porque-curva { margin-top: 14px; }
.porque-curva .eixo {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-family: var(--mono); font-size: 0.6875rem; color: var(--tinta-fraca);
}

/* ---------- 16.4 vai direto ao trecho */

.tela { position: relative; }
.salto {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 44px; margin-top: 8px; padding: 0 14px 0 12px;
  border-radius: 10px;            /* concêntrico com a bandeja: 18 − 8 */
  text-align: left; font-size: 0.8125rem; color: var(--tinta-media);
  background: color-mix(in oklab, var(--t) 9%, var(--superficie));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--t) 20%, transparent);
  transition: background-color var(--t-rapido), transform var(--t-rapido);
}
.salto:hover { background: color-mix(in oklab, var(--t) 14%, var(--superficie)); }
.salto:active { transform: scale(.985); }
.salto svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--t); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.salto-rotulo, .salto-tempo { flex: none; white-space: nowrap; }
.salto-tempo { font-family: var(--mono); font-weight: 600; color: var(--t); }
.salto-capitulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta); font-weight: 500; }
.salto-tempo::before, .salto-capitulo::before { content: "·"; margin-right: 8px; color: var(--tinta-fraca); font-family: var(--sans); font-weight: 400; }

/* ---------- 16.5 assunto sem resumo: título, quem conta e o porquê */

.card.sem-resumo .card-titulo { -webkit-line-clamp: 4; }
.card-fontes {
  margin-top: 6px; font-size: 0.8438rem; color: var(--tinta-media);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.assunto-resumo.sem { font-size: 0.9063rem; color: var(--tinta-media); }

/* ---------- 16.6 o que mudou desde ontem (folha) */

.mudou .rotulo-secao { margin-left: 0; }
.mudou-lista { list-style: none; }
.mudou-lista li { position: relative; padding: 0 0 16px 24px; }
.mudou-lista li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--superficie); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--t) 70%, transparent);
}
.mudou-lista li.ultimo::before { background: var(--t); box-shadow: 0 0 0 4px color-mix(in oklab, var(--t) 18%, transparent); }
.mudou-lista li:not(:last-child)::after {
  content: ""; position: absolute; left: 4.5px; top: 20px; bottom: 2px; width: 1px; border-radius: 1px;
  background: var(--linha-forte);
}
.mudou-lista li:last-child { padding-bottom: 0; }
.mudou-lista time { display: block; font-family: var(--mono); font-size: 0.6875rem; color: var(--tinta-fraca); }
.mudou-lista p { margin-top: 2px; font-size: 0.9375rem; line-height: 1.42; }

/* ---------- 16.7 cards de dado aberto */

.card.dado {
  padding: 16px 18px 4px; cursor: default;
  background:
    radial-gradient(240px 170px at 100% 0%, color-mix(in oklab, var(--t) 16%, transparent), transparent 72%),
    var(--superficie);
}
.card.dado:active { transform: none; }
.card.dado::before, .card.dado::after { content: ""; position: absolute; pointer-events: none; }
.card.dado > * { position: relative; z-index: 1; }
/* Espaço: planeta e anel, recolhidos no canto — nada atrás do número */
.card.dado[data-t="espaco"]::before {
  right: -34px; top: -58px; width: 112px; height: 112px; border-radius: 50%;
  background: radial-gradient(circle at 34% 72%, color-mix(in oklab, var(--t) 30%, var(--superficie)), color-mix(in oklab, var(--t) 10%, var(--superficie)) 72%);
}
.card.dado[data-t="espaco"]::after {
  right: -58px; top: -6px; width: 180px; height: 38px; border-radius: 50%;
  border: 1.5px solid color-mix(in oklab, var(--t) 42%, transparent); transform: rotate(-12deg);
}
/* IA: órbitas e o nó */
.card.dado[data-t="ia"]::before {
  right: -56px; top: -56px; width: 140px; height: 140px; border-radius: 50%;
  border: 1.5px solid color-mix(in oklab, var(--t) 36%, transparent);
}
.card.dado[data-t="ia"]::after {
  right: -14px; top: -14px; width: 60px; height: 60px; border-radius: 50%;
  border: 1.5px solid color-mix(in oklab, var(--t) 22%, transparent);
  background: radial-gradient(circle, color-mix(in oklab, var(--t) 85%, transparent) 0 5px, transparent 5.5px);
}

.dado-cabeca { display: flex; align-items: center; gap: 8px; font-size: 0.7813rem; color: var(--tinta-fraca); }
.dado-tipo::before { content: "·"; margin-right: 8px; }
.card.dado .card-titulo { margin-top: 14px; }
.dado-sub { margin-top: 4px; font-family: var(--mono); font-size: 0.7188rem; color: var(--tinta-media); }

/* contagem regressiva: monoespaçada leve, grupos com rótulo embaixo */
.contagem { margin-top: 18px; display: flex; align-items: flex-start; gap: 14px; min-height: 52px; }
.cd-prefixo { margin-top: 5px; font-family: var(--mono); font-size: 0.9375rem; font-weight: 500; color: var(--t); }
.cd-g { display: grid; justify-items: start; gap: 6px; }
.cd-g b { font-family: var(--mono); font-size: 2rem; font-weight: 300; line-height: 1; letter-spacing: -.03em; }
.cd-g small { font-size: 0.625rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-fraca); }
.cd-estado { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--display); font-size: 1.25rem; font-weight: 500; letter-spacing: -.015em; }

.dado-ficha { margin-top: 14px; }
.dado-ficha div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); }
.dado-ficha dt { font-size: 0.7813rem; color: var(--tinta-fraca); padding-top: 1px; }
.dado-ficha dd { font-size: 0.875rem; line-height: 1.4; }
.dado-fuso { display: block; font-family: var(--mono); font-size: 0.6875rem; color: var(--tinta-fraca); }

.dado-fonte {
  display: flex; align-items: center; gap: 8px; min-height: 48px;
  border-top: 1px solid var(--linha);
  font-size: 0.8125rem; color: var(--tinta-media);
}
.dado-fonte .seta { width: 16px; height: 16px; margin-left: auto; fill: none; stroke: var(--tinta-fraca); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dado-aberto {
  flex: none; font-family: var(--mono); font-size: 0.6563rem; letter-spacing: .02em; color: var(--tinta-media);
  padding: 3px 8px; border-radius: var(--raio-p); box-shadow: inset 0 0 0 1px var(--linha-forte);
}

.artigos { list-style: none; margin-top: 10px; }
.artigos li { border-top: 1px solid var(--linha); }
.artigos a { display: grid; grid-template-columns: 1fr 18px; gap: 3px 12px; padding: 12px 0; }
.artigo-titulo {
  font-size: 0.9375rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.artigo-autores { grid-column: 1; font-size: 0.7813rem; color: var(--tinta-fraca); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artigos .seta { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 16px; height: 16px; fill: none; stroke: var(--tinta-fraca); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.artigos a:hover .artigo-titulo { text-decoration: underline; text-decoration-color: var(--linha-forte); text-underline-offset: 3px; }

/* no Em alta: duas linhas de dado, com o valor à direita em monoespaçada */
.ranking.dados { margin-top: 0; }
.linha-dado {
  width: 100%; text-align: left;
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 13px 16px 13px 18px; border-radius: 20px;
  transition: background-color var(--t-rapido);
}
.linha-dado + .linha-dado { border-top: 1px solid var(--linha); border-radius: 0; }
.linha-dado:hover { background: color-mix(in oklab, var(--tinta) 3%, transparent); }
.linha-dado > span:first-child { min-width: 0; }
.linha-dado .rk-titulo { display: block; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-dado .meta { margin-top: 5px; }
.linha-dado .meta .trecho { overflow: hidden; text-overflow: ellipsis; }
.dado-valor { display: grid; justify-items: end; font-family: var(--mono); font-size: 0.9375rem; font-weight: 600; color: var(--t); white-space: nowrap; }
.dado-valor small { margin-top: 2px; font-family: var(--sans); font-size: 0.6875rem; font-weight: 400; color: var(--tinta-fraca); }

/* ---------- 16.8 expediente no fim das listas */

.expediente-rodape {
  margin-top: var(--e7);
  display: flex; justify-content: center; align-items: center; gap: 6px;
  font-size: 0.7813rem; color: var(--tinta-fraca);
}
.expediente-rodape a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 12px; }
.expediente-rodape a:hover { color: var(--tinta-media); }

/* ---------- 16.9 páginas de texto: Sobre e Privacidade */

body.pagina-texto { overflow: auto; height: auto; min-height: 100%; }
.pagina-topo {
  position: sticky; top: 0; z-index: 10;
  height: calc(56px + var(--seguro-topo)); padding: var(--seguro-topo) var(--e4) 0 var(--e2);
  display: flex; align-items: center; gap: var(--e2);
  background: var(--lg-fundo);
  -webkit-backdrop-filter: var(--lg-filtro); backdrop-filter: var(--lg-filtro);
  box-shadow: inset 0 -1px 0 var(--linha);
}
.pagina-topo .voltar {
  height: 44px; padding: 0 12px 0 6px; border-radius: var(--raio-p);
  display: inline-flex; align-items: center; gap: 2px; font-size: 0.9375rem; font-weight: 500;
}
.pagina-topo .voltar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pagina-topo .voltar:hover { background: var(--linha); }
.pagina-topo .marca { margin-left: auto; }
.pagina-corpo { max-width: 620px; margin: 0 auto; padding: var(--e6) var(--e5) calc(var(--seguro-baixo) + 64px); }
.pagina-sobretitulo { font-family: var(--mono); font-size: 0.7188rem; color: var(--tinta-fraca); letter-spacing: .02em; }
.pagina-corpo h1 { margin-top: 6px; font-family: var(--display); font-size: 2.125rem; line-height: 1.08; font-weight: 300; letter-spacing: -.03em; }
.pagina-corpo h2 { margin-top: var(--e6); font-family: var(--display); font-size: 1.1875rem; font-weight: 600; letter-spacing: -.015em; }
.pagina-corpo p, .pagina-corpo li { margin-top: 10px; font-size: 0.9688rem; line-height: 1.6; color: var(--tinta-media); }
.pagina-corpo ul { padding-left: 1.1em; }
.pagina-corpo li { margin-top: 6px; }
.pagina-corpo p strong { color: var(--tinta); font-weight: 600; }
.pagina-corpo a.ligacao { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--linha-forte); text-underline-offset: 3px; }
.marcador {
  display: inline-block; margin-top: var(--e3);
  font-family: var(--mono); font-size: 0.6875rem; color: var(--tinta-fraca);
  padding: 4px 10px; border-radius: var(--raio-p); box-shadow: inset 0 0 0 1px var(--linha-forte);
}
.expediente { margin-top: var(--e5); border-radius: 20px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha); overflow: hidden; }
.expediente div { padding: 14px 18px; }
.expediente div + div { border-top: 1px solid var(--linha); }
.expediente dt { font-size: 0.7813rem; color: var(--tinta-fraca); }
.expediente dd { margin-top: 2px; font-size: 1rem; font-weight: 500; }
.pagina-rodape { margin-top: var(--e7); display: flex; gap: 6px; font-size: 0.7813rem; color: var(--tinta-fraca); }
.pagina-rodape a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- 16.10 temas que só o coletor traz ---------------------------- */

/* "Tecnologia" = assunto sem tema (fica no Em alta, na busca e em Vídeos): cinza-azulado,
   para não disputar cor com os temas. Segurança digital fica pronta para quando entrar. */
:root { --t-geral: #c3cad6; --t-seguranca: #ff8f70; }
:root[data-tema="claro"] { --t-geral: #4a5160; --t-seguranca: #c2410c; }
[data-t="geral"]     { --t: var(--t-geral); }
[data-t="seguranca"] { --t: var(--t-seguranca); }

/* ---------- 16.11 lançamento: a fila e o crédito ------------------------- */

.dado-fonte-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dado-seguir { margin-top: 4px; border-top: 1px solid var(--linha); padding-top: 12px; }
.dado-seguir h4 { font-size: 0.7813rem; font-weight: 500; color: var(--tinta-fraca); }
.dado-seguir ol { list-style: none; margin-top: 4px; }
.dado-seguir li { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 8px 0; }
.dado-seguir li > span { min-width: 0; display: grid; }
.dado-seguir b { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dado-seguir small { font-size: 0.7813rem; color: var(--tinta-fraca); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dado-seguir time { font-family: var(--mono); font-size: 0.75rem; color: var(--tinta-media); white-space: nowrap; }
.dado-seguir + .dado-fonte { margin-top: 4px; }
.dado-credito { margin: -6px 0 12px; font-size: 0.7188rem; color: var(--tinta-fraca); }
.mudou-lista p a { text-decoration: underline; text-decoration-color: var(--linha-forte); text-underline-offset: 3px; }

/* ---------- 16.12 acertos da conferência no celular ---------------------- */

/* selo de tema nunca encolhe: quem cede é o trecho ao lado, com reticências */
.meta .selo { flex: none; }
.linha-dado .meta .trecho { min-width: 0; white-space: nowrap; }
/* no card e na linha, o traço vai sem preenchimento — a área virava um bloco escuro sob o
   degrau; na folha, maior, o preenchimento leve continua */
.faisca:not(.grande) .faisca-area { display: none; }
/* anel do planeta mais alto: não cruza o "próximo lançamento" do cabeçalho */
.card.dado[data-t="espaco"]::after { right: -64px; top: -30px; width: 160px; }
.card.dado[data-t="espaco"]::before { top: -66px; }
.card.dado[data-t="ia"]::before { top: -66px; }
.card.dado[data-t="ia"]::after { top: -20px; }
/* na linha compacta, o trecho vira marca curta: ícone de salto + minuto, na cor do tema */
.salto-mini { flex: none; display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-size: 0.6875rem; font-weight: 600; color: var(--t); }
.salto-mini svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* na folha, a área sob o traço esmaece para baixo (degradê na cor do tema) */
.faisca.grande { color: var(--t); }
.faisca.grande .faisca-area { fill: url(#curva-degrade); }
/* o capítulo é o que importa: ganha a segunda linha inteira, alinhado depois do ícone */
.salto { flex-wrap: wrap; row-gap: 2px; padding-top: 10px; padding-bottom: 10px; }
.salto-capitulo { flex: 1 0 100%; padding-left: 25px; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.salto-capitulo::before { content: none; }
/* de qual vídeo é o trecho: título do YouTube intacto, em texto corrido, não em mono */
.trecho-de { margin-top: 8px; font-size: 0.8125rem; line-height: 1.4; color: var(--tinta-fraca);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* páginas de texto: o marcador quebra em duas linhas no celular — canto de cartão, não de pílula */
.marcador { border-radius: 10px; line-height: 1.5; }
.pagina-corpo li strong { color: var(--tinta); font-weight: 600; }
.pagina-rodape { flex-wrap: wrap; align-items: center; }

/* ==========================================================================
   17. RODADA 4 · ajustes de uso (26/10/2026)
   - leitor interno: a matéria no site da fonte, só com moldura permitida;
   - fonte em inglês: selo EN e "Ler traduzido pelo Google" (secundário);
   - cara de app: convite com botão no Android, tela cheia no Android,
     área segura e barra de status do iPhone instalado.
   Vidro continua só na navegação: o leitor é sólido, porque traz texto.
   ========================================================================== */

/* linha da fonte: o link principal é a linha; a tradução é um botão abaixo, alinhado ao texto */
.selo-lingua {
  font-family: var(--mono); font-size: 0.625rem; font-weight: 600; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 6px;
  color: var(--tinta-media); background: color-mix(in oklab, var(--tinta) 8%, transparent);
}
/* secundário de verdade: sem moldura, só ícone e texto — numa lista toda em inglês ele
   se repete, e não pode pesar mais que o título original */
.fonte-traduzir {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; margin: -6px 0 10px 52px; padding: 0 10px 0 8px;
  border-radius: var(--raio-p);
  font-size: 0.8125rem; font-weight: 500; color: var(--tinta-media);
  transition: background-color var(--t-rapido), color var(--t-rapido);
}
.fonte-traduzir:hover { color: var(--tinta); background: color-mix(in oklab, var(--tinta) 5%, transparent); }
.fonte-traduzir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* dica do navegador comum, sob o botão que abre a fonte em nova aba */
.dica-app { margin-top: 10px; font-size: 0.8125rem; line-height: 1.45; color: var(--tinta-fraca); }
.dica-instalar {
  font-weight: 600; color: var(--tinta-media);
  text-decoration: underline; text-decoration-color: var(--linha-forte); text-underline-offset: 3px;
}
.dica-instalar:hover { color: var(--tinta); }
.dica-passos {
  margin-top: 8px; padding: 10px 12px; border-radius: 14px;
  font-size: 0.8125rem; line-height: 1.45; color: var(--tinta-media);
  background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linha);
}

/* convite: no Android o pedido do Chrome vira botão */
.convite-instalar { margin-top: 10px; height: 38px; padding: 0 16px; flex: none; font-size: 0.8438rem; }
.convite-instalar svg { width: 17px; height: 17px; }

/* tela cheia (Android): o ícone troca conforme o estado */
#tela-cheia[aria-pressed="true"] .i-cheia, #tela-cheia[aria-pressed="false"] .i-sair-cheia { display: none; }

/* leitor interno: camada sólida por cima da folha, com a barra do crédito */
.leitor {
  position: fixed; z-index: 60; inset: 0; margin: 0 auto; max-width: 480px;
  display: flex; flex-direction: column;
  padding-top: var(--seguro-topo);
  background: var(--superficie);
  opacity: 0; transform: translateY(16px);
  transition: opacity 220ms ease, transform 260ms var(--curva);
}
.leitor.aberto { opacity: 1; transform: none; }
.leitor[hidden], #tela-cheia[hidden] { display: none; }
.leitor:focus { outline: none; }
.leitor-barra {
  flex: none; height: 56px;
  display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center;
  padding: 0 12px 0 6px;
  border-bottom: 1px solid var(--linha);
}
.leitor-barra .botao-icone svg { width: 20px; height: 20px; }
.leitor-credito { min-width: 0; display: grid; line-height: 1.25; }
.leitor-credito b { font-size: 0.9375rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leitor-credito span { font-family: var(--mono); font-size: 0.6875rem; color: var(--tinta-fraca); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leitor-site { height: 36px; padding: 0 12px 0 14px; gap: 4px; font-size: 0.8438rem; }
.leitor-site svg { width: 16px; height: 16px; }
.leitor-quadro { position: relative; flex: 1; min-height: 0; background: var(--superficie); }
/* a página da fonte entra em fundo branco (é o dela) e aparece no "load" ou em 1,5 s, o
   que vier antes — página pesada já está legível antes de terminar de carregar anúncio */
.leitor-quadro iframe {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0;
  background: #fff; opacity: 0; transition: opacity 200ms ease;
}
.leitor.quadro-visivel .leitor-quadro iframe { opacity: 1; }
.leitor-espera {
  position: absolute; inset: 0; z-index: 0; display: grid; place-content: center; justify-items: center; gap: 4px;
  font-family: var(--mono); font-size: 0.7188rem; color: var(--tinta-media);
}
.leitor-espera .carregando { width: 26px; height: 26px; margin-bottom: 10px; border-radius: 50%; border: 2px solid var(--linha-forte); border-top-color: var(--tinta); animation: gira .8s linear infinite; }
.leitor[data-estado="pronto"] .leitor-espera, .leitor.quadro-visivel .leitor-espera { display: none; }
/* passou do prazo sem "load": aviso no rodapé, sólido, por cima da matéria — não a apaga */
.leitor-aviso {
  position: absolute; z-index: 2; left: 12px; right: 12px; bottom: calc(var(--seguro-baixo) + 12px);
  display: grid; gap: 10px; padding: 16px; border-radius: 22px;
  background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linha-forte), var(--sombra-alta);
}
.leitor-aviso p { font-size: 0.875rem; line-height: 1.45; color: var(--tinta-media); }
.leitor-aviso p b { color: var(--tinta); font-weight: 600; }
.leitor-aviso .botao { justify-content: center; }
.leitor-aviso .dica-app { margin-top: 0; text-align: center; }
/* com o aviso no ar, o botão dele é o caminho: o da barra sai para não repetir */
.leitor[data-estado="lento"] .leitor-site { visibility: hidden; }

/* iPhone instalado que trocou para o tema claro com a barra de status translúcida (o
   relógio fica branco até o app reabrir): uma faixa escura só atrás do relógio */
:root[data-app="instalado"][data-barra="translucida"][data-tema="claro"] body::before {
  content: ""; position: fixed; z-index: 80; top: 0; left: 0; right: 0;
  height: var(--seguro-topo); background: #08090c; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .leitor { transition: none; transform: none; }
}