/* =========================================================
   Helix · Web pública · Capa React Bits, estilos de los componentes opcionales
   Va con js/helix-rb-extra.js. Tokens de helix-web.css; oscuro en :root y claro con [data-theme="light"].
   ========================================================= */

/* =========================================================
   8 · SCROLL REVEAL
   ========================================================= */
.rb-rv .rb-rv-p {
  --rb-rv-k: 0;
  opacity: calc(.14 + var(--rb-rv-k) * .86);
  filter: blur(calc((1 - var(--rb-rv-k)) * 5px));
}
.rb-rv span.rb-rv-p:not(.grad-text):not(.hx-firma-texto) { display: inline-block; }

/* =========================================================
   9 · SPLIT FLAP TEXT
   Cada cifra es una paleta con dos mitades y dos solapas; hereda el tamaño de letra de donde se ponga.
   ========================================================= */
:root { --rb-sf-fondo: #24232B; --rb-sf-raya: rgba(0, 0, 0, .45); }
[data-theme="light"] { --rb-sf-fondo: #FFFFFF; --rb-sf-raya: rgba(60, 30, 20, .09); }
.rb-sf-raiz { white-space: nowrap; }
.rb-sf { display: inline-flex; align-items: center; gap: .05em; vertical-align: baseline; letter-spacing: 0; }
.rb-sf-sep { display: inline-block; padding: 0 .03em; }
.rb-sf-t {
  position: relative; display: inline-block; width: .7em; height: 1.1em; border-radius: .13em; flex: 0 0 auto;
  background: var(--rb-sf-fondo); perspective: 3em; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 .5px var(--v5-edge), inset 0 1px 0 var(--v5-hl), 0 .18em .4em -.22em rgba(0, 0, 0, .55);
}
[data-theme="light"] .rb-sf-t { box-shadow: 0 0 0 .5px rgba(60, 30, 20, .1), 0 .18em .4em -.24em rgba(80, 30, 15, .3); }
.rb-sf-t::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: max(1px, .02em); margin-top: -.01em; background: var(--rb-sf-raya); z-index: 4; }
.rb-sf-h, .rb-sf-f { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: var(--rb-sf-fondo); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rb-sf-arr, .rb-sf-fa { top: 0; border-radius: .13em .13em 0 0; }
.rb-sf-aba, .rb-sf-fb { bottom: 0; border-radius: 0 0 .13em .13em; }
.rb-sf-h i, .rb-sf-f i {
  position: absolute; left: 0; right: 0; height: 200%; display: flex; align-items: center; justify-content: center;
  font-style: normal; line-height: 1;
}
.rb-sf-arr i, .rb-sf-fa i { top: 0; }
.rb-sf-aba i, .rb-sf-fb i { bottom: 0; }
.rb-sf-f { visibility: hidden; z-index: 3; }
.rb-sf-fa { transform-origin: 50% 100%; }
.rb-sf-fb { transform-origin: 50% 0; transform: rotateX(90deg); }
.rb-sf-t.is-voltea .rb-sf-f { visibility: visible; }
.rb-sf-t.is-voltea .rb-sf-fa { animation: rb-sf-cae 48ms ease-in both; }
.rb-sf-t.is-voltea .rb-sf-fb { animation: rb-sf-sube 48ms ease-out 46ms both; }
@keyframes rb-sf-cae { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes rb-sf-sube { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }

/* =========================================================
   10 · ANIMATED LIST
   ========================================================= */
.rb-al { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rb-al-item { display: grid; grid-template-rows: 1fr; padding-bottom: 8px; }
.rb-al-fila {
  min-height: 0; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px;
  background: var(--v5-card);
  box-shadow: 0 0 0 .5px var(--v5-edge), inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent), 0 14px 30px -18px rgba(0, 0, 0, .8);
}
[data-theme="light"] .rb-al-fila { box-shadow: 0 0 0 .5px rgba(60, 30, 20, .08), 0 12px 26px -16px rgba(80, 30, 15, .28); }
.rb-al-ic {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--hx-acc-bg); color: var(--hx-acc-text);
}
.rb-al-ic .icon { width: 19px; height: 19px; stroke-width: 1.8; }
.rb-al-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.rb-al-txt b { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.rb-al-txt small { font-size: 13px; color: var(--v5-t2); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-al-hora { align-self: flex-start; font-size: 12px; color: var(--hx-t3-aa); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Con JS: se ven N, el resto espera fuera; entran por arriba y salen por abajo */
.rb-al-viva .rb-al-item {
  transform-origin: 50% 0;
  transition: grid-template-rows .55s var(--v5-eo), padding-bottom .55s var(--v5-eo), opacity .4s var(--v5-eo), transform .6s var(--v5-eo);
}
.rb-al-viva .rb-al-fila { transition: padding .55s var(--v5-eo); }
.rb-al-viva .rb-al-fuera { display: none; }
.rb-al-viva .rb-al-entra { grid-template-rows: 0fr; padding-bottom: 0; opacity: 0; transform: scale(.94); transition: none; }
.rb-al-viva .rb-al-entra .rb-al-fila { padding-top: 0; padding-bottom: 0; transition: none; }
.rb-al-viva .rb-al-sale { grid-template-rows: 0fr; padding-bottom: 0; opacity: 0; transform: scale(.96); }
.rb-al-viva .rb-al-sale .rb-al-fila { padding-top: 0; padding-bottom: 0; }
.rb-al-espera .rb-al-item { opacity: 0; transform: translateY(10px) scale(.96); }
.rb-al-arranque .rb-al-item { transition-delay: calc(var(--rb-i, 0) * 90ms); }

/* =========================================================
   11 · GLARE HOVER
   ========================================================= */
.rb-gl { position: absolute; inset: 0; z-index: 2; border-radius: inherit; overflow: hidden; pointer-events: none; }
.rb-gl::before {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -50%; width: 42%; opacity: 0;
  transform: skewX(-18deg) translateX(0);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22) 50%, transparent);
}
[data-theme="light"] .rb-gl::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--v5-acc) 16%, transparent) 50%, transparent); }
.rb-gl-raiz:hover .rb-gl::before { animation: rb-gl-pasa 1.6s var(--v5-eo) both; }
@keyframes rb-gl-pasa { from { opacity: 1; transform: skewX(-18deg) translateX(0); } to { opacity: 1; transform: skewX(-18deg) translateX(430%); } }

/* =========================================================
   Reducir movimiento y modo estático
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .rb-rv .rb-rv-p { opacity: 1; filter: none; }
  .rb-sf-t.is-voltea .rb-sf-fa, .rb-sf-t.is-voltea .rb-sf-fb { animation: none; }
  .rb-sf-f { visibility: hidden !important; }
  .rb-al-viva .rb-al-item { transition: none; }
  .rb-gl { display: none; }
}
html.rb-estatico .rb-rv .rb-rv-p { opacity: 1; filter: none; }