/* ============================================================
   CLIENTES — estilos propios (.cli-*)
   Se apoya en main.css y en divisiones.css (hero, .div-desc, .div-kicker).
   ============================================================ */

/* divisiones.css justifica el lead del hero; el de aquí es una línea corta. */
.page-cli .div-hero__lead {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ── Intro + cifras (claro) ── */
.cli-intro {
  position: relative;
  background: #f5f3ef;
  padding-block: clamp(4.5rem, 9vw, 8rem);
}
/* 2 col: texto izq · cifras der (antes las cifras iban debajo, a lo ancho). */
.cli-intro__inner {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.cli-intro__title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  color: #12172a;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-top: 0.3em;
}
.cli-intro .div-em { color: #c98a1e; }
.cli-intro__text {
  position: relative;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  color: #4a5470;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.75;
  text-align: justify;
}
.cli-intro__text::before {
  content: "\201C";
  position: absolute;
  top: -0.15em;
  left: 0;
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
  color: #c98a1e;
}
/* Nota "Te presentamos a algunos de nuestros clientes…" */
.cli-intro__note {
  margin-top: clamp(1rem, 2vw, 1.35rem);
  color: #12172a;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  font-weight: 600;
}

/* 2×2 a la derecha: en 4 col se estrujaban contra el texto. */
.cli-cifras {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  list-style: none;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 40px -18px rgba(18,23,42,0.28);
}
.cli-cifra {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
}
.cli-cifra__num {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  color: #c98a1e;
  line-height: 1;
  letter-spacing: -0.02em;
}
.cli-cifra__label {
  font-size: clamp(0.74rem, 0.95vw, 0.86rem);
  color: #4a5470;
  text-wrap: balance;
}

/* ── Bloque de sector ── */
.cli-sector {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 7rem);
}
.cli-sector__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}
.cli-sector__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.cli-sector__title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-top: 0.3em;
}
.cli-sector__sub {
  position: relative;
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.75;
}
.cli-sector__sub::before {
  content: "\201C";
  position: absolute;
  top: -0.15em;
  left: 0;
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
}

/* Tema OSCURO (--bg + aurora ámbar; --bg-2 es azul y se ve ajeno) */
.cli-sector--dark { background: var(--bg); }
.cli-sector--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 32% at 20% 14%, rgba(240,164,66,0.18) 0%, transparent 64%),
    radial-gradient(40% 30% at 84% 12%, rgba(251,201,90,0.12) 0%, transparent 62%);
  filter: blur(28px);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
@media (max-width: 768px) {
  /* Animar blur sobre área grande lagea en GPU móvil */
  .cli-sector--dark::before { filter: none; will-change: auto; transform: none; }
}
.cli-sector--dark .cli-sector__title { color: var(--ink-100); }
.cli-sector--dark .div-em { color: var(--dorado); }
.cli-sector--dark .cli-sector__sub { color: var(--ink-200); }
.cli-sector--dark .cli-sector__sub::before { color: var(--dorado); }

/* Tema CLARO (hueso) */
.cli-sector--light { background: #f5f3ef; }
.cli-sector--light .cli-sector__title { color: #12172a; }
.cli-sector--light .div-em { color: #c98a1e; }
.cli-sector--light .cli-sector__sub { color: #4a5470; }
.cli-sector--light .cli-sector__sub::before { color: #c98a1e; }

/* ── Rejilla de logos ──
   Los SVG son a COLOR original y muchos traen tinta oscura → la card es
   siempre blanca, en los dos temas (igual que los sellos de certificaciones).
   auto-fit: los sectores tienen entre 4 y 12 logos, cada uno reparte solo. */
/* 10 col = 5 cards por fila (cada una ocupa 2). El grid doble permite centrar
   la última fila cuando queda incompleta, desplazándola media columna. */
.cli-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.15rem);
  padding: 0;
  list-style: none;
}
.cli-grid .cli-logo { grid-column: span 2; }
/* La 1ª card de la última fila arranca en la columna que el PHP calcula según
   cuántos logos la ocupen (--start), y así esa fila queda centrada.
   Va cualificada con .cli-grid o la regla de arriba (2 clases) la pisa. */
.cli-grid .cli-logo--fila-final { grid-column: var(--start) / span 2; }
.cli-logo {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 2vw, 1.4rem);
  min-height: clamp(88px, 8.5vw, 112px);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 32px -18px rgba(0,0,0,0.4);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
/* Los SVG traen aire propio en su viewBox y a igual caja se ven diminutos:
   el logo ocupa el ancho de la card y el alto lo pone el aspect ratio. */
.cli-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;   /* cover recortaría las letras del logo */
}
@media (hover: hover) and (pointer: fine) {
  .cli-logo:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 48px -20px rgba(0,0,0,0.5);
  }
}

/* ── Responsive ──
   El --start del PHP está calculado para 5 col: al cambiar el nº de columnas
   deja de valer, así que la fila final vuelve a fluir (y solo se centra en
   ≤560px, donde 2 col garantiza que la huérfana es 1 sola card). */
/* 🚨 El `--start` que calcula el PHP SOLO vale para la parrilla de 5 columnas.
   Al bajar de columnas hay que ANULARLO con la misma especificidad (.cli-grid +
   clase) o la card de "fila final" se coloca donde no debe: con 4 logos (Consumo)
   el resto es 4 → la card marcada es la PRIMERA, y en móvil salía sola y centrada
   arriba, con las otras 3 debajo. */
@media (max-width: 1100px) {
  .cli-grid { grid-template-columns: repeat(8, 1fr); }   /* 4 cards */
  .cli-grid .cli-logo--fila-final { grid-column: auto / span 2; }
}
@media (max-width: 900px) {
  .cli-intro__inner { grid-template-columns: 1fr; }
  .cli-sector__head { grid-template-columns: 1fr; align-items: start; }
  .cli-sector__sub  { max-width: none; }
  .cli-grid { grid-template-columns: repeat(6, 1fr); }   /* 3 cards */
  .cli-grid .cli-logo--fila-final { grid-column: auto / span 2; }
}
@media (max-width: 560px) {
  .cli-grid { grid-template-columns: repeat(4, 1fr); }   /* 2 cards → 2×2 */
  .cli-grid .cli-logo--fila-final { grid-column: auto / span 2; }
  /* Con 2 col, un nº IMPAR de logos deja 1 huérfana → centrada a media col. */
  .cli-grid .cli-logo:nth-child(odd):last-child { grid-column: 2 / span 2; }
}