/* ==========================================================================
   Barbearia 37 — landing page
   Mobile-first. Paleta da marca: preto, creme, dourado (destaque) e cinza
   cimento queimado. Títulos em Archivo (larga, bold, geométrica), corpo em
   DM Sans leve.
   ========================================================================== */

:root{
  /* Cores da marca */
  --ink:        #0E0E0E;
  --cream:      #EFEAE2;
  --gold:       #1F3B70;   /* azul-marinho (fundos e botões) */
  --cement:     #8A8A8A;

  /* Derivadas */
  --ink-2:      #151514;
  --ink-3:      #1D1C1A;
  --cream-2:    #F6F2EB;
  --gold-light: #9DB7E3;   /* azul claro, legível sobre o preto */
  --gold-deep:  #1C3462;   /* azul-marinho legível sobre creme */
  --on-ink-dim: #B7B1A7;   /* texto de apoio sobre preto */
  --on-cream-dim:#55514B;  /* texto de apoio sobre creme */
  --line-ink:   rgba(239,234,226,.12);
  --line-cream: rgba(14,14,14,.12);

  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --header-h: 68px;
  --wrap: 1160px;
  --radius: 2px;
  --ease: cubic-bezier(.2,.7,.2,1);

  --noise: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,p{ margin: 0; }
ul{ margin: 0; padding: 0; list-style: none; }

::selection{ background: var(--gold); color: var(--ink); }
:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }

.nowrap{ white-space: nowrap; }

.skip-link{
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-160%);
  background: var(--gold); color: var(--ink);
  padding: 12px 18px; border-radius: var(--radius);
  font: 600 13px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase;
  transition: transform .2s var(--ease);
}
.skip-link:focus{ transform: none; }

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

/* ---------------- Logo (versão em código) ---------------- */
.logo{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.logo-mark{
  display: block;
  width: var(--ring, 34px);
  height: var(--ring, 34px);
  color: var(--cream);
}
.logo-word{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 8.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cream);
  padding-left: .3em; /* compensa o tracking para centralizar */
  white-space: nowrap;
}
.logo-word b{ font-weight: 800; letter-spacing: .12em; }
.logo--sm{ gap: 4px; }
.logo--sm{ --ring: 32px; }

.logo--hero{ gap: 14px; }
.logo--hero{ --ring: 92px; }
.logo--hero .logo-word{ font-size: 14px; letter-spacing: .22em; padding-left: .22em; }

.logo--footer{ gap: 10px; }
.logo--footer{ --ring: 64px; }
.logo--footer .logo-word{ font-size: 11px; letter-spacing: .22em; padding-left: .22em; }

/* ---------------- Botões ---------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn-sm{ min-height: 40px; padding: 0 16px; font-size: 12px; }
.btn-block{ width: 100%; }

.btn-gold{ background: var(--gold); color: var(--ink); }
.btn-gold:hover{ background: var(--gold-light); }

.btn-ink{ background: var(--ink); color: var(--cream); }
.btn-ink:hover{ background: var(--ink-3); }

.btn-line-light{ border-color: rgba(239,234,226,.38); color: var(--cream); }
.btn-line-light:hover{ border-color: var(--gold); color: var(--gold-light); }

.btn-line-dark{ border-color: rgba(14,14,14,.55); color: var(--ink); }
.btn-line-dark:hover{ border-color: var(--ink); background: rgba(14,14,14,.06); }

/* ---------------- Header ---------------- */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled{
  background: rgba(14,14,14,.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line-ink);
}
.header-inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav-desktop{ display: none; }
.header-actions{ display: flex; align-items: center; gap: 8px; }

.menu-btn{
  width: 44px; height: 44px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.menu-btn span{
  display: block; width: 22px; height: 1.5px; background: var(--cream);
}

/* ---------------- Gaveta (menu mobile) ---------------- */
.drawer-backdrop{
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
.drawer-backdrop.is-open{ opacity: 1; pointer-events: auto; }

.drawer{
  position: fixed; top: 0; right: 0; z-index: 80;
  width: min(86vw, 360px);
  height: 100vh;
  height: 100dvh;
  background: var(--ink-2);
  border-left: 1px solid var(--line-ink);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s var(--ease);
}
.drawer.is-open{ transform: none; }
.drawer-head{
  height: var(--header-h);
  padding: 0 12px 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line-ink);
}
.drawer-close{
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; color: var(--cream); cursor: pointer;
}
.drawer-nav{ display: flex; flex-direction: column; padding: 8px 20px; overflow-y: auto; }
.drawer-nav a{
  padding: 17px 0;
  border-bottom: 1px solid var(--line-ink);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 17px;
  font-stretch: 105%;
}
.drawer-nav a:hover{ color: var(--gold-light); }
.drawer-foot{
  margin-top: auto;
  padding: 20px;
  border-top: 1px solid var(--line-ink);
  display: flex; flex-direction: column; gap: 10px;
}
body.drawer-lock{ overflow: hidden; }

/* ---------------- Tipografia de seção ---------------- */
.eyebrow{
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before{ content: ''; width: 24px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow--dark{ color: var(--gold-deep); }

.title{
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: clamp(28px, 7.4vw, 50px);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}
.title--light{ color: var(--cream); }

.lead{
  max-width: 58ch;
  margin-top: 18px;
  font-size: 17px;
  font-weight: 300;
  color: var(--on-cream-dim);
}

.section{ position: relative; padding: 84px 0; }
.section--cream{ background: var(--cream); color: var(--ink); }
.section--ink{ background: var(--ink); color: var(--cream); }

.section-head{ margin-bottom: 40px; max-width: 680px; }
.section-head--center{ text-align: center; margin-left: auto; margin-right: auto; }
.section-head--center .eyebrow{ justify-content: center; }
.section-head--center .lead{ margin-left: auto; margin-right: auto; }

/* Textura de cimento queimado (ruído + manchas) */
.textured{ isolation: isolate; }
.textured{
  background:
    radial-gradient(60% 45% at 12% 18%, rgba(138,138,138,.11), transparent 70%),
    radial-gradient(50% 55% at 88% 80%, rgba(138,138,138,.08), transparent 70%),
    radial-gradient(30% 25% at 60% 40%, rgba(138,138,138,.05), transparent 70%),
    var(--ink-2);
}
.textured::before{
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--noise);
  opacity: .07;
  pointer-events: none;
}

/* ---------------- 1. Hero ---------------- */
.hero{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(70% 55% at 90% 15%, rgba(70,110,180,.14), transparent 65%),
    radial-gradient(60% 50% at 0% 100%, rgba(138,138,138,.10), transparent 70%),
    var(--ink);
}
.hero::before{
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--noise);
  opacity: .07;
  pointer-events: none;
}

.hero-ring{
  position: absolute; z-index: -1;
  width: 128vw; aspect-ratio: 1;
  right: -62vw; top: 46%;
  transform: translateY(-50%);
  color: rgba(70,110,180,.09);
  pointer-events: none;
}
.hero-ring svg{ display: block; width: 100%; height: 100%; }

.hero-inner{
  position: relative;
  padding-top: calc(var(--header-h) + 44px);
  padding-bottom: 72px;
  display: flex; flex-direction: column; align-items: flex-start;
}

.hero-title{
  margin-top: 36px;
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 115%;
  font-size: clamp(40px, 11.5vw, 96px);
  line-height: .98;
  letter-spacing: -.025em;
  color: var(--cream);
  max-width: 12ch;
  text-wrap: balance;
}
.hero-title-kicker{
  display: block;
  margin-bottom: 14px;
  font-weight: 600;
  font-stretch: 100%;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero-sub{
  margin-top: 24px;
  max-width: 44ch;
  font-size: 17px;
  font-weight: 300;
  color: var(--on-ink-dim);
}

.hero-actions{
  margin-top: 34px;
  width: 100%;
  display: flex; flex-direction: column; gap: 12px;
}

.hero-meta{
  margin-top: 28px;
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cement);
}

/* Entrada suave do hero (só CSS) */
@keyframes rise{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: none; } }
.hero-inner > *{ animation: rise .8s var(--ease) both; }
.hero-inner > :nth-child(2){ animation-delay: .08s; }
.hero-inner > :nth-child(3){ animation-delay: .16s; }
.hero-inner > :nth-child(4){ animation-delay: .24s; }
.hero-inner > :nth-child(5){ animation-delay: .32s; }

/* Faixa do poste de barbeiro */
.pole-band{
  height: 12px;
  background: repeating-linear-gradient(-45deg, var(--ink) 0 9px, var(--cream) 9px 18px);
  background-size: 25.46px 25.46px;
  border-top: 1px solid var(--line-ink);
  animation: pole 2.6s linear infinite;
}
@keyframes pole{ to{ background-position: 25.46px 0; } }

/* ---------------- 2. Sobre ---------------- */
.sobre-grid{ display: grid; gap: 48px; align-items: center; }
.sobre-copy .lead + .lead{ margin-top: 14px; }

.space-panel{
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: 150px 150px 14px;
  grid-template-areas:
    "cement plants"
    "cement wood"
    "pole pole";
  gap: 6px;
}
.tile{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}
.tile span{
  position: absolute; left: 12px; bottom: 10px;
  font-family: var(--f-display);
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(239,234,226,.85);
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.tile--cement{
  grid-area: cement;
  background:
    radial-gradient(40% 30% at 30% 25%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(35% 40% at 75% 70%, rgba(0,0,0,.14), transparent 70%),
    radial-gradient(25% 20% at 60% 30%, rgba(0,0,0,.08), transparent 70%),
    var(--noise),
    linear-gradient(170deg, #969593, #7c7b79);
  background-blend-mode: normal, normal, normal, soft-light, normal;
}
.tile--brick{
  grid-area: plants;
  background:
    radial-gradient(60% 50% at 30% 30%, rgba(255,255,255,.08), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='34'%3E%3Crect width='52' height='34' fill='%23c2ae96'/%3E%3Crect x='1.5' y='1.5' width='49' height='14' rx='1.5' fill='%23a5583a'/%3E%3Crect x='-24.5' y='18.5' width='49' height='14' rx='1.5' fill='%23944c31'/%3E%3Crect x='27.5' y='18.5' width='49' height='14' rx='1.5' fill='%23b0633f'/%3E%3C/svg%3E");
  background-size: auto, 52px 34px;
}
.tile--wood{
  grid-area: wood;
  background:
    repeating-linear-gradient(178deg, rgba(0,0,0,.10) 0 2px, transparent 2px 7px, rgba(255,255,255,.05) 7px 9px, transparent 9px 15px),
    linear-gradient(100deg, #8a6845, #a07a51 45%, #7d5c3b);
}
.tile--pole{
  grid-area: pole;
  background: repeating-linear-gradient(-45deg, var(--ink) 0 7px, #fff 7px 14px);
}
.space-badge{
  position: absolute;
  left: -8px; bottom: 34px;
  padding: 14px 18px;
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.45);
  display: flex; flex-direction: column; gap: 2px;
}
.space-badge{
  max-width: 15em;
  font-family: var(--f-display); font-weight: 700; font-stretch: 105%;
  font-size: 15px; line-height: 1.3;
  text-wrap: balance;
}

/* ---------------- 3. Serviços e preços ---------------- */
.price-list{ border-top: 1px solid var(--line-ink); }
.price-list li{
  display: flex; align-items: baseline; gap: 12px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line-ink);
}
.price-name{
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 105%;
  font-size: 17px;
  color: var(--cream);
}
.price-dots{
  flex: 1;
  min-width: 14px;
  border-bottom: 1px dotted rgba(239,234,226,.28);
  transform: translateY(-5px);
}
.price-value{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-value--todo{
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--on-ink-dim);
  border: 1px dashed rgba(183,177,167,.55);
  padding: 2px 7px;
  border-radius: var(--radius);
}
/* corte e barba: preço muda conforme o dia */
.price-split{
  display: inline-flex;
  gap: 16px;
}
.price-split > span{
  display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.1;
}
.price-split small{
  margin-top: 5px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
}
.price-note{
  margin-top: 24px;
  font-size: 13.5px;
  color: var(--on-ink-dim);
}

/* ---------------- 4. Planos ---------------- */
.plans{ display: grid; gap: 20px; align-items: center; }
.plan{
  position: relative;
  padding: 32px 26px 28px;
  background: var(--cream-2);
  border: 1px solid var(--line-cream);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
}
.plan-name{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: 22px;
  letter-spacing: -.005em;
}
.plan-name::before{
  content: '';
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cement);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.plans .plan:nth-child(1) .plan-name::before{ background: linear-gradient(135deg, #c08a59, #8c5a32); }
.plans .plan:nth-child(2) .plan-name::before{ background: linear-gradient(135deg, var(--gold-light), var(--gold)); }
.plans .plan:nth-child(3) .plan-name::before{ background: linear-gradient(135deg, #d9d9d9, #9a9a9a); }

.plan-desc{
  margin-top: 8px;
  font-size: 15.5px;
  color: var(--on-cream-dim);
  min-height: 3.1em;
}
.plan-price{
  margin: 18px 0 24px;
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 105%;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.plan-cur{ font-size: 18px; font-weight: 600; vertical-align: .9em; margin-right: 2px; letter-spacing: 0; }
.plan-per{ font-family: var(--f-body); font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--on-cream-dim); margin-left: 4px; }

.plan--featured{
  background: var(--ink);
  color: var(--cream);
  border-color: var(--gold);
  box-shadow: 0 24px 50px -24px rgba(14,14,14,.55);
}
.plan--featured .plan-desc,
.plan--featured .plan-per{ color: var(--on-ink-dim); }
.plan-badge{
  position: absolute; top: -12px; left: 26px;
  padding: 5px 12px;
  background: var(--gold); color: var(--ink);
  border-radius: var(--radius);
  font-family: var(--f-display); font-weight: 700; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
}

/* ---------------- 5. Estilos (só nomes, sem fotos) ---------------- */
.cuts{ border-top: 1px solid var(--line-ink); }
.cut{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-ink);
}
.cut-name{
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(26px, 7.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--cream);
  -webkit-text-stroke: 1px transparent;
  transition: color .5s var(--ease-out), -webkit-text-stroke-color .5s var(--ease-out), transform .7s var(--ease-out);
}
/* linhas alternadas só com contorno, como as marcas d'água da Mister */
.cut:nth-child(even) .cut-name{
  color: transparent;
  -webkit-text-stroke-color: rgba(239,234,226,.6);
}
.cut::after{
  content: '✦';
  flex-shrink: 0;
  font-size: 14px;
  color: var(--gold);
  opacity: .45;
  transition: opacity .4s var(--ease-out), transform .7s var(--ease-out);
}
.cut:hover .cut-name{
  transform: translateX(10px);
  color: var(--gold-light);
  -webkit-text-stroke-color: transparent;
}
.cut:hover::after{ opacity: 1; transform: rotate(90deg) scale(1.2); }

.styles-more{
  margin-top: 28px;
  font-size: 15px;
  color: var(--on-ink-dim);
}
.styles-more a{
  color: var(--gold-light);
  border-bottom: 1px solid rgba(157,183,227,.4);
}
.styles-more a:hover{ border-color: var(--gold-light); }
.hashtag{
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold);
  margin-left: 6px;
}

/* ---------------- 6. Como agendar ---------------- */
.ways{ display: grid; gap: 14px; }
.way{
  padding: 28px 24px;
  background: var(--cream-2);
  border: 1px solid var(--line-cream);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 10px;
}
.way-icon{
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border: 1px solid rgba(28,52,98,.45);
  border-radius: 50%;
  color: var(--gold-deep);
  margin-bottom: 6px;
}
.way h3{
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 108%;
  font-size: 20px;
}
.way p{ color: var(--on-cream-dim); font-size: 15.5px; }
.way p strong{ color: var(--ink); font-weight: 600; }
.way-link{
  margin-top: auto;
  padding-top: 8px;
  align-self: flex-start;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border-bottom: 1px solid rgba(28,52,98,.35);
}
.way-link:hover{ color: var(--ink); border-color: var(--ink); }

/* ---------------- 7. Horários e localização ---------------- */
.local-grid{ display: grid; gap: 40px; }
.hours{ margin: 28px 0 24px; border-top: 1px solid var(--line-ink); }
.hours div{
  display: flex; justify-content: space-between; gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-ink);
}
.hours dt{ color: var(--on-ink-dim); }
.hours dd{
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.address{
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 28px;
  font-style: normal;
  color: var(--on-ink-dim);
}
.address svg{ color: var(--gold); flex-shrink: 0; margin-top: 3px; }

.map{
  position: relative;
  min-height: 320px;
  border: 1px solid var(--line-ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-3);
}
.map iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(.35) contrast(1.05);
}

/* ---------------- Faixa final ---------------- */
.cta-band{
  background: var(--gold);
  color: var(--ink);
  padding: 72px 0;
}
.cta-inner{ display: flex; flex-direction: column; gap: 28px; }
.cta-quote{
  max-width: 24ch;
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: clamp(24px, 6vw, 40px);
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.cta-actions{ display: flex; flex-direction: column; gap: 12px; }

/* ---------------- 8. Rodapé ---------------- */
.footer{ background: var(--ink); padding-top: 56px; }
.footer-inner{ display: grid; gap: 32px; }
.footer-since{ margin-top: 14px; font-size: 13.5px; color: var(--cement); }
.footer-since .hashtag{ margin-left: 0; }
.footer-links li a{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 7px 0;
  color: var(--on-ink-dim);
  font-size: 15px;
  transition: color .2s var(--ease);
}
.footer-links li a:hover{ color: var(--cream); }
.footer-links svg{ color: var(--gold); flex-shrink: 0; margin-top: 3px; }
.footer-bottom{
  margin-top: 40px;
  padding: 20px 0 96px; /* espaço para o botão flutuante */
  border-top: 1px solid var(--line-ink);
}
.footer-bottom p{ font-size: 13px; color: var(--cement); }

/* ---------------- WhatsApp flutuante ---------------- */
.wa-float{
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.55);
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.wa-float:hover{ transform: translateY(-2px); background: var(--gold-light); }
.wa-float::after{
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--gold);
  animation: ping 2.8s var(--ease) infinite;
}
@keyframes ping{ 0%{ transform: scale(1); opacity: .7; } 70%,100%{ transform: scale(1.45); opacity: 0; } }

/* ---------------- Animação de entrada nas seções ----------------
   Usa a propriedade "translate" (separada de "transform") para não
   brigar com os efeitos de hover, que usam "transform". */
.js [data-reveal]{
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity .7s var(--ease-out) var(--d, 0s),
    translate .7s var(--ease-out) var(--d, 0s),
    transform .55s var(--ease-out),
    box-shadow .55s var(--ease-out),
    border-color .35s var(--ease),
    background-color .35s var(--ease);
}
.js [data-reveal].is-in{ opacity: 1; translate: none; }

/* ==========================================================================
   Telas maiores
   ========================================================================== */
@media (min-width: 560px){
  .hero-actions{ flex-direction: row; flex-wrap: wrap; width: auto; }
  .cta-actions{ flex-direction: row; flex-wrap: wrap; }
  .space-panel{ grid-template-rows: 190px 190px 16px; }
}

@media (min-width: 860px){
  .price-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
    border-top: 0;
  }
  .price-list li:nth-child(-n+2){ border-top: 1px solid var(--line-ink); }
  .ways{ grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

@media (min-width: 960px){
  :root{ --header-h: 76px; }

  .wrap{ padding: 0 32px; }
  .section{ padding: 120px 0; }
  .section-head{ margin-bottom: 56px; }

  .nav-desktop{
    display: flex; gap: 26px;
  }
  .nav-desktop a{
    position: relative;
    padding: 6px 0;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--on-ink-dim);
    transition: color .2s var(--ease);
  }
  .nav-desktop a::after{
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: var(--gold);
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease);
  }
  .nav-desktop a:hover,
  .nav-desktop a.is-active{ color: var(--cream); }
  .nav-desktop a:hover::after,
  .nav-desktop a.is-active::after{ transform: scaleX(1); }
  .menu-btn{ display: none; }

  .logo--sm{ --ring: 36px; }

  .hero-inner{ padding-top: calc(var(--header-h) + 72px); padding-bottom: 104px; }
  .hero-ring{ width: 760px; right: -140px; top: 50%; }
  .logo--hero{ --ring: 116px; }
  .logo--hero .logo-word{ font-size: 17px; }
  .hero-title{ margin-top: 44px; }
  .hero-sub{ font-size: 18px; }

  .sobre-grid{ grid-template-columns: 1.05fr .95fr; gap: 80px; }
  .space-panel{ grid-template-rows: 210px 210px 18px; }
  .space-badge{ left: -28px; }

  .plans{ grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .plan{ padding: 36px 30px 30px; }
  .plan--featured{ padding: 48px 32px 36px; }


  .local-grid{ grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: stretch; }
  .map{ min-height: 420px; }

  .cta-band{ padding: 88px 0; }
  .cta-inner{ flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
  .cta-actions{ flex-shrink: 0; }

  .footer-inner{
    grid-template-columns: 1fr 1.2fr;
    align-items: start;
  }
  .footer-links{ justify-self: end; }
  .footer-bottom{ padding-bottom: 24px; }

  .wa-float{ right: 24px; bottom: 24px; }
}


/* ==========================================================================
   MOTION & MICROINTERAÇÕES
   Movimento com propósito: entradas suaves, hovers discretos, parallax
   leve. Tudo com easing de desaceleração (ease-out) e desligado quando o
   usuário pede menos movimento no sistema.
   ========================================================================== */

:root{
  --ease-out: cubic-bezier(.16,1,.3,1);     /* desacelera longo, sensação "fluida" */
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1); /* leve "respiro" em ícones pequenos */
}

/* Com JS, a rolagem suave é feita pelo script (com easing próprio) */
html.js{ scroll-behavior: auto; }

/* ---------- Barra de progresso de leitura ---------- */
.scroll-progress{
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  pointer-events: none;
}

/* ---------- Grão de filme (textura viva, quase imperceptível) ---------- */
.grain{
  position: fixed; inset: -50%; z-index: 95;
  width: 200%; height: 200%;
  background: var(--noise);
  opacity: .045;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: grain 9s steps(9) infinite;
}
@keyframes grain{
  0%,100%{ transform: translate(0,0); }
  20%{ transform: translate(-4%,3%); }
  40%{ transform: translate(3%,-5%); }
  60%{ transform: translate(-2%,6%); }
  80%{ transform: translate(5%,-2%); }
}

/* ---------- Header: some ao descer, volta ao subir ---------- */
.site-header{
  transition:
    transform .55s var(--ease-out),
    background-color .35s var(--ease),
    border-color .35s var(--ease);
}
.site-header.is-hidden{ transform: translateY(-100%); }

.menu-btn span{ transition: transform .45s var(--ease-out); }
.menu-btn:hover span:first-child{ transform: translateX(-3px); }
.menu-btn:hover span:last-child{ transform: translateX(3px); }

/* ---------- Hero ---------- */
.hero-glow{
  position: absolute; z-index: -1;
  left: 70%; top: 40%;
  width: 120vmax; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0deg, rgba(70,110,180,.13) 70deg, transparent 150deg, transparent 360deg);
  filter: blur(70px);
  animation: glow-spin 48s linear infinite;
  pointer-events: none;
}
@keyframes glow-spin{ to{ transform: translate(-50%, -50%) rotate(360deg); } }

.hero-ring svg{ will-change: transform; }
.hero-inner{ will-change: transform, opacity; }

/* "cada detalhe." em dourado, com sublinhado que se desenha */
.hero-accent{
  color: var(--gold-light);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 2px no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: .06em;
  animation: underline 1.2s var(--ease-out) 1s forwards;
}
@keyframes underline{ to{ background-size: 100% 2px; } }

.hero-inner > *{ animation-duration: 1.1s; animation-timing-function: var(--ease-out); }

/* Indicador de rolagem */
.scroll-cue{
  display: none;
  position: absolute; left: 50%; bottom: 44px; z-index: 2;
  width: 24px; height: 38px;
  margin-left: -12px;
  border: 1px solid rgba(239,234,226,.3);
  border-radius: 14px;
  transition: border-color .3s var(--ease), transform .45s var(--ease-out);
}
.scroll-cue:hover{ border-color: var(--gold); transform: translateY(3px); }
.scroll-cue span{
  position: absolute; left: 50%; top: 8px;
  width: 2px; height: 7px; margin-left: -1px;
  border-radius: 2px;
  background: var(--gold);
  animation: cue 2.2s var(--ease-in-out) infinite;
}
@keyframes cue{
  0%{ transform: translateY(0); opacity: 0; }
  25%{ opacity: 1; }
  80%{ transform: translateY(14px); opacity: 0; }
  100%{ opacity: 0; }
}

/* ---------- Marquee ---------- */
.marquee{
  position: relative;
  display: flex;
  overflow: hidden;
  padding: 16px 0;
  background: var(--ink-2);
  border-bottom: 1px solid var(--line-ink);
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display: flex; align-items: center; flex-shrink: 0;
  gap: 28px; padding-right: 28px;
  white-space: nowrap;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee span{
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 108%;
  font-size: 13px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
}
.marquee span.gold{ color: var(--gold); letter-spacing: .08em; }
.marquee i{ font-style: normal; font-size: 9px; color: var(--gold); opacity: .7; }
@keyframes marquee{ to{ transform: translateX(-50%); } }

/* ---------- Botões ---------- */
.btn{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .45s var(--ease-out),
    box-shadow .45s var(--ease-out),
    background-color .3s var(--ease),
    color .3s var(--ease),
    border-color .3s var(--ease);
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0) scale(.98); transition-duration: .12s; }
.btn svg{ transition: transform .5s var(--ease-back); }
.btn:hover svg{ transform: translateX(2px) rotate(-6deg); }

/* brilho que atravessa o botão dourado */
.btn-gold::before{
  content: '';
  position: absolute; top: 0; bottom: 0; left: -80%;
  width: 50%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg);
  transition: left .8s var(--ease-out);
}
.btn-gold:hover::before{ left: 135%; }
.btn-gold:hover{ box-shadow: 0 12px 28px -12px rgba(70,110,180,.7); }
.btn-ink:hover{ box-shadow: 0 12px 26px -14px rgba(14,14,14,.6); }

/* ondinha no clique (criada pelo JS) */
.ripple{
  position: absolute; z-index: -1;
  border-radius: 50%;
  background: currentColor;
  opacity: .22;
  transform: scale(0);
  pointer-events: none;
  animation: ripple .7s var(--ease-out) forwards;
}
@keyframes ripple{ to{ transform: scale(1); opacity: 0; } }

/* ---------- Menu em gaveta ---------- */
.drawer{ transition: transform .6s var(--ease-out); }
.drawer-backdrop{ transition: opacity .45s var(--ease); }
.drawer-nav a{
  opacity: 0;
  transform: translateX(28px);
  transition: opacity .5s var(--ease-out), transform .7s var(--ease-out), color .25s var(--ease), padding-left .4s var(--ease-out);
}
.drawer.is-open .drawer-nav a{ opacity: 1; transform: none; }
.drawer.is-open .drawer-nav a:nth-child(1){ transition-delay: .12s, .12s, 0s, 0s; }
.drawer.is-open .drawer-nav a:nth-child(2){ transition-delay: .17s, .17s, 0s, 0s; }
.drawer.is-open .drawer-nav a:nth-child(3){ transition-delay: .22s, .22s, 0s, 0s; }
.drawer.is-open .drawer-nav a:nth-child(4){ transition-delay: .27s, .27s, 0s, 0s; }
.drawer.is-open .drawer-nav a:nth-child(5){ transition-delay: .32s, .32s, 0s, 0s; }
.drawer.is-open .drawer-nav a:nth-child(6){ transition-delay: .37s, .37s, 0s, 0s; }
.drawer-nav a:hover{ padding-left: 8px; }
.drawer-foot{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease-out), transform .7s var(--ease-out);
}
.drawer.is-open .drawer-foot{ opacity: 1; transform: none; transition-delay: .42s; }
.drawer-close{ transition: transform .5s var(--ease-back), color .25s var(--ease); }
.drawer-close:hover{ transform: rotate(90deg); color: var(--gold-light); }

/* ---------- Sobre ---------- */
.space-panel .tile{ will-change: transform; }
.space-badge{ transition: box-shadow .5s var(--ease-out); }

/* ---------- Serviços ---------- */
.price-name{ transition: transform .45s var(--ease-out), color .3s var(--ease); }
.price-dots{ transition: border-color .4s var(--ease); }
.price-list li:hover .price-name{ transform: translateX(6px); color: #fff; }
.price-list li:hover .price-dots{ border-bottom-color: rgba(70,110,180,.7); }

/* ---------- Planos ---------- */
.plan::after{
  content: '';
  position: absolute; left: -1px; right: -1px; top: -1px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease-out);
}
.plan:hover{ transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(14,14,14,.45); }
.plan:hover::after{ transform: scaleX(1); }
.plan--featured:hover{ box-shadow: 0 34px 60px -28px rgba(14,14,14,.7); }
.plan-badge{ animation: badge-float 3.6s var(--ease-in-out) infinite; }
@keyframes badge-float{ 0%,100%{ translate: 0 0; } 50%{ translate: 0 -3px; } }

/* ---------- Como agendar ---------- */
.way:hover{ transform: translateY(-5px); box-shadow: 0 24px 40px -28px rgba(14,14,14,.35); border-color: rgba(28,52,98,.35); }
.way-icon{ transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .6s var(--ease-back); }
.way:hover .way-icon{ background: var(--gold-deep); border-color: var(--gold-deep); color: var(--cream); transform: rotate(-8deg) scale(1.06); }
.way-link{ transition: color .3s var(--ease), border-color .3s var(--ease), transform .5s var(--ease-out); }
.way:hover .way-link{ transform: translateX(4px); }

/* ---------- Horários e endereço ---------- */
.hours div{ transition: padding-left .45s var(--ease-out); }
.hours div:hover{ padding-left: 8px; }
.hours dd{ transition: color .3s var(--ease); }
.hours div:hover dd{ color: var(--gold-light); }
.map iframe{ transition: filter .6s var(--ease); }
.map:hover iframe{ filter: grayscale(0) contrast(1); }

/* ---------- Faixa final ---------- */
.cta-band{ position: relative; overflow: hidden; isolation: isolate; }
.cta-mark{
  position: absolute; z-index: -1;
  width: 380px; aspect-ratio: 1;
  right: -130px; top: 50%;
  translate: 0 -50%;
  color: rgba(14,14,14,.08);
  pointer-events: none;
}
.cta-mark svg{ display: block; width: 100%; height: 100%; will-change: transform; }

/* ---------- Rodapé ---------- */
.footer-links svg{ transition: transform .5s var(--ease-back); }
.footer-links a:hover svg{ transform: scale(1.15) rotate(-6deg); }

/* ---------- WhatsApp flutuante ---------- */
.wa-float{
  animation: wa-in .9s var(--ease-back) 1.2s both;
  transition: transform .45s var(--ease-out), background-color .3s var(--ease);
}
@keyframes wa-in{ from{ opacity: 0; scale: .5; } to{ opacity: 1; scale: 1; } }
.wa-float:hover{ transform: translateY(-3px); }
.wa-float:active{ transform: scale(.94); }
.wa-label{
  position: absolute;
  right: calc(100% + 12px); top: 50%;
  translate: 0 -50%;
  padding: 9px 13px;
  white-space: nowrap;
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--line-ink);
  border-radius: var(--radius);
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity .4s var(--ease), transform .6s var(--ease-out);
  pointer-events: none;
}
.wa-float:hover .wa-label,
.wa-float.is-peek .wa-label{ opacity: 1; transform: none; }

@media (min-width: 960px){
  .scroll-cue{ display: block; }
  .cta-mark{ width: 560px; right: -120px; }
}

/* ==========================================================================
   Movimento reduzido (opção do sistema: Windows "Efeitos de animação"
   desligado, iPhone "Reduzir movimento" etc.)
   Mantém as entradas suaves, o hover e as microinterações — que são
   movimentos curtos e disparados pelo próprio usuário — e desliga só o
   que se move sozinho o tempo todo ou acompanha a rolagem (parallax).
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .grain{ display: none; }
  .hero-glow,
  .marquee-track,
  .plan-badge,
  .pole-band,
  .scroll-cue span,
  .wa-float::after{ animation: none; }
  [data-parallax]{ transform: none !important; }
}

/* Em celular (sem mouse), evita que o efeito de hover "grude" depois do toque */
@media (hover: none){
  .btn:hover, .plan:hover, .way:hover, .wa-float:hover{ transform: none; box-shadow: none; }
  .plan--featured:hover{ box-shadow: 0 24px 50px -24px rgba(14,14,14,.55); }
  .plan:hover::after{ transform: scaleX(0); }
  .price-list li:hover .price-name{ transform: none; color: var(--cream); }
  .cut:hover .cut-name{ transform: none; }
}


/* ==========================================================================
   Du's Irmãos — ajustes da marca e da seção de combos
   ========================================================================== */
.logo--sm{ --ring: 38px; }
.logo--hero{ --ring: 132px; }
.logo--footer{ --ring: 84px; }
@media (min-width: 860px){
  .logo--sm{ --ring: 42px; }
  .logo--hero{ --ring: 168px; }
}

/* pigmentação: "a partir de" */
.price-from{ display: inline-flex; align-items: baseline; gap: 8px; }
.price-from small{
  font-family: var(--f-body); font-weight: 500; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink-dim);
}

/* combos: 5 cartões, centralizados */
.plans.plans--combos{
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: 20px;
}
.plans--combos .plan{ flex: 1 1 280px; max-width: 360px; }
.plans.plans--combos .plan--featured{ padding: 32px 26px 28px; }
@media (min-width: 860px){
  .plans.plans--combos{ gap: 24px; }
  .plans.plans--combos .plan,
  .plans.plans--combos .plan--featured{ padding: 34px 30px 30px; }
}
.plans.plans--combos .plan .plan-name::before{ display: none; }
.plans--combos .plan-name{ display: block; font-size: 20px; line-height: 1.2; text-wrap: balance; }
.plans--combos .plan-name .plus{ color: var(--gold); font-weight: 600; }
.plans--combos .plan-desc{ min-height: 0; }
.plans--combos .plan-desc s{ text-decoration-thickness: 1.5px; }
.plans--combos .plan-price{ margin-top: 14px; flex: 1; }
.plans--combos .plan-per{
  display: block; margin: 10px 0 0;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-deep);
}
.plans--combos .plan--featured .plan-per{ color: var(--gold-light); }

/* 4 combos: 2 por linha no tablet, 4 lado a lado no desktop */
@media (min-width: 600px){
  .plans.plans--combos{ display: grid; grid-template-columns: repeat(2, 1fr); }
  .plans--combos .plan{ max-width: none; }
}
@media (min-width: 1080px){
  .plans.plans--combos{ grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   Paleta azul-marinho (no lugar do dourado)
   ========================================================================== */
::selection{ background: var(--gold); color: var(--cream); }
:focus-visible{ outline-color: var(--gold-light); }
.skip-link{ color: var(--cream); }

.btn-gold{ color: var(--cream); }
.btn-gold:hover{ background: #2A4D8C; }

.eyebrow,
.hero-title-kicker,
.hashtag,
.cut::after,
.marquee span.gold,
.marquee i,
.address svg,
.footer-links svg{ color: var(--gold-light); }
.eyebrow--dark{ color: var(--gold-deep); }
.nav-desktop a::after,
.scroll-cue span{ background: var(--gold-light); }
.scroll-cue:hover{ border-color: var(--gold-light); }

/* faixa final azul-marinho com texto claro */
.cta-band{ color: var(--cream); }
.cta-band .btn-ink{ background: var(--cream); color: var(--ink); }
.cta-band .btn-ink:hover{ background: #fff; }
.cta-band .btn-line-dark{ border-color: rgba(239,234,226,.6); color: var(--cream); }
.cta-band .btn-line-dark:hover{ border-color: var(--cream); background: rgba(239,234,226,.08); }
.cta-band .cta-mark{ color: rgba(239,234,226,.07); }

.wa-float{ color: var(--cream); box-shadow: 0 0 0 1px rgba(157,183,227,.35), 0 12px 28px -8px rgba(0,0,0,.55); }
.wa-float:hover{ background: #2A4D8C; }
.wa-float::after{ border-color: var(--gold-light); }

.plans--combos .plan--featured .plan-name .plus{ color: var(--gold-light); }
.plans--combos .plan--featured{ border-color: var(--gold-light); }
/* combos só mostram os valores: sem botão e sem efeito de clique */
.plans--combos .plan{ cursor: default; }
.plans--combos .plan:hover{ transform: none; }
.plans--combos .plan-price{ flex: 0; margin-bottom: 0; }