/* ============================================================================
   06bis-CLIENTES — sección «Clientes» (§9 del contrato)
   Origen: ds-v2/code/prototipo/clientes.html, con la metodología de Quiénes Somos.
   ----------------------------------------------------------------------------
   Traído aplicando POR ADELANTADO las trampas de Quiénes Somos:
     1. CERO background en la sección  -> se ve el canvas .fondo-neural
     2. CERO padding de `.seccion`     -> el scroller llega de borde a borde
     3. SIN html{}/body{} globales     -> no pisa el resto de la web
     4. Todo acotado a `.sec-clientes` -> `.portada` suelta ES la portada de la web
     5. CERO tokens nuevos, CERO colores literales (mapa abajo)
     6. Sin font-style:italic          -> Outfit no tiene itálica
   ----------------------------------------------------------------------------
   TRAMPA PROPIA DE ESTE ARCHIVO, para no repetirla:
   Acotar selectores con un `replace` a lo bruto produjo DOS desastres:
     (a) se comió bloques enteros (marquesina, keyframes) porque sus selectores
         van en varias líneas -> la cinta no existía y el check decía OK porque
         solo miraba `animationName`, que el JS escribe inline;
     (b) generó `.sec-clientes .marquesina-sec .sec-clientes .cinta`, un selector
         que no casa con NADA -> media sección salía sin estilos.
   Ahora se acota con un parser de bloques y SOLO el primer compuesto.
   Y el check 22 mide el DESPLAZAMIENTO REAL, no el nombre de la animación.
   ============================================================================ */

/* --- Mapa de variables del proyecto viejo -> tokens de sysnetia ---------------
   --papel      -> --fondo            --tinta      -> --fg
   --papel-alt  -> --superficie       --gris       -> --gris-400
   --tarjeta-bg -> --superficie       --filete     -> --borde
   --acento     -> --acento           --acento-rgb -> --acento-rgb
   --naranja    -> --acento           --azul       -> --secundario-texto
   ---------------------------------------------------------------------------- */

/* RESET ACOTADO — pero SOLO box-sizing y margin.
   Tenía tambien `padding:0`, y eso APLANABA el padding de la portada compartida:
   `.portada-sec__ficha` se quedaba en paddingTop 0 mientras Quienes tenia 26px,
   porque ese `*` (0-0-1 + clase = 0-1-0) empata con `.portada-sec__ficha` (0-1-0)
   y gana por orden de hoja. Resultado: la ficha de Clientes pegada al filete.
   Un reset de seccion NO debe tocar padding: `box-sizing` y `margin` bastan. */
.sec-clientes *, .sec-clientes *::before, .sec-clientes *::after{box-sizing:border-box}
/* MARCO: copiado EXACTO de .quien-portada (06-quienes.css:96).
   Tenía min-height:88svh y padding-bottom:60px "a ojo"; Quienes usa 100svh y 70px.
   Esa es la razón de que una portada empezara en 99px y la otra en 86px. */
.sec-clientes .cli-portada{min-height:auto;position:relative;display:flex;flex-direction:column;
  justify-content:flex-start;
  /* padding-TOP fuera: lo manda `--aire-cabecera` desde 06por-portada.css.
     Aqui habia un literal duplicado clamp(80px,10vw,140px) que hacia que
     cada seccion que no lo copiara (Contacto) midiera distinto. */
  padding-inline:clamp(22px,6vw,90px);padding-bottom:70px}
/* ELIMINADO A PETICIÓN DE OZ (2026-10-23): «en el unico lugar que no lo veo
   es en clientes que hay un background que no habia visto y debe desaparecer».

   Aquí vivía un ::before con un radial-gradient de --fondo casi opaco (96% y
   88%), que pintaba una mancha oscura sobre la cabecera de la sección y TAPABA
   el isotipo de fondo del sitio. Además contradecía la regla 1 de este mismo
   archivo, escrita doce líneas más arriba: «CERO background en la sección ->
   se ve el canvas .fondo-neural». Era una excepción que nadie había declarado.

   No se sustituye por otra cosa: la sección queda transparente y se ve el fondo
   real (canvas neural + isotipo), igual que las otras siete.

   La regla siguiente (.cli-portada > *) sigue haciendo falta: pone el contenido
   en --z-contenido para que quede por encima del fondo. */

.sec-clientes .cli-portada > *{position:relative;z-index:var(--z-contenido)}
.sec-clientes .cli-portada > *{position:relative;z-index:var(--z-contenido)}
/* El capnum vive en css/06por-portada.css (.portada-sec .capnum). */
/* La ceja NO se redefine aqui: vive en css/06por-portada.css (.portada-sec__ceja).
   Tenia margin-bottom:clamp(28px,4vw,46px) frente a los clamp(24px,4vw,44px) de
   Quienes: 2px de diferencia que se notaban. */

/* El filete de la ceja: flex:1 con max-width 120px, como Quienes. Con width fijo
   el "Capítulo 02" se iba a 1218px porque nada lo empujaba. */
/* La PORTADA (ceja, título, entradilla y ficha) YA NO SE ESCRIBE AQUÍ.
   Vive una sola vez en css/06por-portada.css con las clases .portada-sec__*.
   Antes estaba duplicada en esta hoja y en 06-quienes.css, y por eso divergía:
   peso 800 aquí y 400 allí, entradilla 8ch más ancha, valor de ficha 700 vs 600.
   REGLA: no se vuelve a duplicar. Si Clientes necesita una variante, se añade
   una modificadora y se documenta en el contrato. */

.sec-clientes .marquesina-sec{
  /* SIN padding-top: la portada ya pone --aire-ficha debajo de la ficha y aqui
     habia ademas clamp(34px,4.5vw,56px). Se sumaban los dos y el ojo veia un
     hueco mayor que el de Quienes. Ahora el aire que separa la ficha de la cinta
     es SOLO --aire-ficha, igual en las dos secciones. */
  /* SIN border-top: el filete ocupaba 1px real y sumaba al aire de la portada
     (71px en Clientes frente a 70 en Quienes). Se dibuja con inset box-shadow,
     que NO ocupa espacio en el flujo. */
  padding:0 0 clamp(34px,4.5vw,56px);
  box-shadow:inset 0 1px 0 var(--borde);border-bottom:1px solid var(--borde);
  background:color-mix(in srgb, var(--fondo) 55%, transparent);position:relative;overflow:hidden}
.sec-clientes .marquesina-sec .cinta{position:relative;display:flex;flex-direction:column}
.sec-clientes .marquesina-sec .fila{
  display:flex;overflow:hidden;position:relative;
  /* Aire vertical: sin esto el `.logo-item` llenaba la fila al 100% y en
     tablet los logos salian CORTADOS por arriba y por abajo. */
  padding-block:var(--e-3);
}
.sec-clientes .marquesina-sec .fila::before, .sec-clientes .marquesina-sec .fila::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(50px,9vw,140px);
  z-index:var(--z-contenido);pointer-events:none}
.sec-clientes .marquesina-sec .fila::before{left:0;
  background:linear-gradient(90deg,var(--superficie),transparent)}
.sec-clientes .marquesina-sec .fila::after{right:0;
  background:linear-gradient(270deg,var(--superficie),transparent)}
.sec-clientes .marquesina-sec .pista{display:flex;gap:clamp(38px,5vw,72px);align-items:center;
  flex-shrink:0;padding-right:clamp(38px,5vw,72px);animation:deslizar 46s linear infinite;
  will-change:transform}
.sec-clientes .marquesina-sec .cinta:hover .pista{animation-play-state:paused}
@keyframes deslizar{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
.sec-clientes .marquesina-sec .logo-item{
  flex-shrink:0;
  display:block;                 /* NO grid: con grid la img escapaba de la caja */
  position:relative;
  overflow:hidden;               /* red de seguridad: nada puede salirse */
  height:clamp(56px,6.5vw,92px);
  width:clamp(120px,14vw,200px);
  opacity:.78;
  transition:opacity .35s ease,transform .35s ease}

/* ===== LA IMAGEN, CONTENIDA DE VERDAD =====
   Antes: `max-height:88%` sobre un padre `display:grid`. Ese porcentaje se
   resolvía contra una caja que la propia imagen agrandaba, así que NO contenía
   nada: medido, la img (logo cuadrado del IVIC) salía a 97px dentro de un item
   de 83px y desbordaba la fila. Con width/height 100% + object-fit:contain la
   imagen escala SIEMPRE dentro de su caja y conserva su proporción. */
.sec-clientes .marquesina-sec .logo-item img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  padding:6px;
  display:block;
  filter:none;
  box-sizing:border-box}
.sec-clientes .marquesina-sec .logo-item:hover{opacity:1;transform:scale(1.07)}
@media(prefers-reduced-motion:reduce){
  .sec-clientes .marquesina-sec .pista{animation:none!important}
}
.sec-clientes .casos{padding:clamp(56px,8vw,110px) clamp(22px,6vw,90px) clamp(50px,7vw,90px)}
.sec-clientes .casos .cabeza{margin-bottom:clamp(30px,4vw,48px)}
.sec-clientes .casos h2{font-size:clamp(1.7rem,3.6vw,3rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.08;margin-top:14px;max-width:20ch}
.sec-clientes .casos h2 em{color:var(--acento);font-style:normal}
.sec-clientes .rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(16px,2.2vw,26px)}
.sec-clientes .caso{position:relative;display:flex;flex-direction:column;
  padding:clamp(24px,2.6vw,34px);border-radius:6px;
  background:var(--superficie);border:1px solid var(--borde);
  overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),
    border-color .4s ease,background-color .4s ease;
  min-height:clamp(300px,32vw,360px)}
.sec-clientes .caso::before{content:"";position:absolute;inset:0;z-index:var(--z-fondo);pointer-events:none;
  background:radial-gradient(circle at 100% 0%,
    rgba(var(--acento-rgb),.13) 0%,transparent 62%);
  opacity:0;transition:opacity .45s ease}
.sec-clientes .caso:hover{transform:translateY(-6px);border-color:rgba(var(--acento-rgb),.55)}
.sec-clientes .caso:hover::before{opacity:1}
.sec-clientes .caso > *{position:relative;z-index:var(--z-contenido)}
.sec-clientes .caso .logo{height:clamp(46px,5vw,62px);margin-bottom:clamp(20px,2.4vw,30px);
  display:flex;align-items:center}
.sec-clientes .caso .logo img{max-height:100%;max-width:200px;width:auto;object-fit:contain;
  transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.sec-clientes .caso:hover .logo img{transform:scale(1.04)}
.sec-clientes .caso .nom{font-size:clamp(1.05rem,1.7vw,1.32rem);font-weight:800;letter-spacing:-.02em;
  margin-bottom:6px}
.sec-clientes .caso .sector{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gris-400);font-weight:700;margin-bottom:clamp(16px,2vw,22px)}
.sec-clientes .caso .hecho{font-size:.92rem;line-height:1.62;color:var(--gris-400);flex:1}
.sec-clientes .caso .hecho b{color:var(--fg);font-weight:600}
.sec-clientes .caso .pie{display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-top:clamp(20px,2.4vw,26px);padding-top:16px;
  border-top:1px solid var(--borde)}
.sec-clientes .caso .servicio{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acento);font-weight:700}
.sec-clientes .caso .ano{font-size:.72rem;color:var(--gris-400);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.sec-clientes .caso .ano.vivo{color:var(--acento);display:inline-flex;align-items:center;gap:7px}
.sec-clientes .caso .ano.vivo::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--acento);box-shadow:0 0 0 0 rgba(var(--acento-rgb),.6);
  animation:latir 2.2s ease-out infinite}
@keyframes latir{
  0%{box-shadow:0 0 0 0 rgba(var(--acento-rgb),.55)}
  70%{box-shadow:0 0 0 7px rgba(var(--acento-rgb),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--acento-rgb),0)}
}
.sec-clientes .cierre{text-align:center;padding:clamp(50px,7vw,90px) clamp(22px,6vw,90px);
  border-top:1px solid var(--borde)}
.sec-clientes .cierre p{font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.55;color:var(--gris-400);
  max-width:34ch;margin:0 auto clamp(24px,3vw,34px);font-weight:400}
.sec-clientes .cierre p b{color:var(--fg);font-weight:700}
.sec-clientes .cierre .btn{display:inline-block;cursor:pointer;border:none;font-family:inherit;padding:16px 42px;border-radius:100px;
  background:var(--acento);color:var(--fondo);text-decoration:none;
  font-weight:700;font-size:.92rem;letter-spacing:.01em;
  transition:transform .25s ease,box-shadow .25s ease;
  box-shadow:0 14px 40px rgba(var(--acento-rgb),.3)}
.sec-clientes .cierre .btn:hover{transform:translateY(-3px);box-shadow:0 20px 54px rgba(var(--acento-rgb),.46)}
@media(max-width:860px){
  /* Mismo aire que Quiénes (gap fluido), no 26/34px fijos. */
  /* El capnum en tablet lo gobierna css/06por-portada.css. */
}
@media(max-width:520px){
  /* PORTADA EN TELEFONO — igual que .quien-portada (06-quienes.css:314):
     pt/pb, gap... Y `min-height:100svh` SIN anular, que es lo que hacia la
     diferencia gorda: con min-height:0 la portada se encogia a 642px y todo lo
     de debajo (marquesina, casos) se apilaba pegado a la cabecera. */
  .sec-clientes .cli-portada{
    padding-bottom:52px;justify-content:flex-start;
  /* `gap` FUERA (ver 06-quienes.css): sumaba filas en la columna. */
  row-gap:0}
  /* La ficha en telefono la resuelve css/06por-portada.css (.portada-sec__ficha).
     Aqui habia un override con `margin-top:clamp(28px,6vw,40px);padding-top:20px`
     que quedo HUERFANO (sin selector) al borrar la regla, y desbalanceaba las
     llaves del archivo: 70 abren / 71 cierran. */
  .sec-clientes .ficha div{display:flex;justify-content:space-between;align-items:baseline;
    gap:16px;padding:14px 0;border-bottom:1px solid var(--borde)}
  .sec-clientes .ficha div:last-child{border-bottom:none}
  .sec-clientes .rejilla{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  /* ACOTADO. Antes era `*{animation:none}` y `html{scroll-behavior:auto}`:
     eso apagaba las animaciones de TODA la web desde el CSS de una sección. */
  .sec-clientes *{animation:none!important;transition:none!important}
  .caso:hover{transform:none}
}

/* ============================================================================
   LA SECCIÓN: ocupa la ventana menos el pie, igual que Quiénes Somos.
   ============================================================================ */
.sec-clientes{
  position: fixed;
  inset: 0;
  bottom: var(--alto-pie, 0px);
  padding: 0;
  overflow: hidden;
  color: var(--fg);
}
.sec-clientes__scroll{
  height: 100%;
  overflow-y: auto;
  /* overflow-x:hidden como en `.sec-quienes__scroll`. Sin esta linea la barra
     de scroll vertical ocupaba ancho y empujaba el header 13px: la portada de
     Clientes empezaba en x=0 y la de Quienes en x=13. Ese era el desfase. */
  overflow-x: hidden;
  overscroll-behavior: contain;
  /* SIN `scrollbar-width:thin`. Quienes no lo tiene, y una barra de 10px frente
     a otra de 15px desplaza TODO el contenido 5px: las portadas empezaban en
     X distintas (86 vs 99) y parecia un fallo de padding cuando era la barra.
     Mismo grosor de barra en las dos = misma X. */
  scrollbar-color: var(--borde-fuerte) transparent;
}
.sec-clientes .pendiente{ opacity: .45; }

@media (max-height: 640px){
}