/* ============================================================
   somado · avulsos.css — EDIÇÃO FUTURISTA CLARA
   vitrine de produtos avulsos: vidro, glare, destaque conic.
   ============================================================ */

.hero-mini {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 600px at 80% -20%, hsl(28 95% 60% / 0.16), transparent 60%),
    radial-gradient(600px 460px at 10% 110%, hsl(222 60% 55% / 0.08), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, var(--color-bg-alt) 100%);
  background-size: 160% 160%, 150% 150%, 100% 100%;
  animation: mesh-drift 16s ease-in-out infinite alternate;
  padding-block: var(--sp-8) var(--sp-6);
  text-align: center;
}
@keyframes mesh-drift {
  0%   { background-position: 0% 0%, 100% 100%, 0 0; }
  100% { background-position: 60% 40%, 40% 60%, 0 0; }
}
.hero-mini::after {
  content: "";
  position: absolute;
  width: 180px; height: 180px;
  right: 8%; top: 10%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, hsl(28 96% 72% / 0.45), hsl(20 90% 55% / 0.18) 55%, transparent 72%);
  filter: blur(2px);
  pointer-events: none;
  animation: orb-float 9s ease-in-out infinite alternate;
}
@keyframes orb-float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-26px, 22px, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .hero-mini, .hero-mini::after { animation: none; } }

.hero-mini__inner { position: relative; max-width: 720px; margin-inline: auto; z-index: 1; }
.hero-mini h1 { font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl)); margin-block: 0.3rem var(--sp-2); }
.hero-mini__sub { font-size: var(--fs-lg); color: var(--navy-800); margin-bottom: var(--sp-2); }
.hero-mini__sub strong { color: var(--orange-600); }
.hero-mini__ctx { color: var(--color-text-muted); font-size: var(--fs-sm); max-width: 56ch; margin-inline: auto; }

/* Cards de avulso — vidro com glare/tilt (futurista.js) */
.avulsos { align-items: stretch; }
.avulso {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  /* SEM overflow:hidden — o selo .plan__badge fica meio pra fora
     do card (top:-14px) e seria decapitado; o arredondamento da
     imagem é feito direto nela, logo abaixo */
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-highlight);
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease),
    border-color var(--dur) var(--ease);
  transform-style: preserve-3d;
  transform:
    perspective(900px)
    rotateX(calc(var(--tiltX, 0) * 1deg))
    rotateY(calc(var(--tiltY, 0) * 1deg));
}
.avulso:hover {
  box-shadow: var(--shadow-md), var(--glow-orange-soft), inset 0 1px 0 var(--glass-highlight);
  border-color: hsl(28 95% 55% / 0.4);
}
.avulso::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at calc(var(--px, 0.5) * 100%) calc(var(--py, 0.5) * 100%),
    hsl(28 95% 60% / 0.12),
    transparent 65%
  );
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
  z-index: 1;
}
.avulso:hover::before { opacity: 1; }
/* destaque: borda conic girando */
.avulso--featured {
  border: 2px solid transparent;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    conic-gradient(from var(--angle),
      #FBA81A 0%,
      hsl(28 95% 75% / 0.5) 20%,
      hsl(222 45% 80% / 0.6) 45%,
      hsl(28 95% 75% / 0.5) 70%,
      #F15A22 100%) border-box;
  box-shadow: var(--shadow-orange);
  animation: spin-border 5s linear infinite;
}
@keyframes spin-border { to { --angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .avulso--featured { animation: none; } }

.avulso .imgph { border: none; border-bottom: 2px dashed var(--orange-400); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.avulso__body { position: relative; padding: var(--sp-3); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; z-index: 2; }
.avulso__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--navy-900); }
.avulso__price {
  font-family: var(--font-display);
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  background: var(--grad-orange);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.avulso__price small { display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-success); background: #E7F6EE; padding: 0.2rem 0.5rem; border-radius: var(--radius-pill); vertical-align: middle; margin-left: 0.4rem; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: var(--color-success); }
.avulso__lead { font-size: var(--fs-sm); color: var(--navy-900); }
.avulso__desc { font-size: var(--fs-sm); color: var(--color-text-muted); }
.avulso__list { margin-block: 0.4rem; }
.avulso__list li { font-size: var(--fs-sm); }
.avulso__prazo { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); color: var(--navy-700); font-weight: var(--fw-semibold); margin-top: auto; padding-top: var(--sp-1); }
.avulso__prazo svg { width: 18px; height: 18px; color: var(--orange-500); }
.avulso .btn { margin-top: 0.6rem; }

.avulso-when { text-align: center; }
.avulso-when h2 { margin-bottom: var(--sp-2); }
.avulso-when p { color: var(--color-text-muted); margin-bottom: var(--sp-2); }

/* CTA final (autocontido) */
.cta-final {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #FBA81A 35%, #F15A22 65%, transparent);
  box-shadow: 0 0 22px hsl(28 95% 55% / 0.6);
}
.cta-final::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -340px;
  width: 880px; height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, hsl(28 95% 52% / 0.2), hsl(16 88% 50% / 0.06) 55%, transparent 75%);
  filter: blur(40px);
  pointer-events: none;
}
.cta-final__inner { position: relative; text-align: center; color: #fff; z-index: 1; }
.cta-final__inner h2 { color: #fff; margin-bottom: var(--sp-2); }
.cta-final__inner p { color: #C5CEE3; margin-bottom: var(--sp-2); }
.cta-final__inner .btn { margin-top: var(--sp-2); }
.cta-final__reinforce { font-size: var(--fs-sm); margin-top: var(--sp-3) !important; color: #9AA6C2 !important; }