/* ==========================================================================
   /casos/ con logotipos (publicado el 30/10/26; vista previa del 29/10 en /casos-logos/, retirada). Plantilla: page-casos.php.
   El titular de cada escena (.xp-title.cs-lgt) es el logotipo del cliente, a una tinta (blanco, nunca naranja) y a su
   tamaño óptico: 'bw'/'bh' de inc/clientes-marcas.php por un factor --k que crece con la pantalla. Debajo, más pequeño,
   lo que hicimos. El movimiento es el de works-expand.css: el logotipo se va a la izquierda y la línea a la derecha.
   La sombra va en .xp-a, no en el logotipo: la máscara recortaría su propia sombra.
   · 30/10: el índice de arriba (.cs-idl), con los logotipos de los clientes en vez de los nombres y sin numeración. Cada
     logotipo a su tamaño óptico (--ki), en hueso al 70 %; al pasar, entero y algo más grande. Sustituye a las cápsulas
     de ma-centro.css solo en esta lista.
   ========================================================================== */

.xp-title.cs-lgt{gap:0}
/* un velo suave detrás del titular: el logotipo y la línea se leen sobre cualquier imagen */
.xp-title.cs-lgt::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:min(900px,96vw);height:calc(100% + 220px);
  transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(0,0,0,.42),rgba(0,0,0,.18) 60%,rgba(0,0,0,0));pointer-events:none}
.cs-lgt .xp-a{filter:drop-shadow(0 2px 30px rgba(0,0,0,.45))}
.cs-lg{--k:clamp(1.5px,.245vw,3.9px);display:block;width:calc(var(--bw) * var(--k));height:calc(var(--bh) * var(--k));max-width:84vw;
  background:#fff;-webkit-mask:var(--m) center / contain no-repeat;mask:var(--m) center / contain no-repeat}
.cs-lgt .xp-b{max-width:min(84vw,38ch);margin-top:clamp(18px,2vw,32px);font-family:var(--f-light);font-weight:300;
  font-size:clamp(15px,1.5vw,24px);line-height:1.3;letter-spacing:-.005em;color:#fff;text-wrap:balance;
  text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 22px rgba(0,0,0,.5)}

/* el índice: logotipos en una retícula de 8 columnas (dos filas para 16 casos; 4 en tableta vertical y móvil), sin
   numeración. Celdas iguales: ninguna fila queda con un logotipo suelto. El logotipo nunca pasa del ancho de su celda */
body.ma-c .cs-idx.cs-idl{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;max-width:1180px}
.cs-idl li{display:flex;min-width:0}
body.ma-c .cs-idx.cs-idl a{display:flex;flex:1;align-items:center;justify-content:center;min-width:0;min-height:clamp(66px,6.2vw,88px);
  padding:10px 12px;border:0;border-radius:14px;transition:background-color .35s ease}
body.ma-c .cs-idx.cs-idl a:hover{padding-left:12px;background:rgba(246,245,243,.05)}
.cs-ilg{--ki:.8;display:block;flex:none;width:calc(var(--bw) * var(--ki) * 1px);max-width:100%;height:calc(var(--bh) * var(--ki) * 1px);background:var(--bone);
  -webkit-mask:var(--m) center / contain no-repeat;mask:var(--m) center / contain no-repeat;opacity:.72;transition:opacity .35s ease,transform .5s cubic-bezier(.19,1,.22,1)}
.cs-idl a:hover .cs-ilg,.cs-idl a:focus-visible .cs-ilg{opacity:1;transform:scale(1.06)}
body.ma-c .cs-idx.cs-idl a:focus-visible{outline:1px solid var(--orange);outline-offset:-2px}
body.ma-c .cs-idx.cs-idl a.cs-itx{border:1px solid var(--line);border-radius:999px;min-height:0;padding:10px 18px}

@media (max-width:900px){
  body.ma-c .cs-idx.cs-idl{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .cs-lg{--k:clamp(1.4px,.43vw,2.1px)}
  body.ma-c .cs-idx.cs-idl{gap:2px}
  body.ma-c .cs-idx.cs-idl a{min-height:56px;padding:8px 6px}
  .cs-ilg{--ki:.58}
  .cs-lgt .xp-b{margin-top:14px;font-size:15px}
}