/* --------------------------------------------------
   DarkTapes Studio - style.css (Consolidado)
   Paleta:
     --bg-900: #0C0A10 (preto profundo)
     --bg-800: #2A1F3D (roxo petróleo)
     --accent:  #D4AF37 (dourado luxo)
     --muted:   #F2F2F2 (texto claro)
     --surface: #1A1A1A (cinza grafite)
   Arquivo limpo: duplicates removidos, lightbox/carousel ajustados
   -------------------------------------------------- */

/* ===== Variables & Reset ===== */
:root{
  --bg-900: #0C0A10;
  --bg-800: #2A1F3D;
  --accent:  #D4AF37;
  --muted:   #F2F2F2;
  --surface: #1A1A1A;

  --max-width: 1200px;
  --container-padding: 1.25rem;
  --radius: 10px;
  --transition: 200ms ease;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg-900);
  color: var(--muted);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  -webkit-font-feature-settings: "liga" 1;
  font-feature-settings: "liga" 1;
}

/* ===== Layout utils ===== */
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--container-padding);
}

/* ===== Header / Navbar ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background: linear-gradient(180deg, rgba(12,10,16,0.92), rgba(12,10,16,0.78));
  border-bottom: 1px solid rgba(212,175,55,0.06);
  backdrop-filter: blur(6px);
}

.header-inner{
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* Brand / logos */
.logo-dark { color: #c0a060; }
.logo-tapes { color: #6a43ad; }
.logo-studio { color: #eaeaea; }

/* ===== Hero ===== */
.hero {
  min-height: clamp(65vh, 85vw, 95vh);
  padding: min(8vw, 8rem) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color: rgba(0,0,0,0.15);
}
.hero.small { min-height: clamp(50vh, 65vw, 75vh); padding: min(6vw, 6rem) 0; }
.logo1 { font-size: clamp(1.5rem, 4vw, 2.2rem); margin-bottom: 0.5rem; } /* adicionado margin-bottom */
.logo1-dark { color: #c0a060; }
.logo1-tapes { color: #6a43ad; }
.logo1-studio { color: #eaeaea; }

.game-title { margin-bottom: 1.5rem; font-size: clamp(2.4rem, 6.8vw, 4.25rem); line-height:1.05; }
.title-white { color: #eaeaea; }
.title-purple { color: #6a43ad; }
.title-gold { color: #c0a060; }

.brand { font-size: clamp(1.5rem, 4vw, 2.2rem); }
.lead { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin-bottom: 2rem; letter-spacing: 0.03em; }

/* Nav */
.nav { display:flex; align-items:center; gap:12px; }
.nav-list{ display:flex; gap:1.25rem; list-style:none; align-items:center; }
.nav-link{
  color:var(--muted);
  text-decoration:none;
  font-weight:600;
  font-size:0.95rem;
  padding:0.5rem 0.25rem;
  transition: color var(--transition), transform var(--transition);
}
.nav-link:hover, .nav-link:focus{ color:var(--accent); transform:translateY(-2px); outline:none; }

/* Mobile toggle (hamburger) */
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:0.5rem; color:var(--muted); }
.hamburger{
  display:block;
  width:22px;height:2px;background:var(--muted);
  position:relative;
}
.hamburger::before,.hamburger::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:var(--muted);
}
.hamburger::before{ top:-6px } .hamburger::after{ top:6px }

/* ===== Hero ===== */
.hero {
  min-height: clamp(65vh, 85vw, 95vh);
  padding: min(8vw, 8rem) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color: rgba(0,0,0,0.15);
}

.hero.small { min-height: clamp(50vh, 65vw, 75vh); padding: min(6vw, 6rem) 0; }

.game-title { margin-bottom: 1.5rem; font-size: clamp(2.4rem, 6.8vw, 4.25rem); line-height:1.05; }
.title-white { color: #eaeaea; }
.title-purple { color: #6a43ad; }
.title-gold { color: #c0a060; }

.brand { font-size: clamp(1.5rem, 4vw, 2.2rem); }

.lead { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin-bottom: 2rem; letter-spacing: 0.03em; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:0.5rem;padding:0.65rem 1rem;border-radius:8px;border:0;cursor:pointer;text-decoration:none;font-weight:700;font-size:0.95rem;transition:transform var(--transition), box-shadow var(--transition);
}
.btn-primary{ background: linear-gradient(180deg,var(--accent), #a3861b); color:#111; box-shadow: 0 6px 18px rgba(212,175,55,0.12); }
.btn-ghost{ background:transparent; color:var(--muted); border:1px solid rgba(242,242,242,0.08); }

/* ===== Sections & cards ===== */
.section{ padding:3.5rem 0; }
h2{ color:var(--accent); font-size:1.4rem; margin-bottom:0.75rem; }
.muted{ color: rgba(242,242,242,0.92); }

.studio-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1rem; }
.card{ background:linear-gradient(180deg, rgba(242,242,242,0.02), rgba(26,26,26,0.06)); padding:1rem; border-radius:var(--radius); border:1px solid rgba(242,242,242,0.02); }

/* ===== Team / avatar ===== */
.team-list{ display:flex; gap:1rem; margin-top:1rem; list-style:none; flex-wrap:wrap; }
.team-member{ display:flex; gap:0.75rem; align-items:center; padding:0.75rem; background:linear-gradient(180deg, rgba(242,242,242,0.01), rgba(26,26,26,0.05)); border-radius:8px; }
.avatar{ width:64px; height:64px; object-fit:cover; border-radius:8px; }
.team-member .avatar { width: 180px; height: 180px; }

/* ===== Form ===== */
.form{ display:grid; gap:0.75rem; max-width:680px; }
.form label{ display:flex; flex-direction:column; color:var(--muted); font-weight:600; font-size:0.9rem; }
.form input, .form textarea{ margin-top:0.35rem; padding:0.6rem; border-radius:8px; border:1px solid rgba(242,242,242,0.06); background:transparent; color:var(--muted); outline:none; }
.form input:focus, .form textarea:focus{ box-shadow:0 6px 18px rgba(212,175,55,0.08); border-color: rgba(212,175,55,0.16); }

/* ===== Fade-in ===== */
.fade-in{ opacity:0; transform:translateY(16px); transition:opacity 700ms ease, transform 700ms ease; }
.fade-in.appear{ opacity:1; transform:none; }

/* ===== Carrossel (corrigido) ===== */

/* Container principal */
.carousel {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  position: relative;
  box-sizing: border-box;
  padding-inline: 0;
}

/* Track wrap: RESERVAMOS o espaço lateral para os controles */
.carousel-track-wrap {
  overflow: hidden;
  flex: 1;
  position: relative;
  box-sizing: border-box;
  padding-inline: 72px;
  margin: 0;
}

/* Track: conteúdo dentro da área protegida */
.carousel-track {
  display: flex;
  gap: 1rem;
  transition: transform 350ms ease;
  padding-bottom: 6px;
  list-style: none;
  will-change: transform;
  touch-action: pan-y;
  cursor: grab;
}
.carousel-track:active{ cursor: grabbing; }

/* Slides (mantém largura mínima) */
.carousel-slide {
  min-width: 320px;
  max-width: 420px;
  flex: 0 0 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* project card */
.project-card{ background:var(--surface); border-radius:10px; padding:0.75rem; display:flex; gap:0.75rem; align-items:flex-start; }
.project-meta h3{ color:var(--accent); margin-bottom:0.25rem; font-size:1rem; }
.project-actions{ margin-top:0.5rem; display:flex; gap:0.5rem; flex-wrap:wrap; }

/* thumbnails */
.project-thumb{
  width:140px;
  height:90px;
  object-fit:cover;
  border-radius:8px;
  flex-shrink:0;
  cursor:pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  user-select:none;
  -webkit-user-drag: none;
}
.project-thumb.no-crop{ object-fit:contain; background: linear-gradient(180deg, rgba(0,0,0,0.35), transparent); }
.project-card:hover .project-thumb{ transform: scale(1.03); box-shadow:0 12px 30px rgba(42,31,61,0.15); }

/* Controles: fixos nas bordas externas do container (fora do track-wrap) */
.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(42,31,61,0.75);
  border: none;
  color: var(--accent);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 40;
  transition: transform 160ms ease, background 160ms ease;
}

/* Posicionamento colocado mais para a borda da viewport do carousel */
.carousel-control.prev { left: 8px; }
.carousel-control.next { right: 8px; }

.carousel-control:hover { transform: translateY(-50%) scale(1.05); background: rgba(212,175,55,0.9); color:#2A1F3D; }

/* frames carousel tweak (if used) */
#frames-carousel .carousel-slide img.project-thumb { width:168px; height:108px; object-fit:cover; }
#frames-carousel .carousel-slide img.project-thumb:hover { transform: scale(1.05); }

/* ===== Gallery specific (100% slides) ===== */
#gallery .carousel { max-width: 900px; margin: 0 auto; padding-inline: 44px; }
#gallery .carousel-track-wrap { border-radius: 12px; box-shadow: 0 15px 40px rgba(0,0,0,0.4); margin: 0 -12px; }
#gallery .carousel-track { height: 500px; }
#gallery .carousel-slide { flex: 0 0 100%; min-width:100%; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.25); }
#gallery .project-thumb { max-width:90%; max-height:90%; object-fit:contain; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,0.5); cursor: pointer; }

/* ===== Lightbox (consolidated & fixed) ===== */
/* hide legacy overlay classes */
.lt-overlay { display:none !important; }

/* container */
.lightbox{
  display:none; /* JS toggles inline 'display:flex' or .show */
  position:fixed;
  inset:0;
  z-index:1200;
  background:rgba(0,0,0,0.94);
  align-items:center;
  justify-content:center;
  padding:24px;
  gap:12px;
  box-sizing:border-box;
  overflow:auto;
}

/* show fallback */
.lightbox.show, .lightbox[style*="display: flex"] { display:flex; }

/* image / video */
.lightbox-content{
  display:block;
  width:auto;
  height:auto;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 80px);
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,0.7);
  transition: transform 180ms ease, opacity 180ms ease;
  -webkit-user-drag: none;
}

/* video same constraints */
.lightbox video.lightbox-content{ max-width: calc(100vw - 48px); max-height: calc(100vh - 80px); display:block; }

/* close button (fixed so it never gets clipped) */
.lightbox-close{
  position:fixed;
  top:18px;
  right:22px;
  color:#fff;
  font-size:36px;
  font-weight:700;
  cursor:pointer;
  z-index:1220;
  background:transparent;
  border:0;
  padding:6px 8px;
  transition: color 160ms ease, transform 160ms ease;
}
.lightbox-close:hover{ color:var(--accent); transform: scale(1.03); }

/* nav prev/next (fixed so they don't overlap image center) */
.lightbox-nav{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  background: rgba(212,175,55,0.92);
  color:#0c0a10;
  width:56px; height:56px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  z-index:1220;
  box-shadow:0 12px 36px rgba(0,0,0,0.6);
  cursor:pointer;
  border:none;
  transition: transform 160ms ease, background 160ms ease;
}
.lightbox-nav:hover{ transform: translateY(-50%) scale(1.05); background:#D4AF37; color:var(--bg-800); }
.lightbox-prev{ left:18px; } .lightbox-next{ right:18px; }

/* image info / caption */
.image-info{
  position:fixed;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  width: min(94%, 1200px);
  text-align:center;
  color:#fff;
  font-size:1.05rem;
  padding:8px 12px;
  background: rgba(0,0,0,0.45);
  border-radius:8px;
  z-index:1220;
  pointer-events:none;
}

/* fallback for any old conflicting positioning */
.lightbox .lightbox-content,
.lightbox img.lightbox-content,
.lightbox video.lightbox-content { position: static !important; top:auto !important; transform:none !important; margin:0 auto; }

/* focus outlines */
.carousel-control:focus, .lightbox-nav:focus, .lightbox-close:focus, .nav-toggle:focus {
  outline: 3px solid rgba(212,175,55,0.18);
  outline-offset: 4px;
}

/* ===== Responsive tweaks ===== */
@media (max-width: 900px) {
  .nav-list {display: flex; gap: 1rem;}
  .nav-toggle{ display:block; }
  .project-thumb{ width:120px; height:80px; }
  .carousel-track-wrap { padding-inline: 44px; }
  .carousel-control.prev{ left: 6px; }
  .carousel-control.next{ right: 6px; }
  .carousel-control{ width:44px; height:44px; }
  .lightbox-prev{ left:12px; } .lightbox-next{ right:12px; }
  .lightbox-nav{ width:48px; height:48px; font-size:1.05rem; }
  .lightbox-close{ font-size:32px; right:14px; top:12px; }
}

@media (max-width: 768px) {
  .nav-list{ display:none; position:fixed; right:12px; top:68px; background:rgba(12,10,16,0.96); padding:1rem; border-radius:8px; flex-direction:column; gap:0.5rem; box-shadow:0 20px 60px rgba(0,0,0,0.6); }
  .nav-list.show{ display:flex; }
  .carousel-slide{ min-width:280px; }
  #gallery .carousel-track { height: 350px; }
}

@media (max-width: 480px) {
  .carousel-track-wrap { padding-inline: 20px; }
  .carousel-track{ gap:0.6rem; }
  .carousel-control.prev{ left: 6px; }
  .carousel-control.next{ right: 6px; }
  .carousel-control{ width:40px; height:40px; }
  .project-thumb{ width:100px; height:68px; }
  .lightbox-content{ max-width: calc(100vw - 32px); max-height: calc(100vh - 56px); }
  .image-info{ font-size:0.95rem; }
  #gallery .carousel-track { height: 250px; }
}

/* ===== Footer ===== */
.site-footer{ border-top:1px solid rgba(212,175,55,0.08); padding:1.25rem 0; margin-top:2rem; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }

/* ===== Small helpers ===== */
.hidden { display:none !important; }
.center { display:flex; align-items:center; justify-content:center; }

.brand-dark {
  color: var(--accent); /* dourado */
}

.brand-tapes {
  color: var(--purple); /* roxo definido no seu tema */
}

.brand-studio {
  color: var(--muted); /* branco */
  margin-left: 0.25rem; /* leve separação */
}

.brand {
  font-weight: bold;
  font-size: 1.25rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.brand span {
  line-height: 1;
}

:root {
  --purple: #6A4D91;
}

.arch-accent { color: var(--accent); }
.arch-purple { color: var(--purple); }
.arch-white { color: var(--muted); }

.featured-game {
  padding: 4rem 0;
  background: linear-gradient(180deg, rgba(18,14,27,0.95), rgba(18,14,27,0.88));
  border-bottom: 1px solid rgba(192,160,96,0.06);
}

.featured-content {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}

.featured-banner {
  max-width: 420px;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}

.featured-info {
  flex: 1;
}

.featured-info h3 {
  color: var(--accent);
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
}

.featured-actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Correção do alinhamento da lista de features na seção de press release */
.press-features {
  list-style-type: disc; /* Garante que os pontos de bala sejam usados */
  padding-left: 20px; /* Adiciona o recuo padrão de listas */
  margin-top: 0.5rem; /* Espaçamento superior */
}

/* Correção do alinhamento das listas de Visão Geral e Características */
.section ul {
  list-style-type: disc; /* Garante que os pontos de bala sejam usados */
  padding-left: 20px; /* Adiciona o recuo padrão de listas */
  margin-top: 0.5rem; /* Espaçamento superior */
}