body{

  background: #ecf0f1;

}

/* Estilos generales del acordeón */

.Yujiro{

  font-size: 16px;

}



.accordion {

  border: none;

  margin-bottom: 2px;

  /* margin-left: 50px; */

  border-radius: 1.2rem;

  background: #ecf0f1;

  margin: auto;

  /* width: 320px; */

  /* width: 100%; */

  justify-content: center; 

}

.Baki{

  font-size: 20px;
  top: 15px;
  /* position: relative; */

}


.accordion-item {

  border-bottom: 1px solid #ddd;

  padding-top: 7px;

  padding-bottom: 7px;

  border-radius: 1.2rem;

  border: none;

  margin-bottom: 2px;

  background: #ecf0f1;
  width: 100%;
 min-width: 320px;

}



.accordion-header {

  cursor: pointer;

  padding: 20px;

  position: relative;

  transition: background-color 0.3s;

  border-radius: 12px;

  display: flex; /* Agrega esta línea para permitir el posicionamiento de la flecha y el título */

  align-items: center; /* Agrega esta línea para centrar verticalmente la flecha y el título */

  background: #ffffff;

  line-height: 20px;

  padding: 7px 11px;

  border-radius: 1.2rem;

  height: 50px;
  
  width: 100%;


}

.accordion-header p {
  margin: 0;

  width: 90%;}

  


.accordion-header:hover p {
    font-weight: bold;
}  

.accordion-header:hover {

  background: #ffce00;

  color: #000;

  font-weight: 900;

  border-radius: 1.2rem;}



.accordion-content {

  display: none;

  padding: 10px;

  background-color: transparent; /* Cambia "white" a "transparent" para hacer el fondo transparente */

}


.accordion-content p {
  text-align: justify;
}

.accordion-content li {
  list-style: disc;
  margin-left: 1em;
  text-align: justify;
}

.ancho-accordion{
  width: 300px;
}



.chevron {

  position: absolute;

  top: 50%;

  right:40px;

  transform: translateY(-50%);

  transition: transform 0.5s;

}



.accordion-item.active .chevron {

  transform: translateY(-50%) rotate(180deg);

}

@media (min-width: 600px) {
  .Yujiro{

    font-size: 20px;
  
  }
  .accordion-header {
    
    width: 600px;
  }
  .accordion-item {
    width: 600px;
  }
}
.ancho-accordion{
  width: 600px;
}

@media screen and (min-width: 1000px){



  body{

    background: #ecf0f1;

  }



  .Yujiro{

    font-size: 25px;

  }



  .Baki{

    font-size: 20px;
    top: 20px;
    /* position: relative; */

  }

  .col-lg-8.mx-auto {
    padding: 0;
}

  /* Estilos generales del acordeón */

  .accordion {

    border: none;

    margin-bottom: 2px;

    border-radius: 1.2rem;

    background: #ecf0f1;

    width: 700px;

    justify-content: center; /* Añade esta línea para centrar horizontalmente el acordeón */

  }

  

  .accordion-item {

    border-bottom: 1px solid #ddd;

    padding-top: 7px;

    padding-bottom: 7px;

    border-radius: 1.2rem;

    border: none;

    margin-bottom: 2px;

    background: #ecf0f1;
    width: 800px;

  }

  

  .accordion-header {

    cursor: pointer;

    padding: 10px;

    position: relative;

    transition: background-color 0.3s;

    border-radius: 12px;

    display: flex; /* Agrega esta línea para permitir el posicionamiento de la flecha y el título */

    align-items: center; /* Agrega esta línea para centrar verticalmente la flecha y el título */

    background: #ffffff;

    padding-top: 7px;

    padding-bottom: 7px;

    border-radius: 1.2rem;

    height: 50px;

    width: 800px;

  }

  

  .accordion-header:hover {

    background: #ffce00;

    color: #000;

    padding-top: 7px;

    padding-bottom: 7px;

    border-radius: 1.2rem;}

    .accordion-header p:hover {
      
    font-weight: 900;}
  

  .accordion-content {

    display: none;

    text-align: justify;

    background-color: transparent; /* Cambia "white" a "transparent" para hacer el fondo transparente */

    width: 800px;

  }

  

  .chevron {

    position: absolute;

    top: 50%;

    right: 40px;

    transform: translateY(-50%);

    transition: transform 0.5s;

  }

  

  .accordion-item.active .chevron {

    transform: translateY(-50%) rotate(180deg);

  }
  .ancho-accordion{
    width: 800px;
  }



}