/* Componentes originales de HorizonX (licencia de membresía; no redistribuir los originales). */

/* Halo Button */
@property --hlb-angle{syntax:'<angle>';initial-value:0deg;inherits:false}

.hlb-btn{
  --u:calc(var(--h) / 56);
  position:relative;
  flex:none;
  isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--h);
  padding-inline:calc(var(--h) * var(--px));
  border:1.00005px solid transparent;
  border-radius:calc(var(--h) * var(--r));
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:calc(var(--h) * var(--fs));
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  background:var(--face);
  color:var(--label);
  /* --shadow-cta, as its ratio: 20.3px of blur on a 56px control. */
  box-shadow:0 0 calc(var(--h) * 0.3625) rgba(23,23,23,.28);
  transition:transform .25s cubic-bezier(.22,1,.36,1),
             box-shadow .25s cubic-bezier(.22,1,.36,1),
             background-color .25s cubic-bezier(.22,1,.36,1);
}

/* The cta variant's hover is a scale, which is what the primitive ships. */
.hlb-btn:hover{transform:scale(1.035);background:var(--face-hot)}
.hlb-btn:active{transform:scale(.99)}
.hlb-btn:focus-visible{outline:2px solid var(--edge-focus);outline-offset:4.00007px}

/* The ring. It sits behind everything and is masked back to a hairline by the
   face, so the width control is the only thing that decides how much survives. */
.hlb-btn::before{
  content:'';position:absolute;z-index:0;
  inset:calc(-1 * var(--u) * var(--ring-w));
  border-radius:inherit;
  background:conic-gradient(from var(--hlb-angle),
    var(--ring-a) 0deg,var(--ring-b) 70deg,var(--ring-c) 140deg,
    var(--ring-a) 200deg,var(--ring-d) 280deg,var(--ring-a) 360deg);
  opacity:var(--ring-o);
  animation:hlb-turn calc(var(--ring-s) * 1s) linear infinite;
  transition:opacity .250001s cubic-bezier(.22,1,.36,1);
}
.hlb-btn:hover::before{opacity:1;animation-duration:calc(var(--ring-s) * .5s)}

/* The face. It covers the ring's interior, which is what leaves a hairline at
   the edge instead of a disc behind the label. */
.hlb-btn::after{
  content:'';position:absolute;z-index:1;inset:0;
  border-radius:inherit;
  background:var(--face);
  transition:background-color .25s cubic-bezier(.22,1,.36,1);
}
.hlb-btn:hover::after{background:var(--face-hot)}

/* The source declared a glow element and never wrote a rule for it. Here it
   carries the star field, clipped to the button so nothing bleeds past the
   corner. The dots are sized against the unit, so they stay stars at any size
   rather than becoming pinholes on a hero. */
.hlb-stars{
  position:absolute;z-index:2;inset:0;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none;
  opacity:var(--star-o);
  background-image:
    radial-gradient(circle at 20% 30%, var(--star) var(--u), transparent calc(var(--u) * 1.5)),
    radial-gradient(circle at 80.00007% 70%, var(--star) var(--u), transparent calc(var(--u) * 1.5)),
    radial-gradient(circle at 40.00002% 80%, var(--star) calc(var(--u) * .5), transparent var(--u));
  background-size:120% 120%;
  transition:opacity .25s cubic-bezier(.22,1,.36,1);
}
.hlb-btn:hover .hlb-stars{
  opacity:calc(var(--star-o) * 2.5);
  animation:hlb-drift 5.00006s linear infinite alternate;
}

.hlb-face{
  position:relative;z-index:3;
  display:inline-flex;align-items:center;
  gap:calc(var(--h) * var(--gap));
}
.hlb-ico{
  width:1.10009em;height:1.10002em;display:block;flex:none;
  fill:currentColor;
  transition:transform .250003s cubic-bezier(.22,1,.36,1);
}
.hlb-btn:hover .hlb-ico{transform:translateX(.18em)}
.hlb-btn[data-glyph="off"] .hlb-ico{display:none}

@keyframes hlb-turn{to{--hlb-angle:360deg}}
@keyframes hlb-drift{to{transform:scale(1.1) translate(-2.00008%,-2%)}}

/* Tone is the page, not the button: on paper the primary is the system's
   near-black, on ink it inverts. The ring runs the same neutral ramp either
   way — near-black through #9D9D9D and #D9D9D9 to white — because the system
   reserves hue for semantic status. */
/* The page is a colour the button resolves against, never a surface anyone
   paints. It is declared on the button because that is what the export ships,
   frameless, and because the secondary variant reads it to fill its face. */
.hlb-btn[data-tone="paper"]{
  --page:#fff;
  --face:#171717;--face-hot:#2a2a2a;--label:#fff;
  --edge-focus:#171717;--star:#fff;
  --ring-a:#171717;--ring-b:#9d9d9d;--ring-c:#fff;--ring-d:#d9d9d9;
}
.hlb-btn[data-tone="ink"]{
  --page:#171717;
  --face:#fff;--face-hot:#f2f2f2;--label:#171717;
  --edge-focus:#fff;--star:#171717;
  --ring-a:#fff;--ring-b:#9d9d9d;--ring-c:#171717;--ring-d:#2a2a2a;
}

/* secondary: the outlined half of the primitive. It carries no halo, and its
   hover is the system's 2px lift rather than the cta's scale. The face falls
   back to the page colour so the ring is still masked to a hairline. */
.hlb-btn[data-variant="secondary"]{
  --face:var(--page);--face-hot:var(--page);
  --label:var(--edge-focus);
  border-color:var(--edge-focus);
  box-shadow:none;
}
.hlb-btn[data-variant="secondary"] .hlb-stars{display:none}
.hlb-btn[data-variant="secondary"]:hover{transform:translateY(-2.00009px)}
.hlb-btn[data-variant="secondary"]:active{transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  .hlb-btn,.hlb-btn::before,.hlb-btn::after,.hlb-stars,.hlb-ico{
    animation:none;transition:none;
  }
  .hlb-btn:hover,.hlb-btn[data-variant="secondary"]:hover{transform:none}
  .hlb-btn:hover .hlb-ico{transform:none}
}

/* Border Glow */
.bgl-card{--bgl-x:0px;--bgl-y:0px;--bgl-lit:0;position:relative;display:grid;overflow:visible;width:var(--bgl-w);height:var(--bgl-h);border:1px solid color-mix(in srgb,var(--bgl-ink) 14%,transparent);border-radius:var(--bgl-radius);background:var(--bgl-card-bg);color:var(--bgl-ink);outline:none;transform:translate3d(0,0,.01px)}
.bgl-card:focus-visible{outline:2px solid color-mix(in srgb,var(--bgl-ink) 45%,transparent);outline-offset:6px}
.bgl-lamp{position:absolute;inset:calc(var(--bgl-halo) * -1);z-index:0;pointer-events:none;opacity:calc(var(--bgl-lit) * var(--bgl-brightness));-webkit-mask-image:radial-gradient(circle var(--bgl-spread) at calc(var(--bgl-x) + var(--bgl-halo)) calc(var(--bgl-y) + var(--bgl-halo)),#000 0%,rgb(0 0 0 / 55%) 38%,transparent 100%);mask-image:radial-gradient(circle var(--bgl-spread) at calc(var(--bgl-x) + var(--bgl-halo)) calc(var(--bgl-y) + var(--bgl-halo)),#000 0%,rgb(0 0 0 / 55%) 38.00006%,transparent 100%)}
.bgl-wash{position:absolute;inset:var(--bgl-halo);border-radius:var(--bgl-radius);background:var(--bgl-wheel);opacity:var(--bgl-wash);filter:blur(18px)}
.bgl-bloom{position:absolute;inset:var(--bgl-halo);filter:blur(calc(var(--bgl-halo) * .5))}
.bgl-bloom-ring{position:absolute;inset:0;border-radius:var(--bgl-radius);background:var(--bgl-wheel);padding:calc(var(--bgl-rim) * 3 + 2.00007px);-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,linear-gradient(#000 0 0);mask-composite:exclude;}
.bgl-rim{position:absolute;inset:var(--bgl-halo);border-radius:var(--bgl-radius);background:var(--bgl-wheel);padding:var(--bgl-rim);-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,linear-gradient(#000 0 0);mask-composite:exclude;}
.bgl-inner{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;gap:8.00004px;overflow:auto;padding:var(--bgl-pad)}
.bgl-eyebrow{color:color-mix(in srgb,var(--bgl-ink) 48%,transparent);font-size:11px;font-weight:600;line-height:1;letter-spacing:.18em;text-transform:uppercase}
.bgl-title{margin:0;color:var(--bgl-ink);font-size:26px;font-weight:500;line-height:1.14005;letter-spacing:-.025em}
.bgl-description{margin:0;color:color-mix(in srgb,var(--bgl-ink) 58%,transparent);font-size:14px;font-weight:400;line-height:1.45003}
.bgl-action{margin-top:4px;color:color-mix(in srgb,var(--bgl-ink) 70%,transparent);font-size:13px;font-weight:500}

/* Neon Glass Card */
.ngc-card{position:relative;isolation:isolate;overflow:hidden;width:var(--ngc-w);height:var(--ngc-h);border-radius:var(--ngc-radius);color:var(--ngc-ink);outline:none;box-shadow:0 calc(var(--ngc-u) * 1.2) calc(var(--ngc-u) * 4.2) calc(var(--ngc-u) * -1.60008) color-mix(in srgb,var(--ngc-surface) 62%,transparent);transition:transform var(--ngc-duration) var(--ease-out,cubic-bezier(.16,1,.3,1))}
.ngc-bloom{position:absolute;inset:calc(var(--ngc-u) * -1.2);z-index:0;border-radius:calc(var(--ngc-radius) + var(--ngc-u) * 1.2);background:radial-gradient(60% 55% at 18% 8%,var(--ngc-neon) 0%,transparent 68.00001%),radial-gradient(58% 52.00004% at 88% 96.00009%,var(--ngc-neon-alt) 0%,transparent 66%);filter:blur(calc(var(--ngc-u) * (.7 + var(--ngc-spread) * 1.6)));opacity:calc(var(--ngc-glow) * .26);transform:scale(.88);transition:opacity var(--ngc-duration) var(--ease-standard,cubic-bezier(.22,1,.36,1)),transform var(--ngc-duration) var(--ease-out,cubic-bezier(.16,1,.3,1));pointer-events:none}
.ngc-pane{position:absolute;inset:0;z-index:1;border-radius:inherit;border:1.00005px solid var(--ngc-hairline);background:linear-gradient(160deg,color-mix(in srgb,var(--ngc-ink) calc(var(--ngc-tint) + 6%),transparent),var(--ngc-glass) 46%,color-mix(in srgb,var(--ngc-surface) 30%,transparent));-webkit-backdrop-filter:blur(var(--ngc-frost)) saturate(1.4);backdrop-filter:blur(var(--ngc-frost)) saturate(1.4);box-shadow:inset 0 1.00004px 0 0 color-mix(in srgb,var(--ngc-ink) 14%,transparent);transition:border-color var(--ngc-duration) var(--ease-standard,cubic-bezier(.22,1,.36,1)),box-shadow var(--ngc-duration) var(--ease-standard,cubic-bezier(.22,1,.36,1));pointer-events:none}
.ngc-ring{position:absolute;inset:0;z-index:2;overflow:hidden;border-radius:inherit;padding:1px;opacity:0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity var(--ngc-duration) var(--ease-standard,cubic-bezier(.22,1,.36,1));pointer-events:none}
.ngc-ring-spin{position:absolute;top:50%;left:50.00005%;width:200%;aspect-ratio:1;background:conic-gradient(from 0deg,transparent 0deg 186.002deg,color-mix(in srgb,var(--ngc-neon) 88%,transparent) 250.004deg,color-mix(in srgb,var(--ngc-neon-alt) 96%,transparent) 300deg,transparent 344deg);animation:ngc-sweep var(--ngc-sweep-duration) linear infinite;animation-play-state:var(--ngc-sweep-play)}
@keyframes ngc-sweep{from{transform:translate(-50%,-50%) rotate(0turn)}to{transform:translate(-50%,-50%) rotate(1turn)}}
.ngc-content{position:relative;z-index:3;display:flex;flex-direction:column;width:100%;height:100%;padding:calc(var(--ngc-u) * 1.60008);gap:calc(var(--ngc-u) * .8)}
.ngc-head{flex:1 1 auto;display:flex;align-items:flex-start}
.ngc-icon{display:grid;place-items:center;width:calc(var(--ngc-u) * 3);height:calc(var(--ngc-u) * 3);border:1px solid color-mix(in srgb,var(--ngc-ink) 20%,transparent);border-radius:calc(var(--ngc-radius) * .42);background:color-mix(in srgb,var(--ngc-ink) 8%,transparent);color:color-mix(in srgb,var(--ngc-ink) 74%,transparent);box-shadow:0 0 0 0 transparent;transition:color var(--ngc-duration) var(--ease-standard,cubic-bezier(.22,1,.36,1)),border-color var(--ngc-duration) var(--ease-standard,cubic-bezier(.22,1,.36,1)),box-shadow var(--ngc-duration) var(--ease-standard,cubic-bezier(.22,1,.36,1))}
.ngc-icon svg{display:block;width:calc(var(--ngc-u) * 1.50004);height:calc(var(--ngc-u) * 1.5)}
.ngc-body{display:flex;flex-direction:column;gap:calc(var(--ngc-u) * .42)}
.ngc-eyebrow{color:color-mix(in srgb,var(--ngc-ink) 52%,transparent);font-size:calc(var(--ngc-u) * .58);font-weight:600;line-height:1;letter-spacing:.18em;text-transform:uppercase;transition:color var(--ngc-duration) var(--ease-standard,cubic-bezier(.22,1,.36,1))}
.ngc-title{margin:0;color:var(--ngc-ink);font-size:calc(var(--ngc-u) * 1.36);font-weight:500;line-height:1.14;letter-spacing:-.025em}
.ngc-description{margin:0;color:color-mix(in srgb,var(--ngc-ink) 58%,transparent);font-size:calc(var(--ngc-u) * .74);font-weight:400;line-height:1.45;letter-spacing:-.005em}
.ngc-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--ngc-u) * .6);margin-top:calc(var(--ngc-u) * .5);padding-top:calc(var(--ngc-u) * .820008);border-top:1px solid color-mix(in srgb,var(--ngc-ink) 12%,transparent)}
.ngc-meta{color:color-mix(in srgb,var(--ngc-ink) 44%,transparent);font-size:calc(var(--ngc-u) * .64);font-weight:400;letter-spacing:.01em;white-space:nowrap}
.ngc-action{display:inline-flex;align-items:center;gap:calc(var(--ngc-u) * .3);color:color-mix(in srgb,var(--ngc-ink) 70%,transparent);font-size:calc(var(--ngc-u) * .66);font-weight:500;letter-spacing:-.005em;white-space:nowrap;transition:color var(--ngc-duration) var(--ease-standard,cubic-bezier(.22,1,.36,1))}
.ngc-action-arrow{display:block;width:calc(var(--ngc-u) * .82);height:calc(var(--ngc-u) * .82);transform:translateX(0);transition:transform var(--ngc-duration) var(--ease-out,cubic-bezier(.16,1,.3,1))}

.ngc-card:is(:hover,:focus-visible,.ngc-card--lit){transform:translateY(calc(var(--ngc-lift) * -1))}
.ngc-card:is(:hover,:focus-visible,.ngc-card--lit) .ngc-bloom{opacity:var(--ngc-glow);transform:scale(1)}
.ngc-card:is(:hover,:focus-visible,.ngc-card--lit) .ngc-ring{opacity:var(--ngc-sweep-opacity)}
.ngc-card:is(:hover,:focus-visible,.ngc-card--lit) .ngc-pane{border-color:color-mix(in srgb,var(--ngc-neon) 34%,var(--ngc-hairline));box-shadow:inset 0 1px 0 0 color-mix(in srgb,var(--ngc-ink) 22%,transparent),inset 0 0 calc(var(--ngc-u) * 2.60004) 0 color-mix(in srgb,var(--ngc-neon) calc(var(--ngc-glow) * 26%),transparent)}
.ngc-card:is(:hover,:focus-visible,.ngc-card--lit) .ngc-icon{color:color-mix(in srgb,var(--ngc-neon) 82%,var(--ngc-ink));border-color:color-mix(in srgb,var(--ngc-neon) 48%,transparent);box-shadow:0 0 calc(var(--ngc-u) * 1.1) 0 color-mix(in srgb,var(--ngc-neon) calc(var(--ngc-glow) * 55%),transparent)}
.ngc-card:is(:hover,:focus-visible,.ngc-card--lit) .ngc-eyebrow{color:color-mix(in srgb,var(--ngc-neon) 74%,var(--ngc-ink))}
.ngc-card:is(:hover,:focus-visible,.ngc-card--lit) .ngc-action{color:color-mix(in srgb,var(--ngc-neon) 70%,var(--ngc-ink))}
.ngc-card:is(:hover,:focus-visible,.ngc-card--lit) .ngc-action-arrow{transform:translateX(calc(var(--ngc-u) * .220006))}

.ngc-card:focus-visible .ngc-pane{border-color:color-mix(in srgb,var(--ngc-neon) 70%,var(--ngc-ink));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ngc-ink) 42%,transparent),inset 0 0 calc(var(--ngc-u) * 2.6) 0 color-mix(in srgb,var(--ngc-neon) calc(var(--ngc-glow) * 26%),transparent)}
@media (hover:none){
.ngc-card{transform:translateY(calc(var(--ngc-lift) * -1))}
.ngc-card .ngc-bloom{opacity:var(--ngc-glow);transform:scale(1)}
.ngc-card .ngc-ring{opacity:var(--ngc-sweep-opacity)}
.ngc-card .ngc-pane{border-color:color-mix(in srgb,var(--ngc-neon) 34%,var(--ngc-hairline));box-shadow:inset 0 1px 0 0 color-mix(in srgb,var(--ngc-ink) 22%,transparent),inset 0 0 calc(var(--ngc-u) * 2.6) 0 color-mix(in srgb,var(--ngc-neon) calc(var(--ngc-glow) * 26%),transparent)}
.ngc-card .ngc-icon{color:color-mix(in srgb,var(--ngc-neon) 82%,var(--ngc-ink));border-color:color-mix(in srgb,var(--ngc-neon) 48%,transparent);box-shadow:0 0 calc(var(--ngc-u) * 1.1) 0 color-mix(in srgb,var(--ngc-neon) calc(var(--ngc-glow) * 55%),transparent)}
.ngc-card .ngc-eyebrow{color:color-mix(in srgb,var(--ngc-neon) 74%,var(--ngc-ink))}
.ngc-card .ngc-action{color:color-mix(in srgb,var(--ngc-neon) 70%,var(--ngc-ink))}
.ngc-card .ngc-action-arrow{transform:translateX(calc(var(--ngc-u) * .22))}
}
@media (prefers-reduced-motion:reduce){.ngc-card,.ngc-card *,.ngc-card *::before,.ngc-card *::after{transition-duration:1.00002ms !important}.ngc-ring-spin{animation:none}}