:root { --ink:#151714; --signal:#c9ff45; --paper:#ece9e1; --surface:#f7f5ef; --line:color-mix(in srgb,var(--ink) 22%,transparent); --sans:"DM Sans",Arial,sans-serif; --serif:"Instrument Serif",Georgia,serif; }
* { box-sizing:border-box; }
body { background:var(--paper); color:var(--ink); font-family:var(--sans); margin:0; }
a { color:inherit; text-decoration:none; }
button,input,select { color:inherit; font:inherit; }
header { align-items:center; border-bottom:1px solid var(--line); display:flex; font-size:.62rem; justify-content:space-between; letter-spacing:.13em; min-height:72px; padding:0 4vw; }
header a { align-items:center; display:flex; font-weight:600; gap:.5rem; }
header i { background:var(--signal); border-radius:50%; height:8px; width:8px; }
.booking-page { display:grid; grid-template-columns:42% 58%; min-height:calc(100vh - 73px); }
.booking-page aside { background:var(--ink); color:var(--paper); padding:7vw 5vw; }
.booking-page aside > span,.booking-page form > span,.portal-result > span,.client-page section > span,.appointment-ticket > span { font-size:.6rem; font-weight:600; letter-spacing:.13em; }
h1,h2 { font-family:var(--serif); font-weight:400; letter-spacing:-.05em; line-height:.82; }
h1 { font-size:clamp(4rem,7vw,8rem); margin:3rem 0; }
h2 { font-size:clamp(3.4rem,5vw,6rem); margin:2rem 0 3rem; }
h1 em,h2 em { font-weight:400; }
.booking-page aside p,.portal-result p,.client-page section > p { font-size:.75rem; line-height:1.7; max-width:420px; }
.booking-page > section { padding:6vw 9vw; }
.booking-page form label { display:grid; font-size:.61rem; font-weight:600; gap:.5rem; letter-spacing:.08em; margin:1.4rem 0; text-transform:uppercase; }
input,select { background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; outline:none; padding:.9rem 0; }
.portal-grid { display:grid; gap:2rem; grid-template-columns:1fr 1fr; }
.portal-button { align-items:center; background:var(--signal); border:1px solid var(--ink); display:flex; font-size:.7rem; font-weight:600; justify-content:space-between; margin-top:2.5rem; min-width:230px; padding:1rem 1.1rem; width:max-content; }
.booking-calendar-page { grid-template-columns:minmax(280px,32%) 1fr; }
.booking-calendar-page aside { padding:6vw 4vw; }
.booking-calendar-page aside h1 { font-size:clamp(4rem,6vw,7rem); }
.booking-calendar-page > section { padding:4vw 5vw 7vw; }
.calendar-booking-form { margin:0 auto; max-width:920px; }
.calendar-booking-form > h2 { font-size:clamp(3.2rem,5vw,5.8rem); margin-bottom:2.5rem; }
.booking-steps { display:grid; gap:0; list-style:none; margin:3rem 0 0; max-width:390px; padding:0; }
.booking-steps li { align-items:center; border-top:1px solid color-mix(in srgb,var(--paper) 25%,transparent); display:flex; font-size:.65rem; gap:1rem; padding:1rem 0; text-transform:uppercase; }
.booking-steps b { color:var(--signal); font-size:.58rem; letter-spacing:.1em; }
.booking-block { border-top:1px solid var(--line); margin-top:2rem; padding-top:1.5rem; }
.booking-block-title { align-items:flex-start; display:flex; gap:1rem; }
.booking-block-title > b { align-items:center; background:var(--ink); border-radius:50%; color:var(--paper); display:flex; flex:0 0 30px; font-size:.55rem; height:30px; justify-content:center; }
.booking-block-title div { display:grid; gap:.35rem; }
.booking-block-title span,.time-picker span { font-size:.55rem; font-weight:600; letter-spacing:.13em; }
.booking-block-title strong { font:400 1.5rem/1 var(--serif); }
.booking-service { margin:1.25rem 0 0!important; }
.booking-service select.has-error { border-color:#993d28; box-shadow:0 2px 0 #993d28; }
.booking-service-error { background:#f3d6ce; border-left:3px solid #993d28; font-size:.65rem; margin:.8rem 0 0; padding:.75rem .9rem; }
.calendar-shell { background:color-mix(in srgb,var(--surface) 72%,transparent); border:1px solid var(--line); margin-top:1.4rem; padding:1.25rem; }
.calendar-toolbar { align-items:center; display:flex; justify-content:space-between; margin-bottom:1.25rem; }
.calendar-toolbar strong { font:400 1.45rem/1 var(--serif); text-transform:capitalize; }
.calendar-toolbar button { background:transparent; border:1px solid var(--line); cursor:pointer; height:34px; width:34px; }
.calendar-toolbar button:disabled { cursor:not-allowed; opacity:.25; }
.calendar-weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); }
.calendar-weekdays span { font-size:.5rem; letter-spacing:.08em; padding:.55rem 0; text-align:center; }
.calendar-day { align-items:center; aspect-ratio:1.15; background:transparent; border:0; border-right:1px solid var(--line); border-top:1px solid var(--line); cursor:pointer; display:flex; flex-direction:column; font-size:.72rem; gap:.45rem; justify-content:center; min-height:47px; }
.calendar-day:nth-child(7n),.calendar-grid > :last-child { border-right:0; }
.calendar-day i { background:var(--signal); border:1px solid var(--ink); border-radius:50%; height:5px; width:5px; }
.calendar-day:hover:not(:disabled) { background:color-mix(in srgb,var(--signal) 35%,transparent); }
.calendar-day.today span { border-bottom:1px solid var(--ink); }
.calendar-day.selected { background:var(--ink); color:var(--paper); }
.calendar-day.selected i { border-color:var(--paper); }
.calendar-day:disabled { cursor:not-allowed; opacity:.22; }
.calendar-day:disabled i { display:none; }
.calendar-spacer { border-top:1px solid var(--line); min-height:47px; }
.time-picker { border:1px solid var(--line); border-top:0; padding:1.25rem; }
.time-picker > div:first-child { display:flex; justify-content:space-between; }
.time-picker > div:first-child strong { font:400 1.05rem/1 var(--serif); text-transform:capitalize; }
.time-slots { display:grid; gap:.55rem; grid-template-columns:repeat(4,1fr); margin-top:1.1rem; }
.time-slots button { background:transparent; border:1px solid var(--line); cursor:pointer; font-size:.63rem; padding:.75rem .4rem; }
.time-slots button:hover,.time-slots button.selected { background:var(--signal); border-color:var(--ink); }
.time-empty { font-size:.68rem; grid-column:1/-1; margin:0; opacity:.65; }
.booking-selection { background:var(--ink); border:0; color:var(--paper); font-size:.65rem; margin:0; padding:.85rem 1rem; text-align:left; width:100%; }
.booking-selection:not(:disabled)::after { content:'  · CONTINUAR ↗'; color:var(--signal); float:right; font-size:.52rem; letter-spacing:.08em; }
.booking-selection:disabled { cursor:default; }
.booking-submit:disabled { cursor:not-allowed; opacity:.35; }
.booking-modal { align-items:center; display:flex; inset:0; justify-content:center; opacity:0; padding:3vh 4vw; pointer-events:none; position:fixed; transition:opacity .2s ease; z-index:100; }
.booking-modal.is-open { opacity:1; pointer-events:auto; }
.booking-modal-backdrop { background:rgb(21 23 20 / .78); border:0; inset:0; position:absolute; }
.booking-modal-panel { background:var(--paper); border:1px solid var(--ink); box-shadow:0 28px 80px rgb(0 0 0 / .3); max-height:94vh; max-width:620px; overflow:auto; padding:clamp(1.5rem,4vw,3.5rem); position:relative; transform:translateY(18px); transition:transform .2s ease; width:100%; }
.booking-modal.is-open .booking-modal-panel { transform:none; }
.booking-modal-close { background:transparent; border:1px solid var(--line); font-size:1.4rem; height:38px; line-height:1; position:absolute; right:1rem; top:1rem; width:38px; }
.booking-modal-step > span { font-size:.56rem; font-weight:600; letter-spacing:.13em; }
.booking-modal-step h3 { font:400 clamp(3.2rem,7vw,5.4rem)/.8 var(--serif); letter-spacing:-.05em; margin:2rem 0; }
.booking-modal-step h3 em { font-weight:400; }
.booking-modal-date { border-bottom:1px solid var(--line); display:block; font:400 1.35rem/1.2 var(--serif); padding-bottom:1rem; text-transform:capitalize; }
.booking-modal .time-slots { grid-template-columns:repeat(4,1fr); margin-top:1.4rem; }
.booking-modal .time-slots button { min-height:48px; }
.booking-modal-summary { background:var(--ink); color:var(--paper); display:grid; gap:.45rem; margin:0 0 1.8rem; padding:1rem 1.1rem; }
.booking-modal-summary small { color:var(--signal); font-size:.52rem; letter-spacing:.12em; }
.booking-modal-summary strong { font:400 1.2rem/1.2 var(--serif); text-transform:capitalize; }
.booking-modal-summary button { background:transparent; border:0; color:var(--paper); font-size:.55rem; justify-self:start; padding:.25rem 0 0; text-decoration:underline; }
.booking-modal-errors { margin:0 0 1.25rem; }
.booking-modal .booking-submit { margin-top:1.8rem; width:100%; }
.booking-modal-open { overflow:hidden; }
[hidden] { display:none!important; }
.portal-errors,.portal-notice { background:#f3d6ce; border-left:3px solid #993d28; font-size:.68rem; padding:.8rem 1rem; }
.portal-errors p { margin:.3rem 0; }
.portal-notice { background:var(--signal); border-color:var(--ink); margin-bottom:2rem; }
.client-page { display:grid; gap:8vw; grid-template-columns:1fr 430px; min-height:calc(100vh - 73px); padding:8vw; }
.appointment-ticket { align-self:center; background:var(--surface); border:1px solid var(--ink); padding:2rem; }
.appointment-ticket > span { color:#638821; }
.ticket-date { align-items:center; border-bottom:1px solid var(--line); border-top:1px solid var(--line); display:flex; gap:1.4rem; margin:2rem 0; padding:2rem 0; }
.ticket-date strong { font:400 5rem/.8 var(--serif); }
.ticket-date p { display:flex; flex-direction:column; font-size:.65rem; gap:.5rem; margin:0; }
.ticket-date b { font-size:1.1rem; }
.appointment-ticket dl { display:grid; font-size:.68rem; grid-template-columns:90px 1fr; }
.appointment-ticket dt,.appointment-ticket dd { border-bottom:1px solid var(--line); margin:0; padding:.8rem 0; }
.appointment-ticket dt { opacity:.55; }
.appointment-ticket button { background:transparent; border:1px solid var(--ink); font-size:.65rem; margin-top:2rem; padding:.8rem; width:100%; }
@media(max-width:800px) { .booking-page,.client-page { grid-template-columns:1fr; } .booking-page aside,.booking-page > section,.client-page { padding:5rem 6vw; } .booking-calendar-page aside h1 { font-size:4.8rem; } .booking-steps { display:none; } .client-page { gap:3rem; } }
@media(max-width:560px) { .calendar-shell { padding:.75rem; } .calendar-weekdays span { font-size:.43rem; } .calendar-day,.calendar-spacer { min-height:40px; } .time-picker > div:first-child { align-items:flex-start; flex-direction:column; gap:.4rem; } .time-slots,.booking-modal .time-slots { grid-template-columns:repeat(3,1fr); } .booking-modal { align-items:flex-end; padding:0; } .booking-modal-panel { border-bottom:0; border-left:0; border-right:0; max-height:92vh; padding:2rem 1.25rem; } .booking-modal-step h3 { font-size:3.5rem; } }
@media(max-width:480px) { header span { display:none; } .portal-grid { grid-template-columns:1fr; gap:0; } h1 { font-size:4.2rem; } .appointment-ticket { padding:1.3rem; } }