/*
  Design system da plataforma: as classes compartilhadas entre as páginas.
  Para usar numa página, basta:
    <link rel="stylesheet" href="/design-system.css">
  O arquivo já traz a Montserrat nos pesos que usa (300, 400, 600 e 700).
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

/* ---------- Cores ----------
  Paleta nomeada da marca. Use a variável, e não o hexadecimal, em regra nova. */
:root{
  --rosa-700-main:#F361AC;
}

/* ---------- Fundo da página ----------
  .background-color — o cinza claro de fundo das páginas. Vai no <body>.
  As páginas de fundo azul (vitrine e afins) não usam. */
:root{
  --background-color:#F8F8F8;
}
.background-color{background-color:var(--background-color);}
/* Na impressão o fundo volta a ser branco, como as páginas já pediam. */
@media print{.background-color{background-color:#FFFFFF;}}

/* ---------- Espaçamento da página ----------
  Padrão: 32px entre o título da página (ou o subtítulo, quando houver) e o
  início do conteúdo. Entre título e subtítulo, 8px. */
:root{
  --page-title-gap:32px;
}

/* ---------- Botões ----------

  .btn-primary-dark   — cheio em bege, para a ação principal sobre fundo escuro.
  .btn-secondary-dark — vazado em bege, para a ação secundária sobre fundo escuro.

  As duas têm a mesma borda de 1.5px (no primário ela é da cor do fundo), para
  que fiquem com a mesma altura quando aparecem lado a lado.
*/
:root{
  --btn-bege:#E5D3A6;
  --btn-bege-hover:#CEBE95;
  --btn-bege-secundario-hover:#F2E9D3;
  --btn-tinta:#1D2151;
  --btn-sombra:0 2px 8px -2px rgba(160,148,116,0.45);
}

.btn-primary-dark,
.btn-secondary-dark{
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;
  border:1.5px solid var(--btn-bege);border-radius:7px;padding:11px 16px;
  cursor:pointer;
  /* O ✓ vem de outra fonte, mais alta que a Montserrat: sem altura de linha
     fixa, o botão muda de altura quando o rótulo troca. */
  line-height:1.25;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-primary-dark[hidden],
.btn-secondary-dark[hidden]{display:none;}
/* Desabilitado: apagado, sem reagir ao mouse. */
.btn-primary-dark:disabled,
.btn-secondary-dark:disabled{opacity:0.4;cursor:not-allowed;}
.btn-primary-dark:disabled:hover{background:var(--btn-bege);border-color:var(--btn-bege);box-shadow:none;}
.btn-secondary-dark:disabled:hover{background:transparent;color:var(--btn-bege);box-shadow:none;}

.btn-primary-dark{background:var(--btn-bege);color:var(--btn-tinta);}
.btn-primary-dark:hover,
.btn-primary-dark:focus-visible{
  background:var(--btn-bege-hover);border-color:var(--btn-bege-hover);
  box-shadow:var(--btn-sombra);
}

.btn-secondary-dark{background:transparent;color:var(--btn-bege);}
.btn-secondary-dark:hover,
.btn-secondary-dark:focus-visible{
  background:var(--btn-bege-secundario-hover);
  /* Mesma tinta do rótulo do primário: o bege do rótulo sumia no fundo bege. */
  color:var(--btn-tinta);
  box-shadow:var(--btn-sombra);
}

/* .btn-secondary-light — vazado em azul, para ações secundárias sobre fundo
   claro (filtros, navegação entre ciclos). No hover só o fundo muda: contorno e
   rótulo ficam onde estão, então o botão não "pula". */
:root{
  --btn-claro-linha:#1D2151;
  --btn-claro-tinta:#1D2151;
  --btn-claro-fundo:#FFFFFF;
  --btn-claro-fundo-hover:#E8E9EE;
}
.btn-secondary-light{
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:12px;letter-spacing:0.03em;
  background:var(--btn-claro-fundo);color:var(--btn-claro-tinta);
  border:1.5px solid var(--btn-claro-linha);border-radius:6px;padding:9px 14px;
  cursor:pointer;transition:all .15s ease;
}
.btn-secondary-light:hover,
.btn-secondary-light:focus-visible{background:var(--btn-claro-fundo-hover);}
.btn-secondary-light[hidden]{display:none;}

/* ---------- Tipografia ----------

  .box-title-light      — título de card claro (o "Vídeos" da lista de aulas).
  .eyebrow-light        — rótulo curto acima de um título ("AULA 1 DE 20").
  .progress-label-light — contagem de progresso ("0 de 20 assistidos").
*/
:root{
  --txt-tinta:#16204F;
  --txt-tinta-2:#5B6488;
  --txt-ouro:#D8C7A9;
}

.box-title-light{
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:normal;color:var(--txt-tinta);
}

.eyebrow-light{
  font-family:'Montserrat',sans-serif;font-weight:300;font-size:11px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--txt-ouro);
}

.progress-label-light{
  font-family:'Montserrat',sans-serif;font-weight:400;font-size:11px;
  color:var(--txt-tinta-2);white-space:nowrap;
}

/* ---------- Links de card ----------
  .card-text-link — a chamada no pé de um card ("Abrir →", "Assistir →",
  "Acessar curso →"): texto em maiúsculas com a seta, na cor rosa da marca.
  A distância até o texto de cima fica com cada página, porque depende do card.
    <span class="card-text-link">Abrir <svg viewBox="0 0 24 24"><path d="M5 12h13M13 6l6 6-6 6"/></svg></span>
*/
.card-text-link{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--rosa-700-main);
}
.card-text-link svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;fill:none;flex-shrink:0;}

/* ---------- Formulários ----------
  .input-label-dark — rótulo de campo sobre fundo escuro. Mesma fonte, tamanho
  e peso do .box-title-light (Montserrat bold 14px), em branco. */
.input-label-dark{
  display:block;font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:normal;text-transform:none;color:#FFFFFF;
}

/* ---------- Lista de vídeos ----------

  .video-list-light — lista de aulas sobre card claro. Estrutura:

    <div class="video-list-light">
      <button class="vl-item selected">
        <span class="vl-num">1</span>
        <span class="vl-name">Boas-vindas</span>
        <span class="vl-duration">4:12</span>
      </button>
      <button class="vl-item">…</button>
    </div>

  O item em curso leva .selected; os demais ficam no estado default.
*/
:root{
  --vl-tinta:#1D2151;
  --vl-linha:#DDDEE5;
  --vl-rosa:#F361AC;
  --vl-claro:#FFFFFF;
}

.video-list-light .vl-item{
  display:grid;grid-template-columns:30px 1fr auto;gap:11px;align-items:center;
  width:100%;text-align:left;margin-bottom:3px;padding:11px 10px;
  background:transparent;border:none;border-radius:9px;cursor:pointer;
  font-family:'Montserrat',sans-serif;
  transition:background-color .15s ease;
}
.video-list-light .vl-item:hover{background:var(--vl-linha);}

.video-list-light .vl-num{
  width:24px;height:24px;border-radius:50%;box-sizing:border-box;
  border:1.5px solid var(--vl-linha);
  display:flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;font-weight:400;font-size:11px;color:var(--vl-tinta);
}
.video-list-light .vl-name{
  font-weight:400;font-size:12.5px;line-height:1.35;color:var(--vl-tinta);
}
.video-list-light .vl-duration{
  font-weight:300;font-size:12px;color:var(--vl-tinta);
}
.video-list-light .vl-duration:empty{display:none;}
/* Nome e tempo mudam de cor junto com o fundo, para não piscarem sem contraste
   enquanto o fundo ainda está mudando. */
.video-list-light .vl-name,
.video-list-light .vl-duration{transition:color .15s ease;}

/* Selected: fundo cheio no azul; nome e tempo em branco para não sumirem nele. */
.video-list-light .vl-item.selected,
.video-list-light .vl-item.selected:hover{background:var(--vl-tinta);}
.video-list-light .vl-item.selected .vl-num{
  background:var(--vl-rosa);border-color:transparent;font-weight:600;
}
.video-list-light .vl-item.selected .vl-name,
.video-list-light .vl-item.selected .vl-duration{color:var(--vl-claro);}

/* ---------- Bordas ---------- */
:root{
  --border-primary-light:#B0B1C2;
}
.border-primary-light{border-color:var(--border-primary-light);}

/* ---------- Fases e ciclos ----------

  .phase-light — card de fase (Plano de estudos) e de escolha no TAF
  (Masculino/Feminino, Treino 1/2/3). Estados: default, hover, .selected e
  .disabled (fase ainda não liberada).
    <button class="phase-light selected">
      <span class="phase-icon"><svg>…</svg></span>
      <span class="phase-name">Pré edital <span class="phase-sub">…</span></span>
    </button>

  .cycle-light — card de ciclo, com a contagem e a barra de progresso.
    <button class="cycle-light selected">
      <div class="cycle-name">Ciclo 1</div>
      <div class="cycle-progress">3/7</div>
      <div class="cycle-bar"><div class="cycle-fill" style="width:43%"></div></div>
    </button>

  O card aberto leva .selected; os demais ficam no estado default.
*/
:root{
  --pc-tinta:#16204F;
  --pc-tinta-2:#5B6488;
  --pc-escuro:#1D2151;
  --pc-rosa:#F361AC;
  --pc-claro:#FFFFFF;
  --pc-linha:rgba(22,32,79,0.12);
  --pc-destaque:#2B3E8C;
  --pc-realce:rgba(43,62,140,0.07);
  --pc-sombra:0 8px 24px rgba(25,28,69,0.18);
  --pc-ciclo-fundo:#F5F5F7;
}

/* Fase */
.phase-light{
  display:flex;align-items:center;gap:13px;text-align:left;cursor:pointer;
  background:var(--pc-claro);border:1.5px solid var(--pc-linha);border-radius:12px;
  padding:16px 18px;color:var(--pc-tinta);font-family:'Montserrat',sans-serif;
  transition:all .15s ease;
}
.phase-light:hover{border-color:var(--pc-destaque);}
.phase-light .phase-icon{
  width:40px;height:40px;border-radius:11px;background:var(--pc-realce);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.phase-light .phase-icon svg{width:20px;height:20px;stroke:var(--pc-destaque);stroke-width:1.8;fill:none;}
.phase-light .phase-name{font-size:14px;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;line-height:1.15;}
.phase-light .phase-sub{
  display:block;margin-top:3px;font-size:11px;color:var(--pc-tinta-2);
  letter-spacing:0.03em;text-transform:none;font-weight:400;
}
.phase-light.selected{
  background:var(--pc-escuro);border-color:transparent;box-shadow:var(--pc-sombra);
}
.phase-light.selected .phase-icon{background:var(--pc-rosa);}
.phase-light.selected .phase-icon svg{stroke:var(--pc-claro);}
.phase-light.selected .phase-name,
.phase-light.selected .phase-sub{color:var(--pc-claro);}
/* Disabled: apagado, com contorno tracejado e sem reagir ao mouse. */
.phase-light.disabled{opacity:0.45;cursor:not-allowed;border-style:dashed;}
.phase-light.disabled:hover{border-color:var(--pc-linha);}
.phase-light.disabled .phase-icon svg{stroke:var(--pc-tinta-2);}

/* Ciclo */
.cycle-light{
  /* Sem contorno no default: a borda existe transparente para o card não mudar
     de tamanho quando o hover acende o contorno. */
  background:var(--pc-ciclo-fundo);border:1.5px solid transparent;border-radius:10px;
  padding:11px 8px 9px;cursor:pointer;text-align:center;position:relative;
  font-family:'Montserrat',sans-serif;color:var(--pc-tinta);
  transition:all .15s ease;
}
.cycle-light:hover{border-color:var(--pc-destaque);transform:translateY(-1px);}
.cycle-light .cycle-name{font-size:12px;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;}
.cycle-light .cycle-progress{font-family:'Montserrat',sans-serif;font-weight:400;font-size:10.5px;letter-spacing:1px;color:var(--pc-tinta-2);margin-top:3px;}
.cycle-light .cycle-bar{height:3px;background:var(--pc-linha);border-radius:2px;margin-top:6px;overflow:hidden;}
.cycle-light .cycle-fill{height:100%;background:var(--pc-rosa);border-radius:2px;transition:width .3s ease;}
.cycle-light.selected{
  background:var(--pc-escuro);border-color:transparent;
}
.cycle-light.selected .cycle-name,
.cycle-light.selected .cycle-progress{color:var(--pc-claro);}
/* Trilho da barra no card escuro: o padrão é translúcido e sumiria no fundo. */
.cycle-light.selected .cycle-bar{background:#FEEFF7;}

/* Criar ciclo — mesma caixa do .cycle-light, com o rótulo e o "+".
    <button class="cycle-create">
      <span class="cycle-name">Criar ciclo</span>
      <svg>…</svg>
    </button>
  Default: sem fundo, contorno contínuo na cor do hover do ciclo.
  Hover: ganha o fundo do ciclo no default e mantém o contorno. */
.cycle-create{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:100%;padding:11px 8px 9px;cursor:pointer;
  background:transparent;border:1.5px solid var(--pc-destaque);border-radius:10px;
  font-family:'Montserrat',sans-serif;color:var(--pc-tinta);
  transition:all .15s ease;
}
.cycle-create .cycle-name{font-size:12px;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;}
.cycle-create svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;}
.cycle-create:hover,
.cycle-create:focus-visible{background:var(--pc-ciclo-fundo);}

/* ---------- Tabelas ----------

  .table-card-light — a caixa que envolve uma tabela (ou um bloco da mesma
  família, como a semana e o simulado do TAF): fundo branco e contorno na
  cor de .border-primary-light. O título vai com .box-title-light.
  .table-light — a tabela em si.

    <div class="table-card-light">
      <h3 class="box-title-light">Tabela mestre</h3>
      <table class="table-light">…</table>
    </div>
*/
.table-card-light{
  background:#FFFFFF;color:var(--pc-tinta);
  border:1px solid var(--border-primary-light);border-radius:14px;padding:18px 20px;
}
.table-light{width:100%;border-collapse:collapse;font-size:12.5px;color:var(--pc-tinta);}
.table-light th{
  text-align:left;padding:9px 12px;font-size:10.5px;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--pc-tinta-2);border-bottom:1px solid var(--border-primary-light);
}
.table-light td{padding:11px 12px;border-bottom:1px solid var(--pc-linha);vertical-align:middle;}
.table-light tr:last-child td{border-bottom:0;}
.table-light tbody tr:hover{background:var(--pc-ciclo-fundo);}

/* ---------- Base compartilhada entre as páginas ----------
  Regras que estavam copiadas, iguais, em mais de uma página: o reset, o menu
  lateral, a barra do topo, os títulos de página, o player e a lista de aulas,
  as telas de acesso, o vídeo das ferramentas. Onde uma página difere, a
  diferença fica nela, por cima desta base. As cores vêm das variáveis de cada
  página (--surface, --lane, --gold...). */
*{box-sizing:border-box;}
html{overflow-y:scroll;scrollbar-gutter:stable;}
html,body{margin:0;padding:0;}
.auth-card{background:var(--surface);color:var(--lane);border:1px solid var(--border-soft);border-radius:16px;padding:24px;width:100%;max-width:500px;box-shadow:0 20px 60px rgba(0,0,0,0.45);}
.auth-brand{margin:0 0 26px;}
.auth-brand img{display:block;width:200px;max-width:100%;height:auto;margin:0 auto;}
.auth-title{font-size:16px;font-weight:700;color:#FFFFFF;text-align:center;}
.auth-sub{font-size:13px;color:var(--lane-dim);line-height:1.55;margin:0 0 22px;text-align:center;}
:where(.auth-card) label{display:block;font-size:10.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--lane-dim);margin-bottom:6px;}
:where(.auth-card) input{width:100%;background:rgba(255,255,255,0.4);color:var(--tinta-fundo);border:1.5px solid var(--border-soft);border-radius:8px;padding:12px 13px;font-size:14px;font-family:'Montserrat',sans-serif;}
:where(.auth-card) input:focus{outline:none;border-color:var(--gold);background:var(--bg);}
:where(.auth-card) input:not(:focus):not(:placeholder-shown){color:#FFFFFF;}
:where(.auth-card) button:disabled{opacity:0.6;cursor:progress;}
.msg{font-size:13px;line-height:1.5;border-radius:8px;padding:11px 13px;margin-bottom:16px;display:none;}
.msg.show{display:block;}
.msg.error{background:rgba(168,50,74,0.18);border:1px solid var(--route-red);color:#F6C9D2;}
.auth-foot{margin:20px 0 0;font-size:12.5px;color:var(--lane-dim);text-align:center;line-height:1.6;}
.auth-foot a{color:var(--rosa-700-main);text-decoration:none;font-weight:600;}
.auth-foot a:hover{text-decoration:underline;}
.hint{font-size:11.5px;color:var(--lane-dim);margin:0 0 16px;}
.auth-card .btn-primary-dark{display:block;width:100%;box-sizing:border-box;margin-top:8px;}
.hamburguer{width:40px;height:40px;flex-shrink:0;background:transparent;border:1.5px solid var(--border-soft);border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.hamburguer:hover{border-color:var(--gold);}
.hamburguer svg{width:19px;height:19px;stroke:var(--lane);stroke-width:2;fill:none;}
/* Nas páginas de fundo claro (body.background-color) o ícone claro sumia no
   cinza: lá ele fica no azul escuro, com o contorno da borda primária. A
   vitrine, de fundo azul, continua com o ícone claro de cima. */
.background-color .hamburguer{border-color:var(--border-primary-light);}
.background-color .hamburguer:hover{border-color:#2B3E8C;}
.background-color .hamburguer svg{stroke:#16204F;}
.marca{display:flex;align-items:center;gap:12px;}
.marca b{font-size:17px;letter-spacing:0.05em;}
.card:hover{border-color:var(--gold);transform:translateY(-4px);}
.card-arte{position:absolute;inset:0;}
.card-foto{position:absolute;inset:0;background-repeat:no-repeat;background-position:center top;background-size:cover;}
.card-veu{position:absolute;inset:0;}
.card-txt{position:relative;z-index:2;}
.card h2{margin:0;text-transform:uppercase;color:var(--gold);}
.card .sub{display:block;text-transform:uppercase;color:var(--lane);}
.card p{color:var(--lane-dim);}
.veu{position:fixed;inset:0;background:rgba(6,10,32,0.66);opacity:0;pointer-events:none;z-index:80;}
.veu.aberto{opacity:1;pointer-events:auto;}
.gaveta{position:fixed;top:0;left:0;bottom:0;width:290px;max-width:84vw;z-index:90;background:var(--surface);border-right:1px solid var(--gold);transform:translateX(-100%);transition:transform .24s ease;padding:22px 18px;display:flex;flex-direction:column;gap:6px;}
.gaveta.aberta{transform:translateX(0);}
.gaveta-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;}
.gaveta-topo b{font-size:16px;letter-spacing:0.05em;}
.gaveta-logo{display:block;width:150px;aspect-ratio:2172/724;height:auto;flex-shrink:0;}
.gaveta-fechar{background:transparent;border:1.5px solid var(--border-soft);border-radius:8px;width:34px;height:34px;color:var(--lane-dim);cursor:pointer;font-size:16px;}
.gaveta-fechar:hover{border-color:var(--gold);color:var(--gold);}
.gaveta a{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--lane);font-size:13.5px;font-weight:600;padding:13px 12px;border-radius:9px;}
.gaveta a:hover{background:var(--surface-3);color:var(--gold);}
.gaveta a svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none;flex-shrink:0;}
.gaveta a.ativo{background:var(--surface-2);color:var(--gold);}
.palco{display:grid;align-items:stretch;}
.player{background:var(--surface);color:var(--lane);border:1px solid var(--border-soft);border-radius:14px;overflow:hidden;}
.player-video{position:relative;aspect-ratio:16/9;background:#0a1030;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;}
/* Play rosa com a seta azul em todos os players, o mesmo par da aula em curso. */
.player-video .play{width:74px;height:74px;border-radius:50%;background:var(--rosa-700-main);display:flex;align-items:center;justify-content:center;}
.player-video .play svg{width:30px;height:30px;fill:#16204F;margin-left:4px;}
.player-video .nota{font-size:11px;color:var(--lane-dim);border:1px dashed var(--border-soft);border-radius:6px;padding:4px 10px;}
.player-info{padding:18px 20px 22px;}
.player-info .eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gold);letter-spacing:0.1em;}
.player-info h2{margin:8px 0 0;font-size:21px;line-height:1.25;}
.player-info p{margin:6px 0 0;font-size:13px;line-height:1.7;color:var(--lane-dim);}
.player-acoes{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
.lista{border-radius:14px;padding:16px;display:flex;flex-direction:column;}
.lista-topo{display:flex;align-items:baseline;justify-content:space-between;margin:2px 4px 12px;}
.pb-titulo{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;letter-spacing:normal;margin:0 0 16px;}
.lista-titulo{margin:0;}
.tab-assuntos{width:100%;border-collapse:collapse;font-size:12.5px;}
.tab-assuntos th{text-align:left;padding:14px 16px;font-size:11.5px;font-weight:700;line-height:1.35;vertical-align:bottom;}
.tab-assuntos td{padding:14px 16px;vertical-align:middle;line-height:1.45;}
.tab-assuntos td:first-child{border-left:0;}
.tab-assuntos tr:last-child td{border-bottom:0;}
.tab-assuntos th:nth-child(1){width:auto;}
.navbar{margin:0 auto;display:flex;align-items:center;gap:16px;max-width:1180px;padding:20px 26px 0;}
.titulo-pagina{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;}
.topbar{padding:14px 26px;display:flex;align-items:center;gap:14px;}
.topbar h1{font-size:16px;margin:0;letter-spacing:0.04em;text-transform:uppercase;}
.topbar .sub{font-size:11.5px;color:var(--lane-dim);margin-left:auto;}
.btn-marcar .rot-desfazer{display:none;}
.btn-marcar.feita:hover .rot-feito, .btn-marcar.feita:focus-visible .rot-feito{display:none;}
.btn-marcar.feita:hover .rot-desfazer, .btn-marcar.feita:focus-visible .rot-desfazer{display:inline;}
.lista-rolagem{flex:1 1 auto;min-height:0;max-height:min(58vh,540px);overflow-y:auto;margin:0 -4px;padding:0 4px;scrollbar-width:thin;}
/* Ao lado do player, o card da lista tem a altura do player e a lista rola por
   dentro até o fim do card. O contain:size faz o card não puxar a linha para
   baixo com as aulas todas; sem ele, vinte aulas esticariam o player junto. O
   teto de altura só vale com tudo empilhado, no celular. */
@media(min-width:901px){
  .palco > .lista{contain:size;}
  .palco > .lista .lista-rolagem{max-height:none;}
}
.lista-rolagem::-webkit-scrollbar{width:8px;}
.lista-rolagem::-webkit-scrollbar-thumb{border-radius:4px;}
.lista-rolagem::-webkit-scrollbar-track{background:transparent;}
.vl-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.video-list-light .vl-item.feita:not(.selected) .vl-num{background:var(--verde);border-color:var(--verde);color:#fff;}
.player-info p[hidden]{display:none;}
.lista-cta{display:block;text-align:center;text-decoration:none;margin:14px 4px 2px;background:var(--gold);color:var(--surface);font-weight:700;font-size:12.5px;letter-spacing:0.04em;text-transform:uppercase;border-radius:8px;padding:14px 16px;border:1.5px solid transparent;transition:border-color .15s ease;}
.lista-cta:hover{border-color:#FFFFFF;}
.lista-cta[hidden]{display:none;}
.cabecalho{display:flex;align-items:center;gap:14px;}
.titulo{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--tinta-fundo);margin:0;}
.veu-video{position:fixed;inset:0;background:rgba(6,10,32,0.8);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;}
.veu-video[hidden]{display:none;}
.pl-caixa{background:var(--surface);color:var(--lane);border:1px solid var(--border-soft);border-radius:16px;width:100%;overflow:hidden;}
.pl-cab{padding:16px 20px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;gap:14px;}
.pl-cab h2{margin:0;text-transform:uppercase;letter-spacing:0.04em;color:var(--gold);}
.pl-fechar{margin-left:auto;background:transparent;border:1.5px solid var(--border-soft);border-radius:8px;width:34px;height:34px;color:var(--lane-dim);cursor:pointer;font-size:17px;line-height:1;flex-shrink:0;}
.pl-fechar:hover{border-color:var(--gold);color:var(--gold);}
.pl-video{position:relative;aspect-ratio:16/9;background:#0a1030;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;}
.pl-video .play{width:74px;height:74px;border-radius:50%;background:var(--rosa-700-main);display:flex;align-items:center;justify-content:center;}
.pl-video .play svg{width:30px;height:30px;fill:#16204F;margin-left:4px;}
.pl-video .nota{font-size:11px;color:var(--lane-dim);border:1px dashed var(--border-soft);border-radius:6px;padding:4px 10px;}
.pl-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.titulo-secao{font-size:19px;margin:0 0 6px;text-transform:uppercase;letter-spacing:0.04em;color:var(--gold);}
@media(max-width:900px){
  /* :root na frente para ganhar da largura de colunas que cada página define
     para a tela larga: no celular o player e a lista sempre empilham. */
  :root .palco{grid-template-columns:1fr;}
}
@media(min-width:900px){
  .hamburguer,.gaveta-fechar,.veu{display:none !important;}
  .gaveta{transform:none;width:64px;overflow:hidden;white-space:nowrap;border-right:1px solid var(--border-soft);padding:18px 12px;}
  body.menu-anima .gaveta{transition:width .18s ease, border-color .18s ease, box-shadow .18s ease;}
  .gaveta:hover,.gaveta:focus-within{width:248px;border-right:1px solid var(--gold);box-shadow:14px 0 34px rgba(6,10,32,0.45);}
  .gaveta-topo{margin-bottom:28px;justify-content:flex-start;}
  .gaveta-topo b{opacity:0;}
  body.menu-anima .gaveta-topo b{transition:opacity .14s ease;}
  .gaveta:hover .gaveta-topo b,.gaveta:focus-within .gaveta-topo b{opacity:1;}
  .gaveta a{padding:13px 10px;gap:14px;}
  .gaveta a svg{width:19px;height:19px;margin-left:1px;}
  .gaveta .rot{opacity:0;}
  body.menu-anima .gaveta .rot{transition:opacity .14s ease;}
  .gaveta:hover .rot,.gaveta:focus-within .rot{opacity:1;}
}