/* ===== Home · capa de cine 2 (ventajas, rollos, neón, obra, mente, gratitud, pantallas) ===== */
/* 1 · ventajas como créditos de película */
#home #ventajas.x2{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px);overflow:hidden}
#home #ventajas.x2::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 20%,rgba(255,255,255,.08) 80%,transparent);pointer-events:none}
#home #ventajas.x2::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.05),transparent);animation:x2sweep 7s ease-in-out infinite;pointer-events:none}
@keyframes x2sweep{0%,40%{left:-40%}100%{left:120%}}
#home #ventajas.x2>div{position:relative;display:grid;justify-items:center;align-content:start;gap:4px;padding:0 clamp(10px,2vw,28px)!important;opacity:0;translate:0 26px;transition:opacity 1s cubic-bezier(.2,.7,.2,1) var(--d,0s),translate 1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
#home #ventajas.x2.in>div{opacity:1;translate:0 0}
#home #ventajas.x2>div+div::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;background:linear-gradient(transparent,rgba(255,255,255,.14),transparent)}
#home #ventajas.x2 .x2-n{font:500 10.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.22em;color:#6f6f6f;margin-bottom:14px}
#home #ventajas.x2 .x2-ic{position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.07),transparent 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:box-shadow .5s,background .5s,transform .6s cubic-bezier(.2,.8,.2,1.3)}
#home #ventajas.x2 .x2-ic svg{width:30px;height:30px;fill:none;stroke:#f2f2f2;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
#home #ventajas.x2 .x2-ic svg *{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1.6s cubic-bezier(.6,.1,.3,1) calc(var(--d,0s) + .3s)}
#home #ventajas.x2.in .x2-ic svg *{stroke-dashoffset:0}
#home #ventajas.x2 .x2-ic::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid transparent;border-top-color:rgba(223,26,37,.8);border-right-color:rgba(223,26,37,.25);animation:x2rot 6s linear infinite;opacity:.0;transition:opacity .5s}
#home #ventajas.x2.in .x2-ic::after{opacity:.9}
@keyframes x2rot{to{transform:rotate(360deg)}}
#home #ventajas.x2>div:hover .x2-ic{transform:translateY(-4px) scale(1.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 18px 40px -18px rgba(223,26,37,.7);background:radial-gradient(circle at 50% 35%,rgba(223,26,37,.25),transparent 70%)}
#home #ventajas.x2>div>b{font-size:clamp(21px,1.9vw,29px)!important;letter-spacing:-.01em}
#home #ventajas.x2>div>span{font-size:14.5px}
@media (max-width:760px){#home #ventajas.x2{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}#home #ventajas.x2>div:nth-child(3)::before{display:none}#home #ventajas.x2::before{display:none}#home #ventajas.x2>div>b{white-space:normal!important}}

/* 2 · rollos de película que se mueven */
#home .tr-intro{position:relative}
#home .x2-reels{position:absolute;inset:-40px 0 -20px;pointer-events:none;z-index:0}
#home .tr-intro>h2,#home .tr-intro>p{position:relative;z-index:1}
#home .x2-reel{position:absolute;top:50%;width:clamp(120px,15vw,230px);aspect-ratio:1;margin-top:calc(clamp(120px,15vw,230px) / -2);pointer-events:auto;cursor:grab;touch-action:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.8));transition:filter .4s}
#home .x2-reel:active{cursor:grabbing}
#home .x2-reel:hover{filter:drop-shadow(0 30px 40px rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(223,26,37,.35))}
#home .x2-reel.l{left:max(8px,2vw)}#home .x2-reel.r{right:max(8px,2vw)}
#home .x2-reel svg{width:100%;height:100%;display:block;will-change:transform}
#home .x2-strip{position:absolute;left:0;right:0;top:50%;height:clamp(54px,6vw,84px);margin-top:calc(clamp(54px,6vw,84px) / -2);z-index:0;overflow:hidden;opacity:.17;-webkit-mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);transform:rotate(-3deg)}
#home .x2-strip i{position:absolute;inset:0;display:flex;gap:0;width:max-content;will-change:transform}
#home .x2-strip b{flex:none;width:clamp(80px,8vw,120px);height:100%;border-inline:3px solid #0a0a0a;background:#151515 center/cover;filter:grayscale(.3) contrast(1.1);box-shadow:inset 0 9px 0 #0a0a0a,inset 0 -9px 0 #0a0a0a}
#home .x2-strip b::before,#home .x2-strip b::after{content:"";position:absolute;left:0;right:0;height:9px;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(255,255,255,.55) 6px 11px,transparent 11px 16px);top:0}
#home .x2-strip b{position:relative}
#home .x2-strip b::after{top:auto;bottom:0}
#home .x2-hint{display:block;margin-top:14px;font:500 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.22em;text-transform:uppercase;color:#5f5f5f}
@media (max-width:900px){#home .x2-reel{width:92px;margin-top:-46px;top:auto;bottom:-96px}#home .x2-reel.l{left:6px}#home .x2-reel.r{right:6px}#home .tr-intro{margin-bottom:110px}}

/* 3 · neón con los colores de cada portada */
#home .trending .x2-glow{position:absolute;left:0;right:0;bottom:0;height:78%;z-index:0;pointer-events:none;opacity:0;transition:opacity .7s,background .7s;background:radial-gradient(40% 60% at var(--gx,50%) 62%,var(--g1,rgba(255,255,255,.2)),transparent 70%),radial-gradient(30% 45% at calc(var(--gx,50%) + 8%) 70%,var(--g2,rgba(255,255,255,.1)),transparent 70%);filter:blur(30px)}
#home .trending.x2-lit .x2-glow{opacity:1}
#home .trending>.wrap,#home .tr-track{position:relative;z-index:1}
#home .tr-item .poster{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
#home .tr-item.x2-on .poster{box-shadow:0 0 0 1px var(--n1,#fff),0 0 26px 2px var(--n1,#fff),0 0 70px 10px var(--n2,rgba(255,255,255,.4)),0 40px 80px -30px #000}
#home .trending.x2-lit .tr-item:not(.x2-on) .poster{filter:brightness(.55) saturate(.7)}
#home .tr-item .poster{filter:none;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,filter .5s}

/* 4 · próximamente en obra */
#home .proximamente .px-card{position:relative;overflow:hidden}
#home .x2-tape{position:absolute;z-index:4;left:-30%;right:-30%;top:80%;height:26px;transform:rotate(-9deg);background:repeating-linear-gradient(45deg,#f2c230 0 18px,#141414 18px 36px);box-shadow:0 8px 24px rgba(0,0,0,.6);display:grid;place-items:center;pointer-events:none;translate:-110% 0;transition:translate .9s cubic-bezier(.2,.8,.2,1)}
#home .x2-tape span{font:800 11px/1 Jost,Arial,sans-serif;letter-spacing:.3em;color:#141414;background:#f2c230;padding:5px 10px;border-radius:2px}
#home .x2-tape.b{top:90%;transform:rotate(6deg);translate:110% 0;transition-delay:.15s}
#home .px-item.x2-on .x2-tape{translate:0 0}
#home .x2-work{position:absolute;z-index:3;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(55% 40% at 50% 0%,rgba(255,214,120,.45),transparent 70%)}
#home .px-item.x2-on .x2-work{opacity:1;animation:x2flick 2.8s steps(1) infinite}
@keyframes x2flick{0%,100%{opacity:1}7%{opacity:.35}9%{opacity:1}52%{opacity:.85}54%{opacity:.4}56%{opacity:1}}
#home .x2-spark{position:absolute;z-index:5;width:3px;height:3px;border-radius:50%;background:#ffd27a;box-shadow:0 0 6px 2px rgba(255,190,80,.9);pointer-events:none}
#home .px-item .px-card{transition:box-shadow .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
#home .px-item.x2-on .px-card{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(242,194,48,.6),0 0 50px 4px rgba(242,194,48,.25),0 40px 80px -30px #000}
#home .x2-helmet{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font:600 10.5px/1 Jost,Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#f2c230}
#home .x2-helmet i{width:8px;height:8px;border-radius:50%;background:#f2c230;box-shadow:0 0 10px #f2c230;animation:x2blink 1.2s infinite}
@keyframes x2blink{50%{opacity:.2}}

/* 5 · el conocimiento: red neuronal */
#home #profesores{position:relative;overflow-x:clip}
#home #profesores .x2-mind{position:absolute;left:0;right:0;top:-40px;height:min(560px,70vh);z-index:0;pointer-events:none;-webkit-mask:radial-gradient(60% 60% at 50% 40%,#000,transparent 75%);mask:radial-gradient(60% 60% at 50% 40%,#000,transparent 75%);opacity:.9}
#home #profesores>.wrap,#home #profesores .teachers{position:relative;z-index:1}
#home .prof-head .x2-k{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;font:500 10.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.24em;text-transform:uppercase;color:#8a8a8a}
#home .prof-head .x2-k i{width:22px;height:1px;background:linear-gradient(90deg,transparent,#df1a25)}
#home .prof-head .x2-k i:last-child{background:linear-gradient(90deg,#df1a25,transparent)}

/* 6 · gratitud */
#home #experiencias{position:relative}
#home .x2-thanks{display:block;width:min(360px,70vw);height:auto;margin:0 auto 10px;overflow:visible}
#home .x2-thanks text{font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:300;font-size:64px;fill:transparent;stroke:rgba(255,255,255,.55);stroke-width:.8;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 3.2s cubic-bezier(.6,.1,.3,1),fill 1.6s 2.4s}
#home .x2-thanks.in text{stroke-dashoffset:0;fill:rgba(255,255,255,.08)}
#home .x2-thanks path{fill:none;stroke:#df1a25;stroke-width:1.4;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.6s 2s cubic-bezier(.6,.1,.3,1)}
#home .x2-thanks.in path{stroke-dashoffset:0}
#home .x2-motes{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
#home .x2-motes i{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:rgba(255,214,170,.7);box-shadow:0 0 8px rgba(255,190,140,.8);animation:x2mote linear infinite}
@keyframes x2mote{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:.8}100%{transform:translateY(-640px) translateX(30px);opacity:0}}
#home #experiencias>.xp-wrap{position:relative;z-index:1}

/* 7 · pantallas vivas */
#home .x2-cur{position:absolute;z-index:9;left:0;top:0;width:14px;height:14px;pointer-events:none;transition:transform 1.1s cubic-bezier(.6,.05,.2,1)}
#home .x2-cur svg{width:14px;height:14px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
#home .x2-cur.click::after{content:"";position:absolute;left:-6px;top:-6px;width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);animation:x2click .5s ease-out forwards}
@keyframes x2click{from{transform:scale(.3);opacity:1}to{transform:scale(1.4);opacity:0}}
#home .dv-scene .x2-press{animation:x2press .45s ease}
@keyframes x2press{50%{transform:scale(.94);filter:brightness(1.4)}}
#home .dv-scene .p-bar i,#home .dv-scene .l-prog b i{transition:width .5s linear}
#home .dv-scene .p-list li{transition:background .4s,color .4s}
@media (prefers-reduced-motion:reduce){#home .x2-strip,#home .x2-motes,#home .x2-mind{display:none}#home #ventajas.x2>div{opacity:1;translate:none}}

/* pulido 24-10: la red neuronal no pisa el titular */
#home #profesores .x2-mind{-webkit-mask:linear-gradient(180deg,transparent 44%,#000 72%,transparent 100%);mask:linear-gradient(180deg,transparent 44%,#000 72%,transparent 100%);opacity:.65}