/* ============================================================= */
/* == CONTENEDOR DE IMAGEN Y SUS ESTADOS (.car_img) == */
/* ============================================================= */

/* --- 1. Estilo del Contenedor Principal --- */
#info-magicbox .car_img {
  /* Hacemos que sea un contenedor de referencia para sus hijos */
  position: relative;
  z-index: 1;
  overflow: hidden; /* Recorta cualquier cosa que se salga */

  /* Preparado para animaciones FLIP con transform */
  will-change: transform;
}
/*  */

/* --- 2. Posicionamiento de .car_img para cada ESTADO y FORMATO --- */

/* ESTADO 1 (Diapositiva 1) - Large Desktop (1441px+) */
#info-magicbox .car_img.estado-diapo-1 {
  grid-area: 5 / 3 / 9 / 11;
}

/* Estilos específicos para la imagen en Large Desktop */
@media screen and (min-width: 1441px) {
  #info-magicbox .car_img.estado-diapo-1 .img-magicbox.pose1.activa {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    top: 0;
    left: 0;
    transform: none;
  }
}

/* Desktop (992px - 1440px) */
@media screen and (min-width: 992px) and (max-width: 1440px) {
  #info-magicbox .car_img.estado-diapo-1 {
    grid-area: 5 / 2 / 7 / 8; /* Filas: 5-6, Columnas: 2-7 */
  }

  /* Estilos específicos para la imagen en Desktop */
  #info-magicbox .car_img.estado-diapo-1 .img-magicbox.pose1.activa {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    top: 0;
    left: 0;
    transform: none;
  }
}

/* Tablet (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  #info-magicbox .car_img.estado-diapo-1 {
    grid-area: 5 / 2 / 7 / 8; /* Filas: 5-6, Columnas: 2-7 */
  }

  /* Estilos específicos para la imagen en Tablet */
  #info-magicbox .car_img.estado-diapo-1 .img-magicbox.pose1.activa {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    top: 0;
    left: 0;
    transform: none;
  }
}

/* Móvil (767px-) */
@media screen and (max-width: 767px) {
  #info-magicbox .car_img.estado-diapo-1 {
    grid-area: 3 / 1 / 5 / 7; /* Filas: 3-4, Columnas: 1-6 */
  }

  /* Estilos específicos para la imagen en Móvil */
  #info-magicbox .car_img.estado-diapo-1 .img-magicbox.pose1.activa {
    width: 100%;
    height: 100%;
    object-fit: contain;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
}

/* Ocultar pose2 y sombra en ESTADO 1 */
#info-magicbox .car_img.estado-diapo-1 .img-magicbox.pose2,
#info-magicbox .car_img.estado-diapo-1 .sombra-magicbox {
  display: none;
}

/* ESTADO 2 (Diapositiva 2) - Large Desktop (1441px+) */
#info-magicbox .car_img.estado-diapo-2 {
  grid-area: 6 / 1 / 9 / 7; /* Filas: 6-8, Columnas: 1-6 */
}

/* Estilos específicos para la imagen en Large Desktop */
@media screen and (min-width: 1441px) {
  #info-magicbox .car_img.estado-diapo-2 .img-magicbox.pose1.activa {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    top: 0;
    left: 0;
    transform: none;
  }
}

/* Desktop (992px - 1440px) */
@media screen and (min-width: 992px) and (max-width: 1440px) {
  #info-magicbox .car_img.estado-diapo-2 {
    grid-area: 5 / 1 / 7 / 5; /* Filas: 5-6, Columnas: 1-4 */
  }

  /* Estilos específicos para la imagen en Desktop */
  #info-magicbox .car_img.estado-diapo-2 .img-magicbox.pose1.activa {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    top: 0;
    left: 0;
    transform: none;
  }
}

/* Tablet (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  #info-magicbox .car_img.estado-diapo-2 {
    grid-area: 1 / 5 / 3 / 9; /* Filas: 1-2, Columnas: 5-8 */
  }

  /* Estilos específicos para la imagen en Tablet */
  #info-magicbox .car_img.estado-diapo-2 .img-magicbox.pose1.activa {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
    top: 0;
    left: 0;
    transform: none;
  }
}

/* Móvil (767px-) */
@media screen and (max-width: 767px) {
  #info-magicbox .car_img.estado-diapo-2 {
    grid-area: 1 / 4 / 3 / 7; /* Filas: 1-2, Columnas: 4-6 */
  }

  /* Estilos específicos para la imagen en Móvil */
  #info-magicbox .car_img.estado-diapo-2 .img-magicbox.pose1.activa {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
    top: 0;
    left: 0;
    transform: none;
  }
}

/* Ocultar pose2 y sombra en ESTADO 2 */
#info-magicbox .car_img.estado-diapo-2 .img-magicbox.pose2,
#info-magicbox .car_img.estado-diapo-2 .sombra-magicbox {
  display: none;
}

/* ESTADO 3 (Diapositiva 3) - Large Desktop (1441px+) */
#info-magicbox .car_img.estado-diapo-3 {
  grid-area: 3 / 6 / 8 / 13; /* Filas: 3-7, Columnas: 6-12 */
}

/* Estilos específicos para pose2 en Large Desktop */
@media screen and (min-width: 1441px) {
  #info-magicbox .car_img.estado-diapo-3 .img-magicbox.pose2.activa {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    top: 0;
    left: 0;
    transform: none;
  }
}

/* Desktop (992px - 1440px) */
@media screen and (min-width: 992px) and (max-width: 1440px) {
  #info-magicbox .car_img.estado-diapo-3 {
    grid-area: 3 / 1 / 7 / 6; /* Filas: 3-6, Columnas: 1-5 */
  }

  /* Estilos específicos para pose2 en Desktop */
  #info-magicbox .car_img.estado-diapo-3 .img-magicbox.pose2.activa {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    top: 0;
    left: 0;
    transform: none;
  }
}

/* Tablet (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  #info-magicbox .car_img.estado-diapo-3 {
    grid-area: 3 / 1 / 7 / 5; /* Filas: 3-6, Columnas: 1-4 */
  }

  /* Estilos específicos para pose2 en Tablet */
  #info-magicbox .car_img.estado-diapo-3 .img-magicbox.pose2.activa {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right;
    top: 0;
    left: 0;
    transform: none;
  }
}

/* Móvil (767px-) */
@media screen and (max-width: 767px) {
  #info-magicbox .car_img.estado-diapo-3 {
    grid-area: 2 / 1 / 4 / 7; /* Filas: 2-3, Columnas: 1-6 */
  }

  /* Estilos específicos para pose2 en Móvil */
  #info-magicbox .car_img.estado-diapo-3 .img-magicbox.pose2.activa {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top;
    top: 0;
    left: 0;
    transform: none;
    padding-bottom: 25%;
  }
}

/* Mostrar solo pose2 en ESTADO 3 - Ocultar pose1 y sombra */
#info-magicbox .car_img.estado-diapo-3 .img-magicbox.pose1,
#info-magicbox .car_img.estado-diapo-3 .sombra-magicbox {
  display: none;
}

/* ESTADO 4 (Diapositiva 4) - Large Desktop (1441px+) */
#info-magicbox .car_img.estado-diapo-4 {
  grid-area: 4 / 4 / 9 / 10; /* Filas: 4-8, Columnas: 4-9 */
}

/* Estilos específicos para pose2 en Large Desktop */
@media screen and (min-width: 1441px) {
  #info-magicbox .car_img.estado-diapo-4 .img-magicbox.pose2.activa {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    top: 0;
    left: 0;
    transform: none;
  }
}

/* Desktop (992px - 1440px) */
@media screen and (min-width: 992px) and (max-width: 1440px) {
  #info-magicbox .car_img.estado-diapo-4 {
    grid-area: 3 / 1 / 7 / 6; /* Filas: 3-6, Columnas: 1-5 */
  }

  /* Estilos específicos para pose2 en Desktop */
  #info-magicbox .car_img.estado-diapo-4 .img-magicbox.pose2.activa {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    top: 0;
    left: 0;
    transform: none;
  }
}

/* Tablet (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  #info-magicbox .car_img.estado-diapo-4 {
    grid-area: 3 / 1 / 7 / 5; /* Filas: 3-6, Columnas: 1-4 */
  }

  /* Estilos específicos para pose2 en Tablet */
  #info-magicbox .car_img.estado-diapo-4 .img-magicbox.pose2.activa {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right;
    top: 0;
    left: 0;
    transform: none;
  }
}

/* Móvil (767px-) */
@media screen and (max-width: 767px) {
  #info-magicbox .car_img.estado-diapo-4 {
    grid-area: 2 / 1 / 4 / 7; /* Filas: 2-3, Columnas: 1-6 */
  }

  /* Estilos específicos para pose2 en Móvil */
  #info-magicbox .car_img.estado-diapo-4 .img-magicbox.pose2.activa {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top;
    top: 0;
    left: 0;
    transform: none;
    padding-bottom: 25%;
  }
}

/* Mostrar solo pose2 en ESTADO 4 - Ocultar pose1 y sombra */
#info-magicbox .car_img.estado-diapo-4 .img-magicbox.pose1,
#info-magicbox .car_img.estado-diapo-4 .sombra-magicbox {
  display: none;
}

/* ESTADO 5 (Diapositiva 5) - Large Desktop (1441px+) */
#info-magicbox .car_img.estado-diapo-5 {
  grid-area: 2 / 5 / 8 / 9; /* Filas: 2-7, Columnas: 5-8 */
}

/* Estilos específicos para pose2 en Large Desktop */
@media screen and (min-width: 1441px) {
  #info-magicbox .car_img.estado-diapo-5 .img-magicbox.pose2.activa {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    top: 0;
    left: 0;
    transform: none;
    z-index: 2;
  }

  /* Estilos específicos para sombra en Large Desktop */
  #info-magicbox .car_img.estado-diapo-5 .sombra-magicbox.activa {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
    top: 0;
    left: 0;
    transform: none;
    z-index: 1;
  }
}

/* Desktop (992px - 1440px) */
@media screen and (min-width: 992px) and (max-width: 1440px) {
  #info-magicbox .car_img.estado-diapo-5 {
    grid-area: 2 / 3 / 6 / 7; /* Filas: 2-5, Columnas: 3-6 */
  }

  /* Estilos específicos para pose2 en Desktop */
  #info-magicbox .car_img.estado-diapo-5 .img-magicbox.pose2.activa {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    top: 0;
    left: 0;
    transform: none;
    padding-right: 10%;
    padding-left: 10%;
    z-index: 2;
  }

  /* Estilos específicos para sombra en Desktop */
  #info-magicbox .car_img.estado-diapo-5 .sombra-magicbox.activa {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
    top: 0;
    left: 0;
    transform: none;
    z-index: 1;
  }
}

/* Tablet (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  #info-magicbox .car_img.estado-diapo-5 {
    grid-area: 2 / 2 / 5 / 8; /* Filas: 2-4, Columnas: 2-7 */
  }

  /* Estilos específicos para pose2 en Tablet */
  #info-magicbox .car_img.estado-diapo-5 .img-magicbox.pose2.activa {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    top: 0;
    left: 0;
    padding-top: 25%;
    padding-bottom: 10%;
    transform: none;
    z-index: 2;
  }

  /* Estilos específicos para sombra en Tablet */
  #info-magicbox .car_img.estado-diapo-5 .sombra-magicbox.activa {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
    top: 0;
    left: 0;
    transform: none;
    z-index: 1;
  }
}

/* Móvil (767px-) */
@media screen and (max-width: 767px) {
  #info-magicbox .car_img.estado-diapo-5 {
    grid-area: 2 / 2 / 4 / 6; /* Filas: 2-3, Columnas: 2-5 */
  }

  /* Estilos específicos para pose2 en Móvil */
  #info-magicbox .car_img.estado-diapo-5 .img-magicbox.pose2.activa {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    top: 0;
    left: 0;
    transform: none;
    padding-top: 25%;
    padding-bottom: 25%;
    z-index: 2;
  }

  /* Estilos específicos para sombra en Móvil */
  #info-magicbox .car_img.estado-diapo-5 .sombra-magicbox.activa {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
    top: 0;
    left: 0;
    transform: none;
    z-index: 1;
  }
}

/* Mostrar pose2 y sombra en ESTADO 5 - Ocultar solo pose1 */
#info-magicbox .car_img.estado-diapo-5 .img-magicbox.pose1 {
  display: none;
}


/* ============================================================= */
/* == IMÁGENES INTERNAS Y SOMBRA == */
/* ============================================================= */

/* --- 3. Estilo Común para las Poses del Producto --- */
#info-magicbox .img-magicbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Se asegura que toda la imagen sea visible */

  /* Transición para el fundido entre poses */
  opacity: 0; /* Por defecto, todas las poses están ocultas */
  transition: opacity 0.5s ease-in-out;
}

/* Hacemos visible solo la pose que tenga la clase .activa */
#info-magicbox .img-magicbox.activa {
  opacity: 1;
}


/* --- 4. Estilo y Posición de la Sombra --- */
#info-magicbox .sombra-magicbox {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%; /* La sombra suele ser un poco más angosta */
  height: 20px; /* Ajusta la altura de la sombra */

  /* Por defecto oculta, visible con .activa */
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Hacemos visible la sombra cuando tenga la clase .activa */
#info-magicbox .sombra-magicbox.activa {
  opacity: 1;
}