/* Efectos de la landing (templates/sitio/portada.html). Quién pone cada clase o variable:
   html.magia        → portada.html, si no hay "reducir movimiento" (todo lo que se mueve va dentro de .magia)
   html.magia-cursor → magia_cursor.js, solo con mouse
   html.lenis        → Lenis (static/vendor/lenis), inercia en escritorio
   --p               → magia_scroll.js en cada [data-scroll], de 0 a 1 según su paso por la pantalla
   --progreso        → magia_scroll.js en <html>, avance de la página
   .partido / .vivo  → magia_texto.js en los títulos partidos en palabras */

/* ---------- Lenis (su CSS recomendado) ---------- */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

/* La cinta va de orilla a orilla; clip (no hidden) para no romper los position:sticky */
.site{overflow-x:clip}

/* ---------- barra superior: línea de progreso y modo oscuro sobre las bandas negras ---------- */
.snav-progreso{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--fg);transform:scaleX(var(--progreso,0));transform-origin:0 50%;pointer-events:none}
.snav{transition:background .3s,border-color .3s,box-shadow .2s}
.snav .logo img,.snav .links a,.snav .btn{transition:filter .3s,color .3s,background .3s,border-color .3s}
.snav.sobre-oscuro{background:rgba(17,17,17,.86);border-bottom-color:#262626}
.snav.sobre-oscuro .logo img{filter:invert(1)}
.snav.sobre-oscuro .logo small{color:#9A9A9A}
.snav.sobre-oscuro .links a{color:#BDBDBD}
.snav.sobre-oscuro .links a:hover{background:#222;color:#fff}
.snav.sobre-oscuro .links a[aria-current]{color:#fff;box-shadow:inset 0 -2px 0 #fff}
.snav.sobre-oscuro .btn.ghost{color:#fff}
.snav.sobre-oscuro .btn.ghost:hover{background:#222}
.snav.sobre-oscuro .btn.pri{background:#fff;border-color:#fff;color:#111}
.snav.sobre-oscuro .snav-progreso{background:#fff}

/* ---------- títulos que entran palabra por palabra ([data-palabras]) ---------- */
/* Mientras el JS los parte se esconden; si el JS no corre, aparecen solos a los 1.5 s */
.magia [data-palabras]:not(.partido){opacity:0;animation:magia-mostrar 0s 1.5s forwards}
@keyframes magia-mostrar{to{opacity:1}}
.pal{display:inline-block}
.magia [data-palabras] .pal-i{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(8px);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .7s ease;transition-delay:calc(var(--i) * 35ms)}
.magia [data-palabras].vivo .pal-i{opacity:1;transform:none;filter:none}

/* ---------- frase que se ilumina con el scroll ([data-iluminar] + data-scroll="lectura") ---------- */
/* Cada palabra pasa de casi transparente a sólida cuando --p "llega" a su índice; las últimas 4 terminan antes de p=1 */
.magia [data-iluminar].partido .pal-i{opacity:clamp(.16, calc(var(--p, 1) * (var(--n) + 4) - var(--i)), 1);transition:opacity .2s linear}

/* ---------- hero: el chat se inclina con el mouse y se aleja al bajar ---------- */
.st-mock-3d{min-width:0;perspective:1200px}
.magia .st-mock-3d{transform:translate3d(0, calc(var(--p, 0) * -48px), 0) scale(calc(1 - var(--p, 0) * .08));opacity:calc(1 - var(--p, 0) * .55)}
.magia .st-hero .st-fondo{opacity:calc(1 - var(--p, 0))}
.magia-cursor [data-inclinar]{transform-style:preserve-3d;will-change:transform}

/* ---------- bandas negras que se expanden al entrar (data-scroll="entrada") ---------- */
.magia .band[data-scroll]{clip-path:inset(0 calc((1 - var(--p, 1)) * 4vw) round calc((1 - var(--p, 1)) * 32px))}
.st-cierre{position:relative;isolation:isolate;overflow:hidden}

/* ---------- luz que sigue al cursor en tarjetas ([data-luz]) ---------- */
.magia-cursor [data-luz] > *{position:relative;isolation:isolate}
.magia-cursor [data-luz] > *::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(280px circle at var(--x, 50%) var(--y, 50%), rgba(17,17,17,.06), transparent 70%)}
.magia-cursor .duo[data-luz] > *::before{background:radial-gradient(300px circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,.09), transparent 70%)}
.magia-cursor [data-luz] > *:hover::before{opacity:1}
/* En los planes, además, el borde se ilumina cerca del cursor */
.magia-cursor .plans[data-luz] > .plan:not(.hl)::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(200px circle at var(--x, 50%) var(--y, 50%), rgba(17,17,17,.6), transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.magia-cursor .plans[data-luz] > .plan:not(.hl):hover::after{opacity:1}

/* ---------- plan destacado: un destello que recorre su borde negro ---------- */
@property --angulo{syntax:"<angle>";inherits:false;initial-value:0deg}
.magia .plan.hl{border:2px solid transparent;box-shadow:none;background:linear-gradient(var(--surface), var(--surface)) padding-box,conic-gradient(from var(--angulo), var(--fg) 0deg, var(--fg) 290deg, #C8C8C8 325deg, var(--fg) 360deg) border-box;animation:magia-haz 5s linear infinite}
@keyframes magia-haz{to{--angulo:360deg}}

/* ---------- botones con imán ([data-iman]) ---------- */
.magia-cursor [data-iman]{transition:transform .35s cubic-bezier(.2,.8,.2,1),background .15s,border-color .15s;will-change:transform}

/* ---------- industrias en cinta infinita ([data-cinta]) ---------- */
.who-row.con-cinta{display:block;margin-inline:calc(50% - 50vw)}
.cinta{display:grid;gap:10px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.cinta-pista{display:flex;gap:8px;width:max-content;animation:magia-cinta 48s linear infinite}
.cinta-fila:nth-child(2) .cinta-pista{animation-direction:reverse;animation-duration:58s}
.cinta:hover .cinta-pista{animation-play-state:paused}
.cinta-pista span{white-space:nowrap}
/* Cada pista lleva la lista dos veces: avanzar media pista (más medio espacio) cierra el ciclo sin salto */
@keyframes magia-cinta{to{transform:translateX(calc(-50% - 4px))}}