/* ==========================================================================
   claro.css — DIRECCIÓN DE ARTE del sitio. Base clara.
   --------------------------------------------------------------------------
   Se carga la última en todas las páginas y es la que manda sobre pages.css,
   nucleo.css y clientes.css. Nació como prueba en /pruebas/atraer-claro y
   pasó a producción con el visto bueno de Alex.

   Diagnóstico del que sale: la web se veía pesada por cuatro razones, y
   ninguna era el color de marca en sí.

     1. Todo oscuro de arriba abajo. Lo premium no es ser oscuro, es el
        contraste ENTRE bloques. Aquí la base es off-white y el verde bosque
        se reserva para dos golpes: el bloque del modelo y el cierre.
     2. El lima aparecía 15-20 veces por página y dejaba de dirigir la
        mirada. Aquí sale tres veces: el botón, una palabra del titular y el
        canto de una tarjeta.
     3. Una imagen generada por bloque. Aquí quedan dos.
     4. Escala tipográfica plana (casi todo entre 15 y 26px). Aquí hay saltos
        de verdad: 92 / 60 / 24 / 18 / 13.

   Se carga DESPUÉS de pages.css y nucleo.css y solo pisa color, peso y aire.
   Ni una sola caja cambia de sitio: la estructura es la misma.
   ========================================================================== */

/* Las hojas de abajo (pages.css, nucleo.css) pintan decenas de piezas con
   var(--ink) y var(--muted), que ahí valen off-white. Sobre fondo claro eso
   deja texto blanco sobre blanco — es lo que pasaba con las negritas de la
   lista de checks. En vez de perseguir cada regla, se redefinen las
   variables: cambia todo a la vez y lo que venga nuevo hereda bien. */
:root{
  --bg:#F5F4F2; --bg-2:#EDEBE5;
  --ink:#0F1F10; --muted:#5A625C; --muted-2:#8B928B;
  --line:rgba(15,31,16,.10); --line-2:rgba(15,31,16,.06); --card:rgba(15,31,16,.025);
  /* el acento del núcleo: sobre claro el lima puro no se lee como texto
     (1.6:1), así que baja a un verde profundo. El lima se reserva para
     rellenos: botón, chips y el canto de la tarjeta 04. */
  /* nucleo.css pinta con --nx decenas de detalles (puntos del proceso, la
     rayita del antetítulo, bordes...). Sobre claro pasan a tinta: el verde
     césped se ha ido de toda la página. En los bloques oscuros vuelve a
     valer lima, más abajo. */
  --nx:#0F1F10; --nx-soft:rgba(15,31,16,.08);
  --lime:#0F1F10;

  --c-bg:#F5F4F2;          /* base */
  --c-bg-2:#EDEBE5;        /* banda de apoyo */
  --c-ink:#0F1F10;         /* la tinta es el verde de marca, no negro */
  /* Un solo gris secundario en toda la web. El anterior (#57664F) tiraba a
     oliva y, en textos largos como la entradilla de Clientes, se leia como
     "otro color" al lado del titular. Este mantiene la misma luminosidad
     —y por tanto el mismo contraste, 5.5:1— pero sin el tinte verde. */
  --c-ink-2:#5A625C;
  --c-ink-3:#8B928B;
  /* El resalte del titular: gris azulado. Se probó el verde de marca y
     pesaba tanto como la tinta; a este tamaño el resalte tiene que ser un
     SEGUNDO TONO, no un segundo color. */
  --c-hi:#8792A0;
  --c-line:rgba(15,31,16,.10);
  --c-line-2:rgba(15,31,16,.06);
  --c-dark:#0F1F10;        /* el bloque de énfasis */
  --c-lime:#C7FF2E;
  --c-shadow:0 30px 60px -44px rgba(15,31,16,.45);
}

/* Islas oscuras. Dentro de ellas las variables vuelven a sus valores
   claros, así el texto se lee sin escribir una excepción por elemento. */
.nx-model, .nx-cta, .nx-card--grad, .nx-card--photo, body > nav, .pg-nav, .mj-footer,
.cl-card, .cl-feature, .post-cover{
  --ink:#F5F4F2; --muted:#A9B7A4; --muted-2:#8A9584;
  --line:rgba(255,255,255,.13); --line-2:rgba(255,255,255,.08);
  --nx:#C7FF2E; --lime:#C7FF2E;
}

/* ---------- base ----------
   Acotado a :not(.chatting): en la home, cuando arranca la conversación, la
   pantalla pasa a modo sala oscura y ese fondo lo pone el propio index. Sin
   el acotado, este !important lo pisaba y el chat se quedaba en claro. */
html:not(.chatting), html:not(.chatting) body{ background:var(--c-bg) !important; }
body{ color:var(--c-ink); }
body::before, body::after{ display:none !important; }   /* atmósfera verde fuera */
html::after{ display:none !important; }                  /* grano fuera */
body{ line-height:1.55; }

/* ---------- menú: pastilla oscura sobre página clara ---------- */
body > nav, .pg-nav{
  background-color:var(--c-dark) !important;
  box-shadow:0 18px 50px -34px rgba(15,31,16,.75) !important;
}
body > nav .logo, .pg-nav .logo{ color:#F5F4F2 !important; }
body > nav .nav-links a, .pg-nav .nav-links a{ color:#B9C4B3 !important; }
body > nav .nav-links a:hover, .pg-nav .nav-links a:hover{
  color:#fff !important; background:rgba(255,255,255,.08) !important; }
body > nav .btn-contacta, .pg-nav .btn-contacta{
  background:var(--c-lime) !important; color:#0b170c !important; border-color:var(--c-lime) !important; }
body > nav .nav-burger span, .pg-nav .nav-burger span{ background:#F5F4F2 !important; }
/* el panel de Servicios, en la misma tinta que la pastilla del menú */
body > nav .nav-drop-in, .pg-nav .nav-drop-in{
  background:var(--c-dark) !important; border-color:rgba(255,255,255,.10) !important;
  box-shadow:0 22px 50px -26px rgba(0,0,0,.7) !important;
}
@media(max-width:860px){
  body > nav .nav-links, .pg-nav .nav-links{ background:var(--c-dark) !important; border-color:rgba(255,255,255,.10) !important; }
  /* dentro del desplegable de la hamburguesa el panel no es una isla aparte:
     solo la línea de la sangría, que sobre negro va en blanco */
  body > nav .nav-drop-in, .pg-nav .nav-drop-in{
    background:transparent !important; box-shadow:none !important;
    border-left-color:rgba(255,255,255,.14) !important;
  }
}

/* ==========================================================================
   TIPOGRAFÍA — saltos grandes. Es lo que ordena la mirada.
   ========================================================================== */
/* El titular se dimensiona para caber en DOS lineas usando la columna
   entera. A 92px el de Automatizar —el mas largo de los cuatro— se iba a
   tres y el bloque perdia el encaje con el resto del hero. */
.nx-hero h1{ font-size:clamp(42px,5.6vw,78px) !important; line-height:1.0; letter-spacing:-.042em;
  color:var(--c-ink); max-width:none !important; }
/* El resalte del titular vuelve al tono suave: en un titular de 92px un
   verde saturado pesa tanto como el negro y compiten los dos. Segundo tono,
   no segundo color. El verde profundo se queda donde el texto es pequeno. */
.nx-hero h1 .lime{ color:var(--c-hi) !important; }
/* Solo CABECERA de sección. Nada de ".pg-hero + section h2": eso alcanzaba
   también a los títulos de las tarjetas del blog y los sacaba a 60px. */
.nx-head h2, .cs-sec > h2, .sec-head h2{ font-size:clamp(34px,4.6vw,60px) !important;
  letter-spacing:-.038em; color:var(--c-ink); }
h2{ color:var(--c-ink); }
/* Los titulares dentro de una tarjeta NO son cabecera de sección: sin esto
   el listado del blog salía con títulos de 60px dentro de cada tarjeta. */
.post-card h2, .post-card h3{ font-size:22px !important; line-height:1.2; letter-spacing:-.02em;
  color:var(--c-ink) !important; }
.post-card .excerpt{ font-size:15.5px !important; }
.post-card .meta{ font-size:13px !important; color:var(--c-ink-3) !important; }
.card h3, .crosslinks .t, .cl-card h3, .nx-cross h3{ font-size:20px !important; }
.nx-head h2 .lime, h2 .lime{ color:var(--c-hi) !important; }

/* ---------- EL RESALTE DE TITULAR, UNO SOLO EN TODA LA WEB ----------
   Sobre fondo CLARO: banda lima por debajo de la palabra (el mismo recurso de
   .cr-mark en cr.css). Sobre fondo OSCURO: lima en el propio texto, porque ahí
   la banda no se ve; eso lo sigue haciendo .lime.

   Vivía suelta en el <style> de index.html y por eso fuera de la home no
   existía: /clientes, los casos y el blog seguían cayendo en la regla de arriba
   —"h2 .lime{color:var(--c-hi)}"— que los pintaba de gris azulado. Tres manos
   distintas en la misma web: banda en unas páginas, gris en otras, lima en
   otras. Ahora la clase vive aquí, que es la hoja que cargan las 26 páginas.

   Es .mark y NO .lime a propósito: la regla de arriba lleva !important y
   alcanza a cualquier .lime dentro de un h2, así que una clase nueva es la
   forma limpia de quedar fuera de su alcance sin tocarla ni empezar una
   guerra de !important. */
.mark{ color:#0f1f10; padding:0 .06em;
  background:linear-gradient(180deg,transparent 72%,rgba(199,255,46,.6) 72%,rgba(199,255,46,.6) 93%,transparent 93%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.nx-lead{ font-size:clamp(18px,1.9vw,21px) !important; color:var(--c-ink-2) !important; max-width:56ch; }
.nx-head p, p{ color:var(--c-ink-2); }
strong, b{ color:var(--c-ink); }

/* el sitio donde estás: pequeño de verdad */
.nx-kicker{ font-size:13px !important; color:var(--c-ink-3) !important; }
.nx-kicker b{ color:var(--c-ink-2) !important; font-weight:600; }
.nx-head .nx-eyebrow{ font-size:13px !important; color:var(--c-ink-3) !important; }
.nx-head .nx-eyebrow::before{ background:var(--c-ink-3) !important; opacity:.5; }

/* ---------- hero: aire ---------- */
.nx-hero{ padding:clamp(150px,19vh,210px) 0 0 !important; }
.nx-hero::before, .nx-hero::after{ display:none !important; }
.nx-hero-in{ padding-bottom:clamp(80px,10vh,120px); }
.nx-hero-cta{ margin-top:44px !important; gap:14px; }

/* ---------- botones: el principal, grande ---------- */
.nx-btn--solid{ background:var(--c-lime) !important; color:#0b170c !important;
  font-size:17px !important; padding:18px 32px !important; }
.nx-btn--ghost{ border:1px solid var(--c-line) !important; color:var(--c-ink) !important;
  background:transparent !important; font-size:17px !important; padding:18px 30px !important; }
.nx-btn--ghost:hover{ border-color:var(--c-ink) !important; color:var(--c-ink) !important; }

/* ==========================================================================
   BLOQUES
   ========================================================================== */
/* diagnóstico */
.nx-frame{ border:1px solid var(--c-line-2) !important; box-shadow:var(--c-shadow) !important; background:#0b170c; }
.nx-split-media::before{ display:none !important; }
.nx-checks li{ color:var(--c-ink-2) !important; }
.nx-checks li strong{ color:var(--c-ink) !important; }
.nx-checks .ck{ background:var(--c-lime) !important; border:none !important; }
.nx-checks .ck svg{ stroke:#0b170c !important; }
.nx-float{ background:rgba(255,255,255,.9) !important; border-color:var(--c-line) !important;
  color:var(--c-ink) !important; }

/* --- las palancas: tarjetas blancas, un golpe oscuro y un canto lima --- */
.nx-card{ background:#FFFFFF !important; border:1px solid var(--c-line-2) !important;
  box-shadow:0 24px 50px -40px rgba(15,31,16,.5) !important; }
.nx-card:hover{ box-shadow:0 40px 70px -44px rgba(15,31,16,.6) !important; }
.nx-big{ color:var(--c-ink) !important; font-size:clamp(44px,4.6vw,58px) !important; }
.nx-card h3{ color:var(--c-ink) !important; font-size:24px !important; }
.nx-card p{ color:var(--c-ink-2) !important; font-size:16px !important; }

/* 01 · la que manda ahora es OSCURA, no lima: sobre página clara el golpe
   es el contraste, y el lima se guarda para el botón */
.nx-card--grad{ background:var(--c-dark) !important; border:none !important; }
.nx-card--grad .nx-big, .nx-card--grad h3{ color:#F5F4F2 !important; }
.nx-card--grad p{ color:#A9B7A4 !important; }

/* 02 · foto: se queda, es una de las dos imágenes que sobreviven */
.nx-card--photo{ background:#0b170c !important; border:none !important; }
.nx-card--photo .nx-big, .nx-card--photo h3{ color:#fff !important; }
.nx-card--photo p{ color:rgba(255,255,255,.8) !important; }

/* 03 · plano blanco: fuera la trama y el foco, aquí sobran */
.nx-card--ico{ background:#FFFFFF !important; }
.nx-card--ico:hover{ background:#FFFFFF !important; }
.nx-card--ico::after{ display:none !important; }
.nx-card--ico::before{ display:none !important; }
.nx-ico{ background:var(--c-dark) !important; color:var(--c-lime) !important; box-shadow:none !important; }

/* 04 · el único canto lima de la página */
.nx-card--edge::after{ background:var(--c-lime) !important; }

/* --- proceso --- */
.nx-proc::before, .nx-proc::after{ background:var(--c-line) !important; }
.nx-step .s{ color:var(--c-ink-3) !important; }
.nx-step h4{ color:var(--c-ink) !important; }
.nx-step p{ color:var(--c-ink-2) !important; }
/* La linea y los puntos NO pueden ir en tinta: sobre claro se leen como
   negro y el bloque queda apagado. La linea que se dibuja con el scroll va
   en verde de marca y los puntos alcanzados se encienden en lima con su
   halo — que es exactamente lo que marca el avance. */
/* Minimalista: linea de un pixel y puntos pequenos. Ni lima ni halos — con
   ellos el hilo se convertia en un adorno que pesaba mas que los cuatro
   pasos que tiene que ordenar. */
/* OJO: el hilo es HORIZONTAL en escritorio y VERTICAL por debajo de 900px.
   Los ajustes de grosor y posicion tienen que ir dentro de su media query;
   sueltos, aplastaban la linea vertical a 1px de alto y los puntos se
   quedaban huerfanos en movil. */
.nx-proc::before{ background:rgba(15,31,16,.14) !important; }
.nx-proc::after{ background:rgba(15,31,16,.45) !important; box-shadow:none !important; }
.nx-step::before{
  background:var(--c-bg) !important; border:1.5px solid rgba(15,31,16,.28) !important;
  box-shadow:none !important; }
@media(min-width:901px){
  .nx-proc::before, .nx-proc::after{ height:1px !important; top:6px !important; }
  .nx-step::before{ width:11px !important; height:11px !important; top:-38px !important; }
}
@media(max-width:900px){
  .nx-proc::before, .nx-proc::after{ width:1px !important; left:15px !important; }
  .nx-step::before{ width:11px !important; height:11px !important;
    left:-33px !important; top:6px !important; }
}
.nx-step.in::before{
  background:var(--c-ink) !important; border-color:var(--c-ink) !important;
  box-shadow:none !important; }
.nx-step .s{ color:var(--c-ink-3) !important; }

/* --- entregables: panel claro sobre la base, definido por sombra --- */
.nx-panel{ background:#FFFFFF !important; border:1px solid var(--c-line-2) !important;
  box-shadow:var(--c-shadow) !important; }
.nx-panel::before{ display:none !important; }
.nx-panel .nx-sq{ border-color:var(--c-line) !important; }

/* --- EL MODELO: primer golpe oscuro de la página --- */
.nx-model{ background:var(--c-dark) !important; border:none !important;
  box-shadow:0 50px 100px -60px rgba(15,31,16,.8) !important; }
.nx-model::after{ display:none !important; }
.nx-model .nx-head .nx-eyebrow{ color:#8A9584 !important; }
.nx-model .nx-head .nx-eyebrow::before{ background:#8A9584 !important; }
.nx-model .nx-head h2{ color:#7E8C79 !important; }
/* aquí sí manda el lima: es el mensaje de la casa sobre el bloque oscuro */
.nx-model .nx-head h2 .lime{ color:var(--c-lime) !important; background:none !important; }
.nx-model .nx-head p{ color:#A9B7A4 !important; }
.nx-model-grid{ border-top-color:rgba(255,255,255,.12) !important; }
.nx-model-grid .k{ color:#8A9584 !important; }
.nx-model-grid h4{ color:#F5F4F2 !important; }
.nx-model-grid p{ color:#A9B7A4 !important; }

/* --- caso real --- */
.nx-case{ background:#FFFFFF !important; border:1px solid var(--c-line-2) !important; }
.nx-case:hover{ border-color:var(--c-line) !important; }
.nx-case .q{ color:var(--c-ink) !important; }
.nx-case .go{ color:var(--c-ink-2) !important; }
.nx-case img{ filter:invert(1) brightness(.2); }

/* --- FAQ --- */
.faq{ border-top-color:var(--c-line-2) !important; }
.faq details{ border-bottom-color:var(--c-line-2) !important; }
.faq summary{ color:var(--c-ink) !important; font-size:19px !important; }
.nx-page .faq summary::after{ color:var(--c-ink-3) !important; }
.faq details p{ color:var(--c-ink-2) !important; }

/* --- otros núcleos --- */
.nx-cross a{ background:#FFFFFF !important; border:1px solid var(--c-line-2) !important; }
.nx-cross a:hover{ border-color:var(--c-ink) !important; }
.nx-cross .k{ color:var(--c-ink-3) !important; }
.nx-cross h4, .nx-cross h3{ color:var(--c-ink) !important; }
.nx-cross p{ color:var(--c-ink-2) !important; }

/* --- CIERRE: segundo y último golpe oscuro --- */
.nx-cta{ background:var(--c-dark) !important; border:none !important;
  box-shadow:0 50px 100px -60px rgba(15,31,16,.8) !important; }
.nx-cta h2{ color:#F5F4F2 !important; }
.nx-cta h2 .lime{ color:var(--c-lime) !important; }
.nx-cta p{ color:#A9B7A4 !important; }
.nx-cta .nx-btn--ghost{ border-color:rgba(255,255,255,.25) !important; color:#F5F4F2 !important; }
.nx-cta .nx-btn--ghost:hover{ border-color:#fff !important; }

/* --- miga de pan --- */
.crumbs{ color:var(--c-ink-3) !important; }
.crumbs a:hover{ color:var(--c-ink) !important; }
/* Las barras separadoras se quedaban en --muted-2 (pages.css, tema oscuro):
   2,9:1 sobre el fondo claro. Heredan del rastro, que sí pasa AA. */
.crumbs span{ color:inherit !important; }

/* ---------- ritmo general: más aire entre bloques ---------- */
.nx-page section{ padding:clamp(64px,8vh,104px) 0 !important; }


/* ==========================================================================
   PÁGINAS DE CONTENIDO — portada genérica, blog, artículos
   ========================================================================== */
/* sin limite en ch: el corte lo marca el <br> del titular, no el ancho */
/* La portada arrancaba a 72px del borde y el antetitulo quedaba pegado al
   menu, que flota a 14px y mide 62. Mismo aire de arranque que las paginas
   de nucleo. */
.pg-hero{ padding-top:clamp(130px,15vh,170px) !important; }
/* Ese padding existe para librar el menú fijo cuando el hero es lo PRIMERO de
   la página. En el blog y en las legales no lo es: va antes la miga de pan,
   que ya trae sus 96px de separación (pages.css). Sumaban las dos y la miga se
   quedaba flotando sola, a 160px de su propio título, como si se hubiera
   descolgado del texto. El selector adyacente acota el arreglo a ese caso y no
   toca las páginas donde el hero sí abre.
   Lleva !important porque la regla de arriba también lo lleva; la clase de más
   basta para ganarle, y así vale igual dentro del @media de móvil. */
.crumbs + .pg-hero{ padding-top:28px !important; }
.pg-hero .eyebrow{ margin-bottom:22px !important; }
.pg-hero h1{ font-size:clamp(40px,6vw,78px) !important; letter-spacing:-.04em; color:var(--c-ink);
  max-width:none !important; }
.pg-hero h1 .lime{ color:var(--c-hi) !important; }
.pg-hero .lead{ font-size:clamp(18px,1.9vw,21px) !important; color:var(--c-ink-2) !important; max-width:52ch; }
.pg-hero .eyebrow, .eyebrow{ font-family:var(--disp) !important; font-size:13px !important;
  letter-spacing:-.005em !important; text-transform:none !important; color:var(--c-ink-3) !important; }
.eyebrow::before{ background:var(--c-ink-3) !important; opacity:.5; }
.sec-lead{ color:var(--c-ink-2) !important; }

/* tarjetas genéricas */
.card{ background:#FFFFFF !important; border:1px solid var(--c-line-2) !important;
  box-shadow:0 24px 50px -40px rgba(15,31,16,.5) !important; }
.card h3{ color:var(--c-ink) !important; }
.card p{ color:var(--c-ink-2) !important; }
.btn-lime{ background:var(--c-lime) !important; color:#0b170c !important; }
.cat{ border-color:var(--c-line) !important; color:var(--c-ink-2) !important; }
.cat:hover{ color:var(--c-ink) !important; border-color:var(--c-ink) !important; background:transparent !important; }
.cat.active{ background:var(--c-ink) !important; color:#F5F4F2 !important; border-color:var(--c-ink) !important; }
.tags span, .tags a{ border-color:var(--c-line) !important; color:var(--c-ink-2) !important; }

/* --- listado del blog, al modo Sierra ---
   No hay tarjeta blanca: la portada es un rectángulo redondeado flotando
   sobre la página y el texto va debajo, directo sobre el fondo. Así se
   acaba también el problema de las esquinas: no hay dos radios peleando,
   solo uno. */
.post-card, .mb-card{
  background:transparent !important; border:none !important; box-shadow:none !important;
  border-radius:0 !important; overflow:visible !important; padding:0 !important; }
.post-card:hover, .mb-card:hover{ background:transparent !important; box-shadow:none !important; }
.post-body{ padding:18px 2px 0 !important; }
.post-card h3, .post-card .t{ color:var(--c-ink) !important; }
.post-card p, .post-card time, .post-card .meta{ color:var(--c-ink-2) !important; }
/* las portadas siguen siendo el único punto de color fuerte del listado */
/* El rótulo va SIEMPRE en blanco. El velo que lo hace legible va en ::before
   —que ya existía para eso— y NO en ::after: ese pseudo es el grano de la
   portada, y pisarlo dejaba las del blog sin textura mientras las de la home
   sí la tenían. Justo la diferencia que se veía entre las dos páginas. */
.post-cover::before, .mb-cover::before{
  background:radial-gradient(120% 95% at 50% 118%, rgba(0,0,0,.42), transparent 62%),
             linear-gradient(180deg, rgba(8,16,9,.16), rgba(8,16,9,.30)) !important; }
.post-cover .cov-label, .mb-cover .cov-label{ color:#FFFFFF !important; }

/* Las tarjetas del blog se igualan a las de la home, que son las buenas:
   mismo rótulo, mismo alto de portada y mismos tamaños de texto. En la
   página de blog el rótulo iba a 34px y el conjunto se veía tosco. */
.post-cover .cov-label{ font-size:clamp(18px,1.7vw,24px) !important; padding:0 14px !important; }
.post-cover{ border-radius:16px !important; }
.post-body{ padding:14px 2px 0 !important; }
.post-body h2{ font-size:17px !important; margin-top:0 !important; letter-spacing:-.01em !important;
  line-height:1.2 !important; }
.post-body .excerpt{ font-size:14.5px !important; margin-top:8px !important; }
.post-body .meta{ font-size:11px !important; margin-top:10px !important; }

/* artículo */
.article, .post-body{ color:var(--c-ink-2) !important; }
.article h2, .article h3, .post-body h2, .post-body h3{ color:var(--c-ink) !important; }
/* en el cuerpo del artículo el enlace sí necesita distinguirse: tinta con
   subrayado, sin recurrir a un color nuevo */
.article a, .post-body a{ color:var(--c-ink) !important;
  text-decoration:underline !important; text-underline-offset:3px;
  text-decoration-color:rgba(15,31,16,.35) !important; }
.article blockquote, .post-body blockquote{ border-left-color:var(--c-lime) !important; color:var(--c-ink) !important; }
.art-cover{ box-shadow:var(--c-shadow) !important; }
.crosslinks a{ background:#FFFFFF !important; border:1px solid var(--c-line-2) !important; }
.crosslinks .t{ color:var(--c-ink) !important; }
.cta{ background:#FFFFFF !important; border:1px solid var(--c-line-2) !important; box-shadow:var(--c-shadow) !important; }

/* legales */
.legal-box{ background:#FFFFFF !important; border:1px solid var(--c-line-2) !important; }
.legal-box p{ color:var(--c-ink) !important; }
.legal-upd{ color:var(--c-ink-3) !important; }

/* ==========================================================================
   CLIENTES Y CASOS
   ========================================================================== */
.cl-hero h1{ font-size:clamp(40px,6vw,78px) !important; letter-spacing:-.04em;
  max-width:none !important; }
.cl-hero h1 .lime{ color:var(--c-hi) !important; }
.cl-logos{ border-color:var(--c-line-2) !important; }
/* Los logos van en la tinta de la casa, la misma de las tarjetas oscuras.
   El selector real es .cl-logos-track img (no .cl-logos img) y traia
   grayscale + brightness 1.7, que es lo que los dejaba lavados. */
.cl-logos-track img{ filter:brightness(0) !important; opacity:.88 !important; }
.cl-logos-track img:hover{ filter:none !important; opacity:1 !important; }
/* la entradilla usa .cl-lead, no .lead: heredaba el verde claro del tema oscuro */
.cl-hero .cl-lead{ color:var(--c-ink-2) !important; }
.cl-brand{ color:var(--c-ink-2) !important; }
/* El filtro activo usa .is-on (no .active ni .on) y con el lima redefinido
   salia como un chip verde chillon. Va en tinta, como el del blog. */
.cl-filter button{ border-color:var(--c-line) !important; color:var(--c-ink-2) !important;
  background:transparent !important; }
.cl-filter button:hover{ color:var(--c-ink) !important; border-color:var(--c-ink) !important; }
.cl-filter button.is-on{ background:var(--c-ink) !important; color:#F5F4F2 !important;
  border-color:var(--c-ink) !important; }

/* TEXTO SOBRE FOTO. La tarjeta de cliente ES una foto: aqui el texto va en
   blanco SIEMPRE. Estaba heredando la tinta oscura de la pagina clara y se
   perdia contra la imagen. */
.cl-card .cl-t{ color:#FFFFFF !important; }
.cl-card:hover .cl-t{ color:var(--c-lime) !important; }
.cl-card .cl-sector{ color:rgba(255,255,255,.62) !important; }
.cl-card .cl-brand{ color:#FFFFFF !important; }
.cl-live{ color:#FFFFFF !important; }
.cl-feature .cl-t, .cl-feature h2, .cl-feature h3{ color:#FFFFFF !important; }
.cl-feature p{ color:rgba(255,255,255,.82) !important; }
.cl-kpi .m{ color:var(--c-lime) !important; }
.cl-kpi .l{ color:rgba(255,255,255,.6) !important; }
.cl-feature .cl-go{ color:var(--c-lime) !important; }
/* la tarjeta de cliente ES la foto: se queda oscura, solo gana sombra */
.cl-card, .cl-feature{ box-shadow:var(--c-shadow) !important; }

/* caso: la portada es oscura, el cuerpo va claro */
.cs-hero h1 .lime, .cs-hero h1 .dim{ color:var(--c-hi) !important; }

/* ---------- LEGIBILIDAD DE LAS FICHAS DE CASO ----------
   clientes.css está escrito para el tema OSCURO: pone el lima de marca en los
   numerales de sección y en las cifras, y --muted-2 en todas las etiquetas
   mono. Sobre el verde bosque eso funciona. Sobre el hueso de la base clara,
   NO: medido en el navegador, el lima #C7FF2E sobre #F5F4F2 da un contraste de
   1,08:1 —es literalmente invisible, que es lo que Alex ve como "textos lima
   que no se leen"— y el gris de las etiquetas se queda en 2,9:1 cuando el
   mínimo AA para 11px es 4,5:1.

   Nunca se sobreescribieron aquí, así que el fallo estaba en las CUATRO fichas
   de caso, no solo en la de JM Padel.

   El lima pasa al verde profundo #4a6a2a, que no es un color nuevo: es el que
   ya usa cr.css para las cifras sobre claro, con el criterio de que el color va
   donde está el valor. Da 5,63:1. Las etiquetas pasan a #5A625C, que es el gris
   que ya usa la home en los subtítulos. Da 5,69:1. Los dos pasan AA sin sacar
   ningún color de fuera del sistema. */
.cs-sec .n, .cs-kpis .m{ color:#4a6a2a !important; }
.cs-kpis .l, .cs-meta dt, .cs-bit .k, .cs-bits .k,
.cs-shot figcaption, .cs-mock figcaption, .cs-gal figcaption, .cs-duo figcaption, .art-fig figcaption,
.cs-toc a, .cs-page .nx-eyebrow{ color:#5A625C !important; }
.cs-meta, .cs-bit span{ color:var(--c-ink-3) !important; }
.cs-bit b, .cs-bits b{ color:var(--c-ink) !important; }
.cs-sec h2{ color:var(--c-ink) !important; }
.cs-sec p{ color:var(--c-ink-2) !important; }
.cs-quote{ background:#FFFFFF !important; border:1px solid var(--c-line-2) !important; color:var(--c-ink) !important; }
.cs-shot, .cs-mock, .cs-screens img, .cs-gal img, .cs-strip img{ box-shadow:var(--c-shadow) !important; }
.cs-toc a{ color:var(--c-ink-2) !important; border-color:var(--c-line) !important; }
.cs-toc a:hover{ color:var(--c-ink) !important; border-color:var(--c-ink) !important; }
.cs-todo{ background:#FFFFFF !important; border:1px solid var(--c-line-2) !important; }
.ne-paper{ background:#FFFFFF !important; }

/* ==========================================================================
   PIE — se queda oscuro a propósito: es el bloque de cierre del sitio
   ========================================================================== */
.mj-footer{ margin-top:0; }

/* portada de caso: va en claro como el resto de la página */
.cs-hero .lead, .cs-hero p{ color:var(--c-ink-2) !important; }
.cs-meta span, .cs-meta b{ color:var(--c-ink-2) !important; }
.cs-toc{ border-color:var(--c-line-2) !important; }

/* ==========================================================================
   HOME
   --------------------------------------------------------------------------
   La home pasa a la misma base clara. Una decisión de diseño, no una
   limitación: el MODO CHAT (html.chatting) se queda en oscuro. Cuando el
   visitante empieza a hablar, la pantalla se convierte en una sala oscura
   y enfocada. Sobre un sitio claro, ese corte es un golpe de efecto — y de
   paso no se toca ni una línea de la maquinaria del chat, que es lo más
   delicado de la página.
   ========================================================================== */
html:not(.chatting), html:not(.chatting) body{ background:var(--c-bg) !important; }

/* el fondo fotográfico de bosque no pinta nada en una página clara */
html:not(.chatting) #siteBg{ display:none !important; }

/* --- intro --- */
html:not(.chatting) #mintro{
  --ink:#0F1F10; --muted:#57664F; --muted-2:#8A9584;
  --line:rgba(15,31,16,.10); --line-2:rgba(15,31,16,.06); --card:rgba(15,31,16,.025);
  color:var(--c-ink) !important;
}
html:not(.chatting) #mintro::before{ display:none !important; }   /* rejilla */
html:not(.chatting) #mintro .mi-orb{ display:none !important; }   /* halos difusos */
html:not(.chatting) #mintro h1, html:not(.chatting) #mintro h2,
/* Las sombras de texto existían para despegar la tipografía del fondo
   fotográfico de bosque, que ya no está. Sobre claro solo ensucian. Se
   quitan en bloque en vez de ir selector por selector — asi no se escapa
   ninguna, como pasó con la entradilla del showcase. */
html:not(.chatting) #mintro *, html:not(.chatting) #mshowcase *,
html:not(.chatting) #mblog *, html:not(.chatting) #hero *{ text-shadow:none !important; }
/* excepción: los rótulos que van ENCIMA de una imagen sí lo necesitan */
html:not(.chatting) #mblog .mb-cover .cov-label{ text-shadow:0 1px 14px rgba(8,16,9,.45) !important; }
html:not(.chatting) #mintro .mi-hero h1{ font-size:clamp(42px,5.4vw,76px) !important; letter-spacing:-.042em; }
/* Excepción pedida por Alex: aquí el resalte va en lima, no en el gris. */
html:not(.chatting) #mintro .mi-hero h1 .lime{ color:var(--c-lime) !important; }
html:not(.chatting) #mintro .eyebrow{ color:var(--c-ink-3) !important; }
html:not(.chatting) #mintro .eyebrow::before{ background:var(--c-ink-3) !important; opacity:.5; }
html:not(.chatting) #mintro .mi-lead strong{ color:var(--c-ink) !important; }
html:not(.chatting) #mintro .mi-enter{ background:var(--c-lime) !important; color:#0b170c !important; }
html:not(.chatting) #mintro .mi-ghost{ border:1px solid var(--c-line) !important; color:var(--c-ink) !important;
  background:transparent !important; }
html:not(.chatting) #mintro .mi-ghost:hover{ border-color:var(--c-ink) !important; }
html:not(.chatting) #mintro .scroll-cue{ color:var(--c-ink-3) !important; }

/* Esto ya no es una tarjeta: es la CABECERA de la galería de núcleos que
   viene justo debajo. Iba en verde oscuro y se llevaba una presencia que no
   le corresponde, ademas de repetir los nombres de los cuatro núcleos que
   estan en las tarjetas de abajo. Ahora es texto sobre la propia página. */
html:not(.chatting) #mintro .nintro{
  background:transparent !important; border:none !important; box-shadow:none !important;
  padding:0 !important; display:block !important; text-align:center;
  max-width:720px; margin:0 auto; }
html:not(.chatting) #mintro .nintro .ncopy{ min-width:0; }
html:not(.chatting) #mintro .nintro .ncopy h2{ color:var(--c-ink) !important;
  font-size:clamp(30px,4vw,50px) !important; letter-spacing:-.038em; }
html:not(.chatting) #mintro .nintro .ncopy p{ color:var(--c-ink-2) !important;
  margin-left:auto; margin-right:auto; }

/* --- galería de núcleos: la banda deja de ser un panel, es ya la página --- */
/* Esta regla dejaba la sección sin forma. La forma se le da más abajo, en
   el bloque del solape sobre el hero; aquí solo se anula lo que traía de
   cuando era una banda crema. */
html:not(.chatting) #mi-nucleos{ box-shadow:none; }
html:not(.chatting) #mi-nucleos .ngal a{
  background:#FFFFFF !important; border:1px solid var(--c-line-2) !important;
  box-shadow:0 24px 50px -40px rgba(15,31,16,.5) !important; }
html:not(.chatting) #mi-nucleos .ngal a:hover{ box-shadow:0 40px 70px -44px rgba(15,31,16,.6) !important; }
html:not(.chatting) #mi-nucleos .ngal h3{ color:var(--c-ink) !important; }
html:not(.chatting) #mi-nucleos .ngal h3 .lime{ background:none !important; color:var(--c-hi) !important; }
html:not(.chatting) #mi-nucleos .ngal .gk{ color:var(--c-ink-3) !important; }
html:not(.chatting) #mi-nucleos .ngal p{ color:var(--c-ink-2) !important; }
/* Las etiquetas de cada tarjeta son de lo poco que dice QUÉ se hace en
   concreto, y se leían como letra pequeña decorativa. Suben de tamaño, de
   peso y de contraste. */
html:not(.chatting) #mi-nucleos .ngal .gtags span{
  font-family:"Geist",system-ui,sans-serif !important; font-size:12.5px !important;
  font-weight:500 !important; letter-spacing:0 !important; text-transform:none !important;
  color:var(--c-ink) !important; border:1px solid transparent !important;
  background:rgba(15,31,16,.06) !important; padding:7px 13px !important; border-radius:999px !important; }
html:not(.chatting) #mi-nucleos .ngal a:hover .gtags span{ background:rgba(15,31,16,.10) !important; }
html:not(.chatting) #mi-nucleos .ngal .gcta{ color:var(--c-ink) !important; }

/* --- chat embebido (aún no es conversación): también en claro --- */
html:not(.chatting) #hero::before{ display:none !important; }
html:not(.chatting) #hero .chat-welcome h2{ color:var(--c-ink) !important; }
html:not(.chatting) #hero .chat-welcome h2 .hl{ color:var(--c-hi) !important; }
html:not(.chatting) #hero .chat-welcome p{ color:var(--c-ink-2) !important; }
html:not(.chatting) #hero .chat-dock{ background:#FFFFFF !important; border:1px solid var(--c-line-2) !important;
  border-radius:32px; padding:34px 34px 30px; box-shadow:0 40px 80px -60px rgba(15,31,16,.6) !important; }
html:not(.chatting) #hero .pills .pill{ background:#F7F7F5 !important; border:1px solid var(--c-line) !important;
  color:var(--c-ink) !important; }
html:not(.chatting) #hero .pills .pill:hover{ background:#EFF6E4 !important; border-color:var(--c-ink) !important; }
html:not(.chatting) #hero .pill-ic{ background:var(--c-lime) !important; color:#0b170c !important; }
html:not(.chatting) #hero .pill-tx b{ color:var(--c-ink) !important; }
html:not(.chatting) #hero .pill-tx span{ color:var(--c-ink-2) !important; }
html:not(.chatting) #hero .pills .pill:hover .pill-tx span{ color:var(--c-ink-2) !important; }
html:not(.chatting) #hero .presence .who b{ color:var(--c-ink) !important; }
html:not(.chatting) #hero .presence .who span,
html:not(.chatting) #hero .presence .status{ color:var(--c-ink-3) !important; }
html:not(.chatting) #hero form.composer{ background:#F7F7F5 !important; border:1px solid var(--c-line) !important; }
html:not(.chatting) #hero form.composer input{ color:var(--c-ink) !important; }
html:not(.chatting) #hero form.composer input::placeholder{ color:var(--c-ink-3) !important; }
/* la nota queda ahora DENTRO de la tarjeta oscura: va en su gris, no en el
   de la pagina clara */
html:not(.chatting) #hero .note{ color:#8EA08A !important; margin-top:20px !important; }
html:not(.chatting) #hero .note b{ color:#C9D8BF !important; }
html:not(.chatting) #hero .note b{ color:var(--c-ink-2) !important; }

/* --- showcase y blog --- */
/* mismo criterio que en el resto: fuera versalitas y tracking de terminal */
html:not(.chatting) #mshowcase .msh-eyebrow{ color:var(--c-ink-3) !important;
  font-family:"Geist",system-ui,sans-serif !important; font-size:13px !important;
  font-weight:500 !important; letter-spacing:-.005em !important; text-transform:none !important; }
html:not(.chatting) #mshowcase .msh-eyebrow::before{ background:var(--c-ink-3) !important; opacity:.5; }
html:not(.chatting) #mshowcase .msh-head h2{ color:var(--c-ink) !important; }
html:not(.chatting) #mshowcase .msh-head h2 .lime{ color:var(--c-hi) !important; }
html:not(.chatting) #mshowcase .msh-head p{ color:var(--c-ink-2) !important; }
html:not(.chatting) #mblog h2{ color:var(--c-ink) !important; }
html:not(.chatting) #mblog h2 .lime{ color:var(--c-hi) !important; }
html:not(.chatting) #mblog .mb-title{ color:var(--c-ink) !important; }
html:not(.chatting) #mblog .mb-card:hover .mb-title{ color:var(--c-ink) !important; }
html:not(.chatting) #mblog .mb-date{ color:var(--c-ink-3) !important; }
html:not(.chatting) #mblog .mb-all{ color:var(--c-ink) !important; border-color:var(--c-line) !important; }
html:not(.chatting) #mblog .mb-all:hover{ background:var(--c-ink) !important; color:#F5F4F2 !important;
  border-color:var(--c-ink) !important; }

/* La ilustración del hero es el elemento menos premium de la página: dice
   "agencia genérica" y compite con el titular. Fuera. El trabajo real ya se
   enseña en el showcase y en los casos. */
html:not(.chatting) #mintro .mi-hero-visual{ display:none !important; }

/* En modo conversación la pantalla es oscura: la tipografía genérica de esta
   hoja (tinta verde bosque) dejaría el titular y las negritas en oscuro
   sobre oscuro. Se devuelven a claro dentro de .chatting. */
html.chatting h1, html.chatting h2, html.chatting h3,
html.chatting strong, html.chatting b{ color:#f5f4f2; }
html.chatting .msg.user, html.chatting .msg.user strong, html.chatting .msg.user b{ color:#0b170c; }
/* La chapa "Alex · en linea" es lima: el <b> del nombre se estaba pintando
   en blanco por la regla de arriba y desaparecia. */
html.chatting .chat-badge, html.chatting .chat-badge b{ color:#0b170c !important; }
html.chatting .ck-bar p{ color:#c9d2c4; }
html.chatting .ck-bar p b{ color:#f5f4f2; }

/* la portada es la única pieza con forma */
.post-cover, .mb-cover{ border-radius:18px !important; overflow:hidden !important; }
.post-card h2, .post-card h3{ font-weight:600 !important; }
.post-card .excerpt, .post-card p{ margin-top:8px !important; }
.post-card .meta{ margin-top:10px !important; letter-spacing:.02em !important; }

/* Las fotos de los núcleos son ahora claras: el número en contorno blanco
   desaparecía sobre ellas. Pasa a contorno oscuro. */
html:not(.chatting) #mi-nucleos .ngal .gn{ -webkit-text-stroke-color:rgba(15,31,16,.30) !important; }
html:not(.chatting) #mi-nucleos .ngal a:hover .gn{ -webkit-text-stroke-color:rgba(62,143,22,.55) !important; }
html:not(.chatting) #mi-nucleos .gmedia{ background:#F2F1EA !important; }
html:not(.chatting) #mi-nucleos .gmedia::after{ display:none !important; }

/* Sobre la foto del caso destacado el resalte va en LIMA: es un bloque
   oscuro y ahí el lima sí se lee. */
.cl-feature h2 .lime, .cl-feature h3 .lime{ color:var(--c-lime) !important; }


/* ==========================================================================
   HOME · EL HERO VUELVE A SER OSCURO
   --------------------------------------------------------------------------
   La primera pantalla es un bloque verde bosque a sangre: eyebrow, titular
   en blanco con el resalte en lima, una frase y UN botón. Nada más — de ahí
   se baja. "Núcleos conectados" se ha movido a la sección siguiente, que es
   donde tiene sentido: encabeza las cuatro tarjetas que lo explican.

   Y el menú juega con el fondo: arriba, sobre el verde, va claro; en cuanto
   se pasa el hero, se vuelve verde sobre la página clara. La clase la pone
   un observador en index.html.
   ========================================================================== */
/* AQUI estaba la esquina recta. La seccion pintaba ADEMAS su propio fondo
   verde, un rectangulo sin radio, justo encima de la capa redondeada. Por
   eso el contorno de la capa dibujaba la curva pero el relleno seguia
   cuadrado. El verde lo pone solo el ::before. */
html:not(.chatting) #mi-intro{
  position:relative; isolation:isolate;
  background:transparent;
  /* El verde llena la primera pantalla entera: asi no asoma por abajo el
     titular de la seccion siguiente, que es lo que rompia la entrada. */
  /* No llega al borde de la pantalla: cierra sobre el 86% del alto, que es
     donde Alex marco la linea. Queda aire por debajo sin que asome nada de
     la seccion siguiente. */
  min-height:86vh; min-height:86svh;
  display:flex; align-items:center;
  padding:clamp(120px,16vh,170px) 0 clamp(120px,16vh,170px) !important;
  margin-bottom:0;
}
html:not(.chatting) #mi-intro > .mi-wrap{ width:100%; }
/* a sangre: el bloque se sale del ancho del contenedor por los dos lados */
html:not(.chatting) #mi-intro::before{
  /* AQUI ESTABA EL FALLO de las esquinas. Con width:100vw la capa mide mas
     que el area visible en cuanto hay barra de scroll o zoom (1728px en un
     navegador de 1568), asi que sus dos esquinas curvas caian FUERA de la
     pantalla y ademas las recortaba el overflow-x:clip del contenedor. En
     headless, sin barra, 100vw coincidia con el viewport y por eso ahi si se
     veian: el fallo estaba en mi forma de comprobarlo. Con left/right:0 la
     capa mide exactamente lo que el bloque y las curvas caen dentro. */
  content:""; position:absolute; z-index:-1; top:0; bottom:0; left:0; right:0;
  /* el paso al claro no es una línea recta: el bloque verde cierra con las
     esquinas de abajo redondeadas */
  border-radius:0 0 clamp(32px,3.6vw,56px) clamp(32px,3.6vw,56px);
  /* Sombra propia + halo lima justo debajo del canto, como en la referencia
     de Sierra: es lo que da la sensacion de que el bloque flota encima y no
     de que la pagina esta cortada por una linea. */
  /* Solo sombra, y suave. El filo lima que probe antes se leia como un borde
     mal rematado; en la referencia no hay linea de color, hay una sombra
     ancha y muy tenue que separa los dos planos. */
  box-shadow:0 26px 46px -26px rgba(15,31,16,.26),
             0 6px 16px -10px rgba(15,31,16,.18);
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(199,255,46,.10), transparent 70%),
    var(--c-dark);
}
/* PRUEBA (16-ago-2026): la misma textura que se ha puesto en el pie, aqui en
   el hero, para ver si le da cuerpo al verde. Va en ::after y no tocando el
   ::before, que es quien pinta el verde y las esquinas redondeadas: asi se
   quita de un borrado si no convence.
   Mismo z-index:-1 que el ::before; al ir despues, pinta encima de el pero
   sigue por debajo del contenido gracias al isolation:isolate del padre. */
html:not(.chatting) #mi-intro::after{
  content:""; position:absolute; z-index:-1; top:0; bottom:0; left:0; right:0;
  pointer-events:none;
  border-radius:0 0 clamp(32px,3.6vw,56px) clamp(32px,3.6vw,56px);
  background:url("/assets/nucleos/cta-demo.webp?v=2") right center / cover no-repeat;
  opacity:.15;
  /* Simetrica, no como la del pie: aqui el contenido va CENTRADO, asi que la
     textura se aparta hacia los dos bordes y deja limpio el centro, que es por
     donde pasa el titular. */
  -webkit-mask-image:linear-gradient(90deg, #000 0%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.12) 58%, #000 100%);
  mask-image:linear-gradient(90deg, #000 0%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.12) 58%, #000 100%);
}
html:not(.chatting) #mi-intro .eyebrow{ color:rgba(245,244,242,.55) !important; }
html:not(.chatting) #mi-intro .eyebrow::before{ background:rgba(245,244,242,.45) !important; }
html:not(.chatting) #mi-intro h1{ color:#FFFFFF !important; }
html:not(.chatting) #mi-intro h1 .lime{ color:var(--c-lime) !important; }
html:not(.chatting) #mi-intro .mi-lead{ color:#A9B7A4 !important; }
html:not(.chatting) #mi-intro .mi-lead strong{ color:#FFFFFF !important; }
html:not(.chatting) #mi-intro .scroll-cue{ color:rgba(245,244,242,.45) !important; }

/* ---- el menú cambia de traje según el fondo que tiene debajo ---- */
html.nav-hero body > nav{
  background-color:#f2f1ea !important; background-image:none !important;
  box-shadow:inset 0 0 0 1px rgba(15,31,16,.10) !important;
}
html.nav-hero body > nav .logo{ color:#0f1f10 !important; }
html.nav-hero body > nav .nav-links a{ color:#43563f !important; }
html.nav-hero body > nav .nav-links a:hover{ color:#0f1f10 !important; background:rgba(15,31,16,.07) !important; }
html.nav-hero body > nav .btn-contacta{ background:#0f1f10 !important; color:#f5f4f2 !important; border-color:#0f1f10 !important; }
html.nav-hero body > nav .btn-contacta:hover{ background:var(--c-lime) !important; color:#0b170c !important; border-color:var(--c-lime) !important; }
html.nav-hero body > nav .nav-burger span{ background:#0f1f10 !important; }
html.nav-hero body > nav .nav-drop-in{
  background:#f2f1ea !important; border-color:rgba(15,31,16,.08) !important;
  box-shadow:0 18px 44px -20px rgba(0,0,0,.45) !important;
}
body > nav{ transition:background .35s ease, box-shadow .35s ease; }
body > nav .logo, body > nav .nav-links a, body > nav .btn-contacta{ transition:color .35s ease, background .35s ease, border-color .35s ease; }

/* la cabecera de la galería, ya en su sitio */
html:not(.chatting) #mi-nucleos .nintro{ margin-bottom:clamp(40px,6vh,64px); }


/* ==========================================================================
   HOME · la siguiente sección SUBE por encima del hero
   --------------------------------------------------------------------------
   El hero se queda pegado arriba y el bloque claro se desliza sobre él con
   las esquinas de arriba redondeadas. Es lo que da la sensación de que la
   página "sale" del scroll en vez de pasar de un bloque a otro por un corte.
   ========================================================================== */
/* El verde va POR ENCIMA del claro: es el bloque verde el que cierra en
   curva y monta sobre la seccion siguiente, no al reves. Eso obliga a
   renunciar al sticky del hero: si se queda pegado arriba Y ademas esta por
   encima, taparia el contenido al bajar. */
html:not(.chatting) #mi-intro{ position:relative; z-index:3; }
html:not(.chatting) #mi-nucleos{
  position:relative; z-index:1;
  background:var(--c-bg) !important;
  border-radius:0 !important;
  /* el margen negativo es lo que hace que el bloque claro MONTE sobre el
     verde: sin el, las dos esquinas redondeadas caen sobre el mismo color y
     no se ve nada. */
  /* El solape es SOLO el radio: lo justo para que se vean las dos curvas.
     Si se pasa de ahi, el verde empieza a comerse el titular de abajo — que
     es lo que pasaba con el parallax. */
  margin:calc(-1 * clamp(32px,3.6vw,56px)) 0 0 !important;
  padding-top:clamp(150px,17vh,220px) !important;
  box-shadow:none;
}
/* todo lo que viene después va también por encima del hero y sobre el claro */
html:not(.chatting) #hero, html:not(.chatting) #mshowcase,
html:not(.chatting) #mblog, html:not(.chatting) .mj-footer{ position:relative; z-index:2; }
html:not(.chatting) #hero, html:not(.chatting) #mshowcase, html:not(.chatting) #mblog{
  background:var(--c-bg) !important; }


/* ==========================================================================
   ANCHO DE LAS CABECERAS
   Los titulares centrados iban encajonados a 760px y partían en dos líneas
   teniendo 1.070px de columna al lado. Se les suelta el ancho: el titular
   usa toda la columna y solo la bajada se queda en una medida legible.
   ========================================================================== */
.nx-head--c{ max-width:none !important; }
.nx-head--c h2{ max-width:none !important; }
.nx-head--c p{ max-width:66ch !important; }
.nx-head h2{ max-width:none !important; }
/* Ojo: aqui max-width:none lo sacaba de la columna y el titular acababa
   pegado al borde izquierdo. Lo que sobra es el limite estrecho, no la
   columna: se queda en los 1120px del resto del sitio. */
#mshowcase .msh-head{ max-width:1120px !important; margin-left:auto !important; margin-right:auto !important;
  padding-left:24px !important; padding-right:24px !important; }
#mshowcase .msh-head p{ max-width:60ch !important; }
html:not(.chatting) #mintro .nintro{ max-width:900px !important; }
html:not(.chatting) #mintro .nintro .ncopy p{ max-width:66ch !important; }


/* ==========================================================================
   HOME · el chat, en verde
   --------------------------------------------------------------------------
   Sobre la página clara la tarjeta blanca del chat pasaba desapercibida: es
   el punto de conversión de la home y tiene que pesar. Pasa a bloque verde
   con "conversación." en lima — y de paso adelanta lo que ocurre al entrar,
   porque el modo conversación también es oscuro.
   ========================================================================== */
/* OJO: la tarjeta tiene que ser .stage, NO .chat-dock.
   El hilo de mensajes (#chat) es HERMANO del dock, no hijo. Vistiendo solo
   el dock, en cuanto escribias o pulsabas una pastilla las burbujas se
   pintaban FUERA de la tarjeta, sobre el fondo claro y con los colores del
   tema oscuro. */
html:not(.chatting) #hero .stage{
  background:var(--c-dark) !important;
  border-radius:32px; padding:34px 34px 30px;
  box-shadow:0 50px 110px -60px rgba(15,31,16,.75);
  max-width:760px; margin-left:auto; margin-right:auto;
}
html:not(.chatting) #hero .chat-dock{
  background:transparent !important; border:none !important;
  box-shadow:none !important; padding:0 !important; border-radius:0 !important;
}
/* las burbujas, dentro de la tarjeta y en tema oscuro */
html:not(.chatting) #hero #chat{ margin-bottom:18px !important; }
html:not(.chatting) #hero .msg.user{ background:var(--c-lime) !important; color:#0b170c !important; }
html:not(.chatting) #hero .msg.bot{ background:rgba(255,255,255,.06) !important; color:#F5F4F2 !important;
  border:1px solid rgba(199,255,46,.16) !important; }
html:not(.chatting) #hero .msg.bot b{ color:var(--c-lime) !important; }
html:not(.chatting) #hero .typing{ background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(199,255,46,.16) !important; }
html:not(.chatting) #hero .typing span{ background:#8EA08A !important; }
html:not(.chatting) #hero .cta-card{ background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(199,255,46,.16) !important; box-shadow:none !important; }
html:not(.chatting) #hero .cta-card h3{ color:#FFFFFF !important; }
html:not(.chatting) #hero .cta-card p{ color:#8EA08A !important; }
html:not(.chatting) #hero .note{ color:var(--c-ink-3) !important; }
html:not(.chatting) #hero .chat-welcome h2{ color:#FFFFFF !important; }
html:not(.chatting) #hero .chat-welcome h2 .hl{ color:var(--c-lime) !important; background:none !important; }
html:not(.chatting) #hero .chat-welcome p{ color:#A9B7A4 !important; }

/* las cuatro pastillas, en cristal sobre el verde */
html:not(.chatting) #hero .pills .pill{
  background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.12) !important;
  color:#F5F4F2 !important; }
html:not(.chatting) #hero .pills .pill:hover{
  background:rgba(199,255,46,.10) !important; border-color:var(--c-lime) !important; }
html:not(.chatting) #hero .pill-tx b{ color:#FFFFFF !important; }
html:not(.chatting) #hero .pill-tx span{ color:#A9B7A4 !important; }
html:not(.chatting) #hero .pills .pill:hover .pill-tx span{ color:#C9D8BF !important; }

/* presencia y campo de texto */
html:not(.chatting) #hero .presence .who b{ color:#FFFFFF !important; }
html:not(.chatting) #hero .presence .who span,
html:not(.chatting) #hero .presence .status{ color:#8EA08A !important; }
html:not(.chatting) #hero form.composer{
  background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.14) !important; }
html:not(.chatting) #hero form.composer input{ color:#F5F4F2 !important; }
html:not(.chatting) #hero form.composer input::placeholder{ color:#8EA08A !important; }


/* ==========================================================================
   PALANCAS · afinado sobre el tema claro
   ========================================================================== */
/* 02 · las fotos nuevas son claras: el velo que necesitaban las de bosque
   oscuro aqui se come la imagen. Baja a la mitad y arranca mas abajo. */
.nx-card--photo::after{
  background:linear-gradient(180deg, rgba(8,16,9,0) 0%, rgba(8,16,9,0) 40%,
    rgba(8,16,9,.30) 66%, rgba(8,16,9,.82) 100%) !important; }

/* 03 · sobre el plano blanco la trama de puntos era blanca, o sea invisible.
   Se repinta en tinta y el icono derrama su luz lima sobre la tarjeta, para
   que esta tenga tanto trabajo de diseno como las otras tres. */
.nx-card--ico{
  background:
    radial-gradient(54% 62% at 92% 6%, rgba(199,255,46,.22), transparent 66%),
    linear-gradient(200deg, rgba(15,31,16,.035), transparent 46%),
    #FFFFFF !important; }
.nx-card--ico:hover{
  background:
    radial-gradient(54% 62% at 92% 6%, rgba(199,255,46,.30), transparent 66%),
    linear-gradient(200deg, rgba(15,31,16,.05), transparent 46%),
    #FFFFFF !important; }
.nx-card--ico::after{ display:block !important;
  background-image:radial-gradient(rgba(15,31,16,.16) 1px, transparent 1.1px) !important;
  background-size:20px 20px !important;
  -webkit-mask-image:radial-gradient(88% 104% at 88% 8%, #000 4%, transparent 78%) !important;
          mask-image:radial-gradient(88% 104% at 88% 8%, #000 4%, transparent 78%) !important; }
.nx-card--ico .nx-ico{
  box-shadow:0 14px 30px -12px rgba(199,255,46,.85), 0 0 70px -8px rgba(199,255,46,.45) !important; }


/* 01 · el plano oscuro no puede ser solo un rectangulo negro: se le da la
   misma materia que a las portadas del blog — dos focos lima difuminados y
   grano por encima. Asi las cuatro tarjetas tienen trabajo de diseno, no
   solo la de la foto. */
.nx-card--grad{
  background:
    radial-gradient(78% 66% at 86% 4%, rgba(199,255,46,.22), transparent 62%),
    radial-gradient(90% 80% at 6% 98%, rgba(199,255,46,.10), transparent 58%),
    linear-gradient(160deg, #17281A 0%, var(--c-dark) 62%) !important;
  position:relative; isolation:isolate; }
.nx-card--grad::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px; }
/* filo lima en el canto de arriba: el detalle de color de esta tarjeta */
.nx-card--grad::before{ content:""; position:absolute; z-index:2; left:34px; right:34px; top:0; height:2px;
  border-radius:0 0 2px 2px; opacity:1;
  background:linear-gradient(90deg, transparent, var(--c-lime), transparent); }
.nx-card--grad .nx-card-top, .nx-card--grad .nx-card-body{ position:relative; z-index:3; }

/* La seccion de nucleos entra SOLO con opacidad, sin desplazamiento: sube
   desde detras del verde y basta con que se encienda. */
html:not(.chatting) #mi-nucleos .mi-reveal{ transform:none !important; transition:opacity .9s ease !important; }


/* ==========================================================================
   MÓVIL
   ========================================================================== */
@media(max-width:700px){
  /* styles.css fuerza nowrap en el h1 de la home para que en desktop quepa
     en una linea. En movil eso lo saca de pantalla: aqui vuelve a partir. */
  #mintro .mi-hero h1{ white-space:normal !important;
    font-size:clamp(30px,7.8vw,42px) !important; max-width:none !important; }
  .pg-hero h1, .cl-hero h1, .nx-hero h1, .cs-hero h1{
    white-space:normal !important; font-size:clamp(29px,7.6vw,42px) !important; max-width:none !important; }

  /* el hero deja de reservar el 86% de alto: en movil eso son 200px de verde
     vacio debajo del boton */
  html:not(.chatting) #mi-intro{ min-height:0 !important; display:block !important;
    padding:120px 0 92px !important; }
  html:not(.chatting) #mi-intro::before{ border-radius:0 0 28px 28px; }
  html:not(.chatting) #mi-nucleos{ margin-top:-28px !important; padding-top:88px !important; }

  .nx-hero{ padding-top:118px !important; }
  .pg-hero{ padding-top:110px !important; }
}


/* ==========================================================================
   MÓVIL · MODO CONVERSACIÓN
   En movil el chat se monta con piezas fijas: .hero-top va a top:56 y el hilo
   de mensajes arranca a top:126. Ese hueco da para el orbe y la chapa, y para
   nada mas.
   ========================================================================== */
@media(max-width:560px){
  /* El titular es un <h2>, y la regla que esconde la cabecera en modo chat
     solo alcanzaba al <h1>. Con dos lineas se comia 74px y se solapaba con
     los mensajes. En movil la chapa "Alex · en linea" ya dice donde estas. */
  html.chatting #hero h2[data-ph="title"]{ display:none !important; }

  /* La chapa arrancaba a 56px y el menu flota a 14 midiendo 62: quedaba
     medio tapada. Baja ella y baja con ella el hilo de mensajes. */
  html.chatting .hero-top{ top:88px !important; }
  html.chatting #chat{ top:152px !important; }

  /* El boton flotante de WhatsApp caia encima de la conversacion. Dentro del
     chat sobra: ya estas hablando con Alex, y el propio chat ofrece WhatsApp
     cuando toca. */
  html.chatting .wa-fab{ display:none !important; }

  /* Con el aviso de cookies abierto, la barra tapaba el campo de escribir:
     el chat se quedaba sin donde teclear en la primera visita. */
  html.chatting.ck-open .chat-dock{
    bottom:calc(var(--ck-h,0px) + 16px + env(safe-area-inset-bottom)) !important; }
  html.chatting.ck-open #chat{
    bottom:calc(var(--ck-h,0px) + 176px + env(safe-area-inset-bottom)) !important; }
}


/* El logo del cliente en la portada de caso es la version blanca (venia del
   tema oscuro): sobre claro desaparecia y solo quedaba el punto lima del
   isotipo. Va en tinta, como el muro de logos de /clientes. */
.cs-brand{ filter:brightness(0) !important; opacity:.9; }

/* El desplegable del menu en movil es oscuro, pero los enlaces conservaban
   el verde apagado pensado para la pastilla crema: se leian grises sobre
   negro. */
@media(max-width:860px){
  body > nav .nav-links a, .pg-nav .nav-links a{ color:#F5F4F2 !important; }
  body > nav .nav-links a:hover, .pg-nav .nav-links a:hover{
    color:#FFFFFF !important; background:rgba(255,255,255,.08) !important; }
  /* sobre el hero, donde la pastilla es clara, el desplegable tambien */
  html.nav-hero body > nav .nav-links{ background:#f2f1ea !important;
    border-color:rgba(15,31,16,.08) !important; }
  html.nav-hero body > nav .nav-links a{ color:#43563f !important; }
  html.nav-hero body > nav .nav-links a:hover{ color:#0f1f10 !important;
    background:rgba(15,31,16,.07) !important; }
  /* el prefijo html.nav-hero es obligatorio: la regla de arriba para el panel
     sobre el hero es más específica que la de móvil y si no, gana ella y el
     panel volvería a pintarse como isla crema dentro de la crema */
  html.nav-hero body > nav .nav-drop-in{
    background:transparent !important; box-shadow:none !important;
    border-left-color:rgba(15,31,16,.12) !important;
  }
}