/* ═══════════════════════════════════════════════════════════════════════
   Seção "O programa virou cordel" (varal + leitor flipbook) — index.html.
   Tudo com prefixo pc- pra não colidir com o varal do elenco (.varal etc.)
   em styles.css / hero.css. Cores/fontes/botões vêm das variáveis do site.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --pc-madeira:#b98a56; --pc-madeira-escura:#8a6238; --pc-corda:#d9c7a3;
  /* leitor = mesmo fundo terroso da seção "A peça". Mesma cor SÓLIDA no .pc-leitor e no
     .pc-pagina.pc-vazia — não separar nem usar degradê/imagem */
  --pc-fundo-leitor: var(--barro-esc);   /* mesmo terroso da seção */
}

/* mesma textura de hachura da seção "A peça" */
#programa::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cg stroke='%23fff' stroke-width='2'%3E%3Cpath d='M-4 12 L12 -4 M6 22 L22 6 M16 32 L32 16'/%3E%3C/g%3E%3C/svg%3E");
}
.pc-secao{ text-align:center; padding-top:clamp(0.5rem,2vh,1.5rem) }
.pc-secao .secao__titulo{ margin-top:0 }
.pc-estrofe{
  display:inline-block; text-align:left; margin:0.3rem auto 0;
  white-space:nowrap; max-width:100%;   /* cada verso numa linha só (no celular quebrava "Pegue o seu e / vá entrando") */
  font-family:var(--f-corpo); font-size:clamp(1rem,0.9rem + 0.5vw,1.25rem);
  line-height:1.6; color:var(--osso);
}
.pc-rodape-varal{ max-width:36em; margin:1.8rem auto 0; color:var(--osso); font-size:1rem; }

  /* ---------- varal (visual mantido como no protótipo — não redesenhar) ---------- */
  .pc-varais{margin-top:2.75rem;display:flex;flex-direction:column;gap:36px;min-height:240px}
  .pc-varal{position:relative;height:var(--pc-h,320px)}
  .pc-varal svg.pc-corda{position:absolute;left:0;top:0;width:100%;height:90px;overflow:visible;pointer-events:none}
  .pc-varal svg.pc-corda path{fill:none;stroke:var(--pc-corda);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
  .pc-cordel{position:absolute;top:0;transform:translateX(-50%);width:var(--pc-w,150px);padding:0;border:0;background:none;
          cursor:pointer;-webkit-tap-highlight-color:transparent}
  .pc-cordel .pc-entrada{display:block;transform-origin:50% 0;animation:pc-pendura .8s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--pc-d,0s)}
  .pc-varais.pc-montado .pc-cordel .pc-entrada{animation:none}
  .pc-cordel .pc-balanco{display:block;transform-origin:50% 0;transform:rotate(var(--pc-r,0deg))}
  .pc-cordel .pc-balanco.pc-balancando{animation:pc-balanca 1.1s ease-in-out}
  .pc-cordel img{display:block;width:100%;height:auto;box-shadow:0 10px 22px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.3);
          transition:transform .35s ease,box-shadow .35s ease}
  .pc-cordel .pc-pregador{position:absolute;left:50%;top:-14px;width:12px;height:30px;margin-left:-6px;z-index:2;border-radius:3px;
          background:linear-gradient(90deg,var(--pc-madeira-escura),var(--pc-madeira) 45%,var(--pc-madeira-escura));
          box-shadow:0 2px 3px rgba(0,0,0,.35)}
  .pc-cordel .pc-pregador::after{content:"";position:absolute;left:50%;top:9px;width:14px;height:3px;margin-left:-7px;
          background:#7a7a7a;border-radius:2px}
  .pc-cordel:hover img,.pc-cordel:focus-visible img{transform:translateY(-4px);box-shadow:0 16px 30px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.3)}
  .pc-cordel:focus-visible{outline:none}
  .pc-cordel:focus-visible img{outline:3px solid var(--sol);outline-offset:4px}
  @keyframes pc-pendura{0%{transform:translateY(-16px) rotate(-5deg);opacity:0}100%{transform:none;opacity:1}}
  @keyframes pc-balanca{0%{transform:rotate(var(--pc-r,0deg))}30%{transform:rotate(calc(var(--pc-r,0deg) + 5deg))}
          60%{transform:rotate(calc(var(--pc-r,0deg) - 3deg))}100%{transform:rotate(var(--pc-r,0deg))}}

  /* ---------- leitor ---------- */
  .pc-leitor{position:fixed;inset:0;z-index:var(--z-modal);display:none;flex-direction:column;align-items:center;
          background:var(--pc-fundo-leitor);
          padding:calc(env(safe-area-inset-top,0px) + 12px) 12px calc(env(safe-area-inset-bottom,0px) + 12px)}
  .pc-leitor.pc-aberto{display:flex}
  .pc-leitor .pc-topo{width:100%;max-width:1400px;display:flex;justify-content:flex-end;gap:10px;min-height:44px}
  .pc-palco{flex:1;width:100%;display:flex;align-items:center;justify-content:center;min-height:0}
  .pc-livro-wrap{width:100%;height:100%;max-width:1400px}
  .pc-livro{width:100%;height:100%}
  .pc-livro-wrap{position:relative;overflow:hidden;transform:translateZ(0)}
  .pc-lombada{position:absolute;width:56px;margin-left:-28px;pointer-events:none;z-index:5;opacity:0;transition:opacity .4s;
           background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(40,25,10,.10) 38%,rgba(40,25,10,.22) 50%,rgba(40,25,10,.10) 62%,rgba(0,0,0,0) 100%)}
  .pc-lombada.pc-visivel{opacity:1}
  .pc-livro-wrap .pc-pagina{background:#fff}
  /* opaca, na MESMA cor sólida do fundo do leitor (--pc-fundo-leitor): esconde
     a página que fica por baixo durante a virada. Trocar a cor de uma sem
     trocar a da outra reabre o bug (retângulo visível / página 2 e 15
     aparecendo no fundo). */
  .pc-livro-wrap .pc-pagina.pc-vazia{background:var(--pc-fundo-leitor)}
  .pc-livro-wrap .pc-pagina img{width:100%;height:100%;display:block;object-fit:cover;user-select:none;-webkit-user-drag:none;pointer-events:none}

  .pc-controles{display:flex;align-items:center;gap:14px;margin-top:10px;min-height:48px}
  .pc-indicador{min-width:9em;text-align:center;font-family:var(--f-corpo);font-style:italic;color:var(--osso-2);font-size:0.95rem}

  /* botões do leitor — mesma linguagem visual do site: borda grossa de
     "goiva" (--tinta), sombra dura, fonte de título (--f-display) */
  .pc-leitor-pdf{ padding:0.7em 1.3em; font-size:0.92rem; }
  .pc-pdf-mob{ display:none }
  @media (max-width:600px){ .pc-pdf-mob{ display:inline } }
  .pc-leitor-fechar, .pc-leitor-nav{
    width:2.3rem;height:2.3rem;display:grid;place-content:center;flex-shrink:0;
    font-family:var(--f-display);font-size:1.15rem;line-height:1;cursor:pointer;
    border:var(--traco) solid var(--tinta);border-radius:var(--raio);
    transition:background .15s, transform .14s var(--ease-saida), box-shadow .14s var(--ease-saida);
  }
  .pc-leitor-fechar{ background:var(--sol); color:var(--tinta); font-size:1.35rem; }
  .pc-leitor-fechar:hover{ background:var(--sol-forte); }
  .pc-leitor-nav{ background:transparent; color:var(--osso); }
  .pc-leitor-nav:hover{ background:color-mix(in oklab, var(--osso) 12%, transparent); }
  .pc-leitor-nav:disabled{ opacity:.35; cursor:default; background:transparent; }
  .pc-leitor-pdf:focus-visible, .pc-leitor-fechar:focus-visible, .pc-leitor-nav:focus-visible{
    outline:3px solid var(--sol); outline-offset:2px;
  }

  /* verso da folha ao virar no celular (1 página por vez): a cópia que gira
     mostraria a própria página de trás pra frente — fica em branco, cor do papel */
  .pc-livro-wrap .pc-pagina.pc-verso{background:#fbf7ec}
  .pc-livro-wrap .pc-pagina.pc-verso img{visibility:hidden}

  /* zoom da página (lupa, duplo toque/clique, pinça) */
  .pc-zoom{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;background:var(--pc-fundo-leitor);
        padding:calc(env(safe-area-inset-top,0px) + 12px) 12px calc(env(safe-area-inset-bottom,0px) + 12px)}
  .pc-zoom-topo{width:100%;max-width:1400px;display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:44px}
  .pc-zoom-rotulo{margin-right:auto;font-family:var(--f-corpo);font-style:italic;color:var(--osso-2);font-size:.95rem}
  .pc-zoom-area{position:relative;flex:1;min-height:0;width:100%;max-width:1400px;margin-top:10px;display:flex;overflow:auto;
             touch-action:none;cursor:grab;overscroll-behavior:contain;scrollbar-width:none}
  .pc-zoom-area::-webkit-scrollbar{display:none}
  .pc-zoom-area:active{cursor:grabbing}
  .pc-zoom-inner{flex:none;margin:auto;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.5)}
  .pc-zoom-inner img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none;pointer-events:none}
  .pc-leitor-nav svg{display:block}

  .pc-dica{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 16px);transform:translateX(-50%);
        background:color-mix(in oklab, var(--tinta) 85%, transparent);color:var(--osso);padding:8px 16px;
        border-radius:999px;font-family:var(--f-corpo);font-size:0.88rem;
        pointer-events:none;transition:opacity .6s;white-space:nowrap}
  .pc-dica.pc-some{opacity:0}

  @media (max-width:600px){ .pc-controles{gap:8px} .pc-indicador{min-width:6.5em;font-size:0.85rem} .pc-pdf-desk{display:none} }
  @media (prefers-reduced-motion:reduce){
    .pc-cordel .pc-entrada,.pc-cordel .pc-balanco.pc-balancando{animation:none}
    .pc-cordel img{transition:none}
    .pc-leitor-fechar, .pc-leitor-nav{transition:none}
  }


@media (max-width:599px){ .pc-pdf-frase{ display:none } }   /* no celular o toque já abre o PDF */