@import url(https://fonts.googleapis.com/css?family=Lato);

@import url(https://fonts.googleapis.com/css?family=Open Sans);

#qa {
   margin: 25px 25px 100px 25px; 

}

.faq-heading {
  font-family: Lato;   
  font-weight: 500;
  font-size: 21px;             <!-- Jorge 19px  -->
   -webkit-transition: text-indent 0.2s;
  text-indent: 20px;
  color: #000;
}

.faq-text {
  font-family: Open Sans;   
  font-weight: 400;                  <!--  400  -->
  color: #919191;
  width:95%;
  padding-left:10px;                <!-- Jorge 20px  -->
  margin-bottom:5px; 
  font-size: 18px;             <!-- new -->
}

.faq {
  width: 85%;                               <!-- Jorge 1000 o 800px  -->
  margin-top: 60em;                   <!-- 60em  -->                       
  margin-bottom: 60px;                      <!-- 30em  -->
  margin-right: auto;
  margin-left: 5em;            <!-- auto  -->           
  background: white;   <!-- Jorge white   -->                                       <!-- Jorge white   -->
  border-radius: 4px;
  position: relative;
  border: px solid #E1E1E1;                      <!-- 1px  -->
  padding-top: 5em;                               <!-- 1em  -->
}
.faq-container{
  display: flex;
  flex-direction: column;
  background-color:#d3d9de;  
  border-radius: 12px;        <!-- nuevo  --> 
  margin: 10px; <!-- nuevo  --> 
}
.faq label {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  height: 23px;                            <!-- 56px -->
  padding-top:2em;          
  margin-bottom: 5px;                 <!-- 1px -->
 /* margin-bottom: 5em; */
  /* background-color: #ff8400;                    <!-- no func  --> */
  border-bottom: 1px solid #999999;
}

.faq input[type="checkbox"] {
  display: none;
}

.faq .faq-arrow {
  width: 5px;
  height: 5px;
  transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  transition: transform 0.8s, -webkit-transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-top: 2px solid rgba(0, 0, 0, 0.33);
  border-right: 2px solid rgba(0, 0, 0, 0.33);
  float: right;
  position: relative;
  top: -30px;
  right: 27px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

 .faq input[type="checkbox"]:checked + label > .faq-arrow {
  transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  transition: transform 0.8s, -webkit-transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
 .faq input[type="checkbox"]:checked + label {
  display: block;
  background: rgba(255,255,255,255) !important;
  color: #000;
  height: 225px;
  transition: height 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

 .faq input[type='checkbox']:not(:checked) + label {
  display: block;
  transition: height 0.8s;
  height: 60px;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.faq-text{
  padding: 2em;
}

::-webkit-scrollbar {
  display: ;                                   <!--  none -->
}
/* Grid para los 6 vídeos */
    .video-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 1rem;
      padding: 1rem;
    }

    /* Wrapper para mantener proporción 16:9 */
    .video-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%; /* 16/9 = 0.5625 */
      background: #000;
      overflow: hidden;
    }

    .video-wrapper iframe,
    .video-wrapper video {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border: 0;
    }