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

html {
  /* Sin esto, cualquier elemento position:fixed con "right" calcula mal su
     posición en móvil cuando la página tiene overflow horizontal (el body ya
     lo oculta visualmente, pero el html sigue ampliando el viewport de layout
     usado para fijar elementos fixed — confirmado con el botón de WhatsApp). */
  overflow-x: hidden;
}

: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;
  }
}

/* ==========================================================================
   Botón flotante de WhatsApp (robot mascota, a un costado de la pantalla)
   ========================================================================== */
.wa-float-wrap {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9998;
  width: 88px;
}

.wa-float-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  line-height: 0;
  cursor: pointer;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.5));
  animation: waFloatBob 3.2s ease-in-out infinite;
  transition: transform 0.25s ease;
}

.wa-float-btn:hover,
.wa-float-btn:focus-visible {
  transform: scale(1.08);
}

.wa-float-btn::before {
  content: '';
  position: absolute;
  inset: 18% 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 211, 102, 0.4), transparent 72%);
  z-index: 0;
  animation: waPulseRing 2.6s ease-out infinite;
}

/* El robot saluda moviendo su propio brazo (recortado del render real, no un
   emoji superpuesto): el cuerpo tiene un "hueco" transparente donde iba el
   brazo IZQUIERDO (visto de frente; el derecho queda fijo, fusionado al
   cuerpo), y la capa del brazo se superpone exacta ahí en reposo, pivotando
   desde el hombro para el saludo. */
.wa-robot-figure {
  position: relative;
  width: 100%;
  line-height: 0;
}

.wa-robot-body {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

.wa-robot-arm {
  position: absolute;
  z-index: 2;
  left: 0.45%;
  top: 43.72%;
  width: 29.91%;
  height: auto;
  pointer-events: none;
  transform-origin: 76.12% 4.44%;
  animation: waArmWave 3.6s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes waFloatBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes waPulseRing {
  0% { transform: scale(0.75); opacity: 0.55; }
  70% { transform: scale(1.55); opacity: 0; }
  100% { opacity: 0; }
}

@keyframes waArmWave {
  0%, 52%, 100% { transform: rotate(0deg); }
  60% { transform: rotate(115deg); }
  67% { transform: rotate(95deg); }
  74% { transform: rotate(115deg); }
  81% { transform: rotate(95deg); }
  88% { transform: rotate(108deg); }
  95% { transform: rotate(0deg); }
}

/* Menú de opciones que despliega el botón al hacer clic */
.wa-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 230px;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.wa-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.wa-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(13, 20, 36, 0.94);
  border: 1px solid var(--space-border);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.wa-menu-item i {
  color: #25D366;
  font-size: 16px;
  width: 18px;
  text-align: center;
}

.wa-menu-item:hover {
  background: rgba(30, 111, 196, 0.35);
  transform: translateX(-4px);
}

@media (max-width: 768px) {
  .wa-float-wrap {
    width: 64px;
    right: 14px;
    bottom: 14px;
  }

  .wa-menu {
    min-width: 200px;
  }

  .wa-menu-item {
    padding: 10px 14px;
    font-size: 13px;
  }
}