/* ==========================================================================
   BIZIO — Selector de reserva "estilo Apple" (overlay/sheet animado)
   Prefijo: bz-pick-*  ·  sobre tokens.css  ·  responsive móvil/tablet/desktop
   Estructura: .bz-pick (overlay) > .bz-pick__sheet (flex column)
     ├─ .bz-pick__bar    (barra FIJA arriba con ✕ — siempre visible)
     └─ .bz-pick__scroll (contenido scrolleable: pasos + foot)
   ========================================================================== */

.bz-pick{
  position:fixed; inset:0; z-index:var(--bz-z-modal,300);
  display:flex; align-items:center; justify-content:center; padding:1.2rem;
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--bz-ease), visibility .35s var(--bz-ease);
}
.bz-pick.is-open{ opacity:1; visibility:visible; }

.bz-pick__backdrop{
  position:absolute; inset:0; background:rgba(8,7,16,.6);
  backdrop-filter:blur(8px) saturate(120%); -webkit-backdrop-filter:blur(8px) saturate(120%);
}

.bz-pick__sheet{
  position:relative; display:flex; flex-direction:column;
  width:100%; max-width:600px; max-height:88vh; overflow:hidden;
  background:var(--bz-crema); color:var(--bz-gray);
  border-radius:1.4rem; box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:translateY(24px) scale(.96); opacity:0;
  transition:transform .4s var(--bz-ease), opacity .4s var(--bz-ease);
}
.bz-pick.is-open .bz-pick__sheet{ transform:translateY(0) scale(1); opacity:1; }

/* ── barra fija (siempre con ✕ visible) ─────────────────────────────────── */
.bz-pick__bar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.85rem .9rem .85rem 1.4rem;
  border-bottom:1px solid var(--bz-border); background:var(--bz-crema);
}
.bz-pick__bar-label{
  font-family:var(--bz-font-body); font-weight:700; text-transform:uppercase;
  letter-spacing:1.5px; font-size:.72rem; color:var(--bz-gray-lt);
}
.bz-pick__close{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  border:none; background:rgba(79,77,77,.08); color:var(--bz-gray);
  font-size:1.35rem; line-height:1; cursor:pointer; transition:.25s var(--bz-ease);
}
.bz-pick__close:hover{ background:rgba(79,77,77,.16); transform:rotate(90deg); }

/* ── área scrolleable ───────────────────────────────────────────────────── */
.bz-pick__scroll{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:1.6rem 2rem 2rem;
}

.bz-pick__kicker{
  font-family:var(--bz-font-body); font-weight:700; text-transform:uppercase;
  letter-spacing:2px; font-size:.72rem; color:var(--bz-naranja);
  text-align:center; margin-bottom:.4rem;
}
.bz-pick__title{
  font-family:var(--bz-font-display); font-size:clamp(1.7rem,5vw,2.4rem);
  color:var(--bz-black); text-align:center; line-height:1.1; margin-bottom:.4rem;
}
.bz-pick__hint{ text-align:center; color:var(--bz-gray-lt); font-size:.95rem; margin-bottom:1.8rem; }

/* ── steps ──────────────────────────────────────────────────────────────── */
.bz-pick__step{ display:none; }
.bz-pick__step.is-active{ display:block; animation:bzPickStepIn .4s var(--bz-ease) both; }
@keyframes bzPickStepIn{ from{opacity:0; transform:translateX(14px);} to{opacity:1; transform:translateX(0);} }

.bz-pick__back{
  display:inline-flex; align-items:center; gap:.3rem; background:none; border:none;
  color:var(--bz-gray-lt); font-family:var(--bz-font-body); font-weight:600;
  font-size:.9rem; cursor:pointer; margin-bottom:1rem; padding:.3rem 0; transition:.2s var(--bz-ease);
}
.bz-pick__back:hover{ color:var(--bz-naranja); }

/* ── paso 1: dos opciones grandes ───────────────────────────────────────── */
.bz-pick__lead{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

.bz-pick-big{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  min-height:190px; padding:1.4rem; border-radius:var(--bz-radius); border:2px solid var(--bz-border);
  background:var(--bz-white); cursor:pointer; text-align:left; overflow:hidden;
  transition:.28s var(--bz-ease); opacity:0; transform:translateY(16px);
  animation:bzPickReveal .5s var(--bz-ease) forwards;
}
.bz-pick-big:nth-child(1){ animation-delay:.05s; }
.bz-pick-big:nth-child(2){ animation-delay:.13s; }
.bz-pick-big::before{
  content:""; position:absolute; inset:0; background:var(--img) center/cover;
  opacity:.16; transition:.28s var(--bz-ease);
}
.bz-pick-big:hover{ border-color:var(--bz-naranja); transform:translateY(-4px); box-shadow:var(--bz-shadow-lg); }
.bz-pick-big:hover::before{ opacity:.26; transform:scale(1.05); }
.bz-pick-big__ico{ position:relative; font-size:1.8rem; margin-bottom:auto; }
.bz-pick-big__t{ position:relative; font-family:var(--bz-font-display); font-size:1.5rem; color:var(--bz-black); line-height:1; }
.bz-pick-big__s{ position:relative; color:var(--bz-gray-lt); font-size:.9rem; margin-top:.35rem; }

@keyframes bzPickReveal{ to{ opacity:1; transform:translateY(0); } }

/* ── rejilla de tarjetas (artistas / servicios) ─────────────────────────── */
.bz-pick-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.9rem; }

.bz-pick-card{
  position:relative; display:block; border-radius:var(--bz-radius); overflow:hidden;
  text-decoration:none; aspect-ratio:3/4; background:#ddd; cursor:pointer;
  opacity:0; transform:translateY(16px); animation:bzPickReveal .5s var(--bz-ease) forwards;
  transition:transform .28s var(--bz-ease), box-shadow .28s var(--bz-ease);
}
.bz-pick-card:nth-child(1){ animation-delay:.04s; } .bz-pick-card:nth-child(2){ animation-delay:.10s; }
.bz-pick-card:nth-child(3){ animation-delay:.16s; } .bz-pick-card:nth-child(4){ animation-delay:.22s; }
.bz-pick-card:nth-child(5){ animation-delay:.28s; } .bz-pick-card:nth-child(6){ animation-delay:.34s; }
.bz-pick-card:hover{ transform:translateY(-5px); box-shadow:var(--bz-shadow-lg); }
.bz-pick-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:.4s var(--bz-ease); }
.bz-pick-card:hover img{ transform:scale(1.06); }
.bz-pick-card__grad{ position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.1) 55%,transparent 100%); }
.bz-pick-card__txt{ position:absolute; left:0; right:0; bottom:0; padding:.85rem .9rem; color:#fff; }
.bz-pick-card__name{ display:block; font-family:var(--bz-font-display); font-size:1.15rem; line-height:1; }
.bz-pick-card__style{ display:block; font-size:.78rem; color:#e9e7ef; opacity:.85; margin-top:.15rem; }
.bz-pick-card__go{
  position:absolute; top:.6rem; right:.6rem; width:30px; height:30px; border-radius:50%;
  background:var(--bz-naranja); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1rem; opacity:0; transform:scale(.6); transition:.25s var(--bz-ease);
}
.bz-pick-card:hover .bz-pick-card__go{ opacity:1; transform:scale(1); }

.bz-pick__foot{ text-align:center; color:var(--bz-gray-lt); font-size:.82rem; margin-top:1.4rem; }
.bz-pick__foot a{ color:var(--bz-naranja); font-weight:600; text-decoration:none; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* Tablet */
@media (max-width:768px){
  .bz-pick__sheet{ max-width:560px; }
  .bz-pick__scroll{ padding:1.4rem 1.5rem 1.6rem; }
  .bz-pick-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
}

/* Móvil: sheet anclado abajo, entra deslizando; barra ✕ fija siempre visible */
@media (max-width:560px){
  .bz-pick{ padding:0; align-items:flex-end; }
  .bz-pick__sheet{
    max-width:none; width:100%; max-height:90vh;
    border-radius:1.2rem 1.2rem 0 0;
    transform:translateY(100%);
  }
  .bz-pick.is-open .bz-pick__sheet{ transform:translateY(0); }
  .bz-pick__bar{ padding:.8rem .8rem .8rem 1.2rem; }
  .bz-pick__scroll{ padding:1.2rem 1.2rem calc(1.6rem + env(safe-area-inset-bottom,0px)); }
  .bz-pick__hint{ margin-bottom:1.2rem; }
  .bz-pick__lead{ grid-template-columns:1fr; gap:.8rem; }
  .bz-pick-big{ min-height:120px; }
  .bz-pick-grid{ grid-template-columns:1fr 1fr; gap:.7rem; }
  .bz-pick-card__go{ opacity:1; transform:scale(1); } /* sin hover en táctil */
}

@media (max-width:360px){
  .bz-pick-grid{ grid-template-columns:1fr; }
  .bz-pick-card{ aspect-ratio:16/9; }
}

/* Accesibilidad: respeta reduce-motion */
@media (prefers-reduced-motion:reduce){
  .bz-pick, .bz-pick__sheet, .bz-pick__step,
  .bz-pick-big, .bz-pick-card, .bz-pick-card img{ transition:none !important; animation:none !important; }
  .bz-pick-big, .bz-pick-card{ opacity:1; transform:none; }
}