/* =========================================================
   RESET GERAL
   ========================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



/* =========================================================
   CORPO E FUNDO GERAL - INDEX.PHP
   ========================================================= */
body.layout-fundo {
    height: 100vh;
    background-image: url('../../imagens/Fundo_Site3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* =========================================================
   CORPO E FUNDO GERAL TRANSPARENTE - INDEX_SUB.PHP
   ========================================================= */
iframe {
    width: 100%;
    height: auto;
    border: 0;
    overflow: hidden;
}


/* =========================================================
   TÍTULO PRINCIPAL (ALEX SANTOS) - INDEX_SUB.PHP
   ========================================================= */
/* controla  o TÍTULO e o sub TÍTULO */


#tela-principal {
    margin-top: 0px; /* ajuste aqui */
}

.pagina-dinamica .div_nome {
    font-size: 80px;
    text-align: center;
    font-family: 'Brush Script MT', cursive;
    color: #000000;
    padding-top: 0px !important;
    text-shadow:
      0 0 10px #ff7600,
      0 0 20px #ff7600,
      0 0 40px #ffae42,
      0 0 80px #ffae42;
    letter-spacing: 2px;
}

.pagina-dinamica .subtitulo-nome {
    text-align: center;
    font-size: 1.4rem;
    color: #000000;
    font-weight: 600;
    margin-top: -5px;
    margin-bottom: 25px;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(255, 140, 0, 0.4);
}

/* =========================================================
   CONTROLA O RESPONSIVO NO CELULAR - TÍTULO E SUB-TÍTULO
   ========================================================= */

/* animação de entrada suave */
@keyframes fadeInSubtitulo {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pagina-dinamica {
    margin: 0 !important;
    padding: 0 !important;
}

.pagina-dinamica * {
    max-width: 100%;
    box-sizing: border-box;
}

.div_nome {
    margin-top: 50px !important;   /* 🔹 Ajuste aqui */
    font-size: 65px !important;   /* 🔹 ajuste do tamanho */
}

/* =========================================================
   ALINHAMENTO DA SEÇÃO DESTAQUE (FOTO + CARROSSEL + BÍBLIA)
   ========================================================= */

.destaque {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 40px 20px;
    width: 100%;
}

/* controla tamanho das imagens */
/* FOTO DO ALEX — apenas tamanho */
.foto-alex {
    width: 280px;
    max-width: 100%;
}

/* BÍBLIA — tamanho + efeito pulsante */
.imagem-biblia img {
    width: 280px;
    max-width: 100%;
    height: auto;

    animation: luzPulsante 4s infinite ease-in-out;
    transition: transform 0.3s ease, filter 0.3s ease;
}



@keyframes luzPulsante {
    0%   { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.3)); }
    50%  { filter: drop-shadow(0 0 35px rgba(255, 255, 150, 0.8)); }
    100% { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.3)); }
}



/* controla tamanho e posição do texto/carrossel */
.texto-destaque {
    display: flex;
    justify-content: center;
    align-items: center;
}


/* =========================================================
   CONTROLA O RESPONSIVO NO CELULAR <section class="destaque"> (FOTO ALEX + CARROSSEL 3D + BÍBLIA)
   ========================================================= */

@media (max-width: 768px) {
    .destaque {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    .foto-alex {
        width: 70%;
        margin-bottom: 20px;
    }

    .imagem-biblia img {
        width: 70%;
        margin-bottom: 20px;
    }


    .carrossel-3d {
        width: 80%;
        margin-bottom: 20px;
    }

    .div_nome {
        margin-top: 90px !important;   /* sobe no celular */
        font-size: 60px !important;    /* menor e proporcional */
    }

    .subtitulo-nome {
        margin-top: -10px !important; 
        font-size: 20px !important;
    }
}


/* =========================================================
   REDES SOCIAIS
   ========================================================= */
.redes-sociais {
  margin-top: 40px;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  border-top: 1px solid #ff7600;
}

.icones-redes {
  display: flex;
  gap: 25px; /* 🔹 espaçamento ajustado */
  flex-wrap: wrap;
  justify-content: center;
}

.icones-redes a {
  display: inline-block;
  width: 38px;
  height: 38px;
  overflow: visible; /* permite o crescimento sem cortar */
  
}

.icones-redes a img {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 0 5px rgba(255, 118, 0, 0.4));
  transform-origin: center center; /* 🔹 garante que o crescimento seja central */
}

.icones-redes a:hover img {
  transform: scale(1.2);
  filter: drop-shadow(0 0 20px rgba(255, 180, 0, 0.8));
}

.icones-redes {
  gap: 8px;
}

  /* =========================================================
   RODAPÉ
   ========================================================= */
.rodape-direitos{
  text-align: center;
  padding: 20px;
  background-color: rgba(17, 17, 17, 0.9);
  border-top: 1px solid #ff7600;
  color: #ccc;
  font-size: 0.9rem;
}

.rodape-direitos {
    margin-bottom: 0px;
}

/* =========================================================
   TEXTO DO CANTOR — AGORA COM VIDRO FOSCO + NEON
   ========================================================= */
.texto-cantor {
  width: 80%;               /* Ocupa 80% da largura da tela */
  max-width: 1000px;        /* Nunca maior que isso */
  margin: 40px auto;        /* Centraliza e descola do topo */
  padding: 40px;            /* Espaço interno maior */
  border-radius: 15px;

  /* 🧊 Vidro fosco */
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);

  /* ✨ Neon / sombra */
  border: 1px solid rgba(241, 92, 5, 0.3);
  box-shadow:
    0 0 15px rgba(0, 0, 0, 0.2),
    0 0 18px rgba(241, 92, 5, 0.35),
    inset 0 0 12px rgba(241, 92, 5, 0.15);

  color: #000;
  line-height: 1.9;
  font-size: 1.15rem;
  text-align: center;

  animation: fadeInTexto 1.2s ease;
  transition: all 0.3s ease;

  min-height: calc(70vh - 70px); /* ajuste da altura mínima */
  margin-bottom: 20px; /* faltando os 20px antes das redes sociais */
}

/* Responsivo */
@media (max-width: 768px) {
  .texto-cantor {
    width: 95%;
    padding: 25px;
    font-size: 1rem;
  }
}

/* =========================================================
   GALERIA DE VÍDEOS
   ========================================================= */
.galeria-videos {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 colunas por linha */
  gap: 30px; /* espaçamento entre os vídeos */
  justify-items: center;
  align-items: start;
  padding: 40px 20px;
}

.video-item {
  width: 100%;
  max-width: 320px;
  text-align: center;
  background: rgba(60, 60, 60, 0.4); /* 🔹 fundo cinza translúcido */
  border: 1px solid rgba(255, 118, 0, 0.3); /* borda suave alaranjada */
  border-radius: 10px;
  padding: 10px;
  transition: transform 0.3s ease, box-shadow 0.4s ease, background 0.4s ease;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.video-item iframe {
  width: 100%;
  height: 180px;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.4s ease;
  box-shadow: 0 0 10px rgba(255, 118, 0, 0.3);
}

/* 🔥 Efeito de brilho ao passar o mouse */
.video-item:hover iframe {
  transform: scale(1.05); /* leve aumento */
  box-shadow:
    0 0 10px rgba(255, 118, 0, 0.5),
    0 0 25px rgba(255, 150, 0, 0.6),
    0 0 45px rgba(255, 180, 0, 0.7);
}

.video-item p.legenda-video {
  margin-top: 10px;
  color: #fff;
  font-size: 0.95rem;
}

/* =========================================================
   RESPONSIVIDADE
   ========================================================= */
@media (max-width: 1024px) {
  .galeria-videos {
    grid-template-columns: repeat(2, 1fr); /* 2 vídeos por linha em tablets */
  }
}

@media (max-width: 600px) {
  .galeria-videos {
    grid-template-columns: 1fr; /* 1 vídeo por linha em celulares */
  }
}

/* =========================================================
   EFEITO COMETA — versão cinematográfica (8 cometas)
   ========================================================= */
.efeito-cometa {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* 🔹 Cometa base */
.cometa {
  position: absolute;
  width: 50px;  /*AUMENTA A LARGURA */
  height: 10px; /*AUMENTA A ALTURA */
  background: radial-gradient(circle, #fafafa 0%, rgba(255, 119, 0, 0.075) 80%);
  border-radius: 50%;
  box-shadow:
    0 0 10px rgba(255, 162, 0, 0.438),
    0 0 30px rgba(255, 140, 0, 0.925);
  opacity: 0.9;
  filter: blur(0.5px);
  animation-timing-function: ease-in-out; /* 💨 suaviza início e fim */
}

/* 🔥 Trilhas suaves com desvanecimento */
.cometa::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -80px;
  width: 80px;
  height: 10px;
  transform: translateY(-50%);
  background: linear-gradient(to left, rgba(255, 179, 0, 0.534), transparent);
  border-radius: 5px;
  filter: blur(10px);
  opacity: 5;
}

/* ====== Cometas com trajetórias e tempos diferentes ====== */

/* ESQUERDA → DIREITA */
.cometa:nth-child(1) { top: 10%; left: -10%; animation: moverCometa1 10s linear infinite; animation-delay: 0s; transform: scale(0.9); }
.cometa:nth-child(5) { top: 80%; left: -15%; animation: moverCometa1 14s linear infinite; animation-delay: 7s; opacity: 0.6; transform: scale(0.7); }

/* CIMA → BAIXO */
.cometa:nth-child(2) { top: -15%; left: 30%; animation: moverCometa2 12s linear infinite; animation-delay: 4s; transform: scale(1.1); }
.cometa:nth-child(6) { top: -20%; left: 70%; animation: moverCometa2 15s linear infinite; animation-delay: 9s; opacity: 0.5; transform: scale(0.8); }

/* BAIXO → CIMA */
.cometa:nth-child(3) { bottom: -15%; left: 60%; animation: moverCometa3 14s linear infinite; animation-delay: 2s; transform: scale(0.8); }
.cometa:nth-child(7) { bottom: -25%; left: 10%; animation: moverCometa3 16s linear infinite; animation-delay: 10s; opacity: 0.5; transform: scale(1.0); }

/* DIREITA → ESQUERDA */
.cometa:nth-child(4) { top: 60%; right: -10%; animation: moverCometa4 11s linear infinite; animation-delay: 6s; transform: scale(1.0); }
.cometa:nth-child(8) { top: 30%; right: -20%; animation: moverCometa4 13s linear infinite; animation-delay: 8s; opacity: 0.7; transform: scale(0.9); }

/* ===== ANIMAÇÕES ===== */

/* esquerda → direita */
@keyframes moverCometa1 {
  0% { transform: translate(0, 0) rotate(45deg); opacity: 0; }
  10% { opacity: 1; }
  70% { transform: translate(110vw, 70vh) rotate(45deg); opacity: 1; }
  100% { transform: translate(110vw, 70vh) rotate(45deg); opacity: 0; }
}

/* cima → baixo */
@keyframes moverCometa2 {
  0% { transform: translate(0, 0) rotate(120deg); opacity: 0; }
  10% { opacity: 1; }
  70% { transform: translate(50vw, 110vh) rotate(120deg); opacity: 1; }
  100% { transform: translate(50vw, 110vh) rotate(120deg); opacity: 0; }
}

/* baixo → cima */
@keyframes moverCometa3 {
  0% { transform: translate(0, 0) rotate(-60deg); opacity: 0; }
  10% { opacity: 1; }
  70% { transform: translate(-40vw, -110vh) rotate(-60deg); opacity: 1; }
  100% { transform: translate(-40vw, -110vh) rotate(-60deg); opacity: 0; }
}

/* direita → esquerda */
@keyframes moverCometa4 {
  0% { transform: translate(0, 0) rotate(-45deg); opacity: 0; }
  10% { opacity: 1; }
  70% { transform: translate(-110vw, -60vh) rotate(-45deg); opacity: 1; }
  100% { transform: translate(-110vw, -60vh) rotate(-45deg); opacity: 0; }
}