/*
 * Madapress — leitor da revista. Carregado depois do revista.css da edição (páginas A4, conceito "Morada").
 * Tokens: os mesmos do institucional/LP (ver .claude/ui-componentes.md).
 */

/*
 * Variáveis próprias (--mpl-*): o revista.css da edição define --tinta, --papel etc. para as páginas e não pode
 * ser alterado aqui. Fonte e cor da interface ficam só na barra e na dica; as páginas herdam o body do revista.css.
 */
:root {
  --mpl-tinta-profunda: #142030;
  --mpl-papel: #F7F3EC;
  --mpl-terracota: #C4573A;
  --mpl-terracota-claro: #E8B4A2;
  --mpl-barra: 56px;
}

html, body { height: 100%; }
html { background: var(--mpl-tinta-profunda); }
body.mpl {
  display: flex; flex-direction: column; height: 100dvh; overflow: hidden; margin: 0;
  background: radial-gradient(120% 90% at 50% 0%, #24384b 0%, var(--mpl-tinta-profunda) 70%);
  -webkit-tap-highlight-color: transparent;
}
.mpl-barra, .mpl-previa, .mpl-dica { color: var(--mpl-papel); font: 500 14px/1.2 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }

.mpl-visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Barra */
.mpl-barra {
  flex: none; height: var(--mpl-barra); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 0 16px; background: rgb(20 32 48 / .92); border-bottom: 1px solid rgb(255 255 255 / .08);
}
.mpl-barra__titulo { display: flex; align-items: baseline; gap: 10px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpl-barra__titulo strong { font: 400 1.35rem/1 "Fraunces", Georgia, serif; letter-spacing: -.01em; }
.mpl-barra__titulo span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.mpl-barra__nav { display: flex; align-items: center; gap: 6px; }
.mpl-barra__acoes { display: flex; justify-content: flex-end; gap: 6px; }

.mpl-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 10px;
  border: 1px solid rgb(255 255 255 / .16); border-radius: 999px; background: transparent; color: inherit;
  font: inherit; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, opacity .2s;
}
.mpl-botao:hover { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .3); }
.mpl-botao:focus-visible, .mpl-ir select:focus-visible { outline: 2px solid var(--mpl-terracota-claro); outline-offset: 2px; }
.mpl-botao[disabled] { opacity: .3; cursor: default; background: transparent; }
.mpl-botao svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mpl-botao--texto { padding: 0 14px; }

.mpl-ir select {
  height: 40px; max-width: 260px; padding: 0 30px 0 14px; border: 1px solid rgb(255 255 255 / .16); border-radius: 999px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23F7F3EC' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
  color: inherit; font: inherit; appearance: none; cursor: pointer;
}
.mpl-ir option { color: #1C2B3A; }

.mpl-previa { flex: none; margin: 0; padding: 6px 16px; background: var(--mpl-terracota); color: #fff; font-size: .8rem; text-align: center; }

/* Palco e livro */
.mpl-palco { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; padding: 20px 16px 28px; }
/* Duas páginas lado a lado cabem na altura útil: largura = altura × 2 × 210/297. */
.mpl-livro { width: min(100%, calc((100dvh - var(--mpl-barra) - 48px) * 1.4141)); }
@media (max-width: 700px) {
  /* Celular: uma página por vez (a biblioteca entra em modo retrato). */
  .mpl-palco { padding: 12px 10px 20px; }
  .mpl-livro { width: min(100%, calc((100dvh - var(--mpl-barra) - 32px) * .7071)); }
}

.mpl-folha { background: #F4EEE2; overflow: hidden; }

/*
 * Dupla no computador com cara de revista (responsável, 2026-10-21): sombra na lombada com curvatura delicada (escura
 * junto ao vinco, um leve brilho e depois some) e um indício de páginas empilhadas na borda externa. A biblioteca marca
 * o livro com --landscape/--portrait e cada folha com --left/--right. No celular (uma página), nada muda.
 */
.--landscape .mpl-folha::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 14%; z-index: 2; pointer-events: none;
}
.--landscape .mpl-folha.--left::after {
  right: 0;
  background: linear-gradient(to left, rgb(42 32 20 / .34) 0%, rgb(42 32 20 / .16) 9%, rgb(42 32 20 / .05) 26%, rgb(255 252 245 / .10) 42%, rgb(42 32 20 / .03) 62%, rgb(42 32 20 / 0) 100%);
}
.--landscape .mpl-folha.--right::after {
  left: 0;
  background: linear-gradient(to right, rgb(42 32 20 / .38) 0%, rgb(42 32 20 / .18) 9%, rgb(42 32 20 / .06) 26%, rgb(255 252 245 / .10) 42%, rgb(42 32 20 / .03) 62%, rgb(42 32 20 / 0) 100%);
}
/* Bordas externas: finas camadas de papel, mais escuras para fora (sugere mais páginas). */
.--landscape .mpl-folha.--left {
  box-shadow: -1px 0 0 #E4DBCB, -2px 0 0 #CDBFA8, -3px 1px 0 #E8E0D1, -4px 1px 0 #C9BBA3, -5px 2px 0 #E2D9C8, -6px 2px 4px rgb(0 0 0 / .35);
}
.--landscape .mpl-folha.--right {
  box-shadow: 1px 0 0 #E4DBCB, 2px 0 0 #CDBFA8, 3px 1px 0 #E8E0D1, 4px 1px 0 #C9BBA3, 5px 2px 0 #E2D9C8, 6px 2px 4px rgb(0 0 0 / .35);
}
.mpl-folha > .pagina {
  margin: 0 !important; transform-origin: 0 0; transform: scale(var(--mpl-escala, 1));
}
/* A biblioteca só repassa o clique quando o alvo é o próprio <a>: elementos dentro do link não recebem o clique. */
.mpl-folha a * { pointer-events: none; }
.mpl-folha a { cursor: pointer; }

/* Foto ampliada (<dialog>): por cima do leitor, fundo escuro, foto inteira (sem corte) e o título do imóvel. */
.mpl-folha img { cursor: zoom-in; }
.mpl-folha .capa img, .mpl-folha .contracapa img { cursor: auto; }
/* Aviso de ampliar na foto grande (medidas na escala da página A4: ~10–11px no celular). O toque atravessa até a foto. */
.mpl-ampliar {
  position: absolute; top: 14px; right: 14px; z-index: 3; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px;
  background: rgb(15 23 32 / .62); color: #fff; font: 500 19px/1 "Libre Franklin", "Inter", system-ui, sans-serif; letter-spacing: .02em;
  backdrop-filter: blur(2px);
}
.mpl-folha .selo ~ .mpl-ampliar { top: 72px; } /* abaixo do selo "Vendido"/"Alugado" */
.mpl-ampliar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mpl-zoom {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 60px 16px 16px; border: 0;
  background: transparent; color: var(--mpl-papel); cursor: zoom-out;
}
.mpl-zoom[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; animation: mpl-zoom .2s ease-out; }
.mpl-zoom::backdrop { background: rgb(10 16 24 / .97); }
/* Galeria: trilho com rolagem horizontal e encaixe (uma foto por vez); desliza no celular. */
.mpl-zoom__trilho {
  display: flex; width: 100%; flex: 1 1 auto; min-height: 0; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none;
}
.mpl-zoom__trilho::-webkit-scrollbar { display: none; }
.mpl-zoom__trilho figure {
  flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; margin: 0; overflow: visible;
  scroll-snap-align: center; scroll-snap-stop: always;
}
/* revista.css (carregado antes) põe width/height 100% em toda img: aqui a foto mantém a proporção. */
.mpl-zoom__trilho img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
  box-shadow: 0 12px 40px rgb(0 0 0 / .5);
}
.mpl-zoom__rodape { flex: none; margin: 0; max-width: 60ch; text-align: center; font: 400 1rem/1.4 "Fraunces", Georgia, serif; }
.mpl-zoom__legenda { opacity: .9; }
.mpl-zoom__contador { margin-left: 8px; font: 500 .8rem/1 "Inter", system-ui, sans-serif; letter-spacing: .08em; opacity: .65; white-space: nowrap; }
.mpl-zoom__fechar { position: absolute; top: 12px; right: 12px; background: rgb(20 32 48 / .7); }
.mpl-zoom__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: rgb(20 32 48 / .7); }
.mpl-zoom__nav[hidden] { display: none; }
.mpl-zoom__nav--anterior { left: 12px; }
.mpl-zoom__nav--proxima { right: 12px; }
@media (max-width: 700px) { .mpl-zoom__nav { display: none; } } /* no celular, desliza */
@keyframes mpl-zoom { from { opacity: 0; transform: scale(.97); } }

.mpl-dica {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); margin: 0;
  font-size: .78rem; letter-spacing: .04em; opacity: .65; transition: opacity .6s; pointer-events: none; white-space: nowrap;
}
.mpl-dica.is-oculta { opacity: 0; }

/* Estilos da StPageFlip 2.0.7 (src/Style/stPageFlip.css, MIT) */
.stf__parent { position: relative; display: block; box-sizing: border-box; transform: translateZ(0); touch-action: pan-y; }
.sft__wrapper { position: relative; width: 100%; box-sizing: border-box; }
.stf__parent canvas { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.stf__block { position: absolute; width: 100%; height: 100%; box-sizing: border-box; perspective: 2000px; }
.stf__item { display: none; position: absolute; transform-style: preserve-3d; }
.stf__outerShadow, .stf__innerShadow, .stf__hardShadow, .stf__hardInnerShadow { position: absolute; left: 0; top: 0; }

@media (max-width: 700px) {
  .mpl-barra { grid-template-columns: auto minmax(0, 1fr) auto; padding: 0 10px; gap: 8px; } /* minmax(0, 1fr): a navegação encolhe em vez de empurrar o título e o Compartilhar para fora */
  .mpl-barra__nav { justify-content: center; }
  .mpl-barra__titulo span, .mpl-barra__acoes .mpl-botao--texto span { display: none; }
  /* No celular, só o Compartilhar fica na barra. */
  .mpl-barra__acoes [data-mpl="pdf"], .mpl-barra__acoes [data-mpl="tela-cheia"], .mpl-barra__acoes [data-mpl="nova-aba"] { display: none; }
  .mpl-ir select { max-width: 130px; }
  .mpl-barra__titulo strong { font-size: 1.15rem; }
  .mpl-barra__nav { min-width: 0; }
  .mpl-ir { min-width: 0; }
  .mpl-ir select { width: 100%; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) { .mpl-botao, .mpl-dica { transition: none; } .mpl-zoom[open] { animation: none; } }

/* Telas estreitas e leitor embutido nas LPs (iframe de ~340px): botões e seletor mais compactos (2026-10-28: "Mad"/"Cap" cortados). */
@media (max-width: 420px) {
  .mpl-barra { padding: 0 8px; gap: 6px; }
  .mpl-barra__nav { gap: 4px; }
  .mpl-barra__nav .mpl-botao { min-width: 34px; height: 34px; padding: 0 6px; }
  .mpl-barra__acoes .mpl-botao { min-width: 36px; height: 36px; padding: 0 8px; }
  .mpl-ir select { height: 34px; padding: 0 24px 0 10px; font-size: 13px; background-position: right 6px center; }
}