/* Fialho Barbearia · template 05 Barbearia noir (ref. Rains invertida), em página única */
:root { --pad: 24px; --g: 8px; --max: 1440px; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-size: 15px; line-height: 1.45; letter-spacing: -.005em; background: var(--bg); }
.d { font-family: var(--f-titulo); font-weight: 700; letter-spacing: -.045em; line-height: .92; font-stretch: 100%; }
.cond { font-family: var(--f-titulo); font-weight: 800; font-stretch: 62%; letter-spacing: -.01em; line-height: .8; text-transform: uppercase; }
.sec { background: var(--bg); }
.caixa { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* letras que sobem dentro de máscara; .solto tira a máscara depois que entram (não corta acento) */
.lt { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; margin-bottom: -.04em; }
.lt > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.vai .lt > span { transform: none; }
.solto .lt { overflow: visible; }

/* pílulas */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--pill); color: var(--fg); font-size: 13px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: background-color .25s, color .25s, transform .16s var(--ease); }
.pill.cheia { background: var(--pill-solid); color: var(--bg); }
.pill.ambar { background: var(--acc); color: var(--acc-fg); }
.pill.contorno { background: none; border: 1px solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pill.grande { min-height: 52px; padding: 0 26px; font-size: 15px; }
.pill:active { transform: scale(.97); }
.pill svg { width: 15px; height: 15px; flex: none; }
.ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); flex: none; }
.ponto.pulsa { animation: pulsa 2.2s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: .25; } }
@media (hover: hover) and (pointer: fine) {
  .pill:hover { background: rgba(238,235,229,.28); }
  .pill.cheia:hover { background: #fff; }
  .pill.ambar:hover { background: #d8a752; }
  .pill.contorno:hover { background: var(--fg); color: var(--bg); }
  .sub-link:hover { color: var(--acc); }
}
.sub-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-size: 13px; font-weight: 500; transition: color .2s; }
.estrela { width: 13px; height: 13px; fill: currentColor; }

/* ========== NAV fixo ========== */
.nav { position: fixed; top: 20px; left: 0; right: 0; z-index: 50; padding: 0 var(--pad); pointer-events: none; transition: top .5s var(--ease); }
.nav-in { pointer-events: auto; max-width: calc(var(--max) - 2 * var(--pad)); margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 0; border-radius: 999px; border: 1px solid transparent; transition: max-width .6s var(--ease), padding .6s var(--ease), background-color .4s, border-color .4s; }
.nav .logo { gap: 10px; padding: 0 16px 0 4px; }
.nav .logo img { width: 32px; height: 32px; border-radius: 50%; }
.nav .logo span { font-size: 22px; padding-top: 2px; }
.nav .menu { display: flex; align-items: center; gap: 30px; padding: 0 24px; text-transform: uppercase; font-size: 12.5px; }
.nav .menu a { transition: color .2s; }
.nav .dir { margin-left: auto; display: flex; gap: 8px; }
.nav .menu-bt { display: none; }
.nav.mini { top: 10px; }
.nav.mini .nav-in { max-width: 1120px; padding: 5px; background: rgba(16,14,15,.66); border-color: var(--line); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.nav.mini .pill:not(.cheia) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (hover: hover) and (pointer: fine) { .nav .menu a:hover { color: var(--acc); } .nav.mini .pill:not(.cheia):hover { background: var(--pill); } }
.menu-painel { display: none; }

/* ========== s01 hero ========== */
.hero { height: 100vh; height: 100svh; min-height: 720px; color: var(--fg); }
.hero .fotos { position: absolute; inset: 0; }
.hero .fotos div { position: absolute; inset: 0; background: center 40% / cover no-repeat; opacity: 0; transform: scale(1.08); transition: opacity 1.6s ease, transform 7.5s linear; filter: saturate(.85) contrast(1.05); }
.hero .fotos div.on { opacity: 1; transform: scale(1); }
.hero .veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,14,15,.6) 0%, rgba(16,14,15,0) 18%, rgba(16,14,15,.05) 42%, rgba(16,14,15,.6) 72%, rgba(16,14,15,.88) 100%); }
.hero .conteudo { position: absolute; inset: 0; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) 40px; display: flex; flex-direction: column; justify-content: flex-end; z-index: 2; }
.hero .titulo { color: var(--titulo); white-space: nowrap; line-height: .8; letter-spacing: -.055em; margin-bottom: 40px; }
.hero .baixo { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.hero .sub { font-size: 50px; color: var(--titulo); letter-spacing: -.045em; margin-bottom: 26px; }
.hero .bts { display: flex; gap: 10px; flex-wrap: wrap; }
.hero .meta { text-align: right; font-size: 13px; color: rgba(238,235,229,.74); line-height: 1.7; flex: none; }
.hero .meta b { color: var(--fg); font-weight: 600; }
.hero .meta .estrela { display: inline; vertical-align: -1px; margin-right: 5px; color: var(--acc); }
.hero .contador { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 14px; }
.hero .contador i { width: 28px; height: 2px; background: rgba(238,235,229,.25); position: relative; overflow: hidden; }
.hero .contador i::after { content: ''; position: absolute; inset: 0; background: var(--acc); transform: scaleX(0); transform-origin: left; }
.hero .contador i.on::after { transform: scaleX(1); transition: transform 5s linear; }

/* ========== s02 intro ========== */
.intro { padding-top: 120px; }
.intro .topo { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: end; }
.intro h2 { font-size: 112px; }
.intro .lado { padding-bottom: 8px; }
.intro .lado p { font-size: 15px; color: rgba(238,235,229,.8); }
.intro .rot { font-size: 12px; text-transform: uppercase; color: var(--muted); letter-spacing: .02em; margin-bottom: 14px; display: flex; gap: 8px; align-items: center; font-weight: 600; }
.intro .chips { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 8px; }
.intro .chips li { min-height: 34px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line); display: flex; align-items: center; font-size: 13px; color: rgba(238,235,229,.72); white-space: nowrap; transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s; }
.intro .chips li.on { background: var(--acc); color: var(--acc-fg); border-color: var(--acc); }
.intro .fotos { margin-top: 56px; height: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.intro .fotos figure { margin: 0; position: relative; overflow: hidden; }
.intro .fotos .img { position: absolute; inset: -30px 0; background: center / cover no-repeat; animation: pan 14s ease-in-out infinite alternate; filter: saturate(.9); }
.intro .fotos figure:nth-child(2) .img { animation-delay: -7s; background-position: center 35%; }
@keyframes pan { from { transform: translateY(-18px) scale(1.04); } to { transform: translateY(18px) scale(1.04); } }
.intro .fotos .pill { position: absolute; left: 16px; bottom: 16px; min-height: 34px; font-size: 12.5px; }

/* ========== s03 serviços (faixa rolando) ========== */
.servicos { padding: 120px 0; }
.servicos .topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.servicos h2 { font-size: 56px; }
.servicos .topo p { font-size: 15px; color: var(--muted); margin-top: 14px; max-width: 520px; }
.servicos .topo .dir { display: flex; gap: 8px; align-items: center; flex: none; }
.servicos .faixa { margin-top: 56px; }
.servicos .trilho { display: flex; gap: var(--g); will-change: transform; }
.servicos .card { width: 336px; flex: none; }
.servicos .card .ft { height: 500px; overflow: hidden; position: relative; background: var(--card); }
.servicos .card .ft img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform .8s var(--ease); }
.servicos .card:nth-child(4n+3) .ft img { object-position: 62% center; }
.servicos .card .ft .tag { position: absolute; left: 12px; top: 12px; min-height: 28px; font-size: 12px; padding: 0 12px; }
.servicos .card .linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; }
.servicos .card h3 { font-size: 21px; font-family: var(--f-titulo); font-weight: 700; letter-spacing: -.03em; }
.servicos .card .preco { font-size: 14px; font-weight: 600; color: var(--acc); }
.servicos .card p { font-size: 13.5px; color: var(--muted); margin-top: 6px; line-height: 1.45; min-height: 40px; }
.servicos .card .sub-link { display: inline-block; margin-top: 10px; }
@media (hover: hover) and (pointer: fine) { .servicos .card:hover .ft img { transform: scale(1.04); } }

/* ========== s04 como marcar + temas (grid 3x2) ========== */
.ritual { padding: var(--g); display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(440px, auto); gap: var(--g); max-width: var(--max); margin: 0 auto; }
.ritual > * { position: relative; overflow: hidden; }
.ritual .ph { position: absolute; inset: 0; background: center / cover no-repeat; filter: saturate(.85); animation: respira 16s ease-in-out infinite alternate; }
.ritual .ph-w:nth-child(3) .ph { animation-delay: -4s; } .ritual .ph-w:nth-child(4) .ph { animation-delay: -8s; } .ritual .ph-w:nth-child(5) .ph { animation-delay: -12s; }
.ritual .ph-w:nth-child(2) .ph { background-position: center 20%; }
@keyframes respira { from { transform: scale(1); } to { transform: scale(1.07); } }
.ritual .painel { background: var(--pill-solid); color: var(--bg); padding: 56px 52px; }
.painel .sobre { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.painel h3 { font-size: 38px; margin-top: 10px; }
.painel .txt { font-size: 14.5px; margin-top: 14px; color: #3c3a36; max-width: 330px; font-weight: 500; }
.painel .passos { margin-top: 30px; counter-reset: p; padding: 0; list-style: none; }
.painel .passos li { font-size: 18px; font-weight: 600; letter-spacing: -.02em; padding: 9px 0; display: flex; gap: 14px; align-items: baseline; color: rgba(16,14,15,.35); transition: color .6s var(--ease); }
.painel .passos li::before { counter-increment: p; content: '0' counter(p); font-size: 11.5px; font-weight: 600; color: rgba(16,14,15,.35); transition: color .6s; }
.painel .passos li.on { color: var(--bg); }
.painel .passos li.on::before { color: #9a6e24; }
.painel.escala { padding: 52px; display: flex; flex-direction: column; justify-content: center; }
.painel.escala h3 { font-size: 30px; margin: 0 0 22px; line-height: 1; }
.painel .niveis li { padding: 6px 0; transition: opacity .6s var(--ease); opacity: .38; }
.painel .niveis li.on { opacity: 1; }
.painel .niveis b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.painel .niveis span { display: block; font-size: 13px; color: #3c3a36; font-weight: 500; }
.painel .barra { margin-top: 22px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--bg); height: 22px; position: relative; }
.painel .barra i { font-style: normal; font-size: 10px; font-weight: 700; display: grid; place-items: center; color: #fff; border-right: 1px solid rgba(255,255,255,.25); }
.painel .barra i:nth-child(1) { background: #e0bb78; color: var(--bg); } .painel .barra i:nth-child(2) { background: #c9963f; } .painel .barra i:nth-child(3) { background: #8c6526; } .painel .barra i:nth-child(4) { background: #3e2c12; }
.painel .barra .marca { position: absolute; top: -9px; width: 25%; height: 38px; border: 2px solid var(--bg); transition: transform .7s var(--ease); pointer-events: none; }
.painel .fonte { margin-top: 14px; font-size: 11.5px; color: #6b6862; font-weight: 500; }

/* ========== s07 avaliações ========== */
.aval { padding: 120px 0; }
.aval .topo { display: grid; grid-template-columns: auto 1fr auto; gap: 36px; align-items: end; }
.aval .nota { font-size: 200px; color: var(--fg); }
.aval .info { padding-bottom: 18px; }
.aval .estrelas { display: flex; gap: 4px; color: var(--acc); margin-bottom: 10px; }
.aval .estrelas svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.aval .info b { font-family: var(--f-titulo); font-size: 30px; font-weight: 700; letter-spacing: -.035em; display: block; line-height: 1.05; }
.aval .info > span { font-size: 14px; color: var(--muted); }
.aval .topo .pill { margin-bottom: 18px; }
.aval .cards { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); }
.dep .ft { height: 360px; position: relative; overflow: hidden; background: var(--card); }
.dep .ft img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) brightness(.55); transition: filter .9s var(--ease), transform 1.2s var(--ease); }
.dep .ft h3 { position: absolute; left: 22px; right: 22px; top: 50%; transform: translateY(-50%); font-family: var(--f-titulo); font-size: 30px; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: #fff; }
.dep.on .ft img { filter: saturate(.85) brightness(.75); transform: scale(1.03); }
.dep b { display: block; margin-top: 16px; font-size: 15px; font-weight: 600; line-height: 1.45; }
.dep small { display: block; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.dep .barra { height: 2px; background: var(--line); margin-top: 14px; position: relative; overflow: hidden; }
.dep .barra::after { content: ''; position: absolute; inset: 0; background: var(--acc); transform: scaleX(0); transform-origin: left; }
.dep.on .barra::after { transform: scaleX(1); transition: transform 3.4s linear; }

/* ========== s08 endereço ========== */
.ender { min-height: 100vh; min-height: 100svh; display: flex; }
.ender .img { position: absolute; inset: 0; background: center / cover no-repeat; filter: saturate(.8) brightness(.7); animation: deriva 22s ease-in-out infinite alternate; }
@keyframes deriva { from { transform: scale(1.08) translateX(-1.5%); } to { transform: scale(1.08) translateX(1.5%); } }
.ender .veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,14,15,.4), rgba(16,14,15,0) 30%, rgba(16,14,15,.35) 60%, rgba(16,14,15,.85)); }
.ender .caixa { position: relative; z-index: 2; width: 100%; padding-top: 120px; padding-bottom: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; }
.ender .titulo { color: var(--titulo); white-space: nowrap; line-height: .8; letter-spacing: -.055em; }
.ender .linha { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.ender .esq .sub { font-size: 44px; color: var(--titulo); letter-spacing: -.045em; margin-bottom: 24px; max-width: 760px; line-height: .98; }
.ender .esq .bts { display: flex; gap: 10px; flex-wrap: wrap; }
.ender .card { width: 400px; flex: none; background: var(--pill-solid); color: var(--bg); padding: 26px 28px; }
.ender .card .chip { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--bg); color: var(--fg); }
.ender .card h4 { font-family: var(--f-titulo); font-size: 22px; font-weight: 700; letter-spacing: -.03em; margin: 16px 0 0; line-height: 1.1; }
.ender .card .end { font-size: 14px; color: #3c3a36; margin-top: 4px; font-weight: 500; }
.ender .card ul { margin-top: 16px; border-top: 1px solid rgba(16,14,15,.15); }
.ender .card li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(16,14,15,.15); font-size: 14px; font-weight: 500; }
.ender .card li.fech { color: #6b6862; }
.ender .card li a { text-decoration: underline; text-underline-offset: 3px; }
.ender .card .extras { margin-top: 14px; font-size: 12.5px; color: #4a4843; display: flex; flex-wrap: wrap; gap: 4px 14px; border: 0; }
.ender .card .extras li { border: 0; padding: 0; font-size: 12.5px; }

/* ========== s09 rodapé ========== */
.rodape { background: var(--pill-solid); color: var(--bg); padding-top: 120px; }
.rodape .topo { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 24px; }
.rodape .prom .selo { width: 88px; height: 88px; border-radius: 50%; margin-bottom: 28px; }
.rodape .prom li { font-family: var(--f-titulo); font-size: 36px; text-wrap: balance; margin-bottom: 6px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.rodape .prom .pill { margin-top: 34px; }
.rodape .pill.cheia { background: var(--bg); color: var(--fg); }
.rodape h5 { font-size: 13px; font-weight: 600; margin: 4px 0 14px; }
.rodape .col li, .rodape .col a { display: block; font-size: 13.5px; line-height: 1.95; color: #3c3a36; font-weight: 500; }
.rodape .legal { margin-top: 96px; padding-top: 14px; border-top: 1px solid rgba(16,14,15,.18); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 12px; color: #6b6862; }
.rodape .wm { margin-top: 40px; margin-bottom: -.13em; white-space: nowrap; color: var(--bg); line-height: .78; text-align: center; }
@media (hover: hover) and (pointer: fine) { .rodape .col a:hover { color: var(--bg); text-decoration: underline; } .rodape .pill.cheia:hover { background: #2a2624; } }

/* WhatsApp flutuante (só celular, depois do hero) */
.zap-flut { display: none; }
.rodape .col a span { white-space: nowrap; }