/* A base de uso no celular vem primeiro, como no resto do site. */
@import url('/mobile.css');

/* Revista (area de membros).
   Prefixo rv- pelo mesmo motivo do fc- no feed: estas telas emprestam pedacos
   do site e nao podem brigar com .cartao, .topo e companhia. */

.rv {
  --rv-bg: #0c0d10;
  --rv-surface: #171a20;
  --rv-surface-2: #1e222a;
  --rv-border: #262b34;
  --rv-ink: #e8eaf0;
  --rv-ink-dim: #9aa3b2;
  --rv-ink-faint: #6b7484;
  --rv-accent: #c9a227;
  --rv-ok: #4ac07a;
}

body.rv {
  margin: 0;
  background: var(--rv-bg);
  color: var(--rv-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* O mesmo brilho quente do topo da home (public/landing.html) e da pagina de
     oferta (revista-oferta.html), copiado valor por valor. A revista e uma
     porta da mesma casa: chegando nela pelo site, o fundo nao pode mudar.
     Vem depois do atalho `background` de proposito — o atalho zera
     `background-image`, entao inverter as duas linhas apaga o brilho. */
  background-image: radial-gradient(1100px 520px at 50% -280px, rgba(201, 162, 39, .13), transparent 70%);
  background-repeat: no-repeat;
}

/* `.rv a` vale para o texto corrido. Ele vence `.rv-botao` por especificidade
   (classe + elemento contra classe sozinha), entao TODA regra de cor que
   precise valer sobre um link mora com a classe do bloco na frente — sem isso
   o botao dourado sai com texto dourado, invisivel, e ninguem percebe ate
   olhar um print. */
.rv a { color: var(--rv-accent); }

.rv-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 16px 64px;
}

/* ---------- topo ---------- */

.rv-topo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rv-border);
  background: var(--rv-surface);
  position: sticky; top: 0; z-index: 20;
}
.rv .rv-marca {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 15px; letter-spacing: .2px;
  color: var(--rv-ink); text-decoration: none;
}
.rv .rv-marca span { color: var(--rv-accent); }
.rv-topo-dir { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-quem { color: var(--rv-ink-dim); font-size: 13px; }

/* ---------- botoes ---------- */

.rv .rv-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 18px;
  border-radius: 10px; border: 1px solid var(--rv-border);
  background: var(--rv-surface-2); color: var(--rv-ink);
  font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.rv .rv-botao:hover { border-color: #39404d; }
.rv .rv-botao-forte {
  background: var(--rv-accent); border-color: var(--rv-accent); color: #14150f;
}
.rv .rv-botao-fraco { background: transparent; color: var(--rv-ink-dim); }
.rv .rv-botao[disabled] { opacity: .5; cursor: default; }

/* ---------- oferta ---------- */

.rv-hero { padding: 40px 0 26px; text-align: center; }
.rv-hero h1 { margin: 0 0 12px; font-size: 30px; line-height: 1.15; letter-spacing: -.4px; }
.rv-hero p { margin: 0 auto 8px; max-width: 620px; color: var(--rv-ink-dim); font-size: 16px; line-height: 1.55; }
.rv-hero .rv-acoes { margin-top: 22px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.rv-numeros {
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 26px 0;
}
.rv-numero {
  background: var(--rv-surface); border: 1px solid var(--rv-border);
  border-radius: 12px; padding: 16px; text-align: center;
}
.rv-numero b { display: block; font-size: 24px; color: var(--rv-ink); }
.rv-numero span { font-size: 13px; color: var(--rv-ink-faint); }

.rv-lista {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin: 8px 0 28px; padding: 0; list-style: none;
}
.rv-lista li {
  background: var(--rv-surface); border: 1px solid var(--rv-border);
  border-radius: 12px; padding: 16px; font-size: 14.5px; line-height: 1.5; color: var(--rv-ink-dim);
}
.rv-lista b { display: block; color: var(--rv-ink); font-size: 15px; margin-bottom: 5px; }

.rv-aviso {
  background: var(--rv-surface); border: 1px solid var(--rv-border);
  border-left: 3px solid var(--rv-accent);
  border-radius: 10px; padding: 14px 16px; color: var(--rv-ink-dim);
  font-size: 14px; line-height: 1.55; margin: 18px 0;
}
.rv-aviso b { color: var(--rv-ink); }

/* ---------- formulario ---------- */

.rv-form {
  max-width: 380px; margin: 40px auto; background: var(--rv-surface);
  border: 1px solid var(--rv-border); border-radius: 14px; padding: 22px;
}
.rv-form h1 { margin: 0 0 6px; font-size: 21px; }
.rv-form p.rv-sub { margin: 0 0 18px; color: var(--rv-ink-dim); font-size: 14px; }
.rv-campo { display: block; margin-bottom: 14px; }
.rv-campo span { display: block; font-size: 13px; color: var(--rv-ink-dim); margin-bottom: 6px; }
.rv-campo input {
  width: 100%; box-sizing: border-box; min-height: 46px; padding: 0 12px;
  /* 16px: abaixo disso o iOS da zoom ao focar o campo. */
  font-size: 16px; color: var(--rv-ink);
  background: var(--rv-bg); border: 1px solid var(--rv-border); border-radius: 9px;
}
.rv-erro { color: #ff8b8b; font-size: 13.5px; min-height: 18px; margin: 4px 0 10px; }
.rv-ok { color: var(--rv-ok); font-size: 13.5px; }

/* ---------- busca ---------- */

.rv-busca { margin: 18px 0 12px; }
.rv-busca-linha { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-busca input[type="search"] {
  flex: 1 1 240px; min-height: 48px; padding: 0 14px; font-size: 16px;
  color: var(--rv-ink); background: var(--rv-surface);
  border: 1px solid var(--rv-border); border-radius: 11px;
}
.rv-filtros {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.rv-filtros select, .rv-filtros label {
  min-height: 40px; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px; font-size: 14px; color: var(--rv-ink);
  background: var(--rv-surface); border: 1px solid var(--rv-border); border-radius: 9px;
}

/* ---------- capa da edicao ---------- */

.rv-edicao { margin: 22px 0 4px; }
.rv-edicao h1 {
  margin: 0 0 6px;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 26px; font-weight: 600; letter-spacing: -.01em;
}
.rv-edicao p { margin: 0; color: var(--rv-ink-dim); font-size: 15px; max-width: 60ch; line-height: 1.55; }

.rv-grade {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.rv-cartao {
  background: var(--rv-surface); border: 1px solid var(--rv-border);
  border-radius: 13px; padding: 12px; text-align: left; cursor: pointer;
  color: inherit; font: inherit; display: flex; flex-direction: column; gap: 6px;
}
.rv-cartao:hover { border-color: #39404d; }
.rv-foto {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px;
  background: var(--rv-surface-2); margin-bottom: 2px;
  /* Rosto costuma estar no terco de cima. `cover` corta pelo centro, entao
     puxar o enquadramento para cima e o que impede a foto de comecar na altura
     do nariz quando a imagem nao e quadrada. */
  object-position: 50% 25%;
}

/* O chapeu e o mesmo elemento na capa e na materia: e o assunto da pessoa,
   escrito pequeno e em caixa alta, do jeito que revista faz ha um seculo. */
.rv-chapeu {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rv-accent);
}
.rv-cartao h3 {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 17px; font-weight: 600; line-height: 1.2;
}
.rv-arroba { color: var(--rv-ink-faint); font-size: 12.5px; word-break: break-all; }
.rv-chamada {
  margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--rv-ink-dim);
  /* Tres linhas: a chamada e a primeira linha da bio, e bio comprida
     desalinharia a altura de todos os cartoes da fileira. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.rv-lugar { font-size: 12px; color: var(--rv-ink-faint); margin-top: 2px; }

.rv-filtros-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rv-filtros select:disabled { opacity: .45; }

.rv-credenciais {
  margin: 2px 0 0; font-size: 13.5px; color: var(--rv-ink-faint);
  letter-spacing: .01em;
}

.rv-mais { display: flex; justify-content: center; margin: 26px 0 8px; }
.rv-vazio { text-align: center; color: var(--rv-ink-faint); padding: 40px 10px; }

/* ---------- o livro: duas paginas abertas, sem rolagem ---------- */

/* A materia nao rola: ela e cortada em paginas pelo proprio navegador, com
   `column-width` (ver `revista-livro.js`). Cada coluna e uma pagina, virar e
   deslocar o fluxo, e por isso nao existe barra de rolagem em lugar nenhum
   daqui.

   `--rv-virada` esta duplicado no JS (`DURACAO`), e os dois precisam bater: o
   CSS diz quanto dura o giro, o JS diz quando tirar a folha do DOM. */
.rv-modal {
  --rv-virada: 780ms;
  --rv-margem: 26px;
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(4, 5, 8, .86);
  padding: 14px;
}
.rv-modal[hidden] { display: none; }

.rv-caderno {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  width: min(1180px, 100%);
}

.rv-livro {
  position: relative;
  height: min(85vh, 920px);
  /* O LIVRO FICA LEVEMENTE INCLINADO, como uma revista pousada na mesa em vez
     de uma folha colada na tela. A inclinacao e pequena de proposito: passando
     de uns tres graus, a linha de texto do lado mais afastado comeca a ficar
     menor que a do lado de perto, e ler cansa. */
  transform: perspective(2000px) rotateX(1.4deg) rotateY(-2.2deg);
  transform-style: preserve-3d;
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .55));
}
/* No celular a tela ja e estreita: inclinar ali so rouba largura util. */
@media (max-width: 859px) {
  .rv-livro { transform: none; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .5)); }
}

/* O papel. `overflow: visible` de proposito: a folha que gira sai do plano, e
   um papel que corta o que passa da borda cortaria a folha no meio do giro. */
.rv-papel {
  position: absolute; inset: 0;
  background: var(--rv-surface);
  border: 1px solid var(--rv-border);
  border-radius: 16px;
  padding: var(--rv-margem);
  perspective: 2600px;
  overflow: visible;
}

/* A janela por onde se ve o fluxo. Aqui sim o corte e necessario: e ela que
   esconde as paginas que ainda nao chegaram. */
.rv-viewport {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
}

/* O fluxo com o texto da materia inteira. Altura, largura de coluna e vao sao
   escritos pelo JS, que e quem sabe o tamanho real da tela. */
.rv-fluxo {
  column-fill: auto;
  height: 100%;
  will-change: transform;
}

/* Nada de bloco partido no meio pela virada de coluna: titulo em uma pagina e
   texto na seguinte e o tipo de erro que so aparece depois de publicado. */
.rv-fluxo .rv-secao,
.rv-fluxo .rv-publicacao,
.rv-fluxo .rv-abertura,
.rv-fluxo .rv-citacao,
.rv-fluxo .rv-onde { break-inside: avoid; }
.rv-fluxo h2, .rv-fluxo h4 { break-after: avoid; }

/* A lombada, no meio das duas paginas. */
.rv-lombada {
  position: absolute; top: var(--rv-margem); bottom: var(--rv-margem); left: 50%;
  width: 1px; margin-left: -.5px;
  background: linear-gradient(to bottom, transparent, var(--rv-border) 12%, var(--rv-border) 88%, transparent);
  pointer-events: none;
}
@media (max-width: 859px) { .rv-lombada { display: none; } }

/* ---------- a folha que vira ---------- */

/* A virada é uma ANIMAÇÃO com estágios, e não uma transição de um transform
   para outro. A diferença é o que separa "a página trocou" de "a página foi
   virada": papel não gira em torno de um eixo e pronto — ele se levanta, se
   torce um pouco no meio do caminho e assenta do outro lado. Cada estágio
   abaixo é um desses momentos.

   `--rv-virada` está duplicado no JS (`DURACAO`), e os dois precisam bater. */
.rv-folha {
  position: absolute;
  top: var(--rv-margem); right: var(--rv-margem);
  height: calc(100% - var(--rv-margem) * 2);
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  z-index: 4;
  will-change: transform;
}
.rv-folha.rv-virou {
  animation: rv-virar-adiante var(--rv-virada) cubic-bezier(.42, .02, .32, 1) forwards;
}
.rv-folha.rv-de-volta { transform: rotateY(-180deg); }
.rv-folha.rv-de-volta-animando {
  animation: rv-virar-atras var(--rv-virada) cubic-bezier(.42, .02, .32, 1) forwards;
}

/* O `translateZ` é o levantar da folha: ela sai do plano da revista antes de
   tombar, como papel que descola. O `rotateX` mínimo é a torção — mais do que
   isso e a folha parece amassada, não virada. */
@keyframes rv-virar-adiante {
  0%   { transform: rotateY(0deg) translateZ(0) rotateX(0deg); }
  22%  { transform: rotateY(-34deg) translateZ(30px) rotateX(1.4deg); }
  52%  { transform: rotateY(-96deg) translateZ(42px) rotateX(2deg); }
  80%  { transform: rotateY(-148deg) translateZ(24px) rotateX(1deg); }
  100% { transform: rotateY(-180deg) translateZ(0) rotateX(0deg); }
}
@keyframes rv-virar-atras {
  0%   { transform: rotateY(-180deg) translateZ(0) rotateX(0deg); }
  22%  { transform: rotateY(-146deg) translateZ(30px) rotateX(-1.4deg); }
  52%  { transform: rotateY(-84deg) translateZ(42px) rotateX(-2deg); }
  80%  { transform: rotateY(-32deg) translateZ(24px) rotateX(-1deg); }
  100% { transform: rotateY(0deg) translateZ(0) rotateX(0deg); }
}

.rv-face {
  position: absolute; inset: 0;
  overflow: hidden;
  background: var(--rv-surface);
  backface-visibility: hidden;
  box-shadow: 0 0 34px rgba(0, 0, 0, .45);
}
/* A largura e o recuo da janela vem do JS: dependem do vao, que so ele conhece
   em pixels. Aqui fica so a altura. */
.rv-face .rv-viewport { height: 100%; }
.rv-verso { transform: rotateY(180deg); }

/* O vinco: a sombra junto da lombada, mais forte no meio do giro, quando a
   folha está mais fechada sobre si mesma. */
.rv-vinco {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to right, rgba(0, 0, 0, .6), rgba(0, 0, 0, .12) 42%, transparent 68%);
  opacity: .5;
  animation: rv-vincar var(--rv-virada) ease-in-out forwards;
}
.rv-verso .rv-vinco {
  background: linear-gradient(to left, rgba(0, 0, 0, .6), rgba(0, 0, 0, .12) 42%, transparent 68%);
}
@keyframes rv-vincar {
  0%   { opacity: .35; }
  50%  { opacity: 1; }
  100% { opacity: .35; }
}

/* O brilho especular: a luz da sala correndo pelo papel enquanto ele levanta.
   É o detalhe que faz a folha parecer papel, e não cartão rígido. */
.rv-brilho {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .1) 46%, rgba(255, 255, 255, .16) 52%, transparent 68%);
  opacity: 0;
  transform: translateX(-40%);
  animation: rv-brilhar var(--rv-virada) ease-in-out forwards;
}
@keyframes rv-brilhar {
  0%   { opacity: 0; transform: translateX(-45%); }
  40%  { opacity: 1; transform: translateX(10%); }
  70%  { opacity: .7; transform: translateX(38%); }
  100% { opacity: 0; transform: translateX(55%); }
}

/* A sombra que a folha levantada projeta na página de baixo, varrendo de um
   lado ao outro no compasso do giro. Sem ela a folha gira no ar e a página de
   baixo não sabe que tem algo em cima. */
.rv-sombra-piso {
  position: absolute;
  top: var(--rv-margem); bottom: var(--rv-margem);
  left: var(--rv-margem); right: var(--rv-margem);
  pointer-events: none; z-index: 2;
  background: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, .18) 30%, transparent 62%);
  opacity: 0;
}
.rv-sombra-indo { animation: rv-varrer-esquerda var(--rv-virada) ease-in-out forwards; }
.rv-sombra-voltando { animation: rv-varrer-direita var(--rv-virada) ease-in-out forwards; }

@keyframes rv-varrer-esquerda {
  0%   { opacity: 0; transform: translateX(28%); }
  45%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-32%); }
}
@keyframes rv-varrer-direita {
  0%   { opacity: 0; transform: translateX(-32%); }
  45%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(28%); }
}

/* Quem pediu menos movimento troca a página sem nada disso. */
@media (prefers-reduced-motion: reduce) {
  .rv-folha.rv-virou,
  .rv-folha.rv-de-volta-animando { animation: none; }
  .rv-vinco, .rv-brilho, .rv-sombra-piso { animation: none; opacity: 0; }
}

/* Enquanto vira, ninguem clica no meio do movimento. */
.rv-papel.rv-virando { pointer-events: none; }

/* ---------- o canto dobrado ---------- */

/* O indicativo de "vira aqui", no pe da pagina da direita. Numa revista de
   papel e onde o dedo vai, entao ele e botao, e nao desenho: clicar vira.

   Feito com dois triangulos: o de baixo e a sombra do vinco na pagina, o de
   cima e o proprio canto levantado. Ao passar o mouse ele cresce, que e o
   convite. */
.rv-canto {
  position: absolute; right: 0; bottom: 0;
  width: 62px; height: 62px;
  padding: 0; border: 0; background: none; cursor: pointer;
  border-bottom-right-radius: 16px;
  overflow: hidden;
  transition: width .18s ease, height .18s ease;
}
.rv-canto::before,
.rv-canto::after {
  content: ''; position: absolute; right: 0; bottom: 0;
  width: 100%; height: 100%;
}
/* a sombra que o canto levantado lanca sobre a pagina */
.rv-canto::before {
  background: linear-gradient(315deg, rgba(0, 0, 0, .55) 40%, transparent 62%);
}
/* o canto em si, mais claro que a pagina, como papel pegando luz */
.rv-canto::after {
  background: linear-gradient(315deg, var(--rv-surface-2) 48%, transparent 49%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  border-bottom-right-radius: 15px;
}
.rv-canto:hover { width: 84px; height: 84px; }
.rv-canto[disabled] { display: none; }
@media (max-width: 859px) { .rv-canto { width: 48px; height: 48px; } }

/* ---------- controles ---------- */

.rv-fechar {
  position: absolute; top: -6px; right: -2px; z-index: 6;
  background: none; border: 0; color: var(--rv-ink-faint);
  font-size: 30px; line-height: 1; cursor: pointer; padding: 2px 8px;
}
@media (max-width: 859px) { .rv-fechar { top: -4px; right: 0; } }

.rv-seta {
  flex: 0 0 auto;
  width: 46px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rv-surface); color: var(--rv-ink);
  border: 1px solid var(--rv-border); border-radius: 12px;
  font-size: 26px; line-height: 1; cursor: pointer; font-family: inherit;
}
.rv-seta:hover { border-color: #39404d; }
.rv-seta[disabled] { opacity: .26; cursor: default; }
/* No celular o caderno ocupa a tela e nao sobra margem para as setas: la quem
   vira a pagina e a barra de baixo ou o dedo. */
@media (max-width: 859px) { .rv-seta { display: none; } }

.rv-navegacao {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.rv .rv-nav-botao { flex: 1 1 0; min-width: 0; }
.rv-nav-posicao {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--rv-ink-faint); white-space: nowrap;
}

/* O seletor de profissão dentro do livro. No celular ele toma a linha INTEIRA
   e sobe para cima dos botões (`order: -1`): dividir a mesma linha com voltar,
   som e virar deixaria os quatro estreitos demais para o dedo. Da largura de
   tablet para cima ele volta a ser um item no meio da barra, no lugar onde
   antes havia só o rótulo "Nesta edição". */
.rv-nav-oficio {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 100%; order: -1; min-width: 0;
}
.rv-nav-oficio > span {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--rv-ink-faint); white-space: nowrap;
}
.rv .rv-nav-oficio select {
  flex: 1 1 auto; min-width: 0; min-height: 44px;
  background: var(--rv-surface); color: var(--rv-ink);
  border: 1px solid var(--rv-border); border-radius: 10px;
  padding: 0 10px; font-family: inherit;
  /* 16px é o piso do projeto para campo: abaixo disso o iPhone dá zoom sozinho
     ao focar, e a pessoa sai da leitura com a página torta. */
  font-size: 16px;
}
.rv .rv-nav-oficio select:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 2px; }
@media (min-width: 700px) {
  .rv-nav-oficio { flex: 0 1 auto; order: 0; }
  .rv .rv-nav-oficio select { max-width: 260px; font-size: 14px; }
}

.rv-som {
  flex: 0 0 auto;
  width: 42px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--rv-border);
  border-radius: 10px; color: var(--rv-ink-dim);
  font-size: 15px; cursor: pointer; font-family: inherit;
}
.rv-som:hover { border-color: #39404d; }
.rv .rv-nav-botao[disabled] { opacity: .38; cursor: default; }

/* ---------- o texto da materia ---------- */

/* TUDO AQUI E RELATIVO (`em`), e nao em pixels, porque o livro ENCOLHE a fonte
   ate a materia caber em duas paginas (ver `encaixar()` em revista-livro.js).
   Com px, mudar a base nao mexeria em nada e o encaixe nao funcionaria; com em,
   uma linha muda a matéria inteira de tamanho, junto com o retrato. */
.rv-fluxo { font-size: 16px; }

.rv-abertura { display: flex; flex-direction: column; gap: .5em; margin-bottom: .25em; }
.rv-retrato {
  /* QUADRADO, e nao faixa. A foto de perfil do Instagram ja vem quadrada:
     esticar numa faixa larga obrigava o corte a comer topo e base, e era
     exatamente ali que ficavam os olhos. */
  width: 100%; max-width: 12.5em; aspect-ratio: 1;
  object-fit: cover; object-position: 50% 25%;
  border-radius: .75em; background: var(--rv-surface-2);
  margin: 0 auto .5em; display: block;
}
.rv-abertura h2 {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.85em; font-weight: 600; line-height: 1.1;
  letter-spacing: -.015em; text-wrap: balance;
}
.rv-linha-fina { margin: 0; font-size: 1.03em; color: var(--rv-ink-dim); line-height: 1.45; }
.rv-credenciais { margin: 0; font-size: .84em; color: var(--rv-ink-faint); }
.rv-arroba-link { font-size: .87em; }

.rv-secao { margin-top: 1.35em; display: flex; flex-direction: column; gap: .55em; }
.rv-secao h4 {
  margin: 0; font-size: .72em; text-transform: uppercase; letter-spacing: .1em;
  color: var(--rv-ink-faint); font-weight: 700;
}

/* A bio da pessoa entra como citacao, e nao como texto nosso: a materia e
   montada com material real, e o leitor precisa ver de quem e cada frase. */
.rv-citacao {
  margin: 0; padding: .12em 0 .12em 1em;
  border-left: 3px solid var(--rv-accent);
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.06em; line-height: 1.55; color: var(--rv-ink);
  white-space: pre-wrap;
}

.rv-publicacoes { display: flex; flex-direction: column; gap: .85em; }
.rv-publicacao { display: flex; flex-direction: column; gap: .3em; }
.rv-trecho { margin: 0; font-size: .94em; line-height: 1.6; color: var(--rv-ink-dim); }
.rv-publicacao a { font-size: .81em; }

.rv-corpo { margin: 0; font-size: .94em; line-height: 1.6; color: var(--rv-ink-dim); }

.rv-tags { display: flex; flex-wrap: wrap; gap: .38em; }
.rv-tag {
  display: inline-block; padding: .19em .62em; border-radius: 999px;
  background: var(--rv-surface-2); color: var(--rv-ink-dim); font-size: .78em;
}

.rv-onde { display: grid; gap: .44em; font-size: .91em; }
.rv-onde div { word-break: break-word; }
.rv-rotulo { color: var(--rv-ink-faint); }

/* O pe da materia: diz que acabou antes de a proxima aparecer. */
.rv-fim {
  margin-top: 1.6em; padding-top: .85em;
  border-top: 1px solid var(--rv-border);
  font-size: .69em; text-transform: uppercase; letter-spacing: .12em;
  color: var(--rv-ink-faint);
}

/* ---------- o ceu por tras do conteudo ---------- */

/* `ceu.js` (o mesmo da home) desenha o espaco sideral num canvas atras da
   pagina. Sem o passo abaixo ele existe e nao se ve: as superficies da revista
   sao opacas e cobrem a tela inteira, exatamente como acontecia na home antes
   de ela abrir os cartoes. O arquivo do ceu ja faz isso para as classes da
   landing (`.tile`, `.panel`, `.note`), que aqui nao existem — dai a lista.

   A opacidade e o desfoque sao os mesmos de la, valor por valor: e o mesmo
   fundo, e duas receitas diferentes de vidro apareceriam lado a lado no
   caminho home > revista. */
.rv-topo,
.rv-cartao,
.rv-numero,
.rv-lista li,
.rv-aviso,
.rv-form,
.rv-seta {
  background: rgba(23, 26, 32, .74);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

/* A materia NAO entra na lista: ali a folha e papel, e papel nao e vidro. Texto
   longo sobre estrela em movimento cansa a vista, e o efeito de virar a pagina
   depende de a folha de cima esconder a de baixo. */

/* ---------- a revista folheando sozinha ---------- */

/* Aparece enquanto a busca por profissao vai e volta. A metafora e a mesma da
   tela toda: alguem passando as paginas atras do que voce pediu. Ela tambem
   esconde a espera da rede, que e o ganho pratico. */
.rv-folheando {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  background: rgba(4, 5, 8, .88);
}

.rv-folheando-pilha {
  position: relative;
  width: 168px; height: 214px;
  perspective: 1500px;
}

/* O bloco parado embaixo: sem ele as folhas girariam sobre o vazio e o efeito
   viraria papel voando, em vez de revista sendo folheada. */
.rv-folheando-pilha::before {
  content: ''; position: absolute; inset: 0;
  background: var(--rv-surface-2);
  border: 1px solid var(--rv-border);
  border-radius: 4px 10px 10px 4px;
}

.rv-folheando-folha {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--rv-surface) 62%, var(--rv-surface-2));
  border: 1px solid var(--rv-border);
  border-radius: 4px 10px 10px 4px;
  transform-origin: left center;
  backface-visibility: hidden;
  animation: rv-folhear 700ms cubic-bezier(.4, .05, .35, 1) forwards;
  box-shadow: 6px 0 18px rgba(0, 0, 0, .4);
}

@keyframes rv-folhear {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(-168deg); }
}

.rv-folheando-rotulo {
  margin: 0; color: var(--rv-ink-dim); font-size: 14px;
  letter-spacing: .02em;
}

/* Quem pediu menos movimento recebe o aviso sem o folhear. */
@media (prefers-reduced-motion: reduce) {
  .rv-folheando-folha { animation: none; opacity: .25; }
}

/* ---------- silenciar ---------- */

.rv .rv-som {
  display: inline-flex; align-items: center; gap: 8px;
}
.rv-som-icone { display: inline-flex; line-height: 0; }
/* Silenciado fica visivelmente diferente, e nao so com o icone trocado: quem
   olha de relance precisa ver o estado sem interpretar o desenho. */
.rv .rv-som-mudo { color: var(--rv-ink-faint); border-style: dashed; }

/* Dentro do livro o botao e so o icone: a barra ali ja tem dois botoes de
   texto, e um terceiro empurraria o "Virar a pagina" para fora no celular. */
.rv .rv-som-livro {
  flex: 0 0 auto; width: 44px; min-height: 44px;
  justify-content: center; padding: 0;
  background: transparent; border: 1px solid var(--rv-border);
  border-radius: 10px; color: var(--rv-ink-dim); cursor: pointer;
}
.rv .rv-som-livro:hover { border-color: #39404d; }