/**
 * Cloudari Hero Carrusel
 *
 * Todos los valores configurables llegan como custom properties escritas por
 * Elementor desde los `selectors` de los controles. El `!important` se reserva
 * para los resets de imagen, que es donde los temas suelen pisar el layout.
 */

.cld-hero {
  --cld-hero-height: 83vh;
  --cld-hero-bg: #050505;
  --cld-hero-zoom: 1.035;
  --cld-hero-curve-color: #ffffff;
  --cld-hero-curve-height: 62px;
  --cld-hero-control-color: #ffffff;
  --cld-hero-arrow-size: 48px;
  --cld-hero-arrow-thickness: 3px;
  --cld-hero-arrow-offset: 24px;

  position: relative;
  display: block;
  width: 100%;
  height: var(--cld-hero-height);
  margin: 0;
  padding: 0;
  background: var(--cld-hero-bg);
}

/* Sin curva no hay nada que esquivar bajo los controles. */
.cld-hero--no-curve {
  --cld-hero-curve-height: 0px;
}

.cld-hero *,
.cld-hero *::before,
.cld-hero *::after {
  box-sizing: border-box;
}

.cld-hero__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cld-hero__track {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 650ms ease;
  will-change: transform;
}

.cld-hero__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--cld-hero-bg);
}

.cld-hero__media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
}

.cld-hero__media--static {
  cursor: default;
}

.cld-hero__media picture,
.cld-hero__fg {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.cld-hero__img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0;
  border: 0;
  box-shadow: none;
  /**
   * El encuadre va con `!important` y sin transicion a proposito: si el tema
   * pisa `object-position`, mover los sliders del widget no se ve, y cualquier
   * transicion aqui haria que el ajuste llegase con retardo en vez de al momento.
   */
  object-fit: cover !important;
  object-position: var(--cld-hero-pos-x, 50%) var(--cld-hero-pos-y, 50%) !important;
  transform: scale(1);
  transition: transform 700ms ease;
  will-change: transform;
}

.cld-hero__media:hover .cld-hero__fg .cld-hero__img,
.cld-hero__media:focus-visible .cld-hero__fg .cld-hero__img {
  transform: scale(var(--cld-hero-zoom));
}

/* El vídeo comparte los resets de .cld-hero__img: encuadra igual que una imagen. */
.cld-hero__video {
  background: var(--cld-hero-bg);
}

/**
 * Cuando el cartel mezcla vídeo e imagen se emiten los dos medios y aquí se
 * decide cuál se ve. El oculto nunca descarga: los vídeos llevan preload="none"
 * y las imágenes loading="lazy".
 */
.cld-hero__source--mobile {
  display: none;
}

@media (max-width: 1024px) {
  .cld-hero__source--desktop {
    display: none;
  }

  .cld-hero__source--mobile {
    display: block;
  }
}

/* El fondo desenfocado del modo "cartel completo" siempre es imagen. */
.cld-hero__backdrop {
  display: none;
}

/**
 * Curva inferior
 */
.cld-hero__curve {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 2;
  height: var(--cld-hero-curve-height);
  overflow: hidden;
  color: var(--cld-hero-curve-color);
  pointer-events: none;
}

.cld-hero__curve svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* El color de la curva se fija en el path: los temas suelen pisar `color`. */
.cld-hero__curve-path {
  fill: var(--cld-hero-curve-color) !important;
}

/**
 * Controles
 *
 * Todo lo que un tema o Elementor suele repintar en `button` (fondo, borde,
 * sombra, radio, tipografia) va con `!important`. Sin eso el hover del tema
 * mete su color de marca detras de las flechas y del boton de pausa.
 */
.cld-hero__arrow,
.cld-hero__toggle {
  position: absolute;
  z-index: 3;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  color: var(--cld-hero-control-color) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  cursor: pointer;
  opacity: 1 !important;
}

.cld-hero__arrow {
  top: 50%;
  display: block !important;
  width: var(--cld-hero-arrow-size) !important;
  height: var(--cld-hero-arrow-size) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  background: transparent !important;
  transform: translateY(-50%);
  transition: transform 180ms ease;
}

/**
 * Los estados se repiten con pseudo-clase a proposito: un `button:hover` del
 * tema tiene mas especificidad que `.cld-hero__toggle`, asi que sin esto el
 * borde y el fondo de marca del tema ganan aunque la regla base lleve !important.
 */
.cld-hero__arrow:hover,
.cld-hero__arrow:active,
.cld-hero__arrow:focus,
.cld-hero__arrow:focus-visible {
  background: transparent !important;
  color: var(--cld-hero-control-color) !important;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.cld-hero__arrow:hover,
.cld-hero__arrow:focus-visible {
  transform: translateY(-50%) scale(1.04);
}

.cld-hero__arrow--prev {
  left: var(--cld-hero-arrow-offset);
}

.cld-hero__arrow--next {
  right: var(--cld-hero-arrow-offset);
}

.cld-hero__toggle {
  right: var(--cld-hero-arrow-offset);
  bottom: calc(var(--cld-hero-curve-height) + 12px);
  display: flex !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  align-items: center;
  justify-content: center;
  padding: 9px !important;
  background: rgba(0, 0, 0, 0.5) !important;
}

.cld-hero__toggle:hover,
.cld-hero__toggle:active,
.cld-hero__toggle:focus,
.cld-hero__toggle:focus-visible {
  background: rgba(0, 0, 0, 0.72) !important;
  color: var(--cld-hero-control-color) !important;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 9px !important;
  box-shadow: none !important;
}

/* Iconos en SVG: simetricos por construccion e inmunes a overrides de borde. */
.cld-hero__icon {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  fill: currentColor;
  pointer-events: none;
}

.cld-hero__arrow .cld-hero__icon {
  padding: 22% !important;
}

.cld-hero__icon--chevron path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: var(--cld-hero-arrow-thickness);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pausado: el boton pasa a ofrecer la accion de reanudar. */
.cld-hero__toggle[data-paused="false"] .cld-hero__icon--play,
.cld-hero__toggle[data-paused="true"] .cld-hero__icon--pause {
  display: none !important;
}

.cld-hero__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cld-hero__placeholder {
  display: flex;
  min-height: 160px;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 1px dashed currentColor;
  opacity: 0.7;
  text-align: center;
}

/**
 * Cartel completo en pantallas pequeñas: el backdrop desenfocado rellena las
 * bandas que deja el `contain` sin recortar el cartel.
 */
@media (max-width: 1024px) {
  .cld-hero__slide--contain-mobile .cld-hero__backdrop {
    position: absolute;
    z-index: 0;
    display: block;
    inset: 0;
    pointer-events: none;
    object-fit: cover !important;
    object-position: center !important;
    transform: scale(1.2);
    filter: blur(24px);
    transition: none;
  }

  .cld-hero__slide--contain-mobile .cld-hero__fg {
    position: relative;
    z-index: 1;
  }

  /* Gana al `cover !important` de la regla base: aqui el cartel no debe recortarse. */
  .cld-hero__slide--contain-mobile .cld-hero__fg .cld-hero__img {
    object-fit: contain !important;
    object-position: center !important;
  }

  .cld-hero__slide--contain-mobile .cld-hero__media:hover .cld-hero__fg .cld-hero__img,
  .cld-hero__slide--contain-mobile .cld-hero__media:focus-visible .cld-hero__fg .cld-hero__img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cld-hero__track,
  .cld-hero__img,
  .cld-hero__arrow {
    transition: none;
  }

  .cld-hero__media:hover .cld-hero__fg .cld-hero__img,
  .cld-hero__media:focus-visible .cld-hero__fg .cld-hero__img {
    transform: scale(1);
  }
}

/**
 * Anillo de foco de doble capa, al final del archivo a proposito.
 *
 * Comparte especificidad con las reglas de estado de mas arriba, asi que tiene
 * que ir despues para ganarles. El par blanco/negro garantiza contraste sobre
 * cualquier cartel y sobre el color de control que se configure, en vez de
 * confiar en el token del tema.
 */
.cld-hero__media:focus-visible,
.cld-hero__arrow:focus-visible,
.cld-hero__toggle:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: -3px !important;
  box-shadow: 0 0 0 3px #000000, inset 0 0 0 3px #000000 !important;
}

.cld-hero__arrow:focus-visible,
.cld-hero__toggle:focus-visible {
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px #000000 !important;
}