/* ==========================================================================
   CulturApp — pantallas internas y modales.
   Complementa a styles.css, de donde hereda los tokens (--wine, --blue…).
   ========================================================================== */

:root {
  --blue-50:    #EFF6FF;
  --blue-100:   #DBEAFE;
  --green-100:  #DCFCE7;
  --green-600:  #16A34A;
  --emerald:    #059669;
  --purple-50:  #FAF5FF;
  --purple-100: #F3E8FF;
  --purple-600: #9333EA;
  --orange:     #F97316;
  --amber-100:  #FEF3C7;
  --amber-200:  #FDE68A;
  --amber-500:  #F59E0B;
  --crema:      #F5F3ED;
}

.icon--28 { width: 1.75rem; height: 1.75rem; }
.icon--48 { width: 3rem;    height: 3rem; }

.icono-check   { color: var(--green-600); }
.icono-estrella { color: var(--yellow-400); }

body.sin-scroll { overflow: hidden; }

.container--medio { max-width: 56rem; }

.btn--fantasma {
  padding: 1rem 1.5rem;
  background-color: var(--white);
  color: var(--blue);
  border: 2px solid var(--blue);
  box-shadow: var(--shadow-md);
}
.btn--fantasma:hover { background-color: var(--blue-50); box-shadow: var(--shadow-lg); }

.btn--vino {
  padding: 1rem;
  background-color: var(--wine);
  color: var(--white);
  border-radius: var(--r-2xl);
}
.btn--vino:disabled { opacity: .5; cursor: not-allowed; }

.nohay {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}
.nohay h2 { margin-bottom: 1rem; font-size: 1.875rem; color: var(--gray-700); }

/* Marcador para las imágenes externas que ya no responden. */
.img-rota {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  min-height: 8rem;
  padding: 1rem;
  color: var(--gray-400);
  background-color: var(--gray-100);
  text-align: center;
}
.img-rota__txt { font-size: 0.75rem; line-height: 1rem; }

/* Cuando sustituye a una portada, conserva su alto. */
.tarjeta--media .img-rota { min-height: 16rem; }
.carrusel__marco .img-rota { min-height: 400px; }

/* ======================= 1. Seleccionar museo ========================= */

.museos { background-color: var(--gray-50); min-height: 100vh; }

.museos__head {
  background-image: linear-gradient(to bottom right, var(--white), var(--gray-100));
  border-bottom: 1px solid var(--gray-200);
  padding-block: 2rem;
}

.miga {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: var(--gray-500);
}
.miga a { transition: color .2s ease; }
.miga a:hover { color: var(--wine); }
.miga span { color: var(--wine); }

.museos__titulo { margin-bottom: 2rem; }
.museos__titulo h1 { margin-bottom: 0.75rem; font-size: 2.25rem; line-height: 2.5rem; color: var(--wine); }
.museos__titulo p { font-size: 1.125rem; color: var(--gray-600); }

.buscador { position: relative; max-width: 42rem; }
.buscador__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  pointer-events: none;
}
.buscador input {
  width: 100%;
  padding: 1rem 1rem 1rem 3rem;
  background-color: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.buscador input:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgb(37 99 235 / .2);
}

.museos__cuerpo { padding-block: 3rem; }

.museos__grid { display: grid; gap: 1.5rem; }

.mcard {
  display: block;
  background-color: var(--white);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: box-shadow .3s ease, transform .3s ease;
}
.mcard:hover { box-shadow: var(--shadow-2xl); transform: translateY(-0.25rem); }

.mcard__media { position: relative; height: 12rem; overflow: hidden; }
.mcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.mcard:hover .mcard__media img { transform: scale(1.1); }

.mcard__badge {
  position: absolute;
  top: 1rem; left: 1rem;
  padding: 0.5rem 1rem;
  color: var(--white);
  letter-spacing: .05em;
  border-radius: var(--r-full);
  box-shadow: var(--shadow-lg);
}

.mcard__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}

.mcard__title { font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--gray-900); transition: color .2s ease; }
.mcard:hover .mcard__title { color: var(--wine); }

.mcard__desc {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--gray-600);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mcard__meta { display: flex; flex-direction: column; gap: 0.5rem; }
.mcard__meta li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--gray-500);
}

.mcard__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  color: var(--blue);
}
.mcard:hover .mcard__cta .icon { transform: translateX(0.25rem); }
.mcard__cta .icon { transition: transform .2s ease; }

.vacio { padding: 4rem 0; text-align: center; }
.vacio__title { font-size: 1.5rem; color: var(--gray-700); }
.vacio__text { margin-top: 0.5rem; color: var(--gray-500); }

.stats--borde { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--gray-200); }
.stat__value--sm { font-size: 1.875rem; line-height: 2.25rem; }
.stat__label--sm { font-size: 0.875rem; }

/* ========================= 2. Detalle de museo ======================== */

.detalle { background-color: var(--gray-50); }

.detalle__hero { position: relative; height: 400px; background-color: var(--gray-900); }
.detalle__hero img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }

.detalle__velo {
  position: absolute; inset: 0;
  background-image: linear-gradient(to top, rgb(0 0 0 / .8), rgb(0 0 0 / .4) 50%, transparent);
}

.detalle__atras {
  position: absolute;
  top: 1.5rem; left: 1.5rem;
  display: flex;
  padding: 0.75rem;
  color: var(--gray-700);
  background-color: rgb(255 255 255 / .9);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-lg);
  transition: background-color .2s ease;
}
.detalle__atras:hover { background-color: var(--white); }

.detalle__hero-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 0; }

.detalle__badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  color: var(--white);
  letter-spacing: .05em;
  background-color: rgb(255 255 255 / .2);
  backdrop-filter: blur(4px);
  border-radius: var(--r-full);
}

.detalle__title { margin-bottom: 0.75rem; font-size: 3rem; line-height: 1; color: var(--white); }

.detalle__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: rgb(255 255 255 / .9);
}
.detalle__rating, .detalle__lugar { display: flex; align-items: center; gap: 0.25rem; }
.detalle__lugar { gap: 0.5rem; }
.detalle__nota { font-size: 1.125rem; }
.detalle__reviews, .detalle__lugar span { font-size: 0.875rem; }

.tabs {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--white);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}
.tabs__inner { display: flex; gap: 2rem; overflow-x: auto; }
.tabs__btn {
  flex-shrink: 0;
  padding-block: 1rem;
  color: var(--gray-500);
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.tabs__btn:hover { color: var(--gray-700); }
.tabs__btn.is-activa { color: var(--blue); border-bottom-color: var(--blue); }

.detalle__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  /* El original usa 3rem abajo y la barra fija tapa el final del contenido;
     aquí se deja hueco para que la barra no lo oculte. */
  padding-block: 3rem 6rem;
}

.bloque__title { margin-bottom: 1.5rem; font-size: 1.875rem; line-height: 2.25rem; color: var(--gray-900); }
.bloque__texto { font-size: 1.125rem; line-height: 1.75; color: var(--gray-700); }

.destacados { display: grid; gap: 1rem; }
.destacado {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background-color: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  color: var(--gray-700);
}
.destacado .icon { margin-top: 0.125rem; }

.datos { display: grid; gap: 1.5rem; }

.dato {
  padding: 1.5rem;
  background-color: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
.dato__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.dato__head--2 { margin-top: 1.25rem; }
.dato__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-lg);
}
.dato__icon--azul   { background-color: var(--blue-100);   color: var(--blue); }
.dato__icon--verde  { background-color: var(--green-100);  color: var(--green-600); }
.dato__icon--morado { background-color: var(--purple-100); color: var(--purple-600); }

.dato__title { font-size: 1.125rem; color: var(--gray-900); }
.dato__valor { color: var(--gray-700); }
.dato__nota  { margin-top: 0.25rem; font-size: 0.875rem; color: var(--gray-500); }
.dato__link  { display: inline-block; margin-top: 0.5rem; color: var(--blue); }
.dato__link:hover { text-decoration: underline; }

.exhibs { display: grid; gap: 1.5rem; }
.exhib {
  background-color: var(--white);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.exhib__media { height: 12rem; overflow: hidden; }
.exhib__media img { width: 100%; height: 100%; object-fit: cover; }
.exhib__body { padding: 1.5rem; }
.exhib__title { margin-bottom: 0.5rem; font-size: 1.25rem; color: var(--gray-900); }
.exhib__desc { color: var(--gray-600); }
.exhib__cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  color: var(--blue);
  /* En el original este enlace no es clicable. */
  pointer-events: none;
}

.consejos {
  padding: 1.5rem;
  background-color: var(--blue-50);
  border-radius: var(--r-xl);
}
.consejos__title { margin-bottom: 0.75rem; font-size: 1.125rem; color: var(--gray-900); }
.consejos__lista { display: flex; flex-direction: column; gap: 0.5rem; color: var(--gray-700); }
.consejos__lista li::before { content: '• '; }

.barra-reserva {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom));
  background-color: var(--white);
  border-top: 1px solid var(--gray-200);
  box-shadow: var(--shadow-lg);
}
.barra-reserva__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.barra-reserva__precio { display: none; }
.barra-reserva__desde { display: block; font-size: 0.875rem; color: var(--gray-500); }
.barra-reserva__museo { display: block; font-size: 1.125rem; color: var(--gray-900); }
.barra-reserva__acciones { display: flex; gap: 0.75rem; flex: 1; }
.barra-reserva__acciones .btn { flex: 1; }

/* La app interna del museo (portada, sala, obra, mapa) vive en css/museo.css. */

/* ============================= Modales =============================== */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgb(0 0 0 / .6);
  /* El scroll dentro del modal no debe arrastrar la página de detrás. */
  overscroll-behavior: contain;
  animation: fundido .15s ease-out;
}

@keyframes fundido { from { opacity: 0; } to { opacity: 1; } }

/* Al pasar de un paso a otro el diálogo no se reabre: solo cambia dentro. */
.overlay.sin-animar,
.overlay.sin-animar .modal { animation: none; }

.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 90vh;
  background-color: var(--crema);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
  animation: subir .18s ease-out;
}
.modal--md { max-width: 28rem; }
.modal--lg { max-width: 42rem; }
.modal--limpio { background-color: var(--white); }
.modal--crema { background-color: var(--crema); }

@keyframes subir {
  from { opacity: 0; transform: translateY(0.75rem) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  padding: 1.25rem 1.5rem;
  color: var(--white);
  background-color: var(--wine);
}
.modal__head--degradado {
  background-image: linear-gradient(to right, #8B2835, #6B1F28);
  padding-block: 1rem;
}
.modal__head-izq { display: flex; align-items: center; gap: 0.75rem; }
.modal__title { font-size: 1.25rem; }
.modal__title--serif { font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; letter-spacing: .05em; }

.modal__icono {
  display: flex;
  padding: 0.375rem;
  color: var(--white);
  border-radius: var(--r-lg);
  transition: background-color .2s ease;
}
.modal__icono:hover { background-color: rgb(255 255 255 / .2); }

.modal__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal__cuerpo--centro { text-align: center; align-items: stretch; }

.modal__h3 { font-size: 1.5rem; color: var(--gray-900); text-align: center; }
.modal__h4 { font-size: 1.125rem; color: var(--gray-900); text-align: center; }
.modal__sub { font-size: 1.125rem; color: var(--gray-900); text-align: center; }
.modal__parrafo { color: var(--gray-700); line-height: 1.6; }
.modal__parrafo--centro { text-align: center; color: var(--gray-600); }

/* ======================= Flujo de reserva ============================= */
/* Antes era una columna estrecha de 28 rem: una pantalla de móvil estirada
   en un diálogo de escritorio. Ahora va a dos columnas, con el desglose del
   pedido siempre a la vista mientras se eligen las entradas. */

.modal--reserva { max-width: 58rem; background-color: var(--white); }

.rsv { gap: 1.5rem; }

/* --- Indicador de pasos ------------------------------------------------ */
.pasos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--gray-200);
}
.pasos__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--gray-500);
}
.pasos__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.8125rem;
  background-color: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-300);
  border-radius: var(--r-full);
  font-variant-numeric: tabular-nums;
}
.pasos__item.is-actual { color: #111111; }
.pasos__item.is-actual .pasos__num {
  background-color: var(--wine);
  border-color: var(--wine);
  color: var(--white);
}
.pasos__item.is-hecho .pasos__num {
  background-color: var(--emerald);
  border-color: var(--emerald);
  color: var(--white);
}

/* --- Dos columnas ------------------------------------------------------ */
.rsv__cols { display: grid; gap: 1.5rem; }
.rsv__principal { min-width: 0; }
.rsv__lado { min-width: 0; }

.rsv__titulo {
  margin-bottom: 0.875rem;
  font-size: 1.125rem;
  color: #111111;
}

.rsv__nota {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--gray-600);
}
.rsv__nota .icon { flex-shrink: 0; margin-top: 2px; color: var(--blue); }

/* --- Franjas horarias -------------------------------------------------- */
.franjas { display: grid; gap: 0.75rem; }

.franja {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  width: 100%;
  padding: 1rem 3rem 1rem 1.125rem;
  min-height: 4.5rem;
  text-align: left;
  background-color: var(--white);
  border: 2px solid var(--gray-500);   /* 3:1, ver preferencias.css */
  border-radius: var(--r-lg);
  transition: border-color .15s ease, background-color .15s ease;
}
.franja:hover { border-color: #111111; }
.franja.is-elegida { border-color: var(--wine); background-color: #FCF7F7; }

.franja__dia { font-size: 1.0625rem; color: #111111; }
.franja__hora { font-size: 0.9375rem; color: var(--gray-600); font-variant-numeric: tabular-nums; }

.franja__marca {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--white);
  background-color: var(--wine);
  border-radius: var(--r-full);
  opacity: 0;
}
.franja.is-elegida .franja__marca { opacity: 1; }

/* --- Lista de entradas con contador ------------------------------------ */
.entradas { display: flex; flex-direction: column; }

/* En estrecho el nombre se quedaba en 71 px y partía "Niños 3-8 años":
   va arriba en su propia fila, y debajo el contador con el subtotal. */
.entrada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--gray-200);
}
.entrada:first-child { border-top: 1px solid var(--gray-200); }
.entrada__id { grid-column: 1 / -1; }

.entrada__id { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.entrada__tipo { color: #111111; }
.entrada__precio { font-size: 0.8125rem; color: var(--gray-600); }

.entrada__linea {
  min-width: 4rem;
  text-align: right;
  color: #111111;
  font-variant-numeric: tabular-nums;
}

.paso-cant { display: flex; align-items: center; gap: 0.5rem; }
.paso-cant__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;      /* 44 px: mínimo táctil */
  height: 2.75rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--wine);
  background-color: var(--white);
  border: 2px solid var(--wine);
  border-radius: var(--r-full);
  transition: background-color .15s ease, opacity .15s ease;
}
.paso-cant__btn:hover:not(:disabled) { background-color: #FCF7F7; }
.paso-cant__btn:disabled { opacity: .35; cursor: not-allowed; }

.paso-cant__valor {
  min-width: 2rem;
  text-align: center;
  font-size: 1.0625rem;
  color: #111111;
  font-variant-numeric: tabular-nums;
}

/* --- Resumen del pedido ------------------------------------------------ */
.ticket {
  padding: 1.25rem;
  background-color: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-xl);
}
.ticket__titulo { margin-bottom: 0.75rem; font-size: 1.0625rem; color: #111111; }

.ticket__cuando {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-bottom: 0.875rem;
  margin-bottom: 0.875rem;
  border-bottom: 1px solid var(--gray-200);
}
.ticket__cuando strong { font-weight: 400; color: #111111; }
.ticket__cuando span { font-size: 0.9375rem; color: var(--gray-600); }

.ticket__vacio { font-size: 0.9375rem; color: var(--gray-600); }

.ticket__lineas { display: flex; flex-direction: column; gap: 0.5rem; }
.ticket__lineas li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9375rem;
  color: var(--gray-700);
  font-variant-numeric: tabular-nums;
}

.ticket__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--gray-300);
  color: var(--gray-700);
}
.ticket__total strong {
  font-size: 1.5rem;
  font-weight: 400;
  color: #111111;
  font-variant-numeric: tabular-nums;
}

/* --- Pie y botón principal --------------------------------------------- */
.rsv__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray-200);
}
.rsv__pie-info { font-size: 0.9375rem; color: var(--gray-600); }

.rsv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding-inline: 1.75rem;
  color: var(--white);
  background-color: var(--wine);
  border-radius: var(--r-lg);
  transition: filter .15s ease, opacity .15s ease;
}
.rsv__btn:hover:not(:disabled) { filter: brightness(.9); }
.rsv__btn:disabled { opacity: .45; cursor: not-allowed; }
.rsv__btn--block { display: flex; width: 100%; margin-top: 1rem; }

/* --- Confirmación ------------------------------------------------------ */
.exito { max-width: 30rem; margin-inline: auto; text-align: center; }
.exito__titulo { margin-bottom: 0.5rem; font-size: 1.5rem; color: #111111; }
.exito__texto { margin-bottom: 1.5rem; color: var(--gray-600); }

/* --- Datos del taller --------------------------------------------------- */
.taller__datos { display: grid; gap: 0; margin-top: 1.25rem; }
.taller__datos > div {
  display: grid;
  gap: 0.125rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--gray-200);
}
.taller__datos > div:first-child { border-top: 1px solid var(--gray-200); }
.taller__datos dt { font-size: 0.8125rem; color: var(--gray-600); }
.taller__datos dd { margin: 0; color: #111111; }

@media (min-width: 720px) {
  .rsv__cols { grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 1fr); gap: 2.5rem; }
  .franjas { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Con sitio de sobra, cada entrada cabe en una sola fila. */
  .entrada { grid-template-columns: minmax(0, 1fr) auto auto; }
  .entrada__id { grid-column: auto; }
}

/* Reserva: fechas */
.campo-fecha { display: flex; flex-direction: column; gap: 0.75rem; }
.campo-fecha__label { display: flex; align-items: center; gap: 0.5rem; color: var(--gray-700); }

.slot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem;
  text-align: left;
  background-color: var(--white);
  border: 2px solid var(--gray-300);
  border-radius: var(--r-2xl);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.slot:hover { box-shadow: var(--shadow-md); }
.slot.is-elegido { box-shadow: var(--shadow-md); }
.slot--fijo { border-color: var(--gray-200); box-shadow: var(--shadow-md); }

.slot__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--white);
  border-radius: var(--r-lg);
}
.slot__icon--gris { background-color: var(--gray-100) !important; color: var(--gray-600); }
.slot__txt { display: flex; flex-direction: column; }
.slot__hora { color: var(--gray-900); }
.slot__fecha { font-size: 0.875rem; color: var(--gray-600); }
.slot__fecha--naranja { color: #D97757; }

/* Reserva: tabla de precios */
.tabla-precios { border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow-md); }
.tabla-precios table {
  width: 100%;
  font-size: 0.875rem;
  border-collapse: collapse;
  /* Columnas de importes alineadas dígito a dígito. */
  font-variant-numeric: tabular-nums;
}
.tabla-precios thead { background-color: var(--wine); }
.tabla-precios th { padding: 0.75rem; color: var(--white); text-align: left; font-weight: 400; }
.tabla-precios th.c, .tabla-precios td.c { text-align: center; }
.tabla-precios tbody { background-color: var(--white); }
.tabla-precios td { padding: 0.75rem; color: var(--gray-700); }
.tabla-precios td:first-child { color: var(--gray-900); }
.tabla-precios tbody tr { border-bottom: 1px solid var(--gray-200); }
.tabla-precios tbody tr:last-child { border-bottom: 0; }
.gratis { color: var(--emerald); }

/* Reserva: boletería */
.contadores { display: flex; flex-direction: column; gap: 0.75rem; }
.contador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background-color: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
.contador__label { color: var(--gray-900); }
.contador__ctrl { display: flex; align-items: center; gap: 0.75rem; }
.contador__ctrl button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 1.125rem;
  color: var(--wine);
  border: 2px solid var(--wine);
  border-radius: var(--r-full);
  transition: background-color .2s ease;
}
.contador__ctrl button:hover { background-color: var(--gray-50); }
.contador__valor {
  min-width: 1.5rem;
  text-align: center;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}

.resumen {
  padding: 1rem;
  background-color: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
.resumen__fecha { color: var(--gray-700); }
.resumen__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--gray-200);
  color: var(--gray-600);
}
.resumen__total strong {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}

/* Reserva: compra exitosa */
.exito__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  margin: 0 auto;
  color: var(--white);
  background-color: var(--emerald);
  border-radius: var(--r-full);
}
.recibo {
  padding: 1rem;
  background-color: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.recibo > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--gray-200);
}
.recibo > div:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.recibo dt { color: var(--gray-600); }
.recibo dd { margin: 0; color: var(--gray-900); }
.recibo__total { font-size: 1.25rem; }

/* Próximamente */
.prox__head { padding: 2rem 1.5rem; text-align: center; }
.prox__sigla {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.25rem;
  color: var(--white);
  letter-spacing: .05em;
  margin-bottom: 0.5rem;
}
.prox__sub { font-size: 1.125rem; color: rgb(255 255 255 / .9); }
.prox__cuerpo { padding: 2rem; text-align: center; }
.prox__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  margin: 0 auto 1.5rem;
  color: var(--gray-400);
  background-color: var(--gray-100);
  border-radius: var(--r-full);
}
.prox__title { margin-bottom: 1rem; font-size: 1.875rem; color: var(--gray-900); }
.prox__texto { margin-bottom: 1.5rem; color: var(--gray-700); line-height: 1.75; }
.prox__nota {
  margin-bottom: 1.5rem;
  padding: 1rem;
  font-size: 0.875rem;
  color: var(--gray-700);
  background-image: linear-gradient(to bottom right, var(--blue-50), var(--purple-50));
  border-radius: var(--r-2xl);
}
.prox__nota strong { font-weight: 400; }

/* Accesibilidad */
.opcion {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.5rem;
  color: var(--white);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lg);
  transition: transform .2s ease, filter .2s ease;
}
.opcion:hover { transform: scale(1.02); filter: brightness(.94); }
.opcion--audio { background-image: linear-gradient(to right, #4F46E5, #6366F1); }
.opcion--lsp   { background-image: linear-gradient(to right, var(--amber-500), var(--orange)); }
.opcion__icon { display: flex; padding: 1rem; background-color: rgb(255 255 255 / .2); border-radius: var(--r-xl); }
.opcion__txt { display: flex; flex-direction: column; text-align: left; }
.opcion__title { font-size: 1.25rem; margin-bottom: 0.25rem; }
.opcion__desc { font-size: 0.875rem; color: rgb(255 255 255 / .8); }

.otras { padding-top: 0.5rem; }
.otras__title { margin-bottom: 0.75rem; color: var(--gray-700); }
.otras__lista { display: flex; flex-direction: column; gap: 0.75rem; }
.otras__lista li { display: flex; align-items: center; gap: 0.75rem; color: var(--gray-600); }
.otras__lista .icon { color: var(--blue); flex-shrink: 0; }

.audio { display: flex; flex-direction: column; gap: 1.5rem; }
.audio__disco {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8rem;
  height: 8rem;
  margin: 0 auto;
  color: var(--white);
  background-color: var(--wine);
  border-radius: var(--r-full);
}
.audio__title { font-size: 1.5rem; color: var(--gray-900); text-align: center; }
.audio__texto {
  padding: 1.5rem;
  background-color: var(--gray-50);
  border-radius: var(--r-2xl);
  color: var(--gray-700);
  line-height: 1.75;
}

.btn--audio {
  align-self: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  color: var(--white);
  background-color: var(--gray-500);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.btn--audio:hover { transform: scale(1.05); }

.audio__barra { display: flex; flex-direction: column; gap: 0.5rem; }
.audio__pista { height: 0.5rem; background-color: var(--gray-200); border-radius: var(--r-full); overflow: hidden; }
.audio__progreso { width: 40%; height: 100%; background-color: var(--blue); border-radius: var(--r-full); }
.audio__progreso.is-sonando { animation: latido 3s ease-in-out infinite; }
.audio__tiempos { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--gray-500); }

@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

.lsp { display: flex; flex-direction: column; gap: 1.5rem; }
.lsp__video {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--gray-900);
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.lsp__video img { width: 100%; height: 100%; object-fit: cover; }
.lsp__velo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(0 0 0 / .4);
}
.lsp__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  color: var(--wine);
  background-color: rgb(255 255 255 / .9);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-2xl);
}
.lsp__texto {
  padding: 1.5rem;
  background-image: linear-gradient(to bottom right, var(--amber-100), var(--amber-200));
  border: 2px solid var(--amber-500);
  border-radius: var(--r-2xl);
  color: var(--gray-800);
  line-height: 1.75;
}

/* ============================ Breakpoints ============================ */

@media (min-width: 640px) {
  .museos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .museos__titulo h1 { font-size: 2.25rem; }
  .detalle__title { font-size: 3rem; }
  .destacados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .datos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .datos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .exhibs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .barra-reserva__precio { display: block; }
  .barra-reserva__acciones { flex: none; }
  .barra-reserva__acciones .btn { flex: none; }
}

@media (min-width: 1024px) {
  .museos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* El chat flotante no debe pisar la barra fija de reserva. */
body:has(.barra-reserva) .chat-fab { bottom: 6rem; }