/* ========================================
   RESET DE PADDING PARA DIPOSITIVAS
   ======================================== */

/* Reset de padding para .body (afecta a todas las secciones) */
.body {
  padding: 0;
}

/* Agregar padding solo a las secciones de categor�as */
.section.tecn .section-content,
.section.section-gr�fica .section-content,
.section.PIE .section-content,
.section.install .section-content {
  padding: 20px;
}

/* Reset de padding y border para .section-content en secciones de diapositivas */
.section.info-magicbox .section-content,
.section.info-carrito .section-content,
.section.info-pantalla .section-content {
  padding: 0;
  border: none;
}

/* Grid para todas las diapositivas - Large Desktop (1441px+) */
.diapo1,
.diapo2,
.diapo3,
.diapo4,
.diapo5 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 24px;
  /* Reset de padding y margin heredados */
  padding: 0;
  margin: 0;
  /* Visualizaci�n del gap (rojo) */

}

/* =====================================================
   ESTILOS PARA FONDO-5 EN DIA  PO5
   ===================================================== */Z

/* Large Desktop (1441px+) - fondo-5 */
.diapo5 .fondo-5 {
  grid-area: 2 / 1 / 7 / 13; /* Filas 2-6, Columnas 1-12 */
}

/* Desktop (992px - 1440px) */
@media screen and (min-width: 992px) and (max-width: 1440px) {
  /* fondo-5 en Desktop */
  .diapo5 .fondo-5 {
    grid-area: 2 / 1 / 5 / 9; /* Filas 2-4, Columnas 1-8 */
  }

  .diapo1,
  .diapo2,
  .diapo3,
  .diapo4,
  .diapo5 {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 24px;
    /* Reset de padding y margin heredados */
    padding: 0;
    margin: 0;

  }
}

/* Tablet (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  /* fondo-5 en Tablet */
  .diapo5 .fondo-5 {
    grid-area: 1 / 1 / 6 / 9; /* Filas 1-5, Columnas 1-8 */
  }

  .diapo1,
  .diapo2,
  .diapo3,
  .diapo4,
  .diapo5 {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 16px;
    /* Reset de padding y margin heredados */
    padding: 0;
    margin: 0;

  }
}

/* M�vil (767px-) */
@media screen and (max-width: 767px) {
  /* fondo-5 en Mobile */
  .diapo5 .fondo-5 {
    grid-area: 1 / 1 / 4 / 7; /* Filas 1-3, Columnas 1-6 */
  }

  .diapo1,
  .diapo2,
  .diapo3,
  .diapo4,
  .diapo5 {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 12px;
    /* Reset de padding y margin heredados */
    padding: 0;
    margin: 0;

  }
}

/* ============================================================= */
/* == ESTILOS GENERALES DE TEXTOS == */
/* ============================================================= */
#info-magicbox h1,
#info-magicbox h2,
#info-magicbox h3,
#info-magicbox p,
#info-magicbox [class*="title"],
#info-magicbox [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-magicbox .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-magicbox .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-magicbox .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-magicbox .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-magicbox .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-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: 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-magicbox .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-magicbox .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-magicbox .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-magicbox .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-magicbox .car_img.estado-diapo-1 .img-carrito.pose1.activa {
    height: 100%;
    width: auto;
  }
}

/* Móvil (767px-) */
@media screen and (max-width: 767px) {
  #info-magicbox .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-magicbox .car_img.estado-diapo-1 .img-carrito.pose1.activa {
    width: 100%;
    height: auto;
  }
}

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


/* === 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-magicbox.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-magicbox.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-magicbox.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-magicbox.active .car_img.estado-diapo-1 {
    animation: moverCentroHaciaAbajoMovil 1.5s ease-in-out 1.75s forwards;
  }
}

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

#info-magicbox .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-magicbox .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-magicbox .diapo1 {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 16px;
  }
}

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

/* ============================================================= */
/* == CAPA 2: CONTENIDOS DE LAS DIAPOSITIVAS DE MAGICBOX == */
/* ============================================================= */

/* Fondo para todas las diapositivas de info-magicbox */
#info-magicbox .diapositiva {
  background-color: transparent;
}
/* ============================================================= */
/* == ESTILOS UNIFICADOS DE TEXTOS (H2 y P) MAGICBOX == */
/* ============================================================= */

/* 1. ESTILOS BASE (Grosor, fuente, color) */
#info-magicbox .diapo2_h2,
#info-magicbox .diapo3_h2,
#info-magicbox .diapo4_h2,
#info-magicbox .diapo5_h2 {
  font-family: 'museo-sans', sans-serif;
  font-weight: 900;
  color: #333;
  margin: 0;
  line-height: 1.2;
}

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

/* Mantener alineaci�n a la derecha solo para Diapo 4 si as� lo ten�as */
#info-magicbox .diapo4_h2,
#info-magicbox .diapo4_p {
  text-align: right;
}

/* 2. TAMA�OS RESPONSIVOS UNIFICADOS (Basados en Diapo 3) */

/* Large Desktop (1441px+) */
@media screen and (min-width: 1441px) {
  #info-magicbox .diapo2_h2, #info-magicbox .diapo3_h2,
  #info-magicbox .diapo4_h2, #info-magicbox .diapo5_h2 { font-size: 4rem; }

  #info-magicbox .diapo2_p, #info-magicbox .diapo3_p,
  #info-magicbox .diapo4_p, #info-magicbox .diapo5_p { font-size: 1.5rem; }
}

/* Desktop (992px - 1440px) */
@media screen and (min-width: 992px) and (max-width: 1440px) {
  #info-magicbox .diapo2_h2, #info-magicbox .diapo3_h2,
  #info-magicbox .diapo4_h2, #info-magicbox .diapo5_h2 { font-size: 3.5rem; }

  #info-magicbox .diapo2_p, #info-magicbox .diapo3_p,
  #info-magicbox .diapo4_p, #info-magicbox .diapo5_p { font-size: 1.3rem; }
}

/* Tablet (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  #info-magicbox .diapo2_h2, #info-magicbox .diapo3_h2,
  #info-magicbox .diapo4_h2, #info-magicbox .diapo5_h2 { font-size: 2.5rem; }

  #info-magicbox .diapo2_p, #info-magicbox .diapo3_p,
  #info-magicbox .diapo4_p, #info-magicbox .diapo5_p { font-size: 1.2rem; }

  /* Centrar textos en tablet para Diapo 4 y 5 como ten�as originalmente */
  #info-magicbox .diapo4_h2, #info-magicbox .diapo4_p,
  #info-magicbox .diapo5_h2, #info-magicbox .diapo5_p { text-align: center !important; }
}

/* M�vil (767px-) */
@media screen and (max-width: 767px) {
  #info-magicbox .diapo2_h2, #info-magicbox .diapo3_h2,
  #info-magicbox .diapo4_h2, #info-magicbox .diapo5_h2 { font-size: 2rem; }

  #info-magicbox .diapo2_p, #info-magicbox .diapo3_p,
  #info-magicbox .diapo4_p, #info-magicbox .diapo5_p { font-size: 1rem; }

  /* Centrar textos en m�vil para Diapo 4 y 5 */
  #info-magicbox .diapo4_h2, #info-magicbox .diapo4_p,
  #info-magicbox .diapo5_h2, #info-magicbox .diapo5_p { text-align: center !important; }
}
/* --- ESTILOS GENERALES DIAPOSITIVA 1 --- */

#info-magicbox .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-magicbox .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-magicbox .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-magicbox .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-magicbox .cont_diapo1 {
    grid-area: 1 / 1 / 7 / 8; /* 6x6 en el lado derecho */
  }
  #info-magicbox .diapo1_title {
    font-size: 4rem;
  }
  #info-magicbox .diapo1_h2 {
    font-size: 1.5rem;
  }
}

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

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

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

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

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

#info-magicbox .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-magicbox .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-magicbox .diapo2_h2 {
  font-family: 'museo-sans', sans-serif;

  color: #666462 !important;
  margin: 0;
  line-height: 1.2;
}

#info-magicbox .diapo2_p {
  font-family: 'museo-sans', sans-serif;

  color: #555;
  margin: 0;
  line-height: 1.5;
}

#info-magicbox .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-magicbox .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-magicbox .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-magicbox .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-magicbox .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-magicbox .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-magicbox .slide-title {
  font-family: 'museo-sans', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  margin: 0 0 10px 0;

}

#info-magicbox .slide-desc {
  font-family: 'museo-sans', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.4;

}

@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-magicbox .diapo3 {
  display: flex;
  flex-direction: row;
  padding: 40px;
  box-sizing: border-box;
  gap: 20px;
}

#info-magicbox .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-magicbox .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-magicbox .diapo3_h2 {
  font-family: 'museo-sans', sans-serif;

  color: #333;
  margin: 0;
  line-height: 1.2;
}

#info-magicbox .diapo3_p {
  font-family: 'museo-sans', sans-serif;

  color: #555;
  margin: 0;
  line-height: 1.5;
}

#info-magicbox .animacion_edutick {
  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);
}

@media screen and (max-width: 991px) {
  #info-magicbox .animacion_edutick {
    display: none;
  }
}



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

@media screen and (min-width: 992px) {
  #info-magicbox .cont_diapo3 {
    flex: 2; /* 2/3 del espacio */
  }
  #info-magicbox .magicbox_caracteristicas {
    flex: 1; /* 1/3 del espacio */
  }
}

#info-magicbox .magicbox_caracteristicas .animacion-magicbox-caracteristicas {
  width:  100%; /* Tamaño disminuido en desktop */
  max-width:  100%; /* Nuevo tope más pequeño en large desktop */
  height: auto;
  object-fit: contain;
}

/* --- CARRUSEL DE TEXTOS SUPERPUESTO (amimaci�n caracteristicas magicbox) --- */
#info-magicbox .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-magicbox .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 15s infinite cubic-bezier(0.8, 0, 0.2, 1);
}

#info-magicbox .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-magicbox .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-magicbox .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-magicbox .diapo4 {
  display: flex;
  flex-direction: row;
  padding: 40px;
  box-sizing: border-box;
  gap: 20px;
}


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

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

}

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

}

/* Tablet (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  #info-magicbox .diapo2_h2,
  #info-magicbox .diapo3_h2 {
    font-size: 2.5rem;
  }


  #info-magicbox .diapo2_p,



  #info-magicbox .dido-slide-title {
    font-size: 1.3rem;
  }
  #info-magicbox .dido-slide-desc {
    font-size: 0.9rem;
  }
  #info-magicbox .diapo3 {
    flex-direction: column;
  }
  #info-magicbox .diapo4 {
    flex-direction: column-reverse; /* Hace que el recuadro que estaba segundo en HTML aparezca arriba */
  }
  #info-magicbox .diapo4 .text_cont_diapo2 {
    min-height: auto; /* Dejar que fluya naturalmente al estar al lado del otro */
    flex: 1;
  }
  #info-magicbox .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-magicbox .diapo4 .cont_diapo4_top {
    flex: 1; /* Ocupará 1/3 del espacio horizontal de su contenedor principal */
  }
  #info-magicbox .diapo4 .cont_diapo4_bottom {
    flex: 2; /* Ocupará 2/3 del espacio horizontal de su contenedor principal */
  }
  #info-magicbox .dido_loop {
    width: 100%;
  }
  #info-magicbox .dido_loop .animacion-dido-saludando {
    width: 40%;
    margin: 0 0 0 auto; /* Alineado a la derecha */
    max-width: none;
  }
  #info-magicbox .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-magicbox .diapo4 .cont_diapo4_bottom .wrap_card {
    transform: scale(
      0.65
    ); /* Escala todo el bloque de cartas al 65% para Tablet */
  }
  #info-magicbox .diapo5 {
    flex-direction: column;
  }
  #info-magicbox .diapo5 .diapo5_text_cont {
    width: 100%;
    height: 33.333%;
  }
  #info-magicbox .diapo5 .diapo5_cont {
    width: 100%;
    height: 66.666%;
  }
}

/* Movil (767px-) */
@media screen and (max-width: 767px) {
  #info-magicbox .diapo2,
  #info-magicbox .diapo3,
  #info-magicbox .diapo4,
  #info-magicbox .diapo5 {
    padding: 20px;
  }
  #info-magicbox .diapo3 {
    flex-direction: column;
  }
  #info-magicbox .diapo4 {
    flex-direction: column-reverse; /* Hace que el recuadro de texto aparezca arriba en móviles */
  }
  #info-magicbox .diapo4 .text_cont_diapo2 {
    min-height: auto; /* Dejar que fluya naturalmente al estar al lado del otro */
    flex: 1;
  }
  #info-magicbox .diapo4 .cont_diapo4 {
    min-height: auto;
    flex-direction: column; /* Cambiado a columna para apilar de arriba a abajo en móviles */
    flex: 1;
  }
  #info-magicbox .contenedor_inferior_diapo2 {
    flex-direction: column-reverse; /* Apilar en móviles y mostrar mini_cont_carrusel1 arriba */
  }
  #info-magicbox .tex1-cont-diapo2 {
    align-items: flex-start;
    text-align: left;
    padding: 20px;
  }
  #info-magicbox .diapo2_h2,



  #info-magicbox .diapo2_p,



  #info-magicbox .dido_loop {
    width: 100%;
  }
  #info-magicbox .dido_loop .animacion-dido-saludando {
    width: 80%; /* Aumentado desde 60% */
    max-width: none;
    margin: 0 auto;
  }
  #info-magicbox .dido-slide-title {
    font-size: 1.2rem;
  }
  #info-magicbox .dido-slide-desc {
    font-size: 0.85rem;
  }
  #info-magicbox .cont_text_diapo3 {
    min-height: auto;
    padding: 20px;
  }
  #info-magicbox .carrusel_img_diapo3 {
    max-height: 200px;
  }
  #info-magicbox .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-magicbox .diapo5 {
    flex-direction: column;
  }
  #info-magicbox .diapo5 .diapo5_text_cont {
    width: 100%;
    height: 33.333%;
  }
  #info-magicbox .diapo5 .diapo5_cont {
    width: 100%;
    height: 66.666%;
  }
}

/* --- ESTILOS CARD STACK ANIMATION (DIAPO 4 BOTTOM) --- */

#info-magicbox .diapo4 {
  display: flex !important;
  flex-direction: row-reverse;
  width: 100%;
  height: 100%;
  padding: 40px;
}

#info-magicbox .diapo4 .diapo4_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-magicbox .diapo4 .diapo4_cont {
  width: 66.666%;
  height: 100%;
}
/* --- CARRUSEL DIAPO 4 --- */

#info-magicbox .carrusel_img_diapo4_wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 20px; /* Bordes redondeados opcionales */
}

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

#info-magicbox .img_slide_d4 {
  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-magicbox .img_slide_d4 lottie-player {
  width: 100%;
  flex: 1; /* Take the remaining space */
  min-height: 0; /* Prevents overflow */
  object-fit: contain;
  object-position: bottom;
}

#info-magicbox .img_slide_d4.slide1 {
  background-color: #ffffff;
}

#info-magicbox .img_slide_d4.slide2 {
  background-color: #ffffff;
}

#info-magicbox .img_slide_d4.slide3 {
  background-color: #ffffff;
}

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

#info-magicbox .diapo4_slide_h3 {
  font-weight: 900;
  font-size: 1.8rem;
  color: #666462 !important;
  margin: 0;
  text-align: right;
}

#info-magicbox .diapo4_slide_p {
  font-weight: 400;
  font-size: 1.1rem;
  color: #666462 !important;
  margin: 0;
  line-height: 1.5;
  text-align: right;
}

#info-magicbox .diapo4_h2 {
  font-family: 'museo-sans', sans-serif;

  color: #333;
  margin: 0;
  line-height: 1.2;

  text-align: right;
}

#info-magicbox .diapo4_p {
  font-family: 'museo-sans', sans-serif;

  color: #555;
  margin: 0;
  line-height: 1.5;
  text-align: right;
}

/* RESPONSIVE DIAPO 4 */
@media screen and (min-width: 992px) and (max-width: 1440px) {
  #info-magicbox .diapo4_h2 {
    font-size: 2rem;
  }

}
@media screen and (min-width: 768px) and (max-width: 991px) {
  #info-magicbox .diapo4_h2 {
    font-size: 1.5rem;
  }

}
@media screen and (max-width: 767px) {
  #info-magicbox .diapo4_h2 {
    font-size: 1.25rem;
  }

}

@media screen and (max-width: 991px) {
  #info-magicbox .diapo4 {
    flex-direction: column !important;
  }
  #info-magicbox .diapo4 .diapo4_text_cont {
    width: 100% !important;
    height: 33.333% !important;
    padding: 0 0 20px 0 !important;
    align-items: center !important;
  }
  #info-magicbox .diapo4_h2,
  #info-magicbox .diapo4_p {
  text-align: center !important;
}
  #info-magicbox .diapo4 .diapo4_cont {
    width: 100% !important;
    height: 66.666% !important;
  }
}
@media screen and (max-width: 767px) {
  #info-magicbox .diapo4 {
    padding: 20px !important;
  }
}

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

#info-magicbox .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-magicbox .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-magicbox .carrusel_img_diapo5_wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 20px; /* Bordes redondeados opcionales */
}

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

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

#info-magicbox .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-magicbox .img_slide_d5.slide1 {
  background: linear-gradient(to bottom, #9dcb45, #80b725);
}

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

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

/* Texto sobre las animaciones de Diapo 5 */
#info-magicbox .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-magicbox .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-magicbox .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-magicbox .diapo5_h2 {
  font-family: 'museo-sans', sans-serif;

  color: #333;
  margin: 0;
  line-height: 1.2;
}

#info-magicbox .diapo5_p {
  font-family: 'museo-sans', sans-serif;

  color: #555;
  margin: 0;
  line-height: 1.5;
}

/* RESPONSIVE DIAPO 6 */

@media screen and (min-width: 992px) and (max-width: 1440px) {
  #info-magicbox .diapo4_h2 {
    font-size: 1.5rem;
  }

}
@media screen and (min-width: 768px) and (max-width: 991px) {
  #info-magicbox .diapo4_h2 {
    font-size: 1.25rem;
  }

}
@media screen and (max-width: 767px) {
  #info-magicbox .diapo4_h2 {
    font-size: 1.25rem;
  }

}

@media screen and (max-width: 991px) {
  #info-magicbox .diapo4 {
    flex-direction: column !important;
  }
  #info-magicbox .diapo4 .diapo4_text_cont {
    width: 100% !important;
    height: 33.333% !important;
    padding: 0 0 20px 0 !important;
    align-items: center !important;
  }
  #info-magicbox .diapo4_h2,
  #info-magicbox .diapo4_p {
  text-align: center !important;
}
  #info-magicbox .diapo4 .diapo4_cont {
    width: 100% !important;
    height: 66.666% !important;
  }
}

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


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

#info-magicbox .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-magicbox .diapo5 .diapo5_cont {
  width: 66.666%;
  height: 100%;
  background-color: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* RESPONSIVE DIAPO 5 */
@media screen and (min-width: 992px) and (max-width: 1440px) {
  #info-magicbox .diapo5 .diapo5_h2 { font-size: 1.5rem; }

  #info-magicbox .diapo5 .diapo5_p { font-size: 0.85rem; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  #info-magicbox .diapo5 .diapo5_h2 { font-size: 1.25rem; }

  #info-magicbox .diapo5 .diapo5_p { font-size: 0.75rem; }
}
@media screen and (max-width: 767px) {
  #info-magicbox .diapo5 .diapo5_h2 { font-size: 1.25rem; }

  #info-magicbox .diapo5 .diapo5_p { font-size: 0.75rem; }
}

@media screen and (max-width: 991px) {
  #info-magicbox .diapo5 {
    flex-direction: column !important;
  }
  #info-magicbox .diapo5 .diapo5_text_cont {
    width: 100% !important;
    height: 33.333% !important;
    padding: 0 0 20px 0 !important;
    align-items: center !important;
  }
  #info-magicbox .diapo5 .diapo5_h2,
  #info-magicbox .diapo5 .diapo5_p {
    text-align: center !important;
  }
  #info-magicbox .diapo5 .diapo5_cont {
    width: 100% !important;
    height: 66.666% !important;
  }
}

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


/* --- MODIFICACIONES SOLICITADAS DIAPO 2 --- */

/* Cambio de color de la sombra/degradado a #746ADD con transparencia */
#info-magicbox .slide-texto {
  background: linear-gradient(
    to top,
    rgba(116, 106, 221, 0.85) 0%,
    rgba(116, 106, 221, 0) 60%
  ) !important;
}

/* Tablet: Animación en el TOP del contenedor en vez de CENTRADO */
@media screen and (min-width: 768px) and (max-width: 991px) {
  #info-magicbox .mini_cont_carrusel1 {
    align-items: flex-start !important;
  }
}

/* Móvil: Texto responsivo para evitar recorte y animación en el CENTRO */
@media screen and (max-width: 767px) {
  #info-magicbox .slide-texto {
    padding: 10px 10px !important;
  }

  #info-magicbox .slide-title {
    font-size: 1.1rem !important;
    margin: 0 0 5px 0 !important;
  }

  #info-magicbox .slide-desc {
    font-size: 0.85rem !important;
  }

  /* Asegurar que la animación rotación se centre verticalmente */
  #info-magicbox .mini_cont_carrusel1 {
    align-items: center !important;
  }
}

/* =====================================================
   OCULTAR IMAGEN EN DIAPOS 2, 3, 4 y 5
   ===================================================== */
#info-magicbox .car_img.estado-diapo-2,
#info-magicbox .car_img.estado-diapo-3,
#info-magicbox .car_img.estado-diapo-4,
#info-magicbox .car_img.estado-diapo-5 {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}