/* ============================================================
   HAMS OF RICHMOND — v3 "THE SHEARS & THE LIGHT"
   Camada de materiais e luz. Carregada DEPOIS de v2.css.
   Clean = contagem de elementos; rico = acabamento de cada um.
   Materiais: fio-de-ouro, vidro quente, entalhe, sombra âmbar,
   sala de luz por seção, ouro sólido só nos 2 CTAs de conversão.
   ============================================================ */

/* ---------- atmosfera: luz de cima, não túnel ---------- */
.vignette{
  background:radial-gradient(ellipse at 50% 30%,transparent 55%,rgba(0,0,0,.35) 100%)!important;
  opacity:1!important;
}

/* masthead sempre visível (o espetáculo agora é a tesoura) */
html.js .hero .masthead{opacity:1!important}

/* ================= TIPOGRAFIA: variação por seção ================= */
/* ghost-i fica reservado a hero + finale, com stroke acesa e halo */
.hero .ghost-i,.finale .ghost-i{
  -webkit-text-stroke:1px rgba(237,207,140,.85);
  filter:drop-shadow(0 0 14px rgba(201,164,92,.22));
}
.it-gold{font-style:italic;color:var(--gold)}
.it-lacquer{font-style:italic;color:var(--lacquer)}
.word-foil{
  background:linear-gradient(100deg,#7A5C2E,#C9A45C 35%,#EDCF8C 50%,#C9A45C 65%,#7A5C2E);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 18px rgba(201,164,92,.25));
}

/* ================= SALAS DE LUZ (key light por seção) ================= */
/* hero: a foto ilumina o título; piso vira fio aceso */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(1200px 820px at 72% 38%,rgba(201,164,92,.13),transparent 62%),
             radial-gradient(900px 600px at 8% 92%,rgba(166,57,42,.05),transparent 55%)}
.hero::after{height:1px;opacity:1;
  background:linear-gradient(90deg,transparent,var(--bronze) 18%,var(--gilt) 50%,var(--bronze) 82%,transparent);
  box-shadow:0 0 24px rgba(201,164,92,.25)}

/* house: vela à direita (fachada) */
.about{background:
  radial-gradient(1000px 720px at 86% 18%,rgba(201,164,92,.07),transparent 60%),
  radial-gradient(800px 620px at 0% 105%,rgba(21,27,40,.45),transparent 55%),
  var(--void)}

/* services: navy com lustre zenital (luz no lugar de sombra) */
.services{background:
  radial-gradient(1200px 700px at 50% -8%,rgba(201,164,92,.10),transparent 58%),
  radial-gradient(700px 500px at 94% 102%,rgba(166,57,42,.05),transparent 55%),
  linear-gradient(180deg,#161C2A,#11151F)}
.services::after{display:none}

/* ritual: brasa lacquer subindo por trás da frase */
.ritual-photo::after{background:
  radial-gradient(75% 65% at 50% 46%,transparent 22%,rgba(10,9,8,.55) 70%,var(--void) 96%),
  radial-gradient(52% 42% at 50% 64%,rgba(166,57,42,.12),transparent 70%)}
.ritual-quote{text-shadow:0 0 32px rgba(201,164,92,.30)}

/* steps: luz de piso (contra-plongée de espelho de barbearia) */
.steps{background:
  radial-gradient(900px 520px at 50% 118%,rgba(201,164,92,.08),transparent 60%),
  linear-gradient(180deg,#0A0908,#12100E)}

/* barbers: luz lateral de vitrine */
.team{background:
  radial-gradient(1000px 600px at 10% 6%,rgba(201,164,92,.07),transparent 60%),
  linear-gradient(180deg,#12100E,#0C0A09)}

/* gallery: void puro (respiro) */
.gallery{background:var(--void)}

/* reviews: lustre no canto */
.reviews{background:
  radial-gradient(1100px 640px at 84% -6%,rgba(201,164,92,.08),transparent 58%),
  var(--void)}

/* booking: navy com luz sobre o telefone */
.booking{background:
  radial-gradient(1000px 640px at 22% 0%,rgba(201,164,92,.09),transparent 58%),
  linear-gradient(180deg,#151B28,#10141E)}

/* location: rio frio + vitrine dourada */
.location{background:
  radial-gradient(900px 560px at 88% 100%,rgba(21,27,40,.60),transparent 60%),
  radial-gradient(800px 500px at 6% 0%,rgba(201,164,92,.06),transparent 55%),
  var(--smoke)}

/* finale: o altar — halo central e nada mais */
.finale{padding-block:clamp(10rem,25vh,16rem);background:
  radial-gradient(1200px 700px at 50% 30%,rgba(201,164,92,.12),transparent 60%),
  radial-gradient(800px 400px at 50% 108%,rgba(166,57,42,.06),transparent 60%),
  var(--void)}
.finale-head{filter:drop-shadow(0 0 40px rgba(201,164,92,.15))}

/* footer: porão com fio de latão no topo */
.footer{border-top:0;background:linear-gradient(180deg,#0C0A09,#080706)}
.footer::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,164,92,.40) 30%,rgba(237,207,140,.60) 50%,rgba(201,164,92,.40) 70%,transparent)}
.footer::before{opacity:.6}
.footer-crest{width:160px;animation:none;
  filter:drop-shadow(0 0 40px rgba(201,164,92,.35)) drop-shadow(0 20px 60px rgba(122,72,20,.30))}

/* crest do hero: gravado, sem pulso */
.hero-crest,.hero.settled .hero-crest{animation:none!important;
  filter:drop-shadow(0 1px 0 rgba(237,207,140,.25)) drop-shadow(0 -1px 0 rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(201,164,92,.28))!important}

/* ================= NAV: vidro quente + fio de latão ================= */
.nav.scrolled{background:linear-gradient(180deg,rgba(16,13,10,.80),rgba(10,9,8,.62));border-bottom:0}
@supports (backdrop-filter:blur(18px)){.nav.scrolled{backdrop-filter:blur(18px) saturate(1.15)}}
.nav.scrolled::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,164,92,.35) 28%,rgba(237,207,140,.55) 50%,rgba(201,164,92,.35) 72%,transparent)}

/* ================= CTAs: hierarquia de ouro ================= */
/* Os DOIS CTAs de conversão viram Placa de Ouro (hero + finale). */
.hero-ctas .btn-gold,.finale .btn-big{
  background:linear-gradient(135deg,#8A6832,#C9A45C 42%,#EDCF8C 50%,#C9A45C 58%,#7A5C2E);
  color:var(--void);border:1px solid rgba(255,244,214,.35);
  box-shadow:inset 0 1px 0 rgba(255,244,214,.55),inset 0 -2px 6px rgba(60,40,10,.50),
             0 20px 50px -14px rgba(122,72,20,.40),0 2px 4px rgba(0,0,0,.45);
  text-shadow:0 1px 0 rgba(255,248,225,.35);
  transition:transform .2s ease,box-shadow .3s ease;
}
.hero-ctas .btn-gold:hover,.finale .btn-big:hover{
  transform:translateY(-2px);color:var(--void);background:linear-gradient(135deg,#8A6832,#C9A45C 40%,#F4DCA0 50%,#C9A45C 60%,#7A5C2E);
  box-shadow:inset 0 1px 0 rgba(255,244,214,.6),inset 0 -2px 6px rgba(60,40,10,.5),
             0 26px 60px -14px rgba(122,72,20,.5),0 0 48px -10px rgba(201,164,92,.25);
}
.hero-ctas .btn-gold .digits,.finale .btn-big .digits{color:var(--void)}
/* secundários: ghost com fio-de-ouro (material, não wireframe) */
.btn-ghost,.nav-call,.ritual-copy .btn-gold,.callbar-call{
  border:1px solid transparent;
  background:linear-gradient(180deg,rgba(201,164,92,.14),rgba(201,164,92,.03)) padding-box,
             linear-gradient(180deg,rgba(237,207,140,.85),rgba(122,92,46,.45)) border-box;
  box-shadow:inset 0 1px 0 rgba(237,207,140,.25),0 10px 30px -10px rgba(201,164,92,.25),0 18px 50px -18px rgba(0,0,0,.6);
}

/* ================= TICKER: faixa gravada de smallcaps ================= */
.ticker{padding:1.1rem 0;opacity:1;
  background:linear-gradient(180deg,#0E0C0A,#12100E 55%,#0B0A08);
  border-block:1px solid rgba(0,0,0,.60);
  box-shadow:inset 0 1px 0 rgba(237,207,140,.08),inset 0 -1px 0 rgba(237,207,140,.05);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tk{font-family:"Instrument Sans",sans-serif;font-size:.8rem!important;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--bronze);
  -webkit-text-stroke:0!important;opacity:1}
.tk b{color:var(--gold);-webkit-text-stroke:0;font-weight:600}
.tk i{color:var(--lacquer);font-size:1em;vertical-align:0;padding-inline:1.2em}

/* ================= STATS: entalhe + número que emite luz ================= */
.stats{gap:2.5rem;border:0;background:none}
.stat{position:relative;background:none;padding:1.6rem 0 0;
  border-top:1px solid rgba(201,164,92,.22);box-shadow:0 -1px 0 rgba(0,0,0,.60)}
.stat::before{content:"";position:absolute;left:0;right:30%;top:0;height:70px;pointer-events:none;
  background:radial-gradient(80% 100% at 30% 0%,rgba(201,164,92,.07),transparent)}
.stat-value{color:var(--gilt);text-shadow:0 0 22px rgba(201,164,92,.22)}

/* ================= SERVICES: fios que apagam + preço aceso ================= */
.srow{border-top:1px solid transparent;
  border-image:linear-gradient(90deg,rgba(237,207,140,.38),rgba(122,92,46,.12) 55%,transparent) 1}
.srows{border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,rgba(237,207,140,.30),rgba(122,92,46,.10) 55%,transparent) 1}
.srow-price b{color:var(--gilt);text-shadow:0 0 18px rgba(201,164,92,.35)}
.srow-photo{border:1px solid transparent;
  background:linear-gradient(#0E1420,#0E1420) padding-box,
             linear-gradient(160deg,rgba(237,207,140,.45),rgba(122,92,46,.10)) border-box;
  box-shadow:0 18px 44px -16px rgba(0,0,0,.55)}

/* ================= STEPS: numerais acesos pendendo de entalhe ================= */
.steps-grid li{padding-top:1.6rem;
  border-top:1px solid rgba(201,164,92,.20);box-shadow:0 -1px 0 rgba(0,0,0,.60)}
.step-num{-webkit-text-stroke:1px rgba(237,207,140,.70);
  filter:drop-shadow(0 0 12px rgba(201,164,92,.25))}

/* ================= BARBERS: retratos como quadros pendurados ================= */
.tcard-photo{border:1px solid transparent;
  background:linear-gradient(#0C0A09,#0C0A09) padding-box,
             linear-gradient(165deg,rgba(237,207,140,.50),rgba(122,92,46,.12) 45%,rgba(237,207,140,.24)) border-box;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.65),0 36px 90px -30px rgba(122,72,20,.25);
  transition:box-shadow .4s ease}
.tcard:hover .tcard-photo{
  box-shadow:0 30px 66px -22px rgba(0,0,0,.7),0 44px 100px -30px rgba(122,72,20,.34),0 0 48px -10px rgba(201,164,92,.20)}
.tcard-name{color:var(--bone)}

/* ================= GALLERY: grid editorial + vidro fino ================= */
.gallery-grid{grid-template-columns:1.4fr 1fr 1.2fr;grid-auto-rows:minmax(300px,380px);gap:1.5rem 2rem}
@media (max-width:900px){.gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:200px;gap:1rem}}
.gtile{border:1px solid rgba(201,164,92,.14);
  box-shadow:inset 0 1px 0 rgba(237,207,140,.06),0 14px 34px -14px rgba(0,0,0,.50)}
.gtile:hover{border-color:rgba(237,207,140,.45);transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(237,207,140,.12),0 22px 50px -16px rgba(0,0,0,.60),0 0 40px -8px rgba(201,164,92,.22)}
/* lingote parado, sem goldpan piscando */
.gtile--gold{animation:none;background:linear-gradient(135deg,#8A6832,#C9A45C 42%,#EDCF8C 50%,#C9A45C 58%,#7A5C2E);
  box-shadow:inset 0 1px 0 rgba(255,244,214,.55),inset 0 -2px 6px rgba(60,40,10,.50),0 20px 50px -14px rgba(122,72,20,.40)}

/* ================= REVIEWS: vidro quente ================= */
.review-card{border:1px solid transparent;
  background:linear-gradient(172deg,rgba(26,22,17,.86),rgba(14,12,10,.94)) padding-box,
             linear-gradient(168deg,rgba(237,207,140,.38),rgba(122,92,46,.10) 42%,rgba(237,207,140,.20)) border-box;
  box-shadow:inset 0 1px 0 rgba(237,207,140,.08),0 24px 55px -20px rgba(0,0,0,.60),0 34px 80px -30px rgba(122,72,20,.18)}
.review-card::before{display:none}
.google-rating{border:1px solid rgba(237,207,140,.22);background:rgba(14,12,10,.55)}
@supports (backdrop-filter:blur(10px)){.google-rating{backdrop-filter:blur(10px)}}
/* avatares re-tintados na paleta da casa */
.review-avatar{color:var(--gilt)!important;border:1px solid rgba(237,207,140,.25)}
.avatar-teal,.avatar-green{background:rgba(201,164,92,.16)!important}
.avatar-purple,.avatar-blue{background:rgba(21,27,40,.9)!important}
.avatar-red{background:rgba(166,57,42,.22)!important}

/* ================= BOOKING: telefone-herói em foil com glow ================= */
.booking-grid{grid-template-columns:1fr;max-width:860px}
.book-phone{font-size:clamp(3.2rem,7vw,6.4rem);position:relative;
  background:linear-gradient(100deg,#7A5C2E,#C9A45C 35%,#EDCF8C 50%,#C9A45C 65%,#7A5C2E)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  filter:drop-shadow(0 6px 24px rgba(201,164,92,.28)) drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.book-phone::before{content:"";position:absolute;inset:-30% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 80% at 50% 55%,rgba(201,164,92,.13),transparent 70%);
  animation:phoneglow 5s ease-in-out infinite}
@keyframes phoneglow{0%,100%{opacity:.7}50%{opacity:1}}
.hours tr.today td{border-left:2px solid var(--gilt);
  background:linear-gradient(90deg,rgba(201,164,92,.10),transparent 70%)}

/* ================= ABOUT: moldura de fio-de-ouro na fachada ================= */
.about-photo{outline:0;border:1px solid transparent;
  background:linear-gradient(var(--void),var(--void)) padding-box,
             linear-gradient(150deg,rgba(237,207,140,.50),rgba(122,92,46,.14) 42%,rgba(237,207,140,.26)) border-box;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.60),0 40px 90px -30px rgba(122,72,20,.22)}

/* ================= LOCATION: placa de latão gravada ================= */
.loc-map svg{border:1px solid transparent;
  background:linear-gradient(#0B0A08,#0B0A08) padding-box,
             linear-gradient(155deg,rgba(237,207,140,.40),rgba(122,92,46,.12)) border-box;
  box-shadow:inset 0 0 60px rgba(0,0,0,.55),0 20px 50px -18px rgba(0,0,0,.55)}
.mdot{filter:drop-shadow(0 0 8px rgba(166,57,42,.8))}

/* ================= FOTOS: grade quente permanente ================= */
img.duo{filter:grayscale(.2) sepia(.22) saturate(1.15) hue-rotate(-8deg) contrast(1.06) brightness(.9)}
img.duo.developed,a:hover img.duo,figure:hover img.duo,.tcard:hover img.duo{
  filter:grayscale(0) sepia(.08) saturate(1.1) hue-rotate(-6deg) contrast(1.04) brightness(.96)}
/* estado final do emerge = grade (nunca cor crua) */
html.js .hero.settled .hero-photo img,
html.js .about-photo.is-in img,
html.js .tcard.is-in .tcard-photo img,
html.js .srow.open .srow-photo img,
html.js .gtile.is-in img,
html.js .ritual.is-in .ritual-photo img,
html.js .loc-facade.is-in img{
  filter:grayscale(.2) sepia(.22) saturate(1.15) hue-rotate(-8deg) contrast(1.06) brightness(.9)}
html.js .hero.settled .hero-photo img{filter:saturate(.85) contrast(1.1) brightness(.9)}
/* base escura quente nas figuras */
.tcard-photo::after,.about-photo::after,.gtile::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,9,8,0) 55%,rgba(10,9,8,.5));mix-blend-mode:multiply}
.tcard-photo,.about-photo,.gtile{position:relative}

/* thread mais presente */
.thread path{stroke-width:1.5;opacity:.8}

/* fio-condutor não compete com a tesoura no mobile */
@media (max-width:640px){.thread{display:none}}