/*
 * The "Book your demo" page (book.html, es/agenda.html; 28 Oct 2026) and its answer (booked.html,
 * es/agendada.html). Alex's reference was a booking card: dark, the host on the left, a month of
 * days in the middle, the day's half-hours on the right, then the form in the card's place.
 * Night olive card on the light mountain ground, the palette only, the site's two faces. Without
 * JavaScript the calendar stays hidden and the form shows a day and a time on the chosen host's
 * clock.
 */

.bk{background:var(--snow);min-height:100vh;color:var(--text-1)}
.bk__top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;padding-bottom:20px}
.bk__main{padding-bottom:96px}
.bk__head{text-align:center;padding:40px 0 40px}
.bk__title{font:600 clamp(32px,2vw + 24px,52px)/1.08 var(--font-sans);letter-spacing:-.025em;color:var(--granite)}
.bk__sub{margin:16px auto 0;font:400 16px/26px var(--font-sans);color:rgb(35 42 47 / .7);max-width:56ch}
.bk__notice{margin:20px auto 0;max-width:56ch;padding:12px 16px;border-radius:12px;background:var(--mist);
  font:500 15px/22px var(--font-sans);color:var(--granite)}

/* the card */
.bk__card{--c-ground:#11130D;--c-panel:#1A1D14;--c-line:#262A1B;--c-text:#ECE8DF;--c-quiet:rgb(236 232 223 / .7);
  --c-faint:rgb(236 232 223 / .5);--c-chip:#262A1B;
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);max-width:1180px;margin:0 auto;
  border-radius:20px;background:var(--c-ground);color:var(--c-text);overflow:hidden;
  box-shadow:0 1px 2px rgb(35 42 47 / .08),0 30px 60px -30px rgb(35 42 47 / .45)}
.bk__host{padding:28px;border-right:1px solid var(--c-line);display:flex;flex-direction:column;gap:12px}
.bk__avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;
  background:#DCE2A6;color:#11130D;font:600 17px/1 var(--font-sans)}
.bk__what{font:600 24px/30px var(--font-sans);letter-spacing:-.02em}
.bk__desc{font:400 15px/22px var(--font-sans);color:var(--c-quiet)}
.bk__chosen{display:flex;gap:10px;font:600 15px/22px var(--font-sans);color:var(--c-text)}
.bk__facts{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.bk__fact{display:flex;align-items:center;gap:10px;font:500 15px/20px var(--font-sans);color:var(--c-text)}
.bk__icon{width:18px;height:18px;flex:none;color:var(--c-quiet)}
.bk__tz select{appearance:none;background:transparent;border:0;color:var(--c-text);font:500 15px/20px var(--font-sans);
  padding:4px 20px 4px 0;cursor:pointer;max-width:220px;
  background-image:linear-gradient(45deg,transparent 50%,#ECE8DF 50%),linear-gradient(135deg,#ECE8DF 50%,transparent 50%);
  background-position:calc(100% - 8px) 55%,calc(100% - 3px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.bk__tz select:focus-visible,.bk__card button:focus-visible,.bk__card input:focus-visible,.bk__card select:focus-visible,
.bk__card textarea:focus-visible{outline:2px solid #C8FF3D;outline-offset:2px}

/* step one: the month and the day's half-hours */
.bk__pick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px)}
.bk [hidden]{display:none !important}
.bk__cal{padding:24px;border-right:1px solid var(--c-line)}
.bk__month{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.bk__month h2{flex:1;font:600 19px/24px var(--font-sans)}
.bk__month h2 span{color:var(--c-faint);font-weight:500}
.bk__nav{width:40px;height:40px;border-radius:10px;border:0;background:transparent;color:var(--c-text);cursor:pointer;font:500 20px/1 var(--font-sans)}
.bk__nav:disabled{color:var(--c-faint);cursor:default}
.bk__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.bk__wd{text-align:center;font:600 12px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--c-quiet);padding:8px 0}
.bk__day{aspect-ratio:1/1;min-height:44px;border-radius:10px;border:0;background:transparent;color:var(--c-faint);
  font:500 16px/1 var(--font-sans);font-variant-numeric:tabular-nums}
.bk__day--open{background:var(--c-chip);color:var(--c-text);font-weight:600;cursor:pointer}
.bk__day--open:hover{background:#6B7046}
.bk__day[aria-pressed="true"]{background:#F7F5EF;color:#11130D}
.bk__slots{padding:24px;display:flex;flex-direction:column;gap:12px}
.bk__dayhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bk__dayhead h3{font:600 17px/22px var(--font-sans)}
.bk__dayhead h3 span{color:var(--c-quiet);font-weight:500}
.bk__clock{display:flex;padding:3px;border-radius:10px;background:var(--c-panel)}
.bk__clock button{height:32px;padding:0 10px;border-radius:8px;border:0;background:transparent;color:var(--c-quiet);font:600 14px/1 var(--font-sans);cursor:pointer}
.bk__clock button[aria-pressed="true"]{background:var(--c-chip);color:var(--c-text)}
.bk__times{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:440px;overflow-y:auto}
.bk__time{width:100%;height:46px;border-radius:10px;border:1px solid var(--c-line);background:#0A0B08;color:var(--c-text);
  font:600 15px/1 var(--font-sans);font-variant-numeric:tabular-nums;cursor:pointer}
.bk__time:hover{border-color:#A9AE86}
.bk__empty{font:400 15px/22px var(--font-sans);color:var(--c-quiet)}

/* step two: the form */
.bk__form{padding:28px;display:flex;flex-direction:column;gap:18px}
.bk__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.bk__field{display:flex;flex-direction:column;gap:6px}
.bk__field--wide{grid-column:1 / -1}
.bk__label{font:600 14px/20px var(--font-sans);color:var(--c-text)}
.bk__label em{font-style:normal;font-weight:500;color:var(--c-faint)}
.bk__form input[type="text"],.bk__form input[type="email"],.bk__form input[type="tel"],.bk__form input[type="date"],
.bk__form select,.bk__form textarea{width:100%;min-height:46px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--c-line);background:#0A0B08;color:var(--c-text);font:400 16px/22px var(--font-sans)}
.bk__form textarea{min-height:96px;resize:vertical}
.bk__phone{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:8px}
.bk__fallback{border:1px solid var(--c-line);border-radius:12px;padding:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bk__fallback legend{padding:0 6px;font:600 14px/20px var(--font-sans)}
.bk__fallback p{grid-column:1 / -1;font:400 14px/20px var(--font-sans);color:var(--c-quiet)}
.bk__trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.bk__terms{font:400 13px/20px var(--font-sans);color:var(--c-quiet)}
.bk__terms a{color:var(--c-text);text-decoration:underline}
.bk__actions{display:flex;justify-content:flex-end;gap:12px}
.bk__back{height:44px;padding:0 16px;border-radius:999px;border:0;background:transparent;color:var(--c-quiet);font:500 15px/1 var(--font-sans);cursor:pointer}
.bk__confirm{height:44px;padding:0 20px;border-radius:999px;border:0;background:#F7F5EF;color:#11130D;font:600 15px/1 var(--font-sans);cursor:pointer}
.bk__confirm:hover{background:#ECE8DF}

/* the answer */
.bk__done{max-width:640px;margin:0 auto;text-align:center;padding:24px 0 0}
.bk__done .bk__card{display:block;padding:28px;text-align:left;margin-top:32px}
.bk__done .btn{margin-top:28px}

/* the region first (29 Oct 2026): México or Global, and that region's host. The chosen card
   shows by the checked radio (:has); a browser without :has shows the page's own region
   (.is-on), which book.js moves with the choice */
.bk__region{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.bk__regionlegend{padding:0;font:600 12px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--c-quiet)}
.bk__regionopts{display:flex;padding:3px;border-radius:12px;background:var(--c-panel)}
.bk__regionopt{flex:1;position:relative;display:flex}
.bk__regionopt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.bk__regionopt span{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:10px;
  color:var(--c-quiet);font:600 15px/1 var(--font-sans)}
.bk__regionopt input:checked + span{background:var(--c-chip);color:var(--c-text)}
.bk__regionopt input:focus-visible + span{outline:2px solid #C8FF3D;outline-offset:2px}
.bk__hostcard{display:none;flex-direction:column;gap:12px;padding-top:8px}
.bk__hostcard.is-on{display:flex}
.bk__per{display:none}
.bk__per.is-on{display:inline}
.bk__card:has(input[name="region"][value="mx"]:checked) .bk__hostcard[data-region="mx"],
.bk__card:has(input[name="region"][value="in"]:checked) .bk__hostcard[data-region="in"]{display:flex}
.bk__card:has(input[name="region"][value="mx"]:checked) .bk__hostcard[data-region="in"],
.bk__card:has(input[name="region"][value="in"]:checked) .bk__hostcard[data-region="mx"]{display:none}
.bk__card:has(input[name="region"][value="mx"]:checked) .bk__per[data-region="mx"],
.bk__card:has(input[name="region"][value="in"]:checked) .bk__per[data-region="in"]{display:inline}
.bk__card:has(input[name="region"][value="mx"]:checked) .bk__per[data-region="in"],
.bk__card:has(input[name="region"][value="in"]:checked) .bk__per[data-region="mx"]{display:none}
.bk__photo{object-fit:cover;padding:0}

/* the pages a booking's mailed links open (src/adren/demo_booking_mail.py): verified, cancel,
   reschedule, moved, a dead link; no script */
.bk__page .bk__notice{margin-top:20px}
.bk__panel{margin-top:32px;padding:28px;border-radius:20px;background:#11130D;color:#ECE8DF;text-align:left;
  --c-line:#262A1B;--c-text:#ECE8DF;--c-quiet:rgb(236 232 223 / .7);--c-faint:rgb(236 232 223 / .5);--c-panel:#1A1D14}
.bk__panel .bk__facts{margin:0 0 20px}
.bk__panel .bk__fact{align-items:flex-start;color:#ECE8DF}
.bk__panel .bk__label{display:inline-block;font:600 12px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:rgb(236 232 223 / .7)}
.bk__panelform{display:flex;flex-direction:column;gap:18px}
.bk__panelform select{width:100%;min-height:46px;padding:10px 12px;border-radius:10px;border:1px solid #262A1B;
  background:#0A0B08;color:#ECE8DF;font:400 16px/22px var(--font-sans)}
.bk__panel a.bk__back{display:inline-flex;align-items:center;text-decoration:none}
.bk__panel .btn{margin-top:4px}
.bk__panel .btn--primary{background:var(--paper);color:var(--ink-950);padding:0 24px;box-shadow:none}
.bk__panel .btn--primary:hover{background:var(--bone-50);box-shadow:none}
.bk__panel select:focus-visible,.bk__panel button:focus-visible,.bk__panel a:focus-visible{outline:2px solid #C8FF3D;outline-offset:2px}

/* narrower screens: one column */
@media (max-width:960px){
  .bk__card{grid-template-columns:minmax(0,1fr)}
  .bk__host{border-right:0;border-bottom:1px solid var(--c-line)}
}
@media (max-width:720px){
  .bk__pick{grid-template-columns:minmax(0,1fr)}
  .bk__cal{border-right:0;border-bottom:1px solid var(--c-line);padding:16px}
  .bk__slots,.bk__form,.bk__host{padding:20px}
  .bk__fields,.bk__fallback{grid-template-columns:minmax(0,1fr)}
  .bk__grid{gap:4px}
  .bk__day{min-height:40px;font-size:15px}
  .bk__head{padding:24px 0}
}