/* ── Meraki Testimonial Widget ────────────────────────────────────────────── */

.meraki-testimonial-wrap *,
.meraki-testimonial-wrap *::before,
.meraki-testimonial-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.meraki-testimonial-wrap {
  position: relative;
  padding: 30px 0 50px;
  /* CSS variables — sobreescritas por el inline <style> del widget */
  --slider-bg:     #ffffff;
  --overlay-width: 26%;
}

/* ── Viewport: recorta lo que sobresale ──────────────────────────────────── */
.meraki-testimonial-wrap .meraki-testimonial-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* height inyectada por <style> inline del widget */
}

/* ── Slide ───────────────────────────────────────────────────────────────── */
.meraki-testimonial-wrap .meraki-testimonial-slide {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
  will-change: left, width;
  /* left, width, border-radius → slider.js */
}

.meraki-testimonial-wrap .meraki-testimonial-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  /* padding → Elementor selectors (content_padding) */
}

/* ── 9 posiciones del contenido — mueven .meraki-testimonial-inner con margin auto ── */
.meraki-testimonial-wrap .meraki-testimonial-content[data-content-position="top-left"]      .meraki-testimonial-inner { margin-bottom: auto; align-items: flex-start; text-align: left; }
.meraki-testimonial-wrap .meraki-testimonial-content[data-content-position="top-center"]    .meraki-testimonial-inner { margin-bottom: auto; align-items: center;     text-align: center; }
.meraki-testimonial-wrap .meraki-testimonial-content[data-content-position="top-right"]     .meraki-testimonial-inner { margin-bottom: auto; align-items: flex-end;   text-align: right; }
.meraki-testimonial-wrap .meraki-testimonial-content[data-content-position="middle-left"]   .meraki-testimonial-inner { margin-top: auto; margin-bottom: auto; align-items: flex-start; text-align: left; }
.meraki-testimonial-wrap .meraki-testimonial-content[data-content-position="middle-center"] .meraki-testimonial-inner { margin-top: auto; margin-bottom: auto; align-items: center;     text-align: center; }
.meraki-testimonial-wrap .meraki-testimonial-content[data-content-position="middle-right"]  .meraki-testimonial-inner { margin-top: auto; margin-bottom: auto; align-items: flex-end;   text-align: right; }
.meraki-testimonial-wrap .meraki-testimonial-content[data-content-position="bottom-left"]   .meraki-testimonial-inner { margin-top: auto; align-items: flex-start; text-align: left; }
.meraki-testimonial-wrap .meraki-testimonial-content[data-content-position="bottom-center"] .meraki-testimonial-inner { margin-top: auto; align-items: center;     text-align: center; }
.meraki-testimonial-wrap .meraki-testimonial-content[data-content-position="bottom-right"]  .meraki-testimonial-inner { margin-top: auto; align-items: flex-end;   text-align: right; }

/* ── Inner: agrupa quote + author como bloque único ─────────────────────── */
.meraki-testimonial-wrap .meraki-testimonial-inner {
  display: flex;
  flex-direction: column;
  /* gap → Elementor selectors (content_gap) */
}

.meraki-testimonial-wrap .meraki-testimonial-quote {
  line-height: 1.7;
  /* font-size, font-style, color → Elementor selectors */
}

.meraki-testimonial-wrap .meraki-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Contenido visible solo en slide activo — con delay de aparición */
.meraki-testimonial-wrap .meraki-testimonial-slide .meraki-testimonial-content {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease 0s;
}
.meraki-testimonial-wrap .meraki-testimonial-slide.is-active .meraki-testimonial-content {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.35s ease 0.15s;
}

.meraki-testimonial-wrap .meraki-testimonial-avatar {
  display: none; /* default; Elementor control (show_avatar) lo muestra con display:block */
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  /* width/height → Elementor selectors (avatar_size) */
}

.meraki-testimonial-wrap .meraki-testimonial-author-info {
  display: flex;
  flex-direction: column;
  /* gap → Elementor selectors (author_info_gap) */
}

.meraki-testimonial-wrap .meraki-testimonial-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.meraki-testimonial-wrap .meraki-testimonial-meta {
  font-size: 0.8rem;
}

/* ── Overlays laterales (z-index 5, pointer-events none) ─────────────────── */
.meraki-testimonial-wrap .meraki-testimonial-overlay-left,
.meraki-testimonial-wrap .meraki-testimonial-overlay-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--overlay-width);
  pointer-events: none;
  z-index: 5;
}

.meraki-testimonial-wrap .meraki-testimonial-overlay-left {
  left: 0;
  background: linear-gradient(to right, var(--slider-bg) 0%, transparent 100%);
}

.meraki-testimonial-wrap .meraki-testimonial-overlay-right {
  right: 0;
  background: linear-gradient(to left, var(--slider-bg) 0%, transparent 100%);
}

/* ── Botones de navegación (z-index 10 siempre) ──────────────────────────── */
.meraki-testimonial-wrap .meraki-testimonial-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 10;
  transition: background 0.2s;
  /* background y color inyectados por <style> inline del widget */
}

/* ── Posición: sides-inside — botones dentro del slide activo, en sus bordes */
.meraki-testimonial-wrap.arrows-sides-inside .meraki-testimonial-prev,
.meraki-testimonial-wrap.arrows-sides-inside .meraki-testimonial-next {
  position: absolute;
  /* top, left y transform calculados por JS */
}

/* ── Posición: sides-outside — botones en el espacio entre slides ────────── */
.meraki-testimonial-wrap.arrows-sides-outside .meraki-testimonial-prev,
.meraki-testimonial-wrap.arrows-sides-outside .meraki-testimonial-next {
  position: absolute;
  /* top, left/right calculados por JS */
}

/* ── Dots independientes (cuando no están en un nav container) ───────────── */
.meraki-testimonial-wrap > .meraki-testimonial-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

/* ── Nav container (creado por JS para modos bottom) ─────────────────────── */
.meraki-testimonial-wrap .meraki-testimonial-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

/* bottom-split: [←  ● ● ●  →] centrado */
.meraki-testimonial-wrap.arrows-bottom-split .meraki-testimonial-nav {
  justify-content: center;
}

/* bottom-left: [←  →  ● ● ●] alineado a la izquierda */
.meraki-testimonial-wrap.arrows-bottom-left .meraki-testimonial-nav {
  justify-content: flex-start;
}

/* bottom-right: [● ● ●  ←  →] alineado a la derecha */
.meraki-testimonial-wrap.arrows-bottom-right .meraki-testimonial-nav {
  justify-content: flex-end;
}

/* Dots dentro del nav container: sin margen propio */
.meraki-testimonial-wrap .meraki-testimonial-nav .meraki-testimonial-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
}

/* ── Dots ────────────────────────────────────────────────────────────────── */
.meraki-testimonial-wrap .meraki-testimonial-dot {
  height: 4px;
  width: 28px;
  border-radius: 2px;
  opacity: 0.4;
  cursor: pointer;
  transition: width 0.35s ease, opacity 0.35s ease;
  /* background inyectado por <style> inline del widget */
}

.meraki-testimonial-wrap .meraki-testimonial-dot.is-active {
  width: 64px;
  opacity: 1;
}