h1:hover {           /*cada vez que el mouse pase por el h1*/
  color: #ffc83f     /* la letra tendra ese color*/
}
h1 {
  background: #000000;  /*el fondo es negro*/
  margin: 0;            /*margen de 0 para que se aline a los menus*/  
  text-align: center;    /*centra el texto en medio */          
  padding: 20px;   /*una distancia del texto de con la caja h1 de 20 px*/
  color: #FFFFFF;  /*un color de letra blanca*/
}
.section1__div1 {
  width: 80%; /*tendra un ancho el contenido del 80% del screen*/
  margin: 2% auto; /*margen de arriba y abajo de 2% y en los costados auto para que se centre*/
  border: 2px solid #000000;    /*tamaño del borde,la forma,color*/
  padding: 2%;   /*la distancia a los parrafos es de2%*/
  background: rgba(230, 230, 230, 0.9); /*fondo de pantalla en rgba con una trasparencia de 0.8*/
}
.section1__div1__div1 {
  display: flex;
  flex-wrap: wrap;
  background: transparent;
  margin: 2% ;
  justify-content: center;
  padding: 40px;
  padding: 0;
}
.cuadro { /*se aplica a cada cuadro*/
  width: 290px; /*ancho del cuadro*/
  height: 500px; /*alto del cuadro*/
  display: inline-block;  /*los cuadros tienen compartamiento de linea y de bloque*/
  margin: 2% 2%; /*margen entre los cuadros es del 2%*/
  border-radius: 2px; /*borde radial de 8px*/
  border-top-right-radius: 10% 30%; /*borde arriba-derecha de 10% y 30%*/
  box-shadow:  -3px -3px 0.1em #000,3px 3px 0.1em #000; /*sobras en los diferentes ejes de coordenadas*/
  background: beige; /*color de fondo de el cuadro*/
}
.cuadro_div-imagen {
  height: 50%; /*la caja de la imagen tiene una altura de la mitad del cuadro*/
  width: 100%; /*tomo el ancho total del cuadro*/
  display: flex;  /*para que se adapte al cuadro*/
  justify-content: center; /*en el eje x se centra*/
  align-items: center; /*en el eje y se centra*/
  background: transparent; /*fondo transparente*/
}
.cuadro-imagen {
  height: 215px; /*alto de 215 px*/
  width: 165px; /*ancho de 165 px*/
  object-fit: cover; /*la imagen tome mayor resolucion deacuerdo a sus medidas*/
}
.cuadro_tabla {
  height: 50%; /*la tabla toma el 50% de lo que tiene el cuadro*/
}
table {
  border-collapse: collapse; /*hace que los bordes no se separen*/
  margin-right: auto; /*centra el texto*/
  margin-left: auto; /*centra el texto*/
  width: 100%;/*la tabla toma un ancho del total de la caja*/
  height: 100%;/*la tabla toma un alto del total de la caja*/
}
td,th{
  font-size: 9.5px; /*tamaño de letra de 9.5 para que no sobresalga la tabla*/
  border: 1px solid black; /*el borde es de 1px tipo solid y negro*/
  padding: 5px 10px 5px 10px; /*una distancia entre las celdas con el contenido*/
}
th {
  background: #000; /*el fondo de la celda de la cabecera*/
  color: #ffc83f; /*color de texto*/
}
td {
  text-align: left;
}