@media(prefers-reduced-motion:no-preference){.motion-ready [data-reveal]{opacity:0;transform:translateY(var(--unit-24px));transition:opacity var(--unit-d5s) ease,transform var(--unit-d5s) ease}.motion-ready [data-reveal].visible{opacity:1;transform:none}.device-item{transition:transform var(--unit-d4s) ease}.device-item:nth-child(2){transition-delay:var(--unit-80ms)}.device-item:nth-child(3){transition-delay:var(--unit-160ms)}.device-item:nth-child(4){transition-delay:var(--unit-240ms)}.device-item:nth-child(5){transition-delay:var(--unit-320ms)}.device-item:nth-child(6){transition-delay:var(--unit-400ms)}.device-item:nth-child(7){transition-delay:var(--unit-480ms)}.device-item:nth-child(8){transition-delay:var(--unit-560ms)}.motion-ready [data-reveal]:not(.visible) .device-item{transform:translateY(var(--unit-16px))}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}[data-reveal]{opacity:1!important;transform:none!important}}

/* 1.4 — Directional reveals and explicit child staggering. */
.motion-ready [data-reveal]{transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.motion-ready [data-reveal="left"]:not(.visible){transform:translateX(calc(-1 * var(--reveal-x)))}
.motion-ready [data-reveal="right"]:not(.visible){transform:translateX(var(--reveal-x))}
.motion-ready [data-reveal="scale"]:not(.visible){transform:scale(.92)}
.motion-ready [data-reveal-delay="1"]{transition-delay:calc(var(--stagger) * 1)}
.motion-ready [data-reveal-delay="2"]{transition-delay:calc(var(--stagger) * 2)}
.motion-ready [data-reveal-delay="3"]{transition-delay:calc(var(--stagger) * 3)}
.motion-ready [data-reveal-delay="4"]{transition-delay:calc(var(--stagger) * 4)}
.motion-ready [data-reveal-delay="5"]{transition-delay:calc(var(--stagger) * 5)}
.motion-ready [data-reveal-delay="6"]{transition-delay:calc(var(--stagger) * 6)}
.motion-ready [data-reveal-delay="7"]{transition-delay:calc(var(--stagger) * 7)}
.motion-ready [data-reveal-delay="8"]{transition-delay:calc(var(--stagger) * 8)}


/* 3.1 — A visible aurora layer above the artwork, below the content. */
.hero::before{content:"";position:absolute;inset:-10%;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 20% 40%,color-mix(in srgb,var(--color-accent) 18%,transparent),transparent 60%),radial-gradient(ellipse at 80% 60%,color-mix(in srgb,var(--color-accent-2) 16%,transparent),transparent 60%)}
.motion-ready .hero::before{animation:meshDrift var(--dur-mesh) ease-in-out infinite alternate}
@keyframes meshDrift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.06)}}


/* 3.2 — Load-gated editorial sequence. */
.motion-ready .hero-eyebrow{animation:heroIn var(--dur-slow) var(--ease-out) var(--stagger) both}
.motion-ready .hero-title{animation:heroIn var(--dur-slow) var(--ease-out) calc(var(--stagger)*2.5) both}
.motion-ready .hero-subtitle{animation:heroIn var(--dur-slow) var(--ease-out) calc(var(--stagger)*4) both}
.motion-ready .hero-cta-group{animation:heroIn var(--dur-slow) var(--ease-out) calc(var(--stagger)*5.5) both}
.motion-ready .hero-trust{animation:heroIn var(--dur-slow) var(--ease-out) calc(var(--stagger)*7) both}
@keyframes heroIn{from{opacity:0;transform:translateY(var(--reveal-y))}to{opacity:1;transform:none}}


/* 3.3 — Two text gradients crossfade on the compositor. */
.hero-title .gradient-word{position:relative;display:inline-block;background:linear-gradient(90deg,var(--color-accent),var(--color-accent-2));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-title .gradient-word::after{content:attr(data-text);position:absolute;inset:0;background:linear-gradient(90deg,var(--color-accent-2),var(--color-accent));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;opacity:0;pointer-events:none}
.motion-ready .hero-title .gradient-word::after{animation:gradientCrossfade var(--dur-gradient) linear infinite alternate}
@keyframes gradientCrossfade{from{opacity:0}to{opacity:1}}


/* 3.4 — Continuous glow without per-frame shadow painting. */
.btn-primary{position:relative;isolation:isolate;background:linear-gradient(135deg,var(--color-accent),var(--color-accent-2))}
.btn-primary::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;box-shadow:0 0 var(--glow-base) var(--space-2) var(--color-accent-alpha);opacity:.35}
.motion-ready .btn-primary::before{animation:ctaPulse var(--dur-pulse) ease-in-out infinite}
.btn-primary:is(:hover,:focus-visible)::before{animation-play-state:paused;opacity:1}
@keyframes ctaPulse{0%,100%{opacity:.25;transform:scale(.98)}50%{opacity:1;transform:scale(1.02)}}


/* 3.5 — Independent device asset; never translate the entire hero artwork. */
.hero-device{position:absolute;right:var(--space-4);bottom:var(--space-2);width:24%;max-width:var(--drawer-width);height:auto;z-index:1;pointer-events:none}
.motion-ready .hero-device{animation:deviceFloat var(--dur-float) ease-in-out infinite}
@keyframes deviceFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--float-y))}}
@media(min-width:1024px){.hero-device{right:4%;bottom:10%}}


/* 3.6 — Only brief-supported indicators; no invented service statistics. */
.hero-trust{display:flex;gap:var(--space-3);flex-wrap:wrap;max-width:75%}
.trust-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--unit-d75rem);color:var(--color-text-muted)}
.trust-badge svg{color:var(--color-accent);flex-shrink:0}


/* 4.1 — Pre-rendered count frames; only the strip transform changes while running. */
:root{--counter-line:1lh}
.counter-viewport{position:relative;display:inline-grid;overflow:hidden;height:var(--counter-line);vertical-align:bottom;font-variant-numeric:tabular-nums}
.counter-sizer{visibility:hidden}
.counter-strip{position:absolute;top:0;right:0;text-align:right;white-space:nowrap}
.counter-strip>span{display:block;height:var(--counter-line)}
@media(prefers-reduced-motion:reduce){.counter-strip{display:none}.counter-sizer{visibility:visible}}


/* 5.2 — Static shadow layers fade in; icons transform independently. */
.feature-card{position:relative}
.feature-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 var(--space-4) var(--glow-large) var(--color-shadow),0 0 0 var(--unit-1px) var(--color-accent-alpha);opacity:0;pointer-events:none;transition:opacity var(--dur-base) ease}
.feature-card:is(:hover,:focus-visible)::after{opacity:1}
.motion-ready .feature-card.visible:is(:hover,:focus-visible){transform:translateY(var(--lift-base))}
.feature-icon{position:relative;display:block;width:var(--unit-42px);height:var(--unit-42px);margin-bottom:var(--space-6)}
.feature-card .feature-icon img{margin:0;transition:transform var(--dur-base) var(--ease-spring)}
.feature-icon .icon-glow{position:absolute;inset:0;filter:drop-shadow(0 0 var(--glow-small) var(--color-accent));opacity:0;transition:transform var(--dur-base) var(--ease-spring),opacity var(--dur-base) ease}
.feature-card:is(:hover,:focus-visible) .feature-icon img{transform:scale(1.15) rotate(-5deg)}
.feature-card:is(:hover,:focus-visible) .icon-glow{opacity:1}


/* 5.3 — Underline reveals without changing heading/container layout. */
.shimmer-heading{position:relative}
.shimmer-heading::after{content:"";position:absolute;left:0;bottom:calc(-1*var(--space-2));width:var(--line-width);height:var(--line-height);border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--color-accent),var(--color-accent-2));transform:scaleX(1);transform-origin:left}
.motion-ready .shimmer-heading::after{transform:scaleX(0);transition:transform var(--dur-slow) var(--ease-out) calc(var(--stagger)*2)}
.motion-ready .shimmer-heading.is-visible::after,.motion-ready .section-heading.is-visible .shimmer-heading::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.shimmer-heading::after{transform:none!important}}


/* 6.2 — Permanent featured lift and a composited hover border/shadow. */
.pricing-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 var(--space-6) var(--glow-large) var(--color-shadow),0 0 0 var(--unit-1px) var(--color-accent),0 0 var(--glow-large) var(--color-accent-alpha);opacity:0;transition:opacity var(--dur-base) ease}
.pricing-card:is(:hover,:focus-within)::after,.pricing-card.is-popular::after{opacity:1}
.pricing-card.is-popular,.motion-ready .pricing-card.is-popular.visible{transform:translateY(var(--lift-popular))}
.motion-ready .pricing-card.visible:is(:hover,:focus-within){transform:translateY(var(--lift-popular));transition-delay:var(--unit-0ms)}
.motion-ready .pricing-card.is-popular.visible:is(:hover,:focus-within){transform:translateY(var(--lift-popular-hover))}


/* 6.3 — Badge gloss moves as a separate layer. */
.is-popular .plan-badge{overflow:hidden;background:linear-gradient(135deg,var(--color-accent),var(--color-accent-2))}
.is-popular .plan-badge::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-white) 40%,transparent),transparent);transform:translateX(-110%);pointer-events:none}
.motion-ready .is-popular .plan-badge::before{animation:badgeShimmer var(--dur-shimmer) ease-in-out infinite}
@keyframes badgeShimmer{0%{transform:translateX(-110%)}60%,100%{transform:translateX(110%)}}


/* 6.4 — Moderate green savings, stronger accent for the annual plan. */
.saving{border:var(--unit-1px) solid color-mix(in srgb,var(--tone-9de9d7) 35%,transparent);box-shadow:0 0 var(--glow-small) color-mix(in srgb,var(--tone-9de9d7) 12%,transparent)}
.is-best .saving{background:var(--color-accent-alpha);color:var(--color-accent);border-color:var(--color-accent);box-shadow:0 0 var(--glow-small) var(--color-accent-alpha)}


/* 7.2 — Labels remain readable on touch screens. */
.device-item img,.device-item .device-plus{transition:transform var(--dur-base) var(--ease-spring)}
.device-item>span:last-child{transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) ease}
@media(hover:hover){.device-item>span:last-child{opacity:.72;transform:translateY(var(--space-1))}}
.device-item:is(:hover,:focus-visible,:active) img,.device-item:is(:hover,:focus-visible,:active) .device-plus{transform:scale(1.12) translateY(var(--lift-small))}
.device-item:is(:hover,:focus-visible,:active)>span:last-child{opacity:1;transform:none;color:var(--color-accent)}


/* 8.2 — Gold fills are pre-painted and revealed via opacity. */
.star-rating{display:flex;gap:var(--space-1);margin-block:var(--space-3)}
.star{position:relative;display:block;width:var(--unit-20px);height:var(--unit-20px)}
.star svg{width:100%;height:100%;fill:none;stroke:var(--color-accent)}
.star .star-fill{position:absolute;inset:0;fill:var(--color-star);stroke:var(--color-star);opacity:0;transition:opacity var(--dur-fast) ease}
.star.filled .star-fill{opacity:1}


/* 8.3 — Testimonial hover/focus shares the reveal transform channel. */
.testimonial-card{position:relative}
.testimonial-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 var(--space-4) var(--glow-large) var(--color-shadow),0 0 var(--glow-base) var(--color-accent-alpha),0 0 0 var(--unit-1px) var(--color-accent-alpha);opacity:0;transition:opacity var(--dur-base) ease}
.testimonial-card:is(:hover,:focus-visible)::after{opacity:1}
.motion-ready .testimonial-card.visible:is(:hover,:focus-visible){transform:translateY(var(--lift-base));transition-delay:var(--unit-0ms)}


/* 9.1 — Native details still work with scripts disabled. */
.faq-answer,.faq-ghost{transform-origin:top}
.faq-ghost{z-index:5}
.faq-ghost p{font-size:var(--unit-1rem);color:var(--color-text-muted)}
.faq-ghost a{color:var(--color-accent)}


/* 9.2 — Chevron follows the native open state. */
.faq-icon{flex-shrink:0;color:var(--color-accent);transition:transform var(--dur-base) var(--ease-out)}
.faq-list details[open] .faq-icon{transform:rotate(180deg)}

.article-image{overflow:hidden}.article-image img{transition:transform var(--dur-slow) var(--ease-out)}.article-card:is(:hover,:focus-within) .article-image img{transform:scale(1.06)}
.article-card{position:relative;box-shadow:0 var(--space-4) var(--glow-large) var(--color-shadow)}.article-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 var(--unit-1px) var(--color-accent-alpha);opacity:0;transition:opacity var(--dur-base) ease}.article-card:is(:hover,:focus-within)::after{opacity:1}.motion-ready .article-card.visible:is(:hover,:focus-within){transform:translateY(var(--lift-base));transition-delay:var(--unit-0ms)}
.comparison-panel,.article-cta,.trial-ribbon{position:relative;isolation:isolate;overflow:hidden}.comparison-panel::before,.article-cta::before,.trial-ribbon::before{content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;background:linear-gradient(135deg,var(--color-accent-alpha),color-mix(in srgb,var(--color-accent-2) 15%,transparent),var(--color-accent-alpha))}.motion-ready :is(.comparison-panel,.article-cta,.trial-ribbon)::before{animation:ctaDrift var(--dur-cta) ease-in-out infinite alternate}@keyframes ctaDrift{from{transform:translateX(-10%) scale(1)}to{transform:translateX(10%) scale(1.05)}}
.social-link{--social-color:var(--color-accent);position:relative;display:inline-flex!important;align-items:center;gap:var(--space-2);min-height:var(--touch-size);width:fit-content;border-radius:var(--space-2);padding-inline:var(--space-2)}.social-link[data-social="whatsapp"]{--social-color:var(--color-whatsapp)}.social-link[data-social="telegram"]{--social-color:var(--color-telegram)}.social-link svg{width:var(--icon-size);height:var(--icon-size);flex-shrink:0}.social-link::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:color-mix(in srgb,var(--social-color) 10%,transparent);box-shadow:0 0 var(--glow-small) color-mix(in srgb,var(--social-color) 30%,transparent);opacity:0;transition:opacity var(--dur-fast) ease}.social-link:is(:hover,:focus-visible){color:var(--social-color)}.social-link:is(:hover,:focus-visible)::before{opacity:1}
.feature-card,.pricing-card,.testimonial-card{background:var(--color-glass);backdrop-filter:blur(var(--blur-card));-webkit-backdrop-filter:blur(var(--blur-card))}
.section-divider{height:var(--unit-1px);border:0;margin:0;background:linear-gradient(90deg,transparent,var(--color-accent-alpha) 30%,color-mix(in srgb,var(--color-accent-2) 20%,transparent) 70%,transparent);box-shadow:0 0 var(--glow-small) var(--color-accent-alpha)}
:root{--lift-button:-2px}button,.btn,input[type=submit],.woocommerce a.button,.woocommerce button.button{transition:transform var(--dur-fast) var(--ease-spring),opacity var(--dur-fast) ease}button:is(:hover,:focus-visible),.btn:is(:hover,:focus-visible),input[type=submit]:is(:hover,:focus-visible),.woocommerce a.button:is(:hover,:focus-visible),.woocommerce button.button:is(:hover,:focus-visible){transform:translateY(var(--lift-button))}button:active,.btn:active,input[type=submit]:active{transform:translateY(0)}.btn-outline:is(:hover,:focus-visible){border-color:var(--color-accent);background:var(--color-accent-alpha);color:var(--color-text)}button:disabled,input:disabled{opacity:.5;cursor:not-allowed;transform:none}
.whatsapp-float{position:fixed;bottom:var(--wa-inset);right:var(--wa-inset);z-index:900;width:var(--wa-size);height:var(--wa-size);display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--color-whatsapp);color:var(--color-bg);box-shadow:0 var(--space-1) var(--glow-base) color-mix(in srgb,var(--color-whatsapp) 40%,transparent);transition:transform var(--dur-fast) var(--ease-spring)}.whatsapp-float svg{width:var(--space-8);height:var(--space-8)}.whatsapp-float::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 var(--glow-large) color-mix(in srgb,var(--color-whatsapp) 65%,transparent);opacity:.4}.motion-ready .whatsapp-float{animation:waBounceIn var(--dur-slow) var(--ease-spring) calc(var(--stagger)*10) both}.motion-ready .whatsapp-float::before{animation:waPulse var(--dur-wa) ease-in-out calc(var(--stagger)*20) infinite}.whatsapp-float:is(:hover,:focus-visible){animation:none;transform:scale(1.1)}@keyframes waBounceIn{from{opacity:0;transform:scale(0) translateY(var(--space-6))}to{opacity:1;transform:none}}@keyframes waPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
.motion-offscreen,.motion-offscreen::before,.motion-offscreen::after,.motion-tab-hidden *,.motion-tab-hidden *::before,.motion-tab-hidden *::after{animation-play-state:paused!important}
:root{--unit-0ms:0ms;--unit-2px:2px}