/** * MAC — motion y microinteracciones (landing / contacto público) * Requiere html.mac-motion (script en , salvo prefers-reduced-motion). */ body.mac-landing { --mac-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --mac-ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --mac-ease-pro: cubic-bezier(0.16, 1, 0.3, 1); --mac-dur-1: 0.45s; --mac-dur-2: 0.68s; --mac-dur-hero: 0.55s; } /* Anclas: compensar header fijo al hacer scroll desde el menú */ body.mac-landing #contenido-principal section[id] { scroll-margin-top: 5.75rem; } /* #acceso-plataforma: un poco más de aire bajo el header + separación respecto a «Para ti» */ body.mac-landing #contenido-principal section#acceso-plataforma.mac-landing-acceso { scroll-margin-top: 6.75rem; padding-top: clamp(1rem, 3vw, 2rem); } /* ----------------------------------------------------------------- Hero — entrada escalonada (solo con html.mac-motion) ----------------------------------------------------------------- */ @keyframes mac-hero-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } html.mac-motion body.mac-landing .mac-hero .mac-kicker { animation: mac-hero-rise var(--mac-dur-hero) var(--mac-ease-out) both; } html.mac-motion body.mac-landing .mac-hero .hero__title { animation: mac-hero-rise calc(var(--mac-dur-hero) + 0.05s) var(--mac-ease-out) 0.07s both; } html.mac-motion body.mac-landing .mac-hero .hero__description { animation: mac-hero-rise calc(var(--mac-dur-hero) + 0.08s) var(--mac-ease-out) 0.16s both; } html.mac-motion body.mac-landing .mac-hero .hero__buttons { animation: mac-hero-rise calc(var(--mac-dur-hero) + 0.05s) var(--mac-ease-out) 0.24s both; } html.mac-motion body.mac-landing .mac-hero .hero__image { animation: mac-hero-rise 0.72s var(--mac-ease-out) 0.18s both; } html.mac-motion body.mac-landing .mac-hero .hero__image-placeholder { transition: transform 0.55s var(--mac-ease-out), box-shadow 0.55s var(--mac-ease-soft), border-color 0.35s var(--mac-ease-soft); } @media (hover: hover) and (pointer: fine) { html.mac-motion body.mac-landing .mac-hero .hero__image:hover .hero__image-placeholder { transform: translateY(-4px) scale(1.01); box-shadow: var(--mac-shadow-md), var(--mac-shadow-glow); border-color: var(--mac-border-strong); } } /* ----------------------------------------------------------------- Secciones — reveal al scroll ----------------------------------------------------------------- */ html.mac-motion.js-mac-reveal body.mac-landing section.mac-scroll-zone:not(.mac-in-view) { opacity: 0; transform: translate3d(0, 1.25rem, 0); } html.mac-motion.js-mac-reveal body.mac-landing section.mac-scroll-zone.mac-in-view { opacity: 1; transform: none; transition: opacity var(--mac-dur-2) var(--mac-ease-pro), transform var(--mac-dur-2) var(--mac-ease-pro); } /* ----------------------------------------------------------------- Header — sombra al scroll (clase desde main.js) ----------------------------------------------------------------- */ body.mac-landing .header { transition: box-shadow 0.4s var(--mac-ease-soft), border-color 0.35s var(--mac-ease-soft), background 0.35s var(--mac-ease-soft); } body.mac-landing .header.header--scrolled { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55); border-bottom-color: var(--mac-border-strong); } /* ----------------------------------------------------------------- Navegación — transiciones suaves ----------------------------------------------------------------- */ body.mac-landing .nav__link:not(.nav__link--highlight) { position: relative; transition: color 0.25s var(--mac-ease-soft); } /* Línea inferior: base para todos los punteros (el active no debe depender solo de pointer:fine). */ body.mac-landing .nav__link:not(.nav__link--highlight)::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--mac-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--mac-ease-out); opacity: 0.85; border-radius: 1px; } body.mac-landing .nav__link:not(.nav__link--highlight).nav__link--active::after { transform: scaleX(1); } @media (hover: hover) and (pointer: fine) { body.mac-landing .nav__link:not(.nav__link--highlight):hover::after, body.mac-landing .nav__link:not(.nav__link--highlight):focus-visible::after { transform: scaleX(1); } /* Evita doble “activo”: color en un ítem (spy) y subrayado por :hover/:focus en el vecino. */ body.mac-landing .nav:has(.nav__link--active) .nav__link:not(.nav__link--highlight):not(.nav__link--active):hover::after, body.mac-landing .nav:has(.nav__link--active) .nav__link:not(.nav__link--highlight):not(.nav__link--active):focus-visible::after { transform: scaleX(0); } } body.mac-landing .nav__link.nav__link--active:not(.nav__link--highlight) { color: var(--mac-accent); font-weight: 600; } body.mac-landing .nav__link--highlight { transition: background 0.25s var(--mac-ease-soft), color 0.25s var(--mac-ease-soft), transform 0.25s var(--mac-ease-soft), box-shadow 0.25s var(--mac-ease-soft); } /* ----------------------------------------------------------------- Botones — pulso sutil al foco / hover ----------------------------------------------------------------- */ body.mac-landing .btn { transition: background 0.25s var(--mac-ease-soft), color 0.25s var(--mac-ease-soft), border-color 0.25s var(--mac-ease-soft), transform 0.25s var(--mac-ease-soft), box-shadow 0.3s var(--mac-ease-soft); } @media (hover: hover) and (pointer: fine) { body.mac-landing .btn.btn--primary:hover, body.mac-landing .btn.btn--secondary:hover { transform: translateY(-2px); } body.mac-landing .btn:active { transform: translateY(0); transition-duration: 0.12s; } } body.mac-landing .btn:focus-visible { outline: none; box-shadow: var(--mac-focus, 0 0 0 3px rgba(212, 255, 0, 0.28)); } @keyframes mac-card-stagger { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } html.mac-motion.js-mac-reveal body.mac-landing section.mac-scroll-zone.mac-in-view .services__grid .service__card { animation: mac-card-stagger 0.5s var(--mac-ease-pro) backwards; } html.mac-motion.js-mac-reveal body.mac-landing section.mac-scroll-zone.mac-in-view .services__grid .service__card:nth-child(1) { animation-delay: 0.04s; } html.mac-motion.js-mac-reveal body.mac-landing section.mac-scroll-zone.mac-in-view .services__grid .service__card:nth-child(2) { animation-delay: 0.1s; } html.mac-motion.js-mac-reveal body.mac-landing section.mac-scroll-zone.mac-in-view .services__grid .service__card:nth-child(3) { animation-delay: 0.16s; } html.mac-motion.js-mac-reveal body.mac-landing section.mac-scroll-zone.mac-in-view .services__grid .service__card:nth-child(4) { animation-delay: 0.22s; } html.mac-motion.js-mac-reveal body.mac-landing section.mac-scroll-zone.mac-in-view .services__grid .service__card:nth-child(5) { animation-delay: 0.28s; } html.mac-motion.js-mac-reveal body.mac-landing section.mac-scroll-zone.mac-in-view .services__grid .service__card:nth-child(6) { animation-delay: 0.34s; } html.mac-motion.js-mac-reveal body.mac-landing section.mac-scroll-zone.mac-in-view .pricing__grid .pricing__card { animation: mac-card-stagger 0.52s var(--mac-ease-pro) backwards; } html.mac-motion.js-mac-reveal body.mac-landing section.mac-scroll-zone.mac-in-view .pricing__grid .pricing__card:nth-child(1) { animation-delay: 0.05s; } html.mac-motion.js-mac-reveal body.mac-landing section.mac-scroll-zone.mac-in-view .pricing__grid .pricing__card:nth-child(2) { animation-delay: 0.12s; } html.mac-motion.js-mac-reveal body.mac-landing section.mac-scroll-zone.mac-in-view .pricing__grid .pricing__card:nth-child(3) { animation-delay: 0.18s; } html.mac-motion.js-mac-reveal body.mac-landing section.mac-scroll-zone.mac-in-view .pricing__grid .pricing__card:nth-child(4) { animation-delay: 0.24s; } html.mac-motion.js-mac-reveal body.mac-landing section.mac-scroll-zone.mac-in-view .pricing__grid .pricing__card:nth-child(5) { animation-delay: 0.3s; } html.mac-motion.js-mac-reveal body.mac-landing section.mac-scroll-zone.mac-in-view .pricing__grid .pricing__card:nth-child(6) { animation-delay: 0.36s; } /* ----------------------------------------------------------------- Tarjetas — transición unificada (refuerza reglas MAC existentes) ----------------------------------------------------------------- */ body.mac-landing .service__card { transition: border-color 0.35s var(--mac-ease-soft), box-shadow 0.4s var(--mac-ease-out), transform 0.4s var(--mac-ease-out), background 0.35s var(--mac-ease-soft); } body.mac-landing .pricing__card { transition: border-color 0.35s var(--mac-ease-soft), box-shadow 0.4s var(--mac-ease-out), transform 0.4s var(--mac-ease-out); } @media (hover: hover) and (pointer: fine) { body.mac-landing .pricing__card:hover { transform: translateY(-4px); box-shadow: var(--mac-shadow-md); border-color: var(--mac-border-strong) !important; } body.mac-landing .pricing__card--featured:hover { transform: translateY(-4px); } } body.mac-landing .mac-card { transition: border-color 0.35s var(--mac-ease-soft), box-shadow 0.4s var(--mac-ease-out), transform 0.35s var(--mac-ease-out); } @media (hover: hover) and (pointer: fine) { body.mac-landing .mac-card:hover { transform: translateY(-3px); } } /* ----------------------------------------------------------------- Formularios — inputs ----------------------------------------------------------------- */ body.mac-landing .contact__form-group input, body.mac-landing .contact__form-group textarea { transition: border-color 0.25s var(--mac-ease-soft), box-shadow 0.25s var(--mac-ease-soft), background 0.25s var(--mac-ease-soft); } body.mac-landing .newsletter__input-group input { transition: border-color 0.25s var(--mac-ease-soft), box-shadow 0.25s var(--mac-ease-soft); } /* ----------------------------------------------------------------- Footer — enlaces ----------------------------------------------------------------- */ body.mac-landing .footer a { transition: color 0.2s var(--mac-ease-soft), opacity 0.2s var(--mac-ease-soft); } body.mac-landing .footer__social-link { transition: transform 0.25s var(--mac-ease-out), color 0.2s var(--mac-ease-soft), background 0.25s var(--mac-ease-soft); } @media (hover: hover) and (pointer: fine) { body.mac-landing .footer__social-link:hover { transform: translateY(-2px) scale(1.05); } } /* ----------------------------------------------------------------- WhatsApp flotante ----------------------------------------------------------------- */ body.mac-landing .whatsapp-float { transition: transform 0.35s var(--mac-ease-out), box-shadow 0.35s var(--mac-ease-out); } @media (hover: hover) and (pointer: fine) { body.mac-landing .whatsapp-float:hover { transform: scale(1.06); box-shadow: 0 12px 36px rgba(37, 211, 102, 0.35); } } /* ----------------------------------------------------------------- prefers-reduced-motion ----------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.mac-motion body.mac-landing .mac-hero *, html.mac-motion body.mac-landing section.mac-scroll-zone, body.mac-landing .header, body.mac-landing .btn, body.mac-landing .service__card, body.mac-landing .pricing__card, body.mac-landing .mac-card, body.mac-landing .whatsapp-float, body.mac-landing .footer__social-link { animation: none !important; transition-duration: 0.01ms !important; } html.mac-motion.js-mac-reveal body.mac-landing section.mac-scroll-zone:not(.mac-in-view) { opacity: 1 !important; transform: none !important; } body.mac-landing .nav__link:not(.nav__link--highlight)::after { display: none; } body.mac-landing .nav__link.nav__link--active:not(.nav__link--highlight) { font-weight: 500; } } /* Evitar trabajo extra en navegadores con motion reducido */ @media (prefers-reduced-motion: reduce) { html.mac-motion.js-mac-reveal body.mac-landing section.mac-scroll-zone:not(.mac-in-view) { opacity: 1 !important; transform: none !important; } }