/* hero «Leyenda» · materia a sangre, navegación abierta, logo tramado, una frase */
.hx{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--hbg);color:#F7F5FC}
.page .hx{height:860px;min-height:0}
.hx>canvas{position:absolute;inset:0;width:100%;height:100%}
.hx .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hx-nav{position:relative;z-index:5}
.hx .hx-wm,.hx .links,.hx-in{transition:opacity .7s,transform .8s cubic-bezier(.2,.7,.2,1)}
.hx.pre .hx-wm,.hx.pre .links{opacity:0;transform:translateY(-8px)}
.hx.pre .hx-in{opacity:0;transform:translateY(14px)}
/* la frase, bajo el logo con aire: sin panel; una sombra suave de texto solo para separarla de la luz */
.hx-lg{position:absolute;z-index:3;left:50%;top:70%;transform:translateX(-50%);width:min(600px,82vw);text-align:center;
  font:500 clamp(17px,1.4vw,21px)/1.45 var(--text);color:var(--hhi);text-shadow:0 1px 18px color-mix(in srgb,var(--hbg) 85%,transparent),0 0 2px color-mix(in srgb,var(--hbg) 60%,transparent)}
/* entrada de la frase con la misma trama que el logo: las líneas engordan hasta cerrar la letra */
@property --sl{syntax:'<length>';inherits:false;initial-value:5px}
.hx-scan{--sl:5px;-webkit-mask:repeating-linear-gradient(180deg,#000 0 var(--sl),transparent var(--sl) 5px);mask:repeating-linear-gradient(180deg,#000 0 var(--sl),transparent var(--sl) 5px);transition:--sl .8s cubic-bezier(.5,0,.3,1) .15s,opacity .4s .1s}
.hx.pre .hx-scan{--sl:0px;opacity:0}
/* CTA discreto: texto subrayado con cápsula, sin botón sólido */
.hx-cta{position:absolute;z-index:3;left:50%;top:calc(70% + 92px);transform:translateX(-50%);font:600 15px var(--text);color:#fff;padding:10px 18px;border-radius:99px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--hhi) 55%,transparent);white-space:nowrap;transition:background .3s,opacity .7s,transform .8s cubic-bezier(.2,.7,.2,1)}
.hx-cta:hover{background:color-mix(in srgb,var(--hacc) 30%,transparent)}
.hx-cta{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--hacc) 70%,var(--hhi))!important}
.hx-cta span{color:var(--hacc);filter:brightness(1.6)}
.hx.pre .hx-cta{transform:translate(-50%,14px)}
.hx-down{position:absolute;z-index:3;left:50%;bottom:22px;transform:translateX(-50%);font:500 14px var(--mono);color:var(--hhi);opacity:.6}
.hx.pre .hx-down{opacity:0}
.hx-cta.hx-in{transition-delay:.25s}.hx-down.hx-in{transition-delay:.4s}
@media (max-width:900px){.hx-lg{top:62%}.hx-cta{top:calc(62% + 110px)}}