/* ==========================================================================
   clientes.css — página de clientes y fichas de caso.
   Se carga DESPUÉS de pages.css y nucleo.css (de ahí vienen .rv, .nx-btn,
   .nx-head, .nx-cta…). Todo prefijado con .cl-.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO de clientes (sin imagen: aire + muro de logos)
   -------------------------------------------------------------------------- */
.cl-hero{ padding:132px 0 12px; position:relative; }
.cl-hero::before{ content:""; position:absolute; inset:-40% 0 40%; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 40%, rgba(199,255,46,.07), transparent 70%); }
.cl-hero h1{ font-family:var(--disp); font-weight:600; letter-spacing:-.035em; line-height:1.02;
  font-size:clamp(40px,7vw,82px); max-width:16ch; margin-top:0; text-wrap:balance; }
.cl-hero h1 .lime{ color:var(--lime); }
.cl-hero .cl-lead{ color:#cfdcc7; font-size:clamp(17px,2.05vw,21.5px); line-height:1.55; max-width:58ch; margin-top:24px; }

/* muro de logos en marquee continuo */
.cl-logos{ position:relative; margin-top:54px; padding:26px 0; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.cl-logos-track{ display:flex; align-items:center; width:max-content; animation:clMarquee 44s linear infinite; }
.cl-logos-track img{ flex:0 0 auto; height:calc(30px * var(--s,1)); width:auto; display:block; margin-right:62px;
  opacity:.62; filter:grayscale(1) brightness(1.7); transition:opacity .25s, filter .25s; }
.cl-logos-track img:hover{ opacity:1; filter:none; }
@keyframes clMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .cl-logos-track{ animation:none; } }

/* --------------------------------------------------------------------------
   CASO DESTACADO — tarjeta ancha con imagen de fondo
   -------------------------------------------------------------------------- */
.cl-feature{ position:relative; display:block; overflow:hidden; border-radius:30px; isolation:isolate;
  border:1px solid rgba(245,244,242,.12); min-height:440px; display:flex; align-items:flex-end;
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .3s; }
.cl-feature:hover{ transform:translateY(-4px); border-color:rgba(199,255,46,.45); }
.cl-feature-bg{ position:absolute; inset:0; z-index:-2; }
.cl-feature-bg img{ width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1); }
.cl-feature:hover .cl-feature-bg img{ transform:scale(1.04); }
.cl-feature::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,23,12,.28) 0%, rgba(11,23,12,.72) 52%, rgba(11,23,12,.95) 100%); }
.cl-feature-in{ position:relative; padding:44px; width:100%; }
.cl-feature .cl-brand{ height:34px; width:auto; margin-bottom:22px; }
.cl-feature h2{ font-size:clamp(26px,3.6vw,42px); letter-spacing:-.035em; max-width:20ch; line-height:1.06; }
.cl-feature .cl-sub{ color:#cbd8c3; font-size:17px; margin-top:14px; max-width:56ch; }
.cl-feature-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 34px; margin-top:30px;
  padding-top:26px; border-top:1px solid rgba(245,244,242,.16); }
.cl-kpi .m{ display:block; font-family:var(--disp); font-weight:600; font-size:clamp(22px,2.4vw,28px);
  letter-spacing:-.025em; color:var(--lime); line-height:1; }
.cl-kpi .l{ display:block; margin-top:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2); }
.cl-feature .cl-go{ margin-left:auto; font-family:var(--disp); font-weight:600; font-size:15px; color:var(--lime);
  display:inline-flex; align-items:center; gap:9px; }
.cl-feature:hover .cl-go svg{ transform:translateX(4px); }
.cl-go svg{ transition:transform .2s; }

/* --------------------------------------------------------------------------
   FILTRO por núcleo
   -------------------------------------------------------------------------- */
.cl-filter{ display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; }
.cl-filter button{ font-family:var(--disp); font-size:14px; font-weight:500; color:var(--muted); background:transparent;
  border:1px solid var(--line); border-radius:999px; padding:9px 18px; cursor:pointer;
  transition:color .18s, background .18s, border-color .18s; }
.cl-filter button:hover{ color:var(--ink); border-color:rgba(199,255,46,.35); }
.cl-filter button.is-on{ color:#0b170c; background:var(--lime); border-color:var(--lime); }

/* --------------------------------------------------------------------------
   REJILLA de casos — disposición estilo sierra.ai: la tarjeta ES la imagen,
   con el logo del cliente centrado y el contexto abajo. Foto muy velada para
   que el logo mande.
   -------------------------------------------------------------------------- */
.cl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px; }

.cl-card{ position:relative; display:block; overflow:hidden; isolation:isolate;
  aspect-ratio:4/3; border-radius:22px; border:1px solid rgba(245,244,242,.1); background:#0b170c;
  transition:transform .45s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .45s; }
.cl-card:hover{ transform:translateY(-5px); border-color:rgba(199,255,46,.45);
  box-shadow:0 40px 80px -46px rgba(0,0,0,1); }
.cl-card[hidden]{ display:none; }

.cl-card img.shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  filter:brightness(.46) saturate(.82); transition:transform 1.1s cubic-bezier(.22,1,.36,1), filter .45s; }
.cl-card:hover img.shot{ transform:scale(1.05); filter:brightness(.58) saturate(.95); }
/* velo: uniforma todas las fotos y despega logo y texto */
.cl-card::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(180deg, rgba(11,23,12,.55) 0%, rgba(11,23,12,.32) 42%, rgba(11,23,12,.9) 100%); }

/* logo centrado, en blanco, todos al mismo peso óptico */
.cl-brand{ position:absolute; inset:0; display:grid; place-items:center; padding:0 22px 34px; }
.cl-brand img{ max-height:calc(46px * var(--s,1)); max-width:66%; width:auto; height:auto; object-fit:contain;
  filter:brightness(0) invert(1); opacity:.96; transition:opacity .3s, transform .45s cubic-bezier(.22,1,.36,1); }
.cl-card:hover .cl-brand img{ opacity:1; transform:scale(1.04); }
.cl-brand .wordmark{ font-family:var(--disp); font-weight:600; font-size:clamp(20px,2.2vw,26px);
  letter-spacing:-.025em; color:#fff; text-align:center; }

/* chip "en activo" */
.cl-live{ position:absolute; right:14px; top:14px; z-index:2; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:#e6f5cc;
  background:rgba(11,23,12,.55); border:1px solid rgba(199,255,46,.34); border-radius:999px;
  padding:6px 10px; backdrop-filter:blur(10px); }
.cl-live i{ width:5px; height:5px; border-radius:50%; background:var(--lime); box-shadow:0 0 9px var(--lime);
  animation:clPulse 2.2s ease-in-out infinite; }
@keyframes clPulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.7);} }
@media(prefers-reduced-motion:reduce){ .cl-live i{ animation:none; } }

/* pie de la tarjeta */
.cl-foot{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px 20px 20px; }
.cl-sector{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(230,240,220,.62); }
.cl-t{ display:block; margin-top:8px; font-family:var(--disp); font-weight:600; font-size:16.5px;
  letter-spacing:-.02em; line-height:1.25; color:#f5f4f2; transition:color .25s; }
.cl-card:hover .cl-t{ color:var(--lime); }

/* --------------------------------------------------------------------------
   FICHA DE CASO
   -------------------------------------------------------------------------- */
.cs-hero{ padding:128px 0 0; }
.cs-brand{ height:40px; width:auto; margin:22px 0 6px; }
.cs-hero h1{ font-family:var(--disp); font-weight:600; letter-spacing:-.035em; line-height:1.03;
  font-size:clamp(34px,5.4vw,62px); max-width:20ch; margin-top:20px; text-wrap:balance; }
.cs-hero h1 .lime{ color:var(--lime); }
.cs-hero .cs-lead{ color:#cfdcc7; font-size:clamp(17px,2vw,21px); line-height:1.55; max-width:60ch; margin-top:22px; }
.cs-shot{ margin-top:44px; border-radius:24px; overflow:hidden; border:1px solid rgba(245,244,242,.13);
  box-shadow:0 50px 110px -60px rgba(0,0,0,1); }
/* height:auto NO es decorativo, es lo que impide que la imagen salga DEFORMADA.
   Los <img> llevan width/height en el marcado (hacen falta: sin ellos el
   navegador no reserva el hueco y la pagina pega un salto al cargar). Ese
   height del atributo entra como altura usada en pixeles, asi que con
   "width:100%" a secas la imagen quedaba con el ancho de la columna —1070px—
   y la altura literal del atributo —1000, 1375, hasta 1800px—. En JM Padel las
   cinco salian aplastadas o estiradas: una foto de 1800x1000 se veia en una
   caja de 1070x1000, y comunidad.webp, de 1620x1800, en una de 1070x1800.
   Con height:auto el navegador deduce la altura del aspect-ratio de los
   atributos y la proporcion se respeta. */
.cs-shot img{ width:100%; height:auto; display:block; }
.cs-shot figcaption{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-2); padding:14px 18px; border-top:1px solid var(--line-2); background:rgba(245,244,242,.02); }

/* ficha técnica */
.cs-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:40px;
  background:rgba(245,244,242,.1); border:1px solid rgba(245,244,242,.12); border-radius:20px; overflow:hidden; }
.cs-meta > div{ background:var(--bg); padding:22px 20px; }
.cs-meta dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }
.cs-meta dd{ font-family:var(--disp); font-weight:500; font-size:16.5px; color:var(--ink); margin-top:9px; line-height:1.35; }

/* índice de secciones */
.cs-toc{ display:flex; flex-wrap:wrap; gap:8px; margin-top:36px; }
.cs-toc a{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:8px 14px; transition:color .2s, border-color .2s; }
.cs-toc a:hover{ color:var(--lime); border-color:rgba(199,255,46,.4); }



/* trío de cifras dentro de una sección del caso */
.cs-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:32px;
  background:rgba(245,244,242,.1); border:1px solid rgba(245,244,242,.12); border-radius:18px; overflow:hidden; }
.cs-kpis > div{ background:var(--bg); padding:22px 20px; }
.cs-kpis .m{ display:block; font-family:var(--disp); font-weight:600; font-size:clamp(24px,3vw,32px);
  letter-spacing:-.03em; color:var(--lime); line-height:1; }
.cs-kpis .l{ display:block; margin-top:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2); }
@media(max-width:720px){ .cs-kpis{ grid-template-columns:1fr; } }

/* cuerpo del caso */
.cs-sec{ max-width:760px; }
.cs-sec .n{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--lime); }
.cs-sec h2{ font-size:clamp(25px,3.4vw,36px); letter-spacing:-.03em; margin-top:14px; }
.cs-sec p{ margin-top:16px; font-size:17px; }
.cs-sec h3{ font-family:var(--disp); font-weight:600; font-size:19px; color:var(--ink); margin-top:26px; letter-spacing:-.02em; }

/* cita */
.cs-quote{ border-left:2px solid var(--lime); padding:6px 0 6px 26px; margin-top:34px; max-width:700px; }
.cs-quote p{ font-family:var(--disp); font-size:clamp(19px,2.4vw,25px); line-height:1.4; letter-spacing:-.02em;
  color:var(--ink); max-width:none; }
.cs-quote .who{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2); margin-top:16px; }

/* rejilla de piezas entregadas */
.cs-bits{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px; }
.cs-bit{ border:1px solid rgba(245,244,242,.1); border-radius:18px; padding:22px 20px; background:rgba(245,244,242,.025); }
.cs-bit .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--lime); }
.cs-bit h4{ font-family:var(--disp); font-weight:600; font-size:17px; color:var(--ink); margin-top:11px; letter-spacing:-.02em; }
.cs-bit p{ font-size:14.5px; margin-top:9px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media(max-width:980px){
  .cl-grid{ grid-template-columns:repeat(2,1fr); }
  .cs-meta{ grid-template-columns:repeat(2,1fr); }
  .cs-bits{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:720px){
  .cl-hero{ padding-top:110px; }
  .cl-grid, .cs-bits{ grid-template-columns:1fr; }
  .cs-meta{ grid-template-columns:1fr; }
  .cl-feature{ min-height:0; border-radius:22px; }
  .cl-feature-in{ padding:26px 22px 28px; }
  .cl-feature .cl-go{ margin-left:0; }
  .cs-hero{ padding-top:104px; }
}

/* --------------------------------------------------------------------------
   NEORA — piezas de marca del caso (logotipo con el anillo partido, paleta)
   -------------------------------------------------------------------------- */
/* El anillo NO se centra en la caja: se apoya en la línea base y mide .52em,
   igual que en el SVG original de la marca. Con flex+center subía de más. */
.ne-logo{ display:inline-block; font-family:"Outfit",var(--disp); font-weight:300;
  font-size:var(--sz,54px); letter-spacing:-.01em; line-height:1; white-space:nowrap;
  color:var(--ne-ink,#0E4D52); }
.ne-logo svg{ display:inline-block; width:.52em; height:.52em; margin:0 .03em; vertical-align:baseline; }
.ne-paper{ background:#F4F0E8; color:#0E2C2A; border-radius:24px; padding:52px 40px;
  display:grid; place-items:center; border:1px solid rgba(14,44,42,.1); }
.ne-paper .tag{ margin-top:16px; font-family:"Outfit",var(--disp); font-size:15px; color:#4d6a66; letter-spacing:.01em; }

.ne-pal{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:26px; }
.ne-pal div{ border-radius:14px; padding:16px 14px 14px; min-height:104px; display:flex; flex-direction:column;
  justify-content:flex-end; border:1px solid rgba(245,244,242,.12); }
.ne-pal b{ font-family:var(--disp); font-weight:600; font-size:14px; }
.ne-pal small{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; opacity:.7; margin-top:3px; }

/* aviso de material pendiente (solo mientras falten las capturas) */
.cs-todo{ border:1px dashed rgba(199,255,46,.4); border-radius:18px; padding:22px 24px; margin-top:30px;
  background:rgba(199,255,46,.05); }
.cs-todo p{ margin:0; font-size:15px; color:var(--ink); max-width:none; }

/* --------------------------------------------------------------------------
   GALERÍAS de contenido dentro de una ficha de caso
   -------------------------------------------------------------------------- */
/* MURO de creatividades.
   Antes era una rejilla de CUADRADOS con object-fit:cover, y ahi estaba el
   destrozo: las piezas de Instagram no son cuadradas. Un reel 9:16 metido en un
   1:1 perdia el 44 % y un post 4:5 el 20 %, asi que se veian recortadas a media
   frase o directamente el fondo desenfocado y nada mas.

   Ahora es un muro por columnas y cada pieza CONSERVA SU FORMA: el reel se ve
   vertical y el post en 4:5, que es como se publicaron. Ademas se parece mas a
   lo que es —una parrilla de contenido— que la rejilla anterior. */
.cs-gal{ columns:4; column-gap:12px; margin-top:36px; }
.cs-gal figure{ break-inside:avoid; margin:0 0 12px; position:relative;
  border-radius:16px; overflow:hidden; border:1px solid rgba(245,244,242,.1);
  background:#0b170c; }
.cs-gal img{ width:100%; height:auto; display:block;
  transition:transform .9s cubic-bezier(.22,1,.36,1), filter .4s; filter:saturate(.92) brightness(.94); }
.cs-gal figure:hover img{ transform:scale(1.05); filter:saturate(1) brightness(1); }
.cs-gal figcaption{ position:absolute; left:0; right:0; bottom:0; padding:14px 14px 12px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#e9f2df;
  background:linear-gradient(180deg, transparent, rgba(11,23,12,.85)); opacity:0; transition:opacity .3s; }
.cs-gal figure:hover figcaption{ opacity:1; }

/* PAREJA de piezas verticales.
   Las capturas de móvil y las fichas de retrato vienen en 3:4, y a ancho
   completo se comen la pantalla: la de comunidad de JM llegaba a 1190px de
   alto ella sola. En dos columnas cada una cae a la mitad y la sección
   recupera el ritmo de las apaisadas. No lleva object-fit: se ven ENTERAS,
   que en una captura de producto recortar es perder justo lo que se enseña. */
.cs-duo{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:32px; }
.cs-duo figure{ margin:0; border-radius:20px; overflow:hidden;
  border:1px solid rgba(245,244,242,.12); box-shadow:0 50px 110px -60px rgba(0,0,0,1); }
.cs-duo img{ width:100%; height:auto; display:block; }
.cs-duo figcaption{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted-2); padding:14px 16px;
  border-top:1px solid var(--line-2); background:rgba(245,244,242,.02); }
@media(max-width:720px){ .cs-duo{ grid-template-columns:1fr; } }

/* tira horizontal con scroll (carrusel simple) */
.cs-strip{ display:flex; gap:12px; margin-top:32px; overflow-x:auto; padding-bottom:10px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.cs-strip::-webkit-scrollbar{ height:6px; }
.cs-strip::-webkit-scrollbar-thumb{ background:rgba(245,244,242,.18); border-radius:99px; }
/* La tira mezcla reels 9:16 y posts 4:5. Con un aspect-ratio fijo, el reel
   perdia el 30 %. Se fija el ALTO y se deja libre el ancho: cada pieza entra
   entera y la fila sigue cuadrando, que es como se monta una tira de contactos
   de toda la vida. */
/* El borde y el recorte van en la IMAGEN, no en el <figure>. Puestos en el
   figure con overflow:hidden y alto fijo, el pie de foto se quedaba recortado
   dentro y no se leia. Aqui el pie va debajo y visible, que en neora dice que
   pantalla es cada una y eso no puede depender de pasar el raton. */
.cs-strip figure{ margin:0; flex:0 0 auto; scroll-snap-align:start; }
.cs-strip img{ height:295px; width:auto; display:block; border-radius:16px;
  border:1px solid rgba(245,244,242,.1); background:#0b170c;
  transition:transform .8s cubic-bezier(.22,1,.36,1); }
.cs-strip figcaption{ margin-top:11px; font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }
.cs-strip figure:hover img{ transform:scale(1.05); }

@media(max-width:860px){
  .cs-gal{ grid-template-columns:repeat(2,1fr); }
  .cs-strip img{ height:235px; }
}

/* mockups de producto: van sobre fondo claro, así que se enmarcan suave */
.cs-mock{ margin-top:38px; border-radius:26px; overflow:hidden; border:1px solid rgba(245,244,242,.12);
  box-shadow:0 50px 110px -60px rgba(0,0,0,1); }
/* mismo caso que .cs-shot img: sin height:auto los tres mockups de neora
   salian estirados por el height del atributo */
.cs-mock img{ width:100%; height:auto; display:block; }
.cs-mock figcaption{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-2); padding:14px 18px; border-top:1px solid var(--line-2); background:rgba(245,244,242,.02); }

/* pantallas sueltas en tira, con marco de móvil */
.cs-screens{ display:flex; gap:16px; margin-top:32px; overflow-x:auto; padding-bottom:12px;
  scroll-snap-type:x mandatory; }
.cs-screens::-webkit-scrollbar{ height:6px; }
.cs-screens::-webkit-scrollbar-thumb{ background:rgba(245,244,242,.18); border-radius:99px; }
.cs-screens figure{ margin:0; flex:0 0 auto; width:220px; scroll-snap-align:start; }
.cs-screens .sc{ border-radius:22px; overflow:hidden; background:#1b1b1b; padding:6px;
  box-shadow:0 26px 50px -26px rgba(0,0,0,.9); transition:transform .5s cubic-bezier(.22,1,.36,1); }
.cs-screens figure:hover .sc{ transform:translateY(-6px); }
.cs-screens img{ width:100%; display:block; border-radius:17px; aspect-ratio:9/18; object-fit:cover; object-position:top center; }
.cs-screens figcaption{ margin-top:11px; font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2); text-align:center; }
@media(max-width:720px){ .cs-screens figure{ width:172px; } }