:root{
  --neon:#00FFFF;
  --bg:#000;
  --text:#fff;
  --muted:#cfcfcf;
  --header-h:72px;
  --container-w:1100px;
}

*{box-sizing:border-box;}
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}

.container{ width:min(94%, var(--container-w)); margin:0 auto; }

/* HEADER FIXO */
.site-header{
  position:fixed; top:0; left:0; right:0;
  height:var(--header-h);
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.05);
  z-index:999;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
}

/* BRAND */
.brand{ display:flex; align-items:center; gap:12px; }
.logo{
  background:var(--neon);
  color:#000;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; text-decoration:none; border-radius:10px;
}
.brand-name{ color:var(--muted); }

.logo img,
.logo svg {
  width: 50px;
  height: auto;
  display: block;
}

.brand-name {
  font-family: "Great Vibes", cursive;
  font-size: 20px; /* ajusta como quiser */
  letter-spacing: 1px;
}

/* MENU DESKTOP */
.main-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap:1rem;
}
.main-nav a{
  text-decoration:none;
  color:var(--muted);
  padding:.5rem .6rem;
  border-radius:6px;
  font-weight:600;
  transition:0.2s;
}
.main-nav a:hover{ color:var(--neon); }

/* ACTIVE */
.main-nav a.active{
  background:var(--neon);
  color:#000;
}

.social svg {
  width: 32px;
  height: 32px;
}


/* HAMBURGUER */
.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  width:32px;
  background:none;
  border:0;
  cursor:pointer;
}
.hamburger span{
  height:3px;
  width:100%;
  background:var(--text);
  border-radius:4px;
  transition:.3s;
}

/* MOBILE MODE */
@media (max-width:800px){

  .main-nav{
    position:fixed;
    top:var(--header-h);
    left:0;
    right:0;
    background:#000;
    padding:1.5rem 0;
    display:flex;
    justify-content:center;
    transform:translateY(-120%);
    transition:.35s ease;
    border-bottom:1px solid rgba(255,255,255,0.07);
  }
  .main-nav.open{ transform:translateY(0); }

  .main-nav ul{
    flex-direction:column;
    gap:1rem;
    text-align:center;
  }

  .hamburger{ display:flex; }
  
  /* animação X */
  .hamburger.active span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
  }
  .hamburger.active span:nth-child(2){
    opacity:0;
  }
  .hamburger.active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
  }

  .brand-name{ display:none; }
}

/* PÁGINAS */
.section{
  padding:calc(var(--header-h) + 3rem) 0 5rem;
  scroll-margin-top:calc(var(--header-h) + 1rem);
}

#nossa-marca {
  position: relative;
  background-image: url('../assets/images/barber1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  margin-bottom: 50px;
  margin-left: 50px;
  margin-right: 50px;
}

#nossa-marca .container {
  /* position: relative; */
  z-index: 2; /* texto fica acima do overlay */
  padding-bottom: 280px;
}

#nossa-marca .container p {
  font-size: larger;
  padding-top: 80px;
}

#nossa-marca::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6); /* 0.4 = 40% de transparência */
  /* pointer-events: none; */
  z-index: 1; /* overlay fica no meio */
}

#nossa-marca h2,
#nossa-marca p {
  text-shadow:
  0 2px 4px rgba(0,0,0,0.6),
  0 4px 12px rgba(0,0,0,0.8);
}

#barba-cabelo {
  position: relative;
  background-image: url('../assets/images/barber2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  margin-bottom: 100px;
  margin-left: 50px;
  margin-right: 50px;
  
}

#barba-cabelo .container {
  position: relative;
  z-index: 2; /* texto fica acima do overlay */
}

#barba-cabelo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7); /* 0.4 = 40% de transparência */
  /* pointer-events: none; */
  z-index: 1; /* overlay fica no meio */
}

/* --- GALERIA --- */

.galeria {
  margin-left: 50px;
  margin-right: 50px;
  text-align: center;
}

.galeria h2 {
  margin-bottom: 40px;
  color: var(--neon);
  text-shadow:
    0 2px 4px rgba(0,0,0,0.6),
    0 4px 12px rgba(0,0,0,0.8);
}

.galeria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.galeria-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0,0,0,0.35);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* efeito hover estiloso */
.galeria-grid img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 22px rgba(0,240,255,0.35);
}


#infantil {
  position: relative;
  background-image: url('../assets/images/barber4.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  margin-bottom: 50px;
  margin-left: 50px;
  margin-right: 50px;
}

#infantil .container {
  position: relative;
  z-index: 2; /* texto fica acima do overlay */
}

#infantil::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7); /* 0.4 = 40% de transparência */
  /* pointer-events: none; */
  z-index: 1; /* overlay fica no meio */
}



#endereco {
  position: relative;
  background-image: url('../assets/images/barber3.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  margin-bottom: 10px;
  margin-left: 50px;
  margin-right: 50px;
}

#endereco {
  scroll-margin-top: -200px;
}


#endereco .container {
  position: relative;
  z-index: 2; /* texto fica acima do overlay */
}

#endereco::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7); /* 0.4 = 40% de transparência */
  /* pointer-events: none; */
  z-index: 1; /* overlay fica no meio */
}

.section h2{
  color:var(--neon);
}
.hero{
  min-height:70vh;
  display:flex; align-items:center;
}

.site-footer{
  text-align:center;
  padding:2rem 0;
  color:var(--muted);
}


.contato {
  padding: 80px 20px;
}

.form-container {
  max-width: 500px;
  margin: 0 auto;
}

form input,
form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border: none;
  border-radius: 6px;
}

form button {
  width: 100%;
  padding: 12px;
  background: var(--neon);
  color: #000;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}

/* -------- NEON THEME (adicionar ao seu styles.css) -------- */
:root{
  --neon: #00FFFF;
  --neon-strong: rgba(0,240,255,0.16);
  --glow: 0 6px 24px rgba(0,240,255,0.12), 0 2px 6px rgba(0,240,255,0.08);
}

/* Logo glow */
.logo{
  background: linear-gradient(180deg, var(--neon), #00d6ff);
  color:#000;
  box-shadow: 0 6px 30px rgba(0,240,255,0.22), 0 1px 4px rgba(0,0,0,0.6);
  transition: transform .18s ease, box-shadow .18s ease;
}
.logo:hover{ transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 40px rgba(0,240,255,0.30); }

/* Links active / hover */
.main-nav a:hover{ color: #000; background: linear-gradient(90deg, var(--neon-strong), rgba(255,255,255,0.02)); }
.main-nav a.active{ background: var(--neon); color:#000; box-shadow: 0 8px 28px rgba(0,240,255,0.12); }

/* Form neon */
.form-box {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(0,240,255,0.06);
  box-shadow: var(--glow);
}
.contact-btn, .form-box button {
  background: linear-gradient(90deg, var(--neon), #00cfff);
  color:#000;
  box-shadow: 0 10px 30px rgba(0,240,255,0.12);
  border: 0;
}
.form-box input, .form-box textarea {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  color: var(--text);
}

/* Fancy placeholder contrast */
.form-box input::placeholder, .form-box textarea::placeholder {
  color: rgba(255,255,255,0.45);
}

/* Small neon underline for section headings
.section h2{
  position: relative;
  padding-left: 30px;
} */
/* .section h2::after{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:6px;
  height:60%;
  background:linear-gradient(180deg, var(--neon), #00d6ff);
  border-radius:4px;
  box-shadow: 0 6px 20px rgba(0,240,255,0.08);
} */

/* Toast (success) */
.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  background: linear-gradient(90deg, rgba(0,240,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(0,240,255,0.12);
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,240,255,0.10);
  transform: translateY(16px);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
  z-index: 2000;
  backdrop-filter: blur(6px);
}
.toast.show { transform: translateY(0); opacity: 1; }

/* whatsapp suspenso */

.whats-floating {
  position: fixed;
  bottom: 50px;
  right: 50px;
  width: 60px;
  height: 60px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 9999;
  transition: transform 0.2s ease;
}

.whats-floating img {
  width: 35px;
  height: 35px;
}

.whats-floating:hover {
  transform: scale(1.1);
}

.whats-wrapper {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 9999;
}

.whats-floating {
  width: 60px;
  height: 60px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}

.whats-floating img {
  width: 35px;
  height: 35px;
}

.whats-floating:hover {
  transform: scale(1.1);
}

.whats-text {
  margin-top: 6px;
  font-size: 12px;
  color: #333;
  background: #ffffffdd;
  padding: 3px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  backdrop-filter: blur(2px);
}


/* mapa do google */

.map-wrapper {
  width: 100%;
  max-width: 900px;
  margin: 20px auto;
  border-radius: 20px;
  overflow: hidden; /* arredonda o mapa */
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.map-wrapper iframe {
  width: 100%;
  height: 400px;
  border: 0;
}