/* =====================================================================
   VISUAL DO SITE — Mazzo Barbearia, versão 2
   Mesma identidade da versão 1 (barbearia vintage: papel envelhecido
   sobre fundo cor de tinta, verde-garrafa, Cormorant + Archivo).
   O que mudou foram as animações (veja o script.js).
   Para mudar a identidade inteira, mexa só nas variáveis abaixo.
   ===================================================================== */

/* ---------- Fontes hospedadas no próprio site ---------- */
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-latin-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }

:root {
  --tinta: #15130f;      /* fundo principal */
  --carvao: #1f1c17;     /* superfícies e faixas alternadas */
  --linha: #3a342b;      /* bordas finas */
  --osso: #ece2cc;       /* texto principal: papel envelhecido */
  --osso-suave: #b2a88f; /* texto secundário */
  --destaque: #3a5a40;   /* verde da casa: fundo de botões e linhas */
  --acento-claro: #9fb99f;   /* o mesmo verde, claro: textos sobre o fundo escuro */
  --acento-papel: #2f4a34;   /* o mesmo verde, escuro: textos sobre o papel */
  --destaque-claro: var(--acento-claro);
  --destaque-escuro: #2b4431;
  --sobre-destaque: #ece2cc; /* texto dos botões e da faixa do convite */
  --papel: #ece2cc;      /* cor fixa do papel */
  --breu: #15130f;       /* cor fixa da tinta */

  --f-titulo: "Cormorant", Georgia, "Times New Roman", serif;
  --f-texto: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --largura: 1180px;
  --raio: 4px;
  --curva: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--tinta);
  color: var(--osso);
  font: 400 1rem/1.6 var(--f-texto);
  overflow-x: clip;
}
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 300; line-height: 1; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h2 { font-size: clamp(2.8rem, 6.5vw, 5.4rem); }
h2 em, h1 em { font-style: italic; }
h3 { font-size: 1.9rem; font-weight: 400; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--destaque-claro); outline-offset: 3px; }
img { max-width: 100%; height: auto; }

/* Grão de papel antigo por cima de tudo */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.pular { position: absolute; left: 1rem; top: -60px; z-index: 200; background: var(--papel); color: var(--breu); padding: .7rem 1rem; border-radius: var(--raio); }
.pular:focus { top: 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.interno {
  max-width: var(--largura);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.faixa { padding-block: clamp(4rem, 10vw, 8rem); }
.selo {
  display: inline-flex; align-items: center; gap: .7rem;
  font: 500 0.75rem/1.2 var(--f-texto); font-stretch: 125%;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--destaque-claro);
}
.cabeca-secao .selo::before { content: ""; width: 28px; height: 0; border-top: 3px double currentColor; }
.apoio { color: var(--osso-suave); max-width: 52ch; }
.aviso { color: var(--destaque-claro); font-weight: 600; }
.cabeca-secao { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); justify-items: start; }

/* Seções cor de papel: as mesmas variáveis, invertidas */
.papel {
  --osso: var(--breu); --osso-suave: color-mix(in srgb, var(--breu) 72%, var(--papel)); --linha: color-mix(in srgb, var(--breu) 18%, var(--papel)); --carvao: color-mix(in srgb, var(--breu) 6%, var(--papel));
  --destaque-claro: var(--acento-papel);
  background: var(--papel); color: var(--osso); color-scheme: light;
}

/* ---------- Botões: uma cor sobe por dentro no hover ---------- */
.botao {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.4rem;
  background: var(--destaque); color: var(--sobre-destaque);
  font: 500 0.78rem/1 var(--f-texto); font-stretch: 112%; text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none;
  border: 1px solid var(--destaque); border-radius: var(--raio); cursor: pointer;
}
.botao::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--destaque-escuro);
  transform: translateY(101%); transition: transform .5s var(--curva);
}
.botao > span { display: inline-block; transition: color .3s; }
.botao-linha { background: transparent; border-color: var(--linha); color: var(--osso); }
.botao-linha::before { background: var(--osso); }
.botao-claro { background: var(--papel); border-color: var(--papel); color: var(--breu); }
.botao-claro::before { background: var(--breu); }
@media (hover: hover) {
  .botao:hover::before, .botao:focus-visible::before { transform: translateY(0); }
  .botao-linha:hover > span, .botao-linha:focus-visible > span { color: var(--tinta); }
  .papel .botao-linha:hover > span { color: var(--papel); }
  .botao-claro:hover > span { color: var(--papel); }
}
.botao-pequeno { min-height: 44px; padding: 0 1rem; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- ABERTURA ---------- */
.abertura { display: none; }
.com-abertura .abertura {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 300; background: var(--tinta);
}
.abertura-azulejos { position: absolute; inset: 0; display: grid; }
.abertura-azulejos i { background: var(--tinta); }
.abertura-azulejos i.escuro { background: color-mix(in srgb, var(--tinta) 96%, var(--osso)); }
.abertura-azulejos i.fora { visibility: hidden; }
.abertura-miolo { position: relative; display: grid; justify-items: center; gap: 1.1rem; }
.abertura-logo { width: 120px; height: auto; }
.abertura-barra { width: 168px; height: 1px; background: var(--linha); }
.abertura-barra i { display: block; height: 100%; background: var(--osso); transform: scaleX(0); transform-origin: left; }
.abertura-contador { font: 400 .8rem/1 var(--f-texto); font-stretch: 125%; letter-spacing: .3em; color: var(--osso-suave); font-variant-numeric: tabular-nums; }

/* ---------- CABEÇALHO ---------- */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem max(16px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--tinta) 82%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--linha) 60%, transparent);
}
.marca { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font: 400 1.6rem/1 var(--f-titulo); min-height: 44px; }
.marca-logo { width: 38px; height: auto; }
.menu { display: none; gap: 1.8rem; }
.menu a {
  position: relative; display: inline-block; text-decoration: none;
  font: 500 .74rem/1.4 var(--f-texto); font-stretch: 118%; text-transform: uppercase; letter-spacing: .14em; color: var(--osso-suave);
  padding-block: .6rem;
}
.menu a .mascara { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.menu a .original, .menu a .copia { display: flex; white-space: pre; }
.menu a .copia { position: absolute; left: 0; top: 0; color: var(--osso); }
.menu a .letra { display: inline-block; }
@media (min-width: 900px) { .menu { display: flex; } }

/* ---------- 1. HERÓI ---------- */
.hero {
  position: relative; min-height: 100svh; display: grid; align-items: center;
  padding-top: 6rem; padding-bottom: 4rem; overflow: hidden;
}
.hero-gravura {
  position: absolute; z-index: 0; top: 52%; right: max(4vw, calc((100vw - var(--largura)) / 2));
  width: min(46vw, 620px, 74svh); aspect-ratio: 1; transform: translateY(-50%);
}
.hero-gravura canvas { width: 100%; height: 100%; display: block; }
.hero-logo { width: 100%; height: 100%; display: block; overflow: visible; }
.hero-logo .peca { fill: var(--osso); }
.js .hero-logo .peca { visibility: hidden; } /* o GSAP mostra ao montar */
.hero-texto { position: relative; z-index: 1; display: grid; gap: 1.6rem; justify-items: start; width: 100%; }
.hero-titulo { font-size: clamp(4.4rem, 12.5vw, 11rem); line-height: .86; display: grid; }
.hero-titulo .linha { display: block; }
.linha-contorno { font-style: italic; color: transparent; -webkit-text-stroke: 1.5px var(--osso); padding-left: .5em; }
.hero-titulo .char { display: inline-block; transform-origin: 50% 100%; }
.hero-sub { max-width: 34ch; color: var(--osso-suave); font-size: 1.05rem; }
.hero-dica {
  position: absolute; z-index: 1; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  font: 500 .7rem/1 var(--f-texto); font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; color: var(--osso-suave);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .hero-gravura { right: -28vw; top: 25%; width: 96vw; opacity: .32; }
  .hero-dica { display: none; }
}

/* ---------- 2. NÚMEROS ---------- */
.numeros { border-block: 1px solid var(--linha); padding-block: clamp(3rem, 7vw, 5rem); }
.numeros-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
@media (min-width: 900px) { .numeros-grade { grid-template-columns: repeat(4, 1fr); } }
.numero { display: grid; gap: 1rem; align-content: start; }
.numero strong {
  display: block; font: 300 clamp(3.6rem, 9vw, 6.6rem)/.9 var(--f-titulo);
  color: transparent; -webkit-text-stroke: 1.5px var(--osso); overflow: visible;
}
.numero .digito { display: inline-block; transform-origin: 50% 100%; }
.numero .rotulo { font: 500 .74rem/1.4 var(--f-texto); font-stretch: 118%; text-transform: uppercase; letter-spacing: .14em; color: var(--osso-suave); }

/* ---------- LETREIRO GIGANTE ---------- */
.letreiro { padding-block: clamp(1.8rem, 4vw, 3rem); overflow: hidden; border-bottom: 1px solid var(--linha); }
.letreiro-linha {
  display: flex; gap: .5em; width: max-content; white-space: nowrap;
  font: 300 clamp(2.2rem, 5.5vw, 4.6rem)/1.05 var(--f-titulo);
}
.letreiro-linha + .letreiro-linha { margin-top: .1em; }
.letreiro-linha .vazado { font-style: italic; color: transparent; -webkit-text-stroke: 1.2px var(--osso); }
.letreiro-linha .estrela { color: var(--destaque-claro); font-size: .4em; align-self: center; }

/* ---------- 4. GALERIA ---------- */
.galeria-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 3vw, 2.2rem); }
@media (min-width: 900px) { .galeria-grade { grid-template-columns: repeat(3, 1fr); } }
.quadro { margin: 0; padding: .7rem .7rem 0; background: var(--papel); color: var(--breu); box-shadow: 0 18px 40px -18px rgba(0,0,0,.7); }
.quadro-mexe { will-change: transform; }
.quadro img, .foto-vazia { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.foto-vazia {
  display: grid; place-items: center; color: color-mix(in srgb, var(--breu) 55%, var(--papel)); font: 500 .7rem/1 var(--f-texto); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--papel) 88%, var(--breu)) 0 12px, color-mix(in srgb, var(--papel) 94%, var(--breu)) 12px 24px);
}
.quadro figcaption { padding: .8rem .2rem 1rem; font: italic 400 1.35rem/1 var(--f-titulo); }

/* ---------- 5. RITUAL: máquina com pentes que apara o cabelo em degradê ---------- */
.ritual { position: relative; border-block: 1px solid var(--linha); }
.ritual-palco { position: relative; padding-block: clamp(4rem, 10vw, 7rem); }
.ritual-texto { max-width: var(--largura); margin-inline: auto; padding-inline: 16px; }
.maquina { display: none; }
.ritual-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.8rem; }
.ritual-passos li { display: grid; gap: .7rem; max-width: 34ch; }
.ritual-passos .num { font: 300 clamp(4rem, 12vw, 7rem)/.85 var(--f-titulo); color: transparent; -webkit-text-stroke: 1.2px var(--destaque-claro); }
.ritual-passos .num .digito { display: inline-block; transform-origin: 50% 100%; }
.ritual-passos p { color: var(--osso-suave); }

/* Com animação: a seção fica presa e vira um "palco" */
.ritual.com-maquina .ritual-palco {
  height: 100svh; padding: 5.5rem max(16px, env(safe-area-inset-left, 0px)) 1.5rem;
  display: grid; grid-template-rows: auto 1fr; gap: 1rem; overflow: hidden;
}
.ritual.com-maquina .ritual-texto { padding: 0; width: 100%; max-width: none; margin: 0; }
.ritual.com-maquina .cabeca-secao { margin-bottom: 1rem; }
.ritual.com-maquina .cabeca-secao h2 { font-size: clamp(2.2rem, 8vw, 3.2rem); }
.ritual.com-maquina .ritual-passos { position: relative; display: block; min-height: 9.5rem; }
.ritual.com-maquina .ritual-passos li { position: absolute; inset: 0 auto auto 0; visibility: hidden; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: end; }
.ritual.com-maquina .ritual-passos li.ativo { visibility: visible; }
.ritual.com-maquina .ritual-passos .num { grid-row: span 2; font-size: clamp(3.6rem, 16vw, 5rem); }
.ritual.com-maquina .ritual-passos h3, .ritual.com-maquina .ritual-passos p { grid-column: 2; }
.ritual.com-maquina .ritual-passos .linha-mascara { display: block; overflow: hidden; }
.ritual.com-maquina .maquina { display: block; position: relative; min-height: 0; }
.maquina canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.maquina-hud {
  position: absolute; top: .2rem; left: 0; display: grid; justify-items: start; line-height: 1; z-index: 1;
  font: 500 .7rem/1 var(--f-texto); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase; color: var(--osso-suave);
}
.maquina-hud-num { font: 300 clamp(3.4rem, 9vw, 6rem)/.9 var(--f-titulo); letter-spacing: 0; color: transparent; -webkit-text-stroke: 1.2px var(--destaque-claro); margin: .3rem 0 .7rem; display: inline-block; line-height: 1; }
.maquina-hud-mm { color: var(--destaque-claro); }
@media (min-width: 1024px) {
  .ritual.com-maquina .ritual-palco {
    grid-template-rows: 1fr; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 3rem; align-items: center; padding: 6rem max(32px, calc((100vw - var(--largura)) / 2 + 16px)) 3rem;
  }
  .ritual.com-maquina .cabeca-secao h2 { font-size: clamp(2.8rem, 4.6vw, 4.4rem); }
  .ritual.com-maquina .cabeca-secao { margin-bottom: 3rem; }
  .ritual.com-maquina .ritual-passos { min-height: 13rem; }
  .ritual.com-maquina .ritual-passos li { grid-template-columns: 1fr; }
  .ritual.com-maquina .ritual-passos .num, .ritual.com-maquina .ritual-passos h3, .ritual.com-maquina .ritual-passos p { grid-column: 1; grid-row: auto; }
  .ritual.com-maquina .ritual-passos .num { font-size: clamp(4rem, 8vw, 7rem); }
  .ritual.com-maquina .maquina { height: 100%; }
}

/* ---------- 6. EQUIPE ---------- */
.equipe-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; perspective: 1000px; }
@media (min-width: 900px) { .equipe-grade { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; } }
.barbeiro { display: grid; gap: .5rem; transform-style: preserve-3d; }
.barbeiro-foto {
  position: relative; overflow: hidden; aspect-ratio: 1 / 1; /* as fotos são os posts quadrados do Instagram */ border: 1px solid var(--linha);
  background: radial-gradient(120% 90% at 50% 10%, color-mix(in srgb, var(--carvao) 92%, var(--osso)), var(--carvao));
  display: grid; place-items: center; transform-style: preserve-3d;
}
.barbeiro-foto img { width: 100%; height: 100%; object-fit: cover; }
.barbeiro-inicial { font: italic 300 clamp(5rem, 12vw, 8rem)/1 var(--f-titulo); color: var(--destaque-claro); }
.barbeiro-brilho {
  position: absolute; inset: -40%; pointer-events: none; opacity: 0; mix-blend-mode: soft-light;
  background: radial-gradient(circle at center, rgba(255,255,255,.55), transparent 45%);
}
.barbeiro p { color: var(--osso-suave); font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; }

/* ---------- CLUBE: cartões que abrem ---------- */
.clube-grade { display: grid; gap: 1.2rem; align-items: start; }
@media (min-width: 900px) { .clube-grade { grid-template-columns: repeat(3, 1fr); } }
.clube-cartao { position: relative; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: color-mix(in srgb, var(--papel) 70%, #fff); }
.clube-botao {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1.4rem;
}
.clube-botao:focus-visible { outline: 2px solid var(--destaque-claro); outline-offset: -4px; }
.clube-botao svg { width: 44px; height: 44px; color: var(--destaque-claro); }
.clube-botao h3 { font-size: 2rem; }
.clube-mais { position: relative; width: 22px; height: 22px; }
.clube-mais::before, .clube-mais::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; }
.clube-mais::after { transform: rotate(90deg); transition: transform .5s var(--curva); }
.clube-cartao.aberto .clube-mais::after { transform: rotate(0deg); }
.clube-corpo { overflow: hidden; height: 0; }
.clube-corpo-miolo { padding: 0 1.4rem 1.4rem; display: grid; gap: .8rem; }
.clube-corpo a { font-weight: 600; color: var(--destaque-claro); }
.clube-cartao.aberto { background: var(--breu); color: var(--papel); border-color: var(--breu); }
.clube-cartao.aberto .clube-botao svg, .clube-cartao.aberto .clube-corpo a { color: var(--acento-claro); }
.clube-cartao { transition: background .5s, color .5s; }
.no-js .clube-corpo, html:not(.js) .clube-corpo { height: auto; }

/* ---------- 7. MURAL: letreiro arrastável ---------- */
.mural { overflow-x: clip; }
.mural-trilho { overflow: hidden; cursor: grab; touch-action: pan-y; padding-block: 1rem 2rem; user-select: none; -webkit-user-select: none; }
.mural-trilho.arrastando { cursor: grabbing; }
.mural-faixa { display: flex; gap: 1.2rem; width: max-content; will-change: transform; }
.cartao {
  position: relative; margin: 0; width: min(78vw, 340px); flex: none;
  padding: 2rem 1.5rem 1.4rem; background: var(--papel); color: var(--breu);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.7);
}
.cartao:nth-child(odd) { transform: rotate(-1.2deg); }
.cartao:nth-child(even) { transform: rotate(1deg); }
.cartao::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 24px; transform: translateX(-50%) rotate(-3deg);
  background: color-mix(in srgb, var(--acento-claro) 55%, transparent);
}
.cartao blockquote { margin: 0 0 1.2rem; font: italic 400 1.35rem/1.3 var(--f-titulo); }
.cartao footer { display: flex; justify-content: space-between; gap: 1rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: color-mix(in srgb, var(--breu) 72%, var(--papel)); }

/* ---------- ALÉM DA CADEIRA ---------- */
.comunidade-grade { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .comunidade-grade { grid-template-columns: .9fr 1.1fr; gap: 4rem; } }
.comunidade-lista { display: grid; gap: 2.5rem; }
.comunidade-item { display: grid; gap: 1.2rem; }
.comunidade-foto { overflow: hidden; }
.comunidade-foto img, .comunidade-foto .foto-vazia { aspect-ratio: 16 / 9; transform-origin: 50% 100%; }
.comunidade-item h3 { margin-bottom: .5rem; }
.comunidade-item p { font: 400 clamp(1.35rem, 2.6vw, 1.75rem)/1.35 var(--f-titulo); }
.comunidade-item p .palavra { opacity: .2; }

/* ---------- 3. AGENDAR: quadro de preços de barbearia (feltro preto na moldura de madeira) ----------
   Mesmo visual do antigo cardápio. Só muda a aparência: o fluxo em etapas é o mesmo. */
.agendar { overflow-x: clip; }
.agendar .cabeca-secao { margin-bottom: 4.5rem; } /* espaço para o prego e o fio */
.reserva > * { min-width: 0; }
.reserva {
  /* dentro do quadro tudo é claro sobre o preto, mesmo a seção sendo de papel */
  --osso: #f2ede2; --osso-suave: rgba(242,237,226,.6); --linha: rgba(242,237,226,.22); --carvao: #1d1b19;
  --destaque-claro: var(--acento-claro); color-scheme: dark;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem;
  padding: clamp(1.2rem, 3vw, 2.6rem); border-radius: 6px; color: var(--osso);
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 13px), #141312;
  border: 14px solid #5a3a22;
  border-image: linear-gradient(135deg, #7a5233, #4a2e1a 40%, #6b4429 60%, #3d2414) 1;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.6), inset 0 0 40px rgba(0,0,0,.7), 0 30px 50px -25px rgba(0,0,0,.6);
}
@media (max-width: 560px) { .reserva { border-width: 9px; } }
.reserva::before { /* prego e fio de pendurar */
  content: ""; position: absolute; left: 50%; top: -74px; width: 120px; height: 46px; translate: -50% 0;
  border: 1.5px solid color-mix(in srgb, var(--breu) 55%, var(--papel)); border-bottom: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: .7;
}
.tabela-topo {
  display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0;
  font: 500 .7rem/1 var(--f-texto); font-stretch: 125%; letter-spacing: .3em; text-transform: uppercase; color: rgba(242,237,226,.6);
}
.tabela-topo b { font: 400 clamp(1.6rem, 3vw, 2.3rem)/1 var(--f-titulo); letter-spacing: .02em; text-transform: none; color: #f2ede2; font-style: italic; }
@media (max-width: 420px) { .tabela-topo span { display: none; } }

/* Etapas: letras de giz; a etapa da vez ganha o marcador verde */
.reserva-etapas { position: relative; display: flex; gap: .3rem; padding: .3rem; border: 1px solid var(--linha); border-radius: 999px; width: max-content; max-width: 100%; justify-self: center; }
.reserva-etapas button {
  all: unset; position: relative; z-index: 1; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: 0 1rem; border-radius: 999px; font: 500 .74rem/1 var(--f-texto); font-stretch: 118%; text-transform: uppercase; letter-spacing: .14em;
  color: var(--osso-suave); transition: color .4s;
}
.reserva-etapas button:hover { color: var(--osso); }
.reserva-etapas button span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; font-size: .7rem; }
.reserva-etapas button.ativa { color: var(--sobre-destaque); background: var(--destaque); }
.reserva-etapas.com-marcador button.ativa { background: transparent; }
.reserva-etapas button:focus-visible { outline: 2px solid var(--destaque-claro); }
.reserva-marcador { position: absolute; z-index: 0; top: .3rem; bottom: .3rem; left: 0; width: 0; border-radius: 999px; background: var(--destaque); }
@media (max-width: 560px) {
  .reserva-etapas { width: 100%; }
  .reserva-etapas button { flex: 1; justify-content: center; padding: 0 .3rem; font-size: .62rem; letter-spacing: .06em; }
  .reserva-etapas button span { display: none; }
}
.reserva-paineis { position: relative; perspective: 1400px; }
.reserva-painel { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Serviços: duas colunas de grupos, como a tabela de preços */
#opcoesServico { columns: 2 320px; column-gap: clamp(2rem, 5vw, 4.5rem); }
.grupo-opcoes { break-inside: avoid; margin-bottom: 1.8rem; }
.grupo-opcoes h3 {
  margin: 0 0 .4rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(242,237,226,.25);
  font: 500 .8rem/1 var(--f-texto); font-stretch: 125%; letter-spacing: .28em; text-transform: uppercase; color: var(--acento-claro);
}
.opcoes { display: grid; gap: 0 clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 700px) { .opcoes { grid-template-columns: repeat(2, 1fr); } }
.grupo-opcoes .opcoes { display: block; }

/* Cada linha: marca de giz · NOME ········ PREÇO, e o tempo embaixo */
.opcao {
  position: relative; display: grid; grid-template-columns: auto auto 1fr auto; align-items: baseline; gap: .1rem .6rem;
  padding: .55rem .5rem; margin-inline: -.5rem; border-radius: 3px; cursor: pointer; transition: background .25s;
}
.opcao input {
  appearance: none; -webkit-appearance: none; flex: none; width: 15px; height: 15px; margin: 0; align-self: center;
  border: 1.5px solid rgba(242,237,226,.55); border-radius: 2px; background: transparent no-repeat center / 11px;
  transition: background-color .2s, border-color .2s; cursor: pointer;
}
.opcao input[type="radio"] { border-radius: 50%; }
.opcao-nome { font: 500 .95rem/1.2 var(--f-texto); font-stretch: 112%; text-transform: uppercase; letter-spacing: .08em; transition: color .3s; }
.opcao-pontos { border-bottom: 2px dotted rgba(242,237,226,.35); transform: translateY(-.25em); }
.opcao-preco { font: 500 .95rem/1 var(--f-texto); font-stretch: 112%; font-variant-numeric: tabular-nums; letter-spacing: .06em; transition: color .3s; }
.opcao-info { grid-column: 2 / -1; font-size: .78rem; color: rgba(242,237,226,.55); }
.opcao:not(:has(.opcao-preco)) .opcao-nome { grid-column: 2 / -1; } /* barbeiro e plano B: sem preço */
.opcao:has(input:checked) { background: rgba(159,185,159,.1); }
.opcao:has(input:checked) .opcao-nome, .opcao:has(input:checked) .opcao-preco { color: var(--acento-claro); }
.opcao input:checked {
  border-color: var(--acento-claro); background-color: var(--acento-claro);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.8 9 10 3' fill='none' stroke='%23141312' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.opcao input[type="radio"]:checked { background-image: none; box-shadow: inset 0 0 0 3px #141312; }
.opcao:has(input:focus-visible) { outline: 2px solid var(--acento-claro); outline-offset: 2px; }
@media (hover: hover) {
  .opcao:hover .opcao-nome, .opcao:hover .opcao-preco { color: var(--acento-claro); }
  .opcao:hover input { border-color: var(--acento-claro); }
}
.opcoes > .opcao { border-bottom: 1px solid rgba(242,237,226,.12); border-radius: 0; }

/* Resumo e rodapé do quadro */
.resumo { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1.4rem; margin: 0 0 1.6rem; }
.resumo dt { font: 500 .7rem/1.4 var(--f-texto); font-stretch: 118%; text-transform: uppercase; letter-spacing: .16em; color: var(--osso-suave); padding-top: .3rem; }
.resumo dd { margin: 0; font: 400 1.3rem/1.25 var(--f-titulo); }
.resumo .valor { font: 500 1.4rem/1 var(--f-texto); font-stretch: 112%; letter-spacing: .04em; color: var(--acento-claro); }
.reserva-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(242,237,226,.25); padding-top: 1.2rem; }
.reserva-total { font-size: .92rem; color: var(--osso-suave); }
.reserva-total b { color: var(--osso); font-variant-numeric: tabular-nums; }
.reserva-nav { display: flex; gap: .6rem; margin-left: auto; }
.reserva .botao-linha { border-color: rgba(242,237,226,.4); color: var(--osso); }
.reserva .botao-linha::before { background: var(--osso); }

/* ---------- 8. VISITE ---------- */
.visite-grade { display: grid; gap: 3rem; }
@media (min-width: 900px) { .visite-grade { grid-template-columns: 1.1fr .9fr; gap: 4rem; } }
.visite-local { display: grid; gap: 1.2rem; justify-items: start; }
.status { display: inline-flex; align-items: center; gap: .6rem; font-size: .92rem; }
.status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #c98a6b; }
.status.aberto::before { background: #6fbf7e; animation: pulsa 1.8s infinite; }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(111,191,126,.6); } 100% { box-shadow: 0 0 0 10px rgba(111,191,126,0); } }
.contatos { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; margin: 0; }
.contatos dt { color: var(--osso-suave); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; padding-top: .15rem; }
.contatos dd { margin: 0; }
.contatos a { text-decoration: none; }
.etiquetas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.etiquetas li { border: 1px solid var(--linha); border-radius: 999px; padding: .35rem .9rem; font-size: .82rem; }
.visite-horas h3 { margin-bottom: 1rem; }
.visite-horas h3 + .etiquetas { margin-bottom: 0; }
.horas { list-style: none; margin: 0 0 2.4rem; padding: 0; }
.horas li { position: relative; display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; font-variant-numeric: tabular-nums; }
.horas li span:last-child { text-align: right; color: var(--osso-suave); }
.horas .regua { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linha); transform-origin: left; }
.horas li.hoje span { color: var(--osso); font-weight: 600; }
.horas li.hoje span:first-child::after { content: " · hoje"; color: var(--destaque-claro); font-weight: 500; }

/* ---------- 9. FAQ ---------- */
.faq-interno { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.3rem 0; font: 400 clamp(1.4rem, 3vw, 1.9rem)/1.2 var(--f-titulo);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 2rem/1 var(--f-texto); transition: transform .5s var(--curva); }
.faq details[open] summary::after, .faq details.abrindo summary::after { transform: rotate(45deg); }
.faq .resposta { overflow: hidden; }
.faq .resposta p { padding-bottom: 1.4rem; color: var(--osso-suave); max-width: 60ch; }

/* ---------- CONVITE ---------- */
.convite { background: var(--destaque); color: var(--sobre-destaque); padding-block: clamp(5rem, 11vw, 9rem); overflow: hidden; }
.convite-interno { display: grid; gap: 2.4rem; justify-items: start; }
.convite-texto { color: var(--sobre-destaque); font: 300 clamp(3.6rem, 11vw, 9rem)/.95 var(--f-titulo); }
.convite-texto .palavra { display: inline-block; transform-origin: 50% 100%; }
.convite .botao-linha { color: var(--sobre-destaque); border-color: color-mix(in srgb, var(--sobre-destaque) 50%, transparent); }
.convite .botao-linha::before { background: var(--sobre-destaque); }
@media (hover: hover) { .convite .botao-linha:hover > span { color: var(--destaque); } }
.convite .botao-claro:hover > span { color: var(--papel); }

/* ---------- RODAPÉ ---------- */
.rodape { padding-block: 4rem 6rem; overflow: hidden; }
.rodape-interno { display: grid; gap: 2rem; align-items: center; transform-origin: 50% 100%; }
@media (min-width: 700px) { .rodape-interno { grid-template-columns: auto 1fr; gap: 3rem; } }
.rodape-logo { width: 160px; }
.rodape p { color: var(--osso-suave); font-size: .9rem; }
.rodape a { text-decoration: none; }
.credito { margin-top: 1rem; }
/* Assinatura igual à dos outros sites da m.aquino (Casa dos Bichos e RJ).
   No fundo escuro o nome fica claro e o ponto num verde mais aceso. */
.maq { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--osso-suave); min-height: 44px; border-radius: 6px; }
.maq-mark { display: inline-flex; align-items: center; gap: 6px; }
.maq-seal { width: 22px; height: 22px; border-radius: 6px; background: #1C543B; color: #F4F2EE; display: inline-grid; place-items: center; font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: -.02em; }
.maq-name { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 15px; color: var(--osso); letter-spacing: -.02em; }
.maq-name i { font-style: normal; color: #3E9A6E; }
.maq:hover .maq-name { text-decoration: underline; text-decoration-color: #3E9A6E; text-underline-offset: 3px; }

/* ---------- Botão fixo no celular ---------- */
.cta-fixo {
  position: fixed; z-index: 60; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  transform: translate(-50%, 160%); opacity: 0; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.6rem; border-radius: 999px;
  background: var(--destaque); color: var(--sobre-destaque); text-decoration: none;
  font: 500 .78rem/1 var(--f-texto); font-stretch: 112%; text-transform: uppercase; letter-spacing: .14em;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.6);
}
@media (min-width: 900px) { .cta-fixo { display: none; } }

/* Antes do JS: esconde só o que vai entrar animado (evita "piscar") */
.js [data-monta], .js .hero [data-entra], .js .hero-sub { visibility: hidden; }

/* Menos movimento: tudo aparece parado e legível */
@media (prefers-reduced-motion: reduce) {
  .js [data-monta], .js .hero [data-entra], .js .hero-sub { visibility: visible; }
  .botao::before, .clube-mais::after, .faq summary::after { transition: none; }
  .status.aberto::before { animation: none; }
  .mural-trilho { overflow-x: auto; cursor: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-fixo { transform: translate(-50%, 0); opacity: 1; }
}

/* Máquina em 3D: o canvas WebGL ocupa a área e o 2D sai de cena */
.maquina-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ritual.em-3d #maquina { display: none; }
.maquina-3d { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }

.maquina-credito { position: absolute; right: 0; bottom: .4rem; margin: 0; font-size: .68rem; letter-spacing: .02em; color: var(--osso-suave); opacity: .75; z-index: 2; }
.maquina-credito a { color: inherit; text-underline-offset: 2px; }

/* ---------- Como funciona em 3D: cena à esquerda, linha do tempo à direita ---------- */
.ritual.em-3d .maquina-hud { display: none; }
.ritual.em-3d .ritual-passos { position: relative; display: block; min-height: 0; margin: 1.2rem 0 0; border-left: 1px solid var(--linha); }
.ritual.em-3d .ritual-passos li { position: relative; visibility: visible; display: block; max-width: 40ch; padding: 0 0 1.5rem 1.6rem; color: var(--osso-suave); transition: color .4s; }
.ritual.em-3d .ritual-passos li:last-child { padding-bottom: 0; }
.ritual.em-3d .ritual-passos li::before {
  content: ""; position: absolute; left: -6px; top: .45rem; width: 11px; height: 11px; border-radius: 50%;
  background: var(--linha); transition: background .4s, box-shadow .4s;
}
.ritual.em-3d .ritual-passos .num { display: none; }
.ritual.em-3d .ritual-passos h3 { margin: 0; font: 400 clamp(1.3rem, 2.2vw, 1.75rem)/1.15 var(--f-titulo); color: inherit; }
.ritual.em-3d .ritual-passos p { margin: .35rem 0 0; font-size: .9rem; line-height: 1.5; color: inherit; }
.ritual.em-3d .ritual-passos li.ok::before { background: color-mix(in srgb, var(--acento-claro) 55%, transparent); }
.ritual.em-3d .ritual-passos li.ok h3::after { content: " ✓"; font-size: .7em; color: var(--acento-claro); }
.ritual.em-3d .ritual-passos li.on { color: var(--osso); }
.ritual.em-3d .ritual-passos li.on::before { background: var(--acento-claro); box-shadow: 0 0 0 5px color-mix(in srgb, var(--acento-claro) 22%, transparent); }
@media (max-width: 1023px) {
  /* no celular: só os nomes das etapas, em linha */
  .ritual.em-3d .ritual-passos { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: .2rem 1.1rem; border-left: 0; }
  .ritual.em-3d .ritual-passos li { padding: 0 0 0 1rem; }
  .ritual.em-3d .ritual-passos li::before { left: 0; width: 7px; height: 7px; top: .55rem; }
  .ritual.em-3d .ritual-passos h3 { font-size: 1.05rem; }
  .ritual.em-3d .ritual-passos li.ok h3::after { content: ""; }
  .ritual.em-3d .ritual-passos p { display: none; }
}
@media (min-width: 1024px) {
  .ritual.em-3d .ritual-palco { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .ritual.em-3d .maquina { order: -1; }
  .ritual.em-3d .cabeca-secao { margin-bottom: 1.5rem; }
}

/* As máscaras do SplitText (palavras e linhas) cortavam as letras que descem, como g, p, ç.
   Um respiro embaixo, compensado com margem negativa, mantém o espaçamento e mostra a letra inteira. */
[data-titulo] > *, [data-linhas] > * { padding-bottom: .16em; margin-bottom: -.16em; }

/* ---------- Reserva: dia, horário e plano B ---------- */
.horario-titulo { margin: 0 0 .7rem; font: 500 .72rem/1 var(--f-texto); font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; color: var(--osso-suave); }
.horario-titulo small { font-size: inherit; letter-spacing: .06em; text-transform: none; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.chips-hora { display: grid; gap: .9rem; }
.chips-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.chips-grupo > span { width: 4.2rem; font-size: .78rem; color: var(--osso-suave); }
.chips-vazio { margin: 0; font-size: .85rem; color: var(--osso-suave); }
.chip {
  position: relative; display: grid; justify-items: center; gap: .15rem; min-width: 4.4rem; min-height: 44px; padding: .5rem .7rem;
  border: 1px solid var(--linha); border-radius: 10px; cursor: pointer; transition: border-color .25s, background .25s, transform .2s;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip b { font: 500 .9rem/1 var(--f-texto); font-variant-numeric: tabular-nums; }
.chip small { font-size: .72rem; color: var(--osso-suave); }
.chip-hora { min-width: 4.2rem; place-items: center; }
.chip:hover { border-color: var(--destaque); }
.chip:has(input:checked) { border-color: var(--destaque); background: var(--destaque); color: var(--sobre-destaque); transform: translateY(-2px); }
.chip:has(input:checked) small { color: inherit; opacity: .8; }
.chip:has(input:focus-visible) { outline: 2px solid var(--destaque-claro); outline-offset: 2px; }
.plano-b { margin-top: .4rem; padding: 1.1rem 1.2rem; border: 1px dashed var(--destaque); border-radius: 12px; background: color-mix(in srgb, var(--destaque) 6%, transparent); }
.plano-b-aviso { margin: 0 0 1rem; font-size: .9rem; line-height: 1.55; }
.plano-b-aviso span { display: block; margin-top: .5rem; font-weight: 600; }

/* Botão de contorno dentro do quadro: no hover o fundo fica claro, então o texto escurece */
@media (hover: hover) { .reserva .botao-linha:hover > span, .reserva .botao-linha:focus-visible > span { color: var(--breu); } }
/* Plano B dentro do quadro: tracejado verde-claro */
.reserva .plano-b { border-color: rgba(159,185,159,.55); background: rgba(159,185,159,.06); }
.reserva .chip:hover { border-color: var(--acento-claro); }
@media (max-width: 560px) {
  .reserva { padding-inline: .9rem; }
  .reserva-etapas { gap: 0; padding: .25rem; }
  .reserva-etapas button { min-width: 0; padding: 0 .15rem; font-size: .58rem; letter-spacing: .03em; }
  .resumo { grid-template-columns: 1fr; gap: .15rem; }
  .resumo dd + dt { margin-top: .8rem; }
}