/* ============================================================
   UPFRONT PROTOCOL — style.css
   Complementa Tailwind CDN con estilos custom
   Paleta: zinc-950/900 · acento violet-400 (#A78BFA)
   ============================================================ */

/* === HERO BACKGROUND: dot-grid + ambient glow === */
.hero-section {
  background-image: radial-gradient(rgba(167, 139, 250, 0.065) 1px, transparent 1px);
  background-size: 28px 28px;
}

.hero-glow {
  background:
    radial-gradient(ellipse at 18% 50%, rgba(167, 139, 250, 0.08) 0%, transparent 52%),
    radial-gradient(ellipse at 80% 20%, rgba(109, 40, 217, 0.05) 0%, transparent 45%);
}

/* === STATUS DOTS: blink === */
.status-dot {
  animation: dot-blink 2.6s ease-in-out infinite;
}

@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

/* === SVG NODE PULSE === */
.svg-pulse {
  transform-origin: 140px 40px;
  animation: node-pulse 3s ease-out infinite;
}

@keyframes node-pulse {
  0%   { transform: scale(1);   opacity: 0.45; }
  100% { transform: scale(1.75); opacity: 0; }
}

/* === BUTTONS === */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #6D28D9;
  color: #ffffff;
  border-radius: 100px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  padding: 0.6875rem 1.5rem;
  white-space: nowrap;
  transition:
    background  0.25s cubic-bezier(0.16, 1, 0.3, 1),
    transform   0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow  0.25s ease;
}

.btn-primary:hover {
  background: #7C3AED;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(109, 40, 217, 0.38);
}

.btn-primary:active {
  transform: scale(0.97) translateY(0);
  box-shadow: none;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  color: #71717A;
  border: 1.5px solid #3F3F46;
  padding: 0.6875rem 1.5rem;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-ghost:hover {
  color: #A78BFA;
  border-color: rgba(167, 139, 250, 0.45);
  transform: translateY(-2px);
}

.btn-ghost:active { transform: scale(0.97); }

/* === SECTION LABEL (mono uppercase) === */
.section-label {
  display: inline-flex;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7C3AED;
}

/* === SERVICE CARDS === */
.service-card {
  background: #18181B;
  border: 1px solid rgba(167, 139, 250, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition:
    border-color  0.3s ease,
    transform     0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow    0.35s ease;
}

.service-card:hover {
  border-color: rgba(167, 139, 250, 0.28);
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 48px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(167, 139, 250, 0.14);
}

/* === CARD ICON === */
.card-icon {
  width: 40px;
  height: 40px;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* === CARD TAGS === */
.card-tag {
  display: inline-flex;
  padding: 0.25rem 0.6rem;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #A78BFA;
}

/* === PROTOCOL STEPS === */
.protocol-step {
  transition: background 0.2s ease;
}

.protocol-step:hover {
  background: #1C1C1F;
}

/* === FORM === */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #52525B;
}

.form-input {
  width: 100%;
  background: #18181B;
  border: 1.5px solid #3F3F46;
  border-radius: 12px;
  padding: 0.875rem 1.125rem;
  color: #F4F4F5;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input::placeholder { color: #3F3F46; }

.form-input:focus {
  border-color: rgba(167, 139, 250, 0.65);
  box-shadow: 0 0 0 3.5px rgba(167, 139, 250, 0.1);
}

.form-input.is-error {
  border-color: #EF4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-error {
  font-size: 0.72rem;
  color: #F87171;
  font-weight: 500;
  min-height: 1.1rem;
  margin-top: 0.2rem;
}

/* === NAV: scrolled state === */
.nav-scrolled {
  background: rgba(18, 18, 20, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* === REVEAL ANIMATIONS === */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity   0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* === MOBILE MENU === */
.mobile-menu {
  background: rgba(12, 12, 14, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu.is-open {
  opacity: 1;
  pointer-events: all;
}

/* === CUSTOM SCROLLBAR === */
::-webkit-scrollbar               { width: 5px; }
::-webkit-scrollbar-track         { background: #121214; }
::-webkit-scrollbar-thumb         { background: #3F3F46; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover   { background: #A78BFA; }

/* === RESPONSIVE: stack bento on mobile === */
@media (max-width: 767px) {
  .md\:row-span-2  { grid-row: span 1; }
  .md\:col-span-2  { grid-column: span 1; }
  .md\:grid-rows-2 { grid-template-rows: unset; }
}