/* ============================================================
   ANGEL PERRUQUERS — «UN SILLÓN»  (v1.16.0)

   La otra cara. Raíl fijo a la izquierda con lo útil; una sola
   columna que fluye a la derecha, sin fondos alternos.

   Esta hoja va DESPUÉS de main.css y depende de ella: de allí
   salen los tokens (--color-*, --fs-*, --font-*), los botones
   (.btn), las filas de servicio (.service-row*), el carrusel
   (.review-carousel*) y el cartel de estado (.estado). Aquí solo
   está lo nuevo. Así no se duplican 70 KB y lo que ya estaba
   probado sigue probado.

   Se edita a mano. CSS nuevo, al final.
   ============================================================ */

:root {
  --s-ink-faint:     #8A857D;
  --s-accent-hi:     #C09C6A;   /* el acento sobre tinta: 6,80:1 */
  --s-verde:         #3F6B4A;
  --s-rail:          min(38vw, 480px);
  --s-fs-manifiesto: clamp(2.1rem, 4vw, 3.5rem);
  --s-fs-h2:         1.75rem;   /* títulos de bloque: quietos a propósito */
  --s-fs-cifra:      clamp(6rem, 12vw, 10rem);
  --s-ease:          var(--ease-out-expo);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Etiqueta pequeña en mayúsculas. Solo donde diga algo. */
.label {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--s-ink-faint);
}

/* ============================================================
   EL RAÍL
   ============================================================ */
.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--s-rail);
  border-right: 1px solid var(--color-line);
  background: var(--color-paper);
  display: flex;
  flex-direction: column;
  padding: 2.5rem 2.75rem 2.25rem;
  z-index: 10;
  overflow-y: auto;
}

.rail__logo { display: block; width: 168px; }
.rail__logo-img { width: 100%; height: auto; }

.rail__nav { margin-top: 4rem; }
.rail__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.rail__lista a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  text-decoration: none;
  color: var(--color-ink-soft);
  padding: 0.28rem 0;
  transition: color var(--duration-base) var(--s-ease), padding-left var(--duration-slow) var(--s-ease);
}
.rail__lista a:hover,
.rail__lista a.es-actual,
.rail__lista .current-menu-item > a,
.rail__lista .current_page_item > a { color: var(--color-ink); padding-left: 0.5rem; }
.rail__lista a.es-actual::before,
.rail__lista .current-menu-item > a::before,
.rail__lista .current_page_item > a::before { content: "— "; color: var(--color-accent); }
.rail__lista a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.rail__estado { margin-top: auto; padding-top: 2rem; }

/* El cartel de estado viene de main.css (v1.13). Aquí va en minúsculas y
   sin tanto espaciado: en el raíl es una frase, no una etiqueta. */
.rail .estado,
.movil-barra .estado,
.menu-movil .estado,
.horario__cab .estado {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: var(--fs-small);
}

.rail__datos {
  margin: 1.1rem 0 1.75rem;
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  line-height: 1.7;
}
.rail__tel {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--color-ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.35rem;
}
.rail__tel:hover { color: var(--color-accent); }
.rail__btn { width: 100%; justify-content: center; }
.rail__nota { font-size: var(--fs-eyebrow); color: var(--s-ink-faint); margin: 0.9rem 0 0; letter-spacing: 0.02em; }

/* ============================================================
   EL PANEL
   ============================================================ */
.pane { margin-left: var(--s-rail); }
.pane__inner { max-width: 920px; padding: 0 clamp(1.5rem, 6vw, 5.5rem); }

.bloque { padding: clamp(4rem, 8vw, 7rem) 0; border-top: 1px solid var(--color-line); }
main > .bloque:first-child { border-top: none; }
.bloque__cab { margin-bottom: 2.75rem; }
.bloque__cab .label { display: block; margin-bottom: 0.9rem; }
.bloque h2 {
  font-family: var(--font-display);
  font-size: var(--s-fs-h2);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

/* Las páginas interiores (Servicios, David, Contacto…) heredan el raíl.
   Sus cabeceras llevaban un relleno superior enorme para no meterse debajo
   de la barra fija de antes; ya no hay barra. */
.pane .page-hero { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------- 1. Abrir ---------- */
.abrir { padding-top: clamp(5rem, 12vh, 8rem); }
.abrir__manifiesto {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--s-fs-manifiesto);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 1.75rem;
  max-width: 18ch;
  text-wrap: balance;
  /* Fraunces cursiva es la única cursiva auto-hospedada; que nadie la
     sintetice. */
  font-synthesis: none;
}
.abrir__sub {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-lead);
  color: var(--color-ink-soft);
  max-width: 34ch;
  margin: 0 0 3.5rem;
  line-height: 1.45;
}
.abrir__figura { margin: 0; }
.abrir__foto { aspect-ratio: 3 / 2; overflow: hidden; background: #2A2724; }
.abrir__foto img, .abrir__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.abrir__pie {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.85rem;
  font-size: var(--fs-eyebrow);
  color: var(--s-ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Variante: la foto al lado, vertical. Se elige en el panel. */
.abrir--lado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.abrir--lado .abrir__manifiesto { max-width: 12ch; }
.abrir--lado .abrir__sub { margin-bottom: 0; }
.abrir--lado .abrir__foto { aspect-ratio: 4 / 5; }

/* ---------- 2. Servicios ---------- */
/* Las filas son las .service-row de main.css: aquí solo el marco. */
.servicios__lista { border-top: 1px solid var(--color-line); }
.pane .service-row__summary { padding-block: 1.35rem; }
.service-row__destacado {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-left: 0.75em;
  vertical-align: middle;
}
/* Entre 480 y 1023 px la fila lleva cuatro cosas (nombre, duración, precio
   y el +) y las reglas de main.css le daban dos o tres columnas: el + se
   caía a otra línea. Cuatro columnas, más estrechas. */
@media (min-width: 480px) and (max-width: 1023px) {
  .pane .service-row__summary { grid-template-columns: 1fr 4.5rem 5.5rem 1.1rem; gap: 1rem; }
}
.servicios__cierre {
  margin-top: 2.75rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}
.servicios__nota { margin: 0; font-size: var(--fs-small); color: var(--color-ink-soft); max-width: 40ch; }

/* ---------- 3. David ---------- */
.david {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.david__foto { aspect-ratio: 4 / 5; overflow: hidden; background: #2A2724; }
.david__foto img, .david__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.david__nombre { font-size: 2.4rem; margin: 0 0 1.5rem; }
.david__texto p { margin: 0 0 1.25rem; color: var(--color-ink-soft); max-width: 46ch; }
.david__cita {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--color-ink);
  margin: 2rem 0 0;
  padding-left: 1.25rem;
  border-left: 1px solid var(--color-accent);
  max-width: 30ch;
  line-height: 1.4;
  font-synthesis: none;
}
.david__cita::before { content: "\201C"; }
.david__cita::after  { content: "\201D"; }

/* ---------- 4. Reseñas: la única tinta ----------
   Contrastes medidos sobre #1A1A1A: crema 15,72 · #BDB6AC 8,66 ·
   #C09C6A 6,80. Todos por encima de 4,5. */
.resenas {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
}
.resenas__cifra {
  font-family: var(--font-display);
  font-size: var(--s-fs-cifra);
  font-weight: 300;
  line-height: 0.85;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--color-paper);
}
.resenas__meta { margin: 1.25rem 0 0; font-size: var(--fs-small); color: #BDB6AC; line-height: 1.6; }
.resenas__meta b {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-accent-hi);
}
.resenas__carrusel { min-width: 0; }
.resenas .review-carousel__item { padding: 0; gap: 0; }
.resenas__cita {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.35;
  color: var(--color-paper);
  margin: 0;
  max-width: 26ch;
  font-synthesis: none;
}
.resenas__cita::before { content: "\201C"; color: var(--s-accent-hi); }
.resenas__cita::after  { content: "\201D"; color: var(--s-accent-hi); }
.resenas__quien {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(246, 243, 238, 0.18);
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-paper);
}
.resenas__quien span {
  display: block;
  margin-top: 0.25rem;
  font-weight: 400;
  font-size: var(--fs-small);
  letter-spacing: 0;
  text-transform: none;
  color: #BDB6AC;
}
/* Los puntos del carrusel (main.css los dibuja con ::before) sobre tinta. */
.resenas .review-carousel__dots { margin-top: 1.5rem; }
.resenas .review-carousel__dot::before { background: rgba(246, 243, 238, 0.25); }
.resenas .review-carousel__dot.is-active::before { background: var(--s-accent-hi); }
.resenas .review-carousel__dot:focus-visible { outline-color: var(--s-accent-hi); }

/* ---------- 5. Visita ---------- */
.mapa { display: block; aspect-ratio: 16 / 9; overflow: hidden; position: relative; text-decoration: none; }
.mapa picture, .mapa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mapa img { transition: transform var(--duration-slow) var(--s-ease); }
@media (hover: hover) { .mapa:hover img { transform: scale(1.02); } }
.mapa:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.mapa__ir {
  position: absolute; right: 1rem; bottom: 1rem;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--color-paper);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  padding: 0.7em 1em;
}
.visita {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: 2.5rem;
}
.visita__col .label { display: block; margin-bottom: 0.9rem; }
.visita__direccion { font-style: normal; line-height: 1.75; color: var(--color-ink-soft); }
.visita__tel {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  color: var(--color-ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.visita__tel:hover { color: var(--color-accent); }
.visita__llegar {
  display: inline-block;
  margin-top: 1.25rem;
  padding-block: 0.5rem;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
}
.visita__llegar:hover { border-bottom-color: var(--color-accent); color: var(--color-accent); }

.horario__cab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.horario__cab .label { margin: 0; }
.dia {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  position: relative;
}
.dia span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dia--cerrado span:last-child { color: var(--s-ink-faint); font-style: italic; }
/* La fila de hoy la marca initEstadoApertura con .es-hoy */
.dia.es-hoy { color: var(--color-ink); font-weight: 500; }
.dia.es-hoy::before {
  content: "";
  position: absolute;
  left: -0.9rem;
  top: 0.55rem;
  bottom: 0.55rem;
  width: 2px;
  background: var(--color-accent);
}

/* ---------- 6. Cierre ---------- */
.cierre__titulo {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 1.75rem;
  letter-spacing: -0.02em;
  font-synthesis: none;
}
.cierre__linea { margin: 1.5rem 0 0; font-size: var(--fs-small); color: var(--s-ink-faint); }

/* ---------- Pie ---------- */
.pie {
  border-top: 1px solid var(--color-line);
  padding: 1.5rem 0 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.04em;
  color: var(--s-ink-faint);
}
.pie__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.pie__legal a { color: inherit; text-decoration: none; padding-block: 0.4rem; }
.pie__legal a:hover { color: var(--color-ink); }

/* ============================================================
   MÓVIL Y TABLET (< 1024): el raíl se vuelve cabecera y lo
   importante baja a una barra fija al alcance del pulgar.
   ============================================================ */
.movil-cab, .menu-movil, .movil-barra { display: none; }

@media (max-width: 1023px) {
  .rail { display: none; }
  .pane { margin-left: 0; padding-bottom: 5rem; }

  /* Cabecera fina: ~60 px. Antes 81 + una tira de menú de 73. */
  .movil-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem clamp(1.25rem, 5vw, 2rem);
    min-height: 60px;
    border-bottom: 1px solid var(--color-line);
    position: sticky;
    top: 0;
    background: var(--color-paper);
    z-index: 10;
  }
  .movil-cab__logo { display: block; width: 112px; }
  .movil-cab__logo img { width: 100%; height: auto; }

  /* El botón del menú: 44 px de zona táctil, tres rayas que main.css ya
     convierte en ✕ con aria-expanded="true". Se anula la posición absoluta
     que tenía en la cabecera antigua. */
  .movil-cab .nav-toggle {
    position: relative;
    top: auto; right: auto;
    width: 44px; height: 44px;
    margin: 0 -0.6rem 0 0;
    padding: 0;
    background: none;
    border: 0;
    display: grid;
    place-content: center;
    gap: 5px;
    cursor: pointer;
  }
  .movil-cab .nav-toggle span {
    display: block;
    width: 22px; height: 1.5px;
    background: var(--color-ink);
    transition: transform var(--duration-base) var(--s-ease), opacity var(--duration-base) var(--s-ease);
  }
  .movil-cab .nav-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

  /* El menú a pantalla completa: es el raíl, invocado. */
  .menu-movil {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: var(--color-paper);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--s-ease);
    overflow-y: auto;
  }
  .menu-movil.is-open { opacity: 1; pointer-events: auto; }
  .menu-movil__inner {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: calc(60px + 1.5rem) clamp(1.25rem, 5vw, 2rem) 2rem;
  }
  .menu-movil__lista { list-style: none; margin: 0; padding: 0; }
  .menu-movil__lista a {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.25;
    text-decoration: none;
    color: var(--color-ink-soft);
    padding: 0.35rem 0;
    transform: translateY(0.4rem);
    transition: color var(--duration-base) var(--s-ease), transform var(--duration-slow) var(--s-ease);
  }
  .menu-movil.is-open .menu-movil__lista a { transform: translateY(0); }
  .menu-movil__lista a.es-actual,
  .menu-movil__lista .current-menu-item > a,
  .menu-movil__lista .current_page_item > a { color: var(--color-ink); }
  .menu-movil__lista a.es-actual::before,
  .menu-movil__lista .current-menu-item > a::before,
  .menu-movil__lista .current_page_item > a::before { content: "— "; color: var(--color-accent); }
  .menu-movil__datos {
    margin-top: auto;
    padding-top: 2.5rem;
    border-top: 1px solid var(--color-line);
  }
  .menu-movil__datos .estado { display: inline-flex; margin-bottom: 1rem; }
  .menu-movil__texto {
    margin: 0 0 1.5rem;
    font-size: var(--fs-small);
    color: var(--color-ink-soft);
    line-height: 1.7;
  }
  .menu-movil__tel {
    display: block;
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--color-ink);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.35rem;
  }
  .menu-movil__btn { width: 100%; justify-content: center; }
  /* Con el menú abierto, la barra de abajo se aparta. */
  body:has(.menu-movil.is-open) .movil-barra { opacity: 0; pointer-events: none; }

  .movil-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10;
    padding: 0.7rem clamp(1.25rem, 5vw, 2rem);
    padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
    background: var(--color-paper);
    border-top: 1px solid var(--color-line);
  }
  .movil-barra .estado { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .movil-barra .btn { flex: none; padding: 0.9em 1.3em; }

  .abrir { padding-top: 3rem; }
  .abrir__manifiesto { max-width: 14ch; }
  .abrir--lado { grid-template-columns: 1fr; }
  .abrir--lado .abrir__foto { aspect-ratio: 3 / 2; }
  .abrir--lado .abrir__sub { margin-bottom: 2.5rem; }

  .david { grid-template-columns: 1fr; }
  .david__foto { max-width: 420px; }

  .resenas { grid-template-columns: 1fr; align-items: start; }
  .visita { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .pie { flex-direction: column; }
  .abrir__pie { flex-direction: column; gap: 0.25rem; font-size: 0.68rem; }
  .service-row__destacado { display: block; margin: 0.2rem 0 0; }
}

/* ============================================================
   v1.16.1 — el carrusel de reseñas recortaba la cita en móvil.
   Medido: carrusel 247 px, cada reseña 326 px — justo el
   max-width de 26ch de la cita. Un ítem flex con flex-shrink:0 y
   sin ancho coge el de su contenido, y el sobrante lo recorta el
   overflow:hidden del carrusel a media palabra ("…y relac").
   Ancho explícito y la cita nunca más ancha que su fila.
   ============================================================ */
.resenas .review-carousel__item { flex: 0 0 100%; width: 100%; max-width: 100%; box-sizing: border-box; }
.resenas__cita { max-width: min(26ch, 100%); }

/* ============================================================
   v1.17.0 — una página. Al llegar por ancla, la sección no queda
   pegada al borde (escritorio) ni debajo de la cabecera fija (móvil).
   ============================================================ */
.bloque[id] { scroll-margin-top: 1.5rem; }
@media (max-width: 1023px) { .bloque[id] { scroll-margin-top: 72px; } }