/* ===================================================
   SKYWEB DIGITAL AGENCY — styles.css
   =================================================== */

/* ===== GLOBAL ===== */
body {
  background-color: #131315;
  color: #e5e1e4;
  font-family: 'Inter', sans-serif;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ===== SPA PAGES ===== */
.page { display: none; }
.page.active { display: block; }

/* ===== INICIO — Glass & Glow ===== */
.glass-panel {
  background: rgba(19, 19, 21, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.text-glow {
  text-shadow: 0 0 20px rgba(173, 198, 255, 0.3);
}

/* ===== SOLUCIONES / CHATBOT ===== */
.glass-panel-chat {
  background: rgba(32, 31, 33, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.tech-grid {
  background-image:
    linear-gradient(rgba(173, 198, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173, 198, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ===== FAQ ===== */
.glass-effect {
  background: rgba(32, 31, 33, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.ghost-border {
  border: 1px solid rgba(140, 144, 159, 0.15);
}

/* ===== CASOS DE ÉXITO ===== */
.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
}

/* ===== CONTACTO ===== */
.inner-glow-focus:focus-within {
  box-shadow:
    inset 0 0 10px rgba(77, 142, 255, 0.1),
    0 0 0 1px rgba(173, 198, 255, 0.4);
}

/* ===== PRECIOS — Background ===== */
.bg-kinetic-vault {
  background: radial-gradient(circle at 50% -20%, #0a0a0a 0%, #000000 100%);
}

/* ===== PRECIOS — Slider ===== */
.pro-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: transparent;
  border-radius: 999px;
  outline: none;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}
.pro-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: #2a2a2a;
  border-radius: 999px;
}
.pro-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: var(--slider-color, #005af7);
  cursor: pointer;
  border-radius: 50%;
  border: none;
  box-shadow: 0 0 15px var(--slider-glow, rgba(5, 134, 255, 0.767));
  margin-top: -9px;
  position: relative;
  z-index: 20;
}
.pro-range::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: #2a2a2a;
  border-radius: 999px;
}
.pro-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: var(--slider-color, #ffd900);
  cursor: pointer;
  border-radius: 50%;
  border: none;
  box-shadow: 0 0 15px var(--slider-glow, rgba(138, 145, 157, 0.4));
}
.slider-track-fill {
  height: 6px;
  background: var(--slider-color, #e04f4f);
  transition: background 0.3s ease;
  border-radius: 999px;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 10;
}

/* ===== PRECIOS — Chat option cards ===== */
.chat-option-radio:checked + .chat-option-card {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}
.chat-option-radio:checked + .chat-option-card .check-icon { opacity: 1; }

.scale-option-radio:checked + .chat-option-card {
  border-color: #5da1f0;
  background: rgba(156, 202, 255, 0.1);
}
.scale-option-radio:checked + .chat-option-card .check-icon { opacity: 1; }

.prime-option-radio:checked + .chat-option-card {
  border-color: #fbbc00;
  background: rgba(250, 191, 13, 0.493);
}
.prime-option-radio:checked + .chat-option-card .check-icon { opacity: 1; }

/* ===== PRECIOS — Active card glow ===== */
.card-active-glow {
  transform: scale(1.02);
  box-shadow: 0 0 30px rgba(77, 171, 255, 0.15);
  border-color: rgba(77, 171, 255, 0.4) !important;
  z-index: 10;
  transition: all 0.3s ease;
}

/* ===== MARQUEE (Empresas) ===== */
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  animation: marquee-scroll 20s linear infinite;
  width: max-content;
}

/* ===== NAV ACTIVE STATE ===== */
.nav-link {
  color: #bfc7d3;
  transition: color 0.2s;
  cursor: pointer;
}
.nav-link:hover { color: #ffffff; }
.nav-link.active {
  color: #ffffff;
  font-weight: 600;
  border-bottom: 2px solid #adc6ff;
  padding-bottom: 4px;
}

/* ===== MOBILE MENU ===== */
.mobile-nav-item {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.mobile-nav-item.active {
  color: #ffffff;
  font-weight: 600;
  border-left: 3px solid #adc6ff;
  padding-left: 21px;
}

/* ===== PRECIOS MOBILE ===== */
@media (max-width: 767px) {
  /* Evitar desbordamientos horizontales */
  #page-precios {
    overflow-x: hidden;
  }
  /* Cards de precios apiladas y con padding cómodo */
  #pricing-grid > div {
    width: 100%;
  }
  /* Precio principal más compacto */
  #pro-total-price,
  #scale-total-price,
  #prime-total-price {
    font-size: 1.6rem;
  }
}

/* ===== FORM ALERT ANIMATION ===== */
@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===== PRECIO BUTTON — transición suave ===== */
#price-button {
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
@media (max-width: 767px) {
  #page-casos .aspect-\[4\/5\] {
    aspect-ratio: 4/3;
  }
  #page-casos section .flex.justify-between.items-start {
    flex-direction: column;
    gap: 0.5rem;
  }
  #page-casos section .text-right {
    text-align: left;
  }
}

/* ===== PRECIO BUTTON — transición suave ===== */
#price-button {
  transition: background 0.4s ease, box-shadow 0.4s ease;
}