/* =========================================================
   CONFIGURAÇÕES GERAIS DO SITE
   Catedral da Família
========================================================= */

/* =========================================================
   CORES PRINCIPAIS
========================================================= */

:root{

  /* cor principal do site */
  --cor-primaria: #CAA85C;

  /* fundo principal */
  --cor-fundo: #0B0F14;

  /* fundo dos cards */
  --cor-card: #121821;

  /* bordas suaves */
  --cor-borda: #1F2733;

  /* texto principal */
  --cor-texto: #FFFFFF;

  /* texto secundário */
  --cor-texto-suave: #B8B8B8;

  /* botão */
  --cor-botao: #CAA85C;

  /* botão hover */
  --cor-botao-hover: #D8B873;

}


/* =========================================================
   FONTES DO SITE
========================================================= */

body{
  font-family: 'Inter', sans-serif;
  color: var(--cor-texto);
}


/* títulos */

h1,h2,h3{
  font-family: 'Playfair Display', serif;
}

/* =========================================================
   BOTÕES
========================================================= */

.btn,
button{
  background: var(--cor-botao);
  border: none;
  color: #000000;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn:hover,
button:hover{
  background: var(--cor-botao-hover);
}


/* =========================================================
   CARDS
========================================================= */

.card{
  background: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
}


/* =========================================================
   ÍCONES (Lucide)
========================================================= */

.lucide{
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
  vertical-align: -3px;
}

.icon-gold{
  color: #CAA85C;
}

.icon-muted{
  color: #B8B8B8;
}


/* =========================================================
   TÍTULOS DAS SEÇÕES
========================================================= */

.section-title{
  font-size: 26px;
  font-weight: 700;
}


/* =========================================================
   AGENDA / EVENTOS
========================================================= */

.event-card{
  background: #121821;
  border: 1px solid #1F2733;
  border-radius: 10px;
  padding: 14px;
}


/* =========================================================
   FOOTER
========================================================= */

footer{
  border-top: 1px solid #1F2733;
}


/* =========================================================
   CONFIG PERSONALIZAÇÃO (SKIN 01)
   Aqui você ajusta cores, fontes, tamanhos e espaços
   sem mexer no CSS principal.
========================================================= */

/* ========== PALETA (HEX) ========== */
:root{
  --cor-fundo: #0B0F14;
  --cor-card: #0F1621;
  --cor-texto: #E8EEF7;
  --cor-texto-fraco: #B8C2D1;
  --cor-borda: #1E2A3A;

  --cor-dourado: #CAA85C;
  --cor-dourado-hover: #D8B86E;

  --cor-branco: #FFFFFF;
  --cor-preto: #000000;
}

/* ========== ÍCONES LUCIDE ========== */
.lucide{
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
  vertical-align: -3px;
}

.icon-gold{
  color: #CAA85C;
}

.icon-muted{
  color: #B8C2D1;
}

/* Itens do rodapé alinhados */
.footer-item{
  display: flex;
  gap: 10px;
  align-items: flex-start;
}


/* PLAYER AO VIVO */

.live-player{
position:relative;
border-radius:18px;
overflow:hidden;
margin-top:30px;
box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.live-player iframe{
width:100%;
border:0;
}

/* BADGE AO VIVO */

.live-badge{
position:absolute;
top:20px;
left:20px;
background:#e11d48;
color:#fff;
padding:6px 14px;
border-radius:20px;
font-weight:700;
font-size:13px;
}

/* OFFLINE */

.live-offline{
text-align:center;
padding:80px 20px;
background:rgba(0,0,0,.35);
border-radius:20px;
margin-top:30px;
}

.live-offline h2{
margin-bottom:10px;
}

.live-offline p{
opacity:.8;
margin-bottom:20px;
}

.live-player{
position:relative;
border-radius:18px;
overflow:hidden;
margin-top:30px;
box-shadow:0 20px 60px rgba(0,0,0,.5);
background:#000;
}

.live-frame{
width:100%;
height:520px;
border:0;
pointer-events:none; /* impede clicar no YouTube */
}

/* Overlay da igreja */

.live-overlay{
position:absolute;
inset:0;
display:flex;
align-items:flex-end;
justify-content:center;
padding:30px;
pointer-events:none;
}

/* Barra inferior */

.live-bar{
background:rgba(0,0,0,.65);
backdrop-filter:blur(10px);
padding:14px 22px;
border-radius:12px;
display:flex;
gap:18px;
align-items:center;
color:#fff;
font-size:14px;
}

/* Badge AO VIVO */

.live-dot{
width:10px;
height:10px;
background:#ff2d2d;
border-radius:50%;
box-shadow:0 0 8px #ff2d2d;
}