:root{--bg:#0b0716;--ink:#f4efff;--soft:#b9aed6;--a:#8b5cf6;--b:#ec4899;--c:#22d3ee}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--bg);color:var(--ink);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{overflow:hidden}
.esc{position:relative;min-height:100%;display:grid;place-items:center;padding:16px;isolation:isolate}
.aur{position:fixed;inset:0;z-index:-1;overflow:hidden;filter:blur(60px) saturate(1.2)}
.aur i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;opacity:.35;animation:flota 18s ease-in-out infinite alternate}
.aur i:nth-child(1){background:var(--a);left:-15vmax;top:-20vmax}
.aur i:nth-child(2){background:var(--b);right:-20vmax;bottom:-25vmax;animation-delay:-6s}
.aur i:nth-child(3){background:var(--c);left:30%;top:40%;width:35vmax;height:35vmax;opacity:.18;animation-delay:-12s}
@keyframes flota{to{transform:translate(8vmax,6vmax) scale(1.15)}}
.mar{position:relative;width:min(1100px,100%);aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#000;
  box-shadow:0 0 0 1px #ffffff22,0 30px 90px -20px #8b5cf699;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .8s}
.mar video{width:100%;height:100%;object-fit:cover;display:block}
.saltar{position:absolute;right:14px;bottom:14px;border:1px solid #ffffff40;background:#0b0716aa;color:var(--ink);border-radius:999px;padding:8px 16px;font:inherit;font-size:14px;cursor:pointer;backdrop-filter:blur(8px)}
.saltar:hover,.saltar:focus-visible{background:#ffffff22;outline:none}
.final{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:18px;text-align:center;padding:16px;pointer-events:none;opacity:0}
.fin .mar{opacity:0;transform:scale(.92);filter:blur(12px)}
.fin .final{pointer-events:auto;opacity:1}
.ante{color:var(--soft);letter-spacing:.2em;text-transform:uppercase;font-size:13px;opacity:0;transform:translateY(14px)}
.final h1{font-size:clamp(34px,7vw,76px);line-height:1.02;font-weight:800;letter-spacing:-.02em}
.final h1 span,.final h1 b{display:inline-block;opacity:0;transform:translateY(30px) rotate(2deg)}
.final h1 b{background:linear-gradient(90deg,var(--a),var(--b),var(--c),var(--a));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.ir{position:relative;display:inline-flex;align-items:center;gap:12px;padding:18px 30px;border-radius:999px;color:#fff;text-decoration:none;font-weight:700;font-size:clamp(18px,3vw,24px);
  background:linear-gradient(90deg,var(--a),var(--b));box-shadow:0 12px 40px -8px #ec489999;opacity:0;transform:scale(.6);transition:box-shadow .3s,transform .3s}
.ir::before{content:"";position:absolute;inset:-3px;border-radius:inherit;background:conic-gradient(from var(--g,0deg),var(--c),var(--a),var(--b),var(--c));z-index:-1;filter:blur(10px);opacity:.8}
.ir svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.ir:hover svg,.ir:focus-visible svg{transform:translateX(5px)}
.ir:hover,.ir:focus-visible{outline:none;box-shadow:0 16px 60px -6px #ec4899cc}
.otra{border:0;background:none;color:var(--soft);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;opacity:0}
.fin .ante{animation:sube .7s .1s ease forwards}
.fin .final h1 span{animation:sube .8s .25s cubic-bezier(.2,.8,.2,1) forwards}
.fin .final h1 b{animation:sube .8s .45s cubic-bezier(.2,.8,.2,1) forwards,brillo 6s 1.2s linear infinite}
.fin .ir{animation:pop .7s .8s cubic-bezier(.3,1.6,.5,1) forwards,late 2.4s 1.6s ease-in-out infinite}
.fin .ir::before{animation:gira 4s linear infinite}
.fin .otra{animation:sube .6s 1.4s ease forwards}
@keyframes sube{to{opacity:1;transform:none}}
@keyframes pop{to{opacity:1;transform:scale(1)}}
@keyframes late{50%{transform:scale(1.04)}}
@keyframes brillo{to{background-position:300% 0}}
@property --g{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes gira{to{--g:360deg}}
.nos{position:fixed;bottom:16px;left:0;right:0;text-align:center}.nos a{color:var(--ink)}
@media (max-width:640px){.mar{border-radius:16px}.saltar{right:8px;bottom:8px;padding:6px 12px}}
@media (prefers-reduced-motion:reduce){*,*::before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}