/* COMO O SOFTWARE PENSA — 3 cards, relógio CSS único de 8s (mesmo padrão de .sec-entrega) */
.sp-pensa {
  --spp-mono: ui-monospace, "Segoe UI Mono", monospace;
  --spp-ease: cubic-bezier(.3, .8, .3, 1);
  padding: var(--space-section) 6%;
  background-color: var(--off);
  background-image: radial-gradient(90% 70% at 85% -10%, #eae6f8 0%, #f7f6fc 55%);
  overflow-x: clip;
}
.sp-pensa .inner { max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; gap: clamp(24px, 3.4vw, 52px); }
.sp-pensa .eyebrow { color: var(--teal); }
.sp-pensa h2 { color: var(--navy); margin-bottom: var(--space-title); text-wrap: balance; }
.sp-pensa h2 em { font-style: normal; color: var(--teal); }
.sp-pensa-head { max-width: 40rem; margin: 0; }

.sp-pensa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(12px, 1.6vw, 22px); }

.sp-pensa-card {
  position: relative;
  display: flex; flex-direction: column; gap: clamp(10px, 1vw, 14px);
  min-width: 0; overflow: hidden;
  padding: clamp(16px, 1.7vw, 26px);
  background: var(--white);
  border: 1px solid var(--lb);
  border-radius: clamp(14px, 1.3vw, 20px);
  box-shadow: 6px 12px 24px -12px rgba(23,22,50,.14), 10px 22px 48px -26px rgba(23,22,50,.24);
  animation: spp-enter .72s cubic-bezier(.2,.8,.2,1) both;
}
.sp-pensa-card:nth-child(2) { animation-delay: .12s; }
.sp-pensa-card:nth-child(3) { animation-delay: .19s; }
@keyframes spp-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.sp-pensa-card--dark {
  background-color: #080812;
  background-image:
    linear-gradient(145deg, rgba(98,84,191,.1) 0%, transparent 55%),
    linear-gradient(160deg, #080812 0%, #141228 45%, #2a2848 100%);
  border-color: rgba(98,84,191,.45);
  box-shadow:
    6px 12px 24px -10px rgba(23, 22, 50, .22),
    10px 28px 52px -22px rgba(98, 84, 191, .38),
    0 18px 40px -20px rgba(23, 22, 50, .35);
}

.sp-pensa-viz {
  position: relative; height: clamp(130px, 12vw, 150px); padding: 12px; overflow: hidden;
  background: var(--off); border: 1px solid #eeeaf8; border-radius: 12px;
}
.sp-pensa-card--dark .sp-pensa-viz { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }

.sp-pensa-kicker { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.sp-pensa-card--dark .sp-pensa-kicker { color: var(--teal-l); }
.sp-pensa-title { margin: 0; font-family: var(--display); font-size: clamp(17px, 1.35vw, 21px); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--navy); }
.sp-pensa-card--dark .sp-pensa-title { color: #fff; }

.sp-pensa-list { list-style: none; margin: 0; padding: 0 clamp(56px, 7vw, 96px) 0 0; display: grid; gap: .4rem; font-size: clamp(13px, 1vw, 15px); color: var(--gray); }
.sp-pensa-list li { display: flex; gap: .55rem; align-items: baseline; }
.sp-pensa-list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); flex: none; transform: translateY(-2px); }
.sp-pensa-card--dark .sp-pensa-list { color: rgba(255,255,255,.7); }
.sp-pensa-card--dark .sp-pensa-list li::before { background: var(--teal-l); }

.sp-pensa-idx {
  position: absolute;
  right: clamp(10px, 1.4vw, 22px);
  bottom: clamp(-10px, -.6vw, -4px);
  font-family: var(--display);
  font-size: clamp(60px, 6.6vw, 88px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px #eeeaf8;
  pointer-events: none;
}
.sp-pensa-card--dark .sp-pensa-idx { -webkit-text-stroke-color: rgba(123, 110, 201, .28); }

.spp-label { font-family: var(--spp-mono); font-size: 8px; font-weight: 600; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; color: #605e78; }

/* Entrada */
.spp-chips { display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 100%; }
.spp-chip { display: flex; align-items: center; gap: 8px; height: 20px; padding: 0 8px; background: #fff; border: 1px solid #e9e6f6; border-radius: 7px; }
.spp-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex: none; }
.spp-chip span { flex: 1; font-family: var(--spp-mono); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #3b3956; }
.spp-chip b { font-family: var(--spp-mono); font-size: 8px; color: #a79cea; }

/* Inteligência */
.spp-steps { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.spp-steps-head { display: flex; justify-content: space-between; align-items: center; }
.spp-steps .spp-label { color: rgba(255,255,255,.8); font-size: 9px; }
.spp-steps-head .spp-label { color: rgba(255,255,255,.55); font-size: 8px; }
.spp-live { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-l); box-shadow: 0 0 0 3px rgba(123,110,201,.2); animation: spp-blink 1.6s ease-in-out infinite; }
.spp-step { display: grid; grid-template-columns: 1fr 64px 12px; align-items: center; gap: 8px; }
.spp-track { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.spp-track i { display: block; height: 100%; background: var(--teal-l); transform-origin: left; }
.spp-check { width: 12px; height: 12px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 8px; line-height: 1; display: grid; place-items: center; }

/* Saída */
.spp-out { display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 100%; }
.spp-row { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 8px; }
.spp-bar { display: block; height: 7px; border-radius: 7px; background: #fff; border: 1px solid #e9e6f6; overflow: hidden; }
.spp-bar i { display: block; height: 100%; border-radius: 7px; background: #b5ade0; transform-origin: left; }
.spp-row--hi .spp-bar i { background: var(--teal); }
.spp-val { font-family: var(--spp-mono); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #3b3956; }
.spp-row--hi .spp-val { color: var(--teal); }
.spp-pill { align-self: center; margin-top: 2px; padding: 3px 8px; background: #fff; border: 1px solid #e9e6f6; border-radius: 999px; font-family: var(--spp-mono); font-size: 8px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }

/* ── Relógio único de 8s: monta (0–48%), segura até 86%, some (86–94%), reinicia ── */
.spp-in0, .spp-in1, .spp-in2, .spp-in3, .spp-in4,
.spp-fill0, .spp-fill1, .spp-fill2, .spp-fill3,
.spp-pop0, .spp-pop1, .spp-pop2, .spp-pop3, .spp-pop4 { animation-duration: 8s; animation-timing-function: var(--spp-ease); animation-iteration-count: infinite; animation-fill-mode: both; }
.spp-in0 { animation-name: spp-in0; } .spp-in1 { animation-name: spp-in1; } .spp-in2 { animation-name: spp-in2; } .spp-in3 { animation-name: spp-in3; } .spp-in4 { animation-name: spp-in4; }
.spp-fill0 { animation-name: spp-fill0; } .spp-fill1 { animation-name: spp-fill1; } .spp-fill2 { animation-name: spp-fill2; } .spp-fill3 { animation-name: spp-fill3; }
.spp-pop0 { animation-name: spp-pop0; } .spp-pop1 { animation-name: spp-pop1; } .spp-pop2 { animation-name: spp-pop2; } .spp-pop3 { animation-name: spp-pop3; } .spp-pop4 { animation-name: spp-pop4; }

@keyframes spp-in0 { 0%,4%  { opacity:0; transform:translateX(-14px) } 10%,86% { opacity:1; transform:none } 94%,100% { opacity:0 } }
@keyframes spp-in1 { 0%,11% { opacity:0; transform:translateX(-14px) } 17%,86% { opacity:1; transform:none } 94%,100% { opacity:0 } }
@keyframes spp-in2 { 0%,18% { opacity:0; transform:translateX(-14px) } 24%,86% { opacity:1; transform:none } 94%,100% { opacity:0 } }
@keyframes spp-in3 { 0%,25% { opacity:0; transform:translateX(-14px) } 31%,86% { opacity:1; transform:none } 94%,100% { opacity:0 } }
@keyframes spp-in4 { 0%,32% { opacity:0; transform:translateX(-14px) } 38%,86% { opacity:1; transform:none } 94%,100% { opacity:0 } }

@keyframes spp-fill0 { 0%,6%  { transform:scaleX(0) } 15%,86% { transform:scaleX(1) } 94%,100% { transform:scaleX(0) } }
@keyframes spp-fill1 { 0%,15% { transform:scaleX(0) } 24%,86% { transform:scaleX(1) } 94%,100% { transform:scaleX(0) } }
@keyframes spp-fill2 { 0%,24% { transform:scaleX(0) } 33%,86% { transform:scaleX(1) } 94%,100% { transform:scaleX(0) } }
@keyframes spp-fill3 { 0%,33% { transform:scaleX(0) } 42%,86% { transform:scaleX(1) } 94%,100% { transform:scaleX(0) } }

@keyframes spp-pop0 { 0%,15% { opacity:0; transform:scale(.5) } 19%,86% { opacity:1; transform:none } 94%,100% { opacity:0; transform:scale(.5) } }
@keyframes spp-pop1 { 0%,24% { opacity:0; transform:scale(.5) } 28%,86% { opacity:1; transform:none } 94%,100% { opacity:0; transform:scale(.5) } }
@keyframes spp-pop2 { 0%,33% { opacity:0; transform:scale(.5) } 37%,86% { opacity:1; transform:none } 94%,100% { opacity:0; transform:scale(.5) } }
@keyframes spp-pop3 { 0%,42% { opacity:0; transform:scale(.5) } 46%,86% { opacity:1; transform:none } 94%,100% { opacity:0; transform:scale(.5) } }
@keyframes spp-pop4 { 0%,48% { opacity:0; transform:scale(.5) } 52%,86% { opacity:1; transform:none } 94%,100% { opacity:0; transform:scale(.5) } }

@keyframes spp-blink { 0%,100% { opacity:1 } 50% { opacity:.3 } }

@media (max-width: 834px) {
  .sp-pensa-viz { height: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-pensa *, .sp-pensa-card { animation: none !important; opacity: 1 !important; transform: none !important; }
}