/* ==========================================================================
   BH Studio Booking — /booking/
   Reescrito desde cero. La version anterior habia crecido por acumulacion:
   69KB, 2470 lineas, 240 !important y .bh-bk-addon definido doce veces. Con un
   selector repetido doce veces nadie sabe que regla gana, y por eso las fuentes
   y los tamanos no eran coherentes de una seccion a otra.
   Aqui cada componente se define UNA vez, todo sale de la misma escala, y el
   !important se reserva para donde el tema obliga (ver "WP Gotcha" en
   CLAUDE.md: el tema pisa #main p y #main h1-h4 con !important).
   Copia de la hoja vieja en /tmp/booking-viejo.css.
   ========================================================================== */

.bh-bk {
  /* Color: heredado del sitio, con respaldo por si el shell no carga. */
  --c-accent:   var(--bh-accent, #22B6FF);
  --c-accent-2: var(--bh-accent-hi, #7FD0FF);
  --c-warn:     #fb7185;
  --c-ok:       #7CE38B;
  --c-admin:    #ffd60a;
  --c-ink:      var(--bh-text, #F0EDE8);
  --c-soft:     rgba(240, 237, 232, .62);
  --c-mute:     rgba(240, 237, 232, .40);
  --c-line:     var(--bh-border, rgba(255, 255, 255, .09));
  --c-card:     var(--bh-card, rgba(255, 255, 255, .03));
  --c-deep:     #0b0b0f;

  /* Tipografia: tres familias con un papel cada una, y nada mas. */
  --f-display: 'Syne', 'Sora', system-ui, sans-serif;
  --f-text:    'Manrope', system-ui, sans-serif;
  --f-mono:    'DM Mono', ui-monospace, monospace;

  /* Escala de texto: seis pasos. Si algo no encaja en uno, encaja en el vecino. */
  --t-hero:  clamp(25px, 4.2vw, 38px);
  --t-h2:    clamp(19px, 2.4vw, 25px);
  --t-h3:    15px;
  --t-body:  13px;
  --t-small: 11.5px;
  --t-micro: 10px;

  /* Espacio: cinco pasos. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 14px;  --s-4: 22px;  --s-5: 34px;

  /* Radios: tres. */
  --r-s: 9px;  --r-m: 14px;  --r-l: 18px;

  max-width: 1120px;
  margin: 0 auto;
  padding: var(--s-4) 18px 56px;
  font-family: var(--f-text);
  color: var(--c-ink);
  overflow-x: clip;
}

.bh-bk, .bh-bk *, .bh-bk *::before, .bh-bk *::after { box-sizing: border-box; }

/* ── Cabecera ───────────────────────────────────────────────────────────── */

.bh-bk__head { margin-bottom: var(--s-3); }

#main .bh-bk__title, .bh-bk__title {
  margin: 0 0 var(--s-1) !important;
  font: 800 var(--t-hero)/1.05 var(--f-display) !important;
  letter-spacing: -.03em !important;
  color: var(--c-ink) !important;
}

#main .bh-bk__sub, .bh-bk__sub {
  margin: 0 !important;
  max-width: 58ch !important;
  font: 500 var(--t-body)/1.5 var(--f-text) !important;
  color: var(--c-soft) !important;
}

/* ── Cabecera de seccion ────────────────────────────────────────────────── */

.bh-bk-sec { margin: 0 0 var(--s-5); }
.bh-bk-sec__head { margin-bottom: var(--s-3); }
/* El tema le pone fondo a todo <header> (el de la barra del sitio): encima de
   cada titulo de seccion salia una franja gris que no era de esta pagina. */
#main .bh-bk-sec__head, .bh-bk-sec__head, #main .bh-bk__head, .bh-bk__head { background: none !important; }

#main .bh-bk-sec__eyebrow, .bh-bk-sec__eyebrow {
  margin: 0 0 var(--s-1) !important;
  font: 700 var(--t-micro)/1 var(--f-mono) !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--c-accent) !important;
}

#main .bh-bk-sec__title, .bh-bk-sec__title {
  margin: 0 !important;
  font: 800 var(--t-h2)/1.1 var(--f-display) !important;
  letter-spacing: -.02em !important;
  color: var(--c-ink) !important;
}

/* Titulo de paso: la etiqueta pequena del formulario. */
#main .bh-bk__steptitle, .bh-bk__steptitle {
  margin: 0 0 var(--s-2) !important;
  font: 700 var(--t-micro)/1 var(--f-mono) !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--c-mute) !important;
}

#main .bh-bk__steptitle .bh-bk__hint, .bh-bk__steptitle .bh-bk__hint {
  margin-left: var(--s-2) !important;
  font: 500 var(--t-small)/1 var(--f-text) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--c-mute) !important;
}

.bh-bk__step { margin-bottom: var(--s-4); }

/* ── Avisos ─────────────────────────────────────────────────────────────── */

#main .bh-bk__empty, .bh-bk__empty {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
  margin: 0 0 var(--s-3) !important;
  padding: var(--s-3) 16px !important;
  background: var(--c-card) !important;
  border: 1px dashed var(--c-line) !important;
  border-radius: var(--r-m) !important;
  font: 500 var(--t-body)/1.5 var(--f-text) !important;
  color: var(--c-soft) !important;
  text-align: left !important;
}

#main .bh-bk__empty-t, .bh-bk__empty-t { font-weight: 700 !important; color: var(--c-ink) !important; }
#main .bh-bk__empty-d, .bh-bk__empty-d { max-width: 62ch !important; margin: 0 !important; }
.bh-bk__empty-link, .bh-bk__empty-btn { color: var(--c-accent-2); text-decoration: none; font-weight: 600; font-size: var(--t-small); }
.bh-bk__empty-link:hover, .bh-bk__empty-btn:hover { text-decoration: underline; }

.bh-bk-closed { display: block; margin: 0 0 var(--s-3); }
.bh-bk-closed__t { margin-right: var(--s-1); font-weight: 700; color: var(--c-warn); }
.bh-bk-closed__d { font-size: var(--t-body); color: var(--c-soft); }

.bh-bk-deal {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2);
  margin: 0 0 var(--s-3); padding: 12px 16px;
  background: rgba(34, 182, 255, .08); border: 1px solid rgba(34, 182, 255, .26); border-radius: var(--r-m);
}
.bh-bk-deal__t { font: 700 var(--t-body)/1.3 var(--f-display); color: var(--c-accent); }
.bh-bk-deal__d { font: 500 var(--t-small)/1.45 var(--f-text); color: var(--c-soft); }

/* ── Franja de servicios ────────────────────────────────────────────────── */

.bh-bk-amen {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin: 0 0 var(--s-4) !important; padding: 0; list-style: none;
}

#main .bh-bk-amen li, .bh-bk-amen li {
  display: flex; align-items: center; gap: 7px;
  margin: 0 !important; padding: 7px 12px !important;
  background: var(--c-card) !important; border: 1px solid var(--c-line) !important; border-radius: 999px !important;
  font: 600 var(--t-small)/1.3 var(--f-text) !important; color: var(--c-soft) !important;
}

.bh-bk-amen svg { width: 16px; height: 16px; flex: none; color: var(--c-accent); }

/* ── Carrusel ───────────────────────────────────────────────────────────── */

.bh-bk-gal { margin-bottom: var(--s-4); }

.bh-bk-gal__stage {
  /* 2:1. Era 12:5 para que el precio entrase en la primera pantalla, pero desde
     que las sedes van entre el carrusel y la ficha ya no entra de ninguna forma,
     y 12:5 dejaba los planos verticales en una franja de 450px de alto. Se
     limita con la proporcion y no con max-height, que al recortar el alto
     encogeria tambien el ancho. */
  position: relative; aspect-ratio: 2 / 1; overflow: hidden;
  border: 1px solid var(--c-line); border-radius: var(--r-l); background: var(--c-deep);
}

.bh-bk-gal__stage::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(90% 120% at 0% 0%, rgba(34,182,255,.15), transparent 58%);
}

.bh-bk-gal__track { position: absolute; inset: 0; }

.bh-bk-gal__slide {
  position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none;
  transform: scale(1.03);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform 7s linear;
}
.bh-bk-gal__slide.is-active { opacity: 1; transform: scale(1); pointer-events: auto; }

.bh-bk-gal__slide::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(to top, rgba(0,0,0,.76), transparent); pointer-events: none;
}

.bh-bk-gal__media { display: block; width: 100%; height: 100%; object-fit: cover; }
/* La pieza se abre en grande tocandola: el cursor lo anuncia. */
.bh-bk-gal__track { cursor: zoom-in; }

.bh-bk-gal__zoom {
  position: absolute; right: 12px; top: 12px; z-index: 4;
  width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
  background: rgba(8,8,11,.6); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15); border-radius: 50%;
  color: #fff; cursor: pointer; opacity: 0; transition: opacity .25s, background .2s;
}
.bh-bk-gal__zoom svg { width: 16px; height: 16px; }
.bh-bk-gal__stage:hover .bh-bk-gal__zoom, .bh-bk-gal__zoom:focus-visible { opacity: 1; }
.bh-bk-gal__zoom:hover { background: rgba(34,182,255,.78); }

.bh-bk-gal__cap {
  position: absolute; left: 18px; bottom: var(--s-3); z-index: 3;
  font: 600 var(--t-body)/1.3 var(--f-text); color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.55);
}

.bh-bk-gal__badge {
  position: absolute; left: 18px; top: var(--s-3); z-index: 3;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(34,182,255,.18); border: 1px solid rgba(34,182,255,.42);
  font: 700 var(--t-micro)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent);
}

.bh-bk-gal__count {
  position: absolute; right: 16px; bottom: var(--s-3); z-index: 3;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(8,8,11,.62); backdrop-filter: blur(8px);
  font: 600 var(--t-micro)/1 var(--f-mono); color: rgba(255,255,255,.82);
}

.bh-bk-gal__nav {
  position: absolute; top: 50%; margin-top: -20px; z-index: 4;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(8,8,11,.6); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15); border-radius: 50%;
  color: #fff; font-size: 21px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .25s, background .2s;
}
.bh-bk-gal__nav--prev { left: 12px; }
.bh-bk-gal__nav--next { right: 12px; }
.bh-bk-gal__stage:hover .bh-bk-gal__nav, .bh-bk-gal__nav:focus-visible { opacity: 1; }
.bh-bk-gal__nav:hover { background: rgba(34,182,255,.78); }

/* Miniaturas de 150px y no tercios del ancho: a tercios median 355px cada una y
   competian con el escenario, que es donde hay que mirar. Son navegacion. */
.bh-bk-gal__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 150px)); gap: var(--s-2); margin-top: var(--s-2); }

.bh-bk-gal__thumb {
  position: relative;
  aspect-ratio: 16 / 10; overflow: hidden; padding: 0; background: none;
  border: 1px solid var(--c-line); border-radius: var(--r-s); cursor: pointer;
  opacity: .6; transition: opacity .2s, border-color .2s, transform .2s;
}
/* Que se note cual es video antes de pulsarla. */
.bh-bk-gal__thumb--video::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; background: rgba(8,8,11,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='%23fff'/%3E%3C/svg%3E") center / 14px no-repeat;
  pointer-events: none;
}
.bh-bk-gal__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bh-bk-gal__thumb:hover { opacity: .85; transform: translateY(-2px); }
.bh-bk-gal__thumb.is-active { opacity: 1; border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }

/* ── Ficha de oferta ────────────────────────────────────────────────────── */

.bh-bk-offer {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(165px, .9fr) minmax(210px, 1fr);
  margin: 0 0 var(--s-3);
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-l); overflow: hidden;
}
.bh-bk-offer[hidden] { display: none !important; }

.bh-bk-offer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 100% at 0% 0%, rgba(34,182,255,.13), transparent 55%);
}
.bh-bk-offer > * { position: relative; padding: var(--s-4); }
.bh-bk-offer__price, .bh-bk-offer__go { border-left: 1px solid var(--c-line); }
.bh-bk-offer__go { display: flex; flex-direction: column; gap: var(--s-2); background: rgba(34,182,255,.05); }

#main .bh-bk-offer__name, .bh-bk-offer__name {
  margin: 0 0 var(--s-1) !important;
  font: 800 var(--t-h2)/1.15 var(--f-display) !important; letter-spacing: -.02em !important; color: var(--c-ink) !important;
}

#main .bh-bk-offer__sub, .bh-bk-offer__sub {
  margin: 0 0 var(--s-3) !important;
  font: 500 var(--t-small)/1.45 var(--f-text) !important; color: var(--c-soft) !important;
}

.bh-bk-offer__what::after {
  content: 'Paquete'; position: absolute; top: var(--s-4); right: var(--s-4);
  padding: 4px 10px; border-radius: 999px;
  background: rgba(34,182,255,.14); border: 1px solid rgba(34,182,255,.34);
  font: 700 var(--t-micro)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent);
}

.bh-bk-offer__inc { list-style: none; margin: 0 !important; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-1) var(--s-3); }

#main .bh-bk-offer__inc li, .bh-bk-offer__inc li {
  position: relative; margin: 0 !important; padding-left: 17px;
  font: 500 var(--t-small)/1.5 var(--f-text) !important; color: var(--c-soft) !important;
}
.bh-bk-offer__inc li::before {
  content: ''; position: absolute; left: 2px; top: 6px; width: 5px; height: 8px;
  border: solid var(--c-accent); border-width: 0 1.7px 1.7px 0; transform: rotate(45deg);
}

.bh-bk-offer__amount { display: block; font: 700 clamp(26px, 3vw, 32px)/1 var(--f-mono); letter-spacing: -.03em; color: var(--c-ink); }
.bh-bk-offer__amount s { margin-left: 6px; font-size: var(--t-h3); color: var(--c-mute); }
.bh-bk-offer__unit { display: block; margin-top: var(--s-1); font: 500 var(--t-small)/1.4 var(--f-text); color: var(--c-soft); }

.bh-bk-offer__split { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-2); margin: var(--s-3) 0 0 !important; padding-top: 12px; border-top: 1px solid var(--c-line); }
#main .bh-bk-offer__split dt, .bh-bk-offer__split dt { margin: 0 !important; font: 500 var(--t-small)/1.5 var(--f-text) !important; color: var(--c-soft) !important; }
#main .bh-bk-offer__split dd, .bh-bk-offer__split dd { margin: 0 !important; text-align: right; font: 700 var(--t-body)/1.5 var(--f-mono) !important; color: var(--c-ink) !important; }

.bh-bk-offer__terms { list-style: none; margin: 0 !important; padding: 0; display: grid; gap: var(--s-1); }
#main .bh-bk-offer__terms li, .bh-bk-offer__terms li {
  position: relative; margin: 0 !important; padding-left: 15px;
  font: 500 var(--t-small)/1.45 var(--f-text) !important; color: var(--c-soft) !important;
}
.bh-bk-offer__terms li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--c-mute); }
#main .bh-bk-offer__terms li.is-warn, .bh-bk-offer__terms li.is-warn { font-weight: 600 !important; color: var(--c-warn) !important; }
.bh-bk-offer__terms li.is-warn::before { background: var(--c-warn); }

.bh-bk-offer__go .bh-bk__cta { width: 100%; margin-top: auto; }
#main .bh-bk-offer__charge, .bh-bk-offer__charge { margin: 0 !important; text-align: center; font: 500 var(--t-micro)/1.4 var(--f-text) !important; color: var(--c-mute) !important; }
.bh-bk-offer__charge strong { color: var(--c-ink); }

/* ── Linea de cotizacion ────────────────────────────────────────────────── */

#main .bh-bk__quote, .bh-bk__quote {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2);
  margin: 0 0 var(--s-4) !important;
  font: 500 var(--t-small)/1.5 var(--f-text) !important; color: var(--c-soft) !important;
}
.bh-bk__quote strong { font-weight: 700; color: var(--c-ink); }
.bh-bk__quote-d { flex: 1 1 100%; max-width: 62ch; color: var(--c-mute); }
.bh-bk__quote-dep { padding: 2px 9px; border: 1px solid var(--c-line); border-radius: 999px; font: 700 var(--t-micro)/1.5 var(--f-mono); color: var(--c-accent); }
.bh-bk__quote a { color: var(--c-accent-2); text-decoration: none; }
.bh-bk__quote a:hover { text-decoration: underline; }

/* ── Vocal Studio / referencias ─────────────────────────────────────────── */

.bh-bk-demo {
  display: flex; align-items: center; gap: var(--s-3);
  margin: 0 0 var(--s-4); padding: var(--s-3) 18px;
  background: linear-gradient(120deg, rgba(34,182,255,.09), rgba(34,182,255,.02) 60%);
  border: 1px solid rgba(34,182,255,.22); border-radius: var(--r-m);
}
.bh-bk-demo__txt { display: flex; flex-direction: column; gap: var(--s-1); }
#main .bh-bk-demo__t, .bh-bk-demo__t { margin: 0 !important; font: 800 var(--t-h3)/1.2 var(--f-display) !important; color: var(--c-ink) !important; }
#main .bh-bk-demo__d, .bh-bk-demo__d { margin: 0 !important; max-width: 62ch !important; font: 500 var(--t-small)/1.5 var(--f-text) !important; color: var(--c-soft) !important; }

.bh-bk-demo__go, .bh-bk-ref__go {
  align-self: flex-start; display: inline-flex; align-items: center; justify-content: center;
  margin-top: var(--s-1); padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--c-accent); color: var(--c-accent); text-decoration: none;
  font: 700 var(--t-small)/1 var(--f-text);
}
.bh-bk-demo__go:hover, .bh-bk-ref__go:hover { background: var(--c-accent); color: #04121d; }

.bh-bk-ref { padding: 12px 14px; background: var(--c-card); border: 1px dashed var(--c-line); border-radius: var(--r-s); }
.bh-bk-ref[hidden] { display: none !important; }
#main .bh-bk-ref__t, .bh-bk-ref__t { margin: 0 0 var(--s-1) !important; font: 700 var(--t-body)/1.2 var(--f-display) !important; color: var(--c-ink) !important; }
#main .bh-bk-ref__d, .bh-bk-ref__d { margin: 0 !important; font: 500 var(--t-small)/1.5 var(--f-text) !important; color: var(--c-soft) !important; }

/* ── Selectores: productores y paquetes ─────────────────────────────────── */

.bh-bk__producers, .bh-bk__blocks { display: grid; gap: var(--s-2); align-items: start; }
.bh-bk__producers { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.bh-bk__blocks { grid-template-columns: repeat(auto-fit, minmax(190px, 250px)); justify-content: start; }

.bh-bk-producer, .bh-bk-block {
  display: flex; flex-direction: column; gap: var(--s-1); text-align: left;
  padding: 12px 13px; background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--r-m); color: var(--c-ink); cursor: pointer;
  transition: border-color .18s, background .18s;
}
.bh-bk-producer:hover, .bh-bk-block:hover { border-color: rgba(255,255,255,.2); }
.bh-bk-producer.is-active, .bh-bk-block.is-active { border-color: var(--c-accent); background: rgba(34,182,255,.1); }
.bh-bk-block--preview, .bh-bk-block--quote { cursor: default; border-style: dashed; }

.bh-bk-producer__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bh-bk-producer__av { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; border: 1px solid var(--c-line); }
.bh-bk-producer__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bh-bk-producer__name { font: 700 var(--t-body)/1.2 var(--f-display); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-bk-producer__credits { font: 500 var(--t-micro)/1 var(--f-mono); color: var(--c-mute); }
/* La bio se escribe en el perfil y aqui solo alargaria la tarjeta; el nombre y
   los generos bastan para elegir. */
.bh-bk-producer__bio { display: none; }
.bh-bk-producer__genres { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.bh-bk-genre { padding: 3px 8px; background: rgba(255,255,255,.05); border: 1px solid var(--c-line); border-radius: 999px; font: 600 var(--t-micro)/1.5 var(--f-mono); color: var(--c-mute); }

#main .bh-bk__profiles, .bh-bk__profiles { margin: var(--s-2) 0 0 !important; font: 500 var(--t-small)/1.6 var(--f-text) !important; color: var(--c-mute) !important; }
.bh-bk__profiles a { color: var(--c-accent-2); text-decoration: none; }

.bh-bk-block__label { font: 700 var(--t-body)/1.2 var(--f-display); }
.bh-bk-block__price { font: 700 19px/1 var(--f-mono); color: var(--c-accent); }
.bh-bk-block__was { margin-left: 6px; font: 500 var(--t-body)/1 var(--f-mono); color: var(--c-mute); }
.bh-bk-block__items { display: flex; flex-direction: column; gap: 3px; margin: 2px 0; }
.bh-bk-block__item { position: relative; padding-left: 17px; font: 500 var(--t-small)/1.4 var(--f-text); color: var(--c-soft); }
.bh-bk-block__item::before { content: ''; position: absolute; left: 2px; top: 5px; width: 5px; height: 8px; border: solid var(--c-accent); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.bh-bk-block__inc { font: 500 var(--t-small)/1.45 var(--f-text); color: var(--c-mute); }
.bh-bk-block__split { font: 500 var(--t-micro)/1.45 var(--f-text); color: var(--c-mute); }

/* ── Calendario y horas ─────────────────────────────────────────────────── */

.bh-bk-cal { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-1); scrollbar-width: thin; }
.bh-bk-cal__day {
  display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto;
  min-width: 72px; padding: 10px 12px 8px; background: var(--c-card);
  border: 1px solid var(--c-line); border-radius: var(--r-m); color: var(--c-soft); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.bh-bk-cal__day.is-active { background: rgba(34,182,255,.13); border-color: var(--c-accent); color: #fff; }
.bh-bk-cal__dow, .bh-bk-cal__mon { font: 600 var(--t-micro)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.bh-bk-cal__num { font: 700 20px/1.1 var(--f-display); color: inherit; }
.bh-bk-cal__free { margin-top: 2px; font: 500 9.5px/1 var(--f-mono); color: var(--c-accent-2); }

.bh-bk__hours { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
.bh-bk__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-2); }
.bh-bk-day { padding: 11px 12px; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-m); }
#main .bh-bk-day__date, .bh-bk-day__date { margin: 0 0 var(--s-2) !important; font: 700 var(--t-body)/1 var(--f-mono) !important; color: var(--c-ink) !important; }
.bh-bk-day__slots { display: flex; flex-wrap: wrap; gap: 6px; }

.bh-bk-slot {
  padding: 7px 11px; background: rgba(255,255,255,.05); border: 1px solid var(--c-line);
  border-radius: var(--r-s); color: var(--c-soft); font: 600 var(--t-small)/1 var(--f-mono); cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.bh-bk-slot.is-active { background: var(--c-accent); border-color: var(--c-accent); color: #04121d; }

#main .bh-bk__loading, .bh-bk__loading { grid-column: 1 / -1; margin: 0 !important; font: 500 var(--t-body)/1.5 var(--f-text) !important; color: var(--c-mute) !important; }

/* ── Sede (paso "Donde") ────────────────────────────────────────────────── */

.bh-bk__sedepick { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-2); }

.bh-bk-sedeopt {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2); text-align: left;
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-m);
  color: var(--c-ink); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.bh-bk-sedeopt:hover { border-color: rgba(255,255,255,.2); }
.bh-bk-sedeopt.is-active { border-color: var(--c-accent); background: rgba(34,182,255,.13); }
.bh-bk-sedeopt:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Cerrada se lee, no se escoge: mismo tratamiento que los chips de extras. */
.bh-bk-sedeopt--preview { cursor: default; opacity: .8; }
.bh-bk-sedeopt--preview:hover { border-color: var(--c-line); }

.bh-bk-sedeopt__img {
  width: 58px; height: 58px; flex: none; border-radius: var(--r-s);
  object-fit: cover; background: rgba(255,255,255,.06);
}
.bh-bk-sedeopt__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#main .bh-bk-sedeopt__nombre, .bh-bk-sedeopt__nombre {
  font: 700 var(--t-h3)/1.2 var(--f-display) !important; color: var(--c-ink) !important;
}
#main .bh-bk-sedeopt__dir, .bh-bk-sedeopt__dir {
  font: 500 var(--t-small)/1.35 var(--f-text) !important; color: var(--c-soft) !important;
}

/* ── Extras, beats y material ───────────────────────────────────────────── */

/* Los extras van por grupos ("En la sesion", "Despues de grabar"...). El titulo
   del grupo es una etiqueta, no un encabezado: pesa poco a proposito para que la
   jerarquia siga siendo paso > grupo > chip y no compita con el titulo del paso. */
.bh-bk__addgrp + .bh-bk__addgrp { margin-top: var(--s-3); }
#main .bh-bk__addgrp-t, .bh-bk__addgrp-t {
  margin: 0 0 var(--s-1) !important;
  font: 700 var(--t-micro)/1 var(--f-mono) !important;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--c-mute) !important;
}

.bh-bk__addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 6px; }
.bh-bk__beats  { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px; }
.bh-bk__work   { display: flex; flex-direction: column; gap: 6px; }

#main .bh-bk-addon, .bh-bk-addon {
  display: flex !important; align-items: center; justify-content: space-between; gap: 10px;
  width: auto; padding: 7px 11px !important;
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-s);
  cursor: pointer; user-select: none; transition: border-color .15s, background .15s;
}
.bh-bk-addon input[type="checkbox"], .bh-bk-beat input, .bh-bk-work input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
#main .bh-bk-addon__label, .bh-bk-addon__label { font: 600 var(--t-small)/1.35 var(--f-text) !important; color: var(--c-ink) !important; }
#main .bh-bk-addon__price, .bh-bk-addon__price { font: 700 var(--t-micro)/1 var(--f-mono) !important; color: var(--c-accent) !important; white-space: nowrap; opacity: .8; }
.bh-bk-addon:has(input:checked) { border-color: var(--c-accent); background: rgba(34,182,255,.13); }
.bh-bk-addon:has(input:checked) .bh-bk-addon__price { opacity: 1; }
.bh-bk-addon:has(input:checked) .bh-bk-addon__label::before {
  content: ''; display: inline-block; width: 5px; height: 8px; margin-right: 7px;
  border: solid var(--c-accent); border-width: 0 1.6px 1.6px 0; transform: translateY(-1px) rotate(45deg);
}
.bh-bk-addon--preview { cursor: default; opacity: .8; }

.bh-bk-beat, .bh-bk-work {
  display: flex !important; align-items: center; gap: 10px; padding: 7px 10px;
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-s); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.bh-bk-beat__img { width: 34px; height: 34px; flex: none; border-radius: 6px; object-fit: cover; background: rgba(255,255,255,.06); }
/* Beat sin portada: el hueco se mantiene para que la fila no baile. */
.bh-bk-beat__img--none { border: 1px dashed var(--c-line); background: none; }
.bh-bk-beat__meta, .bh-bk-work__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bh-bk-beat__name, .bh-bk-work__name { font: 600 var(--t-small)/1.3 var(--f-text); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-bk-beat__price, .bh-bk-work__meta small { font: 700 var(--t-micro)/1.3 var(--f-mono); color: var(--c-accent); }
.bh-bk-beat__price .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.bh-bk-beat:has(input:checked), .bh-bk-work:has(input:checked) { border-color: var(--c-accent); background: rgba(34,182,255,.13); }

.bh-bk-addon:has(input:focus-visible), .bh-bk-beat:has(input:focus-visible), .bh-bk-work:has(input:focus-visible) {
  outline: 2px solid var(--c-accent); outline-offset: 2px;
}

.bh-bk__addnotes { list-style: none; margin: var(--s-2) 0 0 !important; padding: 0; display: grid; gap: 3px; }
#main .bh-bk__addnotes li, .bh-bk__addnotes li,
#main .bh-bk__beatsnote, .bh-bk__beatsnote {
  margin: 0 !important; font: 500 var(--t-micro)/1.45 var(--f-text) !important; color: var(--c-mute) !important;
}
.bh-bk__beatsnote { margin-top: var(--s-2) !important; }
.bh-bk__addnotes strong { font-weight: 700; color: var(--c-soft); }
.bh-bk__beatsnote a { color: var(--c-accent-2); }

/* ── Formulario, total y politica ───────────────────────────────────────── */

.bh-bk-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-2); }
.bh-bk-field { display: flex; flex-direction: column; gap: 3px; }
.bh-bk-field__l { font: 600 var(--t-micro)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-mute); }

/* 16px en el input no es un desliz de escala: por debajo de eso iOS hace zoom
   al enfocar y descuadra el formulario entero. */
#main .bh-bk-field input, .bh-bk-field input {
  width: 100%; padding: 9px 11px !important;
  background: var(--c-card) !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-s) !important;
  color: var(--c-ink) !important; font: 500 16px/1.3 var(--f-text) !important;
}
.bh-bk-field input:focus { outline: none; border-color: var(--c-accent) !important; }
.bh-bk-field input::placeholder { color: var(--c-mute); }

#main .bh-bk-form__note, .bh-bk-form__note { margin: var(--s-1) 0 0 !important; font: 500 var(--t-small)/1.5 var(--f-text) !important; color: var(--c-mute) !important; }
.bh-bk-form__note a { color: var(--c-accent-2); text-decoration: none; }

.bh-bk-total { padding: 12px 14px; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-m); }
.bh-bk-total__rows { display: grid; gap: 3px; margin-bottom: var(--s-2); }
.bh-bk-total__row { display: flex; justify-content: space-between; gap: var(--s-3); font: 500 var(--t-small)/1.4 var(--f-text); color: var(--c-soft); }
.bh-bk-total__sum, .bh-bk-total__now { display: flex; justify-content: space-between; gap: var(--s-3); padding-top: 7px; border-top: 1px solid var(--c-line); }
.bh-bk-total__k { font: 700 var(--t-micro)/1.5 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-mute); }
.bh-bk-total__v { font: 700 var(--t-h3)/1.2 var(--f-mono); color: var(--c-ink); }
.bh-bk-total__v--now { font-size: 17px; color: var(--c-accent); }
#main .bh-bk-total__rest, .bh-bk-total__rest { margin: var(--s-2) 0 0 !important; font: 500 var(--t-small)/1.45 var(--f-text) !important; color: var(--c-mute) !important; }

.bh-bk-recap { list-style: none; margin: 0 0 var(--s-2) !important; padding: 12px 14px; display: grid; gap: 6px; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-m); }
#main .bh-bk-recap li, .bh-bk-recap li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin: 0 !important; font: 500 var(--t-small)/1.4 var(--f-text) !important; }
.bh-bk-recap__k { flex: none; font: 600 var(--t-micro)/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-mute); }
.bh-bk-recap__v { text-align: right; font-weight: 600; color: var(--c-ink); }

.bh-bk-policy {
  display: flex !important; align-items: flex-start; gap: 10px; margin-top: var(--s-2); padding: 11px 13px;
  background: rgba(251,113,133,.06); border: 1px solid rgba(251,113,133,.22); border-radius: var(--r-s); cursor: pointer;
}
.bh-bk-policy input { flex: none; margin: 2px 0 0; width: 15px; height: 15px; accent-color: var(--c-accent); }
.bh-bk-policy__t { font: 500 var(--t-small)/1.5 var(--f-text); color: var(--c-soft); }

/* Solicitud enviada: el final del recorrido cuando no se cobra (candado de
   estructura). Mismo idioma que la politica de arriba —fondo tenido y borde del
   mismo tono—, en verde: aqui no hay nada que aceptar, solo algo que ya paso.
   Una sola entrada suave, porque responde al boton que se acaba de pulsar. */
.bh-bk-done {
  display: grid; gap: 4px; margin: 0 0 var(--s-2); padding: 12px 14px;
  background: rgba(124,227,139,.06); border: 1px solid rgba(124,227,139,.24); border-radius: var(--r-m);
  animation: bh-bk-done-in .24s ease-out;
}
.bh-bk-done[hidden] { display: none !important; }
#main .bh-bk-done__t, .bh-bk-done__t { font: 700 var(--t-h3)/1.3 var(--f-text) !important; color: var(--c-ink) !important; }
#main .bh-bk-done__d, .bh-bk-done__d { margin: 0 !important; font: 500 var(--t-small)/1.5 var(--f-text) !important; color: var(--c-soft) !important; }
@keyframes bh-bk-done-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.bh-bk-login { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 16px; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-m); }
#main .bh-bk-login__t, .bh-bk-login__t { display: inline; font-weight: 700 !important; color: var(--c-ink) !important; }
#main .bh-bk-login__d, .bh-bk-login__d { margin: 0 !important; font: 500 var(--t-body)/1.5 var(--f-text) !important; color: var(--c-soft) !important; }
.bh-bk-login__acts { display: flex; align-items: center; gap: var(--s-3); }
.bh-bk-login__link { color: var(--c-accent-2); text-decoration: none; font: 600 var(--t-small)/1 var(--f-text); }

/* ── Botones ────────────────────────────────────────────────────────────── */

.bh-bk__cta, .bh-bk-login__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 26px; border: none; border-radius: 999px;
  background: linear-gradient(135deg, var(--c-accent), #0e7fd6);
  color: #fff; text-decoration: none;
  font: 700 var(--t-body)/1 var(--f-text); letter-spacing: .02em; cursor: pointer;
  transition: opacity .18s;
}
/* El display de arriba le gana al [hidden] del navegador: sin esto, ocultar el
   boton desde el JS (paso a paso, solicitud enviada) no lo ocultaba. */
.bh-bk__cta[hidden] { display: none !important; }
.bh-bk__cta:hover:not(:disabled), .bh-bk-login__btn:hover { opacity: .92; color: #fff; }
.bh-bk__cta:disabled { opacity: .4; cursor: not-allowed; }
.bh-bk__cta--next.is-waiting { opacity: .55; }
/* El CTA de la ficha vive en una columna flex: sin esto se estira a lo alto. */
.bh-bk__cta--open { flex: none; }

/* ── Pie pegajoso ───────────────────────────────────────────────────────── */

.bh-bk__foot {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-3); padding: 12px 0 14px;
  border-top: 1px solid var(--c-line);
  background: linear-gradient(180deg, rgba(10,10,14,0), rgba(10,10,14,.94) 34%);
}
.bh-bk__footinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#main .bh-bk__summary, .bh-bk__summary { margin: 0 !important; font: 500 var(--t-small)/1.4 var(--f-text) !important; color: var(--c-mute) !important; }
#main .bh-bk__footsum, .bh-bk__footsum { margin: 0 !important; font: 500 var(--t-small)/1.35 var(--f-text) !important; color: var(--c-soft) !important; }
.bh-bk__footsum strong { font: 700 var(--t-h3)/1.2 var(--f-mono); color: var(--c-accent); }
#main .bh-bk__error, .bh-bk__error { margin: 0 !important; font: 600 var(--t-small)/1.4 var(--f-text) !important; color: var(--c-warn) !important; }

/* ── Banda de cierre ────────────────────────────────────────────────────── */

.bh-bk-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4);
  margin: var(--s-2) 0 var(--s-4); padding: var(--s-4) 26px; border-radius: var(--r-l);
  border: 1px solid rgba(34,182,255,.22);
  background: linear-gradient(120deg, rgba(34,182,255,.12), rgba(34,182,255,.02) 60%);
}
.bh-bk-band__txt { flex: 1 1 320px; }
#main .bh-bk-band__t, .bh-bk-band__t { margin: 0 0 var(--s-1) !important; font: 800 var(--t-h2)/1.2 var(--f-display) !important; color: var(--c-ink) !important; }
#main .bh-bk-band__d, .bh-bk-band__d { margin: 0 !important; max-width: 58ch !important; font: 500 var(--t-body)/1.5 var(--f-text) !important; color: var(--c-soft) !important; }
.bh-bk-band__acts { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ── Condiciones ────────────────────────────────────────────────────────── */

.bh-bk__terms { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--c-line); }
.bh-bk__termssum {
  display: flex; align-items: baseline; gap: var(--s-2); cursor: pointer; list-style: none;
  font: 700 var(--t-micro)/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--c-mute);
}
.bh-bk__termssum::-webkit-details-marker { display: none; }
.bh-bk__termssum::after { content: '+'; margin-left: auto; font-size: var(--t-h3); }
.bh-bk__terms[open] .bh-bk__termssum::after { content: '\2013'; }
.bh-bk__termssum:hover { color: var(--c-ink); }
.bh-bk__termshint { letter-spacing: 0; text-transform: none; font: 500 var(--t-small)/1 var(--f-text); color: var(--c-mute); }

.bh-bk-terms { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: var(--s-1) var(--s-3); margin: var(--s-2) 0 0 !important; }
#main .bh-bk-terms__t, .bh-bk-terms__t { margin: 0 !important; font: 600 var(--t-small)/1.4 var(--f-text) !important; color: var(--c-soft) !important; }
#main .bh-bk-terms__d, .bh-bk-terms__d { margin: 0 !important; font: 500 var(--t-small)/1.4 var(--f-text) !important; color: var(--c-mute) !important; }

/* ── Modal ──────────────────────────────────────────────────────────────── */

/* z-index por encima de .bh-topnav (99999), medido en vivo: con menos, la nav
   se comia el boton de volver. */
.bh-bk-modal { position: fixed; inset: 0; z-index: 100000; display: flex; }
.bh-bk-modal[hidden] { display: none !important; }
.bh-bk-modal__back { position: absolute; inset: 0; background: rgba(4,4,6,.72); backdrop-filter: blur(3px); }

.bh-bk-modal__panel {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  width: min(540px, 100%); max-height: min(760px, 100%); margin: auto;
  background: var(--c-deep); border: 1px solid var(--c-line); border-radius: var(--r-l);
  overflow: hidden; font-family: var(--f-text); color: var(--c-ink);
}

.bh-bk-modal__head { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 10px; padding: 12px 14px; }
.bh-bk-modal__id { min-width: 0; text-align: center; }
.bh-bk-modal__count { display: block; font: 600 var(--t-micro)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-mute); }
#main .bh-bk-modal__title, .bh-bk-modal__title { margin: 3px 0 0 !important; font: 800 var(--t-h3)/1.2 var(--f-display) !important; color: var(--c-ink) !important; }

.bh-bk-modal__back-btn, .bh-bk-modal__x {
  width: 34px; height: 34px; display: grid; place-items: center; background: transparent;
  border: 1px solid var(--c-line); border-radius: 50%; color: var(--c-mute);
  font-size: var(--t-h3); line-height: 1; cursor: pointer; transition: color .15s, border-color .15s;
}
.bh-bk-modal__back-btn:hover, .bh-bk-modal__x:hover { color: var(--c-ink); border-color: rgba(255,255,255,.3); }
/* En el primer paso se oculta pero se reserva el hueco: si colapsa, el titulo
   salta de sitio al avanzar. */
.bh-bk-modal__back-btn[hidden] { display: grid !important; visibility: hidden; }

.bh-bk-modal__bar { height: 2px; background: rgba(255,255,255,.07); }
.bh-bk-modal__bar-fill { display: block; height: 100%; width: 0; background: var(--c-accent); transition: width .28s cubic-bezier(.22,1,.36,1); }

.bh-bk-modal__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--s-3) 16px var(--s-1); }
.bh-bk-modal__body .bh-bk__step { margin-bottom: 0; }
/* El titulo del paso ya esta en la cabecera del modal; repetirlo es ruido. */
.bh-bk-modal__body .bh-bk__steptitle { display: none !important; }

.bh-bk-modal__foot { display: flex; flex-direction: column; gap: var(--s-2); padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--c-line); background: var(--c-deep); }
.bh-bk-modal__foot[hidden] { display: none !important; }
.bh-bk-modal__foot .bh-bk__foot { position: static; margin: 0; padding: 0; border: 0; background: none; backdrop-filter: none; }
.bh-bk-modal__foot .bh-bk__cta { width: 100%; }
.bh-bk-modal__foot .bh-bk__summary { text-align: left; }

/* ── Panel de administracion ────────────────────────────────────────────── */

.bh-bk-adm {
  display: flex; flex-direction: column;
  margin: 0 0 var(--s-3); border: 1px dashed rgba(255,214,10,.34); border-radius: var(--r-m);
  background: rgba(255,214,10,.06); font: 500 var(--t-small)/1.4 var(--f-text);
}
.bh-bk-adm__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: 9px 13px; }
.bh-bk-adm__tag { padding: 4px 8px; border: 1px solid rgba(255,214,10,.3); border-radius: 999px; font: 700 9.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,214,10,.82); }
.bh-bk-adm__state { color: var(--c-soft); }
.bh-bk-adm__state.is-off { font-weight: 600; color: var(--c-admin); }
.bh-bk-adm__state.is-on  { font-weight: 600; color: var(--c-ok); }
.bh-bk-adm__toggle { margin-left: auto; padding: 6px 14px; background: rgba(255,214,10,.12); border: 1px solid rgba(255,214,10,.36); border-radius: 999px; color: var(--c-admin); font: 700 var(--t-small)/1 var(--f-text); cursor: pointer; }
.bh-bk-adm__toggle:hover { background: rgba(255,214,10,.22); }

.bh-bk-adm__panel { display: grid; gap: var(--s-3); padding: 13px; border-top: 1px dashed rgba(255,214,10,.26); }
.bh-bk-adm__panel[hidden] { display: none !important; }
.bh-bk-adm__sec { display: grid; gap: 7px; }
#main .bh-bk-adm__h, .bh-bk-adm__h { margin: 0 !important; font: 700 var(--t-micro)/1 var(--f-mono) !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: rgba(255,214,10,.72) !important; }
.bh-bk-adm__sw, .bh-bk-adm__person { display: flex !important; align-items: center; gap: var(--s-2); font: 500 var(--t-small)/1.4 var(--f-text); color: var(--c-ink); cursor: pointer; }
.bh-bk-adm__sw input, .bh-bk-adm__person input { flex: none; margin: 0; width: 15px; height: 15px; accent-color: var(--c-admin); }
.bh-bk-adm__people { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 5px; }
.bh-bk-adm__person { padding: 5px 9px; background: rgba(255,255,255,.03); border: 1px solid var(--c-line); border-radius: var(--r-s); }
.bh-bk-adm__pname { font-weight: 600; }
.bh-bk-adm__pmail { margin-left: auto; font-size: var(--t-micro); color: var(--c-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-bk-adm__dates { display: flex; flex-wrap: wrap; gap: 6px; }
.bh-bk-adm__date { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; background: rgba(255,255,255,.04); border: 1px solid var(--c-line); border-radius: 999px; font: 600 var(--t-small)/1.3 var(--f-mono); color: var(--c-ink); }
.bh-bk-adm__date em { font-style: normal; font-weight: 400; color: var(--c-mute); }
.bh-bk-adm__date button { padding: 0; background: none; border: 0; color: var(--c-mute); font-size: var(--t-h3); line-height: 1; cursor: pointer; }
.bh-bk-adm__date button:hover { color: var(--c-warn); }
.bh-bk-adm__addrow { display: flex; flex-wrap: wrap; gap: 6px; }
.bh-bk-adm__addrow input { padding: 7px 10px; background: rgba(255,255,255,.04); border: 1px solid var(--c-line); border-radius: var(--r-s); color: var(--c-ink); font: 500 var(--t-small)/1.3 var(--f-text); }
.bh-bk-adm__addrow input[type="text"] { flex: 1 1 160px; }
.bh-bk-adm__addrow button { padding: 7px 14px; background: rgba(255,214,10,.14); border: 1px solid rgba(255,214,10,.34); border-radius: var(--r-s); color: var(--c-admin); font: 700 var(--t-small)/1 var(--f-text); cursor: pointer; }
.bh-bk-adm__field { display: flex; flex-direction: column; gap: 3px; }
.bh-bk-adm__field span { font: 600 var(--t-micro)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-mute); }
.bh-bk-adm__field textarea {
  padding: 8px 10px; background: rgba(255,255,255,.04); border: 1px solid var(--c-line); border-radius: var(--r-s);
  color: var(--c-ink); font: 500 16px/1.45 var(--f-text); resize: vertical;
}
.bh-bk-adm__field textarea:focus { outline: none; border-color: var(--c-admin); }
#main .bh-bk-adm__note, .bh-bk-adm__note { margin: 0 !important; font: 500 var(--t-micro)/1.45 var(--f-text) !important; color: var(--c-mute) !important; }
.bh-bk-adm__note a { color: var(--c-accent-2); }
#main .bh-bk-adm__msg, .bh-bk-adm__msg { margin: 0 !important; font: 600 var(--t-small)/1.4 var(--f-text) !important; }
.bh-bk-adm__msg.is-ok  { color: var(--c-ok) !important; }
.bh-bk-adm__msg.is-bad { color: var(--c-warn) !important; }
.bh-bk-adm__msg[hidden] { display: none !important; }

/* ── Foco visible ───────────────────────────────────────────────────────── */

.bh-bk button:focus-visible, .bh-bk a:focus-visible,
.bh-bk input:focus-visible, .bh-bk textarea:focus-visible, .bh-bk summary:focus-visible {
  outline: 2px solid var(--c-accent); outline-offset: 2px;
}

/* ── Movil ──────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .bh-bk-offer { grid-template-columns: 1fr 1fr; }
  .bh-bk-offer__what { grid-column: 1 / -1; border-bottom: 1px solid var(--c-line); }
  .bh-bk-offer__price { border-left: 0; }
}

@media (max-width: 640px) {
  .bh-bk { padding: var(--s-3) 13px 30px; }
  .bh-bk-sec { margin-bottom: var(--s-4); }
  .bh-bk__step { margin-bottom: var(--s-3); }

  .bh-bk-gal__stage { aspect-ratio: 4 / 5; border-radius: var(--r-m); }
  .bh-bk-gal__nav { opacity: 1; width: 34px; height: 34px; margin-top: -17px; }
  /* En movil no hay hover: lo que dependa de el tiene que estar siempre. */
  .bh-bk-gal__zoom { opacity: 1; }
  .bh-bk-gal__thumbs { grid-template-columns: repeat(3, 1fr); }
  .bh-bk-gal__cap, .bh-bk-gal__badge { left: 12px; }
  .bh-bk-gal__cap { bottom: 11px; }

  .bh-bk-offer { grid-template-columns: 1fr; }
  .bh-bk-offer > * { padding: var(--s-3) 15px; }
  .bh-bk-offer__price, .bh-bk-offer__go { border-left: 0; border-top: 1px solid var(--c-line); }

  .bh-bk__addons { grid-template-columns: 1fr 1fr; }
  .bh-bk__beats, .bh-bk__blocks, .bh-bk__producers, .bh-bk-form { grid-template-columns: 1fr; }
  .bh-bk-terms { grid-template-columns: 1fr; gap: 2px; }
  .bh-bk-terms__t { margin-top: var(--s-2) !important; }

  .bh-bk-demo { flex-direction: column; align-items: flex-start; padding: var(--s-3) 15px; }
  .bh-bk-band { padding: var(--s-3) 16px; }
  .bh-bk-band__acts { width: 100%; }
  .bh-bk-band__acts > * { flex: 1 1 100%; }

  .bh-bk__foot { flex-wrap: nowrap; margin: var(--s-3) -13px 0; padding: 9px 13px calc(9px + env(safe-area-inset-bottom, 0px)); background: rgba(8,8,11,.97); backdrop-filter: blur(10px); }
  .bh-bk__cta { padding: 11px 20px; }

  .bh-bk-modal__panel { width: 100%; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; }
  .bh-bk-modal__body { padding: var(--s-3) 12px var(--s-1); }

  .bh-bk-adm__toggle { margin-left: 0; }
  .bh-bk-adm__people { grid-template-columns: 1fr; }
  .bh-bk-adm__addrow input, .bh-bk-adm__addrow button { flex: 1 1 100%; }
}

/* Objetivos tactiles de 44px donde se toca con el dedo, no donde se apunta con
   el raton: forzarlo en escritorio inflaria cada chip y desharia la densidad. */
@media (pointer: coarse) {
  .bh-bk__cta, .bh-bk-demo__go, .bh-bk-ref__go, .bh-bk-gal__nav,
  .bh-bk-modal__back-btn, .bh-bk-modal__x, .bh-bk__termssum,
  .bh-bk-addon, .bh-bk-beat, .bh-bk-work, .bh-bk-slot,
  .bh-bk-block, .bh-bk-producer, .bh-bk-cal__day, .bh-bk-adm__toggle,
  .bh-bk-policy, .bh-bk-field input { min-height: 44px; }

  .bh-bk-form__note a, .bh-bk__profiles a, .bh-bk-demo__txt a, .bh-bk__empty a, .bh-bk__quote a {
    display: inline-block; min-height: 44px; line-height: 44px; vertical-align: middle;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bh-bk *, .bh-bk *::before, .bh-bk *::after { transition: none !important; animation: none !important; }
  .bh-bk-gal__slide { transform: none !important; }
}

/* ── Sedes ──────────────────────────────────────────────────────────────────
   Dos tarjetas que dicen DONDE queda el estudio, algo que la pagina no decia
   en ningun sitio. Reusan los tokens de la hoja (--s-*, --c-*, --t-*) en vez
   de traer valores propios: asi siguen los cambios de escala sin retocarse.

   Las fotos van en una fila con scroll lateral y no en rejilla: las del movil
   son verticales y de proporciones distintas, y una rejilla las recortaria a
   todas por igual, que es justo lo que hace que un estudio real parezca un
   render de catalogo. */

.bh-bk-sedes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-3);
}

.bh-bk-sede {
  /* Columna: el texto se va abajo. Asi, con dos tarjetas de altos distintos en
     la misma fila, los dos nombres quedan a la misma altura. */
  display: flex; flex-direction: column;
  border: 1px solid var(--c-line, rgba(255,255,255,.12));
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-card, rgba(255,255,255,.03));
}
.bh-bk-sede__txt { margin-top: auto; }
/* Las tarjetas son <article>, y en produccion dos hojas les quitan borde y
   fondo con !important: la en linea del reproductor (#bh-fp-chrome-css,
   `article`) y beats-page.css (`body.bh-beats-page article`, 0-1-2 — esta
   pagina lleva esa clase en el body). Las sedes salian sin marco y el plano de
   San Juan sin rejilla. Dos clases (0-2-0) les ganan a las dos. */
.bh-bk .bh-bk-sede {
  border: 1px solid var(--c-line, rgba(255,255,255,.12)) !important;
  background: var(--c-card, rgba(255,255,255,.03)) !important;
}

/* Sede sin fotos: un plano. Rejilla fina como de mapa y el pin arriba; el
   texto, abajo, alineado con el de la tarjeta de al lado. Llena el mismo alto
   que las fotos en vez de dejar un hueco negro junto a ellas. */
.bh-bk .bh-bk-sede--plano {
  position: relative; min-height: 220px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(34,182,255,.13), transparent 60%),
    linear-gradient(var(--c-line) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--c-card, rgba(255,255,255,.03)) !important;
}
.bh-bk-sede__pin {
  position: absolute; left: var(--s-3); top: var(--s-3);
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; color: var(--c-accent);
  background: rgba(34,182,255,.12); border: 1px solid rgba(34,182,255,.35);
}
.bh-bk-sede__pin svg { width: 22px; height: 22px; }

.bh-bk-sede__fotos {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bh-bk-sede__fotos::-webkit-scrollbar { display: none; }

/* El tamano lo lleva el boton que envuelve cada foto (la abre en el visor); la
   foto solo lo llena. */
.bh-bk-sede__ver {
  flex: 0 0 auto;
  width: 44%;
  max-width: 240px;
  padding: 0; border: 0; background: #0E0E0E;
  scroll-snap-align: start;
  cursor: zoom-in;
}
.bh-bk-sede__ver:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }

.bh-bk-sede__foto {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: opacity .2s;
}
.bh-bk-sede__ver:hover .bh-bk-sede__foto { opacity: .85; }

.bh-bk-sede__txt { padding: var(--s-3); }

#main .bh-bk-sede__nombre, .bh-bk-sede__nombre {
  margin: 0 0 4px !important;
  font: 800 var(--t-h3, 1.15rem)/1.15 var(--f-display) !important;
  letter-spacing: -.01em !important;
  color: var(--c-ink) !important;
}

#main .bh-bk-sede__dir, .bh-bk-sede__dir {
  margin: 0 !important;
  font: 500 var(--t-body)/1.5 var(--f-text) !important;
  color: var(--c-soft) !important;
}

#main .bh-bk-sede__mapa, .bh-bk-sede__mapa {
  display: inline-block;
  margin-top: var(--s-2) !important;
  font: 700 var(--t-micro)/1 var(--f-mono) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--c-accent) !important;
  text-decoration: none !important;
}
#main .bh-bk-sede__mapa:hover, .bh-bk-sede__mapa:hover { text-decoration: underline !important; }

@media (max-width: 520px) {
  .bh-bk-sede__ver { width: 62%; }
  .bh-bk .bh-bk-sede--plano { min-height: 180px; }
}

/* ── Visor ──────────────────────────────────────────────────────────────────
   Pantalla completa para las fotos y los clips. La caja estructural (tamano,
   capa, contain) va en el <style> critico del template; aqui solo el acabado.
   Las reglas llevan .bh-bk-lb delante para ganarle a ese bloque, que se carga
   despues de esta hoja. */
.bh-bk-lb { color: #fff; }
.bh-bk-lb::backdrop { background: rgba(5,5,8,.94); }
.bh-bk-lb .bh-bk-lb__fig { margin: 0; display: grid; justify-items: center; gap: 12px; padding: 56px 72px 20px; }
.bh-bk-lb .bh-bk-lb__el { max-width: calc(100vw - 144px); border-radius: var(--r-m); background: #000; }
#main .bh-bk-lb__cap, .bh-bk-lb__cap { margin: 0 !important; font: 600 var(--t-body)/1.3 var(--f-text) !important; color: rgba(255,255,255,.82) !important; }
.bh-bk-lb__x, .bh-bk-lb__nav {
  position: absolute; display: grid; place-items: center; padding: 0;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
  color: #fff; line-height: 1; cursor: pointer; transition: background .2s;
}
.bh-bk-lb__x { top: 14px; right: 14px; width: 42px; height: 42px; font-size: 24px; }
.bh-bk-lb__nav { top: 50%; width: 46px; height: 46px; margin-top: -23px; font-size: 26px; }
.bh-bk-lb__nav--prev { left: 16px; }
.bh-bk-lb__nav--next { right: 16px; }
.bh-bk-lb__x:hover, .bh-bk-lb__nav:hover { background: rgba(34,182,255,.78); }
.bh-bk-lb__x:focus-visible, .bh-bk-lb__nav:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

@media (max-width: 640px) {
  .bh-bk-lb .bh-bk-lb__fig { padding: 60px 12px 76px; }
  .bh-bk-lb .bh-bk-lb__el { max-width: calc(100vw - 24px); max-height: calc(100dvh - 150px); }
  /* Abajo, al alcance del pulgar, y sin tapar la foto. */
  .bh-bk-lb__nav { top: auto; bottom: 16px; margin-top: 0; }
  .bh-bk-lb__nav--prev { left: calc(50% - 56px); }
  .bh-bk-lb__nav--next { right: calc(50% - 56px); }
}