/* ════════════════════════════════════════════════════════════
   REVIEWS — "Lo dicen ellos, no nosotros."
   Muro de capturas reales (masonry con columnas CSS). Cada tarjeta:
   la captura tal cual + de dónde viene (Discord, WhatsApp…) y quién.
   Las capturas están algo inclinadas, como pegadas en un tablón, y se
   enderezan al pasar el ratón. Recogido a --tst-collapsed con un
   degradado; "Ver más" lo despliega.
   ════════════════════════════════════════════════════════════ */

.tst{--tst-ease:cubic-bezier(.16,1,.3,1);--tst-card:#0f1522;--tst-hair:rgba(255,255,255,.09);
  position:relative;padding-block:var(--section-pad);background:var(--bg);overflow-x:clip;overflow-y:visible}
[data-theme="light"] .tst{--tst-card:#ffffff;--tst-hair:rgba(16,24,40,.1)}
.tst-container{max-width:var(--page-max);margin:0 auto;padding-inline:var(--page-gutter)}

/* ── Cabecera ── */
.tst-top{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:end;margin-bottom:24px}
.tst-head{max-width:620px}
.tst .tst-head .tst-eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-sky)!important;margin-bottom:16px}
[data-theme="light"] .tst .tst-head .tst-eyebrow{color:var(--c-deep)!important}
.tst-title{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:900;letter-spacing:-.03em;line-height:1.08;color:var(--text-1);margin-bottom:16px}
.tst-accent{color:var(--c-deep)}
html:not([data-theme="light"]) .tst-accent{color:var(--c-sky)}
.tst-sub{font-size:15.5px;line-height:1.6;color:var(--text-2);max-width:52ch}

/* ── Muro ── */
.tst-wall-wrap{--tst-collapsed:820px;position:relative}
.tst-wall{columns:3 280px;column-gap:20px;max-height:var(--tst-collapsed);overflow:hidden;
  transition:max-height .9s var(--tst-ease);padding:8px 4px 0}
.tst-wall-wrap.is-open .tst-wall,.tst-wall-wrap.is-short .tst-wall{max-height:none}
/* se muestran todas las reviews: sin recoger ni botón "Ver más" */
.tst .tst-wall{max-height:none}
.tst .tst-more{display:none}

.tst-card{break-inside:avoid;margin:0 0 20px;padding:10px 10px 12px;border-radius:18px;background:var(--tst-card);
  border:1px solid var(--tst-hair);box-shadow:0 18px 40px -22px rgba(0,0,0,.7);
  transform:rotate(var(--tilt,0deg));transition:transform .45s var(--tst-ease),box-shadow .45s ease,border-color .3s ease}
[data-theme="light"] .tst-card{box-shadow:0 16px 34px -22px rgba(20,30,60,.35)}
/* inclinación de tablón: alterna según la posición */
.tst-card:nth-child(4n+1){--tilt:-1.1deg}
.tst-card:nth-child(4n+2){--tilt:.8deg}
.tst-card:nth-child(4n+3){--tilt:-.5deg}
.tst-card:nth-child(4n+4){--tilt:1.2deg}
.tst-card:hover{transform:rotate(0) translateY(-4px);border-color:color-mix(in srgb,var(--c-sky) 45%,transparent);
  box-shadow:0 26px 50px -24px rgba(0,0,0,.8)}

.tst-shot{position:relative;display:block;width:100%;padding:0;border:0;border-radius:11px;overflow:hidden;background:#000;cursor:zoom-in}
.tst-shot img{display:block;width:100%;height:auto;max-height:400px;object-fit:cover;object-position:top}
.tst-shot:focus-visible{outline:2px solid var(--c-sky);outline-offset:3px}
.tst-sample{position:absolute;top:10px;left:10px;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

.tst-meta{display:flex;align-items:center;gap:10px;margin:12px 4px 0}
.tst-src{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:#fff;background:var(--c-deep)}
.tst-src svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tst-who{display:flex;flex-direction:column;min-width:0}
.tst-who b{font-size:14px;font-weight:800;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tst-who small{font-size:12.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tst-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── Ver más ── */
.tst-more{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:flex-end;
  padding-top:180px;background:linear-gradient(to bottom,transparent,var(--bg) 70%);pointer-events:none}
.tst-wall-wrap.is-open .tst-more{position:static;padding-top:28px;background:none}
.tst-wall-wrap.is-short .tst-more{display:none}
.tst-more-btn{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;
  border:1.5px solid var(--c-deep);background:var(--bg);color:var(--text-1);font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
  transition:background-color .25s ease,transform .25s var(--tst-ease)}
.tst-more-btn:hover{background:color-mix(in srgb,var(--c-deep) 16%,var(--bg));transform:translateY(-1px)}
.tst-more-btn:focus-visible{outline:2px solid var(--c-sky);outline-offset:3px}
.tst-more-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--tst-ease)}
.tst-wall-wrap.is-open .tst-more-btn svg{transform:rotate(180deg)}

/* ── Captura ampliada ── */
.tst-lightbox{margin:auto;max-width:min(92vw,720px);max-height:92vh;padding:0;border:0;border-radius:18px;background:transparent;overflow:visible}
.tst-lightbox::backdrop{background:rgba(4,8,18,.82);backdrop-filter:blur(6px)}
.tst-lb-body{max-height:92vh;overflow:auto;border-radius:18px}
.tst-lb-img{display:block;width:100%;height:auto}
.tst-lb-close{position:absolute;top:-14px;right:-14px;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:0;background:#fff;color:#0d1526;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.tst-lb-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.tst-lb-close:focus-visible{outline:2px solid var(--c-sky);outline-offset:3px}
.tst-lightbox[open]{animation:tst-pop .45s var(--tst-ease)}
@keyframes tst-pop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}

/* ── Entrada: las capturas caen en cascada (una vez) ── */
.tst-wall.is-armed .tst-card{opacity:0;transform:translateY(-36px) rotate(calc(var(--tilt,0deg) * 4))}
.tst-wall.is-armed.is-in .tst-card{opacity:1;transform:rotate(var(--tilt,0deg));
  transition:opacity .5s ease,transform 1s var(--tst-ease),box-shadow .45s ease,border-color .3s ease;transition-delay:calc(var(--i) * 70ms)}
.tst-wall.is-armed.is-in .tst-card:hover{transform:rotate(0) translateY(-4px);transition-delay:0s}

/* ── Responsive ── */
@media(max-width:640px){
  .tst-head{margin-bottom:36px}
  .tst-wall-wrap{--tst-collapsed:620px}
  .tst-wall{columns:1;column-gap:12px}
  .tst-card{margin-bottom:12px;padding:7px 7px 9px;border-radius:14px}
  .tst-meta{gap:8px;margin-top:9px}
  .tst-src{width:26px;height:26px;border-radius:8px}
  .tst-src svg{width:15px;height:15px}
  .tst-who b{font-size:12.5px}
  .tst-who small{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .tst-card,.tst-wall,.tst-more-btn,.tst-more-btn svg{transition:none !important}
  .tst-wall.is-armed .tst-card{opacity:1;transform:rotate(var(--tilt,0deg))}
  .tst-lightbox[open]{animation:none}
}

/* ── Comentario redibujado (texto real de la captura) ── */
.tst-card--comment{padding:20px 20px 16px}
.tst-comment{margin:0}
.tst-c-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.tst-c-avatar{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--av);
  color:#fff;font-size:17px;font-weight:600}
.tst-c-who{flex:1;display:flex;flex-direction:column;min-width:0}
.tst-c-who b{font-size:14px;font-weight:700;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tst-c-who small{font-size:12.5px;color:var(--text-2)}
.tst-src--youtube{background:#ff0033}
.tst-c-text{margin:0;font-size:15.5px;line-height:1.55;color:var(--text-1);overflow-wrap:anywhere}
.tst-c-foot{display:flex;align-items:center;gap:16px;margin-top:16px;padding-top:12px;border-top:1px solid var(--tst-hair);
  font-size:13px;color:var(--text-2)}
.tst-c-likes{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.tst-c-likes svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.tst-c-heart{position:relative;display:inline-block;width:26px;height:26px}
.tst-c-heart img{width:26px;height:26px;border-radius:50%;object-fit:cover}
.tst-c-heart svg{position:absolute;right:-5px;bottom:-4px;width:14px;height:14px;fill:#ff0033;stroke:var(--tst-card);stroke-width:2.5}
.tst-c-proof{margin-left:auto;padding:0;border:0;background:none;color:var(--text-2);font:inherit;font-size:12.5px;font-weight:700;
  text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--c-sky) 60%,transparent);text-underline-offset:3px;cursor:zoom-in}
.tst-c-proof:hover{color:var(--text-1)}
.tst-c-proof:focus-visible{outline:2px solid var(--c-sky);outline-offset:3px;border-radius:3px}
.tst-lightbox.is-wide{max-width:min(94vw,1200px)}
.tst-lightbox.is-wide .tst-lb-body{background:#fff;padding:14px}
@media(max-width:640px){
  .tst-card--comment{padding:14px 13px 12px}
  .tst-c-head{gap:9px;margin-bottom:10px}
  .tst-c-avatar{width:32px;height:32px;font-size:14px}
  .tst-c-who b{font-size:12.5px}
  .tst-c-who small{font-size:11px}
  .tst-c-text{font-size:13.5px}
  .tst-c-foot{gap:10px;margin-top:12px;padding-top:9px;font-size:12px}
}

/* ── Draco con el móvil junto al título: le entran ventas ──
   La escena .hv-* vive en css/draco-scenes.css; js/draco-ventas.js la
   anima. Al pulsarlo entra una venta al momento. Va abajo a la derecha
   de la cabecera, apoyado en el borde de arriba del muro (el margen
   negativo lo baja hasta las tarjetas), con un halo detrás que lo
   funde con el fondo. */
.tst-draco{position:relative;z-index:2;width:100%;margin-bottom:-20px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .35s var(--tst-ease)}
.tst-draco::before{content:"";position:absolute;inset:6% 2% 10% 8%;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c-deep) 32%,transparent),transparent);filter:blur(28px)}
[data-theme="light"] .tst-draco::before{opacity:.45}
.tst-draco .hv-wrap{display:block}
.tst-draco:hover{transform:translateY(-4px)}
.tst-draco:active{transform:translateY(-1px) scale(.99)}
.tst-draco:focus-visible{outline:2px solid var(--c-sky);outline-offset:6px;border-radius:18px}

/* Globo "¡Púlsame!": sale solo (JS pone .is-shown) junto a la cabeza,
   con un rabito que apunta a Draco, y flota suave mientras está. */
.tst-draco-bubble{position:absolute;left:-4%;top:4%;padding:9px 15px;border-radius:16px;background:#fff;color:#0d1526;
  font-size:14px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;box-shadow:0 14px 30px -12px rgba(0,0,0,.55);
  transform-origin:85% 110%;opacity:0;transform:scale(.4) rotate(-8deg);
  transition:opacity .2s ease,transform .5s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.tst-draco-bubble::after{content:"";position:absolute;right:18px;bottom:-7px;width:16px;height:16px;background:inherit;
  border-radius:0 0 4px 0;transform:rotate(45deg) skew(8deg,8deg)}
[data-theme="light"] .tst-draco-bubble{background:var(--c-deep);color:#fff;box-shadow:0 14px 30px -12px rgba(31,86,224,.6)}
.tst-draco-bubble.is-shown{opacity:1;transform:none}
.tst-draco-bubble.is-shown.is-floating{animation:tst-bubble-float 2.6s ease-in-out infinite}
@keyframes tst-bubble-float{0%,100%{transform:none}50%{transform:translateY(-5px) rotate(-2deg)}}
@media(max-width:860px){
  .tst-top{grid-template-columns:1fr;gap:16px;justify-items:center;text-align:center}
  .tst-head{margin:0 auto}
  .tst-sub{margin:0 auto}
  .tst-draco{width:min(280px,74vw);margin-bottom:-12px}
  .tst-draco-bubble{left:-2%;top:2%;font-size:13px;padding:8px 13px}
}
@media(prefers-reduced-motion:reduce){
  .tst-draco,.tst-draco-bubble{transition:none}
  .tst-draco-bubble.is-shown.is-floating{animation:none}
}
.tst-c-avatar{overflow:hidden}.tst-c-avatar img{width:100%;height:100%;object-fit:cover}