/* ==========================================================================
   nucleo.css — capa de diseño para las 4 páginas de núcleo
   (Atraer · Convertir · Automatizar · Escalar).
   Se carga DESPUÉS de pages.css y solo la usan esas páginas.
   Todo va prefijado con .nx- para no chocar con la home ni con el blog.
   Cada página fija su color de acento con --nx (por defecto, lima de marca).
   ========================================================================== */

:root{
  --nx:#C7FF2E;              /* acento del núcleo (lo pisa cada página) */
  --nx-soft:rgba(199,255,46,.14);
  --nx-glass:rgba(245,244,242,.045);
  --nx-glass-2:rgba(245,244,242,.07);
}

/* el <main> de estas páginas NO lleva .wrap: cada bloque pone el suyo */
.nx-page{ overflow-x:clip; }
.nx-page .wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* --------------------------------------------------------------------------
   REVEAL — animación de entrada compartida (reveal.js añade .in)
   -------------------------------------------------------------------------- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0s); will-change:opacity,transform; }
.rv.in{ opacity:1; transform:none; }
.rv-l{ transform:translateX(-28px); }
.rv-r{ transform:translateX(28px); }
.rv-s{ transform:scale(.96); }
@media(prefers-reduced-motion:reduce){
  .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* --------------------------------------------------------------------------
   HERO — sin foto: degradado con luces + grano (las imágenes fuertes van dentro)
   -------------------------------------------------------------------------- */
.nx-hero{ position:relative; isolation:isolate; padding:150px 0 0; margin-bottom:10px; }
/* Luces del hero. NO pinta un bloque de color: son focos que se disuelven en el
   fondo continuo de la página, así que no queda ninguna línea de corte al acabar. */
.nx-hero::before{ content:""; position:absolute; inset:-180px 0 -140px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 38% at 14% 6%, color-mix(in srgb, var(--nx) 15%, transparent), transparent 68%),
    radial-gradient(40% 34% at 86% 20%, rgba(90,190,130,.14), transparent 70%),
    radial-gradient(52% 44% at 62% 78%, rgba(120,200,140,.07), transparent 72%);
  -webkit-mask-image:linear-gradient(#000 62%, rgba(0,0,0,.45) 82%, transparent 100%);
  mask-image:linear-gradient(#000 62%, rgba(0,0,0,.45) 82%, transparent 100%); }
/* ⚠️ NO animar background-position aquí: repinta la capa que hay bajo el nav fijo
   y Chrome dejaba un "fantasma" de la pastilla hasta el primer clic. */
/* grano fino, también difuminado por abajo para que no marque borde */
.nx-hero::after{ content:""; position:absolute; inset:-180px 0 -140px; z-index:-1; pointer-events:none; opacity:.26; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  -webkit-mask-image:linear-gradient(#000 60%, transparent 100%);
  mask-image:linear-gradient(#000 60%, transparent 100%); }

.nx-hero-in{ position:relative; padding-bottom:74px; }
.nx-hero .crumbs{ padding-top:0; margin-bottom:26px; }
/* La pastilla anterior (mono, versalitas, tracking enorme, punto que latía)
   es el tic visual de web generada. Se queda la información —en qué núcleo
   estás, que sí aporta orientación y palabra clave— y se va el disfraz: una
   línea normal, en la tipografía de la casa. */
.nx-kicker{ display:inline-block; font-family:var(--disp); font-size:15px; font-weight:400;
  letter-spacing:-.005em; color:var(--muted); }
.nx-kicker b{ color:var(--nx); font-weight:500; }

/* El titular usa TODO el ancho de la columna. Con max-width en ch cada página
   cortaba por un sitio distinto (una a dos líneas anchas, otra a tres estrechas)
   y el bloque salía apelmazado; text-wrap:balance lo empeoraba, porque iguala
   las líneas a costa de estrechar el conjunto. */
.nx-hero h1{ font-family:var(--disp); font-weight:600; letter-spacing:-.035em; line-height:1.03;
  font-size:clamp(38px,6.2vw,72px); max-width:none; margin-top:22px; text-wrap:pretty; }
.nx-hero h1 .lime{ color:var(--nx); }
.nx-hero h1 em{ font-style:normal; color:var(--nx); }
.nx-lead{ color:#cfdcc7; font-size:clamp(17px,2.05vw,21.5px); line-height:1.55; max-width:68ch; margin-top:26px; }
.nx-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.nx-btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:600; font-size:16px;
  border-radius:999px; padding:15px 28px; transition:transform .18s, box-shadow .18s, background .18s, border-color .18s, color .18s; }
.nx-btn--solid{ background:var(--nx); color:#0b170c; }
.nx-btn--solid:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -14px color-mix(in srgb, var(--nx) 60%, transparent); }
.nx-btn--ghost{ border:1px solid rgba(245,244,242,.24); color:var(--ink); background:rgba(245,244,242,.04); backdrop-filter:blur(8px); }
.nx-btn--ghost:hover{ border-color:var(--nx); color:var(--nx); transform:translateY(-2px); }
.nx-btn svg{ transition:transform .18s; }
.nx-btn:hover svg{ transform:translateX(3px); }


/* --------------------------------------------------------------------------
   Encabezado de sección
   -------------------------------------------------------------------------- */
.nx-head{ max-width:70ch; }
/* misma idea que el kicker: fuera versalitas y tracking de terminal */
.nx-head .nx-eyebrow{ font-family:var(--disp); font-size:14.5px; font-weight:500; letter-spacing:-.005em;
  text-transform:none; color:var(--nx); display:inline-flex; align-items:center; gap:10px; }
.nx-head .nx-eyebrow::before{ content:""; width:22px; height:1px; background:var(--nx); opacity:.6; }
.nx-head h2{ margin-top:18px; font-size:clamp(28px,4.2vw,46px); letter-spacing:-.035em; text-wrap:balance; }
.nx-head h2 .lime{ color:var(--nx); }
.nx-head p{ margin-top:18px; color:var(--muted); font-size:clamp(16px,1.9vw,18.5px); max-width:60ch; }

/* --------------------------------------------------------------------------
   Split: texto pegajoso + imagen con marco de luz
   -------------------------------------------------------------------------- */
.nx-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.nx-split--rev .nx-split-media{ order:-1; }
.nx-split-media{ position:relative; }
.nx-frame{ position:relative; border-radius:24px; overflow:hidden; border:1px solid rgba(245,244,242,.14);
  box-shadow:0 40px 90px -50px rgba(0,0,0,1); background:#0b170c; }
.nx-frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.nx-frame:hover img{ transform:scale(1.045); }
.nx-frame::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(11,23,12,.55)); }
/* halo del núcleo detrás del marco */
.nx-split-media::before{ content:""; position:absolute; inset:-14% -10% -10%; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--nx) 16%, transparent), transparent 70%);
  filter:blur(30px); }
/* chip flotante sobre la imagen */
.nx-float{ position:absolute; left:20px; bottom:20px; z-index:2; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--disp); font-size:13px; font-weight:500; letter-spacing:-.005em; color:var(--ink);
  background:rgba(11,23,12,.72); border:1px solid rgba(245,244,242,.16); border-radius:999px; padding:9px 15px;
  backdrop-filter:blur(10px); }
.nx-float .dot{ width:6px; height:6px; border-radius:50%; background:var(--nx); box-shadow:0 0 10px var(--nx); }

/* lista con checks del núcleo */
.nx-checks{ list-style:none; margin-top:26px; display:grid; gap:14px; }
.nx-checks li{ display:flex; gap:13px; align-items:flex-start; color:var(--muted); font-size:16.5px; line-height:1.5; }
.nx-checks li strong{ color:var(--ink); }
.nx-checks .ck{ flex:0 0 auto; width:21px; height:21px; border-radius:7px; display:grid; place-items:center; margin-top:1px;
  background:color-mix(in srgb, var(--nx) 15%, transparent); border:1px solid color-mix(in srgb, var(--nx) 38%, transparent); }
.nx-checks .ck svg{ width:11px; height:11px; stroke:var(--nx); }

/* --------------------------------------------------------------------------
   Tarjetas "las palancas".

   Sobre la referencia que pasó Alex ("Design that works"): en un mismo bloque
   conviven tarjetas de NATURALEZA distinta. Cuatro cajas iguales con una
   escena abstracta dentro no son un diseño, son una plantilla.

   Lo que unifica las cuatro es el NÚMERO, grande y al mismo tamaño en todas:
   son las palancas 01→04 de un mismo sistema, y así se lee de un vistazo.
   Lo que las diferencia es el acabado:

     01 · degradado lima (misma familia que las portadas del blog), tinta oscura
     02 · foto a sangre, propia de esa palanca
     03 · plano sólido con el icono al lado opuesto del número
     04 · plano sólido con el canto lima

   Colocación en zigzag — [01 pequeña][02 ancha] / [03 ancha][04 pequeña].
   Con las dos pequeñas apiladas a la izquierda parecía que la de la izquierda
   estaba describiendo a la de la derecha; alternando, cada tarjeta se lee
   como una unidad.

   El contenido se ancla ARRIBA (número) y ABAJO (título + descripción), con
   el centro vacío a propósito: ese hueco es casi todo el efecto.
   -------------------------------------------------------------------------- */
.nx-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px; }
.nx-card--wide{ grid-column:span 2; }

/* cabecera centrada para este bloque (en la referencia el titular de sección
   va centrado, con la bajada a dos líneas debajo) */
.nx-head--c{ text-align:center; max-width:760px; margin-left:auto; margin-right:auto; }
.nx-head--c .nx-eyebrow{ justify-content:center; }
.nx-head--c p{ margin-left:auto; margin-right:auto; }

.nx-card{ position:relative; isolation:isolate; overflow:hidden; border-radius:28px;
  min-height:364px; padding:34px 34px 36px; display:flex; flex-direction:column;
  background:#18261A; border:none;
  box-shadow:0 30px 60px -44px rgba(0,0,0,.9);
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s, background .4s; }
.nx-card:hover{ transform:translateY(-4px); box-shadow:0 46px 84px -46px rgba(0,0,0,1); }
/* el aclarado al pasar por encima solo tiene sentido en los planos sólidos */
.nx-card--edge:hover{ background:#1E2F20; }

/* la única iluminación que se mueve: un foco muy suave siguiendo al ratón */
.nx-card--ico::before, .nx-card--edge::before{ content:""; position:absolute; inset:0; z-index:1;
  opacity:0; pointer-events:none; transition:opacity .4s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,30%), rgba(255,255,255,.055), transparent 62%); }
.nx-card--ico:hover::before, .nx-card--edge:hover::before{ opacity:1; }

/* --- zona de arriba: el número manda, el icono (si lo hay) va enfrente --- */
.nx-card-top{ position:relative; z-index:2; display:flex; align-items:flex-start;
  justify-content:space-between; gap:16px; }
.nx-big{ font-family:var(--disp); font-weight:600; font-size:clamp(48px,5.4vw,68px); line-height:.9;
  letter-spacing:-.05em; color:#fff; }
.nx-ico{ width:52px; height:52px; flex:none; border-radius:15px; display:grid; place-items:center;
  color:#0b170c; background:linear-gradient(150deg, var(--nx), color-mix(in srgb, var(--nx) 55%, #2f7a11));
  box-shadow:0 12px 28px -14px color-mix(in srgb, var(--nx) 70%, transparent); }
.nx-ico svg{ width:24px; height:24px; }
/* en la tarjeta ancha el icono tiene que sostener su lado: a 52px se perdia */
.nx-card--ico .nx-ico{ width:64px; height:64px; border-radius:19px; }
.nx-card--ico .nx-ico svg{ width:29px; height:29px; }

/* --- zona de abajo: título + descripción, pegados al pie --- */
.nx-card-body{ position:relative; z-index:2; margin-top:auto; padding-top:56px; }
.nx-card h3{ font-family:var(--disp); font-weight:600; letter-spacing:-.03em; line-height:1.16;
  font-size:23px; color:#fff; margin:0 0 10px; max-width:18ch; }
.nx-card p{ font-size:15px; line-height:1.55; margin:0; color:rgba(255,255,255,.66); max-width:34ch; }
.nx-card--wide h3{ font-size:26px; max-width:22ch; }
.nx-card--wide p{ max-width:46ch; }

/* --- 01 · degradado lima, de la misma familia que las portadas del blog --- */
/* Ojo: el degradado NO puede oscurecerse por abajo. Ahi es donde vive el
   texto, y con tinta oscura sobre verde botella no se lee nada. Se mantiene
   en el tramo claro del lima de punta a punta. */
.nx-card--grad{
  background:
    radial-gradient(78% 58% at 78% 16%, #D7F58C 0%, transparent 58%),
    radial-gradient(90% 70% at 18% 92%, #4F9418 0%, transparent 62%),
    linear-gradient(158deg, #B3E85C 0%, #97D633 32%, #74B322 66%, #4A8A16 100%); }
/* sobre lima el texto va en tinta oscura: con blanco el contraste es 1.6:1 */
.nx-card--grad .nx-big, .nx-card--grad h3{ color:#0b170c; }
.nx-card--grad p{ color:rgba(11,23,12,.78); }

/* --- 02 · foto a sangre --- */
.nx-card--photo{ background:#0b170c; }
.nx-card-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:transform 1.4s cubic-bezier(.16,1,.3,1); }
.nx-card--photo:hover .nx-card-img{ transform:scale(1.04); }
/* velo: sin él el texto no se lee sobre la foto */
.nx-card--photo::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,16,9,.30) 0%, rgba(8,16,9,.10) 28%,
    rgba(8,16,9,.76) 64%, rgba(8,16,9,.95) 100%); }
.nx-card--photo p{ color:rgba(255,255,255,.78); }

/* --- 03 · el plano con icono ---
   Es la tarjeta más ancha y la que menos elementos tiene, así que el hueco
   central se le quedaba muerto. En vez de meterle contenido de relleno se le
   da MATERIA: el icono derrama luz sobre el plano y una trama de puntos se
   desvanece desde esa esquina. Dos capas, ninguna con información: la tarjeta
   sigue diciendo lo mismo, pero deja de parecer un plano vacío. */
.nx-card--ico{
  background:
    radial-gradient(56% 66% at 92% 6%, color-mix(in srgb, var(--nx) 17%, transparent), transparent 64%),
    linear-gradient(200deg, rgba(255,255,255,.045), transparent 44%),
    #18261A; }
.nx-card--ico:hover{
  background:
    radial-gradient(56% 66% at 92% 6%, color-mix(in srgb, var(--nx) 24%, transparent), transparent 64%),
    linear-gradient(200deg, rgba(255,255,255,.06), transparent 44%),
    #1C2C1E; }
.nx-card--ico::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.1px);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(88% 104% at 88% 8%, #000 4%, transparent 78%);
          mask-image:radial-gradient(88% 104% at 88% 8%, #000 4%, transparent 78%); }
/* el icono, además, proyecta su propio halo */
.nx-card--ico .nx-ico{ box-shadow:0 14px 34px -12px color-mix(in srgb, var(--nx) 75%, transparent),
  0 0 90px -10px color-mix(in srgb, var(--nx) 34%, transparent); }

/* --- 04 · el canto lima --- */
.nx-card--edge{ padding-right:44px; }
.nx-card--edge::after{ content:""; position:absolute; z-index:3; right:0; top:0; bottom:0; width:14px;
  border-radius:0 28px 28px 0;
  background:linear-gradient(180deg, var(--nx), color-mix(in srgb, var(--nx) 42%, #2f7a11)); }

@media(prefers-reduced-motion:reduce){ .nx-card, .nx-card-img{ transition:none; } }

@media(max-width:1000px){
  .nx-grid{ grid-template-columns:repeat(2,1fr); }
  .nx-card--wide{ grid-column:span 2; }
  .nx-card{ min-height:340px; }
}
@media(max-width:640px){
  .nx-grid{ grid-template-columns:1fr; gap:16px; }
  .nx-card--wide{ grid-column:auto; }
  .nx-card{ min-height:290px; padding:26px 26px 28px; border-radius:24px; }
  .nx-card--edge{ padding-right:34px; }
  .nx-card--edge::after{ border-radius:0 24px 24px 0; width:11px; }
  .nx-card-body{ padding-top:38px; }
  .nx-card h3, .nx-card--wide h3{ font-size:21px; }
}

/* --------------------------------------------------------------------------
   Proceso — timeline HORIZONTAL de 4 pasos. La línea se dibuja con el scroll
   (reveal.js escribe --p). En móvil pasa a vertical.
   -------------------------------------------------------------------------- */
.nx-proc{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:30px;
  margin-top:52px; padding-top:40px; }
.nx-proc::before{ content:""; position:absolute; left:0; right:0; top:6px; height:2px;
  background:rgba(245,244,242,.1); }
.nx-proc::after{ content:""; position:absolute; left:0; top:6px; height:2px;
  width:calc(var(--p,0) * 100%); background:linear-gradient(90deg, var(--nx), color-mix(in srgb, var(--nx) 45%, transparent));
  box-shadow:0 0 14px color-mix(in srgb, var(--nx) 55%, transparent); transition:width .25s linear; }

.nx-step{ position:relative; padding:0; }
.nx-step::before{ content:""; position:absolute; left:0; top:-40px; width:14px; height:14px; border-radius:50%;
  background:var(--bg); border:2px solid rgba(245,244,242,.24);
  transition:border-color .4s, background .4s, box-shadow .4s; }
.nx-step.in::before{ border-color:var(--nx); background:var(--nx);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--nx) 12%, transparent); }
.nx-step .s{ font-family:var(--disp); font-size:13.5px; font-weight:500; letter-spacing:-.005em; color:var(--nx); }
.nx-step h4{ font-family:var(--disp); font-weight:600; font-size:clamp(18px,2vw,21px); letter-spacing:-.025em;
  color:var(--ink); margin-top:10px; line-height:1.15; }
.nx-step p{ font-size:15.5px; margin-top:10px; max-width:26ch; color:var(--muted); }

@media(max-width:860px){
  .nx-proc{ grid-template-columns:1fr; gap:32px; padding:8px 0 0 42px; margin-top:40px; }
  .nx-proc::before{ left:15px; right:auto; top:8px; bottom:8px; width:2px; height:auto; }
  .nx-proc::after{ left:15px; top:8px; width:2px; height:calc(var(--p,0) * 100%);
    max-height:calc(100% - 16px); background:linear-gradient(180deg, var(--nx), color-mix(in srgb, var(--nx) 45%, transparent)); }
  .nx-step::before{ left:-34px; top:5px; width:12px; height:12px; }
  .nx-step p{ max-width:44ch; }
}

/* --------------------------------------------------------------------------
   Panel de entregables (con imagen cuadrada del núcleo)
   -------------------------------------------------------------------------- */
.nx-panel{ position:relative; overflow:hidden; border-radius:28px; border:1px solid rgba(245,244,242,.11);
  background:linear-gradient(150deg, rgba(245,244,242,.055), rgba(245,244,242,.015)); padding:44px; }
.nx-panel-in{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
.nx-panel .nx-sq{ border-radius:20px; overflow:hidden; border:1px solid rgba(245,244,242,.13); aspect-ratio:1/1; }
.nx-panel .nx-sq img{ width:100%; height:100%; object-fit:cover; }
.nx-panel::before{ content:""; position:absolute; top:-40%; right:-10%; width:60%; height:140%; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--nx) 12%, transparent), transparent 70%); filter:blur(24px); }


/* --------------------------------------------------------------------------
   Banda de MODELO — "no somos un proveedor, nos integramos".
   Va en CLARO a propósito: rompe el bloque oscuro y hace de respiro,
   igual que la galería de núcleos de la home.
   -------------------------------------------------------------------------- */
.nx-model{ position:relative; overflow:hidden; border-radius:28px; padding:48px;
  background:#f2f1ea; color:#0f1f10; border:1px solid rgba(15,31,16,.08);
  box-shadow:0 30px 70px -50px rgba(0,0,0,.9); }
.nx-model::after{ content:""; position:absolute; right:-8%; top:-70%; width:52%; height:210%; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--nx) 26%, transparent), transparent 70%);
  filter:blur(30px); opacity:.5; }
.nx-model .nx-head{ position:relative; }
.nx-model .nx-head .nx-eyebrow{ color:#4a6a2a; }
.nx-model .nx-head .nx-eyebrow::before{ background:#7ea82f; opacity:1; }
.nx-model .nx-head h2{ margin-top:16px; color:#0f1f10; text-shadow:none; }
/* en claro el lima no se lee como texto: pasa a subrayado marcador */
.nx-model .nx-head h2 .lime{ color:#0f1f10; padding:0 .06em;
  background:linear-gradient(180deg,transparent 58%,var(--lime) 58%,var(--lime) 94%,transparent 94%); }
.nx-model .nx-head p{ color:#4c5c48; }
.nx-model-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:36px;
  padding-top:32px; border-top:1px solid rgba(15,31,16,.12); position:relative; }
.nx-model-grid .k{ font-family:var(--disp); font-size:13px; font-weight:500; letter-spacing:-.005em; color:#4a6a2a; }
.nx-model-grid h4{ font-family:var(--disp); font-weight:600; font-size:18px; letter-spacing:-.02em; color:#0f1f10; margin-top:11px; }
.nx-model-grid p{ font-size:15px; margin-top:9px; color:#55654f; }
@media(max-width:900px){ .nx-model{ padding:32px 26px; } .nx-model-grid{ grid-template-columns:1fr; gap:24px; } }

/* --------------------------------------------------------------------------
   Banda de caso real
   -------------------------------------------------------------------------- */
.nx-case{ display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center;
  border:1px solid rgba(245,244,242,.12); border-radius:22px; padding:26px 30px;
  background:linear-gradient(100deg, color-mix(in srgb, var(--nx) 7%, transparent), transparent 60%);
  transition:border-color .25s, transform .25s; }
.nx-case:hover{ border-color:color-mix(in srgb, var(--nx) 45%, transparent); transform:translateY(-3px); }
.nx-case img{ height:30px; width:auto; opacity:.92; }
.nx-case .q{ font-family:var(--disp); font-size:clamp(16px,2vw,19px); color:var(--ink); font-weight:500; letter-spacing:-.01em; max-width:none; }
.nx-case .go{ font-family:var(--disp); font-size:14px; font-weight:500; letter-spacing:-.005em; color:var(--nx); white-space:nowrap; }

/* --------------------------------------------------------------------------
   FAQ + CTA (afinado sobre el de pages.css)
   -------------------------------------------------------------------------- */
.nx-page .faq summary::after{ color:var(--nx); }
.nx-cta{ position:relative; overflow:hidden; text-align:center; border-radius:30px; padding:74px 30px;
  border:1px solid rgba(245,244,242,.13);
  background:radial-gradient(90% 130% at 50% 0%, color-mix(in srgb, var(--nx) 12%, transparent), transparent 60%), rgba(245,244,242,.02); }
.nx-cta h2{ font-size:clamp(28px,4.4vw,48px); letter-spacing:-.035em; max-width:19ch; margin:0 auto; }
.nx-cta h2 .lime{ color:var(--nx); }
.nx-cta p{ margin:18px auto 0; color:var(--muted); }
.nx-cta .nx-hero-cta{ justify-content:center; }

/* --------------------------------------------------------------------------
   Otros núcleos (con miniatura)
   -------------------------------------------------------------------------- */
.nx-cross{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; }
.nx-cross a{ display:block; border-radius:20px; overflow:hidden; border:1px solid rgba(245,244,242,.1);
  background:rgba(245,244,242,.02); transition:border-color .25s, transform .25s; }
.nx-cross a:hover{ border-color:var(--lime); transform:translateY(-4px); }
.nx-cross .im{ aspect-ratio:16/9; overflow:hidden; }
.nx-cross .im img{ width:100%; height:100%; object-fit:cover; opacity:.72; transition:opacity .3s, transform .5s; }
.nx-cross a:hover .im img{ opacity:1; transform:scale(1.06); }
.nx-cross .bd{ padding:18px 20px 22px; }
.nx-cross .k{ font-family:var(--disp); font-size:13px; font-weight:500; letter-spacing:-.005em; color:var(--lime); }
.nx-cross .t{ display:block; margin-top:8px; font-weight:600; color:var(--ink); font-size:17px; letter-spacing:-.02em; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media(max-width:980px){
  .nx-split{ grid-template-columns:1fr; gap:36px; }
  .nx-split--rev .nx-split-media{ order:0; }
  .nx-panel-in{ grid-template-columns:1fr; gap:34px; }
  .nx-panel{ padding:32px 26px; }
  .nx-cross{ grid-template-columns:1fr; }
}
@media(max-width:720px){
  .nx-hero{ padding-top:118px; }
  .nx-hero-in{ padding-bottom:52px; }
  .nx-grid{ grid-template-columns:1fr; }
  .nx-case{ grid-template-columns:1fr; gap:16px; text-align:left; }
  .nx-cta{ padding:52px 22px; border-radius:24px; }
  .nx-hero-bg img{ transform:none !important; }
}