/* ANIMACION PARA IMAGENES */
.imgefecto {
	opacity: 0; /* Comienza con la imagen invisible */
	transition: opacity 0.3s ease-in-out; /* Agrega una transición suave */
  }
.imgefecto2 {
	opacity: 0; /* Comienza con la imagen invisible */
	transition: opacity 0.3s ease-in-out; /* Agrega una transición suave */
  }
  .producto-imagen{
	opacity: 0; /* Comienza con la imagen invisible */
	transition: opacity 0.3s ease-in-out; /* Agrega una transición suave */
  }



 
 /* ESTILOS PARA TABLA COLOR AMARILLO  */
  .custom-table-amarillo     td {
    padding: 4px;
    text-align: center;
    text-align: left;
    font-weight: bold;
  }


  /* Aplica colores alternados a las filas */
  .custom-table-amarillo tbody tr:nth-child(even) {
    background-color: white;
  }

  .custom-table-amarillo tbody tr:nth-child(odd) {
    background-color: #FFCB01; /* Color para las filas impares */
  }

 /* ESTILOS PARA TABLA COLOR VERDE  */
 .custom-table-verde     td {
  padding: 4px;
  text-align: center;
  text-align: left;
  font-weight: bold;
}


/* Aplica colores alternados a las filas */
.custom-table-verde tbody tr:nth-child(even) {
  background-color: white;
}

.custom-table-verde tbody tr:nth-child(odd) {
  background-color: #1EAC46; /* Color para las filas impares */
}
  /* ESTILOS PARA POSICIONAR LOS BOTONES */
/* Estilos para el div contenedor */
.container-div {
    height: 600px;
    overflow: auto;
    position: relative; /* Necesario para posicionar los botones */
  }

  /* Estilos para los botones */
  .button-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0px;
    background-color: white; /* Color de fondo */
  }

  .button-container button {
    margin-right: 10px;
  }



/* ESTILOS PARA COLOCAR TEXTO EN LA IMAGEN */
  .image-container {
    position: relative;
  }
  
  #main-image {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  #text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  
  #text1 {
    font-size: 20px !important;
    font-weight: bold;
    font-size: 2em; /* Tamaño de fuente relativo */
  }
  
  #text2 {
    font-size: 35px !important;
    margin-top: 5px;
    font-weight: bold;
    color: rgb(255, 255, 255);
    font-size: 1.5em; /* Tamaño de fuente relativo */
  }

  /* ANIMACION PARA EVENTOS EN INDEX */
  .desvanecido {
    overflow: hidden;
    background-color: #f5f5f5;
  }

  .seccion {
    display: none;
    padding: 10px;
    border: 1px solid #f5f5f5;
    margin: 10px 0;
    animation: aparecer 0.5s forwards;
  }

  .seccion1 {
    display: block;
    background-color: #f5f5f5;
  }

  .boton-ver-mas {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;   
    color: white;
    border: none;
    cursor: pointer;
  }

  @keyframes aparecer {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }