/* ═══════════════════════════════════════════════════════
   CLIENTES.CSS — franja de logos y casos reales
   WebClicStudio

   POR QUÉ ESTE ARCHIVO EXISTE
   El CSS de la franja vivía en pages.css, e index.php NO carga pages.css.
   La franja llevaba desde siempre sin estilo en la portada: logos apilados
   en una columna, a la izquierda, sin nada. Con seis nombres en texto casi
   no se notaba; con trece imágenes, saltaba a la vista. Un componente
   reutilizable no puede dar por hecho qué hojas cargó quien lo llama.

   QUIEN LLAME A wcs_franja_logos() O A wcs_seccion_casos() TIENE QUE
   ENLAZAR ESTE ARCHIVO. pruebas/enlaces.py avisa si se olvida.

   Cada var() lleva valor de respaldo: --line, --muted, --ink y --acc se
   definen en pages.css, que no todas las páginas cargan. Donde esté
   pages.css manda el tema; donde no, el respaldo.
   ═══════════════════════════════════════════════════════ */

/* ==========================================================================
   FRANJA DE CLIENTES — marquesina de logos a color
   ==========================================================================
   TRES DECISIONES Y POR QUÉ

   1) LOS LOGOS VAN A SU COLOR, NO EN BLANCO NI EN GRIS.
      La versión anterior pintaba los trece en blanco puro sobre fondo
      negro. Unificaba, sí, pero borraba justo lo que hace reconocible a
      una marca: el turquesa de SMED, el rojo de Vinces Fight, el azul
      marino de Inox Karen. Trece siluetas blancas se leen como un
      conjunto bonito y como ninguna empresa en concreto. La gracia de
      esta franja es que alguien reconozca un logo, no que la fila quede
      pareja.

   2) POR ESO EL FONDO ES CLARO.
      La mayoría de estos logos están hechos para papel: arte oscuro sobre
      blanco. En cuanto se les devuelve el color, el fondo negro deja de
      servir. Fondo claro + tarjeta blanca por logo es lo que hace que los
      trece se lean sin tocar ni un color. Además encaja con lo que tiene
      encima (.stats-bar, #F9FAFB) y debajo (.section--light) en la
      portada, que antes era un salto a negro y vuelta.

      Tres no pueden ir sobre blanco y llevan 'logo_fondo' en
      datos/clientes.php: RasecCorp ('oscuro', su azul cielo se perdería)
      y Jiahaoda y SALI ('propio', traen su propio fondo en el archivo).
      La tarjeta negra no es un parche: repetida tres veces por la cinta
      se lee como ritmo.

   3) CORRE, Y ESO RESUELVE UN PROBLEMA REAL.
      Trece logos en flex-wrap dejaban una segunda fila coja y obligaban a
      hacerlos pequeños para que cupieran. En cinta caben todos a tamaño
      grande, ocupan una sola línea, y el movimiento hace mirar la franja
      en vez de saltársela. Se para al pasar el cursor (o al tabular
      dentro) para poder leer y hacer clic sin perseguir nada.

   LOS LOGOS NO MIDEN TODOS LO MISMO, Y ES A PROPÓSITO
   Cada <img> trae su width/height del manifiesto datos/logos-medidas.php,
   calculado por _herramientas/preparar-logos.py para que un logo apaisado
   y uno cuadrado PESEN igual en la fila (el ojo compara superficies, no
   alturas). Por eso aquí no se fuerza una altura común: solo un tope, que
   entra en juego en pantallas pequeñas.
   ========================================================================== */

.cli-band {
    position: relative; overflow: hidden;
    /* Menos alto del que tenía. La cabecera se quedó en marca + titular (el
       subtítulo y la línea de cifras se quitaron desde index.php), así que
       74/78 px de relleno dejaban la franja medio vacía: mucho aire para dos
       líneas de texto y una cinta de logos. */
    padding: 56px 0 58px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
    border-block: 1px solid var(--line, #EAECF0);
}

/* El mismo filo que separa la barra de navegación de la portada
   (.navbar::after en css/layout.css). Aquí hace la misma falta y por el mismo
   motivo: encima de esta franja hay otra sección clara, y sin nada que marque
   el corte las dos superficies se funden en una sola mancha blanca. Un filo
   rojo con degradado y, debajo, una sombra que se desvanece en 20 px.

   Va con la clase del padre delante (.cli-band .cli-band__filo) porque más
   abajo hay un `.cli-band > * { position: relative; z-index: 1 }` con la MISMA
   especificidad: al venir después ganaba él, el filo se quedaba en
   position:relative -o sea, un <span> vacío de 0x0- y no se veía nada. */
.cli-band .cli-band__filo {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 20px;
    pointer-events: none;
    z-index: 2;
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(224,18,27,.30) 18%,
            rgba(224,18,27,.75) 50%,
            rgba(224,18,27,.30) 82%,
            transparent 100%) top / 100% 1.5px no-repeat,
        linear-gradient(180deg, rgba(15,23,42,.085), rgba(15,23,42,0));
}
/* Un halo rojo muy tenue: quita el blanco plano sin llamar la atención. */
.cli-band::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(58% 80% at 50% -18%, rgba(224,18,27,.075), transparent 68%),
        radial-gradient(44% 64% at 88% 116%, rgba(71,85,105,.085), transparent 70%);
}
.cli-band > * { position: relative; z-index: 1; }

/* ---------- Encabezado ----------
   Antes el título era un eyebrow de 11 px en gris y no mandaba nada. Ahora
   hay tres niveles de verdad: marca, titular y explicación. */
.cli-band__eyebrow {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
    color: var(--acc, #E0121B); margin: 0 0 16px;
}
.cli-band__eyebrow::before,
.cli-band__eyebrow::after {
    content: ''; width: 26px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(224,18,27,.55));
}
.cli-band__eyebrow::after { background: linear-gradient(90deg, rgba(224,18,27,.55), transparent); }

.cli-band__label {
    text-align: center; margin: 0 auto 12px; max-width: 20ch;
    font-size: clamp(25px, 3.2vw, 36px); font-weight: 900;
    line-height: 1.12; letter-spacing: -.022em; color: var(--ink, #0F172A);
}
.cli-band__sub {
    text-align: center; margin: 0 auto; max-width: 52ch;
    font-size: 15.5px; line-height: 1.65; color: var(--muted, #64748B);
}

/* Cifra de apoyo: sale contada de datos/clientes.php, no escrita a mano. */
.cli-band__dato {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; flex-wrap: wrap;
    margin: 20px 0 0; font-size: 12px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #64748B);
}
.cli-band__dato b { color: var(--ink, #0F172A); font-weight: 900; font-size: 14px; letter-spacing: 0; }
.cli-band__dato i { width: 3px; height: 3px; border-radius: 50%; background: rgba(100,116,139,.5); }

/* ---------- La cinta ----------
   La máscara difumina los dos extremos: sin ella los logos aparecen y
   desaparecen de golpe contra el borde de la pantalla y se nota el corte.

   El track lleva la lista DOS veces (ver partials/clientes.php) y la
   animación lo desplaza el 50 % exacto de su ancho: al acabar, el clon
   está donde estaba el original y el bucle no tiene costura. Por eso el
   hueco entre tarjetas vive en el gap de .cli-marquee__fila y se repite
   como padding-right de la propia fila; si el hueco de la junta no fuera
   idéntico al de dentro, el salto se vería una vez por vuelta.

   La duración llega como --cli-vel desde PHP, calculada por número de
   logos para que la velocidad no cambie al entrar un cliente nuevo. */
.cli-marquee {
    margin-top: 34px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.cli-marquee__track {
    display: flex; width: max-content;
    will-change: transform;
    animation: cliDesliza var(--cli-vel, 56s) linear infinite;
}
/* Parar al pasar el cursor no es un adorno: es lo que permite leer un logo
   y hacer clic en él. focus-within hace lo mismo para quien navega con el
   teclado, que si no perseguiría un enlace en movimiento. */
.cli-marquee:hover .cli-marquee__track,
.cli-marquee:focus-within .cli-marquee__track { animation-play-state: paused; }

.cli-marquee__fila { display: flex; align-items: center; gap: 18px; padding-right: 18px; }

@keyframes cliDesliza {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- Cada tarjeta ---------- */
.cli-logo {
    flex: 0 0 auto;
    min-width: 200px; height: 118px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 30px; border-radius: 18px;
    background: #fff;
    border: 1px solid var(--line, #EAECF0);
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 26px -20px rgba(15,23,42,.45);
    text-decoration: none;
    transition: transform .22s, box-shadow .22s, border-color .22s;
}
.cli-logo:hover {
    transform: translateY(-4px);
    border-color: rgba(224,18,27,.3);
    box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 20px 34px -20px rgba(15,23,42,.5);
}

/* AQUÍ NO SE TOCAN NI width NI height, Y ES LO IMPORTANTE DE ESTA REGLA.

   Cada <img> trae su width/height del manifiesto, que es la medida en que
   ese logo pesa lo mismo que los demás (ver la cabecera). Poner
   'width:auto;height:auto' aquí pisaba esos atributos y devolvía a cada
   imagen su tamaño natural, que es el del archivo: todas acababan al tope
   de 78 px de alto y Emfocap salía de 318 px de ancho al lado de un Camel
   de 66. Justo lo contrario de lo que calcula el script.

   El alto lo pone 'img { height:auto }' de main.css, que con el ancho del
   atributo saca el alto por la proporción real del archivo: exactamente la
   medida del manifiesto. max-height es solo una red por si algún día entra
   un logo que no esté en el manifiesto y venga sin medidas. */
.cli-logo img {
    display: block;
    max-width: 100%; max-height: 78px;
}

/* Los dos modificadores van con la clase repetida (.cli-logo.cli-logo--x).
   No es un tic: los @media de abajo cambian min-width y max-height de
   .cli-logo, y con una sola clase ganarian por venir despues en el archivo.
   Una tarjeta 'propio' volveria a tener ancho fijo y relleno en el movil, que
   es justo lo que no debe tener. */

/* Logo demasiado claro para el blanco: RasecCorp. */
.cli-logo.cli-logo--oscuro {
    background: linear-gradient(158deg, #171A22 0%, #0A0B0F 100%);
    border-color: rgba(255,255,255,.10);
}
.cli-logo.cli-logo--oscuro:hover { border-color: rgba(255,255,255,.26); }

/* El archivo trae su propio fondo: Jiahaoda y SALI. La imagen ocupa la
   tarjeta entera, así que su fondo ES la tarjeta y no queda ese rectángulo
   dentro de otro que delata un logo mal recortado. La tarjeta no fija
   ancho: lo pone la propia imagen al estirarse a lo alto. */
.cli-logo.cli-logo--propio {
    padding: 0; min-width: 0; overflow: hidden;
    background: #0A0B0F; border-color: rgba(255,255,255,.10);
}
.cli-logo.cli-logo--propio:hover { border-color: rgba(255,255,255,.26); }
.cli-logo.cli-logo--propio img {
    align-self: stretch;
    height: 100%; width: auto;
    max-height: none; max-width: none;
}

/* Marca denominativa: el hueco mientras no llega el archivo del logo. */
.cli-logo__txt {
    font-size: 16px; font-weight: 800; letter-spacing: -.01em;
    line-height: 1.25; text-align: center; color: var(--ink, #0F172A);
}

/* En pantalla pequeña encoge la TARJETA, no el logo. Encoger el logo es lo
   que hace todo el mundo y es lo que convierte la franja en trece manchas
   ilegibles en el móvil; y como esto es una cinta y no una rejilla, una
   tarjeta ancha no rompe nada: se pasa sola. */
@media (max-width: 900px) {
    .cli-logo { min-width: 176px; height: 110px; padding: 0 24px; border-radius: 16px; }
    .cli-marquee__fila { gap: 14px; padding-right: 14px; }
}
@media (max-width: 560px) {
    .cli-band { padding: 40px 0 42px; }
    .cli-marquee { margin-top: 24px; }
    .cli-logo { min-width: 148px; height: 104px; padding: 0 18px; border-radius: 14px; }
    .cli-logo__txt { font-size: 13.5px; }
    .cli-marquee__fila { gap: 11px; padding-right: 11px; }
    .cli-band__dato { font-size: 11px; }
}

/* Quien pide menos movimiento no ve ninguno: la cinta se convierte en la
   rejilla centrada de siempre y el clon desaparece, que si no saldría
   cada logo repetido dos veces. */
@media (prefers-reduced-motion: reduce) {
    .cli-marquee {
        padding-inline: 20px;
        -webkit-mask-image: none; mask-image: none;
    }
    .cli-marquee__track { width: auto; animation: none; }
    .cli-marquee__fila { flex-wrap: wrap; justify-content: center; padding-right: 0; }
    .cli-marquee__fila + .cli-marquee__fila { display: none; }
}

/* ---------- Casos reales ---------- */
.casos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 26px; }

.caso-card {
    background: #fff; border: 1px solid var(--line, #EAECF0); border-radius: var(--radius-lg, 16px);
    padding: 28px; display: flex; flex-direction: column; gap: 16px;
    transition: transform .2s, box-shadow .2s;
}
.caso-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -18px rgba(15,23,42,.22); }

.caso-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.caso-card__logo { max-height: 30px; max-width: 130px; width: auto; }
.caso-card__marca { font-size: 15px; font-weight: 800; color: var(--ink, #0F172A); }
.caso-card__rubro {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--acc, #E0121B); background: var(--acc-s, #FEF2F2); padding: 3px 9px; border-radius: var(--radius-full);
}

.caso-card__titular {
    font-size: 21px; font-weight: 900; line-height: 1.25; letter-spacing: -.02em;
    color: var(--ink, #0F172A); margin: 0;
}

.caso-card__bloque p { font-size: 14.5px; line-height: 1.65; color: var(--muted, #64748B); margin: 4px 0 0; }
.caso-card__et {
    display: inline-block; font-size: 10.5px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
}
.caso-card__et--problema { color: #B45309; }
.caso-card__et--solucion { color: #15803D; }

.caso-card__resultados {
    display: flex; flex-wrap: wrap; gap: 10px;
    padding: 16px 0; border-block: 1px dashed var(--line, #EAECF0);
}
.caso-card__res { flex: 1 1 90px; }
.caso-card__cifra { font-size: 24px; font-weight: 900; color: var(--acc, #E0121B); margin: 0; line-height: 1.1; }
.caso-card__texto { font-size: 12px; color: var(--muted, #64748B); margin: 2px 0 0; line-height: 1.35; }

.caso-card__cita { margin: 0; padding-left: 14px; border-left: 3px solid var(--acc, #E0121B); }
.caso-card__cita p { font-size: 14.5px; font-style: italic; color: var(--ink, #0F172A); margin: 0; line-height: 1.6; }
.caso-card__cita cite { display: block; font-size: 12.5px; font-style: normal; color: var(--muted, #64748B); margin-top: 6px; }

.caso-card__link {
    margin-top: auto; align-self: flex-start;
    font-size: 14px; font-weight: 700; color: var(--acc, #E0121B); text-decoration: none;
    display: inline-flex; align-items: center; gap: 7px;
}
.caso-card__link i { transition: transform .18s; }
.caso-card__link:hover i { transform: translateX(4px); }

@media (max-width: 640px) {
    .caso-card { padding: 22px; }
    .caso-card__titular { font-size: 19px; }
}