/*
Theme Name: Lumina Beauty
Theme URI: https://jackaquino.com.br/
Author: Jack Aquino
Description: Tema WordPress one-page moderno para Jack Aquino - Cabelos, Penteados e Maquiagens.
Version: 3.0.0
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: lumina-beauty
*/

:root{--gold:#d4af37;--gold-light:#f3e5ab;--bg-dark:#121212;--bg-card:#1e1e1e;--text-light:#f5f5f5;--text-muted:#aaa}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-dark);color:var(--text-light);overflow-x:hidden;font-family:'Montserrat',sans-serif}
a{text-decoration:none}
h1,h2,h3,h4,.logo-text{font-family:'Playfair Display',serif}
img{max-width:100%;height:auto}
.site-header{position:fixed;top:0;left:0;width:100%;z-index:1000;background:rgba(18,18,18,.95);backdrop-filter:blur(10px);border-bottom:1px solid rgba(212,175,55,.2);padding:15px 5%;display:flex;justify-content:space-between;align-items:center;gap:20px}
.brand h1{font-size:1.8rem;letter-spacing:2px;color:var(--gold);margin:0}
.brand span{font-size:.75rem;letter-spacing:3px;color:var(--text-muted);text-transform:uppercase}
.nav-links{display:flex;gap:25px;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--text-light);font-size:.9rem;transition:.3s}
.nav-links a:hover{color:var(--gold)}
.btn-wpp-header{background:linear-gradient(45deg,#25d366,#128c7e);color:#fff;padding:10px 20px;border-radius:30px;font-weight:600;font-size:.85rem;display:flex;align-items:center;gap:8px}
.hero-slider{position:relative;width:100%;height:90vh;margin-top:70px;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease-in-out;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.slide.active{opacity:1}
.slide-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(18,18,18,.9),rgba(18,18,18,.4))}
.slide-content{position:relative;z-index:2;text-align:center;max-width:800px;padding:20px}
.slide-content h2{font-size:3rem;color:var(--gold);margin:0 0 10px}
.slide-content h3{font-size:1.5rem;color:#fff;font-weight:300;margin:0 0 15px}
.slide-content p{font-size:1.1rem;color:var(--text-muted);margin:0 0 30px}
.btn-gold{background:linear-gradient(45deg,var(--gold),#b8860b);color:#000;padding:14px 32px;border-radius:30px;font-weight:700;text-transform:uppercase;letter-spacing:1px;display:inline-block}
.section-title{text-align:center;padding:60px 20px 20px}
.section-title h2{font-size:2.5rem;color:var(--gold);margin:0 0 8px}
.section-title p{color:var(--text-muted);margin:0}
.filter-buttons{display:flex;justify-content:center;gap:15px;margin-bottom:40px;flex-wrap:wrap;padding:0 20px}
.filter-btn{background:transparent;border:1px solid var(--gold);color:var(--gold);padding:10px 22px;border-radius:20px;cursor:pointer;transition:.3s;font-weight:600}
.filter-btn.active,.filter-btn:hover{background:var(--gold);color:#000}
.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:0 5% 60px;max-width:1400px;margin:auto}
.gallery-item{position:relative;border-radius:12px;overflow:hidden;height:330px;background:#1b1b1b}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.gallery-item:hover img{transform:scale(1.06)}
.gallery-info{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9),transparent);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;opacity:0;transition:opacity .3s}
.gallery-item:hover .gallery-info{opacity:1}
.gallery-info h4{color:var(--gold);font-size:1.2rem;margin:0 0 5px}
.gallery-info p{color:#ddd;font-size:.85rem;margin:0}
footer{background:#0a0a0a;border-top:1px solid rgba(212,175,55,.2);padding:50px 5% 20px;text-align:center}
.footer-content h2{color:var(--gold);font-size:2rem;margin:0 0 5px}
.footer-content p{color:var(--text-muted);margin:0 0 20px}
.wpp-btn-large{display:inline-flex;align-items:center;gap:10px;background:#25d366;color:#fff;padding:15px 35px;border-radius:40px;font-size:1.1rem;font-weight:700;margin-bottom:40px}
.copyright{border-top:1px solid #222;padding-top:20px;font-size:.8rem;color:#666}
@media(max-width:1000px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){.site-header{padding:12px 4%}.nav-links{display:none}.slide-content h2{font-size:2rem}.slide-content h3{font-size:1.2rem}.btn-wpp-header{padding:9px 12px}.brand span{display:block;letter-spacing:1.5px}.gallery-grid{grid-template-columns:1fr;padding-left:4%;padding-right:4%}.gallery-item{height:320px}}


/* ===== JACK AQUINO SITE V3 - HERO SLIDER ===== */
.hero-slider{
  position:relative;
  width:100%;
  height:clamp(560px,78vh,760px);
  min-height:560px;
  margin-top:70px;
  overflow:hidden;
  background:#111;
}
.slides-wrapper,.slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.slide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  background-size:cover;
  background-position:center center;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .8s ease, visibility .8s ease;
}
.slide.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:1;
}
.slide-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.46) 48%,rgba(0,0,0,.20) 100%),
             linear-gradient(0deg,rgba(0,0,0,.50),transparent 55%);
}
.slide-content{
  position:relative;
  z-index:2;
  width:min(900px,90%);
  margin-right:auto;
  margin-left:7%;
  text-align:left;
  padding:30px 20px;
  animation:jackSlideText .8s ease both;
}
.slide-kicker{
  display:block;
  color:var(--gold-light);
  font-size:.78rem;
  letter-spacing:4px;
  font-weight:700;
  margin-bottom:12px;
  text-transform:uppercase;
}
.slide-content h2{
  font-size:clamp(2.3rem,5vw,4.8rem);
  line-height:1.02;
  color:#fff;
  margin:0 0 10px;
}
.slide-content h3{
  font-size:clamp(1.1rem,2.2vw,1.65rem);
  color:var(--gold-light);
  font-weight:400;
  margin:0 0 15px;
}
.slide-content p{
  max-width:650px;
  font-size:clamp(.95rem,1.5vw,1.15rem);
  line-height:1.7;
  color:#eee;
  margin:0 0 28px;
}
.slider-arrow{
  position:absolute;
  z-index:5;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  background:rgba(0,0,0,.28);
  color:#fff;
  font-size:27px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.25s ease;
  backdrop-filter:blur(5px);
}
.slider-arrow:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:#000;
}
.slider-prev{left:24px}
.slider-next{right:24px}
.slider-dots{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  align-items:center;
}
.slider-dots .dot{
  width:11px;
  height:11px;
  padding:0;
  border:1px solid #fff;
  border-radius:50%;
  background:rgba(255,255,255,.35);
  cursor:pointer;
  transition:.25s ease;
}
.slider-dots .dot.active{
  width:30px;
  border-radius:10px;
  background:var(--gold);
  border-color:var(--gold);
}
@keyframes jackSlideText{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
.slide.active .slide-content{animation:jackSlideText .8s ease both}

@media(max-width:768px){
  .hero-slider{
    height:calc(100svh - 58px);
    min-height:590px;
    margin-top:58px;
  }
  .slide{
    background-position:center center;
  }
  .slide-overlay{
    background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.48) 58%,rgba(0,0,0,.20) 100%);
  }
  .slide-content{
    width:92%;
    margin:0 auto;
    padding:30px 12px 70px;
    text-align:center;
    align-self:flex-end;
  }
  .slide-kicker{
    font-size:.68rem;
    letter-spacing:2.5px;
  }
  .slide-content h2{font-size:2.25rem}
  .slide-content h3{font-size:1.12rem}
  .slide-content p{font-size:.95rem;line-height:1.5;margin-bottom:22px}
  .btn-gold{padding:12px 22px;font-size:.82rem}
  .slider-arrow{
    width:40px;
    height:40px;
    font-size:22px;
    top:45%;
  }
  .slider-prev{left:10px}
  .slider-next{right:10px}
  .slider-dots{bottom:16px}
}