@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Montserrat:wght@400;500;600;700&display=swap');
:root{
  --terracota:#C86E4A;--verde:#5C6B3D;--salvia:#A7B38A;--crema:#F2E8D9;--crema-clara:#FAF6EF;--texto:#3f4233;
  --fs:32px;
  --bg:#FAF6EF;--fg:#33362b;--muted:#9a927d;--cue:#b06a48;--card:#fff;--line:#e7ddca;
}
body.dark{--bg:#14150f;--fg:#f3efe4;--muted:#8f8a78;--cue:#e0a884;--card:#20221a;--line:#33362b;}
*{box-sizing:border-box;}
html,body{margin:0;}
body{background:var(--bg);color:var(--fg);font-family:'Montserrat',-apple-system,Segoe UI,Arial,sans-serif;transition:background .2s,color .2s;}
.tp{max-width:940px;margin:0 auto;padding:40px 32px 60vh;}
.cab{text-align:center;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:30px;}
.cab .k{letter-spacing:.28em;text-transform:uppercase;font-size:12px;color:var(--terracota);font-weight:600;}
.cab h1{font-family:'Playfair Display',serif;color:var(--verde);font-size:30px;margin:10px 0 4px;}
body.dark .cab h1{color:var(--salvia);}
.cab .dur{font-size:13px;color:var(--muted);letter-spacing:.02em;}
.notas{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--salvia);border-radius:10px;padding:14px 20px;margin-bottom:34px;font-size:15px;color:var(--muted);line-height:1.6;}
.notas b{color:var(--verde);}
body.dark .notas b{color:var(--salvia);}
.blk{margin:0 0 46px;}
.blk .meta{font-size:14px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--terracota);margin-bottom:6px;}
.blk .meta .lite{color:var(--muted);font-weight:500;text-transform:none;letter-spacing:.01em;}
.blk .cue{font-size:16px;color:var(--cue);font-style:italic;margin-bottom:14px;line-height:1.45;}
.blk .say{font-size:var(--fs);line-height:1.62;font-weight:500;letter-spacing:.005em;}
.blk .say b{color:var(--terracota);font-weight:700;}
body.dark .blk .say b{color:var(--cue);}
.fin{text-align:center;color:var(--muted);font-size:15px;margin-top:20px;}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;
     padding:11px 14px;background:rgba(250,246,239,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line);}
body.dark .bar{background:rgba(20,21,15,.97);}
.bar button{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--salvia);
            background:var(--card);color:var(--verde);border-radius:20px;padding:9px 15px;transition:background .12s,color .12s;}
body.dark .bar button{color:var(--salvia);}
.bar button:hover{background:var(--verde);color:#fff;}
.bar .play{background:var(--terracota);color:#fff;border-color:var(--terracota);min-width:130px;}
.bar .play:hover{background:#a85a36;}
.bar .grp{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:3px;}
.bar .grp button{border:0;padding:6px 11px;}
.bar .val{font-size:12.5px;color:var(--muted);min-width:52px;text-align:center;}
.hint{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:40;font-size:12px;color:var(--muted);background:var(--card);
      border:1px solid var(--line);border-radius:16px;padding:5px 14px;opacity:.9;}
.gback{position:fixed;top:10px;left:12px;z-index:60;background:var(--card);border:1px solid var(--line);color:var(--cue);
       text-decoration:none;font:600 12px 'Montserrat',sans-serif;padding:6px 12px;border-radius:16px;}
.gback:hover{background:var(--terracota);color:#fff;border-color:var(--terracota);}
@media print{
  .bar,.hint,.gback{display:none!important;}
  body{background:#fff;color:#000;}
  .tp{padding:0 0 20px;max-width:100%;}
  .blk .say{font-size:19px;line-height:1.5;}
  .blk{margin-bottom:22px;page-break-inside:avoid;}
  .notas{color:#555;}
}
@media(max-width:640px){
  :root{--fs:27px;}
  .tp{padding:22px 15px 66vh;}
  .cab h1{font-size:23px;}
  .bar{gap:6px;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));}
  .bar button{font-size:14px;padding:12px 15px;}
  .bar .play{flex:1 0 100%;order:-1;}
  .bar .grp{flex:1 1 auto;justify-content:center;}
  .bar #btnPrint,.bar #btnTop{display:none;}
  .gback{font-size:13px;padding:8px 13px;}
}