:root{
  --bg:        #15130E;
  --bg-panel:  #1F1B14;
  --bg-panel-2:#26211A;
  --paper:     #F3EEE4;
  --paper-dim: #C9C2B2;
  --gold:      #E3A63E;
  --gold-dim:  #B9822C;
  --rust:      #A64B2A;
  --line:      rgba(243,238,228,.12);
  --line-strong: rgba(243,238,228,.22);
  --radius:    2px;
  --ff-display: 'Anton', sans-serif;
  --ff-body:    'Work Sans', sans-serif;
  --ff-mono:    'JetBrains Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}
body{
  background:var(--bg);
  color:var(--paper);
  font-family:var(--ff-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit;}
ul{list-style:none;}
section{position:relative;}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }

.eyebrow{
  font-family:var(--ff-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--gold);}

h1,h2,h3{font-family:var(--ff-display); font-weight:400; text-transform:uppercase; line-height:.96; letter-spacing:.01em;}
.btn{
  font-family:var(--ff-mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 26px; border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.btn-solid{background:var(--gold); color:#171208;}
.btn-solid:hover{background:#f0b957; transform:translateY(-2px);}
.btn-outline{border-color:var(--line-strong); color:var(--paper);}
.btn-outline:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-2px);}

/* ============ HEADER ============ */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px;
  background:linear-gradient(to bottom, rgba(21,19,14,.9), rgba(21,19,14,0));
  transition:background .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{background:rgba(21,19,14,.92); backdrop-filter:blur(8px); padding:14px 32px; border-color:var(--line);}
.logo{display:flex; flex-direction:column; text-decoration:none; line-height:1;}
.logo .g1{font-family:var(--ff-display); font-size:22px; letter-spacing:.03em;}
.logo .g2{font-family:var(--ff-display); font-size:22px; letter-spacing:.03em; color:var(--gold);}
.logo small{font-family:var(--ff-mono); font-size:9px; letter-spacing:.2em; color:var(--paper-dim); margin-top:4px;}

nav.main-nav{display:flex; align-items:center; gap:38px;}
nav.main-nav ul{display:flex; gap:34px;}
nav.main-nav a{font-size:14px; text-decoration:none; position:relative; padding-bottom:4px;}
nav.main-nav a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .2s ease;}
nav.main-nav a:hover::after{width:100%;}

.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.burger span{width:24px; height:2px; background:var(--paper);}

@media (max-width:900px){
  nav.main-nav ul{display:none;}
  nav.main-nav .btn{display:none;}
  .burger{display:flex;}
}

@media (max-width:480px){
  header{padding:16px 20px;}
  header.scrolled{padding:12px 20px;}
  .logo img{height:36px;}
  .logo .g1, .logo span > span{font-size:16px;}
  .logo small{display:none;}
}

/* mobile drawer */
.mobile-drawer{
  position:fixed; inset:0; z-index:99; background:var(--bg);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:26px;
  padding:32px; transform:translateX(100%); transition:transform .35s ease;
}
.mobile-drawer.open{transform:translateX(0);}
.mobile-drawer a{font-family:var(--ff-display); font-size:32px; text-decoration:none; text-transform:uppercase;}
.mobile-drawer .close-drawer{position:absolute; top:24px; right:28px; background:none; border:none; color:var(--paper); font-size:28px; cursor:pointer;}
.mobile-drawer .btn{margin-top:12px; font-size:13px;}

/* ============ HERO ============ */
.hero{
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:150px 0 0;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(227,166,62,.10), transparent 55%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.hero-inner{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:end;
  padding-bottom:56px;
}
.hero-copy h1{font-size:clamp(48px,7vw,96px); margin:14px 0 22px;}
.hero-copy h1 em{font-style:normal; color:var(--gold);}
.hero-copy p{font-size:17px; color:var(--paper-dim); max-width:46ch; margin-bottom:30px;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:44px;}

.stat-row{display:flex; gap:40px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:20px;}
.stat{font-family:var(--ff-mono);}
.stat b{display:block; font-family:var(--ff-display); font-size:30px; color:var(--gold); font-weight:400;}
.stat span{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper-dim);}

/* ---- compare slider ---- */
.compare{
  position:relative; width:100%; aspect-ratio:4/5; border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--line-strong);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.compare-media{position:absolute; inset:0;}
.compare-after{
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:#d9cdb2;
}
.compare-after.compare-placeholder{
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.55), transparent 45%),
    linear-gradient(135deg,#e9dfc9 0%, #f4ede0 45%, #d9cdb2 100%);
}
.compare-after.compare-placeholder::before{
  content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:multiply;
  background-image:
    repeating-linear-gradient(0deg, rgba(90,75,50,.18) 0 2px, transparent 2px 84px),
    repeating-linear-gradient(90deg, rgba(90,75,50,.18) 0 2px, transparent 2px 84px);
}
.compare-after .shine{
  position:absolute; inset:-20%; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  animation:sweep 5s ease-in-out infinite;
}
@keyframes sweep{
  0%,100%{transform:translateX(-30%);}
  50%{transform:translateX(30%);}
}
.compare-before{
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:#45392a;
  clip-path:inset(0 calc(100% - var(--reveal,50%)) 0 0);
}
.compare-before.compare-placeholder{
  background-image:linear-gradient(135deg,#5c4d3a 0%, #45392a 45%, #6b5842 100%);
  filter:saturate(.75) brightness(.82);
}
.compare-before.compare-placeholder::before{
  content:""; position:absolute; inset:0; opacity:.55;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 2px, transparent 2px 84px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 2px, transparent 2px 84px),
    radial-gradient(ellipse at 25% 70%, rgba(0,0,0,.35), transparent 40%),
    radial-gradient(ellipse at 70% 30%, rgba(0,0,0,.3), transparent 35%);
}
.compare-line{
  position:absolute; top:0; bottom:0; left:var(--reveal,50%); width:2px; background:var(--gold);
  transform:translateX(-1px); pointer-events:none; z-index:3;
  box-shadow:0 0 12px rgba(227,166,62,.7);
}
.compare-label{
  position:absolute; top:18px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em;
  padding:6px 10px; background:rgba(21,19,14,.55); backdrop-filter:blur(4px); z-index:3;
}
.label-before{left:18px;}
.label-after{right:18px; color:var(--gold);}
.compare-slider{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  -webkit-appearance:none; appearance:none; background:transparent; cursor:ew-resize; z-index:4;
}
.compare-slider::-webkit-slider-runnable-track{background:transparent; height:100%;}
.compare-slider::-moz-range-track{background:transparent; height:100%;}
.compare-slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:52px; height:52px; border-radius:50%;
  background:var(--gold); border:4px solid var(--paper); cursor:ew-resize;
  box-shadow:0 4px 14px rgba(0,0,0,.5);
}
.compare-slider::-moz-range-thumb{
  width:44px; height:44px; border-radius:50%; background:var(--gold); border:4px solid var(--paper); cursor:ew-resize;
}
.compare-hint{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper-dim); z-index:3; pointer-events:none;
}

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr; padding-bottom:36px;}
  .compare{aspect-ratio:4/3;}
}

/* ============ MARQUEE ============ */
.marquee{
  background:var(--bg-panel); border-bottom:1px solid var(--line);
  overflow:hidden; padding:16px 0; white-space:nowrap;
}
.marquee-track{display:inline-flex; gap:0; animation:scroll 26s linear infinite;}
.marquee-track span{
  font-family:var(--ff-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-dim); padding:0 24px; display:inline-flex; align-items:center; gap:24px;
}
.marquee-track span::after{content:"•"; color:var(--gold);}
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ============ SECTION HEAD ============ */
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(32px,4.4vw,52px); margin-top:14px;}
.section-head p{color:var(--paper-dim); margin-top:16px; font-size:16px;}
section.pad{padding:110px 0;}
@media (max-width:640px){ section.pad{padding:70px 0;} }

/* ============ SERVIÇOS ============ */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);}
.service-card{
  background:var(--bg); padding:38px 32px; transition:background .2s ease;
}
.service-card:hover{background:var(--bg-panel);}
.service-card .icon{width:38px; height:38px; margin-bottom:22px; color:var(--gold);}
.service-card h3{font-family:var(--ff-body); font-weight:700; text-transform:none; font-size:19px; letter-spacing:0; margin-bottom:10px;}
.service-card p{color:var(--paper-dim); font-size:14.5px;}
@media (max-width:900px){ .services-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .services-grid{grid-template-columns:1fr;} }

/* ============ PROCESSO ============ */
.process-list{border-top:1px solid var(--line);}
.process-row{
  display:grid; grid-template-columns:90px 1fr 2fr; gap:24px; align-items:start;
  padding:34px 0; border-bottom:1px solid var(--line);
}
.process-row .num{font-family:var(--ff-mono); color:var(--gold); font-size:14px; padding-top:4px;}
.process-row h3{font-family:var(--ff-body); font-weight:700; text-transform:none; font-size:20px; letter-spacing:0;}
.process-row p{color:var(--paper-dim); font-size:15px; max-width:60ch;}
@media (max-width:760px){
  .process-row{grid-template-columns:50px 1fr; }
  .process-row p{grid-column:2; }
}

/* ============ GALLERY ============ */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.gallery-card .compare{aspect-ratio:1/1;}
.gallery-card figcaption{font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; color:var(--paper-dim); margin-top:12px;}
@media (max-width:900px){ .gallery-grid{grid-template-columns:1fr;} }

/* ============ PHOTO GRID (trabalhos) ============ */
.photo-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.photo-item{
  position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--line-strong); background:var(--bg-panel);
}
.photo-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease, filter .5s ease;
}
.photo-item:hover img{transform:scale(1.06); filter:brightness(.85);}
.photo-item .photo-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px 12px;
  background:linear-gradient(to top, rgba(21,19,14,.9), transparent);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--paper); opacity:0; transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
.photo-item:hover .photo-caption{opacity:1; transform:translateY(0);}
@media (max-width:900px){ .photo-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .photo-grid{grid-template-columns:1fr 1fr; gap:10px;} }

/* ============ ALBUM GRID (trabalhos por serviço) ============ */
.album-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.album-card{
  position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--line-strong); background:var(--bg-panel);
  padding:0; cursor:pointer; font:inherit; text-align:left;
}
.album-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease, filter .5s ease;
}
.album-card:hover img{transform:scale(1.08); filter:brightness(.7);}
.album-card:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.album-info{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 16px 14px;
  background:linear-gradient(to top, rgba(21,19,14,.92), transparent 75%);
  display:flex; flex-direction:column; gap:4px;
}
.album-info strong{
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  font-size:16px; letter-spacing:.02em; color:var(--paper);
}
.album-info small{
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold);
}
@media (max-width:900px){ .album-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:600px){ .album-grid{grid-template-columns:repeat(2,1fr); gap:10px;} }

/* ============ LIGHTBOX ============ */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(10,9,6,.94);
  display:none; align-items:center; justify-content:center;
  padding:60px 20px;
}
.lightbox.open{display:flex;}
.lightbox-figure{
  max-width:min(1000px, 92vw); max-height:80vh;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.lightbox-figure img{
  max-width:100%; max-height:72vh; width:auto; height:auto;
  border-radius:var(--radius); border:1px solid var(--line-strong);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7);
}
.lightbox-figure figcaption{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper-dim);
}
.lightbox-close{
  position:absolute; top:20px; right:24px; background:none; border:none;
  color:var(--paper); font-size:34px; line-height:1; cursor:pointer; z-index:2;
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%; border:1px solid var(--line-strong);
  background:rgba(21,19,14,.6); color:var(--paper); font-size:28px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.lightbox-nav:hover{background:rgba(21,19,14,.9); border-color:var(--gold); color:var(--gold);}
.lightbox-prev{left:16px;}
.lightbox-next{right:16px;}
.lightbox-counter{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; color:var(--paper-dim);
}
@media (max-width:600px){
  .lightbox-nav{width:42px; height:42px; font-size:22px;}
  .lightbox-close{top:14px; right:16px; font-size:28px;}
}

/* ============ TESTIMONIALS ============ */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.testi-card{background:var(--bg-panel); padding:32px;}
.testi-card .stars{color:var(--gold); font-size:14px; letter-spacing:2px; margin-bottom:16px;}
.testi-card p{font-size:15px; color:var(--paper); margin-bottom:20px;}
.testi-card .who{font-family:var(--ff-mono); font-size:12px; color:var(--paper-dim);}
@media (max-width:900px){ .testi-grid{grid-template-columns:1fr;} }

/* ============ CTA BANNER ============ */
.cta-banner{
  background:linear-gradient(120deg, var(--gold) 0%, var(--gold-dim) 100%);
  color:#171208; padding:90px 0; text-align:center;
}
.cta-banner h2{font-size:clamp(34px,5.5vw,64px); color:#171208; margin-bottom:20px;}
.cta-banner p{font-family:var(--ff-mono); font-size:14px; margin-bottom:34px; letter-spacing:.04em;}
.cta-banner .btn-solid{background:#171208; color:var(--paper);}
.cta-banner .btn-solid:hover{background:#231a10;}
.cta-banner .eyebrow{
  justify-content:center;
  color:#171208;
}
.cta-banner .eyebrow::before{
  background:#171208;
}

/* ============ FOOTER ============ */
footer{background:var(--bg-panel-2); padding:64px 0 28px; border-top:1px solid var(--line);}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid var(--line);}
.footer-top h4{font-family:var(--ff-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:18px;}
.footer-top ul li{margin-bottom:10px; font-size:14px; color:var(--paper-dim);}
.footer-top ul a{text-decoration:none;}
.footer-top ul a:hover{color:var(--gold);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-family:var(--ff-mono); font-size:11px; color:var(--paper-dim); flex-wrap:wrap; gap:10px;}
@media (max-width:760px){ .footer-top{grid-template-columns:1fr;} }

/* ============ FLOATING ACTIONS (WhatsApp / Instagram) ============ */
.float-actions{
  position:fixed; bottom:26px; right:26px; z-index:90;
  display:flex; flex-direction:column; gap:14px;
}
.wa-float, .ig-float{
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  box-shadow:0 8px 20px rgba(0,0,0,.4);
  transition:transform .2s ease;
}
.wa-float{background:#25D366;}
.ig-float{
  background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.wa-float:hover, .ig-float:hover{transform:scale(1.08);}
.wa-float svg, .ig-float svg{width:28px; height:28px;}

.skip-link{position:absolute; left:-999px; top:0; background:var(--gold); color:#171208; padding:10px 16px; z-index:200;}
.skip-link:focus{left:12px; top:12px;}