/* ============================================================
   K SMART · Components — chrome, nav, overlays, footer
   ============================================================ */

/* Scroll progress */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:var(--z-header);pointer-events:none}
.progress__bar{height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--brand),var(--violet),var(--sky));will-change:transform}

/* Preloader */
.loader{position:fixed;inset:0;z-index:var(--z-loader);display:grid;place-items:center;background:var(--paper);transition:opacity .6s var(--e-out),visibility .6s}
.loader.is-done{opacity:0;visibility:hidden}
.loader__inner{display:grid;justify-items:center;gap:1.2rem;width:min(80vw,300px);text-align:center}
.loader__logo{display:flex;align-items:center;gap:.55rem;font-family:var(--f-display);font-weight:700;font-size:1.3rem;letter-spacing:-.02em;color:var(--ink)}
.loader__track{width:100%;height:3px;border-radius:3px;background:var(--paper-3);overflow:hidden}
.loader__fill{height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--violet));transition:width .3s var(--e-out)}
.loader__pct{font-variant-numeric:tabular-nums;font-size:var(--t-tiny);color:var(--ink-4);letter-spacing:.08em}
html.is-loading{overflow:hidden}

/* Custom cursor (fine pointer) */
.cursor{position:fixed;top:0;left:0;z-index:var(--z-cursor);pointer-events:none;opacity:0;transition:opacity .3s ease}
.cursor__dot{position:fixed;width:6px;height:6px;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%);will-change:transform}
.cursor__ring{position:fixed;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(11,18,32,.28);transform:translate(-50%,-50%);will-change:transform,width,height;transition:width .3s var(--e-out),height .3s var(--e-out),border-color .3s ease,background .3s ease}
.cursor.is-active .cursor__ring{width:54px;height:54px;border-color:var(--brand);background:rgba(11,95,255,.08)}
.cursor.is-active .cursor__dot{opacity:0}
.cursor.is-down .cursor__ring{width:28px;height:28px}
body.cursor-on{cursor:none}
body.cursor-on a,body.cursor-on button,body.cursor-on input,body.cursor-on select,body.cursor-on [role=button]{cursor:none}

/* Announcement ticker */
.ticker-bar{background:var(--ink);color:#fff;font-size:.78rem;overflow:hidden;position:relative;z-index:calc(var(--z-header) + 1)}
.ticker-bar__inner{display:flex;align-items:center;height:var(--bar-h)}
.ticker{display:flex;gap:2.6rem;white-space:nowrap;animation:ticker 44s linear infinite;padding-left:2.6rem}
.ticker-bar:hover .ticker{animation-play-state:paused}
.ticker span{display:inline-flex;align-items:center;gap:.6rem;opacity:.9}
.ticker span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--sky);box-shadow:0 0 8px var(--sky)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* Header */
.header{position:sticky;top:0;z-index:var(--z-header);transition:transform .5s var(--e-out)}
.header.is-hidden{transform:translateY(-100%)}
.header__bar{height:var(--nav-h);display:flex;align-items:center;background:rgba(244,246,251,.72);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid transparent;transition:background .4s ease,border-color .4s ease,box-shadow .4s ease}
.header.is-stuck .header__bar{background:rgba(255,255,255,.85);border-bottom-color:var(--line);box-shadow:0 1px 30px -14px rgba(11,18,32,.3)}
.header__inner{display:flex;align-items:center;gap:clamp(.75rem,2.5vw,2rem);width:100%;max-width:var(--maxw-wide);margin-inline:auto;padding-inline:var(--gutter)}

.brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.brand__mark{width:38px;height:38px;flex-shrink:0;border-radius:11px;transition:transform .6s var(--e-spring)}
.brand:hover .brand__mark{transform:rotate(-6deg) scale(1.04)}
.brand__name{font-family:var(--f-display);font-weight:700;font-size:1.16rem;letter-spacing:-.02em;color:var(--ink);line-height:1}
.brand__tag{display:block;font-family:var(--f-body);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);font-weight:600;margin-top:3px}

.nav{display:flex;align-items:center;gap:.1rem;margin-inline:auto}
.nav__item{position:relative}
.nav__link{display:inline-flex;align-items:center;gap:.35em;padding:.55rem .82rem;border-radius:var(--r-pill);font-size:.9rem;font-weight:500;color:var(--ink-2);letter-spacing:-.005em;transition:color .3s ease,background .3s ease}
.nav__link:hover,.nav__item.is-open .nav__link{color:var(--ink);background:rgba(11,18,32,.05)}
.nav__link[aria-current="page"]{color:var(--brand);font-weight:600}
.nav__link svg{opacity:.5;transition:transform .4s var(--e-out)}
.nav__item.is-open .nav__link svg{transform:rotate(180deg)}

.mega{position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;width:min(760px,calc(100vw - 2*var(--gutter)));background:rgba(255,255,255,.92);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-4);padding:1.6rem;display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);transform-origin:top center;transition:opacity .35s var(--e-out),transform .35s var(--e-out),visibility .35s}
.nav__item.is-open .mega{opacity:1;visibility:visible;transform:none}
.mega__title{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);font-weight:600;margin-bottom:.85rem}
.mega__grid{display:grid;grid-template-columns:1fr 1fr;gap:.15rem .5rem}
.mega__link{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .65rem;margin-inline:-.65rem;border-radius:var(--r-sm);font-size:.9rem;color:var(--ink-2);transition:background .25s ease,color .25s ease,transform .3s var(--e-out)}
.mega__link:hover{background:var(--paper-2);color:var(--ink);transform:translateX(3px)}
.mega__link small{color:var(--ink-4);font-size:.72rem}
.mega__cta{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;border-radius:var(--r-md);background:linear-gradient(120deg,var(--brand-soft),rgba(108,92,231,.08));border:1px solid rgba(11,95,255,.14)}
.mega__cta b{font-family:var(--f-display);font-size:.98rem;color:var(--ink)}
.mega__cta p{font-size:.8rem;color:var(--ink-3)}

.header__actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0;margin-left:auto}
.nav+.header__actions{margin-left:0}
.header__actions .btn--wa{padding:.6em 1em;font-size:.86rem}
.icon-btn{width:41px;height:41px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);transition:background .3s ease,color .3s ease,transform .3s var(--e-out);position:relative}
.icon-btn:hover{background:rgba(11,18,32,.055);color:var(--ink)}
.icon-btn:active{transform:scale(.92)}
.header__call{display:inline-flex}
.burger{display:none}
.burger span{display:block;width:18px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .45s var(--e-out),opacity .3s ease}
.burger span+span{margin-top:4.5px}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Mobile drawer */
.mobile-nav{position:fixed;inset:0;z-index:calc(var(--z-header) - 1);background:rgba(244,246,251,.98);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);padding:calc(var(--nav-h) + 46px) var(--gutter) 2rem;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .45s var(--e-out),transform .55s var(--e-out),visibility .45s}
body.menu-open .mobile-nav{opacity:1;visibility:visible;transform:none}
.mobile-nav__list{border-top:1px solid var(--line)}
.mobile-nav__list li{border-bottom:1px solid var(--line);overflow:hidden}
.mobile-nav__list a{display:flex;align-items:center;justify-content:space-between;padding:1rem .25rem;font-family:var(--f-display);font-size:1.35rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);transform:translateY(100%);opacity:0;transition:transform .7s var(--e-out),opacity .5s ease,color .3s ease;transition-delay:var(--d,0ms)}
.mobile-nav__list a[aria-current="page"]{color:var(--brand)}
body.menu-open .mobile-nav__list a{transform:none;opacity:1}
.mobile-nav__list a span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);font-family:var(--f-body);font-weight:600}
.mobile-nav__foot{margin-top:auto;padding-top:1.75rem;display:grid;gap:.6rem}
.mobile-nav__meta{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;font-size:.82rem;color:var(--ink-3);padding-top:1rem}

/* Floating quick actions (mobile) */
.qa{position:fixed;right:clamp(.85rem,3vw,1.5rem);bottom:clamp(.85rem,3vw,1.5rem);z-index:var(--z-fab);display:grid;gap:.6rem;justify-items:center}
.qa__btn{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:var(--sh-3);transform:translateY(12px) scale(.9);opacity:0;visibility:hidden;transition:opacity .4s var(--e-out),transform .5s var(--e-spring),visibility .4s,box-shadow .3s ease}
.qa.is-on .qa__btn{opacity:1;visibility:visible;transform:none}
.qa__btn:hover{box-shadow:var(--sh-4);transform:translateY(-2px)}
.qa__btn--wa{background:var(--whatsapp)}
.qa__btn--call{background:var(--brand)}
.qa__btn--top{background:var(--surface);color:var(--ink);border:1px solid var(--line);width:44px;height:44px}
.qa__btn .pulse{position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;opacity:.5;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.5);opacity:0}}

/* Footer */
.footer{background:var(--ink);color:rgba(255,255,255,.72);padding-block:clamp(3rem,6vw,5rem) 1.75rem;position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;width:60%;height:300px;left:-10%;top:-120px;background:radial-gradient(circle,rgba(11,95,255,.22),transparent 65%);filter:blur(30px);pointer-events:none}
.footer__grid{position:relative;display:grid;grid-template-columns:1.5fr repeat(3,1fr) 1.3fr;gap:clamp(1.75rem,3.5vw,3rem)}
.footer__brandcol{display:grid;gap:1.1rem;align-content:start;max-width:34ch}
.footer .brand__name{color:#fff}
.footer .brand__tag{color:rgba(255,255,255,.5)}
.footer__brandcol p{font-size:.9rem;color:rgba(255,255,255,.6)}
.footer__contact{display:grid;gap:.4rem;font-size:.9rem}
.footer__contact a{color:rgba(255,255,255,.82);display:inline-flex;align-items:center;gap:.5rem;transition:color .3s ease}
.footer__contact a:hover{color:#fff}
.footer h5{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600;margin-bottom:1rem}
.footer__links li+li{margin-top:.55rem}
.footer__links a{font-size:.9rem;color:rgba(255,255,255,.62);transition:color .3s ease,padding-left .3s var(--e-out);display:inline-block}
.footer__links a:hover{color:#fff;padding-left:4px}
.socials{display:flex;gap:.5rem}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:rgba(255,255,255,.8);transition:all .35s var(--e-out)}
.socials a:hover{background:#fff;border-color:#fff;color:var(--ink);transform:translateY(-3px)}
.footer__bottom{position:relative;margin-top:clamp(2.25rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between;font-size:.82rem;color:rgba(255,255,255,.5)}
.footer__legal{display:flex;flex-wrap:wrap;gap:1rem}
.footer__legal a:hover{color:#fff}
.footer__powered{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;color:rgba(255,255,255,.6)}
.footer__powered a{display:inline-flex;align-items:center;gap:.4rem;color:#fff;font-weight:600;font-family:var(--f-display);padding:.35rem .7rem;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.18);transition:background .3s ease,border-color .3s ease,transform .3s var(--e-out)}
.footer__powered a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);transform:translateY(-1px)}
.footer__powered a svg{width:14px;height:14px;color:var(--sky)}
.pay{display:flex;gap:.4rem;flex-wrap:wrap}
.pay span{font-size:.66rem;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.16);border-radius:5px;padding:.35em .55em}

/* Scrim */
.scrim{position:fixed;inset:0;z-index:var(--z-drawer);background:rgba(11,18,32,.5);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .45s var(--e-out),visibility .45s}
body.modal-open .scrim{opacity:1;visibility:visible}

/* Quick-view modal */
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:var(--gutter);opacity:0;visibility:hidden;transition:opacity .4s var(--e-out),visibility .4s}
body.modal-open .modal{opacity:1;visibility:visible}
.modal__card{position:relative;width:min(880px,100%);max-height:min(88vh,720px);overflow:hidden;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-4);display:grid;grid-template-columns:1.05fr .95fr;transform:translateY(24px) scale(.97);transition:transform .55s var(--e-spring)}
body.modal-open .modal__card{transform:none}
.modal__media{position:relative;background:linear-gradient(160deg,#EEF3FB,#FFFFFF 55%,#E7EDF7);padding:1.5rem;display:flex}
.modal__media .media{flex:1;border-radius:var(--r-lg);min-height:240px}
.modal__body{padding:1.75rem;display:flex;flex-direction:column;gap:.85rem;overflow-y:auto}
.modal__brand{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);font-weight:600}
.modal__title{font-size:clamp(1.4rem,3vw,1.9rem)}
.modal__price{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.modal__price b{font-family:var(--f-display);font-size:1.5rem;font-weight:700;color:var(--ink)}
.modal__price span{font-size:.82rem;color:var(--ink-4)}
.modal__specs{display:flex;flex-wrap:wrap;gap:.4rem}
.modal__specs span{font-size:.75rem;color:var(--ink-3);background:var(--paper);border-radius:6px;padding:.3em .6em}
.modal__feats{display:grid;gap:.5rem;margin-top:.2rem}
.modal__feats li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--ink-3)}
.modal__feats svg{color:var(--emerald);flex-shrink:0;margin-top:.15rem}
.modal__cta{display:flex;gap:.6rem;margin-top:auto;padding-top:.5rem;flex-wrap:wrap}
.modal__cta .btn{flex:1;min-width:140px}
.modal__note{font-size:.75rem;color:var(--ink-4)}
.modal__close{position:absolute;top:1rem;right:1rem;z-index:4;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);display:grid;place-items:center;color:var(--ink);box-shadow:var(--sh-1);transition:transform .3s var(--e-spring),background .3s ease}
.modal__close:hover{transform:rotate(90deg);background:#fff}

/* Toast */
.toasts{position:fixed;left:50%;bottom:calc(1.5rem + 60px);translate:-50% 0;z-index:var(--z-toast);display:grid;gap:.5rem;justify-items:center;pointer-events:none;width:min(92vw,420px)}
.toast{display:flex;align-items:center;gap:.7rem;padding:.8rem 1.1rem;border-radius:var(--r-pill);background:rgba(11,18,32,.94);color:#fff;font-size:.88rem;box-shadow:var(--sh-4);backdrop-filter:blur(12px);transform:translateY(16px) scale(.96);opacity:0;animation:toastIn .5s var(--e-spring) forwards;max-width:100%}
.toast svg{color:var(--emerald);flex-shrink:0}
.toast.is-out{animation:toastOut .35s var(--e-out) forwards}
@keyframes toastIn{to{transform:none;opacity:1}}
@keyframes toastOut{to{transform:translateY(10px) scale(.97);opacity:0}}