/* SOMA Motion — recorrido 3D (desktop) + transiciones (todos los dispositivos).
   Solo agrega capas visuales: no cambia contenido ni estructura (SEO intacto).
   html.m-on  → transiciones activas (sin prefers-reduced-motion)
   html.m3d   → recorrido 3D con cámara (html.m3d-lite = versión liviana móvil/táctil) */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
@media (prefers-reduced-motion:no-preference){
::view-transition-old(root){animation:mPageOut .42s cubic-bezier(.55,0,.75,.2) both}
::view-transition-new(root){animation:mPageIn .65s cubic-bezier(.22,.61,.36,1) both}
}
@media (prefers-reduced-motion:no-preference){
::view-transition-old(root){animation-name:mPageOut3d}
::view-transition-new(root){animation-name:mPageIn3d}
}
@keyframes mPageOut{to{opacity:0;transform:translateY(-24px) scale(.98)}}
@keyframes mPageIn{from{opacity:0;transform:translateY(32px)}}
@keyframes mPageOut3d{to{opacity:0;transform:perspective(1400px) translateZ(-260px) rotateY(9deg)}}
@keyframes mPageIn3d{from{opacity:0;transform:perspective(1400px) translateZ(220px) rotateY(-7deg)}}
html.m-leaving main,html.m-leaving footer,html.m-leaving nav{transition:opacity .38s,transform .38s cubic-bezier(.55,0,.75,.2);opacity:0;transform:translateY(-20px) scale(.985)}
html.m-enter body{animation:mPageIn .6s cubic-bezier(.22,.61,.36,1) both}

/* ── Entrada de secciones ── */
html.m-on .fade-in{transform:translateY(34px) scale(.985);transition:opacity .8s var(--ease),transform .9s var(--ease)}
html.m-on .m-rise{opacity:0;transform:translateY(30px) scale(.97);transition:opacity .7s var(--ease) var(--d,0ms),transform .85s var(--ease) var(--d,0ms)}
html.m-on .fade-in.visible,html.m-on .m-rise.m-in{opacity:1;transform:none}
html.m3d .fade-in:not(.visible){transform:perspective(1000px) translateY(60px) rotateX(16deg) translateZ(-80px)}
html.m3d .m-rise:not(.m-in){transform:perspective(900px) translateY(50px) rotateX(22deg) translateZ(-60px)}

/* ── Recorrido 3D: cámara ── */
html.m3d,html.m3d body{background:#16150f}
html.m3d main,html.m3d footer{position:relative;z-index:1}
/* blur sobre contenido en movimiento se recalcula en cada cuadro → apagarlo en modo 3D */
html.m3d main *,html.m3d footer *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.m3d #navbar.scrolled{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(26,26,24,.97)}
html.m3d main>section,html.m3d footer{transform-origin:50% 50%}
#m-world{position:fixed;inset:0;z-index:0;pointer-events:none;perspective:900px;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#2a271f 0%,#16150f 70%)}
#m-world i{position:absolute;left:50%;top:50%;display:block}
#m-world .w-ring{border:1.5px solid rgba(200,184,154,.45);border-radius:50%}
#m-world .w-disc{border-radius:50%;background:radial-gradient(circle,rgba(200,184,154,.28),rgba(200,184,154,0) 70%)}
#m-world .w-line{height:1px;background:linear-gradient(90deg,rgba(200,184,154,0),rgba(200,184,154,.6),rgba(200,184,154,0))}
#m-world .w-frame{border:1px solid rgba(250,249,247,.16);border-radius:18px}

/* ── Hero: carrusel 3D, Ken Burns y parallax ── */
html.m-on .hero{perspective:1600px}
html.m-on .hero-slide{transition:opacity 1.2s var(--ease),visibility 1.2s var(--ease)}
html.m-on .hero-slide .hero-bg{transform:scale(1.16);transition:transform 1.4s var(--ease)}
html.m-on .hero-slide.active .hero-bg{animation:mKen 8s cubic-bezier(.25,.1,.25,1) both}
html.m3d .hero-slide:not(.active) .hero-bg{transform:scale(1.22) rotateY(-6deg) translateZ(-120px)}
@keyframes mKen{from{transform:scale(1.16)}to{transform:scale(1.06)}}
html.m-on .hero.m-anim .hero-slide.active .hero-content>*{animation:mHeroIn .9s var(--ease) both}
html.m3d .hero.m-anim .hero-slide.active .hero-content>*{animation-name:mHeroIn3d}
.hero.m-anim .hero-slide.active .hero-content>*:nth-child(2){animation-delay:.12s}
.hero.m-anim .hero-slide.active .hero-content>*:nth-child(3){animation-delay:.24s}
.hero.m-anim .hero-slide.active .hero-content>*:nth-child(4){animation-delay:.36s}
.hero.m-anim .hero-slide.active .hero-content>*:nth-child(5){animation-delay:.48s}
@keyframes mHeroIn{from{opacity:0;transform:translateY(26px)}}
@keyframes mHeroIn3d{from{opacity:0;transform:perspective(900px) translateY(40px) rotateX(-24deg) translateZ(-40px)}}
html.m3d .hero-content,html.m3d .ins-hero-inner{translate:calc(var(--hx,0)*-16px) calc(var(--hy,0)*-12px);transition:translate .5s var(--ease)}
html.m3d .hero-bg,html.m3d .ins-hero-bg{translate:calc(var(--hx,0)*22px) calc(var(--hy,0)*16px);transition:translate .6s var(--ease),transform 1.4s var(--ease)}
html.m3d .ins-hero-bg{scale:1.08}
html.m-on .hero-dot{transition:transform .3s var(--ease),background .3s,width .3s}
html.m-on .hero-dot.active{transform:scale(1.25)}

/* ── Hover: tarjetas con inclinación, botones magnéticos ── */
html.m3d .m-tilting{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(18px)!important;transition:transform .12s linear,box-shadow .3s!important;box-shadow:0 30px 60px -20px rgba(42,42,37,.35)!important;z-index:2}
html.m3d .m-untilt{transition:transform .6s var(--ease),box-shadow .6s!important}
html.m-on :is(.btn,.btn-plan,.trab-btn,.evi-btn,.cafe-btn,.insc-btn,.insc-btn-ghost,.tab-btn,.nav-btn-portal,.evp-btn,.wa-btn,.primary-btn){transition:translate .35s var(--ease),scale .18s var(--ease),background var(--t-base),color var(--t-base),border-color var(--t-base),box-shadow var(--t-base)}
html.m3d :is(.btn,.btn-plan,.trab-btn,.evi-btn,.cafe-btn,.insc-btn,.evp-btn,.nav-btn-portal){translate:var(--mx,0) var(--my,0)}
html.m-on :is(.btn,.btn-plan,.trab-btn,.evi-btn,.cafe-btn,.insc-btn,.insc-btn-ghost,.tab-btn,.nav-btn-portal,.evp-btn,.wa-btn,.primary-btn):active{scale:.96}
html.m-on .btn-arrow{transition:transform .3s var(--ease)}
html.m-on a:hover .btn-arrow,html.m-on button:hover .btn-arrow{transform:translateX(4px)}

/* ── Modales y menú ── */
html.m-on :is(.evi-ov,.cafe-ov,.insc-ov).open{animation:mFade .35s ease both}
html.m-on :is(.evi-ov,.cafe-ov,.insc-ov).open :is(.evi-modal,.cafe-modal,.insc-modal){animation:mModal .6s var(--ease) both}
html.m3d :is(.evi-ov,.cafe-ov,.insc-ov).open :is(.evi-modal,.cafe-modal,.insc-modal){animation-name:mModal3d}
@keyframes mFade{from{opacity:0}}
@keyframes mModal{from{opacity:0;transform:translateY(36px) scale(.96)}}
@keyframes mModal3d{from{opacity:0;transform:perspective(1200px) rotateX(-16deg) translateY(50px) translateZ(-80px)}}
html.m-on .mobile-menu.open{animation:mMenu .55s cubic-bezier(.65,0,.35,1) both}
@keyframes mMenu{from{clip-path:circle(0% at calc(100% - 38px) 38px)}}
.mobile-menu.open :is(.mobile-link,.mobile-menu-nav>*,.mobile-menu-actions,.mobile-menu-actions>*,.mobile-menu-contact){opacity:1;transform:none}
html.m-on .mobile-menu.open :is(.mobile-menu-nav>*,.mobile-menu-actions>*,.mobile-menu-contact){animation:mUp .5s var(--ease) both;animation-delay:calc(.18s + var(--i,0)*45ms)}
@keyframes mUp{from{opacity:0;transform:translateY(22px)}}

/* ── Formularios ── */
html.m-on :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]){transition:border-color .25s,box-shadow .3s var(--ease),transform .3s var(--ease),background .25s}
html.m-on :is(input,select,textarea):not([type=checkbox]):not([type=radio]):focus-visible{transform:translateY(-2px);box-shadow:0 0 0 4px rgba(200,184,154,.35),0 10px 24px -12px rgba(42,42,37,.35);outline:none}
html.m-on :is(input,select,textarea):user-invalid{animation:mShake .4s ease}
@keyframes mShake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
html.m-on .m-sending{position:relative;overflow:hidden;pointer-events:none}
html.m-on .m-sending::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);animation:mShim 1s linear infinite}
@keyframes mShim{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
html.m-on :is(.evi-ok,.cafe-ok,.trab-ok,.insc-ok){animation:mOk .8s var(--ease) both}
@keyframes mOk{0%{opacity:0;transform:scale(.85) translateY(20px)}60%{opacity:1;transform:scale(1.03)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){html *{animation:none!important}}
html.m3d-lite #m-world{perspective:700px}
html.m3d-lite .fade-in:not(.visible){transform:perspective(800px) translateY(40px) rotateX(12deg) translateZ(-50px)}
html.m3d-lite .m-rise:not(.m-in){transform:perspective(800px) translateY(34px) rotateX(16deg) translateZ(-40px)}
html.m3d-lite .hero-content,html.m3d-lite .ins-hero-inner,html.m3d-lite .hero-bg,html.m3d-lite .ins-hero-bg{translate:none}
html.m3d-lite main>section,html.m3d-lite footer{will-change:transform}