/* Banca do Roquinha — página inicial com todos os sistemas.
   Cada sistema é uma capa de revista (tema em .capa--<id>); sistema novo sem tema usa a capa padrão. */

@font-face { font-family: 'Saira'; font-display: swap; font-weight: 100 900; font-stretch: 50% 125%;
  src: url('/fontes/saira-latin-standard-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-display: swap; font-weight: 400; src: url('/fontes/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-display: swap; font-weight: 600; src: url('/fontes/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-display: swap; font-weight: 600; src: url('/fontes/barlow-semi-condensed-latin-600-normal.woff2') format('woff2'); }
/* fontes das capas (SIL OFL, @fontsource) */
@font-face { font-family: 'Bodoni Moda'; font-display: swap; font-weight: 700; font-style: italic; src: url('/fontes/bodoni-moda-latin-700-italic.woff2') format('woff2'); }
@font-face { font-family: 'Zilla Slab'; font-display: swap; font-weight: 700; src: url('/fontes/zilla-slab-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Anton'; font-display: swap; font-weight: 400; src: url('/fontes/anton-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Unbounded'; font-display: swap; font-weight: 800; src: url('/fontes/unbounded-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Serif Display'; font-display: swap; font-weight: 400; src: url('/fontes/dm-serif-display-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Serif Display'; font-display: swap; font-weight: 400; font-style: italic; src: url('/fontes/dm-serif-display-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Shrikhand'; font-display: swap; font-weight: 400; src: url('/fontes/shrikhand-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Big Shoulders Stencil Display'; font-display: swap; font-weight: 800; src: url('/fontes/big-shoulders-stencil-display-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-display: swap; font-weight: 700; src: url('/fontes/caveat-latin-700-normal.woff2') format('woff2'); }

:root {
  --noite: #061525;
  --noite-2: #0b2340;
  --marinho: #002546;
  --amarelo: #fbba00;
  --papel: #fffaf0;
  --texto: #eef3f8;
  --texto-2: #b9c8d8;
  --linha: rgba(190, 214, 240, 0.16);
  --verde: #2fd27a;
  --vermelho: #ff5a52;
  --f-titulo: 'Saira', 'Arial Narrow', Arial, sans-serif;
  --f-texto: 'Barlow', 'Segoe UI', Arial, sans-serif;
  --f-rotulo: 'Barlow Semi Condensed', 'Barlow', Arial, sans-serif;
  --f-mao: 'Caveat', 'Segoe Print', cursive;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--texto); font-family: var(--f-texto); font-size: 16px;
  background:
    radial-gradient(700px 420px at 18% 4%, rgba(251, 186, 0, 0.11), transparent 70%),
    radial-gradient(1100px 600px at 80% -10%, rgba(30, 90, 150, 0.35), transparent 70%),
    var(--noite);
  overflow-x: hidden;
}
button { font: inherit; }

/* ---------- Topo (fora da banca) ---------- */
.topo {
  max-width: 1440px; margin: 0 auto; padding: 22px 32px 18px;
  display: flex; align-items: center; gap: 28px;
}
.logo { height: 34px; flex: none; }
.saudacao { flex: 1; min-width: 0; padding-left: 28px; border-left: 1px solid var(--linha); }
h1 { margin: 0; font: 700 30px/1.1 var(--f-titulo); letter-spacing: 0.01em; }
#data { margin: 3px 0 0; color: var(--texto-2); font-size: 15px; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.botao {
  font: 600 15px var(--f-rotulo); letter-spacing: 0.02em; color: var(--texto);
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(190, 214, 240, 0.3); border-radius: 999px;
  padding: 10px 18px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.botao:hover { border-color: var(--amarelo); color: var(--amarelo); }
.botao[aria-pressed="true"] { background: var(--amarelo); border-color: var(--amarelo); color: var(--marinho); }
.botao:disabled { opacity: 0.55; cursor: wait; }
.botao:focus-visible, .capa:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 6px; }

/* ---------- A banca ---------- */
.banca { max-width: 1440px; margin: 0 auto; padding: 0 32px 36px; }

/* letreiro com lâmpadas */
.letreiro {
  position: relative; text-align: center; padding: 12px 24px 14px; border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, #0f3a68, #082646);
  border: 3px solid #f2b300; border-bottom: 0;
  box-shadow: 0 -10px 60px rgba(251, 186, 0, 0.12);
}
.lampadas {
  display: block; height: 12px; margin: 0 6px;
  background: radial-gradient(circle at 50% 50%, #fff6cf 0 2.4px, #ffcf3d 3.4px, rgba(251, 186, 0, 0.25) 5px, transparent 6px) 0 0 / 26px 12px space no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 200, 40, 0.7));
}
.letreiro-nome {
  margin: 6px 0 0; font: 800 46px/1 var(--f-titulo); letter-spacing: 0.02em; color: var(--amarelo);
  text-shadow: 0 0 18px rgba(251, 186, 0, 0.45), 0 2px 0 #7a5600;
}
.letreiro-sub { margin: 6px 0 8px; font: 600 16px var(--f-rotulo); letter-spacing: 0.04em; color: #cfe0f2; }

/* toldo listrado com recorte em ondas */
.toldo {
  position: relative; z-index: 2; height: 34px; margin: 0 -14px;
  background: repeating-linear-gradient(90deg, var(--amarelo) 0 46px, #f4f0e6 46px 92px);
  -webkit-mask: radial-gradient(23px 13px at 23px 100%, transparent 98%, #000) 0 0 / 46px 100%;
  mask: radial-gradient(23px 13px at 23px 100%, transparent 98%, #000) 0 0 / 46px 100%;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5));
}

/* corpo: colunas laterais, parede do fundo e a base no chão */
.banca-corpo {
  position: relative; margin-top: -8px;
  display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 30px; align-items: start;
  padding: 40px 30px 0;
  background:
    radial-gradient(rgba(255, 255, 255, 0.05) 1.4px, transparent 1.8px) 0 0 / 22px 22px,
    radial-gradient(80% 60% at 40% 0%, rgba(255, 214, 120, 0.10), transparent 70%),
    linear-gradient(180deg, #0b2442, #071a31);
  border-inline: 18px solid #123b67;
  border-bottom: 16px solid #0a2440;
  border-radius: 0 0 6px 6px;
  box-shadow: inset 0 26px 34px -10px rgba(0, 0, 0, 0.6), inset 10px 0 0 rgba(255, 255, 255, 0.04), inset -10px 0 0 rgba(0, 0, 0, 0.18),
              0 40px 50px -20px rgba(0, 0, 0, 0.7);
}

.expositor { min-width: 0; padding-bottom: 34px; }
.grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 66px 30px; padding-top: 18px;
}
.vazio { margin: 30px 0; color: var(--texto-2); font-size: 17px; max-width: 46ch; }

/* ---------- O vendedor no balcão ---------- */
.vendedor { position: sticky; top: 14px; display: flex; flex-direction: column; align-items: center; padding-bottom: 0; }
.balao {
  position: relative; z-index: 3; margin: 0 0 14px; width: 100%; min-height: 108px;
  padding: 14px 18px 16px; border-radius: 18px; background: var(--papel); color: var(--marinho);
  font: 700 22px/1.12 var(--f-mao); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.balao::after {
  content: ''; position: absolute; left: 50%; bottom: -11px; width: 22px; height: 22px;
  background: var(--papel); transform: translateX(-50%) rotate(45deg); border-radius: 0 0 5px 0;
}
.balao.troca { animation: falar 0.28s ease-out; }
@keyframes falar { from { opacity: 0.25; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.vendedor-foto {
  display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; object-position: bottom;
  position: relative; z-index: 0; margin-bottom: -70px;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45));
  animation: chegar-vendedor 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes chegar-vendedor { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* balcão na frente do Roquinha, com o jornal do dia em cima */
.balcao {
  position: relative; z-index: 1; width: calc(100% + 30px); padding: 18px 16px 18px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #1a4a7d, #0d2f55 60%, #0a2645);
  border-top: 8px solid var(--amarelo); border-radius: 4px 4px 8px 8px;
  box-shadow: 0 -2px 0 #ffd75a inset, 0 22px 36px rgba(0, 0, 0, 0.5);
}
.jornal {
  padding: 10px 14px 12px; background: #f3eee1; color: #1a1a1a; transform: rotate(-1.6deg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); border-radius: 2px;
}
.jornal p { margin: 0; }
.jornal-nome { font: 400 19px/1 'DM Serif Display', Georgia, serif; padding-bottom: 6px; border-bottom: 3px double #1a1a1a; text-align: center; }
.jornal-manchete { margin-top: 8px !important; font: 400 23px/1.05 'Anton', Impact, sans-serif; text-transform: uppercase; letter-spacing: 0.01em; }
.jornal-rodape { margin-top: 6px !important; font: 600 13px/1.3 var(--f-rotulo); color: #555; }

/* ---------- Revista ---------- */
.capa {
  /* tema padrão (marinho e amarelo da RGR) */
  --c-fundo: radial-gradient(120% 70% at 50% 100%, #134476, #0a2746 70%);
  --c-tinta: #ffffff;
  --c-acento: var(--amarelo);
  --c-chamada: #ffffff;
  --c-faixa: rgba(0, 0, 0, 0.32);
  --c-veu: rgba(10, 39, 70, 0.75);
  --c-ficha: #0b2340;
  --c-verso: #0a2746;
  --f-capa: var(--f-titulo);
  --t-titulo: 24cqi;
  --t-peso: 800;
  --t-estilo: normal;
  --t-caixa: none;
  --t-espaco: -0.01em;
  --t-chamada: 7.2cqi;
  --foto-x: 64%;
  --giro: -0.7deg;

  position: relative; display: block; aspect-ratio: 3 / 4; container-type: inline-size;
  color: inherit; text-decoration: none; perspective: 1500px; cursor: pointer; z-index: 1;
  transform: rotate(var(--giro)); transform-origin: 50% -16px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.capa:nth-child(2n) { --giro: 0.6deg; }
.capa:nth-child(3n) { --giro: -0.2deg; }
div.capa { cursor: default; }
.capa:focus-visible, .capa.aberta { z-index: 5; transform: rotate(0deg); }
@media (hover: hover) { .capa:hover { z-index: 5; transform: rotate(0deg); } }

/* varal: o arame de cada revista encosta no da vizinha e vira um só */
.capa::before {
  content: ''; position: absolute; left: -16px; right: -16px; top: -15px; height: 3px; border-radius: 2px;
  background: linear-gradient(180deg, #c9d3de, #7f8c9b); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
  transform: rotate(calc(var(--giro) * -1));
}
.pregador {
  position: absolute; top: -26px; left: 50%; z-index: 9; width: 13px; height: 34px; transform: translateX(-50%);
  background: linear-gradient(90deg, #b98a50, #e4c08a 45%, #a8783f); border-radius: 3px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.45);
}
.pregador::after { content: ''; position: absolute; left: -2px; right: -2px; top: 12px; height: 4px; border-radius: 2px; background: #9aa6b2; }

/* página de dentro (os dados): fica embaixo da capa e aparece quando ela abre */
.ficha {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 3px;
  display: flex; flex-direction: column; gap: 3.4cqi; padding: 6cqi 6cqi 5cqi;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.10), transparent 7cqi), #fffaf0;
  color: #2c3846; border-top: 2cqi solid var(--c-acento);
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.5);
}
.ficha-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 3cqi; }
.ficha-nome {
  font-family: var(--f-capa); font-weight: var(--t-peso); font-style: var(--t-estilo);
  font-size: 7.6cqi; line-height: 1; color: var(--c-ficha);
}
.ficha-situacao {
  flex: none; display: inline-flex; align-items: center; gap: 1.4cqi; padding: 1.2cqi 2.6cqi; border-radius: 99px;
  font: 600 3.6cqi/1 var(--f-rotulo); background: #e8edf3; color: #3b4a5c;
}
.ficha-situacao .ponto { width: 2cqi; height: 2cqi; border-radius: 50%; background: #8a9bb0; }
.ficha-situacao.verde { background: #dcf6e7; color: #10643a; }
.ficha-situacao.verde .ponto { background: var(--verde); }
.ficha-situacao.vermelha { background: #ffe1df; color: #a01d17; }
.ficha-situacao.vermelha .ponto { background: var(--vermelho); }
.ficha-descricao { margin: 0; font: 400 4.3cqi/1.38 var(--f-texto); color: #3a4656; }
.ficha-numeros { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqi 3cqi; }
.ficha-numero { padding-top: 1.6cqi; border-top: 1px solid rgba(20, 40, 70, 0.14); }
.ficha-numero dt { font: 600 3.4cqi/1.15 var(--f-rotulo); color: #67768a; }
.ficha-numero dd { margin: 0.8cqi 0 0; font: 700 7.4cqi/1 var(--f-titulo); color: var(--c-ficha); font-variant-numeric: tabular-nums; }
.ficha-hora { display: flex; flex-direction: column; gap: 1cqi; }
.ficha-grafico { width: 100%; height: 10cqi; display: block; background: rgba(20, 40, 70, 0.05); border-radius: 1cqi; }
.ficha-grafico .ok { fill: var(--c-acento); }
.ficha-grafico .queda { fill: var(--vermelho); }
.ficha-legenda { font: 600 3.1cqi/1 var(--f-rotulo); color: #7a889a; }
.ficha-pe { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 2cqi; }
.ficha-inicio { font: 600 3.3cqi/1.2 var(--f-rotulo); color: #67768a; }
.ficha-entrar {
  flex: none; padding: 2cqi 3.6cqi; border-radius: 99px; background: var(--c-ficha); color: #fff;
  font: 600 3.9cqi/1 var(--f-rotulo);
}
div.capa .ficha-entrar { background: #c3ccd7; color: #3b4a5c; }

/* elementos da ficha entram em sequência quando a revista abre */
.ficha > * { opacity: 0; transform: translateX(4cqi); transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.capa:focus-visible .ficha > *, .capa.aberta .ficha > * { opacity: 1; transform: none; }
@media (hover: hover) { .capa:hover .ficha > * { opacity: 1; transform: none; } }
.ficha > :nth-child(1) { transition-delay: 0.18s; }
.ficha > :nth-child(2) { transition-delay: 0.24s; }
.ficha > :nth-child(3) { transition-delay: 0.30s; }
.ficha > :nth-child(4) { transition-delay: 0.36s; }
.ficha > :nth-child(5) { transition-delay: 0.42s; }

/* a capa: abre pela lombada da esquerda como uma revista de verdade */
.capa-folha {
  position: absolute; inset: 0; z-index: 2; transform-origin: 0 50%; transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.3, 0.7, 0.15, 1);
}
.capa:focus-visible .capa-folha, .capa.aberta .capa-folha { transform: rotateY(-118deg); transition-delay: 0.06s; }
@media (hover: hover) { .capa:hover .capa-folha { transform: rotateY(-118deg); transition-delay: 0.06s; } }

.capa-papel, .capa-verso { position: absolute; inset: 0; overflow: hidden; border-radius: 3px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.capa-papel { background: #000; box-shadow: 0 2px 0 rgba(255, 255, 255, 0.06) inset, 0 16px 26px rgba(0, 0, 0, 0.5); }
.capa-verso {
  transform: rotateY(180deg); display: grid; place-items: center;
  background: linear-gradient(90deg, transparent 80%, rgba(0, 0, 0, 0.25)), var(--c-verso);
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.45);
}
.capa-verso-titulo {
  font-family: var(--f-capa); font-weight: var(--t-peso); font-style: var(--t-estilo); text-transform: var(--t-caixa);
  font-size: 16cqi; color: rgba(255, 255, 255, 0.16); transform: rotate(-90deg); white-space: nowrap;
}

.capa-fundo { position: absolute; inset: 0; background: var(--c-fundo); }
.capa-sistema, .capa-edicao {
  position: absolute; top: 3.4cqi; z-index: 3; font: 600 3.9cqi/1 var(--f-rotulo); letter-spacing: 0.03em; color: var(--c-tinta);
}
.capa-sistema { left: 5cqi; }
.capa-edicao { right: 5cqi; opacity: 0.8; }
.capa-titulo {
  position: absolute; left: 4cqi; right: 4cqi; top: 7.5cqi; z-index: 1; text-align: center; white-space: nowrap;
  font-family: var(--f-capa); font-weight: var(--t-peso); font-style: var(--t-estilo); text-transform: var(--t-caixa);
  font-size: var(--t-titulo); line-height: 0.95; letter-spacing: var(--t-espaco); color: var(--c-tinta);
}
.capa-foto {
  position: absolute; bottom: 0; left: var(--foto-x); z-index: 2; height: 80%; width: auto; max-width: none;
  transform: translateX(-50%); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
}
.capa-texto {
  position: absolute; left: 5cqi; bottom: 25cqi; z-index: 3; width: 44cqi;
  display: flex; flex-direction: column; gap: 2.4cqi;
}
.capa-texto::before {
  content: ''; position: absolute; inset: -16cqi -14cqi -10cqi -12cqi; z-index: -1;
  background: radial-gradient(closest-side, var(--c-veu), transparent);
}
.capa-chamada {
  font-family: var(--f-capa); font-weight: var(--t-peso); font-style: var(--t-estilo);
  font-size: var(--t-chamada); line-height: 1.02; color: var(--c-chamada);
  text-shadow: 0 0 3px var(--c-faixa), 0 0 14px var(--c-faixa);
}
.capa-linha {
  font: 600 4.4cqi/1.2 var(--f-rotulo); color: var(--c-tinta);
  padding-left: 2.4cqi; border-left: 0.9cqi solid var(--c-acento);
  text-shadow: 0 0 2px var(--c-faixa), 0 0 6px var(--c-faixa), 0 0 12px var(--c-faixa);
}
.capa-selo {
  position: absolute; left: 5cqi; top: 37cqi; z-index: 4; width: 21cqi; height: 21cqi; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6cqi;
  background: var(--papel); color: var(--marinho); transform: rotate(-9deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  font: 600 4.4cqi/1 var(--f-rotulo); text-align: center;
}
.capa-selo small { font: 600 3.2cqi/1 var(--f-rotulo); opacity: 0.7; }
.capa-selo-ponto { width: 2.6cqi; height: 2.6cqi; border-radius: 50%; background: #8a9bb0; }
.verde .capa-selo-ponto { background: var(--verde); box-shadow: 0 0 0 1cqi rgba(47, 210, 122, 0.25); animation: pulso 2.4s ease-in-out infinite; }
@keyframes pulso { 50% { box-shadow: 0 0 0 1.8cqi rgba(47, 210, 122, 0); } }
.capa-pe {
  position: absolute; left: 4cqi; bottom: 4cqi; z-index: 4; display: flex; flex-direction: column; gap: 0.8cqi;
  padding: 1.8cqi 2.4cqi 1.4cqi; background: #fff; color: #111; border-radius: 1cqi;
}
.capa-pe svg { width: 26cqi; height: 7cqi; fill: #111; display: block; }
.capa-endereco { font: 600 2.7cqi/1 var(--f-rotulo); letter-spacing: 0.02em; }
.capa-brilho {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.10) 46%, transparent 54%);
  mix-blend-mode: soft-light;
}

/* fora do ar / desligado / em construção */
.vermelha .capa-fundo, .vermelha .capa-foto, .neutra:not(a) .capa-fundo, .neutra:not(a) .capa-foto { filter: grayscale(0.9) brightness(0.75); }
.capa-carimbo {
  position: absolute; left: 50%; top: 52%; z-index: 5; padding: 2cqi 4cqi; white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-14deg);
  font: 800 8cqi/1 var(--f-titulo); color: #ffe9e6; background: rgba(170, 25, 20, 0.82);
  border: 0.9cqi double #ffe9e6; border-radius: 1.5cqi; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.neutra .capa-carimbo { background: rgba(10, 30, 55, 0.86); color: var(--amarelo); border-color: var(--amarelo); }

/* chegada: as revistas são penduradas no varal (o único movimento automático da página) */
.grade.chegando .capa { animation: pendurar 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--ordem) * 110ms + 250ms); }
@keyframes pendurar {
  0% { opacity: 0; transform: translateY(-40px) rotate(-7deg); }
  55% { opacity: 1; transform: translateY(0) rotate(2.5deg); }
  80% { transform: rotate(-1deg); }
  100% { transform: rotate(var(--giro)); }
}

/* ---------- Temas das capas ---------- */
/* Artem Vila: revista de viagem, mar e areia */
.capa--gestao {
  --c-fundo: radial-gradient(90% 55% at 70% 18%, #fff7e0 0%, transparent 60%), linear-gradient(180deg, #8fd0cf 0%, #cfe7dc 46%, #ecdcbc 100%);
  --c-ficha: #0b4750; --c-verso: #0b4750;
  --c-tinta: #0b4750; --c-chamada: #0b4750; --c-acento: #ef6a3a; --c-veu: rgba(232, 226, 204, 0.85); --c-faixa: rgba(255, 250, 235, 0.7);
  --f-capa: 'Bodoni Moda', Didot, serif; --t-peso: 700; --t-estilo: italic; --t-titulo: 17.5cqi; --t-chamada: 7cqi; --t-espaco: -0.02em;
}
/* Fiscal: papel de livro-razão com pauta verde */
.capa--notas {
  --c-fundo:
    linear-gradient(90deg, transparent 9cqi, rgba(200, 60, 60, 0.45) 9cqi 9.5cqi, transparent 9.5cqi),
    repeating-linear-gradient(180deg, transparent 0 5.6cqi, rgba(30, 110, 80, 0.2) 5.6cqi 5.9cqi),
    #f1ead2;
  --c-ficha: #1b4a37; --c-verso: #1b4a37;
  --c-tinta: #1b4a37; --c-chamada: #1b4a37; --c-acento: #c99417; --c-veu: rgba(241, 234, 210, 0.9); --c-faixa: rgba(241, 234, 210, 0.85);
  --f-capa: 'Zilla Slab', Rockwell, serif; --t-peso: 700; --t-titulo: 27cqi; --t-chamada: 7.6cqi;
}
/* Caixa: revista de negócios, vinho e ouro */
.capa--caixa {
  --c-fundo: radial-gradient(80% 60% at 60% 62%, #7a1d30 0%, #4a0e1b 62%, #2e0711 100%);
  --c-ficha: #4a0e1b; --c-verso: #3a0915;
  --c-tinta: #f2d48a; --c-chamada: #fff4d6; --c-acento: #e0a93e; --c-veu: rgba(46, 7, 17, 0.75); --c-faixa: rgba(30, 4, 10, 0.6);
  --f-capa: 'Anton', Impact, sans-serif; --t-peso: 400; --t-caixa: uppercase; --t-titulo: 33cqi; --t-chamada: 8.4cqi; --t-espaco: 0.02em;
}
/* Posts: revista de criador, magenta e laranja */
.capa--posts {
  --c-fundo: radial-gradient(70% 50% at 80% 10%, rgba(255, 220, 90, 0.55), transparent 70%), linear-gradient(155deg, #ff2b8c 0%, #ff5a4e 55%, #ff9a1f 100%);
  --c-ficha: #b0125f; --c-verso: #c71a6d;
  --c-tinta: #ffffff; --c-chamada: #ffffff; --c-acento: #2a0d3a; --c-veu: rgba(190, 20, 90, 0.5); --c-faixa: rgba(90, 0, 50, 0.45);
  --f-capa: 'Unbounded', 'Arial Black', sans-serif; --t-peso: 800; --t-titulo: 20cqi; --t-chamada: 6.2cqi; --t-espaco: -0.03em;
}
/* Gente (RH): revista de pessoas, pêssego e ameixa */
.capa--rh {
  --c-fundo: radial-gradient(55% 40% at 62% 56%, #ffd2b8 0%, transparent 70%), linear-gradient(180deg, #f8e7d6, #f2d3c0);
  --c-ficha: #2b1b48; --c-verso: #2b1b48;
  --c-tinta: #2b1b48; --c-chamada: #2b1b48; --c-acento: #e04a68; --c-veu: rgba(248, 231, 214, 0.9); --c-faixa: rgba(248, 231, 214, 0.85);
  --f-capa: 'DM Serif Display', Georgia, serif; --t-peso: 400; --t-titulo: 30cqi; --t-chamada: 7.6cqi; --t-espaco: -0.02em;
}
.capa--rh .capa-chamada { font-style: italic; }
/* Perk: ateliê, lilás */
.capa--perk {
  --c-fundo: radial-gradient(60% 45% at 30% 30%, #efe6ff, transparent 70%), #c6b2ff;
  --c-ficha: #2a125c; --c-verso: #5b3fb0;
  --c-tinta: #2a125c; --c-chamada: #2a125c; --c-acento: #ff6aa2; --c-veu: rgba(210, 192, 255, 0.85); --c-faixa: rgba(239, 230, 255, 0.8);
  --f-capa: 'Shrikhand', 'Cooper Black', serif; --t-peso: 400; --t-titulo: 27cqi; --t-chamada: 7cqi;
}
/* Navio: carta náutica, marinho e laranja de sinalização */
.capa--navio {
  --c-fundo:
    repeating-radial-gradient(circle at 75% 70%, transparent 0 7cqi, rgba(120, 180, 230, 0.13) 7cqi 7.3cqi),
    linear-gradient(180deg, #0f3157, #071a31);
  --c-ficha: #0f3157; --c-verso: #0a2240;
  --c-tinta: #ff7a24; --c-chamada: #ffffff; --c-acento: #ff7a24; --c-veu: rgba(7, 26, 49, 0.8); --c-faixa: rgba(0, 10, 25, 0.6);
  --f-capa: 'Big Shoulders Stencil Display', Impact, sans-serif; --t-peso: 800; --t-caixa: uppercase; --t-titulo: 30cqi; --t-chamada: 7.6cqi;
}

/* ---------- Rodapé ---------- */
.rodape { max-width: 1440px; margin: 0 auto; padding: 0 32px 36px; color: var(--texto-2); font-size: 14px; }
.rodape p { margin: 0; }

/* ---------- Telas menores ---------- */
@media (max-width: 1180px) {
  .banca-corpo { grid-template-columns: minmax(0, 1fr) 230px; gap: 22px; padding-inline: 20px; }
  .balao { font-size: 20px; }
  .letreiro-nome { font-size: 38px; }
  .jornal-manchete { font-size: 20px; }
}

@media (max-width: 760px) {
  .topo { flex-wrap: wrap; padding: 16px 16px 14px; gap: 12px; }
  .logo { height: 28px; }
  .saudacao { flex-basis: 100%; order: 2; border-left: 0; padding-left: 0; }
  h1 { font-size: 26px; }
  .acoes { order: 3; justify-content: flex-start; }
  .banca { padding: 0 8px 24px; }
  .letreiro { padding: 8px 10px 10px; }
  .letreiro-nome { font-size: 28px; }
  .letreiro-sub { font-size: 14px; margin-bottom: 4px; }
  .toldo { height: 24px; margin: 0 -6px; }
  .banca-corpo { display: flex; flex-direction: column; gap: 0; padding: 20px 0 0; border-inline-width: 8px; }

  .vendedor { position: static; order: -1; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 0 12px; }
  .vendedor-foto { width: 96px; max-height: 128px; margin: 0; order: 1; flex: none; }
  .balao { order: 2; flex: 1; margin: 0 0 16px; min-height: 0; font-size: 19px; }
  .balao::after { left: -8px; bottom: 22px; transform: rotate(135deg); }
  .balcao { order: 3; width: auto; flex-basis: 100%; margin: 0 -12px; padding: 12px 14px; border-radius: 0; }
  .jornal-manchete { font-size: 18px; margin-top: 4px !important; }
  .jornal { padding: 6px 12px 8px; }
  .jornal-nome { font-size: 15px; padding-bottom: 4px; }
  .jornal-rodape { font-size: 12px; }
  .balcao { padding: 10px 12px; border-top-width: 6px; }
  .grade { padding-top: 34px; }

  /* no celular as revistas viram uma fileira para deslizar; abrir = virar a revista inteira */
  .expositor { width: 100%; }
  .grade {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78vw, 320px);
    gap: 22px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    padding: 40px 18px 30px; scroll-padding: 0 18px; scrollbar-width: none;
  }
  .grade::-webkit-scrollbar { display: none; }
  .capa { scroll-snap-align: center; }
  .capa::before { left: -12px; right: -12px; }
  .capa-folha { transform-origin: 50% 50%; }
  .capa.aberta .capa-folha, .capa:focus-visible .capa-folha { transform: rotateY(-180deg); }
  .capa-verso { display: none; }
  .vazio { padding: 0 16px; }
  .rodape { display: none; }
}

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