/* /css/ae-carousel.css */
/* Solo estilos con prefijo ae- (NO redefine .a-zoom, .div-icon-zoom, ni div[id^="pieFoto"] p) */

/* Contenedor principal */
.ae-carousel { position: relative; width: 100%; overflow: hidden; }

/* Pista: slides en fila */
.ae-track {
  display: flex;
  align-items: stretch;
  will-change: transform;
  transition: transform 300ms ease;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* Slide: media arriba + pie abajo */
.ae-slide {
  flex: 0 0 100%;
  display: grid;
  gap: 8px; /* espacio entre media y pie */
  justify-items: center;
  align-content: center;
}

/* Área del medio (media wrapper) */
.ae-media {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100%;
}

/* Medios (dentro de .ae-media) */
.ae-media > a,
.ae-media > img,
.ae-media > video,
.ae-media > iframe {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* Resoluciones predefinidas (afectan SOLO el contenedor del medio) */
.ae-reso-horizontal {
  max-width: 640px;
  height: auto;
  max-height: 360px;
  width: 100%;
}

.ae-reso-vertical {
  width: auto;
  max-height: 640px;
}

.ae-reso-panoramico {
  max-width: 1024px;
  height: auto;
  max-height: 960px;
  width: 100%;
}

/* 'personalizado': el tamaño se aplica vía clases únicas generadas por JS (sin inline ni <style> inyectado). */
.ae-reso-personalizado {
  /* El ancho/alto vendrá de una clase .ae-size-<id>-<index> que pegarás en tu CSS */
}

/* Estado activo/inactivo (útil si quieres estilos adicionales) */
.ae-slide.is-active { }

/* Flechas */
.ae-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: none; background: rgba(0,0,0,.4);
  cursor: pointer; border-radius: 999px;
}
.ae-prev { left: 8px; }
.ae-next { right: 8px; }

/* Dots */
.ae-dots { display: flex; gap: 8px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.ae-dots > button {
  width: 10px; height: 10px; border-radius: 999px; border: 1px solid currentColor; background: transparent;
}
.ae-dots > button[aria-current="true"] { background: currentColor; }

/* Ocultar iframes inactivos (JS alterna esta clase en el slide) */
.ae-slide-iframe-hidden { display: none !important; }

/* Arrastre (opcional, por si quieres feedback) */
.ae-carousel.ae-dragging .ae-track { transition: none; }


/* === Ajuste de contenido dentro del área de media === */
.ae-media > img,
.ae-media > a > img,
.ae-media > video,
.ae-media > iframe {
  width: 100%;
  height: auto;
  object-fit: contain;   /* Escala sin recortar dentro del área */
}

/* Fuerza el límite de alto según la resolución en los elementos hijos */
.ae-reso-horizontal img,
.ae-reso-horizontal video,
.ae-reso-horizontal iframe {
  max-height: 360px;
}

.ae-reso-panoramico img,
.ae-reso-panoramico video,
.ae-reso-panoramico iframe {
  max-height: 960px;
}

.ae-reso-vertical img,
.ae-reso-vertical video,
.ae-reso-vertical iframe {
  max-height: 640px;
}

/* Asegura que las flechas queden por encima del contenido en escenarios con overlays del editor */
.ae-arrow { z-index: 1; }



/*Medias queries para anchos perosonalizados por pixeles, se generan las clases desde la funcion _customPersonalizeClass(w) donde w es el ancho (width)*/
@media (max-width: 992px) {
    .personalizado992 {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .personalizado768 {
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    .personalizado576 {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .personalizado480{
        width: 100% !important;
    }
}

@media (max-width: 320px) {
    .personalizado320 {
        width: 100% !important;
    }
}


/* ============ Ajustes específicos para IFRAME ============ */

/* ============ IFRAME: relación 16:9 en todas las resoluciones ============ */
.ae-slide[data-type="iframe"] .ae-media {
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.ae-slide[data-type="iframe"] .ae-media > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Horizontal: 16:9 con tus límites */
.ae-slide[data-type="iframe"] .ae-media.ae-reso-horizontal {
  aspect-ratio: 16 / 9;
  max-width: 640px;
  max-height: 360px;
  height: auto;
}

/* Vertical: también 16:9 (no usamos 9:16) */
.ae-slide[data-type="iframe"] .ae-media.ae-reso-vertical {
  aspect-ratio: 16 / 9;
  /* conservamos tu tope de alto para “vertical” */
  max-height: 640px;
  max-width: 980px;
  width: 100%;
}

/* Panorámico: 16:9 dentro de tus límites */
.ae-slide[data-type="iframe"] .ae-media.ae-reso-panoramico {
  aspect-ratio: 16 / 9;
  max-width: 1024px;
  max-height: 960px;
  height: auto;
}

/* Personalizado: sin forzar ratio; rellenamos el marco definido por px */
.ae-slide[data-type="iframe"] .ae-media.ae-reso-personalizado {
  aspect-ratio: auto;
}