/* ==========================================================================
   Lo del Bori Estudio — Design System v2
   Estilo: Minimalism & Swiss — monocromo, grilla, radio 0, sin sombras.
   Tipografía: Inter en una sola familia (Minimal Swiss).
   Contrastes verificados WCAG AA sobre lo renderizado.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Papel y tinta */
  --bone:       #EFEAE3;
  --bone-alt:   #E3DDD3;
  --ink:        #121110;
  --ink-soft:   #1A1917;

  /* Texto sobre papel */
  --on-bone:        #121110;   /* 15.76:1 */
  --on-bone-muted:  #57524A;   /*  6.47:1 */
  --rule-bone:      rgb(18 17 16 / 0.16);
  --rule-bone-soft: rgb(18 17 16 / 0.08);

  /* Texto sobre tinta */
  --on-ink:        #EFEAE3;    /* 15.76:1 */
  --on-ink-muted:  #9C958A;    /*  6.36:1 */
  --rule-ink:      rgb(239 234 227 / 0.22);
  --rule-ink-soft: rgb(239 234 227 / 0.10);

  /* Único color del sitio: el punto de estado. Sólo sobre fondo oscuro. */
  --live: #4ADE80;             /* 10.82:1 sobre --ink */

  /* Tipografía */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --t-micro:  0.6875rem;                     /* 11px, etiquetas tracked */
  --t-small:  0.8125rem;                     /* 13px */
  --t-body:   1rem;
  --t-lead:   clamp(1.05rem, 1.4vw, 1.35rem);
  --t-h3:     clamp(1.1rem, 1.6vw, 1.5rem);
  --t-h2:     clamp(2.1rem, 5.5vw, 4.25rem);
  --t-display: clamp(2.6rem, 7vw, 6rem);
  --t-mega:   clamp(3.5rem, 15vw, 13rem);

  --track-micro: 0.2em;
  --track-nav:   0.12em;
  --track-tight: -0.02em;

  /* Espaciado */
  --pad:   clamp(1.25rem, 4vw, 3.5rem);      /* margen lateral de página */
  --s-xs:  0.5rem;
  --s-sm:  1rem;
  --s-md:  1.75rem;
  --s-lg:  3rem;
  --s-xl:  5rem;
  --s-2xl: 8rem;

  --header-h: 74px;
  --dock-h:   56px;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur:      260ms;
  --dur-slow: 520ms;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* ---------- 3. UTILIDADES ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--pad); z-index: 999;
  background: var(--on-ink); color: var(--ink);
  padding: 0 var(--s-md); min-height: 44px;
  display: inline-flex; align-items: center;
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: 600;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--s-sm); }

/* Micro-etiqueta: mayúsculas con mucho tracking. El ADN del estilo. */
.micro {
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.3;
}

/* Secciones */
.panel { position: relative; padding: var(--s-2xl) var(--pad); }
.panel--bone { background: var(--bone); color: var(--on-bone); }
.panel--bone-alt { background: var(--bone-alt); color: var(--on-bone); }
.panel--ink { background: var(--ink); color: var(--on-ink); }

/* Cabecera de capítulo: número a la izquierda, estado a la derecha */
.chapter {
  position: relative;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-md);
  padding-bottom: var(--s-md);
  margin-bottom: var(--s-xl);
}
/* la línea se dibuja con ::after (ver §19.7) para poder animarla */
.chapter::after { bottom: 0; }
.chapter__right { text-align: right; color: var(--on-bone-muted); }
.panel--ink .chapter__right { color: var(--on-ink-muted); }

.panel-title {
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: var(--track-tight);
  text-wrap: balance;
  max-width: 18ch;
}
.panel-lead {
  font-size: var(--t-lead);
  color: var(--on-bone-muted);
  max-width: 46ch;
  margin-top: var(--s-md);
  text-wrap: pretty;
}
.panel--ink .panel-lead { color: var(--on-ink-muted); }

.panel-head { margin-bottom: var(--s-xl); }

/* ---------- 4. ENLACES Y BOTONES ---------- */

/* Enlace subrayado con flecha — el CTA característico del estilo */
.arrow-link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  font-weight: 600;
  padding: var(--s-xs) 0;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
  transition: gap var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.arrow-link::after {
  content: '↗';
  font-size: 1.1em; line-height: 1;
  transition: transform var(--dur) var(--ease);
}
.arrow-link:hover { gap: 1.1rem; }
.arrow-link:hover::after { transform: translate(2px, -2px); }
.arrow-link--down::after { content: '↓'; }
.arrow-link--down:hover::after { transform: translateY(3px); }

/* Botón con caja — el otro CTA del estilo */
.box-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  min-height: 50px; padding: 0 var(--s-md);
  border: 1px solid currentColor;
  background: transparent;
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.panel--bone .box-btn:hover, .box-btn--on-bone:hover { background: var(--ink); color: var(--bone); }
.panel--ink .box-btn:hover, .box-btn--on-ink:hover { background: var(--bone); color: var(--ink); }

.box-btn--solid {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.box-btn--solid:hover { background: transparent; color: var(--ink); }
/* Sobre fondo oscuro se invierte */
.panel--ink .box-btn--solid { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.panel--ink .box-btn--solid:hover { background: transparent; color: var(--bone); }
.box-btn--solid:disabled { opacity: 0.55; cursor: wait; }

.box-btn--block { width: 100%; }

/* ---------- 5. HEADER ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  min-height: var(--header-h);
  display: flex; align-items: center;
  padding: 0 var(--pad);
  color: var(--on-ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: var(--ink);
  border-bottom-color: var(--rule-ink);
}
/* Cuando el header queda sobre una sección clara, invierte */
.header.is-on-bone {
  background: var(--bone);
  color: var(--on-bone);
  border-bottom-color: var(--rule-bone);
}
.header__inner {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-md);
}

/* Logotipo apilado: "LO DEL" chico arriba, "BORI" grande abajo */
.wordmark {
  display: grid;
  line-height: 0.86;
  letter-spacing: 0.01em;
}
.wordmark__top {
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  font-weight: 500;
  text-transform: uppercase;
}
.wordmark__main {
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.nav { display: flex; align-items: center; gap: var(--s-md); }
.nav__list { display: flex; gap: var(--s-md); }
.nav__link {
  font-size: var(--t-micro);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  font-weight: 500;
  padding: var(--s-xs) 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  opacity: 0.72;
}
.nav__link:hover, .nav__link[aria-current="true"] { opacity: 1; border-bottom-color: currentColor; }

.nav-toggle {
  display: none;
  align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0 0.25rem;
  background: none; border: 0; cursor: pointer;
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: 600;
}
.nav-toggle__sign { font-size: 1.1rem; line-height: 1; transition: transform var(--dur) var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle__sign { transform: rotate(45deg); }

/* ---------- 6. HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: var(--header-h) 1fr auto;
  padding: 0 var(--pad) calc(var(--dock-h) + var(--s-lg));
  color: var(--on-ink);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; background: var(--ink); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Sin foto: fondo trabajado que igual sostiene el texto en las esquinas */
.hero__media--empty {
  background:
    linear-gradient(180deg, rgb(18 17 16 / 0.35) 0%, rgb(18 17 16 / 0.9) 100%),
    repeating-linear-gradient(115deg, #1D1B19 0 1px, transparent 1px 4px),
    radial-gradient(120% 80% at 72% 28%, #2A2724 0%, #121110 62%);
}
/* Doble velo: uno vertical y otro desde la izquierda, donde va el texto.
   Con foto de fondo el contraste depende de la imagen, así que se mide sobre
   los píxeles renderizados, no sobre el color del token. */
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgb(18 17 16 / 0.88) 0%, rgb(18 17 16 / 0.62) 42%, rgb(18 17 16 / 0.3) 100%),
    linear-gradient(180deg, rgb(18 17 16 / 0.72) 0%, rgb(18 17 16 / 0.35) 38%, rgb(18 17 16 / 0.93) 100%);
}
.hero__hint {
  position: absolute; left: var(--pad); bottom: calc(var(--dock-h) + var(--s-md));
  z-index: 2; opacity: 0.55;
}

.hero__top, .hero__bottom { position: relative; z-index: 1; }
.hero__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--s-md);
  padding-top: var(--s-md);
}
.hero__top .micro:last-child { text-align: right; opacity: 0.7; }

.hero__bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--s-lg);
  padding-bottom: var(--s-lg);
}

.hero__title {
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: var(--track-tight);
  max-width: 14ch;
  text-wrap: balance;
}
.hero__title b { font-weight: 700; }
.hero__lead {
  font-size: var(--t-lead);
  /* Más claro que el gris apagado del resto del sitio: acá el fondo es una
     foto, no un color plano, y sobre el píxel más claro medido el gris
     quedaba en 3.4:1. Con este tono da 5.8:1 y sigue leyéndose secundario. */
  color: #C4BEB4;
  max-width: 34ch;
  margin-top: var(--s-md);
}
.hero__meta { text-align: right; display: grid; gap: 0.35rem; }
.hero__meta .hero__hora { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 300; line-height: 1; }

/* ---------- 7. DECLARACIÓN (texto grande que se revela al scrollear) ---------- */
.statement {
  min-height: 90svh;
  display: grid; align-content: center;
  position: relative;
}
.statement__corner {
  position: absolute; top: var(--s-xl); left: var(--pad);
  color: var(--on-bone-muted);
}
.statement__corner--end {
  left: auto; right: var(--pad); top: auto; bottom: var(--s-xl);
  font-style: italic; text-transform: none; letter-spacing: 0.02em;
}
.statement__line {
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: var(--track-tight);
  max-width: 24ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}
.statement__line span {
  color: var(--on-bone-muted);          /* 6.47:1 incluso sin "encender" */
  transition: color var(--dur-slow) var(--ease);
}
.statement__line span.is-lit { color: var(--on-bone); }

/* ---------- 8. SERVICIOS: FILAS DE TABLA, NO TARJETAS ---------- */
.rows { border-top: 1px solid var(--rule-bone); }
.panel--ink .rows { border-top-color: var(--rule-ink); }

.row {
  /* Ahora las filas son <button>: hay que sacarles el estilo propio del botón */
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;

  display: grid;
  grid-template-columns: 4rem minmax(0, 15rem) minmax(0, 1fr) 8rem 3rem;
  align-items: center;
  gap: var(--s-md);
  padding: var(--s-md) 0;
  border-bottom: 1px solid var(--rule-bone);
  position: relative;
  transition: color var(--dur) var(--ease);
}
.panel--ink .row { border-bottom-color: var(--rule-ink); }

/* Barrido de fondo al pasar el mouse */
.row::before {
  content: ''; position: absolute;
  inset: 0 calc(var(--pad) * -1);
  background: var(--ink);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--dur) var(--ease);
  z-index: 0;
}
.row > * { position: relative; z-index: 1; }
.row:hover::before, .row:focus-within::before { transform: scaleY(1); }
.row:hover, .row:focus-within { color: var(--bone); }
.row:hover .row__desc, .row:focus-within .row__desc,
.row:hover .row__num, .row:focus-within .row__num { color: var(--on-ink-muted); }

.row__num { font-size: var(--t-micro); letter-spacing: var(--track-micro);
  color: var(--on-bone-muted); font-variant-numeric: tabular-nums; transition: color var(--dur) var(--ease); }
.row__name { font-size: var(--t-h3); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
.row__desc { font-size: var(--t-small); color: var(--on-bone-muted); transition: color var(--dur) var(--ease); }
.row__price {
  font-size: 1.25rem; font-weight: 400; font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}
.row__price small {
  display: block; font-size: var(--t-micro); letter-spacing: var(--track-micro);
  opacity: 0.6; font-weight: 500; margin-top: 2px;
}
.row__go {
  justify-self: end;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid currentColor;
  font-size: 1rem;
  opacity: 0.45;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.row:hover .row__go, .row:focus-within .row__go { opacity: 1; transform: translate(2px, -2px); }

/* Marca del servicio más pedido */
.row__tag {
  display: inline-block;
  font-size: 0.625rem; letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: 700;
  border: 1px solid currentColor;
  padding: 0.15rem 0.45rem;
  margin-top: 0.45rem;
}

.rows-note {
  margin-top: var(--s-lg);
  padding-top: var(--s-md);
  border-top: 1px solid var(--rule-bone-soft);
  font-size: var(--t-small);
  color: var(--on-bone-muted);
  max-width: 62ch;
}
.panel--ink .rows-note { border-top-color: var(--rule-ink-soft); color: var(--on-ink-muted); }

/* ---------- 9. GALERÍA ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 6 fotos = 2 filas exactas, sin huecos */
  gap: 1px;
  background: var(--rule-ink);       /* las juntas hacen de líneas */
  border: 1px solid var(--rule-ink);
}
.gallery__item {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--ink);
  overflow: hidden;
}
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.gallery__item:hover img { filter: grayscale(0); transform: scale(1.03); }

.gallery__ph {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  gap: 0.6rem; text-align: center; padding: var(--s-sm);
  background: repeating-linear-gradient(-45deg, #191715 0 10px, #121110 10px 20px);
  color: var(--on-ink-muted);
}
.gallery__ph b { font-size: 2rem; font-weight: 300; line-height: 1; opacity: 0.5; }
.gallery__ph code {
  font-size: 0.625rem; letter-spacing: 0.04em;
  border: 1px solid var(--rule-ink); padding: 0.2rem 0.45rem;
}

.gallery-foot {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--s-sm);
  margin-top: var(--s-md);
}

/* ---------- 10. OPINIONES ---------- */
.quotes { display: grid; gap: 0; border-top: 1px solid var(--rule-bone); }
.quote {
  display: grid;
  grid-template-columns: 4rem 1fr minmax(0, 16rem);
  gap: var(--s-md);
  align-items: start;
  padding: var(--s-lg) 0;
  border-bottom: 1px solid var(--rule-bone);
}
.quote__num { font-size: var(--t-micro); letter-spacing: var(--track-micro); color: var(--on-bone-muted); }
.quote__text {
  font-size: clamp(1.15rem, 2.1vw, 1.65rem);
  font-weight: 400; line-height: 1.35; letter-spacing: var(--track-tight);
  text-wrap: pretty;
}
.quote__by { text-align: right; color: var(--on-bone-muted); }
.quote__by strong { display: block; color: var(--on-bone); font-weight: 600; }

.warn {
  display: grid; gap: 0.35rem;
  border: 1px solid var(--on-bone);
  padding: var(--s-md);
  margin-bottom: var(--s-lg);
  font-size: var(--t-small);
  max-width: 72ch;
}
.warn strong { letter-spacing: var(--track-micro); text-transform: uppercase; font-size: var(--t-micro); }
.warn code { border-bottom: 1px solid var(--rule-bone); }

/* ---------- 11. RESERVA ---------- */
.booking {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-2xl);
  align-items: start;
}
.steps { border-top: 1px solid var(--rule-ink); margin-top: var(--s-lg); }
.step {
  display: grid; grid-template-columns: 4rem 1fr; gap: var(--s-md);
  padding: var(--s-md) 0;
  border-bottom: 1px solid var(--rule-ink);
}
.step__n { font-size: var(--t-micro); letter-spacing: var(--track-micro); color: var(--on-ink-muted); }
.step__t { font-size: var(--t-h3); font-weight: 500; line-height: 1.2; }
.step__d { font-size: var(--t-small); color: var(--on-ink-muted); margin-top: 0.35rem; }

.datablock + .datablock { margin-top: var(--s-xl); }
.datablock__title {
  padding-bottom: var(--s-xs);
  margin-bottom: var(--s-sm);
  border-bottom: 1px solid var(--rule-ink);
  opacity: 0.62;
}
.dataline {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-sm);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule-ink-soft);
  font-size: var(--t-small);
}
.dataline:last-child { border-bottom: 0; }
.dataline__k { color: var(--on-ink-muted); }
.dataline__v { font-variant-numeric: tabular-nums; text-align: right; }
.dataline--off .dataline__v { color: var(--on-ink-muted); }
.dataline--today { color: var(--on-ink); }
.dataline--today .dataline__k { color: var(--on-ink); font-weight: 600; }
.dataline--today .dataline__v { font-weight: 600; }
a.dataline__v:hover { border-bottom: 1px solid currentColor; }

/* ---------- 12. FOOTER ---------- */
.footer { padding: var(--s-xl) var(--pad) calc(var(--dock-h) + var(--s-lg)); }
.footer__mega {
  font-size: var(--t-mega);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.045em;
  margin-bottom: var(--s-xl);
  opacity: 0.14;
  user-select: none;
}
.footer__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-lg);
  padding-top: var(--s-md);
  border-top: 1px solid var(--rule-ink);
}
.footer__h { opacity: 0.55; margin-bottom: var(--s-sm); }
.footer__list { display: grid; gap: 0.55rem; font-size: var(--t-small); color: var(--on-ink-muted); }
.footer__list a { border-bottom: 1px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.footer__list a:hover { color: var(--on-ink); border-bottom-color: currentColor; }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-sm);
  margin-top: var(--s-xl); padding-top: var(--s-md);
  border-top: 1px solid var(--rule-ink-soft);
  color: var(--on-ink-muted);
}

/* ---------- 13. DOCK DE ESTADO (fijo abajo a la izquierda) ---------- */
.dock {
  position: fixed; z-index: 95;
  left: var(--pad);
  bottom: max(var(--s-sm), env(safe-area-inset-bottom));
  display: flex; align-items: stretch;
  min-height: var(--dock-h);
  background: var(--ink);
  border: 1px solid var(--rule-ink);
  color: var(--on-ink);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.dock.is-visible { opacity: 1; visibility: visible; transform: none; }
.dock__status {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0 var(--s-md);
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: 500;
  white-space: nowrap;
}
.dock__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--live); flex-shrink: 0;
}
.dock__dot--off { background: var(--on-ink-muted); }
.dock__cta {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0 var(--s-md);
  border-left: 1px solid var(--rule-ink);
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: 600;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dock__cta::after { content: '↗'; transition: transform var(--dur) var(--ease); }
.dock__cta:hover { background: var(--bone); color: var(--ink); }
.dock__cta:hover::after { transform: translate(2px, -2px); }

/* ---------- 14. REVELADO ---------- */
.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 15. RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .row { grid-template-columns: 3rem minmax(0, 12rem) minmax(0, 1fr) 6.5rem 44px; }
  .booking { grid-template-columns: 1fr; gap: var(--s-xl); }
  .quote { grid-template-columns: 3rem 1fr; }
  .quote__by { grid-column: 2; text-align: left; }
}

@media (max-width: 760px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  :root { --s-2xl: 4.5rem; --s-xl: 3rem; --header-h: 64px; }

  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed; inset: var(--header-h) 0 0 0;   /* pantalla completa */
    overflow-y: auto;
    justify-content: flex-start;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); color: var(--on-ink);
    border-bottom: 1px solid var(--rule-ink);
    padding: var(--s-sm) var(--pad) var(--s-md);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link {
    display: flex; align-items: center; min-height: 52px;
    font-size: var(--t-small); letter-spacing: var(--track-micro);
    opacity: 1;
    border-bottom: 1px solid var(--rule-ink-soft);
  }
  .nav .arrow-link { margin-top: var(--s-md); }

  /* El hero sigue ocupando pantalla: sin la fila elástica, el HUD de arriba
     se pegaba al título. */
  .hero { min-height: 92svh; padding-bottom: calc(var(--dock-h) + var(--s-lg)); }
  /* Las dos etiquetas de esquina no entran lado a lado a 375px */
  /* En vertical la foto se recorta más clara justo donde va el párrafo:
     el velo horizontal no sirve acá, hace falta uno vertical más fuerte. */
  .hero__media::after {
    background: linear-gradient(180deg,
      rgb(18 17 16 / 0.78) 0%,
      rgb(18 17 16 / 0.55) 30%,
      rgb(18 17 16 / 0.94) 72%,
      rgb(18 17 16 / 0.97) 100%);
  }
  .hero__top { flex-direction: column; justify-content: flex-start; gap: 0.3rem; }
  .hero__top .micro:last-child { text-align: left; }
  .hero__bottom { grid-template-columns: 1fr; align-items: start; gap: var(--s-md); }
  .hero__meta { text-align: left; justify-items: start; }
  .hero__hint { display: none; }

  /* La tabla se convierte en bloques apilados */
  .row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "num   go"
      "name  name"
      "desc  desc"
      "price price";
    gap: 0.5rem var(--s-sm);
    padding: var(--s-md) 0;
    align-items: start;
  }
  .row__num { grid-area: num; }
  .row__name { grid-area: name; }
  .row__desc { grid-area: desc; margin-bottom: 0.4rem; }
  .row__price { grid-area: price; text-align: left; display: flex; align-items: baseline; gap: 0.5rem; }
  .row__price small { margin-top: 0; }
  .row__go { grid-area: go; }
  .row::before { inset: 0 calc(var(--pad) * -1); }

  .quote { grid-template-columns: 1fr; gap: var(--s-sm); padding: var(--s-md) 0; }
  .quote__by { grid-column: 1; }

  .statement__corner, .statement__corner--end { position: static; margin-bottom: var(--s-md); }
  .statement__corner--end { margin: var(--s-md) 0 0; text-align: right; }
  .statement__line { text-align: left; max-width: none; }

  .footer__mega { font-size: clamp(3rem, 22vw, 6rem); }
  .footer__bottom { justify-content: flex-start; }

  .dock { left: var(--pad); right: var(--pad); }
  .dock__status { flex: 1; padding: 0 var(--s-sm); }
  .dock__cta { padding: 0 var(--s-sm); }
}

@media (max-width: 400px) {
  .dock__status { font-size: 0.625rem; letter-spacing: 0.12em; }
  .dock__cta { font-size: 0.625rem; letter-spacing: 0.12em; }
}

/* ---------- 16. TARGETS TÁCTILES ---------- */
@media (pointer: coarse) {
  .skip-link { min-height: 44px; }
  .wordmark { min-height: 44px; align-content: center; }
  .nav__link { min-height: 44px; }
  .arrow-link { min-height: 44px; }
  .footer__list { gap: var(--s-xs); }
  .footer__list a, .footer__list li { min-height: 44px; display: flex; align-items: center; }
  a.dataline__v { position: relative; }
  a.dataline__v::after { content: ''; position: absolute; inset: -13px -10px; }
}

/* ---------- 17. MOVIMIENTO REDUCIDO ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .dock { opacity: 1; visibility: visible; transform: none; }
  .statement__line span { color: var(--on-bone); }

  /* Efectos de §19: todos parten ya en su estado final */
  .ln__i { transform: none; }
  .ln { overflow: visible; }
  .swap__b { display: none; }
  .hero { transform: none; }
  .typer__cursor { animation: none; opacity: 1; }
  .gallery__velo { display: none; }
  .rows .row.reveal { transform: none; }
  .chapter::after { transform: scaleX(1); }
}

/* ---------- 18. IMPRESIÓN ---------- */
@media print {
  .header, .dock, .hero__hint, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .panel--ink { background: #fff; color: #000; }
}

/* ==========================================================================
   19. MOVIMIENTO — el vocabulario de animación del estilo
   Todo con CSS + un poco de JS. Sin Framer Motion ni GSAP.
   Cada efecto se apaga solo si el sistema pide "reducir movimiento" (§21).
   ========================================================================== */

/* --- 19.1 Revelado de títulos por líneas, detrás de una máscara ----------
   js/main.js parte el título en líneas reales y envuelve cada una.
   El padding/margin compensados evitan que se corten las colas de g, y, p. */
.ln {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.ln__i {
  display: block;
  transform: translateY(108%);
  transition: transform 760ms var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: transform;
}
.is-in .ln__i { transform: none; }

/* --- 19.2 Cambio de etiqueta al pasar el mouse --------------------------
   La palabra sube y sale mientras su duplicado entra desde abajo. */
.swap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  vertical-align: bottom;
}
.swap__a, .swap__b {
  display: block;
  transition: transform 420ms var(--ease);
}
.swap__b {
  position: absolute;
  left: 0; top: 0;
  transform: translateY(105%);
}
a:hover .swap__a, a:focus-visible .swap__a { transform: translateY(-105%); }
a:hover .swap__b, a:focus-visible .swap__b { transform: translateY(0); }

/* --- 19.3 El hero se aleja al scrollear --------------------------------- */
.hero {
  transform: scale(var(--hero-escala, 1));
  transform-origin: center top;
  will-change: transform;
}

/* --- 19.4 Máquina de escribir con cursor que parpadea ------------------- */
.typer { display: inline-block; }
.typer__cursor {
  display: inline-block;
  width: 0.55em;
  margin-left: 0.08em;
  animation: parpadeo 1.05s steps(1, end) infinite;
}
@keyframes parpadeo { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

/* --- 19.5 Entrada de la galería: la foto se destapa hacia arriba -------- */
.gallery__item { overflow: hidden; }
.gallery__item .gallery__velo {
  position: absolute; inset: 0; z-index: 2;
  background: var(--ink);
  transform: translateY(0);
  transition: transform 900ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.gallery__item.is-visible .gallery__velo { transform: translateY(-101%); }

/* --- 19.6 Las filas de servicio entran desde la izquierda --------------- */
.rows .row { --reveal-x: -14px; }
.rows .row.reveal { transform: translate(var(--reveal-x), 10px); }
.rows .row.reveal.is-visible { transform: none; }

/* --- 19.7 La línea del capítulo se dibuja de izquierda a derecha -------- */
.chapter { border-bottom-color: transparent; }
.chapter::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: var(--rule-bone);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease);
}
.panel--ink .chapter::after { background: var(--rule-ink); }
.chapter.is-visible::after { transform: scaleX(1); }

/* ==========================================================================
   20. RESERVA — el flujo de turnos, a pantalla completa sobre papel
   ========================================================================== */

body.rsv-abierta { overflow: hidden; }

.rsv {
  position: fixed; inset: 0; z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bone);
  color: var(--on-bone);
}
.rsv[hidden] { display: none; }

/* ---------- barra superior ---------- */
.rsv__barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-md);
  padding: var(--s-sm) var(--pad);
  border-bottom: 1px solid var(--rule-bone);
  min-height: var(--header-h);
}
.rsv__paso { font-weight: 600; }
.rsv__marca { color: var(--on-bone-muted); }
.rsv__cerrar {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0 0.25rem;
  background: none; border: 0; cursor: pointer;
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: 600;
}
.rsv__cerrar:hover { opacity: 0.6; }

/* ---------- cuerpo ---------- */
.rsv__cuerpo {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--s-xl) var(--pad) var(--s-lg);
  width: 100%; max-width: 940px; margin-inline: auto;
}
.rsv__titulo {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 400; line-height: 1.05; letter-spacing: var(--track-tight);
  margin-bottom: var(--s-md);
  text-wrap: balance;
}
.rsv__elegido { color: var(--on-bone-muted); margin-bottom: var(--s-lg); }
.rsv__nota { color: var(--on-bone-muted); margin-top: var(--s-md); }
.rsv__cargando { color: var(--on-bone-muted); padding: var(--s-lg) 0; }
.rsv__vacio { color: var(--on-bone-muted); padding: var(--s-lg) 0; font-size: var(--t-lead); }

/* ---------- pie con las acciones ---------- */
.rsv__pie {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-sm);
  padding: var(--s-sm) var(--pad);
  padding-bottom: max(var(--s-sm), env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule-bone);
  width: 100%; max-width: 940px; margin-inline: auto;
  min-height: 68px;
}
.rsv__pie:empty { display: none; }
.rsv__volver {
  background: none; border: 0; border-bottom: 1px solid currentColor;
  cursor: pointer; color: var(--on-bone-muted);
}
.arrow-link--atras::after { content: '←'; order: -1; }
.arrow-link--atras:hover::after { transform: translateX(-3px); }

/* ---------- paso 1: servicios ---------- */
.rsv__servicios { border-top: 1px solid var(--rule-bone); }
.rsv__servicio {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: var(--s-md);
  align-items: center;
  width: 100%; text-align: left;
  padding: var(--s-md) 0;
  background: none; border: 0;
  border-bottom: 1px solid var(--rule-bone);
  cursor: pointer;
  position: relative;
  color: inherit;
  transition: color var(--dur) var(--ease);
}
.rsv__servicio::before {
  content: ''; position: absolute; inset: 0 calc(var(--s-sm) * -1);
  background: var(--ink); transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--dur) var(--ease); z-index: 0;
}
.rsv__servicio > * { position: relative; z-index: 1; }
.rsv__servicio:hover::before, .rsv__servicio:focus-visible::before { transform: scaleY(1); }
.rsv__servicio:hover, .rsv__servicio:focus-visible { color: var(--bone); }
.rsv__servicio:hover .rsv__servicio-desc, .rsv__servicio:focus-visible .rsv__servicio-desc,
.rsv__servicio:hover .rsv__servicio-n, .rsv__servicio:focus-visible .rsv__servicio-n { color: var(--on-ink-muted); }

.rsv__servicio-n { color: var(--on-bone-muted); transition: color var(--dur) var(--ease); }
.rsv__servicio-txt { display: grid; gap: 0.3rem; }
.rsv__servicio-nombre { font-size: var(--t-h3); font-weight: 500; line-height: 1.2; }
.rsv__servicio-desc { font-size: var(--t-small); color: var(--on-bone-muted); transition: color var(--dur) var(--ease); }
.rsv__servicio-precio {
  font-size: 1.2rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rsv__servicio-precio small {
  display: block; font-size: var(--t-micro); letter-spacing: var(--track-micro);
  opacity: 0.65; margin-top: 2px;
}

/* ---------- paso 2: calendario ---------- */
.cal { max-width: 460px; }
.cal__barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-sm); margin-bottom: var(--s-md);
}
.cal__mes {
  font-size: var(--t-h3); text-transform: capitalize;
  letter-spacing: var(--track-tight);
}
.cal__nav {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--rule-bone);
  font-size: 1.2rem; cursor: pointer; color: inherit;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cal__nav:hover:not(:disabled) { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.cal__nav:disabled { opacity: 0.7; cursor: not-allowed; }

.cal__semana, .cal__grilla {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal__semana {
  margin-bottom: 6px;
  font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-bone-muted); text-align: center;
}
.cal__vacia { aspect-ratio: 1; }
.cal__dia {
  aspect-ratio: 1;
  min-height: 44px;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--rule-bone-soft);
  font-size: var(--t-small); font-variant-numeric: tabular-nums;
  cursor: pointer; color: inherit;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.cal__dia:hover:not(:disabled) { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.cal__dia:disabled {
  color: var(--on-bone-muted);
  opacity: 0.8;
  cursor: not-allowed;
  border-color: transparent;
  text-decoration: line-through;      /* abierto pero sin lugar */
}
.cal__dia--pasado:disabled {
  opacity: 0.7;
  text-decoration: none;              /* ya pasó: no es que esté lleno */
}
.cal__dia--hoy { border-color: var(--on-bone); font-weight: 700; }
.cal__dia--elegido { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* ---------- paso 3: horas ---------- */
.rsv__horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.rsv__hora {
  min-height: 52px;
  background: none; border: 1px solid var(--rule-bone);
  font-size: var(--t-small); font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  cursor: pointer; color: inherit;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.rsv__hora:hover, .rsv__hora.es-elegida { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* ---------- paso 4: formulario ---------- */
.rsv__resumen {
  border: 1px solid var(--on-bone);
  padding: var(--s-md);
  margin-bottom: var(--s-lg);
}
.rsv__resumen .micro { color: var(--on-bone-muted); margin-bottom: var(--s-xs); }
.rsv__resumen-l { font-size: var(--t-lead); line-height: 1.35; }

.rsv__form { display: grid; gap: var(--s-md); max-width: 520px; }
.campo { display: grid; gap: 0.4rem; }
.campo label { color: var(--on-bone-muted); }
.campo__opt { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.campo input, .campo textarea {
  width: 100%;
  padding: 0.85rem 0.9rem;
  min-height: 48px;
  background: transparent;
  border: 1px solid var(--rule-bone);
  border-radius: 0;
  font-size: 1rem;
  color: var(--on-bone);
  transition: border-color var(--dur) var(--ease);
}
.campo input:focus, .campo textarea:focus { border-color: var(--on-bone); outline-offset: 2px; }
.campo input[aria-invalid="true"] { border-color: #B3261E; border-width: 2px; }
.campo textarea { resize: vertical; min-height: 72px; }
.campo__ayuda { color: var(--on-bone-muted); }
.campo__error:empty { display: none; }
.campo__error {
  font-size: var(--t-small);
  color: #B3261E;                 /* 5.9:1 sobre el papel */
  font-weight: 500;
}
.rsv__form-error:empty { display: none; }
.rsv__form-error {
  border: 1px solid #B3261E;
  color: #B3261E;
  padding: var(--s-sm);
  font-size: var(--t-small);
  font-weight: 500;
}

/* ---------- paso 5: confirmado ---------- */
.rsv__ok {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--on-bone); font-weight: 700;
  border-bottom: 2px solid var(--on-bone);
  padding-bottom: 3px; margin-bottom: var(--s-md);
}
.rsv__ticket {
  border: 1px solid var(--on-bone);
  margin-bottom: var(--s-md);
}
.rsv__ticket-l {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-md);
  padding: 0.85rem var(--s-md);
  border-bottom: 1px solid var(--rule-bone-soft);
}
.rsv__ticket-l:last-child { border-bottom: 0; }
.rsv__ticket-l .micro { color: var(--on-bone-muted); }
.rsv__ticket-l b { font-weight: 600; text-align: right; }
.rsv__ticket-l:first-child b { font-size: 1.4rem; letter-spacing: 0.08em; }

.rsv__agenda { margin-top: var(--s-lg); padding-top: var(--s-md); border-top: 1px solid var(--rule-bone); }
.rsv__agenda .micro { color: var(--on-bone-muted); margin-bottom: var(--s-sm); }
.rsv__agenda-b { display: flex; flex-wrap: wrap; gap: var(--s-xs); }

/* ---------- error general ---------- */
.rsv__error { border: 1px solid var(--on-bone); padding: var(--s-md); max-width: 46rem; }
.rsv__error-t { font-size: var(--t-lead); margin-bottom: var(--s-xs); }
.rsv__error-d { font-size: var(--t-small); color: var(--on-bone-muted); }

/* ---------- móvil ---------- */
@media (max-width: 760px) {
  .rsv__cuerpo { padding-top: var(--s-lg); }
  .rsv__servicio { grid-template-columns: 2.2rem 1fr; }
  .rsv__servicio-precio { grid-column: 2; text-align: left; display: flex; gap: 0.6rem; align-items: baseline; }
  .rsv__servicio-precio small { margin-top: 0; }
  .cal { max-width: none; }
  .rsv__horas { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .rsv__pie { flex-direction: column-reverse; align-items: stretch; }
  .rsv__pie .box-btn { width: 100%; }
  .rsv__pie .rsv__volver { align-self: center; }
  .rsv__agenda-b .box-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .rsv__servicio::before { display: none; }
}

/* ==========================================================================
   21. PANEL — la trastienda de Bori (panel.html)
   ========================================================================== */

.panel-body { background: var(--bone); color: var(--on-bone); }

/* ---------- ingreso ---------- */
.ingreso {
  min-height: 100svh;
  display: grid; place-items: center;
  padding: var(--pad);
}
.ingreso__caja { width: 100%; max-width: 380px; display: grid; gap: var(--s-sm); }
.ingreso__caja .micro { color: var(--on-bone-muted); }
.ingreso__marca {
  font: 700 2rem/1 var(--font);
  letter-spacing: -0.02em; margin-top: -2px;
}
.ingreso__titulo {
  font-size: var(--t-h3); font-weight: 400;
  padding-bottom: var(--s-sm); margin-bottom: var(--s-sm);
  border-bottom: 1px solid var(--rule-bone);
}
.ingreso__pie { color: var(--on-bone-muted); margin-top: var(--s-xs); }
.box-btn--block { width: 100%; }

/* ---------- armazón ---------- */
.panel__barra {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-md);
  padding: var(--s-sm) var(--pad);
  background: var(--bone);
  border-bottom: 1px solid var(--rule-bone);
}
.panel__barra .micro { color: var(--on-bone-muted); }
.panel__titulo { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }
.panel__salir { background: none; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; }

.panel__tabs { display: flex; flex-wrap: wrap; gap: var(--s-xs); }
.panel__tab {
  min-height: 44px; padding: 0 var(--s-sm);
  background: none; border: 1px solid transparent;
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: 600;
  cursor: pointer; color: var(--on-bone-muted);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.panel__tab:hover { color: var(--on-bone); }
.panel__tab[aria-current="true"] { color: var(--on-bone); border-color: var(--on-bone); }

.panel__cuerpo { padding: var(--s-xl) var(--pad) var(--s-2xl); max-width: 1100px; margin-inline: auto; }
.panel__cabecera {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-md);
  padding-bottom: var(--s-sm); margin-bottom: var(--s-md);
  border-bottom: 1px solid var(--rule-bone);
}
.panel__cabecera .micro { color: var(--on-bone-muted); }
.panel__h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 400; letter-spacing: var(--track-tight); }
.panel__h3 { font-size: var(--t-h3); font-weight: 500; margin: var(--s-xl) 0 var(--s-sm); }
.panel__ayuda { font-size: var(--t-small); color: var(--on-bone-muted); max-width: 62ch; margin-bottom: var(--s-lg); }
.panel__acciones { display: flex; gap: var(--s-xs); flex-wrap: wrap; }
.panel__acciones .box-btn { min-height: 44px; padding: 0 var(--s-sm); }
.panel__acciones .box-btn[aria-current="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.panel__cargando, .panel__vacio { color: var(--on-bone-muted); padding: var(--s-lg) 0; }

/* ---------- resumen ---------- */
.panel__resumen {
  display: flex; flex-wrap: wrap; gap: var(--s-xl);
  padding: var(--s-md) 0; margin-bottom: var(--s-md);
  border-bottom: 1px solid var(--rule-bone);
}
.panel__dato { display: grid; gap: 2px; }
.panel__dato b { font-size: 1.9rem; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.panel__dato .micro { color: var(--on-bone-muted); }

/* ---------- turnos ---------- */
.panel__dia { margin-bottom: var(--s-lg); }
.panel__dia-t {
  color: var(--on-bone-muted); text-transform: uppercase;
  padding-bottom: var(--s-xs); margin-bottom: 0;
  border-bottom: 1px solid var(--on-bone);
}
.turno {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1.6fr) minmax(0, 1.2fr) auto;
  gap: var(--s-md); align-items: center;
  padding: var(--s-sm) 0;
  border-bottom: 1px solid var(--rule-bone-soft);
}
.turno--cancelado { opacity: 0.5; }
.turno--cancelado .turno__quien b { text-decoration: line-through; }
.turno__hora {
  font-size: 1.15rem; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.turno__hora small { display: block; font-size: var(--t-micro); color: var(--on-bone-muted); }
.turno__quien { display: grid; gap: 2px; min-width: 0; }
.turno__quien b { font-weight: 600; }
.turno__srv { font-size: var(--t-small); color: var(--on-bone-muted); }
.turno__notas { font-size: var(--t-small); font-style: italic; color: var(--on-bone-muted); }
.turno__contacto { display: grid; gap: 2px; font-size: var(--t-small); min-width: 0; }
.turno__contacto a { color: var(--on-bone-muted); border-bottom: 1px solid transparent; overflow-wrap: anywhere; }
.turno__contacto a:hover { color: var(--on-bone); border-bottom-color: currentColor; }
.turno__codigo { color: var(--on-bone-muted); letter-spacing: 0.1em; }
.turno__btn {
  min-height: 44px; padding: 0 var(--s-sm);
  background: none; border: 1px solid var(--rule-bone);
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; font-weight: 600;
  cursor: pointer; color: inherit; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.turno__btn:hover:not(:disabled) { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.turno__btn:disabled { opacity: 0.4; cursor: wait; }

/* ---------- formularios del panel ---------- */
.panel__form { display: grid; gap: var(--s-md); max-width: 460px; margin-bottom: var(--s-lg); }
.campo__doble { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-xs); }
.campo__doble input { width: 100%; }

.editable {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem 8rem auto auto;
  gap: var(--s-sm); align-items: end;
  padding: var(--s-sm) 0;
  border-bottom: 1px solid var(--rule-bone-soft);
}
.editable__nombre { font-weight: 500; align-self: center; }
.editable__campo { display: grid; gap: 3px; }
.editable__campo .micro { color: var(--on-bone-muted); }
.editable__campo input {
  width: 100%; min-height: 44px; padding: 0.5rem 0.6rem;
  background: transparent; border: 1px solid var(--rule-bone);
  border-radius: 0; font-size: var(--t-small); color: inherit;
  font-variant-numeric: tabular-nums;
}
.editable__campo input:focus { border-color: var(--on-bone); }
.editable__ok { font-size: var(--t-micro); color: var(--on-bone-muted); align-self: center; min-width: 7rem; }

/* ---------- móvil ---------- */
@media (max-width: 860px) {
  .turno { grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s-sm); }
  .turno__contacto { grid-column: 2; }
  .turno__acc { grid-column: 2; justify-self: start; }
  .editable { grid-template-columns: 1fr 1fr; }
  .editable__nombre { grid-column: 1 / -1; }
  .editable button { grid-column: 1 / -1; }
  .editable__ok { grid-column: 1 / -1; min-width: 0; }
  .panel__barra { gap: var(--s-sm); }
  .panel__cabecera { align-items: flex-start; }
}