/* ==========================================================================
   NEXEN CAPITAL — base compartida para los bloques de Elementor
   Se sube UNA sola vez (Media Library o widget HTML en el <head>) y la usan
   todos los bloques. Todo va aislado bajo .nxn para no tocar el tema de WP.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

.nxn {
  /* Paleta Nexen */
  --nxn-navy-950: #060E1A;
  --nxn-navy-900: #0A1628;
  --nxn-navy-800: #0F1E35;
  --nxn-navy-700: #1A2D47;
  --nxn-accent: #2563EB;
  --nxn-accent-hover: #3B82F6;
  --nxn-accent-2: #7DB2FF;
  --nxn-surface-light: #F8FAFC;
  --nxn-surface-mid: #F1F5F9;
  --nxn-border: #E2E8F0;
  --nxn-success: #22C55E;

  --nxn-font: 'Poppins', system-ui, sans-serif;

  font-family: var(--nxn-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* Reset acotado — SOLO afecta lo que está dentro de .nxn */
.nxn *,
.nxn *::before,
.nxn *::after {
  box-sizing: border-box;
}
.nxn h1, .nxn h2, .nxn h3, .nxn h4, .nxn p, .nxn ul, .nxn ol, .nxn figure {
  margin: 0;
  padding: 0;
}
.nxn ul, .nxn ol { list-style: none; }
.nxn img { max-width: 100%; display: block; }
.nxn a { text-decoration: none; color: inherit; }

/* Fix: el reset a{color:inherit}/button de Tailwind pisaba las utilidades de
   color de texto en <a>/<button> dentro de secciones claras (ej. el botón
   "Ver todos los casos" salía casi blanco sobre fondo blanco). Se respeta la
   utilidad, y los hover: siguen funcionando. */
.nxn a[class~="text-navy-900"], .nxn button[class~="text-navy-900"] { color: #0A1628; }
.nxn a[class~="text-navy-800"], .nxn button[class~="text-navy-800"] { color: #0F1E35; }
.nxn a[class~="text-navy-700"], .nxn button[class~="text-navy-700"] { color: #1A2D47; }
.nxn a[class~="text-white"], .nxn button[class~="text-white"] { color: #fff; }
.nxn a[class~="text-accent"], .nxn button[class~="text-accent"] { color: #2563EB; }
.nxn a[class~="hover:text-accent"]:hover, .nxn button[class~="hover:text-accent"]:hover { color: #2563EB; }
.nxn a[class~="hover:text-white"]:hover, .nxn button[class~="hover:text-white"]:hover { color: #fff; }
.nxn a[class~="hover:text-navy-900"]:hover, .nxn button[class~="hover:text-navy-900"]:hover { color: #0A1628; }

/* Hover "se ilumina el fondo" en las tarjetas oscuras (reemplaza el spotlight
   que seguía al cursor, cuyos <div> no sobrevivieron a la extracción). */
.nxn .card-dark-hover { transition: box-shadow .3s ease, border-color .3s ease, background-color .3s ease; }
.nxn .card-dark-hover:hover {
  border-color: rgba(37, 99, 235, .45);
  background-color: rgba(37, 99, 235, .05);
  box-shadow: 0 0 44px -6px rgba(37, 99, 235, .22);
}

/* Fix line-clamp: en el CSS extraído computaba display:flow-root (no truncaba,
   los textos largos se salían del cuadro). Forzamos el box de recorte. */
.nxn [class*="line-clamp-"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nxn .nxn-mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.nxn .nxn-tnum { font-variant-numeric: tabular-nums; }

/* Contenedor de ancho máximo reutilizable */
.nxn .nxn-wrap {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Reveal on scroll — el contenido es visible por defecto (sin JS se ve igual).
   El JS añade .nxn-in al entrar en vista y ESO dispara un @keyframes que fuerza
   la aparición (las animaciones ganan sobre el opacity normal, así no depende
   de guerras de especificidad). */
@keyframes nxnReveal {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
.nxn.nxn-js [data-nxn-reveal].nxn-in {
  animation: nxnReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---- Keyframes del gráfico del Método ---- */
@keyframes nxnSwap {
  from { opacity: 0; transform: translateY(10px); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes nxnPing {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(3.4); opacity: 0; }
}
@keyframes nxnFlow { to { stroke-dashoffset: -28; } }
@keyframes nxnGlowPulse {
  0%, 100% { box-shadow: 0 0 22px rgba(37, 99, 235, 0.45); }
  50% { box-shadow: 0 0 46px rgba(37, 99, 235, 0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .nxn [data-nxn-reveal] { opacity: 1; transform: none; transition: none; }
  .nxn.nxn-js [data-nxn-reveal].nxn-in { animation: none; }
}

/* ---- Lenis smooth scroll (inercia/momentum, igual que el React) ----
   Las clases las pone Lenis en el <html>, por eso NO van bajo .nxn.
   Sin JS de Lenis (o reduced-motion) estas reglas no aplican. */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
