/* CABRA MACHO — identidade monocromática inspirada na marca original enviada.
   Camada visual aplicada por último; mantém eventos, agendamentos e API existentes. */
:root {
  --bg:#090a0b; --bg-alt:#101113; --panel:#16181a; --card:#191b1e;
  --ink:#f5f5f4; --muted:#b7b9bc; --gold:#f1f1f0; --gold-light:#ffffff;
  --line:#46494d; --red:#d7dadb; --green:#d7dadb;
  --font:'Manrope',Arial,sans-serif;
  --display:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  --v5-gold:#f1f1f0; --v5-dark:#090a0b; --v5-deep:#101113;
  --v5-stroke:rgba(220,222,224,.23);
  --radius:4px; color-scheme:dark;
}
html{scroll-padding-top:110px}
body{background:var(--bg);color:var(--ink);font-family:var(--font)}
::selection{background:#f5f5f4;color:#080808}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.025em;line-height:1.05}
h2 em,h1 em,h3 em{color:#fff;font-style:normal;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.14em}
.eyebrow{color:#d9dbde;font-size:11px;font-weight:800;letter-spacing:.23em}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #fff;outline-offset:3px}
.text-muted,.section-heading p,.barber-card p{color:#b9bbbd}
.button{border-radius:2px;min-height:48px;font-size:11px;letter-spacing:.12em;font-weight:800}
.button-gold,.button.button-gold,.button.booking-whatsapp-button{color:#090a0b;background:#f4f5f6;border:1px solid #f4f5f6;box-shadow:none}
.button-gold:hover:not(:disabled),.button.button-gold:hover:not(:disabled){background:#c6c9cc;color:#060707;border-color:#c6c9cc}
.button-outline,.button.button-outline{background:#090a0b80;color:#f2f3f4;border:1px solid #9d9fa1}
.button-outline:hover:not(:disabled){background:#2e3033;border-color:#f4f4f4}
.tricolore,.tricolore-line,.hero-bottom-rule{background:linear-gradient(90deg,#55585a 0 26%,#fff 26% 74%,#55585a 74% 100%)}
.tricolore{height:2px}
.tricolore-line{height:3px;width:88px;margin-top:20px}
/* Navegação com assinatura forte da marca */
.site-header{background:rgba(7,8,9,.95);border-bottom:1px solid #313437;box-shadow:0 9px 40px #0005}
.site-header.is-scrolled{background:rgba(6,7,8,.98)}
.header-inner,.site-header .header-inner{height:94px;min-height:94px;gap:13px}
.site-header .brand,.brand{display:inline-flex;align-items:center;gap:9px;min-width:0;flex-shrink:0}
.site-header .brand img,.brand img{display:block;width:78px;height:78px;max-height:78px;object-fit:contain;flex-shrink:0}
.brand-lettering{display:flex;flex-direction:column;gap:1px;white-space:nowrap}
.brand-lettering strong{font-family:var(--display);font-size:clamp(20px,2.3vw,30px);line-height:.95;letter-spacing:.04em;color:#f5f5f5;font-weight:900}
.brand-lettering small{font-size:8px;letter-spacing:.17em;font-weight:800;color:#bdbfc1;line-height:1.6}
.main-nav{gap:clamp(8px,1.6vw,20px)}
.main-nav>a:not(.button){font-size:10px;letter-spacing:.11em;color:#e2e2e2}
.main-nav>a:not(.button):hover,.main-nav>a.is-current{color:white}
.main-nav .button{min-height:39px;padding:8px 18px;font-size:10px}
/* Hero em duas colunas, foto em preto e branco e emblema central */
.hero.hero-cabra{min-height:740px;min-height:max(690px,85svh);display:flex;align-items:center;position:relative;isolation:isolate;text-align:left;overflow:hidden;padding:70px 0 88px;background:#080909}
.hero-cabra .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:grayscale(1) brightness(.35) contrast(1.2);z-index:-2}
.hero-cabra .hero-gradient{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,5,6,.96) 0%,rgba(4,5,6,.73) 47%,rgba(4,5,6,.58) 100%),linear-gradient(0deg,rgba(4,5,6,.90),transparent 30%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(300px,.86fr);align-items:center;gap:clamp(20px,4vw,80px);position:relative;z-index:1}
.hero-copy{max-width:700px;padding-top:12px}
.hero-kicker{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:800;letter-spacing:.27em;color:#d4d6d7}
.kicker-line{width:38px;height:2px;background:#f4f4f4;flex-shrink:0}
.hero-cabra h1{font-family:var(--display);font-size:clamp(4.2rem,8.2vw,8.35rem);letter-spacing:.005em;line-height:.83;font-weight:900;margin:37px 0 34px;text-shadow:0 10px 20px #0005}
.hero-cabra h1 em{display:inline-block;margin-top:12px;color:#f6f7f8;text-decoration:none;font-style:normal;-webkit-text-stroke:1.6px #f7f7f7;paint-order:stroke fill}
.hero-cabra p{color:#d9dadb;font-size:clamp(13px,1.2vw,16px);line-height:1.9;max-width:535px;margin:0 0 30px}
.hero-cabra .hero-actions{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap}
.hero-cabra .hero-actions .button{min-height:52px;padding-inline:24px;min-width:0}
.hero-tagline{display:block;margin-top:43px;font-size:10px;color:#cbccce;letter-spacing:.23em;font-weight:900}
.hero-tagline span{margin:0 9px;color:#fff}
.hero-emblem{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;aspect-ratio:1;max-width:465px;margin-inline:auto;width:100%;padding:20px;border:1px solid #d2d3d438;background:radial-gradient(circle at 50% 45%,#20212388 0,#0a0b0caa 59%,transparent 65%)}
.hero-emblem::before{content:"";position:absolute;inset:14px;border:1px solid #afb1b35a;border-radius:50%;pointer-events:none}
.hero-emblem::after{content:"";position:absolute;inset:35px;border:1px dashed #afb1b344;border-radius:50%;pointer-events:none}
.emblem-circle{position:relative;z-index:1;width:90%;aspect-ratio:1;display:grid;place-items:center}
.emblem-circle img{width:98%;height:98%;object-fit:contain;filter:drop-shadow(0 16px 26px #0008)}
.emblem-label{z-index:2;position:absolute;background:#0b0c0d;padding:5px 12px;font-size:9px;letter-spacing:.23em;font-weight:900;color:#d2d4d5;text-align:center}
.emblem-top{top:10px}.emblem-bottom{bottom:10px}
.hero-edge{position:absolute;left:50%;transform:translateX(-50%);bottom:20px;color:#b7b8b9;letter-spacing:.3em;font-size:9px;font-weight:800;white-space:nowrap}
/* Faixa editorial */
.cabramacho-marquee{background:#eeeef0;color:#0c0d0e;height:56px;overflow:hidden;display:flex;align-items:center;border-bottom:1px solid #f4f4f4}
.cabramacho-marquee-track{display:flex;align-items:center;gap:25px;min-width:max-content;white-space:nowrap;animation:cabra-marquee 34s linear infinite;will-change:transform}
.cabramacho-marquee-track span{font-family:var(--display);font-size:24px;font-weight:900;letter-spacing:.15em}
.cabramacho-marquee-track b{font-size:20px}
@keyframes cabra-marquee{to{transform:translateX(-50%)}}
/* Seções principais */
.section{padding-block:100px}
.section-alt{background:#111315;border-color:#343639}
.section-heading h2,.v4-services .section-heading h2,.v4-team .section-heading h2{font-family:var(--display);font-size:clamp(2.8rem,5.9vw,5.1rem);line-height:.97;text-transform:uppercase;font-weight:900}
.section-heading p{font-size:14px;line-height:1.8}
.v4-services .service-explorer-toolbar{border-color:#53565a}
.v4-services .service-filter-tabs .filter-pill,.service-filter-tabs .filter-pill,.v4-services .service-search{background:#131517;color:#f0f0f0;border-color:#63676a}
.v4-services .service-filter-tabs .filter-pill.active,.service-filter-tabs .filter-pill.active{background:#f1f2f3;color:#080909;border-color:#f1f2f3}
.v4-services .service-v5-card,.service-row{border-color:#44474a;background:transparent}
.v4-services .service-v5-card:hover,.v4-services .service-v5-card:focus-within,.service-row:hover{background:#1e2023}
.v4-services .service-card-body h3,.service-name{font-family:var(--display);font-size:clamp(1.9rem,3vw,2.8rem);font-weight:800;color:#f7f7f7;text-transform:uppercase}
.v4-services .service-card-price,.service-price{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.3rem);color:#f6f6f6}
.v4-services .service-card-link,.barber-book-link,.text-link{color:#fff;border-color:#7a7c80}
.v4-services .service-card-link:hover{background:#303336}
.v4-services .service-card-number,.v4-services .service-card-duration,.v4-services .mt-sort-control span{color:#ccced0}
.v4-services .mt-sort-control,.v4-services .mt-clear-filters,.v4-services .mt-empty-services{background:#181a1d;color:#f2f2f2;border-color:#606368}
.v4-services .mt-combo-label{color:#f6f6f6;background:#25282b;border-color:#74777a}
.v4-services .service-v5-card::before{border-color:#fff2}
/* Foto editorial da seção extra */
.cabramacho-feature{background:#0b0c0e;border-top:1px solid #4c4e51;border-bottom:1px solid #414447}
.cabramacho-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,7vw,110px);align-items:center;padding-block:72px}
.feature-photo{min-height:410px;position:relative;background:linear-gradient(180deg,transparent 45%,#000c),url('/assets/galeria-degrade.webp') center 38%/cover no-repeat;filter:grayscale(1);border:1px solid #66686a;display:flex;align-items:flex-end;padding:22px}
.feature-photo span{position:relative;color:white;font-family:var(--display);font-size:clamp(26px,3.7vw,48px);line-height:1;letter-spacing:.06em;font-weight:900}
.feature-copy h2,.shoes-copy h2{font-size:clamp(3.3rem,5vw,5.3rem);font-weight:900;line-height:.97;margin:20px 0 24px}
.feature-copy p,.shoes-copy p{color:#c3c5c6;font-size:15px;line-height:1.8;max-width:480px}
.text-link{display:inline-flex;margin-top:20px;gap:14px;padding-bottom:8px;border-bottom:1px solid #fff;font-size:11px;font-weight:900;letter-spacing:.12em}
/* Equipe */
.v4-team .barber-card,.barber-card{background:#191b1d;border:1px solid #4c4f52;border-radius:2px;transition:transform .25s,border-color .25s}
.v4-team .barber-card:hover{border-color:#d4d5d6;transform:translateY(-3px)}
.barber-card .avatar,.avatar{border:2px solid #bdbfc1;color:#e9e9e9;font-family:var(--display);font-weight:900}
.barber-card h3{font-family:var(--display);font-size:30px;font-weight:800}
.barber-book-link{border-bottom-color:#9a9da0}
/* Loja de calçados: institucional, nenhum catálogo fictício */
.cabramacho-shoes-section{background:#e8e9ea;color:#0a0b0c;position:relative;overflow:hidden}
.cabramacho-shoes-inner{display:grid;grid-template-columns:.7fr .9fr 1.2fr;gap:35px;align-items:center;min-height:520px;padding-block:75px;position:relative}
.shoes-index{font-family:var(--display);font-size:clamp(20px,2.4vw,31px);font-weight:800;align-self:start;letter-spacing:.07em;border-top:3px solid #070808;padding-top:15px}
.shoes-graphic{width:min(100%,260px);aspect-ratio:1;border:10px double #242526;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-12deg);margin:auto;border-radius:50%;box-shadow:0 0 0 16px #14151715}
.shoes-graphic>span{font-family:var(--display);font-size:clamp(75px,9vw,125px);font-weight:900;line-height:.9}
.shoes-graphic small{font-family:var(--display);text-align:center;line-height:1.1;font-size:16px;font-weight:900;letter-spacing:.16em}
.shoes-copy .eyebrow{color:#414448}
.shoes-copy h2{color:#0a0b0c;font-size:clamp(3.4rem,5.4vw,6.3rem)}
.shoes-copy h2 em{color:#0a0b0c}
.shoes-copy p{color:#303234}
.shoes-copy .button-gold{background:#0a0b0c;color:#fff;border-color:#0a0b0c;margin-top:17px}
.shoes-copy .button-gold:hover:not(:disabled){background:#414448;color:#fff;border-color:#414448}
.shoes-help{display:block;font-size:11px;margin-top:14px;color:#595b5e}
/* Horários, contato e CTA */
.hours-layout h2,.contact-grid h2,.v4-contact h2{font-family:var(--display);font-size:clamp(3rem,5vw,5rem);font-weight:900;line-height:.99}
.hours-card,.v4-hours .hours-card{background:#151719;border:1px solid #56595d}
.hours-row{border-color:#343639;color:#f5f5f5}
.hours-row span:last-child{color:#c1c3c4}
.contact-details,.v4-contact .contact-details{background:#151719;border:1px solid #55585a}
.contact-details strong{color:#fff}
.instagram-spotlight,.instagram-spotlight.is-unavailable{background:#1c1f21;border-color:#616467}
.instagram-spotlight-copy,.instagram-spotlight-copy strong{color:#fff}
.v4-closing,.closing{background:#131416;padding:95px 15px;text-align:center;border-top:1px solid #46484a}
.v4-closing h2{font-size:clamp(3rem,6vw,6rem);font-family:var(--display);font-weight:900;margin:15px 0 10px}
.v4-closing p{color:#c5c7c9;margin-bottom:28px}
/* Formulários, entrada e área administrativa também mudam para preto e branco */
.inner-main{background:radial-gradient(circle at 50% 0,#1c1f22,#090a0b 52%)}
.panel,.summary-card,.admin-content .panel,.admin-card{background:#181a1c;border-color:#55585b;border-radius:3px}
.panel h2,.summary-card h3{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.045em}
.step{color:#f8f8f8}
input,select,textarea{color:#f5f6f7;background:#101214;border:1px solid #777a7d}
input::placeholder,textarea::placeholder{color:#a0a3a6}
label{color:#e5e7e9}
.option,.slot,.booking-day,.booking-date-panel input{background:#141619;color:#f7f7f7;border-color:#66696d}
.option:hover,.slot:hover:not(:disabled),.booking-day:hover:not(:disabled){border-color:#fff}
.option.selected,.slot.selected,.booking-day.is-selected{background:#e8e9ea;color:#090a0b;border-color:#fff;box-shadow:none}
.option.selected span,.slot.selected small{color:#333}
.booking-calendar,.booking-other-date,.booking-time-picked{background:#131517;border-color:#55585a}
.summary-line{border-bottom-color:#4a4d4f}
.summary-line span:last-child{color:#f4f5f6}
.notice{background:#25282b;color:#f1f1f1;border-color:#8e9296}
.booking-approval-info,.error-banner{border-color:#9c9fa2;color:#f5f5f5;background:#26292c}
.login-page{background:radial-gradient(circle at 50% 15%,#24272a,#090a0b 65%)}
.login-box>a:first-child img{width:180px;max-width:180px;max-height:180px;object-fit:contain}
.login-box h1{font-family:var(--display);font-weight:900;font-size:2.9rem}
.admin-shell,.admin-sidebar,.admin-content{background:#0d0f11}
.admin-sidebar{border-right:1px solid #393c3f}
.admin-sidebar>a:first-child img{width:115px;height:115px;object-fit:contain}
.admin-sidebar #admin-nav button,.admin-sidebar nav button{color:#e0e2e3}
.admin-sidebar nav button.active{color:#070809;background:#e5e6e7}
.admin-heading h1{font-family:var(--display);font-weight:900;text-transform:uppercase;color:#fff}
.admin-heading .eyebrow,.admin-sidebar .eyebrow{color:#e5e6e7}
.admin-view .button-gold{color:#090a0b}
.admin-sidebar .back-link{color:#f2f2f2}
.admin-content .table-wrap,.admin-content table,.admin-content .admin-table{border-color:#4c4f52}
.admin-content th{color:#f1f1f1}
/* Rodapé */
.footer{background:#050607;border-top:1px solid #44474a}
.footer-inner>div:first-child img,.footer-inner img{display:block;width:120px;height:120px;object-fit:contain}
.footer-inner .footer-brand-name{font-family:var(--display);font-size:32px;font-weight:900;color:#fff}
.footer-inner strong{color:#f4f4f4}
.footer-inner p,.footer-inner a,.footer-inner span{color:#bfc2c3}
.footer-inner a:hover{color:#fff}
.copyright{color:#aeb0b2;border-top-color:#3b3e41}
/* Componentes JS antigos — mesmo design, mesmas funcionalidades */
.cabramacho-social-button{background:#17191b;color:#f5f5f5;border-color:#a1a3a5}
.cabramacho-social-button:hover{background:#e7e7e7;color:#080909}
@media(max-width:1120px){
 .brand-lettering small{font-size:7px}.brand-lettering strong{font-size:22px}
 .site-header .brand img{width:65px;height:65px}
 .main-nav{gap:9px}.main-nav>a:not(.button){font-size:9px}
 .hero-cabra h1{font-size:clamp(4rem,8vw,7.5rem)}
}
@media(max-width:900px){
 .brand-lettering strong{font-size:25px}.brand-lettering small{font-size:8px}
 .hero-grid{grid-template-columns:1.1fr .9fr;gap:10px}
 .hero-cabra h1{font-size:clamp(3.5rem,8vw,6.5rem)}
 .hero-emblem{padding:8px}
 .cabramacho-shoes-inner{grid-template-columns:.8fr 1.2fr}
 .shoes-index{grid-column:1/-1}
}
@media(max-width:760px){
 html{scroll-padding-top:83px}
 .site-header .header-inner{height:75px;min-height:75px}
 .site-header .brand img{width:58px;height:58px;max-height:58px}
 .brand-lettering strong{font-size:23px}
 .brand-lettering small{font-size:7px;letter-spacing:.12em}
 .site-header .main-nav{background:#0f1113;border:1px solid #65686b;border-top:2px solid white;max-height:calc(100dvh - 75px)}
 .site-header .main-nav>a:not(.button){font-size:12px;color:#f3f3f3}
 .site-header .main-nav>a:not(.button):hover{background:#27292c}
 .site-header .main-nav .button{width:100%}
 .menu-toggle,.site-header .menu-toggle{border-color:#777;color:#fff}
 .hero.hero-cabra{min-height:0;padding:64px 0 68px}
 .hero-grid{grid-template-columns:1fr;gap:38px}
 .hero-cabra .hero-photo{filter:grayscale(1) brightness(.24) contrast(1.2)}
 .hero-cabra .hero-gradient{background:linear-gradient(180deg,#07080977,#070809cc)}
 .hero-copy{text-align:center}
 .hero-kicker{justify-content:center;font-size:9px;letter-spacing:.15em}
 .hero-cabra h1{font-size:clamp(4.1rem,15vw,7.2rem);margin:30px auto 22px}
 .hero-cabra p{margin-inline:auto;line-height:1.75}
 .hero-cabra .hero-actions{justify-content:center}
 .hero-tagline{margin-top:28px;font-size:9px}
 .hero-emblem{max-width:330px}
 .hero-edge{display:none}
 .cabramacho-feature-grid{grid-template-columns:1fr;gap:26px;padding:40px 0 60px}
 .feature-photo{min-height:330px}
 .cabramacho-shoes-inner{gap:24px;padding-block:60px}
 .shoes-graphic{max-width:200px}
 .v4-team .barbers-grid{grid-template-columns:1fr}
 .section{padding-block:70px}
 .hours-layout{gap:30px}
 .footer-inner{gap:24px}
}
@media(max-width:550px){
 .container{width:min(100% - 32px,1140px)}
 .site-header .brand img{width:52px;height:52px}
 .brand-lettering strong{font-size:19px}
 .brand-lettering small{font-size:6px;letter-spacing:.06em}
 .hero.hero-cabra{padding:56px 0 52px}
 .hero-cabra h1{font-size:clamp(3.4rem,16vw,5.3rem)}
 .hero-cabra .hero-actions{display:flex;flex-direction:column;align-items:stretch;width:min(100%,350px);margin-inline:auto}
 .hero-cabra .hero-actions .button{width:100%}
 .hero-emblem{width:min(100%,285px)}
 .cabramacho-marquee{height:48px}.cabramacho-marquee-track span{font-size:21px}
 .cabramacho-shoes-inner{display:flex;flex-direction:column;align-items:stretch}
 .shoes-index{font-size:20px}
 .shoes-graphic{width:170px;margin:5px auto}
 .shoes-copy h2,.feature-copy h2{font-size:clamp(3.3rem,14vw,5rem)}
 .footer-inner{grid-template-columns:1fr 1fr}
 .footer-inner>div:first-child{grid-column:1/-1}
 .v4-services .service-card-body h3{font-size:1.9rem}
}
@media(prefers-reduced-motion:reduce){
 .cabramacho-marquee-track{animation:none}
 .hero-emblem,.hero-cabra .hero-copy{transform:none!important;transition:none!important}
}


/* ÍCONES CABRA MACHO — SVG inline no lugar de caracteres que viravam emojis
   verdes/azuis no Safari iOS. Herdam as cores preta e branca da marca. */
.cm-mark-icon,
.cm-arrow-icon {
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  pointer-events: none;
}
.cm-mark-icon { width: 12px; height: 12px; }
.hero-tagline .cm-mark-icon { margin: 0 9px; color: #f5f5f4; vertical-align: -2px; }
.cabramacho-marquee-track .cm-mark-icon { width: 18px; height: 18px; color: inherit; }
.cm-arrow-icon { width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; }
.text-link .cm-arrow-icon { margin-left: 0; }
@media (max-width: 550px) {
  .hero-tagline .cm-mark-icon { width: 11px; height: 11px; margin-inline: 5px; }
  .cabramacho-marquee-track .cm-mark-icon { width: 16px; height: 16px; }
}