/* ==========================================================================
   cr.css — Paginas de nucleo (y clientes). Estructura de pagina de solucion
   B2B con la paleta de monje.
   --------------------------------------------------------------------------
   Vivia inline en la pagina de Atraer. Al llevar el mismo diseno a los cuatro
   nucleos habria acabado en cuatro copias del mismo bloque, asi que sale a
   hoja propia: un cambio de diseno se hace UNA vez.
   Se carga DESPUES de claro.css y no pisa nada existente: todo va prefijado
   .cr- salvo .rv, que es el reveal que mueve assets/js/reveal.js.
   ========================================================================== */
/* ==========================================================================
   .cr-  — Página de núcleo. Estructura de página de solución B2B, paleta monje.
   --------------------------------------------------------------------------
   Referencia de estructura: cresta.com/sales. Lo que se copia es el ESQUELETO
   y la densidad de llamadas a la acción, no el color:

     hero con captura + demo → muro de logos → cifras → bloques de capacidad
     alternados, cada uno con su enlace → tarjetas de caso de uso con métricas
     → caso real → proceso → encaje con tu entorno → FAQ → cierre.

   Del original se conservan cuatro reglas de estilo, que son las que hacen que
   se lea "limpio y cuidado":
     1. Nada brilla. Sin sombras de color, sin halos. El contraste lo da el
        FONDO de cada bloque, no la luz.
     2. Peso ligero a tamaño grande: los titulares en 500, no en 700.
     3. Un solo acento saturado por pantalla (aquí el lima, y solo en relleno).
     4. Ritmo de sección fijo y mucho aire.
   ========================================================================== */
.cr-page{
  --ink:#0F1F10;          /* la tinta ES el verde de marca, no negro */
  --ink-2:#5A625C;
  --ink-3:#8B928B;
  --bg:#F5F4F2;
  --bg-2:#EDEBE5;         /* banda de apoyo */
  --surface:#FFFFFF;
  --dark:#0F1F10;         /* bloque de énfasis */
  --lime:#C7FF2E;
  --line:rgba(15,31,16,.10);
  --line-2:rgba(15,31,16,.06);
  --disp:"Geist",system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono",ui-monospace,monospace;
  --sp:112px;             /* ritmo de sección */
  --e:cubic-bezier(.16,1,.3,1);
  background:var(--bg); color:var(--ink); font-family:var(--disp);
  -webkit-font-smoothing:antialiased;
}
.cr-page main{ overflow-x:clip; }
.cr-wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }
.cr-sec{ padding:var(--sp) 0; }
.cr-sec--sm{ padding:76px 0; }
.cr-sec--tight{ padding:0 0 var(--sp); }
/* Sin aire propio: la sección que va DEBAJO ya pone sus 112px. Con --tight se
   sumaban los dos y quedaba un vacío de 224px que parecía un fallo de montaje. */
.cr-sec--flush{ padding:0; }

/* ---------- tipografía ----------
   El salto es grande a propósito: 64 / 40 / 21 / 17 / 12. Una escala plana es
   lo que hacía que la página anterior se leyera "toda igual de importante". */
.cr-page h1,.cr-page h2,.cr-page h3{ font-family:var(--disp); color:var(--ink);
  font-weight:500; letter-spacing:-.03em; line-height:1.06; }
.cr-h1{ font-size:clamp(38px,5.2vw,64px); max-width:16ch; }
.cr-h2{ font-size:clamp(30px,3.8vw,44px); max-width:20ch; }
.cr-h3{ font-size:clamp(21px,2.2vw,27px); letter-spacing:-.024em; }
/* Cabecera de sección a menor cuerpo, para bloques donde el que habla es el
   dibujo y no el texto. */
/* 40ch para que el <br> mande: la línea larga son 36 caracteres y con 26ch
   se partía sola antes de llegar al salto. */
.cr-h2--sm{ font-size:clamp(26px,3.1vw,36px); max-width:40ch; }
.cr-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:18px; }
.cr-lead{ color:var(--ink-2); font-size:clamp(16px,1.8vw,19px); line-height:1.6; max-width:56ch; }
.cr-page p{ color:var(--ink-2); }
/* Dos niveles de énfasis en la entradilla, y ninguno es negrita a secas:
   - <b> sube el texto a tinta (los servicios, que además son los términos que
     la gente busca);
   - .cr-mark le pone debajo una banda lima fina. Es el mismo recurso que ya
     usa la home, pero a un tercio de alto: aquí subraya, no rotula. Va SOLO en
     la frase que corta, que antes iba en gris al final del párrafo. */
.cr-lead b{ color:var(--ink); font-weight:500; }
.cr-mark{ color:var(--ink); font-weight:500;
  background:linear-gradient(180deg,transparent 72%,rgba(199,255,46,.6) 72%,rgba(199,255,46,.6) 93%,transparent 93%);
  padding:0 .06em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.cr-head{ margin-bottom:52px; }
.cr-head--c{ text-align:center; margin-left:auto; margin-right:auto; }
.cr-head--c .cr-h2, .cr-head--c .cr-lead{ margin-left:auto; margin-right:auto; }
.cr-head .cr-lead{ margin-top:18px; }

/* ---------- botones ----------
   La forma es la de la referencia: pastilla PLANA con un chip circular dentro.
   Nada de sombra de color: es lo que separaba a esta web de ese acabado. */
.cr-btn{ display:inline-flex; align-items:center; gap:13px; text-decoration:none;
  font-weight:600; font-size:15.5px; letter-spacing:-.005em; border-radius:999px;
  padding:7px 7px 7px 22px; border:1px solid transparent; cursor:pointer;
  transition:background .3s var(--e), border-color .3s var(--e), color .3s var(--e); }
.cr-btn .chip{ flex:none; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; transition:transform .4s var(--e); }
.cr-btn .chip svg{ width:16px; height:16px; }
.cr-btn:hover .chip{ transform:translateX(3px); }
.cr-btn--solid{ background:var(--lime); color:#0b170c; }
.cr-btn--solid .chip{ background:var(--dark); color:var(--lime); }
.cr-btn--solid:hover{ background:#d5ff5f; }
.cr-btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line);
  padding:12px 22px; }
.cr-btn--ghost:hover{ border-color:var(--ink); }
/* el CTA de texto que remata cada bloque: en la referencia hay uno por sección */
.cr-link{ display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-weight:600; font-size:15px; color:var(--ink); margin-top:26px; }
.cr-link svg{ width:15px; height:15px; transition:transform .35s var(--e); }
.cr-link:hover svg{ transform:translateX(4px); }
.cr-link::after{ content:""; }

/* ---------- HERO ---------- */
.cr-hero{ padding:150px 0 0; }
.cr-hero .cr-kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); display:inline-flex; align-items:center; gap:9px; }
.cr-hero .cr-kicker a{ color:var(--ink-3); text-decoration:none; }
.cr-hero .cr-kicker a:hover{ color:var(--ink); }
.cr-hero .cr-kicker b{ color:var(--ink); font-weight:600; }
.cr-hero .cr-h1{ margin:24px 0 0; }
.cr-hero .cr-lead{ margin-top:22px; }

/* captura + agenda. En la referencia el hero pide el correo ANTES de mandarte a
   la agenda; aquí el correo no se guarda en ningún sitio: se le pasa a Calendly
   por la URL para que llegue el campo relleno. Sin base de datos y sin promesa
   que no podamos cumplir. */
.cr-catch{ display:flex; align-items:center; gap:8px; margin-top:34px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:7px 7px 7px 22px; max-width:520px;
  transition:border-color .3s var(--e); }
.cr-catch:focus-within{ border-color:rgba(15,31,16,.34); }
.cr-catch input{ flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-family:var(--disp); font-size:15.5px; color:var(--ink); padding:12px 0; }
.cr-catch input::placeholder{ color:var(--ink-3); }
.cr-catch .cr-btn{ flex:none; }
.cr-hero-alt{ margin-top:16px; font-size:14px; color:var(--ink-3); }
.cr-hero-alt a{ color:var(--ink-2); }
/* La tira de tres: lo que nos separa de contratar cinco proveedores sueltos.
   Va en el hero porque es la parte de la oferta que nadie más puede copiar —
   los cuatro servicios sí los ofrece cualquiera. */
.cr-proof{ list-style:none; margin:30px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 28px; }
.cr-proof li{ display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--ink-2); }
.cr-proof li::before{ content:""; flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--lime); box-shadow:0 0 0 3px rgba(199,255,46,.22); }

/* el marco del hero: la imagen a lo ancho, como su vídeo de producto */
.cr-hero-media{ position:relative; margin-top:56px; border-radius:24px; overflow:hidden;
  border:1px solid var(--line); background:var(--bg-2); aspect-ratio:16/8.2; }
.cr-hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* la pastilla flotante sobre el marco: en la referencia marca lo que está
   pasando en el producto. Aquí marca el resultado. */
.cr-chip{ position:absolute; left:24px; bottom:24px; display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border:1px solid var(--line);
  border-radius:999px; padding:11px 18px 11px 14px; font-size:14px; font-weight:500; color:var(--ink); }
.cr-chip .dot{ width:8px; height:8px; border-radius:50%; background:#4a6a2a; flex:none; }

/* ---------- MURO DE LOGOS ---------- */
.cr-logos{ text-align:center; }
.cr-logos .k{ font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); }
.cr-logos-row{ margin-top:34px; display:flex; flex-wrap:wrap; justify-content:center;
  align-items:center; gap:22px 46px; }
/* ⚠️ Los logos de `assets/showcase/logos/` son la versión REVERSA (blancos, para
   fondo oscuro). Sobre crema son casi invisibles — con un grayscale normal el
   muro salía en blanco. `brightness(0)` los aplasta a negro sólido sea cual sea
   su color original, que además es exactamente el acabado del muro de logos de
   la referencia: monocromo y a media opacidad. */
.cr-logos-row img{ height:30px; width:auto; opacity:.42; filter:brightness(0);
  transition:opacity .35s var(--e); }
.cr-logos-row img:hover{ opacity:.8; }

/* ---------- CIFRAS ---------- */
.cr-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-2); border:1px solid var(--line-2); border-radius:20px; overflow:hidden; }
.cr-stats > div{ background:var(--bg); padding:38px 28px; }
.cr-stats .n{ font-family:var(--disp); font-weight:500; font-size:clamp(38px,4.4vw,58px);
  letter-spacing:-.04em; line-height:1; color:var(--ink); }
.cr-stats .n em{ font-style:normal; color:inherit; }
.cr-stats .l{ margin-top:12px; font-size:14.5px; color:var(--ink-2); line-height:1.45; }
.cr-stats-note{ margin-top:18px; font-size:12.5px; color:var(--ink-3); text-align:center; }
/* La nota lleva las FUENTES de las cifras, así que lleva enlaces. Van en el
   mismo gris que el resto: si heredan el azul del navegador, la línea de
   atribución pesa más que las propias cifras. */
.cr-stats-note a{ color:inherit; text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:var(--line); transition:color .16s, text-decoration-color .16s; }
.cr-stats-note a:hover{ color:var(--ink); text-decoration-color:currentColor; }

/* ---------- BLOQUES DE CAPACIDAD (filas alternas) ---------- */
.cr-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,88px);
  align-items:center; padding:clamp(48px,6vw,72px) 0; border-top:1px solid var(--line-2); }
.cr-row:first-of-type{ border-top:0; }
.cr-row--flip .cr-row-copy{ order:2; }
.cr-row-copy .cr-h3{ margin-bottom:16px; }
.cr-row-media{ border-radius:20px; overflow:hidden; border:1px solid var(--line); background:var(--bg-2);
  aspect-ratio:4/3; }
.cr-row-media img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.2s var(--e); }
/* El marco es 4:3 y la imagen 16:9, así que object-fit:cover recorta por los
   lados. En la del megáfono el recorte centrado dejaba media crema vacía a la
   izquierda y cortaba el arco de fichas por la derecha. Corriendo la ventana de
   recorte al 78% se mete el motivo hacia la izquierda y entra el arco entero. */
.cr-row-media img.is-right{ object-position:78% center; }
.cr-row-media img.is-left{ object-position:12% center; }
.cr-row:hover .cr-row-media img{ transform:scale(1.03); }
.cr-list{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px; }
.cr-list li{ display:flex; gap:11px; font-size:15.5px; color:var(--ink-2); line-height:1.5; }
.cr-list .ck{ flex:none; width:19px; height:19px; border-radius:50%; margin-top:2px;
  background:rgba(199,255,46,.32); box-shadow:0 0 0 3px rgba(199,255,46,.14);
  display:grid; place-items:center; color:#3d5a1e; }
.cr-list .ck svg{ width:11px; height:11px; }
.cr-list strong{ color:var(--ink); font-weight:600; }

/* ---------- TARJETAS DE CASO DE USO (con métricas) ---------- */
.cr-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
/* Cuatro tarjetas: con la rejilla de tres, la cuarta caia sola en una segunda
   fila y la seccion se leia coja. */
.cr-cards--4{ grid-template-columns:repeat(4,1fr); gap:18px; }
@media(max-width:1080px){ .cr-cards--4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .cr-cards--4{ grid-template-columns:1fr; } }
/* Estas tarjetas eran blanco puro sobre crema con un filete gris: planas. El
   relieve NO se hace con sombra (la referencia no tiene ninguna), se hace con
   tres cosas que además significan algo:
     1. Un lavado verde subiendo desde la base — la tarjeta se apoya en el
        fondo en vez de flotar recortada.
     2. Un filete lima corto arriba a la izquierda, que se extiende al pasar
        por encima: marca cuál estás mirando.
     3. Las cifras en verde profundo. El color va donde está el valor. */
.cr-card{ position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:linear-gradient(178deg, var(--surface) 42%, #F4F8EE 100%);
  border:1px solid var(--line); border-radius:18px; padding:32px 30px 30px;
  text-decoration:none; transition:border-color .35s var(--e), transform .5s var(--e); }
.cr-card::before{ content:""; position:absolute; left:0; top:0; height:2px; width:34px;
  background:var(--lime); transition:width .55s var(--e); }
.cr-card:hover{ border-color:rgba(15,31,16,.2); transform:translateY(-3px); }
.cr-card:hover::before{ width:100%; }
.cr-card .k{ font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:#4a6a2a; display:block; line-height:1.5;
  min-height:2.9em; }
.cr-card .cr-h3{ margin:13px 0 11px; font-size:23px; }
.cr-card p{ font-size:15px; line-height:1.55; }
/* margin-top:auto — no es cosmético: los titulares de las tarjetas ocupan una o
   dos líneas según el texto, así que sin esto las cifras y el enlace quedaban a
   tres alturas distintas y la fila se leía descuadrada. */
.cr-card-metrics{ display:flex; gap:30px; margin:26px 0 0; margin-top:auto; padding-top:22px;
  border-top:1px solid var(--line-2); }
.cr-card-metrics .n{ font-family:var(--disp); font-weight:500; font-size:30px;
  letter-spacing:-.035em; line-height:1; color:#4a6a2a; }
.cr-card-metrics .l{ margin-top:7px; font-size:12.5px; color:var(--ink-3); line-height:1.35; }
.cr-card .cr-link{ margin-top:22px; }
/* Variante sobria, la que usa la home: blanco plano, sin filete lima y sin
   lavado. Cuando la tarjeta solo lleva titular y parrafo, el relieve de la
   .cr-card normal sobra y se lee recargado. Se tine de lima al pasar, que es
   el unico momento en que necesita color. */
.cr-card--plain{ background:#fff; border-color:transparent; padding:36px 34px 34px;
  transition:background .3s ease, border-color .3s ease; }
.cr-card--plain::before{ display:none; }
.cr-card--plain:hover{ background:#F4FBE0; border-color:rgba(199,255,46,.7);
  transform:none; }
.cr-card--plain .cr-h3{ margin:0 0 14px; }
/* Tarjetas de SECTOR (/servicios/atraer). Llevaban el traje completo de
   .cr-card —filete lima, lavado verde, filete separador y cifras a 30px— y
   puestas al lado de la sección de avatares de /servicios, que es blanca y
   plana, parecían de otra web. Alex pide la línea sobria también aquí.
   Van SOBRE .cr-card--plain (de ahí el blanco, el tinte lima al pasar y el
   filete apagado) y solo corrigen las dos cosas que esa variante no contempla,
   porque en /servicios no existen: el rótulo de sectores y el bloque de cifras.

   El rótulo baja de mono lima a la tinta apagada del .cr-eyebrow de la casa:
   dice de quién es la tarjeta, no reclama la mirada antes que el titular.
   Y las cifras pierden el filete separador —en una tarjeta plana esa línea era
   el último resto de decoración— y un poco de cuerpo: las sostiene el aire de
   encima. El verde se queda solo en el número, que es donde está el valor. */
.cr-card--sector .k{ color:var(--ink-3); letter-spacing:.16em; }
.cr-card--sector .cr-card-metrics{ border-top:none; padding-top:24px; gap:26px; }
.cr-card--sector .cr-card-metrics .n{ font-size:26px; }
/* Tarjeta DESTACADA. Va con .cr-card--plain y la pisa por ir despues. Se usa
   cuando de cuatro opciones hay una que interesa que se elija: aqui el chat,
   que es lo que ningun competidor ofrece. El tinte lima y el filete entero la
   separan de las otras tres sin sacarla del sistema. */
.cr-card--destacada{ background:linear-gradient(178deg, #F8FDEC 0%, #EEF9D4 100%);
  border-color:rgba(199,255,46,.9); }
.cr-card--destacada::before{ display:block; width:100%; }
.cr-card--destacada:hover{ background:linear-gradient(178deg, #F4FCE0 0%, #E7F5C4 100%);
  border-color:rgba(160,214,30,.95); }
/* el rotulo que dice POR QUE esta destacada */
.cr-card--destacada .k{ display:inline-flex; align-items:center; min-height:0;
  font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:#3d5a1e; background:rgba(199,255,46,.55); border-radius:999px;
  padding:5px 11px; margin-bottom:16px; }
/* Tarjeta SIN bloque de cifras (las de /servicios): el margin-top:auto vive
   arriba en .cr-card-metrics, así que sin él los enlaces se quedaban a tres
   alturas distintas. El selector adyacente solo casa cuando el enlace va justo
   detrás del párrafo, es decir, cuando no hay cifras en medio. */
.cr-card p + .cr-link{ margin-top:auto; padding-top:24px; }

/* ---------- RESEÑAS ----------
   Estética de reseña reconocible —estrellas doradas, tarjeta, avatar, fecha—
   pero SIN el logotipo de Google ni nota agregada. Esos dos elementos afirman
   que un tercero ha verificado la opinión, y desde la Directiva Ómnibus eso
   solo se puede decir si es cierto y comprobable. Aquí quien avala es el
   cliente que firma, con su logo al pie: se reconoce igual y no promete una
   verificación que no existe.

   ⚠️ Los textos son literales de clientes. No se escriben ni se "mejoran": si
   hace falta recortar, se corta por una frase entera y se mantiene el sentido. */
.cr-revs{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cr-rev{ display:flex; flex-direction:column; margin:0;
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:26px 26px 22px; }
.cr-rev-stars{ display:flex; gap:3px; margin-bottom:14px; }
.cr-rev-stars svg{ width:16px; height:16px; fill:#FBBC04; flex:none; }
.cr-rev blockquote{ margin:0; font-size:15.5px; line-height:1.6; color:var(--ink-2); }
.cr-rev blockquote::before{ content:"“"; }
.cr-rev blockquote::after{ content:"”"; }
/* auto para que todos los pies queden a la misma altura aunque el texto varíe */
.cr-rev figcaption{ display:flex; align-items:center; gap:12px; margin-top:auto;
  padding-top:20px; border-top:1px solid var(--line-2); }
.cr-rev figcaption img{ height:22px; width:auto; max-width:96px; object-fit:contain;
  filter:grayscale(1); opacity:.72; flex:none; }
.cr-rev-who{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.cr-rev-who b{ font-family:var(--disp); font-weight:600; font-size:14px; color:var(--ink); }
.cr-rev-who small{ font-size:12px; color:var(--ink-3); }
@media(max-width:960px){
  .cr-revs{ grid-template-columns:1fr; }
}

/* ---------- FORMULARIO ----------
   Mismo lenguaje que .cr-catch del hero (pastilla, borde fino, foco marcado)
   pero en campos apilados. Nada de etiquetas flotantes ni animaciones: en un
   formulario de contacto lo unico que importa es que se vea donde escribes y
   que el error se lea. */
.cr-form{ display:grid; gap:14px; }
.cr-form .f-fila{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cr-form label{ display:block; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }
.cr-form input, .cr-form textarea{ width:100%; box-sizing:border-box;
  font-family:var(--disp); font-size:15.5px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:14px; padding:13px 16px; outline:0;
  transition:border-color .25s var(--e), box-shadow .25s var(--e); }
.cr-form textarea{ min-height:132px; resize:vertical; line-height:1.55; }
.cr-form input::placeholder, .cr-form textarea::placeholder{ color:var(--ink-3); }
.cr-form input:focus, .cr-form textarea:focus{ border-color:rgba(15,31,16,.42);
  box-shadow:0 0 0 4px rgba(199,255,46,.28); }
/* la trampa para bots: fuera de pantalla, no display:none, para que los que
   miran el estilo calculado no la detecten tan facil */
.cr-form .f-trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cr-form .f-pie{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px; }
.cr-form .f-aviso{ font-size:13.5px; line-height:1.5; color:var(--ink-3); }
.cr-form .f-aviso a{ color:var(--ink-2); }
/* Estados. Van con aria-live, asi que un lector de pantalla los canta sin que
   haya que mover el foco a mano. */
.cr-form .f-estado{ font-size:14.5px; line-height:1.55; }
.cr-form .f-estado:empty{ display:none; }
.cr-form .f-estado.ok{ color:#3d5a1e; }
.cr-form .f-estado.mal{ color:#8a2b1f; }
.cr-form button[disabled]{ opacity:.6; cursor:progress; }
@media(max-width:720px){
  .cr-form .f-fila{ grid-template-columns:1fr; }
}

/* ---------- BANDA OSCURA (caso real y cierre) ----------
   Es el único sitio donde la página se pone verde. Dentro, el lima vuelve a
   ser el color de texto de apoyo porque ya hay contraste de sobra. */
.cr-dark{ background:var(--dark); color:#F5F4F2; border-radius:clamp(24px,3vw,40px);
  padding:clamp(44px,6vw,76px); }
.cr-dark h2,.cr-dark h3{ color:#FFFFFF; }
.cr-dark p{ color:#A9B7A4; }
.cr-dark .cr-eyebrow{ color:rgba(245,244,242,.5); }
/* ⚠️ .cr-dark cambia el color del texto pero NO redefine los tokens --ink /
   --ink-2, así que cualquier componente que tire de ellos se queda con la
   tinta del tema claro. Con .cr-list dentro pasaba lo peor posible: el
   <strong> salía en #0F1F10 sobre fondo #0F1F10, es decir, invisible del todo,
   y el resto de la línea en un gris sin contraste. Si se mete aquí otro
   componente que use --ink, hay que darle su pareja igual que estas dos. */
.cr-dark .cr-list li{ color:#A9B7A4; }
.cr-dark .cr-list strong{ color:#FFFFFF; }
/* La banda del caso: una sola fila. El texto manda, el logo identifica y el
   enlace remata. Las dos cifras gigantes se han ido con el bloque grande. */
.cr-case{ display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); flex-wrap:wrap;
  padding:26px clamp(24px,3vw,38px); border-radius:20px; text-decoration:none;
  transition:border-color .35s var(--e); border:1px solid transparent; }
.cr-case:hover{ border-color:rgba(199,255,46,.35); }
.cr-case-logo{ height:26px; width:auto; flex:none; opacity:.9; }
.cr-case q{ flex:1 1 340px; font-size:clamp(15.5px,1.5vw,17.5px); line-height:1.45;
  letter-spacing:-.01em; color:#E8EFE2; font-weight:400; quotes:none; }
.cr-case q strong{ color:var(--lime); font-weight:500; }
.cr-case .who{ flex:none; font-size:13px; color:#8A9584; }
.cr-case .cr-link{ flex:none; margin-top:0; font-size:14px; }
.cr-dark .cr-link{ color:var(--lime); }

/* ---------- PROCESO ---------- */
.cr-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:20px; overflow:hidden; }
.cr-steps > div{ background:var(--bg); padding:34px 26px 36px; }
.cr-steps .n{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:#4a6a2a; }
.cr-steps h3{ margin:16px 0 10px; font-size:20px; }
.cr-steps p{ font-size:14.5px; line-height:1.55; }

/* ---------- MAPA DE INTEGRACIONES ----------
   Escenario y líneas comparten sistema de coordenadas: el contenedor lleva
   aspect-ratio 1200/560 y el SVG el mismo viewBox, así que colocar una baldosa
   en --x/--y (unidades del viewBox) la deja exactamente sobre su línea. */
.int-stage{ position:relative; aspect-ratio:1200/560; margin-top:16px; }
.int-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.int-track path{ stroke:var(--line); stroke-width:1.5; fill:none; }
/* el destello: un guion corto recorriendo un trazo larguísimo. El dasharray
   tiene que ser mayor que el camino más largo o se ven varios destellos a la vez */
.int-spark path{ stroke:var(--lime); stroke-width:2.5; fill:none; stroke-linecap:round;
  stroke-dasharray:.08 1; stroke-dashoffset:1.08;
  animation:intSpark 7s linear infinite; animation-delay:var(--d,0s); }
@keyframes intSpark{ 0%{ stroke-dashoffset:1.08; } 50%,100%{ stroke-dashoffset:0; } }

/* el centro: la misma pastilla del logo, en grande */
/* El centro manda: en la referencia es una pieza claramente mayor que las
   baldosas, con un halo concéntrico. Sube de 150 a 210 unidades del viewBox
   (de 1,7x a 2,4x el lado de una baldosa) y el halo pasa a dos aros. */
.int-hub{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:calc(210/1200*100%); aspect-ratio:1; border-radius:26%;
  background:var(--surface); border:1px solid var(--line);
  display:grid; place-items:center; z-index:2;
  box-shadow:0 0 0 14px rgba(245,244,242,.92), 0 0 0 15px var(--line-2),
             0 0 0 30px rgba(245,244,242,.55), 0 0 0 31px rgba(15,31,16,.035); }
.int-hub .logo{ font-family:var(--disp); font-weight:600; font-size:clamp(17px,2vw,27px);
  letter-spacing:-.02em; color:var(--ink); display:inline-flex; align-items:center; line-height:1; }
.int-hub .logo .pill{ display:inline-flex; align-items:center; background:var(--lime); color:#0F0F0F;
  font-weight:700; font-size:.58em; line-height:1; border-radius:.34em;
  padding:.16em .4em .2em; margin-left:.16em; vertical-align:.06em; }

/* las baldosas */
.int-tile{ position:absolute; z-index:1;
  left:calc(var(--x)/1200*100%); top:calc(var(--y)/560*100%);
  width:calc(86/1200*100%); aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:22%; background:var(--surface); border:1px solid var(--line-2);
  display:grid; place-items:center;
  animation:intOn 15s var(--e) infinite; animation-delay:calc(var(--i) * 1s); }
.int-tile svg{ width:44%; height:44%; fill:var(--ink); opacity:.3;
  animation:intIcon 15s var(--e) infinite; animation-delay:calc(var(--i) * 1s); }
/* Las tres de IA van en el anillo interior y llevan un aro lima permanente: son
   la capa que ponemos NOSOTROS, no una herramienta que el cliente ya tenía. Sin
   esto se leían como doce herramientas más. */
.int-tile--ia{ border-color:rgba(199,255,46,.55); box-shadow:0 0 0 4px rgba(199,255,46,.13); }
.int-tile--ia svg{ opacity:.55; }
/* el nombre de la app solo existe para lectores de pantalla y buscadores: en
   pantalla el logo ya lo dice, y escrito rompía la retícula */
.int-name{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Encendido por turnos: 15 s de ciclo y 1,25 s de desfase entre baldosas, con
   una ventana encendida del 11%. Se solapan dos a medias, que es lo que hace
   que parezca un recorrido y no un parpadeo suelto. */
@keyframes intOn{
  0%,100%{ background:var(--surface); border-color:var(--line-2); }
  3%,9%{ background:var(--lime); border-color:var(--lime); }
  14%{ background:var(--surface); border-color:var(--line-2); }
}
@keyframes intIcon{ 0%,100%{ opacity:.3; } 3%,9%{ opacity:1; } 14%{ opacity:.3; } }

@media(prefers-reduced-motion:reduce){
  .int-tile, .int-tile svg, .int-spark path{ animation:none; }
  .int-spark path{ display:none; }
}

/* ---------- FAQ ---------- */
.cr-faq{ max-width:820px; margin:0 auto; border-top:1px solid var(--line-2); }
.cr-faq details{ border-bottom:1px solid var(--line-2); }
.cr-faq summary{ cursor:pointer; list-style:none; padding:24px 40px 24px 0; position:relative;
  font-size:17.5px; font-weight:500; color:var(--ink); letter-spacing:-.015em; }
.cr-faq summary::-webkit-details-marker{ display:none; }
.cr-faq summary::after{ content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  margin-top:-7px; border-right:1.8px solid var(--ink-3); border-bottom:1.8px solid var(--ink-3);
  transform:rotate(45deg); transition:transform .35s var(--e); }
.cr-faq details[open] summary::after{ transform:rotate(225deg); margin-top:-3px; }
.cr-faq details p{ margin:0 0 26px; font-size:16px; line-height:1.62; max-width:64ch; }

/* ---------- CIERRE ----------
   Dos columnas y la imagen a sangre: el bloque no lleva padding propio, lo pone
   la columna de texto, y la de imagen se estira hasta el canto. overflow:hidden
   para que el radio de la tarjeta recorte la foto. */
.cr-close{ padding:0; overflow:hidden; display:grid; grid-template-columns:1.06fr .94fr;
  align-items:stretch; text-align:left; }
.cr-close-copy{ padding:clamp(38px,4.6vw,66px); align-self:center; }
.cr-close .cr-eyebrow{ margin-bottom:14px; }
.cr-close .cr-h2{ max-width:15ch; }
.cr-close p{ margin-top:18px; max-width:34ch; font-size:clamp(17px,1.5vw,20px); line-height:1.55; }
.cr-close-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px; margin-top:32px; }
.cr-close-cta .cr-link{ margin-top:0; }
.cr-close-media{ position:relative; min-height:300px; background:#0a140b; }
.cr-close-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* El canto izquierdo de la foto dejaba una costura vertical contra el verde del
   bloque: el negro del render y el #0F1F10 no son el mismo negro. Este velo la
   funde en los primeros 20% y el corte deja de leerse como un pegote. */
.cr-close-media::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
    var(--dark) 0%, rgba(15,31,16,.985) 9%, rgba(15,31,16,.88) 22%,
    rgba(15,31,16,.6) 38%, rgba(15,31,16,.26) 55%, transparent 72%); }
/* El logo va ENCIMA en HTML, no dentro de la imagen: los modelos destrozan el
   texto, y así queda nítido a cualquier tamaño y se puede recolocar. */
.cr-close-media .logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--disp); font-weight:600; font-size:clamp(22px,2.4vw,32px); letter-spacing:-.02em;
  color:#FFFFFF; display:inline-flex; align-items:center; line-height:1; z-index:2;
  text-shadow:0 2px 24px rgba(0,0,0,.5); }
.cr-close-media .logo .pill{ display:inline-flex; align-items:center; background:var(--lime); color:#0F0F0F;
  font-weight:700; font-size:.58em; line-height:1; border-radius:.34em;
  padding:.16em .4em .2em; margin-left:.16em; vertical-align:.06em; text-shadow:none; }
.cr-dark .cr-btn--ghost{ color:#F5F4F2; border-color:rgba(245,244,242,.24); }
.cr-dark .cr-btn--ghost:hover{ border-color:#F5F4F2; }

/* ---------- OTROS NÚCLEOS ---------- */
.cr-cross{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cr-cross a{ text-decoration:none; border-radius:18px; overflow:hidden; display:block;
  border:1px solid var(--line); background:var(--surface);
  transition:border-color .35s var(--e), transform .5s var(--e); }
.cr-cross a:hover{ border-color:rgba(15,31,16,.2); transform:translateY(-3px); }
.cr-cross .im{ aspect-ratio:16/9; overflow:hidden; background:var(--bg-2); }
.cr-cross .im img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.2s var(--e); }
.cr-cross a:hover .im img{ transform:scale(1.04); }
.cr-cross .bd{ padding:20px 22px 24px; }
.cr-cross .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); display:block; }
.cr-cross .t{ display:block; margin-top:8px; font-size:19px; font-weight:500;
  letter-spacing:-.02em; color:var(--ink); }

/* ---------- reveals ----------
   Los mueve reveal.js, que ya se carga en las páginas de núcleo: añade .in a
   todo lo que lleve .rv y tiene su propia red de seguridad a los 2,5 s. Aquí
   solo se define el recorrido, con la misma curva que todo lo demás. */
.cr-page .rv{ opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--e), transform .8s var(--e); transition-delay:var(--d,0s); }
.cr-page .rv.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .cr-page .rv{ opacity:1 !important; transform:none !important; }
  .cr-row-media img, .cr-cross .im img{ transition:none; }
}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .cr-page{ --sp:80px; }
  .cr-hero{ padding:120px 0 0; }
  .cr-stats{ grid-template-columns:repeat(2,1fr); }
  .cr-steps{ grid-template-columns:repeat(2,1fr); }
  .cr-cards{ grid-template-columns:1fr; }
  .cr-cross{ grid-template-columns:1fr; }
  .cr-row{ grid-template-columns:1fr; gap:32px; }
  /* al apilar, la imagen va SIEMPRE debajo del texto: con el order:2 de la fila
     invertida, una de cada dos quedaba con la foto arriba y el bloque perdía
     el ritmo de lectura */
  .cr-row--flip .cr-row-copy{ order:0; }
  .cr-case{ grid-template-columns:1fr; }
  /* El cierre se apila y la imagen pasa a banda: en columna estrecha, la foto
     al lado dejaba el titular en tres palabras por línea. */
  .cr-close{ grid-template-columns:1fr; }
  .cr-close-media{ order:-1; min-height:210px; }
  /* El mapa deja de ser mapa: a 700px de ancho las baldosas quedarían a 45px y
     los logos ilegibles. Las líneas se van, el centro sube y las baldosas se
     colocan solas en rejilla — conservan el encendido por turnos. */
  .int-stage{ position:static; aspect-ratio:auto; display:flex; flex-wrap:wrap;
    justify-content:center; gap:12px; }
  .int-lines{ display:none; }
  .int-hub{ position:static; transform:none; width:auto; aspect-ratio:auto;
    flex:0 0 100%; border:0; background:transparent; box-shadow:none;
    margin-bottom:10px; }
  .int-hub .logo{ font-size:22px; }
  .int-tile{ position:static; transform:none; width:74px; }
  .int-tile svg{ width:34px; height:34px; }
}
@media(max-width:600px){
  .cr-hero-media{ aspect-ratio:4/3; border-radius:18px; }
  .cr-chip{ left:14px; bottom:14px; font-size:13px; padding:9px 14px 9px 11px; }
  .cr-catch{ flex-direction:column; align-items:stretch; gap:12px; border-radius:22px;
    padding:16px; }
  .cr-catch input{ padding:6px 8px; }
  .cr-catch .cr-btn{ justify-content:center; }
  .cr-stats{ grid-template-columns:1fr; }
  .cr-card-metrics{ gap:22px; }
}

/* ---------- REJILLA DE CLIENTES (pagina /clientes) ----------
   Misma tarjeta que .cr-cross (portada + cuerpo) pero a dos columnas y con
   sitio para el sector y el chip de "en activo". Se reutiliza el patron en vez
   de inventar otro: son la misma pieza con distinta densidad. */
.cr-clients{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.cr-clients a{ text-decoration:none; border-radius:20px; overflow:hidden; display:block;
  border:1px solid var(--line); background:var(--surface);
  transition:border-color .35s var(--e), transform .5s var(--e); }
.cr-clients a:hover{ border-color:rgba(15,31,16,.2); transform:translateY(-3px); }
.cr-clients .im{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-2); }
.cr-clients .im img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.2s var(--e); }
.cr-clients a:hover .im img{ transform:scale(1.04); }
/* el chip va sobre la portada: dice que la cuenta sigue viva, que es la
   diferencia entre un portfolio y una lista de clientes */
.cr-clients .live{ position:absolute; left:16px; top:16px; display:inline-flex; align-items:center;
  gap:8px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:999px; padding:7px 14px 7px 11px;
  font-size:12.5px; font-weight:500; color:var(--ink); }
.cr-clients .live::before{ content:""; width:7px; height:7px; border-radius:50%; background:#4a6a2a; }
.cr-clients .bd{ padding:22px 24px 26px; }
.cr-clients .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#4a6a2a; display:block; }
.cr-clients .t{ display:block; margin-top:10px; font-size:clamp(18px,1.9vw,21px); font-weight:500;
  letter-spacing:-.02em; color:var(--ink); line-height:1.25; }
.cr-clients .go{ display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-size:14px; font-weight:600; color:var(--ink); }
.cr-clients .go svg{ width:14px; height:14px; transition:transform .35s var(--e); }
.cr-clients a:hover .go svg{ transform:translateX(4px); }
@media(max-width:820px){ .cr-clients{ grid-template-columns:1fr; } }

/* ==========================================================================
   PUENTE PARA LAS FICHAS DE CASO (/clientes/*)
   --------------------------------------------------------------------------
   Esas cuatro paginas tienen contenido propio de verdad —siete a nueve
   secciones con capturas reales del trabajo— asi que NO se rehacen: se
   alinean. Conservan su markup .cs-* y aqui se les pone encima el lenguaje
   nuevo: misma escala tipografica, mismos botones, mismos radios y cero
   sombras de color. El resultado es que se leen como hermanas de los nucleos
   sin tocar una linea de su copy.
   Se activa con .cs-page en el <body>, que convive con .nx-page.
   ========================================================================== */
.cs-page{
  --ink:#0F1F10; --ink-2:#5A625C; --ink-3:#8B928B;
  --bg:#F5F4F2; --bg-2:#EDEBE5; --surface:#FFFFFF; --dark:#0F1F10; --lime:#C7FF2E;
  --line:rgba(15,31,16,.10); --line-2:rgba(15,31,16,.06);
  --disp:"Geist",system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono",ui-monospace,monospace;
  --sp:112px; --e:cubic-bezier(.16,1,.3,1);
}
/* Titulares de portada al formato de los nucleos: peso 500, misma escala y a
   una sola tinta. El segundo tono gris-azulado de claro.css se queda fuera. */
.cs-page > main > header h1, .cs-page .pg-hero h1, .cs-page .cl-hero h1{
  font-weight:500 !important; letter-spacing:-.03em !important; line-height:1.06 !important;
  font-size:clamp(38px,5.2vw,64px) !important; color:var(--ink) !important; }
.cs-page > main > header h1 .lime, .cs-page .pg-hero h1 .lime, .cs-page .cl-hero h1 .lime{
  color:var(--ink) !important; background:none !important; }
.cs-page .cr-dark .lime{ color:var(--lime) !important; background:none !important; }

/* La cabecera deja de ser un bloque suelto y coge el aire de .cr-hero */
.cs-page .cs-hero{ padding:150px 0 0; }
.cs-page .cs-hero h1{ font-weight:500 !important; letter-spacing:-.03em !important;
  line-height:1.06 !important; font-size:clamp(38px,5.2vw,64px) !important; }
.cs-page .cs-lead{ font-size:clamp(16px,1.8vw,19px) !important; line-height:1.6 !important; }

/* Titulares de seccion a la escala de los nucleos: peso 500, no 600 */
.cs-page .cs-sec h2{ font-weight:500 !important; letter-spacing:-.03em !important;
  font-size:clamp(26px,3.4vw,38px) !important; line-height:1.08 !important; }
.cs-page .cs-sec h3, .cs-page .cs-bit h4{ font-weight:500 !important; }
.cs-page .cs-sec{ max-width:820px; }

/* Botones: la pastilla plana con chip. Los .nx-btn de estas paginas eran la
   forma vieja (relleno lima con la flecha suelta y sombra de color). */
.cs-page .nx-btn{ border-radius:999px !important; box-shadow:none !important;
  font-weight:600 !important; transition:background .3s var(--e), border-color .3s var(--e) !important; }
.cs-page .nx-btn--solid{ background:#C7FF2E !important; color:#0b170c !important;
  padding:14px 26px !important; }
.cs-page .nx-btn--solid:hover{ background:#d5ff5f !important; transform:none !important; }
.cs-page .nx-btn--ghost{ padding:14px 24px !important; }
.cs-page .nx-btn svg{ transition:transform .35s var(--e); }
.cs-page .nx-btn:hover svg{ transform:translateX(3px); }

/* Radios y filetes al valor del sistema nuevo */
.cs-page .cs-shot{ border-radius:22px !important; }
.cs-page .cs-bit{ border-radius:18px !important; }
.cs-page .cs-meta, .cs-page .cs-kpis{ border-radius:20px !important; overflow:hidden; }
/* Las cifras del caso, de un solo tono y sin el peso 600 de antes */
.cs-page .cs-kpis .m{ font-weight:500 !important; letter-spacing:-.035em !important; }

/* Cabecera reducida: para paginas de listado (clientes), donde el titular no
   compite con nada y no hay captura de correo. */
.cr-hero--min{ padding:150px 0 0; }
.cr-hero--min .cr-lead{ margin-top:20px; margin-bottom:8px; }

/* ==========================================================================
   SHOWCASE DE CABECERA (.cr-gal)
   --------------------------------------------------------------------------
   Cuatro tarjetas COLOCADAS y quietas, no una marquesina. La foto unica no
   decia lo suficiente y una fila en movimiento obliga a esperar a que pase lo
   que quieres mirar. Asi las cuatro se ven de golpe, pequenas, como indice de
   la pagina: cada una enlaza a su bloque de abajo, donde esta el detalle.
   ========================================================================== */
.cr-gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:44px; }
.cr-gal-card{ position:relative; aspect-ratio:3/4; border-radius:18px; overflow:hidden;
  background:var(--dark); text-decoration:none; display:block;
  transition:transform .5s var(--e); }
.cr-gal-card:hover{ transform:translateY(-4px); }
.cr-gal-card img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.4s var(--e); }
.cr-gal-card:hover img{ transform:scale(1.05); }
/* el velo: sin el, ni la pastilla ni el titular se leen sobre una foto real,
   que es mucho mas ruidosa que un render */
.cr-gal-card::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(6,14,7,.9) 0%, rgba(6,14,7,.3) 38%, transparent 62%),
             linear-gradient(to bottom, rgba(6,14,7,.45) 0%, transparent 24%); }
.cr-gal-card .tag{ position:absolute; left:13px; top:13px; z-index:2;
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:#F5F4F2; border:1px solid rgba(245,244,242,.4); border-radius:999px;
  padding:6px 11px; backdrop-filter:blur(4px); }
.cr-gal-card .bd{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 16px 18px; }
.cr-gal-card .t{ display:block; font-family:var(--disp); font-weight:500;
  font-size:clamp(15px,1.25vw,18px); letter-spacing:-.02em; line-height:1.15; color:#FFFFFF; }
.cr-gal-card .d{ display:block; margin-top:6px; font-size:12px; line-height:1.35; color:#BFD0B7; }

@media(prefers-reduced-motion:reduce){ .cr-gal-card, .cr-gal-card img{ transition:none; } }
@media(max-width:820px){ .cr-gal{ grid-template-columns:repeat(2,1fr); gap:12px; } }