/* assets/css/partners.css */

/* Integra con tu paleta existente:
   - fondo oscuro var(--bg)/var(--bg2)
   - texto claro var(--text)
   - acento azul/teal var(--acc2)
*/

.partners-section{
  width:100vw;
  max-width:100vw;
  margin:3rem 0 0;
  padding:3rem 1rem 2rem;
  display:grid;
  gap:2rem;
  background:radial-gradient(
    circle at 20% 20%,
    rgba(0,255,194,.07) 0%,
    rgba(0,0,0,0) 60%
  );
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
  color:var(--text);
}

/* Cabecera general */
.partners-header{
  text-align:center;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
  color:var(--text);
}

/* Versión compacta:
   - solo mostramos la eyebrow centrada
   - ocultamos posibles <h2> y <p> que pudieran existir
*/
.partners-header--compact{
  display:flex;
  justify-content:center;
  margin-bottom:1rem;
  text-align:center;
}

.partners-header--compact h2,
.partners-header--compact p{
  display:none;
}

/* La píldora "Confían en nosotros" (agrandada) */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.9rem;            /* antes .7rem */
  font-weight:600;
  line-height:1.2;            /* antes 1 */
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(126,160,255,.08); /* usa acc2 en suave */
  border:1px solid rgba(126,160,255,.4);
  color:var(--acc2);
  padding:.6rem .9rem;        /* antes .5rem .75rem */
  border-radius:999px;
  user-select:none;
}

/* Punto luminoso dentro de la eyebrow (agrandado) */
.eyebrow-dot{
  width:.6rem;                /* antes .5rem */
  height:.6rem;               /* antes .5rem */
  border-radius:999px;
  background:var(--acc2);
  box-shadow:0 0 .6rem var(--acc2);
  flex-shrink:0;
}

/* (Se dejan las reglas por si alguna vista aún usa <h2> o <p> dentro del header normal.
   En la versión compacta están ocultas con display:none) */
.partners-header h2{
  font-size:clamp(1.1rem,1vw + 1rem,1.4rem);
  font-weight:600;
  line-height:1.3;
  color:var(--text);
  margin:1rem 0 .5rem;
}

.partners-header p{
  font-size:.9rem;
  line-height:1.4;
  max-width:600px;
  margin:0 auto;
  color:var(--muted);
}

/* ===== Carrusel ===== */

.logo-marquee{
  width:100vw;
  max-width:100vw;
  overflow:hidden;
  position:relative;
  user-select:none;

  /* degradado lateral para entrada/salida de logos */
  mask-image:linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 10%,
    rgba(0,0,0,1) 90%,
    rgba(0,0,0,0) 100%
  );
  -webkit-mask-image:linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 10%,
    rgba(0,0,0,1) 90%,
    rgba(0,0,0,0) 100%
  );
}

/* pista que se desplaza */
.marquee-track{
  display:flex;
  align-items:center;
  gap:clamp(2rem,2vw,3rem);
  width:max-content;
  animation:partners-scroll-left 28s linear infinite;
}

@keyframes partners-scroll-left{
  0%   {transform:translateX(0)}
  100% {transform:translateX(-50%)} /* porque duplicamos el contenido vía JS */
}

.logo-item{
  flex:0 0 auto;
  min-width:clamp(140px,10vw,200px);
  display:grid;
  place-items:center;
  padding:1rem 1.5rem;
}

.logo-item img{
  display:block;
  max-height:48px;
  max-width:200px;
  width:auto;
  height:auto;
  object-fit:contain;

  /* leve mejora de legibilidad de logos claros sobre fondo oscuro */
  filter:
    brightness(1.15)
    contrast(1.2)
    drop-shadow(0 0 2px rgba(0,0,0,.8))
    drop-shadow(0 4px 8px rgba(0,0,0,.8));
}

/* Ya NO usamos la hint-row ni el punto inferior,
   así que se elimina ese bloque visual */

/* Responsive tweaks */
@media (max-width:480px){
  .logo-item img{
    max-height:40px;
  }
  .partners-header p{
    font-size:.85rem;
  }
}