/* =====================================================================
   DICAS (/dicas/): a estante completa. Só o que é desta página; o resto
   (abertura, estante, lombadas, livro aberto, filtros, avião com a faixa,
   Instagram, próximo passo) vem de estilo.css. Tudo preso a .pagina-dicas
   (a classe do <body> desta página).
   ===================================================================== */

/* ── Abertura: a fada cuidando de uma estante que flutua no céu (como a casa da capa) ── */
.pagina-dicas .dicas-cena { position: relative; width: min(100%, 460px); height: 360px; margin-inline: auto; }
.pagina-dicas .dicas-cena__estante { position: absolute; left: 0; bottom: 64px; width: 67%; animation: flutua 7s ease-in-out infinite; filter: drop-shadow(0 22px 20px rgba(11, 74, 115, .16)); }
.pagina-dicas .dicas-cena__estante .prateleira__livros { gap: 5px; padding: 0 18px; }
.pagina-dicas .dicas-cena__estante .prateleira__tabua { height: 16px; }
.pagina-dicas .dicas-cena .lombada { flex: none; min-width: 0; padding: 0; cursor: default; pointer-events: none; }
/* o último livro, encostado (como numa estante de verdade) */
.pagina-dicas .dicas-cena .lombada:last-child { rotate: 8deg; transform-origin: bottom left; margin-left: 4px; }
.pagina-dicas .dicas-cena__sombra { left: 12%; bottom: 18px; width: 52%; }
.pagina-dicas .dicas-cena__fada { position: absolute; right: 0; top: 14px; width: 160px; height: auto; max-width: none; filter: drop-shadow(0 18px 18px rgba(11, 74, 115, .16)); }
.pagina-dicas .dicas-cena .cena__brilho--1 { left: 56%; top: 9%; }
.pagina-dicas .dicas-cena .cena__brilho--2 { left: 7%; top: 30%; }

/* ── A estante: espaço em cima do livro aberto para a fada pousar (ela vem voando da abertura) ── */
/* scroll-margin-top: quem chega em #livro ("Abrir a dica do mês") para com a fada pousada à vista, não atrás do topo */
.pagina-dicas .livro-aberto { margin-top: 46px; scroll-margin-top: 84px; }
.pagina-dicas .dicas__pouso { position: absolute; z-index: 4; right: 8%; top: -84px; width: 78px; height: auto; max-width: none; pointer-events: none; filter: drop-shadow(0 10px 12px rgba(11, 74, 115, .22)); animation: pousa-fada 3.6s ease-in-out infinite; }

/* ── As prateleiras por tipo ── */
.pagina-dicas .por-tipo__controles { display: grid; justify-items: center; gap: 4px; margin: -10px auto 56px; }
.pagina-dicas .por-tipo__controles .filtros { justify-content: center; margin: 0; }
.pagina-dicas .por-tipo__status { margin: 6px 0 0; font: 700 .95rem var(--texto); color: var(--suave); }
html:not(.js) .pagina-dicas .por-tipo__controles .filtros { display: none; }
.pagina-dicas .prateleiras-tipo { display: grid; gap: 96px; }
.pagina-dicas .prateleira-tipo { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start; }
.pagina-dicas .prateleira-tipo__cabeca { position: sticky; top: calc(var(--topo) + 28px); }
.pagina-dicas .prateleira-tipo__voo { margin: 0 0 14px -4px; }
.pagina-dicas .prateleira-tipo__voo .aviao img { width: 112px; }
.pagina-dicas .prateleira-tipo__voo .aviao__faixa { font-size: .88rem; }
.pagina-dicas .prateleira-tipo__cabeca h3 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.05rem); letter-spacing: -.015em; margin: 0 0 8px; }
.pagina-dicas .prateleira-tipo__cabeca > p { color: var(--suave); margin: 0 0 14px; }
.pagina-dicas .prateleira-tipo__conta { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 2px var(--linha); font: 800 .85rem var(--titulo); color: var(--azul-escuro); }
.pagina-dicas .prateleira-tipo__estante { margin-top: 26px; }
.pagina-dicas .prateleira-tipo__estante .prateleira__livros { justify-content: flex-start; gap: 5px; padding: 0 14px; }
.pagina-dicas .prateleira-tipo__estante .lombada { font-size: .68rem; }
.pagina-dicas .prateleira-tipo__estante .lombada span[lang] { margin-top: 6px; }
.pagina-dicas .prateleira-tipo__estante .prateleira__tabua { height: 14px; }
/* o livro que está no meio da tela fica levantado, com o pontinho laranja (o mesmo da lombada escolhida na estante) */
.pagina-dicas .prateleira-tipo__estante .lombada.ativa { transform: translateY(-12px); box-shadow: inset 4px 0 0 rgba(255, 255, 255, .16), inset -5px 0 0 rgba(0, 0, 0, .14), 0 12px 18px rgba(11, 74, 115, .25); }
.pagina-dicas .prateleira-tipo__estante .lombada.ativa::after { content: ''; position: absolute; left: 50%; bottom: -12px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--laranja); }
.pagina-dicas .prateleira-tipo__livros { display: grid; gap: 24px; }
.pagina-dicas .por-tipo__vazio { margin: 0; text-align: center; color: var(--suave); }
.pagina-dicas .por-tipo .insta { margin-top: 88px; }

/* Cada dica: um livrinho aberto (o mesmo papel e as mesmas letras do livro da estante), com a capa na cor
   da lombada dele. Responde ao mouse como os cartões; chegar pelo atalho da lombada acende a borda. */
.pagina-dicas .dica-livro { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); padding: 8px 8px 11px; border-radius: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 78%, white), var(--c) 60%); box-shadow: 0 24px 40px -20px rgba(11, 74, 115, .42); transition: transform .35s var(--mola), box-shadow .3s; }
/* Os livrinhos entram só aparecendo (sem subir): assim, quem chega pelo atalho da lombada para no lugar certo. */
.js .pagina-dicas .dica-livro.entra.visivel { animation-name: dica-aparece; }
@keyframes dica-aparece { from { opacity: 0; } }
.pagina-dicas .dica-livro:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); }
/* Chegou pelo atalho da lombada: a borda acende (junto com a entrada, se ele ainda não tinha aparecido) */
.pagina-dicas .dica-livro:target, .js .pagina-dicas .dica-livro.entra.visivel:target { animation: dica-aparece .6s var(--saida) backwards, dica-chegou 2s var(--saida); }
@keyframes dica-chegou { 0%, 35% { box-shadow: 0 0 0 5px var(--laranja), var(--sombra-alta); } }
.pagina-dicas .dica-livro .pagina { min-height: 0; padding: 26px 26px 24px; }
.pagina-dicas .dica-livro h4 { margin: 0 0 8px; font: 900 1.38rem/1.15 var(--titulo); letter-spacing: -.01em; color: var(--azul-escuro); }
.pagina-dicas .dica-livro .livro__texto { font-size: 1rem; line-height: 1.6; margin-bottom: 16px; }
.pagina-dicas .dica-livro .livro__como { font-size: 1.05rem; margin-bottom: 20px; }
.pagina-dicas .dica-livro .livro__abrir { min-height: 46px; padding: 0 20px; font-size: .96rem; }
.pagina-dicas .dica-livro .fita-mes { margin-bottom: 12px; }
/* A dica do mês ganha a fita laranja (a mesma do livro da estante) */
.pagina-dicas .dica-livro--destaque::before { content: ''; position: absolute; top: -6px; right: 30px; width: 16px; height: 58px; z-index: 3; background: var(--laranja); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }

/* ── Telas médias ── */
@media (max-width: 1080px) {
  .pagina-dicas .prateleira-tipo { grid-template-columns: 250px minmax(0, 1fr); gap: 40px; }
  .pagina-dicas .dica-livro .pagina { padding: 22px 20px 20px; }
}
@media (max-width: 960px) {
  /* (a abertura empilhada centraliza os filhos: sem isto, a cena, que não tem largura própria, some) */
  .pagina-dicas .abertura__arte { align-self: stretch; }
  .pagina-dicas .dicas-cena { width: min(100%, 380px); height: 250px; }
  .pagina-dicas .dicas-cena__estante { bottom: 40px; width: 68%; }
  .pagina-dicas .dicas-cena .lombada { width: calc(var(--w) * .8); height: calc(var(--h) * .8); }
  .pagina-dicas .dicas-cena__fada { width: 118px; }
  .pagina-dicas .dicas-cena__sombra { bottom: 8px; height: 20px; }
  .pagina-dicas .prateleiras-tipo { gap: 64px; }
  .pagina-dicas .prateleira-tipo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pagina-dicas .prateleira-tipo__cabeca { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end; }
  .pagina-dicas .prateleira-tipo__cabeca > * { grid-column: 1; }
  .pagina-dicas .prateleira-tipo__estante { grid-column: 2; grid-row: 1 / span 4; align-self: end; margin: 0; min-width: 220px; }
  .pagina-dicas .prateleira-tipo__conta { justify-self: start; }
}
/* ── Celular ── */
@media (max-width: 760px) {
  .pagina-dicas .dicas-cena { width: min(100%, 300px); height: 190px; }
  .pagina-dicas .dicas-cena__estante { left: 0; bottom: 30px; width: 70%; }
  .pagina-dicas .dicas-cena__estante .prateleira__livros { gap: 3px; padding: 0 12px; }
  .pagina-dicas .dicas-cena .lombada { width: calc(var(--w) * .62); height: calc(var(--h) * .62); }
  .pagina-dicas .dicas-cena .lombada:last-child { margin-left: 2px; }
  .pagina-dicas .dicas-cena__estante .prateleira__tabua { height: 11px; }
  .pagina-dicas .dicas-cena__fada { width: 90px; right: 2%; top: 18px; }
  .pagina-dicas .dicas-cena__sombra { height: 14px; bottom: 6px; }
  .pagina-dicas .dicas-cena .cena__brilho--1 { left: 58%; top: 6%; }

  .pagina-dicas .livro-aberto { margin-top: 30px; scroll-margin-top: 62px; }
  .pagina-dicas .dicas__pouso { right: 70px; top: -62px; width: 58px; }

  .pagina-dicas .por-tipo__controles { justify-items: stretch; margin: 0 0 36px; }
  .pagina-dicas .por-tipo__controles .filtros { justify-content: flex-start; margin: 0 -16px; }
  .pagina-dicas .por-tipo__status { text-align: center; }
  .pagina-dicas .prateleiras-tipo { gap: 52px; }
  .pagina-dicas .prateleira-tipo { gap: 18px; }
  .pagina-dicas .prateleira-tipo__cabeca { display: block; }
  .pagina-dicas .prateleira-tipo__voo { margin-bottom: 10px; }
  .pagina-dicas .prateleira-tipo__voo .aviao img { width: 92px; }
  .pagina-dicas .prateleira-tipo__voo .aviao__faixa { font-size: .8rem; padding: 7px 18px 7px 10px; }
  .pagina-dicas .prateleira-tipo__cabeca h3 { font-size: 1.55rem; }
  .pagina-dicas .prateleira-tipo__cabeca > p { font-size: .98rem; margin-bottom: 10px; }
  .pagina-dicas .prateleira-tipo__estante { margin-top: 18px; min-width: 0; }
  .pagina-dicas .prateleira-tipo__estante .prateleira__livros { justify-content: center; }
  .pagina-dicas .prateleira-tipo__estante .lombada { height: var(--h); font-size: .66rem; }
  .pagina-dicas .prateleira-tipo__livros { gap: 18px; }

  .pagina-dicas .dica-livro { grid-template-columns: minmax(0, 1fr); padding: 7px 7px 10px 12px; }
  .pagina-dicas .dica-livro .pagina { padding: 20px 18px; }
  .pagina-dicas .dica-livro .pagina--esq { border-radius: 8px 8px 2px 2px; background: var(--papel); box-shadow: none; padding-bottom: 14px; }
  .pagina-dicas .dica-livro .pagina--dir { border-radius: 2px 2px 8px 8px; background: linear-gradient(180deg, #efe8da 0, var(--papel) 16px); box-shadow: 0 4px 0 #e9e2d2; }
  .pagina-dicas .dica-livro h4 { font-size: 1.24rem; padding-right: 24px; }
  .pagina-dicas .dica-livro .livro__como { font-size: 1rem; }
  .pagina-dicas .dica-livro .livro__abrir { width: 100%; }
  .pagina-dicas .dica-livro--destaque::before { right: 22px; height: 48px; }
  .pagina-dicas .por-tipo .insta { margin-top: 56px; }
}