/* ============ TOKENS ============ */
:root{
  --bg: #0f0f10;
  --bg-2:#161618;
  --fg: #f6f6f6;
  --muted:#cfcfd6;
  --brand:#c79a54;      /* dourado */
  --brand-2:#96723b;    /* dourado escuro */
  --card: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.12);
  --shadow: 0 10px 35px rgba(0,0,0,.35);
}

.light{
  --bg:#ffffff;
  --bg-2:#f6f6f7;
  --fg:#121214;
  --muted:#4b4b56;
  --card: rgba(0,0,0,.06);
  --stroke: rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:'Inter',system-ui,Arial; line-height:1.55;
}

/* ============ HELPERS ============ */
.container{width:min(1200px,92%); margin-inline:auto}
.section{padding:7rem 0}
.section.alt{background:var(--bg-2)}
.center{text-align:center}
.muted{color:var(--muted)}
.accent{color:var(--brand)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem}

/* ============ NAV ============ */
.nav{
  position:sticky; top:0; z-index:40; backdrop-filter: blur(6px);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  border-bottom:1px solid var(--stroke);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; padding:1.2rem 0;
}
.brand{
  display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--fg);
  font-family:'Lora', serif; font-weight:700; font-size:2.2rem;
}
.brand .brand-mark{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:10px; background:var(--brand); color:#fff; font-weight:800;
}
.burger{display:none; background:transparent; border:0; color:var(--fg); font-size:2.8rem}
.navlist{display:flex; list-style:none; gap:2rem; padding:0; margin:0}
.navlist a{
  color:var(--fg); text-decoration:none; font-weight:500; padding:.6rem .2rem;
}
.navlist a.active,.navlist a:hover{color:var(--brand)}
.theme-switch{background:transparent; border:1px solid var(--stroke); color:var(--fg);
  width:40px;height:40px;border-radius:10px; display:grid; place-items:center}

/* ============ HERO ============ */
.hero{position:relative; min-height:85vh; display:grid; align-items:center}
.hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.55);
}
.hero-overlay{position:absolute; inset:0; background: radial-gradient(80% 70% at 10% 50%, rgba(0,0,0,.55), transparent)}
.hero-grid{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center}
.hero-text h1{
  font-family:'Lora',serif; font-weight:700; line-height:1.1;
  font-size: clamp(3.2rem, 5vw, 4.6rem); margin:0 0 1.2rem;
}
.hero-text p{font-size:1.7rem; color:#e9e9ee; max-width:62ch}
.cta-row{display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap}
.badges{display:flex; gap:1.2rem; list-style:none; padding:0; margin:2.2rem 0 0}
.badges li{display:flex; align-items:center; gap:.5rem; color:#eaeaf1}
.badges i{color:var(--brand)}

.hero-card{
  background:var(--card); border:1px solid var(--stroke); border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow)
}
.hero-card img{width:100%; height:300px; object-fit:cover; display:block}
.hero-card-caption{padding:.9rem 1.2rem; font-size:1.3rem; color:var(--muted)}

/* ============ TITLES & BUTTONS ============ */
.section-title{
  font-family:'Lora',serif; font-weight:700; font-size:clamp(2.4rem, 3.5vw, 3.4rem);
  margin:0 0 2rem;
}
.btn{
  display:inline-block; border:0; background:var(--brand); color:#fff;
  padding:1.1rem 2rem; border-radius:999px; font-weight:700; letter-spacing:.3px;
  text-decoration:none; transition:.25s; border:2px solid var(--brand);
}
.btn:hover{filter:brightness(1.05); transform:translateY(-2px)}
.btn-outline{background:transparent; color:var(--fg); border-color:var(--fg)}
.btn-small{padding:.6rem 1.2rem; font-size:1.4rem}

/* ============ SERVICES ============ */
.service{
  background:var(--card); border:1px solid var(--stroke); border-radius:14px; overflow:hidden; box-shadow:var(--shadow)
}
.service img{width:100%; height:200px; object-fit:cover}
.service-body{padding:1.4rem}
.service h3{margin:.4rem 0 1rem; font-family:'Lora',serif}
.list{display:grid; gap:.4rem; padding-left:1.2rem}
.list li{list-style:disc}

/* ============ GALLERY ============ */
.gallery-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem; margin-top:2rem;
}
.gallery-item{border-radius:12px; overflow:hidden; border:1px solid var(--stroke); background:var(--card)}
.gallery-item img{width:100%; height:230px; object-fit:cover; cursor:pointer; transition:.35s}
.gallery-item img:hover{transform:scale(1.04)}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index:60; padding:2rem}
.modal.open{display:flex}
.modal img{max-width:min(1000px, 92%); max-height:80vh; border-radius:12px; box-shadow:var(--shadow)}
.modal-close{
  position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:10px;
  background:#fff; color:#111; border:0; display:grid; place-items:center; font-size:2rem
}
.modal-caption{margin-top:1rem; color:#fff; text-align:center}

/* ============ PROCESS ============ */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem}
.step{background:var(--card); border:1px solid var(--stroke); border-radius:14px; padding:1.6rem; text-align:center}
.bubble{
  margin-inline:auto; width:44px;height:44px;border-radius:999px; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-weight:800; margin-bottom:.6rem
}

/* ============ TESTIMONIALS ============ */
.slider{max-width:820px; margin:1rem auto 0; position:relative}
.slide{display:none; text-align:center; background:var(--card); border:1px solid var(--stroke); border-radius:14px; padding:2rem}
.slide.active{display:block}
.slide p{font-size:1.7rem}
.slide h5{margin-top:1rem; color:var(--muted)}
.slider-controls{display:flex; gap:.6rem; justify-content:center; margin-top:1rem}
.dot{width:10px; height:10px; border-radius:999px; border:0; background:var(--stroke)}
.dot.active{background:var(--brand)}

/* ============ FAQ ============ */
.faq{max-width:900px; margin-inline:auto; display:grid; gap:1rem}
details{background:var(--card); border:1px solid var(--stroke); border-radius:12px; padding:1rem 1.2rem}
summary{cursor:pointer; font-weight:700}
details p{margin:.6rem 0 0}

/* ============ CONTACT ============ */
.contact-form{
  width:min(900px, 100%); margin-inline:auto; background:var(--card); border:1px solid var(--stroke);
  border-radius:14px; padding:1.6rem; box-shadow:var(--shadow)
}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%; padding:1rem 1.1rem; border-radius:10px; border:1px solid var(--stroke);
  background:color-mix(in oklab, var(--bg) 95%, #0000); color:var(--fg); font:400 1.5rem/1.3 'Inter'
}
.contact-form button{margin-top:.6rem}
.contact-info{display:flex; gap:1.2rem; justify-content:center; margin-top:1.2rem; flex-wrap:wrap}
.info{display:flex; align-items:center; gap:.6rem; color:var(--muted); text-decoration:none}

/* ============ FOOTER & FLOAT ============ */
.footer{border-top:1px solid var(--stroke); padding:1rem 0; background: color-mix(in oklab, var(--bg) 92%, transparent)}
.footer-grid{display:flex; align-items:center; justify-content:space-between}
.to-top{display:grid; place-items:center; width:38px; height:38px; background:var(--brand); color:#fff; border-radius:10px; text-decoration:none}
.whatsapp{
  position:fixed; right:18px; bottom:18px; width:56px;height:56px; border-radius:999px; background:#25d366; display:grid; place-items:center; color:#fff; font-size:2.2rem; box-shadow:var(--shadow); z-index:50
}

/* ============ MEDIA ============ */
@media (max-width:1060px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
}
@media (max-width:760px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .nav-inner{gap:.8rem}
  .burger{display:block}
  .nav nav{position:absolute; left:0; right:0; top:64px; display:none}
  .navlist{
    background:var(--bg); border:1px solid var(--stroke); border-radius:12px;
    margin:0 4%; padding:1rem; flex-direction:column
  }
  .navlist.show{display:block}
}

/* Remove outlines feios no click, mas mantém acessibilidade no teclado */
:focus-visible{outline:2px solid var(--brand); outline-offset:2px}