/* =========================================================
   1) VARIÁVEIS (tema)
   ========================================================= */
:root{
  --z-black:#000;      /* Fundo principal */
  --z-neon:#CCFF0C;    /* Acento / CTAs */
  --z-white:#fff;      /* Texto sobre fundo escuro */
  --z-gray:#606060;    /* Links e textos secundários */
}

/* =========================================================
   2) RESETS & BASE
   ========================================================= */
*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;

  /* fundo com textura + camada escura */
  background-color:var(--z-black);
  background-image: 
    linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), /* camada preta semitransparente */
    url("../img/texture.png");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  
  color:var(--z-white);
  font-family:"Montserrat", system-ui, -apple-system, Arial, sans-serif;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:var(--z-gray);
  text-decoration:none;
}
a:hover{ color:var(--z-neon); }

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* =========================================================
   3) HEADER & NAVEGAÇÃO
   ========================================================= */
/* ----- Header: menu central, logo embaixo ----- */
header{
  position: sticky;
  top: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: saturate(160%) blur(6px);
  border-bottom: 1px solid #111;
  z-index: 30;

  display: flex;
  min-height: 140px;             /* ajusta se quiser mais/menos altura */
}

.container.nav{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;            /* MENU fica centralizado verticalmente */
  padding: 12px 20px;
}

/* Logo continua colada na base */
.brand{
  display: flex;
  align-items: flex-end;
  align-self: flex-end;           /* garante a base do header */
  line-height: 0;
}
.brand img{
  max-height: 150px;
  width: auto;
  object-fit: contain;
  margin-left: -55px;             /* teu ajuste fino no desktop */
}

/* Breakpoints */
@media (max-width: 980px){
  .brand img{ max-height: 120px; margin-left: -20px; }
}
@media (max-width: 768px){
  header{ min-height: 100px; }
  .brand img{ max-height: 90px; margin-left: 0; }
}


#navLinks{
  display:flex;
  align-items:center;
  gap:16px;
}

/* Botão “Menu” (mostra no mobile) */
#navToggle{ display:none; }

/* =========================================================
   4) BOTÕES
   ========================================================= */
.btn{
  display:inline-block;
  padding:.85rem 1.1rem;
  border-radius:12px;
  border:2px solid transparent;
  transition:.2s all;
  cursor:pointer;
}

.btn-primary{
  background:var(--z-neon);
  color:var(--z-black);
}
.btn-primary:hover{
  background:var(--z-black);
  color:var(--z-neon);
  border-color:var(--z-neon);
}

.btn-ghost{
  background:transparent;
  border-color:#222;
  color:#ddd;
}
.btn-ghost:hover{
  border-color:var(--z-neon);
  color:var(--z-neon);
}

/* =========================================================
   5) TIPOGRAFIA
   ========================================================= */
h1, h2, h3{
  font-family:"Coolvetica","Ysabeau SC","Montserrat",sans-serif;
  letter-spacing:.3px;
}
h1{ font-size:clamp(2rem,4vw,3.5rem); line-height:1.1; margin:0; }
h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 10px; }
h3{ font-size:clamp(1.2rem,2vw,1.4rem); margin:0 0 8px; }
p { line-height:1.6; color:#dcdcdc; }

/* =========================================================
   6) SEÇÕES
   ========================================================= */
section{
  padding:56px 0;
  border-bottom:1px solid #0e0e0e;
}

/* =========================================================
   7) HERO (banner como fundo da seção inteira)
   ========================================================= */
.hero{
  position:relative;
  padding:92px 0;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: url('assets/img/hero-desktop.png') center/cover no-repeat;
  opacity:.9;
}
@media (max-width: 768px){
  .hero::before{ background-image:url('assets/img/hero-mobile.jpg'); }
}
.hero > *{ position:relative; z-index:1; }
.hero .overlay{
  position:absolute; inset:0; z-index:0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.5) 45%,
    rgba(0,0,0,.1) 75%
  );
}

/* =========================================================
   8) COMPONENTES COMUNS
   ========================================================= */
.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px; }
.kpi{ background:#0f0f0f; border:1px solid #161616; border-radius:16px; padding:14px; text-align:center; }
.kpi strong{ display:block; font-size:1.2rem; color:var(--z-neon); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }

.card{ background:#0f0f0f; border:1px solid #161616; border-radius:16px; padding:18px; }

.list{ margin:0; padding-left:18px; }
.list li{ margin:8px 0; }

.schedule{ width:100%; border-collapse:collapse; }
.schedule th,.schedule td{ border:1px solid #1e1e1e; padding:10px; text-align:left; }
.schedule th{ background:#0f0f0f; }

.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.gallery img{ width:100%; height:160px; object-fit:cover; border-radius:14px; border:1px solid #202020; background:#0f0f0f; }

footer{ padding:32px 0; background:#030303; }

/* =========================================================
   9) RESPONSIVO
   ========================================================= */
@media (max-width: 980px){
  #navToggle{ display:inline-flex; }
  #navLinks{
    display:none;
    position:absolute; right:20px; top:60px;
    background:#0a0a0a; border:1px solid #151515; border-radius:12px;
    padding:10px; flex-direction:column; min-width:220px;
  }
  #navLinks.open{ display:flex; }
  .grid-2{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .kpis{ grid-template-columns:repeat(2,1fr); }
  .brand img{ max-height:100px; } /* logo menor no mobile */
}


/* === Texturas por página (mapeadas via data-texture) === */
:root{ --texture-src: url("../img/texture1.png"); } /* fallback */

html, body{
  background-image:
    linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
    var(--texture-src);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}

body[data-texture="1"]{ --texture-src: url("../img/texture1.png"); }
body[data-texture="2"]{ --texture-src: url("../img/texture2.png"); }
body[data-texture="3"]{ --texture-src: url("../img/texture3.png"); }
body[data-texture="4"]{ --texture-src: url("../img/texture4.png"); }
body[data-texture="5"]{ --texture-src: url("../img/texture5.png"); }
body[data-texture="6"]{ --texture-src: url("../img/texture6.png"); }

/* ===== Promo (planos no topo) ===== */
.promo-card{
  position:relative; padding:18px 18px 14px; border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(204,255,12,.25);
  box-shadow:0 0 0 2px rgba(204,255,12,.08) inset, 0 10px 40px rgba(0,0,0,.25);
}
.promo-card .badge{
  position:absolute; top:-12px; left:16px; padding:6px 10px;
  background:var(--z-neon); color:#000; font-weight:800; font-size:12px; border-radius:999px;
  letter-spacing:.02em;
}
.promo-flex{ display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.promo-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.price{ color:var(--z-neon); font-weight:800; font-size:clamp(18px,3.2vw,28px); }
.promo-note{ display:block; margin-top:8px; color:#9a9a9a; }

/* ===== Lightbox da galeria ===== */
.lightbox{
  position:fixed; inset:0; display:none; z-index:9999;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(0,0,0,.92);
}
.lightbox.open{ display:flex; }

.lightbox img{
  max-width:95vw; max-height:90vh; border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.6);
}

.lb-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  border:none; background:rgba(255,255,255,.12);
  color:#fff; font-size:32px; line-height:1; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; cursor:pointer; user-select:none;
  backdrop-filter: blur(2px);
}
.lb-btn:hover{ background:rgba(255,255,255,.2); }

.lb-prev{ left:24px; }
.lb-next{ right:24px; }

.lb-close{
  top:24px; right:24px; transform:none; font-size:28px; width:44px; height:44px;
}

/* Evita scroll do fundo quando o lightbox abre */
html.lb-lock, body.lb-lock{ overflow:hidden; }

/* ===== Ajuste fino da logo ===== */

/* Desktop (padrão) */
.brand img{
  margin-left:-87px;   /* alinhado com promoções */
  max-height:250px;
  width:auto;
  object-fit:contain;
}

/* Tablet */
@media (max-width: 980px){
  .brand img{
    margin-left:-30px; /* puxa só um pouco */
    max-height:120px;
  }
}

/* Mobile */
@media (max-width: 768px){
  .brand img{
    margin-left:-40;     /* volta ao normal */
    max-height:135px;
  }
}

@media (max-width: 768px){
  .brand img{
    transform: translateX(-18px); /* ajusta até ficar perfeito */
  }
}
/* nowrap desktop nav */
@media (min-width: 981px){
  #navLinks{ flex-wrap: nowrap; }
  #navLinks a{ white-space: nowrap; }
}