/* =========================================================
   Helix · Capa «más React Bits» de las páginas de función y de la home
   Va con js/helix-rb-mas.js. Solo tokens de helix-web.css (oscuro en :root, claro con [data-theme="light"]), un acento
   coral y la curva --v5-eo. Todo prefijado con rbm-. html.rbm-js (lo pone el <head>) = hay movimiento.
   ========================================================= */

/* ---------- Red de seguridad: lo que nace oculto se enseña solo si el JS no llega ---------- */
@keyframes rbm-reserva { to { opacity: 1; filter: none; transform: none; } }
html.rbm-js [data-rb="blur-text"][data-rb-ya]:not(.rbm-listo) { opacity: 0; animation: rbm-reserva .4s 2.6s forwards; }
html.rbm-js [data-rb-intro] > :not(.rbm-tc-cuerpo) {
  opacity: 0; transform: perspective(1100px) translate3d(0, 26px, 0) rotateX(14deg); animation: rbm-reserva .6s 2.6s forwards;
}

/* =========================================================
   HERO · Dot Grid de fondo, Blur Text en el titular, Gradient Text en el realce, Tilted Card en el clip
   ========================================================= */
.rbm-hero { position: relative; }
.rbm-hero > .wrap { position: relative; z-index: 1; }
.rbm-dg {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0;
  -webkit-mask-image: radial-gradient(ellipse 80% 84% at 62% 48%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 84% at 62% 48%, #000 30%, transparent 80%);
  animation: rbm-luce 1.4s var(--v5-eo) .15s forwards;
}
@keyframes rbm-luce { to { opacity: 1; } }

/* Entradas del resto del hero (solo CSS: si el JS falla, terminan igual) */
@keyframes rbm-entra { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
html.rbm-js .rbm-entra { animation: rbm-entra .9s var(--v5-eo) both; animation-delay: var(--rbm-d, 0s); }

/* ---------- Blur Text ---------- */
.rbm-vis { display: inline; }
.rbm-bt .rbm-bt-p { display: inline-block; }
.rbm-bt .rbm-pieza-linea { display: inline; }
.rbm-bt:not(.rbm-bt-on) .rbm-bt-p { opacity: 0; filter: blur(10px); }
.rbm-bt-on .rbm-bt-p { animation: rbm-blur .95s var(--v5-eo) both; animation-delay: calc(.04s + var(--rb-i, 0) * 85ms); }
.rbm-bt-on .rbm-pieza-linea { animation-name: rbm-blur-linea; }
.t-h2.rbm-bt-on .rbm-bt-p { animation-duration: .8s; animation-delay: calc(var(--rb-i, 0) * 60ms); }
@keyframes rbm-blur {
  0% { opacity: 0; filter: blur(10px); transform: translateY(-.32em); }
  45% { opacity: .5; filter: blur(5px); transform: translateY(.04em); }
  100% { opacity: 1; filter: none; transform: none; }
}
@keyframes rbm-blur-linea { 0% { opacity: 0; filter: blur(10px); } 45% { opacity: .5; filter: blur(5px); } 100% { opacity: 1; filter: none; } }

/* ---------- Gradient Text: una pasada de la banda clara y luego sigue al ratón ---------- */
.rbm-gt.grad-text {
  background-image: linear-gradient(100deg, #FF8A5C 0%, #FF5E57 18%, #F0453B 34%, #FFD0B8 48%, #FFB08A 56%, #FF7A5C 70%, #FF5E57 84%, #F0453B 100%);
  background-size: 260% 100%; background-position: 0% 50%;
  -webkit-box-decoration-break: slice; box-decoration-break: slice;
  transition: background-position 2.2s var(--v5-eo);
}
.rbm-gt.rbm-gt-on { background-position: var(--rbm-gx, 100%) 50%; }
[data-theme="light"] .rbm-gt.grad-text {
  background-image: linear-gradient(100deg, #E0603A 0%, #C8372B 18%, #A92A22 34%, #FF8A5C 48%, #F06A45 56%, #D9542E 70%, #C8372B 84%, #A92A22 100%);
}

/* ---------- Tilted Card ---------- */
.rbm-tilt { position: relative; }
.rbm-tilt > .rbm-tc-cuerpo { transform-origin: 50% 50%; }
.rbm-tilt--rel > .card { height: 100%; }
.rbm-tc-cuerpo > .rbm-tc-brillo, .rbm-tc-cuerpo > .rbm-tc-filo { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: calc(var(--rbm-gl, 0) * var(--rbm-gl-k, 1)); }
.rbm-tilt--rel > .rbm-tc-cuerpo { --rbm-gl-k: .55; }
.rbm-tc-cuerpo > .rbm-tc-brillo {
  z-index: 5; mix-blend-mode: screen;
  background: radial-gradient(farthest-corner circle at var(--rbm-gx, 50%) var(--rbm-gy, 50%),
    rgba(255, 232, 222, .30) 0%, rgba(255, 232, 222, .17) 16%, rgba(255, 232, 222, .06) 34%, rgba(255, 232, 222, 0) 58%);
}
.rbm-tc-cuerpo > .rbm-tc-filo {
  z-index: 6; padding: 1px;
  background: radial-gradient(farthest-side circle at var(--rbm-gx, 50%) var(--rbm-gy, 50%),
    rgba(255, 220, 206, .9) 0%, rgba(255, 220, 206, .45) 30%, rgba(255, 220, 206, .1) 60%, rgba(255, 220, 206, 0) 82%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
[data-theme="light"] .rbm-tc-cuerpo > .rbm-tc-brillo { mix-blend-mode: soft-light; }
[data-theme="light"] .rbm-tc-cuerpo > .rbm-tc-filo {
  background: radial-gradient(farthest-side circle at var(--rbm-gx, 50%) var(--rbm-gy, 50%),
    color-mix(in srgb, var(--v5-acc) 80%, transparent) 0%, color-mix(in srgb, var(--v5-acc) 30%, transparent) 34%, transparent 80%);
}

/* =========================================================
   APARECER · Animated Content («subir») y Fade Content («enfocar»)
   ========================================================= */
.rbm-ap:not(.rbm-ap-on) { opacity: 0; filter: blur(8px); transform: translateY(10px); }
.rbm-ap--subir:not(.rbm-ap-on) { filter: none; transform: translateY(34px) scale(.97); }
.rbm-ap.rbm-ap-on:not(.rbm-ap-fin) {
  transition: opacity .7s var(--v5-eo), filter .8s var(--v5-eo), transform 1s var(--v5-eo);
  transition-delay: var(--rbm-ap-d, 0s);
}

/* ---------- Split Text ---------- */
.rbm-st .rbm-st-w { display: inline-block; white-space: nowrap; }
.rbm-st .rbm-st-l { display: inline-block; }
.rbm-st:not(.rbm-st-on) .rbm-st-l { opacity: 0; transform: translateY(.45em); }
.rbm-st-on .rbm-st-l {
  transition: opacity .55s var(--v5-eo), transform .85s var(--v5-eo);
  transition-delay: calc(var(--rb-i, 0) * 24ms);
}

/* =========================================================
   QUÉ HACE · Glass Icons + Border Glow en las tarjetas, Count Up en la cifra
   ========================================================= */
/* Glass Icons (versión CSS de reactbits.dev): placa de color inclinada detrás y cristal esmerilado delante */
.rbm-gi { position: relative; display: block; width: 50px; height: 50px; margin: 2px 0 12px; perspective: 24em; }
.rbm-gi-placa, .rbm-gi-cristal { position: absolute; inset: 0; border-radius: 15px; transition: transform .6s var(--hx-muelle), opacity .4s var(--v5-eo); }
.rbm-gi-placa {
  background: linear-gradient(140deg, #FF9466, #FF5E57 55%, #E2402F);
  transform: rotate(15deg); transform-origin: 100% 100%;
  box-shadow: .45em -.45em .8em rgba(20, 8, 6, .28);
}
/* El esmerilado se hace con una copia desenfocada de la placa dentro del cristal (no con backdrop-filter, que en
   WebKit se pierde al recomponer la capa): mismo aspecto en Chrome y en Safari. */
.rbm-gi-cristal {
  display: grid; place-items: center; overflow: hidden; color: #FFFFFF; transform-origin: 80% 50%;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.rbm-gi-refleja {
  position: absolute; inset: 0; border-radius: 15px; background: linear-gradient(140deg, #FF9466, #FF5E57 55%, #E2402F);
  transform: rotate(15deg); transform-origin: 100% 100%; filter: blur(7px) saturate(1.3); opacity: .95;
  transition: transform .6s var(--hx-muelle);
}
.rbm-gi-cristal::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 55%); }
.rbm-gi-cristal .icon { position: relative; z-index: 1; width: 22px; height: 22px; stroke-width: 1.8; filter: drop-shadow(0 1px 1.5px rgba(60, 10, 5, .35)); }
[data-theme="light"] .rbm-gi-cristal { background: rgba(255, 255, 255, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 8px 16px -10px rgba(120, 40, 20, .45); }
[data-theme="light"] .rbm-gi-placa { box-shadow: .45em -.45em .8em rgba(140, 50, 30, .18); }
[data-theme="light"] .rbm-gi-cristal { color: #B92E27; }
[data-theme="light"] .rbm-gi-cristal .icon { filter: none; }
.hf-tarjeta:hover .rbm-gi-placa, .hf-tarjeta:focus-within .rbm-gi-placa { transform: rotate(25deg) translate3d(-.4em, -.4em, .4em); }
.hf-tarjeta:hover .rbm-gi-cristal, .hf-tarjeta:focus-within .rbm-gi-cristal { transform: translateZ(1.6em); }
.hf-tarjeta:hover .rbm-gi-refleja, .hf-tarjeta:focus-within .rbm-gi-refleja { transform: rotate(25deg) translate(-.4em, -.4em); }
/* La placa se abre al entrar la tarjeta */
.rbm-ap:not(.rbm-ap-on) .rbm-gi-placa { transform: rotate(-6deg) translate(4px, 4px); opacity: 0; }
.rbm-ap-on:not(.rbm-ap-fin) .rbm-gi-placa { transition-delay: calc(var(--rbm-ap-d, 0s) + .35s); }

/* Home: Glass Icons dentro del Magic Bento (sustituyen a .rb-mb-ic) */
.rbm-gi--mb { width: 40px; height: 40px; margin: 0; flex: 0 0 auto; }
.rbm-gi--mb .rbm-gi-placa, .rbm-gi--mb .rbm-gi-cristal, .rbm-gi--mb .rbm-gi-refleja { border-radius: 12px; }
.rbm-gi--mb .rbm-gi-cristal .icon { width: 19px; height: 19px; }
.rb-mb-tarjeta:hover .rbm-gi-placa, .rb-mb-tarjeta:focus-visible .rbm-gi-placa { transform: rotate(25deg) translate3d(-.35em, -.35em, .35em); }
.rb-mb-tarjeta:hover .rbm-gi-cristal, .rb-mb-tarjeta:focus-visible .rbm-gi-cristal { transform: translateZ(1.4em); }
.rb-mb-tarjeta:hover .rbm-gi-refleja, .rb-mb-tarjeta:focus-visible .rbm-gi-refleja { transform: rotate(25deg) translate(-.35em, -.35em); }
.rb-mb-intro:not(.rb-mb-dentro) .rbm-gi-placa { transform: rotate(-6deg) translate(4px, 4px); opacity: 0; }
.rb-mb-intro.rb-mb-dentro .rbm-gi-placa { transition-delay: calc(.3s + var(--rb-i, 0) * 55ms); }

/* Border Glow (de reactbits.dev, malla en la gama coral) */
.rbm-bg { position: relative; isolation: isolate; --rbm-prox: 0; --rbm-ang: 45deg; }
.rbm-bg > .rbm-bg-borde, .rbm-bg > .rbm-bg-relleno, .rbm-bg > .rbm-bg-luz {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .75s ease-in-out;
}
.rbm-bg > .rbm-bg-borde {
  z-index: -1; border: 1px solid transparent;
  background:
    linear-gradient(var(--v5-card) 0 100%) padding-box,
    radial-gradient(at 80% 55%, #FF5E57 0, transparent 50%) border-box,
    radial-gradient(at 69% 34%, #FFB08A 0, transparent 50%) border-box,
    radial-gradient(at 8% 6%, #FF8A5C 0, transparent 50%) border-box,
    radial-gradient(at 41% 38%, #FF5E57 0, transparent 50%) border-box,
    radial-gradient(at 86% 85%, #FFB08A 0, transparent 50%) border-box,
    radial-gradient(at 82% 18%, #FF8A5C 0, transparent 50%) border-box,
    radial-gradient(at 51% 4%, #FFC2A6 0, transparent 50%) border-box,
    linear-gradient(#FF6A5F 0 100%) border-box;
  -webkit-mask-image: conic-gradient(from var(--rbm-ang) at center, #000 25%, transparent 40%, transparent 60%, #000 75%);
  mask-image: conic-gradient(from var(--rbm-ang) at center, #000 25%, transparent 40%, transparent 60%, #000 75%);
}
.rbm-bg > .rbm-bg-relleno {
  z-index: -1; mix-blend-mode: soft-light;
  background: radial-gradient(70% 70% at var(--rbm-ex, 50%) var(--rbm-ey, 0%), #FF8A5C, transparent 70%);
}
.rbm-bg > .rbm-bg-luz {
  inset: -40px; z-index: 1; mix-blend-mode: plus-lighter;
  -webkit-mask-image: conic-gradient(from var(--rbm-ang) at center, #000 2.5%, transparent 10%, transparent 90%, #000 97.5%);
  mask-image: conic-gradient(from var(--rbm-ang) at center, #000 2.5%, transparent 10%, transparent 90%, #000 97.5%);
}
.rbm-bg > .rbm-bg-luz::before {
  content: ''; position: absolute; inset: 40px; border-radius: 22px;
  box-shadow:
    inset 0 0 0 1px hsl(10 100% 76% / 90%), inset 0 0 3px 0 hsl(10 100% 76% / 45%), inset 0 0 15px 0 hsl(10 100% 76% / 25%),
    inset 0 0 50px 2px hsl(10 100% 76% / 9%), 0 0 1px 0 hsl(10 100% 76% / 55%), 0 0 6px 0 hsl(10 100% 76% / 36%),
    0 0 15px 0 hsl(10 100% 76% / 26%), 0 0 30px 2px hsl(10 100% 76% / 16%), 0 0 54px 2px hsl(10 100% 76% / 8%);
}
.rbm-bg-vivo > .rbm-bg-borde, .rbm-bg-vivo > .rbm-bg-relleno, .rbm-bg-vivo > .rbm-bg-luz { transition: opacity .25s ease-out; }
.rbm-bg-vivo > .rbm-bg-borde { opacity: calc((var(--rbm-prox) - 50) / 50); }
.rbm-bg-vivo > .rbm-bg-relleno { opacity: calc(.55 * (var(--rbm-prox) - 50) / 50); }
.rbm-bg-vivo > .rbm-bg-luz { opacity: calc((var(--rbm-prox) - 30) / 70); }
[data-theme="light"] .rbm-bg > .rbm-bg-borde {
  background:
    linear-gradient(var(--v5-card) 0 100%) padding-box,
    radial-gradient(at 80% 55%, #F2493F 0, transparent 50%) border-box,
    radial-gradient(at 8% 6%, #FF8A5C 0, transparent 50%) border-box,
    radial-gradient(at 51% 4%, #E0603A 0, transparent 50%) border-box,
    linear-gradient(#F2493F 0 100%) border-box;
}
[data-theme="light"] .rbm-bg > .rbm-bg-relleno { mix-blend-mode: normal; background: radial-gradient(70% 70% at var(--rbm-ex, 50%) var(--rbm-ey, 0%), color-mix(in srgb, var(--v5-acc) 9%, transparent), transparent 70%); }
[data-theme="light"] .rbm-bg > .rbm-bg-luz { mix-blend-mode: normal; }
[data-theme="light"] .rbm-bg > .rbm-bg-luz::before {
  box-shadow: inset 0 0 0 1px hsl(4 88% 60% / 70%), inset 0 0 12px 0 hsl(4 88% 60% / 12%), 0 0 10px 0 hsl(4 88% 60% / 22%), 0 0 30px 2px hsl(4 88% 60% / 10%);
}
.rbm-bg > :not(.rbm-bg-borde):not(.rbm-bg-relleno):not(.rbm-bg-luz) { position: relative; z-index: 2; }

/* Count Up */
.rbm-cu { display: inline-block; text-align: left; font-variant-numeric: tabular-nums; }

/* =========================================================
   PASO A PASO · Stepper con anillo que se dibuja, número que rueda (Counter) y tramo que se traza
   ========================================================= */
.rbm-sp { position: relative; }
.rbm-sp .rbm-sp-n { position: relative; overflow: visible; transition: background .45s var(--v5-eo), color .45s var(--v5-eo), box-shadow .45s var(--v5-eo); }
.rbm-odo { display: inline-block; height: 1.25em; line-height: 1.25em; overflow: hidden; }
.rbm-odo-col { display: flex; flex-direction: column; transform: translateY(calc(var(--n, 0) * -1.25em)); }
.rbm-odo-col i { display: block; height: 1.25em; font-style: normal; text-align: center; }
.rbm-anillo { position: absolute; left: -4px; top: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); overflow: visible; pointer-events: none; }
.rbm-anillo circle { fill: none; stroke: var(--v5-acc); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .9; }
.rbm-tramo { position: absolute; z-index: 2; border-radius: 2px; overflow: hidden; pointer-events: none; background: var(--v5-track); }
.rbm-tramo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--v5-acc), var(--v5-acc-2)); transform-origin: 0 50%; }
.rbm-tramo--v::after { background: linear-gradient(180deg, var(--v5-acc), var(--v5-acc-2)); transform-origin: 50% 0; }
.rbm-sp-on .rbm-sp-n, .rbm-sp-fin .rbm-sp-n { background: var(--hx-btn); color: #FFFFFF; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--v5-acc) 85%, transparent); }

/* Antes de entrar en pantalla (solo con JS y movimiento) */
.rbm-sp-espera:not(.rbm-sp-on) .rbm-sp-paso { opacity: 0; transform: translateY(26px); }
.rbm-sp-espera:not(.rbm-sp-on) .rbm-odo-col { transform: translateY(1.25em); }
.rbm-sp-espera:not(.rbm-sp-on) .rbm-anillo circle { stroke-dashoffset: 1; }
.rbm-sp-espera:not(.rbm-sp-on) .rbm-tramo--h::after { transform: scaleX(0); }
.rbm-sp-espera:not(.rbm-sp-on) .rbm-tramo--v::after { transform: scaleY(0); }
/* Al entrar: cada paso sube, su anillo se dibuja, el número rueda, el círculo se llena y el tramo avanza */
.rbm-sp-on:not(.rbm-sp-fin) .rbm-sp-paso { transition: opacity .6s var(--v5-eo), transform .95s var(--v5-eo); transition-delay: calc(var(--rb-i, 0) * 90ms); }
.rbm-sp-on:not(.rbm-sp-fin) .rbm-anillo circle { transition: stroke-dashoffset .65s var(--v5-eo); transition-delay: calc(.3s + var(--rb-i, 0) * .4s); }
.rbm-sp-on:not(.rbm-sp-fin) .rbm-odo-col { transition: transform .95s var(--v5-eo); transition-delay: calc(.32s + var(--rb-i, 0) * .4s); }
.rbm-sp-on:not(.rbm-sp-fin) .rbm-sp-n {
  transition-delay: calc(.8s + var(--rb-i, 0) * .4s);
  animation: rbm-pop .6s var(--hx-muelle) both; animation-delay: calc(.8s + var(--rb-i, 0) * .4s);
}
.rbm-sp-on:not(.rbm-sp-fin) .rbm-tramo::after { transition: transform .5s var(--v5-eo); transition-delay: calc(.86s + var(--rb-i, 0) * .4s); }
.rbm-sp-espera:not(.rbm-sp-on) .rbm-sp-n { background: var(--hx-acc-bg); color: var(--hx-acc-text); }
/* Móvil: línea de tiempo vertical (número a la izquierda) para que el tramo baje por su carril y no cruce el texto */
@media (max-width: 600px) {
  .rbm-sp .rbm-sp-paso { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: start; }
  .rbm-sp .rbm-sp-paso > .hf-paso-n { grid-row: 1 / span 2; margin-bottom: 0; }
  .rbm-sp .rbm-sp-paso > :not(.hf-paso-n) { grid-column: 2; }
  .rbm-sp .rbm-sp-paso > h3 { margin-top: 6px; }
}
@keyframes rbm-pop { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }

/* =========================================================
   TODO LO QUE INCLUYE · lista que entra escalonada con checks que se dibujan
   ========================================================= */
.rbm-checks .rbm-ck {
  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 999px;
  background: var(--hx-acc-bg); color: var(--hx-acc-text);
}
.hf-incluye-lista.rbm-checks .rbm-ck .icon, .hf-contraste .rbm-checks .rbm-ck .icon { width: 13px; height: 13px; margin: 0; stroke-width: 2.6; color: inherit; }
.hf-contraste .rbm-checks .rbm-ck { margin-top: 1px; }
/* Sin Helix: las X se dibujan en gris, sin acento */
.rbm-checks .rbm-ck--x { background: var(--v5-card2); color: var(--hx-t3-aa); }
[data-theme="light"] .rbm-checks .rbm-ck--x { background: rgba(40, 20, 15, .06); }
.rbm-checks .rbm-ck path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.rbm-ck-espera:not(.rbm-ck-on) li { opacity: 0; transform: translateY(10px); filter: blur(6px); }
.rbm-ck-espera:not(.rbm-ck-on) .rbm-ck { transform: scale(.4); }
.rbm-ck-espera:not(.rbm-ck-on) .rbm-ck path { stroke-dashoffset: 1; }
.rbm-ck-on li { transition: opacity .5s var(--v5-eo), transform .75s var(--v5-eo), filter .6s var(--v5-eo); transition-delay: calc(var(--rb-i, 0) * 55ms); }
.rbm-ck-on .rbm-ck { transition: transform .6s var(--hx-muelle); transition-delay: calc(.12s + var(--rb-i, 0) * 55ms); }
.rbm-ck-on .rbm-ck path { transition: stroke-dashoffset .5s var(--v5-eo); transition-delay: calc(.28s + var(--rb-i, 0) * 55ms); }

/* =========================================================
   ENCAJA · Star Border (una vuelta) sobre la Tilted Card
   ========================================================= */
.rbm-sb { position: relative; isolation: isolate; }
.rbm-sb > .rbm-sb-lienzo {
  position: absolute; top: -36px; left: -36px; width: calc(100% + 72px); height: calc(100% + 72px);
  z-index: -1; pointer-events: none;
}
.hw-btn--primary.rbm-sb { --rbm-sb-cabeza: #FFF4EE; --rbm-sb-cola: #FFB896; }
.hf-rel.rbm-sb, .hf-con.rbm-sb { --rbm-sb-cabeza: #FFD9CC; --rbm-sb-cola: #FF5E57; }
[data-theme="light"] .hf-rel.rbm-sb, [data-theme="light"] .hf-con.rbm-sb { --rbm-sb-cabeza: #FF7A5C; --rbm-sb-cola: #F2493F; }
[data-theme="light"] .hw-btn--primary.rbm-sb { --rbm-sb-cabeza: #FFFFFF; --rbm-sb-cola: #FF9A78; }
/* La estela sale 36 px del filo: en móvil se recorta en el borde de la sección (sin scroll lateral) */
.rbm-recorte, .rbm-cierre-sec, .hf-contraste-sec, .hf-que-hace { overflow-x: clip; }
.hf-rel.rbm-sb > :not(.rbm-sb-lienzo):not(.rbm-tc-brillo):not(.rbm-tc-filo):not(.hf-rel-ir) { position: relative; }

/* =========================================================
   PREGUNTAS · apertura con muelle
   ========================================================= */
.rbm-faq .rbm-faq-cuerpo { overflow: hidden; }
.rbm-faq summary .icon { transition: transform .6s var(--hx-muelle); }
.rbm-faq.rbm-abierta summary .icon { transform: rotate(180deg); }
.hx-faq.rbm-faq:not(.rbm-abierta) summary .icon { transform: none; }

/* =========================================================
   CIERRE · Seda (Silk, WebGL) detrás de la tarjeta destacada
   ========================================================= */
.rbm-cierre-sec { position: relative; }
.rbm-cierre-sec > .wrap { position: relative; z-index: 1; }
.rbm-seda {
  position: absolute; left: 0; right: 0; top: 4%; bottom: 4%; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 56%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 56%, transparent 100%);
}
.rbm-seda-lienzo { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s var(--v5-eo); }
.rbm-seda-lista .rbm-seda-lienzo { opacity: 1; }
.rbm-cierre-sec .hx-destacada { --hx-tarjeta-cristal: rgba(24, 21, 26, .62); }
[data-theme="light"] .rbm-cierre-sec .hx-destacada { --hx-tarjeta-cristal: rgba(255, 255, 255, .66); }
@media (max-width: 600px) {
  .rbm-seda { top: -2%; bottom: -2%; }
}

/* =========================================================
   Reducir movimiento: todo quieto y visible (el JS no arma nada; esto es por si cambia en caliente)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .rbm-dg { animation: none; opacity: 1; }
  .rbm-entra, .rbm-bt-p, .rbm-st-l, .rbm-ap, .rbm-checks li, .rbm-sp-paso { animation: none !important; transition: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
  .rbm-gi-placa, .rbm-gi-cristal, .rbm-gi-refleja, .rbm-faq summary .icon, .rbm-gt.grad-text { transition: none !important; }
  .rbm-tc-brillo, .rbm-tc-filo, .rbm-bg-borde, .rbm-bg-relleno, .rbm-bg-luz, .rbm-sb-lienzo { display: none; }
}