/* ZenGTrading — Modelo 1 · TERMINAL INSTITUCIONAL, para todo el sitio.
   Estética de terminal de datos. Solo tokens de marca y variaciones de opacidad.
   Nada de este archivo oculta contenido: los estados iniciales los pone motion.js. */

/* textura de monitor: líneas de barrido muy tenues sobre la hero (motion.js marca .m1-host
   solo si la hero ya está posicionada, así el ::after nunca se escapa de su caja) */
.m1-host::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}

/* esquinas de terminal en paneles (bordes rectos + marcas en las esquinas) */
.card,.step,.tier,.prog-card,.ncard,.faq details,.tvbox,.acard{border-radius:6px}
.card,.step,.prog-card{
  background-image:
    linear-gradient(rgba(167,139,250,.55),rgba(167,139,250,.55)),
    linear-gradient(rgba(167,139,250,.55),rgba(167,139,250,.55)),
    linear-gradient(rgba(167,139,250,.55),rgba(167,139,250,.55)),
    linear-gradient(rgba(167,139,250,.55),rgba(167,139,250,.55));
  background-size:12px 1px,1px 12px,12px 1px,1px 12px;
  background-position:0 0,0 0,100% 100%,100% 100%;
  background-repeat:no-repeat}
.stats{border-radius:6px}
.stat{background:linear-gradient(180deg,var(--panel2),var(--bg))}
.stat .n{letter-spacing:-.5px}
.seclabel{letter-spacing:2.6px}

/* líneas de grilla que se dibujan (decorativas, fuera del flujo) */
.m1-grid{position:absolute;inset:0;pointer-events:none;z-index:0}
.m1-grid i{position:absolute;display:block;background:rgba(124,58,237,.22)}
.m1-grid .v{top:0;bottom:0;width:1px;transform-origin:50% 0}
.m1-grid .h{left:0;right:0;height:1px;transform-origin:0 50%}

/* regla superior de sección, alineada con .wrap (1140px con 24px de padding) */
.m1-rule{position:absolute;top:0;height:1px;pointer-events:none;
  left:max(24px,calc((100% - 1140px) / 2 + 24px));right:max(24px,calc((100% - 1140px) / 2 + 24px));
  background:linear-gradient(90deg,var(--violet),rgba(124,58,237,.25) 40%,transparent);transform-origin:0 50%}

/* cursor de terminal en los .seclabel */
.m1-cur{display:inline-block;width:.6em;height:1.1em;margin-left:2px;background:var(--violet-l);vertical-align:middle}

/* ticker de la topbar (solo desktop, lo arma motion.js) */
.m1-tkbox{overflow:hidden;flex-shrink:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.m1-tk{display:inline-block;white-space:nowrap}

/* GSAP maneja transform en cards: la transición CSS solo para color de borde */
.js-motion .card{transition:border-color .15s}

/* corrección heredada: en web/index.html .grid2 no pasa a 1 columna y la tarjeta VIP
   quedaba cortada a 375px (desborde horizontal). site.css ya lo hace en las internas. */
@media(max-width:520px){.grid2,.grid3,.steps{grid-template-columns:1fr}}

/* corrección heredada: .brand es flex con gap y el gap separa "Zen", "G" y "Trading".
   El wordmark vuelve a leerse ZenGTrading sin tocar el HTML. */
.brand{gap:0}.brand .logo{margin-right:11px}

/* corrección heredada: la imagen de fondo de la hero de la home no tiene dimensiones y se
   corría al cargar (CLS mobile). aspect-ratio reserva su caja. */
.hero-bg-logo{aspect-ratio:1/1}