/* Acabamento v1.31 – inspirado em padrões de sistemas de design: rótulos técnicos, escala de sombras e raios, movimento único */
:root{--sp-r-card:16px;--sp-r-md:12px;--sp-r-sm:9px;--sp-r-pill:999px;
--sp-sh-sm:0 1px 2px rgba(11,31,58,.06),0 4px 14px rgba(11,31,58,.05);--sp-sh-md:0 6px 24px rgba(11,31,58,.10);--sp-sh-lg:0 22px 60px rgba(11,31,58,.18);
--sp-sh-cta:0 6px 22px rgba(0,119,182,.38);--sp-sh-wa:0 6px 22px rgba(0,174,239,.40);
--sp-ease:cubic-bezier(.16,.84,.34,1);--sp-grad:linear-gradient(100deg,#00AEEF,#0077B6 60%,#2E7DD1);--sp-grad-light:linear-gradient(100deg,#5FD3FF,#00AEEF 55%,#3B8FE0);
--sp-mono:ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,Consolas,monospace}
/* 1. Rótulos em fonte técnica */
.sp-eyebrow,.sp-sheet-eyebrow,.lp-eyebrow,.sp-store-kicker,.sp-collection-kicker{font-family:var(--sp-mono)!important;font-weight:600!important;font-size:13px;letter-spacing:.14em}
.sp-sheet-list a b{font-family:var(--sp-mono)}
/* 2. Palavra de destaque com degradê */
.sp-grad{background:var(--sp-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.sp-navy .sp-grad,.sp-dark .sp-grad,.sp-hero .sp-grad,.sp-purple .sp-grad{background-image:var(--sp-grad-light)}
/* 3. Escala de sombras e raios */
.sp-prod{border-radius:var(--sp-r-card);box-shadow:var(--sp-sh-sm)}.sp-prod:hover{box-shadow:var(--sp-sh-lg)}
.sp-card,.sp-cta-card,.sp-dry-panel,.sp-postcta,.sp-faqban{border-radius:var(--sp-r-card);box-shadow:var(--sp-sh-sm)}
.sp-steps li{border-radius:var(--sp-r-card)}.sp-points li,.sp-note{border-radius:var(--sp-r-md)}
.sp-cta-card:hover,.sp-card:hover{box-shadow:var(--sp-sh-md)}
/* 4. Botão principal com sombra colorida */
.sp-btn-blue,.sp-add{box-shadow:var(--sp-sh-cta)}.sp-btn-cyan{box-shadow:var(--sp-sh-wa)}
.sp-btn:hover,.sp-add:hover{transform:translateY(-1px)}.sp-btn:active,.sp-add:active{transform:none}
.sp-btn-ghost,.sp-btn-outline,.sp-btn-line,.sp-off{box-shadow:none}
/* 5. Um só movimento */
.sp-btn,.sp-add,.sp-prod,.sp-card,.sp-cta-card,.sp-menu a,.sp-chipnav a{transition-timing-function:var(--sp-ease);transition-duration:.35s}
.js .sp-rv{transition:opacity .8s var(--sp-ease),transform .8s var(--sp-ease)}
.sp-stat,.sp-points li,.sp-who li,.sp-why li,.sp-impl li{transition:transform .35s var(--sp-ease),box-shadow .35s var(--sp-ease)}
/* 6. Faixa de números em cartões (KPI) */
.sp-statgrid{gap:14px}
.sp-stat{border:1px solid rgba(255,255,255,.22);border-left:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.10);border-radius:var(--sp-r-card);padding:20px 20px 18px;box-shadow:0 1px 0 rgba(255,255,255,.12) inset}
.sp-stat:hover{transform:translateY(-3px);background:rgba(255,255,255,.14)}
.sp-statn{font-size:clamp(40px,5.2vw,64px)}
.sp-stat p{font-family:var(--sp-mono);font-size:13px;letter-spacing:.04em;line-height:1.5;color:#EAF6FD;margin-top:10px}
@media(prefers-reduced-motion:reduce){.sp-btn:hover,.sp-add:hover,.sp-stat:hover{transform:none}}