/* =====================================================================
   SmartPrompts Design System · v1.0
   Irmão corporativo do LIA Design System: mesmas cores, postura mais
   profissional (cantos menores, azul como ação, tipografia geométrica),
   com toques simpáticos (marca-texto, cursor piscando, balões de chat).
   Dependências (carregadas pela página):
     Fontes  → Google Fonts: Plus Jakarta Sans (400–800) + JetBrains Mono (400/500)
     Ícones  → iconify-icon 2.1.0 (coleção Phosphor, prefixo "ph:")
     Motion  → anime.js 3.2.2        Confete → canvas-confetti 1.9.3
   Convenção: prefixo "sp-". Modificadores "--", partes "__".
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root {
  /* Marca (mesmas da LIA) */
  --sp-sky: #509fe4;
  --sp-butter: #fde88e;
  --sp-amber: #eb9a2e;
  --sp-amber-deep: #c7700e;

  /* Azul: 600 é a cor de ação (contraste AA com branco) */
  --sp-blue-50: #f3f8fe;
  --sp-blue-100: #e5f0fc;
  --sp-blue-200: #c9e0f8;
  --sp-blue-300: #9dc7f1;
  --sp-blue-400: #74b1ec;
  --sp-blue-500: #509fe4;
  --sp-blue-600: #256db3;
  --sp-blue-700: #1d5a96;
  --sp-blue-800: #17477a;
  --sp-blue-900: #0f2440;

  /* Quentes */
  --sp-butter-50: #fffcee;
  --sp-butter-100: #fff6d2;
  --sp-butter-200: #fde88e;
  --sp-butter-300: #f7d966;
  --sp-amber-100: #fdecd4;
  --sp-amber-300: #f2aa45;
  --sp-amber-500: #eb9a2e;
  --sp-amber-700: #c7700e;
  --sp-amber-800: #9a560a;

  /* Neutros (ardósia levemente azulada) */
  --sp-ink: #0f2440;
  --sp-ink-2: #2b3d57;
  --sp-slate: #56657b;
  --sp-muted: #8592a6;
  --sp-line: #e3e9f1;
  --sp-line-strong: #cad5e3;
  --sp-surface: #ffffff;
  --sp-bg: #f5f8fc;
  --sp-bg-2: #edf2f8;

  /* Semânticas */
  --sp-success: #1f8a5b;
  --sp-success-soft: #e3f4eb;
  --sp-danger: #c8423d;
  --sp-danger-soft: #fce9e8;
  --sp-warning: var(--sp-amber-800);
  --sp-warning-soft: var(--sp-butter-100);
  --sp-info: var(--sp-blue-600);
  --sp-info-soft: var(--sp-blue-100);

  /* Gradientes */
  --sp-grad-hero: radial-gradient(ellipse 60% 70% at 85% 10%, rgba(80,159,228,.35), transparent 60%),
                  radial-gradient(ellipse 50% 60% at 0% 100%, rgba(253,232,142,.18), transparent 60%),
                  linear-gradient(180deg, #0f2440 0%, #14305a 100%);
  --sp-grad-sky: linear-gradient(135deg, #509fe4 0%, #3587d6 100%);
  --sp-grad-mark: linear-gradient(135deg, #5aa7e8 0%, #256db3 100%);
  --sp-dots: radial-gradient(var(--sp-line) 1px, transparent 1px) 0 0 / 18px 18px;

  /* Tipografia */
  --sp-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sp-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sp-text-xs: 12px;
  --sp-text-sm: 14px;
  --sp-text-base: 16px;
  --sp-text-md: 18px;
  --sp-text-lg: 20px;
  --sp-text-xl: 24px;
  --sp-text-2xl: 32px;
  --sp-text-3xl: 40px;
  --sp-text-4xl: 56px;

  /* Espaço (base 4) */
  --sp-space-1: 4px;  --sp-space-2: 8px;  --sp-space-3: 12px; --sp-space-4: 16px;
  --sp-space-5: 20px; --sp-space-6: 24px; --sp-space-8: 32px; --sp-space-10: 40px;
  --sp-space-12: 48px; --sp-space-16: 64px; --sp-space-20: 80px; --sp-space-24: 96px;

  /* Raios (mais contidos que a LIA) */
  --sp-radius-xs: 4px;
  --sp-radius-sm: 6px;
  --sp-radius-md: 10px;
  --sp-radius-lg: 14px;
  --sp-radius-xl: 20px;
  --sp-radius-pill: 999px;

  /* Sombras */
  --sp-shadow-xs: 0 1px 2px rgba(15,36,64,.06);
  --sp-shadow-sm: 0 1px 2px rgba(15,36,64,.06), 0 2px 8px -2px rgba(15,36,64,.08);
  --sp-shadow-md: 0 2px 4px rgba(15,36,64,.04), 0 12px 28px -10px rgba(15,36,64,.18);
  --sp-shadow-lg: 0 4px 8px rgba(15,36,64,.04), 0 28px 60px -20px rgba(15,36,64,.30);
  --sp-ring: 0 0 0 4px rgba(80,159,228,.25);

  /* Motion */
  --sp-dur-fast: 120ms;
  --sp-dur: 200ms;
  --sp-dur-slow: 420ms;
  --sp-ease-out: cubic-bezier(.22,1,.36,1);
  --sp-ease-spring: cubic-bezier(.3,1.4,.5,1);

  /* Camadas */
  --sp-z-nav: 30; --sp-z-dropdown: 40; --sp-z-overlay: 60; --sp-z-toast: 70;

  --sp-lia: url("lia-mascote.webp");
}

/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
.sp, .sp *, .sp *::before, .sp *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.sp {
  margin: 0; font-family: var(--sp-font); font-size: var(--sp-text-base); line-height: 1.6;
  color: var(--sp-ink); background: var(--sp-bg); -webkit-font-smoothing: antialiased;
}
.sp button, .sp input, .sp select, .sp textarea { font-family: inherit; }
.sp a { color: var(--sp-blue-600); }
.sp :focus-visible { outline: 3px solid var(--sp-blue-400); outline-offset: 2px; }
.sp [tabindex="-1"]:focus { outline: none; }
.sp iconify-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; }
.sp ::selection { background: var(--sp-butter); color: var(--sp-ink); }

.sp-bg { background: var(--sp-bg); }
.sp-bg-white { background: var(--sp-surface); }
.sp-bg-dots { background: var(--sp-bg); background-image: radial-gradient(var(--sp-line-strong) 1px, transparent 1px); background-size: 18px 18px; }
.sp-bg-dark { background: var(--sp-ink); background-image: var(--sp-grad-hero); color: #fff; }
.sp-bg-sky { background: var(--sp-grad-sky); color: #fff; }

/* ---------------------------------------------------------------------
   3. TIPOGRAFIA
   --------------------------------------------------------------------- */
.sp-display, .sp-h1, .sp-h2, .sp-h3, .sp-h4 { margin: 0; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; color: inherit; }
.sp-display { font-size: clamp(38px, 7vw, var(--sp-text-4xl)); line-height: 1.05; letter-spacing: -0.035em; }
.sp-h1 { font-size: clamp(30px, 5.5vw, var(--sp-text-3xl)); line-height: 1.1; }
.sp-h2 { font-size: clamp(24px, 4.2vw, var(--sp-text-2xl)); line-height: 1.15; }
.sp-h3 { font-size: var(--sp-text-xl); line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; }
.sp-h4 { font-size: var(--sp-text-md); line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; }
.sp-lead { margin: 0; font-size: var(--sp-text-md); color: var(--sp-slate); max-width: 60ch; }
.sp-text { margin: 0; max-width: 68ch; }
.sp-small { font-size: var(--sp-text-sm); color: var(--sp-slate); }
.sp-overline {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--sp-text-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-blue-600);
}
.sp-overline::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--sp-amber); }
.sp-code { font-family: var(--sp-font-mono); font-size: .86em; background: var(--sp-blue-100); color: var(--sp-blue-700); padding: 2px 6px; border-radius: var(--sp-radius-xs); }
.sp-mono { font-family: var(--sp-font-mono); }
.sp-on-dark { color: #fff; }
.sp-on-dark .sp-lead, .sp-bg-dark .sp-lead, .sp-bg-sky .sp-lead { color: rgba(255,255,255,.82); }

/* Marca-texto: o toque divertido nos títulos */
.sp-mark {
  position: relative; white-space: nowrap; z-index: 0;
  background: linear-gradient(transparent 58%, var(--sp-butter) 58%, var(--sp-butter) 92%, transparent 92%);
  background-repeat: no-repeat; background-size: 100% 100%; padding: 0 .08em; margin: 0 -.08em;
}
.sp-mark--sky { background-image: linear-gradient(transparent 58%, rgba(80,159,228,.35) 58%, rgba(80,159,228,.35) 92%, transparent 92%); }
.sp-mark--solid { background: var(--sp-butter); color: var(--sp-ink); padding: 0 .16em; margin: 0; border-radius: .14em; display: inline-block; transform: rotate(-1.5deg); box-shadow: 0 .06em 0 var(--sp-butter-300); }
.sp-mark--draw { background-size: 0% 100%; transition: background-size .8s var(--sp-ease-out); }
.sp-mark--draw.is-drawn { background-size: 100% 100%; }
.sp-text-blue { color: var(--sp-blue-600); }
.sp-text-sky { color: var(--sp-sky); }
.sp-text-amber { color: var(--sp-amber-700); }

/* Cursor piscando (identidade "prompt") */
.sp-caret { display: inline-block; width: .5em; height: 1em; margin-left: .08em; vertical-align: -0.12em; background: var(--sp-amber); border-radius: 2px; animation: sp-blink 1.05s steps(1) infinite; }

/* ---------------------------------------------------------------------
   4. LAYOUT
   --------------------------------------------------------------------- */
.sp-container { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: var(--sp-space-5); }
.sp-container--md { max-width: 960px; }
.sp-container--sm { max-width: 720px; }
.sp-section { padding-block: var(--sp-space-20); }
.sp-section--sm { padding-block: var(--sp-space-12); }
.sp-section-head { display: flex; flex-direction: column; gap: var(--sp-space-3); margin-bottom: var(--sp-space-10); }
.sp-section-head--center { align-items: center; text-align: center; }
.sp-section-head--center .sp-lead { margin-inline: auto; }
.sp-stack { display: flex; flex-direction: column; gap: var(--sp-space-4); }
.sp-stack--sm { gap: var(--sp-space-2); }
.sp-stack--lg { gap: var(--sp-space-8); }
.sp-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-space-3); }
.sp-row--between { justify-content: space-between; }
.sp-row--center { justify-content: center; }
.sp-grid { display: grid; gap: var(--sp-space-5); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.sp-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.sp-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.sp-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-space-12); align-items: center; }
@media (max-width: 880px) { .sp-split { grid-template-columns: 1fr; gap: var(--sp-space-8); } }
.sp-center { text-align: center; }
.sp-divider { height: 1px; border: 0; background: var(--sp-line); margin: var(--sp-space-6) 0; }
.sp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ---------------------------------------------------------------------
   5. LOGO
   --------------------------------------------------------------------- */
.sp-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sp-ink); font-weight: 800; font-size: 20px; letter-spacing: -0.03em; line-height: 1; }
.sp .sp-logo { color: var(--sp-ink); }
.sp-logo__mark { position: relative; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--sp-grad-mark); display: grid; place-items: center; box-shadow: inset 0 -2px 0 rgba(15,36,64,.18); }
.sp-logo__mark svg { width: 22px; height: 22px; }
.sp-logo__spark { position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; color: var(--sp-butter); filter: drop-shadow(0 0 3px rgba(253,232,142,.9)); }
.sp-logo__word b { font-weight: 800; color: var(--sp-blue-600); }
.sp-logo--light, .sp .sp-logo--light { color: #fff; }
.sp-logo--light .sp-logo__word b { color: var(--sp-sky); }
.sp-logo--lg { font-size: 30px; gap: 14px; }
.sp-logo--lg .sp-logo__mark { width: 54px; height: 54px; border-radius: 14px; }
.sp-logo--lg .sp-logo__mark svg { width: 32px; height: 32px; }
.sp-logo--lg .sp-logo__spark { width: 20px; height: 20px; top: -7px; right: -7px; }

/* ---------------------------------------------------------------------
   6. ÍCONES
   --------------------------------------------------------------------- */
.sp-icon-box {
  width: 44px; height: 44px; flex: none; border-radius: var(--sp-radius-md); display: inline-grid; place-items: center; font-size: 22px;
  background: var(--sp-blue-100); color: var(--sp-blue-600);
}
.sp-icon-box--sm { width: 32px; height: 32px; font-size: 17px; border-radius: var(--sp-radius-sm); }
.sp-icon-box--lg { width: 56px; height: 56px; font-size: 28px; border-radius: var(--sp-radius-lg); }
.sp-icon-box--butter { background: var(--sp-butter-100); color: var(--sp-amber-800); }
.sp-icon-box--amber { background: var(--sp-amber); color: var(--sp-ink); }
.sp-icon-box--blue { background: var(--sp-blue-600); color: #fff; }
.sp-icon-box--ink { background: var(--sp-ink); color: var(--sp-butter); }
.sp-icon-box--outline { background: #fff; color: var(--sp-blue-600); box-shadow: inset 0 0 0 1px var(--sp-line-strong); }
.sp-icon-box--success { background: var(--sp-success-soft); color: var(--sp-success); }
.sp-icon-box--danger { background: var(--sp-danger-soft); color: var(--sp-danger); }
.sp-icon-box--round { border-radius: 50%; }

/* ---------------------------------------------------------------------
   7. BOTÕES
   --------------------------------------------------------------------- */
.sp-btn {
  --b-bg: var(--sp-blue-600); --b-bg-h: var(--sp-blue-700); --b-fg: #fff; --b-depth: var(--sp-blue-800);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border: 0; border-radius: var(--sp-radius-md);
  background: var(--b-bg); color: var(--b-fg); font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: -0.005em;
  white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
  box-shadow: 0 3px 0 var(--b-depth);
  transition: transform var(--sp-dur-fast) ease, box-shadow var(--sp-dur-fast) ease, background-color var(--sp-dur) ease, color var(--sp-dur) ease;
}
.sp .sp-btn { color: var(--b-fg); }
.sp-btn:hover { background: var(--b-bg-h); }
.sp-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--b-depth); }
.sp-btn iconify-icon { font-size: 1.2em; }
.sp-btn__arrow { transition: transform var(--sp-dur) var(--sp-ease-out); }
.sp-btn:hover .sp-btn__arrow { transform: translateX(3px); }

.sp-btn--accent { --b-bg: var(--sp-amber); --b-bg-h: #f1a53f; --b-fg: var(--sp-ink); --b-depth: var(--sp-amber-700); }
.sp-btn--dark { --b-bg: var(--sp-ink); --b-bg-h: var(--sp-ink-2); --b-fg: #fff; --b-depth: #050d18; }
.sp-btn--butter { --b-bg: var(--sp-butter); --b-bg-h: #fff0a8; --b-fg: var(--sp-ink); --b-depth: var(--sp-butter-300); }
.sp-btn--success { --b-bg: var(--sp-success); --b-bg-h: #1a7a50; --b-depth: #145c3c; }
.sp-btn--danger { --b-bg: var(--sp-danger); --b-bg-h: #b33833; --b-depth: #8e2c28; }
.sp-btn--white { --b-bg: #fff; --b-bg-h: var(--sp-blue-50); --b-fg: var(--sp-ink); --b-depth: rgba(15,36,64,.25); }

/* Sem profundidade */
.sp-btn--secondary, .sp-btn--soft, .sp-btn--ghost, .sp-btn--link, .sp-btn--outline-light { box-shadow: none; }
.sp-btn--secondary:active, .sp-btn--soft:active, .sp-btn--ghost:active, .sp-btn--outline-light:active { transform: translateY(1px); }
.sp-btn--secondary { --b-bg: #fff; --b-bg-h: var(--sp-bg); --b-fg: var(--sp-ink); box-shadow: inset 0 0 0 1px var(--sp-line-strong), var(--sp-shadow-xs); }
.sp-btn--secondary:active { box-shadow: inset 0 0 0 1px var(--sp-line-strong); }
.sp-btn--soft { --b-bg: var(--sp-blue-100); --b-bg-h: var(--sp-blue-200); --b-fg: var(--sp-blue-700); }
.sp-btn--ghost { --b-bg: transparent; --b-bg-h: var(--sp-bg-2); --b-fg: var(--sp-slate); }
.sp-btn--ghost:hover { --b-fg: var(--sp-ink); }
.sp-btn--link { --b-bg: transparent; --b-bg-h: transparent; --b-fg: var(--sp-blue-600); padding-inline: 2px; min-height: auto; }
.sp-btn--link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.sp-btn--link:active { transform: none; }
.sp-btn--outline-light { --b-bg: transparent; --b-bg-h: rgba(255,255,255,.1); --b-fg: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.sp-btn--outline-light:active { box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }

.sp-btn--sm { min-height: 36px; padding: 7px 14px; font-size: 14px; gap: 6px; border-radius: var(--sp-radius-sm); }
.sp-btn--lg { min-height: 52px; padding: 14px 26px; font-size: 16px; }
.sp-btn--xl { min-height: 60px; padding: 16px 32px; font-size: 17px; border-radius: var(--sp-radius-lg); }
.sp-btn--pill { border-radius: var(--sp-radius-pill); }
.sp-btn--block { display: flex; width: 100%; }
.sp-btn--icon { width: 44px; padding: 0; }
.sp-btn--icon.sp-btn--sm { width: 36px; }
.sp-btn--icon.sp-btn--lg { width: 52px; }

.sp-btn:disabled, .sp-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.sp-btn[data-loading="true"] { color: transparent !important; pointer-events: none; }
.sp-btn[data-loading="true"]::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--b-fg); border-right-color: transparent; animation: sp-spin .7s linear infinite; }

.sp-btn-group { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--sp-radius-md); background: var(--sp-bg-2); }
.sp-btn-group .sp-btn { --b-bg: transparent; --b-bg-h: rgba(255,255,255,.6); --b-fg: var(--sp-slate); box-shadow: none; min-height: 36px; padding: 7px 14px; font-size: 14px; border-radius: 8px; }
.sp-btn-group .sp-btn[aria-pressed="true"] { --b-bg: #fff; --b-bg-h: #fff; --b-fg: var(--sp-ink); box-shadow: var(--sp-shadow-sm); }
.sp-btn-group .sp-btn:active { transform: none; }

/* ---------------------------------------------------------------------
   8. BADGES, TAGS, CHIPS, KBD
   --------------------------------------------------------------------- */
.sp-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--sp-radius-sm);
  font-size: 12.5px; font-weight: 700; line-height: 1.5; background: var(--sp-blue-100); color: var(--sp-blue-700);
}
.sp-badge--pill { border-radius: var(--sp-radius-pill); padding-inline: 11px; }
.sp-badge--butter { background: var(--sp-butter-100); color: var(--sp-amber-800); }
.sp-badge--amber { background: var(--sp-amber); color: var(--sp-ink); }
.sp-badge--blue { background: var(--sp-blue-600); color: #fff; }
.sp-badge--ink { background: var(--sp-ink); color: #fff; }
.sp-badge--success { background: var(--sp-success-soft); color: #176a45; }
.sp-badge--danger { background: var(--sp-danger-soft); color: #a3342f; }
.sp-badge--neutral { background: var(--sp-bg-2); color: var(--sp-slate); }
.sp-badge--outline { background: #fff; color: var(--sp-slate); box-shadow: inset 0 0 0 1px var(--sp-line-strong); }
.sp-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sp-badge__dot--live { animation: sp-pulse-dot 1.6s ease-out infinite; }

/* Selo de anúncio (ex.: "Novo · LIA chegou") */
.sp-announce {
  display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: var(--sp-radius-pill);
  background: #fff; box-shadow: inset 0 0 0 1px var(--sp-line), var(--sp-shadow-xs);
  font-size: 14px; font-weight: 600; color: var(--sp-ink); text-decoration: none;
}
.sp-announce .sp-badge { border-radius: var(--sp-radius-pill); }
.sp-announce iconify-icon { color: var(--sp-blue-600); transition: transform var(--sp-dur); }
.sp-announce:hover iconify-icon { transform: translateX(3px); }
.sp-announce--dark { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.sp .sp-announce--dark { color: #fff; }
.sp-announce--dark iconify-icon { color: var(--sp-butter); }

.sp-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--sp-radius-md);
  border: 1px solid var(--sp-line-strong); background: #fff; color: var(--sp-ink-2); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color var(--sp-dur), background-color var(--sp-dur), color var(--sp-dur);
}
.sp-tag:hover { border-color: var(--sp-blue-400); color: var(--sp-ink); }
.sp-tag[aria-pressed="true"] { background: var(--sp-ink); border-color: var(--sp-ink); color: #fff; }
.sp-tag__x { border: 0; background: none; padding: 0; color: inherit; opacity: .6; cursor: pointer; display: grid; }
.sp-tag__x:hover { opacity: 1; }

/* Variável de prompt {{tema}} */
.sp-var { display: inline-block; font-family: var(--sp-font-mono); font-size: .88em; font-weight: 500; padding: 1px 7px; border-radius: 6px; background: var(--sp-butter); color: var(--sp-amber-800); white-space: nowrap; }
.sp-var--blue { background: var(--sp-blue-100); color: var(--sp-blue-700); }

.sp-kbd { display: inline-block; min-width: 24px; padding: 2px 7px; border-radius: 6px; background: #fff; border: 1px solid var(--sp-line-strong); box-shadow: 0 2px 0 var(--sp-line-strong); font-family: var(--sp-font-mono); font-size: 12px; font-weight: 500; color: var(--sp-ink-2); text-align: center; }

/* ---------------------------------------------------------------------
   9. CARDS
   --------------------------------------------------------------------- */
.sp-card { position: relative; background: var(--sp-surface); border-radius: var(--sp-radius-lg); padding: var(--sp-space-6); box-shadow: inset 0 0 0 1px var(--sp-line), var(--sp-shadow-sm); }
.sp-card--flat { box-shadow: inset 0 0 0 1px var(--sp-line); }
.sp-card--raised { box-shadow: inset 0 0 0 1px var(--sp-line), var(--sp-shadow-md); }
.sp-card--float { box-shadow: var(--sp-shadow-lg); }
.sp-card--muted { background: var(--sp-bg); box-shadow: none; }
.sp-card--butter { background: var(--sp-butter-50); box-shadow: inset 0 0 0 1px var(--sp-butter-200); }
.sp-card--dark { background: var(--sp-ink); background-image: var(--sp-grad-hero); color: #fff; box-shadow: var(--sp-shadow-md); }
.sp-card--sky { background: var(--sp-grad-sky); color: #fff; box-shadow: var(--sp-shadow-md); }
.sp-card--lg { padding: var(--sp-space-10); border-radius: var(--sp-radius-xl); }
.sp-card--flush { padding: 0; overflow: hidden; }
.sp-card--link { display: block; text-decoration: none; color: inherit; transition: transform var(--sp-dur) var(--sp-ease-out), box-shadow var(--sp-dur); }
.sp .sp-card--link { color: inherit; }
.sp-card--link:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--sp-blue-300), var(--sp-shadow-md); }
.sp-card--accent-top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: var(--sp-radius-lg) var(--sp-radius-lg) 0 0; background: linear-gradient(90deg, var(--sp-sky), var(--sp-butter), var(--sp-amber)); }

.sp-card__title { margin: 0 0 6px; font-size: var(--sp-text-md); font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; }
.sp-card__text { margin: 0; color: var(--sp-slate); font-size: 15px; }
.sp-card--dark .sp-card__text, .sp-card--sky .sp-card__text { color: rgba(255,255,255,.82); }
.sp-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-space-3); margin-top: var(--sp-space-5); padding-top: var(--sp-space-4); border-top: 1px solid var(--sp-line); }
.sp-card__media { aspect-ratio: 16 / 9; background: var(--sp-blue-100) center / cover no-repeat; }
.sp-card__body { padding: var(--sp-space-6); }
.sp-card__icon { margin-bottom: var(--sp-space-4); }

/* Produto (família SmartPrompts) */
.sp-product { display: flex; flex-direction: column; gap: var(--sp-space-4); }
.sp-product__head { display: flex; align-items: center; gap: 14px; }
.sp-product__logo { width: 56px; height: 56px; flex: none; border-radius: 16px; display: grid; place-items: center; font-size: 28px; background: var(--sp-blue-100); color: var(--sp-blue-600); overflow: hidden; }
.sp-product__logo--lia { background: var(--sp-lia) 50% 28% / 260% auto no-repeat, var(--sp-sky); box-shadow: 0 0 0 3px var(--sp-butter); }
.sp-product__name { margin: 0; font-size: var(--sp-text-lg); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.sp-product__tagline { margin: 0; font-size: 14px; color: var(--sp-slate); }

/* Estatística */
.sp-stat__value { display: block; font-size: var(--sp-text-3xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--sp-ink); }
.sp-stat__value small { font-size: .55em; color: var(--sp-blue-600); }
.sp-stat__label { display: block; font-size: 14px; font-weight: 600; color: var(--sp-slate); margin-top: 4px; }
.sp-card--dark .sp-stat__value { color: #fff; }
.sp-card--dark .sp-stat__label { color: rgba(255,255,255,.7); }
.sp-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--sp-success); }
.sp-trend--down { color: var(--sp-danger); }

/* Depoimento */
.sp-quote__text { margin: 0 0 var(--sp-space-5); font-size: 17px; line-height: 1.55; color: var(--sp-ink-2); }
.sp-quote__text::before { content: "“"; display: block; font-size: 56px; line-height: .8; font-weight: 800; color: var(--sp-sky); margin-bottom: 4px; }
.sp-quote__who { display: flex; align-items: center; gap: 12px; }
.sp-quote__name { display: block; font-weight: 700; font-size: 15px; }
.sp-quote__role { display: block; font-size: 13.5px; color: var(--sp-slate); }
.sp-stars { display: inline-flex; gap: 2px; color: var(--sp-amber); font-size: 16px; }

/* Planos / preço */
.sp-plan { display: flex; flex-direction: column; gap: var(--sp-space-5); }
.sp-plan__name { font-size: var(--sp-text-md); font-weight: 800; margin: 0; }
.sp-plan__price { display: flex; align-items: baseline; gap: 4px; font-size: var(--sp-text-3xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 0; }
.sp-plan__price small { font-size: 15px; font-weight: 600; color: var(--sp-slate); letter-spacing: 0; }
.sp-plan--featured { box-shadow: inset 0 0 0 2px var(--sp-blue-600), var(--sp-shadow-lg); }
.sp-plan__flag { position: absolute; top: -12px; left: 24px; }
.sp-plan--dark .sp-plan__price small { color: rgba(255,255,255,.7); }

.sp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sp-checks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 15px; }
.sp-checks li::before {
  content: ""; width: 20px; height: 20px; margin-top: 2px; border-radius: 6px; background: var(--sp-blue-100) no-repeat center / 12px;
  background-image: url("/ds/img/check-blue.svg");
}
.sp-card--dark .sp-checks li::before { background-color: rgba(255,255,255,.12); background-image: url("/ds/img/check-butter.svg"); }

.sp-steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-space-5); counter-reset: sp-s; }
.sp-steps-list li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; counter-increment: sp-s; }
.sp-steps-list li::before { content: counter(sp-s, decimal-leading-zero); width: 40px; height: 40px; border-radius: var(--sp-radius-md); display: grid; place-items: center; font-family: var(--sp-font-mono); font-weight: 500; font-size: 14px; background: var(--sp-ink); color: var(--sp-butter); }
.sp-steps-list b { display: block; font-size: 16px; }
.sp-steps-list span { color: var(--sp-slate); font-size: 15px; }

/* Faixa de logos */
.sp-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 40px; }
.sp-logos__item { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; color: var(--sp-muted); filter: grayscale(1); opacity: .85; }
.sp-logos__item iconify-icon { font-size: 26px; }

/* ---------------------------------------------------------------------
   10. PROMPT CARD e CHAT (componentes-assinatura)
   --------------------------------------------------------------------- */
.sp-prompt { background: #fff; border-radius: var(--sp-radius-lg); box-shadow: inset 0 0 0 1px var(--sp-line), var(--sp-shadow-lg); overflow: hidden; }
.sp-prompt__bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--sp-line); background: var(--sp-bg); }
.sp-prompt__title { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--sp-ink-2); margin-right: auto; }
.sp-prompt__title iconify-icon { color: var(--sp-blue-600); font-size: 18px; }
.sp-prompt__body { padding: 18px 20px 20px; font-family: var(--sp-font-mono); font-size: 13.5px; line-height: 1.75; color: var(--sp-ink-2); white-space: pre-wrap; min-height: 150px; }
.sp-prompt__body .sp-k { color: var(--sp-blue-600); font-weight: 500; }
.sp-prompt__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--sp-line); font-size: 12.5px; color: var(--sp-slate); }
.sp-prompt--dark { background: #0b1b31; box-shadow: 0 0 0 1px rgba(255,255,255,.08), var(--sp-shadow-lg); }
.sp-prompt--dark .sp-prompt__bar { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.sp-prompt--dark .sp-prompt__title { color: #fff; }
.sp-prompt--dark .sp-prompt__title iconify-icon { color: var(--sp-sky); }
.sp-prompt--dark .sp-prompt__body { color: #d6e4f7; }
.sp-prompt--dark .sp-prompt__body .sp-k { color: var(--sp-sky); }
.sp-prompt--dark .sp-prompt__foot { border-color: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }

.sp-chat { display: flex; flex-direction: column; gap: 12px; }
.sp-bubble { max-width: 85%; padding: 12px 16px; border-radius: 16px; font-size: 15px; line-height: 1.5; }
.sp-bubble--user { align-self: flex-end; background: var(--sp-blue-600); color: #fff; border-bottom-right-radius: 4px; }
.sp-bubble--ai { align-self: flex-start; background: #fff; color: var(--sp-ink); border-bottom-left-radius: 4px; box-shadow: inset 0 0 0 1px var(--sp-line); }
.sp-bubble__who { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--sp-slate); margin-bottom: 4px; }
.sp-typing { display: inline-flex; gap: 4px; align-items: center; padding: 14px 16px; background: #fff; border-radius: 16px; border-bottom-left-radius: 4px; box-shadow: inset 0 0 0 1px var(--sp-line); align-self: flex-start; }
.sp-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--sp-muted); animation: sp-bounce-dot 1s ease-in-out infinite; }
.sp-typing span:nth-child(2) { animation-delay: .15s; } .sp-typing span:nth-child(3) { animation-delay: .3s; }

/* ---------------------------------------------------------------------
   11. FORMULÁRIOS
   --------------------------------------------------------------------- */
.sp-field { display: flex; flex-direction: column; gap: 6px; }
.sp-label { font-weight: 700; font-size: 14px; color: var(--sp-ink-2); }
.sp-label small { font-weight: 500; color: var(--sp-muted); }
.sp-help { margin: 0; font-size: 13px; color: var(--sp-slate); }
.sp-error { margin: 0; font-size: 13px; font-weight: 700; color: var(--sp-danger); display: flex; align-items: center; gap: 6px; }
.sp-input, .sp-select, .sp-textarea {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--sp-radius-md); border: 1px solid var(--sp-line-strong);
  background: #fff; color: var(--sp-ink); font-size: 15px; box-shadow: var(--sp-shadow-xs);
  transition: border-color var(--sp-dur), box-shadow var(--sp-dur);
}
.sp-input::placeholder, .sp-textarea::placeholder { color: var(--sp-muted); }
.sp-input:hover, .sp-select:hover, .sp-textarea:hover { border-color: var(--sp-muted); }
.sp-input:focus, .sp-select:focus, .sp-textarea:focus { outline: none; border-color: var(--sp-blue-500); box-shadow: var(--sp-ring); }
.sp-input[aria-invalid="true"] { border-color: var(--sp-danger); }
.sp-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(200,66,61,.18); }
.sp-input:disabled { background: var(--sp-bg); color: var(--sp-muted); cursor: not-allowed; }
.sp-input--lg { min-height: 52px; font-size: 16px; padding-inline: 16px; }
.sp-textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.sp-textarea--mono { font-family: var(--sp-font-mono); font-size: 13px; }
.sp-select { appearance: none; padding-right: 40px; cursor: pointer; background: #fff url("/ds/img/chevron-down.svg") no-repeat right 12px center / 18px; }
.sp-input-wrap { position: relative; }
.sp-input-wrap > iconify-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--sp-muted); pointer-events: none; }
.sp-input-wrap .sp-input { padding-left: 40px; }
.sp-input-wrap .sp-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.sp-input-group { display: flex; }
.sp-input-group__addon { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--sp-line-strong); border-right: 0; border-radius: var(--sp-radius-md) 0 0 var(--sp-radius-md); background: var(--sp-bg); color: var(--sp-slate); font-size: 14px; font-weight: 600; }
.sp-input-group .sp-input { border-radius: 0 var(--sp-radius-md) var(--sp-radius-md) 0; }
.sp-inline-form { display: flex; gap: 8px; padding: 6px; background: #fff; border-radius: var(--sp-radius-lg); box-shadow: inset 0 0 0 1px var(--sp-line-strong), var(--sp-shadow-sm); }
.sp-inline-form .sp-input { border: 0; box-shadow: none; }
.sp-inline-form .sp-input:focus { box-shadow: none; }
.sp-inline-form:focus-within { box-shadow: inset 0 0 0 1px var(--sp-blue-500), var(--sp-ring); }
@media (max-width: 520px) { .sp-inline-form { flex-direction: column; } }

.sp-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 15px; }
.sp-check input { appearance: none; margin: 0; width: 20px; height: 20px; flex: none; cursor: pointer; border: 1.5px solid var(--sp-line-strong); border-radius: 6px; background: #fff; display: grid; place-items: center; transition: background-color var(--sp-dur), border-color var(--sp-dur); }
.sp-check input[type="radio"] { border-radius: 50%; }
.sp-check input:checked { background: var(--sp-blue-600); border-color: var(--sp-blue-600); }
.sp-check input[type="checkbox"]:checked::after { content: ""; width: 12px; height: 12px; background: url("/ds/img/check-white.svg") center / contain no-repeat; }
.sp-check input[type="radio"]:checked { box-shadow: inset 0 0 0 4px #fff; }
.sp-check input:focus-visible { outline: 3px solid var(--sp-blue-400); outline-offset: 2px; }

.sp-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 15px; }
.sp-switch input { position: absolute; opacity: 0; pointer-events: none; }
.sp-switch__track { position: relative; width: 44px; height: 26px; flex: none; border-radius: 99px; background: var(--sp-line-strong); transition: background-color var(--sp-dur); }
.sp-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--sp-shadow-sm); transition: transform var(--sp-dur) var(--sp-ease-spring); }
.sp-switch input:checked + .sp-switch__track { background: var(--sp-blue-600); }
.sp-switch input:checked + .sp-switch__track::after { transform: translateX(18px); }
.sp-switch input:focus-visible + .sp-switch__track { outline: 3px solid var(--sp-blue-400); outline-offset: 2px; }

.sp-option { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--sp-radius-lg); background: #fff; cursor: pointer; box-shadow: inset 0 0 0 1px var(--sp-line-strong); transition: box-shadow var(--sp-dur), background-color var(--sp-dur); }
.sp-option:hover { box-shadow: inset 0 0 0 1px var(--sp-blue-400); }
.sp-option input { position: absolute; opacity: 0; pointer-events: none; }
.sp-option__title { display: block; font-weight: 700; }
.sp-option__desc { display: block; font-size: 14px; color: var(--sp-slate); }
.sp-option__radio { width: 20px; height: 20px; flex: none; margin-left: auto; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--sp-line-strong); transition: box-shadow var(--sp-dur); }
.sp-option:has(input:checked) { box-shadow: inset 0 0 0 2px var(--sp-blue-600); background: var(--sp-blue-50); }
.sp-option:has(input:checked) .sp-option__radio { box-shadow: inset 0 0 0 6px var(--sp-blue-600); }
.sp-option:has(input:focus-visible) { outline: 3px solid var(--sp-blue-400); outline-offset: 2px; }

/* ---------------------------------------------------------------------
   12. TABELAS
   --------------------------------------------------------------------- */
.sp-table-wrap { overflow-x: auto; background: #fff; border-radius: var(--sp-radius-lg); box-shadow: inset 0 0 0 1px var(--sp-line), var(--sp-shadow-sm); }
.sp-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; }
.sp-table th { text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-slate); background: var(--sp-bg); border-bottom: 1px solid var(--sp-line); white-space: nowrap; }
.sp-table td { padding: 14px 16px; border-bottom: 1px solid var(--sp-line); vertical-align: middle; }
.sp-table tbody tr:last-child td { border-bottom: 0; }
.sp-table--hover tbody tr { transition: background-color var(--sp-dur); }
.sp-table--hover tbody tr:hover td { background: var(--sp-blue-50); }
.sp-table--striped tbody tr:nth-child(even) td { background: #fafcfe; }
.sp-table--compact th, .sp-table--compact td { padding: 9px 14px; }
.sp-table .sp-num { text-align: right; font-variant-numeric: tabular-nums; }
.sp-table caption { caption-side: bottom; padding: 12px 16px; text-align: left; font-size: 13px; color: var(--sp-slate); border-top: 1px solid var(--sp-line); }
.sp-table__who { display: flex; align-items: center; gap: 10px; }
.sp-table__who b { display: block; font-size: 14.5px; }
.sp-table__who span { display: block; font-size: 13px; color: var(--sp-slate); }
.sp-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--sp-line); }
.sp-table-toolbar .sp-input-wrap { width: min(280px, 100%); }
.sp-compare td:not(:first-child), .sp-compare th:not(:first-child) { text-align: center; }
.sp-compare .sp-yes { color: var(--sp-blue-600); font-size: 20px; }
.sp-compare .sp-no { color: var(--sp-line-strong); font-size: 20px; }
.sp-compare .sp-col-hl { background: var(--sp-blue-50) !important; }
.sp-compare th.sp-col-hl { background: var(--sp-blue-600) !important; color: #fff; }
.sp-compare tr.sp-group td { background: var(--sp-bg); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-slate); padding-block: 8px; }

/* ---------------------------------------------------------------------
   13. NAVEGAÇÃO
   --------------------------------------------------------------------- */
.sp-announcement { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 9px 16px; background: var(--sp-ink); color: #fff; font-size: 14px; font-weight: 600; text-align: center; flex-wrap: wrap; }
.sp-announcement a { color: var(--sp-butter); font-weight: 700; }

.sp-header { position: relative; z-index: var(--sp-z-nav); background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--sp-line); }
.sp-header--sticky { position: sticky; top: 0; padding-top: env(safe-area-inset-top, 0px); }
.sp-header--dark { background: rgba(15,36,64,.85); border-color: rgba(255,255,255,.1); }
.sp-header__inner { display: flex; align-items: center; gap: var(--sp-space-6); min-height: 68px; }
.sp-nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.sp-nav__link {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: var(--sp-radius-sm); border: 0; background: none; cursor: pointer;
  color: var(--sp-ink-2); font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color var(--sp-dur), color var(--sp-dur);
}
.sp .sp-nav__link { color: var(--sp-ink-2); }
.sp-nav__link:hover { background: var(--sp-bg-2); color: var(--sp-ink); }
.sp-nav__link[aria-current="page"] { color: var(--sp-blue-600); }
.sp-nav__link iconify-icon { font-size: 14px; transition: transform var(--sp-dur); }
.sp-nav__link[aria-expanded="true"] iconify-icon { transform: rotate(180deg); }
.sp-header--dark .sp-nav__link { color: rgba(255,255,255,.85); }
.sp-header--dark .sp-nav__link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sp-header__actions { display: flex; align-items: center; gap: 8px; }
.sp-header__toggle { display: none; }
@media (max-width: 880px) {
  .sp-header__inner { flex-wrap: wrap; gap: 8px; padding-block: 12px; min-height: 0; }
  .sp-header__toggle { display: inline-flex; margin-left: auto; }
  .sp-nav, .sp-header__actions { display: none; }
  .sp-header[data-open="true"] .sp-nav { display: flex; flex-direction: column; align-items: stretch; width: 100%; order: 3; }
  .sp-header[data-open="true"] .sp-header__actions { display: flex; width: 100%; order: 4; padding-bottom: 8px; }
  .sp-header[data-open="true"] .sp-header__actions .sp-btn { flex: 1; }
}

/* Dropdown */
.sp-dropdown { position: relative; }
.sp-dropdown__menu {
  position: absolute; z-index: var(--sp-z-dropdown); top: calc(100% + 8px); left: 0; min-width: 300px; padding: 8px;
  background: #fff; border-radius: var(--sp-radius-lg); box-shadow: inset 0 0 0 1px var(--sp-line), var(--sp-shadow-lg);
}
.sp-dropdown__menu--right { left: auto; right: 0; }
.sp-menu-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: var(--sp-radius-md); text-decoration: none; color: var(--sp-ink); transition: background-color var(--sp-dur); width: 100%; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; }
.sp .sp-menu-item { color: var(--sp-ink); }
.sp-menu-item:hover { background: var(--sp-bg); }
.sp-menu-item b { display: block; font-size: 14.5px; }
.sp-menu-item span { display: block; font-size: 13px; color: var(--sp-slate); line-height: 1.4; }
.sp-menu-sep { height: 1px; background: var(--sp-line); margin: 6px 4px; }
@media (max-width: 880px) { .sp-dropdown__menu { position: static; box-shadow: none; min-width: 0; padding: 0 0 0 8px; } }

.sp-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 14px; font-weight: 600; }
.sp-breadcrumb a { color: var(--sp-slate); text-decoration: none; }
.sp-breadcrumb a:hover { color: var(--sp-blue-600); }
.sp-breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--sp-line-strong); }
.sp-breadcrumb [aria-current] { color: var(--sp-ink); }

.sp-sidenav { display: flex; flex-direction: column; gap: 1px; }
.sp-sidenav__title { padding: 16px 12px 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-muted); }
.sp-sidenav a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--sp-radius-sm); color: var(--sp-slate); text-decoration: none; font-weight: 600; font-size: 14.5px; transition: background-color var(--sp-dur), color var(--sp-dur); }
.sp .sp-sidenav a { color: var(--sp-slate); }
.sp-sidenav a iconify-icon { font-size: 17px; }
.sp-sidenav a:hover { background: var(--sp-bg-2); color: var(--sp-ink); }
.sp-sidenav a[aria-current="true"], .sp-sidenav a[aria-current="page"] { background: var(--sp-blue-100); color: var(--sp-blue-700); }
.sp-sidenav__count { margin-left: auto; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--sp-bg-2); color: var(--sp-slate); }

.sp-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.sp-pagination a, .sp-pagination span { min-width: 38px; height: 38px; padding: 0 10px; display: grid; place-items: center; border-radius: var(--sp-radius-sm); font-size: 14px; font-weight: 700; color: var(--sp-slate); text-decoration: none; }
.sp .sp-pagination a { color: var(--sp-slate); }
.sp-pagination a:hover { background: var(--sp-bg-2); color: var(--sp-ink); }
.sp .sp-pagination [aria-current="page"] { background: var(--sp-ink); color: #fff; }

.sp-footer { background: var(--sp-ink); color: rgba(255,255,255,.75); padding: var(--sp-space-16) 0 calc(var(--sp-space-8) + env(safe-area-inset-bottom, 0px)); font-size: 14.5px; }
.sp-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--sp-space-8); }
@media (max-width: 760px) { .sp-footer__grid { grid-template-columns: 1fr 1fr; } .sp-footer__grid > :first-child { grid-column: 1 / -1; } }
.sp-footer h4 { margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.sp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sp-footer a { color: rgba(255,255,255,.75); text-decoration: none; }
.sp .sp-footer a { color: rgba(255,255,255,.75); }
.sp-footer a:hover { color: #fff; }
.sp-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: var(--sp-space-12); padding-top: var(--sp-space-6); border-top: 1px solid rgba(255,255,255,.12); font-size: 13.5px; }
.sp-social { display: flex; gap: 8px; }
.sp-social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--sp-radius-md); background: rgba(255,255,255,.08); font-size: 19px; }
.sp .sp-social a:hover { background: var(--sp-sky); color: #fff; }

/* ---------------------------------------------------------------------
   14. TABS
   --------------------------------------------------------------------- */
.sp-tabs__list { display: flex; gap: 4px; border-bottom: 1px solid var(--sp-line); overflow-x: auto; scrollbar-width: none; }
.sp-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 11px 14px; border: 0; background: none; cursor: pointer; white-space: nowrap; font-size: 14.5px; font-weight: 700; color: var(--sp-slate); }
.sp-tab::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--sp-blue-600); transform: scaleX(0); transition: transform var(--sp-dur) var(--sp-ease-out); }
.sp-tab:hover { color: var(--sp-ink); }
.sp-tab[aria-selected="true"] { color: var(--sp-ink); }
.sp-tab[aria-selected="true"]::after { transform: scaleX(1); }
.sp-tab__count { font-size: 12px; padding: 0 7px; border-radius: 99px; background: var(--sp-bg-2); color: var(--sp-slate); }
.sp-tabs__panel { padding-top: var(--sp-space-5); }
.sp-tabs--segmented .sp-tabs__list { display: inline-flex; max-width: 100%; border: 0; padding: 3px; gap: 2px; background: var(--sp-bg-2); border-radius: var(--sp-radius-md); }
.sp-tabs--segmented .sp-tab { padding: 7px 14px; border-radius: 8px; }
.sp-tabs--segmented .sp-tab::after { display: none; }
.sp-tabs--segmented .sp-tab[aria-selected="true"] { background: #fff; box-shadow: var(--sp-shadow-sm); }
.sp-tabs--vertical { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-space-6); }
.sp-tabs--vertical .sp-tabs__list { flex-direction: column; border: 0; gap: 4px; }
.sp-tabs--vertical .sp-tab { justify-content: flex-start; border-radius: var(--sp-radius-md); padding: 12px 14px; text-align: left; }
.sp-tabs--vertical .sp-tab::after { left: 0; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; transform: scaleY(0); border-radius: 3px; }
.sp-tabs--vertical .sp-tab[aria-selected="true"] { background: #fff; box-shadow: inset 0 0 0 1px var(--sp-line), var(--sp-shadow-xs); }
.sp-tabs--vertical .sp-tab[aria-selected="true"]::after { transform: scaleY(1); }
.sp-tabs--vertical .sp-tabs__panel { padding-top: 0; }
@media (max-width: 700px) { .sp-tabs--vertical { grid-template-columns: 1fr; } .sp-tabs--vertical .sp-tabs__list { flex-direction: row; } }

/* ---------------------------------------------------------------------
   15. MODAL, TOAST, TOOLTIP
   --------------------------------------------------------------------- */
.sp-modal { position: fixed; inset: 0; z-index: var(--sp-z-overlay); display: flex; align-items: center; justify-content: center; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.sp-modal__backdrop { position: absolute; inset: 0; background: rgba(15,36,64,.55); backdrop-filter: blur(2px); }
.sp-modal__dialog { position: relative; width: min(480px, 100%); max-height: 100%; overflow-y: auto; background: #fff; border-radius: var(--sp-radius-xl); box-shadow: 0 30px 80px -20px rgba(15,36,64,.6); }
.sp-modal--lg .sp-modal__dialog { width: min(720px, 100%); }
.sp-modal__header { display: flex; align-items: flex-start; gap: 14px; padding: 22px 22px 0; }
.sp-modal__title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
.sp-modal__body { padding: 12px 22px 4px; color: var(--sp-slate); }
.sp-modal__body p { margin: 0 0 10px; }
.sp-modal__footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 18px 22px 22px; }
.sp-modal__footer--split { justify-content: space-between; }
.sp-modal__close { margin-left: auto; width: 36px; height: 36px; flex: none; border-radius: var(--sp-radius-sm); border: 0; background: none; color: var(--sp-slate); font-size: 20px; cursor: pointer; display: grid; place-items: center; }
.sp-modal__close:hover { background: var(--sp-bg-2); color: var(--sp-ink); }
.sp-modal--center .sp-modal__header { flex-direction: column; align-items: center; text-align: center; padding-top: 30px; }
.sp-modal--center .sp-modal__close { position: absolute; top: 12px; right: 12px; }
.sp-modal--center .sp-modal__body { text-align: center; }
.sp-modal--center .sp-modal__footer { justify-content: center; }
.sp-modal__hero { height: 120px; background: var(--sp-grad-hero); display: grid; place-items: center; }
@media (max-width: 560px) {
  .sp-modal--sheet { align-items: flex-end; padding: 0; }
  .sp-modal--sheet .sp-modal__dialog { width: 100%; border-radius: var(--sp-radius-xl) var(--sp-radius-xl) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
}
.sp-lock { overflow: hidden; }

.sp-toasts { position: fixed; z-index: var(--sp-z-toast); right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; width: min(380px, calc(100% - 40px)); pointer-events: none; }
@media (max-width: 560px) { .sp-toasts { right: 50%; transform: translateX(50%); align-items: center; } }
.sp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px 16px; border-radius: var(--sp-radius-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--sp-line), var(--sp-shadow-lg); font-size: 14.5px; font-weight: 600; color: var(--sp-ink); }
.sp-toast iconify-icon { font-size: 20px; flex: none; margin-top: 1px; color: var(--sp-blue-600); }
.sp-toast--success iconify-icon { color: var(--sp-success); }
.sp-toast--danger iconify-icon { color: var(--sp-danger); }
.sp-toast--tip iconify-icon { color: var(--sp-amber-700); }
.sp-toast--dark { background: var(--sp-ink); color: #fff; box-shadow: var(--sp-shadow-lg); }
.sp-toast--dark iconify-icon { color: var(--sp-butter); }

[data-sp-tip] { position: relative; }
[data-sp-tip]::after { content: attr(data-sp-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); opacity: 0; pointer-events: none; z-index: 5; background: var(--sp-ink); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.3; padding: 6px 10px; border-radius: 6px; white-space: nowrap; transition: opacity var(--sp-dur), transform var(--sp-dur) var(--sp-ease-out); }
[data-sp-tip]:hover::after, [data-sp-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------------
   16. ALERTAS E BANNERS
   --------------------------------------------------------------------- */
.sp-alert { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--sp-radius-md); background: var(--sp-info-soft); color: var(--sp-blue-800); box-shadow: inset 3px 0 0 var(--sp-blue-600); }
.sp-alert > iconify-icon { font-size: 20px; margin-top: 2px; }
.sp-alert__title { display: block; font-weight: 700; font-size: 15px; }
.sp-alert p { margin: 0; font-size: 14.5px; }
.sp-alert--success { background: var(--sp-success-soft); color: #145c3c; box-shadow: inset 3px 0 0 var(--sp-success); }
.sp-alert--danger { background: var(--sp-danger-soft); color: #8e2c28; box-shadow: inset 3px 0 0 var(--sp-danger); }
.sp-alert--tip { background: var(--sp-butter-50); color: var(--sp-amber-800); box-shadow: inset 3px 0 0 var(--sp-amber); }
.sp-alert--neutral { background: var(--sp-bg); color: var(--sp-ink-2); box-shadow: inset 3px 0 0 var(--sp-line-strong); }

.sp-cta-band { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-space-6); padding: var(--sp-space-10); border-radius: var(--sp-radius-xl); background: var(--sp-ink); background-image: var(--sp-grad-hero); color: #fff; }
.sp-cta-band > * { position: relative; z-index: 1; }
@media (max-width: 600px) { .sp-cta-band { padding: var(--sp-space-8) var(--sp-space-6); } }

/* ---------------------------------------------------------------------
   17. PROGRESSO, PASSOS, LOADING
   --------------------------------------------------------------------- */
.sp-progress { height: 8px; border-radius: 99px; background: var(--sp-bg-2); overflow: hidden; }
.sp-progress__fill { height: 100%; width: 0; border-radius: 99px; background: var(--sp-blue-600); transition: width var(--sp-dur-slow) var(--sp-ease-out); }
.sp-progress--grad .sp-progress__fill { background: linear-gradient(90deg, var(--sp-sky), var(--sp-amber)); }
.sp-progress--sm { height: 4px; }
.sp-progress__meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--sp-slate); }

.sp-stepper { display: flex; list-style: none; margin: 0; padding: 0; counter-reset: sp-st; }
.sp-stepper li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; counter-increment: sp-st; font-size: 13.5px; font-weight: 700; color: var(--sp-muted); padding-right: 12px; }
.sp-stepper li::before { content: counter(sp-st); position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: #fff; color: var(--sp-muted); box-shadow: inset 0 0 0 1.5px var(--sp-line-strong); }
.sp-stepper li::after { content: ""; position: absolute; top: 14px; left: 38px; right: 8px; height: 2px; background: var(--sp-line); }
.sp-stepper li:last-child::after { display: none; }
.sp-stepper li[data-state="done"]::before { content: "✓"; background: var(--sp-blue-600); color: #fff; box-shadow: none; }
.sp-stepper li[data-state="done"]::after { background: var(--sp-blue-600); }
.sp-stepper li[data-state="current"]::before { background: var(--sp-ink); color: var(--sp-butter); box-shadow: 0 0 0 4px var(--sp-blue-100); }
.sp-stepper li[data-state="done"], .sp-stepper li[data-state="current"] { color: var(--sp-ink); }
.sp-stepper small { display: block; font-weight: 500; color: var(--sp-muted); }

.sp-spinner { display: inline-block; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--sp-blue-100); border-top-color: var(--sp-blue-600); animation: sp-spin .75s linear infinite; }
.sp-spinner--lg { width: 40px; height: 40px; border-width: 4px; }
.sp-skeleton { min-height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--sp-bg-2) 0%, #f7f9fc 50%, var(--sp-bg-2) 100%) 0 0 / 200% 100%; animation: sp-shimmer 1.4s linear infinite; }
.sp-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: var(--sp-space-10) var(--sp-space-6); text-align: center; border-radius: var(--sp-radius-lg); border: 1.5px dashed var(--sp-line-strong); background: #fff; }

/* ---------------------------------------------------------------------
   18. ACCORDION
   --------------------------------------------------------------------- */
.sp-accordion { border-radius: var(--sp-radius-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--sp-line); overflow: hidden; }
.sp-accordion details + details { border-top: 1px solid var(--sp-line); }
.sp-accordion summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-weight: 700; font-size: 16px; transition: background-color var(--sp-dur); }
.sp-accordion summary::-webkit-details-marker { display: none; }
.sp-accordion summary:hover { background: var(--sp-bg); }
.sp-accordion summary::after { content: ""; flex: none; width: 22px; height: 22px; background: url("/ds/img/accordion-plus.svg") center / contain no-repeat; transition: transform var(--sp-dur) var(--sp-ease-out); }
.sp-accordion details[open] summary::after { transform: rotate(45deg); }
.sp-accordion__body { padding: 0 20px 20px; color: var(--sp-slate); }
.sp-accordion__body p { margin: 0; }

/* ---------------------------------------------------------------------
   19. AVATAR
   --------------------------------------------------------------------- */
.sp-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font-size: 14px; font-weight: 800; background: var(--sp-blue-100); color: var(--sp-blue-700); box-shadow: 0 0 0 2px #fff; }
.sp-avatar--sm { width: 30px; height: 30px; font-size: 12px; }
.sp-avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.sp-avatar--butter { background: var(--sp-butter); color: var(--sp-amber-800); }
.sp-avatar--ink { background: var(--sp-ink); color: #fff; }
.sp-avatar--lia { background: var(--sp-lia) 50% 30% / 250% auto no-repeat, var(--sp-sky); }
.sp-avatar--square { border-radius: var(--sp-radius-md); }
.sp-avatar-group { display: inline-flex; }
.sp-avatar-group .sp-avatar + .sp-avatar { margin-left: -10px; }
.sp-avatar__status { position: relative; }
.sp-avatar__status::after { content: ""; position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--sp-success); box-shadow: 0 0 0 2px #fff; }

/* ---------------------------------------------------------------------
   20. ANIMAÇÕES CSS
   --------------------------------------------------------------------- */
@keyframes sp-spin { to { transform: rotate(360deg); } }
@keyframes sp-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@keyframes sp-shimmer { to { background-position: -200% 0; } }
@keyframes sp-bounce-dot { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
@keyframes sp-pulse-dot { 0% { box-shadow: 0 0 0 0 currentColor; } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes sp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-twinkle { 0%, 100% { opacity: .35; transform: scale(.75) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(20deg); } }
@keyframes sp-marquee { to { transform: translateX(-50%); } }

.sp-anim-float { animation: sp-float 3.2s ease-in-out infinite; }
.sp-anim-rise { animation: sp-rise .6s var(--sp-ease-out) both; }
.sp-anim-fade { animation: sp-fade .6s ease both; }
.sp-anim-twinkle { animation: sp-twinkle 2.6s ease-in-out infinite; }
.sp-delay-1 { animation-delay: .08s; } .sp-delay-2 { animation-delay: .16s; } .sp-delay-3 { animation-delay: .24s; } .sp-delay-4 { animation-delay: .32s; }
/* Revela ao rolar (com SP.reveal ou data-sp-reveal) */
[data-sp-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--sp-ease-out), transform .6s var(--sp-ease-out); }
[data-sp-reveal].is-visible { opacity: 1; transform: none; }
.sp-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.sp-marquee__track { display: flex; gap: 48px; width: max-content; animation: sp-marquee 28s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .sp *, .sp *::before, .sp *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-sp-reveal] { opacity: 1; transform: none; }
}

/* Contador (+/−) — adicionado ao fim para ficar junto dos formulários na doc */
.sp-counter { display: inline-flex; align-items: stretch; border-radius: var(--sp-radius-md); box-shadow: inset 0 0 0 1px var(--sp-line-strong), var(--sp-shadow-xs); background: #fff; overflow: hidden; }
.sp-counter button { width: 44px; border: 0; background: none; cursor: pointer; color: var(--sp-slate); font-size: 18px; display: grid; place-items: center; transition: background-color var(--sp-dur), color var(--sp-dur); }
.sp-counter button:hover { background: var(--sp-bg); color: var(--sp-ink); }
.sp-counter input { width: 64px; min-height: 44px; text-align: center; border: 0; border-inline: 1px solid var(--sp-line); font-size: 16px; font-weight: 700; color: var(--sp-ink); -moz-appearance: textfield; background: #fff; }
.sp-counter input::-webkit-inner-spin-button, .sp-counter input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sp-counter input:focus { outline: none; background: var(--sp-blue-50); }