html,body{overflow-anchor:none}
.hero,.hero *{overflow-anchor:none}
/* ================= ANIMACIONES Y EFECTOS ================= */

main{overflow-x:clip}

/* Barra de progreso de lectura */
.progress{position:fixed;top:0;left:0;height:4px;width:100%;z-index:70;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--sun),var(--ember),var(--sun));background-size:200% 100%;animation:flow 3s linear infinite}
@keyframes flow{to{background-position:-200% 0}}

/* Barra superior al hacer scroll */
.topbar{transition:padding .25s,background .25s,box-shadow .25s}
.topbar.scrolled{padding-block:5px;background:rgba(27,17,10,.97);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.brand-mark{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.brand:hover .brand-mark{transform:rotate(-12deg) scale(1.15)}
.nav a:not(.btn){position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:3px;border-radius:2px;background:var(--sun);transition:right .3s}
.nav a:not(.btn):hover::after,.nav a.active::after{right:0}
.nav a.active{color:var(--sun)}

/* Hero: entrada escalonada */
.hero-inner>*{opacity:0;animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero-inner>*:nth-child(1){animation-delay:.15s}
.hero-inner>*:nth-child(2){animation-delay:.35s}
.hero-inner>*:nth-child(3){animation-delay:.6s}
.hero-inner>*:nth-child(4){animation-delay:.8s}
.hero-inner>*:nth-child(5){animation-delay:1s}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.hero h1 span{background:linear-gradient(90deg,var(--sun),#fff0b8,var(--ember),var(--sun));background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:shine-text 5s linear infinite;text-shadow:none}
@keyframes shine-text{to{background-position:-250% 0}}
.kicker{animation:glow 2.8s 1.2s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(240,162,26,.55)}50%{box-shadow:0 0 0 10px rgba(240,162,26,0)}}

/* Hero: paisaje vivo */
.hero-art{will-change:transform}
.hero-art .l1,.hero-art .l2,.hero-art .l3,.hero-art .palms,.hero-art .rider{transition:transform .1s linear;transform:translate(var(--px,0),var(--py,0))}
.sun-halo{transform-box:fill-box;transform-origin:center;animation:halo 5s ease-in-out infinite}
.sun-core{transform-box:fill-box;transform-origin:center;animation:sunrise 2.2s cubic-bezier(.2,.8,.2,1) both,sunpulse 5s 2.2s ease-in-out infinite}
@keyframes halo{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:1}}
@keyframes sunrise{from{transform:translateY(90px);opacity:0}to{transform:none;opacity:1}}
@keyframes sunpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.rider{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -4px}}
.bird{animation:fly 26s linear infinite;opacity:0}
.b1{transform:translate(-80px,170px)}
.b2{transform:translate(-80px,120px);animation-duration:34s;animation-delay:-12s}
.b3{transform:translate(-80px,220px);animation-duration:40s;animation-delay:-22s}
@keyframes fly{0%{translate:0 0;opacity:0}6%{opacity:1}50%{translate:760px -40px}94%{opacity:1}100%{translate:1560px 10px;opacity:0}}

/* Notas musicales flotando */
.notes{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.notes span{position:absolute;bottom:-40px;color:rgba(255,226,150,.75);animation:note linear infinite;text-shadow:0 0 12px rgba(240,162,26,.8)}
@keyframes note{0%{transform:translateY(0) rotate(0) scale(.7);opacity:0}12%{opacity:1}100%{transform:translateY(-110vh) translateX(var(--dx,30px)) rotate(var(--rot,25deg)) scale(1.1);opacity:0}}

/* Marquesina */
.marquee{background:var(--sun);color:var(--night);overflow:hidden;white-space:nowrap;padding:12px 0;font-family:var(--title);font-size:1.05rem;transform:rotate(-1deg) scale(1.02);margin-block:-8px;position:relative;z-index:2;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.marquee-track{display:inline-flex;animation:marq 34s linear infinite}
.marquee span{padding-inline:22px}
.marquee span::after{content:"✦";margin-left:44px;color:var(--ember)}
@keyframes marq{to{transform:translateX(-50%)}}

/* Botones */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:sweep 3.6s ease-in-out infinite;z-index:-1}
@keyframes sweep{0%,55%{left:-70%}100%{left:130%}}
.btn:active{transform:scale(.96)}
.btn-wa:hover{box-shadow:0 12px 30px rgba(31,168,85,.6)}
.hero-cta .btn-wa,.final .btn-wa{animation:beat 2.4s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}8%{transform:scale(1.06)}16%{transform:scale(1)}24%{transform:scale(1.04)}32%{transform:scale(1)}}
.btn-wa svg{animation:ring 3.6s ease-in-out infinite;transform-origin:50% 0}
@keyframes ring{0%,60%,100%{rotate:0deg}65%{rotate:-14deg}70%{rotate:12deg}75%{rotate:-10deg}80%{rotate:8deg}85%{rotate:0deg}}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:ripple .6s ease-out forwards;pointer-events:none;z-index:-1}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* Tarjetas */
.card,.g,.step{transition:transform .25s ease,box-shadow .25s ease,border-color .25s,opacity .7s}
.card{will-change:transform;position:relative}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(240,162,26,.25),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover::after{opacity:1}
.card:hover{box-shadow:0 20px 44px rgba(27,17,10,.28)}
.card .ico{display:inline-block;transition:transform .4s cubic-bezier(.3,1.8,.5,1)}
.card:hover .ico{transform:scale(1.3) rotate(-10deg)}
.g:hover{transform:translateY(-6px);border-color:var(--sun);background:rgba(240,162,26,.12)}
.g-num{animation:float 3.4s ease-in-out infinite}
.g:nth-child(2) .g-num{animation-delay:.4s}.g:nth-child(3) .g-num{animation-delay:.8s}.g:nth-child(4) .g-num{animation-delay:1.2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.step:hover{transform:translateY(-6px) rotate(-.6deg)}
.step .n{transition:transform .4s cubic-bezier(.3,1.8,.5,1)}
.step:hover .n{transform:scale(1.2) rotate(360deg);transition-duration:.7s}
.steps .step::after{content:"";position:absolute;top:48px;left:calc(100% - 4px);width:30px;border-top:3px dashed var(--sun);opacity:.8}
.steps .step:last-child::after{display:none}

/* Estadísticas */
.stat b{display:block;width:fit-content;margin-inline:auto;transition:transform .3s}
.stat:hover b{transform:scale(1.15) rotate(-3deg)}

/* Video */
.yt{transition:transform .3s,box-shadow .3s}
.yt:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 22px 44px rgba(27,17,10,.4)}
.yt .play{animation:playpulse 2s ease-out infinite}
@keyframes playpulse{0%{box-shadow:0 0 0 0 rgba(217,84,30,.6)}100%{box-shadow:0 0 0 22px rgba(217,84,30,0)}}

/* Chips y cobertura */
.chips li{transition:transform .25s,background .25s}
.chips li:hover{transform:translateY(-3px) scale(1.06);background:var(--sun);color:var(--night)}
.cover-card .phone{transition:transform .2s}
.cover-card .phone:hover{transform:scale(1.08)}

/* FAQ */
details{transition:box-shadow .25s,transform .25s}
details:hover{transform:translateX(4px);box-shadow:0 8px 20px rgba(27,17,10,.18)}
details[open]{border-left:5px solid var(--sun)}
details[open] p{animation:fadeDown .4s ease}
@keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
summary::after{transition:transform .3s}
details[open] summary::after{transform:translateY(-50%) rotate(180deg)}

/* Títulos: subrayado animado */
h2::after{width:0;transition:width .9s cubic-bezier(.2,.8,.2,1) .2s}
h2.in::after{width:84px}
.final h2::after{width:84px}

/* Formulario */
.form input,.form select,.form textarea{transition:border-color .2s,box-shadow .2s,transform .2s}
.form input:focus,.form select:focus,.form textarea:focus{transform:translateY(-1px)}

/* CTA final con brillo */
.final{position:relative;overflow:hidden;background-size:200% 200%;animation:grad 9s ease infinite}
@keyframes grad{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.final::before{content:"";position:absolute;inset:-50%;background:radial-gradient(circle,rgba(255,226,150,.22),transparent 40%);animation:spin 14s linear infinite}
.final .wrap{position:relative}
@keyframes spin{to{transform:rotate(360deg)}}

/* WhatsApp flotante + globo */
.wa-float{transition:transform .25s}
.wa-float:hover{transform:scale(1.12) rotate(-8deg)}
.wa-tip{position:absolute;right:72px;top:50%;transform:translateY(-50%) translateX(16px);white-space:nowrap;background:#fff;color:var(--ink);font-weight:900;font-size:.9rem;padding:9px 14px;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:.4s}
.wa-tip::after{content:"";position:absolute;right:-6px;top:50%;margin-top:-6px;border-left:8px solid #fff;border-block:6px solid transparent}
.wa-tip.show{opacity:1;transform:translateY(-50%)}

/* Variantes de aparición */
.reveal.from-left{transform:translateX(-40px)}
.reveal.from-right{transform:translateX(40px)}
.reveal.zoom{transform:scale(.88)}
.reveal.in{opacity:1;transform:none}

@media (max-width:860px){
  .steps .step::after{display:none}
  .marquee{transform:none;margin-block:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-inner>*{opacity:1}
  .reveal{opacity:1;transform:none}
  h2::after{width:84px}
}

/* ===== Instrumentos animados ===== */
.mar{transform-box:fill-box;transform-origin:50% 100%;rotate:var(--a);animation:shake 2.6s ease-in-out infinite}
.mar:nth-child(2){animation-delay:.35s}
@keyframes shake{0%,40%,100%{rotate:var(--a)}46%{rotate:calc(var(--a) - 7deg)}52%{rotate:calc(var(--a) + 7deg)}58%{rotate:calc(var(--a) - 5deg)}64%{rotate:calc(var(--a) + 3deg)}70%{rotate:var(--a)}}
.harp-strings{animation:shimmer 3.2s ease-in-out infinite}
@keyframes shimmer{0%,100%{opacity:.55}50%{opacity:1}}
.s-cuatro{transform-box:fill-box;transform-origin:50% 100%;animation:strum 3.4s ease-in-out infinite}
@keyframes strum{0%,100%{translate:0 0}50%{translate:0 -4px}}
.hero-stage{animation:stageup 1.4s .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes stageup{from{opacity:0;translate:0 60px}to{opacity:1;translate:0 0}}