/* ==========================================================================
   CAUXE — Testimonios reales en video (2026-10-08)
   Sweaden, Coop Centro e Inmedical. Al tocar la foto se abre el video completo.
   Sección anterior: archivo/portada-cauxe02/testimonios-v1.html
   ========================================================================== */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); margin-top: clamp(8px, 2vw, 16px); }
.testi { margin: 0; display: flex; flex-direction: column; border-radius: 24px; border: 1px solid var(--border-strong); background: var(--surface); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s, border-color .5s; }
.testi:hover { transform: translateY(-4px); border-color: rgba(34, 211, 238, .35); box-shadow: 0 30px 60px -30px rgba(34, 211, 238, .35); }
.testi-media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; cursor: pointer; background: #0b1733; overflow: hidden; }
.testi-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.testi:hover .testi-media img { transform: scale(1.04); }
.testi-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5, 9, 20, .55)); pointer-events: none; }
.testi-media .play { position: absolute; left: 18px; bottom: 18px; z-index: 2; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); box-shadow: 0 14px 34px -8px rgba(34, 211, 238, .75); transition: transform .4s var(--ease); }
.testi-media:hover .play { transform: scale(1.08); }
.testi-media .play::before { content: ""; border-left: 16px solid #03101f; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.testi-time { position: absolute; right: 16px; bottom: 22px; z-index: 2; padding: 4px 10px; border-radius: 999px; font: 600 .74rem var(--font-mono); color: #fff; background: rgba(5, 9, 20, .55); backdrop-filter: blur(6px); }
.testi blockquote { margin: 0; padding: 22px 24px 0; font: 500 1.02rem/1.55 var(--font-body); color: var(--text); flex: 1; }
.testi figcaption { display: flex; flex-direction: column; gap: 2px; padding: 16px 24px 22px; }
.testi figcaption b { font: 700 1rem var(--font-display); color: var(--text); }
.testi figcaption span { font-size: .85rem; color: var(--muted); }
[data-theme="light"] .testi { background: #fff; box-shadow: 0 20px 50px -30px rgba(15, 35, 75, .35); }
@media (max-width: 900px) {
  .testi-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}
/* 2026-10-14: logo oficial de la empresa sobre la portada (Sweaden, Inmedical). Coop Centro ya lo muestra en la foto.
   Versión anterior: archivo/portada-cauxe02/testimonios-portadas-v1/ */
.testi-media .testi-logo { position: absolute; top: 16px; left: 16px; z-index: 2; display: flex; align-items: center; padding: 10px 14px; border-radius: 14px; background: rgba(5, 12, 28, .42); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .55); }
.testi-media .testi-logo img { position: static; width: auto; height: 22px; object-fit: contain; transform: none !important; transition: none; }
.testi-media::before { content: ""; position: absolute; inset: 0 0 auto; height: 30%; z-index: 1; background: linear-gradient(180deg, rgba(5, 9, 20, .28), transparent); pointer-events: none; }
/* 2026-10-14 (2.ª vuelta, pedido del equipo): logos en sus colores reales en las 3 portadas (Coop Centro incluido), sobre una
   placa blanca con un borde de luz cobalto→esmeralda que gira despacio. Antes: logos blancos sobre vidrio oscuro, sin Coop Centro.
   Versión anterior: archivo/portada-cauxe02/testimonios-logos-v2/ */
@property --tl-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.testi-media .testi-logo {
  top: 14px; left: 14px; padding: 9px 14px; border-radius: 14px; border: 1.5px solid transparent;
  background: linear-gradient(#fff, #f7faff) padding-box,
    conic-gradient(from var(--tl-a), rgba(37, 99, 235, .25), #2563eb, #10b981, rgba(16, 185, 129, .25) 45%, rgba(37, 99, 235, .25)) border-box;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 12px 30px -12px rgba(2, 10, 30, .55), 0 0 0 4px rgba(255, 255, 255, .18);
  animation: tlSpin 7s linear infinite;
}
.testi-media .testi-logo img { height: 28px; }
.testi:nth-child(2) .testi-logo { animation-delay: -2.3s; } .testi:nth-child(3) .testi-logo { animation-delay: -4.6s; }
@keyframes tlSpin { to { --tl-a: 360deg; } }
@media (max-width: 560px) { .testi-media .testi-logo img { height: 24px; } }
@media (prefers-reduced-motion: reduce) { .testi-media .testi-logo { animation: none; } }
/* 2026-10-15 (pedido del equipo): "Cliente destacado:" antes del nombre. Antes: archivo/portada-cauxe02/cliente-destacado-v1/ */
.testi figcaption .testi-tag { font: 600 .7rem var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }