/* ==========================================================================
   Agentes MYD (jjmagid.com) - Tema espacial 3D
   Colores propios de jjmagid: azul #1e6fc4 + naranja #f97316
   ========================================================================== */

:root {
  --space-bg: #060a14;
  --space-surface: #0d1424;
  --space-accent: #1e6fc4;
  --space-accent2: #f97316;
  --space-accent-soft: rgba(30, 111, 196, 0.18);
  --space-accent2-soft: rgba(249, 115, 22, 0.18);
  --space-border: rgba(30, 111, 196, 0.35);
}

#myd-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

html, body {
  background: var(--space-bg);
}

/* Mantén el contenido por encima del canvas */
.navbar,
.hero,
.features,
.wa-generator,
.section,
section,
footer {
  position: relative;
  z-index: 1;
}

/* Navbar oscuro translúcido */
.navbar {
  background: rgba(5, 8, 13, 0.75) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--space-border);
  box-shadow: none !important;
}

.nav-brand,
.nav-menu a {
  color: #eafffb !important;
}

.nav-logo {
  height: 64px !important;
  max-width: 240px !important;
}

.nav-brand i {
  color: var(--space-accent) !important;
}

.nav-menu a:hover {
  color: var(--space-accent) !important;
  text-shadow: 0 0 8px var(--space-accent-soft);
}

.btn-nav {
  background: var(--space-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px var(--space-accent-soft);
}

/* Hero */
.hero {
  background: linear-gradient(180deg, rgba(6, 10, 20, 0.05) 0%, rgba(6, 10, 20, 0.4) 100%) !important;
  color: #eafffb;
}

.hero-content h1 {
  text-shadow: 0 0 24px var(--space-accent-soft);
}

.hero-illustration {
  background: rgba(249, 115, 22, 0.08) !important;
  border: 1px solid var(--space-border);
  box-shadow: 0 0 60px var(--space-accent-soft) !important;
}

.hero-illustration i {
  color: var(--space-accent) !important;
  text-shadow: 0 0 20px var(--space-accent-soft);
}

.btn-primary {
  background: var(--space-accent) !important;
  border-color: var(--space-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 0 24px var(--space-accent-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 36px var(--space-accent);
}

/* Secciones translúcidas: dejan ver el fondo 3D */
.features,
.wa-generator,
section[id] {
  background: rgba(6, 10, 20, 0.35) !important;
  color: #eafffb;
}

.section-header h2,
.features h2,
.wa-generator h2 {
  color: #eafffb;
  text-shadow: 0 0 16px var(--space-accent-soft);
}

.section-header p {
  color: rgba(234, 255, 251, 0.7);
}

/* Tarjetas con borde cian + efecto glass */
.feature-card,
.plan-card,
.form-card,
.testimonial-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--space-border) !important;
  backdrop-filter: blur(8px);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  color: #eafffb;
}

.feature-card:hover,
.plan-card:hover,
.testimonial-card:hover {
  transform: translateY(-6px);
  border-color: var(--space-accent) !important;
  box-shadow: 0 12px 32px var(--space-accent-soft);
}

.feature-card i,
.wa-icon-circle i {
  color: var(--space-accent) !important;
  text-shadow: 0 0 16px var(--space-accent-soft);
}

/* Iconos circulares con efecto 3D (feature-icon) */
.feature-icon {
  background: linear-gradient(145deg, var(--space-surface), var(--space-bg)) !important;
  border: 1px solid var(--space-border);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.45),
    inset 0 2px 4px rgba(255, 255, 255, 0.06),
    inset 0 -6px 10px rgba(0, 0, 0, 0.5);
  transform: perspective(600px) rotateX(8deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.feature-card:hover .feature-icon {
  transform: perspective(600px) rotateX(0deg) translateY(-4px) scale(1.06);
  border-color: var(--space-accent);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.5),
    0 0 24px var(--space-accent-soft),
    inset 0 2px 4px rgba(255, 255, 255, 0.06),
    inset 0 -6px 10px rgba(0, 0, 0, 0.5);
}

.feature-icon i {
  text-shadow: 0 0 12px var(--space-accent-soft);
}

/* Inputs y formularios */
.form-control {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--space-border) !important;
  color: #eafffb !important;
}

.form-control::placeholder {
  color: rgba(234, 255, 251, 0.4);
}

.form-control:focus {
  border-color: var(--space-accent) !important;
  box-shadow: 0 0 0 3px var(--space-accent-soft) !important;
}

.btn-success {
  background: var(--space-accent2) !important;
  color: #ffffff !important;
  border: none;
  box-shadow: 0 0 16px var(--space-accent2-soft);
}

/* Footer */
footer {
  background: var(--space-bg) !important;
  color: rgba(234, 255, 251, 0.6);
  border-top: 1px solid var(--space-border);
}

footer a {
  color: var(--space-accent) !important;
}

/* Scrollbar cian */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--space-bg); }
::-webkit-scrollbar-thumb { background: var(--space-accent); border-radius: 10px; }

/* ==========================================================================
   Sección "Lo hacemos todo por ti" (managed-services)
   Mismo estilo dark-glass + 3D que el resto del sitio
   ========================================================================== */
.managed-services {
  background: rgba(6, 10, 20, 0.35) !important;
}

.managed-services .container {
  position: relative;
}

.managed-services::before {
  background: radial-gradient(circle, var(--space-accent-soft) 0%, transparent 70%) !important;
}

.section-tag {
  background: var(--space-accent2) !important;
  color: #ffffff !important;
}

/* Pasos del proceso */
.process-step strong {
  color: #eafffb;
}

.process-step p {
  color: rgba(234, 255, 251, 0.6);
}

.process-number {
  background: linear-gradient(145deg, var(--space-surface), var(--space-bg)) !important;
  color: var(--space-accent) !important;
  border: 1px solid var(--space-border);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.45),
    inset 0 2px 4px rgba(255, 255, 255, 0.06),
    inset 0 -6px 10px rgba(0, 0, 0, 0.5);
  transform: perspective(600px) rotateX(8deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.process-step:hover .process-number {
  transform: perspective(600px) rotateX(0deg) translateY(-4px) scale(1.06);
  border-color: var(--space-accent);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.5),
    0 0 24px var(--space-accent-soft),
    inset 0 2px 4px rgba(255, 255, 255, 0.06),
    inset 0 -6px 10px rgba(0, 0, 0, 0.5);
}

.process-number i {
  text-shadow: 0 0 12px var(--space-accent-soft);
}

/* Tarjetas de paquetes DFY */
.managed-card {
  background: linear-gradient(160deg, rgba(13, 20, 36, 0.92), rgba(6, 10, 20, 0.92)) !important;
  border: 1px solid var(--space-border) !important;
  color: #eafffb;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  transform: perspective(1200px) rotateX(2deg);
  transition: transform 0.4s cubic-bezier(.25,.8,.25,1), box-shadow 0.4s ease, border-color 0.3s ease;
}

.managed-card:hover {
  transform: perspective(1200px) rotateX(0deg) translateY(-8px);
  border-color: var(--space-accent) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 40px var(--space-accent-soft);
}

.managed-card.featured {
  border-color: var(--space-accent2) !important;
  transform: perspective(1200px) rotateX(0deg) scale(1.04);
  box-shadow: 0 0 0 1px var(--space-accent2-soft), 0 0 40px var(--space-accent2-soft), 0 20px 60px rgba(0,0,0,.6);
}

.managed-card.featured:hover {
  transform: perspective(1200px) rotateX(0deg) scale(1.04) translateY(-8px);
}

.managed-badge {
  background: linear-gradient(135deg, var(--space-accent), var(--space-accent2)) !important;
  box-shadow: 0 4px 16px var(--space-accent-soft);
}

.managed-name {
  color: var(--space-accent) !important;
  text-shadow: 0 0 12px var(--space-accent-soft);
}

.managed-tagline {
  color: rgba(234, 255, 251, 0.55) !important;
}

.setup-label {
  color: rgba(234, 255, 251, 0.45) !important;
}

.setup-price {
  color: #eafffb !important;
}

.setup-price span {
  color: rgba(234, 255, 251, 0.5) !important;
}

.managed-monthly {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--space-border) !important;
  color: rgba(234, 255, 251, 0.6) !important;
}

.managed-monthly strong {
  color: var(--space-accent2) !important;
}

.managed-features li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: rgba(234, 255, 251, 0.8);
}

.managed-features i {
  color: var(--space-accent) !important;
}

/* CTA final de la sección */
.managed-cta-section {
  background: linear-gradient(160deg, rgba(13, 20, 36, 0.92), rgba(6, 10, 20, 0.92)) !important;
  border: 1px solid var(--space-border) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.managed-cta-section h3 {
  color: #eafffb !important;
}

.managed-cta-section > p {
  color: rgba(234, 255, 251, 0.6) !important;
}

.managed-cop-note {
  color: rgba(234, 255, 251, 0.45) !important;
}

.managed-cta-icon {
  background: linear-gradient(145deg, var(--space-surface), var(--space-bg)) !important;
  border: 1px solid var(--space-border);
  color: var(--space-accent) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.45),
    inset 0 2px 4px rgba(255, 255, 255, 0.06),
    inset 0 -6px 10px rgba(0, 0, 0, 0.5);
  transform: perspective(600px) rotateX(8deg);
}

/* ==========================================================================
   Coverflow de planes (#plansGrid)
   Adaptado de panel.somosmyd.com, recoloreado a azul/naranja jjmagid
   ========================================================================== */
.plans .container {
  position: relative;
}

#plansGrid.cf-scene {
  position: relative;
  height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  perspective-origin: 50% 45%;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  padding: 2rem 0 !important;
  overflow: visible !important;
}

#plansGrid.cf-scene > .plan-card {
  position: absolute;
  width: 300px;
  flex: none;
  background: linear-gradient(160deg, rgba(13, 20, 36, 0.92), rgba(6, 10, 20, 0.92)) !important;
  border: 1px solid var(--space-border) !important;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.55s cubic-bezier(.25,.8,.25,1), opacity 0.55s ease, box-shadow 0.55s ease, border-color 0.55s ease;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  user-select: none;
  display: flex;
  flex-direction: column;
}

#plansGrid.cf-scene > .plan-card[data-pos="0"] {
  transform: translateX(0) translateZ(0) rotateY(0deg) scale(1) !important;
  opacity: 1;
  z-index: 10;
  border-color: var(--space-accent) !important;
  box-shadow: 0 0 0 1px var(--space-accent-soft), 0 0 40px var(--space-accent-soft), 0 20px 60px rgba(0,0,0,.6);
}

#plansGrid.cf-scene > .plan-card[data-pos="-1"] {
  transform: translateX(-58%) translateZ(-100px) rotateY(38deg) scale(.86) !important;
  opacity: .7; z-index: 7;
}

#plansGrid.cf-scene > .plan-card[data-pos="1"] {
  transform: translateX(58%) translateZ(-100px) rotateY(-38deg) scale(.86) !important;
  opacity: .7; z-index: 7;
}

#plansGrid.cf-scene > .plan-card[data-pos="-2"] {
  transform: translateX(-108%) translateZ(-220px) rotateY(48deg) scale(.70) !important;
  opacity: .35; z-index: 4;
}

#plansGrid.cf-scene > .plan-card[data-pos="2"] {
  transform: translateX(108%) translateZ(-220px) rotateY(-48deg) scale(.70) !important;
  opacity: .35; z-index: 4;
}

#plansGrid.cf-scene > .plan-card[data-pos="-3"] {
  transform: translateX(0) translateZ(-400px) rotateY(65deg) scale(.5) !important;
  opacity: 0; z-index: 1; pointer-events: none;
}

#plansGrid.cf-scene > .plan-card[data-pos="3"] {
  transform: translateX(0) translateZ(-400px) rotateY(-65deg) scale(.5) !important;
  opacity: 0; z-index: 1; pointer-events: none;
}

#plansGrid.cf-scene > .plan-card:hover {
  transform: inherit;
}

#plansGrid.cf-scene > .plan-card.featured {
  transform: inherit !important;
}

/* Flechas */
.plans-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--space-accent-soft);
  border: 1px solid var(--space-border);
  color: var(--space-accent);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  backdrop-filter: blur(6px);
  transition: all 0.2s ease;
}

.plans-arrow:hover {
  background: var(--space-accent);
  border-color: var(--space-accent);
  color: #ffffff;
  transform: translateY(-50%) scale(1.1);
}

.plans-arrow.plans-prev { left: calc(50% - 240px); }
.plans-arrow.plans-next { right: calc(50% - 240px); }

/* Dots */
.plans-dots {
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin-top: 1.4rem;
  position: relative;
  z-index: 10;
}

.plans-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--space-accent-soft);
  border: 1px solid var(--space-border);
  cursor: pointer;
  transition: all .25s ease;
}

.plans-dot.on {
  background: var(--space-accent);
  transform: scale(1.4);
}

@media (max-width: 768px) {
  #plansGrid.cf-scene > .plan-card { width: 260px; }
  #plansGrid.cf-scene { height: 480px; }
  .plans-arrow.plans-prev { left: .5rem; }
  .plans-arrow.plans-next { right: .5rem; }

  #plansGrid.cf-scene > .plan-card[data-pos="-1"] {
    transform: translateX(-92%) translateZ(-160px) rotateY(38deg) scale(.8) !important;
  }
  #plansGrid.cf-scene > .plan-card[data-pos="1"] {
    transform: translateX(92%) translateZ(-160px) rotateY(-38deg) scale(.8) !important;
  }
  #plansGrid.cf-scene > .plan-card[data-pos="-2"],
  #plansGrid.cf-scene > .plan-card[data-pos="2"] {
    opacity: 0; pointer-events: none;
  }
}

/* ==========================================================================
   Coverflow de paquetes DFY (.managed-grid)
   ========================================================================== */
.managed-grid.cf-scene {
  position: relative;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  perspective-origin: 50% 45%;
  gap: 0 !important;
  padding: 2rem 0 !important;
  overflow: visible !important;
}

.managed-grid.cf-scene > .managed-card {
  position: absolute;
  width: 320px;
  cursor: pointer;
  transition: transform 0.55s cubic-bezier(.25,.8,.25,1), opacity 0.55s ease, box-shadow 0.55s ease, border-color 0.55s ease;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  user-select: none;
}

.managed-grid.cf-scene > .managed-card[data-pos="0"] {
  transform: translateX(0) translateZ(0) rotateY(0deg) scale(1) !important;
  opacity: 1; z-index: 10;
  border-color: var(--space-accent2) !important;
  box-shadow: 0 0 0 1px var(--space-accent2-soft), 0 0 40px var(--space-accent2-soft), 0 20px 60px rgba(0,0,0,.6);
}

.managed-grid.cf-scene > .managed-card[data-pos="-1"] {
  transform: translateX(-58%) translateZ(-100px) rotateY(38deg) scale(.86) !important;
  opacity: .7; z-index: 7;
}

.managed-grid.cf-scene > .managed-card[data-pos="1"] {
  transform: translateX(58%) translateZ(-100px) rotateY(-38deg) scale(.86) !important;
  opacity: .7; z-index: 7;
}

.managed-grid.cf-scene > .managed-card[data-pos="-2"],
.managed-grid.cf-scene > .managed-card[data-pos="2"] {
  opacity: 0; z-index: 1; pointer-events: none;
}

.managed-grid.cf-scene > .managed-card[data-pos="-2"] {
  transform: translateX(-100%) translateZ(-220px) rotateY(48deg) scale(.70) !important;
}

.managed-grid.cf-scene > .managed-card[data-pos="2"] {
  transform: translateX(100%) translateZ(-220px) rotateY(-48deg) scale(.70) !important;
}

.managed-grid.cf-scene > .managed-card:hover,
.managed-grid.cf-scene > .managed-card.featured {
  transform: inherit !important;
}

@media (max-width: 768px) {
  .managed-grid.cf-scene > .managed-card { width: 270px; }
  .managed-grid.cf-scene { height: 640px; }
}

/* Animación de entrada al hacer scroll */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* Fix menu movil: dropdown oscuro tipo glass acorde al tema espacial */
@media (max-width: 768px) {
  .nav-menu.active {
    background: rgba(5, 8, 13, 0.92) !important;
    backdrop-filter: blur(14px);
    border: 1px solid var(--space-border);
    border-top: none;
    z-index: 1000;
    gap: 18px;
  }

  .nav-menu.active a {
    color: #eafffb !important;
    width: 100%;
    text-align: center;
    padding: 8px 0;
  }

  .nav-menu.active .btn-nav {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .nav-menu.active {
    background: #050a14 !important;
    backdrop-filter: none !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.6) !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
  }
}

@media (max-width: 768px) {
  .navbar {
    z-index: 99999 !important;
  }
  .nav-menu.active {
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    background: #050a14 !important;
    z-index: 99999 !important;
    width: 100% !important;
    margin: 0 !important;
  }
}