/* =========================================================
   OLEUM — efectos de interfaz (port CSS de React Bits)
   ScrollExpand · AccordionGallery · StarBorder · MagicBento
   ========================================================= */

/* ───────────────────────── ScrollExpand ───────────────────────── */
.osx { position: relative; width: 100%; background: #14100d; }
/* overflow-x:clip conserva el recorte horizontal SIN romper position:sticky */
.osx-allow-sticky { overflow: visible !important; overflow-x: clip !important; overflow-y: visible !important; }
.osx-track { position: relative; width: 100%; }
.osx-stage { position: sticky; top: 0; width: 100%; overflow: hidden; --osx-title-size: 4rem; }
.osx-frame { position: absolute; inset: 0; clip-path: inset(21% 29% 21% 29% round 24px); will-change: clip-path; }
.osx-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; will-change: transform; transform-origin: center;
  user-select: none; -webkit-user-drag: none;
}
.osx-scrim {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(to top, rgba(10, 8, 6, .82), rgba(10, 8, 6, .18) 45%, rgba(10, 8, 6, .5));
}
.osx-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 6%; opacity: 0; will-change: opacity, transform; color: #fff;
}
.osx-overlay-card {
  max-width: 760px; padding: 34px 38px; border-radius: 20px;
  background: rgba(20, 16, 13, .58);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.osx-kicker {
  display: inline-block; font: 600 12px/1 "Inter", sans-serif;
  letter-spacing: .16em; text-transform: uppercase; color: #FDBD18; margin-bottom: 14px;
}
.osx .osx-overlay h2 {
  font: 800 clamp(24px, 3.4vw, 42px)/1.12 "Barlow", "Roboto", sans-serif;
  color: #fff; margin: 0 0 14px; text-transform: none; letter-spacing: -.01em;
}
.osx .osx-overlay p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .85); margin: 0 auto 20px; max-width: 620px; }
.osx-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none !important; }
.osx-points li {
  margin: 0; list-style: none !important; font: 600 13px/1 "Inter", sans-serif; color: #fff;
  padding: 9px 13px; border-radius: 999px; background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
}
.osx-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.osx-title {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0 6%; text-align: center;
  font: 700 var(--osx-title-size)/1 "Barlow", "Roboto", sans-serif;
  letter-spacing: -.03em; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
  pointer-events: none; will-change: opacity, transform;
}
.osx-hint {
  position: absolute; left: 0; right: 0; bottom: 1.25rem; text-align: center;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6); pointer-events: none; will-change: opacity, transform;
}

/* ─────────────────────── AccordionGallery ─────────────────────── */
.oag {
  --oag-accent: #EA5E12; --oag-overlay: #14100d; --oag-text: #fff;
  --oag-gap: 10px; --oag-radius: 16px;
  display: flex; gap: var(--oag-gap); width: 100%; height: 460px;
  perspective: 1400px; perspective-origin: 50% 50%; margin: 26px 0 0;
}
.oag-panel {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
  border-radius: var(--oag-radius); cursor: pointer; display: block;
  text-decoration: none; outline: none; background: #14100d;
  transform: rotateY(var(--oag-rot, 0deg)); transform-origin: center center;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8);
  transition: flex-grow .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease;
  -webkit-tap-highlight-color: transparent;
}
.oag-panel:focus-visible { box-shadow: 0 0 0 2px var(--oag-accent), 0 10px 30px -18px rgba(0, 0, 0, .8); }
.oag-media {
  position: absolute; inset: 0; filter: grayscale(1);
  transform: translateX(var(--oag-shift, 0)); transition: filter .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}
.oag-panel.is-active .oag-media { filter: grayscale(0); }
.oag-media img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.oag-ov {
  position: absolute; inset: 0; pointer-events: none; transition: background-color .5s ease, opacity .5s ease;
  background: linear-gradient(180deg, transparent 40%, rgba(20, 16, 13, .88) 100%);
}
.oag-panel:not(.is-active) .oag-ov { background: linear-gradient(180deg, rgba(20, 16, 13, .45) 0%, rgba(20, 16, 13, .9) 100%); }
.oag-label { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; pointer-events: none; }
.oag-head { display: flex; align-items: center; gap: 12px; }
.oag-bar {
  flex: 0 0 auto; width: 3px; height: 26px; border-radius: 3px; background: var(--oag-accent);
  opacity: 0; transform: translateX(-14px); transition: opacity .6s ease, transform .6s ease;
  box-shadow: 0 0 12px rgba(234, 94, 18, .6);
}
.oag-text {
  color: var(--oag-text); font: 700 clamp(1rem, 1.3vw, 1.35rem)/1.15 "Barlow", "Roboto", sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
  opacity: .85; transform: translateX(-10px); transition: opacity .6s ease, transform .6s ease;
}
.oag-panel.is-active .oag-bar, .oag-panel.is-active .oag-text { opacity: 1; transform: none; }
.oag-body {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .6s cubic-bezier(.16, 1, .3, 1), opacity .45s ease, margin-top .5s ease;
  color: rgba(255, 255, 255, .88); font-size: 14px; line-height: 1.55; margin-top: 0;
}
.oag-panel.is-active .oag-body { max-height: 220px; opacity: 1; margin-top: 12px; }
.oag-body b { display: block; font: 600 10.5px/1 "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #FDBD18; margin-bottom: 6px; }
.oag-go { display: inline-block; margin-top: 12px; font: 600 13px/1 "Inter", sans-serif; color: #fff; border-bottom: 2px solid var(--oag-accent); padding-bottom: 3px; }
@media (max-width: 860px) {
  .oag { flex-direction: column; perspective: none; height: auto; }
  .oag-panel { min-height: 92px; transform: none !important; }
  .oag-panel.is-active { min-height: 300px; }
  .oag-panel.is-active .oag-body { max-height: 260px; }
}

/* ──────────────────────────  StarBorder  ────────────────────────── */
.sb-star { position: relative; overflow: hidden; isolation: isolate; }
.sb-star > .sb-inner { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: inherit; }
.sb-glow {
  position: absolute; width: 300%; height: 50%; border-radius: 50%;
  opacity: .55; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, var(--sb-color, #FDBD18), transparent 10%);
}
.sb-glow-bottom { bottom: -12px; right: -250%; animation: sb-bottom 6s linear infinite alternate; }
.sb-glow-top { top: -12px; left: -250%; animation: sb-top 6s linear infinite alternate; }
@keyframes sb-bottom { 0% { transform: translate(0, 0); opacity: .8; } 100% { transform: translate(-100%, 0); opacity: 0; } }
@keyframes sb-top { 0% { transform: translate(0, 0); opacity: .8; } 100% { transform: translate(100%, 0); opacity: 0; } }
.oleum-btn-wsp.sb-star, .osol-btn-wsp.sb-star, .ofx-btn-wsp.sb-star, .oleum-c-btn-wsp.sb-star { --sb-color: #eafff2; }
.oleum-btn-yellow.sb-star { --sb-color: #fff; }
.osec-cta.sb-star, .onos-btn-ghost.sb-star, .oleum-sp-btn-ghost.sb-star { --sb-color: #EA5E12; }
@media (prefers-reduced-motion: reduce) { .sb-glow { animation: none; opacity: .25; } }

/* ────────────── MagicBento · resplandor de borde en tarjetas ────────────── */
.mb-glow { --glow-x: 50%; --glow-y: 50%; --glow-intensity: 0; --glow-radius: 220px; }
.mb-glow:before {
  content: ''; position: absolute; inset: 0; padding: 2px; border-radius: inherit;
  background: radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y),
    rgba(234, 94, 18, calc(var(--glow-intensity) * .9)) 0%,
    rgba(253, 189, 24, calc(var(--glow-intensity) * .45)) 32%,
    transparent 62%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude; pointer-events: none; z-index: 3;
  transition: opacity .3s ease;
}
.mb-glow:hover { box-shadow: 0 8px 30px rgba(234, 94, 18, .22); }
.onos-stats li.mb-glow, .om-card.mb-glow, .osol-card.mb-glow, .osec-card.mb-glow { position: relative; }
@media (prefers-reduced-motion: reduce) { .mb-glow:before { display: none; } }