/* Motion and depth: small, purposeful responses to scrolling and interaction. */
:root { --motion-ease: cubic-bezier(.22,1,.36,1); --card-shadow: 0 8px 28px #232b520a, 0 2px 6px #232b5206; --card-shadow-hover: 0 22px 44px #232b521a, 0 6px 14px #232b520c; }
body .animate-on-scroll.fade-in-up, body .animate-on-scroll.slide-in-left, body .animate-on-scroll.slide-in-right, body .animate-on-scroll.zoom-in { opacity: 1; transform: none; }
html[data-theme=dark] { --card-shadow: 0 8px 28px #00000024, inset 0 1px 0 #ffffff05; --card-shadow-hover: 0 24px 48px #00000045, inset 0 1px 0 #ffffff0c; }
body .bento-card, body #nodos > .grid > .glass-panel, body #cotizador, body #impacto {
  box-shadow: var(--card-shadow); transition: box-shadow .45s var(--motion-ease), border-color .35s ease;
}
body .bento-card:hover, body #nodos > .grid > .glass-panel:hover { box-shadow: var(--card-shadow-hover); border-color: #9d8a6c70; }
body .bento-card { transition: transform .45s var(--motion-ease), box-shadow .45s var(--motion-ease), border-color .35s ease; }
body .bento-card:hover { transform: translateY(-5px); }
body #hero { box-shadow: 0 16px 42px #232b5212; }
html[data-theme=dark] body #hero { box-shadow: 0 16px 42px #00000030; }
body nav.fixed { transition: box-shadow .35s ease, background-color .35s ease; }
body nav.fixed.nav-scrolled { box-shadow: 0 8px 28px #00000025; }
body .scroll-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand-gold); transform: scaleX(0); transform-origin: left; pointer-events: none; }
body nav > div:nth-child(2) a { position: relative; padding-block: 8px; border-bottom: 0; }
body nav > div:nth-child(2) a::after { content: ''; position: absolute; height: 2px; bottom: 0; left: 0; right: 0; background: var(--brand-gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--motion-ease); }
body nav > div:nth-child(2) a:hover::after, body nav > div:nth-child(2) a[aria-current=page]::after { transform: scaleX(1); }
body main a[href="#cotizador"], body main a[href="#nodos"], body #cotizador button, body .dual-switch-btn { transition: transform .3s var(--motion-ease), box-shadow .3s ease, background-color .3s ease; }
body main a[href="#cotizador"]:hover, body #cotizador button.bg-secondary:hover { box-shadow: 0 8px 22px #232b5226; }
body button:active, body main a[href="#cotizador"]:active { transform: scale(.98); }
body .dual-switch-btn.bg-secondary { box-shadow: 0 4px 14px #232b5222; }
body .gallery-trigger, body .video-trigger { transition: transform .4s var(--motion-ease), box-shadow .4s ease, border-color .3s ease; }
body .gallery-trigger:hover, body .video-trigger:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
body .video-trigger .material-symbols-outlined { transition: transform .35s var(--motion-ease); }
body .accordion-header { transition: background .25s ease, color .25s ease; }
body .accordion-header:hover { background: #9d8a6c0d; }
body #hero-bg-image { transform-origin: center; transition: opacity .35s ease; }
body .forede-promo { transition: box-shadow .4s ease; }
body .forede-promo:hover { box-shadow: 0 18px 40px #0005; }
html[data-theme=dark] body #cotizador { background-image: radial-gradient(ellipse at top right, #4289c210, transparent 65%); }
html[data-theme=dark] body #impacto { background-image: radial-gradient(ellipse at bottom left, #56b2760c, transparent 65%); }
body #mobile-menu-drawer:not(.hidden) { animation: drawer-enter .3s var(--motion-ease); }
@keyframes drawer-enter { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (hover: none) {
  body .bento-card:hover, body .gallery-trigger:hover, body .video-trigger:hover { transform: none; box-shadow: var(--card-shadow); }
}
@media (prefers-reduced-motion: reduce) {
  body #hero-bg-image { transform: none !important; }
  body .bento-card:hover, body .gallery-trigger:hover, body .video-trigger:hover { transform: none; }
}