:root{
  --gold:#B08A3E; --gold-deep:#6E5418; --gold-dark:#8A6A26; --gold-pale:#F3EAD6;
  --cream:#FAF8F3; --paper:#FFFFFF; --ink:#1F1E1C; --line:#E6DFD0; --muted:#5F5A52;
  --ok:#2F6B4A; --ok-bg:#E4F0E8; --warn:#9A4322; --warn-bg:#F6E2D6; --info-bg:#F3EAD6;
  --busy:#5F5A52; --busy-bg:#EEEAE2;
  --shadow:0 4px 18px rgba(31,30,28,.07);
  --radius:6px;
  --font-display:'Oswald','Arial Narrow',sans-serif;
  --font-body:'Source Sans 3','Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--cream); color:var(--ink); font-family:var(--font-body); line-height:1.5; padding-inline:16px; overflow-x:hidden;}
#root{max-width:1080px; margin:0 auto;}
h1,h2,h3{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em; text-wrap:balance; margin:0;}
h2{font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.05;}
img{max-width:100%;}
a{color:var(--gold-deep);}
button:focus-visible, input:focus-visible, a:focus-visible{outline:2px solid var(--gold-deep); outline-offset:2px;}
.eyebrow{font-family:var(--font-display); font-size:.8rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:8px;}

/* ===== header ===== */
.site-header{display:flex; align-items:center; justify-content:space-between; gap:14px; padding-block:14px; flex-wrap:wrap;}
.site-header .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);}
.site-header .brand img{width:52px; height:auto;}
.site-header .brand-txt{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:1.05rem; line-height:1.1; font-weight:600;}
.site-header .brand-txt small{display:block; font-family:var(--font-display); font-size:.68rem; letter-spacing:.25em; color:var(--gold-deep); font-weight:500;}
.site-header nav{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.site-header nav a{color:var(--ink); text-decoration:none; font-weight:600; font-size:.95rem;}
.site-header nav a:hover{color:var(--gold-deep);}
.site-header nav a.btn{color:#fff; padding:11px 18px;}
@media (max-width:560px){ .site-header nav a:not(.btn){display:none;} }

/* ===== hero ===== */
.full-bleed{width:100vw; position:relative; left:50%; margin-left:-50vw;}
.hero{background:repeating-linear-gradient(135deg,#F5F3EE 0 16px,#EFECE5 16px 32px); border-block:1px solid var(--line);}
.hero-inner{max-width:1080px; margin:0 auto; padding:56px 16px 64px; display:flex; flex-wrap:wrap; align-items:center; gap:40px 56px;}
.hero-logo{flex:0 1 380px; width:380px; max-width:100%; margin-inline:auto; filter:drop-shadow(0 6px 18px rgba(31,30,28,.10));}
.hero-copy{flex:1 1 380px; min-width:0;}
.hero-title{font-size:clamp(2.4rem,6vw,4.2rem); line-height:1; margin-bottom:18px;}
.hero-title span{color:var(--gold-dark);}
.hero-desc{font-size:1.12rem; color:var(--muted); max-width:44ch; margin:0 0 28px;}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap;}
.hero .btn{font-size:1.05rem; padding:15px 28px;}
.hero-hours{margin-top:28px; display:inline-flex; flex-direction:column; gap:2px; border-left:3px solid var(--gold); padding-left:14px;}
.hero-hours span{font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted);}
.hero-hours strong{font-family:var(--font-mono); font-weight:600;}

/* ===== showcase ===== */
.showcase{padding-block:72px 16px;}
.showcase h2{margin-bottom:28px;}
.showcase-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px;}
.show-card{font:inherit; color:inherit; text-align:left; cursor:pointer; transition:border-color .15s, transform .15s; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; gap:8px; min-height:210px;}
.show-dur{font-family:var(--font-mono); font-size:.8rem; color:var(--muted);}
.show-name{font-family:var(--font-display); text-transform:uppercase; font-size:1.4rem; font-weight:600;}
.show-desc{color:var(--muted); font-size:.95rem; flex-grow:1;}
.show-card:hover{border-color:var(--gold); transform:translateY(-2px);}
.show-cta{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; font-size:.85rem; color:var(--gold-deep);}
.show-price{font-family:var(--font-mono); font-size:1.35rem; font-weight:600; color:var(--gold-deep);}
.plan-band{margin-top:14px; background:var(--ink); color:#F5F1E8; border-radius:var(--radius); padding:26px 28px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:18px;}
.plan-band > div:first-child{flex:1 1 380px;}
.plan-kicker{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.14em; font-size:.8rem; color:#D2AE6A;}
.plan-name{font-family:var(--font-display); text-transform:uppercase; font-size:1.7rem; font-weight:600; margin:4px 0;}
.plan-desc{color:#CFC8BA;}
.plan-price{font-family:var(--font-mono); font-size:1.7rem; font-weight:600; color:#D2AE6A;}
.plan-price small{font-size:.85rem; color:#A39C8F;}

/* ===== reserva ===== */
.reservar-section{scroll-margin-top:16px; padding-block:64px 8px;}
.reservar-section > h2{margin-bottom:22px;}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow);}
.card h2{font-size:1.3rem; margin-bottom:14px;}
.stack{display:flex; flex-direction:column; gap:16px;}
.stepper{display:flex; gap:8px; flex-wrap:wrap; font-family:var(--font-mono); font-size:.82rem;}
.stepper span{padding:6px 12px; border:1.5px solid var(--line); color:var(--muted); border-radius:3px;}
.stepper span.current{border-color:var(--ink); background:var(--ink); color:#fff; font-weight:600;}
.stepper span.done{border-color:var(--ok); color:var(--ok);}
.progress-track{height:4px; background:var(--line); overflow:hidden;}
.progress-fill{height:100%; background:var(--gold); transition:width .35s cubic-bezier(.4,0,.2,1);}
.services{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px;}
.svc-card{text-align:left; border:1.5px solid var(--line); background:var(--paper); border-radius:var(--radius); padding:16px; cursor:pointer; display:flex; flex-direction:column; gap:6px; font:inherit; color:inherit; transition:border-color .15s, background-color .15s, transform .15s;}
.svc-card:hover{border-color:var(--gold); transform:translateY(-2px);}
.svc-card.selected{border-color:var(--ink); background:var(--gold-pale);}
.svc-card .svc-name{font-family:var(--font-display); font-size:1.15rem; text-transform:uppercase; font-weight:600;}
.svc-card .svc-desc{font-size:.9rem; color:var(--muted);}
.svc-card .svc-price{font-family:var(--font-mono); font-weight:600; color:var(--gold-deep); margin-top:auto;}
.info-card{border:1.5px dashed var(--line); border-radius:var(--radius); padding:14px 16px;}
.info-card .svc-name{font-family:var(--font-display); text-transform:uppercase; color:var(--gold-deep); display:block; margin-bottom:4px;}
.info-card .svc-desc{font-size:.92rem; color:var(--muted);}
.cal-strip{display:flex; gap:8px; overflow-x:auto; padding-bottom:8px;}
.cal-day{flex:0 0 auto; width:60px; min-height:62px; padding:8px 4px; border-radius:4px; border:1.5px solid var(--line); background:var(--paper); color:var(--ink); text-align:center; cursor:pointer; font-family:var(--font-mono); transition:border-color .15s, transform .15s;}
.cal-day:not(.closed):hover{border-color:var(--gold); transform:translateY(-2px);}
.cal-day .dow{font-size:.68rem; text-transform:uppercase; color:inherit; opacity:.75; display:block;}
.cal-day .num{font-size:1.2rem; display:block; font-weight:600;}
.cal-day.closed{opacity:.35; cursor:not-allowed;}
.cal-day.selected{border-color:var(--ink); background:var(--ink); color:#fff;}
.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px;}
.slot-btn{font-family:var(--font-mono); font-variant-numeric:tabular-nums; min-height:44px; border-radius:4px; border:1.5px solid var(--gold-deep); background:var(--paper); color:var(--gold-deep); cursor:pointer; font-size:.92rem; transition:background-color .15s, color .15s;}
.slot-btn:not(.taken):not(.selected):hover{background:var(--gold-pale);}
.slot-btn.selected{background:var(--ink); border-color:var(--ink); color:#fff; font-weight:600;}
.slot-btn.taken{border-color:var(--busy-bg); color:#8A8478; background:var(--busy-bg); cursor:not-allowed; text-decoration:line-through;}
.field{display:flex; flex-direction:column; gap:4px;}
.field label{font-size:.85rem; font-weight:600; color:var(--muted);}
.field input{font-family:var(--font-body); font-size:1rem; padding:11px 12px; border-radius:4px; border:1.5px solid var(--line); background:var(--cream); color:var(--ink); min-height:44px;}
.field input:focus{border-color:var(--gold);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:480px){.form-grid{grid-template-columns:1fr;}}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em; font-size:.98rem; padding:11px 22px; border-radius:4px; border:1.5px solid var(--gold-dark); background:var(--gold-dark); color:#fff; cursor:pointer; text-decoration:none; transition:background-color .15s, transform .15s;}
.btn:not(:disabled):hover{background:var(--gold-deep); border-color:var(--gold-deep); transform:translateY(-1px);}
.btn.secondary{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn.secondary:not(:disabled):hover{background:var(--ink); color:#fff;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.notice{border-radius:4px; padding:12px 14px; font-size:.95rem; margin:0;}
.notice.ok{background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok); font-weight:600;}
.notice.warn{background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn);}
.notice.info{background:var(--info-bg); color:var(--gold-deep); border:1px solid var(--line); font-size:.85rem;}
.muted{color:var(--muted); font-size:.88rem;}

/* ===== about + footer ===== */
.about{padding-block:72px 64px; display:flex; flex-wrap:wrap; gap:16px 48px;}
.about .eyebrow{flex-basis:100%; margin:0;}
.about h2{flex:1 1 260px;}
.about p{flex:999 1 420px; font-size:1.15rem; line-height:1.7; margin:0; max-width:60ch;}
.contact-bar{background:var(--gold-dark); color:#fff;}
.contact-inner{max-width:1080px; margin:0 auto; padding:22px 16px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px 40px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; font-size:1.05rem;}
.contact-inner a{color:#fff; text-decoration:none;}
.contact-inner a:hover{text-decoration:underline;}

/* ===== panel ===== */
.panel-head{display:flex; align-items:center; gap:16px; padding-block:22px;}
.panel-head img{width:72px;}
.panel-head h1{font-size:1.8rem;}
.panel-head .eyebrow{margin:0;}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;}
.stat-tile{background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:14px; text-align:center;}
.stat-tile .stat-num{font-family:var(--font-mono); font-size:1.5rem; font-weight:600; color:var(--gold-deep); font-variant-numeric:tabular-nums;}
.stat-tile .stat-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);}
.pill{display:inline-block; padding:2px 9px; border-radius:999px; font-size:.72rem; font-family:var(--font-mono);}
.pill.mensual{background:var(--gold-pale); color:var(--gold-deep);}
.chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.chip{border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:.85rem; cursor:pointer; background:var(--cream);}
.chip.on{border-color:var(--gold); background:var(--gold-pale); color:var(--gold-deep);}
.agenda-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 12px; border-radius:4px; border:1px solid var(--line);}
.agenda-row.free{border-style:dashed;}
.agenda-row.busy{background:var(--gold-pale); border-color:var(--gold); border-left-width:4px;}
.agenda-time{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:.88rem; color:var(--muted); flex:0 0 auto; white-space:nowrap; min-width:120px;}
.agenda-row.busy .agenda-time{color:var(--gold-deep); font-weight:600;}
.agenda-info{flex:1 1 220px; font-size:.92rem;}
.link-btn{background:none; border:none; color:var(--gold-deep); text-decoration:underline; cursor:pointer; font-size:.88rem; padding:0; min-height:32px; font-family:inherit;}
a.link-btn{display:inline-flex; align-items:center;}
details.config summary{cursor:pointer; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; color:var(--gold-deep); margin:8px 0; min-height:44px; display:flex; align-items:center;}
#root > footer.contact-bar{margin-top:40px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:0.001ms !important;}
  .svc-card:hover, .cal-day:not(.closed):hover, .btn:not(:disabled):hover{transform:none;}
}

/* honeypot field for bots on the booking form */
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}

/* per-day opening hours in the admin config */
.hours-grid{display:flex; flex-direction:column; gap:8px;}
.hours-row{display:grid; grid-template-columns:80px minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:8px;}
.hours-row input[type="time"]{width:100%; min-width:0;}
.hours-day{display:flex; align-items:center; gap:6px; font-weight:600;}
.hours-row:has(input[type="checkbox"]:not(:checked)) input[type="time"]{opacity:.4;}
.hours-row input[type="time"]{font-family:var(--font-body); font-size:1rem; padding:9px 10px; border-radius:4px; border:1.5px solid var(--line); background:var(--cream); color:var(--ink); min-height:44px;}

/* one block per service in the admin config */
.svc-config{display:flex; flex-direction:column; gap:10px; padding:12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--cream);}
.svc-config .field input{background:var(--paper);}