/** Shopify CDN: Minification failed

Line 47:1205 Unterminated string token

**/
/* LabMilo · lm-video-slider · slider horizontal de vídeos 9:16, sin librerías.
   Variables por sección (atributo style de <lm-video-slider>):
   --lm-vs-bg, --lm-vs-text, --lm-vs-accent, --lm-vs-wave-top, --lm-vs-wave-bottom, --lm-vs-mobile-w,
   --lm-vs-per-view, --lm-vs-per-view-tablet, --lm-vs-pt, --lm-vs-pb, --lm-vs-pt-m, --lm-vs-pb-m.
   Móvil primero (390 px); 750 px = tableta; 990 px = escritorio (mismos cortes que el tema).
   v8 (29/09): cabecera, fondo crema con huellas y notas, olas, tarjetas con marco y sombra, píldora de control
   (puntos o contador + barra, y la pausa dentro) y aviso «Desliza» en móvil. Doc: kit-lm/v8-E-sliders.md */

lm-video-slider {
  display: block;
}

.lm-vs {
  --lm-vs-gap: 1.2rem;
  --lm-vs-radius: 1.2rem;
  --lm-vs-frame: 0.3rem;
  --lm-vs-gutter: 1.5rem;
  --lm-vs-wave-h: 3.2rem;
  /* Sombra cálida y suave (tarjetas, píldora, flechas y aviso). */
  --lm-vs-shadow: 0 0.4rem 1.2rem rgba(120, 64, 14, 0.14), 0 0.1rem 0.3rem rgba(32, 34, 34, 0.06);
  position: relative;
  background-color: var(--lm-vs-bg, #ffffff);
  color: var(--lm-vs-text, #28231E);
  padding-top: var(--lm-vs-pt-m, 27px);
  padding-bottom: var(--lm-vs-pb-m, 27px);
}

@media screen and (min-width: 750px) {
  .lm-vs {
    --lm-vs-gap: 1.6rem;
    --lm-vs-wave-h: 5.6rem;
    padding-top: var(--lm-vs-pt, 36px);
    padding-bottom: var(--lm-vs-pb, 36px);
  }
}

/* ---------- Fondo: huellas y notas musicales, tono sobre tono ----------
   Formas blancas sobre el color de fondo (crema #FAF7F2 en la ficha). Al ser más claras que el fondo, no bajan
   el contraste de nada: el antetítulo #875231 pasa de 4,76:1 sobre crema a 5,05:1 sobre blanco. Con fondo
   blanco no se ven (no molesta). Una sola imagen SVG en línea de 1 KB, sin peticiones. */
.lm-vs--pattern {
  background-image: radial-gradient(circle, #87523118 1.5px, transparent 1.5px) rotate(-18)'%3E%3Cellipse cx='0' cy='8' rx='10' ry='8.5'/%3E%3Ccircle cx='-11' cy='-5' r='4.2'/%3E%3Ccircle cx='-4' cy='-12.5' r='4.2'/%3E%3Ccircle cx='5' cy='-12.5' r='4.2'/%3E%3Ccircle cx='12' cy='-5' r='4.2'/%3E%3C/g%3E%3Cg transform='translate(130 56) rotate(12)'%3E%3Cellipse cx='-5' cy='14' rx='6.5' ry='5' transform='rotate(-20 -5 14)'/%3E%3Crect x='0.4' y='-14' width='2.6' height='28' rx='1.2'/%3E%3Cpath d='M2 -14c5 3 10 6 9 14c-2-4-5-6-9-7z'/%3E%3C/g%3E%3Cg transform='translate(136 138) rotate(24) scale(0.8)'%3E%3Cellipse cx='0' cy='8' rx='10' ry='8.5'/%3E%3Ccircle cx='-11' cy='-5' r='4.2'/%3E%3Ccircle cx='-4' cy='-12.5' r='4.2'/%3E%3Ccircle cx='5' cy='-12.5' r='4.2'/%3E%3Ccircle cx='12' cy='-5' r='4.2'/%3E%3C/g%3E%3Cg transform='translate(44 134) rotate(-10)'%3E%3Cellipse cx='-8' cy='12' rx='6' ry='4.6' transform='rotate(-20 -8 12)'/%3E%3Cellipse cx='10' cy='8' rx='6' ry='4.6' transform='rotate(-20 10 8)'/%3E%3Crect x='-3.4' y='-10' width='2.4' height='22' rx='1'/%3E%3Crect x='14.6' y='-14' width='2.4' height='22' rx='1'/%3E%3Cpath d='M-3.4 -10L17 -14V-9.6L-3.4 -5.6Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-position: center top;
  background-size: 18rem 18rem;
}

/* ---------- Olas (opcionales) ----------
   Del color de la sección vecina, encima del fondo de esta. Estáticas (sin animación). El relleno suma su alto
   para que la cabecera no quede debajo. 1 px de solape para que no asome una raya entre secciones. */
.lm-vs--wave-top {
  padding-top: calc(var(--lm-vs-pt-m, 27px) + var(--lm-vs-wave-h));
}

.lm-vs--wave-bottom {
  padding-bottom: calc(var(--lm-vs-pb-m, 27px) + var(--lm-vs-wave-h));
}

@media screen and (min-width: 750px) {
  .lm-vs--wave-top {
    padding-top: calc(var(--lm-vs-pt, 36px) + var(--lm-vs-wave-h));
  }

  .lm-vs--wave-bottom {
    padding-bottom: calc(var(--lm-vs-pb, 36px) + var(--lm-vs-wave-h));
  }
}

.lm-vs__wave {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--lm-vs-wave-h) + 1px);
  line-height: 0;
  pointer-events: none;
}

.lm-vs__wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lm-vs__wave--top {
  top: -1px;
  color: var(--lm-vs-wave-top, #ffffff);
}

.lm-vs__wave--bottom {
  bottom: -1px;
  color: var(--lm-vs-wave-bottom, #ffffff);
  transform: scaleY(-1);
}

/* ---------- Cabecera: antetítulo, título y frase ----------
   Mismo estilo que los rich-text del PAS («EL PROBLEMA»): antetítulo 14 px en mayúsculas, espaciado y negrita
   en el color de acento; título al tamaño h1 del tema (lo fija lm-acabado.css); frase en el color del texto al 75 %.
   Contrastes sobre crema: antetítulo 4,76:1 · título 15,1:1 · frase 6,8:1. */
.lm-vs__header {
  margin: 0 0 2.4rem;
}

.lm-vs__header--center {
  text-align: center;
}

.lm-vs__header--left {
  text-align: left;
}

.lm-vs .lm-vs__caption {
  margin: 0 0 0.8rem;
  color: var(--lm-vs-accent, #875231);
  font-size: 1.4rem;
  font-weight: var(--font-body-weight-bold, 700);
  letter-spacing: 0.18rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale, 1));
  text-transform: uppercase;
}

.lm-vs .lm-vs__heading {
  margin: 0;
  color: var(--lm-vs-text, #28231E);
}

.lm-vs .lm-vs__heading--center {
  text-align: center;
}

.lm-vs .lm-vs__heading--left {
  text-align: left;
}

/* Igual que el texto de los PAS (rich-text): 2 rem bajo el título y el color del texto al 75 %. */
.lm-vs .lm-vs__intro {
  max-width: 48rem;
  margin: 2rem 0 0;
  color: var(--lm-vs-text, #28231E);
  opacity: 0.75;
  text-wrap: pretty;
}

.lm-vs__header--center .lm-vs__intro {
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 750px) {
  .lm-vs__header {
    margin-bottom: 3.2rem;
  }
}

/* Aviso del editor (solo request.design_mode) */
.lm-vs__notice {
  margin: 0 0 1.6rem;
  padding: 1.2rem 1.6rem;
  border: 0.2rem dashed currentColor;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  line-height: 1.5;
}

/* ---------- Carrusel ---------- */
.lm-vs__carousel {
  position: relative;
}

.lm-vs__viewport {
  position: relative;
}

/* Relleno vertical de la pista = hueco para la sombra de las tarjetas (la pista recorta lo que sobresale). */
.lm-vs__track {
  position: relative;
  display: flex;
  gap: var(--lm-vs-gap);
  /* En móvil la pista llega al borde de la pantalla para que asome el siguiente vídeo. */
  margin: -0.4rem calc(var(--lm-vs-gutter) * -1) 0;
  padding: 0.8rem var(--lm-vs-gutter) 1.8rem;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--lm-vs-gutter);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.lm-vs__track::-webkit-scrollbar {
  display: none;
}

/* Tarjeta: esquinas de 1,2 rem y sombra suave; con marco, 3 px de blanco alrededor del vídeo. */
.lm-vs__slide {
  flex: 0 0 var(--lm-vs-mobile-w, 60%);
  min-width: 0;
  margin: 0;
  padding: 0;
  border-radius: var(--lm-vs-radius);
  box-shadow: var(--lm-vs-shadow);
  scroll-snap-align: start;
}

.lm-vs--framed .lm-vs__slide {
  padding: var(--lm-vs-frame);
  border-radius: calc(var(--lm-vs-radius) + var(--lm-vs-frame));
  background: #ffffff;
}

.lm-vs--single .lm-vs__track {
  justify-content: center;
}

/* Desde 750 px la pista ocupa el ancho de la página; 1,2 rem de relleno lateral (compensado con margen
   negativo) para que no se corte la sombra de la primera y la última tarjeta. El ancho útil no cambia. */
@media screen and (min-width: 750px) {
  .lm-vs__track {
    margin: -0.4rem -1.2rem 0;
    padding: 0.8rem 1.2rem 1.8rem;
    scroll-padding-inline: 1.2rem;
  }

  .lm-vs__slide {
    flex-basis: calc(
      (100% - (var(--lm-vs-per-view-tablet, 3) - 1) * var(--lm-vs-gap)) / var(--lm-vs-per-view-tablet, 3)
    );
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .lm-vs--fits-tablet .lm-vs__track {
    justify-content: center;
  }
}

@media screen and (min-width: 990px) {
  .lm-vs__slide {
    flex-basis: calc((100% - (var(--lm-vs-per-view, 4) - 1) * var(--lm-vs-gap)) / var(--lm-vs-per-view, 4));
  }

  .lm-vs--fits-desktop .lm-vs__track {
    justify-content: center;
  }
}

/* Caja 9:16 fija: la maquetación no salta al cargar. */
.lm-vs__media {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--lm-vs-radius);
  background: rgba(169, 90, 19, 0.1);
  /* Safari: recorta el vídeo con las esquinas redondeadas mientras se reproduce. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  isolation: isolate;
}

@supports not (aspect-ratio: 9 / 16) {
  .lm-vs__media {
    height: 0;
    padding-bottom: 177.7778%;
  }
}

.lm-vs__video,
.lm-vs__poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.lm-vs__video {
  z-index: 0;
  background: transparent;
}

/* La portada tapa el vídeo hasta que empieza a reproducirse (evento playing). */
.lm-vs__poster {
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lm-vs__slide.is-started .lm-vs__poster {
  opacity: 0;
}

/* Botón de reproducir: solo si ese vídeo está en pausa (pausa del cliente, reducir movimiento o autoplay bloqueado). */
.lm-vs__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.12);
  color: var(--lm-vs-accent, #875231);
  cursor: pointer;
}

.lm-vs.is-ready .lm-vs__slide.is-paused .lm-vs__play {
  display: flex;
}

.lm-vs__play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
}

.lm-vs__play-icon svg {
  width: 2.6rem;
  height: 2.6rem;
  margin-left: 0.3rem;
}

/* Hueco vacío (solo en el editor) */
.lm-vs__media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  border: 0.2rem dashed rgba(32, 34, 34, 0.35);
  background: rgba(32, 34, 34, 0.04);
  font-size: 1.3rem;
  line-height: 1.4;
  text-align: center;
  -webkit-mask-image: none;
}

/* ---------- Aviso «Desliza» (solo móvil) ----------
   Sobre el vídeo que asoma, abajo a la derecha: a 1,6 rem del borde inferior de la tarjeta, lejos del centro,
   donde sale el botón de reproducir si el autoplay está bloqueado (iOS en bajo consumo), con «reducir
   movimiento» o con ahorro de datos. Decorativo (aria-hidden) y sin eventos: el dedo desliza la pista a través
   de él. Se va al primer deslizamiento (clase is-scrolled, JS). Caramelo sobre blanco: 5,05:1.
   La flecha empuja 3 veces (3,6 s, menos de 5 s) cuando la sección ya está a la vista (clase is-seen, JS)
   y se queda quieta; con «reducir movimiento», nada. */
.lm-vs__hint {
  display: none;
}

@media screen and (max-width: 749px) {
  .lm-vs.is-ready:not(.is-static) .lm-vs__hint {
    position: absolute;
    /* Relleno inferior de la pista (1,8 rem) + 1,6 rem por encima del borde de la tarjeta. */
    bottom: 3.4rem;
    right: 0.4rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.1rem 0.7rem 1.4rem;
    border-radius: 99rem;
    background: #ffffff;
    box-shadow: var(--lm-vs-shadow);
    color: var(--lm-vs-accent, #875231);
    font-size: 1.3rem;
    font-weight: var(--font-body-weight-bold, 700);
    letter-spacing: 0.04rem;
    line-height: 1;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .lm-vs.is-ready.is-scrolled .lm-vs__hint {
    opacity: 0;
    visibility: hidden;
  }

  .lm-vs__hint svg {
    flex: none;
  }

  .lm-vs.is-seen .lm-vs__hint svg {
    animation: lm-vs-nudge 1.2s ease-in-out 0.8s 3;
  }
}

@keyframes lm-vs-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(0.4rem);
  }
}

/* ---------- Flechas: solo desde 750 px y con JS listo ----------
   Blanco con flecha en el color de marca (5,05:1). */
.lm-vs__arrow {
  display: none;
}

@media screen and (min-width: 750px) {
  .lm-vs.is-ready .lm-vs__arrow {
    position: absolute;
    /* Centradas en la tarjeta (la pista tiene 0,5 rem más de relleno abajo que arriba). */
    top: calc(50% - 0.5rem);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: var(--lm-vs-accent, #875231);
    box-shadow: var(--lm-vs-shadow);
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }

  .lm-vs.is-ready .lm-vs__arrow--prev {
    left: -2.2rem;
  }

  .lm-vs.is-ready .lm-vs__arrow--next {
    right: -2.2rem;
  }

  .lm-vs.is-ready .lm-vs__arrow[aria-disabled='true'] {
    opacity: 0.35;
    cursor: default;
  }

  .lm-vs.is-ready.is-static .lm-vs__arrow {
    display: none;
  }
}

@media (hover: hover) and (min-width: 750px) {
  .lm-vs.is-ready .lm-vs__arrow:not([aria-disabled='true']):hover {
    background: var(--lm-vs-accent, #875231);
    color: #ffffff;
  }
}

/* ---------- Píldora de control: posición + pausa ----------
   Píldora blanca centrada bajo el carrusel. Dentro: los puntos (si caben en una fila) o el contador «n / N»
   con una barra de progreso, y el botón de pausa en un círculo del color de acento (blanco sobre #875231: 5,05:1).
   Zonas táctiles de 44 px de alto (pausa 44 × 44; puntos 24 × 44). Alto de la píldora: 4,4 + 0,8 de relleno
   + 0,2 de borde = 5,4 rem. Hasta que el JS está listo se reserva ese hueco sin enseñarla (no salta la maquetación). */
.lm-vs__nav {
  display: flex;
  justify-content: center;
  margin-top: 0.4rem;
}

.lm-vs__controls {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  max-width: 100%;
  min-height: 5.4rem;
  padding: 0.4rem;
  border: 0.1rem solid rgba(169, 90, 19, 0.14);
  border-radius: 99rem;
  background: #ffffff;
  box-shadow: 0 0.2rem 0.8rem rgba(120, 64, 14, 0.1);
}

.lm-vs:not(.is-ready) .lm-vs__controls {
  visibility: hidden;
}

.lm-vs__dots {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 2.4rem;
}

.lm-vs__nav--no-toggle .lm-vs__dots {
  padding: 0 0.4rem;
}

/* Todo cabe (sin desplazamiento): sin posición. Si tampoco hay pausa, sin píldora. */
.lm-vs.is-static .lm-vs__dots {
  display: none;
}

.lm-vs.is-static .lm-vs__nav--no-toggle {
  display: none;
}

/* 2,4 rem de ancho (así caben 12 en una fila a 390 px; el JS cuenta con ese ancho) y 4,4 rem de alto. */
.lm-vs__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 4.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Punto inactivo #B08256 sobre blanco: 3,4:1 (WCAG 1.4.11); el activo, del color de acento y alargado. */
.lm-vs__dot::before {
  content: '';
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 1rem;
  background: #b08256;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.lm-vs__dot.is-active::before {
  width: 2rem;
  background: var(--lm-vs-accent, #875231);
}

/* Modo contador (los puntos no caben en una fila, p. ej. 15 vídeos a 390 px): «n / N» + barra de progreso.
   Ancho fijo de 26 rem (menos si no cabe): la píldora no cambia de tamaño al avanzar. */
.lm-vs__dots.is-count {
  flex: 0 1 26rem;
  justify-content: flex-start;
  gap: 1.2rem;
  width: 26rem;
  padding: 0 0.4rem 0 1.4rem;
}

.lm-vs__nav--no-toggle .lm-vs__dots.is-count {
  padding-right: 1.4rem;
}

/* Contador «n / N»: #28231E sobre blanco (16:1). Ancho mínimo para que «9 / 15» → «10 / 15» no mueva la barra. */
.lm-vs__count {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-width: 5.4rem;
  min-height: 2.4rem;
  font-size: 1.4rem;
  font-weight: var(--font-body-weight-bold, 700);
  line-height: 1;
  letter-spacing: 0.04rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--lm-vs-text, #28231E);
}

/* Barra de progreso: decorativa (aria-hidden; el contador ya lo dice). Se llena con scaleX desde el JS. */
.lm-vs__bar {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-width: 3rem;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 1rem;
  background: rgba(169, 90, 19, 0.18);
}

.lm-vs__bar-fill {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: var(--lm-vs-accent, #875231);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Solo para lectores de pantalla (propio, sin depender de .visually-hidden del tema). */
.lm-vs__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Pausa: 44 × 44 px (zona táctil mínima del brief). El JS lee este ancho para decidir entre puntos y contador. */
.lm-vs__toggle {
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--lm-vs-accent, #875231);
  color: #ffffff;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.lm-vs.is-ready .lm-vs__toggle {
  display: inline-flex;
}

@media (hover: hover) {
  .lm-vs__toggle:hover {
    filter: brightness(0.9);
  }
}

.lm-vs__toggle .lm-vs__icon-play,
.lm-vs__toggle.is-paused .lm-vs__icon-pause {
  display: none;
}

.lm-vs__toggle.is-paused .lm-vs__icon-play {
  display: block;
  margin-left: 0.2rem;
}

/* Foco visible propio (el del tema usa el gris del esquema y no se ve sobre fondos de color). */
.lm-vs :focus-visible {
  outline: 0.2rem solid var(--lm-vs-text, #28231E);
  outline-offset: 0.3rem;
  box-shadow: none;
}

.lm-vs .lm-vs__track:focus-visible,
.lm-vs .lm-vs__play:focus-visible {
  outline-offset: -0.4rem;
}

.lm-vs .lm-vs__play:focus-visible {
  outline-color: #ffffff;
  box-shadow: inset 0 0 0 0.6rem var(--lm-vs-accent, #875231);
}

/* La flecha conserva su sombra con el foco (la regla general de arriba la quita). */
.lm-vs.is-ready .lm-vs__arrow:focus-visible {
  box-shadow: var(--lm-vs-shadow);
}

@media (prefers-reduced-motion: reduce) {
  .lm-vs__poster,
  .lm-vs__dot::before,
  .lm-vs.is-ready .lm-vs__arrow,
  .lm-vs.is-ready .lm-vs__hint,
  .lm-vs__toggle {
    transition: none;
  }

  /* Misma especificidad que la regla que anima (va después, así que gana). */
  .lm-vs.is-seen .lm-vs__hint svg {
    animation: none;
  }
}