/* ============================================================================
   SECCIÓN · TESTIMONIOS (oscuro) — #resultados
   Carrusel HORIZONTAL: track en línea + flechas prev/next + dots. JS propio.
   Clean / premium · mobile-first. Solo vars de tokens.css.
   ============================================================================ */

.sec-testimonios .s-head { max-width: 760px; margin-bottom: clamp(36px, 6vw, 56px); }

.sec-testimonios .vid-carousel { position: relative; }
.sec-testimonios .vid-viewport { overflow: hidden; }

.sec-testimonios .vid-track {
  display: flex; gap: var(--s-5);
  transition: transform 0.55s var(--ease-out);
  will-change: transform;
}

/* ---- Tarjeta (en línea) ---- */
.sec-testimonios .vid-slide {
  flex: 0 0 auto;
  width: min(84vw, 300px);
  display: flex; flex-direction: column;
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* ---- Vídeo: marco cuadrado uniforme que cubre el frame ---- */
/* Marco 9:16 = proporción nativa de los vídeos (720x1280) → se ven completos, sin recorte ni franjas */
.sec-testimonios .vid-video { position: relative; aspect-ratio: 9 / 16; background: var(--c-black); overflow: hidden; }
.sec-testimonios .vid-video > video,
.sec-testimonios .vid-mp4 { width: 100%; height: 100%; object-fit: cover; display: block; }

/* PANTALLA COMPLETA: respetar la proporción nativa (no estirar). El vídeo se ve
   completo y centrado, con barras donde toque (vertical en desktop). */
.sec-testimonios video:fullscreen { object-fit: contain; width: 100%; height: 100%; background: #000; }
.sec-testimonios video:-webkit-full-screen { object-fit: contain; width: 100%; height: 100%; background: #000; }
.sec-testimonios .vid-c { display: none; }

/* ---- Cuerpo ---- */
.sec-testimonios .vid-info { display: flex; flex-direction: column; flex: 1; padding: var(--s-5); }
.sec-testimonios .vid-tag { display: none; }
.sec-testimonios .vid-name { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--d-text-strong); margin-bottom: 3px; }
.sec-testimonios .vid-sector { font-size: var(--fs-small); color: var(--d-text-dim); }
.sec-testimonios .vid-rule { display: block; width: 28px; height: 1px; background: var(--d-line); margin: var(--s-4) 0; }
.sec-testimonios .vid-quote { margin: 0; padding: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--d-text); flex: 1; }
.sec-testimonios .vid-quote .em-red, .sec-testimonios .vid-quote .accent { color: var(--red); font-style: italic; }
.sec-testimonios .vid-glyph { display: block; font-family: var(--font-display); font-style: italic; font-size: 40px; line-height: 0.4; color: var(--red); opacity: 0.5; margin-bottom: var(--s-3); }
.sec-testimonios .vid-stars { display: flex; gap: 3px; margin-top: var(--s-5); }
.sec-testimonios .vid-star { width: 15px; height: 15px; fill: var(--c-cream); opacity: 0.78; }

/* ---- Navegación: flechas A LOS LADOS (centradas sobre el vídeo) + dots debajo ---- */
.sec-testimonios .vid-carousel { position: relative; }
.sec-testimonios .vid-arrow {
  position: absolute; top: calc(min(84vw, 300px) * 0.889); transform: translateY(-50%);
  z-index: 5;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: rgba(11, 11, 11, 0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(233, 225, 217, 0.30);
  color: #fff; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sec-testimonios .vid-prev { left: clamp(2px, 1vw, 14px); }
.sec-testimonios .vid-next { right: clamp(2px, 1vw, 14px); }
.sec-testimonios .vid-arrow svg { width: 20px; height: 20px; }
.sec-testimonios .vid-arrow:hover { background: var(--red); border-color: var(--red); transform: translateY(-50%) scale(1.08); }
.sec-testimonios .vid-arrow:active { transform: translateY(-50%) scale(0.95); }
.sec-testimonios .vid-arrow:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.sec-testimonios .vid-dots { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: var(--s-6); }
.sec-testimonios .vid-dot {
  width: 9px; height: 9px; padding: 0; font-size: 0;
  border-radius: 50%; background: transparent;
  border: 1px solid rgba(233, 225, 217, 0.35); cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sec-testimonios .vid-dot:hover { border-color: var(--c-cream); }
.sec-testimonios .vid-dot.is-active { background: var(--red); border-color: var(--red); transform: scale(1.25); }
.sec-testimonios .vid-dot:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .sec-testimonios .vid-track { transition: none; }
}