/* ==========================================================================
   Rádio Torre Forte — folha de estilo
   Paleta extraída do brasão oficial da Igreja Pentecostal Torre Forte:
   azul royal #1f4f88 · azul profundo #0d3567 · azul noite #05152d
   prata #dddee1 · prata médio #acb6c2
   ========================================================================== */

:root{
  --noite:#03101f;
  --azul-900:#05152d;
  --azul-800:#0a2450;
  --azul-700:#0d3567;
  --azul-600:#1f4f88;
  --azul-500:#2f6fb5;
  --azul-claro:#7fb0e8;

  --prata:#dddee1;
  --prata-medio:#acb6c2;
  --prata-escuro:#7d8899;

  --linha:rgba(173,190,215,.14);
  --texto:#eef2f8;
  --texto-fraco:#a8b6cc;
  --texto-tenue:#72829c;
  --vivo:#e5484d;
  --no-ar:#3ddc84;

  --raio:18px;
  --max:1080px;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  background:var(--noite);
  color:var(--texto);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:"Fraunces","Georgia",serif;font-weight:600;line-height:1.2;margin:0}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:inherit}

/* ---------- fundo ---------- */
.fundo{position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:
    radial-gradient(125% 85% at 50% -12%, #1f4f88 0%, transparent 62%),
    linear-gradient(180deg,#0a2450 0%,#05152d 52%,#03101f 100%);
}
.brilho{position:absolute;border-radius:50%;filter:blur(90px)}
.brilho-1{width:620px;height:620px;top:-220px;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle,#4f8ed6 0%,transparent 70%);opacity:.30}
.brilho-2{width:460px;height:460px;bottom:-200px;right:-120px;
  background:radial-gradient(circle,#1f4f88 0%,transparent 70%);opacity:.40}

main{max-width:var(--max);margin:0 auto;padding:0 20px 40px}

/* ==========================================================================
   CAPA — a arte oficial sangrando de ponta a ponta, sem moldura.
   A base dissolve na página com máscara (não com uma cor chapada), assim
   ela combina com o fundo em qualquer tela.
   ========================================================================== */
.capa{position:relative;width:100%;line-height:0}
.capa-img{
  /* No celular a arte sangra de ponta a ponta. Em telas largas ela para de
     crescer: a arte é quadrada, e esticá-la ocuparia a tela inteira antes de
     o botão de ouvir aparecer. Sem moldura em nenhum dos casos — a base
     dissolve na página por máscara, então não existe borda inferior. */
  width:100%;max-width:520px;height:auto;display:block;margin:0 auto;
  -webkit-mask-image:linear-gradient(180deg,#000 80%,rgba(0,0,0,.5) 92%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 80%,rgba(0,0,0,.5) 92%,transparent 100%);
}
@media (max-width:700px){
  .capa-img{max-width:none}
}

/* ---------- botão instalar (flutuante) ---------- */
.btn-instalar{
  position:absolute;top:18px;right:18px;z-index:5;
  font-size:.78rem;font-weight:600;padding:8px 16px;border-radius:99px;
  border:1px solid rgba(172,182,194,.4);color:var(--prata);
  background:rgba(10,36,80,.6);backdrop-filter:blur(8px);
  transition:.2s;white-space:nowrap;
}
.btn-instalar:hover{background:rgba(31,79,136,.8);border-color:var(--prata-medio)}

/* ==========================================================================
   A RÁDIO — a estação é a protagonista, não a faixa
   ========================================================================== */

.radio{
  text-align:center;
  padding:4px 20px 40px;
  display:flex;flex-direction:column;align-items:center;
}

/* visível só para leitores de tela */
.so-leitor-de-tela{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- estado: no ar / ao vivo / ouvintes ---------- */
.estado{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:22px 0 26px;flex-wrap:wrap;min-height:30px;
}
.estado-selo{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 14px;border-radius:99px;
  background:rgba(61,220,132,.12);color:#8ef0bb;
  border:1px solid rgba(61,220,132,.28);
}
.estado-ponto{
  width:7px;height:7px;border-radius:50%;background:var(--no-ar);
  box-shadow:0 0 0 0 rgba(61,220,132,.55);animation:pulso 2.4s infinite;
}
@keyframes pulso{
  0%  {box-shadow:0 0 0 0 rgba(61,220,132,.5)}
  70% {box-shadow:0 0 0 8px rgba(61,220,132,0)}
  100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}
}
/* culto ao vivo */
.ao-vivo .estado-selo{background:rgba(229,72,77,.16);color:#ff9a9d;border-color:rgba(229,72,77,.4)}
.ao-vivo .estado-ponto{background:var(--vivo);animation:piscar 1.3s infinite}
@keyframes piscar{50%{opacity:.2}}
/* fora do ar */
.offline .estado-selo{background:rgba(173,190,215,.08);color:var(--texto-tenue);border-color:var(--linha)}
.offline .estado-ponto{background:var(--texto-tenue);animation:none;box-shadow:none}

/* barras de equalizador — só se mexem quando você está ouvindo */
.eq{display:inline-flex;align-items:flex-end;gap:3px;height:18px}
.eq i{
  width:3px;height:4px;border-radius:2px;
  background:linear-gradient(180deg,var(--azul-claro),var(--azul-600));
  opacity:.35;transition:opacity .3s;
}
.tocando .eq i{opacity:1;animation:dancar .9s ease-in-out infinite}
.tocando .eq i:nth-child(1){animation-delay:0s;   animation-duration:.7s}
.tocando .eq i:nth-child(2){animation-delay:.15s; animation-duration:1.1s}
.tocando .eq i:nth-child(3){animation-delay:.3s;  animation-duration:.85s}
.tocando .eq i:nth-child(4){animation-delay:.1s;  animation-duration:1.25s}
.tocando .eq i:nth-child(5){animation-delay:.35s; animation-duration:.95s}
@keyframes dancar{0%,100%{height:4px}50%{height:17px}}

.ouvintes{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.78rem;color:var(--texto-fraco);
}
.ouvintes::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--prata-escuro);
}

/* ---------- botão principal ---------- */
.btn-ouvir{
  display:inline-flex;align-items:center;gap:14px;
  padding:15px 34px 15px 20px;border-radius:99px;
  background:linear-gradient(145deg,#ffffff 0%,#dddee1 40%,#acb6c2 72%,#8b96a5 100%);
  color:var(--azul-900);
  font-size:1.02rem;font-weight:700;letter-spacing:.01em;
  box-shadow:0 16px 40px -12px rgba(127,176,232,.6),
             0 0 0 1px rgba(255,255,255,.4) inset;
  transition:transform .18s, box-shadow .18s;
}
.btn-ouvir:hover{transform:translateY(-2px);
  box-shadow:0 20px 46px -12px rgba(127,176,232,.8),0 0 0 1px rgba(255,255,255,.55) inset}
.btn-ouvir:active{transform:translateY(0) scale(.98)}

.btn-icone{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--azul-800);color:var(--prata);
  display:grid;place-items:center;
}
.btn-icone svg{width:17px;height:17px;fill:currentColor;grid-area:1/1}
.btn-icone .icone-play{margin-left:2px}
.btn-icone .icone-stop{display:none}
.tocando .btn-icone .icone-play{display:none}
.tocando .btn-icone .icone-stop{display:block}
.btn-girando{
  grid-area:1/1;width:17px;height:17px;border-radius:50%;display:none;
  border:2px solid rgba(221,222,225,.25);border-top-color:var(--prata);
  animation:girar .8s linear infinite;
}
.carregando .btn-icone .icone-play,
.carregando .btn-icone .icone-stop{display:none}
.carregando .btn-girando{display:block}
@keyframes girar{to{transform:rotate(360deg)}}

/* ---------- volume: discreto, aparece ao tocar ---------- */
.volume{
  display:flex;align-items:center;gap:10px;
  margin-top:22px;width:200px;
  opacity:.45;transition:opacity .3s;
}
.volume:hover,.tocando .volume{opacity:1}
.btn-mudo{width:30px;height:30px;display:grid;place-items:center;color:var(--texto-fraco);
  border-radius:8px;transition:.2s;flex:none}
.btn-mudo:hover{color:var(--texto);background:rgba(173,190,215,.09)}
.btn-mudo svg{width:18px;height:18px;fill:currentColor}
.mudo .btn-mudo{color:var(--texto-tenue);opacity:.55}

.volume-range{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:99px;
  background:rgba(173,190,215,.2);outline:none;cursor:pointer;
}
.volume-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:linear-gradient(145deg,#fff,#acb6c2);box-shadow:0 2px 8px rgba(0,0,0,.55);
}
.volume-range::-moz-range-thumb{
  width:13px;height:13px;border:0;border-radius:50%;
  background:linear-gradient(145deg,#fff,#acb6c2);
}

.status{margin:16px 0 0;min-height:1.2em;font-size:.8rem;color:var(--texto-tenue)}
.status.erro{color:#ff9a9d}

/* ---------- faixa "tocando agora": informação, não controle ---------- */
.agora{
  display:flex;align-items:center;gap:14px;text-align:left;
  margin-top:34px;padding:12px 22px 12px 12px;
  background:rgba(120,160,215,.07);
  border:1px solid var(--linha);border-radius:99px;
  max-width:100%;min-width:0;
}
.agora-capa{
  width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--azul-700);
  box-shadow:0 0 0 1px rgba(173,190,215,.16);
}
.tocando .agora-capa{animation:rodar 14s linear infinite}
@keyframes rodar{to{transform:rotate(360deg)}}
.agora-texto{min-width:0}
.agora-rotulo{
  margin:0;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--azul-claro);font-weight:700;
}
.agora-titulo{
  margin:2px 0 0;font-size:.95rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46ch;
}
.agora-artista{
  margin:0;font-size:.8rem;color:var(--texto-tenue);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46ch;
}

/* ---------- versículo ---------- */
.versiculo{text-align:center;padding:26px 10px 44px}
.versiculo blockquote{margin:0;max-width:640px;margin-inline:auto}
.versiculo p{
  font-family:"Fraunces",serif;font-size:clamp(1.05rem,2.2vw,1.35rem);
  font-style:italic;color:#dee6f4;margin:0 0 10px;line-height:1.5;
}
.versiculo cite{font-style:normal;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--azul-claro)}

/* ---------- blocos ---------- */
.bloco{
  padding:26px 28px;margin-bottom:22px;
  background:rgba(120,160,215,.055);
  border:1px solid var(--linha);border-radius:var(--raio);
}
.bloco-cabecalho{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:18px;flex-wrap:wrap}
.bloco-cabecalho h2{font-size:1.15rem}
.bloco-dia{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-tenue)}

/* grade de programação */
.grade{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.grade li{
  display:grid;grid-template-columns:118px 1fr auto;gap:16px;align-items:center;
  padding:13px 14px;border-radius:12px;transition:background .2s;
}
.grade li + li{border-top:1px solid rgba(173,190,215,.08)}
.grade li:hover{background:rgba(173,190,215,.05)}
.grade-hora{font-size:.82rem;color:var(--texto-fraco);font-variant-numeric:tabular-nums;white-space:nowrap}
.grade-nome{font-weight:600;font-size:.95rem}
.grade-desc{display:block;font-weight:400;font-size:.8rem;color:var(--texto-tenue);margin-top:2px}
.grade li.agora-no-ar{background:linear-gradient(90deg,rgba(47,111,181,.28),transparent);
  box-shadow:inset 3px 0 0 var(--azul-claro)}
.grade li.agora-no-ar .grade-hora{color:var(--azul-claro)}
.etiqueta{
  font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border-radius:99px;white-space:nowrap;
  background:rgba(127,176,232,.18);color:#bcd6f5;
}
.etiqueta.vivo{background:rgba(229,72,77,.2);color:#ff9a9d}

/* histórico */
.historico{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.historico li{display:flex;align-items:center;gap:13px}
.historico img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;
  background:var(--azul-700);box-shadow:0 0 0 1px rgba(173,190,215,.12)}
.historico-info{min-width:0}
.historico-titulo{font-size:.9rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.historico-artista{font-size:.78rem;color:var(--texto-tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* contato */
.contato-texto{margin:0 0 18px;color:var(--texto-fraco);font-size:.92rem;max-width:56ch}
.redes{display:flex;flex-wrap:wrap;gap:10px}
.rede{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:99px;font-size:.86rem;font-weight:500;
  border:1px solid var(--linha);background:rgba(173,190,215,.06);
  text-decoration:none;transition:.2s;
}
.rede:hover{background:rgba(173,190,215,.14);border-color:rgba(173,190,215,.3);transform:translateY(-1px)}
.rede svg{width:17px;height:17px;fill:currentColor}
.rede-whatsapp:hover{border-color:rgba(37,211,102,.5)}
.rede-instagram:hover{border-color:rgba(225,48,108,.5)}
.rede-youtube:hover{border-color:rgba(255,0,0,.5)}

/* rodapé */
.rodape{
  text-align:center;padding:34px 20px calc(32px + env(safe-area-inset-bottom));
  border-top:1px solid var(--linha);color:var(--texto-tenue);
}
.rodape p{margin:0}
.rodape-nome{font-family:"Fraunces",serif;color:var(--texto-fraco);font-size:1rem}
.rodape-lema{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--azul-claro);margin-top:5px !important}
.rodape-fino{font-size:.76rem;margin-top:12px !important;opacity:.7}

/* ---------- responsivo ---------- */
@media (max-width:760px){
  main{padding:0 16px 30px}
  .radio{padding:2px 4px 30px}
  .estado{gap:10px;margin:20px 0 26px}
  .agora{padding:10px 18px 10px 10px;gap:11px;width:100%}
  .agora-capa{width:48px;height:48px}
  .agora-titulo,.agora-artista{max-width:calc(100vw - 130px)}
  .grade li{grid-template-columns:1fr auto;gap:8px 12px}
  .grade-hora{grid-column:1/-1;order:-1;font-size:.75rem;color:var(--azul-claro)}
  .bloco{padding:22px 18px}
  .btn-instalar{top:14px;right:14px;padding:7px 13px;font-size:.74rem}
}
@media (max-width:400px){
  .btn-ouvir{padding:13px 26px 13px 16px;font-size:.95rem}
}

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