/* JR BARBER — identidade exclusiva sobre a base da agenda: grafite, vermelho de barbearia, prata e a faixa do poste 💈.
   Nome em itálico com serifa, como no Instagram (@_.jrsilva._). Carregado depois de tema.php: vale por cima do visual padrão. */
:root{--card:#141418;--text:#f1f1f3;--muted:#9b9ca6;--line:#2a2a31;--silver:#d9dce2;--navy:#1f3a93;--ok:#3fbf7f;
  --pole:repeating-linear-gradient(125deg,#c8102e 0 14px,#f4f5f7 14px 22px,#1f3a93 22px 30px,#f4f5f7 30px 38px)}
body{background:radial-gradient(90% 50% at 50% 0,rgba(200,16,46,.10),transparent 70%),var(--page);color:var(--text)}
::selection{background:#c8102e;color:#fff}

/* Faixa do poste de barbearia (animada) no topo da página e acima do agendamento */
body::before{content:"";position:fixed;left:0;right:0;top:0;height:4px;z-index:60;background:var(--pole);background-size:200% 100%;animation:pole 6s linear infinite}
@keyframes pole{to{background-position:-200% 0}}

/* Topo: monograma, nome em itálico com serifa e linha prateada */
.hero h1{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(38px,8vw,64px)}
.hero h1::after{content:"";display:block;width:84px;height:3px;margin:14px auto 0;border-radius:3px;background:var(--pole)}
.hero p{letter-spacing:.02em}
.biz-logo{background:transparent!important;box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(217,220,226,.18);border-radius:30px}
.hero.has-bg::after{background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--page) 60%,transparent) 78%,var(--page) 100%),
  linear-gradient(180deg,rgba(0,0,0,calc(var(--overlay) * .85)),rgba(0,0,0,var(--overlay)) 70%,rgba(0,0,0,calc(var(--overlay) * .5))),
  radial-gradient(70% 60% at 50% 40%,rgba(200,16,46,.18),transparent 70%)}

/* Cartões escuros com borda prateada sutil */
.card,.plan{background:linear-gradient(180deg,#17171c,#111114);border-color:var(--line);box-shadow:0 24px 60px rgba(0,0,0,.45)}
#agendar{position:relative;overflow:hidden}
#agendar::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--pole)}
.step{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:18px;letter-spacing:.01em}
.step span{font-family:"Inter",system-ui,sans-serif;font-style:normal;border-radius:8px}

/* Escolhas: serviços, dias e horários no tom grafite; selecionado em vermelho */
.svc,.day,.time,.pro{background:#1a1a1f;border-color:var(--line);color:var(--text)}
.svc small,.day small{color:var(--muted)}
.svc:hover,.day:hover,.time:hover,.pro:hover{border-color:#c8102e}
.svc.is-on{background:linear-gradient(90deg,rgba(200,16,46,.22),rgba(200,16,46,.06));border-color:#c8102e}
.pro:first-child::before{background:#24242b;color:var(--silver)}
.pro.is-on{background:rgba(200,16,46,.14)}
.form label{color:var(--text)}
.form input{background:#0f0f12;border-color:var(--line);color:var(--text)}
.form input::placeholder{color:#62636d}
.form input:focus{border-color:#c8102e;box-shadow:0 0 0 3px rgba(200,16,46,.2)}
.btn-ghost{color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn{letter-spacing:.02em;text-transform:uppercase;font-size:14.5px}
.btn-cta{padding-inline:30px}
.done h2{font-family:Georgia,"Times New Roman",serif;font-style:italic}
.loading,.muted{color:var(--muted)}

/* Carrossel e planos */
.promos{border:1px solid var(--line)}
.slide h2{font-family:Georgia,"Times New Roman",serif;font-style:italic}
.slide-tag{border-radius:6px}
.plans-sec>h2{font-family:Georgia,"Times New Roman",serif;font-style:italic;letter-spacing:.04em;text-transform:uppercase}
.plans-sec>h2::after{content:"";display:block;width:60px;height:3px;margin:10px auto 0;border-radius:3px;background:var(--pole)}
.plan.is-hl{border-color:#c8102e;box-shadow:0 20px 50px rgba(200,16,46,.22)}
.plan-badge{border-radius:6px;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}
.plan li::before{color:#c8102e}
.plan-price b{color:#fff}

/* Confirmação e rodapé */
.md{background:#16161a;color:var(--text);border:1px solid var(--line)}
.by{color:var(--muted)}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}