.ao-carousel{
  /* puedes cambiar perView por instancia desde el style inline */
  --ao-per-view: 3;        /* 4 imágenes visibles */
  --ao-gap: 0px;           /* espacio entre slides si quieres, p.ej. 12px */
  --ao-bg: rgba(13,22,44,.85);
  --ao-border: #24314d;
  --ao-radius: 16px;
  --ao-shadow: 0 14px 32px rgba(2,6,23,.45);
  --ao-ctrl-bg: #0c152b;
  --ao-ctrl-bg-hover: #0e182f;
  --ao-ctrl-border: #223254;
  --ao-dot: #223254;
  --ao-dot-active-start: #22d3ee;
  --ao-dot-active-end:   #38bdf8;
  --ao-focus: #38bdf8;
  --ao-aspect: 16/10;
  position:relative;
  border-radius:var(--ao-radius);
  background:var(--ao-bg);
  border:1px solid var(--ao-border);
  overflow:hidden; box-shadow:var(--ao-shadow);
  user-select:none;
}
.ao-carousel__viewport{ overflow:hidden; }
.ao-carousel__track{
  display:flex;
  gap: var(--ao-gap);
  will-change: transform;
  transform: translateX(0);
}
.ao-slide{
  flex: 0 0 calc( (100% - (var(--ao-gap) * (var(--ao-per-view) - 1))) / var(--ao-per-view) );
  position:relative;
}
.ao-slide__figure{ margin:0; height:100%; overflow:hidden; border-radius:12px; }
.ao-slide__img{
  width:100%; height:100%;
  display:block; object-fit:cover; aspect-ratio: var(--ao-aspect);
}

/* Controles */
.ao-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--ao-ctrl-border);
  background:var(--ao-ctrl-bg); color:#e2e8f0; font-size:22px;
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--ao-shadow);
}
.ao-btn:hover{ background:var(--ao-ctrl-bg-hover); }
.ao-btn:focus{ outline:2px solid var(--ao-focus); outline-offset:2px; }
.ao-btn--prev{ left:10px; } .ao-btn--next{ right:10px; }

/* Dots (opcionales) */
.ao-dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; justify-content:center; gap:8px;
}
.ao-dot{
  width:10px; height:10px; border-radius:999px; border:0;
  background:var(--ao-dot); opacity:.6; cursor:pointer;
}
.ao-dot[aria-selected="true"]{
  opacity:1; background:linear-gradient(90deg,var(--ao-dot-active-start),var(--ao-dot-active-end));
}

/* Responsive: ajusta perView en móvil si quieres */
@media (max-width: 1024px){ .ao-carousel{ --ao-per-view: 3; } }
@media (max-width: 768px){  .ao-carousel{ --ao-per-view: 2; } }
@media (max-width: 520px){  .ao-carousel{ --ao-per-view: 1; } }

/* --- Overlay de texto al hover --- */
.ao-slide__figure{ position:relative; } /* necesario para posicionar overlay */

.ao-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:12px; text-align:center;
  color:#eaf2ff; font-weight:700;
  background: rgba(3,10,25,.55);
  border: 1px solid rgba(148,163,184,.25);
  backdrop-filter: blur(2px);
  opacity:0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  border-radius:12px; /* combina con borde del figure */
  pointer-events:none; /* deja pasar clics a la imagen */
}

.ao-overlay span{
  line-height:1.35;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}

/* Mostrar overlay al hover/focus */
.ao-slide:hover .ao-overlay,
.ao-slide:focus-within .ao-overlay{
  opacity:1; transform: translateY(0);
}


/* Ajustes SOLO para este carrusel */
#carousel-partners .ao-slide__figure{
  height: var(--ao-img-h, 220px) !important;      /* altura del box */
  display: flex; align-items: center; justify-content: center;
  padding: var(--ao-img-pad, 0);                  /* marco interno */
  border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,.06);              /* opcional */
}

#carousel-partners .ao-slide__img{
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--ao-fit, contain) !important;  /* contain = no recorta */
  aspect-ratio: auto !important;                  /* anula ratio previo */
  display: block;
}

/* ===== AO Carousel: modo tarjeta SOLO si data-card="true" ===== */
.ao-carousel[data-card="true"] .ao-slide{
  display:flex; flex-direction:column;
  background:#0e1828;
  border:1px solid #24314d;
  border-radius:16px; overflow:hidden;
  box-shadow:0 10px 24px rgba(2,6,23,.28);
}

.ao-carousel[data-card="true"] .ao-card__media{
  height: var(--ao-card-media-h, 180px);
  overflow:hidden;
}
.ao-carousel[data-card="true"] .ao-card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
}

.ao-carousel[data-card="true"] .ao-card__body{
  padding:16px 18px; background:#0f172a; color:#dbe7ff;
}
.ao-carousel[data-card="true"] .ao-card__title{
  margin:.2rem 0 .5rem; font-weight:800; font-size:1.1rem; color:#fff;
}
.ao-carousel[data-card="true"] .ao-card__text{
  margin:0; line-height:1.55; color:#c7d2fe;
}

/* Si ese carrusel no debe mostrar overlays/captions de imagen, ocúltalos solo ahí */
.ao-carousel[data-card="true"] .ao-overlay,
.ao-carousel[data-card="true"] .ao-caption{ display:none !important; }