/* .sidebar .menu-bar .mode-event{
    border-radius: 6px;
    background: linear-gradient(to right, rgb(238, 202, 255)00, #ff7dad);
    position: relative;
    transition: var(--tran-05);
}


.sidebar .menu-bar .mode-event {
    border-radius: 6px;
    background-color: var(--primary-color-light);
    position: relative;
    transition: var(--tran-05);
}

.menu-bar .mode-event .icon-mode-event {
    height: 50px;
    width: 60px;
}

.menu-bar .button-content .toggle-switch-event{
    position: absolute;
    right: 0;
    height: 100%;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
}

.toggle-switch-event .switch-event {
    position: relative;
    height: 22px;
    width: 40px;
    border-radius: 25px;
    background-color: white;
    transition: var(--tran-05);
}

.switch-event::before {
    content: '';
    position: absolute;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    top:50%;
    left: 5px;
    transform: translateY(-50%);
    background-color: rgb(255, 36, 200);
    transition: var(--tran-04);
}

body.love-event .switch-event::before {
    left: 20px;
}

.mode-event .icon-mode-event i {
    position: absolute;
}

.mode-event .icon-mode-event  i.love{
    opacity: 0;
}

body.love-event .mode-event .icon-mode-event i.love {
    opacity: 1;
}






/* Estilo específico para cada contenedor */
#personalizar {
    background-color: #ffffff; /* Fondo blanco */
    border: 1px solid #ffffff; /* Borde ligero */
    margin: 20px 0; /* Espaciado entre secciones */
    padding: 20px;
    text-align: center;
}




#personalizar {
    height: 400px; /* Altura de la sección Personalizar */
}

#personalizar h2 {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}





/* carrusel css 
/* Estilos generales para el carrusel */

#carrusel-evento {
    text-align: center;
    color: #fff;
    padding: 30px 0 0 0;
}


.carousel-container-event {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    max-height: 500px;
}

.carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
    max-height: 500px;
}

.carousel-item {
    min-width: 100%;
    position: relative;
    transition: opacity 1s ease-in-out;
}

.carousel-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Estilo para las leyendas de cada imagen */
.carousel-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 10px;
}

.carousel-caption h3 {
    font-size: 32px;
    margin-bottom: 10px;
    font-family: 'Creepster', sans-serif;
}

.carousel-caption p {
    font-size: 18px;
    margin-bottom: 15px;
    font-family: Arial, sans-serif;
}

.carousel-caption .btn-halloween {
    background-color: #FF5733;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 18px;
    transition: background-color 0.3s ease;
}

.carousel-caption .btn-halloween:hover {
    background-color: #ff7f50;
}

/* Controles de avance y retroceso */
.carousel-control {
    position: absolute;
    top: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 20px;
    cursor: pointer;
    font-size: 30px;
    z-index: 10;
    border-radius: 5px;
}

.prev {
    left: 10px;
    transform: translateY(-50%);
}

.next {
    right: 10px;
    transform: translateY(-50%);
}

.carousel-control:hover {
    background-color: rgba(0, 0, 0, 0.8);
}



@media (max-width: 550px){
  
  #carrusel-evento {
      text-align: center;
      color: #fff;
      padding: 50px 0;
      margin-top: 50px;
  }
}



/* Contenedor principal */
.efectos-event {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 120px;
    transform: translateX(0);
    transition: transform 1s ease;
}

/* Los grupos estarán dentro de un contenedor flexible */
/* Los subdivs dentro de cada grupo */
/* Estilo para el color en modo claro */
.path-fill {
    fill: rgb(245, 243, 243);
  }
    /* Estilo para el color en modo oscuro */
  body.dark .path-fill {
    fill: #1f1c1c;
  }

  .wave{
        margin-top: -80px;
   }

.efect-divs {
    flex: 1 0 21%; /* Por defecto, cada subdiv ocupa el 21% del contenedor */
    height: 65px;
    margin: 2%;
    background-color: #bbbbbb5d;
    text-align: center;
    color: rgb(0, 0, 0);
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(49, 49, 49, 0.432);
}


body.dark .efect-divs {
    color: rgb(255, 255, 255); 
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.432);/* Cambiar color al pasar el mouse */
}



/* Para pantallas más grandes (más de 850px), mostrar 3 subdivs por grupo */
@media (max-width: 850px) {
    .efect-divs {
        flex: 1 0 29%;  /* Cada subdiv ocupa el 30% del ancho del grupo, mostrando 3 subdivs */
        margin: 2%;  
    }
}

@media(max-width: 650px) {
    .efect-divs {
        flex: 1 0 48%;
        margin: 1%;     /* Cada subdiv ocupa el 45% del ancho del grupo, mostrando 2 subdivs */
    }
}

@media(max-width: 650px) {
    .wave{
        margin-top: -120px;
    }
}


/* Opcional: Estilo adicional */
.efect-divs:hover {
    background-color: #4e4e4e5d;  /* Cambiar color al pasar el mouse */
}


body.dark .efect-divs:hover {
    color: rgb(255, 255, 255);
    background-color: #ffffff9c;  /* Cambiar color al pasar el mouse */
}


  
  .carousel-track-event {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    min-height: 600px;
  }


/* Contenedor de carga que ocupa el 100% del contenedor de productos */
.loading-ghost {
  position: absolute; /* Posicionar dentro del contenedor de productos */
  top: 0;
  left: 0;
  width: 100%;  /* Ocupa todo el ancho */
  height: 100%; /* Ocupa toda la altura */
  display: none; /* Inicialmente oculto */
  justify-content: center;
  align-items: center;
  background-color: rgb(235, 233, 233);  /* Fondo semitransparente */
  z-index: 10;  /* Aseguramos que se superponga a los productos */
  display: flex;
  /* Centrar el círculo de carga */
  align-items: center;
  justify-content: center;
}


body.dark .loading-ghost {
  position: absolute; /* Posicionar dentro del contenedor de productos */
  top: 0;
  left: 0;
  width: 100%;  /* Ocupa todo el ancho */
  height: 100%; /* Ocupa toda la altura */
  display: none; /* Inicialmente oculto */
  justify-content: center;
  align-items: center;
  background-color: #292424;  /* Fondo semitransparente */
  z-index: 10;  /* Aseguramos que se superponga a los productos */
  display: flex;
  /* Centrar el círculo de carga */
  align-items: center;
  justify-content: center;
}
/* Círculo giratorio */
/* Estilo para el fantasmita giratorio */
.ghost {
  font-size: 50px;  /* Tamaño grande para el emoji de fantasma */
  animation: spinGhost 2s linear infinite;  /* Animación del giro */
}



/* Círculo de colores con borde y degradado */

/* Definir la animación de giro para el fantasmita */
@keyframes spinGhost {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Animación para girar el círculo alrededor del fantasmita */
@keyframes spinColors {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* Estilo para el contenedor de la imagen */
.image-container {
    width: 100%;  /* Ancho completo del contenedor */
    height: 300px; /* Altura fija de 300px */
    overflow: hidden;  /* Asegurarse de que la imagen no sobresalga */
}

.image-container img {
    width: 100%; /* Ancho de la imagen al 100% */
    height: 100%; /* Altura de la imagen al 100% */
    object-fit: cover; /* Asegura que la imagen cubra todo el contenedor sin deformarse */
}
/* Estilo de la calabaza sobresaliente */
#calabaza {
    position: relative;
    top: 125px;  /* Hacer que sobresalga más de la parte superior */
    left: 90%;  /* Ajusta este valor para que se mueva más a la derecha */
    width: 120px;  /* Ajusta el tamaño de la calabaza */
    height: auto;  /* Mantener las proporciones */
    z-index: 1;
}


#modo-efecto{
    margin-top: -110px;
}

#fantasmin{
    position: relative;
    top: 180px;  /* Hacer que sobresalga más de la parte superior */
    width: 120px;  /* Ajusta el tamaño de la calabaza */
    height: auto;  /* Mantener las proporciones */
    z-index: 1;
}


.seccion-camisas{
    margin-top: -100px;
}









/* Estilo para el icono fijo */
.music-icon {
    position: fixed;
    bottom: 20px;  /* Espacio desde la parte inferior */
    right: 20px;   /* Espacio desde la parte derecha */
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, #fcdd7a, #b39228);/* Naranja Halloween */
    border-radius: 50%;  /* Hacemos el círculo */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    z-index: 999; /* Asegura que el icono esté encima de otros elementos */
    transition: background-color 0.3s ease;

}

/* Estilo para el icono de la música */
#music-note {
    font-size: 30px;
    color: white;
    transition: opacity 0.3s ease;
}

/* Estilo para la X (inicialmente oculta) */
#close-icon {
    font-size: 35px;
    color: white;
    position: absolute; /* Posicionamos la X sobre la nota musical */
    display: none; /* Inicialmente oculta */
}

/* Hover - Cuando el mouse pasa sobre el icono */
.music-icon:hover {
    background-color: #ff7f00; /* Cambio de color cuando pasa el mouse */
}



/*  Personalizar */

.boton-personalizar-evento {
  background: linear-gradient(90deg, #a94ff5, #6cc6ff);
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 0.9rem;
  margin-bottom: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

.boton-personalizar-evento:hover {
  background: linear-gradient(90deg, #6cc6ff, #a94ff5);
}



.prev-btn-event {
  left: 10px;
}

.next-btn-event {
  right: 10px;
}

.carousel-btn-personalizar-event{
  position: absolute;
  top: 48%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 2rem;
  color: rgb(255, 255, 255);
  z-index: 10;
  cursor: pointer;
  padding: 10px;
}