/*
 * 17-testimonials.css - Testimonios en tres columnas 3D con scroll infinito.
 * Origen: index.html, <style> #3 (desde la linea 1). Contenido identico al original.
 */
/* ================================
   TESTIMONIOS — columnas 3D
   Adaptación nativa para este HTML
   (sin React/Tailwind, mantiene el efecto Motion)
================================ */
.testimonials-section{
  position:relative;
  padding-top:clamp(70px,9vw,120px);
  padding-bottom:clamp(70px,9vw,120px);
  overflow:hidden;
}
.testimonials-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  max-width:680px;
  margin:0 auto;
  text-align:center;
}
.testimonials-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 16px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 30px rgba(0,0,0,.12);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.testimonials-head h2{
  margin:18px 0 0;
  font-size:clamp(2rem,4.5vw,4.4rem);
  line-height:.98;
  letter-spacing:-.055em;
}
.testimonials-head p{
  max-width:540px;
  margin:18px auto 0;
  opacity:.68;
  line-height:1.7;
}
.testimonials-columns-wrap{
  position:relative;
  display:flex;
  justify-content:center;
  gap:24px;
  max-width:1180px;
  height:740px;
  margin:52px auto 0;
  overflow:hidden;
  padding:0 8px;
  mask-image:linear-gradient(to bottom,transparent 0%,black 16%,black 84%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 16%,black 84%,transparent 100%);
}
.testimonials-column{
  flex:0 1 350px;
  min-width:0;
  overflow:hidden;
  position:relative;
}
.testimonials-track{
  display:flex;
  flex-direction:column;
  gap:24px;
  padding-bottom:24px;
  will-change:transform;
  animation: testimonialsScroll 15s linear infinite;
}
.testimonials-column:nth-child(2) .testimonials-track{animation-duration:19s}
.testimonials-column:nth-child(3) .testimonials-track{animation-duration:17s}
.testimonial-card{
  width:100%;
  box-sizing:border-box;
  padding:32px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(240px 160px at 15% 0%,rgba(255,255,255,.08),transparent 70%),
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 20px 55px rgba(0,0,0,.18),
    0 0 40px rgba(125,105,255,.055);
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .45s ease,box-shadow .45s ease;
}
.testimonial-card:hover{
  transform:translateY(-5px) scale(1.012);
  border-color:rgba(255,255,255,.23);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 25px 65px rgba(0,0,0,.24),0 0 55px rgba(125,105,255,.09);
}
.testimonial-text{
  font-size:1rem;
  line-height:1.72;
  letter-spacing:-.015em;
  color:rgba(255,255,255,.9);
}
.testimonial-author{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:20px;
}
.testimonial-author img{
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.testimonial-author strong{
  display:block;
  font-size:.92rem;
  line-height:1.2;
  letter-spacing:-.02em;
}
.testimonial-author span{
  display:block;
  margin-top:3px;
  font-size:.78rem;
  line-height:1.2;
  opacity:.52;
}
@keyframes testimonialsScroll{
  from{transform:translateY(0)}
  to{transform:translateY(-50%)}
}
@media (max-width:900px){
  .testimonials-columns-wrap{gap:18px}
  .testimonials-column{flex-basis:320px}
  .testimonial-card{padding:27px;border-radius:24px}
}
@media (max-width:700px){
  .testimonials-section{padding-top:70px;padding-bottom:70px}
  .testimonials-columns-wrap{height:680px;gap:14px;margin-top:40px}
  .testimonials-column{flex-basis:calc(100vw - 48px);max-width:390px}
  .testimonials-column:nth-child(2),
  .testimonials-column:nth-child(3){display:none}
  .testimonial-card{padding:25px}
}
@media (prefers-reduced-motion:reduce){
  .testimonials-track{animation:none}
  .testimonial-card{transition:none}
}