/* ==========================================================
   ESCOLA DE LIDERES LIBERTAR — TEMA REAL v1
   Tema unico. Marinho profundo, ouro e tipografia serifada.
   Substitui o alternador de tres temas.

   NAO TOCA: player ao vivo, leitor de apostila, modais de
   video e recados (superficies de midia seguem escuras).
   ========================================================== */
:root {
  --r-fundo: #05070f;
  --r-carta: #0b1220;
  --r-carta-2: #0e1728;
  --r-fio: rgba(255, 255, 255, 0.07);
  --r-fio-ouro: rgba(232, 184, 75, 0.3);
  --r-ouro: #e8b84b;
  --r-ouro-claro: #f3d07e;
  --r-azul: #2d6ff7;
  --r-azul-fundo: rgba(45, 111, 247, 0.14);
  --r-texto: #edf1f8;
  --r-apagado: #94a2bc;
  --r-serif: "Playfair Display", Georgia, serif;
}

body {
  background:
    radial-gradient(120% 60% at 50% 0%, #0a1226 0%, transparent 58%),
    linear-gradient(180deg, #05070f 0%, #070c18 100%);
  background-attachment: fixed;
  color: var(--r-texto);
  padding-bottom: 88px;
}

/* ---------- cabecalho ---------- */
.brand-name,
.hello h1,
.section-heading,
.panel h2,
.recorded-head h2,
.next-card b {
  font-family: var(--r-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}

.brand-name {
  font-size: clamp(1.05rem, 4vw, 1.5rem);
  line-height: 1.2;
}

.top-actions .icon-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--r-fio);
  background: rgba(255, 255, 255, 0.04);
  color: var(--r-texto);
}

.top-actions .icon-btn:hover {
  border-color: var(--r-fio-ouro);
  background: rgba(232, 184, 75, 0.08);
}

/* ---------- card do curso ---------- */
.hero {
  border: 1px solid var(--r-fio);
  border-radius: 22px;
  background:
    radial-gradient(120% 90% at 88% 20%, rgba(45, 111, 247, 0.2), transparent 62%),
    linear-gradient(160deg, #0a1326 0%, #070d1b 60%, #0a1223 100%);
}

.hero .eyebrow,
.hero-eyebrow {
  color: var(--r-ouro);
}

.hero-box {
  border: 1px solid var(--r-fio);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.live-btn {
  border: 1px solid var(--r-ouro);
  border-radius: 12px;
  background: transparent;
  color: var(--r-ouro-claro);
  box-shadow: none;
}

.live-btn:hover {
  background: rgba(232, 184, 75, 0.1);
}

.next-note {
  color: var(--r-apagado);
}

/* ---------- superficies ---------- */
.panel,
.quick,
.next-card,
.material-item,
.step,
.recorded-lessons,
.journey-item {
  border: 1px solid var(--r-fio);
  border-radius: 18px;
  background: var(--r-carta);
  box-shadow: none;
}

.recorded-lessons {
  border-radius: 24px;
}

.quick:hover,
.material-item:hover,
.journey-item:hover {
  border-color: var(--r-fio-ouro);
}

.quick small,
.material-item small,
.next-card p,
.support p,
.how p,
.recorded-head p,
.journey-item small,
.info-row span {
  color: var(--r-apagado);
}

.info-row {
  border-top-color: var(--r-fio);
}

.footer-note {
  border: 1px dashed var(--r-fio-ouro);
  border-radius: 14px;
  background: transparent;
  color: var(--r-apagado);
}

/* ---------- aulas gravadas ---------- */
.recorded-card {
  grid-template-columns: 84px 1fr auto;
  border: 1px solid var(--r-fio);
  border-radius: 18px;
  background: var(--r-carta-2);
}

.recorded-card::before {
  content: "";
  width: 84px;
  aspect-ratio: 1;
  border: 1px solid var(--r-fio);
  border-radius: 12px;
  background:
    url("/assets/logo-libertar.png") center / 60% no-repeat,
    radial-gradient(90% 80% at 50% 20%, #12203a, #080e1a);
}

@media (max-width: 620px) {
  .recorded-card {
    grid-template-columns: 64px 1fr;
  }

  .recorded-card::before {
    width: 64px;
  }

  .recorded-card > button,
  .recorded-card > a {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.recorded-watch {
  border: 0;
  border-radius: 12px;
  padding: 13px 18px;
  background: linear-gradient(180deg, #3b7bff, #1f5adb);
  color: #fff;
}

.recorded-refresh,
.recorded-close {
  border: 1px solid rgba(45, 111, 247, 0.5);
  border-radius: 12px;
  background: transparent;
  color: #7fa9ff;
}

/* ---------- barra inferior ---------- */
.ell-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--r-fio);
  background: rgba(5, 7, 15, 0.94);
  backdrop-filter: blur(14px);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
}

.ell-nav a {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 6px 2px;
  color: var(--r-apagado);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
}

.ell-nav a.ativo {
  color: #7fa9ff;
}

.ell-nav svg {
  width: 23px;
  height: 23px;
}

@media (min-width: 920px) {
  .ell-nav {
    display: none;
  }

  body {
    padding-bottom: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ----------------------------------------------------------
   RESPIRO DO PASTOR
   As caixas Inicio/Horario/Status paravam em cima da foto.
   Aqui elas encolhem e a foto ancora na direita, de modo que
   a caixa sempre termine antes do braco levantado dele.
   Para ajustar, mexa so nestes dois numeros por faixa.
   ---------------------------------------------------------- */
.hero-info {
  width: min(50%, 290px);
}

.pastor {
  right: 0;
  width: min(46%, 340px);
  max-height: 88%;
}

@media (max-width: 400px) {
  .hero-info {
    width: min(52%, 190px);
  }

  .pastor {
    width: min(44%, 165px);
  }

  .hero-box {
    padding: 11px 13px;
  }

  .hero-box strong {
    font-size: 0.97rem;
  }
}

@media (min-width: 901px) {
  .hero-info {
    width: min(52%, 380px);
  }

  .pastor {
    width: min(40%, 430px);
  }
}

/* ----------------------------------------------------------
   SUPORTE E SAIR COM NOME
   Deixam de ser dois circulos mudos: viram controles com fio
   dourado, icone e rotulo em caixa alta.
   ---------------------------------------------------------- */
.top-actions .icon-btn.ell-rotulado {
  width: auto;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--r-fio-ouro);
  border-radius: 13px;
  padding: 0 18px;
  background: linear-gradient(180deg, rgba(232, 184, 75, 0.07), rgba(232, 184, 75, 0.02));
  color: var(--r-ouro-claro);
}

.top-actions .icon-btn.ell-rotulado:hover {
  border-color: var(--r-ouro);
  background: rgba(232, 184, 75, 0.13);
}

.top-actions .icon-btn.ell-rotulado svg {
  width: 19px;
  height: 19px;
  flex: none;
}

.ell-rotulo {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  line-height: 1;
}

@media (max-width: 700px) {
  .top {
    flex-wrap: wrap;
    gap: 14px;
  }

  .top-actions {
    width: 100%;
    gap: 10px;
  }

  .top-actions .icon-btn.ell-rotulado {
    flex: 1;
  }
}

/* ----------------------------------------------------------
   TRANSMISSAO: DE CARTAZ A FAIXA DE STATUS
   O card competia com o botao do topo. Agora e uma faixa
   discreta. O botao continua existindo porque e o caminho de
   volta quando o aluno fecha o player.
   ---------------------------------------------------------- */
.live-schedule {
  gap: 14px;
  border: 1px solid var(--r-fio);
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--r-carta);
}

.live-schedule-mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  color: var(--r-ouro);
  background: rgba(232, 184, 75, 0.1);
  font-size: 21px;
}

.live-schedule-eyebrow {
  color: var(--r-apagado);
  font-size: 10px;
  letter-spacing: 0.2em;
}

.live-schedule h2 {
  margin: 3px 0 2px;
  font-family: var(--r-serif);
  font-size: 17px;
  font-weight: 700;
}

.live-schedule p:not(.live-schedule-eyebrow) {
  margin: 0 0 10px;
  color: var(--r-apagado);
  font-size: 13.5px;
}

#checkLiveButton {
  border: 1px solid var(--r-fio-ouro);
  border-radius: 10px;
  padding: 9px 15px;
  background: transparent;
  color: var(--r-ouro-claro);
  font-size: 13px;
}

#checkLiveButton:hover {
  background: rgba(232, 184, 75, 0.1);
}

/* ----------------------------------------------------------
   RODAPE DE SUPORTE EM DESTAQUE
   ---------------------------------------------------------- */
.footer-note {
  position: relative;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  border: 1px solid var(--r-fio-ouro);
  border-radius: 18px;
  padding: 22px 22px 22px 26px;
  background:
    linear-gradient(120deg, rgba(232, 184, 75, 0.12), transparent 62%),
    var(--r-carta);
  color: var(--r-texto);
  font-size: 15.5px;
  line-height: 1.55;
}

.footer-note::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--r-ouro), rgba(232, 184, 75, 0.15));
}

.footer-note svg {
  color: var(--r-ouro);
  flex: none;
}

.footer-note strong,
.footer-note b {
  color: var(--r-ouro-claro);
}

.footer-note a {
  color: var(--r-ouro-claro);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--r-fio-ouro);
}

/* card da transmissao escondido enquanto so repete o botao do topo */
.live-schedule.ell-oculto {
  display: none;
}

/* ----------------------------------------------------------
   BOTAO DA AULA AO VIVO
   Ouro solido com texto escuro: a chamada principal da tela.
   A largura acompanha as caixas de informacao, entao ele nunca
   passa por cima do Pastor Ruy.
   ---------------------------------------------------------- */
.live-btn {
  width: min(62%, 350px);
  border: 1px solid #f6da95;
  border-radius: 13px;
  padding: 16px 20px;
  background: linear-gradient(180deg, #f6da95 0%, #e8b84b 52%, #d9a02f 100%);
  color: #1b1305;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow:
    0 16px 34px -14px rgba(232, 184, 75, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.16s, box-shadow 0.16s, filter 0.16s;
}

.live-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow:
    0 22px 42px -14px rgba(232, 184, 75, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.live-btn svg,
.live-btn path,
.live-btn circle {
  color: #1b1305;
  stroke: currentColor;
}

.next-note {
  max-width: min(62%, 350px);
}

@media (max-width: 400px) {
  .live-btn {
    width: min(74%, 268px);
    padding: 15px 12px;
    font-size: 0.86rem;
    letter-spacing: 0.04em;
  }

  .next-note {
    max-width: min(74%, 268px);
    font-size: 0.82rem;
  }
}

@media (min-width: 901px) {
  .live-btn,
  .next-note {
    width: min(56%, 430px);
    max-width: min(56%, 430px);
  }
}

/* ----------------------------------------------------------
   AVISO DE SESSAO ENCERRADA
   Aparece quando a conta e aberta em outro aparelho.
   ---------------------------------------------------------- */
.ell-sessao-fim {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 5, 12, 0.92);
  backdrop-filter: blur(6px);
}

.ell-sessao-caixa {
  max-width: 380px;
  border: 1px solid var(--r-fio-ouro);
  border-radius: 20px;
  padding: 30px 26px;
  background: var(--r-carta);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  text-align: center;
}

.ell-sessao-caixa svg {
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  color: var(--r-ouro);
}

.ell-sessao-caixa h2 {
  margin: 0 0 10px;
  color: var(--r-texto);
  font-family: var(--r-serif);
  font-size: 24px;
  font-weight: 700;
}

.ell-sessao-caixa p {
  margin: 0 0 22px;
  color: var(--r-apagado);
  font-size: 15px;
  line-height: 1.55;
}

.ell-sessao-caixa button {
  width: 100%;
  border: 1px solid #f6da95;
  border-radius: 13px;
  padding: 15px;
  cursor: pointer;
  background: linear-gradient(180deg, #f6da95, #e8b84b 52%, #d9a02f);
  color: #1b1305;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.05em;
}