/* ==========================================================
   ANDREA STUDIO · MEDIA EN TARJETAS V2
   ========================================================== */


.as-service-media-v2 {

  position:
    relative;

  width:
    100%;

  margin:
    18px 0 20px;

  border:
    1px solid
    rgba(104,47,80,.13);

  border-radius:
    18px;

  overflow:
    hidden;

  background:
    #f6efec;

  box-shadow:
    0 10px 30px
    rgba(50,21,38,.08);

}


/*
 * Proporción similar al rectángulo
 * marcado en la captura.
 */

.as-service-media-frame-v2 {

  display:
    block;

  width:
    100%;

  aspect-ratio:
    4 / 5;

  min-height:
    340px;

  padding:
    0;

  margin:
    0;

  border:
    0;

  border-radius:
    0;

  overflow:
    hidden;

  background:
    #f7f2ef;

  cursor:
    pointer;

  box-shadow:
    none !important;

}


.as-service-media-frame-v2:hover {

  transform:
    none !important;

}


.as-service-media-frame-v2 img {

  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

  opacity:
    1;

  transform:
    scale(1);

  transition:
    opacity .25s ease,
    transform .45s ease;

}


.as-service-media-frame-v2
img.changing {

  opacity:
    .22;

  transform:
    scale(1.015);

}


/* ----------------------
   INDICADORES
   ---------------------- */

.as-service-media-dots-v2 {

  position:
    absolute;

  left:
    50%;

  bottom:
    12px;

  transform:
    translateX(-50%);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  max-width:
    calc(100% - 24px);

  padding:
    6px 8px;

  border-radius:
    999px;

  background:
    rgba(255,250,247,.72);

  backdrop-filter:
    blur(8px);

  box-shadow:
    0 4px 14px
    rgba(50,21,38,.09);

}


.as-service-media-dot-v2 {

  width:
    7px;

  height:
    7px;

  min-width:
    7px;

  padding:
    0;

  margin:
    0;

  border:
    0;

  border-radius:
    50%;

  background:
    rgba(104,47,80,.28);

  box-shadow:
    none !important;

  cursor:
    pointer;

}


.as-service-media-dot-v2.active {

  width:
    17px;

  border-radius:
    999px;

  background:
    rgba(151,65,87,.88);

}


.as-service-media-dot-v2:hover {

  transform:
    none !important;

}


/* ----------------------
   MÓVIL
   ---------------------- */

@media
(max-width: 700px) {

  .as-service-media-v2 {

    margin:
      14px 0 17px;

    border-radius:
      16px;

  }


  .as-service-media-frame-v2 {

    min-height:
      280px;

  }

}


@media
(prefers-reduced-motion: reduce) {

  .as-service-media-frame-v2 img {

    transition:
      none;

  }

}