figure{margin:0}
/* Testimonios de salones: vídeo vertical y citas en tarjetas redondeadas, con el mensaje original a un toque */
.testimonios .cabeza{display:flex;justify-content:space-between;align-items:flex-end;gap:calc(4*var(--u));flex-wrap:wrap}
.testi-rejilla{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:calc(3*var(--u));margin-top:calc(7*var(--u));align-items:start}

/* Vídeo */
.testi-video{position:sticky;top:110px;border-radius:var(--r-xl);overflow:hidden;background:var(--cacao);box-shadow:0 24px 50px rgba(46,36,36,.18);aspect-ratio:9/16}
.testi-video video{width:100%;height:100%;object-fit:cover;display:block}
.testi-video .capa{position:absolute;inset:auto 0 0 0;padding:calc(3*var(--u));background:linear-gradient(180deg,transparent,rgba(30,22,22,.85));color:#fff}
.testi-video blockquote{font-family:var(--serif);font-size:24px;line-height:1.2}
.testi-video .quien{margin-top:var(--u);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.sonido{position:absolute;top:16px;right:16px;z-index:2;border:0;cursor:pointer;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);color:var(--cacao);font:600 13px var(--sans);padding:9px 14px;border-radius:999px;display:flex;align-items:center;gap:8px}
.sonido:hover{background:#fff}
.testi-video .etq-video{position:absolute;top:16px;left:16px;z-index:2}

/* Citas */
.testi-citas{columns:2;column-gap:calc(3*var(--u))}
.cita{break-inside:avoid;margin-bottom:calc(3*var(--u));background:#fff;border-radius:var(--r-l);padding:calc(4*var(--u)) calc(3.5*var(--u)) calc(3*var(--u));box-shadow:var(--sombra-suave);position:relative}
.cita::before{content:"“";position:absolute;top:6px;left:24px;font-family:var(--serif);font-size:84px;line-height:1;color:var(--oro);opacity:.55}
.cita blockquote{font-family:var(--serif);font-size:26px;line-height:1.22;color:var(--tinta);margin-top:calc(2*var(--u))}
.cita .traduccion{font-size:14px;color:var(--gris);margin-top:var(--u);font-style:italic}
.cita .pie-cita{display:flex;justify-content:space-between;align-items:center;gap:calc(2*var(--u));margin-top:calc(3*var(--u));padding-top:calc(2*var(--u));border-top:1px solid var(--linea)}
.cita .quien{font-size:14px;font-weight:600;color:var(--marron)}
.cita .producto{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-texto);margin-top:3px}
.ver-original{flex:0 0 auto;border:1px solid var(--linea);background:var(--crema);color:var(--marron);font:600 12px var(--sans);padding:8px 12px;border-radius:999px;cursor:pointer;transition:background .3s,border-color .3s}
.ver-original:hover{background:#fff;border-color:var(--oro)}
.cita.destacada{background:var(--t-cacau);box-shadow:0 20px 44px rgba(120,70,30,.25)}
.cita.destacada::before{color:#fff;opacity:.7}
.cita.destacada blockquote{font-size:32px;color:var(--cacao)}
.cita.destacada .pie-cita{border-top-color:rgba(46,36,36,.15)}
.cita.destacada .quien{color:var(--cacao)} .cita.destacada .producto{color:#5a3a12}
.cita.destacada .ver-original{background:rgba(255,255,255,.7);border-color:transparent}
.cita .miniatura{margin-top:calc(2.5*var(--u));border-radius:var(--r-m);overflow:hidden}
.cita .miniatura img{width:100%;display:block}

/* Visor del mensaje original */
.visor{margin:auto;border:0;padding:0;overflow:visible;background:transparent;max-width:min(92vw,560px);max-height:90vh}
.visor::backdrop{background:rgba(30,22,22,.72);backdrop-filter:blur(6px)}
.visor img{display:block;max-width:100%;max-height:82vh;border-radius:var(--r-m);box-shadow:0 30px 60px rgba(0,0,0,.4)}
.visor .cerrar{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;border:0;background:var(--oro);color:var(--cacao);font:700 18px var(--sans);cursor:pointer}
.visor .nota-visor{color:#EFE5DA;font-size:13px;text-align:center;margin-top:12px}

/* Cita en la página de producto */
.cita-producto .caja{display:grid;grid-template-columns:1.2fr .8fr;gap:calc(4*var(--u));align-items:center}
.cita-producto .cita{margin:0}
.cita-producto .enlace-mas{font-weight:600;color:var(--marron);border-bottom:1px solid var(--oro);padding-bottom:4px;justify-self:start}

@media (max-width:900px){
  .testi-rejilla{grid-template-columns:1fr}
  .testi-video{position:relative;top:0;max-width:380px;width:100%;margin:0 auto}
  .testi-citas{columns:1}
  .cita blockquote{font-size:23px} .cita.destacada blockquote{font-size:27px}
  .cita .pie-cita{flex-wrap:wrap}
  .cita-producto .caja{grid-template-columns:1fr}
}