/* ui.css — piezas compartidas por la web y el portal.
   Dirección A · Neón sobre negro. Todo sale de tokens.css. */

.wordmark{font-family:var(--f-display);font-weight:700;font-size:1.55rem;letter-spacing:.06em;font-style:italic;
  text-transform:uppercase;text-decoration:none;line-height:1;display:inline-flex;align-items:center;gap:.5rem}
.wordmark::before{content:"";width:1.7em;height:1.7em;flex:none;margin:-.2em 0;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cg transform=%22translate(60 60) skewX(-14) translate(-60 -60)%22%3E%3Cg fill=%22%23f6eef1%22%3E%3Cpolygon points=%2222,20 86,20 78,38 22,38%22/%3E%3Cpolygon points=%2222,51 74,51 66,69 22,69%22/%3E%3Cpolygon points=%2222,82 86,82 78,100 22,100%22/%3E%3Crect x=%2222%22 y=%2220%22 width=%2222%22 height=%2280%22/%3E%3C/g%3E%3Cpolygon points=%2278,51 96,51 88,69 70,69%22 fill=%22%23ff4fa8%22/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.wordmark i{display:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font:700 .9375rem/1 var(--f-texto);letter-spacing:.02em;padding:1rem 1.6rem;
  border:1px solid var(--linea-fuerte);background:transparent;color:var(--texto);
  text-decoration:none;cursor:pointer;border-radius:var(--radio);
  transition:background var(--dur-media) var(--ease-suave),border-color var(--dur-media) var(--ease-suave),
    transform var(--dur-media) var(--ease-suave),color var(--dur-media) var(--ease-suave)}
.btn:hover{border-color:var(--acento);transform:translateY(-2px)}
.btn--acento{background:var(--acento);border-color:var(--acento);color:oklch(15% .02 350)}
.btn--acento:hover{background:oklch(77% .21 350);border-color:oklch(77% .21 350)}
.btn--chico{padding:.7rem 1.05rem;font-size:.8125rem}
.btn[disabled]{opacity:.5;pointer-events:none}

/* Spotlight que sigue al cursor — signature move (componentes/03, re-teñido en rosa) */
.spotlight{position:relative;overflow:hidden;isolation:isolate;--mx:50%;--my:40%}
.spotlight::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx) var(--my),oklch(70% .235 350/.20),transparent 70%);
  transition:background 180ms var(--ease-suave)}
@media (prefers-reduced-motion:reduce){
  .spotlight::before{background:radial-gradient(520px circle at 70% 35%,oklch(70% .235 350/.14),transparent 70%)}}

/* Marquee (componentes/09) */
.marquee{overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;gap:var(--gap,2.5rem);animation:marquee var(--vel,38s) linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{white-space:nowrap;display:flex;align-items:center;gap:var(--gap,2.5rem)}
@keyframes marquee{to{transform:translateX(calc(-50% - var(--gap,2.5rem)/2))}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none;flex-wrap:wrap;justify-content:center}}

.punto{width:.5rem;height:.5rem;background:var(--acento);display:inline-block;flex:none}
noscript .reveal{opacity:1;transform:none}