/*
 * Piel "minisite" de la compra (bbdd/tema-compra.php): "portada y carta".
 *
 * Viste el HTML de siempre de la compra (bbdd/compra.php, render-evento.php). Lo de
 * la compra cuelga de html.mt-tema-minisite: sin esa clase (web e iframe de los
 * promotores) no aplica nada. Las piezas ms-* sin prefijo (portada, etiqueta de
 * sección, barra) también las usa la página del minisite nuevo
 * (plugins/website/ui/club/evento.php).
 *
 * Colores del minisite: --ms-accent, --ms-on-accent, --ms-bg, --ms-text.
 * El resto se deriva de ellos, así funciona con fondo oscuro o claro.
 */
html.mt-tema-minisite {
  --ms-surface: color-mix(in srgb, var(--ms-text) 6%, var(--ms-bg));
  --ms-surface-2: color-mix(in srgb, var(--ms-text) 10%, var(--ms-bg));
  --ms-line: color-mix(in srgb, var(--ms-text) 12%, transparent);
  --ms-muted: color-mix(in srgb, var(--ms-text) 60%, var(--ms-bg));
  --ms-accent-soft: color-mix(in srgb, var(--ms-accent) 20%, transparent);
  --ms-font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--ms-bg);
}

/* =====================================================================
   Piezas compartidas con la página del minisite nuevo
   ===================================================================== */

/* ---------- Portada: el cartel a todo el ancho, con el título encima ---------- */
.ms-hero {
  position: relative;
  min-height: min(92vh, 720px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ms-text, #fff);
}
.ms-hero__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--ms-cartel) center top / cover no-repeat;
}
.ms-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* El cartel se funde del todo antes del texto: el título nunca pisa el cartel */
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent 34%,
    color-mix(in srgb, var(--ms-bg, #0a0a0a) 70%, transparent) 50%,
    color-mix(in srgb, var(--ms-bg, #0a0a0a) 96%, transparent) 62%,
    var(--ms-bg, #0a0a0a) 72%);
}
.ms-hero__cartel { display: none; }
.ms-hero__in {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px 26px;
  display: flex;
  align-items: flex-end;
  gap: 40px;
}
.ms-hero__texto { min-width: 0; }
.ms-hero__kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ms-accent, #ff3b3b);
}
.ms-hero__titulo {
  margin: 10px 0 12px;
  font-size: clamp(32px, 7vw, 60px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--ms-text, #fff);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
/* Ficha de fecha tipo calendario junto al título, con el lugar debajo */
.ms-cab { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; }
.ms-fecha {
  flex: 0 0 auto;
  width: 66px;
  padding: 8px 0 9px;
  border-radius: 18px;
  text-align: center;
  line-height: 1;
  background: color-mix(in srgb, var(--ms-text, #fff) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ms-text, #fff) 14%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ms-text, #fff);
}
.ms-fecha__dia { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--ms-accent, #ff3b3b); }
.ms-fecha__num { display: block; font-size: 28px; font-weight: 800; margin: 4px 0 3px; font-variant-numeric: tabular-nums; }
.ms-fecha__mes { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; opacity: .65; }
.ms-cab__texto { min-width: 0; }
.ms-cab .ms-hero__titulo { margin: 0; font-size: clamp(26px, 4vw, 40px); line-height: 1.05; }
.ms-cab__lugar { margin: 6px 0 0; font-size: 15px; color: color-mix(in srgb, var(--ms-text, #fff) 72%, transparent); }
.ms-cab__lugar .bi { color: var(--ms-accent, #ff3b3b); margin-right: 3px; }
.ms-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ms-hero__meta li {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ms-text, #fff);
  background: color-mix(in srgb, var(--ms-text, #fff) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ms-text, #fff) 18%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* La edad, en el color del minisite */
.ms-hero__meta li:first-child {
  background: color-mix(in srgb, var(--ms-accent, #ff3b3b) 18%, transparent);
  border-color: color-mix(in srgb, var(--ms-accent, #ff3b3b) 55%, transparent);
  color: var(--ms-text, #fff);
}
@media (min-width: 900px) {
  /* En escritorio el cartel no cabe a lo ancho: fondo difuminado y cartel nítido */
  /* En escritorio la portada mide lo que su contenido: sin hueco arriba */
  .ms-hero { min-height: 0; align-items: flex-start; padding-top: 36px; }
  .ms-hero::after { background: linear-gradient(to bottom, transparent 40%, var(--ms-bg, #0a0a0a) 100%); }
  .ms-hero__fondo { filter: blur(60px) saturate(1.5); transform: scale(1.3); opacity: .55; background-position: center; }
  .ms-hero__cartel {
    display: block;
    flex: 0 0 auto;
    width: 280px;
    border-radius: 18px;
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .8);
  }
  /* El texto empieza a la altura del borde de arriba del cartel */
  .ms-hero__in { padding-bottom: 40px; align-items: flex-start; }
  .ms-hero__kicker { margin-top: 4px; }
}

/* ---------- Información en la portada: dirección, descripción corta y "Leer más" ---------- */
.ms-hero__info { margin-top: 16px; max-width: 600px; }
.ms-hero__dir { margin: 0 0 6px; font-size: 14px; color: color-mix(in srgb, var(--ms-text, #fff) 70%, transparent); }
.ms-hero__dir .bi { color: var(--ms-accent, #ff3b3b); margin-right: 4px; }
.ms-hero__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ms-text, #fff) 80%, transparent);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ms-hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; }
.ms-hero__acciones[hidden] { display: none; }
.ms-leermas {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  color: var(--ms-accent, #ff3b3b);
  cursor: pointer;
}
.ms-leermas:focus-visible { outline: 2px solid var(--ms-accent, #ff3b3b); outline-offset: 2px; }

/* ---------- Ventana de información ---------- */
.ms-modal {
  width: min(560px, calc(100% - 32px));
  max-height: 82vh;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ms-text, #fff) 12%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--ms-text, #fff) 5%, var(--ms-bg, #0a0a0a));
  color: var(--ms-text, #fff);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .8);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ms-modal::backdrop { background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ms-modal[open] { animation: ms-modal .25s ease; }
.ms-modal__in { position: relative; padding: 26px 24px 28px; max-height: 82vh; overflow-y: auto; }
.ms-modal__titulo { margin: 0 40px 14px 0; font-size: 20px; font-weight: 800; color: var(--ms-text, #fff); }
.ms-modal__cerrar {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: color-mix(in srgb, var(--ms-text, #fff) 10%, transparent);
  color: var(--ms-text, #fff);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.ms-modal__cuerpo { font-size: 15px; line-height: 1.65; color: color-mix(in srgb, var(--ms-text, #fff) 82%, transparent); }
.ms-modal__cuerpo p { margin: 0 0 12px; }
.ms-modal__cuerpo h3 { margin: 18px 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--ms-text, #fff) 55%, transparent); }
@keyframes ms-modal { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.ms-modal hr { display: none; }
.ms-modal .ms-ev__nota { margin: 12px 0 0; }
.ms-modal .ms-ev__sitio { margin: 0; font-weight: 800; color: var(--ms-text, #fff); }
.ms-modal .ms-ev__dir { margin: 0; }

/* ---------- Columna de la carta e información ---------- */
.ms-columna { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* ---------- Etiqueta de sección (ENTRADAS, RESERVADOS...) ---------- */
.ms-etiqueta,
.mt-tema-minisite .titulo h3 {
  display: block !important;
  margin: 30px 0 2px !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  color: color-mix(in srgb, var(--ms-text, #fff) 55%, transparent) !important;
}

.ms-etiqueta[hidden] { display: none !important; }

/* ---------- Barra flotante tipo isla: nº de entradas, total y botón ---------- */
.ms-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  width: min(560px, calc(100% - 24px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 12px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--ms-bg, #0a0a0a) 72%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid color-mix(in srgb, var(--ms-text, #fff) 12%, transparent);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .7);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ms-text, #fff);
  animation: ms-isla .45s cubic-bezier(.2, .9, .3, 1.2) both;
}
.ms-barra[hidden] { display: none; }
.ms-barra__n {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ms-accent, #ff3b3b);
  color: var(--ms-on-accent, #fff);
  font-weight: 800;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}
.ms-barra__total { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.ms-barra__importe { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; display: inline-block; transform-origin: left center; }
.ms-barra__sub { font-size: 12px; color: color-mix(in srgb, var(--ms-text, #fff) 60%, transparent); margin-top: 2px; }
.ms-barra__boton {
  margin-left: auto;
  flex: 0 0 auto;
  height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 18px;
  background: var(--ms-accent, #ff3b3b);
  color: var(--ms-on-accent, #fff);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .1s ease;
}
.ms-barra__boton:active:not(:disabled) { transform: scale(.97); }
.ms-barra__boton:focus-visible { outline: 2px solid var(--ms-text, #fff); outline-offset: 2px; }
.ms-barra--vacia .ms-barra__n {
  background: color-mix(in srgb, var(--ms-text, #fff) 10%, transparent);
  color: color-mix(in srgb, var(--ms-text, #fff) 55%, transparent);
  box-shadow: none;
}
.ms-barra__boton:disabled {
  background: color-mix(in srgb, var(--ms-text, #fff) 10%, transparent);
  color: color-mix(in srgb, var(--ms-text, #fff) 55%, transparent);
  cursor: default;
}
.ms-salto { animation: ms-salto .32s ease; }
@keyframes ms-isla { from { transform: translateY(140%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ms-salto { 40% { transform: scale(1.14); } }

/* =====================================================================
   Compra (solo con html.mt-tema-minisite)
   ===================================================================== */

/* ---------- Base ---------- */
.mt-tema-minisite body,
.mt-tema-minisite #layout,
.mt-tema-minisite .content,
.mt-tema-minisite .bg-white,
.mt-tema-minisite .bg-lila,
.mt-tema-minisite .pattern-gradient {
  background: transparent !important;
  color: var(--ms-text) !important;
  font-family: var(--ms-font);
}
.mt-tema-minisite body { background: var(--ms-bg) !important; overflow-x: hidden !important; }
/* Dentro del iframe del minisite nuevo no hay scroll propio: el iframe crece con
   su contenido y quien se desplaza es la página. */
html.mt-tema-minisite[data-ms-barra="padre"],
html.mt-tema-minisite[data-ms-barra="padre"] body { overflow: hidden !important; }
.mt-tema-minisite .content.py-5 { padding-top: 0 !important; padding-bottom: 0 !important; }
.mt-tema-minisite a { color: var(--ms-accent) !important; }
.mt-tema-minisite hr { border-color: var(--ms-line); opacity: 1; }

/* ---------- Minisite antiguo: portada arriba, carta e información en una columna ---------- */
.mt-tema-minisite .contenedor_header { display: none; }
html.mt-tema-minisite[data-ms-barra="propia"] #layout:not(.footer_last) { display: flex; flex-direction: column; }
html.mt-tema-minisite[data-ms-barra="propia"] #layout:not(.footer_last) > .content.pattern-gradient,
html.mt-tema-minisite[data-ms-barra="propia"] #layout:not(.footer_last) > .content.pattern-gradient > .container,
html.mt-tema-minisite[data-ms-barra="propia"] #layout:not(.footer_last) > .content.pattern-gradient > .container > .row,
html.mt-tema-minisite[data-ms-barra="propia"] #layout:not(.footer_last) > .content.pattern-gradient > .container > .row > [class*="col-"] { display: contents; }
html.mt-tema-minisite[data-ms-barra="propia"] .ms-hero { order: 0; }
html.mt-tema-minisite[data-ms-barra="propia"] .event-card { order: 1; width: 100%; max-width: 1040px; margin: 4px auto 0; padding: 0 20px; }
html.mt-tema-minisite[data-ms-barra="propia"] #layout:not(.footer_last) > .content.bg-lila { order: 2; width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 20px; }
/* Con portada, la ficha va dentro de la portada y de la ventana de información */
html.mt-tema-minisite.ms-con-portada #layout:not(.footer_last) .event-card { display: none !important; }
html.mt-tema-minisite[data-ms-barra="propia"] #layout:not(.footer_last) > :last-child { order: 3; }
html.mt-tema-minisite[data-ms-barra="propia"] #layout:not(.footer_last) > .content.bg-lila .container,
html.mt-tema-minisite[data-ms-barra="propia"] #layout:not(.footer_last) > .content.bg-lila .col-md-10 { max-width: none; width: 100%; padding: 0; margin: 0; flex: 0 0 100%; }
html.mt-tema-minisite[data-ms-barra="propia"] #layout:not(.footer_last) > .content.bg-lila .row { margin: 0; }
/* Con portada, el cartel suelto y la cabecera de la ficha sobran */
html.mt-tema-minisite.ms-con-portada .container-cartel,
html.mt-tema-minisite.ms-con-portada .event-card .event-header,
html.mt-tema-minisite.ms-con-portada .event-card .event-header + hr { display: none !important; }
/* Información */
.mt-tema-minisite .event-card { background: transparent !important; border: 0 !important; color: var(--ms-text) !important; }
.mt-tema-minisite .event-card .card-body { padding: 0; }
.mt-tema-minisite.ms-con-portada .event-card .event-body::before {
  content: "Información";
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ms-muted);
  margin-bottom: 12px;
}
.mt-tema-minisite .event-info { color: var(--ms-muted); padding: 3px 0; font-size: .95rem; line-height: 1.6; }
.mt-tema-minisite .event-info .bi { color: var(--ms-accent); margin-right: 8px; }
.mt-tema-minisite .event-info strong { color: var(--ms-text); }
.mt-tema-minisite .event-info.ms-repetido { display: none; }
/* Con portada, las rayas entre grupos de la ficha sobran */
html.mt-tema-minisite.ms-con-portada .event-card hr { display: none; }
html.mt-tema-minisite.ms-con-portada .center-genero > div { margin-bottom: 12px !important; }
.mt-tema-minisite .center-genero { text-align: left; }
.mt-tema-minisite .boton-negro {
  background: transparent;
  color: var(--ms-text);
  border: 1px solid var(--ms-line);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
}

/* ---------- Etiquetas de sección ----------
   "Tipos de entradas" pasa a "ENTRADAS"; los separadores del promotor llevan el
   mismo estilo con su texto (los escribe el promotor: "VIP"). */
.mt-tema-minisite .titulo { display: block !important; text-align: left !important; margin: 0 !important; padding: 0 !important; }
.mt-tema-minisite .col-md-10 > .titulo:first-child h3 { font-size: 0 !important; }
.mt-tema-minisite .col-md-10 > .titulo:first-child h3::after { content: "Entradas"; font-size: 12px; }
/* En el iframe del minisite nuevo, "Entradas" ya lo pone la página */
html.mt-tema-minisite[data-ms-barra="padre"] .col-md-10 > .titulo:first-child { display: none !important; }
html.mt-tema-minisite[data-ms-barra="padre"] .content.py-5 > .container { padding: 0 !important; max-width: none !important; width: 100% !important; margin: 0 !important; }
html.mt-tema-minisite[data-ms-barra="padre"] .col-md-10 { padding: 0 !important; width: 100% !important; max-width: none !important; flex: 0 0 100% !important; margin: 0 !important; }
html.mt-tema-minisite[data-ms-barra="padre"] .row { margin: 0 !important; }

/* ---------- Entradas con forma de entrada física ----------
   Arriba nombre y condiciones; línea troquelada con muescas; abajo la matriz con
   el precio y el botón. Al elegir, se ilumina con el acento. */
.mt-tema-minisite .linea-precio,
.mt-tema-minisite .linea-precio-agotado,
.mt-tema-minisite .linea-precio-proximo,
.mt-tema-minisite .linea-precio-complemento {
  display: block !important;
  position: relative;
  /* Un solo gris para toda la tarjeta (arriba y matriz) */
  background: color-mix(in srgb, var(--ms-text) 9%, var(--ms-bg)) !important;
  border: 1px solid var(--ms-line) !important;
  border-left: 1px solid var(--ms-line) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  color: var(--ms-text) !important;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mt-tema-minisite .linea-precio.ms-elegida,
.mt-tema-minisite .linea-precio-complemento.ms-elegida {
  border-color: var(--ms-accent) !important;
  box-shadow: inset 0 0 0 1px var(--ms-accent) !important;
}
/* Agotadas y próximo precio: misma tarjeta, legible, con su aviso en pastilla y el
   precio tachado (llevan columnas price-red en vez de price). */
.mt-tema-minisite .linea-precio-agotado .titulo-entrada,
.mt-tema-minisite .linea-precio-proximo .titulo-entrada { color: var(--ms-muted) !important; }
.mt-tema-minisite .price-red { display: block !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding: 0 !important; min-height: 0 !important; }
.mt-tema-minisite .price-red .vert { display: block !important; text-align: left !important; }
.mt-tema-minisite .price-red .vert br { display: none; }
/* "AGOTADAS" / "PROXIMAMENTE" a la derecha de la matriz, con el tamaño del botón
   Añadir (va en la columna de arriba en el HTML: se coloca encima de la matriz). */
.mt-tema-minisite .linea-precio-agotado,
.mt-tema-minisite .linea-precio-proximo { position: relative; }
.mt-tema-minisite .price-red .quedan {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 40px;
  margin: 0;
  padding: 0 18px;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #ff6b6b !important;
  background: color-mix(in srgb, #ff4d4d 14%, transparent);
  border: 1px solid color-mix(in srgb, #ff4d4d 45%, transparent);
}
.mt-tema-minisite .linea-precio-proximo .quedan {
  color: var(--ms-muted) !important;
  background: var(--ms-surface-2);
  border-color: var(--ms-line);
}
.mt-tema-minisite .price-red + .price-red {
  position: relative;
  min-height: 70px !important;
  display: flex !important;
  align-items: center;
  padding: 14px 18px !important;
  border-top: 2px dashed var(--ms-line);
  background: transparent;
}
.mt-tema-minisite .price-red + .price-red::before,
.mt-tema-minisite .price-red + .price-red::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ms-bg);
  border: 1px solid var(--ms-line);
}
.mt-tema-minisite .price-red + .price-red::before { left: -11px; }
.mt-tema-minisite .price-red + .price-red::after { right: -11px; }
.mt-tema-minisite .price-red + .price-red .vert {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.mt-tema-minisite .price-red + .price-red .precio { color: var(--ms-muted) !important; text-decoration: line-through; text-decoration-thickness: 2px; }
/* La compra de siempre funde todas las tarjetas y vuelve a mostrar la elegida en
   cada cambio de cantidad: la elegida se queda quieta (sin parpadeo). */
.mt-tema-minisite .linea-precio.ms-elegida,
.mt-tema-minisite .linea-precio-complemento.ms-elegida { opacity: 1 !important; display: block !important; }
.mt-tema-minisite #tickets { margin-top: 12px; }
.mt-tema-minisite .linea-centro { padding: 0 !important; }
.mt-tema-minisite .linea-centro > .row { margin: 0; }
.mt-tema-minisite .linea-centro > .row > .col-8,
.mt-tema-minisite .linea-centro > .row > .col-4 { flex: 0 0 100%; max-width: 100%; width: 100%; padding: 0; }
.mt-tema-minisite #tickets .titulo-entrada,
.mt-tema-minisite .titulo-entrada {
  font-family: var(--ms-font) !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--ms-text) !important;
  margin: 0 !important;
  padding: 16px 18px 6px;
}
.mt-tema-minisite #tickets p.smalld,
.mt-tema-minisite .smalld {
  color: var(--ms-muted) !important;
  font-size: .8rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 18px 16px;
}
/* Matriz: línea troquelada y muescas (círculos del color del fondo) */
.mt-tema-minisite #tickets .price,
.mt-tema-minisite .tickets-complementos .price,
.mt-tema-minisite .price {
  display: block !important;
  position: relative;
  min-height: 0 !important;
  padding: 14px 18px;
  border-top: 2px dashed var(--ms-line);
  background: transparent;
}
.mt-tema-minisite .price::before,
.mt-tema-minisite .price::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ms-bg);
  border: 1px solid var(--ms-line);
}
.mt-tema-minisite .price::before { left: -11px; }
.mt-tema-minisite .price::after { right: -11px; }
.mt-tema-minisite .price .vert {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
  text-align: left !important;
}
.mt-tema-minisite .price .vert br { display: none; }
.mt-tema-minisite .price .vert .precio { grid-column: 1; grid-row: 1; }
.mt-tema-minisite .price .vert .smallp { grid-column: 1; grid-row: 2; }
.mt-tema-minisite .price .vert .quantity { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.mt-tema-minisite .precio {
  font-family: var(--ms-font) !important;
  font-weight: 800 !important;
  font-size: 1.4rem !important;
  letter-spacing: -.01em;
  color: var(--ms-text) !important;
  font-variant-numeric: tabular-nums;
}
.mt-tema-minisite #tickets .smallp,
.mt-tema-minisite .tickets-complementos .smallp,
.mt-tema-minisite .smallp { color: var(--ms-muted) !important; font-size: .72rem !important; line-height: 1.2 !important; text-align: left !important; }

/* Botón "Añadir" en píldora; al elegir, − n + */
.mt-tema-minisite .quantity.ms-con-stepper select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.mt-tema-minisite .ms-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  transition: background .2s ease;
}
.mt-tema-minisite .ms-stepper button {
  height: 40px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform .08s ease, opacity .15s ease;
}
.mt-tema-minisite .ms-mas {
  padding: 0 18px;
  background: var(--ms-accent);
  color: var(--ms-on-accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.mt-tema-minisite .ms-mas__i { font-size: 1.25rem; line-height: 1; }
.mt-tema-minisite .ms-mas__t { font-size: .92rem; }
.mt-tema-minisite .ms-stepper:not(.ms-elegida) .ms-menos,
.mt-tema-minisite .ms-stepper:not(.ms-elegida) output { display: none; }
.mt-tema-minisite .ms-stepper.ms-elegida {
  padding: 4px;
  background: var(--ms-surface-2);
  box-shadow: inset 0 0 0 1px var(--ms-line);
}
.mt-tema-minisite .ms-stepper.ms-elegida button { width: 34px; height: 34px; padding: 0; }
.mt-tema-minisite .ms-stepper.ms-elegida .ms-mas__t { display: none; }
.mt-tema-minisite .ms-menos { background: transparent; color: var(--ms-text); font-size: 1.3rem; }
.mt-tema-minisite .ms-stepper button:disabled { opacity: .35; cursor: default; }
.mt-tema-minisite .ms-stepper button:active:not(:disabled) { transform: scale(.9); }
.mt-tema-minisite .ms-stepper button:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; }
.mt-tema-minisite .ms-stepper output {
  min-width: 24px;
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

/* Reservados y asientos numerados: conservan su banner propio (morado y dorado /
   azul), que ya destaca sobre el fondo oscuro. Solo se separa de las entradas. */
.mt-tema-minisite .rsv-banner,
.mt-tema-minisite .sp-banner { margin: 16px 0 6px !important; }
.mt-tema-minisite .rsv-banner *,
.mt-tema-minisite .sp-banner * { text-decoration: none; }

/* Avisos ("Elija el tipo de entrada...") */
.mt-tema-minisite .upg-info-notice {
  background: transparent !important;
  border: 0 !important;
  color: var(--ms-muted) !important;
  box-shadow: none !important;
  font-size: .85rem;
  padding: 14px 0 0 !important;
  margin: 0 !important;
  text-align: left !important;
}
.mt-tema-minisite .upg-info-notice .bi,
.mt-tema-minisite .upg-info-notice strong { color: var(--ms-text) !important; }

/* ---------- Datos del comprador ---------- */
.mt-tema-minisite #registration_form .row { --bs-gutter-x: 12px; margin-left: 0 !important; margin-right: 0 !important; column-gap: 0; }
.mt-tema-minisite #registration_form .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
@media (min-width: 768px) {
  .mt-tema-minisite #registration_form .row > .col-md-6:nth-child(odd) { padding-right: 6px !important; }
  .mt-tema-minisite #registration_form .row > .col-md-6:nth-child(even) { padding-left: 6px !important; }
  /* Nombre / Apellidos por el campo, no por la posición: los de los asistentes
     (entradas nominativas) van detrás de su título y la cuenta par/impar se
     descuadraba (sin hueco entre los dos) */
  .mt-tema-minisite #registration_form .row > .col-md-6:has(> input[name^="fname"]) { padding-left: 0 !important; padding-right: 6px !important; }
  .mt-tema-minisite #registration_form .row > .col-md-6:has(> input[name^="lname"]) { padding-left: 6px !important; padding-right: 0 !important; }
}
.mt-tema-minisite .form-floating > .form-control,
.mt-tema-minisite .form-floating > .form-select,
.mt-tema-minisite .form-control,
.mt-tema-minisite .form-select {
  /* El mismo gris que las tarjetas de las entradas y la garantía */
  background-color: color-mix(in srgb, var(--ms-text) 9%, var(--ms-bg)) !important;
  border: 1px solid var(--ms-line) !important;
  border-radius: 14px !important;
  color: var(--ms-text) !important;
  box-shadow: none !important;
}
.mt-tema-minisite .form-control:focus,
.mt-tema-minisite .form-select:focus { border-color: var(--ms-accent) !important; box-shadow: 0 0 0 4px var(--ms-accent-soft) !important; }
.mt-tema-minisite .form-floating > label { color: var(--ms-muted) !important; }
.mt-tema-minisite .form-floating > label::after { background: transparent !important; }
.mt-tema-minisite .form-select option { background: var(--ms-bg); color: var(--ms-text); }
/* Errores del formulario: basta el borde y el icono rojos del campo. El texto
   ("Este campo es obligatorio"...) no se ve, pero lo sigue leyendo un lector de pantalla. */
.mt-tema-minisite .just-validate-error-label {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}
.mt-tema-minisite .form-check-label { color: var(--ms-muted) !important; font-size: .9rem; }
.mt-tema-minisite .form-check-input { background-color: var(--ms-surface-2); border-color: color-mix(in srgb, var(--ms-text) 30%, transparent); }
.mt-tema-minisite .form-check-input:checked { background-color: var(--ms-accent) !important; border-color: var(--ms-accent) !important; }
.mt-tema-minisite #registration_form .text-center .form-check {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  margin: 0 0 10px;
  padding-left: 0;
}
.mt-tema-minisite #registration_form .text-center .form-check .form-check-input { flex: 0 0 auto; margin: 3px 0 0; float: none; }
.mt-tema-minisite #registration_form .text-center .form-check .form-check-label { flex: 1 1 0; }
/* Entre las casillas el formulario común lleva un <br>: sobra */
.mt-tema-minisite #registration_form .text-center > br { display: none; }
.mt-tema-minisite #registration_form .text-center .form-check { margin-bottom: 12px !important; }
.mt-tema-minisite #registration_form .form-check .just-validate-error-label { flex: 0 0 100%; text-align: left; padding-left: 26px; }

/* Con entradas elegidas, el formulario de datos se queda quieto: la compra lo
   funde y lo vuelve a pintar en cada cambio de cantidad. */
html.mt-tema-minisite.ms-hay-entradas #registration_form { opacity: 1 !important; display: block !important; }

/* Con la barra, los botones de siempre (Comprar / Realizar pago) se ocultan:
   la barra los pulsa por debajo. */
html.mt-tema-minisite .buyer-form-submit,
html.mt-tema-minisite .upg-pay-wrap:not([name="retry"]),
html.mt-tema-minisite #frm .event_form_submit_inv { position: absolute !important; left: -9999px !important; }

/* ---------- Resumen antes de pagar: un recibo sencillo ----------
   Una línea por entrada (importe a la derecha; precio por entrada y gastos debajo),
   subtotal y gastos en gris y el total grande. */
.mt-tema-minisite .col-lg-8.mx-auto { width: 100% !important; max-width: none !important; flex: 0 0 100% !important; padding: 0 !important; }
.mt-tema-minisite .sin-gutter { padding: 0 !important; margin-top: 8px !important; max-width: none !important; }
.mt-tema-minisite .titulo.mobile h3 { font-size: 0 !important; }
.mt-tema-minisite .titulo.mobile h3::after { content: "Tu pedido"; font-size: 12px; }
.mt-tema-minisite .titulo.ms-con-reloj {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 12px;
  margin: 26px 0 12px !important;
}
.mt-tema-minisite .titulo.ms-con-reloj h3 { margin: 0 !important; }
.mt-tema-minisite .ms-reloj {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ms-surface-2);
  color: var(--ms-text);
  font-family: var(--ms-font);
  font-size: .85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}
.mt-tema-minisite .ms-reloj-original {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  padding: 0 !important;
  margin: 0 !important;
}
.mt-tema-minisite .sin-gutter { margin-bottom: 56px !important; }
.mt-tema-minisite .upg-countdown {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ms-surface-2) !important;
  color: var(--ms-muted) !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}
.mt-tema-minisite .upg-table-card {
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-line) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  padding: 6px 18px 16px !important;
  overflow: hidden;
}
.mt-tema-minisite .upg-table-card::after {
  content: "El pedido se completa con el botón de abajo.";
  display: block;
  margin-top: 12px;
  font-size: .78rem;
  color: var(--ms-muted);
}
.mt-tema-minisite .upg-table-card .d-flex { background: transparent !important; border: 0 !important; color: var(--ms-text) !important; }
.mt-tema-minisite .upg-table-card h5 { margin: 0 !important; padding: 0 !important; font-family: var(--ms-font) !important; color: var(--ms-text) !important; }
.mt-tema-minisite .upg-table-card [class*="col-"] { padding: 0 !important; width: auto !important; max-width: none !important; flex: 0 0 auto; }
/* Cabecera Entradas / Precio / Total: fuera */
.mt-tema-minisite .upg-table-card .bg-dark { display: none !important; }
/* Línea de entrada: nombre e importe; precio por entrada y gastos debajo */
.mt-tema-minisite .upg-table-card .d-flex.border:not(.bg-light) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  row-gap: 2px;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--ms-line) !important;
}
.mt-tema-minisite .upg-table-card .d-flex.border:not(.bg-light) > div { display: contents !important; }
.mt-tema-minisite .upg-table-card .d-flex.border:not(.bg-light) > div:nth-child(1) h5 { grid-column: 1; grid-row: 1; font-size: 1rem !important; font-weight: 800 !important; }
.mt-tema-minisite .upg-table-card .d-flex.border:not(.bg-light) > div:nth-child(2) h5 {
  grid-column: 1; grid-row: 2;
  display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline;
  font-size: .8rem !important; font-weight: 500 !important; color: var(--ms-muted) !important; text-align: left;
}
.mt-tema-minisite .upg-table-card .d-flex.border:not(.bg-light) > div:nth-child(2) h5 br { display: none; }
.mt-tema-minisite .upg-table-card .d-flex.border:not(.bg-light) > div:nth-child(2) h5 > * { color: var(--ms-muted) !important; font-style: normal; white-space: nowrap; }
.mt-tema-minisite .upg-table-card .d-flex.border:not(.bg-light) > div:nth-child(2) h5::before { content: "Por entrada"; }
.mt-tema-minisite .upg-table-card .d-flex.border:not(.bg-light) > div:nth-child(3) h5 { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.05rem !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; }
/* Subtotal, garantía, descuento y gastos: etiqueta a la izquierda, importe a la derecha */
.mt-tema-minisite .upg-table-card .d-flex.bg-light {
  justify-content: space-between !important;
  align-items: baseline;
  padding: 8px 0 0 !important;
}
.mt-tema-minisite .upg-table-card .d-flex.bg-light h5 { font-size: .9rem !important; font-weight: 500 !important; color: var(--ms-muted) !important; text-align: left !important; font-variant-numeric: tabular-nums; }
.mt-tema-minisite .upg-table-card .d-flex.bg-light > div:last-child h5 { text-align: right !important; }
/* Total: grande */
.mt-tema-minisite .upg-table-card .d-flex.bg-light:last-child {
  margin-top: 10px;
  padding-top: 12px !important;
  border-top: 1px solid var(--ms-line) !important;
}
.mt-tema-minisite .upg-table-card .d-flex.bg-light:last-child h5 { color: var(--ms-text) !important; font-weight: 800 !important; font-size: 1.05rem !important; }
.mt-tema-minisite .upg-table-card .d-flex.bg-light:last-child > div:last-child h5 { font-size: 1.6rem !important; letter-spacing: -.02em; }
/* El aviso "pulse REALIZAR PAGO" sobra: el botón es el de la barra */
.mt-tema-minisite .upg-table-card + .upg-info-notice { display: none !important; }

/* Garantía de devolución: misma tarjeta gris que las entradas, botón con el acento;
   al marcarla sigue en verde (protegida) */
.mt-tema-minisite .seg-box {
  background: color-mix(in srgb, var(--ms-text) 9%, var(--ms-bg)) !important;
  border: 1px solid var(--ms-line) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}
.mt-tema-minisite .seg-card:hover .seg-box { border-color: var(--ms-accent) !important; }
.mt-tema-minisite .seg-input:focus-visible + .seg-box { outline-color: var(--ms-accent); }
.mt-tema-minisite .seg-escudo {
  background: color-mix(in srgb, var(--ms-accent) 18%, transparent);
  color: var(--ms-accent);
}
.mt-tema-minisite .seg-titulo { color: var(--ms-text); font-weight: 800; }
.mt-tema-minisite .seg-sub,
.mt-tema-minisite .seg-precio-total,
.mt-tema-minisite .seg-letra { color: var(--ms-muted); }
.mt-tema-minisite .seg-ventajas li { color: color-mix(in srgb, var(--ms-text) 85%, transparent); }
.mt-tema-minisite .seg-precio-importe,
.mt-tema-minisite .seg-card:hover .seg-precio-importe {
  background: var(--ms-accent);
  color: var(--ms-on-accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.mt-tema-minisite .seg-input:checked + .seg-box {
  border-color: #1F9D55 !important;
  background: color-mix(in srgb, #1F9D55 14%, var(--ms-bg)) !important;
}

/* Pago fallido: tarjeta gris como las entradas y "Reintentar compra" con el acento */
.mt-tema-minisite .estado-evento {
  background: color-mix(in srgb, var(--ms-text) 9%, var(--ms-bg)) !important;
  border: 1px solid var(--ms-line) !important;
  box-shadow: none !important;
  color: var(--ms-text) !important;
}
.mt-tema-minisite .estado-evento h3 { color: var(--ms-text) !important; }
.mt-tema-minisite .estado-evento p { color: var(--ms-muted) !important; }
.mt-tema-minisite form[name="retry"] .upg-pay-btn {
  background: var(--ms-accent) !important;
  color: var(--ms-on-accent) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2) !important;
}

/* Enlaces dentro de los avisos (p. ej. FAQ en "invitación ya pedida"): el color del
   aviso, subrayados; el acento no se lee sobre su fondo */
.mt-tema-minisite .alert a { color: inherit !important; text-decoration: underline !important; font-weight: 700; }

/* La invitación va sola: lo que no se puede mezclar con lo elegido, atenuado */
.mt-tema-minisite .linea-precio.ms-bloqueada { opacity: .45; }
.mt-tema-minisite .linea-precio.ms-bloqueada .titulo-entrada::after {
  content: "La invitación se pide sola, sin otras entradas";
  display: block;
  margin-top: 2px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ms-muted);
}

/* Hueco para que la barra no tape el final */
html.mt-tema-minisite.ms-con-barra body { padding-bottom: 110px !important; }

@media (prefers-reduced-motion: reduce) {
  .ms-barra, .ms-salto { animation: none; }
  .mt-tema-minisite .ms-stepper button, .ms-barra__boton, .mt-tema-minisite .linea-precio { transition: none; }
}