/* ============================================================= */
/* == ESTILOS GENERALES DE TEXTOS == */
/* ============================================================= */
#info-carrito h1,
#info-carrito h2,
#info-carrito h3,
#info-carrito p,
#info-carrito [class*="title"],
#info-carrito [class*="desc"] {
  color: #666462 !important;
  font-family: 'museo-sans', sans-serif !important;
}

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

/* --- Capa 3: Animaciones de Fondo --- */
#info-carrito .capa3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: #f6f1ed;
  overflow: hidden; /* Asegurar que los círculos no salgan del contenedor */
}

/* --- Círculos Glassmorphism (Fondos de Diapositivas) --- */
#info-carrito .bg-circle {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  animation: floatBackground 12s ease-in-out infinite;
}

/* Animación de flotación suave */
@keyframes floatBackground {
  0% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-30px) scale(1.05); }
  100% { transform: translateY(0px) scale(1); }
}

/* Círculos Específicos para Capa 3 - Estilo Esfera 3D */
#info-carrito .capa3 .circle-1 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #ffffff 0%, #ffcc00 30%, #ff8c00 70%, #d2691e 100%);
  box-shadow: 40px 60px 80px rgba(255, 166, 0, 0.6);
  top: -50px;
  left: -150px;
  animation-delay: 0s;
}

#info-carrito .capa3 .circle-2 {
  width: 250px;
  height: 250px;
  background: linear-gradient(135deg, #ffffff 0%, #ff8da1 30%, #ff2a5f 70%, #d10034 100%);
  box-shadow: 40px 60px 80px rgba(255, 141, 161, 0.6);
  bottom: 0px;
  left: 15%;
  animation-duration: 15s;
  animation-delay: 2s;
}

#info-carrito .capa3 .circle-3 {
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, #ffffff 0%, #a1c4fd 30%, #6aa5ff 70%, #2f7ef2 100%);
  box-shadow: 40px 60px 80px rgba(161, 196, 253, 0.6);
  top: 15%;
  right: 5%;
  animation-duration: 10s;
  animation-delay: 1s;
}

/* --- 1. Estilo del Contenedor Principal --- */
#info-carrito .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-carrito .car_img.estado-diapo-1 {
  grid-area: 1 / 1 / 9 / 13; /* Ocupa todas las columnas (1-12) */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border: 1px solid transparent;
  box-sizing: border-box;
}

/* Estilos específicos para la imagen en Large Desktop */
@media screen and (min-width: 1441px) {
  #info-carrito .car_img.estado-diapo-1 .img-carrito.pose1.activa {
    height: 100%;
    width: auto;
  }
}

/* Desktop (992px - 1440px) */
@media screen and (min-width: 992px) and (max-width: 1440px) {
  #info-carrito .car_img.estado-diapo-1 {
    grid-area: 1 / 1 / 7 / 9; /* Ocupa todas las columnas (1-8) */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border: 1px solid transparent;
    box-sizing: border-box;
  }

  /* Estilos específicos para la imagen en Desktop */
  #info-carrito .car_img.estado-diapo-1 .img-carrito.pose1.activa {
    height: 100%;
    width: auto;
  }
}

/* Tablet (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  #info-carrito .car_img.estado-diapo-1 {
    grid-area: 1 / 1 / 7 / 9; /* Ocupa todas las filas y columnas */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border: 1px solid transparent;
    box-sizing: border-box;
  }

  /* Estilos específicos para la imagen en Tablet */
  #info-carrito .car_img.estado-diapo-1 .img-carrito.pose1.activa {
    height: 100%;
    width: auto;
  }
}

/* Móvil (767px-) */
@media screen and (max-width: 767px) {
  #info-carrito .car_img.estado-diapo-1 {
    grid-area: 1 / 1 / 5 / 7; /* Ocupa todas las filas y columnas */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border: 1px solid transparent;
    box-sizing: border-box;
  }

  /* Estilos específicos para la imagen en Móvil */
  #info-carrito .car_img.estado-diapo-1 .img-carrito.pose1.activa {
    width: 100%;
    height: auto;
  }
}

/* Ocultar pose2, pose3, pose4 y pose5 en ESTADO 1 */
#info-carrito .car_img.estado-diapo-1 .img-carrito.pose2,
#info-carrito .car_img.estado-diapo-1 .img-carrito.pose3,
#info-carrito .car_img.estado-diapo-1 .img-carrito.pose4,
#info-carrito .car_img.estado-diapo-1 .img-carrito.pose5 {
  display: none;
}

/* ESTADO 2 (Diapositiva 2) - Large Desktop (1441px+) */
#info-carrito .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-carrito .car_img.estado-diapo-2 .img-carrito.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-carrito .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-carrito .car_img.estado-diapo-2 .img-carrito.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-carrito .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-carrito .car_img.estado-diapo-2 .img-carrito.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-carrito .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-carrito .car_img.estado-diapo-2 .img-carrito.pose1.activa {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
    top: 0;
    left: 0;
    transform: none;
  }
}

/* Ocultar pose1, pose3, pose4 y pose5 en ESTADO 2 */
#info-carrito .car_img.estado-diapo-2 .img-carrito.pose1,
#info-carrito .car_img.estado-diapo-2 .img-carrito.pose3,
#info-carrito .car_img.estado-diapo-2 .img-carrito.pose4,
#info-carrito .car_img.estado-diapo-2 .img-carrito.pose5 {
  display: none;
}

/* ESTADO 3 (Diapositiva 3) - Large Desktop (1441px+) */
#info-carrito .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-carrito .car_img.estado-diapo-3 .img-carrito.pose3.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-carrito .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-carrito .car_img.estado-diapo-3 .img-carrito.pose3.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-carrito .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-carrito .car_img.estado-diapo-3 .img-carrito.pose3.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-carrito .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-carrito .car_img.estado-diapo-3 .img-carrito.pose3.activa {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top;
    top: 0;
    left: 0;
    transform: none;
    padding-bottom: 25%;
  }
}

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

/* ESTADO 4 (Diapositiva 4) - Large Desktop (1441px+) */
#info-carrito .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-carrito .car_img.estado-diapo-4 .img-carrito.pose4.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-carrito .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-carrito .car_img.estado-diapo-4 .img-carrito.pose4.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-carrito .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-carrito .car_img.estado-diapo-4 .img-carrito.pose4.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-carrito .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-carrito .car_img.estado-diapo-4 .img-carrito.pose4.activa {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top;
    top: 0;
    left: 0;
    transform: none;
    padding-bottom: 25%;
  }
}

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

/* ESTADO 5 (Diapositiva 5) - Large Desktop (1441px+) */
#info-carrito .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-carrito .car_img.estado-diapo-5 .img-carrito.pose2.activa {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    top: 0;
    left: 0;
    transform: none;
    z-index: 2;
  }
}

/* Desktop (992px - 1440px) */
@media screen and (min-width: 992px) and (max-width: 1440px) {
  #info-carrito .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-carrito .car_img.estado-diapo-5 .img-carrito.pose5.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;
  }
}

/* Tablet (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  #info-carrito .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-carrito .car_img.estado-diapo-5 .img-carrito.pose5.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;
  }
}

/* Móvil (767px-) */
@media screen and (max-width: 767px) {
  #info-carrito .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-carrito .car_img.estado-diapo-5 .img-carrito.pose5.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;
  }
}

/* Mostrar solo pose5 en ESTADO 5 - Ocultar pose1, pose2, pose3 y pose4 */
#info-carrito .car_img.estado-diapo-5 .img-carrito.pose1,
#info-carrito .car_img.estado-diapo-5 .img-carrito.pose2,
#info-carrito .car_img.estado-diapo-5 .img-carrito.pose3,
#info-carrito .car_img.estado-diapo-5 .img-carrito.pose4 {
  display: none;
}

/* === ANIMACIONES PARA ESTADO 1 === */

/* Animación específica para Large Desktop: Mueve del centro a la derecha */
@keyframes moverCentroADerechaLargeDesktop {
  /* Espera 1 segundo en el centro (0% a 50% = 0.75s) */
  0%,
  50% {
    transform: translateX(0);
  }
  /* Se mueve a la derecha (50% a 100% = 0.75s) */
  100% {
    /* Valor específico para Large Desktop */
    transform: translateX(20vw);
  }
}

/* Animación específica para Desktop: Mueve del centro a la derecha */
@keyframes moverCentroADerechaDesktop {
  /* Espera 1 segundo en el centro (0% a 50% = 0.75s) */
  0%,
  50% {
    transform: translateX(0);
  }
  /* Se mueve a la derecha (50% a 100% = 0.75s) */
  100% {
    /* Valor específico para Desktop */
    transform: translateX(20vw);
  }
}

/* Animación específica para Tablet: Mueve del centro hacia abajo */
@keyframes moverCentroHaciaAbajoTablet {
  /* Espera 1 segundo en el centro */
  0%,
  50% {
    transform: translateY(0);
  }
  /* Se mueve hacia abajo */
  100% {
    /* Valor específico para Tablet */
    transform: translateY(40vh);
  }
}

/* Animación específica para Móvil: Mueve del centro hacia abajo */
@keyframes moverCentroHaciaAbajoMovil {
  /* Espera 1 segundo en el centro */
  0%,
  50% {
    transform: translateY(0);
  }
  /* Se mueve hacia abajo */
  100% {
    /* Valor específico para Móvil */
    transform: translateY(30vh);
  }
}

/* === CLASE DISPARADORA DE ANIMACIÓN === */
/* Se inicia automáticamente cuando la sección info-carrito está activa y en estado de diapo 1 */

/* Large Desktop: Asigna la animación horizontal específica */
@media screen and (min-width: 1441px) {
  #info-carrito.active .car_img.estado-diapo-1 {
    /* (nombre) (duración) (curva) (retraso) (modo de relleno) */
    animation: moverCentroADerechaLargeDesktop 1.5s ease-in-out 1.75s forwards;
  }
}

/* Desktop: Asigna la animación horizontal específica */
@media screen and (min-width: 992px) and (max-width: 1440px) {
  #info-carrito.active .car_img.estado-diapo-1 {
    /* (nombre) (duración) (curva) (retraso) (modo de relleno) */
    animation: moverCentroADerechaDesktop 1.5s ease-in-out 1.75s forwards;
  }
}

/* Tablet: Asigna la animación vertical específica */
@media screen and (min-width: 768px) and (max-width: 991px) {
  #info-carrito.active .car_img.estado-diapo-1 {
    animation: moverCentroHaciaAbajoTablet 1.5s ease-in-out 1.75s forwards;
  }
}

/* Móvil: Asigna la animación vertical específica */
@media screen and (max-width: 767px) {
  #info-carrito.active .car_img.estado-diapo-1 {
    animation: moverCentroHaciaAbajoMovil 1.5s ease-in-out 1.75s forwards;
  }
}

/* ============================================================= */
/* == SISTEMA GRID SOLO PARA DIAPOSITIVA 1 == */
/* ============================================================= */

#info-carrito .diapo1 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 24px;
}

@media screen and (min-width: 992px) and (max-width: 1440px) {
  #info-carrito .diapo1 {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 24px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  #info-carrito .diapo1 {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 16px;
  }
}

@media screen and (max-width: 767px) {
  #info-carrito .diapo1 {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 12px;
  }
}

/* ============================================================= */
/* == CAPA 2: CONTENIDOS DE LAS DIAPOSITIVAS DEL CARRITO == */
/* ============================================================= */

/* Fondo para todas las diapositivas de info-carrito */
#info-carrito .diapositiva {
  background-color: transparent;
}

/* --- ESTILOS GENERALES DIAPOSITIVA 1 --- */

#info-carrito .cont_diapo1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  gap: 20px;
  width: 100%;
  height: 100%;
  padding: 40px;
  box-sizing: border-box;
  border-radius: 20px;
}

/* El texto de la Diapo 1 aparece sincrónicamente con el desplazamiento (tras 1.75s de pausa inicial) */
#info-carrito .diapo1.activa .cont_diapo1 {
  /* 0.75s de duración, 1.75s de retraso, 'both' para que esté oculto antes de empezar */
  animation: aparecerContenidoCarrito 0.75s ease-out 1.75s both;
}

@keyframes aparecerContenidoCarrito {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#info-carrito .diapo1_title {
  font-family: inherit; /* Toma la fuente definida arriba */
  font-weight: 900;
  color: inherit;
  margin: 0;
  line-height: 1.2;
  text-align: left;
}

#info-carrito .diapo1_h2 {
  font-family: 'museo-sans', sans-serif;
  font-weight: 400;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

/* --- GRID AREA POR RESOLUCION PARA .cont_diapo1 --- */

/* Large Desktop (1441px+) - 6x6 */
@media screen and (min-width: 1441px) {
  #info-carrito .cont_diapo1 {
    grid-area: 1 / 1 / 7 / 8; /* 6x6 en el lado derecho */
  }
  #info-carrito .diapo1_title {
    font-size: 4rem;
  }
  #info-carrito .diapo1_h2 {
    font-size: 1.5rem;
  }
}

/* Desktop (992px - 1440px) */
@media screen and (min-width: 992px) and (max-width: 1440px) {
  #info-carrito .cont_diapo1 {
    grid-area: 1 / 1 / 7 / 5; /* Fila 1-6, Columna 1-4 */
  }
  #info-carrito .diapo1_title {
    font-size: 3.5rem;
  }
  #info-carrito .diapo1_h2 {
    font-size: 1.3rem;
  }
}

/* Tablet (768px - 991px) - 6x3 */
@media screen and (min-width: 768px) and (max-width: 991px) {
  #info-carrito .cont_diapo1 {
    grid-area: 1 / 1 / 4 / 9; /* 6x3 */
  }
  #info-carrito .diapo1_title {
    font-size: 2.5rem;
  }
  #info-carrito .diapo1_h2 {
    font-size: 1.2rem;
  }
}

/* Movil (767px-) - 5x2 */
@media screen and (max-width: 767px) {
  #info-carrito .cont_diapo1 {
    grid-area: 1 / 1 / 3 / 7; /* 5x2 (ajustado al ancho posible) */
    align-items: flex-start;
    text-align: left;
  }
  #info-carrito .diapo1_title {
    font-size: 2rem;
  }
  #info-carrito .diapo1_h2 {
    font-size: 1rem;
  }
}

/* --- ESTILOS GENERALES DIAPOSITIVA 2 --- */

#info-carrito .diapo2 {
  display: flex;
  flex-direction: column;
  padding: 40px;
  box-sizing: border-box;
  gap: 20px;
}

#info-carrito .tex1-cont-diapo2 {
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  gap: 20px;
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
}

#info-carrito .contenedor_inferior_diapo2 {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 20px;
  flex: 1; /* Permite que este contenedor llene el espacio restante */
  min-height: 0;
  overflow: hidden;
}

#info-carrito .diapo2_h2 {
  font-family: 'museo-sans', sans-serif;
  font-weight: 300;
  color: #666462 !important;
  margin: 0;
  line-height: 1.2;
}

#info-carrito .diapo2_p {
  font-family: 'museo-sans', sans-serif;
  font-weight: 400;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

#info-carrito .anim_car1 {
  background-color: #ffffff; /* Color sólido opaco temporal */
  border-radius: 20px;
  flex: 2; /* 2/3 del espacio total disponible */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#info-carrito .mini_cont_carrusel1 {
  background-color: #ffffff; /* Color sólido opaco temporal */
  border-radius: 20px;
  flex: 1; /* 1/3 del espacio total disponible */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#info-carrito .mini_cont_carrusel1 .animacion-rotacion {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* --- CARRUSEL DE TEXTOS SUPERPUESTO (.mini_cont_carrusel1) --- */
#info-carrito .overlay-carrusel-textos {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none; /* No bloquea interactividad inferior si la hay */
}

#info-carrito .track-textos {
  display: flex;
  width: 500%; /* 5 slides: 4 originales + 1 clon de loop */
  height: 100%;
  animation: sliderTextosLoop 16s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

#info-carrito .slide-texto {
  width: 20%; /* 100% de 5 slides = 20% */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Acomoda el texto en la parte inferior */
  align-items: center;
  padding: 30px 20px;
  box-sizing: border-box;
  text-align: center;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0) 60%
  );
  color: #fff;
}

#info-carrito .slide-title {
  font-family: 'museo-sans', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  margin: 0 0 10px 0;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
}

#info-carrito .slide-desc {
  font-family: 'museo-sans', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.4;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
}

@keyframes sliderTextosLoop {
  0%,
  15% {
    transform: translateX(0);
  }
  25%,
  40% {
    transform: translateX(-20%);
  }
  50%,
  65% {
    transform: translateX(-40%);
  }
  75%,
  90% {
    transform: translateX(-60%);
  }
  100% {
    transform: translateX(-80%);
  }
}

/* --- ESTILOS GENERALES DIAPOSITIVA 3 --- */
#info-carrito .diapo3 {
  display: flex;
  flex-direction: row;
  padding: 40px;
  box-sizing: border-box;
  gap: 20px;
}

#info-carrito .cont_diapo3 {
  flex: 1; /* Mitad izquierda del espacio */
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0; /* Permite que el contenedor se encoja ignorando el max-content de sus hijos */
  min-height: 0;
}

#info-carrito .cont_text_diapo3 {

  border-radius: 20px;
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  gap: 20px;
  min-height: 250px;
}

#info-carrito .diapo3_h2 {
  font-family: 'museo-sans', sans-serif;
  font-weight: 900;
  color: #333;
  margin: 0;
  line-height: 1.2;
}

#info-carrito .diapo3_p {
  font-family: 'museo-sans', sans-serif;
  font-weight: 400;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

#info-carrito .carrusel_img_diapo3 {
  background-color: #ffffff; /* Color de fondo blanco */
  border-radius: 20px;
  flex: 1; /* Ocupa el espacio restante debajo del texto */
  display: flex;
  align-items: stretch; /* Permite que el hijo herede el alto completo */
  overflow: hidden;
  position: relative;
  width: 100%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#info-carrito .track-imagenes {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%; /* Permite pasar el alto al hijo img */
  animation: scrollImagenes 30s linear infinite;
}

#info-carrito .track-imagenes:hover {
  animation-play-state: paused;
}

#info-carrito .track-imagenes img {
  height: 85%; /* Las imágenes ocuparán el 85% de la caja de fondo */
  max-height: 100%; /* Asegura que no sobrepasen el padre jamás */
  width: auto;
  object-fit: contain;
  margin-right: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@keyframes scrollImagenes {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50%));
  }
}

#info-carrito .dido_loop {
  width: fit-content;
  height: auto;
  background: linear-gradient(to bottom, #ffa046, #f87d29); /* Degradado naranja */
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 30px rgba(255, 160, 70, 0.7);
}

#info-carrito .dido_loop .animacion-dido-saludando {
  width: 25vw; /* Tamaño disminuido en desktop */
  max-width: 450px; /* Nuevo tope más pequeño en large desktop */
  height: auto;
  object-fit: contain;
}

/* --- CARRUSEL DE TEXTOS SUPERPUESTO (DIDO LOOP) --- */
#info-carrito .dido-overlay-textos {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none; /* No bloquea clics hacia Dido */
  overflow: hidden; /* Oculta lo que queda fuera del contenedor (el texto que "espera") */
}

#info-carrito .dido-track-textos {
  display: flex;
  width: 400%; /* 4 slides: 3 originales + 1 clon de loop */
  height: 100%;
  /* Usamos steps o animación continua para evitar desfasaje */
  animation: sliderTextosDido 12s infinite cubic-bezier(0.8, 0, 0.2, 1);
}

#info-carrito .dido-slide-texto {
  flex: 0 0 25%; /* Evita que los recuadros se deformen */
  width: 25%; /* 100% (del padre de 400%) / 4 slides = 100% real cada uno */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Acomoda el texto en la parte superior */
  align-items: center;
  padding: 30px 20px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
}

#info-carrito .dido-slide-title {
  font-family: 'museo-sans', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  margin: 0 0 10px 0;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
  color: #fff !important;
}

#info-carrito .dido-slide-desc {
  font-family: 'museo-sans', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.4;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
  color: #fff !important;
}

@keyframes sliderTextosDido {
  0%,
  20% {
    transform: translateX(0);
  }
  33.33%,
  53.33% {
    transform: translateX(-25%);
  }
  66.66%,
  86.66% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(-75%);
  }
}

/* --- ESTILOS GENERALES DIAPOSITIVA 4 --- */
#info-carrito .diapo4 {
  display: flex;
  flex-direction: row;
  padding: 40px;
  box-sizing: border-box;
  gap: 20px;
}

#info-carrito .diapo4 .text_cont_diapo2 {
  flex: 2; /* Ocupa 2 partes (2/3) */
  padding: 20px;
  border-radius: 20px;
  min-height: 300px;
  display: flex; /* Para gestionar a sus hijos organizadamente */
  flex-direction: column;
  gap: 20px;
}

#info-carrito .diapo4 .diapo4_text_wrapper {
  width: 100%; /* Toma todo el ancho de su contenedor padre */
  height: max-content; /* Toma el alto de su contenido */
  flex: 0 0 auto;
}

#info-carrito .diapo4 .cerebrin_box {
  width: 100%;
  flex: 1; /* Puede tomar el resto del alto disponible si es necesario */
  background: linear-gradient(to bottom, #6af6d5, #34dcaf);
  border-radius: 20px;
  overflow: hidden; /* Evita que el vídeo se salga de los bordes redondeados */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8px 30px rgba(106, 246, 213, 0.8);
}

#info-carrito .diapo4 .cerebrin_box .cerebrin_pesas {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row; /* Coloca uno al lado del otro */
  justify-content: space-evenly; /* Distribuye el espacio entre ambos */
  align-items: center;
}

#info-carrito .diapo4 .cerebrin_box .animacion_cerebrin {
  width: 45%; /* Reducido para que quepa junto a la imagen horizontalmente */
  height: auto;
  object-fit: contain;
}

#info-carrito .diapo4 .cerebrin_box img {
  width: 45%; /* Reducido para que quepa junto a la animación horizontalmente */
  height: auto;
  object-fit: contain;
}

#info-carrito .diapo4 .cerebrin_box .video-cerebrin {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Para que se vea completo y el degradado llene el resto, en caso de diferentes proporciones. cover si se prefiere llenarlo */
}

#info-carrito .diapo4_h2 {
  font-family: 'museo-sans', sans-serif;
  font-weight: 900;
  color: #333;
  margin: 0 0 20px 0; /* Margen inferior para separarlo del párrafo */
  line-height: 1.2;
}

#info-carrito .diapo4_p {
  font-family: 'museo-sans', sans-serif;
  font-weight: 400;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

#info-carrito .diapo4 .cont_diapo4 {
  flex: 1; /* Ocupa 1 parte (1/3 restante) */
   border-radius: 20px;
  min-height: 300px;
  display: flex;
  flex-direction: column; /* Apila los contenedores verticalmente */
  gap: 20px; /* Separación entre el contenedor de arriba y abajo */
}

#info-carrito .diapo4 .cont_diapo4_top {
  flex: 1; /* Toma 1 parte (1/4 de la altura total disponible) */
  min-height: 0; /* Previene que el contenido expanda forzosamente la caja */
  width: 100%;
  display: flex;
  background: linear-gradient(to bottom, #418eff, #2c6eed);
  border-radius: 15px;
  overflow: hidden; /* Importante para el carrusel */
  position: relative;
  box-shadow: 0 8px 30px rgba(65, 142, 255, 0.8); /* Sombra con el color #418eff más intensa */
}

/* --- CARRUSEL BENEFICIOS DIAPO 4 TOP --- */
#info-carrito .diapo4 .carousel_beneficios_wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  container-type: inline-size; /* Para que sus hijos puedan escalar tamaño en CQI */
}

#info-carrito .diapo4 .carousel_beneficios_track {
  display: flex;
  width: 400%; /* 4 slides (3 + 1 clon) = 400% para el loop infinito */
  height: 100%;
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1); /* Movimiento más suave y natural */
}

#info-carrito .diapo4 .beneficio_slide {
  width: 25%; /* 100% / 4 slides */
  flex: 0 0 25%; /* Bloquea reducciones y deformaciones */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 4cqi 6cqi;
  box-sizing: border-box;
}

#info-carrito .diapo4 .beneficio_h3 {
  font-family: 'museo-sans', sans-serif;
  font-weight: 800;
  font-size: clamp(1.2rem, 5cqi, 2.5rem);
  color: #ffffff !important;
  margin: 0 0 2cqi 0;
}

#info-carrito .diapo4 .beneficio_p {
  font-family: 'museo-sans', sans-serif;
  font-weight: 400;
  font-size: clamp(0.85rem, 3.5cqi, 1.5rem);
  color: #ffffff !important;
  margin: 0;
  line-height: 1.4;
}

#info-carrito .diapo4 .cont_diapo4_bottom {
  flex: 3; /* Toma 3 partes (3/4 de la altura total disponible) */
  width: 100%;
  display: flex;
  background: linear-gradient(to bottom, #746add, #5041cc);
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(80, 65, 204, 0.8); /* Sombra con el color #5041cc más intensa */
}

/* --- TAMAÑOS DE FUENTE Y RESPONSIVE --- */

/* Large Desktop (1441px+) */
@media screen and (min-width: 1441px) {
  #info-carrito .diapo4 .cont_diapo4 {
    flex-direction: column; /* Cambiado a columna para apilar de arriba a abajo */
  }
  #info-carrito .diapo4 .cont_diapo4_top {
    flex: 1;
  }
  #info-carrito .diapo4 .cont_diapo4_bottom {
    flex: 2;
  }

  #info-carrito .diapo2_h2,
  #info-carrito .diapo3_h2 {
    font-size: 4rem;
  }
  #info-carrito .diapo4_h2 {
    font-size: 2.5rem; /* Ajustado para Diapo 4 */
  }
  #info-carrito .diapo5_h2 {
    font-size: 4rem;
  }
  #info-carrito .diapo2_p,
  #info-carrito .diapo3_p {
    font-size: 1.5rem;
  }
  #info-carrito .diapo4_p {
    font-size: 1.2rem; /* Ajustado para Diapo 4 */
  }
  #info-carrito .diapo5_p {
    font-size: 1.5rem;
  }
}

/* Desktop (992px - 1440px) */
@media screen and (min-width: 992px) and (max-width: 1440px) {
  #info-carrito .diapo4 .cont_diapo4 {
    flex-direction: column; /* Cambiado a columna para apilar de arriba a abajo */
  }
  #info-carrito .diapo4 .cont_diapo4_top {
    flex: 1;
  }
  #info-carrito .diapo4 .cont_diapo4_bottom {
    flex: 2;
  }

  #info-carrito .diapo2_h2,
  #info-carrito .diapo3_h2 {
    font-size: 3.5rem;
  }
  #info-carrito .diapo4_h2 {
    font-size: 2.2rem; /* Ajustado para Diapo 4 */
  }
  #info-carrito .diapo5_h2 {
    font-size: 3.5rem;
  }
  #info-carrito .diapo2_p,
  #info-carrito .diapo3_p {
    font-size: 1.3rem;
  }
  #info-carrito .diapo4_p {
    font-size: 1.1rem; /* Ajustado para Diapo 4 */
  }
  #info-carrito .diapo5_p {
    font-size: 0.95rem; /* Reducido para mejor legibilidad */
  }
}

/* Tablet (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  #info-carrito .diapo2_h2,
  #info-carrito .diapo3_h2 {
    font-size: 2.5rem;
  }
  #info-carrito .diapo4_h2 {
    font-size: 1.8rem; /* Ajustado para Diapo 4 */
  }
  #info-carrito .diapo5_h2 {
    font-size: 1.5rem; /* Escalado adecuado para Desktop */
  }
  #info-carrito .diapo2_p,
  #info-carrito .diapo3_p {
    font-size: 1.2rem;
  }
  #info-carrito .diapo4_p {
    font-size: 0.95rem; /* Ajustado para Diapo 4 */
  }
  #info-carrito .diapo5_p {
    font-size: 0.85rem; /* Escalado adecuado para Desktop */
  }
  #info-carrito .dido-slide-title {
    font-size: 1.3rem;
  }
  #info-carrito .dido-slide-desc {
    font-size: 0.9rem;
  }
  #info-carrito .diapo3 {
    flex-direction: column;
  }
  #info-carrito .diapo4 {
    flex-direction: column-reverse; /* Hace que el recuadro que estaba segundo en HTML aparezca arriba */
  }
  #info-carrito .diapo4 .text_cont_diapo2 {
    min-height: auto; /* Dejar que fluya naturalmente al estar al lado del otro */
    flex: 1;
  }
  #info-carrito .diapo4 .cont_diapo4 {
    min-height: auto;
    flex-direction: row; /* Hijos (.cont_diapo4_top y .cont_diapo4_bottom) uno al lado del otro */
    flex: 1;
  }
  #info-carrito .diapo4 .cont_diapo4_top {
    flex: 1; /* Ocupará 1/3 del espacio horizontal de su contenedor principal */
  }
  #info-carrito .diapo4 .cont_diapo4_bottom {
    flex: 2; /* Ocupará 2/3 del espacio horizontal de su contenedor principal */
  }
  #info-carrito .dido_loop {
    width: 100%;
  }
  #info-carrito .dido_loop .animacion-dido-saludando {
    width: 40%;
    margin: 0 0 0 auto; /* Alineado a la derecha */
    max-width: none;
  }
  #info-carrito .dido-slide-texto {
    align-items: flex-start; /* Contenido a la izquierda */
    text-align: left;
    padding: 30px 12.5% 30px 20px; /* 12.5% del track (que mide 400%) equivale al 50% de la pantalla visible */
  }
  #info-carrito .diapo4 .cont_diapo4_bottom .wrap_card {
    transform: scale(
      0.65
    ); /* Escala todo el bloque de cartas al 65% para Tablet */
  }
  #info-carrito .diapo5 {
    flex-direction: column;
  }
  #info-carrito .diapo5 .diapo5_text_cont {
    width: 100%;
    height: 33.333%;
  }
  #info-carrito .diapo5 .diapo5_cont {
    width: 100%;
    height: 66.666%;
  }
}

/* Movil (767px-) */
@media screen and (max-width: 767px) {
  #info-carrito .diapo2,
  #info-carrito .diapo3,
  #info-carrito .diapo4,
  #info-carrito .diapo5 {
    padding: 20px;
  }
  #info-carrito .diapo3 {
    flex-direction: column;
  }
  #info-carrito .diapo4 {
    flex-direction: column-reverse; /* Hace que el recuadro de texto aparezca arriba en móviles */
  }
  #info-carrito .diapo4 .text_cont_diapo2 {
    min-height: auto; /* Dejar que fluya naturalmente al estar al lado del otro */
    flex: 1;
  }
  #info-carrito .diapo4 .cont_diapo4 {
    min-height: auto;
    flex-direction: column; /* Cambiado a columna para apilar de arriba a abajo en móviles */
    flex: 1;
  }
  #info-carrito .contenedor_inferior_diapo2 {
    flex-direction: column-reverse; /* Apilar en móviles y mostrar mini_cont_carrusel1 arriba */
  }
  #info-carrito .tex1-cont-diapo2 {
    align-items: flex-start;
    text-align: left;
    padding: 20px;
  }
  #info-carrito .diapo2_h2,
  #info-carrito .diapo3_h2 {
    font-size: 2rem;
  }
  #info-carrito .diapo4_h2 {
    font-size: 1.5rem; /* Ajustado para Diapo 4 */
  }
  #info-carrito .diapo5_h2 {
    font-size: 1.25rem; /* Tamaño óptimo para Móviles y Tablets pequeñas */
  }
  #info-carrito .diapo2_p,
  #info-carrito .diapo3_p {
    font-size: 1rem;
  }
  #info-carrito .diapo4_p {
    font-size: 0.85rem; /* Ajustado para Diapo 4 */
  }
  #info-carrito .diapo5_p {
    font-size: 0.75rem; /* Tamaño óptimo para Móviles */
  }
  #info-carrito .dido_loop {
    width: 100%;
  }
  #info-carrito .dido_loop .animacion-dido-saludando {
    width: 80%; /* Aumentado desde 60% */
    max-width: none;
    margin: 0 auto;
  }
  #info-carrito .dido-slide-title {
    font-size: 1.2rem;
  }
  #info-carrito .dido-slide-desc {
    font-size: 0.85rem;
  }
  #info-carrito .cont_text_diapo3 {
    min-height: auto;
    padding: 20px;
  }
  #info-carrito .carrusel_img_diapo3 {
    max-height: 200px;
  }
  #info-carrito .diapo4 .cont_diapo4_bottom .wrap_card {
    transform: scale(
      0.55
    ); /* Escala aumentada del bloque de cartas al 55% para ganar tamaño en Mobile */
  }
  #info-carrito .diapo5 {
    flex-direction: column;
  }
  #info-carrito .diapo5 .diapo5_text_cont {
    width: 100%;
    height: 33.333%;
  }
  #info-carrito .diapo5 .diapo5_cont {
    width: 100%;
    height: 66.666%;
  }
}

/* --- ESTILOS CARD STACK ANIMATION (DIAPO 4 BOTTOM) --- */
#info-carrito .diapo4 .cont_diapo4_bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* prevents stack from leaking out */
}

#info-carrito .diapo4 .cont_diapo4_bottom .wrap_card {
  position: relative;
  overflow: visible; /* Permits cards to display without cutoffs vertically */
  width: var(--w-wrap-card);
  height: var(
    --h-card
  ); /* Ajustado a la altura total de la carta para que no se corte arriba/abajo */
  display: flex;
  align-items: center;
  justify-content: center;
  --w-card: 260px; /* Aumentado de 150px para dar más espacio real a la imagen */
  --h-card: 320px; /* Aumentado de 200px proporcionalmente */
  --rotate-card: 15deg;
  --insetX-card: 28px;
  --t-card: calc(var(--insetX-card) * 1.25);
  --w-wrap-card: calc(var(--w-card) + calc(calc(var(--w-card) / 2) * 2));
  transform: scale(
    0.95
  ); /* Escala original más cercana a su tamaño verdadero */
}

#info-carrito .diapo4 .cont_diapo4_bottom .content {
  background-color: transparent;
  overflow: visible; /* Asegurarse de que el SVG no se corte por el div contenedor */
  position: relative;
  width: 100%;
  height: 100%;
}
#info-carrito .diapo4 .cont_diapo4_bottom .content > .card_img_front {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: scale(
    1.35
  ); /* Zoom para recortar el padding transparente interno del SVG */
}
#info-carrito .diapo4 .cont_diapo4_bottom .card:nth-child(1) {
  --delay: 4.3s;
}
#info-carrito .diapo4 .cont_diapo4_bottom .card:nth-child(2) {
  --delay: 7.3s;
}
#info-carrito .diapo4 .cont_diapo4_bottom .card:nth-child(3) {
  --delay: 10.3s;
}
@keyframes opacityCard {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

#info-carrito .diapo4 .cont_diapo4_bottom .card {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  overflow: visible; /* Elimina cualquier recorte que estorbara el SVG escalado */
  animation: rotatingCard 9s cubic-bezier(0.75, 0, 0, 1.01) infinite 0s;
  background: var(--bg);
  border: none; /* Anula herencia del gris #e0e0e0 de categorias.css */
  border-radius: 0; /* Anula herencia de los 50px de categorias.css */
  order: var(--order);
  width: var(--w-card);
  height: var(--h-card);
  z-index: var(--z1);
  top: var(--t1);
  left: var(--l1);
  right: var(--r1);
  transform: var(--trans1);
  --pd: 4px;
  --round: 16px;
  --x1: var(--insetX-card);
  --x2: calc(var(--w-wrap-card) - calc(var(--w-card) + var(--insetX-card)));
  --to-left: rotate(calc(var(--rotate-card) * -1));
  --to-center: calc(var(--w-card) / 2);
  --to-right: rotate(calc(var(--rotate-card) * 1));
}

#info-carrito .diapo4 .cont_diapo4_bottom .card:nth-child(1) {
  --order: 2;
  --bg: transparent; /* Fondo transparente para mostrar sólo el SVG */
  --z1: 2;
  --t1: 0;
  --l1: var(--to-center);
  --r1: var(--to-center);
  --trans1: rotate(calc(var(--rotate-card) * 0));
  --z2: 0;
  --t2: var(--t-card);
  --l2: var(--x1);
  --r2: var(--x2);
  --trans2: var(--to-left);
  --z3: 0;
  --t3: var(--t-card);
  --l3: var(--x2);
  --r3: var(--x1);
  --trans3: var(--to-right);
}
#info-carrito .diapo4 .cont_diapo4_bottom .card:nth-child(2) {
  --order: 3;
  --bg: transparent; /* Fondo transparente para mostrar sólo el SVG */
  --z1: 0;
  --t1: var(--t-card);
  --l1: var(--x2);
  --r1: var(--x1);
  --trans1: var(--to-right);
  --z2: 2;
  --t2: 0;
  --l2: var(--to-center);
  --r2: var(--to-center);
  --trans2: rotate(calc(var(--rotate-card) * 0));
  --z3: 0;
  --t3: var(--t-card);
  --l3: var(--x1);
  --r3: var(--x2);
  --trans3: var(--to-left);
}
#info-carrito .diapo4 .cont_diapo4_bottom .card:nth-child(3) {
  --order: 1;
  --bg: transparent; /* Fondo transparente para mostrar sólo el SVG */
  --z1: 0;
  --t1: var(--t-card);
  --l1: var(--x1);
  --r1: var(--x2);
  --trans1: var(--to-left);
  --z2: 0;
  --t2: var(--t-card);
  --l2: var(--x2);
  --r2: var(--x1);
  --trans2: var(--to-right);
  --z3: 2;
  --t3: 0;
  --l3: var(--to-center);
  --r3: var(--to-center);
  --trans3: rotate(calc(var(--rotate-card) * 0));
}
@keyframes rotatingCard {
  0%,
  99.99% {
    z-index: var(--z1);
    top: var(--t1);
    left: var(--l1);
    right: var(--r1);
    transform: var(--trans1);
  }
  33.33% {
    z-index: var(--z2);
    top: var(--t2);
    left: var(--l2);
    right: var(--r2);
    transform: var(--trans2);
  }
  66.66% {
    z-index: var(--z3);
    top: var(--t3);
    left: var(--l3);
    right: var(--r3);
    transform: var(--trans3);
  }
}

#info-carrito .diapo4 .cont_diapo4_bottom .lines {
  display: none; /* Ocultamos estas líneas que interrumpían visualmente la parte inferior */
}
#info-carrito .diapo4 .cont_diapo4_bottom .lines::after {
  display: none; /* Eliminar este seudoelemento que genera el recorte inferior tipo "suelo" de la baraja */
}

#info-carrito .diapo4 .cont_diapo4_bottom .line {
  position: absolute;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#info-carrito .diapo4 .cont_diapo4_bottom .line::before,
#info-carrito .diapo4 .cont_diapo4_bottom .line::after {
  content: "";
  position: absolute;
  inset: auto;
  background: linear-gradient(
    to right,
    var(--gradient-a-line, #0000),
    var(--gradient-b-line, #0000),
    var(--gradient-c-line, #0000)
  );
  filter: var(--blur-line);
  width: var(--w-line);
  height: var(--h-line);
}
#info-carrito .diapo4 .cont_diapo4_bottom .line:nth-child(1)::before {
  --blur-line: blur(4px);
  --w-line: 100%;
  --h-line: 5px;
  --gradient-b-line: #2f69f2;
}
#info-carrito .diapo4 .cont_diapo4_bottom .line:nth-child(1)::after {
  --w-line: 100%;
  --h-line: 1px;
  --gradient-b-line: #6366f1;
}
#info-carrito .diapo4 .cont_diapo4_bottom .line:nth-child(2)::before {
  --blur-line: blur(4px);
  --w-line: 50%;
  --h-line: 5px;
  --gradient-b-line: #84ccfc;
}
#info-carrito .diapo4 .cont_diapo4_bottom .line:nth-child(2)::after {
  --w-line: 50%;
  --h-line: 1px;
  --gradient-b-line: #14d3f5;
}

/* =====================================================
   DIAPOSITIVA 5 - ECOSISTEMA CONECTADO
   ===================================================== */
#info-carrito .diapo5 {
  display: flex !important; /* Forzar flex sobre el grid de inform.css */
  flex-direction: row;
  width: 100%;
  height: 100%;
  padding: 40px;
}

#info-carrito .diapo5 .diapo5_text_cont {
  width: 33.333%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 5%;
  gap: 20px;
}

#info-carrito .diapo5 .diapo5_cont {
  width: 66.666%;
  height: 100%;
  border-radius: 20px;
  box-shadow: 0 0 30px var(--diapo5-shadow, #80b725);
  transition: box-shadow 0.6s ease-in-out;
}

/* --- CARRUSEL DIAPO 5 --- */
#info-carrito .carrusel_img_diapo5_wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 20px; /* Bordes redondeados opcionales */
}

#info-carrito .carrusel_img_diapo5_track {
  display: flex;
  width: 300%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

#info-carrito .img_slide_d5 {
  width: 33.3333%;
  height: 100%;
  position: relative; /* Clave para posicionar el texto encima de la animación */
}

#info-carrito .img_slide_d5 lottie-player {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Cambiamos a contain para no recortar la animación */
  object-position: bottom; /* Alineamos la animación al fondo del contenedor */
  position: absolute;
  bottom: 0;
  left: 0;
}

#info-carrito .img_slide_d5.slide1 {
  background: linear-gradient(to bottom, #9dcb45, #80b725);
}

#info-carrito .img_slide_d5.slide2 {
  background: linear-gradient(to bottom, #746add, #5041cc);
}

#info-carrito .img_slide_d5.slide3 {
  background: linear-gradient(to bottom, #fc566a, #f82233);
}

/* Texto sobre las animaciones de Diapo 5 */
#info-carrito .diapo5_slide_text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#info-carrito .diapo5_slide_h3 {
  font-family: 'museo-sans', sans-serif;
  font-weight: 900;
  font-size: 1.8rem;
  color: #ffffff !important;
  margin: 0;
  text-align: right;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

#info-carrito .diapo5_slide_p {
  font-family: 'museo-sans', sans-serif;
  font-weight: 400;
  font-size: 1.1rem;
  color: #ffffff !important;
  margin: 0;
  line-height: 1.5;
  text-align: right;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

#info-carrito .diapo5_h2 {
  font-family: 'museo-sans', sans-serif;
  font-weight: 900;
  color: #333;
  margin: 0;
  line-height: 1.2;
  font-size: 3rem; /* Tamaño por defecto (Grande) */
}

#info-carrito .diapo5_p {
  font-family: 'museo-sans', sans-serif;
  font-weight: 400;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

/* Responsive Padding for Desktop and Large Desktop */
@media (min-width: 1024px) {
  #info-carrito .diapo4 .cont_diapo4_bottom {
    padding: 20px;
  }
}

/* Responsive Card Stack Scaling (Debe ir debajo del .wrap_card base para no ser sobreescrito) */
@media screen and (min-width: 1441px) {
  #info-carrito .diapo4 .cont_diapo4_bottom .wrap_card {
    /* La baraja original mide 260px. La achicamos un poco para que respire en su 66% de pantalla */
    --w-card: 210px;
    --h-card: 280px;
    --insetX-card: 22px;
    --w-wrap-card: calc(var(--w-card) + calc(calc(var(--w-card) / 2) * 2));
    width: var(--w-wrap-card);
    height: var(--h-card);
  }
}

@media screen and (min-width: 992px) and (max-width: 1440px) {
  #info-carrito .diapo4 .cont_diapo4_bottom .wrap_card {
    --w-card: 160px; /* Reducida para que quepa cómodamente en escritorios estándar */
    --h-card: 210px;
    --insetX-card: 18px;
    --w-wrap-card: calc(var(--w-card) + calc(calc(var(--w-card) / 2) * 2));
    width: var(--w-wrap-card);
    height: var(--h-card);
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  #info-carrito .diapo4 .cont_diapo4_bottom .wrap_card {
    transform: scale(0.95);
    --w-card: 130px; /* Reducido otra vez desde 160px para el nuevo ancho de flex:2 */
    --h-card: 170px; /* Reducido proporcionalmente desde 210px */
    --insetX-card: 16px;
    --w-wrap-card: calc(var(--w-card) + calc(calc(var(--w-card) / 2) * 2));
    width: var(--w-wrap-card);
    height: var(--h-card);
  }
}

@media screen and (max-width: 767px) {
  #info-carrito .diapo4 .cont_diapo4_bottom .wrap_card {
    /* Eliminado el transform scale para que use el tamaño real de sus variables */
    --w-card: 140px; /* Reducido ligeramente para móviles a petición */
    --h-card: 185px;
    --insetX-card: 16px;
    --w-wrap-card: calc(var(--w-card) + calc(calc(var(--w-card) / 2) * 2));
    width: var(--w-wrap-card);
    height: var(--h-card);
  }
}

/* --- RESPONSIVE DIAPO 5 (Override final) --- */
@media screen and (max-width: 991px) {
  #info-carrito .diapo5 {
    flex-direction: column !important;
  }
  #info-carrito .diapo5 .diapo5_text_cont {
    width: 100% !important;
    height: 33.333% !important;
    padding: 0 0 20px 0 !important; /* Quitamos padding derecho, agregamos abajo */
    align-items: center !important; /* Centramos el bloque de texto */
  }
  #info-carrito .diapo5_h2,
  #info-carrito .diapo5_p {
    text-align: center !important; /* Centramos el texto dentro del bloque */
  }
  #info-carrito .diapo5 .diapo5_cont {
    width: 100% !important;
    height: 66.666% !important;
  }
}

@media screen and (max-width: 767px) {
  #info-carrito .diapo5 {
    padding: 20px !important;
  }
}

/* =====================================================
   DIAPOSITIVA 6 - (Clon temporal de Diapo 5)
   ===================================================== */
#info-carrito .diapo6 {
  display: flex !important;
  flex-direction: row-reverse;
  width: 100%;
  height: 100%;
  padding: 40px;
}

#info-carrito .diapo6 .diapo6_text_cont {
  width: 33.333%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 5%;
  gap: 20px;
}

#info-carrito .diapo6 .diapo6_cont {
  width: 66.666%;
  height: 100%;
}

/* --- CARRUSEL DIAPO 6 --- */
#info-carrito .carrusel_img_diapo6_wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 20px;
}

#info-carrito .carrusel_img_diapo6_track {
  display: flex;
  width: 300%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

#info-carrito .img_slide_d6 {
  width: 33.3333%;
  height: 100%;
  display: flex;
  flex-direction: column-reverse; /* Text on top, animation on bottom */
  justify-content: flex-end; /* Keep text at top if animation is smaller */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#info-carrito .img_slide_d6 lottie-player {
  width: 100%;
  flex: 1; /* Take the remaining space */
  min-height: 0; /* Prevents overflow */
  object-fit: contain;
  object-position: bottom;
}

#info-carrito .img_slide_d6.slide1 {
  background-color: #ffffff;
}
#info-carrito .img_slide_d6.slide2 {
  background-color: #ffffff;
}
#info-carrito .img_slide_d6.slide3 {
  background-color: #ffffff;
}

#info-carrito .diapo6_slide_text {
  width: 100%;
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#info-carrito .diapo6_slide_h3 {
  font-family: 'museo-sans', sans-serif;
  font-weight: 900;
  font-size: 1.8rem;
  color: #666462 !important;
  margin: 0;
  text-align: right;
}

#info-carrito .diapo6_slide_p {
  font-family: 'museo-sans', sans-serif;
  font-weight: 400;
  font-size: 1.1rem;
  color: #666462 !important;
  margin: 0;
  line-height: 1.5;
  text-align: right;
}

#info-carrito .diapo6_h2 {
  font-family: 'museo-sans', sans-serif;
  font-weight: 900;
  color: #333;
  margin: 0;
  line-height: 1.2;
  font-size: 3rem;
  text-align: right;
}

#info-carrito .diapo6_p {
  font-family: 'museo-sans', sans-serif;
  font-weight: 400;
  color: #555;
  margin: 0;
  line-height: 1.5;
  text-align: right;
}

/* RESPONSIVE DIAPO 6 */
@media screen and (min-width: 992px) and (max-width: 1440px) {
  #info-carrito .diapo6_h2 {
    font-size: 1.5rem;
  }
  #info-carrito .diapo6_p {
    font-size: 0.85rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  #info-carrito .diapo6_h2 {
    font-size: 1.25rem;
  }
  #info-carrito .diapo6_p {
    font-size: 0.75rem;
  }
}
@media screen and (max-width: 767px) {
  #info-carrito .diapo6_h2 {
    font-size: 1.25rem;
  }
  #info-carrito .diapo6_p {
    font-size: 0.75rem;
  }
}

@media screen and (max-width: 991px) {
  #info-carrito .diapo6 {
    flex-direction: column !important;
  }
  #info-carrito .diapo6 .diapo6_text_cont {
    width: 100% !important;
    height: 33.333% !important;
    padding: 0 0 20px 0 !important;
    align-items: center !important;
  }
  #info-carrito .diapo6_h2,
  #info-carrito .diapo6_p {
    text-align: center !important;
  }
  #info-carrito .diapo6 .diapo6_cont {
    width: 100% !important;
    height: 66.666% !important;
  }
}

@media screen and (max-width: 767px) {
  #info-carrito .diapo6 {
    padding: 20px !important;
  }
}