/* ==========================================================
   DECKA · PLANES
   ----------------------------------------------------------
   Una página de precios tiene que hacer dos cosas a la vez:
   dejar claro qué se compra y dar ganas de comprarlo. Aquí el
   material es cristal ahumado sobre un fondo con luz de color,
   como la mampara de una cabina iluminada por detrás: cada
   zona tiene su color y se sabe de qué va antes de leerla.

   Nada de trucos: no hay pruebas gratis de los paquetes de
   pago —el plan gratis no caduca y ese es el sitio donde se
   prueba—, y todo lo que se afirma es una política, no una
   promesa de ganancias.
   ========================================================== */

[hidden]{display:none !important}

/* ==========================================================
   0 · EL FONDO
   Cuatro manchas de color muy desenfocadas que se mueven
   despacio. Son las que hacen que el cristal tenga algo que
   refractar: sin ellas, el vidrio es un rectángulo gris.
   ========================================================== */
body.shell[data-pagina="precios"]{position:relative;isolation:isolate}
body.shell[data-pagina="precios"] > .barra-sup{position:relative;z-index:3}
body.shell[data-pagina="precios"] > .marco{position:relative;z-index:2}
body.shell[data-pagina="precios"] .velo{z-index:60}
.pr-fondo{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%, #0E1420 0%, #070910 60%, #05070C 100%)}
/* Las manchas de color eran tan fuertes que teñían toda la página y
   el texto acababa sobre un lodo verdoso. Ahora solo insinúan luz en
   los bordes: el sitio se lee sobre negro, como debe. */
.pr-fondo i{position:absolute;display:block;border-radius:50%;filter:blur(130px);opacity:.11}
.pr-fondo i:nth-child(1){width:46vw;height:46vw;left:-8vw;top:-12vh;
  background:radial-gradient(circle,#FFA033,transparent 68%);animation:pr-vaga 26s ease-in-out infinite}
.pr-fondo i:nth-child(2){width:40vw;height:40vw;right:-6vw;top:-6vh;
  background:radial-gradient(circle,#7FD4FF,transparent 68%);animation:pr-vaga 31s ease-in-out infinite reverse}
.pr-fondo i:nth-child(3){width:30vw;height:30vw;left:6vw;bottom:-26vh;
  background:radial-gradient(circle,#4BE0A0,transparent 70%);animation:pr-vaga2 35s ease-in-out infinite}
.pr-fondo i:nth-child(4){width:28vw;height:28vw;right:2vw;bottom:-24vh;
  background:radial-gradient(circle,#C79BFF,transparent 70%);animation:pr-vaga2 29s ease-in-out infinite reverse}
.pr-fondo u{position:absolute;inset:0;display:block;opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 72%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 72%)}
@keyframes pr-vaga{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(6vw,4vh,0) scale(1.12)}
  66%{transform:translate3d(-4vw,7vh,0) scale(.94)}}
@keyframes pr-vaga2{
  0%,100%{transform:translate3d(0,0,0) scale(1.05)}
  50%{transform:translate3d(-7vw,-6vh,0) scale(.9)}}
@media (prefers-reduced-motion: reduce){.pr-fondo i{animation:none}}

/* ==========================================================
   1 · EL PANEL
   ----------------------------------------------------------
   Antes era cristal: translúcido, con desenfoque y saturación
   sobre las manchas de colores del fondo. Sobre eso no se lee
   nada —el texto acababa flotando sobre verde o naranja—, así
   que el panel es opaco, casi negro, y el color se queda en la
   raya de arriba, en los iconos y en las cifras.
   ========================================================== */
.vidrio{position:relative;border-radius:clamp(14px,1.1vw,20px);overflow:hidden;
  background:linear-gradient(180deg,#12161F 0%,#0C1017 58%,#0A0D13 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 54px -34px #000, inset 0 1px 0 rgba(255,255,255,.05)}
.vidrio > *{position:relative}

/* la raya de color que corona cada panel */
.pr-raya::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg, var(--v,#FFA033),
             color-mix(in srgb, var(--v,#FFA033) 12%, transparent));
  opacity:.9}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .pr-raya::after{background:var(--v,#FFA033);opacity:.65}
}

/* ==========================================================
   2 · CABECERA
   ========================================================== */
.pr-hero{flex:0 0 auto;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(14px,1.6vw,28px);align-items:center;
  padding:clamp(12px,1.5vh,18px) clamp(18px,1.5vw,28px);--v:#FFA033}
.pr-hero > canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.8;pointer-events:none}
.pr-hero h2{margin:0;font-family:var(--display,inherit);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.15rem,2.5vh,1.7rem);color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.5)}
.pr-hero p{margin:7px 0 0;font-size:.88rem;color:#C7D0DE;max-width:88ch;line-height:1.5}
.pr-hero .kick{display:inline-flex;align-items:center;gap:7px;font-family:var(--dato);
  font-size:.44rem;letter-spacing:.18em;text-transform:uppercase;color:#FFC97A;
  padding:5px 11px;border-radius:999px;border:1px solid rgba(255,160,51,.3);
  background:rgba(255,160,51,.12)}
.pr-hero .kick i{width:6px;height:6px;border-radius:50%;background:var(--ambar);
  box-shadow:0 0 9px var(--ambar)}

.pr-ciclo{display:flex;gap:4px;padding:5px;border-radius:999px;flex:0 0 auto;
  background:rgba(8,11,17,.55);border:1px solid rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pr-ciclo button{border:none;background:none;cursor:pointer;color:#8CA0B8;
  padding:8px 16px;border-radius:999px;font-family:var(--dato);font-size:.47rem;
  letter-spacing:.11em;text-transform:uppercase;transition:all .2s ease}
.pr-ciclo button[data-on="1"]{color:#0B0D12;
  background:linear-gradient(180deg,#FFC97A,#FFA033);
  box-shadow:0 6px 18px -8px rgba(255,160,51,.9)}
.pr-ciclo button b{font-weight:400;margin-left:6px;color:#0B0D12;opacity:.72}
.pr-ciclo button:not([data-on="1"]) b{color:var(--verde);opacity:1}

/* ==========================================================
   3 · LAS PESTAÑAS, con su color
   ========================================================== */
body.shell[data-pagina="precios"] .vista > .pestanas{gap:6px}
body.shell[data-pagina="precios"] .pestana{border-radius:999px;padding:9px 18px;
  border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.028);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:all .2s ease}
body.shell[data-pagina="precios"] .pestana:hover{border-color:rgba(255,255,255,.18);color:var(--crema)}
body.shell[data-pagina="precios"] .pestana[data-on="1"]{
  border-color:color-mix(in srgb, var(--vt,#FFA033) 46%, transparent);
  background:color-mix(in srgb, var(--vt,#FFA033) 16%, transparent);
  color:#fff;box-shadow:0 0 26px -10px var(--vt,#FFA033)}
body.shell[data-pagina="precios"] .pestana[data-on="1"]::after{display:none}
.pestana[data-hoja="planes"]{--vt:#FFA033}
.pestana[data-hoja="ganar"]{--vt:#4BE0A0}
.pestana[data-hoja="comparativa"]{--vt:#7FD4FF}
.pestana[data-hoja="preguntas"]{--vt:#C79BFF}
.pestana[data-hoja="extras"]{--vt:#FF7A8A}

/* ==========================================================
   4 · EL TEATRO DE LOS PLANES
   ----------------------------------------------------------
   Cuatro tarjetas del alto de la pantalla, una al lado de otra,
   son una pared de texto: no hay dónde mirar primero. Aquí solo
   hay una de frente, encendida con su color, y las otras tres
   esperando en perspectiva. El color es intenso donde no hay
   letra —el halo, el filo, el icono, el botón— y se retira donde
   sí la hay, que es lo único que no se puede negociar.
   ========================================================== */
.pr-escena{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(14px,1.6vw,30px);flex:1 1 auto;min-height:0;align-items:stretch}

/* ---------- el teatro ---------- */
.pr-teatro{position:relative;min-height:0;min-width:0;
  perspective:1700px;perspective-origin:50% 46%}

/* el halo de detrás toma el color del plan que está de frente */
.pr-halo{position:absolute;left:50%;top:46%;width:clamp(480px,52vw,860px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle, var(--vAct,#FFA033) 0%, transparent 62%);
  opacity:.32;filter:blur(86px);
  transition:background .5s ease, opacity .5s ease}
/* y un suelo que devuelve el reflejo, como el cristal de una cabina */
.pr-suelo{position:absolute;left:8%;right:8%;bottom:2%;height:30%;pointer-events:none;z-index:0;
  background:radial-gradient(60% 100% at 50% 100%,
    color-mix(in srgb, var(--vAct,#FFA033) 34%, transparent), transparent 70%);
  opacity:.34;filter:blur(38px);transition:background .5s ease}
@supports not (color: color-mix(in srgb, red 50%, blue)){.pr-suelo{display:none}}

.pr-pista{position:absolute;inset:0;transform-style:preserve-3d;z-index:1}

/* ---------- la tarjeta ---------- */
.pr-teatro{--ancho:clamp(300px,26.5vw,414px)}
.pr-plan{position:absolute;top:0;bottom:0;left:50%;
  width:var(--ancho);margin-left:calc(var(--ancho) / -2);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
  padding:clamp(16px,2vh,26px) clamp(16px,1.2vw,24px) clamp(14px,1.7vh,20px);
  border-radius:clamp(16px,1.3vw,24px);
  background:linear-gradient(180deg,#141926 0%,#0C1017 56%,#090C12 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 70px -40px #000;
  cursor:pointer;will-change:transform,opacity;
  transition:transform .58s cubic-bezier(.22,.9,.24,1),
             opacity .42s ease, box-shadow .42s ease, border-color .42s ease,
             filter .42s ease}

/* el brillo de color que corona la tarjeta */
.pr-brillo{position:absolute;left:0;right:0;top:0;height:46%;pointer-events:none;z-index:0;
  background:radial-gradient(120% 100% at 50% 0%,
    color-mix(in srgb, var(--v) 26%, transparent), transparent 68%);
  opacity:.4;transition:opacity .42s ease}
@supports not (color: color-mix(in srgb, red 50%, blue)){.pr-brillo{display:none}}
.pr-plan > *:not(.pr-brillo){position:relative;z-index:1}
/* y el filo de color de arriba, que es lo que la identifica de lejos */
.pr-plan::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--v) 22%,var(--v2) 78%,transparent);
  opacity:.75;transition:opacity .42s ease, height .42s ease}

/* ---------- dónde se coloca cada una ---------- */
.pr-plan[data-pos="0"]{
  transform:translate3d(0,0,0) scale(1);z-index:40;opacity:1;cursor:default;
  border-color:color-mix(in srgb, var(--v) 46%, rgba(255,255,255,.1));
  box-shadow:0 34px 90px -40px #000,
             0 0 130px -34px var(--v),
             inset 0 1px 0 rgba(255,255,255,.09)}
.pr-plan[data-pos="0"]::before{height:3px;opacity:1}
.pr-plan[data-pos="0"] .pr-brillo{opacity:1}

.pr-plan[data-pos="-1"]{transform:translate3d(-78%,0,-190px) rotateY(21deg) scale(.83);z-index:30}
.pr-plan[data-pos="1"] {transform:translate3d( 78%,0,-190px) rotateY(-21deg) scale(.83);z-index:30}
.pr-plan[data-pos="-2"]{transform:translate3d(-128%,0,-400px) rotateY(27deg) scale(.68);z-index:20}
.pr-plan[data-pos="2"] {transform:translate3d( 128%,0,-400px) rotateY(-27deg) scale(.68);z-index:20}
.pr-plan[data-pos="-3"]{transform:translate3d(-162%,0,-560px) rotateY(30deg) scale(.58);z-index:10}
.pr-plan[data-pos="3"] {transform:translate3d( 162%,0,-560px) rotateY(-30deg) scale(.58);z-index:10}

/* las del fondo son decorado: se apagan para que la de delante mande */
.pr-plan:not([data-pos="0"]){opacity:.42;filter:saturate(.6) brightness(.62)}
.pr-plan[data-pos="-1"],.pr-plan[data-pos="1"]{opacity:.6;filter:saturate(.75) brightness(.72)}
.pr-plan[data-pos="-3"],.pr-plan[data-pos="3"]{opacity:0;pointer-events:none}
.pr-plan:not([data-pos="0"]):hover{opacity:.95;filter:saturate(1) brightness(.95);
  border-color:color-mix(in srgb, var(--v) 45%, rgba(255,255,255,.1))}
/* el clic en una tarjeta del fondo la trae al frente: el contenido no
   debe interceptarlo, así que solo escucha la tarjeta */
.pr-plan:not([data-pos="0"]) > *{pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .pr-plan{transition:opacity .2s ease}
}

/* ---------- la cabecera: icono y etiqueta ---------- */
.pr-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto}
.pr-ico{width:clamp(38px,3vw,46px);aspect-ratio:1;border-radius:13px;flex:0 0 auto;
  display:grid;place-items:center;
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--v) 34%, transparent),
    color-mix(in srgb, var(--v2) 12%, transparent));
  border:1px solid color-mix(in srgb, var(--v) 42%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .pr-ico{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
}
.pr-plan[data-pos="0"] .pr-ico{box-shadow:inset 0 1px 0 rgba(255,255,255,.26),
  0 0 26px -8px var(--v)}
.pr-ico svg{width:52%;height:52%;fill:none;stroke:var(--v);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.pr-etq{font-family:var(--dato);font-size:.45rem;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;white-space:nowrap;color:var(--v);
  border:1px solid color-mix(in srgb, var(--v) 42%, transparent);
  background:color-mix(in srgb, var(--v) 13%, transparent)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .pr-etq{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
}
.pr-plan[data-destacado][data-pos="0"] .pr-etq{color:#140F04;
  background:linear-gradient(90deg,var(--v),var(--v2));border-color:transparent;
  box-shadow:0 0 22px -6px var(--v);font-weight:700}

/* ---------- nombre y precio ---------- */
.pr-plan h3{margin:clamp(12px,1.6vh,20px) 0 0;font-family:var(--display,inherit);font-weight:700;
  font-size:clamp(1.02rem,1.5vh,1.28rem);letter-spacing:-.01em;color:#fff;text-transform:uppercase}
.pr-precio{display:flex;align-items:baseline;gap:7px;margin:clamp(5px,.8vh,10px) 0 0}
.pr-precio b{font-family:var(--display,inherit);font-size:clamp(2rem,4.4vh,3.1rem);
  line-height:.98;font-weight:700;letter-spacing:-.03em;color:#fff}
.pr-plan[data-pos="0"] .pr-precio b{
  background:linear-gradient(170deg,#fff 30%, var(--v));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px color-mix(in srgb, var(--v) 45%, transparent))}
.pr-precio small{font-family:var(--texto,inherit);font-size:.86rem;color:#8A94A6;font-weight:500}
.pr-precio del{font-family:var(--display,inherit);font-size:clamp(1.1rem,2.1vh,1.5rem);
  color:#6D7788;text-decoration-color:var(--rojo,#FF4438);text-decoration-thickness:2px;
  margin-right:2px;font-weight:600}
.pr-nota{margin:7px 0 0;font-size:.74rem;color:#7C8799;min-height:1.05em}
.pr-lema{margin:clamp(9px,1.2vh,14px) 0 0;font-size:.86rem;color:#AEBCCC;line-height:1.55;
  flex:0 0 auto}

/* ---------- las marcas de cabecera ---------- */
.pr-marcas{display:flex;flex-wrap:wrap;gap:6px;margin-top:clamp(10px,1.3vh,16px);flex:0 0 auto}
.pr-marca{font-size:.73rem;color:#C7D0DE;padding:7px 11px;border-radius:10px;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035)}
.pr-plan[data-pos="0"] .pr-marca{border-color:color-mix(in srgb, var(--v) 24%, rgba(255,255,255,.09));
  background:color-mix(in srgb, var(--v) 7%, rgba(255,255,255,.03))}
.pr-marca b{color:#fff;font-weight:700}

/* ---------- la lista ---------- */
.pr-lista{list-style:none;margin:clamp(12px,1.6vh,20px) 0 0;padding:0 4px 0 0;
  display:flex;flex-direction:column;gap:clamp(7px,.95vh,11px);
  flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;
  font-size:.845rem;line-height:1.42;color:#BCC8D6;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 20px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 20px),transparent)}
.pr-lista[data-final="1"]{-webkit-mask-image:none;mask-image:none}
.pr-lista::-webkit-scrollbar{width:5px}
.pr-lista::-webkit-scrollbar-thumb{background:#2A3242;border-radius:99px}
.pr-lista li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
.pr-lista li svg{width:16px;height:16px;margin-top:2px;flex:0 0 auto}
.pr-lista li svg circle{fill:color-mix(in srgb, var(--v) 20%, transparent);stroke:none}
.pr-lista li svg path{fill:none;stroke:var(--v);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .pr-lista li svg circle{fill:rgba(255,255,255,.08)}
}
.pr-lista li b{color:#fff;font-weight:600}
.pr-lista li.abre{color:#fff;font-weight:600}
.pr-lista li.apagada{color:#6C7686}
.pr-lista li.apagada svg circle{fill:rgba(255,255,255,.035)}
.pr-lista li.apagada svg path{stroke:#565F6D}

/* ---------- el botón, con el color a tope ---------- */
.pr-plan .pr-cta{margin-top:clamp(13px,1.7vh,20px);flex:0 0 auto;width:100%;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(11px,1.5vh,16px) 14px;border-radius:13px;border:1px solid transparent;
  font-family:var(--display,inherit);font-weight:700;font-size:.9rem;letter-spacing:.005em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  color:#0A0D13;background:linear-gradient(135deg,var(--v),var(--v2));
  box-shadow:0 14px 34px -16px var(--v), inset 0 1px 0 rgba(255,255,255,.34);
  transition:transform .16s ease, box-shadow .2s ease, filter .2s ease}
.pr-plan .pr-cta:hover{transform:translateY(-2px);filter:brightness(1.1);
  box-shadow:0 18px 44px -14px var(--v), inset 0 1px 0 rgba(255,255,255,.4)}
.pr-plan .pr-cta:active{transform:translateY(0)}
.pr-plan:not([data-pos="0"]) .pr-cta{box-shadow:none}
.pr-pieplan{margin:clamp(9px,1.1vh,13px) 0 0;font-size:.73rem;color:#7C8799;text-align:center;
  line-height:1.4;flex:0 0 auto}
.pr-pieplan b{display:block;color:var(--v);font-weight:600;font-size:.71rem;
  font-family:var(--dato);letter-spacing:.11em;text-transform:uppercase;margin-bottom:4px}

/* ---------- las flechas ---------- */
.pr-flecha{position:absolute;top:50%;left:clamp(2px,.6vw,14px);transform:translateY(-50%);
  z-index:60;width:clamp(38px,2.9vw,46px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);background:rgba(10,13,19,.82);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .18s ease, border-color .2s ease, background .2s ease, opacity .2s ease}
.pr-flecha.der{left:auto;right:clamp(2px,.6vw,14px)}
.pr-flecha svg{width:20px;height:20px;fill:none;stroke:#DDE5F0;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.pr-flecha:hover{background:rgba(18,23,34,.95);
  border-color:color-mix(in srgb, var(--vAct,#FFA033) 55%, transparent);
  transform:translateY(-50%) scale(1.07)}
.pr-flecha:hover svg{stroke:#fff}
.pr-flecha[disabled]{opacity:.24;cursor:default;pointer-events:none}

/* ==========================================================
   4b · EL MANDO DE LA DERECHA
   ========================================================== */
.pr-torre{width:clamp(196px,15.5vw,252px);display:flex;flex-direction:column;
  gap:clamp(10px,1.3vh,18px);justify-content:center;min-height:0}

/* ---------- mensual / anual ---------- */
.pr-pago{padding:clamp(13px,1.6vh,18px) clamp(12px,1vw,16px);border-radius:16px;
  background:linear-gradient(180deg,#141926,#0B0F16);
  border:1px solid rgba(255,255,255,.08);flex:0 0 auto}
.pr-pago-tit{display:block;font-family:var(--dato);font-size:.46rem;letter-spacing:.16em;
  text-transform:uppercase;color:#7C8799;margin-bottom:10px}
.pr-palanca{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;
  padding:4px;border-radius:13px;background:#080B11;border:1px solid rgba(255,255,255,.07)}
.pr-palanca-tapa{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);
  border-radius:10px;pointer-events:none;z-index:0;
  background:linear-gradient(135deg,#FFC97A,#FF8A1A);
  box-shadow:0 8px 22px -10px #FFA033, inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .34s cubic-bezier(.3,.9,.3,1), background .34s ease}
.pr-palanca[data-ciclo="ano"] .pr-palanca-tapa{transform:translateX(100%);
  background:linear-gradient(135deg,#8CF0C4,#22C98A);
  box-shadow:0 8px 22px -10px #4BE0A0, inset 0 1px 0 rgba(255,255,255,.35)}
.pr-palanca button{position:relative;z-index:1;border:none;background:none;cursor:pointer;
  font:inherit;padding:9px 6px;border-radius:10px;text-align:center;
  color:#8A94A6;transition:color .28s ease}
.pr-palanca button b{display:block;font-size:.84rem;font-weight:700}
.pr-palanca button em{display:block;font-style:normal;font-family:var(--dato);
  font-size:.4rem;letter-spacing:.09em;text-transform:uppercase;margin-top:3px;opacity:.85}
.pr-palanca button[data-on="1"]{color:#0A0D13}
.pr-pago-nota{margin:10px 0 0;font-size:.74rem;color:#8A94A6;line-height:1.45}
.pr-pago-nota b{color:#8CF0C4;font-weight:600}

/* ---------- los cuatro planes en fila ---------- */
.pr-fila{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.pr-fila-it{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:10px;padding:clamp(9px,1.2vh,13px) 13px clamp(9px,1.2vh,13px) 16px;
  border-radius:12px;cursor:pointer;font:inherit;text-align:left;overflow:hidden;
  border:1px solid rgba(255,255,255,.07);background:#0D111A;
  transition:background .22s ease, border-color .22s ease, transform .18s ease}
.pr-fila-luz{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--v);
  opacity:.5;transition:opacity .22s ease, box-shadow .22s ease}
.pr-fila-nom{font-size:.87rem;color:#BCC8D6;font-weight:500;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-fila-eur{font-family:var(--dato);font-size:.78rem;color:#8A94A6;white-space:nowrap}
.pr-fila-it:hover{background:#141A26;border-color:rgba(255,255,255,.13);transform:translateX(2px)}
.pr-fila-it[data-on="1"]{background:linear-gradient(90deg,
    color-mix(in srgb, var(--v) 15%, #0D111A), #0D111A 78%);
  border-color:color-mix(in srgb, var(--v) 42%, transparent);
  box-shadow:0 0 30px -16px var(--v)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .pr-fila-it[data-on="1"]{background:#161C28;border-color:rgba(255,255,255,.2)}
}
.pr-fila-it[data-on="1"] .pr-fila-luz{opacity:1;box-shadow:0 0 14px 1px var(--v)}
.pr-fila-it[data-on="1"] .pr-fila-nom{color:#fff;font-weight:600}
.pr-fila-it[data-on="1"] .pr-fila-eur{color:var(--v)}

/* ---------- el interruptor del sonido ---------- */
.pr-sonido{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:11px;
  cursor:pointer;font:inherit;font-size:.78rem;color:#7C8799;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.07);background:#0D111A;
  transition:color .2s ease, border-color .2s ease}
.pr-sonido svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pr-sonido svg path:first-child{fill:currentColor;stroke-linejoin:round}
.pr-sonido .cruz{display:none}
.pr-sonido[data-on="1"]{color:#8CF0C4;border-color:rgba(75,224,160,.3)}
.pr-sonido:not([data-on="1"]) .onda1,
.pr-sonido:not([data-on="1"]) .onda2{display:none}
.pr-sonido:not([data-on="1"]) .cruz{display:block}
.pr-sonido:hover{border-color:rgba(255,255,255,.18)}

/* ---------- pantallas estrechas o bajas: sin teatro ----------
   En vertical no hay sitio para la perspectiva, así que las
   tarjetas vuelven a la fila de toda la vida y se desplazan. */
@media (max-width:1180px), (max-height:620px){
  .pr-escena{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .pr-torre{width:auto;order:-1;flex-direction:row;align-items:center;
    gap:10px;flex-wrap:wrap;justify-content:flex-start}
  .pr-pago{flex:1 1 220px;max-width:340px}
  .pr-fila{flex-direction:row;flex:1 1 300px;flex-wrap:wrap}
  .pr-fila-it{flex:1 1 120px}
  /* aquí la hoja deja de caber en una pantalla: se desplaza entera y
     las tarjetas recuperan su alto en vez de quedar aplastadas */
  #hojasPrecios > .hoja[data-hoja="planes"][data-on="1"]{overflow:auto;scrollbar-width:thin}
  .pr-escena{display:flex;flex-direction:column;flex:0 0 auto}
  .pr-vias{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(10px,1.4vh,16px)}
  .pr-teatro{flex:0 0 auto;height:min(660px,88vh);min-height:440px;
    perspective:none;overflow:auto hidden;scrollbar-width:thin}
  .pr-halo,.pr-suelo{display:none}
  .pr-pista{position:relative;inset:auto;display:flex;gap:12px;
    transform-style:flat;min-height:100%;padding-bottom:6px}
  .pr-plan{position:relative;top:auto;bottom:auto;left:auto;margin-left:0;
    flex:0 0 clamp(272px,74vw,330px);transform:none !important;
    opacity:1 !important;filter:none !important}
  .pr-flecha{display:none}
}

/* ==========================================================
   5 · LA TIRA DE VÍAS (abajo de Planes)
   ========================================================== */
.pr-vias{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1vw,16px);
  flex:0 0 auto}
/* son <button>: si no se les declara fondo, el navegador les pone el
   suyo —un gris claro— y el texto deja de leerse */
.pr-via{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;
  align-items:center;overflow:hidden;
  padding:clamp(11px,1.4vh,16px) clamp(13px,1vw,17px) clamp(11px,1.4vh,16px) clamp(16px,1.2vw,20px);
  border-radius:clamp(13px,1vw,17px);
  background:linear-gradient(180deg,#12161F,#0A0D13);
  border:1px solid rgba(255,255,255,.08);
  text-align:left;color:inherit;cursor:pointer;font:inherit;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), border-color .18s ease,
             background .18s ease, box-shadow .18s ease}
.pr-via::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--v,#FFA033);opacity:.75;transition:opacity .18s ease, box-shadow .18s ease}
.pr-via:hover{transform:translateY(-3px);background:linear-gradient(180deg,#161C28,#0C1017);
  border-color:color-mix(in srgb, var(--v) 45%, transparent);
  box-shadow:0 20px 44px -28px #000, 0 0 34px -22px var(--v)}
.pr-via:hover::before{opacity:1;box-shadow:0 0 16px 1px var(--v)}
.pr-via-ico{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--v,#FFA033) 34%, transparent),
    color-mix(in srgb, var(--v,#FFA033) 8%, transparent));
  border:1px solid color-mix(in srgb, var(--v,#FFA033) 34%, transparent)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .pr-via-ico{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
}
.pr-via-ico svg{width:19px;height:19px;fill:none;stroke:var(--v,#FFA033);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.pr-via b{display:block;font-size:.9rem;color:#fff;font-weight:600;margin-top:2px}
.pr-via > span > span{display:block;font-size:.76rem;color:#9FB0C4;line-height:1.4;margin-top:2px}
.pr-via em{font-style:normal;font-family:var(--dato);font-size:.46rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--v,#FFA033)}

/* ==========================================================
   6 · HOJA «CUÁNTO PUEDES GANAR»
   ----------------------------------------------------------
   Era una lista de barras finas y una cifra pequeña al final:
   parecía un formulario, no una calculadora. Ahora cada mando
   es una tira de canal con el color del ingreso al que alimenta
   —ámbar propinas, cian socios, verde plataformas, violeta
   bolos— y ese mismo color vuelve abajo, en la barra del
   desglose. Se ve de un golpe qué mueve qué.
   ========================================================== */
.pr-ganar{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) minmax(0,.94fr);
  gap:clamp(12px,1.2vw,20px);flex:1 1 auto;min-height:0}
.pr-caja{display:flex;flex-direction:column;min-height:0;overflow:hidden;
  padding:clamp(14px,1.7vh,20px) clamp(15px,1.1vw,20px)}
.pr-caja > .cab{order:-2;display:flex;align-items:center;gap:10px;flex:0 0 auto;
  margin-bottom:clamp(10px,1.2vh,15px)}
#prCalc > .cab{position:sticky;top:0;z-index:4;padding-bottom:9px;margin-bottom:6px;
  background:linear-gradient(180deg,#0C1017 72%,transparent)}
#prCalc .pr-total{top:clamp(26px,3.2vh,34px)}
.pr-caja > .cab .mono{display:flex;align-items:center;gap:8px;font-family:var(--dato);
  font-size:.5rem;letter-spacing:.13em;text-transform:uppercase;color:var(--v,#8CA0B8)}
.pr-caja > .cab .mono svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.pr-caja > .cab .der{margin-left:auto;display:flex;align-items:center;gap:8px}

/* ---------- los mandos, como tiras de canal ---------- */
#prCalc{overflow:auto;scrollbar-width:thin;padding-right:clamp(10px,.8vw,15px)}
.pr-mandos{flex:0 0 auto;
  display:grid;grid-template-columns:minmax(0,1fr);align-content:start;
  gap:clamp(6px,.75vh,9px)}
.pr-mando{position:relative;flex:0 0 auto;overflow:hidden;
  padding:clamp(8px,1vh,11px) clamp(11px,.9vw,15px) clamp(9px,1.1vh,12px) clamp(13px,1vw,17px);
  border-radius:12px;border:1px solid rgba(255,255,255,.07);background:#0E131C;
  transition:border-color .2s ease, background .2s ease}
.pr-mando::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--v,#FFA033);opacity:.55;transition:opacity .2s ease, box-shadow .2s ease}
.pr-mando:hover,.pr-mando:focus-within{background:#121826;
  border-color:color-mix(in srgb, var(--v,#FFA033) 34%, rgba(255,255,255,.07))}
.pr-mando:hover::before,.pr-mando:focus-within::before{opacity:1;
  box-shadow:0 0 14px 1px var(--v,#FFA033)}
.pr-mando .fila{display:flex;align-items:center;gap:9px}
.pr-mando-ico{width:24px;height:24px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;
  background:color-mix(in srgb, var(--v,#FFA033) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--v,#FFA033) 30%, transparent)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .pr-mando-ico{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13)}
}
.pr-mando-ico svg{width:13px;height:13px;fill:none;stroke:var(--v,#FFA033);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.pr-mando label{font-size:.855rem;color:#C7D0DE;min-width:0;flex:1 1 auto}
.pr-mando output{margin-left:auto;font-family:var(--dato);font-size:.86rem;color:#fff;
  font-weight:600;padding:4px 11px;border-radius:9px;white-space:nowrap;
  background:color-mix(in srgb, var(--v,#FFA033) 14%, #0A0D13);
  border:1px solid color-mix(in srgb, var(--v,#FFA033) 38%, transparent);
  box-shadow:0 0 22px -12px var(--v,#FFA033)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .pr-mando output{background:#141A26;border-color:rgba(255,255,255,.16)}
}
.pr-mando .pista{display:block;font-size:.715rem;color:#7C8799;margin-top:5px;line-height:1.35}

/* el fader: carril grueso, relleno del color y pomo con luz */
.pr-mando input[type=range]{-webkit-appearance:none;appearance:none;
  width:100%;margin:9px 0 0;height:18px;background:none;cursor:pointer;display:block}
.pr-mando input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;
  background:linear-gradient(90deg, var(--v,#FFA033) 0 var(--relleno,40%),
             rgba(255,255,255,.08) var(--relleno,40%) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.pr-mando input[type=range]::-moz-range-track{height:6px;border-radius:99px;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.pr-mando input[type=range]::-moz-range-progress{height:6px;border-radius:99px;
  background:var(--v,#FFA033)}
.pr-mando input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:18px;height:18px;margin-top:-6px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #fff 0 18%, var(--v,#FFA033) 62%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 2px 8px rgba(0,0,0,.6), 0 0 18px -2px var(--v,#FFA033);
  transition:transform .14s ease}
.pr-mando input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #fff 0 18%, var(--v,#FFA033) 62%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 2px 8px rgba(0,0,0,.6), 0 0 18px -2px var(--v,#FFA033)}
.pr-mando input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.14)}
.pr-mando input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 4px color-mix(in srgb, var(--v,#FFA033) 35%, transparent)}

/* ---------- el resultado ---------- */
.pr-total{order:-1;position:sticky;top:0;z-index:3;
  margin:0 0 clamp(10px,1.3vh,15px);flex:0 0 auto;
  padding:clamp(12px,1.5vh,17px) clamp(13px,1vw,17px);border-radius:16px;
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(75,224,160,.13), transparent 62%),
    linear-gradient(180deg,#101A17,#0A0D13);
  border:1px solid rgba(75,224,160,.24)}
.pr-total-cifra{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;gap:4px 12px}
.pr-total-et{grid-column:1 / -1;font-family:var(--dato);font-size:.45rem;letter-spacing:.15em;
  text-transform:uppercase;color:#7C8799}
.pr-total-cifra b{font-family:var(--display,inherit);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.9rem,4vh,2.7rem);line-height:1;
  background:linear-gradient(170deg,#DFFFF1 10%,#4BE0A0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(75,224,160,.4))}
.pr-total-ano{font-family:var(--dato);font-size:.74rem;color:#8A94A6;text-align:right}
.pr-total-ano em{font-style:normal;color:#8CF0C4;font-weight:600}

.pr-desglose{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.pr-desglose div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;
  align-items:center}
.pr-desglose div::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--c,#FFA033);box-shadow:0 0 10px 0 var(--c,#FFA033)}
.pr-desglose span{font-size:.82rem;color:#C7D0DE;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.pr-desglose em{font-style:normal;font-family:var(--dato);font-size:.78rem;color:#fff;
  font-weight:600}
.pr-desglose i{grid-column:1 / -1;height:7px;border-radius:5px;background:rgba(255,255,255,.06);
  overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.pr-desglose i u{display:block;height:100%;border-radius:5px;
  box-shadow:0 0 16px -3px var(--c,#FFA033);
  transition:width .4s cubic-bezier(.2,.8,.3,1)}

.pr-veredicto{margin-top:12px;padding:10px 13px;border-radius:12px;font-size:.8rem;
  line-height:1.45;border:1px solid rgba(75,224,160,.3);
  background:linear-gradient(120deg, rgba(75,224,160,.12), rgba(75,224,160,.03));
  color:#EAF6F0}
.pr-veredicto b{color:#8CF0C4;font-weight:700}
.pr-veredicto[data-mal="1"]{border-color:rgba(255,160,51,.32);
  background:linear-gradient(120deg, rgba(255,160,51,.12), rgba(255,160,51,.03));
  color:#F7EEE0}
.pr-veredicto[data-mal="1"] b{color:#FFC97A}

/* ---------- la columna del medio: de dónde sale el dinero ---------- */
.pr-detalle{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;min-height:0;overflow:auto;
  scrollbar-width:thin;padding-right:3px;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 14px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 14px),transparent)}
/* el color va en una banda a la izquierda, no tiñendo el texto */
.pr-det{position:relative;flex:0 0 auto;padding:13px 15px 13px 18px;border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  background:#0E131C;overflow:hidden;
  transition:border-color .18s ease, transform .18s ease, background .18s ease}
.pr-det::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--v,#FFA033);opacity:.85}
.pr-det:hover{transform:translateX(3px);background:#121826;
  border-color:color-mix(in srgb, var(--v,#FFA033) 34%, rgba(255,255,255,.07))}
.pr-det-cab{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.pr-det-cab svg{width:17px;height:17px;fill:none;stroke:var(--v,#FFA033);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.pr-det-cab strong{font-size:.9rem;color:#fff;font-weight:600}
.pr-det p{margin:7px 0 0;font-size:.8rem;color:#AEBCCC;line-height:1.5}
.pr-det p b{color:#EAF0F8;font-weight:600}
.pr-sello{flex:0 0 auto;font-family:var(--dato);font-size:.44rem;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;white-space:nowrap;
  color:var(--v,#FFA033);
  border:1px solid color-mix(in srgb, var(--v,#FFA033) 40%, transparent);
  background:color-mix(in srgb, var(--v,#FFA033) 13%, transparent)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .pr-sello{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06)}
}

/* ---------- la columna de la derecha: lo que aquí no se paga ---------- */
.pr-ahorro{display:flex;flex-direction:column;gap:9px;flex:1 1 auto;min-height:0;overflow:auto;
  scrollbar-width:thin;padding-right:3px}
.pr-ah{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  gap:5px 12px;align-items:center;overflow:hidden;
  padding:12px 14px 12px 17px;border-radius:14px;border:1px solid rgba(255,255,255,.07);
  background:#0E131C;flex:0 0 auto;transition:background .18s ease, border-color .18s ease}
.pr-ah::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--rojo,#FF4438),var(--verde,#4BE0A0));opacity:.7}
.pr-ah:hover{background:#121826;border-color:rgba(255,255,255,.13)}
.pr-ah strong{grid-column:1 / -1;font-size:.87rem;color:#fff;font-weight:600}
.pr-ah span.q{grid-column:1;font-size:.75rem;color:#8A94A6}
.pr-ah .fuera{font-family:var(--dato);font-size:.7rem;color:#8A97A8;text-decoration:line-through;
  text-decoration-color:rgba(255,68,56,.85);text-decoration-thickness:2px}
.pr-ah .aqui{font-family:var(--dato);font-size:.76rem;color:#8CF0C4;font-weight:600;
  padding:4px 11px;border-radius:999px;background:rgba(75,224,160,.13);
  border:1px solid rgba(75,224,160,.34);box-shadow:0 0 20px -10px #4BE0A0}

/* ==========================================================
   7 · COMPARATIVA · legible de lejos
   ----------------------------------------------------------
   El cristal deja pasar el color del fondo, y eso en una tabla
   con veinticinco filas cansa: aquí se calma el campo y el
   color se queda en los bordes y en los títulos de grupo.
   ========================================================== */
.pr-tabla-caja{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;border-radius:14px;
  background:rgba(7,10,16,.86);border:1px solid rgba(255,255,255,.07)}
.pr-tabla{width:100%;border-collapse:separate;border-spacing:0}
.pr-tabla th{position:sticky;top:0;z-index:3;text-align:left;padding:12px 16px;
  font-family:var(--dato);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:#C7D0DE;background:rgba(12,16,23,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.14)}
.pr-tabla th:not(:first-child),.pr-tabla td:not(:first-child){text-align:center;width:14%}
.pr-tabla th.dest{color:#FFC97A}
.pr-tabla th.artista{color:#D9BCFF}
.pr-tabla th.club{color:#8CF0C4}
.pr-tabla td{padding:10px 16px;font-size:.88rem;color:#C7D0DE;
  border-bottom:1px solid rgba(255,255,255,.055)}
.pr-tabla tbody tr:nth-child(odd) td{background:rgba(255,255,255,.016)}
.pr-tabla tr.grupo td{padding:15px 16px 7px;font-family:var(--dato);font-size:.52rem;
  letter-spacing:.16em;text-transform:uppercase;border-bottom:none;background:none !important}
.pr-tabla tr.grupo td span{display:inline-flex;align-items:center;gap:9px}
.pr-tabla tr.grupo td i{width:7px;height:7px;border-radius:50%;background:currentColor;
  box-shadow:0 0 12px currentColor}
.pr-tabla td.v{font-family:var(--dato);font-size:.74rem;color:#fff}
.pr-tabla td.bien{color:#8CF0C4}
.pr-tabla td.si svg{width:19px;height:19px;fill:none;stroke:#4BE0A0;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px rgba(75,224,160,.5))}
.pr-tabla td.no svg{width:15px;height:15px;fill:none;stroke:#4C5769;stroke-width:2.4;stroke-linecap:round}
.pr-tabla tbody tr:hover td{background:rgba(255,255,255,.05)}
/* la columna del plan destacado, resaltada de arriba abajo */
.pr-tabla th:nth-child(3),.pr-tabla td:nth-child(3){
  background:rgba(255,160,51,.07);
  box-shadow:inset 1px 0 0 rgba(255,160,51,.2), inset -1px 0 0 rgba(255,160,51,.2)}
.pr-tabla tbody tr:hover td:nth-child(3){background:rgba(255,160,51,.13)}
.pr-tabla tr.grupo td:nth-child(3){background:rgba(255,160,51,.07) !important}
/* las otras dos columnas de pago, apenas teñidas: basta para que el
   ojo siga la vertical sin que compitan con la destacada */
.pr-tabla th:nth-child(4),.pr-tabla td:nth-child(4){background:rgba(199,155,255,.05)}
.pr-tabla th:nth-child(5),.pr-tabla td:nth-child(5){background:rgba(75,224,160,.05)}
.pr-tabla tbody tr:hover td:nth-child(4){background:rgba(199,155,255,.12)}
.pr-tabla tbody tr:hover td:nth-child(5){background:rgba(75,224,160,.12)}
.pr-tabla tr.grupo td:nth-child(4){background:rgba(199,155,255,.045) !important}
.pr-tabla tr.grupo td:nth-child(5){background:rgba(75,224,160,.045) !important}
.pr-tabla td:first-child{font-weight:500;color:#EAF0F8}

/* ==========================================================
   8 · PREGUNTAS
   ========================================================== */
.pr-preg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,20px);
  align-items:start;flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;padding-right:3px}
.pr-preg details{border:1px solid rgba(255,255,255,.07);border-radius:15px;
  background:#10141C;padding:13px 15px;margin-bottom:10px;
  transition:border-color .18s ease, background .18s ease}
.pr-preg details:hover{border-color:rgba(199,155,255,.28);background:#141923}
.pr-preg details[open]{border-color:rgba(199,155,255,.34);background:#14121D}
.pr-preg summary{cursor:pointer;font-size:.89rem;color:#fff;font-weight:600;
  list-style:none;display:flex;align-items:center;gap:11px;justify-content:flex-start;text-align:left}
.pr-preg summary::-webkit-details-marker{display:none}
.pr-preg summary::after{content:"" !important;display:none}
.pr-preg summary::before{content:"+";font-family:var(--dato);color:#C79BFF;flex:0 0 auto;
  width:20px;height:20px;border-radius:7px;display:grid;place-items:center;font-size:.72rem;
  background:rgba(199,155,255,.14);border:1px solid rgba(199,155,255,.3)}
.pr-preg details[open] summary::before{content:"−"}
.pr-preg details p{margin:10px 0 0 31px;font-size:.83rem;color:#A9B7C8;line-height:1.6}

/* ==========================================================
   9 · EXTRAS · tarjetas que se leen
   ========================================================== */
.pr-extras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,20px);
  flex:1 1 auto;min-height:0}
.pr-cols{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;min-height:0;overflow:auto;
  scrollbar-width:thin;padding-right:3px;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 14px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 14px),transparent)}
.pr-ext{position:relative;overflow:hidden;flex:0 0 auto;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:13px;align-items:center;
  padding:14px 16px 14px 18px;border-radius:15px;
  border:1px solid rgba(255,255,255,.07);
  background:#10141C;
  transition:transform .2s cubic-bezier(.2,.8,.3,1), border-color .2s ease,
             background .2s ease, box-shadow .2s ease}
.pr-ext::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--v,#FFA033);opacity:.85}
.pr-ext:hover{transform:translateY(-3px);background:#141923;
  border-color:rgba(255,255,255,.14);
  box-shadow:0 22px 44px -26px #000}
.pr-ext-ico{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;
  background:color-mix(in srgb, var(--v,#FFA033) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--v,#FFA033) 30%, transparent)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .pr-ext-ico{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
}
.pr-ext-ico svg{width:20px;height:20px;fill:none;stroke:var(--v,#FFA033);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.pr-ext-txt{min-width:0}
.pr-ext-txt strong{display:block;font-size:.95rem;color:#fff;font-weight:600;line-height:1.25}
.pr-ext-txt span{display:block;font-size:.79rem;color:#A9B7C8;line-height:1.45;margin-top:3px}
.pr-ext-der{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 auto}
.pr-ext-precio{font-family:var(--dato);font-size:.92rem;color:#fff;white-space:nowrap}
.pr-ext-precio small{display:block;font-size:.4rem;letter-spacing:.11em;text-transform:uppercase;
  color:#8CA0B8;text-align:right;margin-top:3px;text-shadow:none}
.pr-ext-der .mini{border-color:color-mix(in srgb, var(--v,#FFA033) 45%, transparent);
  color:var(--v,#FFA033);white-space:nowrap}
.pr-ext-der .mini:hover{background:color-mix(in srgb, var(--v,#FFA033) 18%, transparent);color:#fff}

/* ==========================================================
   10 · BANNERS NUESTROS
   ========================================================== */
.pr-banda{position:relative;overflow:hidden;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(14px,1.6vw,26px);align-items:center;
  margin-top:clamp(12px,1.3vh,18px);flex:0 0 auto;
  padding:clamp(14px,1.7vh,20px) clamp(16px,1.4vw,24px);border-radius:20px;
  border:1px solid color-mix(in srgb, var(--v,#FFA033) 34%, transparent);
  background:
    radial-gradient(90% 240% at 6% 50%, color-mix(in srgb, var(--v,#FFA033) 26%, transparent), transparent 62%),
    linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  box-shadow:0 24px 54px -32px #000, inset 0 1px 0 rgba(255,255,255,.16)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .pr-banda{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
}
.pr-banda > i.luz{position:absolute;left:-12%;top:-120%;width:40%;height:340%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.1),transparent);
  transform:skewX(-14deg);animation:pr-barrido 7s ease-in-out infinite}
@keyframes pr-barrido{0%{left:-45%}55%{left:118%}100%{left:118%}}
@media (prefers-reduced-motion: reduce){.pr-banda > i.luz{animation:none;opacity:0}}
.pr-banda-sello{width:clamp(44px,3.6vw,56px);aspect-ratio:1;border-radius:16px;display:grid;
  place-items:center;flex:0 0 auto;position:relative;
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--v,#FFA033) 44%, transparent),
    color-mix(in srgb, var(--v,#FFA033) 10%, transparent));
  border:1px solid color-mix(in srgb, var(--v,#FFA033) 45%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 0 32px -12px var(--v,#FFA033)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .pr-banda-sello{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
}
.pr-banda-sello svg{width:24px;height:24px;fill:none;stroke:var(--v,#FFA033);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.pr-banda-txt{min-width:0;position:relative}
.pr-banda .kick{font-family:var(--dato);font-size:.44rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--v,#FFA033)}
.pr-banda h3{margin:5px 0 4px;font-family:var(--display,inherit);font-weight:700;
  letter-spacing:-.015em;font-size:clamp(1rem,1.9vh,1.3rem);color:#fff}
.pr-banda p{margin:0;font-size:.83rem;color:#B5C1D0;max-width:88ch;line-height:1.5}
.pr-banda-acc{display:flex;gap:10px;flex:0 0 auto;position:relative}
.pr-banda-acc .btn{border-radius:13px}

/* ==========================================================
   11 · VENTANAS BAJAS Y ESTRECHAS
   ========================================================== */
@media (max-height:920px){
  .pr-hero p{display:none}
  .pr-via > span > span{display:none}
  .pr-lema{display:none}
  .pr-banda p{display:none}
}
@media (max-height:810px){
  .pr-chapa{display:none}
  .pr-dinero span{display:none}
  .pr-via-ico{width:32px;height:32px}
  .pr-ext{padding:11px 13px}
  .pr-ext-ico{width:34px;height:34px}
}
/* con cuatro planes el sitio se acaba antes: dos y dos, y luego uno.
   En dos filas cada fila se reparte el alto y la lista de dentro
   se encarga de desplazarse: así no se sale nada de la tarjeta. */
@media (max-width:1500px){
  .pr-planes{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:minmax(0,1fr);overflow:auto;scrollbar-width:thin}
  .pr-planes .pr-plan{min-height:clamp(430px,52vh,560px)}
}
@media (max-width:1150px){
  .pr-planes{grid-template-columns:1fr}
  .pr-vias{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-ganar{grid-template-columns:1fr}
  .pr-preg,.pr-extras{grid-template-columns:1fr}
  .pr-hero{grid-template-columns:1fr}
  .pr-banda{grid-template-columns:auto minmax(0,1fr)}
  .pr-banda-acc{grid-column:1 / -1}
}

/* ==========================================================
   LAS BANDAS LLEVAN FOTO
   ----------------------------------------------------------
   Cada pestaña tiene su propio cuadro de fondo, pintado a
   medida de lo que cuenta. Encima cae un velo de izquierda a
   derecha: opaco donde va el texto, transparente donde se ve
   la imagen. El cristal se queda para las tarjetas.
   ========================================================== */
.pr-hero,.pr-banda{
  background-image:
    linear-gradient(90deg,
      rgba(5,7,12,.97) 0%, rgba(5,7,12,.93) 32%,
      rgba(5,7,12,.66) 56%, rgba(5,7,12,.28) 80%, rgba(5,7,12,.10) 100%),
    radial-gradient(85% 220% at 5% 50%,
      color-mix(in srgb, var(--v,#FFA033) 24%, transparent), transparent 58%),
    var(--pr-img, none);
  background-size:cover,cover,cover;
  background-position:center,center,center;
  background-repeat:no-repeat;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-color:color-mix(in srgb, var(--v,#FFA033) 30%, rgba(255,255,255,.11))}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .pr-hero,.pr-banda{background-image:
    linear-gradient(90deg, rgba(5,7,12,.97) 0%, rgba(5,7,12,.9) 34%,
                           rgba(5,7,12,.6) 68%, rgba(5,7,12,.3) 100%),
    var(--pr-img, none)}
}
.pr-hero{--pr-img:url(img/bandas/planes.jpg)}
.hoja[data-hoja="ganar"] .pr-banda{--pr-img:url(img/bandas/ganar.jpg)}
.hoja[data-hoja="comparativa"] .pr-banda{--pr-img:url(img/bandas/comparativa.jpg)}
.hoja[data-hoja="preguntas"] .pr-banda{--pr-img:url(img/bandas/preguntas.jpg)}
.hoja[data-hoja="extras"] .pr-banda{--pr-img:url(img/bandas/extras.jpg)}
.pr-hero > canvas{opacity:.34}

/* que el texto gane siempre */
.pr-hero h2,.pr-banda h3{text-shadow:0 2px 16px rgba(0,0,0,.88), 0 0 38px rgba(0,0,0,.6)}
.pr-hero p,.pr-banda p{text-shadow:0 1px 11px rgba(0,0,0,.85)}
.pr-hero .kick,.pr-banda .kick{text-shadow:0 1px 9px rgba(0,0,0,.9)}

/* ==========================================================
   EL RELIEVE DEL FONDO
   ----------------------------------------------------------
   El lienzo va dentro de .pr-fondo, detrás de la retícula de
   puntos. No recibe clics y no pesa en la lectura: el terreno
   se hunde justo en el centro, que es donde va el texto.
   ========================================================== */
.pr-relieve{position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;opacity:.78;
  -webkit-mask-image:radial-gradient(150% 120% at 50% 45%, #000 55%, rgba(0,0,0,.7) 85%, transparent 100%);
  mask-image:radial-gradient(150% 120% at 50% 45%, #000 55%, rgba(0,0,0,.7) 85%, transparent 100%)}
@media (prefers-reduced-motion: reduce){.pr-relieve{opacity:.34}}

/* ==========================================================
   LAS BANDAS, EN CRISTAL
   ----------------------------------------------------------
   Cristal de verdad: el fondo se ve borroso por detrás, el
   canto coge luz por arriba y dentro se mueve algo. Lo que no
   se negocia es la lectura, así que el relleno lleva color
   propio además del desenfoque: sobre un fondo claro el texto
   seguiría teniendo su contraste.

   La animación va dentro del propio cristal y recortada a él:
   un reflejo que cruza despacio y un resplandor que ronda. Ni
   parpadea ni llama la atención; solo hace que la pieza no
   parezca una foto.
   ========================================================== */
.pr-hero,
.pr-via{
  position:relative;overflow:hidden;isolation:isolate;
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  background:linear-gradient(150deg, rgba(28,38,54,.62), rgba(10,15,23,.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 26px 60px -40px #000}

/* el reflejo que cruza el cristal */
.pr-hero::before,
.pr-via::before{
  content:"";position:absolute;top:-60%;bottom:-60%;width:38%;
  left:-45%;z-index:0;pointer-events:none;
  transform:rotate(14deg);
  background:linear-gradient(90deg,
    transparent, rgba(255,255,255,.07) 42%, rgba(255,255,255,.12) 50%,
    rgba(255,255,255,.07) 58%, transparent);
  animation:pr-brillo 9s linear infinite}
.pr-via::before{animation-duration:11s}
@keyframes pr-brillo{
  0%{left:-45%}
  62%,100%{left:125%}}

/* y el resplandor que ronda por dentro, del color de la banda */
.pr-hero::after,
.pr-via::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:52%;aspect-ratio:1;border-radius:50%;filter:blur(52px);
  background:radial-gradient(circle, var(--v, #FFA033), transparent 66%);
  opacity:.2;animation:pr-ronda 17s ease-in-out infinite}
.pr-via::after{width:78%;filter:blur(38px);opacity:.24;animation-duration:13s}
@keyframes pr-ronda{
  0%,100%{left:-12%;top:-30%}
  33%{left:62%;top:-12%}
  66%{left:24%;top:46%}}

/* el contenido, siempre por encima del cristal */
.pr-hero > *,
.pr-via > *{position:relative;z-index:1}

/* el canto de abajo, que es lo que hace que parezca una pieza */
.pr-via{border-radius:14px}
.pr-via:hover{
  background:linear-gradient(150deg, rgba(36,48,68,.7), rgba(13,19,29,.78));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px color-mix(in srgb, var(--v, #FFA033) 34%, transparent),
    0 0 40px -18px var(--v, #FFA033),
    0 26px 60px -40px #000}

@media (prefers-reduced-motion: reduce){
  .pr-hero::before,.pr-via::before,
  .pr-hero::after,.pr-via::after{animation:none}}

/* ==========================================================
   LAS PIEZAS SE SEPARAN DEL FONDO
   ----------------------------------------------------------
   Con el fondo casi negro y las bandas casi negras, la página
   era una mancha. Las piezas suben un escalón de luz —siguen
   siendo cristal, pero de un gris azulado propio— y el canto
   superior coge brillo. Ahora se ve dónde acaba el fondo y
   empieza la pieza.
   ========================================================== */
.pr-hero{
  background:
    linear-gradient(150deg, rgba(48,62,86,.72), rgba(24,33,48,.8) 62%, rgba(16,23,35,.84));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(150,190,240,.14),
    0 30px 70px -44px #000}
.pr-via{
  background:
    linear-gradient(150deg, rgba(44,58,80,.7), rgba(21,29,43,.8) 66%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 0 0 1px rgba(150,190,240,.13),
    0 22px 50px -38px #000}
.pr-via:hover{
  background:linear-gradient(150deg, rgba(56,72,98,.78), rgba(26,36,52,.86) 66%)}

/* el fondo, un punto más oscuro para que el contraste sea real */
.pr-fondo{
  background:radial-gradient(120% 90% at 50% -10%, #0A0F18 0%, #05070C 62%, #03050A 100%)}

/* las líneas del relieve, discretas: las tarjetas mandan */
.pr-relieve{opacity:.8}

/* ==========================================================
   PLANES · COLOR, NEGRO Y CONTRASTE
   ----------------------------------------------------------
   Tres cosas que iban mal a la vez. El fondo era azul marino
   y las piezas también, así que todo parecía lo mismo. Los
   textos apagados estaban tan bajos que molestaban de leer. Y
   los botones de acción no tenían fuerza.

   Se arregla separando: fondo negro de verdad, piezas con
   color propio y saturado, y los apagados subidos a un gris
   que se lee sin competir con lo encendido.
   ========================================================== */

/* ---------- el fondo, negro ---------- */
.pr-fondo{
  background:radial-gradient(130% 100% at 50% -15%, #070709 0%, #030304 55%, #000 100%)}
.pr-fondo i{opacity:.07}
.pr-relieve{opacity:.62}

/* ---------- el banner de arriba, en color ----------
   OJO · esto pisa la foto. Más arriba en este mismo archivo hay un
   bloque que compone velo + tinte + `var(--pr-img)` para que el
   banner lleve su cuadro de fondo (assets/img/bandas/planes.jpg,
   que existe y lo pinta herramientas/arte/render.py). Este
   `background` de aquí abajo es un atajo posterior y gana por
   orden, así que la foto no se ve nunca.

   Es el mismo choque que en Ajustes: dos ideas para el mismo
   sitio —foto por apartado y color por apartado— y la segunda se
   comió a la primera sin decirlo. Se deja apuntado en vez de
   decidir por mi cuenta cuál de las dos quieres. Para recuperar
   la foto basta con usar `background-image` en vez de
   `background` aquí, o borrar este bloque. */
.pr-hero{
  background:
    linear-gradient(118deg,
      rgba(29,78,255,.34) 0%,
      rgba(22,44,120,.3) 34%,
      rgba(12,18,40,.6) 66%,
      rgba(6,8,16,.7) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 0 0 1px rgba(120,160,255,.24),
    0 0 70px -34px rgba(29,78,255,.85),
    0 30px 70px -44px #000}
.pr-hero::after{background:radial-gradient(circle, #2D6BFF, transparent 66%);opacity:.3}

/* ---------- las cuatro de abajo, cada una con su color ---------- */
.pr-via{
  background:
    linear-gradient(140deg,
      color-mix(in srgb, var(--v, #FFA033) 26%, #0B0F18) 0%,
      color-mix(in srgb, var(--v, #FFA033) 9%, #07090F) 58%,
      #05060B 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 0 0 1px color-mix(in srgb, var(--v, #FFA033) 30%, transparent),
    0 0 44px -26px var(--v, #FFA033),
    0 22px 50px -38px #000}
.pr-via:hover{
  background:
    linear-gradient(140deg,
      color-mix(in srgb, var(--v, #FFA033) 40%, #0D1220) 0%,
      color-mix(in srgb, var(--v, #FFA033) 14%, #090C14) 58%,
      #06080E 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 0 0 1px color-mix(in srgb, var(--v, #FFA033) 56%, transparent),
    0 0 60px -22px var(--v, #FFA033),
    0 22px 50px -38px #000}
.pr-via::after{opacity:.34}
.pr-via em{color:color-mix(in srgb, var(--v, #FFA033) 74%, #fff)}

/* ---------- los textos, en sus tonos ----------
   Lo incluido, blanco y con su marca encendida. Lo que no
   entra, gris medio con la marca apagada: se lee sin
   esfuerzo y se distingue de lo otro a la primera. */
.pr-lista li{color:#D6DEEA}
.pr-lista li b,
.pr-lista li.abre{color:#FFF}
.pr-lista li svg circle{fill:color-mix(in srgb, var(--v) 88%, transparent)}
.pr-lista li svg path{stroke:#05070C;stroke-width:2.8}
.pr-lista li.apagada{color:#8A93A3}
.pr-lista li.apagada svg circle{fill:rgba(255,255,255,.1)}
.pr-lista li.apagada svg path{stroke:rgba(255,255,255,.34)}

/* ---------- los botones, vivos ---------- */
.pr-plan .pr-cta,
.pr-plan .pr-bt-plan,
.pr-plan a.pr-accion,
.pr-plan button.pr-accion{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--v) 88%, #fff) 0%,
    var(--v) 42%,
    color-mix(in srgb, var(--v) 72%, #000) 100%);
  color:#05070C;font-weight:700;border:0;
  box-shadow:
    0 0 34px -8px var(--v),
    inset 0 1px 0 rgba(255,255,255,.55)}

/* ---------- las flechas, pegadas al teatro ---------- */
.pr-flecha{left:clamp(-6px,-.4vw,0px);
  background:rgba(8,10,16,.9);border-color:rgba(160,190,255,.22)}
.pr-flecha.der{left:auto;right:clamp(-6px,-.4vw,0px)}

/* ==========================================================
   EL CARTEL DE LA IZQUIERDA
   ----------------------------------------------------------
   Quien llega a Planes está decidiendo si paga. Esto es lo
   que se lleva por pagar, en vertical y sin tener que ir a
   buscarlo: primero a qué viene —montar un canal y cobrar—
   y debajo las cuatro mesas del estudio, cada una con su
   color, que es como se reconocen en el resto de la web.
   ========================================================== */
.pr-escena{grid-template-columns:clamp(190px,15vw,286px) minmax(0,1fr) auto}
.pr-cartel{
  display:flex;flex-direction:column;gap:clamp(6px,.8vh,11px);
  min-width:0;min-height:0;overflow:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:clamp(11px,1.3vh,18px);
  border-radius:clamp(14px,1.2vw,22px);
  background:linear-gradient(170deg, rgba(18,22,34,.86), rgba(5,7,12,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
             inset 0 0 0 1px rgba(150,190,240,.12),
             0 30px 70px -50px #000}
.pr-cartel::-webkit-scrollbar{width:0;display:none}

.pr-cartel-alto{
  position:relative;overflow:hidden;
  padding:clamp(12px,1.5vh,18px) clamp(11px,.9vw,16px);
  border-radius:13px;
  background:linear-gradient(140deg, rgba(255,160,51,.3), rgba(255,110,40,.12) 52%, rgba(10,8,6,.6));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),
             inset 0 0 0 1px rgba(255,180,90,.28)}
.pr-cartel-kick{
  display:inline-block;padding:3px 9px;border-radius:99px;margin-bottom:7px;
  font-family:var(--dato);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#1A1005;background:linear-gradient(180deg,#FFD08A,#FFA033)}
.pr-cartel-alto b{
  display:block;font-family:var(--display,inherit);font-weight:800;
  font-size:clamp(1rem,1.25vw,1.5rem);line-height:1.12;color:#fff;letter-spacing:-.01em}
.pr-cartel-alto b em{font-style:italic;color:#FFB454}
.pr-cartel-alto p{
  margin:7px 0 0;font-size:clamp(9.5px,.6vw,11.5px);line-height:1.5;color:#D2C4B2}

.pr-cartel-et{
  font-family:var(--dato);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#7C8799;padding:4px 2px 0}

.pr-mesa{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:center;
  text-decoration:none;padding:9px 10px;border-radius:11px;
  background:linear-gradient(140deg,
    color-mix(in srgb, var(--m) 20%, #0C111A), #07090F 72%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
             inset 0 0 0 1px color-mix(in srgb, var(--m) 26%, transparent);
  transition:transform .16s ease, box-shadow .18s ease, background .18s ease}
.pr-mesa:hover{
  transform:translateX(3px);
  background:linear-gradient(140deg, color-mix(in srgb, var(--m) 32%, #0E141F), #090C13 72%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),
             inset 0 0 0 1px color-mix(in srgb, var(--m) 55%, transparent),
             0 0 34px -16px var(--m)}
.pr-mesa-ico{
  width:clamp(28px,2.2vw,38px);aspect-ratio:1;border-radius:9px;
  display:grid;place-items:center;
  background:linear-gradient(160deg, color-mix(in srgb, var(--m) 86%, #fff), var(--m));
  box-shadow:0 5px 14px -8px var(--m)}
.pr-mesa-ico svg{width:54%;height:54%;fill:none;stroke:#07090F;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.pr-mesa-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.pr-mesa-txt b{font-size:clamp(11px,.72vw,13.5px);font-weight:700;color:#F0F5FB}
.pr-mesa-txt i{font-style:normal;font-size:clamp(9px,.56vw,10.5px);line-height:1.35;color:#9AA5B6}

.pr-cartel-pie{
  margin:auto 0 0;padding-top:6px;
  font-size:clamp(8.5px,.54vw,10px);line-height:1.5;color:#7C8799}
.pr-cartel-pie b{color:#C8D4E4}

@media (max-width:1280px){
  .pr-escena{grid-template-columns:minmax(0,1fr) auto}
  .pr-cartel{display:none}
}

/* ==========================================================
   EL GIRO DE LAS TARJETAS
   ----------------------------------------------------------
   Antes giraban, pero tan poco que no se notaba. Ahora la
   que está de frente mira de lleno y las de los lados están
   claramente de canto, así que al pasar de una a otra se ve
   girar la pieza entera. La curva de la transición frena al
   final, que es lo que hace que se asiente en vez de parar
   en seco.
   ========================================================== */
.pr-plan{transition:transform .72s cubic-bezier(.19,.92,.22,1),
                    opacity .48s ease, box-shadow .48s ease,
                    border-color .48s ease, filter .48s ease}
.pr-plan[data-pos="-1"]{transform:translate3d(-74%,0,-210px) rotateY(38deg) scale(.82);z-index:30}
.pr-plan[data-pos="1"] {transform:translate3d( 74%,0,-210px) rotateY(-38deg) scale(.82);z-index:30}
.pr-plan[data-pos="-2"]{transform:translate3d(-122%,0,-430px) rotateY(48deg) scale(.66);z-index:20}
.pr-plan[data-pos="2"] {transform:translate3d( 122%,0,-430px) rotateY(-48deg) scale(.66);z-index:20}
.pr-plan[data-pos="-3"]{transform:translate3d(-156%,0,-600px) rotateY(54deg) scale(.56);z-index:10}
.pr-plan[data-pos="3"] {transform:translate3d( 156%,0,-600px) rotateY(-54deg) scale(.56);z-index:10}

/* ==========================================================
   LOS TONOS DEL TEXTO
   ----------------------------------------------------------
   El blanco puro sobre negro pica a la vista: el contraste es
   tan alto que las letras vibran y leer cansa. La escala son
   tres pasos, no uno:

     --tx-1  lo que manda —titulares, cifras, lo destacado—
     --tx-2  el cuerpo, que es lo que más se lee
     --tx-3  lo secundario y lo que no entra en el plan

   Ninguno es #FFF. El primero ya se lee como blanco sobre
   negro sin la fatiga que da el blanco de verdad.
   ========================================================== */
.vista, .pr-fondo ~ *{
  --tx-1:#E7ECF3;
  --tx-2:#AEB8C7;
  --tx-3:#7E8896}

.pr-hero h2{color:#E7ECF3}
.pr-hero p{color:#AEB8C7}

.pr-plan h3{color:#E7ECF3}
.pr-plan .pr-precio,
.pr-plan .pr-eur{color:#E7ECF3}
.pr-plan .pr-dice{color:#AEB8C7}
.pr-plan .pr-chip{color:#C6CFDC}
.pr-plan .pr-chip b{color:#E7ECF3}

.pr-lista li{color:#BFC8D6}
.pr-lista li b,
.pr-lista li.abre{color:#E7ECF3}
.pr-lista li.apagada{color:#79828F}

.pr-via b{color:#E7ECF3}
.pr-via > span > span:last-child{color:#AEB8C7}

.pr-torre .pr-plan-fila{color:#C6CFDC}
.pr-torre .pr-plan-fila[data-on="1"]{color:#E7ECF3}
.pr-nota{color:#7E8896}

.pr-cartel-alto b{color:#F2F5F9}
.pr-cartel-alto p{color:#CBBFB0}
.pr-mesa-txt b{color:#E7ECF3}
.pr-mesa-txt i{color:#9AA5B6}
.pr-cartel-pie{color:#7E8896}
.pr-cartel-pie b{color:#BFC8D6}

/* ==========================================================
   LAS CUATRO DE ABAJO DEL CARTEL
   ----------------------------------------------------------
   Lo que se hace con lo que sale del estudio: registrarlo,
   emitirlo, ponerle imagen y cobrarlo. Cada una con su color
   y con los nombres de verdad, que es lo que convence.
   ========================================================== */
.pr-uso{
  display:flex;flex-direction:column;gap:6px;
  padding:10px 11px;border-radius:12px;
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--m) 15%, #0A0E16), #06080D 74%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
             inset 0 0 0 1px color-mix(in srgb, var(--m) 22%, transparent)}
.pr-uso-cab{display:flex;align-items:center;gap:8px;min-width:0}
.pr-uso-cab i{
  flex:0 0 auto;width:22px;height:22px;border-radius:7px;
  display:grid;place-items:center;
  background:linear-gradient(160deg, color-mix(in srgb, var(--m) 88%, #fff), var(--m))}
.pr-uso-cab i svg{width:13px;height:13px;fill:none;stroke:#06080D;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.pr-uso-cab b{font-size:clamp(11px,.72vw,13px);font-weight:700;color:#E7ECF3}
.pr-uso p{margin:0;font-size:clamp(9px,.56vw,10.5px);line-height:1.5;color:#9AA5B6}
.pr-sellos{display:flex;flex-wrap:wrap;gap:4px}
.pr-sellos i{
  font-style:normal;padding:2px 6px;border-radius:99px;
  font-family:var(--dato);font-size:7px;letter-spacing:.06em;
  color:color-mix(in srgb, var(--m) 72%, #fff);
  background:color-mix(in srgb, var(--m) 12%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--m) 26%, transparent)}

/* ==========================================================
   LA TORRE DE LA DERECHA, MÁS GRANDE
   ----------------------------------------------------------
   Es donde se elige cómo se paga y a qué plan se salta: lo
   que de verdad cierra la compra. Estaba más estrecha que el
   cartel de la izquierda, que solo informa, y eso invertía la
   importancia de las dos columnas.
   ========================================================== */
.pr-torre{width:clamp(230px,19vw,340px);gap:clamp(11px,1.5vh,22px)}
.pr-pago{padding:clamp(15px,2vh,24px) clamp(14px,1.2vw,22px);border-radius:18px}
.pr-torre .pr-plan-fila{padding:clamp(11px,1.5vh,17px) clamp(12px,1vw,18px);
  font-size:clamp(.85rem,.95vw,1.08rem)}

/* el cartel es un raíl: se sigue leyendo hacia abajo, y el
   borde se desvanece para que se note que hay más */
.pr-cartel{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent)}

/* las piezas del cartel no se encogen: la primera se quedaba sin alto */
.pr-cartel > *{flex:0 0 auto}
/* el lienzo del banner, más presente ahora que dibuja algo */
.pr-hero > canvas{opacity:.85}

/* ==========================================================
   LAS TARJETAS, A LA MEDIDA DE LO QUE LLEVAN
   ----------------------------------------------------------
   Estaban clavadas de arriba abajo del teatro, así que la que
   tenía menos texto dejaba un vacío debajo de su botón. Ahora
   cada una mide lo que necesita y se cuelga del centro, de
   modo que crecen y encogen hacia los dos lados por igual.

   Y son más anchas: con 26 vw el texto salía en columnas de
   cuatro palabras y la pieza parecía estirada.
   ========================================================== */
.pr-teatro{--ancho:clamp(330px,31vw,510px)}
.pr-plan{
  top:50%;bottom:auto;height:auto;
  max-height:100%;overflow:hidden;
  padding:clamp(18px,2.2vh,28px) clamp(20px,1.5vw,30px) clamp(16px,1.9vh,24px)}

/* cada posición se cuelga del centro: el −50 % va en todas */
.pr-plan[data-pos="0"]{transform:translate3d(0,-50%,0) scale(1)}
.pr-plan[data-pos="-1"]{transform:translate3d(-72%,-50%,-210px) rotateY(38deg) scale(.82)}
.pr-plan[data-pos="1"] {transform:translate3d( 72%,-50%,-210px) rotateY(-38deg) scale(.82)}
.pr-plan[data-pos="-2"]{transform:translate3d(-118%,-50%,-430px) rotateY(48deg) scale(.66)}
.pr-plan[data-pos="2"] {transform:translate3d( 118%,-50%,-430px) rotateY(-48deg) scale(.66)}
.pr-plan[data-pos="-3"]{transform:translate3d(-150%,-50%,-600px) rotateY(54deg) scale(.56)}
.pr-plan[data-pos="3"] {transform:translate3d( 150%,-50%,-600px) rotateY(-54deg) scale(.56)}

/* la lista deja de estirarse para rellenar: ocupa lo suyo */
.pr-plan .pr-lista{flex:0 1 auto;min-height:0}
.pr-plan > :last-child{margin-top:clamp(12px,1.6vh,20px)}