/* ════════════════════════════════════════════════════════════════════
   COP · LA TORRE DE RANGOS (21/10/2026) — `COPRangosTorre`
   Mudado de `arnes/maqueta-rangos.html?o=c` (la opción elegida por Franco):
   las 10 divisiones apiladas, el camino del usuario en 3 franjas entre su
   división y la de arriba, y la página de una división (se abre al tocar).
   La usan `rangos.html` (datos reales) y la maqueta (datos de ejemplo).
   ⚠ «Todo lo que va al medio va centrado en serio» (Franco, 21/10): el
   slide lleva `box-sizing:border-box` (sin eso, cada diapositiva medía
   100 % + el aire y el contenido quedaba corrido) y los escalones van en
   `minmax(0,1fr)` (un texto largo agrandaba una columna).
   ════════════════════════════════════════════════════════════════════ */
.rgt,.rg-pag{--rg-aire:var(--cop-aire,16px)}
.rgt{position:relative;z-index:1;max-width:520px;margin:0 auto}
.rg-aura{position:fixed;inset:0 0 auto;height:70vh;z-index:0;pointer-events:none;background:radial-gradient(70% 55% at 50% 0,rgba(var(--zrgb),.2),transparent 70%)}
.rgt .rg-copa{display:flex;align-items:center;gap:.9rem;padding:.6rem 0 1rem}
.rgt .rg-copa-ico{display:inline-block;filter:drop-shadow(0 0 22px rgba(255,194,51,.6))}
.rgt .rg-copa-ico svg{width:64px;height:64px;display:block}
.rgt .rg-copa b{display:block;font:400 1.9rem/1 Anton,sans-serif;letter-spacing:1px;background:linear-gradient(180deg,#fff,#ffc233);-webkit-background-clip:text;background-clip:text;color:transparent}
.rgt .rg-copa small{color:var(--text-dim,#9aa3b5);font-size:var(--fs-sm,.8rem)}
.rgt .rg-pila{display:flex;flex-direction:column;gap:8px}
/* ── la tarjeta de una división ── */
.rgt .rg-piso{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) auto auto;gap:.9rem;align-items:center;width:100%;text-align:left;
  padding:.8rem 1rem .8rem 1.1rem;border-radius:18px;cursor:pointer;color:#fff;font:inherit;overflow:hidden;
  background:linear-gradient(110deg,rgba(var(--zrgb),.2),rgba(255,255,255,.02) 50%),#0f1420;border:1px solid rgba(var(--zrgb),.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 22px rgba(0,0,0,.4);transition:transform .15s}
.rgt .rg-piso:active{transform:scale(.985)}
.rgt .rg-piso::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:rgb(var(--zrgb));box-shadow:0 0 14px rgb(var(--zrgb))}
.rgt .rg-piso::after{content:"";position:absolute;right:-30px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--zrgb),.18),transparent)}
.rgt .rg-ped{position:relative;display:grid;place-items:center;height:64px}
.rgt .rg-ped::after{content:"";position:absolute;left:6px;right:6px;bottom:-2px;height:10px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--zrgb),.6),transparent)}
.rgt .rg-ped .cop-div{--cop-div:60px;position:relative;z-index:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.rgt .rg-info{position:relative;z-index:1;min-width:0}
.rgt .rg-info b{display:block;font:400 1.25rem/1 Anton,sans-serif;letter-spacing:.5px;white-space:nowrap}
.rgt .rg-tr{position:relative;z-index:1;text-align:right;padding-left:.7rem;border-left:1px solid rgba(255,255,255,.1)}
.rgt .rg-tr b{display:block;font:400 1.2rem/1 Anton,sans-serif;letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.rgt .rg-piso.lock .rg-tr b{color:rgba(255,255,255,.4)}
.rgt .rg-rango{display:inline-flex;margin-top:.35rem;padding:.2rem .45rem;border-radius:7px;background:rgba(255,255,255,.06);font:700 var(--fs-xs,.72rem)/1 Inter,sans-serif;color:var(--text-dim,#9aa3b5);white-space:nowrap;font-variant-numeric:tabular-nums}
.rgt .rg-der{display:flex;align-items:center;gap:.5rem;position:relative;z-index:1}
.rgt .rg-der img{width:30px;height:30px;object-fit:contain}
.rgt .rg-ir{width:18px;height:18px;color:var(--text-dim,#9aa3b5)}
.rgt .rg-ok{font:800 .62rem/1 Inter,sans-serif;color:#22c55e;background:rgba(34,197,94,.12);padding:.25rem .4rem;border-radius:6px}
.rgt .rg-piso.lock{background:#0e121b;border-color:rgba(255,255,255,.07);box-shadow:none}
.rgt .rg-piso.lock::before{background:rgba(255,255,255,.12);box-shadow:none}
.rgt .rg-piso.lock::after{display:none}
.rgt .rg-piso.lock .cop-div{filter:grayscale(1) brightness(.62)}
.rgt .rg-piso.lock .rg-ped::after{opacity:.15}
.rgt .rg-piso.lock .rg-info b{color:rgba(255,255,255,.5)}
.rgt .rg-piso.lock .rg-der img{filter:grayscale(1) brightness(.5)}
.rgt .rg-piso.yo{border:1.5px solid transparent;background:linear-gradient(110deg,rgba(var(--zrgb),.24),rgba(255,255,255,.02) 50%) padding-box,linear-gradient(#0f1420,#0f1420) padding-box,linear-gradient(120deg,rgb(var(--zrgb)),#0c95eb 60%,rgba(var(--zrgb),.4)) border-box;
  box-shadow:0 0 30px rgba(12,149,235,.25),0 12px 26px rgba(0,0,0,.45)}
/* ── el camino del usuario: la «entrada» entre su división y la de arriba ── */
.rgt .rg-camino{position:relative;height:var(--cam-h,430px);margin:2px 0}
.rgt .rg-cam-linea{position:absolute;left:30px;top:0;bottom:0;width:8px;border-radius:99px;background:rgba(255,255,255,.07)}
.rgt .rg-cam-linea::before{content:"";position:absolute;inset:0;border-radius:99px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.18) 0 6px,transparent 6px 14px);opacity:.5}
.rgt .rg-cam-fill{position:absolute;left:0;right:0;bottom:0;height:0;border-radius:99px;background:linear-gradient(0deg,rgb(var(--zrgb)),#ffd76a);box-shadow:0 0 16px rgba(var(--zrgb),.8);transition:height 1.4s cubic-bezier(.2,.8,.2,1) .3s}
.rgt .rg-cam-niv{position:absolute;left:18px;transform:translateY(50%);display:flex;align-items:center;gap:.6rem;z-index:1}
.rgt .rg-cam-niv i{width:32px;height:36px;display:grid;place-items:center;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:#1a2030;font:400 .95rem/1 Anton,sans-serif;font-style:normal;color:var(--text-faint,#5a6275)}
.rgt .rg-cam-niv.ok i{background:rgb(var(--zrgb));color:#0b0e14}
.rgt .rg-cam-niv small{font:800 .6rem/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint,#5a6275)}
.rgt .rg-cam-niv.ok small{color:rgb(var(--zrgb))}
.rgt .rg-cam-meta{position:absolute;left:62px;top:6px;margin:0;font-size:var(--fs-sm,.8rem);color:var(--text-dim,#9aa3b5)}
.rgt .rg-cam-meta b{color:#fff}
/* las 3 franjas del camino (de abajo hacia arriba: nivel 1, 2, 3). La tuya
   lleva trofeos + skin; las que ya pasaste, la insignia y «NIVEL N» pintados;
   las que faltan, lo mismo apagado (Franco, 21/10) */
.rgt .rg-fr{position:absolute;left:62px;right:0;height:var(--fr-h);display:flex;align-items:center;gap:.8rem}
.rgt .rg-fr .cop-div{--cop-div:var(--fr-div,52px);width:var(--fr-div,52px);height:var(--fr-div,52px);flex:0 0 var(--fr-div,52px);filter:drop-shadow(0 0 12px rgba(var(--zrgb),.5))}
.rgt .rg-fr b{font:400 2.3rem/1 Anton,sans-serif;letter-spacing:.04em;color:rgb(var(--zrgb));text-shadow:0 0 18px rgba(var(--zrgb),.35)}
.rgt .rg-fr.lock .cop-div{filter:grayscale(1) brightness(.4)}
.rgt .rg-fr.lock b{color:rgba(255,255,255,.16);text-shadow:none}
.rgt .rg-fr.yo{justify-content:space-between;align-items:center;animation:rg-sube .8s cubic-bezier(.2,.9,.3,1.2) .6s both}
.rgt .rg-yo3{display:flex;align-items:center;gap:.8rem;width:100%}
.rgt .rg-yo3-ico{flex:0 0 var(--fr-div,52px);display:grid;place-items:center;filter:drop-shadow(0 0 14px rgba(255,194,51,.55))}
.rgt .rg-yo3-ico svg{width:46px;height:46px;display:block}
.rgt .rg-yo3-skin{margin-left:auto;align-self:stretch}
.rgt .rg-yo3-txt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;min-width:0}
.rgt .rg-yo3-txt em{white-space:nowrap;display:block;font:800 var(--fs-xs,.72rem)/1 Inter,sans-serif;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim,#9aa3b5);margin-bottom:.35rem}
.rgt .rg-yo3-txt b{display:block;font:400 2.5rem/1 Anton,sans-serif;color:var(--oro,#ffc233);text-shadow:0 0 18px rgba(255,194,51,.4);white-space:nowrap}
.rgt .rg-yo3-skin{flex:0 0 auto;position:relative;width:var(--sk-w,96px);height:auto}
.rgt .rg-yo3-skin img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 10px 14px rgba(0,0,0,.6))}
/* ═════════ LA PÁGINA DE UNA DIVISIÓN (se abre al tocar la tarjeta) ═════════ */
.rg-pag{position:fixed;inset:0;z-index:200;background:var(--bg,#0b0e14);overflow-y:auto;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);visibility:hidden}
.rg-pag.on{transform:none;visibility:visible}
.rg-pag::before{content:"";position:absolute;inset:0 0 auto;height:420px;background:radial-gradient(90% 70% at 30% 0,rgba(var(--zrgb),.28),transparent 70%);pointer-events:none}
.rg-pag-in{position:relative;max-width:520px;margin:0 auto;padding:0 var(--rg-aire) 3rem}
.rg-pag .cop-cab{background:transparent;position:relative}
.rg-hero{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:.4rem;margin-top:.4rem}
.rg-hero-div{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding-bottom:.6rem}
.rg-hero-div .cop-div{--cop-div:min(150px,38vw);filter:drop-shadow(0 0 26px rgba(var(--zrgb),.55)) drop-shadow(0 14px 18px rgba(0,0,0,.6))}
.rg-hero-div b{font:400 1.7rem/1 Anton,sans-serif;letter-spacing:.5px}
.rg-hero-div small{font:800 var(--fs-xs,.72rem)/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--zrgb))}
.rg-hero-skin{display:flex;justify-content:center}
.rg-hero-skin img{height:min(260px,62vw);width:auto;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent);filter:drop-shadow(0 14px 18px rgba(0,0,0,.6))}
.rg-stats{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:0;margin-top:.6rem;padding:1rem 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.rg-stat{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;padding:0 .3rem}
.rg-stat + .rg-stat{border-left:1px solid rgba(255,255,255,.08)}
.rg-stat b{font:400 1.6rem/1 Anton,sans-serif;white-space:nowrap}
.rg-stat:first-child b{font-size:2.1rem;color:var(--oro,#ffc233)}
.rg-stat small{font:700 var(--fs-xs,.72rem)/1.2 Inter,sans-serif;color:var(--text-dim,#9aa3b5)}
.rg-tit{font:400 var(--fs-xl,1.3rem)/1 Anton,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-align:center;margin:1.6rem 0 1rem}
/* recompensas por nivel: tres escalones unidos por la línea */
.rg-escal{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;align-items:end}
.rg-esc{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:0 .2rem .9rem;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.07);min-height:calc(190px + var(--k) * 18px)}
.rg-esc.yo{border-color:rgba(var(--zrgb),.6);box-shadow:0 0 24px rgba(var(--zrgb),.25)}
.rg-esc img{width:58px;height:58px;object-fit:contain;margin-top:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.rg-esc b{font:400 1.45rem/1 Anton,sans-serif}
.rg-esc small{white-space:nowrap;font:700 .66rem/1 Inter,sans-serif;color:var(--text-dim,#9aa3b5);font-variant-numeric:tabular-nums}
.rg-esc.lock img{filter:grayscale(1) brightness(.55)}
/* premios: el grande al medio y un slide con la temporada */
.rg-slide{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * var(--rg-aire))}
.rg-slide::-webkit-scrollbar{display:none}
.rg-sl{box-sizing:border-box;flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45rem;padding:.4rem var(--rg-aire) .2rem}
.rg-sl em{font:800 var(--fs-xs,.72rem)/1 Inter,sans-serif;font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:rgb(var(--zrgb))}
.rg-sl-arte{position:relative;height:170px;display:flex;align-items:center;justify-content:center;gap:.2rem}
.rg-sl-arte::before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--zrgb),.35),transparent)}
.rg-sl-arte img{position:relative;height:150px;width:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.6))}
.rg-sl-arte img{max-width:58%}
.rg-sl-arte img.carta{height:140px;width:auto;max-width:42%;object-fit:contain;margin-left:-18px;transform:rotate(8deg)}
.rg-sl b{font:400 3rem/1 Anton,sans-serif}
.rg-sl small{font-size:var(--fs-sm,.8rem);color:var(--text-dim,#9aa3b5);max-width:260px;line-height:1.35}
.rg-dots{display:flex;justify-content:center;gap:6px;margin-top:.9rem}
.rg-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .3s}
.rg-dots i.on{width:22px;border-radius:99px;background:rgb(var(--zrgb))}
@media(max-width:360px){
  .rgt .rg-piso{grid-template-columns:48px minmax(0,1fr) auto auto;gap:.55rem;padding:.7rem .6rem .7rem .8rem}.rgt .rg-tr b{font-size:.98rem}.rgt .rg-info b{font-size:1rem}.rgt .rg-tr{padding-left:.5rem}
  .rgt .rg-ped{height:50px}.rgt .rg-ped .cop-div{--cop-div:46px}
  .rgt .rg-yo3-txt b{font-size:1.9rem}.rgt .rg-yo3{gap:.6rem}.rgt .rg-fr{gap:.6rem}.rgt .rg-fr b{font-size:1.9rem}
  .rg-stat b{font-size:1.3rem}.rg-stat:first-child b{font-size:1.7rem}
  .rg-esc b{font-size:1.2rem}.rg-esc img{width:46px;height:46px}
}
@keyframes rg-sube{from{opacity:0;transform:translateY(24px)}}

/* cobrar un nivel: el mismo lugar del estado, como botón */
.rg-esc.cobrar{border-color:rgba(12,149,235,.6)}
.rg-pag-msj{margin:.8rem 0 0;text-align:center;font-size:var(--fs-sm,.8rem);color:#ff9b9b}
.rgt .rg-cam-msj{position:absolute;left:62px;right:0;top:28px;margin:0;font-size:var(--fs-sm,.8rem);color:#ff9b9b}
.rg-sl-vacio{font-size:var(--fs-sm,.8rem);color:var(--text-dim,#9aa3b5)}
.rg-hero.sin-skin{grid-template-columns:1fr}
@media (prefers-reduced-motion:reduce){.rgt *,.rg-pag,.rg-pag *{animation:none!important;transition:none!important}}

/* ── 21/10 (2.ª vuelta, Franco): «los botones (…) con el diseño del botón de
   jugar ahora (…) conseguido con el borde verde», la insignia del nivel del
   alto del bloque nivel + botón, tarjetas sin el número de fondo ni el punto,
   rango con el trofeo y sin «trofeos», y adentro los números solos ── */
.rgt .rg-tr{display:flex;align-items:center}
.rgt .rg-tr b{display:inline-flex;align-items:center;gap:.3rem}
.rgt .rg-tr-ico{display:inline-grid;place-items:center;width:1em;height:1em}
.rgt .rg-tr-ico svg{width:1em;height:1em;display:block}
.rgt .rg-fr-bloque{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;min-width:0}
.rgt .rg-fr-bloque b{display:block}
.rgt .rg-fr .cop-b,.rgt .rg-yo3-txt .cop-b{white-space:nowrap}
.rgt .rg-yo3-txt .cop-b{margin-top:.45rem;pointer-events:none}
.rgt .rg-fr .cop-b:not(button){pointer-events:none}
.rgt .rg-fr.lock .cop-b{opacity:.55}
.rg-esc-n{font:400 2.3rem/1 Anton,sans-serif;color:var(--text-faint,#5a6275);margin-top:.9rem}
.rg-esc.ok .rg-esc-n,.rg-esc.yo .rg-esc-n,.rg-esc.cobrar .rg-esc-n{color:rgb(var(--zrgb));text-shadow:0 0 16px rgba(var(--zrgb),.4)}
.rg-esc .cop-b{width:calc(100% - .4rem);padding:0 .3rem;white-space:nowrap}
.rg-esc span.cop-b{pointer-events:none}
.rg-esc.cobrar{border-color:rgba(12,149,235,.6)}
@media(max-width:360px){.rg-esc .cop-b{font-size:var(--fs-xs,.72rem)}}
/* la tarjeta: insignia · nombre · rango con el trofeo (a la derecha) · flecha */
.rgt .rg-piso{grid-template-columns:56px auto minmax(0,1fr) auto;gap:.7rem}
.rgt .rg-ped{height:58px}.rgt .rg-ped .cop-div{--cop-div:54px}
.rgt .rg-info b{font-size:1.2rem}
.rgt .rg-tr{justify-content:flex-end;padding-left:.6rem}
.rgt .rg-tr b{font-size:1.05rem}
@media(max-width:360px){
  .rgt .rg-piso{grid-template-columns:44px auto minmax(0,1fr) auto;gap:.5rem;padding:.7rem .55rem .7rem .75rem}
  .rgt .rg-ped{height:48px}.rgt .rg-ped .cop-div{--cop-div:44px}
  .rgt .rg-info b{font-size:1rem}.rgt .rg-tr{padding-left:.4rem}.rgt .rg-tr b{font-size:.9rem;gap:.2rem}
}
/* la skin cede lugar antes que el texto: nunca tapa el botón de tu nivel */
.rgt .rg-yo3-txt{flex:0 0 auto}
.rgt .rg-yo3-skin{flex:0 1 auto;min-width:0}
.rgt .rg-yo3-txt .cop-b{padding:0 .8rem}
@media(max-width:360px){
  .rgt .rg-fr{left:54px;gap:.45rem}.rgt .rg-yo3{gap:.45rem}
  .rgt .rg-yo3-txt em{letter-spacing:.1em}.rgt .rg-yo3-txt .cop-b{padding:0 .6rem}
  .rgt .rg-yo3-skin{min-width:56px}
}
@media(max-width:340px){
  .rgt .rg-fr{left:50px;gap:.35rem}.rgt .rg-yo3{gap:.35rem}
  .rgt .rg-yo3-txt .cop-b{padding:0 .5rem;font-size:var(--fs-xs,.72rem)}
  .rgt .rg-yo3-skin{min-width:40px}
  .rgt .rg-yo3-txt em{letter-spacing:.05em}
}