/* ================================================================
   NEURALEGACY · EFECTOS HOVER — VERSIÓN DEFINITIVA
   Basado en análisis frame a frame del video
   Pegar en: Apariencia → Personalizar → CSS adicional
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ----------------------------------------------------------------
   VARIABLES GLOBALES
   ---------------------------------------------------------------- */
:root {
  --nl-blue:       #1B3882;
  --nl-blue-hover: #1D4ED8;
  --nl-accent:     #2563EB;
  --nl-yellow:     #F5C518;
  --nl-ease:       cubic-bezier(0.34, 1.15, 0.64, 1);
  --nl-speed:      0.26s;
}

/* ================================================================
   1. NAVBAR — FIJA AL HACER SCROLL + HOVER EN LINKS
   ================================================================ */

/* Sticky */
.elementor-location-header,
[data-elementor-type="header"],
header.site-header,
#masthead {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  transition: box-shadow 0.3s ease !important;
}

/* Links del nav → azul al hover (visto en frame_03: "Planes" azul) */
.elementor-nav-menu a,
.elementor-location-header nav a,
[data-elementor-type="header"] nav a,
.site-navigation a {
  color: #374151 !important;
  font-weight: 500 !important;
  transition: color var(--nl-speed) ease !important;
  text-decoration: none !important;
}
.elementor-nav-menu a:hover,
.elementor-location-header nav a:hover,
[data-elementor-type="header"] nav a:hover,
.site-navigation a:hover {
  color: var(--nl-accent) !important;
}

/* ================================================================
   2. BOTÓN PRIMARIO (fondo sólido azul)
      → zoom scale(1.04) + sube 3px + sombra más intensa
   ================================================================ */
.nl-btn-primary a.elementor-button,
.nl-btn-primary .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  background-color: var(--nl-blue) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 15px 28px !important;
  box-shadow: 0 4px 16px rgba(27, 56, 130, 0.38) !important;
  transform: scale(1) translateY(0);
  transition:
    transform     var(--nl-speed) var(--nl-ease),
    box-shadow    var(--nl-speed) ease,
    background    var(--nl-speed) ease !important;
  will-change: transform;
  cursor: pointer;
}
.nl-btn-primary a.elementor-button:hover,
.nl-btn-primary .elementor-button:hover {
  background-color: var(--nl-blue-hover) !important;
  box-shadow: 0 8px 28px rgba(27, 56, 130, 0.52) !important;
  transform: scale(1.04) translateY(-3px) !important;
}
.nl-btn-primary a.elementor-button:active,
.nl-btn-primary .elementor-button:active {
  transform: scale(0.98) translateY(0) !important;
  box-shadow: 0 2px 8px rgba(27, 56, 130, 0.28) !important;
}

/* ================================================================
   3. BOTÓN SECUNDARIO (borde, fondo blanco — "Ver Servicios")
      → frame_05: el borde se oscurece, sin zoom, sin relleno
   ================================================================ */
.nl-btn-secondary a.elementor-button,
.nl-btn-secondary .elementor-button {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  background-color: #FFFFFF !important;
  color: var(--nl-blue) !important;
  border: 2px solid var(--nl-blue) !important;
  border-radius: 8px !important;
  padding: 13px 26px !important;
  box-shadow: none !important;
  transform: none !important;
  transition:
    background-color var(--nl-speed) ease,
    color            var(--nl-speed) ease,
    border-color     var(--nl-speed) ease !important;
  cursor: pointer;
}
.nl-btn-secondary a.elementor-button:hover,
.nl-btn-secondary .elementor-button:hover {
  background-color: var(--nl-blue) !important;
  color: #FFFFFF !important;
  border-color: var(--nl-blue) !important;
  transform: none !important;
}

/* ================================================================
   4. TARJETAS DE SERVICIOS
      → frame_06: borde azul completo + elevación al hover
      Estado base: fondo #F0F4FB, sin borde visible
      Hover: border 1.5px solid #2563EB + translateY(-6px) + sombra
   ================================================================ */
.nl-service-card {
  background: #F0F4FB !important;
  border: 1.5px solid transparent !important;
  border-radius: 12px !important;
  padding: 28px 32px !important;
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition:
    transform   var(--nl-speed) var(--nl-ease),
    box-shadow  var(--nl-speed) ease,
    border-color var(--nl-speed) ease,
    background  var(--nl-speed) ease !important;
  will-change: transform;
  cursor: pointer;
}
.nl-service-card:hover {
  border-color: var(--nl-accent) !important;
  background: #FFFFFF !important;
  transform: translateY(-6px) !important;
  box-shadow:
    0 12px 32px rgba(37, 99, 235, 0.12),
    0 4px 12px  rgba(0, 0, 0, 0.08) !important;
}

/* Ícono dentro de la tarjeta — zoom independiente */
.nl-service-card .nl-service-icon {
  transition: transform var(--nl-speed) var(--nl-ease);
}
.nl-service-card:hover .nl-service-icon {
  transform: scale(1.10) translateY(-2px);
}

/* Link "Saber más →" — la flecha se desplaza */
.nl-service-card .nl-card-link,
.nl-service-card a[class*="saber"] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--nl-accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: gap var(--nl-speed) ease;
}
.nl-service-card:hover .nl-card-link,
.nl-service-card:hover a[class*="saber"] {
  gap: 9px;
}

/* ================================================================
   5. BOTÓN "DESCUBRE CÓMO PODEMOS AYUDARTE"
      → frame_08: fondo se oscurece, eleva levemente
      (mismo estilo que btn-primary, clase diferente)
   ================================================================ */
.nl-btn-discover a.elementor-button,
.nl-btn-discover .elementor-button {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  background-color: var(--nl-blue) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 15px 32px !important;
  box-shadow: 0 4px 16px rgba(27, 56, 130, 0.38) !important;
  transform: scale(1) translateY(0);
  transition:
    transform  var(--nl-speed) var(--nl-ease),
    box-shadow var(--nl-speed) ease,
    background var(--nl-speed) ease !important;
}
.nl-btn-discover a.elementor-button:hover,
.nl-btn-discover .elementor-button:hover {
  background-color: var(--nl-blue-hover) !important;
  box-shadow: 0 8px 28px rgba(27, 56, 130, 0.50) !important;
  transform: scale(1.04) translateY(-3px) !important;
}

/* ================================================================
   6. TARJETAS DE PRECIOS
      → frame_11: sombra creciente al hover, eleva 5px
      Sin borde azul — solo sombra y elevación
   ================================================================ */
.nl-pricing-card {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition:
    transform  var(--nl-speed) var(--nl-ease),
    box-shadow var(--nl-speed) ease !important;
  will-change: transform;
  cursor: pointer;
}
.nl-pricing-card:hover {
  transform: translateY(-5px) !important;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.14),
    0 4px 12px  rgba(0, 0, 0, 0.08) !important;
}

/* Tarjeta destacada Profesional — sombra con tinte azul */
.nl-pricing-card--featured:hover {
  transform: translateY(-5px) !important;
  box-shadow:
    0 16px 40px rgba(27, 56, 130, 0.32),
    0 6px 16px  rgba(27, 56, 130, 0.18) !important;
}

/* Botones internos de precios */
.nl-pricing-btn a,
.nl-pricing-btn .elementor-button {
  transition:
    transform  var(--nl-speed) var(--nl-ease),
    box-shadow var(--nl-speed) ease,
    background var(--nl-speed) ease !important;
}
.nl-pricing-btn a:hover,
.nl-pricing-btn .elementor-button:hover {
  transform: scale(1.03) translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
}

/* ================================================================
   7. TARJETAS DE RECURSOS (fondo oscuro)
      → frame_12: highlight gradiente esquina inferior-derecha
        hacia esquina superior-izquierda + sombra + eleva
   ================================================================ */
.nl-resource-card {
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  transition:
    transform  var(--nl-speed) var(--nl-ease),
    box-shadow var(--nl-speed) ease !important;
  will-change: transform;
  cursor: pointer;
}

/* Capa de highlight — invisible en estado base */
.nl-resource-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Gradiente: esquina inf-derecha (brillante) → sup-izquierda (oscuro) */
  background: linear-gradient(
    225deg,
    rgba(255, 255, 255, 0.00)  0%,
    rgba(255, 255, 255, 0.00) 35%,
    rgba(37,  99, 235, 0.09)  70%,
    rgba(255, 255, 255, 0.07) 100%
  );
  opacity: 0;
  transition: opacity var(--nl-speed) ease;
  pointer-events: none;
  z-index: 1;
}

.nl-resource-card:hover {
  transform: translateY(-5px) !important;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.40),
    0 4px  12px rgba(0, 0, 0, 0.22) !important;
}
.nl-resource-card:hover::after {
  opacity: 1;
}

/* ================================================================
   8. BOTÓN AMARILLO "EXPLORAR TODOS LOS RECURSOS"
      → frame_12: cursor sobre él → zoom + sombra amarilla
   ================================================================ */
.nl-btn-yellow a.elementor-button,
.nl-btn-yellow .elementor-button {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  background-color: var(--nl-yellow) !important;
  color: #111827 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 32px !important;
  box-shadow: 0 4px 14px rgba(245, 197, 24, 0.35) !important;
  transform: scale(1) translateY(0);
  transition:
    transform  var(--nl-speed) var(--nl-ease),
    box-shadow var(--nl-speed) ease,
    background var(--nl-speed) ease !important;
}
.nl-btn-yellow a.elementor-button:hover,
.nl-btn-yellow .elementor-button:hover {
  background-color: #E5B800 !important;
  box-shadow: 0 8px 28px rgba(245, 197, 24, 0.55) !important;
  transform: scale(1.04) translateY(-3px) !important;
}

/* ================================================================
   9. FOOTER — LINKS SE ILUMINAN A BLANCO PURO
      → frame_12: links gris → blanco brillante al hover
   ================================================================ */
footer a,
.nl-footer-link,
.nl-footer-link a,
.elementor-location-footer a,
footer .elementor-widget-text-editor a,
footer .elementor-widget-nav-menu a {
  color: rgba(255, 255, 255, 0.55) !important;
  text-decoration: none !important;
  transition: color var(--nl-speed) ease !important;
}
footer a:hover,
.nl-footer-link:hover,
.nl-footer-link a:hover,
.elementor-location-footer a:hover,
footer .elementor-widget-text-editor a:hover,
footer .elementor-widget-nav-menu a:hover {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* ================================================================
   10. ÍCONOS DE REDES SOCIALES
       → fondo oscuro → azul #2563EB + scale al hover
       → frame_12: Facebook, LinkedIn, Instagram, Twitter
   ================================================================ */
.nl-social-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  border-radius: 8px !important;
  transform: scale(1) translateY(0);
  transition:
    background  var(--nl-speed) ease,
    transform   var(--nl-speed) var(--nl-ease) !important;
  will-change: transform;
  cursor: pointer;
}
.nl-social-icon:hover {
  background: var(--nl-accent) !important;
  transform: scale(1.14) translateY(-2px) !important;
}
.nl-social-icon a,
.nl-social-icon svg,
.nl-social-icon i {
  color: rgba(255, 255, 255, 0.65) !important;
  transition: color var(--nl-speed) ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.nl-social-icon:hover a,
.nl-social-icon:hover svg,
.nl-social-icon:hover i {
  color: #FFFFFF !important;
}

/* ================================================================
   11. IMAGEN HERO — zoom suave + eleva
       (es una imagen rectangular con r-16, NO circular)
   ================================================================ */
.nl-hero-img-wrap {
  overflow: hidden !important;
  border-radius: 16px !important;
  display: block;
  cursor: pointer;
}
.nl-hero-img-wrap img {
  display: block !important;
  width: 100% !important;
  transform: scale(1) translateY(0);
  transition: transform 0.4s var(--nl-ease) !important;
  will-change: transform;
}
.nl-hero-img-wrap:hover img {
  transform: scale(1.05) translateY(-3px) !important;
}

/* ================================================================
   12. ITEMS DE FEATURE (sección azul oscuro — "¿Por qué NL?")
       → fondo semitransparente se ilumina levemente al hover
   ================================================================ */
.nl-feature-item {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  transition:
    background  var(--nl-speed) ease,
    border-color var(--nl-speed) ease,
    transform   var(--nl-speed) var(--nl-ease) !important;
  cursor: pointer;
}
.nl-feature-item:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  transform: translateX(4px) !important;
}

/* ================================================================
   13. LINKS "Saber más →" / "Leer más →" / "Ver webinar →"
       → la flecha avanza hacia la derecha
   ================================================================ */
a.nl-card-link,
.nl-resource-link,
a[class*="leer-mas"],
a[class*="saber-mas"] {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  text-decoration: none !important;
  transition: gap var(--nl-speed) ease, color var(--nl-speed) ease !important;
}
a.nl-card-link:hover,
.nl-resource-link:hover {
  gap: 10px !important;
}

/* ================================================================
   UTILIDAD — clase genérica reutilizable
   Agregar .nl-zoom a cualquier elemento para el efecto zoom
   ================================================================ */
.nl-zoom {
  transition:
    transform  var(--nl-speed) var(--nl-ease),
    box-shadow var(--nl-speed) ease !important;
  will-change: transform;
}
.nl-zoom:hover {
  transform: scale(1.04) translateY(-3px) !important;
}