/*
Theme Name: Studio Nails WP
Author: Shilohtech
Description: Tema WordPress completo para Studio de Nails com Amelia integrado
Version: 1.0
*/

body {
  font-family: 'Arial', sans-serif;
  color: #222;
  background-color: #fff;
  line-height: 1.6;
  margin:0;
  padding:0;
  scroll-behavior: smooth;
}

a { color:#0056b3; text-decoration:none; }
a:hover { text-decoration: underline; }

.container { width:90%; max-width:1200px; margin:0 auto; padding:40px 0; }

/* HERO */
.heroBanner { text-align:center; margin-bottom:20px; }
.heroBanner img { max-width:300px; width:100%; border-radius:10px; }
.title { font-size:2.8rem; text-align:center; margin:15px 0 5px; }
.subtitle { font-size:1.3rem; text-align:center; color:#555; margin-bottom:40px; }

/* MENU */
.topNav {
  position: fixed;
  top:12px;
  left:50%;
  transform: translateX(-50%);
  z-index:2000;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  padding:12px;
  background: rgba(255,255,255,0.9);
  border-radius:14px;
  border:1px solid #ddd;
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
}
.topNav a { font-weight:600; padding:8px 12px; border-radius:999px; transition:.25s; }
.topNav a:hover { background: rgba(0,86,179,0.1); }

/* SEÇÕES */
.section { margin-bottom:60px; }
.section h2 { text-align:center; font-size:2rem; margin-bottom:25px; color:#0056b3; }

/* CARDS DE SERVIÇOS */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.card.price-card { border:1px solid #ddd; border-radius:12px; padding:20px; background:#fafafa; transition:all 0.3s ease; }
.card.price-card:hover { transform:translateY(-5px); box-shadow:0 5px 15px rgba(0,0,0,0.1); }
.price-card h4 { text-align:center; margin-bottom:15px; font-size:1.3rem; color:#0056b3; }
.list { list-style:none; padding:0; }
.item { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #eee; }
.item:last-child { border-bottom:none; }
.service-name { font-weight:500; }
.price { font-weight:700; }

/* SOBRE */
.about-text { max-width:860px; margin:0 auto; text-align:center; }
.about-text p { margin-bottom:12px; color:#333; }

/* GALERIA */
.galleryGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:15px; }
.galleryCard img { width:100%; border-radius:10px; object-fit:cover; transition:transform 0.3s ease; }
.galleryCard img:hover { transform: scale(1.05); }

/* ENDEREÇO */
.mapWrap iframe { border-radius:12px; width:100%; height:320px; border:0; }

/* BOTÕES FLUTUANTES */
.float { position:fixed; right:20px; bottom:20px; display:flex; flex-direction:column; gap:12px; z-index:1000; }
.fab { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-size:22px; text-decoration:none; transition:.3s; }
.fab.whats { background:#25D366; color:#fff; }
.fab.insta { background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color:#fff; }
.fab.top { background:#0056b3; color:#fff; font-size:20px; }

/* RESPONSIVIDADE */
@media screen and (max-width:768px){
  .grid { grid-template-columns:1fr; }
  .topNav { display:none; }
}

@media screen and (max-width:480px){
  .galleryGrid { grid-template-columns:1fr; }
  .title { font-size:2rem; }
  .subtitle { font-size:1.1rem; }
}
/* MENU MOBILE */
.mobile-menu-btn {
  display:none;
  position:fixed;
  top:18px;
  right:20px;
  z-index:3000;
  cursor:pointer;
  width:36px;
  height:28px;
  flex-direction:column;
  justify-content:space-between;
}

.mobile-menu-btn span {
  display:block;
  height:4px;
  width:100%;
  background:#0056b3;
  border-radius:2px;
  transition: all 0.3s ease;
}

/* MENU MOBILE ABERTO */
.mobileMenu {
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  background: rgba(255,255,255,0.98);
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:25px;
  z-index:2000;
}

.mobileMenu a {
  font-size:1.8rem;
  color:#0056b3;
  font-weight:600;
}

.mobileMenu.show { display:flex; }

/* ANIMAÇÃO HAMBURGUER ABERTO */
.mobile-menu-btn.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.mobile-menu-btn.open span:nth-child(2) { opacity:0; }
.mobile-menu-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* RESPONSIVIDADE */
@media screen and (max-width:768px){
  .topNav { display:none; }
  .mobile-menu-btn { display:flex; }
}