/* Cordel D' Prata · v2 — página de livro */

  /* ═══════════════ FICHA DO LIVRO ═══════════════ */
  .ficha-livro{
    position:relative;overflow:hidden;
    background:
      radial-gradient(110% 80% at 18% 0%, rgba(176,25,31,.07), transparent 62%),
      linear-gradient(180deg,var(--paper) 0%,var(--paper) 60%,var(--paper-2) 100%);
    padding-block:calc(var(--header-h,130px) + clamp(18px,2.4vw,34px)) clamp(44px,5vw,80px);
  }

  .livro-grid{
    display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:clamp(30px,5vw,84px);align-items:center;
    margin-top:clamp(20px,2.6vw,32px);
  }

  /* ── capa: livro fotografado, não desenhado ── */
  .livro3d{
    --larg:clamp(190px,20vw,290px);
    /* largura a dividir pela altura do livro verdadeiro. O 0.636 é o formato
       corrente (14 × 22 cm); os álbuns infantis são quase quadrados e o JS
       troca este número pelo que vem do backoffice ou pela própria capa. */
    --racio:0.636;
    --alt:calc(var(--larg) / var(--racio));
    /* espessura real: vem da lombada no backoffice (mm), sobre uma largura de 15 cm */
    --lombada:18;
    --esp:calc(var(--larg) * var(--lombada) / 150);
    position:relative;margin:0;
    width:var(--larg);height:var(--alt);
    perspective:2600px;
  }
  .livro3d-corpo{
    position:relative;width:100%;height:100%;
    transform-style:preserve-3d;
    /* --gy: pose base · --ry/--rx: o que o rato acrescenta */
    transform:rotateY(calc(var(--gy,-15deg) + var(--ry,0deg))) rotateX(var(--rx,0deg));
    transition:transform .8s var(--ease);
  }
  .livro3d.segue-rato .livro3d-corpo{transition:transform .18s linear}
  .livro3d:hover{--gy:-13deg}

  .face{position:absolute;top:0;left:0;width:100%;height:100%}
  .f-frente{
    transform:translateZ(calc(var(--esp) / 2));
    transform-origin:left center;
    transition:transform .75s var(--ease),box-shadow .75s var(--ease);
    overflow:hidden;border-radius:2px 4px 4px 2px;
    background:var(--paper-3);
    box-shadow:
      0 30px 50px -26px rgba(22,18,15,.55),
      0 2px 6px rgba(22,18,15,.14);
  }
  .f-frente img{width:100%;height:100%;object-fit:cover;display:block}
  /* luz: sombra do vinco à esquerda, brilho no corte à direita */
  .vinco{
    position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,
      rgba(0,0,0,.3) 0,rgba(0,0,0,.12) 7px,rgba(0,0,0,.03) 20px,rgba(0,0,0,0) 34px,
      rgba(255,255,255,.05) 84%,rgba(255,255,255,.14) 100%);
  }
  .f-tras{
    transform:rotateY(180deg) translateZ(calc(var(--esp) / 2));
    background:#7C0F14;border-radius:4px 2px 2px 4px;
  }
  .f-lombada{
    width:var(--esp);left:0;
    transform-origin:left center;
    transform:rotateY(-90deg) translateX(calc(var(--esp) / -2));
    background:linear-gradient(90deg,#6F0D12,#9A161C 55%,#7C0F14);
  }
  /* corte das folhas: um risco creme, macio, sem riscas de caderno */
  .f-folhas{
    width:var(--esp);left:auto;right:0;
    transform-origin:right center;
    transform:rotateY(90deg) translateX(calc(var(--esp) / 2));
    background:linear-gradient(90deg,#D8CBB6 0,#F7F1E6 26%,#FFFDF9 52%,#EFE7D8 82%,#CFC0A8 100%);
    box-shadow:inset 0 0 8px rgba(22,18,15,.2);
  }

  /* primeira página, por baixo da capa — aparece quando o livro abre */
  .f-pagina{
    transform:translateZ(calc(var(--esp) / 2 - 2px));
    overflow:hidden;border-radius:2px 4px 4px 2px;
    padding:12% 11% 0;
    background:linear-gradient(180deg,#FDFBF7,#F3EDE3);
    box-shadow:inset 14px 0 22px -18px rgba(22,18,15,.9);
  }
  .f-pagina span{
    display:block;
    font-family:var(--font-display);font-size:clamp(.42rem,.72vw,.6rem);line-height:1.75;
    color:rgba(42,35,29,.62);text-align:justify;hyphens:auto;
  }
  /* abrir: a capa roda sobre a lombada e deixa ver a primeira página */
  .livro3d--espreitavel:hover .f-frente,
  .livro3d--espreitavel:focus-visible .f-frente{
    transform:translateZ(calc(var(--esp) / 2)) rotateY(-34deg);
    box-shadow:0 40px 60px -30px rgba(22,18,15,.6),10px 0 26px -14px rgba(22,18,15,.45);
  }
  .livro3d--espreitavel:hover,
  .livro3d--espreitavel:focus-visible{--gy:-15deg}

  .livro3d--espreitavel{cursor:pointer}
  .livro3d--espreitavel:focus-visible{outline:2px solid var(--red);outline-offset:14px;border-radius:6px}

  /* sombra de contacto no papel */
  .livro3d::after{
    content:"";position:absolute;left:4%;right:-4%;bottom:-18px;height:20px;
    background:radial-gradient(56% 100% at 48% 0%, rgba(22,18,15,.3), transparent 74%);
    filter:blur(6px);pointer-events:none;
  }

  /* recado à mão, com a seta a apontar para o livro */
  .capa-nota{
    display:inline-flex;align-items:flex-end;gap:.35em;
    margin-top:26px;padding:0;
    font-family:var(--font-hand);font-size:1.3rem;line-height:1.15;color:var(--red);
    transform:rotate(-2deg);transform-origin:center;
    transition:transform .4s var(--ease);
  }
  .capa-nota[hidden]{display:none}
  .capa-nota svg{width:26px;height:30px;flex:0 0 auto;margin-bottom:-2px}
  .capa-nota:hover{transform:rotate(-2deg) translateY(-2px)}

  .livro-etiqueta{
    position:absolute;z-index:3;top:-14px;left:-14px;
    padding:6px 14px;border-radius:999px;
    background:var(--red);color:#fff;
    font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    box-shadow:0 10px 22px -12px rgba(176,25,31,.9);
    transform:rotate(-4deg);
  }
  .livro-etiqueta[hidden]{display:none}

  /* copy */
  .livro-copy h1{
    margin:12px 0 0;
    font-family:var(--font-display);font-weight:600;letter-spacing:-.028em;
    font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.03;text-wrap:balance;
  }
  .livro-de{
    margin:14px 0 0;font-size:1.02rem;color:var(--ink-soft);
  }
  .livro-de a{color:var(--red);font-weight:600}
  .livro-de a:hover{text-decoration:underline;text-underline-offset:3px}

  .gen-pills{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
  .gen-pills:empty{display:none}
  .gen-pills li{
    padding:6px 14px;border-radius:999px;
    border:1px solid rgba(176,25,31,.28);background:rgba(176,25,31,.05);
    font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red);
  }

  /* compra */
  .compra{
    margin-top:clamp(26px,3vw,36px);padding-top:clamp(24px,2.8vw,32px);
    border-top:1px solid var(--line);
  }
  .compra-topo{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  .preco{
    margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
    font-size:clamp(1.9rem,3vw,2.5rem);line-height:1;color:var(--red);
  }
  .preco-nota{margin:0;font-size:.82rem;color:var(--muted)}
  /* com campanha: o preço antigo riscado, mais pequeno, antes do novo */
  .preco s{font-size:.55em;font-weight:500;color:var(--muted);letter-spacing:0;margin-right:.3em;vertical-align:.25em}
  .preco em{font-style:normal}
  .livro-etiqueta.etiqueta--promo,.livro-mini .etiqueta.etiqueta--promo{background:var(--ouro,#B8860B);color:#1a1207}

  .compra-linha{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
  .qtd{
    display:inline-flex;align-items:center;gap:2px;height:52px;padding:0 6px;
    border:1px solid var(--line-strong);border-radius:999px;background:rgba(255,255,255,.7);
  }
  .qtd button{
    width:40px;height:40px;border-radius:50%;font-size:1.2rem;line-height:1;color:var(--ink);
    display:grid;place-items:center;transition:background .3s,color .3s;
  }
  .qtd button:hover{background:var(--red-soft);color:var(--red)}
  .qtd span{min-width:28px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
  .compra-linha .btn{height:52px;padding-inline:32px}
  /* um livro que ainda não está à venda: em vez do botão, a verdade */
  /* também em e-book: as lojas onde ele está mesmo */
  .livro-ebook{
    margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);
  }
  .livro-ebook-titulo{
    display:block;margin-bottom:8px;
    font-family:var(--font-nav);font-size:.74rem;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  }
  .livro-ebook-lojas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
  .livro-ebook-lojas a{
    display:inline-flex;align-items:center;gap:6px;
    padding:8px 14px;border-radius:999px;
    background:var(--paper-2);border:1px solid var(--line);
    font-size:.9rem;color:var(--ink);text-decoration:none;
    transition:background .16s ease,border-color .16s ease;
  }
  .livro-ebook-lojas a:hover{background:#fff;border-color:var(--red)}
  .livro-ebook-lojas span{color:var(--red)}

  .livro-sem-venda{
    margin:0;padding:14px 16px;border-radius:12px;
    background:var(--paper-2);border:1px solid var(--line);
    font-size:.95rem;color:var(--ink-soft);
  }
  .livro-sem-venda .link-arrow{margin-left:6px}

  .compra-subtotal{margin:12px 0 0;font-size:.9rem;color:var(--ink-soft)}

  /* ── e-book ── */
  .ebook{
    margin-top:22px;padding:18px 20px;
    border:1px solid rgba(176,25,31,.2);border-radius:var(--radius-sm);
    background:rgba(176,25,31,.04);
  }
  .ebook[hidden]{display:none}
  .ebook-titulo{
    margin:0;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red);
  }
  .ebook-nota{margin:8px 0 0;font-size:.9rem;color:var(--ink-soft)}
  .ebook-lojas{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
  .ebook-loja{
    display:inline-flex;align-items:center;gap:.45em;
    height:38px;padding:0 15px;border-radius:999px;
    border:1px solid var(--line-strong);background:#fff;
    font-size:.86rem;font-weight:600;color:var(--ink);
    transition:transform .3s var(--ease),border-color .3s,color .3s;
  }
  .ebook-loja svg{width:13px;height:13px;opacity:.55}
  .ebook-loja:hover{transform:translateY(-2px);border-color:rgba(176,25,31,.45);color:var(--red)}
  .ebook-loja:hover svg{opacity:1}

  .compra-garantias{
    display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;padding:0;list-style:none;
    font-size:.86rem;color:var(--muted);
  }
  .compra-garantias li{display:flex;align-items:center;gap:.5em}
  /* são vantagens: um visto verde lê-se como "incluído", o ponto vermelho lia-se como aviso */
  .compra-garantias li::before{
    content:"";flex:0 0 auto;width:13px;height:13px;
    background:#3F7D53;
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5.5 5.5L20 6.5'/></svg>") center/contain no-repeat;
    mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5.5 5.5L20 6.5'/></svg>") center/contain no-repeat;
  }

  @media (max-width:880px){
    .livro-grid{grid-template-columns:1fr;gap:34px;justify-items:start}
    /* a capa ao centro do ecrã; o texto continua encostado à esquerda */
    .livro-capa-zona{align-items:center;justify-self:center}
    /* «Continue a ler» desliza na horizontal, como as prateleiras */
    .relacionados .livros-fila{   /* a regra base vem mais abaixo na folha: precisa de mais peso */
      display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;
      margin-inline:calc(-1 * var(--gutter));padding:6px var(--gutter) 14px;-webkit-overflow-scrolling:touch;gap:14px;
    }
    .relacionados .livros-fila::-webkit-scrollbar{display:none}
    .relacionados .livros-fila .livro-mini{flex:0 0 min(44%,170px);scroll-snap-align:start}
    .livro3d{--larg:min(56vw,200px);--esp:20px}
    .livro3d-corpo{transform:rotateY(-18deg) rotateX(2deg)}
    .livro-etiqueta{left:-10px;top:-12px}
  }

  /* ═══════════════ SINOPSE ═══════════════ */
  .sinopse-inner{max-width:64ch}
  .sinopse-inner p{
    margin:18px 0 0;
    font-size:clamp(1.06rem,1.35vw,1.22rem);line-height:1.66;color:var(--ink-soft);
  }
  .sinopse-texto strong,.sinopse-texto b{font-weight:600;color:var(--ink)}
  .sinopse-texto ul,.sinopse-texto ol{margin:14px 0 0;padding-left:1.3em;color:var(--ink-soft)}
  .sinopse-texto li{margin-top:6px}
  /* capitular, como num livro — só no primeiro parágrafo */
  .sinopse-inner > p:first-of-type::first-letter,
  .sinopse-texto > p:first-child::first-letter{
    float:left;margin:8px 12px 0 0;
    font-family:var(--font-display);font-weight:600;color:var(--red);
    font-size:3.6em;line-height:.78;
  }

  /* ═══════════════ EXCERTO ═══════════════ */
  .excerto{
    background:var(--red);color:#fff;text-align:center;
    padding-block:clamp(48px,6vw,88px);
  }
  .excerto blockquote{
    margin:0 auto;max-width:30ch;
    font-family:var(--font-display);font-style:italic;font-weight:400;
    font-size:clamp(1.4rem,3vw,2.3rem);line-height:1.24;letter-spacing:-.018em;text-wrap:balance;
  }
  .excerto cite{
    display:block;margin-top:20px;font-style:normal;
    font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(255,255,255,.72);
  }

  /* ═══════════════ FICHA TÉCNICA ═══════════════ */
  .tecnica-inner{max-width:860px}
  .tecnica .head h2{font-size:clamp(1.4rem,2.2vw,1.9rem)}
  .tecnica dl{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:0 clamp(28px,4vw,64px);
    margin:clamp(22px,2.6vw,32px) 0 0;
  }
  .tecnica dl > div{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:13px 0;border-bottom:1px solid var(--line);
  }
  .tecnica dt{font-size:.88rem;color:var(--muted)}
  .tecnica dd{margin:0;font-weight:600;text-align:right}

  /* ═══════════════ AUTOR ═══════════════ */
  .autor-grid{
    display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);
    gap:clamp(28px,4.4vw,68px);align-items:center;
  }
  .autor-retrato{
    margin:0;max-width:280px;width:100%;
    background:#fff;padding:12px 12px 18px;border-radius:3px;
    box-shadow:0 34px 60px -38px rgba(22,18,15,.55),0 2px 8px rgba(22,18,15,.09);
    transform:rotate(-2.4deg);transform-style:preserve-3d;will-change:transform;
  }
  .autor-retrato img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center;background:var(--paper-2)}
  .autor-retrato .sem-foto{
    display:grid;place-items:center;aspect-ratio:4/5;background:var(--paper-2);
    font-family:var(--font-display);font-size:4rem;color:rgba(176,25,31,.22);
  }
  .autor-retrato figcaption{
    margin-top:10px;text-align:center;
    font-family:var(--font-hand);font-size:1.2rem;color:var(--ink);
  }
  .autor-copy h2{margin:12px 0 0;font-size:clamp(1.6rem,2.6vw,2.2rem)}
  .autor-tagline{
    margin:10px 0 0;font-family:var(--font-display);font-style:italic;
    font-size:1.1rem;color:var(--ink-soft);
  }
  .autor-tagline:empty{display:none}
  .autor-bio{margin:16px 0 0;max-width:58ch;color:var(--ink-soft)}
  .autor-copy .link-arrow{margin-top:20px}
  @media (max-width:760px){
    .autor-grid{grid-template-columns:1fr}
    .autor-retrato{max-width:200px}
  }

  /* ═══════════════ RELACIONADOS ═══════════════ */
  .relacionados .head-row,.imprensa .head-row{margin-bottom:clamp(20px,2.4vw,30px)}
  .livros-fila{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
    gap:clamp(20px,2.6vw,36px);
  }
  .livro-mini{display:block}
  /* altura fixa, largura à medida da capa: o catálogo tem livros ao alto,
     ao baixo e quadrados, e nenhum pode aparecer cortado */
  .livro-mini figure{
    position:relative;margin:0;
    height:clamp(178px,15vw,232px);
    display:flex;align-items:flex-end;justify-content:center;
    transition:transform .5s var(--ease);
  }
  .livro-mini:hover figure{transform:translateY(-6px)}
  .livro-mini img{
    width:auto;height:100%;max-width:100%;object-fit:contain;
    border-radius:2px 5px 5px 2px;box-shadow:var(--shadow-book);
  }
  .livro-mini h3{
    margin:13px 0 0;font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
    font-size:1rem;line-height:1.2;
  }
  .livro-mini p{margin:5px 0 0;font-size:.84rem;color:var(--muted)}
  .livro-mini b{display:block;margin-top:7px;font-size:.92rem;font-weight:600;color:var(--red)}
  .livro-mini .etiqueta{
    position:absolute;top:8px;left:14px;
    padding:4px 9px;border-radius:999px;background:var(--red);color:#fff;
    font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  }

  /* ═══════════════ ESPREITAR O LIVRO ═══════════════ */
  .espreitar-btn{margin-top:16px;gap:.6em}
  .espreitar-btn svg{width:19px;height:19px}
  .espreitar-btn[hidden]{display:none}

  .espreitar{
    position:fixed;inset:0;z-index:220;
    display:grid;place-items:center;padding:clamp(12px,3vw,32px);
    background:rgba(12,9,7,.78);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    animation:espreitarEntra .3s var(--ease);
  }
  .espreitar[hidden]{display:none}
  @keyframes espreitarEntra{from{opacity:0}to{opacity:1}}

  .espreitar-caixa{width:min(100%,980px);display:grid;gap:14px}
  .espreitar-topo{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .espreitar-topo p{
    margin:0;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(255,255,255,.72);
  }
  .espreitar-fechar{
    width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
    color:rgba(255,255,255,.8);background:rgba(255,255,255,.1);
    transition:background .3s,color .3s;
  }
  .espreitar-fechar:hover{background:rgba(255,255,255,.2);color:#fff}
  .espreitar-fechar svg{width:18px;height:18px}

  /* o livro aberto */
  .livro-aberto{
    position:relative;display:grid;grid-template-columns:1fr 1fr;
    transform-style:preserve-3d;
    aspect-ratio:1.45;max-height:min(70vh,620px);margin-inline:auto;width:100%;
    perspective:2600px;
    filter:drop-shadow(0 40px 60px rgba(0,0,0,.55));
  }
  .pagina{
    position:relative;overflow:hidden;
    padding:clamp(22px,3.4vw,44px) clamp(20px,3vw,42px) clamp(34px,4vw,52px);
    background:linear-gradient(180deg,#FDFBF7,#F4EEE4);
    font-family:var(--font-display);font-weight:400;
    font-size:clamp(.82rem,1.12vw,1rem);line-height:1.72;color:#2A231D;
    text-align:justify;hyphens:auto;
  }
  .pagina--esq{
    border-radius:5px 0 0 5px;box-shadow:inset -22px 0 30px -26px rgba(22,18,15,.85);
    transform-origin:right center;
  }
  /* a abrir: o livro chega ao centro e a capa desdobra-se para a esquerda */
  .livro-aberto.a-abrir{transition:transform .72s cubic-bezier(.2,.75,.2,1)}
  .livro-aberto.a-abrir .pagina--esq{transition:transform .72s cubic-bezier(.3,.7,.2,1) .06s}
  .livro-aberto.fechado .pagina--esq{transform:rotateY(-96deg)}
  .pagina--dir{border-radius:0 5px 5px 0;box-shadow:inset 22px 0 30px -26px rgba(22,18,15,.85)}
  .pagina-conteudo{height:100%}
  .pagina-corpo{max-height:100%;overflow:hidden}
  .pagina p,.folha-face p{margin:0}
  .pagina p + p,.folha-face p + p{margin-top:.7em;text-indent:1.4em}
  .num{
    position:absolute;bottom:clamp(14px,1.8vw,22px);left:0;right:0;
    text-align:center;font-family:var(--font-sans);font-size:.62rem;letter-spacing:.14em;
    color:rgba(42,35,29,.45);
  }
  .cabeca{
    display:block;margin-bottom:1.4em;
    font-family:var(--font-sans);font-size:.56rem;font-weight:600;letter-spacing:.2em;
    text-transform:uppercase;text-align:center;color:rgba(42,35,29,.4);
  }
  /* capitular na primeira página de texto */
  .pagina-corpo.abre p:first-of-type::first-letter{
    float:left;margin:6px 8px 0 0;
    font-weight:600;color:var(--red);font-size:3.1em;line-height:.78;
  }
  /* folha de rosto */
  .pagina--rosto{display:grid;align-content:center;justify-items:center;text-align:center;gap:14px}
  .pagina--rosto img{width:54px;height:auto;opacity:.85}
  .pagina--rosto strong{font-weight:600;font-size:1.5em;line-height:1.12;letter-spacing:-.02em}
  .pagina--rosto span{font-family:var(--font-sans);font-size:.72em;color:rgba(42,35,29,.6)}
  .pagina--rosto em{
    font-family:var(--font-sans);font-style:normal;font-size:.56em;font-weight:600;
    letter-spacing:.2em;text-transform:uppercase;color:var(--red);
  }
  .pagina--vazia{background:linear-gradient(180deg,#FBF8F3,#F2ECE2)}

  /* a folha que vira */
  .folha{
    position:absolute;top:0;bottom:0;left:50%;width:50%;
    transform-style:preserve-3d;transform-origin:left center;
    transition:transform .78s cubic-bezier(.5,.05,.35,1);
    pointer-events:none;z-index:3;
  }
  .folha[hidden]{display:none}
  .folha--atras{left:0;transform-origin:right center}
  .folha-face{
    position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;
    padding:clamp(22px,3.4vw,44px) clamp(20px,3vw,42px) clamp(34px,4vw,52px);
    background:linear-gradient(180deg,#FDFBF7,#F4EEE4);
    font-family:var(--font-display);font-size:clamp(.82rem,1.12vw,1rem);line-height:1.72;color:#2A231D;
    text-align:justify;hyphens:auto;
  }
  .folha-frente{border-radius:0 5px 5px 0;box-shadow:inset 22px 0 30px -26px rgba(22,18,15,.85)}
  .folha-verso{
    transform:rotateY(180deg);border-radius:5px 0 0 5px;
    box-shadow:inset -22px 0 30px -26px rgba(22,18,15,.85);
  }
  .folha.vira{transform:rotateY(-180deg)}
  .folha--atras.vira{transform:rotateY(180deg)}

  /* controlos */
  .espreitar-baixo{display:flex;align-items:center;justify-content:center;gap:22px}
  .espreitar-seta{
    width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
    color:#fff;background:rgba(255,255,255,.12);
    transition:background .3s,transform .3s,opacity .3s;
  }
  .espreitar-seta:hover:not(:disabled){background:var(--red);transform:scale(1.06)}
  .espreitar-seta:disabled{opacity:.28;cursor:default}
  .espreitar-seta svg{width:20px;height:20px}
  .espreitar-conta{
    min-width:74px;text-align:center;
    font-family:var(--font-sans);font-size:.78rem;letter-spacing:.1em;color:rgba(255,255,255,.72);
  }
  .espreitar-nota{
    margin:0;text-align:center;font-size:.78rem;color:rgba(255,255,255,.5);
  }
  .espreitar-nota a{color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px}

  @media (max-width:720px){
    /* no telemóvel lê-se uma página de cada vez */
    .livro-aberto{grid-template-columns:1fr;aspect-ratio:.72;max-height:66vh}
    .pagina--esq{display:none}
    .pagina--dir{border-radius:5px;box-shadow:0 2px 10px rgba(22,18,15,.18)}
    .folha{left:0;width:100%}
    .folha-frente{border-radius:5px;box-shadow:none}
    .folha-verso{display:none}
  }

  /* ═══════════════ QUEM JÁ LEU ═══════════════ */
  /* secções de apoio: falam baixo — o destaque é o livro */
  /* os blocos desta página respiram menos do que uma página de apresentação:
     é uma ficha, e o leitor vai à procura de coisas concretas */
  .sinopse,.opinioes,.autor-do-livro{padding-block:clamp(44px,5.4vw,80px)}
  .tecnica{padding-block:clamp(36px,4.4vw,64px)}
  .vozes-livro,.imprensa,.relacionados{padding-block:clamp(40px,4.6vw,68px)}
  .vozes-livro .head h2,.imprensa .head h2,.relacionados .head h2{
    font-size:clamp(1.2rem,1.6vw,1.45rem);letter-spacing:-.015em;margin-top:10px;
  }
  .autor-do-livro + .tecnica,.imprensa + .strip{border-top:1px solid var(--line)}
  /* «do mesmo autor» cola-se ao bloco do autor, de quem é; a ficha técnica
     a seguir continua com o seu filete */
  .autor-do-livro + .relacionados{padding-top:0}
  .relacionados + .tecnica{border-top:1px solid var(--line)}

  .vozes-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:clamp(16px,2vw,24px);margin-top:clamp(22px,2.6vw,32px);
  }
  /* uma recomendação sozinha não deve esticar de ponta a ponta */
  .vozes-grid:has(.voz-livro:only-child){grid-template-columns:minmax(0,540px)}
  .voz-livro{
    display:flex;flex-direction:column;gap:14px;
    padding:clamp(20px,2.2vw,28px);border-radius:var(--radius-sm);
    background:var(--card);box-shadow:var(--shadow-xs);
    transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  }
  .voz-livro:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
  .voz-livro q{
    font-family:var(--font-display);font-style:italic;
    font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.36;color:var(--ink);
  }
  .voz-quem{display:flex;align-items:center;gap:11px;margin-top:auto}
  .voz-quem img,.voz-quem span.inicial{
    width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto;
    background:var(--paper-2);display:grid;place-items:center;
    font-family:var(--font-display);color:var(--red);
  }
  .voz-quem b{display:block;font-size:.9rem;font-weight:600}
  .voz-quem small{font-size:.78rem;color:var(--muted)}
  .voz-casa{
    margin-left:6px;padding:2px 8px;border-radius:999px;
    background:var(--red-soft);color:var(--red);
    font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  }
  .voz-post{
    display:inline-flex;align-items:center;gap:.45em;
    font-size:.82rem;font-weight:600;color:var(--muted);
  }
  .voz-post svg{width:14px;height:14px}
  .voz-post:hover{color:var(--red)}

  /* ═══════════════ IMPRENSA ═══════════════ */
  .artigos-fila{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:clamp(20px,2.6vw,34px);
  }
  /* em ecrã pequeno, com mais do que uma notícia, a fila desliza na horizontal;
     com uma só fica como está, à largura toda */
  @media (max-width:880px){
    .artigos-fila:has(> :nth-child(2)){
      display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;
      margin-inline:calc(-1 * var(--gutter));padding:6px var(--gutter) 14px;-webkit-overflow-scrolling:touch;gap:14px;
    }
    .artigos-fila::-webkit-scrollbar{display:none}
    .artigos-fila:has(> :nth-child(2)) .artigo-mini{flex:0 0 min(78%,300px);scroll-snap-align:start}
  }
  .artigo-mini{display:block}
  .artigo-mini figure{
    margin:0 0 14px;overflow:hidden;border-radius:var(--radius-sm);
    background:var(--paper-2);aspect-ratio:16/10;
  }
  .artigo-mini img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
  .artigo-mini:hover img{transform:scale(1.04)}
  .artigo-cat{
    font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);
  }
  .artigo-mini h3{
    margin:8px 0 0;font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
    font-size:.98rem;line-height:1.26;
  }
  .artigo-mini time{display:block;margin-top:7px;font-size:.78rem;color:var(--muted)}

  /* ═══════════════ OPINIÕES DE LEITORES ═══════════════ */
  .opinioes-media{
    margin:10px 0 0;display:flex;align-items:center;gap:10px;
    font-family:var(--font-nav);font-size:.92rem;color:var(--ink-soft);
  }
  .estrelas{display:inline-flex;gap:2px;color:var(--red)}
  .estrelas svg{width:16px;height:16px}
  .estrelas .vazia{opacity:.28}

  .opinioes-lista{display:grid;gap:18px;margin-top:clamp(22px,3vw,34px)}
  .opiniao{
    background:var(--paper);border:1px solid var(--line);border-radius:14px;
    padding:clamp(18px,2.2vw,26px);
  }
  .opiniao-topo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .opiniao-topo b{font-family:var(--font-display);font-size:1.05rem;font-weight:600}
  .opiniao-topo time{font-size:.82rem;color:var(--muted);margin-left:auto}
  .opiniao p{margin:12px 0 0;line-height:1.65;color:var(--ink-soft)}
  .opiniao-resposta{
    margin:16px 0 0;padding:14px 16px;border-radius:10px;
    background:var(--red-soft);border-left:3px solid var(--red);
  }
  .opiniao-resposta b{
    display:block;font-family:var(--font-nav);font-size:.7rem;font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:var(--red);
  }
  .opiniao-resposta p{margin:6px 0 0;color:var(--ink)}

  .opinioes-vazio{
    margin-top:clamp(20px,3vw,32px);max-width:64ch;
    display:flex;gap:clamp(18px,2.4vw,28px);align-items:flex-start;
    padding:clamp(22px,3vw,32px);border-radius:16px;
    background:var(--paper-2);border:1px dashed var(--line-strong);
  }
  .opinioes-vazio-icone{
    flex:0 0 auto;width:clamp(64px,7vw,84px);height:clamp(64px,7vw,84px);
    display:grid;place-items:center;border-radius:50%;
    background:#fff;color:var(--red);box-shadow:0 14px 26px -18px rgba(176,25,31,.55);
    transform:rotate(-4deg);
  }
  .opinioes-vazio-icone svg{width:62%;height:62%}
  .opinioes-vazio-texto{min-width:0}
  .opinioes-vazio .btn{margin-top:18px}
  @media (max-width:560px){
    .opinioes-vazio{flex-direction:column}
  }
  .opinioes-vazio-frase{
    margin:0;font-family:var(--font-display);font-size:clamp(1.2rem,2vw,1.55rem);
    line-height:1.25;color:var(--ink);
  }
  .opinioes-vazio-frase em{color:var(--red);font-style:italic}
  .opinioes-vazio p+p{margin:12px 0 0;color:var(--ink-soft);line-height:1.6}

  .opiniao-form{
    margin-top:clamp(22px,3vw,32px);display:grid;gap:16px;max-width:70ch;
    padding:clamp(20px,2.6vw,30px);border-radius:16px;
    background:var(--paper);border:1px solid var(--line);
  }
  .opiniao-linha{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  /* align-content:start impede que a caixa estique para preencher a linha:
     a coluna do email é mais alta por causa da nota, e sem isto o campo do
     nome crescia até ficar do tamanho das duas. */
  .opiniao-form .campo{display:grid;gap:6px;align-content:start}
  .opiniao-form .campo>span{font-family:var(--font-nav);font-size:.78rem;font-weight:600;color:var(--ink)}
  .opiniao-form .campo small{font-size:.76rem;color:var(--muted)}
  .opiniao-form input[type="text"],
  .opiniao-form input[type="email"],
  .opiniao-form textarea{
    width:100%;padding:11px 14px;border:1px solid var(--line-strong);border-radius:10px;
    background:#fff;font:inherit;font-size:.95rem;color:var(--ink);
  }
  .opiniao-form input:focus-visible,.opiniao-form textarea:focus-visible{
    outline:2px solid var(--red);outline-offset:1px;border-color:transparent;
  }
  .opiniao-form .erro input,.opiniao-form .erro textarea{border-color:var(--red)}

  .opiniao-estrelas{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .opiniao-estrelas-etiqueta{font-family:var(--font-nav);font-size:.78rem;font-weight:600}
  .opiniao-estrelas button{
    padding:2px;color:var(--line-strong);transition:color .2s ease,transform .2s var(--ease);
  }
  .opiniao-estrelas button svg{width:26px;height:26px}
  .opiniao-estrelas button:hover{transform:translateY(-2px)}
  .opiniao-estrelas button.is-on{color:var(--red)}

  /* campo de mel: invisível para gente, apetecível para robots */
  .opiniao-mel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  .opiniao-fundo{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .opiniao-nota{margin:0;font-size:.88rem;color:var(--ink-soft)}
  .opiniao-nota.mau{color:var(--red)}

  @media (max-width:640px){
    .opiniao-linha{grid-template-columns:1fr}
  }

  /* ═══════════════ ESCREVER UMA OPINIÃO ═══════════════
     Em modal, e não por baixo da lista: quem escreve não deve ter de
     procurar onde é que o formulário apareceu. */
  .opiniao-modal{
    position:fixed;inset:0;z-index:80;
    display:grid;place-items:center;padding:clamp(16px,4vw,48px);
    background:rgba(22,18,15,.62);backdrop-filter:blur(3px);
  }
  .opiniao-modal[hidden]{display:none!important}
  .opiniao-caixa{
    width:min(640px,100%);max-height:88vh;overflow-y:auto;
    background:var(--paper);border-radius:18px;
    padding:clamp(22px,3vw,34px);
    box-shadow:0 40px 80px -30px rgba(22,18,15,.6);
    animation:opiniaoEntra .3s var(--ease) both;
  }
  @keyframes opiniaoEntra{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.opiniao-caixa{animation:none}}

  .opiniao-caixa-topo{display:flex;align-items:flex-start;gap:16px;margin-bottom:6px}
  .opiniao-caixa-topo h2{margin:6px 0 0;font-size:clamp(1.3rem,2.2vw,1.7rem)}
  .opiniao-fechar{
    margin-left:auto;flex:0 0 auto;
    width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
    background:var(--paper-2);color:var(--ink);
    transition:background .3s ease,color .3s ease;
  }
  .opiniao-fechar:hover{background:var(--red);color:#fff}
  .opiniao-fechar svg{width:18px;height:18px}

  /* dentro do modal a moldura já é a caixa */
  .opiniao-caixa .opiniao-form{
    margin:0;max-width:none;padding:0;background:none;border:0;
  }

  .opiniao-obrigado{
    margin:0;padding:12px 18px;border-radius:999px;
    background:var(--red-soft);color:var(--red);
    font-family:var(--font-nav);font-size:.88rem;font-weight:600;
  }

  /* depois de juntar ao cesto */
  .btn--feito{background:var(--ink)!important;border-color:var(--ink)!important}
  .compra-atalho{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    margin:14px 0 0;font-family:var(--font-nav);font-size:.86rem;color:var(--ink-soft);
    animation:atalhoEntra .35s var(--ease) both;
  }
  .compra-atalho a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:3px}
  @keyframes atalhoEntra{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.compra-atalho{animation:none}}