/* Altitud Clientes – Carrusel CSS v2 */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@300;400;500&display=swap');

.ac-section {
  background: #0a0a14;
  padding: 100px 0 110px;
  position: relative;
  overflow: hidden;
  font-family: 'DM Sans', sans-serif;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
}

.ac-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 380px;
  background: radial-gradient(ellipse, rgba(26,110,245,.07) 0%, transparent 70%);
  pointer-events: none;
}

/* ── HEADER ── */
.ac-head {
  text-align: center;
  padding: 0 20px;
  margin-bottom: 16px;
  position: relative; z-index: 2;
}
.ac-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: #60a5fa; margin-bottom: 18px;
}
.ac-eyebrow::before { content:''; display:block; width:32px; height:1px; background:linear-gradient(90deg,transparent,#60a5fa); }
.ac-eyebrow::after  { content:''; display:block; width:32px; height:1px; background:linear-gradient(90deg,#60a5fa,transparent); }

.ac-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800; color: #fff;
  line-height: 1.1; letter-spacing: -.02em; margin-bottom: 12px;
}
.ac-sub { font-size: 15px; color: #6b7280; max-width: 480px; margin: 0 auto; line-height: 1.6; }

/* ── CONTADOR ── */
.ac-counter {
  display: flex; align-items: baseline; justify-content: center;
  gap: 0; margin: 32px auto 52px;
  position: relative; z-index: 2;
}
.ac-counter__num {
  font-family: 'Syne', sans-serif; font-size: 52px; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, #1a6ef5, #60a5fa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ac-counter__plus {
  font-family: 'Syne', sans-serif; font-size: 32px; font-weight: 700;
  color: #1a6ef5; margin-bottom: 6px; margin-right: 12px;
}
.ac-counter__label {
  font-size: 13px; color: #6b7280; text-transform: uppercase;
  letter-spacing: .14em; font-weight: 500; align-self: center; margin-bottom: 4px;
}

/* ── TRACKS ── */
.ac-tracks {
  display: flex; flex-direction: column; gap: 20px;
  position: relative; z-index: 2;
}
.ac-tracks::before, .ac-tracks::after {
  content: ''; position: absolute;
  top: 0; bottom: 0; width: 160px; z-index: 10; pointer-events: none;
}
.ac-tracks::before { left:0;  background: linear-gradient(to right, #0a0a14 0%, transparent 100%); }
.ac-tracks::after  { right:0; background: linear-gradient(to left,  #0a0a14 0%, transparent 100%); }

.ac-track {
  display: flex; gap: 20px;
  width: max-content;
  will-change: transform;
}
.ac-track--fwd { animation: acFwd linear infinite; }
.ac-track--bwd { animation: acBwd linear infinite; }
.ac-tracks:hover .ac-track { animation-play-state: paused; }

@keyframes acFwd { from { transform: translateX(0); }       to { transform: translateX(-33.333%); } }
@keyframes acBwd { from { transform: translateX(-33.333%); } to { transform: translateX(0); }       }

/* ── CARD — grande, cuadrada, logo que llena ── */
.ac-card {
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: default;
  transition:
    background .3s ease,
    border-color .3s ease,
    transform .35s cubic-bezier(.34,1.56,.64,1),
    box-shadow .3s ease;
  position: relative; overflow: hidden;
}
.ac-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(26,110,245,.06) 0%, transparent 60%);
  opacity: 0; transition: opacity .3s ease;
  border-radius: 20px;
}
.ac-card:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(26,110,245,.4);
  transform: translateY(-6px) scale(1.04);
  box-shadow:
    0 20px 50px rgba(0,0,0,.5),
    0 0 0 1px rgba(26,110,245,.2),
    0 0 40px rgba(26,110,245,.1);
}
.ac-card:hover::after { opacity: 1; }

/* Logo — ocupa todo el espacio disponible dentro del padding */
.ac-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0.85;
  transition: opacity .3s ease, transform .3s ease;
}
.ac-card:hover img {
  opacity: 1;
  transform: scale(1.06);
}

/* ── PIE ── */
.ac-foot {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 60px; padding: 0 20px;
  position: relative; z-index: 2;
}
.ac-foot__line { flex:1; max-width:200px; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent); }
.ac-foot__text { font-size:11px; color:rgba(255,255,255,.18); letter-spacing:.2em; text-transform:uppercase; font-weight:500; white-space:nowrap; }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .ac-card { width: 120px; height: 120px; padding: 14px; border-radius: 16px; }
  .ac-tracks::before, .ac-tracks::after { width: 60px; }
}
