/* ═══════════════════════════════════════════════════════════════
   TESSERA · Paquete de animaciones (OPCIONAL) — estilos de apoyo
   ───────────────────────────────────────────────────────────────
   Para QUITARLAS TODAS:
     1) borra este archivo y js/animations.js
     2) quita en index.html y careers.html las 3 etiquetas de
        animaciones (este <link> + los 2 <script> de lenis y animations)
   Todo va dentro de prefers-reduced-motion: no-preference, así que
   quien tenga el movimiento reducido en su sistema no ve nada de esto.
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

  /* 0 · Cortinilla de carga / transición entre páginas */
  .page-curtain {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(135deg, #202031 0%, #587579 50%, #FBE0A0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform: translateY(0);
    animation: curtainUp .7s .5s cubic-bezier(.76, 0, .24, 1) forwards;
  }
  .page-curtain span {
    font-family: var(--ff-logo);
    font-size: clamp(2rem, 7vw, 3.6rem);
    letter-spacing: .28em;
    text-indent: .28em;
    color: var(--beige);
    opacity: 0;
    transform: translateY(10px);
    animation: curtainWord .45s ease forwards;
  }
  @keyframes curtainWord { to { opacity: 1; transform: translateY(0); } }
  @keyframes curtainUp   { to { transform: translateY(-100%); } }

  /* 1 · Scroll suave (Lenis) */
  html.lenis,
  html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-stopped { overflow: hidden; }

  /* 2 · Titulares que se revelan palabra a palabra */
  .split-ready .sr-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: .12em;
    margin-bottom: -.12em;
  }
  .split-ready .sr-word > span {
    display: inline-block;
    transform: translateY(110%);
    transition: transform .7s cubic-bezier(.16, 1, .3, 1);
  }
  .split-in .sr-word > span { transform: translateY(0); }

  /* 4 · Tilt 3D — transición suave al soltar */
  .testimonial-card,
  .svc-detail-photo { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }

  /* 5 · Parallax — la foto debe poder deslizarse dentro de su marco */
  .svc-detail-photo img { will-change: transform; }
}

/* ═══════════════════════════════════════════════════════════════
   Testimonios sobre fondo de partículas WebGL (parte del paquete)
   Va fuera de prefers-reduced-motion: la sección queda oscura igual,
   solo que sin movimiento de partículas si está desactivado.
   ═══════════════════════════════════════════════════════════════ */
#casos { background: var(--navy); }
#casos .section-inner { position: relative; z-index: 1; }

.casos-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.casos-particles canvas { position: absolute; inset: 0; display: block; }

/* Cabecera y controles en claro sobre el navy */
#casos .section-label { color: var(--teal-lt); }
#casos .section-title { color: var(--beige); }
#casos .section-title strong { color: var(--yellow); }
#casos .carousel-btn { border-color: rgba(240,232,222,.4); color: rgba(240,232,222,.8); }
#casos .carousel-btn:hover { background: var(--teal); border-color: var(--teal); color: var(--beige); }
#casos .carousel-dot { background: rgba(240,232,222,.4); }
#casos .carousel-dot.active { background: var(--yellow); box-shadow: 0 0 8px rgba(251,224,160,.4); }

/* Tarjetas "glass" brillantes para que destaquen sobre el fondo oscuro */
#casos .testimonial-card {
  background: rgba(240, 232, 222, 0.06);
  border-color: rgba(240, 232, 222, 0.15);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* Solo cambia el fondo y la sombra al pasar el ratón, los textos NO */
#casos .testimonial-card:hover {
  background: rgba(240, 232, 222, 0.12);
  border-color: rgba(240, 232, 222, 0.35);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}

/* ── TEXTOS Y ELEMENTOS FIJOS (Forzamos a que ignoren los hover de styles.css) ── */

/* Texto principal de la cita */
#casos .testimonial-card > p,
#casos .testimonial-card:hover > p { 
  color: var(--beige) !important; 
}

/* Nombre del autor */
#casos .author-info strong,
#casos .testimonial-card:hover .author-info strong { 
  color: #fff !important; 
}

/* Cargo del autor */
#casos .author-info span,
#casos .testimonial-card:hover .author-info span { 
  color: rgba(240,232,222,.75) !important; 
}

/* Avatar del autor (círculo con las iniciales) */
#casos .author-avatar,
#casos .testimonial-card:hover .author-avatar {
  background: var(--teal) !important;
  color: var(--beige) !important;
  border: 1px solid var(--teal) !important;
}

/* Comillas gigantes */
#casos .quote-mark,
#casos .testimonial-card:hover .quote-mark { 
  color: var(--teal-lt) !important; 
  opacity: .4 !important; 
}

/* Etiqueta de resultado (ej. "Financiación conseguida") */
#casos .testimonial-result,
#casos .testimonial-card:hover .testimonial-result {
  color: var(--yellow) !important;
  border-color: var(--yellow) !important;
  background: rgba(251,224,160,.08) !important;
}