/* Paleta RNC: preto, branco, vermelho, amarelo (laranja só de apoio) */
:root {
--peri: #f2f0eb;
--lime: #f3e55a;
--pink: #e2231a;
--maroon: #0d0d0d;
--maroon-2: #1c1c1c;
--orange: #e2231a;
--org: #ff5b1f;
--white: #fbfaf7;
--ink: #0d0d0d;
--red: #e2231a;
--f-display: "Antonio", "Anton", "Arial Narrow", Impact, sans-serif;
--f-serif: "Antonio", "Anton", "Arial Narrow", Impact, sans-serif;
--f-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
.heavy, .tall { font-weight: 700; }
.tall { letter-spacing: -.005em; text-transform: uppercase; }
.caps { font-weight: 800; font-stretch: 125%; letter-spacing: .02em; }
.brand span, .top nav, .foot nav, .pill { font-weight: 800; font-stretch: 125%; letter-spacing: .02em; }

/* sombras sem tom bordô */
.band { box-shadow: 0 -22px 40px -18px rgb(0 0 0 / .45); }
html .band:not(.hero) { box-shadow: 0 -14px 30px -18px rgb(0 0 0 / .4); }
.band::after { background: #000; }

/* hero */
.hero h1 { color: var(--ink); }
.hero .by { color: var(--ink); }
.hero .wrap::before { content: ""; position: absolute; z-index: 0; right: -18%; top: 4%; width: 92%; height: 96%; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 700' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='r' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' seed='3' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='26' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04' numOctaves='2' seed='5' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='60' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' seed='9' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 1.9' result='m'/%3E%3CfeComposite in='d' in2='m' operator='in'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke='%23e2231a' stroke-linecap='round'%3E%3Cpath filter='url(%23s)' stroke-width='150' opacity='.85' d='M640 40C470 10 330 120 360 250S560 400 520 530 330 690 160 650'/%3E%3Cpath filter='url(%23r)' stroke-width='86' d='M640 40C470 10 330 120 360 250S560 400 520 530 330 690 160 650'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; animation: brushIn 1.4s var(--ease) .2s both; }
@keyframes brushIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.hero__text, .hero__row { position: relative; z-index: 2; }
/* rabisco por baixo da palavra (métricas da Antonio) */
html .hero h1 .ln { padding-bottom: .1em; margin-bottom: -.1em; }
html .heavy .ln.mk, html .tall .mk { padding-bottom: .1em; margin-bottom: -.1em; }
html .heavy .ln.mk.sq, html .sq { padding-bottom: .26em; margin-bottom: 0; }
html .sq > svg { bottom: 0; height: .3em; }
html .tall .ln.mk.sq, html .tall .sq { padding-bottom: .3em; margin-bottom: 0; }
html .hero h1 .hsq { top: 1.97em; bottom: auto; left: -1%; right: 6%; height: .24em; }
html .hero h1 .hsq svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
html .hero .by { margin-top: .5em; }
.hero__photo { z-index: 1; }
.stars { color: var(--red); }

/* bandas */
.state h2 { color: var(--lime); }
.vid { --bg: var(--ink); --fg: var(--white); }
.vid .scrib path { stroke: var(--lime); }
.play { background: var(--red); color: var(--white); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(226 35 26 / .6); } 100% { box-shadow: 0 0 0 22px rgb(226 35 26 / 0); } }
.work .scrib path, .team .scrib path { stroke: var(--lime); }
.ws { --bg: var(--ink); --fg: var(--white); }
.ws h2 { color: var(--lime); }
.ws .scrib path { stroke: var(--red); }
.ws .tall { color: var(--white); }
.ws .lead { color: rgb(251 250 247 / .8); }
.wscard { background: var(--white); color: var(--ink); box-shadow: none; border-radius: 0; }
.wsph, .wsph img { border-radius: 0; }
.wsph { background: #eceae5; }
.wsph img { mix-blend-mode: multiply; object-position: 50% 30%; }
.wsbody .offers { display: grid; gap: .6rem; margin: 1rem 0 1.3rem; }
.wsbody .off { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2rem 1rem; padding: .8rem .9rem; border: 2px solid var(--ink); }
.wsbody .off strong { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; line-height: 1; text-transform: uppercase; }
.wsbody .off small { grid-column: 1; font-size: .74rem; line-height: 1.35; opacity: .75; }
.wsbody .off b { grid-row: 1 / span 2; grid-column: 2; font-family: var(--f-display); font-size: 1.7rem; line-height: 1; color: var(--red); }
.wsbody .off.main { background: var(--ink); color: var(--white); }
.wsbody .off.main b { color: var(--lime); }
.pill { border-radius: 0; background: var(--red); color: var(--white); }
.pill:hover { background: var(--ink); }
.wscard li svg { color: var(--red); }
.pgrid.one { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
.pcard { border-radius: 0; }
.pcard img { border-radius: 0; }
.team { --bg: var(--red); --fg: var(--white); }
.team h2 { color: var(--ink); }
.team__head p { color: rgb(251 250 247 / .9); }
.member { background: rgb(0 0 0 / .16); border-radius: 0; }
.member:hover { background: rgb(0 0 0 / .3); }
.member .ph { background: var(--peri); border-radius: 0; }
.member .caps { color: rgb(251 250 247 / .85); }
.trust div + div { border-color: rgb(251 250 247 / .3); }
.foot { border-top-color: rgb(0 0 0 / .2); }
.feat { border-bottom-color: rgb(0 0 0 / .18); }

/* botões */
.sticker { color: var(--white); }
.book { color: var(--white); box-shadow: 0 12px 26px -10px rgb(0 0 0 / .55); }
.wa { box-shadow: 0 12px 26px -10px rgb(0 0 0 / .55); }
.fab { box-shadow: 0 16px 34px -12px rgb(0 0 0 / .55); }
.rays::before { background: repeating-conic-gradient(from 0deg, var(--ink) 0deg 2deg, transparent 2deg 30deg); }

/* marcação */
.bkt button[aria-pressed="true"] { color: var(--white); }
.bkgo:not(:disabled):hover { color: var(--white); }
.bp .bksum { box-shadow: 0 -16px 30px -20px rgb(0 0 0 / .4); }
.bkw, .bkc__fr { box-shadow: 0 30px 60px -34px rgb(0 0 0 / .5); }
.bp__side .tall { color: var(--ink); }
.bp__side::before { content: ""; position: absolute; inset: 10% -30% -10% 20%; background: radial-gradient(closest-side, rgb(226 35 26 / .9), rgb(226 35 26 / 0)); filter: blur(10px); }
.vframe { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .7); }
.shotc::after { background: linear-gradient(transparent 55%, rgb(0 0 0 / .7)); }

@media (min-width: 900px) {
.hero .wrap::before { right: -6%; width: 58%; top: -2%; height: 104%; }
.pgrid.one { max-width: none; grid-template-columns: minmax(0, 1fr); }
.pgrid.one .pcard { grid-template-columns: 34% 1fr; }
.wsbody .off strong { font-size: 1.5vw; }
.wsbody .off b { font-size: 2vw; }
.wsbody .off small { font-size: .78vw; }
.wsbody .offers { margin: 1vw 0 1.4vw; }
.wscard { height: auto; min-height: 25vw; }
}
/* revisão de espaçamentos e responsivo */
.shotc img { filter: grayscale(1) contrast(1.06); transition: filter .6s var(--ease), transform 1s var(--ease); }
.shotc:hover img { filter: none; }
.work .scrib path { stroke: var(--red); }
.member .ph, .bkb img { background: #e4e1da; }
.fab { transition: opacity .3s, scale .3s; }
.fab.is-hidden { opacity: 0; scale: .6; pointer-events: none; }
@media (min-width: 600px) and (max-width: 899px) {
html .band:not(.hero) > .wrap { max-width: 620px; margin-inline: auto; }
html .hero__photo img { height: min(52svh, 540px); }
.wscard { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 1.2rem; align-items: center; }
.wsph { aspect-ratio: 4 / 5; margin: 0; }
.members { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.member { grid-template-columns: 1fr; gap: .6rem; }
.member .ph { aspect-ratio: 4 / 4.4; }
.member h3 { font-size: 1.2rem; }
.pgrid.one { max-width: none; }
}
@media (min-width: 900px) {
html .band:not(.hero):not(.final) { min-height: 0; padding-block: clamp(4.5rem, 7vw, 8.5rem); }
.work { --bg: var(--lime); }
.hero__text { padding-bottom: 2vw; }
.final .sticker.rays { margin-right: calc(7rem + 3vw); }
.work .caps, .par .caps, .vid .caps { font-size: max(.82vw, .72rem); }
.pcard .caps { font-size: max(.78vw, .7rem); }
.ws .lead { font-size: max(1.05vw, .92rem); }
.hero__row p { font-size: max(1.15vw, .9rem); }
.member h3 { font-size: max(1.3vw, 1.05rem); }
.member .caps { font-size: max(.7vw, .62rem); }
.wsbody .off strong { font-size: max(1.5vw, 1.1rem); }
.wsbody .off b { font-size: max(2vw, 1.4rem); }
.wsbody .off small { font-size: max(.78vw, .68rem); }
}
@media (prefers-reduced-motion: reduce) { .hero .wrap::before { animation: none; } }
/* footer mobile */
@media (max-width: 899px) {
html .final { padding-bottom: calc(6.2rem + env(safe-area-inset-bottom, 0px)) !important; }
.final .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.final .row p { font-size: .95rem; }
.final .row a.map { white-space: nowrap; }
.final .sticker.rays { --s: 6.4rem !important; margin-right: .6rem; }
.final .foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 2.2rem; padding-top: 1.3rem; border-top: 2px solid var(--ink); }
.final .foot .brand { margin-bottom: 1rem; }
.final .foot nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; font-size: .7rem; border-top: 1px solid rgb(0 0 0 / .18); }
.final .foot nav a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .95rem 0; border-bottom: 1px solid rgb(0 0 0 / .18); white-space: nowrap; }
.final .foot nav a:nth-child(odd) { padding-right: .9rem; border-right: 1px solid rgb(0 0 0 / .18); }
.final .foot nav a:nth-child(even) { padding-left: .9rem; }
.final .foot nav a::after { content: "\2197"; font-size: .9rem; }
.final .foot::after { content: "\00A9  2026 Barber\2019 s House Hairstyle \00B7  Pa\00E7 os de Ferreira"; margin-top: 1rem; font-size: .62rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; opacity: .6; }
}
/* marcação direta pela API */
.bp .bkc { height: auto; }
.bkf, .bkok { display: grid; gap: 1rem; margin-top: 1rem; padding: 1.3rem 1.1rem; background: var(--white); border: 2px solid var(--ink); }
.bkf__sum { font-size: .95rem; line-height: 1.45; }
.bkf__sum b { display: block; margin-bottom: .25rem; font-family: var(--f-display); font-size: 1.5rem; line-height: 1.05; text-transform: uppercase; }
#bkForm { display: grid; gap: .9rem; }
.bkf__f { display: grid; gap: .35rem; }
.bkf__f span { font-size: .66rem; font-weight: 800; font-stretch: 125%; letter-spacing: .02em; text-transform: uppercase; }
.bkf__f em { font-style: normal; font-weight: 600; text-transform: none; opacity: .6; }
.bkf__f input { width: 100%; min-width: 0; padding: .95rem 1rem; border: 2px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); font: 500 1rem var(--f-body); }
.bkf__f input:focus { outline: 3px solid var(--lime); outline-offset: 0; }
.bkf__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bkf__err { color: var(--red); font-size: .88rem; font-weight: 700; line-height: 1.45; }
.bkf__err a, .bkf__link { padding: 0; border: 0; border-bottom: 2px solid currentColor; background: none; color: inherit; font: inherit; cursor: pointer; }
.bkf__fine { font-size: .76rem; opacity: .65; }
#bkForm .bkgo, .bkok .bkgo { width: 100%; text-decoration: none; }
.bkok { justify-items: start; }
.bkok__ic { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--lime); font-size: 1.5rem; font-weight: 800; }
.bkok h3 { font-family: var(--f-display); font-size: 2.4rem; line-height: 1; text-transform: uppercase; }
.bkok p { font-size: .95rem; }
.final .foot nav a:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; padding-right: 0; }
/* acesso a "As minhas marcações" */
.mine { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; margin-right: .3rem; padding: .5rem; color: inherit; }
.mine svg { width: 1.35rem; height: 1.35rem; }
.mine span { display: none; }
.bp__mine { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; margin-right: .8rem; font-size: .66rem; font-weight: 800; font-stretch: 125%; letter-spacing: .02em; text-transform: uppercase; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.bp__mine svg { width: 1.05rem; height: 1.05rem; }
@media (min-width: 900px) {
.mine { margin: 0 1.6rem 0 0; padding: .55rem .85rem; border: 2px solid currentColor; font-size: .7rem; font-weight: 800; font-stretch: 125%; letter-spacing: .02em; text-transform: uppercase; transition: background .2s, color .2s; }
.mine:hover { background: var(--ink); color: var(--white); }
.mine svg { width: 1.05rem; height: 1.05rem; }
.mine span { display: inline; }
}