/* ===== Clientes satisfechos: tira de fotos, visor tipo historias y reseñas ===== */
.cl .sec-head{align-items:end}
.cl-strip{display:flex;gap:12px;overflow-x:auto;padding:22px 2px 12px;margin:0 -2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;user-select:none;-webkit-user-select:none;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.cl-strip.drag{cursor:grabbing}
.cl-strip::-webkit-scrollbar{display:none}
.cl-card{all:unset;box-sizing:border-box;flex:none;width:118px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transform:perspective(600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1));opacity:var(--o,1);transition:transform .25s cubic-bezier(.23,1,.32,1);will-change:transform}
.cl-card .ring{display:block;padding:2px;border-radius:18px;background:linear-gradient(135deg,#8b5cf6,#ec4899 60%,#f59e0b)}
.cl-card img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 28%;border-radius:16px;border:2px solid var(--bg);background:var(--surface);pointer-events:none}
.cl-card span.t{display:block;margin-top:7px;font-size:12px;font-weight:600;line-height:1.25;color:var(--fg);text-align:center}
.cl-card:active{transform:perspective(600px) scale(calc(var(--s,1)*.94))}
.cl-card:focus-visible .ring{outline:2px solid var(--fg);outline-offset:3px}
@media (min-width: 900px){.cl-card{width:140px}}

/* Reseñas aprobadas */
.cl-rev{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:10px}
.cl-rev figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.cl-rev .st{color:var(--star);letter-spacing:2px;font-size:15px}
.cl-rev blockquote{margin:8px 0 12px;font-size:15px}
.cl-rev figcaption{font-size:13px;color:var(--muted)}

/* Formulario */
.cl-form{margin-top:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:14px;max-width:640px}
.cl-form h3{margin:0;font-size:20px;font-weight:800}
.cl-form p.sub{margin:-8px 0 0;color:var(--muted);font-size:14px}
.cl-form label.l{display:grid;gap:6px;font-size:14px;font-weight:600}
.cl-form input:not([type=radio]):not([type=checkbox]),.cl-form textarea{font:inherit;font-size:16px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 13px;width:100%}
.cl-form textarea{min-height:96px;resize:vertical}
.cl-form input:focus,.cl-form textarea:focus{outline:2px solid var(--accent);border-color:transparent}
.cl-form .bot{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.cl-stars{border:0;padding:0;margin:0;min-width:0}
.cl-stars .row{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.cl-stars legend{font-size:14px;font-weight:600;margin-bottom:4px;padding:0}
.cl-stars input{position:absolute;opacity:0;pointer-events:none}
.cl-stars label{font-size:34px;line-height:1;color:var(--line);cursor:pointer;padding:2px 3px;touch-action:manipulation;transition:color .15s,transform .15s cubic-bezier(.23,1,.32,1)}
.cl-stars label:active{transform:scale(.88)}
.cl-stars input:checked ~ label,.cl-stars label.hv,.cl-stars label.hv ~ label{color:var(--star)}
.cl-stars input:focus-visible + label{outline:2px solid var(--accent);border-radius:8px}
.cl-ok{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted)}
.cl-ok input{width:20px;height:20px;accent-color:#ec4899;flex:none;margin-top:1px}
.cl-msg{font-size:14px;min-height:20px}
.cl-msg.ok{color:#7ee2a0}.cl-msg.err{color:#ff8fa3}
.cl-form .btn{justify-self:start}
.cl-form .btn[disabled]{opacity:.6;pointer-events:none}

/* Visor tipo historias */
#clv{position:fixed;inset:0;z-index:300;background:rgba(6,4,12,.96);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .22s cubic-bezier(.23,1,.32,1);touch-action:none;overscroll-behavior:contain}
#clv.on{display:flex}
#clv.show{opacity:1}
.clv-box{position:relative;height:min(100dvh,calc(100vw*16/9));width:min(100vw,calc(100dvh*9/16));max-height:100dvh;background:#000;border-radius:0;overflow:hidden;transform:scale(.96);transition:transform .26s cubic-bezier(.23,1,.32,1)}
#clv.show .clv-box{transform:none}
@media (min-width: 700px){.clv-box{height:min(92dvh,calc(100vw*16/9));width:min(100vw,calc(92dvh*9/16));border-radius:20px}}
.clv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;transition:opacity .18s}
.clv-img.sw{opacity:0}
.clv-bars{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:10px;right:10px;display:flex;gap:4px;z-index:3}
.clv-bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}
.clv-bars i b{display:block;height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.clv-bars i.done b{transform:scaleX(1)}
.clv-top{position:absolute;top:calc(22px + env(safe-area-inset-top,0px));left:12px;right:8px;display:flex;align-items:center;gap:10px;z-index:3;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.clv-top img{width:34px;height:34px;border-radius:50%;background:#16121f;padding:4px}
.clv-top b{font-size:14px;line-height:1.1}.clv-top small{display:block;font-size:12px;opacity:.85;font-weight:500}
.clv-x{all:unset;margin-left:auto;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;color:#fff;touch-action:manipulation}
.clv-x svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.clv-x:focus-visible{outline:2px solid #fff;border-radius:50%}
.clv-z{position:absolute;top:70px;bottom:92px;z-index:2;width:34%;cursor:pointer}
.clv-z.p{left:0}.clv-z.n{right:0;width:66%}
.clv-foot{position:absolute;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:3;display:flex;justify-content:center}
.clv-foot .btn{width:100%;max-width:360px;box-shadow:0 8px 24px rgba(0,0,0,.4)}

@media (hover:hover) and (pointer:fine){
  .cl-card:hover .ring{box-shadow:0 10px 28px rgba(236,72,153,.35)}
  .cl-stars label:hover{color:var(--star)}
}
@media (prefers-reduced-motion: reduce){.cl-card{transition:none!important}#clv,.clv-box,.clv-img{transition:none!important}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.cl-g{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 14px;font-size:14px}
.cl-g .stars{color:var(--star);letter-spacing:2px}
.cl-g .btn{padding:8px 14px;font-size:13px;min-height:40px}

.cl-rev .when{display:block;margin-top:4px;font-size:12px;color:var(--muted)}