/* Portada impacto V1 — William Jhoel Creative Studio */
#fx{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%;opacity:.9}
.aurora{position:fixed;inset:-20%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.55;background:radial-gradient(40% 35% at 20% 25%,rgba(217,173,76,.35),transparent 70%),radial-gradient(35% 30% at 80% 20%,rgba(255,200,90,.22),transparent 70%),radial-gradient(45% 40% at 60% 85%,rgba(147,102,19,.35),transparent 70%);animation:aur 16s ease-in-out infinite alternate}
@keyframes aur{to{transform:translate3d(3%,-2%,0) scale(1.08) rotate(2deg)}}
.hero{min-height:min(78vh,720px)}
.hero .copy>*{opacity:0;transform:translateY(22px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero .copy>:nth-child(1){animation-delay:.05s}.hero .copy>:nth-child(2){animation-delay:.15s}.hero .copy>:nth-child(3){animation-delay:.28s}.hero .copy>:nth-child(4){animation-delay:.4s}.hero .copy>:nth-child(5){animation-delay:.52s}.hero .copy>:nth-child(6){animation-delay:.64s}
@keyframes rise{to{opacity:1;transform:none}}
.live-tag{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;border:1px solid rgba(217,173,76,.45);background:rgba(217,173,76,.08);color:#f3d88f;font-size:11px;font-weight:800;letter-spacing:.14em}
.live-tag i{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.hero h1 .gold{background-size:220% 100%;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:-220% 0}}
.rotator{margin:22px 0 0;font-size:clamp(16px,1.7vw,24px);font-weight:800;letter-spacing:.04em;color:#e9ecf2;min-height:1.5em}
.rotator b{color:#ffdd7f;border-right:2px solid #d9ad4c;padding-right:4px;animation:caret .8s steps(1) infinite}
@keyframes caret{50%{border-color:transparent}}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;padding:17px 28px;border-radius:999px;font-weight:900;font-size:12px;letter-spacing:.1em;text-decoration:none;transition:transform .25s,box-shadow .25s}
.cta.primary{color:#111;background:linear-gradient(135deg,#fff0b9,#d9ad4c 55%,#b98a2b);box-shadow:0 14px 40px rgba(217,173,76,.35)}
.cta.primary:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:sweep 3.2s ease-in-out infinite}
@keyframes sweep{60%,100%{left:130%}}
.cta.ghost{color:#f5db8d;border:1px solid rgba(217,173,76,.6);background:rgba(8,11,16,.6);backdrop-filter:blur(10px)}
.cta:hover{transform:translateY(-3px) scale(1.02)}.cta.primary:hover{box-shadow:0 18px 55px rgba(217,173,76,.5)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chips span{padding:8px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);font-size:11px;font-weight:700;color:#c9ced8;backdrop-filter:blur(8px)}
.chips span:before{content:"✓";color:#d9ad4c;margin-right:7px;font-weight:900}
.visual{transform-style:preserve-3d;transition:transform .15s ease-out;will-change:transform;animation:rise 1s .2s both}
.float{position:absolute;z-index:5;padding:11px 15px;border-radius:14px;border:1px solid rgba(217,173,76,.4);background:rgba(10,13,19,.72);backdrop-filter:blur(14px);box-shadow:0 18px 40px rgba(0,0,0,.5);font-size:11px;font-weight:800;color:#f3d88f;letter-spacing:.06em;animation:bob 5s ease-in-out infinite}
.float.f1{left:14px;top:26px}.float.f2{right:16px;bottom:34px;animation-delay:-2s}.float.f3{left:22px;bottom:70px;animation-delay:-3.5s}
@keyframes bob{50%{transform:translateY(-10px)}}
.marquee{width:min(1440px,100%);margin:34px auto 6px;overflow:hidden;border-block:1px solid rgba(217,173,76,.22);padding:15px 0;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee div{display:flex;gap:46px;width:max-content;animation:scroll 28s linear infinite;font-weight:900;font-size:13px;letter-spacing:.24em;color:rgba(243,216,143,.85)}
.marquee em{font-style:normal;color:#d9ad4c}
@keyframes scroll{to{transform:translateX(-50%)}}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}.reveal.in{opacity:1;transform:none}
.services .option{transition:transform .3s,box-shadow .3s,border-color .3s}.services .option:hover{transform:translateY(-6px);border-color:rgba(217,173,76,.7);box-shadow:0 22px 55px rgba(0,0,0,.5),0 0 40px rgba(217,173,76,.15)}
@media(max-width:900px){.float{display:none}.cta{flex:1 1 100%;justify-content:center}.hero{min-height:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.hero .copy>*,.reveal{opacity:1;transform:none}}