:root {
   --color-fondo: #F9F0E1;
   /* Azul */
   --color-claro: #B2A58D;
   /* Verde */
   --color-oscuro: #232E2D;
   /* Rojo */
   background-color: var(--color-fondo);
}
p, li {
   text-align: justify;
   font-size: 22px;
   margin: 15px;
}


.cabecera { 
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;  
   background-color: var(--color-fondo);
   display: flexbox;
   align-content: end;
   justify-items: end;
}
nav {
   display: flexbox;
   text-align: right;
   justify-content: end;
   padding: 5px 0px;
   gap: 4px;
   margin-right: 20px;
    }

 
 h1,h2 {
    text-align: center;
 }
 h2 {
   font-size: 38px;
 }
 
 button {
   
   font-size: large;
    /* max-height: 50px; */
    padding: 0px 5px;
    /* margin-right: 20px; */
    /* margin-top: 10px; */
    border-radius: 4px;
    border: none;
    background-color: var(--color-fondo);
    cursor: pointer;
    
  }
  
  button:hover {
    border: 1px solid var(--color-oscuro);
  }
 .banner {
    border-radius: 20px;
    margin-top: 40px; 
    width: 100%;
    height: auto;
 }
.linea {
   width: 100%;
   height: 4px;
   background-color: var(--color-oscuro);
}
.articulo {
   display: flow-root;
   justify-items: start;
   margin-bottom: 8%;
   margin-left: auto;
   margin-right: auto;
}
.imgartl {
   float: left;
   margin: 20px;
   border-radius: 12px;
   /* width: 30%;
   height: max-content; */
}
.imgartr {
   float: right;
   margin: 20px;
   border-radius: 12px;
   /* width: 30%;
   height: max-content; */
}
.textart {
   width: auto;
   height: max-content;
}
.colab {
   display: block;
   width: 100%; /* Adjust as needed */
   margin: 0 auto; /* This centers the div horizontally */
   text-align: center; /* This centers the images within the div */
   justify-items: start;
}
.colab img {
   width: 8%;
   height: 8%;
   padding: 20px;
}
.videosection {
   display: flex;
   padding: 20px;
   justify-content:flex-start;
   align-items: flex-start; 
}
.textvid {
   width: 70%;

}
.videosection iframe {
   border-radius: 12px;
}