/* =========================================================================
   Builder Sliders MYEM — Estilos del slider (lo que ven las visitas)
   Plugin 0.1.0 · 06/10/2026 (viene de la maqueta del 05/10; prefijo «msl-»)
   - Todo cuelga de .msl-slider para no chocar con el tema de WordPress.
   - Los valores ajustables llegan como variables CSS (--algo) desde el JS,
     así el mismo CSS sirve para cualquier configuración.
   - Sin librerías ni cargas externas (solo Montserrat, si la web la tiene).
   ========================================================================= */

/* Ángulo animable: los contornos de luz se mueven animando esta variable
   dentro de un degradado cónico. Lo anima el navegador, sin JS por fotograma. */
@property --msl-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* «No dejar que la página se ensanche» (regla general MYEM): lo activa el JS
   solo en páginas con slider. Recorta lo que sobresalga en horizontal. */
html.msl-no-ensanchar,
html.msl-no-ensanchar body { overflow-x: clip; }

/* ---------- Contenedor general ---------- */
.msl-slider {
  position: relative;
  isolation: isolate;                 /* el fondo con z-index -1 no se escapa */
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  padding: var(--relleno-slider, 0px) var(--relleno-lateral-slider, 0px);
  border-radius: var(--radio-slider, 0px);
  /* Sin zoom por doble toque (0.1.9): en el iPhone, tocar rápido las flechas ampliaba la página.
     «manipulation» = desplazar y pellizcar sí; doble toque para ampliar, no. */
  touch-action: manipulation;
}
.msl-slider__flecha, .msl-punto { touch-action: manipulation; }
.msl-slider *, .msl-slider *::before, .msl-slider *::after { box-sizing: border-box; }
/* Con fondo (color, degradado o imagen), el fondo es la ventana: las tarjetas entran y salen
   por dentro de sus bordes (recortadas en el borde redondeado), nunca por fuera. */
.msl-slider--con-fondo { overflow-x: clip; }

/* Texto solo para lectores de pantalla (anuncia «Tarjeta 3 de 8») */
.msl-oculto-visual {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

/* ---------- Fondo del slider (color, degradado o imagen + capa) ---------- */
.msl-slider__fondo {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  border-radius: inherit; background: var(--fondo-slider, transparent);
}
.msl-slider__fondo-img {
  position: absolute; width: calc(100% + var(--fondo-sobra) * 2); height: calc(100% + var(--fondo-sobra) * 2);
  left: calc(var(--fondo-sobra) * -1); top: calc(var(--fondo-sobra) * -1);   /* sobra para que el desenfoque no deje bordes claros */
  object-fit: cover; object-position: var(--fondo-x) var(--fondo-y);
  transform: scale(var(--fondo-zoom)); transform-origin: var(--fondo-x) var(--fondo-y);
  filter: blur(var(--fondo-desenf));
}
.msl-slider__fondo-capa { position: absolute; inset: 0; background: var(--fondo-capa); opacity: var(--fondo-capa-op); }

/* ---------- Marco (escenario + flechas) y escenario ---------- */
.msl-slider__marco { position: relative; }
.msl-slider__escenario {
  position: relative;
  /* Sin recorte: la tarjeta que sale se ve deslizarse fuera mientras se desvanece.
     La página no se ensancha gracias a «No dejar que la página se ensanche» (html/body). */
  overflow: visible;
  perspective: 1400px;                /* profundidad para el giro 3D de las laterales */
  /* El dedo en vertical hace scroll; en horizontal, arrastra el slider. «pinch-zoom» (0.1.9): sin él,
     en el iPhone no se podía pellizcar para reducir y, si la página quedaba ampliada con el slider
     ocupando la pantalla, se quedaba bloqueada hasta recargar. */
  touch-action: pan-y pinch-zoom;
  /* SIN transición de alto (0.1.4): al ampliarse, el hueco se abre de golpe y la tarjeta crece suave
     dentro. Antes crecía poco a poco y en cada fotograma se recolocaba TODA la página (en la web real,
     38.000 px): medido con un móvil simulado, 15 fotogramas lentos por ampliación frente a 0. */
  outline: none;
}
/* Si se desactiva «No dejar que la página se ensanche», se recorta en el borde del slider
   (peor efecto de salida, pero la página nunca tendrá barra horizontal) */
.msl-slider--recortar .msl-slider__escenario { overflow-x: clip; }
.msl-slider__escenario:focus-visible { box-shadow: 0 0 0 2px #ffaa00; border-radius: 8px; }
.msl-slider.msl-arrastrando .msl-slider__escenario { cursor: grabbing; }

/* ---------- Tarjeta: posición (la mueve el motor) ---------- */
.msl-tarjeta {
  position: absolute; left: 50%; top: 0;
  width: var(--ancho); margin-left: calc(var(--ancho) / -2);
  transform-origin: 50% 50%;
  transition: transform var(--dur) var(--curva), height var(--dur) var(--curva),
              opacity var(--dur) var(--curva), filter var(--dur) var(--curva);
  will-change: transform;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.msl-tarjeta:not(.es-centro) { cursor: pointer; }
/* «Móvil ligero» (0.1.5): adornos que se pueden apagar SOLO en el móvil para aligerar el dibujo
   (el motor pone estas clases en el slider cuando la pantalla es de móvil) */
.msl-slider.msl-sin-contorno .msl-tarjeta__contorno,
.msl-slider.msl-sin-contorno .msl-tarjeta__resplandor,
.msl-slider.msl-sin-resplandor .msl-tarjeta__resplandor { display: none; }
.msl-slider.msl-sin-enfoque .msl-tarjeta__contenido.msl-enfocando { animation: none; }
.msl-slider.msl-sin-crecer .msl-tarjeta { transition-property: transform, opacity, filter; }   /* el alto cambia al momento */
.msl-slider.msl-sin-sombra .msl-tarjeta__interior,
.msl-slider.msl-sin-sombra .msl-tarjeta.es-centro:hover .msl-tarjeta__interior { box-shadow: none; }
.msl-slider.msl-sin-fondos .msl-tarjeta__fondo,
.msl-slider.msl-sin-fondos .msl-tarjeta__fondo::before,
.msl-slider.msl-sin-fondos .msl-tarjeta__fondo::after { animation: none; }
.msl-slider.msl-sin-adornos .msl-sep__linea,
.msl-slider.msl-sin-adornos .msl-sep__linea::before,
.msl-slider.msl-sin-adornos .msl-sep__linea::after { animation: none; }
.msl-slider.msl-sin-adornos .msl-boton__contorno { display: none; }

/* Tarjeta que en el bucle pasa de un extremo al otro (0.1.4): la mueve una animación propia
   (sale por su lado y entra por el contrario); la transición CSS mandaría sobre ella */
.msl-slider .msl-tarjeta.msl-salto { transition: none; }
/* Reflejo «sobre cristal»: copia invertida bajo cada tarjeta, que se desvanece.
   Va pegada a su tarjeta (se mueve, encoge y desenfoca con ella). Firefox no lo
   muestra (no tiene esta propiedad): allí simplemente no hay reflejo. */
.msl-slider--reflejo .msl-tarjeta {
  -webkit-box-reflect: below var(--ref-dist, 6px)
    linear-gradient(transparent calc(100% - var(--ref-largo, 40%)), rgba(0, 0, 0, var(--ref-int, .25)));
}
.msl-tarjeta.msl-oculta { pointer-events: none; }
/* Mientras se arrastra o se recoloca de golpe, sin transiciones */
.msl-slider.msl-arrastrando .msl-tarjeta,
.msl-slider.msl-sin-transicion .msl-tarjeta,
.msl-slider.msl-sin-transicion .msl-slider__escenario { transition: none; }

/* ---------- Tarjeta: diseño (lo pinta el «pintor») ---------- */
.msl-tarjeta__caja {
  position: relative; height: 100%;
  border-radius: var(--radio);
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
/* La central se eleva al pasar el ratón (solo en aparatos con ratón) */
@media (hover: hover) {
  .msl-tarjeta.es-centro:hover .msl-tarjeta__caja { transform: translateY(calc(var(--elevar, 8px) * -1)); }
  .msl-tarjeta.es-centro:hover .msl-tarjeta__interior { box-shadow: var(--sombra-h); }
}
.msl-tarjeta__interior {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden; border-radius: var(--radio);
  box-shadow: var(--sombra);
  transition: box-shadow .45s ease;
}

/* Capas de fondo de la tarjeta (de abajo arriba): fondo, imagen, capa de color */
.msl-tarjeta__fondo { position: absolute; inset: 0; overflow: hidden; }
.msl-fondo--color      { background: var(--f-color); }
.msl-fondo--degradado  { background: linear-gradient(var(--f-ang), var(--f1), var(--f2)); }
.msl-fondo--cambio     { background-color: var(--f1); animation: msl-cambio var(--f-vel) ease-in-out infinite; }
.msl-fondo--movimiento {
  background: linear-gradient(var(--f-ang), var(--f1), var(--f2), var(--f3), var(--f1));
  background-size: 300% 300%;
  animation: msl-mover var(--f-vel) ease-in-out infinite alternate;
}
.msl-fondo--aurora { background: var(--f-color); }
.msl-fondo--aurora::before,
.msl-fondo--aurora::after {
  content: ''; position: absolute; width: 150%; height: 150%; left: -25%; top: -25%;
  background: radial-gradient(closest-side, var(--f1), transparent);
  opacity: .8; filter: blur(22px);
  animation: msl-aurora-a var(--f-vel) ease-in-out infinite alternate;
}
.msl-fondo--aurora::after {
  background: radial-gradient(closest-side, var(--f2), transparent);
  animation-name: msl-aurora-b; animation-duration: calc(var(--f-vel) * 1.3);
}
@keyframes msl-cambio { 0%, 100% { background-color: var(--f1); } 33% { background-color: var(--f2); } 66% { background-color: var(--f3); } }
@keyframes msl-mover  { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes msl-aurora-a { from { transform: translate(-28%, -22%) scale(.75); } to { transform: translate(22%, 18%) scale(1.05); } }
@keyframes msl-aurora-b { from { transform: translate(26%, 24%) scale(1); } to { transform: translate(-22%, -16%) scale(.7); } }

.msl-tarjeta__imagen { position: absolute; inset: 0; overflow: hidden; }
.msl-tarjeta__imagen img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--img-x) var(--img-y);
  transform: scale(var(--img-zoom)); transform-origin: var(--img-x) var(--img-y);
  background: rgba(127,127,127,.15);
}
.msl-tarjeta__capa { position: absolute; inset: 0; background: var(--capa-color); opacity: var(--capa-op); }
.msl-tarjeta__capa--degradado { background: linear-gradient(to top, var(--capa-color) 0%, transparent 78%); }

/* Enlace a la tarjeta completa: capa invisible POR DEBAJO del contenido.
   El contenido deja pasar los clics (pointer-events: none) salvo el botón,
   así no hay enlaces anidados y el botón sigue teniendo su propio enlace. */
.msl-tarjeta__enlace { position: absolute; inset: 0; border-radius: inherit; }
.msl-tarjeta__enlace:focus-visible { outline: 2px solid #ffaa00; outline-offset: -4px; }

.msl-tarjeta__contenido {
  position: relative;
  min-height: 100%;
  display: flex; flex-direction: column; justify-content: var(--alinear-v);
  padding: var(--relleno-v) var(--relleno-h);
  text-align: var(--alinear-h);
  color: var(--color-texto);
  pointer-events: none;
}
.msl-tarjeta__modulos { display: flex; flex-direction: column; gap: var(--hueco); }

/* Tarjeta con contenido que no cabe: difuminado abajo (solo el contenido) */
.msl-tarjeta.cortada .msl-tarjeta__contenido {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--alto-visible) - 70px), transparent calc(var(--alto-visible) - 6px));
          mask-image: linear-gradient(to bottom, #000 calc(var(--alto-visible) - 70px), transparent calc(var(--alto-visible) - 6px));
}

/* Al llegar al centro, el texto pasa de desenfocado a nítido */
.msl-tarjeta__contenido.msl-enfocando { animation: msl-enfoque var(--enf-dur, 700ms) ease-out both; }
@keyframes msl-enfoque { from { filter: blur(var(--enf-blur, 6px)); opacity: .35; } to { filter: blur(0); opacity: 1; } }

/* ---------- Contornos animados (luz que recorre el borde) ----------
   .contorno = el aro fino (máscara que deja solo el borde)
   .resplandor = la misma luz, desenfocada, por detrás: da el brillo exterior */
.msl-tarjeta__contorno,
.msl-tarjeta__resplandor {
  position: absolute; inset: 0; border-radius: var(--radio);
  pointer-events: none; transition: opacity .5s ease;
}
.msl-tarjeta__contorno {
  z-index: 2; padding: var(--c-grosor); opacity: var(--c-op);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.msl-tarjeta__resplandor { z-index: 0; inset: calc(var(--c-grosor) * -1); filter: blur(var(--c-brillo)); opacity: calc(var(--c-op) * .85); }

/* 1 · Luz que da la vuelta
   (0.1.4: se probó a pintarla una vez en una capa grande que gira; medido en la web real con un
   móvil simulado iba PEOR —21 fotogramas lentos frente a 16— por el tamaño de esa capa. Se queda así.) */
.msl-contorno--vuelta .msl-tarjeta__contorno,
.msl-contorno--vuelta .msl-tarjeta__resplandor {
  background: conic-gradient(from var(--msl-ang), transparent 0deg, transparent calc(360deg - var(--c-long)),
              var(--c2) calc(360deg - var(--c-long) * .45), var(--c1) 360deg);
  animation: msl-giro var(--c-vel) linear infinite;
}
@keyframes msl-giro { to { --msl-ang: 360deg; } }

/* 2 · Dos luces en espejo: del centro de arriba al centro de abajo por los dos lados */
.msl-contorno--espejo .msl-tarjeta__contorno,
.msl-contorno--espejo .msl-tarjeta__resplandor {
  /* Una sola luz baja por la derecha; la izquierda es su copia espejada (capa «esp-h»):
     así las dos son idénticas al píxel */
  background: conic-gradient(from 0deg,
    transparent 0deg, transparent calc(var(--msl-ang) - var(--c-long)),
    var(--c1) var(--msl-ang), transparent var(--msl-ang), transparent 360deg);
  animation: msl-espejo var(--c-vel) ease-in-out infinite;
}
@keyframes msl-espejo {
  0%   { --msl-ang: 0deg;   opacity: 0; }
  12%  { opacity: var(--c-op); }
  85%  { opacity: var(--c-op); }
  100% { --msl-ang: 180deg; opacity: 0; }
}

/* Espejado de cualquier efecto: copias del contorno volteadas (izquierda-derecha,
   arriba-abajo o las dos). Como el aro es simétrico, encajan exactas encima. */
.msl-esp-h  { transform: scaleX(-1); }
.msl-esp-v  { transform: scaleY(-1); }
.msl-esp-hv { transform: scale(-1, -1); }

/* 3 · Desde el eje horizontal (centro de los lados) hacia arriba y abajo */
.msl-contorno--eje .msl-tarjeta__contorno,
.msl-contorno--eje .msl-tarjeta__resplandor {
  background: conic-gradient(from 0deg,
    transparent 0deg,
    transparent calc(90deg - var(--msl-ang)), var(--c1) calc(90deg - var(--msl-ang)), transparent calc(90deg - var(--msl-ang) + var(--c-long)),
    transparent calc(90deg + var(--msl-ang) - var(--c-long)), var(--c1) calc(90deg + var(--msl-ang)), transparent calc(90deg + var(--msl-ang)),
    transparent calc(270deg - var(--msl-ang)), var(--c2) calc(270deg - var(--msl-ang)), transparent calc(270deg - var(--msl-ang) + var(--c-long)),
    transparent calc(270deg + var(--msl-ang) - var(--c-long)), var(--c2) calc(270deg + var(--msl-ang)), transparent calc(270deg + var(--msl-ang)),
    transparent 360deg);
  animation: msl-eje var(--c-vel) ease-in-out infinite;
}
@keyframes msl-eje {
  0%   { --msl-ang: 0deg;  opacity: 0; }
  12%  { opacity: var(--c-op); }
  85%  { opacity: var(--c-op); }
  100% { --msl-ang: 90deg; opacity: 0; }
}

/* 4 · Latido y cambio de color */
.msl-contorno--latido .msl-tarjeta__contorno,
.msl-contorno--latido .msl-tarjeta__resplandor {
  background-color: var(--c1);
  animation: msl-latido var(--c-vel) ease-in-out infinite;
}
@keyframes msl-latido {
  0%, 100% { background-color: var(--c1); opacity: calc(var(--c-op) * .3); }
  50%      { background-color: var(--c2); opacity: var(--c-op); }
}

/* Efectos solo en la central (por defecto): en las laterales se apagan y se
   detienen, que es más ligero y guía la mirada al centro. */
.msl-tarjeta:not(.es-centro):not(.msl-tarjeta--efectos-siempre) .msl-tarjeta__contorno,
.msl-tarjeta:not(.es-centro):not(.msl-tarjeta--efectos-siempre) .msl-tarjeta__resplandor {
  opacity: 0 !important; animation-play-state: paused;
}
/* Mientras las tarjetas se deslizan (0.1.4), la luz de los contornos se queda quieta y sigue al
   llegar: una animación parada no se repinta y la tarjeta se mueve con su dibujo ya hecho.
   Medido en la web real con un móvil simulado: de 16 a 6 fotogramas lentos (era lo que iba a
   saltos en Android). */
.msl-slider.msl-moviendo .msl-tarjeta__contorno,
.msl-slider.msl-moviendo .msl-tarjeta__resplandor,
.msl-slider.msl-moviendo .msl-boton__contorno,
.msl-slider.msl-arrastrando .msl-tarjeta__contorno,
.msl-slider.msl-arrastrando .msl-tarjeta__resplandor,
.msl-slider.msl-arrastrando .msl-boton__contorno { animation-play-state: paused; }

/* ---------- Módulos ---------- */
.msl-mod { min-width: 0; }
/* --msl-k (0.1.10): factor de encogido que pone el motor cuando una palabra no cabe (1 = tamaño original) */
.msl-titulo { margin: 0; font-size: calc(var(--tam) * var(--msl-k, 1)); line-height: 1.25; color: var(--color-titulo); }
.msl-texto  { margin: 0; font-size: calc(var(--tam) * var(--msl-k, 1)); line-height: 1.6; color: var(--color-texto); }
/* Mientras el motor mide, ninguna palabra se puede partir (así se detecta la que no cabe) */
.msl-slider.msl-midiendo .msl-titulo, .msl-slider.msl-midiendo .msl-texto, .msl-slider.msl-midiendo .msl-lista,
.msl-slider.msl-midiendo .msl-etiqueta, .msl-slider.msl-midiendo .msl-boton { overflow-wrap: normal !important; word-break: normal !important; hyphens: manual !important; }

.msl-icono { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; flex: none; }
.msl-icono--emoji { width: auto; height: auto; line-height: 1; vertical-align: baseline; }
img.msl-icono { object-fit: contain; }
.msl-icono-caja {
  display: inline-grid; place-items: center;
  font-size: var(--i-tam); color: var(--i-color); background: var(--i-fondo);
  width: calc(var(--i-tam) * var(--i-caja)); height: calc(var(--i-tam) * var(--i-caja));
  border-radius: var(--i-radio);
  border: var(--i-borde, 0px) solid var(--i-cborde, transparent);
}

/* Imagen de la tarjeta (como la foto de Testimonios): tamaño, esquinas en %
   (0 = cuadrada, 50 = círculo), borde, zoom y encuadre */
.msl-foto {
  display: inline-block; vertical-align: top; overflow: hidden;
  width: var(--fo-tam); max-width: 100%; aspect-ratio: var(--fo-prop);
  border-radius: var(--fo-radio); border: var(--fo-borde) solid var(--fo-cborde);
  background: rgba(127,127,127,.15);
}
.msl-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.msl-mod--sangrado { margin: calc(var(--relleno-v) * -1) calc(var(--relleno-h) * -1) 0; }
.msl-foto--sangrado { display: block; width: 100%; border-radius: 0; border: 0; }

.msl-etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--e-fondo); color: var(--e-texto);
  font-size: calc(11px * var(--msl-k, 1)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
}

.msl-lista { display: inline-flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; text-align: left; font-size: calc(var(--tam) * var(--msl-k, 1)); color: var(--color-texto); }
.msl-lista li { display: flex; gap: 9px; align-items: flex-start; line-height: 1.45; }
.msl-lista .msl-icono { color: var(--l-color); margin-top: .2em; }

.msl-estrellas { position: relative; display: inline-block; font-size: var(--tam); line-height: 1; letter-spacing: 2px; white-space: nowrap; }
.msl-estrellas__base  { color: var(--e-vacia); }
.msl-estrellas__lleno { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--e-color); }

/* Separadores: estáticos y animados */
.msl-sep { display: inline-flex; align-items: center; gap: 8px; width: var(--sep-ancho); vertical-align: middle; }
.msl-sep__linea { flex: 1; height: var(--sep-grosor); background: var(--sep-c); border-radius: 2px; position: relative; overflow: hidden; }
.msl-sep--desvanecido .msl-sep__linea { background: linear-gradient(90deg, transparent, var(--sep-c), transparent); }
.msl-sep--doble .msl-sep__linea { height: calc(var(--sep-grosor) * 2 + 3px); background: none; border-top: var(--sep-grosor) solid var(--sep-c); border-bottom: var(--sep-grosor) solid var(--sep-c); border-radius: 0; }
.msl-sep--rombo .msl-sep__linea:first-child { background: linear-gradient(90deg, transparent, var(--sep-c)); }
.msl-sep--rombo .msl-sep__linea:last-child  { background: linear-gradient(90deg, var(--sep-c), transparent); }
.msl-sep__rombo { width: 7px; height: 7px; transform: rotate(45deg); background: var(--sep-c2); flex: none; }
.msl-sep--puntos { width: auto; }
.msl-sep__punto { width: 5px; height: 5px; border-radius: 50%; background: var(--sep-c); }
.msl-sep__punto:nth-child(2) { background: var(--sep-c2); }
/* Animado 1 · crece desde el centro al llegar la tarjeta al centro */
.msl-sep--crece .msl-sep__linea { transform: scaleX(.12); transition: transform var(--sep-vel) cubic-bezier(.22,1,.36,1) .15s; }
.msl-tarjeta.es-centro .msl-sep--crece .msl-sep__linea { transform: scaleX(1); }
/* Animado 2 · brillo que recorre */
.msl-sep--brillo .msl-sep__linea {
  background: linear-gradient(90deg, var(--sep-c) 0 40%, var(--sep-c2) 50%, var(--sep-c) 60% 100%);
  background-size: 300% 100%; animation: msl-sep-brillo var(--sep-vel) linear infinite;
}
@keyframes msl-sep-brillo { from { background-position: 100% 0; } to { background-position: 0% 0; } }
/* Animado 3 · degradado que fluye */
.msl-sep--degradado .msl-sep__linea {
  background: linear-gradient(90deg, var(--sep-c), var(--sep-c2), var(--sep-c));
  background-size: 200% 100%; animation: msl-sep-fluye var(--sep-vel) linear infinite;
}
@keyframes msl-sep-fluye { from { background-position: 0 0; } to { background-position: 200% 0; } }
/* Animado 4 · del centro a los extremos */
.msl-sep--extremos .msl-sep__linea::before,
.msl-sep--extremos .msl-sep__linea::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 50%;
  background: linear-gradient(90deg, transparent, var(--sep-c2), transparent) no-repeat;
  background-size: 40% 100%;
}
.msl-sep--extremos .msl-sep__linea::before { left: 0;   animation: msl-sep-izq var(--sep-vel) ease-in infinite; }
.msl-sep--extremos .msl-sep__linea::after  { left: 50%; animation: msl-sep-der var(--sep-vel) ease-in infinite; }
@keyframes msl-sep-der { from { background-position: -67% 0; } to { background-position: 167% 0; } }
@keyframes msl-sep-izq { from { background-position: 167% 0; } to { background-position: -67% 0; } }

/* Botón */
.msl-boton {
  position: relative; isolation: isolate; overflow: hidden;
  pointer-events: auto;                        /* recibe clics aunque el contenido no */
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: var(--b-pv) var(--b-ph);
  border-radius: var(--b-radio);
  background: var(--b-fondo); color: var(--b-texto);
  border: var(--b-ba) solid var(--b-borde);
  font-family: inherit; font-weight: 600; font-size: calc(var(--b-tl) * var(--msl-k, 1)); line-height: 1.2; letter-spacing: .02em;
  text-decoration: none; cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.msl-boton:hover, .msl-boton:focus-visible { background: var(--b-fondo-h); color: var(--b-texto-h); border-color: var(--b-borde-h); }
.msl-boton:focus-visible { outline: 2px solid #ffaa00; outline-offset: 3px; }
.msl-boton--completo { display: flex; width: 100%; }
.msl-boton .msl-icono { transition: transform .25s; }
.msl-boton--elevar:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.msl-boton--flecha:hover .msl-icono { transform: translateX(4px); }
.msl-boton--brillo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s ease;
}
.msl-boton--brillo:hover::after { transform: translateX(120%); }
.msl-boton--relleno:hover { background: var(--b-fondo); }
.msl-boton--relleno::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--b-fondo-h); transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.msl-boton--relleno:hover::before { transform: scaleX(1); }
/* Contorno animado pequeño del botón */
.msl-boton__contorno {
  position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--msl-ang), transparent 0deg, transparent 220deg, var(--bc2) 300deg, var(--bc1) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);         mask-composite: exclude;
  animation: msl-giro var(--bc-vel) linear infinite;
}

/* ---------- Flechas ---------- */
.msl-slider__flecha {
  position: absolute; top: var(--fl-centro, 50%); z-index: 200;   /* --fl-centro (0.1.11): centro del hueco reservado */
  width: var(--fl-tam); height: var(--fl-tam); margin-top: calc(var(--fl-tam) / -2);
  display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--fl-fondo); color: var(--fl-color);
  box-shadow: 0 4px 14px rgba(0,0,0,.16);
  transition: transform .2s, opacity .2s;
}
.msl-slider__flecha svg { width: 46%; height: 46%; }
.msl-slider__flecha:hover { transform: scale(1.08); }
.msl-slider__flecha:focus-visible { outline: 2px solid #ffaa00; outline-offset: 3px; }
.msl-slider__flecha[disabled] { opacity: .35; cursor: default; transform: none; }
.msl-slider__flecha--ant { left: 6px; }
.msl-slider__flecha--sig { right: 6px; }

/* Flechas en barra (móvil, 0.1.10): rectángulo vertical pegado al borde de la pantalla (o del fondo
   del slider). El motor calcula --fl-izq/--fl-der (negativos: salen del slider hasta el borde).
   Solo se redondean las esquinas de dentro; la zona táctil (::after, invisible) entra hacia la
   pantalla para que sea fácil de pulsar aunque la barra sea estrecha. */
.msl-slider.msl-flechas-barra .msl-slider__flecha {
  width: var(--fl-b-ancho); height: var(--fl-b-alto); margin-top: calc(var(--fl-b-alto) / -2);
}
.msl-slider.msl-flechas-barra .msl-slider__flecha svg { width: var(--fl-b-icono); height: var(--fl-b-icono); }
.msl-slider.msl-flechas-barra .msl-slider__flecha:hover { transform: none; }
.msl-slider.msl-flechas-barra .msl-slider__flecha--ant { left: var(--fl-izq, 0px); border-radius: 0 var(--fl-b-radio) var(--fl-b-radio) 0; }
.msl-slider.msl-flechas-barra .msl-slider__flecha--sig { right: var(--fl-der, 0px); border-radius: var(--fl-b-radio) 0 0 var(--fl-b-radio); }
.msl-slider.msl-flechas-barra .msl-slider__flecha::after { content: ''; position: absolute; top: 0; bottom: 0; width: var(--fl-b-zona); }
.msl-slider.msl-flechas-barra .msl-slider__flecha--ant::after { left: 0; }
.msl-slider.msl-flechas-barra .msl-slider__flecha--sig::after { right: 0; }
/* Con fondo, el slider recorta lo que sale por sus lados (ver arriba): con flechas en barra, el recorte
   pasa al escenario (mismos bordes: los del fondo) para que las flechas puedan salir hasta la pantalla */
.msl-slider--con-fondo.msl-flechas-barra { overflow-x: visible; }
.msl-slider--con-fondo.msl-flechas-barra .msl-slider__escenario { clip-path: inset(-100vh calc(var(--relleno-lateral-slider, 0px) * -1)); }

/* ---------- Puntos ---------- */
.msl-slider__puntos { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.msl-punto { appearance: none; border: 0; background: none; padding: 9px 5px; cursor: pointer; display: grid; place-items: center; }
.msl-punto span {
  position: relative; display: block; overflow: hidden;
  width: 8px; height: 8px; border-radius: 99px; background: var(--pt-color);
  transition: width .35s ease, background-color .35s ease, transform .35s ease;
}
.msl-punto:focus-visible { outline: 2px solid #ffaa00; outline-offset: 1px; border-radius: 6px; }
.msl-slider--puntos-punto .msl-punto.activo span { background: var(--pt-activo); transform: scale(1.35); }
.msl-slider--puntos-barra .msl-punto.activo span { width: 28px; }
.msl-slider--puntos-barra .msl-punto.activo span::after {   /* barra de progreso del autoplay */
  content: ''; position: absolute; inset: 0; background: var(--pt-activo);
  transform-origin: left; transform: scaleX(var(--progreso, 1));
}

/* ---------- Firma (abajo de todo) ---------- */
.msl-slider__firma { margin-top: 6px; padding: 0 12px; color: inherit; letter-spacing: .03em; }
.msl-slider__firma a { color: inherit; text-decoration: none; }
.msl-slider__firma a:hover { text-decoration: underline; }

/* ---------- Blindaje frente al tema de la web (libreta MYEM, 3.12c) ----------
   Astra y los kits de Elementor dan estilo propio a botones, enlaces, imágenes,
   títulos y listas. Se repiten aquí los valores del slider con selectores más
   específicos para que manden siempre los configurados. */
.msl-slider button.msl-slider__flecha,
.msl-slider button.msl-slider__flecha:hover,
.msl-slider button.msl-slider__flecha:focus,
.msl-slider button.msl-slider__flecha:active { background: var(--fl-fondo); color: var(--fl-color); border: 0; padding: 0; min-height: 0; line-height: 1; text-transform: none; box-shadow: 0 4px 14px rgba(0,0,0,.16); }
.msl-slider button.msl-punto,
.msl-slider button.msl-punto:hover,
.msl-slider button.msl-punto:focus,
.msl-slider button.msl-punto:active { background: none; border: 0; padding: 9px 5px; min-height: 0; box-shadow: none; }
.msl-slider a.msl-boton,
.msl-slider a.msl-boton:visited { color: var(--b-texto); text-decoration: none; }
.msl-slider a.msl-boton:hover,
.msl-slider a.msl-boton:focus,
.msl-slider a.msl-boton:active { color: var(--b-texto-h); text-decoration: none; }
.msl-slider .msl-tarjeta__imagen img,
.msl-slider .msl-foto img { width: 100%; height: 100%; max-width: none; margin: 0; border: 0; box-shadow: none; }
.msl-slider .msl-slider__fondo img.msl-slider__fondo-img { max-width: none; margin: 0; }
.msl-slider h2.msl-titulo, .msl-slider h3.msl-titulo, .msl-slider h4.msl-titulo,
.msl-slider p.msl-texto { margin: 0; padding: 0; letter-spacing: normal; text-transform: none; font-family: inherit; }
.msl-slider h2.msl-titulo, .msl-slider h3.msl-titulo, .msl-slider h4.msl-titulo { color: var(--color-titulo); }
.msl-slider ul.msl-lista { margin: 0; padding: 0; list-style: none; }
.msl-slider ul.msl-lista li { margin: 0; padding: 0; list-style: none; }
.msl-slider ul.msl-lista li::before { content: none; }
.msl-slider .msl-slider__firma a,
.msl-slider .msl-slider__firma a:hover { color: inherit; }

/* ---------- Pausas y movimiento reducido ---------- */
/* Fuera de pantalla: todas las animaciones quietas (ahorra batería) */
.msl-slider.msl-pausado *,
.msl-slider.msl-pausado *::before,
.msl-slider.msl-pausado *::after { animation-play-state: paused !important; }
/* «Reducir movimiento» del sistema: sin animaciones ni transiciones */
.msl-slider.msl-reducido *,
.msl-slider.msl-reducido *::before,
.msl-slider.msl-reducido *::after { animation: none !important; transition-duration: 0ms !important; }