/* Inter 800 del logo del velo: ya va en la variable autoalojada (400–800) */
/* ===== Laboratorio de movimiento ===== */

/* A. Hero */
.lab-lw,.cap-1 h1 span.lab-lw,.cap-1 h1 span.lab-w,h1 span.lab-lw{display:inline-block;white-space:nowrap}
.lab-lw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.lab-lw > span{display:inline-block;will-change:transform}

/* B. Scroll storytelling */
/* El método se queda quieto con position:sticky DENTRO de su pista: la pista mide
   una pantalla más el recorrido de los pasos, y el bloque no puede salir de ella.
   (Antes era el pin de ScrollTrigger, con position:fixed, y se montaba sobre otras
   secciones cuando su cálculo se desfasaba.) */
.lab-pista{position:relative;height:calc(100vh + var(--lab-recorrido, 300vh))}
.lab-pin{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:96px;padding-bottom:40px;box-sizing:border-box}
.lab-pin .sec-cab{margin-bottom:48px}
.lab-paso-n{font:600 .82rem var(--f-display);letter-spacing:.08em;color:var(--texto-2);margin:-24px 0 28px;display:flex;align-items:center;gap:12px}
.lab-paso-n b{color:var(--egc-azul);font-size:1rem}
.lab-paso-n i{flex:0 0 120px;height:3px;border-radius:2px;background:var(--linea);position:relative;overflow:hidden}
.lab-paso-n i::after{content:"";position:absolute;inset:0;background:var(--egc-azul);transform-origin:left;transform:scaleX(var(--p,0))}
.lab-pasos .paso > *{transition:opacity .45s cubic-bezier(.2,.8,.2,1)}
.lab-pasos .paso::before{transition:background-color .35s,color .35s,box-shadow .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.lab-pasos .paso .ia{transition:opacity .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1)}
.lab-pasos .paso.fut > *{opacity:.28}
.lab-pasos .paso.fut::before{border-color:#A9C8EC;color:#8DB3DF}
.lab-pasos .paso.fut .ia{opacity:0;transform:translateY(12px)}
.lab-pasos .paso.pas > *{opacity:.62}
.lab-pasos .paso.act::before{background:var(--egc-azul);color:#fff;box-shadow:0 0 0 8px rgba(0,101,203,.14);transform:scale(1.08)}
.lab-pasos .paso.pas::before{background:#EAF2FC}
.lab-w{display:inline}

/* C. Microinteracciones */
html.lab-C .btn{transition:background-color .2s ease,border-color .2s ease,scale .12s ease}
html.lab-C .btn:hover{transform:none}
html.lab-C .btn:active{scale:.96}
html.lab-C .btn .lab-bi{display:inline-flex;align-items:center;gap:.55em;pointer-events:none}
html.lab-C .area-c,html.lab-C .prog,html.lab-C .caso,html.lab-C .persona,html.lab-C .preg,html.lab-C .lab-tc{transition:border-color .2s ease,box-shadow .3s ease}
html.lab-C .area-c:hover,html.lab-C .prog:hover,html.lab-C .caso:hover{transform:none}
.lab-t{position:relative;transform-style:preserve-3d}
.lab-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(58,143,232,.12),transparent 55%)}
.lab-glow::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),#3A8FE8,rgba(58,143,232,0) 70%);-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 exclude,linear-gradient(#000 0 0)}
.lab-t:hover .lab-glow{opacity:1}
.oscuro .lab-glow{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(58,143,232,.2),transparent 55%)}
html.lab-C .menu a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .3s cubic-bezier(.2,.8,.2,1),color .2s ease}
html.lab-C .menu a:hover{background-size:100% 1px}
html.lab-C{interpolate-size:allow-keywords}
html.lab-C .faq-i::details-content{block-size:0;overflow:hidden;opacity:0;transition:block-size .4s cubic-bezier(.2,.8,.2,1),opacity .3s ease,content-visibility .4s allow-discrete}
html.lab-C .faq-i[open]::details-content{block-size:auto;opacity:1}
html.lab-C .faq-i summary{transition:color .2s ease,padding-left .25s cubic-bezier(.2,.8,.2,1)}
html.lab-C .faq-i summary:hover{padding-left:6px}

/* D. Transicion entre paginas: velo difuminado */
html.lab-entra body::before{content:"";position:fixed;inset:0;z-index:9998;background:radial-gradient(120% 90% at 50% 55%,#12345a 0%,#0D1821 62%)}
.tv{position:fixed;inset:0;z-index:9999;pointer-events:none;background:radial-gradient(120% 90% at 50% 55%,rgba(18,52,90,.9) 0%,rgba(13,24,33,.96) 62%);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.tv-sv{position:absolute;inset:0;display:grid;place-items:center}
.tv-sv p{position:relative;margin:0;font:600 clamp(1.5rem,1.1rem + 1.8vw,2.6rem)/1.1 var(--f-display,"Inter Tight",sans-serif);color:transparent;background:linear-gradient(100deg,rgba(160,196,236,.5) 0%,rgba(160,196,236,.5) 38%,#EEF5FF 50%,rgba(160,196,236,.5) 62%,rgba(160,196,236,.5) 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;animation:tv-brillo 2.4s linear infinite}
.tv-sv p b{font-weight:700}
.tv-sv-an{position:absolute;left:50%;top:50%;width:min(460px,78vw);height:auto;transform:translate(-50%,-50%);fill:none;stroke:rgba(140,194,255,.16);stroke-width:1;overflow:visible;animation:tv-resp 2.6s ease-in-out infinite}
.tv-sv-an ellipse:nth-child(2){stroke:rgba(140,194,255,.1);stroke-dasharray:2 7}
/* Logo SmartVenue AI en el velo (30/09/2026): isotipo en óvalo + «SmartVenue» + insignia AI */
.tv-logo{position:relative;display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);font-family:"Inter","Inter Tight",system-ui,sans-serif}
.tv-logo-iso{width:clamp(72px,7.2vw,112px);height:auto;flex:none;overflow:visible;filter:drop-shadow(0 0 10px rgba(76,143,224,.55))}
.tv-logo-ov{fill:rgba(13,24,33,.35);stroke:#5B9CEB;stroke-width:3}
.tv-logo-t{font-weight:800;font-size:clamp(2.6rem,1.6rem + 4vw,5.4rem);line-height:1;letter-spacing:-.045em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.tv-logo-ai{align-self:flex-start;margin:-.2em 0 0 -.1em;font-weight:800;font-size:clamp(1rem,.7rem + 1.2vw,1.75rem);line-height:1;letter-spacing:.01em;color:#fff;padding:.28em .42em;border-radius:.36em;background:linear-gradient(160deg,#5B9CEB 0%,#2F62B8 100%);box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 6px 22px rgba(76,143,224,.55)}
.tv-sv .tv-sv-an{width:min(860px,94vw)}
/* Escena 3D del velo (02/10/2026): perspectiva, órbitas inclinadas que giran, brillo que
   recorre la palabra y pulso del óvalo. Para volver a la versión plana, borrar este bloque
   hasta «fin escena 3D» y el cambio de innerHTML/timeline en motion.js (bloque D). */
.tv-sv{perspective:1100px}
.tv-esc{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d;will-change:transform}
.tv-orb{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.tv-orb .tv-sv-an{animation:tv-orbita 18s linear infinite}
.tv-orb .tv-sv-an2{width:min(720px,88vw);stroke:rgba(140,194,255,.2);stroke-dasharray:2 9;animation:tv-orbita2 12s linear infinite}
.tv-orb .tv-sv-an2 circle:nth-child(2){stroke:rgba(91,156,235,.28);stroke-dasharray:30 14 4 14}
.tv-logo{transform-style:preserve-3d}
.tv-logo-iso,.tv-logo-ai{will-change:transform}
.tv-logo-ov{animation:tv-pulso 2.4s ease-in-out infinite}
.tv-logo-t{color:transparent;text-shadow:none;background:linear-gradient(100deg,#DCE8F8 0%,#DCE8F8 40%,#fff 50%,#DCE8F8 60%,#DCE8F8 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 18px rgba(0,0,0,.35));animation:tv-brillo 2.6s linear infinite;padding-bottom:.06em}
@keyframes tv-orbita{from{transform:translate(-50%,-50%) rotateX(60deg) rotateZ(0deg)}to{transform:translate(-50%,-50%) rotateX(60deg) rotateZ(360deg)}}
@keyframes tv-orbita2{from{transform:translate(-50%,-50%) rotateX(74deg) rotateY(-10deg) rotateZ(360deg)}to{transform:translate(-50%,-50%) rotateX(74deg) rotateY(-10deg) rotateZ(0deg)}}
@keyframes tv-pulso{0%,100%{stroke-opacity:.75}50%{stroke-opacity:1}}
/* Pulido (02/10/2026): velo opaco con el mismo fondo que el de llegada (html.lab-entra) y sin
   backdrop-filter; sin filtros sobre el texto animado; capas de composición para lo que se mueve */
.tv{background:radial-gradient(120% 90% at 50% 55%,#12345a 0%,#0D1821 62%);-webkit-backdrop-filter:none;backdrop-filter:none}
.tv-logo-t{filter:none}
.tv-logo,.tv-orb,.tv-esc{will-change:transform,opacity;backface-visibility:hidden}
/* fin escena 3D */
/* 12/10/2026 · Con movimiento reducido el velo no se usa: sus animaciones infinitas tampoco corren */
@media (prefers-reduced-motion: reduce){.tv,.tv *{animation:none !important}}
@media (max-width:560px){.tv-logo{gap:10px}.tv-logo-iso{width:56px}.tv-logo-t{font-size:2.2rem}.tv-logo-ai{font-size:.9rem}}
@keyframes tv-brillo{from{background-position:110% 0}to{background-position:-10% 0}}
@keyframes tv-resp{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(.97)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.03)}}

/* ===== 12/10/2026 · Efectos integrados desde el prototipo de moooor.com (aprobados por Enrique) =====
   Titulares por líneas · Carrusel de logos · Vídeo en bucle · Scroll suave.
   Todo se apaga con prefers-reduced-motion y con ?estatico. */

/* Titulares por líneas: cada línea sube desde una máscara */
.lin-ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.lin-li{display:block;will-change:transform}

/* Carrusel de logos: banda arrastrable, con teclado y cursor «Arrastrar» solo con ratón */
.logos-pista{min-width:0;position:relative;margin-inline:calc(var(--gutter) * -1);padding-block:6px}
.logos-banda{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;border-block:1px solid var(--linea);touch-action:pan-y;outline-offset:-3px}
.logos-banda::-webkit-scrollbar{display:none}
.logos-banda.arrastrando{cursor:grabbing;user-select:none}
.logos-banda ul{display:flex;flex:none;list-style:none;margin:0;padding:0}
.logos-banda li{flex:none;width:clamp(150px,18vw,230px);height:clamp(96px,10vw,132px);display:flex;align-items:center;justify-content:center;padding:18px;border-right:1px solid var(--linea)}
.logos-banda img{max-height:68px;max-width:100%;width:auto;height:auto;filter:grayscale(1);opacity:.72;transition:filter 220ms,opacity 220ms;pointer-events:none;-webkit-user-drag:none}
.logos-banda img.ancho{max-height:34px}
.logos-banda li:hover img{filter:none;opacity:1}
@media (hover:none){.logos-banda img{filter:none;opacity:1}}
/* 13/10/2026 · Cursor «Arrastrar» rediseñado (Enrique: «un diseño más chulo»): esfera azul con brillo y luz propia, aro punteado que gira con el arrastre, flechas que se abren al pulsar,
   estiramiento según la velocidad del puntero y una estela más lenta que lo sigue. La versión anterior era un círculo azul plano (84 px, solo texto): para volver, sustituir este bloque por
   .logos-cursor{position:fixed;left:0;top:0;z-index:60;pointer-events:none;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--egc-azul);color:#fff;font:600 .78rem/1 var(--f-display);display:grid;place-items:center;opacity:0;transition:opacity 180ms,scale 180ms}
   y quitar el HTML interior que crea logos() en motion.js. Solo transform, scale y opacidad; se crea solo con ratón y sin movimiento reducido. */
.logos-cursor{position:fixed;left:0;top:0;z-index:60;pointer-events:none;width:52px;height:52px;margin:-26px 0 0 -26px;opacity:0;transition:opacity 150ms cubic-bezier(.16,1,.3,1);--lc-e:.4}
.logos-cursor.vivo{opacity:1;--lc-e:1}
.logos-cursor.pulsado{--lc-e:.88}
.logos-cursor .lc-in{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;color:#fff;font:600 .72rem/1 var(--f-display);letter-spacing:.02em;
  background:radial-gradient(circle at 32% 24%,#6FB3FF 0%,var(--egc-azul-luz) 28%,var(--egc-azul) 62%,var(--egc-azul-profundo) 100%);
  box-shadow:0 7px 17px rgba(0,101,203,.45),0 0 0 1px rgba(255,255,255,.28) inset,0 -4px 9px rgba(0,40,90,.35) inset;
  scale:var(--lc-e);transition:scale 200ms cubic-bezier(.16,1,.3,1);transform:scale(var(--lc-sx,1),var(--lc-sy,1))}
.logos-cursor .lc-in::before{content:"";position:absolute;left:14%;top:8%;width:72%;height:38%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0));pointer-events:none}
.logos-cursor .lc-aro{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);overflow:visible;fill:none;stroke:rgba(111,179,255,.85);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:4 9;
  transform:rotate(calc(var(--lc-giro,0) * 1deg));scale:var(--lc-e);transition:scale 200ms cubic-bezier(.16,1,.3,1)}
.logos-cursor.pulsado .lc-aro{stroke:#fff}
/* 14/10/2026 · Enrique: el círculo, un 50 % más pequeño (104 → 52 px). A ese tamaño la palabra «Arrastrar» no se lee (≈ 6 px): se oculta y quedan las flechas ‹ ›. Para volver al tamaño y la palabra anteriores: 104 px, márgenes -52 px, aro -9 px, cola 136 px y quitar el display:none de .lc-t. */
.logos-cursor .lc-t{display:none}
.logos-cursor .lc-fl{position:absolute;top:50%;width:8px;height:12px;margin-top:-6px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.85;transition:translate 150ms cubic-bezier(.16,1,.3,1)}
.logos-cursor .lc-izq{left:10px}
.logos-cursor .lc-der{right:10px}
.logos-cursor.pulsado .lc-izq{translate:-3px 0}
.logos-cursor.pulsado .lc-der{translate:3px 0}
.logos-cursor-cola{position:fixed;left:0;top:0;z-index:59;pointer-events:none;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;border:1.5px solid rgba(58,143,232,.5);background:radial-gradient(circle,rgba(58,143,232,.14),rgba(58,143,232,0) 70%);opacity:0;scale:.6;transition:opacity 200ms cubic-bezier(.16,1,.3,1),scale 300ms cubic-bezier(.16,1,.3,1)}
.logos-cursor.vivo ~ .logos-cursor-cola{opacity:1;scale:1}
.logos-cursor.pulsado ~ .logos-cursor-cola{scale:.82}
@media (hover:none),(pointer:coarse){.logos-cursor-cola{display:none}}
@media (hover:none),(pointer:coarse){.logos-cursor{display:none}}

/* Vídeo en bucle sobre las capturas de la portada */
.captura{position:relative}
.captura video{position:absolute;left:0;right:0;bottom:0;top:22px;width:100%;height:calc(100% - 22px);object-fit:cover;opacity:0;transition:opacity 700ms ease;display:block}
.captura video.listo{opacity:1}
@media (prefers-reduced-motion:reduce){.captura video{display:none}}

/* Scroll suave (Lenis) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ===== 13/10/2026 · «IA en cada paso»: faro y pasos que se encienden de izquierda a derecha (JS: pasosIA en motion.js).
   Solo actúa con .pasos.anima, que pone el JS; sin JS, con movimiento reducido o con ?estatico se ven los pasos a la vez. Movimiento: transform y opacidad, 100/200/300 ms, ease-out. ===== */
.camino .faro-halo{fill:var(--egc-azul-luz);opacity:.28}
.camino .faro{fill:#fff;stroke:var(--egc-azul);stroke-width:3}
.pasos.anima .paso::before{transform:scale(.6);opacity:.35;border-color:var(--linea);color:var(--texto-2);background:var(--suelo);
  transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s cubic-bezier(.16,1,.3,1),border-color .2s cubic-bezier(.16,1,.3,1),color .2s cubic-bezier(.16,1,.3,1),background-color .2s cubic-bezier(.16,1,.3,1)}
.pasos.anima .paso.on::before{transform:none;opacity:1;border-color:var(--egc-azul);color:var(--egc-azul);background:#fff}
.pasos.anima .paso > h3,.pasos.anima .paso > p{opacity:0;transform:translateX(-24px);transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)}
.pasos.anima .paso > p{transition-delay:.1s}
.pasos.anima .paso > p.ia{transition-delay:.2s}
.pasos.anima .paso.on > h3,.pasos.anima .paso.on > p{opacity:1;transform:none}
@media (max-width:860px){.pasos.anima .paso > h3,.pasos.anima .paso > p{transform:translateY(12px)}.pasos.anima .paso.on > h3,.pasos.anima .paso.on > p{transform:none}}
.ver-todos{margin-top:28px;font:500 .9rem var(--f-texto);color:var(--texto-2);background:none;border:0;padding:8px 0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.ver-todos:hover{color:var(--egc-azul)}

/* ===== 13/10/2026 · SmartVenue AI «wow» equilibrado (prototipo prototipos/smartvenue-wow/, aprobado para producción por Enrique). Cuelga de html.wow, que pone el JS de abajo. ===== */
/* SmartVenue AI · «wow» equilibrado: ver la cabecera de arriba. */
:root{--w-sale:cubic-bezier(.16,1,.3,1);--w-azul:#0065CB;--w-azul-luz:#3A8FE8}
.w-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- revelado en lote: lo que entra en pantalla sube con 100 ms de escalón ---------- */
html.wow .w-rev{opacity:0;transform:translateY(12px);transition:opacity 300ms var(--w-sale),transform 300ms var(--w-sale);transition-delay:var(--w-d,0ms)}
html.wow .w-rev.w-in{opacity:1;transform:none}
html.wow .w-rev.w-izq{transform:translateX(-18px)}
html.wow .w-rev.w-izq.w-in{transform:none}

/* ---------- capturas: brillo que sigue al puntero, inclinación ligera y paralaje de scroll ---------- */
html.wow figure.captura:not(.sv-hero-img){
  transform:translate3d(0,calc(var(--w-py,0) * 1px),0) perspective(1100px) rotateX(calc(var(--w-rx,0) * 1deg)) rotateY(calc(var(--w-ry,0) * 1deg));
  transition:transform 150ms var(--w-sale),box-shadow 200ms var(--w-sale);will-change:transform}
html.wow figure.captura{position:relative}
html.wow figure.captura::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 200ms var(--w-sale);
  background:radial-gradient(420px circle at calc(var(--w-mx,50) * 1%) calc(var(--w-my,50) * 1%),rgba(140,194,255,.22),rgba(140,194,255,0) 60%)}
html.wow figure.captura.w-hover::after{opacity:1}
html.wow figure.captura.w-hover:not(.sv-hero-img){box-shadow:0 30px 60px rgba(13,24,33,.28)}

/* ---------- contadores ---------- */
html.wow .w-num{font-variant-numeric:tabular-nums}

/* ---------- chat: los mensajes llegan de uno en uno; el asistente «escribe» antes de contestar ---------- */
html.wow .chat .msg{opacity:0;transform:translateY(8px);transition:opacity 200ms var(--w-sale),transform 200ms var(--w-sale)}
html.wow .chat .msg.w-in{opacity:1;transform:none}
html.wow .chat .msg.w-escribe{opacity:1;transform:none;color:transparent;position:relative}
html.wow .chat .msg.w-escribe *{visibility:hidden}
html.wow .chat .msg.w-escribe::after{content:"";position:absolute;left:16px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--w-azul);box-shadow:12px 0 0 var(--w-azul),24px 0 0 var(--w-azul);opacity:.6;animation:w-punto 600ms ease-in-out 3}
@keyframes w-punto{50%{opacity:.2}}
html.wow .chat .msg.sug span{opacity:0;transform:translateY(6px);transition:opacity 200ms var(--w-sale),transform 200ms var(--w-sale);transition-delay:var(--w-d,0ms)}
html.wow .chat .msg.sug.w-in span{opacity:1;transform:none}

/* ---------- torre de control: las alertas se encienden de arriba abajo ---------- */
html.wow .torre .alerta{opacity:0;transform:translateX(16px);transition:opacity 300ms var(--w-sale),transform 300ms var(--w-sale);transition-delay:var(--w-d,0ms)}
html.wow .torre.w-in .alerta{opacity:1;transform:none}
html.wow .torre .alerta .est{transform:scale(.8);transition:transform 300ms var(--w-sale);transition-delay:calc(var(--w-d,0ms) + 200ms)}
html.wow .torre.w-in .alerta .est{transform:none}

/* ---------- comparativa: filas en cascada y la columna de SmartVenue AI se «enciende» ---------- */
html.wow .comp-f:not(.comp-cab) > :nth-child(3){transition:background-color 300ms var(--w-sale);transition-delay:calc(var(--w-d,0ms) + 100ms)}
html.wow .comp-f:not(.comp-cab):not(.w-in) > :nth-child(3){background-color:transparent}

/* ---------- arquitectura: los datos fluyen de izquierda a derecha ---------- */
html.wow .arq .w-e{opacity:0;transform:translateX(-14px);transition:opacity 300ms var(--w-sale),transform 300ms var(--w-sale);transition-delay:var(--w-d,0ms)}
html.wow .arq.w-run .w-e{opacity:1;transform:none}
html.wow .arq .arq-flecha.w-e{transform:scaleX(0);transform-origin:left}
html.wow .arq.w-run .arq-flecha.w-e{transform:scaleX(1)}
html.wow .arq-flecha{position:relative}
html.wow .arq-flecha::after{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 12px var(--w-azul-luz)}
html.wow .arq.w-run .arq-flecha::after{animation:w-flujo 900ms var(--w-sale) 3;animation-delay:calc(var(--w-d,0ms) + 300ms)}
@keyframes w-flujo{0%{opacity:0;transform:translateX(0)}20%{opacity:1}100%{opacity:0;transform:translateX(24px)}}
html.wow .arq .arq-centro.w-e{transform:scale(.98)}
html.wow .arq.w-run .arq-centro.w-e{transform:none;box-shadow:0 0 0 1px rgba(58,143,232,.5),0 0 40px rgba(0,101,203,.25)}

/* ---------- fases: una línea avanza con el scroll y enciende cada fase ---------- */
html.wow .fases{position:relative;padding-top:36px}
html.wow .fases .w-linea{position:absolute;left:0;right:0;top:8px;height:2px;background:var(--linea,#DCE3EB);border-radius:2px}
html.wow .fases .w-linea i{position:absolute;inset:0;background:var(--w-azul);transform-origin:left;transform:scaleX(var(--w-p,0));border-radius:2px}
html.wow .fases .w-nodo{position:absolute;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--linea,#DCE3EB);transition:border-color 200ms var(--w-sale),background-color 200ms var(--w-sale),transform 300ms var(--w-sale)}
html.wow .fases .w-nodo.w-on{border-color:var(--w-azul);background:var(--w-azul);transform:scale(1.25)}
html.wow .fases li{transition:opacity 300ms var(--w-sale),transform 300ms var(--w-sale),border-color 200ms var(--w-sale)}
html.wow .fases.w-vivo li:not(.w-on){opacity:.45;transform:translateY(8px)}
html.wow .fases li.w-on{border-color:var(--w-azul)}
@media (max-width:860px){html.wow .fases{padding-top:0}html.wow .fases .w-linea,html.wow .fases .w-nodo{display:none}html.wow .fases.w-vivo li:not(.w-on){opacity:1;transform:none}}

@media (hover:none){html.wow figure.captura::after{display:none}}

/* 13/10/2026 · Tarjetas de casos: la imagen se acerca un poco al pasar el ratón (propiedad scale, compone con el transform que ya usa el reveal de GSAP). */
.caso .img img{transition:scale 300ms cubic-bezier(.16,1,.3,1)}
@media (hover:hover){.caso:hover .img img{scale:1.04}}
@media (prefers-reduced-motion: reduce){.caso .img img{transition:none}.caso:hover .img img{scale:1}}

/* 13/10/2026 · Tarjeta del caso Bologna FC: fichas de conversión y hitos (aprobada por Enrique; antes llevaba «Resultado pendiente»). */
.b-conv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:6px}.b-n{background:#EAF2FC;border-radius:12px;padding:14px 16px}.b-n b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(2rem,1.5rem + 1.6vw,2.8rem);letter-spacing:-.03em;line-height:1;color:var(--egc-azul);font-variant-numeric:tabular-nums}.b-n span{display:block;margin-top:6px;font-size:.9rem;color:var(--texto-2)}.b-nota{font-size:.82rem;color:var(--texto-2);margin-top:2px}.b-hitos{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}.b-hitos li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:center;font-weight:500}.b-hitos li::before{content:"";width:28px;height:28px;border-radius:8px;background:#EAF2FC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230065CB' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/15px no-repeat}

/* 13/10/2026 · Foto del fundador en «Nosotros» (provisional). */
.persona .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 24%}

/* 14/10/2026 · Foto de «Nosotros» en el móvil: se ve el retrato entero (proporción 3:4) en vez de un recorte de primer plano. En escritorio y tablet no cambia. */
@media (max-width:560px){html .personas .persona .foto{flex:none;min-height:0;aspect-ratio:3/4}.persona .foto img{object-position:50% 0}}

/* 15/10/2026 · «Tres lados de la mesa» antes de las cifras: titular h2 y tres columnas (negocio · plataformas · datos e IA) */
.muro-sec .muro{margin-top:0}
.prueba-cifras{padding-top:0}
.muro-txt h2{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.patas{list-style:none;margin:8px 0 12px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.pata{border-top:3px solid var(--egc-azul);padding-top:20px;display:grid;gap:10px;align-content:start}
.pata-n{font-family:var(--f-display);font-weight:700;font-size:.85rem;line-height:1;letter-spacing:.08em;color:var(--egc-azul)}
.pata h3{font-size:1.3rem;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.pata p{color:var(--texto-2);max-width:24rem}
@media (max-width:860px){.patas{grid-template-columns:minmax(0,1fr);gap:28px}.pata p{max-width:none}}

/* 15/10/2026 · Logo del header, versión bicolor (propuesta 10, elegida por Enrique): isotipo en el azul claro de la web (#3A8FE8) y la palabra «EGC Sport» en blanco,
   sin fondo ni forma. Es una variante nueva fuera de las cuatro de la guía de marca: la aprobó Enrique como excepción para el header. Más grande que antes (30 → 36 px).
   Antes (mismo día): píldora azul #0065CB con el logo blanco, retirada porque «parece un botón» (copia en backups/20261015_antes_logo_bicolor/motion.css).
   Para volver al logo blanco de siempre, borrar este bloque. El isotipo son los tres primeros trazados del SVG (hijos directos del primer <g>); la palabra va en un <g> anidado. */
.cab .logo{align-items:center}
.cab .logo svg{height:36px}
.cab .logo svg>g>path{fill:var(--egc-azul-luz);transition:fill 150ms cubic-bezier(.16,1,.3,1)}
@media (hover:hover){.cab .logo:hover svg>g>path{fill:#8CC2FF}}
@media (max-width:520px){.cab .logo svg{height:30px}}

/* ===== LOGO_3D_V1 · 15/10/2026 · logo del header en relieve (propuesta C). El JS de motion.js (bloque LOGO_3D_V1) monta .l3 y pone html.l3-on solo con pantalla de 961 px o más y sin «reducir movimiento».
   El SVG original se queda (invisible) para fijar el tamaño del enlace, el lector de pantalla y la intro. Para quitarlo: borrar este bloque y el de motion.js. ===== */
html.l3-on .cab .logo{position:relative;--l3-w:clamp(168px,16vw,228px)}
html.l3-on .cab .logo>svg{width:var(--l3-w);height:auto;opacity:0}
.l3{position:absolute;inset:0;perspective:620px;pointer-events:none}
.l3-f,.l3-t{position:absolute;inset:0;transform-style:preserve-3d}
.l3-t{will-change:transform}
.cab .logo .l3-c{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;display:block}
.cab .logo .l3-defs{position:absolute;width:0;height:0}
.l3-pool{position:absolute;left:6%;top:88%;width:88%;height:62%;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(58,143,232,.5),rgba(0,101,203,.16) 55%,rgba(0,87,173,0) 72%);transition:opacity 300ms cubic-bezier(.16,1,.3,1)}
.l3-sc .l3-pool{opacity:0}
/* ===== fin LOGO_3D_V1 ===== */

/* ===== ARMONIA_V1 · 26/10/2026 · un solo lenguaje de entrada para la portada: 700 ms, ease-out, 22 px, una sola vez (SmartVenue AI ya lo tiene en html.wow). Se apaga con prefers-reduced-motion y ?estatico. Para quitarlo: borrar este bloque y el de motion.js. ===== */
html.arm .a-rev{opacity:0;transform:translateY(22px);transition:opacity 700ms cubic-bezier(.16,1,.3,1),transform 700ms cubic-bezier(.16,1,.3,1);transition-delay:var(--a-d,0ms)}
html.arm .a-rev.a-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.arm .a-rev{opacity:1;transform:none;transition:none}}