/* =========================================================
   God Given — Studio Barbearia & Tattoo
   Identidade: preto + dourado + prata · Conquera Bold + Mont
   ========================================================= */

/* Conquera Bold: se tiver o arquivo, coloque em assets/fonts/conquera-bold.woff2
   e ele passa a ser usado automaticamente. Sem ele, cai no Michroma. */
@font-face {
  font-family: "Conquera";
  src: url("../fonts/conquera-bold.woff2") format("woff2"),
       url("../fonts/conquera-bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #0b0b0b;
  --bg-2: #111111;
  --card: #161616;
  --card-2: #1c1c1c;
  --line: #2a2a2a;
  --gold: #c9a45c;
  --gold-light: #e0c78f;
  --silver: #c8c8c8;
  --text: #ededed;
  --muted: #9a9a9a;

  --f-display: "Conquera", "Michroma", "Syncopate", sans-serif;
  --f-body: "Mont", "Montserrat", system-ui, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 4px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: #000; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Tipografia ---------- */
.display {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--muted); font-weight: 300; max-width: 56ch; }
.gold { color: var(--gold); }
.silver { color: var(--silver); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px;
  font-family: var(--f-body); font-size: 13px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid var(--gold); border-radius: var(--radius);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
  cursor: pointer;
}
.btn--solid { background: var(--gold); color: #0b0b0b; }
.btn--solid:hover { background: var(--gold-light); border-color: var(--gold-light); }
.btn--ghost { color: var(--gold); background: transparent; }
.btn--ghost:hover { background: var(--gold); color: #0b0b0b; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-scrolled { background: rgba(11, 11, 11, .88); backdrop-filter: blur(10px); border-color: var(--line); }
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.header__logo img { height: 44px; width: auto; }
@media (max-width: 600px) { .header__logo img { height: 32px; } }
.header__nav { display: flex; gap: 32px; align-items: center; }
.header__nav a {
  font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  transition: color .3s;
}
.header__nav a:hover { color: var(--gold); }
.header__nav .btn { padding: 12px 20px; color: var(--gold); }
.header__nav .btn:hover { color: #0b0b0b; }
@media (max-width: 860px) { .header__nav a:not(.btn) { display: none; } }

/* ---------- Foto provisória ----------
   Troque cada .ph por <img src="..."> quando tiver as fotos reais.
   O texto em data-label diz qual foto vai em cada espaço. */
.ph {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 80% at 30% 20%, #2b2b2b 0%, #141414 55%, #0b0b0b 100%);
}
.ph::before {
  content: ""; position: absolute; inset: 0; opacity: .25;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.ph::after {
  content: attr(data-label);
  position: absolute; left: 16px; bottom: 14px; right: 16px;
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(201, 164, 92, .55);
}
.ph img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.ph:has(img)::after, .ph:has(img)::before { display: none; }
/* Portfólio e Instagram mostram a cor original da foto */
.hero__bg.ph:has(img)::after { display: block; z-index: 2; }
.tile .ph img, .ig__post .ph img, .feature__media .ph img, .card .ph img { filter: none; }

/* ---------- Seções ---------- */
.section { padding: clamp(80px, 12vw, 150px) 0; position: relative; }
.section--alt { background: var(--bg-2); }
.section__head { margin-bottom: clamp(40px, 6vw, 72px); display: grid; gap: 20px; }
.section__head .display { font-size: clamp(30px, 5vw, 58px); }

.divider {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  font-family: var(--f-display); font-size: clamp(14px, 2vw, 20px); letter-spacing: .5em; text-transform: uppercase; color: var(--text);
}
.divider::before, .divider::after { content: ""; flex: 1; max-width: 160px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.divider::after { transform: scaleX(-1); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* =========================================================
   PÁGINA PRINCIPAL (link na bio)
   ========================================================= */
.home { min-height: 100vh; display: flex; flex-direction: column; }
.home__hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 62vh; }
.home__hero .ph { min-height: 62vh; }
.home__hero-over {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px;
  background: linear-gradient(180deg, rgba(11,11,11,.25) 0%, rgba(11,11,11,.35) 55%, var(--bg) 100%);
  pointer-events: none;
}
.home__logo { width: min(560px, 84vw); margin: 0 auto 22px; filter: drop-shadow(0 6px 30px rgba(0,0,0,.6)); }
.home__tag { font-size: 12px; letter-spacing: .4em; text-transform: uppercase; color: var(--silver); margin: 0; }

.home__choose { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: -60px; position: relative; z-index: 2; }
.choice {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 300px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; isolation: isolate;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.choice .ph { position: absolute; inset: 0; z-index: -2; transition: transform 1.2s var(--ease); }
.choice::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, rgba(11,11,11,.92) 100%); }
.choice:hover { border-color: var(--gold); transform: translateY(-4px); }
.choice:hover .ph { transform: scale(1.06); }
.choice .ph::after { top: 16px; bottom: auto; }
.choice__kicker { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.choice__title { font-family: var(--f-display); font-size: clamp(24px, 3.2vw, 38px); text-transform: uppercase; line-height: 1.05; margin: 8px 0 10px; }
.choice__text { color: var(--muted); font-size: 14px; margin: 0 0 18px; max-width: 34ch; }
.choice__go { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); display: inline-flex; gap: 10px; align-items: center; }
.choice__go span { transition: transform .3s var(--ease); }
.choice:hover .choice__go span { transform: translateX(6px); }

.links { display: grid; gap: 12px; max-width: 560px; margin: 56px auto 0; }
.link {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 14px; font-weight: 500; letter-spacing: .06em;
  transition: border-color .3s, background .3s;
}
.link:hover { border-color: var(--gold); background: var(--card-2); }
.link svg { width: 20px; height: 20px; color: var(--gold); flex: none; }
.link small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.link__arrow { margin-left: auto; color: var(--gold); }

.home__foot { text-align: center; color: var(--muted); font-size: 12px; padding: 56px 16px 40px; letter-spacing: .08em; }

@media (max-width: 720px) {
  .home__hero, .home__hero .ph { min-height: 54vh; }
  .home__choose { grid-template-columns: 1fr; margin-top: -40px; }
  .choice { min-height: 230px; }
}

/* =========================================================
   HERO (tattoo)
   ========================================================= */
.hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; padding: 140px 0 72px; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,11,.35) 0%, rgba(11,11,11,.55) 60%, var(--bg) 100%); }
.hero__title { font-size: clamp(46px, 10.5vw, 150px); }
.hero__title .gold { display: block; }
.hero__kicker { font-family: var(--f-display); font-size: clamp(14px, 2vw, 20px); letter-spacing: .3em; color: var(--gold); margin-bottom: 18px; }
.hero__row { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-end; justify-content: space-between; margin-top: 36px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.badge-spin {
  width: 128px; height: 128px; flex: none; position: relative; display: grid; place-items: center;
  color: var(--gold);
}
.badge-spin svg.ring { position: absolute; inset: 0; animation: spin 18s linear infinite; }
.badge-spin text { font-size: 9.5px; letter-spacing: .32em; fill: var(--silver); text-transform: uppercase; font-family: var(--f-body); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 720px) { .badge-spin { display: none; } }

/* ---------- Serviço principal (Realismo) ---------- */
.feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.feature__media { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feature__media .ph { aspect-ratio: 3/4; border-radius: var(--radius); }
.feature__media .ph:first-child { grid-row: span 2; aspect-ratio: auto; }
.feature__list { list-style: none; padding: 0; margin: 32px 0 40px; display: grid; gap: 0; }
.feature__list li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); }
.feature__list li:last-child { border-bottom: 1px solid var(--line); }
.feature__list b { font-family: var(--f-display); color: var(--gold); font-size: 13px; padding-top: 3px; }
.feature__list strong { display: block; font-weight: 600; letter-spacing: .04em; margin-bottom: 2px; }
.feature__list span { color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } }

/* ---------- Serviços secundários ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: border-color .3s, transform .3s var(--ease);
}
.card:hover { border-color: rgba(201,164,92,.5); transform: translateY(-4px); }
.card .ph { aspect-ratio: 4/3; }
.card__body { padding: 24px; }
.card__title { font-family: var(--f-display); font-size: 17px; text-transform: uppercase; margin: 0 0 8px; }
.card__text { color: var(--muted); font-size: 14px; margin: 0; }

/* ---------- Portfólio estilo Netflix ---------- */
.rows { display: grid; gap: 48px; }
.row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.row__title { font-family: var(--f-display); font-size: clamp(15px, 2vw, 20px); text-transform: uppercase; margin: 0; }
.row__ctrl { display: flex; gap: 8px; }
.row__ctrl button {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--gold);
  cursor: pointer; font-size: 16px; transition: border-color .3s, background .3s;
}
.row__ctrl button:hover { border-color: var(--gold); background: rgba(201,164,92,.08); }
.row__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 24vw, 280px); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 10px var(--gutter) 24px; margin: 0 calc(var(--gutter) * -1);
}
.row__track::-webkit-scrollbar { display: none; }
.tile {
  scroll-snap-align: start; aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; position: relative;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease); cursor: pointer;
}
.tile .ph { position: absolute; inset: 0; }
.tile__cap {
  position: absolute; inset: auto 0 0 0; padding: 40px 16px 16px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.9));
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateY(8px);
  transition: opacity .35s, transform .35s;
}
.tile:hover { transform: scale(1.06); box-shadow: 0 24px 50px rgba(0,0,0,.6); z-index: 2; }
.tile:hover .tile__cap { opacity: 1; transform: none; }
@media (hover: none) { .tile__cap { opacity: 1; transform: none; } }

/* ---------- Quem sou (capa de revista) ---------- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.cover { position: relative; aspect-ratio: 4/5; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cover .ph { position: absolute; inset: 0; }
.cover__mast {
  position: absolute; top: 18px; left: 22px; right: 22px;
  font-family: var(--f-display); font-size: clamp(38px, 6vw, 72px); line-height: .9; color: var(--text);
  mix-blend-mode: difference; text-transform: uppercase;
}
.cover__side { position: absolute; left: 22px; bottom: 22px; }
.cover__side small { display: block; font-size: 10px; letter-spacing: .3em; color: var(--gold); text-transform: uppercase; }
.cover__side strong { font-family: var(--f-display); font-size: clamp(20px, 2.6vw, 30px); text-transform: uppercase; }
.cover__issue { position: absolute; right: 22px; bottom: 22px; text-align: right; font-size: 10px; letter-spacing: .3em; color: var(--silver); text-transform: uppercase; }
.about__text p { color: var(--muted); }
.about__sign { margin-top: 28px; font-family: var(--f-display); color: var(--gold); letter-spacing: .2em; font-size: 14px; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }

/* ---------- Instagram (barbearia) ---------- */
.ig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ig__post { background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: block; transition: border-color .3s; }
.ig__post:hover { border-color: var(--gold); }
.ig__post .ph { aspect-ratio: 1; }
.ig__bar { display: flex; gap: 14px; padding: 12px 14px; color: var(--silver); }
.ig__bar svg { width: 18px; height: 18px; }
.ig__bar svg:last-child { margin-left: auto; }
@media (max-width: 720px) { .ig { grid-template-columns: repeat(2, 1fr); gap: 10px; } .ig__bar { padding: 10px; gap: 10px; } }

/* ---------- Hero 50/50 (barbearia) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.split__text { display: flex; flex-direction: column; justify-content: center; padding: 140px var(--gutter) 80px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
.split__text .display { font-size: clamp(40px, 6.4vw, 92px); margin: 18px 0 24px; }
.split__media { position: relative; }
.split__media .ph { position: absolute; inset: 0; }
.split__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, transparent 25%); }
.split__title { font-size: clamp(34px, 4.4vw, 64px) !important; }
.split__sub { display: block; font-size: .5em; letter-spacing: .12em; color: var(--silver); margin-top: .35em; }
.split__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.split__meta { display: flex; gap: 36px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.split__meta strong { display: block; font-family: var(--f-display); font-size: 22px; color: var(--gold); }
.split__meta span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; min-height: auto; }
  .split__media { min-height: 60vh; order: -1; }
  .split__media::after { background: linear-gradient(180deg, transparent 50%, var(--bg) 100%); }
  .split__text { padding: 8px var(--gutter) 72px; }
}

/* ---------- Lista de serviços (barbearia) ---------- */
.menu { display: grid; gap: 0; border-top: 1px solid var(--line); }
.menu__item { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); }
.menu__name { font-family: var(--f-display); font-size: clamp(17px, 2.2vw, 24px); text-transform: uppercase; }
.menu__desc { grid-column: 1; color: var(--muted); font-size: 14px; margin: 0; }
.menu__price { grid-row: 1 / span 2; grid-column: 2; font-family: var(--f-display); color: var(--gold); font-size: clamp(16px, 2vw, 22px); text-align: right; }
.menu__price small { display: block; font-family: var(--f-body); font-size: 11px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.menu__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

/* ---------- Localização ---------- */
.location { display: grid; grid-template-columns: 1fr 1.3fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.location__info { padding: clamp(28px, 4vw, 52px); background: var(--card); display: grid; gap: 28px; align-content: center; }
.location__info h3 { font-family: var(--f-display); text-transform: uppercase; font-size: 13px; letter-spacing: .2em; color: var(--gold); margin: 0 0 6px; font-weight: 700; }
.location__info p { margin: 0; color: var(--text); }
.location__info a:hover { color: var(--gold); }
.location__map { min-height: 380px; position: relative; }
.location__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.9); }
@media (max-width: 900px) { .location { grid-template-columns: 1fr; } .location__map { min-height: 300px; } }

/* ---------- CTA final ---------- */
.cta { text-align: center; }
.cta .display { font-size: clamp(32px, 6vw, 76px); margin: 20px 0; }
.cta .lead { margin: 0 auto 36px; }
.cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

/* ---------- Rodapé ---------- */
.footer { border-top: 1px solid var(--line); padding: 64px 0 32px; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
.footer__logo { width: 220px; margin-bottom: 18px; }
.footer p, .footer li { color: var(--muted); font-size: 14px; margin: 0; }
.footer h4 { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; font-weight: 600; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer a:hover { color: var(--gold); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- Botão flutuante (mobile) ---------- */
.float-cta {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: none; align-items: center; gap: 10px;
  padding: 14px 20px; border-radius: 40px; background: var(--gold); color: #0b0b0b;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.float-cta svg { width: 18px; height: 18px; }
@media (max-width: 860px) { .float-cta { display: inline-flex; } }

/* =========================================================
   DOURADO PREMIUM — escrita metálica e botões com brilho
   ========================================================= */
:root {
  --gold-grad: linear-gradient(110deg, #8a6a2f 0%, #c9a45c 18%, #f6e3ab 34%, #d8b66d 48%, #9c7a3a 66%, #e8cf8e 84%, #a8853f 100%);
  --gold-glow: 0 0 22px rgba(214, 178, 98, .28);
}

/* Palavras douradas: metal com brilho correndo */
.gold, .split__meta strong, .menu__price, .feature__list b, .hero__kicker, .choice__title, .about__sign {
  background: var(--gold-grad);
  background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: goldShine 7s linear infinite;
}
.display .gold, .hero__title .gold { filter: drop-shadow(0 0 24px rgba(214, 178, 98, .30)); }
@keyframes goldShine { to { background-position: -250% center; } }

/* Títulos e rótulos puxando pro dourado */
.menu__name, .row__title, .card__title, .location__info h3, .footer h4 { color: var(--gold-light); }
.eyebrow { color: #e0c27d; text-shadow: var(--gold-glow); }
.eyebrow::before { background: var(--gold-grad); height: 1px; }
.display { text-shadow: 0 2px 30px rgba(0, 0, 0, .5); }
.divider { color: var(--gold-light); }

/* Títulos entram desfocados e ganham nitidez (sem esconder o elemento observado) */
.display.reveal, .reveal .display {
  filter: blur(12px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter 1.2s var(--ease) .1s;
}
.display.reveal.is-in, .reveal.is-in .display { filter: none; }

/* Botão cheio: dourado metálico + reflexo */
.btn--solid {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--gold-grad); background-size: 220% auto; background-position: left center;
  border-color: transparent; color: #0b0b0b;
  box-shadow: 0 10px 30px rgba(201, 164, 92, .22), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: background-position .8s var(--ease), box-shadow .4s var(--ease), transform .3s var(--ease);
}
.btn--solid::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg); transition: left .8s var(--ease);
}
.btn--solid:hover { background: var(--gold-grad); background-size: 220% auto; background-position: right center; border-color: transparent; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(214, 178, 98, .38), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn--solid:hover::after { left: 130%; }

/* Botão contorno: borda em gradiente dourado */
.btn--ghost, .header__nav .btn {
  border: 1px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gold-grad) border-box;
  color: var(--gold-light);
  transition: color .3s, box-shadow .4s var(--ease), transform .3s var(--ease);
}
.btn--ghost:hover, .header__nav .btn:hover {
  background: var(--gold-grad) border-box; color: #0b0b0b;
  box-shadow: 0 12px 34px rgba(214, 178, 98, .30); transform: translateY(-2px);
}

/* Botão flutuante e links */
.float-cta { background: var(--gold-grad); background-size: 220% auto; animation: goldShine 7s linear infinite; box-shadow: 0 10px 30px rgba(214, 178, 98, .35); }
.link svg, .link__arrow, .choice__go, .choice__kicker { color: #e0c27d; }
.link:hover, .choice:hover, .ig__post:hover { box-shadow: 0 0 0 1px rgba(214, 178, 98, .35), 0 18px 40px rgba(0, 0, 0, .5); }

@media (prefers-reduced-motion: reduce) {
  .gold, .split__meta strong, .menu__price, .feature__list b, .hero__kicker, .choice__title, .about__sign, .float-cta { animation: none; }
  .display.reveal, .reveal .display { filter: none; transition: none; }
}

/* =========================================================
   AJUSTES — benefícios, meta do hero, botões lado a lado, texto
   ========================================================= */

/* Texto mais encorpado e mais branco */
:root { --text: #f5f5f5; --muted: #c9c9c9; }
body { font-weight: 500; }
.lead { font-weight: 400; color: #d6d6d6; }
.about__text p, .card__text, .benefit__text, .choice__text, .footer p, .footer li { color: #cfcfcf; }
.btn { font-weight: 700; }

/* Serviços em 3 blocos de benefício */
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.benefit {
  position: relative; padding: 36px 30px 34px;
  background: linear-gradient(180deg, #171717 0%, #111 100%);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.benefit::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--gold-grad); background-size: 250% auto; animation: goldShine 7s linear infinite;
  opacity: .8;
}
.benefit:hover { border-color: rgba(214, 178, 98, .45); transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0, 0, 0, .55), 0 0 30px rgba(214, 178, 98, .08); }
.benefit__num { position: absolute; top: 22px; right: 26px; font-family: var(--f-display); font-size: 13px; color: rgba(214, 178, 98, .5); }
.benefit__icon { width: 40px; height: 40px; color: #e0c27d; margin-bottom: 26px; }
.benefit__title { font-family: var(--f-display); font-size: clamp(17px, 1.8vw, 21px); text-transform: uppercase; color: var(--gold-light); margin: 0 0 12px; line-height: 1.2; }
.benefit__text { margin: 0; font-size: 15px; line-height: 1.7; }
@media (max-width: 900px) { .benefits { grid-template-columns: 1fr; } .benefit { padding: 30px 24px; } }
.benefits + .menu__cta { margin-top: 40px; }

/* Meta do hero: "Desde 2017" e "Hora marcada" */
.split__meta { gap: 48px; }
.split__meta span { display: block; margin-bottom: 4px; }
.split__meta strong { font-size: clamp(18px, 1.8vw, 22px); text-transform: uppercase; }

/* Celular: botões lado a lado */
@media (max-width: 600px) {
  .split__actions, .menu__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .split__actions .btn, .menu__cta .btn { padding: 15px 10px; font-size: 11px; letter-spacing: .1em; text-align: center; line-height: 1.3; }
  .split__meta { gap: 32px; }
}

/* Botões dos serviços centralizados no PC */
.menu__cta { justify-content: center; }

/* Blocos de serviço: imagem no topo + títulos centralizados */
.benefit__media { margin: -36px -30px 26px; aspect-ratio: 16 / 10; border-bottom: 1px solid var(--line); }
.benefit__media img { filter: grayscale(1) contrast(1.1); transition: transform 1.2s var(--ease); }
.benefit:hover .benefit__media img { transform: scale(1.06); }
.benefit:has(.benefit__media img) .benefit__icon { display: none; }
.benefit__num { z-index: 3; }
.benefit::before { z-index: 3; }
.benefit__icon { display: block; margin-left: auto; margin-right: auto; }
.benefit__title {
  text-align: center; min-height: 2.6em;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 900px) { .benefit__media { margin: -30px -24px 22px; } .benefit__title { min-height: 0; } }

/* Título "Corte · Barba · Visagismo" em uma linha */
.section__head .display--line { font-size: clamp(22px, 3.2vw, 42px); white-space: nowrap; }
@media (max-width: 720px) { .section__head .display--line { white-space: normal; } }

/* Botão flutuante também no computador (barbearia) */
.float-cta--always { display: inline-flex; }
@media (min-width: 861px) {
  .float-cta--always { right: 32px; bottom: 32px; padding: 16px 26px; font-size: 13px; }
  .float-cta--always:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(214, 178, 98, .45); }
}
.float-cta { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }

/* Hero da barbearia: escurece a foto clara pra manter menu e texto legíveis */
.split__media::after {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(11, 11, 11, .92) 0%, rgba(11, 11, 11, 0) 24%),
    linear-gradient(0deg, rgba(11, 11, 11, .75) 0%, rgba(11, 11, 11, 0) 30%),
    linear-gradient(90deg, var(--bg) 0%, rgba(11, 11, 11, 0) 32%),
    rgba(11, 11, 11, .22);
}
.split__media .ph img { filter: grayscale(1) contrast(1.15) brightness(.82); }
@media (max-width: 900px) {
  .split__media::after {
    background:
      linear-gradient(180deg, rgba(11, 11, 11, .9) 0%, rgba(11, 11, 11, 0) 28%),
      linear-gradient(0deg, var(--bg) 0%, rgba(11, 11, 11, 0) 45%),
      rgba(11, 11, 11, .2);
  }
}

/* Celular: cabeçalho fixo em vidro preto, logo sempre visível */
@media (max-width: 860px) {
  .header, .header.is-scrolled {
    background: rgba(11, 11, 11, .62);
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  }
  .header__inner { height: 64px; }
}

/* Capa do "Quem sou": foto real desce pra abrir espaço pro título da capa */
.cover .ph:has(img) { background: #050505; }
.cover .ph img { top: 18%; height: 82%; object-position: center top; }
.cover .ph:has(img)::before { display: block; z-index: 2; opacity: 1; background: linear-gradient(180deg, transparent 55%, rgba(5, 5, 5, .9) 100%); }
.cover__mast, .cover__side, .cover__issue { z-index: 3; }

/* Foto do Rafael e mapa em cores naturais */
.cover .ph img { filter: none; }
.location__map iframe { filter: none; }

/* Rodapé: ícones de Instagram e WhatsApp */
.footer__social { display: flex; gap: 12px; margin-top: 18px; }
.footer__social a {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gold-grad) border-box;
  color: #e0c27d; transition: color .3s, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.footer__social a:hover { background: var(--gold-grad) border-box; color: #0b0b0b; transform: translateY(-3px); box-shadow: 0 10px 26px rgba(214, 178, 98, .3); }
.footer__social svg { width: 20px; height: 20px; }

/* =========================================================
   HERO DO STUDIO NO CELULAR: imagem em cima, texto embaixo (igual barbearia)
   ========================================================= */
@media (max-width: 900px) {
  .hero { display: block; min-height: 0; padding: 0 0 72px; }
  .hero__bg { position: relative; inset: auto; z-index: 0; height: 60vh; min-height: 340px; }
  .hero__bg::after {
    z-index: 2;
    background:
      linear-gradient(180deg, rgba(11, 11, 11, .9) 0%, rgba(11, 11, 11, 0) 28%),
      linear-gradient(0deg, var(--bg) 0%, rgba(11, 11, 11, 0) 45%),
      rgba(11, 11, 11, .15);
  }
  .hero > .wrap { position: relative; margin-top: 8px; }
  .hero__row { margin-top: 24px; }
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px !important; }
  .hero__actions .btn { padding: 15px 10px; font-size: 11px; letter-spacing: .1em; text-align: center; line-height: 1.3; }
}


/* =========================================================
   STUDIO TATTOO — dourado champanhe (suave) + seções em prata
   ========================================================= */
.theme-soft {
  --gold-grad: linear-gradient(110deg, #8a7650 0%, #c2ad80 18%, #f1e6c8 34%, #d3c096 48%, #9a8660 66%, #e2d3ae 84%, #a08c64 100%);
  --gold-light: #dccba3;
  --silver-grad: linear-gradient(110deg, #6f7378 0%, #b9bec4 18%, #f6f7f9 34%, #c9cdd2 48%, #7d8187 66%, #e3e6e9 84%, #8f9399 100%);
  --silver-light: #d2d6db;
}
/* dourado mais contido: brilho e halo menores */
.theme-soft .display .gold, .theme-soft .hero__title .gold { filter: drop-shadow(0 0 16px rgba(214, 196, 150, .18)); }
.theme-soft .eyebrow { color: var(--gold-light); text-shadow: none; }
.theme-soft .btn--solid { box-shadow: 0 8px 24px rgba(194, 173, 128, .16), inset 0 1px 0 rgba(255, 255, 255, .35); }
.theme-soft .btn--solid:hover { box-shadow: 0 14px 32px rgba(194, 173, 128, .26), inset 0 1px 0 rgba(255, 255, 255, .45); }
.theme-soft .float-cta { box-shadow: 0 10px 26px rgba(194, 173, 128, .25); }

/* seções alternadas em prata */
.silver-mix .section--alt .gold, .silver-mix .section--alt .about__sign {
  background: var(--silver-grad); background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.silver-mix .section--alt .display .gold { filter: drop-shadow(0 0 16px rgba(220, 225, 232, .18)); }
.silver-mix .section--alt .eyebrow, .silver-mix .section--alt .card__title,
.silver-mix .section--alt .divider, .silver-mix .section--alt .cover__side small { color: var(--silver-light); }
.silver-mix .section--alt .eyebrow::before { background: var(--silver-grad); }
.silver-mix .section--alt .divider::before, .silver-mix .section--alt .divider::after { background: linear-gradient(90deg, transparent, #c9cdd2); }
.silver-mix .section--alt .card:hover { border-color: rgba(210, 214, 219, .45); }
.silver-mix .section--alt .btn--ghost { background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--silver-grad) border-box; color: var(--silver-light); }
.silver-mix .section--alt .btn--ghost:hover { background: var(--silver-grad) border-box; color: #0b0b0b; box-shadow: 0 12px 30px rgba(210, 214, 219, .22); }
.silver-mix .section--alt .btn--solid { background: var(--silver-grad); background-size: 220% auto; }
.silver-mix .section--alt .btn--solid:hover { background: var(--silver-grad); background-size: 220% auto; background-position: right center; }

/* Prata disponível pras duas páginas */
:root {
  --silver-grad: linear-gradient(110deg, #6f7378 0%, #b9bec4 18%, #f6f7f9 34%, #c9cdd2 48%, #7d8187 66%, #e3e6e9 84%, #8f9399 100%);
  --silver-light: #d2d6db;
}
.silver-mix .section--alt .location__info h3, .silver-mix .section--alt .ig__bar { color: var(--silver-light); }
.silver-mix .section--alt .ig__post:hover { border-color: rgba(210, 214, 219, .6); box-shadow: 0 0 0 1px rgba(210, 214, 219, .3), 0 18px 40px rgba(0, 0, 0, .5); }
.silver-mix .section--alt .lead a.gold { background: var(--silver-grad); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Botão "Enviar minha ideia" centralizado no celular */
@media (max-width: 900px) {
  .feature .btn { display: flex; width: fit-content; margin: 0 auto; }
}

/* Portfólio: esconde o que ainda não tem foto */
.tile:not(:has(img)) { display: none; }
.row:not(:has(.tile img)):not(:has(.reel)) { display: none; }
.card .ph:not(:has(img)) { display: none; }

/* Reels verticais */
.row__track--reels { grid-auto-columns: clamp(170px, 19vw, 240px); }
.reel {
  position: relative; aspect-ratio: 9 / 16; padding: 0; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: #000; cursor: pointer; scroll-snap-align: start;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
.reel img, .reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel video { z-index: 2; background: #000; }
.reel:hover { transform: scale(1.04); border-color: rgba(214, 196, 150, .5); box-shadow: 0 24px 50px rgba(0, 0, 0, .6); }
.reel.is-playing { transform: none; cursor: default; }
.reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .55) 100%); pointer-events: none; }
.reel__play {
  position: absolute; left: 50%; top: 50%; z-index: 1; width: 58px; height: 58px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--gold-grad); background-size: 220% auto; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  transition: transform .3s var(--ease);
}
.reel__play::before { content: ""; position: absolute; left: 23px; top: 18px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #0b0b0b; }
.reel:hover .reel__play { transform: translate(-50%, -50%) scale(1.1); }

/* Reels em loop: selo de som no canto */
.reel { cursor: pointer; }
.reel video { z-index: 1; }
.reel::after { z-index: 2; }
.reel__sound {
  position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(11, 11, 11, .55) center / 18px no-repeat; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(220, 203, 163, .45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dccba3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5Z'/%3E%3Cpath d='m22 9-6 6M16 9l6 6'/%3E%3C/svg%3E");
  transition: background-color .3s, transform .3s var(--ease);
}
.reel.has-sound .reel__sound {
  background-color: rgba(214, 196, 150, .9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5Z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E");
}
.reel:hover .reel__sound { transform: scale(1.08); }
.reel.has-sound { border-color: rgba(214, 196, 150, .7); }

/* Portfólio premium: moldura dourada + estrela no canto */
.tile {
  border: 1px solid transparent; border-radius: 8px;
  background: linear-gradient(#0d0d0d, #0d0d0d) padding-box, var(--gold-grad) border-box;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
.tile .ph { inset: 6px; border-radius: 4px; }
.tile .ph::after { display: none; }
.tile::before {
  content: "★"; position: absolute; top: 14px; right: 14px; z-index: 4;
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  font-size: 16px; line-height: 1; color: #e7cf8f;
  background: rgba(11, 11, 11, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(220, 203, 163, .55);
  text-shadow: 0 0 10px rgba(231, 207, 143, .7);
}
.tile__cap { left: 6px; right: 6px; bottom: 6px; border-radius: 0 0 4px 4px; z-index: 3; }
.tile:hover { box-shadow: 0 24px 50px rgba(0, 0, 0, .6), 0 0 26px rgba(214, 196, 150, .18); }

/* =========================================================
   BIO — topo metade Rafael / metade studio + blocos compactos
   ========================================================= */
.home__half img { filter: none; }
.home__half--rafael img { object-position: center 20%; }
.home__half--studio img { object-position: 60% center; }
.home__hero .ph::after { display: none; }
/* linha fina dourada no corte entre as duas fotos */
.home__hero::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(224, 199, 143, .7) 30%, rgba(224, 199, 143, .7) 70%, transparent);
}
/* logo desce pra base, sem cobrir o rosto */
.home__hero-over {
  z-index: 3; place-items: end center; padding: 24px 16px 84px;
  background: linear-gradient(180deg, rgba(11, 11, 11, .35) 0%, rgba(11, 11, 11, .05) 35%, rgba(11, 11, 11, .55) 70%, var(--bg) 100%);
}
.home__logo { width: min(460px, 82vw); }

/* blocos: sem foto de fundo, menores, miniatura quadrada à direita */
.home__choose { margin-top: -48px; gap: 14px; }
.choice {
  min-height: 0; padding: 20px; flex-direction: row; align-items: center; gap: 18px; justify-content: space-between;
  background: linear-gradient(180deg, #161616 0%, #111 100%);
}
.choice::before { display: none; }
.choice__body { min-width: 0; }
.choice__title { font-size: clamp(18px, 2vw, 24px); margin: 6px 0 6px; }
.choice__text { font-size: 13px; margin: 0 0 12px; }
.choice__kicker { font-size: 10px; }
.choice__go { font-size: 11px; }
.choice__thumb {
  flex: none; width: 104px; height: 104px; object-fit: cover; border-radius: 6px;
  border: 1px solid transparent; background: var(--gold-grad) border-box; padding: 1px;
  transition: transform .5s var(--ease);
}
.choice:hover .choice__thumb { transform: scale(1.05); }
@media (max-width: 720px) {
  .home__hero-over { padding-bottom: 64px; }
  .home__choose { margin-top: -36px; }
  .choice { padding: 16px; gap: 14px; }
  .choice__thumb { width: 88px; height: 88px; }
}

/* blocos ficam na frente do escurecimento da foto */
.home__choose { position: relative; z-index: 5; }

/* =========================================================
   AVALIAÇÕES — fotos em perspectiva + texto palavra a palavra
   ========================================================= */
.testi { display: grid; gap: 48px; align-items: center; outline: none; }
@media (min-width: 768px) { .testi { grid-template-columns: 1fr 1fr; gap: 80px; } }
.testi__images { position: relative; width: 100%; max-width: 400px; height: clamp(300px, 34vw, 420px); margin: 48px auto 0; perspective: 1000px; }
.testi__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px;
  border: 1px solid rgba(224, 199, 143, .35); box-shadow: 0 24px 50px rgba(0, 0, 0, .55);
  opacity: 0; pointer-events: none; z-index: 1; transform: scale(.8);
  transition: transform .8s cubic-bezier(.4, 1.6, .3, 1), opacity .6s ease, filter .6s ease;
}
.testi__img.is-active { opacity: 1; z-index: 3; transform: none; }
.testi__img.is-left { opacity: 1; z-index: 2; filter: brightness(.55); transform: translateX(-60px) translateY(-48px) scale(.85) rotateY(15deg); }
.testi__img.is-right { opacity: 1; z-index: 2; filter: brightness(.55); transform: translateX(60px) translateY(-48px) scale(.85) rotateY(-15deg); }
@media (max-width: 600px) {
  .testi__images { max-width: 280px; }
  .testi__img.is-left { transform: translateX(-34px) translateY(-34px) scale(.85) rotateY(15deg); }
  .testi__img.is-right { transform: translateX(34px) translateY(-34px) scale(.85) rotateY(-15deg); }
}
.testi__text.is-in { animation: testiIn .35s ease both; }
@keyframes testiIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.testi__stars { color: #e7cf8f; letter-spacing: .2em; font-size: 16px; min-height: 0; margin-bottom: 10px; text-shadow: 0 0 10px rgba(231, 207, 143, .5); }
.testi__stars:empty { display: none; }
.testi__name { font-family: var(--f-display); font-size: clamp(20px, 2.2vw, 26px); text-transform: uppercase; margin: 0 0 4px; color: var(--text); }
.testi__role { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light); margin: 0 0 24px; }
.testi__quote { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.75; color: #dcdcdc; margin: 0; min-height: 7em; }
.testi__word { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(5px); animation: testiWord .22s ease-in-out forwards; }
@keyframes testiWord { to { opacity: 1; filter: blur(0); transform: none; } }
.testi__arrows { display: flex; gap: 14px; margin-top: 36px; }
.testi__arrow {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--gold-light); background: rgba(255, 255, 255, .04); border: 1px solid rgba(224, 199, 143, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .3s, color .3s, transform .3s var(--ease);
}
.testi__arrow svg { width: 20px; height: 20px; }
.testi__arrow:hover { background: var(--gold-grad); color: #0b0b0b; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .testi__word { animation: none; opacity: 1; filter: none; transform: none; } }

/* =========================================================
   BARBEARIA — fundo com padrão + efeito vidro
   ========================================================= */
.bg-pattern::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/barbearia/fundo-padrao.jpg") center / cover no-repeat;
}
.bg-pattern .section { background: rgba(11, 11, 11, .5); }
.bg-pattern .section--alt { background: rgba(17, 17, 17, .62); }
.bg-pattern .footer { background: rgba(8, 8, 8, .78); }
.bg-pattern .benefit, .bg-pattern .location__info, .bg-pattern .ig__post {
  background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px rgba(0, 0, 0, .35);
}

/* =========================================================
   BOTÕES — vidro sutil com a identidade God Given
   ========================================================= */
.btn--ghost, .header__nav .btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015));
  border: 1px solid rgba(224, 199, 143, .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.btn--ghost:hover, .header__nav .btn:hover { background: var(--gold-grad); border-color: transparent; }
.silver-mix .section--alt .btn--ghost { background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)); border: 1px solid rgba(210, 214, 219, .6); }
.silver-mix .section--alt .btn--ghost:hover { background: var(--silver-grad); border-color: transparent; }
.btn--solid::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%); pointer-events: none; }

/* =========================================================
   PORTFÓLIO — setas laterais por cima das fotos
   ========================================================= */
.row { position: relative; }
.row__ctrl {
  position: absolute; left: -10px; right: -10px; top: calc(50% + 22px); transform: translateY(-50%);
  display: flex; justify-content: space-between; pointer-events: none; z-index: 6;
}
.row__ctrl button {
  pointer-events: auto; width: 50px; height: 50px; font-size: 20px; color: var(--gold-light);
  background: rgba(11, 11, 11, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(224, 199, 143, .6); box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}
.row__ctrl button:hover { background: var(--gold-grad); color: #0b0b0b; border-color: transparent; }
@media (max-width: 720px) { .row__ctrl { left: -4px; right: -4px; } .row__ctrl button { width: 42px; height: 42px; font-size: 17px; } }

/* fileiras do portfólio não esticam a página: rolam dentro do próprio espaço */
.rows > .row, .row__track { min-width: 0; }

/* =========================================================
   HERO DO STUDIO — título empilhado à esquerda (ref. editorial)
   ========================================================= */
@media (min-width: 901px) {
  .hero { align-items: center; padding: 120px 0 80px; }
}
.hero__title { font-size: clamp(40px, 8vw, 122px); line-height: .98; margin: 6px 0 0; }
.hero__line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__line > span { display: block; transform: translateY(105%); animation: heroLine 1.1s cubic-bezier(.2, .8, .2, 1) forwards; }
.hero__line:nth-child(1) > span { animation-delay: .15s; }
.hero__line:nth-child(2) > span { animation-delay: .32s; }
@keyframes heroLine { to { transform: none; } }
.hero__in { opacity: 0; transform: translateY(16px); animation: heroIn .9s ease forwards; }
.hero__in--late { animation-delay: .7s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
.hero__row { margin-top: 32px; }
.hero__sub { font-size: 15px; line-height: 1.6; max-width: 400px; color: #d4d4d4; }
.hero__kicker { margin-bottom: 14px; }
.hero__bg img { transform: translateY(var(--parallax, 0)) scale(1.12); animation: heroZoom 2.8s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes heroZoom { to { transform: translateY(var(--parallax, 0)) scale(1.04); } }
@media (max-width: 900px) { .hero__bg img { animation: none; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero__line > span, .hero__in, .hero__bg img { animation: none; transform: none; opacity: 1; }
}

/* =========================================================
   SEÇÕES PRATA-NUVEM (fundo claro, texto escuro)
   ========================================================= */
.section--light {
  --ink: #161616; --ink-2: #3c3c3c; --ink-3: #5c5c5c;
  --gold-dark: linear-gradient(110deg, #4e3d1c 0%, #7c6230 22%, #a8874a 38%, #8a6d36 52%, #5a4722 70%, #96783f 86%, #5e4a24 100%);
  color: var(--ink);
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #e7e9ec 0%, #d8dbdf 100%);
}
.section--light .display { color: var(--ink); text-shadow: none; }
.section--light .gold, .section--light .feature__list b, .section--light .about__sign {
  background: var(--gold-dark); background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.section--light .display .gold { filter: none; }
.section--light .eyebrow { color: #6d5630; text-shadow: none; }
.section--light .eyebrow::before { background: #8a6d36; }
.section--light .lead, .section--light p { color: var(--ink-2); }
.section--light .feature__list li { border-color: rgba(0, 0, 0, .12); }
.section--light .feature__list strong { color: var(--ink); }
.section--light .feature__list span { color: var(--ink-3); }
.section--light .card { background: rgba(255, 255, 255, .55); border-color: rgba(0, 0, 0, .08); box-shadow: 0 14px 34px rgba(0, 0, 0, .08); }
.section--light .card:hover { border-color: rgba(138, 109, 54, .45); }
.section--light .card__title { color: var(--ink); }
.section--light .card__text { color: var(--ink-3); }
.section--light .btn--ghost { color: #3b2f18; background: rgba(255, 255, 255, .45); border-color: rgba(90, 71, 34, .55); }
.section--light .btn--ghost:hover { background: var(--gold-grad); color: #0b0b0b; border-color: transparent; }
.section--light .divider { color: var(--ink); }
.section--light .divider::before, .section--light .divider::after { background: linear-gradient(90deg, transparent, #8a6d36); }
.section--light .testi__name { color: var(--ink); }
.section--light .testi__role { color: #6d5630; }
.section--light .testi__quote { color: var(--ink-2); }
.section--light .testi__img { border-color: rgba(0, 0, 0, .1); box-shadow: 0 24px 50px rgba(0, 0, 0, .25); }
.section--light .testi__img.is-left, .section--light .testi__img.is-right { filter: brightness(.85) grayscale(.3); }
.section--light .testi__arrow { color: #3b2f18; background: rgba(255, 255, 255, .5); border-color: rgba(90, 71, 34, .55); }
.section--light .testi__arrow:hover { background: var(--gold-grad); color: #0b0b0b; }
.section--light .testi__stars { color: #8a6d36; text-shadow: none; }
.section--tight-top { padding-top: 0; }

/* hero: sem sombra no título (a animação cortava a sombra em retângulo) */
.hero__title, .hero__title .gold { text-shadow: none; }
.theme-soft .hero__title .gold, .hero__title .gold { filter: none; }

/* Setas do portfólio/reels: abaixo da fileira, menores */
.row { display: flex; flex-direction: column; }
.row__head { display: contents; }
.row__title { order: 0; margin-bottom: 16px; }
.row__track { order: 1; }
.row__ctrl {
  order: 2; position: static; transform: none; inset: auto;
  display: flex; justify-content: center; gap: 12px; margin-top: 4px; pointer-events: auto;
}
.row__ctrl button { width: 40px; height: 40px; font-size: 15px; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
@media (max-width: 720px) { .row__ctrl button { width: 36px; height: 36px; font-size: 14px; } }

/* BIO: bloco 70% texto | risco dourado | 30% imagem */
.choice {
  display: grid; grid-template-columns: 7fr 3fr; align-items: stretch; gap: 0; padding: 0; min-height: 168px;
}
.choice__body { padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; }
.choice__thumb {
  width: 100%; height: 100%; min-height: 168px; border-radius: 0; padding: 0; border: 0;
  border-left: 1px solid rgba(224, 199, 143, .65); background: none; object-fit: cover;
}
.choice:hover .choice__thumb { transform: none; filter: brightness(1.08); }
@media (max-width: 720px) {
  .choice { min-height: 150px; }
  .choice__body { padding: 18px; }
  .choice__thumb { width: 100%; height: 100%; min-height: 150px; }
}

/* Barbearia: seções prata-nuvem por cima do fundo arabesco */
.bg-pattern .section--light {
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #e7e9ec 0%, #d8dbdf 100%);
}
.section--light .benefit, .bg-pattern .section--light .benefit {
  background: rgba(255, 255, 255, .6); border-color: rgba(0, 0, 0, .08);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .1);
}
.section--light .benefit:hover { border-color: rgba(138, 109, 54, .5); box-shadow: 0 24px 50px rgba(0, 0, 0, .16); }
.section--light .benefit__title { color: #2a2a2a; }
.section--light .benefit__text { color: var(--ink-3); }
.section--light .benefit__num { color: rgba(110, 86, 48, .7); }
.section--light .benefit__media { border-bottom-color: rgba(0, 0, 0, .08); }
.section--light .location { border-color: rgba(0, 0, 0, .1); box-shadow: 0 16px 36px rgba(0, 0, 0, .1); }
.section--light .location__info, .bg-pattern .section--light .location__info {
  background: rgba(255, 255, 255, .65); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-color: transparent;
}
.section--light .location__info h3 { color: #6d5630; }
.section--light .location__info p, .section--light .location__info a, .section--light .location__gallery { color: var(--ink); }
.section--light .location__info a:hover { color: #8a6d36; }
.section--light .cover { border-color: rgba(0, 0, 0, .15); box-shadow: 0 24px 50px rgba(0, 0, 0, .2); }
.section--light .lead a.gold { background: var(--gold-dark); -webkit-background-clip: text; background-clip: text; }

/* capa do Quem sou mantém texto claro mesmo em seção clara */
.section--light .cover { color: var(--text); }
.section--light .cover__side strong, .section--light .cover__mast { color: #f5f5f5; }
.section--light .cover__issue { color: var(--silver); }

/* Barbearia: seções prateadas com o arabesco invertido (prata clara) */
.bg-pattern .section--light {
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(231, 233, 236, .45) 0%, rgba(216, 219, 223, .45) 100%),
    url("../img/barbearia/fundo-padrao-claro.jpg") center / 900px repeat;
}

/* Hero da barbearia: foto se dissolve no fundo (sem faixa marcada) */
.split__media .ph { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%); }
.split__media::after { background: linear-gradient(180deg, rgba(11, 11, 11, .85) 0%, rgba(11, 11, 11, 0) 22%), rgba(11, 11, 11, .18); }
@media (max-width: 900px) {
  .split__media .ph { -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%); mask-image: linear-gradient(180deg, #000 50%, transparent 100%); }
  .split__media::after { background: linear-gradient(180deg, rgba(11, 11, 11, .85) 0%, rgba(11, 11, 11, 0) 26%), rgba(11, 11, 11, .12); }
  .split__text { padding-top: 0; margin-top: -40px; position: relative; z-index: 2; }
}

/* Serviços: foto em preto e branco, colorida ao passar o mouse */
.benefit__media img { filter: grayscale(1) contrast(1.08); transition: filter .6s ease, transform 1.2s var(--ease); }
.benefit:hover .benefit__media img, .benefit:focus-within .benefit__media img { filter: none; }

/* esmaecimento aplicado no bloco todo (foto + escurecimento juntos) */
.split__media .ph { -webkit-mask-image: none; mask-image: none; }
.split__media { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%); }
@media (max-width: 900px) {
  .split__media { -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%); mask-image: linear-gradient(180deg, #000 50%, transparent 100%); }
}

/* Hero da barbearia: fundo preto liso e transição mais escura */
.split { background: #0b0b0b; }
.split__media .ph img { filter: grayscale(1) contrast(1.15) brightness(.72); }
.split__media::after {
  background:
    linear-gradient(180deg, rgba(11, 11, 11, .9) 0%, rgba(11, 11, 11, 0) 24%),
    linear-gradient(0deg, #0b0b0b 0%, rgba(11, 11, 11, 0) 30%),
    rgba(11, 11, 11, .25);
}
.split__media { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
@media (max-width: 900px) {
  .split__media { -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%); mask-image: linear-gradient(180deg, #000 35%, transparent 100%); }
  .split__media::after { background: linear-gradient(180deg, rgba(11, 11, 11, .9) 0%, rgba(11, 11, 11, 0) 26%), linear-gradient(0deg, #0b0b0b 0%, rgba(11, 11, 11, .4) 40%, rgba(11, 11, 11, 0) 70%), rgba(11, 11, 11, .2); }
}

/* =========================================================
   BIO — corte diagonal Rafael / studio + fumaça + selo de vidro
   ========================================================= */
.home__hero { display: block; position: relative; overflow: hidden; background: #050505; }
.home__hero::before { display: none; }
.home__half { position: absolute; top: 0; bottom: 0; min-height: 0 !important; }
.home__half--rafael { left: 0; width: 60%; clip-path: polygon(0 0, 96.67% 0, 70% 100%, 0 100%); }
.home__half--studio { right: 0; width: 60%; clip-path: polygon(30% 0, 100% 0, 100% 100%, 3.33% 100%); }
.home__half img { filter: brightness(.68) contrast(1.05) saturate(.9); }
.home__half--rafael img { object-position: 30% 20%; }
.home__half--studio img { object-position: 65% center; }
.home__diag { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.home__diag line { stroke: rgba(224, 199, 143, .75); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* fumaça sutil na emenda */
.home__smoke { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.home__smoke span {
  position: absolute; width: 60%; height: 70%; left: 20%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200, 200, 200, .22), rgba(200, 200, 200, 0));
  filter: blur(40px); opacity: .7; animation: smoke 18s ease-in-out infinite alternate;
}
.home__smoke span:nth-child(1) { top: -10%; animation-duration: 16s; }
.home__smoke span:nth-child(2) { top: 30%; left: 10%; width: 50%; animation-duration: 22s; animation-delay: -6s; }
.home__smoke span:nth-child(3) { top: 55%; left: 35%; width: 55%; animation-duration: 20s; animation-delay: -12s; opacity: .5; }
@keyframes smoke {
  0% { transform: translate(-8%, 4%) scale(1); }
  50% { transform: translate(6%, -6%) scale(1.15); }
  100% { transform: translate(-4%, -2%) scale(.95); }
}
@media (prefers-reduced-motion: reduce) { .home__smoke span { animation: none; } }

/* logo dentro de um selo de vidro, um pouco menor */
.home__badge {
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 34px 18px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02));
  border: 1px solid rgba(224, 199, 143, .45);
  -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 20px 50px rgba(0, 0, 0, .45);
}
.home__badge .home__logo { width: min(300px, 62vw); margin: 0; filter: none; }
.home__badge .home__tag { margin: 0; font-size: 11px; }

/* blocos: texto um pouco menor */
.choice__title { font-size: clamp(16px, 1.7vw, 21px); margin: 0 0 6px; }
.choice__text { font-size: 12.5px; }
.choice { min-height: 148px; }
.choice__thumb { min-height: 148px; }
@media (max-width: 720px) {
  .home__half { width: 70%; }
  .home__half--rafael { clip-path: polygon(0 0, 82.86% 0, 60% 100%, 0 100%); }
  .home__half--studio { clip-path: polygon(40% 0, 100% 0, 100% 100%, 17.14% 100%); }
  .home__half--rafael img { object-position: 35% 15%; }
  .home__badge { padding: 16px 22px 14px; }
  .home__badge .home__logo { width: min(230px, 64vw); }
  .choice, .choice__thumb { min-height: 130px; }
}

/* =========================================================
   BARBEARIA — sem desenhos no fundo
   ========================================================= */
.bg-pattern::before { display: none; }
.bg-pattern { background: #0b0b0b; }
.bg-pattern .section { background: #0b0b0b; }
.bg-pattern .section--alt { background: #111; }
.bg-pattern .footer { background: #080808; }
.bg-pattern .section--light {
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #e7e9ec 0%, #d8dbdf 100%);
}
.split__media { -webkit-mask-image: none; mask-image: none; }
.split__media::after {
  background:
    linear-gradient(90deg, #0b0b0b 0%, rgba(11, 11, 11, .6) 18%, rgba(11, 11, 11, 0) 45%),
    linear-gradient(180deg, rgba(11, 11, 11, .9) 0%, rgba(11, 11, 11, 0) 24%),
    linear-gradient(0deg, #0b0b0b 0%, rgba(11, 11, 11, 0) 30%),
    rgba(11, 11, 11, .25);
}
@media (max-width: 900px) {
  .split__media::after {
    background:
      linear-gradient(180deg, rgba(11, 11, 11, .9) 0%, rgba(11, 11, 11, 0) 26%),
      linear-gradient(0deg, #0b0b0b 0%, rgba(11, 11, 11, .75) 25%, rgba(11, 11, 11, 0) 65%),
      rgba(11, 11, 11, .2);
  }
}

/* Bio: selo de vidro preto só com o logo; cidade fora */
.home__brand { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.home__badge {
  padding: 18px 30px; gap: 0;
  background: linear-gradient(135deg, rgba(20, 20, 20, .72), rgba(5, 5, 5, .55));
  border: 1px solid rgba(224, 199, 143, .35);
  -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 20px 50px rgba(0, 0, 0, .55);
}
.home__brand .home__tag { margin: 0; font-size: 11px; text-shadow: 0 2px 12px rgba(0, 0, 0, .9); }
@media (max-width: 720px) {
  .home__half--rafael img { object-position: 72% 15%; }
  .home__badge { padding: 14px 20px; }
}

/* Studio: título da especialidade mais compacto */
.feature__title { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.05; margin: 18px 0 22px; }

/* Cabeçalho de seção centralizado */
.section__head--center { justify-items: center; text-align: center; }
.section__head--center .eyebrow::after { content: ""; width: 32px; height: 1px; background: currentColor; }
.section--light .section__head--center .eyebrow::after { background: #8a6d36; }

/* Especialidade + Outros estilos: mesmo cinza claro, sem emenda */
#realismo.section--light { background: linear-gradient(180deg, #eceef1 0%, #e0e3e6 100%); padding-bottom: 72px; }
.section--light.section--tight-top { padding-top: 24px; background: linear-gradient(180deg, #e0e3e6 0%, #d8dbdf 100%); }
.section--tight-top .section__head .display { font-size: clamp(28px, 3.4vw, 46px); }

/* Bio: bloco da barbearia invertido (imagem à esquerda) */
.choice--reverse { grid-template-columns: 3fr 7fr; }
.choice--reverse .choice__thumb { order: -1; border-left: 0; border-right: 1px solid rgba(224, 199, 143, .65); }

/* Setas: ícone centralizado */
.row__ctrl button { display: grid; place-items: center; padding: 0; line-height: 1; }
.row__ctrl button svg { width: 18px; height: 18px; display: block; }

/* =========================================================
   STUDIO TATTOO — bordas e botões em prata
   ========================================================= */
.theme-soft .tile { background: linear-gradient(#0d0d0d, #0d0d0d) padding-box, var(--silver-grad) border-box; }
.theme-soft .tile::before { color: #e9ecef; border-color: rgba(210, 214, 219, .6); text-shadow: 0 0 10px rgba(233, 236, 239, .6); }
.theme-soft .tile:hover { box-shadow: 0 24px 50px rgba(0, 0, 0, .6), 0 0 26px rgba(210, 214, 219, .18); }
.theme-soft .reel { border-color: rgba(210, 214, 219, .35); }
.theme-soft .reel:hover, .theme-soft .reel.has-sound { border-color: rgba(220, 224, 229, .75); }
.theme-soft .reel__sound { border-color: rgba(210, 214, 219, .55); }
.theme-soft .reel.has-sound .reel__sound { background-color: rgba(220, 224, 229, .92); }
.theme-soft .reel__play { background: var(--silver-grad); }
.theme-soft .feature__media .ph, .theme-soft .card, .theme-soft .cover, .theme-soft .testi__img { border: 1px solid rgba(200, 205, 211, .55); }
.theme-soft .feature__media .ph { border-radius: var(--radius); }

.theme-soft .btn--solid { background: var(--silver-grad); background-size: 220% auto; color: #0b0b0b; box-shadow: 0 8px 24px rgba(200, 205, 211, .16), inset 0 1px 0 rgba(255, 255, 255, .5); }
.theme-soft .btn--solid:hover { background: var(--silver-grad); background-size: 220% auto; background-position: right center; box-shadow: 0 14px 32px rgba(210, 214, 219, .28), inset 0 1px 0 rgba(255, 255, 255, .6); }
.theme-soft .btn--ghost, .theme-soft .header__nav .btn { color: var(--silver-light); border-color: rgba(210, 214, 219, .6); }
.theme-soft .btn--ghost:hover, .theme-soft .header__nav .btn:hover { background: var(--silver-grad); color: #0b0b0b; border-color: transparent; box-shadow: 0 12px 30px rgba(210, 214, 219, .22); }
.theme-soft .section--light .btn--ghost { color: #2b2b2b; border-color: rgba(60, 60, 60, .45); }
.theme-soft .float-cta { background: var(--silver-grad); background-size: 220% auto; box-shadow: 0 10px 26px rgba(210, 214, 219, .25); }
.theme-soft .row__ctrl button, .theme-soft .testi__arrow { color: var(--silver-light); border-color: rgba(210, 214, 219, .6); }
.theme-soft .row__ctrl button:hover, .theme-soft .testi__arrow:hover { background: var(--silver-grad); color: #0b0b0b; border-color: transparent; }
.theme-soft .section--light .testi__arrow { color: #2b2b2b; border-color: rgba(60, 60, 60, .45); }
.theme-soft .footer__social a { background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--silver-grad) border-box; color: var(--silver-light); }
.theme-soft .footer__social a:hover { background: var(--silver-grad) border-box; color: #0b0b0b; box-shadow: 0 10px 26px rgba(210, 214, 219, .3); }

/* =========================================================
   FUNDOS ANIMADOS
   ========================================================= */
.bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-fx canvas { position: absolute; inset: 0; }
main, .footer, .home { position: relative; }
.home > *, main > * { position: relative; }

/* Página inicial — fumaça viva */
.bg-fx--smoke span {
  position: absolute; width: 70vw; height: 60vh; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(190, 190, 190, .09), rgba(190, 190, 190, 0));
  filter: blur(50px); animation: smokeDrift 30s ease-in-out infinite alternate;
}
.bg-fx--smoke span:nth-child(1) { top: 10%; left: -20%; }
.bg-fx--smoke span:nth-child(2) { top: 45%; left: 40%; animation-duration: 38s; animation-delay: -10s; }
.bg-fx--smoke span:nth-child(3) { top: 75%; left: -10%; animation-duration: 34s; animation-delay: -20s; }
.bg-fx--smoke span:nth-child(4) { top: 120%; left: 30%; animation-duration: 42s; animation-delay: -5s; }
.bg-fx--smoke span:nth-child(5) { top: -15%; left: 50%; animation-duration: 36s; animation-delay: -15s; background: radial-gradient(closest-side, rgba(224, 199, 143, .05), transparent); }
@keyframes smokeDrift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(18vw, -8vh) scale(1.25); }
  100% { transform: translate(-6vw, 6vh) scale(.9); }
}

/* Barbearia — lâmina de luz atravessando na diagonal */
.bg-fx__blade {
  position: absolute; top: -50%; left: -60%; width: 40%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(224, 199, 143, .07) 40%, rgba(255, 240, 200, .14) 50%, rgba(224, 199, 143, .07) 60%, transparent);
  transform: rotate(18deg); filter: blur(8px);
  animation: blade 9s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes blade { 0% { left: -60%; } 55%, 100% { left: 130%; } }
/* deixa as seções escuras da barbearia transparentes pra mostrar o efeito */
.bg-pattern .split, .bg-pattern .section:not(.section--light) { background: transparent; }
.bg-pattern .section--alt:not(.section--light) { background: rgba(17, 17, 17, .45); }

/* Studio — foco de luz que segue o mouse */
.bg-fx--ink::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .6s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(220, 224, 230, .06), transparent 70%);
}
.bg-fx--ink.has-spot::after { opacity: 1; }
.theme-soft .section--alt:not(.section--light) { background: rgba(17, 17, 17, .45); }

@media (prefers-reduced-motion: reduce) {
  .bg-fx--smoke span, .bg-fx__blade { animation: none; }
  .bg-fx__blade { display: none; }
}

/* Bio: topo se dissolve na fumaça (sem corte reto) */
.home__hero { background: transparent; -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 86%, transparent 100%); }

/* Bio: blocos com dois links (Conhecer / Agendar) */
.choice__title a { color: inherit; }
.choice__go { display: inline-flex; width: fit-content; }
.choice__go + .choice__go { margin-top: 10px; }
.choice__go--alt { color: var(--silver-light); }
.choice__go:hover span { transform: translateX(6px); }
.choice__go:hover { color: var(--gold-light); }
.choice__thumb-link { display: block; overflow: hidden; }
.choice--reverse .choice__thumb-link { order: -1; }
.choice__thumb-link .choice__thumb { display: block; }

/* Botão preto com escrita dourada */
.btn--dark { background: #0b0b0b; color: transparent; border: 1px solid rgba(224, 199, 143, .55); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.btn--dark { background: linear-gradient(#0b0b0b, #0b0b0b) padding-box, var(--gold-grad) border-box; border-color: transparent; }
.btn--dark > * , .btn--dark { -webkit-text-fill-color: initial; }
.btn--dark { color: #e7cf8f; }
.btn--dark:hover { background: #151515; color: #f1dfa8; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, .4), 0 0 20px rgba(224, 199, 143, .2); }

/* Barbearia: "Desde 2017 / Hora marcada" centralizado */
.split__meta { justify-content: center; text-align: center; }

/* fotos de perfil verticais: ocupam melhor a capa */
.cover .ph img { top: 12%; height: 88%; object-position: center top; }

.cover .ph img { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%); }

/* foto de perfil maior dentro da capa */
.cover .ph img { top: 6%; height: 94%; transform: scale(1.12); transform-origin: center 20%; object-position: center 15%; }

.cover .ph img { top: 12%; height: 88%; transform: scale(1.12); transform-origin: center 10%; }
.cover__mast { mix-blend-mode: normal; color: #f5f5f5; text-shadow: 0 4px 24px rgba(0,0,0,.6); }

/* Localização: bloco arredondado, mapa emoldurado */
.location {
  border-radius: 22px; overflow: hidden; padding: 12px; gap: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  border: 1px solid rgba(224, 199, 143, .3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.location__info { border-radius: 14px; }
.location__map { border-radius: 14px; overflow: hidden; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.theme-soft .location { border-color: rgba(210, 214, 219, .35); }
.section--light .location { background: rgba(255, 255, 255, .45); border-color: rgba(0, 0, 0, .08); box-shadow: 0 20px 50px rgba(0, 0, 0, .12); }

/* Barbearia: foto de perfil um pouco maior (como a do studio) */
.bg-pattern .cover .ph img { transform: scale(1.3); transform-origin: center 12%; }

/* Avaliações barbearia: no celular "cadeira volta sempre" na mesma linha */
.nowrap { white-space: nowrap; }
@media (max-width: 720px) {
  .br-desk { display: none; }
  .testi__headline { font-size: clamp(16px, 4.6vw, 30px) !important; }
}

/* Bio: vídeo no topo */
.home__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) contrast(1.05); z-index: 0; }
.home__hero-over {
  background: linear-gradient(180deg, rgba(11, 11, 11, .35) 0%, rgba(11, 11, 11, .1) 35%, rgba(11, 11, 11, .55) 72%, #0b0b0b 100%);
}

/* Bio: perfil estilo Instagram (foto redonda + nome + bio) */
.home__profile { display: flex; align-items: center; gap: 16px; text-align: left; }
.home__avatar {
  flex: none; width: 74px; height: 74px; border-radius: 50%; padding: 3px;
  background: var(--gold-grad); box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.home__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #0b0b0b; background: #fff; }
.home__bio { display: flex; flex-direction: column; gap: 6px; }
.home__wordmark { width: 190px; height: auto; display: block; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .8)); }
.home__profile .home__tag { margin: 0; font-size: 11px; letter-spacing: .18em; color: #e6e6e6; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); }
.home__profile .home__tag span { color: var(--gold-light); margin: 0 4px; }
@media (max-width: 720px) {
  .home__avatar { width: 62px; height: 62px; }
  .home__wordmark { width: 150px; }
  .home__profile .home__tag { font-size: 10px; letter-spacing: .12em; }
}

/* Bio: ícones sociais abaixo da bio */
.home__social { display: flex; gap: 10px; margin-top: 4px; }
.home__social a {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  color: #e7cf8f; background: rgba(11, 11, 11, .55); border: 1px solid rgba(224, 199, 143, .5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .3s, color .3s, transform .3s var(--ease);
}
.home__social a:hover { background: var(--gold-grad); color: #0b0b0b; transform: translateY(-2px); }
.home__social svg { width: 15px; height: 15px; }

/* Bio: legenda pequena nos dois Instagram */
.home__social a { position: relative; }
.home__social small {
  position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%);
  font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(231, 207, 143, .85); white-space: nowrap;
}
.home__social:has(small) { margin-bottom: 12px; }

.home__social { gap: 16px; }

/* Bio: perfil e ícones clicáveis; ícones abaixo, centralizados */
.home__hero-over { pointer-events: none; flex-direction: column; }
.home__profile, .home__social { pointer-events: auto; }
.home__hero-over { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.home__hero-over > .home__social { justify-content: center; margin-top: 0; }

/* =========================================================
   CABEÇALHO — menu em pílula de vidro líquido
   ========================================================= */
.liquid {
  position: relative; display: flex; align-items: center; gap: 2px; padding: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
}
.liquid__item {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  font-size: 12px !important; font-weight: 600; letter-spacing: .08em !important; text-transform: none !important;
  color: rgba(237, 237, 237, .72) !important; transition: color .3s;
}
.liquid__item svg { width: 16px; height: 16px; flex: none; transition: transform .45s cubic-bezier(.3, 1.6, .4, 1); }
.liquid__item:hover, .liquid__item.is-active { color: #fff !important; }
.liquid__item:hover svg { transform: scale(1.15) rotate(-8deg); }
.liquid__item.is-active svg { color: #e7cf8f; }
.liquid__blob {
  position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; z-index: 0; opacity: 0; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    0 0 0 1.5px rgba(224, 199, 143, .55),
    0 0 18px rgba(224, 199, 143, .35),
    0 6px 16px rgba(0, 0, 0, .35);
  transition: transform .55s cubic-bezier(.3, 1.4, .4, 1), width .55s cubic-bezier(.3, 1.4, .4, 1), opacity .3s;
}
.liquid__blob::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; opacity: .8;
  background: conic-gradient(from 200deg, #e7cf8f, #c8ccd2, #f6e3ab, #8f9399, #e7cf8f);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.theme-soft .liquid__blob { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 1.5px rgba(210, 214, 219, .6), 0 0 18px rgba(210, 214, 219, .3), 0 6px 16px rgba(0, 0, 0, .35); }
.theme-soft .liquid__item.is-active svg { color: #e9ecef; }
.header__nav { gap: 14px; }
.header.is-scrolled { background: rgba(11, 11, 11, .55); }
@media (max-width: 860px) { .header__nav .liquid { display: none; } }
@media (prefers-reduced-motion: reduce) { .liquid__blob, .liquid__item svg { transition: none; } }

/* =========================================================
   CARROSSEL INFINITO 3D
   ========================================================= */
.row.is-carousel .row__track.cc {
  display: block; position: relative; overflow: hidden; margin: 0; padding: 0;
  height: clamp(340px, 42vw, 480px); perspective: 1200px; scroll-snap-type: none; touch-action: pan-y;
}
.row.is-carousel .row__track--reels.cc { height: clamp(400px, 52vw, 560px); }
.cc__slide {
  position: absolute !important; left: 50%; top: 50%; margin: 0;
  width: clamp(220px, 26vw, 300px); aspect-ratio: 3 / 4;
  transition: transform .8s cubic-bezier(.25, 1.2, .35, 1), opacity .6s ease, filter .6s ease;
  will-change: transform; cursor: pointer;
}
.row__track--reels .cc__slide { width: clamp(220px, 24vw, 290px); aspect-ratio: 9 / 16; }
.cc__slide:hover { transform: none; }
.row.is-carousel .tile:hover { box-shadow: 0 24px 50px rgba(0, 0, 0, .6); }
.cc__slide.is-active { box-shadow: 0 30px 60px rgba(0, 0, 0, .65), 0 0 30px rgba(210, 214, 219, .12); }
.cc__dots { display: flex; justify-content: center; gap: 8px; margin: 14px 0 4px; order: 2; }
.cc__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .25); cursor: pointer; transition: width .4s ease, background .4s; }
.cc__dot.is-active { width: 26px; background: var(--silver-grad); }
.row.is-carousel .row__ctrl { order: 3; }
@media (max-width: 720px) {
  .cc__slide { width: 62vw; }
  .row__track--reels .cc__slide { width: 58vw; }
  .row.is-carousel .row__track.cc { height: 92vw; }
  .row.is-carousel .row__track--reels.cc { height: 112vw; }
}
@media (prefers-reduced-motion: reduce) { .cc__slide { transition: none; } }

/* =========================================================
   FAIXA INFINITA (substitui o carrossel 3D)
   ========================================================= */
.row.is-marquee .row__track.mq {
  display: block; overflow: hidden; padding: 12px 0 24px; margin: 0 calc(var(--gutter) * -1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.mq__inner { display: flex; gap: 16px; width: max-content; animation: mq var(--mq-dur, 40s) linear infinite; }
.mq__inner > * { flex: none; width: clamp(200px, 22vw, 270px); }
.row__track--reels .mq__inner > * { width: clamp(180px, 18vw, 230px); }
.row.is-marquee .tile:hover { transform: scale(1.04); }
.row.is-marquee .row__track.mq:hover .mq__inner { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(calc(-50% - 8px)); } }
@media (max-width: 720px) {
  .mq__inner > * { width: 58vw; }
  .row__track--reels .mq__inner > * { width: 46vw; }
}
@media (prefers-reduced-motion: reduce) { .mq__inner { animation: none; } .row.is-marquee .row__track.mq { overflow-x: auto; } }

/* Botões arredondados (pílula), no mesmo estilo do cabeçalho */
.btn, .header__nav .btn, .float-cta, .link, .menu__cta .btn, .split__actions .btn, .hero__actions .btn { border-radius: 999px; }
.btn { padding-left: 30px; padding-right: 30px; }
.btn--solid::before, .btn--solid::after { border-radius: inherit; }
.link { border-radius: 18px; }
@media (max-width: 600px) { .split__actions .btn, .menu__cta .btn, .hero__actions .btn { padding-left: 12px; padding-right: 12px; } }

/* Studio: botão "Enviar minha ideia" centralizado na coluna */
#realismo .feature .btn { display: flex; width: fit-content; margin: 0 auto; }