/* Servicio técnico · precio por modelo + visor animado del celular (todo CSS, sin imágenes) */

/* ---------- portada ---------- */
.rp-hero{border-bottom:1px solid var(--line);overflow:hidden;
  background:radial-gradient(55% 90% at 85% 35%,rgba(227,6,19,.22),transparent 70%),linear-gradient(180deg,#0e0e12,var(--bg))}
.rp-hero-in{display:grid;grid-template-columns:1.3fr .7fr;gap:24px;align-items:center;padding-top:40px;padding-bottom:34px}
.rp-hero h1{font-size:clamp(2rem,4.6vw,3.2rem);max-width:13em}
.rp-hero h1 em{font-style:normal;color:var(--red2)}
.rp-hero .lead{margin:14px 0 0}
.rp-q{position:relative;margin-top:24px;max-width:580px}
.rp-q svg{position:absolute;left:20px;top:50%;width:22px;height:22px;transform:translateY(-50%);fill:none;stroke:#9b9ba6;stroke-width:2;stroke-linecap:round;pointer-events:none}
.rp-q input{width:100%;height:60px;border-radius:999px;background:var(--s1);border:1px solid #33333d;color:#fff;font:inherit;font-size:1.06rem;padding:0 22px 0 54px;outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.rp-q input::placeholder{color:#7d7d88}
.rp-q input:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(227,6,19,.18)}
.rp-tipos{display:inline-flex;gap:4px;padding:4px;background:var(--s1);border:1px solid var(--line);border-radius:999px;margin-top:14px}
.rp-tipos button{border:0;background:transparent;color:#cfcfd6;padding:10px 18px;border-radius:999px;font:inherit;font-weight:600;font-size:.92rem;cursor:pointer;transition:background .2s,color .2s;white-space:nowrap}
.rp-tipos button:hover:not(:disabled):not(.on){background:var(--s2);color:#fff}
.rp-tipos button.on{background:var(--red);color:#fff;box-shadow:0 8px 20px -10px rgba(227,6,19,.9)}
.rp-tipos button:disabled{opacity:.38;cursor:not-allowed}
.rp-tipos button small{font-size:.7em;font-weight:500}
.rp-tipos.sm{display:flex;width:100%;margin:14px 0 0}
.rp-tipos.sm button{flex:1;padding:8px 4px;font-size:.84rem}
.rp-tipos.sm button:disabled{text-decoration:line-through}
.rp-hero-art{display:grid;place-items:center;min-height:300px;perspective:1400px}
.rp-hero-art .ph{--phs:6.3px}
.rp-hero-art::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(227,6,19,.35),transparent 65%);filter:blur(20px)}
.rp-hero-art{position:relative}

/* ---------- lista ---------- */
.rp-layout{display:grid;grid-template-columns:minmax(0,1fr) 540px;gap:28px;align-items:start;padding-top:26px}
.rp-col{min-width:0}
.rp-marcas{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 92%,transparent)}
.rp-marcas::-webkit-scrollbar{display:none}
.rp-marcas button{flex:none;border:1px solid var(--line);background:var(--s1);color:#cfcfd6;border-radius:999px;padding:8px 15px;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;transition:.15s}
.rp-marcas button:hover{border-color:#3b3b46;color:#fff}
.rp-marcas button.on{background:#fff;color:#0b0b0d;border-color:#fff}
.rp-count{color:var(--mu);font-size:.85rem;margin:8px 0 12px;min-height:1.3em}
.rp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.rp-card{position:relative;text-align:left;font:inherit;color:inherit;background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:3px;cursor:pointer;transition:border-color .18s,transform .18s,background .18s;animation:rpCard .42s cubic-bezier(.2,.8,.2,1) both;min-height:118px}
.rp-card:hover{border-color:#3b3b46;transform:translateY(-2px)}
.rp-card.on{border-color:var(--red);background:linear-gradient(160deg,rgba(227,6,19,.16),var(--s1) 65%);box-shadow:inset 0 0 0 1px var(--red)}
.rp-card small{color:var(--mu);font-size:.68rem;text-transform:uppercase;letter-spacing:.09em}
.rp-card b{font-size:1rem;line-height:1.2}
.rp-card img{position:absolute;top:10px;right:10px;width:38px;height:46px;object-fit:cover;border-radius:8px}
.rp-dots{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.rp-dots i{font-style:normal;font-size:.64rem;font-weight:650;padding:1px 7px;border-radius:999px;border:1px solid}
.c-original i,.rp-dots .c-original{color:#ffd479;border-color:rgba(255,212,121,.35)}
.rp-dots .c-amoled{color:#9cc0ff;border-color:rgba(156,192,255,.35)}
.rp-dots .c-incell{color:#9be3b5;border-color:rgba(155,227,181,.35)}
.rp-from{margin-top:auto;padding-top:8px;color:var(--mu);font-size:.8rem}
.rp-from em{font-style:normal;color:#fff;font-weight:750;font-size:1.06rem;margin-left:2px}
.rp-more{grid-column:1/-1;height:52px;border-radius:999px;border:1px dashed #3a3a44;background:transparent;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.rp-more:hover{border-color:var(--red)}
.rp-empty{grid-column:1/-1;background:var(--s1);border:1px dashed #3a3a44;border-radius:var(--r);padding:36px 22px;text-align:center;display:grid;gap:6px;color:var(--mu)}
.rp-empty b{color:#fff;font-size:1.1rem}
@keyframes rpCard{from{opacity:0;transform:translateY(10px)}}

/* ---------- escenario (detalle) ---------- */
.rp-stage{position:sticky;top:88px;display:grid;grid-template-columns:196px minmax(0,1fr);gap:22px;align-items:center;
  background:linear-gradient(160deg,#17171c,#0f0f13);border:1px solid var(--line);border-radius:24px;padding:22px;overflow:hidden;isolation:isolate}
.rp-stage::before{content:"";position:absolute;z-index:-1;left:-60px;top:20%;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(227,6,19,.28),transparent 65%);filter:blur(10px)}
.rp-x{display:none}
.rp-det{min-width:0}
.rp-det>small{color:var(--red2);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.rp-det h2{font-size:1.55rem;margin-top:2px}
.rp-cals{display:grid;gap:8px;margin-top:14px}
.rp-cal{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;font:inherit;color:inherit;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:14px;padding:10px 14px;cursor:pointer;transition:border-color .15s,background .15s,transform .12s}
.rp-cal:hover:not(.no){border-color:#41414c}
.rp-cal:active:not(.no){transform:scale(.985)}
.rp-cal b{display:flex;align-items:center;gap:7px;font-size:.95rem}
.rp-cal b::before{content:"";width:8px;height:8px;border-radius:50%;background:#8a8a95;flex:none}
.rp-cal.c-original b::before{background:#ffd479}.rp-cal.c-amoled b::before{background:#9cc0ff}.rp-cal.c-incell b::before{background:#9be3b5}.rp-cal.c-std b::before{background:var(--red2)}
.rp-cal small{display:block;color:var(--mu);font-size:.76rem;line-height:1.35;margin-top:1px}
.rp-cal em{font-style:normal;font-weight:750;white-space:nowrap;font-size:1.02rem}
.rp-cal.on{border-color:var(--red);background:rgba(227,6,19,.1);box-shadow:inset 0 0 0 1px var(--red)}
.rp-cal.no{opacity:.42;border-style:dashed;cursor:default}
.rp-cal.no em{font-weight:600;color:var(--mu);font-size:.85rem}
.rp-total{margin:16px 0 14px;padding-top:14px;border-top:1px solid var(--line)}
.rp-total span{color:var(--mu);font-size:.8rem}
.rp-total b{display:block;white-space:nowrap;font-size:2.3rem;font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.rp-total ul{list-style:none;margin:8px 0 0;padding:0;color:var(--mu);font-size:.76rem;display:flex;flex-wrap:wrap;gap:2px 14px}
.rp-total li::before{content:"✓ ";color:var(--ok);font-weight:800}
.rp-fine{color:var(--mu);font-size:.76rem;margin:10px 0 0;line-height:1.4}
.rp-veil{position:fixed;inset:0;z-index:75;background:rgba(0,0,0,.62);backdrop-filter:blur(2px)}
.rp-veil[hidden]{display:none}

/* ---------- el celular ---------- */
.ph-wrap{display:grid;place-items:center;perspective:1400px;padding:0 6px;animation:phFloat 7s ease-in-out infinite}
.ph{--phs:7.4px;--d:0s;font-size:var(--phs);width:23em;height:47em;position:relative;
  --frame:linear-gradient(145deg,#3a3f48,#14171c 50%,#353a44);--glass:linear-gradient(160deg,#27303c,#121820 60%,#222b36)}
.ph[data-tone="ti"]{--frame:linear-gradient(145deg,#9a9aa0,#3c3c42 30%,#77777e 70%,#2e2e33);--glass:linear-gradient(160deg,#76767c,#45454b 55%,#626268)}
.ph[data-tone="al"]{--frame:linear-gradient(145deg,#d3202b,#7a0710 50%,#e0313c);--glass:linear-gradient(160deg,#e01622,#9b0610 55%,#cf1520)}
.ph-body{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-9deg) rotateX(4deg);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ph[data-side="back"]{--d:.75s}
.ph[data-side="back"] .ph-body{transform:rotateY(171deg) rotateX(4deg)}
.ph-face{position:absolute;inset:0;border-radius:3.6em;background:var(--frame);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  box-shadow:0 3em 5em -1.6em rgba(0,0,0,.9),inset 0 0 0 .12em rgba(255,255,255,.22)}
.ph-front::before{content:"";position:absolute;inset:.32em;border-radius:3.3em;background:#050506}
.ph-back{transform:rotateY(180deg)}
.ph-screen{position:absolute;inset:.9em;border-radius:2.9em;overflow:hidden;background:#000}
.ph[data-front="home"] .ph-screen{top:5.6em;bottom:5.6em;left:1.4em;right:1.4em;border-radius:.4em}
/* fondo de pantalla: rojo de marca; la calidad cambia cómo se ve */
.ph-wall{position:absolute;inset:0}
.ph-wall::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 45% at 25% 18%,#ff3b47,transparent 70%),radial-gradient(60% 45% at 85% 75%,#7b2cff,transparent 70%),radial-gradient(50% 35% at 30% 90%,#ff7a18,transparent 70%),#09090d;
  animation:phHue 14s linear infinite}
.ph[data-cal="amoled"] .ph-wall::before{filter:saturate(1.3) contrast(1.15)}
.ph[data-cal="incell"] .ph-wall::before{filter:saturate(.72) brightness(1.12) contrast(.86)}
.ph[data-cal="original"] .ph-wall::before{filter:saturate(1.12) contrast(1.05)}
.ph-dim{position:absolute;inset:0;background:radial-gradient(circle at 68% 29%,rgba(0,0,0,.25),rgba(0,0,0,.78) 60%)}
.ph-ui{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;color:#fff;text-align:center;padding:0 1.6em}
.ph-ui b{font-size:5.4em;font-weight:650;letter-spacing:-.04em;margin-top:.95em;line-height:1}
.ph[data-front="home"] .ph-ui b{margin-top:.5em}
.ph-ui span{margin-top:auto;margin-bottom:3.2em;font-size:1.25em;font-weight:600;opacity:.85;line-height:1.25}
/* recorte de cámara frontal */
.ph-cut{position:absolute;left:50%;background:#000;z-index:3}
.ph[data-front="island"] .ph-cut{top:1.45em;width:7.4em;height:2.15em;margin-left:-3.7em;border-radius:2em}
.ph[data-front="notch"] .ph-cut{top:.9em;width:10.4em;height:2.4em;margin-left:-5.2em;border-radius:0 0 1.4em 1.4em}
.ph[data-front="punch"] .ph-cut{top:2em;width:1.35em;height:1.35em;margin-left:-.675em;border-radius:50%;box-shadow:0 0 0 .2em #111}
.ph[data-front="home"] .ph-cut{top:2.6em;width:4.4em;height:.55em;margin-left:-2.2em;border-radius:1em;background:#1b1b1f}
.ph-home{display:none}
.ph[data-front="home"] .ph-home{display:block;position:absolute;left:50%;bottom:1.25em;width:3.5em;height:3.5em;margin-left:-1.75em;border-radius:50%;box-shadow:inset 0 0 0 .22em #2b2b30;z-index:3}
/* grieta */
.ph-crack{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;filter:drop-shadow(0 0 .25em rgba(255,255,255,.35))}
.ph-crack path{fill:none;stroke:rgba(255,255,255,.92);stroke-width:1.3px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.ph-crack circle{fill:rgba(255,255,255,.18);stroke:rgba(255,255,255,.9);stroke-width:1.2px;vector-effect:non-scaling-stroke}
/* barrido de reparación y brillo final */
.ph-sweep{position:absolute;left:-10%;right:-10%;top:-30%;height:30%;z-index:4;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(227,6,19,.0) 25%,rgba(255,59,71,.55) 70%,rgba(255,255,255,.95) 74%,transparent 76%)}
.ph-glint{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.33) 48%,transparent 60%);transform:translateX(-130%)}
/* batería */
.ph-bat{display:none}
.ph[data-mode="bateria"] .ph-crack,.ph[data-mode="bateria"] .ph-dim{display:none}
.ph[data-mode="bateria"] .ph-bat{display:flex;position:absolute;inset:0;z-index:3;flex-direction:column;align-items:center;justify-content:center;gap:.9em;background:rgba(0,0,0,.62);color:#fff}
.ph-cell{position:relative;width:10em;height:4.8em;border:.34em solid #fff;border-radius:1.1em;padding:.36em}
.ph-cell::after{content:"";position:absolute;right:-1.05em;top:50%;width:.6em;height:1.8em;margin-top:-.9em;border-radius:0 .5em .5em 0;background:#fff}
.ph-cell i{display:block;height:100%;width:8%;border-radius:.55em;background:#ff3b47}
.ph-bat b{font-size:2.8em;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* tapa trasera y cámaras */
.ph-glass{position:absolute;inset:.32em;border-radius:3.3em;background:var(--glass)}
.ph-glass::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.18),transparent 35%,transparent 70%,rgba(255,255,255,.08))}
.ph-back .ph-crack{z-index:3}
.ph-cams{position:absolute;top:1.8em;left:1.8em;z-index:2}
.ph-cams i{position:absolute;width:3.9em;height:3.9em;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#7d8fb5 0 9%,#1a2235 22%,#05070c 46%,#000 62%);box-shadow:0 0 0 .42em #18181c,0 0 0 .58em rgba(255,255,255,.2),0 .4em .8em rgba(0,0,0,.6)}
.ph-cams em{position:absolute;width:1.15em;height:1.15em;border-radius:50%;background:radial-gradient(circle,#fff6d8,#e2cf96);box-shadow:0 0 0 .2em rgba(0,0,0,.4)}
.ph[data-cam="tri"] .ph-cams,.ph[data-cam="dual"] .ph-cams,.ph[data-cam="sq"] .ph-cams{width:10.2em;height:10.2em;border-radius:2.7em;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 .1em rgba(255,255,255,.22),0 .3em 1em rgba(0,0,0,.35);backdrop-filter:blur(2px)}
.ph[data-cam="tri"] .ph-cams i:nth-child(1){top:.75em;left:.75em}
.ph[data-cam="tri"] .ph-cams i:nth-child(2){top:5.55em;left:.75em}
.ph[data-cam="tri"] .ph-cams i:nth-child(3){top:3.15em;left:5.55em}
.ph[data-cam="tri"] .ph-cams em{top:1em;right:1em}
.ph[data-cam="dual"] .ph-cams{width:9em;height:9em}
.ph[data-cam="dual"] .ph-cams i:nth-child(1){top:.7em;left:.7em}
.ph[data-cam="dual"] .ph-cams i:nth-child(2){top:4.4em;left:4.4em}
.ph[data-cam="dual"] .ph-cams em{top:1.1em;right:1.1em}
.ph[data-cam="one"] .ph-cams i{top:0;left:0}
.ph[data-cam="one"] .ph-cams em{top:1.35em;left:5.4em}
.ph[data-cam^="col"] .ph-cams i{left:0}
.ph[data-cam^="col"] .ph-cams i:nth-child(1){top:0}
.ph[data-cam^="col"] .ph-cams i:nth-child(2){top:4.9em}
.ph[data-cam^="col"] .ph-cams i:nth-child(3){top:9.8em}
.ph[data-cam^="col"] .ph-cams i:nth-child(4){top:14.7em;transform:scale(.7)}
.ph[data-cam^="col"] .ph-cams em{top:1.35em;left:5.4em}
.ph[data-cam="sq"] .ph-cams i:nth-child(1){top:.8em;left:.8em}
.ph[data-cam="sq"] .ph-cams i:nth-child(2){top:5.5em;left:.8em}
.ph[data-cam="sq"] .ph-cams i:nth-child(3){top:.8em;left:5.5em;transform:scale(.75)}
.ph[data-cam="sq"] .ph-cams em{top:6.6em;left:6.6em}

/* ---------- la animación: se rompe → barrido rojo → queda como nuevo ---------- */
.ph.play .ph-crack path{animation:phCrack .45s calc(var(--d) + 0s) cubic-bezier(.3,.7,.3,1) both}
.ph.play .ph-crack{animation:phGone .5s calc(var(--d) + 1.35s) ease forwards}
.ph.play .ph-dim{animation:phGone .8s calc(var(--d) + 1.15s) ease forwards}
.ph.play .ph-sweep{animation:phSweep 1.1s calc(var(--d) + .65s) cubic-bezier(.5,0,.3,1) both}
.ph.play .ph-wall{animation:phOn 1.3s calc(var(--d) + 1.05s) cubic-bezier(.2,.8,.2,1) both}
.ph.play .ph-glint{animation:phGlint 1s calc(var(--d) + 2s) ease both}
.ph.play[data-mode="bateria"] .ph-cell i{animation:phFill 1.7s .45s cubic-bezier(.3,.6,.2,1) both}
.ph.play[data-mode="bateria"] .ph-sweep{animation:none}
.ph.done .ph-crack,.ph.done .ph-dim{opacity:0}
.ph.done[data-mode="bateria"] .ph-cell i{width:100%;background:#30d158}
.ph.out{animation:phOut .26s ease-in forwards}
.ph.in{animation:phIn .62s cubic-bezier(.2,.9,.25,1.15) both}
@keyframes phCrack{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes phGone{to{opacity:0;filter:blur(3px)}}
@keyframes phSweep{0%{opacity:1;transform:translateY(0)}88%{opacity:1}100%{opacity:0;transform:translateY(440%)}}
@keyframes phOn{from{transform:scale(1.14);filter:blur(5px) brightness(.4)}to{transform:none;filter:none}}
@keyframes phGlint{to{transform:translateX(130%)}}
@keyframes phFill{0%{width:8%;background:#ff3b47}45%{background:#ffd60a}100%{width:100%;background:#30d158}}
@keyframes phOut{to{opacity:0;transform:translateX(-12%) rotateY(30deg) scale(.92)}}
@keyframes phIn{from{opacity:0;transform:translateX(14%) rotateY(-32deg) scale(.9)}to{opacity:1;transform:none}}
@keyframes phFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes phHue{to{filter:hue-rotate(360deg)}}

/* ---------- celular y tablet ---------- */
@media (max-width:980px){
  .rp-layout{grid-template-columns:1fr}
  .rp-stage{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:80;max-height:92vh;overflow-y:auto;border-radius:24px 24px 0 0;
    grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:start;padding:22px 16px calc(18px + env(safe-area-inset-bottom));
    transform:translateY(105%);transition:transform .38s cubic-bezier(.2,.8,.2,1);box-shadow:0 -20px 50px rgba(0,0,0,.6)}
  .rp-stage.open{transform:none}
  .rp-stage .ph{--phs:5.5px}
  .rp-x{display:grid;place-items:center;position:absolute;top:10px;right:12px;width:36px;height:36px;border-radius:50%;border:0;background:var(--s2);color:#fff;font-size:1rem;cursor:pointer;z-index:2}
  .rp-det h2{font-size:1.3rem;padding-right:34px}
  .rp-total b{font-size:1.9rem}
  body.rp-lock{overflow:hidden}
}
@media (max-width:760px){
  .rp-hero-in{grid-template-columns:1fr;padding-top:28px}
  .rp-hero-art{display:none}
  .rp-tipos{display:flex;width:100%}
  .rp-tipos button{flex:1;padding:10px 6px}
  .rp-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .rp-card{padding:12px;min-height:110px}
}
@media (max-width:420px){
  .rp-stage{grid-template-columns:104px minmax(0,1fr);gap:12px}
  .rp-stage .ph{--phs:4.5px}
}
@media (prefers-reduced-motion:reduce){
  .ph-wrap,.ph,.ph *,.rp-card{animation:none!important}
  .ph-body{transition:none}
}
.rp-det .btn.lg{white-space:nowrap;padding:15px 18px}

/* =========================================================
   Misma piel que el catálogo: tarjetas sin borde con brillo, píldoras,
   selector tipo ficha de producto. Una sola marca en toda la web.
   ========================================================= */
.rp-hero{border:0;background:radial-gradient(50% 80% at 82% 40%,rgba(227,6,19,.16),transparent 70%)}
.rp-hero-in{padding-top:clamp(40px,6vw,80px);padding-bottom:18px}
.rp-hero h1{font-size:clamp(2.4rem,6vw,4.4rem);max-width:12em}
.rp-hero h1 em{color:transparent}
.rp-q input{height:56px;background:rgba(255,255,255,.07);border:1px solid transparent;font-size:1rem}
.rp-q input:focus{border-color:var(--line2);background:rgba(255,255,255,.1);box-shadow:0 0 0 6px rgba(255,255,255,.04)}
/* pestañas: píldora blanca que se desliza (igual a los chips activos del catálogo) */
.rp-tipos{position:relative;background:var(--s2);border:0;isolation:isolate}
.rp-tipos button{position:relative;z-index:1;color:var(--mu2)}
.rp-tipos button.on{background:#f5f5f7;color:#000;box-shadow:none}
.rp-tipos.pil::before{content:"";position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:var(--pw);transform:translateX(var(--px));border-radius:999px;background:#f5f5f7;transition:transform .5s var(--spring),width .4s var(--ease)}
.rp-tipos.pil button.on{background:transparent}
.rp-tipos button:hover:not(:disabled):not(.on){background:transparent;color:#fff}
.rp-tipos.sm{background:var(--s2)}
.rp-tipos.sm button.on{background:#f5f5f7;color:#000}
.rp-marcas{-webkit-mask:linear-gradient(90deg,#000 90%,transparent);mask:linear-gradient(90deg,#000 90%,transparent)}
.rp-marcas button{border:0;background:var(--s2);color:var(--mu2);padding:9px 16px;font-weight:550;font-size:.88rem;transition:background .25s,color .25s,transform .3s var(--spring)}
.rp-marcas button:hover{color:#fff;background:var(--s3)}
.rp-marcas button.on{background:#f5f5f7;color:#000}
.rp-marcas button:active{transform:scale(.95)}
.rp-count{font-size:.88rem;margin:14px 0 16px}

/* tarjetas */
@media (min-width:981px){.rp-layout{grid-template-columns:minmax(0,1fr) 500px;gap:clamp(20px,3vw,36px)}}
.rp-list{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;transition:opacity .18s,transform .18s}
.rp-list.swap{opacity:0;transform:translateY(8px) scale(.99)}
.rp-card{border:0;border-radius:var(--r);padding:0;gap:0;min-height:0;overflow:hidden;isolation:isolate;background:var(--s1);animation:rpCard .6s var(--ease) both;transition:transform .5s var(--ease),background .3s,box-shadow .3s}
.rp-card:hover{border:0;background:#111114}
.rp-card.on{background:#121214;box-shadow:inset 0 0 0 1.5px var(--red2),0 20px 50px -30px rgba(227,6,19,.8)}
.rpc-media{position:relative;width:100%;display:grid;place-items:center;height:200px;overflow:hidden}
.rpc-media::before{content:"";position:absolute;left:50%;top:52%;width:62%;aspect-ratio:1;border-radius:50%;background:var(--glow);filter:blur(42px);opacity:.2;transform:translate(-50%,-50%);transition:opacity .5s,transform .6s var(--ease)}
.rp-card:hover .rpc-media::before,.rp-card.on .rpc-media::before{opacity:.42;transform:translate(-50%,-50%) scale(1.2)}
.rpc-media img{position:relative;width:100%;height:100%;object-fit:cover;mix-blend-mode:lighten;transition:transform .8s var(--ease)}
.rp-card:hover .rpc-media img{transform:scale(1.07)}
.ph.mini{display:block;--phs:3.5px;transition:transform .7s var(--ease)}
.ph.mini .ph-wall::before{animation:none}
.ph.mini .ph-ui span{display:none}
.ph.mini .ph-face{box-shadow:0 2em 3em -1em rgba(0,0,0,.9),inset 0 0 0 .14em rgba(255,255,255,.2)}
.rp-card:hover .ph.mini{transform:translateY(-6px) scale(1.04)}
.rpc-body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;flex:1;width:100%}
.rpc-body small{color:var(--mu);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em}
.rpc-body b{font-size:1.04rem;line-height:1.2;letter-spacing:-.015em}
.rp-dots{margin-top:4px}
.rp-dots i{border:0;padding:3px 9px;font-size:.68rem;background:var(--s2)}
.rp-dots .c-original{color:#e6d3ae}.rp-dots .c-amoled{color:#9cc0ff}.rp-dots .c-incell{color:#9be3b5}
.rpc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px}
.rp-from{margin:0;padding:0}
.rp-from em{font-size:1.12rem;letter-spacing:-.02em}
.rpc-foot .go{width:32px;height:32px}
.rp-card:hover .go,.rp-card.on .go{background:var(--red);transform:rotate(-45deg)}
.rp-more{border:0;background:var(--s2);height:54px;transition:background .25s}
.rp-more:hover{background:var(--s3)}
.rp-empty{border:0;border-radius:var(--r2)}

/* visor: la misma tarjeta grande que la ficha del producto */
@media (min-width:981px){.rp-stage{grid-template-columns:180px minmax(0,1fr);top:84px;padding:26px}}
.rp-stage{background:var(--s1);border:0;border-radius:var(--r2)}
.rp-stage::before{left:-40px;top:14%;background:radial-gradient(circle,rgba(227,6,19,.32),transparent 65%)}
.rp-det>small{color:var(--mu);letter-spacing:.1em}
.rp-det h2{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.03em}
.rp-cal{background:transparent;border:1.5px solid var(--line2);border-radius:16px;padding:12px 14px;transition:border-color .2s,background .2s,transform .3s var(--spring)}
.rp-cal:hover:not(.no){border-color:#6e6e76}
.rp-cal.on{border-color:var(--red2);background:rgba(227,6,19,.08);box-shadow:none}
.rp-cal.c-original b::before{background:#e6d3ae}
.rp-cal.no{border-style:dashed;border-color:var(--line)}
.rp-total{border-color:var(--line)}
.rp-total b{font-size:clamp(2rem,3.2vw,2.6rem);font-weight:700}
.rp-total li::before{color:#30d158}
@media (max-width:980px){
  .rp-stage{background:#0f0f11;border-radius:30px 30px 0 0}
}
@media (max-width:760px){
  .rp-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .rpc-media{height:168px}
  .ph.mini{--phs:3px}
  .rpc-body{padding:12px 12px 14px}
  .rpc-body b{font-size:.95rem}
  .rpc-foot .go{display:none}
  .rp-tipos{display:flex}
}

.ph.mini[data-tone=al]{--frame:linear-gradient(145deg,#4a4f58,#1c1f25 50%,#454a54);--glass:linear-gradient(160deg,#2a2e35,#15171b 60%,#262a31)}
.rp-card{text-align:left;display:flex;flex-direction:column}