/* ============================================================
   INICIO · 03-niveles (#tiers) — la escalera de oro
   Prefijo propio: nv-
   ============================================================ */
#tiers{--rise:clamp(72px,10.5vh,112px);--rail-off:24px;overflow:clip}
#tiers [hidden]{display:none!important}

/* luz de fondo, muy tenue */
#tiers .nv-bg{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 46% at 16% 58%,rgba(216,166,70,.09) 0%,rgba(216,166,70,0) 70%),
    radial-gradient(50% 34% at 92% 64%,rgba(16,39,58,.7) 0%,rgba(16,39,58,0) 70%)}
#tiers .wrap{position:relative}

/* ---------- Cabecera + control ---------- */
#tiers .nv-top{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,96px);align-items:end;
  margin-bottom:clamp(16px,2vw,28px)}
#tiers .nv-head{margin-bottom:0}
#tiers .nv-title{margin-top:20px;padding-bottom:.08em}
#tiers .nv-title .tn-line{padding-bottom:.1em;margin-bottom:-.1em}
#tiers .nv-head .lead{max-width:46ch}

#tiers .nv-ctl{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"label out" "slide slide";align-items:end;column-gap:clamp(24px,3vw,44px);
  padding:clamp(16px,1.5vw,22px) clamp(20px,2.2vw,32px) clamp(6px,.8vw,10px)}
/* el rótulo puede partirse en dos líneas: nunca toca la lectura de la derecha, tampoco en idiomas más largos */
#tiers .nv-ctl__label{grid-area:label;display:block;max-width:11em;line-height:1.35;color:var(--cream-2);text-wrap:balance}
#tiers .nv-slide{grid-area:slide;min-width:0}
#tiers .nv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#tiers .nv-slide{position:relative}
#tiers .nv-slide{--rg-mt:-4px}
#tiers .nv-range{position:relative;z-index:2;display:block;margin:var(--rg-mt) 0 0;touch-action:pan-y}
/* el foco vive en el pulgar, no alrededor de toda la pista */
#tiers .nv-range:focus-visible{outline:none}
#tiers .nv-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--gold-2),0 6px 20px rgba(216,166,70,.45)}
#tiers .nv-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--gold-2)}
#tiers .nv-ticks{position:relative;height:54px;margin-top:-6px;-webkit-user-select:none;user-select:none}
#tiers .nv-tick{position:absolute;top:0;left:calc(13px + (100% - 26px) * var(--f));width:0}
#tiers .nv-tick:nth-child(1){--f:0}
#tiers .nv-tick:nth-child(2){--f:.25}
#tiers .nv-tick:nth-child(3){--f:.5}
#tiers .nv-tick:nth-child(4){--f:.75}
#tiers .nv-tick:nth-child(5){--f:1}
#tiers .nv-tick i{pointer-events:none;position:absolute;left:-4px;top:-20px;width:8px;height:8px;border-radius:50%;background:var(--ink);
  border:1px solid var(--line-2);transition:background .5s,border-color .5s,box-shadow .5s}
#tiers .nv-tick.is-past i{background:var(--gold);border-color:var(--gold)}
#tiers .nv-tick.is-on i{background:var(--gold-2);border-color:var(--gold-2);box-shadow:0 0 0 4px rgba(244,213,138,.16)}
#tiers .nv-tick__b{position:absolute;left:0;top:0;transform:translateX(-50%);min-width:48px;min-height:48px;padding:6px 6px 4px;
  display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;cursor:pointer;color:var(--cream-2);
  transition:color .4s;white-space:nowrap}
#tiers .nv-tick:first-child .nv-tick__b{transform:translateX(-13px);align-items:flex-start;padding-left:0}
#tiers .nv-tick:last-child .nv-tick__b{transform:translateX(calc(-100% + 13px));align-items:flex-end;padding-right:0}
#tiers .nv-tick__b b{font-size:.98rem;line-height:1;color:inherit}
#tiers .nv-tick__b span{font:600 .68rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);transition:color .4s}
#tiers .nv-tick__b:hover,#tiers .nv-tick.is-on .nv-tick__b{color:var(--gold-2)}
#tiers .nv-tick.is-on .nv-tick__b span{color:var(--cream)}

/* ---------- Escenario ---------- */
#tiers .nv-stage{position:relative;padding-top:calc(var(--rail-off) + 14px)}

#tiers .nv-glow{position:absolute;left:0;bottom:8%;width:20%;height:78%;pointer-events:none;opacity:0;
  transform:translateX(calc(var(--lv,1) * 100%));transition:transform 1.1s var(--ease),opacity .8s;
  background:radial-gradient(60% 55% at 50% 45%,rgba(216,166,70,.26) 0%,rgba(216,166,70,0) 72%);filter:blur(24px)}
#tiers.is-live .nv-glow{opacity:1}

#tiers .nv-rail{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none;z-index:3;opacity:0}
#tiers.has-rail .nv-rail{opacity:1}
#tiers .nv-rail path{fill:none;stroke-linecap:round;stroke-linejoin:round}
#tiers .nv-rail__base{stroke:rgba(216,166,70,.34);stroke-width:1;stroke-linecap:butt}
#tiers .nv-rail__lit{opacity:0;transition:opacity .4s;stroke:var(--gold-2);stroke-width:1.6;filter:drop-shadow(0 0 6px rgba(244,213,138,.6))}
#tiers .nv-rail__nodes circle{fill:var(--ink);stroke:rgba(216,166,70,.6);stroke-width:1;transition:fill .5s,stroke .5s}
#tiers .nv-rail__nodes circle.is-past{fill:var(--gold);stroke:var(--gold)}
#tiers .nv-rail__spark{opacity:0;transition:opacity .5s;fill:var(--gold-2);filter:drop-shadow(0 0 8px rgba(244,213,138,.95)) drop-shadow(0 0 18px rgba(216,166,70,.7))}

#tiers.is-lit .nv-rail__spark,#tiers.is-lit .nv-rail__lit{opacity:1}

/* lectura "Tu nivel": vive dentro del control, para que causa y efecto se vean juntos */
#tiers .nv-out{grid-area:out;position:relative;min-width:0;text-align:right}
#tiers .nv-out__row{display:flex;align-items:baseline;justify-content:flex-end;gap:.45em;margin:8px 0 0;white-space:nowrap}
#tiers .nv-out__name{font:500 italic clamp(1.5rem,2vw,1.9rem)/1 var(--serif);color:var(--cream);letter-spacing:-.02em}
#tiers .nv-out__num{font-size:clamp(1.5rem,2vw,1.9rem);line-height:1;color:var(--gold-2)}
#tiers .nv-cifra,#tiers .nv-out__num{font-variant-numeric:proportional-nums lining-nums}
#tiers .nv-cifra.is-counting,#tiers .nv-out__num.is-counting{font-variant-numeric:tabular-nums lining-nums}
#tiers .nv-out__num small{color:var(--gold)}
#tiers .nv-mini{display:none}

/* ---------- La escalera ---------- */
#tiers .nv-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:stretch;
  list-style:none;margin:0;padding:0}
#tiers .nv-col{display:flex;flex-direction:column;min-width:0;margin-top:calc(var(--k) * var(--rise))}
#tiers .nv-col:nth-child(1){--k:0}
#tiers .nv-col:nth-child(2){--k:.333}
#tiers .nv-col:nth-child(3){--k:.611}
#tiers .nv-col:nth-child(4){--k:.833}
#tiers .nv-col:nth-child(5){--k:1}

#tiers .nv-card{position:relative;flex:none;min-height:var(--card-h,0px);min-width:0;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  padding:clamp(16px,1.6vw,26px) clamp(14px,1.5vw,24px) clamp(14px,1.5vw,22px);
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:linear-gradient(180deg,rgba(16,39,58,.62) 0%,rgba(8,18,28,.55) 100%);
  transition:transform .9s var(--ease),border-color .6s,box-shadow .9s var(--ease),opacity .6s}
/* la luz dorada que llena la columna */
#tiers .nv-card:before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleY(0);transform-origin:50% 100%;opacity:0;
  background:linear-gradient(180deg,rgba(244,213,138,.26) 0%,rgba(216,166,70,.1) 38%,rgba(216,166,70,.03) 100%);
  transition:transform 1.1s var(--ease),opacity .7s}
#tiers .nv-card:after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold-grad);opacity:0;transition:opacity .6s}

#tiers .nv-card__top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px;margin-bottom:clamp(16px,1.5vw,22px)}
#tiers .nv-card__top .tag{white-space:nowrap}
#tiers .nv-k{position:relative;z-index:1;font:600 .68rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--cream-2)}
#tiers .nv-cifra{margin:8px 0 0;font-size:clamp(2.5rem,3.9vw,4.2rem);line-height:.95;color:var(--cream);transition:color .6s;white-space:nowrap}
#tiers .nv-cifra small{font-size:.4em;color:var(--cream-2);transition:color .6s}
#tiers .nv-name{margin:clamp(10px,1vw,15px) 0 5px;font:500 clamp(1.35rem,1.9vw,1.9rem)/1.05 var(--serif);letter-spacing:-.015em;color:var(--cream);transition:color .6s}
#tiers .nv-desc{margin:0 0 clamp(12px,1.1vw,17px);font-size:.92rem;line-height:1.45;color:var(--cream-2);transition:color .6s}
#tiers .nv-rows{margin:auto 0 clamp(12px,1.1vw,16px);display:grid}
#tiers .nv-rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
#tiers .nv-rows dt{font-size:.8rem;line-height:1.3;color:var(--cream-2)}
#tiers .nv-rows dd{margin:0;font-size:1rem;color:var(--cream);white-space:nowrap}
#tiers .nv-act{width:100%;min-height:46px;padding-inline:.6em;backdrop-filter:none;-webkit-backdrop-filter:none}

/* pedestal: un zócalo de oro macizo bajo cada tarjeta; su altura es la comisión de ese nivel.
   Sin rayas ni caja: canto superior brillante y la luz se disuelve hacia abajo. */
#tiers .nv-ped{position:relative;flex:1 0 14px;margin-top:6px;overflow:hidden;border-radius:3px 3px 0 0;
  background:
    linear-gradient(180deg,rgba(216,166,70,.32) 0%,rgba(216,166,70,.13) 42%,rgba(216,166,70,0) 100%);
  box-shadow:inset 0 1px rgba(244,213,138,.55),inset 1px 0 rgba(216,166,70,.24),inset -1px 0 rgba(216,166,70,.24);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 30%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 0%,#000 30%,rgba(0,0,0,0) 100%);
  transition:margin-top .9s var(--ease)}
#tiers .nv-ped:before{content:"";position:absolute;inset:0;transform:scaleY(0);transform-origin:50% 100%;opacity:0;
  background:
    linear-gradient(180deg,rgba(244,213,138,.62) 0%,rgba(216,166,70,.3) 40%,rgba(216,166,70,0) 100%);
  box-shadow:inset 0 2px var(--gold-2);
  transition:transform 1.1s var(--ease),opacity .7s}
#tiers .nv-col.is-on .nv-ped{margin-top:-6px}
#tiers .nv-col.is-on .nv-ped:before{transform:none;opacity:1}

/* ---------- Oro líquido ----------
   La columna encendida se llena: un cuerpo translúcido sube (transform) y su borde son dos ondas desfasadas.
   Va detrás del texto, con opacidad contenida, para que la lectura no pierda contraste. */
#tiers .nv-liq{display:none}
#tiers.is-live .nv-liq{display:block;position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none;visibility:hidden;contain:strict}
#tiers .nv-col.is-wet .nv-liq{visibility:visible}
#tiers .nv-liq__body{position:absolute;left:0;right:0;top:0;height:100%;transform:translate3d(0,110%,0);will-change:transform;
  /* base ámbar oscura bajo el tinte: la mezcla nunca pasa por el azul del fondo, el oro se queda oro */
  background:
    linear-gradient(180deg,rgba(255,190,70,.16) 0%,rgba(236,160,48,.2) 34%,rgba(205,130,30,.3) 100%),
    linear-gradient(180deg,rgba(46,29,6,.84) 0%,rgba(36,21,4,.9) 100%);
  animation:nvBreathe 7s ease-in-out infinite alternate;animation-play-state:paused}
/* luz bajo la superficie: el oro es más claro donde le pega la luz */
#tiers .nv-liq__body:before{content:"";position:absolute;left:0;right:0;top:0;height:26px;
  background:linear-gradient(180deg,rgba(255,206,104,.3) 0%,rgba(255,206,104,.1) 42%,rgba(255,206,104,0) 100%)}
/* resplandor cálido del fondo: metal denso que guarda la luz abajo */
#tiers .nv-liq__body:after{content:"";position:absolute;inset:0;
  background:radial-gradient(95% 44% at 50% 100%,rgba(255,170,52,.22) 0%,rgba(255,170,52,.08) 48%,rgba(255,170,52,0) 100%)}
#tiers .nv-liq__surf{position:absolute;left:0;right:0;bottom:100%;height:12px;transform-origin:50% 100%}
#tiers .nv-liq__w{position:absolute;left:0;bottom:-.5px;width:200%;height:100%;max-width:none;overflow:visible;animation:nvWave 9s linear infinite;animation-play-state:paused}
#tiers .nv-liq__w path{fill:rgb(122,88,30)}
#tiers .nv-liq__w--b{width:270%;animation-duration:14s;animation-direction:reverse}
#tiers .nv-liq__w--b path{fill:rgba(226,152,44,.34)}
#tiers .nv-liq__w .nv-liq__edge{fill:none;stroke:rgba(255,236,180,.9);stroke-width:1.5;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px rgba(255,200,96,.75));transition:opacity .5s}
/* mientras el nivel viaja, el canto se apaga: nunca tacha la cifra ni el nombre */
#tiers .nv-col.is-pour .nv-liq__edge{opacity:.22;filter:none;transition-duration:.15s}
/* reflejos especulares: dos manchas de luz que derivan despacio dentro del metal */
#tiers .nv-liq__spec{position:absolute;border-radius:50%;animation:nvSpecA 15s ease-in-out infinite alternate;animation-play-state:paused}
#tiers .nv-liq__spec--a{left:-34%;top:9%;width:118%;height:36%;
  background:radial-gradient(closest-side,rgba(255,224,140,.16) 0%,rgba(255,206,104,.07) 52%,rgba(255,206,104,0) 100%)}
#tiers .nv-liq__spec--b{left:14%;top:50%;width:124%;height:42%;animation-name:nvSpecB;animation-duration:19s;animation-delay:-7s;
  background:radial-gradient(closest-side,rgba(255,186,72,.16) 0%,rgba(255,176,60,.07) 55%,rgba(255,176,60,0) 100%)}
/* el brillo que recorre el líquido, solo en el tercio alto */
#tiers .nv-liq__sheen{position:absolute;top:0;height:40%;left:-30%;width:160%;
  background:linear-gradient(104deg,rgba(255,240,200,0) 38%,rgba(255,240,200,.11) 48%,rgba(255,240,200,.05) 54%,rgba(255,240,200,0) 63%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 35%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 0%,#000 35%,rgba(0,0,0,0) 100%);
  transform:translate3d(-70%,0,0);animation:nvSheen 7.5s cubic-bezier(.45,0,.2,1) infinite;animation-play-state:paused}
#tiers.is-seen .nv-col.is-wet .nv-liq__w,#tiers.is-seen .nv-col.is-wet .nv-liq__sheen,
#tiers.is-seen .nv-col.is-wet .nv-liq__spec,#tiers.is-seen .nv-col.is-wet .nv-liq__body{animation-play-state:running}
@keyframes nvWave{to{transform:translate3d(-50%,0,0)}}
@keyframes nvSheen{0%{transform:translate3d(-70%,0,0)}62%,100%{transform:translate3d(70%,0,0)}}
@keyframes nvBreathe{from{translate:0 0}to{translate:0 3px}}
@keyframes nvSpecA{from{transform:translate3d(-6%,-10%,0) scale(1)}to{transform:translate3d(34%,26%,0) scale(1.18)}}
@keyframes nvSpecB{from{transform:translate3d(8%,12%,0) scale(1.1)}to{transform:translate3d(-40%,-34%,0) scale(.92)}}

/* ---------- El riel del control: un tubo que se llena ---------- */
#tiers .nv-range::-webkit-slider-runnable-track{background:transparent}
#tiers .nv-range::-moz-range-track,#tiers .nv-range::-moz-range-progress{background:transparent}
#tiers .nv-tube{position:absolute;left:0;right:0;top:calc(var(--rg-mt) + 22px);height:0;pointer-events:none;clip-path:inset(-14px 0)}
#tiers .nv-tube:before{content:"";position:absolute;left:0;right:0;top:-3px;height:6px;border-radius:3px;background:rgba(243,234,219,.16);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7),inset 0 -1px rgba(243,234,219,.26),0 0 0 1px rgba(243,234,219,.07)}
#tiers .nv-tube__fill{position:absolute;left:0;top:-3px;height:6px;width:var(--p,50%);border-radius:3px 0 0 3px;overflow:hidden;
  background:linear-gradient(180deg,#FBEBBD 0%,#E6BC62 34%,#C8963C 66%,#8F6520 100%);box-shadow:0 0 12px rgba(216,166,70,.5)}
#tiers .nv-tube__fill:after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%) 0 0/90px 100% no-repeat;
  animation:nvFlow 4.6s cubic-bezier(.45,0,.2,1) infinite;animation-play-state:paused}
#tiers.is-seen .nv-tube__fill:after{animation-play-state:running}
@keyframes nvFlow{0%{background-position:-90px 0}70%,100%{background-position:calc(100% + 90px) 0}}
/* menisco: el oro trepa por el pulgar */
#tiers .nv-tube__men{position:absolute;left:var(--p,50%);top:-8px;width:12px;height:16px;max-width:none;margin-left:-18px;overflow:visible}
#tiers .nv-range::-webkit-slider-thumb{border:3px solid transparent;background-clip:padding-box;
  background-image:radial-gradient(circle at 34% 28%,#FFFDF2 0%,rgba(255,253,242,.55) 16%,rgba(255,253,242,0) 40%),radial-gradient(circle at 50% 45%,#F7E2A8 0%,#DCAC4E 55%,#8F6520 100%);
  box-shadow:0 5px 18px rgba(216,166,70,.55)}
#tiers .nv-range::-moz-range-thumb{width:20px;height:20px;border:0;
  background-image:radial-gradient(circle at 34% 28%,#FFFDF2 0%,rgba(255,253,242,.55) 16%,rgba(255,253,242,0) 40%),radial-gradient(circle at 50% 45%,#F7E2A8 0%,#DCAC4E 55%,#8F6520 100%);
  box-shadow:0 5px 18px rgba(216,166,70,.55)}

/* ---------- Oro líquido vivo (lienzo): con WebGL disponible y movimiento normal, el JS pinta el fluido ---------- */
#tiers .nv-liq__cv{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;display:block}
#tiers.is-fluid .nv-liq__body{display:none}
/* sobre el oro vivo, el texto lleva una sombra ámbar corta: las vetas pasan por detrás sin restarle lectura */
#tiers.is-fluid .nv-col.is-on .nv-desc,#tiers.is-fluid .nv-col.is-on .nv-rows dt,#tiers.is-fluid .nv-col.is-on .nv-rows dd,
#tiers.is-fluid .nv-col.is-on .nv-k,#tiers.is-fluid .nv-col.is-on .nv-name{text-shadow:0 1px 2px rgba(28,16,2,.7),0 0 10px rgba(28,16,2,.45)}
#tiers.is-fluid .nv-col.is-on .nv-cifra{text-shadow:0 2px 14px rgba(28,16,2,.5)}
#tiers.is-fluid .nv-col.is-on .nv-desc,#tiers.is-fluid .nv-col.is-on .nv-rows dt,#tiers.is-fluid .nv-col.is-on .nv-k{color:var(--cream)}
#tiers.is-fluid .nv-col.is-on .nv-k{color:#FFF6E0}
#tiers .nv-tube__cv{position:absolute;left:0;top:calc(var(--rg-mt) + 2px);width:100%;height:40px;max-width:none;display:block;pointer-events:none;z-index:1}
#tiers.is-fluid .nv-tube__fill,#tiers.is-fluid .nv-tube__men{display:none}
/* el riel se vuelve un tubo de vidrio: más alto, con sombra interior y un filo de luz abajo */
#tiers.is-fluid .nv-tube:before{top:-7px;height:14px;border-radius:7px;background:linear-gradient(180deg,rgba(2,6,10,.78) 0%,rgba(12,30,46,.56) 58%,rgba(40,66,88,.42) 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.9),inset 0 -1px rgba(243,234,219,.3),0 -1px rgba(243,234,219,.26),0 0 0 1px rgba(243,234,219,.14),0 1px 10px rgba(0,0,0,.35)}
#tiers.is-fluid .nv-tick i{z-index:2;width:6px;height:6px;left:-3px;top:-19px;background:rgba(5,9,15,.7);border-color:rgba(243,234,219,.34)}
#tiers.is-fluid .nv-tick.is-past i{background:rgba(110,70,12,.85);border-color:rgba(255,244,207,.75);box-shadow:none}
#tiers.is-fluid .nv-tick.is-on i{opacity:0}

/* ---------- Destilado: cada cuadro gotea oro por su canto inferior ----------
   El canto dorado es fijo (es lo que queda con ?reduce / ?nogl); con el lienzo vivo, de él cuelgan las gotas. */
#tiers .nv-card{border-bottom-color:rgba(216,166,70,.5)}
#tiers.is-live .nv-grid .nv-col:not(.is-on):hover .nv-card,#tiers.is-live .nv-grid .nv-col:not(.is-on):focus-within .nv-card{border-bottom-color:rgba(216,166,70,.7)}
#tiers .nv-drip{position:absolute;z-index:4;display:block;max-width:none;pointer-events:none}
/* sin lienzo (movimiento reducido, sin WebGL o equipo lento): el canto dorado se queda, quieto y un poco más marcado */
#tiers.is-live:not(.is-drip) .nv-card{border-bottom-color:rgba(226,178,84,.82);box-shadow:0 7px 16px -10px rgba(216,166,70,.55)}
#tiers.is-live:not(.is-drip) .nv-col.is-on .nv-card{border-bottom-color:var(--gold-2);box-shadow:0 34px 90px -34px rgba(216,166,70,.55),0 0 0 1px rgba(216,166,70,.12)}

/* nivel destacado sin JS */
#tiers:not(.is-live) .nv-col--top .nv-card{border-color:var(--hair)}
#tiers:not(.is-live) .nv-col--top .nv-act{background:linear-gradient(135deg,#f7e2a8,#d8a646 55%,#a77927);color:#1a1204;border-color:transparent}

/* estado vivo: el nivel encendido y los demás en calma */
#tiers.is-live .nv-col{cursor:pointer}
#tiers.is-live .nv-col:not(.is-on) .nv-card{opacity:.7}
#tiers.is-live .nv-col:not(.is-on):hover .nv-card,
#tiers.is-live .nv-col:not(.is-on):focus-within .nv-card{opacity:1;border-color:var(--line-2)}
#tiers .nv-col.is-on .nv-card{border-color:rgba(216,166,70,.75);transform:translateY(-12px);
  box-shadow:0 34px 90px -34px rgba(216,166,70,.55),0 0 0 1px rgba(216,166,70,.12)}
#tiers:not(.is-live) .nv-col.is-on .nv-card:before{transform:none;opacity:1}
#tiers:not(.is-live) .nv-col.is-on .nv-card:after{opacity:1}
#tiers .nv-col.is-on .nv-cifra,#tiers .nv-col.is-on .nv-cifra small{color:var(--gold-2)}
/* sobre el oro, el texto secundario sube un punto para conservar AA */
#tiers.is-live .nv-col.is-on .nv-desc,#tiers.is-live .nv-col.is-on .nv-rows dt,#tiers.is-live .nv-col.is-on .nv-k{color:rgba(243,234,219,.92)}
#tiers.is-live .nv-col.is-on .glass__n{color:#FBEBBD}
#tiers .nv-col.is-on .nv-act{background:linear-gradient(135deg,#f7e2a8,#d8a646 55%,#a77927);color:#1a1204;border-color:transparent;
  box-shadow:0 12px 40px -14px rgba(216,166,70,.7),inset 0 1px rgba(255,255,255,.45)}

/* ---------- Flechas del carrusel (solo cuando hay carrusel) ---------- */
#tiers .nv-nav{display:none}
#tiers .nv-arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);background:rgba(243,234,219,.04);color:var(--cream);
  display:grid;place-items:center;cursor:pointer;transition:border-color .4s,color .4s,opacity .4s}
#tiers .nv-arrow svg{width:20px;height:20px}
#tiers .nv-arrow:hover{border-color:var(--gold-2);color:var(--gold-2)}
#tiers .nv-arrow[disabled]{opacity:0;pointer-events:none}
#tiers .nv-count{display:flex;align-items:center;gap:12px;font-size:.9rem;color:var(--cream-2)}
#tiers .nv-count b{color:var(--gold-2)}
#tiers .nv-count i{width:38px;height:1px;background:var(--line-2)}

/* ---------- Cierre ---------- */
#tiers .nv-cta{display:flex;width:100%;min-height:68px;margin-top:clamp(30px,4vw,56px);font-size:1.02rem}

/* pantallas bajas de escritorio: todo más compacto para que quepa la escalera */
@media (min-width:900px) and (max-height:800px){
  #tiers{--rise:clamp(64px,10vh,80px);--rail-off:16px}
  #tiers .nv-top{margin-bottom:16px}
  #tiers .nv-ctl{padding-top:12px;padding-bottom:4px}
  #tiers .nv-slide{--rg-mt:-8px}
  #tiers .nv-tick__b span{display:none}
  #tiers .nv-ticks{height:42px}
  #tiers .nv-stage{padding-top:calc(var(--rail-off) + 8px)}
  #tiers .nv-card{padding-block:14px 13px}
  #tiers .nv-rows{margin-bottom:10px}
  #tiers .nv-act{min-height:44px}
  #tiers .nv-ped{flex-basis:10px}
  #tiers .nv-card__top{margin-bottom:14px}
  #tiers .nv-name{margin-top:10px}
  #tiers .nv-desc{margin-bottom:12px}
  #tiers .nv-rows>div{padding:7px 0}
  #tiers .nv-cifra{font-size:clamp(2.3rem,3.7vw,3.6rem)}
}
/* escritorio de altura media (p. ej. 1440×900): la lectura "Tu nivel", el cuadro entero y su goteo caben en una sola vista */
@media (min-width:900px) and (min-height:801px) and (max-height:1000px){
  #tiers{--rise:clamp(64px,8.2vh,80px);--rail-off:18px}
  #tiers .nv-top{margin-bottom:12px}
  #tiers .nv-ctl{padding-top:14px;padding-bottom:4px}
  #tiers .nv-ticks{height:48px}
  #tiers .nv-stage{padding-top:calc(var(--rail-off) + 10px)}
  #tiers .nv-card{padding-block:16px 15px}
  #tiers .nv-card__top{margin-bottom:14px}
  #tiers .nv-name{margin-top:10px}
  #tiers .nv-desc{margin-bottom:12px}
  #tiers .nv-rows{margin-bottom:12px}
  #tiers .nv-rows>div{padding:7px 0}
}
@media (min-width:900px) and (max-width:1180px){
  /* panel angosto: los dos rótulos comparten línea y la lectura va debajo */
  #tiers .nv-ctl{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label k" "row row" "slide slide";align-items:baseline}
  #tiers .nv-out{display:contents}
  #tiers .nv-ctl__label{max-width:none}
  #tiers .nv-out__k{grid-area:k}
  #tiers .nv-out__row{grid-area:row}
  #tiers .nv-tick__b span{display:none}
  #tiers .nv-ticks{height:46px}
  /* la etiqueta no baja de tamaño legible: en la tarjeta destacada cede el número */
  #tiers .nv-card__top .tag{font-size:.66rem;padding:5px 8px;letter-spacing:.06em}
  #tiers .nv-col--top .glass__n{display:none}
  #tiers .nv-rows>div{flex-direction:column;gap:3px}
}

/* paradas compactas (sin nombres debajo): la primera no tiene volumen, así que muestra su nombre en vez de la raya */
@media (max-width:1180px),(min-width:900px) and (max-height:800px){
  #tiers .nv-tick:first-child .nv-tick__b b{display:none}
  #tiers .nv-tick:first-child .nv-tick__b span{display:block;font:800 .98rem/1 var(--sans);letter-spacing:-.01em;text-transform:none;color:inherit}
}

/* ---------- Móvil y tableta: carrusel ---------- */
@media (max-width:899px){
  #tiers .nv-top{grid-template-columns:minmax(0,1fr);gap:30px;margin-bottom:20px}
  #tiers .nv-ctl{grid-template-columns:minmax(0,1fr);grid-template-areas:"label" "slide" "out";padding:18px 18px 16px}
  #tiers .nv-k,#tiers .nv-ctl .kicker{font-size:.82rem}
  #tiers .nv-ctl__label{max-width:none}
  #tiers .nv-ped{display:none}
  #tiers .nv-tick__b span{display:none}
  #tiers .nv-ticks{height:46px}
  #tiers .nv-stage{padding-top:0}
  #tiers .nv-rail,#tiers .nv-glow{display:none}

  #tiers .nv-out{text-align:left;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:4px 16px;
    margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}
  #tiers .nv-out .kicker{grid-column:1}
  #tiers .nv-out__row{grid-column:1;justify-content:flex-start;margin:8px 0 0}
  #tiers .nv-out__name,#tiers .nv-out__num{font-size:1.9rem}
  #tiers .nv-mini{grid-column:2;grid-row:1 / span 2;display:flex;align-items:flex-end;gap:4px;height:44px}
  #tiers .nv-mini i{width:9px;border-radius:2px 2px 0 0;background:var(--line-2);transition:background .5s,box-shadow .5s}
  #tiers .nv-mini i:nth-child(1){height:100%}
  #tiers .nv-mini i:nth-child(2){height:83%}
  #tiers .nv-mini i:nth-child(3){height:69%}
  #tiers .nv-mini i:nth-child(4){height:58%}
  #tiers .nv-mini i:nth-child(5){height:50%}
  #tiers .nv-mini i.is-on{background:var(--gold-2);box-shadow:0 0 14px rgba(244,213,138,.6)}

  #tiers .nv-grid{display:flex;gap:12px;margin-inline:calc(var(--gut) * -1);padding:26px var(--gut) 30px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  #tiers .nv-grid::-webkit-scrollbar{display:none}
  #tiers .nv-col{flex:0 0 min(78vw,340px);margin-top:0;scroll-snap-align:center}
  #tiers .nv-card{padding:30px 22px 20px}
  #tiers .nv-card__top{margin-bottom:18px}
  #tiers .nv-card__top .tag{font-size:.75rem}
  /* el resplandor termina antes del borde del carrusel: sin costura sobre las flechas */
  #tiers .nv-col.is-on .nv-card{transform:translateY(-8px);box-shadow:0 12px 30px -18px rgba(216,166,70,.6),0 0 0 1px rgba(216,166,70,.12)}
  #tiers.is-live:not(.is-drip) .nv-col.is-on .nv-card{box-shadow:0 12px 30px -18px rgba(216,166,70,.6),0 0 0 1px rgba(216,166,70,.12)}
  #tiers .nv-cifra{font-size:4rem}
  #tiers .nv-name{font-size:1.7rem;margin-top:16px}
  #tiers .nv-desc{font-size:1rem;margin-bottom:22px}
  #tiers .nv-rows dt{font-size:.94rem}
  #tiers .nv-rows dd{font-size:1.06rem}
  #tiers .nv-act{min-height:50px;font-size:.94rem}

  #tiers .nv-nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
  #tiers .nv-cta{min-height:60px;margin-top:28px}
  /* aire entre la cursiva y la cifra: el remate de la itálica no toca el número */
  #tiers .nv-out__row{gap:.65em}
}
/* celulares de 320–359 px: las cinco paradas caben sin encimarse y la lectura no queda bajo las barras */
@media (max-width:359px){
  #tiers .nv-tick__b b,#tiers .nv-tick:first-child .nv-tick__b span{font-size:.78rem}
  #tiers .nv-out{grid-template-columns:minmax(0,1fr)}
  #tiers .nv-mini{display:none}
}

/* ---------- Movimiento reducido ---------- */
html.reduce #tiers .nv-card,html.reduce #tiers .nv-card:before,html.reduce #tiers .nv-ped,html.reduce #tiers .nv-ped:before,html.reduce #tiers .nv-glow{transition:none}
html.reduce #tiers .nv-grid{scroll-behavior:auto}
html.reduce #tiers .nv-liq__w,html.reduce #tiers .nv-liq__sheen,html.reduce #tiers .nv-liq__spec,html.reduce #tiers .nv-liq__body,html.reduce #tiers .nv-tube__fill:after{animation:none}
html.reduce #tiers .nv-liq__sheen{display:none}