/* ===== Página Testimonios (testimonios.html) — se carga junto a styles.css ===== */

/* En esta página el header no se superpone al hero (en la home es absoluto sobre el arte) */
.t-body .site-header{position:static}

/* Contenedor angosto propio de esta página (el diseño usa ~1108px) */
.t-container{width:calc(100% - 32px);max-width:1108px;margin-inline:auto}
@media (min-width:768px){.t-container{width:calc(100% - 64px)}}

/* --- Hero --- */
.t-hero{background:var(--white);text-align:center;padding:48px 0 0}
.t-hero__art{width:min(637px,100%);height:auto;margin-inline:auto}
.t-hero__title{max-width:690px;margin:28px auto 0;font-size:38px;line-height:1.05;font-weight:500;letter-spacing:-1.52px;color:#3A3634}
.t-hero__subtitle{max-width:520px;margin:22px auto 0;font-size:18px;line-height:1.63;color:var(--body)}
@media (min-width:768px){
  .t-hero{padding-top:56px}
  .t-hero__title{font-size:48px;letter-spacing:-1.92px}
}

/* --- Hero: escena animada (cursores de usuarios) ---
   El arte es un SVG de 1274x700 que escala con el ancho; todas las medidas de
   abajo están en unidades del viewBox (1 unidad = 0.5px a tamaño completo). */
.t-scene{display:block}
.t-scene__grid{fill:none;stroke:#EBD1C8;stroke-width:1.5}
.t-scene__name{font-family:var(--font);font-size:23.5px;font-weight:500;letter-spacing:-0.01em}
.t-scene__arrow{fill:#0A0A0A;stroke:#0A0A0A;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;transform-box:fill-box;transform-origin:100% 0}
.t-scene__chip{transform-box:fill-box;transform-origin:center}
.t-scene__ring{fill:none;stroke:var(--c);stroke-width:3.5}
.t-scene__flash{fill:var(--c)}
.t-scene__ring,.t-scene__flash{opacity:0;transform-box:fill-box;transform-origin:center}

/* Cada usuario: color del clic, turno del clic (--d), entrada (--di) y deriva
   propia (--fx/--fy recorrido, --fd duración, --fdel desfase para que no vayan
   todos a la par) */
.t-scene__u--inaki{--c:#B08A45;--d:0.6s;--di:0.05s;--fx:11px;--fy:-8px;--fd:9s;--fdel:-2.4s}
.t-scene__u--martin{--c:#DD8210;--d:3.6s;--di:0.13s;--fx:-8px;--fy:11px;--fd:11s;--fdel:-7s}
.t-scene__u--ali{--c:#0229FB;--d:6.6s;--di:0.21s;--fx:9px;--fy:10px;--fd:10s;--fdel:-1.2s}
.t-scene__u--roy{--c:#2A2A33;--d:9.6s;--di:0.29s;--fx:-11px;--fy:-9px;--fd:8s;--fdel:-4.5s}

/* Entrada (una sola vez) + deriva continua, muy leve */
.t-scene__u{transform-box:fill-box;transform-origin:center;animation:ts-in 0.8s cubic-bezier(0.22,1,0.36,1) var(--di) both}
.t-scene__float{animation:ts-float var(--fd) ease-in-out var(--fdel) infinite}
/* El clic: el cursor se hunde, la pastilla acompaña y salen el destello y el aro */
.t-scene__arrow{animation:ts-press 12s cubic-bezier(0.33,1,0.68,1) var(--d) infinite}
.t-scene__chip{animation:ts-nudge 12s cubic-bezier(0.33,1,0.68,1) var(--d) infinite}
.t-scene__flash{animation:ts-flash 12s cubic-bezier(0.2,0.65,0.3,1) var(--d) infinite}
.t-scene__ring{animation:ts-ring 12s cubic-bezier(0.2,0.65,0.3,1) var(--d) infinite}

@keyframes ts-in{from{opacity:0;transform:scale(0.94)}to{opacity:1;transform:scale(1)}}
@keyframes ts-float{0%,100%{transform:translate(0,0)}50%{transform:translate(var(--fx),var(--fy))}}
@keyframes ts-press{0%,100%{transform:scale(1)}2%{transform:scale(0.76)}6.5%{transform:scale(1.06)}11%{transform:scale(1)}}
@keyframes ts-nudge{0%,100%{transform:scale(1)}2.5%{transform:scale(0.962)}8.5%{transform:scale(1)}}
@keyframes ts-flash{0%{transform:scale(0.28);opacity:0}0.8%{opacity:0.34}4.5%{transform:scale(1);opacity:0}100%{transform:scale(1);opacity:0}}
@keyframes ts-ring{0%{transform:scale(0.12);opacity:0}0.6%{transform:scale(0.2);opacity:0.8}2.5%{opacity:0.5}5.5%{transform:scale(1);opacity:0}100%{transform:scale(1);opacity:0}}

/* Se congela cuando el hero sale de pantalla (clase que pone testimonios.js) */
.t-scene.is-idle .t-scene__u,.t-scene.is-idle .t-scene__float,.t-scene.is-idle .t-scene__arrow,
.t-scene.is-idle .t-scene__chip,.t-scene.is-idle .t-scene__flash,.t-scene.is-idle .t-scene__ring{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .t-scene__u,.t-scene__float,.t-scene__arrow,.t-scene__chip,.t-scene__flash,.t-scene__ring{animation:none}
}

/* --- Caso de estudio --- */
.t-case{padding:64px 0 0}
.t-hero__hint{margin:0 0 56px;text-align:center;font-size:15px;letter-spacing:-0.1px;color:#6E6E6E}
.t-case__card{position:relative;z-index:1;background:var(--white);border:1px solid #ECECEC;border-radius:24px;padding:28px 16px 28px}
@media (min-width:768px){.t-case__card{border-radius:32px;padding:56px 44px 40px}}

.t-case__pills{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 16px;max-width:880px;margin-inline:auto}
.t-case__pill{display:inline-flex;align-items:center;gap:12px;padding:8px 22px 8px 8px;background:var(--white);border:1px solid #ECECEC;border-radius:var(--radius-pill);cursor:pointer;text-align:left;transition:border-color 0.2s ease,transform 0.2s ease}
.t-case__pill:hover{border-color:#CFCFCF;transform:translateY(-1px)}
.t-case__pill--active,.t-case__pill--active:hover{background:#0B0B0E;border-color:#0B0B0E;transform:none}
.t-case__pill-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0}
.t-case__pill-name{display:block;font-size:18px;font-weight:600;line-height:1.2;color:var(--ink)}
.t-case__pill--active .t-case__pill-name{color:var(--white)}
.t-case__pill-handle{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:14px;line-height:1.2;color:#8A8A8A}
.t-case__pill--active .t-case__pill-handle{color:#B9B9B9}
.t-case__pill-check{flex-shrink:0}

.t-case__eyebrow{margin-top:44px;text-align:center;font-size:15px;line-height:1.4;letter-spacing:0.6px;color:#8B8B8B;text-transform:uppercase}
.t-case__title{max-width:900px;margin:14px auto 0;text-align:center;font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-0.2px;color:#111111}
@media (min-width:768px){.t-case__title{font-size:26px}}

.t-case__video{position:relative;margin-top:32px;background:#000000;border-radius:16px;aspect-ratio:16/9;overflow:hidden}
@media (min-width:768px){.t-case__video{margin-top:44px;border-radius:24px}}
.t-case__play{position:absolute;inset:0;margin:auto;display:flex;align-items:center;justify-content:center;width:72px;height:50px;padding:0;background:var(--white);border:0;border-radius:14px;color:#111111;cursor:pointer;transition:transform 0.2s ease}
@media (min-width:768px){.t-case__play{width:80px;height:56px;border-radius:16px}}
.t-case__play:hover{transform:scale(1.06)}
.t-case__play svg{margin-left:3px}
.t-case__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.t-case__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 24px;margin-top:26px}
.t-case__tips{font-family:var(--font-heading);font-size:21px;font-weight:500;line-height:1.2;letter-spacing:-0.6px;color:#4A443F}
@media (min-width:768px){.t-case__tips{font-size:26px}}
.t-case__cta{display:inline-flex;align-items:center;gap:12px;padding:8px 26px 8px 8px;background:#0B0B0E;color:var(--white);border-radius:var(--radius-pill);font-size:18px;font-weight:500;line-height:1.4;transition:transform 0.2s ease,opacity 0.2s ease}
.t-case__cta:hover{transform:translateY(-2px);opacity:0.92}
.t-case__cta:active{transform:none;opacity:0.85}

/* Panel gris con los 3 beneficios: asoma por detrás de la tarjeta blanca */
.t-case__benefits{position:relative;margin-top:-48px;display:grid;gap:36px;background:#F8F8F8;border-radius:24px;padding:88px 24px 44px}
@media (min-width:768px){.t-case__benefits{grid-template-columns:1fr 1fr 1fr;gap:48px;border-radius:31px;padding:104px 48px 56px}}
.t-benefit__chip{display:inline-flex;align-items:center;gap:12px;padding:6px 20px 6px 6px;background:var(--white);border:1px solid #EFEFEF;border-radius:var(--radius-pill);box-shadow:0 1px 2px rgba(0,0,0,0.04);font-size:18px;font-weight:500;line-height:1.4;color:#3A3634}
.t-benefit__text{margin-top:18px;font-size:15px;line-height:1.6;color:#3F3F3F;text-align:justify}

/* --- Testimonios destacados (capturas) --- */
.t-shots{padding:80px 0 16px}
.t-shots__badge{display:inline-block;padding:12px 22px;background:var(--white);border:1px solid #F1F1F1;border-radius:var(--radius-pill);box-shadow:0 10px 28px rgba(0,0,0,0.07);font-size:15px;line-height:1;letter-spacing:-0.2px;color:#6E6E6E}
.t-shots__title{max-width:640px;margin-top:28px;font-size:32px;font-weight:500;line-height:1.02;letter-spacing:-1.28px;color:#463E39}
@media (min-width:768px){.t-shots__title{font-size:40px;letter-spacing:-1.6px}}
.t-shots__title-accent{color:var(--accent)}
.t-shots__grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:44px}
@media (min-width:600px){.t-shots__grid{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.t-shots__grid{grid-template-columns:1fr 1fr 1fr;gap:24px}}
.t-shots__item{display:flex;align-items:center;justify-content:center;margin:0;aspect-ratio:3/2;background:#F7F7F7;border-radius:16px;overflow:hidden}
.t-shots__item img{width:100%;height:100%;object-fit:cover}

/* --- Muro de testimonios: banda gris de borde a borde --- */
.wall.t-wall{padding:64px 0 0}
.t-wall__band{background:#F8F8F8;padding:56px 0}
@media (min-width:768px){.t-wall__band{padding:72px 0}}