/* AYANZO LABS Part 2 — lightweight dynamic text + micro-interactions */
.dynamic-text{--reveal-y:10px;display:inline-block;animation:azTextIn .52s cubic-bezier(.2,.8,.2,1) both}
.dynamic-text[data-mode="typewriter"]{overflow:hidden;white-space:nowrap;max-width:100%;vertical-align:bottom}
.dynamic-text[data-mode="word"] .az-word{display:inline-block;opacity:0;transform:translateY(8px);animation:azWordIn .38s cubic-bezier(.2,.8,.2,1) forwards}
.dynamic-text[data-mode="highlight"]{position:relative}
.dynamic-text[data-mode="highlight"]::after{content:"";position:absolute;left:0;right:100%;bottom:.05em;height:.14em;background:linear-gradient(90deg,var(--primary),var(--accent-blue));opacity:.55;animation:azSweep .75s .18s ease forwards;border-radius:9px;pointer-events:none}
.az-micro-copy{margin:.65rem 0 0;color:var(--text-muted);font-size:.82rem;line-height:1.5}
.az-course-title{transition:transform .22s ease,filter .22s ease,color .22s ease}
.course-card:hover .az-course-title{transform:translateY(-2px);filter:brightness(1.08)}
.course-card:hover .course-content p{transform:translateY(-1px);opacity:.96}
.course-content p{transition:transform .22s ease,opacity .22s ease}
.course-foot strong{transition:transform .2s ease,filter .2s ease}
.course-card:hover .course-foot strong{transform:translateY(-1px);filter:brightness(1.08)}
.btn{transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background .18s ease,border-color .18s ease}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn:active{transform:translateY(0) scale(.985)}
.btn:focus-visible,.submit:focus-visible,.google:focus-visible,.switch:focus-visible{outline:2px solid var(--primary,#f6c945);outline-offset:3px}
.course-card .course-actions .btn{white-space:nowrap}
.save-btn.save-pop{animation:azSavePop .38s ease}
.save-btn.save-reverse{animation:azSaveReverse .32s ease}
.az-reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.az-reveal.az-in{opacity:1;transform:none}
.az-stagger > *{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.az-stagger.az-in > *{opacity:1;transform:none}
.az-stagger.az-in > *:nth-child(2){transition-delay:.05s}.az-stagger.az-in > *:nth-child(3){transition-delay:.1s}.az-stagger.az-in > *:nth-child(4){transition-delay:.15s}
.az-success{animation:azSuccess .5s cubic-bezier(.2,.8,.2,1)}
@keyframes azTextIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes azWordIn{to{opacity:1;transform:none}}
@keyframes azSweep{to{right:0}}
@keyframes azSavePop{0%{transform:scale(1)}45%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes azSaveReverse{0%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes azSuccess{0%{transform:scale(.92);opacity:.4}100%{transform:none;opacity:1}}
@media(max-width:520px){
 .dynamic-text[data-mode="typewriter"]{white-space:normal}
 .az-micro-copy{font-size:.78rem}
}
@media(prefers-reduced-motion:reduce){
 .dynamic-text,.dynamic-text[data-mode="word"] .az-word,.dynamic-text[data-mode="highlight"]::after,.az-reveal,.az-stagger>*,
 .save-btn.save-pop,.save-btn.save-reverse,.az-success{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
 .dynamic-text[data-mode="highlight"]::after{display:none}
}

/* Part 3.5 refinements */
.az-whatsapp-support{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:50;width:56px;height:56px;display:grid;place-items:center;padding:0;border:1px solid color-mix(in srgb,#25d366 55%,var(--border));border-radius:50%;background:color-mix(in srgb,var(--surface) 72%,#25d366 28%);color:var(--text);box-shadow:0 10px 30px rgba(0,0,0,.2),0 0 22px color-mix(in srgb,#25d366 18%,transparent);font-weight:800;font-size:12px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}
.az-whatsapp-support .az-whatsapp-icon{display:grid;place-items:center;width:100%;height:100%;line-height:0}.az-whatsapp-support svg{width:27px;height:27px;fill:var(--success);flex:none}.az-whatsapp-support .az-whatsapp-label{position:absolute;right:calc(100% + 10px);top:50%;transform:translate3d(8px,-50%,0);opacity:0;visibility:hidden;pointer-events:none;white-space:nowrap;max-width:min(320px,calc(100vw - 90px));overflow:hidden;text-overflow:ellipsis;padding:10px 14px;border:1px solid color-mix(in srgb,#25d366 45%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--surface) 94%,#25d366 6%);color:var(--text);box-shadow:0 10px 28px rgba(0,0,0,.22),0 0 20px color-mix(in srgb,#25d366 12%,transparent);transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
.az-whatsapp-support:hover,.az-whatsapp-support:focus-visible,.az-whatsapp-support.is-label-visible{transform:translateY(-3px)}.az-whatsapp-support:hover .az-whatsapp-label,.az-whatsapp-support:focus-visible .az-whatsapp-label,.az-whatsapp-support.is-label-visible .az-whatsapp-label{opacity:1;visibility:visible;transform:translate3d(0,-50%,0)}.az-whatsapp-support:active{transform:translateY(0) scale(.98)}.az-whatsapp-support:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
@media(max-width:620px){.hero-actions .btn{min-height:38px;padding:0 12px;font-size:12px}.hero-actions{gap:8px}.az-whatsapp-support{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:50px;height:50px}.az-whatsapp-support svg{width:24px;height:24px}.az-whatsapp-support .az-whatsapp-label{max-width:calc(100vw - 82px);padding:9px 12px;font-size:11px}.trust-row{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.az-whatsapp-support,.az-whatsapp-support .az-whatsapp-label{transition:none}.az-whatsapp-support{box-shadow:none}}

/* Repeatable reveal baseline; JS resets the state after meaningful exit. */
.reveal-on-scroll,[data-reveal]{--reveal-y:10px}
@media (prefers-reduced-motion:no-preference){
 .reveal-on-scroll,[data-reveal]{opacity:0;transform:translate3d(0,var(--reveal-y),0);transition:opacity .42s ease,transform .42s cubic-bezier(.2,.8,.2,1)}
 .reveal-on-scroll.is-revealed,[data-reveal].is-revealed{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
 .reveal-on-scroll,[data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}

/* Part 4: repeatable viewport animation states. */
@media (prefers-reduced-motion:no-preference){
 .reveal,.az-reveal,.az-stagger,.reveal-on-scroll,[data-reveal]{opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
 .reveal.in,.az-reveal.in,.az-reveal.az-in,.az-stagger.in,.az-stagger.az-in,.reveal-on-scroll.is-revealed,[data-reveal].is-revealed{opacity:1;transform:none}
 .dynamic-text.dynamic-run{animation:azTextIn .52s cubic-bezier(.2,.8,.2,1) both}
 .dynamic-text[data-mode="word"].dynamic-run .az-word{animation:azWordIn .38s cubic-bezier(.2,.8,.2,1) forwards}
 .dynamic-text[data-mode="highlight"].dynamic-run::after{animation:azSweep .75s .18s ease forwards}
}
@media(prefers-reduced-motion:reduce){.reveal,.az-reveal,.az-stagger,.reveal-on-scroll,[data-reveal]{opacity:1!important;transform:none!important;transition:none!important}}

.az-whatsapp-support.is-obscured{transform:translateY(10px) scale(.94);opacity:.28;pointer-events:auto}.az-whatsapp-support.is-obscured:hover,.az-whatsapp-support.is-obscured:focus-visible{transform:translateY(0) scale(1);opacity:1}@media(max-width:620px){.az-whatsapp-support.is-obscured{transform:translateY(8px) scale(.9);opacity:.2}}@media(prefers-reduced-motion:reduce){.az-whatsapp-support.is-obscured{transform:none;opacity:1}}


/* P3: shared premium button finish — preserves existing button dimensions/semantics. */
.btn{position:relative;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 88%,var(--text) 4%),var(--surface));border-color:color-mix(in srgb,var(--border) 82%,color-mix(in srgb,var(--text) 90%,transparent) 8%);box-shadow:0 7px 20px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.08)}
.btn::after{content:"";position:absolute;inset:0 auto 0 -45%;width:28%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 22%,transparent),transparent);transform:skewX(-18deg);transition:transform .65s ease;pointer-events:none}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(520%) skewX(-18deg)}
.btn.primary,.btn.gold{box-shadow:0 9px 26px color-mix(in srgb,var(--primary) 16%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
@media(prefers-reduced-motion:reduce){.btn::after{display:none}.btn:hover{transform:none}}



/* P3.1 password visibility + P3.2 remember-me controls (customer-facing only). */
.password-field{position:relative;width:100%}
.password-field>input{width:100%;padding-right:52px!important}
.password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:38px;height:34px;border:1px solid color-mix(in srgb,var(--primary) 28%,transparent);border-radius:10px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 13%,transparent),color-mix(in srgb,var(--background) 72%,transparent));color:var(--primary-ink,var(--primary));display:grid;place-items:center;cursor:pointer;box-shadow:0 5px 15px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.08);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}
.password-toggle span{font-size:13px;line-height:1;opacity:.9}
.password-toggle:hover{transform:translateY(-50%) scale(1.04);border-color:color-mix(in srgb,var(--primary) 70%,transparent);box-shadow:0 8px 20px rgba(255,210,26,.14),inset 0 1px 0 rgba(255,255,255,.12)}
.password-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.password-toggle[aria-pressed="true"]{background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 22%,transparent),color-mix(in srgb,var(--background) 78%,transparent));box-shadow:0 0 18px rgba(255,210,26,.16),inset 0 1px 0 rgba(255,255,255,.12)}
.remember-me{display:inline-flex;align-items:center;gap:9px;margin:4px 0 3px;color:var(--text);font-size:13px;line-height:1.2;cursor:pointer;user-select:none}
.remember-me input{position:absolute;opacity:0;pointer-events:none}
.remember-box{width:20px;height:20px;border:1px solid #506271;border-radius:7px;background:linear-gradient(145deg,var(--background),var(--background));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 5px 14px rgba(0,0,0,.14);position:relative;transition:all .2s ease}
.remember-box:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:950;color:var(--background);opacity:0;transform:scale(.5);transition:opacity .18s ease,transform .18s ease}
.remember-me input:checked + .remember-box{border-color:var(--primary);background:linear-gradient(145deg,var(--primary),var(--primary));box-shadow:0 0 18px rgba(246,201,69,.22),inset 0 1px 0 rgba(255,255,255,.48)}
.remember-me input:checked + .remember-box:after{opacity:1;transform:scale(1)}
.remember-me:has(input:focus-visible) .remember-box{outline:2px solid var(--primary);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.password-toggle,.remember-box,.remember-box:after{transition:none!important}.password-toggle:hover{transform:translateY(-50%)}}

/* Header and button safe UI pass: appearance only, inherited typography. */
.site-header .nav{gap:clamp(12px,1.5vw,22px)}
.site-header .navlinks{gap:clamp(5px,.8vw,12px);min-width:0}
.site-header .navlinks a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:8px 10px;border-radius:9px;color:var(--text-muted);font-weight:700;transition:color .18s ease,background .18s ease,transform .18s ease}
.site-header .navlinks a:nth-child(1){--nav-accent:var(--primary,#f6c945)}
.site-header .navlinks a:nth-child(2){--nav-accent:var(--accent-blue,#43d9ff)}
.site-header .navlinks a:nth-child(3){--nav-accent:var(--accent-purple,#8f7cff)}
.site-header .navlinks a:nth-child(4){--nav-accent:var(--success,#48d597)}
.site-header .navlinks a:nth-child(5){--nav-accent:#e9b86e}
.site-header .navlinks a:hover,.site-header .navlinks a.active{color:var(--text);background:color-mix(in srgb,var(--nav-accent) 11%,transparent)}
.site-header .navlinks a.active:after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:2px;background:var(--nav-accent)}
.site-header .navlinks a:hover{transform:translateY(-1px)}
.site-header .profile-link{border-color:color-mix(in srgb,var(--primary) 40%,var(--border));white-space:nowrap}
.site-header .profile-link.active{color:var(--primary-ink,var(--primary));box-shadow:inset 0 -2px var(--primary)}
.site-header .mobile-toggle{min-width:44px;min-height:44px;font-size:23px;line-height:1}
.site-header a:focus-visible,.site-header button:focus-visible,.mobile-menu a:focus-visible,.mobile-menu button:focus-visible{outline:2px solid var(--primary,#f6c945);outline-offset:3px}
.mobile-menu{max-height:calc(100dvh - 78px);overflow:auto}.mobile-menu a{min-height:46px;display:flex;align-items:center}.mobile-menu a[aria-current="page"]{color:var(--primary-ink,var(--primary));background:color-mix(in srgb,var(--primary) 12%,transparent)}
.btn{font-family:inherit;line-height:1.25;text-align:center;white-space:normal}
.btn:focus-visible{outline:2px solid var(--primary,#f6c945);outline-offset:3px}
.btn:active{transform:translateY(0) scale(.985)}.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
.btn.primary,.btn.gold{color:var(--on-primary);background:var(--primary,#f6c945);border-color:var(--primary,#f6c945)}
.btn.az-info{color:var(--background);background:var(--accent-blue,#43d9ff);border-color:var(--accent-blue,#43d9ff)}
.btn.az-success{color:var(--background);background:var(--success,#48d597);border-color:var(--success,#48d597)}
.btn.az-warning{color:var(--on-primary);background:var(--primary);border-color:var(--primary)}
.btn.az-danger{color:var(--text);background:#7d2636;border-color:#a03c50}
.btn.az-ghost{background:transparent;box-shadow:none}
@media(max-width:1050px){.site-header .navlinks{display:none}}
@media(max-width:650px){.site-header .nav{gap:8px}.site-header .brand-name{font-size:14px}.site-header .brand-tag{display:none}.site-header .nav-actions .btn{min-height:40px;padding:7px 9px}.site-header .brand{min-width:0}}
@media(prefers-reduced-motion:reduce){.site-header .navlinks a,.btn{transition:none!important}.site-header .navlinks a:hover,.btn:hover{transform:none!important}.btn::after{display:none!important}}