/* =====================================================
   Gilson Mark — CSS unificado (mobile-first, acessível)
   - Mantém paleta dark
   - Main (home) sem carrossel
   - Artist com carrossel horizontal + player + marquee
   - A11Y e responsividade
===================================================== */

/* ----------- Design Tokens ----------- */
:root{
--bg:#0b0f1a;
  --bg-elev:rgba(0, 0, 0, 0.684);
  --bg-soft:#000000;
    --bg-card:rgba(59, 75, 111, 0.55);
  --bg-glass:rgba(222, 30, 30, 0.05);
  --text:#c0bfbf;
  --muted:#c0bfbf;
  --outline:#26303b;
  --primary:rgba(245, 156, 23, 0.947);
  --accent:rgba(245, 156, 23, 0.947);
  --ok:#70e1a6;
  --radius:18px;
  --shadow:0 8px 24px rgba(245, 156, 23, 0.947);;
  --focus-ring:0 0 0 3px rgba(90,177,255,.35);
 --maxw:1120px;
  -gradient:linear-gradient(135deg,var(--primary),var(--accent));
}



/* ----------- Reset + Base ----------- */
*{ box-sizing:border-box; margin:0; padding:0 }
html,body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;


  
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; cursor:pointer }
:focus-visible{ outline:none; box-shadow:var(--focus-ring) }

/* ----------- Layout utilitário ----------- */
.container{ width:min(var(--maxw),92%); margin-inline:auto }
.bloco{ padding-block:40px }
@media (max-width:480px){ .bloco{ padding-block:56px } }

/* =====================================================
   CABEÇALHO 
===================================================== */
.topo{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(12,15,18,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--outline);
}

.topo .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-block:12px;
  overflow: hidden; /* evita que a logo "empurre" o cabeçalho */
  height: 100px; /* altura fixa do cabeçalho */
}

/* Marca (logo + texto) */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo{
  height:180px;
  width:180px;
  display:block;
}
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.brand-text strong{
  font-weight:800;
}
.brand-text span{
  font-size:12px;
  color:var(--muted);
}

/* Menu desktop */
.menu{
  display:flex;
  align-items:center;
  gap:16px;
}
.menu a{
  padding:10px 12px;
  border-radius:999px;
  transition:background .2s ease;
}
/* Menu Principal */
.menu a:hover{
  background:var(--bg-soft);
   background: linear-gradient(135deg, var(--accent), rgba(245, 156, 23, 0.947));
}
/* Botão de destaque (Contato) — igual ao main.css */
.btn-acento {
  background: linear-gradient(135deg, var(--accent), rgba(245, 156, 23, 0.947));
  color: #f6f6f6;
  border: 1.5px solid rgba(245, 156, 23, 0.947);; /* borda zul */
  box-shadow: 0 4px 15px rgba(245, 156, 23, 0.5);
  font-weight: 600;
  transition: all .25s ease;
}

.btn-acento:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(227, 129, 10, 0.696);
}

.btn-acento:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255,180,87,0.2);
}


/* Social inline  */
.menu .social{
  display:flex;
  gap:10px;
  align-items:center;
  margin-left:200px;
}
.menu .social a{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:2px solid var(--outline);
  background:var(--bg-elev);
  transition:.2s;
}
.menu .social a:hover{
  border-color:var(--primary);
}
.menu .social svg{
   transform: translateY(-5px);
  width:px;
  height:14px;
  display:block;
}

@media (max-width: 860px) {
  /* Botão hamburguer */
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: var(--accent);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10000; /* fica sempre acima do conteúdo */
  }

  .menu-toggle:hover {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    transform: scale(1.1);
  }

  .menu-icon,
  .menu-icon::before,
  .menu-icon::after {
    content: "";
    width: 24px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    transition: all 0.3s ease;
  }

  .menu-icon::before { position: absolute; top: -8px; left: 0; }
  .menu-icon::after { position: absolute; top: 8px; left: 0; }

  /* Ícone vira X */
  .menu-toggle.active .menu-icon { background: transparent; }
  .menu-toggle.active .menu-icon::before {
    transform: rotate(45deg);
    top: 0;
  }
  .menu-toggle.active .menu-icon::after {
    transform: rotate(-45deg);
    top: 0;
  }

  /* Painel do menu */
  .menu {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    background: rgba(10, 15, 25, 0.97);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(245, 42, 42, 0.1);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 30px 0;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(212, 186, 12, 0.5);
  }

  .menu.open { display: flex; animation: fadeIn 0.3s ease; }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}


/* =====================================================
   CONTEÚDO ARTISTA
===================================================== */

/* HERO */
.artist-hero {
  background: var(--bg-elev);
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  /* Proporção do YouTube (16:9) */
  aspect-ratio: 16 / 9;
  /* Largura máxima para telas muito grandes (como TVs) */
  max-width: 100%;
  margin: 0 auto; /* Centraliza se o container for maior que a imagem */
}

.artist-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* A imagem cobre todo o espaço, mas pode ser cortada */
  display: block;
}

/* Se você quiser simular a "área segura" centralizando o foco, use object-position: center */
.artist-hero img {
  object-fit: cover;
  object-position: center; /* Garante que o centro da imagem seja priorizado */
}

/* BIO */
.bio{
  margin-top:24px; padding:16px;
  background:var(--bg-elev);
  border:1px solid var(--outline);
  border-radius:14px;
}
.bio h1{ margin-bottom:10px; font-size:clamp(22px,4vw,32px) }
.bio p{ color:var(--muted) }

/* PLAYER */
.player-wrapper{ display:flex; justify-content:center; margin-top:20px }
#player-btn{
  background:var(--accent);
  border:none; border-radius:50%;
  padding:20px; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, filter .2s ease;
}
#player-btn:hover{ filter:brightness(1.1); transform:scale(1.05) }
#player-btn svg{ fill:#1a1200 }

/* MARQUEE */
.marquee-title{
  width:100%; display:flex; justify-content:center; align-items:center;
  overflow:hidden; margin-top:10px;
}
.marquee-track{
  display:inline-flex; white-space:nowrap; gap:2rem;
  transform:translateX(0);
}
.marquee-text{ font-weight:600; letter-spacing:.2px; opacity:.95 }
.marquee-title.is-playing .marquee-track{
  animation: marquee-scroll 16s linear infinite;
}
@keyframes marquee-scroll{
  0%{ transform:translateX(0) }
  100%{ transform:translateX(-50%) }
}

/* GALERIA / CARROSSEL */
.gallery{ margin-top:60px }
.gallery h2{ font-size:clamp(20px,4vw,30px); margin-bottom:10px }

.carousel{
  position:relative;
  border:1px solid var(--outline);
  border-radius:14px;
  background:var(--bg-elev);
  overflow:hidden;
}
.carousel-track{
  display:flex; gap:12px; padding:12px;
  overflow-x:auto; scroll-behavior:smooth;
  scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none }

.carousel .thumb{
  flex:0 0 auto; width:min(320px,80vw);
  aspect-ratio:16/10; border-radius:12px;
  overflow:hidden; border:1px solid var(--outline);
  background:#0f141a;
}
.carousel .thumb img{ width:100%; height:100%; object-fit:cover }

.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:999px;
  border:1px solid var(--outline);
  background:rgba(15,20,26,.75);
  display:grid; place-items:center;
  transition:.15s;
}
.carousel-btn:hover{ border-color:var(--primary) }
.carousel-btn.prev{ left:6px }
.carousel-btn.next{ right:6px }

/* REDES SOCIAIS DO ARTISTA */
.artist-social{
  display:flex; justify-content:center; align-items:center;
  gap:12px; flex-wrap:wrap; margin-top:50px;
}
.artist-social a{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:999px; border:px solid var(--outline);
  background:var(--bg-elev);
  transition:.2s;
}
.artist-social a:hover{ border-color:var(--primary) }

/* RODAPÉ */
.rodape{
  padding-block:20px; border-top:1px solid var(--outline);
  color:var(--muted); font-size:14px; text-align:center;
  background:var(--bg);
}
.rodape .container{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}

/* ACESSIBILIDADE */
.skip-link{
  position:absolute; left:-9999px;
}
.skip-link:focus{
  left:16px; top:16px; padding:8px 12px;
  background:var(--bg-soft); color:var(--text);
  border-radius:8px; box-shadow:var(--focus-ring);
}

/* UTILITÁRIOS */
.hidden{ display:none !important }
.muted{ color:var(--muted) }