
.interactive-card {
position: relative;
overflow: hidden;
border: 1px solid rgba(148,163,184,.16);
background:
  linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.88));
box-shadow:
  0 24px 60px rgba(15,23,42,.08),
  inset 0 1px 0 rgba(255,255,255,.75);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.interactive-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(30,167,255,.14), transparent 32%);
pointer-events: none;
}

.interactive-card:hover {
transform: translateY(-6px);
box-shadow:
  0 28px 70px rgba(15,23,42,.14),
  inset 0 1px 0 rgba(255,255,255,.75);
border-color: rgba(30,167,255,.28);
}

.dark .interactive-card {
border: 1px solid rgba(255,255,255,.08);
background:
  linear-gradient(180deg, rgba(15,23,42,.78), rgba(15,23,42,.64));
box-shadow:
  0 24px 60px rgba(0,0,0,.26),
  inset 0 1px 0 rgba(255,255,255,.05);
}

.field {
width: 100%;
border-radius: 1rem;
border: 1px solid rgba(148,163,184,.25);
background: rgba(255,255,255,.72);
padding: .95rem 1rem;
font-size: .95rem;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.field:focus {
border-color: rgba(30,167,255,.65);
box-shadow: 0 0 0 4px rgba(30,167,255,.12);
}

.dark .field {
border-color: rgba(255,255,255,.08);
background: rgba(15,23,42,.72);
color: #e2e8f0;
}

.action-primary {
border-radius: 999px;
background: linear-gradient(135deg, #0B6FB3, #1EA7FF);
color: white;
padding: .95rem 1.2rem;
font-weight: 800;
letter-spacing: .01em;
box-shadow: 0 16px 36px rgba(11,111,179,.22);
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.action-primary:hover {
transform: translateY(-2px) scale(1.01);
box-shadow: 0 20px 40px rgba(11,111,179,.28);
filter: brightness(1.03);
}

.feature-chip {
border-radius: 999px;
border: 1px solid rgba(30,167,255,.22);
background: rgba(30,167,255,.10);
padding: .45rem .85rem;
font-size: .72rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: #0B6FB3;
}

.dark .feature-chip {
color: #7dd3fc;
background: rgba(30,167,255,.12);
border-color: rgba(30,167,255,.18);
}

.result-panel {
border-radius: 1.25rem;
border: 1px solid rgba(30,167,255,.16);
background: rgba(255,255,255,.72);
padding: 1rem;
color: #0f172a;
box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.dark .result-panel {
background: rgba(15,23,42,.72);
color: #e2e8f0;
border-color: rgba(255,255,255,.08);
}

.check-card {
display: flex;
align-items: center;
gap: .65rem;
border-radius: 1rem;
border: 1px solid rgba(148,163,184,.18);
background: rgba(255,255,255,.66);
padding: .85rem .9rem;
font-size: .88rem;
font-weight: 600;
cursor: pointer;
transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}

.check-card:hover {
transform: translateY(-2px);
border-color: rgba(30,167,255,.32);
}

.dark .check-card {
background: rgba(15,23,42,.72);
border-color: rgba(255,255,255,.08);
}

.reveal-card {
opacity: 0;
transform: translateY(24px) scale(.98);
transition: opacity .6s ease, transform .6s ease;
}

.reveal-card.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}

  .result-animate {
    animation: resultPop .45s cubic-bezier(.22, 1, .36, 1);
  }

  @keyframes resultPop {
    from {
      opacity: 0;
      transform: translateY(10px) scale(.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }


.whatsapp-blink {
    animation: whatsappPulse 1.2s ease-in-out infinite;
    box-shadow:
      0 0 0 0 rgba(34, 197, 94, .45),
      0 10px 24px rgba(34, 197, 94, .22);
  }

  .whatsapp-blink:hover {
    animation-play-state: paused;
    transform: translateY(-2px) scale(1.01);
  }

  @keyframes whatsappPulse {
    0%, 100% {
      opacity: 1;
      box-shadow:
        0 0 0 0 rgba(34, 197, 94, .42),
        0 10px 24px rgba(34, 197, 94, .22);
    }
    50% {
      opacity: .78;
      box-shadow:
        0 0 0 10px rgba(34, 197, 94, 0),
        0 14px 28px rgba(34, 197, 94, .30);
    }
  }

   .faq-item {
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }

  .faq-item:hover {
    transform: translateY(-3px);
    border-color: rgba(30,167,255,.24);
  }

  .faq-trigger {
    transition: background-color .2s ease, transform .2s ease;
  }

  .faq-trigger:hover {
    background: rgba(30,167,255,.05);
  }

  .dark .faq-trigger:hover {
    background: rgba(255,255,255,.04);
  }

  .faq-icon {
    transition: transform .25s ease, opacity .25s ease;
  }

  .faq-item.open .faq-icon {
    transform: rotate(45deg);
  }

  .faq-content {
    animation: faqDrop .28s ease;
  }

  @keyframes faqDrop {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

