/* ---------- Pantalla de entrada con la L dibujándose ---------- */
#splash{position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;gap:1rem;background:#000;color:#fff;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);animation:splashOut .7s 2.2s cubic-bezier(.7,0,.2,1) forwards}
#splash::before{content:"";position:absolute;inset:0;background:var(--red);clip-path:polygon(-10% 0,0 0,-20% 100%,-30% 100%);animation:splashRed 1.2s .2s cubic-bezier(.7,0,.2,1) both}
#splash svg{position:relative;width:min(9rem,30vw);overflow:visible}
#splash .L{fill:none;stroke:#fff;stroke-width:1.2;stroke-linejoin:round;stroke-dasharray:200;stroke-dashoffset:200;animation:drawL 1s .3s ease forwards,fillL .4s 1.2s forwards}
#splash p{position:relative;margin:0;font:italic 500 1.4rem var(--display);letter-spacing:.02em;animation:rise .8s 1s both}
#splash.out{clip-path:polygon(0 0,100% 0,100% 0,0 0);transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
@keyframes drawL{to{stroke-dashoffset:0}}
@keyframes fillL{to{fill:#fff}}
@keyframes splashRed{50%{clip-path:polygon(0 0,100% 0,80% 100%,0 100%)}to{clip-path:polygon(110% 0,120% 0,100% 100%,90% 100%)}}
@keyframes splashOut{to{clip-path:polygon(0 0,100% 0,100% 0,0 0);visibility:hidden}}

/* ---------- Transición entre páginas, progreso y accesibilidad ---------- */
#wipe{position:fixed;inset:-10%;z-index:150;background:var(--red);pointer-events:none;transform:translateX(-130%) skewX(-20deg)}
#wipe.go{animation:wipe .8s cubic-bezier(.7,0,.2,1)}
@keyframes wipe{0%{transform:translateX(-130%) skewX(-20deg)}50%{transform:translateX(0) skewX(-20deg)}100%{transform:translateX(130%) skewX(-20deg)}}
#prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:var(--red);transform-origin:0 50%;transform:scaleX(0)}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:1rem;top:1rem;z-index:300}
#view:focus{outline:0}
html{scrollbar-color:var(--red) var(--black)}

/* ---------- Grano de película y logo ---------- */
body::after{content:"";position:fixed;inset:-10%;z-index:999;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.7'/></svg>");animation:grain 1s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(3%,3%)}}
.brand{display:inline-flex;align-items:center;gap:.6rem}
.logo{width:2rem;height:2rem;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.brand:hover .logo{transform:rotate(-8deg) scale(1.12)}
#gear{padding:.4rem .7rem;display:inline-grid;place-items:center}

/* ---------- Hero: palabras que entran y parallax con el cursor ---------- */
.wd{display:inline-block;animation:wd .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * .09s + .15s)}
@keyframes wd{from{opacity:0;transform:translateY(60%) skewY(6deg);filter:blur(6px)}}
.hero::before{translate:calc(var(--mx,0) * -40px) calc(-50% + var(--my,0) * -20px)}
.spot{translate:calc(var(--mx,0) * -12px) calc(var(--my,0) * -8px)}
.bg .d1{translate:calc(var(--mx,0) * 40px) calc(var(--my,0) * 30px)}
.bg .d2{translate:calc(var(--mx,0) * -30px) calc(var(--my,0) * 24px)}
.bg .d3{translate:calc(var(--mx,0) * 20px) calc(var(--my,0) * -30px)}
.pj a:hover{transform:perspective(800px) translateX(.6rem) rotateY(calc(var(--tx,0) * 7deg)) rotateX(calc(var(--ty,0) * -6deg))}
.news a:hover{transform:perspective(800px) translateY(-.4rem) rotateY(calc(var(--tx,0) * 7deg)) rotateX(calc(var(--ty,0) * -6deg))}
.pj a:hover h3,.news a:hover h3{color:#fff}.news a:hover p{color:#e3d3c1}

/* ---------- Estadísticas ---------- */
.stats{padding-block:2.5rem}
.stats ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:0 2rem;border-block:1px solid var(--edge)}
.stats li{padding:2rem 0}
.stats b{display:block;font:italic 500 clamp(3rem,7vw,5.5rem)/1 var(--display);font-variant-numeric:tabular-nums}
.stats span{font:italic 700 1rem var(--tag);text-transform:uppercase;letter-spacing:.08em;color:var(--red-l)}

/* ---------- Entradas: detalles ---------- */
.rt{display:block;margin-top:.5rem;color:var(--muted);font-weight:600}
.newb{display:inline-block;margin:.6rem 0 0 .5rem;padding:0 .7rem;background:var(--text);color:var(--on-text);font:italic 800 .85rem var(--tag);text-transform:uppercase;letter-spacing:.06em;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);animation:blink 1.8s ease-in-out infinite}
@keyframes blink{50%{opacity:.55}}
.body img{cursor:zoom-in;transition:transform .3s,filter .3s}.body img:hover{transform:scale(1.01);filter:brightness(1.08)}
.body a{text-decoration-thickness:2px;text-underline-offset:.2em}
#lb{width:min(70rem,96vw);padding:0;background:#000;border:0;overflow:visible}
#lb img{display:block;width:100%;max-height:90vh;object-fit:contain}
#lb .x{position:absolute;top:.6rem;right:.6rem;font-size:1.3rem;line-height:1}

/* ---------- Esqueleto de carga ---------- */
.skel{display:grid;gap:1.25rem;padding-block:6rem}
.skel i{display:block;height:3.2rem;background:linear-gradient(90deg,var(--line),var(--edge),var(--line)) 0 0/200% 100%;animation:shimmer 1.3s linear infinite;clip-path:polygon(0 0,100% 0,98% 100%,0 100%)}
.skel i:nth-child(1){width:70%;height:6rem}.skel i:nth-child(2){width:45%}.skel i:nth-child(3){width:60%}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- Reproductor de música ---------- */
.player{position:fixed;left:1rem;bottom:1rem;z-index:40;display:flex;align-items:center;gap:.7rem;max-width:3.6rem;overflow:hidden;padding:.4rem .7rem .4rem .6rem;background:var(--panel);border:1px solid var(--edge);border-left:5px solid var(--red);clip-path:polygon(0 0,100% 0,96% 100%,0 100%);transition:max-width .5s cubic-bezier(.2,.8,.2,1)}
.player:hover,.player:focus-within{max-width:24rem}
.player button{flex:none;width:2.2rem;height:2.2rem;padding:0;display:grid;place-items:center;border-radius:50%;clip-path:none}
.player svg{width:1rem;height:1rem;fill:currentColor}
.player .pa,.player.on .pp{display:none}.player.on .pa{display:block}
.eq{display:flex;align-items:flex-end;gap:2px;height:1.3rem}.eq i{width:3px;height:25%;background:var(--red)}
.player.on .eq i{animation:eq .9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}.eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{50%{height:100%}}
.mi{white-space:nowrap;line-height:1.15}.mi b{display:block;font:italic 500 1.05rem var(--display)}.mi small{color:var(--muted)}
.player input,.pvol{width:6.5rem;margin:0;padding:0;border:0;background:none;accent-color:var(--red)}

/* ---------- Aviso de cookies ---------- */
.ck{position:fixed;right:1rem;bottom:1rem;z-index:90;width:min(26rem,calc(100vw - 2rem));padding:1.25rem 1.4rem;background:var(--panel);border:1px solid var(--edge);border-top:5px solid var(--red);box-shadow:0 1rem 3rem rgba(0,0,0,.35);animation:ckin .6s cubic-bezier(.2,.8,.2,1)}
.ck[hidden]{display:none}
.ck h3{font:italic 500 1.6rem var(--display);margin:0 0 .4rem}
.ck p{margin:0 0 1rem;font-size:.95rem;color:var(--muted)}
.ck .row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
@keyframes ckin{from{opacity:0;transform:translateY(2rem) skewX(-4deg)}}

/* ---------- Avisos, volver arriba y ajustes ---------- */
#toasts{position:fixed;left:50%;bottom:1.5rem;translate:-50% 0;z-index:300;display:grid;gap:.5rem;justify-items:center}
.toast{padding:.55rem 1.6rem;background:var(--text);color:var(--on-text);font:italic 700 1rem var(--tag);text-transform:uppercase;letter-spacing:.05em;clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);animation:toastin .4s cubic-bezier(.2,.8,.2,1);transition:opacity .4s,transform .4s}
.toast.out{opacity:0;transform:translateY(.6rem)}
@keyframes toastin{from{opacity:0;transform:translateY(1rem) skewX(-6deg)}}
#totop{position:fixed;right:1rem;bottom:1rem;z-index:35;width:2.8rem;height:2.8rem;padding:0;display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(1rem);transition:opacity .3s,transform .3s,background .2s,color .2s}
#totop.show{opacity:1;pointer-events:auto;transform:none}
.pr{margin-bottom:1.25rem}.pr label{display:block;margin-bottom:.4rem}
.seg{display:inline-flex;flex-wrap:wrap;gap:.3rem;margin-right:1rem}
.seg button{padding:.25rem 1rem;font-size:.9rem}
.f-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center}

/* ---------- Términos con índice ---------- */
.terms2{display:grid;grid-template-columns:16rem 1fr;gap:3rem;padding-block:4rem}
.toc{position:sticky;top:5.5rem;align-self:start}
.toc ol{margin:0;padding-left:1.2rem}.toc li{margin:.55rem 0}
.tdoc h1{font:italic 500 clamp(2.6rem,6vw,4.5rem)/1 var(--display);margin-bottom:.75rem}
.tsec{padding:1.5rem 0;border-top:1px solid var(--line);scroll-margin-top:6rem}
.tsec h2{font-size:1.9rem;margin-bottom:.6rem}.tsec h2::after{display:none}
.tsec p{max-width:44rem}

@media (max-width:860px){.terms2{grid-template-columns:1fr;gap:1rem}.toc{position:static}}
@media (max-width:600px){.ck{left:1rem;right:1rem;width:auto;bottom:4.6rem}.player{bottom:1rem}}