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

/* elementos começam invisíveis */
.reveal{
opacity: 0;
transform: translateY(60px);
transition: all 0.8s ease;
}

/* quando aparece */
.reveal.active{
opacity: 1;
transform: translateY(0);
}

/* ================= LOADING ================= */
#page-loader {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: opacity 0.6s ease, visibility 0.9s ease;
}

#page-loader.hide {
  opacity: 0;
  visibility: hidden;
}

.loader-content {
  position: relative;
  width: 120px;
  height: 120px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-content img {
  width: 68px;
  z-index: 2;
}

/* Círculo animado */
.loader-ring {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;

  border: 2px solid transparent;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;

  animation: spin 2.4s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- CONFIGURAÇÕES GERAIS -----------*/

:root{
--bg-white:#fff;
--card-black:#000;
--text-white:#fff;
--text-black:#000;
--transition:0.4s ease-in-out;
}

body,html{
margin:0;
padding:0;
width:100%;
background:var(--bg-white);
font-family:'Chillax', sans-serif; /* define Chillax como fonte principal do site */

overflow-x:hidden;
}

html {
scroll-behavior: auto;
}


section{scroll-margin-top:120px;} /* ajuste se o header cobrir seções ao clicar no menu */

.container{
max-width:1200px;
margin:0 auto;
padding:0 40px; /* espaço lateral padrão do site */
}

/* ================== HEADER ================= */

.main-header{
position:fixed;
top:3px; /* ALTERE se quiser subir ou descer o menu */
left:0;
width:100%;
z-index:1000;
display:flex;
justify-content:center;
background:transparent; /* header sem fundo */

mix-blend-mode:difference; /* INVERTE a cor do fundo */
filter:brightness(0) invert(1); /* deixa a logo branca */
}

.main-header a{
color:white;
}

.header-container{
width:95%; /* controla o espaço branco lateral */
max-width:1400px;
padding:1px 40px; /* ALTERE para aumentar ou diminuir a altura do header */
display:flex;
justify-content:space-between;
align-items:center;
}

.logo-img{
    max-height:60px; /* tamanho do logo */
    width:auto;
    display:block;
    position:relative;
    top:-3px; /* sobe levemente a logo */

    filter:brightness(0) invert(1); /* deixa a logo branca */

    transition:transform .35s ease;
}

.logo:hover .logo-img{
transform:scale(1.1);
}

.menu-link{
display:inline-block;
overflow:hidden;
height:1.2em;
line-height:1.2em;
}

.menu-text{
display:flex;
flex-direction:column;
}

.menu-text span{
display:block;
}

/* animação de onda */
.menu-link:hover .menu-text{
animation:waveUp .6s ease forwards;
}

@keyframes waveUp{
0%{
transform:translateY(0);
}
60%{
transform:translateY(-60%);
}
80%{
transform:translateY(-45%);
}
100%{
transform:translateY(-50%);
}
}

.main-nav{
position:relative;
top:-3px; /* sobe somente o menu */
}

.main-nav ul{
display:flex;
gap:30px; /* espaço entre links do menu */
list-style:none;
margin:0;
padding:0;
}

.main-nav a{
text-decoration:none;
color:var(--text-black);
text-transform:uppercase;
font-size:0.75rem;
letter-spacing:2px;
font-weight:600;
transition:var(--transition);
}

.main-nav a:hover{opacity:0.5;}
/* SOCIAL HEADER */

.header-right{
display:flex;
align-items:center;
gap:30px; /* espaço entre menu e redes */
}

.header-social{
display:flex;
align-items:center;
gap:20px;
position:relative;
top:-3px; /* ajusta alinhamento com menu */
}

.social-icons{
display:flex;
gap:18px;
padding-left:20px;
border-left:1px solid rgba(255,255,255,0.6); /* linha vertical */
}

.social-icons i{
font-size:24px;
color:white;
transition:transform .3s, opacity .3s;
cursor:pointer;
}

.social-icons a{
display:flex;
align-items:center;
justify-content:center;
font-size:18px;

color:white;
text-decoration:none;
transition:all .4s ease;
}


/* ----------- EFEITO ROTATIVO------------ */

.social-icons a:hover .fa-instagram{
transform:rotate(20deg) scale(1.2);
}

.social-icons a:hover .fa-linkedin-in{
transform:rotate(20deg) scale(1.2);
}

.social-icons a:hover .fa-youtube{
transform:rotate(20deg) scale(1.2);
}

.social-icons a:hover .fa-spotify{
transform:rotate(20deg) scale(1.2);
}

.social-icons a:hover .fa-tiktok{
transform:rotate(20deg) scale(1.2);
}

.social-icons a:hover .fa-x-twitter{   /* ---- !!! VERIFICAR DEPOIS SE VAI PERMANECER AQUI !!!*/
transform:rotate(20deg) scale(1.2);
}

.social-icons i:hover{
transform:scale(1.2);
opacity:0.7;
}


/* HERO */
.hero-logo{
width:1000px; /* controla tamanho da marca */
max-width:80%; /* evita quebrar em telas menores */
height:auto;
position:relative; /* mantém a logo acima das partículas */
z-index:2;
animation:logoMorph 5s ease-in-out infinite; /* animação de deformação */
}
@keyframes logoMorph{
0%{transform:scale(1,1) rotate(-1deg);}
25%{transform:scale(1.05,0.95) rotate(1deg);}
50%{transform:scale(0.97,1.03) rotate(-1deg);}
75%{transform:scale(1.03,0.97) rotate(1deg);}
100%{transform:scale(1,1) rotate(-1deg);}
}

#particles-js{
position:absolute; /* permite ficar atrás da logo */
width:100%;
height:100%;
top:0;
left:0;
z-index:1;
}

.hero-wrapper{
 min-height:100vh;   /* fallback */
  min-height:100dvh;  /* resolve o bug do Chrome */
display:flex;
justify-content:center;
align-items:flex-start; /* faz o card subir mais */
background:var(--bg-white);
padding-top:60px; /* ALTERE para subir ou descer o quadrado preto */
}

.black-card{
width:96%; /* controla espaço branco nas laterais */
max-width:1800px;
min-height:88vh;
  min-height:88dvh;
background:rgb(0,0,0);
border-radius:23px; /* ALTERE para bordas mais ou menos arredondadas */
display:flex;
justify-content:center;
align-items:center;
box-shadow:0 25px 60px rgba(24, 24, 24, 0.093); /* profundidade */
}

.logo-text{
color:var(--text-white);
font-size:clamp(3rem,15vw,10rem); /* controla tamanho responsivo do texto */
text-transform:uppercase;
font-weight:200; /* peso da fonte */
letter-spacing:-5px; /* espaço entre letras */
margin:0;
}

/* --------------- SEÇÕES - SOBRE O PODCAST -------------- */

.about-section,.episodes-section,.host-section{
padding:100px 0; /* espaço vertical das seções */
text-align:left;
}

/* CONTAINER GERAL DA ÁREA */
.about-wrapper{
max-width:500px; /* controla largura total dos tópicos */

}

/* COLUNA DOS TÓPICOS */
.about-topics{
display:flex;
flex-direction:column;
gap:0px; /* espaço entre os blocos */
perspective:1000px; /* ativa profundidade 3D */
}


/* COLUNA DA IMAGEM */
.about-image{
display:flex;
justify-content:flex-end;
align-items:center;
position:relative; /* permite posicionar elementos ao redor */
}
/* estilo base das ondas */
.audio-wave{
position:absolute;
width:120px; /* controla tamanho da onda */
opacity:.8; /* leve transparência */
}

/* onda esquerda */
.wave-left{
left:40px;
top:70px;

animation-delay:0s;
}

/* onda direita */
.wave-right{
right:100px;
top:-30px;

animation-delay:5s;
}

/* ---------- ANIMAÇÃO DAS ONDAS DE ÁUDIO ---------- */

@keyframes waveStretch{
0%{
transform:scaleX(1); /* tamanho normal */
}
50%{
transform:scaleX(1.23); /* estica horizontalmente */
}
100%{
transform:scaleX(1); /* volta ao normal */
}
}

.audio-wave{
/* animação de esticar */
animation:waveStretch 2s ease-in-out infinite;
}

.conceptual-img{
width:650px; /* move para a direita */
max-width:700px;
}

/* BLOCO INDIVIDUAL */

.topic-item{
perspective:1200px;
cursor:pointer;
}

/* CONTAINER INTERNO QUE FAZ O GIRO */
.topic-inner{
position:relative;
width:100%;
height:90px;
transform-style:preserve-3d;
transition: transform .65s cubic-bezier(.22,.61,.36,1);
}

/* GIRO 3D */

@media (hover:hover){

.topic-item:hover .topic-inner{
transform:rotateX(180deg);
box-shadow:0 18px 35px rgba(0, 0, 0, 0.100);
}

}

/* MOBILE */
.topic-item.active .topic-inner{
transform:rotateX(180deg);
box-shadow:0 18px 35px rgba(0, 0, 0, 0.100);
}

/* FACES DO CARD */

.topic-front,
.topic-back{

position:absolute;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 26px;
backface-visibility:hidden;
text-align:left;

}

/* FACE CLARA */
.topic-front{
background:#eaeaea74;
}

/* FACE ESCURA */
.topic-back{
background:linear-gradient(145deg,#000,#3e3d3d);
color:#fff;
transform:rotateX(180deg);
}

/* TÍTULO */
.topic-front h3,
.topic-back h3{
margin:0;
font-size:1.6rem;
font-weight:600;
max-width:40%;
}

/* TEXTO */

.topic-back p{
max-width:50%;
font-size:1em;
line-height:1.4;
}

.section-title h2{
font-size:2rem;
text-transform:uppercase;
letter-spacing:3px;
margin-bottom:10px;
text-align:center; /* alinha o título à esquerda */
}

.title-divider{
width:50px;
height:2px;
background:#000;
margin:0 auto 50px;
}

/* ABOUT */

.about-grid{
display:grid;
grid-template-columns:550px 1fr;
gap:60px; /* espaço entre texto e imagem */
align-items:center;
text-align:left;
}

@media (max-width:1200px){
.about-grid{
grid-template-columns:600px 1fr;
}
}


/* ----------------- EPISÓDIOS -----------------*/

/* GRID DOS EPISÓDIOS (agora vira um slider horizontal) */
.episodes-grid{
display:flex;              /* permite scroll horizontal */
gap:40px;

overflow-x:auto;           /* habilita rolagem horizontal */
overflow-y:hidden;

padding-bottom:10px;

}

/* CARD DO EPISÓDIO */
.episode-card{
min-width:48%; /* mostra 2 cards por vez */
border:1px solid #eee;
border-radius:20px;
overflow:hidden;
position: relative;
background:#fff;
transition:transform .25s ease;
flex:0 0 48%;   /* mostra dois cards por vez */
transition:var(--transition);
}

/* HOVER DO CARD */
.episode-card:hover{
transform:translateY(-6px);

}

/* CAPA DO EPISÓDIO */
.ep-cover{
position:relative;
overflow:hidden;
}

.ep-cover img{
width:100%;
height:220px;
object-fit:cover;
display:block;
transition:0.35s;
}

/* overlay escuro */
.play-overlay{
position:absolute;
  inset:0; /* 🔥 garante que fica preso exatamente na capa */
  
  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(0, 0, 0, 0.286);
  opacity:0;
  transition:0.3s;

}
.play-icon i{
  font-size:22px;
  color:white;
}

/* botão play */
.play-icon{
background:rgba(0, 0, 0, 0.438);
width:60px;
height:60px;
border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

transition:0.3s;
}

/* efeito hover */

.ep-cover:hover img{
filter:brightness(60%);
}

.ep-cover:hover .play-overlay{
opacity:1;
}

.play-icon:hover{
transform:scale(1.15);
}

/* DETALHES DO CARD */
.ep-details{
padding:25px;
text-align:left;
}

/* DATA */
.ep-date{
font-size:.75rem;
color:#999;
margin-bottom:10px;
}

/* DESCRIÇÃO */
.ep-snippet{
font-size:.9rem;
margin-bottom:20px;
line-height:1.5;
}

/* BOTÕES */
.ep-actions{
display:flex;
gap:10px;
}

/* ================= EPISODES SLIDER ================= */

.episodes-section{
position:relative;
}

/* container que desliza */

.episodes-wrapper{
overflow:visible;
}

/* grid vira linha horizontal */

.episodes-grid{

display:flex;
gap:40px;
overflow-x:auto;
scroll-behavior:smooth;
padding:10px 5px;
}

/* tamanho dos cards */

.episode-card{
min-width:420px;
flex-shrink:0;
}


/* ================= SETAS ================= */

.episodes-arrow{
position:absolute;
top:55%;
transform:translateY(-50%);
width:40px;
height:40px;
border:none;
border-radius:50px;
background:rgba(0, 0, 0, 0.55);
color:rgb(255, 255, 255);
font-size:18px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
backdrop-filter:blur(6px);
transition:0.3s;
z-index:10;
}

/* posição padrão */

.arrow-left{
left:40px;
}

.arrow-right{
right:40px;
}

/* hover */

.episodes-arrow:hover{
background:rgba(0, 0, 0, 0.632);
transform:translateY(-50%);

}

/* ===TELAS GRANDES ====*/
@media (min-width:1200px){
.arrow-left{
left:45px;
}
.arrow-right{
right:45px;
}
}

/* === TELAS MUITO GRANDES ==== */
@media (min-width:1600px){

.arrow-left{
left:80px;
}
.arrow-right{
right:80px;
}
}

/* ----------------- BOTÕES -----------------*/

.btn{
padding:10px 20px;
border-radius:30px;
text-decoration:none;
font-size:.75rem;
text-transform:uppercase;
letter-spacing:1px;
transition:var(--transition);
}

.btn-secondary{
background:#000;
color:#fff;
}

.btn-secondary:hover{
opacity:.85;
}

.btn-text{
color:#000;
}

/* --------------- HOST ---------------- */

.host-subtitle{
display:flex;
justify-content:center;
overflow:hidden;
}

.subtitle-wave{
display:flex;
flex-direction:column;
height:1.3em;
line-height:1.3em;

transition:transform 1s cubic-bezier(.25,1.4,.35,1);
}

.subtitle-wave span{
display:block;
}

/* efeito onda */
.host-subtitle:hover .subtitle-wave{
transform:translateY(-100%);
}

/* container igual ao subtitle */
.host-name {
display: inline-block;
cursor: pointer;
}

/* wrapper (igual lógica do subtitle) */
.name-wrapper {
display: inline-block;
overflow: hidden;
vertical-align: middle; /* 🔥 alinha com o texto */
}

/* efeito */
.name-wave {
display: inline-flex; /* 🔥 ESSENCIAL */
flex-direction: column;

height: 1.3em;
line-height: 1.3em;

transition: transform 1s cubic-bezier(.25,1.4,.35,1);
}

/* spans */
.name-wave span {
display: block;
}

/* 🔥 AGORA IGUAL AO SUBTITLE */
.host-name:hover .name-wave {
transform: translateY(-100%);
}

.host-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
text-align:left;
}

.section-title{
text-align:center;
margin-bottom:5px;
line-height:1.2;
}

.host-subtitle{
color:#000000; 
text-align:center; /* centraliza */
font-size:1.1rem;
font-weight:500;
margin-top:0px;
margin-bottom:18px;
}

.host-image-wrapper{
position:relative;
width:450px; /* move para a direita */
height:300px;
display:flex;
align-items:center;
justify-content:center;
}

.host-photo{
width:488px;
height:320px; /* aumentar a foto */
object-fit:cover;
position:relative;
z-index:2;
}

/* CÍRCULOS */
.circle{
position:absolute;
border:2px dashed #bdbdbd; /* cinza pontilhado */
border-radius:50%;
}

/* tamanhos dos círculos */

.circle-1{
width:310px;
height:310px;
}

.circle-2{
width:365px;
height:365px;
}

.circle-3{
width:420px;
height:420px;
}

/* ---------- ÍCONES EM VOLTA DO CÍRCULO ---------- */

.orbit-icon{
position:absolute; /* permite posicionar o ícone no círculo */
display:flex;
align-items:center;
justify-content:center;

/* animação */
animation:pulseFocus 2s ease-in-out infinite;
}

/* TAMANHO DOS ÍCONES */
.orbit-icon img{
width:85px;
height:85px;
}


/* ---------- POSIÇÃO DOS ÍCONES ---------- */

/* Instagram (parte superior esquerda) */
.icon-instagram{
top:5px;
left:5px;

animation-delay:0s;
}

/* LinkedIn (parte inferior esquerda) */
.icon-linkedin{
bottom:5px;
left:35px;

animation-delay:1s;
}

/* Trestto (lado direito) */
.icon-trestto{
top:190px;
right:0px;

animation-delay:2s;
}

/* InfoDot (lado direito) */
.icon-infodot{
top:-20px;
right:20px;

animation-delay:2s;
}


/* ---------- ANIMAÇÃO DE PULSO DOS ÍCONES ---------- */

@keyframes pulseFocus {

0%{
transform:scale(1);
opacity:0.7;
}
50%{
transform:scale(1.15);
opacity:1;
}
100%{
transform:scale(1);
opacity:0.7;
}
}

/* imagem do host */
.host-photo{
z-index: 1; /* 🔥 menor que os ícones */
}

/* ícones clicáveis */
.orbit-icon{
position: absolute;
z-index: 3; /* 🔥 garante que fique na frente */
cursor: pointer;
}

/* garante área clicável completa */
.orbit-icon {
width: 85px;
height: 85px;
}

/* imagem ocupa todo o espaço */
.orbit-icon img{
width: 100%;
height: 100%;
pointer-events: none; /* 🔥 evita conflito de clique */
}

/* ================= FOOTER ================= */
.main-footer{
background:#000;
color:#fff;
padding:100px 0 40px;
width:100%;
}

/* container */
.footer-container{
max-width:1400px;
margin:0 auto;
padding:0 40px;
display:grid;
grid-template-columns:1.5fr 1fr 1fr;
gap:80px;
}

/* logo */
.footer-logo{
height:65px;
margin-bottom:2px;

transition: transform 0.8s ease;
cursor: pointer;
}

/* efeito ao passar o mouse */
.footer-logo:hover {
transform: translateX(18px) scale(1.05);
}

/* descrição */
.footer-description{
max-width:380px;
line-height:1.6;
opacity:.7;
}

/* redes sociais */
.footer-social {
margin-top: 25px;
display: flex;
gap: 20px;
}

/* links dos ícones */
.footer-social a {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}

/* ícones */
.footer-social i {
font-size: 22px;
color: white;
transition: transform .3s, opacity .3s;
}

/* ----------- EFEITO ROTATIVO (igual header) ----------- */

.footer-social a:hover .fa-instagram,
.footer-social a:hover .fa-linkedin-in,
.footer-social a:hover .fa-youtube,
.footer-social a:hover .fa-spotify,
.footer-social a:hover .fa-tiktok,
.footer-social a:hover .fa-x-twitter {
transform: rotate(20deg) scale(1.2);
}

/* efeito geral */
.footer-social a:hover i {
opacity: 0.7;
}

/* títulos */
.footer-links h4,
.footer-contact h4{

margin-bottom:20px;
font-size:0.9rem;
letter-spacing:2px;
text-transform:uppercase;
}

/* links */
.footer-links a{
display:block;
text-decoration:none;
color:white;
margin-bottom:10px;
opacity:.7;
transition:.8s;
}

.footer-links a:hover{
opacity:1;
}

/* contato */
.footer-contact p{
opacity:.7;
margin-bottom:10px;

}
/* parte inferior */
.footer-bottom{
max-width:1400px;
margin:15px auto;
padding:15px 40px;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:20px;
}

/* copyright */
.footer-copy{
font-size:0.8rem;
opacity:.6;
}

/* desenvolvido por */
.footer-dev{
display:flex;
align-items:center;
gap:0px;
opacity:.7;
font-size:0.8rem;
}

.footer-dev img{
height:33px;
opacity:5;
}

/* remove os pontos e espaçamento da lista no footer */
.footer-links .menu-list {
list-style: none;
padding: 0;
margin: 0;
}

/* garante alinhamento dos itens */
.footer-links .menu-list li {
margin-bottom: 10px;
}

/* mantém aparência dos links */
.footer-links a {
display: block;
text-decoration: none;
color: white;
opacity: .7;
transition: .3s;
}

.footer-links a:hover {
opacity: 1;
}

/* ================= PATROCINADORES ================= */

.section-divider{

width:100%;
height:1px;

background:linear-gradient(
to right,
transparent,
rgba(255, 255, 255, 0),
transparent
);

margin:0px 0;

}

.sponsors-section{
background:#000;
margin-top: 50px; /* 🔥 aumenta o espaço */
padding:30px 0;
overflow:hidden;

box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.07);

/* arredondar parte de cima */

border-top-left-radius:30px;
border-top-right-radius:30px;
}

.sponsors-track{
display:flex;
width:100%;
overflow:hidden;

/* fade nas bordas */
mask-image: linear-gradient(
to right,
transparent,
black 10%,
black 90%,
transparent
);

-webkit-mask-image: linear-gradient(
to right,
transparent,
black 10%,
black 90%,
transparent
);
}

.sponsors-slide{
display:flex;
gap:90px;
align-items:center;

animation:scrollSponsors 30s linear infinite;
}

.sponsors-slide img{
height:90px;
width:auto;
filter:brightness(0) invert(1); /* transforma a imagem em branco */

opacity:0.7;
transition:all .4s ease;
}

.sponsors-slide img:hover{
filter:none; /* volta à cor original */
opacity:1;
}

/* animação que move as logos */
@keyframes scrollSponsors{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}
}

/* ================= MENU MOBILE ================= */

/* CONTAINER PRINCIPAL */
.mobile-menu{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background: #000;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 30px 20px;

  opacity: 0;
  pointer-events: none;

  transition: opacity .4s ease;
  z-index: 9999;
}

@media (max-width: 900px){
  .mobile-menu{
    display: flex;
  }
}

/* MENU ATIVO */
.mobile-menu.active{
  opacity: 1;
  pointer-events: all;
}

/* HEADER DO MENU */
.mobile-menu-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* REDES NO TOPO */
.mobile-menu-social{
  display: flex;
  gap: 18px;
}

.mobile-menu-social a{
  color: white;
  font-size: 20px;
  transition: opacity .3s ease;
}

.mobile-menu-social a:hover{
  opacity: 0.6;
}

/* BOTÃO X */
.mobile-menu-close{
  font-size: 28px;
  color: white;
  cursor: pointer;
}

/* LINKS CENTRALIZADOS */
.mobile-menu-nav{
  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 30px;
}

/* LINKS */
.mobile-menu-nav a{
  color: white;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-decoration: none;

  transition: opacity .3s ease, transform .3s ease;
}

/* HOVER SUAVE */
.mobile-menu-nav a:hover{
  opacity: 0.6;
  transform: translateY(-2px);
}

/* ================= HAMBURGUER ================= */

.menu-toggle{
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.menu-toggle span{
  width: 26px;
  height: 2px;
  background: white;
  transition: 0.3s;
}
.mobile-menu-social{
  display: none !important;
}

/* ===================== RESPONSIVO ===================== */

/* ================ HEADER ================*/

@media (max-width: 900px){

  .header-container{
    display: flex;
    justify-content: space-between; /* separa logo e direita */
    align-items: center;
    padding: 7px 16px; /* ajuste geral de respiro */
  }

  .header-right{
    display: flex;
    align-items: center;
    gap: 20px; /* espaço entre redes e hambúrguer */
  }

  .logo-img{
    height: 49px; /* ajuste fino do tamanho da logo */
  }

  .main-nav{
    display: none; /* esconde menu padrão */
  }

  .header-social{
    display: flex;
  }

  .social-icons{
    display: flex;
    align-items: center;
    gap: 15px; /* espaço entre ícones */
  }

  .social-icons a{
    font-size: 16px; /* tamanho dos ícones */
  }

  

  .menu-toggle{
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .menu-toggle span{
    width: 25px;
    height: 2.5px;
  }
}

/* ================ HERO ================*/

@media (max-width: 900px){

  .black-card{
    min-height: 90vh;
  min-height: 90dvh;
  }

}
/* ------ MÕAZINHA ------*/
.scroll-indicator-mobile {
  display: none;
}

@media (max-width: 900px) {

  .scroll-indicator {
    display: none;
  }

  .scroll-indicator-mobile {
    display: block;
    position: absolute;
    bottom: 60px;
    right: 40px;
    font-size: 28px;
    color: #ffffff;
    animation: handBounce 1.6s ease-in-out infinite;
  }
}

@keyframes handBounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}


/* ================ SOBRE O PODCAST ================*/

@media (max-width: 900px){

  /* -------- SEÇÃO GERAL -------- */
  .about-section{
    padding: 70px 0; /* reduz espaço vertical */
  }
  /* -------- GRID -------- */
  .about-grid{
    grid-template-columns: 1fr; /* 🔥 vira 1 coluna */
    gap: 40px; /* espaço entre blocos */
  }
  /* -------- TÓPICOS -------- */
  .about-topics{
    gap: 0px; /* agora precisa de espaço entre cards */
  }
  
  /* altura automática (melhor no mobile) */
  .topic-inner{
    height: auto;
    min-height: 90px;
  }

  /* remove limite de largura do texto */
  .topic-front h3,
  .topic-back h3{
    max-width: 100%;
    font-size: 1.1rem;
  }
  .topic-back p{
    font-size:0.75rem;
  line-height:1.4;
  }

  /* -------- IMAGEM -------- */
  .conceptual-img{
  display: none;
}

  /* -------- ONDAS --------*/
  .audio-wave{
    display: none;
  }

  /* -------- TÍTULO -------- */
  .section-title h2{
    font-size: 1.5rem;
    letter-spacing: 2px;
  }
  .title-divider{
    margin-bottom: 45px;
  }
}

/* ============== EPISÓDIOS ==============*/

@media (max-width: 900px){

/* seção com respiro lateral */
.episodes-section{
  padding: 0 10px;
}

/* remove setas no mobile */
.episodes-arrow{
  display: none;
}

/* ================= DOTS ================= */
.episodes-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:15px;
}

.episodes-dots span{
  width:8px;
  height:8px;
  background:#ccc;
  border-radius:50%;
  transition:0.3s;
  cursor:pointer;
}

.episodes-dots span.active{
  background:#000;
  transform:scale(1.2);
}

/* remove scrollbar */
.episodes-grid::-webkit-scrollbar{
  display: none;
}

.episodes-grid{
  scrollbar-width: none;

  /* 🔥 ESSENCIAL PRA NÃO CORTAR */
  gap:0.5rem;
  padding:10px 0;

  scroll-snap-type: x mandatory;
}

/* 🔥 CARD CORRIGIDO */
.episode-card{
  min-width:100%;
  flex: 0 0 100%;
  scroll-snap-align: center;
}

/* imagem */
.ep-cover img{
  height:180px;
}

/* overlay visível */
.play-overlay{
  opacity:1;
  background:rgba(0, 0, 0, 0.152);
}

/* botão play */
.play-icon{
  width:50px;
  height:50px;
  font-size:28px;
}

/* conteúdo */
.ep-details{
  padding:18px;
}

.ep-snippet{
  font-size:.85rem;
}

/* botões */
.ep-actions{
  flex-direction:column;
  gap:10px;
}

.btn{
  width:100%;
  text-align:center;
}

/* ============== HOST ==============*/
@media (max-width: 900px){

/* layout em coluna */
.host-grid{
  grid-template-columns:1fr;
  gap:25px;
  text-align:left;
}

.host-grid p:first-of-type{
  margin-top: 25px;
}

.section-title h2{
  white-space: nowrap;
  font-size: clamp(1.2rem, 5vw, 1.5rem);
}

/* subtítulo mais compacto */
.host-subtitle{
  font-size:0.95rem;
  margin-top:5px;
  margin-bottom:10px;
}

/* centraliza o bloco */
.host-image-wrapper{
  width:100%;
  height:auto;
  margin:0 auto;
}

/* FOTO MAIS DESTACADA (tipo perfil) */
.host-photo{
  width:220px;
  height:220px;
  border-radius:50%;
  object-fit:cover;
}

/* REMOVE excesso visual */
.circle-3{
  display:none;
}

/* suaviza os círculos */
.circle{
  opacity:0.4;
}

/* círculos menores */
.circle-1{
  width:200px;
  height:200px;
}

.circle-2{
  width:240px;
  height:240px;
}

/* ÍCONES MENORES */
.orbit-icon{
  width:50px;
  height:50px;
}

/* 🔥 REPOSICIONAMENTO MELHOR */
.icon-instagram{
  top:-40;
  left:20px;
}

.icon-linkedin{
  bottom:20;
  left:35px;
}

.icon-trestto{
  top:145px;
  right:10px;
}

.icon-infodot{
  top:10px;
  right:15px;
}
}

 /* ============== PATROCINADORES MOBILE ==============*/
@media (max-width: 900px){

.sponsors-section{
  margin-top:30px;
  padding:20px 0;
}

/* menos espaço entre logos */
.sponsors-slide{
  gap:25px;

  /* animação mais lenta (melhor leitura) */
  animation:scrollSponsors 20s linear infinite;
}

/* logos menores */
.sponsors-slide img{
  height:50px;
    filter:none;      /* 🔥 cor original */
    opacity:1;        /* 🔥 visível */
}

/* remove hover (não existe no mobile) */
.sponsors-slide img:hover{
  filter:none;
    opacity:1;;
}

/* suaviza bordas */
.sponsors-track{
  mask-image: linear-gradient(
    to right,
    transparent,
    black 15%,
    black 85%,
    transparent
  );

  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
}
}
.sponsors-slide img.active{
  filter:none;
  opacity:1;
  transform:scale(1.15);
}

/* ============== FOOTER MOBILE ==============*/
@media (max-width: 900px){

/* reduz padding geral */
.main-footer{
  padding:60px 0 30px;
}

/* container vira coluna */
.footer-container{
  grid-template-columns:1fr;
  gap:40px;
  padding:0 20px;
  text-align:left;
}

/* logo menor */
.footer-logo{
  height:55px;
}

/* descrição ocupa tudo */
.footer-description{
  max-width:100%;
  font-size:0.9rem;
}

/* redes sociais */
.footer-social{
  gap:15px;
}

/* ícones menores */
.footer-social i{
  font-size:20px;
}

/* títulos */
.footer-links h4,
.footer-contact h4{
  font-size:0.8rem;
  margin-bottom:15px;
}

/* links */
.footer-links a{
  font-size:0.9rem;
}

/* contato */
.footer-contact p{
  font-size:0.9rem;
}

/* ---------- PARTE DE BAIXO ---------- */

.footer-bottom{
  flex-direction:column;
  align-items:flex-start;
  padding:10px 20px;
  gap:10px;
}

/* texto menor */
.footer-copy{
  font-size:0.75rem;
}

/* dev */
.footer-dev{
  font-size:0.75rem;
}

/* imagem dev menor */
.footer-dev img{
  height:25px;
}

}

}