/* =========================================================
   GGBR · Roteiros — CSS único para todas as páginas
   Para mudar uma cor ou fonte do site inteiro, edite aqui.
   ========================================================= */

/* ---------- Fontes ---------- */
@font-face{font-family:"SF Pro Display";font-weight:300;font-style:normal;font-display:swap;src:url("/arquivos/fontes/SFProDisplay-Light.woff") format("woff")}
@font-face{font-family:"SF Pro Display";font-weight:400;font-style:normal;font-display:swap;src:url("/arquivos/fontes/SFProDisplay-Regular.woff") format("woff")}
@font-face{font-family:"SF Pro Display";font-weight:700;font-style:normal;font-display:swap;src:url("/arquivos/fontes/SFProDisplay-Bold.woff") format("woff")}
@font-face{font-family:"SF Pro Display";font-weight:800;font-style:normal;font-display:swap;src:url("/arquivos/fontes/SFProDisplay-Heavy.woff") format("woff")}
@font-face{font-family:"SF Pro Display";font-weight:900;font-style:normal;font-display:swap;src:url("/arquivos/fontes/SFProDisplay-Black.woff") format("woff")}
@font-face{font-family:"Solid Antique";font-weight:400;font-style:normal;font-display:swap;src:url("/arquivos/fontes/SolidAntique%20RomanW01.woff") format("woff")}
/* Courier Prime vem do Google Fonts (link no cabecalho.php) */

/* ---------- Cores (tema claro e escuro) ---------- */
:root{
  --rosa:#fc6177;
  --rosa-hover:#d9455c;
  --rosa-suave:#ffe9ec;
  --rosa-desativado:#fdaab6;
  --bg:#ffffff;
  --superficie:#ffffff;
  --txt:#000000;
  --sub:#a4999b;
  --linha:#e3e3e3;
  --faixa:#ffe9ec;
  --hover-bg:#ffe9ec;
  --borda-sel:#f3dec0;
  --rodape:#f2f2f2;
  --icone:#999999;
  --copo:#c4c4c4;
  --btn-redondo:#ebebeb;
  --erro:#D32F2F;
  --erro-hover:#b82828;
  --larg:1240px;
  --alt-barra:66px;
  color-scheme:light;
}
:root[data-tema="escuro"]{
  --bg:#151214;
  --superficie:#1e1a1c;
  --txt:#f4eeee;
  --sub:#a99fa1;
  --linha:#3a3235;
  --faixa:#2a1e22;
  --hover-bg:#3b2429;
  --borda-sel:#5b4a3c;
  --rodape:#1e1a1c;
  --icone:#aaa0a2;
  --copo:#8d8688;
  --btn-redondo:#332d30;
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font:400 18px/1.5 "SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  /* proteção contra cópia: tudo bloqueado, exceto o texto do roteiro (ver roteiros.js) */
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
img,svg{max-width:100%}
a{color:inherit}
em{font-style:italic}
:focus-visible{outline:3px solid var(--rosa);outline-offset:2px}
.container{max-width:var(--larg);margin:0 auto;padding:0 20px}

/* ---------- Barra fixa ---------- */
.barra{position:sticky;top:0;z-index:60;background:var(--superficie);border-bottom:3px solid var(--rosa)}
.barra__in{position:relative;max-width:var(--larg);margin:0 auto;padding:0 20px;height:var(--alt-barra);display:flex;align-items:center;gap:12px}
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--txt);font:900 37px/1 "SF Pro Display",Arial,sans-serif;letter-spacing:-.02em}
.logo svg{width:40px;height:33px;color:var(--copo);fill:currentColor}
.nav-ep{display:flex;gap:8px;margin:0 auto}
.nav-ep__b{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:37px;min-width:37px;padding:0 14px;border-radius:999px;background:var(--faixa);color:var(--rosa);text-decoration:none;font:800 15px/1 "SF Pro Display",Arial,sans-serif;transition:background .15s,color .15s}
.nav-ep__b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nav-ep__b:hover{background:var(--rosa);color:#fff}
.nav-ep__b.off{opacity:.35;pointer-events:none}
.acoes{display:flex;align-items:center;gap:19px}
.btn-menu{display:inline-flex;align-items:center;gap:8px;height:37px;padding:0 17px;border:0;border-radius:999px;background:var(--rosa);color:#fff;font:800 16px/1 "SF Pro Display",Arial,sans-serif;cursor:pointer;transition:background .15s,box-shadow .15s}
.btn-menu:hover{background:var(--rosa-hover)}
.btn-menu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;overflow:visible}
/* tracinhos que viram X (animação) */
.btn-menu line{transform-box:fill-box;transform-origin:center;transition:transform .28s ease,opacity .2s ease}
.btn-menu.aberto .l1{transform:translateY(6px) rotate(45deg)}
.btn-menu.aberto .l2{opacity:0;transform:scaleX(0)}
.btn-menu.aberto .l3{transform:translateY(-6px) rotate(-45deg)}
.btn-menu.aberto{box-shadow:0 0 0 3px var(--superficie),0 0 0 5px var(--rosa)}
.btn-tema{position:relative;display:inline-flex;align-items:center;justify-content:center;width:37px;height:37px;padding:0;border:1px solid var(--rosa);border-radius:50%;background:var(--rosa-suave);color:#000;cursor:pointer;overflow:hidden;transition:background .3s,color .3s}
:root[data-tema="escuro"] .btn-tema{background:var(--hover-bg);color:#fff}
.btn-tema svg{position:absolute;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .35s ease}
.btn-tema .sol{opacity:1;transform:rotate(0) scale(1)}
.btn-tema .lua{opacity:0;transform:rotate(-100deg) scale(.3)}
:root[data-tema="escuro"] .btn-tema .sol{opacity:0;transform:rotate(100deg) scale(.3)}
:root[data-tema="escuro"] .btn-tema .lua{opacity:1;transform:rotate(0) scale(1)}
:root[data-tema="escuro"] .btn-tema:hover .lua,.btn-tema:hover .sol{transform:rotate(15deg) scale(1.05)}

/* Menu suspenso (largura e altura dos itens como na imagem de referência) */
.menu{position:absolute;top:calc(100% + 3px);right:84px;width:374px;background:var(--superficie);box-shadow:0 12px 30px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.04);
  visibility:hidden;opacity:0;transform:translateY(-10px);clip-path:inset(0 -40px 100% -40px);
  transition:opacity .22s ease,transform .26s ease,clip-path .26s ease,visibility 0s linear .26s}
.menu.aberto{visibility:visible;opacity:1;transform:none;clip-path:inset(-6px -40px -40px -40px);
  transition:opacity .22s ease,transform .26s ease,clip-path .28s ease,visibility 0s}
.menu ul{list-style:none;margin:0;padding:0}
.menu li a{display:block;padding:17px 25px;border-bottom:1px solid var(--linha);color:var(--txt);text-decoration:none;font:700 18px/1.25 "SF Pro Display",Arial,sans-serif;background:var(--superficie);transition:background .12s,color .12s}
.menu li a:hover,.menu li a:focus-visible{background:var(--hover-bg);color:var(--rosa);outline-offset:-3px}
.menu__fim{padding:20px 20px 24px;text-align:center}

/* Botão "Comunicar erro" (menu e rodapé) */
.btn-erro{display:inline-block;padding:10px 14px;border-radius:4px;background:var(--erro);color:#fff;text-decoration:none;text-transform:uppercase;font:300 16px/1.2 "SF Pro Display",Arial,sans-serif;transition:background .15s}
.btn-erro:hover{background:var(--erro-hover)}

/* Redes sociais (menu e rodapé) */
.redes{display:flex;flex-wrap:wrap;gap:20px}
.redes--centro{justify-content:center;margin-top:20px}
.redes a{display:inline-flex;color:var(--icone);transition:color .15s}
.redes a:hover{color:var(--rosa)}
.redes svg{width:22px;height:22px;fill:currentColor}

/* ---------- Faixa de escolha de episódio (não fixa) ---------- */
.faixa{position:relative;z-index:30;background:var(--faixa);padding:33px 20px 33px}
.seletor{display:flex;justify-content:center;align-items:flex-start;gap:15px}
.sel{position:relative}
.sel--temp{width:290px}
.sel--ep{width:252px}
.sel__btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:49px;padding:0 18px 0 24px;border:1px solid var(--borda-sel);border-radius:25px;background:var(--superficie);color:var(--txt);text-align:left;font:400 20px/1 "SF Pro Display",Arial,sans-serif;cursor:pointer}
.sel__txt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sel__txt .curto{display:none}
.sel__btn svg{width:17px;height:17px;fill:none;stroke:var(--rosa);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .15s}
.sel.aberto .sel__btn{border-radius:25px 25px 0 0}
.sel.aberto .sel__btn svg{transform:rotate(180deg)}
.sel.desativado .sel__btn{opacity:.6;cursor:not-allowed}
.sel__lista{position:absolute;left:0;right:0;top:100%;z-index:40;margin:0;padding:0 0 8px;list-style:none;max-height:min(420px,60vh);overflow-y:auto;background:var(--superficie);border:1px solid var(--borda-sel);border-top:0;border-radius:0 0 25px 25px;box-shadow:0 14px 28px rgba(0,0,0,.10)}
.sel__lista[hidden]{display:none}
.sel__lista li{padding:9px 24px;font:400 20px/1.2 "SF Pro Display",Arial,sans-serif;cursor:pointer}
.sel__lista li:hover,.sel__lista li:focus{background:var(--hover-bg);outline:0}
.btn-ir{width:83px;height:49px;padding:0;border:0;border-radius:25px;background:var(--rosa);color:#fff;font:800 20px/1 "SF Pro Display",Arial,sans-serif;cursor:pointer;transition:background .15s}
.btn-ir:hover:not(:disabled){background:var(--rosa-hover)}
.btn-ir:disabled{background:var(--rosa-desativado);cursor:not-allowed}
:root[data-tema="escuro"] .btn-ir:disabled{opacity:.5;background:var(--rosa)}

/* ---------- Conteúdo ---------- */
.pub-label{margin:40px 0 6px;text-align:center;text-transform:uppercase;color:var(--sub);font:300 11px/1 "SF Pro Display",Arial,sans-serif;letter-spacing:.08em}
.pub-slot{min-height:90px;text-align:center;overflow:hidden}
.titulo{margin:56px 0 24px;text-align:center;font:400 clamp(46px,5.6vw,64px)/1.1 "Solid Antique",Georgia,serif;color:var(--txt)}
.info{margin:0 0 28px;text-align:center;font:400 clamp(15px,1.5vw,18px)/1.5 "SF Pro Display",Arial,sans-serif}
.info p{margin:0}
.info strong{font-weight:700}
.compartilhar{display:flex;justify-content:center;gap:10px;margin:0 0 46px}
.compartilhar a,.compartilhar button{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:var(--btn-redondo);color:var(--txt);cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.compartilhar a:hover,.compartilhar button:hover{background:var(--rosa);color:#fff}
.compartilhar svg{width:20px;height:20px;fill:currentColor}

/* ---------- Texto do roteiro: formato de roteiro de cinema/TV ----------
   Margens: cena e descrição na largura total; nome do personagem recuado ao centro;
   fala em coluna mais estreita. Esta é a única área que pode ser selecionada e copiada. */
.roteiro{max-width:66ch;margin:0 auto;font:400 clamp(15px,1.45vw,18px)/1.55 "Courier Prime","Courier New",Courier,monospace;color:var(--txt);overflow-wrap:break-word;
  -webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.roteiro p{margin:0}
.roteiro .cena{margin:2.4em 0 1em;font-weight:700}
.roteiro .acao{margin:0 0 1.3em;font-weight:700}
.roteiro .fala{margin:0 0 1.3em;break-inside:avoid}
.roteiro .personagem{margin-left:36.7%;font-weight:700}
.roteiro .paren{margin:0 25% 0 26.7%}
.roteiro .dialogo{margin:0 16% 0 16.7%}
.roteiro .fim{margin:3em 0 1em;text-align:center;font-weight:700}

/* Navegação no fim do roteiro (compacta) */
.nav-fim{display:flex;justify-content:center;gap:18px;margin:56px 0 0}
.nav-fim a,.nav-fim span{flex:0 1 380px;display:block;padding:22px 28px;border:1px solid var(--borda-sel);border-radius:16px;background:var(--faixa);color:var(--txt);text-decoration:none;transition:border-color .15s}
.nav-fim a:hover{border-color:var(--rosa)}
.nav-fim .prox{text-align:right}
.nav-fim small{display:block;margin-bottom:4px;color:var(--rosa);font:800 16px/1.2 "SF Pro Display",Arial,sans-serif}
.nav-fim b{display:block;font:700 20px/1.3 "SF Pro Display",Arial,sans-serif}
.nav-fim .off{visibility:hidden;padding:0}
.nav-fim + .pub-label{margin-top:64px} /* distância segura do banner (evita cliques acidentais) */

/* ---------- Rodapé ---------- */
.rodape{margin-top:70px;background:var(--rodape);padding:62px 0 40px}
.rodape__grade{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:40px}
.rodape h2{margin:0 0 14px;color:var(--txt);font:700 24px/1.2 "SF Pro Display",Arial,sans-serif}
.rodape p{margin:0 0 22px;color:var(--sub);font:300 20px/1.55 "SF Pro Display",Arial,sans-serif}
.rodape ul{margin:0;padding:0;list-style:none}
.rodape li{margin:0 0 6px}
.rodape li a{color:var(--sub);text-decoration:none;font:300 20px/1.5 "SF Pro Display",Arial,sans-serif;transition:color .15s}
.rodape li a:hover{color:var(--txt)}
.btn-erro--grade{display:none}
.rodape__fim{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:56px}
.rodape__copy{display:flex;align-items:center;gap:12px;color:var(--sub);font:300 18px/1.4 "SF Pro Display",Arial,sans-serif}
.rodape__copy .logo{font-size:24px;gap:6px}
.rodape__copy .logo svg{width:1.3em;height:1.06em}
.rodape__copy a{color:var(--sub)}
.rodape__copy a:hover{color:var(--txt)}
.rodape__copy a.logo{color:var(--txt)}

.copiar-sel{position:absolute;z-index:150;display:none;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--rosa);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.28);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,transform .15s}
.copiar-sel.on{display:inline-flex;animation:surgir .18s ease-out}
.copiar-sel:hover{background:var(--rosa-hover);transform:scale(1.06)}
.copiar-sel svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes surgir{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}

.topo{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:var(--rosa);color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.22);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease,background .15s,visibility 0s linear .25s}
.topo.on{opacity:.92;visibility:visible;transform:none;transition:opacity .25s ease,transform .25s ease,background .15s,visibility 0s}
.topo:hover{background:var(--rosa-hover);opacity:1}
.topo svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Aviso discreto (botão direito / link copiado) ---------- */
.toast{position:fixed;left:50%;top:50%;z-index:200;max-width:calc(100vw - 32px);padding:12px 30px;border-radius:999px;background:#fff;color:#e01b1b;text-align:center;font:400 18px/1.3 "SF Pro Display",Arial,sans-serif;box-shadow:0 6px 24px rgba(0,0,0,.28);transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .2s}
.toast.on{opacity:1}
.toast--ok{color:#1b7a3d}

/* ---------- Tablet ---------- */
@media (max-width:999px){
  .nav-ep__b .txt{display:none}
  .nav-ep__b{padding:0}
  .rodape__grade{grid-template-columns:1fr 1fr}
  .rodape__sobre{grid-column:1 / -1}
  .sel--temp{width:min(290px,34vw)}
  .sel--ep{width:min(252px,30vw)}
  .menu{right:84px}
}

/* ---------- Celular ---------- */
@media (max-width:640px){
  :root{--alt-barra:60px}
  .barra__in{padding:0 12px;gap:8px}
  .logo{font-size:30px;gap:6px}
  .logo svg{width:34px;height:28px}
  .nav-ep{gap:6px}
  .nav-ep__b{height:36px;min-width:36px}
  .acoes{gap:8px}
  .btn-menu{height:36px;padding:0 14px;font-size:15px}
  .btn-tema{width:36px;height:36px}
  .menu{left:12px;right:12px;width:auto}
  .topo{right:14px;bottom:14px;width:40px;height:40px}
  .menu li a{padding:16px 22px;font-size:17px}

  /* Seletor: "Temporada", "Episódio" e IR na mesma linha */
  .faixa{padding:20px 12px 22px}
  .seletor{gap:6px;flex-wrap:nowrap}
  .sel--temp{flex:1 1 0;width:auto;min-width:0}
  .sel--ep{flex:1.25 1 0;width:auto;min-width:0}
  .sel__txt .longo{display:none}
  .sel__txt .curto{display:inline}
  .sel__btn{height:42px;padding:0 10px 0 14px;font-size:15px;border-radius:21px;gap:6px}
  .sel__btn svg{width:14px;height:14px}
  .sel.aberto .sel__btn{border-radius:21px}
  .sel__lista{top:calc(100% + 6px);padding:6px 0;border:1px solid var(--borda-sel);border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,.16)}
  .sel__lista li{padding:10px 16px;font-size:16px}
  .sel--temp .sel__lista{min-width:150px}
  .sel--ep .sel__lista{left:auto;right:0;width:min(300px,calc(100vw - 82px))}
  .btn-ir{flex:none;width:52px;height:42px;border-radius:21px;font-size:17px}

  .titulo{margin-top:36px;font-size:52px}
  .compartilhar{margin-bottom:34px}

  /* Navegação do fim: empilhada, anterior à esquerda e próximo à direita */
  .nav-fim{flex-direction:column;gap:15px;margin-top:44px}
  .nav-fim a,.nav-fim span{flex:none;padding:20px 22px;border-radius:16px}
  .nav-fim .prox{text-align:right}
  .nav-fim small{font-size:13.5px;margin-bottom:3px}
  .nav-fim b{font-size:17px}
  .nav-fim .off{display:none}

  /* Roteiro: margens menores */
  .roteiro .personagem{margin-left:22%}
  .roteiro .paren{margin:0 4% 0 14%}
  .roteiro .dialogo{margin:0 3% 0 8%}

  /* Rodapé mobile: ícones centralizados, colunas centralizadas (texto à esquerda) */
  .rodape{padding:42px 0 30px}
  .rodape__grade{grid-template-columns:1fr 1fr;gap:34px 0}
  .rodape h2{font-size:22px;margin-bottom:12px}
  .rodape p{font-size:17px}
  .rodape li{margin-bottom:5px}
  .rodape li a{font-size:17px}
  .rodape__sobre .redes{justify-content:center;margin-top:26px}
  .rodape__col{padding-left:clamp(20px,9vw,44px)}
  .btn-erro--grade{display:inline-block;justify-self:center;align-self:end;margin-bottom:4px}
  .rodape__fim > .btn-erro{display:none}
  .rodape__fim{margin-top:34px}
  .rodape__copy{gap:6px;flex-wrap:nowrap;font-size:clamp(9px,2.65vw,12px);white-space:nowrap}
  .rodape__copy .logo{font-size:clamp(11px,3.5vw,16px);gap:4px}
}
@media (max-width:400px){
  .btn-menu span{display:none}
  .btn-menu{padding:0;width:36px;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .btn-menu line,.btn-tema svg,.copiar-sel,.menu,.topo{transition:none;animation:none}
}

/* ---------- Impressão: só título, dados e roteiro ---------- */
@media print{
  :root{--bg:#fff;--txt:#000;--sub:#444}
  .barra,.faixa,.pub-label,.pub-slot,.compartilhar,.nav-fim,.rodape,.toast,.copiar-sel,.topo,#gg-ck{display:none !important}
  body{background:#fff;color:#000;font-size:12pt}
  .titulo{margin:0 0 8pt;font-size:24pt}
  .info{margin-bottom:16pt;font-size:11pt}
  .roteiro{max-width:none;color:#000;font-size:11pt;line-height:1.5}
}