/* helix-plan-holo.css · /precios: el Pro como la Holo Card del panel (copiado de static/dashboard/css/helix-rb-plan.css,
   sin la línea de socio). Va con js/helix-plan-holo.js; sin JS las tarjetas quedan como las pinta helix-web.css. */

/* Las tres tarjetas: el muelle lleva el transform (inline), así que fuera la transición y el «sube 1 px» del hover v5. */
.hx-plan.rb-plan {
  transform-origin: 50% 50%;
  transition: box-shadow .2s cubic-bezier(.16, 1, .3, 1);
}
.hx-plan.rb-plan:hover { transform: none; }

/* ── La holográfica: lámina detrás del texto, contenido encima y reflejo por delante ── */
.hx-plan.rb-plan-holo {
  isolation: isolate;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--v5-acc) 14%, transparent), transparent 60%),
    linear-gradient(160deg, #241b20, #19151a 70%);
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--v5-acc) 62%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .09),
    var(--rb-sx, 0px) calc(var(--rb-sy, 0px) + 20px) 44px -18px rgba(0, 0, 0, .85),
    calc(var(--rb-sx, 0px) * .6) calc(var(--rb-sy, 0px) * .6 + 34px) 64px -30px color-mix(in srgb, var(--v5-acc) 58%, transparent);
}
[data-theme="light"] .hx-plan.rb-plan-holo {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--v5-acc) 9%, transparent), transparent 60%),
    linear-gradient(160deg, #FFFFFF, #F7F2F0 70%);
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--v5-acc) 55%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    var(--rb-sx, 0px) calc(var(--rb-sy, 0px) + 16px) 36px -18px rgba(60, 30, 40, .28),
    calc(var(--rb-sx, 0px) * .6) calc(var(--rb-sy, 0px) * .6 + 30px) 60px -32px color-mix(in srgb, var(--v5-acc) 45%, transparent);
}
.hx-plan.rb-plan-holo > :not(.rb-capa) { position: relative; z-index: 1; }

.rb-holo-lienzo {
  position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%;
  border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .6s cubic-bezier(.16, 1, .3, 1);
}
.rb-holo-lienzo.is-listo { opacity: 1; }

/* Reflejo de la plastificación: pasa también por encima del texto, como en una tarjeta de verdad. */
.rb-holo-brillo {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: radial-gradient(farthest-corner circle at var(--rb-lx, 36%) var(--rb-ly, 26%),
    rgba(255, 246, 242, .17) 0%, rgba(255, 236, 228, .06) 22%, rgba(255, 255, 255, 0) 52%);
  opacity: var(--rb-act, 0);
}
[data-theme="light"] .rb-holo-brillo {
  background: radial-gradient(farthest-corner circle at var(--rb-lx, 36%) var(--rb-ly, 26%),
    rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .07) 22%, rgba(255, 255, 255, 0) 48%);
}

/* Sin WebGL2: una lámina de CSS (banda iridiscente que sigue a la luz). */
.rb-holo-css {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 22%, color-mix(in srgb, var(--v5-acc) 20%, transparent) 36%,
      rgba(255, 226, 191, .14) 46%, rgba(231, 169, 214, .13) 56%, transparent 70%);
  background-size: 260% 260%;
  background-position: var(--rb-lx, 36%) var(--rb-ly, 26%);
  opacity: calc(.55 + .45 * var(--rb-act, 0));
}

@media (prefers-reduced-motion: reduce) {
  .rb-holo-lienzo { transition: none; }
  .rb-holo-brillo { display: none; }
}